diff --git a/src/App.js b/src/App.js
index 54a2360..305d42d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -38,6 +38,20 @@ function App() {
           <Route path='/under40' element={<> <NavBar />  <Under10 /> </>} />
           <Route path='/forher' element={<> <NavBar />  <ForHer /> </>} />
           <Route path='/forhim' element={<> <NavBar />  <ForHim /> </>} />
+
+          {/* CATCH-ALL ROUTE (404 Page) -------- This must always be the last route inside <Routes> */}
+          <Route path="*" element={
+            <> 
+              <NavBar /> 
+              <MobileNav /> 
+              <div className="text-center mt-20">
+                <h1 className="text-4xl font-bold fof">404 - Page Not Found</h1>
+                <p className="mt-4 fof">The page you are looking for does not exist.</p>
+              </div> 
+            </>
+          } />
+
+
         </Routes>
 
       </BrowserRouter>
diff --git a/src/components/CartHold.js b/src/components/CartHold.js
index 0547d8d..be031a2 100644
--- a/src/components/CartHold.js
+++ b/src/components/CartHold.js
@@ -18,6 +18,10 @@ const CartHold = () => {
         return item.quantity * item.price;
     }).reduce((totalPrice, singleItemPrice) => totalPrice + singleItemPrice, 0);
 
+    // Handler to clear the entire cart
+    const handleClearCart = () => {
+        dispatch(cartActions.clearCart());
+    };
 
     return (
         <div>
@@ -27,6 +31,15 @@ const CartHold = () => {
                 <div className=' flex flex-row relative gap-40 urCartItem'>
                     <p className=' text-2xl'> Your Cart </p>
                     <p className=' font-semibold fof lin text-xl'> {cartLen} items </p>
+
+                    {/* Added Clear Cart Button */}
+                    <button 
+                        onClick={handleClearCart} 
+                        className="bg-red-500 text-white px-4 py-1 rounded hover:bg-red-700 transition-colors fof"
+                    >
+                        Clear Cart
+                    </button>
+
                 </div>
 
 
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 7290e44..033f48c 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -10,188 +10,84 @@ import { Link } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 
 const NavBar = () => {
-    const [show, setShow] = useState(false);
-    const [show2, setShow2] = useState(false);
-    const [show3, setShow3] = useState(false);
-    const [show4, setShow4] = useState(false);
+    // Access the total quantity from the cart state
+    const cartQuantity = useSelector((state) => state.cart.totalQuantity);
 
+    // Refactored: Single state to track the active dropdown menu
+    const [activeDropdown, setActiveDropdown] = useState(null);
 
-    const showHandler = () => {
-        setShow(true)
-        setShow2(false)
-        setShow3(false)
-        setShow4(false)
+    const handleMouseOver = (menuName) => {
+        setActiveDropdown(menuName);
+    };
 
-    }
-
-    const showHandler2 = () => {
-        setShow2(true)
-        setShow(false)
-        setShow3(false)
-        setShow4(false)
-
-    }
-
-    const showHandler3 = () => {
-        setShow3(true)
-        setShow(false)
-        setShow2(false)
-        setShow4(false)
-    }
-
-    const showHandler4 = () => {
-        setShow4(true)
-        setShow(false)
-        setShow2(false)
-        setShow3(false)
-
-    }
-
-
-    const dontShowHandler = () => {
-        setShow(false)
-        setShow2(false)
-        setShow3(false)
-        setShow4(false)
-
-
-    }
+    const handleMouseLeave = () => {
+        setActiveDropdown(null);
+    };
 
     return (
         <div>
-
-
-            <header class="banner" role="banner">
-
-                <nav class="navbar" role="navigation" aria-label="menu">
+            <header className="banner" role="banner">
+                <nav className="navbar" role="navigation" aria-label="menu">
 
                     <Link to="/">
-                        <img src={logo} className=" ml-32" />
+                        <img src={logo} className=" ml-32" alt="logo" />
                     </Link>
 
-                    <ul class="menuNav">
-                        <li class="dropdown nav-link nav-link-fade-up transition-all duration-700" onMouseOver={showHandler} >
+                    <ul className="menuNav">
+                        {/* BEST SELLERS Dropdown */}
+                        <li 
+                            className="dropdown nav-link nav-link-fade-up transition-all duration-700" 
+                            onMouseOver={() => handleMouseOver('bestSellers')}
+                        >
                             BEST SELLERS
-                            {show && <div>
-                                <ul class="dropdown-nav" onMouseLeave={dontShowHandler} >
-
-                                    <BestSellers > </BestSellers>
-
+                            {activeDropdown === 'bestSellers' && (
+                                <ul className="dropdown-nav" onMouseLeave={handleMouseLeave}>
+                                    <BestSellers />
                                 </ul>
+                            )}
+                        </li>
 
-                            </div>}
-
-                        </li >
-
-
-                        <li class="dropdown nav-link nav-link-fade-up" onMouseOver={showHandler2} >
+                        {/* GIFT SETS Dropdown */}
+                        <li 
+                            className="dropdown nav-link nav-link-fade-up" 
+                            onMouseOver={() => handleMouseOver('giftSets')}
+                        >
                             GIFT SETS
-                            {show2 && <ul class="dropdown-nav dropdown-nav2" onMouseLeave={dontShowHandler}>
-                                <GiftSets />
-                            </ul>}
-
+                            {activeDropdown === 'giftSets' && (
+                                <ul className="dropdown-nav dropdown-nav2" onMouseLeave={handleMouseLeave}>
+                                    <GiftSets />
+                                </ul>
+                            )}
                         </li>
 
-
-                        <li class="dropdown nav-link nav-link-fade-up" onMouseOver={showHandler3} >
+                        {/* SHOP RANGE Dropdown */}
+                        <li 
+                            className="dropdown nav-link nav-link-fade-up" 
+                            onMouseOver={() => handleMouseOver('shopRange')}
+                        >
                             SHOP RANGE
-                            {show3 && <ul class="dropdown-nav dropdown-nav3" onMouseLeave={dontShowHandler}>
-                                <Body />
-                            </ul>}
-
+                            {activeDropdown === 'shopRange' && (
+                                <ul className="dropdown-nav dropdown-nav3" onMouseLeave={handleMouseLeave}>
+                                    <Body />
+                                </ul>
+                            )}
                         </li>
 
-
-                        <p className='navLine absolute bg-red-600 w-1 font-extralight h-9 z-50'>  </p>
-
+                        <p className='navLine absolute bg-red-600 w-1 font-extralight h-9 z-50'></p>
                     </ul>
 
-                    <Link to="/cart">
-                        <FaShoppingBag className=' text-2xl text-right ml-10 relative left-24' />
+                    <Link to="/cart" className="relative flex items-center">
+                        <FaShoppingBag className='text-2xl text-right ml-10 relative left-24' />
+                        {cartQuantity > 0 && (
+                            <span className="absolute top-[-10px] right-[-15px] bg-red-600 text-white text-xs font-bold px-2 py-0.5 rounded-full left-[115px] z-50">
+                                {cartQuantity}
+                            </span>
+                        )}
                     </Link>
-                </nav >
-            </header >
-
-
-
-        </div >
+                </nav>
+            </header>
+        </div>
     )
 }
 
-export default NavBar
-
-
-
-
-
-
-
-/*    
-
-
-
-          
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-             <div class="container">
-                <div class="dropdown" onMouseOver={showHandler}>
-                    <button class="dropbtn">Dropdown</button>
-                    <div class="dropdown-content" onMouseLeave={dontShowHandler}>
-                     {show && <BestSellers /> }
-                    </div>
-                </div>
-
-                <div class="dropdown" onMouseOver={showHandler2}>
-                    <button class="dropbtn">Dropdown</button>
-                    <div class="dropdown-content" onMouseLeave={dontShowHandler}>
-                    {show2 && <GiftSets /> }
-                    </div>
-                </div>
-
-
-                <div class="dropdown">
-                    <button class="dropbtn">Dropdown</button>
-                    <div class="dropdown-content">
-                        Link 1
-                        Link 2
-                        Link 3
-                    </div>
-                </div>
-
-
-                <a href="#news">Link</a>
-            </div>
-
-            <h3>Dropdown Menu inside a Navigation Bar</h3>
-            <p>Hover over the "Dropdown" link to see the dropdown menu.</p>
-
-
-
-
-
-
-
-
-
-
-
-
-
-*/
-
+export default NavBar;
\ No newline at end of file
diff --git a/src/redux-state/CartState.js b/src/redux-state/CartState.js
index 656feb3..520e477 100644
--- a/src/redux-state/CartState.js
+++ b/src/redux-state/CartState.js
@@ -42,6 +42,11 @@ const cartSlice = createSlice({
                 existingItem.totalPrice = existingItem.totalPrice - existingItem.price;
             }
         },
+        // New reducer to empty the entire cart at once
+        clearCart(state) {
+            state.items = [];
+            state.totalQuantity = 0;
+        },
     }
 })
 
diff --git a/src/styles/Navbar.css b/src/styles/Navbar.css
index 50d86cc..04c9885 100644
--- a/src/styles/Navbar.css
+++ b/src/styles/Navbar.css
@@ -171,4 +171,22 @@ li {
   width: 1.5px !important;
   top: 2.8rem !important;
   background-color: #031D44;
-}/*# sourceMappingURL=Navbar.css.map */
\ No newline at end of file
+}/*# sourceMappingURL=Navbar.css.map */
+
+/* Custom styling for the cart badge */
+.navbar .relative {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+/* Custom styling for the cart badge */
+.navbar span.bg-red-600 {
+    min-width: 18px;
+    height: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 11px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
\ No newline at end of file