diff --git a/ui/app/layout.tsx b/ui/app/layout.tsx
index 87144cf..124a3b5 100644
--- a/ui/app/layout.tsx
+++ b/ui/app/layout.tsx
@@ -34,7 +34,7 @@ export default function RootLayout({
               unstyled: true,
               classNames: {
                 toast:
-                  'dark:dark:bg-[#111111] text-white rounded-lg p-4 flex flex-row items-center space-x-2',
+                  'bg-primaryLight dark:bg-primaryDark text-white rounded-lg p-4 flex flex-row items-center space-x-2',
               },
             }}
           />
diff --git a/ui/components/Chat.tsx b/ui/components/Chat.tsx
index 7b0c1b3..60096b3 100644
--- a/ui/components/Chat.tsx
+++ b/ui/components/Chat.tsx
@@ -66,7 +66,7 @@ const Chat = ({
               sendMessage={sendMessage}
             />
             {!isLast && msg.role === 'assistant' && (
-              <div className="h-px w-full bg-[#1C1C1C]" />
+              <div className="h-px w-full bg-secondLight dark:bg-secondDark" />
             )}
           </Fragment>
         );
diff --git a/ui/components/EmptyChat.tsx b/ui/components/EmptyChat.tsx
index 30bb883..6b9fddb 100644
--- a/ui/components/EmptyChat.tsx
+++ b/ui/components/EmptyChat.tsx
@@ -11,7 +11,7 @@ const EmptyChat = ({
 }) => {
   return (
     <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-8">
-      <h2 className="text-white/70 text-3xl font-medium -mt-8">
+      <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">
         Research begins here.
       </h2>
       <EmptyChatMessageInput
diff --git a/ui/components/EmptyChatMessageInput.tsx b/ui/components/EmptyChatMessageInput.tsx
index 4932803..6b9369d 100644
--- a/ui/components/EmptyChatMessageInput.tsx
+++ b/ui/components/EmptyChatMessageInput.tsx
@@ -31,12 +31,12 @@ const EmptyChatMessageInput = ({
       }}
       className="w-full"
     >
-      <div className="flex flex-col bg-[#111111] px-5 pt-5 pb-2 rounded-lg w-full border border-[#1C1C1C]">
+      <div className="flex flex-col bg-primaryLight dark:bg-primaryDark px-5 pt-5 pb-2 rounded-lg w-full border border-light dark:border-dark">
         <TextareaAutosize
           value={message}
           onChange={(e) => setMessage(e.target.value)}
           minRows={2}
-          className="bg-transparent placeholder:text-white/50 text-sm text-white resize-none focus:outline-none w-full max-h-24 lg:max-h-36 xl:max-h-48"
+          className="bg-transparent placeholder:text-black/50 dark:placeholder:text-white/50 text-sm text-black dark:text-white resize-none focus:outline-none w-full max-h-24 lg:max-h-36 xl:max-h-48"
           placeholder="Ask anything..."
         />
         <div className="flex flex-row items-center justify-between mt-4">
@@ -51,7 +51,7 @@ const EmptyChatMessageInput = ({
             />
             <button
               disabled={message.trim().length === 0}
-              className="bg-[#24A0ED] text-white disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#ececec21] rounded-full p-2"
+              className="bg-[#24A0ED] text-black dark:text-white disabled:text-black/50 dark:disabled:text-white/50 disabled:bg-[#e0e0dc] dark:disabled:bg-[#ececec21] hover:bg-opacity-85 transition duration-100 rounded-full p-2"
             >
               <ArrowRight className="bg-background" size={17} />
             </button>
diff --git a/ui/components/Layout.tsx b/ui/components/Layout.tsx
index e517e00..cb128db 100644
--- a/ui/components/Layout.tsx
+++ b/ui/components/Layout.tsx
@@ -1,6 +1,6 @@
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <main className="lg:pl-20 bg-[#0A0A0A] min-h-screen">
+    <main className="lg:pl-20 bg-primaryLight dark:bg-primaryDark min-h-screen">
       <div className="max-w-screen-lg lg:mx-auto mx-4">{children}</div>
     </main>
   );
diff --git a/ui/components/MessageActions/Copy.tsx b/ui/components/MessageActions/Copy.tsx
index b19d8d4..5418811 100644
--- a/ui/components/MessageActions/Copy.tsx
+++ b/ui/components/MessageActions/Copy.tsx
@@ -19,7 +19,7 @@ const Copy = ({
         setCopied(true);
         setTimeout(() => setCopied(false), 1000);
       }}
-      className="p-2 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white"
+      className="p-2 text-black/70 dark:text-white/70 rounded-xl hover:bg-secondLight dark:hover:bg-secondDark transition duration-200 hover:text-black dark:hover:text-white"
     >
       {copied ? <Check size={18} /> : <ClipboardList size={18} />}
     </button>
diff --git a/ui/components/MessageActions/Rewrite.tsx b/ui/components/MessageActions/Rewrite.tsx
index 3282e7d..b5f865b 100644
--- a/ui/components/MessageActions/Rewrite.tsx
+++ b/ui/components/MessageActions/Rewrite.tsx
@@ -10,7 +10,7 @@ const Rewrite = ({
   return (
     <button
       onClick={() => rewrite(messageId)}
-      className="py-2 px-3 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white flex flex-row items-center space-x-1"
+      className="py-2 px-3 text-black/70 dark:text-white/70 rounded-xl hover(bg-secondLight dark:bg-secondDark) transition duration-200 hover:text-black dark:hover:text-white flex flex-row items-center space-x-1"
     >
       <ArrowLeftRight size={18} />
       <p className="text-xs font-medium">Rewrite</p>
diff --git a/ui/components/MessageBox.tsx b/ui/components/MessageBox.tsx
index 8084d5f..1960943 100644
--- a/ui/components/MessageBox.tsx
+++ b/ui/components/MessageBox.tsx
@@ -55,7 +55,7 @@ const MessageBox = ({
         message.content.replace(
           regex,
           (_, number) =>
-            `<a href="${message.sources?.[number - 1]?.metadata?.url}" target="_blank" className="bg-[#1C1C1C] px-1 rounded ml-1 no-underline text-xs text-white/70 relative">${number}</a>`,
+            `<a href="${message.sources?.[number - 1]?.metadata?.url}" target="_blank" className="bg-secondLight dark:bg-secondDark px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${number}</a>`,
         ),
       );
     }
@@ -70,7 +70,7 @@ const MessageBox = ({
     <div>
       {message.role === 'user' && (
         <div className={cn('w-full', messageIndex === 0 ? 'pt-16' : 'pt-8')}>
-          <h2 className="text-white font-medium text-3xl lg:w-9/12">
+          <h2 className="text-black dark:text-white font-medium text-3xl lg:w-9/12">
             {message.content}
           </h2>
         </div>
@@ -85,8 +85,10 @@ const MessageBox = ({
             {message.sources && message.sources.length > 0 && (
               <div className="flex flex-col space-y-2">
                 <div className="flex flex-row items-center space-x-2">
-                  <BookCopy className="text-white" size={20} />
-                  <h3 className="text-white font-medium text-xl">Sources</h3>
+                  <BookCopy className="text-black dark:text-white" size={20} />
+                  <h3 className="text-black dark:text-white font-medium text-xl">
+                    Sources
+                  </h3>
                 </div>
                 <MessageSources sources={message.sources} />
               </div>
@@ -95,20 +97,22 @@ const MessageBox = ({
               <div className="flex flex-row items-center space-x-2">
                 <Disc3
                   className={cn(
-                    'text-white',
+                    'text-black dark:text-white',
                     isLast && loading ? 'animate-spin' : 'animate-none',
                   )}
                   size={20}
                 />
-                <h3 className="text-white font-medium text-xl">Answer</h3>
+                <h3 className="text-black dark:text-white font-medium text-xl">
+                  Answer
+                </h3>
               </div>
-              <Markdown className="prose max-w-none break-words prose-invert prose-p:leading-relaxed prose-pre:p-0 text-white text-sm md:text-base font-medium">
+              <Markdown className="prose prose-strong:text-black dark:prose-strong:text-white dark:prose-invert max-w-none break-words prose-invert prose-p:leading-relaxed prose-pre:p-0 text-black dark:text-white text-sm md:text-base font-medium">
                 {parsedMessage}
               </Markdown>
               {loading && isLast ? null : (
-                <div className="flex flex-row items-center justify-between w-full text-white py-4 -mx-2">
+                <div className="flex flex-row items-center justify-between w-full text-black dark:text-white py-4 -mx-2">
                   <div className="flex flex-row items-center space-x-1">
-                    {/*  <button className="p-2 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white">
+                    {/*  <button className="p-2 text-black/70 dark:text-white/70 rounded-xl hover(bg-secondLight dark:bg-secondDark) transition duration-200 hover:text-black dark:hover:text-white">
                       <Share size={18} />
                     </button> */}
                     <Rewrite rewrite={rewrite} messageId={message.id} />
@@ -123,7 +127,7 @@ const MessageBox = ({
                           start();
                         }
                       }}
-                      className="p-2 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white"
+                      className="p-2 text-black/70 dark:text-white/70 rounded-xl hover(bg-secondLight dark:bg-secondDark) transition duration-200 hover:text-black dark:hover:text-white"
                     >
                       {speechStatus === 'started' ? (
                         <StopCircle size={18} />
@@ -140,8 +144,8 @@ const MessageBox = ({
                 message.role === 'assistant' &&
                 !loading && (
                   <>
-                    <div className="h-px w-full bg-[#1C1C1C]" />
-                    <div className="flex flex-col space-y-3 text-white">
+                    <div className="h-px w-full bg-secondLight dark:bg-secondDark" />
+                    <div className="flex flex-col space-y-3 text-black dark:text-white">
                       <div className="flex flex-row items-center space-x-2 mt-4">
                         <Layers3 />
                         <h3 className="text-xl font-medium">Related</h3>
@@ -152,7 +156,7 @@ const MessageBox = ({
                             className="flex flex-col space-y-3 text-sm"
                             key={i}
                           >
-                            <div className="h-px w-full bg-[#1C1C1C]" />
+                            <div className="h-px w-full bg-secondLight dark:bg-secondDark" />
                             <div
                               onClick={() => {
                                 sendMessage(suggestion);
diff --git a/ui/components/MessageBoxLoading.tsx b/ui/components/MessageBoxLoading.tsx
index e070a27..3a80fe8 100644
--- a/ui/components/MessageBoxLoading.tsx
+++ b/ui/components/MessageBoxLoading.tsx
@@ -1,9 +1,9 @@
 const MessageBoxLoading = () => {
   return (
-    <div className="flex flex-col space-y-2 w-full lg:w-9/12 bg-[#111111] animate-pulse rounded-lg p-3">
-      <div className="h-2 rounded-full w-full bg-[#1c1c1c]" />
-      <div className="h-2 rounded-full w-9/12 bg-[#1c1c1c]" />
-      <div className="h-2 rounded-full w-10/12 bg-[#1c1c1c]" />
+    <div className="flex flex-col space-y-2 w-full lg:w-9/12 bg-primaryLight dark:bg-primaryDark animate-pulse rounded-lg p-3">
+      <div className="h-2 rounded-full w-full bg-secondLight dark:bg-secondDark" />
+      <div className="h-2 rounded-full w-9/12 bg-secondLight dark:bg-secondDark" />
+      <div className="h-2 rounded-full w-10/12 bg-secondLight dark:bg-secondDark" />
     </div>
   );
 };
diff --git a/ui/components/MessageInput.tsx b/ui/components/MessageInput.tsx
index baf6095..4fbea7c 100644
--- a/ui/components/MessageInput.tsx
+++ b/ui/components/MessageInput.tsx
@@ -40,7 +40,7 @@ const MessageInput = ({
         }
       }}
       className={cn(
-        'bg-[#111111] p-4 flex items-center overflow-hidden border border-[#1C1C1C]',
+        'bg-primaryLight dark:bg-primaryDark p-4 flex items-center overflow-hidden border border-light dark:border-dark',
         mode === 'multi' ? 'flex-col rounded-lg' : 'flex-row rounded-full',
       )}
     >
@@ -51,7 +51,7 @@ const MessageInput = ({
         onHeightChange={(height, props) => {
           setTextareaRows(Math.ceil(height / props.rowHeight));
         }}
-        className="transition bg-transparent placeholder:text-white/50 placeholder:text-sm text-sm text-white resize-none focus:outline-none w-full px-2 max-h-24 lg:max-h-36 xl:max-h-48 flex-grow flex-shrink"
+        className="transition bg-transparent dark:placeholder:text-white/50 placeholder:text-sm text-sm dark:text-white resize-none focus:outline-none w-full px-2 max-h-24 lg:max-h-36 xl:max-h-48 flex-grow flex-shrink"
         placeholder="Ask a follow-up"
       />
       {mode === 'single' && (
@@ -62,7 +62,7 @@ const MessageInput = ({
           />
           <button
             disabled={message.trim().length === 0 || loading}
-            className="bg-[#24A0ED] text-white disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#ececec21] rounded-full p-2"
+            className="bg-[#24A0ED] dark:text-white disabled:text-black/50 dark:disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#e0e0dc] dark:disabled:bg-[#ececec21] rounded-full p-2"
           >
             <ArrowUp className="bg-background" size={17} />
           </button>
@@ -78,7 +78,7 @@ const MessageInput = ({
             />
             <button
               disabled={message.trim().length === 0 || loading}
-              className="bg-[#24A0ED] text-white disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#ececec21] rounded-full p-2"
+              className="bg-[#24A0ED] dark:text-white text-black/50 dark:disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#e0e0dc] dark:disabled:bg-[#ececec21] rounded-full p-2"
             >
               <ArrowUp className="bg-background" size={17} />
             </button>
diff --git a/ui/components/MessageInputActions.tsx b/ui/components/MessageInputActions.tsx
index 9c00c4d..22fc708 100644
--- a/ui/components/MessageInputActions.tsx
+++ b/ui/components/MessageInputActions.tsx
@@ -16,7 +16,7 @@ export const Attach = () => {
   return (
     <button
       type="button"
-      className="p-2 text-white/50 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white"
+      className="p-2 text-black/50 dark:text-white/50 rounded-xl hover:(bg-secondLight dark:bg-secondDark) transition duration-200 hover:text-black dark:hover:text-white"
     >
       <CopyPlus />
     </button>
@@ -85,7 +85,7 @@ export const Focus = ({
     <Popover className="fixed w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
       <Popover.Button
         type="button"
-        className="p-2 text-white/50 rounded-xl hover:bg-[#1c1c1c] active:scale-95 transition duration-200 hover:text-white"
+        className="p-2 text-black/50 dark:text-white/50 rounded-xl hover(bg-secondLight dark:bg-secondDark) active:scale-95 transition duration-200 hover:text-white"
       >
         {focusMode !== 'webSearch' ? (
           <div className="flex flex-row items-center space-x-1">
@@ -109,7 +109,7 @@ export const Focus = ({
         leaveTo="opacity-0 translate-y-1"
       >
         <Popover.Panel className="absolute z-10 w-full">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-1 bg-[#0A0A0A] border rounded-lg border-[#1c1c1c] w-full p-2 max-h-[200px] md:max-h-none overflow-y-auto">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-1 dark:bg-primaryDark border rounded-lg border-light dark:border-dark w-full p-2 max-h-[200px] md:max-h-none overflow-y-auto">
             {focusModes.map((mode, i) => (
               <Popover.Button
                 onClick={() => setFocusMode(mode.key)}
@@ -117,20 +117,24 @@ export const Focus = ({
                 className={cn(
                   'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-2 duration-200 cursor-pointer transition',
                   focusMode === mode.key
-                    ? 'bg-[#111111]'
-                    : 'hover:bg-[#111111]',
+                    ? 'bg-primaryLight dark:bg-primaryDark'
+                    : 'hover:bg-primaryLight dark:bg-primaryDark',
                 )}
               >
                 <div
                   className={cn(
                     'flex flex-row items-center space-x-1',
-                    focusMode === mode.key ? 'text-[#24A0ED]' : 'text-white',
+                    focusMode === mode.key
+                      ? 'text-[#24A0ED]'
+                      : 'text-black dark:text-white',
                   )}
                 >
                   {mode.icon}
                   <p className="text-sm font-medium">{mode.title}</p>
                 </div>
-                <p className="text-white/70 text-xs">{mode.description}</p>
+                <p className="text-black/70 dark:text-white/70 text-xs">
+                  {mode.description}
+                </p>
               </Popover.Button>
             ))}
           </div>
@@ -152,14 +156,14 @@ export const CopilotToggle = ({
       <Switch
         checked={copilotEnabled}
         onChange={setCopilotEnabled}
-        className="bg-[#111111] border border-[#1C1C1C] relative inline-flex h-5 w-10 sm:h-6 sm:w-11 items-center rounded-full"
+        className="bg-primaryLight dark:bg-primaryDark border border-light dark:border-dark relative inline-flex h-5 w-10 sm:h-6 sm:w-11 items-center rounded-full"
       >
         <span className="sr-only">Copilot</span>
         <span
           className={cn(
             copilotEnabled
               ? 'translate-x-6 bg-[#24A0ED]'
-              : 'translate-x-1 bg-white/50',
+              : 'translate-x-1 bg-black/50 dark:bg-white/50',
             'inline-block h-3 w-3 sm:h-4 sm:w-4 transform rounded-full transition-all duration-200',
           )}
         />
@@ -170,7 +174,7 @@ export const CopilotToggle = ({
           'text-xs font-medium transition-colors duration-150 ease-in-out',
           copilotEnabled
             ? 'text-[#24A0ED]'
-            : 'text-white/50 group-hover:text-white',
+            : 'text-black/50 dark:text-white/50 group-hover:text-black dark:group-hover:text-white',
         )}
       >
         Copilot
diff --git a/ui/components/MessageSources.tsx b/ui/components/MessageSources.tsx
index 5816f8d..476c73c 100644
--- a/ui/components/MessageSources.tsx
+++ b/ui/components/MessageSources.tsx
@@ -20,12 +20,12 @@ const MessageSources = ({ sources }: { sources: Document[] }) => {
     <div className="grid grid-cols-2 lg:grid-cols-4 gap-2">
       {sources.slice(0, 3).map((source, i) => (
         <a
-          className="bg-[#111111] hover:bg-[#1c1c1c] transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
+          className="bg-primaryLight dark:bg-primaryDark hover(bg-secondLight dark:bg-secondDark) transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
           key={i}
           href={source.metadata.url}
           target="_blank"
         >
-          <p className="text-white text-xs overflow-hidden whitespace-nowrap text-ellipsis">
+          <p className="dark:text-white text-xs overflow-hidden whitespace-nowrap text-ellipsis">
             {source.metadata.title}
           </p>
           <div className="flex flex-row items-center justify-between">
@@ -37,11 +37,11 @@ const MessageSources = ({ sources }: { sources: Document[] }) => {
                 alt="favicon"
                 className="rounded-lg h-4 w-4"
               />
-              <p className="text-xs text-white/50 overflow-hidden whitespace-nowrap text-ellipsis">
+              <p className="text-xs text-black/50 dark:text-white/50 overflow-hidden whitespace-nowrap text-ellipsis">
                 {source.metadata.url.replace(/.+\/\/|www.|\..+/g, '')}
               </p>
             </div>
-            <div className="flex flex-row items-center space-x-1 text-white/50 text-xs">
+            <div className="flex flex-row items-center space-x-1 text-black/50 dark:text-white/50 text-xs">
               <div className="bg-white/50 h-[4px] w-[4px] rounded-full" />
               <span>{i + 1}</span>
             </div>
@@ -51,7 +51,7 @@ const MessageSources = ({ sources }: { sources: Document[] }) => {
       {sources.length > 3 && (
         <button
           onClick={openModal}
-          className="bg-[#111111] hover:bg-[#1c1c1c] transition duration-200 rounded-lg px-4 py-2 flex flex-col justify-between space-y-2"
+          className="bg-primaryLight dark:bg-primaryDark hover(bg-secondLight dark:bg-secondDark) transition duration-200 rounded-lg px-4 py-2 flex flex-col justify-between space-y-2"
         >
           <div className="flex flex-row items-center space-x-1">
             {sources.slice(3, 6).map((source, i) => (
@@ -65,7 +65,7 @@ const MessageSources = ({ sources }: { sources: Document[] }) => {
               />
             ))}
           </div>
-          <p className="text-xs text-white/50">
+          <p className="text-xs text-black/50 dark:text-white/50">
             View {sources.length - 3} more
           </p>
         </button>
@@ -83,19 +83,19 @@ const MessageSources = ({ sources }: { sources: Document[] }) => {
                 leaveFrom="opacity-100 scale-200"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="w-full max-w-md transform rounded-2xl bg-[#111111] border border-[#1c1c1c] p-6 text-left align-middle shadow-xl transition-all">
-                  <Dialog.Title className="text-lg font-medium leading-6 text-white">
+                <Dialog.Panel className="w-full max-w-md transform rounded-2xl bg-primaryLight dark:bg-primaryDark border border-light dark:border-dark p-6 text-left align-middle shadow-xl transition-all">
+                  <Dialog.Title className="text-lg font-medium leading-6 dark:text-white">
                     Sources
                   </Dialog.Title>
                   <div className="grid grid-cols-2 gap-2 overflow-auto max-h-[300px] mt-2 pr-2">
                     {sources.map((source, i) => (
                       <a
-                        className="bg-[#111111] hover:bg-[#1c1c1c] border border-[#1c1c1c] transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
+                        className="bg-primaryLight dark:bg-primaryDark hover(bg-secondLight dark:bg-secondDark) border border-light dark:border-dark transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
                         key={i}
                         href={source.metadata.url}
                         target="_blank"
                       >
-                        <p className="text-white text-xs overflow-hidden whitespace-nowrap text-ellipsis">
+                        <p className="dark:text-white text-xs overflow-hidden whitespace-nowrap text-ellipsis">
                           {source.metadata.title}
                         </p>
                         <div className="flex flex-row items-center justify-between">
@@ -107,14 +107,14 @@ const MessageSources = ({ sources }: { sources: Document[] }) => {
                               alt="favicon"
                               className="rounded-lg h-4 w-4"
                             />
-                            <p className="text-xs text-white/50 overflow-hidden whitespace-nowrap text-ellipsis">
+                            <p className="text-xs text-black/50 dark:text-white/50 overflow-hidden whitespace-nowrap text-ellipsis">
                               {source.metadata.url.replace(
                                 /.+\/\/|www.|\..+/g,
                                 '',
                               )}
                             </p>
                           </div>
-                          <div className="flex flex-row items-center space-x-1 text-white/50 text-xs">
+                          <div className="flex flex-row items-center space-x-1 text-black/50 dark:text-white/50 text-xs">
                             <div className="bg-white/50 h-[4px] w-[4px] rounded-full" />
                             <span>{i + 1}</span>
                           </div>
diff --git a/ui/components/Navbar.tsx b/ui/components/Navbar.tsx
index 75c34a6..c07d6fd 100644
--- a/ui/components/Navbar.tsx
+++ b/ui/components/Navbar.tsx
@@ -38,7 +38,7 @@ const Navbar = ({ messages }: { messages: Message[] }) => {
   }, []);
 
   return (
-    <div className="fixed z-40 top-0 left-0 right-0 px-4 lg:pl-[104px] lg:pr-6 lg:px-8 flex flex-row items-center justify-between w-full py-4 text-sm text-white/70 border-b bg-[#0A0A0A] border-[#1C1C1C]">
+    <div className="fixed z-40 top-0 left-0 right-0 px-4 lg:pl-[104px] lg:pr-6 lg:px-8 flex flex-row items-center justify-between w-full py-4 text-sm text-black dark:text-white/70 border-b dark:bg-primaryDark border-light dark:border-dark">
       <Edit
         size={17}
         className="active:scale-95 transition duration-100 cursor-pointer lg:hidden"
diff --git a/ui/components/SearchImages.tsx b/ui/components/SearchImages.tsx
index aa70c96..2c573ad 100644
--- a/ui/components/SearchImages.tsx
+++ b/ui/components/SearchImages.tsx
@@ -62,7 +62,7 @@ const SearchImages = ({
             );
             setLoading(false);
           }}
-          className="border border-dashed border-[#1C1C1C] hover:bg-[#1c1c1c] active:scale-95 duration-200 transition px-4 py-2 flex flex-row items-center justify-between rounded-lg text-white text-sm w-full"
+          className="border border-dashed border-light dark:border-dark hover(bg-secondLight dark:bg-secondDark) active:scale-95 duration-200 transition px-4 py-2 flex flex-row items-center justify-between rounded-lg dark:text-white text-sm w-full"
         >
           <div className="flex flex-row items-center space-x-2">
             <ImagesIcon size={17} />
@@ -76,7 +76,7 @@ const SearchImages = ({
           {[...Array(4)].map((_, i) => (
             <div
               key={i}
-              className="bg-[#1C1C1C] h-32 w-full rounded-lg animate-pulse aspect-video object-cover"
+              className="bg-secondLight dark:bg-secondDark h-32 w-full rounded-lg animate-pulse aspect-video object-cover"
             />
           ))}
         </div>
@@ -120,7 +120,7 @@ const SearchImages = ({
             {images.length > 4 && (
               <button
                 onClick={() => setOpen(true)}
-                className="bg-[#111111] hover:bg-[#1c1c1c] transition duration-200 active:scale-95 hover:scale-[1.02] h-auto w-full rounded-lg flex flex-col justify-between text-white p-2"
+                className="bg-primaryLight dark:bg-primaryDark hover(bg-secondLight dark:bg-secondDark) transition duration-200 active:scale-95 hover:scale-[1.02] h-auto w-full rounded-lg flex flex-col justify-between dark:text-white p-2"
               >
                 <div className="flex flex-row items-center space-x-1">
                   {images.slice(3, 6).map((image, i) => (
@@ -132,7 +132,7 @@ const SearchImages = ({
                     />
                   ))}
                 </div>
-                <p className="text-white/70 text-xs">
+                <p className="text-black/70 dark:text-white/70 text-xs">
                   View {images.length - 3} more
                 </p>
               </button>
diff --git a/ui/components/SearchVideos.tsx b/ui/components/SearchVideos.tsx
index b5ff6c5..05c3180 100644
--- a/ui/components/SearchVideos.tsx
+++ b/ui/components/SearchVideos.tsx
@@ -77,7 +77,7 @@ const Searchvideos = ({
             );
             setLoading(false);
           }}
-          className="border border-dashed border-[#1C1C1C] hover:bg-[#1c1c1c] active:scale-95 duration-200 transition px-4 py-2 flex flex-row items-center justify-between rounded-lg text-white text-sm w-full"
+          className="border border-dashed border-light dark:border-dark hover(bg-secondLight dark:bg-secondDark) active:scale-95 duration-200 transition px-4 py-2 flex flex-row items-center justify-between rounded-lg dark:text-white text-sm w-full"
         >
           <div className="flex flex-row items-center space-x-2">
             <VideoIcon size={17} />
@@ -91,7 +91,7 @@ const Searchvideos = ({
           {[...Array(4)].map((_, i) => (
             <div
               key={i}
-              className="bg-[#1C1C1C] h-32 w-full rounded-lg animate-pulse aspect-video object-cover"
+              className="bg-secondLight dark:bg-secondDark h-32 w-full rounded-lg animate-pulse aspect-video object-cover"
             />
           ))}
         </div>
@@ -118,7 +118,7 @@ const Searchvideos = ({
                       alt={video.title}
                       className="relative h-full w-full aspect-video object-cover rounded-lg"
                     />
-                    <div className="absolute bg-black/70 text-white/70 px-2 py-1 flex flex-row items-center space-x-1 bottom-1 right-1 rounded-md">
+                    <div className="absolute bg-black/70 text-black/70 dark:text-white/70 px-2 py-1 flex flex-row items-center space-x-1 bottom-1 right-1 rounded-md">
                       <PlayCircle size={15} />
                       <p className="text-xs">Video</p>
                     </div>
@@ -142,7 +142,7 @@ const Searchvideos = ({
                       alt={video.title}
                       className="relative h-full w-full aspect-video object-cover rounded-lg"
                     />
-                    <div className="absolute bg-black/70 text-white/70 px-2 py-1 flex flex-row items-center space-x-1 bottom-1 right-1 rounded-md">
+                    <div className="absolute bg-white/70 dark:bg-black/70 text-black/70 dark:text-white/70 px-2 py-1 flex flex-row items-center space-x-1 bottom-1 right-1 rounded-md">
                       <PlayCircle size={15} />
                       <p className="text-xs">Video</p>
                     </div>
@@ -151,7 +151,7 @@ const Searchvideos = ({
             {videos.length > 4 && (
               <button
                 onClick={() => setOpen(true)}
-                className="bg-[#111111] hover:bg-[#1c1c1c] transition duration-200 active:scale-95 hover:scale-[1.02] h-auto w-full rounded-lg flex flex-col justify-between text-white p-2"
+                className="bg-primaryLight dark:bg-primaryDark hover(bg-secondLight dark:bg-secondDark) transition duration-200 active:scale-95 hover:scale-[1.02] h-auto w-full rounded-lg flex flex-col justify-between dark:text-white p-2"
               >
                 <div className="flex flex-row items-center space-x-1">
                   {videos.slice(3, 6).map((video, i) => (
@@ -163,7 +163,7 @@ const Searchvideos = ({
                     />
                   ))}
                 </div>
-                <p className="text-white/70 text-xs">
+                <p className="text-black/70 dark:text-white/70 text-xs">
                   View {videos.length - 3} more
                 </p>
               </button>
diff --git a/ui/components/SettingsDialog.tsx b/ui/components/SettingsDialog.tsx
index 57f79f6..1942179 100644
--- a/ui/components/SettingsDialog.tsx
+++ b/ui/components/SettingsDialog.tsx
@@ -145,7 +145,7 @@ const SettingsDialog = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-black/50" />
+          <div className="fixed inset-0 bg-white/50 dark:bg-black/50" />
         </Transition.Child>
         <div className="fixed inset-0 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center">
@@ -158,15 +158,15 @@ const SettingsDialog = ({
               leaveFrom="opacity-100 scale-200"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="w-full max-w-md transform rounded-2xl bg-[#111111] border border-[#1c1c1c] p-6 text-left align-middle shadow-xl transition-all">
-                <Dialog.Title className="text-xl font-medium leading-6 text-white">
+              <Dialog.Panel className="w-full max-w-md transform rounded-2xl bg-secondLight dark:bg-secondDark border border-light dark:border-dark p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Title className="text-xl font-medium leading-6 dark:text-white">
                   Settings
                 </Dialog.Title>
                 {config && !isLoading && (
                   <div className="flex flex-col space-y-4 mt-6">
                     {config.chatModelProviders && (
                       <div className="flex flex-col space-y-1">
-                        <p className="text-white/70 text-sm">
+                        <p className="text-black/70 dark:text-white/70 text-sm">
                           Chat model Provider
                         </p>
                         <select
@@ -177,7 +177,7 @@ const SettingsDialog = ({
                               config.chatModelProviders[e.target.value][0],
                             );
                           }}
-                          className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
+                          className="bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm"
                         >
                           {Object.keys(config.chatModelProviders).map(
                             (provider) => (
@@ -193,13 +193,15 @@ const SettingsDialog = ({
                     {selectedChatModelProvider &&
                       selectedChatModelProvider != 'custom_openai' && (
                         <div className="flex flex-col space-y-1">
-                          <p className="text-white/70 text-sm">Chat Model</p>
+                          <p className="text-black/70 dark:text-white/70 text-sm">
+                            Chat Model
+                          </p>
                           <select
                             value={selectedChatModel ?? undefined}
                             onChange={(e) =>
                               setSelectedChatModel(e.target.value)
                             }
-                            className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
+                            className="bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm"
                           >
                             {config.chatModelProviders[
                               selectedChatModelProvider
@@ -231,7 +233,9 @@ const SettingsDialog = ({
                       selectedChatModelProvider === 'custom_openai' && (
                         <>
                           <div className="flex flex-col space-y-1">
-                            <p className="text-white/70 text-sm">Model name</p>
+                            <p className="text-black/70 dark:text-white/70 text-sm">
+                              Model name
+                            </p>
                             <input
                               type="text"
                               placeholder="Model name"
@@ -239,11 +243,11 @@ const SettingsDialog = ({
                               onChange={(e) =>
                                 setSelectedChatModel(e.target.value)
                               }
-                              className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
+                              className="bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm"
                             />
                           </div>
                           <div className="flex flex-col space-y-1">
-                            <p className="text-white/70 text-sm">
+                            <p className="text-black/70 dark:text-white/70 text-sm">
                               Custom OpenAI API Key
                             </p>
                             <input
@@ -253,11 +257,11 @@ const SettingsDialog = ({
                               onChange={(e) =>
                                 setCustomOpenAIApiKey(e.target.value)
                               }
-                              className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
+                              className="bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm"
                             />
                           </div>
                           <div className="flex flex-col space-y-1">
-                            <p className="text-white/70 text-sm">
+                            <p className="text-black/70 dark:text-white/70 text-sm">
                               Custom OpenAI Base URL
                             </p>
                             <input
@@ -267,7 +271,7 @@ const SettingsDialog = ({
                               onChange={(e) =>
                                 setCustomOpenAIBaseURL(e.target.value)
                               }
-                              className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
+                              className="bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm"
                             />
                           </div>
                         </>
@@ -275,7 +279,7 @@ const SettingsDialog = ({
                     {/* Embedding models */}
                     {config.embeddingModelProviders && (
                       <div className="flex flex-col space-y-1">
-                        <p className="text-white/70 text-sm">
+                        <p className="text-black/70 dark:text-white/70 text-sm">
                           Embedding model Provider
                         </p>
                         <select
@@ -286,7 +290,7 @@ const SettingsDialog = ({
                               config.embeddingModelProviders[e.target.value][0],
                             );
                           }}
-                          className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
+                          className="bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm"
                         >
                           {Object.keys(config.embeddingModelProviders).map(
                             (provider) => (
@@ -301,13 +305,15 @@ const SettingsDialog = ({
                     )}
                     {selectedEmbeddingModelProvider && (
                       <div className="flex flex-col space-y-1">
-                        <p className="text-white/70 text-sm">Embedding Model</p>
+                        <p className="text-black/70 dark:text-white/70 text-sm">
+                          Embedding Model
+                        </p>
                         <select
                           value={selectedEmbeddingModel ?? undefined}
                           onChange={(e) =>
                             setSelectedEmbeddingModel(e.target.value)
                           }
-                          className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
+                          className="bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm"
                         >
                           {config.embeddingModelProviders[
                             selectedEmbeddingModelProvider
@@ -336,7 +342,9 @@ const SettingsDialog = ({
                       </div>
                     )}
                     <div className="flex flex-col space-y-1">
-                      <p className="text-white/70 text-sm">OpenAI API Key</p>
+                      <p className="text-black/70 dark:text-white/70 text-sm">
+                        OpenAI API Key
+                      </p>
                       <input
                         type="text"
                         placeholder="OpenAI API Key"
@@ -347,11 +355,13 @@ const SettingsDialog = ({
                             openaiApiKey: e.target.value,
                           })
                         }
-                        className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
+                        className="bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm"
                       />
                     </div>
                     <div className="flex flex-col space-y-1">
-                      <p className="text-white/70 text-sm">Ollama API URL</p>
+                      <p className="text-black/70 dark:text-white/70 text-sm">
+                        Ollama API URL
+                      </p>
                       <input
                         type="text"
                         placeholder="Ollama API URL"
@@ -362,11 +372,13 @@ const SettingsDialog = ({
                             ollamaApiUrl: e.target.value,
                           })
                         }
-                        className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
+                        className="bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm"
                       />
                     </div>
                     <div className="flex flex-col space-y-1">
-                      <p className="text-white/70 text-sm">GROQ API Key</p>
+                      <p className="text-black/70 dark:text-white/70 text-sm">
+                        GROQ API Key
+                      </p>
                       <input
                         type="text"
                         placeholder="GROQ API Key"
@@ -377,18 +389,18 @@ const SettingsDialog = ({
                             groqApiKey: e.target.value,
                           })
                         }
-                        className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
+                        className="bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm"
                       />
                     </div>
                   </div>
                 )}
                 {isLoading && (
-                  <div className="w-full flex items-center justify-center mt-6 text-white/70 py-6">
+                  <div className="w-full flex items-center justify-center mt-6 text-black/70 dark:text-white/70 py-6">
                     <RefreshCcw className="animate-spin" />
                   </div>
                 )}
                 <div className="w-full mt-6 space-y-2">
-                  <p className="text-xs text-white/50">
+                  <p className="text-xs text-black/50 dark:text-white/50">
                     We&apos;ll refresh the page after updating the settings.
                   </p>
                   <button
diff --git a/ui/components/Sidebar.tsx b/ui/components/Sidebar.tsx
index aef1153..40360d5 100644
--- a/ui/components/Sidebar.tsx
+++ b/ui/components/Sidebar.tsx
@@ -4,10 +4,17 @@ import { cn } from '@/lib/utils';
 import { BookOpenText, Home, Search, SquarePen, Settings } from 'lucide-react';
 import Link from 'next/link';
 import { useSelectedLayoutSegments } from 'next/navigation';
-import React, { Fragment, useState } from 'react';
+import React, { Fragment, useState, type ReactNode } from 'react';
 import Layout from './Layout';
 import { Dialog, Transition } from '@headlessui/react';
 import SettingsDialog from './SettingsDialog';
+import { ThemeSwitcher } from './theme/Switcher';
+
+function VerticalIconContainer({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex flex-col items-center gap-y-3 w-full">{children}</div>
+  );
+}
 
 const Sidebar = ({ children }: { children: React.ReactNode }) => {
   const segments = useSelectedLayoutSegments();
@@ -38,31 +45,39 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
   return (
     <div>
       <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-20 lg:flex-col">
-        <div className="flex grow flex-col items-center justify-between gap-y-5 overflow-y-auto bg-[#111111] px-2 py-8">
+        <div className="flex grow flex-col items-center justify-between gap-y-5 overflow-y-auto bg-secondLight dark:bg-secondDark px-2 py-8">
           <a href="/">
-            <SquarePen className="text-white cursor-pointer" />
+            <SquarePen className="cursor-pointer" />
           </a>
-          <div className="flex flex-col items-center gap-y-3 w-full">
+          <VerticalIconContainer>
             {navLinks.map((link, i) => (
               <Link
                 key={i}
                 href={link.href}
                 className={cn(
-                  'relative flex flex-row items-center justify-center cursor-pointer hover:bg-white/10 hover:text-white duration-150 transition w-full py-2 rounded-lg',
-                  link.active ? 'text-white' : 'text-white/70',
+                  'relative flex flex-row items-center justify-center cursor-pointer hover:bg-black/10 dark:hover:bg-white/10 duration-150 transition w-full py-2 rounded-lg',
+                  link.active
+                    ? 'text-black dark:text-white'
+                    : 'text-black/70 dark:text-white/70',
                 )}
               >
                 <link.icon />
                 {link.active && (
-                  <div className="absolute right-0 -mr-2 h-full w-1 rounded-l-lg bg-white" />
+                  <div className="absolute right-0 -mr-2 h-full w-1 rounded-l-lg bg-black dark:bg-white" />
                 )}
               </Link>
             ))}
-          </div>
-          <Settings
-            onClick={() => setIsSettingsOpen(!isSettingsOpen)}
-            className="text-white cursor-pointer"
-          />
+          </VerticalIconContainer>
+
+          <VerticalIconContainer>
+            <ThemeSwitcher />
+
+            <Settings
+              onClick={() => setIsSettingsOpen(!isSettingsOpen)}
+              className="cursor-pointer"
+            />
+          </VerticalIconContainer>
+
           <SettingsDialog
             isOpen={isSettingsOpen}
             setIsOpen={setIsSettingsOpen}
@@ -70,7 +85,7 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
         </div>
       </div>
 
-      <div className="fixed bottom-0 w-full z-50 flex flex-row items-center gap-x-6 bg-[#111111] px-4 py-4 shadow-sm lg:hidden">
+      <div className="fixed bottom-0 w-full z-50 flex flex-row items-center gap-x-6 bg-primaryLight dark:bg-primaryDark px-4 py-4 shadow-sm lg:hidden">
         {navLinks.map((link, i) => (
           <Link
             href={link.href}
diff --git a/ui/tailwind.config.ts b/ui/tailwind.config.ts
index a757263..74e2fe9 100644
--- a/ui/tailwind.config.ts
+++ b/ui/tailwind.config.ts
@@ -1,4 +1,5 @@
 import type { Config } from 'tailwindcss';
+import color from 'tailwindcss/colors';
 
 const config: Config = {
   content: [
@@ -8,7 +9,18 @@ const config: Config = {
   ],
   darkMode: 'class',
   theme: {
-    extend: {},
+    extend: {
+      borderColor: {
+        light: 'rgba(0, 0, 0, 0.1)',
+        dark: '#1c1c1c',
+      },
+      colors: {
+        primaryDark: '#0a0a0a',
+        secondDark: '#1c1c1c',
+        primaryLight: '#fff',
+        secondLight: color.gray[50],
+      },
+    },
   },
   plugins: [require('@tailwindcss/typography')],
 };