diff --git a/webapp/src/lib/css/main.css b/webapp/src/lib/css/main.css
index 46066a6..a0a9792 100644
--- a/webapp/src/lib/css/main.css
+++ b/webapp/src/lib/css/main.css
@@ -17,6 +17,7 @@ a.styled, button.styled {
 
 a.styled:hover, button.styled:hover {
     text-decoration: underline;
+    cursor: pointer;
 }
 
 .tb-margin {
diff --git a/webapp/src/routes/api/tickets/[prefix]/[t_id]/+server.js b/webapp/src/routes/api/tickets/[prefix]/[t_id]/+server.js
new file mode 100644
index 0000000..05bf0ea
--- /dev/null
+++ b/webapp/src/routes/api/tickets/[prefix]/[t_id]/+server.js
@@ -0,0 +1,24 @@
+import { env } from "$env/dynamic/private";
+import { db } from "$lib/server/db";
+import { tickets } from "$lib/server/db/schema";
+import { eq, and } from "drizzle-orm";
+
+export async function GET({ params }) {
+    if (env.TAM3_REMOTE) {
+        const res = await fetch(`${env.TAM3_REMOTE}/api/tickets/${params.prefix}/${params.t_id}/?api_key=${env.TAM3_REMOTE}`);
+        if (!res.ok) {
+            return new Response(JSON.stringify({detail: "Unable to fetch ticket."}), {status: res.status, statusText: res.statusText})
+        }
+        const data = await res.json()
+        return new Response(JSON.stringify(data), {status: 200, statusText: "Ticket fetched successfully."})
+    } else {
+        let r_data = {};
+        const data = await db.select().from(tickets).where(and(eq(tickets.prefix, params.prefix), eq(tickets.t_id, params.t_id)));
+        if (data[0]) {
+            r_data = {...data[0], changed: false};
+        } else {
+            r_data = {prefix: params.prefix, t_id: params.t_id, first_name: "", last_name: "", phone_number: "", preference: "CALL", changed: false};
+        };
+        return new Response(JSON.stringify(r_data), {status: 200, statusText: "Ticket loaded successfully."})
+    }
+}
\ No newline at end of file
diff --git a/webapp/src/routes/baskets/[prefix]/+page.svelte b/webapp/src/routes/baskets/[prefix]/+page.svelte
index 12f3723..5450ae8 100644
--- a/webapp/src/routes/baskets/[prefix]/+page.svelte
+++ b/webapp/src/routes/baskets/[prefix]/+page.svelte
@@ -13,7 +13,7 @@
     function changeFocus(idx) {
         const focusDe = document.getElementById(`${idx}_de`);
         if (focusDe) {
-            focusDe.focus();
+            focusDe.select();
         }
     }
 
diff --git a/webapp/src/routes/drawing/[prefix]/+page.svelte b/webapp/src/routes/drawing/[prefix]/+page.svelte
index c5e2de1..002cee0 100644
--- a/webapp/src/routes/drawing/[prefix]/+page.svelte
+++ b/webapp/src/routes/drawing/[prefix]/+page.svelte
@@ -9,8 +9,83 @@
     let current_drawings = $state([]);
     let copy_buffer = $state({prefix: prefix.name, b_id: 1, winning_ticket: 0, winner: ", "});
 
+    function changeFocus(idx) {
+        const focusWt = document.getElementById(`${idx}_wt`);
+        if (focusWt) {
+            focusWt.select();
+        }
+    }
 
-    const functions = {}
+    const functions = {
+        refreshPage: async () => {
+            const res = await fetch(`/api/combined/${prefix.name}/${pagerForm.id_from}/${pagerForm.id_to}`);
+            if (res.ok) {
+                const data = await res.json();
+                current_drawings = [...data];
+                setTimeout(() => changeFocus(0), 100);
+            }
+        },
+        prevPage: () => {
+            const diff = current_drawings.length;
+            pagerForm.id_from -= diff;
+            pagerForm.id_to -= diff;
+            functions.refreshPage();
+        },
+        nextPage: () => {
+            const diff = current_drawings.length;
+            pagerForm.id_from += diff;
+            pagerForm.id_to += diff;
+            functions.refreshPage();
+        },
+        duplicateDown: () => {
+            const next_idx = current_idx + 1;
+            if (current_drawings[next_idx]) {
+                current_drawings[next_idx] = {...current_drawings[current_idx], b_id: current_drawings[next_idx].b_id, changed: true};
+                changeFocus(next_idx);
+            } else {
+                changeFocus(current_idx);
+            }
+        },
+        duplicateUp: () => {
+            const prev_idx = current_idx - 1;
+            if (prev_idx >= 0) {
+                current_drawings[prev_idx] = {...current_drawing[current_idx], b_id: current_drawings[prev_idx].b_id, changed: true};
+                changeFocus(prev_idx);
+            } else {
+                changeFocus(current_idx);
+            }
+        },
+        gotoNext: () => {
+            const next_idx = current_idx + 1;
+            if (current_drawings[next_idx]) {
+                changeFocus(next_idx);
+            } else {
+                changeFocus(current_idx);
+            }
+        },
+        gotoPrev: () => {
+            const prev_idx = current_idx - 1;
+            if (prev_idx >= 0) {
+                changeFocus(prev_idx);
+            } else {
+                changeFocus(current_idx);
+            }
+        },
+        copy: () => {
+            copy_buffer = {...current_drawings[current_idx]};
+        },
+        paste: () => {
+            current_drawings[current_idx] = {...copy_buffer, b_id: current_drawings[current_idx], changed: true};
+        },
+        saveAll: async () => {
+            const to_save = current_drawings.filter((drawing) => drawing.changed === true);
+            const res = await fetch("/api/combined", {body: JSON.stringify(to_save), method: 'POST', headers: {'Content-Type': 'application/json'}});
+            if (res.ok) {
+                for (let drawing of current_drawings) {drawing.changed = false};
+                changeFocus(0);
+            }
+        }
+    }
 
     if (browser) {
         document.title = `${prefix.name} Drawing Form`
@@ -30,9 +105,16 @@
     </thead>
     <tbody>
         {#each current_drawings as drawing, idx}
-        <tr>
+        <tr onfocusin={() => current_idx = idx}>
             <td>{drawing.b_id}</td>
-            <td><input type="number" id="{idx}_wt" bind:value={drawing.winning_ticket}></td>
+            <td><input type="number" id="{idx}_wt" bind:value={drawing.winning_ticket} onchange={async () => {
+                drawing.changed = true;
+                const res = await fetch(`/api/tickets/${prefix.name}/${drawing.winning_ticket}`);
+                if (res.ok) {
+                    const t_data = await res.json()
+                    drawing.winner = `${t_data.last_name}, ${t_data.first_name}`
+                }
+            }}></td>
             <td>{drawing.winner}</td>
             <td><button tabindex="-1">{drawing.changed ? "Y" : "N"}</button></td>
         </tr>
diff --git a/webapp/src/routes/prefixes/+page.svelte b/webapp/src/routes/prefixes/+page.svelte
index 2feadca..a115897 100644
--- a/webapp/src/routes/prefixes/+page.svelte
+++ b/webapp/src/routes/prefixes/+page.svelte
@@ -5,6 +5,11 @@
     let prefix_form = $state({name: "", color: "white", weight: 0})
     let status = $state(``)
 
+    function selectName() {
+        const i_name = document.getElementById("i_name");
+        i_name.select();
+    }
+
     async function getPrefixes() {
         const res = await fetch("/api/prefixes/");
         if (!res.ok) {
@@ -30,6 +35,7 @@
         } else {
             status = `${res.statusText}`;
             getPrefixes();
+            selectName();
         }
     }
 
@@ -45,6 +51,7 @@
 
     if (browser) {
         getPrefixes()
+        document.title = "Edit Prefixes"
     }
 </script>
 
@@ -52,7 +59,7 @@
 <div class="form">
     <div>
         <div>Name</div>
-        <div><input type="text" class="one-hundred" bind:value={prefix_form.name}></div>
+        <div><input type="text" id="i_name" class="one-hundred" bind:value={prefix_form.name}></div>
     </div>
     <div>
         <div>Color</div>
diff --git a/webapp/src/routes/tickets/[prefix]/+page.svelte b/webapp/src/routes/tickets/[prefix]/+page.svelte
index 9bae2ae..161d888 100644
--- a/webapp/src/routes/tickets/[prefix]/+page.svelte
+++ b/webapp/src/routes/tickets/[prefix]/+page.svelte
@@ -12,7 +12,7 @@
     function changeFocus(idx) {
         const focusFn = document.getElementById(`${idx}_fn`);
         if (focusFn) {
-            focusFn.focus();
+            focusFn.select();
         }
     }