diff --git a/README.md b/README.md
index bafd11d..aaabbb1 100644
--- a/README.md
+++ b/README.md
@@ -1,76 +1,215 @@
-# cimaprogetti - Sito Aziendale
+# Cima Progetti - Sito Aziendale
-Sito web di Cima Progetti realizzato con **Svelte** e **Vite**.
+Sito web moderno e responsivo sviluppato con **Svelte + Vite** per presentare servizi, metodologia e contatti aziendali.
-## Struttura del Progetto
+## ✨ Funzionalità principali
-```
-src/
-├── components/ # Componenti Svelte riutilizzabili
-│ ├── Header.svelte
-│ ├── Hero.svelte
-│ ├── Services.svelte
-│ └── Footer.svelte
-├── App.svelte # Componente principale
-└── main.js # Entry point dell'applicazione
-```
+- 🌓 **Tema light/dark** con persistenza locale
+- 📱 **Design completamente responsivo**
+- ⬆️ **Navbar collapsibile** con hide/show al scroll
+- 🎨 **Sistema di componenti riusabili**
+- 🚀 **Routing client-side** con pagine di errore dedicate
+- ♿ **Accessibilità** e buone pratiche web
-## Componenti Disponibili
+## 🛠️ Requisiti
-- **Header**: Barra di navigazione sticky con menu
-- **Hero**: Sezione hero con call-to-action
-- **Services**: Griglia con i servizi offerti
-- **Footer**: Footer con informazioni aziendali e link
+- `Node.js` 18+ (consigliato LTS)
+- `npm` 9+
-## Setup Iniziale
-
-### Installazione
+## 🚀 Avvio rapido
```bash
npm install
-```
-
-### Avvio dello sviluppo
-
-```bash
npm run dev
```
-Il progetto sarà disponibile su `http://localhost:5173`
+Applicazione disponibile su `http://localhost:5173`.
-### Build per la produzione
+## 📝 Script disponibili
+
+- `npm run dev` - avvia il server di sviluppo con hot reload
+- `npm run build` - genera la build di produzione
+- `npm run preview` - avvia un'anteprima della build
+
+## 📁 Struttura del progetto
+
+```
+src/
+├── App.svelte # Componente root con routing
+├── main.js # Punto di ingresso
+├── styles/
+│ ├── global.css # Stili globali e variabili tema
+│ ├── App.css # Layout principale app
+│ └── error-pages.css # Stili pagine errore
+├── components/
+│ ├── Header/ # Navbar con scroll hide/show
+│ ├── Hero/ # Sezione hero principale
+│ ├── Services/ # Griglia servizi
+│ ├── Footer/ # Footer con info aziendali
+│ ├── Button/ # Componente button riusabile
+│ └── ThemeToggle/ # Toggle tema light/dark
+└── pages/
+ ├── Contacts.svelte # Pagina contatti
+ ├── 403.svelte # Accesso negato
+ ├── 404.svelte # Pagina non trovata
+ ├── 500.svelte # Errore server
+ └── ErrorGeneric.svelte # Errore generico
+```
+
+## 🗺️ Routing
+
+Il routing è gestito in `src/App.svelte` tramite `window.location.pathname`.
+
+| Route | Componente | Descrizione |
+|-------|-----------|-------------|
+| `/` | `Hero` + `Services` | Home page |
+| `/contatti`, `/contacts` | `Contacts` | Pagina contatti |
+| `/403` | `Forbidden` | Accesso negato |
+| `/500` | `ServerError` | Errore server |
+| `/errore` | `ErrorGeneric` | Errore generico |
+| `/*` | `NotFound` | Pagina non trovata (404) |
+
+## 🎨 Tema e Stili
+
+### Variabili CSS globali
+
+Tutte le variabili tema sono in `src/styles/global.css`:
+
+```css
+:root {
+ --primary-color: #1343F0; /* Colore primario */
+ --text-color: #111827; /* Testo light mode */
+ --surface: #ffffff; /* Sfondo light mode */
+ --background: rgba(246, 249, 255, 0.5);
+ /* ... altre variabili */
+}
+
+:root[data-theme='dark'] {
+ --primary-color: #4983F2;
+ --text-color: #e6eef8;
+ --surface: #000;
+ --background: rgba(0, 0, 0, 0.8);
+ /* ... altre variabili */
+}
+```
+
+### Come usare i colori tema
+
+```svelte
+
+ Contenuto che segue il tema
+
+```
+
+## 🧩 Componenti principali
+
+### Button
+
+Componente button/link riusabile con tema integrato.
+
+```svelte
+
+
+
+
+
+
+
+
+
+
+
+```
+
+**Prop disponibili:**
+- `text` - testo del button (default: `'Button'`)
+- `color` - colore sfondo (default: `var(--primary-color)`)
+- `textColor` - colore testo (default: `var(--surface)`)
+- `padding` - padding interno (default: `'8px 24px'`)
+- `round` - border-radius (default: `'8px'`)
+- `href` - se presente, renderizza come `` tag
+- `borderWidth` - spessore bordo interno (default: `'0px'`)
+
+### Header
+
+Navbar sticky che si nascondi al scroll verso il basso e riappare al scroll verso l'alto.
+
+Modifica il contenuto in `src/components/Header/Header.svelte`.
+
+### ThemeToggle
+
+Pulsante per switchare tra tema light e dark. Il tema viene salvato in `localStorage`.
+
+## 📱 Modificare i contenuti
+
+- **Header/Navigazione:** `src/components/Header/Header.svelte`
+- **Sezione hero:** `src/components/Hero/Hero.svelte`
+- **Servizi:** `src/components/Services/Services.svelte`
+- **Footer:** `src/components/Footer/Footer.svelte`
+- **Pagine errore:** `src/pages/*.svelte`
+
+## ➕ Aggiungere nuove pagine
+
+1. Crea un nuovo file `.svelte` in `src/pages/`
+2. Aggiungi una route in `src/App.svelte` nello script:
+
+```svelte
+import MyPage from "./pages/MyPage.svelte"
+
+const getRoute = (path) => {
+ // ...
+ if (normalized === '/my-page') return 'mypage'
+ // ...
+}
+```
+
+3. Aggiungi il rendering nel template:
+
+```svelte
+{:else if currentRoute === 'mypage'}
+
+```
+
+## 🚀 Build e Deploy
+
+### Build di produzione
```bash
npm run build
```
-### Preview della build
+Genera i file ottimizzati in `dist/`.
+
+### Preview locale
```bash
npm run preview
```
-## Customizzazione
+## 📦 Dipendenze
-### Modificare i Servizi
+- **Svelte** - Framework UI
+- **Vite** - Build tool e dev server
+- **@sveltejs/vite-plugin-svelte** - Plugin Svelte per Vite
-Modifica l'array `services` nel file [src/components/Services.svelte](src/components/Services.svelte) per aggiungere/rimuovere servizi.
+## 🎓 Tecnologie utilizzate
-### Cambiare i Colori
-
-I colori principali sono definiti negli `