diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts
index 3fdd9e6..f2256e1 100644
--- a/ogWebconsole/src/app/app.module.ts
+++ b/ogWebconsole/src/app/app.module.ts
@@ -10,7 +10,8 @@ import { HeaderComponent } from './components/layout/header/header.component';
 import { SidebarComponent } from './components/layout/sidebar/sidebar.component';
 import { LoginComponent } from './components/login/login.component';
 import { FormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { CustomInterceptor } from './services/custom.interceptor';
 
 @NgModule({
   declarations: [
@@ -29,7 +30,13 @@ import { HttpClientModule } from '@angular/common/http';
     FormsModule,
     HttpClientModule
   ],
-  providers: [],
+  providers: [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: CustomInterceptor,
+      multi:true
+    }
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css
index e69de29..7054a9f 100644
--- a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css
+++ b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css
@@ -0,0 +1,15 @@
+:host{
+    width: 100%;
+    display: grid;
+    grid-template-areas: 
+    "sidebar header"
+    "sidebar content"
+    "sidebar footer";
+    grid-template-columns: 120px 1fr;
+    height: 100%;
+}
+.content-wrapper{
+    display: block;
+    background-color: gold;
+    grid-area: content;
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html
index 78c44f9..d5ccfef 100644
--- a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html
+++ b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html
@@ -1 +1,7 @@
-<p>main-layout works!</p>
+<app-sidebar></app-sidebar>
+<app-header></app-header>
+<app-footer></app-footer>
+<div class="content-wrapper">
+  <div class="content">
+    <router-outlet />
+  </div>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/login/login.component.html b/ogWebconsole/src/app/components/login/login.component.html
index 30fd765..422912a 100644
--- a/ogWebconsole/src/app/components/login/login.component.html
+++ b/ogWebconsole/src/app/components/login/login.component.html
@@ -3,11 +3,11 @@
     <form>
         <div>
             <label for="username">Username:</label>
-            <input [(ngModel)]="loginObj.EmailId" type="text" id="username" name="EmailId" required>
+            <input [(ngModel)]="loginObj.username" type="text" id="username" name="username" required>
         </div>
         <div>
             <label for="password">Password:</label>
-            <input (ngModel)="loginObj.Password" type="password" id="password" name="Password" required>
+            <input [(ngModel)]="loginObj.password" type="password" id="password" name="password" required>
         </div>
         <button (click)="onLogin()">Login</button>
     </form>
diff --git a/ogWebconsole/src/app/components/login/login.component.ts b/ogWebconsole/src/app/components/login/login.component.ts
index 6be86bf..e3f552a 100644
--- a/ogWebconsole/src/app/components/login/login.component.ts
+++ b/ogWebconsole/src/app/components/login/login.component.ts
@@ -11,11 +11,21 @@ import { Router } from '@angular/router';
 })
 export class LoginComponent {
     loginObj: any = {
-      "EmailId": "",
-      "Password": ""
+      "username": "",
+      "password": ""
     };
-    constructor(private http: HttpClient) { }
+    constructor(private http: HttpClient, private router: Router) { }
+    
     onLogin() {
-      this.http.post('https://freeapi.gerasim.in/api/User/Login', this.loginObj).subscribe((res: any) => {})
+      this.http.post('http://127.0.0.1:8080/auth/login', this.loginObj).subscribe((res: any) => {
+        if(res.token){
+          localStorage.setItem('loginToken', res.token);
+          localStorage.setItem('refreshToken', res.refreshToken);
+          this.router.navigateByUrl('/dashboard');
+        }
+        else(
+          alert("invalid credentials")
+        )
+      })
     }
 }