diff --git a/MCC/mcc.PNG b/MCC/mcc.PNG
new file mode 100644
index 0000000..b54e50a
Binary files /dev/null and b/MCC/mcc.PNG differ
diff --git a/MCT/mct.jpg b/MCT/mct.jpg
new file mode 100644
index 0000000..f6cb5b3
Binary files /dev/null and b/MCT/mct.jpg differ
diff --git a/MLD/index.html b/MLD/index.html
index 1470047..edac32e 100644
--- a/MLD/index.html
+++ b/MLD/index.html
@@ -183,6 +183,17 @@ <h1>Modèle Logique de Données (MLD)</h1>
         </div>
     </div>
 
+    <div class="table-box">
+        <div class="table-header">DOCUMENT / MEDIA</div>
+        <div class="table-content">
+            <div class="attribute"><span class="pk">ID_Doc</span></div>
+            <div class="attribute">Titre_Document</div>
+            <div class="attribute">Type</div>
+            <div class="attribute">URL_Fichier</div>
+            <div class="attribute"><span class="fk">Code_Batiment</span> <span class="fk-desc">(Réf. Bâtiment)</span></div>
+        </div>
+    </div>
+
 </div>
 
 </body>
diff --git a/MOT/MOT.pdf b/MOT/MOT.pdf
new file mode 100644
index 0000000..8cf4048
Binary files /dev/null and b/MOT/MOT.pdf differ
diff --git a/MOT/index.html b/MOT/index.html
deleted file mode 100644
index 567b635..0000000
--- a/MOT/index.html
+++ /dev/null
@@ -1,251 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <title>MOT Pertinent - Global</title>
-    <style>
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #f4f4f4;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-
-        h2 {
-            color: #2C3E50;
-            margin-bottom: 20px;
-        }
-
-        /* --- CONTENEUR PRINCIPAL (Grille) --- */
-        .mot-diagram {
-            display: grid;
-            /* 4 Acteurs + 2 Colonnes techniques (Nature, Temps) */
-            grid-template-columns: 180px 180px 180px 180px 100px 120px;
-            background-color: white;
-            border: 2px solid #2C3E50;
-            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
-            position: relative;
-        }
-
-        /* --- EN-TÊTES --- */
-        .header {
-            padding: 15px 5px;
-            text-align: center;
-            font-weight: bold;
-            color: white;
-            border-right: 1px solid rgba(255,255,255,0.3);
-            font-size: 0.9rem;
-            text-transform: uppercase;
-        }
-
-        .h-ext { background-color: #95A5A6; } /* Gris - Externe */
-        .h-gest { background-color: #E67E22; } /* Orange - Gestionnaire */
-        .h-insp { background-color: #F1C40F; color: #333; } /* Jaune - Inspecteur */
-        .h-sys { background-color: #3498DB; } /* Bleu - Système */
-        .h-tech { background-color: #2C3E50; } /* Sombre - Technique */
-
-        /* --- COLONNES (Lignes verticales de séparation) --- */
-        .lane {
-            border-right: 1px dashed #ccc;
-            min-height: 900px; /* Hauteur totale du diagramme */
-            position: relative;
-        }
-        .lane:last-child { border-right: none; }
-
-        /* --- BLOCS DE TÂCHES (Opérations) --- */
-        .task {
-            position: absolute;
-            width: 140px;
-            background-color: white;
-            border: 2px solid #333;
-            border-radius: 6px;
-            padding: 8px;
-            text-align: center;
-            font-size: 0.8rem;
-            z-index: 10;
-            box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
-        }
-
-        .task strong {
-            display: block;
-            border-bottom: 1px solid #eee;
-            margin-bottom: 4px;
-            padding-bottom: 2px;
-            color: #C0392B;
-        }
-
-        /* Codes couleurs pour les phases */
-        .p1 { border-color: #E6B0AA; } /* Inventaire */
-        .p2 { border-color: #AED6F1; } /* Surveillance */
-        .p3 { border-color: #A9DFBF; } /* Travaux */
-
-        /* --- ÉVÉNEMENTS (Cercles) --- */
-        .evt {
-            position: absolute;
-            width: 80px;
-            height: 40px; /* Ovale */
-            border-radius: 20px;
-            border: 1px solid #2C3E50;
-            background-color: #fff;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            font-size: 0.7rem;
-            font-style: italic;
-            z-index: 5;
-        }
-
-        /* --- SVG (Flèches) --- */
-        svg {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 1;
-            pointer-events: none;
-        }
-        line, path {
-            stroke: #2C3E50;
-            stroke-width: 1.5;
-            fill: none;
-        }
-
-        /* --- TEXTES INFORMATIFS (Nature / Temps) --- */
-        .info {
-            position: absolute;
-            width: 90%;
-            text-align: center;
-            font-size: 0.75rem;
-            color: #555;
-            left: 5%;
-        }
-
-        /* Séparateurs de phases horizontaux */
-        .phase-sep {
-            position: absolute;
-            width: 100%;
-            border-top: 2px dashed #bbb;
-            left: 0;
-        }
-        .phase-label {
-            position: absolute;
-            left: 10px;
-            top: -25px;
-            font-weight: bold;
-            color: #777;
-            font-size: 1.2rem;
-            text-transform: uppercase;
-        }
-
-    </style>
-</head>
-<body>
-
-    <h2>MOT DÉTAILLÉ : SCÉNARIO COMPLET</h2>
-
-    <div class="mot-diagram" style="width: 940px;">
-        
-        <div class="header h-ext">EXTERNE<br>(Citoyen/Prest.)</div>
-        <div class="header h-gest">GESTIONNAIRE<br>(Administration)</div>
-        <div class="header h-insp">INSPECTEUR<br>(Terrain)</div>
-        <div class="header h-sys">SYSTÈME<br>(Base de données)</div>
-        <div class="header h-tech">NATURE</div>
-        <div class="header h-tech">TEMPS</div>
-
-        <svg>
-            <defs>
-                <marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
-                    <path d="M0,0 L0,6 L9,3 z" fill="#2C3E50" />
-                </marker>
-            </defs>
-
-            <line x1="90" y1="90" x2="270" y2="130" marker-end="url(#arrow)" /> <line x1="270" y1="180" x2="630" y2="230" marker-end="url(#arrow)" /> <line x1="450" y1="360" x2="450" y2="400" marker-end="url(#arrow)" /> <line x1="450" y1="460" x2="630" y2="500" marker-end="url(#arrow)" /> <line x1="630" y1="550" x2="270" y2="620" marker-end="url(#arrow)" /> <line x1="270" y1="680" x2="90" y2="740" marker-end="url(#arrow)" /> <line x1="90" y1="800" x2="450" y2="850" marker-end="url(#arrow)" /> <line x1="450" y1="890" x2="630" y2="920" marker-end="url(#arrow)" /> </svg>
-
-        <div class="lane">
-            <div class="evt" style="top: 50px; left: 50px;">Demande<br>Inscription</div>
-            <div class="task p3" style="top: 730px; left: 20px;">
-                <strong>Réalisation</strong>
-                Exécution travaux
-            </div>
-        </div>
-
-        <div class="lane">
-            <div class="task p1" style="top: 120px; left: 20px;">
-                <strong>Instruction</strong>
-                Vérif. juridique<br>Validation
-            </div>
-            <div class="task p3" style="top: 620px; left: 20px;">
-                <strong>Décision</strong>
-                Validation Budget<br>Choix Prestataire
-            </div>
-        </div>
-
-        <div class="lane">
-            <div class="evt" style="top: 320px; left: 50px;">Planification<br>Annuelle</div>
-            <div class="task p2" style="top: 390px; left: 20px;">
-                <strong>Visite</strong>
-                Relevé état<br>Photos
-            </div>
-            <div class="task p3" style="top: 840px; left: 20px;">
-                <strong>Réception</strong>
-                Contrôle conformité<br>Validation
-            </div>
-        </div>
-
-        <div class="lane">
-            <div class="task p1" style="top: 220px; left: 20px; border-style: dashed;">
-                <strong>Création</strong>
-                Enreg. Bâtiment<br>Génération ID
-            </div>
-            <div class="task p2" style="top: 500px; left: 20px; border-style: dashed;">
-                <strong>Analyse</strong>
-                Comparaison état<br>Déclenchement Alerte
-            </div>
-            <div class="task p3" style="top: 910px; left: 20px; border-style: dashed;">
-                <strong>Archivage</strong>
-                Mise à jour état<br>Clôture dossier
-            </div>
-        </div>
-
-        <div class="lane">
-            <div class="info" style="top: 130px;">MANUEL</div>
-            <div class="info" style="top: 230px;">AUTO</div>
-            
-            <div class="info" style="top: 400px;">MANUEL</div>
-            <div class="info" style="top: 510px;">AUTO</div>
-
-            <div class="info" style="top: 640px;">INTERACTIF</div>
-            <div class="info" style="top: 750px;">MANUEL</div>
-            <div class="info" style="top: 920px;">AUTO</div>
-        </div>
-
-        <div class="lane">
-            <div class="info" style="top: 130px;">J</div>
-            <div class="info" style="top: 230px;">Immédiat</div>
-
-            <div class="info" style="top: 400px;">J (Visite)</div>
-            <div class="info" style="top: 510px;">Immédiat</div>
-
-            <div class="info" style="top: 640px;">J+1 Mois</div>
-            <div class="info" style="top: 750px;">Variable</div>
-        </div>
-
-        <div class="phase-sep" style="top: 300px; width: 940px; position: absolute;">
-            <span class="phase-label">PHASE 2 : SURVEILLANCE</span>
-        </div>
-        <div class="phase-sep" style="top: 580px; width: 940px; position: absolute;">
-            <span class="phase-label">PHASE 3 : RESTAURATION</span>
-        </div>
-        
-        <div style="position: absolute; top: 10px; left: 10px; font-weight: bold; color: #777; font-size: 1.2rem; text-transform: uppercase;">
-            PHASE 1 : INVENTAIRE
-        </div>
-
-    </div>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/MPD/update_schema_table_stracter.sql b/MPD/update_schema_table_stracter.sql
new file mode 100644
index 0000000..940a473
--- /dev/null
+++ b/MPD/update_schema_table_stracter.sql
@@ -0,0 +1,37 @@
+-- 1. Enable PostGIS extension (if not already done)
+CREATE EXTENSION IF NOT EXISTS postgis;
+
+-- 2. Add the geometry column
+ALTER TABLE BATIMENT 
+ADD COLUMN geom GEOMETRY(POINT, 4326);
+
+-- 3. (Optional) Auto-fill geometry from your existing lat/lon columns
+UPDATE BATIMENT 
+SET geom = ST_SetSRID(ST_MakePoint(longitude, latitude), 4326)
+WHERE longitude IS NOT NULL AND latitude IS NOT NULL;
+
+
+
+
+ALTER TABLE INTERVENTION 
+ADD COLUMN date_validation DATE,
+ADD COLUMN commentaire_validation TEXT; -- For notes from the municipality
+
+
+
+
+ALTER TABLE INTERVENTION 
+ADD COLUMN statut_travaux VARCHAR(50) DEFAULT 'Planifié';
+-- Example values: 'Planifié', 'En cours', 'Terminé', 'Annulé'
+
+
+-- Add a constraint to ensure only valid states are entered
+ALTER TABLE INSPECTION 
+ADD CONSTRAINT chk_etat_constate 
+CHECK (etat_constate IN ('Bon', 'Moyen', 'Dégradé', 'En ruine'));
+
+
+
+
+
+
diff --git "a/Mini-Projet g\303\251oinformation_2025-2026.pdf" "b/Mini-Projet g\303\251oinformation_2025-2026.pdf"
index fc1c3cc..1818e00 100644
Binary files "a/Mini-Projet g\303\251oinformation_2025-2026.pdf" and "b/Mini-Projet g\303\251oinformation_2025-2026.pdf" differ
diff --git "a/Mini-Projet2g\303\251oinformation_2025-2026.pdf" "b/Mini-Projet2g\303\251oinformation_2025-2026.pdf"
deleted file mode 100644
index 34fa8b6..0000000
Binary files "a/Mini-Projet2g\303\251oinformation_2025-2026.pdf" and /dev/null differ
diff --git a/README.md b/README.md
index c859af6..9ae93f8 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,77 @@
-# mini-project
+# 🏰 Système d'Information Patrimonial Urbain (SIPU)
+
+<p align="center">
+  <img src="https://img.shields.io/badge/École-FST%20Tanger-blue?style=for-the-badge&logo=academic" alt="FST Tanger">
+  <img src="https://img.shields.io/badge/Filière-Géoinformation-green?style=for-the-badge&logo=map" alt="GéoInfo">
+  <img src="https://img.shields.io/badge/Cours-Admin%20Réseaux%20%26%20OS-orange?style=for-the-badge&logo=linux" alt="OS">
+</p>
+
+<p align="center">
+  <strong>Un projet complet d'ingénierie : De la conception Merise au déploiement Cloud.</strong>
+</p>
+
+---
+
+## 📖 Présentation
+
+Ce dépôt contient l'intégralité du projet de **Gestion du Patrimoine Urbain**. Il a pour but de moderniser le suivi des monuments historiques en centralisant les données techniques, administratives et géographiques au sein d'un système unique.
+
+Le projet est structuré pour suivre rigoureusement le cycle de vie d'un logiciel, depuis l'analyse conceptuelle jusqu'à l'implémentation technique.
+
+---
+
+## 📂 Structure du Dépôt
+
+L'organisation des fichiers suit la méthodologie **MERISE**, garantissant une traçabilité complète de la conception.
+
+| Dossier | Description | Contenu |
+| :--- | :--- | :--- |
+| **🗂️ MCC** | Modèle Conceptuel de Communication | Diagrammes de flux entre les acteurs (Service Municipal, Prestataires). |
+| **🧠 MCD** | Modèle Conceptuel de Données | Schémas Entité-Association (Bâtiments, Inspections, Zones). |
+| **⚙️ MCT** | Modèle Conceptuel de Traitements | Diagrammes des processus métier (Validation travaux, Inspections). |
+| **📋 MOT** | Modèle Organisationnel de Traitements | Répartition des tâches (Homme vs Machine). |
+| **🔄 MLD** | Modèle Logique de Données | Traduction du MCD en schéma relationnel (Clés étrangères). |
+| **💾 MPD** | Modèle Physique de Données | Scripts de création des tables PostgreSQL. |
+| **💻 ui-app** | **Application Web (Code Source)** | Le code Python/Flask complet. **(Voir README interne)** |
+| **🔍 requetes_SQL** | Analyses de Données | Requêtes SQL complexes pour les statistiques (Question 10). |
+
+---
+
+## 🛠️ Stack Technologique
+
+Le projet s'appuie sur des technologies robustes et open-source :
+
+* **Conception :** Méthode Merise.
+* **Base de Données :** PostgreSQL 16 + **PostGIS** (Extension Spatiale).
+* **Backend :** Python 3.10 (Flask Framework).
+* **Frontend :** Bootstrap 5 + Jinja2.
+* **Cartographie :** Leaflet.js.
+* **Déploiement :** Railway (App) + Neon (Database).
+
+---
+
+## 🚀 Installation et Démonstration
+
+### Pour lancer l'application :
+Toute la documentation technique, l'installation des dépendances (`requirements.txt`) et le guide de démarrage se trouvent dans le dossier dédié :
+
+👉 **[Accéder au dossier `ui-app`](./ui-app)**
+
+### Documents de référence :
+Les spécifications complètes et le rapport final sont disponibles à la racine :
+* `Mini-Projet géoinformation_2025-2026.pdf` (Cahier des charges)
+
+---
+
+## 👥 Auteurs
+
+Projet réalisé par les étudiants ingénieurs de la **FST Tanger** :
+
+* **Mohammed Belfellah** ([@MohammedBelfellah](https://github.com/MohammedBelfellah))
+* **Hamza Boulahrouf** ([@Hamza-7bl](https://github.com/Hamza-7bl))
+
+---
+
+<p align="center">
+  <i>Année Universitaire 2024-2025</i>
+</p>
diff --git a/mini-projet.txt b/mini-projet.txt
deleted file mode 100644
index e69de29..0000000
diff --git "a/requetes_SQL/De lister les b\303\242timents class\303\251s \302\253 en mauvais \303\251tat \302\273.jpg" b/requetes_SQL/req_bat_annee.jpg
similarity index 100%
rename from "requetes_SQL/De lister les b\303\242timents class\303\251s \302\253 en mauvais \303\251tat \302\273.jpg"
rename to requetes_SQL/req_bat_annee.jpg
diff --git "a/requetes_SQL/De calculer le co\303\273t total des restaurations par quartier.jpg" b/requetes_SQL/req_cout_quartier.jpg
similarity index 100%
rename from "requetes_SQL/De calculer le co\303\273t total des restaurations par quartier.jpg"
rename to requetes_SQL/req_cout_quartier.jpg
diff --git "a/requetes_SQL/De conna\303\256tre le nombre d\342\200\231interventions par entreprise.jpg" b/requetes_SQL/req_interv_entreprise.jpg
similarity index 100%
rename from "requetes_SQL/De conna\303\256tre le nombre d\342\200\231interventions par entreprise.jpg"
rename to requetes_SQL/req_interv_entreprise.jpg
diff --git "a/requetes_SQL/D\342\200\231obtenir la liste des b\303\242timents restaur\303\251s durant une ann\303\251e donn\303\251e.jpg" b/requetes_SQL/req_mauvais_etat.jpg
similarity index 100%
rename from "requetes_SQL/D\342\200\231obtenir la liste des b\303\242timents restaur\303\251s durant une ann\303\251e donn\303\251e.jpg"
rename to requetes_SQL/req_mauvais_etat.jpg
diff --git "a/requetes_SQL/De trouver les prestataires ayant r\303\251alis\303\251 plus de 3 chantiers.jpg" b/requetes_SQL/req_top_prestataires.jpg
similarity index 100%
rename from "requetes_SQL/De trouver les prestataires ayant r\303\251alis\303\251 plus de 3 chantiers.jpg"
rename to requetes_SQL/req_top_prestataires.jpg
diff --git a/ui-app/.gitignore b/ui-app/.gitignore
new file mode 100644
index 0000000..1102023
--- /dev/null
+++ b/ui-app/.gitignore
@@ -0,0 +1,4 @@
+venv/
+.env
+*.pyc
+__pycache__/
diff --git a/ui-app/Procfile b/ui-app/Procfile
new file mode 100644
index 0000000..40b0792
--- /dev/null
+++ b/ui-app/Procfile
@@ -0,0 +1 @@
+web: gunicorn run:app
diff --git a/ui-app/README.md b/ui-app/README.md
new file mode 100644
index 0000000..f14efbc
--- /dev/null
+++ b/ui-app/README.md
@@ -0,0 +1,475 @@
+# 🏛️ Urban Heritage Management System
+
+<p align="center">
+  <img src="https://img.shields.io/badge/Flask-2.3.3-green?style=flat-square&logo=flask" alt="Flask">
+  <img src="https://img.shields.io/badge/PostgreSQL-16-blue?style=flat-square&logo=postgresql" alt="PostgreSQL">
+  <img src="https://img.shields.io/badge/Bootstrap-5.3-purple?style=flat-square&logo=bootstrap" alt="Bootstrap">
+  <img src="https://img.shields.io/badge/Python-3.10+-yellow?style=flat-square&logo=python" alt="Python">
+  <img src="https://img.shields.io/badge/License-MIT-orange?style=flat-square" alt="License">
+</p>
+
+A comprehensive web application for managing **urban heritage buildings**, inspections, restoration interventions, documents, and related entities. Built as part of a university project at **Université Abdelmalek Essaâdi** for the **Operating Systems & Network Administration** course.
+
+---
+
+## 📋 Table of Contents
+
+- [Features](#-features)
+- [Screenshots](#-screenshots)
+- [Tech Stack](#-tech-stack)
+- [Project Structure](#-project-structure)
+- [Database Schema](#-database-schema)
+- [Installation](#-installation)
+- [Configuration](#-configuration)
+- [Usage](#-usage)
+- [API Routes](#-api-routes)
+- [Deployment](#-deployment)
+- [Contributing](#-contributing)
+- [Authors](#-authors)
+- [License](#-license)
+- [Contact](#-contact)
+
+---
+
+## ✨ Features
+
+### 📊 Dashboard
+
+- Real-time statistics overview
+- Interactive map with building locations (Leaflet.js)
+- Urgent buildings requiring immediate attention
+- Restoration costs analysis by year
+- Multiple map styles (satellite, dark, light, streets)
+
+### 🏢 Buildings Management
+
+- Full CRUD operations (Create, Read, Update, Delete)
+- Advanced filtering by zone, type, protection level, and condition
+- Search functionality across all building attributes
+- GPS coordinates with map visualization
+- Historical notes and construction dates
+
+### 🔍 Inspections
+
+- Track building conditions over time
+- Condition states: Bon, Moyen, Dégradé, En ruine
+- Detailed inspection reports
+- Date-based filtering and history
+
+### 🔧 Interventions
+
+- Manage restoration works and projects
+- Cost estimation tracking
+- Status management (Planifié, En cours, Terminé, Annulé)
+- Municipal validation workflow
+- Link interventions to service providers
+
+### 📁 Documents & Media
+
+- Attach photos, plans, PDFs, videos to buildings
+- Document categorization by type
+- URL-based file linking (Google Drive, Dropbox, etc.)
+- Gallery view for all documents
+
+### 👥 Reference Data Management
+
+- **Zones Urbaines**: Organize buildings by urban zones
+- **Types de Bâtiment**: Categorize buildings (Religious, Civil, Military, etc.)
+- **Niveaux de Protection**: Heritage protection status tracking
+- **Propriétaires**: Building owners management
+- **Prestataires**: Service providers (architects, contractors, etc.)
+
+### 🎨 User Interface
+
+- Modern Bootstrap 5 responsive design
+- Sidebar navigation with active state indicators
+- Flash messages for user feedback
+- Confirmation modals for destructive actions
+- Mobile-friendly layout
+
+---
+
+## 📸 Screenshots
+
+### Dashboard with Statistics
+
+![Dashboard](screenshots/dashboard.png)
+
+### Interactive Map View
+
+![Map View](screenshots/map.png)
+
+### Buildings List with Filters
+
+![Buildings](screenshots/buildings.png)
+
+### Inspection Details
+
+![Inspections](screenshots/inspections.png)
+
+
+
+---
+
+## 🛠️ Tech Stack
+
+| Category        | Technology                     |
+| --------------- | ------------------------------ |
+| **Backend**     | Python 3.10+, Flask 2.3.3      |
+| **Database**    | PostgreSQL (Neon.tech cloud)   |
+| **ORM/Driver**  | psycopg 3.2.3                  |
+| **Frontend**    | Bootstrap 5.3, Bootstrap Icons |
+| **Maps**        | Leaflet.js 1.9.4               |
+| **Templating**  | Jinja2                         |
+| **Server**      | Gunicorn (production)          |
+| **Environment** | python-dotenv                  |
+
+---
+
+## 📁 Project Structure
+
+```
+ui-app/
+│
+├── app/
+│   ├── __init__.py          # Application factory
+│   ├── db.py                 # Database connection handling
+│   ├── models/               # Data models (if needed)
+│   ├── routes/               # Blueprint routes
+│   │   ├── __init__.py
+│   │   ├── buildings.py      # Buildings CRUD
+│   │   ├── inspections.py    # Inspections CRUD
+│   │   ├── interventions.py  # Interventions & validation
+│   │   ├── dashboard.py      # Dashboard & statistics
+│   │   ├── prestataires.py   # Service providers
+│   │   ├── proprietaires.py  # Building owners
+│   │   ├── protections.py    # Protection levels
+│   │   ├── types.py          # Building types
+│   │   ├── zones.py          # Urban zones
+│   │   └── documents.py      # Documents & media
+│   ├── static/               # CSS, JS, images
+│   └── templates/            # Jinja2 templates
+│       ├── base.html         # Base layout
+│       ├── dashboard/
+│       ├── buildings/
+│       ├── inspections/
+│       ├── interventions/
+│       ├── documents/
+│       ├── prestataires/
+│       ├── proprietaires/
+│       ├── protections/
+│       ├── types/
+│       └── zones/
+│
+├── config.py                 # Configuration class
+├── run.py                    # Application entry point
+├── requirements.txt          # Python dependencies
+├── Procfile                  # Heroku deployment
+├── .env                      # Environment variables (not in git)
+├── .gitignore
+└── README.md
+```
+
+---
+
+## 🗄️ Database Schema
+
+```
+┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
+│  ZONE_URBAINE   │     │    BATIMENT     │     │  TYPE_BATIMENT  │
+├─────────────────┤     ├─────────────────┤     ├─────────────────┤
+│ id_zone (PK)    │◄────│ id_zone (FK)    │────►│ id_type (PK)    │
+│ nom_zone        │     │ code_batiment   │     │ libelle_type    │
+│ type_zone       │     │ nom_batiment    │     └─────────────────┘
+└─────────────────┘     │ adresse_rue     │
+                        │ latitude        │     ┌─────────────────┐
+┌─────────────────┐     │ longitude       │     │ NIV_PROTECTION  │
+│  PROPRIETAIRE   │     │ date_constr     │     ├─────────────────┤
+├─────────────────┤     │ note_historique │────►│ id_protection   │
+│ id_proprio (PK) │◄────│ id_proprio (FK) │     │ niveau          │
+│ nom_complet     │     │ id_type (FK)    │     └─────────────────┘
+│ type_proprio    │     │ id_protection   │
+│ contact         │     └────────┬────────┘
+└─────────────────┘              │
+                                 │
+        ┌────────────────────────┼────────────────────────┐
+        │                        │                        │
+        ▼                        ▼                        ▼
+┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
+│   INSPECTION    │     │  INTERVENTION   │     │ DOCUMENT_MEDIA  │
+├─────────────────┤     ├─────────────────┤     ├─────────────────┤
+│ id_inspect (PK) │     │ id_interv (PK)  │     │ id_doc (PK)     │
+│ date_visite     │     │ date_debut      │     │ titre_doc       │
+│ etat_constate   │     │ date_fin        │     │ type_doc        │
+│ rapport         │     │ type_travaux    │     │ url_fichier     │
+│ code_batiment   │     │ cout_estime     │     │ code_batiment   │
+└─────────────────┘     │ est_validee     │     └─────────────────┘
+                        │ statut_travaux  │
+                        │ id_prestataire  │
+                        └────────┬────────┘
+                                 │
+                                 ▼
+                        ┌─────────────────┐
+                        │  PRESTATAIRE    │
+                        ├─────────────────┤
+                        │ id_prestataire  │
+                        │ nom_entreprise  │
+                        │ role_prest      │
+                        └─────────────────┘
+```
+
+---
+
+## 🚀 Installation
+
+### Prerequisites
+
+- Python 3.10 or higher
+- PostgreSQL database (local or cloud like Neon.tech)
+- Git
+
+### Step-by-Step Setup
+
+1. **Clone the repository**
+
+   ```bash
+   git clone https://github.com/yourusername/urban-heritage-management.git
+   cd urban-heritage-management/ui-app
+   ```
+
+2. **Create virtual environment**
+
+   ```bash
+   # Windows
+   python -m venv venv
+   venv\Scripts\activate
+
+   # Linux/macOS
+   python3 -m venv venv
+   source venv/bin/activate
+   ```
+
+3. **Install dependencies**
+
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+4. **Set up environment variables**
+
+   ```bash
+   # Create .env file
+   copy .env.example .env   # Windows
+   cp .env.example .env     # Linux/macOS
+   ```
+
+5. **Configure your `.env` file**
+
+   ```env
+   DATABASE_URL="postgresql://user:password@host:5432/dbname?sslmode=require"
+   SECRET_KEY="your-secure-random-secret-key"
+   PORT=5000
+   ```
+
+6. **Run the application**
+
+   ```bash
+   python run.py
+   ```
+
+7. **Access the application**
+
+   Open your browser and navigate to: `http://localhost:5000`
+
+---
+
+## ⚙️ Configuration
+
+### Environment Variables
+
+| Variable       | Description                   | Example                               |
+| -------------- | ----------------------------- | ------------------------------------- |
+| `DATABASE_URL` | PostgreSQL connection string  | `postgresql://user:pass@host:5432/db` |
+| `SECRET_KEY`   | Flask secret key for sessions | `your-random-secret-key`              |
+| `PORT`         | Application port              | `5000`                                |
+
+### Database Setup
+
+Create the required tables in your PostgreSQL database:
+
+```sql
+-- Run your SQL schema here or use migrations
+-- Tables: BATIMENT, INSPECTION, INTERVENTION, DOCUMENT_MEDIA,
+--         PRESTATAIRE, PROPRIETAIRE, ZONE_URBAINE, NIV_PROTECTION, TYPE_BATIMENT
+```
+
+---
+
+## 📖 Usage
+
+### Dashboard
+
+- View overall statistics and KPIs
+- Toggle between **Statistics** and **Map** views
+- Identify urgent buildings requiring attention
+- Analyze restoration costs by year
+
+### Managing Buildings
+
+1. Navigate to **Bâtiments** in the sidebar
+2. Use filters to search by zone, type, protection level, or condition
+3. Click **+ Ajouter** to create a new building
+4. Click on a building to view details, inspections, and interventions
+
+### Recording Inspections
+
+1. Go to **Inspections** or access from a building's detail page
+2. Select the building and date
+3. Choose the condition state (Bon, Moyen, Dégradé, En ruine)
+4. Add detailed notes in the rapport field
+
+### Managing Interventions
+
+1. Navigate to **Interventions**
+2. Create new intervention linked to a building
+3. Assign a service provider (Prestataire)
+4. Track costs, status, and validation
+
+---
+
+## 🛣️ API Routes
+
+| Blueprint     | Route                          | Methods   | Description            |
+| ------------- | ------------------------------ | --------- | ---------------------- |
+| Dashboard     | `/`                            | GET       | Main dashboard         |
+| Buildings     | `/buildings`                   | GET       | List all buildings     |
+| Buildings     | `/buildings/add`               | GET, POST | Add new building       |
+| Buildings     | `/buildings/view/<id>`         | GET       | View building details  |
+| Buildings     | `/buildings/edit/<id>`         | GET, POST | Edit building          |
+| Buildings     | `/buildings/delete/<id>`       | POST      | Delete building        |
+| Inspections   | `/inspections`                 | GET       | List inspections       |
+| Interventions | `/interventions`               | GET       | List interventions     |
+| Interventions | `/interventions/validate/<id>` | POST      | Validate intervention  |
+| Documents     | `/documents`                   | GET       | List all documents     |
+| Zones         | `/zones`                       | GET       | List urban zones       |
+| Types         | `/types`                       | GET       | List building types    |
+| Protections   | `/protections`                 | GET       | List protection levels |
+| Propriétaires | `/proprietaires`               | GET       | List owners            |
+| Prestataires  | `/prestataires`                | GET       | List service providers |
+
+---
+
+## 🌐 Deployment
+
+### Heroku Deployment
+
+1. **Install Heroku CLI** and login
+
+   ```bash
+   heroku login
+   ```
+
+2. **Create Heroku app**
+
+   ```bash
+   heroku create your-app-name
+   ```
+
+3. **Set environment variables**
+
+   ```bash
+   heroku config:set DATABASE_URL="your-database-url"
+   heroku config:set SECRET_KEY="your-secret-key"
+   ```
+
+4. **Deploy**
+   ```bash
+   git push heroku main
+   ```
+
+### Using Gunicorn (Production)
+
+```bash
+gunicorn run:app --bind 0.0.0.0:$PORT
+```
+
+The `Procfile` is already configured for this.
+
+---
+
+## 🤝 Contributing
+
+Contributions are welcome! Please follow these steps:
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+---
+
+## 👥 Authors
+
+<table>
+  <tr>
+    <td align="center">
+      <strong>Mohammed Belfellah</strong><br>
+      <a href="mailto:mohammedbelfellah2@gmail.com">📧 Email</a>
+    </td>
+    <td align="center">
+      <strong>Hamza Boulahrouf</strong><br>
+    </td>
+  </tr>
+</table>
+
+**Institution:** Université Abdelmalek Essaâdi - Faculty of Sciences and Technology, Tangier
+
+**Course:** Operating Systems & Network Administration
+
+**Academic Year:** 2024-2025
+
+---
+
+## 📄 License
+
+This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.
+
+```
+MIT License
+
+Copyright (c) 2025 Mohammed Belfellah, Hamza Boulahrouf
+
+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...
+```
+
+---
+
+## 🙏 Acknowledgements
+
+- [Flask](https://flask.palletsprojects.com/) - Web framework
+- [Bootstrap 5](https://getbootstrap.com/) - UI framework
+- [Leaflet.js](https://leafletjs.com/) - Interactive maps
+- [PostgreSQL](https://www.postgresql.org/) - Database
+- [Neon.tech](https://neon.tech/) - Serverless PostgreSQL hosting
+- [psycopg](https://www.psycopg.org/) - PostgreSQL adapter
+- [Bootstrap Icons](https://icons.getbootstrap.com/) - Icon library
+
+---
+
+## 📬 Contact
+
+For questions, suggestions, or support:
+
+- **Email:** [mohammedbelfellah2@gmail.com](mailto:mohammedbelfellah2@gmail.com)
+
+
+---
+
+<p align="center">
+  Made with ❤️ for preserving urban heritage
+</p>
diff --git a/ui-app/app/__init__.py b/ui-app/app/__init__.py
new file mode 100644
index 0000000..8edc049
--- /dev/null
+++ b/ui-app/app/__init__.py
@@ -0,0 +1,57 @@
+from flask import Flask
+from config import Config
+from flask_cors import CORS
+
+def create_app(config_class=Config):
+    app = Flask(__name__)
+    app.config.from_object(config_class)
+    
+    # Enable CORS for all routes
+    CORS(app)
+    
+    # Initialize database connection handling
+    from . import db
+    db.init_app(app)
+    
+    # Register blueprints
+    from .routes import (buildings_bp, inspections_bp, interventions_bp, 
+                         dashboard_bp, prestataires_bp, zones_bp,
+                         protections_bp, proprietaires_bp, types_bp, documents_bp)
+    
+    app.register_blueprint(dashboard_bp)
+    app.register_blueprint(buildings_bp)
+    app.register_blueprint(inspections_bp)
+    app.register_blueprint(interventions_bp)
+    app.register_blueprint(prestataires_bp)
+    app.register_blueprint(zones_bp)
+    app.register_blueprint(protections_bp)
+    app.register_blueprint(proprietaires_bp)
+    app.register_blueprint(types_bp)
+    app.register_blueprint(documents_bp)
+    
+    @app.route('/test-db')
+    def test_db_connection():
+        try:
+            conn = db.get_db()
+            cur = conn.cursor()
+            cur.execute('SELECT version();')
+            db_version = cur.fetchone()
+            cur.close()
+            return f"<h1>Database Connection Successful!</h1><p>PostgreSQL version: {db_version[0]}</p>"
+        except Exception as e:
+            return f"<h1>Database Connection Failed!</h1><p>{e}</p>"
+
+    # Custom Jinja filter for safe date formatting
+    @app.template_filter('safe_strftime')
+    def safe_strftime(value, format='%d/%m/%Y'):
+        """Safely format dates that might be strings or date objects."""
+        if value is None:
+            return 'N/A'
+        if isinstance(value, str):
+            return value
+        try:
+            return value.strftime(format)
+        except:
+            return str(value)
+    
+    return app
\ No newline at end of file
diff --git a/ui-app/app/db.py b/ui-app/app/db.py
new file mode 100644
index 0000000..2ee4d39
--- /dev/null
+++ b/ui-app/app/db.py
@@ -0,0 +1,26 @@
+import psycopg
+from flask import current_app, g
+
+def get_db():
+    """
+    Opens a new database connection if there is none yet for the
+    current application context.
+    """
+    if 'db' not in g:
+        g.db = psycopg.connect(current_app.config['DATABASE_URL'])
+    return g.db
+
+def close_db(e=None):
+    """
+    Closes the database connection.
+    """
+    db = g.pop('db', None)
+    if db is not None:
+        db.close()
+
+def init_app(app):
+    """
+    Register database functions with the Flask app. This is called by
+    the application factory.
+    """
+    app.teardown_appcontext(close_db)
diff --git a/ui-app/app/routes/__init__.py b/ui-app/app/routes/__init__.py
new file mode 100644
index 0000000..880a66d
--- /dev/null
+++ b/ui-app/app/routes/__init__.py
@@ -0,0 +1,23 @@
+from .buildings import buildings_bp
+from .inspections import inspections_bp
+from .interventions import interventions_bp
+from .dashboard import dashboard_bp
+from .prestataires import prestataires_bp
+from .zones import zones_bp
+from .protections import protections_bp
+from .proprietaires import proprietaires_bp
+from .types import types_bp
+from .documents import documents_bp
+
+__all__ = [
+    'buildings_bp', 
+    'inspections_bp', 
+    'interventions_bp', 
+    'dashboard_bp', 
+    'prestataires_bp', 
+    'zones_bp',
+    'protections_bp',
+    'proprietaires_bp',
+    'types_bp',
+    'documents_bp'
+]
\ No newline at end of file
diff --git a/ui-app/app/routes/buildings.py b/ui-app/app/routes/buildings.py
new file mode 100644
index 0000000..e5df760
--- /dev/null
+++ b/ui-app/app/routes/buildings.py
@@ -0,0 +1,329 @@
+from flask import Blueprint, render_template, request, redirect, url_for, flash
+from app.db import get_db
+
+buildings_bp = Blueprint('buildings', __name__, url_prefix='/buildings')
+
+@buildings_bp.route('/')
+def list_buildings():
+    """List all buildings with search and filtering."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    # Get filter parameters from URL
+    search = request.args.get('search', '').strip()
+    zone_filter = request.args.get('zone', '')
+    type_filter = request.args.get('type', '')
+    protection_filter = request.args.get('protection', '')
+    etat_filter = request.args.get('etat', '')
+    
+    # Base query
+    query = '''
+        SELECT DISTINCT b.code_batiment, b.nom_batiment, b.adresse_rue, 
+               z.nom_zone, t.libelle_type, n.niveau, p.nom_complet,
+               b.latitude, b.longitude,
+               (SELECT i.etat_constate FROM INSPECTION i 
+                WHERE i.code_batiment = b.code_batiment 
+                ORDER BY i.date_visite DESC LIMIT 1) as dernier_etat
+        FROM BATIMENT b
+        LEFT JOIN ZONE_URBAINE z ON b.id_zone = z.id_zone
+        LEFT JOIN TYPE_BATIMENT t ON b.id_type = t.id_type
+        LEFT JOIN NIV_PROTECTION n ON b.id_protection = n.id_protection
+        LEFT JOIN PROPRIETAIRE p ON b.id_proprio = p.id_proprio
+        WHERE 1=1
+    '''
+    
+    params = []
+    
+    # Add search condition
+    if search:
+        query += ''' AND (
+            LOWER(b.nom_batiment) LIKE LOWER(%s) OR 
+            LOWER(b.adresse_rue) LIKE LOWER(%s) OR
+            LOWER(z.nom_zone) LIKE LOWER(%s) OR
+            CAST(b.code_batiment AS TEXT) LIKE %s
+        )'''
+        search_param = f'%{search}%'
+        params.extend([search_param, search_param, search_param, search_param])
+    
+    # Add zone filter
+    if zone_filter:
+        query += ' AND b.id_zone = %s'
+        params.append(zone_filter)
+    
+    # Add type filter
+    if type_filter:
+        query += ' AND b.id_type = %s'
+        params.append(type_filter)
+    
+    # Add protection filter
+    if protection_filter:
+        query += ' AND b.id_protection = %s'
+        params.append(protection_filter)
+    
+    # Add etat filter (based on latest inspection)
+    if etat_filter:
+        query += '''
+            AND b.code_batiment IN (
+                SELECT i.code_batiment FROM INSPECTION i
+                WHERE i.etat_constate = %s
+                AND i.date_visite = (
+                    SELECT MAX(i2.date_visite) FROM INSPECTION i2 
+                    WHERE i2.code_batiment = i.code_batiment
+                )
+            )
+        '''
+        params.append(etat_filter)
+    
+    query += ' ORDER BY b.code_batiment DESC'
+    
+    cur.execute(query, params)
+    buildings = cur.fetchall()
+    
+    # Get dropdown data for filters
+    cur.execute('SELECT id_zone, nom_zone FROM ZONE_URBAINE ORDER BY nom_zone')
+    zones = cur.fetchall()
+    
+    cur.execute('SELECT id_type, libelle_type FROM TYPE_BATIMENT ORDER BY libelle_type')
+    types = cur.fetchall()
+    
+    cur.execute('SELECT id_protection, niveau FROM NIV_PROTECTION ORDER BY niveau')
+    protections = cur.fetchall()
+    
+    # Get distinct etats from inspections
+    cur.execute('SELECT DISTINCT etat_constate FROM INSPECTION WHERE etat_constate IS NOT NULL ORDER BY etat_constate')
+    etats = cur.fetchall()
+    
+    cur.close()
+    
+    return render_template('buildings/list.html', 
+                          buildings=buildings,
+                          zones=zones,
+                          types=types,
+                          protections=protections,
+                          etats=etats,
+                          # Pass current filter values back to template
+                          current_search=search,
+                          current_zone=zone_filter,
+                          current_type=type_filter,
+                          current_protection=protection_filter,
+                          current_etat=etat_filter)
+
+@buildings_bp.route('/add', methods=['GET', 'POST'])
+def add_building():
+    """Add a new building."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    if request.method == 'POST':
+        # Get form data
+        nom = request.form['nom_batiment']
+        adresse = request.form['adresse_rue']
+        latitude = request.form.get('latitude') or None
+        longitude = request.form.get('longitude') or None
+        date_construction = request.form.get('date_construction') or None
+        note = request.form.get('note_historique')
+        id_zone = request.form.get('id_zone') or None
+        id_type = request.form.get('id_type') or None
+        id_protection = request.form.get('id_protection') or None
+        id_proprio = request.form.get('id_proprio') or None
+        
+        try:
+            cur.execute('''
+                INSERT INTO BATIMENT (nom_batiment, adresse_rue, latitude, longitude, 
+                                      date_construction, note_historique, id_zone, 
+                                      id_type, id_protection, id_proprio)
+                VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, %s)
+            ''', (nom, adresse, latitude, longitude, date_construction, note,
+                  id_zone, id_type, id_protection, id_proprio))
+            
+            # Update geometry if coordinates provided
+            if latitude and longitude:
+                cur.execute('''
+                    UPDATE BATIMENT 
+                    SET geom = ST_SetSRID(ST_MakePoint(%s, %s), 4326)
+                    WHERE code_batiment = (SELECT MAX(code_batiment) FROM BATIMENT)
+                ''', (longitude, latitude))
+            
+            conn.commit()
+            flash('Bâtiment ajouté avec succès!', 'success')
+            return redirect(url_for('buildings.list_buildings'))
+        except Exception as e:
+            conn.rollback()
+            flash(f'Erreur lors de l\'ajout: {str(e)}', 'danger')
+        finally:
+            cur.close()
+    
+    # GET: Load dropdown data
+    cur.execute('SELECT id_zone, nom_zone FROM ZONE_URBAINE ORDER BY nom_zone')
+    zones = cur.fetchall()
+    cur.execute('SELECT id_type, libelle_type FROM TYPE_BATIMENT ORDER BY libelle_type')
+    types = cur.fetchall()
+    cur.execute('SELECT id_protection, niveau FROM NIV_PROTECTION ORDER BY niveau')
+    protections = cur.fetchall()
+    cur.execute('SELECT id_proprio, nom_complet FROM PROPRIETAIRE ORDER BY nom_complet')
+    proprietaires = cur.fetchall()
+    cur.close()
+    
+    return render_template('buildings/add.html', zones=zones, types=types, 
+                          protections=protections, proprietaires=proprietaires)
+
+@buildings_bp.route('/view/<int:id>')
+def view_building(id):
+    """View a single building with all details."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    # Get building details
+    cur.execute('''
+        SELECT b.code_batiment, b.nom_batiment, b.adresse_rue, 
+               b.latitude, b.longitude, b.date_construction, b.note_historique,
+               z.nom_zone, t.libelle_type, n.niveau, p.nom_complet, p.type_proprio
+        FROM BATIMENT b
+        LEFT JOIN ZONE_URBAINE z ON b.id_zone = z.id_zone
+        LEFT JOIN TYPE_BATIMENT t ON b.id_type = t.id_type
+        LEFT JOIN NIV_PROTECTION n ON b.id_protection = n.id_protection
+        LEFT JOIN PROPRIETAIRE p ON b.id_proprio = p.id_proprio
+        WHERE b.code_batiment = %s
+    ''', (id,))
+    building = cur.fetchone()
+    
+    if not building:
+        flash('Bâtiment non trouvé!', 'warning')
+        return redirect(url_for('buildings.list_buildings'))
+    
+    # Get inspections for this building
+    cur.execute('''
+        SELECT id_inspect, date_visite, etat_constate, rapport
+        FROM INSPECTION 
+        WHERE code_batiment = %s 
+        ORDER BY date_visite DESC
+    ''', (id,))
+    inspections = cur.fetchall()
+    
+    # Get interventions for this building
+    cur.execute('''
+        SELECT i.id_interv, i.date_debut, i.date_fin, i.type_travaux, 
+               i.cout_estime, i.est_validee, i.statut_travaux,
+               p.nom_entreprise, p.role_prest
+        FROM INTERVENTION i
+        LEFT JOIN PRESTATAIRE p ON i.id_prestataire = p.id_prestataire
+        WHERE i.code_batiment = %s 
+        ORDER BY i.date_debut DESC
+    ''', (id,))
+    interventions = cur.fetchall()
+    
+    # Get documents/media for this building
+    cur.execute('''
+        SELECT id_doc, titre_doc, type_doc, url_fichier
+        FROM DOCUMENT_MEDIA
+        WHERE code_batiment = %s
+        ORDER BY id_doc DESC
+    ''', (id,))
+    documents = cur.fetchall()
+    
+    cur.close()
+    return render_template('buildings/view.html', 
+                          building=building, 
+                          inspections=inspections, 
+                          interventions=interventions,
+                          documents=documents)
+
+@buildings_bp.route('/edit/<int:id>', methods=['GET', 'POST'])
+def edit_building(id):
+    """Edit an existing building."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    if request.method == 'POST':
+        nom = request.form['nom_batiment']
+        adresse = request.form['adresse_rue']
+        latitude = request.form.get('latitude') or None
+        longitude = request.form.get('longitude') or None
+        date_construction = request.form.get('date_construction') or None
+        note = request.form.get('note_historique')
+        id_zone = request.form.get('id_zone') or None
+        id_type = request.form.get('id_type') or None
+        id_protection = request.form.get('id_protection') or None
+        id_proprio = request.form.get('id_proprio') or None
+        
+        try:
+            cur.execute('''
+                UPDATE BATIMENT 
+                SET nom_batiment = %s, adresse_rue = %s, latitude = %s, 
+                    longitude = %s, date_construction = %s, note_historique = %s,
+                    id_zone = %s, id_type = %s, id_protection = %s, id_proprio = %s
+                WHERE code_batiment = %s
+            ''', (nom, adresse, latitude, longitude, date_construction, note,
+                  id_zone, id_type, id_protection, id_proprio, id))
+            
+            # Update geometry if coordinates changed
+            if latitude and longitude:
+                cur.execute('''
+                    UPDATE BATIMENT 
+                    SET geom = ST_SetSRID(ST_MakePoint(%s, %s), 4326)
+                    WHERE code_batiment = %s
+                ''', (longitude, latitude, id))
+            
+            conn.commit()
+            flash('Bâtiment modifié avec succès!', 'success')
+            return redirect(url_for('buildings.view_building', id=id))
+        except Exception as e:
+            conn.rollback()
+            flash(f'Erreur lors de la modification: {str(e)}', 'danger')
+        finally:
+            cur.close()
+    
+    # GET: Load building data and dropdown options
+    cur.execute('''
+        SELECT b.*, z.id_zone, t.id_type, n.id_protection, p.id_proprio
+        FROM BATIMENT b
+        LEFT JOIN ZONE_URBAINE z ON b.id_zone = z.id_zone
+        LEFT JOIN TYPE_BATIMENT t ON b.id_type = t.id_type
+        LEFT JOIN NIV_PROTECTION n ON b.id_protection = n.id_protection
+        LEFT JOIN PROPRIETAIRE p ON b.id_proprio = p.id_proprio
+        WHERE b.code_batiment = %s
+    ''', (id,))
+    building = cur.fetchone()
+    
+    if not building:
+        flash('Bâtiment non trouvé!', 'warning')
+        return redirect(url_for('buildings.list_buildings'))
+    
+    cur.execute('SELECT id_zone, nom_zone FROM ZONE_URBAINE ORDER BY nom_zone')
+    zones = cur.fetchall()
+    cur.execute('SELECT id_type, libelle_type FROM TYPE_BATIMENT ORDER BY libelle_type')
+    types = cur.fetchall()
+    cur.execute('SELECT id_protection, niveau FROM NIV_PROTECTION ORDER BY niveau')
+    protections = cur.fetchall()
+    cur.execute('SELECT id_proprio, nom_complet FROM PROPRIETAIRE ORDER BY nom_complet')
+    proprietaires = cur.fetchall()
+    cur.close()
+    
+    return render_template('buildings/edit.html', 
+                          building=building,
+                          zones=zones, 
+                          types=types, 
+                          protections=protections, 
+                          proprietaires=proprietaires)
+
+@buildings_bp.route('/delete/<int:id>', methods=['POST'])
+def delete_building(id):
+    """Delete a building."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    try:
+        # Delete related records first (due to foreign keys)
+        cur.execute('DELETE FROM DOCUMENT_MEDIA WHERE code_batiment = %s', (id,))
+        cur.execute('DELETE FROM INTERVENTION WHERE code_batiment = %s', (id,))
+        cur.execute('DELETE FROM INSPECTION WHERE code_batiment = %s', (id,))
+        cur.execute('DELETE FROM BATIMENT WHERE code_batiment = %s', (id,))
+        conn.commit()
+        flash('Bâtiment supprimé avec succès!', 'success')
+    except Exception as e:
+        conn.rollback()
+        flash(f'Erreur lors de la suppression: {str(e)}', 'danger')
+    finally:
+        cur.close()
+    
+    return redirect(url_for('buildings.list_buildings'))
\ No newline at end of file
diff --git a/ui-app/app/routes/dashboard.py b/ui-app/app/routes/dashboard.py
new file mode 100644
index 0000000..70e768a
--- /dev/null
+++ b/ui-app/app/routes/dashboard.py
@@ -0,0 +1,135 @@
+from flask import Blueprint, render_template
+from app.db import get_db
+
+dashboard_bp = Blueprint('dashboard', __name__)
+
+@dashboard_bp.route('/')
+def index():
+    """Dashboard with statistics and map."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    # Total buildings count
+    cur.execute('SELECT COUNT(*) FROM BATIMENT')
+    total_buildings = cur.fetchone()[0]
+    
+    # Buildings by zone
+    cur.execute('''
+        SELECT z.nom_zone, COUNT(b.code_batiment)
+        FROM ZONE_URBAINE z
+        LEFT JOIN BATIMENT b ON z.id_zone = b.id_zone
+        GROUP BY z.id_zone, z.nom_zone
+        ORDER BY COUNT(b.code_batiment) DESC
+    ''')
+    buildings_by_zone = cur.fetchall()
+    
+    # Buildings by type
+    cur.execute('''
+        SELECT t.libelle_type, COUNT(b.code_batiment)
+        FROM TYPE_BATIMENT t
+        LEFT JOIN BATIMENT b ON t.id_type = b.id_type
+        GROUP BY t.id_type, t.libelle_type
+        ORDER BY COUNT(b.code_batiment) DESC
+    ''')
+    buildings_by_type = cur.fetchall()
+    
+    # Buildings by conservation state (latest inspection)
+    cur.execute('''
+        SELECT i.etat_constate, COUNT(DISTINCT i.code_batiment)
+        FROM INSPECTION i
+        INNER JOIN (
+            SELECT code_batiment, MAX(date_visite) as max_date
+            FROM INSPECTION
+            GROUP BY code_batiment
+        ) latest ON i.code_batiment = latest.code_batiment 
+                 AND i.date_visite = latest.max_date
+        GROUP BY i.etat_constate
+        ORDER BY i.etat_constate
+    ''')
+    buildings_by_state = cur.fetchall()
+    
+    # Buildings needing urgent intervention
+    cur.execute('''
+        SELECT b.code_batiment, b.nom_batiment, i.etat_constate, i.date_visite
+        FROM BATIMENT b
+        INNER JOIN INSPECTION i ON b.code_batiment = i.code_batiment
+        INNER JOIN (
+            SELECT code_batiment, MAX(date_visite) as max_date
+            FROM INSPECTION
+            GROUP BY code_batiment
+        ) latest ON i.code_batiment = latest.code_batiment 
+                 AND i.date_visite = latest.max_date
+        WHERE i.etat_constate IN ('En ruine', 'Dégradé')
+        ORDER BY 
+            CASE i.etat_constate 
+                WHEN 'En ruine' THEN 1 
+                WHEN 'Dégradé' THEN 2 
+            END,
+            b.nom_batiment
+    ''')
+    urgent_buildings = cur.fetchall()
+    
+    # Total restoration cost by year
+    cur.execute('''
+        SELECT EXTRACT(YEAR FROM date_debut)::INTEGER as year, 
+               COALESCE(SUM(cout_estime), 0) as total_cost
+        FROM INTERVENTION
+        WHERE date_debut IS NOT NULL
+        GROUP BY EXTRACT(YEAR FROM date_debut)
+        ORDER BY year DESC
+    ''')
+    cost_by_year = cur.fetchall()
+    
+    # Recent interventions count
+    cur.execute('SELECT COUNT(*) FROM INTERVENTION')
+    total_interventions = cur.fetchone()[0]
+    
+    # Recent inspections count
+    cur.execute('SELECT COUNT(*) FROM INSPECTION')
+    total_inspections = cur.fetchone()[0]
+    
+    # ========== NEW: Buildings for Map ==========
+    cur.execute('''
+        SELECT b.code_batiment, b.nom_batiment, b.adresse_rue, 
+               b.latitude, b.longitude,
+               z.nom_zone, t.libelle_type, n.niveau,
+               (SELECT i.etat_constate 
+                FROM INSPECTION i 
+                WHERE i.code_batiment = b.code_batiment 
+                ORDER BY i.date_visite DESC 
+                LIMIT 1) as dernier_etat
+        FROM BATIMENT b
+        LEFT JOIN ZONE_URBAINE z ON b.id_zone = z.id_zone
+        LEFT JOIN TYPE_BATIMENT t ON b.id_type = t.id_type
+        LEFT JOIN NIV_PROTECTION n ON b.id_protection = n.id_protection
+        WHERE b.latitude IS NOT NULL AND b.longitude IS NOT NULL
+    ''')
+    buildings_for_map = cur.fetchall()
+    
+    # Convert to list of dictionaries for JSON
+    map_buildings = []
+    for b in buildings_for_map:
+        map_buildings.append({
+            'code': b[0],
+            'nom': b[1],
+            'adresse': b[2] or 'N/A',
+            'lat': float(b[3]) if b[3] else None,
+            'lng': float(b[4]) if b[4] else None,
+            'zone': b[5] or 'N/A',
+            'type': b[6] or 'N/A',
+            'protection': b[7] or 'N/A',
+            'etat': b[8] or 'Non inspecté'
+        })
+    
+    cur.close()
+    
+    return render_template('dashboard/index.html',
+                          total_buildings=total_buildings,
+                          total_interventions=total_interventions,
+                          total_inspections=total_inspections,
+                          buildings_by_zone=buildings_by_zone,
+                          buildings_by_type=buildings_by_type,
+                          buildings_by_state=buildings_by_state,
+                          urgent_buildings=urgent_buildings,
+                          cost_by_year=cost_by_year,
+                          map_buildings=map_buildings)
\ No newline at end of file
diff --git a/ui-app/app/routes/documents.py b/ui-app/app/routes/documents.py
new file mode 100644
index 0000000..836e0af
--- /dev/null
+++ b/ui-app/app/routes/documents.py
@@ -0,0 +1,243 @@
+from flask import Blueprint, render_template, request, redirect, url_for, flash
+from app.db import get_db
+
+documents_bp = Blueprint('documents', __name__, url_prefix='/documents')
+
+@documents_bp.route('/')
+def list_all_documents():
+    """List all documents with search and filtering."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    # Get filter parameters
+    search = request.args.get('search', '').strip()
+    type_filter = request.args.get('type_doc', '')
+    building_filter = request.args.get('building', '')
+    
+    # Base query
+    query = '''
+        SELECT d.id_doc, d.titre_doc, d.type_doc, d.url_fichier, 
+               d.code_batiment, b.nom_batiment
+        FROM DOCUMENT_MEDIA d
+        JOIN BATIMENT b ON d.code_batiment = b.code_batiment
+        WHERE 1=1
+    '''
+    params = []
+    
+    if search:
+        query += ' AND (LOWER(d.titre_doc) LIKE LOWER(%s) OR LOWER(b.nom_batiment) LIKE LOWER(%s))'
+        params.extend([f'%{search}%', f'%{search}%'])
+    
+    if type_filter:
+        query += ' AND d.type_doc = %s'
+        params.append(type_filter)
+    
+    if building_filter:
+        query += ' AND d.code_batiment = %s'
+        params.append(building_filter)
+    
+    query += ' ORDER BY d.id_doc DESC'
+    
+    cur.execute(query, params)
+    documents = cur.fetchall()
+    
+    # Get filter dropdown data
+    cur.execute('SELECT DISTINCT type_doc FROM DOCUMENT_MEDIA WHERE type_doc IS NOT NULL ORDER BY type_doc')
+    types = cur.fetchall()
+    
+    cur.execute('SELECT code_batiment, nom_batiment FROM BATIMENT ORDER BY nom_batiment')
+    buildings = cur.fetchall()
+    
+    cur.close()
+    
+    return render_template('documents/list_all.html',
+                          documents=documents,
+                          types=types,
+                          buildings=buildings,
+                          current_search=search,
+                          current_type=type_filter,
+                          current_building=building_filter)
+
+@documents_bp.route('/building/<int:building_id>')
+def list_documents(building_id):
+    """List documents for a building."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    cur.execute('SELECT nom_batiment FROM BATIMENT WHERE code_batiment = %s', (building_id,))
+    building = cur.fetchone()
+    
+    if not building:
+        flash('Bâtiment non trouvé!', 'warning')
+        return redirect(url_for('buildings.list_buildings'))
+    
+    cur.execute('''
+        SELECT id_doc, titre_doc, type_doc, url_fichier
+        FROM DOCUMENT_MEDIA WHERE code_batiment = %s ORDER BY id_doc DESC
+    ''', (building_id,))
+    documents = cur.fetchall()
+    cur.close()
+    
+    return render_template('documents/list.html', 
+                          documents=documents, 
+                          building_id=building_id,
+                          building_name=building[0])
+
+@documents_bp.route('/add/<int:building_id>', methods=['GET', 'POST'])
+def add_document(building_id):
+    """Add a document to a building."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    cur.execute('SELECT nom_batiment FROM BATIMENT WHERE code_batiment = %s', (building_id,))
+    building = cur.fetchone()
+    
+    if not building:
+        flash('Bâtiment non trouvé!', 'warning')
+        return redirect(url_for('buildings.list_buildings'))
+    
+    if request.method == 'POST':
+        titre = request.form['titre_doc']
+        type_doc = request.form['type_doc']
+        url_fichier = request.form['url_fichier']
+        
+        try:
+            cur.execute('''
+                INSERT INTO DOCUMENT_MEDIA (titre_doc, type_doc, url_fichier, code_batiment)
+                VALUES (%s, %s, %s, %s)
+            ''', (titre, type_doc, url_fichier, building_id))
+            conn.commit()
+            cur.close()
+            flash('Document ajouté!', 'success')
+            return redirect(url_for('buildings.view_building', id=building_id))
+        except Exception as e:
+            conn.rollback()
+            flash(f'Erreur: {str(e)}', 'danger')
+    
+    cur.close()
+    types = ['Photo', 'Plan', 'PDF', 'Vidéo', 'Autre']
+    return render_template('documents/add.html', 
+                          building_id=building_id, 
+                          building_name=building[0],
+                          types=types)
+
+@documents_bp.route('/view/<int:id>')
+def view_document(id):
+    """View a document."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    cur.execute('''
+        SELECT d.id_doc, d.titre_doc, d.type_doc, d.url_fichier, d.code_batiment,
+               b.nom_batiment
+        FROM DOCUMENT_MEDIA d
+        JOIN BATIMENT b ON d.code_batiment = b.code_batiment
+        WHERE d.id_doc = %s
+    ''', (id,))
+    document = cur.fetchone()
+    cur.close()
+    
+    if not document:
+        flash('Document non trouvé!', 'warning')
+        return redirect(url_for('buildings.list_buildings'))
+    
+    return render_template('documents/view.html', 
+                          document=document,
+                          building_name=document[5])
+
+@documents_bp.route('/edit/<int:id>', methods=['GET', 'POST'])
+def edit_document(id):
+    """Edit a document."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    if request.method == 'POST':
+        titre = request.form['titre_doc']
+        type_doc = request.form['type_doc']
+        url_fichier = request.form['url_fichier']
+        
+        try:
+            cur.execute('''
+                UPDATE DOCUMENT_MEDIA 
+                SET titre_doc = %s, type_doc = %s, url_fichier = %s
+                WHERE id_doc = %s
+            ''', (titre, type_doc, url_fichier, id))
+            conn.commit()
+            cur.close()
+            flash('Document modifié!', 'success')
+            return redirect(url_for('documents.view_document', id=id))
+        except Exception as e:
+            conn.rollback()
+            flash(f'Erreur: {str(e)}', 'danger')
+    
+    cur.execute('''
+        SELECT d.id_doc, d.titre_doc, d.type_doc, d.url_fichier, d.code_batiment,
+               b.nom_batiment
+        FROM DOCUMENT_MEDIA d
+        JOIN BATIMENT b ON d.code_batiment = b.code_batiment
+        WHERE d.id_doc = %s
+    ''', (id,))
+    document = cur.fetchone()
+    cur.close()
+    
+    if not document:
+        flash('Document non trouvé!', 'warning')
+        return redirect(url_for('buildings.list_buildings'))
+    
+    types = ['Photo', 'Plan', 'PDF', 'Vidéo', 'Autre']
+    return render_template('documents/edit.html', 
+                          document=document,
+                          building_name=document[5],
+                          types=types)
+
+@documents_bp.route('/delete/<int:id>', methods=['POST'])
+def delete_document(id):
+    """Delete a document."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    cur.execute('SELECT code_batiment FROM DOCUMENT_MEDIA WHERE id_doc = %s', (id,))
+    result = cur.fetchone()
+    building_id = result[0] if result else None
+    
+    try:
+        cur.execute('DELETE FROM DOCUMENT_MEDIA WHERE id_doc = %s', (id,))
+        conn.commit()
+        flash('Document supprimé!', 'success')
+    except Exception as e:
+        conn.rollback()
+        flash(f'Erreur: {str(e)}', 'danger')
+    finally:
+        cur.close()
+    
+    if building_id:
+        return redirect(url_for('buildings.view_building', id=building_id))
+    return redirect(url_for('buildings.list_buildings'))
+
+@documents_bp.route('/add', methods=['POST'])
+def add_document_global():
+    """Add a document from the global documents page."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    building_id = request.form['code_batiment']
+    titre = request.form['titre_doc']
+    type_doc = request.form['type_doc']
+    url_fichier = request.form['url_fichier']
+    
+    try:
+        cur.execute('''
+            INSERT INTO DOCUMENT_MEDIA (titre_doc, type_doc, url_fichier, code_batiment)
+            VALUES (%s, %s, %s, %s)
+            RETURNING id_doc
+        ''', (titre, type_doc, url_fichier, building_id))
+        new_id = cur.fetchone()[0]
+        conn.commit()
+        flash(f'Document "{titre}" ajouté avec succès! (ID: {new_id})', 'success')
+    except Exception as e:
+        conn.rollback()
+        flash(f'Erreur: {str(e)}', 'danger')
+    finally:
+        cur.close()
+    
+    return redirect(url_for('documents.list_all_documents'))
\ No newline at end of file
diff --git a/ui-app/app/routes/inspections.py b/ui-app/app/routes/inspections.py
new file mode 100644
index 0000000..b70b6d3
--- /dev/null
+++ b/ui-app/app/routes/inspections.py
@@ -0,0 +1,196 @@
+from flask import Blueprint, render_template, request, redirect, url_for, flash
+from app.db import get_db
+
+inspections_bp = Blueprint('inspections', __name__, url_prefix='/inspections')
+
+@inspections_bp.route('/')
+def list_inspections():
+    """List all inspections with search and filtering."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    # Get filter parameters
+    search = request.args.get('search', '').strip()
+    etat_filter = request.args.get('etat', '')
+    building_filter = request.args.get('building', '')
+    date_from = request.args.get('date_from', '')
+    date_to = request.args.get('date_to', '')
+    
+    # Base query
+    query = '''
+        SELECT i.id_inspect, i.date_visite, i.etat_constate, i.rapport,
+               b.code_batiment, b.nom_batiment, b.adresse_rue
+        FROM INSPECTION i
+        JOIN BATIMENT b ON i.code_batiment = b.code_batiment
+        WHERE 1=1
+    '''
+    
+    params = []
+    
+    # Search
+    if search:
+        query += ''' AND (
+            LOWER(b.nom_batiment) LIKE LOWER(%s) OR 
+            LOWER(i.rapport) LIKE LOWER(%s) OR
+            CAST(i.id_inspect AS TEXT) LIKE %s
+        )'''
+        search_param = f'%{search}%'
+        params.extend([search_param, search_param, search_param])
+    
+    # État filter
+    if etat_filter:
+        query += ' AND i.etat_constate = %s'
+        params.append(etat_filter)
+    
+    # Building filter
+    if building_filter:
+        query += ' AND i.code_batiment = %s'
+        params.append(building_filter)
+    
+    # Date range
+    if date_from:
+        query += ' AND i.date_visite >= %s'
+        params.append(date_from)
+    
+    if date_to:
+        query += ' AND i.date_visite <= %s'
+        params.append(date_to)
+    
+    query += ' ORDER BY i.date_visite DESC'
+    
+    cur.execute(query, params)
+    inspections = cur.fetchall()
+    
+    # Get filter dropdown data
+    cur.execute('SELECT DISTINCT etat_constate FROM INSPECTION WHERE etat_constate IS NOT NULL ORDER BY etat_constate')
+    etats = cur.fetchall()
+    
+    cur.execute('SELECT code_batiment, nom_batiment FROM BATIMENT ORDER BY nom_batiment')
+    buildings = cur.fetchall()
+    
+    cur.close()
+    
+    return render_template('inspections/list.html',
+                          inspections=inspections,
+                          etats=etats,
+                          buildings=buildings,
+                          current_search=search,
+                          current_etat=etat_filter,
+                          current_building=building_filter,
+                          current_date_from=date_from,
+                          current_date_to=date_to)
+
+@inspections_bp.route('/add', methods=['GET', 'POST'])
+def add_inspection():
+    """Add a new inspection."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    if request.method == 'POST':
+        date_visite = request.form['date_visite']
+        rapport = request.form.get('rapport')
+        etat_constate = request.form['etat_constate']
+        code_batiment = request.form['code_batiment']
+        
+        try:
+            cur.execute('''
+                INSERT INTO INSPECTION (date_visite, rapport, etat_constate, code_batiment)
+                VALUES (%s, %s, %s, %s)
+            ''', (date_visite, rapport, etat_constate, code_batiment))
+            conn.commit()
+            flash('Inspection ajoutée avec succès!', 'success')
+            return redirect(url_for('inspections.list_inspections'))
+        except Exception as e:
+            conn.rollback()
+            flash(f'Erreur lors de l\'ajout: {str(e)}', 'danger')
+        finally:
+            cur.close()
+    
+    # GET: Load buildings for dropdown
+    cur.execute('SELECT code_batiment, nom_batiment FROM BATIMENT ORDER BY nom_batiment')
+    buildings = cur.fetchall()
+    cur.close()
+    
+    etats = ['Bon', 'Moyen', 'Dégradé', 'En ruine']
+    return render_template('inspections/add.html', buildings=buildings, etats=etats)
+
+@inspections_bp.route('/view/<int:id>')
+def view_inspection(id):
+    """View inspection details."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    cur.execute('''
+        SELECT i.*, b.nom_batiment, b.adresse_rue
+        FROM INSPECTION i
+        JOIN BATIMENT b ON i.code_batiment = b.code_batiment
+        WHERE i.id_inspect = %s
+    ''', (id,))
+    inspection = cur.fetchone()
+    cur.close()
+    
+    if not inspection:
+        flash('Inspection non trouvée!', 'warning')
+        return redirect(url_for('inspections.list_inspections'))
+    
+    return render_template('inspections/view.html', inspection=inspection)
+
+@inspections_bp.route('/delete/<int:id>', methods=['POST'])
+def delete_inspection(id):
+    """Delete an inspection."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    try:
+        cur.execute('DELETE FROM INSPECTION WHERE id_inspect = %s', (id,))
+        conn.commit()
+        flash('Inspection supprimée avec succès!', 'success')
+    except Exception as e:
+        conn.rollback()
+        flash(f'Erreur lors de la suppression: {str(e)}', 'danger')
+    finally:
+        cur.close()
+    
+    return redirect(url_for('inspections.list_inspections'))
+
+@inspections_bp.route('/edit/<int:id>', methods=['GET', 'POST'])
+def edit_inspection(id):
+    """Edit an existing inspection."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    if request.method == 'POST':
+        date_visite = request.form['date_visite']
+        rapport = request.form.get('rapport')
+        etat_constate = request.form['etat_constate']
+        
+        try:
+            cur.execute('''
+                UPDATE INSPECTION 
+                SET date_visite = %s, rapport = %s, etat_constate = %s
+                WHERE id_inspect = %s
+            ''', (date_visite, rapport, etat_constate, id))
+            conn.commit()
+            cur.close()
+            flash('Inspection modifiée avec succès!', 'success')
+            return redirect(url_for('inspections.view_inspection', id=id))
+        except Exception as e:
+            conn.rollback()
+            flash(f'Erreur: {str(e)}', 'danger')
+    
+    cur.execute('''
+        SELECT i.id_inspect, i.date_visite, i.etat_constate, i.rapport, 
+               i.code_batiment, b.nom_batiment
+        FROM INSPECTION i
+        JOIN BATIMENT b ON i.code_batiment = b.code_batiment
+        WHERE i.id_inspect = %s
+    ''', (id,))
+    inspection = cur.fetchone()
+    cur.close()
+    
+    if not inspection:
+        flash('Inspection non trouvée!', 'warning')
+        return redirect(url_for('inspections.list_inspections'))
+    
+    etats = ['Bon', 'Moyen', 'Dégradé', 'En ruine']
+    return render_template('inspections/edit.html', inspection=inspection, etats=etats)
\ No newline at end of file
diff --git a/ui-app/app/routes/interventions.py b/ui-app/app/routes/interventions.py
new file mode 100644
index 0000000..4db2091
--- /dev/null
+++ b/ui-app/app/routes/interventions.py
@@ -0,0 +1,261 @@
+from flask import Blueprint, render_template, request, redirect, url_for, flash
+from app.db import get_db
+
+interventions_bp = Blueprint('interventions', __name__, url_prefix='/interventions')
+
+@interventions_bp.route('/')
+def list_interventions():
+    """List all interventions with search and filtering."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    # Get filter parameters
+    search = request.args.get('search', '').strip()
+    statut_filter = request.args.get('statut', '')
+    building_filter = request.args.get('building', '')
+    prestataire_filter = request.args.get('prestataire', '')
+    validated_filter = request.args.get('validated', '')
+    
+    # Base query
+    query = '''
+        SELECT i.id_interv, i.date_debut, i.date_fin, i.type_travaux,
+               i.cout_estime, i.est_validee, i.statut_travaux,
+               b.code_batiment, b.nom_batiment,
+               p.id_prestataire, p.nom_entreprise
+        FROM INTERVENTION i
+        JOIN BATIMENT b ON i.code_batiment = b.code_batiment
+        LEFT JOIN PRESTATAIRE p ON i.id_prestataire = p.id_prestataire
+        WHERE 1=1
+    '''
+    
+    params = []
+    
+    # Search
+    if search:
+        query += ''' AND (
+            LOWER(b.nom_batiment) LIKE LOWER(%s) OR 
+            LOWER(i.type_travaux) LIKE LOWER(%s) OR
+            LOWER(p.nom_entreprise) LIKE LOWER(%s)
+        )'''
+        search_param = f'%{search}%'
+        params.extend([search_param, search_param, search_param])
+    
+    # Statut filter
+    if statut_filter:
+        query += ' AND i.statut_travaux = %s'
+        params.append(statut_filter)
+    
+    # Building filter
+    if building_filter:
+        query += ' AND i.code_batiment = %s'
+        params.append(building_filter)
+    
+    # Prestataire filter
+    if prestataire_filter:
+        query += ' AND i.id_prestataire = %s'
+        params.append(prestataire_filter)
+    
+    # Validated filter
+    if validated_filter == 'yes':
+        query += ' AND i.est_validee = TRUE'
+    elif validated_filter == 'no':
+        query += ' AND (i.est_validee = FALSE OR i.est_validee IS NULL)'
+    
+    query += ' ORDER BY i.date_debut DESC'
+    
+    cur.execute(query, params)
+    interventions = cur.fetchall()
+    
+    # Get filter dropdown data
+    cur.execute('SELECT DISTINCT statut_travaux FROM INTERVENTION WHERE statut_travaux IS NOT NULL ORDER BY statut_travaux')
+    statuts = cur.fetchall()
+    
+    cur.execute('SELECT code_batiment, nom_batiment FROM BATIMENT ORDER BY nom_batiment')
+    buildings = cur.fetchall()
+    
+    cur.execute('SELECT id_prestataire, nom_entreprise FROM PRESTATAIRE ORDER BY nom_entreprise')
+    prestataires = cur.fetchall()
+    
+    cur.close()
+    
+    return render_template('interventions/list.html',
+                          interventions=interventions,
+                          statuts=statuts,
+                          buildings=buildings,
+                          prestataires=prestataires,
+                          current_search=search,
+                          current_statut=statut_filter,
+                          current_building=building_filter,
+                          current_prestataire=prestataire_filter,
+                          current_validated=validated_filter)
+
+@interventions_bp.route('/add', methods=['GET', 'POST'])
+def add_intervention():
+    """Add a new intervention."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    if request.method == 'POST':
+        date_debut = request.form.get('date_debut') or None
+        date_fin = request.form.get('date_fin') or None
+        type_travaux = request.form.get('type_travaux')
+        cout_estime = request.form.get('cout_estime') or None
+        code_batiment = request.form['code_batiment']
+        id_prestataire = request.form['id_prestataire']
+        statut_travaux = request.form.get('statut_travaux', 'Planifié')
+        
+        try:
+            cur.execute('''
+                INSERT INTO INTERVENTION (date_debut, date_fin, type_travaux, 
+                                          cout_estime, code_batiment, id_prestataire, statut_travaux)
+                VALUES (%s, %s, %s, %s, %s, %s, %s)
+            ''', (date_debut, date_fin, type_travaux, cout_estime, 
+                  code_batiment, id_prestataire, statut_travaux))
+            conn.commit()
+            flash('Intervention ajoutée avec succès!', 'success')
+            return redirect(url_for('interventions.list_interventions'))
+        except Exception as e:
+            conn.rollback()
+            flash(f'Erreur: {str(e)}', 'danger')
+        finally:
+            cur.close()
+    
+    # GET: Load dropdowns
+    cur.execute('SELECT code_batiment, nom_batiment FROM BATIMENT ORDER BY nom_batiment')
+    buildings = cur.fetchall()
+    cur.execute('SELECT id_prestataire, nom_entreprise, role_prest FROM PRESTATAIRE ORDER BY nom_entreprise')
+    prestataires = cur.fetchall()
+    cur.close()
+    
+    statuts = ['Planifié', 'En cours', 'Terminé', 'Annulé']
+    return render_template('interventions/add.html', 
+                          buildings=buildings, 
+                          prestataires=prestataires, 
+                          statuts=statuts)
+
+@interventions_bp.route('/view/<int:id>')
+def view_intervention(id):
+    """View intervention details."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    cur.execute('''
+        SELECT i.id_interv, i.date_debut, i.date_fin, i.type_travaux, 
+               i.cout_estime, i.est_validee, i.statut_travaux,
+               i.code_batiment, i.id_prestataire, i.date_validation,
+               i.commentaire_validation,
+               b.nom_batiment, b.adresse_rue,
+               p.nom_entreprise, p.role_prest
+        FROM INTERVENTION i
+        JOIN BATIMENT b ON i.code_batiment = b.code_batiment
+        JOIN PRESTATAIRE p ON i.id_prestataire = p.id_prestataire
+        WHERE i.id_interv = %s
+    ''', (id,))
+    intervention = cur.fetchone()
+    cur.close()
+    
+    if not intervention:
+        flash('Intervention non trouvée!', 'warning')
+        return redirect(url_for('interventions.list_interventions'))
+    
+    return render_template('interventions/view.html', intervention=intervention)
+
+@interventions_bp.route('/validate/<int:id>', methods=['POST'])
+def validate_intervention(id):
+    """Validate an intervention (municipal service approval)."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    commentaire = request.form.get('commentaire_validation', '')
+    
+    try:
+        cur.execute('''
+            UPDATE INTERVENTION 
+            SET est_validee = TRUE, 
+                date_validation = CURRENT_DATE,
+                commentaire_validation = %s
+            WHERE id_interv = %s
+        ''', (commentaire, id))
+        conn.commit()
+        flash('Intervention validée avec succès!', 'success')
+    except Exception as e:
+        conn.rollback()
+        flash(f'Erreur: {str(e)}', 'danger')
+    finally:
+        cur.close()
+    
+    return redirect(url_for('interventions.view_intervention', id=id))
+
+@interventions_bp.route('/delete/<int:id>', methods=['POST'])
+def delete_intervention(id):
+    """Delete an intervention."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    try:
+        cur.execute('DELETE FROM INTERVENTION WHERE id_interv = %s', (id,))
+        conn.commit()
+        flash('Intervention supprimée!', 'success')
+    except Exception as e:
+        conn.rollback()
+        flash(f'Erreur: {str(e)}', 'danger')
+    finally:
+        cur.close()
+    
+    return redirect(url_for('interventions.list_interventions'))
+
+@interventions_bp.route('/edit/<int:id>', methods=['GET', 'POST'])
+def edit_intervention(id):
+    """Edit an existing intervention."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    if request.method == 'POST':
+        date_debut = request.form.get('date_debut') or None
+        date_fin = request.form.get('date_fin') or None
+        type_travaux = request.form.get('type_travaux')
+        cout_estime = request.form.get('cout_estime') or None
+        id_prestataire = request.form['id_prestataire']
+        statut_travaux = request.form.get('statut_travaux')
+        
+        try:
+            cur.execute('''
+                UPDATE INTERVENTION 
+                SET date_debut = %s, date_fin = %s, type_travaux = %s,
+                    cout_estime = %s, id_prestataire = %s, statut_travaux = %s
+                WHERE id_interv = %s
+            ''', (date_debut, date_fin, type_travaux, cout_estime, 
+                  id_prestataire, statut_travaux, id))
+            conn.commit()
+            cur.close()
+            flash('Intervention modifiée avec succès!', 'success')
+            return redirect(url_for('interventions.view_intervention', id=id))
+        except Exception as e:
+            conn.rollback()
+            flash(f'Erreur: {str(e)}', 'danger')
+    
+    cur.execute('''
+        SELECT i.id_interv, i.date_debut, i.date_fin, i.type_travaux,
+               i.cout_estime, i.est_validee, i.statut_travaux,
+               i.code_batiment, i.id_prestataire,
+               b.nom_batiment
+        FROM INTERVENTION i
+        JOIN BATIMENT b ON i.code_batiment = b.code_batiment
+        WHERE i.id_interv = %s
+    ''', (id,))
+    intervention = cur.fetchone()
+    
+    if not intervention:
+        cur.close()
+        flash('Intervention non trouvée!', 'warning')
+        return redirect(url_for('interventions.list_interventions'))
+    
+    cur.execute('SELECT id_prestataire, nom_entreprise, role_prest FROM PRESTATAIRE ORDER BY nom_entreprise')
+    prestataires = cur.fetchall()
+    cur.close()
+    
+    statuts = ['Planifié', 'En cours', 'Terminé', 'Annulé']
+    return render_template('interventions/edit.html', 
+                          intervention=intervention, 
+                          prestataires=prestataires,
+                          statuts=statuts)
\ No newline at end of file
diff --git a/ui-app/app/routes/prestataires.py b/ui-app/app/routes/prestataires.py
new file mode 100644
index 0000000..26e91e9
--- /dev/null
+++ b/ui-app/app/routes/prestataires.py
@@ -0,0 +1,212 @@
+from flask import Blueprint, render_template, request, redirect, url_for, flash
+from app.db import get_db
+
+prestataires_bp = Blueprint('prestataires', __name__, url_prefix='/prestataires')
+
+@prestataires_bp.route('/')
+def list_prestataires():
+    """List all prestataires with search and filtering."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    # Get filter parameters
+    search = request.args.get('search', '').strip()
+    role_filter = request.args.get('role', '')
+    
+    # Base query
+    query = '''
+        SELECT p.id_prestataire, p.nom_entreprise, p.role_prest,
+               COUNT(i.id_interv) as nb_interventions,
+               COALESCE(SUM(i.cout_estime), 0) as total_cout
+        FROM PRESTATAIRE p
+        LEFT JOIN INTERVENTION i ON p.id_prestataire = i.id_prestataire
+        WHERE 1=1
+    '''
+    
+    params = []
+    
+    # Search
+    if search:
+        query += ''' AND (
+            LOWER(p.nom_entreprise) LIKE LOWER(%s) OR 
+            LOWER(p.role_prest) LIKE LOWER(%s)
+        )'''
+        search_param = f'%{search}%'
+        params.extend([search_param, search_param])
+    
+    # Role filter
+    if role_filter:
+        query += ' AND p.role_prest = %s'
+        params.append(role_filter)
+    
+    query += ' GROUP BY p.id_prestataire, p.nom_entreprise, p.role_prest'
+    query += ' ORDER BY p.nom_entreprise'
+    
+    cur.execute(query, params)
+    prestataires = cur.fetchall()
+    
+    # Get distinct roles for filter dropdown
+    cur.execute('SELECT DISTINCT role_prest FROM PRESTATAIRE WHERE role_prest IS NOT NULL ORDER BY role_prest')
+    roles = cur.fetchall()
+    
+    cur.close()
+    
+    return render_template('prestataires/list.html',
+                          prestataires=prestataires,
+                          roles=roles,
+                          current_search=search,
+                          current_role=role_filter)
+
+@prestataires_bp.route('/add', methods=['GET', 'POST'])
+def add_prestataire():
+    """Add a new prestataire."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    if request.method == 'POST':
+        nom_entreprise = request.form['nom_entreprise']
+        role_prest = request.form.get('role_prest') or None
+        
+        try:
+            # Let PostgreSQL auto-generate the ID (don't specify id_prestataire)
+            cur.execute('''
+                INSERT INTO PRESTATAIRE (nom_entreprise, role_prest)
+                VALUES (%s, %s)
+                RETURNING id_prestataire
+            ''', (nom_entreprise, role_prest))
+            new_id = cur.fetchone()[0]
+            conn.commit()
+            flash(f'Prestataire ajouté avec succès! (ID: {new_id})', 'success')
+            return redirect(url_for('prestataires.list_prestataires'))
+        except Exception as e:
+            conn.rollback()
+            flash(f'Erreur lors de l\'ajout: {str(e)}', 'danger')
+        finally:
+            cur.close()
+    
+    # GET: Load existing roles from database for suggestions
+    cur.execute('SELECT DISTINCT role_prest FROM PRESTATAIRE WHERE role_prest IS NOT NULL ORDER BY role_prest')
+    existing_roles = [r[0] for r in cur.fetchall()]
+    cur.close()
+    
+    return render_template('prestataires/add.html', existing_roles=existing_roles)
+
+@prestataires_bp.route('/view/<int:id>')
+def view_prestataire(id):
+    """View prestataire details with their interventions."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    # Get prestataire details
+    cur.execute('''
+        SELECT id_prestataire, nom_entreprise, role_prest
+        FROM PRESTATAIRE
+        WHERE id_prestataire = %s
+    ''', (id,))
+    prestataire = cur.fetchone()
+    
+    if not prestataire:
+        flash('Prestataire non trouvé!', 'warning')
+        return redirect(url_for('prestataires.list_prestataires'))
+    
+    # Get interventions by this prestataire
+    cur.execute('''
+        SELECT i.id_interv, i.date_debut, i.date_fin, i.type_travaux,
+               i.cout_estime, i.est_validee, i.statut_travaux,
+               b.code_batiment, b.nom_batiment
+        FROM INTERVENTION i
+        JOIN BATIMENT b ON i.code_batiment = b.code_batiment
+        WHERE i.id_prestataire = %s
+        ORDER BY i.date_debut DESC
+    ''', (id,))
+    interventions = cur.fetchall()
+    
+    # Get statistics
+    cur.execute('''
+        SELECT 
+            COUNT(*) as total,
+            COUNT(CASE WHEN est_validee = TRUE THEN 1 END) as validated,
+            COUNT(CASE WHEN statut_travaux = 'En cours' THEN 1 END) as en_cours,
+            COUNT(CASE WHEN statut_travaux = 'Terminé' THEN 1 END) as termines,
+            COALESCE(SUM(cout_estime), 0) as total_cout
+        FROM INTERVENTION
+        WHERE id_prestataire = %s
+    ''', (id,))
+    stats = cur.fetchone()
+    
+    cur.close()
+    
+    return render_template('prestataires/view.html', 
+                          prestataire=prestataire, 
+                          interventions=interventions,
+                          stats=stats)
+
+@prestataires_bp.route('/edit/<int:id>', methods=['GET', 'POST'])
+def edit_prestataire(id):
+    """Edit an existing prestataire."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    if request.method == 'POST':
+        nom_entreprise = request.form['nom_entreprise']
+        role_prest = request.form.get('role_prest') or None
+        
+        try:
+            cur.execute('''
+                UPDATE PRESTATAIRE 
+                SET nom_entreprise = %s, role_prest = %s
+                WHERE id_prestataire = %s
+            ''', (nom_entreprise, role_prest, id))
+            conn.commit()
+            flash('Prestataire modifié avec succès!', 'success')
+            return redirect(url_for('prestataires.view_prestataire', id=id))
+        except Exception as e:
+            conn.rollback()
+            flash(f'Erreur lors de la modification: {str(e)}', 'danger')
+        finally:
+            cur.close()
+    
+    # GET: Load prestataire data
+    cur.execute('''
+        SELECT id_prestataire, nom_entreprise, role_prest
+        FROM PRESTATAIRE
+        WHERE id_prestataire = %s
+    ''', (id,))
+    prestataire = cur.fetchone()
+    
+    if not prestataire:
+        flash('Prestataire non trouvé!', 'warning')
+        return redirect(url_for('prestataires.list_prestataires'))
+    
+    # Load existing roles for suggestions
+    cur.execute('SELECT DISTINCT role_prest FROM PRESTATAIRE WHERE role_prest IS NOT NULL ORDER BY role_prest')
+    existing_roles = [r[0] for r in cur.fetchall()]
+    cur.close()
+    
+    return render_template('prestataires/edit.html', prestataire=prestataire, existing_roles=existing_roles)
+
+@prestataires_bp.route('/delete/<int:id>', methods=['POST'])
+def delete_prestataire(id):
+    """Delete a prestataire."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    try:
+        # Check if prestataire has interventions
+        cur.execute('SELECT COUNT(*) FROM INTERVENTION WHERE id_prestataire = %s', (id,))
+        count = cur.fetchone()[0]
+        
+        if count > 0:
+            flash(f'Impossible de supprimer: ce prestataire a {count} intervention(s) associée(s).', 'danger')
+            return redirect(url_for('prestataires.view_prestataire', id=id))
+        
+        cur.execute('DELETE FROM PRESTATAIRE WHERE id_prestataire = %s', (id,))
+        conn.commit()
+        flash('Prestataire supprimé avec succès!', 'success')
+    except Exception as e:
+        conn.rollback()
+        flash(f'Erreur: {str(e)}', 'danger')
+    finally:
+        cur.close()
+    
+    return redirect(url_for('prestataires.list_prestataires'))
\ No newline at end of file
diff --git a/ui-app/app/routes/proprietaires.py b/ui-app/app/routes/proprietaires.py
new file mode 100644
index 0000000..75ea0dd
--- /dev/null
+++ b/ui-app/app/routes/proprietaires.py
@@ -0,0 +1,197 @@
+from flask import Blueprint, render_template, request, redirect, url_for, flash
+from app.db import get_db
+
+proprietaires_bp = Blueprint('proprietaires', __name__, url_prefix='/proprietaires')
+
+@proprietaires_bp.route('/')
+def list_proprietaires():
+    """List all proprietaires with search and filtering."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    # Get filter parameters
+    search = request.args.get('search', '').strip()
+    type_filter = request.args.get('type_proprio', '')
+    
+    # Base query with building count
+    query = '''
+        SELECT p.id_proprio, p.nom_complet, p.type_proprio, p.contact,
+               COUNT(b.code_batiment) as nb_batiments
+        FROM PROPRIETAIRE p
+        LEFT JOIN BATIMENT b ON p.id_proprio = b.id_proprio
+        WHERE 1=1
+    '''
+    
+    params = []
+    
+    # Search
+    if search:
+        query += ''' AND (
+            LOWER(p.nom_complet) LIKE LOWER(%s) OR 
+            LOWER(p.contact) LIKE LOWER(%s)
+        )'''
+        search_param = f'%{search}%'
+        params.extend([search_param, search_param])
+    
+    # Type filter
+    if type_filter:
+        query += ' AND p.type_proprio = %s'
+        params.append(type_filter)
+    
+    query += ' GROUP BY p.id_proprio, p.nom_complet, p.type_proprio, p.contact'
+    query += ' ORDER BY p.nom_complet'
+    
+    cur.execute(query, params)
+    proprietaires = cur.fetchall()
+    
+    # Get distinct types for filter dropdown
+    cur.execute('SELECT DISTINCT type_proprio FROM PROPRIETAIRE WHERE type_proprio IS NOT NULL ORDER BY type_proprio')
+    types = cur.fetchall()
+    
+    cur.close()
+    
+    return render_template('proprietaires/list.html',
+                          proprietaires=proprietaires,
+                          types=types,
+                          current_search=search,
+                          current_type=type_filter)
+
+@proprietaires_bp.route('/add', methods=['GET', 'POST'])
+def add_proprietaire():
+    """Add a new proprietaire."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    if request.method == 'POST':
+        nom_complet = request.form['nom_complet']
+        type_proprio = request.form.get('type_proprio') or None
+        contact = request.form.get('contact') or None
+        
+        try:
+            cur.execute('''
+                INSERT INTO PROPRIETAIRE (nom_complet, type_proprio, contact)
+                VALUES (%s, %s, %s)
+                RETURNING id_proprio
+            ''', (nom_complet, type_proprio, contact))
+            new_id = cur.fetchone()[0]
+            conn.commit()
+            flash(f'Propriétaire "{nom_complet}" ajouté avec succès! (ID: {new_id})', 'success')
+            return redirect(url_for('proprietaires.list_proprietaires'))
+        except Exception as e:
+            conn.rollback()
+            flash(f'Erreur lors de l\'ajout: {str(e)}', 'danger')
+        # Don't close cursor here - we need it for GET request fallback
+    
+    # GET: Load existing types for suggestions
+    cur.execute('SELECT DISTINCT type_proprio FROM PROPRIETAIRE WHERE type_proprio IS NOT NULL ORDER BY type_proprio')
+    existing_types = [t[0] for t in cur.fetchall()]
+    cur.close()
+    
+    return render_template('proprietaires/add.html', existing_types=existing_types)
+
+@proprietaires_bp.route('/view/<int:id>')
+def view_proprietaire(id):
+    """View proprietaire details with their buildings."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    # Get proprietaire details
+    cur.execute('''
+        SELECT id_proprio, nom_complet, type_proprio, contact
+        FROM PROPRIETAIRE
+        WHERE id_proprio = %s
+    ''', (id,))
+    proprietaire = cur.fetchone()
+    
+    if not proprietaire:
+        flash('Propriétaire non trouvé!', 'warning')
+        return redirect(url_for('proprietaires.list_proprietaires'))
+    
+    # Get buildings owned by this proprietaire
+    cur.execute('''
+        SELECT b.code_batiment, b.nom_batiment, b.adresse_rue,
+               z.nom_zone, t.libelle_type
+        FROM BATIMENT b
+        LEFT JOIN ZONE_URBAINE z ON b.id_zone = z.id_zone
+        LEFT JOIN TYPE_BATIMENT t ON b.id_type = t.id_type
+        WHERE b.id_proprio = %s
+        ORDER BY b.nom_batiment
+    ''', (id,))
+    buildings = cur.fetchall()
+    
+    cur.close()
+    
+    return render_template('proprietaires/view.html', 
+                          proprietaire=proprietaire, 
+                          buildings=buildings)
+
+@proprietaires_bp.route('/edit/<int:id>', methods=['GET', 'POST'])
+def edit_proprietaire(id):
+    """Edit an existing proprietaire."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    if request.method == 'POST':
+        nom_complet = request.form['nom_complet']
+        type_proprio = request.form.get('type_proprio') or None
+        contact = request.form.get('contact') or None
+        
+        try:
+            cur.execute('''
+                UPDATE PROPRIETAIRE 
+                SET nom_complet = %s, type_proprio = %s, contact = %s
+                WHERE id_proprio = %s
+            ''', (nom_complet, type_proprio, contact, id))
+            conn.commit()
+            flash('Propriétaire modifié avec succès!', 'success')
+            return redirect(url_for('proprietaires.view_proprietaire', id=id))
+        except Exception as e:
+            conn.rollback()
+            flash(f'Erreur lors de la modification: {str(e)}', 'danger')
+        finally:
+            cur.close()
+    
+    # GET: Load proprietaire data
+    cur.execute('''
+        SELECT id_proprio, nom_complet, type_proprio, contact
+        FROM PROPRIETAIRE
+        WHERE id_proprio = %s
+    ''', (id,))
+    proprietaire = cur.fetchone()
+    
+    if not proprietaire:
+        flash('Propriétaire non trouvé!', 'warning')
+        return redirect(url_for('proprietaires.list_proprietaires'))
+    
+    # Load existing types for suggestions
+    cur.execute('SELECT DISTINCT type_proprio FROM PROPRIETAIRE WHERE type_proprio IS NOT NULL ORDER BY type_proprio')
+    existing_types = [t[0] for t in cur.fetchall()]
+    cur.close()
+    
+    return render_template('proprietaires/edit.html', proprietaire=proprietaire, existing_types=existing_types)
+
+@proprietaires_bp.route('/delete/<int:id>', methods=['POST'])
+def delete_proprietaire(id):
+    """Delete a proprietaire."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    try:
+        # Check if proprietaire has buildings
+        cur.execute('SELECT COUNT(*) FROM BATIMENT WHERE id_proprio = %s', (id,))
+        count = cur.fetchone()[0]
+        
+        if count > 0:
+            flash(f'Impossible de supprimer: ce propriétaire possède {count} bâtiment(s).', 'danger')
+            return redirect(url_for('proprietaires.view_proprietaire', id=id))
+        
+        cur.execute('DELETE FROM PROPRIETAIRE WHERE id_proprio = %s', (id,))
+        conn.commit()
+        flash('Propriétaire supprimé avec succès!', 'success')
+    except Exception as e:
+        conn.rollback()
+        flash(f'Erreur: {str(e)}', 'danger')
+    finally:
+        cur.close()
+    
+    return redirect(url_for('proprietaires.list_proprietaires'))
\ No newline at end of file
diff --git a/ui-app/app/routes/protections.py b/ui-app/app/routes/protections.py
new file mode 100644
index 0000000..1d443de
--- /dev/null
+++ b/ui-app/app/routes/protections.py
@@ -0,0 +1,171 @@
+from flask import Blueprint, render_template, request, redirect, url_for, flash
+from app.db import get_db
+
+protections_bp = Blueprint('protections', __name__, url_prefix='/protections')
+
+@protections_bp.route('/')
+def list_protections():
+    """List all protection levels with building count."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    # Get filter parameters
+    search = request.args.get('search', '').strip()
+    
+    # Base query with building count
+    query = '''
+        SELECT n.id_protection, n.niveau,
+               COUNT(b.code_batiment) as nb_batiments
+        FROM NIV_PROTECTION n
+        LEFT JOIN BATIMENT b ON n.id_protection = b.id_protection
+        WHERE 1=1
+    '''
+    
+    params = []
+    
+    if search:
+        query += ' AND LOWER(n.niveau) LIKE LOWER(%s)'
+        params.append(f'%{search}%')
+    
+    query += ' GROUP BY n.id_protection, n.niveau'
+    query += ' ORDER BY n.niveau'
+    
+    cur.execute(query, params)
+    protections = cur.fetchall()
+    cur.close()
+    
+    return render_template('protections/list.html',
+                          protections=protections,
+                          current_search=search)
+
+@protections_bp.route('/add', methods=['GET', 'POST'])
+def add_protection():
+    """Add a new protection level."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    if request.method == 'POST':
+        niveau = request.form['niveau']
+        
+        try:
+            cur.execute('''
+                INSERT INTO NIV_PROTECTION (niveau)
+                VALUES (%s)
+                RETURNING id_protection
+            ''', (niveau,))
+            new_id = cur.fetchone()[0]
+            conn.commit()
+            flash(f'Niveau de protection "{niveau}" ajouté avec succès! (ID: {new_id})', 'success')
+            return redirect(url_for('protections.list_protections'))
+        except Exception as e:
+            conn.rollback()
+            flash(f'Erreur lors de l\'ajout: {str(e)}', 'danger')
+        finally:
+            cur.close()
+    
+    return render_template('protections/add.html')
+
+@protections_bp.route('/view/<int:id>')
+def view_protection(id):
+    """View protection level details with its buildings."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    # Get protection details
+    cur.execute('''
+        SELECT id_protection, niveau
+        FROM NIV_PROTECTION
+        WHERE id_protection = %s
+    ''', (id,))
+    protection = cur.fetchone()
+    
+    if not protection:
+        flash('Niveau de protection non trouvé!', 'warning')
+        return redirect(url_for('protections.list_protections'))
+    
+    # Get buildings with this protection level
+    cur.execute('''
+        SELECT b.code_batiment, b.nom_batiment, b.adresse_rue,
+               z.nom_zone, t.libelle_type,
+               (SELECT i.etat_constate FROM INSPECTION i 
+                WHERE i.code_batiment = b.code_batiment 
+                ORDER BY i.date_visite DESC LIMIT 1) as dernier_etat
+        FROM BATIMENT b
+        LEFT JOIN ZONE_URBAINE z ON b.id_zone = z.id_zone
+        LEFT JOIN TYPE_BATIMENT t ON b.id_type = t.id_type
+        WHERE b.id_protection = %s
+        ORDER BY b.nom_batiment
+    ''', (id,))
+    buildings = cur.fetchall()
+    
+    cur.close()
+    
+    return render_template('protections/view.html', 
+                          protection=protection, 
+                          buildings=buildings)
+
+@protections_bp.route('/edit/<int:id>', methods=['GET', 'POST'])
+def edit_protection(id):
+    """Edit an existing protection level."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    if request.method == 'POST':
+        niveau = request.form['niveau']
+        
+        try:
+            cur.execute('''
+                UPDATE NIV_PROTECTION 
+                SET niveau = %s
+                WHERE id_protection = %s
+            ''', (niveau, id))
+            conn.commit()
+            flash('Niveau de protection modifié avec succès!', 'success')
+            return redirect(url_for('protections.view_protection', id=id))
+        except Exception as e:
+            conn.rollback()
+            flash(f'Erreur lors de la modification: {str(e)}', 'danger')
+        finally:
+            cur.close()
+    
+    # GET: Load protection data
+    cur.execute('''
+        SELECT id_protection, niveau
+        FROM NIV_PROTECTION
+        WHERE id_protection = %s
+    ''', (id,))
+    protection = cur.fetchone()
+    
+    if not protection:
+        flash('Niveau de protection non trouvé!', 'warning')
+        return redirect(url_for('protections.list_protections'))
+    
+    cur.close()
+    
+    return render_template('protections/edit.html', protection=protection)
+
+@protections_bp.route('/delete/<int:id>', methods=['POST'])
+def delete_protection(id):
+    """Delete a protection level."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    try:
+        # Check if protection level has buildings
+        cur.execute('SELECT COUNT(*) FROM BATIMENT WHERE id_protection = %s', (id,))
+        count = cur.fetchone()[0]
+        
+        if count > 0:
+            flash(f'Impossible de supprimer: ce niveau de protection est utilisé par {count} bâtiment(s).', 'danger')
+            return redirect(url_for('protections.view_protection', id=id))
+        
+        cur.execute('DELETE FROM NIV_PROTECTION WHERE id_protection = %s', (id,))
+        conn.commit()
+        flash('Niveau de protection supprimé avec succès!', 'success')
+    except Exception as e:
+        conn.rollback()
+        flash(f'Erreur: {str(e)}', 'danger')
+    finally:
+        cur.close()
+    
+    return redirect(url_for('protections.list_protections'))
\ No newline at end of file
diff --git a/ui-app/app/routes/types.py b/ui-app/app/routes/types.py
new file mode 100644
index 0000000..26b4ace
--- /dev/null
+++ b/ui-app/app/routes/types.py
@@ -0,0 +1,173 @@
+from flask import Blueprint, render_template, request, redirect, url_for, flash
+from app.db import get_db
+
+types_bp = Blueprint('types', __name__, url_prefix='/types')
+
+@types_bp.route('/')
+def list_types():
+    """List all building types."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    search = request.args.get('search', '').strip()
+    
+    query = '''
+        SELECT t.id_type, t.libelle_type,
+               COUNT(b.code_batiment) as nb_batiments
+        FROM TYPE_BATIMENT t
+        LEFT JOIN BATIMENT b ON t.id_type = b.id_type
+        WHERE 1=1
+    '''
+    params = []
+    
+    if search:
+        query += ' AND LOWER(t.libelle_type) LIKE LOWER(%s)'
+        params.append(f'%{search}%')
+    
+    query += ' GROUP BY t.id_type, t.libelle_type ORDER BY t.libelle_type'
+    
+    cur.execute(query, params)
+    types = cur.fetchall()
+    cur.close()
+    
+    return render_template('types/list.html', types=types, current_search=search)
+
+@types_bp.route('/add', methods=['GET', 'POST'])
+def add_type():
+    """Add a new building type."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    if request.method == 'POST':
+        libelle_type = request.form['libelle_type']
+        
+        try:
+            cur.execute('''
+                INSERT INTO TYPE_BATIMENT (libelle_type)
+                VALUES (%s)
+                RETURNING id_type
+            ''', (libelle_type,))
+            new_id = cur.fetchone()[0]
+            conn.commit()
+            cur.close()
+            flash(f'Type "{libelle_type}" ajouté avec succès! (ID: {new_id})', 'success')
+            return redirect(url_for('types.list_types'))
+        except Exception as e:
+            conn.rollback()
+            flash(f'Erreur: {str(e)}', 'danger')
+    
+    cur.close()
+    return render_template('types/add.html')
+
+@types_bp.route('/view/<int:id>')
+def view_type(id):
+    """View building type details with its buildings."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    # Get type details
+    cur.execute('''
+        SELECT id_type, libelle_type
+        FROM TYPE_BATIMENT
+        WHERE id_type = %s
+    ''', (id,))
+    type_bat = cur.fetchone()
+    
+    if not type_bat:
+        flash('Type non trouvé!', 'warning')
+        return redirect(url_for('types.list_types'))
+    
+    # Get buildings with this type
+    cur.execute('''
+        SELECT b.code_batiment, b.nom_batiment, b.adresse_rue,
+               z.nom_zone, n.niveau,
+               (SELECT i.etat_constate FROM INSPECTION i 
+                WHERE i.code_batiment = b.code_batiment 
+                ORDER BY i.date_visite DESC LIMIT 1) as dernier_etat
+        FROM BATIMENT b
+        LEFT JOIN ZONE_URBAINE z ON b.id_zone = z.id_zone
+        LEFT JOIN NIV_PROTECTION n ON b.id_protection = n.id_protection
+        WHERE b.id_type = %s
+        ORDER BY b.nom_batiment
+    ''', (id,))
+    buildings = cur.fetchall()
+    
+    # Get statistics
+    cur.execute('''
+        SELECT 
+            COUNT(*) as total,
+            COUNT(CASE WHEN (SELECT i.etat_constate FROM INSPECTION i 
+                            WHERE i.code_batiment = b.code_batiment 
+                            ORDER BY i.date_visite DESC LIMIT 1) = 'Bon' THEN 1 END) as bon,
+            COUNT(CASE WHEN (SELECT i.etat_constate FROM INSPECTION i 
+                            WHERE i.code_batiment = b.code_batiment 
+                            ORDER BY i.date_visite DESC LIMIT 1) = 'Moyen' THEN 1 END) as moyen,
+            COUNT(CASE WHEN (SELECT i.etat_constate FROM INSPECTION i 
+                            WHERE i.code_batiment = b.code_batiment 
+                            ORDER BY i.date_visite DESC LIMIT 1) IN ('Dégradé', 'En ruine') THEN 1 END) as urgent
+        FROM BATIMENT b
+        WHERE b.id_type = %s
+    ''', (id,))
+    stats = cur.fetchone()
+    
+    cur.close()
+    
+    return render_template('types/view.html', 
+                          type_bat=type_bat, 
+                          buildings=buildings,
+                          stats=stats)
+
+@types_bp.route('/edit/<int:id>', methods=['GET', 'POST'])
+def edit_type(id):
+    """Edit a building type."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    if request.method == 'POST':
+        libelle_type = request.form['libelle_type']
+        
+        try:
+            cur.execute('UPDATE TYPE_BATIMENT SET libelle_type = %s WHERE id_type = %s', 
+                       (libelle_type, id))
+            conn.commit()
+            cur.close()
+            flash('Type modifié avec succès!', 'success')
+            return redirect(url_for('types.view_type', id=id))
+        except Exception as e:
+            conn.rollback()
+            flash(f'Erreur: {str(e)}', 'danger')
+    
+    cur.execute('SELECT id_type, libelle_type FROM TYPE_BATIMENT WHERE id_type = %s', (id,))
+    type_bat = cur.fetchone()
+    cur.close()
+    
+    if not type_bat:
+        flash('Type non trouvé!', 'warning')
+        return redirect(url_for('types.list_types'))
+    
+    return render_template('types/edit.html', type_bat=type_bat)
+
+@types_bp.route('/delete/<int:id>', methods=['POST'])
+def delete_type(id):
+    """Delete a building type."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    try:
+        cur.execute('SELECT COUNT(*) FROM BATIMENT WHERE id_type = %s', (id,))
+        count = cur.fetchone()[0]
+        
+        if count > 0:
+            flash(f'Impossible: ce type est utilisé par {count} bâtiment(s).', 'danger')
+            return redirect(url_for('types.view_type', id=id))
+        
+        cur.execute('DELETE FROM TYPE_BATIMENT WHERE id_type = %s', (id,))
+        conn.commit()
+        flash('Type supprimé!', 'success')
+    except Exception as e:
+        conn.rollback()
+        flash(f'Erreur: {str(e)}', 'danger')
+    finally:
+        cur.close()
+    
+    return redirect(url_for('types.list_types'))
\ No newline at end of file
diff --git a/ui-app/app/routes/zones.py b/ui-app/app/routes/zones.py
new file mode 100644
index 0000000..5c9e8ce
--- /dev/null
+++ b/ui-app/app/routes/zones.py
@@ -0,0 +1,219 @@
+from flask import Blueprint, render_template, request, redirect, url_for, flash
+from app.db import get_db
+
+zones_bp = Blueprint('zones', __name__, url_prefix='/zones')
+
+@zones_bp.route('/')
+def list_zones():
+    """List all zones with search and filtering."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    # Get filter parameters
+    search = request.args.get('search', '').strip()
+    type_filter = request.args.get('type_zone', '')
+    
+    # Base query with building count
+    query = '''
+        SELECT z.id_zone, z.nom_zone, z.type_zone,
+               COUNT(b.code_batiment) as nb_batiments
+        FROM ZONE_URBAINE z
+        LEFT JOIN BATIMENT b ON z.id_zone = b.id_zone
+        WHERE 1=1
+    '''
+    
+    params = []
+    
+    # Search
+    if search:
+        query += ''' AND (
+            LOWER(z.nom_zone) LIKE LOWER(%s) OR 
+            LOWER(z.type_zone) LIKE LOWER(%s)
+        )'''
+        search_param = f'%{search}%'
+        params.extend([search_param, search_param])
+    
+    # Type filter
+    if type_filter:
+        query += ' AND z.type_zone = %s'
+        params.append(type_filter)
+    
+    query += ' GROUP BY z.id_zone, z.nom_zone, z.type_zone'
+    query += ' ORDER BY z.nom_zone'
+    
+    cur.execute(query, params)
+    zones = cur.fetchall()
+    
+    # Get distinct types for filter dropdown
+    cur.execute('SELECT DISTINCT type_zone FROM ZONE_URBAINE WHERE type_zone IS NOT NULL ORDER BY type_zone')
+    types = cur.fetchall()
+    
+    cur.close()
+    
+    return render_template('zones/list.html',
+                          zones=zones,
+                          types=types,
+                          current_search=search,
+                          current_type=type_filter)
+
+@zones_bp.route('/add', methods=['GET', 'POST'])
+def add_zone():
+    """Add a new zone."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    if request.method == 'POST':
+        nom_zone = request.form['nom_zone']
+        type_zone = request.form.get('type_zone') or None
+        
+        try:
+            cur.execute('''
+                INSERT INTO ZONE_URBAINE (nom_zone, type_zone)
+                VALUES (%s, %s)
+                RETURNING id_zone
+            ''', (nom_zone, type_zone))
+            new_id = cur.fetchone()[0]
+            conn.commit()
+            cur.close()
+            flash(f'Zone "{nom_zone}" ajoutée avec succès! (ID: {new_id})', 'success')
+            return redirect(url_for('zones.list_zones'))
+        except Exception as e:
+            conn.rollback()
+            flash(f'Erreur lors de l\'ajout: {str(e)}', 'danger')
+            # Don't close cursor here - we need it for the form below
+    
+    # GET or POST with error: Load existing types for suggestions
+    cur.execute('SELECT DISTINCT type_zone FROM ZONE_URBAINE WHERE type_zone IS NOT NULL ORDER BY type_zone')
+    existing_types = [t[0] for t in cur.fetchall()]
+    cur.close()
+    
+    return render_template('zones/add.html', existing_types=existing_types)
+
+@zones_bp.route('/view/<int:id>')
+def view_zone(id):
+    """View zone details with its buildings."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    # Get zone details
+    cur.execute('''
+        SELECT id_zone, nom_zone, type_zone
+        FROM ZONE_URBAINE
+        WHERE id_zone = %s
+    ''', (id,))
+    zone = cur.fetchone()
+    
+    if not zone:
+        flash('Zone non trouvée!', 'warning')
+        return redirect(url_for('zones.list_zones'))
+    
+    # Get buildings in this zone
+    cur.execute('''
+        SELECT b.code_batiment, b.nom_batiment, b.adresse_rue,
+               t.libelle_type, n.niveau,
+               (SELECT i.etat_constate FROM INSPECTION i 
+                WHERE i.code_batiment = b.code_batiment 
+                ORDER BY i.date_visite DESC LIMIT 1) as dernier_etat
+        FROM BATIMENT b
+        LEFT JOIN TYPE_BATIMENT t ON b.id_type = t.id_type
+        LEFT JOIN NIV_PROTECTION n ON b.id_protection = n.id_protection
+        WHERE b.id_zone = %s
+        ORDER BY b.nom_batiment
+    ''', (id,))
+    buildings = cur.fetchall()
+    
+    # Get statistics for this zone
+    cur.execute('''
+        SELECT 
+            COUNT(*) as total,
+            COUNT(CASE WHEN (SELECT i.etat_constate FROM INSPECTION i 
+                            WHERE i.code_batiment = b.code_batiment 
+                            ORDER BY i.date_visite DESC LIMIT 1) = 'Bon' THEN 1 END) as bon,
+            COUNT(CASE WHEN (SELECT i.etat_constate FROM INSPECTION i 
+                            WHERE i.code_batiment = b.code_batiment 
+                            ORDER BY i.date_visite DESC LIMIT 1) = 'Moyen' THEN 1 END) as moyen,
+            COUNT(CASE WHEN (SELECT i.etat_constate FROM INSPECTION i 
+                            WHERE i.code_batiment = b.code_batiment 
+                            ORDER BY i.date_visite DESC LIMIT 1) IN ('Dégradé', 'En ruine') THEN 1 END) as urgent
+        FROM BATIMENT b
+        WHERE b.id_zone = %s
+    ''', (id,))
+    stats = cur.fetchone()
+    
+    cur.close()
+    
+    return render_template('zones/view.html', 
+                          zone=zone, 
+                          buildings=buildings,
+                          stats=stats)
+
+@zones_bp.route('/edit/<int:id>', methods=['GET', 'POST'])
+def edit_zone(id):
+    """Edit an existing zone."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    if request.method == 'POST':
+        nom_zone = request.form['nom_zone']
+        type_zone = request.form.get('type_zone') or None
+        
+        try:
+            cur.execute('''
+                UPDATE ZONE_URBAINE 
+                SET nom_zone = %s, type_zone = %s
+                WHERE id_zone = %s
+            ''', (nom_zone, type_zone, id))
+            conn.commit()
+            cur.close()
+            flash('Zone modifiée avec succès!', 'success')
+            return redirect(url_for('zones.view_zone', id=id))
+        except Exception as e:
+            conn.rollback()
+            flash(f'Erreur lors de la modification: {str(e)}', 'danger')
+            # Don't close cursor here - we need it for the form below
+    
+    # GET or POST with error: Load zone data
+    cur.execute('''
+        SELECT id_zone, nom_zone, type_zone
+        FROM ZONE_URBAINE
+        WHERE id_zone = %s
+    ''', (id,))
+    zone = cur.fetchone()
+    
+    if not zone:
+        cur.close()
+        flash('Zone non trouvée!', 'warning')
+        return redirect(url_for('zones.list_zones'))
+    
+    # Load existing types for suggestions
+    cur.execute('SELECT DISTINCT type_zone FROM ZONE_URBAINE WHERE type_zone IS NOT NULL ORDER BY type_zone')
+    existing_types = [t[0] for t in cur.fetchall()]
+    cur.close()
+    
+    return render_template('zones/edit.html', zone=zone, existing_types=existing_types)
+
+@zones_bp.route('/delete/<int:id>', methods=['POST'])
+def delete_zone(id):
+    """Delete a zone."""
+    conn = get_db()
+    cur = conn.cursor()
+    
+    try:
+        # Check if zone has buildings
+        cur.execute('SELECT COUNT(*) FROM BATIMENT WHERE id_zone = %s', (id,))
+        count = cur.fetchone()[0]
+        
+        if count > 0:
+            flash(f'Impossible de supprimer: cette zone contient {count} bâtiment(s).', 'danger')
+            return redirect(url_for('zones.view_zone', id=id))
+        
+        cur.execute('DELETE FROM ZONE_URBAINE WHERE id_zone = %s', (id,))
+        conn.commit()
+        flash('Zone supprimée avec succès!', 'success')
+    except Exception as e:
+        conn.rollback()
+        flash(f'Erreur: {str(e)}', 'danger')
+    finally:
+        cur.close()
+    
+    return redirect(url_for('zones.list_zones'))
\ No newline at end of file
diff --git a/ui-app/app/templates/base.html b/ui-app/app/templates/base.html
new file mode 100644
index 0000000..816f801
--- /dev/null
+++ b/ui-app/app/templates/base.html
@@ -0,0 +1,325 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{% block title %}Gestion du Patrimoine Urbain{% endblock %}</title>
+
+    <!-- Bootstrap 5 CSS -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+    <!-- Bootstrap Icons -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"
+    />
+
+    <style>
+      :root {
+        --primary-color: #2c3e50;
+        --secondary-color: #3498db;
+      }
+
+      body {
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .navbar {
+        background: linear-gradient(
+          135deg,
+          var(--primary-color) 0%,
+          var(--secondary-color) 100%
+        );
+        padding: 0.25rem 1rem;
+      }
+
+      .navbar-brand svg {
+        height: 40px;
+        width: auto;
+      }
+
+      .sidebar {
+        min-height: calc(100vh - 56px);
+        background-color: #f8f9fa;
+        border-right: 1px solid #dee2e6;
+      }
+
+      .sidebar .nav-link {
+        color: #495057;
+        padding: 12px 20px;
+        transition: all 0.3s;
+      }
+
+      .sidebar .nav-link:hover,
+      .sidebar .nav-link.active {
+        background-color: var(--secondary-color);
+        color: white;
+        border-radius: 5px;
+      }
+
+      .sidebar .nav-link i {
+        margin-right: 10px;
+        width: 20px;
+      }
+
+      .sidebar .nav-header {
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        color: #6c757d;
+        padding: 15px 20px 5px;
+        font-weight: 600;
+        letter-spacing: 0.5px;
+      }
+
+      .main-content {
+        flex: 1;
+        padding: 30px;
+        background-color: #f5f6fa;
+      }
+
+      .card {
+        border: none;
+        border-radius: 10px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+        margin-bottom: 20px;
+      }
+
+      .stat-card {
+        text-align: center;
+        padding: 20px;
+      }
+
+      .stat-card i {
+        font-size: 3rem;
+        margin-bottom: 15px;
+      }
+
+      .stat-card h3 {
+        font-size: 2.5rem;
+        font-weight: bold;
+        margin-bottom: 5px;
+      }
+
+      .badge-urgent {
+        background-color: #e74c3c;
+      }
+
+      .badge-warning {
+        background-color: #f39c12;
+      }
+
+      .badge-good {
+        background-color: #27ae60;
+      }
+
+      footer {
+        background-color: var(--primary-color);
+        color: white;
+        padding: 20px 0;
+        margin-top: auto;
+      }
+    </style>
+
+    {% block extra_css %}{% endblock %}
+  </head>
+  <body>
+    <!-- Navigation Bar -->
+    <nav class="navbar navbar-expand-lg navbar-dark">
+      <div class="container-fluid">
+        <a
+          class="navbar-brand d-flex align-items-center"
+          href="{{ url_for('dashboard.index') }}"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="200"
+            height="50"
+            viewBox="0 0 300 80"
+          >
+            <rect width="300" height="80" rx="10" fill="none" />
+            <!-- icône: silhouette de bâtiment -->
+            <g transform="translate(12,12)" fill="#ff998b">
+              <rect x="0" y="8" width="16" height="40" rx="2" />
+              <rect x="20" y="0" width="12" height="48" rx="2" />
+              <rect x="36" y="18" width="10" height="30" rx="2" />
+              <rect x="50" y="26" width="6" height="22" rx="2" />
+            </g>
+            <!-- texte -->
+            <text
+              x="90"
+              y="48"
+              font-family="Helvetica, Arial, sans-serif"
+              font-size="20"
+              fill="white"
+              font-weight="600"
+            >
+              Patrimoine Urbain
+            </text>
+            <text
+              x="90"
+              y="64"
+              font-family="Helvetica, Arial, sans-serif"
+              font-size="11"
+              fill="#ffccb8"
+            >
+              Système de Gestion
+            </text>
+          </svg>
+        </a>
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarNav"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+          <ul class="navbar-nav ms-auto">
+            <li class="nav-item">
+              <a class="nav-link" href="{{ url_for('dashboard.index') }}">
+                <i class="bi bi-speedometer2"></i> Tableau de Bord
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+    <div class="container-fluid">
+      <div class="row">
+        <!-- Sidebar -->
+        <nav class="col-md-2 d-md-block sidebar">
+          <div class="position-sticky pt-3">
+            <ul class="nav flex-column">
+              <li class="nav-item">
+                <a
+                  class="nav-link {% if request.endpoint and 'dashboard' in request.endpoint %}active{% endif %}"
+                  href="{{ url_for('dashboard.index') }}"
+                >
+                  <i class="bi bi-speedometer2"></i> Tableau de Bord
+                </a>
+              </li>
+
+              <!-- Main Data -->
+              <li class="nav-header">Données Principales</li>
+              <li class="nav-item">
+                <a
+                  class="nav-link {% if request.endpoint and 'buildings' in request.endpoint %}active{% endif %}"
+                  href="{{ url_for('buildings.list_buildings') }}"
+                >
+                  <i class="bi bi-buildings"></i> Bâtiments
+                </a>
+              </li>
+              <li class="nav-item">
+                <a
+                  class="nav-link {% if request.endpoint and 'inspections' in request.endpoint %}active{% endif %}"
+                  href="{{ url_for('inspections.list_inspections') }}"
+                >
+                  <i class="bi bi-clipboard-check"></i> Inspections
+                </a>
+              </li>
+              <li class="nav-item">
+                <a
+                  class="nav-link {% if request.endpoint and 'interventions' in request.endpoint %}active{% endif %}"
+                  href="{{ url_for('interventions.list_interventions') }}"
+                >
+                  <i class="bi bi-tools"></i> Interventions
+                </a>
+              </li>
+              <li class="nav-item">
+                <a
+                  class="nav-link {% if request.endpoint and 'documents' in request.endpoint %}active{% endif %}"
+                  href="{{ url_for('documents.list_all_documents') }}"
+                >
+                  <i class="bi bi-file-earmark-image"></i> Documents
+                </a>
+              </li>
+
+              <!-- Reference Data -->
+              <li class="nav-header">Données de Référence</li>
+              <li class="nav-item">
+                <a
+                  class="nav-link {% if request.endpoint and 'zones' in request.endpoint %}active{% endif %}"
+                  href="{{ url_for('zones.list_zones') }}"
+                >
+                  <i class="bi bi-geo-alt"></i> Zones
+                </a>
+              </li>
+              <li class="nav-item">
+                <a
+                  class="nav-link {% if request.endpoint and 'types' in request.endpoint %}active{% endif %}"
+                  href="{{ url_for('types.list_types') }}"
+                >
+                  <i class="bi bi-house-door"></i> Types
+                </a>
+              </li>
+              <li class="nav-item">
+                <a
+                  class="nav-link {% if request.endpoint and 'protections' in request.endpoint %}active{% endif %}"
+                  href="{{ url_for('protections.list_protections') }}"
+                >
+                  <i class="bi bi-shield-check"></i> Protections
+                </a>
+              </li>
+              <li class="nav-item">
+                <a
+                  class="nav-link {% if request.endpoint and 'proprietaires' in request.endpoint %}active{% endif %}"
+                  href="{{ url_for('proprietaires.list_proprietaires') }}"
+                >
+                  <i class="bi bi-person-badge"></i> Propriétaires
+                </a>
+              </li>
+              <li class="nav-item">
+                <a
+                  class="nav-link {% if request.endpoint and 'prestataires' in request.endpoint %}active{% endif %}"
+                  href="{{ url_for('prestataires.list_prestataires') }}"
+                >
+                  <i class="bi bi-people"></i> Prestataires
+                </a>
+              </li>
+            </ul>
+          </div>
+        </nav>
+
+        <!-- Main Content -->
+        <main class="col-md-10 ms-sm-auto main-content">
+          <!-- Flash Messages -->
+          {% with messages = get_flashed_messages(with_categories=true) %} {% if
+          messages %} {% for category, message in messages %}
+          <div
+            class="alert alert-{{ category }} alert-dismissible fade show"
+            role="alert"
+          >
+            {{ message }}
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="alert"
+            ></button>
+          </div>
+          {% endfor %} {% endif %} {% endwith %} {% block content %}{% endblock
+          %}
+        </main>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <footer class="text-center">
+      <div class="container">
+        <p class="mb-0">
+          &copy; 2025 Système de Gestion du Patrimoine Urbain - Université
+          Abdelmalek Essaâdi
+        </p>
+      </div>
+    </footer>
+
+    <!-- Bootstrap 5 JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    {% block extra_js %}{% endblock %}
+  </body>
+</html>
diff --git a/ui-app/app/templates/buildings/add.html b/ui-app/app/templates/buildings/add.html
new file mode 100644
index 0000000..59c0d63
--- /dev/null
+++ b/ui-app/app/templates/buildings/add.html
@@ -0,0 +1,105 @@
+{% extends "base.html" %}
+
+{% block title %}Ajouter un Bâtiment{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h1><i class="bi bi-plus-circle"></i> Ajouter un Bâtiment</h1>
+    <a href="{{ url_for('buildings.list_buildings') }}" class="btn btn-secondary">
+        <i class="bi bi-arrow-left"></i> Retour
+    </a>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <form method="POST" action="{{ url_for('buildings.add_building') }}">
+            <div class="row">
+                <div class="col-md-6 mb-3">
+                    <label for="nom_batiment" class="form-label">Nom du Bâtiment <span class="text-danger">*</span></label>
+                    <input type="text" class="form-control" id="nom_batiment" name="nom_batiment" required>
+                </div>
+                
+                <div class="col-md-6 mb-3">
+                    <label for="adresse_rue" class="form-label">Adresse</label>
+                    <input type="text" class="form-control" id="adresse_rue" name="adresse_rue">
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-md-6 mb-3">
+                    <label for="latitude" class="form-label">Latitude</label>
+                    <input type="number" step="0.000001" class="form-control" id="latitude" name="latitude" placeholder="Ex: 35.7595">
+                </div>
+                
+                <div class="col-md-6 mb-3">
+                    <label for="longitude" class="form-label">Longitude</label>
+                    <input type="number" step="0.000001" class="form-control" id="longitude" name="longitude" placeholder="Ex: -5.8340">
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-md-6 mb-3">
+                    <label for="date_construction" class="form-label">Date de Construction</label>
+                    <input type="date" class="form-control" id="date_construction" name="date_construction">
+                </div>
+                
+                <div class="col-md-6 mb-3">
+                    <label for="id_zone" class="form-label">Zone Urbaine</label>
+                    <select class="form-select" id="id_zone" name="id_zone">
+                        <option value="">-- Sélectionner --</option>
+                        {% for zone in zones %}
+                        <option value="{{ zone[0] }}">{{ zone[1] }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-md-4 mb-3">
+                    <label for="id_type" class="form-label">Type de Bâtiment</label>
+                    <select class="form-select" id="id_type" name="id_type">
+                        <option value="">-- Sélectionner --</option>
+                        {% for type in types %}
+                        <option value="{{ type[0] }}">{{ type[1] }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="col-md-4 mb-3">
+                    <label for="id_protection" class="form-label">Niveau de Protection</label>
+                    <select class="form-select" id="id_protection" name="id_protection">
+                        <option value="">-- Sélectionner --</option>
+                        {% for protection in protections %}
+                        <option value="{{ protection[0] }}">{{ protection[1] }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="col-md-4 mb-3">
+                    <label for="id_proprio" class="form-label">Propriétaire</label>
+                    <select class="form-select" id="id_proprio" name="id_proprio">
+                        <option value="">-- Sélectionner --</option>
+                        {% for proprio in proprietaires %}
+                        <option value="{{ proprio[0] }}">{{ proprio[1] }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+            </div>
+
+            <div class="mb-3">
+                <label for="note_historique" class="form-label">Note Historique</label>
+                <textarea class="form-control" id="note_historique" name="note_historique" rows="4"></textarea>
+            </div>
+
+            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+                <a href="{{ url_for('buildings.list_buildings') }}" class="btn btn-secondary">
+                    <i class="bi bi-x-circle"></i> Annuler
+                </a>
+                <button type="submit" class="btn btn-primary">
+                    <i class="bi bi-check-circle"></i> Enregistrer
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/ui-app/app/templates/buildings/edit.html b/ui-app/app/templates/buildings/edit.html
new file mode 100644
index 0000000..9b9be57
--- /dev/null
+++ b/ui-app/app/templates/buildings/edit.html
@@ -0,0 +1,106 @@
+{% extends "base.html" %}
+
+{% block title %}Modifier un Bâtiment{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h1><i class="bi bi-pencil"></i> Modifier un Bâtiment</h1>
+    <a href="{{ url_for('buildings.view_building', id=building[0]) }}" class="btn btn-secondary">
+        <i class="bi bi-arrow-left"></i> Retour
+    </a>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <form method="POST" action="{{ url_for('buildings.edit_building', id=building[0]) }}">
+            <div class="row">
+                <div class="col-md-6 mb-3">
+                    <label for="nom_batiment" class="form-label">Nom du Bâtiment <span class="text-danger">*</span></label>
+                    <input type="text" class="form-control" id="nom_batiment" name="nom_batiment" value="{{ building[1] }}" required>
+                </div>
+                
+                <div class="col-md-6 mb-3">
+                    <label for="adresse_rue" class="form-label">Adresse</label>
+                    <input type="text" class="form-control" id="adresse_rue" name="adresse_rue" value="{{ building[2] or '' }}">
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-md-6 mb-3">
+                    <label for="latitude" class="form-label">Latitude</label>
+                    <input type="number" step="0.000001" class="form-control" id="latitude" name="latitude" value="{{ building[3] or '' }}">
+                </div>
+                
+                <div class="col-md-6 mb-3">
+                    <label for="longitude" class="form-label">Longitude</label>
+                    <input type="number" step="0.000001" class="form-control" id="longitude" name="longitude" value="{{ building[4] or '' }}">
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-md-6 mb-3">
+                    <label for="date_construction" class="form-label">Date de Construction</label>
+                    <input type="date" class="form-control" id="date_construction" name="date_construction" 
+                           value="{{ building[5].strftime('%Y-%m-%d') if building[5] else '' }}">
+                </div>
+                
+                <div class="col-md-6 mb-3">
+                    <label for="id_zone" class="form-label">Zone Urbaine</label>
+                    <select class="form-select" id="id_zone" name="id_zone">
+                        <option value="">-- Sélectionner --</option>
+                        {% for zone in zones %}
+                        <option value="{{ zone[0] }}" {% if building[11] == zone[0] %}selected{% endif %}>{{ zone[1] }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-md-4 mb-3">
+                    <label for="id_type" class="form-label">Type de Bâtiment</label>
+                    <select class="form-select" id="id_type" name="id_type">
+                        <option value="">-- Sélectionner --</option>
+                        {% for type in types %}
+                        <option value="{{ type[0] }}" {% if building[12] == type[0] %}selected{% endif %}>{{ type[1] }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="col-md-4 mb-3">
+                    <label for="id_protection" class="form-label">Niveau de Protection</label>
+                    <select class="form-select" id="id_protection" name="id_protection">
+                        <option value="">-- Sélectionner --</option>
+                        {% for protection in protections %}
+                        <option value="{{ protection[0] }}" {% if building[13] == protection[0] %}selected{% endif %}>{{ protection[1] }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="col-md-4 mb-3">
+                    <label for="id_proprio" class="form-label">Propriétaire</label>
+                    <select class="form-select" id="id_proprio" name="id_proprio">
+                        <option value="">-- Sélectionner --</option>
+                        {% for proprio in proprietaires %}
+                        <option value="{{ proprio[0] }}" {% if building[14] == proprio[0] %}selected{% endif %}>{{ proprio[1] }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+            </div>
+
+            <div class="mb-3">
+                <label for="note_historique" class="form-label">Note Historique</label>
+                <textarea class="form-control" id="note_historique" name="note_historique" rows="4">{{ building[6] or '' }}</textarea>
+            </div>
+
+            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+                <a href="{{ url_for('buildings.view_building', id=building[0]) }}" class="btn btn-secondary">
+                    <i class="bi bi-x-circle"></i> Annuler
+                </a>
+                <button type="submit" class="btn btn-warning">
+                    <i class="bi bi-check-circle"></i> Mettre à Jour
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/ui-app/app/templates/buildings/list.html b/ui-app/app/templates/buildings/list.html
new file mode 100644
index 0000000..170e990
--- /dev/null
+++ b/ui-app/app/templates/buildings/list.html
@@ -0,0 +1,270 @@
+{% extends "base.html" %}
+
+{% block title %}Liste des Bâtiments{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h1><i class="bi bi-buildings"></i> Liste des Bâtiments</h1>
+    <a href="{{ url_for('buildings.add_building') }}" class="btn btn-success">
+        <i class="bi bi-plus-circle"></i> Ajouter un Bâtiment
+    </a>
+</div>
+
+<!-- Search and Filter Card -->
+<div class="card mb-4">
+    <div class="card-header bg-primary text-white">
+        <h5 class="mb-0"><i class="bi bi-search"></i> Recherche et Filtres</h5>
+    </div>
+    <div class="card-body">
+        <form method="GET" action="{{ url_for('buildings.list_buildings') }}" id="filterForm">
+            <div class="row g-3">
+                <!-- Search Box -->
+                <div class="col-md-6 col-lg-4">
+                    <label for="search" class="form-label">
+                        <i class="bi bi-search"></i> Recherche
+                    </label>
+                    <input type="text" class="form-control" id="search" name="search" 
+                           placeholder="Nom, adresse, code..." 
+                           value="{{ current_search }}">
+                </div>
+                
+                <!-- Zone Filter -->
+                <div class="col-md-6 col-lg-2">
+                    <label for="zone" class="form-label">
+                        <i class="bi bi-geo-alt"></i> Zone
+                    </label>
+                    <select class="form-select" id="zone" name="zone">
+                        <option value="">Toutes les zones</option>
+                        {% for z in zones %}
+                        <option value="{{ z[0] }}" {% if current_zone|string == z[0]|string %}selected{% endif %}>
+                            {{ z[1] }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <!-- Type Filter -->
+                <div class="col-md-6 col-lg-2">
+                    <label for="type" class="form-label">
+                        <i class="bi bi-house"></i> Type
+                    </label>
+                    <select class="form-select" id="type" name="type">
+                        <option value="">Tous les types</option>
+                        {% for t in types %}
+                        <option value="{{ t[0] }}" {% if current_type|string == t[0]|string %}selected{% endif %}>
+                            {{ t[1] }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <!-- Protection Filter -->
+                <div class="col-md-6 col-lg-2">
+                    <label for="protection" class="form-label">
+                        <i class="bi bi-shield-check"></i> Protection
+                    </label>
+                    <select class="form-select" id="protection" name="protection">
+                        <option value="">Tous les niveaux</option>
+                        {% for p in protections %}
+                        <option value="{{ p[0] }}" {% if current_protection|string == p[0]|string %}selected{% endif %}>
+                            {{ p[1] }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <!-- État Filter -->
+                <div class="col-md-6 col-lg-2">
+                    <label for="etat" class="form-label">
+                        <i class="bi bi-heart-pulse"></i> État
+                    </label>
+                    <select class="form-select" id="etat" name="etat">
+                        <option value="">Tous les états</option>
+                        {% for e in etats %}
+                        <option value="{{ e[0] }}" {% if current_etat == e[0] %}selected{% endif %}>
+                            {{ e[0] }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+            </div>
+            
+            <!-- Filter Buttons -->
+            <div class="row mt-3">
+                <div class="col-12 d-flex gap-2">
+                    <button type="submit" class="btn btn-primary">
+                        <i class="bi bi-funnel"></i> Appliquer les filtres
+                    </button>
+                    <a href="{{ url_for('buildings.list_buildings') }}" class="btn btn-outline-secondary">
+                        <i class="bi bi-x-circle"></i> Réinitialiser
+                    </a>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- Results Summary -->
+<div class="d-flex justify-content-between align-items-center mb-3">
+    <span class="text-muted">
+        <i class="bi bi-building"></i> {{ buildings|length }} bâtiment(s) trouvé(s)
+        {% if current_search or current_zone or current_type or current_protection or current_etat %}
+        <span class="badge bg-info ms-2">Filtres actifs</span>
+        {% endif %}
+    </span>
+</div>
+
+<!-- Buildings Table -->
+<div class="card">
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table class="table table-hover table-striped mb-0">
+                <thead class="table-dark">
+                    <tr>
+                        <th>Code</th>
+                        <th>Nom du Bâtiment</th>
+                        <th>Adresse</th>
+                        <th>Zone</th>
+                        <th>Type</th>
+                        <th>Protection</th>
+                        <th>État</th>
+                        <th>Coordonnées</th>
+                        <th class="text-center">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% if buildings %}
+                        {% for b in buildings %}
+                        <tr>
+                            <td><strong>{{ b[0] }}</strong></td>
+                            <td>{{ b[1] }}</td>
+                            <td>{{ b[2] or '-' }}</td>
+                            <td>
+                                {% if b[3] %}
+                                <span class="badge bg-primary">{{ b[3] }}</span>
+                                {% else %}
+                                <span class="text-muted">-</span>
+                                {% endif %}
+                            </td>
+                            <td>{{ b[4] or '-' }}</td>
+                            <td>
+                                {% if b[5] %}
+                                <span class="badge bg-info">{{ b[5] }}</span>
+                                {% else %}
+                                <span class="text-muted">-</span>
+                                {% endif %}
+                            </td>
+                            <td>
+                                {% if b[9] %}
+                                    {% if b[9] == 'Bon' %}
+                                    <span class="badge bg-success">{{ b[9] }}</span>
+                                    {% elif b[9] == 'Moyen' %}
+                                    <span class="badge bg-warning text-dark">{{ b[9] }}</span>
+                                    {% elif b[9] == 'Dégradé' %}
+                                    <span class="badge bg-orange text-white" style="background-color: #e67e22;">{{ b[9] }}</span>
+                                    {% elif b[9] == 'En ruine' %}
+                                    <span class="badge bg-danger">{{ b[9] }}</span>
+                                    {% else %}
+                                    <span class="badge bg-secondary">{{ b[9] }}</span>
+                                    {% endif %}
+                                {% else %}
+                                <span class="badge bg-secondary">Non inspecté</span>
+                                {% endif %}
+                            </td>
+                            <td>
+                                {% if b[7] and b[8] %}
+                                <small class="text-success"><i class="bi bi-geo-alt-fill"></i> Oui</small>
+                                {% else %}
+                                <small class="text-muted"><i class="bi bi-geo-alt"></i> Non</small>
+                                {% endif %}
+                            </td>
+                            <td class="text-center">
+                                <div class="btn-group btn-group-sm">
+                                    <a href="{{ url_for('buildings.view_building', id=b[0]) }}" 
+                                       class="btn btn-outline-primary" title="Voir">
+                                        <i class="bi bi-eye"></i>
+                                    </a>
+                                    <a href="{{ url_for('buildings.edit_building', id=b[0]) }}" 
+                                       class="btn btn-outline-warning" title="Modifier">
+                                        <i class="bi bi-pencil"></i>
+                                    </a>
+                                    <button type="button" class="btn btn-outline-danger" 
+                                            title="Supprimer"
+                                            onclick="confirmDelete('{{ b[0] }}', '{{ b[1]|e }}')">
+                                        <i class="bi bi-trash"></i>
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    {% else %}
+                        <tr>
+                            <td colspan="9" class="text-center py-4">
+                                <i class="bi bi-inbox text-muted" style="font-size: 2rem;"></i>
+                                <p class="text-muted mt-2 mb-0">
+                                    {% if current_search or current_zone or current_type or current_protection or current_etat %}
+                                    Aucun bâtiment ne correspond à vos critères de recherche.
+                                    <br><a href="{{ url_for('buildings.list_buildings') }}">Réinitialiser les filtres</a>
+                                    {% else %}
+                                    Aucun bâtiment enregistré.
+                                    <br><a href="{{ url_for('buildings.add_building') }}">Ajouter le premier bâtiment</a>
+                                    {% endif %}
+                                </p>
+                            </td>
+                        </tr>
+                    {% endif %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header bg-danger text-white">
+                <h5 class="modal-title"><i class="bi bi-exclamation-triangle"></i> Confirmer la suppression</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p>Êtes-vous sûr de vouloir supprimer le bâtiment <strong id="buildingName"></strong>?</p>
+                <p class="text-danger"><small>Cette action est irréversible et supprimera également toutes les inspections, interventions et documents associés.</small></p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
+                <form id="deleteForm" method="POST" style="display: inline;">
+                    <button type="submit" class="btn btn-danger">
+                        <i class="bi bi-trash"></i> Supprimer
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+    // Delete confirmation
+    function confirmDelete(id, name) {
+        document.getElementById('buildingName').textContent = name;
+        document.getElementById('deleteForm').action = `/buildings/delete/${id}`;
+        new bootstrap.Modal(document.getElementById('deleteModal')).show();
+    }
+    
+    // Auto-submit on filter change (optional - for better UX)
+    document.querySelectorAll('#filterForm select').forEach(select => {
+        select.addEventListener('change', function() {
+            document.getElementById('filterForm').submit();
+        });
+    });
+    
+    // Search on Enter key
+    document.getElementById('search').addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+            document.getElementById('filterForm').submit();
+        }
+    });
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/ui-app/app/templates/buildings/view.html b/ui-app/app/templates/buildings/view.html
new file mode 100644
index 0000000..8a7be48
--- /dev/null
+++ b/ui-app/app/templates/buildings/view.html
@@ -0,0 +1,180 @@
+{% extends "base.html" %}
+
+{% block title %}{{ building[1] }} - Détails{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h1><i class="bi bi-building"></i> {{ building[1] }}</h1>
+    <div>
+        <a href="{{ url_for('buildings.edit_building', id=building[0]) }}" class="btn btn-warning">
+            <i class="bi bi-pencil"></i> Modifier
+        </a>
+        <a href="{{ url_for('buildings.list_buildings') }}" class="btn btn-secondary">
+            <i class="bi bi-arrow-left"></i> Retour
+        </a>
+    </div>
+</div>
+
+<!-- Building Info Card -->
+<div class="card mb-4">
+    <div class="card-header bg-primary text-white">
+        <h5 class="mb-0"><i class="bi bi-info-circle"></i> Informations Générales</h5>
+    </div>
+    <div class="card-body">
+        <div class="row">
+            <div class="col-md-6">
+                <p><strong>Code:</strong> {{ building[0] }}</p>
+                <p><strong>Nom:</strong> {{ building[1] }}</p>
+                <p><strong>Adresse:</strong> {{ building[2] or 'N/A' }}</p>
+                <p><strong>Zone:</strong> <span class="badge bg-info">{{ building[7] or 'N/A' }}</span></p>
+                <p><strong>Type:</strong> {{ building[8] or 'N/A' }}</p>
+            </div>
+            <div class="col-md-6">
+                <p><strong>Protection:</strong> {{ building[9] or 'N/A' }}</p>
+                <p><strong>Propriétaire:</strong> {{ building[10] }} ({{ building[11] or 'N/A' }})</p>
+                <p><strong>Date de Construction:</strong> {{ building[5].strftime('%d/%m/%Y') if building[5] else 'N/A' }}</p>
+                <p><strong>Coordonnées:</strong> 
+                    {% if building[3] and building[4] %}
+                        {{ building[3] }}, {{ building[4] }}
+                    {% else %}
+                        N/A
+                    {% endif %}
+                </p>
+            </div>
+        </div>
+        {% if building[6] %}
+        <hr>
+        <p><strong>Note Historique:</strong></p>
+        <p class="text-muted">{{ building[6] }}</p>
+        {% endif %}
+    </div>
+</div>
+
+<!-- Inspections -->
+<div class="card mb-4">
+    <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
+        <h5 class="mb-0"><i class="bi bi-clipboard-check"></i> Inspections ({{ inspections|length }})</h5>
+        <a href="{{ url_for('inspections.add_inspection') }}" class="btn btn-sm btn-light">
+            <i class="bi bi-plus"></i> Ajouter
+        </a>
+    </div>
+    <div class="card-body">
+        {% if inspections %}
+        <div class="table-responsive">
+            <table class="table table-hover">
+                <thead>
+                    <tr>
+                        <th>Date</th>
+                        <th>État Constaté</th>
+                        <th>Rapport</th>
+                        <th>Action</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for inspection in inspections %}
+                    <tr>
+                        <td>{{ inspection[1].strftime('%d/%m/%Y') if inspection[1] else 'N/A' }}</td>
+                        <td>
+                            {% if inspection[2] == 'Bon' %}
+                                <span class="badge badge-good">{{ inspection[2] }}</span>
+                            {% elif inspection[2] == 'Moyen' %}
+                                <span class="badge badge-warning">{{ inspection[2] }}</span>
+                            {% else %}
+                                <span class="badge badge-urgent">{{ inspection[2] }}</span>
+                            {% endif %}
+                        </td>
+                        <td>{{ (inspection[3][:50] + '...') if inspection[3] and inspection[3]|length > 50 else (inspection[3] or 'N/A') }}</td>
+                        <td>
+                            <a href="{{ url_for('inspections.view_inspection', id=inspection[0]) }}" class="btn btn-sm btn-info">
+                                <i class="bi bi-eye"></i>
+                            </a>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        {% else %}
+        <p class="text-muted">Aucune inspection enregistrée</p>
+        {% endif %}
+    </div>
+</div>
+
+<!-- Interventions -->
+<div class="card mb-4">
+    <div class="card-header bg-warning text-white d-flex justify-content-between align-items-center">
+        <h5 class="mb-0"><i class="bi bi-tools"></i> Interventions ({{ interventions|length }})</h5>
+        <a href="{{ url_for('interventions.add_intervention') }}" class="btn btn-sm btn-light">
+            <i class="bi bi-plus"></i> Ajouter
+        </a>
+    </div>
+    <div class="card-body">
+        {% if interventions %}
+        <div class="table-responsive">
+            <table class="table table-hover">
+                <thead>
+                    <tr>
+                        <th>Date Début</th>
+                        <th>Type de Travaux</th>
+                        <th>Coût</th>
+                        <th>Prestataire</th>
+                        <th>Statut</th>
+                        <th>Validée</th>
+                        <th>Action</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for intervention in interventions %}
+                    <tr>
+                        <td>{{ intervention[1].strftime('%d/%m/%Y') if intervention[1] else 'N/A' }}</td>
+                        <td>{{ intervention[3] or 'N/A' }}</td>
+                        <td>{{ "{:,.2f}".format(intervention[4]) if intervention[4] else 'N/A' }} MAD</td>
+                        <td>{{ intervention[7] or 'N/A' }}</td>
+                        <td><span class="badge bg-info">{{ intervention[6] or 'N/A' }}</span></td>
+                        <td>
+                            {% if intervention[5] %}
+                                <span class="badge bg-success">Oui</span>
+                            {% else %}
+                                <span class="badge bg-secondary">Non</span>
+                            {% endif %}
+                        </td>
+                        <td>
+                            <a href="{{ url_for('interventions.view_intervention', id=intervention[0]) }}" class="btn btn-sm btn-info">
+                                <i class="bi bi-eye"></i>
+                            </a>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        {% else %}
+        <p class="text-muted">Aucune intervention enregistrée</p>
+        {% endif %}
+    </div>
+</div>
+
+<!-- Documents -->
+{% if documents %}
+<div class="card">
+    <div class="card-header bg-info text-white">
+        <h5 class="mb-0"><i class="bi bi-file-earmark-image"></i> Documents & Médias ({{ documents|length }})</h5>
+    </div>
+    <div class="card-body">
+        <div class="row">
+            {% for doc in documents %}
+            <div class="col-md-3 mb-3">
+                <div class="card">
+                    <div class="card-body text-center">
+                        <i class="bi bi-file-earmark-text" style="font-size: 3rem;"></i>
+                        <p class="mt-2 mb-0"><strong>{{ doc[1] }}</strong></p>
+                        <small class="text-muted">{{ doc[2] }}</small>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+{% endif %}
+{% endblock %}
\ No newline at end of file
diff --git a/ui-app/app/templates/dashboard/index.html b/ui-app/app/templates/dashboard/index.html
new file mode 100644
index 0000000..11162e9
--- /dev/null
+++ b/ui-app/app/templates/dashboard/index.html
@@ -0,0 +1,606 @@
+{% extends "base.html" %} {% block title %}Tableau de Bord - Patrimoine Urbain{%
+endblock %} {% block extra_css %}
+<!-- Leaflet CSS -->
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+  integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+  crossorigin=""
+/>
+<style>
+  #map {
+    height: 600px;
+    width: 100%;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+
+  .view-toggle-btn {
+    transition: all 0.3s ease;
+  }
+
+  .view-toggle-btn.active {
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    transform: translateY(-2px);
+  }
+
+  .leaflet-popup-content {
+    min-width: 220px;
+    padding: 0;
+  }
+
+  .leaflet-popup-content-wrapper {
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  }
+
+  .popup-container {
+    padding: 15px;
+  }
+
+  .popup-title {
+    font-weight: 700;
+    font-size: 1.1rem;
+    color: #1a1a2e;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 3px solid #3498db;
+  }
+
+  .popup-info {
+    margin: 8px 0;
+    font-size: 0.85rem;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .popup-info i {
+    color: #3498db;
+    width: 16px;
+  }
+
+  .popup-info strong {
+    color: #2c3e50;
+  }
+
+  .popup-badge {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: white;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .badge-bon {
+    background: linear-gradient(135deg, #27ae60, #2ecc71);
+  }
+  .badge-moyen {
+    background: linear-gradient(135deg, #f39c12, #f1c40f);
+  }
+  .badge-degrade {
+    background: linear-gradient(135deg, #e67e22, #d35400);
+  }
+  .badge-ruine {
+    background: linear-gradient(135deg, #e74c3c, #c0392b);
+  }
+  .badge-unknown {
+    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
+  }
+
+  .popup-btn {
+    display: block;
+    width: 100%;
+    margin-top: 12px;
+    padding: 10px 15px;
+    background: linear-gradient(135deg, #3498db, #2980b9);
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 0.85rem;
+    transition: all 0.3s ease;
+  }
+
+  .popup-btn:hover {
+    background: linear-gradient(135deg, #2980b9, #1a5276);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
+  }
+
+  #statistics-view,
+  #map-view {
+    display: none;
+  }
+
+  #statistics-view.active,
+  #map-view.active {
+    display: block;
+  }
+
+  .building-marker {
+    background: none;
+    border: none;
+  }
+
+  .map-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+    padding: 12px 0;
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.85rem;
+  }
+
+  .legend-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  .legend-dot.bon {
+    background: linear-gradient(135deg, #27ae60, #2ecc71);
+  }
+  .legend-dot.moyen {
+    background: linear-gradient(135deg, #f39c12, #f1c40f);
+  }
+  .legend-dot.degrade {
+    background: linear-gradient(135deg, #e67e22, #d35400);
+  }
+  .legend-dot.ruine {
+    background: linear-gradient(135deg, #e74c3c, #c0392b);
+  }
+  .legend-dot.unknown {
+    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
+  }
+</style>
+{% endblock %} {% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-speedometer2"></i> Tableau de Bord</h1>
+
+  <!-- View Toggle Buttons -->
+  <div class="btn-group" role="group" aria-label="Toggle view">
+    <button
+      type="button"
+      class="btn btn-primary view-toggle-btn active"
+      id="btn-statistics"
+      onclick="showView('statistics')"
+    >
+      <i class="bi bi-bar-chart-fill"></i> Statistiques
+    </button>
+    <button
+      type="button"
+      class="btn btn-outline-primary view-toggle-btn"
+      id="btn-map"
+      onclick="showView('map')"
+    >
+      <i class="bi bi-map"></i> Carte
+    </button>
+  </div>
+</div>
+
+<!-- Statistics Cards (Always Visible) -->
+<div class="row mb-4">
+  <div class="col-md-4">
+    <div class="card stat-card text-white bg-primary">
+      <div class="card-body">
+        <i class="bi bi-buildings text-white"></i>
+        <h3>{{ total_buildings }}</h3>
+        <p class="mb-0">Bâtiments Recensés</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-4">
+    <div class="card stat-card text-white bg-success">
+      <div class="card-body">
+        <i class="bi bi-clipboard-check text-white"></i>
+        <h3>{{ total_inspections }}</h3>
+        <p class="mb-0">Inspections Réalisées</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-4">
+    <div class="card stat-card text-white bg-warning">
+      <div class="card-body">
+        <i class="bi bi-tools text-white"></i>
+        <h3>{{ total_interventions }}</h3>
+        <p class="mb-0">Interventions</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ==================== STATISTICS VIEW ==================== -->
+<div id="statistics-view" class="active">
+  <div class="row">
+    <div class="col-md-6">
+      <div class="card">
+        <div class="card-header bg-primary text-white">
+          <h5 class="mb-0"><i class="bi bi-geo-alt"></i> Bâtiments par Zone</h5>
+        </div>
+        <div class="card-body">
+          {% if buildings_by_zone %}
+          <table class="table table-hover">
+            <thead>
+              <tr>
+                <th>Zone</th>
+                <th class="text-end">Nombre</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for zone, count in buildings_by_zone %}
+              <tr>
+                <td>{{ zone }}</td>
+                <td class="text-end">
+                  <span class="badge bg-primary">{{ count }}</span>
+                </td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+          {% else %}
+          <p class="text-muted">Aucune donnée disponible</p>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+
+    <div class="col-md-6">
+      <div class="card">
+        <div class="card-header bg-success text-white">
+          <h5 class="mb-0">
+            <i class="bi bi-diagram-3"></i> Bâtiments par Type
+          </h5>
+        </div>
+        <div class="card-body">
+          {% if buildings_by_type %}
+          <table class="table table-hover">
+            <thead>
+              <tr>
+                <th>Type</th>
+                <th class="text-end">Nombre</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for type, count in buildings_by_type %}
+              <tr>
+                <td>{{ type }}</td>
+                <td class="text-end">
+                  <span class="badge bg-success">{{ count }}</span>
+                </td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+          {% else %}
+          <p class="text-muted">Aucune donnée disponible</p>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row mt-4">
+    <div class="col-md-6">
+      <div class="card">
+        <div class="card-header bg-info text-white">
+          <h5 class="mb-0">
+            <i class="bi bi-heart-pulse"></i> État de Conservation
+          </h5>
+        </div>
+        <div class="card-body">
+          {% if buildings_by_state %}
+          <table class="table table-hover">
+            <thead>
+              <tr>
+                <th>État</th>
+                <th class="text-end">Nombre</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for state, count in buildings_by_state %}
+              <tr>
+                <td>
+                  {% if state == 'Bon' %}<span class="badge badge-good"
+                    >{{ state }}</span
+                  >
+                  {% elif state == 'Moyen' %}<span class="badge badge-warning"
+                    >{{ state }}</span
+                  >
+                  {% else %}<span class="badge badge-urgent">{{ state }}</span
+                  >{% endif %}
+                </td>
+                <td class="text-end"><strong>{{ count }}</strong></td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+          {% else %}
+          <p class="text-muted">Aucune inspection disponible</p>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+
+    <div class="col-md-6">
+      <div class="card">
+        <div class="card-header bg-warning text-white">
+          <h5 class="mb-0"><i class="bi bi-cash-stack"></i> Coût par Année</h5>
+        </div>
+        <div class="card-body">
+          {% if cost_by_year %}
+          <table class="table table-hover">
+            <thead>
+              <tr>
+                <th>Année</th>
+                <th class="text-end">Coût (MAD)</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for year, cost in cost_by_year %}
+              <tr>
+                <td>{{ year }}</td>
+                <td class="text-end">{{ "{:,.2f}".format(cost) }}</td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+          {% else %}
+          <p class="text-muted">Aucune donnée disponible</p>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  {% if urgent_buildings %}
+  <div class="row mt-4">
+    <div class="col-12">
+      <div class="card border-danger">
+        <div class="card-header bg-danger text-white">
+          <h5 class="mb-0">
+            <i class="bi bi-exclamation-triangle"></i> Bâtiments Urgents
+          </h5>
+        </div>
+        <div class="card-body">
+          <table class="table table-hover">
+            <thead>
+              <tr>
+                <th>Code</th>
+                <th>Nom</th>
+                <th>État</th>
+                <th>Date</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for code, nom, etat, date in urgent_buildings %}
+              <tr>
+                <td><strong>{{ code }}</strong></td>
+                <td>{{ nom }}</td>
+                <td><span class="badge badge-urgent">{{ etat }}</span></td>
+                <td>{{ date|safe_strftime }}</td>
+                <td>
+                  <a
+                    href="{{ url_for('buildings.view_building', id=code) }}"
+                    class="btn btn-sm btn-primary"
+                    ><i class="bi bi-eye"></i
+                  ></a>
+                </td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% endif %}
+</div>
+
+<!-- ==================== MAP VIEW ==================== -->
+<div id="map-view">
+  <div class="card">
+    <div
+      class="card-header bg-primary text-white d-flex justify-content-between align-items-center"
+    >
+      <h5 class="mb-0">
+        <i class="bi bi-map"></i> Carte des Bâtiments
+        <span class="badge bg-light text-primary ms-2"
+          >{{ map_buildings|length }} bâtiments</span
+        >
+      </h5>
+      <div class="dropdown">
+        <button
+          class="btn btn-light btn-sm dropdown-toggle"
+          type="button"
+          id="mapStyleDropdown"
+          data-bs-toggle="dropdown"
+        >
+          <i class="bi bi-palette"></i> Style
+        </button>
+        <ul class="dropdown-menu dropdown-menu-end">
+          <li>
+            <a
+              class="dropdown-item"
+              href="#"
+              onclick="changeMapStyle('dark'); return false;"
+              ><i class="bi bi-moon-fill"></i> Dark Urban</a
+            >
+          </li>
+          <li>
+            <a
+              class="dropdown-item"
+              href="#"
+              onclick="changeMapStyle('light'); return false;"
+              ><i class="bi bi-sun-fill"></i> Light</a
+            >
+          </li>
+          <li>
+            <a
+              class="dropdown-item"
+              href="#"
+              onclick="changeMapStyle('satellite'); return false;"
+              ><i class="bi bi-globe"></i> Satellite</a
+            >
+          </li>
+          <li>
+            <a
+              class="dropdown-item"
+              href="#"
+              onclick="changeMapStyle('streets'); return false;"
+              ><i class="bi bi-signpost-2"></i> Streets</a
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="card-body p-0">
+      <div id="map"></div>
+    </div>
+    <div class="card-footer">
+      <div class="map-legend">
+        <div class="legend-item">
+          <span class="legend-dot bon"></span><span>Bon</span>
+        </div>
+        <div class="legend-item">
+          <span class="legend-dot moyen"></span><span>Moyen</span>
+        </div>
+        <div class="legend-item">
+          <span class="legend-dot degrade"></span><span>Dégradé</span>
+        </div>
+        <div class="legend-item">
+          <span class="legend-dot ruine"></span><span>En ruine</span>
+        </div>
+        <div class="legend-item">
+          <span class="legend-dot unknown"></span><span>Non inspecté</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %} {% block extra_js %}
+<script
+  src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+  integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+  crossorigin=""
+></script>
+
+<script>
+  const buildings = JSON.parse('{{ map_buildings | tojson | safe }}');
+  let map = null;
+  let currentTileLayer = null;
+
+  const mapStyles = {
+    dark: { url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png", attribution: '&copy; OpenStreetMap &copy; CARTO' },
+    light: { url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", attribution: '&copy; OpenStreetMap &copy; CARTO' },
+    satellite: { url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", attribution: '&copy; Esri' },
+    streets: { url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", attribution: '&copy; OpenStreetMap' }
+  };
+
+  function showView(view) {
+    const statsView = document.getElementById("statistics-view");
+    const mapView = document.getElementById("map-view");
+    const btnStats = document.getElementById("btn-statistics");
+    const btnMap = document.getElementById("btn-map");
+
+    if (view === "statistics") {
+      statsView.classList.add("active");
+      mapView.classList.remove("active");
+      btnStats.classList.add("active", "btn-primary");
+      btnStats.classList.remove("btn-outline-primary");
+      btnMap.classList.remove("active", "btn-primary");
+      btnMap.classList.add("btn-outline-primary");
+    } else {
+      statsView.classList.remove("active");
+      mapView.classList.add("active");
+      btnStats.classList.remove("active", "btn-primary");
+      btnStats.classList.add("btn-outline-primary");
+      btnMap.classList.add("active", "btn-primary");
+      btnMap.classList.remove("btn-outline-primary");
+
+      if (!map) {
+        setTimeout(initMap, 100);
+      } else {
+        setTimeout(() => map.invalidateSize(), 100);
+      }
+    }
+  }
+
+  function changeMapStyle(styleName) {
+    if (!map || !mapStyles[styleName]) return;
+    if (currentTileLayer) map.removeLayer(currentTileLayer);
+    currentTileLayer = L.tileLayer(mapStyles[styleName].url, {
+      attribution: mapStyles[styleName].attribution,
+      maxZoom: 19
+    }).addTo(map);
+  }
+
+  function getMarkerColor(etat) {
+    const colors = {
+      'Bon': '#27ae60',
+      'Moyen': '#f39c12',
+      'Dégradé': '#e67e22',
+      'En ruine': '#e74c3c'
+    };
+    return colors[etat] || '#95a5a6';
+  }
+
+  function createBuildingIcon(etat) {
+    const color = getMarkerColor(etat);
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="44" viewBox="0 0 36 44">
+      <path fill="${color}" stroke="#fff" stroke-width="2" d="M18 0C8 0 0 8 0 18c0 14 18 26 18 26s18-12 18-26C36 8 28 0 18 0z"/>
+      <circle cx="18" cy="16" r="8" fill="#fff"/>
+      <path fill="${color}" d="M14 12h8v10h-8zM15 13h2v2h-2zM19 13h2v2h-2zM15 16h2v2h-2zM19 16h2v2h-2zM17 19h2v3h-2z"/>
+    </svg>`;
+    return L.divIcon({
+      className: 'building-marker',
+      html: svg,
+      iconSize: [36, 44],
+      iconAnchor: [18, 44],
+      popupAnchor: [0, -44]
+    });
+  }
+
+  function initMap() {
+    map = L.map('map').setView([31.7917, -7.0926], 6);
+    currentTileLayer = L.tileLayer(mapStyles.satellite.url, {
+      attribution: mapStyles.satellite.attribution,
+      maxZoom: 19
+    }).addTo(map);
+
+    const markers = [];
+    buildings.forEach(b => {
+      if (b.lat && b.lng) {
+        const popup = `
+          <div class="popup-container">
+            <div class="popup-title"><i class="bi bi-building"></i> ${b.nom}</div>
+            <div class="popup-info"><i class="bi bi-geo-alt"></i> ${b.adresse}</div>
+            <div class="popup-info"><i class="bi bi-map"></i> ${b.zone}</div>
+            <div class="popup-info"><i class="bi bi-house"></i> ${b.type}</div>
+            <div class="popup-info"><i class="bi bi-heart-pulse"></i> <span class="popup-badge badge-${b.etat === 'Bon' ? 'bon' : b.etat === 'Moyen' ? 'moyen' : b.etat === 'Dégradé' ? 'degrade' : b.etat === 'En ruine' ? 'ruine' : 'unknown'}">${b.etat}</span></div>
+            <a href="/buildings/view/${b.code}" class="popup-btn"><i class="bi bi-eye"></i> Voir détails</a>
+          </div>`;
+        const marker = L.marker([b.lat, b.lng], { icon: createBuildingIcon(b.etat) }).bindPopup(popup);
+        markers.push(marker);
+        marker.addTo(map);
+      }
+    });
+
+    if (markers.length > 0) {
+      map.fitBounds(L.featureGroup(markers).getBounds().pad(0.1));
+    }
+  }
+</script>
+{% endblock %}
diff --git a/ui-app/app/templates/documents/add.html b/ui-app/app/templates/documents/add.html
new file mode 100644
index 0000000..8ab5d72
--- /dev/null
+++ b/ui-app/app/templates/documents/add.html
@@ -0,0 +1,83 @@
+{% extends "base.html" %} {% block title %}Ajouter un Document{% endblock %} {%
+block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-plus-circle"></i> Ajouter un Document</h1>
+  <a
+    href="{{ url_for('buildings.view_building', id=building_id) }}"
+    class="btn btn-secondary"
+  >
+    <i class="bi bi-arrow-left"></i> Retour
+  </a>
+</div>
+
+<div class="alert alert-info">
+  <i class="bi bi-building"></i> Bâtiment: <strong>{{ building_name }}</strong>
+</div>
+
+<div class="card">
+  <div class="card-body">
+    <form
+      method="POST"
+      action="{{ url_for('documents.add_document', building_id=building_id) }}"
+    >
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          <label for="titre_doc" class="form-label">
+            Titre du Document <span class="text-danger">*</span>
+          </label>
+          <input
+            type="text"
+            class="form-control"
+            id="titre_doc"
+            name="titre_doc"
+            placeholder="Ex: Photo façade principale"
+            required
+          />
+          <div class="form-text">Nom descriptif du document</div>
+        </div>
+
+        <div class="col-md-6 mb-3">
+          <label for="type_doc" class="form-label">
+            Type de Document <span class="text-danger">*</span>
+          </label>
+          <select class="form-select" id="type_doc" name="type_doc" required>
+            <option value="">-- Sélectionner --</option>
+            {% for type in types %}
+            <option value="{{ type }}">{{ type }}</option>
+            {% endfor %}
+          </select>
+        </div>
+      </div>
+
+      <div class="mb-3">
+        <label for="url_fichier" class="form-label">
+          URL du Fichier <span class="text-danger">*</span>
+        </label>
+        <input
+          type="url"
+          class="form-control"
+          id="url_fichier"
+          name="url_fichier"
+          placeholder="https://exemple.com/document.pdf"
+          required
+        />
+        <div class="form-text">
+          Lien vers le fichier (Google Drive, Dropbox, serveur, etc.)
+        </div>
+      </div>
+
+      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+        <a
+          href="{{ url_for('buildings.view_building', id=building_id) }}"
+          class="btn btn-secondary"
+        >
+          <i class="bi bi-x-circle"></i> Annuler
+        </a>
+        <button type="submit" class="btn btn-primary">
+          <i class="bi bi-check-circle"></i> Enregistrer
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+{% endblock %}
diff --git a/ui-app/app/templates/documents/edit.html b/ui-app/app/templates/documents/edit.html
new file mode 100644
index 0000000..c3235a2
--- /dev/null
+++ b/ui-app/app/templates/documents/edit.html
@@ -0,0 +1,61 @@
+{% extends "base.html" %}
+
+{% block title %}Modifier le Document{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h1><i class="bi bi-pencil"></i> Modifier le Document</h1>
+    <a href="{{ url_for('documents.view_document', id=document[0]) }}" class="btn btn-secondary">
+        <i class="bi bi-arrow-left"></i> Retour
+    </a>
+</div>
+
+<div class="alert alert-info">
+    <i class="bi bi-building"></i> Bâtiment: <strong>{{ building_name }}</strong>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <form method="POST" action="{{ url_for('documents.edit_document', id=document[0]) }}">
+            <div class="row">
+                <div class="col-md-6 mb-3">
+                    <label for="titre_doc" class="form-label">
+                        Titre du Document <span class="text-danger">*</span>
+                    </label>
+                    <input type="text" class="form-control" id="titre_doc" name="titre_doc" 
+                           value="{{ document[1] }}" required>
+                </div>
+                
+                <div class="col-md-6 mb-3">
+                    <label for="type_doc" class="form-label">
+                        Type de Document <span class="text-danger">*</span>
+                    </label>
+                    <select class="form-select" id="type_doc" name="type_doc" required>
+                        {% for type in types %}
+                        <option value="{{ type }}" {% if document[2] == type %}selected{% endif %}>{{ type }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+            </div>
+
+            <div class="mb-3">
+                <label for="url_fichier" class="form-label">
+                    URL du Fichier <span class="text-danger">*</span>
+                </label>
+                <input type="url" class="form-control" id="url_fichier" name="url_fichier" 
+                       value="{{ document[3] }}" required>
+                <div class="form-text">Lien vers le fichier (Google Drive, Dropbox, serveur, etc.)</div>
+            </div>
+
+            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+                <a href="{{ url_for('documents.view_document', id=document[0]) }}" class="btn btn-secondary">
+                    <i class="bi bi-x-circle"></i> Annuler
+                </a>
+                <button type="submit" class="btn btn-warning">
+                    <i class="bi bi-check-circle"></i> Mettre à Jour
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/ui-app/app/templates/documents/list.html b/ui-app/app/templates/documents/list.html
new file mode 100644
index 0000000..1469d7e
--- /dev/null
+++ b/ui-app/app/templates/documents/list.html
@@ -0,0 +1,144 @@
+{% extends "base.html" %} {% block title %}Documents - {{ building_name }}{%
+endblock %} {% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1>
+    <i class="bi bi-file-earmark-image"></i> Documents de {{ building_name }}
+  </h1>
+  <div>
+    <a
+      href="{{ url_for('documents.add_document', building_id=building_id) }}"
+      class="btn btn-primary"
+    >
+      <i class="bi bi-plus-circle"></i> Ajouter un Document
+    </a>
+    <a
+      href="{{ url_for('buildings.view_building', id=building_id) }}"
+      class="btn btn-secondary"
+    >
+      <i class="bi bi-arrow-left"></i> Retour au Bâtiment
+    </a>
+  </div>
+</div>
+
+<!-- Results -->
+<div class="d-flex justify-content-between align-items-center mb-3">
+  <span class="text-muted">
+    <i class="bi bi-file-earmark"></i> {{ documents|length }} document(s)
+  </span>
+</div>
+
+{% if documents %}
+<div class="row">
+  {% for doc in documents %}
+  <div class="col-md-4 col-lg-3 mb-4">
+    <div class="card h-100">
+      <div class="card-body text-center">
+        {% if doc[2] == 'Photo' %}
+        <i class="bi bi-image text-success" style="font-size: 4rem"></i>
+        {% elif doc[2] == 'Plan' %}
+        <i class="bi bi-map text-primary" style="font-size: 4rem"></i>
+        {% elif doc[2] == 'PDF' %}
+        <i class="bi bi-file-pdf text-danger" style="font-size: 4rem"></i>
+        {% elif doc[2] == 'Vidéo' %}
+        <i class="bi bi-camera-video text-warning" style="font-size: 4rem"></i>
+        {% else %}
+        <i
+          class="bi bi-file-earmark text-secondary"
+          style="font-size: 4rem"
+        ></i>
+        {% endif %}
+
+        <h6 class="card-title mt-3">{{ doc[1] }}</h6>
+        <span class="badge bg-info">{{ doc[2] }}</span>
+      </div>
+      <div class="card-footer bg-transparent">
+        <div class="btn-group btn-group-sm w-100">
+          <a
+            href="{{ url_for('documents.view_document', id=doc[0]) }}"
+            class="btn btn-outline-primary"
+            title="Voir"
+          >
+            <i class="bi bi-eye"></i>
+          </a>
+          <a
+            href="{{ url_for('documents.edit_document', id=doc[0]) }}"
+            class="btn btn-outline-warning"
+            title="Modifier"
+          >
+            <i class="bi bi-pencil"></i>
+          </a>
+          <button
+            type="button"
+            class="btn btn-outline-danger"
+            title="Supprimer"
+            data-doc-id="{{ doc[0] }}"
+            data-doc-name="{{ doc[1]|e }}"
+            onclick="confirmDelete(this.dataset.docId, this.dataset.docName)"
+          >
+            <i class="bi bi-trash"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% else %}
+<div class="card">
+  <div class="card-body text-center py-5">
+    <i class="bi bi-inbox text-muted" style="font-size: 4rem"></i>
+    <p class="text-muted mt-3 mb-0">
+      Aucun document enregistré pour ce bâtiment.
+    </p>
+    <a
+      href="{{ url_for('documents.add_document', building_id=building_id) }}"
+      class="btn btn-primary mt-3"
+    >
+      <i class="bi bi-plus-circle"></i> Ajouter le premier document
+    </a>
+  </div>
+</div>
+{% endif %}
+
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header bg-danger text-white">
+        <h5 class="modal-title">
+          <i class="bi bi-exclamation-triangle"></i> Confirmer la suppression
+        </h5>
+        <button
+          type="button"
+          class="btn-close btn-close-white"
+          data-bs-dismiss="modal"
+        ></button>
+      </div>
+      <div class="modal-body">
+        <p>
+          Êtes-vous sûr de vouloir supprimer le document
+          <strong id="docName"></strong>?
+        </p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+          Annuler
+        </button>
+        <form id="deleteForm" method="POST" style="display: inline">
+          <button type="submit" class="btn btn-danger">
+            <i class="bi bi-trash"></i> Supprimer
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %} {% block extra_js %}
+<script>
+  function confirmDelete(id, name) {
+    document.getElementById("docName").textContent = name;
+    document.getElementById("deleteForm").action = `/documents/delete/${id}`;
+    new bootstrap.Modal(document.getElementById("deleteModal")).show();
+  }
+</script>
+{% endblock %}
diff --git a/ui-app/app/templates/documents/list_all.html b/ui-app/app/templates/documents/list_all.html
new file mode 100644
index 0000000..adcbc02
--- /dev/null
+++ b/ui-app/app/templates/documents/list_all.html
@@ -0,0 +1,236 @@
+{% extends "base.html" %}
+
+{% block title %}Liste des Documents{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h1><i class="bi bi-file-earmark-image"></i> Liste des Documents</h1>
+    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addDocModal">
+        <i class="bi bi-plus-circle"></i> Ajouter un Document
+    </button>
+</div>
+
+<!-- Search and Filter Card -->
+<div class="card mb-4">
+    <div class="card-header bg-info text-white">
+        <h5 class="mb-0"><i class="bi bi-search"></i> Recherche et Filtres</h5>
+    </div>
+    <div class="card-body">
+        <form method="GET" action="{{ url_for('documents.list_all_documents') }}" id="filterForm">
+            <div class="row g-3">
+                <div class="col-md-4">
+                    <label for="search" class="form-label"><i class="bi bi-search"></i> Recherche</label>
+                    <input type="text" class="form-control" id="search" name="search" 
+                           placeholder="Titre, bâtiment..." value="{{ current_search }}">
+                </div>
+                
+                <div class="col-md-3">
+                    <label for="type_doc" class="form-label"><i class="bi bi-tag"></i> Type</label>
+                    <select class="form-select" id="type_doc" name="type_doc">
+                        <option value="">Tous les types</option>
+                        {% for t in types %}
+                        <option value="{{ t[0] }}" {% if current_type == t[0] %}selected{% endif %}>
+                            {{ t[0] }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="col-md-3">
+                    <label for="building" class="form-label"><i class="bi bi-building"></i> Bâtiment</label>
+                    <select class="form-select" id="building" name="building">
+                        <option value="">Tous les bâtiments</option>
+                        {% for b in buildings %}
+                        <option value="{{ b[0] }}" {% if current_building|string == b[0]|string %}selected{% endif %}>
+                            {{ b[1] }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="col-md-2 d-flex align-items-end">
+                    <button type="submit" class="btn btn-info me-2">
+                        <i class="bi bi-funnel"></i> Filtrer
+                    </button>
+                    <a href="{{ url_for('documents.list_all_documents') }}" class="btn btn-outline-secondary">
+                        <i class="bi bi-x-circle"></i>
+                    </a>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- Results -->
+<div class="d-flex justify-content-between align-items-center mb-3">
+    <span class="text-muted">
+        <i class="bi bi-file-earmark"></i> {{ documents|length }} document(s) trouvé(s)
+    </span>
+</div>
+
+{% if documents %}
+<div class="row">
+    {% for doc in documents %}
+    <div class="col-md-4 col-lg-3 mb-4">
+        <div class="card h-100">
+            <div class="card-body text-center">
+                {% if doc[2] == 'Photo' %}
+                <i class="bi bi-image text-success" style="font-size: 4rem;"></i>
+                {% elif doc[2] == 'Plan' %}
+                <i class="bi bi-map text-primary" style="font-size: 4rem;"></i>
+                {% elif doc[2] == 'PDF' %}
+                <i class="bi bi-file-pdf text-danger" style="font-size: 4rem;"></i>
+                {% elif doc[2] == 'Vidéo' %}
+                <i class="bi bi-camera-video text-warning" style="font-size: 4rem;"></i>
+                {% else %}
+                <i class="bi bi-file-earmark text-secondary" style="font-size: 4rem;"></i>
+                {% endif %}
+                
+                <h6 class="card-title mt-3">{{ doc[1] }}</h6>
+                <span class="badge bg-info">{{ doc[2] }}</span>
+                <p class="small text-muted mt-2 mb-0">
+                    <a href="{{ url_for('buildings.view_building', id=doc[4]) }}">
+                        <i class="bi bi-building"></i> {{ doc[5] }}
+                    </a>
+                </p>
+            </div>
+            <div class="card-footer bg-transparent">
+                <div class="btn-group btn-group-sm w-100">
+                    <a href="{{ url_for('documents.view_document', id=doc[0]) }}" 
+                       class="btn btn-outline-primary" title="Voir">
+                        <i class="bi bi-eye"></i>
+                    </a>
+                    <a href="{{ url_for('documents.edit_document', id=doc[0]) }}" 
+                       class="btn btn-outline-warning" title="Modifier">
+                        <i class="bi bi-pencil"></i>
+                    </a>
+                    <button type="button" class="btn btn-outline-danger" 
+                            title="Supprimer"
+                            data-doc-id="{{ doc[0] }}"
+                            data-doc-name="{{ doc[1] }}"
+                            onclick="confirmDelete(this.dataset.docId, this.dataset.docName)">
+                        <i class="bi bi-trash"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+{% else %}
+<div class="card">
+    <div class="card-body text-center py-5">
+        <i class="bi bi-inbox text-muted" style="font-size: 4rem;"></i>
+        <p class="text-muted mt-3 mb-0">Aucun document trouvé.</p>
+        <button type="button" class="btn btn-primary mt-3" data-bs-toggle="modal" data-bs-target="#addDocModal">
+            <i class="bi bi-plus-circle"></i> Ajouter le premier document
+        </button>
+    </div>
+</div>
+{% endif %}
+
+<!-- Add Document Modal -->
+<div class="modal fade" id="addDocModal" tabindex="-1">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header bg-primary text-white">
+                <h5 class="modal-title"><i class="bi bi-plus-circle"></i> Ajouter un Document</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+            </div>
+            <form method="POST" action="{{ url_for('documents.add_document_global') }}">
+                <div class="modal-body">
+                    <div class="mb-3">
+                        <label for="code_batiment" class="form-label">
+                            Bâtiment <span class="text-danger">*</span>
+                        </label>
+                        <select class="form-select" id="code_batiment" name="code_batiment" required>
+                            <option value="">-- Sélectionner un bâtiment --</option>
+                            {% for b in buildings %}
+                            <option value="{{ b[0] }}">{{ b[1] }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                    
+                    <div class="row">
+                        <div class="col-md-6 mb-3">
+                            <label for="titre_doc" class="form-label">
+                                Titre du Document <span class="text-danger">*</span>
+                            </label>
+                            <input type="text" class="form-control" id="titre_doc" name="titre_doc" 
+                                   placeholder="Ex: Photo façade principale" required>
+                        </div>
+                        
+                        <div class="col-md-6 mb-3">
+                            <label for="type_doc_add" class="form-label">
+                                Type de Document <span class="text-danger">*</span>
+                            </label>
+                            <select class="form-select" id="type_doc_add" name="type_doc" required>
+                                <option value="">-- Sélectionner --</option>
+                                <option value="Photo">Photo</option>
+                                <option value="Plan">Plan</option>
+                                <option value="PDF">PDF</option>
+                                <option value="Vidéo">Vidéo</option>
+                                <option value="Autre">Autre</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="url_fichier" class="form-label">
+                            URL du Fichier <span class="text-danger">*</span>
+                        </label>
+                        <input type="url" class="form-control" id="url_fichier" name="url_fichier" 
+                               placeholder="https://exemple.com/document.pdf" required>
+                        <div class="form-text">Lien vers le fichier (Google Drive, Dropbox, serveur, etc.)</div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+                        <i class="bi bi-x-circle"></i> Annuler
+                    </button>
+                    <button type="submit" class="btn btn-primary">
+                        <i class="bi bi-check-circle"></i> Enregistrer
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header bg-danger text-white">
+                <h5 class="modal-title"><i class="bi bi-exclamation-triangle"></i> Confirmer la suppression</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p>Êtes-vous sûr de vouloir supprimer le document <strong id="docName"></strong>?</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
+                <form id="deleteForm" method="POST" style="display: inline;">
+                    <button type="submit" class="btn btn-danger">
+                        <i class="bi bi-trash"></i> Supprimer
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+    function confirmDelete(id, name) {
+        document.getElementById('docName').textContent = name;
+        document.getElementById('deleteForm').action = `/documents/delete/${id}`;
+        new bootstrap.Modal(document.getElementById('deleteModal')).show();
+    }
+    
+    document.querySelectorAll('#filterForm select').forEach(select => {
+        select.addEventListener('change', () => document.getElementById('filterForm').submit());
+    });
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/ui-app/app/templates/documents/view.html b/ui-app/app/templates/documents/view.html
new file mode 100644
index 0000000..35d30ee
--- /dev/null
+++ b/ui-app/app/templates/documents/view.html
@@ -0,0 +1,191 @@
+{% extends "base.html" %} {% block title %}{{ document[1] }} - Document{%
+endblock %} {% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-file-earmark"></i> {{ document[1] }}</h1>
+  <div>
+    <a
+      href="{{ url_for('documents.edit_document', id=document[0]) }}"
+      class="btn btn-warning"
+    >
+      <i class="bi bi-pencil"></i> Modifier
+    </a>
+    <a
+      href="{{ url_for('buildings.view_building', id=document[4]) }}"
+      class="btn btn-secondary"
+    >
+      <i class="bi bi-arrow-left"></i> Retour au Bâtiment
+    </a>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-md-6">
+    <!-- Document Info Card -->
+    <div class="card mb-4">
+      <div class="card-header bg-primary text-white">
+        <h5 class="mb-0">
+          <i class="bi bi-info-circle"></i> Informations du Document
+        </h5>
+      </div>
+      <div class="card-body">
+        <p><strong>ID:</strong> {{ document[0] }}</p>
+        <p><strong>Titre:</strong> {{ document[1] }}</p>
+        <p>
+          <strong>Type:</strong>
+          {% if document[2] == 'Photo' %}
+          <span class="badge bg-success fs-6"
+            ><i class="bi bi-image"></i> {{ document[2] }}</span
+          >
+          {% elif document[2] == 'Plan' %}
+          <span class="badge bg-primary fs-6"
+            ><i class="bi bi-map"></i> {{ document[2] }}</span
+          >
+          {% elif document[2] == 'PDF' %}
+          <span class="badge bg-danger fs-6"
+            ><i class="bi bi-file-pdf"></i> {{ document[2] }}</span
+          >
+          {% elif document[2] == 'Vidéo' %}
+          <span class="badge bg-warning fs-6"
+            ><i class="bi bi-camera-video"></i> {{ document[2] }}</span
+          >
+          {% else %}
+          <span class="badge bg-secondary fs-6"
+            ><i class="bi bi-file-earmark"></i> {{ document[2] }}</span
+          >
+          {% endif %}
+        </p>
+        <p>
+          <strong>Bâtiment:</strong>
+          <a href="{{ url_for('buildings.view_building', id=document[4]) }}">
+            {{ building_name }}
+          </a>
+        </p>
+        <hr />
+        <p><strong>URL:</strong></p>
+        <div class="input-group">
+          <input
+            type="text"
+            class="form-control"
+            value="{{ document[3] }}"
+            readonly
+            id="urlInput"
+          />
+          <button
+            class="btn btn-outline-secondary"
+            type="button"
+            onclick="copyUrl()"
+          >
+            <i class="bi bi-clipboard"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-md-6">
+    <!-- Preview Card -->
+    <div class="card mb-4">
+      <div class="card-header bg-info text-white">
+        <h5 class="mb-0"><i class="bi bi-eye"></i> Aperçu / Accès</h5>
+      </div>
+      <div class="card-body text-center">
+        {% if document[2] == 'Photo' %}
+        <img
+          src="{{ document[3] }}"
+          alt="{{ document[1] }}"
+          class="img-fluid rounded mb-3"
+          style="max-height: 300px"
+          onerror="this.style.display='none'; document.getElementById('imgError').style.display='block';"
+        />
+        <div id="imgError" style="display: none">
+          <i class="bi bi-image text-muted" style="font-size: 5rem"></i>
+          <p class="text-muted">Impossible de charger l'image</p>
+        </div>
+        {% elif document[2] == 'Vidéo' %}
+        <i class="bi bi-play-circle text-warning" style="font-size: 5rem"></i>
+        <p class="text-muted">Fichier vidéo</p>
+        {% elif document[2] == 'PDF' %}
+        <i class="bi bi-file-pdf text-danger" style="font-size: 5rem"></i>
+        <p class="text-muted">Document PDF</p>
+        {% elif document[2] == 'Plan' %}
+        <i class="bi bi-map text-primary" style="font-size: 5rem"></i>
+        <p class="text-muted">Plan architectural</p>
+        {% else %}
+        <i
+          class="bi bi-file-earmark text-secondary"
+          style="font-size: 5rem"
+        ></i>
+        <p class="text-muted">Fichier</p>
+        {% endif %}
+
+        <a
+          href="{{ document[3] }}"
+          target="_blank"
+          class="btn btn-primary btn-lg mt-3"
+        >
+          <i class="bi bi-box-arrow-up-right"></i> Ouvrir le fichier
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Delete Button -->
+<div class="mt-4">
+  <button
+    type="button"
+    class="btn btn-danger"
+    data-bs-toggle="modal"
+    data-bs-target="#deleteModal"
+  >
+    <i class="bi bi-trash"></i> Supprimer ce document
+  </button>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header bg-danger text-white">
+        <h5 class="modal-title">
+          <i class="bi bi-exclamation-triangle"></i> Confirmer la suppression
+        </h5>
+        <button
+          type="button"
+          class="btn-close btn-close-white"
+          data-bs-dismiss="modal"
+        ></button>
+      </div>
+      <div class="modal-body">
+        <p>
+          Êtes-vous sûr de vouloir supprimer le document
+          <strong>{{ document[1] }}</strong>?
+        </p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+          Annuler
+        </button>
+        <form
+          action="{{ url_for('documents.delete_document', id=document[0]) }}"
+          method="POST"
+          style="display: inline"
+        >
+          <button type="submit" class="btn btn-danger">
+            <i class="bi bi-trash"></i> Supprimer
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %} {% block extra_js %}
+<script>
+  function copyUrl() {
+    const urlInput = document.getElementById("urlInput");
+    urlInput.select();
+    document.execCommand("copy");
+    alert("URL copiée!");
+  }
+</script>
+{% endblock %}
diff --git a/ui-app/app/templates/inspections/add.html b/ui-app/app/templates/inspections/add.html
new file mode 100644
index 0000000..fa6e125
--- /dev/null
+++ b/ui-app/app/templates/inspections/add.html
@@ -0,0 +1,59 @@
+{% extends "base.html" %}
+
+{% block title %}Ajouter une Inspection{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h1><i class="bi bi-plus-circle"></i> Ajouter une Inspection</h1>
+    <a href="{{ url_for('inspections.list_inspections') }}" class="btn btn-secondary">
+        <i class="bi bi-arrow-left"></i> Retour
+    </a>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <form method="POST" action="{{ url_for('inspections.add_inspection') }}">
+            <div class="row">
+                <div class="col-md-6 mb-3">
+                    <label for="code_batiment" class="form-label">Bâtiment <span class="text-danger">*</span></label>
+                    <select class="form-select" id="code_batiment" name="code_batiment" required>
+                        <option value="">-- Sélectionner un bâtiment --</option>
+                        {% for building in buildings %}
+                        <option value="{{ building[0] }}">{{ building[1] }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="col-md-6 mb-3">
+                    <label for="date_visite" class="form-label">Date de Visite <span class="text-danger">*</span></label>
+                    <input type="date" class="form-control" id="date_visite" name="date_visite" required>
+                </div>
+            </div>
+
+            <div class="mb-3">
+                <label for="etat_constate" class="form-label">État Constaté <span class="text-danger">*</span></label>
+                <select class="form-select" id="etat_constate" name="etat_constate" required>
+                    <option value="">-- Sélectionner --</option>
+                    {% for etat in etats %}
+                    <option value="{{ etat }}">{{ etat }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+
+            <div class="mb-3">
+                <label for="rapport" class="form-label">Rapport d'Inspection</label>
+                <textarea class="form-control" id="rapport" name="rapport" rows="6" placeholder="Détails de l'inspection..."></textarea>
+            </div>
+
+            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+                <a href="{{ url_for('inspections.list_inspections') }}" class="btn btn-secondary">
+                    <i class="bi bi-x-circle"></i> Annuler
+                </a>
+                <button type="submit" class="btn btn-success">
+                    <i class="bi bi-check-circle"></i> Enregistrer
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/ui-app/app/templates/inspections/edit.html b/ui-app/app/templates/inspections/edit.html
new file mode 100644
index 0000000..0909c64
--- /dev/null
+++ b/ui-app/app/templates/inspections/edit.html
@@ -0,0 +1,53 @@
+{% extends "base.html" %}
+
+{% block title %}Modifier l'Inspection{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h1><i class="bi bi-pencil"></i> Modifier l'Inspection</h1>
+    <a href="{{ url_for('inspections.view_inspection', id=inspection[0]) }}" class="btn btn-secondary">
+        <i class="bi bi-arrow-left"></i> Retour
+    </a>
+</div>
+
+<div class="alert alert-info">
+    <i class="bi bi-building"></i> Bâtiment: <strong>{{ inspection[5] }}</strong>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <form method="POST" action="{{ url_for('inspections.edit_inspection', id=inspection[0]) }}">
+            <div class="row">
+                <div class="col-md-6 mb-3">
+                    <label for="date_visite" class="form-label">Date de Visite <span class="text-danger">*</span></label>
+                    <input type="date" class="form-control" id="date_visite" name="date_visite" 
+                           value="{{ inspection[1].strftime('%Y-%m-%d') if inspection[1] else '' }}" required>
+                </div>
+                
+                <div class="col-md-6 mb-3">
+                    <label for="etat_constate" class="form-label">État Constaté <span class="text-danger">*</span></label>
+                    <select class="form-select" id="etat_constate" name="etat_constate" required>
+                        {% for etat in etats %}
+                        <option value="{{ etat }}" {% if inspection[2] == etat %}selected{% endif %}>{{ etat }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+            </div>
+
+            <div class="mb-3">
+                <label for="rapport" class="form-label">Rapport d'Inspection</label>
+                <textarea class="form-control" id="rapport" name="rapport" rows="6">{{ inspection[3] or '' }}</textarea>
+            </div>
+
+            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+                <a href="{{ url_for('inspections.view_inspection', id=inspection[0]) }}" class="btn btn-secondary">
+                    <i class="bi bi-x-circle"></i> Annuler
+                </a>
+                <button type="submit" class="btn btn-warning">
+                    <i class="bi bi-check-circle"></i> Mettre à Jour
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/ui-app/app/templates/inspections/list.html b/ui-app/app/templates/inspections/list.html
new file mode 100644
index 0000000..20ff9d2
--- /dev/null
+++ b/ui-app/app/templates/inspections/list.html
@@ -0,0 +1,197 @@
+{% extends "base.html" %}
+
+{% block title %}Liste des Inspections{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h1><i class="bi bi-clipboard-check"></i> Liste des Inspections</h1>
+    <a href="{{ url_for('inspections.add_inspection') }}" class="btn btn-primary">
+        <i class="bi bi-plus-circle"></i> Nouvelle Inspection
+    </a>
+</div>
+
+<!-- Search and Filter Card -->
+<div class="card mb-4">
+    <div class="card-header bg-primary text-white">
+        <h5 class="mb-0"><i class="bi bi-search"></i> Recherche et Filtres</h5>
+    </div>
+    <div class="card-body">
+        <form method="GET" action="{{ url_for('inspections.list_inspections') }}" id="filterForm">
+            <div class="row g-3">
+                <div class="col-md-3">
+                    <label for="search" class="form-label"><i class="bi bi-search"></i> Recherche</label>
+                    <input type="text" class="form-control" id="search" name="search" 
+                           placeholder="Bâtiment..." value="{{ current_search }}">
+                </div>
+                
+                <div class="col-md-3">
+                    <label for="etat" class="form-label"><i class="bi bi-heart-pulse"></i> État</label>
+                    <select class="form-select" id="etat" name="etat">
+                        <option value="">Tous les états</option>
+                        {% for e in etats %}
+                        <option value="{{ e[0] }}" {% if current_etat == e[0] %}selected{% endif %}>
+                            {{ e[0] }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="col-md-3">
+                    <label for="building" class="form-label"><i class="bi bi-building"></i> Bâtiment</label>
+                    <select class="form-select" id="building" name="building">
+                        <option value="">Tous les bâtiments</option>
+                        {% for b in buildings %}
+                        <option value="{{ b[0] }}" {% if current_building|string == b[0]|string %}selected{% endif %}>
+                            {{ b[1] }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="col-md-3 d-flex align-items-end">
+                    <button type="submit" class="btn btn-primary me-2">
+                        <i class="bi bi-funnel"></i> Filtrer
+                    </button>
+                    <a href="{{ url_for('inspections.list_inspections') }}" class="btn btn-outline-secondary">
+                        <i class="bi bi-x-circle"></i>
+                    </a>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- Results -->
+<div class="d-flex justify-content-between align-items-center mb-3">
+    <span class="text-muted">
+        <i class="bi bi-clipboard-check"></i> {{ inspections|length }} inspection(s) trouvée(s)
+    </span>
+</div>
+
+<div class="card">
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table class="table table-hover table-striped mb-0">
+                <thead class="table-dark">
+                    <tr>
+                        <th>ID</th>
+                        <th>Date</th>
+                        <th>Bâtiment</th>
+                        <th>État Constaté</th>
+                        <th>Rapport</th>
+                        <th class="text-center">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% if inspections %}
+                        {% for i in inspections %}
+                        <tr>
+                            <td><strong>{{ i[0] }}</strong></td>
+                            <td>{{ i[1].strftime('%d/%m/%Y') if i[1] else 'N/A' }}</td>
+                            <td>
+                                <a href="{{ url_for('buildings.view_building', id=i[4]) }}">
+                                    <i class="bi bi-building"></i> {{ i[5] }}
+                                </a>
+                            </td>
+                            <td>
+                                {% if i[2] == 'Bon' %}
+                                <span class="badge bg-success">{{ i[2] }}</span>
+                                {% elif i[2] == 'Moyen' %}
+                                <span class="badge bg-warning text-dark">{{ i[2] }}</span>
+                                {% elif i[2] == 'Dégradé' %}
+                                <span class="badge" style="background-color: #e67e22;">{{ i[2] }}</span>
+                                {% elif i[2] == 'En ruine' %}
+                                <span class="badge bg-danger">{{ i[2] }}</span>
+                                {% else %}
+                                <span class="badge bg-secondary">{{ i[2] or 'N/A' }}</span>
+                                {% endif %}
+                            </td>
+                            <td>
+                                {% if i[3] %}
+                                <span class="text-truncate d-inline-block" style="max-width: 200px;" title="{{ i[3] }}">
+                                    {{ i[3][:50] }}{% if i[3]|length > 50 %}...{% endif %}
+                                </span>
+                                {% else %}
+                                <span class="text-muted">-</span>
+                                {% endif %}
+                            </td>
+                            <td class="text-center">
+                                <div class="btn-group btn-group-sm">
+                                    <a href="{{ url_for('inspections.view_inspection', id=i[0]) }}" 
+                                       class="btn btn-outline-primary" title="Voir">
+                                        <i class="bi bi-eye"></i>
+                                    </a>
+                                    <a href="{{ url_for('inspections.edit_inspection', id=i[0]) }}" 
+                                       class="btn btn-outline-warning" title="Modifier">
+                                        <i class="bi bi-pencil"></i>
+                                    </a>
+                                    <button type="button" class="btn btn-outline-danger" 
+                                            title="Supprimer"
+                                            data-id="{{ i[0] }}"
+                                            data-building="{{ i[5]|e }}"
+                                            data-date="{{ i[1].strftime('%d/%m/%Y') if i[1] else 'N/A' }}"
+                                            onclick="confirmDelete(this.dataset.id, this.dataset.building, this.dataset.date)">
+                                        <i class="bi bi-trash"></i>
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    {% else %}
+                        <tr>
+                            <td colspan="6" class="text-center py-4">
+                                <i class="bi bi-inbox text-muted" style="font-size: 2rem;"></i>
+                                <p class="text-muted mt-2 mb-0">Aucune inspection trouvée.</p>
+                            </td>
+                        </tr>
+                    {% endif %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header bg-danger text-white">
+                <h5 class="modal-title"><i class="bi bi-exclamation-triangle"></i> Confirmer la suppression</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p>Êtes-vous sûr de vouloir supprimer l'inspection du <strong id="inspDate"></strong> pour le bâtiment <strong id="inspBuilding"></strong>?</p>
+                <div class="alert alert-warning">
+                    <i class="bi bi-exclamation-triangle"></i> Cette action est irréversible.
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
+                <form id="deleteForm" method="POST" style="display: inline;">
+                    <button type="submit" class="btn btn-danger">
+                        <i class="bi bi-trash"></i> Supprimer
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+    function confirmDelete(id, building, date) {
+        document.getElementById('inspBuilding').textContent = building;
+        document.getElementById('inspDate').textContent = date;
+        document.getElementById('deleteForm').action = '/inspections/delete/' + id;
+        new bootstrap.Modal(document.getElementById('deleteModal')).show();
+    }
+    
+    // Auto-submit on filter change
+    document.querySelectorAll('#filterForm select').forEach(function(select) {
+        select.addEventListener('change', function() {
+            document.getElementById('filterForm').submit();
+        });
+    });
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/ui-app/app/templates/inspections/view.html b/ui-app/app/templates/inspections/view.html
new file mode 100644
index 0000000..89a7a7a
--- /dev/null
+++ b/ui-app/app/templates/inspections/view.html
@@ -0,0 +1,72 @@
+{% extends "base.html" %} {% block title %}Détails de l'Inspection{% endblock %}
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-clipboard-check"></i> Détails de l'Inspection</h1>
+  <div>
+    <a
+      href="{{ url_for('inspections.edit_inspection', id=inspection[0]) }}"
+      class="btn btn-warning"
+    >
+      <i class="bi bi-pencil"></i> Modifier
+    </a>
+    <a
+      href="{{ url_for('buildings.view_building', id=inspection[4]) }}"
+      class="btn btn-primary"
+    >
+      <i class="bi bi-building"></i> Voir le Bâtiment
+    </a>
+    <a
+      href="{{ url_for('inspections.list_inspections') }}"
+      class="btn btn-secondary"
+    >
+      <i class="bi bi-arrow-left"></i> Retour
+    </a>
+  </div>
+</div>
+
+<div class="card">
+  <div class="card-header bg-success text-white">
+    <h5 class="mb-0">
+      <i class="bi bi-info-circle"></i> Informations de l'Inspection
+    </h5>
+  </div>
+  <div class="card-body">
+    <div class="row">
+      <div class="col-md-6">
+        <p><strong>ID Inspection:</strong> {{ inspection[0] }}</p>
+        <p>
+          <strong>Date de Visite:</strong> {{ inspection[1].strftime('%d/%m/%Y')
+          if inspection[1] else 'N/A' }}
+        </p>
+        <p>
+          <strong>Bâtiment:</strong>
+          <a href="{{ url_for('buildings.view_building', id=inspection[4]) }}"
+            >{{ inspection[5] }}</a
+          >
+        </p>
+        <p><strong>Adresse:</strong> {{ inspection[6] or 'N/A' }}</p>
+      </div>
+      <div class="col-md-6">
+        <p>
+          <strong>État Constaté:</strong>
+          {% if inspection[2] == 'Bon' %}
+          <span class="badge badge-good fs-6">{{ inspection[2] }}</span>
+          {% elif inspection[2] == 'Moyen' %}
+          <span class="badge badge-warning fs-6">{{ inspection[2] }}</span>
+          {% else %}
+          <span class="badge badge-urgent fs-6">{{ inspection[2] }}</span>
+          {% endif %}
+        </p>
+      </div>
+    </div>
+
+    {% if inspection[3] %}
+    <hr />
+    <h6 class="mb-3"><strong>Rapport d'Inspection:</strong></h6>
+    <div class="alert alert-light">
+      <p class="mb-0" style="white-space: pre-wrap">{{ inspection[3] }}</p>
+    </div>
+    {% endif %}
+  </div>
+</div>
+{% endblock %}
diff --git a/ui-app/app/templates/interventions/add.html b/ui-app/app/templates/interventions/add.html
new file mode 100644
index 0000000..19780f6
--- /dev/null
+++ b/ui-app/app/templates/interventions/add.html
@@ -0,0 +1,82 @@
+{% extends "base.html" %}
+
+{% block title %}Ajouter une Intervention{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h1><i class="bi bi-plus-circle"></i> Ajouter une Intervention</h1>
+    <a href="{{ url_for('interventions.list_interventions') }}" class="btn btn-secondary">
+        <i class="bi bi-arrow-left"></i> Retour
+    </a>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <form method="POST" action="{{ url_for('interventions.add_intervention') }}">
+            <div class="row">
+                <div class="col-md-6 mb-3">
+                    <label for="code_batiment" class="form-label">Bâtiment <span class="text-danger">*</span></label>
+                    <select class="form-select" id="code_batiment" name="code_batiment" required>
+                        <option value="">-- Sélectionner un bâtiment --</option>
+                        {% for building in buildings %}
+                        <option value="{{ building[0] }}">{{ building[1] }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="col-md-6 mb-3">
+                    <label for="id_prestataire" class="form-label">Prestataire <span class="text-danger">*</span></label>
+                    <select class="form-select" id="id_prestataire" name="id_prestataire" required>
+                        <option value="">-- Sélectionner un prestataire --</option>
+                        {% for prestataire in prestataires %}
+                        <option value="{{ prestataire[0] }}">{{ prestataire[1] }} ({{ prestataire[2] }})</option>
+                        {% endfor %}
+                    </select>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-md-6 mb-3">
+                    <label for="date_debut" class="form-label">Date de Début</label>
+                    <input type="date" class="form-control" id="date_debut" name="date_debut">
+                </div>
+                
+                <div class="col-md-6 mb-3">
+                    <label for="date_fin" class="form-label">Date de Fin</label>
+                    <input type="date" class="form-control" id="date_fin" name="date_fin">
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-md-6 mb-3">
+                    <label for="cout_estime" class="form-label">Coût Estimé (MAD)</label>
+                    <input type="number" step="0.01" class="form-control" id="cout_estime" name="cout_estime" placeholder="Ex: 50000">
+                </div>
+                
+                <div class="col-md-6 mb-3">
+                    <label for="statut_travaux" class="form-label">Statut des Travaux</label>
+                    <select class="form-select" id="statut_travaux" name="statut_travaux">
+                        {% for statut in statuts %}
+                        <option value="{{ statut }}" {% if statut == 'Planifié' %}selected{% endif %}>{{ statut }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+            </div>
+
+            <div class="mb-3">
+                <label for="type_travaux" class="form-label">Type de Travaux</label>
+                <textarea class="form-control" id="type_travaux" name="type_travaux" rows="4" placeholder="Description des travaux à réaliser..."></textarea>
+            </div>
+
+            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+                <a href="{{ url_for('interventions.list_interventions') }}" class="btn btn-secondary">
+                    <i class="bi bi-x-circle"></i> Annuler
+                </a>
+                <button type="submit" class="btn btn-warning">
+                    <i class="bi bi-check-circle"></i> Enregistrer
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/ui-app/app/templates/interventions/edit.html b/ui-app/app/templates/interventions/edit.html
new file mode 100644
index 0000000..6529611
--- /dev/null
+++ b/ui-app/app/templates/interventions/edit.html
@@ -0,0 +1,80 @@
+{% extends "base.html" %}
+
+{% block title %}Modifier l'Intervention{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h1><i class="bi bi-pencil"></i> Modifier l'Intervention</h1>
+    <a href="{{ url_for('interventions.view_intervention', id=intervention[0]) }}" class="btn btn-secondary">
+        <i class="bi bi-arrow-left"></i> Retour
+    </a>
+</div>
+
+<div class="alert alert-info">
+    <i class="bi bi-building"></i> Bâtiment: <strong>{{ intervention[9] }}</strong>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <form method="POST" action="{{ url_for('interventions.edit_intervention', id=intervention[0]) }}">
+            <div class="row">
+                <div class="col-md-6 mb-3">
+                    <label for="id_prestataire" class="form-label">Prestataire <span class="text-danger">*</span></label>
+                    <select class="form-select" id="id_prestataire" name="id_prestataire" required>
+                        {% for p in prestataires %}
+                        <option value="{{ p[0] }}" {% if intervention[8] == p[0] %}selected{% endif %}>
+                            {{ p[1] }} ({{ p[2] or 'N/A' }})
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="col-md-6 mb-3">
+                    <label for="statut_travaux" class="form-label">Statut des Travaux</label>
+                    <select class="form-select" id="statut_travaux" name="statut_travaux">
+                        {% for statut in statuts %}
+                        <option value="{{ statut }}" {% if intervention[6] == statut %}selected{% endif %}>{{ statut }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-md-6 mb-3">
+                    <label for="date_debut" class="form-label">Date de Début</label>
+                    <input type="date" class="form-control" id="date_debut" name="date_debut" 
+                           value="{{ intervention[1].strftime('%Y-%m-%d') if intervention[1] else '' }}">
+                </div>
+                
+                <div class="col-md-6 mb-3">
+                    <label for="date_fin" class="form-label">Date de Fin</label>
+                    <input type="date" class="form-control" id="date_fin" name="date_fin"
+                           value="{{ intervention[2].strftime('%Y-%m-%d') if intervention[2] else '' }}">
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-md-6 mb-3">
+                    <label for="cout_estime" class="form-label">Coût Estimé (MAD)</label>
+                    <input type="number" step="0.01" class="form-control" id="cout_estime" name="cout_estime" 
+                           value="{{ intervention[4] or '' }}">
+                </div>
+            </div>
+
+            <div class="mb-3">
+                <label for="type_travaux" class="form-label">Type de Travaux</label>
+                <textarea class="form-control" id="type_travaux" name="type_travaux" rows="4">{{ intervention[3] or '' }}</textarea>
+            </div>
+
+            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+                <a href="{{ url_for('interventions.view_intervention', id=intervention[0]) }}" class="btn btn-secondary">
+                    <i class="bi bi-x-circle"></i> Annuler
+                </a>
+                <button type="submit" class="btn btn-warning">
+                    <i class="bi bi-check-circle"></i> Mettre à Jour
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/ui-app/app/templates/interventions/list.html b/ui-app/app/templates/interventions/list.html
new file mode 100644
index 0000000..c1f8356
--- /dev/null
+++ b/ui-app/app/templates/interventions/list.html
@@ -0,0 +1,218 @@
+{% extends "base.html" %}
+
+{% block title %}Liste des Interventions{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h1><i class="bi bi-tools"></i> Liste des Interventions</h1>
+    <a href="{{ url_for('interventions.add_intervention') }}" class="btn btn-warning">
+        <i class="bi bi-plus-circle"></i> Ajouter une Intervention
+    </a>
+</div>
+
+<!-- Search and Filter Card -->
+<div class="card mb-4">
+    <div class="card-header bg-warning text-white">
+        <h5 class="mb-0"><i class="bi bi-search"></i> Recherche et Filtres</h5>
+    </div>
+    <div class="card-body">
+        <form method="GET" action="{{ url_for('interventions.list_interventions') }}" id="filterForm">
+            <div class="row g-3">
+                <div class="col-md-6 col-lg-3">
+                    <label for="search" class="form-label"><i class="bi bi-search"></i> Recherche</label>
+                    <input type="text" class="form-control" id="search" name="search" 
+                           placeholder="Bâtiment, travaux, prestataire..." value="{{ current_search }}">
+                </div>
+                
+                <div class="col-md-6 col-lg-2">
+                    <label for="building" class="form-label"><i class="bi bi-building"></i> Bâtiment</label>
+                    <select class="form-select" id="building" name="building">
+                        <option value="">Tous</option>
+                        {% for b in buildings %}
+                        <option value="{{ b[0] }}" {% if current_building|string == b[0]|string %}selected{% endif %}>
+                            {{ b[1] }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="col-md-6 col-lg-2">
+                    <label for="statut" class="form-label"><i class="bi bi-flag"></i> Statut</label>
+                    <select class="form-select" id="statut" name="statut">
+                        <option value="">Tous</option>
+                        {% for s in statuts %}
+                        <option value="{{ s[0] }}" {% if current_statut == s[0] %}selected{% endif %}>
+                            {{ s[0] }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="col-md-6 col-lg-2">
+                    <label for="prestataire" class="form-label"><i class="bi bi-person"></i> Prestataire</label>
+                    <select class="form-select" id="prestataire" name="prestataire">
+                        <option value="">Tous</option>
+                        {% for p in prestataires %}
+                        <option value="{{ p[0] }}" {% if current_prestataire|string == p[0]|string %}selected{% endif %}>
+                            {{ p[1] }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="col-md-6 col-lg-2">
+                    <label for="validated" class="form-label"><i class="bi bi-check-circle"></i> Validée</label>
+                    <select class="form-select" id="validated" name="validated">
+                        <option value="">Tous</option>
+                        <option value="yes" {% if current_validated == 'yes' %}selected{% endif %}>Oui</option>
+                        <option value="no" {% if current_validated == 'no' %}selected{% endif %}>Non</option>
+                    </select>
+                </div>
+            </div>
+            
+            <div class="row mt-3">
+                <div class="col-12 d-flex gap-2">
+                    <button type="submit" class="btn btn-warning">
+                        <i class="bi bi-funnel"></i> Appliquer
+                    </button>
+                    <a href="{{ url_for('interventions.list_interventions') }}" class="btn btn-outline-secondary">
+                        <i class="bi bi-x-circle"></i> Réinitialiser
+                    </a>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- Results -->
+<div class="d-flex justify-content-between align-items-center mb-3">
+    <span class="text-muted">
+        <i class="bi bi-tools"></i> {{ interventions|length }} intervention(s) trouvée(s)
+    </span>
+</div>
+
+<div class="card">
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table class="table table-hover table-striped mb-0">
+                <thead class="table-dark">
+                    <tr>
+                        <th>ID</th>
+                        <th>Bâtiment</th>
+                        <th>Date Début</th>
+                        <th>Type de Travaux</th>
+                        <th>Coût Estimé</th>
+                        <th>Prestataire</th>
+                        <th>Statut</th>
+                        <th>Validée</th>
+                        <th class="text-center">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% if interventions %}
+                        {% for intervention in interventions %}
+                        <tr>
+                            <td><strong>{{ intervention[0] }}</strong></td>
+                            <td>
+                                <a href="{{ url_for('buildings.view_building', id=intervention[7]) }}">
+                                    <i class="bi bi-building"></i> {{ intervention[8] }}
+                                </a>
+                            </td>
+                            <td>
+                                {% if intervention[1] %}
+                                    {{ intervention[1]|safe_strftime }}
+                                {% else %}N/A{% endif %}
+                            </td>
+                            <td>{{ (intervention[3][:30] + '...') if intervention[3] and intervention[3]|length > 30 else (intervention[3] or 'N/A') }}</td>
+                            <td>{{ "{:,.2f}".format(intervention[4]) if intervention[4] else 'N/A' }} MAD</td>
+                            <td>{{ intervention[10] or 'N/A' }}</td>
+                            <td>
+                                {% if intervention[6] == 'Terminé' %}
+                                <span class="badge bg-success">{{ intervention[6] }}</span>
+                                {% elif intervention[6] == 'En cours' %}
+                                <span class="badge bg-primary">{{ intervention[6] }}</span>
+                                {% elif intervention[6] == 'Planifié' %}
+                                <span class="badge bg-info">{{ intervention[6] }}</span>
+                                {% elif intervention[6] == 'Annulé' %}
+                                <span class="badge bg-danger">{{ intervention[6] }}</span>
+                                {% else %}
+                                <span class="badge bg-secondary">{{ intervention[6] or 'N/A' }}</span>
+                                {% endif %}
+                            </td>
+                            <td>
+                                {% if intervention[5] %}
+                                <span class="badge bg-success"><i class="bi bi-check-circle"></i> Oui</span>
+                                {% else %}
+                                <span class="badge bg-secondary"><i class="bi bi-clock"></i> Non</span>
+                                {% endif %}
+                            </td>
+                            <td class="text-center">
+                                <div class="btn-group btn-group-sm">
+                                    <a href="{{ url_for('interventions.view_intervention', id=intervention[0]) }}" 
+                                       class="btn btn-outline-primary" title="Voir">
+                                        <i class="bi bi-eye"></i>
+                                    </a>
+                                    <a href="{{ url_for('interventions.edit_intervention', id=intervention[0]) }}" 
+                                       class="btn btn-outline-warning" title="Modifier">
+                                        <i class="bi bi-pencil"></i>
+                                    </a>
+                                    <button type="button" class="btn btn-outline-danger" 
+                                            title="Supprimer"
+                                            data-intervention-id="{{ intervention[0] }}"
+                                            onclick="confirmDelete(this.dataset.interventionId)">
+                                        <i class="bi bi-trash"></i>
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    {% else %}
+                        <tr>
+                            <td colspan="9" class="text-center py-4">
+                                <i class="bi bi-inbox text-muted" style="font-size: 2rem;"></i>
+                                <p class="text-muted mt-2 mb-0">Aucune intervention trouvée.</p>
+                            </td>
+                        </tr>
+                    {% endif %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header bg-danger text-white">
+                <h5 class="modal-title"><i class="bi bi-exclamation-triangle"></i> Confirmer la suppression</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p>Êtes-vous sûr de vouloir supprimer cette intervention?</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
+                <form id="deleteForm" method="POST" style="display: inline;">
+                    <button type="submit" class="btn btn-danger">
+                        <i class="bi bi-trash"></i> Supprimer
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+    function confirmDelete(id) {
+        document.getElementById('deleteForm').action = `/interventions/delete/${id}`;
+        new bootstrap.Modal(document.getElementById('deleteModal')).show();
+    }
+    
+    document.querySelectorAll('#filterForm select').forEach(select => {
+        select.addEventListener('change', () => document.getElementById('filterForm').submit());
+    });
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/ui-app/app/templates/interventions/view.html b/ui-app/app/templates/interventions/view.html
new file mode 100644
index 0000000..1222afd
--- /dev/null
+++ b/ui-app/app/templates/interventions/view.html
@@ -0,0 +1,135 @@
+{% extends "base.html" %} {% block title %}Détails de l'Intervention{% endblock
+%} {% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-tools"></i> Détails de l'Intervention</h1>
+  <div>
+    <a
+      href="{{ url_for('interventions.edit_intervention', id=intervention[0]) }}"
+      class="btn btn-warning"
+    >
+      <i class="bi bi-pencil"></i> Modifier
+    </a>
+    <a
+      href="{{ url_for('buildings.view_building', id=intervention[7]) }}"
+      class="btn btn-primary"
+    >
+      <i class="bi bi-building"></i> Voir le Bâtiment
+    </a>
+    <a
+      href="{{ url_for('interventions.list_interventions') }}"
+      class="btn btn-secondary"
+    >
+      <i class="bi bi-arrow-left"></i> Retour
+    </a>
+  </div>
+</div>
+
+<div class="card mb-4">
+  <div class="card-header bg-warning text-white">
+    <h5 class="mb-0">
+      <i class="bi bi-info-circle"></i> Informations de l'Intervention
+    </h5>
+  </div>
+  <div class="card-body">
+    <div class="row">
+      <div class="col-md-6">
+        <p><strong>ID Intervention:</strong> {{ intervention[0] }}</p>
+        <p>
+          <strong>Bâtiment:</strong>
+          <a
+            href="{{ url_for('buildings.view_building', id=intervention[7]) }}"
+          >
+            {{ intervention[11] }}
+          </a>
+        </p>
+        <p><strong>Adresse:</strong> {{ intervention[12] or 'N/A' }}</p>
+        <p>
+          <strong>Date Début:</strong> {{ intervention[1].strftime('%d/%m/%Y')
+          if intervention[1] else 'N/A' }}
+        </p>
+        <p>
+          <strong>Date Fin:</strong> {{ intervention[2].strftime('%d/%m/%Y') if
+          intervention[2] else 'N/A' }}
+        </p>
+      </div>
+      <div class="col-md-6">
+        <p><strong>Prestataire:</strong> {{ intervention[13] }}</p>
+        <p><strong>Rôle:</strong> {{ intervention[14] or 'N/A' }}</p>
+        <p>
+          <strong>Coût Estimé:</strong> {{ "{:,.2f}".format(intervention[4]) if
+          intervention[4] else 'N/A' }} MAD
+        </p>
+        <p>
+          <strong>Statut:</strong>
+          <span class="badge bg-info">{{ intervention[6] or 'N/A' }}</span>
+        </p>
+        <p>
+          <strong>Validée:</strong>
+          {% if intervention[5] %}
+          <span class="badge bg-success fs-6"
+            ><i class="bi bi-check-circle"></i> Oui</span
+          >
+          <br /><small class="text-muted"
+            >Date: {{ intervention[9].strftime('%d/%m/%Y') if intervention[9]
+            else 'N/A' }}</small
+          >
+          {% else %}
+          <span class="badge bg-secondary fs-6"
+            ><i class="bi bi-clock"></i> En attente</span
+          >
+          {% endif %}
+        </p>
+      </div>
+    </div>
+
+    {% if intervention[3] %}
+    <hr />
+    <h6 class="mb-3"><strong>Description des Travaux:</strong></h6>
+    <div class="alert alert-light">
+      <p class="mb-0" style="white-space: pre-wrap">{{ intervention[3] }}</p>
+    </div>
+    {% endif %} {% if intervention[10] %}
+    <hr />
+    <h6 class="mb-3"><strong>Commentaire de Validation:</strong></h6>
+    <div class="alert alert-success">
+      <p class="mb-0" style="white-space: pre-wrap">{{ intervention[10] }}</p>
+    </div>
+    {% endif %}
+  </div>
+</div>
+
+<!-- Validation Form -->
+{% if not intervention[5] %}
+<div class="card border-success">
+  <div class="card-header bg-success text-white">
+    <h5 class="mb-0">
+      <i class="bi bi-check-circle"></i> Valider cette Intervention
+    </h5>
+  </div>
+  <div class="card-body">
+    <form
+      method="POST"
+      action="{{ url_for('interventions.validate_intervention', id=intervention[0]) }}"
+    >
+      <div class="mb-3">
+        <label for="commentaire_validation" class="form-label"
+          >Commentaire de Validation (optionnel)</label
+        >
+        <textarea
+          class="form-control"
+          id="commentaire_validation"
+          name="commentaire_validation"
+          rows="3"
+          placeholder="Ajouter un commentaire..."
+        ></textarea>
+      </div>
+
+      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+        <button type="submit" class="btn btn-success">
+          <i class="bi bi-check-circle"></i> Valider l'Intervention
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+{% endif %} {% endblock %}
diff --git a/ui-app/app/templates/prestataires/add.html b/ui-app/app/templates/prestataires/add.html
new file mode 100644
index 0000000..fbdd744
--- /dev/null
+++ b/ui-app/app/templates/prestataires/add.html
@@ -0,0 +1,80 @@
+{% extends "base.html" %} {% block title %}Ajouter un Prestataire{% endblock %}
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-plus-circle"></i> Ajouter un Prestataire</h1>
+  <a
+    href="{{ url_for('prestataires.list_prestataires') }}"
+    class="btn btn-secondary"
+  >
+    <i class="bi bi-arrow-left"></i> Retour
+  </a>
+</div>
+
+<div class="card">
+  <div class="card-body">
+    <form method="POST" action="{{ url_for('prestataires.add_prestataire') }}">
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          <label for="nom_entreprise" class="form-label">
+            Nom de l'Entreprise <span class="text-danger">*</span>
+          </label>
+          <input
+            type="text"
+            class="form-control"
+            id="nom_entreprise"
+            name="nom_entreprise"
+            placeholder="Ex: Patrimoine Restauration SARL"
+            required
+          />
+          <div class="form-text">
+            Nom complet de l'entreprise ou du prestataire
+          </div>
+        </div>
+
+        <div class="col-md-6 mb-3">
+          <label for="role_prest" class="form-label">Rôle / Spécialité</label>
+          <input
+            type="text"
+            class="form-control"
+            id="role_prest"
+            name="role_prest"
+            list="roles_list"
+            placeholder="Ex: Architecte, Entreprise BTP..."
+          />
+          <datalist id="roles_list">
+            {% for role in existing_roles %}
+            <option value="{{ role }}"></option>
+            {% endfor %}
+            <option value="Architecte"></option>
+            <option value="Entreprise BTP"></option>
+            <option value="Bureau d'Études"></option>
+            <option value="Artisan"></option>
+            <option value="Restaurateur"></option>
+            <option value="Ingénieur"></option>
+            <option value="Consultant"></option>
+            <option value="Artisanat d'Art"></option>
+            <option value="Spécialiste Pisé/Terre"></option>
+            <option value="Gros Oeuvre"></option>
+          </datalist>
+
+          <div class="form-text">
+            Sélectionnez un rôle existant ou saisissez-en un nouveau
+          </div>
+        </div>
+      </div>
+
+      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+        <a
+          href="{{ url_for('prestataires.list_prestataires') }}"
+          class="btn btn-secondary"
+        >
+          <i class="bi bi-x-circle"></i> Annuler
+        </a>
+        <button type="submit" class="btn btn-info">
+          <i class="bi bi-check-circle"></i> Enregistrer
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+{% endblock %}
diff --git a/ui-app/app/templates/prestataires/edit.html b/ui-app/app/templates/prestataires/edit.html
new file mode 100644
index 0000000..1de4e1c
--- /dev/null
+++ b/ui-app/app/templates/prestataires/edit.html
@@ -0,0 +1,81 @@
+{% extends "base.html" %} {% block title %}Modifier le Prestataire{% endblock %}
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-pencil"></i> Modifier le Prestataire</h1>
+  <a
+    href="{{ url_for('prestataires.view_prestataire', id=prestataire[0]) }}"
+    class="btn btn-secondary"
+  >
+    <i class="bi bi-arrow-left"></i> Retour
+  </a>
+</div>
+
+<div class="card">
+  <div class="card-body">
+    <form
+      method="POST"
+      action="{{ url_for('prestataires.edit_prestataire', id=prestataire[0]) }}"
+    >
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          <label for="nom_entreprise" class="form-label">
+            Nom de l'Entreprise <span class="text-danger">*</span>
+          </label>
+          <input
+            type="text"
+            class="form-control"
+            id="nom_entreprise"
+            name="nom_entreprise"
+            value="{{ prestataire[1] }}"
+            required
+          />
+        </div>
+
+        <div class="col-md-6 mb-3">
+          <label for="role_prest" class="form-label">Rôle / Spécialité</label>
+          <input
+            type="text"
+            class="form-control"
+            id="role_prest"
+            name="role_prest"
+            list="roles_list"
+            value="{{ prestataire[2] or '' }}"
+            placeholder="Ex: Architecte, Entreprise BTP..."
+          />
+          <datalist id="roles_list">
+            {% for role in existing_roles %}
+            <option value="{{ role }}"></option>
+            {% endfor %}
+            <option value="Architecte"></option>
+            <option value="Entreprise BTP"></option>
+            <option value="Bureau d'Études"></option>
+            <option value="Artisan"></option>
+            <option value="Restaurateur"></option>
+            <option value="Ingénieur"></option>
+            <option value="Consultant"></option>
+            <option value="Artisanat d'Art"></option>
+            <option value="Spécialiste Pisé/Terre"></option>
+            <option value="Gros Oeuvre"></option>
+          </datalist>
+
+          <div class="form-text">
+            Sélectionnez un rôle existant ou saisissez-en un nouveau
+          </div>
+        </div>
+      </div>
+
+      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+        <a
+          href="{{ url_for('prestataires.view_prestataire', id=prestataire[0]) }}"
+          class="btn btn-secondary"
+        >
+          <i class="bi bi-x-circle"></i> Annuler
+        </a>
+        <button type="submit" class="btn btn-warning">
+          <i class="bi bi-check-circle"></i> Mettre à Jour
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+{% endblock %}
diff --git a/ui-app/app/templates/prestataires/list.html b/ui-app/app/templates/prestataires/list.html
new file mode 100644
index 0000000..8091fa5
--- /dev/null
+++ b/ui-app/app/templates/prestataires/list.html
@@ -0,0 +1,161 @@
+{% extends "base.html" %}
+
+{% block title %}Liste des Prestataires{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h1><i class="bi bi-people"></i> Liste des Prestataires</h1>
+    <a href="{{ url_for('prestataires.add_prestataire') }}" class="btn btn-info">
+        <i class="bi bi-plus-circle"></i> Ajouter un Prestataire
+    </a>
+</div>
+
+<!-- Search and Filter Card -->
+<div class="card mb-4">
+    <div class="card-header bg-info text-white">
+        <h5 class="mb-0"><i class="bi bi-search"></i> Recherche et Filtres</h5>
+    </div>
+    <div class="card-body">
+        <form method="GET" action="{{ url_for('prestataires.list_prestataires') }}" id="filterForm">
+            <div class="row g-3">
+                <div class="col-md-6">
+                    <label for="search" class="form-label"><i class="bi bi-search"></i> Recherche</label>
+                    <input type="text" class="form-control" id="search" name="search" 
+                           placeholder="Nom entreprise, rôle..." value="{{ current_search }}">
+                </div>
+                
+                <div class="col-md-4">
+                    <label for="role" class="form-label"><i class="bi bi-briefcase"></i> Rôle</label>
+                    <select class="form-select" id="role" name="role">
+                        <option value="">Tous les rôles</option>
+                        {% for r in roles %}
+                        <option value="{{ r[0] }}" {% if current_role == r[0] %}selected{% endif %}>
+                            {{ r[0] }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="col-md-2 d-flex align-items-end">
+                    <button type="submit" class="btn btn-info me-2">
+                        <i class="bi bi-funnel"></i> Filtrer
+                    </button>
+                    <a href="{{ url_for('prestataires.list_prestataires') }}" class="btn btn-outline-secondary">
+                        <i class="bi bi-x-circle"></i>
+                    </a>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- Results -->
+<div class="d-flex justify-content-between align-items-center mb-3">
+    <span class="text-muted">
+        <i class="bi bi-people"></i> {{ prestataires|length }} prestataire(s) trouvé(s)
+    </span>
+</div>
+
+<div class="card">
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table class="table table-hover table-striped mb-0">
+                <thead class="table-dark">
+                    <tr>
+                        <th>ID</th>
+                        <th>Nom de l'Entreprise</th>
+                        <th>Rôle</th>
+                        <th>Interventions</th>
+                        <th>Coût Total (MAD)</th>
+                        <th class="text-center">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% if prestataires %}
+                        {% for p in prestataires %}
+                        <tr>
+                            <td><strong>{{ p[0] }}</strong></td>
+                            <td>{{ p[1] }}</td>
+                            <td>
+                                {% if p[2] %}
+                                <span class="badge bg-info">{{ p[2] }}</span>
+                                {% else %}
+                                <span class="text-muted">-</span>
+                                {% endif %}
+                            </td>
+                            <td>
+                                <span class="badge bg-primary">{{ p[3] }}</span>
+                            </td>
+                            <td>{{ "{:,.2f}".format(p[4]) if p[4] else '0.00' }}</td>
+                            <td class="text-center">
+                                <div class="btn-group btn-group-sm">
+                                    <a href="{{ url_for('prestataires.view_prestataire', id=p[0]) }}" 
+                                       class="btn btn-outline-primary" title="Voir">
+                                        <i class="bi bi-eye"></i>
+                                    </a>
+                                    <a href="{{ url_for('prestataires.edit_prestataire', id=p[0]) }}" 
+                                       class="btn btn-outline-warning" title="Modifier">
+                                        <i class="bi bi-pencil"></i>
+                                    </a>
+                                    <button type="button" class="btn btn-outline-danger" 
+                                            title="Supprimer"
+                                            data-id="{{ p[0] }}"
+                                            data-name="{{ p[1]|e }}"
+                                            onclick="confirmDelete(this.dataset.id, this.dataset.name)">
+                                        <i class="bi bi-trash"></i>
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    {% else %}
+                        <tr>
+                            <td colspan="6" class="text-center py-4">
+                                <i class="bi bi-inbox text-muted" style="font-size: 2rem;"></i>
+                                <p class="text-muted mt-2 mb-0">Aucun prestataire trouvé.</p>
+                            </td>
+                        </tr>
+                    {% endif %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header bg-danger text-white">
+                <h5 class="modal-title"><i class="bi bi-exclamation-triangle"></i> Confirmer la suppression</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p>Êtes-vous sûr de vouloir supprimer le prestataire <strong id="prestataireName"></strong>?</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
+                <form id="deleteForm" method="POST" style="display: inline;">
+                    <button type="submit" class="btn btn-danger">
+                        <i class="bi bi-trash"></i> Supprimer
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+    function confirmDelete(id, name) {
+        document.getElementById('prestataireName').textContent = name;
+        document.getElementById('deleteForm').action = `/prestataires/delete/${id}`;
+        new bootstrap.Modal(document.getElementById('deleteModal')).show();
+    }
+    
+    document.getElementById('role').addEventListener('change', function() {
+        document.getElementById('filterForm').submit();
+    });
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/ui-app/app/templates/prestataires/view.html b/ui-app/app/templates/prestataires/view.html
new file mode 100644
index 0000000..1031564
--- /dev/null
+++ b/ui-app/app/templates/prestataires/view.html
@@ -0,0 +1,162 @@
+{% extends "base.html" %} {% block title %}{{ prestataire[1] }} - Détails{%
+endblock %} {% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-building-gear"></i> {{ prestataire[1] }}</h1>
+  <div>
+    <a
+      href="{{ url_for('prestataires.edit_prestataire', id=prestataire[0]) }}"
+      class="btn btn-warning"
+    >
+      <i class="bi bi-pencil"></i> Modifier
+    </a>
+    <a
+      href="{{ url_for('prestataires.list_prestataires') }}"
+      class="btn btn-secondary"
+    >
+      <i class="bi bi-arrow-left"></i> Retour
+    </a>
+  </div>
+</div>
+
+<!-- Prestataire Info Card -->
+<div class="card mb-4">
+  <div class="card-header bg-info text-white">
+    <h5 class="mb-0">
+      <i class="bi bi-info-circle"></i> Informations du Prestataire
+    </h5>
+  </div>
+  <div class="card-body">
+    <div class="row">
+      <div class="col-md-6">
+        <p><strong>ID:</strong> {{ prestataire[0] }}</p>
+        <p><strong>Nom de l'Entreprise:</strong> {{ prestataire[1] }}</p>
+        <p>
+          <strong>Rôle / Spécialité:</strong>
+          {% if prestataire[2] %}
+          <span class="badge bg-info fs-6">{{ prestataire[2] }}</span>
+          {% else %}
+          <span class="text-muted">Non spécifié</span>
+          {% endif %}
+        </p>
+      </div>
+      <div class="col-md-6">
+        <!-- Statistics -->
+        <div class="row text-center">
+          <div class="col-6 col-md-4 mb-3">
+            <div class="border rounded p-3">
+              <h3 class="text-primary mb-0">{{ stats[0] }}</h3>
+              <small class="text-muted">Total Interventions</small>
+            </div>
+          </div>
+          <div class="col-6 col-md-4 mb-3">
+            <div class="border rounded p-3">
+              <h3 class="text-success mb-0">{{ stats[1] }}</h3>
+              <small class="text-muted">Validées</small>
+            </div>
+          </div>
+          <div class="col-6 col-md-4 mb-3">
+            <div class="border rounded p-3">
+              <h3 class="text-warning mb-0">{{ stats[2] }}</h3>
+              <small class="text-muted">En cours</small>
+            </div>
+          </div>
+        </div>
+        <p class="text-center mt-2">
+          <strong>Coût Total Estimé:</strong>
+          <span class="badge bg-dark fs-6"
+            >{{ "{:,.2f}".format(stats[4]) }} MAD</span
+          >
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Interventions -->
+<div class="card">
+  <div
+    class="card-header bg-warning text-white d-flex justify-content-between align-items-center"
+  >
+    <h5 class="mb-0">
+      <i class="bi bi-tools"></i> Interventions ({{ interventions|length }})
+    </h5>
+    <a
+      href="{{ url_for('interventions.add_intervention') }}"
+      class="btn btn-sm btn-light"
+    >
+      <i class="bi bi-plus"></i> Nouvelle Intervention
+    </a>
+  </div>
+  <div class="card-body">
+    {% if interventions %}
+    <div class="table-responsive">
+      <table class="table table-hover">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Bâtiment</th>
+            <th>Date Début</th>
+            <th>Type de Travaux</th>
+            <th>Coût Estimé</th>
+            <th>Statut</th>
+            <th>Validée</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for i in interventions %}
+          <tr>
+            <td><strong>{{ i[0] }}</strong></td>
+            <td>
+              <a href="{{ url_for('buildings.view_building', id=i[7]) }}">
+                {{ i[8] }}
+              </a>
+            </td>
+            <td>{{ i[1]|safe_strftime if i[1] else 'N/A' }}</td>
+            <td>
+              {{ (i[3][:30] + '...') if i[3] and i[3]|length > 30 else (i[3] or
+              'N/A') }}
+            </td>
+            <td>{{ "{:,.2f}".format(i[4]) if i[4] else 'N/A' }} MAD</td>
+            <td>
+              {% if i[6] == 'Terminé' %}
+              <span class="badge bg-success">{{ i[6] }}</span>
+              {% elif i[6] == 'En cours' %}
+              <span class="badge bg-primary">{{ i[6] }}</span>
+              {% elif i[6] == 'Planifié' %}
+              <span class="badge bg-info">{{ i[6] }}</span>
+              {% else %}
+              <span class="badge bg-secondary">{{ i[6] or 'N/A' }}</span>
+              {% endif %}
+            </td>
+            <td>
+              {% if i[5] %}
+              <span class="badge bg-success"><i class="bi bi-check"></i></span>
+              {% else %}
+              <span class="badge bg-secondary"
+                ><i class="bi bi-clock"></i
+              ></span>
+              {% endif %}
+            </td>
+            <td>
+              <a
+                href="{{ url_for('interventions.view_intervention', id=i[0]) }}"
+                class="btn btn-sm btn-outline-primary"
+              >
+                <i class="bi bi-eye"></i>
+              </a>
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+    {% else %}
+    <p class="text-muted text-center py-4">
+      <i class="bi bi-inbox" style="font-size: 2rem"></i><br />
+      Aucune intervention enregistrée pour ce prestataire.
+    </p>
+    {% endif %}
+  </div>
+</div>
+{% endblock %}
diff --git a/ui-app/app/templates/proprietaires/add.html b/ui-app/app/templates/proprietaires/add.html
new file mode 100644
index 0000000..da7b4a0
--- /dev/null
+++ b/ui-app/app/templates/proprietaires/add.html
@@ -0,0 +1,94 @@
+{% extends "base.html" %} {% block title %}Ajouter un Propriétaire{% endblock %}
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-plus-circle"></i> Ajouter un Propriétaire</h1>
+  <a
+    href="{{ url_for('proprietaires.list_proprietaires') }}"
+    class="btn btn-secondary"
+  >
+    <i class="bi bi-arrow-left"></i> Retour
+  </a>
+</div>
+
+<div class="card">
+  <div class="card-body">
+    <form
+      method="POST"
+      action="{{ url_for('proprietaires.add_proprietaire') }}"
+    >
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          <label for="nom_complet" class="form-label">
+            Nom Complet <span class="text-danger">*</span>
+          </label>
+          <input
+            type="text"
+            class="form-control"
+            id="nom_complet"
+            name="nom_complet"
+            placeholder="Ex: Ministère de la Culture, M. Ahmed Alami..."
+            required
+          />
+          <div class="form-text">
+            Nom du propriétaire (personne ou organisme)
+          </div>
+        </div>
+
+        <div class="col-md-6 mb-3">
+          <label for="type_proprio" class="form-label"
+            >Type de Propriétaire</label
+          >
+          <input
+            type="text"
+            class="form-control"
+            id="type_proprio"
+            name="type_proprio"
+            list="types_list"
+            placeholder="Ex: Public, Privé..."
+          />
+          <datalist id="types_list">
+            {% for type in existing_types %}
+            <option value="{{ type }}"></option>
+            {% endfor %}
+            <option value="Public"></option>
+            <option value="Privé"></option>
+            <option value="Mixte"></option>
+            <option value="Habous"></option>
+            <option value="Communal"></option>
+            <option value="Étatique"></option>
+            <option value="Associatif"></option>
+          </datalist>
+
+          <div class="form-text">Catégorie du propriétaire</div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          <label for="contact" class="form-label">Contact</label>
+          <input
+            type="text"
+            class="form-control"
+            id="contact"
+            name="contact"
+            placeholder="Ex: +212 5XX XX XX XX, email@domain.ma"
+          />
+          <div class="form-text">Téléphone ou email de contact</div>
+        </div>
+      </div>
+
+      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+        <a
+          href="{{ url_for('proprietaires.list_proprietaires') }}"
+          class="btn btn-secondary"
+        >
+          <i class="bi bi-x-circle"></i> Annuler
+        </a>
+        <button type="submit" class="btn btn-primary">
+          <i class="bi bi-check-circle"></i> Enregistrer
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+{% endblock %}
diff --git a/ui-app/app/templates/proprietaires/edit.html b/ui-app/app/templates/proprietaires/edit.html
new file mode 100644
index 0000000..d1e64b7
--- /dev/null
+++ b/ui-app/app/templates/proprietaires/edit.html
@@ -0,0 +1,90 @@
+{% extends "base.html" %} {% block title %}Modifier le Propriétaire{% endblock
+%} {% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-pencil"></i> Modifier le Propriétaire</h1>
+  <a
+    href="{{ url_for('proprietaires.view_proprietaire', id=proprietaire[0]) }}"
+    class="btn btn-secondary"
+  >
+    <i class="bi bi-arrow-left"></i> Retour
+  </a>
+</div>
+
+<div class="card">
+  <div class="card-body">
+    <form
+      method="POST"
+      action="{{ url_for('proprietaires.edit_proprietaire', id=proprietaire[0]) }}"
+    >
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          <label for="nom_complet" class="form-label">
+            Nom Complet <span class="text-danger">*</span>
+          </label>
+          <input
+            type="text"
+            class="form-control"
+            id="nom_complet"
+            name="nom_complet"
+            value="{{ proprietaire[1] }}"
+            required
+          />
+        </div>
+
+        <div class="col-md-6 mb-3">
+          <label for="type_proprio" class="form-label"
+            >Type de Propriétaire</label
+          >
+          <input
+            type="text"
+            class="form-control"
+            id="type_proprio"
+            name="type_proprio"
+            list="types_list"
+            value="{{ proprietaire[2] or '' }}"
+            placeholder="Ex: Public, Privé..."
+          />
+          <datalist id="types_list">
+            {% for type in existing_types %}
+            <option value="{{ type }}"></option>
+            {% endfor %}
+            <option value="Public"></option>
+            <option value="Privé"></option>
+            <option value="Mixte"></option>
+            <option value="Habous"></option>
+            <option value="Communal"></option>
+            <option value="Étatique"></option>
+            <option value="Associatif"></option>
+          </datalist>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          <label for="contact" class="form-label">Contact</label>
+          <input
+            type="text"
+            class="form-control"
+            id="contact"
+            name="contact"
+            value="{{ proprietaire[3] or '' }}"
+            placeholder="Ex: +212 5XX XX XX XX, email@domain.ma"
+          />
+        </div>
+      </div>
+
+      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+        <a
+          href="{{ url_for('proprietaires.view_proprietaire', id=proprietaire[0]) }}"
+          class="btn btn-secondary"
+        >
+          <i class="bi bi-x-circle"></i> Annuler
+        </a>
+        <button type="submit" class="btn btn-warning">
+          <i class="bi bi-check-circle"></i> Mettre à Jour
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+{% endblock %}
diff --git a/ui-app/app/templates/proprietaires/list.html b/ui-app/app/templates/proprietaires/list.html
new file mode 100644
index 0000000..6c2fe10
--- /dev/null
+++ b/ui-app/app/templates/proprietaires/list.html
@@ -0,0 +1,186 @@
+{% extends "base.html" %}
+
+{% block title %}Liste des Propriétaires{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h1><i class="bi bi-person-badge"></i> Liste des Propriétaires</h1>
+    <a href="{{ url_for('proprietaires.add_proprietaire') }}" class="btn btn-primary">
+        <i class="bi bi-plus-circle"></i> Ajouter un Propriétaire
+    </a>
+</div>
+
+<!-- Search and Filter Card -->
+<div class="card mb-4">
+    <div class="card-header bg-primary text-white">
+        <h5 class="mb-0"><i class="bi bi-search"></i> Recherche et Filtres</h5>
+    </div>
+    <div class="card-body">
+        <form method="GET" action="{{ url_for('proprietaires.list_proprietaires') }}" id="filterForm">
+            <div class="row g-3">
+                <div class="col-md-5">
+                    <label for="search" class="form-label"><i class="bi bi-search"></i> Recherche</label>
+                    <input type="text" class="form-control" id="search" name="search" 
+                           placeholder="Nom, contact..." value="{{ current_search }}">
+                </div>
+                
+                <div class="col-md-4">
+                    <label for="type_proprio" class="form-label"><i class="bi bi-tag"></i> Type</label>
+                    <select class="form-select" id="type_proprio" name="type_proprio">
+                        <option value="">Tous les types</option>
+                        {% for t in types %}
+                        <option value="{{ t[0] }}" {% if current_type == t[0] %}selected{% endif %}>
+                            {{ t[0] }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="col-md-3 d-flex align-items-end">
+                    <button type="submit" class="btn btn-primary me-2">
+                        <i class="bi bi-funnel"></i> Filtrer
+                    </button>
+                    <a href="{{ url_for('proprietaires.list_proprietaires') }}" class="btn btn-outline-secondary">
+                        <i class="bi bi-x-circle"></i>
+                    </a>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- Results -->
+<div class="d-flex justify-content-between align-items-center mb-3">
+    <span class="text-muted">
+        <i class="bi bi-person-badge"></i> {{ proprietaires|length }} propriétaire(s) trouvé(s)
+    </span>
+</div>
+
+<div class="card">
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table class="table table-hover table-striped mb-0">
+                <thead class="table-dark">
+                    <tr>
+                        <th>ID</th>
+                        <th>Nom Complet</th>
+                        <th>Type</th>
+                        <th>Contact</th>
+                        <th>Bâtiments</th>
+                        <th class="text-center">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% if proprietaires %}
+                        {% for p in proprietaires %}
+                        <tr>
+                            <td><strong>{{ p[0] }}</strong></td>
+                            <td>
+                                <i class="bi bi-person-fill text-primary"></i>
+                                {{ p[1] }}
+                            </td>
+                            <td>
+                                {% if p[2] %}
+                                {% if p[2] == 'Public' %}
+                                <span class="badge bg-success">{{ p[2] }}</span>
+                                {% elif p[2] == 'Privé' %}
+                                <span class="badge bg-info">{{ p[2] }}</span>
+                                {% else %}
+                                <span class="badge bg-secondary">{{ p[2] }}</span>
+                                {% endif %}
+                                {% else %}
+                                <span class="text-muted">-</span>
+                                {% endif %}
+                            </td>
+                            <td>{{ p[3] or '-' }}</td>
+                            <td>
+                                <span class="badge bg-primary">{{ p[4] }} bâtiment(s)</span>
+                            </td>
+                            <td class="text-center">
+                                <div class="btn-group btn-group-sm">
+                                    <a href="{{ url_for('proprietaires.view_proprietaire', id=p[0]) }}" 
+                                       class="btn btn-outline-primary" title="Voir">
+                                        <i class="bi bi-eye"></i>
+                                    </a>
+                                    <a href="{{ url_for('proprietaires.edit_proprietaire', id=p[0]) }}" 
+                                       class="btn btn-outline-warning" title="Modifier">
+                                        <i class="bi bi-pencil"></i>
+                                    </a>
+                                    <button type="button" class="btn btn-outline-danger" 
+                                            title="Supprimer"
+                                            data-id="{{ p[0] }}"
+                                            data-name="{{ p[1]|e }}"
+                                            data-count="{{ p[4] }}"
+                                            onclick="confirmDelete(this.dataset.id, this.dataset.name, this.dataset.count)">
+                                        <i class="bi bi-trash"></i>
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    {% else %}
+                        <tr>
+                            <td colspan="6" class="text-center py-4">
+                                <i class="bi bi-inbox text-muted" style="font-size: 2rem;"></i>
+                                <p class="text-muted mt-2 mb-0">Aucun propriétaire trouvé.</p>
+                            </td>
+                        </tr>
+                    {% endif %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header bg-danger text-white">
+                <h5 class="modal-title"><i class="bi bi-exclamation-triangle"></i> Confirmer la suppression</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p>Êtes-vous sûr de vouloir supprimer le propriétaire <strong id="proprietaireName"></strong>?</p>
+                <div id="warningMessage" class="alert alert-warning d-none">
+                    <i class="bi bi-exclamation-triangle"></i> Ce propriétaire possède des bâtiments et ne peut pas être supprimé.
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
+                <form id="deleteForm" method="POST" style="display: inline;">
+                    <button type="submit" class="btn btn-danger" id="deleteBtn">
+                        <i class="bi bi-trash"></i> Supprimer
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+    function confirmDelete(id, name, count) {
+        document.getElementById('proprietaireName').textContent = name;
+        document.getElementById('deleteForm').action = `/proprietaires/delete/${id}`;
+        
+        const warningMsg = document.getElementById('warningMessage');
+        const deleteBtn = document.getElementById('deleteBtn');
+        
+        if (parseInt(count) > 0) {
+            warningMsg.classList.remove('d-none');
+            deleteBtn.disabled = true;
+        } else {
+            warningMsg.classList.add('d-none');
+            deleteBtn.disabled = false;
+        }
+        
+        new bootstrap.Modal(document.getElementById('deleteModal')).show();
+    }
+    
+    document.getElementById('type_proprio').addEventListener('change', function() {
+        document.getElementById('filterForm').submit();
+    });
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/ui-app/app/templates/proprietaires/view.html b/ui-app/app/templates/proprietaires/view.html
new file mode 100644
index 0000000..d2aa675
--- /dev/null
+++ b/ui-app/app/templates/proprietaires/view.html
@@ -0,0 +1,173 @@
+{% extends "base.html" %} {% block title %}{{ proprietaire[1] }} - Détails{%
+endblock %} {% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-person-badge"></i> {{ proprietaire[1] }}</h1>
+  <div>
+    <a
+      href="{{ url_for('proprietaires.edit_proprietaire', id=proprietaire[0]) }}"
+      class="btn btn-warning"
+    >
+      <i class="bi bi-pencil"></i> Modifier
+    </a>
+    <a
+      href="{{ url_for('proprietaires.list_proprietaires') }}"
+      class="btn btn-secondary"
+    >
+      <i class="bi bi-arrow-left"></i> Retour
+    </a>
+  </div>
+</div>
+
+<!-- Proprietaire Info Card -->
+<div class="card mb-4">
+  <div class="card-header bg-primary text-white">
+    <h5 class="mb-0">
+      <i class="bi bi-info-circle"></i> Informations du Propriétaire
+    </h5>
+  </div>
+  <div class="card-body">
+    <div class="row">
+      <div class="col-md-6">
+        <p><strong>ID:</strong> {{ proprietaire[0] }}</p>
+        <p><strong>Nom Complet:</strong> {{ proprietaire[1] }}</p>
+        <p>
+          <strong>Type:</strong>
+          {% if proprietaire[2] %}
+          <span class="badge bg-info fs-6">{{ proprietaire[2] }}</span>
+          {% else %}
+          <span class="text-muted">Non spécifié</span>
+          {% endif %}
+        </p>
+        <p>
+          <strong>Contact:</strong>
+          {% if proprietaire[3] %} {{ proprietaire[3] }} {% else %}
+          <span class="text-muted">Non spécifié</span>
+          {% endif %}
+        </p>
+      </div>
+      <div class="col-md-6">
+        <!-- Statistics -->
+        <div class="row text-center">
+          <div class="col-12 mb-3">
+            <div class="border rounded p-3 bg-light">
+              <h3 class="text-primary mb-0">{{ buildings|length }}</h3>
+              <small class="text-muted">Bâtiment(s) possédé(s)</small>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Buildings owned by this proprietaire -->
+<div class="card">
+  <div
+    class="card-header bg-info text-white d-flex justify-content-between align-items-center"
+  >
+    <h5 class="mb-0">
+      <i class="bi bi-buildings"></i> Bâtiments Possédés ({{ buildings|length
+      }})
+    </h5>
+  </div>
+  <div class="card-body">
+    {% if buildings %}
+    <div class="table-responsive">
+      <table class="table table-hover">
+        <thead>
+          <tr>
+            <th>Code</th>
+            <th>Nom</th>
+            <th>Adresse</th>
+            <th>Zone</th>
+            <th>Type</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for b in buildings %}
+          <tr>
+            <td><strong>{{ b[0] }}</strong></td>
+            <td>{{ b[1] or '-' }}</td>
+            <td>{{ b[2] or '-' }}</td>
+            <td>{{ b[3] or '-' }}</td>
+            <td>{{ b[4] or '-' }}</td>
+            <td>
+              <a
+                href="{{ url_for('buildings.view_building', id=b[0]) }}"
+                class="btn btn-sm btn-outline-primary"
+              >
+                <i class="bi bi-eye"></i>
+              </a>
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+    {% else %}
+    <p class="text-muted text-center py-4">
+      <i class="bi bi-inbox" style="font-size: 2rem"></i><br />
+      Aucun bâtiment enregistré pour ce propriétaire.
+    </p>
+    {% endif %}
+  </div>
+</div>
+
+<!-- Delete Button -->
+<div class="mt-4">
+  <button
+    type="button"
+    class="btn btn-danger"
+    data-bs-toggle="modal"
+    data-bs-target="#deleteModal"
+  >
+    <i class="bi bi-trash"></i> Supprimer ce propriétaire
+  </button>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header bg-danger text-white">
+        <h5 class="modal-title">
+          <i class="bi bi-exclamation-triangle"></i> Confirmer la suppression
+        </h5>
+        <button
+          type="button"
+          class="btn-close btn-close-white"
+          data-bs-dismiss="modal"
+        ></button>
+      </div>
+      <div class="modal-body">
+        <p>
+          Êtes-vous sûr de vouloir supprimer le propriétaire
+          <strong>{{ proprietaire[1] }}</strong>?
+        </p>
+        {% if buildings|length > 0 %}
+        <div class="alert alert-warning">
+          <i class="bi bi-exclamation-triangle"></i> Ce propriétaire possède {{
+          buildings|length }} bâtiment(s). La suppression n'est pas possible
+          tant que des bâtiments lui sont associés.
+        </div>
+        {% endif %}
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+          Annuler
+        </button>
+        <form
+          action="{{ url_for('proprietaires.delete_proprietaire', id=proprietaire[0]) }}"
+          method="POST"
+          style="display: inline"
+        >
+          <button type="submit" class="btn btn-danger" {% if buildings|length>
+            0 %}disabled{% endif %}> <i class="bi bi-trash"></i> Supprimer
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
diff --git a/ui-app/app/templates/protections/add.html b/ui-app/app/templates/protections/add.html
new file mode 100644
index 0000000..ce97174
--- /dev/null
+++ b/ui-app/app/templates/protections/add.html
@@ -0,0 +1,60 @@
+{% extends "base.html" %} {% block title %}Ajouter un Niveau de Protection{%
+endblock %} {% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-plus-circle"></i> Ajouter un Niveau de Protection</h1>
+  <a
+    href="{{ url_for('protections.list_protections') }}"
+    class="btn btn-secondary"
+  >
+    <i class="bi bi-arrow-left"></i> Retour
+  </a>
+</div>
+
+<div class="card">
+  <div class="card-body">
+    <form method="POST" action="{{ url_for('protections.add_protection') }}">
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          <label for="niveau" class="form-label">
+            Niveau de Protection <span class="text-danger">*</span>
+          </label>
+          <input
+            type="text"
+            class="form-control"
+            id="niveau"
+            name="niveau"
+            list="niveaux_list"
+            placeholder="Ex: Classé, Inscrit, Non protégé..."
+            required
+          />
+          <datalist id="niveaux_list">
+            <option value="Classé"></option>
+            <option value="Inscrit"></option>
+            <option value="Non protégé"></option>
+            <option value="En cours de classement"></option>
+            <option value="Protection locale"></option>
+            <option value="Monument historique"></option>
+            <option value="Patrimoine mondial UNESCO"></option>
+          </datalist>
+
+          <div class="form-text">
+            Niveau de protection patrimoniale du bâtiment
+          </div>
+        </div>
+      </div>
+
+      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+        <a
+          href="{{ url_for('protections.list_protections') }}"
+          class="btn btn-secondary"
+        >
+          <i class="bi bi-x-circle"></i> Annuler
+        </a>
+        <button type="submit" class="btn btn-success">
+          <i class="bi bi-check-circle"></i> Enregistrer
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+{% endblock %}
diff --git a/ui-app/app/templates/protections/edit.html b/ui-app/app/templates/protections/edit.html
new file mode 100644
index 0000000..9d64369
--- /dev/null
+++ b/ui-app/app/templates/protections/edit.html
@@ -0,0 +1,59 @@
+{% extends "base.html" %} {% block title %}Modifier le Niveau de Protection{%
+endblock %} {% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-pencil"></i> Modifier le Niveau de Protection</h1>
+  <a
+    href="{{ url_for('protections.view_protection', id=protection[0]) }}"
+    class="btn btn-secondary"
+  >
+    <i class="bi bi-arrow-left"></i> Retour
+  </a>
+</div>
+
+<div class="card">
+  <div class="card-body">
+    <form
+      method="POST"
+      action="{{ url_for('protections.edit_protection', id=protection[0]) }}"
+    >
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          <label for="niveau" class="form-label">
+            Niveau de Protection <span class="text-danger">*</span>
+          </label>
+          <input
+            type="text"
+            class="form-control"
+            id="niveau"
+            name="niveau"
+            value="{{ protection[1] }}"
+            list="niveaux_list"
+            required
+          />
+          <datalist id="niveaux_list">
+            <option value="Classé"></option>
+            <option value="Inscrit"></option>
+            <option value="Non protégé"></option>
+            <option value="En cours de classement"></option>
+            <option value="Protection locale"></option>
+            <option value="Monument historique"></option>
+            <option value="Patrimoine mondial UNESCO"></option>
+          </datalist>
+        </div>
+      </div>
+
+      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+        <a
+          href="{{ url_for('protections.view_protection', id=protection[0]) }}"
+          class="btn btn-secondary"
+        >
+          <i class="bi bi-x-circle"></i> Annuler
+        </a>
+        <button type="submit" class="btn btn-warning">
+          <i class="bi bi-check-circle"></i> Mettre à Jour
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+{% endblock %}
diff --git a/ui-app/app/templates/protections/list.html b/ui-app/app/templates/protections/list.html
new file mode 100644
index 0000000..9e48106
--- /dev/null
+++ b/ui-app/app/templates/protections/list.html
@@ -0,0 +1,186 @@
+{% extends "base.html" %} {% block title %}Niveaux de Protection{% endblock %}
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-shield-check"></i> Niveaux de Protection</h1>
+  <a href="{{ url_for('protections.add_protection') }}" class="btn btn-success">
+    <i class="bi bi-plus-circle"></i> Ajouter un Niveau
+  </a>
+</div>
+
+<!-- Search Card -->
+<div class="card mb-4">
+  <div class="card-header bg-success text-white">
+    <h5 class="mb-0"><i class="bi bi-search"></i> Recherche</h5>
+  </div>
+  <div class="card-body">
+    <form
+      method="GET"
+      action="{{ url_for('protections.list_protections') }}"
+      id="filterForm"
+    >
+      <div class="row g-3">
+        <div class="col-md-8">
+          <label for="search" class="form-label"
+            ><i class="bi bi-search"></i> Recherche</label
+          >
+          <input
+            type="text"
+            class="form-control"
+            id="search"
+            name="search"
+            placeholder="Niveau de protection..."
+            value="{{ current_search }}"
+          />
+        </div>
+
+        <div class="col-md-4 d-flex align-items-end">
+          <button type="submit" class="btn btn-success me-2">
+            <i class="bi bi-funnel"></i> Filtrer
+          </button>
+          <a
+            href="{{ url_for('protections.list_protections') }}"
+            class="btn btn-outline-secondary"
+          >
+            <i class="bi bi-x-circle"></i>
+          </a>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
+
+<!-- Results -->
+<div class="d-flex justify-content-between align-items-center mb-3">
+  <span class="text-muted">
+    <i class="bi bi-shield-check"></i> {{ protections|length }} niveau(x) de
+    protection
+  </span>
+</div>
+
+<div class="card">
+  <div class="card-body p-0">
+    <div class="table-responsive">
+      <table class="table table-hover table-striped mb-0">
+        <thead class="table-dark">
+          <tr>
+            <th>ID</th>
+            <th>Niveau de Protection</th>
+            <th>Bâtiments</th>
+            <th class="text-center">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% if protections %} {% for p in protections %}
+          <tr>
+            <td><strong>{{ p[0] }}</strong></td>
+            <td>
+              <i class="bi bi-shield-fill text-success"></i>
+              {{ p[1] }}
+            </td>
+            <td>
+              <span class="badge bg-info">{{ p[2] }} bâtiment(s)</span>
+            </td>
+            <td class="text-center">
+              <div class="btn-group btn-group-sm">
+                <a
+                  href="{{ url_for('protections.view_protection', id=p[0]) }}"
+                  class="btn btn-outline-primary"
+                  title="Voir"
+                >
+                  <i class="bi bi-eye"></i>
+                </a>
+                <a
+                  href="{{ url_for('protections.edit_protection', id=p[0]) }}"
+                  class="btn btn-outline-warning"
+                  title="Modifier"
+                >
+                  <i class="bi bi-pencil"></i>
+                </a>
+                <button
+                  type="button"
+                  class="btn btn-outline-danger"
+                  title="Supprimer"
+                  data-id="{{ p[0] }}"
+                  data-name="{{ p[1]|e }}"
+                  data-count="{{ p[2] }}"
+                  onclick="confirmDelete(this.dataset.id, this.dataset.name, this.dataset.count)"
+                >
+                  <i class="bi bi-trash"></i>
+                </button>
+              </div>
+            </td>
+          </tr>
+          {% endfor %} {% else %}
+          <tr>
+            <td colspan="4" class="text-center py-4">
+              <i class="bi bi-inbox text-muted" style="font-size: 2rem"></i>
+              <p class="text-muted mt-2 mb-0">
+                Aucun niveau de protection trouvé.
+              </p>
+            </td>
+          </tr>
+          {% endif %}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header bg-danger text-white">
+        <h5 class="modal-title">
+          <i class="bi bi-exclamation-triangle"></i> Confirmer la suppression
+        </h5>
+        <button
+          type="button"
+          class="btn-close btn-close-white"
+          data-bs-dismiss="modal"
+        ></button>
+      </div>
+      <div class="modal-body">
+        <p>
+          Êtes-vous sûr de vouloir supprimer le niveau
+          <strong id="protectionName"></strong>?
+        </p>
+        <div id="warningMessage" class="alert alert-warning d-none">
+          <i class="bi bi-exclamation-triangle"></i> Ce niveau est utilisé par
+          des bâtiments et ne peut pas être supprimé.
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+          Annuler
+        </button>
+        <form id="deleteForm" method="POST" style="display: inline">
+          <button type="submit" class="btn btn-danger" id="deleteBtn">
+            <i class="bi bi-trash"></i> Supprimer
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %} {% block extra_js %}
+<script>
+  function confirmDelete(id, name, count) {
+    document.getElementById("protectionName").textContent = name;
+    document.getElementById("deleteForm").action = `/protections/delete/${id}`;
+
+    const warningMsg = document.getElementById("warningMessage");
+    const deleteBtn = document.getElementById("deleteBtn");
+
+    if (parseInt(count) > 0) {
+      warningMsg.classList.remove("d-none");
+      deleteBtn.disabled = true;
+    } else {
+      warningMsg.classList.add("d-none");
+      deleteBtn.disabled = false;
+    }
+
+    new bootstrap.Modal(document.getElementById("deleteModal")).show();
+  }
+</script>
+{% endblock %}
diff --git a/ui-app/app/templates/protections/view.html b/ui-app/app/templates/protections/view.html
new file mode 100644
index 0000000..9bc0256
--- /dev/null
+++ b/ui-app/app/templates/protections/view.html
@@ -0,0 +1,119 @@
+{% extends "base.html" %} {% block title %}{{ protection[1] }} - Détails{%
+endblock %} {% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-shield-fill-check"></i> {{ protection[1] }}</h1>
+  <div>
+    <a
+      href="{{ url_for('protections.edit_protection', id=protection[0]) }}"
+      class="btn btn-warning"
+    >
+      <i class="bi bi-pencil"></i> Modifier
+    </a>
+    <a
+      href="{{ url_for('protections.list_protections') }}"
+      class="btn btn-secondary"
+    >
+      <i class="bi bi-arrow-left"></i> Retour
+    </a>
+  </div>
+</div>
+
+<!-- Protection Info Card -->
+<div class="card mb-4">
+  <div class="card-header bg-success text-white">
+    <h5 class="mb-0"><i class="bi bi-info-circle"></i> Informations</h5>
+  </div>
+  <div class="card-body">
+    <div class="row">
+      <div class="col-md-6">
+        <p><strong>ID:</strong> {{ protection[0] }}</p>
+        <p>
+          <strong>Niveau:</strong>
+          <span class="badge bg-success fs-6">{{ protection[1] }}</span>
+        </p>
+      </div>
+      <div class="col-md-6">
+        <div class="border rounded p-3 text-center">
+          <h3 class="text-primary mb-0">{{ buildings|length }}</h3>
+          <small class="text-muted">Bâtiment(s) avec ce niveau</small>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Buildings with this protection level -->
+<div class="card">
+  <div
+    class="card-header bg-info text-white d-flex justify-content-between align-items-center"
+  >
+    <h5 class="mb-0">
+      <i class="bi bi-buildings"></i> Bâtiments ({{ buildings|length }})
+    </h5>
+    <a
+      href="{{ url_for('buildings.add_building') }}"
+      class="btn btn-sm btn-light"
+    >
+      <i class="bi bi-plus"></i> Ajouter un Bâtiment
+    </a>
+  </div>
+  <div class="card-body">
+    {% if buildings %}
+    <div class="table-responsive">
+      <table class="table table-hover">
+        <thead>
+          <tr>
+            <th>Code</th>
+            <th>Nom</th>
+            <th>Adresse</th>
+            <th>Zone</th>
+            <th>Type</th>
+            <th>État</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for b in buildings %}
+          <tr>
+            <td><strong>{{ b[0] }}</strong></td>
+            <td>{{ b[1] }}</td>
+            <td>{{ b[2] or '-' }}</td>
+            <td>{{ b[3] or '-' }}</td>
+            <td>{{ b[4] or '-' }}</td>
+            <td>
+              {% if b[5] == 'Bon' %}
+              <span class="badge bg-success">{{ b[5] }}</span>
+              {% elif b[5] == 'Moyen' %}
+              <span class="badge bg-warning text-dark">{{ b[5] }}</span>
+              {% elif b[5] == 'Dégradé' %}
+              <span class="badge" style="background-color: #e67e22"
+                >{{ b[5] }}</span
+              >
+              {% elif b[5] == 'En ruine' %}
+              <span class="badge bg-danger">{{ b[5] }}</span>
+              {% else %}
+              <span class="badge bg-secondary">Non inspecté</span>
+              {% endif %}
+            </td>
+            <td>
+              <a
+                href="{{ url_for('buildings.view_building', id=b[0]) }}"
+                class="btn btn-sm btn-outline-primary"
+              >
+                <i class="bi bi-eye"></i>
+              </a>
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+    {% else %}
+    <p class="text-muted text-center py-4">
+      <i class="bi bi-inbox" style="font-size: 2rem"></i><br />
+      Aucun bâtiment avec ce niveau de protection.
+    </p>
+    {% endif %}
+  </div>
+</div>
+{% endblock %}
diff --git a/ui-app/app/templates/types/add.html b/ui-app/app/templates/types/add.html
new file mode 100644
index 0000000..8d09d24
--- /dev/null
+++ b/ui-app/app/templates/types/add.html
@@ -0,0 +1,59 @@
+{% extends "base.html" %} {% block title %}Ajouter un Type de Bâtiment{%
+endblock %} {% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-plus-circle"></i> Ajouter un Type de Bâtiment</h1>
+  <a href="{{ url_for('types.list_types') }}" class="btn btn-secondary">
+    <i class="bi bi-arrow-left"></i> Retour
+  </a>
+</div>
+
+<div class="card">
+  <div class="card-body">
+    <form method="POST" action="{{ url_for('types.add_type') }}">
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          <label for="libelle_type" class="form-label">
+            Type de Bâtiment <span class="text-danger">*</span>
+          </label>
+          <input
+            type="text"
+            class="form-control"
+            id="libelle_type"
+            name="libelle_type"
+            list="types_list"
+            placeholder="Ex: Religieux, Civil, Militaire..."
+            required
+          />
+          <datalist id="types_list">
+            <option value="Religieux"></option>
+            <option value="Civil"></option>
+            <option value="Militaire"></option>
+            <option value="Commercial"></option>
+            <option value="Résidentiel"></option>
+            <option value="Administratif"></option>
+            <option value="Éducatif"></option>
+            <option value="Industriel"></option>
+            <option value="Culturel"></option>
+            <option value="Hospitalier"></option>
+            <option value="Funéraire"></option>
+            <option value="Agricole"></option>
+          </datalist>
+
+          <div class="form-text">
+            Catégorie ou type architectural du bâtiment
+          </div>
+        </div>
+      </div>
+
+      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+        <a href="{{ url_for('types.list_types') }}" class="btn btn-secondary">
+          <i class="bi bi-x-circle"></i> Annuler
+        </a>
+        <button type="submit" class="btn btn-primary">
+          <i class="bi bi-check-circle"></i> Enregistrer
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+{% endblock %}
diff --git a/ui-app/app/templates/types/edit.html b/ui-app/app/templates/types/edit.html
new file mode 100644
index 0000000..2403bb5
--- /dev/null
+++ b/ui-app/app/templates/types/edit.html
@@ -0,0 +1,64 @@
+{% extends "base.html" %} {% block title %}Modifier le Type de Bâtiment{%
+endblock %} {% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-pencil"></i> Modifier le Type de Bâtiment</h1>
+  <a
+    href="{{ url_for('types.view_type', id=type_bat[0]) }}"
+    class="btn btn-secondary"
+  >
+    <i class="bi bi-arrow-left"></i> Retour
+  </a>
+</div>
+
+<div class="card">
+  <div class="card-body">
+    <form
+      method="POST"
+      action="{{ url_for('types.edit_type', id=type_bat[0]) }}"
+    >
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          <label for="libelle_type" class="form-label">
+            Type de Bâtiment <span class="text-danger">*</span>
+          </label>
+          <input
+            type="text"
+            class="form-control"
+            id="libelle_type"
+            name="libelle_type"
+            value="{{ type_bat[1] }}"
+            list="types_list"
+            required
+          />
+          <datalist id="types_list">
+            <option value="Religieux"></option>
+            <option value="Civil"></option>
+            <option value="Militaire"></option>
+            <option value="Commercial"></option>
+            <option value="Résidentiel"></option>
+            <option value="Administratif"></option>
+            <option value="Éducatif"></option>
+            <option value="Industriel"></option>
+            <option value="Culturel"></option>
+            <option value="Hospitalier"></option>
+            <option value="Funéraire"></option>
+            <option value="Agricole"></option>
+          </datalist>
+        </div>
+      </div>
+
+      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+        <a
+          href="{{ url_for('types.view_type', id=type_bat[0]) }}"
+          class="btn btn-secondary"
+        >
+          <i class="bi bi-x-circle"></i> Annuler
+        </a>
+        <button type="submit" class="btn btn-warning">
+          <i class="bi bi-check-circle"></i> Mettre à Jour
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+{% endblock %}
diff --git a/ui-app/app/templates/types/list.html b/ui-app/app/templates/types/list.html
new file mode 100644
index 0000000..d4245aa
--- /dev/null
+++ b/ui-app/app/templates/types/list.html
@@ -0,0 +1,183 @@
+{% extends "base.html" %} {% block title %}Types de Bâtiments{% endblock %} {%
+block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-house-door"></i> Types de Bâtiments</h1>
+  <a href="{{ url_for('types.add_type') }}" class="btn btn-primary">
+    <i class="bi bi-plus-circle"></i> Ajouter un Type
+  </a>
+</div>
+
+<!-- Search Card -->
+<div class="card mb-4">
+  <div class="card-header bg-primary text-white">
+    <h5 class="mb-0"><i class="bi bi-search"></i> Recherche</h5>
+  </div>
+  <div class="card-body">
+    <form
+      method="GET"
+      action="{{ url_for('types.list_types') }}"
+      id="filterForm"
+    >
+      <div class="row g-3">
+        <div class="col-md-8">
+          <label for="search" class="form-label"
+            ><i class="bi bi-search"></i> Recherche</label
+          >
+          <input
+            type="text"
+            class="form-control"
+            id="search"
+            name="search"
+            placeholder="Type de bâtiment..."
+            value="{{ current_search }}"
+          />
+        </div>
+
+        <div class="col-md-4 d-flex align-items-end">
+          <button type="submit" class="btn btn-primary me-2">
+            <i class="bi bi-funnel"></i> Filtrer
+          </button>
+          <a
+            href="{{ url_for('types.list_types') }}"
+            class="btn btn-outline-secondary"
+          >
+            <i class="bi bi-x-circle"></i>
+          </a>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
+
+<!-- Results -->
+<div class="d-flex justify-content-between align-items-center mb-3">
+  <span class="text-muted">
+    <i class="bi bi-house-door"></i> {{ types|length }} type(s) de bâtiment
+  </span>
+</div>
+
+<div class="card">
+  <div class="card-body p-0">
+    <div class="table-responsive">
+      <table class="table table-hover table-striped mb-0">
+        <thead class="table-dark">
+          <tr>
+            <th>ID</th>
+            <th>Type de Bâtiment</th>
+            <th>Bâtiments</th>
+            <th class="text-center">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% if types %} {% for t in types %}
+          <tr>
+            <td><strong>{{ t[0] }}</strong></td>
+            <td>
+              <i class="bi bi-house-door-fill text-primary"></i>
+              {{ t[1] }}
+            </td>
+            <td>
+              <span class="badge bg-info">{{ t[2] }} bâtiment(s)</span>
+            </td>
+            <td class="text-center">
+              <div class="btn-group btn-group-sm">
+                <a
+                  href="{{ url_for('types.view_type', id=t[0]) }}"
+                  class="btn btn-outline-primary"
+                  title="Voir"
+                >
+                  <i class="bi bi-eye"></i>
+                </a>
+                <a
+                  href="{{ url_for('types.edit_type', id=t[0]) }}"
+                  class="btn btn-outline-warning"
+                  title="Modifier"
+                >
+                  <i class="bi bi-pencil"></i>
+                </a>
+                <button
+                  type="button"
+                  class="btn btn-outline-danger"
+                  title="Supprimer"
+                  data-id="{{ t[0] }}"
+                  data-name="{{ t[1]|e }}"
+                  data-count="{{ t[2] }}"
+                  onclick="confirmDelete(this.dataset.id, this.dataset.name, this.dataset.count)"
+                >
+                  <i class="bi bi-trash"></i>
+                </button>
+              </div>
+            </td>
+          </tr>
+          {% endfor %} {% else %}
+          <tr>
+            <td colspan="4" class="text-center py-4">
+              <i class="bi bi-inbox text-muted" style="font-size: 2rem"></i>
+              <p class="text-muted mt-2 mb-0">Aucun type de bâtiment trouvé.</p>
+            </td>
+          </tr>
+          {% endif %}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header bg-danger text-white">
+        <h5 class="modal-title">
+          <i class="bi bi-exclamation-triangle"></i> Confirmer la suppression
+        </h5>
+        <button
+          type="button"
+          class="btn-close btn-close-white"
+          data-bs-dismiss="modal"
+        ></button>
+      </div>
+      <div class="modal-body">
+        <p>
+          Êtes-vous sûr de vouloir supprimer le type
+          <strong id="typeName"></strong>?
+        </p>
+        <div id="warningMessage" class="alert alert-warning d-none">
+          <i class="bi bi-exclamation-triangle"></i> Ce type est utilisé par des
+          bâtiments et ne peut pas être supprimé.
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+          Annuler
+        </button>
+        <form id="deleteForm" method="POST" style="display: inline">
+          <button type="submit" class="btn btn-danger" id="deleteBtn">
+            <i class="bi bi-trash"></i> Supprimer
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %} {% block extra_js %}
+<script>
+  function confirmDelete(id, name, count) {
+    document.getElementById("typeName").textContent = name;
+    document.getElementById("deleteForm").action = `/types/delete/${id}`;
+
+    const warningMsg = document.getElementById("warningMessage");
+    const deleteBtn = document.getElementById("deleteBtn");
+
+    if (parseInt(count) > 0) {
+      warningMsg.classList.remove("d-none");
+      deleteBtn.disabled = true;
+    } else {
+      warningMsg.classList.add("d-none");
+      deleteBtn.disabled = false;
+    }
+
+    new bootstrap.Modal(document.getElementById("deleteModal")).show();
+  }
+</script>
+{% endblock %}
diff --git a/ui-app/app/templates/types/view.html b/ui-app/app/templates/types/view.html
new file mode 100644
index 0000000..cc9b589
--- /dev/null
+++ b/ui-app/app/templates/types/view.html
@@ -0,0 +1,198 @@
+{% extends "base.html" %} {% block title %}{{ type_bat[1] }} - Détails{%
+endblock %} {% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-house-door-fill"></i> {{ type_bat[1] }}</h1>
+  <div>
+    <a
+      href="{{ url_for('types.edit_type', id=type_bat[0]) }}"
+      class="btn btn-warning"
+    >
+      <i class="bi bi-pencil"></i> Modifier
+    </a>
+    <a href="{{ url_for('types.list_types') }}" class="btn btn-secondary">
+      <i class="bi bi-arrow-left"></i> Retour
+    </a>
+  </div>
+</div>
+
+<!-- Type Info Card -->
+<div class="card mb-4">
+  <div class="card-header bg-primary text-white">
+    <h5 class="mb-0"><i class="bi bi-info-circle"></i> Informations du Type</h5>
+  </div>
+  <div class="card-body">
+    <div class="row">
+      <div class="col-md-6">
+        <p><strong>ID:</strong> {{ type_bat[0] }}</p>
+        <p>
+          <strong>Type:</strong>
+          <span class="badge bg-primary fs-6">{{ type_bat[1] }}</span>
+        </p>
+      </div>
+      <div class="col-md-6">
+        <!-- Statistics -->
+        <div class="row text-center">
+          <div class="col-6 col-md-3 mb-3">
+            <div class="border rounded p-3">
+              <h3 class="text-primary mb-0">{{ stats[0] }}</h3>
+              <small class="text-muted">Total</small>
+            </div>
+          </div>
+          <div class="col-6 col-md-3 mb-3">
+            <div class="border rounded p-3">
+              <h3 class="text-success mb-0">{{ stats[1] }}</h3>
+              <small class="text-muted">Bon</small>
+            </div>
+          </div>
+          <div class="col-6 col-md-3 mb-3">
+            <div class="border rounded p-3">
+              <h3 class="text-warning mb-0">{{ stats[2] }}</h3>
+              <small class="text-muted">Moyen</small>
+            </div>
+          </div>
+          <div class="col-6 col-md-3 mb-3">
+            <div class="border rounded p-3">
+              <h3 class="text-danger mb-0">{{ stats[3] }}</h3>
+              <small class="text-muted">Urgent</small>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Buildings with this type -->
+<div class="card">
+  <div
+    class="card-header bg-info text-white d-flex justify-content-between align-items-center"
+  >
+    <h5 class="mb-0">
+      <i class="bi bi-buildings"></i> Bâtiments de ce Type ({{ buildings|length
+      }})
+    </h5>
+    <a
+      href="{{ url_for('buildings.add_building') }}"
+      class="btn btn-sm btn-light"
+    >
+      <i class="bi bi-plus"></i> Ajouter un Bâtiment
+    </a>
+  </div>
+  <div class="card-body">
+    {% if buildings %}
+    <div class="table-responsive">
+      <table class="table table-hover">
+        <thead>
+          <tr>
+            <th>Code</th>
+            <th>Nom</th>
+            <th>Adresse</th>
+            <th>Zone</th>
+            <th>Protection</th>
+            <th>État</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for b in buildings %}
+          <tr>
+            <td><strong>{{ b[0] }}</strong></td>
+            <td>{{ b[1] }}</td>
+            <td>{{ b[2] or '-' }}</td>
+            <td>{{ b[3] or '-' }}</td>
+            <td>
+              {% if b[4] %}
+              <span class="badge bg-info">{{ b[4] }}</span>
+              {% else %}
+              <span class="text-muted">-</span>
+              {% endif %}
+            </td>
+            <td>
+              {% if b[5] == 'Bon' %}
+              <span class="badge bg-success">{{ b[5] }}</span>
+              {% elif b[5] == 'Moyen' %}
+              <span class="badge bg-warning text-dark">{{ b[5] }}</span>
+              {% elif b[5] == 'Dégradé' %}
+              <span class="badge" style="background-color: #e67e22"
+                >{{ b[5] }}</span
+              >
+              {% elif b[5] == 'En ruine' %}
+              <span class="badge bg-danger">{{ b[5] }}</span>
+              {% else %}
+              <span class="badge bg-secondary">Non inspecté</span>
+              {% endif %}
+            </td>
+            <td>
+              <a
+                href="{{ url_for('buildings.view_building', id=b[0]) }}"
+                class="btn btn-sm btn-outline-primary"
+              >
+                <i class="bi bi-eye"></i>
+              </a>
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+    {% else %}
+    <p class="text-muted text-center py-4">
+      <i class="bi bi-inbox" style="font-size: 2rem"></i><br />
+      Aucun bâtiment enregistré avec ce type.
+    </p>
+    {% endif %}
+  </div>
+</div>
+
+<!-- Delete Button -->
+<div class="mt-4">
+  <button type="button" class="btn btn-danger" {% if buildings|length>
+    0 %}disabled{% endif %} data-bs-toggle="modal"
+    data-bs-target="#deleteModal"> <i class="bi bi-trash"></i> Supprimer ce type
+  </button>
+  {% if buildings|length > 0 %}
+  <small class="text-muted ms-2">
+    <i class="bi bi-info-circle"></i> Ce type ne peut pas être supprimé car il
+    est utilisé par des bâtiments.
+  </small>
+  {% endif %}
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header bg-danger text-white">
+        <h5 class="modal-title">
+          <i class="bi bi-exclamation-triangle"></i> Confirmer la suppression
+        </h5>
+        <button
+          type="button"
+          class="btn-close btn-close-white"
+          data-bs-dismiss="modal"
+        ></button>
+      </div>
+      <div class="modal-body">
+        <p>
+          Êtes-vous sûr de vouloir supprimer le type
+          <strong>{{ type_bat[1] }}</strong>?
+        </p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+          Annuler
+        </button>
+        <form
+          action="{{ url_for('types.delete_type', id=type_bat[0]) }}"
+          method="POST"
+          style="display: inline"
+        >
+          <button type="submit" class="btn btn-danger">
+            <i class="bi bi-trash"></i> Supprimer
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
diff --git a/ui-app/app/templates/zones/add.html b/ui-app/app/templates/zones/add.html
new file mode 100644
index 0000000..ae62732
--- /dev/null
+++ b/ui-app/app/templates/zones/add.html
@@ -0,0 +1,68 @@
+{% extends "base.html" %} {% block title %}Ajouter une Zone{% endblock %} {%
+block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-plus-circle"></i> Ajouter une Zone Urbaine</h1>
+  <a href="{{ url_for('zones.list_zones') }}" class="btn btn-secondary">
+    <i class="bi bi-arrow-left"></i> Retour
+  </a>
+</div>
+
+<div class="card">
+  <div class="card-body">
+    <form method="POST" action="{{ url_for('zones.add_zone') }}">
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          <label for="nom_zone" class="form-label">
+            Nom de la Zone <span class="text-danger">*</span>
+          </label>
+          <input
+            type="text"
+            class="form-control"
+            id="nom_zone"
+            name="nom_zone"
+            placeholder="Ex: Médina, Quartier Industriel..."
+            required
+          />
+          <div class="form-text">Nom unique identifiant cette zone urbaine</div>
+        </div>
+
+        <div class="col-md-6 mb-3">
+          <label for="type_zone" class="form-label">Type de Zone</label>
+          <input
+            type="text"
+            class="form-control"
+            id="type_zone"
+            name="type_zone"
+            list="types_list"
+            placeholder="Ex: Quartier, Secteur, Arrondissement..."
+          />
+          <datalist id="types_list">
+            {% for type in existing_types %}
+            <option value="{{ type }}"></option>
+            {% endfor %}
+            <option value="Quartier"></option>
+            <option value="Secteur"></option>
+            <option value="Arrondissement"></option>
+            <option value="Zone Historique"></option>
+            <option value="Zone Industrielle"></option>
+            <option value="Zone Résidentielle"></option>
+            <option value="Centre-Ville"></option>
+            <option value="Périphérie"></option>
+          </datalist>
+
+          <div class="form-text">Catégorie ou type de cette zone</div>
+        </div>
+      </div>
+
+      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+        <a href="{{ url_for('zones.list_zones') }}" class="btn btn-secondary">
+          <i class="bi bi-x-circle"></i> Annuler
+        </a>
+        <button type="submit" class="btn btn-primary">
+          <i class="bi bi-check-circle"></i> Enregistrer
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+{% endblock %}
diff --git a/ui-app/app/templates/zones/edit.html b/ui-app/app/templates/zones/edit.html
new file mode 100644
index 0000000..6367153
--- /dev/null
+++ b/ui-app/app/templates/zones/edit.html
@@ -0,0 +1,72 @@
+{% extends "base.html" %} {% block title %}Modifier la Zone{% endblock %} {%
+block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-pencil"></i> Modifier la Zone</h1>
+  <a
+    href="{{ url_for('zones.view_zone', id=zone[0]) }}"
+    class="btn btn-secondary"
+  >
+    <i class="bi bi-arrow-left"></i> Retour
+  </a>
+</div>
+
+<div class="card">
+  <div class="card-body">
+    <form method="POST" action="{{ url_for('zones.edit_zone', id=zone[0]) }}">
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          <label for="nom_zone" class="form-label">
+            Nom de la Zone <span class="text-danger">*</span>
+          </label>
+          <input
+            type="text"
+            class="form-control"
+            id="nom_zone"
+            name="nom_zone"
+            value="{{ zone[1] }}"
+            required
+          />
+        </div>
+
+        <div class="col-md-6 mb-3">
+          <label for="type_zone" class="form-label">Type de Zone</label>
+          <input
+            type="text"
+            class="form-control"
+            id="type_zone"
+            name="type_zone"
+            list="types_list"
+            value="{{ zone[2] or '' }}"
+            placeholder="Ex: Quartier, Secteur..."
+          />
+          <datalist id="types_list">
+            {% for type in existing_types %}
+            <option value="{{ type }}"></option>
+            {% endfor %}
+            <option value="Quartier"></option>
+            <option value="Secteur"></option>
+            <option value="Arrondissement"></option>
+            <option value="Zone Historique"></option>
+            <option value="Zone Industrielle"></option>
+            <option value="Zone Résidentielle"></option>
+            <option value="Centre-Ville"></option>
+            <option value="Périphérie"></option>
+          </datalist>
+        </div>
+      </div>
+
+      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+        <a
+          href="{{ url_for('zones.view_zone', id=zone[0]) }}"
+          class="btn btn-secondary"
+        >
+          <i class="bi bi-x-circle"></i> Annuler
+        </a>
+        <button type="submit" class="btn btn-warning">
+          <i class="bi bi-check-circle"></i> Mettre à Jour
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+{% endblock %}
diff --git a/ui-app/app/templates/zones/list.html b/ui-app/app/templates/zones/list.html
new file mode 100644
index 0000000..8e28be2
--- /dev/null
+++ b/ui-app/app/templates/zones/list.html
@@ -0,0 +1,178 @@
+{% extends "base.html" %}
+
+{% block title %}Liste des Zones Urbaines{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h1><i class="bi bi-geo-alt"></i> Liste des Zones Urbaines</h1>
+    <a href="{{ url_for('zones.add_zone') }}" class="btn btn-primary">
+        <i class="bi bi-plus-circle"></i> Ajouter une Zone
+    </a>
+</div>
+
+<!-- Search and Filter Card -->
+<div class="card mb-4">
+    <div class="card-header bg-primary text-white">
+        <h5 class="mb-0"><i class="bi bi-search"></i> Recherche et Filtres</h5>
+    </div>
+    <div class="card-body">
+        <form method="GET" action="{{ url_for('zones.list_zones') }}" id="filterForm">
+            <div class="row g-3">
+                <div class="col-md-5">
+                    <label for="search" class="form-label"><i class="bi bi-search"></i> Recherche</label>
+                    <input type="text" class="form-control" id="search" name="search" 
+                           placeholder="Nom de la zone..." value="{{ current_search }}">
+                </div>
+                
+                <div class="col-md-4">
+                    <label for="type_zone" class="form-label"><i class="bi bi-tag"></i> Type de Zone</label>
+                    <select class="form-select" id="type_zone" name="type_zone">
+                        <option value="">Tous les types</option>
+                        {% for t in types %}
+                        <option value="{{ t[0] }}" {% if current_type == t[0] %}selected{% endif %}>
+                            {{ t[0] }}
+                        </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="col-md-3 d-flex align-items-end">
+                    <button type="submit" class="btn btn-primary me-2">
+                        <i class="bi bi-funnel"></i> Filtrer
+                    </button>
+                    <a href="{{ url_for('zones.list_zones') }}" class="btn btn-outline-secondary">
+                        <i class="bi bi-x-circle"></i>
+                    </a>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- Results -->
+<div class="d-flex justify-content-between align-items-center mb-3">
+    <span class="text-muted">
+        <i class="bi bi-geo-alt"></i> {{ zones|length }} zone(s) trouvée(s)
+    </span>
+</div>
+
+<div class="card">
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table class="table table-hover table-striped mb-0">
+                <thead class="table-dark">
+                    <tr>
+                        <th>ID</th>
+                        <th>Nom de la Zone</th>
+                        <th>Type</th>
+                        <th>Bâtiments</th>
+                        <th class="text-center">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% if zones %}
+                        {% for z in zones %}
+                        <tr>
+                            <td><strong>{{ z[0] }}</strong></td>
+                            <td>
+                                <i class="bi bi-geo-alt-fill text-primary"></i>
+                                {{ z[1] }}
+                            </td>
+                            <td>
+                                {% if z[2] %}
+                                <span class="badge bg-secondary">{{ z[2] }}</span>
+                                {% else %}
+                                <span class="text-muted">-</span>
+                                {% endif %}
+                            </td>
+                            <td>
+                                <span class="badge bg-info">{{ z[3] }} bâtiment(s)</span>
+                            </td>
+                            <td class="text-center">
+                                <div class="btn-group btn-group-sm">
+                                    <a href="{{ url_for('zones.view_zone', id=z[0]) }}" 
+                                       class="btn btn-outline-primary" title="Voir">
+                                        <i class="bi bi-eye"></i>
+                                    </a>
+                                    <a href="{{ url_for('zones.edit_zone', id=z[0]) }}" 
+                                       class="btn btn-outline-warning" title="Modifier">
+                                        <i class="bi bi-pencil"></i>
+                                    </a>
+                                    <button type="button" class="btn btn-outline-danger" 
+                                            title="Supprimer"
+                                            data-id="{{ z[0] }}"
+                                            data-name="{{ z[1]|e }}"
+                                            data-count="{{ z[3] }}"
+                                            onclick="confirmDelete(this.dataset.id, this.dataset.name, this.dataset.count)">
+                                        <i class="bi bi-trash"></i>
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    {% else %}
+                        <tr>
+                            <td colspan="5" class="text-center py-4">
+                                <i class="bi bi-inbox text-muted" style="font-size: 2rem;"></i>
+                                <p class="text-muted mt-2 mb-0">Aucune zone trouvée.</p>
+                            </td>
+                        </tr>
+                    {% endif %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header bg-danger text-white">
+                <h5 class="modal-title"><i class="bi bi-exclamation-triangle"></i> Confirmer la suppression</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p>Êtes-vous sûr de vouloir supprimer la zone <strong id="zoneName"></strong>?</p>
+                <div id="warningMessage" class="alert alert-warning d-none">
+                    <i class="bi bi-exclamation-triangle"></i> Cette zone contient des bâtiments et ne peut pas être supprimée.
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
+                <form id="deleteForm" method="POST" style="display: inline;">
+                    <button type="submit" class="btn btn-danger" id="deleteBtn">
+                        <i class="bi bi-trash"></i> Supprimer
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+    function confirmDelete(id, name, count) {
+        document.getElementById('zoneName').textContent = name;
+        document.getElementById('deleteForm').action = `/zones/delete/${id}`;
+        
+        const warningMsg = document.getElementById('warningMessage');
+        const deleteBtn = document.getElementById('deleteBtn');
+        
+        if (parseInt(count) > 0) {
+            warningMsg.classList.remove('d-none');
+            deleteBtn.disabled = true;
+        } else {
+            warningMsg.classList.add('d-none');
+            deleteBtn.disabled = false;
+        }
+        
+        new bootstrap.Modal(document.getElementById('deleteModal')).show();
+    }
+    
+    document.getElementById('type_zone').addEventListener('change', function() {
+        document.getElementById('filterForm').submit();
+    });
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/ui-app/app/templates/zones/view.html b/ui-app/app/templates/zones/view.html
new file mode 100644
index 0000000..37f4fdb
--- /dev/null
+++ b/ui-app/app/templates/zones/view.html
@@ -0,0 +1,153 @@
+{% extends "base.html" %} {% block title %}{{ zone[1] }} - Détails{% endblock %}
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <h1><i class="bi bi-geo-alt-fill"></i> {{ zone[1] }}</h1>
+  <div>
+    <a
+      href="{{ url_for('zones.edit_zone', id=zone[0]) }}"
+      class="btn btn-warning"
+    >
+      <i class="bi bi-pencil"></i> Modifier
+    </a>
+    <a href="{{ url_for('zones.list_zones') }}" class="btn btn-secondary">
+      <i class="bi bi-arrow-left"></i> Retour
+    </a>
+  </div>
+</div>
+
+<!-- Zone Info Card -->
+<div class="card mb-4">
+  <div class="card-header bg-primary text-white">
+    <h5 class="mb-0">
+      <i class="bi bi-info-circle"></i> Informations de la Zone
+    </h5>
+  </div>
+  <div class="card-body">
+    <div class="row">
+      <div class="col-md-6">
+        <p><strong>ID:</strong> {{ zone[0] }}</p>
+        <p><strong>Nom de la Zone:</strong> {{ zone[1] }}</p>
+        <p>
+          <strong>Type:</strong>
+          {% if zone[2] %}
+          <span class="badge bg-secondary fs-6">{{ zone[2] }}</span>
+          {% else %}
+          <span class="text-muted">Non spécifié</span>
+          {% endif %}
+        </p>
+      </div>
+      <div class="col-md-6">
+        <!-- Statistics -->
+        <div class="row text-center">
+          <div class="col-6 col-md-3 mb-3">
+            <div class="border rounded p-3">
+              <h3 class="text-primary mb-0">{{ stats[0] }}</h3>
+              <small class="text-muted">Total</small>
+            </div>
+          </div>
+          <div class="col-6 col-md-3 mb-3">
+            <div class="border rounded p-3">
+              <h3 class="text-success mb-0">{{ stats[1] }}</h3>
+              <small class="text-muted">Bon</small>
+            </div>
+          </div>
+          <div class="col-6 col-md-3 mb-3">
+            <div class="border rounded p-3">
+              <h3 class="text-warning mb-0">{{ stats[2] }}</h3>
+              <small class="text-muted">Moyen</small>
+            </div>
+          </div>
+          <div class="col-6 col-md-3 mb-3">
+            <div class="border rounded p-3">
+              <h3 class="text-danger mb-0">{{ stats[3] }}</h3>
+              <small class="text-muted">Urgent</small>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Buildings in this zone -->
+<div class="card">
+  <div
+    class="card-header bg-info text-white d-flex justify-content-between align-items-center"
+  >
+    <h5 class="mb-0">
+      <i class="bi bi-buildings"></i> Bâtiments dans cette Zone ({{
+      buildings|length }})
+    </h5>
+    <a
+      href="{{ url_for('buildings.add_building') }}"
+      class="btn btn-sm btn-light"
+    >
+      <i class="bi bi-plus"></i> Ajouter un Bâtiment
+    </a>
+  </div>
+  <div class="card-body">
+    {% if buildings %}
+    <div class="table-responsive">
+      <table class="table table-hover">
+        <thead>
+          <tr>
+            <th>Code</th>
+            <th>Nom</th>
+            <th>Adresse</th>
+            <th>Type</th>
+            <th>Protection</th>
+            <th>État</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for b in buildings %}
+          <tr>
+            <td><strong>{{ b[0] }}</strong></td>
+            <td>{{ b[1] }}</td>
+            <td>{{ b[2] or '-' }}</td>
+            <td>{{ b[3] or '-' }}</td>
+            <td>
+              {% if b[4] %}
+              <span class="badge bg-info">{{ b[4] }}</span>
+              {% else %}
+              <span class="text-muted">-</span>
+              {% endif %}
+            </td>
+            <td>
+              {% if b[5] == 'Bon' %}
+              <span class="badge bg-success">{{ b[5] }}</span>
+              {% elif b[5] == 'Moyen' %}
+              <span class="badge bg-warning text-dark">{{ b[5] }}</span>
+              {% elif b[5] == 'Dégradé' %}
+              <span class="badge" style="background-color: #e67e22"
+                >{{ b[5] }}</span
+              >
+              {% elif b[5] == 'En ruine' %}
+              <span class="badge bg-danger">{{ b[5] }}</span>
+              {% else %}
+              <span class="badge bg-secondary">Non inspecté</span>
+              {% endif %}
+            </td>
+            <td>
+              <a
+                href="{{ url_for('buildings.view_building', id=b[0]) }}"
+                class="btn btn-sm btn-outline-primary"
+              >
+                <i class="bi bi-eye"></i>
+              </a>
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+    {% else %}
+    <p class="text-muted text-center py-4">
+      <i class="bi bi-inbox" style="font-size: 2rem"></i><br />
+      Aucun bâtiment enregistré dans cette zone.
+    </p>
+    {% endif %}
+  </div>
+</div>
+{% endblock %}
diff --git a/ui-app/config.py b/ui-app/config.py
new file mode 100644
index 0000000..49657c1
--- /dev/null
+++ b/ui-app/config.py
@@ -0,0 +1,11 @@
+import os
+
+class Config:
+    # SECRET_KEY fallback
+    SECRET_KEY = os.environ.get('SECRET_KEY', 'fallback-secret')
+
+    # Database URL from environment or default local value
+    DATABASE_URL = os.environ.get(
+        'DATABASE_URL',
+        "postgresql://postgres:password@127.0.0.1:5432/my_local_db"
+    )
diff --git a/ui-app/requirements.txt b/ui-app/requirements.txt
new file mode 100644
index 0000000..2f035ea
Binary files /dev/null and b/ui-app/requirements.txt differ
diff --git a/ui-app/run.py b/ui-app/run.py
new file mode 100644
index 0000000..b4bfb25
--- /dev/null
+++ b/ui-app/run.py
@@ -0,0 +1,12 @@
+import os
+from dotenv import load_dotenv
+from app import create_app
+
+load_dotenv()  # load local .env
+
+app = create_app()
+
+if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 5000))
+    app.run(host='0.0.0.0', port=port, debug=True)
+
diff --git a/ui-app/screenshots/buildings.png b/ui-app/screenshots/buildings.png
new file mode 100644
index 0000000..87dbfc9
Binary files /dev/null and b/ui-app/screenshots/buildings.png differ
diff --git a/ui-app/screenshots/dashboard.png b/ui-app/screenshots/dashboard.png
new file mode 100644
index 0000000..87dbfc9
Binary files /dev/null and b/ui-app/screenshots/dashboard.png differ
diff --git a/ui-app/screenshots/inspections.png b/ui-app/screenshots/inspections.png
new file mode 100644
index 0000000..b544fc4
Binary files /dev/null and b/ui-app/screenshots/inspections.png differ
diff --git a/ui-app/screenshots/map.png b/ui-app/screenshots/map.png
new file mode 100644
index 0000000..d4c4338
Binary files /dev/null and b/ui-app/screenshots/map.png differ

Code	Nom du Bâtiment	Adresse	Zone	Type	Protection	État	Coordonnées	Actions
{{ b[0] }}	{{ b[1] }}	{{ b[2] or '-' }}	+ {% if b[3] %} + {{ b[3] }} + {% else %} + - + {% endif %} +	{{ b[4] or '-' }}	+ {% if b[5] %} + {{ b[5] }} + {% else %} + - + {% endif %} +	+ {% if b[9] %} + {% if b[9] == 'Bon' %} + {{ b[9] }} + {% elif b[9] == 'Moyen' %} + {{ b[9] }} + {% elif b[9] == 'Dégradé' %} + {{ b[9] }} + {% elif b[9] == 'En ruine' %} + {{ b[9] }} + {% else %} + {{ b[9] }} + {% endif %} + {% else %} + Non inspecté + {% endif %} +	+ {% if b[7] and b[8] %} + Oui + {% else %} + Non + {% endif %} +	+ + + + + + + + + +
+ + + {% if current_search or current_zone or current_type or current_protection or current_etat %} + Aucun bâtiment ne correspond à vos critères de recherche. + Réinitialiser les filtres + {% else %} + Aucun bâtiment enregistré. + Ajouter le premier bâtiment + {% endif %} + +
ID	Date	Bâtiment	État Constaté	Rapport	Actions
{{ i[0] }}	{{ i[1].strftime('%d/%m/%Y') if i[1] else 'N/A' }}	+ + {{ i[5] }} + +	+ {% if i[2] == 'Bon' %} + {{ i[2] }} + {% elif i[2] == 'Moyen' %} + {{ i[2] }} + {% elif i[2] == 'Dégradé' %} + {{ i[2] }} + {% elif i[2] == 'En ruine' %} + {{ i[2] }} + {% else %} + {{ i[2] or 'N/A' }} + {% endif %} +	+ {% if i[3] %} + + {{ i[3][:50] }}{% if i[3]\|length > 50 %}...{% endif %} + + {% else %} + - + {% endif %} +	+ + + + + + + + + +
+ + Aucune inspection trouvée. +
ID	Bâtiment	Date Début	Type de Travaux	Coût Estimé	Prestataire	Statut	Validée	Actions
{{ intervention[0] }}	+ + {{ intervention[8] }} + +	+ {% if intervention[1] %} + {{ intervention[1]\|safe_strftime }} + {% else %}N/A{% endif %} +	{{ (intervention[3][:30] + '...') if intervention[3] and intervention[3]\|length > 30 else (intervention[3] or 'N/A') }}	{{ "{:,.2f}".format(intervention[4]) if intervention[4] else 'N/A' }} MAD	{{ intervention[10] or 'N/A' }}	+ {% if intervention[6] == 'Terminé' %} + {{ intervention[6] }} + {% elif intervention[6] == 'En cours' %} + {{ intervention[6] }} + {% elif intervention[6] == 'Planifié' %} + {{ intervention[6] }} + {% elif intervention[6] == 'Annulé' %} + {{ intervention[6] }} + {% else %} + {{ intervention[6] or 'N/A' }} + {% endif %} +	+ {% if intervention[5] %} + Oui + {% else %} + Non + {% endif %} +	+ + + + + + + + + +
+ + Aucune intervention trouvée. +
ID	Nom de l'Entreprise	Rôle	Interventions	Coût Total (MAD)	Actions
{{ p[0] }}	{{ p[1] }}	+ {% if p[2] %} + {{ p[2] }} + {% else %} + - + {% endif %} +	+ {{ p[3] }} +	{{ "{:,.2f}".format(p[4]) if p[4] else '0.00' }}	+ + + + + + + + + +
+ + Aucun prestataire trouvé. +
ID	Nom Complet	Type	Contact	Bâtiments	Actions
{{ p[0] }}	+ + {{ p[1] }} +	+ {% if p[2] %} + {% if p[2] == 'Public' %} + {{ p[2] }} + {% elif p[2] == 'Privé' %} + {{ p[2] }} + {% else %} + {{ p[2] }} + {% endif %} + {% else %} + - + {% endif %} +	{{ p[3] or '-' }}	+ {{ p[4] }} bâtiment(s) +	+ + + + + + + + + +
+ + Aucun propriétaire trouvé. +
ID	Niveau de Protection	Bâtiments	Actions
{{ p[0] }}	+ + {{ p[1] }} +	+ {{ p[2] }} bâtiment(s) +	+ + + + + + + + + +
+ + + Aucun niveau de protection trouvé. + +
ID	Type de Bâtiment	Bâtiments	Actions
{{ t[0] }}	+ + {{ t[1] }} +	+ {{ t[2] }} bâtiment(s) +	+ + + + + + + + + +
+ + Aucun type de bâtiment trouvé. +
ID	Nom de la Zone	Type	Bâtiments	Actions
{{ z[0] }}	+ + {{ z[1] }} +	+ {% if z[2] %} + {{ z[2] }} + {% else %} + - + {% endif %} +	+ {{ z[3] }} bâtiment(s) +	+ + + + + + + + + +
+ + Aucune zone trouvée. +