diff --git a/src/app/app.component.html b/src/app/app.component.html
index 1930498..df4d56b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,13 @@
-<!-- <ngx-loading-bar [includeSpinner]="false"></ngx-loading-bar> -->
-<div class="container mx-auto p-2 flex justify-end">
-    <ui-switch [(ngModel)]="isDark" (change)="toggle()"></ui-switch>
-</div>
-<app-header></app-header>
-<router-outlet></router-outlet>
-<app-footer></app-footer>
\ No newline at end of file
+<mat-sidenav-container>
+    <mat-sidenav #sidenav>
+        <app-sidebar (closeSideNav)="sidenav.close()"></app-sidebar>
+    </mat-sidenav>
+    <mat-sidenav-content>
+        <app-header (SideNavToggle)="sidenav.toggle()"></app-header>
+        <main>
+            <router-outlet></router-outlet>
+            <app-wip></app-wip>
+            <app-footer></app-footer>
+        </main>
+    </mat-sidenav-content>
+</mat-sidenav-container>
\ No newline at end of file
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29..2ff51ec 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,10 @@
+mat-sidenav-container,
+mat-sidenav-content,
+mat-sidenav {
+  height: 100%;
+}
+
+mat-sidenav {
+  width: 200px;
+  background-color: #f4f4f4;
+}
\ No newline at end of file
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 64d723b..990840d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,24 +6,33 @@ import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
 import { NgOptimizedImage } from '@angular/common';
-import { UiSwitchModule } from 'ngx-ui-switch';
 import { HomeComponent } from './pages/home/home.component';
 import { WipComponent } from './pages/wip/wip.component';
 import { UsesComponent } from './pages/uses/uses.component';
 import { BlogsComponent } from './pages/blogs/blogs.component';
 import { AboutComponent } from './pages/about/about.component';
-import { HeaderComponent } from './header/header.component';
-import { FooterComponent } from './footer/footer.component';
+import { HeaderComponent } from './components/header/header.component';
+import { FooterComponent } from './components/footer/footer.component';
 import { ErrorComponent } from './pages/error/error.component';
 import { ProjectsComponent } from './pages/projects/projects.component';
 import { ProjectDetailsComponent } from './pages/projects/project-details/project-details.component';
 import { environment } from '../environments/environment';
-import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
-import { provideAuth,getAuth } from '@angular/fire/auth';
-import { provideDatabase,getDatabase } from '@angular/fire/database';
-import { provideFirestore,getFirestore } from '@angular/fire/firestore';
-import { AngularMaterialModule } from './angular-material.module';
-
+import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
+import { provideAuth, getAuth } from '@angular/fire/auth';
+import { provideDatabase, getDatabase } from '@angular/fire/database';
+import { provideFirestore, getFirestore } from '@angular/fire/firestore';
+import { MatInputModule } from '@angular/material/input';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSidenavModule } from '@angular/material/sidenav'
+import { SidebarComponent } from './components/sidebar/sidebar.component';
+import { MatListModule } from '@angular/material/list';
 @NgModule({
   declarations: [
     AppComponent,
@@ -36,7 +45,8 @@ import { AngularMaterialModule } from './angular-material.module';
     FooterComponent,
     ErrorComponent,
     ProjectsComponent,
-    ProjectDetailsComponent
+    ProjectDetailsComponent,
+    SidebarComponent
   ],
   imports: [
     BrowserModule,
@@ -44,8 +54,17 @@ import { AngularMaterialModule } from './angular-material.module';
     BrowserAnimationsModule,
     HttpClientModule,
     NgOptimizedImage,
-    UiSwitchModule,
-    AngularMaterialModule,
+    MatInputModule,
+    MatCardModule,
+    MatButtonModule,
+    MatToolbarModule,
+    MatExpansionModule,
+    MatProgressSpinnerModule,
+    MatPaginatorModule,
+    MatDialogModule,
+    MatIconModule,
+    MatSidenavModule,
+    MatListModule,
     provideFirebaseApp(() => initializeApp(environment.firebase)),
     provideAuth(() => getAuth()),
     provideDatabase(() => getDatabase()),
diff --git a/src/app/footer/footer.component.html b/src/app/components/footer/footer.component.html
similarity index 100%
rename from src/app/footer/footer.component.html
rename to src/app/components/footer/footer.component.html
diff --git a/src/app/footer/footer.component.scss b/src/app/components/footer/footer.component.scss
similarity index 100%
rename from src/app/footer/footer.component.scss
rename to src/app/components/footer/footer.component.scss
diff --git a/src/app/footer/footer.component.spec.ts b/src/app/components/footer/footer.component.spec.ts
similarity index 100%
rename from src/app/footer/footer.component.spec.ts
rename to src/app/components/footer/footer.component.spec.ts
diff --git a/src/app/footer/footer.component.ts b/src/app/components/footer/footer.component.ts
similarity index 100%
rename from src/app/footer/footer.component.ts
rename to src/app/components/footer/footer.component.ts
diff --git a/src/app/header/header.component.html b/src/app/components/header/header.component.html
similarity index 73%
rename from src/app/header/header.component.html
rename to src/app/components/header/header.component.html
index 488c216..1e3836a 100644
--- a/src/app/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -1,3 +1,11 @@
+<mat-toolbar color="primary">
+    <div>
+        <button mat-icon-button (click)="openSidenav()">
+            <mat-icon>menu</mat-icon>
+        </button>
+    </div>
+</mat-toolbar>
+
 <div class="flex flex-row justify-center gap-4 m-4">
     <div class="text-lg font-semibold">
         <a routerLink="">Home</a>
diff --git a/src/app/header/header.component.scss b/src/app/components/header/header.component.scss
similarity index 100%
rename from src/app/header/header.component.scss
rename to src/app/components/header/header.component.scss
diff --git a/src/app/header/header.component.spec.ts b/src/app/components/header/header.component.spec.ts
similarity index 100%
rename from src/app/header/header.component.spec.ts
rename to src/app/components/header/header.component.spec.ts
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
new file mode 100644
index 0000000..2395b29
--- /dev/null
+++ b/src/app/components/header/header.component.ts
@@ -0,0 +1,18 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+  @Output() SideNavToggle = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit() { }
+
+  openSidenav() {
+    this.SideNavToggle.emit();
+  }
+}
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
deleted file mode 100644
index 913b282..0000000
--- a/src/app/header/header.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
-})
-export class HeaderComponent {
-
-}
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index e3f27b3..5e3b4c4 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -1,2 +1 @@
 <!-- <ngx-loading-bar [includeSpinner]="false"></ngx-loading-bar> -->
-<app-wip></app-wip>
\ No newline at end of file
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index f038769..72e3d7b 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -8,13 +8,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 
-  data: any;
-  
-  constructor(private http: HttpClient){}
+  constructor(private http: HttpClient) { }
 
   ngOnInit(): void {
-    this.http.get('/assets/data.json').subscribe(data => {
-      this.data = data;
-    })
   }
 }
diff --git a/src/styles.scss b/src/styles.scss
index 0b61188..a630a36 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -6,11 +6,11 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-    background-color: #f9f3f3;
+html {
+    height: 100%;
+}
 
-    &.dark {
-        color: #f9f3f3;
-        background-color: #393e46;
-    }
+body {
+    height: 100%;
+    margin: 0;
 }
\ No newline at end of file