diff --git a/app/assets/image/amisan.jpg b/app/assets/image/amisan.jpg
new file mode 100644
index 0000000..18c499d
Binary files /dev/null and b/app/assets/image/amisan.jpg differ
diff --git a/app/assets/image/flowerGimbap.jpg b/app/assets/image/flowerGimbap.jpg
new file mode 100644
index 0000000..45efdba
Binary files /dev/null and b/app/assets/image/flowerGimbap.jpg differ
diff --git a/app/assets/image/victorySuper.jpg b/app/assets/image/victorySuper.jpg
new file mode 100644
index 0000000..0316362
Binary files /dev/null and b/app/assets/image/victorySuper.jpg differ
diff --git a/app/pages/checklist/_components/CheckCard.vue b/app/pages/checklist/_components/CheckCard.vue
index e7a5a24..5fe092d 100644
--- a/app/pages/checklist/_components/CheckCard.vue
+++ b/app/pages/checklist/_components/CheckCard.vue
@@ -1,10 +1,10 @@
 <template>
   <div
-    class="relative z-0 rounded-bl-2xl rounded-br-2xl rounded-tl-2xl rounded-tr-2xl bg-neutral-100 px-7 pb-9 pt-6"
+    class="relative z-0 rounded-bl-[15px] rounded-br-[15px] rounded-tl-[15px] rounded-tr-[15px] bg-gray-f5 px-7 pb-9 pt-6"
     :style="{ width: cardWidth, height: cardHeight }"
   >
     <img
-      class="absolute left-0 top-0 z-10 w-full rounded-tl-2xl rounded-tr-2xl object-cover"
+      class="absolute left-0 top-0 z-10 w-full rounded-tl-[15px] rounded-tr-[15px] object-cover"
       :src="img"
       alt="사진"
       :style="{ height: cardImgHeight }"
diff --git a/app/pages/checklist/_components/CheckTipBox.vue b/app/pages/checklist/_components/CheckTipBox.vue
index d9ed594..3a7b49f 100644
--- a/app/pages/checklist/_components/CheckTipBox.vue
+++ b/app/pages/checklist/_components/CheckTipBox.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="box-border flex w-[894px] items-center justify-start gap-[23px] rounded-2xl bg-neutral-100 px-[50px] py-[30px]"
+    class="box-border flex w-[894px] items-center justify-start gap-[23px] rounded-[15px] bg-gray-f5 px-[50px] py-[30px]"
   >
     <div
-      class="flex h-16 w-16 items-center justify-center rounded-2xl bg-blue-500 text-4xl text-white"
+      class="flex h-16 w-16 items-center justify-center rounded-[15px] bg-primary text-[40px] text-background"
     >
       {{ checkNum }}
     </div>
diff --git a/app/pages/checklist/index.vue b/app/pages/checklist/index.vue
index 2cd6ef7..9648c5d 100644
--- a/app/pages/checklist/index.vue
+++ b/app/pages/checklist/index.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="flex flex-col items-center justify-start">
+  <div class="mb-[200px] flex flex-col items-center justify-start">
     <div
-      class="relative flex h-[371px] w-[896px] flex-col items-center justify-center rounded-2xl bg-neutral-100 py-[35px]"
+      class="relative flex h-[371px] w-[896px] flex-col items-center justify-center rounded-[15px] bg-gray-f5 py-[35px]"
     >
       <img src="~/assets/image/checklistIcon.jpg" alt="체크리스트" class="h-[147px] w-[107px]" />
       <div
-        class="justify-start px-[40px] py-[10px] text-center font-['Pretendard'] text-3xl font-semibold leading-10 text-zinc-900"
+        class="justify-start px-[40px] py-[20px] text-center text-[32px] font-[600] text-gray-1a"
       >
         부동산 퀴즈 풀고 크레딧 받기
       </div>
 
       <button
-        class="h-[64px] w-[177px] justify-start rounded-[10px] bg-[#2D8AE7] font-['Pretendard'] text-[32px] font-semibold leading-10 text-white"
+        class="h-[64px] w-[177px] justify-start rounded-[10px] bg-primary text-[28px] font-[500] text-background"
         @click="gotoQuiz"
       >
         퀴즈풀기
@@ -20,10 +20,8 @@
     <div class="mt-[90px] flex w-[896px] flex-col">
       <section class="mb-[80px]">
         <div class="mb-[60px] text-center">
-          <div class="font-['Pretendard'] text-4xl font-bold leading-[58px] text-blue-500">
-            잠깐!
-          </div>
-          <span class="font-['Pretendard'] text-4xl font-bold leading-[58px] text-zinc-900">
+          <div class="text-[40px] font-[700] leading-[58px] text-primary">잠깐!</div>
+          <span class="text-[40px] font-[700] leading-[58px] text-gray-1a">
             집 구하기 전 확인하셨나요?
           </span>
         </div>
@@ -31,46 +29,26 @@
         <div class="mb-[80px] flex justify-center">
           <div class="grid grid-cols-2 items-start gap-x-[70px] gap-y-[50px]">
             <CheckCard card-width="413px" card-height="447px" card-img-height="240px" :img="One">
-              <div>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-blue-500"
-                >
-                  보증보험 가입
-                </span>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-zinc-900"
-                >
-                  가능 여부 확인
-                </span>
+              <div class="mb-[10px]">
+                <span class="text-[24px] font-[600] text-primary">보증보험 가입</span>
+                <span class="text-[24px] font-[600] text-gray-1a">가능 여부 확인</span>
               </div>
-              <div
-                class="justify-start font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900"
-              >
+              <div class="justify-start text-[18px] font-[400] text-gray-1a">
                 보증보험을 가입하면 보증금 피해 발생 시
                 <br />
                 보증금의 일부나 전액을 배상 받을 수 있습니다.
               </div>
             </CheckCard>
             <CheckCard card-width="413px" card-height="447px" card-img-height="240px" :img="Two">
-              <div>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-blue-500"
-                >
-                  중개업자 신원
-                </span>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-zinc-900"
-                >
-                  확인
-                </span>
+              <div class="mb-[10px]">
+                <span class="text-[24px] font-[600] text-primary">중개업자 신원</span>
+                <span class="text-[24px] font-[600] text-gray-1a">확인</span>
               </div>
               <div class="justify-start">
-                <span
-                  class="whitespace-nowrap font-['Pretendard'] text-lg font-semibold leading-7 text-blue-500"
-                >
+                <span class="whitespace-nowrap text-[18px] font-[400] text-primary">
                   국토부 중개사 조회 사이트
                 </span>
-                <span class="font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900">
+                <span class="text-[18px] font-[400] text-gray-1a">
                   에서 중개사의 자격
                   <br />
                   여부를 확인해야합니다. 무자격자에게 계약하면
@@ -80,68 +58,40 @@
               </div>
             </CheckCard>
             <CheckCard card-width="413px" card-height="570px" card-img-height="240px" :img="Three">
-              <div>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-blue-500"
-                >
-                  등기부등본
-                </span>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-zinc-900"
-                >
-                  확인
-                </span>
+              <div class="mb-[10px]">
+                <span class="text-[24px] font-[600] text-primary">등기부등본</span>
+                <span class="text-[24px] font-[600] text-gray-1a">확인</span>
               </div>
               <div class="justify-start">
-                <span class="font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900">
-                  등기부등본은 부동산 또는
-                </span>
-                <span class="font-['Pretendard'] text-lg font-semibold leading-7 text-blue-500">
-                  대법원 인터넷등기소
-                </span>
-                <span class="font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900">
+                <span class="text-[18px] font-normal text-gray-1a">등기부등본은 부동산 또는</span>
+                <span class="text-[18px] font-semibold text-primary">대법원 인터넷등기소</span>
+                <span class="text-[18px] font-normal text-gray-1a">
                   를 통해 반드시 확인해야할 정보입니다.
                   <br />
                   실제 집주인이 누구인지 확인하고 근저당이나 압류 여부를 확인할 수 있습니다.
                   <br />
                 </span>
-                <span
-                  class="font-['Pretendard'] text-base font-normal leading-relaxed text-zinc-900"
-                >
+                <span class="text-base font-normal text-gray-1a">
                   <br />
                 </span>
-                <span class="font-['Pretendard'] text-sm font-semibold leading-snug text-blue-500">
+                <span class="text-[14px] font-[400] text-primary">
                   TIP!
                   <br />
                 </span>
-                <span
-                  class="font-['Pretendard'] text-base font-normal leading-relaxed text-zinc-900"
-                >
+                <span class="text-base font-normal text-gray-1a">
                   등기부등본은 변경 가능성이 있기에 입주 전 반드시 한번 더 확인해야합니다!
                 </span>
               </div>
             </CheckCard>
             <CheckCard card-width="413px" card-height="570px" card-img-height="240px" :img="Four">
-              <div>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-blue-500"
-                >
-                  확정일자 및 전입신고
-                </span>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-zinc-900"
-                >
-                  가능 여부 확인
-                </span>
+              <div class="mb-[10px]">
+                <span class="text-[24px] font-[600] text-primary">확정일자 및 전입신고</span>
+                <span class="text-[24px] font-[600] text-gray-1a">가능 여부 확인</span>
               </div>
-              <div
-                class="justify-start font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900"
-              >
+              <div class="justify-start text-[18px] font-[400] text-gray-1a">
                 확정일자와 전입신고가 가능해야지만 보증금을 법적으로 보호할 수 있습니다.
               </div>
-              <div
-                class="mt-[25px] justify-start font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900"
-              >
+              <div class="mt-[25px] justify-start text-[18px] font-[400] text-gray-1a">
                 다만, 상가주택이나 불법건축물 등의 경우 불가할 수도 있기에 반드시 사전에
                 확인해야합니다.
               </div>
@@ -152,23 +102,15 @@
         <div class="flex justify-center">
           <CheckCard :img="Five" card-width="896px" card-height="764px" card-img-height="533px">
             <div class="justify-start">
-              <span class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-blue-500">
-                선순위 계약자
-              </span>
-              <span class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-zinc-900">
-                확인
-              </span>
-              <div class="w-[836px] justify-start">
-                <span class="font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900">
-                  입주하기 전 반드시
-                </span>
-                <span
-                  class="font-['Pretendard'] text-lg font-normal leading-7 text-blue-500"
-                ></span>
-                <span class="font-['Pretendard'] text-lg font-semibold leading-7 text-blue-500">
+              <span class="text-[24px] font-[600] text-primary">선순위 계약자</span>
+              <span class="text-[24px] font-[600] text-gray-1a">확인</span>
+              <div class="mt-[10px] w-[836px] justify-start">
+                <span class="text-[18px] font-[400] text-gray-1a">입주하기 전 반드시</span>
+                <span class="text-[18px] font-[400] text-primary"></span>
+                <span class="text-[18px] font-semibold text-primary">
                   주민센터나 정부24에서 전세입자의 전출 여부를 확인
                 </span>
-                <span class="font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900">
+                <span class="text-[18px] font-[400] text-gray-1a">
                   해야 합니다.
                   <br />
                   만약 전세입자가 전출신고를 하지 않고 여전히 전입신고 상태를 유지하고 있다면,
@@ -183,31 +125,23 @@
         </div>
       </section>
       <div
-        class="h-0 w-full outline outline-[1.50px] outline-offset-[-0.75px] outline-zinc-400"
+        class="h-0 w-full outline outline-[1.50px] outline-offset-[-0.75px] outline-[#B4B4B4]"
       ></div>
       <section class="mt-[80px]">
-        <div class="mb-[34px] font-['Pretendard'] text-4xl font-bold leading-[58px] text-blue-500">
-          등기부등본 위조 확인 TIP
-        </div>
+        <div class="mb-[34px] text-[40px] font-[700] text-primary">등기부등본 위조 확인 TIP</div>
         <div class="flex flex-col gap-[44px]">
           <CheckTipBox check-num="1">
             <div class="w-[634px] justify-start">
-              <div class="font-['Pretendard'] text-3xl font-normal leading-[50px] text-zinc-900">
+              <div class="text-[32px] font-normal text-gray-1a">
                 등기부등본은 말소된 내역이 포함된
               </div>
-              <span class="font-['Pretendard'] text-3xl font-semibold leading-[50px] text-blue-500">
-                등기사항 전부 증명서 유형
-              </span>
-              <span class="font-['Pretendard'] text-3xl font-normal leading-[50px] text-zinc-900">
-                으로 발급 받아야합니다.
-              </span>
+              <span class="text-[32px] font-semibold text-primary">등기사항 전부 증명서 유형</span>
+              <span class="text-[32px] font-normal text-gray-1a">으로 발급 받아야합니다.</span>
             </div>
           </CheckTipBox>
 
           <CheckTipBox check-num="2">
-            <div
-              class="justify-start font-['Pretendard'] text-3xl font-normal leading-[50px] text-zinc-900"
-            >
+            <div class="justify-start text-[32px] font-normal text-gray-1a">
               가압류, 가처분, 가등기, 근저당권 등에 대해 말소된
               <br />
               내역을 찾아야 합니다.
@@ -216,9 +150,7 @@
 
           <CheckTipBox check-num="3">
             <div class="w-[634px] justify-start">
-              <div
-                class="justify-start font-['Pretendard'] text-3xl font-normal leading-[50px] text-zinc-900"
-              >
+              <div class="justify-start whitespace-nowrap text-[32px] font-normal text-gray-1a">
                 말소된 이력에 대해 임대인에게 채권자로부터 채권변제
                 <br />
                 확인서 발급을 꼭 요청해야합니다.
@@ -229,17 +161,11 @@
           <CheckTipBox check-num="4">
             <div class="w-[634px] justify-start">
               <div class="justify-start whitespace-nowrap">
-                <span class="font-['Pretendard'] text-3xl font-normal leading-[50px] text-zinc-900">
-                  요청을 거부한다면,
-                </span>
-                <span
-                  class="font-['Pretendard'] text-3xl font-semibold leading-[50px] text-blue-500"
-                >
+                <span class="text-[32px] font-normal text-gray-1a">요청을 거부한다면,</span>
+                <span class="text-[32px] font-semibold text-primary">
                   해당 매물은 피하는 것이 안전
                 </span>
-                <span class="font-['Pretendard'] text-3xl font-normal leading-[50px] text-zinc-900">
-                  합니다.
-                </span>
+                <span class="text-[32px] font-normal text-gray-1a">합니다.</span>
               </div>
             </div>
           </CheckTipBox>
diff --git a/app/pages/community/_components/CommentItem.vue b/app/pages/community/_components/CommentItem.vue
index aead75f..ca4e2f5 100644
--- a/app/pages/community/_components/CommentItem.vue
+++ b/app/pages/community/_components/CommentItem.vue
@@ -2,19 +2,11 @@
   <div
     class="box-border flex h-[200px] w-[400px] cursor-pointer flex-col rounded-[10px] p-[30px] hover:bg-blue-50"
   >
-    <div
-      class="mb-[5px] justify-start font-['Pretendard'] text-lg font-semibold leading-tight text-zinc-900"
-    >
-      {{ writer }}
-    </div>
-    <div
-      class="mb-[15px] justify-start font-['Pretendard'] text-base font-normal leading-tight text-neutral-400"
-    >
+    <div class="mb-[5px] justify-start text-lg font-semibold leading-tight text-gray-1a">익명</div>
+    <div class="mb-[15px] justify-start text-base font-normal text-gray-b4">
       {{ dayjs(date).format("YYYY-MM-DD") }}
     </div>
-    <div
-      class="mb-[10px] justify-start font-['Pretendard'] text-base font-normal leading-normal text-zinc-900"
-    >
+    <div class="mb-[10px] justify-start text-base font-normal text-gray-1a">
       {{ comment }}
     </div>
     <div class="flex items-start justify-start gap-[20px]">
@@ -27,17 +19,13 @@
         ></FilledLike>
 
         <Like v-else class="h-4 w-4" filled="false" :font-controlled="false" />
-        <div
-          class="justify-start font-['Pretendard'] text-base font-normal leading-none text-zinc-400"
-        >
+        <div class="justify-start text-base font-normal text-gray-b4">
           {{ likeCount }}
         </div>
       </div>
       <div class="flex justify-start gap-[10px]">
         <CommentIcon class="h-4 w-4" filled="false" :font-controlled="false" />
-        <div
-          class="justify-start font-['Pretendard'] text-base font-normal leading-none text-zinc-400"
-        >
+        <div class="justify-start text-base font-normal text-gray-b4">
           {{ commentCount }}
         </div>
       </div>
@@ -82,7 +70,7 @@ const { mutate: clickLike } = useMutation({
   onSuccess: (data) => {
     console.log("좋아요 생성 성공:", data);
     queryClient.invalidateQueries({
-      queryKey: ["replies", props.postId],
+      queryKey: ["post", props.postId],
     });
   },
   onError: (error) => {
@@ -119,7 +107,7 @@ const handleDelete = () => {
 const props = defineProps({
   writer: {
     type: String,
-    default: "",
+    default: "작성자",
   },
   date: {
     type: String,
diff --git a/app/pages/community/_components/CommentWrap.vue b/app/pages/community/_components/CommentWrap.vue
index a55ae18..d0262dc 100644
--- a/app/pages/community/_components/CommentWrap.vue
+++ b/app/pages/community/_components/CommentWrap.vue
@@ -4,48 +4,46 @@
       class="my-[30px] box-border flex h-[60px] cursor-pointer items-center justify-start rounded-[10px] border-[#B4B4B4] px-[15px] py-[25px] outline outline-[1.50px] outline-offset-[-1.50px] outline-zinc-400"
       @click="handlePostModal"
     >
-      <div class="justify-start font-['Pretendard'] text-[20px] font-medium text-zinc-400">
+      <div class="justify-start text-[20px] font-medium text-gray-b4">
         선택 지역의 리뷰 게시글을 작성해보세요.
       </div>
       <Stick class="ml-[50px] h-[60px]" filled="false" :font-controlled="false"></Stick>
       <Pencil class="ml-[20px] h-[22px] w-[22px]" filled="false" :font-controlled="false"></Pencil>
     </div>
 
-    <div class="justify-start text-2xl font-semibold text-zinc-900">
-      <span class="font-['Pretendard'] text-2xl font-semibold text-blue-500">
+    <div class="justify-start text-[24px] font-semibold text-zinc-900">
+      <span class="text-[24px] font-semibold text-primary">
         {{ selectedAddress || "지역을 선택해주세요" }}
       </span>
       의 리뷰 게시글
     </div>
 
     <div class="mt-[28px] flex gap-[254px]">
-      <div class="justify-start text-2xl font-semibold text-zinc-900">
-        <span class="font-['Pretendard'] text-2xl font-semibold text-zinc-900">총 {{ " " }}</span>
-        <span class="font-['Pretendard'] text-2xl font-semibold text-blue-500">
+      <div class="justify-start text-[24px] font-semibold text-zinc-900">
+        <span class="text-[24px] font-semibold text-gray-1a">총 {{ " " }}</span>
+        <span class="text-[24px] font-semibold text-primary">
           {{ posts?.length || 0 }}
         </span>
-        <span class="font-['Pretendard'] text-2xl font-semibold text-zinc-900">개</span>
+        <span class="font-['Pretendard'] text-2xl font-semibold text-gray-1a">개</span>
       </div>
       <div class="relative">
         <div
-          class="flex h-8 w-20 items-center justify-center gap-1 rounded-[5px] border border-zinc-400 bg-white"
+          class="flex h-8 w-20 items-center justify-center gap-1 rounded-[5px] border border-gray-b4 bg-background"
           @click="handleToggle"
         >
-          <p
-            class="cursor-pointer justify-start font-['Pretendard'] text-sm font-semibold leading-normal text-zinc-400"
-          >
+          <p class="cursor-pointer justify-start text-[16px] font-semibold text-gray-b4">
             {{ selectedOption }}
           </p>
           <DropDownIcon class="h-[19px] w-[19px]" filled="false" :font-controlled="false" />
         </div>
         <div
           v-if="ToggleOpen"
-          class="absolute left-0 top-full z-10 mt-1 w-20 rounded-[5px] border bg-white shadow-lg"
+          class="absolute left-0 top-full z-10 mt-1 w-20 rounded-[5px] border bg-background shadow-lg"
         >
           <div
             v-for="option in options"
             :key="option"
-            class="cursor-pointer px-3 py-2 text-sm font-semibold text-zinc-400 hover:bg-gray-50"
+            class="cursor-pointer px-3 py-2 text-[16px] font-semibold text-gray-b4 hover:bg-gray-50"
             @click="selectOption(option)"
           >
             {{ option }}
@@ -55,18 +53,18 @@
     </div>
 
     <div v-if="isLoading" class="mt-[21px] flex h-[526px] w-[400px] items-center justify-center">
-      <div class="text-zinc-400">게시글을 불러오는 중...</div>
+      <div class="text-gray-b4">게시글을 불러오는 중...</div>
     </div>
 
     <div v-else-if="error" class="mt-[21px] flex h-[526px] w-[400px] items-center justify-center">
-      <div class="text-red-500">게시글을 불러오는데 실패했습니다.</div>
+      <div class="text-destructive">게시글을 불러오는데 실패했습니다.</div>
     </div>
 
     <div
       v-else-if="!posts || posts.length === 0"
       class="mt-[21px] flex h-[526px] w-[400px] items-center justify-center"
     >
-      <div class="text-zinc-400">아직 작성된 게시글이 없습니다.</div>
+      <div class="text-gray-b4">아직 작성된 게시글이 없습니다.</div>
     </div>
 
     <!-- 게시글 목록 -->
@@ -79,19 +77,19 @@
           :writer="post.userId.toString()"
           :date="post.createdAt"
           :comment="post.content"
-          :comment-count="0"
+          :comment-count="post.commentCount"
           :like-count="post.likeCount"
           :user-id="1"
           :post-id="post.postId"
           @click="handlePostClick(post.postId)"
         />
 
-        <div v-if="openedPostId === post.postId" class="mt-[10px] bg-gray-50 p-4">
+        <div v-if="openedPostId === post.postId" class="relative mt-[10px] bg-gray-50 p-4">
           <div v-if="isReplyLoading" class="text-zinc-400">댓글을 불러오는 중...</div>
           <!-- <div v-else-if="isReplyError" class="text-red-500">댓글을 불러오는데 실패했습니다.</div> -->
           <div v-for="reply in replyData?.data" :key="reply?.postId" class="mb-[10px] last:mb-0">
             <ReplyItem
-              :writer="'작성자'"
+              :writer="'익명'"
               :date="reply.createdAt"
               :comment="reply.content"
               class="border border-gray-200 bg-white shadow-sm"
@@ -100,7 +98,9 @@
           <div v-if="!replyData || replyData.data.length === 0" class="mb-[30px] text-zinc-400">
             댓글이 없습니다.
           </div>
-          <PostReply :post-id="post.postId" :opened-post-id="openedPostId"></PostReply>
+          <div class="sticky bottom-0">
+            <PostReply :post-id="post.postId" :opened-post-id="openedPostId"></PostReply>
+          </div>
         </div>
       </div>
     </div>
diff --git a/app/pages/community/_components/PostReply.vue b/app/pages/community/_components/PostReply.vue
index 240b844..de9176f 100644
--- a/app/pages/community/_components/PostReply.vue
+++ b/app/pages/community/_components/PostReply.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative box-border flex h-[62px] w-[350px] items-center justify-start rounded-[10px] border-[1.50px] border-zinc-300 bg-white p-[30px]"
+    class="relative box-border flex h-[62px] w-[360px] items-center justify-start rounded-[10px] border-[1.50px] border-gray-d9 bg-background p-[30px]"
   >
     <div class="absolute left-0">
       <input
@@ -10,26 +10,23 @@
       />
     </div>
     <button
-      v-if="replyContent.length > 0"
-      class="absolute right-0 top-0 flex items-center justify-center rounded-br-[10px] rounded-tr-[10px] bg-zinc-300 px-[21px] py-[16px]"
+      v-if="hasContent"
+      :disabled="isSubmitting"
+      :class="[
+        'absolute right-0 top-0 flex items-center justify-center rounded-br-[10px] rounded-tr-[10px] px-[21px] py-[16px] transition-colors',
+        isSubmitting ? 'cursor-not-allowed bg-gray-300' : 'hover:bg-primary-dark bg-primary',
+      ]"
+      @click="handleSubmit"
     >
-      <SendIcon
-        filled="false"
-        :font-controlled="false"
-        class="h-[30px] w-[30px]"
-        @click="handleSubmit"
-      ></SendIcon>
+      <SendIcon filled="false" :font-controlled="false" class="h-[30px] w-[30px]" />
     </button>
+
     <button
-      v-if="replyContent.trim() !== 0"
-      class="absolute right-0 top-0 flex items-center justify-center rounded-br-[10px] rounded-tr-[10px] bg-primary px-[21px] py-[16px]"
+      v-else
+      disabled
+      class="absolute right-0 top-0 flex cursor-not-allowed items-center justify-center rounded-br-[10px] rounded-tr-[10px] bg-zinc-300 px-[21px] py-[16px]"
     >
-      <SendIcon
-        filled="false"
-        :font-controlled="false"
-        class="h-[30px] w-[30px]"
-        @click="handleSubmit"
-      ></SendIcon>
+      <SendIcon filled="false" :font-controlled="false" class="h-[30px] w-[30px] opacity-50" />
     </button>
   </div>
 </template>
@@ -57,13 +54,14 @@ const { mutate: createReply } = useMutation({
   },
   onSuccess: (data) => {
     console.log("댓글생성 성공:", data);
-    //게시글 목록 캐시 무효화 (새로 고침)
+    // 게시글 목록도 새로고침 (commentCount 업데이트를 위해)
+    queryClient.invalidateQueries({
+      queryKey: ["posts"],
+    });
+    //댓글 목록 캐시 무효화 (새로 고침)
     queryClient.invalidateQueries({
       queryKey: ["replies", props.postId],
     });
-    alert("게시글이 성공적으로 등록되었습니다!");
-    // emit("success");
-    // emit("close");
   },
   onError: (error) => {
     console.error("댓글생성 실패:", error);
@@ -80,4 +78,8 @@ const handleSubmit = () => {
   createReply({ replyContent: replyContent.value, userId: 1, postId: props.postId });
   replyContent.value = "";
 };
+
+const hasContent = computed(() => {
+  return replyContent.value.trim().length > 0;
+});
 </script>
diff --git a/app/pages/community/_components/ReplyItem.vue b/app/pages/community/_components/ReplyItem.vue
index 0ed0309..737f166 100644
--- a/app/pages/community/_components/ReplyItem.vue
+++ b/app/pages/community/_components/ReplyItem.vue
@@ -1,24 +1,18 @@
 <template>
   <div
-    class="hover:bg-gray-70 box-border flex h-[200px] cursor-pointer flex-col rounded-[10px] p-[30px]"
+    class="hover:bg-gray-70 box-border flex h-[150px] cursor-pointer flex-col rounded-[10px] p-[30px]"
   >
-    <div
-      class="mb-[5px] justify-start font-['Pretendard'] text-lg font-semibold leading-tight text-zinc-900"
-    >
+    <div class="mb-[5px] justify-start text-[20px] font-semibold leading-tight text-gray-1a">
       {{ writer }}
     </div>
-    <div
-      class="mb-[15px] justify-start font-['Pretendard'] text-base font-normal leading-tight text-neutral-400"
-    >
+    <div class="mb-[15px] justify-start text-base font-normal text-gray-8f">
       {{ dayjs(date).format("YYYY-MM-DD") }}
     </div>
-    <div
-      class="mb-[10px] justify-start font-['Pretendard'] text-base font-normal leading-normal text-zinc-900"
-    >
+    <div class="mb-[10px] justify-start text-base font-normal text-gray-1a">
       {{ comment }}
     </div>
 
-    <div class="hidden h-48 w-96 rounded-[10px] bg-blue-50" />
+    <div class="hidden h-48 w-96 rounded-[10px] bg-secondary" />
   </div>
 </template>
 
diff --git a/app/pages/community/_components/SearchBar.vue b/app/pages/community/_components/SearchBar.vue
index 5431c2d..a2540ce 100644
--- a/app/pages/community/_components/SearchBar.vue
+++ b/app/pages/community/_components/SearchBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="absolute left-[155px] top-[90px]">
     <div
-      class="relative z-50 flex h-[70px] items-center justify-center gap-[20px] rounded-[100px] bg-white px-[50px] py-5 shadow-[0px_0px_12px_0px_rgba(0,0,0,0.15)] outline outline-[3px] outline-[rgb(var(--primary))]"
+      class="relative z-50 flex h-[70px] items-center justify-center gap-[20px] rounded-[100px] bg-background px-[50px] py-5 shadow-[0px_0px_12px_0px_rgba(0,0,0,0.15)] outline outline-[3px] outline-[rgb(var(--primary))]"
     >
       <div class="flex items-center gap-[20px]">
         <BlueSearch class="h-[30px] w-[30px]" filled="false" :font-controlled="false"></BlueSearch>
diff --git a/app/pages/community/_modals/PostComment.vue b/app/pages/community/_modals/PostComment.vue
index 8375711..c4f7a3b 100644
--- a/app/pages/community/_modals/PostComment.vue
+++ b/app/pages/community/_modals/PostComment.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="flex h-[653px] w-[880px] flex-col items-center justify-start rounded-2xl bg-white px-[52px] py-[60px]"
+    class="flex flex-col items-start justify-start rounded-2xl bg-background px-[52px] py-[60px]"
   >
     <!-- 헤더 -->
-    <div class="mb-[37px] flex w-full items-center">
+    <div class="mb-[20px] flex items-center justify-center">
       <BackIcon
         filled="false"
         :font-controlled="false"
@@ -12,31 +12,31 @@
       />
       <div
         v-if="selectedAddress"
-        class="mr-[198px] justify-start text-[32px] font-semibold text-zinc-900"
+        class="mr-[198px] justify-start whitespace-nowrap text-[32px] font-[600] text-gray-1a"
       >
-        <span class="text-[32px] font-semibold text-blue-500">
+        <span class="text-[32px] font-semibold text-primary">
           {{ selectedAddress }}
         </span>
         에 게시글 작성
       </div>
-      <div v-else class="mr-[198px] justify-start text-[32px] font-semibold text-zinc-900">
+      <div v-else class="mr-[198px] justify-start text-[32px] font-semibold text-gray-1a">
         지역을 검색해주세요.
       </div>
       <button
-        class="inline-flex items-center justify-center gap-2.5 rounded-[10px] bg-blue-500 px-[30px] py-[10px]"
+        class="inline-flex items-center justify-center gap-2.5 whitespace-nowrap rounded-[10px] bg-primary px-[30px] py-[10px]"
         @click="handleSubmit"
       >
-        <div class="box-border justify-start text-[28px] font-semibold text-white">등록</div>
+        <div class="box-border justify-start text-[28px] font-[600] text-background">등록</div>
       </button>
     </div>
 
     <!-- 구분선 -->
-    <div class="mb-[37px] h-[1px] w-[768px] bg-[#B4B4B4]"></div>
+    <div class="mb-[20px] h-[1px] w-full bg-[#B4B4B4]"></div>
 
     <!-- 입력 영역 -->
     <textarea
       v-model="postContent"
-      class="h-[400px] w-[768px] resize-none rounded-[10px] p-4 text-[28px] focus:border-blue-500 focus:outline-none"
+      class="h-[400px] w-full resize-none rounded-[10px] text-[28px] focus:border-primary focus:outline-none"
       :placeholder="placeholderText"
       style="font-size: 28px; color: #b4b4b4"
     ></textarea>
@@ -135,8 +135,8 @@ const handleSubmit = () => {
 
 <style scoped>
 textarea::placeholder {
-  font-size: 18px;
+  font-size: 24px;
   color: #b4b4b4;
-  line-height: 1.5;
+  line-height: 1.8;
 }
 </style>
diff --git a/app/pages/community/index.vue b/app/pages/community/index.vue
index 9ad3a09..a57bda7 100644
--- a/app/pages/community/index.vue
+++ b/app/pages/community/index.vue
@@ -1,31 +1,34 @@
 <template>
   <div class="relative flex justify-center">
     <div
-      class="absolute left-[120px] top-0 z-20 h-[871px] w-[488px] rounded-br-[30px] rounded-tr-[30px] bg-white shadow-[10px_15px_6px_0px_rgba(0,0,0,0.15)]"
+      class="absolute left-[120px] top-0 z-20 h-[871px] w-[488px] rounded-br-[30px] rounded-tr-[30px] bg-background shadow-[10px_15px_6px_0px_rgba(0,0,0,0.15)]"
     >
-      <div v-if="currentTab === 'community'" class="sticky top-[15px] flex justify-center">
+      <div
+        v-if="currentTab === 'community'"
+        class="sticky top-0 flex justify-center bg-background pt-[15px]"
+      >
         <div
-          class="cursor-pointer rounded-full bg-primary px-[70px] py-[15px] font-['Pretendard'] text-2xl font-semibold text-gray-fe"
+          class="cursor-pointer rounded-full bg-primary px-[70px] py-[15px] text-[24px] font-[500] text-gray-fe"
           @click="handleTabCommunity"
         >
           커뮤니티
         </div>
         <div
-          class="cursor-pointer rounded-full px-[70px] py-[15px] font-['Pretendard'] text-2xl font-semibold text-gray-b4"
+          class="cursor-pointer rounded-full px-[70px] py-[15px] text-[24px] font-[500] text-gray-b4"
           @click="handleTabStore"
         >
           제휴매장
         </div>
       </div>
-      <div v-else class="sticky top-[15px] flex justify-center">
+      <div v-else class="sticky top-0 flex justify-center bg-background pt-[15px]">
         <div
-          class="cursor-pointer rounded-full px-[70px] py-[15px] font-['Pretendard'] text-2xl font-semibold text-gray-b4"
+          class="cursor-pointer rounded-full px-[70px] py-[15px] text-[24px] font-[500] text-gray-b4"
           @click="handleTabCommunity"
         >
           커뮤니티
         </div>
         <div
-          class="cursor-pointer rounded-full bg-primary px-[70px] py-[15px] font-['Pretendard'] text-2xl font-semibold text-gray-fe"
+          class="cursor-pointer rounded-full bg-primary px-[70px] py-[15px] font-['Pretendard'] text-[24px] font-[500] text-gray-fe"
           @click="handleTabStore"
         >
           제휴매장
@@ -36,9 +39,7 @@
           <div v-if="!roadCode || !buildingNumber">
             <div class="mt-[264px] flex flex-col items-center justify-center gap-[30px]">
               <MapIcon class="h-[122px] w-[110px]" filled="false" :font-controlled="false" />
-              <div
-                class="justify-start text-center text-[26px] font-medium leading-9 text-neutral-400"
-              >
+              <div class="justify-start text-center text-[26px] font-medium text-gray-8f">
                 지도에서 위치를 검색하여
                 <br />
                 커뮤니티 게시글을 확인하세요.
@@ -63,7 +64,7 @@
     </div>
     <div
       id="map"
-      class="absolute left-[598px] top-0 z-10 h-[871px] w-[897px] rounded-[20px] bg-black"
+      class="absolute left-[598px] top-0 z-10 h-[871px] w-[897px] rounded-[20px] bg-gray-1a"
     >
       <SearchBar @search-address="searchAddress"></SearchBar>
     </div>
diff --git a/app/pages/credit/_components/StoreItem.vue b/app/pages/credit/_components/StoreItem.vue
index bf026a9..68f81a0 100644
--- a/app/pages/credit/_components/StoreItem.vue
+++ b/app/pages/credit/_components/StoreItem.vue
@@ -10,7 +10,7 @@
       <div
         class="h-12 w-auto justify-start font-['Pretendard'] text-[20px] font-normal leading-[50.31px] text-zinc-900"
       >
-        주소 : {{ address }}
+        {{ address }}
       </div>
     </div>
   </div>
diff --git a/app/pages/credit/creditStore.vue b/app/pages/credit/creditStore.vue
index 75bc4cd..f1cb180 100644
--- a/app/pages/credit/creditStore.vue
+++ b/app/pages/credit/creditStore.vue
@@ -3,10 +3,10 @@
     <div class="flex justify-center gap-5">
       <div class="h-[60px] justify-start">
         <div class="justify-start">
-          <div class="font-['Pretendard'] text-xl font-semibold text-zinc-900">
+          <div class="font-['Pretendard'] text-xl font-[500] text-zinc-900">
             사용 가능한 제휴 매장이 가까이 있습니다.
           </div>
-          <div class="font-['Pretendard'] text-xl font-semibold text-blue-500">
+          <div class="font-['Pretendard'] text-xl font-[600] text-blue-500">
             지금 제휴처를 확인하고, 크레딧을 사용해보세요.
           </div>
         </div>
@@ -21,7 +21,7 @@
           현재 보유 크레딧 :
         </span>
         <span class="font-['Pretendard'] text-xl font-semibold leading-10 text-blue-500">
-          1,500P
+          {{ currentCredit.toLocaleString() }}
         </span>
       </div>
       <div
@@ -33,11 +33,11 @@
         >
           생성
         </button>
-        <div
-          class="absolute left-[21px] top-0 justify-start font-['Pretendard'] text-base font-semibold leading-10 text-zinc-900"
-        >
-          1,000
-        </div>
+        <input
+          v-model="usingCredit"
+          class="absolute left-[21px] top-0 justify-start font-['Pretendard'] text-base font-semibold leading-10 text-zinc-900 outline-none"
+          placeholder="사용할 크레딧 입력"
+        />
       </div>
     </div>
     <div class="h-[480px] overflow-y-auto overflow-x-hidden">
@@ -49,7 +49,7 @@
         />
         <div v-if="index !== dummy.length - 1" class="my-[43px]">
           <div
-            class="h-0 w-[446px] outline outline-[1.50px] outline-offset-[-0.75px] outline-zinc-400"
+            class="h-0 w-[446px] outline outline-[1.50px] outline-offset-[-0.75px] outline-[#D9D9D9]"
           />
         </div>
       </div>
@@ -67,11 +67,28 @@
 import StoreItem from "./_components/StoreItem.vue";
 import storeImage from "~/assets/image/storeImage.jpg";
 import BarcodeModal from "./_modals/Barcode.vue";
+import VictoryImg from "~/assets/image/victorySuper.jpg";
+import FlowerImg from "~/assets/image/flowerGimbap.jpg";
+import Amisan from "~/assets/image/amisan.jpg";
 
 const showBarcodeModal = ref(false);
+const currentCredit = ref(1500); //현재 크레딧 = 현재크레딧 - 입력크레딧
+const usingCredit = ref(null); //입력 크레딧
+
+const handleCredit = () => {
+  if (usingCredit.value) {
+    if (usingCredit.value <= currentCredit.value) {
+      currentCredit.value = currentCredit.value - usingCredit.value;
+    } else {
+      alert("사용 금액이 현재 크레딧을 초과할 수 없습니다.");
+      showBarcodeModal.value = false;
+    }
+  }
+};
 
 const openBarcodeModal = () => {
   showBarcodeModal.value = true;
+  handleCredit();
 };
 
 const closeBarcodeModal = () => {
@@ -81,21 +98,21 @@ const closeBarcodeModal = () => {
 const dummy = ref([
   {
     id: 0,
-    storeName: "중앙톤 스토어1",
-    address: "서울 서초구 양재로 232",
-    image: storeImage,
+    storeName: "영광수퍼",
+    address: "서울 서대문구 연희로 204",
+    image: VictoryImg,
   },
   {
     id: 1,
-    storeName: "중앙톤 스토어2",
-    address: "서울 서초구 양재로 232",
-    image: storeImage,
+    storeName: "봄꽃김밥",
+    address: "서울 서대문구 연희로36길 10",
+    image: FlowerImg,
   },
   {
     id: 2,
-    storeName: "중앙톤 스토어3",
-    address: "서울 서초구 양재로 232",
-    image: storeImage,
+    storeName: "아미산",
+    address: "서울 서대문구 연희로32길 151",
+    image: Amisan,
   },
   {
     id: 3,
diff --git a/app/pages/report/_components/Upload.vue b/app/pages/report/_components/Upload.vue
index 86056fe..b242011 100644
--- a/app/pages/report/_components/Upload.vue
+++ b/app/pages/report/_components/Upload.vue
@@ -1,9 +1,11 @@
 <template>
-  <div class="relative z-10 flex h-[439px] w-[341px] flex-col items-center gap-[30px]">
-    <div class="justify-start text-center text-[26px] font-normal leading-loose text-zinc-900">
+  <div class="relative z-10 flex h-[439px] w-[341px] flex-col items-center gap-[25px]">
+    <div class="justify-start text-center text-[24px] font-[400] leading-loose text-foreground">
       {{ fileName }}
     </div>
-    <div class="flex h-96 w-80 flex-col items-center rounded-2xl bg-blue-50 py-[40px] pt-[47px]">
+    <div
+      class="flex w-[341px] flex-col items-center rounded-[15px] bg-secondary px-[40px] py-[47px]"
+    >
       <CloudIcon
         alt="cloud"
         class="mb-[20px] h-[60px] w-[60px]"
@@ -11,37 +13,29 @@
         :font-controlled="false"
       />
       <button
-        class="mb-[40px] justify-start whitespace-nowrap rounded-[10px] bg-blue-500 px-[30px] py-[8px] text-center font-['Pretendard'] text-[18px] font-[600] leading-7 text-white"
+        class="mb-[40px] justify-start whitespace-nowrap rounded-[10px] bg-primary px-[30px] py-[8px] text-center text-[18px] font-[500] leading-7 text-gray-fe"
         @click="openModal"
       >
         {{ btnName }}
       </button>
       <div
-        class="mb-[20px] justify-start text-center font-['Pretendard'] text-xl font-normal leading-loose text-neutral-400"
+        class="mb-[20px] justify-start text-center font-['Pretendard'] text-[20px] font-[400] text-gray-8f"
       >
         - 업로드 유의사항 -
       </div>
-      <div class="flex flex-col justify-center text-center leading-6">
-        <div class="font-['Pretendard'] text-xl font-normal text-neutral-400">
-          파일 형식 : PDF 지원 (1개)
-        </div>
-        <div class="font-['Pretendard'] text-xl font-normal text-neutral-400">
-          파일 크기 : 50MB 이내
-        </div>
+      <div class="flex flex-col justify-center text-center">
+        <div class="text-[20px] font-normal text-gray-8f">파일 형식 : PDF 지원 (1개)</div>
+        <div class="text-[20px] font-normal text-gray-8f">파일 크기 : 50MB 이내</div>
       </div>
     </div>
     <div class="flex flex-col items-center justify-center gap-[15px]">
-      <div
-        class="justify-start text-center font-['Pretendard'] text-xl font-semibold leading-loose text-neutral-400"
-      >
+      <div class="justify-start text-center text-[20px] font-[600] text-gray-8f">
         업로드 된 파일
       </div>
       <div
-        class="flex h-[90px] w-[341px] items-center justify-center gap-[30px] rounded-[10px] border border-neutral-400 bg-white"
+        class="flex h-[90px] w-[341px] items-center justify-center gap-[30px] rounded-[10px] border border-gray-8f bg-background"
       >
-        <div
-          class="justify-start text-center font-['Pretendard'] text-[20px] font-normal leading-6 text-zinc-900"
-        >
+        <div class="justify-start text-center text-[20px] font-[400] text-foreground">
           {{ displayFileName }}
         </div>
         <TrashIcon
@@ -57,8 +51,8 @@
       v-if="modalStore.isOpen('pdf-select')"
       class="fixed inset-0 z-50 flex items-center justify-center"
     >
-      <div class="absolute inset-0 bg-zinc-900/40" @click="closeModal"></div>
-      <div class="z-60 relative">
+      <div class="absolute inset-0 bg-[rgba(26,26,26,0.40)]" @click="closeModal"></div>
+      <div class="relative z-[9999]">
         <PdfUploadModal @close="closeModal" />
       </div>
     </div>
@@ -66,8 +60,8 @@
       v-if="modalStore.isOpen('report-select')"
       class="fixed inset-0 z-50 flex items-center justify-center"
     >
-      <div class="absolute inset-0 bg-zinc-900/40" @click="closeModal"></div>
-      <div class="z-60 relative">
+      <div class="absolute inset-0 bg-[rgba(26,26,26,0.40)]" @click="closeModal"></div>
+      <div class="relative z-[9999]">
         <ReportUploadModal @close="closeModal" />
       </div>
     </div>
diff --git a/app/pages/report/_modals/UploadComplete.vue b/app/pages/report/_modals/UploadComplete.vue
index f952450..fd3ba84 100644
--- a/app/pages/report/_modals/UploadComplete.vue
+++ b/app/pages/report/_modals/UploadComplete.vue
@@ -1,33 +1,31 @@
 <template>
   <div
-    class="flex h-[487px] w-[676px] flex-col items-center rounded-[15px] bg-white px-[100px] py-[60px]"
+    class="flex h-[487px] w-[676px] flex-col items-center rounded-[15px] bg-background px-[100px] py-[60px]"
   >
     <CheckIcon filled="false" :font-controlled="false" class="h-[95px] w-[95px]"></CheckIcon>
     <div
-      class="mb-[20px] mt-[34px] justify-start font-['Pretendard'] text-3xl font-semibold text-zinc-900"
+      class="mb-[20px] mt-[34px] justify-start font-['Pretendard'] text-[32px] font-[600] text-gray-1a"
     >
       신고 접수가 완료되었습니다.
     </div>
     <div class="mb-[30px] justify-start text-center">
-      <span class="font-['Pretendard'] text-2xl font-normal leading-6 text-neutral-400">
+      <span class="text-[24px] font-[400] leading-6 text-gray-8f">
         소중한 신고 감사합니다.
         <br />
         감사 크레딧
       </span>
-      <span class="font-['Pretendard'] text-2xl font-semibold leading-6 text-blue-500">500P</span>
-      <span class="font-['Pretendard'] text-2xl font-normal leading-6 text-neutral-400">
-        가 적립되었습니다.
-      </span>
+      <span class="text-[24px] font-[600] leading-6 text-primary">500P</span>
+      <span class="text-[24px] font-[400] leading-6 text-gray-8f">가 적립되었습니다.</span>
     </div>
     <div class="flex gap-10">
       <button
-        class="flex h-16 w-56 items-center justify-center rounded-[10px] bg-[#B4B4B4] text-[26px] font-semibold text-white"
+        class="flex h-16 w-56 items-center justify-center rounded-[10px] bg-gray-b4 text-[26px] font-[600] text-background"
         @click="handleClose"
       >
         닫기
       </button>
       <button
-        class="flex h-16 w-56 items-center justify-center rounded-[10px] bg-blue-500 text-[26px] font-semibold text-white"
+        class="flex h-16 w-56 items-center justify-center rounded-[10px] bg-primary text-[26px] font-[600] text-background"
         @click="handleCreditCheck"
       >
         크레딧 확인
diff --git a/app/pages/report/index.vue b/app/pages/report/index.vue
index 9e478d2..e911b89 100644
--- a/app/pages/report/index.vue
+++ b/app/pages/report/index.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col items-center">
+  <div class="mt-[30px] flex flex-col items-center">
     <div class="flex flex-col items-center justify-center leading-10">
-      <div class="font-['Pretendard'] text-[28px] font-bold leading-10 text-[#2D8AE7]">
+      <div class="text-[28px] font-bold leading-10 text-primary">
         신고해주신 정보는 다른 임차인들의 피해 예방을 위해 소중히 활용 됩니다.
       </div>
-      <div class="font-['Pretendard'] text-[28px] font-bold leading-10 text-[#2D8AE7]">
+      <div class="text-[28px] font-bold leading-10 text-primary">
         신고시 소중한 제보에 감사한 마음을 담아 크레딧을 드립니다.
       </div>
       <div class="mt-[50px] flex h-[643px] justify-center gap-[80px]">
@@ -19,15 +19,13 @@
           type="pdf"
         ></Upload>
       </div>
-      <div
-        class="mt-[40px] justify-start font-['Pretendard'] text-2xl font-normal text-neutral-400"
-      >
+      <div class="mt-[40px] justify-start text-[24px] font-[400] text-gray-8f">
         ※ 상기 서류가 모두 구비되어야 신고 접수가 가능합니다.
       </div>
       <button
         :class="[
-          'mb-[160px] mt-[35px] flex h-20 w-[762px] items-center justify-center rounded-[10px] text-3xl font-semibold leading-7',
-          fileStore.canSubmit ? 'bg-blue-500 text-white' : 'bg-zinc-400 text-white',
+          'mb-[160px] mt-[35px] flex h-20 w-[762px] items-center justify-center rounded-[10px] text-3xl font-[600]',
+          fileStore.canSubmit ? 'bg-primary text-background' : 'bg-gray-b4 text-background',
         ]"
         :disabled="!fileStore.canSubmit"
         @click="handleReport"
@@ -36,7 +34,7 @@
       </button>
       <div
         v-if="isModalOpen"
-        class="fixed inset-0 z-50 flex items-center justify-center bg-zinc-900/40"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-[rgba(26,26,26,0.40)]"
       >
         <UploadComplete @close="closeModal" @check-credit="handleCreditCheck" />
       </div>