diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
index 20abd9b..7d90f3f 100644
--- a/app/Http/Controllers/DashboardController.php
+++ b/app/Http/Controllers/DashboardController.php
@@ -7,6 +7,7 @@ use App\Models\ServiceTask;
 use App\Enums\IntegrationStatus;
 use App\Enums\ServiceTaskStatus;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
 use Inertia\Inertia;
 
 class DashboardController extends Controller
@@ -24,7 +25,7 @@ class DashboardController extends Controller
         }
 
         // If user has a service role
-        $serviceRoles = ['DSI', 'Batiment', 'Parc Auto'];
+        $serviceRoles = \App\Models\Service::pluck('name')->toArray();
         foreach ($serviceRoles as $role) {
             if ($user->hasRole($role)) {
                 return $this->serviceDashboard($role);
@@ -40,9 +41,17 @@ class DashboardController extends Controller
 
     protected function adminDashboard()
     {
+        $driver = DB::connection()->getDriverName();
+        $diffQuery = 'TIMESTAMPDIFF(DAY, created_at, completed_at)';
+        if ($driver === 'pgsql') {
+            $diffQuery = 'EXTRACT(EPOCH FROM (completed_at - created_at)) / 86400';
+        } elseif ($driver === 'sqlite') {
+            $diffQuery = 'CAST(julianday(completed_at) - julianday(created_at) AS INTEGER)';
+        }
+
         $avgCompletionTime = IntegrationRequest::where('status', IntegrationStatus::Completed)
             ->whereNotNull('completed_at')
-            ->selectRaw('AVG(TIMESTAMPDIFF(DAY, created_at, completed_at)) as avg_days')
+            ->selectRaw("AVG({$diffQuery}) as avg_days")
             ->value('avg_days') ?? 0;
 
         $serviceDistribution = \App\Models\Service::withCount('serviceTasks')->get()->map(function ($service) {
diff --git a/app/Http/Controllers/PermissionController.php b/app/Http/Controllers/PermissionController.php
new file mode 100644
index 0000000..19013e3
--- /dev/null
+++ b/app/Http/Controllers/PermissionController.php
@@ -0,0 +1,82 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Spatie\Permission\Models\Permission;
+
+class PermissionController extends Controller
+{
+    public function index()
+    {
+        if (!auth()->user()->hasRole('Admin')) {
+            abort(403);
+        }
+
+        return Inertia::render('Permission/Index', [
+            'permissions' => Permission::all(),
+        ]);
+    }
+
+    public function create()
+    {
+        if (!auth()->user()->hasRole('Admin')) {
+            abort(403);
+        }
+
+        return Inertia::render('Permission/Create');
+    }
+
+    public function store(Request $request)
+    {
+        if (!auth()->user()->hasRole('Admin')) {
+            abort(403);
+        }
+
+        $validated = $request->validate([
+            'name' => 'required|string|unique:permissions,name',
+        ]);
+
+        Permission::create(['name' => $validated['name']]);
+
+        return redirect()->route('permissions.index')->with('success', 'Permission créée avec succès.');
+    }
+
+    public function edit(Permission $permission)
+    {
+        if (!auth()->user()->hasRole('Admin')) {
+            abort(403);
+        }
+
+        return Inertia::render('Permission/Edit', [
+            'permission' => $permission,
+        ]);
+    }
+
+    public function update(Request $request, Permission $permission)
+    {
+        if (!auth()->user()->hasRole('Admin')) {
+            abort(403);
+        }
+
+        $validated = $request->validate([
+            'name' => 'required|string|unique:permissions,name,' . $permission->id,
+        ]);
+
+        $permission->update(['name' => $validated['name']]);
+
+        return redirect()->route('permissions.index')->with('success', 'Permission mise à jour avec succès.');
+    }
+
+    public function destroy(Permission $permission)
+    {
+        if (!auth()->user()->hasRole('Admin')) {
+            abort(403);
+        }
+
+        $permission->delete();
+
+        return redirect()->route('permissions.index')->with('success', 'Permission supprimée avec succès.');
+    }
+}
diff --git a/app/Http/Controllers/ServiceController.php b/app/Http/Controllers/ServiceController.php
new file mode 100644
index 0000000..ac5a4df
--- /dev/null
+++ b/app/Http/Controllers/ServiceController.php
@@ -0,0 +1,136 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Service;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Spatie\Permission\Models\Role;
+use Spatie\Permission\Models\Permission;
+
+class ServiceController extends Controller
+{
+    public function index()
+    {
+        if (!auth()->user()->hasRole('Admin')) {
+            abort(403);
+        }
+
+        return Inertia::render('Service/Index', [
+            'services' => Service::all(),
+        ]);
+    }
+
+    public function create()
+    {
+        if (!auth()->user()->hasRole('Admin')) {
+            abort(403);
+        }
+
+        return Inertia::render('Service/Create');
+    }
+
+    public function store(Request $request)
+    {
+        if (!auth()->user()->hasRole('Admin')) {
+            abort(403);
+        }
+
+        $validated = $request->validate([
+            'name' => 'required|string|max:255|unique:services,name',
+            'code' => 'required|string|max:50|unique:services,code',
+            'is_active' => 'boolean',
+        ]);
+
+        $service = Service::create([
+            'name' => $validated['name'],
+            'code' => strtolower($validated['code']),
+            'is_active' => $validated['is_active'] ?? true,
+        ]);
+
+        // Création de la Permission (tâche)
+        $permissionName = 'manage ' . strtolower($service->name) . ' tasks';
+        Permission::firstOrCreate(['name' => $permissionName]);
+
+        // Création du Rôle pour ce Service
+        $role = Role::firstOrCreate(['name' => $service->name]);
+        $role->givePermissionTo([
+            $permissionName,
+            'view dashboard',
+        ]);
+
+        return redirect()->route('services.index')->with('success', 'Service créé avec succès.');
+    }
+
+    public function edit(Service $service)
+    {
+        if (!auth()->user()->hasRole('Admin')) {
+            abort(403);
+        }
+
+        return Inertia::render('Service/Edit', [
+            'service' => $service,
+        ]);
+    }
+
+    public function update(Request $request, Service $service)
+    {
+        if (!auth()->user()->hasRole('Admin')) {
+            abort(403);
+        }
+
+        $validated = $request->validate([
+            'name' => 'required|string|max:255|unique:services,name,' . $service->id,
+            'code' => 'required|string|max:50|unique:services,code,' . $service->id,
+            'is_active' => 'boolean',
+        ]);
+
+        $oldName = $service->name;
+        
+        $service->update([
+            'name' => $validated['name'],
+            'code' => strtolower($validated['code']),
+            'is_active' => $validated['is_active'] ?? true,
+        ]);
+
+        // Si le nom du service change, on met à jour le rôle et la permission correspondante
+        if ($oldName !== $service->name) {
+            $oldPermissionName = 'manage ' . strtolower($oldName) . ' tasks';
+            $newPermissionName = 'manage ' . strtolower($service->name) . ' tasks';
+            
+            $permission = Permission::where('name', $oldPermissionName)->first();
+            if ($permission) {
+                $permission->update(['name' => $newPermissionName]);
+            }
+
+            $role = Role::where('name', $oldName)->first();
+            if ($role) {
+                $role->update(['name' => $service->name]);
+            }
+        }
+
+        return redirect()->route('services.index')->with('success', 'Service mis à jour avec succès.');
+    }
+
+    public function destroy(Service $service)
+    {
+        if (!auth()->user()->hasRole('Admin')) {
+            abort(403);
+        }
+
+        $permissionName = 'manage ' . strtolower($service->name) . ' tasks';
+        $permission = Permission::where('name', $permissionName)->first();
+        if ($permission) {
+            $permission->delete();
+        }
+
+        $role = Role::where('name', $service->name)->first();
+        if ($role) {
+            $role->delete();
+        }
+
+        $service->delete();
+
+        return redirect()->route('services.index')->with('success', 'Service supprimé avec succès.');
+    }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
index e69de29..3427eb5 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..3427eb5
Binary files /dev/null and b/public/favicon.png differ
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index de9c84d..29e6a70 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -53,6 +53,20 @@ const showingNavigationDropdown = ref(false);
                                 >
                                     Rôles
                                 </NavLink>
+                                <NavLink
+                                    v-if="$page.props.auth.user.roles.some(r => r.name === 'Admin')"
+                                    :href="route('permissions.index')"
+                                    :active="route().current('permissions.*')"
+                                >
+                                    Permissions
+                                </NavLink>
+                                <NavLink
+                                    v-if="$page.props.auth.user.roles.some(r => r.name === 'Admin')"
+                                    :href="route('services.index')"
+                                    :active="route().current('services.*')"
+                                >
+                                    Services
+                                </NavLink>
                             </div>
                         </div>
 
@@ -174,6 +188,20 @@ const showingNavigationDropdown = ref(false);
                         >
                             Rôles
                         </ResponsiveNavLink>
+                        <ResponsiveNavLink
+                            v-if="$page.props.auth.user.roles.some(r => r.name === 'Admin')"
+                            :href="route('permissions.index')"
+                            :active="route().current('permissions.*')"
+                        >
+                            Permissions
+                        </ResponsiveNavLink>
+                        <ResponsiveNavLink
+                            v-if="$page.props.auth.user.roles.some(r => r.name === 'Admin')"
+                            :href="route('services.index')"
+                            :active="route().current('services.*')"
+                        >
+                            Services
+                        </ResponsiveNavLink>
                     </div>
 
                     <!-- Responsive Settings Options -->
diff --git a/resources/js/Pages/Permission/Create.vue b/resources/js/Pages/Permission/Create.vue
new file mode 100644
index 0000000..7736af4
--- /dev/null
+++ b/resources/js/Pages/Permission/Create.vue
@@ -0,0 +1,54 @@
+<script setup>
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+import { Head, useForm, Link } from '@inertiajs/vue3';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import TextInput from '@/Components/TextInput.vue';
+
+const form = useForm({
+    name: '',
+});
+
+const submit = () => {
+    form.post(route('permissions.store'));
+};
+</script>
+
+<template>
+    <Head title="Nouvelle Permission" />
+
+    <AuthenticatedLayout>
+        <template #header>
+            <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
+                Nouvelle Permission
+            </h2>
+        </template>
+
+        <div class="py-12">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg dark:bg-gray-800 p-6">
+                    <form @submit.prevent="submit" class="space-y-6 max-w-xl">
+                        <div>
+                            <InputLabel for="name" value="Nom de la Permission (Tâche)" />
+                            <TextInput 
+                                id="name" 
+                                type="text" 
+                                class="mt-1 block w-full" 
+                                v-model="form.name" 
+                                required 
+                                autofocus 
+                            />
+                            <InputError class="mt-2" :message="form.errors.name" />
+                        </div>
+
+                        <div class="flex items-center gap-4">
+                            <PrimaryButton :disabled="form.processing">Enregistrer</PrimaryButton>
+                            <Link :href="route('permissions.index')" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 underline">Annuler</Link>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </AuthenticatedLayout>
+</template>
diff --git a/resources/js/Pages/Permission/Edit.vue b/resources/js/Pages/Permission/Edit.vue
new file mode 100644
index 0000000..8b40bc5
--- /dev/null
+++ b/resources/js/Pages/Permission/Edit.vue
@@ -0,0 +1,58 @@
+<script setup>
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+import { Head, useForm, Link } from '@inertiajs/vue3';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import TextInput from '@/Components/TextInput.vue';
+
+const props = defineProps({
+    permission: Object,
+});
+
+const form = useForm({
+    name: props.permission.name,
+});
+
+const submit = () => {
+    form.put(route('permissions.update', props.permission.id));
+};
+</script>
+
+<template>
+    <Head title="Modifier la Permission" />
+
+    <AuthenticatedLayout>
+        <template #header>
+            <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
+                Modifier la Permission
+            </h2>
+        </template>
+
+        <div class="py-12">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg dark:bg-gray-800 p-6">
+                    <form @submit.prevent="submit" class="space-y-6 max-w-xl">
+                        <div>
+                            <InputLabel for="name" value="Nom de la Permission (Tâche)" />
+                            <TextInput 
+                                id="name" 
+                                type="text" 
+                                class="mt-1 block w-full" 
+                                v-model="form.name" 
+                                required 
+                                autofocus 
+                            />
+                            <InputError class="mt-2" :message="form.errors.name" />
+                        </div>
+
+                        <div class="flex items-center gap-4">
+                            <PrimaryButton :disabled="form.processing">Enregistrer</PrimaryButton>
+                            <Link :href="route('permissions.index')" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 underline">Annuler</Link>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </AuthenticatedLayout>
+</template>
diff --git a/resources/js/Pages/Permission/Index.vue b/resources/js/Pages/Permission/Index.vue
new file mode 100644
index 0000000..247a8e8
--- /dev/null
+++ b/resources/js/Pages/Permission/Index.vue
@@ -0,0 +1,60 @@
+<script setup>
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+import { Head, Link, router } from '@inertiajs/vue3';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+
+const props = defineProps({
+    permissions: Array,
+});
+
+const deletePermission = (permission) => {
+    if (confirm('Êtes-vous sûr de vouloir supprimer cette permission ?')) {
+        router.delete(route('permissions.destroy', permission.id));
+    }
+};
+</script>
+
+<template>
+    <Head title="Gestion des Permissions" />
+
+    <AuthenticatedLayout>
+        <template #header>
+            <div class="flex justify-between items-center">
+                <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
+                    Gestion des Permissions
+                </h2>
+                <Link :href="route('permissions.create')">
+                    <PrimaryButton>Nouvelle Permission</PrimaryButton>
+                </Link>
+            </div>
+        </template>
+
+        <div class="py-12">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg dark:bg-gray-800">
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-left border-collapse">
+                            <thead>
+                                <tr class="border-b dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
+                                    <th class="px-6 py-3 text-xs font-bold uppercase text-gray-500 dark:text-gray-400">Nom</th>
+                                    <th class="px-6 py-3 text-xs font-bold uppercase text-gray-500 dark:text-gray-400 text-right">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+                                <tr v-for="permission in permissions" :key="permission.id" class="hover:bg-gray-50 dark:hover:bg-gray-700/30">
+                                    <td class="px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">
+                                        {{ permission.name }}
+                                    </td>
+                                    <td class="px-6 py-4 text-sm text-right space-x-2">
+                                        <Link :href="route('permissions.edit', permission.id)" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300">Modifier</Link>
+                                        <button @click="deletePermission(permission)" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Supprimer</button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </AuthenticatedLayout>
+</template>
diff --git a/resources/js/Pages/Service/Create.vue b/resources/js/Pages/Service/Create.vue
new file mode 100644
index 0000000..bbcedeb
--- /dev/null
+++ b/resources/js/Pages/Service/Create.vue
@@ -0,0 +1,76 @@
+<script setup>
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+import { Head, useForm, Link } from '@inertiajs/vue3';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import TextInput from '@/Components/TextInput.vue';
+
+const form = useForm({
+    name: '',
+    code: '',
+    is_active: true,
+});
+
+const submit = () => {
+    form.post(route('services.store'));
+};
+</script>
+
+<template>
+    <Head title="Nouveau Service" />
+
+    <AuthenticatedLayout>
+        <template #header>
+            <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
+                Nouveau Service
+            </h2>
+        </template>
+
+        <div class="py-12">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg dark:bg-gray-800 p-6">
+                    <form @submit.prevent="submit" class="space-y-6 max-w-xl">
+                        <div>
+                            <InputLabel for="name" value="Nom du Service" />
+                            <TextInput 
+                                id="name" 
+                                type="text" 
+                                class="mt-1 block w-full" 
+                                v-model="form.name" 
+                                required 
+                                autofocus 
+                            />
+                            <InputError class="mt-2" :message="form.errors.name" />
+                        </div>
+
+                        <div>
+                            <InputLabel for="code" value="Code du Service (sans espace)" />
+                            <TextInput 
+                                id="code" 
+                                type="text" 
+                                class="mt-1 block w-full" 
+                                v-model="form.code" 
+                                required 
+                            />
+                            <InputError class="mt-2" :message="form.errors.code" />
+                        </div>
+
+                        <div>
+                            <label class="flex items-center">
+                                <input type="checkbox" v-model="form.is_active" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800">
+                                <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">Le service est actif</span>
+                            </label>
+                            <InputError class="mt-2" :message="form.errors.is_active" />
+                        </div>
+
+                        <div class="flex items-center gap-4">
+                            <PrimaryButton :disabled="form.processing">Enregistrer</PrimaryButton>
+                            <Link :href="route('services.index')" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 underline">Annuler</Link>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </AuthenticatedLayout>
+</template>
diff --git a/resources/js/Pages/Service/Edit.vue b/resources/js/Pages/Service/Edit.vue
new file mode 100644
index 0000000..64d0ff9
--- /dev/null
+++ b/resources/js/Pages/Service/Edit.vue
@@ -0,0 +1,80 @@
+<script setup>
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+import { Head, useForm, Link } from '@inertiajs/vue3';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import TextInput from '@/Components/TextInput.vue';
+
+const props = defineProps({
+    service: Object,
+});
+
+const form = useForm({
+    name: props.service.name,
+    code: props.service.code,
+    is_active: !!props.service.is_active,
+});
+
+const submit = () => {
+    form.put(route('services.update', props.service.id));
+};
+</script>
+
+<template>
+    <Head title="Modifier le Service" />
+
+    <AuthenticatedLayout>
+        <template #header>
+            <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
+                Modifier le Service
+            </h2>
+        </template>
+
+        <div class="py-12">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg dark:bg-gray-800 p-6">
+                    <form @submit.prevent="submit" class="space-y-6 max-w-xl">
+                        <div>
+                            <InputLabel for="name" value="Nom du Service" />
+                            <TextInput 
+                                id="name" 
+                                type="text" 
+                                class="mt-1 block w-full" 
+                                v-model="form.name" 
+                                required 
+                                autofocus 
+                            />
+                            <InputError class="mt-2" :message="form.errors.name" />
+                        </div>
+
+                        <div>
+                            <InputLabel for="code" value="Code du Service (sans espace)" />
+                            <TextInput 
+                                id="code" 
+                                type="text" 
+                                class="mt-1 block w-full" 
+                                v-model="form.code" 
+                                required 
+                            />
+                            <InputError class="mt-2" :message="form.errors.code" />
+                        </div>
+
+                        <div>
+                            <label class="flex items-center">
+                                <input type="checkbox" v-model="form.is_active" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800">
+                                <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">Le service est actif</span>
+                            </label>
+                            <InputError class="mt-2" :message="form.errors.is_active" />
+                        </div>
+
+                        <div class="flex items-center gap-4">
+                            <PrimaryButton :disabled="form.processing">Enregistrer</PrimaryButton>
+                            <Link :href="route('services.index')" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 underline">Annuler</Link>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </AuthenticatedLayout>
+</template>
diff --git a/resources/js/Pages/Service/Index.vue b/resources/js/Pages/Service/Index.vue
new file mode 100644
index 0000000..d262a27
--- /dev/null
+++ b/resources/js/Pages/Service/Index.vue
@@ -0,0 +1,73 @@
+<script setup>
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+import { Head, Link, router } from '@inertiajs/vue3';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+
+const props = defineProps({
+    services: Array,
+});
+
+const deleteService = (service) => {
+    if (confirm('Êtes-vous sûr de vouloir supprimer ce service ?')) {
+        router.delete(route('services.destroy', service.id));
+    }
+};
+</script>
+
+<template>
+    <Head title="Gestion des Services" />
+
+    <AuthenticatedLayout>
+        <template #header>
+            <div class="flex justify-between items-center">
+                <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
+                    Gestion des Services
+                </h2>
+                <Link :href="route('services.create')">
+                    <PrimaryButton>Nouveau Service</PrimaryButton>
+                </Link>
+            </div>
+        </template>
+
+        <div class="py-12">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg dark:bg-gray-800">
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-left border-collapse">
+                            <thead>
+                                <tr class="border-b dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
+                                    <th class="px-6 py-3 text-xs font-bold uppercase text-gray-500 dark:text-gray-400">Nom</th>
+                                    <th class="px-6 py-3 text-xs font-bold uppercase text-gray-500 dark:text-gray-400">Code</th>
+                                    <th class="px-6 py-3 text-xs font-bold uppercase text-gray-500 dark:text-gray-400">Statut</th>
+                                    <th class="px-6 py-3 text-xs font-bold uppercase text-gray-500 dark:text-gray-400 text-right">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+                                <tr v-for="service in services" :key="service.id" class="hover:bg-gray-50 dark:hover:bg-gray-700/30">
+                                    <td class="px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">
+                                        {{ service.name }}
+                                    </td>
+                                    <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                        {{ service.code }}
+                                    </td>
+                                    <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                        <span v-if="service.is_active" class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
+                                            Actif
+                                        </span>
+                                        <span v-else class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">
+                                            Inactif
+                                        </span>
+                                    </td>
+                                    <td class="px-6 py-4 text-sm text-right space-x-2">
+                                        <Link :href="route('services.edit', service.id)" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300">Modifier</Link>
+                                        <button @click="deleteService(service)" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Supprimer</button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </AuthenticatedLayout>
+</template>
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 334627a..78a27f0 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -5,6 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <title inertia>{{ config('app.name', 'Laravel') }}</title>
+        <link rel="icon" type="image/png" href="/favicon.png">
 
         <!-- Fonts -->
         <link rel="preconnect" href="https://fonts.bunny.net">
diff --git a/routes/web.php b/routes/web.php
index 5724f98..5902997 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -41,6 +41,8 @@ Route::middleware('auth')->group(function () {
 
     Route::resource('users', \App\Http\Controllers\UserController::class);
     Route::resource('roles', \App\Http\Controllers\RoleController::class);
+    Route::resource('permissions', \App\Http\Controllers\PermissionController::class);
+    Route::resource('services', \App\Http\Controllers\ServiceController::class);
 });
 
 require __DIR__.'/auth.php';