From ecffc3ab8b4a89a1b0b5868b48eae102bd9f5e2e Mon Sep 17 00:00:00 2001
From: Atul Gunjal <gunjalatul2015@gmail.com>
Date: Thu, 24 Apr 2025 10:32:46 +0530
Subject: [PATCH] Dark mode completed

---
 src/app/components/Navbar.jsx          | 191 ++++++++++++---
 src/app/components/Sidebar.jsx         |  73 ++++--
 src/app/components/TokenTable.jsx      | 306 ++++++++++++-------------
 src/app/components/partials/header.jsx | 149 ++++++------
 src/app/context/DashboardContext.js    |   0
 src/app/context/ThemeContext.js        |   6 +-
 src/app/dashboard/page.js              |  23 +-
 src/app/pages/SingleBooking/page.js    |  62 ++---
 src/app/pages/done/page.js             |  39 +++-
 src/app/pages/missed/page.js           |  36 ++-
 10 files changed, 570 insertions(+), 315 deletions(-)
 delete mode 100644 src/app/context/DashboardContext.js

diff --git a/src/app/components/Navbar.jsx b/src/app/components/Navbar.jsx
index 01e1386..a26336f 100644
--- a/src/app/components/Navbar.jsx
+++ b/src/app/components/Navbar.jsx
@@ -6,8 +6,6 @@ import { useRouter } from "next/navigation";
 import { useTheme } from "../context/ThemeContext";
 import { account } from "../lib/appwrite";
 import { useAuth } from "../context/AuthContext";
-import { Bell } from "lucide-react";
-import { motion } from "framer-motion";
 import { MdOutlineSettings, MdSupport } from "react-icons/md";
 import { AiOutlineUser } from "react-icons/ai";
 import NotificationBell from './NotificationBell';
@@ -68,18 +66,44 @@ const Navbar = ({ sidebarOpen, setSidebarOpen, isCollapsed, setIsCollapsed }) =>
       console.error("Logout failed:", error);
     }
   };
-// ----------------notificatio logic------------------
+
+  if (darkMode === undefined) {
+    return (
+      <nav className="bg-white dark:bg-gray-900 shadow-md sticky top-0 w-full z-30 p-2 sm:p-4 flex items-center justify-between">
+        <div className="animate-pulse flex space-x-4">
+          <div className="h-10 w-10 rounded-lg bg-gray-200 dark:bg-gray-700"></div>
+          <div className="h-10 w-[300px] rounded bg-gray-200 dark:bg-gray-700 hidden md:block"></div>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="h-8 w-8 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+        </div>
+      </nav>
+    );
+  }
 
   return (
-    <nav className="bg-white dark:bg-gray-900 shadow-md sticky top-0 w-full z-30 p-2 sm:p-4 flex items-center justify-between">
+    <nav className={`
+      ${darkMode ? 'bg-gray-900 border-gray-700 shadow-gray-800/30' : 'bg-white border-gray-200 shadow-md'}
+      sticky top-0 w-full z-30 
+      p-2 sm:p-4 
+      flex items-center justify-between
+      transition-colors duration-300
+    `}>
       {/* Left Side */}
       <div className="flex items-center">
-        {/* Hamburger Menu Button - Always visible */}
+        {/* Hamburger Menu Button */}
         <button
           onClick={handleSidebarToggle}
-          className={`flex h-10 w-10 items-center justify-center rounded-lg border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 mr-2 ${
-            sidebarOpen || isCollapsed ? 'bg-gray-100 dark:bg-gray-800' : ''
-          }`}
+          className={`
+            flex h-10 w-10 items-center justify-center rounded-lg 
+            border ${darkMode ? 'border-gray-600 bg-gray-800' : 'border-gray-300 bg-white'}
+            ${sidebarOpen || isCollapsed ? (darkMode ? 'bg-gray-700' : 'bg-gray-100') : ''}
+            text-gray-500 dark:text-gray-300 
+            mr-2 
+            transition-all duration-200
+            hover:bg-gray-100 dark:hover:bg-gray-700
+            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
+          `}
           aria-label="Toggle sidebar"
         >
           {sidebarOpen || isCollapsed ? (
@@ -115,17 +139,39 @@ const Navbar = ({ sidebarOpen, setSidebarOpen, isCollapsed, setIsCollapsed }) =>
           )}
         </button>
 
-        {/* Search Box - Hidden on mobile */}
-        <div className="hidden md:flex items-center gap-[2px] border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 p-2 rounded h-[45px] w-[300px] lg:w-[400px] ml-2">
+        {/* Search Box */}
+        <div className={`
+          hidden md:flex items-center gap-[2px] 
+          border ${darkMode ? 'border-gray-600 bg-gray-800' : 'border-gray-300 bg-white'}
+          p-2 rounded-lg 
+          h-[45px] w-[300px] lg:w-[400px] ml-2 
+          transition-colors duration-300
+          focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-opacity-50
+          ${darkMode ? 'focus-within:border-gray-500' : 'focus-within:border-blue-500'}
+        `}>
           <div className="relative flex-1">
-            <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+            <FaSearch className={`
+              absolute left-3 top-1/2 transform -translate-y-1/2 
+              ${darkMode ? 'text-gray-400' : 'text-gray-500'}
+            `} />
             <input
               type="text"
               placeholder="Search or type command..."
-              className="w-full bg-transparent border-none pl-10 pr-10 py-2 focus:outline-none text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500"
+              className={`
+                w-full bg-transparent border-none 
+                pl-10 pr-10 py-2 
+                focus:outline-none 
+                ${darkMode ? 'text-gray-200 placeholder-gray-500' : 'text-gray-800 placeholder-gray-400'}
+                text-sm
+              `}
             />
           </div>
-          <div className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-300 text-xs rounded-md">
+          <div className={`
+            px-2 py-1 
+            ${darkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-500'}
+            text-xs rounded-md 
+            font-mono
+          `}>
             ⌘K
           </div>
         </div>
@@ -134,14 +180,26 @@ const Navbar = ({ sidebarOpen, setSidebarOpen, isCollapsed, setIsCollapsed }) =>
       {/* Right Side */}
       <div className="flex items-center gap-2 sm:gap-4">
         {/* Mobile Search Button */}
-        <button className="md:hidden p-2 rounded-full text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
+        <button className={`
+          md:hidden p-2 rounded-full 
+          ${darkMode ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-800'}
+          hover:bg-gray-200 dark:hover:bg-gray-700
+          transition-colors duration-200
+        `}>
           <FaSearch className="text-lg" />
         </button>
 
         {/* Dark Mode Toggle */}
         <button
           onClick={toggleDarkMode}
-          className="p-2 rounded-full border-2 border-gray-300 dark:border-gray-600 flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 transition duration-300 hover:bg-gray-100 dark:hover:bg-gray-800"
+          className={`
+            p-2 rounded-full 
+            ${darkMode ? 'bg-gray-700 hover:bg-gray-600' : 'bg-gray-100 hover:bg-gray-200'}
+            flex items-center justify-center 
+            w-8 h-8 sm:w-10 sm:h-10 
+            transition-all duration-200
+            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
+          `}
           aria-label={darkMode ? "Switch to light mode" : "Switch to dark mode"}
         >
           {darkMode ? (
@@ -174,13 +232,20 @@ const Navbar = ({ sidebarOpen, setSidebarOpen, isCollapsed, setIsCollapsed }) =>
         </button>
 
         {/* Notifications */}
-        <NotificationBell />
+        <NotificationBell darkMode={darkMode} />
 
         {/* User Profile */}
         <div className="relative" ref={dropdownRef}>
           <button
             onClick={toggleDropdown}
-            className="flex items-center gap-1 sm:gap-2 cursor-pointer hover:text-blue-500 dark:hover:text-blue-400"
+            className={`
+              flex items-center gap-1 sm:gap-2 
+              cursor-pointer 
+              hover:text-blue-500 dark:hover:text-blue-400 
+              transition-colors duration-200
+              p-1 rounded-full
+              ${dropdownOpen ? (darkMode ? 'bg-gray-700' : 'bg-gray-100') : ''}
+            `}
             aria-label="User menu"
           >
             <img
@@ -188,49 +253,113 @@ const Navbar = ({ sidebarOpen, setSidebarOpen, isCollapsed, setIsCollapsed }) =>
               alt="User profile"
               width={32}
               height={32}
-              className="rounded-full w-8 h-8 sm:w-10 sm:h-10"
+              className={`
+                rounded-full w-8 h-8 sm:w-10 sm:h-10
+                border-2 ${darkMode ? 'border-gray-600' : 'border-gray-200'}
+                transition-all duration-200
+                ${dropdownOpen ? 'ring-2 ring-blue-500' : ''}
+              `}
             />
-            <span className="hidden sm:inline text-gray-700 dark:text-gray-200">
+            <span className={`
+              hidden sm:inline 
+              ${darkMode ? 'text-gray-500' : 'text-gray-700'}
+              text-sm font-medium
+            `}>
               {currentUser?.name || "User"}
             </span>
           </button>
 
           {dropdownOpen && currentUser && (
-            <div className="absolute right-0 mt-2 w-56 sm:w-64 bg-white dark:bg-gray-800 shadow-lg rounded-lg p-2 sm:p-4 z-50 border border-gray-200 dark:border-gray-700">
+            <div className={`
+              absolute right-0 mt-2 w-56 sm:w-64 
+              ${darkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}
+              shadow-lg rounded-lg 
+              p-2 sm:p-4 
+              z-50 border 
+              transition-all duration-200
+              origin-top-right
+              animate-scaleIn
+            `}>
               {/* User Info */}
               <div className="mb-2 sm:mb-3">
-                <h3 className="font-semibold text-gray-800 dark:text-gray-200 text-sm sm:text-base">
+                <h3 className={`
+                  font-semibold 
+                  ${darkMode ? 'text-gray-800' : 'text-gray-500'}
+                  text-sm sm:text-base
+                `}>
                   {currentUser.name || "User Name"}
                 </h3>
-                <p className="text-xs sm:text-sm text-gray-500 dark:text-gray-400">
+                <p className={`
+                  text-xs sm:text-sm 
+                  ${darkMode ? 'text-gray-400' : 'text-gray-500'}
+                  truncate
+                `}>
                   {currentUser.email}
                 </p>
               </div>
 
-              <hr className="border-gray-200 dark:border-gray-700 my-1 sm:my-2" />
+              <hr className={`
+                ${darkMode ? 'border-gray-700' : 'border-gray-200'} 
+                my-1 sm:my-2
+              `} />
 
               {/* Menu Items */}
               <div className="space-y-1 sm:space-y-2">
-                <button className="flex items-center gap-2 w-full text-left p-1 sm:p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md text-sm sm:text-base text-gray-700 dark:text-gray-200">
-                  <AiOutlineUser className="text-gray-500 dark:text-gray-400" />
+                <button className={`
+                  flex items-center gap-2 w-full text-left 
+                  p-1 sm:p-2 
+                  ${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}
+                  rounded-md 
+                  text-sm sm:text-base 
+                  ${darkMode ? 'text-gray-200' : 'text-gray-700'}
+                  transition-colors duration-200
+                `}>
+                  <AiOutlineUser className={darkMode ? 'text-gray-400' : 'text-gray-500'} />
                   Edit profile
                 </button>
-                <button className="flex items-center gap-2 w-full text-left p-1 sm:p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md text-sm sm:text-base text-gray-700 dark:text-gray-200">
-                  <MdOutlineSettings className="text-gray-500 dark:text-gray-400" />
+                <button className={`
+                  flex items-center gap-2 w-full text-left 
+                  p-1 sm:p-2 
+                  ${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}
+                  rounded-md 
+                  text-sm sm:text-base 
+                  ${darkMode ? 'text-gray-200' : 'text-gray-700'}
+                  transition-colors duration-200
+                `}>
+                  <MdOutlineSettings className={darkMode ? 'text-gray-400' : 'text-gray-500'} />
                   Account settings
                 </button>
-                <button className="flex items-center gap-2 w-full text-left p-1 sm:p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md text-sm sm:text-base text-gray-700 dark:text-gray-200">
-                  <MdSupport className="text-gray-500 dark:text-gray-400" />
+                <button className={`
+                  flex items-center gap-2 w-full text-left 
+                  p-1 sm:p-2 
+                  ${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}
+                  rounded-md 
+                  text-sm sm:text-base 
+                  ${darkMode ? 'text-gray-200' : 'text-gray-700'}
+                  transition-colors duration-200
+                `}>
+                  <MdSupport className={darkMode ? 'text-gray-400' : 'text-gray-500'} />
                   Support
                 </button>
               </div>
 
-              <hr className="border-gray-200 dark:border-gray-700 my-1 sm:my-2" />
+              <hr className={`
+                ${darkMode ? 'border-gray-700' : 'border-gray-200'} 
+                my-1 sm:my-2
+              `} />
 
               {/* Sign Out */}
               <button
                 onClick={handleSignOut}
-                className="flex items-center gap-2 w-full text-left p-1 sm:p-2 text-red-500 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md text-sm sm:text-base"
+                className={`
+                  flex items-center gap-2 w-full text-left 
+                  p-1 sm:p-2 
+                  text-red-500 hover:text-red-600 dark:hover:text-red-400
+                  ${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}
+                  rounded-md 
+                  text-sm sm:text-base
+                  transition-colors duration-200
+                `}
               >
                 <FiLogOut />
                 Sign out
diff --git a/src/app/components/Sidebar.jsx b/src/app/components/Sidebar.jsx
index e0e58a0..c88f8db 100644
--- a/src/app/components/Sidebar.jsx
+++ b/src/app/components/Sidebar.jsx
@@ -1,5 +1,5 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { FileText, Moon, Sun } from "lucide-react";
@@ -29,6 +29,40 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen, isCollapsed }) => {
     localStorage.removeItem("token"); // or account.deleteSession("current") if using Appwrite
     router.push("/signup");
   };
+  // ---------------logo handling in dark mode-----------------------
+  // Create a separate LogoImage component for better error handling
+  function LogoImage({ darkSrc, lightSrc, darkMode, className, alt }) {
+    const [imgSrc, setImgSrc] = useState(darkMode ? darkSrc : lightSrc);
+    const [errored, setErrored] = useState(false);
+
+    useEffect(() => {
+      setImgSrc(darkMode ? darkSrc : lightSrc);
+      setErrored(false); // Reset error state when mode changes
+    }, [darkMode, darkSrc, lightSrc]);
+
+    const handleError = () => {
+      if (!errored) {
+        // Try falling back to opposite mode's image
+        setImgSrc(darkMode ? lightSrc : darkSrc);
+        setErrored(true);
+      } else {
+        // Ultimate fallback to placeholder
+        setImgSrc('/images/logo/placeholder.svg');
+      }
+    };
+
+    return (
+      <img
+        src={imgSrc}
+        alt={alt}
+        className={className}
+        onError={handleError}
+        loading="lazy"
+      />
+    );
+  }
+  // ----------------------------------------
+
   return (
     <aside
       className={`fixed lg:relative z-50 h-screen transition-all duration-300 ${darkMode ? 'bg-gray-800 text-gray-200' : 'bg-white text-gray-900'
@@ -39,16 +73,20 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen, isCollapsed }) => {
         {/* Logo Section */}
         <div className={`flex items-center gap-2 mb-6 ${isCollapsed ? 'justify-center' : ''}`}>
           {isCollapsed ? (
-            <img
-              src={darkMode ? "/images/logo/logo-icon-white.svg" : "/images/logo/logo-icon.svg"}
-              alt="Logo"
+            <LogoImage
+              darkSrc="/images/logo/logo-icon-white.svg"
+              lightSrc="/images/logo/logo-icon.svg"
+              darkMode={darkMode}
               className="w-8"
+              alt="Collapsed Logo"
             />
           ) : (
-            <img
-              src={darkMode ? "/images/logo/logo-white.svg" : "/images/logo/logo.svg"}
-              alt="Logo"
+            <LogoImage
+              darkSrc="/images/logo/logo-white.svg"
+              lightSrc="/images/logo/logo.svg"
+              darkMode={darkMode}
               className="h-8"
+              alt="Full Logo"
             />
           )}
         </div>
@@ -67,24 +105,27 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen, isCollapsed }) => {
           <Link
             href="/dashboard"
             className={`flex items-center gap-2 p-3 rounded-md text-sm font-semibold transition-colors ${isActive("/dashboard")
-              ? darkMode
-                ? "bg-blue-900 text-blue-200"
-                : "bg-blue-100 text-blue-800"
-              : darkMode
-                ? "hover:bg-gray-700"
-                : "hover:bg-gray-200"
+                ? darkMode
+                  ? "bg-blue-900 text-blue-200"
+                  : "bg-blue-100 text-blue-800"
+                : darkMode
+                  ? "hover:bg-gray-700 text-gray-200"
+                  : "hover:bg-gray-200"
               } ${isCollapsed ? 'justify-center' : ''}`}
             onClick={closeSidebarOnMobile}
           >
             <img
               src={darkMode ? "/images/icons/grid-white.svg" : "/images/icons/grid.svg"}
               alt="Dashboard"
-              width={18}
-              className="w-5"
+              className={`w-5 ${darkMode ? 'filter brightness-0 invert' : ''}`}
+              onError={(e) => {
+                e.target.src = darkMode ? "/images/icons/grid.svg" : "/images/icons/grid-white.svg";
+                e.target.className = 'w-5'; // Remove filter if fallback
+              }}
             />
             {!isCollapsed && "Dashboard"}
           </Link>
-          {/* -----------singleBooking-------------- */}
+          {/* -----------singleBooking/Add token-------------- */}
           <Link
             href="/pages/SingleBooking"
             className={`flex items-center gap-2 p-3 rounded-md text-sm font-semibold transition-colors ${isActive("/pages/UserProfile")
diff --git a/src/app/components/TokenTable.jsx b/src/app/components/TokenTable.jsx
index 5717e31..85d5c91 100644
--- a/src/app/components/TokenTable.jsx
+++ b/src/app/components/TokenTable.jsx
@@ -5,175 +5,171 @@ import { DATABASE_ID, COLLECTION_ID } from "../lib/api";
 import { useTheme } from "../context/ThemeContext";
 
 export default function TokenTable({ statusFilter }) {
-  const { darkMode } = useTheme();
-  const [entries, setEntries] = useState([]);
-  const [filteredEntries, setFilteredEntries] = useState([]);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [currentPage, setCurrentPage] = useState(1);
-  const entriesPerPage = 20;
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-
-  const getEntries = async () => {
-    try {
-      const today = new Date().toISOString().split('T')[0];
-      const response = await databases.listDocuments(
-        DATABASE_ID,
-        COLLECTION_ID,
-        [
-          Query.equal('date', today),
-          Query.orderAsc('tokenNumber')
-        ],
-        100
-      );
-      return response.documents;
-    } catch (error) {
-      console.error("Fetch error:", error);
-      throw error;
-    }
-  };
-
-  const updateStatus = async (entryId, newStatus) => {
-    try {
-      setLoading(true);
-      await databases.updateDocument(
-        DATABASE_ID,
-        COLLECTION_ID,
-        entryId,
-        { status: newStatus }
-      );
-      const data = await getEntries();
-      setEntries(data);
-      applyFilters(data, searchQuery);
-    } catch (error) {
-      console.error("Update error:", error);
-      setError(error.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const applyFilters = (data, search) => {
-    let filtered = data.filter((entry) => {
-      const matchesSearch = 
-        entry.patientName.toLowerCase().includes(search.toLowerCase()) ||
-        entry.tokenNumber.toString().includes(search);
-      
-      const matchesFilter = 
-        statusFilter === "all" || 
-        entry.status === statusFilter ||
-        (statusFilter === "booked" && entry.status === "booked");
-      
-      return matchesSearch && matchesFilter;
-    });
-    setFilteredEntries(filtered);
-  };
-
-  useEffect(() => {
-    const loadData = async () => {
-      try {
-        const data = await getEntries();
-        setEntries(data);
-        applyFilters(data, searchQuery);
-      } catch (err) {
-        setError(err.message);
-      } finally {
-        setLoading(false);
-      }
-    };
-    loadData();
-  }, []);
-
-  useEffect(() => {
-    applyFilters(entries, searchQuery);
-    setCurrentPage(1);
-  }, [searchQuery, statusFilter, entries]);
-
-  const indexOfLastEntry = currentPage * entriesPerPage;
-  const indexOfFirstEntry = indexOfLastEntry - entriesPerPage;
-  const currentEntries = filteredEntries.slice(indexOfFirstEntry, indexOfLastEntry);
-  const totalPages = Math.ceil(filteredEntries.length / entriesPerPage);
-
-  if (loading) return (
-    <div className="text-center mt-50">
-      <div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto`}></div>
-      <p className={`mt-4 text-lg font-semibold`}>Loading...</p>
-    </div>
-  );
-
-  if (error) return <div className="p-4 text-red-500">Error: {error}</div>;
+  // ... (keep all your existing state and functions)
 
   return (
-    <>
+    <div className={`transition-colors duration-300 ${darkMode ? 'text-gray-100' : 'text-gray-800'}`}>
       <input
         type="text"
         placeholder="Search by token or name"
-        className="mb-4 p-2 border rounded bg-white w-full max-w-sm"
+        className={`mb-4 p-2 border rounded w-full transition-colors ${
+          darkMode 
+            ? 'bg-gray-800 border-gray-700 text-white placeholder-gray-400 focus:ring-blue-500 focus:border-blue-500' 
+            : 'bg-white border-gray-300 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500'
+        }`}
         value={searchQuery}
         onChange={(e) => setSearchQuery(e.target.value)}
       />
 
       {filteredEntries.length === 0 ? (
-        <div className="p-4">No entries found.</div>
+        <div className={`p-4 rounded ${darkMode ? 'bg-gray-800' : 'bg-gray-50'}`}>
+          No entries found.
+        </div>
       ) : (
         <>
-          <table className="w-full border-collapse">
-            <thead className={darkMode ? "bg-gray-800" : "bg-gray-100"}>
-              <tr>
-                <th className="p-3 text-left">Token</th>
-                <th className="p-3 text-left">Name</th>
-                <th className="p-3 text-left">Status</th>
-                <th className="p-3 text-left">Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              {currentEntries.map((entry) => (
-                <tr
-                  key={entry.$id}
-                  className={`border ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}
-                >
-                  <td className="p-3 font-mono">{entry.tokenNumber}</td>
-                  <td className="p-3">{entry.patientName}</td>
-                  <td className="p-3">
-                    <span
-                      className={`px-2 py-1 rounded-full text-xs ${entry.status === "done"
-                        ? "bg-green-100 text-green-800"
+          {/* Mobile View (Cards) */}
+          <div className="lg:hidden space-y-3">
+            {currentEntries.map((entry) => (
+              <div
+                key={entry.$id}
+                className={`p-4 rounded-lg border ${
+                  darkMode ? 'bg-gray-900 border-gray-700' : 'bg-white border-gray-200'
+                }`}
+              >
+                <div className="flex justify-between items-start mb-2">
+                  <div>
+                    <p className="font-semibold">Token: {entry.tokenNumber}</p>
+                    <p className="text-sm">{entry.patientName}</p>
+                  </div>
+                  <span
+                    className={`px-2 py-1 rounded-full text-xs font-semibold ${
+                      entry.status === "done"
+                        ? darkMode 
+                          ? "bg-green-900 text-green-100" 
+                          : "bg-green-100 text-green-800"
                         : entry.status === "booked"
-                          ? "bg-yellow-100 text-yellow-800"
-                          : "bg-red-100 text-red-800"
-                        } font-semibold`}
+                          ? darkMode 
+                            ? "bg-yellow-900 text-yellow-100" 
+                            : "bg-yellow-100 text-yellow-800"
+                          : darkMode 
+                            ? "bg-red-900 text-red-100" 
+                            : "bg-red-100 text-red-800"
+                    }`}
+                  >
+                    {entry.status === "booked" ? "In-Queue" : entry.status}
+                  </span>
+                </div>
+                
+                {entry.status === "booked" && (
+                  <div className="flex gap-2 mt-3">
+                    <button
+                      onClick={() => updateStatus(entry.$id, "done")}
+                      className={`border rounded-full px-3 py-1 text-xs transition-colors ${
+                        darkMode
+                          ? 'border-green-400 text-green-400 hover:bg-green-900'
+                          : 'border-green-600 text-green-600 hover:bg-green-50'
+                      }`}
                     >
-                      {entry.status === "booked" ? "In-Queue" : entry.status}
-                    </span>
-                  </td>
-                  <td className="p-3 flex gap-2">
-                    {entry.status === "booked" && (
-                      <>
-                        <button
-                          onClick={() => updateStatus(entry.$id, "done")}
-                          className="border border-green-600 text-green-600 rounded-full px-2 py-1 text-xs hover:bg-green-50"
-                        >
-                          Done
-                        </button>
-                        <button
-                          onClick={() => updateStatus(entry.$id, "missed")}
-                          className="border border-red-600 text-red-600 rounded-full px-2 py-1 text-xs hover:bg-red-50"
-                        >
-                          Missed
-                        </button>
-                      </>
-                    )}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+                      Done
+                    </button>
+                    <button
+                      onClick={() => updateStatus(entry.$id, "missed")}
+                      className={`border rounded-full px-3 py-1 text-xs transition-colors ${
+                        darkMode
+                          ? 'border-red-400 text-red-400 hover:bg-red-900'
+                          : 'border-red-600 text-red-600 hover:bg-red-50'
+                      }`}
+                    >
+                      Missed
+                    </button>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
 
-          <div className={`flex justify-between items-center mt-4 ${darkMode ? 'text-white' : 'text-gray-700'}`}>
+          {/* Desktop View (Table) */}
+          <div className="hidden lg:block overflow-x-auto">
+            <table className="w-full border-collapse">
+              <thead className={darkMode ? "bg-gray-800" : "bg-gray-100"}>
+                <tr>
+                  <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Token</th>
+                  <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Name</th>
+                  <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Status</th>
+                  <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {currentEntries.map((entry) => (
+                  <tr
+                    key={entry.$id}
+                    className={`${darkMode ? 'bg-gray-900 border-gray-700 hover:bg-gray-800' : 'bg-white border-gray-200 hover:bg-gray-50'}`}
+                  >
+                    <td className="p-3 font-mono">{entry.tokenNumber}</td>
+                    <td className="p-3">{entry.patientName}</td>
+                    <td className="p-3">
+                      <span
+                        className={`px-2 py-1 rounded-full text-xs font-semibold ${
+                          entry.status === "done"
+                            ? darkMode 
+                              ? "bg-green-900 text-green-100" 
+                              : "bg-green-100 text-green-800"
+                            : entry.status === "booked"
+                              ? darkMode 
+                                ? "bg-yellow-900 text-yellow-100" 
+                                : "bg-yellow-100 text-yellow-800"
+                              : darkMode 
+                                ? "bg-red-900 text-red-100" 
+                                : "bg-red-100 text-red-800"
+                        }`}
+                      >
+                        {entry.status === "booked" ? "In-Queue" : entry.status}
+                      </span>
+                    </td>
+                    <td className="p-3 flex gap-2">
+                      {entry.status === "booked" && (
+                        <>
+                          <button
+                            onClick={() => updateStatus(entry.$id, "done")}
+                            className={`border rounded-full px-2 py-1 text-xs transition-colors ${
+                              darkMode
+                                ? 'border-green-400 text-green-400 hover:bg-green-900'
+                                : 'border-green-600 text-green-600 hover:bg-green-50'
+                            }`}
+                          >
+                            Done
+                          </button>
+                          <button
+                            onClick={() => updateStatus(entry.$id, "missed")}
+                            className={`border rounded-full px-2 py-1 text-xs transition-colors ${
+                              darkMode
+                                ? 'border-red-400 text-red-400 hover:bg-red-900'
+                                : 'border-red-600 text-red-600 hover:bg-red-50'
+                            }`}
+                          >
+                            Missed
+                          </button>
+                        </>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Pagination (Works for both views) */}
+          <div className={`flex justify-between items-center mt-4 p-2 rounded ${
+            darkMode ? 'bg-gray-800' : 'bg-gray-100'
+          }`}>
             <button
               disabled={currentPage === 1}
               onClick={() => setCurrentPage((prev) => prev - 1)}
-              className="px-3 py-1 border rounded disabled:opacity-50"
+              className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${
+                darkMode 
+                  ? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent' 
+                  : 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent'
+              }`}
             >
               Previous
             </button>
@@ -183,13 +179,17 @@ export default function TokenTable({ statusFilter }) {
             <button
               disabled={currentPage === totalPages}
               onClick={() => setCurrentPage((prev) => prev + 1)}
-              className="px-3 py-1 border rounded disabled:opacity-50"
+              className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${
+                darkMode 
+                  ? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent' 
+                  : 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent'
+              }`}
             >
               Next
             </button>
           </div>
         </>
       )}
-    </>
+    </div>
   );
 }
\ No newline at end of file
diff --git a/src/app/components/partials/header.jsx b/src/app/components/partials/header.jsx
index 8f3d65a..7cd4d4f 100644
--- a/src/app/components/partials/header.jsx
+++ b/src/app/components/partials/header.jsx
@@ -1,90 +1,105 @@
 "use client";
+import { useTheme } from "../../context/ThemeContext";
 
 export default function Header({ 
   currentToken, 
   previousToken, 
   nextToken, 
   missedTokens,
-  entries = [] // Add entries prop to calculate counts
+  entries = []
 }) {
-  // Calculate counts from entries
   const totalTokens = entries.length;
   const doneTokens = entries.filter(entry => entry.status === "done").length;
   const missedTokensCount = entries.filter(entry => entry.status === "missed").length;
   const inQueueTokens = entries.filter(entry => entry.status === "booked").length;
+  const { darkMode } = useTheme();
 
-  return (
-    <div className="flex grow flex-col items-center justify-between lg:flex-row lg:px-6 w-full">
-      <div className="hidden sm:hidden md:hidden lg:flex lg:justify-center lg:items-center lg:w-full lg:px-6 lg:py-3 xl:flex xl:justify-center xl:items-center xl:w-full xl:px-6 2xl:flex 2xl:justify-center 2xl:items-center 2xl:w-full 2xl:px-6">
-        <div className="flex flex-col gap-3">
-          <div className="grid grid-cols-4 gap-4">
-            {/* ----------Total Tokens Card---------------- */}
-            <div className="border-3 border-gray-300 rounded-[10px] px-2 py-2 flex flex-col gap-3 w-[10rem]">
-              <h2 className="font-semibold text-[14px] text-[#667085]">Total Tokens</h2>
-              <div className="flex gap-5 -mt-1">
-                <p className="text-[25px]">{totalTokens}</p>
-                <p className="text-[8px] text-[#667085] mt-[18px]">
-                  <span className="text-green-400">+{inQueueTokens}</span> in queue
-                </p>
-              </div>
-              <button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[4px] w-full rounded-[4px]">
-                View All
-              </button>
+  
+
+
+return (
+<div className={`flex grow flex-col items-center ${darkMode ? 'bg-gray-500' : 'bg-white'} justify-between lg:flex-row lg:px-6 w-full`}>    <div className="hidden lg:flex lg:justify-center lg:items-center lg:w-full lg:px-6 lg:py-3 xl:flex xl:justify-center xl:items-center xl:w-full xl:px-6 2xl:flex 2xl:justify-center 2xl:items-center 2xl:w-full 2xl:px-6">
+      <div className={`flex flex-col gap-3 p-4 rounded-lg ${darkMode ? 'bg-gray-800 text-gray-200' : 'bg-gray-50 text-gray-600'}`}>
+        <div className="grid grid-cols-4 gap-4">
+          {/* ----------Total Tokens Card---------------- */}
+          <div className={`border rounded-lg px-3 py-3 flex flex-col gap-3 w-[10rem] transition-colors ${
+            darkMode ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-200'
+          }`}>
+            <h2 className="font-semibold text-sm text-gray-500 dark:text-gray-300">Total Tokens</h2>
+            <div className="flex gap-5 items-baseline">
+              <p className="text-2xl font-medium dark:text-white">{totalTokens}</p>
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                <span className="text-green-500 dark:text-green-400">+{inQueueTokens}</span> in queue
+              </p>
             </div>
-            
-            {/* ----------Done Tokens Card---------------- */}
-            <div className="border-3 border-gray-300 rounded-[10px] px-2 py-2 flex flex-col gap-3 w-[10rem]">
-              <h2 className="font-semibold text-[14px] text-[#667085]">Done</h2>
-              <div className="flex gap-5 -mt-1">
-                <p className="text-[25px]">{doneTokens}</p>
-                <p className="text-[8px] text-[#667085] mt-[18px]">
-                  <span className="text-green-400">
-                    {totalTokens > 0 ? Math.round((doneTokens/totalTokens)*100) : 0}%
-                  </span> of total
-                </p>
-              </div>
-              <button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[4px] w-full rounded-[4px]">
-                View List
-              </button>
+            <button className={`bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 
+              text-white text-xs py-1.5 w-full rounded transition-colors`}>
+              View All
+            </button>
+          </div>
+          
+          {/* ----------Done Tokens Card---------------- */}
+          <div className={`border rounded-lg px-3 py-3 flex flex-col gap-3 w-[10rem] transition-colors ${
+            darkMode ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-200'
+          }`}>
+            <h2 className="font-semibold text-sm text-gray-500 dark:text-gray-300">Done</h2>
+            <div className="flex gap-5 items-baseline">
+              <p className="text-2xl font-medium dark:text-white">{doneTokens}</p>
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                <span className="text-green-500 dark:text-green-400">
+                  {totalTokens > 0 ? Math.round((doneTokens/totalTokens)*100) : 0}%
+                </span> of total
+              </p>
             </div>
-            
-            {/* ----------Missed Tokens Card---------------- */}
-            <div className="border-3 border-gray-300 rounded-[10px] px-2 py-2 flex flex-col gap-3 w-[10rem]">
-              <h2 className="font-semibold text-[14px] text-[#667085]">Missed Tokens</h2>
-              <div className="flex gap-5 -mt-1">
-                <p className="text-[25px]">{missedTokensCount}</p>
-                <p className="text-[8px] text-[#667085] mt-[18px]">
-                  {missedTokensCount > 0 ? (
-                    <span className="text-red-400">{missedTokens}</span>
-                  ) : (
-                    "All attended"
-                  )}
-                </p>
-              </div>
-              <button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[4px] w-full rounded-[4px]">
-                View List
-              </button>
+            <button className={`bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 
+              text-white text-xs py-1.5 w-full rounded transition-colors`}>
+              View List
+            </button>
+          </div>
+          
+          {/* ----------Missed Tokens Card---------------- */}
+          <div className={`border rounded-lg px-3 py-3 flex flex-col gap-3 w-[10rem] transition-colors ${
+            darkMode ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-200'
+          }`}>
+            <h2 className="font-semibold text-sm text-gray-500 dark:text-gray-300">Missed Tokens</h2>
+            <div className="flex gap-5 items-baseline">
+              <p className="text-2xl font-medium dark:text-white">{missedTokensCount}</p>
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                {missedTokensCount > 0 ? (
+                  <span className="text-red-500 dark:text-red-400">{missedTokens}</span>
+                ) : (
+                  "All attended"
+                )}
+              </p>
             </div>
-            
-            {/* ----------Current Token Card---------------- */}
-            <div className="border-3 border-gray-300 rounded-[10px] px-2 py-2 flex flex-col gap-3 w-[10rem]">
-              <h2 className="font-semibold text-[14px] text-[#667085]">Current Token</h2>
-              <div className="flex flex-col gap-1 -mt-1">
-                <p className="text-[25px] text-center">
-                  {currentToken || "---"}
-                </p>
-                <div className="flex justify-between text-[8px] text-[#667085]">
-                  <span>Prev: {previousToken || "---"}</span>
-                  <span>Next: {nextToken || "---"}</span>
-                </div>
+            <button className={`bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 
+              text-white text-xs py-1.5 w-full rounded transition-colors`}>
+              View List
+            </button>
+          </div>
+          
+          {/* ----------Current Token Card---------------- */}
+          <div className={`border rounded-lg px-3 py-3 flex flex-col gap-3 w-[10rem] transition-colors ${
+            darkMode ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-200'
+          }`}>
+            <h2 className="font-semibold text-sm text-gray-500 dark:text-gray-300">Current Token</h2>
+            <div className="flex flex-col gap-1">
+              <p className="text-2xl font-medium text-center dark:text-white">
+                {currentToken || "---"}
+              </p>
+              <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400">
+                <span>Prev: {previousToken || "---"}</span>
+                <span>Next: {nextToken || "---"}</span>
               </div>
-              <button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[4px] w-full rounded-[4px]">
-                Call Next
-              </button>
             </div>
+            <button className={`bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 
+              text-white text-xs py-1.5 w-full rounded transition-colors`}>
+              Call Next
+            </button>
           </div>
         </div>
       </div>
     </div>
-  );
+  </div>
+);
 }
\ No newline at end of file
diff --git a/src/app/context/DashboardContext.js b/src/app/context/DashboardContext.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/context/ThemeContext.js b/src/app/context/ThemeContext.js
index 789303a..764ecdc 100644
--- a/src/app/context/ThemeContext.js
+++ b/src/app/context/ThemeContext.js
@@ -1,11 +1,11 @@
-// src/context/ThemeContext.js
 "use client";
 import { createContext, useContext, useState, useEffect } from "react";
 
 const ThemeContext = createContext();
 
 export function ThemeProvider({ children }) {
-  const [darkMode, setDarkMode] = useState(false);
+  // Initialize with undefined to detect client-side
+  const [darkMode, setDarkMode] = useState(undefined);
 
   useEffect(() => {
     // Check for saved preference or system preference
@@ -14,6 +14,8 @@ export function ThemeProvider({ children }) {
       setDarkMode(savedMode === 'true');
     } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
       setDarkMode(true);
+    } else {
+      setDarkMode(false); // Explicitly set light mode if no preference
     }
   }, []);
 
diff --git a/src/app/dashboard/page.js b/src/app/dashboard/page.js
index 248ce64..6a80d11 100644
--- a/src/app/dashboard/page.js
+++ b/src/app/dashboard/page.js
@@ -6,9 +6,7 @@ import { useEffect } from "react";
 import { useTheme } from "../context/ThemeContext";
 import EntriesTable from "../pages/entries/EntriesTable";
 
-
 export default function DashboardPage() {
-  
   const router = useRouter();
   const { isAuthenticated, loading, userRole } = useAuth();
   const { darkMode } = useTheme();
@@ -19,12 +17,17 @@ export default function DashboardPage() {
     }
   }, [isAuthenticated, loading, router]);
 
-  if (loading) {
+  // Handle theme loading state
+  if (darkMode === undefined || loading) {
     return (
       <div className="flex items-center justify-center min-h-screen bg-white dark:bg-gray-900">
         <div className="text-center">
-          <div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500  mx-auto ${darkMode ? 'border-gray-100' : 'border-gray-900'} mx-auto`}></div>
-          <p className={`mt-4 text-lg font-semibold ${darkMode ? 'text-gray-100' : 'text-gray-900'}`}>
+          <div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
+            darkMode === true ? 'border-gray-100' : 'border-gray-900'
+          }`}></div>
+          <p className={`mt-4 text-lg font-semibold ${
+            darkMode === true ? 'text-gray-100' : 'text-gray-900'
+          }`}>
             Loading...
           </p>
         </div>
@@ -37,8 +40,12 @@ export default function DashboardPage() {
   }
 
   return (
-    <div className="min-h-screen bg-white dark:bg-gray-900 p-6">
-      <EntriesTable />
-    </div>
+    <main className={`min-h-screen transition-colors duration-300 ${
+      darkMode ? 'dark bg-gray-900' : 'bg-white'
+    }`}>
+      <div className="p-6">
+        <EntriesTable />
+      </div>
+    </main>
   );
 }
\ No newline at end of file
diff --git a/src/app/pages/SingleBooking/page.js b/src/app/pages/SingleBooking/page.js
index 072c920..2ca07e8 100644
--- a/src/app/pages/SingleBooking/page.js
+++ b/src/app/pages/SingleBooking/page.js
@@ -2,26 +2,12 @@
 
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import Head from 'next/head';
-import Preloader from '../../components/partials/preloaders';
+import { useTheme } from "../../context/ThemeContext";
 
 export default function SingleBooking() {
-  const [darkMode, setDarkMode] = useState(false);
-  const [loaded, setLoaded] = useState(false);
   const [name, setName] = useState('');
   const router = useRouter();
-
-  useEffect(() => {
-    const savedDarkMode = JSON.parse(localStorage.getItem('darkMode'));
-    if (savedDarkMode !== null) {
-      setDarkMode(savedDarkMode);
-    }
-    setLoaded(true);
-  }, []);
-
-  useEffect(() => {
-    localStorage.setItem('darkMode', JSON.stringify(darkMode));
-  }, [darkMode]);
+  const { darkMode } = useTheme();
 
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -31,31 +17,47 @@ export default function SingleBooking() {
       return;
     }
 
-    // Get current date in YYYY-MM-DD format
     const today = new Date();
     const appointmentDate = today.toISOString().split('T')[0];
-
-    // Navigate to confirmation page with name and current date as query params
     router.push(`/pages/SingleBooked?name=${encodeURIComponent(name)}&date=${encodeURIComponent(appointmentDate)}`);
   };
 
-  if (!loaded) {
-    return <Preloader />;
+  // Handle theme loading state (same as dashboard)
+  if (darkMode === undefined) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-white dark:bg-gray-900">
+        <div className="text-center">
+          <div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
+            darkMode === true ? 'border-gray-100' : 'border-gray-900'
+          }`}></div>
+          <p className={`mt-4 text-lg font-semibold ${
+            darkMode === true ? 'text-gray-100' : 'text-gray-900'
+          }`}>
+            Loading...
+          </p>
+        </div>
+      </div>
+    );
   }
 
   return (
-    <div className={`flex flex-col min-h-screen ${darkMode ? 'dark bg-gray-900' : ''}`}>
-      
-
+    <div className={`min-h-screen transition-colors duration-300 ${
+      darkMode ? 'dark bg-gray-900' : 'bg-white'
+    }`}>
       <div className="flex h-screen overflow-hidden">
         <div className="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
           <main>
             <div className="p-4 mx-auto max-w-4xl md:p-6">
-              <h2 className="text-2xl font-semibold text-gray-800 dark:text-white">Book Appointment</h2>
-              <p className='mb-6'>Date: {new Date().toLocaleDateString('en-GB')}</p>
+              <h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
+                Book Appointment
+              </h2>
+              <p className={`mb-6 dark:text-gray-300`}>
+                Date: {new Date().toLocaleDateString('en-GB')}
+              </p>
+
               <form onSubmit={handleSubmit} className="space-y-6">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
                     Full Name
                   </label>
                   <input
@@ -63,20 +65,20 @@ export default function SingleBooking() {
                     placeholder="John Doe"
                     value={name}
                     onChange={(e) => setName(e.target.value)}
-                    className="h-11 w-full rounded-lg border border-gray-300 bg-white dark:bg-gray-900 px-4 py-2.5 text-sm text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="h-11 w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2.5 text-sm text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                     required
                   />
                 </div>
 
                 <button
                   type="submit"
-                  className="w-full rounded-lg bg-blue-700 px-5 py-3.5 text-sm font-medium text-white hover:bg-blue-800 transition duration-200"
+                  className="w-full rounded-lg bg-blue-600 dark:bg-blue-700 px-5 py-3.5 text-sm font-medium text-white hover:bg-blue-700 dark:hover:bg-blue-800 transition duration-200"
                 >
                   Submit
                 </button>
               </form>
 
-              <div className="mt-6 text-center text-sm text-gray-600 dark:text-gray-300">
+              <div className="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
                 Note: Token booking is available for today&apos;s date only.
               </div>
             </div>
diff --git a/src/app/pages/done/page.js b/src/app/pages/done/page.js
index 1c1c2a7..ff82380 100644
--- a/src/app/pages/done/page.js
+++ b/src/app/pages/done/page.js
@@ -1,11 +1,40 @@
+"use client";
 import TokenTable from "../../components/TokenTable";
+import { useTheme } from "../../context/ThemeContext";
 
 export default function DoneTokensPage() {
-  return (
-    <div>
-      <h1 className="text-2xl font-bold mb-4">Done Tokens</h1>
-      <TokenTable statusFilter="done" />
-      </div>
+  const { darkMode } = useTheme();
 
+  // Handle theme loading state (consistent with dashboard)
+  if (darkMode === undefined) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-white dark:bg-gray-900">
+        <div className="text-center">
+          <div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
+            darkMode === true ? 'border-gray-100' : 'border-gray-900'
+          }`}></div>
+          <p className={`mt-4 text-lg font-semibold ${
+            darkMode === true ? 'text-gray-800' : 'text-gray-900'
+          }`}>
+            Loading...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`min-h-screen p-6 transition-colors duration-300 ${
+      darkMode ? 'dark bg-gray-900' : 'bg-white'
+    }`}>
+      <div className="max-w-7xl mx-auto">
+        <h1 className={`text-2xl font-bold mb-4 ${
+          darkMode ? 'text-gray-100' : 'text-gray-300'
+        }`}>
+          Done Tokens
+        </h1>
+        <TokenTable statusFilter="done" />
+      </div>
+    </div>
   );
 }
\ No newline at end of file
diff --git a/src/app/pages/missed/page.js b/src/app/pages/missed/page.js
index 9cd4386..af2a502 100644
--- a/src/app/pages/missed/page.js
+++ b/src/app/pages/missed/page.js
@@ -1,10 +1,40 @@
+"use client";
 import TokenTable from "../../components/TokenTable";
+import { useTheme } from "../../context/ThemeContext";
 
 export default function MissedTokensPage() {
+  const { darkMode } = useTheme();
+
+  // Handle theme loading state (consistent with dashboard)
+  if (darkMode === undefined) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-white dark:bg-gray-900">
+        <div className="text-center">
+          <div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
+            darkMode === true ? 'border-gray-100' : 'border-gray-900'
+          }`}></div>
+          <p className={`mt-4 text-lg font-semibold ${
+            darkMode === true ? 'text-gray-100' : 'text-gray-900'
+          }`}>
+            Loading...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <div>
-      <h1 className="text-2xl font-bold mb-4">Missed Tokens</h1>
-      <TokenTable statusFilter="missed" />
+    <div className={`min-h-screen p-6 transition-colors duration-300 ${
+      darkMode ? 'dark bg-gray-900' : 'bg-white'
+    }`}>
+      <div className="max-w-7xl mx-auto">
+        <h1 className={`text-2xl font-bold mb-4 ${
+          darkMode ? 'text-gray-100' : 'text-gray-800'
+        }`}>
+          Missed Tokens
+        </h1>
+        <TokenTable statusFilter="missed" />
+      </div>
     </div>
   );
 }
\ No newline at end of file