diff --git a/.gitignore b/.gitignore
index 1ac7d6a..3479b2b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,7 +5,7 @@
 /node_modules
 /.pnp
 .pnp.js
-/JsonData
+../src/JsonData
 # testing
 /coverage
 
diff --git a/src/component/Slider.js b/src/component/Slider.js
index f76606b..9bfad30 100644
--- a/src/component/Slider.js
+++ b/src/component/Slider.js
@@ -23,10 +23,11 @@ const Slider = () => {
   },[]);
   return (
     <div className="container">
+      
       <div className="left-btn">
         <button onClick={handlePre}>{"<"}</button>
       </div>
-      <img src={data[next]?.download_url} alt="img1"></img>
+      <img src={data[next]?.download_url} alt="image-not-found"></img>
       <div className="right-btn">
         <button onClick={handleNext}>{">"}</button>
       </div>
diff --git a/src/index.css b/src/index.css
index 73d1ff5..8773ec7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,16 +13,32 @@ code {
 }
 img{
   width: 100%;
-  height: 500px;
+  height:auto;
 }
 
 .left-btn, .right-btn{
   position: absolute;
   top: 50%;
+  transform: translateY(300%);
 }
 .left-btn{
   left: 20px;
+  
 }
 .right-btn{
   right: 20px;
-}
\ No newline at end of file
+}
+button{
+  height: 20px;
+  width: 30px;
+  background-color: rgba(0, 0, 0, 0);
+  color: black;
+  border: none;
+  font-size: 125%;
+}
+button:hover{
+  color: white;
+}
+@media (max-width: 768px) {
+   .left-btn, .right-btn { top: 40%;  } 
+  }
\ No newline at end of file