diff --git a/app/assets/icon/help-circle.svg b/app/assets/icon/help-circle.svg
new file mode 100644
index 0000000..51fddd8
--- /dev/null
+++ b/app/assets/icon/help-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
\ No newline at end of file
diff --git a/app/assets/image/reportExample.jpg b/app/assets/image/reportExample.jpg
new file mode 100644
index 0000000..87cb9f3
Binary files /dev/null and b/app/assets/image/reportExample.jpg differ
diff --git a/app/components/Tooltip.vue b/app/components/Tooltip.vue
new file mode 100644
index 0000000..faa320e
--- /dev/null
+++ b/app/components/Tooltip.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="relative inline-block">
+    <div
+      @mouseenter="showTooltip = true"
+      @mouseleave="showTooltip = false"
+      @focus="showTooltip = true"
+      @blur="showTooltip = false"
+    >
+      <slot />
+    </div>
+
+    <Transition
+      enter-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-opacity duration-200"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="showTooltip"
+        :class="[
+          'absolute z-50 whitespace-nowrap rounded-lg bg-gray-800 px-3 py-2 text-[16px] font-normal text-white shadow-lg',
+          'pointer-events-none',
+          positionClasses,
+        ]"
+      >
+        {{ content }}
+        <div :class="['absolute h-2 w-2 rotate-45 bg-gray-800', arrowClasses]"></div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+
+interface Props {
+  content: string;
+  position?: "top" | "bottom" | "left" | "right";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  position: "top",
+});
+
+const showTooltip = ref(false);
+
+const positionClasses = computed(() => {
+  switch (props.position) {
+    case "top":
+      return "bottom-full left-1/2 transform -translate-x-1/2 mb-2";
+    case "bottom":
+      return "top-full left-1/2 transform -translate-x-1/2 mt-2";
+    case "left":
+      return "right-full top-1/2 transform -translate-y-1/2 mr-2";
+    case "right":
+      return "left-full top-1/2 transform -translate-y-1/2 ml-2";
+    default:
+      return "bottom-full left-1/2 transform -translate-x-1/2 mb-2";
+  }
+});
+
+const arrowClasses = computed(() => {
+  switch (props.position) {
+    case "top":
+      return "top-full left-1/2 transform -translate-x-1/2 -mt-1";
+    case "bottom":
+      return "bottom-full left-1/2 transform -translate-x-1/2 -mb-1";
+    case "left":
+      return "left-full top-1/2 transform -translate-y-1/2 -ml-1";
+    case "right":
+      return "right-full top-1/2 transform -translate-y-1/2 -mr-1";
+    default:
+      return "top-full left-1/2 transform -translate-x-1/2 -mt-1";
+  }
+});
+</script>
diff --git a/app/pages/analyze/_components/FormPanel.vue b/app/pages/analyze/_components/FormPanel.vue
index bc269fe..ec34d0d 100644
--- a/app/pages/analyze/_components/FormPanel.vue
+++ b/app/pages/analyze/_components/FormPanel.vue
@@ -4,6 +4,7 @@ import { useForm } from "@tanstack/vue-form";
 import { useFileStore } from "~/stores/file";
 import { formSchema } from "../_utils/formSchema";
 import type z from "zod";
+import HelpCircle from "~/assets/icon/help-circle.svg";
 
 const fileStore = useFileStore();
 
@@ -92,7 +93,7 @@ const emit = defineEmits<{
             <button
               type="button"
               :class="[
-                'rounded-[10px] border border-primary px-[100px] py-[30px] text-center text-[26px] font-[400] text-primary transition-colors',
+                'rounded-[10px] border border-primary px-[100px] py-[24px] text-center text-[26px] font-[400] text-primary transition-colors',
                 field.state.value === '전세' ? 'border-2 bg-secondary font-[600]' : 'border-1',
               ]"
               @click="field.handleChange('전세')"
@@ -102,7 +103,7 @@ const emit = defineEmits<{
             <button
               type="button"
               :class="[
-                'rounded-[10px] border border-primary px-[100px] py-[30px] text-center text-[26px] font-[400] text-primary transition-colors',
+                'rounded-[10px] border border-primary px-[100px] py-[24px] text-center text-[26px] font-[400] text-primary transition-colors',
                 field.state.value === '월세' ? 'border-2 bg-secondary font-[600]' : 'border-1',
               ]"
               @click="field.handleChange('월세')"
@@ -116,7 +117,19 @@ const emit = defineEmits<{
 
     <!-- 2. 보증금 입력 -->
     <div>
-      <span class="text-[26px] font-[400] text-foreground">2. 보증금 입력</span>
+      <span class="inline-flex items-center gap-2 text-[26px] font-[400] text-foreground">
+        2. 보증금 입력
+        <Tooltip
+          content="보증금은 안전지수 분석에 활용되므로, 해당 매물의 실제 금액을 정확히 입력해 주세요."
+          position="top"
+        >
+          <HelpCircle
+            class="h-[16px] w-[16px] cursor-help text-primary"
+            :font-controlled="false"
+            filled="false"
+          />
+        </Tooltip>
+      </span>
       <div class="mt-4 flex items-center justify-between gap-[15px]">
         <form.Field name="deposit_hundred_million">
           <template #default="{ field }">
diff --git a/app/pages/analyze/index.vue b/app/pages/analyze/index.vue
index 9ae35f6..4973fda 100644
--- a/app/pages/analyze/index.vue
+++ b/app/pages/analyze/index.vue
@@ -10,6 +10,10 @@ import { apiInstance, type BaseResponse } from "~/utils/api";
 import { useModalStore } from "~/stores/modal";
 import PdfSubmitted from "./_modals/PdfSubmitted.vue";
 
+useHead({
+  title: "등기부등본 분석하기",
+});
+
 const modalStore = useModalStore();
 
 const { mutate: submit } = useMutation<
diff --git a/app/pages/analyze/result/[reportId]/_components/ProcessAndDisclaimer.vue b/app/pages/analyze/result/[reportId]/_components/ProcessAndDisclaimer.vue
index fb20f5a..2684613 100644
--- a/app/pages/analyze/result/[reportId]/_components/ProcessAndDisclaimer.vue
+++ b/app/pages/analyze/result/[reportId]/_components/ProcessAndDisclaimer.vue
@@ -16,14 +16,14 @@ import ChevronRightBlue from "~/assets/icon/chevron-right-blue.svg";
     <!-- 절차 -->
     <div class="flex justify-center gap-[60px] py-[60px]">
       <!-- Step 1 -->
-      <ProcessStep :step="1" title="등본 업로드">
+      <ProcessStep :step="1" title="전처리">
         <template #icon>
           <AnalysisStep1 class="h-[180px] w-[180px]" :font-controlled="false" filled="false" />
         </template>
         <template #description>
-          업로드 한 등본을
+          업로드 한 등기부등본을
           <br />
-          AI가 분석합니다.
+          전처리 후, AI가 분석을 시작합니다.
         </template>
       </ProcessStep>
       <ChevronRightBlue
@@ -37,7 +37,7 @@ import ChevronRightBlue from "~/assets/icon/chevron-right-blue.svg";
           <AnalysisStep2 class="h-[180px] w-[180px]" :font-controlled="false" filled="false" />
         </template>
         <template #description>
-          등본에서 뭐뭐를 추출, 무엇의 기준을 바탕으로 등본을 계산하여 분석을 진행합니다.
+          등기부등본에서 텍스트를 추출하고, 공인된 기준들을 바탕으로 분석을 진행합니다.
         </template>
       </ProcessStep>
       <ChevronRightBlue
@@ -51,7 +51,7 @@ import ChevronRightBlue from "~/assets/icon/chevron-right-blue.svg";
           <AnalysisStep3 class="h-[180px] w-[180px]" :font-controlled="false" filled="false" />
         </template>
         <template #description>
-          안전도를 분석하여 위험도 점수를 도출합니다.
+          자체 연구하여 도출한 검증된 안전지수 공식을 바탕으로 위험도 점수를 계산합니다.
           <br />
           <br />
           0-2점: 위험
@@ -71,7 +71,7 @@ import ChevronRightBlue from "~/assets/icon/chevron-right-blue.svg";
         <template #icon>
           <AnalysisStep4 class="h-[180px] w-[180px]" :font-controlled="false" filled="false" />
         </template>
-        <template #description>AI가 종합하여 최종 결과를 자세히 내보냅니다.</template>
+        <template #description>AI가 분석 결과를 종합하여 최종 결과를 내보냅니다.</template>
       </ProcessStep>
     </div>
 
@@ -82,13 +82,17 @@ import ChevronRightBlue from "~/assets/icon/chevron-right-blue.svg";
       >
         <img src="~/assets/image/alien.png" alt="셋방살이" class="h-auto w-[130px]" />
         <span class="mt-[30px] text-[24px] font-[600] text-primary">
-          셋방살이는 (공공기관 이름)의 가이드를 바탕으로 근거를 수립했습니다.
+          셋방살이는 공공기관의 자료와 전문가의 가이드를 바탕으로 근거를 수립했습니다.
         </span>
         <span class="mt-[15px] text-[20px] font-[500] text-gray-66">
-          더 자세한 내용은 (공공기관 이름 또는 우리 노션)을 참고해주세요.
+          더 자세한 내용은
+          <a href="https://www.khug.or.kr/index.jsp" target="_blank" class="text-primary">
+            HUG 주택도시보증공사
+          </a>
+          를 참고해주세요.
         </span>
-        <p class="mt-[25px] text-[20px] font-[500] text-gray-66">
-          AI가 분석한 내용은 실제와 다를 수 있으니 확인용도로만 이용 부탁드립니다.
+        <p class="mt-[25px] text-[16px] font-[500] text-gray-66">
+          AI가 분석한 내용은 실제와 다를 수 있으며,
           <br />
           AI 분석 결과로 인한 문제 발생 시 법적 책임은 본인에게 있음을 알려드립니다.
         </p>
diff --git a/app/pages/analyze/result/[reportId]/index.vue b/app/pages/analyze/result/[reportId]/index.vue
index c82f8a7..1fe6541 100644
--- a/app/pages/analyze/result/[reportId]/index.vue
+++ b/app/pages/analyze/result/[reportId]/index.vue
@@ -3,6 +3,11 @@ import { useQuery } from "@tanstack/vue-query";
 import ProcessAndDisclaimer from "./_components/ProcessAndDisclaimer.vue";
 import { apiInstance } from "~/utils/api";
 import type { AnalyzeResultResponse } from "./_api/types/AnalyzeResultResponse";
+import { useHead } from "#app";
+
+useHead({
+  title: "분석 결과",
+});
 
 const reportId = useRoute().params.reportId;
 
diff --git a/app/pages/checklist/_components/CheckTipBox.vue b/app/pages/checklist/_components/CheckTipBox.vue
index 3a7b49f..1d213f5 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-[15px] bg-gray-f5 px-[50px] py-[30px]"
+    class="box-border flex 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-[15px] bg-primary text-[40px] text-background"
+      class="flex items-center justify-center rounded-[15px] bg-primary px-[26px] py-[10px] text-[40px] text-background"
     >
       {{ checkNum }}
     </div>
diff --git a/app/pages/checklist/index.vue b/app/pages/checklist/index.vue
index 9648c5d..caef27a 100644
--- a/app/pages/checklist/index.vue
+++ b/app/pages/checklist/index.vue
@@ -1,7 +1,7 @@
 <template>
   <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-[15px] bg-gray-f5 py-[35px]"
+      class="relative flex flex-col items-center justify-center rounded-[15px] bg-gray-f5 px-[267px] py-[36px]"
     >
       <img src="~/assets/image/checklistIcon.jpg" alt="체크리스트" class="h-[147px] w-[107px]" />
       <div
@@ -11,10 +11,10 @@
       </div>
 
       <button
-        class="h-[64px] w-[177px] justify-start rounded-[10px] bg-primary text-[28px] font-[500] text-background"
+        class="justify-start rounded-[10px] bg-primary px-[40px] py-[10px] text-[28px] font-[500] text-background"
         @click="gotoQuiz"
       >
-        퀴즈풀기
+        퀴즈 풀기
       </button>
     </div>
     <div class="mt-[90px] flex w-[896px] flex-col">
@@ -29,7 +29,7 @@
         <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 class="mb-[10px]">
+              <div class="mb-[10px] flex gap-[4px]">
                 <span class="text-[24px] font-[600] text-primary">보증보험 가입</span>
                 <span class="text-[24px] font-[600] text-gray-1a">가능 여부 확인</span>
               </div>
@@ -40,12 +40,12 @@
               </div>
             </CheckCard>
             <CheckCard card-width="413px" card-height="447px" card-img-height="240px" :img="Two">
-              <div class="mb-[10px]">
+              <div class="mb-[10px] flex gap-[4px]">
                 <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 text-[18px] font-[400] text-primary">
+                <span class="whitespace-nowrap text-[18px] font-[500] text-primary">
                   국토부 중개사 조회 사이트
                 </span>
                 <span class="text-[18px] font-[400] text-gray-1a">
@@ -58,35 +58,39 @@
               </div>
             </CheckCard>
             <CheckCard card-width="413px" card-height="570px" card-img-height="240px" :img="Three">
-              <div class="mb-[10px]">
+              <div class="mb-[10px] flex gap-[4px]">
                 <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="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">
+                <span class="text-[18px] font-[400] text-gray-1a">등기부등본은 부동산 또는</span>
+                <span class="text-[18px] font-[500] text-primary">대법원 인터넷등기소</span>
+                <span class="text-[18px] font-[400] text-gray-1a">
                   를 통해 반드시 확인해야할 정보입니다.
                   <br />
                   실제 집주인이 누구인지 확인하고 근저당이나 압류 여부를 확인할 수 있습니다.
                   <br />
                 </span>
-                <span class="text-base font-normal text-gray-1a">
+                <span class="text-base font-[400] text-gray-1a">
                   <br />
                 </span>
                 <span class="text-[14px] font-[400] text-primary">
                   TIP!
                   <br />
                 </span>
-                <span class="text-base font-normal text-gray-1a">
+                <span class="text-base font-[400] text-gray-1a">
                   등기부등본은 변경 가능성이 있기에 입주 전 반드시 한번 더 확인해야합니다!
                 </span>
               </div>
             </CheckCard>
             <CheckCard card-width="413px" card-height="570px" card-img-height="240px" :img="Four">
               <div class="mb-[10px]">
-                <span class="text-[24px] font-[600] text-primary">확정일자 및 전입신고</span>
-                <span class="text-[24px] font-[600] text-gray-1a">가능 여부 확인</span>
+                <span class="whitespace-nowrap text-[24px] font-[600] text-primary">
+                  확정일자 및 전입신고
+                </span>
+                <span class="whitespace-nowrap text-[24px] font-[600] text-gray-1a">
+                  가능 여부 확인
+                </span>
               </div>
               <div class="justify-start text-[18px] font-[400] text-gray-1a">
                 확정일자와 전입신고가 가능해야지만 보증금을 법적으로 보호할 수 있습니다.
@@ -102,12 +106,14 @@
         <div class="flex justify-center">
           <CheckCard :img="Five" card-width="896px" card-height="764px" card-img-height="533px">
             <div class="justify-start">
-              <span class="text-[24px] font-[600] text-primary">선순위 계약자</span>
-              <span class="text-[24px] font-[600] text-gray-1a">확인</span>
+              <div class="flex gap-1">
+                <span class="text-[24px] font-[600] text-primary">선순위 계약자</span>
+                <span class="text-[24px] font-[600] text-gray-1a">확인</span>
+              </div>
               <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">
+                <span class="text-[18px] font-[500] text-primary">
                   주민센터나 정부24에서 전세입자의 전출 여부를 확인
                 </span>
                 <span class="text-[18px] font-[400] text-gray-1a">
@@ -125,23 +131,27 @@
         </div>
       </section>
       <div
-        class="h-0 w-full outline outline-[1.50px] outline-offset-[-0.75px] outline-[#B4B4B4]"
+        class="h-0 w-full outline outline-[1.50px] outline-offset-[-0.75px] outline-gray-b4"
       ></div>
       <section class="mt-[80px]">
         <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="text-[32px] font-normal text-gray-1a">
+            <div class="justify-start">
+              <div class="text-[32px] font-[400] text-gray-1a">
                 등기부등본은 말소된 내역이 포함된
               </div>
-              <span class="text-[32px] font-semibold text-primary">등기사항 전부 증명서 유형</span>
-              <span class="text-[32px] font-normal text-gray-1a">으로 발급 받아야합니다.</span>
+              <span class="whitespace-nowrap text-[32px] font-[500] text-primary">
+                등기사항 전부 증명서 유형
+              </span>
+              <span class="whitespace-nowrap text-[32px] font-[400] text-gray-1a">
+                으로 발급 받아야합니다.
+              </span>
             </div>
           </CheckTipBox>
 
           <CheckTipBox check-num="2">
-            <div class="justify-start text-[32px] font-normal text-gray-1a">
+            <div class="justify-start text-[32px] font-[400] text-gray-1a">
               가압류, 가처분, 가등기, 근저당권 등에 대해 말소된
               <br />
               내역을 찾아야 합니다.
@@ -149,8 +159,8 @@
           </CheckTipBox>
 
           <CheckTipBox check-num="3">
-            <div class="w-[634px] justify-start">
-              <div class="justify-start whitespace-nowrap text-[32px] font-normal text-gray-1a">
+            <div class="justify-start">
+              <div class="justify-start whitespace-nowrap text-[32px] font-[400] text-gray-1a">
                 말소된 이력에 대해 임대인에게 채권자로부터 채권변제
                 <br />
                 확인서 발급을 꼭 요청해야합니다.
@@ -159,13 +169,13 @@
           </CheckTipBox>
 
           <CheckTipBox check-num="4">
-            <div class="w-[634px] justify-start">
+            <div class="justify-start">
               <div class="justify-start whitespace-nowrap">
-                <span class="text-[32px] font-normal text-gray-1a">요청을 거부한다면,</span>
-                <span class="text-[32px] font-semibold text-primary">
+                <span class="text-[32px] font-[400] text-gray-1a">요청을 거부한다면,</span>
+                <span class="text-[31px] font-[500] text-primary">
                   해당 매물은 피하는 것이 안전
                 </span>
-                <span class="text-[32px] font-normal text-gray-1a">합니다.</span>
+                <span class="text-[32px] font-[400] text-gray-1a">합니다.</span>
               </div>
             </div>
           </CheckTipBox>
@@ -184,6 +194,10 @@ import Five from "~/assets/image/checkFive.jpg";
 import CheckCard from "./_components/CheckCard.vue";
 import CheckTipBox from "./_components/CheckTipBox.vue";
 
+useHead({
+  title: "체크리스트",
+});
+
 const gotoQuiz = () => {
   navigateTo("/quiz");
 };
diff --git a/app/pages/community/_api/types/PostResponse.ts b/app/pages/community/_api/types/PostResponse.ts
index 984bd8e..cd40135 100644
--- a/app/pages/community/_api/types/PostResponse.ts
+++ b/app/pages/community/_api/types/PostResponse.ts
@@ -6,4 +6,5 @@ export interface PostResponse {
   userId: number;
   createdAt: string;
   modifiedAt: string;
+  likeByUser: boolean;
 }
diff --git a/app/pages/community/_components/CommentItem.vue b/app/pages/community/_components/CommentItem.vue
index ca4e2f5..8c016e0 100644
--- a/app/pages/community/_components/CommentItem.vue
+++ b/app/pages/community/_components/CommentItem.vue
@@ -1,16 +1,16 @@
 <template>
   <div
-    class="box-border flex h-[200px] w-[400px] cursor-pointer flex-col rounded-[10px] p-[30px] hover:bg-blue-50"
+    class="box-border flex cursor-pointer flex-col rounded-[10px] px-[30px] py-[26px] hover:bg-secondary"
   >
-    <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">
+    <div class="mb-[5px] justify-start text-[20px] font-[600] text-gray-1a">익명</div>
+    <div class="mb-[15px] justify-start text-[16px] font-[400] text-gray-b4">
       {{ dayjs(date).format("YYYY-MM-DD") }}
     </div>
-    <div class="mb-[10px] justify-start text-base font-normal text-gray-1a">
+    <div class="mb-[10px] justify-start text-[20px] font-[400] text-gray-1a">
       {{ comment }}
     </div>
     <div class="flex items-start justify-start gap-[20px]">
-      <div class="flex justify-start gap-[10px]" @click="handleClickLike">
+      <div class="flex justify-start gap-[10px]" @click.stop="handleClickLike">
         <FilledLike
           v-if="isLike"
           class="h-4 w-4"
@@ -19,18 +19,18 @@
         ></FilledLike>
 
         <Like v-else class="h-4 w-4" filled="false" :font-controlled="false" />
-        <div class="justify-start text-base font-normal text-gray-b4">
-          {{ likeCount }}
+        <div class="justify-start text-[18px] font-[400] text-gray-b4">
+          {{ currentLikeCount }}
         </div>
       </div>
       <div class="flex justify-start gap-[10px]">
         <CommentIcon class="h-4 w-4" filled="false" :font-controlled="false" />
-        <div class="justify-start text-base font-normal text-gray-b4">
+        <div class="justify-start text-[18px] font-[400] text-gray-b4">
           {{ commentCount }}
         </div>
       </div>
     </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>
 
@@ -39,25 +39,75 @@ import CommentIcon from "~/assets/icon/commentIcon.svg";
 import Like from "~/assets/icon/like.svg";
 import FilledLike from "~/assets/icon/filledHeart.svg";
 import dayjs from "dayjs";
-import { useMutation, useQueryClient } from "@tanstack/vue-query";
+import { useMutation } from "@tanstack/vue-query";
 import { apiInstance } from "~/utils/api";
 
-const isLike = ref(false);
+const props = defineProps({
+  writer: {
+    type: String,
+    default: "작성자",
+  },
+  date: {
+    type: String,
+    default: "",
+  },
+  comment: {
+    type: String,
+    default: "",
+  },
+  commentCount: {
+    type: Number,
+    default: 1,
+  },
+  likeCount: {
+    type: Number,
+    default: 1,
+  },
+  userId: {
+    type: Number,
+    default: 1,
+  },
+  postId: {
+    type: Number,
+    required: true,
+  },
+  likeByUser: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// props.likeByUser로 초기값 설정
+const isLike = ref(props.likeByUser);
+const currentLikeCount = ref(props.likeCount);
+
+// props가 변경될 때 isLike 상태도 업데이트
+watch(
+  () => props.likeByUser,
+  (newValue) => {
+    isLike.value = newValue;
+  }
+);
+
+// likeCount props가 변경될 때 currentLikeCount도 업데이트
+watch(
+  () => props.likeCount,
+  (newValue) => {
+    currentLikeCount.value = newValue;
+  }
+);
 
 const handleClickLike = () => {
-  isLike.value = !isLike.value;
-  if (isLike.value === true) {
+  if (isLike.value) {
+    handleDelete();
+  } else {
     clickLike({
       userId: props.userId,
       postId: props.postId,
     });
-  } else {
-    handleDelete();
   }
 };
 
-const queryClient = useQueryClient();
-
 const { mutate: clickLike } = useMutation({
   mutationFn: async (postData: { userId: number; postId: number }) => {
     console.log("게시글 좋아요 누른 데이터:", postData);
@@ -69,9 +119,8 @@ const { mutate: clickLike } = useMutation({
   },
   onSuccess: (data) => {
     console.log("좋아요 생성 성공:", data);
-    queryClient.invalidateQueries({
-      queryKey: ["post", props.postId],
-    });
+    isLike.value = true;
+    currentLikeCount.value += 1;
   },
   onError: (error) => {
     console.error("좋아요 생성 실패:", error);
@@ -91,9 +140,8 @@ const { mutate: cancelLike } = useMutation({
   },
   onSuccess: () => {
     console.log("좋아요 삭제 성공");
-    queryClient.invalidateQueries({
-      queryKey: ["replies", props.postId],
-    });
+    isLike.value = false;
+    currentLikeCount.value = Math.max(0, currentLikeCount.value - 1);
   },
   onError: (error) => {
     console.error(`좋아요 삭제 실패했습니다: ${error.message}`);
@@ -103,35 +151,4 @@ const { mutate: cancelLike } = useMutation({
 const handleDelete = () => {
   cancelLike(props.postId);
 };
-
-const props = defineProps({
-  writer: {
-    type: String,
-    default: "작성자",
-  },
-  date: {
-    type: String,
-    default: "",
-  },
-  comment: {
-    type: String,
-    default: "",
-  },
-  commentCount: {
-    type: Number,
-    default: 1,
-  },
-  likeCount: {
-    type: Number,
-    default: 1,
-  },
-  userId: {
-    type: Number,
-    default: 1,
-  },
-  postId: {
-    type: Number,
-    required: true,
-  },
-});
 </script>
diff --git a/app/pages/community/_components/CommentWrap.vue b/app/pages/community/_components/CommentWrap.vue
index d0262dc..abf6983 100644
--- a/app/pages/community/_components/CommentWrap.vue
+++ b/app/pages/community/_components/CommentWrap.vue
@@ -1,37 +1,39 @@
 <template>
-  <div class="mt-[30px] flex-col">
+  <div class="mt-[30px] flex-col pr-[20px]">
     <div
-      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"
+      class="my-[30px] box-border flex h-[60px] cursor-pointer items-center justify-start rounded-[10px] border-gray-b4 px-[15px] py-[25px] outline outline-[1.50px] outline-offset-[-1.50px] outline-zinc-400"
       @click="handlePostModal"
     >
-      <div class="justify-start text-[20px] font-medium text-gray-b4">
+      <div class="justify-start text-[20px] font-[500] 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-[24px] font-semibold text-zinc-900">
-      <span class="text-[24px] font-semibold text-primary">
+    <div class="justify-start text-[24px] font-[400] text-gray-1a">
+      <span class="text-[24px] font-[600] text-primary">
         {{ selectedAddress || "지역을 선택해주세요" }}
       </span>
-      의 리뷰 게시글
+      의
+      <br />
+      리뷰 게시글
     </div>
 
-    <div class="mt-[28px] flex gap-[254px]">
-      <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">
+    <div class="mt-[28px] flex justify-between">
+      <div class="justify-start text-[24px] font-[600] text-gray-1a">
+        <span class="text-[24px] font-[600] text-gray-1a">총 {{ " " }}</span>
+        <span class="text-[24px] font-[600] text-primary">
           {{ posts?.length || 0 }}
         </span>
-        <span class="font-['Pretendard'] text-2xl font-semibold text-gray-1a">개</span>
+        <span class="font-['Pretendard'] text-[24px] font-[600] 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-gray-b4 bg-background"
+          class="flex items-center justify-center gap-1 rounded-[5px] border border-gray-b4 bg-background px-[10px] py-[5px]"
           @click="handleToggle"
         >
-          <p class="cursor-pointer justify-start text-[16px] font-semibold text-gray-b4">
+          <p class="cursor-pointer justify-start text-[16px] font-[600] text-gray-b4">
             {{ selectedOption }}
           </p>
           <DropDownIcon class="h-[19px] w-[19px]" filled="false" :font-controlled="false" />
@@ -43,7 +45,7 @@
           <div
             v-for="option in options"
             :key="option"
-            class="cursor-pointer px-3 py-2 text-[16px] font-semibold text-gray-b4 hover:bg-gray-50"
+            class="cursor-pointer px-3 py-2 text-[16px] font-[600] text-gray-b4"
             @click="selectOption(option)"
           >
             {{ option }}
@@ -68,10 +70,7 @@
     </div>
 
     <!-- 게시글 목록 -->
-    <div
-      v-else
-      class="mt-[21px] flex h-[526px] w-[400px] flex-col overflow-y-auto overflow-x-hidden"
-    >
+    <div v-else class="mt-[21px] flex h-[526px] flex-col overflow-y-auto overflow-x-hidden">
       <div v-for="post in sortedPosts" :key="post.postId">
         <CommentItem
           :writer="post.userId.toString()"
@@ -79,23 +78,24 @@
           :comment="post.content"
           :comment-count="post.commentCount"
           :like-count="post.likeCount"
+          :like-by-user="post.likeByUser"
           :user-id="1"
           :post-id="post.postId"
           @click="handlePostClick(post.postId)"
         />
 
-        <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-if="openedPostId === post.postId" class="relative mt-[10px] bg-gray-50 p-[16px]">
+          <div v-if="isReplyLoading" class="text-gray-d9">댓글을 불러오는 중...</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="'익명'"
               :date="reply.createdAt"
               :comment="reply.content"
-              class="border border-gray-200 bg-white shadow-sm"
+              class="border border-gray-d9 bg-background shadow-sm"
             />
           </div>
-          <div v-if="!replyData || replyData.data.length === 0" class="mb-[30px] text-zinc-400">
+          <div v-if="!replyData || replyData.data.length === 0" class="mb-[30px] text-gray-b4">
             댓글이 없습니다.
           </div>
           <div class="sticky bottom-0">
@@ -105,17 +105,22 @@
       </div>
     </div>
 
-    <div v-if="PostModalOpen" class="fixed inset-0 z-50 flex items-center justify-center">
-      <div class="absolute inset-0 bg-zinc-900/40" @click="handlePostModal"></div>
-      <div class="z-60 relative">
-        <PostComment
-          :road-code="roadCode"
-          :building-number="buildingNumber"
-          :selected-address="selectedAddress"
-          @close="handlePostModal"
-        />
+    <Teleport to="body">
+      <div
+        v-if="PostModalOpen"
+        class="fixed inset-0 z-[9999] flex items-center justify-center bg-gray-1a/40"
+      >
+        <div class="absolute inset-0" @click="handlePostModal"></div>
+        <div class="relative">
+          <PostComment
+            :road-code="roadCode"
+            :building-number="buildingNumber"
+            :selected-address="selectedAddress"
+            @close="handlePostModal"
+          />
+        </div>
       </div>
-    </div>
+    </Teleport>
   </div>
 </template>
 
@@ -133,7 +138,6 @@ import PostReply from "./PostReply.vue";
 import type { ReplyResponse } from "../_api/types/ReplyResponse";
 import type { PostResponse } from "../_api/types/PostResponse";
 
-// Props 정의
 const props = defineProps({
   posts: {
     type: Array,
diff --git a/app/pages/community/_components/PostReply.vue b/app/pages/community/_components/PostReply.vue
index de9176f..aed8e0c 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-[360px] items-center justify-start rounded-[10px] border-[1.50px] border-gray-d9 bg-background p-[30px]"
+    class="relative box-border flex items-center justify-start rounded-[10px] border-[1.50px] border-gray-d9 bg-background p-[30px]"
   >
     <div class="absolute left-0">
       <input
@@ -14,7 +14,7 @@
       :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',
+        isSubmitting ? 'cursor-not-allowed bg-gray-d9' : 'hover:bg-primary-dark bg-primary',
       ]"
       @click="handleSubmit"
     >
@@ -24,7 +24,7 @@
     <button
       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]"
+      class="absolute right-0 top-0 flex cursor-not-allowed items-center justify-center rounded-br-[10px] rounded-tr-[10px] bg-gray-d9 px-[21px] py-[16px]"
     >
       <SendIcon filled="false" :font-controlled="false" class="h-[30px] w-[30px] opacity-50" />
     </button>
diff --git a/app/pages/community/_components/ReplyItem.vue b/app/pages/community/_components/ReplyItem.vue
index 737f166..d5391d9 100644
--- a/app/pages/community/_components/ReplyItem.vue
+++ b/app/pages/community/_components/ReplyItem.vue
@@ -1,14 +1,12 @@
 <template>
-  <div
-    class="hover:bg-gray-70 box-border flex h-[150px] cursor-pointer flex-col rounded-[10px] p-[30px]"
-  >
-    <div class="mb-[5px] justify-start text-[20px] font-semibold leading-tight text-gray-1a">
+  <div class="hover:bg-gray-70 box-border flex cursor-pointer flex-col rounded-[10px] p-[30px]">
+    <div class="mb-[5px] justify-start text-[20px] font-[600] text-gray-1a">
       {{ writer }}
     </div>
-    <div class="mb-[15px] justify-start text-base font-normal text-gray-8f">
+    <div class="mb-[15px] justify-start text-base font-[400] text-gray-8f">
       {{ dayjs(date).format("YYYY-MM-DD") }}
     </div>
-    <div class="mb-[10px] justify-start text-base font-normal text-gray-1a">
+    <div class="mb-[10px] justify-start text-base font-[400] text-gray-1a">
       {{ comment }}
     </div>
 
diff --git a/app/pages/community/_components/SearchBar.vue b/app/pages/community/_components/SearchBar.vue
index a2540ce..4517da9 100644
--- a/app/pages/community/_components/SearchBar.vue
+++ b/app/pages/community/_components/SearchBar.vue
@@ -38,7 +38,7 @@
 
 <script setup lang="ts">
 import BlueSearch from "~/assets/icon/blueSearchIcon.svg";
-import { ref, defineEmits, computed } from "vue";
+import { ref, defineEmits, computed, defineProps, watch } from "vue";
 import { useQuery } from "@tanstack/vue-query";
 import { apiInstance } from "~/utils/api";
 import type { BaseResponse } from "~/utils/api";
@@ -46,9 +46,24 @@ import type { SearchAddressResponse } from "../_api/types/SearchAddressResponse"
 import { useDebounce } from "~/composables/useDebounce";
 import { splitByKeyword } from "../_utils/splitByKeyword";
 
-const address = ref("");
+const props = defineProps<{
+  initialValue?: string;
+}>();
+
+const address = ref(props.initialValue || "");
 const debouncedAddress = useDebounce(address, 500);
 
+// Watch for changes in initialValue prop
+watch(
+  () => props.initialValue,
+  (newValue) => {
+    if (newValue) {
+      address.value = newValue;
+    }
+  },
+  { immediate: true }
+);
+
 const emits = defineEmits(["search-address"]);
 
 const { data: searchResponse } = useQuery<BaseResponse<SearchAddressResponse>>({
diff --git a/app/pages/community/_modals/PostComment.vue b/app/pages/community/_modals/PostComment.vue
index c4f7a3b..dd149cf 100644
--- a/app/pages/community/_modals/PostComment.vue
+++ b/app/pages/community/_modals/PostComment.vue
@@ -14,12 +14,12 @@
         v-if="selectedAddress"
         class="mr-[198px] justify-start whitespace-nowrap text-[32px] font-[600] text-gray-1a"
       >
-        <span class="text-[32px] font-semibold text-primary">
+        <span class="text-[32px] font-[600] text-primary">
           {{ selectedAddress }}
         </span>
         에 게시글 작성
       </div>
-      <div v-else class="mr-[198px] justify-start text-[32px] font-semibold text-gray-1a">
+      <div v-else class="mr-[198px] justify-start text-[32px] font-[600] text-gray-1a">
         지역을 검색해주세요.
       </div>
       <button
@@ -31,7 +31,7 @@
     </div>
 
     <!-- 구분선 -->
-    <div class="mb-[20px] h-[1px] w-full bg-[#B4B4B4]"></div>
+    <div class="mb-[20px] h-[1px] w-full bg-gray-b4"></div>
 
     <!-- 입력 영역 -->
     <textarea
diff --git a/app/pages/community/index.vue b/app/pages/community/index.vue
index 6122565..31ee42f 100644
--- a/app/pages/community/index.vue
+++ b/app/pages/community/index.vue
@@ -39,7 +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 text-gray-8f">
+              <div class="justify-start text-center text-[26px] font-[400] text-gray-8f">
                 지도에서 위치를 검색하여
                 <br />
                 커뮤니티 게시글을 확인하세요.
@@ -66,7 +66,7 @@
       id="map"
       class="absolute left-[598px] top-0 z-10 h-[871px] w-[897px] rounded-[20px] bg-gray-1a"
     >
-      <SearchBar @search-address="searchAddress"></SearchBar>
+      <SearchBar :initial-value="selectedAddress" @search-address="searchAddress"></SearchBar>
     </div>
   </div>
 </template>
@@ -80,6 +80,10 @@ import CreditStore from "../credit/creditStore.vue";
 import { useQuery } from "@tanstack/vue-query";
 import { apiInstance } from "~/utils/api";
 
+useHead({
+  title: "커뮤니티",
+});
+
 const currentTab = ref("community");
 const handleTabStore = () => {
   currentTab.value = "store";
@@ -124,11 +128,6 @@ const {
   },
 });
 
-//const selectedPost = ref(null);
-// const handlePost = () => {
-//   selectedPost.value = post;
-// };
-
 const config = useRuntimeConfig();
 const kakaoKey = config.public.kakaoJavascriptKey;
 const map = ref(null); // 지도 인스턴스를 저장할 ref
@@ -196,6 +195,15 @@ onMounted(async () => {
 
   // 초기 로드 시 네비바에서 검색해서 온 경우 처리
   handleNavbarSearch();
+
+  // 페이지 마운트 시 기본 주소로 검색
+  selectedAddress.value = "서울특별시 성북구 동소문로26나길 19";
+
+  searchAddress({
+    buldMnnm: "19",
+    rnMgtSn: "112904121104",
+    roadAddrPart1: "서울특별시 성북구 동소문로26나길 19",
+  });
 });
 
 const searchAddress = (suggestion) => {
diff --git a/app/pages/credit/_components/StoreItem.vue b/app/pages/credit/_components/StoreItem.vue
index 68f81a0..6f8c80d 100644
--- a/app/pages/credit/_components/StoreItem.vue
+++ b/app/pages/credit/_components/StoreItem.vue
@@ -2,14 +2,10 @@
   <div class="flex cursor-pointer items-center gap-[43px] pt-11">
     <img class="h-[120px] w-[120px] rounded-2xl" :src="storeImg" />
     <div class="flex flex-col">
-      <div
-        class="h-12 w-auto justify-start font-['Pretendard'] text-[24px] font-semibold leading-[50.31px] text-zinc-900"
-      >
+      <div class="justify-start font-['Pretendard'] text-[24px] font-[600] text-gray-1a">
         {{ storeName }}
       </div>
-      <div
-        class="h-12 w-auto justify-start font-['Pretendard'] text-[20px] font-normal leading-[50.31px] text-zinc-900"
-      >
+      <div class="justify-start font-['Pretendard'] text-[20px] font-[400] text-gray-1a">
         {{ address }}
       </div>
     </div>
diff --git a/app/pages/credit/_modals/Barcode.vue b/app/pages/credit/_modals/Barcode.vue
index b30f0c9..24a9901 100644
--- a/app/pages/credit/_modals/Barcode.vue
+++ b/app/pages/credit/_modals/Barcode.vue
@@ -1,22 +1,20 @@
 <template>
   <div class="flex items-center justify-center">
-    <div
-      class="flex h-[556px] w-[820px] flex-col items-center rounded-2xl bg-white px-[139px] py-[59px]"
-    >
-      <div class="mb-[20px] whitespace-nowrap text-[28px] text-stone-500">
-        <span class="text-blue-500">해당 바코드를 저장</span>
+    <div class="flex flex-col items-center rounded-2xl bg-background px-[139px] py-[59px]">
+      <div class="mb-[20px] whitespace-nowrap text-[28px] text-gray-66">
+        <span class="font-[500] text-primary">해당 바코드를 저장</span>
         하여 제휴매장에서 사용하세요.
       </div>
       <img src="~/assets/image/barcode.png" alt="바코드" />
       <div class="mt-[40px] flex justify-center gap-[40px]">
         <button
-          class="flex items-center justify-center rounded-[10px] bg-[#B4B4B4] px-[70px] py-[30px] text-3xl text-white"
+          class="flex items-center justify-center rounded-[10px] bg-gray-b4 px-[80px] py-[30px] text-[30px] text-background"
           @click="$emit('close')"
         >
           취소
         </button>
         <button
-          class="flex items-center justify-center rounded-[10px] bg-blue-500 px-[70px] py-[30px] text-3xl text-white"
+          class="flex items-center justify-center rounded-[10px] bg-primary px-[70px] py-[30px] text-[30px] text-background"
           @click="saveBarcodeImage"
         >
           이미지로 저장
diff --git a/app/pages/credit/creditStore.vue b/app/pages/credit/creditStore.vue
index f1cb180..d60ea5b 100644
--- a/app/pages/credit/creditStore.vue
+++ b/app/pages/credit/creditStore.vue
@@ -3,44 +3,44 @@
     <div class="flex justify-center gap-5">
       <div class="h-[60px] justify-start">
         <div class="justify-start">
-          <div class="font-['Pretendard'] text-xl font-[500] text-zinc-900">
+          <div class="font-['Pretendard'] text-[20px] font-[600] text-gray-1a">
             사용 가능한 제휴 매장이 가까이 있습니다.
           </div>
-          <div class="font-['Pretendard'] text-xl font-[600] text-blue-500">
+          <div class="font-['Pretendard'] text-[20px] font-[700] text-primary">
             지금 제휴처를 확인하고, 크레딧을 사용해보세요.
           </div>
         </div>
       </div>
     </div>
     <div
-      class="mt-[20px] flex h-[230px] w-[446px] flex-col items-center justify-center rounded-2xl bg-blue-50 px-[50px] py-[30px]"
+      class="mt-[20px] flex flex-col items-center justify-center rounded-2xl bg-secondary px-[50px] py-[30px]"
     >
       <img src="~/assets/icon/creditIcon.png" class="h-[75px] w-[66px]" />
       <div class="justify-start text-center">
-        <span class="font-['Pretendard'] text-xl font-semibold leading-10 text-zinc-900">
+        <span class="font-['Pretendard'] text-[20px] font-[600] text-gray-1a">
           현재 보유 크레딧 :
         </span>
-        <span class="font-['Pretendard'] text-xl font-semibold leading-10 text-blue-500">
+        <span class="font-['Pretendard'] text-[20px] font-[600] text-primary">
           {{ currentCredit.toLocaleString() }}
         </span>
       </div>
       <div
-        class="relative my-[5px] h-11 w-80 rounded-[10px] border-[1.50px] border-zinc-300 bg-white"
+        class="relative my-[5px] h-11 w-80 rounded-[10px] border-[1.50px] border-gray-b4 bg-background"
       >
         <button
-          class="absolute right-0 top-0 flex h-11 w-20 items-center justify-center rounded-br-[10px] rounded-tr-[10px] bg-blue-500 text-[#FEFEFE]"
+          class="absolute right-0 top-0 flex h-11 w-20 items-center justify-center rounded-br-[10px] rounded-tr-[10px] bg-primary text-background"
           @click="openBarcodeModal"
         >
           생성
         </button>
         <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"
+          class="absolute left-[21px] top-0 items-center justify-start font-['Pretendard'] text-base font-[600] text-gray-1a outline-none"
           placeholder="사용할 크레딧 입력"
         />
       </div>
     </div>
-    <div class="h-[480px] overflow-y-auto overflow-x-hidden">
+    <div class="h-[450px] overflow-y-auto overflow-x-hidden">
       <div v-for="(store, index) in dummy" :key="store.id">
         <StoreItem
           :store-name="store?.storeName"
@@ -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-[#D9D9D9]"
+            class="h-0 w-[446px] outline outline-[1.50px] outline-offset-[-0.75px] outline-gray-d9"
           />
         </div>
       </div>
diff --git a/app/pages/credit/index.vue b/app/pages/credit/index.vue
index 572b953..5829994 100644
--- a/app/pages/credit/index.vue
+++ b/app/pages/credit/index.vue
@@ -4,10 +4,10 @@
       <div class="absolute left-[66px] top-[248px] z-20 max-w-[600px]">
         <div class="mb-[30px]">
           <div class="justify-start">
-            <span class="font-['Pretendard'] text-3xl font-semibold leading-10 text-zinc-900">
+            <span class="font-['Pretendard'] text-[20px] font-[600] text-gray-1a">
               사용 가능한 제휴 매장이 가까이 있습니다.
             </span>
-            <div class="font-['Pretendard'] text-3xl font-bold leading-10 text-blue-500">
+            <div class="font-['Pretendard'] text-[20px] font-[700] text-primary">
               지금 제휴처를 확인하고, 크레딧을 사용해보세요.
             </div>
           </div>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index bd7cd6b..a8b5133 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -6,6 +6,10 @@ import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { ref, onMounted, onUnmounted } from "vue";
 
+useHead({
+  title: "전월세 피해 예방 플랫폼",
+});
+
 gsap.registerPlugin(ScrollTrigger);
 
 // Refs for elements
@@ -285,7 +289,7 @@ onUnmounted(() => {
 
       <!-- 가격 -->
       <div ref="pricingSection">
-        <PricingPage />
+        <PricingPage :is-embedded="true" />
       </div>
     </section>
   </main>
diff --git a/app/pages/my/_components/AnalysisPreviewCard.vue b/app/pages/my/_components/AnalysisPreviewCard.vue
index 505e053..a98bdd3 100644
--- a/app/pages/my/_components/AnalysisPreviewCard.vue
+++ b/app/pages/my/_components/AnalysisPreviewCard.vue
@@ -5,6 +5,7 @@ const props = defineProps<{
   address: string;
   safetyScore: number;
   safetyDescription: string;
+  reportId: number;
 }>();
 </script>
 
@@ -29,7 +30,10 @@ const props = defineProps<{
           {{ props.safetyDescription }}
         </p>
       </div>
-      <span class="flex cursor-pointer items-center gap-2 text-[20px] font-[400] text-gray-b4">
+      <span
+        class="flex cursor-pointer items-center gap-2 text-[20px] font-[400] text-gray-b4"
+        @click="navigateTo(`/analyze/result/${props.reportId}`)"
+      >
         자세히 보기
         <RightArrowGrayIcon class="h-[10px]" :font-controlled="false" filled="false" />
       </span>
diff --git a/app/pages/my/_components/MyCredit.vue b/app/pages/my/_components/MyCredit.vue
index a0b0bda..564fd83 100644
--- a/app/pages/my/_components/MyCredit.vue
+++ b/app/pages/my/_components/MyCredit.vue
@@ -7,6 +7,7 @@
     </div>
     <button
       class="ml-auto rounded-[10px] bg-primary px-[40px] py-[10px] text-[28px] font-[600] text-gray-fe"
+      @click="navigateTo('/community?tab=store')"
     >
       크레딧 사용 제휴처 확인
     </button>
diff --git a/app/pages/my/index.vue b/app/pages/my/index.vue
index 93b6b2f..2c8ef98 100644
--- a/app/pages/my/index.vue
+++ b/app/pages/my/index.vue
@@ -5,6 +5,11 @@ import PostAchievementCard from "./_components/PostAchievementCard.vue";
 import type { MyPageResponse } from "./_api/types/MyPageResponse";
 import { useQuery } from "@tanstack/vue-query";
 import { apiInstance } from "~/utils/api";
+import { useHead } from "#app";
+
+useHead({
+  title: "마이 페이지",
+});
 
 const { data } = useQuery<BaseResponse<MyPageResponse>>({
   queryKey: ["mypage"],
@@ -22,6 +27,7 @@ console.log(data);
         <AnalysisPreviewCard
           v-for="report in data?.data.reports"
           :key="report.reportId"
+          :report-id="report.reportId"
           :address="report.address"
           :safety-score="report.safetyScore"
           :safety-description="report.summary"
@@ -34,17 +40,17 @@ console.log(data);
       </h1>
       <div class="mb-[100px] flex flex-col gap-[30px]">
         <PostAchievementCard
-          :completed="(data?.data.postCount ?? 0) >= 3"
+          :completed="(data?.data.postCount ?? 0) >= 1"
           achievement="게시글 1개"
           :credit="500"
         />
         <PostAchievementCard
-          :completed="(data?.data.postCount ?? 0) >= 10"
+          :completed="(data?.data.postCount ?? 0) >= 5"
           achievement="게시글 5개"
           :credit="700"
         />
         <PostAchievementCard
-          :completed="(data?.data.postCount ?? 0) >= 30"
+          :completed="(data?.data.postCount ?? 0) >= 15"
           achievement="게시글 15개"
           :credit="1000"
         />
diff --git a/app/pages/pricing/_components/PriceBox.vue b/app/pages/pricing/_components/PriceBox.vue
index ffa7102..caeeb4d 100644
--- a/app/pages/pricing/_components/PriceBox.vue
+++ b/app/pages/pricing/_components/PriceBox.vue
@@ -2,7 +2,7 @@
   <div class="rounded-[20px] px-[54px] py-[40px] outline outline-[1.50px]" :class="cardClass">
     <div class="flex flex-col items-start">
       <div
-        class="mb-[10px] mt-[34px] justify-start text-center font-['Pretendard'] text-[28px] font-semibold leading-10"
+        class="mb-[10px] mt-[34px] justify-start text-center font-['Pretendard'] text-[28px] font-[600] leading-10"
         :style="{ color: textColor }"
       >
         {{ option }}
diff --git a/app/pages/pricing/index.vue b/app/pages/pricing/index.vue
index e546959..6ff564f 100644
--- a/app/pages/pricing/index.vue
+++ b/app/pages/pricing/index.vue
@@ -1,32 +1,49 @@
+<script setup>
+import PriceBox from "./_components/PriceBox.vue";
+import CheckIconBlue from "~/assets/icon/checkIconBlue.svg";
+import CheckIconGrey from "~/assets/icon/checkIconGrey.svg";
+
+const props = defineProps({
+  isEmbedded: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+useHead({
+  title: props.isEmbedded ? undefined : "가격",
+});
+</script>
+
 <template>
   <div class="flex flex-col items-center justify-center gap-[40px]">
     <div class="flex flex-col items-center">
       <div class="justify-start text-center">
-        <span class="font-['Pretendard'] text-[32px] font-semibold leading-10 text-primary">
+        <span class="font-['Pretendard'] text-[32px] font-[600] text-primary">
           한 달간 무제한으로
         </span>
-        <span class="font-['Pretendard'] text-[32px] font-semibold leading-10 text-zinc-900">
+        <span class="font-['Pretendard'] text-[32px] font-[600] text-gray-1a">
           매물의 안전지수를 확인해보세요.
         </span>
       </div>
       <div
-        class="justify-start text-center font-['Pretendard'] text-[20px] font-normal leading-10 text-neutral-400"
+        class="justify-start text-center font-['Pretendard'] text-[20px] font-[400] text-gray-8f"
       >
         PLUS 서비스 구독을 통해 더 다양한 셋방살이의 혜택을 이용하실 수 있습니다.
       </div>
     </div>
     <div class="flex gap-[40px]">
-      <PriceBox option="PLUS" text-color="#2D8AE7" card-class="flex-1 outline-blue-500 bg-blue-50">
+      <PriceBox option="PLUS" text-color="primary" card-class="flex-1 outline-primary bg-secondary">
         <template #price>
-          <div class="text-[24px] font-normal">
+          <div class="text-[24px] font-[400]">
             월
-            <span class="text-[36px] font-semibold text-zinc-900">8,900</span>
+            <span class="text-[36px] font-[600] text-gray-1a">8,900</span>
             원
           </div>
         </template>
         <template #button>
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap rounded-[10px] bg-primary px-10 py-[10px] text-[20px] font-semibold text-white"
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-[10px] bg-primary px-10 py-[10px] text-[20px] font-[600] text-background"
           >
             현재 PLUS 서비스 이용중
             <!--{{ isPlusUser ? '현재 PLUS 서비스 이용중' : 'PLUS 서비스 이용하기' }}-->
@@ -59,22 +76,26 @@
               전월세 사기 이력이 있는 임대인 정보를
               <br />
               고려하여
-              <span class="font-normal text-primary">더 정확한 전월세 안전지수 제공</span>
+              <span class="font-[400] text-primary">더 정확한 전월세 안전지수 제공</span>
             </div>
           </div>
         </template>
       </PriceBox>
 
-      <PriceBox option="Free" text-color="#1A1A1A" card-class="flex-1 outline-zinc-300 bg-white">
+      <PriceBox
+        option="Free"
+        text-color="gray-1a"
+        card-class="flex-1 outline-gray-d9 bg-background"
+      >
         <template #price>
-          <div class="text-[36px] font-semibold text-zinc-900">
+          <div class="text-[36px] font-[600] text-gray-1a">
             0
-            <span class="text-[20px] font-normal text-zinc-900">원</span>
+            <span class="text-[20px] font-[400] text-gray-1a">원</span>
           </div>
         </template>
         <template #button>
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap rounded-[10px] bg-[#B4B4B4] px-10 py-[10px] text-[20px] font-semibold text-white"
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-[10px] bg-gray-b4 px-10 py-[10px] text-[20px] font-[600] text-background"
           >
             서비스 구독 취소하기
             <!--{{ isPlusUser ? '서비스 구독 취소하기' : '현재 사용 서비스' }}-->
@@ -110,9 +131,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import PriceBox from "./_components/PriceBox.vue";
-import CheckIconBlue from "~/assets/icon/checkIconBlue.svg";
-import CheckIconGrey from "~/assets/icon/checkIconGrey.svg";
-</script>
diff --git a/app/pages/quiz/Correct.vue b/app/pages/quiz/Correct.vue
index b141337..19a4792 100644
--- a/app/pages/quiz/Correct.vue
+++ b/app/pages/quiz/Correct.vue
@@ -1,10 +1,10 @@
 <template>
-  <Explain>
+  <Explain :correct="true">
     <template #result>
-      <div class="mb-[30px] text-[48px] font-[700] text-[#2D8AE7]">정답입니다.</div>
+      <div class="mb-[30px] text-[48px] font-[700] text-primary">정답입니다.</div>
     </template>
     <template #resultExplain>
-      <div class="text-[28px] font-[600] text-[#1A1A1A]">
+      <div class="text-[28px] font-[600] text-gray-1a">
         전입신고를 하면 확정일자가 자동으로 부여된다.
       </div>
     </template>
diff --git a/app/pages/quiz/False.vue b/app/pages/quiz/False.vue
index 4660f49..f455716 100644
--- a/app/pages/quiz/False.vue
+++ b/app/pages/quiz/False.vue
@@ -1,10 +1,10 @@
 <template>
-  <Explain>
+  <Explain :correct="false">
     <template #result>
-      <div class="mb-[30px] text-[48px] font-[700] text-[#FF615E]">오답입니다.</div>
+      <div class="mb-[30px] text-[48px] font-[700] text-destructive">오답입니다.</div>
     </template>
     <template #resultExplain>
-      <div class="text-[28px] font-[600] text-[#1A1A1A]">
+      <div class="text-[28px] font-[600] text-gray-1a">
         정답: 전입신고를 하면 확정일자가 자동으로 부여된다.
       </div>
     </template>
diff --git a/app/pages/quiz/_components/Explain.vue b/app/pages/quiz/_components/Explain.vue
index 7532998..2d88f15 100644
--- a/app/pages/quiz/_components/Explain.vue
+++ b/app/pages/quiz/_components/Explain.vue
@@ -4,31 +4,31 @@
       <slot name="result"></slot>
       <slot name="resultExplain"></slot>
       <div
-        class="my-[40px] h-0 w-[1003px] outline outline-[1.50px] outline-offset-[-0.75px] outline-zinc-300"
+        class="my-[40px] h-0 w-[1003px] outline outline-[1.50px] outline-offset-[-0.75px] outline-gray-d9"
       ></div>
       <div class="flex flex-col items-start">
-        <div class="justify-start text-[28px] font-[600] leading-[50px] text-zinc-900">해설:</div>
-        <div class="mb-[50px] justify-start text-[28px] font-[600] leading-[50px] text-zinc-900">
+        <div class="justify-start text-[28px] font-[600] text-gray-1a">해설:</div>
+        <div class="mb-[50px] justify-start text-[28px] font-[600] text-gray-1a">
           전입신고가 되었더라도
           <span class="text-primary">확정일자는 별도로</span>
           받아야 합니다.
         </div>
-        <div class="justify-start text-[28px] font-[400] leading-[50px] text-zinc-900">
+        <div class="justify-start text-[28px] font-[400] text-gray-1a">
           1. 보증금 보호를 위해 전입신고는 필수다.
         </div>
-        <div class="justify-start text-[28px] font-[400] leading-[50px] text-zinc-900">
+        <div class="justify-start text-[28px] font-[400] text-gray-1a">
           2. 전입신고는 동사무소나 온라인에서 할 수 있다.
         </div>
-        <div class="justify-start text-[28px] font-[400] leading-[50px] text-zinc-900">
+        <div class="justify-start text-[28px] font-[400] text-gray-1a">
           4. 전입신고를 하면 주민등록 주소가 해당 집으로 변경된다.
         </div>
         <div class="mt-[40px] flex gap-[500px]">
-          <div class="justify-start text-[28px] font-[400] leading-[50px] text-zinc-900">
+          <div class="justify-start text-[28px] font-[400] text-gray-1a">
             -> 나머지 보기는 모두 맞는 사실입니다.
           </div>
           <button
-            class="item-center flex justify-center rounded-[10px] bg-primary px-[27px] py-[15px] text-[45px] text-white"
-            @click="handleModal"
+            class="item-center flex justify-center rounded-[10px] bg-primary px-[27px] py-[15px] text-[45px] text-background"
+            @click="props.correct ? handleModal() : navigateTo('/checklist')"
           >
             ->
           </button>
@@ -36,7 +36,7 @@
       </div>
       <div
         v-if="isModalOpen"
-        class="fixed inset-0 z-50 flex items-center justify-center bg-zinc-900/40"
+        class="fixed inset-0 z-[9999] flex items-center justify-center bg-zinc-900/40"
       >
         <CompleteQuiz @close="closeModal" @check-credit="handleCreditCheck" />
       </div>
@@ -59,4 +59,11 @@ const handleCreditCheck = () => {
   navigateTo("/my");
   console.log("크레딧 페이지로 이동");
 };
+
+const props = defineProps({
+  correct: {
+    type: Boolean,
+    required: false,
+  },
+});
 </script>
diff --git a/app/pages/quiz/_modals/CompleteQuiz.vue b/app/pages/quiz/_modals/CompleteQuiz.vue
index 7a51b0c..688be9d 100644
--- a/app/pages/quiz/_modals/CompleteQuiz.vue
+++ b/app/pages/quiz/_modals/CompleteQuiz.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]"
-  >
+  <div class="flex flex-col items-center rounded-[15px] bg-white 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="font-['Pretendard'] text-[24px] font-[400] 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 class="font-['Pretendard'] text-[24px] font-[600] text-primary">500P</span>
+      <span class="font-['Pretendard'] text-[24px] font-[400] 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 items-center justify-center rounded-[10px] bg-gray-b4 px-[86px] py-[22px] 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 items-center justify-center rounded-[10px] bg-primary px-[50px] py-[22px] text-[26px] font-[600] text-background"
         @click="handleCreditCheck"
       >
         크레딧 확인
diff --git a/app/pages/quiz/index.vue b/app/pages/quiz/index.vue
index 5f61041..1f9b6ea 100644
--- a/app/pages/quiz/index.vue
+++ b/app/pages/quiz/index.vue
@@ -8,8 +8,8 @@
         :class="[
           'flex cursor-pointer items-center justify-center rounded-2xl border-[1.50px] px-[175px] py-[27px] text-[28px] font-[500]',
           selectedOption === 1
-            ? 'border-[3px] border-primary bg-secondary'
-            : 'border-zinc-400 hover:border-[3px] hover:border-primary hover:bg-secondary',
+            ? 'bg-secondary ring-[3px] ring-primary'
+            : 'ring-[1.50px] ring-gray-b4 hover:bg-secondary hover:ring-[3px] hover:ring-primary',
         ]"
         @click="selectOption(1)"
       >
@@ -19,8 +19,8 @@
         :class="[
           'flex cursor-pointer items-center justify-center rounded-2xl border-[1.50px] px-[175px] py-[27px] text-[28px] font-[500]',
           selectedOption === 2
-            ? 'border-[3px] border-primary bg-secondary'
-            : 'border-zinc-400 hover:border-[3px] hover:border-primary hover:bg-secondary',
+            ? 'bg-secondary ring-[3px] ring-primary'
+            : 'ring-[1.50px] ring-gray-b4 hover:bg-secondary hover:ring-[3px] hover:ring-primary',
         ]"
         @click="selectOption(2)"
       >
@@ -30,8 +30,8 @@
         :class="[
           'flex cursor-pointer items-center justify-center rounded-2xl border-[1.50px] px-[175px] py-[27px] text-[28px] font-[500]',
           selectedOption === 3
-            ? 'border-[3px] border-primary bg-secondary'
-            : 'border-zinc-400 hover:border-[3px] hover:border-primary hover:bg-secondary',
+            ? 'bg-secondary ring-[3px] ring-primary'
+            : 'ring-[1.50px] ring-gray-b4 hover:bg-secondary hover:ring-[3px] hover:ring-primary',
         ]"
         @click="selectOption(3)"
       >
@@ -41,8 +41,8 @@
         :class="[
           'flex cursor-pointer items-center justify-center rounded-2xl border-[1.50px] px-[175px] py-[27px] text-[28px] font-[500]',
           selectedOption === 4
-            ? 'border-[3px] border-primary bg-secondary'
-            : 'border-zinc-400 hover:border-[3px] hover:border-primary hover:bg-secondary',
+            ? 'bg-secondary ring-[3px] ring-primary'
+            : 'ring-[1.50px] ring-gray-b4 hover:bg-secondary hover:ring-[3px] hover:ring-primary',
         ]"
         @click="selectOption(4)"
       >
@@ -50,7 +50,11 @@
       </div>
     </div>
     <button
-      class="mt-[50px] flex items-center justify-center rounded-[10px] bg-[#B4B4B4] px-[182px] py-[15px] text-[32px] font-[600] text-gray-fe hover:bg-primary"
+      :class="[
+        'mt-[50px] flex items-center justify-center rounded-[10px] px-[182px] py-[15px] text-[32px] font-[600] text-gray-fe',
+        selectedOption === null ? 'cursor-not-allowed bg-gray-b4' : 'bg-primary',
+      ]"
+      :disabled="selectedOption === null"
       @click="goToResult"
     >
       확인하기
@@ -64,7 +68,11 @@ import { useMutation } from "@tanstack/vue-query";
 import type { QuizResponse } from "./_api/types/quiz";
 import type { BaseResponse } from "~/utils/api";
 
-const selectedOption = ref<number | null>(null); //선택한 정답 저장
+useHead({
+  title: "퀴즈 풀기",
+});
+
+const selectedOption = ref<number | null>(null);
 
 const submitQuizMutation = useMutation({
   mutationFn: async (answerData: { selectedOption: number; quizId: number; userId: number }) => {
diff --git a/app/pages/report/_components/Upload.vue b/app/pages/report/_components/Upload.vue
index b242011..ff4f302 100644
--- a/app/pages/report/_components/Upload.vue
+++ b/app/pages/report/_components/Upload.vue
@@ -1,11 +1,9 @@
 <template>
   <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">
+    <div class="justify-start text-center text-[24px] font-[400] text-foreground">
       {{ fileName }}
     </div>
-    <div
-      class="flex w-[341px] flex-col items-center rounded-[15px] bg-secondary px-[40px] py-[47px]"
-    >
+    <div class="flex flex-col items-center rounded-[15px] bg-secondary px-[40px] py-[47px]">
       <CloudIcon
         alt="cloud"
         class="mb-[20px] h-[60px] w-[60px]"
@@ -13,7 +11,7 @@
         :font-controlled="false"
       />
       <button
-        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"
+        class="mb-[40px] justify-start whitespace-nowrap rounded-[10px] bg-primary px-[30px] py-[8px] text-center text-[18px] font-[500] text-gray-fe"
         @click="openModal"
       >
         {{ btnName }}
@@ -24,8 +22,8 @@
         - 업로드 유의사항 -
       </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 class="text-[20px] font-[400] text-gray-8f">파일 형식 : PDF 지원 (1개)</div>
+        <div class="text-[20px] font-[400] text-gray-8f">파일 크기 : 50MB 이내</div>
       </div>
     </div>
     <div class="flex flex-col items-center justify-center gap-[15px]">
@@ -33,7 +31,7 @@
         업로드 된 파일
       </div>
       <div
-        class="flex h-[90px] w-[341px] items-center justify-center gap-[30px] rounded-[10px] border border-gray-8f bg-background"
+        class="flex items-center justify-center gap-[30px] rounded-[10px] border border-gray-8f bg-background px-[30px] py-[18px]"
       >
         <div class="justify-start text-center text-[20px] font-[400] text-foreground">
           {{ displayFileName }}
diff --git a/app/pages/report/_modals/ReportUpload.vue b/app/pages/report/_modals/ReportUpload.vue
index b5a253f..23b00b2 100644
--- a/app/pages/report/_modals/ReportUpload.vue
+++ b/app/pages/report/_modals/ReportUpload.vue
@@ -96,7 +96,7 @@ const handleSubmit = async () => {
       </div>
       <div class="flex items-center gap-[40px]">
         <img
-          src="~/assets/image/pdf-example.png"
+          src="~/assets/image/reportExample.jpg"
           alt="민형사 고소증 예시 1"
           :class="[
             'h-[220px] w-[220px] cursor-pointer rounded-[10px] object-cover object-top transition duration-100 ease-in-out',
@@ -107,7 +107,7 @@ const handleSubmit = async () => {
           @click="handleExampleSelect('예시파일1_고소증.pdf')"
         />
         <img
-          src="~/assets/image/pdf-example.png"
+          src="~/assets/image/reportExample.jpg"
           alt="민형사 고소증 예시 2"
           :class="[
             'h-[220px] w-[220px] cursor-pointer rounded-[10px] object-cover object-top transition duration-100 ease-in-out',
@@ -118,7 +118,7 @@ const handleSubmit = async () => {
           @click="handleExampleSelect('예시파일2_고소증.pdf')"
         />
         <img
-          src="~/assets/image/pdf-example.png"
+          src="~/assets/image/reportExample.jpg"
           alt="민형사 고소증 예시 3"
           :class="[
             'h-[220px] w-[220px] cursor-pointer rounded-[10px] object-cover object-top transition duration-100 ease-in-out',
diff --git a/app/pages/report/_modals/UploadComplete.vue b/app/pages/report/_modals/UploadComplete.vue
index fd3ba84..535a3e1 100644
--- a/app/pages/report/_modals/UploadComplete.vue
+++ b/app/pages/report/_modals/UploadComplete.vue
@@ -9,13 +9,13 @@
       신고 접수가 완료되었습니다.
     </div>
     <div class="mb-[30px] justify-start text-center">
-      <span class="text-[24px] font-[400] leading-6 text-gray-8f">
+      <span class="text-[24px] font-[400] text-gray-8f">
         소중한 신고 감사합니다.
         <br />
         감사 크레딧
       </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>
+      <span class="text-[24px] font-[600] text-primary">500P</span>
+      <span class="text-[24px] font-[400] text-gray-8f">가 적립되었습니다.</span>
     </div>
     <div class="flex gap-10">
       <button
diff --git a/app/pages/report/index.vue b/app/pages/report/index.vue
index e911b89..715a036 100644
--- a/app/pages/report/index.vue
+++ b/app/pages/report/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="mt-[30px] flex flex-col items-center">
-    <div class="flex flex-col items-center justify-center leading-10">
-      <div class="text-[28px] font-bold leading-10 text-primary">
+    <div class="flex flex-col items-center justify-center">
+      <div class="text-[28px] font-[700] text-primary">
         신고해주신 정보는 다른 임차인들의 피해 예방을 위해 소중히 활용 됩니다.
       </div>
-      <div class="text-[28px] font-bold leading-10 text-primary">
+      <div class="text-[28px] font-[700] text-primary">
         신고시 소중한 제보에 감사한 마음을 담아 크레딧을 드립니다.
       </div>
       <div class="mt-[50px] flex h-[643px] justify-center gap-[80px]">
@@ -24,7 +24,7 @@
       </div>
       <button
         :class="[
-          'mb-[160px] mt-[35px] flex h-20 w-[762px] items-center justify-center rounded-[10px] text-3xl font-[600]',
+          'mb-[160px] mt-[35px] flex items-center justify-center rounded-[10px] px-[332px] py-[28px] text-[28px] font-[600]',
           fileStore.canSubmit ? 'bg-primary text-background' : 'bg-gray-b4 text-background',
         ]"
         :disabled="!fileStore.canSubmit"
@@ -48,6 +48,11 @@ import { useFileStore } from "~/stores/file";
 import { apiInstance } from "~/utils/api";
 import { useMutation } from "@tanstack/vue-query";
 import UploadComplete from "./_modals/UploadComplete.vue";
+import { useHead } from "#app";
+
+useHead({
+  title: "사기신고",
+});
 
 const isModalOpen = ref(false);
 const fileStore = useFileStore();