diff --git a/css/navbar.css b/css/navbar.css
index 0043b55..643c673 100644
--- a/css/navbar.css
+++ b/css/navbar.css
@@ -21,7 +21,7 @@ nav{
 }
 /* ========= nav items ========= */
 
-.nav-items{
+.nav-items{       
     background-color: #a6a6a44b;
     padding: 10px;
     border-radius: 50px;
@@ -52,6 +52,10 @@ nav{
     gap: 15px;
 }
 
+.hamburger {
+    color: var(--white) !important;
+}
+
 
 /* ========= nav links ========= */
 .nav-links{
diff --git a/index.html b/index.html
index dd79fd0..dda3d79 100644
--- a/index.html
+++ b/index.html
@@ -34,12 +34,49 @@
     <main>
       <!-- navbar section -->
 
+
+<body>
+  <main>
+    <!-- navbar section -->
+
+    <div class="nav-buttons">
+      <i class="fa-solid fa-bars hamburger"></i>
+      <i class="fa-solid fa-close hamburger"></i>
+      <div class="navTitle">
+        <img src="./public/hackerspace.jpg" alt="">
+      </div>
+    </div>
+    <nav class="nav">
+      <div class="nav-items">
+        <a href="#home">Home</a>
+        <a href="#">Products</a>
+        <a href="#">Solution</a>
+        <a href="#">Company</a>
+      </div>
+      <div class="user-button">
+        <a href="https://hackerspace.bio.link" target="_blank">
+          <button class="button">Join Us</button>
+        </a>
+      </div>
+      <div class="theme-toggle">
+        <button id="change-theme">Toggle theme</button>
+      </div>
+
+      <div class="nav-links">
+        <a href="https://www.instagram.com/_hackerspace_msit_/" target="_blank">
+          <img src="./public/instagram.png" alt="" /></a>
+        <a href="https://www.facebook.com/profile.php?id=100091680046825" target="_blank">
+          <img src="./public/facebook.png" alt="" /></a>
+        <a href="https://github.com/Hackerspace2023" target="_blank">
+          <img src="./public/github.png" alt="" /></a>
+
       <div class="nav-buttons">
         <i class="fa-solid fa-bars"></i>
         <i class="fa-solid fa-close"></i>
         <div class="navTitle">
           <img src="./public/hackerspace.jpg" alt="" />
         </div>
+
       </div>
       <nav class="nav">
         <div class="nav-items">
diff --git a/node_modules/.yarn-integrity b/node_modules/.yarn-integrity
new file mode 100644
index 0000000..b9b7edf
--- /dev/null
+++ b/node_modules/.yarn-integrity
@@ -0,0 +1,10 @@
+{
+  "systemParams": "darwin-x64-115",
+  "modulesFolders": [],
+  "flags": [],
+  "linkedModules": [],
+  "topLevelPatterns": [],
+  "lockfileEntries": {},
+  "files": [],
+  "artifacts": {}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..fb57ccd
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
