diff --git a/src/components/Members/Home.tsx b/src/components/Members/Home.tsx
index 991066d..ccb1215 100644
--- a/src/components/Members/Home.tsx
+++ b/src/components/Members/Home.tsx
@@ -1,7 +1,81 @@
-export default function Home() {
+import { FaCog } from "react-icons/fa";
+
+function User() {
   return (
-    <>
-      <h1 className="text-2xl font-bold leading-9 tracking-tight text-gray-900">Bienvenue sur votre espace membre</h1>
-    </>
+    <div className="flex items-center p-4 border-b-2 border-gray-200 max-h-[6rem]">
+      <img src="https://placekitten.com/200/200" alt="Profile" className="rounded-full border-2 border-gray-200 h-full" />
+      <p className="ml-2 text-center flex-grow">John Doe</p>
+    </div>
+  )
+}
+
+function Channels() {
+  const channels = ["Discussion", "Nature", "Portrait", "Architecture"];
+
+  return (
+    <div className="flex flex-col flex-grow border-b-2 border-b-gray-200">
+      <div className="flex justify-between items-center p-4">
+        <p className="flex-grow text-gray-500 font-medium text-xl">
+          Canaux
+        </p>
+        <button className="px-2 py-1 transition-all text-gray-400 hover:text-gray-500 hover:bg-gray-100 text-xl border border-gray-300 rounded-sm">+</button>
+      </div>
+      <ul>
+        {channels.map((channel) => (
+          <li className="p-2 hover:bg-gray-100 cursor-pointer text-xl flex items-center" key={channel}>
+            <p className="flex-grow">
+              <span className="text-gray-400">#</span> {channel}
+            </p>
+            <FaCog className="transition hover:text-gray-700" />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function UserPersonnalLinks() {
+  return (
+    <div className="flex flex-col border-b-2 border-b-gray-200 h-fit">
+      <p className="text-xl hover:bg-gray-100 cursor-pointer px-4 py-2">Galerie personelle</p>
+    </div>
+  )
+}
+
+function SiteManagement() {
+  return (
+    <div className="flex flex-col">
+      <p className="text-xl text-gray-500 mb-1 p-4">Gestion du site</p>
+      <p className="text-xl hover:bg-gray-100 cursor-pointer px-4 py-2">Membres</p>
+      <p className="text-xl hover:bg-gray-100 cursor-pointer px-4 py-2">Pages</p>
+      <p className="text-xl hover:bg-gray-100 cursor-pointer px-4 py-2">Galeries</p>
+    </div>
+  )
+}
+
+function LeftPanel() {
+  return (
+    <div className="w-1/5 border-r-2 border-gray-200 flex flex-col">
+      <User />
+      <Channels />
+      <UserPersonnalLinks />
+      <SiteManagement />
+    </div>
+  )
+}
+
+function Chat() {
+  return (
+    <div className="w-full">
+    </div>
+  )
+}
+
+export default function Home() {
+  return (
+    <div className="flex min-h-full flex-grow">
+      <LeftPanel />
+      <Chat />
+    </div>
   )
 }
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 261e601..918d6b9 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,15 +1,17 @@
 ---
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
+
 interface Props {
 	title: string;
+	footer?: boolean;
 }
 
-const { title } = Astro.props;
+const { title, footer = true } = Astro.props;
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="fr">
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="description" content="Astro description" />
@@ -18,9 +20,9 @@ const { title } = Astro.props;
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 	</head>
-	<body>
+	<body class="min-h-[100vh] flex flex-col">
 		<Header />
 		<slot />
-		<Footer />
+		{footer && <Footer />}
 	</body>
 </html>
diff --git a/src/pages/espace-membres.astro b/src/pages/espace-membres.astro
index 86b0c00..42d6da3 100644
--- a/src/pages/espace-membres.astro
+++ b/src/pages/espace-membres.astro
@@ -1,9 +1,12 @@
 ---
 import Layout from '../layouts/Layout.astro';
-// import Login from '../components/Login.tsx'
 import EspaceMembres from '../components/EspaceMembres.tsx';
 ---
-<Layout title="Espace membres">
-  <!-- <Login client:only="preact"/> -->
+<Layout title="Espace membres" footer={false}>
   <EspaceMembres client:only="preact"/>
+<style>
+footer {
+  display: none;
+}
+</style>
 </Layout>
