diff --git a/src/features/admin/pages/ProfilePage.client.js b/src/features/admin/pages/ProfilePage.client.js
index 925c116..b75344e 100644
--- a/src/features/admin/pages/ProfilePage.client.js
+++ b/src/features/admin/pages/ProfilePage.client.js
@@ -1,142 +1,83 @@
 'use client';
 
 import { registerPage } from '../registry.js';
-import React, { useState, useEffect, useRef } from 'react';
-import { Card, Input, Button } from '@zen/core/shared/components';
+import { useState, useEffect, useRef } from 'react';
+import { Card, Input, Button, TabNav, UserAvatar } from '@zen/core/shared/components';
 import { useToast } from '@zen/core/toast';
 import AdminHeader from '../components/AdminHeader.js';
 
+const TABS = [
+    { id: 'informations', label: 'Informations' },
+    { id: 'photo', label: 'Photo de profil' },
+];
+
 const ProfilePage = ({ user: initialUser }) => {
     const toast = useToast();
+    const fileInputRef = useRef(null);
+    const [activeTab, setActiveTab] = useState('informations');
     const [user, setUser] = useState(initialUser);
     const [loading, setLoading] = useState(false);
     const [uploadingImage, setUploadingImage] = useState(false);
-    const [imagePreview, setImagePreview] = useState(null);
-    const fileInputRef = useRef(null);
-    const [formData, setFormData] = useState({
-        name: initialUser?.name || ''
-    });
-
-    // Helper function to get image URL from storage key
-    const getImageUrl = (imageKey) => {
-        if (!imageKey) return null;
-        return `/zen/api/storage/${imageKey}`;
-    };
+    const [formData, setFormData] = useState({ name: initialUser?.name || '' });
 
     useEffect(() => {
-        if (initialUser) {
-            setFormData({
-                name: initialUser.name || ''
-            });
-            setImagePreview(getImageUrl(initialUser.image));
-        }
+        if (initialUser) setFormData({ name: initialUser.name || '' });
     }, [initialUser]);
 
-    const handleChange = (value) => {
-        setFormData(prev => ({
-            ...prev,
-            name: value
-        }));
-    };
+    const hasChanges = formData.name !== user?.name;
 
     const handleSubmit = async (e) => {
         e.preventDefault();
-        
         if (!formData.name.trim()) {
             toast.error('Le nom est requis');
             return;
         }
-
         setLoading(true);
-
         try {
             const response = await fetch('/zen/api/users/profile', {
                 method: 'PUT',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
+                headers: { 'Content-Type': 'application/json' },
                 credentials: 'include',
-                body: JSON.stringify({
-                    name: formData.name.trim()
-                })
+                body: JSON.stringify({ name: formData.name.trim() }),
             });
-
             const data = await response.json();
-
-            if (!response.ok || !data.success) {
-                throw new Error(data.error || 'Échec de la mise à jour du profil');
-            }
-
+            if (!response.ok || !data.success) throw new Error(data.error || 'Échec de la mise à jour du profil');
             setUser(data.user);
             toast.success('Profil mis à jour avec succès');
-            
-            // Refresh the page to update the user data in the header
-            setTimeout(() => {
-                window.location.reload();
-            }, 1000);
+            setTimeout(() => window.location.reload(), 1000);
         } catch (error) {
-            console.error('Error updating profile:', error);
             toast.error(error.message || 'Échec de la mise à jour du profil');
         } finally {
             setLoading(false);
         }
     };
 
-    const handleReset = () => {
-        setFormData({
-            name: user?.name || ''
-        });
-    };
-
     const handleImageSelect = async (e) => {
         const file = e.target.files?.[0];
         if (!file) return;
-
-        // Validate file type
         if (!file.type.startsWith('image/')) {
             toast.error('Veuillez sélectionner un fichier image');
             return;
         }
-
-        // Validate file size (5MB)
         if (file.size > 5 * 1024 * 1024) {
             toast.error("L'image doit faire moins de 5MB");
             return;
         }
-
-        // Show preview
-        const reader = new FileReader();
-        reader.onloadend = () => {
-            setImagePreview(reader.result);
-        };
-        reader.readAsDataURL(file);
-
-        // Upload image
         setUploadingImage(true);
         try {
-            const formData = new FormData();
-            formData.append('file', file);
-
+            const body = new FormData();
+            body.append('file', file);
             const response = await fetch('/zen/api/users/profile/picture', {
                 method: 'POST',
                 credentials: 'include',
-                body: formData
+                body,
             });
-
             const data = await response.json();
-
-            if (!response.ok || !data.success) {
-                throw new Error(data.message || 'Échec du téléchargement de l\'image');
-            }
-
+            if (!response.ok || !data.success) throw new Error(data.message || "Échec du téléchargement de l'image");
             setUser(data.user);
-            setImagePreview(getImageUrl(data.user.image));
             toast.success('Photo de profil mise à jour avec succès');
         } catch (error) {
-            console.error('Error uploading image:', error);
-            toast.error(error.message || 'Échec du téléchargement de l\'image');
-            // Revert preview on error
-            setImagePreview(getImageUrl(user?.image));
+            toast.error(error.message || "Échec du téléchargement de l'image");
         } finally {
             setUploadingImage(false);
         }
@@ -144,79 +85,103 @@ const ProfilePage = ({ user: initialUser }) => {
 
     const handleRemoveImage = async () => {
         if (!user?.image) return;
-
         setUploadingImage(true);
         try {
             const response = await fetch('/zen/api/users/profile/picture', {
                 method: 'DELETE',
-                credentials: 'include'
+                credentials: 'include',
             });
-
             const data = await response.json();
-
-            if (!response.ok || !data.success) {
-                throw new Error(data.message || 'Échec de la suppression de l\'image');
-            }
-
+            if (!response.ok || !data.success) throw new Error(data.message || "Échec de la suppression de l'image");
             setUser(data.user);
-            setImagePreview(null);
             toast.success('Photo de profil supprimée avec succès');
         } catch (error) {
-            console.error('Error removing image:', error);
-            toast.error(error.message || 'Échec de la suppression de l\'image');
+            toast.error(error.message || "Échec de la suppression de l'image");
         } finally {
             setUploadingImage(false);
         }
     };
 
-    const getUserInitials = (name) => {
-        if (!name) return 'U';
-        return name
-            .split(' ')
-            .map(n => n[0])
-            .join('')
-            .toUpperCase()
-            .slice(0, 2);
-    };
-
-    const hasChanges = formData.name !== user?.name;
-
     return (
         <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
             <AdminHeader title="Mon profil" description="Gérez les informations de votre compte" />
 
-            {/* Content */}
-            <div className="flex flex-col gap-6">
-            <Card>
-                <div className="space-y-4">
-                    <h2 className="text-lg font-semibold text-neutral-900 dark:text-white">
-                        Photo de profil
-                    </h2>
-                    <div className="flex items-center gap-6">
-                        <div className="relative">
-                            {imagePreview ? (
-                                <img
-                                    src={imagePreview}
-                                    alt="Profile"
-                                    className="w-24 h-24 rounded-full object-cover border-2 border-neutral-300 dark:border-neutral-700"
-                                />
-                            ) : (
-                                <div className="w-24 h-24 bg-gradient-to-br from-neutral-200 to-neutral-300 dark:from-neutral-800 dark:to-neutral-700 rounded-full flex items-center justify-center border-2 border-neutral-300 dark:border-neutral-700">
-                                    <span className="text-neutral-700 dark:text-white font-semibold text-2xl">
-                                        {getUserInitials(user?.name)}
-                                    </span>
-                                </div>
-                            )}
-                            {uploadingImage && (
-                                <div className="absolute inset-0 bg-black/50 rounded-full flex items-center justify-center">
-                                    <div className="w-8 h-8 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
-                                </div>
-                            )}
+            <div className="flex flex-col gap-6 items-start">
+                <TabNav tabs={TABS} activeTab={activeTab} onTabChange={setActiveTab} />
+
+                {activeTab === 'informations' && (
+                    <Card
+                        title="Informations personnelles"
+                        className="min-w-3/5"
+                        footer={
+                            <div className="flex items-center justify-end gap-3">
+                                <Button
+                                    type="button"
+                                    variant="secondary"
+                                    onClick={() => setFormData({ name: user?.name || '' })}
+                                    disabled={loading || !hasChanges}
+                                >
+                                    Réinitialiser
+                                </Button>
+                                <Button
+                                    type="submit"
+                                    variant="primary"
+                                    disabled={loading || !hasChanges}
+                                    loading={loading}
+                                    onClick={handleSubmit}
+                                >
+                                    Enregistrer les modifications
+                                </Button>
+                            </div>
+                        }
+                    >
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <Input
+                                label="Nom complet"
+                                type="text"
+                                value={formData.name}
+                                onChange={(value) => setFormData(prev => ({ ...prev, name: value }))}
+                                placeholder="Entrez votre nom complet"
+                                required
+                                disabled={loading}
+                            />
+                            <Input
+                                label="Courriel"
+                                type="email"
+                                value={user?.email || ''}
+                                disabled
+                                readOnly
+                                description="L'email ne peut pas être modifié"
+                            />
+                            <Input
+                                label="Compte créé"
+                                type="text"
+                                value={user?.created_at ? new Date(user.created_at).toLocaleDateString('fr-FR', {
+                                    year: 'numeric',
+                                    month: 'long',
+                                    day: 'numeric',
+                                }) : 'N/D'}
+                                disabled
+                                readOnly
+                            />
                         </div>
-                        <div className="flex flex-col gap-2">
-                            <p className="text-sm text-neutral-400">
-                                Téléchargez une nouvelle photo de profil. Taille max 5MB.
-                            </p>
+                    </Card>
+                )}
+
+                {activeTab === 'photo' && (
+                    <Card title="Photo de profil" className="min-w-3/5">
+                        <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                            Téléchargez une nouvelle photo de profil. Taille max 5MB.
+                        </p>
+                        <div className="flex items-center gap-6">
+                            <div className="relative shrink-0">
+                                <UserAvatar user={user} size="xl" />
+                                {uploadingImage && (
+                                    <div className="absolute inset-0 bg-black/50 rounded-full flex items-center justify-center">
+                                        <div className="w-8 h-8 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                                    </div>
+                                )}
+                            </div>
                             <div className="flex gap-2">
                                 <input
                                     ref={fileInputRef}
@@ -233,10 +198,10 @@ const ProfilePage = ({ user: initialUser }) => {
                                 >
                                     {uploadingImage ? 'Téléchargement...' : 'Télécharger une image'}
                                 </Button>
-                                {imagePreview && (
+                                {user?.image && (
                                     <Button
                                         type="button"
-                                        variant="secondary"
+                                        variant="danger"
                                         onClick={handleRemoveImage}
                                         disabled={uploadingImage}
                                     >
@@ -245,76 +210,8 @@ const ProfilePage = ({ user: initialUser }) => {
                                 )}
                             </div>
                         </div>
-                    </div>
-                </div>
-            </Card>
-
-            <Card>
-                <form onSubmit={handleSubmit} className="space-y-6">
-                    <div className="space-y-4">
-                        <h2 className="text-lg font-semibold text-neutral-900 dark:text-white">
-                            Informations personnelles
-                        </h2>
-                        
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <Input
-                                label="Nom complet"
-                                type="text"
-                                value={formData.name}
-                                onChange={handleChange}
-                                placeholder="Entrez votre nom complet"
-                                required
-                                disabled={loading}
-                            />
-
-                            <Input
-                                label="Courriel"
-                                name="email"
-                                type="email"
-                                value={user?.email || ''}
-                                disabled
-                                readOnly
-                                description="L'email ne peut pas être modifié"
-                            />
-                        </div>
-
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <Input
-                                label="Compte créé"
-                                name="createdAt"
-                                type="text"
-                                value={user?.created_at ? new Date(user.created_at).toLocaleDateString('fr-FR', {
-                                    year: 'numeric',
-                                    month: 'long',
-                                    day: 'numeric'
-                                }) : 'N/D'}
-                                disabled
-                                readOnly
-                            />
-                        </div>
-                    </div>
-
-                    {/* Action Buttons */}
-                    <div className="flex items-center justify-end gap-3 pt-4 border-t border-neutral-200 dark:border-neutral-700/50">
-                        <Button
-                            type="button"
-                            variant="secondary"
-                            onClick={handleReset}
-                            disabled={loading || !hasChanges}
-                        >
-                            Réinitialiser
-                        </Button>
-                        <Button
-                            type="submit"
-                            variant="primary"
-                            disabled={loading || !hasChanges}
-                            loading={loading}
-                        >
-                            {loading ? 'Enregistrement...' : 'Enregistrer les modifications'}
-                        </Button>
-                    </div>
-                </form>
-            </Card>
+                    </Card>
+                )}
             </div>
         </div>
     );
diff --git a/src/shared/components/UserAvatar.js b/src/shared/components/UserAvatar.js
index 60e1aba..9f0ca80 100644
--- a/src/shared/components/UserAvatar.js
+++ b/src/shared/components/UserAvatar.js
@@ -13,6 +13,8 @@ const getUserInitials = (name) => {
 const sizeMap = {
     sm: { wrapper: 'w-[26px] h-[26px]', text: 'text-[10px]' },
     md: { wrapper: 'w-8 h-8', text: 'text-[11px]' },
+    lg: { wrapper: 'w-16 h-16', text: 'text-xl' },
+    xl: { wrapper: 'w-24 h-24', text: 'text-2xl' },
 };
 
 const UserAvatar = ({ user, size = 'md' }) => {