diff --git a/src/components/marvel-characters.jsx b/src/components/marvel-characters.jsx
index 144b547..cbd5c72 100644
--- a/src/components/marvel-characters.jsx
+++ b/src/components/marvel-characters.jsx
@@ -28,7 +28,9 @@ export default function MarvelCharacters({ addToFavorites }) {
         const randomCharacters = data.data.results.sort(() => Math.random() - 1);
         setMarvelCharacter(randomCharacters);
       })
+      // eslint-disable-next-line no-console
       .catch((err) => console.error(err));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [MarvelCharacters]);
 
   const handleAddToFavorites = (character) => {
@@ -68,6 +70,7 @@ export default function MarvelCharacters({ addToFavorites }) {
       .then((data) => {
         setComics(data.data.results);
       })
+      // eslint-disable-next-line no-console
       .catch((err) => console.error(err));
   };
 
@@ -96,6 +99,7 @@ export default function MarvelCharacters({ addToFavorites }) {
         <button className='btn-right' onClick={handleNext} disabled={count >= 3}>
           {`>`}
         </button>
+
       </div>
       <div className='grid-box'>
         {displayedCharacters.map((character) => (
@@ -114,7 +118,6 @@ export default function MarvelCharacters({ addToFavorites }) {
             <Profile
               characterMarvel={selectedCharacter.name}
               img={`${selectedCharacter.thumbnail.path}.${selectedCharacter.thumbnail.extension}`}
-              title={selectedCharacter.title}
               description={selectedCharacter.description}
               comics={comics.filter((comic) => comic.description).slice(0, 5)}
             />
diff --git a/src/components/profile.jsx b/src/components/profile.jsx
index 9c958a4..c8de182 100644
--- a/src/components/profile.jsx
+++ b/src/components/profile.jsx
@@ -17,7 +17,7 @@ export default function Profile({ characterMarvel, img, description, comics }) {
                 {' '}
                 <strong>Bio :</strong>
               </h3>
-              <p>{description}</p>
+              <p>{description ? description : 'Description not available'}</p>
             </div>
           </div>
           <div className='comics-section'>
diff --git a/src/pages/favorite-page.jsx b/src/pages/favorite-page.jsx
index 7c45a6a..cc40d81 100644
--- a/src/pages/favorite-page.jsx
+++ b/src/pages/favorite-page.jsx
@@ -20,6 +20,7 @@ export default function FavoritePage({ favorites }) {
       .then((data) => {
         setComics(data.data.results.filter((comic) => comic.description));
       })
+      // eslint-disable-next-line no-console
       .catch((err) => console.error(err));
   };
 
diff --git a/src/style/card.scss b/src/style/card.scss
index b620068..7b68988 100644
--- a/src/style/card.scss
+++ b/src/style/card.scss
@@ -11,7 +11,7 @@
   padding-top: 20px;
 
   .card {
-    background-image: url(pictures/background-amended.jpg);
+    background-image: $background-image-comics;
     width: 170px;
     height: 293px;
     object-fit: cover;
@@ -98,7 +98,7 @@
       width: 150px;
 
       border: solid, $text-color;
-      background-color: black;
+      background-color: $background-card;
       opacity: 85%;
       height: 70px;
       // margin-top: 10px;
@@ -158,7 +158,6 @@
       display: flex;
       justify-content: center;
       align-items: end;
-      background-color: yellow;
     }
   }
 }
diff --git a/src/style/characters.scss b/src/style/characters.scss
index 0ba5163..a230cf3 100644
--- a/src/style/characters.scss
+++ b/src/style/characters.scss
@@ -15,23 +15,23 @@
     align-items: center;
     width: 100%;
     padding: 30px 0;
-    background-color: white;
+    background-color: $text-color;
     z-index: 200;
   }
 
   button.close-search {
     font-size: 22px bold;
-    border: 2px black solid;
+    border: 2px $background-card solid;
     border-radius: 20px;
     padding: 10px;
     background-color: transparent;
-    color: black;
+    color: $background-card;
     cursor: pointer;
 
     &:hover {
       cursor: pointer;
       filter: grayscale(0);
-      box-shadow: 6px 6px black;
+      box-shadow: 6px 6px $background-card;
       transform: translate(-2px, -2px);
     }
   }
@@ -58,21 +58,21 @@
     align-items: center;
     border:
       solid 4px,
-      white;
+      $text-color;
     border-radius: 8px;
     cursor: pointer;
 
     &:hover {
       cursor: pointer;
       filter: grayscale(0);
-      box-shadow: 6px 6px black;
+      box-shadow: 6px 6px $background-card;
       transform: translate(-2px, -2px);
     }
 
     .character-img {
       width: 150px;
       height: 150px;
-      border: solid 4px white;
+      border: solid 4px $text-color;
       border-radius: 8px;
     }
     .character-title {
@@ -81,8 +81,8 @@
       align-items: center;
       margin: 0 auto;
       width: 150px;
-      border: solid, white;
-      background-color: black;
+      border: solid, $text-color;
+      background-color: $background-card;
       opacity: 85%;
       height: 70px;
       margin-top: 10px;
@@ -90,7 +90,7 @@
     }
 
     h2 {
-      color: white;
+      color: $text-color;
       text-align: center;
       font-size: 0.7em;
       font-family: $font-family;
diff --git a/src/style/comics-display.scss b/src/style/comics-display.scss
index 8fbec68..28b4149 100644
--- a/src/style/comics-display.scss
+++ b/src/style/comics-display.scss
@@ -3,15 +3,20 @@
 .comics-display {
   font-family: $font-family;
   color: $text-color;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  // justify-content: center;
-  height: 76svh;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: 12%;
   background-color: $background-comics;
   max-width: 1000px;
   margin: 0.4% auto;
   overflow: hidden;
-  // transition: all 0.3sease;
+
+  //mobile
+  @media (max-width: 768px) {
+    flex-wrap: wrap;
+    gap: 10px;
+  }
 
   .comics-img {
     width: 67%;
@@ -22,10 +27,9 @@
       width: 100%;
       height: 100%;
       border-radius: 0.5rem;
-      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+      box-shadow: 0 0 10px 0 $background-comics;
       border-radius: 2.5rem;
-      border: 2px solid red;
-      margin: 1rem;
+      border: 1px solid $text-color;
     }
   }
 
@@ -34,7 +38,7 @@
     flex-direction: column;
     justify-content: left;
     width: 80%;
-    margin: 2.5rem 0;
+    padding: 2rem;
     height: 83%;
     gap: 2.5rem;
 
diff --git a/src/style/comics-page.scss b/src/style/comics-page.scss
index e40a4fa..bd8449e 100644
--- a/src/style/comics-page.scss
+++ b/src/style/comics-page.scss
@@ -4,10 +4,28 @@
   padding-top: 20px;
   padding-left: 20px;
 
+
+  .more {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 10px;
+
+    button {
+      background-color: $primary-color;
+      border: none;
+      color: $text-color;
+      padding: 10px 20px;
+      border-radius: 5px;
+      font-size: 1em;
+      font-weight: 700;
+      cursor: pointer;
+      margin-top: 45px;
+    }
+  }
   .typo-comics {
-    //Modification a faire pour desktop
-    background-color: #670208;
-    font-family: 'Aclonica', sans-serif;
+    background-color: $primary-color;
+    font-family: $font-family;
     width: 140px;
     font-size: 18px;
     padding: 14px;
@@ -18,21 +36,8 @@
     text-shadow: 3px 2px 8px black;
     text-align: center;
 
-    //Pour la MediaQuery
-    // background-color: #670208;
-    // font-family: "Aclonica", sans-serif;
-    // /* padding-top: 60px; */
-    // width: 140px;
-    // font-size: 18px;
-    // padding: 14px;
-    // border-radius: 10px;
-    // margin-left: 96px;
-    // color: white;
-    // box-shadow: 0px 2px 6px black;
-    // /* align-items: center; */
-    // /* justify-content: center; */
-    // text-shadow: 3px 2px 8px black;
-    // text-align: center;
+    
+
   }
   .comics {
     width: 100%;
@@ -48,7 +53,7 @@
       font-weight: 700;
       font-size: 1.2em;
       text-transform: lowercase;
-      color: black;
+      color: $background-card;
     }
 
     .comic-card {
@@ -61,7 +66,7 @@
       text-decoration: none;
       border:
         solid 4px,
-        white;
+        $text-color;
       border-radius: 8px;
 
       .caption {
@@ -70,9 +75,9 @@
         flex-wrap: wrap;
         justify-content: center;
         align-items: center;
-        color: white;
+        color: $text-color;
         text-align: center;
-        background-color: #0000004b;
+        background: $background-card;
         height: 100%;
 
         &.bottom {
@@ -81,7 +86,7 @@
           left: 50%;
           transform: translateX(-50%);
           opacity: 0;
-          color: white;
+          color: $text-color;
           text-decoration: underline;
           width: 60%;
         }
@@ -90,7 +95,7 @@
       &:hover {
         cursor: pointer;
         filter: grayscale(0);
-        box-shadow: 6px 6px black;
+        box-shadow: 6px 6px $background-card;
         transform: translate(-2px, -2px);
 
         .caption {
diff --git a/src/style/comics.scss b/src/style/comics.scss
index 276e20d..956c6a5 100644
--- a/src/style/comics.scss
+++ b/src/style/comics.scss
@@ -19,7 +19,7 @@
   text-decoration: none;
   border:
     solid 4px,
-    white;
+    $text-color;
   border-radius: 8px;
 
   .comics-title {
@@ -28,9 +28,9 @@
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
-    color: white;
+    color: $text-color;
     text-align: center;
-    background-color: #0000004b;
+    background-color: $background-card;
     height: 100%;
 
     h3 {
@@ -38,7 +38,7 @@
       font-weight: 700;
       font-size: 1em;
       text-transform: lowercase;
-      color: white;
+      color: $text-color;
       :hover {
         transition: all 0.2s linear;
       }
@@ -48,7 +48,7 @@
   &:hover {
     cursor: pointer;
     filter: grayscale(0);
-    box-shadow: 6px 6px black;
+    box-shadow: 6px 6px $background-card;
     transform: translate(-2px, -2px);
     transition: all 0.2s linear;
 
diff --git a/src/style/favorite-page.scss b/src/style/favorite-page.scss
index 459b4e7..0a82360 100644
--- a/src/style/favorite-page.scss
+++ b/src/style/favorite-page.scss
@@ -1,13 +1,13 @@
+@use 'settings.scss' as *;
 .favorite {
-  padding-top: 20px;
-  padding-left: 20px;
+  padding: 20px 0 0 20px;
 
   .favor {
     display: none;
   }
 
   .typo {
-    background-color: #670208;
+    background: $primary-color;
     font-family: 'Aclonica', sans-serif;
     padding-top: 60px;
     width: 240px;
@@ -15,9 +15,9 @@
     padding: 14px;
     border-radius: 10px;
     margin-left: 160px;
-    color: white;
-    box-shadow: 0px 2px 6px black;
+    color: $text-color;
+    box-shadow: 0px 2px 6px $background-card;
     align-items: center;
-    text-shadow: 3px 2px 8px black;
+    text-shadow: 3px 2px 8px $background-card;
   }
 }
diff --git a/src/style/footer.scss b/src/style/footer.scss
index fff4332..dc0eb78 100644
--- a/src/style/footer.scss
+++ b/src/style/footer.scss
@@ -1,4 +1,5 @@
 @use 'settings' as *;
+
 .footer {
   display: flex;
   flex-direction: row;
@@ -41,7 +42,7 @@
       font-size: clamp(16px, 2vw, 20px);
       text-decoration: none;
       list-style-type: none;
-      color: white;
+      color: $text-color;
       padding: 5px 10px;
 
       @media screen and (min-width: 301px) and (max-width: 644px) {
diff --git a/src/style/modal.scss b/src/style/modal.scss
index c371e40..6c2b71d 100644
--- a/src/style/modal.scss
+++ b/src/style/modal.scss
@@ -8,7 +8,7 @@
   right: 0;
   bottom: 0;
   z-index: 1000;
-  background: rgba(0, 0, 0, 0.5);
+  background: $background-comics;
 
   .modal-content {
     padding: 0 20px;
diff --git a/src/style/navbar.scss b/src/style/navbar.scss
index 4a8d70f..5bc83a3 100644
--- a/src/style/navbar.scss
+++ b/src/style/navbar.scss
@@ -19,7 +19,7 @@
     gap: 40px;
 
     .my-link {
-      color: white;
+      color: $text-color;
       text-decoration: none;
       display: flex;
     }
@@ -35,7 +35,7 @@
       display: flex;
       align-items: center;
       font-size: 22px;
-      color: white;
+      color: $text-color;
       font-family: $font-family;
       margin-left: 20px;
     }
@@ -56,11 +56,11 @@
       background-color: transparent;
       font-size: 20px;
       width: 140px;
-      color: white;
+      color: $text-color;
     }
 
     input::placeholder {
-      color: white;
+      color: $text-color;
     }
 
     input:focus {
diff --git a/src/style/not-found.scss b/src/style/not-found.scss
index d80b016..90a9ce4 100644
--- a/src/style/not-found.scss
+++ b/src/style/not-found.scss
@@ -1,26 +1,25 @@
-@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');
+@use 'settings.scss' as *;
 
 .notFound {
-  background: linear-gradient(#670208, #151414 25% 76%, #670208);
+  background: linear-gradient($primary-color, $not-found-color 25% 76%, $primary-color);
   height: 1100px;
   display: column;
   justify-content: center;
   align-items: center;
+  font-family: $font-family;
 
   h1 {
     display: flex;
     justify-content: center;
     font-size: 100px;
-    color: white;
+    color: $text-color;
     padding-top: 60px;
-    font-family: 'Aclonica', sans-serif;
   }
   h2 {
     display: flex;
     justify-content: center;
     font-size: 50px;
-    color: white;
-    font-family: 'Aclonica', sans-serif;
+    color: $text-color;
   }
   img {
     height: 450px;
@@ -50,13 +49,12 @@
   }
 
   p {
-    font-family: 'Aclonica', sans-serif;
     font-size: 50px;
-    color: white;
+    color: $text-color;
   }
 
   p:hover {
-    color: #670208;
+    color: $primary-color;
     transition: 0.4s;
   }
 
diff --git a/src/style/profile-page.scss b/src/style/profile-page.scss
index b45a9a0..7cac624 100644
--- a/src/style/profile-page.scss
+++ b/src/style/profile-page.scss
@@ -44,8 +44,12 @@
         }
       }
       .bio {
-        margin-left: 16%;
-        margin-top: 2%;
+        margin: 2% 0 0 10%;
+        border: 1px solid $background-card;
+        padding: 1rem;
+        border-radius: $border-radius;
+        background: $background-card;
+
         h3 {
           font-size: 3.3rem;
           font-family: $font-family;
diff --git a/src/style/search.scss b/src/style/search.scss
index 9e2fdcd..6d1605a 100644
--- a/src/style/search.scss
+++ b/src/style/search.scss
@@ -16,6 +16,6 @@ input {
   background-color: transparent;
   font-size: 22px;
   width: 100%;
-  color: black;
+  color: $background-card;
   outline: none;
 }
diff --git a/src/style/settings.scss b/src/style/settings.scss
index 8089059..feb2323 100644
--- a/src/style/settings.scss
+++ b/src/style/settings.scss
@@ -2,11 +2,12 @@
 
 $text-color: #f4f4f4;
 $background-image: url('/pictures/background.png');
-$background-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+$background-image-comics: url('/pictures/background-amended.jpg');
 $background-comics: rgba(0, 0, 0, 0.5);
 $background-card: #000000bf;
 $button-color-hover: rgb(32, 73, 211);
 $primary-color: #670208;
+$not-found-color: #151414;
 
 //border-radius
 $border-radius: 0.4rem;