Index: ReserveNGo-frontend/src/App.vue
===================================================================
--- ReserveNGo-frontend/src/App.vue	(revision 0254d6b7835b1440fab9c8934bb27d1c13986821)
+++ ReserveNGo-frontend/src/App.vue	(revision b6bd8e1a90d2e33fa607ce1a45ba01bc582b2970)
@@ -77,5 +77,5 @@
   left: 0;
   right: 0;
-  height: 80px;
+  height: auto;
   z-index: 1000;
   background: #8377d1;
Index: ReserveNGo-frontend/src/components/Project/Bars/HeaderNavigationBar.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Bars/HeaderNavigationBar.vue	(revision 0254d6b7835b1440fab9c8934bb27d1c13986821)
+++ ReserveNGo-frontend/src/components/Project/Bars/HeaderNavigationBar.vue	(revision b6bd8e1a90d2e33fa607ce1a45ba01bc582b2970)
@@ -62,5 +62,5 @@
 
 <template>
-  <nav class="navbar navbar-expand-lg navbar-dark custom-background-nav py-2 px-5">
+  <nav class="navbar navbar-expand-lg navbar-dark custom-background-nav py-1 px-5">
     <div class="container-fluid">
       <router-link
@@ -82,4 +82,16 @@
       </div>
 
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarContent"
+        aria-controls="navbarContent"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
       <div class="collapse navbar-collapse justify-content-end" id="navbarContent">
         <ul class="navbar-nav align-items-center">
@@ -221,3 +233,7 @@
   color: #f55845 !important;
 }
+
+.nav-item {
+  margin-bottom: 2px;
+}
 </style>