diff --git a/src/components/ConversationTitle..tsx b/src/components/ConversationTitle..tsx
new file mode 100644
index 0000000..feaf965
--- /dev/null
+++ b/src/components/ConversationTitle..tsx
@@ -0,0 +1,56 @@
+import { STORAGE_NAME } from "@/const";
+import { AppChatStoreContext, AppContext } from "@/pages/App";
+import { ChatStore } from "@/types/chatstore";
+import { memo, useContext, useEffect, useMemo, useState } from "react";
+
+const ConversationTitle = ({ chatStoreIndex }: { chatStoreIndex: number }) => {
+  const { db, selectedChatIndex } = useContext(AppContext);
+  const [title, setTitle] = useState("");
+
+  const getTitle = async () => {
+    const chatStore = (await (
+      await db
+    ).get(STORAGE_NAME, chatStoreIndex)) as ChatStore;
+    if (chatStore.history.length === 0) {
+      setTitle(`${chatStoreIndex}`);
+      return;
+    }
+    const content = chatStore.history[0]?.content;
+    if (!content) {
+      setTitle(`${chatStoreIndex}`);
+      return;
+    }
+
+    if (typeof content === "string") {
+      console.log(content);
+      setTitle(content.substring(0, 39));
+    }
+  };
+
+  useEffect(() => {
+    try {
+      getTitle();
+    } catch (e) {
+      console.error(e);
+    }
+  }, []);
+
+  return <span>{title}</span>;
+};
+
+const CachedConversationTitle = memo(
+  ({
+    chatStoreIndex,
+    selectedChatStoreIndex,
+  }: {
+    chatStoreIndex: number;
+    selectedChatStoreIndex: number;
+  }) => {
+    return <ConversationTitle chatStoreIndex={chatStoreIndex} />;
+  },
+  (prevProps, nextProps) => {
+    return nextProps.selectedChatStoreIndex === nextProps.chatStoreIndex;
+  }
+);
+
+export default CachedConversationTitle;
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index 706d842..8045562 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -94,6 +94,7 @@ import { ModeToggle } from "@/components/ModeToggle";
 import Search from "@/components/Search";
 
 import Navbar from "@/components/navbar";
+import ConversationTitle from "@/components/ConversationTitle.";
 
 export function App() {
   // init selected index
@@ -356,7 +357,12 @@ export function App() {
                           asChild
                           isActive={i === selectedChatIndex}
                         >
-                          <span>{i}</span>
+                          <span>
+                            <ConversationTitle
+                              chatStoreIndex={i}
+                              selectedChatStoreIndex={selectedChatIndex}
+                            />
+                          </span>
                         </SidebarMenuButton>
                       </SidebarMenuItem>
                     );