diff --git a/src/components/Navbar/Hamburger/Hamburger.vue b/src/components/Navbar/Hamburger/Hamburger.vue
index 8c362ef8..4b4d5c72 100644
--- a/src/components/Navbar/Hamburger/Hamburger.vue
+++ b/src/components/Navbar/Hamburger/Hamburger.vue
@@ -1,18 +1,43 @@
 <template>
     <!-- Hamburger Menu -->
     <button
-        class="navbar-toggler collapsed"
-        type="button"
-        data-toggle="collapse"
-        data-target="#bs-example-navbar-collapse-1"
-        aria-controls="collapsedNavbar"
-        aria-expanded="false"
-        aria-label="Toggle navigation"
+      class="navbar-toggler collapsed"
+      type="button"
+      data-toggle="collapse"
+      data-target="#bs-example-navbar-collapse-1"
+      aria-controls="collapsedNavbar"
+      aria-expanded="false"
+      aria-label="Toggle navigation"
+      @click="toggleCross"
     >
-        <span class="navbar-toggler-icon"></span>
+    <span :class="{ 'hidden': !isCrossed }" class="navbar-toggler-icon"></span>
+    <span :class="{ 'hidden': isCrossed }" id="cross">&times;</span>
+    
     </button>
-</template>
+  </template>
 
-<script lang="ts" setup></script>
-
-<style></style>
+  <script>
+  export default {
+    data() {
+      return {
+        isCrossed: true,
+      };
+    },
+    methods: {
+      toggleCross() {
+        this.isCrossed = !this.isCrossed;
+      },
+    },
+    
+  };
+  </script>
+  
+  <style scoped>
+  .hidden {
+    display: none;
+  }
+    #cross{
+        font-size: 30px;
+    }
+  </style>
+  
\ No newline at end of file