diff --git a/src/components/marvel-characters.jsx b/src/components/marvel-characters.jsx
index e580d72..7dbb5d6 100644
--- a/src/components/marvel-characters.jsx
+++ b/src/components/marvel-characters.jsx
@@ -26,7 +26,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) => {
@@ -62,6 +64,7 @@ export default function MarvelCharacters({ addToFavorites }) {
       .then((data) => {
         setComics(data.data.results);
       })
+      // eslint-disable-next-line no-console
       .catch((err) => console.error(err));
   };
 
@@ -85,9 +88,7 @@ export default function MarvelCharacters({ addToFavorites }) {
     <div className='characters-comics'>
       <div className='pagination'>
         <button onClick={handlePrev}>prev</button>
-        <button onClick={handleNext} disabled={(currentPage + 1) * charactersPerPage >= marvelCharacter.length}>
-          next
-        </button>
+        <button onClick={handleNext}>next</button>
       </div>
       <div className='grid-box'>
         {displayedCharacters.map((character) => (
@@ -106,7 +107,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 757ef2e..eb54221 100644
--- a/src/components/profile.jsx
+++ b/src/components/profile.jsx
@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom';
 
 import '../style/profile-page.scss';
 
-export default function Profile({ characterMarvel, img, title, description, comics }) {
+export default function Profile({ characterMarvel, img, description, comics }) {
   return (
     <div className='profile'>
       <div className='comics-characters'>
@@ -17,7 +17,7 @@ export default function Profile({ characterMarvel, img, title, description, comi
                 {' '}
                 <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 022947e..11c724b 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;
@@ -159,7 +159,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 e879d63..2042660 100644
--- a/src/style/comics-page.scss
+++ b/src/style/comics-page.scss
@@ -11,9 +11,9 @@
     top: 10px;
 
     button {
-      background-color: #670208;
+      background-color: $primary-color;
       border: none;
-      color: white;
+      color: $text-color;
       padding: 10px 20px;
       border-radius: 5px;
       font-size: 1em;
@@ -23,20 +23,17 @@
     }
   }
   .typo-comics {
-    background-color: #670208;
-    font-family: 'Aclonica', sans-serif;
-    padding-top: 60px;
+    background-color: $primary-color;
+    font-family: $font-family;
     width: 140px;
     font-size: 18px;
     padding: 14px;
     border-radius: 10px;
     margin-left: 157px;
-    color: white;
-    box-shadow: 0px 2px 6px black;
-    align-items: center;
-    justify-content: center;
-    text-shadow: 3px 2px 8px black;
-    display: flex;
+    color: $text-color;
+    text-align: center;
+    box-shadow: 0px 2px 6px $background-card;
+    text-shadow: 3px 2px 8px $background-card;
   }
 }
 .comics {
@@ -61,7 +58,7 @@
       font-weight: 700;
       font-size: 1.2em;
       text-transform: lowercase;
-      color: black;
+      color: $background-card;
     }
 
     .comic-card {
@@ -74,7 +71,7 @@
       text-decoration: none;
       border:
         solid 4px,
-        white;
+        $text-color;
       border-radius: 8px;
 
       .caption {
@@ -83,9 +80,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 {
@@ -94,7 +91,7 @@
           left: 50%;
           transform: translateX(-50%);
           opacity: 0;
-          color: white;
+          color: $text-color;
           text-decoration: underline;
           width: 60%;
         }
@@ -103,7 +100,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 bd8e14f..f1721a2 100644
--- a/src/style/profile-page.scss
+++ b/src/style/profile-page.scss
@@ -41,8 +41,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;