diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ed81b0e..047c935 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -8,15 +8,18 @@ import { UsersComponent } from './users/users.component';
 import { ContactComponent } from './contact/contact.component';
 import { NotfoundComponent } from './notfound/notfound.component';
 import { UserinfoComponent } from './userinfo/userinfo.component';
-
+import { AuthGuard } from './auth.guard';
+import { CanDeactivateGuard } from './can-deactivate.guard';
 const appRoutes: Routes = [
   { path: '', component: HomeComponent },
   {
-    path: 'users', component: UsersComponent, children: [
+    path: 'users', component: UsersComponent, canActivateChild: [AuthGuard],
+    children: [
       { path: ':id', component: UserinfoComponent }
     ]
   },
-  { path: 'contact', component: ContactComponent },
+  { path: 'contact', component: ContactComponent, canDeactivate: [CanDeactivateGuard] },
+  { path: 'contact-us', redirectTo: 'contact' },
   { path: '**', component: NotfoundComponent }
 ];
 
diff --git a/src/app/auth.guard.ts b/src/app/auth.guard.ts
new file mode 100644
index 0000000..fec5515
--- /dev/null
+++ b/src/app/auth.guard.ts
@@ -0,0 +1,37 @@
+import {
+    CanActivate, ActivatedRouteSnapshot,
+    RouterStateSnapshot,
+    CanActivateChild
+} from '@angular/router';
+import { Injectable } from '@angular/core';
+import { LoginService } from './login.service';
+
+@Injectable({
+    providedIn: 'root'
+})
+
+
+
+export class AuthGuard implements CanActivate, CanActivateChild {
+
+    constructor(private loginservice: LoginService) { }
+
+    canActivate(
+        route: ActivatedRouteSnapshot,
+        state: RouterStateSnapshot): boolean {
+        if (this.loginservice.isLoggedin) {
+            // if we return true user is allowed to access that route
+            return true;
+        } else {
+            // if we return false user is not allowed to access
+            return false;
+        }
+    }
+
+    canActivateChild(
+        route: ActivatedRouteSnapshot,
+        state: RouterStateSnapshot): boolean {
+        return this.canActivate(route, state);
+    }
+
+}
diff --git a/src/app/can-deactivate.guard.ts b/src/app/can-deactivate.guard.ts
new file mode 100644
index 0000000..00ee00a
--- /dev/null
+++ b/src/app/can-deactivate.guard.ts
@@ -0,0 +1,22 @@
+import { CanDeactivate } from '@angular/router';
+import { Observable } from 'rxjs';
+import { Injectable } from '@angular/core';
+
+
+export interface CanComponentDeactivate {
+    canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
+}
+
+
+@Injectable({
+    providedIn: 'root',
+})
+
+export class CanDeactivateGuard implements
+    CanDeactivate<CanComponentDeactivate> {
+
+    canDeactivate(component: CanComponentDeactivate) {
+
+        return component.canDeactivate && component.canDeactivate();
+    }
+}
diff --git a/src/app/contact/contact.component.css b/src/app/contact/contact.component.css
index e69de29..743d1fa 100644
--- a/src/app/contact/contact.component.css
+++ b/src/app/contact/contact.component.css
@@ -0,0 +1,19 @@
+input{
+    padding: 1rem;
+    font-size: 1rem;
+    width: 200px;
+    margin-bottom: 1rem;
+}
+
+form{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+form button{
+    background: rebeccapurple;
+    padding: .5rem;
+    color: white;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/app/contact/contact.component.ts b/src/app/contact/contact.component.ts
index 43dadb9..b20bdec 100644
--- a/src/app/contact/contact.component.ts
+++ b/src/app/contact/contact.component.ts
@@ -1,26 +1,34 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { CanComponentDeactivate } from '../can-deactivate.guard';
 
 @Component({
   selector: 'app-contact',
   templateUrl: './contact.component.html',
   styleUrls: ['./contact.component.css']
 })
-export class ContactComponent implements OnInit {
+export class ContactComponent implements CanComponentDeactivate {
   user = {
     name: '',
     email: ''
   };
 
+  saved = false;
+
   // injecting route object into this contact component
   constructor(private route: Router) { }
 
-  ngOnInit() {
-  }
   onSubmit() {
     console.log(this.user.name, this.user.email);
+    this.saved = true;
+  }
 
-    // inside array we need to pass the path we need to naviagte
-    this.route.navigate(['/users', '1']);
+  canDeactivate(): Observable<boolean> | boolean {
+    if ((this.user.name.length > 0 || this.user.email.length > 0) && !this.saved) {
+      return confirm('Your changes are unsaved!! Do you like to exit');
+    }
+    return true;
   }
+
 }
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
index e69de29..37e6baa 100644
--- a/src/app/home/home.component.css
+++ b/src/app/home/home.component.css
@@ -0,0 +1,6 @@
+.btn{
+    background-color: rgb(29, 29, 109);
+    color: white;
+    padding: .5rem;
+
+}
\ No newline at end of file
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 5f2c53f..4f4b525 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1 +1,5 @@
-<p>home works!</p>
+<p>home page</p>
+
+<button class="btn" (click)="handleLogin()">Login</button>
+
+<button class="btn" (click)="handleLogout()">Logout</button>
\ No newline at end of file
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 33fd770..8052785 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { LoginService } from '../login.service';
 
 @Component({
   selector: 'app-home',
@@ -7,9 +8,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 
-  constructor() { }
+  constructor(private loginservice: LoginService) { }
 
   ngOnInit() {
   }
 
+  handleLogin() {
+    this.loginservice.login();
+  }
+
+  handleLogout() {
+    this.loginservice.logout();
+  }
+
 }
diff --git a/src/app/login.service.ts b/src/app/login.service.ts
new file mode 100644
index 0000000..8873360
--- /dev/null
+++ b/src/app/login.service.ts
@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+
+
+
+export class LoginService {
+
+    isLoggedin = false;
+
+    login() {
+        this.isLoggedin = true;
+    }
+
+    logout() {
+        this.isLoggedin = false;
+    }
+}
diff --git a/src/app/userinfo/userinfo.component.html b/src/app/userinfo/userinfo.component.html
index 911bec7..20b8139 100644
--- a/src/app/userinfo/userinfo.component.html
+++ b/src/app/userinfo/userinfo.component.html
@@ -1 +1,2 @@
-<h1>Currently loaded user id is : {{userId}}</h1>
\ No newline at end of file
+<h3>Currently loaded user id is : {{userId}}</h3>
+<h3>Currently loaded user name is : {{userName}}</h3>
\ No newline at end of file
diff --git a/src/app/userinfo/userinfo.component.ts b/src/app/userinfo/userinfo.component.ts
index 5e7aa6f..ba82505 100644
--- a/src/app/userinfo/userinfo.component.ts
+++ b/src/app/userinfo/userinfo.component.ts
@@ -9,11 +9,17 @@ import { ActivatedRoute, Params } from '@angular/router';
 export class UserinfoComponent implements OnInit {
 
   userId: number;
+  userName: string;
   constructor(private route: ActivatedRoute) { }
 
   ngOnInit() {
     this.route.params.subscribe((params: Params) => {
       this.userId = params.id;
     });
+
+    this.route.queryParams.subscribe(
+      (queryparams: Params) => {
+        this.userName = queryparams.name;
+      });
   }
 }
diff --git a/src/app/users/users.component.html b/src/app/users/users.component.html
index 981c50b..3920b34 100644
--- a/src/app/users/users.component.html
+++ b/src/app/users/users.component.html
@@ -3,9 +3,9 @@ <h1>Users page</h1>
 <!-- nested nav links -->
 <nav class="nav">
     <!-- where `1` is id -->
-    <a [routerLink]="['/users', 1]">User 1</a>
-    <a [routerLink]="['/users', 2]">User 2</a>
-    <a [routerLink]="['/users', 3]">User 3</a>
+    <a [routerLink]="['/users',1]" [queryParams]='{name:"sai"}'>User 1 </a>
+    <a [routerLink]="['/users', 2]" [queryParams]='{name:"gowtham"}'>User 2</a>
+    <a [routerLink]="['/users', 3]" [queryParams]='{name:"john"}'>User 3</a>
 </nav>
 
 <router-outlet></router-outlet>
\ No newline at end of file
diff --git a/src/app/users/users.component.ts b/src/app/users/users.component.ts
index 714658d..d061144 100644
--- a/src/app/users/users.component.ts
+++ b/src/app/users/users.component.ts
@@ -7,15 +7,15 @@ import { Observable } from 'rxjs';
   templateUrl: './users.component.html',
   styleUrls: ['./users.component.css']
 })
-export class UsersComponent implements OnInit {
-  userId: number;
-  constructor(private route: ActivatedRoute) { }
+export class UsersComponent {
+  // userId: number;
+  // constructor(private route: ActivatedRoute) { }
 
-  ngOnInit() {
-    this.route.params.subscribe((params: Params) => {
-      this.userId = params.id;
-    });
+  // ngOnInit() {
+  //   this.route.params.subscribe((params: Params) => {
+  //     this.userId = params.id;
+  //   });
 
-  }
+  // }
 
 }