diff --git a/.env.example b/.env.example
index e10ac81..31b29dd 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,7 @@
 NUXT_PUBLIC_API_BASE_URL=http://localhost:8000/api/v1
+# Product analytics. Leave empty to collect nothing: the engagement plugin
+# stops before starting when no site key is set.
+NUXT_PUBLIC_ENGAGEMENT_SITE_KEY=trakli-dashboard
 
 # Real-time chat streaming (Laravel Reverb). Leave REVERB_KEY empty to run on
 # polling only. Host/port are where the browser reaches the Reverb server (the
@@ -7,4 +10,3 @@ NUXT_PUBLIC_REVERB_KEY=your-reverb-app-key
 NUXT_PUBLIC_REVERB_HOST=localhost
 NUXT_PUBLIC_REVERB_PORT=6001
 NUXT_PUBLIC_REVERB_SCHEME=http
-
diff --git a/assets/css/design-brand.css b/assets/css/design-brand.css
new file mode 100644
index 0000000..bc321e9
--- /dev/null
+++ b/assets/css/design-brand.css
@@ -0,0 +1,36 @@
+/*
+ * Trakli's brand, expressed in the design system's brand contract.
+ *
+ * Only tokens listed in @whilesmart/design/tokens/brand.css belong here. Anything else the
+ * admin needs is derived from these, so one value changes the whole console.
+ *
+ * Every text pair here is held to 4.5:1 in both themes by a test.
+ */
+
+:root {
+  --ds-brand-primary-50: #f0f5f2;
+  --ds-brand-primary-100: #d8e8e1;
+  --ds-brand-primary-200: #b6d8c9;
+  --ds-brand-primary-300: #89c8ab;
+  --ds-brand-primary-400: #57c192;
+  --ds-brand-primary-500: #27a56c;
+  --ds-brand-primary-600: #129158;
+  --ds-brand-primary-700: #09864e;
+  --ds-brand-primary-800: #047844;
+  --ds-brand-primary-900: #02502d;
+
+  --ds-brand-secondary-50: #edf7f6;
+  --ds-brand-secondary-100: #d2efeb;
+  --ds-brand-secondary-200: #aae4dc;
+  --ds-brand-secondary-300: #78d9cc;
+  --ds-brand-secondary-400: #43d0bd;
+  --ds-brand-secondary-500: #24b29f;
+  --ds-brand-secondary-600: #189584;
+  --ds-brand-secondary-700: #0e8171;
+  --ds-brand-secondary-800: #07695c;
+  --ds-brand-secondary-900: #024b41;
+
+  --ds-brand-font-sans:
+    'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
+}
diff --git a/components/TAvatar.vue b/components/TAvatar.vue
index 1a8789f..39c33d7 100644
--- a/components/TAvatar.vue
+++ b/components/TAvatar.vue
@@ -25,6 +25,10 @@
             <ShieldCheck class="menu-icon" />
             <span>{{ t('Admin') }}</span>
           </button>
+          <button class="menu-item" @click="goToFeedback">
+            <MessageSquare class="menu-icon" />
+            <span>{{ t('Send feedback') }}</span>
+          </button>
           <button class="menu-item menu-item--danger" @click="handleLogout">
             <LogOut class="menu-icon" />
             <span>{{ t('Logout') }}</span>
@@ -37,7 +41,7 @@
 
 <script setup>
 import { useRouter } from 'vue-router';
-import { Settings, LogOut, ShieldCheck } from 'lucide-vue-next';
+import { Settings, LogOut, ShieldCheck, MessageSquare } from 'lucide-vue-next';
 import { useAuth } from '@/composables/useAuth';
 import { useDropdown } from '@/composables/useDropdown';
 
@@ -76,6 +80,11 @@ const goToAdmin = () => {
   router.push('/admin');
 };
 
+const goToFeedback = () => {
+  close();
+  router.push('/feedback');
+};
+
 const handleLogout = async () => {
   close();
   await logout();
diff --git a/components/admin/OutreachComposer.vue b/components/admin/OutreachComposer.vue
index 96dd2b3..c0653d3 100644
--- a/components/admin/OutreachComposer.vue
+++ b/components/admin/OutreachComposer.vue
@@ -1,30 +1,19 @@
 <template>
   <div class="composer">
     <form class="composer__form" @submit.prevent="onSend">
-      <label class="field">
-        <span class="field__label">{{ t('Subject') }}</span>
-        <input v-model="form.subject" class="field__input" :placeholder="t('Subject')" required />
-      </label>
+      <DsInput v-model="form.subject" :label="t('Subject')" :placeholder="t('Subject')" required />
 
       <div class="field">
         <span class="field__label">{{ t('Message') }}</span>
         <div class="md-toolbar">
-          <button
-            v-for="f in formats"
-            :key="f.label"
-            type="button"
-            class="md-btn"
-            :title="t(f.label)"
-            @click="f.action()"
-          >
+          <DsIconButton v-for="f in formats" :key="f.label" :title="t(f.label)" @click="f.action()">
             <component :is="f.icon" class="md-btn__icon" />
-          </button>
+          </DsIconButton>
         </div>
-        <textarea
+        <DsTextarea
           ref="bodyRef"
           v-model="form.body"
-          class="field__textarea"
-          rows="8"
+          :rows="8"
           :placeholder="t('Write your message. Markdown is supported.')"
           required
         />
@@ -47,44 +36,30 @@
 
       <div class="tokens">
         <span class="tokens__hint">{{ t('Personalize with:') }}</span>
-        <button
-          v-for="token in tokens"
-          :key="token"
-          type="button"
-          class="token"
-          @click="insertToken(token)"
-        >
+        <DsChip v-for="token in tokens" :key="token" clickable @click="insertToken(token)">
           {{ token }}
-        </button>
+        </DsChip>
       </div>
 
       <div class="cta-row">
-        <label class="field">
-          <span class="field__label">{{ t('Button label') }}</span>
-          <input
-            v-model="form.cta_label"
-            class="field__input"
-            :placeholder="t('e.g. Open Trakli')"
-          />
-        </label>
-        <label class="field">
-          <span class="field__label">{{ t('Button link') }}</span>
-          <input v-model="form.cta_url" class="field__input" placeholder="https://" />
-        </label>
+        <DsInput
+          v-model="form.cta_label"
+          :label="t('Button label')"
+          :placeholder="t('e.g. Open Trakli')"
+        />
+        <DsInput
+          v-model="form.cta_url"
+          :label="t('Button link')"
+          placeholder="https://"
+          type="url"
+        />
       </div>
 
-      <label class="field">
-        <span class="field__label">{{ t('Audience') }}</span>
-        <select v-model="form.audience" class="field__input">
-          <option v-for="opt in audiences" :key="opt.value" :value="opt.value">
-            {{ opt.label }}
-          </option>
-        </select>
-      </label>
+      <DsDropdown v-model="form.audience" :options="audiences" :label="t('Audience')" />
 
       <div v-if="form.audience === 'specific'" class="field">
         <span class="field__label">{{ t('Choose recipients') }}</span>
-        <input v-model="userQuery" class="field__input" :placeholder="t('Search users')" />
+        <DsInput v-model="userQuery" :placeholder="t('Search users')" />
         <div class="recipients">
           <label v-for="u in filteredUsers" :key="u.id" class="recipient">
             <input v-model="form.user_ids" type="checkbox" :value="u.id" />
@@ -114,29 +89,16 @@
       <div v-if="confirming" class="confirm">
         <p class="confirm__text">{{ confirmText }}</p>
         <div class="confirm__actions">
-          <TButton
-            :text="t('Cancel')"
-            variant="outline"
-            size="small"
-            :full-width="false"
-            @click="confirming = false"
-          />
-          <TButton
-            :text="t('Send now')"
-            size="small"
-            :full-width="false"
-            :loading="sending"
-            @click="send"
-          />
+          <DsButton variant="secondary" size="sm" @click="confirming = false">{{
+            t('Cancel')
+          }}</DsButton>
+          <DsButton size="sm" :loading="sending" @click="send">{{ t('Send now') }}</DsButton>
         </div>
       </div>
       <div v-else class="composer__actions">
-        <TButton
-          type="submit"
-          :text="form.audience === 'test' ? t('Send test to me') : t('Send')"
-          :full-width="false"
-          :loading="sending"
-        />
+        <DsButton type="submit" :loading="sending">{{
+          form.audience === 'test' ? t('Send test to me') : t('Send')
+        }}</DsButton>
       </div>
     </form>
 
@@ -168,7 +130,14 @@ import {
   ListOrdered as ListOrderedIcon,
   Link2 as LinkIcon
 } from 'lucide-vue-next';
-import TButton from '@/components/TButton.vue';
+import {
+  DsButton,
+  DsChip,
+  DsDropdown,
+  DsIconButton,
+  DsInput,
+  DsTextarea
+} from '@whilesmart/design';
 import { adminApi, type OutreachAudience, type AdminUser } from '@/services/api/adminApi';
 
 const { t } = useI18n();
@@ -285,10 +254,10 @@ const insertToken = (token: string) => {
   form.body = `${form.body}${form.body.endsWith(' ') || !form.body ? '' : ' '}${token} `;
 };
 
-const bodyRef = ref<HTMLTextAreaElement | null>(null);
+const bodyRef = ref<{ textarea: HTMLTextAreaElement | null } | null>(null);
 
 const surround = (before: string, after: string) => {
-  const el = bodyRef.value;
+  const el = bodyRef.value?.textarea;
   if (!el) return;
   const start = el.selectionStart;
   const end = el.selectionEnd;
@@ -302,7 +271,7 @@ const surround = (before: string, after: string) => {
 };
 
 const prefixLines = (prefix: string) => {
-  const el = bodyRef.value;
+  const el = bodyRef.value?.textarea;
   if (!el) return;
   const lineStart = form.body.lastIndexOf('\n', el.selectionStart - 1) + 1;
   const block = form.body.slice(lineStart, el.selectionEnd);
@@ -396,30 +365,6 @@ const send = async () => {
   color: $text-secondary;
 }
 
-.field__input,
-.field__textarea {
-  width: 100%;
-  box-sizing: border-box;
-  border: 1px solid $border-color;
-  border-radius: $radius-lg;
-  padding: 0.6rem 0.75rem;
-  font-size: $font-size-sm;
-  font-family: inherit;
-  color: $text-primary;
-  background: $bg-white;
-
-  &:focus {
-    outline: none;
-    border-color: $primary;
-  }
-}
-
-.field__textarea {
-  resize: vertical;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
 .md-toolbar {
   display: flex;
   gap: 0.15rem;
@@ -430,24 +375,6 @@ const send = async () => {
   background: $bg-light;
 }
 
-.md-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: $radius-md;
-  background: transparent;
-  color: $text-secondary;
-  cursor: pointer;
-
-  &:hover {
-    background: $bg-white;
-    color: $primary;
-  }
-}
-
 .md-btn__icon {
   width: 15px;
   height: 15px;
@@ -465,21 +392,6 @@ const send = async () => {
   color: $text-muted;
 }
 
-.token {
-  border: 1px solid $border-color;
-  background: $bg-light;
-  border-radius: $radius-md;
-  padding: 0.2rem 0.5rem;
-  font-size: $font-size-xs;
-  font-family: monospace;
-  color: $primary-dark;
-  cursor: pointer;
-
-  &:hover {
-    border-color: $primary;
-  }
-}
-
 .cta-row {
   display: grid;
   grid-template-columns: 1fr 1.3fr;
diff --git a/components/auth/AuthSocialLogin.vue b/components/auth/AuthSocialLogin.vue
index 8958039..251420f 100644
--- a/components/auth/AuthSocialLogin.vue
+++ b/components/auth/AuthSocialLogin.vue
@@ -26,7 +26,7 @@ const handleGoogleLogin = async () => {
       query: { state: newState }
     });
     if (response.data.url) {
-      window.location.href = response.data.url;
+      await navigateTo(response.data.url, { external: true });
     }
   } catch (error) {
     console.error('Failed to get Google redirect URL', error);
diff --git a/composables/useAuth.ts b/composables/useAuth.ts
index 04db564..1ad5ffc 100644
--- a/composables/useAuth.ts
+++ b/composables/useAuth.ts
@@ -31,10 +31,7 @@ export const useAuth = () => {
     }
   };
 
-  // Auto-sync auth state on client-side
-  if (typeof window !== 'undefined') {
-    syncAuthState();
-  }
+  syncAuthState();
 
   const login = async (credentials: { email: string; password: string }) => {
     try {
diff --git a/composables/useFeedback.ts b/composables/useFeedback.ts
new file mode 100644
index 0000000..6d7c5f5
--- /dev/null
+++ b/composables/useFeedback.ts
@@ -0,0 +1,31 @@
+export interface FeedbackItem {
+  id: number;
+  type: string;
+  status: string;
+  subject: string | null;
+  message: string;
+  created_at: string;
+}
+
+export function useFeedback() {
+  const api = useApi();
+
+  async function list(): Promise<FeedbackItem[]> {
+    const response = await api<{ data: FeedbackItem[] }>('/feedback');
+    return response.data;
+  }
+
+  async function send(payload: {
+    type: string;
+    subject?: string;
+    message: string;
+  }): Promise<FeedbackItem> {
+    const response = await api<{ data: FeedbackItem }>('/feedback', {
+      method: 'POST',
+      body: payload
+    });
+    return response.data;
+  }
+
+  return { list, send };
+}
diff --git a/i18n/i18n.config.ts b/i18n/i18n.config.ts
new file mode 100644
index 0000000..c51659d
--- /dev/null
+++ b/i18n/i18n.config.ts
@@ -0,0 +1,6 @@
+export default defineI18nConfig(() => ({
+  legacy: false,
+  // English is the source language: a key missing from another locale renders its English
+  // text instead of the key, and without a console warning for every string.
+  fallbackLocale: 'en'
+}));
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 05a02b5..25e7d6f 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1,4 +1,8 @@
 {
+  "Dashboard": "Dashboard",
+  "Overview of your finances": "Overview of your finances",
+  "Set spending limits and track progress": "Set spending limits and track progress",
+  "Send feedback": "Send feedback",
   "Joined on {date}": "Joined on {date}",
   "Last seen": "Last seen",
   "Last transaction": "Last transaction",
@@ -182,7 +186,6 @@
   "No expense data available": "No expense data available",
   "Total": "Total",
   "View All": "View All",
-  "All time": "All time",
   "Last 3 months": "Last 3 months",
   "Profile": "Profile",
   "Change Password": "Change Password",
@@ -410,7 +413,6 @@
   "Income Sources Breakdown": "Income Sources Breakdown",
   "Total Income": "Total Income",
   "Enter your email": "Enter your email",
-  "Enter your password": "Enter your password",
   "Remember me": "Remember me",
   "Forgot Password?": "Forgot Password?",
   "Invalid credentials. Please try again.": "Invalid credentials. Please try again.",
@@ -442,10 +444,8 @@
   "{count} wallet": "{count} wallet | {count} wallets",
   "{count} categories": "{count} categories",
   "{count} transaction": "{count} transaction | {count} transactions",
-  "Go to dashboard": "Go to dashboard",
   "Skip for now": "Skip for now",
   "All Parties": "All Parties",
-  "All Wallets": "All Wallets",
   "All": "All",
   "Company": "Company",
   "No parties found. Create your first party to get started.": "No parties found. Create your first party to get started.",
@@ -459,8 +459,6 @@
   "per page": "per page",
   "Income Category": "Income Category",
   "Expense Category": "Expense Category",
-  "Income Categories": "Income Categories",
-  "Expense Categories": "Expense Categories",
   "carousel.ai.title": "Just ask",
   "carousel.ai.text": "Log expenses, build reports and get answers by chatting with your assistant in plain language.",
   "carousel.integrations.title": "Connect your bank",
@@ -543,12 +541,10 @@
   "Resend Code": "Resend Code",
   "Enter your first name": "Enter your first name",
   "Enter your last name": "Enter your last name",
-  "Already have an account?": "Already have an account?",
   "User Avatar": "User Avatar",
   "Filters": "Filters",
   "All Categories": "All Categories",
   "Search transactions...": "Search transactions...",
-  "No results found": "No results found",
   "No transactions match your current filters. Try adjusting or clearing them.": "No transactions match your current filters. Try adjusting or clearing them.",
   "Clear all filters": "Clear all filters",
   "Last Year": "Last Year",
@@ -663,7 +659,6 @@
   "Recurrence": "Recurrence",
   "Recurrence period": "Recurrence period",
   "Repeat every": "Repeat every",
-  "End date": "End date",
   "No end date": "No end date",
   "Remove recurrence": "Remove recurrence",
   "Update recurrence": "Update recurrence",
@@ -688,7 +683,6 @@
   "Supports CSV, PDF, PNG, JPG, TIFF, BMP": "Supports CSV, PDF, PNG, JPG, TIFF, BMP",
   "Document type": "Document type",
   "Auto-detect": "Auto-detect",
-  "Bank statement": "Bank statement",
   "Receipt": "Receipt",
   "Invoice": "Invoice",
   "Pay stub": "Pay stub",
@@ -717,7 +711,6 @@
   "{count} of these may be duplicates of existing transactions.": "{count} of these may be duplicates of existing transactions.",
   "{count} suggestions will be skipped.": "{count} suggestions will be skipped.",
   "Importing...": "Importing...",
-  "Cancel": "Cancel",
   "{count} transactions failed to import": "{count} transactions failed to import",
   "{count} imported, {failed} failed": "{count} imported, {failed} failed",
   "Import completed successfully.": "Import completed successfully.",
@@ -725,8 +718,6 @@
   "Existing transaction": "Existing transaction",
   "Skip this import": "Skip this import",
   "Import anyway": "Import anyway",
-  "Expense": "Expense",
-  "Income": "Income",
   "new": "new",
   "Some transactions reference items that don't exist yet:": "Some transactions reference items that don't exist yet:",
   "Create {count} new wallets": "Create {count} new wallets",
@@ -747,12 +738,7 @@
   "Budget Description": "Budget Description",
   "Spending Limit": "Spending Limit",
   "Budget Period": "Budget Period",
-  "Weekly": "Weekly",
-  "Monthly": "Monthly",
-  "Yearly": "Yearly",
   "Custom range": "Custom range",
-  "Start date": "Start date",
-  "End date": "End date",
   "Rollover unused amount": "Rollover unused amount",
   "Alert threshold": "Alert threshold",
   "Forecast alerts": "Forecast alerts",
@@ -776,7 +762,6 @@
   "Failed to create budget": "Failed to create budget",
   "Failed to update budget": "Failed to update budget",
   "All Budgets": "All Budgets",
-  "Active": "Active",
   "Archived": "Archived",
   "No budgets match the current filter.": "No budgets match the current filter.",
   "Add a wallet first to pick a currency.": "Add a wallet first to pick a currency.",
@@ -793,11 +778,9 @@
   "Projected": "Projected",
   "Rollover in": "Rollover in",
   "Changes saved": "Changes saved",
-  "Delete": "Delete",
-  "Edit": "Edit",
   "How budgets work": "How budgets work",
   "Targets narrow the scope": "Targets narrow the scope",
-  "Leave targets empty and the budget tracks every transaction in the period — good for a total spending cap. Pick categories, groups, or wallets to limit the scope to those.": "Leave targets empty and the budget tracks every transaction in the period — good for a total spending cap. Pick categories, groups, or wallets to limit the scope to those.",
+  "Leave targets empty and the budget tracks every transaction in the period, which suits a total spending cap. Pick categories, groups, or wallets to limit the scope to those.": "Leave targets empty and the budget tracks every transaction in the period, which suits a total spending cap. Pick categories, groups, or wallets to limit the scope to those.",
   "Refunds reduce your spending": "Refunds reduce your spending",
   "An income entry in a category the budget targets (e.g. a grocery refund) subtracts from the period total. You spend less, you have more left.": "An income entry in a category the budget targets (e.g. a grocery refund) subtracts from the period total. You spend less, you have more left.",
   "Reminders fire automatically": "Reminders fire automatically",
@@ -820,7 +803,7 @@
   "Search expenses...": "Search expenses...",
   "Loading expenses...": "Loading expenses...",
   "Leave blank to mark the refund without linking to a specific expense.": "Leave blank to mark the refund without linking to a specific expense.",
-  "When you record income, check \"This is a refund\" to subtract it from any budget covering the same categories, groups, or wallets. Unmarked income — salary, gifts — never changes a budget.": "When you record income, check \"This is a refund\" to subtract it from any budget covering the same categories, groups, or wallets. Unmarked income — salary, gifts — never changes a budget.",
+  "When you record income, check \"This is a refund\" to subtract it from any budget covering the same categories, groups, or wallets. Unmarked income (salary, gifts) never changes a budget.": "When you record income, check \"This is a refund\" to subtract it from any budget covering the same categories, groups, or wallets. Unmarked income (salary, gifts) never changes a budget.",
   "Transactions spreadsheet": "Transactions spreadsheet",
   "Search rows...": "Search rows...",
   "{count} rows": "{count} rows",
@@ -832,19 +815,10 @@
   "Overview": "Overview",
   "Reports": "Reports",
   "AI": "AI",
-  "Account": "Account",
-  "General": "General",
-  "Display": "Display",
   "Notifications": "Notifications",
   "Expand sidebar": "Expand sidebar",
   "Collapse sidebar": "Collapse sidebar",
-  "Import": "Import",
-  "Expenses": "Expenses",
   "Transfers": "Transfers",
-  "All": "All",
-  "Income": "Income",
-  "Expense": "Expense",
-  "Net": "Net",
   "Savings rate": "Savings rate",
   "Calendar": "Calendar",
   "Flow": "Flow",
@@ -859,7 +833,6 @@
   "No cumulative data.": "No cumulative data.",
   "Spending mix": "Spending mix",
   "Top expense categories share.": "Top expense categories share.",
-  "Spent": "Spent",
   "No expenses in this period.": "No expenses in this period.",
   "Daily spending": "Daily spending",
   "Each bar is a day in the period.": "Each bar is a day in the period.",
@@ -883,11 +856,9 @@
   "Concentration": "Concentration",
   "in {name}": "in {name}",
   "Highest day": "Highest day",
-  "This Month": "This Month",
   "Last 3 Months": "Last 3 Months",
   "Last 12 Months": "Last 12 Months",
   "Year to Date": "Year to Date",
-  "Custom": "Custom",
   "From": "From",
   "To": "To",
   "Apply": "Apply",
@@ -965,7 +936,6 @@
   "Healthy": "Healthy",
   "Building": "Building",
   "Watch": "Watch",
-  "Deficit": "Deficit",
   "Lean": "Lean",
   "Steady": "Steady",
   "Tight": "Tight",
@@ -983,7 +953,6 @@
   "Months your savings could cover this period's average spend.": "Months your savings could cover this period's average spend.",
   "{n} months": "{n} months",
   "Period overview · {n} transactions": "Period overview · {n} transactions",
-  "Total": "Total",
   "Avg / month": "Avg / month",
   "Peak month": "Peak month",
   "vs prior period": "vs prior period",
@@ -994,22 +963,16 @@
   "No transactions match.": "No transactions match.",
   "Show {n} more": "Show {n} more",
   "Spending on {date}": "Spending on {date}",
-  "Close": "Close",
   "Month in review": "Month in review",
   "No data for the latest month yet.": "No data for the latest month yet.",
   "Go to slide {n}": "Go to slide {n}",
-  "Next": "Next",
   "Done": "Done",
-  "Previous": "Previous",
-  "Pause": "Pause",
-  "Resume": "Resume",
   "Cash in": "Cash in",
   "Cash out": "Cash out",
   "{sign}{n}% vs same month last year": "{sign}{n}% vs same month last year",
   "First year of tracking": "First year of tracking",
   "Net for the month": "Net for the month",
   "Savings rate {n}%": "Savings rate {n}%",
-  "Top category": "Top category",
   "Biggest single expense": "Biggest single expense",
   "No expenses": "No expenses",
   "The recap": "The recap",
@@ -1021,7 +984,6 @@
   "AI insights": "AI insights",
   "Generated from the totals on this page. One call per period.": "Generated from the totals on this page. One call per period.",
   "Regenerate": "Regenerate",
-  "Dismiss": "Dismiss",
   "Thinking through your numbers…": "Thinking through your numbers…",
   "AI insights are offline right now. Your data is unchanged.": "AI insights are offline right now. Your data is unchanged.",
   "Try again": "Try again",
@@ -1029,7 +991,6 @@
   "Generate now": "Generate now",
   "Could not reach the AI service.": "Could not reach the AI service.",
   "Cached {time}": "Cached {time}",
-  "just now": "just now",
   "{n}m ago": "{n}m ago",
   "{n}h ago": "{n}h ago",
   "{n}d ago": "{n}d ago",
@@ -1044,7 +1005,6 @@
   "Savings": "Savings",
   "A stellar month.": "A stellar month.",
   "A healthy month.": "A healthy month.",
-  "A steady month.": "A steady month.",
   "You broke even.": "You broke even.",
   "A heavy month.": "A heavy month.",
   "You kept {n} of every $100 earned.": "You kept {n} of every $100 earned.",
@@ -1063,8 +1023,6 @@
   "{count} transactions logged.": "{count} transactions logged.",
   "Previous slide": "Previous slide",
   "Next slide": "Next slide",
-  "Prev": "Prev",
-  "Next": "Next",
   "Click sides, use arrow keys, or use the controls below.": "Click sides, use arrow keys, or use the controls below.",
   "Net trade": "Net trade",
   "Top earner": "Top earner",
@@ -1077,7 +1035,6 @@
   "Last 6 months": "Last 6 months",
   "Activity": "Activity",
   "Received": "Received",
-  "Net": "Net",
   "No activity in the last 6 months yet.": "No activity in the last 6 months yet.",
   "Recent transactions": "Recent transactions",
   "shown": "shown",
@@ -1091,14 +1048,12 @@
   "Across {n} {cur} wallet(s)": "Across {n} {cur} wallet(s)",
   "{n} in {cur}": "{n} in {cur}",
   "No {cur} wallets yet": "No {cur} wallets yet",
-  "Select a wallet": "Select a wallet",
   "Pick a wallet on the left to see its balance, activity, and recent transactions.": "Pick a wallet on the left to see its balance, activity, and recent transactions.",
   "Search wallets": "Search wallets",
   "No wallets match your search.": "No wallets match your search.",
   "No transactions yet on this wallet.": "No transactions yet on this wallet.",
   "Set as default": "Set as default",
   "Bank account": "Bank account",
-  "Cash": "Cash",
   "Credit card": "Credit card",
   "Debit card": "Debit card",
   "Digital wallet": "Digital wallet",
@@ -1122,13 +1077,10 @@
   "Show {name}": "Show {name}",
   "Add a few transactions and I'll start spotting trends for you.": "Add a few transactions and I'll start spotting trends for you.",
   "Ask about this": "Ask about this",
-  "Cashflow": "Cashflow",
   "Last few months": "Last few months",
   "Spent this month": "Spent this month",
   "What did I spend the most on this month?": "What did I spend the most on this month?",
-  "Savings rate": "Savings rate",
   "How can I save more this month?": "How can I save more this month?",
-  "Top category": "Top category",
   "Break down my {category} spending.": "Break down my {category} spending.",
   "Income vs last month": "Income vs last month",
   "Why did my income change versus last month?": "Why did my income change versus last month?",
@@ -1216,7 +1168,6 @@
   "Edit holding": "Edit holding",
   "Total value": "Total value",
   "Total net worth now": "Total net worth now",
-  "Cash": "Cash",
   "No holdings yet. Add Bitcoin, a stock, or any asset you own.": "No holdings yet. Add Bitcoin, a stock, or any asset you own.",
   "Live": "Live",
   "Price source": "Price source",
@@ -1229,7 +1180,6 @@
   "Admin console": "Admin console",
   "How Trakli is doing": "How Trakli is doing",
   "Back to app": "Back to app",
-  "Overview": "Overview",
   "Outreach": "Outreach",
   "Discounts": "Discounts",
   "Actions": "Actions",
@@ -1286,7 +1236,6 @@
   "Compose a new outreach.": "Compose a new outreach.",
   "Back to users": "Back to users",
   "Country": "Country",
-  "Last transaction": "Last transaction",
   "Could not load this user.": "Could not load this user.",
   "Pick at least one recipient.": "Pick at least one recipient.",
   "Ask the assistant": "Ask the assistant",
@@ -1312,7 +1261,6 @@
   "Bitcoin, Apple, Rental flat...": "Bitcoin, Apple, Rental flat...",
   "Symbol": "Symbol",
   "Quantity": "Quantity",
-  "Currency": "Currency",
   "Price per unit": "Price per unit",
   "Name is required.": "Name is required.",
   "Enter a quantity greater than 0.": "Enter a quantity greater than 0.",
@@ -1357,5 +1305,86 @@
   "Import from a file": "Import from a file",
   "A statement, a spreadsheet, or a photo of a receipt.": "A statement, a spreadsheet, or a photo of a receipt.",
   "Connect {name}": "Connect {name}",
-  "I'll add transactions myself": "I'll add transactions myself"
+  "I'll add transactions myself": "I'll add transactions myself",
+  "A current view of this product and its users.": "A current view of this product and its users.",
+  "Administration": "Administration",
+  "All clients": "All clients",
+  "All statuses": "All statuses",
+  "Anonymous": "Anonymous",
+  "Assistant token consumption for the selected period.": "Assistant token consumption for the selected period.",
+  "Available tokens": "Available tokens",
+  "Check the admin service and try again.": "Check the admin service and try again.",
+  "Check the subject and message, then try again.": "Check the subject and message, then try again.",
+  "Clear filters": "Clear filters",
+  "Clear search": "Clear search",
+  "Configure the automatic emails this product sends.": "Configure the automatic emails this product sends.",
+  "Could not load email templates": "Could not load email templates",
+  "Could not load feedback": "Could not load feedback",
+  "Could not load the overview": "Could not load the overview",
+  "Could not load this user": "Could not load this user",
+  "Could not load users": "Could not load users",
+  "Could not load {name}": "Could not load {name}",
+  "Could not render the preview": "Could not render the preview",
+  "Create and target promotions from configured offer providers.": "Create and target promotions from configured offer providers.",
+  "Email preview": "Email preview",
+  "Email templates": "Email templates",
+  "Enabled": "Enabled",
+  "Everything this product measures, grouped by what it measures.": "Everything this product measures, grouped by what it measures.",
+  "Feedback": "Feedback",
+  "Last {days} days": "Last {days} days",
+  "Loading email templates": "Loading email templates",
+  "Loading feedback": "Loading feedback",
+  "Loading the overview": "Loading the overview",
+  "Loading this user": "Loading this user",
+  "Loading {name}": "Loading {name}",
+  "Measurement sections": "Measurement sections",
+  "Measurements": "Measurements",
+  "Messages your users send appear here, newest first.": "Messages your users send appear here, newest first.",
+  "No AI usage measurements": "No AI usage measurements",
+  "No data for this period.": "No data for this period.",
+  "No demographic measurements": "No demographic measurements",
+  "No email templates are registered": "No email templates are registered",
+  "No feedback matches this filter": "No feedback matches this filter",
+  "No feedback yet": "No feedback yet",
+  "No measurements are registered": "No measurements are registered",
+  "No offer provider is configured": "No offer provider is configured",
+  "No user matches {query}": "No user matches {query}",
+  "No users found": "No users found",
+  "Numbers": "Numbers",
+  "Off": "Off",
+  "Overview views": "Overview views",
+  "Pagination": "Pagination",
+  "People registered with this product.": "People registered with this product.",
+  "People who register appear here.": "People who register appear here.",
+  "Period": "Period",
+  "Read and triage messages from your users.": "Read and triage messages from your users.",
+  "Record": "Record",
+  "Refresh": "Refresh",
+  "Register a demographics measurement provider to populate this page.": "Register a demographics measurement provider to populate this page.",
+  "Register a measurement provider and this page fills itself in.": "Register a measurement provider and this page fills itself in.",
+  "Register an AI usage measurement provider to populate this page.": "Register an AI usage measurement provider to populate this page.",
+  "Register an offer provider and its promotions become editable here, so a discount is never hard-coded into the product.": "Register an offer provider and its promotions become editable here, so a discount is never hard-coded into the product.",
+  "Rendering the preview…": "Rendering the preview…",
+  "Save template": "Save template",
+  "Saving…": "Saving…",
+  "Search feedback": "Search feedback",
+  "Sections": "Sections",
+  "Status": "Status",
+  "Subject": "Subject",
+  "Template views": "Template views",
+  "Templates the application registers become editable here, so the wording is never hard-coded.": "Templates the application registers become editable here, so the wording is never hard-coded.",
+  "The admin service did not answer. Nothing has changed.": "The admin service did not answer. Nothing has changed.",
+  "The measurement service did not answer. Nothing has changed.": "The measurement service did not answer. Nothing has changed.",
+  "Try a shorter search, or part of an email address.": "Try a shorter search, or part of an email address.",
+  "User details": "User details",
+  "What this product knows about this person.": "What this product knows about this person.",
+  "Widen the filter to see everything received.": "Widen the filter to see everything received.",
+  "{days} days": "{days} days",
+  "{total} users": "{total} users",
+  "Loading outreach": "Loading outreach",
+  "Could not load outreach": "Could not load outreach",
+  "No outreach sent yet": "No outreach sent yet",
+  "Write to your users from here and every send is listed, so you can see what was said and when.": "Write to your users from here and every send is listed, so you can see what was said and when.",
+  "{groups} are measured for the whole product, so they are not shown while one client is selected.": "{groups} are measured for the whole product, so they are not shown while one client is selected.",
+  "{start} to {end}": "{start} to {end}"
 }
diff --git a/middleware/admin.ts b/middleware/admin.ts
index 89f3a08..56812de 100644
--- a/middleware/admin.ts
+++ b/middleware/admin.ts
@@ -1,7 +1,7 @@
 export default defineNuxtRouteMiddleware(async () => {
-  const { user, isAuthenticated, fetchUser } = useAuth();
+  const { user, token, isAuthenticated, fetchUser } = useAuth();
 
-  if (!isAuthenticated.value) {
+  if (!token.value) {
     return navigateTo('/login');
   }
 
diff --git a/middleware/auth.ts b/middleware/auth.ts
index 746774b..9e62fe2 100644
--- a/middleware/auth.ts
+++ b/middleware/auth.ts
@@ -2,7 +2,11 @@ import { CONFIGURATION_KEYS } from '~/utils/configurationKeys';
 import { resolveLandingPath } from '~/composables/useLanding';
 
 export default defineNuxtRouteMiddleware(async (to, _from) => {
-  const { isAuthenticated } = useAuth();
+  const { token, isAuthenticated, fetchUser } = useAuth();
+
+  if (token.value && !isAuthenticated.value) {
+    await fetchUser();
+  }
 
   if (!isAuthenticated.value) {
     return navigateTo('/login');
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ade232b..ca54dc5 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -9,13 +9,10 @@ export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
   devtools: { enabled: false },
   ssr: true,
-  // Plugin client UI ships as Nuxt layers consumed the same way as the shared
-  // ui-kit, e.g. extends: ['github:trakli/ui-kit', 'github:trakli/<plugin>-ui'].
-  // A layer registers a component for a slot key via
-  // useExtensionSlots().registerComponent(); DescriptorRenderer resolves it
-  // when a descriptor sets `ui.component`. Host adoption of the layers is
-  // deferred, so the list is empty for now.
-  extends: [],
+  // A layer registers a component against a slot key with
+  // useExtensionSlots().registerComponent(), and DescriptorRenderer resolves it when a
+  // descriptor sets `ui.component`. That is how plugin UI reaches the app.
+  extends: ['@whilesmart/eloquent-admin-ui'],
   routeRules: {
     '/ai-insights': { redirect: '/assistant' }
   },
@@ -30,6 +27,7 @@ export default defineNuxtConfig({
       { code: 'it', name: 'Italiano', file: 'it.json' }
     ],
     defaultLocale: 'en',
+    vueI18n: './i18n/i18n.config.ts',
     lazy: true,
     langDir: 'locales',
     strategy: 'no_prefix',
@@ -41,7 +39,41 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     public: {
+      adminApiPrefix: '/admin',
+      adminI18n: true,
+      adminNavigation: [
+        {
+          label: 'Outreach',
+          to: '/admin/outreach',
+          icon: 'solar:plain-3-bold-duotone',
+          area: 'slate'
+        }
+      ],
+      adminUserColumns: [
+        { label: 'Name', key: 'name' },
+        { label: 'Email', key: 'email' },
+        { label: 'Last seen', key: 'last_seen_at', type: 'datetime' },
+        { label: 'Last transaction', key: 'last_transaction_at', type: 'datetime' },
+        { label: 'Joined', key: 'created_at', type: 'date' },
+        { label: 'AI tokens', key: 'tokens_used', type: 'number' }
+      ],
+      adminMetricDrilldowns: {
+        new_users_series: '/admin/users?joined_on={date}'
+      },
+      adminBrand: {
+        name: 'Trakli',
+        logoSrc: '/logo.svg',
+        logoMarkSrc: '/logo-mark.svg',
+        tag: 'Admin',
+        tagArea: 'green'
+      },
+      adminSkin: {
+        name: 'trakli',
+        railClass: '',
+        contentClass: ''
+      },
       apiBase: process.env.NUXT_PUBLIC_API_BASE_URL || 'https://api.dev.trakli.app/api/v1',
+      engagementSiteKey: process.env.NUXT_PUBLIC_ENGAGEMENT_SITE_KEY || '',
       reverbKey: process.env.NUXT_PUBLIC_REVERB_KEY || '',
       reverbHost: process.env.NUXT_PUBLIC_REVERB_HOST || 'localhost',
       reverbPort: process.env.NUXT_PUBLIC_REVERB_PORT || '6001',
@@ -59,6 +91,8 @@ export default defineNuxtConfig({
     }
   },
   css: [
+    // After the design layer's own stylesheet: it redeclares the tokens Trakli owns.
+    '@/assets/css/design-brand.css',
     '@/assets/scss/_variables.scss',
     '@/assets/scss/base.scss',
     '@/assets/scss/_surfaces.scss',
diff --git a/package-lock.json b/package-lock.json
index 871eedb..8e3cc99 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,21 @@
 {
   "name": "nuxt-app",
-  "version": "1.1.2",
+  "version": "2.0.0-beta.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nuxt-app",
-      "version": "1.1.2",
+      "version": "2.0.0-beta.2",
       "hasInstallScript": true,
       "dependencies": {
         "@dicebear/collection": "^9.2.4",
         "@dicebear/core": "^9.2.4",
         "@heroicons/vue": "^2.2.0",
         "@nuxtjs/i18n": "^10.2.1",
+        "@whilesmart/design": "^0.2.0",
+        "@whilesmart/eloquent-admin-ui": "^0.1.0",
+        "@whilesmart/engagement": "^0.1.0",
         "apexcharts": "^5.3.3",
         "country-flag-icons": "^1.5.19",
         "laravel-echo": "^2.3.7",
@@ -1109,6 +1112,12 @@
         "@dicebear/core": "^9.0.0"
       }
     },
+    "node_modules/@dicebear/styles": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/@dicebear/styles/-/styles-10.6.0.tgz",
+      "integrity": "sha512-KhxbEVI+z8TaenX58+ZhIRFBt7adggu/F+8g6ZYLu43H2/lgLuWA3Kg8vHBrCVWdfTTTt1p2wUhQomIkkypTuQ==",
+      "license": "SEE LICENSE IN LICENSE.md"
+    },
     "node_modules/@dicebear/thumbs": {
       "version": "9.2.4",
       "resolved": "https://registry.npmjs.org/@dicebear/thumbs/-/thumbs-9.2.4.tgz",
@@ -1973,7 +1982,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
       "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@iconify/utils": {
@@ -1988,6 +1996,21 @@
         "import-meta-resolve": "^4.2.0"
       }
     },
+    "node_modules/@iconify/vue": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.2.tgz",
+      "integrity": "sha512-Xo8th16qDH2+o0LBxmqaosJheTU6v8QeDbpP40txrqz9dusBUAf/voOAC+v9WT4DvDZx8CWiA4dq8LMB/rasyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.0"
+      }
+    },
     "node_modules/@internationalized/date": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.1.tgz",
@@ -6584,6 +6607,50 @@
         }
       }
     },
+    "node_modules/@whilesmart/design": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@whilesmart/design/-/design-0.2.0.tgz",
+      "integrity": "sha512-Y8FOFmwUa8GMT1CEOxGsVEu0nqPnTCJNB/vFwSHBQe7z7Ijbgr8x5F6SGITprlcF6ia3OLhUqOjgQH7io98aCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dicebear/core": "^10.7.0",
+        "@dicebear/styles": "^10.6.0",
+        "@iconify/vue": "^5.0.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0",
+        "vue-router": "^4.0.0"
+      }
+    },
+    "node_modules/@whilesmart/design/node_modules/@dicebear/core": {
+      "version": "10.7.0",
+      "resolved": "https://registry.npmjs.org/@dicebear/core/-/core-10.7.0.tgz",
+      "integrity": "sha512-JUOzKOd8RUByJJo8ZL+C7YE/pvEsWewfpbWUmR8OIQZWv/PvUQHnohdevySC3icyyxe6EIU/8B/rQgA42us1QA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=22.0.0"
+      },
+      "funding": {
+        "url": "https://www.dicebear.com/support/"
+      }
+    },
+    "node_modules/@whilesmart/eloquent-admin-ui": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@whilesmart/eloquent-admin-ui/-/eloquent-admin-ui-0.1.0.tgz",
+      "integrity": "sha512-5Jv/3ncU/LRGWG1+EEJmZ+GZuzkauvfLA9zP6ve/nIMnGX9WIZR6habfXph/2kS2aMhaMOS2GvdaxZwgeqaqGQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@whilesmart/design": "^0.2.0",
+        "nuxt": "^3.12.0",
+        "vue": "^3.4.0"
+      }
+    },
+    "node_modules/@whilesmart/engagement": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@whilesmart/engagement/-/engagement-0.1.0.tgz",
+      "integrity": "sha512-NADjXoKK1hYOMXQgbsh89Fmqa82x6wOnadqyK9rcN+VKthvg01FmD9qCL/qt10sz5RHwlvAAh/Tkb+vf9AlrSA==",
+      "license": "MIT"
+    },
     "node_modules/@yr/monotone-cubic-spline": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
diff --git a/package.json b/package.json
index b2af8ae..b6b5d9b 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,9 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@whilesmart/eloquent-admin-ui": "^0.1.0",
+    "@whilesmart/engagement": "^0.1.0",
+    "@whilesmart/design": "^0.2.0",
     "@dicebear/collection": "^9.2.4",
     "@dicebear/core": "^9.2.4",
     "@heroicons/vue": "^2.2.0",
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
deleted file mode 100644
index c45b118..0000000
--- a/pages/admin/index.vue
+++ /dev/null
@@ -1,1109 +0,0 @@
-<template>
-  <div class="console">
-    <aside class="rail">
-      <div class="rail__brand">
-        <Logo size="small" />
-        <span class="rail__badge"><ShieldCheck class="rail__badge-icon" />{{ t('Admin') }}</span>
-      </div>
-
-      <nav class="rail__nav">
-        <button
-          v-for="section in sections"
-          :key="section.id"
-          class="nav-item"
-          :class="{ 'nav-item--active': activeSection === section.id }"
-          @click="activeSection = section.id"
-        >
-          <component :is="section.icon" class="nav-item__icon" />
-          <span>{{ section.label }}</span>
-        </button>
-      </nav>
-
-      <div class="rail__foot">
-        <div v-if="user" class="rail__user">
-          <span class="rail__user-name">{{ user.first_name }} {{ user.last_name }}</span>
-          <span class="rail__user-email">{{ user.email }}</span>
-        </div>
-        <button class="rail__exit" @click="exit">
-          <ArrowLeft class="rail__exit-icon" />
-          <span>{{ t('Back to app') }}</span>
-        </button>
-      </div>
-    </aside>
-
-    <main class="panel">
-      <section v-if="activeSection === 'overview'">
-        <header class="panel__head">
-          <div>
-            <h1 class="panel__title">{{ t('Overview') }}</h1>
-            <p class="panel__sub">{{ heroSummary }}</p>
-          </div>
-          <div class="range">
-            <button
-              v-for="opt in rangeOptions"
-              :key="opt.days"
-              class="range-pill"
-              :class="{ 'range-pill--active': days === opt.days }"
-              @click="setDays(opt.days)"
-            >
-              {{ t(opt.label) }}
-            </button>
-          </div>
-        </header>
-
-        <div v-if="loading" class="state">{{ t('Loading...') }}</div>
-        <p v-else-if="metricsError" class="state state--note">{{ metricsError }}</p>
-
-        <template v-else>
-          <div class="kpis">
-            <div v-for="kpi in kpis" :key="kpi.key" class="kpi" :class="`tone-${kpi.tone}`">
-              <span class="kpi__icon"><component :is="kpi.icon" /></span>
-              <span class="kpi__value">{{ kpi.value }}</span>
-              <span class="kpi__label">{{ kpi.label }}</span>
-              <span v-if="kpi.sub" class="kpi__sub">{{ kpi.sub }}</span>
-            </div>
-          </div>
-
-          <div class="grid-2">
-            <TCard>
-              <template #header>{{ t('New users') }}</template>
-              <ClientOnly>
-                <ApexChart
-                  type="area"
-                  height="220"
-                  :options="areaOptions(usersChart.categories, chartColors.primary)"
-                  :series="[{ name: t('New users'), data: usersChart.data }]"
-                  @data-point-selection="showSignupsForPoint"
-                />
-              </ClientOnly>
-            </TCard>
-            <TCard>
-              <template #header>{{ t('Transactions') }}</template>
-              <ClientOnly>
-                <ApexChart
-                  type="area"
-                  height="220"
-                  :options="areaOptions(txChart.categories, chartColors.income)"
-                  :series="[{ name: t('Transactions'), data: txChart.data }]"
-                />
-              </ClientOnly>
-            </TCard>
-          </div>
-
-          <div class="grid-2">
-            <TCard v-for="rank in rankings" :key="rank.key">
-              <template #header>{{ rank.label }}</template>
-              <ol v-if="rank.rows.length" class="ranking">
-                <li v-for="(row, k) in rank.rows" :key="k" class="ranking-row">
-                  <span class="ranking-rank">{{ k + 1 }}</span>
-                  <span class="ranking-label">{{ row.label }}</span>
-                  <span class="ranking-bar"
-                    ><span class="ranking-fill" :style="{ width: rowWidth(rank.rows, row.value) }"
-                  /></span>
-                  <span class="ranking-value">{{ row.value }}</span>
-                </li>
-              </ol>
-              <p v-else class="state">{{ t('No data yet') }}</p>
-            </TCard>
-          </div>
-        </template>
-      </section>
-
-      <section v-else-if="activeSection === 'demographics'">
-        <header class="panel__head">
-          <div>
-            <h1 class="panel__title">{{ t('Demographics') }}</h1>
-            <p class="panel__sub">{{ t('Where your users are and what they prefer.') }}</p>
-          </div>
-        </header>
-        <div v-if="loading" class="state">{{ t('Loading...') }}</div>
-        <div v-else class="grid-2">
-          <TCard v-for="metric in demographicsMetrics" :key="metric.key">
-            <template #header>{{ metric.label }}</template>
-            <ol v-if="metric.rows.length" class="ranking">
-              <li v-for="(row, k) in metric.rows" :key="k" class="ranking-row">
-                <span class="ranking-rank">{{ k + 1 }}</span>
-                <span class="ranking-label">{{ row.label }}</span>
-                <span class="ranking-bar"
-                  ><span class="ranking-fill" :style="{ width: rowWidth(metric.rows, row.value) }"
-                /></span>
-                <span class="ranking-value">{{ row.value }}</span>
-              </li>
-            </ol>
-            <p v-else class="state">{{ t('No data yet') }}</p>
-          </TCard>
-        </div>
-      </section>
-
-      <section v-else-if="activeSection === 'users'">
-        <UserDetail v-if="selectedUserId" :user-id="selectedUserId" @back="selectedUserId = null" />
-        <template v-else>
-          <header class="panel__head">
-            <div>
-              <h1 class="panel__title">{{ t('Users') }}</h1>
-              <button v-if="joinedOn" class="filter-chip" @click="clearJoinDate">
-                {{ t('Joined on {date}', { date: formatDate(joinedOn) }) }} ×
-              </button>
-            </div>
-            <div class="search">
-              <Search class="search__icon" />
-              <input v-model="userQuery" class="search__input" :placeholder="t('Search users')" />
-            </div>
-          </header>
-          <TCard>
-            <TDataTable
-              v-if="users.length"
-              :columns="userColumns"
-              :rows="users"
-              clickable
-              @row-click="selectedUserId = $event.id"
-            >
-              <template #cell-name="{ row: u }">
-                <strong>{{ u.first_name }} {{ u.last_name }}</strong>
-              </template>
-              <template #cell-created_at="{ row: u }">{{ formatDate(u.created_at) }}</template>
-              <template #cell-last_seen_at="{ row: u }">
-                {{ u.last_seen_at ? formatDateTime(u.last_seen_at) : t('Never') }}
-              </template>
-              <template #cell-last_transaction_at="{ row: u }">
-                {{ u.last_transaction_at ? formatDateTime(u.last_transaction_at) : t('Never') }}
-              </template>
-              <template #cell-tokens_used="{ row: u }">{{ fmt(u.tokens_used) }}</template>
-              <template #cell-actions="{ row: u }">
-                <div @click.stop>
-                  <TDropdown>
-                    <template #trigger>
-                      <button class="row-action" :aria-label="t('Actions')">
-                        <MoreHorizontal />
-                      </button>
-                    </template>
-                    <TDropdownItem @click="selectedUserId = u.id"
-                      ><Eye class="item-icon" />{{ t('View profile') }}</TDropdownItem
-                    >
-                    <TDropdownItem><Send class="item-icon" />{{ t('Reach out') }}</TDropdownItem>
-                    <TDropdownItem
-                      ><Gift class="item-icon" />{{ t('Grant discount') }}</TDropdownItem
-                    >
-                  </TDropdown>
-                </div>
-              </template>
-            </TDataTable>
-            <p v-else-if="!usersLoading" class="state">{{ t('No users found') }}</p>
-            <TPagination
-              v-if="userPagination.total"
-              :current-page="userPagination.current_page"
-              :total-pages="userPagination.last_page"
-              :disabled="usersLoading"
-              @page-change="changeUserPage"
-            >
-              <template #info>
-                <span class="pagination-info">
-                  {{
-                    t('Page {page} of {pages} · {total} users', {
-                      page: userPagination.current_page,
-                      pages: userPagination.last_page,
-                      total: userPagination.total
-                    })
-                  }}
-                </span>
-              </template>
-            </TPagination>
-          </TCard>
-        </template>
-      </section>
-
-      <section v-else-if="activeSection === 'outreach'">
-        <header class="panel__head">
-          <div>
-            <h1 class="panel__title">{{ t('User outreach') }}</h1>
-            <p class="panel__sub">
-              {{ composing ? t('Compose a new outreach.') : t('Emails you have sent to users.') }}
-            </p>
-          </div>
-          <TButton
-            v-if="!composing"
-            :text="t('New outreach')"
-            :full-width="false"
-            @click="composing = true"
-          />
-          <button v-else class="link-back" @click="composing = false">
-            <ArrowLeft class="link-back__icon" />{{ t('Back') }}
-          </button>
-        </header>
-
-        <TCard v-if="composing">
-          <OutreachComposer @sent="onOutreachSent" />
-        </TCard>
-        <TCard v-else>
-          <TDataTable v-if="outreaches.length" :columns="outreachColumns" :rows="outreaches">
-            <template #cell-subject="{ value }"
-              ><strong>{{ value }}</strong></template
-            >
-            <template #cell-created_at="{ row }">{{ formatDate(row.created_at) }}</template>
-          </TDataTable>
-          <p v-else class="state">{{ t('No outreaches yet') }}</p>
-        </TCard>
-      </section>
-
-      <section v-else-if="activeSection === 'discounts'">
-        <SectionPlaceholder
-          :icon="IconDiscount"
-          :title="t('Discounts and offers')"
-          :body="
-            t(
-              'Create and target offers from pluggable offer providers, so promotions are configured, never hard-coded.'
-            )
-          "
-        />
-      </section>
-
-      <section v-else-if="activeSection === 'usage'">
-        <header class="panel__head">
-          <div>
-            <h1 class="panel__title">{{ t('AI usage') }}</h1>
-            <p class="panel__sub">
-              {{ t('Assistant token consumption for the selected period.') }}
-            </p>
-          </div>
-        </header>
-        <div v-if="loading" class="state">{{ t('Loading...') }}</div>
-        <template v-else>
-          <div class="kpis kpis--single">
-            <div class="kpi tone-primary">
-              <span class="kpi__icon"><Cpu /></span>
-              <span class="kpi__value">{{ fmt(metricByKey('ai_tokens_used')?.value) }}</span>
-              <span class="kpi__label">{{ t('AI tokens used') }}</span>
-            </div>
-          </div>
-          <div class="grid-2">
-            <TCard>
-              <template #header>{{ t('Token usage') }}</template>
-              <ClientOnly>
-                <ApexChart
-                  type="area"
-                  height="240"
-                  :options="areaOptions(tokenChart.categories, chartColors.primary)"
-                  :series="[{ name: t('AI tokens'), data: tokenChart.data }]"
-                />
-              </ClientOnly>
-            </TCard>
-            <TCard>
-              <template #header>{{ t('Tokens by user') }}</template>
-              <ol v-if="tokenRanking.length" class="ranking">
-                <li v-for="(row, k) in tokenRanking" :key="k" class="ranking-row">
-                  <span class="ranking-rank">{{ k + 1 }}</span>
-                  <span class="ranking-label">{{ row.label }}</span>
-                  <span class="ranking-value">{{ fmt(row.value) }}</span>
-                </li>
-              </ol>
-              <p v-else class="state">{{ t('No token usage yet') }}</p>
-            </TCard>
-          </div>
-        </template>
-      </section>
-    </main>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  ref,
-  computed,
-  onMounted,
-  onBeforeUnmount,
-  watch,
-  h,
-  defineAsyncComponent,
-  type Component
-} from 'vue';
-import { useRouter } from 'vue-router';
-import {
-  LayoutDashboard,
-  Globe,
-  Users,
-  UserPlus,
-  CalendarDays,
-  Activity,
-  Send,
-  Tag,
-  Cpu,
-  Search,
-  ShieldCheck,
-  ArrowLeft,
-  MoreHorizontal,
-  Eye,
-  Gift
-} from 'lucide-vue-next';
-import IconDiscount from '~icons/solar/tag-price-bold-duotone';
-import Logo from '@/components/Logo.vue';
-import TCard from '@/components/TCard.vue';
-import TButton from '@/components/TButton.vue';
-import TDropdown from '@/components/TDropdown.vue';
-import TDropdownItem from '@/components/TDropdownItem.vue';
-import TDataTable, { type DataTableColumn } from '@/components/TDataTable.vue';
-import TPagination from '@/components/TPagination.vue';
-import OutreachComposer from '@/components/admin/OutreachComposer.vue';
-import UserDetail from '@/components/admin/UserDetail.vue';
-import {
-  adminApi,
-  type EngagementReport,
-  type Metric,
-  type AdminUser,
-  type AdminUserPage,
-  type OutreachSummary
-} from '@/services/api/adminApi';
-
-definePageMeta({
-  layout: 'admin',
-  middleware: ['auth', 'admin']
-});
-
-const { t } = useI18n();
-const router = useRouter();
-const { user } = useAuth();
-
-const ApexChart = defineAsyncComponent(() => import('vue3-apexcharts'));
-const chartColors = { primary: '#047844', income: '#16a34a' };
-
-const SectionPlaceholder = (props: { icon: Component; title: string; body: string }) =>
-  h('div', { class: 'placeholder' }, [
-    h(props.icon, { class: 'placeholder__icon' }),
-    h('h2', { class: 'placeholder__title' }, props.title),
-    h('p', { class: 'placeholder__body' }, props.body),
-    h('span', { class: 'placeholder__tag' }, t('Coming soon'))
-  ]);
-
-const sections = [
-  { id: 'overview', label: t('Overview'), icon: LayoutDashboard },
-  { id: 'demographics', label: t('Demographics'), icon: Globe },
-  { id: 'users', label: t('Users'), icon: Users },
-  { id: 'outreach', label: t('Outreach'), icon: Send },
-  { id: 'discounts', label: t('Discounts'), icon: Tag },
-  { id: 'usage', label: t('AI usage'), icon: Cpu }
-];
-const activeSection = ref('overview');
-const userQuery = ref('');
-const selectedUserId = ref<number | null>(null);
-const composing = ref(false);
-const outreaches = ref<OutreachSummary[]>([]);
-
-const loading = ref(true);
-const metricsError = ref('');
-const report = ref<EngagementReport | null>(null);
-const users = ref<AdminUser[]>([]);
-const usersLoading = ref(false);
-const joinedOn = ref<string | null>(null);
-const userPagination = ref<AdminUserPage>({
-  data: [],
-  current_page: 1,
-  last_page: 1,
-  per_page: 15,
-  total: 0
-});
-const days = ref(30);
-
-const userColumns = computed<DataTableColumn[]>(() => [
-  { key: 'name', label: t('Name') },
-  { key: 'email', label: t('Email') },
-  { key: 'last_seen_at', label: t('Last seen') },
-  { key: 'last_transaction_at', label: t('Last transaction') },
-  { key: 'created_at', label: t('Joined') },
-  { key: 'tokens_used', label: t('AI tokens') },
-  { key: 'actions', label: t('Actions'), align: 'right', width: '1%' }
-]);
-
-const outreachColumns = computed<DataTableColumn[]>(() => [
-  { key: 'subject', label: t('Subject') },
-  { key: 'audience', label: t('Audience') },
-  { key: 'sent', label: t('Sent') },
-  { key: 'created_at', label: t('Date') }
-]);
-
-const rangeOptions = [
-  { days: 7, label: '7 days' },
-  { days: 30, label: '30 days' },
-  { days: 90, label: '90 days' }
-];
-
-const metricByKey = (key: string): Metric | undefined =>
-  (report.value?.groups || []).flatMap((g) => g.metrics).find((m) => m.key === key);
-
-const fmt = (n: number | null | undefined): string => new Intl.NumberFormat().format(n ?? 0);
-
-const heroSummary = computed(() =>
-  t('{users} users · {tx} transactions', {
-    users: metricByKey('total_users')?.value ?? 0,
-    tx: metricByKey('total_transactions')?.value ?? 0
-  })
-);
-
-const kpis = computed(() => [
-  {
-    key: 'total_users',
-    label: t('Total users'),
-    value: fmt(metricByKey('total_users')?.value),
-    icon: Users,
-    tone: 'primary'
-  },
-  {
-    key: 'today',
-    label: t('Registered today'),
-    value: fmt(metricByKey('registrations_today')?.value),
-    icon: UserPlus,
-    tone: 'income'
-  },
-  {
-    key: 'month',
-    label: t('Registered this month'),
-    value: fmt(metricByKey('registrations_month')?.value),
-    icon: CalendarDays,
-    tone: 'info'
-  },
-  {
-    key: 'avg',
-    label: t('Avg transactions / user'),
-    value: fmt(metricByKey('avg_transactions_per_user')?.value),
-    icon: Activity,
-    tone: 'accent'
-  },
-  {
-    key: 'tokens',
-    label: t('AI tokens used'),
-    value: fmt(metricByKey('ai_tokens_used')?.value),
-    icon: Cpu,
-    tone: 'primary'
-  }
-]);
-
-const chartFor = (key: string) => {
-  const series = metricByKey(key)?.series || [];
-  return { data: series.map((p) => p.value), categories: series.map((p) => p.date) };
-};
-const usersChart = computed(() => chartFor('new_users_series'));
-const txChart = computed(() => chartFor('transactions_series'));
-const tokenChart = computed(() => chartFor('ai_tokens_series'));
-const tokenRanking = computed(() => metricByKey('ai_tokens_by_user')?.rows ?? []);
-
-const rankings = computed(() =>
-  ['most_active_users', 'most_used_features']
-    .map((k) => metricByKey(k))
-    .filter((m): m is Metric => !!m)
-);
-
-const demographicsMetrics = computed(
-  () => (report.value?.groups || []).find((g) => g.key === 'demographics')?.metrics ?? []
-);
-
-const areaOptions = (categories: string[], color: string) => ({
-  chart: { toolbar: { show: false }, zoom: { enabled: false }, fontFamily: 'inherit' },
-  dataLabels: { enabled: false },
-  stroke: { curve: 'smooth', width: 2 },
-  fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.35, opacityTo: 0.02 } },
-  colors: [color],
-  xaxis: {
-    categories,
-    labels: { show: false },
-    axisTicks: { show: false },
-    axisBorder: { show: false },
-    tooltip: { enabled: false }
-  },
-  yaxis: { labels: { show: false } },
-  grid: { borderColor: 'rgba(15,23,42,0.06)', padding: { left: 8, right: 8 } },
-  tooltip: { x: { show: true } }
-});
-
-const exit = () => router.push('/dashboard');
-
-const loadUsers = async (page = 1) => {
-  usersLoading.value = true;
-  try {
-    const result = await adminApi.users({
-      page,
-      perPage: userPagination.value.per_page,
-      search: userQuery.value.trim() || undefined,
-      joinedOn: joinedOn.value || undefined
-    });
-    userPagination.value = result;
-    users.value = result.data;
-  } catch {
-    users.value = [];
-    userPagination.value = {
-      ...userPagination.value,
-      data: [],
-      current_page: 1,
-      last_page: 1,
-      total: 0
-    };
-  } finally {
-    usersLoading.value = false;
-  }
-};
-
-const changeUserPage = (page: number) => loadUsers(page);
-
-const clearJoinDate = () => {
-  joinedOn.value = null;
-  loadUsers();
-};
-
-const showSignupsForPoint = (
-  _event: unknown,
-  _chart: unknown,
-  options: { dataPointIndex: number }
-) => {
-  const date = usersChart.value.categories[options.dataPointIndex];
-  if (!date) return;
-  joinedOn.value = date;
-  activeSection.value = 'users';
-  loadUsers();
-};
-
-const load = async () => {
-  loading.value = true;
-  metricsError.value = '';
-
-  const [metricsResult] = await Promise.allSettled([
-    adminApi.metrics({ days: days.value }),
-    loadUsers()
-  ]);
-
-  if (metricsResult.status === 'fulfilled') {
-    report.value = metricsResult.value;
-  } else {
-    report.value = null;
-    metricsError.value = t('Metrics are not available yet.');
-  }
-
-  loading.value = false;
-};
-
-const setDays = (value: number) => {
-  if (days.value === value) return;
-  days.value = value;
-  load();
-};
-
-const loadOutreaches = async () => {
-  try {
-    outreaches.value = await adminApi.outreachHistory();
-  } catch {
-    outreaches.value = [];
-  }
-};
-
-const onOutreachSent = () => {
-  composing.value = false;
-  loadOutreaches();
-};
-
-const rowWidth = (rows: { value: number }[], value: number): string => {
-  const max = Math.max(1, ...rows.map((r) => r.value));
-  return `${Math.max(4, Math.round((value / max) * 100))}%`;
-};
-
-const formatDate = (iso: string): string => (iso ? new Date(iso).toLocaleDateString() : '');
-const formatDateTime = (iso: string): string =>
-  iso ? new Date(iso).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' }) : '';
-
-onMounted(() => {
-  load();
-  loadOutreaches();
-});
-
-let searchTimer: ReturnType<typeof setTimeout> | undefined;
-watch(userQuery, () => {
-  clearTimeout(searchTimer);
-  searchTimer = setTimeout(() => loadUsers(), 300);
-});
-
-onBeforeUnmount(() => clearTimeout(searchTimer));
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/_variables.scss' as *;
-
-.console {
-  display: grid;
-  grid-template-columns: 256px 1fr;
-  min-height: 100vh;
-
-  @media (max-width: $breakpoint-md) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.rail {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  padding: 1.25rem 1rem;
-  background: $bg-white;
-  border-right: 1px solid $border-color;
-  position: sticky;
-  top: 0;
-  height: 100vh;
-
-  @media (max-width: $breakpoint-md) {
-    position: static;
-    height: auto;
-    border-right: none;
-    border-bottom: 1px solid $border-color;
-    gap: 1rem;
-  }
-}
-
-.rail__brand {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  padding: 0.25rem 0.5rem;
-}
-
-.rail__badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.15rem 0.5rem;
-  border-radius: $radius-md;
-  background: $primary-light;
-  color: $primary-dark;
-  font-size: $font-size-xs;
-  font-weight: $font-semibold;
-}
-
-.rail__badge-icon {
-  width: 13px;
-  height: 13px;
-}
-
-.rail__nav {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-
-  @media (max-width: $breakpoint-md) {
-    flex-direction: row;
-    overflow-x: auto;
-  }
-}
-
-.nav-item {
-  display: flex;
-  align-items: center;
-  gap: 0.7rem;
-  padding: 0.6rem 0.75rem;
-  border: none;
-  background: transparent;
-  border-radius: $radius-lg;
-  color: $text-secondary;
-  font-size: $font-size-sm;
-  font-weight: $font-medium;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: $transition-fast;
-
-  &:hover {
-    background: $bg-light;
-  }
-
-  &--active {
-    background: $primary-light;
-    color: $primary-dark;
-    font-weight: $font-semibold;
-  }
-}
-
-.nav-item__icon {
-  width: 18px;
-  height: 18px;
-}
-
-.rail__foot {
-  margin-top: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-
-  @media (max-width: $breakpoint-md) {
-    margin-top: 0;
-  }
-}
-
-.rail__user {
-  display: flex;
-  flex-direction: column;
-  padding: 0 0.5rem;
-}
-
-.rail__user-name {
-  font-size: $font-size-sm;
-  font-weight: $font-semibold;
-  color: $text-primary;
-}
-
-.rail__user-email {
-  font-size: $font-size-xs;
-  color: $text-muted;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.rail__exit {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.55rem 0.75rem;
-  border: 1px solid $border-color;
-  background: $bg-white;
-  border-radius: $radius-lg;
-  color: $text-primary;
-  font-size: $font-size-sm;
-  font-weight: $font-medium;
-  cursor: pointer;
-
-  &:hover {
-    background: $bg-light;
-  }
-}
-
-.rail__exit-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.panel {
-  padding: 1.75rem 2rem;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-
-  @media (max-width: $breakpoint-sm) {
-    padding: 1.25rem;
-  }
-}
-
-.panel__head {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 1rem;
-  flex-wrap: wrap;
-  margin-bottom: 1.25rem;
-}
-
-.panel__title {
-  margin: 0;
-  font-size: 1.4rem;
-  font-weight: $font-bold;
-  color: $text-primary;
-}
-
-.panel__sub {
-  margin: 0.25rem 0 0;
-  font-size: $font-size-sm;
-  color: $text-muted;
-}
-
-.range {
-  display: flex;
-  gap: 0.4rem;
-}
-
-.range-pill {
-  border: 1px solid $border-color;
-  background: $bg-white;
-  border-radius: $radius-lg;
-  padding: 0.4rem 0.8rem;
-  font-size: $font-size-sm;
-  color: $text-secondary;
-  cursor: pointer;
-  transition: $transition-fast;
-
-  &--active {
-    background: $primary;
-    color: $text-inverse;
-    border-color: $primary;
-  }
-}
-
-.state {
-  padding: 2rem;
-  text-align: center;
-  color: $text-muted;
-
-  &--note {
-    background: $bg-light;
-    border-radius: $radius-xl;
-  }
-}
-
-.pagination-info {
-  font-variant-numeric: tabular-nums;
-}
-
-.kpis {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: 1rem;
-  margin-bottom: 1.25rem;
-}
-
-.kpi {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-rows: auto auto;
-  column-gap: 0.75rem;
-  align-items: center;
-  padding: 1rem 1.1rem;
-  background: $bg-white;
-  border: 1px solid $border-color;
-  border-radius: $radius-xl;
-  box-shadow: $elevation-1;
-}
-
-.kpi__icon {
-  grid-row: 1 / 3;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 38px;
-  height: 38px;
-  border-radius: $radius-lg;
-  background: $bg-light;
-  color: var(--tone, #{$primary});
-
-  svg {
-    width: 19px;
-    height: 19px;
-  }
-}
-
-.kpi__value {
-  font-size: 1.45rem;
-  font-weight: $font-bold;
-  color: $text-primary;
-  line-height: 1.1;
-}
-
-.kpi__label {
-  font-size: $font-size-xs;
-  color: $text-muted;
-}
-
-.kpi__sub {
-  grid-column: 2;
-  font-size: 0.65rem;
-  font-weight: $font-semibold;
-  color: var(--tone, #{$primary});
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.kpi.tone-primary {
-  --tone: #{$primary};
-}
-.kpi.tone-income {
-  --tone: #{$income};
-}
-.kpi.tone-info {
-  --tone: #{$info};
-}
-.kpi.tone-accent {
-  --tone: #{$accent-color};
-}
-
-.grid-2 {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  gap: 1.25rem;
-  margin-bottom: 1.25rem;
-}
-
-.ranking {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.55rem;
-}
-
-.ranking-row {
-  display: grid;
-  grid-template-columns: 1.25rem minmax(90px, 1fr) 2fr auto;
-  align-items: center;
-  gap: 0.6rem;
-  font-size: $font-size-sm;
-}
-
-.ranking-rank {
-  color: $text-muted;
-  font-weight: $font-semibold;
-  font-size: $font-size-xs;
-}
-
-.ranking-label {
-  color: $text-primary;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ranking-bar {
-  height: 7px;
-  border-radius: 4px;
-  background: $bg-gray;
-  overflow: hidden;
-}
-
-.ranking-fill {
-  display: block;
-  height: 100%;
-  border-radius: 4px;
-  background: $primary;
-}
-
-.ranking-value {
-  font-weight: $font-semibold;
-  color: $text-primary;
-  justify-self: end;
-}
-
-.search {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.4rem 0.7rem;
-  background: $bg-white;
-  border: 1px solid $border-color;
-  border-radius: $radius-lg;
-
-  &:focus-within {
-    border-color: $primary;
-  }
-}
-
-.search__icon {
-  width: 15px;
-  height: 15px;
-  color: $text-muted;
-}
-
-.search__input {
-  border: none;
-  outline: none;
-  background: transparent;
-  font-size: $font-size-sm;
-  color: $text-primary;
-  width: 200px;
-  max-width: 100%;
-}
-
-.row-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  border: 1px solid transparent;
-  border-radius: $radius-md;
-  background: transparent;
-  color: $text-secondary;
-  cursor: pointer;
-
-  &:hover {
-    background: $bg-light;
-    border-color: $border-color;
-  }
-
-  svg {
-    width: 18px;
-    height: 18px;
-  }
-}
-
-.item-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.filter-chip {
-  margin-top: 0.5rem;
-  padding: 0.3rem 0.65rem;
-  border: 1px solid $border-color;
-  border-radius: $radius-lg;
-  background: $primary-light;
-  color: $primary-dark;
-  font-size: $font-size-xs;
-  cursor: pointer;
-}
-
-.kpis--single {
-  grid-template-columns: minmax(220px, 320px);
-}
-
-.link-back {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  border: none;
-  background: transparent;
-  color: $text-secondary;
-  font-size: $font-size-sm;
-  font-weight: $font-medium;
-  cursor: pointer;
-
-  &:hover {
-    color: $primary;
-  }
-}
-
-.link-back__icon {
-  width: 16px;
-  height: 16px;
-}
-
-.placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: 0.6rem;
-  padding: 3.5rem 1.5rem;
-  background: $bg-white;
-  border: 1px solid $border-color;
-  border-radius: $radius-xl;
-}
-
-.placeholder__icon {
-  width: 64px;
-  height: 64px;
-  color: $primary;
-}
-
-.placeholder__title {
-  margin: 0;
-  font-size: 1.2rem;
-  font-weight: $font-bold;
-  color: $text-primary;
-}
-
-.placeholder__body {
-  margin: 0;
-  max-width: 460px;
-  color: $text-muted;
-  font-size: $font-size-sm;
-  line-height: 1.5;
-}
-
-.placeholder__tag {
-  margin-top: 0.5rem;
-  padding: 0.3rem 0.8rem;
-  border-radius: $radius-md;
-  background: $primary-light;
-  color: $primary-dark;
-  font-size: $font-size-xs;
-  font-weight: $font-semibold;
-}
-</style>
diff --git a/pages/admin/outreach.vue b/pages/admin/outreach.vue
new file mode 100644
index 0000000..49937c2
--- /dev/null
+++ b/pages/admin/outreach.vue
@@ -0,0 +1,95 @@
+<template>
+  <AdminPage
+    :title="t('User outreach')"
+    :description="composing ? t('Compose a new outreach.') : t('Emails you have sent to users.')"
+  >
+    <template #actions>
+      <DsButton v-if="!composing" @click="composing = true">{{ t('New outreach') }}</DsButton>
+      <DsButton v-else variant="secondary" @click="composing = false">{{ t('Back') }}</DsButton>
+    </template>
+
+    <DsCard v-if="composing" padding="md">
+      <OutreachComposer @sent="onSent" />
+    </DsCard>
+
+    <template v-else>
+      <DsStatePanel v-if="pending" state="loading" :title="t('Loading outreach')" />
+      <DsStatePanel
+        v-else-if="failed"
+        state="error"
+        :title="t('Could not load outreach')"
+        :description="t('The admin service did not answer. Nothing has changed.')"
+        :action-label="t('Try again')"
+        @action="load"
+      />
+      <DsStatePanel
+        v-else-if="!items.length"
+        art="mail"
+        area="slate"
+        :title="t('No outreach sent yet')"
+        :description="
+          t(
+            'Write to your users from here and every send is listed, so you can see what was said and when.'
+          )
+        "
+        :action-label="t('New outreach')"
+        @action="composing = true"
+      />
+      <DsDataTable v-else :columns="columns" :rows="items" :empty-text="t('No outreaches yet')">
+        <template #cell-subject="{ value }">
+          <strong>{{ value }}</strong>
+        </template>
+        <template #cell-created_at="{ value }">
+          {{ value ? new Date(String(value)).toLocaleDateString() : '' }}
+        </template>
+      </DsDataTable>
+    </template>
+  </AdminPage>
+</template>
+
+<script setup lang="ts">
+import {
+  DsButton,
+  DsCard,
+  DsDataTable,
+  DsStatePanel,
+  type DataTableColumn
+} from '@whilesmart/design';
+import OutreachComposer from '@/components/admin/OutreachComposer.vue';
+import { adminApi, type OutreachSummary } from '@/services/api/adminApi';
+
+definePageMeta({ layout: 'admin', middleware: ['auth', 'admin'] });
+
+const { t } = useI18n();
+
+const composing = ref(false);
+const pending = ref(true);
+const failed = ref(false);
+const items = ref<OutreachSummary[]>([]);
+
+const columns = computed<DataTableColumn[]>(() => [
+  { key: 'subject', label: t('Subject') },
+  { key: 'audience', label: t('Audience') },
+  { key: 'sent', label: t('Sent') },
+  { key: 'created_at', label: t('Date') }
+]);
+
+async function load() {
+  pending.value = true;
+  failed.value = false;
+  try {
+    items.value = await adminApi.outreachHistory();
+  } catch {
+    failed.value = true;
+  } finally {
+    pending.value = false;
+  }
+}
+
+function onSent() {
+  composing.value = false;
+  load();
+}
+
+onMounted(load);
+</script>
diff --git a/pages/budgets/index.vue b/pages/budgets/index.vue
index 5f03c0d..5aa01e2 100644
--- a/pages/budgets/index.vue
+++ b/pages/budgets/index.vue
@@ -31,7 +31,7 @@
             <p>
               {{
                 t(
-                  'Leave targets empty and the budget tracks every transaction in the period — good for a total spending cap. Pick categories, groups, or wallets to limit the scope to those.'
+                  'Leave targets empty and the budget tracks every transaction in the period, which suits a total spending cap. Pick categories, groups, or wallets to limit the scope to those.'
                 )
               }}
             </p>
@@ -42,7 +42,7 @@
             <p>
               {{
                 t(
-                  'When you record income, check "This is a refund" to subtract it from any budget covering the same categories, groups, or wallets. Unmarked income — salary, gifts — never changes a budget.'
+                  'When you record income, check "This is a refund" to subtract it from any budget covering the same categories, groups, or wallets. Unmarked income (salary, gifts) never changes a budget.'
                 )
               }}
             </p>
@@ -286,9 +286,9 @@ async function handleDelete(budget: Budget) {
 }
 
 onMounted(async () => {
-  // Kick off the budgets fetch synchronously so `isLoading` flips before
-  // the first render — otherwise `loadRelated` suspends and the page
-  // briefly renders the empty state on a hard refresh.
+  // Kick off the budgets fetch synchronously so `isLoading` flips before the first
+  // render. Otherwise `loadRelated` suspends and a hard refresh briefly shows the
+  // empty state.
   const budgetsPromise = loadBudgets();
   await loadRelated();
   await budgetsPromise;
diff --git a/pages/feedback.vue b/pages/feedback.vue
new file mode 100644
index 0000000..7b13fdd
--- /dev/null
+++ b/pages/feedback.vue
@@ -0,0 +1,220 @@
+<template>
+  <div class="feedback-page">
+    <header class="hero surface surface--brand">
+      <div>
+        <span class="eyebrow">{{ t('Feedback') }}</span>
+        <h1>{{ t('Help shape Trakli') }}</h1>
+        <p>
+          {{ t('Report a problem, ask a question, or tell us what would make Trakli better.') }}
+        </p>
+      </div>
+      <MessageSquare class="hero__icon" />
+    </header>
+    <div class="feedback-grid">
+      <TCard>
+        <template #header>{{ t('Send feedback') }}</template>
+        <form class="form" @submit.prevent="submit">
+          <label
+            ><span>{{ t('Type') }}</span
+            ><select v-model="form.type">
+              <option value="general">{{ t('General') }}</option>
+              <option value="bug">{{ t('Bug') }}</option>
+              <option value="feature">{{ t('Feature request') }}</option>
+              <option value="question">{{ t('Question') }}</option>
+            </select></label
+          >
+          <label
+            ><span>{{ t('Subject') }}</span
+            ><input v-model="form.subject" maxlength="200"
+          /></label>
+          <label
+            ><span>{{ t('Message') }}</span
+            ><textarea v-model="form.message" required rows="7" maxlength="5000" />
+          </label>
+          <TButton type="submit" :text="t('Send feedback')" :loading="sending" />
+        </form>
+      </TCard>
+      <TCard>
+        <template #header>{{ t('Your feedback') }}</template>
+        <ComponentLoader
+          :is-loading="loading"
+          :error="error"
+          :has-data="items.length > 0"
+          :on-retry="load"
+        >
+          <template #empty
+            ><div class="empty">
+              <MessageSquare />
+              <h2>{{ t('Nothing sent yet') }}</h2>
+              <p>{{ t('Your messages and their status will appear here.') }}</p>
+            </div></template
+          >
+          <div class="history">
+            <article v-for="item in items" :key="item.id">
+              <span class="status">{{ item.status.replaceAll('_', ' ') }}</span>
+              <h3 v-if="item.subject">{{ item.subject }}</h3>
+              <p>{{ item.message }}</p>
+              <small>{{ new Date(item.created_at).toLocaleString() }}</small>
+            </article>
+          </div>
+        </ComponentLoader>
+      </TCard>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted } from 'vue';
+import { MessageSquare } from 'lucide-vue-next';
+import TCard from '@/components/TCard.vue';
+import TButton from '@/components/TButton.vue';
+import ComponentLoader from '@/components/ComponentLoader.vue';
+import { useFeedback, type FeedbackItem } from '@/composables/useFeedback';
+import { useNotifications } from '@/composables/useNotifications';
+
+definePageMeta({ middleware: ['auth'] });
+const { t } = useI18n();
+const { showSuccess, showError } = useNotifications();
+const feedback = useFeedback();
+const form = reactive({ type: 'general', subject: '', message: '' });
+const items = ref<FeedbackItem[]>([]);
+const loading = ref(true);
+const sending = ref(false);
+const error = ref<unknown>(null);
+
+async function load() {
+  loading.value = true;
+  error.value = null;
+  try {
+    items.value = await feedback.list();
+  } catch (cause) {
+    error.value = cause;
+  } finally {
+    loading.value = false;
+  }
+}
+async function submit() {
+  sending.value = true;
+  try {
+    const item = await feedback.send(form);
+    items.value.unshift(item);
+    form.subject = '';
+    form.message = '';
+    showSuccess(t('Thanks, your feedback reached the team.'));
+  } catch {
+    showError(t('Could not send your feedback.'));
+  } finally {
+    sending.value = false;
+  }
+}
+onMounted(load);
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/scss/_variables.scss' as *;
+.feedback-page {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: $spacing-6;
+}
+.hero {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: $spacing-6;
+  padding: $spacing-6;
+  border-radius: $radius-xl;
+  box-shadow: var(--elevation-1);
+}
+.hero h1 {
+  margin: $spacing-1 0;
+  color: var(--surface-ink);
+}
+.hero p {
+  margin: 0;
+  color: $text-secondary;
+}
+.hero__icon {
+  width: 64px;
+  height: 64px;
+  color: var(--surface-deep);
+}
+.feedback-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: $spacing-5;
+}
+.form,
+.form label {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-2;
+}
+.form {
+  gap: $spacing-4;
+}
+.form label span {
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+}
+.form input,
+.form textarea,
+.form select {
+  padding: 0.7rem 0.8rem;
+  color: $text-primary;
+  background: $input-bg;
+  border: 1px solid $border-color;
+  border-radius: $radius-md;
+  font: inherit;
+}
+.history {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+}
+.history article {
+  padding: $spacing-3;
+  background: $bg-light;
+  border-radius: $radius-lg;
+}
+.history h3,
+.history p {
+  margin: $spacing-2 0;
+}
+.history p {
+  color: $text-secondary;
+  white-space: pre-wrap;
+}
+.history small {
+  color: $text-muted;
+}
+.status {
+  padding: 0.2rem 0.55rem;
+  color: $primary-dark;
+  background: $primary-light;
+  border-radius: 999px;
+  font-size: $font-size-xs;
+  text-transform: capitalize;
+}
+.empty {
+  padding: $spacing-6;
+  color: $text-muted;
+  text-align: center;
+}
+.empty svg {
+  color: $primary;
+}
+@media (max-width: $breakpoint-md) {
+  .feedback-page {
+    padding: $spacing-4;
+  }
+  .feedback-grid {
+    grid-template-columns: 1fr;
+  }
+  .hero__icon {
+    width: 42px;
+    height: 42px;
+  }
+}
+</style>
diff --git a/plugins/adminViewer.ts b/plugins/adminViewer.ts
new file mode 100644
index 0000000..74da6ed
--- /dev/null
+++ b/plugins/adminViewer.ts
@@ -0,0 +1,14 @@
+export default defineNuxtPlugin(() => {
+  const { user } = useAuth();
+  const viewer = useState<{ name: string; email: string } | null>('admin.viewer', () => null);
+
+  watchEffect(() => {
+    const current = user.value;
+    viewer.value = current
+      ? {
+          name: [current.first_name, current.last_name].filter(Boolean).join(' ') || current.email,
+          email: current.email
+        }
+      : null;
+  });
+});
diff --git a/plugins/engagement.client.ts b/plugins/engagement.client.ts
new file mode 100644
index 0000000..01605bf
--- /dev/null
+++ b/plugins/engagement.client.ts
@@ -0,0 +1,27 @@
+import { createEngagementClient } from '@whilesmart/engagement';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const config = useRuntimeConfig();
+  const siteKey = config.public.engagementSiteKey as string;
+
+  if (!siteKey) return;
+
+  const engagement = createEngagementClient({
+    endpoint: `${config.public.apiBase}/engagement/events`,
+    siteKey
+  });
+
+  const router = useRouter();
+  let currentPage = useRoute().fullPath;
+  const stopTracking = router.afterEach((to) => {
+    if (to.fullPath === currentPage) return;
+    currentPage = to.fullPath;
+    engagement.page();
+  });
+  nuxtApp.hook('app:beforeUnmount', () => {
+    stopTracking();
+    engagement.destroy();
+  });
+
+  return { provide: { engagement } };
+});
diff --git a/tests/assets/designBrand.test.ts b/tests/assets/designBrand.test.ts
new file mode 100644
index 0000000..c33d67e
--- /dev/null
+++ b/tests/assets/designBrand.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+const source = readFileSync(resolve(__dirname, '../../assets/css/design-brand.css'), 'utf8');
+
+const tokens = Object.fromEntries(
+  [...source.matchAll(/--([\w-]+):\s*(#[0-9a-f]{6})/gi)].map((match) => [match[1], match[2]])
+);
+
+// The neutral steps the design system pairs brand colour against. Kept here rather than
+// imported so a change in either repository fails this test instead of passing silently.
+const neutral = {
+  white: '#ffffff',
+  '700': '#334155',
+  '800': '#1e293b',
+  '900': '#0f172a'
+};
+
+const channel = (value: number) =>
+  value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+
+const luminance = (hex: string) =>
+  hex
+    .slice(1)
+    .match(/.{2}/g)!
+    .map((part) => channel(parseInt(part, 16) / 255))
+    .reduce((sum, value, index) => sum + [0.2126, 0.7152, 0.0722][index] * value, 0);
+
+const contrast = (foreground: string, background: string) => {
+  const [high, low] = [luminance(foreground), luminance(background)].sort((a, b) => b - a);
+  return (high + 0.05) / (low + 0.05);
+};
+
+const pairs: Array<[string, string, string]> = [
+  ['table heading on its fill', 'ds-brand-primary-900', 'ds-brand-primary-50'],
+  ['brand text on its soft fill', 'ds-brand-primary-800', 'ds-brand-primary-50']
+];
+
+describe('design brand tokens', () => {
+  it.each(pairs)('%s clears 4.5:1', (_name, foreground, background) => {
+    expect(tokens[foreground]).toBeDefined();
+    expect(tokens[background]).toBeDefined();
+    expect(contrast(tokens[foreground], tokens[background])).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it('keeps inverse text legible on the primary fill', () => {
+    expect(contrast(neutral.white, tokens['ds-brand-primary-800'])).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it.each(Object.entries(neutral).filter(([step]) => step !== 'white'))(
+    'keeps the dark-mode brand ink legible on neutral %s',
+    (_step, background) => {
+      expect(contrast(tokens['ds-brand-primary-400'], background)).toBeGreaterThanOrEqual(4.5);
+    }
+  );
+});
diff --git a/tests/pages/feedbackSubmit.test.ts b/tests/pages/feedbackSubmit.test.ts
new file mode 100644
index 0000000..9085308
--- /dev/null
+++ b/tests/pages/feedbackSubmit.test.ts
@@ -0,0 +1,21 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FeedbackPage from '@/pages/feedback.vue';
+
+vi.stubGlobal('definePageMeta', vi.fn());
+
+vi.mock('@/composables/useFeedback', () => ({
+  useFeedback: () => ({ list: async () => [], send: async () => ({}) })
+}));
+
+vi.mock('~/composables/useNotifications', () => ({
+  useNotifications: () => ({ showSuccess: vi.fn(), showError: vi.fn() })
+}));
+
+describe('feedback page', () => {
+  it('has a button that actually submits the form', () => {
+    const wrapper = mount(FeedbackPage);
+
+    expect(wrapper.find('form button').attributes('type')).toBe('submit');
+  });
+});