diff --git a/frontend/src/components/ui/lab-staff/Dialog.jsx b/frontend/src/components/ui/lab-staff/Dialog.jsx
index 994baf4..b1112be 100644
--- a/frontend/src/components/ui/lab-staff/Dialog.jsx
+++ b/frontend/src/components/ui/lab-staff/Dialog.jsx
@@ -1,24 +1,58 @@
-// Dialog.js
 import React, { useState } from 'react';
+import { useDarkMode } from "../../../helpers/DarkModeContext";
 
 export const Dialog = ({ children }) => <div>{children}</div>;
 
 export const DialogTrigger = ({ asChild, children }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const child = React.cloneElement(children, { onClick: () => setIsOpen(!isOpen) });
+  const child = React.cloneElement(children, {
+    onClick: () => setIsOpen(!isOpen),
+  });
   return <>{child}</>;
 };
 
-export const DialogContent = ({ children }) => (
-  <div className="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-30">
-    <div className="bg-white rounded-lg p-6 max-w-lg w-full">{children}</div>
-  </div>
-);
+export const DialogContent = ({ children }) => {
+  const { darkMode } = useDarkMode();
+  
+  return (
+    <div
+      className={`fixed inset-0 flex items-center justify-center transition-all duration-300 ${
+        darkMode ? "bg-black bg-opacity-70" : "bg-gray-800 bg-opacity-30"
+      }`}
+    >
+      <div
+        className={`rounded-lg p-6 max-w-lg w-full shadow-lg transition-all duration-300 ${
+          darkMode ? "bg-gray-800 text-white border border-gray-700" : "bg-white"
+        }`}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
 
-export const DialogHeader = ({ children }) => (
-  <div className="mb-4">{children}</div>
-);
+export const DialogHeader = ({ children }) => {
+  const { darkMode } = useDarkMode();
+  return (
+    <div
+      className={`mb-4 ${
+        darkMode ? "border-b border-gray-700" : "border-b border-gray-300"
+      }`}
+    >
+      {children}
+    </div>
+  );
+};
 
-export const DialogTitle = ({ children }) => (
-  <h2 className="text-xl font-bold">{children}</h2>
-);
+export const DialogTitle = ({ children }) => {
+  const { darkMode } = useDarkMode();
+  return (
+    <h2
+      className={`text-xl font-bold ${
+        darkMode ? "text-white" : "text-gray-800"
+      }`}
+    >
+      {children}
+    </h2>
+  );
+};
diff --git a/frontend/src/components/ui/lab-staff/common/Sidebar.jsx b/frontend/src/components/ui/lab-staff/common/Sidebar.jsx
index 998fdaa..eb16f64 100644
--- a/frontend/src/components/ui/lab-staff/common/Sidebar.jsx
+++ b/frontend/src/components/ui/lab-staff/common/Sidebar.jsx
@@ -1,62 +1,63 @@
 import { Link, useLocation } from "react-router-dom";
-import { Home, User, CalendarDays, FileText, PieChart, Settings, Clipboard, TestTube } from "lucide-react"; // Icon importlarını unutmayın
-import { useParams } from "react-router-dom";
+import { Home, User, CalendarDays, FileText, PieChart, Settings, TestTube } from "lucide-react";
 import { useSelector } from "react-redux";
+import { useDarkMode } from "../../../../helpers/DarkModeContext";
 import { useEffect, useState } from "react";
 
 export default function Sidebar() {
-    const location = useLocation(); 
-
-    const isActive = (path) => location.pathname === path;
+    const location = useLocation();
+    const { darkMode } = useDarkMode();
     const { userId } = useSelector((state) => state.auth);
 
-    const [currentPath, setCurrentPath] = useState(location.pathname); // Sayfa değişim kontrolü
-
     const links = [
         {
-          to: `/labtechnician/${userId}/tests`,
-          label: "Tests",
-          icon: TestTube,
+            to: `/labtechnician/${userId}/tests`,
+            label: "Tests",
+            icon: TestTube,
         },
         {
-          to: `/labtechnician/${userId}/settings`,
-          label: "Settings",
-          icon: Settings,
+            to: `/labtechnician/${userId}/settings`,
+            label: "Settings",
+            icon: Settings,
         },
-      ];
+    ];
 
-          // Eğer pathname değişirse "soft refresh" yap
-    useEffect(() => {
-      if (location.pathname !== currentPath) {
-          setCurrentPath(location.pathname); // Path güncelleniyor
-          window.location.reload(); // Sayfa yenileniyor
-      }
-  }, [location.pathname]);
-  
     return (
-        <aside className="w-64 bg-white shadow-md hidden md:block">
-      <div className="p-4">
-        <h2 className="text-2xl font-bold text-gray-800">Hospital System</h2>
-      </div>
-      <nav className="mt-6">
-        {links.map((link, index) => {
-          const Icon = link.icon; 
-          return (
-            <Link
-              key={index}
-              to={link.to}
-              className={`flex items-center px-4 py-2 mt-2 ${
-                isActive(link.to)
-                  ? "text-gray-800 bg-gray-200 font-bold"
-                  : "text-gray-600 hover:bg-gray-100"
-              }`}
-            >
-              <Icon className="w-5 h-5 mr-2" />
-              {link.label}
-            </Link>
-          );
-        })}
-      </nav>
-    </aside>
+        <aside
+            className={`w-64 shadow-md hidden md:block transition-all duration-300 ${
+                darkMode ? "bg-gray-900 text-white border-r border-gray-700" : "bg-white text-gray-800 border-r border-gray-200"
+            }`}
+        >
+            <div className="p-4">
+                <h2 className={`text-2xl font-bold ${darkMode ? "text-white" : "text-gray-800"}`}>
+                    Hospital System
+                </h2>
+            </div>
+            <nav className="mt-6">
+                {links.map((link, index) => {
+                    const Icon = link.icon;
+                    const isActive = location.pathname === link.to;
+
+                    return (
+                        <Link
+                            key={index}
+                            to={link.to}
+                            className={`flex items-center px-4 py-2 mt-2 rounded-md transition-all duration-300 ${
+                                isActive
+                                    ? darkMode
+                                        ? "bg-gray-800 text-white font-bold"
+                                        : "bg-gray-200 text-gray-800 font-bold"
+                                    : darkMode
+                                    ? "text-gray-400 hover:bg-gray-800 hover:text-white"
+                                    : "text-gray-600 hover:bg-gray-100"
+                            }`}
+                        >
+                            <Icon className="w-5 h-5 mr-2" />
+                            {link.label}
+                        </Link>
+                    );
+                })}
+            </nav>
+        </aside>
     );
 }
diff --git a/frontend/src/components/ui/lab-staff/tests/Button.jsx b/frontend/src/components/ui/lab-staff/tests/Button.jsx
index 1f44f04..ecc76b0 100644
--- a/frontend/src/components/ui/lab-staff/tests/Button.jsx
+++ b/frontend/src/components/ui/lab-staff/tests/Button.jsx
@@ -1,13 +1,14 @@
-// Button.js
 import React from 'react';
+import { useDarkMode } from "../../../../helpers/DarkModeContext";
 
 export const Button = ({ children, onClick, variant = 'default', size = 'md' }) => {
-  const baseStyle = 'inline-flex items-center justify-center rounded-md';
+  const { darkMode } = useDarkMode();
+  const baseStyle = 'inline-flex items-center justify-center rounded-md transition-all duration-300';
   const sizeStyle = size === 'sm' ? 'px-2 py-1 text-sm' : 'px-4 py-2';
   const variantStyle =
     variant === 'outline'
-      ? 'border border-gray-300 text-gray-700 hover:bg-gray-100'
-      : 'bg-gray-600 text-white hover:bg-gray-700';
+      ? `${darkMode ? 'border border-gray-500 text-gray-300 hover:bg-gray-700' : 'border border-gray-300 text-gray-700 hover:bg-gray-100'}`
+      : `${darkMode ? 'bg-blue-700 text-white hover:bg-blue-800' : 'bg-blue-600 text-white hover:bg-blue-700'}`;
 
   return (
     <button className={`${baseStyle} ${sizeStyle} ${variantStyle}`} onClick={onClick}>
diff --git a/frontend/src/components/ui/lab-staff/tests/Card.jsx b/frontend/src/components/ui/lab-staff/tests/Card.jsx
index e1e6cae..cbdfb04 100644
--- a/frontend/src/components/ui/lab-staff/tests/Card.jsx
+++ b/frontend/src/components/ui/lab-staff/tests/Card.jsx
@@ -1,43 +1,64 @@
-import React from "react";
+import { useDarkMode } from "../../../../helpers/DarkModeContext";
 
-export function Card({ children, className }) {
+export function Card({ children, className = "" }) {
+  const { darkMode } = useDarkMode();
   return (
-    <div className={`bg-white shadow rounded-lg p-4 ${className || ""}`}>
+    <div
+      className={`rounded-lg p-6 shadow-lg transition-all duration-300 ${
+        darkMode
+          ? "bg-gray-800 text-white border border-gray-700"
+          : "bg-white text-gray-900 border border-gray-200"
+      } ${className}`}
+    >
       {children}
     </div>
   );
 }
 
-export function CardHeader({ children, className }) {
+export function CardHeader({ children, className = "" }) {
+  const { darkMode } = useDarkMode();
   return (
-    <div className={`border-b pb-2 ${className || ""}`}>
+    <div
+      className={`pb-4 mb-4 border-b transition-all duration-300 ${
+        darkMode ? "bg-gray-800 border-gray-700" : "border-gray-200"
+      } ${className}`}
+    >
       {children}
     </div>
   );
 }
 
-export function CardTitle({ children, className }) {
-  return (
-    <h2 className={`text-xl font-bold ${className || ""}`}>{children}</h2>
-  );
+export function CardContent({ children, className = "" }) {
+  return <div className={className}>{children}</div>;
 }
 
-export function CardDescription({ children, className }) {
+export function CardFooter({ children, className = "" }) {
+  const { darkMode } = useDarkMode();
   return (
-    <p className={`text-gray-600 ${className || ""}`}>{children}</p>
+    <div
+      className={`pt-4 mt-4 border-t transition-all duration-300 ${
+        darkMode ? "bg-gray-800 border-gray-700" : "border-gray-200"
+      } ${className}`}
+    >
+      {children}
+    </div>
   );
 }
 
-export function CardContent({ children, className }) {
+export function CardTitle({ children, className = "" }) {
+  const { darkMode } = useDarkMode();
   return (
-    <div className={`mt-4 ${className || ""}`}>{children}</div>
+    <h2 className={`text-2xl font-bold transition-all duration-300 ${
+      darkMode ? "bg-gray-800 text-white" : "text-gray-900"
+    } ${className}`}>{children}</h2>
   );
 }
 
-export function CardFooter({ children, className }) {
+export function CardDescription({ children, className = "" }) {
+  const { darkMode } = useDarkMode();
   return (
-    <div className={`border-t pt-2 mt-4 ${className || ""}`}>
-      {children}
-    </div>
+    <p className={`transition-all duration-300 ${
+      darkMode ? "bg-gray-800 text-gray-400" : "text-gray-600"
+    } ${className}`}>{children}</p>
   );
 }
diff --git a/frontend/src/components/ui/lab-staff/tests/Dialog.jsx b/frontend/src/components/ui/lab-staff/tests/Dialog.jsx
index 189df04..3c7288c 100644
--- a/frontend/src/components/ui/lab-staff/tests/Dialog.jsx
+++ b/frontend/src/components/ui/lab-staff/tests/Dialog.jsx
@@ -1,60 +1,58 @@
 import React, { useState } from 'react';
+import { useDarkMode } from "../../../../helpers/DarkModeContext";
 
-export const Dialog = ({ children }) => {
-  const [isOpen, setIsOpen] = useState(false);
+export const Dialog = ({ children }) => <div>{children}</div>;
 
-  const openDialog = () => setIsOpen(true);
-  const closeDialog = () => setIsOpen(false);
+export const DialogTrigger = ({ asChild, children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const child = React.cloneElement(children, {
+    onClick: () => setIsOpen(!isOpen),
+  });
+  return <>{child}</>;
+};
 
+export const DialogContent = ({ children }) => {
+  const { darkMode } = useDarkMode();
+  
   return (
-    <>
-      {React.Children.map(children, (child) =>
-        React.cloneElement(child, { isOpen, openDialog, closeDialog })
-      )}
-    </>
+    <div
+      className={`fixed inset-0 flex items-center justify-center transition-all duration-300 ${
+        darkMode ? "bg-black bg-opacity-70" : "bg-gray-800 bg-opacity-30"
+      }`}
+    >
+      <div
+        className={`rounded-lg p-6 max-w-lg w-full shadow-lg transition-all duration-300 ${
+          darkMode ? "bg-gray-800 text-white border border-gray-700" : "bg-white"
+        }`}
+      >
+        {children}
+      </div>
+    </div>
   );
 };
 
-export const DialogTrigger = ({ asChild, children, openDialog }) => {
-  if (asChild) {
-    return React.cloneElement(children, {
-      onClick: (e) => {
-        console.log("Trigger clicked");
-        openDialog();
-        children.props.onClick?.(e); // Var olan `onClick` olayını da çağır
-      },
-    });
-  }
+export const DialogHeader = ({ children }) => {
+  const { darkMode } = useDarkMode();
   return (
-    <button onClick={openDialog}>
+    <div
+      className={`mb-4 ${
+        darkMode ? "border-b border-gray-700" : "border-b border-gray-300"
+      }`}
+    >
       {children}
-    </button>
+    </div>
   );
 };
 
-export const DialogContent = ({ isOpen, closeDialog, children }) => {
-  console.log("Dialog open status:", isOpen); // Debug log
-  if (!isOpen) return null;
-
+export const DialogTitle = ({ children }) => {
+  const { darkMode } = useDarkMode();
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-      <div className="bg-white rounded-md shadow-lg w-full max-w-lg p-6 relative">
-        {children}
-        <button
-          onClick={closeDialog}
-          className="absolute top-3 right-3 text-gray-500 hover:text-gray-800"
-        >
-          &times;
-        </button>
-      </div>
-    </div>
+    <h2
+      className={`text-xl font-bold ${
+        darkMode ? "text-white" : "text-gray-800"
+      }`}
+    >
+      {children}
+    </h2>
   );
 };
-
-export const DialogHeader = ({ children }) => (
-  <div className="mb-4 border-b pb-2">{children}</div>
-);
-
-export const DialogTitle = ({ children }) => (
-  <h2 className="text-lg font-bold text-gray-800">{children}</h2>
-);
diff --git a/frontend/src/components/ui/lab-staff/tests/Input.jsx b/frontend/src/components/ui/lab-staff/tests/Input.jsx
index 77814b3..acae592 100644
--- a/frontend/src/components/ui/lab-staff/tests/Input.jsx
+++ b/frontend/src/components/ui/lab-staff/tests/Input.jsx
@@ -1,10 +1,16 @@
+import { useDarkMode } from "../../../../helpers/DarkModeContext";
+
 export function Input({ type = "text", className = "", ...props }) {
-    return (
-      <input
-        type={type}
-        className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 ${className}`}
-        {...props}
-      />
-    );
-  }
-  
\ No newline at end of file
+  const { darkMode } = useDarkMode();
+  return (
+    <input
+      type={type}
+      className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 transition-all duration-300 ${
+        darkMode
+          ? "bg-gray-800 text-white border-gray-600 focus:ring-blue-500"
+          : "bg-white text-gray-900 border-gray-300 focus:ring-blue-600"
+      } ${className}`}
+      {...props}
+    />
+  );
+}
diff --git a/frontend/src/components/ui/lab-staff/tests/Label.jsx b/frontend/src/components/ui/lab-staff/tests/Label.jsx
index 184a89f..5e38cf4 100644
--- a/frontend/src/components/ui/lab-staff/tests/Label.jsx
+++ b/frontend/src/components/ui/lab-staff/tests/Label.jsx
@@ -1,8 +1,15 @@
+import { useDarkMode } from "../../../../helpers/DarkModeContext";
+
 export function Label({ htmlFor, children, className = "" }) {
-    return (
-      <label htmlFor={htmlFor} className={`block text-sm font-medium text-gray-700 ${className}`}>
-        {children}
-      </label>
-    );
-  }
-  
\ No newline at end of file
+  const { darkMode } = useDarkMode();
+  return (
+    <label
+      htmlFor={htmlFor}
+      className={`block text-sm font-medium transition-all duration-300 ${
+        darkMode ? "text-gray-300" : "text-gray-700"
+      } ${className}`}
+    >
+      {children}
+    </label>
+  );
+}
diff --git a/frontend/src/components/ui/lab-staff/tests/Select.jsx b/frontend/src/components/ui/lab-staff/tests/Select.jsx
index cfb2f7d..425846e 100644
--- a/frontend/src/components/ui/lab-staff/tests/Select.jsx
+++ b/frontend/src/components/ui/lab-staff/tests/Select.jsx
@@ -1,41 +1,73 @@
 import React from "react";
+import { useDarkMode } from "../../../../helpers/DarkModeContext";
 
 export function Select({ children, disabled }) {
+  const { darkMode } = useDarkMode();
   return (
-    <div className={`relative ${disabled ? "opacity-50 pointer-events-none" : ""}`}>
+    <div
+      className={`relative transition-all duration-300 ${
+        disabled ? "opacity-50 pointer-events-none" : ""
+      } ${darkMode ? "bg-gray-800 text-white border border-gray-600" : "bg-white text-black border border-gray-300"}`}
+    >
       {children}
     </div>
   );
 }
 
-export function SelectTrigger({ children, id }) {
+export function SelectTrigger({ children, value, onClick }) {
+  const { darkMode } = useDarkMode();
   return (
     <button
-      id={id}
-      className="w-full p-2 border border-gray-300 rounded bg-white focus:ring focus:ring-blue-300"
+      onClick={onClick}
+      className={`w-full px-4 py-2 border rounded-md flex justify-between items-center transition-all duration-300 ${
+        darkMode
+          ? "bg-gray-800 border-gray-600 text-white hover:bg-gray-700 focus:ring-blue-500"
+          : "bg-white border-gray-300 text-black hover:bg-gray-100 focus:ring-blue-300"
+      }`}
     >
-      {children}
+      {value || children}
     </button>
   );
 }
 
 export function SelectValue({ placeholder }) {
-  return <span>{placeholder}</span>;
+  const { darkMode } = useDarkMode();
+  return (
+    <span className={`block ${darkMode ? "text-white" : "text-black"}`}>
+      {placeholder}
+    </span>
+  );
 }
 
-export function SelectContent({ children }) {
+export function SelectContent({ children, isOpen }) {
+  const { darkMode } = useDarkMode();
+  if (!isOpen) return null;
+
   return (
-    <div className="absolute left-0 right-0 mt-1 bg-white border border-gray-300 rounded shadow-lg">
+    <div
+      className={`absolute z-10 left-0 right-0 mt-1 rounded-md shadow-lg max-h-60 overflow-y-auto transition-all duration-300 ${
+        darkMode
+          ? "bg-gray-800 border border-gray-600 text-white"
+          : "bg-white border border-gray-300 text-black"
+      }`}
+    >
       {children}
     </div>
   );
 }
 
-export function SelectItem({ value, children }) {
+export function SelectItem({ value, children, onSelect }) {
+  const { darkMode } = useDarkMode();
   return (
     <div
-      className="p-2 hover:bg-gray-100 cursor-pointer"
-      onClick={() => console.log(`Selected: ${value}`)}
+      className={`p-2 cursor-pointer transition-all duration-300 ${
+        darkMode
+          ? "hover:bg-gray-900 text-white"
+          : "hover:bg-gray-100 text-black"
+      }`}
+      onClick={() => {
+        if (onSelect) onSelect(value);
+      }}
     >
       {children}
     </div>
diff --git a/frontend/src/components/ui/lab-staff/tests/Table.jsx b/frontend/src/components/ui/lab-staff/tests/Table.jsx
index 7bfdac9..0e18fba 100644
--- a/frontend/src/components/ui/lab-staff/tests/Table.jsx
+++ b/frontend/src/components/ui/lab-staff/tests/Table.jsx
@@ -1,23 +1,68 @@
-export const Table = ({ children }) => (
-  <table className="min-w-full border-collapse border border-gray-300">{children}</table>
-);
+import { useDarkMode } from "../../../../helpers/DarkModeContext";
 
-export const TableHeader = ({ children }) => (
-  <thead className="bg-gray-200">{children}</thead>
-);
+export const Table = ({ children }) => {
+  const { darkMode } = useDarkMode();
+  return (
+    <table
+      className={`min-w-full border-collapse border transition-all duration-300 ${
+        darkMode ? "border-gray-700 bg-gray-800 text-white" : "border-gray-300 bg-white"
+      }`}
+    >
+      {children}
+    </table>
+  );
+};
 
-export const TableRow = ({ children }) => (
-  <tr className="hover:bg-gray-100">{children}</tr>
-);
+export const TableHeader = ({ children }) => {
+  const { darkMode } = useDarkMode();
+  return (
+    <thead
+      className={`transition-all duration-300 ${
+        darkMode ? "bg-gray-700 text-white" : "bg-gray-200"
+      }`}
+    >
+      {children}
+    </thead>
+  );
+};
 
-export const TableHead = ({ children }) => (
-  <th className="px-4 py-2 text-left border border-gray-300 text-gray-700 font-semibold">
-    {children}
-  </th>
-);
+export const TableRow = ({ children }) => {
+  const { darkMode } = useDarkMode();
+  return (
+    <tr
+      className={`hover:transition-all duration-300 ${
+        darkMode ? "hover:bg-gray-700" : "hover:bg-gray-100"
+      }`}
+    >
+      {children}
+    </tr>
+  );
+};
+
+export const TableHead = ({ children }) => {
+  const { darkMode } = useDarkMode();
+  return (
+    <th
+      className={`px-4 py-2 text-left border font-semibold transition-all duration-300 ${
+        darkMode ? "border-gray-600 text-gray-300" : "border-gray-300 text-gray-700"
+      }`}
+    >
+      {children}
+    </th>
+  );
+};
 
 export const TableBody = ({ children }) => <tbody>{children}</tbody>;
 
-export const TableCell = ({ children }) => (
-  <td className="px-4 py-2 border border-gray-300 text-gray-600">{children}</td>
-);
+export const TableCell = ({ children }) => {
+  const { darkMode } = useDarkMode();
+  return (
+    <td
+      className={`px-4 py-2 border transition-all duration-300 ${
+        darkMode ? "border-gray-600 text-gray-400" : "border-gray-300 text-gray-600"
+      }`}
+    >
+      {children}
+    </td>
+  );
+};
diff --git a/frontend/src/components/ui/lab-staff/tests/TextArea.jsx b/frontend/src/components/ui/lab-staff/tests/TextArea.jsx
index ca2a654..d11c24c 100644
--- a/frontend/src/components/ui/lab-staff/tests/TextArea.jsx
+++ b/frontend/src/components/ui/lab-staff/tests/TextArea.jsx
@@ -1,6 +1,9 @@
 import React from "react";
+import { useDarkMode } from "../../../../helpers/DarkModeContext";
 
 export function Textarea({ id, value, readOnly, onChange, placeholder }) {
+  const { darkMode } = useDarkMode();
+
   return (
     <textarea
       id={id}
@@ -8,9 +11,15 @@ export function Textarea({ id, value, readOnly, onChange, placeholder }) {
       readOnly={readOnly}
       onChange={onChange}
       placeholder={placeholder}
-      className={`w-full p-2 border border-gray-300 rounded ${
-        readOnly ? "bg-gray-100" : "bg-white"
-      } focus:ring focus:ring-blue-300`}
+      className={`w-full p-2 border rounded transition-all duration-300 ${
+        darkMode
+          ? readOnly
+            ? "bg-gray-700 text-gray-400 border-gray-600"
+            : "bg-gray-800 text-white border-gray-600 focus:ring-blue-500"
+          : readOnly
+          ? "bg-gray-100 text-gray-500 border-gray-300"
+          : "bg-white text-black border-gray-300 focus:ring-blue-300"
+      }`}
       rows={4}
     />
   );
diff --git a/frontend/src/pages/labStaff/LabStaffSettingsPage.tsx b/frontend/src/pages/labStaff/LabStaffSettingsPage.tsx
index 9f31092..a21df7e 100644
--- a/frontend/src/pages/labStaff/LabStaffSettingsPage.tsx
+++ b/frontend/src/pages/labStaff/LabStaffSettingsPage.tsx
@@ -4,29 +4,25 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../..
 import { Label } from "../../components/ui/admin/Label.jsx"
 import { Switch } from "../../components/ui/patient/settings/Switch.jsx"
 import { Lock } from 'lucide-react'
-
+import { useDarkMode } from '../../helpers/DarkModeContext.js';
 import Sidebar from "../../components/ui/lab-staff/common/Sidebar.jsx"
 import Header from "../../components/ui/admin/Header.jsx";
 
 import { Endpoint, putRequest } from "../../helpers/Network.js";
 import { toast } from 'react-toastify'
 import { Dialog, DialogContent } from "../../components/ui/lab-staff/Dialog.jsx"
-import { Input } from '../../components/ui/login/Input.jsx';
+import { Input } from '../../components/ui/patient/settings/Input.jsx';
 import { EyeIcon, EyeOffIcon } from 'lucide-react';
 
 export default function LabStaffSettingsPage() {
   const [error, setError] = useState(null);
   const [isChangePasswordOpen, setIsChangePasswordOpen] = useState(false);
-
+  const { darkMode, toggleDarkMode } = useDarkMode(); 
   const [currentPassword, setCurrentPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');
   const [newPasswordConfirm, setNewPasswordConfirm] = useState('');
   const [showPassword, setShowPassword] = useState(false);
 
-  const [darkMode, setDarkMode] = useState(false);
-
-  const handleDarkModeToggle = (checked) => { };
-
   const handleChangePassword = async (e) => {
     e.preventDefault();
     try {
@@ -43,7 +39,7 @@ export default function LabStaffSettingsPage() {
   };
 
   return (
-    <div className="flex h-screen bg-gray-100">
+    <div className={`flex h-screen ${darkMode ? "bg-gray-800 " : "bg-gray-100" }text-gray-900`}>
       <Sidebar />
       {/* Main Content */}
       <main className="flex-1 overflow-y-auto">
@@ -67,7 +63,7 @@ export default function LabStaffSettingsPage() {
                 <Switch
                   id="dark-mode"
                   checked={darkMode}
-                  onCheckedChange={handleDarkModeToggle}
+                  onCheckedChange={toggleDarkMode}
                 />
               </div>
             </CardContent>
diff --git a/frontend/src/pages/labStaff/LabStaffTestsPage.tsx b/frontend/src/pages/labStaff/LabStaffTestsPage.tsx
index 795fb5c..144b8d2 100644
--- a/frontend/src/pages/labStaff/LabStaffTestsPage.tsx
+++ b/frontend/src/pages/labStaff/LabStaffTestsPage.tsx
@@ -11,7 +11,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/ui/lab-staff/tests/Tabs.jsx"
 import { Home, LogOut, FlaskRoundIcon as Flask, Clipboard, Search, AlertTriangle } from 'lucide-react'
 import Link from "../../components/ui/lab-staff/tests/Link.jsx"
-
+import { useDarkMode } from '../../helpers/DarkModeContext.js';
 import Sidebar from "../../components/ui/lab-staff/common/Sidebar.jsx"
 import Header from "../../components/ui/admin/Header.jsx";
 
@@ -21,7 +21,7 @@ import { toast } from 'react-toastify';
 
 
 export default function LabStaffTests() {
-
+  const { darkMode } = useDarkMode(); 
   const [searchTerm, setSearchTerm] = useState('')
   const [selectedTest, setSelectedTest] = useState(null)
   const [testResult, setTestResult] = useState({ result: '' })
@@ -161,7 +161,7 @@ export default function LabStaffTests() {
 
 
   return (
-    <div className="flex h-screen bg-gray-100">
+    <div className={`flex h-screen ${darkMode ? "bg-gray-800 " : "bg-gray-100" }text-gray-900`}>
       <Sidebar />
 
       {/* Main Content */}