diff --git a/.stylelintrc.json b/.stylelintrc.json
index ecc8c68..fcb335d 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -12,74 +12,7 @@
     ],
     "order/order": ["custom-properties", "declarations"],
 
-    "order/properties-order": [
-      {
-        "groupName": "Layout",
-        "noEmptyLineBetween": true,
-        "properties": [
-          "display",
-          "visibility",
-          "overflow",
-          "float",
-          "clear",
-          "position",
-          "top",
-          "right",
-          "bottom",
-          "left",
-          "z-index"
-        ]
-      },
-      {
-        "groupName": "Box",
-        "emptyLineBefore": "always",
-        "noEmptyLineBetween": true,
-        "properties": [
-          "width",
-          "height",
-          "margin",
-          "margin-top",
-          "margin-right",
-          "margin-bottom",
-          "margin-left",
-          "padding",
-          "padding-top",
-          "padding-right",
-          "padding-bottom",
-          "padding-left",
-          "border"
-        ]
-      },
-      {
-        "groupName": "Background",
-        "emptyLineBefore": "always",
-        "noEmptyLineBetween": true,
-        "properties": ["background-color"]
-      },
-      {
-        "groupName": "Font",
-        "emptyLineBefore": "always",
-        "noEmptyLineBetween": true,
-        "properties": [
-          "color",
-          "font-style",
-          "font-weight",
-          "font-size",
-          "line-height",
-          "letter-spacing",
-          "text-align",
-          "text-indent",
-          "vertical-align",
-          "white-space"
-        ]
-      },
-      {
-        "groupName": "Animation",
-        "emptyLineBefore": "always",
-        "noEmptyLineBetween": true,
-        "properties": ["animation"]
-      }
-    ],
+    "order/properties-order": null,
     "nesting-selector-no-missing-scoping-root": null
   }
 }
diff --git a/src/components/Chart/ChartSection.jsx b/src/components/Chart/ChartSection.jsx
index f1ade4c..ade6706 100644
--- a/src/components/Chart/ChartSection.jsx
+++ b/src/components/Chart/ChartSection.jsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
+import client from "../../api/client";
+import ListItem from "../ListItem/ListItem";
+import VoteSection from "../vote/VoteSection";
 import * as S from "./ChartSection.styles";
-import ListItem from "../listItem/ListItem";
-import VoteSection from "../Vote/VoteSection";
-import client from "../../api/client.js";
 
 const BREAKPOINT = 744;
 
@@ -17,26 +17,25 @@ const ChartSection = () => {
 
   const [list, setList] = useState([]);
 
-  const loadIdols = async () => {
-    const res = await client.get("/idols");
-    const idols = res.data.list;
-
-    const filtered = idols.filter((i) => i.gender === gender);
-
-    const sorted = filtered
-      .sort((a, b) => b.totalVotes - a.totalVotes)
-      .map((i, idx) => ({
-        id: i.id,
-        name: i.name,
-        img: i.profilePicture,
-        votes: i.totalVotes,
-        rank: idx + 1,
-      }));
-
-    setList(sorted);
-  };
-
   useEffect(() => {
+    const loadIdols = async () => {
+      const res = await client.get("/idols");
+      const idols = res.data.list;
+
+      const filtered = idols.filter((i) => i.gender === gender);
+
+      const sorted = filtered
+        .sort((a, b) => b.totalVotes - a.totalVotes)
+        .map((i, idx) => ({
+          id: i.id,
+          name: i.name,
+          img: i.profilePicture,
+          votes: i.totalVotes,
+          rank: idx + 1,
+        }));
+
+      setList(sorted);
+    };
     loadIdols();
   }, [gender]);
 
diff --git a/src/components/ListItem/ListItem.jsx b/src/components/ListItem/ListItem.jsx
index 837321a..2b02407 100644
--- a/src/components/ListItem/ListItem.jsx
+++ b/src/components/ListItem/ListItem.jsx
@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { Item, Img, Rank, TextGroup, Name, ListVotes, RadioVisual } from "./ListItem.style.js";
+import { Item, Img, Rank, TextGroup, Name, ListVotes, RadioVisual } from "./ListItem.style";
 
 const ListItem = ({ id, img, rank, name, votes, selected, onSelect, variant = "vote" }) => {
   const commaNum = (num) => Number(num).toLocaleString();
diff --git a/src/components/ListItem/ListItem.style.js b/src/components/ListItem/ListItem.style.js
index b60bb0f..abfbfdf 100644
--- a/src/components/ListItem/ListItem.style.js
+++ b/src/components/ListItem/ListItem.style.js
@@ -5,7 +5,6 @@ export const Item = styled.div`
   align-items: center;
   gap: 10px;
   height: 70px;
-  border-bottom: 1px solid rgba(225, 225, 225, 0.1);
   padding: ${({ $variant }) => ($variant === "vote" ? "0 12px" : "0")};
   border-bottom: ${({ $variant }) =>
     $variant === "chart" ? "none" : "1px solid rgba(225, 225, 225, 0.1)"};
@@ -23,11 +22,12 @@ export const Img = styled.img`
 `;
 
 export const Rank = styled.span`
-  font-size: 14px;
   width: 18px;
+
+  color: rgb(249 109 105 / 100%);
+  font-size: 14px;
   text-align: right;
   opacity: 0.9;
-  color: rgba(249, 109, 105, 1);
 `;
 
 export const TextGroup = styled.div`
@@ -39,17 +39,19 @@ export const TextGroup = styled.div`
 `;
 
 export const Name = styled.p`
-  font-weight: 500;
+  overflow: hidden;
   margin: 0;
+
+  font-weight: 500;
   white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
 `;
 
 export const ListVotes = styled.p`
-  font-size: 14px;
-  color: #aaa;
   margin: 0 0 0 auto;
+
+  color: #aaa;
+  font-size: 14px;
 `;
 
 export const RadioVisual = styled.span`
diff --git a/src/components/common/Modal.style.js b/src/components/common/Modal.style.js
index 2634e93..0f3e763 100644
--- a/src/components/common/Modal.style.js
+++ b/src/components/common/Modal.style.js
@@ -1,10 +1,13 @@
 import styled from "styled-components";
 
 export const Container = styled.div`
+  display: flex;
   position: fixed;
   inset: 0;
   justify-content: center;
   align-items: center;
+
+  background-color: #000c;
 `;
 
 export const ModalContainer = styled.div`
diff --git a/src/components/common/Toast.style.js b/src/components/common/Toast.style.js
index 0731cd2..5015027 100644
--- a/src/components/common/Toast.style.js
+++ b/src/components/common/Toast.style.js
@@ -2,14 +2,15 @@ import styled from "styled-components";
 
 export const ToastContainer = styled.div`
   position: absolute;
-  bottom: 20px;
   right: 20px;
-  max-width: 200px;
+  bottom: 20px;
+  z-index: 2000;
   padding: 15px;
-  background-color: #ffffffcc;
+
+  background-color: #fffc;
+  max-width: 200px;
   border-radius: 8px;
   pointer-events: none;
-  z-index: 2000;
   transition: all 0.5s;
   opacity: ${({ isToasting }) => (isToasting ? 1 : 0.1)};
   transform: translateY(${({ isToasting }) => (isToasting ? 0 : 100)}%);
@@ -17,12 +18,12 @@ export const ToastContainer = styled.div`
 
 export const ToastTitle = styled.h2`
   color: black;
-  font-size: 12px;
   font-weight: 600;
+  font-size: 12px;
 `;
 
 export const ToastMessage = styled.p`
   color: #333;
-  font-size: 14px;
   font-weight: 500;
+  font-size: 14px;
 `;
diff --git a/src/components/donation/DonationModalUi.style.js b/src/components/donation/DonationModalUi.style.js
index e9cb73e..7833a85 100644
--- a/src/components/donation/DonationModalUi.style.js
+++ b/src/components/donation/DonationModalUi.style.js
@@ -24,16 +24,16 @@ export const TitleWrapper = styled.div`
 `;
 
 export const SubTitle = styled.h4`
-  font-size: 1.2rem;
+  color: #666;
   font-weight: 400;
+  font-size: 1.2rem;
   line-height: 1.8rem;
-  color: #666666;
 `;
 
 export const Title = styled.h4`
-  color: var(--white-F7F7F8);
-  font-size: 1.4rem;
+  color: var(--color-white-90);
   font-weight: 500;
+  font-size: 1.4rem;
 `;
 
 export const FormContainer = styled.form`
@@ -44,18 +44,19 @@ export const FormContainer = styled.form`
 
 export const InputWrapper = styled.div`
   position: relative;
-  border: solid 1px var(--white-FFFFFF);
+  border: solid 1px var(--color-white-100);
   border-radius: 8px;
   padding: 16px;
   padding-right: 48px;
 
   input {
-    padding: 0;
     width: 231px;
     height: 26px;
-    color: var(--white-FFFFFF);
-    font-size: 2rem;
+    padding: 0;
+
+    color: var(--color-white-100);
     font-weight: 700;
+    font-size: 2rem;
     line-height: 2.6rem;
   }
 
@@ -72,8 +73,9 @@ export const InputWrapper = styled.div`
 
 export const MessageBox = styled.div`
   margin-top: 8px;
-  font-size: 1.2rem;
+
   font-weight: 500;
+  font-size: 1.2rem;
   color: #ff2626;
 
   ${({ $color }) => $color && { color: $color }}
@@ -82,13 +84,14 @@ export const MessageBox = styled.div`
 export const SubmitButton = styled.button`
   width: 295px;
   height: 42px;
-  border-radius: 4px;
-  background: linear-gradient(to right, #f86f65, var(--pink-FE5493));
-  font-size: 1.4rem;
+
   font-weight: 700;
+  font-size: 1.4rem;
   line-height: 2.6rem;
+  border-radius: 4px;
+  background: linear-gradient(to right, #f86f65, var(--color-primary));
 
   &:disabled {
-    background: var(--gray-828282);
+    background: var(--color-gray-500);
   }
 `;
diff --git a/src/components/donation/DonationSection.style.js b/src/components/donation/DonationSection.style.js
index f5481f6..9fab3c0 100644
--- a/src/components/donation/DonationSection.style.js
+++ b/src/components/donation/DonationSection.style.js
@@ -3,11 +3,17 @@ import styled from "styled-components";
 
 export const Contaier = styled.section`
   padding-left: 24px;
+  margin-bottom: 40px;
+
+  @media ${media.tablet} {
+    margin-bottom: 60px;
+  }
 
   @media ${media.desktop} {
     width: 1200px;
     margin: 0 auto;
     padding-left: 0;
+    margin-bottom: 80px;
   }
 `;
 
diff --git a/src/components/donation/DonationSlider.style.js b/src/components/donation/DonationSlider.style.js
index 38c8b03..00577d3 100644
--- a/src/components/donation/DonationSlider.style.js
+++ b/src/components/donation/DonationSlider.style.js
@@ -2,13 +2,15 @@ import { media } from "@/styles/media";
 import styled from "styled-components";
 
 export const SlideWrapper = styled.div`
-  position: relative;
   display: flex;
+  position: relative;
   align-items: center;
+
   @media ${media.desktop} {
     gap: 40px;
     width: 1200px;
   }
+
   @media ${media.desktopSlider} {
     gap: 40px;
   }
@@ -30,8 +32,8 @@ export const SlideTrack = styled.div`
 
 export const FundingCardWrapper = styled.div`
   display: flex;
-  width: 100%;
   overflow: hidden;
+  width: 100%;
 `;
 
 export const SlideArrow = styled.button`
@@ -40,7 +42,7 @@ export const SlideArrow = styled.button`
     $direction === "left" ? { left: "-80px" } : { right: "-80px", transform: "rotate(180deg)" }}
 
   &:disabled {
-    background: var(--gray-828282);
+    background: var(--color-gray-500);
   }
 
   @media ${media.desktop} {
@@ -50,8 +52,10 @@ export const SlideArrow = styled.button`
     width: 40px;
     height: 80px;
     border-radius: 8px;
+
     background-color: #1b1b1bcc;
   }
+
   @media ${media.desktopSlider} {
     position: absolute;
   }
diff --git a/src/components/donation/FundingCard.jsx b/src/components/donation/FundingCard.jsx
index 9ce8c83..b393cc9 100644
--- a/src/components/donation/FundingCard.jsx
+++ b/src/components/donation/FundingCard.jsx
@@ -67,8 +67,8 @@ const FundingCard = ({ item, onClick }) => {
               barSize={2}
               radius={2}
               dataKey="pv"
-              fill="#F96D69"
-              background={{ fill: "var(--white-FFFFFF)", radius: 2 }}
+              fill="var(--color-primary)"
+              background={{ fill: "var(--color-white-100)", radius: 2 }}
             />
           </BarChart>
         </ResponsiveContainer>
diff --git a/src/components/donation/FundingCardSkeleton.style.js b/src/components/donation/FundingCardSkeleton.style.js
index 2fcc1be..2d25d4e 100644
--- a/src/components/donation/FundingCardSkeleton.style.js
+++ b/src/components/donation/FundingCardSkeleton.style.js
@@ -11,8 +11,9 @@ const shimmer = keyframes`
 `;
 
 const SkeletonBase = styled.div`
-  background: linear-gradient(90deg, #2a2a2a 0px, #3a3a3a 40px, #2a2a2a 80px);
+  background: linear-gradient(90deg, #2a2a2a 0, #3a3a3a 40px, #2a2a2a 80px);
   background-size: 200px 100%;
+
   animation: ${shimmer} 1.4s ease-in-out infinite;
   border-radius: 4px;
 `;
@@ -23,17 +24,16 @@ export const FundingCardSkeleton = styled.div`
 `;
 
 export const ImgSkeleton = styled(SkeletonBase)`
-  margin-bottom: 8px;
-  border-radius: 8px;
   overflow: hidden;
   width: 158px;
   height: 206px;
+  margin-bottom: 8px;
   border-radius: 8px;
 
   @media ${media.tablet} {
-    margin-bottom: 12px;
     width: 282px;
     height: 294px;
+    margin-bottom: 12px;
   }
 `;
 
@@ -71,11 +71,12 @@ export const TitleSkeleton = styled(SkeletonBase)`
 
 export const DirectionWrapper = styled.div`
   display: flex;
-  justify-content: space-between;
   margin-bottom: 8px;
-  font-size: 1.2rem;
+
   font-weight: 400;
+  font-size: 1.2rem;
   line-height: 1.8rem;
+  justify-content: space-between;
 `;
 
 export const ToolTipSkeleton = styled(SkeletonBase)`
diff --git a/src/components/modal/RechargeModalContent.style.js b/src/components/modal/RechargeModalContent.style.js
index 965b4c6..d0d5c6b 100644
--- a/src/components/modal/RechargeModalContent.style.js
+++ b/src/components/modal/RechargeModalContent.style.js
@@ -15,7 +15,8 @@ export const CreditList = styled.div`
 export const Credit = styled.div`
   display: flex;
   padding: 18px 20px;
-  border: 1px solid ${({ selected }) => (selected ? "var(--orange-F96D69)" : "var(--white-F7F7F8)")};
+  border: 1px solid
+    ${({ selected }) => (selected ? "var(--color-primary)" : "var(--color-white-90)")};
   align-items: center;
   border-radius: 8px;
   cursor: pointer;
diff --git a/src/components/mypage/IdolCard.style.js b/src/components/mypage/IdolCard.style.js
index b7f03cb..e80b2e0 100644
--- a/src/components/mypage/IdolCard.style.js
+++ b/src/components/mypage/IdolCard.style.js
@@ -27,12 +27,12 @@ export const CardContainer = styled.div`
 
 // 이미지 wrapper (외곽 border)
 export const ImageWrapper = styled.div`
+  display: flex;
   position: relative;
   width: ${(props) => WRAPPER_SIZES[props.$size]}px;
-  aspect-ratio: 1;
   border: 1.31px solid ${(props) => (props.$selected ? "#F96D69" : "#f96868")};
+  aspect-ratio: 1;
   border-radius: 50%;
-  display: flex;
   justify-content: center;
   align-items: center;
 `;
@@ -71,19 +71,20 @@ export const IdolImage = styled.img`
 
 // 삭제 버튼
 export const DeleteButton = styled.button`
+  display: flex;
   position: absolute;
   top: 0;
   right: 0;
   width: 31px;
   height: 31px;
-  background-color: #ffffff;
+  padding: 0;
   border: 2.8px solid #02000e;
+
+  background-color: #fff;
   border-radius: 50%;
-  display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  padding: 0;
 
   &:hover {
     opacity: 0.8;
@@ -112,15 +113,16 @@ export const InfoSection = styled.div`
 
 // 멤버 이름
 export const MemberName = styled.div`
-  font-size: 16px;
+  color: #fff;
   font-weight: 700;
-  color: #ffffff;
+  font-size: 16px;
 `;
 
 // 그룹 이름
 export const GroupName = styled.div`
-  font-size: 14px;
-  font-weight: 400;
-  color: rgba(255, 255, 255, 0.6);
   padding: 0 12px;
+
+  color: rgb(255 255 255 / 60%);
+  font-weight: 400;
+  font-size: 14px;
 `;
diff --git a/src/components/vote/CreditLimitModal.jsx b/src/components/vote/CreditLimitModal.jsx
index f6a487b..a0b894b 100644
--- a/src/components/vote/CreditLimitModal.jsx
+++ b/src/components/vote/CreditLimitModal.jsx
@@ -1,4 +1,4 @@
-import * as S from "./CreditLimitModal.style.js";
+import * as S from "./CreditLimitModal.style";
 
 const CreditLimitModal = ({ onClose }) => {
   return (
diff --git a/src/components/vote/CreditLimitModal.style.js b/src/components/vote/CreditLimitModal.style.js
index 798dd13..ee607ba 100644
--- a/src/components/vote/CreditLimitModal.style.js
+++ b/src/components/vote/CreditLimitModal.style.js
@@ -2,24 +2,24 @@ import styled from "styled-components";
 import credit_icon from "../../assets/credit_113px.png";
 import closePng from "../../assets/btn_delete_24px.png";
 export const Overlay = styled.div`
+  display: flex;
   position: fixed;
+  z-index: 999;
   inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-  display: flex;
+  background: rgb(0 0 0 / 60%);
   justify-content: center;
   align-items: center;
-  z-index: 999;
 `;
 
 export const ModalBox = styled.div`
+  display: flex;
+  position: relative;
   width: 339px;
   height: 330px;
-  background: rgba(24, 29, 38, 1);
+  background: rgb(24 29 38 / 100%);
   border-radius: 12px;
-  display: flex;
   flex-direction: column;
   align-items: center;
-  position: relative;
 `;
 
 export const Icon = styled.div`
@@ -29,17 +29,18 @@ export const Icon = styled.div`
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
-  margin: 56px 24px 0px;
+  margin: 56px 24px 0;
 `;
 
 export const Message = styled.p`
-  color: #ffffff;
+  margin-top: 31px;
+
+  color: #fff;
   font-size: 16px;
   line-height: 1.5;
-  margin-top: 31px;
 
   span {
-    color: #ff7777;
+    color: #f77;
     font-weight: 600;
   }
 `;
@@ -47,15 +48,16 @@ export const Message = styled.p`
 export const ConfirmButton = styled.button`
   width: 295px;
   height: 42px;
-  border-radius: 3px;
+  margin-top: 31px;
   border: none;
-  cursor: pointer;
-  font-size: 15px;
+
+  color: #fff;
   font-weight: 600;
-  margin-top: 31px;
+  font-size: 15px;
+  border-radius: 3px;
+  cursor: pointer;
 
   background: linear-gradient(90deg, #f86f65 0%, #fe5493 100%);
-  color: #ffffff;
 `;
 
 export const CloseBtn = styled.button`
diff --git a/src/components/vote/VoteSection.jsx b/src/components/vote/VoteSection.jsx
index 90efed1..e1c50f8 100644
--- a/src/components/vote/VoteSection.jsx
+++ b/src/components/vote/VoteSection.jsx
@@ -1,9 +1,9 @@
+import { creditStorage } from "@/storage/credit.storage";
 import { useEffect, useState } from "react";
-import * as S from "./VoteSection.style";
-import ListItem from "../listItem/ListItem";
 import client from "../../api/client";
-import { creditStorage } from "@/storage/credit.storage";
+import ListItem from "../ListItem/ListItem";
 import CreditLimitModal from "./CreditLimitModal";
+import * as S from "./VoteSection.style";
 
 const VoteSection = ({ onClose, initialGender = "female" }) => {
   const [gender] = useState(initialGender);
@@ -33,7 +33,6 @@ const VoteSection = ({ onClose, initialGender = "female" }) => {
     };
 
     fetchIdols();
-    // eslint-disable-next-line react-hooks/exhaustive-deps 
   }, [gender]);
 
   const submit = async () => {
diff --git a/src/components/vote/VoteSection.style.js b/src/components/vote/VoteSection.style.js
index 02e35ec..cbe8c0c 100644
--- a/src/components/vote/VoteSection.style.js
+++ b/src/components/vote/VoteSection.style.js
@@ -56,14 +56,13 @@ export const Header = styled.div`
 export const MobileHeader = styled.div`
   display: none;
 
-  @media (max-width: 524px) {
+  @media (width <= 524px) {
     display: flex;
+    position: relative;
     width: 100%;
     height: 44px;
     justify-content: space-between;
     align-items: center;
-
-    position: relative;
   }
 `;
 
@@ -85,7 +84,7 @@ export const BackBtn = styled.button`
   border: 0;
   cursor: pointer;
 
-  @media (max-width: 524px) {
+  @media (width <= 524px) {
     display: block;
   }
 `;
@@ -148,9 +147,8 @@ export const Vote = styled.div`
 export const TransparentOverlay = styled.div`
   display: none;
 
-  @media (max-width: 524px) {
+  @media (width <= 524px) {
     display: block;
-    height: 106px;
     position: fixed;
     right: 0;
     bottom: 0;
@@ -176,14 +174,14 @@ export const Votebtn = styled.button`
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
 
   @media (width <= 524px) {
+    display: block;
     width: calc(100% - 32px);
-    margin: 16px auto;
     height: 44px;
+    margin: 16px auto;
     margin: 16px 0;
 
     font-size: 15px;
     pointer-events: auto;
-    display: block;
   }
 `;
 
diff --git a/src/pages/Homepage.jsx b/src/pages/Homepage.jsx
index 2b92b5c..ab42e2e 100644
--- a/src/pages/Homepage.jsx
+++ b/src/pages/Homepage.jsx
@@ -1,13 +1,13 @@
+import useCreditContext from "@/app/contexts/CreditContext";
 import { useNavigate } from "react-router-dom";
-import imgStartBg from "../assets/imgs/home_start_bg.png";
-import imgSponsorBg from "../assets/imgs/home_sponsor_bg.png";
-import imgSponsorPhone from "../assets/imgs/home_sponsor_phone.png";
 import imgMonthlyBg from "../assets/imgs/home_monthly_bg.png";
 import imgMonthyPhone from "../assets/imgs/home_monthly_phone.png";
 import imgMyArtistBg from "../assets/imgs/home_my_artist_bg.png";
 import imgMyArtistPhone from "../assets/imgs/home_my_artist_phone.png";
+import imgSponsorBg from "../assets/imgs/home_sponsor_bg.png";
+import imgSponsorPhone from "../assets/imgs/home_sponsor_phone.png";
+import imgStartBg from "../assets/imgs/home_start_bg.png";
 import imgLogo from "../assets/imgs/logo.svg";
-import useCreditContext from "@/app/contexts/CreditContext";
 import * as S from "./Homepage.style";
 
 function Homepage() {
@@ -15,13 +15,16 @@ function Homepage() {
   const [_, actions] = useCreditContext();
 
   const goListPage = () => {
-    actions.resetCredit();
     navigate("/list");
   };
 
+  const resetCredit = () => {
+    actions.resetCredit();
+  };
+
   return (
     <S.Container>
-      <StartSection goListPage={goListPage} />
+      <StartSection onClick={{ goListPage, resetCredit }} />
       <SponsorSection />
       <MonthlySection />
       <MyArtistSection />
@@ -30,7 +33,7 @@ function Homepage() {
   );
 }
 
-const StartSection = ({ goListPage }) => {
+const StartSection = ({ onClick }) => {
   return (
     <S.FirstSection>
       <S.FirstSectionBox>
@@ -41,10 +44,23 @@ const StartSection = ({ goListPage }) => {
             <br />
             가장 <span>쉽게 덕질</span> 하는 방법
           </S.FirstSectionTitle>
-          <img src={imgLogo} alt="팬덤케이 로고" />
+          <img
+            src={imgLogo}
+            alt="팬덤케이 로고"
+            onClick={() => {
+              onClick.goListPage();
+            }}
+          />
         </S.LogoContainer>
         <img src={imgStartBg} alt="지금 시작하기" />
-        <S.StartButton onClick={goListPage}>지금 시작하기</S.StartButton>
+        <S.StartButton
+          onClick={() => {
+            onClick.goListPage();
+            onClick.resetCredit();
+          }}
+        >
+          지금 시작하기
+        </S.StartButton>
       </S.FirstSectionBox>
     </S.FirstSection>
   );
diff --git a/src/pages/Homepage.style.js b/src/pages/Homepage.style.js
index c206f3d..96658f0 100644
--- a/src/pages/Homepage.style.js
+++ b/src/pages/Homepage.style.js
@@ -217,7 +217,7 @@ export const SectionImg1 = styled.img`
   width: 240px;
   height: 520.25px;
   margin-top: 47px;
-  animation-name: phoneAni;
+  animation-name: phone-ani;
   animation-duration: 1.2s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
@@ -233,15 +233,17 @@ export const SectionImg1 = styled.img`
     margin-top: 60px;
   }
 
-  @keyframes phoneAni {
+  @keyframes phone-ani {
     0% {
-      transform: translateY(0px);
+      transform: translateY(0);
     }
+
     50% {
       transform: translateY(10px);
     }
+
     100% {
-      transform: translateY(0px);
+      transform: translateY(0);
     }
   }
 `;
diff --git a/src/pages/ListPage.jsx b/src/pages/ListPage.jsx
index eeda80c..6d76079 100644
--- a/src/pages/ListPage.jsx
+++ b/src/pages/ListPage.jsx
@@ -1,13 +1,13 @@
+import ChartSection from "@/components/Chart/ChartSection";
 import MyCredit from "@/components/credit/MyCredit";
 import DonationSection from "@/components/donation/DonationSection";
-import VoteSection from "@/components/vote/VoteSection";
 
 function ListPage() {
   return (
     <>
       <MyCredit />
       <DonationSection />
-      <VoteSection />
+      <ChartSection />
     </>
   );
 }
diff --git a/src/pages/Mypage.jsx b/src/pages/Mypage.jsx
index 1ccd622..5c77f79 100644
--- a/src/pages/Mypage.jsx
+++ b/src/pages/Mypage.jsx
@@ -1,11 +1,11 @@
-import { useState, useEffect } from "react";
-import IdolCard from "@/components/mypage/IdolCard";
-import MypageAdd from "@/assets/svg/MypageAddSvg";
-import MypageArrow from "@/assets/svg/MypageArrowSvg";
 import { getIdolList } from "@/api/idolsClient";
 import { getRecommendations } from "@/api/recommendationClient";
-import { idolsStorage } from "@/storage/idols.storage";
+import MypageAdd from "@/assets/svg/MypageAddSvg";
+import MypageArrow from "@/assets/svg/MypageArrowSvg";
+import IdolCard from "@/components/mypage/IdolCard";
 import useDraggableSlider from "@/hooks/useDraggableSlider";
+import { idolsStorage } from "@/storage/idols.storage";
+import { useEffect, useState } from "react";
 import * as S from "./Mypage.style";
 
 const Mypage = () => {
@@ -73,7 +73,6 @@ const Mypage = () => {
 
   // AI 추천 아이돌 목록
   const [recommendedIdols, setRecommendedIdols] = useState([]);
-  const [isLoadingRecommendations, setIsLoadingRecommendations] = useState(false);
 
   // 로딩 및 에러 상태
   const [isLoading, setIsLoading] = useState(false);
@@ -111,16 +110,12 @@ const Mypage = () => {
     const fetchRecommendations = async () => {
       // 관심 아이돌이 없으면 추천 안 함
       if (selectedIdols.length === 0 || allIdols.length === 0) {
-        console.log("AI 추천 스킵: 관심 아이돌 없음");
         setRecommendedIdols([]);
         return;
       }
 
-      console.log("🤖 AI 추천 요청 시작:", selectedIdols);
-      setIsLoadingRecommendations(true);
       try {
         const result = await getRecommendations(selectedIdols, recommendCount);
-        console.log("✅ AI 추천 응답:", result);
 
         const { recommended_ids } = result;
 
@@ -129,16 +124,10 @@ const Mypage = () => {
           .map((id) => allIdols.find((idol) => idol.id === id))
           .filter((idol) => idol && !selectedIdols.includes(idol.id)); // 이미 선택된 건 제외
 
-        console.log(
-          "📋 추천 아이돌 목록:",
-          recommended.map((i) => i?.name)
-        );
         setRecommendedIdols(recommended);
       } catch (err) {
         console.error("❌ 추천을 불러오는데 실패했습니다:", err);
         setRecommendedIdols([]);
-      } finally {
-        setIsLoadingRecommendations(false);
       }
     };
 
diff --git a/src/pages/Mypage.style.js b/src/pages/Mypage.style.js
index 82484f8..79e1861 100644
--- a/src/pages/Mypage.style.js
+++ b/src/pages/Mypage.style.js
@@ -1,5 +1,5 @@
-import styled from "styled-components";
 import { media } from "@/styles/media";
+import styled from "styled-components";
 
 // 전체 컨테이너 - max-width 1200px, flex column, gap 40px
 export const MypageContainer = styled.div`
@@ -35,7 +35,7 @@ export const AddIdolsSection = styled.section`
 export const SectionTitle = styled.h2`
   font-size: 18px;
   font-weight: 700;
-  color: var(--white-FFFFFF);
+  color: var(--color-white-100);
   margin-bottom: 24px;
 
   @media ${media.tablet} {
@@ -71,17 +71,19 @@ export const FavoriteIdolsList = styled.div`
 // 빈 상태 메시지
 export const EmptyMessage = styled.div`
   width: 100%;
-  text-align: center;
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 16px;
   padding: 40px 0;
+
+  color: rgb(255 255 255 / 60%);
+  font-size: 16px;
+  text-align: center;
 `;
 
 // 구분선
 export const Divider = styled.div`
   width: 100%;
   height: 1px;
-  background-color: var(--white-FFFFFF);
+
+  background-color: var(--color-white-100);
 `;
 
 // 아이돌 그리드 컨테이너 (화살표 버튼 포함)
@@ -105,26 +107,27 @@ export const IdolsGridContainer = styled.div`
 
 // 화살표 버튼
 export const ArrowButton = styled.button`
+  display: flex;
   width: 29px;
   height: 135px;
-  background-color: rgba(27, 27, 27, 0.8);
   border: none;
+
+  background-color: rgb(27 27 27 / 80%);
   border-radius: 8px;
-  display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   flex-shrink: 0;
   transform: ${(props) => (props.$isRight ? "scaleX(-1)" : "none")};
 
-  &:hover:not(:disabled) {
-    opacity: 0.8;
-  }
-
   &:disabled {
     opacity: 0.3;
     cursor: not-allowed;
   }
+
+  &:hover:not(:disabled) {
+    opacity: 0.8;
+  }
 `;
 
 // 아이돌 그리드 - 반응형 (모바일 3열, 타블렛 4열, 데스크톱 8열)
@@ -134,7 +137,7 @@ export const IdolsGrid = styled.div`
   gap: 32px 20px;
   flex: 1;
   will-change: ${(props) => (props.$isMobile ? "transform" : "auto")};
-  
+
   /* 모바일: 2행 고정, 열은 자동으로 늘어남 */
   grid-template-rows: ${(props) => (props.$isMobile ? "repeat(2, 1fr)" : "none")};
   grid-template-columns: ${(props) => (props.$isMobile ? "none" : "repeat(3, 1fr)")};
@@ -162,28 +165,29 @@ export const IdolsGrid = styled.div`
 
 // 추가하기 버튼 - 255x48px, radius 24px, 위 마진 48px
 export const AddButton = styled.button`
+  display: flex;
   width: 255px;
   height: 48px;
   margin-top: 48px;
-  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
   border: none;
-  border-radius: 24px;
+
   color: var(--color-white-100);
+  font-weight: 700;
+  font-size: 16px;
+  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
+  border-radius: 24px;
   cursor: pointer;
   align-self: center;
-  display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
-  font-size: 16px;
-  font-weight: 700;
-
-  &:hover:not(:disabled) {
-    opacity: 0.9;
-  }
 
   &:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
+
+  &:hover:not(:disabled) {
+    opacity: 0.9;
+  }
 `;