diff --git a/components/header.html b/components/header.html
index f9d288e..7a75f70 100644
--- a/components/header.html
+++ b/components/header.html
@@ -1,6 +1,12 @@
+<script src="./js/navbar.js"></script>
 <div class="nav-bar">
-  <div>
-    <a class="logo" href="/">
+  <div class="mobile-menu-icon">
+    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
+      <i class="fa fa-bars"></i>
+    </a>
+  </div>
+  <div class="logo">
+    <a href="/">
       <img
         src="../assets/shiloh-logo-white-1.png"
         alt="Last Hour Hosting Logo"
diff --git a/css/styles.css b/css/styles.css
index 488d7ad..0b5ec8b 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -335,6 +335,7 @@ a {
   align-items: center;
   padding: 1rem;
   margin: 1rem;
+  position: relative; /* added this */
 }
 
 .logo {
@@ -376,6 +377,10 @@ a {
   width: 100%;
 }
 
+.mobile-menu-icon {
+  display: none; /* hide the icon on desktop */
+}
+
 /* Media query for mobile devices */
 @media (max-width: 600px) {
   .nav-bar {
@@ -389,16 +394,41 @@ a {
   }
 
   .menu {
-    flex-direction: column;
+    display: none; /* hide the menu on mobile */
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background-color: rgb(0, 0, 0);
+    padding-top: 10px;
+    padding-bottom: 10px;
   }
 
   .menu-item {
     margin-bottom: 5px;
   }
 
-  @media all and (max-width: 960px) {
-    .flex-column {
-      padding: 10px 5px;
-    }
+  .mobile-menu-icon {
+    display: block; /* show the icon on mobile */
+    position: absolute;
+    top: 25px;
+    right: 20px;
+    font-size: 24px;
+    cursor: pointer;
+    transition: font-size 0.1s ease-in-out;
+  }
+
+  .mobile-menu-icon:hover {
+    font-size: 26px;
+  }
+
+  .show-menu {
+    display: block;
+  }
+}
+
+@media all and (max-width: 960px) {
+  .flex-column {
+    padding: 10px 5px;
   }
 }
diff --git a/index.html b/index.html
index 4b8b852..3599bfc 100644
--- a/index.html
+++ b/index.html
@@ -36,12 +36,13 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 
     <link rel="stylesheet" href="css/styles.css?v=1.0" />
-    <meta
-      http-equiv="Content-Security-Policy"
-      content="script-src 'self'; style-src 'self'; object-src 'none'; frame-src 'self'; base-uri 'self'; font-src 'self'; img-src 'self' https://cdn.lasthourhosting.org/ https://status.shilohcode.com; media-src 'self' https://cdn.lasthourhosting.org/shiloh/; "
-    />
     <script src="./js/jquery-3.7.1.min.js"></script>
     <script src="./js/main.js"></script>
+    <script src="./js/navbar.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
   </head>
 
   <body>
diff --git a/js/navbar.js b/js/navbar.js
new file mode 100644
index 0000000..0b8705f
--- /dev/null
+++ b/js/navbar.js
@@ -0,0 +1,4 @@
+function myFunction() {
+  var menu = document.querySelector(".menu");
+  menu.classList.toggle("show-menu");
+}
