diff --git a/modules/ui_components.py b/modules/ui_components.py
index 8ac61ef..631483b 100644
--- a/modules/ui_components.py
+++ b/modules/ui_components.py
@@ -300,54 +300,65 @@ def render_rag_upload_modal():
     )
 
 def render_backoffice_page(utilisateur, role, tous_les_utilisateurs, stats_serveur):
+    input_style = "width: 100%; padding: 10px; background: #222; border: 1px solid #444; color: #fff; border-radius: 6px; box-sizing: border-box; font-family: monospace;"
+    btn_style = "width: 100%; padding: 12px; background-color: #00e5ff; color: black; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; font-family: monospace; font-size: 1em;"
+    card_style = "background: #1a1a1a; padding: 25px; border-radius: 10px; border: 1px solid #333; margin-bottom: 20px;"
+
     sections = [
-        H2(f"⚙️ Paramètres du compte - {utilisateur.capitalize()} ({role})", style="color: #00e5ff;"),
-        Form(
-            Div(Label("Modifier mon pseudonyme :"), Input(type="text", name="nouveau_pseudo", value=utilisateur, cls="input-field"), style="margin-bottom: 10px;"),
-            Div(Label("Nouveau mot de passe :"), Input(type="password", name="nouveau_mdp", placeholder="Laisser vide si inchangé", cls="input-field"), style="margin-bottom: 15px;"),
-            Button("Enregistrer les modifications", type="submit", cls="btn-submit"),
-            method="post", action="/backoffice/update_profile", style="background: #1a1a1a; padding: 20px; border-radius: 8px; border: 1px solid #333; margin-bottom: 20px;"
+        Div(
+            H2(f"⚙️ Paramètres du compte - {utilisateur.capitalize()} ({role})", style="color: #00e5ff; margin-top: 0; margin-bottom: 20px; font-size: 1.4em;"),
+            Form(
+                Div(
+                    Label("Modifier mon pseudonyme :", style="display: block; margin-bottom: 8px; color: #aaa;"), 
+                    Input(type="text", name="nouveau_pseudo", value=utilisateur, style=input_style), 
+                    style="margin-bottom: 15px;"
+                ),
+                Div(
+                    Label("Nouveau mot de passe :", style="display: block; margin-bottom: 8px; color: #aaa;"), 
+                    Input(type="password", name="nouveau_mdp", placeholder="Laisser vide si inchangé", style=input_style), 
+                    style="margin-bottom: 20px;"
+                ),
+                Button("Enregistrer les modifications", type="submit", style=btn_style),
+                method="post", action="/backoffice/update_profile"
+            ),
+            style=card_style
         )
     ]
     
-    # Spécificités Admin & Super Admin (Héritage des privilèges inférieurs)
     if role in ["Admin", "Super Admin"]:
-        lignes_utilisateurs = [Li(f"{pseudo} — Rôle : {data.get('role', 'Membre')}") for pseudo, data in tous_les_utilisateurs.items()]
+        lignes_utilisateurs = [Li(f"{pseudo} — Rôle : {data.get('role', 'Membre')}", style="margin-bottom: 8px;") for pseudo, data in tous_les_utilisateurs.items()]
         sections.append(Div(
-            H3("👥 Gestion des utilisateurs", style="color: #4caf50;"),
-            Ul(*lignes_utilisateurs),
-            style="background: #1a1a1a; padding: 20px; border-radius: 8px; border: 1px solid #333; margin-bottom: 20px;"
+            H3("👥 Gestion des utilisateurs", style="color: #4caf50; margin-top: 0;"),
+            Ul(*lignes_utilisateurs, style="padding-left: 20px; color: #ddd; margin: 0;"),
+            style=card_style
         ))
         
-    # Spécificités Super Admin uniquement (Supervision Système, RAID & Agent Vectoriel + Bouton de Vectorisation Globale)
     if role == "Super Admin" and stats_serveur:
         data_st = stats_serveur.get('data_stats', {})
         sections.append(Div(
-            H3("🖥️ Supervision Système, RAID & Agent Vectoriel", style="color: #ff9800;"),
-            P(f"💾 Espace disque racine : {stats_serveur['disque_utilise_gb']} Go / {stats_serveur['disque_total_gb']} Go ({stats_serveur['pourcentage_utilise']}%)"),
-            (P(f"🗄️ Partition RAID (/DATA) : {data_st.get('utilise_gb', 0)} Go / {data_st.get('total_gb', 0)} Go ({data_st.get('pourcentage', 0)}% utilisés, {data_st.get('libre_gb', 0)} Go libres)") if data_st else P("🗄️ Partition RAID (/DATA) : Non détectée")),
+            H3("🖥️ Supervision Système, RAID & Agent Vectoriel", style="color: #ff9800; margin-top: 0;"),
+            P(f"💾 Espace disque racine : {stats_serveur['disque_utilise_gb']} Go / {stats_serveur['disque_total_gb']} Go ({stats_serveur['pourcentage_utilise']}%)", style="margin: 8px 0;"),
+            (P(f"🗄️ Partition RAID (/DATA) : {data_st.get('utilise_gb', 0)} Go / {data_st.get('total_gb', 0)} Go ({data_st.get('pourcentage', 0)}% utilisés, {data_st.get('libre_gb', 0)} Go libres)", style="margin: 8px 0;") if data_st else P("🗄️ Partition RAID (/DATA) : Non détectée", style="margin: 8px 0;")),
             Div(
-                P("📡 État du RAID (mdstat) :", style="margin-bottom: 5px; font-weight: bold;"),
-                Pre(stats_serveur.get('raid_status', 'N/A'), style="font-size: 0.8em; background: #111; color: #00ffcc; padding: 10px; border-radius: 4px; overflow-x: auto; max-height: 180px; overflow-y: auto; white-space: pre-wrap; font-family: monospace; margin: 0;"),
+                P("📡 État du RAID (mdstat) :", style="margin: 10px 0 5px 0; font-weight: bold; color: #ccc;"),
+                Pre(stats_serveur.get('raid_status', 'N/A'), style="font-size: 0.8em; background: #111; color: #00ffcc; padding: 12px; border-radius: 6px; overflow-x: auto; max-height: 180px; overflow-y: auto; white-space: pre-wrap; font-family: monospace; margin: 0; border: 1px solid #333;"),
                 style="margin-bottom: 15px;"
             ),
-            P(f"🤖 Agent Vectoriel (Ollama) : {stats_serveur.get('agent_status', 'N/A')}"),
-            Hr(style="border-color: #444; margin: 15px 0;"),
-            H4("⚡ Actions Globales RAG", style="color: #00e5ff; font-size: 1em;"),
+            P(f"🤖 Agent Vectoriel (Ollama) : {stats_serveur.get('agent_status', 'N/A')}", style="margin: 8px 0 20px 0;"),
+            Hr(style="border-color: #444; margin: 20px 0;"),
+            H4("⚡ Actions Globales RAG", style="color: #00e5ff; font-size: 1.1em; margin-bottom: 15px;"),
             Form(
-                Button("Forcer la vectorisation globale de tout le RAG", type="submit", cls="btn-submit", style="background-color: #e91e63; color: white; width: 100%; font-weight: bold; cursor: pointer;"),
+                Button("Forcer la vectorisation globale de tout le RAG", type="submit", style="width: 100%; padding: 12px; background-color: #e91e63; color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; font-family: monospace; font-size: 0.95em;"),
                 method="post", action="/backoffice/forcer_vectorisation"
             ),
-            style="background: #1a1a1a; padding: 20px; border-radius: 8px; border: 1px solid #333; margin-bottom: 20px;"
+            style=card_style
         ))
         
-    # Vrai bouton ergonomique de retour au Front Office
     sections.append(
-        A("← Retour au Chat (Front Office)", href="/", cls="btn-submit", style="display: block; text-align: center; background-color: #00e5ff; color: black; text-decoration: none; font-weight: bold; padding: 12px; border-radius: 6px;")
+        A("← Retour au Chat (Front Office)", href="/", style="display: block; text-align: center; background-color: #333; color: #00e5ff; border: 1px solid #00e5ff; text-decoration: none; font-weight: bold; padding: 12px; border-radius: 6px; font-family: monospace; margin-top: 10px;")
     )
     
     return Title("Back Office - Aethas38"), Body(
-        Div(*sections, style="max-width: 600px; margin: 40px auto; font-family: monospace; color: #fff; padding-bottom: 40px;"),
-        # Style global appliqué au Body pour forcer le défilement vertical et éliminer les blocages d'affichage
-        style="background-color: #0d0d0d; padding: 20px; overflow-y: auto !important; height: 100vh; box-sizing: border-box;"
+        Div(*sections, style="max-width: 700px; margin: 30px auto; font-family: monospace; color: #fff; padding: 0 15px 50px 15px; box-sizing: border-box;"),
+        style="background-color: #0d0d0d; padding: 0; margin: 0; overflow-y: auto !important; height: 100vh; box-sizing: border-box;"
     )
\ No newline at end of file