diff --git a/src/lib/assets/delete.svg b/src/lib/assets/delete.svg
new file mode 100644
index 0000000..2ddf863
--- /dev/null
+++ b/src/lib/assets/delete.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+        <path
+            d="M3 6h18M5 6v14c0 1.1.9 2 2 2h10a2 2 0 0 0 2-2V6M8 6V4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2M14 11v6M10 11v6" />
+    </g>
+</svg>
diff --git a/src/lib/components/Canvas.svelte b/src/lib/components/Canvas.svelte
new file mode 100644
index 0000000..edb1ec7
--- /dev/null
+++ b/src/lib/components/Canvas.svelte
@@ -0,0 +1,147 @@
+<script lang="ts">
+    import { onMount, setContext } from 'svelte'
+
+    type Scale = {
+        current: number
+        min: number
+        max: number
+        factor: number
+    }
+
+    let { children, scale = $bindable({ current: 1, min: 0.1, max: 4, factor: 0.05 }) }: { children: any; scale?: Scale } = $props()
+
+    let canvas: HTMLDivElement | null = $state(null)
+    onMount(() => {
+        canvas?.addEventListener('wheel', onWheel, { passive: false });
+        canvas?.addEventListener('touchmove', onTouchMove, { passive: false });
+        return () => {
+            canvas?.removeEventListener('wheel', onWheel);
+            canvas?.removeEventListener('touchmove', onTouchMove);
+        };
+    })
+
+    let dragProject: ((event: any) => void) | null = $state(null)
+    let isDragging = $derived(dragProject !== null) 
+    setContext('graph', {
+        startDrag(project: any) {
+            dragProject = project
+        },
+        stopDrag()  {
+            dragProject = null
+        },
+        isDragging() {
+            return isDragging
+        }
+    })
+
+    let isDraggingCanvas = false
+    let canvasOffset = $state({ x: 0, y: 0 })
+    function scrollCanvas(offset: { x: number; y: number }) {
+        canvasOffset.x += offset.x
+        canvasOffset.y += offset.y
+    }
+
+    function onMouseMove(event: any) {
+        if (isDraggingCanvas) {
+            // drag with mouse
+            scrollCanvas({
+                x: event.movementX,
+                y: event.movementY,
+            })
+            return;
+        } 
+    
+        dragProject?.(event)
+    }
+
+    function onMouseUp() {
+        dragProject = null
+        isDraggingCanvas = false
+    }
+
+    function onCanvasMouseDown(event: any) {
+        if (event.button === 1) {
+            isDraggingCanvas = true;
+        }
+    }
+
+    function onWheel(event: WheelEvent) {
+        const { deltaX, deltaY, clientX, clientY, ctrlKey, shiftKey } = event
+        if (ctrlKey) {
+            // scale
+            event.preventDefault()
+            
+            // @ts-ignore
+            const canvasRect = event.currentTarget.getBoundingClientRect()
+
+            let normalX = clientX / canvasRect.width - 0.5
+            let normalY = clientY / canvasRect.height - 0.5
+
+            const mouseX = canvasRect.width * normalX
+            const mouseY = canvasRect.height * normalY
+
+            const change = scale.factor * -Math.sign(deltaY)
+            const changedScale = Math.min(Math.max(scale.min, scale.current + change), scale.max)
+
+            const ratio = changedScale / scale.current
+            canvasOffset.x = mouseX - ratio * (mouseX - canvasOffset.x)
+            canvasOffset.y = mouseY - ratio * (mouseY - canvasOffset.y)
+
+            scale.current = changedScale
+        } else if (shiftKey) {
+            // scroll horizontally
+            scrollCanvas({
+                x: -deltaY,
+                y: 0,
+            })
+        } else {
+            // scroll both directions (touchpad)
+            scrollCanvas({
+                x: -deltaX,
+                y: -deltaY,
+            })
+        }
+    }
+
+    let touchStartPos = { x: 0, y: 0 };
+    let isPinching = false;
+
+    function onTouchStart(event: TouchEvent) {
+        if (event.touches.length === 1) {
+            touchStartPos = { x: event.touches[0].clientX, y: event.touches[0].clientY };
+        }
+    }
+
+    function onTouchMove(event: TouchEvent) {
+        event.preventDefault();
+        if (!isPinching && event.touches.length === 1) {
+            const dx = event.touches[0].clientX - touchStartPos.x;
+            const dy = event.touches[0].clientY - touchStartPos.y;
+            touchStartPos = { x: event.touches[0].clientX, y: event.touches[0].clientY };
+            scrollCanvas({ x: dx, y: dy });
+        }
+    }
+
+</script>
+
+<div class="flex flex-col px-1 py-0.5 flex-grow">
+    <div
+        class="flex flex-grow cursor-default w-full h-full overflow-hidden relative"
+        onmousemove={onMouseMove}
+        onmouseup={onMouseUp}
+        onmousedown={onCanvasMouseDown}
+        ontouchstart={onTouchStart}
+        role="button"
+        tabindex="0"
+        bind:this={canvas}
+        class:cursor-grabbing={dragProject !== null}
+        
+    >
+        <div
+            class="flex flex-grow origin-center"
+            style="transform: translate({canvasOffset.x}px, {canvasOffset.y}px) scale({scale.current});"
+        >
+            {@render children()}
+        </div>
+    </div>
+</div>
diff --git a/src/lib/components/CanvasDragger.svelte b/src/lib/components/CanvasDragger.svelte
new file mode 100644
index 0000000..a1f5525
--- /dev/null
+++ b/src/lib/components/CanvasDragger.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { getContext } from 'svelte'
+
+    let { startDrag, stopDrag, isDragging } = getContext('graph')
+    let grabbing = $derived(isDragging())
+
+    let { drag, end } = $props()
+</script>
+
+<button
+    class="w-4 h-4 absolute right-2 top-2"
+    class:cursor-grab={!grabbing}
+    class:cursor-grabbing={grabbing}
+    onmousedown={() => startDrag(drag)}
+    onmouseup={() => {
+        stopDrag()
+        end()
+    }}
+>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        viewBox="0 0 16 16"
+    >
+        <path
+            fill-rule="evenodd"
+            d="M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10M.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8"
+        />
+    </svg>
+</button>
diff --git a/src/lib/components/Line.svelte b/src/lib/components/Line.svelte
index cbbfa30..dc04e7c 100644
--- a/src/lib/components/Line.svelte
+++ b/src/lib/components/Line.svelte
@@ -1,29 +1,38 @@
-<script>
-    import { messages } from '$lib/index.svelte'
+<script lang="ts">
+    import Message from './Message.svelte'
 
-    let { posLinksX, posLinksY, posIndexX, posIndexY, messageId } = $props()
+    let { from, to }: { from: Message; to: Message } = $props()
 
-    let noteWidth = 96
-    let noteHeight = 68
+    let parent = $derived(from.data.transform)
+    let child = $derived(to.data.transform)
 
-    $effect(() => {
-        let transform = messages.get(messageId).data.transform
+    let childCenter = $derived({
+        x: child.x + child.width / 2,
+        y: child.y + child.height / 2,
+    })
 
-        console.log(transform)
+    let parentCenter = $derived({
+        x: parent.x + parent.width / 2,
+        y: parent.y + parent.height / 2,
     })
+
+    let length = $derived(
+        Math.sqrt(
+            Math.pow(parentCenter.x - childCenter.x, 2) +
+                Math.pow(parentCenter.y - childCenter.y, 2)
+        )
+    )
 </script>
 
 <div
-    class="line absolute h-0.5 bg-black dark:bg-white"
+    class="line absolute h-0.5 bg-black dark:bg-white visible"
     style="
-    left: {posLinksX + noteWidth / 2}px;
-    top: {posLinksY + noteHeight / 2}px;
-    width: {Math.sqrt(
-        Math.pow(posIndexX - posLinksX, 2) + Math.pow(posIndexY - posLinksY, 2)
-    )}px;
+    left: {childCenter.x}px;
+    top: {childCenter.y}px;
+    width: {length}px;
     transform: rotate({(Math.atan2(
-        posIndexY - posLinksY,
-        posIndexX - posLinksX
+        parentCenter.y - childCenter.y,
+        parentCenter.x - childCenter.x
     ) *
         180) /
         Math.PI}deg);
diff --git a/src/lib/components/Message.svelte b/src/lib/components/Message.svelte
index 08def85..0c91efb 100644
--- a/src/lib/components/Message.svelte
+++ b/src/lib/components/Message.svelte
@@ -3,6 +3,7 @@
     import { type Message } from '$lib/index.svelte'
     import Markdown from 'svelte-exmarkdown'
     import { gfmPlugin } from 'svelte-exmarkdown/gfm'
+    import deleteIcon from '$lib/assets/delete.svg?raw'
 
     let {
         value,
@@ -49,17 +50,7 @@
             onclick={() => ondelete(value)}
             title="Delete a note"
         >
-            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
-                ><g
-                    fill="none"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    ><path
-                        d="M3 6h18M5 6v14c0 1.1.9 2 2 2h10a2 2 0 0 0 2-2V6M8 6V4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2M14 11v6M10 11v6"
-                    /></g
-                ></svg
-            >
+            {@html deleteIcon}
         </button>
     </div>
 </div>
diff --git a/src/lib/components/Note.svelte b/src/lib/components/Note.svelte
index 3e9821c..a23a32f 100644
--- a/src/lib/components/Note.svelte
+++ b/src/lib/components/Note.svelte
@@ -1,87 +1,53 @@
-<script>
+<script lang="ts">
     import { base } from '$app/paths'
-    import { messages } from '../index.svelte'
+    import { gfmPlugin } from 'svelte-exmarkdown/gfm'
+    import Markdown from 'svelte-exmarkdown'
+    import deleteIcon from '$lib/assets/delete.svg?raw'
+    import { type Message, messages } from '$lib/index.svelte'
+    import CanvasDragger from './CanvasDragger.svelte'
+
     let {
-        posX,
-        posY,
-        messageContent,
-        onMouseDown,
-        messageId,
-        noteWidth,
-        noteHeight,
+        message = $bindable(),
+    }: {
+        message: Message
     } = $props()
 
-    $effect(() => {
-        messages.updateTransform(
-            messageId,
-            { x: posX, y: posY },
-            noteWidth,
-            noteHeight
-        )
-    })
+    let transform = $derived(message.data.transform)
+
+    function dragNote(event: any) {
+        message.data.transform.x += event.movementX
+        message.data.transform.y += event.movementY
+    }
 
-    function copyToClipboard(text) {
-        navigator.clipboard
-            .writeText(text)
-            .then(() => {
-                console.log('Text copied to clipboard')
-            })
-            .catch((err) => {
-                console.error('Failed to copy text: ', err)
-            })
+    function deleteNote() {
+        messages.delete(message.id)
     }
 </script>
 
 <div
-    bind:offsetHeight={noteHeight}
-    bind:offsetWidth={noteWidth}
-    class="note min-w-24 max-w-96 min-h-12 relative pt-3"
-    style="
-            position: absolute;
-            left: {posX}px;
-            top: {posY}px;
-          "
+    bind:offsetWidth={message.data.transform.width}
+    bind:offsetHeight={message.data.transform.height}
+    class="min-w-24 max-w-96 min-h-12 pt-3 visible absolute bg-gray-200 rounded-md flex items-end justify-center"
+    style="left: {transform.x}px; top: {transform.y}px;"
 >
-    <button class="w-4 h-4 absolute right-2 top-2" onmousedown={onMouseDown}>
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            class="bi bi-arrows-move"
-            viewBox="0 0 16 16"
-        >
-            <path
-                fill-rule="evenodd"
-                d="M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10M.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8"
-            />
-        </svg>
-    </button>
+    <CanvasDragger
+        drag={dragNote}
+        end={() =>
+            localStorage.setItem('notes', JSON.stringify(messages.export()))}
+    />
+
     <button
-        class="w-4 h-4 absolute left-2 top-2"
-        onclick={() => copyToClipboard(messageContent)}
+        class="w-4 h-4 absolute left-2 top-2 stroke-black"
+        onclick={deleteNote}
     >
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            class="bi bi-copy"
-            viewBox="0 0 16 16"
-        >
-            <path
-                fill-rule="evenodd"
-                d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"
-            />
-        </svg>
+        {@html deleteIcon}
     </button>
-    <a class="w-4 h-4 absolute left-8 top-2" href="{base}/#{messageId}">
+    <a class="w-4 h-4 absolute left-8 top-2" href="{base}/#{message.id}">
         <svg
             xmlns="http://www.w3.org/2000/svg"
             width="16"
             height="16"
             fill="currentColor"
-            class="bi bi-link"
             viewBox="0 0 16 16"
         >
             <path
@@ -93,16 +59,13 @@
         </svg>
     </a>
     <div class="flex w-full h-full justify-center">
-        <div class="p-4 w-full break-all">{messageContent}</div>
+        <div class="p-4 w-full break-all">
+            <article class="grow prose prose-zinc">
+                <Markdown md={message.data.content} plugins={[gfmPlugin()]} />
+            </article>
+        </div>
     </div>
 </div>
 
-<style>
-    .note {
-        background-color: lightgray;
-        border-radius: 10px;
-        display: flex;
-        align-items: end;
-        justify-content: center;
-    }
-</style>
+
+
diff --git a/src/lib/index.svelte.ts b/src/lib/index.svelte.ts
index e7054a0..8148dcc 100644
--- a/src/lib/index.svelte.ts
+++ b/src/lib/index.svelte.ts
@@ -19,17 +19,17 @@ class IncrementProvider implements IdProvider {
 }
 const INCREMENT_PROVIDER: IdProvider = new IncrementProvider()
 
+export type Transform = {
+    x: number
+    y: number
+    width: number
+    height: number
+}
+
 export type MessageData = {
     content: string
     createdAt: number
-    transform: {
-        position: {
-            x: number
-            y: number
-        }
-        width: number
-        height: number
-    }
+    transform: Transform
 }
 
 export type Message = {
@@ -40,11 +40,12 @@ export type Message = {
     children: Set<Id>
 }
 
-export function createMessage(text: string): MessageData {
+export function createMessage(text: string, x: number, y: number): MessageData {
     // TODO: Choose transform for a new message
     return {
         content: text,
         createdAt: Date.now(),
+        transform: { x: x, y: y, width: 100, height: 40 },
     }
 }
 
@@ -171,20 +172,6 @@ class Messages {
         }
     }
 
-    updateTransform(
-        id: Id,
-        position: { x: number; y: number },
-        width: number,
-        height: number
-    ) {
-        const message = this.inner[id]
-        if (message) {
-            message.data.transform = { position, width, height }
-        } else {
-            console.error(`Message with id ${id} does not exist.`)
-        }
-    }
-
     clear() {
         this.inner = {}
     }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2a379d9..bd57f55 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -21,7 +21,7 @@
 </script>
 
 <main
-    class="flex flex-col h-screen overflow-hidden bg-slate-100 dark:bg-slate-800"
+    class="flex flex-col h-screen bg-slate-100 dark:bg-slate-800 overflow-hidden"
 >
     <header class="bg-white dark:bg-slate-700 text-gray-700 dark:text-gray-100">
         <ul
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2746422..b0d154a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -27,7 +27,7 @@
     })
 
     let leaf = $derived(messages.get(leafId!))
-    let currentChat = $derived(messages.chatFrom(leafId!, 15).toReversed())
+    let currentChat = $derived(messages.chatFrom(leafId!, 100).toReversed())
     let lastId = $derived(messages.untilBranchOrLeaf(leafId!))
 
     let textInput = $state('')
@@ -35,7 +35,29 @@
     let textInputElement: HTMLInputElement | null = $state(null)
 
     function appendMessage() {
-        let message = createMessage(textInput)
+        let parentMessageId = $page.url.hash.substring(1)
+        let parentMessage = messages.get(parentMessageId)
+        let { x, y } = parentMessage?.data.transform || { x: 0, y: 0 }
+       
+        let allMessages = messages.export().messages;
+        let allMessagesId = Object.keys(allMessages);
+        allMessagesId.forEach((id) => {
+            let message = messages.get(id);
+            if(message?.data.transform.y === y + 100){
+                x = message?.data.transform.x + 150;
+            }
+            
+        });
+        
+        // let parentChildren = parentMessage?.children || []
+        // if (parentChildren.size > 0) {
+        //     let arrayChildren = Array.from(parentChildren)
+        //     let lastChildId = arrayChildren[arrayChildren.length - 1]
+        //     let lastChild = messages.get(lastChildId)
+        //     x = lastChild!.data.transform.x + 150
+        // }
+
+        let message = createMessage(textInput, x, y + 100)
         leafId = messages.add(leafId, message)
 
         textInput = ''
@@ -57,11 +79,14 @@
         messages.delete(value.id)
         localStorage.setItem('notes', JSON.stringify(messages.export()))
     }
+
+    let inputHeight = $state(0)
+    $inspect(inputHeight)
 </script>
 
 <!-- TODO: Fullsize note editor on a separate page or in a bottom sheet -->
-<div class="container mx-auto">
-    <div class="h-screen flex flex-col justify-end overflow-y-auto p-4 pb-36">
+<div class="flex-grow flex flex-col overflow-y-hidden">
+    <div class="flex flex-col container mx-auto overflow-y-scroll">
         {#if currentChat}
             {#each currentChat as message}
                 <Message
@@ -92,36 +117,36 @@
         {/if}
     </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"
-    >
-        <form
-            class="flex items-center container mx-auto"
-            onsubmit={appendMessage}
-        >
-            <input
-                type="text"
-                bind:this={textInputElement}
-                bind:value={textInput}
-                placeholder="Type a message..."
-                class="w-full p-2 focus:outline-none focus:border-blue-500 bg-transparent"
-            />
-            <button class="px-4 py-2 rounded-md ml-2" type="submit">
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="w-8 h-8 fill-current"
-                    viewBox="0 0 64 64"
-                    ><defs
-                        ><clipPath id="a"
-                            ><rect width="64" height="64"></rect></clipPath
-                        ></defs
-                    ><g clip-path="url(#a)"
-                        ><path
-                            d="M 8.216 36.338 L 26.885 32.604 C 28.552 32.271 28.552 31.729 26.885 31.396 L 8.216 27.662 C 7.104 27.44 6.021 26.356 5.799 25.245 L 2.065 6.576 C 1.731 4.908 2.714 4.133 4.259 4.846 L 61.228 31.139 C 62.257 31.614 62.257 32.386 61.228 32.861 L 4.259 59.154 C 2.714 59.867 1.731 59.092 2.065 57.424 L 5.799 38.755 C 6.021 37.644 7.104 36.56 8.216 36.338 Z "
-                        ></path></g
-                    ></svg
-                >
-            </button>
-        </form>
-    </footer>
+    <div class="block" style="height: {inputHeight + 16}px"></div>
 </div>
+
+<footer
+    bind:clientHeight={inputHeight}
+    class="dark:text-white bg-slate-100 dark:bg-slate-700 border-t border-gray-300 fixed bottom-0 left-0 dark:border-slate-600 px-4 py-2 md:py-4 w-full"
+>
+    <form class="flex items-center container mx-auto" onsubmit={appendMessage}>
+        <input
+            type="text"
+            bind:this={textInputElement}
+            bind:value={textInput}
+            placeholder="Type a message..."
+            class="w-full p-2 focus:outline-none focus:border-blue-500 bg-transparent"
+        />
+        <button class="py-2 rounded-md ml-2" type="submit">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="w-8 h-8 fill-current"
+                viewBox="0 0 64 64"
+                ><defs
+                    ><clipPath id="a"
+                        ><rect width="64" height="64"></rect></clipPath
+                    ></defs
+                ><g clip-path="url(#a)"
+                    ><path
+                        d="M 8.216 36.338 L 26.885 32.604 C 28.552 32.271 28.552 31.729 26.885 31.396 L 8.216 27.662 C 7.104 27.44 6.021 26.356 5.799 25.245 L 2.065 6.576 C 1.731 4.908 2.714 4.133 4.259 4.846 L 61.228 31.139 C 62.257 31.614 62.257 32.386 61.228 32.861 L 4.259 59.154 C 2.714 59.867 1.731 59.092 2.065 57.424 L 5.799 38.755 C 6.021 37.644 7.104 36.56 8.216 36.338 Z "
+                    ></path></g
+                ></svg
+            >
+        </button>
+    </form>
+</footer>
diff --git a/src/routes/graph/+page.svelte b/src/routes/graph/+page.svelte
index 3f2a439..82fe5e7 100644
--- a/src/routes/graph/+page.svelte
+++ b/src/routes/graph/+page.svelte
@@ -1,91 +1,21 @@
 <script lang="ts">
-    import { onMount } from 'svelte'
-    import Note from '../../lib/components/Note.svelte'
-    import Line from '../../lib/components/Line.svelte'
+    import Canvas from '$lib/components/Canvas.svelte'
+    import Line from '$lib/components/Line.svelte'
+    import Note from '$lib/components/Note.svelte'
+    import { messages } from '$lib/index.svelte'
 
-    let links = {}
-    let messages = {}
-    let positions = {}
-
-    onMount(() => {
-        let data = localStorage.getItem('notes')
-        let parseData = JSON.parse(data)
-        links = parseData.links
-        messages = parseData.messages
-
-        let messageYPos = 0
-        let messageXPos = 200
-
-        let parents = new Set()
-        let childrenPos = {}
-
-        Object.keys(messages).map((index) => {
-            if (parents.has(links[index])) {
-                positions[index] = {
-                    x: childrenPos[links[index]].x + 150,
-                    y: childrenPos[links[index]].y,
-                }
-                childrenPos[links[index]].x = childrenPos[links[index]].x + 150
-            } else {
-                let newYPos = messageYPos * 100 + 20
-                let newXPos = messageXPos + 100
-                parents.add(links[index])
-                childrenPos[links[index]] = { x: newXPos, y: newYPos }
-                positions[index] = { x: newXPos, y: newYPos }
-                messageYPos++
-            }
-        })
+    $effect(() => {
+        localStorage.setItem('notes', JSON.stringify(messages.export()))
     })
-
-    let dragging = null as any
-    let offset = { x: 0, y: 0 }
-
-    function onMouseDown(event: any, index: number) {
-        dragging = index
-        offset.x = event.clientX - positions[index].x
-        offset.y = event.clientY - positions[index].y
-    }
-
-    function onMouseMove(event: any) {
-        if (dragging !== null) {
-            positions[dragging] = {
-                x: event.clientX - offset.x,
-                y: event.clientY - offset.y,
-            }
-        }
-    }
-
-    function onMouseUp() {
-        dragging = null
-    }
 </script>
 
-<div class="flex flex-col px-1 py-0.5 flex-grow">
-    <div
-        class="border border-black flex flex-grow cursor-default"
-        onmousemove={onMouseMove}
-        onmouseup={onMouseUp}
-        style="position: relative;"
-        role="button"
-        tabindex="0"
-    >
-        {#each Object.keys(links) as index}
-            <Line
-                messageId={index}
-                posIndexX={positions[index].x}
-                posIndexY={positions[index].y}
-                posLinksX={positions[links[index]].x}
-                posLinksY={positions[links[index]].y}
-            />
-        {/each}
-        {#each Object.keys(messages) as index}
-            <Note
-                messageId={index}
-                posX={positions[index].x}
-                posY={positions[index].y}
-                messageContent={messages[index].content}
-                onMouseDown={(event) => onMouseDown(event, index)}
-            />
-        {/each}
-    </div>
-</div>
+<Canvas>
+    {#each Object.values(messages.inner) as message}
+        {#if message.parent}
+            <Line from={messages.inner[message.parent]} to={message} />
+        {/if}
+    {/each}
+    {#each Object.values(messages.inner) as message}
+        <Note {message} />
+    {/each}
+</Canvas>
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 6057703..c7d3382 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -10,6 +10,7 @@
 
     function importGraph() {
         messages.import(JSON.parse(raw))
+        localStorage.setItem('notes', JSON.stringify(messages.export()))
     }
 
     function deleteGraph() {