diff --git a/app/(home)/layout.tsx b/app/(home)/layout.tsx
index c5ddd19..e842c3d 100644
--- a/app/(home)/layout.tsx
+++ b/app/(home)/layout.tsx
@@ -1,24 +1,23 @@
 "use client";
 
-import { Fragment, useEffect, useState } from "react";
+import ProfileDropdown from "@/components/ProfileDropdown";
+import { ThemeSwitcher } from "@/components/ThemeSwitcher";
+import ImaluumProvider from "@/context/ImaluumProvider";
+import { getDate } from "@/lib/common/time";
+import LOGO from "@/public/logo-landing-page.png";
 import { Dialog, Menu, Transition } from "@headlessui/react";
 import {
   Bars3Icon,
   CalendarIcon,
   Cog6ToothIcon,
+  FlagIcon,
   HomeIcon,
   XMarkIcon,
-  FlagIcon,
 } from "@heroicons/react/24/outline";
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { usePathname, useRouter } from "next/navigation";
-import Link from "next/link";
-import LOGO from "@/public/logo-landing-page.png";
 import Image from "next/image";
-import { getDate } from "@/lib/client/time";
-import { ThemeSwitcher } from "@/components/ThemeSwitcher";
-import ProfileDropdown from "@/components/ProfileDropdown";
-import ImaluumProvider from "@/context/ImaluumProvider";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { Fragment, useEffect, useState } from "react";
 
 const navigation = [
   { name: "Dashboard", href: "/dashboard", icon: HomeIcon },
@@ -114,7 +113,7 @@ export default function HomeLayout({
                     </div>
                   </Transition.Child>
                   {/* Sidebar component, swap this element with another sidebar if you like */}
-                  <div className="flex grow flex-col gap-y-5 overflow-y-auto bg-slate-100 dark:bg-zinc-900 px-6 pb-4">
+                  <div className="flex grow flex-col gap-y-5 overflow-y-auto bg-background px-6 pb-4">
                     <div className="flex h-32 shrink-0 items-center justify-center">
                       <Image
                         width={64}
@@ -134,16 +133,16 @@ export default function HomeLayout({
                                   href={item.href}
                                   className={classNames(
                                     pathname === item.href
-                                      ? "bg-gray-50 text-cyan-600"
-                                      : "text-gray-700 hover:text-cyan-600 hover:bg-gray-50 dark:hover:bg-zinc-800",
+                                      ? "bg-gray-50 text-primary"
+                                      : "text-gray-700 hover:text-primary hover:bg-gray-50 dark:hover:bg-zinc-800",
                                     "group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
                                   )}
                                 >
                                   <item.icon
                                     className={classNames(
                                       pathname === item.href
-                                        ? "text-cyan-600"
-                                        : "text-gray-400 group-hover:text-cyan-600",
+                                        ? "text-primary"
+                                        : "text-accent group-hover:text-primary",
                                       "h-6 w-6 shrink-0"
                                     )}
                                     aria-hidden="true"
@@ -154,18 +153,18 @@ export default function HomeLayout({
                             ))}
                           </ul>
                         </li>
-                        <li className="mt-auto">
+                        {/* <li className="mt-auto">
                           <Link
                             href="/doctor/profile"
-                            className="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:bg-gray-50 hover:text-cyan-600"
+                            className="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:bg-gray-50 hover:text-primary"
                           >
                             <Cog6ToothIcon
-                              className="h-6 w-6 shrink-0 text-gray-400 group-hover:text-cyan-600"
+                              className="h-6 w-6 shrink-0 text-gray-400 group-hover:text-primary"
                               aria-hidden="true"
                             />
                             Settings
                           </Link>
-                        </li>
+                        </li> */}
                       </ul>
                     </nav>
                   </div>
@@ -178,7 +177,7 @@ export default function HomeLayout({
         {/* Static sidebar for desktop */}
         <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
           {/* Sidebar component, swap this element with another sidebar if you like */}
-          <div className="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-400 dark:border-zinc-600 bg-slate-100 dark:bg-zinc-900 px-6 pb-4">
+          <div className="flex grow flex-col gap-y-5 overflow-y-auto border-r border-border bg-background px-6 pb-4">
             <div className="flex h-32 shrink-0 items-center justify-center">
               <Image
                 width={64}
@@ -198,16 +197,16 @@ export default function HomeLayout({
                           href={item.href}
                           className={classNames(
                             pathname === item.href
-                              ? "bg-gray-50 dark:bg-zinc-950 text-cyan-600"
-                              : "text-gray-700 dark:text-gray-500 hover:text-cyan-600 hover:bg-gray-50 dark:hover:bg-zinc-800",
+                              ? "bg-primary-foreground text-primary"
+                              : "text-accent hover:text-primary hover:bg-accent",
                             "group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
                           )}
                         >
                           <item.icon
                             className={classNames(
                               pathname === item.href
-                                ? "text-cyan-600"
-                                : "text-gray-400 dark:text-gray-600 group-hover:text-cyan-600",
+                                ? "text-primary"
+                                : "text-accent group-hover:text-primary",
                               "h-6 w-6 shrink-0"
                             )}
                             aria-hidden="true"
@@ -230,10 +229,10 @@ export default function HomeLayout({
 
                   {/* <Link
                     href="#"
-                    className="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 dark:text-gray-500 hover:bg-gray-50 hover:bg-zinc-800 hover:text-cyan-600"
+                    className="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 dark:text-gray-500 hover:bg-gray-50 hover:bg-zinc-800 hover:text-primary"
                   >
                     <Cog6ToothIcon
-                      className="h-6 w-6 shrink-0 text-gray-400 dark:text-gray-600 group-hover:text-cyan-600"
+                      className="h-6 w-6 shrink-0 text-gray-400 dark:text-gray-600 group-hover:text-primary"
                       aria-hidden="true"
                     />
                     Settings
@@ -245,10 +244,10 @@ export default function HomeLayout({
         </div>
 
         <div className="lg:pl-72">
-          <div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-400 dark:border-zinc-600 bg-slate-100 dark:bg-zinc-900 px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
+          <div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-border bg-background px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
             <button
               type="button"
-              className="-m-2.5 p-2.5 text-gray-700 dark:text-gray-500 lg:hidden"
+              className="-m-2.5 p-2.5 text-accent lg:hidden"
               onClick={() => setSidebarOpen(true)}
             >
               <span className="sr-only">Open sidebar</span>
@@ -263,12 +262,8 @@ export default function HomeLayout({
 
             <div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
               <div className="relative flex items-center gap-5 flex-1 text-xs md:text-sm">
-                <h1 className="text-zinc-900 dark:text-slate-100 font-bold">
-                  {getDate()}
-                </h1>
-                <h2 className="text-zinc-900 dark:text-slate-100 font-bold">
-                  {currentTime}
-                </h2>
+                <h1 className="text-foreground font-bold">{getDate()}</h1>
+                <h2 className="text-foreground font-bold">{currentTime}</h2>
               </div>
               {/* <form className="relative flex flex-1" action="#" method="GET">
                 <label htmlFor="search-field" className="sr-only">
@@ -280,7 +275,7 @@ export default function HomeLayout({
                 />
                 <input
                   id="search-field"
-                  className="bg-slate-100 dark:bg-zinc-900 block h-full w-full border-0 py-0 pl-8 pr-0 text-zinc-800 dark:text-slate-200 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
+                  className="bg-background block h-full w-full border-0 py-0 pl-8 pr-0 text-zinc-800 dark:text-slate-200 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
                   placeholder="Search..."
                   type="search"
                   name="search"
@@ -299,7 +294,7 @@ export default function HomeLayout({
             </div>
           </div>
 
-          <main className="lg:overflow-x-hidden">
+          <main className="lg:overflow-x-hidden bg-background">
             <Transition
               appear={true}
               show={true}
diff --git a/app/(home)/result/page.tsx b/app/(home)/result/page.tsx
index 1cc4cb6..ae8421d 100644
--- a/app/(home)/result/page.tsx
+++ b/app/(home)/result/page.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import ResultSwitcher from "@/components/ResultSwitcher";
 import { ChevronUpDownIcon } from "@heroicons/react/20/solid";
 import useResult from "@/hooks/useResult";
 import LottiePlayer from "@/components/LottiePlayer";
+import { ResultSwitcher } from "@/components/ResultSwitcher";
 
 type SortedSubjectType = {
   courseCode: string;
@@ -62,7 +62,7 @@ const Page = () => {
   const failedCount = subjects.length - passedCount;
 
   return (
-    <main className="flex-1 flex flex-col gap-2 min-h-screen px-2 bg-zinc-900">
+    <main className="flex-1 flex flex-col gap-2 min-h-screen px-2">
       {!result ? (
         <div className="h-[500px] w-full flex flex-col items-center justify-center">
           <LottiePlayer
@@ -80,9 +80,9 @@ const Page = () => {
             setSession={setSession}
           />
 
-          <div className="flex flex-col lg:flex-row gap-5 items-center justify-center w-full h-full rounded-xl border-2 border-slate-400/10 bg-neutral-200 p-4 dark:bg-neutral-900">
+          <div className="flex flex-col lg:flex-row gap-5 items-center justify-center w-full h-full rounded-xl border border-border p-4 bg-background">
             <div className="flex-1 flex flex-row items-center justify-center gap-5">
-              <div className="flex flex-col gap-2 items-center justify-center bg-neutral-300 p-4 font-semibold dark:bg-neutral-800 border-zinc-700 rounded-xl border">
+              <div className="flex flex-col gap-2 items-center justify-center bg-card p-4 font-semibold border-border rounded-xl border">
                 <h1 className="text-zinc-300 text-xs lg:text-sm">
                   Subjects Taken:
                 </h1>
@@ -100,13 +100,13 @@ const Page = () => {
               </div>
             </div>
             <div className="flex-1 flex flex-row items-center justify-center gap-5">
-              <div className="flex flex-col gap-2 items-center justify-center bg-neutral-300 p-4 font-semibold dark:bg-neutral-800 border-zinc-700 rounded-xl border">
+              <div className="flex flex-col gap-2 items-center justify-center p-4 font-semibold bg-card border-border rounded-xl border">
                 <h1 className="text-zinc-300 text-xs lg:text-sm">Status:</h1>
                 <p className="text-zinc-100 text-sm lg:text-xl">
                   {notes.status}
                 </p>
               </div>
-              <div className="flex flex-col gap-2 items-center justify-center bg-neutral-300 p-4 font-semibold dark:bg-neutral-800 border-zinc-700 rounded-xl border">
+              <div className="flex flex-col gap-2 items-center justify-center bg-card p-4 font-semibold border-border rounded-xl border">
                 <h1 className="text-zinc-300 text-xs lg:text-sm">Remarks:</h1>
                 <p className="text-zinc-100 text-sm lg:text-xl">
                   {notes.remarks}
@@ -115,7 +115,7 @@ const Page = () => {
             </div>
           </div>
 
-          <div className="flex flex-col items-center justify-center w-full h-full rounded-xl border-2 border-slate-400/10 bg-neutral-200 p-4 dark:bg-neutral-900">
+          <div className="flex flex-col items-center justify-center w-full h-full rounded-xl border border-border bg-background p-4">
             <div id="header" className="w-full flex flex-row mb-2 p-4">
               <div className="flex-1 w-fit flex items-center justify-start text-xs sm:text-sm">
                 <p className="zinc-100 lg:pl-24">Subject Code</p>
@@ -130,7 +130,7 @@ const Page = () => {
                 <button
                   name="sort-button"
                   type="button"
-                  className="flex items-center justify-center bg-zinc-800 p-2 rounded-md active:border-slate-400 border border-slate-400/10"
+                  className="flex items-center justify-center bg-card p-2 rounded-md active:border-slate-400 border border-border"
                   onClick={toggleSortOrder}
                 >
                   <ChevronUpDownIcon
@@ -147,7 +147,7 @@ const Page = () => {
                 <div
                   key={index}
                   id="subjects"
-                  className="w-full flex flex-row bg-neutral-300 p-4 dark:bg-neutral-800 border-zinc-700 rounded-xl border"
+                  className="w-full flex flex-row bg-card p-4 border-border rounded-xl border"
                 >
                   <div className="flex-1 w-fit flex items-center justify-start text-xs sm:text-sm">
                     <p className="zinc-100 lg:pl-24">{subject.courseCode}</p>
diff --git a/app/(home)/schedule/page.tsx b/app/(home)/schedule/page.tsx
index b41b4b9..e8c1f2e 100644
--- a/app/(home)/schedule/page.tsx
+++ b/app/(home)/schedule/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useState } from "react";
-import Timetable from "@/components/schedule";
 import ScheduleSwitcher from "@/components/ScheduleSwitcher";
+import Timetable from "@/components/schedule";
 import useSchedule from "@/hooks/useSchedule";
+import { useState } from "react";
 
 const Page = () => {
   const [subjects, setSubjects] = useState<Courses[]>();
@@ -11,14 +11,9 @@ const Page = () => {
 
   return (
     <div className="flex-1 min-h-screen">
-      {!schedule ? (
-        <div>Loading...</div>
-      ) : (
-        <div className="w-fit p-2">
-          {/* <SessionSwitcher setEvents={setEvents} /> */}
-          <ScheduleSwitcher courses={schedule} setEvents={setSubjects} />
-        </div>
-      )}
+      <div className="w-fit p-2">
+        <ScheduleSwitcher courses={schedule} setEvents={setSubjects} />
+      </div>
       <Timetable events={!subjects ? [] : subjects[0].schedule} />
     </div>
   );
diff --git a/app/globals.css b/app/globals.css
index b5c61c9..cc5ae8b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,3 +1,61 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+ 
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 142.1 76.2% 36.3%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 142.1 76.2% 36.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 142.1 70.6% 45.3%;
+    --primary-foreground: 144.9 80.4% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 142.4 71.8% 29.2%;
+  }
+}
+
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 7880fdb..b9b1072 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,10 +1,10 @@
-import "./globals.css";
-import { Poppins } from "next/font/google";
-import Script from "next/script";
-import { ThemeProvider } from "@/context/ThemeProvider";
 import { QueryProvider } from "@/context/QueryProvider";
+import { ThemeProvider } from "@/context/ThemeProvider";
 import { Metadata } from "next";
+import { Poppins } from "next/font/google";
+import Script from "next/script";
 import { Toaster } from "react-hot-toast";
+import "./globals.css";
 
 const poppins = Poppins({ subsets: ["latin"], weight: "400", display: "swap" });
 
@@ -20,7 +20,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={poppins.className}>
+      <body className={`scrollbar-hide ${poppins.className}`}>
         <Script
           src="https://beamanalytics.b-cdn.net/beam.min.js"
           data-token="09a05d6b-9ccf-4902-8ad0-e623689d586a"
diff --git a/app/page.tsx b/app/page.tsx
index 3e9b140..3615aec 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,12 +1,15 @@
 import ScrollUp from "@/components/ScrollUp";
+import ScrollProgress from "@/components/ScrollbarProgress";
 import Feature from "@/components/sections/FeatureSection";
-import Hero from "@/components/sections/HeroSection";
 import Footer from "@/components/sections/Footer";
+import Hero from "@/components/sections/HeroSection";
 import Testimonial from "@/components/sections/TestimonialSection";
+import LenisSmoothScroll from "@/context/LenisProvider";
 
 export default function Home() {
   return (
-    <>
+    <LenisSmoothScroll>
+      <ScrollProgress />
       <main className="relative isolate overflow-hidden bg-slate-100 dark:bg-zinc-900">
         <ScrollUp />
         <Hero />
@@ -14,6 +17,6 @@ export default function Home() {
         <Testimonial />
       </main>
       <Footer />
-    </>
+    </LenisSmoothScroll>
   );
 }
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..426c2e6
--- /dev/null
+++ b/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/common/cn"
+  }
+}
\ No newline at end of file
diff --git a/components/LoginForm.tsx b/components/LoginForm.tsx
index 451bc38..7a75e63 100644
--- a/components/LoginForm.tsx
+++ b/components/LoginForm.tsx
@@ -1,15 +1,25 @@
 "use client";
 
-import React from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import useProfile from "@/hooks/useProfile";
+import { ImaluumLogin } from "@/lib/server/auth";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import * as z from "zod";
 import { useMutation } from "@tanstack/react-query";
-import { ImaluumLogin } from "@/lib/server/auth";
-import { useRouter } from "next/navigation";
 import Link from "next/link";
-import useProfile from "@/hooks/useProfile";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
+import * as z from "zod";
 
 const formSchema = z.object({
   username: z.string().min(2, {
@@ -24,11 +34,7 @@ const LoginForm = () => {
   const { profile, setProfile } = useProfile();
   const router = useRouter();
 
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm({
+  const form = useForm({
     resolver: zodResolver(formSchema),
     defaultValues: {
       username: "",
@@ -52,82 +58,46 @@ const LoginForm = () => {
     });
   };
   return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      className="mt-10 flex flex-col items-center gap-y-6"
-    >
-      <div className="flex flex-col md:flex-row gap-3 w-full">
-        <div className="sm:col-span-4 flex-1">
-          <label
-            htmlFor="username"
-            className="block text-sm font-medium leading-6 dark:text-slate-100 text-zinc-900"
-          >
-            Username
-          </label>
-          <div className="mt-0">
-            <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
-              <input
-                type="text"
-                name="username"
-                className="block flex-1 border-0 bg-transparent py-1.5 pl-2 dark:text-slate-100 text-zinc-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
-                placeholder="Matric Number"
-                {...register("username")}
-              />
-            </div>
-          </div>
-          {errors.username?.message && <p>{errors.username?.message}</p>}
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2 mt-10">
+        <div className="flex flex-row items-center justify-center gap-2">
+          <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username</FormLabel>
+                <FormControl>
+                  <Input placeholder="Matric Number" type="text" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <Input placeholder="****" type="password" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
         </div>
-        <div className="sm:col-span-4 flex-1">
-          <label
-            htmlFor="username"
-            className="block text-sm font-medium leading-6 dark:text-slate-100 text-zinc-900"
-          >
-            Password
-          </label>
-          <div className="mt-0">
-            <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
-              <input
-                type="password"
-                name="pasword"
-                className="block flex-1 border-0 bg-transparent py-1.5 pl-2 dark:text-slate-100 text-zinc-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
-                placeholder="****"
-                {...register("password")}
-              />
-            </div>
-            {errors.password?.message && <p>{errors.password?.message}</p>}
-          </div>
-        </div>
-      </div>
-
-      <div className="flex flex-row gap-3 items-center justify-center md:justify-start w-full">
-        <button
+        <Button
           type="submit"
           disabled={loginMutation.isPending || loginMutation.isSuccess}
-          className={`rounded-md ${
-            loginMutation.isPending || loginMutation.isSuccess
-              ? "bg-cyan-900 cursor-not-allowed hover:bg-cyan-900 dark:hover:bg-cyan-900"
-              : "dark:bg-cyan-500 bg-cyan-600"
-          } px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-cyan-700 dark:hover:bg-cyan-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-400 dark:focus-visible:outline-cyan-300`}
         >
           {loginMutation.isPending || loginMutation.isSuccess
             ? "Loading..."
             : "Log In"}
-        </button>
-        <Link
-          href="#feature"
-          className="text-sm font-semibold leading-6 text-white"
-          onClick={(e) => {
-            e.preventDefault();
-            const element = document.querySelector("#feature");
-            if (element) {
-              element.scrollIntoView({ behavior: "smooth" });
-            }
-          }}
-        >
-          Learn more <span aria-hidden="true">→</span>
-        </Link>
-      </div>
-    </form>
+        </Button>
+      </form>
+    </Form>
   );
 };
 
diff --git a/components/ProfileDropdown.tsx b/components/ProfileDropdown.tsx
index f3cade6..8bd92e9 100644
--- a/components/ProfileDropdown.tsx
+++ b/components/ProfileDropdown.tsx
@@ -1,66 +1,55 @@
 "use client";
 
-import { Fragment } from "react";
-import { Menu, Transition } from "@headlessui/react";
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { useRouter } from "next/navigation";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import useProfile from "@/hooks/useProfile";
 import { ImaluumLogout } from "@/lib/server/auth";
 import { QueryCache } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
 import toast from "react-hot-toast";
+import { Button } from "./ui/button";
 
 const queryCache = new QueryCache();
 
-const ProfileDropdown = () => {
+export default function ProfileDropdown() {
   const { profile } = useProfile();
 
   const router = useRouter();
-
   return (
-    <Menu as="div" className="relative">
-      <Menu.Button className="-m-1.5 flex items-center p-1.5">
-        <span className="sr-only">Open user menu</span>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
         {!profile ? (
           <>
-            <div className="h-8 w-8 rounded-full bg-gray-200 dark:bg-zinc-600 animate-pulse" />
-            <div className="hidden md:block h-5 w-48 rounded-sm bg-gray-200 dark:bg-zinc-600 animate-pulse ml-4" />
-            <ChevronDownIcon
-              className="ml-2 h-5 w-5 text-gray-400"
-              aria-hidden="true"
-            />
+            <div className="h-8 w-8 rounded-full bg-secondary animate-pulse" />
+            <div className="hidden md:block h-5 w-48 rounded-sm bg-secondary animate-pulse ml-4" />
           </>
         ) : (
-          <>
-            <img
-              className="h-8 w-8 rounded-full bg-gray-50"
-              src={profile?.imageURL}
-              alt="gambarstudent"
-            />
+          <Button className="bg-tranparent hover:bg-transparent focus:outline-none space-x-2 ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0">
+            <Avatar>
+              <AvatarImage src={profile?.imageURL} alt="avatar" />
+              <AvatarFallback>GG</AvatarFallback>
+            </Avatar>
             <span className="hidden md:flex lg:items-center">
               <span
-                className="ml-4 text-sm font-semibold leading-6 text-zinc-800 dark:text-slate-200"
+                className="text-sm font-semibold leading-6 text-foreground"
                 aria-hidden="true"
               >
                 {profile?.name}
               </span>
-              <ChevronDownIcon
-                className="ml-2 h-5 w-5 text-gray-400"
-                aria-hidden="true"
-              />
             </span>
-          </>
+          </Button>
         )}
-      </Menu.Button>
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuItem className="cursor-pointer">Profile</DropdownMenuItem>
+
+        <DropdownMenuItem
+          className="cursor-pointer focus:bg-red-600/50"
           onClick={async () => {
             const res = await ImaluumLogout();
             if (res.success) {
@@ -70,13 +59,10 @@ const ProfileDropdown = () => {
               router.replace("/");
             }
           }}
-          className="absolute cursor-pointer px-3 right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md text-zinc-900 bg-white hover:bg-slate-300 py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
         >
           Log out
-        </Menu.Items>
-      </Transition>
-    </Menu>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
-};
-
-export default ProfileDropdown;
+}
diff --git a/components/ResultSwitcher.tsx b/components/ResultSwitcher.tsx
index 57ab95c..396dee0 100644
--- a/components/ResultSwitcher.tsx
+++ b/components/ResultSwitcher.tsx
@@ -1,14 +1,13 @@
-"use client";
-
-import { Fragment, useState, useEffect } from "react";
-import { Listbox, Transition } from "@headlessui/react";
-import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
-
-function classNames(...classes: any[]) {
-  return classes.filter(Boolean).join(" ");
-}
-
-export default function ResultSwitcher({
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Fragment, useEffect, useState } from "react";
+
+export function ResultSwitcher({
   setEvents,
   setSession,
   courses,
@@ -30,71 +29,23 @@ export default function ResultSwitcher({
       });
     }
   }, [courses, selected, setEvents]);
-
   return (
-    <Listbox value={selected} onChange={setSelected}>
-      {({ open }) => (
-        <>
-          <div className="relative mt-2 w-fit">
-            <Listbox.Button className="relative w-full cursor-pointer rounded-md bg-green-600 py-2 pl-3 pr-10 text-left text-slate-100 shadow-sm ring-1 ring-inset ring-green-300 focus:outline-none focus:ring-2 focus:ring-green-600 sm:text-sm sm:leading-6">
-              <span className="block truncate">{selected}</span>
-              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                <ChevronUpDownIcon
-                  className="h-5 w-5 text-slate-100"
-                  aria-hidden="true"
-                />
-              </span>
-            </Listbox.Button>
-
-            <Transition
-              show={open}
-              as={Fragment}
-              leave="transition ease-in duration-100"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-green-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                {courses?.map((course: any, index: number) => (
-                  <Listbox.Option
-                    key={index}
-                    className={({ active }) =>
-                      classNames(
-                        active ? "bg-green-600 text-white" : "text-gray-900",
-                        "relative cursor-pointer select-none py-2 pl-3 pr-9"
-                      )
-                    }
-                    value={course.sessionName}
-                  >
-                    {({ selected, active }) => (
-                      <>
-                        <span
-                          className={classNames(
-                            selected ? "font-semibold" : "font-normal",
-                            "block truncate"
-                          )}
-                        >
-                          {course.sessionName}
-                        </span>
-
-                        {selected ? (
-                          <span
-                            className={classNames(
-                              active ? "text-white" : "text-indigo-600",
-                              "absolute inset-y-0 right-0 flex items-center pr-4"
-                            )}
-                          >
-                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                          </span>
-                        ) : null}
-                      </>
-                    )}
-                  </Listbox.Option>
-                ))}
-              </Listbox.Options>
-            </Transition>
-          </div>
-        </>
-      )}
-    </Listbox>
+    <Select value={selected} onValueChange={setSelected}>
+      <SelectTrigger className="w-[180px] bg-primary ring-ring text-foreground focus:ring-0">
+        <SelectValue aria-label={selected}>{selected}</SelectValue>
+      </SelectTrigger>
+      <SelectContent className="bg-primary-foreground">
+        {courses?.map((course: any, index: number) => (
+          <SelectItem
+            key={index}
+            value={course.sessionName}
+            onClick={() => setSelected(course.sessionName)}
+            className="focus:bg-primary focus:text-white"
+          >
+            {course.sessionName}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
   );
 }
diff --git a/components/ScheduleSwitcher.tsx b/components/ScheduleSwitcher.tsx
index a8e23a8..19775fc 100644
--- a/components/ScheduleSwitcher.tsx
+++ b/components/ScheduleSwitcher.tsx
@@ -1,12 +1,11 @@
-"use client";
-
-import { Listbox, Transition } from "@headlessui/react";
-import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
-import { Fragment, useEffect, useState } from "react";
-
-function classNames(...classes: any[]) {
-  return classes.filter(Boolean).join(" ");
-}
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useEffect, useState } from "react";
 
 const predefinedColors = [
   "bg-red-200 text-red-700 border-red-500 hover:bg-red-300 hover:text-red-800",
@@ -22,51 +21,52 @@ const predefinedColors = [
   "bg-purple-200 text-purple-700 border-purple-500 hover:bg-purple-300 hover:text-purple-800",
 ];
 
-export default function ScheduleSwitcher({ setEvents, courses }) {
+const ScheduleSwitcher = ({
+  setEvents,
+  courses,
+}: { setEvents: any; courses: any }) => {
   const [selected, setSelected] = useState(courses[0]?.sessionName);
   const [coloredEvents, setColoredEvents] = useState<Subject[]>();
 
   useEffect(() => {
     const titleToColorMap = {}; // Map event titles to colors
 
-    if (courses) {
-      const mappedEvents = courses.map((course) => {
-        const eventsWithColor = course?.schedule.map((event) => {
-          let _color = titleToColorMap[event.courseCode];
-          if (!_color) {
-            // If no color assigned for this title, find an available color
-            const availableColors = predefinedColors.filter(
-              (c) => !Object.values(titleToColorMap).includes(c)
-            );
-
-            if (availableColors.length > 0) {
-              // If there are available colors, pick one randomly
-              const randomColorIndex = Math.floor(
-                Math.random() * availableColors.length
-              );
-              _color = availableColors[randomColorIndex];
-            } else {
-              // If all colors have been used, assign a random color from predefinedColors
-              const randomColorIndex = Math.floor(
-                Math.random() * predefinedColors.length
-              );
-              _color = predefinedColors[randomColorIndex];
-            }
+    const mappedEvents = courses.map((course) => {
+      const eventsWithColor = course?.schedule.map((event) => {
+        let _color = titleToColorMap[event.courseCode];
+        if (!_color) {
+          // If no color assigned for this title, find an available color
+          const availableColors = predefinedColors.filter(
+            (c) => !Object.values(titleToColorMap).includes(c)
+          );
 
-            // Store the assigned color for this title
-            titleToColorMap[event.courseCode] = _color;
+          if (availableColors.length > 0) {
+            // If there are available colors, pick one randomly
+            const randomColorIndex = Math.floor(
+              Math.random() * availableColors.length
+            );
+            _color = availableColors[randomColorIndex];
+          } else {
+            // If all colors have been used, assign a random color from predefinedColors
+            const randomColorIndex = Math.floor(
+              Math.random() * predefinedColors.length
+            );
+            _color = predefinedColors[randomColorIndex];
           }
-          return {
-            ...event,
-            color: _color,
-          };
-        });
 
-        return { ...course, schedule: eventsWithColor };
+          // Store the assigned color for this title
+          titleToColorMap[event.courseCode] = _color;
+        }
+        return {
+          ...event,
+          color: _color,
+        };
       });
 
-      setColoredEvents(mappedEvents);
-    }
+      return { ...course, schedule: eventsWithColor };
+    });
+
+    setColoredEvents(mappedEvents);
   }, [courses]);
 
   useEffect(() => {
@@ -81,69 +81,24 @@ export default function ScheduleSwitcher({ setEvents, courses }) {
   }, [coloredEvents, selected, setEvents]);
 
   return (
-    <Listbox value={selected} onChange={setSelected}>
-      {({ open }) => (
-        <>
-          <div className="relative mt-2">
-            <Listbox.Button className="relative w-full cursor-pointer rounded-md bg-green-600 py-2 pl-3 pr-10 text-left text-slate-100 shadow-sm ring-1 ring-inset ring-green-300 focus:outline-none focus:ring-2 focus:ring-green-600 sm:text-sm sm:leading-6">
-              <span className="block truncate">{selected}</span>
-              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                <ChevronUpDownIcon
-                  className="h-5 w-5 text-slate-100"
-                  aria-hidden="true"
-                />
-              </span>
-            </Listbox.Button>
-
-            <Transition
-              show={open}
-              as={Fragment}
-              leave="transition ease-in duration-100"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-green-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                {courses?.map((course, index) => (
-                  <Listbox.Option
-                    key={index}
-                    className={({ active }) =>
-                      classNames(
-                        active ? "bg-green-600 text-white" : "text-gray-900",
-                        "relative cursor-pointer select-none py-2 pl-3 pr-9"
-                      )
-                    }
-                    value={course.sessionName}
-                  >
-                    {({ selected, active }) => (
-                      <>
-                        <span
-                          className={classNames(
-                            selected ? "font-semibold" : "font-normal",
-                            "block truncate"
-                          )}
-                        >
-                          {course.sessionName}
-                        </span>
-
-                        {selected ? (
-                          <span
-                            className={classNames(
-                              active ? "text-white" : "text-indigo-600",
-                              "absolute inset-y-0 right-0 flex items-center pr-4"
-                            )}
-                          >
-                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                          </span>
-                        ) : null}
-                      </>
-                    )}
-                  </Listbox.Option>
-                ))}
-              </Listbox.Options>
-            </Transition>
-          </div>
-        </>
-      )}
-    </Listbox>
+    <Select value={selected} onValueChange={setSelected}>
+      <SelectTrigger className="w-[180px] bg-primary ring-ring text-foreground focus:ring-0">
+        <SelectValue aria-label={selected}>{selected}</SelectValue>
+      </SelectTrigger>
+      <SelectContent className="bg-primary-foreground">
+        {courses?.map((course: any, index: number) => (
+          <SelectItem
+            key={index}
+            value={course.sessionName}
+            onClick={() => setSelected(course.sessionName)}
+            className="focus:bg-primary focus:text-white"
+          >
+            {course.sessionName}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
   );
-}
+};
+
+export default ScheduleSwitcher;
diff --git a/components/ScrollbarProgress.tsx b/components/ScrollbarProgress.tsx
new file mode 100644
index 0000000..122a060
--- /dev/null
+++ b/components/ScrollbarProgress.tsx
@@ -0,0 +1,22 @@
+"use client";
+import { motion, useScroll } from "framer-motion";
+
+export default function ScrollProgress() {
+  const { scrollYProgress } = useScroll();
+
+  return (
+    <motion.div
+      style={{
+        scaleX: scrollYProgress,
+        background: "rgb(147 51 234)",
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        height: "10px",
+        transformOrigin: "0%",
+        zIndex: 9999,
+      }}
+    />
+  );
+}
diff --git a/components/dashboard/Advertisements.tsx b/components/dashboard/Advertisements.tsx
index dff8405..10b8ed2 100644
--- a/components/dashboard/Advertisements.tsx
+++ b/components/dashboard/Advertisements.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import Link from "next/link";
 import { GetAds } from "@/lib/server/ads-scraper";
+import { useQuery } from "@tanstack/react-query";
+import Link from "next/link";
 import { AiOutlineLink } from "react-icons/ai";
 import { PiTelevisionBold } from "react-icons/pi";
 import AdsCarousel from "./AdsCarousel";
-import { useQuery } from "@tanstack/react-query";
 
 const Advertisement = ({ className }: { className: string }) => {
   const { data: ads, isLoading: loading } = useQuery({
@@ -21,7 +21,7 @@ const Advertisement = ({ className }: { className: string }) => {
 
   return (
     <section className={className}>
-      <div className="my-3 flex justify-between w-full items-center">
+      <div className="my-5 flex justify-between w-full items-center">
         <h2 className="lg:text-2xl font-bold text-zinc-900 dark:text-slate-100 flex items-center gap-5">
           <PiTelevisionBold />
           SOUQ Advertisement
diff --git a/components/dashboard/CGPAChart.tsx b/components/dashboard/CGPAChart.tsx
index a5708ec..5b5f015 100644
--- a/components/dashboard/CGPAChart.tsx
+++ b/components/dashboard/CGPAChart.tsx
@@ -66,10 +66,10 @@ const CGPAChart = () => {
           <Area
             type="monotone"
             dataKey="CGPA"
-            stroke="#8884d8"
-            fill="#8884d8"
+            stroke="#a4f6ce"
+            fill="#00a36c"
           />
-          <Area type="monotone" dataKey="GPA" stroke="#8884d8" fill="#8884d8" />
+          <Area type="monotone" dataKey="GPA" stroke="#a4f6ce" fill="#00a36c" />
         </AreaChart>
       </ResponsiveContainer>
     </div>
diff --git a/components/dashboard/bento.tsx b/components/dashboard/bento.tsx
index 4fd6e52..9ab0c4d 100644
--- a/components/dashboard/bento.tsx
+++ b/components/dashboard/bento.tsx
@@ -1,10 +1,10 @@
 import CGPAChart from "@/components/dashboard/CGPAChart";
-import Card from "@/components/dashboard/card";
 import CGPAScrollList from "@/components/dashboard/CGPAScrollList";
+import Card from "@/components/dashboard/card";
 
 const BentoLayout = () => {
   return (
-    <div className="grid auto-rows-[192px] grid-cols-3 gap-2">
+    <div className="grid auto-rows-[20vh] grid-cols-3 gap-2">
       <Card>Coming Soon</Card>
       <Card>Coming Soon</Card>
       <Card>Coming Soon</Card>
diff --git a/components/dashboard/card.tsx b/components/dashboard/card.tsx
index 09e0392..6bc8f74 100644
--- a/components/dashboard/card.tsx
+++ b/components/dashboard/card.tsx
@@ -7,7 +7,7 @@ const Card = ({
 }: { className?: string; children: React.ReactNode }) => {
   return (
     <div
-      className={`row-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-200 p-4 dark:bg-neutral-900 ${className}`}
+      className={`row-span-1 rounded-xl border border-border bg-background p-4 ${className}`}
       {...props}
     >
       {children}
diff --git a/components/schedule/TimetableRow.tsx b/components/schedule/TimetableRow.tsx
index 9d81379..be1163a 100644
--- a/components/schedule/TimetableRow.tsx
+++ b/components/schedule/TimetableRow.tsx
@@ -12,36 +12,23 @@ export default function TimetableRow({
 }: TimetableRowProps) {
   return (
     <div className="relative w-full h-16">
-      <div
-        className="absolute w-full h-full
-          border-b border-slate-100 dark:border-zinc-800"
-      />
-      <div
-        className="absolute left-0 w-12 h-full
-          flex flex-col items-center justify-start
-          border-r border-slate-200 dark:border-zinc-800 bg-slate-100 dark:bg-zinc-900"
-      >
+      <div className="absolute w-full h-full border-b border-border" />
+      <div className="absolute left-0 w-12 h-full flex flex-col items-center justify-start border-r border-border bg-card">
         {showHour && (
           <p
-            className="text-slate-500 text-xs font-bold mt-1
+            className="text-foreground text-xs font-bold mt-1
           -translate-y-1/2 pb-2"
           >
             {hour > 12 ? hour - 12 : hour} {hour > 11 ? "PM" : "AM"}
           </p>
         )}
       </div>
-      <div
-        className="absolute left-8 right-0 h-full
-          flex flex-row ml-5"
-      >
+      <div className="absolute left-8 right-0 h-full flex flex-row ml-5">
         {[...Array(numberOfDays)].map((day, index) => (
           <div
             key={index}
             className={`flex-1 h-full
-              ${
-                index !== numberOfDays - 1 &&
-                "border-r border-slate-100 dark:border-zinc-800"
-              }`}
+              ${index !== numberOfDays - 1 && "border-r border-border"}`}
           />
         ))}
       </div>
diff --git a/components/schedule/TimetableWeekDays.tsx b/components/schedule/TimetableWeekDays.tsx
index 8a72df9..147e329 100644
--- a/components/schedule/TimetableWeekDays.tsx
+++ b/components/schedule/TimetableWeekDays.tsx
@@ -10,12 +10,7 @@ export default function TimetableWeekDays({
   endDay,
 }: TimetableWeekDaysProps) {
   return (
-    <div
-      className="duration-300
-        top-16 left-0 md:left-64 right-0 xl:right-96 h-8 pl-10
-        bg-slate-100
-        border-b border-slate-200 dark:border-zinc-600 dark:bg-zinc-900"
-    >
+    <div className="duration-300 top-16 left-0 md:left-64 right-0 xl:right-96 h-8 pl-10 bg-card border-b border-border">
       <div className="w-full h-full flex flex-row">
         {days.slice(startDay, endDay + 1).map((day, index) => (
           <div
@@ -23,7 +18,7 @@ export default function TimetableWeekDays({
             className="flex-1 h-full
               flex flex-col items-center justify-center"
           >
-            <p className="text-slate-500 text-xs font-bold">{day}</p>
+            <p className="text-foreground text-xs font-bold">{day}</p>
           </div>
         ))}
       </div>
diff --git a/components/schedule/index.tsx b/components/schedule/index.tsx
index 8a193b0..1785924 100644
--- a/components/schedule/index.tsx
+++ b/components/schedule/index.tsx
@@ -1,4 +1,4 @@
-import range from "@/lib/client/range";
+import range from "@/lib/common/range";
 import moment from "moment";
 import { Fragment, useState } from "react";
 import TimetableEventBlock from "./TimetableEventBlock";
diff --git a/components/sections/FeatureSection.tsx b/components/sections/FeatureSection.tsx
index 64b465a..0cca301 100644
--- a/components/sections/FeatureSection.tsx
+++ b/components/sections/FeatureSection.tsx
@@ -1,5 +1,5 @@
-import DARKDEMOPIC from "@/public/imaluum.nrmnqdds.com_schedule.png";
 import LIGHTDEMOPIC from "@/public/imaluum.nrmnqdds.com_schedule (1).png";
+import DARKDEMOPIC from "@/public/imaluum.nrmnqdds.com_schedule.png";
 import {
   ArrowPathIcon,
   CloudArrowUpIcon,
@@ -9,6 +9,7 @@ import {
   ServerIcon,
 } from "@heroicons/react/20/solid";
 import Image from "next/image";
+import { ContainerScroll } from "../ui/container-scroll-animation";
 
 const features = [
   {
@@ -53,7 +54,7 @@ const Feature = () => {
       id="feature"
       className="bg-slate-100 dark:bg-zinc-900 py-24 sm:py-32"
     >
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8 md:hidden">
         <div className="mx-auto max-w-2xl sm:text-center">
           <h2 className="text-base font-semibold leading-7 dark:text-cyan-500 text-cyan-600">
             Everything you need
@@ -68,7 +69,7 @@ const Feature = () => {
         </div>
       </div>
       <div className="relative overflow-hidden pt-16">
-        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-7xl px-6 md:hidden">
           <Image
             src={LIGHTDEMOPIC}
             alt="App screenshot"
@@ -87,8 +88,20 @@ const Feature = () => {
             <div className="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-slate-100 dark:from-zinc-900 pt-[7%]" />
           </div>
         </div>
+        <ContainerScroll
+          titleComponent={
+            <>
+              <h1 className="text-4xl font-semibold text-cyan-600">
+                Everything you need <br />
+                <span className="text-4xl md:text-[6rem] font-bold mt-1 leading-none text-foreground">
+                  i-Ma&apos;luum on steroid!
+                </span>
+              </h1>
+            </>
+          }
+        />
       </div>
-      <div className="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
+      <div className="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-0 lg:px-8">
         <dl className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base leading-7 text-gray-600 dark:text-gray-300 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
           {features.map((feature) => (
             <div key={feature.name} className="relative pl-9">
diff --git a/components/sections/HeroSection.tsx b/components/sections/HeroSection.tsx
index 97bf59b..77e21cd 100644
--- a/components/sections/HeroSection.tsx
+++ b/components/sections/HeroSection.tsx
@@ -1,6 +1,6 @@
 import { ThemeSwitcher } from "@/components/ThemeSwitcher";
-import DARKDEMOPIC from "@/public/imaluum.nrmnqdds.com_schedule.png";
 import LIGHTDEMOPIC from "@/public/imaluum.nrmnqdds.com_schedule (1).png";
+import DARKDEMOPIC from "@/public/imaluum.nrmnqdds.com_schedule.png";
 import LOGO from "@/public/logo-landing-page.png";
 import { ChevronRightIcon } from "@heroicons/react/20/solid";
 import Image from "next/image";
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
new file mode 100644
index 0000000..6098058
--- /dev/null
+++ b/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/common/cn"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
new file mode 100644
index 0000000..012f870
--- /dev/null
+++ b/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/common/cn"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/components/ui/container-scroll-animation.tsx b/components/ui/container-scroll-animation.tsx
new file mode 100644
index 0000000..1daa5c6
--- /dev/null
+++ b/components/ui/container-scroll-animation.tsx
@@ -0,0 +1,113 @@
+"use client";
+import LIGHTDEMOPIC from "@/public/imaluum.nrmnqdds.com_schedule (1).png";
+import DARKDEMOPIC from "@/public/imaluum.nrmnqdds.com_schedule.png";
+import { motion, useScroll, useTransform } from "framer-motion";
+import Image from "next/image";
+import { useEffect, useRef, useState } from "react";
+
+export const ContainerScroll = ({
+  titleComponent,
+}: {
+  titleComponent: string | React.ReactNode;
+}) => {
+  const containerRef = useRef<any>(null);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+  });
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => {
+      window.removeEventListener("resize", checkMobile);
+    };
+  }, []);
+
+  const scaleDimensions = () => {
+    return isMobile ? [0.7, 0.9] : [1.05, 1];
+  };
+
+  const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
+  const scale = useTransform(scrollYProgress, [0, 1], scaleDimensions());
+  const translate = useTransform(scrollYProgress, [0, 1], [0, -100]);
+
+  return (
+    <div
+      className="h-[120vh] md:flex items-center justify-center relative p-20 hidden"
+      ref={containerRef}
+    >
+      <div
+        className="py-40 w-full relative"
+        style={{
+          perspective: "1000px",
+        }}
+      >
+        <Header translate={translate} titleComponent={titleComponent} />
+        <Card rotate={rotate} translate={translate} scale={scale} />
+      </div>
+    </div>
+  );
+};
+
+export const Header = ({ translate, titleComponent }: any) => {
+  return (
+    <motion.div
+      style={{
+        translateY: translate,
+      }}
+      className="div max-w-5xl mx-auto text-center"
+    >
+      {titleComponent}
+    </motion.div>
+  );
+};
+
+export const Card = ({
+  rotate,
+  scale,
+  translate,
+}: {
+  rotate: any;
+  scale: any;
+  translate: any;
+}) => {
+  return (
+    <motion.div
+      style={{
+        rotateX: rotate, // rotate in X-axis
+        scale,
+        boxShadow:
+          "0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003",
+      }}
+      className="max-w-5xl -mt-12 mx-auto h-[30rem] md:h-[40rem] w-full border-4 border-[#6C6C6C] p-6 bg-[#222222] rounded-[30px] shadow-2xl"
+    >
+      <motion.div
+        className="bg-gray-100 h-full w-full rounded-2xl grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4 overflow-hidden p-4 relative"
+        // style={{ translateY: translate }}
+      >
+        <Image
+          src={LIGHTDEMOPIC}
+          alt="App screenshot"
+          className="w-full h-full dark:hidden block bg-cover col-span-1 md:col-span-3 lg:col-span-4"
+          width={0}
+          height={0}
+          sizes="100%"
+          fill
+        />
+        <Image
+          src={DARKDEMOPIC}
+          alt="App screenshot"
+          className="w-full h-full hidden dark:block bg-cover col-span-1 md:col-span-3 lg:col-span-4"
+          width={0}
+          height={0}
+          sizes="100%"
+          fill
+        />
+      </motion.div>
+    </motion.div>
+  );
+};
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..443cf3d
--- /dev/null
+++ b/components/ui/dropdown-menu.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/common/cn"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
new file mode 100644
index 0000000..b884e65
--- /dev/null
+++ b/components/ui/form.tsx
@@ -0,0 +1,176 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "@/lib/common/cn"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
new file mode 100644
index 0000000..569e85d
--- /dev/null
+++ b/components/ui/input.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { cn } from "@/lib/common/cn";
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
new file mode 100644
index 0000000..0a3b02f
--- /dev/null
+++ b/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/common/cn"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
new file mode 100644
index 0000000..3cd00d1
--- /dev/null
+++ b/components/ui/select.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/common/cn"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/context/ImaluumProvider.tsx b/context/ImaluumProvider.tsx
index 6518d5d..8cc1c6d 100644
--- a/context/ImaluumProvider.tsx
+++ b/context/ImaluumProvider.tsx
@@ -3,12 +3,12 @@
 import useProfile from "@/hooks/useProfile";
 import useResult from "@/hooks/useResult";
 import useSchedule from "@/hooks/useSchedule";
-import { useQuery } from "@tanstack/react-query";
 import { GetUserProfile } from "@/lib/server/profile-scraper";
 import { GetResult } from "@/lib/server/result-scraper";
 import { GetSchedule } from "@/lib/server/schedule-scraper";
-import Image from "next/image";
 import LOGO from "@/public/logo-landing-page.png";
+import { useQuery } from "@tanstack/react-query";
+import Image from "next/image";
 
 const ImaluumProvider = ({ children }: { children: React.ReactNode }) => {
   const { profile, setProfile } = useProfile();
@@ -56,7 +56,7 @@ const ImaluumProvider = ({ children }: { children: React.ReactNode }) => {
     scheduleData.isSuccess ? (
     <>{children}</>
   ) : (
-    <div className="w-full h-screen bg-zinc-950 flex items-center justify-center">
+    <div className="w-full h-screen bg-background flex items-center justify-center">
       <div className="flex flex-col items-center gap-y-4">
         <Image
           src={LOGO}
diff --git a/context/LenisProvider.tsx b/context/LenisProvider.tsx
new file mode 100644
index 0000000..1550767
--- /dev/null
+++ b/context/LenisProvider.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import { ReactLenis } from "@studio-freight/react-lenis";
+
+export default function LenisSmoothScroll({
+  children,
+}: { children: React.ReactNode }) {
+  return <ReactLenis root>{children}</ReactLenis>;
+}
diff --git a/lib/common/cn.ts b/lib/common/cn.ts
new file mode 100644
index 0000000..d084cca
--- /dev/null
+++ b/lib/common/cn.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/lib/client/range.ts b/lib/common/range.ts
similarity index 100%
rename from lib/client/range.ts
rename to lib/common/range.ts
diff --git a/lib/client/time.ts b/lib/common/time.ts
similarity index 100%
rename from lib/client/time.ts
rename to lib/common/time.ts
diff --git a/lib/server/auth.ts b/lib/server/auth.ts
index 200ddfe..6fbf3dc 100644
--- a/lib/server/auth.ts
+++ b/lib/server/auth.ts
@@ -54,7 +54,11 @@ export async function ImaluumLogin(form: {
     for (const cookie of cookieStore) {
       // console.log(cookie);
       if (cookie.key === "MOD_AUTH_CAS") {
-        cookies().set("MOD_AUTH_CAS", cookie.value);
+        cookies().set({
+          name: "MOD_AUTH_CAS",
+          value: cookie.value,
+          expires: new Date(Date.now() + 10 * 60 * 1000),
+        });
         break;
       }
     }
diff --git a/package.json b/package.json
index db19b46..c11f9dc 100644
--- a/package.json
+++ b/package.json
@@ -15,11 +15,20 @@
     "@dotlottie/react-player": "^1.6.9",
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
-    "@hookform/resolvers": "^3.3.2",
-    "@tailwindcss/forms": "^0.5.6",
+    "@hookform/resolvers": "^3.3.3",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@studio-freight/react-lenis": "^0.0.39",
     "@tanstack/react-query": "^5.14.6",
     "autoprefixer": "latest",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "framer-motion": "^10.17.4",
     "got": "^14.0.0",
+    "lucide-react": "^0.303.0",
     "moment": "^2.29.4",
     "next": "^14.0.4",
     "next-themes": "^0.2.1",
@@ -31,11 +40,12 @@
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.10.1",
     "recharts": "^2.10.3",
-    "rerousel": "^0.1.9",
     "sharp": "^0.32.6",
     "tabletojson": "^4.0.1",
+    "tailwind-merge": "^2.2.0",
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss": "latest",
+    "tailwindcss-animate": "^1.0.7",
     "tough-cookie": "^4.1.3",
     "zod": "^3.22.4",
     "zustand": "^4.4.7"
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0b8e6d7..5a7d9e1 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,20 +1,68 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
+import type { Config } from "tailwindcss";
+
+const config = {
   darkMode: ["class"],
   content: [
-    "./context/**/*.{js,jsx,ts,tsx}",
-    "./components/**/*.{js,jsx,ts,tsx}",
-    "./app/**/*.{js,jsx,ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./context/**/*.{ts,tsx}",
   ],
+  prefix: "",
   theme: {
-    extend: {
-      animation: {
-        "infinite-scroll": "infinite-scroll 25s linear infinite",
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
       },
-      keyframes: {
-        "infinite-scroll": {
-          from: { transform: "translateX(0)" },
-          to: { transform: "translateX(-100%)" },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        "green-haze": {
+          "50": "hsl(148, 90%, 96%)",
+          "100": "hsl(148, 84%, 90%)",
+          "200": "hsl(151, 82%, 80%)",
+          "300": "hsl(155, 76%, 67%)",
+          "400": "hsl(156, 68%, 52%)",
+          "500": "hsl(158, 90%, 39%)",
+          "600": "hsl(160, 100%, 32%)",
+          "700": "hsl(162, 100%, 24%)",
+          "800": "hsl(161, 94%, 20%)",
+          "900": "hsl(163, 90%, 16%)",
+          "950": "hsl(165, 96%, 9%)",
         },
       },
       dropShadow: {
@@ -23,7 +71,33 @@ module.exports = {
           "0 0px 30px rgba(255,255,255,0.9)",
         ],
       },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+        "infinite-scroll": {
+          from: { transform: "translateX(0)" },
+          to: { transform: "translateX(-100%)" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "infinite-scroll": "infinite-scroll 25s linear infinite",
+      },
     },
   },
-  plugins: [require("@tailwindcss/forms"), require("tailwind-scrollbar-hide")],
-};
+  plugins: [require("tailwindcss-animate"), require("tailwind-scrollbar-hide")],
+} satisfies Config;
+
+export default config;