diff --git a/src/routes/FavouriteHistoryPage.jsx b/src/routes/FavouriteHistoryPage.jsx
index f2e4ce5..14f09a0 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_Iyhi1ILrF0FD1vlsdHpX4CYBM37yG1ZXsUjP58Jx4Wov7qsp27cZmsuBjMt0HYVo",
+          },
+        }
+      );
+
+      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..739c2f1 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_Iyhi1ILrF0FD1vlsdHpX4CYBM37yG1ZXsUjP58Jx4Wov7qsp27cZmsuBjMt0HYVo",
+          },
+        }
+      );
+
+      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_GKblu8slVg2fFDula9hfgUUWLXlaX6aCWLZpv8pAyFb6Cyhxzq9CkhlwW88Erb0z",
+          },
+        }
+      );
+
+      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_GKblu8slVg2fFDula9hfgUUWLXlaX6aCWLZpv8pAyFb6Cyhxzq9CkhlwW88Erb0z",
+          },
+        }
+      );
     } catch (err) {
       console.log(err);
     }
diff --git a/src/routes/VoteHistoryPage.jsx b/src/routes/VoteHistoryPage.jsx
index 2f12755..673eefd 100644
--- a/src/routes/VoteHistoryPage.jsx
+++ b/src/routes/VoteHistoryPage.jsx
@@ -15,9 +15,13 @@ function VoteHistoryPage() {
 
   const getImages = async () => {
     try {
-      let response;
-      // ### TO DO ###
-      // #############
+      let response = await axios.get("https://api.thecatapi.com/v1/votes", {
+        headers: {
+          "Content-Type": "application/json",
+          "x-api-key":
+            "live_Iyhi1ILrF0FD1vlsdHpX4CYBM37yG1ZXsUjP58Jx4Wov7qsp27cZmsuBjMt0HYVo",
+        },
+      });
       const data = response.data;
       const imageSet = [];
 
@@ -65,7 +69,7 @@ function VoteHistoryPage() {
                 key={img.url}
                 src={img.url}
                 className={`object-cover w-full h-full border-[3px] border-[#FF6841] rounded-xl 
-                  ### FILL ME ### 
+                ${img.value === 1 ? "border-red-500" : "border-blue-500"}
                 `}
               />
             </div>
diff --git a/src/routes/VotePage.jsx b/src/routes/VotePage.jsx
index c77d27f..5acb720 100644
--- a/src/routes/VotePage.jsx
+++ b/src/routes/VotePage.jsx
@@ -6,7 +6,7 @@ import { getCookie } from "../utils/cookie";
 function VotePage() {
   const navigate = useNavigate();
   const userId = getCookie("userId");
-
+  const [image, setImage] = useState({});
   const [thumbsUpImage, setThumbsUpImage] = useState(
     require("../assets/images/thumbs-up-icon.png")
   );
@@ -20,8 +20,24 @@ 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_Iyhi1ILrF0FD1vlsdHpX4CYBM37yG1ZXsUjP58Jx4Wov7qsp27cZmsuBjMt0HYVo",
+          },
+        }
+      );
+
+      const data = response.data;
+      setImage({
+        id: data[0].id,
+        url: data[0].url,
+        isFavorite: false,
+        favoriteId: null,
+      });
     } catch (err) {
       console.log(err);
     }
@@ -29,8 +45,21 @@ function VotePage() {
 
   const vote = async (val) => {
     try {
-      // ### TO DO ###
-      // #############
+      const response = await axios.post(
+        "https://api.thecatapi.com/v1/votes",
+        {
+          image_id: image.id,
+          sub_id: userId,
+          value: val,
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_Iyhi1ILrF0FD1vlsdHpX4CYBM37yG1ZXsUjP58Jx4Wov7qsp27cZmsuBjMt0HYVo",
+          },
+        }
+      );
     } catch (err) {
       console.log(err);
     }
@@ -63,6 +92,7 @@ function VotePage() {
         <div className="w-full h-[90%] flex justify-evenly items-center">
           <img
             // ### ONE CAT IMAGE ###
+            src={image.url}
             className="w-3/5 h-full border-[3px] rounded-xl border-[#FF6841]"
           />
           <div className="w-1/3 flex gap-12 justify-center">
@@ -70,11 +100,31 @@ function VotePage() {
               src={thumbsUpImage}
               className="w-20 h-20 cursor-pointer"
               // ### thumbsUpImage Event ###
+              onMouseEnter={() =>
+                setThumbsUpImage(
+                  require("../assets/images/thumbs-up-click.png")
+                )
+              }
+              onMouseLeave={() =>
+                setThumbsUpImage(require("../assets/images/thumbs-up-icon.png"))
+              }
+              onClick={() => vote(1)}
             />
             <img
               src={thumbsDownImage}
               className="w-20 h-20 cursor-pointer"
               // ### thumbsDownImage Event ###
+              onMouseEnter={() =>
+                setThumbsDownImage(
+                  require("../assets/images/thumbs-down-click.png")
+                )
+              }
+              onMouseLeave={() =>
+                setThumbsDownImage(
+                  require("../assets/images/thumbs-down-icon.png")
+                )
+              }
+              onClick={() => vote(-1)}
             />
           </div>
         </div>