diff --git a/src/Component/NavBar.js b/src/Component/NavBar.js
index f136ce30..cc642983 100644
--- a/src/Component/NavBar.js
+++ b/src/Component/NavBar.js
@@ -1,6 +1,7 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
 import Button from "../Component/Button";
+import { useNavigate } from "react-router-dom";
 
 // tiny inline icons (no extra assets)
 const HomeIcon = ({ className = "" }) => (
@@ -17,6 +18,7 @@ const MenuIcon = ({ className = "" }) => (
 );
 
 export default function NavBar() {
+  const navigate = useNavigate();
   const base =
     "group relative inline-flex items-center gap-2 px-3 py-1 rounded-lg " +
     "text-[15px] font-semibold tracking-wide transition-colors";
@@ -72,10 +74,10 @@ export default function NavBar() {
 
           {/* Actions */}
           <div className="flex items-center gap-3">
-            <Button as="a" href="/sign-in" className="text-sm bg-emerald-600/70 text-slate-800 hover:bg-emerald-600">
+            <Button as="a" onClick={() => navigate("/sign-in")} className="text-sm bg-emerald-600/70 text-slate-800 hover:bg-emerald-600">
               Login
             </Button>
-            <Button as="a" href="/register" className="text-sm bg-emerald-500 text-white hover:bg-emerald-600">
+            <Button as="a" onClick={() => navigate("/register")} className="text-sm bg-emerald-500 text-white hover:bg-emerald-600">
               Sign Up
             </Button>
           </div>
diff --git a/src/Pages/Menu.jsx b/src/Pages/Menu.jsx
index 9ec394c2..8503e9eb 100644
--- a/src/Pages/Menu.jsx
+++ b/src/Pages/Menu.jsx
@@ -10,7 +10,9 @@ const formatCurrency = (n) => `$${n.toFixed(2)}`;
 export default function MenuPage() {
   const [category, setCategory] = useState(null);
   const [search, setSearch] = useState("");
-  const [activeTags, setActiveTags] = useState([]);
+  // const [activeTags, setActiveTags] = useState([]);
+  const [activeTags] = useState([]);
+
   const [sortBy, setSortBy] = useState("popular");
   const [toast, setToast] = useState(null);
   const [loading, setLoading] = useState(false);
@@ -19,7 +21,7 @@ export default function MenuPage() {
 
   useEffect(() => {
     fetchMenuItemData();
-  }, []);
+  });
 
   const fetchMenuItemData = async () => {
     setLoading(true);
@@ -137,8 +139,8 @@ export default function MenuPage() {
                     key={c}
                     onClick={() => setCategory(c)}
                     className={`rounded-xl px-4 py-2 text-sm font-medium transition-all border ${c === category
-                        ? "bg-emerald-600 text-white border-emerald-600 shadow"
-                        : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"
+                      ? "bg-emerald-600 text-white border-emerald-600 shadow"
+                      : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"
                       }`}
                   >
                     {c}