diff --git a/ui/components/MessageInputActions.tsx b/ui/components/MessageInputActions.tsx
index ec19a8b..ee21e2d 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-light-primary dark:bg-dark-primary border rounded-lg border-light-300 dark:border-dark-200 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-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 w-full p-2 max-h-[200px] md:max-h-none overflow-y-auto">
             {focusModes.map((mode, i) => (
               <Popover.Button
                 onClick={() => setFocusMode(mode.key)}
diff --git a/ui/components/SearchImages.tsx b/ui/components/SearchImages.tsx
index 5cca470..a01fd42 100644
--- a/ui/components/SearchImages.tsx
+++ b/ui/components/SearchImages.tsx
@@ -62,7 +62,7 @@ const SearchImages = ({
             );
             setLoading(false);
           }}
-          className="border border-dashed border-light-300 dark:border-dark-200 hover:bg-light-secondary dark:hover:bg-dark-secondary 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"
+          className="border border-dashed border-light-200 dark:border-dark-200 hover:bg-light-secondary dark:hover:bg-dark-secondary 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} />
diff --git a/ui/components/SearchVideos.tsx b/ui/components/SearchVideos.tsx
index b2ca185..a284bea 100644
--- a/ui/components/SearchVideos.tsx
+++ b/ui/components/SearchVideos.tsx
@@ -77,7 +77,7 @@ const Searchvideos = ({
             );
             setLoading(false);
           }}
-          className="border border-dashed border-light-300 dark:border-dark-200 hover:bg-light-secondary dark:hover:bg-dark-secondary 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"
+          className="border border-dashed border-light-200 dark:border-dark-200 hover:bg-light-secondary dark:hover:bg-dark-secondary 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} />
diff --git a/ui/components/SettingsDialog.tsx b/ui/components/SettingsDialog.tsx
index 046cfd8..8ae4901 100644
--- a/ui/components/SettingsDialog.tsx
+++ b/ui/components/SettingsDialog.tsx
@@ -16,7 +16,7 @@ function Input({ className, ...restProps }: InputProps) {
     <input
       {...restProps}
       className={cn(
-        'bg-light-primary dark:bg-dark-primary px-3 py-2 flex items-center overflow-hidden border border-light-300 dark:border-dark-200 dark:text-white rounded-lg text-sm',
+        'bg-light-primary dark:bg-dark-primary px-3 py-2 flex items-center overflow-hidden border border-light-200 dark:border-dark-200 dark:text-white rounded-lg text-sm',
         className,
       )}
     />
@@ -32,7 +32,7 @@ function Select({ className, options, ...restProps }: SelectProps) {
     <select
       {...restProps}
       className={cn(
-        'bg-light-primary dark:bg-dark-primary px-3 py-2 flex items-center overflow-hidden border border-light-300 dark:border-dark-200 dark:text-white rounded-lg text-sm',
+        'bg-light-primary dark:bg-dark-primary px-3 py-2 flex items-center overflow-hidden border border-light-200 dark:border-dark-200 dark:text-white rounded-lg text-sm',
         className,
       )}
     >
@@ -203,7 +203,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-light-secondary dark:bg-dark-secondary border border-light-300 dark:border-dark-200 p-6 text-left align-middle shadow-xl transition-all">
+              <Dialog.Panel className="w-full max-w-md transform rounded-2xl bg-light-secondary dark:bg-dark-secondary border border-light-200 dark:border-dark-200 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>
diff --git a/ui/tailwind.config.ts b/ui/tailwind.config.ts
index 6d9066d..00ae10a 100644
--- a/ui/tailwind.config.ts
+++ b/ui/tailwind.config.ts
@@ -10,8 +10,7 @@ const themeDark = (colors: DefaultColors) => ({
 const themeLight = (colors: DefaultColors) => ({
   50: '#fcfcf9',
   100: '#f3f3ee',
-  200: '#ccccbe',
-  300: '#a4a692',
+  200: '#e8e8e3',
 });
 
 const config: Config = {