diff --git a/src/App.js b/src/App.js
index bbadedc..efe0a13 100644
--- a/src/App.js
+++ b/src/App.js
@@ -47,20 +47,19 @@ import SymptomAssessment from "./routes/SymptomAssessment/SymptomAssessment";
 import Leaderboard from "./routes/LeaderBoard/leaderBoard";
 import ObesityPredictor from "./routes/survey/ObesityPredictor";
 import Predictionresult from "./routes/survey/predictionresult";
-import UiTimer from "./routes/UiTimer/UiTimer"
-import Settings from "./routes/Settings/Settings"
+import UiTimer from "./routes/UiTimer/UiTimer";
+import Settings from "./routes/Settings/Settings";
 import HealthFAQ from "./routes/HealthFAQ/HealthFAQ";
-import FitnessRoadmap from './routes/survey/FitnessRoadmap';
+import FitnessRoadmap from "./routes/survey/FitnessRoadmap";
 import Community from "./routes/Community/Community";
 import PostDetail from "./routes/Community/PostDetail";
 import ScanBarcode from "./routes/ScanBarcode/ScanBarcode";
 import AuthCallback from "./pages/AuthCallback";
-import DailyPlanEdit from './routes/DailyPlan/DailyPlanEdit';
+import DailyPlanEdit from "./routes/DailyPlan/DailyPlanEdit";
 
 function App() {
   const { currentUser } = useContext(UserContext);
-  
-  
+
   // Initialize font size settings for elderly users
   useEffect(() => {
     initializeFontSize();
@@ -87,7 +86,7 @@ function App() {
         <Route path="/community" element={<Community />} />
         <Route path="/community/post/:postId" element={<PostDetail />} />
         <Route path="/survey" element={<ObesityPredictor />} />
-        <Route path="/survey/result" element= {<Predictionresult/>}/>
+        <Route path="/survey/result" element={<Predictionresult />} />
         <Route path="/roadmap" element={<FitnessRoadmap />} />
 
         {/* Private Routes */}
@@ -99,14 +98,7 @@ function App() {
             </AuthenticateRoute>
           }
         />
-        <Route
-          path="createRecipe"
-          element={
-            <AuthenticateRoute>
-              <CreateRecipe />
-            </AuthenticateRoute>
-          }
-        />
+        <Route path="createRecipe" element={<CreateRecipe />} />
         <Route
           path="searchRecipes"
           element={
@@ -188,14 +180,7 @@ function App() {
             </AuthenticateRoute>
           }
         />
-        <Route
-          path="recipe"
-          element={
-            <AuthenticateRoute>
-              <Recipe />
-            </AuthenticateRoute>
-          }
-        />
+        <Route path="recipe" element={<Recipe />} />
         <Route path="/recipe/:id" element={<RecipeDetail />} />
         <Route
           path="Meal"
@@ -258,12 +243,12 @@ function App() {
           }
         />
         <Route
-         path="settings"
-         element={
-          <AuthenticateRoute>
-            <Settings />
-          </AuthenticateRoute>
-         }
+          path="settings"
+          element={
+            <AuthenticateRoute>
+              <Settings />
+            </AuthenticateRoute>
+          }
         />
         <Route
           path="HealthFAQ"
@@ -279,4 +264,4 @@ function App() {
   );
 }
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/components/SideMenu.js b/src/components/SideMenu.js
index a0e285f..df627d0 100644
--- a/src/components/SideMenu.js
+++ b/src/components/SideMenu.js
@@ -24,9 +24,9 @@ const SideMenu = ({ isOpen, toggleMenu }) => {
   return (
     <div className={`side-menu ${isOpen ? "open" : ""}`}>
       {/* Close Button */}
-      <button 
-        className="close-button" 
-        onClick={toggleMenu} 
+      <button
+        className="close-button"
+        onClick={toggleMenu}
         aria-label="Close menu"
       >
         &times; {/* This renders a nice cross */}
@@ -34,15 +34,31 @@ const SideMenu = ({ isOpen, toggleMenu }) => {
       <div className="nav-links column">
         {currentUser ? (
           <>
-            <Link to="/home" onClick={toggleMenu}>Home</Link>
-            <Link to="/dashboard" onClick={toggleMenu}>Menu</Link>
-            <Link to="/Meal" onClick={toggleMenu}>Meal Planning</Link>
-            <Link to="/daily-plan-edit" onClick={toggleMenu}>Edit Daily Plan</Link>
-            <Link to="/healthnews" onClick={toggleMenu}>Health News</Link>
-            <Link to="/survey" onClick={toggleMenu}>Fitness Roadmap</Link>
-            <Link to="/community" onClick={toggleMenu}>Community</Link>
+            <Link to="/home" onClick={toggleMenu}>
+              Home
+            </Link>
+            <Link to="/dashboard" onClick={toggleMenu}>
+              Menu
+            </Link>
+            <Link to="/Meal" onClick={toggleMenu}>
+              Meal Planning
+            </Link>
+            <Link to="/daily-plan-edit" onClick={toggleMenu}>
+              Edit Daily Plan
+            </Link>
+            <Link to="/healthnews" onClick={toggleMenu}>
+              Health News
+            </Link>
+            <Link to="/survey" onClick={toggleMenu}>
+              Fitness Roadmap
+            </Link>
+            <Link to="/community" onClick={toggleMenu}>
+              Community
+            </Link>
 
-            <Link to="/HealthFAQ" onClick={toggleMenu}>HealthFAQ</Link>
+            <Link to="/HealthFAQ" onClick={toggleMenu}>
+              HealthFAQ
+            </Link>
 
             {/* Recipes Dropdown */}
             <div className="dropdown">
@@ -54,10 +70,21 @@ const SideMenu = ({ isOpen, toggleMenu }) => {
               </span>
               {openDropdown === "recipes" && (
                 <div className="dropdown-content">
-                  <Link to="/CreateRecipe" onClick={toggleMenu}>Create Recipe</Link>
-                  <Link to="/SearchRecipes" onClick={toggleMenu}>Search Recipes</Link>
-                  <Link to="/RecipeRating" onClick={toggleMenu}>Recipe Rating</Link>
-                  <Link to="/UiTimer" onClick={toggleMenu}>UiTimer</Link>
+                  <Link to="/CreateRecipe" onClick={toggleMenu}>
+                    Create Recipe
+                  </Link>
+                  <Link to="/SearchRecipes" onClick={toggleMenu}>
+                    Search Recipes
+                  </Link>
+                  <Link to="/recipe" onClick={toggleMenu}>
+                    Recipe
+                  </Link>
+                  <Link to="/RecipeRating" onClick={toggleMenu}>
+                    Recipe Rating
+                  </Link>
+                  <Link to="/UiTimer" onClick={toggleMenu}>
+                    UiTimer
+                  </Link>
                 </div>
               )}
             </div>
@@ -72,19 +99,42 @@ const SideMenu = ({ isOpen, toggleMenu }) => {
               </span>
               {openDropdown === "user" && (
                 <div className="dropdown-content">
-                  <Link to="/DietaryRequirements" onClick={toggleMenu}>Dietary Preference</Link>
-                  <Link to="/userProfile" onClick={toggleMenu}>Profile</Link>
+                  <Link to="/DietaryRequirements" onClick={toggleMenu}>
+                    Dietary Preference
+                  </Link>
+                  <Link to="/userProfile" onClick={toggleMenu}>
+                    Profile
+                  </Link>
                 </div>
               )}
             </div>
 
-            <Link to="/ScanProducts" onClick={toggleMenu}>Scan Products</Link>
-            <Link to="/ScanBarcode" onClick={toggleMenu}>Scan Barcode</Link>
-            <Link to="/preferences" onClick={toggleMenu}>Allergies & Intolerances</Link>
-            <Link to="/symptomassessment" onClick={toggleMenu}>Symptom Assessment</Link>
-            <Link to="/healthtools" onClick={toggleMenu}>Health Tools</Link>
-            <Link to="/settings" onClick={toggleMenu}>Settings</Link>
-            <button onClick={() => { logOut(); toggleMenu(); }}>Log Out</button>
+            <Link to="/ScanProducts" onClick={toggleMenu}>
+              Scan Products
+            </Link>
+            <Link to="/ScanBarcode" onClick={toggleMenu}>
+              Scan Barcode
+            </Link>
+            <Link to="/preferences" onClick={toggleMenu}>
+              Allergies & Intolerances
+            </Link>
+            <Link to="/symptomassessment" onClick={toggleMenu}>
+              Symptom Assessment
+            </Link>
+            <Link to="/healthtools" onClick={toggleMenu}>
+              Health Tools
+            </Link>
+            <Link to="/settings" onClick={toggleMenu}>
+              Settings
+            </Link>
+            <button
+              onClick={() => {
+                logOut();
+                toggleMenu();
+              }}
+            >
+              Log Out
+            </button>
             <TextToSpeech />
             <VoiceNavigation />
           </>
@@ -96,13 +146,27 @@ const SideMenu = ({ isOpen, toggleMenu }) => {
             <Link to="/signUp" onClick={toggleMenu}>Create Account</Link>
             <TextToSpeech />
             <VoiceNavigation /> */}
-            <Link to="/home" onClick={toggleMenu}>Home</Link>
-            <Link to="/dashboard" onClick={toggleMenu}>Menu</Link>
-            <Link to="/Meal" onClick={toggleMenu}>Meal Planning</Link>
-            <Link to="/daily-plan-edit" onClick={toggleMenu}>Edit Daily Plan</Link>
-            <Link to="/healthnews" onClick={toggleMenu}>Health News</Link>
-            <Link to="/survey" onClick={toggleMenu}>Fitness Roadmap</Link>
-            <Link to="/community" onClick={toggleMenu}>Community</Link>
+            <Link to="/home" onClick={toggleMenu}>
+              Home
+            </Link>
+            <Link to="/dashboard" onClick={toggleMenu}>
+              Menu
+            </Link>
+            <Link to="/Meal" onClick={toggleMenu}>
+              Meal Planning
+            </Link>
+            <Link to="/daily-plan-edit" onClick={toggleMenu}>
+              Edit Daily Plan
+            </Link>
+            <Link to="/healthnews" onClick={toggleMenu}>
+              Health News
+            </Link>
+            <Link to="/survey" onClick={toggleMenu}>
+              Fitness Roadmap
+            </Link>
+            <Link to="/community" onClick={toggleMenu}>
+              Community
+            </Link>
 
             {/* Recipes Dropdown */}
             <div className="dropdown">
@@ -114,11 +178,21 @@ const SideMenu = ({ isOpen, toggleMenu }) => {
               </span>
               {openDropdown === "recipes" && (
                 <div className="dropdown-content">
-                  <Link to="/CreateRecipe" onClick={toggleMenu}>Create Recipe</Link>
-                  <Link to="/SearchRecipes" onClick={toggleMenu}>Search Recipes</Link>
-                  <Link to="/RecipeRating" onClick={toggleMenu}>Recipe Rating</Link>
-                  <Link to="/UiTimer" onClick={toggleMenu}>UiTimer</Link>
-                  <Link to="/HealthFAQ" onClick={toggleMenu}>HealthFAQ</Link>
+                  <Link to="/CreateRecipe" onClick={toggleMenu}>
+                    Create Recipe
+                  </Link>
+                  <Link to="/SearchRecipes" onClick={toggleMenu}>
+                    Search Recipes
+                  </Link>
+                  <Link to="/RecipeRating" onClick={toggleMenu}>
+                    Recipe Rating
+                  </Link>
+                  <Link to="/UiTimer" onClick={toggleMenu}>
+                    UiTimer
+                  </Link>
+                  <Link to="/HealthFAQ" onClick={toggleMenu}>
+                    HealthFAQ
+                  </Link>
                 </div>
               )}
             </div>
@@ -133,19 +207,42 @@ const SideMenu = ({ isOpen, toggleMenu }) => {
               </span>
               {openDropdown === "user" && (
                 <div className="dropdown-content">
-                  <Link to="/DietaryRequirements" onClick={toggleMenu}>Dietary Preference</Link>
-                  <Link to="/userProfile" onClick={toggleMenu}>Profile</Link>
+                  <Link to="/DietaryRequirements" onClick={toggleMenu}>
+                    Dietary Preference
+                  </Link>
+                  <Link to="/userProfile" onClick={toggleMenu}>
+                    Profile
+                  </Link>
                 </div>
               )}
             </div>
 
-            <Link to="/ScanProducts" onClick={toggleMenu}>Scan Products</Link>
-            <Link to="/ScanBarcode" onClick={toggleMenu}>Scan Barcode</Link>
-            <Link to="/preferences" onClick={toggleMenu}>Allergies & Intolerances</Link>
-            <Link to="/symptomassessment" onClick={toggleMenu}>Symptom Assessment</Link>
-            <Link to="/healthtools" onClick={toggleMenu}>Health Tools</Link>
-            <Link to="/settings" onClick={toggleMenu}>Settings</Link>
-            <button onClick={() => { logOut(); toggleMenu(); }}>Log Out</button>
+            <Link to="/ScanProducts" onClick={toggleMenu}>
+              Scan Products
+            </Link>
+            <Link to="/ScanBarcode" onClick={toggleMenu}>
+              Scan Barcode
+            </Link>
+            <Link to="/preferences" onClick={toggleMenu}>
+              Allergies & Intolerances
+            </Link>
+            <Link to="/symptomassessment" onClick={toggleMenu}>
+              Symptom Assessment
+            </Link>
+            <Link to="/healthtools" onClick={toggleMenu}>
+              Health Tools
+            </Link>
+            <Link to="/settings" onClick={toggleMenu}>
+              Settings
+            </Link>
+            <button
+              onClick={() => {
+                logOut();
+                toggleMenu();
+              }}
+            >
+              Log Out
+            </button>
             <TextToSpeech />
             <VoiceNavigation />
           </>
diff --git a/src/routes/CreateRecipe/data/db/db.js b/src/routes/CreateRecipe/data/db/db.js
index 5f71fbb..734b7e8 100644
--- a/src/routes/CreateRecipe/data/db/db.js
+++ b/src/routes/CreateRecipe/data/db/db.js
@@ -24,3 +24,16 @@ export const getRecipes = async () => {
   console.log("Fetched from IDB:", all); // Add this line
   return all;
 };
+
+export const deleteRecipe = async (id) => {
+  try {
+    const db = await initDB();
+    const tx = db.transaction("recipes", "readwrite");
+    const store = tx.objectStore("recipes");
+    await store.delete(id);
+    await tx.done;
+    console.log(`Recipe with ID ${id} deleted successfully.`);
+  } catch (error) {
+    console.error("Error deleting recipe:", error);
+  }
+};
diff --git a/src/routes/RecipeRating/RecipeDetail.js b/src/routes/RecipeRating/RecipeDetail.js
index 5ca76ec..85ea210 100644
--- a/src/routes/RecipeRating/RecipeDetail.js
+++ b/src/routes/RecipeRating/RecipeDetail.js
@@ -1,26 +1,36 @@
 import { Star } from "lucide-react";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
-import { getRecipes } from "../../routes/CreateRecipe/data/db/db";
+import { getRecipes, deleteRecipe } from "../../routes/CreateRecipe/data/db/db";
 
 export default function CreamySalad() {
   const rating = 3; // out of 5
   const [recipe, setRecipe] = useState(null);
-
+  const navigate = useNavigate(); // <-- Initialize useNavigate
   const { id } = useParams(); // <-- get ID from URL
 
   useEffect(() => {
     const fetchData = async () => {
       const data = await getRecipes();
-
-      // find the recipe that matches the id from URL
       const recipe = data.find((item) => String(item.id) === String(id));
-
-      setRecipe(recipe); // now recipes holds only the matching one
+      setRecipe(recipe);
     };
 
     fetchData();
-  }, [id]); // depend on id
+  }, [id]);
+
+  // New function to handle recipe deletion
+  // In CreamySalad.jsx
+
+  // Inside the handleDelete function
+  const handleDelete = async () => {
+    try {
+      await deleteRecipe(Number(id)); // Convert the ID to a number
+      navigate("/recipe");
+    } catch (error) {
+      console.error("Failed to delete recipe:", error);
+    }
+  };
 
   if (!recipe) return <p className="p-6">Loading...</p>;
 
@@ -200,22 +210,23 @@ export default function CreamySalad() {
                 <path
                   d="M13.7285 4.50652L15.4927 6.27069M14.8627 2.95236L10.0902 7.72486C9.84286 7.97056 9.67455 8.28453 9.60685 8.62652L9.16602 10.8332L11.3727 10.3915C11.7143 10.3232 12.0277 10.1557 12.2743 9.90902L17.0468 5.13652C17.1903 4.99311 17.304 4.82285 17.3816 4.63547C17.4593 4.44809 17.4992 4.24726 17.4992 4.04444C17.4992 3.84162 17.4593 3.64079 17.3816 3.45341C17.304 3.26603 17.1903 3.09577 17.0468 2.95236C16.9034 2.80894 16.7332 2.69518 16.5458 2.61756C16.3584 2.53995 16.1576 2.5 15.9548 2.5C15.7519 2.5 15.5511 2.53995 15.3637 2.61756C15.1764 2.69518 15.0061 2.80894 14.8627 2.95236Z"
                   stroke="white"
-                  stroke-width="1.66667"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
+                  strokeWidth="1.66667"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
                 />
                 <path
-                  d="M15.833 12.4993V14.9993C15.833 15.4414 15.6574 15.8653 15.3449 16.1779C15.0323 16.4904 14.6084 16.666 14.1663 16.666H4.99967C4.55765 16.666 4.13372 16.4904 3.82116 16.1779C3.5086 15.8653 3.33301 15.4414 3.33301 14.9993V5.83268C3.33301 5.39065 3.5086 4.96673 3.82116 4.65417C4.13372 4.34161 4.55765 4.16602 4.99967 4.16602H7.49967"
+                  d="M15.833 12.4993V14.9993C15.833 15.4414 15.6574 15.8653 15.3449 16.1779C15.0323 16.4904 14.6084 16.666 14.1663 16.666H4.99967C4.55765 16.666 4.13372 16.4904 3.82116 16.1779C4.13372 16.4904 4.55765 16.666 4.99967 16.666H7.49967"
                   stroke="white"
-                  stroke-width="1.66667"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
+                  strokeWidth="1.66667"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
                 />
               </svg>
             </button>
             <button
               id="no-bg"
               className="bg-purple-600 text-white px-3 py-1 rounded-full text-sm flex items-center gap-1 font-semibold"
+              onClick={handleDelete} // <-- Update this line
             >
               Delete
               <svg