diff --git a/src/04-dog-pics/DogPics.js b/src/04-dog-pics/DogPics.js
index cc64833..4d87ab2 100644
--- a/src/04-dog-pics/DogPics.js
+++ b/src/04-dog-pics/DogPics.js
@@ -1,9 +1,24 @@
+import { useState } from "react"
+
 export default function DogPics () {
-  // API: https://dog.ceo/dog-api/
+  const [imageURL,setImageURL] = useState("https://images.dog.ceo/breeds/spaniel-cocker/n02102318_4172.jpg");
+
+  const onButtonClick = () => {
+    try {
+      fetch("https://dog.ceo/api/breeds/image/random").then((response) => {
+        return response.json();
+      }).then((data) => {
+        setImageURL(data.message);
+      })
+    } catch (error) {
+      console.log(error.message);
+    }
+  }
+
   return (
     <div className='dog-pics'>
-      <img src='https://images.dog.ceo/breeds/spaniel-cocker/n02102318_4172.jpg' />
-      <button>🐶</button>
+      <img src={imageURL} width="40%" height={400} style={{objectFit: "contain"}} />
+      <button style={{cursor: "pointer"}} onClick={() => onButtonClick()}>🐶</button>
     </div>
   )
 }