diff --git a/src/app/(dashboard)/parametres/page.tsx b/src/app/(dashboard)/parametres/page.tsx
index 4e04263..2798756 100644
--- a/src/app/(dashboard)/parametres/page.tsx
+++ b/src/app/(dashboard)/parametres/page.tsx
@@ -1,9 +1,41 @@
+'use client'
+import { useState } from 'react'
+import { useSession } from 'next-auth/react'
 import { Header } from '@/components/layout/Header'
+import { UsersManager } from '@/components/settings/UsersManager'
+import { ConnectionStatus } from '@/components/settings/ConnectionStatus'
+
+type Tab = 'connexions' | 'utilisateurs'
+
 export default function ParametresPage() {
+  const { data: session } = useSession()
+  const isAdmin = session?.user?.role === 'admin'
+  const [tab, setTab] = useState<Tab>('connexions')
+
   return (
     <>
-      <Header title="⚙️ Paramètres" />
-      <div className="p-6"><p className="text-gray-400 text-sm">Module Paramètres — à implémenter (Plan 4)</p></div>
+      <Header title="Paramètres" />
+      <div className="p-6 space-y-6">
+        {isAdmin && (
+          <div className="flex gap-2">
+            {(['connexions', 'utilisateurs'] as Tab[]).map((t) => (
+              <button
+                key={t}
+                onClick={() => setTab(t)}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                  tab === t
+                    ? 'bg-indigo-600 text-white'
+                    : 'bg-slate-700 text-gray-300 hover:bg-slate-600'
+                }`}
+              >
+                {t === 'connexions' ? 'Connexions' : 'Utilisateurs'}
+              </button>
+            ))}
+          </div>
+        )}
+        {(!isAdmin || tab === 'connexions') && <ConnectionStatus />}
+        {isAdmin && tab === 'utilisateurs' && <UsersManager />}
+      </div>
     </>
   )
 }