diff --git a/src/index.css b/src/index.css
index 1d2d1c2..f7d7591 100644
--- a/src/index.css
+++ b/src/index.css
@@ -17,16 +17,17 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-
-
+@media screen and (max-width: 768px) {
+  .content{
+    padding: 0.7rem;
+    z-index:1;
+  }
+}
 .content {
   padding: 1.5rem;
   z-index: 1;
 }
 
-
-
-
 a {
   font-weight: 500;
   color: #646cff;
diff --git a/src/pages/Login/LoginPage.module.css b/src/pages/Login/LoginPage.module.css
index fc62d28..fd5d61d 100644
--- a/src/pages/Login/LoginPage.module.css
+++ b/src/pages/Login/LoginPage.module.css
@@ -9,6 +9,7 @@
     align-items: center;
     padding: 20px;
     border-radius:12px;
+    margin-left: 33.3%;
 }
 
 
diff --git a/src/pages/Profile/ProfilePage.jsx b/src/pages/Profile/ProfilePage.jsx
new file mode 100644
index 0000000..c38328f
--- /dev/null
+++ b/src/pages/Profile/ProfilePage.jsx
@@ -0,0 +1,110 @@
+import React, { useState } from "react";
+import styles from "./ProfilePage.module.css";
+
+function Event({ title,date, tasks }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <div className={`${styles.event} glassCard`}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+         <div style={{display:'flex', flexDirection:'column'}}>
+          <h3>{title}</h3>
+          <p style={{ fontSize: '0.8rem', color: '#666', margin: '0 0 0 0' }}>{date}</p>
+        </div>
+        <button
+          onClick={toggleExpand}
+          style={{
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            fontSize: '1.2rem',
+          }}
+        >
+          {isExpanded ? '▼' : '▶'}
+        </button>
+      </div>
+      <ul
+        className={`${styles.eventTasks} ${isExpanded ? styles.expanded : ''}`}
+      >
+        {tasks.map((task, index) => (
+          <li key={index}>-- {task}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+
+function ProfilePage() {
+  return (
+    <div className={styles.container}>
+      <div className={`${styles.profileboard} glassCard`}>
+        <div className={styles.contentWrapper}>
+          <div className={styles.profilePictureContainer}>
+            <img
+              src="../src/assets/react.svg"
+              alt="Photo de profil"
+              className={styles.profilePicture}
+            />
+          </div>
+          <div className={styles.description}>
+            <h2>LEBLOND Malo</h2>
+            <div className={styles.topDescription}>
+              <div className={styles.infoBlock}>
+                <p><strong>Role :</strong> Président</p>
+                <p><strong>Membre depuis :</strong> 2019</p>
+              </div>
+              <div className={styles.infoBlock}>
+                <p><strong>Mail :</strong> mailpro@gmail.com</p>
+                <p><strong>Téléphone :</strong> 08 67 87 32 21</p>
+              </div>
+              <button href="/../UpdateProfile.jsx">M</button>
+            </div>
+            <h2>Vos Événements :</h2>
+            <Event
+              title="Titre event 1"
+              date="04/11/2025"
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
+            />
+            <Event
+              title="Titre event 2"
+              date="04/11/2025"
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
+            />
+            <Event
+              title="Titre event 3"
+              date="04/11/2025"
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
+            />
+            <Event
+              title="Titre event 4"
+              date="04/11/2025"
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
+            />
+            <Event
+              title="Titre event 5"
+              date="04/11/2025"
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
+            />
+            <Event
+              title="Titre event 6"
+              date="04/11/2025"
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
+            />
+            <Event
+              title="Titre event 7"
+              date="04/11/2025"
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ProfilePage;
diff --git a/src/pages/Profile/ProfilePage.module.css b/src/pages/Profile/ProfilePage.module.css
new file mode 100644
index 0000000..54569c6
--- /dev/null
+++ b/src/pages/Profile/ProfilePage.module.css
@@ -0,0 +1,158 @@
+.container {
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.profileboard {
+  width: 100%;
+  padding: 15px;
+  border-radius: 10px;
+  box-sizing: border-box;
+}
+
+.contentWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.profilePictureContainer {
+  width: 120px;
+  height: 120px;
+  margin-bottom: 15px;
+}
+
+.profilePicture {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.description {
+  width: 100%;
+  text-align: left;
+  margin-left:4%;
+}
+
+.topDescription {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.infoBlock {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.1);
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.event {
+  width: 100%;
+  padding: 12px;
+  margin-bottom: 10px;
+  border-radius: 8px;
+}
+
+.eventTasks {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out, opacity 0.2s ease;
+  opacity: 0;
+  padding-left: 20px;
+}
+
+.eventTasks.expanded {
+  max-height: 500px;
+  opacity: 1;
+  margin-top: 10px;
+}
+.description h2{
+    font-size:30px;
+    margin-bottom: 2%;
+}
+.profilePicture{
+    width:90%;
+  }
+/* Tablette (768px et plus) */
+@media screen and (min-width: 768px) {
+  .contentWrapper {
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+
+  .profilePictureContainer {
+    width: 150px;
+    height: 150px;
+    margin-right: 20px;
+    margin-bottom: 0;
+  }
+
+  .description {
+    width: calc(100% - 170px);
+    margin-left:4%;
+  }
+
+  .topDescription {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .infoBlock {
+    width: 48%;
+  }
+
+  .event {
+    padding: 15px;
+  }
+  .description h2{
+    font-size:30px;
+    margin-bottom: 2%;
+}
+.profilePicture{
+    width:90%;
+  }
+}
+.description button{
+    width:50px;
+    height:50px;
+    
+}
+
+/* Desktop (1024px et plus) */
+@media screen and (min-width: 1024px) {
+  .container {
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  .profileboard {
+    padding: 25px;
+  }
+
+  .profilePictureContainer {
+    width: 30%;
+    height:auto;
+  }
+  .profilePicture{
+    width:90%;
+  }
+  .description {
+    width: calc(100% - 200px);
+    margin-left:4%;
+  }
+
+  .event {
+    padding: 18px;
+  }
+  .description h2{
+    font-size:30px;
+    margin-bottom: 2%;
+}
+}
diff --git a/src/router.js b/src/router.js
index 557cd66..5a4e1aa 100644
--- a/src/router.js
+++ b/src/router.js
@@ -3,6 +3,7 @@ import Layout from "./layout.jsx";
 import HomePage from "./pages/Home/HomePage";
 import LoginPage from "./pages/Login/LoginPage";
 import VolunteersPage from "./pages/Volunteers/VolunteersPage";
+import ProfilePage from "./pages/Profile/ProfilePage";
 import EventsPage from "./pages/Events/EventsPage.jsx";
 
 
@@ -19,6 +20,10 @@ const router = createBrowserRouter([
                 path: "/login",
                 Component: LoginPage,
             },
+            {
+                path:"/profile",
+                Component:ProfilePage,
+            },
             {
                 path: "/events",
                 Component: EventsPage,