diff --git a/src/renderer/components/search-input/index.tsx b/src/renderer/components/search-input/index.tsx
index f081d3f6..76f2b32b 100644
--- a/src/renderer/components/search-input/index.tsx
+++ b/src/renderer/components/search-input/index.tsx
@@ -1,7 +1,7 @@
 import { ChangeEvent, KeyboardEvent } from 'react';
-import { TextInputProps } from '@mantine/core';
+import { ActionIcon, TextInputProps } from '@mantine/core';
 import { useFocusWithin, useHotkeys, useMergedRef } from '@mantine/hooks';
-import { RiSearchLine } from 'react-icons/ri';
+import { RiCloseFill, RiSearchLine } from 'react-icons/ri';
 import { TextInput } from '/@/renderer/components/input';
 import { useSettingsStore } from '/@/renderer/store';
 import { shallow } from 'zustand/shallow';
@@ -40,6 +40,18 @@ export const SearchInput = ({
       ref={mergedRef}
       {...props}
       icon={showIcon && <RiSearchLine />}
+      rightSection={
+        isOpened ? (
+          <ActionIcon
+            onClick={() => {
+              ref.current.value = '';
+              ref.current.focus();
+            }}
+          >
+            <RiCloseFill />
+          </ActionIcon>
+        ) : null
+      }
       size="md"
       styles={{
         icon: { svg: { fill: 'var(--titlebar-fg)' } },
diff --git a/src/renderer/features/search/components/command-palette.tsx b/src/renderer/features/search/components/command-palette.tsx
index 94e32680..7eeff102 100644
--- a/src/renderer/features/search/components/command-palette.tsx
+++ b/src/renderer/features/search/components/command-palette.tsx
@@ -1,12 +1,13 @@
 /* eslint-disable react/no-unknown-property */
-import { useCallback, useState, Fragment } from 'react';
-import { Group, Kbd, ScrollArea } from '@mantine/core';
+import { useCallback, useState, Fragment, useRef } from 'react';
+import { ActionIcon, Group, Kbd, ScrollArea } from '@mantine/core';
 import { useDisclosure, useDebouncedValue } from '@mantine/hooks';
+import { RiSearchLine, RiCloseFill } from 'react-icons/ri';
 import { generatePath, useNavigate } from 'react-router';
 import styled from 'styled-components';
 import { GoToCommands } from './go-to-commands';
 import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command';
-import { Button, Modal, Paper, Spinner } from '/@/renderer/components';
+import { Button, Modal, Paper, Spinner, TextInput } from '/@/renderer/components';
 import { HomeCommands } from './home-commands';
 import { ServerCommands } from '/@/renderer/features/search/components/server-commands';
 import { useSearch } from '/@/renderer/features/search/queries/search-query';
@@ -35,6 +36,7 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
   const [pages, setPages] = useState<CommandPalettePages[]>([CommandPalettePages.HOME]);
   const activePage = pages[pages.length - 1];
   const isHome = activePage === CommandPalettePages.HOME;
+  const searchInputRef = useRef<HTMLInputElement>(null);
 
   const popPage = useCallback(() => {
     setPages((pages) => {
@@ -117,11 +119,22 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
         value={value}
         onValueChange={setValue}
       >
-        <Command.Input
-          autoFocus
-          placeholder="Enter search..."
+        <TextInput
+          ref={searchInputRef}
+          icon={<RiSearchLine />}
+          rightSection={
+            <ActionIcon
+              onClick={() => {
+                setQuery('');
+                searchInputRef.current?.focus();
+              }}
+            >
+              <RiCloseFill />
+            </ActionIcon>
+          }
+          size="lg"
           value={query}
-          onValueChange={setQuery}
+          onChange={(e) => setQuery(e.currentTarget.value)}
         />
         <Command.Separator />
         <Command.List>