diff --git a/frontend/__tests__/unit/components/Search.test.tsx b/frontend/__tests__/unit/components/Search.test.tsx
index 91c2e81995..0f9bac5d00 100644
--- a/frontend/__tests__/unit/components/Search.test.tsx
+++ b/frontend/__tests__/unit/components/Search.test.tsx
@@ -73,7 +73,7 @@ describe('SearchBar Component', () => {
       const { container } = render(<SearchBar {...defaultProps} isLoaded={false} />)
       const input = screen.getByPlaceholderText('Search projects...')
       expect(input).toHaveValue('')
-      const clearButton = container.querySelector('button.absolute.rounded-full[class*="right-2"]')
+      const clearButton = container.querySelector('button.absolute.rounded-md[class*="right-2"]')
       expect(clearButton).not.toBeInTheDocument()
     })
 
@@ -81,7 +81,7 @@ describe('SearchBar Component', () => {
       const { container } = render(<SearchBar {...defaultProps} isLoaded={false} />)
       const input = screen.getByPlaceholderText('Search projects...')
       fireEvent.change(input, { target: { value: 'test' } })
-      const clearButton = container.querySelector('button.absolute.rounded-full[class*="right-2"]')
+      const clearButton = container.querySelector('button.absolute.rounded-md[class*="right-2"]')
       expect(clearButton).toBeInTheDocument()
     })
   })
@@ -145,7 +145,7 @@ describe('SearchBar Component', () => {
       const input = screen.getByPlaceholderText('Search projects...')
       fireEvent.change(input, { target: { value: 'test' } })
       expect(input).toHaveValue('test')
-      const clearButton = container.querySelector('button.absolute.rounded-full[class*="right-2"]')
+      const clearButton = container.querySelector('button.absolute.rounded-md[class*="right-2"]')
       fireEvent.click(clearButton)
       expect(input).toHaveValue('')
     })
@@ -312,7 +312,7 @@ describe('SearchBar Component', () => {
       fireEvent.change(input, { target: { value: 'edge case' } })
       expect(mockOnSearch).not.toHaveBeenCalled()
 
-      const clearButton = container.querySelector('button.absolute.rounded-full[class*="right-2"]')
+      const clearButton = container.querySelector('button.absolute.rounded-md[class*="right-2"]')
       fireEvent.click(clearButton)
 
       jest.advanceTimersByTime(750)
@@ -332,10 +332,10 @@ describe('SearchBar Component', () => {
       const input = screen.getByPlaceholderText('Search projects...')
       expect(input).toBeInTheDocument()
       expect(input).toHaveAttribute('type', 'text')
-      let clearButton = container.querySelector('button.absolute.rounded-full[class*="right-2"]')
+      let clearButton = container.querySelector('button.absolute.rounded-md[class*="right-2"]')
       expect(clearButton).not.toBeInTheDocument()
       fireEvent.change(input, { target: { value: 'test' } })
-      clearButton = container.querySelector('button.absolute.rounded-full[class*="right-2"]')
+      clearButton = container.querySelector('button.absolute.rounded-md[class*="right-2"]')
       expect(clearButton).toBeInTheDocument()
     })
 
@@ -366,9 +366,9 @@ describe('SearchBar Component', () => {
       const { container } = render(<SearchBar {...defaultProps} isLoaded={false} />)
       const input = screen.getByPlaceholderText('Search projects...')
       fireEvent.change(input, { target: { value: 'test' } })
-      const clearButton = container.querySelector('button.absolute.rounded-full[class*="right-2"]')
+      const clearButton = container.querySelector('button.absolute.rounded-md[class*="right-2"]')
       expect(clearButton).toHaveClass(
-        'absolute right-2 top-1/2 -translate-y-1/2 rounded-full p-1 hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-300'
+        'absolute top-1/2 right-2 h-8 w-8 -translate-y-1/2 rounded-md p-1 text-gray-400 hover:bg-gray-400 hover:text-gray-200 focus:ring-2 focus:ring-gray-300 focus:outline-hidden dark:hover:bg-gray-600'
       )
     })
 
diff --git a/frontend/src/components/MultiSearch.tsx b/frontend/src/components/MultiSearch.tsx
index 26b8ee4a48..ee4e4322ec 100644
--- a/frontend/src/components/MultiSearch.tsx
+++ b/frontend/src/components/MultiSearch.tsx
@@ -243,7 +243,7 @@ const MultiSearchBar: React.FC<MultiSearchBarProps> = ({
             {searchQuery && (
               <button
                 type="button"
-                className="absolute top-1/2 right-2 -translate-y-1/2 rounded-full p-1 text-gray-400 hover:text-gray-600"
+                className="absolute top-1/2 right-2 h-8 w-8 -translate-y-1/2 rounded-md p-1 text-gray-400 hover:bg-gray-400 hover:text-gray-200 focus:ring-2 focus:ring-gray-300 focus:outline-hidden dark:hover:bg-gray-600"
                 onClick={handleClearSearch}
                 aria-label="Clear search"
               >
diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx
index d081c5d337..08dcb2c3d2 100644
--- a/frontend/src/components/Search.tsx
+++ b/frontend/src/components/Search.tsx
@@ -87,7 +87,7 @@ const SearchBar: React.FC<SearchProps> = ({
             {searchQuery && (
               <button
                 type="button"
-                className="absolute top-1/2 right-2 -translate-y-1/2 rounded-full p-1 hover:bg-gray-100 focus:ring-2 focus:ring-gray-300 focus:outline-hidden"
+                className="absolute top-1/2 right-2 h-8 w-8 -translate-y-1/2 rounded-md p-1 text-gray-400 hover:bg-gray-400 hover:text-gray-200 focus:ring-2 focus:ring-gray-300 focus:outline-hidden dark:hover:bg-gray-600"
                 onClick={handleClearSearch}
                 aria-label="Clear search"
               >