diff --git a/ui/components/EmptyChatMessageInput.tsx b/ui/components/EmptyChatMessageInput.tsx
index 2e3ab53..f955fc9 100644
--- a/ui/components/EmptyChatMessageInput.tsx
+++ b/ui/components/EmptyChatMessageInput.tsx
@@ -31,7 +31,7 @@ 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-gray-40/20 px-5 pt-5 pb-2 rounded-lg w-full border border-[#1C1C1C]">
         <TextareaAutosize
           value={message}
           onChange={(e) => setMessage(e.target.value)}
diff --git a/ui/components/Layout.tsx b/ui/components/Layout.tsx
index e517e00..832be78 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-wash-dark min-h-screen">
       <div className="max-w-screen-lg lg:mx-auto mx-4">{children}</div>
     </main>
   );
diff --git a/ui/components/MessageBoxLoading.tsx b/ui/components/MessageBoxLoading.tsx
index e070a27..6e64b8e 100644
--- a/ui/components/MessageBoxLoading.tsx
+++ b/ui/components/MessageBoxLoading.tsx
@@ -1,6 +1,6 @@
 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="flex flex-col space-y-2 w-full lg:w-9/12 bg-gray-40/20 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]" />
diff --git a/ui/components/MessageInput.tsx b/ui/components/MessageInput.tsx
index baf6095..64432a7 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-gray-40/20 p-4 flex items-center overflow-hidden border border-[#1C1C1C]',
         mode === 'multi' ? 'flex-col rounded-lg' : 'flex-row rounded-full',
       )}
     >
diff --git a/ui/components/MessageInputActions.tsx b/ui/components/MessageInputActions.tsx
index 9c00c4d..b90e9d9 100644
--- a/ui/components/MessageInputActions.tsx
+++ b/ui/components/MessageInputActions.tsx
@@ -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 bg-wash-dark border rounded-lg border-[#1c1c1c] 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,8 +117,8 @@ 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-gray-40/20'
+                    : 'hover:bg-gray-40/20',
                 )}
               >
                 <div
@@ -152,7 +152,7 @@ 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-gray-40/20 border border-[#1C1C1C] relative inline-flex h-5 w-10 sm:h-6 sm:w-11 items-center rounded-full"
       >
         <span className="sr-only">Copilot</span>
         <span
diff --git a/ui/components/MessageSources.tsx b/ui/components/MessageSources.tsx
index 5816f8d..51f8b95 100644
--- a/ui/components/MessageSources.tsx
+++ b/ui/components/MessageSources.tsx
@@ -20,7 +20,7 @@ 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-gray-40/20 hover:bg-[#1c1c1c] transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
           key={i}
           href={source.metadata.url}
           target="_blank"
@@ -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-gray-40/20 hover:bg-[#1c1c1c] 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) => (
@@ -83,14 +83,14 @@ 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.Panel className="w-full max-w-md transform rounded-2xl bg-gray-40/20 border border-[#1c1c1c] p-6 text-left align-middle shadow-xl transition-all">
                   <Dialog.Title className="text-lg font-medium leading-6 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-gray-40/20 hover:bg-[#1c1c1c] border border-[#1c1c1c] transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
                         key={i}
                         href={source.metadata.url}
                         target="_blank"
diff --git a/ui/components/Navbar.tsx b/ui/components/Navbar.tsx
index 75c34a6..479a6a3 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-white/70 border-b bg-wash-dark border-[#1C1C1C]">
       <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 137571c..644da99 100644
--- a/ui/components/SearchImages.tsx
+++ b/ui/components/SearchImages.tsx
@@ -114,7 +114,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-gray-40/20 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"
               >
                 <div className="flex flex-row items-center space-x-1">
                   {images.slice(3, 6).map((image, i) => (
diff --git a/ui/components/SearchVideos.tsx b/ui/components/SearchVideos.tsx
index 335664e..73fbdd4 100644
--- a/ui/components/SearchVideos.tsx
+++ b/ui/components/SearchVideos.tsx
@@ -145,7 +145,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-gray-40/20 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"
               >
                 <div className="flex flex-row items-center space-x-1">
                   {videos.slice(3, 6).map((video, i) => (
diff --git a/ui/components/SettingsDialog.tsx b/ui/components/SettingsDialog.tsx
index c62c967..25c5b3b 100644
--- a/ui/components/SettingsDialog.tsx
+++ b/ui/components/SettingsDialog.tsx
@@ -88,7 +88,7 @@ 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.Panel className="w-full max-w-md transform rounded-2xl bg-gray-40/20 border border-[#1c1c1c] p-6 text-left align-middle shadow-xl transition-all">
                 <Dialog.Title className="text-xl font-medium leading-6 text-white">
                   Settings
                 </Dialog.Title>
@@ -108,7 +108,7 @@ const SettingsDialog = ({
                                 config.providers[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-gray-40/20 px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
                         >
                           {Object.keys(config.providers).map((provider) => (
                             <option
@@ -133,7 +133,7 @@ const SettingsDialog = ({
                               selectedChatModel: 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-gray-40/20 px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
                         >
                           {config.providers[config.selectedProvider] ? (
                             config.providers[config.selectedProvider].length >
@@ -176,7 +176,7 @@ const SettingsDialog = ({
                             openeaiApiKey: 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-gray-40/20 px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
                       />
                     </div>
                     <div className="flex flex-col space-y-1">
@@ -191,7 +191,7 @@ 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-gray-40/20 px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm"
                       />
                     </div>
                   </div>
diff --git a/ui/components/Sidebar.tsx b/ui/components/Sidebar.tsx
index aef1153..9159725 100644
--- a/ui/components/Sidebar.tsx
+++ b/ui/components/Sidebar.tsx
@@ -38,7 +38,7 @@ 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-gray-40/20 px-2 py-8">
           <a href="/">
             <SquarePen className="text-white cursor-pointer" />
           </a>
@@ -70,7 +70,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-gray-40/20 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 05f107d..e7bd770 100644
--- a/ui/tailwind.config.ts
+++ b/ui/tailwind.config.ts
@@ -7,7 +7,14 @@ const config: Config = {
     './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors:{
+        'wash': 'rgb(255 255 255)',
+        'wash-dark': 'rgb(35 39 47)',
+        'gray-30': 'rgb(153,161,179)',
+        'gray-40': 'rgb(120,131,155)',
+      }
+    },
   },
   plugins: [require('@tailwindcss/typography')],
 };