diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
new file mode 100644
index 00000000..78ce372c
--- /dev/null
+++ b/app/courrier/page.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { MailToolbar } from "@/components/mail/mail-toolbar";
+import { MailList } from "@/components/mail/mail-list";
+import { useMail } from "@/hooks/use-mail";
+import { Mail } from "@/types/mail";
+
+export default function CourrierPage() {
+  const { data: session } = useSession();
+  const router = useRouter();
+  const { mails, loading, error, fetchMails } = useMail();
+  const [searchQuery, setSearchQuery] = useState("");
+
+  useEffect(() => {
+    if (!session) {
+      router.push("/signin");
+      return;
+    }
+
+    // Check if we have mail credentials
+    const mailCredentials = localStorage.getItem("mailCredentials");
+    if (mailCredentials) {
+      fetchMails();
+    }
+  }, [session, router, fetchMails]);
+
+  const handleRefresh = () => {
+    fetchMails();
+  };
+
+  const handleCompose = () => {
+    // TODO: Implement compose functionality
+  };
+
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+  };
+
+  const handleMailClick = (mail: Mail) => {
+    // TODO: Implement mail view functionality
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900"></div>
+          <p className="mt-4 text-gray-600">Chargement des courriers...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <div className="text-center">
+          <p className="text-red-600">Erreur: {error}</p>
+          <button
+            onClick={handleRefresh}
+            className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+          >
+            Réessayer
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-screen">
+      <MailToolbar
+        onRefresh={handleRefresh}
+        onCompose={handleCompose}
+        onSearch={handleSearch}
+      />
+      <div className="flex-1 overflow-auto">
+        <MailList
+          mails={mails}
+          onMailClick={handleMailClick}
+        />
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/main-nav.tsx b/components/main-nav.tsx
index bcd5c4b8..2486dc84 100644
--- a/components/main-nav.tsx
+++ b/components/main-nav.tsx
@@ -242,7 +242,7 @@ export function MainNav() {
               <PenLine className='w-5 h-5' />
               <span className="sr-only">Notes</span>
             </Link>
-            <Link href='/mail' className='text-white/80 hover:text-white'>
+            <Link href='/courrier' className='text-white/80 hover:text-white'>
               <Mail className='w-5 h-5' />
               <span className="sr-only">Courrier</span>
             </Link>
diff --git a/components/sidebar.tsx b/components/sidebar.tsx
index 760adcbd..6f7d8839 100644
--- a/components/sidebar.tsx
+++ b/components/sidebar.tsx
@@ -77,7 +77,7 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
     {
       title: "Courrier",
       icon: Mail,
-      href: "/mail",
+      href: "/courrier",
       iframe: "https://lab.slm-lab.net/courrier",
     },
     {