diff --git a/api/app/data/__pycache__/baskets.cpython-314.pyc b/api/app/data/__pycache__/baskets.cpython-314.pyc
new file mode 100644
index 0000000..1568686
Binary files /dev/null and b/api/app/data/__pycache__/baskets.cpython-314.pyc differ
diff --git a/api/app/data/baskets.py b/api/app/data/baskets.py
new file mode 100644
index 0000000..6b82614
--- /dev/null
+++ b/api/app/data/baskets.py
@@ -0,0 +1,65 @@
+from dataclasses import dataclass
+from db import RepoTemplate
+from system.auth import AuthRepo
+from fastapi import APIRouter, Header
+
+@dataclass
+class Basket:
+    prefix: str
+    b_id: int
+    description: str = ""
+    donors: str = ""
+    winning_ticket: int = 0
+
+class BasketRepo(RepoTemplate):
+    def get_all_baskets(self):
+        self.cur.execute("SELECT * FROM baskets ORDER BY prefix, b_id")
+        results = self.cur.fetchall()
+        return [Basket(*r) for r in results]
+    def get_prefix_baskets(self, prefix: str):
+        self.cur.execute("SELECT * FROM baskets WHERE prefix = ? ORDER BY prefix, b_id", (prefix,))
+        results = self.cur.fetchall()
+        return [Basket(*r) for r in results]
+    def get_single_basket(self, prefix: str, b_id: int):
+        self.cur.execute("SELECT * FROM baskets WHERE prefix = ? AND b_id = ? ORDER BY prefix, b_id", (prefix, b_id))
+        results = self.cur.fetchall()
+        return [Basket(*r) for r in results]
+    def get_range_baskets(self, prefix: str, id_from: int, id_to: int):
+        self.cur.execute("""SELECT * FROM baskets WHERE prefix = ? AND b_id BETWEEN ? AND ?
+            ORDER BY prefix, b_id""", (prefix, id_from, id_to))
+        results = self.cur.fetchall()
+        return [Basket(*r) for r in results]
+    def post_baskets(self, bs: list[Basket]):
+        for b in bs:
+            self.cur.execute("""INSERT INTO baskets VALUES (?, ?, ?, ?, ?) ON CONFLICT (prefix, b_id) DO UPDATE SET
+                description = EXCLUDED.description, donors = EXCLUDED.donors""",
+                (b.prefix, b.b_id, b.description, b.donors, b.winning_ticket))
+        self.conn.commit()
+        return bs
+
+basket_router = APIRouter(prefix="/api/baskets")
+
+@basket_router.get("")
+def get_all_baskets(tam_key: str = Header("")):
+    AuthRepo().verify_key(tam_key)
+    return BasketRepo().get_all_baskets()
+
+@basket_router.get("/{prefix}")
+def get_prefix_baskets(prefix: str, tam_key: str = Header("")):
+    AuthRepo().verify_key(tam_key)
+    return BasketRepo().get_prefix_baskets(prefix)
+
+@basket_router.get("/{prefix}/{b_id}")
+def get_single_basket(prefix: str, b_id: int, tam_key: str = Header("")):
+    AuthRepo().verify_key(tam_key)
+    return BasketRepo().get_single_basket(prefix, b_id)
+
+@basket_router.get("/{prefix}/{id_from}/{id_to}")
+def get_range_baskets(prefix: str, id_from: int, id_to: int, tam_key: str = Header("")):
+    AuthRepo().verify_key(tam_key)
+    return BasketRepo().get_range_baskets(prefix, id_from, id_to)
+
+@basket_router.post("")
+def post_baskets(bs: list[Basket], tam_key: str = Header("")):
+    AuthRepo().verify_key(tam_key)
+    return BasketRepo().post_baskets(bs)
diff --git a/api/app/db.py b/api/app/db.py
index 3e1c02b..b1fed1c 100644
--- a/api/app/db.py
+++ b/api/app/db.py
@@ -19,6 +19,8 @@ def init_db():
     cur.execute("CREATE TABLE IF NOT EXISTS prefixes (prefix TEXT PRIMARY KEY, color TEXT, weight INTEGER)")
     cur.execute("""CREATE TABLE IF NOT EXISTS tickets (prefix TEXT, t_id INTEGER, first_name TEXT, last_name TEXT,
         phone_number TEXT, pref TEXT, PRIMARY KEY (prefix, t_id))""")
+    cur.execute("""CREATE TABLE IF NOT EXISTS baskets (prefix TEXT, b_id INTEGER, description TEXT, donors TEXT,
+        winning_ticket INTEGER, PRIMARY KEY (prefix, b_id))""")
     conn.commit()
     conn.close()
 
diff --git a/api/app/routers.py b/api/app/routers.py
index e008d6a..e7a2ba5 100644
--- a/api/app/routers.py
+++ b/api/app/routers.py
@@ -2,8 +2,10 @@ from fastapi import FastAPI
 from system.auth import auth_router
 from system.prefixes import prefix_router
 from data.tickets import tickets_router
+from data.baskets import basket_router
 
 def imp_routers(app: FastAPI):
     app.include_router(auth_router)
     app.include_router(prefix_router)
     app.include_router(tickets_router)
+    app.include_router(basket_router)
diff --git a/client/drizzle.config.js b/client/drizzle.config.js
index a817cd2..11902d4 100644
--- a/client/drizzle.config.js
+++ b/client/drizzle.config.js
@@ -1,6 +1,6 @@
 import { defineConfig } from 'drizzle-kit';
 
-const dbURL = (process.env.TAM_DATA_DIR || "./data") + "/tam-local.db"
+const dbURL = (process.env.TAM_DATA_DIR || './data') + '/tam-local.db';
 
 export default defineConfig({
 	schema: './src/lib/server/db/schema.js',
diff --git a/client/src/app.html b/client/src/app.html
index 6a2bb58..a3adaa3 100644
--- a/client/src/app.html
+++ b/client/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="text-scale" content="scale" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover">
+	<body data-sveltekit-preload-data="tap">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/client/src/lib/client/components/CommandBar.svelte b/client/src/lib/client/components/CommandBar.svelte
index c94cae9..1acc25f 100644
--- a/client/src/lib/client/components/CommandBar.svelte
+++ b/client/src/lib/client/components/CommandBar.svelte
@@ -1,67 +1,82 @@
 <script>
-    import { bS } from "../styles";
-    import { browser } from "$app/environment";
-    import hotkeys from "hotkeys-js";
+	import { bS } from '../styles';
+	import { browser } from '$app/environment';
+	import hotkeys from 'hotkeys-js';
 
-    let { prefix, functions } = $props();
+	let { prefix, functions } = $props();
 
-    if (browser) {
-      hotkeys.filter = () => {return true};
-      hotkeys('alt+l', (e) => {
-        e.preventDefault();
-        if (functions.nextLine) functions.nextLine();
-      });
-      hotkeys('alt+o', (e) => {
-        e.preventDefault();
-        if (functions.prevLine) functions.prevLine();
-      });
-      hotkeys('alt+j', (e) => {
-        e.preventDefault();
-        if (functions.dupDown) functions.dupDown();
-      });
-      hotkeys('alt+u', (e) => {
-        e.preventDefault();
-        if (functions.dupUp) functions.dupUp();
-      });
-      hotkeys('alt+c', (e) => {
-        e.preventDefault();
-        if (functions.copy) functions.copy();
-      });
-      hotkeys('alt+v', (e) => {
-        e.preventDefault();
-        if (functions.paste) functions.paste();
-      });
-      hotkeys('alt+s', (e) => {
-        e.preventDefault();
-        if (functions.save) functions.save();
-      });
-    }
+	if (browser) {
+		hotkeys.filter = () => {
+			return true;
+		};
+		hotkeys('alt+l', (e) => {
+			e.preventDefault();
+			if (functions.nextLine) functions.nextLine();
+		});
+		hotkeys('alt+o', (e) => {
+			e.preventDefault();
+			if (functions.prevLine) functions.prevLine();
+		});
+		hotkeys('alt+j', (e) => {
+			e.preventDefault();
+			if (functions.dupDown) functions.dupDown();
+		});
+		hotkeys('alt+u', (e) => {
+			e.preventDefault();
+			if (functions.dupUp) functions.dupUp();
+		});
+		hotkeys('alt+c', (e) => {
+			e.preventDefault();
+			if (functions.copy) functions.copy();
+		});
+		hotkeys('alt+v', (e) => {
+			e.preventDefault();
+			if (functions.paste) functions.paste();
+		});
+		hotkeys('alt+s', (e) => {
+			e.preventDefault();
+			if (functions.save) functions.save();
+		});
+	}
 </script>
 
 <div class="flex flex-row gap-1 py-1 justify-between">
-    <div class="flex flex-row gap-1">
-        {#if functions.dupDown}
-        <button class={bS[prefix.color]} title="Alt + J" onclick={() => functions.dupDown()}>Duplicate Down</button>
-        {/if}
-        {#if functions.dupUp}
-        <button class={bS[prefix.color]} title="Alt + U" onclick={() => functions.dupUp()}>Duplicate Up</button>
-        {/if}
-        {#if functions.nextLine}
-        <button class={bS[prefix.color]} title="Alt + L" onclick={() => functions.nextLine()}>Next Line</button>
-        {/if}
-        {#if functions.prevLine}
-        <button class={bS[prefix.color]} title="Alt + O" onclick={() => functions.prevLine()}>Previous Line</button>
-        {/if}
-        {#if functions.copy}
-        <button class={bS[prefix.color]} title="Alt + C" onclick={() => functions.copy()}>Copy</button>
-        {/if}
-        {#if functions.paste}
-        <button class={bS[prefix.color]} title="Alt + V" onclick={() => functions.paste()}>Paste</button>
-        {/if}
-    </div>
-    <div class="flex flex-row gap-1">
-        {#if functions.save}
-        <button class={bS[prefix.color]} title="Alt + S" onclick={() => functions.save()}>Save Marked</button>
-        {/if}
-    </div>
+	<div class="flex flex-row gap-1">
+		{#if functions.dupDown}
+			<button class={bS[prefix.color]} title="Alt + J" onclick={() => functions.dupDown()}
+				>Duplicate Down</button
+			>
+		{/if}
+		{#if functions.dupUp}
+			<button class={bS[prefix.color]} title="Alt + U" onclick={() => functions.dupUp()}
+				>Duplicate Up</button
+			>
+		{/if}
+		{#if functions.nextLine}
+			<button class={bS[prefix.color]} title="Alt + L" onclick={() => functions.nextLine()}
+				>Next Line</button
+			>
+		{/if}
+		{#if functions.prevLine}
+			<button class={bS[prefix.color]} title="Alt + O" onclick={() => functions.prevLine()}
+				>Previous Line</button
+			>
+		{/if}
+		{#if functions.copy}
+			<button class={bS[prefix.color]} title="Alt + C" onclick={() => functions.copy()}>Copy</button
+			>
+		{/if}
+		{#if functions.paste}
+			<button class={bS[prefix.color]} title="Alt + V" onclick={() => functions.paste()}
+				>Paste</button
+			>
+		{/if}
+	</div>
+	<div class="flex flex-row gap-1">
+		{#if functions.save}
+			<button class={bS[prefix.color]} title="Alt + S" onclick={() => functions.save()}
+				>Save Marked</button
+			>
+		{/if}
+	</div>
 </div>
diff --git a/client/src/lib/client/components/HeaderBar.svelte b/client/src/lib/client/components/HeaderBar.svelte
index 86806d8..82e0d44 100644
--- a/client/src/lib/client/components/HeaderBar.svelte
+++ b/client/src/lib/client/components/HeaderBar.svelte
@@ -1,13 +1,13 @@
 <script>
-    import { resolve } from '$app/paths';
-    import { bS } from '../styles';
+	import { resolve } from '$app/paths';
+	import { bS } from '../styles';
 
-    let { children } = $props();
+	let { children } = $props();
 </script>
 
-<div id="header_bar" class="p-1 flex flex-row gap-1 items-center">
-    <a href={resolve('/')} class="{bS.gray} font-bold">Main Menu</a>
-    {#if children}
-    {@render children()}
-    {/if}
+<div id="header_bar" class="py-1 flex flex-row gap-1 items-center">
+	<a href={resolve('/')} class="{bS.gray} font-bold">Main Menu</a>
+	{#if children}
+		{@render children()}
+	{/if}
 </div>
diff --git a/client/src/lib/client/styles.js b/client/src/lib/client/styles.js
index 980f9e3..e68e77d 100644
--- a/client/src/lib/client/styles.js
+++ b/client/src/lib/client/styles.js
@@ -1,29 +1,34 @@
 export const tS = {
-  green: 'text-green-800 font-bold',
-  yellow: 'text-yellow-800 font-bold',
-  red: 'text-red-800 font-bold'
-}
+	green: 'text-green-800 font-bold',
+	yellow: 'text-yellow-800 font-bold',
+	red: 'text-red-800 font-bold'
+};
 
 export const bS = {
-  gray: 'px-2 py-1 bg-gray-300 border border-gray-800 rounded hover:bg-gray-400 cursor-pointer',
-  white: 'px-2 py-1 bg-white border border-gray-700 rounded hover:bg-gray-200 cursor-pointer',
-  blue: 'px-2 py-1 bg-blue-300 border border-gray-700 rounded hover:bg-blue-400 cursor-pointer',
-  yellow: 'px-2 py-1 bg-yellow-300 border border-gray-700 rounded hover:bg-yellow-400 cursor-pointer',
-  green: 'px-2 py-1 bg-green-300 border border-gray-700 rounded hover:bg-green-400 cursor-pointer',
-  orange: 'px-2 py-1 bg-orange-300 border border-gray-700 rounded hover:bg-orange-400 cursor-pointer',
-  red: 'px-2 py-1 bg-red-300 border border-gray-700 rounded hover:bg-red-400 cursor-pointer'
-}
+	gray: 'px-2 py-1 bg-gray-300 border border-gray-800 rounded hover:bg-gray-400 cursor-pointer',
+	white: 'px-2 py-1 bg-white border border-gray-700 rounded hover:bg-gray-200 cursor-pointer',
+	blue: 'px-2 py-1 bg-blue-300 border border-gray-700 rounded hover:bg-blue-400 cursor-pointer',
+	yellow:
+		'px-2 py-1 bg-yellow-300 border border-gray-700 rounded hover:bg-yellow-400 cursor-pointer',
+	green: 'px-2 py-1 bg-green-300 border border-gray-700 rounded hover:bg-green-400 cursor-pointer',
+	orange:
+		'px-2 py-1 bg-orange-300 border border-gray-700 rounded hover:bg-orange-400 cursor-pointer',
+	red: 'px-2 py-1 bg-red-300 border border-gray-700 rounded hover:bg-red-400 cursor-pointer'
+};
 
 export const bAS = {
-  gray: 'px-2 py-1 bg-gray-300 border-4 border-gray-800 rounded hover:bg-gray-400 cursor-pointer',
-  white: 'px-2 py-1 bg-white border-4 border-gray-700 rounded hover:bg-gray-200 cursor-pointer',
-  blue: 'px-2 py-1 bg-blue-300 border-4 border-gray-700 rounded hover:bg-blue-400 cursor-pointer',
-  yellow: 'px-2 py-1 bg-yellow-300 border-4 border-gray-700 rounded hover:bg-yellow-400 cursor-pointer',
-  green: 'px-2 py-1 bg-green-300 border-4 border-gray-700 rounded hover:bg-green-400 cursor-pointer',
-  orange: 'px-2 py-1 bg-orange-300 border-4 border-gray-700 rounded hover:bg-orange-400 cursor-pointer',
-  red: 'px-2 py-1 bg-red-300 border-4 border-gray-700 rounded hover:bg-red-400 cursor-pointer'
-}
+	gray: 'px-2 py-1 bg-gray-300 border-4 border-gray-800 rounded hover:bg-gray-400 cursor-pointer',
+	white: 'px-2 py-1 bg-white border-4 border-gray-700 rounded hover:bg-gray-200 cursor-pointer',
+	blue: 'px-2 py-1 bg-blue-300 border-4 border-gray-700 rounded hover:bg-blue-400 cursor-pointer',
+	yellow:
+		'px-2 py-1 bg-yellow-300 border-4 border-gray-700 rounded hover:bg-yellow-400 cursor-pointer',
+	green:
+		'px-2 py-1 bg-green-300 border-4 border-gray-700 rounded hover:bg-green-400 cursor-pointer',
+	orange:
+		'px-2 py-1 bg-orange-300 border-4 border-gray-700 rounded hover:bg-orange-400 cursor-pointer',
+	red: 'px-2 py-1 bg-red-300 border-4 border-gray-700 rounded hover:bg-red-400 cursor-pointer'
+};
 
 export const iS = {
-  normal: 'p-1 border border-black'
-}
+	normal: 'p-1 border border-black'
+};
diff --git a/client/src/lib/server/db/index.js b/client/src/lib/server/db/index.js
index b4ddbbb..0c2362d 100644
--- a/client/src/lib/server/db/index.js
+++ b/client/src/lib/server/db/index.js
@@ -3,7 +3,7 @@ import Database from 'better-sqlite3';
 import * as schema from './schema';
 import { env } from '$env/dynamic/private';
 
-const dbURL = (env.TAM_DATA_DIR || "./data") + "/tam-local.db";
+const dbURL = (env.TAM_DATA_DIR || './data') + '/tam-local.db';
 
 const client = new Database(dbURL);
 
diff --git a/client/src/lib/server/db/schema.js b/client/src/lib/server/db/schema.js
index 7799e71..33185a7 100644
--- a/client/src/lib/server/db/schema.js
+++ b/client/src/lib/server/db/schema.js
@@ -1,16 +1,32 @@
 import { integer, sqliteTable, text, primaryKey } from 'drizzle-orm/sqlite-core';
 
 export const prefixes = sqliteTable('prefixes', {
-  prefix: text('prefix').primaryKey(),
-  color: text('color'),
-  weight: integer('weight')
+	prefix: text('prefix').primaryKey(),
+	color: text('color'),
+	weight: integer('weight')
 });
 
-export const tickets = sqliteTable('tickets', {
-  prefix: text('prefix'),
-  t_id: integer('t_id'),
-  first_name: text('first_name'),
-  last_name: text('last_name'),
-  phone_number: text('phone_number'),
-  pref: text('pref')
-}, (t) => [primaryKey({columns: [t.prefix, t.t_id]})])
+export const tickets = sqliteTable(
+	'tickets',
+	{
+		prefix: text('prefix'),
+		t_id: integer('t_id'),
+		first_name: text('first_name'),
+		last_name: text('last_name'),
+		phone_number: text('phone_number'),
+		pref: text('pref')
+	},
+	(t) => [primaryKey({ columns: [t.prefix, t.t_id] })]
+);
+
+export const baskets = sqliteTable(
+	'baskets',
+	{
+		prefix: text('prefix'),
+		b_id: integer('b_id'),
+		description: text('description'),
+		donors: text('donors'),
+		winning_ticket: integer('winning_ticket')
+	},
+	(b) => [primaryKey({ columns: [b.prefix, b.b_id] })]
+);
diff --git a/client/src/lib/server/settings/index.js b/client/src/lib/server/settings/index.js
index 9874e16..3f8e4fa 100644
--- a/client/src/lib/server/settings/index.js
+++ b/client/src/lib/server/settings/index.js
@@ -5,7 +5,7 @@ const defaultSettings = {
 	remote_server: '',
 	remote_key: '',
 	remote_port: '8000',
-  remote_tls: false,
+	remote_tls: false,
 	default_pref: 'CALL',
 	venue_name: 'TAM'
 };
@@ -15,8 +15,8 @@ export const getSettings = () => {
 	try {
 		const settings = JSON.parse(readFileSync(settingsPath, 'utf-8'));
 		return settings;
-  } catch {
-    mkdirSync(env.TAM_DATA_DIR || './data', {recursive: true})
+	} catch {
+		mkdirSync(env.TAM_DATA_DIR || './data', { recursive: true });
 		writeFileSync(settingsPath, JSON.stringify(defaultSettings, null, 2), 'utf-8');
 		return defaultSettings;
 	}
diff --git a/client/src/routes/+layout.svelte b/client/src/routes/+layout.svelte
index 5fa298c..f3c9a2d 100644
--- a/client/src/routes/+layout.svelte
+++ b/client/src/routes/+layout.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <svelte:head>
-    <link rel="icon" href={favicon} />
-    <link rel="manifest" href="/manifest.json">
+	<link rel="icon" href={favicon} />
+	<link rel="manifest" href="/manifest.json" />
 </svelte:head>
 {@render children()}
diff --git a/client/src/routes/+page.server.js b/client/src/routes/+page.server.js
index 26ea848..8985b99 100644
--- a/client/src/routes/+page.server.js
+++ b/client/src/routes/+page.server.js
@@ -1,10 +1,10 @@
 import { getSettings } from '$lib/server/settings';
 
 export const load = async ({ fetch }) => {
-  const settings = getSettings();
-  const res = await fetch('/api');
-  const data = await res.json();
-  const resPrefixes = await fetch('/api/prefixes');
-  const dataPrefixes = await resPrefixes.json();
+	const settings = getSettings();
+	const res = await fetch('/api');
+	const data = await res.json();
+	const resPrefixes = await fetch('/api/prefixes');
+	const dataPrefixes = await resPrefixes.json();
 	return { ...data, venueName: settings.venue_name, prefixes: dataPrefixes };
 };
diff --git a/client/src/routes/+page.svelte b/client/src/routes/+page.svelte
index f0c53d2..fee5410 100644
--- a/client/src/routes/+page.svelte
+++ b/client/src/routes/+page.svelte
@@ -1,94 +1,108 @@
 <script>
-    import { tS, bS, bAS } from '$lib/client/styles.js';
-    import { browser } from '$app/environment';
-    import { resolve } from '$app/paths';
-    import hotkeys from 'hotkeys-js';
+	import { tS, bS, bAS } from '$lib/client/styles.js';
+	import { browser } from '$app/environment';
+	import { resolve } from '$app/paths';
+	import hotkeys from 'hotkeys-js';
 
-    const pageTitle = 'Main Menu | TAM'
-    const { data } = $props();
-    let adminMode = $state(false);
-    let prefixes = $derived(data.prefixes);
-    let curPrefix = $state("");
-    let pColor = $derived.by(() => {
-      if (curPrefix) return prefixes.find(p => curPrefix == p.prefix).color
-        else return "gray";
-    })
+	const pageTitle = 'Main Menu | TAM';
+	const { data } = $props();
+	let adminMode = $state(false);
+	let prefixes = $derived(data.prefixes);
+	let curPrefix = $state('');
+	let pColor = $derived.by(() => {
+		if (curPrefix) return prefixes.find((p) => curPrefix == p.prefix).color;
+		else return 'gray';
+	});
 
-    const status = $derived.by(() => {
-      if (data.whoami === 'TAM Server') {
-        return {
-          mode: 'Remote',
-          auth: data.authenticated ? 'green' : 'red',
-          healthy: data.healthy ? 'green' : 'red'
-        };
-      } else if (data.whoami === 'TAM Client') {
-        return {
-          mode: 'Standalone'
-        };
-      } else {
-        return {
-          mode: 'Unknown'
-        }
-      }
-    })
+	const status = $derived.by(() => {
+		if (data.whoami === 'TAM Server') {
+			return {
+				mode: 'Remote',
+				auth: data.authenticated ? 'green' : 'red',
+				healthy: data.healthy ? 'green' : 'red'
+			};
+		} else if (data.whoami === 'TAM Client') {
+			return {
+				mode: 'Standalone'
+			};
+		} else {
+			return {
+				mode: 'Unknown'
+			};
+		}
+	});
 
-    if (browser) {
-      hotkeys.filter = () => {return true};
-      hotkeys('alt+a', (event) => {
-        event.preventDefault();
-        adminMode = !adminMode;
-      })
-    }
+	if (browser) {
+		hotkeys.filter = () => {
+			return true;
+		};
+		hotkeys('alt+a', (event) => {
+			event.preventDefault();
+			adminMode = !adminMode;
+		});
+	}
 </script>
 
 <svelte:head>
-    <title>{pageTitle}</title>
+	<title>{pageTitle}</title>
 </svelte:head>
 
 <div class="p-1" id="app_container">
-<h1 class="text-xl font-bold">{pageTitle}</h1>
-<p class="text-lg italic">{data.venueName}</p>
+	<h1 class="text-xl font-bold">{pageTitle}</h1>
+	<p class="text-lg italic">{data.venueName}</p>
 
-<div class="flex flex-col md:flex-row md:flex-wrap gap-1 py-1">
-    <div id="prefixes" class="flex flex-col gap-1 p-2 border border-black rounded">
-        <h2 class="text-lg font-bold">Prefix Selection:</h2>
-        {#each prefixes as prefix (prefix.prefix)}
-        <button class={curPrefix == prefix.prefix ? bAS[prefix.color] : bS[prefix.color]} onclick={() => curPrefix = prefix.prefix}>{prefix.prefix}</button>
-        {/each}
-    </div>
-    {#if curPrefix}
-    <div class="flex flex-col gap-1 items-center border border-black rounded">
-        <h2 class="text-lg font-bold">Forms:</h2>
-        <div class="grid grid-cols-2 gap-1 p-1 min-w-2xs">
-            <a href={resolve('/tickets/[prefix]', {prefix: curPrefix})} class="{bS[pColor]}">Tickets</a>
-        </div>
-    </div>
-    {:else}
-    <div class="flex flex-col gap-1 items-center justify-center p-2 border border-black rounded">
-        <h2 class="text-lg font-bold">Please select a prefix to continue.</h2>
-    </div>
-    {/if}
-</div>
+	<div class="flex flex-col md:flex-row md:flex-wrap gap-1 py-1">
+		<div id="prefixes" class="flex flex-col gap-1 p-2 border border-black rounded">
+			<h2 class="text-lg font-bold">Prefix Selection:</h2>
+			{#each prefixes as prefix (prefix.prefix)}
+				<button
+					class={curPrefix == prefix.prefix ? bAS[prefix.color] : bS[prefix.color]}
+					onclick={() => (curPrefix = prefix.prefix)}>{prefix.prefix}</button
+				>
+			{/each}
+		</div>
+		{#if curPrefix}
+			<div class="flex flex-col gap-1 items-center border border-black rounded">
+				<h2 class="text-lg font-bold">Forms:</h2>
+				<div class="grid grid-cols-2 gap-1 p-1 min-w-2xs">
+					<a href={resolve('/tickets/[prefix]', { prefix: curPrefix })} class={bS[pColor]}
+						>Tickets</a
+					>
+					<a href={resolve('/baskets/[prefix]', { prefix: curPrefix })} class={bS[pColor]}
+						>Baskets</a
+					>
+				</div>
+			</div>
+		{:else}
+			<div class="flex flex-col gap-1 items-center justify-center p-2 border border-black rounded">
+				<h2 class="text-lg font-bold">Please select a prefix to continue.</h2>
+			</div>
+		{/if}
+	</div>
 
-{#if adminMode}
-<div id="admin_mode" class="py-1">
-    <h2 class="text-lg font-bold">Admin Mode:</h2>
-    <div class="flex flex-row gap-1">
-        <a href={resolve('/settings')} class={bS.gray}>Settings</a>
-    </div>
-</div>
-{/if}
+	{#if adminMode}
+		<div id="admin_mode" class="py-1">
+			<h2 class="text-lg font-bold">Admin Mode:</h2>
+			<div class="flex flex-row gap-1">
+				<a href={resolve('/settings')} class={bS.gray}>Settings</a>
+			</div>
+		</div>
+	{/if}
 
-<div id="footer">
-    <div>Mode: {status.mode}</div>
-    {#if data.authenticated !== undefined}
-    <div>Authenticated: <span class={tS[status.auth]}>{data.authenticated ? 'Yes' : 'No'}</span></div>
-    {/if}
-    {#if data.healthy !== undefined}
-    <div>Server Healthy: <span class={tS[status.healthy]}>{data.healthy ? 'Yes' : 'No'}</span></div>
-    {/if}
-    <div class="text-center text-xs">
-        <p>&copy; 2026 Ticket Auction Manager</p>
-    </div>
-</div>
+	<div id="footer">
+		<div>Mode: {status.mode}</div>
+		{#if data.authenticated !== undefined}
+			<div>
+				Authenticated: <span class={tS[status.auth]}>{data.authenticated ? 'Yes' : 'No'}</span>
+			</div>
+		{/if}
+		{#if data.healthy !== undefined}
+			<div>
+				Server Healthy: <span class={tS[status.healthy]}>{data.healthy ? 'Yes' : 'No'}</span>
+			</div>
+		{/if}
+		<div class="text-center text-xs">
+			<p>&copy; 2026 Ticket Auction Manager</p>
+		</div>
+	</div>
 </div>
diff --git a/client/src/routes/api/+server.js b/client/src/routes/api/+server.js
index 3ccd716..faa9241 100644
--- a/client/src/routes/api/+server.js
+++ b/client/src/routes/api/+server.js
@@ -5,16 +5,16 @@ export const GET = async () => {
 	const s = getSettings();
 	if (s.remote_server) {
 		const connStr = getPath(s);
-    try {
-      const res = await fetch(`${connStr}/api`, {
-        headers: { 'TAM-KEY': s.remote_key }
-      });
-      if (!res.ok) throw error(res.status);
-      const data = await res.json()
-      return json(data);
-    } catch {
-      const data = { whoami: 'TAM Server', authenticated: false, healthy: false };
-      return json(data);
+		try {
+			const res = await fetch(`${connStr}/api`, {
+				headers: { 'TAM-KEY': s.remote_key }
+			});
+			if (!res.ok) throw error(res.status);
+			const data = await res.json();
+			return json(data);
+		} catch {
+			const data = { whoami: 'TAM Server', authenticated: false, healthy: false };
+			return json(data);
 		}
 	} else {
 		const data = { whoami: 'TAM Client' };
diff --git a/client/src/routes/api/auth/+server.js b/client/src/routes/api/auth/+server.js
index 0341644..efaa0a2 100644
--- a/client/src/routes/api/auth/+server.js
+++ b/client/src/routes/api/auth/+server.js
@@ -1,67 +1,67 @@
-import { getSettings, getPath } from "$lib/server/settings";
-import { json, error } from "@sveltejs/kit";
+import { getSettings, getPath } from '$lib/server/settings';
+import { json, error } from '@sveltejs/kit';
 
 export const GET = async ({ request }) => {
-  const tamPwd = request.headers.get('TAM-PWD');
-  const s = getSettings();
-  if (s.remote_server) {
-    const connStr = getPath(s);
-    try {
-      const res = await fetch(`${connStr}/api/auth`, {
-        headers: { 'TAM-PW': tamPwd }
-      });
-      if (!res.ok) throw error(res.status);
-      const data = await res.json();
-      return json(data);
-    } catch {
-      throw error(502)
-    }
-  } else {
-    throw error(500, 'Not configured.')
-  }
-}
+	const tamPwd = request.headers.get('TAM-PWD');
+	const s = getSettings();
+	if (s.remote_server) {
+		const connStr = getPath(s);
+		try {
+			const res = await fetch(`${connStr}/api/auth`, {
+				headers: { 'TAM-PW': tamPwd }
+			});
+			if (!res.ok) throw error(res.status);
+			const data = await res.json();
+			return json(data);
+		} catch {
+			throw error(502);
+		}
+	} else {
+		throw error(500, 'Not configured.');
+	}
+};
 
 export const POST = async ({ request }) => {
-  const tamPwd = request.headers.get('TAM-PWD');
-  const reqBody = await request.json();
-  const s = getSettings();
-  if (s.remote_server) {
-    const connStr = getPath(s);
-    try {
-      const res = await fetch(`${connStr}/api/auth`, {
-        headers: { 'TAM-PW': tamPwd, 'Content-Type': 'application/json' },
-        method: 'POST',
-        body: JSON.stringify(reqBody)
-      });
-      if (!res.ok) throw error(res.status);
-      const data = await res.json();
-      return json(data);
-    } catch {
-      throw error(502);
-    }
-  } else {
-    throw error(500, 'Not configured.')
-  }
-}
+	const tamPwd = request.headers.get('TAM-PWD');
+	const reqBody = await request.json();
+	const s = getSettings();
+	if (s.remote_server) {
+		const connStr = getPath(s);
+		try {
+			const res = await fetch(`${connStr}/api/auth`, {
+				headers: { 'TAM-PW': tamPwd, 'Content-Type': 'application/json' },
+				method: 'POST',
+				body: JSON.stringify(reqBody)
+			});
+			if (!res.ok) throw error(res.status);
+			const data = await res.json();
+			return json(data);
+		} catch {
+			throw error(502);
+		}
+	} else {
+		throw error(500, 'Not configured.');
+	}
+};
 
 export const DELETE = async ({ request, url }) => {
-  const tamPwd = request.headers.get('TAM-PWD');
-  const keyToDel = url.searchParams.get('key_to_del');
-  const s = getSettings();
-  if (s.remote_server) {
-    const connStr = getPath(s);
-    try {
-      const res = await fetch(`${connStr}/api/auth?key_to_del=${keyToDel}`, {
-        headers: { 'TAM-PW': tamPwd },
-        method: 'DELETE'
-      })
-      if (!res.ok) throw error(res.status)
-      const data = await res.json();
-      return json(data);
-    } catch {
-      throw error(502);
-    }
-  } else {
-    throw error(500, 'Not configured.')
-  }
-}
+	const tamPwd = request.headers.get('TAM-PWD');
+	const keyToDel = url.searchParams.get('key_to_del');
+	const s = getSettings();
+	if (s.remote_server) {
+		const connStr = getPath(s);
+		try {
+			const res = await fetch(`${connStr}/api/auth?key_to_del=${keyToDel}`, {
+				headers: { 'TAM-PW': tamPwd },
+				method: 'DELETE'
+			});
+			if (!res.ok) throw error(res.status);
+			const data = await res.json();
+			return json(data);
+		} catch {
+			throw error(502);
+		}
+	} else {
+		throw error(500, 'Not configured.');
+	}
+};
diff --git a/client/src/routes/api/baskets/+server.js b/client/src/routes/api/baskets/+server.js
new file mode 100644
index 0000000..5e51769
--- /dev/null
+++ b/client/src/routes/api/baskets/+server.js
@@ -0,0 +1,45 @@
+import { db } from '$lib/server/db';
+import { baskets } from '$lib/server/db/schema';
+import { getSettings, getPath } from '$lib/server/settings';
+import { error, json } from '@sveltejs/kit';
+import { sql } from 'drizzle-orm';
+
+export const GET = async () => {
+	const s = getSettings();
+	if (s.remote_server) {
+		const connStr = getPath(s);
+		try {
+			const res = await fetch(`${connStr}/api/baskets`, { headers: { 'TAM-KEY': s.remote_key } });
+			if (!res.ok) throw error(res.status);
+			const data = await res.json();
+			return json(data);
+		} catch {
+			return json([]);
+		}
+	} else {
+		const data = await db.select().from(baskets).orderBy(baskets.prefix, baskets.b_id);
+		return json(data);
+	}
+};
+
+export const POST = async ({ request }) => {
+	const reqData = await request.json();
+	const s = getSettings();
+	if (s.remote_server) {
+		const connStr = getPath(s);
+		const res = await fetch(`${connStr}/api/baskets`, {
+			method: 'POST',
+			headers: { 'TAM-KEY': s.remote_key, 'Content-Type': 'application/json' },
+			body: JSON.stringify(reqData)
+		});
+		if (!res.ok) throw error(res.status);
+	}
+	await db
+		.insert(baskets)
+		.values(reqData)
+		.onConflictDoUpdate({
+			target: [baskets.prefix, baskets.b_id],
+			set: { description: sql`EXCLUDED.description`, donors: sql`EXCLUDED.donors` }
+		});
+	return json(reqData);
+};
diff --git a/client/src/routes/api/baskets/[prefix]/+server.js b/client/src/routes/api/baskets/[prefix]/+server.js
new file mode 100644
index 0000000..d4b50a9
--- /dev/null
+++ b/client/src/routes/api/baskets/[prefix]/+server.js
@@ -0,0 +1,30 @@
+import { db } from '$lib/server/db/index.js';
+import { baskets } from '$lib/server/db/schema.js';
+import { getPath, getSettings } from '$lib/server/settings';
+import { error, json } from '@sveltejs/kit';
+import { eq } from 'drizzle-orm';
+
+export const GET = async ({ params }) => {
+	const { prefix } = params;
+	const s = getSettings();
+	if (s.remote_server) {
+		const connStr = getPath(s);
+		try {
+			const req = await fetch(`${connStr}/api/baskets/${prefix}`, {
+				headers: { 'TAM-KEY': s.remote_key }
+			});
+			if (!req.ok) throw error(req.status);
+			const data = await req.json();
+			return json(data);
+		} catch {
+			return json([]);
+		}
+	} else {
+		const data = await db
+			.select()
+			.from(baskets)
+			.where(eq(baskets.prefix, prefix))
+			.orderBy(baskets.prefix, baskets.b_id);
+		return json(data);
+	}
+};
diff --git a/client/src/routes/api/baskets/[prefix]/[b_id]/+server.js b/client/src/routes/api/baskets/[prefix]/[b_id]/+server.js
new file mode 100644
index 0000000..1bc1a62
--- /dev/null
+++ b/client/src/routes/api/baskets/[prefix]/[b_id]/+server.js
@@ -0,0 +1,38 @@
+import { db } from '$lib/server/db/index.js';
+import { baskets } from '$lib/server/db/schema.js';
+import { getPath, getSettings } from '$lib/server/settings';
+import { error, json } from '@sveltejs/kit';
+import { and, eq } from 'drizzle-orm';
+
+export const GET = async ({ params }) => {
+	const [prefix, b_id] = [params.prefix, parseInt(params.b_id)];
+	const s = getSettings();
+	if (s.remote_server) {
+		const connStr = getPath(s);
+		try {
+			const res = await fetch(`${connStr}/api/tickets/${prefix}/${b_id}`, {
+				headers: { 'TAM-KEY': s.remote_key }
+			});
+			if (!res.ok) throw error(res.status);
+			const [data] = await res.json();
+			if (data) {
+				return json(data);
+			} else {
+				return json({ prefix, b_id, description: '', donors: '', winning_ticket: 0 });
+			}
+		} catch {
+			return json({ prefix, b_id, description: '', donors: '', winning_ticket: 0 });
+		}
+	} else {
+		const [data] = await db
+			.select()
+			.from(baskets)
+			.where(and(eq(baskets.prefix, prefix), eq(baskets.b_id, b_id)))
+			.orderBy(baskets.prefix, baskets.b_id);
+		if (data) {
+			return json(data);
+		} else {
+			return json({ prefix, b_id, descrption: '', donors: '', winning_ticket: 0 });
+		}
+	}
+};
diff --git a/client/src/routes/api/baskets/[prefix]/[id_from]/[id_to]/+server.js b/client/src/routes/api/baskets/[prefix]/[id_from]/[id_to]/+server.js
new file mode 100644
index 0000000..2de665f
--- /dev/null
+++ b/client/src/routes/api/baskets/[prefix]/[id_from]/[id_to]/+server.js
@@ -0,0 +1,39 @@
+import { db } from '$lib/server/db/index.js';
+import { baskets } from '$lib/server/db/schema.js';
+import { getPath, getSettings } from '$lib/server/settings';
+import { error, json } from '@sveltejs/kit';
+import { and, between, eq } from 'drizzle-orm';
+
+export const GET = async ({ params }) => {
+	const s = getSettings();
+	const [prefix, id_from, id_to] = [
+		params.prefix,
+		parseInt(params.id_from),
+		parseInt(params.id_to)
+	];
+	const rtnData = {};
+	for (let i = id_from; i <= id_to; i++) {
+		rtnData[i] = { prefix, b_id: i, description: '', donors: '', winning_ticket: 0 };
+	}
+	if (s.remote_server) {
+		const connStr = getPath(s);
+		try {
+			const res = await fetch(`${connStr}/api/baskets/${prefix}/${id_from}/${id_to}`, {
+				headers: { 'TAM-KEY': s.remote_key }
+			});
+			if (!res.ok) throw error(res.status);
+			const data = Array.from(await res.json());
+			data.forEach((b) => (rtnData[b.b_id] = b));
+		} catch {
+			return json([]);
+		}
+	} else {
+		const data = await db
+			.select()
+			.from(baskets)
+			.where(and(eq(baskets.prefix, prefix), between(baskets.b_id, id_from, id_to)))
+			.orderBy(baskets.prefix, baskets.b_id);
+		data.forEach((b) => (rtnData[b.b_id] = b));
+	}
+	return json(Object.values(rtnData));
+};
diff --git a/client/src/routes/api/prefixes/+server.js b/client/src/routes/api/prefixes/+server.js
index 36d616b..41a4345 100644
--- a/client/src/routes/api/prefixes/+server.js
+++ b/client/src/routes/api/prefixes/+server.js
@@ -1,56 +1,62 @@
-import { getSettings, getPath } from "$lib/server/settings"
-import { json, error } from "@sveltejs/kit";
-import { db } from "$lib/server/db";
-import { prefixes } from "$lib/server/db/schema";
-import { sql, eq } from "drizzle-orm";
+import { getSettings, getPath } from '$lib/server/settings';
+import { json, error } from '@sveltejs/kit';
+import { db } from '$lib/server/db';
+import { prefixes } from '$lib/server/db/schema';
+import { sql, eq } from 'drizzle-orm';
 
 export const GET = async () => {
-  const s = getSettings();
-  if (s.remote_server) {
-    const connStr = getPath(s);
-    try {
-      const res = await fetch(`${connStr}/api/prefixes`, {
-        headers: { 'TAM-KEY': s.remote_key }
-      });
-      if (!res.ok) throw error(res.status);
-      const data = await res.json();
-      return json(data);
-    } catch {
-      return json([]);
-    }
-  } else {
-    const data = await db.select().from(prefixes).orderBy(prefixes.weight, prefixes.prefix);
-    return json(data);
-  }
-}
+	const s = getSettings();
+	if (s.remote_server) {
+		const connStr = getPath(s);
+		try {
+			const res = await fetch(`${connStr}/api/prefixes`, {
+				headers: { 'TAM-KEY': s.remote_key }
+			});
+			if (!res.ok) throw error(res.status);
+			const data = await res.json();
+			return json(data);
+		} catch {
+			return json([]);
+		}
+	} else {
+		const data = await db.select().from(prefixes).orderBy(prefixes.weight, prefixes.prefix);
+		return json(data);
+	}
+};
 
 export const POST = async ({ request }) => {
-  const reqData = await request.json();
-  const s = getSettings();
-  if (s.remote_server) {
-    const connStr = getPath(s);
-    const res = await fetch(`${connStr}/api/prefixes`, {
-      method: 'POST',
-      headers: { 'TAM-KEY': s.remote_key, 'Content-Type': 'application/json' },
-      body: JSON.stringify(reqData)
-    })
-    if (!res.ok) throw error(res.status);
-  }
-  await db.insert(prefixes).values(reqData).onConflictDoUpdate({ target: prefixes.prefix, set: { color: sql`EXCLUDED.color`, weight: sql`EXCLUDED.weight` } });
-  return json(reqData);
-}
+	const reqData = await request.json();
+	const s = getSettings();
+	if (s.remote_server) {
+		const connStr = getPath(s);
+		const res = await fetch(`${connStr}/api/prefixes`, {
+			method: 'POST',
+			headers: { 'TAM-KEY': s.remote_key, 'Content-Type': 'application/json' },
+			body: JSON.stringify(reqData)
+		});
+		if (!res.ok) throw error(res.status);
+	}
+	await db
+		.insert(prefixes)
+		.values(reqData)
+		.onConflictDoUpdate({
+			target: prefixes.prefix,
+			set: { color: sql`EXCLUDED.color`, weight: sql`EXCLUDED.weight` }
+		});
+	return json(reqData);
+};
 
 export const DELETE = async ({ url }) => {
-  const p = url.searchParams.get('p');
-  const s = getSettings();
-  if (s.remote_server) {
-    const connStr = getPath(s);
-    const res = await fetch(`${connStr}/api/prefixes?p=${p}`, {
-      method: 'DELETE',
-      headers: { 'TAM-KEY': s.remote_key }
-    });
-    if (!res.ok) throw error(res.status);
-  }
-  await db.delete(prefixes).where(eq(prefixes.prefix, p));
-  return json({ message: "Deleted successfully."});
-}
+	const p = url.searchParams.get('p');
+	const s = getSettings();
+	if (s.remote_server) {
+		const connStr = getPath(s);
+		const res = await fetch(`${connStr}/api/prefixes?p=${p}`, {
+			method: 'DELETE',
+			headers: { 'TAM-KEY': s.remote_key }
+		});
+		if (!res.ok) throw error(res.status);
+	}
+	await db.delete(prefixes).where(eq(prefixes.prefix, p));
+	return json({ message: 'Deleted successfully.' });
+};
diff --git a/client/src/routes/api/settings/+server.js b/client/src/routes/api/settings/+server.js
index b03f59a..f4bb5d1 100644
--- a/client/src/routes/api/settings/+server.js
+++ b/client/src/routes/api/settings/+server.js
@@ -1,8 +1,8 @@
-import { setSettings } from "$lib/server/settings";
-import { json } from "@sveltejs/kit";
+import { setSettings } from '$lib/server/settings';
+import { json } from '@sveltejs/kit';
 
 export const POST = async ({ request }) => {
-  const newSettings = await request.json();
-  setSettings(newSettings);
-  return json(newSettings);
-}
+	const newSettings = await request.json();
+	setSettings(newSettings);
+	return json(newSettings);
+};
diff --git a/client/src/routes/api/tickets/[prefix]/[id_from]/[id_to]/+server.js b/client/src/routes/api/tickets/[prefix]/[id_from]/[id_to]/+server.js
index 50844cb..8ce965a 100644
--- a/client/src/routes/api/tickets/[prefix]/[id_from]/[id_to]/+server.js
+++ b/client/src/routes/api/tickets/[prefix]/[id_from]/[id_to]/+server.js
@@ -31,8 +31,12 @@ export const GET = async ({ params }) => {
 		} catch {
 			return json([]);
 		}
-  } else {
-    const data = await db.select().from(tickets).where(and(eq(tickets.prefix, prefix), between(tickets.t_id, id_from, id_to))).orderBy(tickets.prefix, tickets.t_id);
+	} else {
+		const data = await db
+			.select()
+			.from(tickets)
+			.where(and(eq(tickets.prefix, prefix), between(tickets.t_id, id_from, id_to)))
+			.orderBy(tickets.prefix, tickets.t_id);
 		data.forEach((t) => (rtnData[t.t_id] = t));
 	}
 	return json(Object.values(rtnData));
diff --git a/client/src/routes/baskets/[prefix]/+page.server.js b/client/src/routes/baskets/[prefix]/+page.server.js
new file mode 100644
index 0000000..93d9016
--- /dev/null
+++ b/client/src/routes/baskets/[prefix]/+page.server.js
@@ -0,0 +1,7 @@
+export const load = async ({ params, fetch }) => {
+	const { prefix } = params;
+	const res = await fetch('/api/prefixes');
+	const prefixes = await res.json();
+	const prefixObj = Array.from(prefixes).find((p) => p.prefix == prefix);
+	return { prefix: prefixObj, prefixes };
+};
diff --git a/client/src/routes/baskets/[prefix]/+page.svelte b/client/src/routes/baskets/[prefix]/+page.svelte
new file mode 100644
index 0000000..37c947e
--- /dev/null
+++ b/client/src/routes/baskets/[prefix]/+page.svelte
@@ -0,0 +1,220 @@
+<script>
+	import { resolve } from '$app/paths';
+	import { afterNavigate, beforeNavigate } from '$app/navigation';
+	import { browser } from '$app/environment';
+	import { bS, bAS, iS } from '$lib/client/styles';
+	import HeaderBar from '$lib/client/components/HeaderBar.svelte';
+	import PagerBar from '$lib/client/components/PagerBar.svelte';
+	import CommandBar from '$lib/client/components/CommandBar.svelte';
+
+	let { data } = $props();
+	let { prefix, prefixes } = $derived(data);
+
+	let pageTitle = $derived(`${prefix.prefix} Baskets | TAM`);
+
+	let curIdx = $state(0),
+		nextIdx = $derived(curIdx + 1),
+		prevIdx = $derived(curIdx - 1);
+	const changeIdx = (idx) => {
+		curIdx = idx;
+	};
+	const focusIdx = (idx) => {
+		curIdx = idx;
+		const elemIdx = document.getElementById(`${idx}_first`);
+		if (elemIdx) {
+			elemIdx.focus();
+		}
+	};
+
+	let pager = $state({ idFrom: 0, idTo: 0 });
+	let items = $state([]);
+	let itemsLength = $derived(items.length);
+	let itemsBuffer = $derived(items.filter((i) => i.changed));
+	const functions = {
+		getPage: async () => {
+			functions.save();
+			if (pager.idFrom > pager.idTo) {
+				[pager.idFrom, pager.idTo] = [pager.idTo, pager.idFrom];
+			}
+			if (pager.idTo - pager.idFrom > 300) {
+				pager.idTo = pager.idFrom + 300;
+			}
+			const res = await fetch(`/api/baskets/${prefix.prefix}/${pager.idFrom}/${pager.idTo}`);
+			const resData = await res.json();
+			resData.map((i) => (i.changed = false));
+			items = [...resData];
+			setTimeout(() => focusIdx(0));
+		},
+		save: async () => {
+			if (itemsBuffer.length > 0) {
+				const res = await fetch('/api/baskets', {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify(itemsBuffer)
+				});
+				if (res.ok) {
+					itemsBuffer.forEach((i) => (i.changed = false));
+				} else {
+					alert('Error saving items.');
+				}
+			}
+			setTimeout(() => {
+				focusIdx(0);
+			}, 1);
+		},
+		prevPage: () => {
+			((pager.idFrom -= itemsLength), (pager.idTo -= itemsLength));
+			functions.getPage();
+		},
+		nextPage: () => {
+			((pager.idFrom += itemsLength), (pager.idTo += itemsLength));
+			functions.getPage();
+		},
+		nextLine: () => {
+			if (items[nextIdx]) {
+				setTimeout(() => {
+					focusIdx(nextIdx);
+				}, 1);
+			} else {
+				setTimeout(() => {
+					focusIdx(curIdx);
+				}, 1);
+			}
+		},
+		prevLine: () => {
+			if (items[prevIdx]) {
+				setTimeout(() => {
+					focusIdx(prevIdx);
+				}, 1);
+			} else {
+				setTimeout(() => {
+					focusIdx(curIdx);
+				}, 1);
+			}
+		},
+		dupDown: () => {
+			if (items[nextIdx]) {
+				const buffer = { ...items[curIdx] };
+				['prefix', 't_id'].forEach((key) => delete buffer[key]);
+				items[nextIdx] = { ...items[nextIdx], ...buffer, changed: true };
+				functions.nextLine();
+			} else {
+				focusIdx(curIdx);
+			}
+		},
+		dupUp: () => {
+			if (curIdx > 0) {
+				const buffer = { ...items[curIdx] };
+				['prefix', 't_id'].forEach((key) => delete buffer[key]);
+				items[prevIdx] = { ...items[prevIdx], ...buffer, changed: true };
+				functions.prevLine();
+			} else {
+				focusIdx(curIdx);
+			}
+		},
+		copy: () => {
+			if (items[curIdx]) {
+				const buffer = { ...items[curIdx] };
+				['prefix', 't_id'].forEach((key) => delete buffer[key]);
+				window.localStorage.setItem('tam-ticket', JSON.stringify(buffer));
+			}
+			focusIdx(curIdx);
+		},
+		paste: () => {
+			if (items[curIdx]) {
+				const buffer = JSON.parse(window.localStorage.getItem('tam-ticket'));
+				items[curIdx] = { ...items[curIdx], ...buffer, changed: true };
+			}
+			focusIdx(curIdx);
+		}
+	};
+	const headers = ['Basket ID', 'Description', 'Donors', 'Save?'];
+
+	beforeNavigate(({ cancel }) => {
+		if (itemsBuffer.length > 0) {
+			if (!confirm('Are you sure you want to leave this page? There are unsaved changes!'))
+				cancel();
+		}
+	});
+
+	afterNavigate(() => {
+		items = [];
+		pager = { idFrom: 0, idTo: 0 };
+		curIdx = 0;
+	});
+
+	if (browser) {
+		window.addEventListener('beforeunload', (e) => {
+			if (itemsBuffer.length > 0) e.preventDefault();
+		});
+	}
+</script>
+
+<svelte:head>
+	<title>{pageTitle}</title>
+</svelte:head>
+
+<table class="w-full box-border border-separate p-1">
+	<thead class="sticky top-1 bg-white">
+		<tr>
+			<td colspan="50">
+				<HeaderBar>
+					<div>Baskets:</div>
+					{#each prefixes as p (p.prefix)}
+						<a
+							href={resolve('/baskets/[prefix]', { prefix: p.prefix })}
+							class={prefix.prefix == p.prefix ? bAS[p.color] : bS[p.color]}>{p.prefix}</a
+						>
+					{/each}
+				</HeaderBar>
+				<h1 class="text-xl font-bold p-1">{pageTitle}</h1>
+				<PagerBar {prefix} {functions} bind:pager />
+				<CommandBar {prefix} {functions} /></td
+			>
+		</tr>
+		<tr>
+			{#each headers as header (header)}
+				<th class="border text-left p-0.5">{header}</th>
+			{/each}
+		</tr>
+	</thead>
+	<tbody>
+		{#each items as item, idx (item.b_id)}
+			<tr
+				class="focus-within:font-bold"
+				onfocusin={(e) => {
+					changeIdx(idx);
+					e.target.scrollIntoView({ block: 'center' });
+				}}
+			>
+				<td class="p-0.5 border">{item.b_id}</td>
+				<td class="p-0.5 border"
+					><input
+						type="text"
+						class="{iS.normal} w-full"
+						id="{idx}_first"
+						onchangecapture={() => (item.changed = true)}
+						bind:value={item.description}
+					/></td
+				>
+				<td class="p-0.5 border"
+					><input
+						type="text"
+						class="{iS.normal} w-full"
+						id="{idx}_second"
+						onchangecapture={() => (item.changed = true)}
+						bind:value={item.donors}
+					/></td
+				>
+				<td class="p-0.5 border"
+					><button
+						class={bS[prefix.color]}
+						onclick={() => {
+							item.changed ? (item.changed = false) : (item.changed = true);
+						}}>{item.changed ? 'Yes' : 'No'}</button
+					></td
+				>
+			</tr>
+		{/each}
+	</tbody>
+</table>
diff --git a/client/src/routes/settings/+page.server.js b/client/src/routes/settings/+page.server.js
index adc5e8e..6895322 100644
--- a/client/src/routes/settings/+page.server.js
+++ b/client/src/routes/settings/+page.server.js
@@ -1,6 +1,6 @@
-import { getSettings } from "$lib/server/settings";
+import { getSettings } from '$lib/server/settings';
 
 export const load = () => {
-  const settings = getSettings();
-  return { settings };
-}
+	const settings = getSettings();
+	return { settings };
+};
diff --git a/client/src/routes/settings/+page.svelte b/client/src/routes/settings/+page.svelte
index 14bd844..aa67826 100644
--- a/client/src/routes/settings/+page.svelte
+++ b/client/src/routes/settings/+page.svelte
@@ -1,85 +1,96 @@
 <script>
-    import { onMount } from 'svelte';
-    import { resolve } from '$app/paths'
-    import { bS, iS, tS } from '$lib/client/styles';
-    import HeaderBar from '$lib/client/components/HeaderBar.svelte'
+	import { onMount } from 'svelte';
+	import { resolve } from '$app/paths';
+	import { bS, iS, tS } from '$lib/client/styles';
+	import HeaderBar from '$lib/client/components/HeaderBar.svelte';
 
-    let { data } = $props();
-    let settings = $state({});
-    let status = $state({
-      message: '',
-      color: 'green'
-    })
+	let { data } = $props();
+	let settings = $state({});
+	let status = $state({
+		message: '',
+		color: 'green'
+	});
 
-    const pageTitle = 'Settings | TAM';
+	const pageTitle = 'Settings | TAM';
 
-    onMount(() => {
-      settings = {...data.settings};
-    })
+	onMount(() => {
+		settings = { ...data.settings };
+	});
 </script>
 
 <svelte:head>
-    <title>{pageTitle}</title>
+	<title>{pageTitle}</title>
 </svelte:head>
 
 <HeaderBar>
-    <div>Settings Sections:</div>
-    {#if data.settings.remote_server}
-    <a href={resolve('/settings/auth-keys')} class={bS.gray}>Auth Keys</a>
-    {/if}
-    <a href={resolve('/settings/prefixes')} class={bS.gray}>Prefixes</a>
+	<div>Settings Sections:</div>
+	{#if data.settings.remote_server}
+		<a href={resolve('/settings/auth-keys')} class={bS.gray}>Auth Keys</a>
+	{/if}
+	<a href={resolve('/settings/prefixes')} class={bS.gray}>Prefixes</a>
 </HeaderBar>
 
 <div id="app_container" class="p-1">
-    <h1 class="text-xl font-bold">{pageTitle}</h1>
-    <div class="flex flex-col gap-1 w-full py-1">
-        <h2 class="text-lg font-bold">Remote Mode:</h2>
-        <div class="flex flex-row gap-1 items-center">
-            <div>Remote Server:</div>
-            <input type="text" class={iS.normal} bind:value={settings.remote_server}>
-        </div>
-        <div class="flex flex-row gap-1 items-center">
-            <div>Remote Port:</div>
-            <input type="text" class={iS.normal} bind:value={settings.remote_port}>
-        </div>
-        <div class="flex flex-row gap-1 items-center">
-            <div>Remote TLS:</div>
-            <button class={bS.gray} onclick={() => {
-              settings.remote_tls = !settings.remote_tls
-            }}>{settings.remote_tls ? 'Yes' : 'No'}</button>
-        </div>
-        <h2 class="text-lg font-bold">Default Preferences:</h2>
-        <div class="flex flex-row gap-1 items-center">
-            <div>Contact Preference:</div>
-            <button class={bS.gray} onclick={() => {
-              settings.default_pref === 'CALL' ? settings.default_pref = 'TEXT' : settings.default_pref = 'CALL';
-            }}>{settings.default_pref}</button>
-        </div>
-        <div class="flex flex-row gap-1 items-center">
-            <div>Venue Name:</div>
-            <input type="text" class={iS.normal} bind:value={settings.venue_name}>
-        </div>
-        <div class="flex flex-row gap-1 items-center">
-            <button class={bS.gray} onclick={async () => {
-              const res = await fetch('/api/settings', {
-                method: 'POST',
-                body: JSON.stringify(settings),
-                headers: {'Content-Type': 'application/json'}
-              })
-              if (!res.ok) {
-                  status.message = `Error Code: ${res.status}`;
-                  status.color = 'red';
-              } else {
-                const resData = await res.json();
-                settings = {...resData};
-                status.message = 'Settings saved successfully!';
-                status.color = 'green';
-              }
-            }}>Save</button>
-            <button class={bS.gray}>Cancel</button>
-        </div>
-        <div>
-            <p class={tS[status.color]}>{status.message}</p>
-        </div>
-    </div>
+	<h1 class="text-xl font-bold">{pageTitle}</h1>
+	<div class="flex flex-col gap-1 w-full py-1">
+		<h2 class="text-lg font-bold">Remote Mode:</h2>
+		<div class="flex flex-row gap-1 items-center">
+			<div>Remote Server:</div>
+			<input type="text" class={iS.normal} bind:value={settings.remote_server} />
+		</div>
+		<div class="flex flex-row gap-1 items-center">
+			<div>Remote Port:</div>
+			<input type="text" class={iS.normal} bind:value={settings.remote_port} />
+		</div>
+		<div class="flex flex-row gap-1 items-center">
+			<div>Remote TLS:</div>
+			<button
+				class={bS.gray}
+				onclick={() => {
+					settings.remote_tls = !settings.remote_tls;
+				}}>{settings.remote_tls ? 'Yes' : 'No'}</button
+			>
+		</div>
+		<h2 class="text-lg font-bold">Default Preferences:</h2>
+		<div class="flex flex-row gap-1 items-center">
+			<div>Contact Preference:</div>
+			<button
+				class={bS.gray}
+				onclick={() => {
+					settings.default_pref === 'CALL'
+						? (settings.default_pref = 'TEXT')
+						: (settings.default_pref = 'CALL');
+				}}>{settings.default_pref}</button
+			>
+		</div>
+		<div class="flex flex-row gap-1 items-center">
+			<div>Venue Name:</div>
+			<input type="text" class={iS.normal} bind:value={settings.venue_name} />
+		</div>
+		<div class="flex flex-row gap-1 items-center">
+			<button
+				class={bS.gray}
+				onclick={async () => {
+					const res = await fetch('/api/settings', {
+						method: 'POST',
+						body: JSON.stringify(settings),
+						headers: { 'Content-Type': 'application/json' }
+					});
+					if (!res.ok) {
+						status.message = `Error Code: ${res.status}`;
+						status.color = 'red';
+					} else {
+						const resData = await res.json();
+						settings = { ...resData };
+						status.message = 'Settings saved successfully!';
+						status.color = 'green';
+					}
+				}}>Save</button
+			>
+			<button class={bS.gray}>Cancel</button>
+		</div>
+		<div>
+			<p class={tS[status.color]}>{status.message}</p>
+		</div>
+	</div>
 </div>
diff --git a/client/src/routes/settings/auth-keys/+page.server.js b/client/src/routes/settings/auth-keys/+page.server.js
index 53c3df8..83b78db 100644
--- a/client/src/routes/settings/auth-keys/+page.server.js
+++ b/client/src/routes/settings/auth-keys/+page.server.js
@@ -1,6 +1,6 @@
-import { getSettings } from "$lib/server/settings";
+import { getSettings } from '$lib/server/settings';
 
 export const load = () => {
-  const s = getSettings();
-  return { authKey: s.remote_key };
-}
+	const s = getSettings();
+	return { authKey: s.remote_key };
+};
diff --git a/client/src/routes/settings/auth-keys/+page.svelte b/client/src/routes/settings/auth-keys/+page.svelte
index af8619b..6936e1d 100644
--- a/client/src/routes/settings/auth-keys/+page.svelte
+++ b/client/src/routes/settings/auth-keys/+page.svelte
@@ -91,10 +91,10 @@
 											headers: { 'TAM-PWD': auth.pwd }
 										});
 										if (res.ok) {
-										  setTimeout(() => {
-    										  const newKeys = authKeys.filter(i => i.auth_key !== key.auth_key);
-    										  authKeys = [...newKeys];
-											}, 1)
+											setTimeout(() => {
+												const newKeys = authKeys.filter((i) => i.auth_key !== key.auth_key);
+												authKeys = [...newKeys];
+											}, 1);
 										}
 									}}>Delete</button
 								>
@@ -109,17 +109,17 @@
 						<button
 							class={bS.gray}
 							onclick={async () => {
-   							    if (newDesc) {
-    								const res = await fetch('/api/auth', {
-     									method: 'POST',
-     									headers: { 'TAM-PWD': auth.pwd, 'Content-Type': 'application/json' },
-     									body: JSON.stringify({ description: newDesc })
-    								});
-    								if (res.ok) {
-     									newDesc = '';
-     									const data = await res.json();
-     									authKeys = [...authKeys, data];
-    								}
+								if (newDesc) {
+									const res = await fetch('/api/auth', {
+										method: 'POST',
+										headers: { 'TAM-PWD': auth.pwd, 'Content-Type': 'application/json' },
+										body: JSON.stringify({ description: newDesc })
+									});
+									if (res.ok) {
+										newDesc = '';
+										const data = await res.json();
+										authKeys = [...authKeys, data];
+									}
 								}
 							}}>New Key</button
 						>
diff --git a/client/src/routes/settings/prefixes/+page.server.js b/client/src/routes/settings/prefixes/+page.server.js
index 3b544e2..b8e39f9 100644
--- a/client/src/routes/settings/prefixes/+page.server.js
+++ b/client/src/routes/settings/prefixes/+page.server.js
@@ -1,5 +1,5 @@
 export const load = async ({ fetch }) => {
-  const res = await fetch('/api/prefixes');
-  const prefixes = await res.json();
-  return { prefixes };
-}
+	const res = await fetch('/api/prefixes');
+	const prefixes = await res.json();
+	return { prefixes };
+};
diff --git a/client/src/routes/tickets/[prefix]/+page.server.js b/client/src/routes/tickets/[prefix]/+page.server.js
index 77039e4..93d9016 100644
--- a/client/src/routes/tickets/[prefix]/+page.server.js
+++ b/client/src/routes/tickets/[prefix]/+page.server.js
@@ -1,7 +1,7 @@
 export const load = async ({ params, fetch }) => {
-  const { prefix } = params;
-  const res = await fetch('/api/prefixes');
-  const prefixes = await res.json();
-  const prefixObj = Array.from(prefixes).find(p => p.prefix == prefix);
-  return { prefix: prefixObj, prefixes};
-}
+	const { prefix } = params;
+	const res = await fetch('/api/prefixes');
+	const prefixes = await res.json();
+	const prefixObj = Array.from(prefixes).find((p) => p.prefix == prefix);
+	return { prefix: prefixObj, prefixes };
+};
diff --git a/client/src/routes/tickets/[prefix]/+page.svelte b/client/src/routes/tickets/[prefix]/+page.svelte
index e407636..f2ef543 100644
--- a/client/src/routes/tickets/[prefix]/+page.svelte
+++ b/client/src/routes/tickets/[prefix]/+page.svelte
@@ -76,55 +76,55 @@
 					focusIdx(nextIdx);
 				}, 1);
 			} else {
-			    setTimeout(() => {
+				setTimeout(() => {
 					focusIdx(curIdx);
-				}, 1)
+				}, 1);
 			}
 		},
 		prevLine: () => {
-		    if (items[prevIdx]) {
+			if (items[prevIdx]) {
 				setTimeout(() => {
-				  focusIdx(prevIdx);
+					focusIdx(prevIdx);
 				}, 1);
 			} else {
-			    setTimeout(() => {
-					focusIdx(curIdx)
+				setTimeout(() => {
+					focusIdx(curIdx);
 				}, 1);
-			};
+			}
 		},
 		dupDown: () => {
-		    if (items[nextIdx]) {
-				const buffer = {...items[curIdx]};
-				["prefix", "t_id"].forEach(key => delete buffer[key]);
-				items[nextIdx] = {...items[nextIdx], ...buffer, changed: true};
+			if (items[nextIdx]) {
+				const buffer = { ...items[curIdx] };
+				['prefix', 't_id'].forEach((key) => delete buffer[key]);
+				items[nextIdx] = { ...items[nextIdx], ...buffer, changed: true };
 				functions.nextLine();
 			} else {
-			    focusIdx(curIdx);
+				focusIdx(curIdx);
 			}
 		},
 		dupUp: () => {
-		    if (curIdx > 0) {
-			    const buffer = {...items[curIdx]};
-				["prefix", "t_id"].forEach(key => delete buffer[key]);
-				items[prevIdx] = {...items[prevIdx], ...buffer, changed: true};
+			if (curIdx > 0) {
+				const buffer = { ...items[curIdx] };
+				['prefix', 't_id'].forEach((key) => delete buffer[key]);
+				items[prevIdx] = { ...items[prevIdx], ...buffer, changed: true };
 				functions.prevLine();
 			} else {
-			  focusIdx(curIdx);
+				focusIdx(curIdx);
 			}
 		},
 		copy: () => {
-		    if (items[curIdx]) {
-				const buffer = {...items[curIdx]};
-				["prefix", "t_id"].forEach(key => delete buffer[key]);
+			if (items[curIdx]) {
+				const buffer = { ...items[curIdx] };
+				['prefix', 't_id'].forEach((key) => delete buffer[key]);
 				window.localStorage.setItem('tam-ticket', JSON.stringify(buffer));
-			};
+			}
 			focusIdx(curIdx);
 		},
 		paste: () => {
-		    if (items[curIdx]) {
+			if (items[curIdx]) {
 				const buffer = JSON.parse(window.localStorage.getItem('tam-ticket'));
-				items[curIdx] = {...items[curIdx], ...buffer, changed: true};
-			};
+				items[curIdx] = { ...items[curIdx], ...buffer, changed: true };
+			}
 			focusIdx(curIdx);
 		}
 	};
@@ -154,8 +154,8 @@
 	<title>{pageTitle}</title>
 </svelte:head>
 
-<table class="w-full box-border border-separate">
-	<thead class="sticky top-1 box-border bg-white">
+<table class="w-full box-border border-separate p-1">
+	<thead class="sticky top-1 bg-white">
 		<tr>
 			<td colspan="50">
 				<HeaderBar>
@@ -167,16 +167,10 @@
 						>
 					{/each}
 				</HeaderBar>
-			</td>
-		</tr>
-		<tr>
-			<td colspan="50"><h1 class="text-xl font-bold p-1">{pageTitle}</h1></td>
-		</tr>
-		<tr>
-			<td colspan="50"><PagerBar {prefix} {functions} bind:pager /></td>
-		</tr>
-		<tr>
-			<td colspan="50"><CommandBar {prefix} {functions} /></td>
+				<h1 class="text-xl font-bold p-1">{pageTitle}</h1>
+				<PagerBar {prefix} {functions} bind:pager />
+				<CommandBar {prefix} {functions} /></td
+			>
 		</tr>
 		<tr>
 			{#each headers as header (header)}
@@ -207,6 +201,7 @@
 					><input
 						type="text"
 						class="{iS.normal} w-full"
+						id="{idx}_second"
 						onchangecapture={() => (item.changed = true)}
 						bind:value={item.last_name}
 					/></td
@@ -215,6 +210,7 @@
 					><input
 						type="text"
 						class="{iS.normal} w-full"
+						id="{idx}_third"
 						onchangecapture={() => (item.changed = true)}
 						bind:value={item.phone_number}
 					/></td
@@ -225,6 +221,15 @@
 						onclick={() => {
 							item.pref == 'CALL' ? (item.pref = 'TEXT') : (item.pref = 'CALL');
 							item.changed = true;
+						}}
+						onkeydown={(e) => {
+							if (e.key == 't') {
+								if (item.pref != 'TEXT') item.changed = true;
+								item.pref = 'TEXT';
+							} else if (e.key == 'c') {
+								if (item.pref != 'CALL') item.changed = true;
+								item.pref = 'CALL';
+							}
 						}}>{item.pref}</button
 					></td
 				>