diff --git a/src/app/gif-mood/[id]/page.tsx b/src/app/gif-mood/[id]/page.tsx
index 1bff752..eb30361 100644
--- a/src/app/gif-mood/[id]/page.tsx
+++ b/src/app/gif-mood/[id]/page.tsx
@@ -29,7 +29,7 @@ export default async function GifMoodSessionPage({ params }: GifMoodSessionPageP
   const userTeams = await getUserTeams(authSession.user.id);
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
+    <main className="mx-auto max-w-7xl px-4">
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-2 text-sm text-muted mb-2">
diff --git a/src/app/gif-mood/new/page.tsx b/src/app/gif-mood/new/page.tsx
index e86ea00..c5a4926 100644
--- a/src/app/gif-mood/new/page.tsx
+++ b/src/app/gif-mood/new/page.tsx
@@ -20,7 +20,8 @@ export default function NewGifMoodPage() {
   const [error, setError] = useState<string | null>(null);
   const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
   const [title, setTitle] = useState(
-    () => `GIF Mood - ${new Date().toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}`
+    () =>
+      `GIF Mood - ${new Date().toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}`
   );
 
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
@@ -48,11 +49,11 @@ export default function NewGifMoodPage() {
   }
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-8">
+    <main className="mx-auto max-w-2xl px-4">
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
-            <span>🎭</span>
+            <span>🎞️</span>
             Nouveau GIF Mood Board
           </CardTitle>
           <CardDescription>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ff4e3eb..d4a65c6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -46,7 +46,9 @@ export default function RootLayout({
         <Providers>
           <div className="min-h-screen bg-background">
             <Header />
-            {children}
+            <div className="py-6">
+              {children}
+            </div>
           </div>
         </Providers>
       </body>
diff --git a/src/app/motivators/[id]/page.tsx b/src/app/motivators/[id]/page.tsx
index 355d5e8..269615b 100644
--- a/src/app/motivators/[id]/page.tsx
+++ b/src/app/motivators/[id]/page.tsx
@@ -31,7 +31,7 @@ export default async function MotivatorSessionPage({ params }: MotivatorSessionP
   }
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
+    <main className="mx-auto max-w-7xl px-4">
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-2 text-sm text-muted mb-2">
diff --git a/src/app/motivators/new/page.tsx b/src/app/motivators/new/page.tsx
index ed18583..3d17103 100644
--- a/src/app/motivators/new/page.tsx
+++ b/src/app/motivators/new/page.tsx
@@ -46,7 +46,7 @@ export default function NewMotivatorSessionPage() {
   }
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-8">
+    <main className="mx-auto max-w-2xl px-4">
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
diff --git a/src/app/objectives/page.tsx b/src/app/objectives/page.tsx
index 2e2d36e..f317dbd 100644
--- a/src/app/objectives/page.tsx
+++ b/src/app/objectives/page.tsx
@@ -2,7 +2,7 @@ import { auth } from '@/lib/auth';
 import { redirect } from 'next/navigation';
 import Link from 'next/link';
 import { getUserOKRs } from '@/services/okrs';
-import { Card } from '@/components/ui';
+import { Card, PageHeader } from '@/components/ui';
 import { ObjectivesList } from '@/components/okrs/ObjectivesList';
 import { comparePeriods } from '@/lib/okr-utils';
 
@@ -31,17 +31,12 @@ export default async function ObjectivesPage() {
   const periods = Object.keys(okrsByPeriod).sort(comparePeriods);
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
-      {/* Header */}
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-foreground flex items-center gap-2">
-          <span className="text-3xl">🎯</span>
-          Mes Objectifs
-        </h1>
-        <p className="mt-2 text-muted">
-          Suivez la progression de vos OKRs à travers toutes vos équipes
-        </p>
-      </div>
+    <main className="mx-auto max-w-7xl px-4">
+      <PageHeader
+        emoji="🎯"
+        title="Mes Objectifs"
+        subtitle="Suivez la progression de vos OKRs à travers toutes vos équipes"
+      />
 
       {okrs.length === 0 ? (
         <Card className="p-12 text-center">
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 500910b..4371799 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,7 +4,7 @@ import { WORKSHOPS, getSessionsTabUrl } from '@/lib/workshops';
 export default function Home() {
   return (
     <>
-      <main className="mx-auto max-w-7xl px-4 py-12">
+      <main className="mx-auto max-w-7xl px-4">
         {/* Hero Section */}
         <section className="mb-16 text-center">
           <h1 className="mb-4 text-5xl font-bold text-foreground">
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 8abfd7f..2ada295 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -19,18 +19,19 @@ export default async function ProfilePage() {
   }
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-8">
-      <div className="mb-8 flex items-center gap-6">
+    <main className="mx-auto max-w-2xl px-4">
+      <div className="mb-8 flex items-center gap-5">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={getGravatarUrl(user.email, 160)}
           alt={user.name || user.email}
-          width={80}
-          height={80}
-          className="rounded-full border-2 border-border"
+          width={72}
+          height={72}
+          className="rounded-full border-2 border-border shrink-0"
         />
         <div>
-          <h1 className="text-3xl font-bold text-foreground">Mon Profil</h1>
-          <p className="mt-1 text-muted">Gérez vos informations personnelles</p>
+          <h1 className="text-3xl font-bold tracking-tight text-foreground">Mon Profil</h1>
+          <p className="mt-1.5 text-sm text-muted">Gérez vos informations personnelles</p>
         </div>
       </div>
 
diff --git a/src/app/sessions/[id]/page.tsx b/src/app/sessions/[id]/page.tsx
index 8b572c6..ee9a130 100644
--- a/src/app/sessions/[id]/page.tsx
+++ b/src/app/sessions/[id]/page.tsx
@@ -31,7 +31,7 @@ export default async function SessionPage({ params }: SessionPageProps) {
   }
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
+    <main className="mx-auto max-w-7xl px-4">
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-2 text-sm text-muted mb-2">
diff --git a/src/app/sessions/new/page.tsx b/src/app/sessions/new/page.tsx
index a56082e..a886e2c 100644
--- a/src/app/sessions/new/page.tsx
+++ b/src/app/sessions/new/page.tsx
@@ -56,7 +56,7 @@ export default function NewSessionPage() {
   }
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-8">
+    <main className="mx-auto max-w-2xl px-4">
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
diff --git a/src/app/sessions/page.tsx b/src/app/sessions/page.tsx
index 177d6f3..e5980a2 100644
--- a/src/app/sessions/page.tsx
+++ b/src/app/sessions/page.tsx
@@ -24,7 +24,7 @@ import {
   getGifMoodSessionsByUserId,
   getTeamCollaboratorSessionsForAdmin as getTeamGifMoodSessions,
 } from '@/services/gif-mood';
-import { Card } from '@/components/ui';
+import { Card, PageHeader } from '@/components/ui';
 import { withWorkshopType } from '@/lib/workshops';
 import { WorkshopTabs } from './WorkshopTabs';
 import { NewWorkshopDropdown } from './NewWorkshopDropdown';
@@ -113,22 +113,17 @@ export default async function SessionsPage() {
   const totalCount = allSessions.length;
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8 sm:py-12">
-      {/* Header */}
-      <div className="mb-10 flex flex-col sm:flex-row sm:items-end justify-between gap-6">
-        <div>
-          <div className="flex items-center gap-3 mb-1.5">
-            <h1 className="text-3xl font-bold tracking-tight text-foreground">Mes Ateliers</h1>
-            {totalCount > 0 && (
-              <span className="inline-flex items-center justify-center px-2.5 h-6 rounded-full bg-primary/10 text-primary text-sm font-semibold">
-                {totalCount}
-              </span>
-            )}
-          </div>
-          <p className="text-sm text-muted">Tous vos ateliers en un seul endroit</p>
-        </div>
-        <NewWorkshopDropdown />
-      </div>
+    <main className="mx-auto max-w-7xl px-4">
+      <PageHeader
+        emoji="🗂️"
+        title="Mes Ateliers"
+        subtitle={
+          totalCount > 0
+            ? `${totalCount} atelier${totalCount > 1 ? 's' : ''} · Tous vos ateliers en un seul endroit`
+            : 'Tous vos ateliers en un seul endroit'
+        }
+        actions={<NewWorkshopDropdown />}
+      />
 
       {/* Content */}
       {hasNoSessions ? (
diff --git a/src/app/teams/[id]/okrs/[okrId]/edit/page.tsx b/src/app/teams/[id]/okrs/[okrId]/edit/page.tsx
index e5b8036..5c2a9aa 100644
--- a/src/app/teams/[id]/okrs/[okrId]/edit/page.tsx
+++ b/src/app/teams/[id]/okrs/[okrId]/edit/page.tsx
@@ -121,7 +121,7 @@ export default function EditOKRPage() {
 
   if (loading) {
     return (
-      <main className="mx-auto max-w-4xl px-4 py-8">
+      <main className="mx-auto max-w-4xl px-4">
         <div className="text-center">Chargement...</div>
       </main>
     );
@@ -129,7 +129,7 @@ export default function EditOKRPage() {
 
   if (!okr) {
     return (
-      <main className="mx-auto max-w-4xl px-4 py-8">
+      <main className="mx-auto max-w-4xl px-4">
         <div className="text-center">OKR non trouvé</div>
       </main>
     );
@@ -147,7 +147,7 @@ export default function EditOKRPage() {
   };
 
   return (
-    <main className="mx-auto max-w-4xl px-4 py-8">
+    <main className="mx-auto max-w-4xl px-4">
       <div className="mb-6">
         <Link href={`/teams/${teamId}/okrs/${okrId}`} className="text-muted hover:text-foreground">
           ← Retour à l&apos;OKR
diff --git a/src/app/teams/[id]/okrs/[okrId]/page.tsx b/src/app/teams/[id]/okrs/[okrId]/page.tsx
index 8ccbfef..eea8486 100644
--- a/src/app/teams/[id]/okrs/[okrId]/page.tsx
+++ b/src/app/teams/[id]/okrs/[okrId]/page.tsx
@@ -124,7 +124,7 @@ export default function OKRDetailPage() {
 
   if (loading) {
     return (
-      <main className="mx-auto max-w-4xl px-4 py-8">
+      <main className="mx-auto max-w-4xl px-4">
         <div className="text-center">Chargement...</div>
       </main>
     );
@@ -132,7 +132,7 @@ export default function OKRDetailPage() {
 
   if (!okr) {
     return (
-      <main className="mx-auto max-w-4xl px-4 py-8">
+      <main className="mx-auto max-w-4xl px-4">
         <div className="text-center">OKR non trouvé</div>
       </main>
     );
@@ -145,7 +145,7 @@ export default function OKRDetailPage() {
   const canDelete = okr.permissions?.canDelete ?? false;
 
   return (
-    <main className="mx-auto max-w-4xl px-4 py-8">
+    <main className="mx-auto max-w-4xl px-4">
       <div className="mb-6">
         <Link href={`/teams/${teamId}`} className="text-muted hover:text-foreground">
           ← Retour à l&apos;équipe
diff --git a/src/app/teams/[id]/okrs/new/page.tsx b/src/app/teams/[id]/okrs/new/page.tsx
index 22f9d8d..07cff6f 100644
--- a/src/app/teams/[id]/okrs/new/page.tsx
+++ b/src/app/teams/[id]/okrs/new/page.tsx
@@ -54,14 +54,14 @@ export default function NewOKRPage() {
 
   if (loading) {
     return (
-      <main className="mx-auto max-w-4xl px-4 py-8">
+      <main className="mx-auto max-w-4xl px-4">
         <div className="text-center">Chargement...</div>
       </main>
     );
   }
 
   return (
-    <main className="mx-auto max-w-4xl px-4 py-8">
+    <main className="mx-auto max-w-4xl px-4">
       <div className="mb-6">
         <Link href={`/teams/${teamId}`} className="text-muted hover:text-foreground">
           ← Retour à l&apos;équipe
diff --git a/src/app/teams/[id]/page.tsx b/src/app/teams/[id]/page.tsx
index 852898c..fdf9f7e 100644
--- a/src/app/teams/[id]/page.tsx
+++ b/src/app/teams/[id]/page.tsx
@@ -39,7 +39,7 @@ export default async function TeamDetailPage({ params }: TeamDetailPageProps) {
   const okrsData = await getTeamOKRs(id);
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
+    <main className="mx-auto max-w-7xl px-4">
       {/* Header */}
       <div className="mb-8">
         <div className="mb-4 flex items-center gap-2">
diff --git a/src/app/teams/new/page.tsx b/src/app/teams/new/page.tsx
index 125ffd3..2b1158a 100644
--- a/src/app/teams/new/page.tsx
+++ b/src/app/teams/new/page.tsx
@@ -48,7 +48,7 @@ export default function NewTeamPage() {
   };
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-8">
+    <main className="mx-auto max-w-2xl px-4">
       <div className="mb-6">
         <Link href="/teams" className="text-muted hover:text-foreground">
           ← Retour aux équipes
diff --git a/src/app/teams/page.tsx b/src/app/teams/page.tsx
index 0270e73..6702e36 100644
--- a/src/app/teams/page.tsx
+++ b/src/app/teams/page.tsx
@@ -2,7 +2,7 @@ import { auth } from '@/lib/auth';
 import { redirect } from 'next/navigation';
 import Link from 'next/link';
 import { TeamCard } from '@/components/teams';
-import { Button } from '@/components/ui';
+import { Button, PageHeader } from '@/components/ui';
 import { getUserTeams } from '@/services/teams';
 
 export default async function TeamsPage() {
@@ -15,23 +15,19 @@ export default async function TeamsPage() {
   const teams = await getUserTeams(session.user.id);
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
-      {/* Header */}
-      <div className="mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-        <div>
-          <h1 className="text-3xl font-bold text-foreground">Équipes</h1>
-          <p className="mt-1 text-muted">
-            {teams.length} équipe{teams.length !== 1 ? 's' : ''}
-          </p>
-        </div>
-        <div>
+    <main className="mx-auto max-w-7xl px-4">
+      <PageHeader
+        emoji="👥"
+        title="Équipes"
+        subtitle={`${teams.length} équipe${teams.length !== 1 ? 's' : ''} · Collaborez et définissez vos OKRs`}
+        actions={
           <Link href="/teams/new">
             <Button className="bg-[var(--purple)] text-white hover:opacity-90 border-transparent">
               Créer une équipe
             </Button>
           </Link>
-        </div>
-      </div>
+        }
+      />
 
       {/* Teams Grid */}
       {teams.length > 0 ? (
diff --git a/src/app/users/page.tsx b/src/app/users/page.tsx
index 5864e0b..9c2303a 100644
--- a/src/app/users/page.tsx
+++ b/src/app/users/page.tsx
@@ -2,6 +2,7 @@ import { auth } from '@/lib/auth';
 import { redirect } from 'next/navigation';
 import { getAllUsersWithStats } from '@/services/auth';
 import { getGravatarUrl } from '@/lib/gravatar';
+import { PageHeader } from '@/components/ui';
 
 function formatRelativeTime(date: Date): string {
   const now = new Date();
@@ -33,15 +34,12 @@ export default async function UsersPage() {
   const avgSessionsPerUser = users.length > 0 ? totalSessions / users.length : 0;
 
   return (
-    <main className="mx-auto max-w-6xl px-4 py-8">
-      {/* Header */}
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-foreground">Utilisateurs</h1>
-        <p className="mt-1 text-muted">
-          {users.length} utilisateur{users.length > 1 ? 's' : ''} inscrit
-          {users.length > 1 ? 's' : ''}
-        </p>
-      </div>
+    <main className="mx-auto max-w-6xl px-4">
+      <PageHeader
+        emoji="🧑‍💻"
+        title="Utilisateurs"
+        subtitle={`${users.length} utilisateur${users.length > 1 ? 's' : ''} inscrit${users.length > 1 ? 's' : ''} · Vue d'ensemble de la communauté`}
+      />
 
       {/* Global Stats */}
       <div className="mb-8 grid grid-cols-2 gap-4 sm:grid-cols-4">
diff --git a/src/app/weather/[id]/page.tsx b/src/app/weather/[id]/page.tsx
index bab39a9..8a1eb44 100644
--- a/src/app/weather/[id]/page.tsx
+++ b/src/app/weather/[id]/page.tsx
@@ -45,7 +45,7 @@ export default async function WeatherSessionPage({ params }: WeatherSessionPageP
   ]);
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
+    <main className="mx-auto max-w-7xl px-4">
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-2 text-sm text-muted mb-2">
diff --git a/src/app/weather/new/page.tsx b/src/app/weather/new/page.tsx
index 98488c3..a5572d6 100644
--- a/src/app/weather/new/page.tsx
+++ b/src/app/weather/new/page.tsx
@@ -63,7 +63,7 @@ export default function NewWeatherPage() {
   }
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-8">
+    <main className="mx-auto max-w-2xl px-4">
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
diff --git a/src/app/weekly-checkin/[id]/page.tsx b/src/app/weekly-checkin/[id]/page.tsx
index 8cc1f5f..04af55f 100644
--- a/src/app/weekly-checkin/[id]/page.tsx
+++ b/src/app/weekly-checkin/[id]/page.tsx
@@ -47,7 +47,7 @@ export default async function WeeklyCheckInSessionPage({ params }: WeeklyCheckIn
   }
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
+    <main className="mx-auto max-w-7xl px-4">
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-2 text-sm text-muted mb-2">
diff --git a/src/app/weekly-checkin/new/page.tsx b/src/app/weekly-checkin/new/page.tsx
index f6b41de..2ebbcb1 100644
--- a/src/app/weekly-checkin/new/page.tsx
+++ b/src/app/weekly-checkin/new/page.tsx
@@ -66,7 +66,7 @@ export default function NewWeeklyCheckInPage() {
   }
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-8">
+    <main className="mx-auto max-w-2xl px-4">
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
diff --git a/src/app/year-review/[id]/page.tsx b/src/app/year-review/[id]/page.tsx
index c413c18..8c18227 100644
--- a/src/app/year-review/[id]/page.tsx
+++ b/src/app/year-review/[id]/page.tsx
@@ -31,7 +31,7 @@ export default async function YearReviewSessionPage({ params }: YearReviewSessio
   }
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
+    <main className="mx-auto max-w-7xl px-4">
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-2 text-sm text-muted mb-2">
diff --git a/src/app/year-review/new/page.tsx b/src/app/year-review/new/page.tsx
index 2a2fcf6..9f74430 100644
--- a/src/app/year-review/new/page.tsx
+++ b/src/app/year-review/new/page.tsx
@@ -49,7 +49,7 @@ export default function NewYearReviewPage() {
   }
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-8">
+    <main className="mx-auto max-w-2xl px-4">
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
diff --git a/src/components/ui/PageHeader.tsx b/src/components/ui/PageHeader.tsx
new file mode 100644
index 0000000..b0d1b20
--- /dev/null
+++ b/src/components/ui/PageHeader.tsx
@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+
+interface PageHeaderProps {
+  emoji: string;
+  title: string;
+  subtitle?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+}
+
+export function PageHeader({ emoji, title, subtitle, actions, className }: PageHeaderProps) {
+  return (
+    <div className={`mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-4 ${className ?? ''}`}>
+      <div>
+        <h1 className="flex items-center gap-3 text-3xl font-bold tracking-tight text-foreground">
+          <span className="text-3xl leading-none">{emoji}</span>
+          {title}
+        </h1>
+        {subtitle && <p className="mt-1.5 text-sm text-muted">{subtitle}</p>}
+      </div>
+      {actions && <div className="shrink-0">{actions}</div>}
+    </div>
+  );
+}
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index cb2dea2..2192064 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -9,6 +9,7 @@ export { EditableMotivatorTitle } from './EditableMotivatorTitle';
 export { EditableYearReviewTitle } from './EditableYearReviewTitle';
 export { EditableWeeklyCheckInTitle } from './EditableWeeklyCheckInTitle';
 export { EditableWeatherTitle } from './EditableWeatherTitle';
+export { PageHeader } from './PageHeader';
 export { Input } from './Input';
 export { ParticipantInput } from './ParticipantInput';
 export { Modal, ModalFooter } from './Modal';