diff --git a/app/components/chat-list.tsx b/app/components/chat-list.tsx
index ff0ebb9d0..188eda654 100644
--- a/app/components/chat-list.tsx
+++ b/app/components/chat-list.tsx
@@ -98,7 +98,7 @@ export function ChatItem(props: {
   );
 }
 
-export function ChatList(props: { narrow?: boolean }) {
+export function ChatList(props: { narrow?: boolean; search: string }) {
   const [sessions, selectedIndex, selectSession, moveSession] = useChatStore(
     (state) => [
       state.sessions,
@@ -127,10 +127,8 @@ export function ChatList(props: { narrow?: boolean }) {
     moveSession(source.index, destination.index);
   };
 
-  const [chatListSearch, setChatListSearch] = useState("");
-
   function haveSearchKeyword(item: ChatSession): boolean {
-    if (chatListSearch.length === 0) {
+    if (props.search.length === 0) {
       return true;
     }
 
@@ -138,7 +136,7 @@ export function ChatList(props: { narrow?: boolean }) {
 
     item.messages.forEach((message) => {
       // console.log(chatListSearch, message.content, message.content.includes(chatListSearch))
-      if (message.content.includes(chatListSearch)) {
+      if (message.content.includes(props.search)) {
         foundKeyword = true;
         return;
       }
@@ -156,16 +154,6 @@ export function ChatList(props: { narrow?: boolean }) {
             ref={provided.innerRef}
             {...provided.droppableProps}
           >
-            <div className={styles["chat-list-search"]}>
-              <SearchInput
-                value={chatListSearch}
-                onChange={(e) => {
-                  setChatListSearch(e.currentTarget.value);
-                }}
-                placeholder={Locale.Home.Search}
-              ></SearchInput>
-            </div>
-
             {sessions.map(
               (item, i) =>
                 haveSearchKeyword(item) && (
diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index beeee865a..b0843c5e9 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useMemo } from "react";
+import { useEffect, useRef, useMemo, useState } from "react";
 
 import styles from "./home.module.scss";
 
@@ -29,7 +29,7 @@ import {
 import { Link, useNavigate } from "react-router-dom";
 import { isIOS, useMobileScreen } from "../utils";
 import dynamic from "next/dynamic";
-import { showConfirm, showToast } from "./ui-lib";
+import { SearchInput, showConfirm, showToast } from "./ui-lib";
 
 const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
   loading: () => null,
@@ -141,6 +141,8 @@ export function SideBar(props: { className?: string }) {
     [isMobileScreen],
   );
 
+  const [chatListSearch, setChatListSearch] = useState("");
+
   useHotKey();
 
   return (
@@ -188,6 +190,16 @@ export function SideBar(props: { className?: string }) {
         />
       </div>
 
+      <div className={styles["chat-list-search"]}>
+        <SearchInput
+          value={chatListSearch}
+          onChange={(e) => {
+            setChatListSearch(e.currentTarget.value);
+          }}
+          placeholder={Locale.Home.Search}
+        ></SearchInput>
+      </div>
+
       <div
         className={styles["sidebar-body"]}
         onClick={(e) => {
@@ -196,7 +208,7 @@ export function SideBar(props: { className?: string }) {
           }
         }}
       >
-        <ChatList narrow={shouldNarrow} />
+        <ChatList narrow={shouldNarrow} search={chatListSearch} />
       </div>
 
       <div className={styles["sidebar-tail"]}>