diff --git a/src/features/notification/ui/notification-sse-provider.tsx b/src/features/notification/ui/notification-sse-provider.tsx
index a0f8166b..85b5a6ac 100644
--- a/src/features/notification/ui/notification-sse-provider.tsx
+++ b/src/features/notification/ui/notification-sse-provider.tsx
@@ -19,6 +19,8 @@ const SSE_EVENT_TYPES = [
   "auctionFailedSubscriber",
   "auctionSuccessSeller",
   "auctionSuccessSubscriber",
+  "reviewRegistered",
+  "chatMessage",
 ] as const;
 const MAX_RECONNECT_DELAY_MS = 30_000;
 const RECONNECT_BASE_DELAY_MS = 1_000;
diff --git a/src/screens/guide/model/guide-data.ts b/src/screens/guide/model/guide-data.ts
index 2d21aafa..ea092b03 100644
--- a/src/screens/guide/model/guide-data.ts
+++ b/src/screens/guide/model/guide-data.ts
@@ -30,9 +30,7 @@ export interface PricePoint {
 export const priceData: PricePoint[] = [
   { time: "00:00", price: 100000, label: "시작" },
   { time: "00:05", price: 95000 },
-  { time: "00:10", price: 90000 },
-  { time: "00:15", price: 85000 },
-  { time: "00:20", price: 80000, label: "구매 완료" },
+  { time: "00:10", price: 90000, label: "구매 완료" },
 ];
 
 export interface ChatMessage {
diff --git a/src/screens/guide/ui/guide.tsx b/src/screens/guide/ui/guide.tsx
index 85fe6e10..77e3d916 100644
--- a/src/screens/guide/ui/guide.tsx
+++ b/src/screens/guide/ui/guide.tsx
@@ -7,6 +7,8 @@ import { useRouter } from "next/navigation";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 
+import { Container } from "@/shared/ui";
+
 import {
   GuidebookPage1,
   GuidebookPage2,
@@ -58,64 +60,64 @@ export function Guidebook() {
   }, []);
 
   return (
-    <div ref={containerRef} className="bg-background fixed inset-0 overflow-hidden outline-none">
-      <div className="flex h-full items-center justify-center px-6">
-        <div className="relative w-full max-w-5xl">
-          <motion.button
-            type="button"
-            className="absolute top-0 right-0 z-50 rounded-full border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-700 shadow-sm transition hover:bg-gray-50"
-            whileHover={{ scale: 1.04 }}
-            whileTap={{ scale: 0.98 }}
-            onClick={() => {
-              if (typeof window !== "undefined") {
-                window.localStorage.setItem(GUIDE_STORAGE_KEY, "true");
-              }
-              router.replace("/");
-            }}
-          >
-            Skip
-          </motion.button>
-          <motion.div
-            className="mb-8 text-center"
-            key={`title-${currentPage}`}
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <p className="mb-2 text-sm text-gray-500">
-              Chapter {currentPage + 1} / {totalPages}
-            </p>
-            <h2 className="text-2xl font-semibold">{pages[currentPage].title}</h2>
-          </motion.div>
-
-          <div className="bg-card relative overflow-hidden rounded-3xl shadow-2xl">
-            <div className="h-[min(70dvh,820px)] min-h-[600px]">
-              <AnimatePresence mode="wait" custom={direction}>
-                <motion.div
-                  key={currentPage}
-                  custom={direction}
-                  variants={pageVariants}
-                  initial="enter"
-                  animate="center"
-                  exit="exit"
-                  transition={{
-                    x: { type: "spring", stiffness: 300, damping: 30 },
-                    opacity: { duration: 0.3 },
-                    scale: { duration: 0.3 },
-                  }}
-                  className="h-full p-12"
-                >
-                  {pages[currentPage].node}
-                </motion.div>
-              </AnimatePresence>
-            </div>
+    <div ref={containerRef} className="bg-background w-full overflow-hidden outline-none">
+      <Container className="flex max-h-[calc(100dvh-var(--header-h,0px))] min-h-[calc(100dvh-var(--header-h,0px))] w-full flex-col items-center justify-center py-2">
+        <div className="flex h-full w-full flex-col gap-4">
+          <header className="relative flex items-center justify-center">
+            <motion.button
+              type="button"
+              className="absolute top-0 right-1 rounded-full border border-zinc-200 bg-white px-3 py-1.5 text-xs font-semibold text-zinc-700 shadow-sm transition hover:bg-zinc-50"
+              whileHover={{ scale: 1.04 }}
+              whileTap={{ scale: 0.98 }}
+              onClick={() => {
+                if (typeof window !== "undefined") {
+                  window.localStorage.setItem(GUIDE_STORAGE_KEY, "true");
+                }
+                router.replace("/");
+              }}
+            >
+              Skip
+            </motion.button>
+            <motion.div
+              className="flex flex-col gap-1 text-center"
+              key={`title-${currentPage}`}
+              initial={{ opacity: 0, y: -10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.3 }}
+            >
+              <p className="text-xs text-zinc-500">
+                Chapter {currentPage + 1} / {totalPages}
+              </p>
+              <h2 className="text-xl font-semibold">{pages[currentPage].title}</h2>
+            </motion.div>
+          </header>
+
+          <div className="bg-card h-[65dvh] overflow-hidden rounded-3xl px-4 shadow-2xl">
+            <AnimatePresence mode="wait" custom={direction}>
+              <motion.div
+                key={currentPage}
+                custom={direction}
+                variants={pageVariants}
+                initial="enter"
+                animate="center"
+                exit="exit"
+                transition={{
+                  x: { type: "spring", stiffness: 300, damping: 30 },
+                  opacity: { duration: 0.3 },
+                  scale: { duration: 0.3 },
+                }}
+                className="h-full w-full"
+              >
+                {pages[currentPage].node}
+              </motion.div>
+            </AnimatePresence>
           </div>
 
-          <div className="mt-8 flex items-center justify-between">
+          <div className="flex items-center justify-between">
             <motion.button
               onClick={goPrev}
               disabled={currentPage === 0}
-              className="flex items-center gap-2 rounded-full px-6 py-3 transition-all disabled:cursor-not-allowed disabled:opacity-30"
+              className="flex items-center gap-2 rounded-full px-4 py-2 text-sm transition-all disabled:cursor-not-allowed disabled:opacity-30"
               style={{
                 backgroundColor: currentPage === 0 ? "#F3F4F6" : "oklch(0.4758 0.2241 288.5 / 0.1)",
                 color: currentPage === 0 ? "#9CA3AF" : "oklch(0.4758 0.2241 288.5)",
@@ -123,19 +125,19 @@ export function Guidebook() {
               whileHover={currentPage !== 0 ? { scale: 1.05, x: -5 } : {}}
               whileTap={currentPage !== 0 ? { scale: 0.95 } : {}}
             >
-              <ChevronLeft className="h-5 w-5" />
+              <ChevronLeft className="size-4" />
               <span className="font-medium">이전</span>
             </motion.button>
 
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1.5">
               {pages.map((page, index) => (
                 <motion.button
                   key={page.title}
                   onClick={() => goTo(index)}
                   className="rounded-full transition-all"
                   style={{
-                    width: index === currentPage ? "32px" : "8px",
-                    height: "8px",
+                    width: index === currentPage ? "28px" : "6px",
+                    height: "6px",
                     backgroundColor:
                       index === currentPage ? "oklch(0.4758 0.2241 288.5)" : "#D1D5DB",
                   }}
@@ -149,7 +151,7 @@ export function Guidebook() {
             <motion.button
               onClick={goNext}
               disabled={currentPage === totalPages - 1}
-              className="flex items-center gap-2 rounded-full px-6 py-3 transition-all disabled:cursor-not-allowed disabled:opacity-30"
+              className="flex items-center gap-2 rounded-full px-4 py-2 text-sm transition-all disabled:cursor-not-allowed disabled:opacity-30"
               style={{
                 backgroundColor:
                   currentPage === totalPages - 1 ? "#F3F4F6" : "oklch(0.4758 0.2241 288.5)",
@@ -159,11 +161,11 @@ export function Guidebook() {
               whileTap={currentPage !== totalPages - 1 ? { scale: 0.95 } : {}}
             >
               <span className="font-medium">다음</span>
-              <ChevronRight className="h-5 w-5" />
+              <ChevronRight className="size-4" />
             </motion.button>
           </div>
         </div>
-      </div>
+      </Container>
     </div>
   );
 }
diff --git a/src/screens/guide/ui/pages/guidebook-page1.tsx b/src/screens/guide/ui/pages/guidebook-page1.tsx
index 948a16cd..3e2e72cd 100644
--- a/src/screens/guide/ui/pages/guidebook-page1.tsx
+++ b/src/screens/guide/ui/pages/guidebook-page1.tsx
@@ -11,16 +11,16 @@ export function GuidebookPage1() {
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.1, duration: 0.6 }}
-        className="mb-8"
+        className="mb-6 max-[1024px]:mb-4"
       >
         <motion.h1
-          className="mb-4 text-5xl font-bold"
+          className="mb-3 text-4xl font-bold max-[1024px]:text-3xl"
           style={{ color: "oklch(0.4758 0.2241 288.5)" }}
         >
           네덜란드 경매
         </motion.h1>
         <motion.p
-          className="text-xl text-gray-600"
+          className="text-base text-gray-600 max-[1024px]:text-sm"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ delay: 0.3, duration: 0.6 }}
@@ -30,14 +30,14 @@ export function GuidebookPage1() {
       </motion.div>
 
       <motion.div
-        className="mb-12 h-1 w-24 rounded-full"
+        className="mb-8 h-1 w-20 rounded-full max-[1024px]:mb-6 max-[1024px]:w-16"
         style={{ backgroundColor: "oklch(0.4758 0.2241 288.5 / 0.3)" }}
         initial={{ width: 0 }}
         animate={{ width: 96 }}
         transition={{ delay: 0.5, duration: 0.6 }}
       />
 
-      <div className="grid w-full max-w-3xl grid-cols-3 gap-8">
+      <div className="grid w-full max-w-3xl grid-cols-1 gap-4 max-[1024px]:gap-3 sm:grid-cols-3">
         {KEYWORDS.map((keyword, index) => (
           <motion.div
             key={keyword.label}
@@ -47,15 +47,18 @@ export function GuidebookPage1() {
             className="flex flex-col items-center"
           >
             <motion.div
-              className="mb-4 flex h-20 w-20 items-center justify-center rounded-full"
+              className="mb-3 flex h-16 w-16 items-center justify-center rounded-full max-[1024px]:h-14 max-[1024px]:w-14"
               style={{ backgroundColor: "oklch(0.4758 0.2241 288.5 / 0.1)" }}
               whileHover={{ scale: 1.1, backgroundColor: "oklch(0.4758 0.2241 288.5 / 0.2)" }}
             >
-              <keyword.icon className="h-10 w-10" style={{ color: "oklch(0.4758 0.2241 288.5)" }} />
+              <keyword.icon
+                className="h-8 w-8 max-[1024px]:h-7 max-[1024px]:w-7"
+                style={{ color: "oklch(0.4758 0.2241 288.5)" }}
+              />
             </motion.div>
 
             <motion.h3
-              className="mb-2 text-xl font-semibold"
+              className="mb-1 text-lg font-semibold max-[1024px]:text-base"
               style={{ color: "oklch(0.4758 0.2241 288.5)" }}
             >
               {keyword.label}
@@ -68,13 +71,13 @@ export function GuidebookPage1() {
               transition={{ delay: 0.8 + index * 0.15, duration: 0.6 }}
             />
 
-            <p className="text-sm text-gray-600">{keyword.description}</p>
+            <p className="text-xs text-gray-600 max-[1024px]:text-[11px]">{keyword.description}</p>
           </motion.div>
         ))}
       </div>
 
       <motion.p
-        className="mt-12 max-w-2xl text-sm text-gray-500"
+        className="mt-8 max-w-2xl text-xs text-gray-500 max-[1024px]:mt-6 max-[1024px]:text-[11px]"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 1.5, duration: 0.6 }}
diff --git a/src/screens/guide/ui/pages/guidebook-page2.tsx b/src/screens/guide/ui/pages/guidebook-page2.tsx
index b5bb9876..0a38d124 100644
--- a/src/screens/guide/ui/pages/guidebook-page2.tsx
+++ b/src/screens/guide/ui/pages/guidebook-page2.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 
 import { motion } from "motion/react";
 
-import { priceData } from "../../model/guide-data";
+import { priceData } from "@/screens/guide/model/guide-data";
 
 export function GuidebookPage2() {
   const [visibleBars, setVisibleBars] = useState(0);
@@ -19,38 +19,43 @@ export function GuidebookPage2() {
   }, []);
 
   return (
-    <div className="flex h-full flex-col items-center justify-center">
+    <section className="flex h-full flex-col items-center justify-center gap-6 lg:gap-8 xl:gap-12">
       <motion.div
-        className="mb-12 text-center"
+        className="text-center"
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.6 }}
       >
-        <p className="text-muted-foreground text-lg">5분마다 일정 금액씩 가격이 하락합니다</p>
+        <h2 className="text-muted-foreground text-base">
+          판매자가 정한 <strong>Stop Loss</strong>까지
+          <br />
+          <span className="font-semibold text-red-500">5분</span>
+          마다 가격이 하락합니다
+        </h2>
       </motion.div>
 
-      <div className="w-full max-w-2xl">
+      <div className="flex w-full max-w-lg flex-col gap-3">
         {priceData.map((point, index) => (
           <motion.div
             key={point.time}
-            className="relative mb-4"
+            className="flex flex-col gap-2 px-1"
             initial={{ opacity: 0 }}
             animate={{ opacity: index < visibleBars ? 1 : 0 }}
             transition={{ duration: 0.4 }}
           >
-            <div className="mb-2 flex items-center gap-4">
+            <div className="flex items-center gap-4">
               <motion.span
-                className="w-16 text-sm text-gray-500"
+                className="w-16 text-xs text-gray-500 sm:text-sm"
                 initial={{ opacity: 0, x: -10 }}
                 animate={{ opacity: index < visibleBars ? 1 : 0, x: index < visibleBars ? 0 : -10 }}
-                transition={{ delay: index * 0.5 + 0.2 }}
+                transition={{ delay: 0.08, duration: 0.25 }}
               >
                 {point.time}
               </motion.span>
 
               {point.label && (
                 <motion.span
-                  className="rounded-full px-3 py-1 text-xs font-medium"
+                  className="rounded-full px-2.5 py-0.5 text-xs font-medium"
                   style={{
                     backgroundColor:
                       index === priceData.length - 1
@@ -64,7 +69,7 @@ export function GuidebookPage2() {
                     opacity: index < visibleBars ? 1 : 0,
                   }}
                   transition={{
-                    delay: index * 0.5 + 0.3,
+                    delay: 0.12,
                     type: "spring",
                     stiffness: 300,
                     damping: 20,
@@ -76,7 +81,7 @@ export function GuidebookPage2() {
             </div>
 
             <motion.div
-              className="relative h-20 overflow-hidden rounded-2xl"
+              className="h-fit rounded-lg py-2"
               style={{
                 backgroundColor:
                   index === priceData.length - 1
@@ -93,24 +98,11 @@ export function GuidebookPage2() {
                   index < visibleBars ? `${(point.price / priceData[0].price) * 100}%` : "100%",
                 scale: index < visibleBars ? 1 : 0.95,
               }}
-              transition={{ delay: index * 0.5 + 0.15, duration: 0.7, ease: [0.34, 1.56, 0.64, 1] }}
+              transition={{ duration: 0.65, ease: [0.34, 1.56, 0.64, 1] }}
             >
-              <motion.div
-                className="absolute inset-0"
-                style={{
-                  background:
-                    index === priceData.length - 1
-                      ? "linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)"
-                      : "linear-gradient(90deg, transparent, rgba(136, 81, 237, 0.1), transparent)",
-                }}
-                initial={{ x: "-100%" }}
-                animate={{ x: index < visibleBars ? "200%" : "-100%" }}
-                transition={{ delay: index * 0.5 + 0.4, duration: 1.2, ease: "easeInOut" }}
-              />
-
-              <div className="absolute inset-0 flex items-center justify-between px-6">
+              <div className="flex items-center justify-between px-3">
                 <motion.span
-                  className="text-3xl font-bold"
+                  className="text-md font-bold"
                   style={{
                     color: index === priceData.length - 1 ? "white" : "oklch(0.4758 0.2241 288.5)",
                   }}
@@ -119,14 +111,14 @@ export function GuidebookPage2() {
                     opacity: index < visibleBars ? 1 : 0,
                     y: index < visibleBars ? 0 : 10,
                   }}
-                  transition={{ delay: index * 0.5 + 0.4 }}
+                  transition={{ delay: 0.12, duration: 0.28 }}
                 >
                   ₩{point.price.toLocaleString()}
                 </motion.span>
 
                 {index > 0 && (
                   <motion.div
-                    className="rounded-full px-3 py-1 text-sm font-semibold"
+                    className="rounded-full px-2 py-0.5 text-xs font-semibold"
                     style={{
                       backgroundColor:
                         index === priceData.length - 1
@@ -140,7 +132,7 @@ export function GuidebookPage2() {
                       opacity: index < visibleBars ? 1 : 0,
                       scale: index < visibleBars ? 1 : 0.8,
                     }}
-                    transition={{ delay: index * 0.5 + 0.6 }}
+                    transition={{ delay: 0.18, duration: 0.28 }}
                   >
                     -{Math.round((1 - point.price / priceData[0].price) * 100)}%
                   </motion.div>
@@ -152,16 +144,16 @@ export function GuidebookPage2() {
       </div>
 
       <motion.div
-        className="mt-8 max-w-md rounded-xl px-6 py-3 text-center"
-        style={{ backgroundColor: "oklch(0.4758 0.2241 288.5 / 0.05)" }}
+        className="rounded-xl px-3 py-2.5 text-center"
+        style={{ backgroundColor: "oklch(0.4758 0.2241 288.5 / 0.15)" }}
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 2.8, duration: 0.6 }}
+        transition={{ delay: 2, duration: 0.6 }}
       >
-        <p className="text-brand text-sm font-medium">
+        <p className="text-brand-text text-xs font-semibold">
           💡 원하는 가격이 되면 즉시 구매할 수 있습니다
         </p>
       </motion.div>
-    </div>
+    </section>
   );
 }
diff --git a/src/screens/guide/ui/pages/guidebook-page3.tsx b/src/screens/guide/ui/pages/guidebook-page3.tsx
index 0910908a..1bd10431 100644
--- a/src/screens/guide/ui/pages/guidebook-page3.tsx
+++ b/src/screens/guide/ui/pages/guidebook-page3.tsx
@@ -19,106 +19,112 @@ export function GuidebookPage3() {
   }, []);
 
   return (
-    <div className="relative grid h-full items-center gap-12 pb-10 md:grid-cols-2">
-      <motion.div
-        initial={{ opacity: 0, x: -30 }}
-        animate={{ opacity: 1, x: 0 }}
-        transition={{ duration: 0.6 }}
-      >
-        <h3 className="text-foreground mb-6 text-lg font-semibold">실시간 가격 변동</h3>
-        <div className="space-y-3">
-          {priceSteps.map((step, index) => (
-            <motion.div
-              key={step.time}
-              className="rounded-lg border-2 p-4 transition-all"
-              style={{
-                borderColor: index === 2 ? "oklch(0.4758 0.2241 288.5)" : "#E5E7EB",
-                backgroundColor: index === 2 ? "oklch(0.4758 0.2241 288.5 / 0.05)" : "white",
-              }}
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: index * 0.2 + 0.3 }}
-            >
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-gray-500">{step.time}</span>
-                <span
-                  className="text-xl font-bold"
-                  style={{ color: index === 2 ? "oklch(0.4758 0.2241 288.5)" : "#1F2937" }}
-                >
-                  ₩{step.price.toLocaleString()}
-                </span>
-              </div>
+    <section className="flex h-full flex-col items-center justify-center gap-12">
+      <h2 className="text-muted-foreground text-base">
+        StopLoss에 언제 도달할지, 누가 먼저 구매할지 <strong>예측할 수 없습니다</strong>
+      </h2>
+      <div className="grid items-center gap-12 md:grid-cols-2">
+        <motion.div
+          initial={{ opacity: 0, x: -30 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6 }}
+        >
+          <h3 className="text-foreground mb-4 text-base font-semibold">실시간 가격 변동</h3>
+          <div className="space-y-3">
+            {priceSteps.map((step, index) => (
+              <motion.div
+                key={step.time}
+                className="rounded-lg border-2 p-3 transition-all"
+                style={{
+                  borderColor: index === 2 ? "oklch(0.4758 0.2241 288.5)" : "#E5E7EB",
+                  backgroundColor: index === 2 ? "oklch(0.4758 0.2241 288.5 / 0.15)" : "white",
+                }}
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.2 + 0.3 }}
+              >
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-zinc-500">{step.time}</span>
+                  <span
+                    className="text-lg font-bold"
+                    style={{ color: index === 2 ? "var(--color-brand-text)" : "#1F2937" }}
+                  >
+                    ₩{step.price.toLocaleString()}
+                  </span>
+                </div>
 
-              {index === 2 && (
-                <motion.div
-                  className="mt-2 text-xs font-semibold"
-                  style={{ color: "oklch(0.4758 0.2241 288.5)" }}
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  transition={{ delay: 1.5 }}
-                >
-                  구매 가능한 가격!
-                </motion.div>
-              )}
-            </motion.div>
-          ))}
-        </div>
-      </motion.div>
+                {index === 2 && (
+                  <motion.div
+                    className="mt-2 text-xs font-semibold"
+                    style={{ color: "oklch(0.4758 0.2241 288.5)" }}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ delay: 1.5 }}
+                  >
+                    <span className="text-red-500">원하는 가격!</span>
+                  </motion.div>
+                )}
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
 
-      <motion.div
-        initial={{ opacity: 0, x: 30 }}
-        animate={{ opacity: 1, x: 0 }}
-        transition={{ duration: 0.6, delay: 0.2 }}
-      >
-        <h3 className="text-foreground mb-6 text-lg font-semibold">구매자의 고민</h3>
-        <div className="min-h-60 space-y-3">
-          {messages.map((message, idx) => {
-            const isVisible = idx < visibleMessages;
-            let backgroundColor = "#F3F4F6";
-            let textColor = "#1F2937";
+        <motion.div
+          initial={{ opacity: 0, x: 30 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6, delay: 0.2 }}
+          className="flex h-full w-full flex-col"
+        >
+          <h3 className="text-foreground mb-4 flex justify-end text-base font-semibold">
+            구매자의 고민
+          </h3>
+          <div className="min-h-48 flex-1 space-y-3 max-[1024px]:min-h-40">
+            {messages.map((message, idx) => {
+              const isVisible = idx < visibleMessages;
+              let backgroundColor = "#F3F4F6";
+              let textColor = "#1F2937";
 
-            if (message.type === "success") {
-              backgroundColor = "oklch(0.4758 0.2241 288.5)";
-              textColor = "white";
-            } else if (message.type === "waiting") {
-              backgroundColor = "#FEF3C7";
-            }
+              if (message.type === "success") {
+                backgroundColor = "oklch(0.4758 0.2241 288.5)";
+                textColor = "white";
+              } else if (message.type === "waiting") {
+                backgroundColor = "#FEF3C7";
+              }
 
-            return (
-              <motion.div
-                key={message.id}
-                className="flex justify-end"
-                initial={{ opacity: 0, x: 20 }}
-                animate={{ opacity: isVisible ? 1 : 0, x: isVisible ? 0 : 20 }}
-                transition={{ duration: 0.3 }}
-                style={{ visibility: isVisible ? "visible" : "hidden" }}
-              >
+              return (
                 <motion.div
-                  className="max-w-[85%] rounded-2xl rounded-tr-sm px-5 py-3 shadow-md"
-                  style={{ backgroundColor, color: textColor }}
-                  whileHover={{ scale: 1.02 }}
+                  key={message.id}
+                  className="flex justify-end"
+                  initial={{ opacity: 0, x: 20 }}
+                  animate={{ opacity: isVisible ? 1 : 0, x: isVisible ? 0 : 20 }}
+                  transition={{ duration: 0.3 }}
+                  style={{ visibility: isVisible ? "visible" : "hidden" }}
                 >
-                  <p className="text-base">{message.text}</p>
+                  <motion.div
+                    className="max-w-[85%] rounded-2xl rounded-tr-sm px-4 py-2 shadow-md max-[1024px]:px-3 max-[1024px]:py-1.5"
+                    style={{ backgroundColor, color: textColor }}
+                    whileHover={{ scale: 1.02 }}
+                  >
+                    <p className="text-sm max-[1024px]:text-xs">{message.text}</p>
+                  </motion.div>
                 </motion.div>
-              </motion.div>
-            );
-          })}
-        </div>
+              );
+            })}
+          </div>
+        </motion.div>
+      </div>
 
-        {visibleMessages === messages.length && (
-          <motion.div
-            className="absolute bottom-0 left-1/2 w-fit -translate-x-1/2 rounded-xl px-6 py-3 text-center"
-            style={{ backgroundColor: "oklch(0.4758 0.2241 288.5 / 0.05)" }}
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.5 }}
-          >
-            <p className="text-brand shrink-0 text-sm font-medium whitespace-nowrap">
-              💡 타이밍을 잘 잡으면 원하는 가격에 구매할 수 있습니다
-            </p>
-          </motion.div>
-        )}
+      <motion.div
+        className="w-fit rounded-xl px-3 py-2.5 text-center"
+        style={{ backgroundColor: "oklch(0.4758 0.2241 288.5 / 0.15)" }}
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 3, duration: 0.6 }}
+      >
+        <p className="text-brand-text text-xs font-semibold">
+          💡 타이밍을 잘 잡으면 원하는 가격에 구매할 수 있습니다
+        </p>
       </motion.div>
-    </div>
+    </section>
   );
 }
diff --git a/src/screens/guide/ui/pages/guidebook-page4.tsx b/src/screens/guide/ui/pages/guidebook-page4.tsx
index 7ad0b842..fe3f790e 100644
--- a/src/screens/guide/ui/pages/guidebook-page4.tsx
+++ b/src/screens/guide/ui/pages/guidebook-page4.tsx
@@ -11,24 +11,24 @@ export function GuidebookPage4() {
   return (
     <div className="flex h-full flex-col justify-center">
       <motion.div
-        className="mb-10 text-center"
+        className="mb-6 text-center max-[1024px]:mb-4"
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.6 }}
       >
-        <p className="text-muted-foreground text-lg">
+        <p className="text-muted-foreground text-base max-[1024px]:text-sm">
           경매 상태를 확인하고 적절한 타이밍에 참여하세요
         </p>
       </motion.div>
 
-      <div className="mx-auto grid w-full max-w-xl justify-items-stretch gap-8 md:grid-cols-2">
+      <div className="mx-auto grid w-full max-w-2xl justify-items-stretch gap-6 max-[1024px]:gap-5 md:grid-cols-2">
         <motion.div
           initial={{ opacity: 0, x: -40 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ duration: 0.6, delay: 0.2 }}
           className="bg-secondary/60 border-border/60 overflow-hidden rounded-2xl border shadow-lg"
         >
-          <div className="bg-muted relative h-48 overflow-hidden">
+          <div className="bg-muted relative h-40 overflow-hidden max-[1024px]:h-36">
             <Image
               src={guideImages.liveAuction}
               alt="Live Auction"
@@ -56,11 +56,13 @@ export function GuidebookPage4() {
             </motion.div>
           </div>
 
-          <div className="p-6">
-            <h3 className="mb-4 text-lg font-semibold">프리미엄 무선 이어폰</h3>
+          <div className="p-4 max-[1024px]:p-3">
+            <h3 className="mb-3 text-base font-semibold max-[1024px]:text-sm">
+              프리미엄 무선 이어폰
+            </h3>
 
             <motion.div
-              className="mb-4 min-h-24 rounded-lg p-4"
+              className="mb-4 min-h-20 rounded-lg p-3 max-[1024px]:min-h-16 max-[1024px]:p-2.5"
               style={{ backgroundColor: "oklch(0.4758 0.2241 288.5 / 0.1)" }}
               animate={{
                 backgroundColor: [
@@ -75,7 +77,10 @@ export function GuidebookPage4() {
                 <span className="text-muted-foreground text-xs">현재 가격</span>
                 <TrendingDown className="h-3 w-3" style={{ color: "oklch(0.4758 0.2241 288.5)" }} />
               </div>
-              <div className="text-2xl font-bold" style={{ color: "oklch(0.4758 0.2241 288.5)" }}>
+              <div
+                className="text-xl font-bold max-[1024px]:text-lg"
+                style={{ color: "oklch(0.4758 0.2241 288.5)" }}
+              >
                 ₩85,000
               </div>
               <div className="text-muted-foreground mt-1 text-xs line-through">₩120,000</div>
@@ -103,7 +108,7 @@ export function GuidebookPage4() {
           transition={{ duration: 0.6, delay: 0.4 }}
           className="bg-secondary/60 border-border/60 overflow-hidden rounded-2xl border shadow-lg"
         >
-          <div className="bg-muted relative h-48 overflow-hidden">
+          <div className="bg-muted relative h-48 overflow-hidden max-[1024px]:h-36">
             <Image
               src={guideImages.upcomingAuction}
               alt="Upcoming Auction"
@@ -120,12 +125,12 @@ export function GuidebookPage4() {
             </motion.div>
           </div>
 
-          <div className="p-6">
-            <h3 className="mb-4 text-lg font-semibold">스마트 워치 프로</h3>
+          <div className="p-4 max-[1024px]:p-3">
+            <h3 className="mb-3 text-base font-semibold max-[1024px]:text-sm">스마트 워치 프로</h3>
 
-            <div className="bg-card mb-4 min-h-24 rounded-lg border border-white/10 p-4">
+            <div className="bg-card mb-4 min-h-20 rounded-lg border border-white/10 p-3 max-[1024px]:min-h-16 max-[1024px]:p-2.5">
               <div className="text-muted-foreground mb-1 text-xs">시작 가격</div>
-              <div className="text-foreground text-2xl font-bold">₩450,000</div>
+              <div className="text-foreground text-xl font-bold max-[1024px]:text-lg">₩450,000</div>
             </div>
 
             <div className="text-muted-foreground mb-4 flex items-center gap-2 text-sm">
diff --git a/src/screens/guide/ui/pages/guidebook-page5.tsx b/src/screens/guide/ui/pages/guidebook-page5.tsx
index 1e63f6ff..9102528e 100644
--- a/src/screens/guide/ui/pages/guidebook-page5.tsx
+++ b/src/screens/guide/ui/pages/guidebook-page5.tsx
@@ -17,17 +17,19 @@ export function GuidebookPage5() {
   };
 
   return (
-    <div className="flex h-full flex-col justify-center">
+    <section className="flex h-full min-h-full w-full flex-col items-center justify-center">
       <motion.div
-        className="mb-10 text-center"
+        className="mb-6 text-center max-[1024px]:mb-4"
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.6 }}
       >
-        <p className="text-muted-foreground text-lg">5단계로 간편하게 경매를 등록하세요</p>
+        <p className="text-muted-foreground text-base max-[1024px]:text-sm">
+          5단계로 간편하게 경매를 등록하세요
+        </p>
       </motion.div>
 
-      <div className="mb-12 flex items-center justify-center gap-4">
+      <div className="mb-8 flex flex-wrap items-center justify-center gap-3 max-[1024px]:mb-6 max-[1024px]:gap-2.5">
         {steps.map((step, index) => {
           const isCompleted = completedSteps.includes(index);
           const isCurrent = index === currentStep;
@@ -54,7 +56,7 @@ export function GuidebookPage5() {
                 whileHover={{ scale: 1.05 }}
               >
                 <motion.div
-                  className="flex h-16 w-16 items-center justify-center rounded-full border-2 transition-all"
+                  className="flex h-12 w-12 items-center justify-center rounded-full border-2 transition-all max-[1024px]:h-10 max-[1024px]:w-10"
                   style={{
                     borderColor,
                     backgroundColor,
@@ -72,24 +74,27 @@ export function GuidebookPage5() {
                   transition={{ duration: 1.5, repeat: Infinity }}
                 >
                   {isCompleted ? (
-                    <CheckCircle className="h-8 w-8 text-white" />
+                    <CheckCircle className="h-6 w-6 text-white max-[1024px]:h-5 max-[1024px]:w-5" />
                   ) : (
                     React.createElement(step.icon, {
-                      className: "w-7 h-7",
+                      className: "h-5 w-5 max-[1024px]:h-4 max-[1024px]:w-4",
                       style: {
                         color: iconColor,
                       },
                     })
                   )}
                 </motion.div>
-                <span className="text-sm font-medium" style={{ color: labelColor }}>
+                <span
+                  className="text-xs font-medium max-[1024px]:text-[11px]"
+                  style={{ color: labelColor }}
+                >
                   Step {index + 1}
                 </span>
               </motion.button>
 
               {index < steps.length - 1 && (
                 <div
-                  className="-mt-5 h-0.5 w-12"
+                  className="-mt-4 h-0.5 w-8 max-[1024px]:w-6"
                   style={{
                     backgroundColor: isCompleted ? "oklch(0.4758 0.2241 288.5)" : "#E5E7EB",
                   }}
@@ -105,29 +110,33 @@ export function GuidebookPage5() {
         initial={{ opacity: 0, x: 30 }}
         animate={{ opacity: 1, x: 0 }}
         transition={{ duration: 0.3 }}
-        className="mx-auto w-full max-w-xl flex-1"
+        className="mx-auto w-full max-w-xl"
       >
-        <div className="bg-card rounded-2xl p-8">
+        <div className="bg-card rounded-2xl p-6 max-[1024px]:p-5">
           <div className="mb-6 flex items-center gap-3">
             <div
-              className="flex h-12 w-12 items-center justify-center rounded-full"
+              className="flex h-10 w-10 items-center justify-center rounded-full max-[1024px]:h-9 max-[1024px]:w-9"
               style={{ backgroundColor: "oklch(0.4758 0.2241 288.5 / 0.1)" }}
             >
               {React.createElement(steps[currentStep].icon, {
-                className: "w-6 h-6",
+                className: "h-5 w-5 max-[1024px]:h-4 max-[1024px]:w-4",
                 style: { color: "oklch(0.4758 0.2241 288.5)" },
               })}
             </div>
             <div>
-              <h3 className="text-xl font-semibold">{steps[currentStep].label}</h3>
-              <p className="text-muted-foreground text-sm">{steps[currentStep].description}</p>
+              <h3 className="text-lg font-semibold max-[1024px]:text-base">
+                {steps[currentStep].label}
+              </h3>
+              <p className="text-muted-foreground text-xs max-[1024px]:text-[11px]">
+                {steps[currentStep].description}
+              </p>
             </div>
           </div>
 
           <motion.input
             type="text"
             placeholder={steps[currentStep].placeholder}
-            className="w-full rounded-lg border-2 px-6 py-4 transition-all outline-none"
+            className="w-full rounded-lg border-2 px-4 py-3 text-sm transition-all outline-none max-[1024px]:px-3 max-[1024px]:py-2.5 max-[1024px]:text-xs"
             style={{
               borderColor: "oklch(0.4758 0.2241 288.5)",
               boxShadow: "0 0 0 4px oklch(0.4758 0.2241 288.5 / 0.1)",
@@ -139,32 +148,32 @@ export function GuidebookPage5() {
 
           <motion.button
             onClick={handleComplete}
-            className="mt-6 flex w-full items-center justify-center gap-2 rounded-lg py-4 font-semibold text-white"
+            className="mt-4 flex w-full items-center justify-center gap-2 rounded-lg py-3 text-sm font-semibold text-white max-[1024px]:py-2.5 max-[1024px]:text-xs"
             style={{ backgroundColor: "oklch(0.4758 0.2241 288.5)" }}
             whileHover={{ scale: 1.02 }}
             whileTap={{ scale: 0.98 }}
           >
             {currentStep < steps.length - 1 ? "다음 단계" : "경매 등록하기"}
-            <ChevronRight className="h-5 w-5" />
+            <ChevronRight className="h-4 w-4 max-[1024px]:h-3.5 max-[1024px]:w-3.5" />
           </motion.button>
         </div>
       </motion.div>
 
       {completedSteps.length === steps.length && (
         <motion.div
-          className="mt-8 text-center"
+          className="mt-6 text-center max-[1024px]:mt-4"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
         >
           <div
-            className="inline-flex items-center gap-2 rounded-full px-6 py-3 font-semibold text-white"
+            className="inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-semibold text-white max-[1024px]:px-4 max-[1024px]:py-2 max-[1024px]:text-xs"
             style={{ backgroundColor: "oklch(0.4758 0.2241 288.5)" }}
           >
-            <CheckCircle className="h-5 w-5" />
+            <CheckCircle className="h-4 w-4 max-[1024px]:h-3.5 max-[1024px]:w-3.5" />
             모든 단계 완료!
           </div>
         </motion.div>
       )}
-    </div>
+    </section>
   );
 }