diff --git a/app/components/History.tsx b/app/components/History.tsx
index 297e638..e4d593a 100644
--- a/app/components/History.tsx
+++ b/app/components/History.tsx
@@ -3,11 +3,30 @@ import { useChatHistory } from '../hooks/useChatHistory';
 
 const History: React.FC = () => {
   const [chatHistory, setChatHistory, setSelectedIndex] = useChatHistory()
+  const [isEditing, setIsEditing] = useState(false);
+  const [inputValue, setInputValue] = useState<string>('');
+
+  const handleEditButtonClick = () => {
+    setIsEditing(true);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  const handleSaveButtonClick = () => {
+    setIsEditing(false);
+    chatHistory.chats.push({ name: inputValue, messages: [], timestamp: 5 })
+    setInputValue("")
+  };
 
   const handleHistoryClick = (index: number) => {
     setSelectedIndex(index)
+    console.log("index",index);
+    
   }
 
+
   return (
     <div className="history-background">
       <div className="history">
@@ -18,6 +37,21 @@ const History: React.FC = () => {
               <a href="#" onClick={() => handleHistoryClick(index)}>{chatHistory.chats[index].name}</a>
             </li>
           ))}
+          <li>
+            {isEditing ? (
+        <div>
+          <input
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            placeholder="Enter text"
+          />
+          <button onClick={handleSaveButtonClick}>Save</button>
+        </div>
+      ) : (
+        <button onClick={handleEditButtonClick}>{'New Chat'}</button>
+      )}
+          </li>
         </ul>
       </div>
     </div>
diff --git a/app/hooks/useChatHistory.tsx b/app/hooks/useChatHistory.tsx
index b849d79..e3c550c 100644
--- a/app/hooks/useChatHistory.tsx
+++ b/app/hooks/useChatHistory.tsx
@@ -19,7 +19,8 @@ interface GlobalChatHistory {
 
 let globalChatHistory: GlobalChatHistory = {
     chats: [
-        { name: "Chat 1", messages: [], timestamp: 4 }
+        { name: "Chat 1", messages: [{role:"system",content:"you are a helpful assistant"},{role:"assistant",content:"how can i help you"}], timestamp: 4 },
+        { name: "Chat 2", messages: [{role:"system",content:"you are a helpful assistant"},{role:"assistant",content:"how can i help you"}], timestamp: 4 },
     ],
     selectedIndex:0
 }