diff --git a/.gitignore b/.gitignore
index e5d4875..7099806 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,9 @@ tmp/
 .idea/
 .vscode/
 
+# JS deps
+ui-kit/node_modules/
+
 # Dev data and local state
 /data/
 *.sqlite
diff --git a/README.md b/README.md
index 8ff548c..d850813 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,22 @@ Boilerplate riusabile per:
 
 In ambiente `develop`, le email vengono salvate in `./data/emails` (sink locale).
 
+## UI Kit (Vite + Svelte CE)
+
+Comandi:
+
+```bash
+cd ui-kit
+npm install
+npm run dev
+npm run build
+```
+
+La build scrive direttamente in `web/static/ui`:
+
+- `ui.esm.js`
+- `ui.css`
+
 ## Struttura iniziale
 
 ```text
@@ -32,6 +48,7 @@ In ambiente `develop`, le email vengono salvate in `./data/emails` (sink locale)
 │   ├── models/
 │   ├── repo/
 │   └── services/
+├── ui-kit/
 ├── web/
 │   ├── emails/
 │   │   └── templates/
@@ -43,29 +60,5 @@ In ambiente `develop`, le email vengono salvate in `./data/emails` (sink locale)
 │       ├── admin/
 │       ├── private/
 │       └── public/
-├── ui-kit/
 └── data/        # solo sviluppo locale
 ```
-
-## TODO Checklist
-
-- [ ] Definire bootstrap server in `cmd/server` (entrypoint + lifecycle).
-- [ ] Configurare loader config (`env`, `flags`) in `internal/config`.
-- [ ] Impostare `internal/db` con supporto SQLite (dev) e Postgres (prod).
-- [ ] Definire modelli base GORM in `internal/models` (User, Role, Session, ecc.).
-- [ ] Implementare repository layer in `internal/repo`.
-- [ ] Implementare service layer in `internal/services`.
-- [ ] Implementare controller layer in `internal/controllers`.
-- [ ] Configurare router HTTP in `internal/http` (gruppi public/private/admin).
-- [ ] Aggiungere middleware comuni in `internal/middleware` (logging, recovery, auth, cors).
-- [ ] Implementare auth in `internal/auth` (login/logout/session o token).
-- [ ] Implementare RBAC con ruolo `admin`.
-- [ ] Configurare mailer + email sink in `internal/mailer`.
-- [ ] Definire template rendering per `web/templates/public`, `web/templates/private`, `web/templates/admin`.
-- [ ] Preparare template email in `web/emails/templates`.
-- [ ] Definire static assets pipeline e convenzioni in `web/static`.
-- [ ] Impostare `ui-kit` con Svelte Custom Elements e output in `web/static/ui`.
-- [ ] Definire integrazione HTMX lato template/partials.
-- [ ] Aggiungere migrazioni DB iniziali e seed minimo.
-- [ ] Aggiungere test base (unit + integrazione) per router/auth/repo.
-- [ ] Aggiungere script Makefile/task runner per setup e run locale.
diff --git a/codex-prompt/prompt-9.txt b/codex-prompt/prompt-9.txt
new file mode 100644
index 0000000..b3a2ee2
--- /dev/null
+++ b/codex-prompt/prompt-9.txt
@@ -0,0 +1,33 @@
+Crea /ui-kit come progetto Vite + Svelte per custom elements.
+
+Requisiti:
+- build deve scrivere direttamente in ../web/static/ui:
+  - ui.esm.js
+  - ui.css (tokens+base)
+- src/index.ts registra:
+  - ui-modal
+  - ui-drop-down
+  - ui-data-table-shell (driver htmx per aggiornare un target)
+
+Componenti:
+1) UiModal.svelte:
+   - <svelte:options customElement="ui-modal" />
+   - attributi: title, open (boolean presence)
+   - close on ESC, backdrop click
+   - focus trap minimale
+   - emette evento "ui:close" (bubbles+composed)
+   - slot contenuto (HTMX swappa dentro al tag)
+
+2) UiDropDown.svelte:
+   - usa <option> del light DOM
+   - espone value/name/placeholder/disabled
+   - integra con form MVC (hidden input name=...)
+   - emette change + ui:change
+
+3) UiDataTableShell.svelte:
+   - attributi: endpoint, target, page-size
+   - input search -> usa htmx.ajax('GET', url, {target}) se disponibile
+   - non renderizza tabella, solo toolbar
+
+Aggiorna layout per includere /static/ui/ui.css e /static/ui/ui.esm.js con ?v={{.BuildHash}}.
+Aggiorna README con comandi npm.
\ No newline at end of file
diff --git a/internal/http/router.go b/internal/http/router.go
index badc0ec..5c22079 100644
--- a/internal/http/router.go
+++ b/internal/http/router.go
@@ -16,6 +16,10 @@ func RegisterRoutes(app *fiber.App, store *session.Store, database *gorm.DB, cfg
 	app.Use(httpmw.SessionStoreMiddleware(store))
 	app.Use(httpmw.CurrentUserMiddleware(store, database))
 	app.Use(httpmw.ConsumeFlash())
+	app.Use(func(c *fiber.Ctx) error {
+		httpmw.SetTemplateData(c, "BuildHash", cfg.BuildHash)
+		return c.Next()
+	})
 
 	authService, err := services.NewAuthService(database, cfg)
 	if err != nil {
diff --git a/ui-kit/index.html b/ui-kit/index.html
new file mode 100644
index 0000000..b227c90
--- /dev/null
+++ b/ui-kit/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>UI Kit Dev</title>
+  </head>
+  <body>
+    <h1>UI Kit Dev</h1>
+    <ui-data-table-shell endpoint="/users/table" target="#target" page-size="10"></ui-data-table-shell>
+    <div id="target"></div>
+
+    <script type="module" src="/src/index.ts"></script>
+  </body>
+</html>
diff --git a/ui-kit/package.json b/ui-kit/package.json
new file mode 100644
index 0000000..70f0b85
--- /dev/null
+++ b/ui-kit/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "trustcontact-ui-kit",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "svelte": "^5.0.0",
+    "typescript": "^5.6.0",
+    "vite": "^5.4.0"
+  }
+}
diff --git a/ui-kit/src/base.css b/ui-kit/src/base.css
new file mode 100644
index 0000000..ef95d00
--- /dev/null
+++ b/ui-kit/src/base.css
@@ -0,0 +1,19 @@
+:root {
+  --ui-bg: #ffffff;
+  --ui-fg: #111827;
+  --ui-muted: #6b7280;
+  --ui-border: #d1d5db;
+  --ui-overlay: rgba(17, 24, 39, 0.56);
+  --ui-panel: #ffffff;
+  --ui-radius: 10px;
+  --ui-shadow: 0 10px 35px rgba(15, 23, 42, 0.2);
+  --ui-primary: #111827;
+  --ui-primary-contrast: #ffffff;
+}
+
+ui-modal,
+ui-drop-down,
+ui-data-table-shell {
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  color: var(--ui-fg);
+}
diff --git a/ui-kit/src/components/UiDataTableShell.svelte b/ui-kit/src/components/UiDataTableShell.svelte
new file mode 100644
index 0000000..5837ec8
--- /dev/null
+++ b/ui-kit/src/components/UiDataTableShell.svelte
@@ -0,0 +1,74 @@
+<svelte:options customElement="ui-data-table-shell" />
+
+<script lang="ts">
+  export let endpoint = '';
+  export let target = '';
+  export let pageSize = 10;
+
+  let query = '';
+
+  function submit(page = 1) {
+    if (!endpoint || !target) return;
+
+    const params = new URLSearchParams();
+    if (query.trim()) params.set('q', query.trim());
+    params.set('page', String(page));
+    params.set('pageSize', String(pageSize));
+
+    const url = `${endpoint}${endpoint.includes('?') ? '&' : '?'}${params.toString()}`;
+
+    const htmxApi = (window as any).htmx;
+    if (htmxApi && typeof htmxApi.ajax === 'function') {
+      htmxApi.ajax('GET', url, { target });
+      return;
+    }
+
+    const targetEl = document.querySelector(target);
+    if (!targetEl) return;
+
+    fetch(url)
+      .then((res) => res.text())
+      .then((html) => {
+        targetEl.innerHTML = html;
+      })
+      .catch(() => {
+        // no-op fallback
+      });
+  }
+</script>
+
+<form class="toolbar" on:submit|preventDefault={() => submit(1)}>
+  <input
+    type="search"
+    placeholder="Search..."
+    bind:value={query}
+    on:keydown={(e) => e.key === 'Enter' && submit(1)}
+  />
+  <button type="submit">Search</button>
+</form>
+
+<style>
+  .toolbar {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+
+  input[type='search'] {
+    flex: 1;
+    min-width: 180px;
+    padding: 10px;
+    border: 1px solid var(--ui-border);
+    border-radius: 8px;
+  }
+
+  button {
+    border: 0;
+    border-radius: 8px;
+    background: var(--ui-primary);
+    color: var(--ui-primary-contrast);
+    padding: 10px 12px;
+    cursor: pointer;
+  }
+</style>
diff --git a/ui-kit/src/components/UiDropDown.svelte b/ui-kit/src/components/UiDropDown.svelte
new file mode 100644
index 0000000..2d722f2
--- /dev/null
+++ b/ui-kit/src/components/UiDropDown.svelte
@@ -0,0 +1,153 @@
+<svelte:options customElement="ui-drop-down" />
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  export let value = '';
+  export let name = '';
+  export let placeholder = 'Select...';
+  export let disabled = false;
+
+  let rootEl: HTMLElement;
+  let host: HTMLElement;
+  let hiddenInput: HTMLInputElement;
+  let open = false;
+
+  type OptionItem = { value: string; label: string };
+  let options: OptionItem[] = [];
+
+  function loadOptions() {
+    options = Array.from(host.querySelectorAll('option')).map((opt) => ({
+      value: opt.value,
+      label: opt.textContent?.trim() || opt.value
+    }));
+
+    if (!value) {
+      const selected = host.querySelector('option[selected]') as HTMLOptionElement | null;
+      if (selected) value = selected.value;
+    }
+  }
+
+  function selectedLabel() {
+    if (!value) return placeholder;
+    return options.find((o) => o.value === value)?.label || placeholder;
+  }
+
+  function selectOption(nextValue: string) {
+    value = nextValue;
+    open = false;
+    syncHiddenInput();
+
+    host.dispatchEvent(new Event('change', { bubbles: true }));
+    host.dispatchEvent(
+      new CustomEvent('ui:change', {
+        detail: { value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+
+  function syncHiddenInput() {
+    if (!hiddenInput) return;
+    hiddenInput.name = name;
+    hiddenInput.value = value;
+    hiddenInput.disabled = disabled || !name;
+  }
+
+  onMount(() => {
+    host = (rootEl.getRootNode() as ShadowRoot).host as HTMLElement;
+    if (!host) return;
+
+    hiddenInput = host.querySelector('input[data-ui-dropdown-hidden="true"]') as HTMLInputElement;
+    if (!hiddenInput) {
+      hiddenInput = document.createElement('input');
+      hiddenInput.type = 'hidden';
+      hiddenInput.setAttribute('data-ui-dropdown-hidden', 'true');
+      host.appendChild(hiddenInput);
+    }
+
+    loadOptions();
+    syncHiddenInput();
+
+    const observer = new MutationObserver(() => {
+      loadOptions();
+      syncHiddenInput();
+    });
+    observer.observe(host, { childList: true, subtree: true, attributes: true });
+
+    return () => observer.disconnect();
+  });
+</script>
+
+<div class="dropdown" bind:this={rootEl}>
+  <button type="button" class="trigger" disabled={disabled} on:click={() => (open = !open)}>
+    <span>{selectedLabel()}</span>
+    <span aria-hidden="true">▾</span>
+  </button>
+
+  {#if open}
+    <div class="menu" role="listbox">
+      {#if options.length === 0}
+        <div class="empty">No options</div>
+      {:else}
+        {#each options as opt}
+          <button type="button" class="item" on:click={() => selectOption(opt.value)}>
+            {opt.label}
+          </button>
+        {/each}
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .dropdown {
+    position: relative;
+    display: inline-block;
+    min-width: 180px;
+  }
+
+  .trigger {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 12px;
+    border: 1px solid var(--ui-border);
+    border-radius: 8px;
+    background: var(--ui-bg);
+    cursor: pointer;
+  }
+
+  .menu {
+    position: absolute;
+    z-index: 30;
+    left: 0;
+    right: 0;
+    margin-top: 6px;
+    border: 1px solid var(--ui-border);
+    background: var(--ui-bg);
+    border-radius: 8px;
+    box-shadow: var(--ui-shadow);
+    overflow: hidden;
+  }
+
+  .item {
+    width: 100%;
+    text-align: left;
+    border: 0;
+    background: transparent;
+    padding: 10px 12px;
+    cursor: pointer;
+  }
+
+  .item:hover {
+    background: #f3f4f6;
+  }
+
+  .empty {
+    padding: 10px 12px;
+    color: var(--ui-muted);
+  }
+</style>
diff --git a/ui-kit/src/components/UiModal.svelte b/ui-kit/src/components/UiModal.svelte
new file mode 100644
index 0000000..f2b2f0f
--- /dev/null
+++ b/ui-kit/src/components/UiModal.svelte
@@ -0,0 +1,142 @@
+<svelte:options customElement="ui-modal" />
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  export let title = '';
+  export let open = false;
+
+  let rootEl: HTMLElement;
+  let panelEl: HTMLElement;
+
+  function closeModal() {
+    open = false;
+    rootEl?.removeAttribute('open');
+    rootEl?.dispatchEvent(
+      new CustomEvent('ui:close', { bubbles: true, composed: true })
+    );
+  }
+
+  function onKeyDown(event: KeyboardEvent) {
+    if (!open) return;
+
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      closeModal();
+      return;
+    }
+
+    if (event.key === 'Tab') {
+      trapFocus(event);
+    }
+  }
+
+  function trapFocus(event: KeyboardEvent) {
+    const focusables = panelEl?.querySelectorAll<HTMLElement>(
+      'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+    );
+    if (!focusables || focusables.length === 0) {
+      event.preventDefault();
+      panelEl?.focus();
+      return;
+    }
+
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = document.activeElement as HTMLElement | null;
+
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last.focus();
+      return;
+    }
+
+    if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+
+  function onBackdropClick(event: MouseEvent) {
+    if (event.target === event.currentTarget) {
+      closeModal();
+    }
+  }
+
+  onMount(() => {
+    const host = (rootEl.getRootNode() as ShadowRoot).host as HTMLElement;
+    const observer = new MutationObserver(() => {
+      open = host.hasAttribute('open');
+      if (open) {
+        setTimeout(() => {
+          const autofocus = panelEl?.querySelector<HTMLElement>('[autofocus]');
+          (autofocus || panelEl)?.focus();
+        }, 0);
+      }
+    });
+
+    observer.observe(host, { attributes: true, attributeFilter: ['open'] });
+    return () => observer.disconnect();
+  });
+</script>
+
+{#if open}
+  <div class="overlay" on:click={onBackdropClick} on:keydown={onKeyDown} role="presentation">
+    <div class="panel" role="dialog" aria-modal="true" tabindex="-1" bind:this={panelEl}>
+      <header class="header">
+        <h3>{title}</h3>
+        <button type="button" class="close" on:click={closeModal} aria-label="Close">×</button>
+      </header>
+      <section class="body">
+        <slot />
+      </section>
+    </div>
+  </div>
+{/if}
+
+<div bind:this={rootEl} hidden></div>
+
+<style>
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background: var(--ui-overlay);
+    display: grid;
+    place-items: center;
+    z-index: 1000;
+  }
+
+  .panel {
+    width: min(640px, calc(100vw - 32px));
+    max-height: calc(100vh - 48px);
+    overflow: auto;
+    background: var(--ui-panel);
+    border-radius: var(--ui-radius);
+    box-shadow: var(--ui-shadow);
+    outline: none;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--ui-border);
+  }
+
+  h3 {
+    margin: 0;
+    font-size: 1rem;
+  }
+
+  .close {
+    border: 0;
+    background: transparent;
+    font-size: 1.4rem;
+    cursor: pointer;
+  }
+
+  .body {
+    padding: 12px 16px 16px;
+  }
+</style>
diff --git a/ui-kit/src/index.ts b/ui-kit/src/index.ts
new file mode 100644
index 0000000..8385eec
--- /dev/null
+++ b/ui-kit/src/index.ts
@@ -0,0 +1,6 @@
+import './base.css';
+import './components/UiModal.svelte';
+import './components/UiDropDown.svelte';
+import './components/UiDataTableShell.svelte';
+
+export {};
diff --git a/ui-kit/tsconfig.json b/ui-kit/tsconfig.json
new file mode 100644
index 0000000..d7bb49f
--- /dev/null
+++ b/ui-kit/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*", "vite.config.ts"]
+}
diff --git a/ui-kit/vite.config.ts b/ui-kit/vite.config.ts
new file mode 100644
index 0000000..56f567f
--- /dev/null
+++ b/ui-kit/vite.config.ts
@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+export default defineConfig({
+  plugins: [
+    svelte({
+      compilerOptions: {
+        customElement: true
+      }
+    })
+  ],
+  build: {
+    outDir: '../web/static/ui',
+    emptyOutDir: true,
+    cssCodeSplit: false,
+    lib: {
+      entry: 'src/index.ts',
+      formats: ['es'],
+      fileName: () => 'ui.esm.js',
+      cssFileName: 'ui'
+    }
+  }
+});
diff --git a/web/templates/layout.html b/web/templates/layout.html
index bb75d0b..294c76d 100644
--- a/web/templates/layout.html
+++ b/web/templates/layout.html
@@ -17,7 +17,9 @@
       .muted { color: #6b7280; font-size: 0.95rem; }
       .row { display: flex; gap: 10px; flex-wrap: wrap; }
     </style>
+    <link rel="stylesheet" href="/static/ui/ui.css?v={{.BuildHash}}">
     <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+    <script type="module" src="/static/ui/ui.esm.js?v={{.BuildHash}}"></script>
   </head>
   <body>
     <nav>