diff --git a/src/routes/FavouriteHistoryPage.jsx b/src/routes/FavouriteHistoryPage.jsx
index f2e4ce5..6ab87b0 100644
--- a/src/routes/FavouriteHistoryPage.jsx
+++ b/src/routes/FavouriteHistoryPage.jsx
@@ -16,6 +16,30 @@ function FavouriteHistoryPage() {
   const getImages = async () => {
     try {
       // ### TO DO ###
+      const response = await axios.get(
+        `https://api.thecatapi.com/v1/favourites?sub_id=${userId}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_uJIAOk7Z9jClOkYFxqI4332RzBXawDl1l8L0n9wZehDHhuIW2a7rL92pd2AzyXCX",
+          },
+        }
+      );
+
+      const data = response.data;
+      const imageSet = [];
+
+      data.map((e) => {
+        imageSet.push({
+          id: e.image.id,
+          url: e.image.url,
+          isFavourite: true,
+          favouriteId: e.id,
+        });
+      });
+
+      setImages(imageSet);
       // #############
     } catch (err) {
       console.log(err);
diff --git a/src/routes/MainPage.jsx b/src/routes/MainPage.jsx
index 79be6bb..0dd732a 100644
--- a/src/routes/MainPage.jsx
+++ b/src/routes/MainPage.jsx
@@ -16,6 +16,31 @@ function HomePage() {
   const getImages = async () => {
     try {
       // ### TO DO ###
+      const response = await axios.get(
+        "https://api.thecatapi.com/v1/images/search?limit=8&size=small",
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_uJIAOk7Z9jClOkYFxqI4332RzBXawDl1l8L0n9wZehDHhuIW2a7rL92pd2AzyXCX",
+          },
+        }
+      );
+
+      const data = response.data;
+      console.log(data);
+      const imageSet = [];
+
+      data.map((e) => {
+        imageSet.push({
+          id: e.id,
+          url: e.url,
+          isFavourite: false,
+          favouriteId: null,
+        });
+      });
+      console.log(imageSet);
+      setImages(imageSet);
       // #############
     } catch (err) {
       console.log(err);
@@ -25,6 +50,27 @@ function HomePage() {
   const favouritingImage = async (imgId) => {
     try {
       // ### TO DO ###
+      const response = await axios.post(
+        "https://api.thecatapi.com/v1/favourites",
+        {
+          image_id: imgId,
+          sub_id: userId,
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_uJIAOk7Z9jClOkYFxqI4332RzBXawDl1l8L0n9wZehDHhuIW2a7rL92pd2AzyXCX",
+          },
+        }
+      );
+
+      const newImages = [...images];
+      const idx = newImages.findIndex((e) => e.id === imgId);
+      newImages[idx].isFavourite = true;
+      newImages[idx].favouriteId = response.data.id;
+
+      setImages(newImages);
       // #############
     } catch (err) {
       console.log(err);
@@ -34,6 +80,23 @@ function HomePage() {
   const unFavouritingImage = async (favouriteId) => {
     try {
       // ### TO DO ###
+      const newImages = [...images];
+      const idx = newImages.findIndex((e) => e.favouriteId === favouriteId);
+      newImages[idx].isFavourite = false;
+      newImages[idx].favouriteId = null;
+
+      setImages(newImages);
+
+      const response = await axios.delete(
+        `https://api.thecatapi.com/v1/favourites/${favouriteId}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_uJIAOk7Z9jClOkYFxqI4332RzBXawDl1l8L0n9wZehDHhuIW2a7rL92pd2AzyXCX",
+          },
+        }
+      );
       // #############
     } catch (err) {
       console.log(err);
diff --git a/src/routes/VoteHistoryPage.jsx b/src/routes/VoteHistoryPage.jsx
index 2f12755..be7297d 100644
--- a/src/routes/VoteHistoryPage.jsx
+++ b/src/routes/VoteHistoryPage.jsx
@@ -15,8 +15,19 @@ function VoteHistoryPage() {
 
   const getImages = async () => {
     try {
-      let response;
+      let response = await axios.get(
+        "https://api.thecatapi.com/v1/votes?limit=8&order=DESC",
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_uJIAOk7Z9jClOkYFxqI4332RzBXawDl1l8L0n9wZehDHhuIW2a7rL92pd2AzyXCX",
+          }
+        }
+      )
       // ### TO DO ###
+      console.log(response)
+
       // #############
       const data = response.data;
       const imageSet = [];
@@ -64,8 +75,9 @@ function VoteHistoryPage() {
               <img
                 key={img.url}
                 src={img.url}
-                className={`object-cover w-full h-full border-[3px] border-[#FF6841] rounded-xl 
+                className={`object-cover w-full h-full border-[3px] rounded-xl
                   ### FILL ME ### 
+                ${img.value > 0 ? "border-red-600" : "border-blue-600"}
                 `}
               />
             </div>
diff --git a/src/routes/VotePage.jsx b/src/routes/VotePage.jsx
index c77d27f..b2bac9c 100644
--- a/src/routes/VotePage.jsx
+++ b/src/routes/VotePage.jsx
@@ -7,6 +7,8 @@ function VotePage() {
   const navigate = useNavigate();
   const userId = getCookie("userId");
 
+  const [image, setImage] = useState();
+  const [voteId, setVoteId] = useState();
   const [thumbsUpImage, setThumbsUpImage] = useState(
     require("../assets/images/thumbs-up-icon.png")
   );
@@ -14,6 +16,32 @@ function VotePage() {
     require("../assets/images/thumbs-down-icon.png")
   );
 
+  const [clickThumbsUpImage, setClickThumbsUpImage] = useState(
+    require("../assets/images/thumbs-up-click.png")
+  );
+  const [clickThumbsDownImage, setClickThumbsDownImage] = useState(
+    require("../assets/images/thumbs-down-click.png")
+  );
+
+  const [isHoveringUp, setIsHoveringUp] = useState(false);
+  const [isHoveringDown, setIsHoveringDown] = useState(false);
+
+  const handleThumbsUpHover = () => {
+    setIsHoveringUp(true);
+  };
+
+  const handleThumbsUpLeave = () => {
+    setIsHoveringUp(false);
+  };
+
+  const handleThumbsDownHover = () => {
+    setIsHoveringDown(true);
+  };
+
+  const handleThumbsDownLeave = () => {
+    setIsHoveringDown(false);
+  };
+
   useEffect(() => {
     getImage();
   }, []);
@@ -21,6 +49,31 @@ function VotePage() {
   const getImage = async () => {
     try {
       // ### TO DO ###
+      const response = await axios.get(
+        "https://api.thecatapi.com/v1/images/search?limit=1&size=small",
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_uJIAOk7Z9jClOkYFxqI4332RzBXawDl1l8L0n9wZehDHhuIW2a7rL92pd2AzyXCX",
+          },
+        }
+      );
+      console.log(response);
+      const data = response.data;
+
+      const imageOne = data.map((e) => {
+        return e.url;
+      });
+
+      const voteIdOne = data.map((e) => {
+        return e.id;
+      });
+      console.log(voteIdOne);
+
+      setVoteId(voteIdOne);
+
+      setImage(imageOne);
       // #############
     } catch (err) {
       console.log(err);
@@ -30,7 +83,21 @@ function VotePage() {
   const vote = async (val) => {
     try {
       // ### TO DO ###
-      // #############
+      const response = await axios.post(
+        "https://api.thecatapi.com/v1/votes",
+        {
+          image_id: voteId,
+          sub_id: userId,
+          value: val,
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_uJIAOk7Z9jClOkYFxqI4332RzBXawDl1l8L0n9wZehDHhuIW2a7rL92pd2AzyXCX",
+          },
+        }
+      );
     } catch (err) {
       console.log(err);
     }
@@ -62,19 +129,24 @@ function VotePage() {
       <div className="w-2/3 h-2/3 py-2 border-4 rounded-2xl border-[#FF6841] flex justify-center items-center">
         <div className="w-full h-[90%] flex justify-evenly items-center">
           <img
-            // ### ONE CAT IMAGE ###
+            /* 여기 */
+            src={image}
             className="w-3/5 h-full border-[3px] rounded-xl border-[#FF6841]"
           />
           <div className="w-1/3 flex gap-12 justify-center">
             <img
-              src={thumbsUpImage}
+              src={isHoveringUp ? clickThumbsUpImage : thumbsUpImage}
               className="w-20 h-20 cursor-pointer"
-              // ### thumbsUpImage Event ###
+              onClick={() => vote(1)}
+              onMouseOver={handleThumbsUpHover}
+              onMouseOut={handleThumbsUpLeave}
             />
             <img
-              src={thumbsDownImage}
+              src={isHoveringDown ? clickThumbsDownImage : thumbsDownImage}
               className="w-20 h-20 cursor-pointer"
-              // ### thumbsDownImage Event ###
+              onClick={() => vote(-1)}
+              onMouseOver={handleThumbsDownHover}
+              onMouseOut={handleThumbsDownLeave}
             />
           </div>
         </div>