diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2b8a1808b96103a17c5d33ffb5cfca6f0dd82a56..6dc1f2843292b711eafb41c640116a12da20bb57 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -20,7 +20,6 @@ import { SignupComponent } from './signup/signup.component';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { LOCALE_ID } from '@angular/core';
-
 import { NavButtonComponent } from './header/nav-button/nav-button.component';
 
 // Firebase
@@ -58,6 +57,7 @@ import { GeocodeService } from './services/geocode.service';
 import { ResetpasswordComponent } from './resetpassword/resetpassword.component';
 import { ThankyouComponent } from './thankyou/thankyou.component';
 import { ClickOutsideDirective } from './directives/click-outside.directive';
+import { EuropeanDatePipe } from './community/european-date.pipe';
 
 
 @NgModule({
@@ -75,7 +75,8 @@ import { ClickOutsideDirective } from './directives/click-outside.directive';
     SignupComponent,
     ClickOutsideDirective,
     ResetpasswordComponent,
-    ThankyouComponent
+    ThankyouComponent,
+    EuropeanDatePipe
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/community/community.component.html b/src/app/community/community.component.html
index 4bb3ed2dfd41bd589c898eeb353cb1514a20d596..639041a376f76d486e3b7b9a0407f3c64d0bb15a 100644
--- a/src/app/community/community.component.html
+++ b/src/app/community/community.component.html
@@ -16,7 +16,7 @@
                 <div class="d-flex align-items-center justify-content-between mb-1">
                   <h6 class="mb-0">{{ user }}</h6>
                   <!-- TODO Fix Pipe -->
-                  <small class="small font-weight-bold">{{time | date:"yyyy-MM-dd"}}</small>
+                  <small class="small font-weight-bold">{{time | europeanDate}}</small>
                 </div>
                 <p class="font-italic mb-0 text-small">{{ message }}</p>
               </div>
diff --git a/src/app/community/european-date.pipe.spec.ts b/src/app/community/european-date.pipe.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e122e0bb2891b16518aa4eb00e516cc808133f5b
--- /dev/null
+++ b/src/app/community/european-date.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { EuropeanDatePipe } from './european-date.pipe';
+
+describe('EuropeanDatePipe', () => {
+  it('create an instance', () => {
+    const pipe = new EuropeanDatePipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/community/european-date.pipe.ts b/src/app/community/european-date.pipe.ts
new file mode 100644
index 0000000000000000000000000000000000000000..55c405a7060281835127257d962f68c4e67ce915
--- /dev/null
+++ b/src/app/community/european-date.pipe.ts
@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { LangService } from '../services/lang.service';
+
+@Pipe({
+  name: 'europeanDate'
+})
+export class EuropeanDatePipe implements PipeTransform {
+  constructor(private lang: LangService) { }
+
+  transform(value: any, pattern: string = 'yyyy-MM-dd'): any {
+    const datePipe: DatePipe = new DatePipe(this.lang.browserLang);
+    return datePipe.transform(value, pattern);
+  }
+
+}
diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css
index d00643877a9661a50b0e2b21a23e3f237e93f4ef..486fc49115430c447ac220b8af7391daadc5c6d2 100644
--- a/src/app/header/header.component.css
+++ b/src/app/header/header.component.css
@@ -10,6 +10,10 @@
   background-color: #8C93D8;
 }
 
+#logo {
+  padding-top: 20px;
+}
+
 .nav__list {
   list-style: none;
   margin: 0;
@@ -92,4 +96,4 @@ option {
 
 .logo-center {
   margin: auto;
-}
\ No newline at end of file
+}
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 17e1b7a24efada0abe100047ac25b59dbb56b293..ccfeed21754b42fb7c081e431a3b1cbf7fa21806 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,6 +1,6 @@
 <div class="vertical-nav col" id="sidebar">
-  <span>
-        <img src="../../assets/favicon.png" height=64>
+  <span id="logo">
+        <img src="../../assets/favicon.svg" height=96>
   </span>
 
   <nav id="nav">
@@ -27,4 +27,4 @@
         {{ lang }}</option>
     </select>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/login/login.component.css b/src/app/login/login.component.css
index eaf88920e46155ba0499174b75ada92f16913b57..bcde91846f5e20e55d7c1078993190c6b71bada0 100644
--- a/src/app/login/login.component.css
+++ b/src/app/login/login.component.css
@@ -7,6 +7,12 @@
   background-position:  bottom;
 }
 
+.row {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+}
+
 form {
   text-align: center;
   min-width: 300px;
@@ -20,42 +26,36 @@ form {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-left: 50%;
-  margin-top: 5%;
+  margin-top: 40px;
+}
+
+.form-container {
+  display: flex;
+  margin: 0 auto;
 }
 
 h2{
   padding-bottom: 5%;
-  font-family: Montserrat;
   font-weight: 500;
   font-size: 36px;
   line-height: 44px;
-  display: flex;
-  margin-left: 34%;
-  margin-top: 10%;
-  
+
   color: #2E3192;
   font-style: normal;
 }
 
 
-.form-group{
+.form-group {
   padding-top: 2%;
-  margin-left: 5%;
-  margin-right: 5%;
+  margin: 0 5%;
   text-align: left;
 }
 
-input[type=text] {
+input {
   background: #FFFFFF;
   border: 1px solid #EBDDFF;
   box-sizing: border-box;
-}
-
-input[type=password] {
-  background: #FFFFFF;
-  box-sizing: border-box;
-  border: 1px solid #EBDDFF;
+  width: 100%;
 }
 
 #line {
@@ -66,7 +66,7 @@ input[type=password] {
   margin-bottom: 15%;
 }
 
-.label{
+.label {
   font-family: Montserrat;
   font-weight: normal;
   font-size: 22px;
@@ -74,12 +74,12 @@ input[type=password] {
   display: flex;
   align-items: center;
   text-align: center;
-  
+
   color: #2E3192;
   font-style: normal;
 }
 
-input::placeholder{
+input::placeholder {
   font-family: Montserrat;
   font-weight: normal;
   font-size: 22px;
@@ -87,23 +87,15 @@ input::placeholder{
   display: flex;
   align-items: left;
   text-align: left;
-  
+
   color: #999FDE;
   font-style: normal;
 }
 
-button{
+button {
   background: #EBDDFF;
   box-sizing: border-box;
   border-radius: 30px;
-  font-family: Montserrat;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 24px;
-  line-height: 29px;
-  display: flex;
-  align-items: center;
-  text-align: center;
   border: 2px solid #2E3192;
 
   font-family: Montserrat;
@@ -116,10 +108,9 @@ button{
   color: #2E3192;
   font-style: normal;
 
-  margin-left: 25%;
-  margin-right: 25%;
+  margin: 0 auto;
+  padding: 1% 6%;
   margin-top: 10%;
-
 }
 
 #rectangle {
@@ -128,13 +119,21 @@ button{
   background: red;
 }
 
+.form-action {
+  padding-top: 2%;
+  margin: 0 5%;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  text-align: center;
+}
 
 #sos{
-  font-family: Montserrat;
   font-weight: normal;
   font-size: 23.1579px;
   line-height: 28px;
-  display: flex;
+  display: inline-block;
   align-items: center;
   text-align: center;
   font-style: normal;
@@ -143,35 +142,41 @@ button{
   border: 1px solid #FF9848;
   border-radius: 28.9474px;
   box-sizing: border-box;
-  margin-left: 30%;
-  padding-top: 2%;
-  
+  padding: 2%;
+  margin-top: 2%;
 }
 
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+}
 
-p{
-  font-family: Montserrat;
+
+p {
   font-weight: normal;
   font-size: 22px;
   line-height: 27px;
-  display: flex;
   align-items: center;
   text-align: center;
-  
+
   color: #2E3192;
   font-style: normal;
 }
 
-a{
-  font-family: Montserrat;
+a {
   font-weight: normal;
   font-size: 22px;
   line-height: 27px;
-  display: flex;
   align-items: center;
   text-align: center;
   text-decoration-line: underline;
-  
+
   color: #FC5C14;
   font-style: normal;
-}
\ No newline at end of file
+}
+
+#sos > a {
+  display: inline-block;
+  padding: 0px 2px;
+}
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index cc373c4163a75f889afc3215e02d5265c35c496e..240efb75010a67610e0a06cbda4f7f8c88587c30 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1,9 +1,10 @@
 <div class="back">
     <div class="row">
-        <div class="col-sm-8 col-sm-offset-2">
-            <div id="sos">Are you in an emergency ? Call 147 or find help near you</div>
-            <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
-                <h2>Login</h2>
+        <div class="content">
+          <div id="sos">Are you in an emergency ? Call <a href="tel://147">147</a> or find help <a href="">near you</a></div>
+            <div class="form-container">
+              <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
+                <h2 translate>NAV.LOGIN</h2>
                 <div id="line"></div>
                 <div class="form-group">
                     <label for="email">Enter your email</label>
@@ -21,12 +22,15 @@
                         formControlName="password"
                         placeholder="Enter password">
                 </div>
-                <a href="www.yana.help">Forgot password?</a>
-                <button class="btn btn-primary" type="submit">Login</button>
-                <p translate>Don't have an account yet?</p>
-                <a [routerLink]="['/signup']" skipLocationChange>Sign Up</a>
+                <div class="form-action">
+                  <a href="www.yana.help">Forgot password?</a>
+                  <button class="btn btn-primary" type="submit" translate>NAV.LOGIN</button>
+                  <p translate>LOGIN.NOACCOUNT</p>
+                  <a [routerLink]="['/signup']" skipLocationChange>Sign Up</a>
+                </div>
             </form>
             <p class="text-danger">{{ errorMessage }}</p>
+            </div>
         </div>
     </div>
 </div>
@@ -59,11 +63,11 @@
             </div>
         </div>
         <a href="www.yana.help">Forgot password?</a>
-        
+
         <button id="submit" type="button" (click)="goToPage('getting-started')" translate>NAV.LOGIN</button>
-        
+
         <p translate>LOGIN.NOACCOUNT</p>
         <a href="www.yana.help">Sign Up</a>
     </form>
 </div>
--->
\ No newline at end of file
+-->
diff --git a/src/app/maps/maps.component.css b/src/app/maps/maps.component.css
index 258a0856163687f989df2c1f438eaf0a1ae87414..5151363a6eb1fd826a9ecff68f9b1f543e7a5454 100644
--- a/src/app/maps/maps.component.css
+++ b/src/app/maps/maps.component.css
@@ -1,9 +1,47 @@
-.my-4{
-    margin-top:70px !important;
+
+:host {
+  overflow-x: hidden;
+}
+.back{
+  height: 100vh;
+  max-height: 100%;
+  width: calc(100vw - 20rem - 6%);
+  align-content: center;
+  padding: 0 3%;
+  justify-content: center;
+}
+
+.select-container, .details-container {
+  display: flex;
+  max-width: calc(100vw - 26rem);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: .5em 0;
+  overflow-x: hidden;
+  margin: 0 auto;
+}
+
+.map-container {
+  max-width: calc(100vw - 26rem);
+  margin: 0 auto;
+  overflow-x: hidden;
+}
+
+.details-container {
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+.custom-select {
+  width: 70%;
 }
 
 agm-map {
-    height: 50vh;
+  height: 50vh;
+  max-width: calc(100vw - 20rem);
+  padding: 0 3%;
+  margin: 0 auto;
 }
 
 .target {
@@ -17,8 +55,8 @@ agm-map {
 }
 
 .content-header {
-  background-color: gray;
-  padding: 20px 0px 10px 0px;
+  background-color: lightcoral;
+  padding: 10px;
   align-items: middle;
   font-size: 18pt;
 }
@@ -26,12 +64,13 @@ agm-map {
 .content-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
+  background-color: whitesmoke;
 }
 
 .content-grid > * {
   padding: 5px;
-  background-color: whitesmoke;
   border-radius: 5px;
+  border: 1px solid lightslategray;
 }
 
 .content-grid > * > p {
diff --git a/src/app/maps/maps.component.html b/src/app/maps/maps.component.html
index f4b77a25c244556dc37b2906c846fff60c8763fb..c4469a227bc32923632456fed14ba9508a3945fe 100644
--- a/src/app/maps/maps.component.html
+++ b/src/app/maps/maps.component.html
@@ -1,13 +1,16 @@
-<div class="container my-4">
-  <select class="browser-default custom-select" [ngModel]="cantonSelected" (ngModelChange)="onSelect($event)">
+<div class="back">
+  <div class="select-container">
+    <select class="browser-default custom-select" [ngModel]="cantonSelected" (ngModelChange)="onSelect($event)">
       <!-- <option selected>Select your canton</option> -->
       <option *ngFor="let canton of cantons; let i=index" value="{{i}}">{{canton}}</option>
-  </select>
-
-  <p class="font-weight-bold" *ngIf='cantonSelected!=""'>{{ 'MAP.CANTONOF' | translate }} {{cantonSelected}}</p>
-  <!-- <p *ngIf='cantonSelected!=""'><strong > {{cantons[cantonSelected].desCentre}} </strong></p> -->
+    </select>
+    <p class="font-weight-bold" *ngIf='cantonSelected!=""'>{{ 'MAP.CANTONOF' | translate }} {{cantonSelected}}</p>
+      <!-- <p *ngIf='cantonSelected!=""'><strong > {{cantons[cantonSelected].desCentre}} </strong></p> -->
   <p *ngIf="!centersFound" class="noCentre" translate>MAP.SORRY</p>
-  <agm-map *ngIf="cantonCenter.lat !== undefined"
+  </div>
+
+  <div class="map-container">
+    <agm-map *ngIf="cantonCenter.lat !== undefined"
       [latitude]="cantonCenter?.lat"
       [longitude]="cantonCenter?.lng"
       [zoom]="11"
@@ -21,31 +24,30 @@
               <span *ngIf="place.address !== ''" >{{ place.address }}</span><br/>
               <span *ngIf="place.postalCode != 0" >{{ place.postalCode }}</span><br/>
               <span *ngIf="place.city !== ''" >{{ place.city }}</span><br/>
-              <a *ngIf="place.website !== ''" href="{{place.website}}" translate>MAP.WEBSITE</a><br/>
-              <a *ngIf="place.tel !== ''" href="tel://+{{place.tel.replace(' ', '')}}">{{ place.tel }}</a><br/>
-              <a *ngIf="place.website !== ''" href="{{place.website}}" target="_blank" translate>MAP.WEBSITE</a><br/>
+              <a *ngIf="place.website !== ''" href="http://{{place.website}}" target="_blank" translate>MAP.WEBSITE</a><br/>
               <a *ngIf="place.tel !== ''" href="tel://+{{place.tel.replace(' ', '')}}" target="_blank">{{ place.tel }}</a><br/>
               <span class="target" *ngIf="place.type !== ''">{{ 'MAP.WHO' | translate }} : {{ place.type }}</span><br/>
           </agm-info-window>
       </agm-marker>
-  </agm-map>
+    </agm-map>
+  </div>
 
-  <div *ngFor='let t of typeMap | keyvalue'>
-    <div *ngIf='t.key != ""' class="content-header"><p>{{t.key}}</p></div>
-    <div *ngIf='t.key == ""' class="content-header"><p translate>MAP.UNCATEGORIZED</p></div>
-    <div class="content-grid">
-      <div *ngFor="let d of t.value">
-        <p>
-          <strong>{{d.name}}</strong><br/>
-          <span *ngIf="d.address != ''">{{d.address}}</span><br *ngIf="d.address != ''"/>
-          <span *ngIf="d.postalCode != 0 || d.city != ''">{{d.postalCode}} {{ d.city }}</span><br *ngIf="d.postalCode != 0 || d.city != ''"/>
-          <span *ngIf="d.tel != ''"><a href="tel://+{{ d.tel }}">{{ d.tel }}</a></span><br *ngIf="d.tel != ''"/>
-          <span *ngIf="d.website != ''"><a href="{{ d.website }}" translate>MAP.WEBSITE</a></span><br *ngIf="d.website != ''"/>
-          <span *ngIf="d.tel != ''"><a href="tel://+{{ d.tel }}" target="_blank">{{ d.tel }}</a></span><br *ngIf="d.tel != ''"/>
-          <span *ngIf="d.website != ''"><a href="{{ d.website }}" target="_blank" translate>MAP.WEBSITE</a></span><br *ngIf="d.website != ''"/>
-          <span class="description" *ngIf="d.description !== ''">{{ 'MAP.DESCRIPTION' | translate }} : {{ d.description }}</span><br/>
-        </p>
+  <div class="details-container">
+    <div *ngFor='let t of typeMap | keyvalue'>
+      <div *ngIf='t.key != ""' class="content-header"><p>{{t.key}}</p></div>
+      <div *ngIf='t.key == ""' class="content-header"><p translate>MAP.UNCATEGORIZED</p></div>
+      <div class="content-grid">
+        <div *ngFor="let d of t.value">
+          <p>
+            <strong>{{d.name}}</strong><br/>
+            <span *ngIf="d.address != ''">{{d.address}}</span><br *ngIf="d.address != ''"/>
+            <span *ngIf="d.postalCode != 0 || d.city != ''">{{d.postalCode}} {{ d.city }}</span><br *ngIf="d.postalCode != 0 || d.city != ''"/>
+            <span *ngIf="d.tel != ''"><a href="tel://+{{ d.tel }}" target="_blank">{{ d.tel }}</a></span><br *ngIf="d.tel != ''"/>
+            <span *ngIf="d.website != ''"><a href="http://{{ d.website }}" target="_blank" translate>MAP.WEBSITE</a></span><br *ngIf="d.website != ''"/>
+            <span class="description" *ngIf="d.description !== ''">{{ 'MAP.DESCRIPTION' | translate }} : {{ d.description }}</span><br/>
+          </p>
+        </div>
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/signup/signup.component.css b/src/app/signup/signup.component.css
index 3114d0881de9a52c9b866cfb3d3b6f2801efb059..c33fb98f775ee7e6718bb1a370c048d302d91c8d 100644
--- a/src/app/signup/signup.component.css
+++ b/src/app/signup/signup.component.css
@@ -7,11 +7,17 @@
   background-position:  bottom;
 }
 
+.row {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+}
+
 form {
   text-align: center;
-  min-width: 300px;
-  max-width: 400px;
-  min-height: 600px;
+  min-width: 400px;
+  max-width: 600px;
+  min-height: 500px;
   max-height: 700px;
   background: #FFFFFF;
   box-sizing: border-box;
@@ -20,44 +26,39 @@ form {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-left: 50%;
-  margin-top: 5%;
+  margin-top: 40px;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+}
+.form-container {
+  display: flex;
+  margin: 0 auto;
 }
 
-h2{
+h2 {
   padding-bottom: 5%;
-  font-family: Montserrat;
   font-weight: 500;
   font-size: 36px;
   line-height: 44px;
-  display: flex;
-  margin-left: 34%;
-  margin-top: 10%;
-  
-  
+
   color: #2E3192;
   font-style: normal;
 }
 
-
-
-.form-group{
+.form-group {
   padding-top: 2%;
-  margin-left: 5%;
-  margin-right: 5%;
+  margin: 0 5%;
   text-align: left;
 }
 
-input[type=text] {
-  background: #FFFFFF;
-  border: 1px solid #EBDDFF;
-  box-sizing: border-box;
-}
-
-input[type=password] {
+input {
   background: #FFFFFF;
   box-sizing: border-box;
   border: 1px solid #EBDDFF;
+  width: 100%;
 }
 
 #line {
@@ -68,44 +69,34 @@ input[type=password] {
   margin-bottom: 15%;
 }
 
-label{
-  font-family: Montserrat;
+label {
   font-weight: normal;
   font-size: 22px;
   line-height: 27px;
   display: flex;
   align-items: center;
   text-align: center;
-  
+
   color: #2E3192;
   font-style: normal;
 }
 
-input::placeholder{
-  font-family: Montserrat;
+input::placeholder {
   font-weight: normal;
   font-size: 22px;
   line-height: 27px;
   display: flex;
   align-items: left;
   text-align: left;
-  
+
   color: #999FDE;
   font-style: normal;
 }
 
-button{
+button {
   background: #EBDDFF;
   box-sizing: border-box;
   border-radius: 30px;
-  font-family: Montserrat;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 24px;
-  line-height: 29px;
-  display: flex;
-  align-items: center;
-  text-align: center;
   border: 2px solid #2E3192;
 
   font-family: Montserrat;
@@ -118,10 +109,9 @@ button{
   color: #2E3192;
   font-style: normal;
 
-  margin-left: 25%;
-  margin-right: 25%;
+  margin: 0 auto;
+  padding: 1% 6%;
   margin-top: 10%;
-
 }
 
 #rectangle {
@@ -132,11 +122,10 @@ button{
 
 
 #sos{
-  font-family: Montserrat;
   font-weight: normal;
   font-size: 23.1579px;
   line-height: 28px;
-  display: flex;
+  display: inline-block;
   align-items: center;
   text-align: center;
   font-style: normal;
@@ -145,13 +134,37 @@ button{
   border: 1px solid #FF9848;
   border-radius: 28.9474px;
   box-sizing: border-box;
-  margin-left: 30%;
-  padding-top: 2%;
-  
+  padding: 2%;
+  margin-top: 2%;
 }
 
+a {
+  font-weight: normal;
+  font-size: 22px;
+  line-height: 27px;
+  align-items: center;
+  text-align: center;
+  text-decoration-line: underline;
+
+  color: #FC5C14;
+  font-style: normal;
+}
 
 
+.form-action {
+  padding-top: 2%;
+  margin: 0 5%;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  text-align: center;
+}
+
+#sos > a {
+  display: inline-block;
+  padding: 0px 2px;
+}
 
 
 
diff --git a/src/app/signup/signup.component.html b/src/app/signup/signup.component.html
index 5ae46fe85fcf8caf11f13e9b07dbadab95952e74..702fd429d6bf4bc0f318622e2157fc39a4eae353 100644
--- a/src/app/signup/signup.component.html
+++ b/src/app/signup/signup.component.html
@@ -1,33 +1,33 @@
 <div class="back">
-    
-   <div class="row">
-        <div class="col-sm-8 col-sm-offset-2">
-            <div id="sos">Are you in an emergency ? Call 147 or find help near you</div>
-            <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
-                <h2>Sign up</h2>
-                <div id="line"></div>
-                <div class="form-group">
-                    <label for="email">Enter your email</label>
-                    <input type="text"
-                        id="email"
-                        class="form-control"
-                        formControlName="email"
-                        placeholder="Enter your email">
-                </div>
-                <div class="form-group">
-                    <label for="password">Password</label>
-                    <input type="password"
-                        id="password"
-                        class="form-control"
-                        formControlName="password"
-                        placeholder="Enter your password">
-                </div>
-                <button class="btn btn-primary" type="submit">Sign Up!</button>
-            </form>
-            <p class="text-danger">{{ errorMessage }}</p>
-        </div>
+  <div class="row">
+    <div class="content">
+      <div id="sos">Are you in an emergency ? Call <a href="tel://147">147</a> or find help <a href="">near you</a></div>
+      <div class="form-container">
+        <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
+            <h2>Sign up</h2>
+            <div id="line"></div>
+            <div class="form-group">
+                <label for="email">Enter your email</label>
+                <input type="text"
+                    id="email"
+                    class="form-control"
+                    formControlName="email"
+                    placeholder="Enter your email">
+            </div>
+            <div class="form-group">
+                <label for="password">Password</label>
+                <input type="password"
+                    id="password"
+                    class="form-control"
+                    formControlName="password"
+                    placeholder="Enter your password">
+            </div>
+            <button class="btn btn-primary" type="submit">Sign Up!</button>
+        </form>
+        <p class="text-danger">{{ errorMessage }}</p>
+      </div>
     </div>
-
+  </div>
 </div>
 
 
@@ -37,7 +37,7 @@
 
 
 
-<!-- 
+<!--
 <div class="v_container">
   <div class="fixed_height">
   </div>
@@ -73,4 +73,4 @@
 
   </form>
 </div>
--->
\ No newline at end of file
+-->
diff --git a/src/assets/favicon.png b/src/assets/favicon.png
deleted file mode 100644
index 6b9b992058e4e1ae3b5ee4c58c4fc1ff59fdb508..0000000000000000000000000000000000000000
Binary files a/src/assets/favicon.png and /dev/null differ
diff --git a/src/assets/favicon.svg b/src/assets/favicon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9c80f0826cb5aaf355ffe65ddf890937c5febddc
--- /dev/null
+++ b/src/assets/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" width="223px" height="290px"><defs><style>.cls-0{fill:#FFF}.cls-1{fill:transparent;}</style></defs><path class="cls-0" d="M338,134.23a5,5,0,0,0-2.43-3L265.28,131c-3.65,0-3.54.25-4.81.63a5,5,0,0,0-3,2.44l-15.21,29.5a98.71,98.71,0,0,0-22.52,13.51l-19-38.93A10.92,10.92,0,0,0,191,132l-65.88-.87a9.2,9.2,0,0,0-4,.87,9,9,0,0,0-4.26,12l55.29,116.2L151.49,288.1c-.69.92-1.33,1.75-2,2.56-3.7,4.76-6.62,8.51-6.57,17.41l.22,39.51a21.36,21.36,0,0,0,.14,2.14l-16.24,30.56a5,5,0,0,0,2.07,6.76l60,31.88a5,5,0,0,0,6.76-2.06l15.51-29.16a16.18,16.18,0,0,0,28.82-6.58,15.87,15.87,0,0,0,0-6.18,16.24,16.24,0,0,0,14.16-19.13,16.15,16.15,0,0,0,14.13-19.12,16.18,16.18,0,0,0,11.72-25.1l-8.94-13.37a45.94,45.94,0,0,1,11-4.49l14.2-3.66,7.79-2a16.23,16.23,0,0,0,11.64-19.72c-.06-.24-.13-.47-.2-.69a16.12,16.12,0,0,0-3.45-6.1,16.27,16.27,0,0,0,4.08-4.64,16.09,16.09,0,0,0,1.73-12.27c-.06-.23-.12-.46-.19-.69a16,16,0,0,0-3.46-6.09,16.21,16.21,0,0,0,5.83-16.91c-.06-.24-.12-.47-.19-.7a16,16,0,0,0-3.46-6.09,16.22,16.22,0,0,0,5.82-16.91c-.06-.23-.12-.46-.19-.69a16,16,0,0,0-5.13-7.68L337.63,138A5,5,0,0,0,338,134.23Zm-211.4,6.91,64.28.85a1,1,0,0,1,.89.56L212.05,184l.13.27c-.62.54-1.23,1.09-1.83,1.66-15.7,14.91-25.45,37.18-26.71,58.75l-4.74,6.4Zm30.83,155.65c.63-.81,1.35-1.72,2.1-2.74l25-33.75c.33,1.74.72,3.44,1.2,5.08h0a19.88,19.88,0,0,1,.88,5.65c0,3.91-1.37,7.38-3.62,11.6l-8,15.09-1.17,2.19c-3.69,6.85-4.15,8.27-4.1,17.47l.16,30.05a8.33,8.33,0,0,1-16.66.09L153,308C152.93,302.58,154.15,301,157.42,296.79Zm73,82.39a6.16,6.16,0,0,1-7.26,4.86,6.2,6.2,0,0,1-3.95-2.62l-12.62-18.89a5.88,5.88,0,0,1-.77-1.62,6.2,6.2,0,0,1-.15-3,6.1,6.1,0,0,1,2.62-3.94,6.2,6.2,0,0,1,8.6,1.7l12.62,18.88A6.17,6.17,0,0,1,230.39,379.18ZM244.54,360a6.18,6.18,0,0,1-11.2,2.25l-.08-.1-8.09-12.11h0l-4.47-6.67a6.2,6.2,0,0,1,10.25-7l8.22,12.28,4.46,6.68A6.12,6.12,0,0,1,244.54,360Zm11.54-15.17a6.2,6.2,0,0,1-8.6-1.72l-12.64-18.88a6.23,6.23,0,0,1,1.71-8.59,6.24,6.24,0,0,1,8.6,1.71l12.63,18.9A6.2,6.2,0,0,1,256.08,344.87Zm15.85-27.73a6.2,6.2,0,0,1-10.3,6.9l-.07-.09L249,305.15a6.21,6.21,0,0,1,1.71-8.6,6.24,6.24,0,0,1,8.6,1.71ZM308.3,207.29l-7.63,2-.14,0-.08,0L286.31,213a5,5,0,0,0,2.5,9.69L303.1,219a6.2,6.2,0,0,1,3,12l-7.62,2-.15,0-.07,0-14.15,3.66a5,5,0,0,0,2.51,9.68l14.29-3.69a6.18,6.18,0,0,1,6.79,9.16,6.14,6.14,0,0,1-3.76,2.86l-7.67,2-.12,0-.06,0L282,260.37a5,5,0,1,0,2.51,9.68l14.27-3.69a6.22,6.22,0,0,1,7.5,4.46,6.23,6.23,0,0,1-4.47,7.54l-7.78,2-14.2,3.66a56.56,56.56,0,0,0-14.38,6,16.2,16.2,0,0,0-27.17,14.68,16.11,16.11,0,0,0-14.11,12.93,16.17,16.17,0,0,0,0,6.2A16.2,16.2,0,0,0,210,343a16.18,16.18,0,0,0-14.12,12.95,16.13,16.13,0,0,0,2.41,12.15l6.82,10.2-15.67,29.46-51.13-27.19,10.56-19.86a18.27,18.27,0,0,0,25.72-.33,18.15,18.15,0,0,0,5.3-13l-.16-30.05c0-7.19,0-7.19,2.91-12.68l1.2-2.23,8-15.08c3.36-6.3,6.69-13.93,3.51-24.76A47.93,47.93,0,0,1,193.72,246a86.92,86.92,0,0,1,9.14-33.66c6.89-13.63,18.14-24.91,31-33l1.61-1,.82-.48c.13-.08.7-.31.75-.44-6.52,18.77-7.65,26.63-3.44,31.22,4.34,4.74,11.86,2.68,17.9,1L283.24,201l22-5.67a6.23,6.23,0,0,1,7.55,4.43A6.21,6.21,0,0,1,308.3,207.29Zm-.53-22.16a16.43,16.43,0,0,0-5.07.48l-22,5.69-.07,0L248.84,200c-4.49,1.23-6.7,1.56-7.77,1.56-.06-1,.07-3.27,1.37-8.13,1.33-5,3.66-12,7.52-22.53a22.83,22.83,0,0,1,1.19-2.67L263.63,142h64Z" transform="translate(-116 -131)"/><path class="cls-1" d="M230.39,379.18a6.16,6.16,0,0,1-7.26,4.86,6.2,6.2,0,0,1-3.95-2.62l-12.62-18.89a5.88,5.88,0,0,1-.77-1.62,6.2,6.2,0,0,1-.15-3,6.1,6.1,0,0,1,2.62-3.94,6.2,6.2,0,0,1,8.6,1.7l12.62,18.88A6.17,6.17,0,0,1,230.39,379.18Z" transform="translate(-116 -131)"/><path class="cls-1" d="M244.54,360a6.18,6.18,0,0,1-11.2,2.25l-.08-.1-8.09-12.11h0l-4.47-6.67a6.2,6.2,0,0,1,10.25-7l8.22,12.28,4.46,6.68A6.12,6.12,0,0,1,244.54,360Z" transform="translate(-116 -131)"/><path class="cls-1" d="M256.08,344.87a6.2,6.2,0,0,1-8.6-1.72l-12.64-18.88a6.23,6.23,0,0,1,1.71-8.59,6.24,6.24,0,0,1,8.6,1.71l12.63,18.9A6.2,6.2,0,0,1,256.08,344.87Z" transform="translate(-116 -131)"/><path class="cls-1" d="M272.84,321.79A6.2,6.2,0,0,1,261.63,324l-.07-.09L249,305.15a6.21,6.21,0,0,1,1.71-8.6,6.24,6.24,0,0,1,8.6,1.71l12.63,18.88A6.19,6.19,0,0,1,272.84,321.79Z" transform="translate(-116 -131)"/><path class="cls-1" d="M327.63,142l-19.86,43.09a16.43,16.43,0,0,0-5.07.48l-22,5.69-.07,0L248.84,200c-4.49,1.23-6.7,1.56-7.77,1.56-.06-1,.07-3.27,1.37-8.13,1.33-5,3.66-12,7.52-22.53a22.83,22.83,0,0,1,1.19-2.67L263.63,142Z" transform="translate(-116 -131)"/><path class="cls-1" d="M212.18,184.27c-.62.54-1.23,1.09-1.83,1.66-15.7,14.91-25.45,37.18-26.71,58.75l-4.74,6.4L126.59,141.14l64.28.85a1,1,0,0,1,.89.56L212.05,184Z" transform="translate(-116 -131)"/><path class="cls-1" d="M282.72,219.07a5,5,0,0,0,6.09,3.59L303.1,219a6.2,6.2,0,0,1,3,12l-7.62,2-.15,0-.07,0-14.15,3.66a5,5,0,0,0,2.51,9.68l14.29-3.69a6.18,6.18,0,0,1,6.79,9.16,6.14,6.14,0,0,1-3.76,2.86l-7.67,2-.12,0-.06,0L282,260.37a5,5,0,1,0,2.51,9.68l14.27-3.69a6.22,6.22,0,0,1,7.5,4.46,6.23,6.23,0,0,1-4.47,7.54l-7.78,2-14.2,3.66a56.56,56.56,0,0,0-14.38,6,16.2,16.2,0,0,0-27.17,14.68,16.11,16.11,0,0,0-14.11,12.93,16.17,16.17,0,0,0,0,6.2A16.2,16.2,0,0,0,210,343a16.18,16.18,0,0,0-14.12,12.95,16.13,16.13,0,0,0,2.41,12.15l6.82,10.2-15.67,29.46-51.13-27.19,10.56-19.86a18.27,18.27,0,0,0,25.72-.33,18.15,18.15,0,0,0,5.3-13l-.16-30.05c0-7.19,0-7.19,2.91-12.68l1.2-2.23,8-15.08c3.36-6.3,6.69-13.93,3.51-24.76A47.93,47.93,0,0,1,193.72,246a86.92,86.92,0,0,1,9.14-33.66c6.89-13.63,18.14-24.91,31-33l1.61-1,.82-.48c.13-.08.7-.31.75-.44-6.52,18.77-7.65,26.63-3.44,31.22,4.34,4.74,11.86,2.68,17.9,1L283.24,201l22-5.67a6.23,6.23,0,0,1,7.55,4.43,6.21,6.21,0,0,1-4.45,7.56l-7.63,2-.14,0-.08,0L286.31,213A5,5,0,0,0,282.72,219.07Z" transform="translate(-116 -131)"/><path class="cls-1" d="M186.59,271c0,3.91-1.37,7.38-3.62,11.6l-8,15.09-1.17,2.19c-3.69,6.85-4.15,8.27-4.1,17.47l.16,30.05a8.33,8.33,0,0,1-16.66.09L153,308c0-5.44,1.19-7,4.46-11.23.63-.81,1.35-1.72,2.1-2.74l25-33.75c.33,1.74.72,3.44,1.2,5.08h0A19.88,19.88,0,0,1,186.59,271Z" transform="translate(-116 -131)"/></svg>