diff --git a/src/app/layout.js b/src/app/layout.js
index c5ebf23..f53d693 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -5,7 +5,7 @@ import { AuthProvider } from "./context/AuthContext";
 import ClientLayout from "./ClientLayout";
 
 export const metadata = {
-  title: "Report Management System",
+  title: "PatientPro",
   description: "Generated by create next app",
 };
 
diff --git a/src/app/not-found.js b/src/app/not-found.js
new file mode 100644
index 0000000..3f61aba
--- /dev/null
+++ b/src/app/not-found.js
@@ -0,0 +1,66 @@
+// app/not-found.js (not in a 'page.js' file)
+"use client"; // Add this since you're using client-side features
+
+import Link from "next/link";
+import Image from "next/image";
+import { useEffect } from "react";
+
+export default function NotFound() {
+  useEffect(() => {
+    // Client-side dark mode initialization
+    const darkMode = JSON.parse(localStorage.getItem('darkMode'));
+    if (darkMode) {
+      document.documentElement.classList.add('dark');
+      document.documentElement.classList.add('bg-gray-900');
+    }
+  }, []);
+
+  return (
+    <div className="relative z-1 flex min-h-screen flex-col items-center justify-center overflow-hidden p-6">
+      {/* Metadata - App Router style */}
+      <title>404 Error Page | TailAdmin</title>
+      <meta name="description" content="Page not found" />
+
+      {/* Centered Content */}
+      <div className="mx-auto w-full max-w-[242px] text-center sm:max-w-[472px]">
+        <h1 className="mb-8 text-4xl font-bold text-gray-800 dark:text-white/90">
+          ERROR
+        </h1>
+
+        {/* Optimized Images */}
+        <Image
+          src="/images/error/404.svg"
+          alt="404"
+          width={400}
+          height={300}
+          className="dark:hidden mx-auto"
+          priority
+        />
+        <Image
+          src="/images/error/404-dark.svg"
+          alt="404"
+          width={400}
+          height={300}
+          className="hidden dark:block mx-auto"
+          priority
+        />
+
+        <p className="mb-6 mt-10 text-base text-gray-700 dark:text-gray-400 sm:text-lg">
+          We can&#39;t seem to find the page you are looking for!
+        </p>
+
+        <Link
+          href="/"
+          className="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-3.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200"
+        >
+          Back to Home Page
+        </Link>
+      </div>
+
+      {/* Footer */}
+      <p className="absolute bottom-6 left-1/2 -translate-x-1/2 text-center text-sm text-gray-500 dark:text-gray-400">
+        &copy; {new Date().getFullYear()} - TailAdmin
+      </p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/not-found/page.js b/src/app/not-found/page.js
deleted file mode 100644
index dca63c9..0000000
--- a/src/app/not-found/page.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import Link from "next/link";
-import Head from "next/head";
-import Image from "next/image";
-
-export default function NotFound() {
-  return (
-    <>
-      <Head>
-        <title>404 Error Page | TailAdmin</title>
-        <meta charSet="UTF-8" />
-        <meta
-          name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
-        />
-      </Head>
-
-      <div className="relative z-1 flex min-h-screen flex-col items-center justify-center overflow-hidden p-6">
-        {/* Centered Content */}
-        <div className="mx-auto w-full max-w-[242px] text-center sm:max-w-[472px]">
-          <h1 className="mb-8 text-4xl font-bold text-gray-800 dark:text-white/90">
-            ERROR
-          </h1>
-
-          {/* Optimized Images */}
-          <Image
-            src="/images/error/404.svg"
-            alt="404"
-            width={400}
-            height={300}
-            className="dark:hidden mx-auto"
-          />
-          <Image
-            src="/images/error/404-dark.svg"
-            alt="404"
-            width={400}
-            height={300}
-            className="hidden dark:block mx-auto"
-          />
-
-          <p className="mb-6 mt-10 text-base text-gray-700 dark:text-gray-400 sm:text-lg">
-            We can&#39;t seem to find the page you are looking for!
-          </p>
-
-          <Link
-            href="/"
-            className="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-3.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200"
-          >
-            Back to Home Page
-          </Link>
-        </div>
-
-        {/* Footer */}
-        <p className="absolute bottom-6 left-1/2 -translate-x-1/2 text-center text-sm text-gray-500 dark:text-gray-400">
-          &copy; {new Date().getFullYear()} - TailAdmin
-        </p>
-      </div>
-
-      {/* Initialize dark mode with vanilla JS */}
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `
-          document.addEventListener('DOMContentLoaded', () => {
-            const darkMode = JSON.parse(localStorage.getItem('darkMode'));
-            if (darkMode) {
-              document.documentElement.classList.add('dark');
-              document.documentElement.classList.add('bg-gray-900');
-            }
-          });
-        `,
-        }}
-      />
-    </>
-  );
-}
diff --git a/src/app/pages/entries/page.js b/src/app/pages/entries/page.js
index 8d0e58c..4cbdba0 100644
--- a/src/app/pages/entries/page.js
+++ b/src/app/pages/entries/page.js
@@ -182,7 +182,7 @@ export default function EntriesTable() {
                 <th className="p-3 text-left">Name</th>
                 <th className="p-3 text-left">Booked By</th>
                 <th className="p-3 text-left">Status</th>
-                <th className="p-3 text-left">Wait Time</th>
+                {/* <th className="p-3 text-left">Wait Time</th> */}
                 <th className="p-3 text-left">Actions</th>
               </tr>
             </thead>
@@ -196,8 +196,8 @@ export default function EntriesTable() {
                   <td className="p-3">{entry.patientName}</td>
                   <td className="p-3">
                     <span className={`text-xs px-2 py-1 rounded ${entry.bookedBy === 'staff' ?
-                        'bg-purple-100 text-purple-800' :
-                        'bg-blue-100 text-blue-800'
+                      'bg-purple-100 text-purple-800' :
+                      'bg-blue-100 text-blue-800'
                       }`}>
                       {entry.bookedBy}
                     </span>
@@ -211,14 +211,14 @@ export default function EntriesTable() {
                             : "bg-red-100 text-red-800"
                         } font-semibold`}
                     >
-                      {entry.status}
+                      {entry.status === "booked" ? "In-Queue" : entry.status}
                     </span>
                   </td>
-                  <td className="p-3">
+                  {/* <td className="p-3">
                     {entry.status === "booked" ?
                       `~${calculateWaitTime(entry.tokenNumber)} mins` :
                       '-'}
-                  </td>
+                  </td> */}
                   <td className="p-3 flex gap-2">
                     {entry.status === "booked" && (
                       <>
