genarato alcuni partials e corretto drop down

aggiornato per uso di taiwind
2026-02-23 17:09:35 +01:00 · 2026-02-23 13:46:44 +01:00
55 changed files with 6120 additions and 1392 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -35,3 +35,7 @@ ui-kit/node_modules/
 *.sqlite3
 *.db
 /data/emails/
+
+# Root JS deps
+node_modules/
+flowbite-ui/node_modules/
--- a/30
+++ b/30
@@ -1,20 +1,22 @@
-.PHONY: dev ui-build ui-dev css-build css-dev test db-reset fmt
+.PHONY: tw-build tw-watch htmx-copy flowbite-copy assets server test db-reset fmt

-dev:
+tw-build:
+	npm --prefix flowbite-ui run tw:build
+
+tw-watch:
+	npm --prefix flowbite-ui run tw:watch
+
+htmx-copy:
+	mkdir -p web/static/vendor && cp flowbite-ui/node_modules/htmx.org/dist/htmx.min.js web/static/vendor/htmx.min.js
+
+flowbite-copy:
+	mkdir -p web/static/vendor && cp flowbite-ui/node_modules/flowbite/dist/flowbite.min.js web/static/vendor/flowbite.js
+
+assets: htmx-copy flowbite-copy tw-build
+
+server:
 	go run ./cmd/server

-ui-build:
-	cd ui-kit && npm i && npm run build && npm run css:build
-
-ui-dev:
-	cd ui-kit && npm i && npm run dev
-
-css-build:
-	cd ui-kit && npm i && npm run css:build
-
-css-dev:
-	cd ui-kit && npm i && npm run css:dev
-
 test:
 	go test ./...

--- a/README.md
+++ b/README.md
@@ -1,14 +1,34 @@
 # GoFiber MVC Boilerplate

-Boilerplate GoFiber MVC + HTMX + Svelte Custom Elements + GORM, con auth server-rendered, area private/admin e mail sink in sviluppo.
+Boilerplate GoFiber MVC + HTMX + Flowbite + GORM, con auth server-rendered, area private/admin e mail sink in sviluppo.
+
+## Setup Assets + Server
+
+Terminale 1:
+
+```bash
+npm i --prefix flowbite-ui
+make assets
+make tw-watch
+```
+
+Terminale 2:
+
+```bash
+make server
+```
+
+`make assets` esegue:
+- copia di `flowbite-ui/node_modules/flowbite/dist/flowbite.min.js` in `web/static/vendor/flowbite.js`
+- build Tailwind in `web/static/css/app.css`

 ## Quickstart SQLite

 ```bash
 cp .env.example .env
-make css-build
-make ui-build
-make dev
+npm i --prefix flowbite-ui
+make assets
+make server
 ```

 Default SQLite path: `./data/app.sqlite3`.
@@ -37,27 +57,6 @@ DB_PG_DSN=postgres://trustcontact:trustcontact@localhost:5432/trustcontact?sslmo

 `DB_POSTGRES_DSN` è comunque supportato.

-## Tailwind + UI Kit
-
-Tailwind (template server-rendered) compila in `web/static/css/app.css`.
-
-UI kit (Svelte custom elements) compila in `web/static/ui`.
-
-Comandi:
-
-```bash
-make css-build   # build tailwind
-make css-dev     # watch tailwind
-make ui-build    # build ui-kit + css tailwind
-make ui-dev      # vite dev server ui-kit
-```
-
-Layout include:
-
- `/static/css/app.css?v={{.BuildHash}}`
- `/static/ui/ui.css?v={{.BuildHash}}`
- `/static/ui/ui.esm.js?v={{.BuildHash}}`
-
 ## Template Directories

 - Public: `web/templates/public`
@@ -70,11 +69,25 @@ In `develop`, le email vengono salvate in `./data/emails`.

 ## Make Targets

- `make dev` -> `go run ./cmd/server`
- `make ui-build` -> install + build ui-kit + build css tailwind
- `make ui-dev` -> watch UI con Vite
- `make css-build` -> build Tailwind CSS
- `make css-dev` -> watch Tailwind CSS
+- `make tw-build` -> build Tailwind CSS
+- `make tw-watch` -> watch Tailwind CSS
+- `make flowbite-copy` -> copia `flowbite-ui/node_modules/flowbite/dist/flowbite.min.js` in `web/static/vendor/flowbite.js`
+- `make assets` -> `flowbite-copy` + `tw-build`
+- `make server` -> `go run ./cmd/server`
 - `make test` -> `go test ./...`
 - `make db-reset` -> reset DB sqlite locale (`./data/app.db` / `./data/app.sqlite3`)
 - `make fmt` -> `gofmt` su `cmd/` e `internal/`
+# Third-Party Notices
+
+This project uses third-party software distributed under the MIT License.
+
+## Flowbite
+- Package: `flowbite`
+- License: MIT
+- Upstream: https://github.com/themesberg/flowbite
+- Full text: `licenses/FLOWBITE-MIT.txt`
+
+## Tailwind CSS
+- Packages: `tailwindcss`, `@tailwindcss/cli`
+- License: MIT
+- Upstream: https://github.com/tailwindlabs/tailwindcss
--- a/assets/tailwind/input.css
+++ b/assets/tailwind/input.css
@@ -0,0 +1 @@
+@import "../../flowbite-ui/node_modules/tailwindcss/index.css";
--- a/codex-prompt/add-flowbite.txt
+++ b/codex-prompt/add-flowbite.txt
@@ -0,0 +1,71 @@
+TASK: Integra Flowbite (UI + JS behavior) e aggiungi Makefile per Tailwind CLI (build/watch). Uso più terminali: non aggiungere tool per runner multi-process.
+
+1) Dipendenze Node
+- Se non esiste package.json in root, crearlo.
+- Installare:
+  - npm install -D @tailwindcss/cli tailwindcss
+  - npm install flowbite
+
+2) Tailwind config
+- Creare tailwind.config.js con:
+  content: [
+    "./web/templates/**/*.{html,gohtml}",
+    "./web/static/**/*.js",
+    "./node_modules/flowbite/**/*.js"
+  ],
+  theme: { extend: {} },
+  plugins: [ require("flowbite/plugin") ]
+
+3) CSS input
+- Creare ./assets/tailwind/input.css con:
+  @import "tailwindcss";
+
+4) Scripts npm
+- In package.json aggiungere:
+  "scripts": {
+    "tw:build": "npx @tailwindcss/cli -i ./assets/tailwind/input.css -o ./web/static/css/app.css --minify",
+    "tw:watch": "npx @tailwindcss/cli -i ./assets/tailwind/input.css -o ./web/static/css/app.css --watch"
+  }
+
+5) Copia Flowbite JS
+- Creare directory web/static/vendor se manca
+- Copiare:
+  node_modules/flowbite/dist/flowbite.min.js -> web/static/vendor/flowbite.js
+
+6) Layout
+- Aggiornare /web/templates/layout.html per includere:
+  <link rel="stylesheet" href="/static/css/app.css?v={{.BuildHash}}">
+  <script src="/static/vendor/htmx.min.js"></script>
+  <script src="/static/vendor/flowbite.js"></script>
+- Rimuovere dal layout riferimenti attivi al vecchio UI kit Svelte (ma non cancellare /ui-kit dal repo)
+
+7) Makefile
+- Creare/aggiornare Makefile con target:
+  - tw-build: npm run tw:build
+  - tw-watch: npm run tw:watch
+  - flowbite-copy: mkdir -p web/static/vendor && cp node_modules/flowbite/dist/flowbite.min.js web/static/vendor/flowbite.js
+  - assets: flowbite-copy tw-build
+  - server: go run ./cmd/server
+- Non creare target che avvia più processi insieme.
+
+8) Partials Flowbite
+- Creare /web/templates/components:
+  - navbar.html
+  - modal.html
+  - dropdown.html
+  - tabs.html
+  - collapse.html
+Con markup Flowbite + data-attributes standard, senza JS custom.
+
+9) Licenze
+- Creare /licenses/FLOWBITE-MIT.txt e THIRD_PARTY_NOTICES.md (Flowbite MIT, Tailwind MIT).
+
+10) README
+- Aggiornare README con istruzioni:
+  Terminale 1: npm i && make assets && make tw-watch
+  Terminale 2: make server
+
+Criteri:
+- make assets genera CSS e copia flowbite.js
+- modals/dropdowns Flowbite funzionano
+- progetto compilabile e avviabile.
--- a/codex-prompt/flowbite-convert.txt
+++ b/codex-prompt/flowbite-convert.txt
@@ -0,0 +1,141 @@
+TASK: Convertire tutti i template HTML esistenti per usare componenti Flowbite (markup + behavior JS) mantenendo logica MVC e HTMX.
+
+Non modificare controller, services, repo.
+Modificare solo template e layout.
+
+-------------------------------------
+1) LAYOUT GLOBALE
+-------------------------------------
+
+Aggiornare /web/templates/layout.html:
+
+- Layout container moderno Tailwind
+- Navbar Flowbite responsive con:
+  - Logo/AppName a sinistra
+  - Link:
+      - Public: Login / Signup
+      - Private: Dashboard / Users
+      - Admin: Admin (solo se role=admin)
+  - Dropdown utente con logout
+- Include:
+  <link rel="stylesheet" href="/static/css/app.css?v={{.BuildHash}}">
+  <script src="/static/vendor/htmx.min.js"></script>
+  <script src="/static/vendor/flowbite.js"></script>
+
+Struttura:
+- Navbar top
+- Container max-w-7xl mx-auto p-6
+- Footer minimale
+
+-------------------------------------
+2) PUBLIC TEMPLATES
+-------------------------------------
+
+Convertire:
+
+/web/templates/public/login.html
+/web/templates/public/signup.html
+/web/templates/public/forgot_password.html
+/web/templates/public/reset_password.html
+
+Usare:
+- Card Flowbite per form
+- Input Flowbite style
+- Button primary
+- Alert Flowbite per flash messages
+- Layout centrato verticalmente (flex items-center justify-center min-h-screen)
+
+-------------------------------------
+3) PRIVATE USERS
+-------------------------------------
+
+/web/templates/private/users/index.html
+
+- Header sezione con:
+  - Titolo
+  - Pulsante "Nuovo Utente" (modal Flowbite)
+- Search input Flowbite
+- Table Flowbite styled (striped, hover)
+- Pagination button Flowbite
+- Modal Flowbite per dettaglio utente
+
+Assicurarsi che:
+- hx-get
+- hx-target
+- hx-swap
+rimangano funzionanti
+
+-------------------------------------
+4) ADMIN
+-------------------------------------
+
+/web/templates/admin/dashboard.html
+/web/templates/admin/users.html
+/web/templates/admin/audit_logs.html
+
+Usare:
+- Card summary (stats)
+- Table Flowbite
+- Badge per ruoli (admin = red, user = blue)
+- Tabs Flowbite se presenti più sezioni
+
+-------------------------------------
+5) FLASH MESSAGES
+-------------------------------------
+
+Creare partial:
+- /web/templates/components/flash.html
+
+Usare Flowbite alert component:
+- success -> green
+- error -> red
+- warning -> yellow
+
+Includere in layout sopra {{embed}}
+
+-------------------------------------
+6) MODAL STANDARD
+-------------------------------------
+
+Creare partial riusabile:
+/web/templates/components/modal.html
+
+Markup Flowbite standard con:
+- id dinamico
+- header con titolo
+- body slot
+- footer slot opzionale
+- data-modal-toggle attributes
+
+Usare nelle pagine private.
+
+-------------------------------------
+7) ACCESSIBILITÀ
+-------------------------------------
+
+- Usare aria attributes corretti come in documentazione Flowbite
+- Non rompere keyboard interaction
+- Mantenere form method e csrf se presente
+
+-------------------------------------
+8) RESPONSIVE DESIGN
+-------------------------------------
+
+- Navbar collapse mobile
+- Table scrollable mobile
+- Forms full width mobile
+
+-------------------------------------
+9) CRITERI DI ACCETTAZIONE
+-------------------------------------
+
+- Tutte le pagine hanno layout moderno Flowbite
+- Modals funzionano
+- Dropdown funzionano
+- Navbar responsive
+- HTMX partial update continua a funzionare
+- Nessuna modifica backend richiesta
+- Nessun errore JS in console
+
+Scrivere codice pulito, leggibile, con commenti minimi.
+Non eliminare logica Go template esistente.
--- a/docs/pitch.md
+++ b/docs/pitch.md
--- a/docs/security.md
+++ b/docs/security.md
--- a/architecture.md
+++ b/architecture.md
--- a/flowbite-ui/input.css
+++ b/flowbite-ui/input.css
@@ -0,0 +1,17 @@
+@config "./tailwind.config.js";
+@source "../web/templates/**/*.{html,gohtml}";
+@source "../web/static/**/*.js";
+@source "./node_modules/flowbite/**/*.js";
+@import "tailwindcss";
+
+@layer utilities {
+  .flag-lang {
+    width: 32px;
+    height: 22px;
+  }
+
+  .flag-lang-ch {
+    width: 22px;
+    height: 22px;
+  }
+}
--- a/flowbite-ui/package-lock.json
+++ b/flowbite-ui/package-lock.json
--- a/flowbite-ui/package.json
+++ b/flowbite-ui/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "trustcontact-flowbite",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "tw:build": "npx @tailwindcss/cli -i ./input.css -o ../web/static/css/app.css --minify",
+    "tw:watch": "npx @tailwindcss/cli -i ./input.css -o ../web/static/css/app.css --watch"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.1.13",
+    "tailwindcss": "^4.1.13"
+  },
+  "dependencies": {
+    "flowbite": "^3.1.2",
+    "htmx.org": "^2.0.6"
+  }
+}
--- a/flowbite-ui/tailwind.config.js
+++ b/flowbite-ui/tailwind.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  content: [
+    "../web/templates/**/*.{html,gohtml}",
+    "../web/static/**/*.js",
+    "./node_modules/flowbite/**/*.js"
+  ],
+  theme: { extend: {} },
+  plugins: [require("flowbite/plugin")]
+};
--- a/internal/controllers/admin_controller.go
+++ b/internal/controllers/admin_controller.go
@@ -23,6 +23,8 @@ func (ac *AdminController) Dashboard(c *fiber.Ctx) error {

 	tmpl, err := template.ParseFiles(
 		"web/templates/layout.html",
+		"web/templates/admin/_navbar.html",
+		"web/templates/partials/language_dropdown.html",
 		"web/templates/public/_flash.html",
 		"web/templates/admin/dashboard.html",
 	)
--- a/internal/controllers/auth_controller.go
+++ b/internal/controllers/auth_controller.go
@@ -19,13 +19,9 @@ func NewAuthController(authService *services.AuthService) *AuthController {
 }

 func (ac *AuthController) ShowHome(c *fiber.Ctx) error {
-	if _, ok := httpmw.CurrentUserFromContext(c); ok {
-		return c.Redirect("/welcome")
-	}
-
 	return renderPublic(c, "home.html", map[string]any{
 		"Title":      "Home",
-		"NavSection": "public",
+		"NavSection": "home",
 	})
 }

@@ -145,6 +141,13 @@ func (ac *AuthController) ShowVerifyNotice(c *fiber.Ctx) error {
 	})
 }

+func (ac *AuthController) ShowForbidden(c *fiber.Ctx) error {
+	return renderPublic(c, "forbidden.html", map[string]any{
+		"Title":      "Forbidden",
+		"NavSection": "public",
+	})
+}
+
 func (ac *AuthController) ShowForgotPassword(c *fiber.Ctx) error {
 	return renderPublic(c, "forgot_password.html", map[string]any{
 		"Title":      "Forgot password",
--- a/internal/controllers/render.go
+++ b/internal/controllers/render.go
@@ -26,6 +26,8 @@ func renderPublic(c *fiber.Ctx, page string, data map[string]any) error {

 	files := []string{
 		"web/templates/layout.html",
+		"web/templates/public/_navbar.html",
+		"web/templates/partials/language_dropdown.html",
 		"web/templates/public/_flash.html",
 		filepath.Join("web/templates/public", page),
 	}
@@ -62,6 +64,8 @@ func renderPrivate(c *fiber.Ctx, page string, data map[string]any) error {

 	files := []string{
 		"web/templates/layout.html",
+		"web/templates/private/_navbar.html",
+		"web/templates/partials/language_dropdown.html",
 		"web/templates/public/_flash.html",
 		filepath.Join("web/templates/private", page),
 	}
--- a/internal/controllers/users_controller.go
+++ b/internal/controllers/users_controller.go
@@ -38,6 +38,8 @@ func (uc *UsersController) Index(c *fiber.Ctx) error {

 	tmpl, err := template.ParseFiles(
 		"web/templates/layout.html",
+		"web/templates/admin/_navbar.html",
+		"web/templates/partials/language_dropdown.html",
 		"web/templates/public/_flash.html",
 		"web/templates/admin/users/index.html",
 		"web/templates/admin/users/_table.html",
--- a/internal/http/middleware/auth.go
+++ b/internal/http/middleware/auth.go
@@ -25,7 +25,7 @@ func RequireAdmin() fiber.Handler {
 			return c.Redirect("/login")
 		}
 		if user.Role != models.RoleAdmin {
-			return c.Status(fiber.StatusForbidden).SendString("forbidden")
+			return c.Status(fiber.StatusForbidden).Redirect("/forbidden")
 		}
 		return c.Next()
 	}
--- a/internal/http/router.go
+++ b/internal/http/router.go
@@ -48,6 +48,7 @@ func RegisterRoutes(app *fiber.App, store *session.Store, database *gorm.DB, cfg
 	app.Post("/forgot-password", authController.ForgotPassword)
 	app.Get("/reset-password", authController.ShowResetPassword)
 	app.Post("/reset-password", authController.ResetPassword)
+	app.Get("/forbidden", authController.ShowForbidden)
 	app.Get("/welcome", httpmw.RequireAuth(), authController.ShowWelcome)

 	private := app.Group("/private", httpmw.RequireAuth(), httpmw.RequireAdmin())
--- a/licenses/FLOWBITE-MIT.txt
+++ b/licenses/FLOWBITE-MIT.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Themesberg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/web/static/css/app.css
+++ b/web/static/css/app.css
--- a/web/static/vendor/flags/ch.svg
+++ b/web/static/vendor/flags/ch.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+  <rect width="24" height="24" fill="#d52b1e"/>
+  <rect x="10" y="5" width="4" height="14" fill="#ffffff"/>
+  <rect x="5" y="10" width="14" height="4" fill="#ffffff"/>
+</svg>
--- a/web/static/vendor/flags/de.svg
+++ b/web/static/vendor/flags/de.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" aria-hidden="true">
+  <rect width="3" height="0.6667" x="0" y="0" fill="#000000"/>
+  <rect width="3" height="0.6667" x="0" y="0.6667" fill="#dd0000"/>
+  <rect width="3" height="0.6667" x="0" y="1.3333" fill="#ffce00"/>
+</svg>
--- a/web/static/vendor/flags/en.svg
+++ b/web/static/vendor/flags/en.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30" aria-hidden="true">
+  <clipPath id="s"><path d="M0,0 v30 h60 v-30 z"/></clipPath>
+  <clipPath id="t"><path d="M30,15 h30 v15 z v-30 h-30 z h-30 v15 z v15 h30 z"/></clipPath>
+  <g clip-path="url(#s)">
+    <path d="M0,0 v30 h60 v-30 z" fill="#012169"/>
+    <path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" stroke-width="6"/>
+    <path d="M0,0 L60,30 M60,0 L0,30" clip-path="url(#t)" stroke="#C8102E" stroke-width="4"/>
+    <path d="M30,0 v30 M0,15 h60" stroke="#fff" stroke-width="10"/>
+    <path d="M30,0 v30 M0,15 h60" stroke="#C8102E" stroke-width="6"/>
+  </g>
+</svg>
--- a/web/static/vendor/flags/en_us.svg
+++ b/web/static/vendor/flags/en_us.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 100" aria-hidden="true">
+  <rect width="190" height="100" fill="#b22234"/>
+  <g fill="#fff">
+    <rect y="7.69" width="190" height="7.69"/>
+    <rect y="23.08" width="190" height="7.69"/>
+    <rect y="38.46" width="190" height="7.69"/>
+    <rect y="53.85" width="190" height="7.69"/>
+    <rect y="69.23" width="190" height="7.69"/>
+    <rect y="84.62" width="190" height="7.69"/>
+  </g>
+  <rect width="76" height="53.85" fill="#3c3b6e"/>
+</svg>
--- a/web/static/vendor/flags/fr.svg
+++ b/web/static/vendor/flags/fr.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" aria-hidden="true">
+  <rect width="1" height="2" x="0" y="0" fill="#0055a4"/>
+  <rect width="1" height="2" x="1" y="0" fill="#ffffff"/>
+  <rect width="1" height="2" x="2" y="0" fill="#ef4135"/>
+</svg>
--- a/web/static/vendor/flags/it.svg
+++ b/web/static/vendor/flags/it.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" aria-hidden="true">
+  <rect width="1" height="2" x="0" y="0" fill="#009246"/>
+  <rect width="1" height="2" x="1" y="0" fill="#ffffff"/>
+  <rect width="1" height="2" x="2" y="0" fill="#ce2b37"/>
+</svg>
--- a/web/static/vendor/flowbite.js
+++ b/web/static/vendor/flowbite.js
--- a/web/static/vendor/htmx.min.js
+++ b/web/static/vendor/htmx.min.js
--- a/web/templates/admin/_navbar.html
+++ b/web/templates/admin/_navbar.html
@@ -0,0 +1,53 @@
+{{define "navbar"}}
+<nav class="border-b border-gray-200 bg-white">
+  <div class="mx-auto flex max-w-7xl flex-wrap items-center justify-between p-4">
+    <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
+      <span class="self-center whitespace-nowrap text-xl font-semibold">Trustcontact</span>
+    </a>
+
+    <button data-collapse-toggle="navbar-main" type="button" class="inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 md:hidden" aria-controls="navbar-main" aria-expanded="false">
+      <span class="sr-only" data-i18n="nav.open_main_menu">Apri menu principale</span>
+      <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
+      </svg>
+    </button>
+
+    <div class="hidden w-full items-center justify-between md:order-1 md:flex md:w-auto" id="navbar-main">
+      <ul class="mt-4 flex flex-col gap-2 rounded-lg border border-gray-100 bg-gray-50 p-4 text-sm font-medium md:mt-0 md:flex-row md:items-center md:gap-1 md:border-0 md:bg-transparent md:p-0">
+        <li><a href="/admin" class="block rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100">Dashboard</a></li>
+        <li><a href="/admin/users" class="block rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100" data-i18n="nav.users">Users</a></li>
+      </ul>
+
+      <div class="mt-4 flex items-center gap-3 md:mt-0 md:ms-4">
+        {{template "navbar_controls" .}}
+      </div>
+    </div>
+  </div>
+</nav>
+{{end}}
+
+{{define "navbar_controls"}}
+{{template "language_dropdown" .}}
+
+{{if .CurrentUser}}
+<div class="relative">
+  <button type="button" class="flex items-center rounded-full bg-gray-800 text-sm focus:ring-4 focus:ring-gray-300" id="user-menu-button" aria-expanded="false" data-dropdown-toggle="user-dropdown" data-dropdown-placement="bottom">
+    <span class="sr-only" data-i18n="nav.open_user_menu">Apri menu utente</span>
+    <span class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-blue-600 font-semibold text-white">
+      {{if .CurrentUser.Name}}{{printf "%.1s" .CurrentUser.Name}}{{else}}{{printf "%.1s" .CurrentUser.Email}}{{end}}
+    </span>
+  </button>
+  <div class="z-50 my-4 hidden w-56 list-none divide-y divide-gray-100 rounded-lg bg-white text-base shadow-sm" id="user-dropdown">
+    <div class="px-4 py-3">
+      <span class="block truncate text-sm text-gray-900">{{if .CurrentUser.Name}}{{.CurrentUser.Name}}{{else}}Utente{{end}}</span>
+      <span class="block truncate text-sm text-gray-500">{{.CurrentUser.Email}}</span>
+    </div>
+    <div class="py-2">
+      <form action="/logout" method="post" class="px-2">
+        <button type="submit" class="block w-full rounded-lg px-2 py-2 text-left text-sm text-red-700 hover:bg-red-50" data-i18n="nav.logout">Logout</button>
+      </form>
+    </div>
+  </div>
+</div>
+{{end}}
+{{end}}
--- a/web/templates/admin/audit_logs.html
+++ b/web/templates/admin/audit_logs.html
@@ -0,0 +1,36 @@
+{{define "content"}}
+<section class="space-y-6">
+  <h1 class="text-3xl font-bold text-gray-900" data-i18n="audit.title">Audit Logs</h1>
+
+  <div class="mb-4 border-b border-gray-200">
+    <ul class="-mb-px flex flex-wrap text-center text-sm font-medium" id="audit-tab" data-tabs-toggle="#audit-tab-content" role="tablist">
+      <li class="me-2" role="presentation">
+        <button class="inline-block rounded-t-lg border-b-2 p-4" id="activity-tab" data-tabs-target="#activity" type="button" role="tab" aria-controls="activity" aria-selected="true" data-i18n="audit.activity">Activity</button>
+      </li>
+      <li class="me-2" role="presentation">
+        <button class="inline-block rounded-t-lg border-b-2 p-4" id="security-tab" data-tabs-target="#security" type="button" role="tab" aria-controls="security" aria-selected="false" data-i18n="audit.security">Security</button>
+      </li>
+    </ul>
+  </div>
+
+  <div id="audit-tab-content">
+    <div class="hidden rounded-lg border border-gray-200 bg-white p-4 shadow-sm" id="activity" role="tabpanel" aria-labelledby="activity-tab">
+      <div class="relative overflow-x-auto">
+        <table class="w-full text-left text-sm text-gray-500">
+          <thead class="bg-gray-50 text-xs uppercase text-gray-700">
+            <tr>
+              <th class="px-6 py-3" data-i18n="audit.timestamp">Timestamp</th>
+              <th class="px-6 py-3" data-i18n="audit.actor">Actor</th>
+              <th class="px-6 py-3" data-i18n="audit.action">Action</th>
+            </tr>
+          </thead>
+          <tbody><tr class="border-b bg-white"><td class="px-6 py-4">-</td><td class="px-6 py-4">-</td><td class="px-6 py-4">-</td></tr></tbody>
+        </table>
+      </div>
+    </div>
+    <div class="hidden rounded-lg border border-gray-200 bg-white p-4 shadow-sm" id="security" role="tabpanel" aria-labelledby="security-tab">
+      <p class="text-sm text-gray-600" data-i18n="audit.placeholder">Security logs placeholder.</p>
+    </div>
+  </div>
+</section>
+{{end}}
--- a/web/templates/admin/dashboard.html
+++ b/web/templates/admin/dashboard.html
@@ -1,9 +1,29 @@
 {{define "content"}}
-<div class="space-y-3">
-  <h1 class="text-2xl font-semibold">Admin Dashboard</h1>
-  <p class="muted">Area amministrazione.</p>
-  <div class="row">
-    <a href="/admin/users" class="rounded-lg border border-slate-300 px-4 py-2 hover:bg-slate-50">Gestione utenti</a>
+<section class="space-y-6">
+  <div>
+    <h1 class="text-3xl font-bold text-gray-900" data-i18n="admin.dashboard.title">Admin Dashboard</h1>
+    <p class="text-gray-600" data-i18n="admin.dashboard.area">Area amministrazione.</p>
  </div>
-</div>
+
+  <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+    <article class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+      <p class="text-sm font-medium text-gray-500" data-i18n="admin.users_count">Utenti</p>
+      <p class="mt-2 text-3xl font-semibold text-gray-900">{{if .PageData}}{{.PageData.Total}}{{else}}-{{end}}</p>
+    </article>
+    <article class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+      <p class="text-sm font-medium text-gray-500" data-i18n="admin.current_role">Ruolo corrente</p>
+      <p class="mt-2">
+        {{if and .CurrentUser (eq .CurrentUser.Role "admin")}}
+        <span class="rounded-sm bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800" data-i18n="user.role_admin">admin</span>
+        {{else}}
+        <span class="rounded-sm bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800" data-i18n="user.role_user">user</span>
+        {{end}}
+      </p>
+    </article>
+    <article class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+      <p class="text-sm font-medium text-gray-500" data-i18n="admin.navigation">Navigazione</p>
+      <a href="/admin/users" class="mt-2 inline-flex rounded-lg bg-blue-700 px-4 py-2 text-sm font-medium text-white hover:bg-blue-800" data-i18n="admin.manage_users">Gestione utenti</a>
+    </article>
+  </div>
+</section>
 {{end}}
--- a/web/templates/admin/users.html
+++ b/web/templates/admin/users.html
@@ -0,0 +1,8 @@
+{{define "content"}}
+<section class="space-y-4">
+  <h1 class="text-3xl font-bold text-gray-900" data-i18n="users.title">Admin Users</h1>
+  <div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
+    <p class="text-gray-600" data-i18n="users.new_user_modal_placeholder">Template pagina utenti admin in stile Flowbite.</p>
+  </div>
+</section>
+{{end}}
--- a/web/templates/admin/users/_modal.html
+++ b/web/templates/admin/users/_modal.html
@@ -1,13 +1,36 @@
 {{define "users_modal"}}
-<div style="padding:16px;">
-  <h3 style="margin-top:0;">Dettaglio utente #{{.User.ID}}</h3>
-  <p><strong>Name:</strong> {{if .User.Name}}{{.User.Name}}{{else}}-{{end}}</p>
-  <p><strong>Email:</strong> {{.User.Email}}</p>
-  <p><strong>Role:</strong> {{.User.Role}}</p>
-  <p><strong>Verified:</strong> {{if .User.EmailVerified}}yes{{else}}no{{end}}</p>
-  <p><strong>Created:</strong> {{.User.CreatedAt}}</p>
-  <div class="row">
-    <button type="button" onclick="document.getElementById('userModal').removeAttribute('open')">Chiudi</button>
+<div class="grid gap-3 text-sm text-gray-700 sm:grid-cols-2">
+  <div>
+    <span class="font-semibold text-gray-900" data-i18n="table.id">ID</span>:
+    <span>{{.User.ID}}</span>
+  </div>
+  <div>
+    <span class="font-semibold text-gray-900" data-i18n="table.role">Role</span>:
+    {{if eq .User.Role "admin"}}
+    <span class="rounded-sm bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800" data-i18n="user.role_admin">admin</span>
+    {{else}}
+    <span class="rounded-sm bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800" data-i18n="user.role_user">user</span>
+    {{end}}
+  </div>
+  <div class="sm:col-span-2">
+    <span class="font-semibold text-gray-900" data-i18n="table.name">Name</span>:
+    <span>{{if .User.Name}}{{.User.Name}}{{else}}-{{end}}</span>
+  </div>
+  <div class="sm:col-span-2">
+    <span class="font-semibold text-gray-900" data-i18n="table.email">Email</span>:
+    <span>{{.User.Email}}</span>
+  </div>
+  <div>
+    <span class="font-semibold text-gray-900" data-i18n="user.verified">Verified</span>:
+    <span>{{if .User.EmailVerified}}<span data-i18n="user.yes">yes</span>{{else}}<span data-i18n="user.no">no</span>{{end}}</span>
+  </div>
+  <div>
+    <span class="font-semibold text-gray-900" data-i18n="user.created">Created</span>:
+    <span data-localize-date="{{.User.CreatedAt.Format "2006-01-02T15:04:05Z07:00"}}">{{.User.CreatedAt}}</span>
  </div>
 </div>
+
+<div class="mt-5">
+  <button type="button" class="rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-800" data-modal-hide="userModal" data-i18n="users.close">Chiudi</button>
+</div>
 {{end}}
--- a/web/templates/admin/users/_table.html
+++ b/web/templates/admin/users/_table.html
@@ -1,47 +1,53 @@
 {{define "users_table"}}
 {{ $p := .PageData }}
-<table style="width:100%;border-collapse:collapse;margin-top:16px;">
-  <thead>
-    <tr>
-      <th style="text-align:left;border-bottom:1px solid #e5e7eb;padding:8px;">
-        <a href="#" hx-get="/admin/users/table?q={{$p.Q}}&sort=id&dir={{if and (eq $p.Sort "id") (eq $p.Dir "asc")}}desc{{else}}asc{{end}}&page=1&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML">ID</a>
-      </th>
-      <th style="text-align:left;border-bottom:1px solid #e5e7eb;padding:8px;">
-        <a href="#" hx-get="/admin/users/table?q={{$p.Q}}&sort=name&dir={{if and (eq $p.Sort "name") (eq $p.Dir "asc")}}desc{{else}}asc{{end}}&page=1&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML">Name</a>
-      </th>
-      <th style="text-align:left;border-bottom:1px solid #e5e7eb;padding:8px;">
-        <a href="#" hx-get="/admin/users/table?q={{$p.Q}}&sort=email&dir={{if and (eq $p.Sort "email") (eq $p.Dir "asc")}}desc{{else}}asc{{end}}&page=1&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML">Email</a>
-      </th>
-      <th style="text-align:left;border-bottom:1px solid #e5e7eb;padding:8px;">Role</th>
-      <th style="text-align:left;border-bottom:1px solid #e5e7eb;padding:8px;">Azioni</th>
-    </tr>
-  </thead>
-  <tbody>
-    {{range $u := $p.Users}}
-    <tr>
-      <td style="border-bottom:1px solid #f1f5f9;padding:8px;">{{$u.ID}}</td>
-      <td style="border-bottom:1px solid #f1f5f9;padding:8px;">{{if $u.Name}}{{$u.Name}}{{else}}-{{end}}</td>
-      <td style="border-bottom:1px solid #f1f5f9;padding:8px;">{{$u.Email}}</td>
-      <td style="border-bottom:1px solid #f1f5f9;padding:8px;">{{$u.Role}}</td>
-      <td style="border-bottom:1px solid #f1f5f9;padding:8px;">
-        <button
-          hx-get="/admin/users/{{$u.ID}}/modal"
-          hx-target="#userModalContent"
-          hx-swap="innerHTML"
-        >Apri</button>
-      </td>
-    </tr>
-    {{else}}
-    <tr><td colspan="5" style="padding:12px;">Nessun utente trovato.</td></tr>
-    {{end}}
-  </tbody>
-</table>
+<div class="relative overflow-x-auto">
+  <table class="w-full text-left text-sm text-gray-500 rtl:text-right">
+    <thead class="bg-gray-50 text-xs uppercase text-gray-700">
+      <tr>
+        <th scope="col" class="px-6 py-3">
+          <button type="button" class="inline-flex items-center gap-1 hover:text-blue-700" hx-get="/admin/users/table?q={{$p.Q}}&sort=id&dir={{if and (eq $p.Sort "id") (eq $p.Dir "asc")}}desc{{else}}asc{{end}}&page=1&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML" data-i18n="table.id">ID</button>
+        </th>
+        <th scope="col" class="px-6 py-3">
+          <button type="button" class="inline-flex items-center gap-1 hover:text-blue-700" hx-get="/admin/users/table?q={{$p.Q}}&sort=name&dir={{if and (eq $p.Sort "name") (eq $p.Dir "asc")}}desc{{else}}asc{{end}}&page=1&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML" data-i18n="table.name">Name</button>
+        </th>
+        <th scope="col" class="px-6 py-3">
+          <button type="button" class="inline-flex items-center gap-1 hover:text-blue-700" hx-get="/admin/users/table?q={{$p.Q}}&sort=email&dir={{if and (eq $p.Sort "email") (eq $p.Dir "asc")}}desc{{else}}asc{{end}}&page=1&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML" data-i18n="table.email">Email</button>
+        </th>
+        <th scope="col" class="px-6 py-3" data-i18n="table.role">Role</th>
+        <th scope="col" class="px-6 py-3" data-i18n="users.actions">Azioni</th>
+      </tr>
+    </thead>
+    <tbody>
+      {{range $u := $p.Users}}
+      <tr class="border-b bg-white hover:bg-gray-50">
+        <td class="px-6 py-4">{{$u.ID}}</td>
+        <td class="px-6 py-4 font-medium text-gray-900">{{if $u.Name}}{{$u.Name}}{{else}}-{{end}}</td>
+        <td class="px-6 py-4">{{$u.Email}}</td>
+        <td class="px-6 py-4">
+          {{if eq $u.Role "admin"}}
+          <span class="rounded-sm bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800" data-i18n="user.role_admin">admin</span>
+          {{else}}
+          <span class="rounded-sm bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800" data-i18n="user.role_user">user</span>
+          {{end}}
+        </td>
+        <td class="px-6 py-4">
+          <button type="button" class="rounded-lg bg-blue-700 px-3 py-2 text-xs font-medium text-white hover:bg-blue-800" data-modal-target="userModal" data-modal-toggle="userModal" hx-get="/admin/users/{{$u.ID}}/modal" hx-target="#userModalContent" hx-swap="innerHTML" data-i18n="users.open">Apri</button>
+        </td>
+      </tr>
+      {{else}}
+      <tr class="bg-white">
+        <td colspan="5" class="px-6 py-4 text-center text-gray-500" data-i18n="users.none">Nessun utente trovato.</td>
+      </tr>
+      {{end}}
+    </tbody>
+  </table>
+</div>

-<div class="row" style="margin-top:12px;align-items:center;justify-content:space-between;">
-  <div class="muted">Totale: {{$p.Total}} utenti. Pagina {{$p.Page}}{{if gt $p.TotalPages 0}} / {{$p.TotalPages}}{{end}}</div>
-  <div class="row">
-    <button {{if not $p.HasPrev}}disabled{{end}} hx-get="/admin/users/table?q={{$p.Q}}&sort={{$p.Sort}}&dir={{$p.Dir}}&page={{$p.PrevPage}}&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML">Prev</button>
-    <button {{if not $p.HasNext}}disabled{{end}} hx-get="/admin/users/table?q={{$p.Q}}&sort={{$p.Sort}}&dir={{$p.Dir}}&page={{$p.NextPage}}&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML">Next</button>
+<div class="mt-4 flex flex-wrap items-center justify-between gap-3">
+  <div class="text-sm text-gray-600"><span data-i18n="users.total">Totale</span>: {{$p.Total}} <span data-i18n="users.users_label">utenti</span>. <span data-i18n="users.page">Pagina</span> {{$p.Page}}{{if gt $p.TotalPages 0}} / {{$p.TotalPages}}{{end}}</div>
+  <div class="inline-flex gap-2">
+    <button type="button" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50" {{if not $p.HasPrev}}disabled{{end}} hx-get="/admin/users/table?q={{$p.Q}}&sort={{$p.Sort}}&dir={{$p.Dir}}&page={{$p.PrevPage}}&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML" data-i18n="users.prev">Prev</button>
+    <button type="button" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50" {{if not $p.HasNext}}disabled{{end}} hx-get="/admin/users/table?q={{$p.Q}}&sort={{$p.Sort}}&dir={{$p.Dir}}&page={{$p.NextPage}}&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML" data-i18n="users.next">Next</button>
  </div>
 </div>
 {{end}}
--- a/web/templates/admin/users/index.html
+++ b/web/templates/admin/users/index.html
@@ -1,36 +1,74 @@
 {{define "content"}}
-<h1>Users</h1>
-<p class="muted">Ricerca, ordinamento e paging server-side via HTMX.</p>
+<section class="space-y-6">
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <div>
+      <h1 class="text-3xl font-bold text-gray-900" data-i18n="users.title">Users</h1>
+      <p class="text-gray-600" data-i18n="users.subtitle">Ricerca, ordinamento e paging server-side via HTMX.</p>
+    </div>
+    <button type="button" data-modal-target="newUserModal" data-modal-toggle="newUserModal" class="inline-flex items-center rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300" data-i18n="users.new_user">
+      Nuovo Utente
+    </button>
+  </div>

-<form id="usersFilters" class="row" hx-get="/admin/users/table" hx-target="#usersTableContainer" hx-swap="innerHTML">
-  <input type="text" name="q" placeholder="Cerca nome o email" value="{{.PageData.Q}}">
-  <input type="number" name="pageSize" min="1" max="100" value="{{.PageData.PageSize}}" style="max-width:120px;">
-  <input type="hidden" name="sort" value="{{.PageData.Sort}}">
-  <input type="hidden" name="dir" value="{{.PageData.Dir}}">
-  <input type="hidden" name="page" value="1">
-  <button type="submit">Cerca</button>
-</form>
+  <form id="usersFilters" class="grid gap-3 rounded-lg border border-gray-200 bg-white p-4 shadow-sm md:grid-cols-4" hx-get="/admin/users/table" hx-target="#usersTableContainer" hx-swap="innerHTML">
+    <div class="md:col-span-2">
+      <label for="users-q" class="mb-2 block text-sm font-medium text-gray-900" data-i18n="users.search">Search</label>
+      <input id="users-q" type="text" name="q" placeholder="Cerca nome o email" data-i18n-placeholder="users.search_placeholder" value="{{.PageData.Q}}" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500">
+    </div>
+    <div>
+      <label for="users-size" class="mb-2 block text-sm font-medium text-gray-900" data-i18n="users.page_size">Page size</label>
+      <input id="users-size" type="number" name="pageSize" min="1" max="100" value="{{.PageData.PageSize}}" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500">
+    </div>
+    <div class="flex items-end">
+      <button type="submit" class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300" data-i18n="users.search_button">Cerca</button>
+    </div>
+    <input type="hidden" name="sort" value="{{.PageData.Sort}}">
+    <input type="hidden" name="dir" value="{{.PageData.Dir}}">
+    <input type="hidden" name="page" value="1">
+  </form>

-<div id="usersTableContainer" hx-get="/admin/users/table?q={{.PageData.Q}}&sort={{.PageData.Sort}}&dir={{.PageData.Dir}}&page={{.PageData.Page}}&pageSize={{.PageData.PageSize}}" hx-trigger="load" hx-swap="innerHTML">
-  {{template "users_table" .}}
+  <div id="usersTableContainer" class="rounded-lg border border-gray-200 bg-white p-2 shadow-sm md:p-4" hx-get="/admin/users/table?q={{.PageData.Q}}&sort={{.PageData.Sort}}&dir={{.PageData.Dir}}&page={{.PageData.Page}}&pageSize={{.PageData.PageSize}}" hx-trigger="load" hx-swap="innerHTML">
+    {{template "users_table" .}}
+  </div>
+</section>
+
+<div id="userModal" tabindex="-1" aria-hidden="true" class="fixed left-0 right-0 top-0 z-50 hidden h-[calc(100%-1rem)] max-h-full w-full items-center justify-center overflow-y-auto overflow-x-hidden p-4 md:inset-0">
+  <div class="relative max-h-full w-full max-w-2xl">
+    <div class="relative rounded-lg bg-white shadow-sm">
+      <div class="flex items-start justify-between rounded-t border-b p-4 md:p-5">
+        <h3 class="text-xl font-semibold text-gray-900" data-i18n="users.user_detail">Dettaglio utente</h3>
+        <button type="button" class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900" data-modal-hide="userModal" aria-label="Close modal">
+          <span class="sr-only" data-i18n="users.close">Close modal</span>
+          <svg class="h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+          </svg>
+        </button>
+      </div>
+      <div id="userModalContent" class="space-y-4 p-4 md:p-5"></div>
+    </div>
+  </div>
 </div>

-<ui-modal id="userModal" title="Dettaglio utente">
-  <div
-    id="userModalContent"
-    hx-on:htmx:after-swap="document.getElementById('userModal').setAttribute('open','')"
-  ></div>
-</ui-modal>
-
-<script>
-  (function () {
-    var modal = document.getElementById('userModal');
-    var content = document.getElementById('userModalContent');
-    if (!modal || !content || modal.dataset.closeBound === '1') return;
-    modal.dataset.closeBound = '1';
-    modal.addEventListener('ui:close', function () {
-      content.innerHTML = '';
-    });
-  })();
-</script>
+<div id="newUserModal" tabindex="-1" aria-hidden="true" class="fixed left-0 right-0 top-0 z-50 hidden h-[calc(100%-1rem)] max-h-full w-full items-center justify-center overflow-y-auto overflow-x-hidden p-4 md:inset-0">
+  <div class="relative max-h-full w-full max-w-xl">
+    <div class="relative rounded-lg bg-white shadow-sm">
+      <div class="flex items-start justify-between rounded-t border-b p-4 md:p-5">
+        <h3 class="text-xl font-semibold text-gray-900" data-i18n="users.new_user_modal_title">Nuovo utente</h3>
+        <button type="button" class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900" data-modal-hide="newUserModal" aria-label="Close modal">
+          <span class="sr-only" data-i18n="users.close">Close modal</span>
+          <svg class="h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+          </svg>
+        </button>
+      </div>
+      <div class="space-y-4 p-4 md:p-5">
+        <p class="text-sm text-gray-600" data-i18n="users.new_user_modal_placeholder">Placeholder UI Flowbite. La creazione utente può essere collegata a una route backend quando disponibile.</p>
+        <div>
+          <label for="new-user-email" class="mb-2 block text-sm font-medium text-gray-900" data-i18n="form.email">Email</label>
+          <input id="new-user-email" type="email" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900" placeholder="name@company.com" disabled>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 {{end}}
--- a/web/templates/components/collapse.html
+++ b/web/templates/components/collapse.html
@@ -0,0 +1,13 @@
+{{define "flowbite_collapse"}}
+<button data-collapse-toggle="collapseExample" type="button" class="flex w-full items-center justify-between rounded-lg bg-gray-100 px-5 py-2.5 text-left text-sm font-medium text-gray-500 hover:bg-gray-200" aria-expanded="false" aria-controls="collapseExample">
+  <span>Toggle collapse</span>
+  <svg data-accordion-icon class="h-3 w-3 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
+  </svg>
+</button>
+<div id="collapseExample" class="hidden">
+  <div class="rounded-b-lg border border-gray-200 p-5">
+    <p class="text-sm text-gray-500">Collapsed content.</p>
+  </div>
+</div>
+{{end}}
--- a/web/templates/components/dropdown.html
+++ b/web/templates/components/dropdown.html
@@ -0,0 +1,16 @@
+{{define "flowbite_dropdown"}}
+<button id="dropdownDefaultButton" data-dropdown-toggle="dropdown" class="inline-flex items-center rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800" type="button">
+  Dropdown
+  <svg class="ms-3 h-2.5 w-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
+  </svg>
+</button>
+
+<div id="dropdown" class="z-10 hidden w-44 divide-y divide-gray-100 rounded-lg bg-white shadow-sm">
+  <ul class="py-2 text-sm text-gray-700" aria-labelledby="dropdownDefaultButton">
+    <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">Dashboard</a></li>
+    <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">Settings</a></li>
+    <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">Sign out</a></li>
+  </ul>
+</div>
+{{end}}
--- a/web/templates/components/flash.html
+++ b/web/templates/components/flash.html
@@ -0,0 +1,17 @@
+{{define "flowbite_flash"}}
+{{if .FlashSuccess}}
+<div class="mb-4 flex items-center rounded-lg border border-green-200 bg-green-50 p-4 text-green-800" role="alert">
+  <span class="text-sm font-medium">{{.FlashSuccess}}</span>
+</div>
+{{end}}
+{{if .FlashError}}
+<div class="mb-4 flex items-center rounded-lg border border-red-200 bg-red-50 p-4 text-red-800" role="alert">
+  <span class="text-sm font-medium">{{.FlashError}}</span>
+</div>
+{{end}}
+{{if .FlashWarning}}
+<div class="mb-4 flex items-center rounded-lg border border-yellow-200 bg-yellow-50 p-4 text-yellow-800" role="alert">
+  <span class="text-sm font-medium">{{.FlashWarning}}</span>
+</div>
+{{end}}
+{{end}}
--- a/web/templates/components/modal.html
+++ b/web/templates/components/modal.html
@@ -0,0 +1,25 @@
+{{define "flowbite_modal"}}
+<div id="{{.ModalID}}" tabindex="-1" aria-hidden="true" class="fixed left-0 right-0 top-0 z-50 hidden h-[calc(100%-1rem)] max-h-full w-full items-center justify-center overflow-y-auto overflow-x-hidden p-4 md:inset-0">
+  <div class="relative max-h-full w-full max-w-2xl">
+    <div class="relative rounded-lg bg-white shadow-sm">
+      <div class="flex items-start justify-between rounded-t border-b p-4 md:p-5">
+        <h3 class="text-xl font-semibold text-gray-900">{{.ModalTitle}}</h3>
+        <button type="button" class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900" data-modal-hide="{{.ModalID}}" aria-label="Close modal">
+          <span class="sr-only">Close modal</span>
+          <svg class="h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+          </svg>
+        </button>
+      </div>
+      <div class="space-y-4 p-4 md:p-5">
+        {{template .ModalBodyTemplate .}}
+      </div>
+      {{if .ModalFooterTemplate}}
+      <div class="flex items-center rounded-b border-t border-gray-200 p-4 md:p-5">
+        {{template .ModalFooterTemplate .}}
+      </div>
+      {{end}}
+    </div>
+  </div>
+</div>
+{{end}}
--- a/web/templates/components/navbar.html
+++ b/web/templates/components/navbar.html
@@ -0,0 +1,21 @@
+{{define "flowbite_navbar"}}
+<nav class="border-gray-200 bg-white">
+  <div class="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4">
+    <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse">
+      <span class="self-center whitespace-nowrap text-2xl font-semibold">Trustcontact</span>
+    </a>
+    <button data-collapse-toggle="navbar-default" type="button" class="inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 md:hidden" aria-controls="navbar-default" aria-expanded="false">
+      <span class="sr-only">Open main menu</span>
+      <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
+      </svg>
+    </button>
+    <div class="hidden w-full md:block md:w-auto" id="navbar-default">
+      <ul class="mt-4 flex flex-col rounded-lg border border-gray-100 bg-gray-50 p-4 font-medium md:mt-0 md:flex-row md:space-x-8 md:border-0 md:bg-white md:p-0 rtl:space-x-reverse">
+        <li><a href="#" class="block rounded-sm bg-blue-700 px-3 py-2 text-white md:bg-transparent md:p-0 md:text-blue-700" aria-current="page">Home</a></li>
+        <li><a href="#" class="block rounded-sm px-3 py-2 text-gray-900 hover:bg-gray-100 md:p-0 md:hover:bg-transparent md:hover:text-blue-700">About</a></li>
+      </ul>
+    </div>
+  </div>
+</nav>
+{{end}}
--- a/web/templates/components/tabs.html
+++ b/web/templates/components/tabs.html
@@ -0,0 +1,20 @@
+{{define "flowbite_tabs"}}
+<div class="mb-4 border-b border-gray-200">
+  <ul class="-mb-px flex flex-wrap text-center text-sm font-medium" id="default-tab" data-tabs-toggle="#default-tab-content" role="tablist">
+    <li class="me-2" role="presentation">
+      <button class="inline-block rounded-t-lg border-b-2 p-4" id="profile-tab" data-tabs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
+    </li>
+    <li class="me-2" role="presentation">
+      <button class="inline-block rounded-t-lg border-b-2 p-4" id="dashboard-tab" data-tabs-target="#dashboard" type="button" role="tab" aria-controls="dashboard" aria-selected="false">Dashboard</button>
+    </li>
+  </ul>
+</div>
+<div id="default-tab-content">
+  <div class="hidden rounded-lg bg-gray-50 p-4" id="profile" role="tabpanel" aria-labelledby="profile-tab">
+    <p class="text-sm text-gray-500">Profile tab content.</p>
+  </div>
+  <div class="hidden rounded-lg bg-gray-50 p-4" id="dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
+    <p class="text-sm text-gray-500">Dashboard tab content.</p>
+  </div>
+</div>
+{{end}}
--- a/web/templates/layout.html
+++ b/web/templates/layout.html
@@ -5,38 +5,212 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{.Title}}</title>
    <link rel="stylesheet" href="/static/css/app.css?v={{.BuildHash}}">
-    <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>
+    <script src="/static/vendor/htmx.min.js"></script>
+    <script src="/static/vendor/flowbite.js"></script>
  </head>
-  <body>
-    <nav class="relative flex items-center justify-between border-b border-gray-300 bg-white px-6 py-4 transition-all md:px-16 lg:px-24 xl:px-32">
-      <a href="/" class="text-lg font-semibold text-slate-800">Trustcontact</a>
+  <body class="flex min-h-screen flex-col bg-gray-50 text-gray-900 antialiased">
+    {{template "navbar" .}}

-      <div class="hidden items-center gap-8 sm:flex">
-        {{if and .CurrentUser (eq .CurrentUser.Role "admin")}}
-        <a href="/admin" class="text-slate-700 hover:text-slate-900 {{if eq .NavSection "admin"}}font-semibold{{end}}">Admin</a>
-        {{end}}
-
-        {{if .CurrentUser}}
-        <form action="/logout" method="post">
-          <button type="submit" class="cursor-pointer rounded-full bg-indigo-500 px-8 py-2 text-white transition hover:bg-indigo-600">
-            Logout
-          </button>
-        </form>
-        {{else}}
-        <a href="/login" class="cursor-pointer rounded-full bg-indigo-500 px-8 py-2 text-white transition hover:bg-indigo-600">
-          Login
-        </a>
-        {{end}}
-      </div>
-    </nav>
-
-    <div class="mx-auto my-5 max-w-5xl px-4">
+    <main class="mx-auto w-full max-w-7xl flex-1 p-6">
      {{template "_flash.html" .}}
-      <div class="rounded-xl bg-white p-5 shadow-sm">
-        {{template "content" .}}
-      </div>
-    </div>
+      {{template "content" .}}
+    </main>
+
+    <footer class="border-t border-gray-200 bg-white">
+      <div class="mx-auto max-w-7xl px-6 py-4 text-sm text-gray-500">Trustcontact</div>
+    </footer>
+
+    <script>
+      (function () {
+        var DEFAULT_LANG = 'it';
+        var STORAGE_KEY = 'tc_lang';
+        var dictionaries = {
+          it: {
+            'nav.open_main_menu': 'Apri menu principale', 'nav.open_user_menu': 'Apri menu utente', 'nav.dashboard': 'Dashboard', 'nav.users': 'Users', 'nav.admin': 'Admin', 'nav.login': 'Login', 'nav.signup': 'Signup', 'nav.logout': 'Logout',
+            'home.subtitle': 'Accedi o registrati per continuare.', 'home.login': 'Accedi', 'home.signup': 'Registrati',
+            'login.title': 'Login', 'login.subtitle': 'Accedi al tuo account.', 'form.email': 'Email', 'form.password': 'Password', 'login.submit': 'Entra', 'login.forgot': 'Password dimenticata?', 'login.create_account': 'Crea account',
+            'signup.title': 'Registrazione', 'signup.subtitle': 'Crea il tuo account.', 'signup.submit': 'Registrati', 'signup.has_account': 'Hai già un account?', 'signup.login': 'Accedi',
+            'forgot.title': 'Password dimenticata', 'forgot.subtitle': 'Inserisci la tua email per ricevere il link di reset.', 'forgot.submit': 'Invia link reset', 'forgot.back_login': 'Torna al login',
+            'reset.title': 'Reset password', 'reset.subtitle': 'Imposta una nuova password.', 'reset.new_password': 'Nuova password', 'reset.submit': 'Aggiorna password', 'reset.invalid_token': 'Token mancante o non valido.',
+            'verify.title': 'Verifica email', 'verify.p1': 'Controlla la casella di posta e apri il link di verifica ricevuto.', 'verify.p2': 'Se il link è scaduto, ripeti la registrazione o contatta supporto.', 'verify.go_login': 'Vai al login',
+            'welcome.title': 'Dashboard', 'welcome.back_prefix': 'Bentornato', 'welcome.generic': 'Benvenuto.', 'welcome.quick_links': 'Link rapidi',
+            'admin.dashboard.title': 'Admin Dashboard', 'admin.dashboard.area': 'Area amministrazione.', 'admin.users_count': 'Utenti', 'admin.current_role': 'Ruolo corrente', 'admin.navigation': 'Navigazione', 'admin.manage_users': 'Gestione utenti',
+            'users.title': 'Users', 'users.subtitle': 'Ricerca, ordinamento e paging server-side via HTMX.', 'users.new_user': 'Nuovo Utente', 'users.search': 'Search', 'users.search_placeholder': 'Cerca nome o email', 'users.page_size': 'Page size', 'users.search_button': 'Cerca', 'users.user_detail': 'Dettaglio utente', 'users.actions': 'Azioni', 'users.open': 'Apri', 'users.none': 'Nessun utente trovato.', 'users.total': 'Totale', 'users.users_label': 'utenti', 'users.page': 'Pagina', 'users.prev': 'Prev', 'users.next': 'Next', 'users.close': 'Chiudi',
+            'users.new_user_modal_title': 'Nuovo utente', 'users.new_user_modal_placeholder': 'Placeholder UI Flowbite. La creazione utente può essere collegata a una route backend quando disponibile.',
+            'table.id': 'ID', 'table.name': 'Name', 'table.email': 'Email', 'table.role': 'Role', 'user.role_admin': 'admin', 'user.role_user': 'user', 'user.verified': 'Verificato', 'user.created': 'Creato', 'user.yes': 'sì', 'user.no': 'no',
+            'audit.title': 'Audit Logs', 'audit.activity': 'Attività', 'audit.security': 'Sicurezza', 'audit.timestamp': 'Timestamp', 'audit.actor': 'Attore', 'audit.action': 'Azione', 'audit.placeholder': 'Placeholder log di sicurezza.'
+          },
+          en: {
+            'nav.open_main_menu': 'Open main menu', 'nav.open_user_menu': 'Open user menu', 'nav.dashboard': 'Dashboard', 'nav.users': 'Users', 'nav.admin': 'Admin', 'nav.login': 'Login', 'nav.signup': 'Signup', 'nav.logout': 'Logout',
+            'home.subtitle': 'Login or sign up to continue.', 'home.login': 'Login', 'home.signup': 'Sign up',
+            'login.title': 'Login', 'login.subtitle': 'Access your account.', 'form.email': 'Email', 'form.password': 'Password', 'login.submit': 'Sign in', 'login.forgot': 'Forgot password?', 'login.create_account': 'Create account',
+            'signup.title': 'Signup', 'signup.subtitle': 'Create your account.', 'signup.submit': 'Sign up', 'signup.has_account': 'Already have an account?', 'signup.login': 'Login',
+            'forgot.title': 'Forgot Password', 'forgot.subtitle': 'Enter your email to receive a reset link.', 'forgot.submit': 'Send reset link', 'forgot.back_login': 'Back to login',
+            'reset.title': 'Reset Password', 'reset.subtitle': 'Set a new password.', 'reset.new_password': 'New password', 'reset.submit': 'Update password', 'reset.invalid_token': 'Missing or invalid token.',
+            'verify.title': 'Verify email', 'verify.p1': 'Check your inbox and open the verification link.', 'verify.p2': 'If the link expired, sign up again or contact support.', 'verify.go_login': 'Go to login',
+            'welcome.title': 'Dashboard', 'welcome.back_prefix': 'Welcome back', 'welcome.generic': 'Welcome.', 'welcome.quick_links': 'Quick links',
+            'admin.dashboard.title': 'Admin Dashboard', 'admin.dashboard.area': 'Administration area.', 'admin.users_count': 'Users', 'admin.current_role': 'Current role', 'admin.navigation': 'Navigation', 'admin.manage_users': 'Manage users',
+            'users.title': 'Users', 'users.subtitle': 'Search, sorting and server-side paging via HTMX.', 'users.new_user': 'New user', 'users.search': 'Search', 'users.search_placeholder': 'Search by name or email', 'users.page_size': 'Page size', 'users.search_button': 'Search', 'users.user_detail': 'User details', 'users.actions': 'Actions', 'users.open': 'Open', 'users.none': 'No users found.', 'users.total': 'Total', 'users.users_label': 'users', 'users.page': 'Page', 'users.prev': 'Prev', 'users.next': 'Next', 'users.close': 'Close',
+            'users.new_user_modal_title': 'New user', 'users.new_user_modal_placeholder': 'Flowbite placeholder UI. Connect creation to backend route when available.',
+            'table.id': 'ID', 'table.name': 'Name', 'table.email': 'Email', 'table.role': 'Role', 'user.role_admin': 'admin', 'user.role_user': 'user', 'user.verified': 'Verified', 'user.created': 'Created', 'user.yes': 'yes', 'user.no': 'no',
+            'audit.title': 'Audit Logs', 'audit.activity': 'Activity', 'audit.security': 'Security', 'audit.timestamp': 'Timestamp', 'audit.actor': 'Actor', 'audit.action': 'Action', 'audit.placeholder': 'Security logs placeholder.'
+          },
+          en_us: {},
+          de: {
+            'nav.open_main_menu': 'Hauptmenü öffnen', 'nav.open_user_menu': 'Benutzermenü öffnen', 'nav.dashboard': 'Dashboard', 'nav.users': 'Benutzer', 'nav.admin': 'Admin', 'nav.login': 'Login', 'nav.signup': 'Registrieren', 'nav.logout': 'Abmelden',
+            'home.subtitle': 'Melden Sie sich an oder registrieren Sie sich, um fortzufahren.', 'home.login': 'Anmelden', 'home.signup': 'Registrieren', 'login.title': 'Login', 'login.subtitle': 'Melden Sie sich in Ihrem Konto an.', 'form.email': 'E-Mail', 'form.password': 'Passwort', 'login.submit': 'Anmelden', 'login.forgot': 'Passwort vergessen?', 'login.create_account': 'Konto erstellen',
+            'signup.title': 'Registrierung', 'signup.subtitle': 'Erstellen Sie Ihr Konto.', 'signup.submit': 'Registrieren', 'signup.has_account': 'Haben Sie bereits ein Konto?', 'signup.login': 'Anmelden',
+            'forgot.title': 'Passwort vergessen', 'forgot.subtitle': 'Geben Sie Ihre E-Mail ein, um einen Reset-Link zu erhalten.', 'forgot.submit': 'Reset-Link senden', 'forgot.back_login': 'Zurück zum Login',
+            'reset.title': 'Passwort zurücksetzen', 'reset.subtitle': 'Legen Sie ein neues Passwort fest.', 'reset.new_password': 'Neues Passwort', 'reset.submit': 'Passwort aktualisieren', 'reset.invalid_token': 'Token fehlt oder ist ungültig.',
+            'verify.title': 'E-Mail verifizieren', 'verify.p1': 'Öffnen Sie die Verifizierungs-E-Mail in Ihrem Posteingang.', 'verify.p2': 'Wenn der Link abgelaufen ist, registrieren Sie sich erneut oder kontaktieren Sie den Support.', 'verify.go_login': 'Zum Login',
+            'welcome.title': 'Dashboard', 'welcome.back_prefix': 'Willkommen zurück', 'welcome.generic': 'Willkommen.', 'welcome.quick_links': 'Schnelllinks',
+            'admin.dashboard.title': 'Admin-Dashboard', 'admin.dashboard.area': 'Administrationsbereich.', 'admin.users_count': 'Benutzer', 'admin.current_role': 'Aktuelle Rolle', 'admin.navigation': 'Navigation', 'admin.manage_users': 'Benutzer verwalten',
+            'users.title': 'Benutzer', 'users.subtitle': 'Suche, Sortierung und serverseitiges Paging via HTMX.', 'users.new_user': 'Neuer Benutzer', 'users.search': 'Suche', 'users.search_placeholder': 'Nach Name oder E-Mail suchen', 'users.page_size': 'Seitengröße', 'users.search_button': 'Suchen', 'users.user_detail': 'Benutzerdetails', 'users.actions': 'Aktionen', 'users.open': 'Öffnen', 'users.none': 'Keine Benutzer gefunden.', 'users.total': 'Gesamt', 'users.users_label': 'Benutzer', 'users.page': 'Seite', 'users.prev': 'Zurück', 'users.next': 'Weiter', 'users.close': 'Schließen',
+            'users.new_user_modal_title': 'Neuer Benutzer', 'users.new_user_modal_placeholder': 'Flowbite-Placeholder-UI. Bei Bedarf mit Backend-Route verbinden.',
+            'table.id': 'ID', 'table.name': 'Name', 'table.email': 'E-Mail', 'table.role': 'Rolle', 'user.role_admin': 'admin', 'user.role_user': 'user', 'user.verified': 'Verifiziert', 'user.created': 'Erstellt', 'user.yes': 'ja', 'user.no': 'nein',
+            'audit.title': 'Audit-Logs', 'audit.activity': 'Aktivität', 'audit.security': 'Sicherheit', 'audit.timestamp': 'Zeitstempel', 'audit.actor': 'Akteur', 'audit.action': 'Aktion', 'audit.placeholder': 'Platzhalter für Sicherheitsprotokolle.'
+          },
+          fr: {
+            'nav.open_main_menu': 'Ouvrir le menu principal', 'nav.open_user_menu': 'Ouvrir le menu utilisateur', 'nav.dashboard': 'Tableau de bord', 'nav.users': 'Utilisateurs', 'nav.admin': 'Admin', 'nav.login': 'Connexion', 'nav.signup': 'Inscription', 'nav.logout': 'Déconnexion',
+            'home.subtitle': 'Connectez-vous ou inscrivez-vous pour continuer.', 'home.login': 'Connexion', 'home.signup': 'Inscription', 'login.title': 'Connexion', 'login.subtitle': 'Accédez à votre compte.', 'form.email': 'Email', 'form.password': 'Mot de passe', 'login.submit': 'Se connecter', 'login.forgot': 'Mot de passe oublié ?', 'login.create_account': 'Créer un compte',
+            'signup.title': 'Inscription', 'signup.subtitle': 'Créez votre compte.', 'signup.submit': 'S’inscrire', 'signup.has_account': 'Vous avez déjà un compte ?', 'signup.login': 'Connexion',
+            'forgot.title': 'Mot de passe oublié', 'forgot.subtitle': 'Entrez votre email pour recevoir un lien de réinitialisation.', 'forgot.submit': 'Envoyer le lien', 'forgot.back_login': 'Retour à la connexion',
+            'reset.title': 'Réinitialiser le mot de passe', 'reset.subtitle': 'Définissez un nouveau mot de passe.', 'reset.new_password': 'Nouveau mot de passe', 'reset.submit': 'Mettre à jour', 'reset.invalid_token': 'Jeton manquant ou invalide.',
+            'verify.title': 'Vérifier l’email', 'verify.p1': 'Vérifiez votre boîte mail et ouvrez le lien de vérification.', 'verify.p2': 'Si le lien a expiré, réinscrivez-vous ou contactez le support.', 'verify.go_login': 'Aller à la connexion',
+            'welcome.title': 'Tableau de bord', 'welcome.back_prefix': 'Bon retour', 'welcome.generic': 'Bienvenue.', 'welcome.quick_links': 'Liens rapides',
+            'admin.dashboard.title': 'Tableau de bord admin', 'admin.dashboard.area': 'Zone d’administration.', 'admin.users_count': 'Utilisateurs', 'admin.current_role': 'Rôle actuel', 'admin.navigation': 'Navigation', 'admin.manage_users': 'Gérer les utilisateurs',
+            'users.title': 'Utilisateurs', 'users.subtitle': 'Recherche, tri et pagination côté serveur via HTMX.', 'users.new_user': 'Nouvel utilisateur', 'users.search': 'Recherche', 'users.search_placeholder': 'Rechercher par nom ou email', 'users.page_size': 'Taille de page', 'users.search_button': 'Rechercher', 'users.user_detail': 'Détails utilisateur', 'users.actions': 'Actions', 'users.open': 'Ouvrir', 'users.none': 'Aucun utilisateur trouvé.', 'users.total': 'Total', 'users.users_label': 'utilisateurs', 'users.page': 'Page', 'users.prev': 'Préc.', 'users.next': 'Suiv.', 'users.close': 'Fermer',
+            'users.new_user_modal_title': 'Nouvel utilisateur', 'users.new_user_modal_placeholder': 'UI Flowbite placeholder. Connecter à une route backend si nécessaire.',
+            'table.id': 'ID', 'table.name': 'Nom', 'table.email': 'Email', 'table.role': 'Rôle', 'user.role_admin': 'admin', 'user.role_user': 'user', 'user.verified': 'Vérifié', 'user.created': 'Créé', 'user.yes': 'oui', 'user.no': 'non',
+            'audit.title': 'Journaux d’audit', 'audit.activity': 'Activité', 'audit.security': 'Sécurité', 'audit.timestamp': 'Horodatage', 'audit.actor': 'Acteur', 'audit.action': 'Action', 'audit.placeholder': 'Espace réservé des journaux de sécurité.'
+          }
+        };
+
+        dictionaries.en_us = Object.assign({}, dictionaries.en);
+        dictionaries.de_ch = Object.assign({}, dictionaries.de);
+        dictionaries.fr_ch = Object.assign({}, dictionaries.fr);
+
+        function getLang() {
+          var stored = localStorage.getItem(STORAGE_KEY);
+          return dictionaries[stored] ? stored : DEFAULT_LANG;
+        }
+
+        function t(key, lang) {
+          if (dictionaries[lang] && dictionaries[lang][key]) return dictionaries[lang][key];
+          if (dictionaries.it[key]) return dictionaries.it[key];
+          return key;
+        }
+
+        function localeFromLang(lang) {
+          var localeMap = {
+            it: 'it-IT',
+            en: 'en-GB',
+            en_us: 'en-US',
+            de: 'de-DE',
+            fr: 'fr-FR',
+            de_ch: 'de-CH',
+            fr_ch: 'fr-CH'
+          };
+          return localeMap[lang] || 'it-IT';
+        }
+
+        function localizeDate(rawValue, lang) {
+          if (!rawValue) return '';
+          var date = new Date(rawValue);
+          if (isNaN(date.getTime())) return rawValue;
+          return new Intl.DateTimeFormat(localeFromLang(lang), {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit'
+          }).format(date);
+        }
+
+        function applyTranslations(root) {
+          var lang = getLang();
+          document.documentElement.setAttribute('lang', lang.replace('_', '-'));
+          var label = document.getElementById('lang-current');
+          var flag = document.getElementById('lang-flag');
+          if (label) {
+            var labels = {
+              it: 'Italiano',
+              en: 'English',
+              en_us: 'English USA',
+              de: 'Deutsch',
+              fr: 'Français',
+              de_ch: 'Deutsch CH',
+              fr_ch: 'Français CH'
+            };
+            label.textContent = labels[lang] || 'Italiano';
+          }
+          if (flag) {
+            var flags = {
+              it: '/static/vendor/flags/it.svg',
+              en: '/static/vendor/flags/en.svg',
+              en_us: '/static/vendor/flags/en_us.svg',
+              de: '/static/vendor/flags/de.svg',
+              fr: '/static/vendor/flags/fr.svg',
+              de_ch: '/static/vendor/flags/ch.svg',
+              fr_ch: '/static/vendor/flags/ch.svg'
+            };
+            var labels = {
+              it: 'Italiano',
+              en: 'English',
+              en_us: 'English USA',
+              de: 'Deutsch',
+              fr: 'Français',
+              de_ch: 'Deutsch CH',
+              fr_ch: 'Français CH'
+            };
+            flag.src = flags[lang] || '/static/vendor/flags/it.svg';
+            flag.alt = labels[lang] || 'Lingua';
+            if (lang === 'de_ch' || lang === 'fr_ch') {
+              flag.style.width = '32px';
+              flag.style.height = '32px';
+            } else {
+              flag.style.width = '48px';
+              flag.style.height = '32px';
+            }
+          }
+
+          (root || document).querySelectorAll('[data-i18n]').forEach(function (el) {
+            el.textContent = t(el.getAttribute('data-i18n'), lang);
+          });
+
+          (root || document).querySelectorAll('[data-i18n-placeholder]').forEach(function (el) {
+            el.setAttribute('placeholder', t(el.getAttribute('data-i18n-placeholder'), lang));
+          });
+
+          (root || document).querySelectorAll('[data-localize-date]').forEach(function (el) {
+            var rawValue = el.getAttribute('data-localize-date');
+            el.textContent = localizeDate(rawValue, lang);
+          });
+        }
+
+        document.querySelectorAll('[data-lang-select]').forEach(function (btn) {
+          btn.addEventListener('click', function () {
+            localStorage.setItem(STORAGE_KEY, btn.getAttribute('data-lang-select'));
+            applyTranslations(document);
+            var dropdownInstance = window.FlowbiteInstances && window.FlowbiteInstances.getInstance
+              ? window.FlowbiteInstances.getInstance('Dropdown', 'lang-dropdown')
+              : null;
+            if (dropdownInstance && typeof dropdownInstance.hide === 'function') {
+              dropdownInstance.hide();
+              return;
+            }
+            var langButton = document.getElementById('lang-menu-button');
+            var langDropdown = document.getElementById('lang-dropdown');
+            if (langDropdown) langDropdown.classList.add('hidden');
+            if (langButton) langButton.setAttribute('aria-expanded', 'false');
+          });
+        });
+
+        applyTranslations(document);
+        document.body.addEventListener('htmx:afterSwap', function (evt) {
+          applyTranslations(evt.target || document);
+        });
+      })();
+    </script>
  </body>
 </html>
--- a/web/templates/partials/language_dropdown.html
+++ b/web/templates/partials/language_dropdown.html
@@ -0,0 +1,19 @@
+{{define "language_dropdown"}}
+<div class="relative flex items-center gap-2">
+  <img id="lang-flag" class="rounded object-cover" src="/static/vendor/flags/it.svg" alt="Italiano" style="width:48px;height:32px;">
+  <button id="lang-menu-button" data-dropdown-toggle="lang-dropdown" type="button" class="inline-flex h-10 items-center rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200" aria-expanded="false">
+    <span id="lang-current" class="inline-block min-w-[95px]">Italiano</span>
+  </button>
+  <div id="lang-dropdown" class="z-50 my-2 hidden w-40 list-none divide-y divide-gray-100 rounded-lg bg-white text-sm shadow-sm">
+    <ul class="py-1" aria-labelledby="lang-menu-button">
+      <li><button type="button" class="flex w-full items-center gap-2 px-4 py-2 text-left hover:bg-gray-100" data-lang-select="it"><div class="flex w-8 shrink-0 items-center justify-center"><img class="flag-lang rounded-sm object-cover" src="/static/vendor/flags/it.svg" alt=""></div><span class="leading-none">Italiano</span></button></li>
+      <li><button type="button" class="flex w-full items-center gap-2 px-4 py-2 text-left hover:bg-gray-100" data-lang-select="en"><div class="flex w-8 shrink-0 items-center justify-center"><img class="flag-lang rounded-sm object-cover" src="/static/vendor/flags/en.svg" alt=""></div><span class="leading-none">English</span></button></li>
+      <li><button type="button" class="flex w-full items-center gap-2 px-4 py-2 text-left hover:bg-gray-100" data-lang-select="en_us"><div class="flex w-8 shrink-0 items-center justify-center"><img class="flag-lang rounded-sm object-cover" src="/static/vendor/flags/en_us.svg" alt=""></div><span class="leading-none">English USA</span></button></li>
+      <li><button type="button" class="flex w-full items-center gap-2 px-4 py-2 text-left hover:bg-gray-100" data-lang-select="de"><div class="flex w-8 shrink-0 items-center justify-center"><img class="flag-lang rounded-sm object-cover" src="/static/vendor/flags/de.svg" alt=""></div><span class="leading-none">Deutsch</span></button></li>
+      <li><button type="button" class="flex w-full items-center gap-2 px-4 py-2 text-left hover:bg-gray-100" data-lang-select="de_ch"><div class="flex w-8 shrink-0 items-center justify-center"><img class="flag-lang-ch rounded-sm object-cover" src="/static/vendor/flags/ch.svg" alt=""></div><span class="leading-none">Deutsch CH</span></button></li>
+      <li><button type="button" class="flex w-full items-center gap-2 px-4 py-2 text-left hover:bg-gray-100" data-lang-select="fr"><div class="flex w-8 shrink-0 items-center justify-center"><img class="flag-lang rounded-sm object-cover" src="/static/vendor/flags/fr.svg" alt=""></div><span class="leading-none">Français</span></button></li>
+      <li><button type="button" class="flex w-full items-center gap-2 px-4 py-2 text-left hover:bg-gray-100" data-lang-select="fr_ch"><div class="flex w-8 shrink-0 items-center justify-center"><img class="flag-lang-ch rounded-sm object-cover" src="/static/vendor/flags/ch.svg" alt=""></div><span class="leading-none">Français CH</span></button></li>
+    </ul>
+  </div>
+</div>
+{{end}}
--- a/web/templates/private/_navbar.html
+++ b/web/templates/private/_navbar.html
@@ -0,0 +1,52 @@
+{{define "navbar"}}
+<nav class="border-b border-gray-200 bg-white">
+  <div class="mx-auto flex max-w-7xl flex-wrap items-center justify-between p-4">
+    <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
+      <span class="self-center whitespace-nowrap text-xl font-semibold">Trustcontact</span>
+    </a>
+
+    <button data-collapse-toggle="navbar-main" type="button" class="inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 md:hidden" aria-controls="navbar-main" aria-expanded="false">
+      <span class="sr-only" data-i18n="nav.open_main_menu">Apri menu principale</span>
+      <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
+      </svg>
+    </button>
+
+    <div class="hidden w-full items-center justify-between md:order-1 md:flex md:w-auto" id="navbar-main">
+      <ul class="mt-4 flex flex-col gap-2 rounded-lg border border-gray-100 bg-gray-50 p-4 text-sm font-medium md:mt-0 md:flex-row md:items-center md:gap-1 md:border-0 md:bg-transparent md:p-0">
+        <li><a href="/welcome" class="block rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100">Welcome</a></li>
+      </ul>
+
+      <div class="mt-4 flex items-center gap-3 md:mt-0 md:ms-4">
+        {{template "navbar_controls" .}}
+      </div>
+    </div>
+  </div>
+</nav>
+{{end}}
+
+{{define "navbar_controls"}}
+{{template "language_dropdown" .}}
+
+{{if .CurrentUser}}
+<div class="relative">
+  <button type="button" class="flex items-center rounded-full bg-gray-800 text-sm focus:ring-4 focus:ring-gray-300" id="user-menu-button" aria-expanded="false" data-dropdown-toggle="user-dropdown" data-dropdown-placement="bottom">
+    <span class="sr-only" data-i18n="nav.open_user_menu">Apri menu utente</span>
+    <span class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-blue-600 font-semibold text-white">
+      {{if .CurrentUser.Name}}{{printf "%.1s" .CurrentUser.Name}}{{else}}{{printf "%.1s" .CurrentUser.Email}}{{end}}
+    </span>
+  </button>
+  <div class="z-50 my-4 hidden w-56 list-none divide-y divide-gray-100 rounded-lg bg-white text-base shadow-sm" id="user-dropdown">
+    <div class="px-4 py-3">
+      <span class="block truncate text-sm text-gray-900">{{if .CurrentUser.Name}}{{.CurrentUser.Name}}{{else}}Utente{{end}}</span>
+      <span class="block truncate text-sm text-gray-500">{{.CurrentUser.Email}}</span>
+    </div>
+    <div class="py-2">
+      <form action="/logout" method="post" class="px-2">
+        <button type="submit" class="block w-full rounded-lg px-2 py-2 text-left text-sm text-red-700 hover:bg-red-50" data-i18n="nav.logout">Logout</button>
+      </form>
+    </div>
+  </div>
+</div>
+{{end}}
+{{end}}
--- a/web/templates/private/welcome.html
+++ b/web/templates/private/welcome.html
@@ -1,16 +1,22 @@
 {{define "content"}}
-<div class="space-y-5">
-  <div>
-    <h1 class="text-2xl font-semibold">Welcome</h1>
+<section class="grid gap-6 md:grid-cols-3">
+  <article class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm md:col-span-2">
+    <h1 class="mb-2 text-2xl font-bold text-gray-900">welcome</h1>
    {{if .CurrentUser}}
-    <p class="muted">Bentornato {{if .CurrentUser.Name}}{{.CurrentUser.Name}}{{else}}{{.CurrentUser.Email}}{{end}}.</p>
+    <p class="text-gray-600"><span data-i18n="welcome.back_prefix">Bentornato</span> {{if .CurrentUser.Name}}{{.CurrentUser.Name}}{{else}}{{.CurrentUser.Email}}{{end}}.</p>
    {{else}}
-    <p class="muted">Benvenuto.</p>
+    <p class="text-gray-600" data-i18n="welcome.generic">Benvenuto.</p>
    {{end}}
-  </div>
+  </article>

-  {{if and .CurrentUser (ne .CurrentUser.Role "admin")}}
-  <p class="muted">Non hai privilegi admin.</p>
-  {{end}}
-</div>
+  <article class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+    <h2 class="mb-3 text-lg font-semibold text-gray-900" data-i18n="welcome.quick_links">Quick Links</h2>
+    <div class="space-y-2">
+      <a href="/welcome" class="block rounded-lg px-3 py-2 text-sm text-gray-700 hover:bg-gray-100">welcome</a>
+      {{if and .CurrentUser (eq .CurrentUser.Role "admin")}}
+      <a href="/admin/users" class="block rounded-lg px-3 py-2 text-sm text-gray-700 hover:bg-gray-100" data-i18n="nav.users">Users</a>
+      {{end}}
+    </div>
+  </article>
+</section>
 {{end}}
--- a/web/templates/public/_flash.html
+++ b/web/templates/public/_flash.html
@@ -1,6 +1,26 @@
+{{define "_flash.html"}}
 {{if .FlashSuccess}}
-<div style="background:#dcfce7;color:#166534;padding:12px;border-radius:8px;margin:0 0 12px;">{{.FlashSuccess}}</div>
+<div class="mb-4 flex items-center rounded-lg border border-green-200 bg-green-50 p-4 text-green-800" role="alert">
+  <svg class="me-3 inline h-4 w-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+    <path d="M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0Zm3.707 8.707-4 4a1 1 0 0 1-1.414 0l-2-2 1.414-1.414L9 10.586l3.293-3.293Z"/>
+  </svg>
+  <span class="text-sm font-medium">{{.FlashSuccess}}</span>
+</div>
 {{end}}
 {{if .FlashError}}
-<div style="background:#fee2e2;color:#991b1b;padding:12px;border-radius:8px;margin:0 0 12px;">{{.FlashError}}</div>
+<div class="mb-4 flex items-center rounded-lg border border-red-200 bg-red-50 p-4 text-red-800" role="alert">
+  <svg class="me-3 inline h-4 w-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+    <path d="M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0Zm1 14H9v-2h2Zm0-4H9V5h2Z"/>
+  </svg>
+  <span class="text-sm font-medium">{{.FlashError}}</span>
+</div>
+{{end}}
+{{if .FlashWarning}}
+<div class="mb-4 flex items-center rounded-lg border border-yellow-200 bg-yellow-50 p-4 text-yellow-800" role="alert">
+  <svg class="me-3 inline h-4 w-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+    <path d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l6.518 11.596c.75 1.334-.213 2.99-1.742 2.99H3.48c-1.53 0-2.492-1.656-1.743-2.99L8.257 3.1ZM11 13H9v2h2v-2Zm0-6H9v5h2V7Z"/>
+  </svg>
+  <span class="text-sm font-medium">{{.FlashWarning}}</span>
+</div>
+{{end}}
 {{end}}
--- a/web/templates/public/_navbar.html
+++ b/web/templates/public/_navbar.html
@@ -0,0 +1,61 @@
+{{define "navbar"}}
+<nav class="border-b border-gray-200 bg-white">
+  <div class="mx-auto flex max-w-7xl flex-wrap items-center justify-between p-4">
+    <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
+      <span class="self-center whitespace-nowrap text-xl font-semibold">Trustcontact</span>
+    </a>
+
+    <button data-collapse-toggle="navbar-main" type="button" class="inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 md:hidden" aria-controls="navbar-main" aria-expanded="false">
+      <span class="sr-only" data-i18n="nav.open_main_menu">Apri menu principale</span>
+      <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
+      </svg>
+    </button>
+
+    <div class="hidden w-full items-center justify-between md:order-1 md:flex md:w-auto" id="navbar-main">
+      <ul class="mt-4 flex flex-col gap-2 rounded-lg border border-gray-100 bg-gray-50 p-4 text-sm font-medium md:mt-0 md:flex-row md:items-center md:gap-1 md:border-0 md:bg-transparent md:p-0">
+        {{if eq .NavSection "home"}}
+        {{if .CurrentUser}}
+        <li><a href="/welcome" class="block rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100">Welcome</a></li>
+        {{else}}
+        <li><a href="/login" class="block rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100" data-i18n="nav.login">Login</a></li>
+        {{end}}
+        {{else if not .CurrentUser}}
+        <li><a href="/login" class="block rounded-lg px-3 py-2 {{if eq .NavSection "login"}}bg-blue-100 text-blue-700{{else}}text-gray-700 hover:bg-gray-100{{end}}" data-i18n="nav.login">Login</a></li>
+        <li><a href="/signup" class="block rounded-lg px-3 py-2 {{if eq .NavSection "signup"}}bg-blue-100 text-blue-700{{else}}text-gray-700 hover:bg-gray-100{{end}}" data-i18n="nav.signup">Signup</a></li>
+        {{end}}
+      </ul>
+
+      <div class="mt-4 flex items-center gap-3 md:mt-0 md:ms-4">
+        {{template "navbar_controls" .}}
+      </div>
+    </div>
+  </div>
+</nav>
+{{end}}
+
+{{define "navbar_controls"}}
+{{template "language_dropdown" .}}
+
+{{if .CurrentUser}}
+<div class="relative">
+  <button type="button" class="flex items-center rounded-full bg-gray-800 text-sm focus:ring-4 focus:ring-gray-300" id="user-menu-button" aria-expanded="false" data-dropdown-toggle="user-dropdown" data-dropdown-placement="bottom">
+    <span class="sr-only" data-i18n="nav.open_user_menu">Apri menu utente</span>
+    <span class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-blue-600 font-semibold text-white">
+      {{if .CurrentUser.Name}}{{printf "%.1s" .CurrentUser.Name}}{{else}}{{printf "%.1s" .CurrentUser.Email}}{{end}}
+    </span>
+  </button>
+  <div class="z-50 my-4 hidden w-56 list-none divide-y divide-gray-100 rounded-lg bg-white text-base shadow-sm" id="user-dropdown">
+    <div class="px-4 py-3">
+      <span class="block truncate text-sm text-gray-900">{{if .CurrentUser.Name}}{{.CurrentUser.Name}}{{else}}Utente{{end}}</span>
+      <span class="block truncate text-sm text-gray-500">{{.CurrentUser.Email}}</span>
+    </div>
+    <div class="py-2">
+      <form action="/logout" method="post" class="px-2">
+        <button type="submit" class="block w-full rounded-lg px-2 py-2 text-left text-sm text-red-700 hover:bg-red-50" data-i18n="nav.logout">Logout</button>
+      </form>
+    </div>
+  </div>
+</div>
+{{end}}
+{{end}}
--- a/web/templates/public/forbidden.html
+++ b/web/templates/public/forbidden.html
@@ -0,0 +1,9 @@
+{{define "content"}}
+<div class="flex min-h-screen items-center justify-center">
+  <div class="w-full max-w-2xl rounded-lg border border-red-200 bg-white p-8 shadow-sm">
+    <h1 class="mb-3 text-2xl font-bold text-red-700">Accesso negato</h1>
+    <p class="mb-6 text-gray-700">Non hai i privilegi necessari per accedere a questa pagina.</p>
+    <a href="/" class="inline-flex rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-800">Torna alla home</a>
+  </div>
+</div>
+{{end}}
--- a/web/templates/public/forgot_password.html
+++ b/web/templates/public/forgot_password.html
@@ -1,25 +1,19 @@
 {{define "content"}}
-<div class="mx-auto w-full max-w-96 rounded-xl border border-gray-200 px-6 py-8">
-  <div class="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-amber-100">
-    <svg class="h-8 w-8 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 1.657-1.343 3-3 3S6 12.657 6 11s1.343-3 3-3 3 1.343 3 3zm0 0V9a4 4 0 118 0v2m-8 0h8m-8 0H4m16 0v8a2 2 0 01-2 2H6a2 2 0 01-2-2v-8"></path>
-    </svg>
+<div class="flex min-h-screen items-center justify-center">
+  <div class="w-full max-w-md rounded-lg border border-gray-200 bg-white p-6 shadow-sm md:p-8">
+    <h1 class="mb-1 text-2xl font-bold text-gray-900" data-i18n="forgot.title">Forgot Password</h1>
+    <p class="mb-6 text-sm text-gray-500" data-i18n="forgot.subtitle">Inserisci la tua email per ricevere il link di reset.</p>
+
+    <form action="/forgot-password" method="post" class="space-y-5">
+      <div>
+        <label for="forgot-email" class="mb-2 block text-sm font-medium text-gray-900" data-i18n="form.email">Email</label>
+        <input id="forgot-email" type="email" name="email" value="{{.Email}}" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" required />
+      </div>
+
+      <button type="submit" class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300" data-i18n="forgot.submit">Invia link reset</button>
+
+      <p class="text-center text-sm text-gray-600"><a href="/login" class="text-blue-700 hover:underline" data-i18n="forgot.back_login">Torna al login</a></p>
+    </form>
  </div>
-
-  <h3 class="mb-3 text-center text-xl font-bold text-gray-800">Forgot Password</h3>
-  <p class="mb-6 text-center text-sm text-gray-500">Inserisci la tua email. Se l'account esiste e risulta verificato, invieremo un link di reset.</p>
-
-  <form action="/forgot-password" method="post">
-    <div class="mb-6">
-      <label class="mb-1 block text-sm font-medium text-gray-700">Email</label>
-      <input type="email" name="email" value="{{.Email}}" class="w-full rounded-lg border border-gray-300 px-3 py-2 transition outline-none focus:border-amber-500 focus:ring-2 focus:ring-amber-500" required />
-    </div>
-
-    <button type="submit" class="w-full rounded-lg bg-amber-500 px-4 py-2 font-medium text-white transition duration-300 hover:bg-amber-600">Invia link reset</button>
-
-    <div class="mt-4 text-center">
-      <a href="/login" class="text-sm text-slate-600 hover:text-slate-800">Torna al login</a>
-    </div>
-  </form>
 </div>
 {{end}}
--- a/web/templates/public/home.html
+++ b/web/templates/public/home.html
@@ -1,10 +1,5 @@
 {{define "content"}}
-<div class="space-y-3">
-  <h1 class="text-2xl font-semibold">Trustcontact</h1>
-  <p class="muted">Accedi o registrati per continuare.</p>
-  <div class="row">
-    <a class="rounded-lg border border-slate-300 px-4 py-2 hover:bg-slate-50" href="/login">Accedi</a>
-    <a class="rounded-lg border border-slate-300 px-4 py-2 hover:bg-slate-50" href="/signup">Registrati</a>
-  </div>
-</div>
+<section class="rounded-lg border border-gray-200 bg-white p-8 shadow-sm">
+  <h1 class="text-3xl font-bold text-gray-900">Home Page</h1>
+</section>
 {{end}}
--- a/web/templates/public/login.html
+++ b/web/templates/public/login.html
@@ -1,32 +1,27 @@
 {{define "content"}}
-<div class="mx-auto w-full max-w-96 rounded-xl border border-gray-200 px-6 py-8">
-  <div class="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
-    <svg class="h-8 w-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
-    </svg>
+<div class="flex min-h-screen items-center justify-center">
+  <div class="w-full max-w-md rounded-lg border border-gray-200 bg-white p-6 shadow-sm md:p-8">
+    <h1 class="mb-1 text-2xl font-bold text-gray-900" data-i18n="login.title">Login</h1>
+    <p class="mb-6 text-sm text-gray-500" data-i18n="login.subtitle">Accedi al tuo account.</p>
+
+    <form action="/login" method="post" class="space-y-5">
+      <div>
+        <label for="email" class="mb-2 block text-sm font-medium text-gray-900" data-i18n="form.email">Email</label>
+        <input id="email" type="text" name="email" value="{{.Email}}" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" required />
+      </div>
+
+      <div>
+        <label for="password" class="mb-2 block text-sm font-medium text-gray-900" data-i18n="form.password">Password</label>
+        <input id="password" type="password" name="password" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" required />
+      </div>
+
+      <button type="submit" class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300" data-i18n="login.submit">Sign in</button>
+
+      <div class="flex items-center justify-between text-sm">
+        <a href="/forgot-password" class="text-blue-700 hover:underline" data-i18n="login.forgot">Forgot password?</a>
+        <a href="/signup" class="text-gray-600 hover:underline" data-i18n="login.create_account">Create account</a>
+      </div>
+    </form>
  </div>
-
-  <h3 class="mb-6 text-center text-xl font-bold text-gray-800">Quick Login</h3>
-
-  <form action="/login" method="post">
-    <div class="mb-4">
-      <label class="mb-1 block text-sm font-medium text-gray-700">Email or Patient ID</label>
-      <input type="text" name="email" value="{{.Email}}" class="w-full rounded-lg border border-gray-300 px-3 py-2 transition outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500" required />
-    </div>
-
-    <div class="mb-6">
-      <label class="mb-1 block text-sm font-medium text-gray-700">Password</label>
-      <input type="password" name="password" class="w-full rounded-lg border border-gray-300 px-3 py-2 transition outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500" required />
-    </div>
-
-    <button type="submit" class="w-full rounded-lg bg-blue-500 px-4 py-2 font-medium text-white transition duration-300 hover:bg-blue-600">Sign In</button>
-
-    <div class="mt-4 text-center">
-      <a href="/forgot-password" class="text-sm text-blue-500 hover:text-blue-600">Forgot Password?</a>
-    </div>
-    <div class="mt-3 text-center">
-      <a href="/signup" class="text-sm text-slate-600 hover:text-slate-800">Non hai un account? Registrati</a>
-    </div>
-  </form>
 </div>
 {{end}}
--- a/web/templates/public/reset_password.html
+++ b/web/templates/public/reset_password.html
@@ -1,24 +1,21 @@
 {{define "content"}}
-<div class="mx-auto w-full max-w-96 rounded-xl border border-gray-200 px-6 py-8">
-  <div class="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-violet-100">
-    <svg class="h-8 w-8 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 11V7a4 4 0 118 0v4m-8 0h8m-8 0H5m14 0v8a2 2 0 01-2 2H7a2 2 0 01-2-2v-8"></path>
-    </svg>
+<div class="flex min-h-screen items-center justify-center">
+  <div class="w-full max-w-md rounded-lg border border-gray-200 bg-white p-6 shadow-sm md:p-8">
+    <h1 class="mb-1 text-2xl font-bold text-gray-900" data-i18n="reset.title">Reset Password</h1>
+    <p class="mb-6 text-sm text-gray-500" data-i18n="reset.subtitle">Imposta una nuova password.</p>
+
+    {{if .Token}}
+    <form action="/reset-password?token={{.Token}}" method="post" class="space-y-5">
+      <div>
+        <label for="reset-password" class="mb-2 block text-sm font-medium text-gray-900" data-i18n="reset.new_password">Nuova password</label>
+        <input id="reset-password" type="password" name="password" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" required />
+      </div>
+
+      <button type="submit" class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300" data-i18n="reset.submit">Aggiorna password</button>
+    </form>
+    {{else}}
+    <div class="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-800" role="alert" data-i18n="reset.invalid_token">Token mancante o non valido.</div>
+    {{end}}
  </div>
-
-  <h3 class="mb-6 text-center text-xl font-bold text-gray-800">Reset Password</h3>
-
-  {{if .Token}}
-  <form action="/reset-password?token={{.Token}}" method="post">
-    <div class="mb-6">
-      <label class="mb-1 block text-sm font-medium text-gray-700">Nuova password</label>
-      <input type="password" name="password" class="w-full rounded-lg border border-gray-300 px-3 py-2 transition outline-none focus:border-violet-500 focus:ring-2 focus:ring-violet-500" required />
-    </div>
-
-    <button type="submit" class="w-full rounded-lg bg-violet-500 px-4 py-2 font-medium text-white transition duration-300 hover:bg-violet-600">Aggiorna password</button>
-  </form>
-  {{else}}
-  <p class="text-center text-sm text-gray-500">Token mancante o non valido.</p>
-  {{end}}
 </div>
 {{end}}
--- a/web/templates/public/signup.html
+++ b/web/templates/public/signup.html
@@ -1,29 +1,24 @@
 {{define "content"}}
-<div class="mx-auto w-full max-w-96 rounded-xl border border-gray-200 px-6 py-8">
-  <div class="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100">
-    <svg class="h-8 w-8 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3M5 7h8M5 11h4m1 10h8a2 2 0 002-2V5a2 2 0 00-2-2H6a2 2 0 00-2 2v14a2 2 0 002 2h4z"></path>
-    </svg>
+<div class="flex min-h-screen items-center justify-center">
+  <div class="w-full max-w-md rounded-lg border border-gray-200 bg-white p-6 shadow-sm md:p-8">
+    <h1 class="mb-1 text-2xl font-bold text-gray-900" data-i18n="signup.title">Signup</h1>
+    <p class="mb-6 text-sm text-gray-500" data-i18n="signup.subtitle">Crea il tuo account.</p>
+
+    <form action="/signup" method="post" class="space-y-5">
+      <div>
+        <label for="signup-email" class="mb-2 block text-sm font-medium text-gray-900" data-i18n="form.email">Email</label>
+        <input id="signup-email" type="email" name="email" value="{{.Email}}" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" required />
+      </div>
+
+      <div>
+        <label for="signup-password" class="mb-2 block text-sm font-medium text-gray-900" data-i18n="form.password">Password</label>
+        <input id="signup-password" type="password" name="password" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" required />
+      </div>
+
+      <button type="submit" class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300" data-i18n="signup.submit">Sign up</button>
+
+      <p class="text-center text-sm text-gray-600"><span data-i18n="signup.has_account">Hai già un account?</span> <a href="/login" class="text-blue-700 hover:underline" data-i18n="signup.login">Accedi</a></p>
+    </form>
  </div>
-
-  <h3 class="mb-6 text-center text-xl font-bold text-gray-800">Create Account</h3>
-
-  <form action="/signup" method="post">
-    <div class="mb-4">
-      <label class="mb-1 block text-sm font-medium text-gray-700">Email</label>
-      <input type="email" name="email" value="{{.Email}}" class="w-full rounded-lg border border-gray-300 px-3 py-2 transition outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500" required />
-    </div>
-
-    <div class="mb-6">
-      <label class="mb-1 block text-sm font-medium text-gray-700">Password</label>
-      <input type="password" name="password" class="w-full rounded-lg border border-gray-300 px-3 py-2 transition outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500" required />
-    </div>
-
-    <button type="submit" class="w-full rounded-lg bg-emerald-500 px-4 py-2 font-medium text-white transition duration-300 hover:bg-emerald-600">Sign Up</button>
-
-    <div class="mt-4 text-center">
-      <a href="/login" class="text-sm text-slate-600 hover:text-slate-800">Hai già un account? Accedi</a>
-    </div>
-  </form>
 </div>
 {{end}}
--- a/web/templates/public/verify_notice.html
+++ b/web/templates/public/verify_notice.html
@@ -1,6 +1,8 @@
 {{define "content"}}
-<h1>Verifica email</h1>
-<p class="muted">Controlla la casella di posta e apri il link di verifica ricevuto.</p>
-<p class="muted">Se il link è scaduto, ripeti la registrazione o contatta supporto.</p>
-<p><a href="/login">Vai al login</a></p>
+<section class="rounded-lg border border-blue-200 bg-blue-50 p-8 shadow-sm" role="status" aria-live="polite">
+  <h1 class="mb-2 text-2xl font-bold text-blue-900" data-i18n="verify.title">Verifica email</h1>
+  <p class="mb-2 text-blue-800" data-i18n="verify.p1">Controlla la casella di posta e apri il link di verifica ricevuto.</p>
+  <p class="mb-4 text-blue-800" data-i18n="verify.p2">Se il link è scaduto, ripeti la registrazione o contatta supporto.</p>
+  <a href="/login" class="inline-flex rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-800" data-i18n="verify.go_login">Vai al login</a>
+</section>
 {{end}}
Author	SHA1	Message	Date
fabio	2552b8ad8f	genarato alcuni partials e corretto drop down	2026-02-23 17:09:35 +01:00
fabio	3fc01cc4f7	aggiornato per uso di taiwind	2026-02-23 13:46:44 +01:00
				`@@ -0,0 +1 @@`
				`@import "../../flowbite-ui/node_modules/tailwindcss/index.css";`