diff --git a/src/app/(main)/client.tsx b/src/app/(main)/client.tsx
index b91ad229..53bf9242 100644
--- a/src/app/(main)/client.tsx
+++ b/src/app/(main)/client.tsx
@@ -23,9 +23,9 @@ export default function Client() {
         <div className="flex flex-col justify-center items-center h-screen">
             {projectsQuery.isLoading && (
                 <div className="flex items-center">
-                    <div className="w-4 h-4 mr-2 rounded-full bg-gray-900 animate-pulse"></div>
-                    <div className="w-4 h-4 mr-2 rounded-full bg-gray-900 animate-pulse"></div>
-                    <div className="w-4 h-4 rounded-full bg-gray-900 animate-pulse"></div>
+                    <div className="w-4 h-4 mr-2 rounded-full bg-primary animate-pulse"></div>
+                    <div className="w-4 h-4 mr-2 rounded-full bg-primary animate-pulse"></div>
+                    <div className="w-4 h-4 rounded-full bg-primary animate-pulse"></div>
                 </div>
             )}
 
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index e1e631d6..f5c9b002 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -46,7 +46,7 @@ export default function Page() {
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-8">
           <Link
             href={`/admin/projects/new`}
-            className="border border-dashed border-gray-300 hover:bg-secondary bg-primary rounded-lg p-4"
+            className="border border-dashed border-secondaryActive hover:bg-secondary bg-primary rounded-lg p-4"
           >
             <i className="far fa-plus" /> New Project
           </Link>
@@ -56,11 +56,11 @@ export default function Page() {
                 <Link
                   href={`/admin/projects/${project.external_id}`}
                   key={i}
-                  className="border border-gray-300 hover:bg-secondary bg-primary rounded-lg p-4"
+                  className="border border-secondaryActive hover:bg-secondary bg-primary rounded-lg p-4"
                 >
                   {project.title}
                   {project.is_default && (
-                    <span className="text-xs ml-2 bg-secondaryActive text-gray-500 px-2 py-1 rounded-full">
+                    <span className="text-xs ml-2 bg-secondaryActive text-secondaryActive px-2 py-1 rounded-full">
                       Default
                     </span>
                   )}
@@ -86,7 +86,7 @@ export default function Page() {
         <button
           className={`mt-4 px-4 py-2 rounded-md focus:outline-none ${projectsQuery.hasNextPage
             ? "bg-green-400 text-primary"
-            : "bg-secondaryActive text-gray-400 cursor-not-allowed"
+            : "bg-secondaryActive text-secondaryActive cursor-not-allowed"
             }`}
           onClick={() => projectsQuery.fetchNextPage()}
           disabled={!projectsQuery.hasNextPage}
diff --git a/src/app/admin/projects/[project_id]/chats/[chat_id]/page.tsx b/src/app/admin/projects/[project_id]/chats/[chat_id]/page.tsx
index 688b80df..489ef67b 100644
--- a/src/app/admin/projects/[project_id]/chats/[chat_id]/page.tsx
+++ b/src/app/admin/projects/[project_id]/chats/[chat_id]/page.tsx
@@ -40,7 +40,7 @@ export default function Page({
               {chats?.username && (
                 <Link
                   href={`/admin/users/${chats?.username}`}
-                  className="bg-slate-200 flex items-center gap-2 justify-center hover:bg-slate-300 m-2 p-2 rounded-xl px-6"
+                  className="bg-primary flex items-center gap-2 justify-center hover:bg-slate-300 m-2 p-2 rounded-xl px-6"
                 >
                   <i className="fa fa-user"></i>
                   {chats?.username}
@@ -54,11 +54,11 @@ export default function Page({
                 chats?.chats.map((chat: any, i: number) => (
                   <div key={i}>
                     {chat.messageType === 1 ? (
-                      <div className="border border-gray-300 hover:bg-secondary bg-primary rounded-lg p-4">
+                      <div className="border border-secondaryActive hover:bg-secondary bg-primary rounded-lg p-4">
                         {chat.message}
                       </div>
                     ) : (
-                      <div className="border border-gray-300 hover:bg-secondary bg-secondaryActive rounded-lg p-4">
+                      <div className="border border-secondaryActive hover:bg-secondary bg-secondaryActive rounded-lg p-4">
                         {chat.message}
                       </div>
                     )}
@@ -73,7 +73,7 @@ export default function Page({
           </div>
         </div>
       ) : (
-        <div className="flex justify-center text-gray-500 text-2xl font-medium mt-6">
+        <div className="flex justify-center text-primaryLightfont text-2xl font-medium mt-6">
           Chat not found
         </div>
       )}
diff --git a/src/app/admin/projects/[project_id]/chats/page.tsx b/src/app/admin/projects/[project_id]/chats/page.tsx
index 8986bdb3..91ccb903 100644
--- a/src/app/admin/projects/[project_id]/chats/page.tsx
+++ b/src/app/admin/projects/[project_id]/chats/page.tsx
@@ -36,7 +36,7 @@ export default function Page({ params }: { params: { project_id: string } }) {
   const chatTableBody = () => {
     if (chatsList.length > 0 && chatsList[0].count !== 0) {
       return (
-        <tbody className="bg-primary divide-y divide-secondaryActive text-gray-700">
+        <tbody className="bg-primary divide-y divide-secondaryActive text-primaryLightfont">
           {chatsList.map((chats) => {
             return chats.results.map((chat: any, index: number) => {
               return (
@@ -59,9 +59,9 @@ export default function Page({ params }: { params: { project_id: string } }) {
       );
     } else {
       return (
-        <tbody className="bg-primary divide-y divide-secondaryActive text-sm text-gray-700">
+        <tbody className="bg-primary divide-y divide-secondaryActive text-sm text-primaryLightfont">
           <tr className="bg-primary border-b border-x hover:bg-secondary w-full">
-            <td colSpan={100} className="p-4 text-center text-gray-400">
+            <td colSpan={100} className="p-4 text-center text-primaryLightfont">
               No chats found
             </td>
           </tr>
diff --git a/src/app/admin/projects/[project_id]/page.tsx b/src/app/admin/projects/[project_id]/page.tsx
index 9687722e..648a671f 100644
--- a/src/app/admin/projects/[project_id]/page.tsx
+++ b/src/app/admin/projects/[project_id]/page.tsx
@@ -98,7 +98,7 @@ export default function Page({ params }: { params: { project_id: string } }) {
         <div className="flex gap-2 items-center">
           <h1 className="text-3xl font-black">{project?.title}</h1>
           {project?.is_default && (
-            <span className="text-xs ml-2 bg-secondaryActive text-gray-500 px-2 py-1 rounded-full">
+            <span className="text-xs ml-2 bg-secondaryActive text-primaryLightfont px-2 py-1 rounded-full">
               Default
             </span>
           )}
@@ -106,7 +106,7 @@ export default function Page({ params }: { params: { project_id: string } }) {
         <div className="flex justify-center items-center">
           <Link
             href={`/admin/projects/${project_id}/chats`}
-            className="bg-slate-200 flex items-center gap-2 justify-center hover:bg-slate-300 m-2 p-2 rounded-xl px-6"
+            className="bg-primary flex items-center gap-2 justify-center hover:bg-slate-300 m-2 p-2 rounded-xl px-6"
           >
             <i className="fa fa-comments"></i>
             Chats
@@ -123,7 +123,7 @@ export default function Page({ params }: { params: { project_id: string } }) {
                 : `/admin/projects/${project_id}/documents/${document.external_id}`
             }
             key={i}
-            className="border border-gray-300 hover:bg-secondary bg-primary rounded-lg p-4 flex items-center gap-2 justify-between"
+            className="border border-secondaryActive hover:bg-secondary bg-primary rounded-lg p-4 flex items-center gap-2 justify-between"
           >
             <div className="flex items-center gap-2">
               <i
@@ -133,7 +133,7 @@ export default function Page({ params }: { params: { project_id: string } }) {
               {document.title}
             </div>
             {document.uploading && (
-              <div className="text-xs text-gray-600 inline-flex items-center gap-2">
+              <div className="text-xs text-primaryLightfont inline-flex items-center gap-2">
                 <i className="fa fa-spinner-third fa-spin"></i>
                 Uploading...
               </div>
@@ -143,7 +143,7 @@ export default function Page({ params }: { params: { project_id: string } }) {
         {!project?.archived && (
           <Link
             href={`/admin/projects/${project_id}/documents/new`}
-            className="border border-dashed border-gray-300 hover:bg-secondary bg-primary rounded-lg p-4"
+            className="border border-dashed border-secondaryActive hover:bg-secondary bg-primary rounded-lg p-4"
           >
             <i className="far fa-plus" /> New Document
           </Link>
@@ -177,7 +177,7 @@ export default function Page({ params }: { params: { project_id: string } }) {
         </Button>
         <Button
           variant="secondary"
-          className="w-full bg-slate-200 enabled:hover:bg-slate-300"
+          className="w-full bg-primary enabled:hover:bg-slate-300"
           onClick={() => setShowSetDefaultModal(true)}
           disabled={project?.is_default}
         >
@@ -193,7 +193,7 @@ export default function Page({ params }: { params: { project_id: string } }) {
           <p>Are you sure you want to delete this project?</p>
           <div className="flex flex-col md:flex-row gap-2 justify-end">
             <button
-              className="bg-gray-300 hover:bg-gray-400 px-4 p-2 rounded-lg"
+              className="bg-primary hover:bg-gray-400 px-4 p-2 rounded-lg"
               onClick={() => setShowDeleteModel(false)}
             >
               Cancel
@@ -222,7 +222,7 @@ export default function Page({ params }: { params: { project_id: string } }) {
           </p>
           <div className="flex flex-col md:flex-row gap-2 justify-end">
             <button
-              className="bg-gray-300 hover:bg-gray-400 px-4 p-2 rounded-lg"
+              className="bg-primary hover:bg-gray-400 px-4 p-2 rounded-lg"
               onClick={() => setShowArchiveModal(false)}
             >
               Cancel
@@ -248,7 +248,7 @@ export default function Page({ params }: { params: { project_id: string } }) {
           <p>Are you sure you want to set this project as default?</p>
           <div className="flex flex-col md:flex-row gap-2 justify-end">
             <button
-              className="bg-gray-300 hover:bg-gray-400 px-4 p-2 rounded-lg"
+              className="bg-primary hover:bg-gray-400 px-4 p-2 rounded-lg"
               onClick={() => setShowSetDefaultModal(false)}
             >
               Cancel
diff --git a/src/app/admin/tests/[testsuite_id]/page.tsx b/src/app/admin/tests/[testsuite_id]/page.tsx
index 19f6a55a..134bbc33 100644
--- a/src/app/admin/tests/[testsuite_id]/page.tsx
+++ b/src/app/admin/tests/[testsuite_id]/page.tsx
@@ -18,7 +18,6 @@ import {
   TestRunStatus,
 } from "@/types/test";
 import { useInfiQuery } from "@/utils/hooks/useInfiQuery";
-// import CSVReader from "react-csv-reader";
 import CSVReader from "../../../../components/csvReader";
 export default function Page({ params }: { params: { testsuite_id: string } }) {
   const router = useRouter();
@@ -41,7 +40,6 @@ export default function Page({ params }: { params: { testsuite_id: string } }) {
       });
     },
   });
-  const [questionsCsv, setQuestionsCsv] = useState<any>([]);
   const testQuestions: TestQuestion[] =
     TestQuestionsQuery?.data?.pages?.flatMap((page) => page.results) ?? [];
 
@@ -917,7 +915,7 @@ export default function Page({ params }: { params: { testsuite_id: string } }) {
                 language: e.target.value,
               })
             }
-            className="block w-full bg-white border border-gray-300 hover:border-gray-500 px-4 py-2 rounded leading-tight focus:outline-none focus:border-blue-500 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+            className="block w-full bg-primary border border-gray-300 hover:border-gray-500 px-4 py-2 rounded leading-tight focus:outline-none focus:border-blue-500 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
           >
             {supportedLanguages.map((language) => (
               <option key={language.value} value={language.value}>
@@ -999,4 +997,4 @@ export default function Page({ params }: { params: { testsuite_id: string } }) {
       <Toaster />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/admin/tests/[testsuite_id]/runs/[testrun_id]/page.tsx b/src/app/admin/tests/[testsuite_id]/runs/[testrun_id]/page.tsx
index 859df869..469fed9e 100644
--- a/src/app/admin/tests/[testsuite_id]/runs/[testrun_id]/page.tsx
+++ b/src/app/admin/tests/[testsuite_id]/runs/[testrun_id]/page.tsx
@@ -325,7 +325,7 @@ export default function Page({
           </Button>
         </div>
       </div>
-      <div className="border border-gray-300 bg-primary p-4 rounded-lg my-4">
+      <div className="border border-secondaryActive bg-primary p-4 rounded-lg my-4">
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <div>
             <div className="flex flex-col justify-end">
@@ -407,27 +407,27 @@ export default function Page({
           </div>
         </div>
         <div className="mt-4">
-          <b className="text-xs text-gray-500">Prompt:</b>
+          <b className="text-xs text-primaryLightfont">Prompt:</b>
           <br />
           <div className="whitespace-pre-line">
             {testRun?.project_object.prompt}
           </div>
         </div>
       </div>
-      <div className="grid grid-cols-1 sm:grid-cols-5 gap-4 border border-gray-300 bg-primary p-3 rounded-lg my-4">
+      <div className="grid grid-cols-1 sm:grid-cols-5 gap-4 border border-secondaryActive bg-primary p-3 rounded-lg my-4">
         {feedbackStats.total !== -1 ? (
           <>
             {" "}
             <div className="flex flex-col items-center">
               <div className="text-md font-bold mb-2">Total Feedback</div>
-              <div className="text-2xl font-bold text-gray-700 mb-1">
+              <div className="text-2xl font-bold text-primaryLightfont mb-1">
                 {feedbackStats.total}
               </div>
             </div>
             <div className="flex flex-col items-center">
               <div className="text-md font-bold mb-2">Average Feedback</div>
-              <div className="text-sm font-bold text-gray-700 mb-1">
-                <p className="text-gray-700">
+              <div className="text-sm font-bold text-primaryLightfont mb-1">
+                <p className="text-primaryLightfont">
                   {feedbackStats.total === 0 ? "-" : ""}
                   {ratingOptions.map(
                     (rating: any) =>
@@ -455,7 +455,7 @@ export default function Page({
             </div>
             <div className="flex flex-col items-center">
               <div className="text-md font-bold mb-2">Neutral Feedback</div>
-              <div className="text-2xl font-bold text-gray-500 mb-1">
+              <div className="text-2xl font-bold text-primaryLightfont mb-1">
                 {feedbackStats.neutral}
               </div>
             </div>
@@ -492,7 +492,7 @@ export default function Page({
               <h3 className="text-md font-bold mb-2 text-center sm:text-left">
                 AI Answer:
               </h3>
-              <p className="text-gray-700">{test.answer}</p>
+              <p className="text-primaryLightfont">{test.answer}</p>
               {test?.references && test?.references.length > 0 && (
                 <div className="flex gap-2 mt-3 items-center pb-4">
                   <p className="mr-1 text-sm italic">References:</p>
@@ -511,14 +511,14 @@ export default function Page({
                           }
                           target="_blank"
                           rel="noreferrer"
-                          className="text-xs bg-secondaryActive text-gray-700 px-2 py-0.5 rounded-md hover:bg-gray-300"
+                          className="text-xs bg-secondaryActive text-primaryLightfont px-2 py-0.5 rounded-md hover:bg-gray-300"
                         >
                           {doc.title}
                         </a>
                       );
                     else if (doc.document_type === DocumentType.TEXT)
                       return (
-                        <div className="text-xs bg-secondaryActive text-gray-700 px-2 py-0.5 rounded-md hover:bg-gray-300">
+                        <div className="text-xs bg-secondaryActive text-primaryLightfont px-2 py-0.5 rounded-md hover:bg-gray-300">
                           {doc.title}
                         </div>
                       );
@@ -531,7 +531,7 @@ export default function Page({
           <div className="border-b border-secondaryActive my-4"></div>
           {test.test_question?.documents?.map((document) => (
             <div
-              className="flex items-center mb-2 border border-gray-300 rounded-lg bg-primary"
+              className="flex items-center mb-2 border border-secondaryActive rounded-lg bg-primary"
               key={document.external_id}
             >
               <Link
@@ -541,8 +541,8 @@ export default function Page({
                 className="flex-grow flex items-center hover:bg-slate-200 py-1 px-3 rounded-md justify-between"
               >
                 <div className="flex items-center justify-center">
-                  <i className="fas fa-paperclip mr-2 text-gray-600"></i>
-                  <div className="text-gray-700">{document.title}</div>
+                  <i className="fas fa-paperclip mr-2 text-primaryLightfont"></i>
+                  <div className="text-primaryLightfont">{document.title}</div>
                 </div>
                 <div className="w-1/2 h-1/2">
                   <img
@@ -565,7 +565,7 @@ export default function Page({
                 Cosine Similarity:
               </h3>
               <p
-                className={`font-bold text-center sm:text-left text-xl text-gray-700 ${test.cosine_sim >= 0.5 ? "text-green-500" : "text-red-500"
+                className={`font-bold text-center sm:text-left text-xl text-primaryLightfont ${test.cosine_sim >= 0.5 ? "text-green-500" : "text-red-500"
                   }`}
               >
                 {test.cosine_sim.toFixed(3)}
@@ -576,7 +576,7 @@ export default function Page({
                 BLEU Score:
               </h3>
               <p
-                className={`font-bold text-center sm:text-left text-xl text-gray-700 ${test.bleu_score >= 0.5 ? "text-green-500" : "text-red-500"
+                className={`font-bold text-center sm:text-left text-xl text-primaryLightfont ${test.bleu_score >= 0.5 ? "text-green-500" : "text-red-500"
                   }`}
               >
                 {test.bleu_score.toFixed(3)}
@@ -588,7 +588,7 @@ export default function Page({
               <h3 className="text-md text-center sm:text-left font-bold mb-2">
                 Total Feedback:
               </h3>
-              <p className="font-bold text-center sm:text-left text-xl text-gray-700">
+              <p className="font-bold text-center sm:text-left text-xl text-primaryLightfont">
                 {test.feedback?.length || "-"}
               </p>
             </div>
@@ -597,8 +597,8 @@ export default function Page({
                 <h3 className="text-md font-bold mb-2 text-center sm:text-left">
                   Average Feedback:
                 </h3>
-                <div className="text-sm font-bold text-gray-700 mb-1 flex justify-center sm:block">
-                  <p className="text-gray-700">
+                <div className="text-sm font-bold text-primaryLightfont mb-1 flex justify-center sm:block">
+                  <p className="text-primaryLightfont">
                     {test.feedback?.length === 0 ? "-" : ""}
                     {ratingOptions.map(
                       (rating) =>
@@ -672,12 +672,12 @@ export default function Page({
               <>
                 <div>
                   <h3 className="text-md font-bold mb-2">AI Answer:</h3>
-                  <p className="text-gray-700">{feedbackTestResult.answer}</p>
+                  <p className="text-primaryLightfont">{feedbackTestResult.answer}</p>
                 </div>
                 <hr className="my-2 bg-secondaryActive" />
                 <div>
                   <h3 className="text-md font-bold mb-2">Human Answer:</h3>
-                  <p className="text-gray-700">
+                  <p className="text-primaryLightfont">
                     {feedbackTestResult.human_answer}
                   </p>
                 </div>
@@ -707,13 +707,13 @@ export default function Page({
                             <div className="mr-2">
                               <i className="fa-regular fa-clock"></i>
                             </div>
-                            <div className="text-gray-700">
+                            <div className="text-primaryLightfont">
                               {formatDate(feedback.created_at)}
                             </div>
                           </div>
                         </div>
                         <div className="flex items-center">
-                          <p className="text-gray-700">
+                          <p className="text-primaryLightfont">
                             {ratingOptions.map(
                               (rating) =>
                                 rating.id === feedback.rating && (
@@ -726,14 +726,14 @@ export default function Page({
                                 ),
                             )}
                           </p>
-                          <p className="text-gray-700">{feedback.notes}</p>
+                          <p className="text-primaryLightfont">{feedback.notes}</p>
                         </div>
                       </div>
                     ))}
                   {!feedbackItemsLoading &&
                     feedbackItems &&
                     feedbackItems.length == 0 && (
-                      <div className="text-center text-gray-700">
+                      <div className="text-center text-primaryLightfont">
                         No feedback yet
                       </div>
                     )}
@@ -751,14 +751,14 @@ export default function Page({
                     <div className="mr-2">
                       <i className="fa-duotone fa-star"></i>
                     </div>
-                    <div className="text-gray-700">Rating</div>
+                    <div className="text-primaryLightfont">Rating</div>
                   </div>
                   <Rating setRating={setFeedbackRating} />
                   <div className="flex items-center">
                     <div className="mr-2">
                       <i className="fa-duotone fa-comment"></i>
                     </div>
-                    <div className="text-gray-700">Note</div>
+                    <div className="text-primaryLightfont">Note</div>
                   </div>
                   <div className="flex items-center my-2 ml-2 justify-center">
                     <TextArea
diff --git a/src/app/admin/tests/page.tsx b/src/app/admin/tests/page.tsx
index bb116d3c..59952890 100644
--- a/src/app/admin/tests/page.tsx
+++ b/src/app/admin/tests/page.tsx
@@ -21,7 +21,7 @@ export default function Page() {
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-8">
           <Link
             href={`/admin/tests/new`}
-            className="border border-dashed border-gray-300 hover:bg-secondary bg-primary rounded-lg p-4"
+            className="border border-dashed border-secondaryActive hover:bg-secondary bg-primary rounded-lg p-4"
           >
             <i className="far fa-plus" /> New Test Suite
           </Link>
@@ -29,7 +29,7 @@ export default function Page() {
             <Link
               href={`/admin/tests/${testSuite.external_id}`}
               key={i}
-              className="border border-gray-300 hover:bg-secondary bg-primary rounded-lg p-4"
+              className="border border-secondaryActive hover:bg-secondary bg-primary rounded-lg p-4"
             >
               {testSuite.name}
             </Link>
diff --git a/src/app/admin/users/[username]/page.tsx b/src/app/admin/users/[username]/page.tsx
index 761c9fcd..1d16f342 100644
--- a/src/app/admin/users/[username]/page.tsx
+++ b/src/app/admin/users/[username]/page.tsx
@@ -76,7 +76,7 @@ const Page = ({ params }: { params: { username: string } }) => {
       >
         <div>
           <div className="flex gap-4 items-center">
-            <p className="mb-2 text-sm text-gray-500">Full name</p>
+            <p className="mb-2 text-sm text-primaryLightfont">Full name</p>
             {updateError && updateError.error.full_name && (
               <p className="text text-sm text-red-500 mb-2">
                 ({updateError.error.full_name})
@@ -96,7 +96,7 @@ const Page = ({ params }: { params: { username: string } }) => {
         </div>
         <div>
           <div className="flex gap-4 items-center">
-            <p className="mb-2 text-sm text-gray-500">Email</p>
+            <p className="mb-2 text-sm text-primaryLightfont">Email</p>
             {updateError && updateError.error.email && (
               <p className="text text-sm text-red-500 mb-2">
                 ({updateError.error.email})
@@ -114,7 +114,7 @@ const Page = ({ params }: { params: { username: string } }) => {
           />
         </div>
         <div>
-          <p className="mb-2 text-sm text-gray-500">Roles</p>
+          <p className="mb-2 text-sm text-primaryLightfont">Roles</p>
           <div className="flex flex-col md:flex-row gap-6 md:items-center">
             <label className="relative inline-flex items-center cursor-pointer">
               <input
@@ -125,8 +125,9 @@ const Page = ({ params }: { params: { username: string } }) => {
                 checked={userState.is_staff}
                 className="sr-only peer"
               />
-              <div className="w-11 h-6 bg-secondaryActive peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-primary after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-primary after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
-              <span className="ml-3 text-sm font-medium text-gray-900">
+              <div className="w-11 h-6 bg-secondaryActive peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-primary after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-primary after:border-secondaryActive after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
+              <span className="ml-3 text-sm font-medium text-primaryLightfont"
+              >
                 Is Admin
               </span>
             </label>
@@ -142,8 +143,8 @@ const Page = ({ params }: { params: { username: string } }) => {
                 checked={userState.is_reviewer}
                 className="sr-only peer"
               />
-              <div className="w-11 h-6 bg-secondaryActive peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-primary after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-primary after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
-              <span className="ml-3 text-sm font-medium text-gray-900">
+              <div className="w-11 h-6 bg-secondaryActive peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-primary after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-primary after:border-secondaryActive after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
+              <span className="ml-3 text-sm font-medium text-primaryLightfont">
                 Is Reviewer
               </span>
             </label>
@@ -159,8 +160,8 @@ const Page = ({ params }: { params: { username: string } }) => {
                 checked={userState.allow_key}
                 className="sr-only peer"
               />
-              <div className="w-11 h-6 bg-secondaryActive peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-primary after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-primary after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
-              <span className="ml-3 text-sm font-medium text-gray-900">
+              <div className="w-11 h-6 bg-secondaryActive peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-primary after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-primary after:border-secondaryActive after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
+              <span className="ml-3 text-sm font-medium text-primaryLightfont">
                 Allow key
               </span>
             </label>
diff --git a/src/app/admin/users/page.tsx b/src/app/admin/users/page.tsx
index 2769fde3..86d92b96 100644
--- a/src/app/admin/users/page.tsx
+++ b/src/app/admin/users/page.tsx
@@ -21,7 +21,7 @@ const RoleButton = (
     <button
       {...rest}
       className={twMerge(
-        `w-full sm:w-fit flex justify-center gap-1 border px-2 py-1 rounded-full items-center ${color === "green" && "hover:border-green-400"
+        `w-full sm:w-fit flex justify-center gap-1 border border-secondaryActive px-2 py-1 rounded-full items-center ${color === "green" && "hover:border-green-400"
         } ${color === "blue" && "hover:border-blue-400"} ${color === "orange" && "hover:border-orange-400"
         } transition-all ${state &&
         `${color === "green" && "bg-green-400"} ${color === "blue" && "bg-blue-400"
@@ -139,8 +139,8 @@ export default function Page() {
           hasMore={userQuery.hasNextPage ? true : false}
           useWindow={false}
         >
-          <table className="w-full text-sm text-left ">
-            <thead className="text-xs text-gray-700 uppercase bg-secondary border border-gray-300 rounded-lg">
+          <table className="w-full text-sm text-left mt-4">
+            <thead className="text-xs text-primaryLightfont uppercase bg-secondary border border-secondaryActive rounded-lg">
               <tr>
                 <th scope="col" className="px-6 py-3">
                   User
@@ -167,7 +167,7 @@ export default function Page() {
                       >
                         <td
                           scope="row"
-                          className="px-6 py-2 font-medium text-gray-900 "
+                          className="px-6 py-2 font-medium text-primaryLightfont"
                         >
                           <div className="flex flex-col">
                             <div className="flex gap-2 items-center">
@@ -176,7 +176,7 @@ export default function Page() {
                               </span>
                               {user.allow_key && (
                                 <i
-                                  className="fa fa-key text-xs text-gray-400"
+                                  className="fa fa-key text-xs text-primaryLightfont"
                                   aria-hidden="true"
                                 />
                               )}
@@ -216,7 +216,7 @@ export default function Page() {
             ) : (
               <tbody>
                 <tr className="bg-primary border-b border-x hover:bg-secondary w-full">
-                  <td colSpan={100} className="p-4 text-center text-gray-400">
+                  <td colSpan={100} className="p-4 text-center text-primaryLightfont">
                     No users found
                   </td>
                 </tr>
diff --git a/src/components/forms/documentform.tsx b/src/components/forms/documentform.tsx
index fe6a297f..77d20a5b 100644
--- a/src/components/forms/documentform.tsx
+++ b/src/components/forms/documentform.tsx
@@ -112,7 +112,7 @@ export default function DocumentForm(props: {
               <iframe src={doc.file as any} className="w-full h-96" />
             </div>
           ) : doc.text_content ? (
-            <div className="flex flex-col gap-2 bg-[#fbfffd] h-full border border-secondaryActive rounded-md p-4 ">
+            <div className="flex flex-col gap-2 bg-primary h-full border border-secondaryActive rounded-md p-4 ">
               {doc.document_type && (
                 <div className="flex gap-2 items-center">
                   <i
@@ -137,7 +137,7 @@ export default function DocumentForm(props: {
             <>
               {document.document_type === DocumentType.FILE && (
                 <>
-                  <div className="bg-[#f4fef8] rounded-md border-2 border-green-500 h-full">
+                  <div className="bg-primary rounded-md border-2 border-green-500 h-full">
                     <label
                       htmlFor="file-picker"
                       className="text-green-600 text-center flex gap-2 items-center justify-center h-full cursor-pointer outline-none"
@@ -181,7 +181,7 @@ export default function DocumentForm(props: {
                   <TextArea
                     rows={7}
                     placeholder="Corpus text"
-                    className="bg-[#fbfffd] rounded-md text-black"
+                    className="bg-primary rounded-md text-black"
                     value={document.text_content}
                     onChange={(e) =>
                       setDocument({ ...document, text_content: e.target.value })
@@ -199,7 +199,7 @@ export default function DocumentForm(props: {
                   </div>
                   <Input
                     placeholder="Corpus URL"
-                    className="bg-[#fbfffd] rounded-md text-black"
+                    className="bg-primary rounded-md text-black"
                     value={document.text_content}
                     onChange={(e) =>
                       setDocument({ ...document, text_content: e.target.value })
@@ -210,7 +210,7 @@ export default function DocumentForm(props: {
                 </>
               )}
               {!document.document_type && (
-                <div className="bg-[#fbfffd] border-2 h-full flex justify-center items-center border-gray-300 rounded-md text-gray-500">
+                <div className="bg-primary border-2 h-full flex justify-center items-center border-secondaryActive rounded-md text-secondaryActive">
                   <span className="text-xl font-medium">
                     Select a document type
                   </span>
@@ -229,7 +229,7 @@ export default function DocumentForm(props: {
           <p>Are you sure you want to delete this document?</p>
           <div className="flex flex-col md:flex-row gap-2 justify-end">
             <button
-              className="bg-gray-300 hover:bg-gray-400 px-4 p-2 rounded-lg"
+              className="bg-primary hover:bg-gray-400 px-4 p-2 rounded-lg"
               onClick={() => setShowDeleteModal(false)}
             >
               Cancel
diff --git a/src/components/forms/projectform.tsx b/src/components/forms/projectform.tsx
index 2b49b08c..1b93d568 100644
--- a/src/components/forms/projectform.tsx
+++ b/src/components/forms/projectform.tsx
@@ -100,14 +100,15 @@ export default function ProjectForm(props: {
         className="flex flex-col gap-2"
         encType="multipart/form-data"
       >
-        <p className="text-sm text-gray-500">Title</p>
+        <p className="text-sm text-primaryLightfont">Title</p>
         <Input
           placeholder="Title"
           value={project.title}
           onChange={(e) => setProject({ ...project, title: e.target.value })}
           errors={errors?.title}
+          className="text-primaryLightfont bg-primary border border-secondaryActive"
         />
-        <p className="text-sm text-gray-500">Description</p>
+        <p className="text-sm text-primaryLightfont">Description</p>
         <TextArea
           placeholder="Description"
           value={project.description}
@@ -115,10 +116,11 @@ export default function ProjectForm(props: {
             setProject({ ...project, description: e.target.value })
           }
           errors={errors?.description}
+          className="bg-primary shadow-hidden"
         />
 
         <div className="flex gap-1">
-          <p className="text-sm text-gray-500">Prompt</p>
+          <p className="text-sm text-primaryLightfont">Prompt</p>
           {project.assistant_id && (
             <p className="text-sm text-red-500">(Currently set by assistant)</p>
           )}
@@ -126,7 +128,7 @@ export default function ProjectForm(props: {
 
         <TextArea
           placeholder="Prompt"
-          className="h-56"
+          className="h-56 bg-primary shadow-hidden"
           value={prompt}
           onChange={(e) => setPrompt(e.target.value)}
           errors={errors?.prompt}
@@ -134,7 +136,7 @@ export default function ProjectForm(props: {
         {project.assistant_id ? (
           <>
             <div className="flex gap-1">
-              <p className="text-sm text-gray-500">OpenAI Key</p>
+              <p className="text-sm text-primaryLightfont">OpenAI Key</p>
               <p className="text-sm text-red-500">
                 (Assistant uses the global key)
               </p>
@@ -147,7 +149,7 @@ export default function ProjectForm(props: {
           </>
         ) : !project.key_set ? (
           <>
-            <p className="text-sm text-gray-500">OpenAI Key</p>
+            <p className="text-sm text-primaryLightfont">OpenAI Key</p>
             <Input
               placeholder="OpenAI Key"
               value={project.open_ai_key ?? ""}
@@ -159,7 +161,7 @@ export default function ProjectForm(props: {
           </>
         ) : (
           <>
-            <p className="text-sm text-gray-500">OpenAI Key</p>
+            <p className="text-sm text-primaryLightfont">OpenAI Key</p>
             <div className="flex w-full items-center">
               <Input
                 disabled={true}
@@ -177,7 +179,7 @@ export default function ProjectForm(props: {
             </div>
           </>
         )}
-        <p className="text-sm text-gray-500">Speech to Text engine</p>
+        <p className="text-sm text-primaryLightfont">Speech to Text engine</p>
         <select
           className="border border-secondaryActive w-full bg-primary rounded-lg relative transition-all flex ring-0 ring-green-500 focus-within:ring-2 focus-within:ring-offset-1 p-3"
           value={project.stt_engine ?? 1}
@@ -191,7 +193,7 @@ export default function ProjectForm(props: {
             </option>
           ))}
         </select>
-        <p className="text-sm text-gray-500">Text to Speech engine</p>
+        <p className="text-sm text-primaryLightfont">Text to Speech engine</p>
         <select
           className="border border-secondaryActive w-full bg-primary rounded-lg relative transition-all flex ring-0 ring-green-500 focus-within:ring-2 focus-within:ring-offset-1 p-3"
           value={project.tts_engine ?? 1}
@@ -207,7 +209,7 @@ export default function ProjectForm(props: {
         </select>
         <div>
           <div className="flex gap-1">
-            <p className="text-sm text-gray-500">Model</p>
+            <p className="text-sm text-primaryLightfont">Model</p>
             {project.assistant_id && (
               <p className="text-sm text-red-500">
                 (Currently set by assistant)
@@ -232,7 +234,7 @@ export default function ProjectForm(props: {
             )}
           </select>
         </div>
-        <p className="text-sm text-gray-500">Assistant</p>
+        <p className="text-sm text-primaryLightfont">Assistant</p>
         <div className="flex gap-3">
           <select
             className="border border-secondaryActive w-full bg-primary rounded-lg relative transition-all flex ring-0 ring-green-500 focus-within:ring-2 focus-within:ring-offset-1 p-3"
@@ -275,9 +277,9 @@ export default function ProjectForm(props: {
             </Button>
           )}
         </div>
-        <p className="text-sm text-gray-500">Preset Questions</p>
+        <p className="text-sm text-primaryLightfont">Preset Questions</p>
         {project.preset_questions?.length === 0 && (
-          <p className="text-sm text-gray-500">
+          <p className="text-sm text-primaryLightfont">
             No preset questions. Add some below.
           </p>
         )}
@@ -290,7 +292,7 @@ export default function ProjectForm(props: {
             <h1 className="block font-medium text-lg">Add New Assistant</h1>
           </div>
           <div className="p-3">
-            <label className="block font-medium text-gray-700 mb-2">Name</label>
+            <label className="block font-medium text-primaryLightfont mb-2">Name</label>
             <input
               type="text"
               onChange={(e) =>
@@ -299,10 +301,10 @@ export default function ProjectForm(props: {
                   name: e.target.value,
                 })
               }
-              className="block w-full bg-primary border border-gray-300 hover:border-gray-500 px-4 py-2 rounded leading-tight focus:outline-none focus:border-blue-500 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+              className="block w-full bg-primary border border-secondaryActive hover:border-gray-500 px-4 py-2 rounded leading-tight focus:outline-none focus:border-blue-500 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
             />
 
-            <label className="block font-medium text-gray-700 mb-2 mt-4">
+            <label className="block font-medium text-primaryLightfont mb-2 mt-4">
               Instructions
             </label>
             <textarea
@@ -313,10 +315,10 @@ export default function ProjectForm(props: {
                 })
               }
               placeholder={project.prompt}
-              className="block w-full bg-primary border border-gray-300 hover:border-gray-500 px-4 py-2 rounded leading-tight focus:outline-none focus:border-blue-500 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+              className="block w-full bg-primary border border-secondaryActive hover:border-gray-500 px-4 py-2 rounded leading-tight focus:outline-none focus:border-blue-500 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
             />
 
-            <label className="block font-medium text-gray-700 mb-2 mt-4">
+            <label className="block font-medium text-primaryLightfont mb-2 mt-4">
               Model
             </label>
             <select
diff --git a/src/components/forms/testsuiteform.tsx b/src/components/forms/testsuiteform.tsx
index 6edb8d54..17cd5db7 100644
--- a/src/components/forms/testsuiteform.tsx
+++ b/src/components/forms/testsuiteform.tsx
@@ -1,4 +1,3 @@
-import { Project } from "@/types/project";
 import { useState } from "react";
 import { Button, Input, TextArea } from "../ui/interactive";
 import { useRouter } from "next/navigation";
diff --git a/src/components/sidebar/adminSidebar.tsx b/src/components/sidebar/adminSidebar.tsx
index 5f528431..063c163b 100644
--- a/src/components/sidebar/adminSidebar.tsx
+++ b/src/components/sidebar/adminSidebar.tsx
@@ -4,7 +4,7 @@ import { storageAtom } from "@/store";
 import { useAtom } from "jotai";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-
+// import x from "../../../public/device-laptop"
 export default function AdminSideBar() {
   const router = useRouter();
   const pathname = usePathname();
@@ -43,7 +43,6 @@ export default function AdminSideBar() {
         setStorage({ ...storage, user: undefined, auth_token: undefined }),
     },
   ];
-
   return (
     <>
       <div className="bg-primary bg-cover bg-top w-64 shrink-0 flex flex-col justify-between border-r border-gray-300 h-screen">
@@ -60,8 +59,9 @@ export default function AdminSideBar() {
             {links.map((link, idx) => (
               <Link
                 href={link.url}
-                className={`flex gap-4 px-4 py-2 w-full group hover:bg-secondary border border-secondaryActive rounded-lg overflow-hidden items-center ${pathname === link.url && "bg-secondary"
-                  }`}
+                className={`flex gap-4 px-4 py-2 w-full group hover:bg-secondary border border-secondaryActive rounded-lg overflow-hidden items-center ${
+                  pathname === link.url && "bg-secondary"
+                }`}
                 key={idx}
               >
                 <i className={`fal fa-${link.icon}`} />
@@ -81,9 +81,28 @@ export default function AdminSideBar() {
                 <i className={`fal fa-${button.icon}`} />
               </button>
             ))}
+              <select
+                value={storage.theme}
+                onChange={(e) => {
+                  setStorage({
+                    ...storage,
+                    theme:
+                      Number(e.target.value) === 2
+                        ? undefined
+                        : Number(e.target.value),
+                  });
+                }}
+                className="border border-secondary rounded-lg bg-primary p-2 px-4"
+              >
+                <option value={2}>System</option>
+                <option value={0}>
+                  Light
+                </option>
+                <option value={1}>Dark</option>
+              </select>
           </div>
         </div>
       </div>
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/ui/interactive.tsx b/src/components/ui/interactive.tsx
index f2c45fb0..79e6286b 100644
--- a/src/components/ui/interactive.tsx
+++ b/src/components/ui/interactive.tsx
@@ -24,7 +24,7 @@ export function Input(
 
   return (
     <div className={parentDivClassName}>
-      <div className="border border-secondaryActive w-full p-0.5 bg-primary rounded-lg overflow-hidden relative transition ring-0 ring-indigo-500 ring-offset-primary outline-0 focus-within:ring-2 focus-within:ring-offset-1">
+      <div className="border border-secondaryActive bg-primary w-full p-0.5 rounded-lg overflow-hidden relative transition ring-0 ring-indigo-500 ring-offset-primary outline-0 focus-within:ring-2 focus-within:ring-offset-1">
         {loading && <div className="absolute inset-0 bg-black/10" />}
         {left}
         <input
@@ -54,13 +54,13 @@ export function TextArea(
 
   return (
     <>
-      <div className="border border-secondaryActive w-full p-0.5 bg-primary rounded-lg overflow-hidden relative transition ring-0 ring-indigo-500 focus-within:ring-2 focus-within:ring-offset-1">
+      <div className="border bg-primary border-secondaryActive w-full p-0.5  rounded-lg overflow-hidden relative transition ring-0 ring-indigo-500 focus-within:ring-2 focus-within:ring-offset-1">
         {loading && <div className="absolute inset-0 bg-black/10" />}
         {left}
         <textarea
           {...rest}
           className={twMerge(
-            "border-none bg-transparent w-full p-3 outline-none",
+            "bg-transparent w-full p-3 outline-none",
             className,
           )}
           disabled={loading}
@@ -156,7 +156,7 @@ export function Dropdown(
         <select
           {...rest}
           className={twMerge(
-            "border-none bg-transparent w-full p-3 outline-none",
+            "border-none bg-primary w-full p-3 outline-none",
             className,
           )}
           disabled={loading}
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
index 86b71ce4..5136768e 100644
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -1,4 +1,6 @@
+import { backIn } from "framer-motion";
 import { Errors } from "./interactive";
+import { BackgroundControls } from "shadergradient/controls";
 
 export default function Slider(props: {
   max: number;
@@ -15,7 +17,7 @@ export default function Slider(props: {
 
   return (
     <div>
-      <div className="grid grid-cols-3 items-center text-xs text-gray-500">
+      <div className="grid grid-cols-3 items-center text-xs text-primaryLightfont">
         <div>{props.left}</div>
         <div className="text-center text-base text-green-500">{value}</div>
         <div className="text-right">{props.right}</div>
@@ -28,7 +30,8 @@ export default function Slider(props: {
         onChange={(e) => onChange(parseFloat(e.target.value))}
         step={step}
         disabled={disabled}
-        className="w-full slider"
+        className="w-full"
+        style={{backgroundColor:"green"}}
       />
       <Errors errors={props.errors} />
     </div>
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 26b45333..0ad04caf 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -87,7 +87,7 @@ const request = async (
     storage = JSON.parse(cookie?.value || "{}");
     console.log("server");
   }
-  console.log("storage", storage);
+  console.log("storage", storage.preferedTheme);
   const localToken = storage.auth_token;
   const auth =
     isAuth === false ||