diff --git a/application/frontend/src/scaffolding/Header/Header.tsx b/application/frontend/src/scaffolding/Header/Header.tsx
index a44a97d9..d784d10e 100644
--- a/application/frontend/src/scaffolding/Header/Header.tsx
+++ b/application/frontend/src/scaffolding/Header/Header.tsx
@@ -1,6 +1,6 @@
 import './header.scss';
 
-import { Menu, Search } from 'lucide-react';
+import { Menu, Search, X } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { NavLink } from 'react-router-dom';
@@ -127,6 +127,13 @@ export const Header = () => {
       <div className={`navbar__overlay ${isMobileMenuOpen ? 'is-open' : ''}`} onClick={closeMobileMenu}></div>
 
       <div className={`navbar__mobile-menu ${isMobileMenuOpen ? 'is-open' : ''}`}>
+        <button 
+     className="navbar__mobile-menu-close" 
+     onClick={closeMobileMenu}
+     aria-label="Close mobile menu"
+    >
+     <X className="mobile-close-icon" />
+   </button>
         <div className="mobile-search-container">
           <SearchBar />
         </div>
diff --git a/application/frontend/src/scaffolding/Header/header.scss b/application/frontend/src/scaffolding/Header/header.scss
index 50cf7253..75bca479 100644
--- a/application/frontend/src/scaffolding/Header/header.scss
+++ b/application/frontend/src/scaffolding/Header/header.scss
@@ -322,3 +322,35 @@
     display: block;
   }
 }
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+.navbar__mobile-menu-close {
+  display: flex;
+  margin-left: auto; /* Pushes it to the right */
+  margin-bottom: 1rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  
+  .mobile-close-icon {
+    color: #ffffff;
+    width: 28px;
+    height: 28px;
+  }
+
+  &:hover {
+    opacity: 0.7;
+  }
+}