diff --git a/src/App.tsx b/src/App.tsx
index e346e7f..a735c6b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -53,11 +53,11 @@ function App() {
     },
     {
       path: "/",
-      element: <Navigate to="/student" replace />,
+      element: <Navigate to="/student/home" replace />,
     },
     {
       path: "*",
-      element: <Navigate to="/student" replace />,
+      element: <Navigate to="/student/home" replace />,
     },
   ]);
 
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 37a7d4b..46b3a48 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
@@ -33,8 +33,8 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 function Button({
   className,
@@ -44,9 +44,9 @@ function Button({
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
+    asChild?: boolean;
   }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
@@ -56,7 +56,7 @@ function Button({
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index 9be39fb..0f011c6 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 function Tabs({
   className,
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index f17f04c..3c757b0 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -24,7 +24,7 @@ export function formatTimeFilter(time: string) {
     case "month":
       return "Month";
     case "alltime":
-      return "All Time";
+      return "All";
     default:
       return "Today";
   }
@@ -32,14 +32,46 @@ export function formatTimeFilter(time: string) {
 
 export function getRandomColor() {
   const colors = [
-    "bg-red-700",
-    "bg-blue-700",
-    "bg-green-700",
-    "bg-yellow-700",
+    "bg-cyan-700",
+    "bg-lime-600",
+    "bg-green-500",
+    "bg-slate-700",
+    "bg-violet-600",
+    "bg-sky-500",
+    "bg-indigo-600",
+    "bg-gray-400",
+    "bg-red-500",
+    "bg-orange-500",
+    "bg-yellow-500",
+    "bg-teal-500",
+    "bg-blue-500",
+    "bg-purple-500",
+    "bg-pink-500",
+    "bg-rose-500",
+    "bg-amber-500",
+    "bg-emerald-500",
+    "bg-fuchsia-500",
+    "bg-lime-500",
+    "bg-cyan-500",
+    "bg-blue-600",
+    "bg-indigo-700",
     "bg-purple-700",
     "bg-pink-700",
-    "bg-indigo-700",
-    "bg-gray-700",
+    "bg-red-600",
+    "bg-orange-600",
+    "bg-yellow-600",
+    "bg-teal-600",
+    "bg-emerald-600",
+    "bg-rose-600",
+    "bg-amber-600",
+    "bg-fuchsia-600",
+    "bg-lime-700",
+    "bg-cyan-600",
+    "bg-blue-700",
+    "bg-indigo-800",
+    "bg-purple-800",
+    "bg-pink-800",
+    "bg-red-700",
   ];
   return colors[Math.floor(Math.random() * colors.length)];
 }
diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx
index 89d56b7..a5b07ea 100644
--- a/src/pages/auth/Login.tsx
+++ b/src/pages/auth/Login.tsx
@@ -23,7 +23,7 @@ export const Login = () => {
   // Redirect if already authenticated
   useEffect(() => {
     if (isAuthenticated) {
-      navigate("/student", { replace: true });
+      navigate("/student/home", { replace: true });
     }
   }, [isAuthenticated, navigate]);
 
@@ -49,8 +49,8 @@ export const Login = () => {
 
   return (
     <div className="min-h-screen flex items-center justify-center ">
-      <div className="bg-white p-8 rounded-lg shadow-lg w-full max-w-sm border border-gray-300">
-        <div className="flex justify-center mb-6">
+      <div className="bg-white p-8 rounded-lg shadow-lg w-full max-w-sm border border-gray-300 space-y-6">
+        <div className="flex justify-center">
           <img
             src="src/assets/ed_logo.png"
             alt="EdBridge logo"
@@ -120,7 +120,7 @@ export const Login = () => {
           <button
             onClick={handleSubmit}
             disabled={isLoading || !email || !password}
-            className="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition font-medium disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center justify-center font-satoshi"
+            className="w-full bg-linear-to-br from-purple-500 to-purple-600 text-white py-3 rounded-2xl hover:bg-purple-700 transition font-medium disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center justify-center font-satoshi hover:cursor-pointer"
           >
             {isLoading ? (
               <>
diff --git a/src/pages/student/Drills.tsx b/src/pages/student/Drills.tsx
index 2b8d477..a878b4a 100644
--- a/src/pages/student/Drills.tsx
+++ b/src/pages/student/Drills.tsx
@@ -7,7 +7,6 @@ import {
   Trophy,
   Zap,
 } from "lucide-react";
-import { useAuthStore } from "../../stores/authStore";
 import {
   Card,
   CardAction,
@@ -20,10 +19,8 @@ import {
 import { Button } from "../../components/ui/button";
 
 export const Drills = () => {
-  const user = useAuthStore((state) => state.user);
-
   return (
-    <main className="min-h-screen max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-4">
+    <main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
       <header className="flex justify-between items-center">
         <div className="w-fit bg-linear-to-br from-purple-500 to-purple-600 p-3 rounded-2xl">
           <BookOpen size={20} color="white" />
@@ -39,7 +36,7 @@ export const Drills = () => {
         flex-row"
         >
           <div className="space-y-4">
-            <CardHeader className="w-1/2">
+            <CardHeader className="w-[65%]">
               <CardTitle className="font-satoshi-bold tracking-tight text-3xl text-white">
                 See where you stand
               </CardTitle>
@@ -56,7 +53,7 @@ export const Drills = () => {
               </Button>
             </CardFooter>
           </div>
-          <div className="overflow-hidden opacity-30 -rotate-45 absolute -top-10 -right-20">
+          <div className="overflow-hidden opacity-30 -rotate-45 absolute -top-7 -right-20">
             <DraftingCompass size={300} color="white" />
           </div>
         </Card>
@@ -69,8 +66,10 @@ export const Drills = () => {
               <Target size={20} color="white" />
             </div>
             <div className="space-y-2">
-              <CardTitle>Targeted Practice</CardTitle>
-              <CardDescription>Focus on what matters</CardDescription>
+              <CardTitle className="font-satoshi">Targeted Practice</CardTitle>
+              <CardDescription className="font-satoshi">
+                Focus on what matters
+              </CardDescription>
             </div>
             <CardAction>
               <div className="w-fit bg-red-100 p-2 rounded-full">
@@ -85,8 +84,10 @@ export const Drills = () => {
               <Zap size={20} color="white" />
             </div>
             <div className="space-y-2">
-              <CardTitle>Drills</CardTitle>
-              <CardDescription>Train speed and accuracy</CardDescription>
+              <CardTitle className="font-satoshi">Drills</CardTitle>
+              <CardDescription className="font-satoshi">
+                Train speed and accuracy
+              </CardDescription>
             </div>
             <CardAction>
               <div className="w-fit bg-cyan-100 p-3 rounded-full">
@@ -101,8 +102,10 @@ export const Drills = () => {
               <Trophy size={20} color="white" />
             </div>
             <div className="space-y-2">
-              <CardTitle>Hard Test Modules</CardTitle>
-              <CardDescription>Focus on what matters</CardDescription>
+              <CardTitle className="font-satoshi">Hard Test Modules</CardTitle>
+              <CardDescription className="font-satoshi">
+                Focus on what matters
+              </CardDescription>
             </div>
             <CardAction>
               <div className="w-fit bg-lime-100 p-3 rounded-full">
diff --git a/src/pages/student/Home.tsx b/src/pages/student/Home.tsx
index 7c7cf4a..0c17df2 100644
--- a/src/pages/student/Home.tsx
+++ b/src/pages/student/Home.tsx
@@ -79,7 +79,7 @@ export const Home = () => {
 
   return (
     <div className="min-h-screen bg-gray-50">
-      <main className="flex flex-col gap-12 max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <main className="flex flex-col gap-12 max-w-full mx-auto px-8 sm:px-6 lg:px-8 py-8">
         <h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800 text-center">
           Welcome, {user?.name || "Student"}
         </h1>
@@ -87,7 +87,7 @@ export const Home = () => {
           <input
             type="text"
             placeholder="Search..."
-            className="font-satoshi w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            className="font-satoshi w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
           />
           <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
             <Search size={22} color="gray" />
@@ -99,28 +99,28 @@ export const Home = () => {
           </h1>
         </section>
         <section className="w-full">
-          <Tabs defaultValue="all" className="w-full ">
+          <Tabs defaultValue="all" className="w-full">
             <TabsList className="bg-transparent p-0 w-full">
               <TabsTrigger
                 value="all"
-                className="font-satoshi-regular tracking-wide text-md rounded-none border-b-2 data-[state=active]:font-satoshi-medium data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
+                className="font-satoshi-regular tracking-wide text-md rounded-none border-b-3 data-[state=active]:font-satoshi-medium data-[state=active]:border-b-purple-800 data-[state=active]:text-purple-800"
               >
                 All
               </TabsTrigger>
               <TabsTrigger
                 value="NOT_STARTED"
-                className="font-satoshi-regular tracking-wide text-md rounded-none border-b-2 data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
+                className="font-satoshi-regular tracking-wide text-md rounded-none border-b-3 data-[state=active]:border-b-purple-800 data-[state=active]:text-purple-800"
               >
                 Not Started
               </TabsTrigger>
               <TabsTrigger
                 value="COMPLETED"
-                className="font-satoshi-regular tracking-wide text-md rounded-none border-b-2 data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
+                className="font-satoshi-regular tracking-wide text-md rounded-none border-b-3 data-[state=active]:border-b-purple-800 data-[state=active]:text-purple-800"
               >
                 Completed
               </TabsTrigger>
             </TabsList>
-            <TabsContent value="all">
+            <TabsContent value="all" className="pt-6">
               <div className="space-y-6">
                 {practiceSheets.length > 0 ? (
                   practiceSheets.map((sheet) => (
@@ -152,7 +152,7 @@ export const Home = () => {
                       <CardFooter>
                         <Button
                           variant="outline"
-                          className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white"
+                          className="font-satoshi rounded-3xl w-full text-lg py-6 bg-linear-to-br from-purple-500 to-purple-600 text-white"
                         >
                           Start
                         </Button>
@@ -168,7 +168,7 @@ export const Home = () => {
                 )}
               </div>
             </TabsContent>
-            <TabsContent value="NOT_STARTED">
+            <TabsContent value="NOT_STARTED" className="pt-6">
               <div className="space-y-6">
                 {notStartedSheets.map((sheet) => (
                   <Card key={sheet?.id}>
@@ -197,7 +197,7 @@ export const Home = () => {
                     <CardFooter>
                       <Button
                         variant="outline"
-                        className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white"
+                        className="font-satoshi w-full text-lg py-6 bg-linear-to-br from-purple-500 to-purple-600 rounded-3xl text-white"
                       >
                         Start
                       </Button>
@@ -206,7 +206,7 @@ export const Home = () => {
                 ))}
               </div>
             </TabsContent>
-            <TabsContent value="COMPLETED">
+            <TabsContent value="COMPLETED" className="pt-6">
               {completedSheets.length > 0 ? (
                 completedSheets.map((sheet) => (
                   <Card key={sheet?.id}>
@@ -237,7 +237,7 @@ export const Home = () => {
                     <CardFooter>
                       <Button
                         variant="outline"
-                        className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white"
+                        className="font-satoshi w-full text-lg py-6 bg-linear-to-br from-purple-500 to-purple-600 rounded-3xl text-white"
                       >
                         Start
                       </Button>
@@ -260,7 +260,7 @@ export const Home = () => {
             SAT Preparation Tips
           </h1>
           <section className="space-y-4">
-            <div className="flex items-center gap-2">
+            <div className="flex gap-2">
               <CheckCircle size={24} color="#AD45FF" />
               <p className="font-satoshi text-lg">
                 Practice regularly with official SAT materials
diff --git a/src/pages/student/Lessons.tsx b/src/pages/student/Lessons.tsx
index 1ef0b18..c7e506c 100644
--- a/src/pages/student/Lessons.tsx
+++ b/src/pages/student/Lessons.tsx
@@ -17,7 +17,7 @@ export const Lessons = () => {
   // const user = useAuthStore((state) => state.user);
 
   return (
-    <main className="min-h-screen space-y-6 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+    <main className="min-h-screen space-y-6 max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8">
       <header className="space-y-2">
         <h1 className="font-satoshi-black text-2xl">Lessons</h1>
         <p className="font-satoshi-medium text-sm text-gray-500">
diff --git a/src/pages/student/Profile.tsx b/src/pages/student/Profile.tsx
index 14a448c..cfa6a7f 100644
--- a/src/pages/student/Profile.tsx
+++ b/src/pages/student/Profile.tsx
@@ -1,26 +1,72 @@
+import { ChevronRight } from "lucide-react";
 import { useAuthStore } from "../../stores/authStore";
+import { useNavigate } from "react-router-dom";
 
 export const Profile = () => {
   const user = useAuthStore((state) => state.user);
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    useAuthStore.getState().logout();
+    navigate("/login");
+  };
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="bg-white rounded-lg shadow p-6">
-          <h2 className="text-2xl font-bold text-gray-800 mb-4">Profile</h2>
-          <div className="space-y-2 text-gray-600">
-            <p>Email: {user?.email}</p>
-            <p>Role: {user?.role}</p>
-            <p>Status: {user?.status}</p>
-            <p>
-              Member since:{" "}
-              {user?.joined_at
-                ? new Date(user.joined_at).toLocaleDateString()
-                : "N/A"}
-            </p>
-          </div>
+    <main className="min-h-screen space-y-6 max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8">
+      <h1 className="text-lg font-satoshi-bold text-center">Profile</h1>
+      <section>
+        <h3 className="text-2xl font-satoshi-bold">{user?.name}</h3>
+        <p className="text-lg font-satoshi">{user?.email}</p>
+      </section>
+      <section className="space-y-4">
+        <h5 className="text-[12px] font-satoshi-bold text-gray-400">ACCOUNT</h5>
+        <div className="border rounded-4xl">
+          <button className="w-full rounded-t-4xl border-b bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
+            <span className="font-satoshi text-black">Account details</span>
+            <ChevronRight color="gray" size={20} />
+          </button>
+          <button className="w-full border-b bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
+            <span className="font-satoshi text-black">Redeem a code</span>
+            <ChevronRight color="gray" size={20} />
+          </button>
+          <button className="w-full border-b bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
+            <span className="font-satoshi text-black">Manage subscription</span>
+            <ChevronRight color="gray" size={20} />
+          </button>
+          <button className="w-full rounded-b-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
+            <span className="font-satoshi text-black">Preferences</span>
+            <ChevronRight color="gray" size={20} />
+          </button>
         </div>
-      </main>
-    </div>
+      </section>
+      <section className="space-y-4">
+        <h5 className="text-[12px] font-satoshi-bold text-gray-400">LEGAL</h5>
+        <div className="border rounded-4xl">
+          <button className="w-full border-b rounded-t-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
+            <span className="font-satoshi text-black">Terms of Use</span>
+            <ChevronRight color="gray" size={20} />
+          </button>
+          <button className="w-full border-b rounded-b-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
+            <span className="font-satoshi text-black">Privacy Policy</span>
+            <ChevronRight color="gray" size={20} />
+          </button>
+        </div>
+      </section>
+      <section className="space-y-4">
+        <h5 className="text-[12px] font-satoshi-bold text-gray-400">SUPPORT</h5>
+        <div className="border rounded-4xl">
+          <button className="w-full rounded-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
+            <span className="font-satoshi text-black">Contact Us</span>
+            <ChevronRight color="gray" size={20} />
+          </button>
+        </div>
+      </section>
+      <button
+        onClick={handleLogout}
+        className="w-full border rounded-4xl bg-purple-500 py-4 px-4 flex justify-center items-center active:bg-purple-600 font-satoshi-medium text-white"
+      >
+        Sign Out
+      </button>
+    </main>
   );
 };
diff --git a/src/pages/student/Rewards.tsx b/src/pages/student/Rewards.tsx
index 1ad9359..d2eb123 100644
--- a/src/pages/student/Rewards.tsx
+++ b/src/pages/student/Rewards.tsx
@@ -44,7 +44,7 @@ export const Rewards = () => {
   const trophies = [firstTrophy, secondTrophy, thirdTrophy];
 
   return (
-    <main className="flex flex-col gap-8 items-start min-h-screen mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <main className="flex flex-col gap-8 items-start min-h-screen mx-auto px-8 sm:px-6 lg:px-8 py-8">
       <header className="flex flex-col items-center h-fit w-full  gap-3">
         <h1 className="font-satoshi-black text-3xl">Leaderboards</h1>
         <p className="font-satoshi-medium text-md text-gray-500">
diff --git a/src/pages/student/StudentLayout.tsx b/src/pages/student/StudentLayout.tsx
index ae96261..0e1d624 100644
--- a/src/pages/student/StudentLayout.tsx
+++ b/src/pages/student/StudentLayout.tsx
@@ -1,25 +1,7 @@
-import { Outlet, NavLink, useNavigate } from "react-router-dom";
-import {
-  Home,
-  BookOpen,
-  TrendingUp,
-  Award,
-  User,
-  Menu,
-  Video,
-} from "lucide-react";
-import { useAuthStore } from "../../stores/authStore";
+import { Outlet, NavLink } from "react-router-dom";
+import { Home, BookOpen, Award, User, Video } from "lucide-react";
 
 export function StudentLayout() {
-  // const user = useAuthStore((state) => state.user);
-  const logout = useAuthStore((state) => state.logout);
-  const navigate = useNavigate();
-
-  const handleLogout = () => {
-    logout();
-    navigate("/login");
-  };
-
   const navItems = [
     { to: "/student/home", icon: Home, label: "Home" },
     { to: "/student/drills", icon: BookOpen, label: "Drills" },
@@ -30,38 +12,13 @@ export function StudentLayout() {
 
   return (
     <div className="flex flex-col min-h-screen bg-gray-50">
-      {/* Top Header */}
-      {/* <header className="bg-white shadow-sm sticky top-0 z-10">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-22">
-            <div className="flex items-center gap-3">
-              <img
-                src="../../src/assets/ed_logo.png"
-                alt="EdBridge logo"
-                className="h-10 w-auto object-contain"
-                draggable={false}
-              />
-            </div>
-            <button
-              onClick={handleLogout}
-              className="flex items-center gap-2 text-slate-600 hover:text-slate-700 transition px-3 py-2 rounded-lg hover:bg-red-50"
-            >
-              <Menu size={22} />
-              <span className="text-sm font-medium hidden sm:inline">
-                Logout
-              </span>
-            </button>
-          </div>
-        </div>
-      </header> */}
-
       {/* Main Content */}
       <main className="flex-1 pb-20 overflow-y-auto">
         <Outlet />
       </main>
 
       {/* Bottom Tab Navigation */}
-      <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg z-20">
+      <nav className="fixed rounded-t-4xl pt-2 bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-4xl z-20">
         <div className="max-w-7xl mx-auto px-2">
           <div className="flex justify-around items-center">
             {navItems.map((item) => (
@@ -69,9 +26,9 @@ export function StudentLayout() {
                 key={item.to}
                 to={item.to}
                 className={({ isActive }) =>
-                  `flex flex-col items-center justify-center py-3 px-4 flex-1 transition-all duration-200 ${
+                  `flex flex-col items-center justify-center py-3 px-4 flex-1 transition-all duration-200 font-satoshi tracking-wide ${
                     isActive
-                      ? "text-indigo-600"
+                      ? "text-purple-600"
                       : "text-gray-500 hover:text-gray-700"
                   }`
                 }