diff --git a/src/app/modules/home/my-quiz/my-quiz.component.css b/src/app/modules/home/my-quiz/my-quiz.component.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..206c1731ea4f7d43e4cb554d9af42d9957a6f725 100644
--- a/src/app/modules/home/my-quiz/my-quiz.component.css
+++ b/src/app/modules/home/my-quiz/my-quiz.component.css
@@ -0,0 +1,81 @@
+.container {
+    background-color: #2EC7FF;
+    height: 90vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    padding-inline: 10%;
+}
+
+.title {
+    font-size: 5vmax;
+    font-weight: bold;
+    margin: 0px;
+}
+
+/* Liste  */
+.scrollable-list {
+    height: 45%;
+    width: 100%;
+    overflow-y: auto; /* Ajoute une scrollbar verticale si nécessaire */
+    border: 4px solid #F3F3F3;
+    padding: 0;
+    border-radius: 10px;
+    background-color: #FFFFFF;
+
+}
+
+/* Optionnel: Personnalisation de la scrollbar */
+.scrollable-list::-webkit-scrollbar {
+    width: 10px;
+}
+
+.scrollable-list::-webkit-scrollbar-thumb {
+    background-color: #888;
+    border-radius: 5px;
+}
+
+.scrollable-list::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
+}
+
+input[type="radio"] {
+    display: none;
+}
+
+.radio-label > h3{
+    margin: 10px 5px 5px 5px;
+}
+
+.radio-label > p{
+    margin: 5px 5px 5px 10px;
+} 
+
+/* Style for the custom buttons */
+.radio-label {
+    display: flex;
+    width: 99%;
+    border: 2px solid #ccc;
+    cursor: pointer;
+    background-color: #f0f0f0;
+    transition: background-color 0.3s, border-color 0.3s;
+    background-color: #F3F3F3;
+    border-radius: 10px;
+    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+    flex-direction: column;
+    align-items: center;
+}
+
+input[type="radio"] + .radio-label:hover {
+    background-color: #e0e0e0;
+} 
+
+input[type="radio"]:checked + .radio-label {
+    color: #2B73FE;
+}
+
+.listeItem {
+    width: 99%;
+    padding-block: 1%;
+}
\ No newline at end of file
diff --git a/src/app/modules/home/my-quiz/my-quiz.component.html b/src/app/modules/home/my-quiz/my-quiz.component.html
index 87288db41d85328a0569a1b9a668f6c5ae7dd0eb..82a39a1adf6bbe06986169b65e3c66e31c0091dd 100644
--- a/src/app/modules/home/my-quiz/my-quiz.component.html
+++ b/src/app/modules/home/my-quiz/my-quiz.component.html
@@ -1 +1,49 @@
-<p>my-quiz works!</p>
+<div class="container">
+    <p class="title">My recent quiz</p>
+    <input type="search" class="inputRecherche">
+    <ul class="scrollable-list">
+        <li class="listeItem">
+            <input type="radio" id="option1" name="options" value="1">
+            <label for="option1" class="radio-label">
+                <h3>Video games</h3>
+                <p>12/20 Questions | Medium</p>
+            </label>
+        </li>
+        <li class="listeItem">
+            <input type="radio" id="option2" name="options" value="2">
+            <label for="option2" class="radio-label">
+                <h3>Video games</h3>
+                <p>12/20 Questions | Medium</p>
+            </label>
+        </li>
+        <li class="listeItem">
+            <input type="radio" id="option3" name="options" value="3">
+            <label for="option3" class="radio-label">
+                <h3>Video games</h3>
+                <p>12/20 Questions | Medium</p>
+            </label>
+        </li>
+        <li class="listeItem">
+            <input type="radio" id="option4" name="options" value="4">
+            <label for="option4" class="radio-label">
+                <h3>Video games</h3>
+                <p>12/20 Questions | Medium</p>
+            </label>
+        </li>
+        <li class="listeItem">
+            <input type="radio" id="option5" name="options" value="5">
+            <label for="option5" class="radio-label">
+                <h3>Video games</h3>
+                <p>12/20 Questions | Medium</p>
+            </label>
+        </li>
+        <li class="listeItem">
+            <input type="radio" id="option6" name="options" value="6">
+            <label for="option6" class="radio-label">
+                <h3>Video games</h3>
+                <p>12/20 Questions | Medium</p>
+            </label>
+        </li>
+    </ul>
+    <input type="submit" value="PLAY" class="blueButton"> 
+</div>
\ No newline at end of file
diff --git a/src/app/modules/home/my-quiz/my-quiz.component.ts b/src/app/modules/home/my-quiz/my-quiz.component.ts
index c12538f11817716242a6127056b975d40b55f69c..16d7ec7872dab082f93ce22d35f2ae47a23d1d1f 100644
--- a/src/app/modules/home/my-quiz/my-quiz.component.ts
+++ b/src/app/modules/home/my-quiz/my-quiz.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-my-quiz',
   templateUrl: './my-quiz.component.html',
-  styleUrl: './my-quiz.component.css'
+  styleUrls: ['./my-quiz.component.css', '../../../../styles.css'],
 })
 export class MyQuizComponent {
 
diff --git a/src/styles.css b/src/styles.css
index 2fc6469cbcfbfa9cca87036d5a7efc12eff60c52..917ccd3114c7d0533efbdaf9c272390b53b77840 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -25,7 +25,6 @@ body {
     border-style: solid;
     height: 100px;
     width: 100%;
-    margin: 2%;
 }
 
 .blueButton:hover {
@@ -43,7 +42,6 @@ body {
     border-style: solid;
     height: 100px;
     width: 100%;
-    margin: 2%;
 }
 
 .whiteButton:hover {
@@ -60,7 +58,7 @@ body {
     background-image: url("../public/magnificentGlass.png");
     background-repeat: no-repeat;
     background-position: calc(100% - 20px) center;
-    margin: 2%;
+    /* margin: 2%; */
     padding: 20px;
     font-size: 2vmin;
 }
\ No newline at end of file