diff --git a/client/src/App.jsx b/client/src/App.jsx
index 28fadcc..d4d47c7 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { UserContextProvider } from "./Context/UserContext";
+import { ThemeProvider } from "./Context/ThemeContext";
 import { Analytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/react";
 import { Routes, Route } from "react-router";
@@ -19,28 +20,33 @@ import MasterPage from "./MasterPage";
 
 function App() {
   return (
-    <UserContextProvider>
-          <Routes>
-            <Route path="/login" element={<Login />} />
-            <Route path="/signup" element={<Signup />} />
-            <Route path="/verifyOtp" element={<VerifyOtp />} />
-            
-            <Route path="/" element={<MasterPage/>}>
-              <Route index element={<Dashboard />}/>
-              <Route path="/notifications" element={<Notifcation />} />
-              <Route path="/questionNotifications" element={<QuestionNotifcation />} />
-              <Route path="/upload/:requestId" element={<UploadPage />} />
-              <Route path="/answer/:requestId" element={<AnswerPage />} />
-              <Route path="/upload" element={<UploadPage />} />
-              <Route path="/question" element={<QuestionPage />} />  
-              <Route path="/request" element={<RequestPage />} />
-              <Route path="/leaderboard" element={<LeaderBoard />} />
-              <Route path="/settings" element={<Settings />} />
-            </Route>
-          </Routes>
-          <Analytics />
-          <SpeedInsights />
-    </UserContextProvider>
+    <ThemeProvider>
+      <UserContextProvider>
+        <Routes>
+          <Route path="/login" element={<Login />} />
+          <Route path="/signup" element={<Signup />} />
+          <Route path="/verifyOtp" element={<VerifyOtp />} />
+
+          <Route path="/" element={<MasterPage />}>
+            <Route index element={<Dashboard />} />
+            <Route path="/notifications" element={<Notifcation />} />
+            <Route
+              path="/questionNotifications"
+              element={<QuestionNotifcation />}
+            />
+            <Route path="/upload/:requestId" element={<UploadPage />} />
+            <Route path="/answer/:requestId" element={<AnswerPage />} />
+            <Route path="/upload" element={<UploadPage />} />
+            <Route path="/question" element={<QuestionPage />} />
+            <Route path="/request" element={<RequestPage />} />
+            <Route path="/leaderboard" element={<LeaderBoard />} />
+            <Route path="/settings" element={<Settings />} />
+          </Route>
+        </Routes>
+        <Analytics />
+        <SpeedInsights />
+      </UserContextProvider>
+    </ThemeProvider>
   );
 }
 
diff --git a/client/src/Context/ThemeContext.jsx b/client/src/Context/ThemeContext.jsx
new file mode 100644
index 0000000..87ababa
--- /dev/null
+++ b/client/src/Context/ThemeContext.jsx
@@ -0,0 +1,20 @@
+import React, { createContext, useState, useContext } from 'react';
+
+const ThemeContext = createContext();
+
+export const useTheme = () => useContext(ThemeContext);
+
+export const ThemeProvider = ({ children }) => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const toggleTheme = () => {
+    setIsDarkMode(prevMode => !prevMode);
+    document.documentElement.classList.toggle('dark');
+  };
+
+  return (
+    <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
\ No newline at end of file
diff --git a/client/src/Context/UserContext.jsx b/client/src/Context/UserContext.jsx
index d8c8032..9f66ef0 100644
--- a/client/src/Context/UserContext.jsx
+++ b/client/src/Context/UserContext.jsx
@@ -1,7 +1,7 @@
 import { createContext, useEffect, useState } from "react";
 import axios from "axios";
 import { Loader } from "../components/Loader/Loader";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 export const UserContext = createContext();
 
@@ -9,10 +9,11 @@ export const UserContextProvider = ({ children }) => {
   const [user, setUser] = useState(null);
   const navigate = useNavigate();
   const [loading, setLoading] = useState(true);
+  const location = useLocation();
 
   const token = localStorage.getItem("token");
 
-  if (!token) {
+  if (!token && location.pathname !== "/signup") {
     navigate("/login");
   }
 
diff --git a/client/src/components/DocGrid/DocGrid.jsx b/client/src/components/DocGrid/DocGrid.jsx
index d0e018a..6aed72f 100644
--- a/client/src/components/DocGrid/DocGrid.jsx
+++ b/client/src/components/DocGrid/DocGrid.jsx
@@ -40,7 +40,7 @@ const DocGrid = () => {
   const [searchInput, setSearchInput] = useState("");
   const [activeTab, setActiveTab] = useState("All");
   const { user, setUser, getUser } = useContext(UserContext);
-  const langKey=useSelector((store)=>store.config.lang)
+  const langKey = useSelector((store) => store.config.lang);
 
   console.log(user);
 
@@ -126,12 +126,12 @@ const DocGrid = () => {
 
   if (notes.length == 0 && activeTab == "All") {
     return (
-      <div className="bg-white">
+      <div className="bg-white dark:bg-gray-900">
         <div className="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-12 lg:max-w-7xl lg:px-4">
           <div className="flex rounded-md overflow-hidden w-full">
             <input
               type="text"
-              className="w-full rounded-md mt-3 mb-10 rounded-r-none text-black pl-4"
+              className="w-full rounded-md mt-3 mb-10 rounded-r-none text-black dark:text-white pl-4 bg-white dark:bg-gray-800 border dark:border-gray-700"
               placeholder={lang[langKey].Searchcourses}
               value={searchInput}
               onChange={(e) => setSearchInput(e.target.value)}
@@ -145,7 +145,7 @@ const DocGrid = () => {
               }}
             />
             <button
-              className="rounded-md mt-3 mb-10 rounded-l-none pl-4 bg-indigo-600 text-white px-6 text-lg font-semibold py-4 rounded-r-md"
+              className="rounded-md mt-3 mb-10 rounded-l-none pl-4 bg-indigo-600 text-white px-6 text-lg font-semibold py-4 rounded-r-md dark:bg-indigo-500"
               onClick={() => {
                 window.location.href = `?search=${encodeURIComponent(
                   searchInput
@@ -155,7 +155,7 @@ const DocGrid = () => {
               {lang[langKey].Go}
             </button>
           </div>
-          <h2 className="text-2xl font-bold tracking-tight text-gray-900">
+          <h2 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
             {lang[langKey].NoResultsFound}
           </h2>
         </div>
@@ -164,262 +164,271 @@ const DocGrid = () => {
   }
 
   return (
-    <>
-      <div className="bg-white">
-        <div className="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-12 lg:max-w-7xl lg:px-4">
-        <div className="flex gap-6 mb-2">
-          <div className="flex rounded-md overflow-hidden w-full">
-            <input
-              type="text"
-              className="w-full rounded-md mt-3 mb-10 rounded-r-none text-black pl-4"
-              placeholder={lang[langKey].Searchcourses}
-              value={searchInput}
-              onChange={(e) => setSearchInput(e.target.value)}
-              onKeyPress={(e) => {
-                if (e.key === "Enter") {
-                  const searchTerm = e.target.value;
-                  window.location.href = `?search=${encodeURIComponent(
-                    searchTerm
-                  )}`;
-                }
-              }}
-            />
-            <button
-              className="rounded-md mt-3 mb-10 rounded-l-none pl-4 bg-indigo-600 text-white px-6 text-lg font-semibold py-4 rounded-r-md"
-              onClick={() => {
+<>
+  <div className="bg-white dark:bg-gray-900">
+    <div className="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-12 lg:max-w-7xl lg:px-4">
+      <div className="flex gap-6 mb-2">
+        <div className="flex rounded-md overflow-hidden w-full">
+          <input
+            type="text"
+            className="w-full rounded-md mt-3 mb-10 rounded-r-none text-black dark:text-white pl-4 bg-white dark:bg-gray-800 border dark:border-gray-700"
+            placeholder={lang[langKey].Searchcourses}
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            onKeyPress={(e) => {
+              if (e.key === "Enter") {
+                const searchTerm = e.target.value;
                 window.location.href = `?search=${encodeURIComponent(
-                  searchInput
+                  searchTerm
                 )}`;
-              }}
-            >
-              {lang[langKey].Go}
-            </button>
-            </div>
-            <Link to="./questionNotifications">
-            <button
-              className="rounded-md mt-3 mb-10 pl-4 bg-indigo-600 text-white px-6 text-lg font-semibold py-4"
-            >
-              Doubts
-            </button>
-            </Link>
-            </div>
-          <div className="flex gap-2 mb-2">
-            <div
-              onClick={() => {
-                setActiveTab("All");
-              }}
-              className={`flex-1 border-2 ${
-                activeTab === "All"
-                  ? "bg-indigo-600 text-white"
-                  : "border-black"
-              } rounded-lg p-2 `}
-            >
-              <h2 className="text-2xl font-bold tracking-tight  justify-center flex text-center">
-                {lang[langKey].AllNotes}
-              </h2>
-            </div>
-            <div
-              onClick={() => {
-                setActiveTab("BookMarked");
-              }}
-              className={`flex-1 border-2 ${
-                activeTab === "BookMarked"
-                  ? "bg-indigo-600 text-white"
-                  : "border-black"
-              } rounded-lg p-2 `}
-            >
-              <h2 className="text-2xl font-bold tracking-tight first-center justify-center flex text-center">
-                {lang[langKey].BookMarkedNotes}
-              </h2>
-            </div>
-          </div>
-
-          <h2 className="text-2xl font-bold tracking-tight text-gray-900">
-            {lang[langKey].FindYourNotesHere}
+              }
+            }}
+          />
+          <button
+            className="rounded-md mt-3 mb-10 rounded-l-none pl-4 bg-indigo-600 dark:bg-indigo-500 text-white px-6 text-lg font-semibold py-4"
+            onClick={() => {
+              window.location.href = `?search=${encodeURIComponent(
+                searchInput
+              )}`;
+            }}
+          >
+            {lang[langKey].Go}
+          </button>
+        </div>
+        <Link to="./questionNotifications">
+          <button className="rounded-md mt-3 mb-10 pl-4 bg-indigo-600 dark:bg-indigo-500 text-white px-6 text-lg font-semibold py-4">
+            {lang[langKey].Doubts}
+          </button>
+        </Link>
+      </div>
+      <div className="flex gap-2 mb-2">
+        <div
+          onClick={() => {
+            setActiveTab("All");
+          }}
+          className={`flex-1 border-2 ${
+            activeTab === "All"
+              ? "bg-indigo-600 text-white"
+              : "border-black dark:border-white"
+          } rounded-lg p-2 `}
+        >
+          <h2 className="text-2xl font-bold tracking-tight justify-center flex text-center dark:text-gray-100">
+            {lang[langKey].AllNotes}
+          </h2>
+        </div>
+        <div
+          onClick={() => {
+            setActiveTab("BookMarked");
+          }}
+          className={`flex-1 border-2 ${
+            activeTab === "BookMarked"
+              ? "bg-indigo-600 text-white"
+              : "border-black dark:border-white"
+          } rounded-lg p-2 `}
+        >
+          <h2 className="text-2xl font-bold tracking-tight justify-center flex text-center dark:text-gray-100">
+            {lang[langKey].BookMarkedNotes}
           </h2>
+        </div>
+      </div>
 
-          <div className="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
-            {notes.map((note, index) => (
-              <div
-                key={index}
-                className="group relative hover:cursor-pointer"
-                onClick={() => handleNoteClick(note)}
-              >
-                <div className="text-center shadow-xl rounded-lg bg-white py-2 px-2 bg-slate-100">
-                  <div className="aspect-h-1 aspect-w-1 flex items-center w-full overflow-hidden bg-gray-800 lg:aspect-none group-hover:opacity-50 lg:h-80">
-                    <MyImage
-                      src={note.thumbnail}
-                      alt={note.thumbnail}
-                      className="h-full w-full object-cover object-center lg:h-full lg:w-full"
-                    />
-                  </div>
-                  <div className="mt-2">
-                    <h3 className="text-lg text-gray-800 font-bold">
-                      <p>{note.title}</p>
-                    </h3>
-                    <p className="mt-1 pb-2 text-base text-gray-700">
-                      {note.subject.subjectName}
-                    </p>
-                  </div>
-                  <div className="mt-auto flex justify-center items-center">
-                    {note.likes > 0 ? (
-                      <p className="flex items-center">
-                        <FaHeart className="text-red-500 mr-1" />
-                        {note.likes}
-                      </p>
-                    ) : (
-                      <p className="flex items-center">
-                        <FaHeart className="text-red-500 mr-1" />0
-                      </p>
-                    )}
-                  </div>
-                </div>
+      <h2 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+        {lang[langKey].FindYourNotesHere}
+      </h2>
+
+      <div className="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
+        {notes.map((note, index) => (
+          <div
+            key={index}
+            className="group relative hover:cursor-pointer"
+            onClick={() => handleNoteClick(note)}
+          >
+            <div className="text-center shadow-xl rounded-lg bg-white dark:bg-gray-800 py-2 px-2">
+              <div className="aspect-h-1 aspect-w-1 flex items-center w-full overflow-hidden bg-gray-800 dark:bg-gray-700 lg:aspect-none group-hover:opacity-50 lg:h-80">
+                <MyImage
+                  src={note.thumbnail}
+                  alt={note.thumbnail}
+                  className="h-full w-full object-cover object-center lg:h-full lg:w-full"
+                />
+              </div>
+              <div className="mt-2">
+                <h3 className="text-lg text-gray-800 dark:text-gray-200 font-bold">
+                  <p>{note.title}</p>
+                </h3>
+                <p className="mt-1 pb-2 text-base text-gray-700 dark:text-gray-400">
+                  {note.subject.subjectName}
+                </p>
+              </div>
+              <div className="mt-auto flex justify-center items-center dark:text-white">
+                {note.likes > 0 ? (
+                  <p className="flex items-center">
+                    <FaHeart className="text-red-500 mr-1" />
+                    {note.likes}
+                  </p>
+                ) : (
+                  <p className="flex items-center">
+                    <FaHeart className="text-red-500 mr-1" />0
+                  </p>
+                )}
               </div>
-            ))}
+            </div>
           </div>
-
-          {activeTab !== "All" && notes.length === 0 ? (
-            <h2 className="text-2xl font-bold tracking-tight text-gray-900">
-             {lang[langKey].NoBookMarkedNotes}
-            </h2>
-          ) : (
-            ""
-          )}
-        </div>
+        ))}
       </div>
-      <Transition.Root show={open} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={setOpen}>
+
+      {activeTab !== "All" && notes.length === 0 ? (
+        <h2 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+          {lang[langKey].NoBookMarkedNotes}
+        </h2>
+      ) : (
+        ""
+      )}
+    </div>
+  </div>
+  <Transition.Root show={open} as={Fragment}>
+    <Dialog as="div" className="relative z-10" onClose={setOpen}>
+      <Transition.Child
+        as={Fragment}
+        enter="ease-out duration-300"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="ease-in duration-200"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <div className="fixed inset-0 hidden bg-gray-500 bg-opacity-75 transition-opacity md:block" />
+      </Transition.Child>
+
+      <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div className="flex min-h-full items-stretch justify-center text-center md:items-center md:px-2 lg:px-4">
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
+            enterFrom="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
+            enterTo="opacity-100 translate-y-0 md:scale-100"
             leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
+            leaveFrom="opacity-100 translate-y-0 md:scale-100"
+            leaveTo="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
           >
-            <div className="fixed inset-0 hidden bg-gray-500 bg-opacity-75 transition-opacity md:block" />
-          </Transition.Child>
+            <Dialog.Panel className="flex w-full transform text-left text-base transition md:my-8 md:max-w-2xl md:px-4 lg:max-w-4xl">
+              <div className="relative flex w-full items-center overflow-hidden bg-white dark:bg-gray-800 px-4 pb-8 pt-14 shadow-2xl sm:px-6 sm:pt-8 md:p-6 lg:p-8">
+                <button
+                  type="button"
+                  className="absolute right-4 top-4 text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 sm:right-6 sm:top-8 md:right-6 md:top-6 lg:right-8 lg:top-8"
+                  onClick={() => setOpen(false)}
+                >
+                  <span className="sr-only">Close</span>
+                  <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                </button>
 
-          <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
-            <div className="flex min-h-full items-stretch justify-center text-center md:items-center md:px-2 lg:px-4">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
-                enterTo="opacity-100 translate-y-0 md:scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0 md:scale-100"
-                leaveTo="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
-              >
-                <Dialog.Panel className="flex w-full transform text-left text-base transition md:my-8 md:max-w-2xl md:px-4 lg:max-w-4xl">
-                  <div className="relative flex w-full items-center overflow-hidden bg-white px-4 pb-8 pt-14 shadow-2xl sm:px-6 sm:pt-8 md:p-6 lg:p-8">
-                    <button
-                      type="button"
-                      className="absolute right-4 top-4 text-gray-400 hover:text-gray-500 sm:right-6 sm:top-8 md:right-6 md:top-6 lg:right-8 lg:top-8"
-                      onClick={() => setOpen(false)}
+                <div className="grid w-full grid-cols-1 items-start gap-x-6 gap-y-8 sm:grid-cols-12 lg:gap-x-8">
+                  <div className="aspect-h-3 aspect-w-2 overflow-hidden rounded-lg bg-gray-200 dark:bg-gray-700 sm:col-span-4 lg:col-span-5">
+                    <img
+                      src={note_.thumbnail}
+                      alt={note_.thumbnail}
+                      className="object-cover object-center"
+                    />
+                  </div>
+                  <div className="sm:col-span-8 lg:col-span-7 flex flex-col justify-between h-full">
+                    <section
+                      aria-labelledby="information-heading"
+                      className="mt-2 gap-4 flex flex-col"
                     >
-                      <span className="sr-only">Close</span>
-                      <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-                    </button>
-
-                    <div className="grid w-full grid-cols-1 items-start gap-x-6 gap-y-8 sm:grid-cols-12 lg:gap-x-8">
-                      <div className="aspect-h-3 aspect-w-2 overflow-hidden rounded-lg bg-gray-200 sm:col-span-4 lg:col-span-5">
-                        <img
-                          src={note_.thumbnail}
-                          alt={note_.thumbnail}
-                          className="object-cover object-center"
-                        />
-                      </div>
-                      <div className="sm:col-span-8 lg:col-span-7 flex flex-col justify-between h-full">
-                        <section
-                          aria-labelledby="information-heading"
-                          className="mt-2 gap-4 flex flex-col"
-                        >
-                          <h2 className="text-2xl font-bold text-gray-900 sm:pr-12">
-                            {note_.title}
-                          </h2>
-                          <h3 id="information-heading" className="sr-only">
-                            {lang[langKey].Productinformation}
-                          </h3>
-
-                          <p className="text-md text-gray-700">
-                            <span className="font-bold mr-2">{lang[langKey].Subject}:</span>{" "}
-                            {note_.subject?.subjectName}
-                          </p>
+                      <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100 sm:pr-12">
+                        {note_.title}
+                      </h2>
+                      <h3 id="information-heading" className="sr-only">
+                        {lang[langKey].Productinformation}
+                      </h3>
 
-                          <p className="text-md text-gray-700">
-                            <span className="font-bold mr-2">{lang[langKey].Description}:</span>{" "}
-                            {note_.description}
-                          </p>
+                      <p className="text-md text-gray-700 dark:text-gray-400">
+                        <span className="font-bold mr-2">
+                          {lang[langKey].Subject}:
+                        </span>{" "}
+                        {note_.subject?.subjectName}
+                      </p>
 
-                          <p className="text-md text-gray-700">
-                            <span className="font-bold mr-2">{lang[langKey].Year}:</span>{" "}
-                            {note_.year}
-                          </p>
+                      <p className="text-md text-gray-700 dark:text-gray-400">
+                        <span className="font-bold mr-2">
+                          {lang[langKey].Description}:
+                        </span>{" "}
+                        {note_.description}
+                      </p>
 
-                          <p className="text-md text-gray-700">
-                            <span className="font-bold mr-2">{lang[langKey].Course}:</span>{" "}
-                            {note_.course}
-                          </p>
+                      <p className="text-md text-gray-700 dark:text-gray-400">
+                        <span className="font-bold mr-2">
+                          {lang[langKey].Year}:
+                        </span>{" "}
+                        {note_.year}
+                      </p>
 
-                          <p className="text-md text-gray-700">
-                            <span className="font-bold mr-2">{lang[langKey].Likes}:</span>{" "}
-                            {note_.likes}
-                          </p>
-                          <div className="flex gap-2 ">
-                            <div style={{ width: "22px" }}>
-                              <LikeButton noteId={note_?._id} />
-                            </div>
-                            <div style={{ width: "40px" }}>
-                              {user?.bookMarkedNotes?.includes(note_._id) ? (
-                                <FcBookmark
-                                  onClick={() => handleBookMark(note_._id)}
-                                  className="text-2xl cursor-pointer"
-                                />
-                              ) : (
-                                <CiBookmark
-                                  onClick={() => handleBookMark(note_._id)}
-                                  className="text-2xl cursor-pointer"
-                                />
-                              )}
-                            </div>
-                          </div>
-                        </section>
+                      <p className="text-md text-gray-700 dark:text-gray-400">
+                        <span className="font-bold mr-2">
+                          {lang[langKey].Course}:
+                        </span>{" "}
+                        {note_.course}
+                      </p>
 
-                        <section aria-labelledby="options-heading" className="">
-                          <h3 id="options-heading" className="sr-only">
-                            {lang[langKey].Productoptions}
-                          </h3>
-                          <p className="text-sm mt-8 text-gray-700">
-                            Uploaded by {" "}
-                            <a
-                              href="#"
-                              className="hover:underline hover:text-gray-900"
-                            >
-                              @{note_.author?.username}
-                            </a>
-                          </p>
-                          <a
-                            type="submit"
-                            className="mt-6 flex w-full cursor-pointer items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                            href={note_?.fileUrl}
-                            target="_blank"
-                            rel="noreferrer"
-                          >
-                            {lang[langKey].Download}
-                          </a>
-                        </section>
+                      <p className="text-md text-gray-700 dark:text-gray-400">
+                        <span className="font-bold mr-2">
+                          {lang[langKey].Likes}:
+                        </span>{" "}
+                        {note_.likes}
+                      </p>
+                      <div className="flex gap-2 ">
+                        <div style={{ width: "22px" }}>
+                          <LikeButton noteId={note_?._id} />
+                        </div>
+                        <div style={{ width: "40px" }}>
+                          {user?.bookMarkedNotes?.includes(note_._id) ? (
+                            <FcBookmark
+                              onClick={() => handleBookMark(note_._id)}
+                              className="text-2xl cursor-pointer"
+                            />
+                          ) : (
+                            <CiBookmark
+                              onClick={() => handleBookMark(note_._id)}
+                              className="text-2xl cursor-pointer"
+                            />
+                          )}
+                        </div>
                       </div>
-                    </div>
+                    </section>
+
+                    <section aria-labelledby="options-heading" className="">
+                      <h3 id="options-heading" className="sr-only">
+                        {lang[langKey].Productoptions}
+                      </h3>
+                      <p className="text-sm mt-8 text-gray-700 dark:text-gray-400">
+                        {lang[langKey].UploadedBy}{" "}
+                        <a
+                          href="#"
+                          className="hover:underline hover:text-gray-900 dark:hover:text-gray-100"
+                        >
+                          @{note_.author?.username}
+                        </a>
+                      </p>
+                      <a
+                        type="submit"
+                        className="mt-6 flex w-full cursor-pointer items-center justify-center rounded-md border border-transparent bg-indigo-600 dark:bg-indigo-500 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2"
+                        href={note_?.fileUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        {lang[langKey].Download}
+                      </a>
+                    </section>
                   </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition.Root>
-    </>
+                </div>
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </div>
+    </Dialog>
+  </Transition.Root>
+</>
+
   );
 };
 
diff --git a/client/src/components/Footer/index.jsx b/client/src/components/Footer/index.jsx
index eb550a3..01149a4 100644
--- a/client/src/components/Footer/index.jsx
+++ b/client/src/components/Footer/index.jsx
@@ -8,7 +8,7 @@ const Footer = () => {
   const langKey=useSelector((store)=>store.config.lang)
 
   return (
-    <footer className="bg-white dark:bg-gray-900">
+    <footer className="bg-white dark:bg-gray-800">
       <div className="w-full max-w-screen-xl mx-auto p-4 md:py-8">
         <div className="sm:flex sm:items-center sm:justify-between">
           <Link to="/">
diff --git a/client/src/components/LeaderBoardTable/LeaderBoardTable.jsx b/client/src/components/LeaderBoardTable/LeaderBoardTable.jsx
index 8426d09..684435f 100644
--- a/client/src/components/LeaderBoardTable/LeaderBoardTable.jsx
+++ b/client/src/components/LeaderBoardTable/LeaderBoardTable.jsx
@@ -6,23 +6,23 @@ import { useSelector } from "react-redux";
 const LeaderBoardTable = () => {
   const [leaderData, setLeaderData] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage, setItemsPerPage] = useState(10);
-  const langKey=useSelector((store)=>store.config.lang)
+  const [itemsPerPage] = useState(10); 
+  const langKey = useSelector((store) => store.config.lang);
 
-  const fetchLeaderData = async () => {
-    try {
-      const response = await axios.get(
-        `${import.meta.env.VITE_BASE_URL}/user/leaderboard`
-      );
-      if (response.status === 200) {
-        setLeaderData(response.data);
+  useEffect(() => {
+    const fetchLeaderData = async () => {
+      try {
+        const response = await axios.get(
+          `${import.meta.env.VITE_BASE_URL}/user/leaderboard`
+        );
+        if (response.status === 200) {
+          setLeaderData(response.data);
+        }
+      } catch (error) {
+        console.error("Error fetching leaderboard data:", error);
       }
-    } catch (error) {
-      console.log(error);
-    }
-  };
+    };
 
-  useEffect(() => {
     fetchLeaderData();
   }, []);
 
@@ -36,7 +36,7 @@ const LeaderBoardTable = () => {
     <div className="flex justify-center mt-4">
       <button
         className={`mx-1 px-3 py-1 rounded-md ${
-          currentPage === 1 ? "bg-black text-white" : "bg-gray-300"
+          currentPage === 1 ? "bg-black text-white dark:bg-white dark:text-black" : "bg-gray-300 dark:bg-gray-700"
         }`}
         onClick={() => setCurrentPage(1)}
         disabled={currentPage === 1}
@@ -45,19 +45,19 @@ const LeaderBoardTable = () => {
       </button>
       <button
         className={`mx-1 px-3 py-1 rounded-md ${
-          currentPage === 1 ? "bg-black text-white" : "bg-gray-300"
+          currentPage === 1 ? "bg-black text-white dark:bg-white dark:text-black" : "bg-gray-300 dark:bg-gray-700"
         }`}
         onClick={() => setCurrentPage(currentPage - 1)}
         disabled={currentPage === 1}
       >
         {lang[langKey].Prev}
       </button>
-      <span className="mx-2">
+      <span className="mx-2 text-black dark:text-white">
         {lang[langKey].Page} {currentPage} {lang[langKey].of} {totalPages}
       </span>
       <button
         className={`mx-1 px-3 py-1 rounded-md ${
-          currentPage === totalPages ? "bg-black text-white" : "bg-gray-300"
+          currentPage === totalPages ? "bg-black text-white dark:bg-white dark:text-black" : "bg-gray-300 dark:bg-gray-700"
         }`}
         onClick={() => setCurrentPage(currentPage + 1)}
         disabled={currentPage === totalPages}
@@ -66,7 +66,7 @@ const LeaderBoardTable = () => {
       </button>
       <button
         className={`mx-1 px-3 py-1 rounded-md ${
-          currentPage === totalPages ? "bg-black text-white" : "bg-gray-300"
+          currentPage === totalPages ? "bg-black text-white dark:bg-white dark:text-black" : "bg-gray-300 dark:bg-gray-700"
         }`}
         onClick={() => setCurrentPage(totalPages)}
         disabled={currentPage === totalPages}
@@ -77,12 +77,12 @@ const LeaderBoardTable = () => {
   );
 
   return (
-    <div className="container mx-auto py-8">
-      <h1 className="text-3xl font-bold mb-6">{lang[langKey].Leaderboard}</h1>
+    <div className="p-10 mx-auto py-8 dark:bg-gray-900">
+      <h1 className="text-3xl font-bold mb-6 text-black dark:text-white">{lang[langKey].Leaderboard}</h1>
       <div className="overflow-x-auto">
         <table className="w-full table-auto border-collapse">
           <thead>
-            <tr className="bg-gray-800 text-white">
+            <tr className="bg-gray-800 text-white dark:bg-gray-700">
               <th className="px-4 py-2">{lang[langKey].Rank}</th>
               <th className="px-4 py-2">{lang[langKey].ProfilePhoto}</th>
               <th className="px-4 py-2">{lang[langKey].Username}</th>
@@ -96,27 +96,27 @@ const LeaderBoardTable = () => {
                 key={user._id}
                 className={`${
                   (indexOfFirstItem + index) % 2 === 0
-                    ? "bg-gray-100"
-                    : "bg-white"
-                } hover:bg-gray-200 transition-colors duration-200`}
+                    ? "bg-gray-100 dark:bg-gray-800"
+                    : "bg-white dark:bg-gray-900"
+                } hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200`}
               >
-                <td className="px-4 py-2 border border-gray-300">
+                <td className="px-4 py-2 border border-gray-300 dark:border-gray-700 text-black dark:text-white">
                   {indexOfFirstItem + index + 1}
                 </td>
-                <td className="px-4 py-2 border border-gray-300">
+                <td className="px-4 py-2 border border-gray-300 dark:border-gray-700 text-black dark:text-white">
                   <img
                     src={user.userPhoto}
                     alt={user.username}
                     className="w-8 h-8 rounded-full"
                   />
                 </td>
-                <td className="px-4 py-2 border border-gray-300">
+                <td className="px-4 py-2 border border-gray-300 dark:border-gray-700 text-black dark:text-white">
                   {user.username}
                 </td>
-                <td className="px-4 py-2 border border-gray-300">
+                <td className="px-4 py-2 border border-gray-300 dark:border-gray-700 text-black dark:text-white">
                   {user.coins}
                 </td>
-                <td className="px-4 py-2 border border-gray-300">
+                <td className="px-4 py-2 border border-gray-300 dark:border-gray-700 text-black dark:text-white">
                   {user.notes.length}
                 </td>
               </tr>
diff --git a/client/src/components/LikeButton/LikeButton.jsx b/client/src/components/LikeButton/LikeButton.jsx
index 4f40525..fa709d1 100644
--- a/client/src/components/LikeButton/LikeButton.jsx
+++ b/client/src/components/LikeButton/LikeButton.jsx
@@ -1,8 +1,8 @@
-// LikeButton.js
 import React, { useState, useEffect } from "react";
 import axios from "axios";
 import Heart from "react-heart";
 import { Bounce, toast } from "react-toastify";
+import 'react-toastify/dist/ReactToastify.css';
 
 const LikeButton = ({ noteId }) => {
   const [isLiked, setIsLiked] = useState(false);
@@ -53,7 +53,7 @@ const LikeButton = ({ noteId }) => {
         pauseOnHover: false,
         draggable: false,
         progress: undefined,
-        theme: "light",
+        theme: document.documentElement.classList.contains('dark') ? "dark" : "light",
         transition: Bounce,
       });
     } catch (error) {
@@ -84,7 +84,7 @@ const LikeButton = ({ noteId }) => {
         pauseOnHover: false,
         draggable: false,
         progress: undefined,
-        theme: "light",
+        theme: document.documentElement.classList.contains('dark') ? "dark" : "light",
         transition: Bounce,
       });
     } catch (error) {
diff --git a/client/src/components/Login/Login.jsx b/client/src/components/Login/Login.jsx
index cb857c1..9ad9759 100644
--- a/client/src/components/Login/Login.jsx
+++ b/client/src/components/Login/Login.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router";
 import axios from "axios";
@@ -15,7 +15,7 @@ const Login = () => {
     formState: { errors },
   } = useForm();
 
-  const [loginError, setloginError] = useState();
+  const [loginError, setLoginError] = useState();
   const { user, setUser } = useContext(UserContext);
   const [passToggle, setPassToggle] = useState("password");
   const [loading, setLoading] = useState(false);
@@ -23,11 +23,7 @@ const Login = () => {
   const navigate = useNavigate();
 
   const togglePassword = () => {
-    if (passToggle === "password") {
-      setPassToggle("text");
-    } else {
-      setPassToggle("password");
-    }
+    setPassToggle(passToggle === "password" ? "text" : "password");
   };
 
   const loginUser = async (data) => {
@@ -38,7 +34,7 @@ const Login = () => {
         if (res.data.message === "login success") {
           localStorage.setItem("token", res.data.token);
           setUser(res.data.user);
-          setloginError("");
+          setLoginError("");
           setTimeout(() => {
             navigate("/");
           }, 1000);
@@ -57,7 +53,7 @@ const Login = () => {
       })
       .catch((err) => {
         if (err.response.data.message === "user not found") {
-          setloginError("User not found");
+          setLoginError("User not found");
           toast.warning("User not found!", {
             position: "top-right",
             autoClose: 5000,
@@ -71,12 +67,12 @@ const Login = () => {
           });
           setLoading(false);
         } else if (err.response.data.message === "Please verify email first") {
-          setloginError("Please verify email first");
+          setLoginError("Please verify email first");
           localStorage.setItem("token", err.response.data.token);
           setLoading(false);
           navigate("/verifyotp");
         } else if (err.response.data.message === "Invalid credentials") {
-          setloginError("Invalid Credentials");
+          setLoginError("Invalid Credentials");
           toast.error("Invalid Credentials!", {
             position: "top-right",
             autoClose: 5000,
@@ -90,7 +86,7 @@ const Login = () => {
           });
           setLoading(false);
         } else {
-          setloginError("Something went wrong!");
+          setLoginError("Something went wrong!");
           toast.error("An error occurred!", {
             position: "top-right",
             autoClose: 5000,
@@ -113,15 +109,15 @@ const Login = () => {
 
   return (
     <>
-      <div className="flex min-h-screen flex-1 flex-col justify-center px-6 lg:px-8">
+      <div className="flex min-h-screen flex-1 flex-col justify-center px-6 lg:px-8 dark:bg-gray-900">
         <ToastContainer />
         <div className="sm:mx-auto sm:w-full sm:max-w-sm">
           <img
-            className="text-center m-auto h-[50px]"
+            className="text-center m-auto h-[50px] dark:invert"
             src={TextLogo}
             alt="ExamTime"
           />
-          <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
+          <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900 dark:text-gray-100">
             Sign in to your account
           </h2>
         </div>
@@ -137,7 +133,7 @@ const Login = () => {
               <div className="flex items-center justify-between">
                 <label
                   htmlFor="email"
-                  className="block text-sm font-medium leading-6 text-gray-900"
+                  className="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
                 >
                   Email
                 </label>
@@ -148,7 +144,7 @@ const Login = () => {
                   name="email"
                   type="text"
                   autoComplete="email"
-                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 placeholder:text-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-inset focus:ring-indigo-600 dark:bg-gray-800 sm:text-sm sm:leading-6"
                   {...register("email", {
                     validate: {
                       matchPatern: (value) =>
@@ -164,7 +160,7 @@ const Login = () => {
               <div className="flex items-center justify-between">
                 <label
                   htmlFor="password"
-                  className="block text-sm font-medium leading-6 text-gray-900"
+                  className="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
                 >
                   Password
                 </label>
@@ -175,18 +171,18 @@ const Login = () => {
                   name="password"
                   type={passToggle}
                   autoComplete="current-password"
-                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 placeholder:text-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-inset focus:ring-indigo-600 dark:bg-gray-800 sm:text-sm sm:leading-6"
                   {...register("password", {
                     validate: {
                       matchPatern: (value) =>
-                        !/^$|\s+/.test(value) || "please enter  password",
+                        !/^$|\s+/.test(value) || "please enter password",
                     },
                   })}
                 />
                 <button
                   type="button"
                   onClick={togglePassword}
-                  className="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5"
+                  className="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5 text-gray-900 dark:text-gray-100"
                 >
                   {passToggle === "text" ? (
                     <GoEyeClosed className="text-lg" />
@@ -207,7 +203,7 @@ const Login = () => {
             </div>
           </form>
 
-          <p className="mt-10 text-center text-sm text-gray-500">
+          <p className="mt-10 text-center text-sm text-gray-500 dark:text-gray-400">
             Don't have an account?{" "}
             <a
               href="/signup"
diff --git a/client/src/components/NotifcationPage/Notifcation.jsx b/client/src/components/NotifcationPage/Notifcation.jsx
index 619f160..4f7f959 100644
--- a/client/src/components/NotifcationPage/Notifcation.jsx
+++ b/client/src/components/NotifcationPage/Notifcation.jsx
@@ -11,11 +11,11 @@ import lang from "../../utils/langaugeConstant.js";
 function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
+
 const Notifcation = () => {
   const { user, setUser } = useContext(UserContext);
   const [requests, setRequests] = useState([]);
-  const langKey=useSelector((store)=>store.config.lang)
-
+  const langKey = useSelector((store) => store.config.lang);
   const navigate = useNavigate();
   const [loading, setLoading] = useState(true);
 
@@ -67,8 +67,8 @@ const Notifcation = () => {
   }
 
   return (
-    <>
-      <main className="max-w-screen-sm mx-auto m-2 p-4">
+    <div className="dark:bg-gray-900 p-2">
+      <main className="max-w-screen-sm mx-auto p-4 dark:text-gray-100">
         <h1 className="text-2xl font-semibold">{lang[langKey].Notifications}</h1>
         <div className="mt-4">
           {requests &&
@@ -78,15 +78,15 @@ const Notifcation = () => {
               .map((request, index) => (
                 <div
                   key={index}
-                  className="block px-4 py-2 text-sm text-gray-700 border-b-2"
+                  className="block px-4 py-2 text-sm text-gray-700 border-b-2 dark:text-gray-100 dark:border-gray-700"
                 >
                   <p>{request?.description}</p>
-                  <p className="text-[13px] text-end mt-1 text-blue-500">
+                  <p className="text-[13px] text-end mt-1 text-blue-500 dark:text-blue-400">
                     Requested by: @{request?.author?.username}
                   </p>
                   <a
                     href={`/upload/${request?._id}`}
-                    className="mt-1 bg-gray-800 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded"
+                    className="mt-1 bg-gray-800 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded dark:bg-gray-700 dark:hover:bg-gray-600"
                   >
                     {lang[langKey].Contribute}
                   </a>
@@ -94,7 +94,8 @@ const Notifcation = () => {
               ))}
         </div>
       </main>
-    </>
+    </div>
   );
 };
+
 export default Notifcation;
diff --git a/client/src/components/OtpVerificationPage/verifyOtp.jsx b/client/src/components/OtpVerificationPage/verifyOtp.jsx
index 0c70bdd..a10b605 100644
--- a/client/src/components/OtpVerificationPage/verifyOtp.jsx
+++ b/client/src/components/OtpVerificationPage/verifyOtp.jsx
@@ -121,32 +121,32 @@ const VerifyOtp = () => {
   };
 
   return (
-    <div className="flex flex-col items-center justify-center h-screen">
-      <img className="h-12 mb-8" src={TextLogo} alt="ExamTime" />
-      <div className="max-w-md mx-auto p-8 bg-white rounded-lg shadow-md">
-        <h1 className="text-2xl font-bold mb-4 text-center">
+    <div className="flex flex-col items-center justify-center h-screen dark:bg-gray-900">
+      <img className="h-12 mb-8 dark:invert" src={TextLogo} alt="ExamTime" />
+      <div className="max-w-md mx-auto p-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h1 className="text-2xl font-bold mb-4 text-center dark:text-gray-100">
           OTP Verification
         </h1>
         {/* <input
-          type="email"
-          placeholder="Email"
-          className="w-full px-4 py-2 mb-4 border rounded-md"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-        /> */}
+      type="email"
+      placeholder="Email"
+      className="w-full px-4 py-2 mb-4 border rounded-md"
+      value={email}
+      onChange={(e) => setEmail(e.target.value)}
+    /> */}
         <input
           type="text"
           placeholder="Enter OTP"
           maxLength="6"
           pattern="\d{6}"
           title="Enter 6-digit OTP"
-          className="w-full px-4 py-2 mb-4 border rounded-md"
+          className="w-full px-4 py-2 mb-4 border rounded-md dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600"
           value={otp}
           onChange={(e) => setOtp(e.target.value)}
         />
         <button
           onClick={handleVerification}
-          className="w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600"
+          className="w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500"
         >
           Verify OTP
         </button>
diff --git a/client/src/components/QuestionPage/AnswerPage.jsx b/client/src/components/QuestionPage/AnswerPage.jsx
index a8a045f..9727cc5 100644
--- a/client/src/components/QuestionPage/AnswerPage.jsx
+++ b/client/src/components/QuestionPage/AnswerPage.jsx
@@ -40,7 +40,6 @@ const AnswerPage = () => {
 
       // After successful upload
 
-
       navigate("/");
     } catch (error) {
       console.log(error);
@@ -53,72 +52,71 @@ const AnswerPage = () => {
 
   return (
     <>
-      <Navbar />
-        <div className="flex items-center justify-center">
-          <div className="mx-auto w-full max-w-[550px] bg-white">
-            <form
-              className="py-6 px-9"
-              onSubmit={handleSubmit((data) => {
-                answerQuestion(data);
-              })}
-            >
-              <div className="mb-5">
-                <label
-                  htmlFor="title"
-                  className="mb-3 block text-base font-small text-[#07074D]"
-                >
-                  Question
-                </label>
-                {errors.title && (
-                  <p
-                    className="text-sm text-red-500 mt-1"
-                    dangerouslySetInnerHTML={{
-                      __html: errors.title.message,
-                    }}
-                  ></p>
-                )}
-              </div>
+      <div className="flex items-center justify-center dark:bg-gray-900">
+        <div className="mx-auto w-full max-w-[550px] bg-white dark:bg-gray-800">
+          <form
+            className="py-6 px-9"
+            onSubmit={handleSubmit((data) => {
+              answerQuestion(data);
+            })}
+          >
+            <div className="mb-5">
+              <label
+                htmlFor="title"
+                className="mb-3 block text-base font-small text-[#07074D] dark:text-gray-200"
+              >
+                Question
+              </label>
+              {errors.title && (
+                <p
+                  className="text-sm text-red-500 mt-1"
+                  dangerouslySetInnerHTML={{
+                    __html: errors.title.message,
+                  }}
+                ></p>
+              )}
+            </div>
 
-              <div className="mb-5">
-                <label
-                  htmlFor="description"
-                  className="mb-3 block text-base font-small text-[#07074D]"
-                >
-                  Write your Answer
-                </label>
-                <textarea
-                  type="text"
-                  name="description"
-                  id="description"
-                  placeholder="answer of the question is...."
-                  rows={10}
-                  className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-small text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
-                  {...register("description", {
-                    required: "Description is required.",
-                    maxLength: {
-                      value: 250,
-                      message: "Description should not exceed 250 characters.",
-                    },
-                  })}
-                />
-                {errors.description && (
-                  <p
-                    className="text-sm text-red-500 mt-1"
-                    dangerouslySetInnerHTML={{
-                      __html: errors.description.message,
-                    }}
-                  ></p>
-                )}
-              </div>
+            <div className="mb-5">
+              <label
+                htmlFor="description"
+                className="mb-3 block text-base font-small text-[#07074D] dark:text-gray-200"
+              >
+                Write your Answer
+              </label>
+              <textarea
+                type="text"
+                name="description"
+                id="description"
+                placeholder="answer of the question is...."
+                rows={10}
+                className="w-full rounded-md border border-[#e0e0e0] bg-white dark:bg-gray-700 py-3 px-6 text-base font-small text-[#6B7280] dark:text-gray-200 outline-none focus:border-[#6A64F1] focus:shadow-md"
+                {...register("description", {
+                  required: "Description is required.",
+                  maxLength: {
+                    value: 250,
+                    message: "Description should not exceed 250 characters.",
+                  },
+                })}
+              />
+              {errors.description && (
+                <p
+                  className="text-sm text-red-500 mt-1"
+                  dangerouslySetInnerHTML={{
+                    __html: errors.description.message,
+                  }}
+                ></p>
+              )}
+            </div>
 
-              <div>
-                <button className="hover:shadow-form w-full rounded-md bg-[#6A64F1] py-3 px-8 text-center text-base font-semibold text-white outline-none">
-                  Submit your Answer
-                </button>
-              </div>
-            </form>
-          </div>
+            <div>
+              <button className="hover:shadow-form w-full rounded-md bg-[#6A64F1] py-3 px-8 text-center text-base font-semibold text-white outline-none dark:bg-[#6A64F1] dark:hover:bg-indigo-600">
+                Submit your Answer
+              </button>
+            </div>
+          </form>
         </div>
+      </div>
     </>
   );
 };
diff --git a/client/src/components/QuestionPage/QuestionNotification.jsx b/client/src/components/QuestionPage/QuestionNotification.jsx
index b9ad3d1..7430e28 100644
--- a/client/src/components/QuestionPage/QuestionNotification.jsx
+++ b/client/src/components/QuestionPage/QuestionNotification.jsx
@@ -65,10 +65,11 @@ const QuestionNotifcation = () => {
   }
 
   return (
-    <>
-      <Navbar />
-      <main className="max-w-screen-sm mx-auto m-2 p-4">
-        <h1 className="text-2xl font-semibold">Questions...</h1>
+    <div className="p-2 dark:bg-gray-900">
+      <main className="max-w-screen-sm mx-auto  p-4 ">
+        <h1 className="text-2xl font-semibold dark:text-gray-100">
+          Questions...
+        </h1>
         <div className="mt-4">
           {questions &&
             questions
@@ -77,15 +78,15 @@ const QuestionNotifcation = () => {
               .map((question, index) => (
                 <div
                   key={index}
-                  className="block px-4 py-2 text-sm text-gray-700 border-b-2"
+                  className="block px-4 py-2 text-sm text-gray-700 border-b-2 dark:text-gray-300 dark:border-gray-600"
                 >
                   <p>{question?.description}</p>
-                  <p className="text-[13px] text-end mt-1 text-blue-500">
+                  <p className="text-[13px] text-end mt-1 text-blue-500 dark:text-blue-400">
                     Asked by: @{question?.author?.username}
                   </p>
                   <a
                     href={`/answer/${question?._id}`}
-                    className="mt-1 bg-gray-800 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded"
+                    className="mt-1 bg-gray-800 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded dark:bg-gray-700 dark:hover:bg-gray-500"
                   >
                     Ans
                   </a>
@@ -93,7 +94,7 @@ const QuestionNotifcation = () => {
               ))}
         </div>
       </main>
-    </>
+    </div>
   );
 };
 export default QuestionNotifcation;
diff --git a/client/src/components/QuestionPage/QuestionPage.jsx b/client/src/components/QuestionPage/QuestionPage.jsx
index d724e61..8706fa3 100644
--- a/client/src/components/QuestionPage/QuestionPage.jsx
+++ b/client/src/components/QuestionPage/QuestionPage.jsx
@@ -70,40 +70,41 @@ const QuestionPage = () => {
 
   return (
     <>
-      <Navbar />
       <div>
-        <div className="flex items-center justify-center">
-          <div className="mx-auto w-full max-w-[550px] bg-white">
+        <div className="flex items-center justify-center dark:bg-gray-900">
+          <div className="mx-auto w-full max-w-[550px] bg-white dark:bg-gray-800">
             <form
               className="py-6 px-9"
               onSubmit={handleSubmit((data) => {
                 askQuestion(data);
               })}
             >
-              <h2 className="text-xl md:text-2xl mb-[50px] font-bold tracking-tight text-gray-900">
+              <h2 className="text-xl md:text-2xl mb-[50px] font-bold tracking-tight text-gray-900 dark:text-gray-100">
                 Ask Your Questions/Doubts here...
               </h2>
               <div className="mb-5">
-                <div className="flex items-center justify-between rounded-md border-[1px] h-[90px] border-black p-8 px-12">
-          <img
-            src={user?.userPhoto}
-            alt={`profile-${user?.username}`}
-            className="aspect-square w-[65px] rounded-full object-cover"
-          />
-          <div className="space-y-1">
-            <p className="text-lg font-semibold text-black">
-              {user?.username}
-            </p>
-            <p className="text-sm text-black">{user?.email}</p>
-          </div>
-      </div>
+                <div className="flex items-center justify-between rounded-md border-[1px] h-[90px] border-black dark:border-gray-600 p-8 px-12 dark:bg-gray-700">
+                  <img
+                    src={user?.userPhoto}
+                    alt={`profile-${user?.username}`}
+                    className="aspect-square w-[65px] rounded-full object-cover"
+                  />
+                  <div className="space-y-1">
+                    <p className="text-lg font-semibold text-black dark:text-gray-100">
+                      {user?.username}
+                    </p>
+                    <p className="text-sm text-black dark:text-gray-200">
+                      {user?.email}
+                    </p>
+                  </div>
+                </div>
                 <textarea
                   type="text"
                   name="description"
                   id="description"
                   placeholder="Ask a study question and get an answer in seconds...."
                   rows={10}
-                  className="w-full rounded-md border border-[#e0e0e0] bg-white my-4 py-3 px-6 text-base font-small text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
+                  className="w-full rounded-md border border-[#e0e0e0] bg-white my-4 py-3 px-6 text-base font-small text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600 dark:placeholder-gray-400"
                   {...register("description", {
                     required: "Description is required.",
                     maxLength: {
@@ -121,9 +122,8 @@ const QuestionPage = () => {
                   ></p>
                 )}
               </div>
-
               <div>
-                <button className="hover:shadow-form w-full rounded-md bg-[#6A64F1] py-3 px-8 text-center text-base font-semibold text-white outline-none">
+                <button className="hover:shadow-form w-full rounded-md bg-[#6A64F1] py-3 px-8 text-center text-base font-semibold text-white outline-none dark:bg-[#5b55e2] dark:hover:bg-[#524dc9]">
                   Click to ask
                 </button>
               </div>
diff --git a/client/src/components/RequestPage/RequestPage.jsx b/client/src/components/RequestPage/RequestPage.jsx
index 4eb7a3d..91605d1 100644
--- a/client/src/components/RequestPage/RequestPage.jsx
+++ b/client/src/components/RequestPage/RequestPage.jsx
@@ -12,7 +12,7 @@ const RequestPage = () => {
   const { user, setUser } = useContext(UserContext);
   const navigate = useNavigate();
   const [loading, setLoading] = useState(true);
-  const langKey=useSelector((store)=>store.config.lang)
+  const langKey = useSelector((store) => store.config.lang);
   const {
     register,
     handleSubmit,
@@ -72,57 +72,55 @@ const RequestPage = () => {
 
   return (
     <>
-      <div>
-        <div className="flex items-center justify-center">
-          <div className="mx-auto w-full max-w-[550px] bg-white">
-            <form
-              className="py-6 px-9"
-              onSubmit={handleSubmit((data) => {
-                addRequest(data);
-              })}
-            >
-              <h2 className="text-xl md:text-2xl mb-[50px] font-bold tracking-tight text-gray-900">
-                {lang[langKey].Requestnoteshere}...
-              </h2>
-              <div className="mb-5">
-                <label
-                  htmlFor="description"
-                  className="mb-3 block text-base font-small text-[#07074D]"
-                >
-                  {lang[langKey].Description}
-                </label>
-                <textarea
-                  type="text"
-                  name="description"
-                  id="description"
-                  placeholder={lang[langKey].RequestPlaceholder}
-                  rows={10}
-                  className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-small text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
-                  {...register("description", {
-                    required: "Description is required.",
-                    maxLength: {
-                      value: 250,
-                      message: "Description should not exceed 250 characters.",
-                    },
-                  })}
-                />
-                {errors.description && (
-                  <p
-                    className="text-sm text-red-500 mt-1"
-                    dangerouslySetInnerHTML={{
-                      __html: errors.description.message,
-                    }}
-                  ></p>
-                )}
-              </div>
+      <div className="flex items-center justify-center dark:bg-gray-900">
+        <div className="mx-auto w-full max-w-[550px] bg-white dark:bg-gray-800">
+          <form
+            className="py-6 px-9"
+            onSubmit={handleSubmit((data) => {
+              addRequest(data);
+            })}
+          >
+            <h2 className="text-xl md:text-2xl mb-[50px] font-bold tracking-tight text-gray-900 dark:text-gray-200">
+              {lang[langKey].Requestnoteshere}...
+            </h2>
+            <div className="mb-5">
+              <label
+                htmlFor="description"
+                className="mb-3 block text-base font-small text-[#07074D] dark:text-gray-200"
+              >
+                {lang[langKey].Description}
+              </label>
+              <textarea
+                type="text"
+                name="description"
+                id="description"
+                placeholder={lang[langKey].RequestPlaceholder}
+                rows={10}
+                className="w-full rounded-md border border-[#e0e0e0] bg-white dark:bg-gray-700 py-3 px-6 text-base font-small text-[#6B7280] dark:text-gray-200 outline-none focus:border-[#6A64F1] focus:shadow-md"
+                {...register("description", {
+                  required: "Description is required.",
+                  maxLength: {
+                    value: 250,
+                    message: "Description should not exceed 250 characters.",
+                  },
+                })}
+              />
+              {errors.description && (
+                <p
+                  className="text-sm text-red-500 mt-1"
+                  dangerouslySetInnerHTML={{
+                    __html: errors.description.message,
+                  }}
+                ></p>
+              )}
+            </div>
 
-              <div>
-                <button className="hover:shadow-form w-full rounded-md bg-[#6A64F1] py-3 px-8 text-center text-base font-semibold text-white outline-none">
-                  {lang[langKey].Request}
-                </button>
-              </div>
-            </form>
-          </div>
+            <div>
+              <button className="hover:shadow-form w-full rounded-md bg-[#6A64F1] py-3 px-8 text-center text-base font-semibold text-white outline-none dark:bg-[#6A64F1] dark:hover:bg-indigo-600">
+                {lang[langKey].Request}
+              </button>
+            </div>
+          </form>
         </div>
       </div>
     </>
diff --git a/client/src/components/Settings/Setting.jsx b/client/src/components/Settings/Setting.jsx
index 4054135..363afec 100644
--- a/client/src/components/Settings/Setting.jsx
+++ b/client/src/components/Settings/Setting.jsx
@@ -1,32 +1,41 @@
-import React, { useState } from 'react';
-import { SUPPORTED_LANGUAGE } from '../../utils/constants';
-import {useDispatch, useSelector} from "react-redux"
-import lang from '../../utils/langaugeConstant';
-import { changeLanguage } from '../../utils/configSlice';
+import React, { useState } from "react";
+import { SUPPORTED_LANGUAGE } from "../../utils/constants";
+import { useDispatch, useSelector } from "react-redux";
+import lang from "../../utils/langaugeConstant";
+import { changeLanguage } from "../../utils/configSlice";
+import { useTheme } from "../../Context/ThemeContext";
 
 const Settings = () => {
-
-  const langKey=useSelector((store)=>store.config.lang)
-
-  const dispatch=useDispatch()
+  const langKey = useSelector((store) => store.config.lang);
+  const dispatch = useDispatch();
+  const {toggleTheme} = useTheme();
 
   const [settings, setSettings] = useState({
-    theme: 'light',
-    email: '',
-    password: '',
+    theme: "light",
+    email: "",
+    password: "",
     notifications: true,
-    privacy: 'Public',
-    accessibility: 'Default',
-    security: 'Standard',
+    privacy: "Public",
+    accessibility: "Default",
+    security: "Standard",
   });
 
-  const handleLanguageChange=(e)=>{
-    dispatch(changeLanguage(e.target.value))
+  const handleLanguageChange = (e) => {
+    dispatch(changeLanguage(e.target.value));
+  };
+
+  const handleThemeChange = (e) => {
+    toggleTheme();
+    const { name, value } = event.target;
+    setSettings((prevSettings) => ({
+      ...prevSettings,
+      [name]: value,
+    }));
   }
 
   const handleInputChange = (event) => {
     const { name, value } = event.target;
-    setSettings(prevSettings => ({
+    setSettings((prevSettings) => ({
       ...prevSettings,
       [name]: value,
     }));
@@ -34,118 +43,119 @@ const Settings = () => {
 
   const handleToggleChange = (event) => {
     const { name, checked } = event.target;
-    setSettings(prevSettings => ({
+    setSettings((prevSettings) => ({
       ...prevSettings,
       [name]: checked,
     }));
   };
 
-  // Add more handler functions as needed
-
-  const containerStyle = {
-    maxWidth: '600px',
-    margin: '0 auto',
-    padding: '20px',
-    paddingBottom: '60px', // Adjust this value so the content doesn't overlap with the footer
-    border: '1px solid #ccc',
-    borderRadius: '8px',
-    backgroundColor: settings.theme === 'light' ? '#f9f9f9' : '#333',
-    color: settings.theme === 'light' ? '#333' : '#f9f9f9',
-    marginBottom: '100px', // This should be at least as tall as your footer to prevent overlap
-  };
-
-  const titleStyle = {
-    textAlign: 'center',
-  };
-
-  const itemStyle = {
-    marginBottom: '20px',
-  };
-
-  const labelStyle = {
-    display: 'block',
-    marginBottom: '5px',
-  };
-
-  const inputStyle = {
-    width: '100%',
-    padding: '10px',
-    border: '1px solid #ddd',
-    borderRadius: '4px',
-  };
-
-  const selectStyle = {
-    ...inputStyle,
-  };
-
-  const checkboxStyle = {
-    marginRight: '10px',
-  };
-
-  // Add more styles as needed
-
-
   return (
-    <div className={`settings-container ${settings.theme}-theme`} style={containerStyle}>
-      <h1 style={titleStyle}>{lang[langKey].setting}</h1>
+    <div className="dark:bg-gray-900 p-10">
+    <div className="max-w-2xl mx-auto p-20 border-1 border-gray-300 rounded-lg bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100 mb-100">
+      <h1 className="text-center">{lang[langKey].setting}</h1>
       <form>
         {/* Theme Selector */}
-        <div className="setting-item" style={itemStyle}>
-          <label htmlFor="theme" style={labelStyle}>{lang[langKey].theme}:</label>
-          <select name="theme" id="theme" value={settings.theme} onChange={handleInputChange} style={selectStyle}>
+        <div className="mb-4">
+          <label htmlFor="theme" className="block mb-1">
+            {lang[langKey].theme}:
+          </label>
+          <select
+            name="theme"
+            id="theme"
+            value={settings.theme}
+            onChange={handleThemeChange}
+            className="w-full p-2 border border-gray-300 rounded-md dark:text-gray-100 dark:bg-gray-700"
+          >
             <option value="light">Light</option>
             <option value="dark">Dark</option>
           </select>
         </div>
 
         {/* Email Address */}
-        <div className="setting-item" style={itemStyle}>
-          <label htmlFor="email" style={labelStyle}>{lang[langKey].EmailAddress}:</label>
-          <input type="email" name="email" id="email" value={settings.email} onChange={handleInputChange} />
+        <div className="mb-4">
+          <label htmlFor="email" className="block mb-1">
+            {lang[langKey].EmailAddress}:
+          </label>
+          <input
+            type="email"
+            name="email"
+            id="email"
+            value={settings.email}
+            onChange={handleInputChange}
+            className="w-full p-2 border border-gray-300 rounded-md dark:text-gray-100 dark:bg-gray-700"
+          />
         </div>
 
         {/* Password */}
-        <div className="setting-item" style={itemStyle}>
-          <label htmlFor="password" style={labelStyle}>{lang[langKey].Password}:</label>
-          <input type="password" name="password" id="password" value={settings.password} onChange={handleInputChange} />
+        <div className="mb-4">
+          <label htmlFor="password" className="block mb-1">
+            {lang[langKey].Password}:
+          </label>
+          <input
+            type="password"
+            name="password"
+            id="password"
+            value={settings.password}
+            onChange={handleInputChange}
+            className="w-full p-2 border border-gray-300 rounded-md dark:text-gray-100 dark:bg-gray-700"
+          />
         </div>
 
         {/* Language */}
-        <div className="setting-item" style={itemStyle}>
-          <label htmlFor="language" style={labelStyle}>{lang[langKey].Language}:</label>
-          <select name="language" id="language" value={settings.language} onChange={handleLanguageChange}>
-          {
-          SUPPORTED_LANGUAGE.map((lang)=>(
-            <option key={lang.identifier} value={lang.identifier}>{lang.name}</option>
-          ))
-        }
-            {/* Add more languages */}
+        <div className="mb-4">
+          <label htmlFor="language" className="block mb-1">
+            {lang[langKey].Language}:
+          </label>
+          <select
+            name="language"
+            id="language"
+            value={settings.language}
+            onChange={handleLanguageChange}
+            className="w-full p-2 border border-gray-300 rounded-md dark:text-gray-100 dark:bg-gray-700"
+          >
+            {SUPPORTED_LANGUAGE.map((lang) => (
+              <option key={lang.identifier} value={lang.identifier}>
+                {lang.name}
+              </option>
+            ))}
           </select>
         </div>
 
         {/* Notifications */}
-        <div className="setting-item">
-          <label htmlFor="notifications">{lang[langKey].Notifications}:</label>
-          <input type="checkbox" name="notifications" id="notifications" checked={settings.notifications} onChange={handleToggleChange} />
+        <div className="mb-4">
+          <label htmlFor="notifications" className="block mb-1">
+            {lang[langKey].Notifications}:
+          </label>
+          <input
+            type="checkbox"
+            name="notifications"
+            id="notifications"
+            checked={settings.notifications}
+            onChange={handleToggleChange}
+            className="mr-2 dark:text-gray-100"
+          />
         </div>
 
         {/* Privacy */}
-        <div className="setting-item">
-          <label htmlFor="privacy">{lang[langKey].ProfilePrivacy}:</label>
-          <select name="privacy" id="privacy" value={settings.privacy} onChange={handleInputChange}>
+        <div className="mb-4">
+          <label htmlFor="privacy" className="block mb-1">
+            {lang[langKey].ProfilePrivacy}:
+          </label>
+          <select
+            name="privacy"
+            id="privacy"
+            value={settings.privacy}
+            onChange={handleInputChange}
+            className="w-full p-2 border border-gray-300 rounded-md dark:text-gray-100 dark:bg-gray-700"
+          >
             <option value="Public">{lang[langKey].Public}</option>
             <option value="Private">{lang[langKey].Private}</option>
           </select>
         </div>
-
-        {/* Accessibility */}
-        {/* <div className="setting-item">
-          <label htmlFor="accessibility">Accessibility:</label>
-          <select name="accessibility" id="accessibility" value={settings.accessibility} onChange={handleInputChange}>
-          </select>
-        </div> */}
-        </form>
-        </div>
-)}
+      </form>
+    </div>
+    </div>
+  );
+};
 
 export default Settings;
diff --git a/client/src/components/Signup/Signup.jsx b/client/src/components/Signup/Signup.jsx
index 0be901c..bd66430 100644
--- a/client/src/components/Signup/Signup.jsx
+++ b/client/src/components/Signup/Signup.jsx
@@ -68,11 +68,7 @@ const Signup = () => {
   };
 
   const togglePassword = () => {
-    if (passToggle === "password") {
-      setPassToggle("text");
-    } else {
-      setPassToggle("password");
-    }
+    setPassToggle((prevState) => (prevState === "password" ? "text" : "password"));
   };
 
   const handleUsernameChange = async (event) => {
@@ -100,14 +96,14 @@ const Signup = () => {
 
   return (
     <>
-      <div className="flex min-h-screen flex-1 flex-col justify-center px-6 lg:px-8">
+      <div className="flex min-h-screen flex-1 flex-col justify-center px-6 lg:px-8 dark:bg-gray-900">
         <div className="sm:mx-auto sm:w-full sm:max-w-sm">
           <img
-            className="text-center m-auto h-[50px]"
+            className="text-center m-auto h-[50px] dark:invert"
             src={TextLogo}
             alt="ExamTime"
           />
-          <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
+          <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900 dark:text-gray-100">
             Sign up to an account
           </h2>
         </div>
@@ -122,7 +118,7 @@ const Signup = () => {
             <div>
               <label
                 htmlFor="email"
-                className="block text-sm font-medium leading-6 text-gray-900"
+                className="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
               >
                 Email address
               </label>
@@ -130,7 +126,7 @@ const Signup = () => {
                 <input
                   name="email"
                   autoComplete="username"
-                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-gray-700 dark:text-gray-100 dark:placeholder:text-gray-400 dark:ring-gray-600 dark:focus:ring-indigo-500"
                   {...register("email", {
                     validate: {
                       matchPatern: (value) =>
@@ -154,7 +150,7 @@ const Signup = () => {
               <div className="flex items-center justify-between">
                 <label
                   htmlFor="username"
-                  className="block text-sm font-medium leading-6 text-gray-900"
+                  className="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
                 >
                   Username
                 </label>
@@ -164,7 +160,7 @@ const Signup = () => {
                   id="username"
                   name="username"
                   type="text"
-                  className="block w-full pr-5 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                  className="block w-full pr-5 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-gray-700 dark:text-gray-100 dark:placeholder:text-gray-400 dark:ring-gray-600 dark:focus:ring-indigo-500"
                   {...register("username", {
                     validate: (value) =>
                       !usernameExists || "Username is already taken",
@@ -175,38 +171,24 @@ const Signup = () => {
                   <p
                     className={`text-sm ${
                       usernameExists ? "text-red-500" : "text-green-500"
-                    }  `}
+                    }`}
                   >
-                    {checkUsernameLoading
-                      ? ""
-                      : usernameExists == true
+                    {usernameExists
                       ? "Username taken"
-                      : usernameExists == false
-                      ? "Username available"
-                      : ""}
+                      : "Username available"}
                   </p>
                 ) : (
-                  <p className="text-sm text-gray-500 ">Checking...</p> // instead of empty space showing checking will not decrease the height
+                  <p className="text-sm text-gray-500">Checking...</p>
                 )}
                 <span
-                  className={`absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5 ${
-                    checkUsernameLoading
-                      ? ""
-                      : usernameExists == true
-                      ? "mb-[20px]"
-                      : usernameExists == false
-                      ? "mb-[20px]"
-                      : ""
-                  }`}
+                  className={`absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5`}
                 >
                   {checkUsernameLoading ? (
                     <MoonLoader color="#000000" size={15} />
-                  ) : usernameExists == true ? (
-                    <ImCross />
-                  ) : usernameExists == false ? (
-                    <TiTick />
+                  ) : usernameExists ? (
+                    <ImCross class="dark:text-white"/>
                   ) : (
-                    ""
+                    <TiTick class="dark:text-white"/>
                   )}
                 </span>
               </div>
@@ -216,7 +198,7 @@ const Signup = () => {
               <div className="flex items-center justify-between">
                 <label
                   htmlFor="password"
-                  className="block text-sm font-medium leading-6 text-gray-900"
+                  className="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
                 >
                   Password
                 </label>
@@ -227,7 +209,7 @@ const Signup = () => {
                   name="password"
                   type={passToggle}
                   autoComplete="current-password"
-                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-gray-700 dark:text-gray-100 dark:placeholder:text-gray-400 dark:ring-gray-600 dark:focus:ring-indigo-500"
                   {...register("password", {
                     validate: {
                       matchPatern: (value) =>
@@ -244,9 +226,9 @@ const Signup = () => {
                   className="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5"
                 >
                   {passToggle === "text" ? (
-                    <GoEyeClosed className="text-lg" />
+                    <GoEyeClosed className="text-lg text-gray-700 dark:text-gray-100" />
                   ) : (
-                    <GoEye className="text-lg" />
+                    <GoEye className="text-lg text-gray-700 dark:text-gray-100" />
                   )}
                 </button>
               </div>
@@ -264,7 +246,7 @@ const Signup = () => {
               <div className="flex items-center justify-between">
                 <label
                   htmlFor="confirm_password"
-                  className="block text-sm font-medium leading-6 text-gray-900"
+                  className="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
                 >
                   Confirm Password
                 </label>
@@ -275,12 +257,12 @@ const Signup = () => {
                   name="confirm_password"
                   type={passToggle}
                   autoComplete="current-password"
-                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-gray-700 dark:text-gray-100 dark:placeholder:text-gray-400 dark:ring-gray-600 dark:focus:ring-indigo-500"
                   {...register("confirm_password", {
                     required: "Enter confirm password",
                     validate: (val) => {
-                      if (watch("password") != val) {
-                        return "Your passwords do no match";
+                      if (watch("password") !== val) {
+                        return "Your passwords do not match";
                       }
                     },
                   })}
@@ -296,7 +278,7 @@ const Signup = () => {
             <div>
               <button
                 type="submit"
-                className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
               >
                 Sign up
               </button>
@@ -306,11 +288,11 @@ const Signup = () => {
             </div>
           </form>
 
-          <p className="mt-5 text-center text-sm text-gray-500">
+          <p className="mt-5 text-center text-sm text-gray-500 dark:text-gray-400">
             Already have an account?{" "}
             <a
               href="/login"
-              className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
+              className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
             >
               Sign In
             </a>
@@ -320,4 +302,5 @@ const Signup = () => {
     </>
   );
 };
-export default Signup;
+
+export default Signup;
\ No newline at end of file
diff --git a/client/src/components/UploadPage/UploadPage.jsx b/client/src/components/UploadPage/UploadPage.jsx
index d550e14..c5935bd 100644
--- a/client/src/components/UploadPage/UploadPage.jsx
+++ b/client/src/components/UploadPage/UploadPage.jsx
@@ -26,7 +26,7 @@ const UploadPage = () => {
   const [loading, setLoading] = useState(true);
   const [subjects, setSubjects] = useState([]);
   const [fileUploadProgress, setFileUploadProgress] = useState(0);
-  const langKey=useSelector((store)=>store.config.lang)
+  const langKey = useSelector((store) => store.config.lang);
 
   const {
     register,
@@ -262,301 +262,300 @@ const UploadPage = () => {
 
   return (
     <>
-      <div>
-        <div className="flex items-center justify-center">
-          <div className="mx-auto w-full max-w-[550px] bg-white">
-            <form
-              className="py-6 px-9"
-              onSubmit={handleSubmit((data) => {
-                uploadNotes(data);
-              })}
-            >
-              <div className="mb-5">
-                <label
-                  htmlFor="title"
-                  className="mb-3 block text-base font-small text-[#07074D]"
-                >
-                  {lang[langKey].Title}
-                </label>
-                <input
-                  type="text"
-                  name="title"
-                  id="title"
-                  placeholder={lang[langKey].uploadPlaceholder}
-                  className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-small text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
-                  {...register("title", {
-                    required: "Title is required.",
-                    minLength: {
-                      value: 8,
-                      message: "Title should be a minimum of 8 characters.",
-                    },
-                  })}
-                />
-                {errors.title && (
-                  <p
-                    className="text-sm text-red-500 mt-1"
-                    dangerouslySetInnerHTML={{
-                      __html: errors.title.message,
-                    }}
-                  ></p>
-                )}
-              </div>
+      <div className="flex items-center justify-center dark:bg-gray-900">
+        <div className="mx-auto w-full max-w-[550px] bg-white dark:bg-gray-800">
+          <form
+            className="py-6 px-9"
+            onSubmit={handleSubmit((data) => {
+              uploadNotes(data);
+            })}
+          >
+            <div className="mb-5">
+              <label
+                htmlFor="title"
+                className="mb-3 block text-base font-small text-[#07074D] dark:text-gray-200"
+              >
+                {lang[langKey].Title}
+              </label>
+              <input
+                type="text"
+                name="title"
+                id="title"
+                placeholder={lang[langKey].uploadPlaceholder}
+                className="w-full rounded-md border border-[#e0e0e0] bg-white dark:bg-gray-700 py-3 px-6 text-base font-small text-[#6B7280] dark:text-gray-200 outline-none focus:border-[#6A64F1] focus:shadow-md"
+                {...register("title", {
+                  required: "Title is required.",
+                  minLength: {
+                    value: 8,
+                    message: "Title should be a minimum of 8 characters.",
+                  },
+                })}
+              />
+              {errors.title && (
+                <p
+                  className="text-sm text-red-500 mt-1"
+                  dangerouslySetInnerHTML={{
+                    __html: errors.title.message,
+                  }}
+                ></p>
+              )}
+            </div>
 
-              <div className="mb-5">
-                <label
-                  htmlFor="description"
-                  className="mb-3 block text-base font-small text-[#07074D]"
-                >
-                  {lang[langKey].Description}
-                </label>
-                <textarea
-                  type="text"
-                  name="description"
-                  id="description"
-                  placeholder={lang[langKey].uploadDescPlace}
-                  rows={10}
-                  className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-small text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
-                  {...register("description", {
-                    required: "Description is required.",
-                    maxLength: {
-                      value: 250,
-                      message: "Description should not exceed 250 characters.",
-                    },
-                  })}
-                />
-                {errors.description && (
-                  <p
-                    className="text-sm text-red-500 mt-1"
-                    dangerouslySetInnerHTML={{
-                      __html: errors.description.message,
-                    }}
-                  ></p>
-                )}
-              </div>
+            <div className="mb-5">
+              <label
+                htmlFor="description"
+                className="mb-3 block text-base font-small text-[#07074D] dark:text-gray-200"
+              >
+                {lang[langKey].Description}
+              </label>
+              <textarea
+                type="text"
+                name="description"
+                id="description"
+                placeholder={lang[langKey].uploadDescPlace}
+                rows={10}
+                className="w-full rounded-md border border-[#e0e0e0] bg-white dark:bg-gray-700 py-3 px-6 text-base font-small text-[#6B7280] dark:text-gray-200 outline-none focus:border-[#6A64F1] focus:shadow-md"
+                {...register("description", {
+                  required: "Description is required.",
+                  maxLength: {
+                    value: 250,
+                    message: "Description should not exceed 250 characters.",
+                  },
+                })}
+              />
+              {errors.description && (
+                <p
+                  className="text-sm text-red-500 mt-1"
+                  dangerouslySetInnerHTML={{
+                    __html: errors.description.message,
+                  }}
+                ></p>
+              )}
+            </div>
 
-              <div className="mb-5">
-                <label
-                  htmlFor="subject"
-                  className="mb-3 block text-base font-small text-[#07074D]"
-                >
-                  {lang[langKey].Subject}
-                </label>
-                <select
+            <div className="mb-5">
+              <label
+                htmlFor="subject"
+                className="mb-3 block text-base font-small text-[#07074D] dark:text-gray-200"
+              >
+                {lang[langKey].Subject}
+              </label>
+              <select
+                type="text"
+                name="subject"
+                id="subject"
+                placeholder={lang[langKey].uploadPlaceholder}
+                className="w-full rounded-md border border-[#e0e0e0] bg-white dark:bg-gray-700 py-3 px-6 text-base font-small text-[#6B7280] dark:text-gray-200 outline-none focus:border-[#6A64F1] focus:shadow-md"
+                {...register("subject", {
+                  required: "Please select a subject.",
+                })}
+              >
+                {subjects &&
+                  subjects.map((subject) => (
+                    <option key={subject._id} value={subject._id}>
+                      {subject.subjectName}
+                    </option>
+                  ))}
+              </select>
+              {errors.subject && (
+                <p
+                  className="text-sm text-red-500 mt-1"
+                  dangerouslySetInnerHTML={{
+                    __html: errors.subject.message,
+                  }}
+                ></p>
+              )}
+            </div>
+
+            <div className="mb-5 mt-10">
+              <label
+                htmlFor="subject"
+                className="mb-1 block text-base text-[14px] text-red-500 dark:text-red-400"
+              >
+                {lang[langKey].noSubUp}
+              </label>
+              <div className="flex flex-col md:flex-row justify-center gap-5">
+                <input
                   type="text"
                   name="subject"
                   id="subject"
-                  placeholder={lang[langKey].uploadPlaceholder}
-                  className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-small text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
-                  {...register("subject", {
-                    required: "Please select a subject.",
-                  })}
+                  value={addSubject_}
+                  onChange={(e) => setAddSubject_(e.target.value)}
+                  placeholder={lang[langKey].AddSubject}
+                  className="rounded-md border border-[#e0e0e0] bg-white dark:bg-gray-700 py-3 px-6 text-base font-small text-[#6B7280] dark:text-gray-200 outline-none focus:border-[#6A64F1] focus:shadow-md"
+                ></input>
+                <div
+                  className="hover:shadow-form rounded-md cursor-pointer bg-[#6A64F1] dark:bg-indigo-600 py-3 px-8 text-center text-base font-semibold text-white outline-none"
+                  onClick={addSubject}
                 >
-                  {subjects &&
-                    subjects.map((subject) => (
-                      <option key={subject._id} value={subject._id}>
-                        {subject.subjectName}
-                      </option>
-                    ))}
-                </select>
-                {errors.subject && (
-                  <p
-                    className="text-sm text-red-500 mt-1"
-                    dangerouslySetInnerHTML={{
-                      __html: errors.subject.message,
-                    }}
-                  ></p>
-                )}
-              </div>
-
-              <div className="mb-5 mt-10">
-                <label
-                  htmlFor="subject"
-                  className="mb-1 block text-base text-[14px] text-red-500"
-                >
-                  {lang[langKey].noSubUp}
-                </label>
-                <div className="flex flex-col md:flex-row justify-center gap-5">
-                  <input
-                    type="text"
-                    name="subject"
-                    id="subject"
-                    value={addSubject_}
-                    onChange={(e) => setAddSubject_(e.target.value)}
-                    placeholder={lang[langKey].AddSubject}
-                    className="rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-small text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
-                  ></input>
-                  <div
-                    className="hover:shadow-form rounded-md cursor-pointer bg-[#6A64F1] py-3 px-8 text-center text-base font-semibold text-white outline-none"
-                    onClick={addSubject}
-                  >
-                    {lang[langKey].AddSubject}
-                  </div>
+                  {lang[langKey].AddSubject}
                 </div>
               </div>
+            </div>
 
-              <div className="mb-5">
-                <label
-                  htmlFor="course"
-                  className="mb-3 block text-base font-small text-[#07074D]"
-                >
-                  {lang[langKey].Course}
-                </label>
+            <div className="mb-5">
+              <label
+                htmlFor="course"
+                className="mb-3 block text-base font-small text-[#07074D] dark:text-gray-200"
+              >
+                {lang[langKey].Course}
+              </label>
+              <input
+                type="text"
+                name="course"
+                id="course"
+                placeholder="Btech."
+                className="w-full rounded-md border border-[#e0e0e0] bg-white dark:bg-gray-700 py-3 px-6 text-base font-small text-[#6B7280] dark:text-gray-200 outline-none focus:border-[#6A64F1] focus:shadow-md"
+                {...register("course", {
+                  required:
+                    "Please enter a course for which these notes are for.",
+                })}
+              />
+              {errors.course && (
+                <p
+                  className="text-sm text-red-500 mt-1"
+                  dangerouslySetInnerHTML={{
+                    __html: errors.course.message,
+                  }}
+                ></p>
+              )}
+            </div>
+
+            <div className="mb-5">
+              <label
+                htmlFor="year"
+                className="mb-3 block text-base font-small text-[#07074D] dark:text-gray-200"
+              >
+                {lang[langKey].Year}
+              </label>
+              <input
+                type="number"
+                name="year"
+                id="year"
+                placeholder={lang[langKey].Year}
+                className="w-full rounded-md border border-[#e0e0e0] bg-white dark:bg-gray-700 py-3 px-6 text-base font-small text-[#6B7280] dark:text-gray-200 outline-none focus:border-[#6A64F1] focus:shadow-md"
+                {...register("year", {
+                  required: "Enter a year of college these notes are for.",
+                })}
+              />
+              {errors.year && (
+                <p
+                  className="text-sm text-red-500 mt-1"
+                  dangerouslySetInnerHTML={{
+                    __html: errors.year.message,
+                  }}
+                ></p>
+              )}
+            </div>
+
+            <div className="mb-6 pt-4 cursor-pointer">
+              <label className="mb-5 block text-xl font-semibold text-[#07074D] dark:text-gray-200">
+                {lang[langKey].UploadFile}
+              </label>
+
+              <div className="mb-8 cursor-pointer">
                 <input
-                  type="text"
-                  name="course"
-                  id="course"
-                  placeholder="Btech."
-                  className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-small text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
-                  {...register("course", {
-                    required:
-                      "Please enter a course for which these notes are for.",
-                  })}
+                  type="file"
+                  name="file"
+                  id="file"
+                  onChange={handleFileChange}
+                  className="sr-only cursor-pointer"
+                  multiple={false}
+                  accept="application/pdf"
                 />
-                {errors.course && (
-                  <p
-                    className="text-sm text-red-500 mt-1"
-                    dangerouslySetInnerHTML={{
-                      __html: errors.course.message,
-                    }}
-                  ></p>
-                )}
-              </div>
-
-              <div className="mb-5">
                 <label
-                  htmlFor="year"
-                  className="mb-3 block text-base font-small text-[#07074D]"
+                  htmlFor="file"
+                  className="relative flex min-h-[200px] items-center justify-center rounded-md border border-dashed border-[#e0e0e0] dark:border-gray-600 p-12 text-center"
                 >
-                  {lang[langKey].Year}
+                  <div className="cursor-pointer">
+                    <span className="mb-2 block text-xl font-semibold text-[#07074D] dark:text-gray-200">
+                      {selectedFile.name || "Drop files here"}
+                    </span>
+                    <span className="mb-2 block text-base font-small text-[#6B7280] dark:text-gray-200">
+                      Or
+                    </span>
+                    <span className="inline-flex rounded border border-[#e0e0e0] dark:border-gray-600 py-2 px-7 text-base font-small text-[#07074D] dark:text-gray-200">
+                      Browse
+                    </span>
+                  </div>
                 </label>
-                <input
-                  type="number"
-                  name="year"
-                  id="year"
-                  placeholder={lang[langKey].Year}
-                  className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-small text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
-                  {...register("year", {
-                    required: "Enter a year of college these notes are for.",
-                  })}
-                />
-                {errors.year && (
-                  <p
-                    className="text-sm text-red-500 mt-1"
-                    dangerouslySetInnerHTML={{
-                      __html: errors.year.message,
-                    }}
-                  ></p>
-                )}
               </div>
 
-              <div className="mb-6 pt-4 cursor-pointer">
-                <label className="mb-5 block text-xl font-semibold text-[#07074D]">
-                  {lang[langKey].UploadFile}
-                </label>
-
-                <div className="mb-8 cursor-pointer">
-                  <input
-                    type="file"
-                    name="file"
-                    id="file"
-                    onChange={handleFileChange}
-                    className="sr-only cursor-pointer"
-                    multiple={false}
-                    accept="application/pdf"
-                  />
-                  <label
-                    htmlFor="file"
-                    className="relative flex min-h-[200px] items-center justify-center rounded-md border border-dashed border-[#e0e0e0] p-12 text-center"
-                  >
-                    <div className="cursor-pointer">
-                      <span className="mb-2 block text-xl font-semibold text-[#07074D]">
-                        {selectedFile.name || "Drop files here"}
-                      </span>
-                      <span className="mb-2 block text-base font-small text-[#6B7280]">
-                        Or
-                      </span>
-                      <span className="inline-flex rounded border border-[#e0e0e0] py-2 px-7 text-base font-small text-[#07074D]">
-                        Browse
-                      </span>
-                    </div>
-                  </label>
-                </div>
-
-                {selectedFile && isFileSeleted ? (
-                  ""
-                ) : (
-                  <p className="text-sm text-red-500 mt-1">
-                    {lang[langKey].selectfile} <br /> {lang[langKey].Allowedformat} - .pdf
-                  </p>
-                )}
-
-                {selectedFile.name && (
-                  <div className="mb-5 rounded-md bg-[#F5F7FB] py-4 px-8">
-                    <div className="flex items-center justify-between">
-                      <span className="truncate pr-3 text-base font-small text-[#07074D]">
-                        {selectedFile?.name || "No file selected"}
-                      </span>
-                      <button
-                        className="text-[#07074D]"
-                        onClick={() => setSelectedFile([])}
-                      >
-                        <svg
-                          width="10"
-                          height="10"
-                          viewBox="0 0 10 10"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            fillRule="evenodd"
-                            clipRule="evenodd"
-                            d="M0.279337 0.279338C0.651787 -0.0931121 1.25565 -0.0931121 1.6281 0.279338L9.72066 8.3719C10.0931 8.74435 10.0931 9.34821 9.72066 9.72066C9.34821 10.0931 8.74435 10.0931 8.3719 9.72066L0.279337 1.6281C-0.0931125 1.25565 -0.0931125 0.651788 0.279337 0.279338Z"
-                            fill="currentColor"
-                          />
-                          <path
-                            fillRule="evenodd"
-                            clipRule="evenodd"
-                            d="M0.279337 9.72066C-0.0931125 9.34821 -0.0931125 8.74435 0.279337 8.3719L8.3719 0.279338C8.74435 -0.0931127 9.34821 -0.0931123 9.72066 0.279338C10.0931 0.651787 10.0931 1.25565 9.72066 1.6281L1.6281 9.72066C1.25565 10.0931 0.651787 10.0931 0.279337 9.72066Z"
-                            fill="currentColor"
-                          />
-                        </svg>
-                      </button>
-                    </div>
+              {selectedFile && isFileSeleted ? (
+                ""
+              ) : (
+                <p className="text-sm text-red-500 dark:text-red-400 mt-1">
+                  {lang[langKey].selectfile} <br />{" "}
+                  {lang[langKey].Allowedformat} - .pdf
+                </p>
+              )}
 
-                    {fileUploadProgress != 100 ? (
-                      <div className="relative mt-5 h-[6px] w-full rounded-lg bg-[#E2E5EF]">
-                        <div
-                          style={{ width: `${fileUploadProgress}%` }}
-                          className={`hover:shadow-form rounded-md bg-[#6A64F1] py-1 px-8 text-center text-base font-semibold text-white outline-none`}
-                        ></div>
-                      </div>
-                    ) : (
+              {selectedFile.name && (
+                <div className="mb-5 rounded-md bg-[#F5F7FB] dark:bg-gray-700 py-4 px-8">
+                  <div className="flex items-center justify-between">
+                    <span className="truncate pr-3 text-base font-small text-[#07074D] dark:text-gray-200">
+                      {selectedFile?.name || "No file selected"}
+                    </span>
+                    <button
+                      className="text-[#07074D] dark:text-gray-200"
+                      onClick={() => setSelectedFile([])}
+                    >
                       <svg
-                        xmlns="http://www.w3.org/2000/svg"
+                        width="10"
+                        height="10"
+                        viewBox="0 0 10 10"
                         fill="none"
-                        viewBox="0 0 24 24"
-                        strokeWidth={1.5}
-                        stroke="green"
-                        className="w-6 h-6"
+                        xmlns="http://www.w3.org/2000/svg"
                       >
                         <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          d="m4.5 12.75 6 6 9-13.5"
+                          fillRule="evenodd"
+                          clipRule="evenodd"
+                          d="M0.279337 0.279338C0.651787 -0.0931121 1.25565 -0.0931121 1.6281 0.279338L9.72066 8.3719C10.0931 8.74435 10.0931 9.34821 9.72066 9.72066C9.34821 10.0931 8.74435 10.0931 8.3719 9.72066L0.279337 1.6281C-0.0931125 1.25565 -0.0931125 0.651788 0.279337 0.279338Z"
+                          fill="currentColor"
+                        />
+                        <path
+                          fillRule="evenodd"
+                          clipRule="evenodd"
+                          d="M0.279337 9.72066C-0.0931125 9.34821 -0.0931125 8.74435 0.279337 8.3719L8.3719 0.279338C8.74435 -0.0931127 9.34821 -0.0931123 9.72066 0.279338C10.0931 0.651787 10.0931 1.25565 9.72066 1.6281L1.6281 9.72066C1.25565 10.0931 0.651787 10.0931 0.279337 9.72066Z"
+                          fill="currentColor"
                         />
                       </svg>
-                    )}
+                    </button>
                   </div>
-                )}
-              </div>
 
-              <div>
-                <button className="hover:shadow-form w-full rounded-md bg-[#6A64F1] py-3 px-8 text-center text-base font-semibold text-white outline-none">
-                  {lang[langKey].UploadNotes}
-                </button>
-              </div>
-            </form>
-          </div>
+                  {fileUploadProgress != 100 ? (
+                    <div className="relative mt-5 h-[6px] w-full rounded-lg bg-[#E2E5EF] dark:bg-gray-600">
+                      <div
+                        style={{ width: `${fileUploadProgress}%` }}
+                        className="hover:shadow-form rounded-md bg-[#6A64F1] dark:bg-indigo-600 py-1 px-8 text-center text-base font-semibold text-white outline-none"
+                      ></div>
+                    </div>
+                  ) : (
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      strokeWidth={1.5}
+                      stroke="green"
+                      className="w-6 h-6"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="m4.5 12.75 6 6 9-13.5"
+                      />
+                    </svg>
+                  )}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <button className="hover:shadow-form w-full rounded-md bg-[#6A64F1] dark:bg-indigo-600 py-3 px-8 text-center text-base font-semibold text-white outline-none">
+                {lang[langKey].UploadNotes}
+              </button>
+            </div>
+          </form>
         </div>
       </div>
     </>
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index a75c3a9..84c72f3 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -2,6 +2,7 @@
 import { skeleton } from "@skeletonlabs/tw-plugin";
 
 export default {
+  darkMode: 'class',
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {},