diff --git a/package.json b/package.json
index 34918faa386a75fb3ed8bafb19b281b133bd93bc..c58db87278f40b7f98b09993cbe1c02bb43487bf 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "@angular/compiler-cli": "^9.0.7",
     "@angular/core": "~9.0.3",
     "@angular/fire": "^6.0.0",
-    "@angular/forms": "~9.0.3",
+    "@angular/forms": "^9.0.7",
     "@angular/localize": "^9.1.0",
     "@angular/platform-browser": "~9.0.3",
     "@angular/platform-browser-dynamic": "~9.0.3",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 711c6ca4a46d6f2bcab31e3cd18a14e289b8e19f..6c6fcd774efdcb59cfb8fc2dace773c87661dbad 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -52,9 +52,11 @@ export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);
 }
 
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule  } from '@angular/forms';
 import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';
 import { GeocodeService } from './services/geocode.service';
+import { ResetpasswordComponent } from './resetpassword/resetpassword.component';
+import { ThankyouComponent } from './thankyou/thankyou.component';
 
 
 @NgModule({
@@ -69,7 +71,9 @@ import { GeocodeService } from './services/geocode.service';
     ArticleComponent,
     NavButtonComponent,
     LoginComponent,
-    SignupComponent
+    SignupComponent,
+    ResetpasswordComponent,
+    ThankyouComponent
   ],
   imports: [
     BrowserModule,
@@ -77,6 +81,7 @@ import { GeocodeService } from './services/geocode.service';
     CommonModule,
     HttpClientModule,
     FormsModule,
+    ReactiveFormsModule,
     AgmCoreModule.forRoot({
       apiKey: 'AIzaSyD9crBwGrLUT3_iH_wi1ZqKNhGhwjzHp5I'
     }),
diff --git a/src/app/login/login.component.css b/src/app/login/login.component.css
index 01f5c49bc96a09bd2c5eef037ac9db9ed444365d..ed28a071e978369263f8529fa8c6d7ee5956a346 100644
--- a/src/app/login/login.component.css
+++ b/src/app/login/login.component.css
@@ -1,68 +1,179 @@
 form {
-  max-width: 2000px;
-  max-height: 2000px;
-  border-radius: 25px;
-  height: fit-content;
-  width: fit-content;
-  padding: 20px;
   text-align: center;
-  margin: auto auto 0 auto;
-  background-color: white;
-  -webkit-box-shadow: 0px 4px 22px 3px rgba(0,0,0,0.75);
-  -moz-box-shadow: 0px 4px 22px 3px rgba(0,0,0,0.75);
-  box-shadow: 0px 4px 22px 3px rgba(0,0,0,0.75);
+  min-width: 300px;
+  max-width: 400px;
+  min-height: 600px;
+  max-height: 700px;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  border-radius: 36px;
+  border: 1px solid #2E3192;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 50%;
+  margin-top: 5%;
 }
 
-.v_container {
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  width: 100%;
-  height: 100vh;
-  min-width: 300px;
-  min-height: 1000px;
-  background: rgb(236,160,193);
-  background: radial-gradient(circle, rgba(236,160,193,1) 0%, rgba(130,180,238,1) 100%);
+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{
+  padding-top: 2%;
+  margin-left: 5%;
+  margin-right: 5%;
+  text-align: left;
 }
 
-.fixed_height {
-  height: 20vh
+input[type=text] {
+  background: #FFFFFF;
+  border: 1px solid #EBDDFF;
+  box-sizing: border-box;
+}
+
+input[type=password] {
+  background: #FFFFFF;
+  box-sizing: border-box;
+  border: 1px solid #EBDDFF;
 }
 
-.container{
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  font-style: normal; 
-  font-variant: normal; 
-  font-weight: bold;
-  vertical-align: middle;
-  line-height:35px;
-  font-size: 120%;
+#line {
+  border-bottom: 1px solid #EBDDFF;
+  margin-left: 5%;
+  margin-right: 5%;
+  padding-top: 5%;
+  margin-bottom: 15%;
 }
 
-#login {
+.label{
+  font-family: Montserrat;
+  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;
+  font-weight: normal;
+  font-size: 22px;
+  line-height: 27px;
+  display: flex;
+  align-items: left;
+  text-align: left;
+  
+  color: #999FDE;
+  font-style: normal;
 }
 
-#submit {
-  border-radius: 25px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+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;
+  font-weight: normal;
+  font-size: 24px;
+  line-height: 29px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #2E3192;
+  font-style: normal;
+
+  margin-left: 25%;
+  margin-right: 25%;
+  margin-top: 10%;
+
 }
 
-p {
-  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+#rectangle {
+  width: 200px;
+  height: 100px;
+  background: red;
 }
 
-#signup {
-  border-radius: 25px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
+#sos{
+  font-family: Montserrat;
+  font-weight: normal;
+  font-size: 23.1579px;
+  line-height: 28px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  font-style: normal;
+
+  color: #FC5C14;
+  border: 1px solid #FF9848;
+  border-radius: 28.9474px;
+  box-sizing: border-box;
+  margin-left: 30%;
+  margin-top: 2%;
+  
 }
 
-input[type=text] {
-  border: none;
-  border-bottom: 2px solid rgb(200, 200, 200);
+.back{
+
+  height: 850px;
+  background: #FFFAE7;
+  background-image: url(../../assets/images/yana-tree-noHands.svg);
+  background-repeat: space;
+  background-image-size: 100%;
+  background-position:  bottom;
 }
 
-input[type=password] {
-  border: none;
-  border-bottom: 2px solid rgb(200, 200, 200);
+p{
+  ont-family: Montserrat;
+  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;
+  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
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 56223aab6a53825a40bba2bf67ad0f2ffed70dc2..6f2b5463abae5279421d368b457201273d1299bd 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1,4 +1,51 @@
+<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 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 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 href="www.yana.help">Sign Up</a>
+             </form>
+             <p class="text-danger">{{ errorMessage }}</p>
+         </div>
+     </div>
+ 
+ </div>
+ 
 
+
+
+
+
+
+
+
+
+
+
+
+<!--
 <div class="v_container">
     <div class="fixed_height">
     </div>
@@ -14,10 +61,12 @@
                 <br><input type="password" placeholder="{{ 'LOGIN.PASSWORD' | translate }}" name="psw" id="password">
             </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>
-        <button id="signup" type="button" (click)="goToPage('signin')">{{ 'LOGIN.REDIRECT_SIGNUP' | translate }} !</button>
+        <a href="www.yana.help">Sign Up</a>
     </form>
-</div>
\ No newline at end of file
+</div>
+-->
\ No newline at end of file
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index a83a6a5808c009a5641c028de82dba7186dbe871..4a14778fdc34d7266a2db719a4bbbf1d80f231d8 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { LangService } from '../services/lang.service';
+import { FirebaseAuthService } from '../services/firebase-auth.service';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-login',
@@ -7,10 +10,46 @@ import { Router } from '@angular/router';
   styleUrls: ['./login.component.css']
 })
 export class LoginComponent implements OnInit {
-  constructor(private router: Router) { }
+
+  loginForm: FormGroup;
+  errorMessage: string;
+
+
+  constructor(private formBuilder: FormBuilder,
+              private router: Router,
+              private lang: LangService,
+              private authService: FirebaseAuthService) { }
+
   ngOnInit(): void {
+    this.initForm();
+  }
+
+  initForm() {
+    this.loginForm = this.formBuilder.group({
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', [Validators.required, Validators.pattern(/[0-9a-zA-Z]{6,}/)]]
+    });
   }
 
+  onSubmit() {
+    const email = this.loginForm.get('email').value;
+    const password = this.loginForm.get('password').value;
+    
+    this.authService.signInUser(email, password).then(
+      () => {
+        this.router.navigate(['/']);
+      },
+      (error) => {
+        this.errorMessage = error;
+      }
+    );
+    }
+
+
+
+
+
+
   getUserDetails() {
     //post this details to API server return info if correct
   }
diff --git a/src/app/resetpassword/resetpassword.component.css b/src/app/resetpassword/resetpassword.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/resetpassword/resetpassword.component.html b/src/app/resetpassword/resetpassword.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..6b9f5ee755e39c99dc8eeb46cd423b2896f24eff
--- /dev/null
+++ b/src/app/resetpassword/resetpassword.component.html
@@ -0,0 +1 @@
+<p>resetpassword works!</p>
diff --git a/src/app/resetpassword/resetpassword.component.spec.ts b/src/app/resetpassword/resetpassword.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f6cd854871288fd99438fa2977f5c1364d89977b
--- /dev/null
+++ b/src/app/resetpassword/resetpassword.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResetpasswordComponent } from './resetpassword.component';
+
+describe('ResetpasswordComponent', () => {
+  let component: ResetpasswordComponent;
+  let fixture: ComponentFixture<ResetpasswordComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ResetpasswordComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ResetpasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/resetpassword/resetpassword.component.ts b/src/app/resetpassword/resetpassword.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..756c49ee1c0ddd5e4fae52924c70bc1dc34ed186
--- /dev/null
+++ b/src/app/resetpassword/resetpassword.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-resetpassword',
+  templateUrl: './resetpassword.component.html',
+  styleUrls: ['./resetpassword.component.css']
+})
+export class ResetpasswordComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/signup/signup.component.css b/src/app/signup/signup.component.css
index 2faccebbe350dec88eafbaf5cb60c3bab35c6b75..63461cb09bc660727e7d2dc8f624d0471985e8d2 100644
--- a/src/app/signup/signup.component.css
+++ b/src/app/signup/signup.component.css
@@ -1,90 +1,158 @@
-.v_container {
-  align-items: center;
-  justify-content: center;
+
+form {
   text-align: center;
-  width: 100%;
-  height: 100vh;
   min-width: 300px;
-  min-height: 1000px;
-  background: rgb(2,0,36);
-  background: linear-gradient(189deg, rgba(2,0,36,1) 0%, rgba(255,252,161,1) 0%, rgba(126,236,175,1) 52%, rgba(0,255,211,1) 97%);
+  max-width: 400px;
+  min-height: 600px;
+  max-height: 700px;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  border-radius: 36px;
+  border: 1px solid #2E3192;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 50%;
+  margin-top: 5%;
 }
 
-.fixed_height {
-  height: 20vh
+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 {
-  text-align: center;
-  margin: auto auto 0 auto;
-  border-radius: 25px;
-  width: 400px;
-  height: 600px;
-  background: white;
-  -webkit-box-shadow: 0px 4px 22px 3px rgba(0,0,0,0.75);
-  -moz-box-shadow: 0px 4px 22px 3px rgba(0,0,0,0.75);
-  box-shadow: 0px 4px 22px 3px rgba(0,0,0,0.75);
 
+.form-group{
+  padding-top: 2%;
+  margin-left: 5%;
+  margin-right: 5%;
+  text-align: left;
 }
 
-.container{
-  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  vertical-align: middle;
-  line-height:25px;
-  font-size: 120%;
-  padding: 10%;
+input[type=text] {
+  background: #FFFFFF;
+  border: 1px solid #EBDDFF;
+  box-sizing: border-box;
 }
 
-.container1{
-  padding: 5px;
+input[type=password] {
+  background: #FFFFFF;
+  box-sizing: border-box;
+  border: 1px solid #EBDDFF;
+}
+
+#line {
+  border-bottom: 1px solid #EBDDFF;
+  margin-left: 5%;
+  margin-right: 5%;
+  padding-top: 5%;
+  margin-bottom: 15%;
 }
 
-#signupHeader{
+label{
+  font-family: Montserrat;
+  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;
+  font-weight: normal;
+  font-size: 22px;
+  line-height: 27px;
+  display: flex;
+  align-items: left;
+  text-align: left;
+  
+  color: #999FDE;
+  font-style: normal;
+}
+
+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;
+  font-weight: normal;
+  font-size: 24px;
+  line-height: 29px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #2E3192;
+  font-style: normal;
 
+  margin-left: 25%;
+  margin-right: 25%;
+  margin-top: 10%;
 
+}
 
-#submit{
-  border-radius: 25px;
-  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  height: 40px;
+#rectangle {
   width: 200px;
-  background-color : rgba(245, 254, 155, 0.988);
+  height: 100px;
+  background: red;
 }
 
-p {
-  margin-bottom: 3%;
-  padding: 10%;
-}
 
-#victim:focus{
-  border-radius: 25px;
-  background-color: #4CAF50;
+#sos{
+  font-family: Montserrat;
+  font-weight: normal;
+  font-size: 23.1579px;
+  line-height: 28px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  font-style: normal;
+
+  color: #FC5C14;
+  border: 1px solid #FF9848;
+  border-radius: 28.9474px;
+  box-sizing: border-box;
+  margin-left: 30%;
+  margin-top: 2%;
+  
 }
 
-#chose{
-  margin: 3%;
-}
+.back{
 
-#verify{
-  border-radius: 25px;
-  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  height: 850px;
+  background: #FFFAE7;
+  background-image: url(../../assets/images/yana-tree-noHands.svg);
+  background-repeat: space;
+  background-image-size: 100%;
+  background-position:  bottom;
 }
 
-input[type=text] {
-  border: none;
-  border-bottom: 2px solid rgb(200, 200, 200);
-}
 
-input[type=password] {
-  border: none;
-  border-bottom: 2px solid rgb(200, 200, 200);
-}
 
-.help {
-  border-radius: 25px;
-  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
\ No newline at end of file
+
+
diff --git a/src/app/signup/signup.component.html b/src/app/signup/signup.component.html
index 3c22efbcdd5de4a75c5197c0f4488cfb5701ed47..5ae46fe85fcf8caf11f13e9b07dbadab95952e74 100644
--- a/src/app/signup/signup.component.html
+++ b/src/app/signup/signup.component.html
@@ -1,4 +1,43 @@
+<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>
 
+</div>
+
+
+
+
+
+
+
+
+<!-- 
 <div class="v_container">
   <div class="fixed_height">
   </div>
@@ -34,3 +73,4 @@
 
   </form>
 </div>
+-->
\ No newline at end of file
diff --git a/src/app/signup/signup.component.ts b/src/app/signup/signup.component.ts
index 7aba73978cdc68ae0f3d6094416398994f867f1d..478b9113354a8b6751edd3664c53300b5603a59b 100644
--- a/src/app/signup/signup.component.ts
+++ b/src/app/signup/signup.component.ts
@@ -2,6 +2,9 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { LangService } from '../services/lang.service';
+import { FirebaseAuthService } from '../services/firebase-auth.service';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
 
 @Component({
   selector: 'app-signup',
@@ -11,13 +14,41 @@ import { LangService } from '../services/lang.service';
 export class SignupComponent implements OnInit {
   translate: TranslateService;
 
-  constructor(private router: Router, private lang: LangService) {
+  signupForm: FormGroup;
+  errorMessage: string;
+
+  constructor(private formBuilder: FormBuilder,
+              private router: Router,
+              private lang: LangService,
+              private authService: FirebaseAuthService) {
     this.translate = lang.getTranslateService();
   }
 
-  ngOnInit(): void {
+  ngOnInit() {
+    this.initForm();
   }
 
+  initForm() {
+    this.signupForm = this.formBuilder.group({
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', [Validators.required, Validators.pattern(/[0-9a-zA-Z]{6,}/)]]
+    });
+  }
+
+  onSubmit() {
+    const email = this.signupForm.get('email').value;
+    const password = this.signupForm.get('password').value;
+    
+    this.authService.createNewUser(email, password).then(
+      () => {
+        this.router.navigate(['/']);
+      },
+      (error) => {
+        this.errorMessage = error;
+      }
+    );
+    }
+
   loginUser(event) {
     event.preventDefault();
     // const target = event.target
@@ -30,4 +61,5 @@ export class SignupComponent implements OnInit {
     this.router.navigate([`${pageName}`]);
   }
 
-}
+   
+}
\ No newline at end of file
diff --git a/src/app/thankyou/thankyou.component.css b/src/app/thankyou/thankyou.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/thankyou/thankyou.component.html b/src/app/thankyou/thankyou.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..7c1ed22bf6b85a346ba562a6170c91671c486b0e
--- /dev/null
+++ b/src/app/thankyou/thankyou.component.html
@@ -0,0 +1,19 @@
+<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 >
+                 <h2>Thank you for joining our comunity</h2>
+                 <div id="line"></div>
+                 <p>Thank you for joining our comunity!</p>
+               
+                 
+             </form>
+           
+         </div>
+     </div>
+ 
+ </div>
+ 
+ 
\ No newline at end of file
diff --git a/src/app/thankyou/thankyou.component.spec.ts b/src/app/thankyou/thankyou.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..375f72acdda2eb36a3f229a80344bbd174d5fc7c
--- /dev/null
+++ b/src/app/thankyou/thankyou.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ThankyouComponent } from './thankyou.component';
+
+describe('ThankyouComponent', () => {
+  let component: ThankyouComponent;
+  let fixture: ComponentFixture<ThankyouComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ThankyouComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ThankyouComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/thankyou/thankyou.component.ts b/src/app/thankyou/thankyou.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6e4d8f7d379faf3e93e99040c796c8e3787e7c4a
--- /dev/null
+++ b/src/app/thankyou/thankyou.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-thankyou',
+  templateUrl: './thankyou.component.html',
+  styleUrls: ['./thankyou.component.css']
+})
+export class ThankyouComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/assets/images/yana-tree-noHands.svg b/src/assets/images/yana-tree-noHands.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c2ba6d2338bfa1dbf7e234bd004bd149fa3e6e46
--- /dev/null
+++ b/src/assets/images/yana-tree-noHands.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: SketchAPI 5.1.316 <https://api.sketch.io/> -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketchjs="https://sketch.io/dtd/" style="" sketchjs:metadata="eyJ0aXRsZSI6IjViNjU4OTIzLTE3ZTItNDdjOS04ODQxLWU3NGEzYzNiNjY0NCIsImRlc2NyaXB0aW9uIjoiTWFkZSB3aXRoIFNrZXRjaHBhZCAtIGh0dHBzOi8vc2tldGNoLmlvL3NrZXRjaHBhZCIsIm1ldGFkYXRhIjp7fSwiY2xpcFBhdGgiOnsiZW5hYmxlZCI6dHJ1ZSwic3R5bGUiOnsic3Ryb2tlU3R5bGUiOiJibGFjayIsImxpbmVXaWR0aCI6MX19LCJleHBvcnREUEkiOjcyLCJleHBvcnRGb3JtYXQiOiJza2V0Y2hwYWQiLCJleHBvcnRRdWFsaXR5IjowLjk1LCJ1bml0cyI6InB4Iiwid2lkdGgiOjUxNywiaGVpZ2h0Ijo2ODcsInBhZ2VzIjp7Imxlbmd0aCI6MSwiZGF0YSI6W3sid2lkdGgiOjUxNywiaGVpZ2h0Ijo2ODd9XX19" width="517" height="687" viewBox="0 0 517 687" sketchjs:version="5.1.316">
+<path sketchjs:tool="path" style="fill: none; stroke: #000000; mix-blend-mode: source-over; stroke-alignment: center; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1;" d="M0 3 L120.03 0.03 " transform="matrix(1,0,0,1,185.93051087010053,673.4505785744948)"/>
+<path sketchjs:tool="path" style="fill: #663313; stroke: #663313; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; fill-rule: nonzero; stroke-alignment: center; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1;" d="M70 486 L86 278 0 181 104 237 83 108 13 72 105 95 127 176 148 52 206 0 169 74 174 200 243 118 185 274 222 479 70 486 z" transform="matrix(0.9993908270190958,0.034899496702500574,-0.034899496702500574,0.9993908270190958,128.48510308598804,187.35831875950075)"/>
+<path sketchjs:tool="path" style="fill: #eef66c; stroke: #eef66c; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; fill-rule: nonzero; stroke-alignment: center; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1;" d="M12.53 0 C12.53 0 -21.47 63 22.53 98 66.53 133 38.53 37 12.53 0 z" transform="matrix(-1.0959047137316231,0.6584859846880153,-0.6584859846880153,-1.0959047137316231,191.1761201716809,375.0131598454512)"/>
+<path sketchjs:tool="path" style="fill: #e4f6f8; stroke: #e4f6f8; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; fill-rule: nonzero; stroke-alignment: center; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1;" d="M12.53 0 C12.53 0 -21.47 63 22.53 98 66.53 133 38.53 37 12.53 0 z" transform="matrix(0.8880334749678269,-0.5335843434863728,-0.5288674335909689,-0.8801832186088101,126.28967691147739,252.0368110123996)"/>
+<path sketchjs:tool="path" style="fill: #e4f6f8; stroke: #e4f6f8; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; fill-rule: nonzero; stroke-alignment: center; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1;" d="M12.53 0 C12.53 0 -21.47 63 22.53 98 66.53 133 38.53 37 12.53 0 z" transform="matrix(0.8077816235946272,0.3596475502894294,0.406736643075799,-0.9135454576426014,254.14502913677097,218.89668066714162)"/>
+<path sketchjs:tool="path" style="fill: #fdb813; stroke: #fdb813; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; fill-rule: nonzero; stroke-alignment: center; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1;" d="M12.53 0 C12.53 0 -21.47 63 22.53 98 66.53 133 38.53 37 12.53 0 z" transform="matrix(0.8651287569445281,-0.8651287569445298,-1.003549611511455,-1.0035496115114528,89.7920900155336,413.5819002060388)"/>
+<path sketchjs:tool="path" style="fill: #62c2cc; stroke: #62c2cc; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; fill-rule: nonzero; stroke-alignment: center; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1;" d="M12.53 0 C12.53 0 -21.47 63 22.53 98 66.53 133 38.53 37 12.53 0 z" transform="matrix(-0.7431448254773964,-0.6691306063588559,0.6691306063588559,-0.7431448254773964,347.85649665098197,442.03830314265855)"/>
+<path sketchjs:tool="path" style="fill: #e4f6f8; stroke: #e4f6f8; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; fill-rule: nonzero; stroke-alignment: center; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1;" d="M12.53 0 C12.53 0 -21.47 63 22.53 98 66.53 133 38.53 37 12.53 0 z" transform="matrix(-0.7880107536067233,-0.6156614753256564,0.6156614753256564,-0.7880107536067233,320.66198025094155,309.5014375728047)"/>
+<path sketchjs:tool="path" style="fill: #62c2cc; stroke: #62c2cc; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; fill-rule: nonzero; stroke-alignment: center; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1;" d="M12.53 0 C12.53 0 -21.47 63 22.53 98 66.53 133 38.53 37 12.53 0 z" transform="matrix(-0.9793345416932187,0.5884435589568693,-0.5884435589568693,-0.9793345416932187,258.0680796942586,266.7072143073841)"/>
+<path sketchjs:tool="path" style="fill: #eef66c; stroke: #eef66c; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; fill-rule: nonzero; stroke-alignment: center; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1;" d="M12.53 0 C12.53 0 -21.47 63 22.53 98 66.53 133 38.53 37 12.53 0 z" transform="matrix(-1.2693940215368593,0.3401331029476964,-0.3401331029476964,-1.2693940215368593,196.320983745616,161.52131765590562)"/>
+<path sketchjs:tool="path" style="fill: #fdb813; stroke: #fdb813; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; fill-rule: nonzero; stroke-alignment: center; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1;" d="M12.53 0 C12.53 0 -21.47 63 22.53 98 66.53 133 38.53 37 12.53 0 z" transform="matrix(1.051544986154205,0.6318319713159456,0.5150380749100557,-0.8571673007021114,354.4567680414643,301.8523130135333)"/>
+<path sketchjs:tool="path" style="fill: #fdb813; stroke: #fdb813; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; fill-rule: nonzero; stroke-alignment: center; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1;" d="M12.53 0 C12.53 0 -21.47 63 22.53 98 66.53 133 38.53 37 12.53 0 z" transform="matrix(1.0490445823802903,0.4238415233519193,0.4303629915359336,-1.065185782547517,347.94555416512765,169.1974616132764)"/>
+<path sketchjs:tool="path" style="fill: #fdb813; stroke: #fdb813; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; fill-rule: nonzero; stroke-alignment: center; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1;" d="M12.53 0 C12.53 0 -21.47 63 22.53 98 66.53 133 38.53 37 12.53 0 z" transform="matrix(1.333097618709603,-0.046552794652955656,-0.051541251772032025,-1.475948340262438,221.2120672370381,176.9280774395794)"/>
+<path sketchjs:tool="path" style="fill: #62c2cc; stroke: #62c2cc; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; fill-rule: nonzero; stroke-alignment: center; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1;" d="M12.53 0 C12.53 0 -21.47 63 22.53 98 66.53 133 38.53 37 12.53 0 z" transform="matrix(-0.6560590289905154,-0.754709580222765,0.754709580222765,-0.6560590289905154,417.9665842706738,222.42203950227986)"/>
+<path sketchjs:tool="path" style="fill: #eef66c; stroke: #eef66c; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; fill-rule: nonzero; stroke-alignment: center; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1;" d="M12.53 0 C12.53 0 -21.47 63 22.53 98 66.53 133 38.53 37 12.53 0 z" transform="matrix(-0.9418771119423384,-0.8480699608244516,0.8480699608244516,-0.9418771119423384,439.8367037189826,368.660631501728)"/>
+<path sketchjs:tool="path" style="fill: #62c2cc; stroke: #62c2cc; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; fill-rule: nonzero; stroke-alignment: center; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1;" d="M12.53 0 C12.53 0 -21.47 63 22.53 98 66.53 133 38.53 37 12.53 0 z" transform="matrix(1.0991141456769606,-0.6604144059534177,-0.7076894260782018,-1.1777929916983454,69.3219355896993,264.612371176843)"/>
+<path sketchjs:tool="path" style="fill: #62c2cc; stroke: #62c2cc; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; fill-rule: nonzero; stroke-alignment: center; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1;" d="M12.53 0 C12.53 0 -21.47 63 22.53 98 66.53 133 38.53 37 12.53 0 z" transform="matrix(-0.933580426497203,-0.3583679495452971,0.3583679495452971,-0.933580426497203,327.35529839314864,121.15863019845229)"/>
+</svg>
\ No newline at end of file