diff --git a/public/assets/images/layout/modal_header_icon04.svg b/public/assets/images/layout/modal_header_icon04.svg
new file mode 100644
index 0000000..ba32c97
--- /dev/null
+++ b/public/assets/images/layout/modal_header_icon04.svg
@@ -0,0 +1,5 @@
+<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 8.90909L18 6.81818C18 5.12494 18 4.27832 17.732 3.60214C17.3013 2.5151 16.3902 1.65765 15.2352 1.2522C14.5168 1 13.6173 1 11.8182 0.999999C8.66981 0.999999 7.09563 1 5.83836 1.44135C3.81714 2.15088 2.22282 3.65142 1.46894 5.55375C1 6.73706 1 8.21865 1 11.1818L1 13.7273C1 16.7966 1 18.3313 1.8477 19.3971C2.09058 19.7025 2.37862 19.9736 2.70307 20.2022C3.83546 21 5.46607 21 8.72727 21L9.5 21C10.0347 21 11.0337 21 11.5 20.9972" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 11C1 9.15905 2.49238 7.66667 4.33333 7.66667C4.99912 7.66667 5.78404 7.78333 6.43137 7.60988C7.00652 7.45576 7.45576 7.00652 7.60988 6.43136C7.78333 5.78404 7.66667 4.99912 7.66667 4.33333C7.66667 2.49238 9.15905 1 11 1" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 15H10.5M18 15C18 15.7002 16.0057 17.0085 15.5 17.5M18 15C18 14.2998 16.0057 12.9915 15.5 12.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/assets/images/sub/sale_toggle_btn.svg b/public/assets/images/sub/sale_toggle_btn.svg
new file mode 100644
index 0000000..ad2504a
--- /dev/null
+++ b/public/assets/images/sub/sale_toggle_btn.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="21" height="21" rx="10.5" stroke="#2E3A59"/>
+<path d="M7 9L11 13L15 9" stroke="#2E3A59" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/assets/images/sub/sale_toggle_btn_white.svg b/public/assets/images/sub/sale_toggle_btn_white.svg
new file mode 100644
index 0000000..3575065
--- /dev/null
+++ b/public/assets/images/sub/sale_toggle_btn_white.svg
@@ -0,0 +1,6 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="toggle btn">
+<rect x="0.5" y="0.5" width="21" height="21" rx="10.5" stroke="white"/>
+<path id="Vector 7412" d="M7 13L11 9L15 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/src/components/popup/MemberInformationPopup.tsx b/src/components/popup/MemberInformationPopup.tsx
index ff1f9fa..87a8829 100644
--- a/src/components/popup/MemberInformationPopup.tsx
+++ b/src/components/popup/MemberInformationPopup.tsx
@@ -3,6 +3,7 @@
 import { useRouter } from 'next/navigation'
 import { usePopupController } from '@/store/popupController'
 import { useSessionStore } from '@/store/session'
+import Image from 'next/image'
 
 export default function MemberInformationPopup() {
   const popupController = usePopupController()
@@ -22,7 +23,7 @@ export default function MemberInformationPopup() {
             <div className="modal-header-inner">
               <div className="modal-name-wrap">
                 <div className="modal-img">
-                  <img src="/assets/images/layout/modal_header_icon.svg" alt="" />
+                  <Image src="/assets/images/layout/modal_header_icon.svg" width={18} height={20} alt="" />
                 </div>
                 <div className="modal-name">会員情報</div>
               </div>
diff --git a/src/components/suitable/Suitable.tsx b/src/components/suitable/Suitable.tsx
index 5120aa3..f9f6615 100644
--- a/src/components/suitable/Suitable.tsx
+++ b/src/components/suitable/Suitable.tsx
@@ -3,6 +3,7 @@
 import { useState } from 'react'
 import SuitableCheckData from './SuitableCheckData'
 import SuitableNoData from './SuitableNoData'
+import Image from 'next/image'
 
 export default function Suitable() {
   const [reference, setReference] = useState(false)
@@ -35,22 +36,34 @@ export default function Suitable() {
           <ul className="reference-list">
             <li className="reference-item">
               <div className="reference-item-bx">
-                <i className="compliance-icon check"></i>設置可能
+                <div className="compliance-icon">
+                  <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
+                </div>
+                <span>設置可能</span>
               </div>
             </li>
             <li className="reference-item">
               <div className="reference-item-bx">
-                <i className="compliance-icon x"></i>設置可能
+                <div className="compliance-icon">
+                  <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
+                </div>
+                <span>設置不可</span>
               </div>
             </li>
             <li className="reference-item">
               <div className="reference-item-bx">
-                <i className="compliance-icon quest"></i>設置可能
+                <div className="compliance-icon">
+                  <Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
+                </div>
+                <span>お問い合わせ</span>
               </div>
             </li>
             <li className="reference-item">
               <div className="reference-item-bx">
-                <i className="compliance-icon tip"></i>設置可能
+                <div className="compliance-icon">
+                  <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+                </div>
+                <span>備考</span>
               </div>
             </li>
           </ul>
@@ -61,25 +74,29 @@ export default function Suitable() {
         <SuitableCheckData />
         <SuitableCheckData />
         <SuitableCheckData />
-      </div>
-      {/* 데이터 없을경우 버튼 영역 안보여야함 */}
-      <div className="btn-flex-wrap com">
-        <div className="btn-bx">
-          <button className="btn-frame n-blue icon">
-            全選択<i className="btn-arr"></i>
-          </button>
-        </div>
-        <div className="btn-bx">
-          <button className="btn-frame red icon">
-            詳細を見る<i className="btn-arr"></i>
-          </button>
-        </div>
-        <div className="btn-bx">
-          <button className="btn-frame n-blue icon">
-            選択ダウンロード<i className="btn-arr"></i>
-          </button>
+
+        {/* 데이터 없을경우 버튼 영역 안보여야함 */}
+        <div className="float-btn-wrap">
+          <div className="btn-flex-wrap com">
+            <div className="btn-bx">
+              <button className="btn-frame n-blue icon">
+                全選択<i className="btn-arr"></i>
+              </button>
+            </div>
+            <div className="btn-bx">
+              <button className="btn-frame red icon">
+                詳細を見る<i className="btn-arr"></i>
+              </button>
+            </div>
+            <div className="btn-bx">
+              <button className="btn-frame n-blue icon">
+                選択ダウンロード<i className="btn-arr"></i>
+              </button>
+            </div>
+          </div>
         </div>
       </div>
+
       {/* 검색기록 없을떄 위에 두 영역 안보이고 이 부분만 보여야 함*/}
       {/* <SuitableNoData /> */}
     </div>
diff --git a/src/components/suitable/SuitableCheckData.tsx b/src/components/suitable/SuitableCheckData.tsx
index 2cef53b..2a57c21 100644
--- a/src/components/suitable/SuitableCheckData.tsx
+++ b/src/components/suitable/SuitableCheckData.tsx
@@ -1,11 +1,13 @@
 'use client'
 
+import Image from 'next/image'
+
 export default function SuitableCheckData() {
   return (
     <>
       <div className={`compliance-check-bx act`}>
         <div className="check-name-wrap">
-          <div className="check-form-box com-tit">
+          <div className="check-form-box ch-bld">
             <input type="checkbox" id="ch01" />
             <label htmlFor="ch01">アースティ４０</label>
           </div>
@@ -16,48 +18,59 @@ export default function SuitableCheckData() {
         <ul className="reference-list check">
           <li className="reference-item">
             <div className="check-item-wrap">
-              <div className="check-form-box com-txt">
+              <div className="check-form-box light">
                 <input type="checkbox" id="ch02" />
-                <label htmlFor="ch02">屋根技研 支持瓦</label>
+                <label htmlFor="ch02">屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦</label>
               </div>
               <div className="compliance-icon-wrap">
-                <i className="compliance-icon check"></i>
-                <i className="compliance-icon x"></i>
+                <div className="compliance-icon">
+                  <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
+                </div>
               </div>
             </div>
           </li>
           <li className="reference-item">
             <div className="check-item-wrap">
-              <div className="check-form-box com-txt">
+              <div className="check-form-box light">
                 <input type="checkbox" id="ch03" />
                 <label htmlFor="ch03">屋根技研 支持金具</label>
               </div>
               <div className="compliance-icon-wrap">
-                <i className="compliance-icon x"></i>
-                <i className="compliance-icon tip"></i>
+                <div className="compliance-icon">
+                  <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
+                </div>
+                <div className="compliance-icon">
+                  <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+                </div>
               </div>
             </div>
           </li>
           <li className="reference-item">
             <div className="check-item-wrap">
-              <div className="check-form-box com-txt">
+              <div className="check-form-box light">
                 <input type="checkbox" id="ch04" />
-                <label htmlFor="ch04">屋根技研YGアンカー</label>
+                <label htmlFor="ch04">屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦</label>
               </div>
               <div className="compliance-icon-wrap">
-                <i className="compliance-icon tip"></i>
-                <i className="compliance-icon quest"></i>
+                <div className="compliance-icon">
+                  <Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
+                </div>
+                <div className="compliance-icon">
+                  <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+                </div>
               </div>
             </div>
           </li>
           <li className="reference-item">
             <div className="check-item-wrap">
-              <div className="check-form-box com-txt">
+              <div className="check-form-box light">
                 <input type="checkbox" id="ch05" />
                 <label htmlFor="ch05">ダイドハント支持瓦Ⅱ</label>
               </div>
               <div className="compliance-icon-wrap">
-                <i className="compliance-icon check"></i>
+                <div className="compliance-icon">
+                  <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
+                </div>
               </div>
             </div>
           </li>
diff --git a/src/components/ui/common/FloatBtn.tsx b/src/components/ui/common/FloatBtn.tsx
index 766f236..74aa3d0 100644
--- a/src/components/ui/common/FloatBtn.tsx
+++ b/src/components/ui/common/FloatBtn.tsx
@@ -5,9 +5,16 @@ import { usePathname } from 'next/navigation'
 export default function FloatBtn() {
   const pathname = usePathname()
 
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    })
+  }
+
   if (pathname === '/login' || pathname === '/') {
     return null
   }
 
-  return <button className="top-btn"></button>
+  return <button className="top-btn" onClick={scrollToTop}></button>
 }
diff --git a/src/styles/base/_check-radio.scss b/src/styles/base/_check-radio.scss
index d4d2904..47c50cb 100644
--- a/src/styles/base/_check-radio.scss
+++ b/src/styles/base/_check-radio.scss
@@ -85,6 +85,9 @@
   input[type="checkbox"]:disabled + label::after{
     cursor: default;
   }
+  input[type="checkbox"]:disabled:checked + label::before{
+    background-color: #A8B6C7;
+  }
   &.ch-bld{
     input[type="checkbox"]:checked + label{
       font-weight: 500;
diff --git a/src/styles/components/_sub.scss b/src/styles/components/_sub.scss
index ebcb374..73c5fc4 100644
--- a/src/styles/components/_sub.scss
+++ b/src/styles/components/_sub.scss
@@ -77,36 +77,11 @@
     }
   }
 }
-.sale-detail-tab-relative{
-  height: 40px;
-  margin-bottom: 10px;
-}
-.sale-detail-tab-wrap{
-  position: fixed;
-  top: 66px;
-  left: 0;
-  width: 100%;
-  height: 40px;
-  background-color: $white-fff;
-  z-index: 98000;
-  .sale-detail-tab-inner{
-    position: relative;
-    @include flex(0px);
-    align-items: center;
-    height: 100%;
-    .sale-detail-tab{
-      flex: 1;
-      height: 100%;
-      background-color: #fff;
-      border-top: 1px solid #DDDFE2;
-      border-bottom: 1px solid #DDDFE2;
-      @include defaultFont($font-s-13, $font-w-500, $font-c);
-      &.act{
-        color: $white-fff;
-        background-color: #5F738E;
-        border-color: #5F738E;
-      }
-    }
+.sale-form-btn-wrap{
+  padding: 20px 20px 0 ;
+  background-color: #fff;
+  .btn-flex-wrap{
+    margin-top: 0;
   }
 }
 
@@ -202,6 +177,11 @@
 }
 
 // 매물 상세
+.sale-data-table-wrap{
+  padding: 24px;
+  background-color: #fff;
+  border-top: 1px solid #ECECEC;
+}
 .sale-data-table{
   width: 100%;
   table-layout: fixed;
@@ -242,6 +222,63 @@
   }
 }  
 
+.sale-detail-toggle-wrap{
+  border-top: 1px solid #ECECEC;
+}
+.sale-detail-toggle-bx{
+  border-bottom: 1px solid #ECECEC;
+}
+.sale-detail-toggle-head{
+  @include flex(5px);
+  padding: 14px 18px;
+  background-color: $white-fff;
+  cursor: pointer;
+  .sale-detail-toggle-name{
+    @include defaultFont($font-s-13, $font-w-500, $font-c);
+  }
+  .sale-detail-toggle-btn-wrap{
+    margin-left: auto;
+    .sale-detail-toggle-btn{
+      display: block;
+      width: 22px;
+      height: 22px;
+      background: url(/assets/images/sub/sale_toggle_btn.svg)no-repeat center;
+      background-size: cover
+    }
+  }
+}
+.sale-detail-toggle-cont{
+  display: none;
+  .sale-frame{
+    padding: 24px 20px;
+    &:first-child{
+      padding-top: 24px;
+    }
+    &:last-child{
+      padding-bottom: 24px;
+    }
+  }
+}
+
+.sale-detail-toggle-bx{
+  &.act{
+    .sale-detail-toggle-head{
+      background-color: #5F738E;
+      .sale-detail-toggle-name{
+        color: #fff
+      }
+      .sale-detail-toggle-btn-wrap{
+        .sale-detail-toggle-btn{
+          background: url(/assets/images/sub/sale_toggle_btn_white.svg)no-repeat center;
+        }
+      }
+    }
+    .sale-detail-toggle-cont{
+      display: block;
+    }
+  }
+}
+
 // 매물 기본정보
 .form-flex{
   @include flex(5px);
@@ -614,7 +651,14 @@
   @include flex(0px);
   align-items: center;
 }
-
+.float-btn-wrap{
+  position: sticky;
+  bottom: 10px;
+  left: 0;
+  width: 100%;
+  background-color: #fff;
+  z-index: 9;
+}
 @media screen and (max-width: 360px){
   .btn-flex-wrap{
     flex-direction: column;
diff --git a/src/styles/layout/_layout.scss b/src/styles/layout/_layout.scss
index 95ae2e4..0389b2e 100644
--- a/src/styles/layout/_layout.scss
+++ b/src/styles/layout/_layout.scss
@@ -6,7 +6,7 @@
   flex-direction: column;
   width: 100%;
   min-height: 100vh;
-  overflow-x: hidden;
+  // overflow-x: hidden;
   .container{
     flex: 1 1 auto;
   }