diff --git a/package.json b/package.json
index 9bd6bfe..395f062 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.11",
+    "idb": "^8.0.3",
     "solid-js": "^1.9.7",
     "tailwindcss": "^4.1.11"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 180b09d..1b8e398 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.1.11
         version: 4.1.11(vite@7.1.1(jiti@2.5.1)(lightningcss@1.30.1))
+      idb:
+        specifier: ^8.0.3
+        version: 8.0.3
       solid-js:
         specifier: ^1.9.7
         version: 1.9.8
@@ -581,6 +584,9 @@ packages:
   html-entities@2.3.3:
     resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==}
 
+  idb@8.0.3:
+    resolution: {integrity: sha512-LtwtVyVYO5BqRvcsKuB2iUMnHwPVByPCXFXOpuU96IZPPoPN6xjOGxZQ74pgSVVLQWtUOYgyeL4GE98BY5D3wg==}
+
   is-what@4.1.16:
     resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
     engines: {node: '>=12.13'}
@@ -1298,6 +1304,8 @@ snapshots:
 
   html-entities@2.3.3: {}
 
+  idb@8.0.3: {}
+
   is-what@4.1.16: {}
 
   jiti@2.5.1: {}
diff --git a/src/App.tsx b/src/App.tsx
index d6cff48..59677a1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,89 +1,123 @@
-import { createSignal, For } from "solid-js";
-
-type Entry = {
-  weight: number;
-  timestamp: Date;
-};
+import { createResource, createSignal, For, Show } from "solid-js";
+import { openDatabase, type Entry } from "./data";
 
 export default function App() {
-  const [entries, setEntries] = createSignal<Entry[]>(
-    [
-      {
-        timestamp: new Date(),
-        weight: 100,
-      },
-    ],
-    {
-      equals: false,
-    }
-  );
+  const [database] = createResource(openDatabase);
+
+  const [entries, { refetch }] = createResource(database, async (database) => {
+    const entries = await database.getAll("entries");
+
+    return entries;
+  });
 
-  function handleSubmit(
+  async function handleSubmit(
     event: SubmitEvent & { currentTarget: HTMLFormElement }
   ) {
     event.preventDefault();
+    console.debug("handleSubmit", event);
 
     const input = event.currentTarget.elements.namedItem("weight");
     if (!(input instanceof HTMLInputElement))
       throw new Error("Expected input element");
 
     const weight = input.valueAsNumber;
-    setEntries((entries) => {
-      entries.push({ weight, timestamp: new Date() });
-      return entries;
-    });
+
+    const currentDatabase = database();
+    console.debug("currentDatabase", currentDatabase);
+    const now = new Date();
+    currentDatabase?.add(
+      "entries",
+      {
+        timestamp: now,
+        weight,
+      },
+      now.getTime()
+    );
+    event.currentTarget.reset();
+    refetch();
+  }
+
+  async function remove(date: Date) {
+    const currentDatabase = database();
+    if (!currentDatabase) throw new Error("Expected database to be ready");
+
+    currentDatabase.delete("entries", date.getTime());
+    refetch();
   }
 
   return (
-    <main class="max-w-xl mx-auto bg-gray-200 h-full p-4 text-emerald-950">
-      <h1 class="text-3xl font-bold mb-3">Waight</h1>
-      <ol class="grid grid-cols-2">
+    <main class="grid grid-rows-[auto_1fr_auto] items-start max-w-xl mx-auto bg-gray-200 h-full p-4 text-emerald-950">
+      <h1 class="text-2xl font-light mb-3">Waight</h1>
+      <ol class="grid grid-cols-[auto_1fr_auto_auto] gap-y-2">
         <For each={entries()}>
           {(entry) => (
-            <li class="grid grid-cols-subgrid col-span-2 rounded-xl p-3 bg-gray-50">
-              <p>{entry.weight}</p>
+            <li class="grid grid-cols-subgrid col-span-4 gap-x-3 rounded-xl p-4 bg-gray-50 items-center">
+              <p class="text-3xl grid col-span-2 grid-cols-subgrid gap-x-1">
+                <span class="text-end">{entry.weight}</span> <span>㎏</span>
+              </p>
               <time>
                 {entry.timestamp.toLocaleString(undefined, {
                   timeStyle: "short",
                   dateStyle: "short",
                 })}
               </time>
+              <button onClick={() => remove(entry.timestamp)}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+                  <path d="M3 6h18" />
+                  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                </svg>
+                <span class="sr-only">Delete</span>
+              </button>
             </li>
           )}
         </For>
       </ol>
-      <form class="fixed bottom-0 flex p-4 gap-2" onSubmit={handleSubmit}>
-        <label for="weight" class="sr-only">
-          Weight
-        </label>
-        <input
-          type="number"
-          id="weight"
-          name="weight"
-          placeholder="Enter weight"
-          class="outline-none bg-gray-50 px-3 py-2 rounded-full"
-        />
-        <button
-          type="button"
-          class="rounded-full size-10 bg-emerald-500 content-center justify-items-center outline-none"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="size-9"
+      <Show when={database.state === "ready"}>
+        <form class="grid grid-cols-[1fr_auto] gap-2" onSubmit={handleSubmit}>
+          <label for="weight" class="sr-only">
+            Weight
+          </label>
+          <input
+            type="number"
+            id="weight"
+            name="weight"
+            step="0.01"
+            placeholder="Enter weight"
+            class="outline-none bg-gray-50 px-3 py-2 rounded-full"
+          />
+          <button
+            type="submit"
+            class="rounded-full size-10 bg-emerald-500 content-center justify-items-center outline-none"
           >
-            <path d="M5 12h14 M12 5v14" />
-          </svg>
-          <span class="sr-only">Add</span>
-        </button>
-      </form>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="size-9"
+            >
+              <path d="M5 12h14 M12 5v14" />
+            </svg>
+            <span class="sr-only">Add</span>
+          </button>
+        </form>
+      </Show>
     </main>
   );
 }
diff --git a/src/data.ts b/src/data.ts
new file mode 100644
index 0000000..3491759
--- /dev/null
+++ b/src/data.ts
@@ -0,0 +1,25 @@
+import {
+  openDB,
+  type DBSchema,
+  type IDBPDatabase,
+  type IDBPTransaction,
+  type StoreNames,
+} from "idb";
+
+export type Entry = {
+  weight: number;
+  timestamp: Date;
+};
+
+interface Schema extends DBSchema {
+  entries: { key: number; value: Entry; indexes: { timestamp: Date } };
+}
+
+export async function openDatabase() {
+  return await openDB<Schema>("waight", 1, {
+    upgrade(database, oldVersion, newVersion, transaction, event) {
+      const store = database.createObjectStore("entries");
+      store.createIndex("timestamp", "timestamp");
+    },
+  });
+}