diff --git a/src/lib/server/logging.ts b/src/lib/server/logging.ts
index e6d1aba..99b53c5 100644
--- a/src/lib/server/logging.ts
+++ b/src/lib/server/logging.ts
@@ -2,7 +2,7 @@ import winston from "winston"
 
 const { combine, timestamp, json } = winston.format
 export const logger = winston.createLogger({
-    level: "info",
+    level: "debug",
     format: combine(
         timestamp({
             format: "YYYY-MM-DD HH:mm:ss.SSS"
diff --git a/src/lib/server/sql.ts b/src/lib/server/sql.ts
index bab967f..78add2e 100644
--- a/src/lib/server/sql.ts
+++ b/src/lib/server/sql.ts
@@ -17,6 +17,7 @@ export type SqlTemplateSchema = {
     id: number
     text: string
     parent_id: number | null
+    priority: number
 }
 
 export type SqlDsmCodeSchema = {
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index f355157..33547aa 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,6 @@
 export function shortenText(str: string, maxLength = 200) {
     if (str.length > maxLength) {
-        return str.substring(0, maxLength) + "..."
+        return str.substring(0, maxLength).trim() + "..."
     }
     return str
 }
diff --git a/src/routes/api/templates/[id]/+server.ts b/src/routes/api/templates/[id]/+server.ts
index d4fb496..e29d923 100644
--- a/src/routes/api/templates/[id]/+server.ts
+++ b/src/routes/api/templates/[id]/+server.ts
@@ -1,5 +1,5 @@
 import { logger } from "$lib/server/logging"
-import { pool, type SqlTemplateSchema } from "$lib/server/sql"
+import { pool } from "$lib/server/sql"
 
 export async function POST({ request, params }) {
     const body = await request.json()
@@ -26,45 +26,29 @@ export async function POST({ request, params }) {
         })
 }
 
-export async function PATCH({ params, request }) {
-    const id = params.id
-    let { text, parent_id } = await request.json()
-    logger.info(`Patching template with id ${id}`)
-
-    const existingtemplate = await pool.connect().then(async client => {
-        const result = await client.query({
-            text: "SELECT * FROM templates WHERE id = $1",
-            values: [id]
-        })
-        client.release()
-        return result.rows[0] as SqlTemplateSchema
-    })
+type PutRequest = {
+    text: string | null
+    parentId: number | null
+    priority: number | null
+}
 
-    if (!existingtemplate) {
-        throw new Error(`template with id ${id} not found`)
-    }
-    if (existingtemplate) {
-        text = text ?? existingtemplate.text
-        parent_id = parent_id ?? existingtemplate.parent_id
-    }
+export async function PUT({ params, request }) {
+    const id = params.id
+    const { text, parentId, priority } = (await request.json()) as PutRequest
 
-    const query = {
-        text: "UPDATE templates SET",
-        values: [] as string[]
+    if (text === null || parentId === null || priority === null) {
+        logger.error("Missing parameter in request.")
+        return new Response(null, { status: 400 })
     }
 
-    if (text !== undefined) {
-        query.text += ` text = $${query.values.length + 1},`
-        query.values.push(text)
-    }
+    logger.info(`Patching template with id ${id}`)
 
-    if (parent_id !== undefined) {
-        query.text += ` parent_id = $${query.values.length + 1},`
-        query.values.push(String(parent_id))
+    const query = {
+        text: "UPDATE templates SET text = $1, parent_id = $2, priority = $3 WHERE id = $4",
+        values: [text, parentId, priority, id]
     }
 
-    query.text = query.text.slice(0, -1) + ` WHERE id = $${query.values.length + 1}`
-    query.values.push(String(id))
+    logger.debug(query)
 
     return await pool
         .connect()
diff --git a/src/routes/templates/DecisionTree.test.ts b/src/routes/templates/DecisionTree.test.ts
new file mode 100644
index 0000000..0d4815a
--- /dev/null
+++ b/src/routes/templates/DecisionTree.test.ts
@@ -0,0 +1,126 @@
+import { describe, it, expect } from "vitest"
+import { DecisionTree } from "./DecisionTree"
+import type { SqlTemplateSchema } from "$lib/server/sql"
+
+describe("DecisionTree", () => {
+    const mockData: SqlTemplateSchema[] = [
+        { id: 1, text: "Root", parent_id: null, priority: 0 },
+        { id: 2, text: "Child 1", parent_id: 1, priority: 0 },
+        { id: 3, text: "Child 2", parent_id: 1, priority: 1 },
+        { id: 4, text: "Grandchild 1", parent_id: 2, priority: 0 },
+        { id: 5, text: "Grandchild 2", parent_id: 2, priority: 1 }
+    ]
+
+    it("should construct a tree correctly", () => {
+        const tree = new DecisionTree(mockData)
+
+        expect(tree.id).toBe(1)
+        expect(tree.text).toBe("Root")
+        expect(tree.children.length).toBe(2)
+        expect(tree.children[0].id).toBe(2)
+        expect(tree.children[1].id).toBe(3)
+        expect(tree.children[0].children.length).toBe(2)
+    })
+
+    it("should get parents correctly", () => {
+        const tree = new DecisionTree(mockData)
+        const grandchild = tree.getNodeById(4)
+
+        expect(grandchild).not.toBeNull()
+        if (grandchild) {
+            const parents = grandchild.getAncestors()
+            expect(parents.length).toBe(2)
+            expect(parents[0].id).toBe(1)
+            expect(parents[1].id).toBe(2)
+        }
+    })
+
+    it("should get children recursively", () => {
+        const tree = new DecisionTree(mockData)
+        const children = tree.getChildrenRecursive()
+
+        expect(children.length).toBe(4)
+        expect(children.map(c => c.id).sort()).toEqual([2, 3, 4, 5])
+    })
+
+    it("should filter children by ids", () => {
+        const tree = new DecisionTree(mockData)
+        const filtered = tree.filterChildrenByIds([3, 4])
+
+        expect(filtered.length).toBe(2)
+        expect(filtered.map(c => c.id).sort()).toEqual([3, 4])
+    })
+
+    it("should get path correctly", () => {
+        const tree = new DecisionTree(mockData)
+        const grandchild = tree.getNodeById(4)
+
+        expect(grandchild).not.toBeNull()
+
+        if (grandchild) {
+            const path = grandchild.getPath()
+            expect(path).toEqual(["Root", "Child 1"])
+        }
+    })
+
+    it("should get node by id", () => {
+        const tree = new DecisionTree(mockData)
+        const node = tree.getNodeById(3)
+        expect(node).not.toBeNull()
+        expect(node?.id).toBe(3)
+        expect(node?.text).toBe("Child 2")
+    })
+
+    it("should add child correctly", () => {
+        const tree = new DecisionTree(mockData)
+        const newChild = new DecisionTree([{ id: 6, text: "New Child", parent_id: 1, priority: 0 }], 6)
+
+        tree.addChild(newChild, 1)
+
+        expect(tree.children.length).toBe(3)
+        expect(tree.children[1].id).toBe(6)
+        expect(tree.children[1].priority).toBe(1)
+        expect(tree.children[2].priority).toBe(2)
+    })
+
+    it("should add child at end for index too large", () => {
+        const tree = new DecisionTree(mockData)
+        const newChild = new DecisionTree([{ id: 6, text: "New Child", parent_id: 1, priority: 0 }], 6)
+
+        tree.addChild(newChild, 99)
+
+        expect(tree.children.length).toBe(3)
+        expect(tree.children[2].id).toBe(6)
+    })
+
+    it("should delete child correctly", () => {
+        const tree = new DecisionTree(mockData)
+
+        tree.deleteChild(2)
+
+        expect(tree.children.length).toBe(1)
+        expect(tree.children[0].id).toBe(3)
+        expect(tree.children[0].priority).toBe(0)
+    })
+
+    it("should move child correctly", () => {
+        const tree = new DecisionTree(mockData)
+
+        tree.moveChild(3, 0)
+
+        expect(tree.children[0].id).toBe(3)
+        expect(tree.children[0].priority).toBe(0)
+        expect(tree.children[1].id).toBe(2)
+    })
+
+    it("should sort children recursively", () => {
+        const unsortedData: SqlTemplateSchema[] = [
+            { id: 1, text: "Root", parent_id: null, priority: 0 },
+            { id: 2, text: "Child 1", parent_id: 1, priority: 1 },
+            { id: 3, text: "Child 2", parent_id: 1, priority: 0 }
+        ]
+        const tree = new DecisionTree(unsortedData)
+        expect(tree.children[0].id).toBe(3)
+        expect(tree.children[1].id).toBe(2)
+    })
+})
diff --git a/src/routes/templates/DecisionTree.ts b/src/routes/templates/DecisionTree.ts
index 9bb754b..65c7e60 100644
--- a/src/routes/templates/DecisionTree.ts
+++ b/src/routes/templates/DecisionTree.ts
@@ -22,10 +22,16 @@ export class DecisionTree {
         this.parent = parent
         this.children = table
             .filter(node => node.parent_id === this.id)
+            .sort((a, b) => a.priority - b.priority)
             .map(child => new DecisionTree(table, child.id, this))
+        this.recursiveSortChildren()
     }
 
-    getParents(): DecisionTree[] {
+    get priority(): number {
+        return this.parent?.children.findIndex(child => child.id === this.id) ?? 0
+    }
+
+    getAncestors(): DecisionTree[] {
         const parents: DecisionTree[] = []
         let current: DecisionTree | undefined = this.parent
         while (current) {
@@ -71,14 +77,40 @@ export class DecisionTree {
         return null
     }
 
-    deleteNodeById(id: number): DecisionTree {
-        this.children = this.children.filter(child => child.id !== id)
-        this.children.forEach(child => child.deleteNodeById(id))
+    addChild(child: DecisionTree, index: number | undefined = undefined) {
+        if (index === undefined) {
+            index = this.children.length + 1
+        }
+        child.parent = this
+        this.children = [...this.children.slice(0, index), child, ...this.children.slice(index)]
+        return this
+    }
+
+    deleteChild(id: number) {
+        const childIndex = this.children.findIndex(child => child.id === id)
+        if (childIndex === -1) {
+            return
+        }
+        this.children.splice(childIndex, 1)
+        return this
+    }
+
+    moveChild(id: number, newIndex: number) {
+        if (newIndex >= this.children.length) return
+
+        const currentIndex = this.children.findIndex(child => child.id === id)
+        if (currentIndex === -1 || currentIndex === newIndex) return
+
+        const child = this.children[currentIndex]
+
+        this.deleteChild(id)
+        this.addChild(child, newIndex)
+
         return this
     }
 
     recursiveSortChildren() {
-        this.children = this.children?.sort((a, b) => a.text.localeCompare(b.text))
+        this.children = this.children?.sort((a, b) => a.priority - b.priority)
         this.children?.forEach(child => child.recursiveSortChildren())
     }
 }
diff --git a/src/routes/templates/TemplatesDirectory/AdminButtons.svelte b/src/routes/templates/TemplatesDirectory/AdminButtons.svelte
deleted file mode 100644
index 9c73084..0000000
--- a/src/routes/templates/TemplatesDirectory/AdminButtons.svelte
+++ /dev/null
@@ -1,145 +0,0 @@
-<script lang="ts">
-    import EditIcon from "$lib/icons/EditIcon.svelte"
-    import FileIcon from "$lib/icons/FileIcon.svelte"
-    import TrashIcon from "$lib/icons/TrashIcon.svelte"
-    import { shortenText } from "$lib/utils"
-    import { getModalStore, getToastStore, type ModalSettings } from "@skeletonlabs/skeleton"
-    import { DecisionTree } from "../DecisionTree"
-
-    export let node: DecisionTree
-    export let showCreate = true
-    export let showEdit = true
-    export let showDelete = true
-
-    const modalStore = getModalStore()
-    const toastStore = getToastStore()
-
-    const instructions = `To add a template value, write it in all caps with dashes for spaces
-        between two curly brackets. For example: {{CHILD-NAME}} could be used
-        as a template for a child's name. Templates values with an ! (e.g. {{!SYMPTOM_FREQUENCY}})
-        will be left in the Word document, marked in red. Pronouns may also be added with {{PRONOUN-0}}
-        through {{PRONOUN-4}} representing "he/she, him/her, his/her, his/hers, himself/herself".
-        Please conjugate verbs associated with these pronouns in the singular.`
-
-    const adminButtons = [
-        {
-            icon: FileIcon,
-            class: "text-success-600",
-            onClick: onCreate,
-            show: showCreate
-        },
-        {
-            icon: EditIcon,
-            class: "text-warning-600",
-            onClick: onEdit,
-            show: showEdit
-        },
-        {
-            icon: TrashIcon,
-            class: "text-error-600",
-            onClick: onDelete,
-            show: showDelete
-        }
-    ]
-
-    async function onCreate() {
-        const modal: ModalSettings = {
-            type: "component",
-            component: "markdown",
-            title: `New template inside "${shortenText([...node.getPath(), node.text].join(" | "))}"`,
-            meta: { instructions: instructions, value: "" },
-            response: async response => {
-                if (!response.value) return
-                await fetch(`/api/templates/${node.id}`, {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ text: response.value })
-                })
-                    .then(res => {
-                        if (!res.ok) {
-                            toastStore.trigger({
-                                message: `Failed to create the template: ${res.statusText}`,
-                                background: "variant-filled-error"
-                            })
-                        } else {
-                            return res.json()
-                        }
-                    })
-                    .then(newNode => {
-                        node.children = node.children.concat(new DecisionTree([newNode], newNode.id, node))
-                    })
-            }
-        }
-        modalStore.trigger(modal)
-    }
-
-    async function onEdit() {
-        const parentId = node.parent ? node.parent.id : null
-        const modal: ModalSettings = {
-            type: "component",
-            component: "markdown",
-            title: `Edit template`,
-            meta: { instructions: instructions, value: node.text },
-            response: async response => {
-                if (!response) return
-                await fetch(`/api/templates/${node.id}`, {
-                    method: "PATCH",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ text: response.value, parentId })
-                }).then(result => {
-                    if (!result.ok) {
-                        toastStore.trigger({
-                            message: `Failed to edit the template: ${result.statusText}`,
-                            background: "variant-filled-error"
-                        })
-                    }
-                    node.text = response.value
-                })
-            }
-        }
-        modalStore.trigger(modal)
-    }
-
-    async function onDelete() {
-        if (!node.parent) {
-            toastStore.trigger({ message: "Cannot delete the root node.", background: "variant-filled-error" })
-            return
-        }
-        const modal: ModalSettings = {
-            type: "confirm",
-            title: "Delete template",
-            body: `Are you sure you want to delete "${shortenText(node.text)}" and any subdirectories?`,
-            response: async value => {
-                if (!value) return
-                await fetch(`/api/templates/${node.id}`, { method: "DELETE" }).then(response => {
-                    if (!response.ok) {
-                        toastStore.trigger({
-                            message: "Failed to delete the template: " + response.statusText,
-                            background: "variant-filled-error"
-                        })
-                    } else if (!node.parent) {
-                        toastStore.trigger({
-                            message: "Cannot delete the root node.",
-                            background: "variant-filled-error"
-                        })
-                    } else {
-                        node.parent.children = node.parent.children.filter(child => child.id !== node.id)
-                    }
-                })
-            }
-        }
-        modalStore.trigger(modal)
-    }
-</script>
-
-<span class="grid grid-rows-1 grid-flow-col gap-0">
-    {#each adminButtons as adminButton}
-        <button
-            on:click={adminButton.onClick}
-            hidden={!adminButton.show}
-            class="btn hover:variant-ghost-primary w-[1rem] h-[1.5rem]"
-        >
-            <svelte:component this={adminButton.icon} class={adminButton.class} />
-        </button>
-    {/each}
-</span>
diff --git a/src/routes/templates/TemplatesDirectory/CreateButton.svelte b/src/routes/templates/TemplatesDirectory/CreateButton.svelte
new file mode 100644
index 0000000..a91b19e
--- /dev/null
+++ b/src/routes/templates/TemplatesDirectory/CreateButton.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import FileIcon from "$lib/icons/FileIcon.svelte"
+    import { shortenText } from "$lib/utils"
+    import { getModalStore, getToastStore, type ModalSettings } from "@skeletonlabs/skeleton"
+    import { DecisionTree } from "../DecisionTree"
+
+    export let node: DecisionTree
+    export let oncreate = () => {}
+
+    const modalStore = getModalStore()
+    const toastStore = getToastStore()
+
+    const instructions = `To add a template value, write it in all caps with dashes for spaces
+        between two curly brackets. For example: {{CHILD-NAME}} could be used
+        as a template for a child's name. Templates values with an ! (e.g. {{!SYMPTOM_FREQUENCY}})
+        will be left in the Word document, marked in red. Pronouns may also be added with {{PRONOUN-0}}
+        through {{PRONOUN-4}} representing "he/she, him/her, his/her, his/hers, himself/herself".
+        Please conjugate verbs associated with these pronouns in the singular.`
+
+    async function localOnCreate() {
+        const modal: ModalSettings = {
+            type: "component",
+            component: "markdown",
+            title: `New template inside "${shortenText([...node.getPath(), node.text].join(" | "))}"`,
+            meta: { instructions: instructions, value: "" },
+            response: async response => {
+                if (!response.value) return
+                await fetch(`/api/templates/${node.id}`, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ text: response.value })
+                })
+                    .then(res => {
+                        if (!res.ok) {
+                            toastStore.trigger({
+                                message: `Failed to create the template: ${res.statusText}`,
+                                background: "variant-filled-error"
+                            })
+                        } else {
+                            return res.json()
+                        }
+                    })
+                    .then(newNode => {
+                        const newChild = new DecisionTree([newNode], newNode.id, node)
+                        node = node.addChild(newChild)
+                        oncreate()
+                    })
+            }
+        }
+        modalStore.trigger(modal)
+    }
+</script>
+
+<button on:click={localOnCreate} class="btn hover:variant-ghost-primary w-[1rem] h-[1.5rem]">
+    <FileIcon class="text-success-600" />
+</button>
diff --git a/src/routes/templates/TemplatesDirectory/DeleteButton.svelte b/src/routes/templates/TemplatesDirectory/DeleteButton.svelte
new file mode 100644
index 0000000..1a56d53
--- /dev/null
+++ b/src/routes/templates/TemplatesDirectory/DeleteButton.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+    import TrashIcon from "$lib/icons/TrashIcon.svelte"
+    import { shortenText } from "$lib/utils"
+    import { getModalStore, getToastStore, type ModalSettings } from "@skeletonlabs/skeleton"
+    import { DecisionTree } from "../DecisionTree"
+    import { openNodeIds } from "./store"
+
+    export let node: DecisionTree
+    export let ondelete: () => void
+
+    const modalStore = getModalStore()
+    const toastStore = getToastStore()
+
+    async function onDelete() {
+        if (!node.parent) {
+            toastStore.trigger({ message: "Cannot delete the root node.", background: "variant-filled-error" })
+            return
+        }
+        const modal: ModalSettings = {
+            type: "confirm",
+            title: "Delete template",
+            body: `Are you sure you want to delete "${shortenText(node.text)}" and any subdirectories?`,
+            response: async value => {
+                if (!value) return
+                await fetch(`/api/templates/${node.id}`, { method: "DELETE" }).then(response => {
+                    if (!response.ok) {
+                        toastStore.trigger({
+                            message: "Failed to delete the template: " + response.statusText,
+                            background: "variant-filled-error"
+                        })
+                    } else if (!node.parent) {
+                        toastStore.trigger({
+                            message: "Cannot delete the root node.",
+                            background: "variant-filled-error"
+                        })
+                    } else {
+                        const parent = node.parent
+                        parent.deleteChild(node.id)
+                        openNodeIds.set(new Set([...$openNodeIds].filter(id => id !== node.id)))
+                        console.log(parent)
+                        ondelete()
+                    }
+                })
+            }
+        }
+        modalStore.trigger(modal)
+    }
+</script>
+
+<button on:click={onDelete} class="btn hover:variant-ghost-primary w-[1rem] h-[1.5rem]">
+    <TrashIcon class="text-error-600" />
+</button>
diff --git a/src/routes/templates/TemplatesDirectory/EditButton.svelte b/src/routes/templates/TemplatesDirectory/EditButton.svelte
new file mode 100644
index 0000000..c554cfe
--- /dev/null
+++ b/src/routes/templates/TemplatesDirectory/EditButton.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+    import EditIcon from "$lib/icons/EditIcon.svelte"
+    import { getModalStore, getToastStore, type ModalSettings } from "@skeletonlabs/skeleton"
+    import { DecisionTree } from "../DecisionTree"
+
+    export let node: DecisionTree
+    export let onedit = () => {}
+
+    const modalStore = getModalStore()
+    const toastStore = getToastStore()
+
+    const instructions = `To add a template value, write it in all caps with dashes for spaces
+        between two curly brackets. For example: {{CHILD-NAME}} could be used
+        as a template for a child's name. Templates values with an ! (e.g. {{!SYMPTOM_FREQUENCY}})
+        will be left in the Word document, marked in red. Pronouns may also be added with {{PRONOUN-0}}
+        through {{PRONOUN-4}} representing "he/she, him/her, his/her, his/hers, himself/herself".
+        Please conjugate verbs associated with these pronouns in the singular.`
+
+    async function onEdit() {
+        const parentId = node.parent ? node.parent.id : null
+        const modal: ModalSettings = {
+            type: "component",
+            component: "markdown",
+            title: `Edit template`,
+            meta: { instructions: instructions, value: node.text },
+            response: async response => {
+                if (!response) return
+                await fetch(`/api/templates/${node.id}`, {
+                    method: "PUT",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ text: response.value, parentId, priority: node.priority })
+                }).then(result => {
+                    if (!result.ok) {
+                        toastStore.trigger({
+                            message: `Failed to edit the template: ${result.statusText}`,
+                            background: "variant-filled-error"
+                        })
+                        return
+                    }
+                    node.text = response.value
+                    onedit()
+                })
+            }
+        }
+        modalStore.trigger(modal)
+    }
+</script>
+
+<button on:click={onEdit} class="btn hover:variant-ghost-primary w-[1rem] h-[1.5rem]">
+    <EditIcon class="text-warning-600" />
+</button>
diff --git a/src/routes/templates/TemplatesDirectory/ModalSearchDecisionTree.svelte b/src/routes/templates/TemplatesDirectory/ModalSearchDecisionTree.svelte
index 1e4828d..8e40166 100644
--- a/src/routes/templates/TemplatesDirectory/ModalSearchDecisionTree.svelte
+++ b/src/routes/templates/TemplatesDirectory/ModalSearchDecisionTree.svelte
@@ -2,8 +2,10 @@
     import { getModalStore } from "@skeletonlabs/skeleton"
     import type { DecisionTree } from "../DecisionTree"
     import Fuse from "fuse.js"
-    import AdminButtons from "./AdminButtons.svelte"
     import { openNodeIds } from "./store"
+    import CreateButton from "./CreateButton.svelte"
+    import EditButton from "./EditButton.svelte"
+    import DeleteButton from "./DeleteButton.svelte"
 
     const modalStore = getModalStore()
 
@@ -45,7 +47,7 @@
         const searchedPaths = searcher.search(searchTerm).map(result => result.item)
         const searchedNodes = allChildNodes.filter(node => searchedPaths.some(path => path.id === node.id))
         const searchedIds = [
-            ...searchedNodes.map(node => [...node.getParents(), node]).flat(),
+            ...searchedNodes.map(node => [...node.getAncestors(), node]).flat(),
             ...searchedNodes.map(node => node.getChildrenRecursive()).flat()
         ]
             .filter((value, index, self) => self.indexOf(value) === index)
@@ -62,7 +64,7 @@
     }
 
     function onSearchClick(node: DecisionTree) {
-        const parents = node.getParents()
+        const parents = node.getAncestors()
         const ids = [...parents.map(parent => parent.id), node.id]
         openNodeIds.set(new Set(ids))
         modalStore.close()
@@ -99,7 +101,11 @@
                                 <!-- svelte-ignore a11y-click-events-have-key-events -->
                                 <!-- svelte-ignore a11y-no-static-element-interactions -->
                                 <div on:click={() => modalStore.close()}>
-                                    <AdminButtons {node} />
+                                    <span class="grid grid-rows-1 grid-flow-col gap-0">
+                                        <CreateButton {node} />
+                                        <EditButton {node} />
+                                        <DeleteButton {node} ondelete={() => {}} />
+                                    </span>
                                 </div>
                             {/if}
                             <button
diff --git a/src/routes/templates/TemplatesDirectory/SearchTemplates.svelte b/src/routes/templates/TemplatesDirectory/SearchTemplates.svelte
index 4f8e5b5..45229bd 100644
--- a/src/routes/templates/TemplatesDirectory/SearchTemplates.svelte
+++ b/src/routes/templates/TemplatesDirectory/SearchTemplates.svelte
@@ -3,7 +3,7 @@
     import type { DecisionTree } from "../DecisionTree"
 
     export let tree: DecisionTree
-    export let filteredNodes: DecisionTree = tree
+    export let filteredNodes: DecisionTree[] = [tree]
 
     const allChildNodes = tree.getChildrenRecursive()
     const pathsTextsAndIds = allChildNodes.map(node => ({
@@ -29,14 +29,14 @@
         const query = input.value.trim()
 
         if (!query) {
-            filteredNodes = tree
+            filteredNodes = [tree]
             return
         }
 
         const searchedPaths = searcher.search(query).map(result => result.item)
         const searchedNodes = allChildNodes.filter(node => searchedPaths.some(path => path.id === node.id))
         const searchIncludingParentKid = [
-            ...searchedNodes.map(node => [...node.getParents(), node]).flat(),
+            ...searchedNodes.map(node => [...node.getAncestors(), node]).flat(),
             ...searchedNodes.map(node => node.getChildrenRecursive()).flat()
         ].filter((value, index, self) => self.indexOf(value) === index)
         filteredNodes = tree.filterChildrenByIds(searchIncludingParentKid.map(node => node.id))
diff --git a/src/routes/templates/TemplatesDirectory/SortableNested.svelte b/src/routes/templates/TemplatesDirectory/SortableNested.svelte
index 511be2d..2acd161 100644
--- a/src/routes/templates/TemplatesDirectory/SortableNested.svelte
+++ b/src/routes/templates/TemplatesDirectory/SortableNested.svelte
@@ -13,22 +13,46 @@
         const targetId = parseInt(event.detail.to.id.split("-")[1])
         const sourceId = parseInt(event.detail.from.id.split("-")[1])
 
-        const sourceNode = node.getNodeById(sourceId)
-        const targetParentNode = node.getNodeById(targetId)?.parent
+        if (targetId === sourceId && event.detail.oldIndex === event.detail.newIndex) return
 
-        if (!sourceNode || !targetParentNode) return
+        const sourceParentNode = node.getNodeById(sourceId)
+        const targetParentNode = node.getNodeById(targetId)
+        if (!sourceParentNode || !targetParentNode) return
+        const movedNode = sourceParentNode.children[event.detail.oldIndex]
+
+        if (!sourceParentNode || !targetParentNode) return
         const modal: ModalSettings = {
             type: "confirm",
             title: "Move template",
-            body: `Are you sure you want to move "${shortenText(sourceNode.text)}" to "${shortenText(
+            body: `Are you sure you want to move "${shortenText(movedNode.text)}" to "${shortenText(
                 targetParentNode.text
             )}"?`,
             response: async confirmed => {
                 if (confirmed) {
-                    await fetch(`/api/templates/${sourceId}`, {
-                        method: "PATCH",
+                    await fetch(`/api/templates/${movedNode.id}`, {
+                        method: "PUT",
                         headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify({ parentId: targetId })
+                        body: JSON.stringify({
+                            text: movedNode.text,
+                            parentId: targetParentNode.id,
+                            priority: event.detail.newIndex
+                        })
+                    }).then(response => {
+                        if (!response.ok) {
+                            const items = event.detail.from.querySelectorAll(":scope > div")
+                            event.detail.from.insertBefore(
+                                event.detail.item,
+                                items[event.detail.oldIndex + (event.detail.oldIndex > event.detail.newIndex)]
+                            )
+                            return false
+                        }
+
+                        if (sourceId === targetId) {
+                            targetParentNode.moveChild(movedNode.id, event.detail.newIndex)
+                        } else {
+                            sourceParentNode.deleteChild(movedNode.id)
+                            targetParentNode.addChild(movedNode, event.detail.newIndex)
+                        }
                     })
                 } else {
                     const items = event.detail.from.querySelectorAll(":scope > div")
diff --git a/src/routes/templates/TemplatesDirectory/SortableNestedNode.svelte b/src/routes/templates/TemplatesDirectory/SortableNestedNode.svelte
index 6977775..c895181 100644
--- a/src/routes/templates/TemplatesDirectory/SortableNestedNode.svelte
+++ b/src/routes/templates/TemplatesDirectory/SortableNestedNode.svelte
@@ -5,9 +5,10 @@
     import Sortable, { type SortableEvent } from "sortablejs"
     import { createEventDispatcher, onMount } from "svelte"
     import SvelteMarkdown from "svelte-markdown"
-    import { slide } from "svelte/transition"
     import type { DecisionTree } from "../DecisionTree"
-    import AdminButtons from "./AdminButtons.svelte"
+    import CreateButton from "./CreateButton.svelte"
+    import DeleteButton from "./DeleteButton.svelte"
+    import EditButton from "./EditButton.svelte"
     import { openNodeIds } from "./store"
 
     export let node: DecisionTree
@@ -15,6 +16,7 @@
     export let isRoot = true
 
     let sorter: Sortable
+    let keyUpdateChildren = false
 
     const dispatch = createEventDispatcher()
 
@@ -35,6 +37,11 @@
         dispatch("save", { node: node })
     }
 
+    function updateChildren() {
+        // Ensure children are re-rendered.
+        node.children = node.children
+    }
+
     onMount(() => {
         const rootElem = document.getElementById(`node-${node.id}`)
         if (!rootElem) return
@@ -63,36 +70,52 @@
     $: sorter?.option("disabled", !editable)
 </script>
 
-<div id={`node-${node.id}`}>
-    <div>
-        <!-- Inner div is necessary because otherwise the child elements are individually draggable.-->
-        <div class="flex items-center space-x-1" transition:slide>
-            <button class="hover-highlight" on:click={node.children.length === 0 ? onSave : fold}>
-                {#if node.children.length === 0}
-                    <CartPlusIcon class="text-secondary-400" />
-                {:else if isFolded}
-                    <FolderClosedIcon class="text-secondary-900" />
-                {:else}
-                    <FolderOpenIcon class="text-secondary-600" />
-                {/if}
-            </button>
-            <div class="indented-list overflow-y-scroll max-h-[200px]">
-                <SvelteMarkdown source={node.text} />
-            </div>
-            {#if editable}
-                <div>
-                    <AdminButtons bind:node showDelete={!isRoot} showEdit={!isRoot} />
-                </div>
+<div>
+    <div class="flex items-center space-x-1">
+        <button class="hover-highlight" on:click={node.children.length === 0 ? onSave : fold}>
+            {#if node.children.length === 0}
+                <CartPlusIcon class="text-secondary-400" />
+            {:else if isFolded}
+                <FolderClosedIcon class="text-secondary-900" />
+            {:else}
+                <FolderOpenIcon class="text-secondary-600" />
             {/if}
+        </button>
+        <div class="indented-list overflow-y-scroll max-h-[200px]">
+            <SvelteMarkdown source={node.text} />
         </div>
-        {#if !isFolded}
-            <div class="border-secondary-500 border-l-2 pl-3 mb-2" transition:slide>
-                {#each node.children as child}
-                    {#key child.id}
-                        <svelte:self bind:node={child} bind:editable isRoot={false} on:drag on:save on:create />
-                    {/key}
-                {/each}
+        {#if editable}
+            <div>
+                <span class="grid grid-rows-1 grid-flow-col gap-0">
+                    <CreateButton
+                        {node}
+                        oncreate={() => {
+                            updateChildren()
+                            dispatch("update")
+                        }}
+                    />
+                    {#if !isRoot}
+                        <EditButton {node} onedit={() => dispatch("update")} />
+                        <DeleteButton {node} ondelete={() => dispatch("update")} />
+                    {/if}
+                </span>
             </div>
         {/if}
     </div>
+
+    <div id={`node-${node.id}`} class:hidden={isFolded} class="border-secondary-500 border-l-2 pl-3 mb-2">
+        {#if !isFolded}
+            {#each node.children as child}
+                <svelte:self
+                    bind:node={child}
+                    bind:editable
+                    isRoot={false}
+                    on:drag
+                    on:save
+                    on:create
+                    on:update={updateChildren}
+                />
+            {/each}
+        {/if}
+    </div>
 </div>