diff --git a/web/app/search/SelectedText.tsx b/web/app/search/SelectedText.tsx
index 742eba956..2bb90775e 100644
--- a/web/app/search/SelectedText.tsx
+++ b/web/app/search/SelectedText.tsx
@@ -29,15 +29,15 @@ const SelectedText = ({ onCleared }: { onCleared?: () => void }) => {
   return shouldShowSelectedText ? (
     <div
       ref={containerRef}
-      className="relative rounded-lg border-[1px] border-[#0000000F] bg-[#0000000A] p-[10px]"
+      className="relative rounded-lg border border-border bg-secondary p-[10px]"
     >
       <div
-        className="absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full border-[1px] border-[#0000000F] bg-white drop-shadow"
+        className="absolute right-2 top-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-border bg-white shadow dark:bg-black/80"
         onClick={onClearClicked}
       >
-        <X size={16} />
+        <X size={14} className="text-muted-foreground" />
       </div>
-      <p className="font-semibold text-[#00000099]">{text}</p>
+      <p className="pr-8 font-medium text-muted-foreground">{text}</p>
     </div>
   ) : (
     <div />
diff --git a/web/app/search/UserInput.tsx b/web/app/search/UserInput.tsx
index 3bf148f40..85cb9843e 100644
--- a/web/app/search/UserInput.tsx
+++ b/web/app/search/UserInput.tsx
@@ -56,7 +56,7 @@ const UserInput: React.FC = () => {
   }
 
   return (
-    <div className="flex flex-col space-y-3 p-3">
+    <div className="flex flex-col space-y-3 bg-white p-3 dark:bg-background">
       <form
         ref={formRef}
         className="flex h-full w-full items-center justify-center"
@@ -66,7 +66,7 @@ const UserInput: React.FC = () => {
           <LogoMark width={28} height={28} className="mx-auto" />
           <input
             ref={inputRef}
-            className="flex-1 bg-transparent font-bold text-black focus:outline-none"
+            className="flex-1 bg-transparent font-bold focus:outline-none"
             type="text"
             value={inputValue}
             onChange={handleChange}
@@ -77,7 +77,6 @@ const UserInput: React.FC = () => {
           </Button>
         </div>
       </form>
-
       <SelectedText onCleared={() => inputRef?.current?.focus()} />
     </div>
   )
diff --git a/web/app/search/page.tsx b/web/app/search/page.tsx
index 0822c2676..912a843bb 100644
--- a/web/app/search/page.tsx
+++ b/web/app/search/page.tsx
@@ -4,7 +4,7 @@ import UserInput from './UserInput'
 
 const Search: React.FC = () => {
   return (
-    <div className="h-screen w-screen overflow-hidden bg-white">
+    <div className="h-screen w-screen overflow-hidden bg-white dark:bg-background">
       <UserInput />
     </div>
   )