diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
index d4db61c..b83c6ae 100644
--- a/app/Http/Controllers/DashboardController.php
+++ b/app/Http/Controllers/DashboardController.php
@@ -23,7 +23,7 @@ class DashboardController extends Controller
             ->first();
 
         return Inertia::render('dashboard', [
-            'member' => $member ? new MemberResource($member) : null,
+            'member' => $member ? (new MemberResource($member))->resolve() : null,
         ]);
     }
 
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 452e6b6..2218be7 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -2,6 +2,7 @@
 
 namespace App\Providers;
 
+use Illuminate\Http\Resources\Json\JsonResource;
 use Illuminate\Support\ServiceProvider;
 
 class AppServiceProvider extends ServiceProvider
@@ -19,6 +20,7 @@ class AppServiceProvider extends ServiceProvider
      */
     public function boot(): void
     {
-        //
+        // Disable wrapping for all JSON responses
+        JsonResource::withoutWrapping();
     }
 }
diff --git a/resources/js/components/features/dashboard/NoMemberCard.tsx b/resources/js/components/features/dashboard/NoMemberCard.tsx
new file mode 100644
index 0000000..6122a62
--- /dev/null
+++ b/resources/js/components/features/dashboard/NoMemberCard.tsx
@@ -0,0 +1,18 @@
+import { KeyRound } from 'lucide-react';
+import { router } from '@inertiajs/react';
+import { Button } from '@/components/ui/button';
+
+export function NoMemberCard() {
+    return (
+        <div className="nb-shadow-static bg-white dark:bg-[#171717] rounded-2xl p-8 flex flex-col items-center gap-4 text-center max-w-lg mx-auto">
+            <KeyRound className="size-10 text-primary" />
+            <h2 className="text-xl font-bold">Pas encore membre ?</h2>
+            <p className="text-muted-foreground text-sm">
+                Votre compte n'est pas encore associé à une adhésion. Rejoignez l'association pour accéder aux services.
+            </p>
+            <Button variant="secondary" className="nb-shadow" onClick={() => router.visit('/formulaires/adhesion')}>
+                Adhérer au Retzien Libre
+            </Button>
+        </div>
+    );
+}
diff --git a/resources/js/components/features/dashboard/ServiceCard.tsx b/resources/js/components/features/dashboard/ServiceCard.tsx
new file mode 100644
index 0000000..430950e
--- /dev/null
+++ b/resources/js/components/features/dashboard/ServiceCard.tsx
@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import { Cloud, ExternalLink, Globe, Layers, Mail, Megaphone, Share2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { type DashboardService } from '@/types';
+
+const ACTIVATION_REQUESTED_KEY = 'service_activation_requested';
+
+function getRequestedServices(): string[] {
+    try {
+        return JSON.parse(localStorage.getItem(ACTIVATION_REQUESTED_KEY) ?? '[]');
+    } catch {
+        return [];
+    }
+}
+
+function markServiceRequested(identifier: string): void {
+    const current = getRequestedServices();
+    if (!current.includes(identifier)) {
+        localStorage.setItem(ACTIVATION_REQUESTED_KEY, JSON.stringify([...current, identifier]));
+    }
+}
+
+const iconMap: Record<string, typeof Mail> = {
+    envelope: Mail,
+    share: Share2,
+    cloud: Cloud,
+    megaphone: Megaphone,
+    'globe-alt': Globe,
+};
+
+const colorSchemes = [
+    {
+        card: 'bg-secondary',
+        titleBg: 'bg-accent',
+        titleText: 'text-accent-foreground',
+        linkText: 'text-foreground',
+        iconText: 'text-foreground/10',
+    },
+    {
+        card: 'bg-primary',
+        titleBg: 'bg-white',
+        titleText: 'text-black',
+        linkText: 'text-foreground',
+        iconText: 'text-foreground/10',
+    },
+    {
+        card: 'bg-accent',
+        titleBg: 'bg-primary',
+        titleText: 'text-primary-foreground',
+        linkText: 'text-accent-foreground',
+        iconText: 'text-white/10',
+    },
+];
+
+interface Props {
+    service: DashboardService;
+    index: number;
+    onRequest: (identifier: string) => void;
+}
+
+export function ServiceCard({ service, index, onRequest }: Props) {
+    const [alreadyRequested, setAlreadyRequested] = useState(() =>
+        getRequestedServices().includes(service.identifier),
+    );
+
+    const scheme = colorSchemes[index % colorSchemes.length];
+    const Icon = iconMap[service.icon ?? ''] ?? Layers;
+
+    function handleRequest() {
+        markServiceRequested(service.identifier);
+        setAlreadyRequested(true);
+        onRequest(service.identifier);
+    }
+
+    return (
+        <div className={cn('nb-shadow flex items-center gap-4 rounded-4xl p-10', scheme.card)}>
+            <div className="flex flex-col gap-3 flex-1 min-w-0">
+                <div className="max-w-[200px]">
+                    <h3 className={cn('inline text-2xl font-semibold rounded p-1 line-clamp-2', scheme.titleBg, scheme.titleText)}>
+                        {service.name}
+                    </h3>
+                </div>
+                {service.description && (
+                    <p className="text-sm text-muted-foreground mt-2">{service.description}</p>
+                )}
+                <div className="mt-2">
+                    {service.is_active ? (
+                        <a
+                            href={service.url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={cn('inline-flex items-center gap-1.5 text-sm font-medium underline hover:no-underline', scheme.linkText)}
+                        >
+                            Accéder au service <ExternalLink className="size-3.5" />
+                        </a>
+                    ) : (
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            disabled={alreadyRequested}
+                            onClick={handleRequest}
+                            className="text-xs"
+                        >
+                            {alreadyRequested ? 'Demande envoyée' : "Demander l'activation"}
+                        </Button>
+                    )}
+                </div>
+            </div>
+            <div className={cn('shrink-0', scheme.iconText)}>
+                <Icon className="size-32" />
+            </div>
+        </div>
+    );
+}
diff --git a/resources/js/components/features/dashboard/ServicesSection.tsx b/resources/js/components/features/dashboard/ServicesSection.tsx
new file mode 100644
index 0000000..399c779
--- /dev/null
+++ b/resources/js/components/features/dashboard/ServicesSection.tsx
@@ -0,0 +1,32 @@
+import { Loader2 } from 'lucide-react';
+import { type DashboardService } from '@/types';
+import { ServiceCard } from './ServiceCard';
+
+interface Props {
+    services: DashboardService[];
+    submitting: boolean;
+    onRequest: (identifier: string) => void;
+}
+
+export function ServicesSection({ services, submitting, onRequest }: Props) {
+    return (
+        <div className="flex flex-col gap-4">
+            <h2 className="text-lg font-semibold">Vos services</h2>
+            {submitting && (
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Loader2 className="size-4 animate-spin" /> Envoi en cours…
+                </div>
+            )}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {services.map((service, index) => (
+                    <ServiceCard
+                        key={service.identifier}
+                        service={service}
+                        index={index}
+                        onRequest={onRequest}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}
diff --git a/resources/js/components/features/dashboard/WelcomeCard.tsx b/resources/js/components/features/dashboard/WelcomeCard.tsx
new file mode 100644
index 0000000..1279ac2
--- /dev/null
+++ b/resources/js/components/features/dashboard/WelcomeCard.tsx
@@ -0,0 +1,51 @@
+import { type DashboardMember } from '@/types';
+import { cn } from '@/lib/utils';
+
+interface Props {
+    member: DashboardMember;
+}
+
+export function WelcomeCard({ member }: Props) {
+    const membership = member.membership;
+
+    return (
+        <>
+            <div>
+                <p className="text-2xl text-black font-medium tracking-wide">
+                    Bienvenue sur votre espace Retzien, {member.firstname}
+                </p>
+            </div>
+            <div className="nb-shadow-static bg-white rounded-2xl p-6 flex flex-col gap-2">
+                <h1 className="text-2xl font-bold">
+                    {member.firstname} {member.lastname}
+                </h1>
+                <p className="text-sm text-muted-foreground">{member.retzien_email || member.email}</p>
+
+                {membership ? (
+                    <div className="mt-3 flex flex-wrap gap-4 text-sm">
+                        <span className="inline-flex items-center gap-1.5 rounded-full bg-secondary/20 text-secondary-foreground px-3 py-1 font-medium border border-secondary/40">
+                            {membership.package?.name ?? 'Adhésion'}
+                        </span>
+                        <span
+                            className={cn(
+                                'inline-flex items-center gap-1.5 rounded-full px-3 py-1 font-medium border',
+                                membership.status === 'active'
+                                    ? 'bg-green-100 text-green-800 border-green-300 dark:bg-green-900/20 dark:text-green-400 dark:border-green-700'
+                                    : 'bg-orange-100 text-orange-800 border-orange-300 dark:bg-orange-900/20 dark:text-orange-400 dark:border-orange-700',
+                            )}
+                        >
+                            {membership.status === 'active' ? 'Actif' : 'En attente'}
+                        </span>
+                        {membership.end_date && (
+                            <span className="text-muted-foreground">
+                                Valide jusqu'au {new Date(membership.end_date).toLocaleDateString('fr-FR')}
+                            </span>
+                        )}
+                    </div>
+                ) : (
+                    <p className="mt-2 text-sm text-muted-foreground">Aucune adhésion active.</p>
+                )}
+            </div>
+        </>
+    );
+}
diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx
index 7d2fb27..563c6f5 100644
--- a/resources/js/pages/dashboard.tsx
+++ b/resources/js/pages/dashboard.tsx
@@ -1,12 +1,12 @@
 import AppLayout from '@/layouts/app-layout';
-import { type BreadcrumbItem, type DashboardMember, type DashboardService, type PageProps } from '@/types';
+import { type BreadcrumbItem, type PageProps } from '@/types';
 import { Head, router, usePage } from '@inertiajs/react';
-import DashboardController from '@/actions/App/Http/Controllers/DashboardController';
-import { ExternalLink, KeyRound, Loader2 } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { FlashMessage } from '@/components/flash-message';
 import { useEffect, useState } from 'react';
-import { cn } from '@/lib/utils';
+import DashboardController from '@/actions/App/Http/Controllers/DashboardController';
+import { FlashMessage } from '@/components/flash-message';
+import { WelcomeCard } from '@/components/features/dashboard/WelcomeCard';
+import { NoMemberCard } from '@/components/features/dashboard/NoMemberCard';
+import { ServicesSection } from '@/components/features/dashboard/ServicesSection';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -15,132 +15,6 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-const ACTIVATION_REQUESTED_KEY = 'service_activation_requested';
-
-function getRequestedServices(): string[] {
-    try {
-        return JSON.parse(localStorage.getItem(ACTIVATION_REQUESTED_KEY) ?? '[]');
-    } catch {
-        return [];
-    }
-}
-
-function markServiceRequested(identifier: string): void {
-    const current = getRequestedServices();
-    if (!current.includes(identifier)) {
-        localStorage.setItem(ACTIVATION_REQUESTED_KEY, JSON.stringify([...current, identifier]));
-    }
-}
-
-function WelcomeCard({ member }: { member: DashboardMember }) {
-    const membership = member.membership;
-
-    return (
-        <div className="nb-shadow-static bg-primary rounded-2xl p-6 flex flex-col gap-2">
-            <p className="text-sm text-muted-foreground font-medium uppercase tracking-wide">Bienvenue</p>
-            <h1 className="text-2xl font-bold">
-                {member.firstname} {member.lastname}
-            </h1>
-            <p className="text-sm text-muted-foreground">{member.retzien_email || member.email}</p>
-
-            {membership ? (
-                <div className="mt-3 flex flex-wrap gap-4 text-sm">
-                    <span className="inline-flex items-center gap-1.5 rounded-full bg-secondary/20 text-secondary-foreground px-3 py-1 font-medium border border-secondary/40">
-                        {membership.package?.name ?? 'Adhésion'}
-                    </span>
-                    <span className={cn(
-                        'inline-flex items-center gap-1.5 rounded-full px-3 py-1 font-medium border',
-                        membership.status === 'active'
-                            ? 'bg-green-100 text-green-800 border-green-300 dark:bg-green-900/20 dark:text-green-400 dark:border-green-700'
-                            : 'bg-orange-100 text-orange-800 border-orange-300 dark:bg-orange-900/20 dark:text-orange-400 dark:border-orange-700',
-                    )}>
-                        {membership.status === 'active' ? 'Actif' : 'En attente'}
-                    </span>
-                    {membership.end_date && (
-                        <span className="text-muted-foreground">
-                            Valide jusqu'au {new Date(membership.end_date).toLocaleDateString('fr-FR')}
-                        </span>
-                    )}
-                </div>
-            ) : (
-                <p className="mt-2 text-sm text-muted-foreground">Aucune adhésion active.</p>
-            )}
-        </div>
-    );
-}
-
-function NoMemberCard() {
-    return (
-        <div className="nb-shadow-static bg-white dark:bg-[#171717] rounded-2xl p-8 flex flex-col items-center gap-4 text-center max-w-lg mx-auto">
-            <KeyRound className="size-10 text-primary" />
-            <h2 className="text-xl font-bold">Pas encore membre ?</h2>
-            <p className="text-muted-foreground text-sm">
-                Votre compte n'est pas encore associé à une adhésion. Rejoignez l'association pour accéder aux services.
-            </p>
-            <Button variant="secondary" className="nb-shadow" onClick={() => router.visit('/formulaires/adhesion')}>
-                Adhérer au Retzien Libre
-            </Button>
-        </div>
-    );
-}
-
-function ServiceCard({ service, onRequest }: { service: DashboardService; onRequest: (identifier: string) => void }) {
-    const [alreadyRequested, setAlreadyRequested] = useState(() =>
-        getRequestedServices().includes(service.identifier),
-    );
-
-    function handleRequest() {
-        markServiceRequested(service.identifier);
-        setAlreadyRequested(true);
-        onRequest(service.identifier);
-    }
-
-    return (
-        <div className={cn(
-            'nb-shadow-static bg-white dark:bg-[#171717] rounded-2xl p-5 flex flex-col gap-3',
-            !service.is_active && 'opacity-80',
-        )}>
-            <div className="flex items-start justify-between gap-2">
-                <div>
-                    <h3 className="font-semibold text-base">{service.name}</h3>
-                    {service.description && (
-                        <p className="text-xs text-muted-foreground mt-0.5">{service.description}</p>
-                    )}
-                </div>
-                <span className={cn(
-                    'shrink-0 text-xs rounded-full px-2 py-0.5 font-medium border',
-                    service.is_active
-                        ? 'bg-green-100 text-green-800 border-green-300 dark:bg-green-900/20 dark:text-green-400 dark:border-green-700'
-                        : 'bg-gray-100 text-gray-600 border-gray-300 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600',
-                )}>
-                    {service.is_active ? 'Actif' : 'Inactif'}
-                </span>
-            </div>
-
-            {service.is_active ? (
-                <a
-                    href={service.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
-                >
-                    Accéder au service <ExternalLink className="size-3.5" />
-                </a>
-            ) : (
-                <Button
-                    variant="outline"
-                    size="sm"
-                    disabled={alreadyRequested}
-                    onClick={handleRequest}
-                    className="self-start text-xs"
-                >
-                    {alreadyRequested ? 'Demande envoyée' : 'Demander l\'activation'}
-                </Button>
-            )}
-        </div>
-    );
-}
-
 export default function Dashboard() {
     const { flash, member } = usePage<PageProps>().props;
     const [showFlash, setShowFlash] = useState(!!flash);
@@ -181,23 +55,11 @@ export default function Dashboard() {
                         <WelcomeCard member={member} />
 
                         {services.length > 0 && (
-                            <div className="flex flex-col gap-4">
-                                <h2 className="text-lg font-semibold">Vos services</h2>
-                                {submitting && (
-                                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                                        <Loader2 className="size-4 animate-spin" /> Envoi en cours…
-                                    </div>
-                                )}
-                                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                                    {services.map((service) => (
-                                        <ServiceCard
-                                            key={service.identifier}
-                                            service={service}
-                                            onRequest={handleActivationRequest}
-                                        />
-                                    ))}
-                                </div>
-                            </div>
+                            <ServicesSection
+                                services={services}
+                                submitting={submitting}
+                                onRequest={handleActivationRequest}
+                            />
                         )}
 
                         {services.length === 0 && membership && (
diff --git a/routes/dev-routes.php b/routes/dev-routes.php
index 966ae09..2b1351b 100644
--- a/routes/dev-routes.php
+++ b/routes/dev-routes.php
@@ -30,8 +30,6 @@ Route::get('/test-dolibarr', function () {
 });
 */
 
-
-
 // Test ISPConfig
 /*Route::get('/test/sync-ispconfig', function () {
 
@@ -54,3 +52,4 @@ Route::get('/test/isp-mails', function() {
     return $ispService->getAllMailDomains();
 });*/
 
+// Test info user on Front