diff --git a/src/components/Card-List/CardList.css b/src/components/Card-List/CardList.css
index a1a2feb..8ac1dd0 100644
--- a/src/components/Card-List/CardList.css
+++ b/src/components/Card-List/CardList.css
@@ -3,5 +3,7 @@
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: repeat(auto-fill, minmax(375px, 1fr)); 
     grid-gap: 20px;
+    grid-auto-flow: row;
 } 
\ No newline at end of file
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
index e877746..d9b0330 100644
--- a/src/components/Card/Card.jsx
+++ b/src/components/Card/Card.jsx
@@ -3,7 +3,7 @@ import "./Card.css";
 
 export const Card = (props) => {
   return (
-    <div className="card-container">
+    <div className="card-container" tabIndex={0}>
       <img
         alt="monster"
         src={`https://robohash.org/${props.monster.id}?set=set2&size=180x180`}
diff --git a/src/components/search-box/searchBox.css b/src/components/search-box/searchBox.css
index 21fa568..edc6bbc 100644
--- a/src/components/search-box/searchBox.css
+++ b/src/components/search-box/searchBox.css
@@ -3,7 +3,9 @@
     border: none;
     outline: none;
     padding: 10px;
-    width: 150px;
+    min-width: 150px;
     line-height: 30px;
     margin-bottom: 30px;
+    border-radius: 10px;
+    font-size: 1rem;
 }
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index f7fc149..445c434 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,6 +10,7 @@ body {
     rgba(7, 27, 82, 1) 0%,
     rgba(0, 128, 128, 1) 100%
   );
+  overflow-y: scroll;
 }
 
 code {