diff --git a/src/lib/assets/controlIcons/editIcon.svg b/src/lib/assets/controlIcons/editIcon.svg
new file mode 100644
index 0000000..e244c6b
--- /dev/null
+++ b/src/lib/assets/controlIcons/editIcon.svg
@@ -0,0 +1,3 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width=".85em" height=".85em" viewBox="0 0 528.899 528.899" xml:space="preserve">
+	<path d="m328.883 89.125 107.59 107.589-272.34 272.34L56.604 361.465l272.279-272.34zm189.23-25.948-47.981-47.981c-18.543-18.543-48.653-18.543-67.259 0l-45.961 45.961 107.59 107.59 53.611-53.611c14.382-14.383 14.382-37.577 0-51.959zM.3 512.69c-1.958 8.812 5.998 16.708 14.811 14.565l119.891-29.069L27.473 390.597.3 512.69z"/>
+</svg>
\ No newline at end of file
diff --git a/src/lib/components/Message.svelte b/src/lib/components/Message.svelte
index 08def85..a2ebaf0 100644
--- a/src/lib/components/Message.svelte
+++ b/src/lib/components/Message.svelte
@@ -4,9 +4,12 @@
     import Markdown from 'svelte-exmarkdown'
     import { gfmPlugin } from 'svelte-exmarkdown/gfm'
 
+    import edit from '$lib/assets/controlIcons/editIcon.svg?raw'
+
     let {
         value,
         ondelete,
+        onedit,
         isLast,
     }: {
         value: Message
@@ -61,5 +64,13 @@
                 ></svg
             >
         </button>
+
+        <button
+            class="cursor-pointer w-4 h-4 stroke-current"
+            onclick={() => onedit(value)}
+            title="Edit a note"
+        >
+            {@html edit}
+        </button>
     </div>
 </div>
diff --git a/src/lib/index.svelte.ts b/src/lib/index.svelte.ts
index e7054a0..ba79fa3 100644
--- a/src/lib/index.svelte.ts
+++ b/src/lib/index.svelte.ts
@@ -90,6 +90,10 @@ class Messages {
         delete this.inner[id]
     }
 
+    edit(message: Message, newContent: string) {
+        message.data.content = newContent
+    }
+
     get length(): number {
         return Object.keys(this.inner).length
     }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2746422..b7fe36b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
-    import Message from '$lib/components/Message.svelte'
-    import { createMessage, messages, type Id } from '$lib/index.svelte'
+    import MessageComponent from '$lib/components/Message.svelte'
+    import {
+        createMessage,
+        messages,
+        type Id,
+        type Message,
+    } from '$lib/index.svelte'
     import { page } from '$app/stores'
     import { goto } from '$app/navigation'
     import { browser } from '$app/environment'
@@ -30,17 +35,27 @@
     let currentChat = $derived(messages.chatFrom(leafId!, 15).toReversed())
     let lastId = $derived(messages.untilBranchOrLeaf(leafId!))
 
+    let currentEditingMessage: Message | null = $state(null)
     let textInput = $state('')
     // TODO: Make a multiline chat input that grows dynamically
     let textInputElement: HTMLInputElement | null = $state(null)
 
+    function saveMessagesOnLocalStorage() {
+        localStorage.setItem('notes', JSON.stringify(messages.export()))
+    }
+
     function appendMessage() {
+        if (currentEditingMessage) {
+            onEditMessage()
+            return
+        }
+
         let message = createMessage(textInput)
         leafId = messages.add(leafId, message)
 
         textInput = ''
 
-        localStorage.setItem('notes', JSON.stringify(messages.export()))
+        saveMessagesOnLocalStorage()
 
         let url = $page.url
         url.hash = leafId
@@ -57,6 +72,35 @@
         messages.delete(value.id)
         localStorage.setItem('notes', JSON.stringify(messages.export()))
     }
+
+    function onEditMessage() {
+        if (!currentEditingMessage) return
+
+        messages.edit(currentEditingMessage, textInput)
+
+        saveMessagesOnLocalStorage()
+
+        currentEditingMessage = null
+        textInput = ''
+
+        setTimeout(() => textInputElement?.focus(), 0)
+    }
+
+    function startEditing(value: Message) {
+        textInput = value.data.content
+        currentEditingMessage = value
+
+        textInputElement?.focus()
+    }
+
+    function startEditByShortcut(e: KeyboardEvent) {
+        if (e.key === 'ArrowUp') {
+            const lastMessage = messages.get(lastId)
+            if (lastMessage) {
+                startEditing(lastMessage)
+            }
+        }
+    }
 </script>
 
 <!-- TODO: Fullsize note editor on a separate page or in a bottom sheet -->
@@ -64,9 +108,10 @@
     <div class="h-screen flex flex-col justify-end overflow-y-auto p-4 pb-36">
         {#if currentChat}
             {#each currentChat as message}
-                <Message
+                <MessageComponent
                     value={message}
                     ondelete={deleteMessage}
+                    onedit={startEditing}
                     isLast={message.id === lastId}
                 />
             {/each}
@@ -93,7 +138,9 @@
     </div>
 
     <footer
-        class="dark:text-white bg-slate-100 dark:bg-slate-700 border-t border-gray-300 dark:border-slate-600 p-4 absolute left-0 bottom-0 w-full"
+        class:bg-orange-100={currentEditingMessage}
+        class:bg-slate-100={!currentEditingMessage}
+        class="dark:text-white dark:bg-slate-700 border-t border-gray-300 dark:border-slate-600 p-4 absolute left-0 bottom-0 w-full"
     >
         <form
             class="flex items-center container mx-auto"
@@ -101,6 +148,7 @@
         >
             <input
                 type="text"
+                onkeydown={startEditByShortcut}
                 bind:this={textInputElement}
                 bind:value={textInput}
                 placeholder="Type a message..."