diff --git a/Front/SoftSecurity/src/app/alerta-detail/alerta-detail.component.css b/Front/SoftSecurity/src/app/alerta-detail/alerta-detail.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/Front/SoftSecurity/src/app/alerta-detail/alerta-detail.component.html b/Front/SoftSecurity/src/app/alerta-detail/alerta-detail.component.html
new file mode 100644
index 0000000..a41a180
--- /dev/null
+++ b/Front/SoftSecurity/src/app/alerta-detail/alerta-detail.component.html
@@ -0,0 +1,14 @@
+<div *ngIf="alerta">
+	<h2>{{ alerta.tipoAlerta }}</h2>
+
+	<div><span>Cantidad Alertas: </span>{{ alerta.cantidadAlertas }}</div>
+
+	<div>
+    	<label>Tipo Alerta: 
+      	<input [(ngModel)]="alerta.tipoAlerta" placeholder="Tipo Alerta">
+    	</label>
+	</div>
+	
+	<button (click)="goBack()">Retroceder</button>
+	
+</div>
\ No newline at end of file
diff --git a/Front/SoftSecurity/src/app/alerta-detail/alerta-detail.component.spec.ts b/Front/SoftSecurity/src/app/alerta-detail/alerta-detail.component.spec.ts
new file mode 100644
index 0000000..4ab22a0
--- /dev/null
+++ b/Front/SoftSecurity/src/app/alerta-detail/alerta-detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertaDetailComponent } from './alerta-detail.component';
+
+describe('AlertaDetailComponent', () => {
+  let component: AlertaDetailComponent;
+  let fixture: ComponentFixture<AlertaDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AlertaDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlertaDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Front/SoftSecurity/src/app/alerta-detail/alerta-detail.component.ts b/Front/SoftSecurity/src/app/alerta-detail/alerta-detail.component.ts
new file mode 100644
index 0000000..fa87b9b
--- /dev/null
+++ b/Front/SoftSecurity/src/app/alerta-detail/alerta-detail.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit, Input} from '@angular/core';
+import { Alerta } from '../alerta';
+import { ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+
+import { AlertaService } from '../alerta.service';
+
+@Component({
+  selector: 'app-alerta-detail',
+  templateUrl: './alerta-detail.component.html',
+  styleUrls: ['./alerta-detail.component.css']
+})
+export class AlertaDetailComponent implements OnInit {
+
+  @Input() alerta: Alerta;
+
+  constructor(
+  private route: ActivatedRoute,
+  private alertaService: AlertaService,
+  private location: Location
+  ) { }
+
+  ngOnInit(): void {
+    this.getAlerta();
+  }
+
+  getAlerta(): void {
+    const cantidadAlertas = +this.route.snapshot.paramMap.get('cantidadAlertas');
+    this.alertaService.getAlerta(cantidadAlertas).subscribe(alerta => this.alerta = alerta);
+  }
+
+  goBack(): void {
+  this.location.back();
+  }
+}
diff --git a/Front/SoftSecurity/src/app/alerta.service.spec.ts b/Front/SoftSecurity/src/app/alerta.service.spec.ts
new file mode 100644
index 0000000..e335f31
--- /dev/null
+++ b/Front/SoftSecurity/src/app/alerta.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { AlertaService } from './alerta.service';
+
+describe('AlertaService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AlertaService]
+    });
+  });
+
+  it('should be created', inject([AlertaService], (service: AlertaService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/Front/SoftSecurity/src/app/alerta.service.ts b/Front/SoftSecurity/src/app/alerta.service.ts
new file mode 100644
index 0000000..7cc9709
--- /dev/null
+++ b/Front/SoftSecurity/src/app/alerta.service.ts
@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Alerta } from './alerta';
+import { ALERTAS } from './alertas';
+import { Observable, of } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class AlertaService {
+
+  constructor() { }
+
+  getAlertas(): Observable<Alerta[]> {
+    // TODO: send the message _after_ fetching the heroes
+    //this.mensajeService.add(`AlertaService: fetched alertas`);
+    return of(ALERTAS);
+  }
+
+  getAlerta(cantidadAlertas: number): Observable<Alerta> {
+    // TODO: send the message _after_ fetching the heroes
+    //this.mensajeService.add(`HeroService: fetched hero cantidadAlertas=${cantidadAlertas}`);
+    return of(ALERTAS.find(alerta => alerta.cantidadAlertas === cantidadAlertas));
+  }
+
+}
diff --git a/Front/SoftSecurity/src/app/alerta.ts b/Front/SoftSecurity/src/app/alerta.ts
new file mode 100644
index 0000000..16b1108
--- /dev/null
+++ b/Front/SoftSecurity/src/app/alerta.ts
@@ -0,0 +1,4 @@
+export class Alerta {
+  cantidadAlertas: number;
+  tipoAlerta: string;
+}
diff --git a/Front/SoftSecurity/src/app/alerta/alerta.component.css b/Front/SoftSecurity/src/app/alerta/alerta.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/Front/SoftSecurity/src/app/alerta/alerta.component.html b/Front/SoftSecurity/src/app/alerta/alerta.component.html
new file mode 100644
index 0000000..6b80b78
--- /dev/null
+++ b/Front/SoftSecurity/src/app/alerta/alerta.component.html
@@ -0,0 +1,3 @@
+<p>
+  alerta works!
+</p>
diff --git a/Front/SoftSecurity/src/app/alerta/alerta.component.spec.ts b/Front/SoftSecurity/src/app/alerta/alerta.component.spec.ts
new file mode 100644
index 0000000..2bf0d21
--- /dev/null
+++ b/Front/SoftSecurity/src/app/alerta/alerta.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertaComponent } from './alerta.component';
+
+describe('AlertaComponent', () => {
+  let component: AlertaComponent;
+  let fixture: ComponentFixture<AlertaComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AlertaComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlertaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Front/SoftSecurity/src/app/alerta/alerta.component.ts b/Front/SoftSecurity/src/app/alerta/alerta.component.ts
new file mode 100644
index 0000000..a72aa5d
--- /dev/null
+++ b/Front/SoftSecurity/src/app/alerta/alerta.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-alerta',
+  templateUrl: './alerta.component.html',
+  styleUrls: ['./alerta.component.css']
+})
+export class AlertaComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/Front/SoftSecurity/src/app/alertas.ts b/Front/SoftSecurity/src/app/alertas.ts
new file mode 100644
index 0000000..19ecbaa
--- /dev/null
+++ b/Front/SoftSecurity/src/app/alertas.ts
@@ -0,0 +1,6 @@
+import { Alerta } from './alerta';
+
+export const ALERTAS: Alerta[] = [
+  { cantidadAlertas: 4, tipoAlerta: 'puerta Abierta'},
+  { cantidadAlertas: 7, tipoAlerta: 'contrasenha Incorrecta'}
+];
diff --git a/Front/SoftSecurity/src/app/app-routing.module.spec.ts b/Front/SoftSecurity/src/app/app-routing.module.spec.ts
new file mode 100644
index 0000000..d68ef06
--- /dev/null
+++ b/Front/SoftSecurity/src/app/app-routing.module.spec.ts
@@ -0,0 +1,13 @@
+import { AppRoutingModule } from './app-routing.module';
+
+describe('AppRoutingModule', () => {
+  let appRoutingModule: AppRoutingModule;
+
+  beforeEach(() => {
+    appRoutingModule = new AppRoutingModule();
+  });
+
+  it('should create an instance', () => {
+    expect(appRoutingModule).toBeTruthy();
+  });
+});
diff --git a/Front/SoftSecurity/src/app/app-routing.module.ts b/Front/SoftSecurity/src/app/app-routing.module.ts
new file mode 100644
index 0000000..8f9db14
--- /dev/null
+++ b/Front/SoftSecurity/src/app/app-routing.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { SoftsecurityComponent } from './softsecurity/softsecurity.component';
+import { AlertaDetailComponent } from './alerta-detail/alerta-detail.component';
+
+
+const routes: Routes = [
+  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
+  { path: 'detail/:id', component: AlertaDetailComponent },
+  { path: 'alertas', component: SoftsecurityComponent }
+];
+
+@NgModule({
+  imports: [ RouterModule.forRoot(routes) ],
+  exports: [ RouterModule ]
+})
+
+export class AppRoutingModule {}
+
+
+
diff --git a/Front/SoftSecurity/src/app/app.component.css b/Front/SoftSecurity/src/app/app.component.css
new file mode 100644
index 0000000..e48eab8
--- /dev/null
+++ b/Front/SoftSecurity/src/app/app.component.css
@@ -0,0 +1,32 @@
+/* Application-wide Styles */
+h1 {
+  color: #5a001b;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 800%;
+}
+h2, h3 {
+  color: #444;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+nav a:visited, a:link {
+  color: #607D8B;
+}
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+nav a.active {
+  color: #039be5;
+}
diff --git a/Front/SoftSecurity/src/app/app.component.html b/Front/SoftSecurity/src/app/app.component.html
new file mode 100644
index 0000000..2b9d366
--- /dev/null
+++ b/Front/SoftSecurity/src/app/app.component.html
@@ -0,0 +1,19 @@
+<!--The content below is only a placeholder and can be replaced.-->
+<body>	
+		
+	<div style="text-align:center">
+		<h1>{{title}}</h1>
+    	<nav>
+    	<br>
+  		<a routerLink="/alertas"> Alertas</a>
+		</nav>
+    	<router-outlet></router-outlet>
+    	<app-mapa></app-mapa>
+	</div>
+
+</body>
+
+
+
+
+
diff --git a/Front/SoftSecurity/src/app/app.component.spec.ts b/Front/SoftSecurity/src/app/app.component.spec.ts
new file mode 100644
index 0000000..bcbdf36
--- /dev/null
+++ b/Front/SoftSecurity/src/app/app.component.spec.ts
@@ -0,0 +1,27 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app');
+  }));
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+  }));
+});
diff --git a/Front/SoftSecurity/src/app/app.component.ts b/Front/SoftSecurity/src/app/app.component.ts
new file mode 100644
index 0000000..0fe0a31
--- /dev/null
+++ b/Front/SoftSecurity/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'SoftSecurity';
+}
diff --git a/Front/SoftSecurity/src/app/app.module.ts b/Front/SoftSecurity/src/app/app.module.ts
new file mode 100644
index 0000000..8d2bcf8
--- /dev/null
+++ b/Front/SoftSecurity/src/app/app.module.ts
@@ -0,0 +1,33 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+import { SoftsecurityComponent } from './softsecurity/softsecurity.component';
+
+import { FormsModule } from '@angular/forms';
+import { AlertaDetailComponent } from './alerta-detail/alerta-detail.component';
+import { AppRoutingModule } from './/app-routing.module';
+import { MapaComponent } from './mapa/mapa.component';
+import { AlertaComponent } from './alerta/alerta.component';
+import { FalloComponent } from './fallo/fallo.component';
+import { FalloDetailComponent } from './fallo-detail/fallo-detail.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    SoftsecurityComponent,
+    AlertaDetailComponent,
+    MapaComponent,
+    AlertaComponent,
+    FalloComponent,
+    FalloDetailComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    AppRoutingModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/Front/SoftSecurity/src/app/fallo-detail/fallo-detail.component.css b/Front/SoftSecurity/src/app/fallo-detail/fallo-detail.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/Front/SoftSecurity/src/app/fallo-detail/fallo-detail.component.html b/Front/SoftSecurity/src/app/fallo-detail/fallo-detail.component.html
new file mode 100644
index 0000000..65b1996
--- /dev/null
+++ b/Front/SoftSecurity/src/app/fallo-detail/fallo-detail.component.html
@@ -0,0 +1,3 @@
+<p>
+  fallo-detail works!
+</p>
diff --git a/Front/SoftSecurity/src/app/fallo-detail/fallo-detail.component.spec.ts b/Front/SoftSecurity/src/app/fallo-detail/fallo-detail.component.spec.ts
new file mode 100644
index 0000000..843de29
--- /dev/null
+++ b/Front/SoftSecurity/src/app/fallo-detail/fallo-detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FalloDetailComponent } from './fallo-detail.component';
+
+describe('FalloDetailComponent', () => {
+  let component: FalloDetailComponent;
+  let fixture: ComponentFixture<FalloDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FalloDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FalloDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Front/SoftSecurity/src/app/fallo-detail/fallo-detail.component.ts b/Front/SoftSecurity/src/app/fallo-detail/fallo-detail.component.ts
new file mode 100644
index 0000000..dbae23b
--- /dev/null
+++ b/Front/SoftSecurity/src/app/fallo-detail/fallo-detail.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-fallo-detail',
+  templateUrl: './fallo-detail.component.html',
+  styleUrls: ['./fallo-detail.component.css']
+})
+export class FalloDetailComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/Front/SoftSecurity/src/app/fallo/fallo.component.css b/Front/SoftSecurity/src/app/fallo/fallo.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/Front/SoftSecurity/src/app/fallo/fallo.component.html b/Front/SoftSecurity/src/app/fallo/fallo.component.html
new file mode 100644
index 0000000..f30bdc1
--- /dev/null
+++ b/Front/SoftSecurity/src/app/fallo/fallo.component.html
@@ -0,0 +1,3 @@
+<p>
+  fallo works!
+</p>
diff --git a/Front/SoftSecurity/src/app/fallo/fallo.component.spec.ts b/Front/SoftSecurity/src/app/fallo/fallo.component.spec.ts
new file mode 100644
index 0000000..23c71e5
--- /dev/null
+++ b/Front/SoftSecurity/src/app/fallo/fallo.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FalloComponent } from './fallo.component';
+
+describe('FalloComponent', () => {
+  let component: FalloComponent;
+  let fixture: ComponentFixture<FalloComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FalloComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FalloComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Front/SoftSecurity/src/app/fallo/fallo.component.ts b/Front/SoftSecurity/src/app/fallo/fallo.component.ts
new file mode 100644
index 0000000..fd27122
--- /dev/null
+++ b/Front/SoftSecurity/src/app/fallo/fallo.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-fallo',
+  templateUrl: './fallo.component.html',
+  styleUrls: ['./fallo.component.css']
+})
+export class FalloComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/Front/SoftSecurity/src/app/imagenes/alerta.png b/Front/SoftSecurity/src/app/imagenes/alerta.png
new file mode 100644
index 0000000..dfdf2e2
Binary files /dev/null and b/Front/SoftSecurity/src/app/imagenes/alerta.png differ
diff --git a/Front/SoftSecurity/src/app/imagenes/mapa.png b/Front/SoftSecurity/src/app/imagenes/mapa.png
new file mode 100644
index 0000000..ccf8f52
Binary files /dev/null and b/Front/SoftSecurity/src/app/imagenes/mapa.png differ
diff --git a/Front/SoftSecurity/src/app/imagenes/menu.png b/Front/SoftSecurity/src/app/imagenes/menu.png
new file mode 100644
index 0000000..ee45964
Binary files /dev/null and b/Front/SoftSecurity/src/app/imagenes/menu.png differ
diff --git a/Front/SoftSecurity/src/app/imagenes/seguridad.jpg b/Front/SoftSecurity/src/app/imagenes/seguridad.jpg
new file mode 100644
index 0000000..4eb36ee
Binary files /dev/null and b/Front/SoftSecurity/src/app/imagenes/seguridad.jpg differ
diff --git a/Front/SoftSecurity/src/app/mapa/mapa.component.css b/Front/SoftSecurity/src/app/mapa/mapa.component.css
new file mode 100644
index 0000000..c63d7e1
--- /dev/null
+++ b/Front/SoftSecurity/src/app/mapa/mapa.component.css
@@ -0,0 +1,5 @@
+p.mapa {
+	margin-left:100px;
+	line-height:75px;
+	font-size:180%;
+}
\ No newline at end of file
diff --git a/Front/SoftSecurity/src/app/mapa/mapa.component.html b/Front/SoftSecurity/src/app/mapa/mapa.component.html
new file mode 100644
index 0000000..70f71b5
--- /dev/null
+++ b/Front/SoftSecurity/src/app/mapa/mapa.component.html
@@ -0,0 +1,11 @@
+
+  <div class="row">
+    <div class="col-md-12">
+      <div class="text-center">
+        <h3>
+          <div id="gmap" style="width:100%;height:400px">
+          </div>
+        </h3>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/Front/SoftSecurity/src/app/mapa/mapa.component.spec.ts b/Front/SoftSecurity/src/app/mapa/mapa.component.spec.ts
new file mode 100644
index 0000000..37349b4
--- /dev/null
+++ b/Front/SoftSecurity/src/app/mapa/mapa.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MapaComponent } from './mapa.component';
+
+describe('MapaComponent', () => {
+  let component: MapaComponent;
+  let fixture: ComponentFixture<MapaComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MapaComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MapaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Front/SoftSecurity/src/app/mapa/mapa.component.ts b/Front/SoftSecurity/src/app/mapa/mapa.component.ts
new file mode 100644
index 0000000..fac4391
--- /dev/null
+++ b/Front/SoftSecurity/src/app/mapa/mapa.component.ts
@@ -0,0 +1,101 @@
+import { Component, OnInit } from '@angular/core';
+import { ViewChild } from '@angular/core';
+import { } from '@types/googlemaps';
+
+@Component({
+  selector: 'app-mapa',
+  templateUrl: './mapa.component.html',
+  styleUrls: ['./mapa.component.css']
+})
+export class MapaComponent implements OnInit {
+
+  @ViewChild('gmap') gmapElement: any;
+  map: google.maps.Map;
+
+  latitude: any;
+  longitude: any;
+
+  startPos: any;
+  nudge = document.getElementById('nudge');
+  nudgeTimeoutId = setTimeout(this.showNudgeBanner, 5000);
+
+  constructor() { }
+
+  ngOnInit() {
+    const mapProp = {
+      center: new google.maps.LatLng(4.6015, -74.0664),
+      zoom: 15,
+      mapTypeId: google.maps.MapTypeId.ROADMAP
+    };
+    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
+    // check for Geolocation support
+    if (navigator.geolocation) {
+      console.log('Geolocation is supported!');
+      let watchId = navigator.geolocation.watchPosition(function(position) {
+        this.latitude =  position.coords.latitude;
+        this.longitude = position.coords.longitude;
+      });
+    } else {
+      console.log('Geolocation is not supported for this Browser/OS.');
+    }
+
+  }
+
+  setMapType(mapTypeId: string) {
+    this.map.setMapTypeId(mapTypeId);
+  }
+
+  setCenter() {
+    this.map.setCenter(new google.maps.LatLng(this.latitude, this.longitude));
+
+    const location = new google.maps.LatLng(this.latitude, this.longitude);
+
+    const marker = new google.maps.Marker({
+      position: location,
+      map: this.map,
+      title: 'Got you!'
+    });
+
+    marker.addListener('click', this.simpleMarkerHandler);
+
+    marker.addListener('click', () => {
+      this.markerHandler(marker);
+    });
+  }
+
+  simpleMarkerHandler() {
+    alert('Simple Component\'s function...');
+  }
+
+  markerHandler(marker: google.maps.Marker) {
+    alert('Marker\'s Title: ' + marker.getTitle());
+  }
+
+  showNudgeBanner() {
+    this.nudge.style.display = 'block';
+  }
+
+  hideNudgeBanner() {
+    this.nudge.style.display = 'none';
+  }
+
+  geoSuccess(position) {
+    this.hideNudgeBanner();
+    // We have the location, don't display banner
+    clearTimeout(this.nudgeTimeoutId);
+
+    // Do magic with location
+    this.startPos = position;
+    document.getElementById('startLat').innerHTML = this.startPos.coords.latitude;
+    document.getElementById('startLon').innerHTML = this.startPos.coords.longitude;
+  }
+
+  geoError(error) {
+    switch (error.code) {
+      case error.TIMEOUT:
+        // The user didn't accept the callout
+        this.showNudgeBanner();
+        break;
+    }
+  }
+}
\ No newline at end of file
diff --git a/Front/SoftSecurity/src/app/residencia.ts b/Front/SoftSecurity/src/app/residencia.ts
new file mode 100644
index 0000000..571c6c3
--- /dev/null
+++ b/Front/SoftSecurity/src/app/residencia.ts
@@ -0,0 +1,4 @@
+export class Residencia {
+  nombre: string;
+  numero: number;
+}
diff --git a/Front/SoftSecurity/src/app/softsecurity/softsecurity.component.css b/Front/SoftSecurity/src/app/softsecurity/softsecurity.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/Front/SoftSecurity/src/app/softsecurity/softsecurity.component.html b/Front/SoftSecurity/src/app/softsecurity/softsecurity.component.html
new file mode 100644
index 0000000..12194a4
--- /dev/null
+++ b/Front/SoftSecurity/src/app/softsecurity/softsecurity.component.html
@@ -0,0 +1,23 @@
+<h2>{{ residencia.nombre }}</h2>
+
+<div><span>Numero: </span>{{ residencia.numero }}</div>
+
+<div>
+    <label>Nombre:
+      <input [(ngModel)]="residencia.nombre" placeholder="Nombre">
+    </label>
+</div>
+
+<h2>Alertas</h2>
+<ul class = "alertas">
+	<li *ngFor="let alerta of alertas">
+		<a routerLink="/detail/{{alerta.cantidadAlertas}}">
+	
+			<span class="badge">Cantidad Alertas: {{alerta.cantidadAlertas}}</span> Tipo Alerta: {{alerta.tipoAlerta}}
+			<app-alerta-detail [alerta]="alerta"></app-alerta-detail>
+			
+		</a>
+	</li>	
+</ul>
+
+
diff --git a/Front/SoftSecurity/src/app/softsecurity/softsecurity.component.spec.ts b/Front/SoftSecurity/src/app/softsecurity/softsecurity.component.spec.ts
new file mode 100644
index 0000000..40602b8
--- /dev/null
+++ b/Front/SoftSecurity/src/app/softsecurity/softsecurity.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SoftsecurityComponent } from './softsecurity.component';
+
+describe('SoftsecurityComponent', () => {
+  let component: SoftsecurityComponent;
+  let fixture: ComponentFixture<SoftsecurityComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SoftsecurityComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SoftsecurityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Front/SoftSecurity/src/app/softsecurity/softsecurity.component.ts b/Front/SoftSecurity/src/app/softsecurity/softsecurity.component.ts
new file mode 100644
index 0000000..6ead0d4
--- /dev/null
+++ b/Front/SoftSecurity/src/app/softsecurity/softsecurity.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { Residencia } from '../residencia';
+import { Alerta } from '../alerta';
+import { AlertaService } from '../alerta.service';
+
+@Component({
+  selector: 'app-softsecurity',
+  templateUrl: './softsecurity.component.html',
+  styleUrls: ['./softsecurity.component.css']
+})
+export class SoftsecurityComponent implements OnInit {
+
+  residencia: Residencia = {
+    nombre: 'Residencia 1',
+    numero: 1
+  };
+
+  alertas: Alerta[];
+
+  constructor( private alertaService: AlertaService ) { }
+
+  getAlertas(): void {
+    this.alertaService.getAlertas().subscribe(alertas => this.alertas = alertas);
+  }
+
+  ngOnInit() {
+    this.getAlertas();
+  }
+
+}
diff --git a/Front/SoftSecurity/src/assets/.gitkeep b/Front/SoftSecurity/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/Front/SoftSecurity/src/browserslist b/Front/SoftSecurity/src/browserslist
new file mode 100644
index 0000000..8e09ab4
--- /dev/null
+++ b/Front/SoftSecurity/src/browserslist
@@ -0,0 +1,9 @@
+# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+# For IE 9-11 support, please uncomment the last line of the file and adjust as needed
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+# IE 9-11
\ No newline at end of file
diff --git a/Front/SoftSecurity/src/environments/environment.prod.ts b/Front/SoftSecurity/src/environments/environment.prod.ts
new file mode 100644
index 0000000..3612073
--- /dev/null
+++ b/Front/SoftSecurity/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/Front/SoftSecurity/src/environments/environment.ts b/Front/SoftSecurity/src/environments/environment.ts
new file mode 100644
index 0000000..012182e
--- /dev/null
+++ b/Front/SoftSecurity/src/environments/environment.ts
@@ -0,0 +1,15 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * In development mode, to ignore zone related error stack frames such as
+ * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
+ * import the following file, but please comment it out in production mode
+ * because it will have performance impact when throw error
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
diff --git a/Front/SoftSecurity/src/favicon.ico b/Front/SoftSecurity/src/favicon.ico
new file mode 100644
index 0000000..8081c7c
Binary files /dev/null and b/Front/SoftSecurity/src/favicon.ico differ
diff --git a/Front/SoftSecurity/src/icono.ico b/Front/SoftSecurity/src/icono.ico
new file mode 100644
index 0000000..dcd0109
Binary files /dev/null and b/Front/SoftSecurity/src/icono.ico differ
diff --git a/Front/SoftSecurity/src/icono.png b/Front/SoftSecurity/src/icono.png
new file mode 100644
index 0000000..05bc4a3
Binary files /dev/null and b/Front/SoftSecurity/src/icono.png differ
diff --git a/Front/SoftSecurity/src/index.html b/Front/SoftSecurity/src/index.html
new file mode 100644
index 0000000..f614d02
--- /dev/null
+++ b/Front/SoftSecurity/src/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>SoftSecurity</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <link rel="shortcut icon" type="image/png" href="icono.png">
+  <link rel="stylesheet" type="text/css" href="styles.css" />
+</head>
+<body>
+
+		<div id="sesion">
+			<p class="textoSoft" style="font-weight: bold;">SoftSecurity</p>		
+		</div>
+		<div class="perfil">
+		</div>
+	
+	<div id="menu">		
+				
+		<div id="logo-principal"> </div>
+		<br>
+		<br>
+		
+		<div id="funciones-izq" class="funciones">
+			<div class="logo-alerta">			
+			</div>
+			<p class="texto">Alertas</p>
+			<br>
+			<div class="logo-mapa">			
+			</div>
+			<p class="texto">Mapa</p>
+		</div>
+		
+	</div>
+	
+	<app-root></app-root>
+  	
+</body>
+</html>
diff --git a/Front/SoftSecurity/src/karma.conf.js b/Front/SoftSecurity/src/karma.conf.js
new file mode 100644
index 0000000..b6e0042
--- /dev/null
+++ b/Front/SoftSecurity/src/karma.conf.js
@@ -0,0 +1,31 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../coverage'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};
\ No newline at end of file
diff --git a/Front/SoftSecurity/src/main.ts b/Front/SoftSecurity/src/main.ts
new file mode 100644
index 0000000..fc71950
--- /dev/null
+++ b/Front/SoftSecurity/src/main.ts
@@ -0,0 +1,13 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.log(err));
+
diff --git a/Front/SoftSecurity/src/polyfills.ts b/Front/SoftSecurity/src/polyfills.ts
new file mode 100644
index 0000000..d310405
--- /dev/null
+++ b/Front/SoftSecurity/src/polyfills.ts
@@ -0,0 +1,80 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import 'core-js/es6/reflect';
+
+
+/** Evergreen browsers require these. **/
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+import 'core-js/es7/reflect';
+
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+ // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+
+ /*
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ */
+// (window as any).__Zone_enable_cross_context_check = true;
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
diff --git a/Front/SoftSecurity/src/styles.css b/Front/SoftSecurity/src/styles.css
new file mode 100644
index 0000000..6b100f7
--- /dev/null
+++ b/Front/SoftSecurity/src/styles.css
@@ -0,0 +1,85 @@
+/* You can add global styles to this file, and also import other style files */
+* {
+	margin:0px;
+	padding:0px;
+	font-family: verdana;
+	color:#919293;	
+}
+
+div#menu {
+	position:absolute;
+	width:85px;
+	height:100%;
+	background-color:#2f3030;
+	overflow:hidden;
+	-webkit-transition: width 0.5s;
+}
+
+div#menu:hover {
+	width:170px;
+}
+
+div#logo-principal {
+	width:65px;
+	height:65px;
+	margin:10px;
+	background-image: url(app/imagenes/menu.png);
+}
+
+div.logo-alerta {
+	width:65px;
+	height:65px;
+	margin:10px;
+	background-image: url(app/imagenes/alerta.png);
+	float:left;
+}
+
+div.logo-mapa {
+	width:65px;
+	height:65px;
+	margin:10px;
+	background-image: url(app/imagenes/mapa.png);
+	float:left;
+}
+body {
+	
+	background-image: url(app/imagenes/seguridad.jpg); 
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-attachment: fixed;
+	background-size: cover;
+	background-color: #08697a;
+			
+}
+
+div.funciones {
+	width:150px;
+	height:65px;
+}
+
+div#funciones-izq {
+		
+}
+
+p.texto {
+	margin-left:80px;
+	line-height:75px;	
+}
+
+p.textoSoft {
+	margin-left:100px;
+	line-height:75px;
+	font-size:180%;	
+}
+
+div#sesion {
+	position:absolute;
+	width:100%;
+	height:75px;
+	background-color:#2f3030;
+}
+
+div.perfil {
+	margin-left:1000px;
+	line-height:75px;
+}
\ No newline at end of file
diff --git a/Front/SoftSecurity/src/test.ts b/Front/SoftSecurity/src/test.ts
new file mode 100644
index 0000000..1631789
--- /dev/null
+++ b/Front/SoftSecurity/src/test.ts
@@ -0,0 +1,20 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/Front/SoftSecurity/src/tsconfig.app.json b/Front/SoftSecurity/src/tsconfig.app.json
new file mode 100644
index 0000000..722c370
--- /dev/null
+++ b/Front/SoftSecurity/src/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "es2015",
+    "types": []
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/Front/SoftSecurity/src/tsconfig.spec.json b/Front/SoftSecurity/src/tsconfig.spec.json
new file mode 100644
index 0000000..8f7cede
--- /dev/null
+++ b/Front/SoftSecurity/src/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "module": "commonjs",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/Front/SoftSecurity/src/tslint.json b/Front/SoftSecurity/src/tslint.json
new file mode 100644
index 0000000..52e2c1a
--- /dev/null
+++ b/Front/SoftSecurity/src/tslint.json
@@ -0,0 +1,17 @@
+{
+    "extends": "../tslint.json",
+    "rules": {
+        "directive-selector": [
+            true,
+            "attribute",
+            "app",
+            "camelCase"
+        ],
+        "component-selector": [
+            true,
+            "element",
+            "app",
+            "kebab-case"
+        ]
+    }
+}