diff --git a/CLAUDE.md b/CLAUDE.md
index d24514d..f49f1bc 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -12,6 +12,8 @@
   Зависимости через uv (`uv add`); gnexus-gauth — git-зависимость.
 - Frontend: Vue 3 + TypeScript + Vite. UI только через gnexus-ui-kit (git-зависимость,
   НЕ форкать и не копировать стили — кит часто обновляется; использовать публичный API).
+  Принцип: используем максимум готовых Vue-компонентов кита (Gn*), сырой HTML —
+  только когда в ките нет подходящего компонента.
 - Не редактировать файлы зависимостей в node_modules/.venv.
 - Формат ответов API: /api/* префикс. Конфиг — из окружения (pydantic-settings), .env не коммитим.
 
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3ae9db2..9713063 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import type { UserInfo } from './types'
 
-interface UserInfo {
-  user_id: string
-  email: string
-  avatar_url: string | null
-}
-
+const route = useRoute()
 const user = ref<UserInfo | null>(null)
 
+const navItems = [
+  { id: 'stack', label: 'Стек входящих', icon: 'ph-inbox', to: '/stack' },
+  { id: 'tree', label: 'Дерево задач', icon: 'ph-tree-structure', to: '/tree' },
+]
+
+const currentLabel = computed(() => {
+  const item = navItems.find((i) => i.to === route.path)
+  return item?.label ?? 'gntodo'
+})
+
 onMounted(async () => {
   const res = await fetch('/auth/me')
   if (res.ok) {
@@ -19,36 +26,38 @@
 </script>
 
 <template>
-  <main class="app-shell">
-    <nav class="app-nav">
-      <RouterLink to="/stack">Стек</RouterLink>
-      <RouterLink to="/tree">Дерево</RouterLink>
-      <span class="spacer" />
-      <a v-if="!user" href="/auth/login">Войти</a>
-      <span v-else>
-        {{ user.email }}
-        <a href="/auth/logout">Выйти</a>
-      </span>
-    </nav>
-    <RouterView />
-  </main>
+  <GnToastProvider>
+    <GnNavigationShell
+      brand="gntodo"
+      :items="navItems"
+      :current="currentLabel"
+      title="Разделы"
+      subtitle="gntodo — личные задачи"
+    >
+      <template #current>
+        <a v-if="!user" href="/auth/login">Войти</a>
+        <span v-else class="user-chip">
+          {{ user.email }}
+          <a href="/auth/logout">Выйти</a>
+        </span>
+      </template>
+      <template #content>
+        <div class="app-content">
+          <RouterView />
+        </div>
+      </template>
+    </GnNavigationShell>
+  </GnToastProvider>
 </template>
 
 <style>
-/* Стили gnexus-ui-kit подключаются через его CSS (kit.css) — см. docs кита.
-   Здесь — только каркас раскладки до полноценной интеграции кита. */
-.app-shell {
-  max-width: 960px;
+.app-content {
+  max-width: 760px;
   margin: 0 auto;
-  padding: 1rem;
+  padding: 1.5rem 1rem 3rem;
 }
-.app-nav {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 1rem;
-  align-items: center;
-}
-.app-nav .spacer {
-  flex: 1;
+.user-chip a {
+  margin-left: 0.5rem;
+  color: var(--muted);
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/api.ts b/frontend/src/api.ts
index 3e50515..10704f2 100644
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@@ -29,6 +29,15 @@
   done_at: string | null
 }
 
+export interface TaskUpdateInput {
+  title?: string
+  description?: string
+  project_id?: number | null
+  tag_ids?: number[]
+  priority?: number | null
+  status?: string
+}
+
 export class ApiError extends Error {
   status: number
   constructor(status: number, message: string) {
@@ -65,7 +74,7 @@
       method: 'POST',
       body: JSON.stringify({ title, description }),
     }),
-  updateTask: (id: number, patch: Partial<Task> & { tag_ids?: number[] }) =>
+  updateTask: (id: number, patch: TaskUpdateInput) =>
     request<Task>(`/api/tasks/${id}`, { method: 'PATCH', body: JSON.stringify(patch) }),
   approveTask: (id: number) => request<Task>(`/api/tasks/${id}/approve`, { method: 'POST' }),
   deleteTask: (id: number) => request<{ ok: boolean }>(`/api/tasks/${id}`, { method: 'DELETE' }),
diff --git a/frontend/src/gnexus-ui-kit.d.ts b/frontend/src/gnexus-ui-kit.d.ts
new file mode 100644
index 0000000..730839f
--- /dev/null
+++ b/frontend/src/gnexus-ui-kit.d.ts
@@ -0,0 +1,70 @@
+// gnexus-ui-kit поставляется без TS-деклараций (JS + JSDoc) — объявляем any.
+declare module 'gnexus-ui-kit/vue' {
+  import type { DefineComponent } from 'vue'
+
+  type AnyComponent = DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
+
+  export const GnexusUiVue: any
+  export const GnAccordion: AnyComponent
+  export const GnActionCard: AnyComponent
+  export const GnActionList: AnyComponent
+  export const GnAlert: AnyComponent
+  export const GnAvatar: AnyComponent
+  export const GnBadge: AnyComponent
+  export const GnButton: AnyComponent
+  export const GnCard: AnyComponent
+  export const GnCheckbox: AnyComponent
+  export const GnChip: AnyComponent
+  export const GnChipGroup: AnyComponent
+  export const GnCombobox: AnyComponent
+  export const GnConfirmDialog: AnyComponent
+  export const GnDefinitionList: AnyComponent
+  export const GnDescriptionList: AnyComponent
+  export const GnDrawer: AnyComponent
+  export const GnDropdown: AnyComponent
+  export const GnEmptyState: AnyComponent
+  export const GnFileUpload: AnyComponent
+  export const GnHorizontalCard: AnyComponent
+  export const GnIconButton: AnyComponent
+  export const GnIdentity: AnyComponent
+  export const GnInput: AnyComponent
+  export const GnInputGroup: AnyComponent
+  export const GnList: AnyComponent
+  export const GnLoader: AnyComponent
+  export const GnLoginCard: AnyComponent
+  export const GnMetricCard: AnyComponent
+  export const GnModal: AnyComponent
+  export const GnNavigationShell: AnyComponent
+  export const GnNavList: AnyComponent
+  export const GnPageHeader: AnyComponent
+  export const GnPagination: AnyComponent
+  export const GnPopover: AnyComponent
+  export const GnProgress: AnyComponent
+  export const GnProgressStages: AnyComponent
+  export const GnRadio: AnyComponent
+  export const GnRadioGroup: AnyComponent
+  export const GnRange: AnyComponent
+  export const GnRepeater: AnyComponent
+  export const GnRouterTabs: AnyComponent
+  export const GnSearchField: AnyComponent
+  export const GnSelect: AnyComponent
+  export const GnSkeleton: AnyComponent
+  export const GnSteps: AnyComponent
+  export const GnStatusCard: AnyComponent
+  export const GnSwitch: AnyComponent
+  export const GnTable: AnyComponent
+  export const GnTabs: AnyComponent
+  export const GnTextarea: AnyComponent
+  export const GnTimeline: AnyComponent
+  export const GnToastProvider: AnyComponent
+  export const GnTooltip: AnyComponent
+  export const GnToolbar: AnyComponent
+  export const GnUsageMeter: AnyComponent
+  export const GnUserCard: AnyComponent
+  export function useToast(): {
+    success: (opts: { title?: string; text?: string }) => void
+    error: (opts: { title?: string; text?: string }) => void
+    info: (opts: { title?: string; text?: string }) => void
+    warning: (opts: { title?: string; text?: string }) => void
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 279d525..2b1d4e2 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,5 +1,10 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
+
+import 'gnexus-ui-kit/dist/css/kit.css'
+import 'gnexus-ui-kit/dist/assets/fonts/phosphor-icons/src/css/icons.css'
+import { GnexusUiVue } from 'gnexus-ui-kit/vue'
+
 import App from './App.vue'
 import StackView from './views/StackView.vue'
 import TreeView from './views/TreeView.vue'
@@ -13,4 +18,4 @@
   ],
 })
 
-createApp(App).use(router).mount('#app')
\ No newline at end of file
+createApp(App).use(router).use(GnexusUiVue).mount('#app')
\ No newline at end of file
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
new file mode 100644
index 0000000..01afc29
--- /dev/null
+++ b/frontend/src/types.ts
@@ -0,0 +1,34 @@
+export interface Tag {
+  id: number
+  name: string
+}
+
+export interface Project {
+  id: number
+  name: string
+  relevance_status: string
+  priority: number | null
+  note: string
+}
+
+export interface Task {
+  id: number
+  title: string
+  description: string
+  task_type: string
+  status: string
+  detail_state: string
+  parent_task_id: number | null
+  project: Project | null
+  priority: number | null
+  tags: Tag[]
+  created_at: string
+  approved_at: string | null
+  done_at: string | null
+}
+
+export interface UserInfo {
+  user_id: string
+  email: string
+  avatar_url: string | null
+}
\ No newline at end of file
diff --git a/frontend/src/views/StackView.vue b/frontend/src/views/StackView.vue
index 3730b77..6e8f27f 100644
--- a/frontend/src/views/StackView.vue
+++ b/frontend/src/views/StackView.vue
@@ -15,8 +15,8 @@
 const editForm = ref({
   title: '',
   description: '',
-  project_id: null as number | null,
-  tag_ids: [] as number[],
+  project_id: '' as string | number,
+  tagSelection: {} as Record<number, boolean>,
   priority: null as number | null,
 })
 
@@ -44,13 +44,21 @@
   }
 }
 
+function selectedTagIds(): number[] {
+  return Object.entries(editForm.value.tagSelection)
+    .filter(([, on]) => on)
+    .map(([id]) => Number(id))
+}
+
 function startEdit(task: Task) {
   editing.value = task
+  const selection: Record<number, boolean> = {}
+  task.tags.forEach((t) => (selection[t.id] = true))
   editForm.value = {
     title: task.title,
     description: task.description,
-    project_id: task.project?.id ?? null,
-    tag_ids: task.tags.map((t) => t.id),
+    project_id: task.project?.id ?? '',
+    tagSelection: selection,
     priority: task.priority,
   }
 }
@@ -59,7 +67,13 @@
   if (!editing.value) return
   error.value = ''
   try {
-    await api.updateTask(editing.value.id, editForm.value)
+    await api.updateTask(editing.value.id, {
+      title: editForm.value.title,
+      description: editForm.value.description,
+      project_id: editForm.value.project_id === '' ? null : Number(editForm.value.project_id),
+      tag_ids: selectedTagIds(),
+      priority: editForm.value.priority,
+    })
     await api.approveTask(editing.value.id)
     editing.value = null
     await loadStack()
@@ -106,12 +120,17 @@
   try {
     const t = await api.createTag(name.trim())
     tags.value.push(t)
-    editForm.value.tag_ids.push(t.id)
+    editForm.value.tagSelection[t.id] = true
   } catch (e) {
     error.value = String(e)
   }
 }
 
+const projectOptions = () => [
+  { value: '', label: '— без проекта —' },
+  ...projects.value.map((p) => ({ value: String(p.id), label: p.name })),
+]
+
 onMounted(async () => {
   await loadStack()
   projects.value = await api.listProjects()
@@ -120,88 +139,144 @@
 </script>
 
 <template>
-  <section class="stack">
-    <h1>Стек входящих <span class="count">{{ stack.length }}</span></h1>
+  <section>
+    <GnPageHeader kicker="gntodo" title="Стек входящих" :meta="`Задач в стеке: ${stack.length}`" />
 
     <!-- Быстрый ввод: одна строка, без метаданных -->
     <form class="quick-add" @submit.prevent="quickAdd">
-      <input
+      <GnInput
         v-model="quickTitle"
-        type="text"
+        icon="ph-plus"
         placeholder="Закинуть задачу — только текст, остальное потом…"
         autofocus
       />
-      <button type="submit">Добавить</button>
+      <GnButton type="submit" variant="primary" icon="ph-arrow-circle-down">Закинуть</GnButton>
     </form>
 
-    <p v-if="error" class="error">{{ error }}</p>
-    <p v-if="!loading && stack.length === 0" class="empty">Стек пуст — закиньте первую задачу.</p>
+    <GnAlert v-if="error" variant="error">{{ error }}</GnAlert>
 
-    <ul class="task-list">
-      <li v-for="task in stack" :key="task.id" class="task-item">
-        <template v-if="editing?.id === task.id">
-          <!-- Редактирование: предложенные метаданные правятся вручную, затем утверждение -->
-          <form class="edit-form" @submit.prevent="saveEdit">
-            <input v-model="editForm.title" type="text" placeholder="Заголовок" required />
-            <textarea v-model="editForm.description" rows="4" placeholder="Описание (Markdown)" />
-            <div class="form-row">
-              <label>Проект</label>
-              <select v-model="editForm.project_id">
-                <option :value="null">— нет —</option>
-                <option v-for="p in projects" :key="p.id" :value="p.id">{{ p.name }}</option>
-              </select>
-              <button type="button" @click="createProjectInline">+ проект</button>
-            </div>
-            <div class="form-row">
-              <label>Теги</label>
-              <select multiple v-model="editForm.tag_ids" size="4">
-                <option v-for="t in tags" :key="t.id" :value="t.id">{{ t.name }}</option>
-              </select>
-              <button type="button" @click="createTagInline">+ тег</button>
-            </div>
-            <div class="form-row">
-              <label>Приоритет</label>
-              <input v-model.number="editForm.priority" type="number" min="0" max="10" />
-            </div>
-            <div class="form-actions">
-              <button type="submit" class="accent">Утвердить</button>
-              <button type="button" @click="editing = null">Отмена</button>
-            </div>
-          </form>
+    <GnEmptyState
+      v-if="!loading && stack.length === 0"
+      icon="ph-inbox"
+      title="Стек пуст"
+      text="Закиньте первую задачу — детализация подберётся автоматически."
+    />
+
+    <div class="task-list">
+      <GnCard v-for="task in stack" :key="task.id" class="task-card">
+        <template #title>
+          <template v-if="editing?.id !== task.id">{{ task.title }}</template>
         </template>
+
+        <!-- Редактирование: метаданные правятся вручную, затем утверждение -->
+        <form v-if="editing?.id === task.id" class="edit-form" @submit.prevent="saveEdit">
+          <GnInput v-model="editForm.title" label="Заголовок" required />
+          <GnTextarea v-model="editForm.description" label="Описание (Markdown)" :rows="4" />
+          <GnSelect
+            v-model="editForm.project_id"
+            label="Проект"
+            icon="ph-folder"
+            :options="projectOptions()"
+          />
+          <div class="form-row-actions">
+            <GnButton type="button" variant="secondary" size="sm" icon="ph-plus" @click="createProjectInline">
+              Новый проект
+            </GnButton>
+          </div>
+          <fieldset class="tags-fieldset">
+            <legend>Теги</legend>
+            <GnCheckbox
+              v-for="t in tags"
+              :key="t.id"
+              v-model="editForm.tagSelection[t.id]"
+              :label="t.name"
+            />
+            <GnButton type="button" variant="secondary" size="sm" icon="ph-plus" @click="createTagInline">
+              Новый тег
+            </GnButton>
+          </fieldset>
+          <GnInput v-model.number="editForm.priority" label="Приоритет (0–10)" type="number" />
+          <div class="form-actions">
+            <GnButton type="submit" variant="accent" icon="ph-check-circle">Утвердить</GnButton>
+            <GnButton type="button" variant="secondary" @click="editing = null">Отмена</GnButton>
+          </div>
+        </form>
+
+        <!-- Просмотр сырой задачи -->
         <template v-else>
-          <div class="task-row">
-            <span class="task-title">{{ task.title }}</span>
-            <span class="task-meta">{{ new Date(task.created_at).toLocaleString('ru') }}</span>
-            <div class="task-actions">
-              <button type="button" class="accent" @click="approve(task)">Да, всё верно</button>
-              <button type="button" @click="startEdit(task)">Детализировать</button>
-              <button type="button" @click="remove(task)">Удалить</button>
-            </div>
+          <div class="task-meta">
+            <GnBadge variant="info">в стеке</GnBadge>
+            <span class="muted">{{ new Date(task.created_at).toLocaleString('ru') }}</span>
+          </div>
+          <div class="task-actions">
+            <GnButton variant="accent" size="sm" icon="ph-check" @click="approve(task)">
+              Да, всё верно
+            </GnButton>
+            <GnButton variant="secondary" size="sm" icon="ph-pencil-simple" @click="startEdit(task)">
+              Детализировать
+            </GnButton>
+            <GnIconButton icon="ph-trash" label="Удалить задачу" @click="remove(task)" />
           </div>
         </template>
-      </li>
-    </ul>
+      </GnCard>
+    </div>
   </section>
 </template>
 
 <style scoped>
-.stack { max-width: 720px; }
-.count { color: var(--muted, #888); font-size: 0.9em; }
-.quick-add { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
-.quick-add input { flex: 1; padding: 0.6rem; }
-.task-list { list-style: none; padding: 0; }
-.task-item { border-bottom: 1px solid var(--border, #333); padding: 0.6rem 0; }
-.task-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
-.task-title { flex: 1; min-width: 200px; }
-.task-meta { color: var(--muted, #888); font-size: 0.85em; }
-.task-actions, .form-actions { display: flex; gap: 0.5rem; }
-.edit-form { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 0; }
-.edit-form input, .edit-form textarea, .edit-form select { width: 100%; box-sizing: border-box; }
-.form-row { display: flex; gap: 0.5rem; align-items: center; }
-.form-row label { min-width: 70px; }
-.error { color: #e06c75; }
-.empty { color: var(--muted, #888); }
-.accent { font-weight: 600; }
-button { cursor: pointer; }
+.quick-add {
+  display: flex;
+  gap: 0.75rem;
+  align-items: start;
+  margin-bottom: 1.5rem;
+}
+.quick-add > :first-child {
+  flex: 1;
+}
+.task-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.task-meta {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+.muted {
+  color: var(--text-muted, #888);
+  font-size: 0.85em;
+}
+.task-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.edit-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.form-row-actions {
+  margin-top: -0.5rem;
+}
+.tags-fieldset {
+  border: 1px solid var(--border, #333);
+  border-radius: 6px;
+  padding: 0.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+}
+.tags-fieldset legend {
+  padding: 0 0.5rem;
+  font-size: 0.85em;
+  color: var(--text-muted, #888);
+}
+.form-actions {
+  display: flex;
+  gap: 0.75rem;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/TreeView.vue b/frontend/src/views/TreeView.vue
index d1c7fe5..329a33e 100644
--- a/frontend/src/views/TreeView.vue
+++ b/frontend/src/views/TreeView.vue
@@ -3,8 +3,10 @@
 </script>
 
 <template>
-  <section>
-    <h1>Дерево задач</h1>
-    <p>Пока пусто — дерево появится в M3.</p>
-  </section>
+  <GnPageHeader kicker="gntodo" title="Дерево задач" meta="Основной вид: подзадачи — ветви" />
+  <GnEmptyState
+    icon="ph-tree-structure"
+    title="Дерево появится в M3"
+    text="Здесь будут задачи в виде ветвящегося дерева: проекты → задачи → подзадачи."
+  />
 </template>
\ No newline at end of file
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 0beaf31..f46107e 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,9 +1,52 @@
-import { defineConfig } from 'vite'
+import { createReadStream, existsSync, statSync, cpSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { defineConfig, type Plugin } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
-// Dev: /api проксируется на backend. В проде nginx отдаёт статику и проксирует сам.
+// kit.css ссылается на шрифты/иконки через абсолютные /assets/... URL —
+// по контракту кита хост обязан отдавать его dist/assets на /assets.
+// В dev — middleware, в build — копирование в dist/assets.
+const kitAssetsDir = path.resolve(
+  fileURLToPath(new URL('.', import.meta.url)),
+  'node_modules/gnexus-ui-kit/dist/assets',
+)
+
+const mimeByExt: Record<string, string> = {
+  '.css': 'text/css',
+  '.js': 'text/javascript',
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+}
+
+function kitAssetsPlugin(): Plugin {
+  return {
+    name: 'gnexus-kit-assets',
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        const url = (req.url ?? '').split('?')[0]
+        if (!url.startsWith('/assets/')) return next()
+        const file = path.join(kitAssetsDir, url.slice('/assets/'.length))
+        if (!existsSync(file) || !statSync(file).isFile()) return next()
+        res.setHeader('Content-Type', mimeByExt[path.extname(file)] ?? 'application/octet-stream')
+        createReadStream(file).pipe(res)
+      })
+    },
+    closeBundle() {
+      cpSync(kitAssetsDir, path.resolve(fileURLToPath(new URL('.', import.meta.url)), 'dist/assets'), {
+        recursive: true,
+      })
+    },
+  }
+}
+
+// Dev: /api и /auth проксируются на backend. В проде nginx отдаёт статику и проксирует сам.
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), kitAssetsPlugin()],
   server: {
     port: 15134, // 5173 занят другими проектами; мнемоника: 1 + API 8134
     proxy: {