diff --git a/package.json b/package.json
index 8cf6e16..e7e777c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "pageassist",
   "displayName": "Page Assist - A Web UI for Local AI Models",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Use your locally running AI models to assist you in your web browsing.",
   "author": "n4ze3m",
   "scripts": {
diff --git a/src/components/Common/Playground/EditMessageForm.tsx b/src/components/Common/Playground/EditMessageForm.tsx
new file mode 100644
index 0000000..260a3cd
--- /dev/null
+++ b/src/components/Common/Playground/EditMessageForm.tsx
@@ -0,0 +1,62 @@
+import { useForm } from "@mantine/form"
+import React from "react"
+import useDynamicTextareaSize from "~hooks/useDynamicTextareaSize"
+
+type Props = {
+  value: string
+  onSumbit: (value: string) => void
+  onClose: () => void
+  isBot: boolean
+}
+
+export const EditMessageForm = (props: Props) => {
+  const [isComposing, setIsComposing] = React.useState(false)
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null)
+
+  const form = useForm({
+    initialValues: {
+      message: props.value
+    }
+  })
+  useDynamicTextareaSize(textareaRef, form.values.message, 300)
+
+  React.useEffect(() => {
+    form.setFieldValue("message", props.value)
+  }, [props.value])
+
+  return (
+    <form
+      onSubmit={form.onSubmit((data) => {
+        if (isComposing) return
+        props.onClose()
+        props.onSumbit(data.message)
+      })}
+      className="flex flex-col gap-2">
+      <textarea
+        {...form.getInputProps("message")}
+        onCompositionStart={() => setIsComposing(true)}
+        onCompositionEnd={() => setIsComposing(false)}
+        required
+        rows={1}
+        style={{ minHeight: "60px" }}
+        tabIndex={0}
+        placeholder="Type a message..."
+        ref={textareaRef}
+        className="w-full  bg-transparent focus-within:outline-none focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
+      />
+      <div className="flex justify-center space-x-2 mt-2">
+        <button
+          aria-label="Save"
+          className="bg-white dark:bg-black px-2.5 py-2 rounded-md text-gray-700 dark:text-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900">
+          {props.isBot ? "Save" : "Save & Submit"}
+        </button>
+        <button
+          onClick={props.onClose}
+          aria-label="Cancel"
+          className="border dark:border-gray-600 px-2.5 py-2 rounded-md text-gray-700 dark:text-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900">
+          Cancel
+        </button>
+      </div>
+    </form>
+  )
+}
diff --git a/src/components/Common/Playground/Message.tsx b/src/components/Common/Playground/Message.tsx
index 26b9833..abebce2 100644
--- a/src/components/Common/Playground/Message.tsx
+++ b/src/components/Common/Playground/Message.tsx
@@ -2,7 +2,8 @@ import Markdown from "../../Common/Markdown"
 import React from "react"
 import { Image, Tooltip } from "antd"
 import { WebSearch } from "./WebSearch"
-import { CheckIcon, ClipboardIcon } from "lucide-react"
+import { CheckIcon, ClipboardIcon, Pen, RotateCcw } from "lucide-react"
+import { EditMessageForm } from "./EditMessageForm"
 
 type Props = {
   message: string
@@ -15,18 +16,21 @@ type Props = {
   currentMessageIndex: number
   totalMessages: number
   onRengerate: () => void
+  onEditFormSubmit: (value: string) => void
   isProcessing: boolean
   webSearch?: {}
   isSearchingInternet?: boolean
   sources?: any[]
+  hideEditAndRegenerate?: boolean
 }
 
 export const PlaygroundMessage = (props: Props) => {
   const [isBtnPressed, setIsBtnPressed] = React.useState(false)
+  const [editMode, setEditMode] = React.useState(false)
 
   return (
     <div className="group w-full text-gray-800 dark:text-gray-100">
-      <div className="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
+      <div className="text-base  md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
         <div className="flex flex-row gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 lg:px-0 m-auto w-full">
           <div className="w-8 flex flex-col relative items-end">
             <div className="relative h-7 w-7 p-1 rounded-sm text-white flex items-center justify-center  text-opacity-100r">
@@ -55,26 +59,37 @@ export const PlaygroundMessage = (props: Props) => {
             ) : null}
 
             <div className="flex flex-grow flex-col">
-              <Markdown message={props.message} />
+              {!editMode ? (
+                <Markdown message={props.message} />
+              ) : (
+                <EditMessageForm
+                  value={props.message}
+                  onSumbit={props.onEditFormSubmit}
+                  onClose={() => setEditMode(false)}
+                  isBot={props.isBot}
+                />
+              )}
             </div>
             {/* source if aviable */}
-            {props.images && props.images.length > 0 && (
-              <div className="flex md:max-w-2xl lg:max-w-xl xl:max-w-3xl mt-4 m-auto w-full">
-                {props.images
-                  .filter((image) => image.length > 0)
-                  .map((image, index) => (
-                    <Image
-                      key={index}
-                      src={image}
-                      alt="Uploaded Image"
-                      width={180}
-                      className="rounded-md relative"
-                    />
-                  ))}
-              </div>
-            )}
+            {props.images &&
+              props.images &&
+              props.images.filter((img) => img.length > 0).length > 0 && (
+                <div className="flex md:max-w-2xl lg:max-w-xl xl:max-w-3xl mt-4 m-auto w-full">
+                  {props.images
+                    .filter((image) => image.length > 0)
+                    .map((image, index) => (
+                      <Image
+                        key={index}
+                        src={image}
+                        alt="Uploaded Image"
+                        width={180}
+                        className="rounded-md relative"
+                      />
+                    ))}
+                </div>
+              )}
 
-            {props.isBot && (
+            {props.isBot && props?.sources && props?.sources.length > 0 && (
               <div className="mb-3 flex flex-wrap gap-2">
                 {props?.sources?.map((source, index) => (
                   <a
@@ -87,37 +102,56 @@ export const PlaygroundMessage = (props: Props) => {
                 ))}
               </div>
             )}
-            {props.isBot && !props.isProcessing && (
-              <div className="flex space-x-2 gap-2">
-                {!props.hideCopy && (
-                  <Tooltip title="Copy to clipboard">
-                    <button
-                      onClick={() => {
-                        navigator.clipboard.writeText(props.message)
-                        setIsBtnPressed(true)
-                        setTimeout(() => {
-                          setIsBtnPressed(false)
-                        }, 2000)
-                      }}
-                      className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
-                      {!isBtnPressed ? (
-                        <ClipboardIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
-                      ) : (
-                        <CheckIcon className="w-3 h-3 text-green-400 group-hover:text-green-500" />
+            {!props.isProcessing && !editMode && (
+              <div
+                className={`space-x-2 gap-2 mt-3 ${
+                  props.currentMessageIndex !== props.totalMessages - 1
+                    ? "hidden group-hover:flex"
+                    : "flex"
+                }`}>
+                {props.isBot && (
+                  <>
+                    {!props.hideCopy && (
+                      <Tooltip title="Copy to clipboard">
+                        <button
+                          onClick={() => {
+                            navigator.clipboard.writeText(props.message)
+                            setIsBtnPressed(true)
+                            setTimeout(() => {
+                              setIsBtnPressed(false)
+                            }, 2000)
+                          }}
+                          className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                          {!isBtnPressed ? (
+                            <ClipboardIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                          ) : (
+                            <CheckIcon className="w-3 h-3 text-green-400 group-hover:text-green-500" />
+                          )}
+                        </button>
+                      </Tooltip>
+                    )}
+
+                    {!props.hideEditAndRegenerate &&
+                      props.currentMessageIndex === props.totalMessages - 1 && (
+                        <Tooltip title="Regenerate">
+                          <button
+                            onClick={props.onRengerate}
+                            className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                            <RotateCcw className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                          </button>
+                        </Tooltip>
                       )}
+                  </>
+                )}
+                {!props.hideEditAndRegenerate && (
+                  <Tooltip title="Edit">
+                    <button
+                      onClick={() => setEditMode(true)}
+                      className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                      <Pen className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                     </button>
                   </Tooltip>
                 )}
-
-                {/* {props.currentMessageIndex === props.totalMessages - 1 && (
-                  <Tooltip title="Regenerate">
-                    <button
-                      onClick={props.onRengerate}
-                      className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
-                      <ArrowPathIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
-                    </button>
-                  </Tooltip>
-                )} */}
               </div>
             )}
           </div>
diff --git a/src/components/Option/Playground/PlaygroundChat.tsx b/src/components/Option/Playground/PlaygroundChat.tsx
index 1d7948a..4b42806 100644
--- a/src/components/Option/Playground/PlaygroundChat.tsx
+++ b/src/components/Option/Playground/PlaygroundChat.tsx
@@ -4,7 +4,13 @@ import { PlaygroundEmpty } from "./PlaygroundEmpty"
 import { PlaygroundMessage } from "~components/Common/Playground/Message"
 
 export const PlaygroundChat = () => {
-  const { messages, streaming, regenerateLastMessage, isSearchingInternet } = useMessageOption()
+  const {
+    messages,
+    streaming,
+    regenerateLastMessage,
+    isSearchingInternet,
+    editMessage
+  } = useMessageOption()
   const divRef = React.useRef<HTMLDivElement>(null)
   React.useEffect(() => {
     if (divRef.current) {
@@ -32,6 +38,9 @@ export const PlaygroundChat = () => {
           isProcessing={streaming}
           isSearchingInternet={isSearchingInternet}
           sources={message.sources}
+          onEditFormSubmit={(value) => {
+            editMessage(index, value, !message.isBot)
+          }}
         />
       ))}
       {messages.length > 0 && (
diff --git a/src/components/Sidepanel/Chat/body.tsx b/src/components/Sidepanel/Chat/body.tsx
index bee2738..a96fae9 100644
--- a/src/components/Sidepanel/Chat/body.tsx
+++ b/src/components/Sidepanel/Chat/body.tsx
@@ -16,6 +16,7 @@ export const SidePanelBody = () => {
       {messages.length === 0 && <EmptySidePanel />}
       {messages.map((message, index) => (
         <PlaygroundMessage
+        onEditFormSubmit={(value) => {}}
           key={index}
           isBot={message.isBot}
           message={message.message}
@@ -25,6 +26,7 @@ export const SidePanelBody = () => {
           totalMessages={messages.length}
           onRengerate={() => {}}
           isProcessing={streaming}
+          hideEditAndRegenerate
         />
       ))}
       <div className="w-full h-32 md:h-48 flex-shrink-0"></div>
diff --git a/src/hooks/useMessageOption.tsx b/src/hooks/useMessageOption.tsx
index d4174b4..fba44d9 100644
--- a/src/hooks/useMessageOption.tsx
+++ b/src/hooks/useMessageOption.tsx
@@ -15,10 +15,12 @@ import {
 } from "@langchain/core/messages"
 import { useStoreMessageOption } from "~store/option"
 import {
+  deleteChatForEdit,
   getPromptById,
   removeMessageUsingHistoryId,
   saveHistory,
-  saveMessage
+  saveMessage,
+  updateMessageByIndex
 } from "~libs/db"
 import { useNavigate } from "react-router-dom"
 import { notification } from "antd"
@@ -114,6 +116,8 @@ export const useMessageOption = () => {
     setSelectedSystemPrompt
   } = useStoreMessageOption()
 
+  // const { notification } = App.useApp()
+
   const navigate = useNavigate()
   const textareaRef = React.useRef<HTMLTextAreaElement>(null)
 
@@ -134,7 +138,9 @@ export const useMessageOption = () => {
   const searchChatMode = async (
     message: string,
     image: string,
-    isRegenerate: boolean
+    isRegenerate: boolean,
+    messages: Message[],
+    history: ChatHistory
   ) => {
     const url = await getOllamaURL()
 
@@ -148,27 +154,37 @@ export const useMessageOption = () => {
       baseUrl: cleanUrl(url)
     })
 
-    let newMessage: Message[] = [
-      ...messages,
-      {
-        isBot: false,
-        name: "You",
-        message,
-        sources: [],
-        images: [image]
-      },
-      {
-        isBot: true,
-        name: selectedModel,
-        message: "▋",
-        sources: []
-      }
-    ]
-
-    const appendingIndex = newMessage.length - 1
+    let newMessage: Message[] = []
     if (!isRegenerate) {
-      setMessages(newMessage)
+      newMessage = [
+        ...messages,
+        {
+          isBot: false,
+          name: "You",
+          message,
+          sources: [],
+          images: [image]
+        },
+        {
+          isBot: true,
+          name: selectedModel,
+          message: "▋",
+          sources: []
+        }
+      ]
+    } else {
+      newMessage = [
+        ...messages,
+        {
+          isBot: true,
+          name: selectedModel,
+          message: "▋",
+          sources: []
+        }
+      ]
     }
+    setMessages(newMessage)
+    const appendingIndex = newMessage.length - 1
 
     try {
       setIsSearchingInternet(true)
@@ -321,8 +337,6 @@ export const useMessageOption = () => {
       setIsProcessing(false)
       setStreaming(false)
     } catch (e) {
-      e
-
       if (e?.name === "AbortError") {
         newMessage[appendingIndex].message = newMessage[
           appendingIndex
@@ -379,7 +393,9 @@ export const useMessageOption = () => {
   const normalChatMode = async (
     message: string,
     image: string,
-    isRegenerate: boolean
+    isRegenerate: boolean,
+    messages: Message[],
+    history: ChatHistory
   ) => {
     const url = await getOllamaURL()
 
@@ -393,27 +409,37 @@ export const useMessageOption = () => {
       baseUrl: cleanUrl(url)
     })
 
-    let newMessage: Message[] = [
-      ...messages,
-      {
-        isBot: false,
-        name: "You",
-        message,
-        sources: [],
-        images: [image]
-      },
-      {
-        isBot: true,
-        name: selectedModel,
-        message: "▋",
-        sources: []
-      }
-    ]
-
-    const appendingIndex = newMessage.length - 1
+    let newMessage: Message[] = []
     if (!isRegenerate) {
-      setMessages(newMessage)
+      newMessage = [
+        ...messages,
+        {
+          isBot: false,
+          name: "You",
+          message,
+          sources: [],
+          images: [image]
+        },
+        {
+          isBot: true,
+          name: selectedModel,
+          message: "▋",
+          sources: []
+        }
+      ]
+    } else {
+      newMessage = [
+        ...messages,
+        {
+          isBot: true,
+          name: selectedModel,
+          message: "▋",
+          sources: []
+        }
+      ]
     }
+    setMessages(newMessage)
+    const appendingIndex = newMessage.length - 1
 
     try {
       const prompt = await systemPromptForNonRagOption()
@@ -607,31 +633,57 @@ export const useMessageOption = () => {
   const onSubmit = async ({
     message,
     image,
-    isRegenerate = false
+    isRegenerate = false,
+    messages: chatHistory,
+    memory
   }: {
     message: string
     image: string
     isRegenerate?: boolean
+    messages?: Message[]
+    memory?: ChatHistory
   }) => {
     setStreaming(true)
     if (webSearch) {
-      await searchChatMode(message, image, isRegenerate)
+      await searchChatMode(
+        message,
+        image,
+        isRegenerate,
+        chatHistory || messages,
+        memory || history
+      )
     } else {
-      await normalChatMode(message, image, isRegenerate)
+      await normalChatMode(
+        message,
+        image,
+        isRegenerate,
+        chatHistory || messages,
+        memory || history
+      )
     }
   }
 
   const regenerateLastMessage = async () => {
+    const isOk = validateBeforeSubmit()
+
+    if (!isOk) {
+      return
+    }
     if (history.length > 0) {
       const lastMessage = history[history.length - 2]
-      setHistory(history.slice(0, -1))
-      setMessages(messages.slice(0, -1))
+      let newHistory = history
+      let mewMessages = messages
+      newHistory.pop()
+      mewMessages.pop()
+      setHistory(newHistory)
+      setMessages(mewMessages)
       await removeMessageUsingHistoryId(historyId)
       if (lastMessage.role === "user") {
         await onSubmit({
           message: lastMessage.content,
           image: lastMessage.image || "",
-          isRegenerate: true
+          isRegenerate: true,
+          memory: newHistory
         })
       }
     }
@@ -644,7 +696,61 @@ export const useMessageOption = () => {
     }
   }
 
+  const validateBeforeSubmit = () => {
+    if (!selectedModel || selectedModel?.trim()?.length === 0) {
+      notification.error({
+        message: "Error",
+        description: "Please select a model to continue"
+      })
+      return false
+    }
+
+    return true
+  }
+
+  const editMessage = async (
+    index: number,
+    message: string,
+    isHuman: boolean
+  ) => {
+    // update message and history by index
+    let newMessages = messages
+    let newHistory = history
+
+    if (isHuman) {
+      const isOk = validateBeforeSubmit()
+
+      if (!isOk) {
+        return
+      }
+
+      const currentHumanMessage = newMessages[index]
+      newMessages[index].message = message
+      newHistory[index].content = message
+      const previousMessages = newMessages.slice(0, index + 1)
+      setMessages(previousMessages)
+      const previousHistory = newHistory.slice(0, index + 1)
+      setHistory(previousHistory)
+      await updateMessageByIndex(historyId, index, message)
+      await deleteChatForEdit(historyId, index)
+      await onSubmit({
+        message: message,
+        image: currentHumanMessage.images[0] || "",
+        isRegenerate: true,
+        messages: previousMessages,
+        memory: previousHistory
+      })
+    } else {
+      newMessages[index].message = message
+      setMessages(newMessages)
+      newHistory[index].content = message
+      setHistory(newHistory)
+      await updateMessageByIndex(historyId, index, message)
+    }
+  }
+
   return {
+    editMessage,
     messages,
     setMessages,
     onSubmit,
diff --git a/src/libs/db.ts b/src/libs/db.ts
index e21a597..e7d31b7 100644
--- a/src/libs/db.ts
+++ b/src/libs/db.ts
@@ -286,11 +286,10 @@ export const updateHistory = async (id: string, title: string) => {
 }
 
 export const removeMessageUsingHistoryId = async (history_id: string) => {
-  // remove the last message
   const db = new PageAssitDatabase()
   const chatHistory = await db.getChatHistory(history_id)
-  const newChatHistory = chatHistory.slice(0, -1)
-  await db.db.set({ [history_id]: newChatHistory })
+  chatHistory.shift()
+  await db.db.set({ [history_id]: chatHistory })
 }
 
 
@@ -300,6 +299,22 @@ export const getAllPrompts = async () => {
 }
 
 
+export const updateMessageByIndex = async (history_id: string, index: number, message: string) => {
+  const db = new PageAssitDatabase()
+  const chatHistory = (await db.getChatHistory(history_id)).reverse()
+  chatHistory[index].content = message
+  await db.db.set({ [history_id]: chatHistory.reverse() })
+
+}
+
+export const deleteChatForEdit = async (history_id: string, index: number) => {
+  const db = new PageAssitDatabase()
+  const chatHistory = (await db.getChatHistory(history_id)).reverse()
+  const previousHistory = chatHistory.slice(0, index + 1)
+  // console.log(previousHistory)
+  await db.db.set({ [history_id]: previousHistory.reverse() })
+}
+
 export const savePrompt = async ({ content, title, is_system = false }: { title: string, content: string, is_system: boolean }) => {
   const db = new PageAssitDatabase()
   const id = generateID()
diff --git a/src/web/web.ts b/src/web/web.ts
index be1eef1..f062ecd 100644
--- a/src/web/web.ts
+++ b/src/web/web.ts
@@ -1,6 +1,15 @@
 import { getWebSearchPrompt } from "~services/ollama"
 import { webSearch } from "./local-google"
 
+const getHostName = (url: string) => {
+    try {
+        const hostname = new URL(url).hostname
+        return hostname
+    } catch (e) {
+        return ""
+    }
+}
+
 export const getSystemPromptForWeb = async (query: string) => {
     try {
         const search = await webSearch(query)
@@ -18,7 +27,7 @@ export const getSystemPromptForWeb = async (query: string) => {
             source: search.map((result) => {
                 return {
                     url: result.url,
-                    name: new URL(result.url).hostname,
+                    name: getHostName(result.url),
                     type: "url",
                 }
             })