diff --git a/apps/web/package.json b/apps/web/package.json
index c83804f..d3cc23b 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -14,6 +14,7 @@
     "@fontsource-variable/geist": "^5.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "dexie": "^4.4.2",
     "lucide-react": "^1.7.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
diff --git a/apps/web/src/services/local-db.ts b/apps/web/src/services/local-db.ts
new file mode 100644
index 0000000..44bddde
--- /dev/null
+++ b/apps/web/src/services/local-db.ts
@@ -0,0 +1,55 @@
+import Dexie, { type Table } from "dexie";
+
+export type LocalTaskPriority = "LOW" | "MEDIUM" | "HIGH" | "URGENT";
+
+export type LocalTaskStatus = "TODO" | "IN_PROGRESS" | "DONE" | "ARCHIVED";
+
+export type SyncEntityType = "TASK";
+
+export type SyncActionType = "CREATE" | "UPDATE" | "DELETE";
+
+export type LocalTaskRecord = {
+  id: string;
+  userId: string;
+  title: string;
+  contentJson: string | null;
+  contentText: string | null;
+  priority: LocalTaskPriority;
+  status: LocalTaskStatus;
+  ddlAt: number | null;
+  createdAt: number;
+  updatedAt: number;
+  deletedAt: number | null;
+};
+
+export type LocalOpLogRecord = {
+  opId: string;
+  entityId: string;
+  entityType: SyncEntityType;
+  action: SyncActionType;
+  payload: string;
+  clientTs: number;
+  deviceId: string;
+  syncedAt: number | null;
+  retryCount: number;
+  errorMessage: string | null;
+};
+
+class TodoLocalDb extends Dexie {
+  declare tasks: Table<LocalTaskRecord, string>;
+  declare opLogs: Table<LocalOpLogRecord, string>;
+
+  constructor() {
+    super("todolist-web-db");
+
+    this.version(1).stores({
+      tasks: "&id,userId,status,priority,ddlAt,updatedAt,deletedAt",
+      op_logs: "&opId,entityId,entityType,action,clientTs,syncedAt"
+    });
+
+    this.tasks = this.table("tasks");
+    this.opLogs = this.table("op_logs");
+  }
+}
+
+export const localDb = new TodoLocalDb();
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 73e0ebc..4b40b2d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -155,6 +155,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      dexie:
+        specifier: ^4.4.2
+        version: 4.4.2
       lucide-react:
         specifier: ^1.7.0
         version: 1.7.0(react@19.2.4)
@@ -3966,6 +3969,12 @@ packages:
       }
     engines: { node: ">=8" }
 
+  dexie@4.4.2:
+    resolution:
+      {
+        integrity: sha512-zMtV8q79EFE5U8FKZvt0Y/77PCU/Hr/RDxv1EDeo228L+m/HTbeN2AjoQm674rhQCX8n3ljK87lajt7UQuZfvw==
+      }
+
   dezalgo@1.0.4:
     resolution:
       {
@@ -10858,6 +10867,8 @@ snapshots:
 
   detect-newline@3.1.0: {}
 
+  dexie@4.4.2: {}
+
   dezalgo@1.0.4:
     dependencies:
       asap: 2.0.6