diff --git a/app/composables/useAuth.ts b/app/composables/useAuth.ts
new file mode 100644
index 0000000..b1bfbd8
--- /dev/null
+++ b/app/composables/useAuth.ts
@@ -0,0 +1,33 @@
+// Access the provided Zitadel auth instance + a small JSON helper for /api calls.
+// `auth.fetch` auto-attaches the Bearer access token.
+export function useAuth() {
+  const { $auth } = useNuxtApp() as unknown as {
+    $auth: {
+      isAuthenticated: Ref<boolean>;
+      isLoading: Ref<boolean>;
+      user: Ref<{ sub: string; name: string; email: string } | null>;
+      error: Ref<string | null>;
+      login: () => void;
+      logout: () => Promise<void>;
+      fetch: (url: string, init?: RequestInit) => Promise<Response>;
+    };
+  };
+
+  async function api<T = unknown>(path: string, init?: RequestInit): Promise<T> {
+    const res = await $auth.fetch(`/api${path}`, init);
+    if (!res.ok) {
+      let message = `${res.status}`;
+      try {
+        const body = await res.json();
+        message = body?.statusMessage || body?.message || message;
+      } catch {
+        // non-JSON error body
+      }
+      throw new Error(message);
+    }
+    if (res.status === 204) return undefined as T;
+    return (await res.json()) as T;
+  }
+
+  return { auth: $auth, api };
+}
diff --git a/app/pages/auth/callback.vue b/app/pages/auth/callback.vue
new file mode 100644
index 0000000..43a557a
--- /dev/null
+++ b/app/pages/auth/callback.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+// The Zitadel client processes the OIDC redirect during init(); once authenticated,
+// move back to the app root.
+const { auth } = useAuth();
+watchEffect(() => {
+  if (!auth.isLoading.value && auth.isAuthenticated.value) {
+    navigateTo("/", { replace: true });
+  }
+});
+</script>
+
+<template>
+  <main class="callback">
+    <p>Signing you in…</p>
+  </main>
+</template>
+
+<style scoped>
+.callback {
+  min-height: 100dvh;
+  display: grid;
+  place-items: center;
+  color: #6b7280;
+  font: 500 1rem/1.4 system-ui, sans-serif;
+}
+</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
new file mode 100644
index 0000000..8dd5eed
--- /dev/null
+++ b/app/pages/index.vue
@@ -0,0 +1,376 @@
+<script setup lang="ts">
+interface List {
+  id: string;
+  name: string;
+}
+interface Task {
+  id: string;
+  listId: string;
+  title: string;
+  description: string | null;
+  source: string;
+  consumed: boolean;
+  createdAt: string;
+}
+
+const { auth, api } = useAuth();
+
+const lists = ref<List[]>([]);
+const selectedId = ref<string | null>(null);
+const tasks = ref<Task[]>([]);
+const loadingLists = ref(true);
+const loadingTasks = ref(false);
+const error = ref<string | null>(null);
+
+const title = ref("");
+const description = ref("");
+const adding = ref(false);
+
+const selectedList = computed(() => lists.value.find((l) => l.id === selectedId.value) ?? null);
+
+async function refreshLists() {
+  loadingLists.value = true;
+  error.value = null;
+  try {
+    lists.value = await api<List[]>("/lists");
+    if (lists.value.length && !lists.value.some((l) => l.id === selectedId.value)) {
+      await selectList(lists.value[0]!.id);
+    }
+  } catch (e) {
+    error.value = (e as Error).message;
+  } finally {
+    loadingLists.value = false;
+  }
+}
+
+async function selectList(id: string) {
+  selectedId.value = id;
+  await refreshTasks();
+}
+
+async function refreshTasks() {
+  if (!selectedId.value) return;
+  loadingTasks.value = true;
+  error.value = null;
+  try {
+    tasks.value = await api<Task[]>(`/lists/${selectedId.value}/tasks`);
+  } catch (e) {
+    error.value = (e as Error).message;
+  } finally {
+    loadingTasks.value = false;
+  }
+}
+
+async function addTask() {
+  const t = title.value.trim();
+  if (!t || !selectedId.value || adding.value) return;
+  adding.value = true;
+  error.value = null;
+  try {
+    const created = await api<Task>("/tasks", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        title: t,
+        description: description.value.trim() || undefined,
+        listId: selectedId.value,
+      }),
+    });
+    tasks.value = [...tasks.value, created];
+    title.value = "";
+    description.value = "";
+  } catch (e) {
+    error.value = (e as Error).message;
+  } finally {
+    adding.value = false;
+  }
+}
+
+onMounted(refreshLists);
+</script>
+
+<template>
+  <div class="app">
+    <header class="topbar">
+      <h1>Inbox</h1>
+      <div class="who" v-if="auth.user.value">
+        <span class="email">{{ auth.user.value.email || auth.user.value.name }}</span>
+        <button class="link" @click="auth.logout()">Sign out</button>
+      </div>
+    </header>
+
+    <main class="content">
+      <p v-if="error" class="error" role="alert">{{ error }}</p>
+
+      <template v-if="loadingLists">
+        <p class="muted">Loading lists…</p>
+      </template>
+
+      <template v-else-if="!lists.length">
+        <div class="empty">
+          <p class="empty-title">No lists yet</p>
+          <p class="muted">Sync your lists from the ClaudeDo desktop app, then add tasks here.</p>
+        </div>
+      </template>
+
+      <template v-else>
+        <nav class="lists" aria-label="Lists">
+          <button
+            v-for="l in lists"
+            :key="l.id"
+            class="chip"
+            :class="{ active: l.id === selectedId }"
+            @click="selectList(l.id)"
+          >
+            {{ l.name }}
+          </button>
+        </nav>
+
+        <section class="tasks" aria-label="Tasks">
+          <p v-if="loadingTasks" class="muted">Loading…</p>
+          <p v-else-if="!tasks.length" class="muted">No tasks in {{ selectedList?.name }} yet.</p>
+          <ul v-else class="task-list">
+            <li v-for="t in tasks" :key="t.id" class="task">
+              <p class="task-title">{{ t.title }}</p>
+              <p v-if="t.description" class="task-desc">{{ t.description }}</p>
+            </li>
+          </ul>
+        </section>
+      </template>
+    </main>
+
+    <form v-if="lists.length" class="composer" @submit.prevent="addTask">
+      <input
+        v-model="title"
+        class="input"
+        type="text"
+        :placeholder="`Add to ${selectedList?.name ?? 'list'}…`"
+        autocomplete="off"
+        enterkeyhint="done"
+        aria-label="Task title"
+      />
+      <input
+        v-model="description"
+        class="input desc"
+        type="text"
+        placeholder="Description (optional)"
+        autocomplete="off"
+        aria-label="Task description"
+      />
+      <button class="add" type="submit" :disabled="!title.trim() || adding">
+        {{ adding ? "Adding…" : "Add task" }}
+      </button>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.app {
+  --bg: #f7f7f8;
+  --card: #ffffff;
+  --border: #e5e7eb;
+  --text: #111827;
+  --muted: #6b7280;
+  --accent: #6d4aff;
+  --accent-contrast: #ffffff;
+  --danger: #b42318;
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  color: var(--text);
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: max(0.75rem, env(safe-area-inset-top)) 1rem 0.75rem;
+  background: color-mix(in srgb, var(--bg) 85%, transparent);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--border);
+}
+.topbar h1 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+.who {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+}
+.email {
+  font-size: 0.8rem;
+  color: var(--muted);
+  max-width: 9rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.link {
+  border: 0;
+  background: none;
+  color: var(--accent);
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 0.4rem 0.2rem;
+  cursor: pointer;
+}
+
+.content {
+  flex: 1;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow-y: auto;
+}
+
+.lists {
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+  padding-bottom: 0.25rem;
+  scrollbar-width: none;
+}
+.lists::-webkit-scrollbar {
+  display: none;
+}
+.chip {
+  flex: 0 0 auto;
+  min-height: 40px;
+  padding: 0.5rem 1rem;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--card);
+  color: var(--text);
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s;
+}
+.chip.active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-contrast);
+}
+
+.task-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.task {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 0.85rem 1rem;
+}
+.task-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+.task-desc {
+  margin: 0.35rem 0 0;
+  font-size: 0.875rem;
+  color: var(--muted);
+  line-height: 1.4;
+  white-space: pre-wrap;
+}
+
+.empty {
+  margin-top: 2rem;
+  text-align: center;
+}
+.empty-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin: 0 0 0.35rem;
+}
+.muted {
+  color: var(--muted);
+  font-size: 0.9rem;
+  margin: 0;
+}
+.error {
+  background: #fef3f2;
+  color: var(--danger);
+  border: 1px solid #fecdca;
+  border-radius: 10px;
+  padding: 0.6rem 0.8rem;
+  font-size: 0.875rem;
+  margin: 0;
+}
+
+.composer {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
+  background: var(--card);
+  border-top: 1px solid var(--border);
+}
+.input {
+  width: 100%;
+  min-height: 48px;
+  padding: 0.7rem 0.9rem;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  font-size: 1rem;
+  background: var(--bg);
+  color: var(--text);
+}
+.input:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+  border-color: transparent;
+}
+.input.desc {
+  font-size: 0.9rem;
+}
+.add {
+  min-height: 48px;
+  border: 0;
+  border-radius: 12px;
+  background: var(--accent);
+  color: var(--accent-contrast);
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+.add:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (prefers-color-scheme: dark) {
+  .app {
+    --bg: #0f1115;
+    --card: #1a1d24;
+    --border: #2a2f3a;
+    --text: #f3f4f6;
+    --muted: #9ca3af;
+    --accent: #8b6dff;
+    --danger: #ff9a8d;
+  }
+  .error {
+    background: #2a1815;
+    border-color: #5a2a22;
+  }
+}
+</style>
diff --git a/app/plugins/auth.client.ts b/app/plugins/auth.client.ts
new file mode 100644
index 0000000..7f6406d
--- /dev/null
+++ b/app/plugins/auth.client.ts
@@ -0,0 +1,13 @@
+import { useZitadelAuth } from "@kuns/zitadel-auth/vue";
+
+// Wire the framework-agnostic Zitadel OIDC client to Nuxt's router (client-only SPA).
+// Provides `$auth` (reactive state + login/logout/fetch). The adapter installs a
+// router guard that redirects unauthenticated users to the Zitadel hosted login.
+export default defineNuxtPlugin(() => {
+  const cfg = useRuntimeConfig().public;
+  const auth = useZitadelAuth(useRouter() as never, {
+    clientId: cfg.zitadelClientId as string,
+    issuer: cfg.zitadelIssuer as string,
+  });
+  return { provide: { auth } };
+});