diff --git a/src/routes/FavouriteHistoryPage.jsx b/src/routes/FavouriteHistoryPage.jsx
index f2e4ce5..760e041 100644
--- a/src/routes/FavouriteHistoryPage.jsx
+++ b/src/routes/FavouriteHistoryPage.jsx
@@ -15,8 +15,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_kQOoJ0Uf7sfgdZjO0kywH1mSu52d8kGfCFpy2uraLk4RC8LzWS3D2Jx6GLBB88Rg",
+          },
+        }
+      );
+
+      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..7a368d3 100644
--- a/src/routes/MainPage.jsx
+++ b/src/routes/MainPage.jsx
@@ -15,8 +15,30 @@ 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_kQOoJ0Uf7sfgdZjO0kywH1mSu52d8kGfCFpy2uraLk4RC8LzWS3D2Jx6GLBB88Rg",
+          },
+        }
+      );
+
+      const data = response.data;
+      const imageSet = [];
+
+      data.map((e) => {
+        imageSet.push({
+          id: e.id,
+          url: e.url,
+          isFavourite: false,
+          favouriteId: null,
+        });
+      });
+
+      setImages(imageSet);
     } catch (err) {
       console.log(err);
     }
@@ -24,8 +46,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_kQOoJ0Uf7sfgdZjO0kywH1mSu52d8kGfCFpy2uraLk4RC8LzWS3D2Jx6GLBB88Rg",
+          },
+        }
+      );
+
+      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);
     }
@@ -33,8 +74,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_kQOoJ0Uf7sfgdZjO0kywH1mSu52d8kGfCFpy2uraLk4RC8LzWS3D2Jx6GLBB88Rg",
+          },
+        }
+      );
     } catch (err) {
       console.log(err);
     }
diff --git a/src/routes/VoteHistoryPage.jsx b/src/routes/VoteHistoryPage.jsx
index 2f12755..10868ba 100644
--- a/src/routes/VoteHistoryPage.jsx
+++ b/src/routes/VoteHistoryPage.jsx
@@ -16,6 +16,16 @@ function VoteHistoryPage() {
   const getImages = async () => {
     try {
       let response;
+      response = await axios.get(
+        `https://api.thecatapi.com/v1/votes?sub_id=${userId}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_kQOoJ0Uf7sfgdZjO0kywH1mSu52d8kGfCFpy2uraLk4RC8LzWS3D2Jx6GLBB88Rg",
+          },
+        }
+      );
       // ### TO DO ###
       // #############
       const data = response.data;
@@ -64,8 +74,9 @@ function VoteHistoryPage() {
               <img
                 key={img.url}
                 src={img.url}
-                className={`object-cover w-full h-full border-[3px] border-[#FF6841] rounded-xl 
-                  ### FILL ME ### 
+                className={`object-cover w-full h-full border-[3px] ${
+                  img.value > 0 ? "border-blue-500" : "border-red-500"
+                } rounded-xl 
                 `}
               />
             </div>
diff --git a/src/routes/VotePage.jsx b/src/routes/VotePage.jsx
index c77d27f..f539049 100644
--- a/src/routes/VotePage.jsx
+++ b/src/routes/VotePage.jsx
@@ -6,6 +6,7 @@ import { getCookie } from "../utils/cookie";
 function VotePage() {
   const navigate = useNavigate();
   const userId = getCookie("userId");
+  const [images, setImages] = useState("");
 
   const [thumbsUpImage, setThumbsUpImage] = useState(
     require("../assets/images/thumbs-up-icon.png")
@@ -20,22 +21,64 @@ function VotePage() {
 
   const getImage = async () => {
     try {
-      // ### TO DO ###
-      // #############
+      const response = await axios.get(
+        "https://api.thecatapi.com/v1/images/search?limit=1&size=full",
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_kQOoJ0Uf7sfgdZjO0kywH1mSu52d8kGfCFpy2uraLk4RC8LzWS3D2Jx6GLBB88Rg",
+          },
+        }
+      );
+
+      const data = response.data;
+      setImages(data[0]);
     } catch (err) {
       console.log(err);
     }
   };
 
   const vote = async (val) => {
+    // val: up or down
     try {
-      // ### TO DO ###
-      // #############
+      const response = await axios.post(
+        "https://api.thecatapi.com/v1/votes",
+        {
+          image_id: images.id,
+          sub_id: userId,
+          value: val,
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_kQOoJ0Uf7sfgdZjO0kywH1mSu52d8kGfCFpy2uraLk4RC8LzWS3D2Jx6GLBB88Rg",
+          },
+        }
+      );
+      getImage();
     } catch (err) {
       console.log(err);
     }
   };
 
+  const handleThumbsUpHover = () => {
+    setThumbsUpImage(require("../assets/images/thumbs-up-click.png"));
+  };
+
+  const handleThumbsUpLeave = () => {
+    setThumbsUpImage(require("../assets/images/thumbs-up-icon.png"));
+  };
+
+  const handleThumbsDownHover = () => {
+    setThumbsDownImage(require("../assets/images/thumbs-down-click.png"));
+  };
+
+  const handleThumbsDownLeave = () => {
+    setThumbsDownImage(require("../assets/images/thumbs-down-icon.png"));
+  };
+
   return (
     <div className="w-full h-screen flex flex-col justify-center items-center gap-10">
       <div className="absolute top-[5%] right-[16%] flex gap-5">
@@ -61,20 +104,30 @@ 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 ###
-            className="w-3/5 h-full border-[3px] rounded-xl border-[#FF6841]"
-          />
+          {images ? (
+            <img
+              src={images.url}
+              className="w-3/5 h-full border-[3px] rounded-xl border-[#FF6841]"
+            />
+          ) : (
+            <div></div>
+          )}
           <div className="w-1/3 flex gap-12 justify-center">
             <img
               src={thumbsUpImage}
               className="w-20 h-20 cursor-pointer"
               // ### thumbsUpImage Event ###
+              onMouseOver={handleThumbsUpHover}
+              onMouseOut={handleThumbsUpLeave}
+              onClick={() => vote(1)}
             />
             <img
               src={thumbsDownImage}
               className="w-20 h-20 cursor-pointer"
               // ### thumbsDownImage Event ###
+              onMouseOver={handleThumbsDownHover}
+              onMouseOut={handleThumbsDownLeave}
+              onClick={() => vote(-1)}
             />
           </div>
         </div>