diff --git a/src/routes/VoteHistoryPage.jsx b/src/routes/VoteHistoryPage.jsx
index 2f12755..5d14ecd 100644
--- a/src/routes/VoteHistoryPage.jsx
+++ b/src/routes/VoteHistoryPage.jsx
@@ -15,9 +15,16 @@ function VoteHistoryPage() {
 
   const getImages = async () => {
     try {
-      let response;
-      // ### TO DO ###
-      // #############
+      const response = await axios.get(
+        `https://api.thecatapi.com/v1/votes?sub_id=${userId}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_k3LObXNngNywEb0446pOynTVv5kgYK4X5WFxTJBGUimIREEcRurFUiYzgXIambCo",
+          },
+        }
+      );
       const data = response.data;
       const imageSet = [];
 
@@ -64,9 +71,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] rounded-xl ${
+                  img.value < 0 ? "border-red-700" : "border-blue-700"
+                }`}
               />
             </div>
           ))}
diff --git a/src/routes/VotePage.jsx b/src/routes/VotePage.jsx
index c77d27f..6ce625d 100644
--- a/src/routes/VotePage.jsx
+++ b/src/routes/VotePage.jsx
@@ -14,14 +14,33 @@ function VotePage() {
     require("../assets/images/thumbs-down-icon.png")
   );
 
+  const [Image, setImage] = useState([]);
+
   useEffect(() => {
     getImage();
   }, []);
 
   const getImage = async () => {
     try {
-      // ### TO DO ###
-      // #############
+      const response = await axios.get(
+        "https://api.thecatapi.com/v1/images/search",
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_k3LObXNngNywEb0446pOynTVv5kgYK4X5WFxTJBGUimIREEcRurFUiYzgXIambCo",
+          },
+        }
+      );
+
+      const data = response.data[0]; //배열로 오니까 무조건 [0]을 넣어줘야 한다!
+
+      const newImage = {
+        id: data.id,
+        url: data.url,
+      };
+
+      setImage(newImage);
     } catch (err) {
       console.log(err);
     }
@@ -29,8 +48,17 @@ 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 }, //무조건 data가 먼저 나와야함! 그렇지 않으면 401 발생
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key":
+              "live_k3LObXNngNywEb0446pOynTVv5kgYK4X5WFxTJBGUimIREEcRurFUiYzgXIambCo",
+          },
+        }
+      );
     } catch (err) {
       console.log(err);
     }
@@ -62,19 +90,37 @@ 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.url}
             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}
               className="w-20 h-20 cursor-pointer"
-              // ### thumbsUpImage Event ###
+              onMouseOver={() =>
+                setThumbsUpImage(
+                  require("../assets/images/thumbs-up-click.png")
+                )
+              }
+              onMouseOut={() =>
+                setThumbsUpImage(require("../assets/images/thumbs-up-icon.png"))
+              }
+              onClick={() => vote(1)}
             />
             <img
               src={thumbsDownImage}
               className="w-20 h-20 cursor-pointer"
-              // ### thumbsDownImage Event ###
+              onMouseOver={() =>
+                setThumbsDownImage(
+                  require("../assets/images/thumbs-down-click.png")
+                )
+              }
+              onMouseOut={() =>
+                setThumbsDownImage(
+                  require("../assets/images/thumbs-down-icon.png")
+                )
+              }
+              onClick={() => vote(-1)}
             />
           </div>
         </div>