diff --git a/src/app/general/home/home.component.html b/src/app/general/home/home.component.html
index 5f2c53f..f31f709 100644
--- a/src/app/general/home/home.component.html
+++ b/src/app/general/home/home.component.html
@@ -1 +1,3 @@
-<p>home works!</p>
+<div class="dashboard-container">
+	<app-navbar></app-navbar>
+</div>
\ No newline at end of file
diff --git a/src/app/general/home/home.component.scss b/src/app/general/home/home.component.scss
index e69de29..48d3342 100644
--- a/src/app/general/home/home.component.scss
+++ b/src/app/general/home/home.component.scss
@@ -0,0 +1,4 @@
+.dashboard-container {
+  padding-top: 35px;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/src/app/general/home/home.component.ts b/src/app/general/home/home.component.ts
index 519165d..59748de 100644
--- a/src/app/general/home/home.component.ts
+++ b/src/app/general/home/home.component.ts
@@ -1,5 +1,6 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { HomeAnimations } from './home.animations';
+import { NavbarComponent } from 'src/app/shared/components/navbar/navbar.component';
 
 @Component({
   selector: 'app-home',
@@ -8,8 +9,26 @@ import { HomeAnimations } from './home.animations';
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: HomeAnimations,
   standalone: true,
-  imports: [],
+  imports: [
+    NavbarComponent
+  ],
 })
-export class HomeComponent {
+export class HomeComponent implements OnInit {
 
+  // --------------- INPUTS AND OUTPUTS ------------------
+
+  // --------------- LOCAL UI STATE ----------------------
+
+  // --------------- COMPUTED DATA -----------------------
+
+  // --------------- EVENT HANDLING ----------------------
+  
+  // --------------- OTHER -------------------------------
+
+  constructor(
+  ) { }
+
+  // --------------- LOAD AND CLEANUP --------------------
+  ngOnInit(): void {
+  }
 }
\ No newline at end of file
diff --git a/src/app/shared/components/navbar/navbar.component.html b/src/app/shared/components/navbar/navbar.component.html
index 6bbf8ee..1dc4f26 100644
--- a/src/app/shared/components/navbar/navbar.component.html
+++ b/src/app/shared/components/navbar/navbar.component.html
@@ -1 +1,18 @@
-<p>navbar works!</p>
+<div class="navbar-container">
+  <img class="logo" src="assets/images/logo.svg">
+    <div class="user-setting-section">
+      <img class="profile-pic" src="http://loremflickr.com/100/100" [matMenuTriggerFor]="menu" #menuTrigger/>
+      <mat-menu #menu="matMenu">
+        <div class="logout" >
+          <span>
+            Logout
+          </span>
+          <svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M11.5002 26.25H6.50024C5.8372 26.25 5.20132 25.9866 4.73248 25.5178C4.26364 25.0489 4.00024 24.413 4.00024 23.75V6.25C4.00024 5.58696 4.26364 4.95107 4.73248 4.48223C5.20132 4.01339 5.8372 3.75 6.50024 3.75H11.5002" stroke="#2DBDB1" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M20.2502 21.25L26.5002 15L20.2502 8.75" stroke="#2DBDB1" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M26.5002 15H11.5002" stroke="#2DBDB1" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+      </mat-menu>
+    </div>  
+</div>
\ No newline at end of file
diff --git a/src/app/shared/components/navbar/navbar.component.scss b/src/app/shared/components/navbar/navbar.component.scss
index e69de29..3ac5f8a 100644
--- a/src/app/shared/components/navbar/navbar.component.scss
+++ b/src/app/shared/components/navbar/navbar.component.scss
@@ -0,0 +1,42 @@
+.navbar-container {
+  height: 70px;
+  width: 100%;
+  background: #FFFFFF;
+  box-shadow: -4px 0px 4px rgba(200, 224, 212, 0.25);
+  display: flex;
+  flex-direction: row;
+  align-items: center; // Center items vertically
+  padding: 8px 16px; // Add padding to the container
+
+  .logo {
+    width: 46px;
+    height: 46px;
+    cursor: pointer;
+    margin-right: 16px; // Add margin between logo and user section
+  }
+
+  .user-setting-section {
+    margin-left: auto; // Push to the right
+    display: flex;
+    align-items: center; // Center items vertically
+    color: #2DBDB1;
+    .profile-pic{
+      height: 46px;
+      width: 46px;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+  }
+}
+
+/** material target, can't be nested */
+.logout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  font-size: 20px;
+  font-weight: 300;
+  cursor: pointer;
+  padding: 10px;
+}
diff --git a/src/app/shared/components/navbar/navbar.component.ts b/src/app/shared/components/navbar/navbar.component.ts
index 61730ec..673387e 100644
--- a/src/app/shared/components/navbar/navbar.component.ts
+++ b/src/app/shared/components/navbar/navbar.component.ts
@@ -1,10 +1,11 @@
 import { Component, OnInit } from '@angular/core';
+import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
 
 
 @Component({
   selector: 'app-navbar',
   standalone: true,
-  imports: [],
+  imports: [ MatMenuTrigger, MatMenu],
   templateUrl: './navbar.component.html',
   styleUrl: './navbar.component.scss'
 })
diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg
new file mode 100644
index 0000000..ea02672
--- /dev/null
+++ b/src/assets/images/logo.svg
@@ -0,0 +1,13 @@
+<svg width="131" height="131" viewBox="0 0 131 131" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="65.5" cy="65.5" r="61.5" stroke="url(#paint0_linear)" stroke-width="8"/>
+    <path d="M79.7953 41.2763L70.6687 87.9058L39.6188 66.6427L79.7953 41.2763Z" fill="#2DBDB1"/>
+    <path d="M54.2681 76.6039L80.0001 41.4999L71.0001 88L54.2681 76.6039Z" fill="#C4C4C4"/>
+    <path d="M54.2681 76.6039L80.0001 41.4999L71.0001 88L54.2681 76.6039Z" fill="#5ECAC1"/>
+    <defs>
+    <linearGradient id="paint0_linear" x1="174" y1="-38" x2="10" y2="122" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#2DBDB1"/>
+    <stop offset="1" stop-color="#2DBDB1" stop-opacity="0"/>
+    </linearGradient>
+    </defs>
+    </svg>
+    
\ No newline at end of file