diff --git a/src/Web UI/src/routes/Exercises.jsx b/src/Web UI/src/routes/Exercises.jsx
index f7f6d9b..856bbfa 100644
--- a/src/Web UI/src/routes/Exercises.jsx	
+++ b/src/Web UI/src/routes/Exercises.jsx	
@@ -1,7 +1,45 @@
 const Exercises = () => {
+    const exercises = [
+        "Ab Roller",
+        "Bench Press (barbell)",
+        "Bench Press (dumbbell)",
+        "Deadlift (barbell)",
+        "Deadlift (dumbbell)",
+        "Jump Squat",
+        "Lat Pulldown (Cable)",
+        "Overhead press",
+        "Ab Roller",
+        "Bench Press (barbell)",
+        "Bench Press (dumbbell)",
+        "Deadlift (barbell)",
+        "Deadlift (dumbbell)",
+        "Jump Squat",
+        "Lat Pulldown (Cable)",
+        "Overhead press",
+        "Ab Roller",
+        "Bench Press (barbell)",
+        "Bench Press (dumbbell)",
+        "Deadlift (barbell)",
+        "Deadlift (dumbbell)",
+        "Jump Squat",
+        "Lat Pulldown (Cable)",
+        "Overhead press",
+    ]
+    
     return (
         <div className="mx-5">
-            <h1 className="text-5xl font-semibold">Exercises</h1>
+            <h1 className="mt-5 text-5xl font-semibold">Exercises</h1>
+            <div className="mt-5 flex flex-col gap-3">
+                {exercises.map((ex) => 
+                    <div key={ex} className="flex items-center gap-3">
+                        <div className="w-16 h-16 bg-secondary rounded-full flex items-center justify-center text-black font-semibold">{ex[0]}</div>
+                        <div className="flex flex-col">
+                            <h5 className="font-semibold text-xl">{ex}</h5>
+                            <p className="text-gray-500 text-sm">Category</p>
+                        </div>
+                    </div>
+                )}
+            </div>
         </div>
     );
 }
diff --git a/src/Web UI/src/routes/Root.jsx b/src/Web UI/src/routes/Root.jsx
index 5a8006b..fe7c417 100644
--- a/src/Web UI/src/routes/Root.jsx	
+++ b/src/Web UI/src/routes/Root.jsx	
@@ -4,7 +4,7 @@ import { Outlet } from "react-router-dom";
 const Root = () => {
     return (
         <>
-            <div className="pb-[80px] w-full min-h-screen bg-neutral flow-root sm:rounded-t-2xl sm:mx-auto sm:w-2/3 md:w-3/5 lg:w-3/6 xl:w-1/3">
+            <div className="pb-[80px] w-full min-h-screen text-slate-300 bg-neutral flow-root sm:rounded-t-2xl sm:mx-auto sm:w-2/3 md:w-3/5 lg:w-3/6 xl:w-1/3">
                 <Outlet />
             </div>
             <BottomNav />