diff --git a/app/find-taste/page.tsx b/app/find-taste/page.tsx
index b4f334c..5bbca39 100644
--- a/app/find-taste/page.tsx
+++ b/app/find-taste/page.tsx
@@ -5,11 +5,11 @@ import More from '@/components/matchingtest/More';
 
 const Page = () => {
   return (
-    <div className="mx-3">
+    <>
       <Header />
       <Test />
       <More />
-    </div>
+    </>
   );
 };
 
diff --git a/app/find-taste/result/page.tsx b/app/find-taste/result/page.tsx
index e97efcc..9948eb8 100644
--- a/app/find-taste/result/page.tsx
+++ b/app/find-taste/result/page.tsx
@@ -2,7 +2,7 @@
 
 import UserStyle from '@/components/matchingtest/UserStyle';
 import Similar from '@/components/matchingtest/Similar';
-import HomeNav from '@/components/home/HomeNav';
+import ResultNav from '@/components/matchingtest/ResultNav';
 import Link from 'next/link';
 import { useState } from 'react';
 import ResultModal from '@/components/matchingtest/ResultModal';
@@ -89,36 +89,28 @@ const Page = ({ searchParams }: ResultPageProps) => {
   };
   return (
     <div>
-      <div>
-        <HomeNav />
-      </div>
-      <div className="mt-16">
-        <UserStyle families={Families} />
-      </div>
-      <div>
-        <Similar fragrance={Fragrance} style={style} />
-      </div>
-
-      <div className="flex flex-row mt-20 justify-center py-3 px-4">
-        <div className="flex mr-2.5">
-          <button
-            type="button"
-            className="rounded-lg bg-acodegray-50 text-black w-[166px] h-[56px] inline-flex items-center justify-center"
-            onClick={handleShareClick}
-          >
-            공유하기
-          </button>
-        </div>
+      <ResultNav />
+      <UserStyle families={Families} />
+      <Similar fragrance={Fragrance} style={style} />
+      <div className="flex flex-row mt-[79px] justify-center mx-4 gap-x-[11px] pb-[28px]">
+        <button
+          type="button"
+          className="h2 rounded bg-acodegray-50 text-black w-[166px] h-[56px] inline-flex items-center justify-center"
+          onClick={handleShareClick}
+        >
+          공유하기
+        </button>
 
         <Link href="/">
           <button
             type="button"
-            className="rounded-lg bg-black text-white w-[166px] h-[56px] inline-flex items-center justify-center"
+            className="h2 rounded bg-black text-white w-[166px] h-[56px] inline-flex items-center justify-center"
           >
             홈으로
           </button>
         </Link>
       </div>
+
       {isModalOpen && <ResultModal onClose={() => setModalOpen(false)} />}
     </div>
   );
diff --git a/app/find-taste/test/page.tsx b/app/find-taste/test/page.tsx
index e838d73..d4031fd 100644
--- a/app/find-taste/test/page.tsx
+++ b/app/find-taste/test/page.tsx
@@ -169,18 +169,14 @@ const Page = () => {
   return isLoading ? (
     <Loading setIsDone={setIsDone} />
   ) : (
-    <div>
-      <div>
-        <SwiperHeader swiperRef={swiperRef} />
-      </div>
-      <div>
-        <Slider
-          slides={slides.map((slide) => slide.component)}
-          keys={slides.map((slide) => slide.name)}
-          swiperRef={swiperRef}
-        />
-      </div>
-    </div>
+    <>
+      <SwiperHeader swiperRef={swiperRef} />
+      <Slider
+        slides={slides.map((slide) => slide.component)}
+        keys={slides.map((slide) => slide.name)}
+        swiperRef={swiperRef}
+      />
+    </>
   );
 };
 
diff --git a/app/welcome/page.tsx b/app/welcome/page.tsx
index 44d83ee..150f616 100644
--- a/app/welcome/page.tsx
+++ b/app/welcome/page.tsx
@@ -20,7 +20,7 @@ const page = () => {
         향수에 입문해보아요
       </h3>
       <BigLinkButton
-        to="/matching/test"
+        to="/find-taste/test"
         buttonStyle="absolute bg-acodeblack text-white font-semibold h-[56px] bottom-[67px] text-[18px] left-[50%] -translate-x-2/4"
       >
         나에게 어울리는 향수 추천 받기
diff --git a/components/common/Footer.tsx b/components/common/Footer.tsx
index 123515e..bd594fb 100644
--- a/components/common/Footer.tsx
+++ b/components/common/Footer.tsx
@@ -4,19 +4,29 @@ import Link from 'next/link';
 const Footer = () => {
   return (
     <div className="pt-[25px] pb-10 bg-acodegray-50 pl-4">
-      <Link href="/" className="caption1 font-medium block mb-2.5 ml-[1px]">
-        향수제품추가요청
+      <Link
+        href="https://docs.google.com/forms/d/e/1FAIpQLScViRETa4DlBZZ6HQKKD0PPlEj3zfdYjPaEPS9bs3nbHTOJgQ/viewform?usp=sharing"
+        className="caption1 font-medium block mb-2.5 ml-[1px]"
+        target="_blank"
+      >
+        향수 제품 추가 요청
       </Link>
-      <Link href="/" className="caption1 font-medium block mb-[38px] ml-[1px]">
-        광고제휴문의
+      <Link
+        href="https://docs.google.com/forms/d/e/1FAIpQLScdUKIiEcWXK7DAn7fmf9HxAG4epWDRTfTfQg6EQu0JPf5ScA/viewform?usp=sharing"
+        className="caption1 font-medium block mb-[38px] ml-[1px]"
+        target="_blank"
+      >
+        광고 제휴 및 입점 문의
       </Link>
       <div className="flex mr-[15px] mb-[21px] text-[10px] font-medium text-acodegray-400 leading-[15px]">
         <AcodeLogoGray className="mr-auto" />
-        <Link href="/" className="mr-5 mt-1">
-          이용약관
-        </Link>
-        <Link href="/" className="mt-1">
-          개인정보처리
+        <Link
+          href="https://www.notion.so/b64e9e00aa364583ad9906080210f853?pvs=4"
+          className="mt-1"
+          target="_blank"
+        >
+          <span className="mr-5">이용약관</span>
+          <span className="">개인정보 처리 방침</span>
         </Link>
       </div>
       <div className="text-[10px] font-medium text-acodegray-400 leading-[15px] grid grid-cols-[61px_188px] gap-x-[17px] mb-[25px]">
diff --git a/components/matchingtest/Header.tsx b/components/matchingtest/Header.tsx
index ca0e689..a17017e 100644
--- a/components/matchingtest/Header.tsx
+++ b/components/matchingtest/Header.tsx
@@ -10,9 +10,12 @@ const Header = () => {
     router.back();
   };
   return (
-    <div className="py-2.5">
-      <PreviousIcon onClick={handleClick} />
+    <div className="fixed top-0 flex items-center w-full max-w-[430px] h-[54px] pt-[13px] pl-[10px] pr-[13px] pb-[11px] bg-acodewhite z-30">
+      <button type="button" className="mr-auto" onClick={handleClick}>
+        <PreviousIcon className="" />
+      </button>
     </div>
   );
 };
+
 export default Header;
diff --git a/components/matchingtest/Individuality.tsx b/components/matchingtest/Individuality.tsx
index 044c47c..d615738 100644
--- a/components/matchingtest/Individuality.tsx
+++ b/components/matchingtest/Individuality.tsx
@@ -101,22 +101,22 @@ const Individuality = ({ updateSelection }: IndividualProps) => {
 
   const swiper = useSwiper();
   return (
-    <div className="mx-4 mt-4">
+    <div className="mx-4 mt-[22px]">
       <div className="flex flex-col">
         <div className="h0 mb-[49px]">
-          <div>
+          <div className="flex items-center">
             어떤
-            <span className="bg-black text-white px-3 mx-[12px] rounded-sm">
-              개성적인
+            <span className="h1 h-[34px]  bg-black ml-[8px] mr-[8px] text-white px-[14px] pt-[2px] rounded-sm">
+              개성적인 향
             </span>
-            향을
+            을
           </div>
           <div>원하시나요?</div>
         </div>
-        <div className="text-gray-500 body2 mb-3">*2개 선택 필수</div>
-        <div className="flex flex-wrap h1 gap-x-3 gap-y-2">
+        <div className="text-gray-300 body2 mb-3">*2개 선택 필수</div>
+        <div className="flex flex-wrap h1 gap-x-3 gap-y-[18px]">
           {options.map((option) => (
-            <div key={option.id} className="">
+            <div key={option.id}>
               <input
                 id={option.id}
                 type="checkbox"
@@ -127,14 +127,14 @@ const Individuality = ({ updateSelection }: IndividualProps) => {
               />
               <label
                 htmlFor={option.id}
-                className={`block w-full text-center py-2 px-3.5 ${
+                className={`block h-[34px] w-full text-center justify-center px-[14px] rounded-sm transition ${
                   selectedOptions.includes(option.id)
                     ? 'bg-acodeblack border-acodegray-100 '
                     : 'bg-acodegray-50 border-acodegray-100'
                 } cursor-pointer flex flex-col items-center justify-center`}
               >
                 <div
-                  className={`${
+                  className={`transition ${
                     selectedOptions.includes(option.id)
                       ? 'text-white'
                       : 'text-acodeblack'
@@ -151,7 +151,7 @@ const Individuality = ({ updateSelection }: IndividualProps) => {
         <button
           type="button"
           onClick={() => swiper.slideNext()}
-          className={`px-4 rounded-lg h-[56px] w-full inline-flex items-center justify-center ${
+          className={`h2 rounded h-[56px] w-full inline-flex items-center justify-center transition ${
             selectedOptions.length === 2
               ? 'bg-black text-white'
               : 'bg-acodegray-300 text-white'
diff --git a/components/matchingtest/Loading.tsx b/components/matchingtest/Loading.tsx
index dda9471..11ba164 100644
--- a/components/matchingtest/Loading.tsx
+++ b/components/matchingtest/Loading.tsx
@@ -40,16 +40,16 @@ const Loading = ({ setIsDone }: LoadingPageProps) => {
   }, [currentIconIndex, lastIconIndex]);
 
   return (
-    <div className="mx-[17px]">
+    <div>
       <Header />
-      <div className="h0 mt-[51px]">
+      <div className="h0 mt-[54px] mx-4">
         <div>당신에게 딱 어울리는 향을 </div>
         <div>추출하고 있어요!</div>
       </div>
       <div className="flex justify-center items-center mt-[126px] mb-[110px]">
         {icons[currentIconIndex]}
       </div>
-      <div className="border border-acodegray-100 bg-acodegray-100 flex justify-center items-center h-[106px]">
+      <div className="border text-[#909090] text-2xl border-acodegray-100 bg-acodegray-100 flex justify-center items-center h-[106px]">
         광고
       </div>
     </div>
diff --git a/components/matchingtest/Main.tsx b/components/matchingtest/Main.tsx
index 26b3f34..2d21260 100644
--- a/components/matchingtest/Main.tsx
+++ b/components/matchingtest/Main.tsx
@@ -53,47 +53,81 @@ const Main = ({ updateSelection }: MainProps) => {
   ];
   const swiper = useSwiper();
   return (
-    <div className="mx-4 mt-4">
+    <div className="mt-[25px]">
       <div className="flex flex-col">
-        <div className="h0 mb-12 ">
+        <div className="h0 mb-12 mx-4">
           <div>어떤 향이 주로 나면</div>
           <div>좋을 것 같나요?</div>
         </div>
-        <div className="text-gray-500 body2 mb-3">*최대 2개 선택 가능</div>
-        <div className="flex flex-wrap gap-x-2.5 gap-y-3 justify-center">
-          {options.map((option) => (
-            <div key={option.id} className="flex flex-col items-center">
-              <input
-                id={option.id}
-                type="checkbox"
-                name="main"
-                value={option.id}
-                checked={selectedOptions.includes(option.id)}
-                onChange={handleCheckboxChange}
-                className="sr-only"
-              />
-              <label
-                htmlFor={option.id}
-                className={`block w-[166px] h-[126px] text-center border ${
-                  selectedOptions.includes(option.id)
-                    ? 'bg-acodegray-50 border-acodegray-100'
-                    : 'bg-white border-acodegray-100'
-                } rounded cursor-pointer p-4 flex flex-col items-center`}
-              >
-                <div className="w-[88px] h-[66px] mb-2 relative flex justify-center">
-                  <Image src={option.img} alt={`${option.id} main`} />
+        <div className="text-gray-300 body2 mb-3 mx-4">*최대 2개 선택 가능</div>
+        <div className="w-full">
+          <div className="flex flex-row mx-4 gap-[10px] pb-[12px]">
+            {options.slice(0, 2).map((option) => (
+              <div key={option.id} className="w-1/2">
+                <div className="flex flex-col">
+                  <input
+                    id={option.id}
+                    type="checkbox"
+                    name="main"
+                    value={option.id}
+                    checked={selectedOptions.includes(option.id)}
+                    onChange={handleCheckboxChange}
+                    className="sr-only"
+                  />
+                  <label
+                    htmlFor={option.id}
+                    className={`text-center border ${
+                      selectedOptions.includes(option.id)
+                        ? 'bg-acodegray-50 border-acodegray-100'
+                        : 'bg-white border-acodegray-100'
+                    } rounded cursor-pointer p-4 flex flex-col items-center`}
+                  >
+                    <div className="w-[88px] h-[66px] mb-2 relative flex justify-center">
+                      <Image src={option.img} alt={`${option.id} main`} />
+                    </div>
+                    <div className="text-acodeblack body1">{option.label}</div>
+                  </label>
                 </div>
-                <div className="text-acodeblack body1">{option.label}</div>
-              </label>
-            </div>
-          ))}
+              </div>
+            ))}
+          </div>
+          <div className="flex flex-row mx-4 gap-[10px]">
+            {options.slice(2, 4).map((option) => (
+              <div key={option.id} className="w-1/2">
+                <div className="flex flex-col">
+                  <input
+                    id={option.id}
+                    type="checkbox"
+                    name="main"
+                    value={option.id}
+                    checked={selectedOptions.includes(option.id)}
+                    onChange={handleCheckboxChange}
+                    className="sr-only"
+                  />
+                  <label
+                    htmlFor={option.id}
+                    className={`text-center border ${
+                      selectedOptions.includes(option.id)
+                        ? 'bg-acodegray-50 border-acodegray-100'
+                        : 'bg-white border-acodegray-100'
+                    } rounded cursor-pointer p-4 flex flex-col items-center`}
+                  >
+                    <div className="w-[88px] h-[66px] mb-2 relative flex justify-center">
+                      <Image src={option.img} alt={`${option.id} main`} />
+                    </div>
+                    <div className="text-acodeblack body1">{option.label}</div>
+                  </label>
+                </div>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
-      <div className="mt-[40px] left-0 right-0 flex justify-center">
+      <div className="mt-[40px] flex justify-center mx-4">
         <button
           type="button"
           onClick={() => swiper.slideNext()}
-          className={`px-4 rounded-lg h-[56px] w-[343px] inline-flex items-center justify-center ${
+          className={`px-4 h2 rounded h-[56px] w-full inline-flex items-center justify-center transition ${
             selectedOptions.length > 0
               ? 'bg-black text-white'
               : 'bg-gray-300 text-white'
diff --git a/components/matchingtest/More.tsx b/components/matchingtest/More.tsx
index 564c99f..9a6d594 100644
--- a/components/matchingtest/More.tsx
+++ b/components/matchingtest/More.tsx
@@ -1,7 +1,7 @@
 const More = () => {
   return (
-    <div className="mt-[35px] bg-acodegray-50 border border-acodegray-50 h-[123px] text-acodegray-200 flex justify-center items-center">
-      <div>추후 추가예정이에요</div>
+    <div className="rounded mt-[35px] ml-[16px] mr-[16px] max-w-[430px] mb-[45px] bg-acodegray-50 border border-acodegray-50 h-[123px] text-acodegray-200 flex justify-center items-center">
+      <div className="body1">추후 추가예정이에요</div>
     </div>
   );
 };
diff --git a/components/matchingtest/Persistence.tsx b/components/matchingtest/Persistence.tsx
index 0ccd24f..49dfc56 100644
--- a/components/matchingtest/Persistence.tsx
+++ b/components/matchingtest/Persistence.tsx
@@ -42,13 +42,13 @@ const Persistence = ({ updateSelection }: PersistenceProps) => {
   ];
   const swiper = useSwiper();
   return (
-    <div className="mx-4 mt-4">
+    <div className="mx-4 mt-[25px]">
       <div className="flex flex-col">
         <div className="h0 mb-12 ">
           <div>한 번 뿌릴 때,</div>
           <div>향이 얼마나 지속되면 좋을까요?</div>
         </div>
-        <div className="text-gray-500 body2 mb-3">*최대 2개 선택 가능</div>
+        <div className="text-gray-300 body2 mb-3">*최대 2개 선택 가능</div>
         <div>
           {options.map((option) => (
             <div key={option.id} className="flex items-center mb-5">
@@ -63,7 +63,7 @@ const Persistence = ({ updateSelection }: PersistenceProps) => {
               />
               <label
                 htmlFor={option.id}
-                className={`block w-full text-start border ${
+                className={`block w-full text-start border transition ${
                   selectedOptions.includes(option.id)
                     ? 'bg-acodegray-50 border-acodegray-100'
                     : 'bg-white border-acodegray-100'
@@ -81,7 +81,7 @@ const Persistence = ({ updateSelection }: PersistenceProps) => {
           <button
             type="button"
             onClick={() => swiper.slideNext()}
-            className={`px-4 rounded-lg h-[56px] w-full inline-flex items-center justify-center ${
+            className={`h2 px-4 rounded h-[56px] w-full inline-flex items-center justify-center transition ${
               selectedOptions.length > 0
                 ? 'bg-black text-white'
                 : 'bg-gray-300 text-white'
diff --git a/components/matchingtest/ResultModal.tsx b/components/matchingtest/ResultModal.tsx
index 7d82611..2032650 100644
--- a/components/matchingtest/ResultModal.tsx
+++ b/components/matchingtest/ResultModal.tsx
@@ -25,6 +25,13 @@ const ResultModal = ({ onClose }: ResultModalProps) => {
     };
   }, [showAlert]);
 
+  useEffect(() => {
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, []);
+
   const copyToClipboardFallback = (text: string) => {
     const textArea = document.createElement('textarea');
     textArea.value = text;
@@ -61,7 +68,7 @@ const ResultModal = ({ onClose }: ResultModalProps) => {
   };
   return (
     <div
-      className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center"
+      className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"
       onClick={onClose}
       onKeyDown={(e) => {
         if (e.key === 'Enter' || e.key === ' ') {
@@ -73,7 +80,7 @@ const ResultModal = ({ onClose }: ResultModalProps) => {
       aria-label="Close modal"
     >
       <div
-        className="bg-white p-6 w-[321px] h-[189px] rounded-lg shadow-lg"
+        className="bg-white p-6 w-[321px] h-[189px] rounded"
         onClick={(e) => e.stopPropagation()}
         onKeyDown={() => {}}
         role="none"
diff --git a/components/matchingtest/ResultNav.tsx b/components/matchingtest/ResultNav.tsx
new file mode 100644
index 0000000..1412124
--- /dev/null
+++ b/components/matchingtest/ResultNav.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import Category from '@/components/home/Category';
+import { AcodeLogoSmall, SearchIcon, UserIcon } from '@/public/images';
+import Link from 'next/link';
+import React, { useState } from 'react';
+
+const ResultNav = () => {
+  const [isCategoryOpen, setIsCategoryOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <div className="fixed top-0 flex items-center w-full max-w-[430px] h-[54px] pt-[13px] pl-[10px] pr-[13px] pb-[11px] bg-acodewhite z-30">
+        {/* Removed MenuIcon button */}
+        <Link
+          href="/"
+          className="absolute top-[20.5px] left-1/2 -translate-x-2/4"
+        >
+          <AcodeLogoSmall />
+        </Link>
+        <Link href="/search" className="mt-[3px] ml-auto mr-[11px]">
+          <SearchIcon className="fill-acodeblack" />
+        </Link>
+        <Link href="/mypage" className="mt-[3px]">
+          <UserIcon className="fill-acodeblack" />
+        </Link>
+      </div>
+      {isCategoryOpen ? (
+        <Category handleClickXButton={() => setIsCategoryOpen(false)} />
+      ) : null}
+    </>
+  );
+};
+
+export default ResultNav;
diff --git a/components/matchingtest/Season.tsx b/components/matchingtest/Season.tsx
index 149b983..b027b04 100644
--- a/components/matchingtest/Season.tsx
+++ b/components/matchingtest/Season.tsx
@@ -52,56 +52,90 @@ const Season = ({ updateSelection }: SeasonProps) => {
   ];
   const swiper = useSwiper();
   return (
-    <div className="mx-4 mt-4">
+    <div className="mt-[25px]">
       <div className="flex flex-col">
-        <div className="h0 mb-12">
+        <div className="h0 mb-12 mx-4">
           <div>어떤 계절에 뿌릴</div>
           <div>향수를 찾으시나요?</div>
         </div>
-        <div className="text-gray-500 body2 mb-3">*최대 2개 선택 가능</div>
-        <div className="flex flex-wrap gap-x-2.5 gap-y-3 justify-center">
-          {options.map((option) => (
-            <div key={option.id} className="flex flex-col items-center">
-              <input
-                id={option.id}
-                type="checkbox"
-                name="season"
-                value={option.id}
-                checked={selectedOptions.includes(option.id)}
-                onChange={handleCheckboxChange}
-                className="sr-only"
-              />
-              <label
-                htmlFor={option.id}
-                className={`block w-[166px] h-[126px] text-center border ${
-                  selectedOptions.includes(option.id)
-                    ? 'bg-acodegray-50 border-acodegray-100'
-                    : 'bg-white border-acodegray-100'
-                } rounded cursor-pointer p-4 flex flex-col items-center`}
-              >
-                <div className="w-[88px] h-[66px] mb-2 relative flex justify-center">
-                  <Image src={option.img} alt={`${option.id} season`} />
+        <div className="text-gray-300 body2 mb-3 mx-4">*최대 2개 선택 가능</div>
+        <div className="w-full">
+          <div className="flex flex-row mx-4 gap-[10px] pb-[12px]">
+            {options.slice(0, 2).map((option) => (
+              <div key={option.id} className="w-1/2">
+                <div className="flex flex-col">
+                  <input
+                    id={option.id}
+                    type="checkbox"
+                    name="season"
+                    value={option.id}
+                    checked={selectedOptions.includes(option.id)}
+                    onChange={handleCheckboxChange}
+                    className="sr-only"
+                  />
+                  <label
+                    htmlFor={option.id}
+                    className={`text-center border ${
+                      selectedOptions.includes(option.id)
+                        ? 'bg-acodegray-50 border-acodegray-100'
+                        : 'bg-white border-acodegray-100'
+                    } rounded cursor-pointer p-4 flex flex-col items-center`}
+                  >
+                    <div className="w-[88px] h-[66px] mb-2 relative flex justify-center">
+                      <Image src={option.img} alt={`${option.id} season`} />
+                    </div>
+                    <div className="text-acodeblack body1">{option.label}</div>
+                  </label>
                 </div>
-                <div className="text-acodeblack body1">{option.label}</div>
-              </label>
-            </div>
-          ))}
-        </div>
-        <div className="mt-[40px] left-0 right-0 flex justify-center px-4">
-          <button
-            type="button"
-            onClick={() => swiper.slideNext()}
-            className={`px-4 rounded-lg h-[56px] w-[343px] inline-flex items-center justify-center ${
-              selectedOptions.length > 0
-                ? 'bg-black text-white'
-                : 'bg-gray-300 text-white'
-            }`}
-            disabled={selectedOptions.length === 0}
-          >
-            다음
-          </button>
+              </div>
+            ))}
+          </div>
+          <div className="flex flex-row mx-4 gap-[10px]">
+            {options.slice(2, 4).map((option) => (
+              <div key={option.id} className="w-1/2">
+                <div className="flex flex-col">
+                  <input
+                    id={option.id}
+                    type="checkbox"
+                    name="season"
+                    value={option.id}
+                    checked={selectedOptions.includes(option.id)}
+                    onChange={handleCheckboxChange}
+                    className="sr-only"
+                  />
+                  <label
+                    htmlFor={option.id}
+                    className={`text-center border ${
+                      selectedOptions.includes(option.id)
+                        ? 'bg-acodegray-50 border-acodegray-100'
+                        : 'bg-white border-acodegray-100'
+                    } rounded cursor-pointer p-4 flex flex-col items-center`}
+                  >
+                    <div className="w-[88px] h-[66px] mb-2 relative flex justify-center">
+                      <Image src={option.img} alt={`${option.id} season`} />
+                    </div>
+                    <div className="text-acodeblack body1">{option.label}</div>
+                  </label>
+                </div>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
+      <div className="mt-[40px] left-0 right-0 flex justify-center mx-4">
+        <button
+          type="button"
+          onClick={() => swiper.slideNext()}
+          className={`h2 px-4 rounded h-[56px] w-full inline-flex items-center justify-center transition ${
+            selectedOptions.length > 0
+              ? 'bg-black text-white'
+              : 'bg-gray-300 text-white'
+          }`}
+          disabled={selectedOptions.length === 0}
+        >
+          다음
+        </button>
+      </div>
     </div>
   );
 };
diff --git a/components/matchingtest/SwiperHeader.tsx b/components/matchingtest/SwiperHeader.tsx
index 3c962d8..cf74239 100644
--- a/components/matchingtest/SwiperHeader.tsx
+++ b/components/matchingtest/SwiperHeader.tsx
@@ -18,10 +18,10 @@ const SwiperHeader = ({ swiperRef }: SliderProps) => {
     }
   };
   return (
-    <div>
-      <div className="py-2.5 px-2.5">
-        <PreviousIcon onClick={handlePrev} />
-      </div>
+    <div className="flex items-center w-full max-w-[430px] h-[54px] pt-[13px] pl-[10px] pr-[13px] pb-[11px] bg-acodewhite z-30">
+      <button type="button" className="mr-auto" onClick={handlePrev}>
+        <PreviousIcon className="" />
+      </button>
     </div>
   );
 };
diff --git a/components/matchingtest/Test.tsx b/components/matchingtest/Test.tsx
index 5c67fce..2f0e2e2 100644
--- a/components/matchingtest/Test.tsx
+++ b/components/matchingtest/Test.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 
 const Test = () => {
   return (
-    <div className="w-full h-[500px] bg-black rounded-sm">
+    <div className="mt-[56px] mr-[16px] ml-[16px] max-w-[430px] h-[500px] bg-black rounded-lg relative">
       <div className="ml-7 pt-9">
         <div className="mb-[25px]">
           <AcodeLogoSmallBlack />
@@ -13,10 +13,12 @@ const Test = () => {
         </div>
       </div>
       <Link href="/find-taste/test">
-        <div className="text-white place-items-end mt-[272px] ml-[200px] ">
-          <div className="flex flex-col h2">
-            테스트시작
-            <RealArrow />
+        <div className="text-white absolute bottom-6 right-6">
+          <div className="flex items-center h2">
+            <div className="flex flex-col">
+              <span>테스트시작</span>
+              <RealArrow />
+            </div>
           </div>
         </div>
       </Link>
diff --git a/components/matchingtest/UserStyle.tsx b/components/matchingtest/UserStyle.tsx
index 21ef5c7..8a54e53 100644
--- a/components/matchingtest/UserStyle.tsx
+++ b/components/matchingtest/UserStyle.tsx
@@ -1,4 +1,17 @@
-import { SceneIcon, Testing } from '@/public/images';
+import {
+  SpicyGray,
+  WoodyGray,
+  CitrusGray,
+  ChypreGray,
+  AldehydeGray,
+  AromaticGray,
+  FloralGray,
+  LeatherGray,
+  GreenGray,
+  EarthyGray,
+  FruityGray,
+} from '@/public/images';
+import Image from 'next/image';
 
 interface Family {
   familyKorName: string;
@@ -13,17 +26,75 @@ interface UserStyleProps {
 }
 
 const UserStyle = ({ families }: UserStyleProps) => {
+  const getImageComponent = (familyEngName: string) => {
+    let imageSrc: any;
+    switch (familyEngName) {
+      case 'WOODY':
+        imageSrc = WoodyGray;
+        break;
+      case 'SPICY':
+        imageSrc = SpicyGray;
+        break;
+      case 'CITRUS':
+        imageSrc = CitrusGray;
+        break;
+      case 'CHYPRE':
+        imageSrc = ChypreGray;
+        break;
+      case 'ALDEHYDE':
+        imageSrc = AldehydeGray;
+        break;
+      case 'AROMATIC':
+        imageSrc = AromaticGray;
+        break;
+      case 'FLORAL':
+        imageSrc = FloralGray;
+        break;
+      case 'LEATHER':
+        imageSrc = LeatherGray;
+        break;
+      case 'GREEN':
+        imageSrc = GreenGray;
+        break;
+      case 'EARTHY':
+        imageSrc = EarthyGray;
+        break;
+      case 'FRUITY':
+        imageSrc = FruityGray;
+        break;
+      default:
+    }
+
+    return (
+      <Image
+        src={imageSrc}
+        alt={`${familyEngName} badge`}
+        width={58}
+        height={58}
+        className="w-[58px] h-[58px]"
+        style={{ objectFit: 'contain' }}
+      />
+    );
+  };
   return (
-    <div>
+    <div className="mt-16">
       <div className="flex flex-col mx-4">
         <div className="mb-16">
           <div className="h1 text-center mb-3.5">
-            당신에게 어울리는 계절코드
+            당신에게 어울리는 계열코드
           </div>
           <div className="flex flex-row justify-center gap-x-4">
             {families.map((family) => (
               <div key={`${family.familyKorName}`}>
-                <SceneIcon className="w-[52px] h-[68px]" />
+                <Image
+                  src={family.icon}
+                  width={52}
+                  height={68}
+                  alt="badge"
+                  priority
+                  style={{ objectFit: 'contain' }}
+                  className="w-[52px] h-[68px] border-sm"
+                />
               </div>
             ))}
           </div>
@@ -32,8 +103,8 @@ const UserStyle = ({ families }: UserStyleProps) => {
         {families.map((family) => (
           <div key={`${family.familyKorName}-${family.familyEngName}`}>
             <div className="flex flex-row mb-4">
-              <div>
-                <Testing className="mr-7" />
+              <div className="mr-7">
+                {getImageComponent(family.familyEngName)}
               </div>
               <div className="flex flex-col w-full">
                 <div className="h2 text-acodegray-500 mb-2.5">
@@ -43,7 +114,7 @@ const UserStyle = ({ families }: UserStyleProps) => {
                   </span>
                 </div>
 
-                <div className="body1 mb-6">{family.summary}</div>
+                <div className="body2 mb-6">{family.summary}</div>
                 <div className="flex flex-row">
                   {family.keyword.map((keywords) => (
                     <div key={keywords} className="body2 mr-2.5">
diff --git a/components/matchingtest/Vibe.tsx b/components/matchingtest/Vibe.tsx
index 3a01358..73a9780 100644
--- a/components/matchingtest/Vibe.tsx
+++ b/components/matchingtest/Vibe.tsx
@@ -53,14 +53,15 @@ const Vibe = ({ updateSelection, handleSubmit }: VibeProps) => {
     { id: '가벼운', label: '가벼운' },
   ];
   return (
-    <div className="mx-4 mt-4">
+    <div className="mx-4 mt-[25px]">
       <div className="flex flex-col">
         <div className="h0 mb-[49px]">
-          <div>향수로 어떤 분위기를</div>
-          <div>내고 싶으신가요?</div>
+          향수로 어떤 분위기를
+          <br />
+          내고 싶으신가요?
         </div>
-        <div className="text-gray-500 body2 mb-3">*2개 선택 필수</div>
-        <div className="flex flex-wrap h1 gap-x-3 gap-y-2">
+        <div className="text-gray-300 body2 mb-3">*2개 선택 필수</div>
+        <div className="flex flex-wrap h1 gap-x-3 gap-y-[18px]">
           {vibeOptions.map((option) => (
             <div key={option.id} className="">
               <input
@@ -73,14 +74,14 @@ const Vibe = ({ updateSelection, handleSubmit }: VibeProps) => {
               />
               <label
                 htmlFor={`vibe-option-${option.id}`}
-                className={`block w-full text-center py-2 px-4 ${
+                className={`h-[34px] w-full flex items-center justify-center px-[14px] rounded-sm transition ${
                   selectedVibes.includes(option.id)
                     ? 'bg-acodeblack border-acodegray-100 '
                     : 'bg-acodegray-50 border-acodegray-100'
                 } cursor-pointer flex flex-col items-center justify-center`}
               >
                 <div
-                  className={`${
+                  className={`transition ${
                     selectedVibes.includes(option.id)
                       ? 'text-white'
                       : 'text-acodeblack'
@@ -96,7 +97,7 @@ const Vibe = ({ updateSelection, handleSubmit }: VibeProps) => {
           <button
             type="button"
             onClick={handleSubmit}
-            className={`px-4 rounded-lg h-[56px] w-full inline-flex items-center justify-center ${
+            className={`h2 px-4 rounded h-[56px] w-full inline-flex items-center justify-center transition ${
               selectedVibes.length === 2
                 ? 'bg-black text-white'
                 : 'bg-acodegray-300 text-white'
diff --git a/public/images/Aldehyde-gray.png b/public/images/Aldehyde-gray.png
new file mode 100644
index 0000000..ca825cf
Binary files /dev/null and b/public/images/Aldehyde-gray.png differ
diff --git a/public/images/Aromatic-gray.png b/public/images/Aromatic-gray.png
new file mode 100644
index 0000000..5dd3b15
Binary files /dev/null and b/public/images/Aromatic-gray.png differ
diff --git a/public/images/Chypre-gray.png b/public/images/Chypre-gray.png
new file mode 100644
index 0000000..106ec70
Binary files /dev/null and b/public/images/Chypre-gray.png differ
diff --git a/public/images/Citrus-gray.png b/public/images/Citrus-gray.png
new file mode 100644
index 0000000..dc32d35
Binary files /dev/null and b/public/images/Citrus-gray.png differ
diff --git a/public/images/Earthy-gray.png b/public/images/Earthy-gray.png
new file mode 100644
index 0000000..cb86d9f
Binary files /dev/null and b/public/images/Earthy-gray.png differ
diff --git a/public/images/Floral-gray.png b/public/images/Floral-gray.png
new file mode 100644
index 0000000..426d07a
Binary files /dev/null and b/public/images/Floral-gray.png differ
diff --git a/public/images/Fruity-gray.png b/public/images/Fruity-gray.png
new file mode 100644
index 0000000..33e29f2
Binary files /dev/null and b/public/images/Fruity-gray.png differ
diff --git a/public/images/Green-gray.png b/public/images/Green-gray.png
new file mode 100644
index 0000000..d965459
Binary files /dev/null and b/public/images/Green-gray.png differ
diff --git a/public/images/Leather-gray.png b/public/images/Leather-gray.png
new file mode 100644
index 0000000..c53a3ac
Binary files /dev/null and b/public/images/Leather-gray.png differ
diff --git a/public/images/Spicy-gray.png b/public/images/Spicy-gray.png
new file mode 100644
index 0000000..98deadb
Binary files /dev/null and b/public/images/Spicy-gray.png differ
diff --git a/public/images/Woody-gray.png b/public/images/Woody-gray.png
new file mode 100644
index 0000000..56f90e6
Binary files /dev/null and b/public/images/Woody-gray.png differ
diff --git a/public/images/index.ts b/public/images/index.ts
index 5872067..0e28b18 100644
--- a/public/images/index.ts
+++ b/public/images/index.ts
@@ -89,3 +89,16 @@ export { default as Klogo} from './klogo.svg';
 export { default as LinkLogo} from './linklogo.svg';
 export {default as AcodeLogoSmallBlack} from './AcodeLogobaby.svg';
 export {default as RealArrow} from './realArrow.svg';
+
+
+export { default as WoodyGray} from './Woody-gray.png';
+export { default as EarthyGray} from './Earthy-gray.png';
+export { default as FloralGray} from './Floral-gray.png';
+export { default as GreenGray} from './Green-gray.png';
+export { default as CitrusGray} from './Citrus-gray.png';
+export { default as ChypreGray} from './Chypre-gray.png';
+export { default as AldehydeGray} from './Aldehyde-gray.png';
+export { default as AromaticGray} from './Aromatic-gray.png';
+export { default as LeatherGray} from './Leather-gray.png';
+export { default as SpicyGray} from './Spicy-gray.png';
+export { default as FruityGray} from './Fruity-gray.png';
\ No newline at end of file