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/app/survey-sale/[id]/page.tsx b/src/app/survey-sale/[id]/page.tsx
index 52202ca..bc48257 100644
--- a/src/app/survey-sale/[id]/page.tsx
+++ b/src/app/survey-sale/[id]/page.tsx
@@ -1,11 +1,29 @@
 import DataTable from '@/components/survey-sale/detail/DataTable'
 import DetailForm from '@/components/survey-sale/detail/DetailForm'
+import { SurveyBasicInfo } from '@/types/Survey'
 
 export default function page() {
+  const surveyInfo: SurveyBasicInfo = {
+    ID: 1,
+    REPRESENTATIVE: 'HG',
+    STORE: 'HWJ(T01)',
+    CONSTRUCTION_POINT: '施工点名表示',
+    INVESTIGATION_DATE: '2021-01-01',
+    BUILDING_NAME: 'ビル名表示',
+    CUSTOMER_NAME: '顧客名表示',
+    POST_CODE: '1234567890',
+    ADDRESS: '東京都千代田区永田町1-7-1',
+    ADDRESS_DETAIL: '永田町ビル101号室',
+    SUBMISSION_STATUS: true,
+    SUBMISSION_DATE: '2021-01-01',
+    DETAIL_INFO: null,
+    REG_DT: new Date(),
+    UPT_DT: new Date(),
+  }
   return (
     <>
       <DataTable />
-      <DetailForm />
+      <DetailForm surveyInfo={surveyInfo} mode="READ" />
     </>
   )
 }
diff --git a/src/app/survey-sale/layout.tsx b/src/app/survey-sale/layout.tsx
index f558ad6..83f37c0 100644
--- a/src/app/survey-sale/layout.tsx
+++ b/src/app/survey-sale/layout.tsx
@@ -9,10 +9,7 @@ export default function layout({ children, navTab }: SurveySaleLayoutProps) {
   return (
     <>
       <div className="container">
-        <div className="sale-contents">
-          {navTab}
-          {children}
-        </div>
+        <div className="sale-contents">{children}</div>
       </div>
     </>
   )
diff --git a/src/components/survey-sale/detail/BasicForm.tsx b/src/components/survey-sale/detail/BasicForm.tsx
index f293495..5b7fb31 100644
--- a/src/components/survey-sale/detail/BasicForm.tsx
+++ b/src/components/survey-sale/detail/BasicForm.tsx
@@ -1,10 +1,18 @@
 'use client'
 
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useSurveySaleTabState } from '@/store/surveySaleTabState'
+import { SurveyBasicInfo } from '@/types/Survey'
+import { Mode } from 'fs'
 
-export default function BasicForm() {
+export default function BasicForm(props: {
+  surveyInfo: Partial<SurveyBasicInfo>
+  setSurveyInfo: (surveyInfo: Partial<SurveyBasicInfo>) => void
+  mode: Mode
+}) {
+  const { surveyInfo, setSurveyInfo, mode } = props
   const { setBasicInfoSelected } = useSurveySaleTabState()
+  const [isFlip, setIsFlip] = useState<boolean>(true)
 
   useEffect(() => {
     setBasicInfoSelected()
@@ -12,84 +20,101 @@ export default function BasicForm() {
 
   return (
     <>
-      <div className="sale-frame">
-        <div className="data-form-wrap">
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">担当者名</div>
-            <input type="text" className="input-frame" defaultValue={'HG'} />
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">販売店</div>
-            <input type="text" className="input-frame" defaultValue={'HWJ(T01)'} />
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">施工店</div>
-            <input type="text" className="input-frame" defaultValue={'施工点名表示'} />
+      <div className={`sale-detail-toggle-bx ${isFlip ? 'act' : ''}`}>
+        <div className="sale-detail-toggle-head" onClick={() => setIsFlip(!isFlip)}>
+          <div className="sale-detail-toggle-name">基本情報</div>
+          <div className="sale-detail-toggle-btn-wrap">
+            <button className="sale-detail-toggle-btn"></button>
           </div>
         </div>
-      </div>
+        <div className="sale-detail-toggle-cont">
+          <div className="sale-frame">
+            <div className="data-form-wrap">
+              <div className="data-input-form-bx">
+                <div className="data-input-form-tit">担当者名</div>
+                <input
+                  type="text"
+                  className="input-frame"
+                  readOnly={mode === 'READ'}
+                  value={surveyInfo?.REPRESENTATIVE}
+                  onChange={(e) => setSurveyInfo({ ...surveyInfo, REPRESENTATIVE: e.target.value })}
+                />
+              </div>
+              <div className="data-input-form-bx">
+                <div className="data-input-form-tit">販売店</div>
+                <input
+                  type="text"
+                  className="input-frame"
+                  readOnly={mode === 'READ'}
+                  value={surveyInfo?.BUILDING_NAME ?? ''}
+                  onChange={(e) => setSurveyInfo({ ...surveyInfo, BUILDING_NAME: e.target.value })}
+                />
+              </div>
+              <div className="data-input-form-bx">
+                <div className="data-input-form-tit">施工店</div>
+                <input
+                  type="text"
+                  className="input-frame"
+                  readOnly={mode === 'READ'}
+                  value={surveyInfo?.CONSTRUCTION_POINT ?? ''}
+                  onChange={(e) => setSurveyInfo({ ...surveyInfo, CONSTRUCTION_POINT: e.target.value })}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="sale-frame">
+            <div className="data-form-wrap">
+              <div className="data-input-form-bx">
+                <div className="data-input-form-tit">現地調査日</div>
+                {['CREATE', 'EDIT'].includes(mode as 'CREATE' | 'EDIT') ? (
+                  <div className="date-input">
+                    <button className="date-btn">
+                      <i className="date-icon"></i>
+                    </button>
+                    <input type="text" className="date-frame" readOnly defaultValue={surveyInfo?.INVESTIGATION_DATE?.toString()} />
+                  </div>
+                ) : (
+                  <input type="text" className="input-frame" disabled defaultValue={surveyInfo?.INVESTIGATION_DATE?.toString()} />
+                )}
+              </div>
+              <div className="data-input-form-bx">
+                {/* 건물명 */}
+                <div className="data-input-form-tit">建物名</div>
+                <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={surveyInfo?.BUILDING_NAME ?? ''} />
+              </div>
+              <div className="data-input-form-bx">
+                {/* 고객명 */}
+                <div className="data-input-form-tit">建物名</div>
+                <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={surveyInfo?.CUSTOMER_NAME ?? ''} />
+              </div>
+              <div className="data-input-form-bx">
+                <div className="data-input-form-tit">郵便番号/都道府県</div>
+                <div className="form-flex">
+                  {/* 우편번호 */}
+                  <div className="form-bx">
+                    <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={surveyInfo?.POST_CODE ?? ''} disabled />
+                  </div>
+                  {/* 도도부현 */}
+                  <div className="form-bx">
+                    <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={surveyInfo?.ADDRESS ?? ''} disabled />
+                  </div>
+                </div>
+                {/* 주소 */}
+                <div className="data-input mt5">
+                  <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={'浜松浜松町'} disabled />
+                </div>
+                <div className="form-btn">
+                  <button className="btn-frame n-blue icon">
+                    郵便番号<i className="btn-arr"></i>
+                  </button>
+                </div>
+              </div>
 
-      <div className="sale-frame">
-        <div className="data-form-wrap">
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">現地調査日</div>
-            <div className="date-input">
-              <button className="date-btn">
-                <i className="date-icon"></i>
-              </button>
-              <input type="text" className="date-frame" defaultValue={'2025.04.16'} />
-            </div>
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">建物名</div>
-            <input type="text" className="input-frame" defaultValue={'ギルドン'} />
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">建物名</div>
-            <input type="text" className="input-frame" defaultValue={'HWJ Building'} />
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">建物名</div>
-            <div className="form-flex">
-              <div className="form-bx">
-                <input type="text" className="input-frame" defaultValue={'1050013'} disabled />
-              </div>
-              <div className="form-bx">
-                <select className="select-form" name="" id="">
-                  <option value="">東京都</option>
-                  <option value="">東京都</option>
-                  <option value="">東京都</option>
-                  <option value="">東京都</option>
-                  <option value="">東京都</option>
-                </select>
+              <div className="data-input-form-bx">
+                <div className="data-input-form-tit">市区町村名, 以後の住所</div>
+                <input type="text" className="input-frame" defaultValue={'浜松 浜松町'} />
               </div>
             </div>
-            <div className="form-btn">
-              <button className="btn-frame n-blue icon">
-                郵便番号<i className="btn-arr"></i>
-              </button>
-            </div>
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">市区町村名, 以後の住所</div>
-            <input type="text" className="input-frame" defaultValue={'浜松 浜松町'} />
-          </div>
-        </div>
-        <div className="btn-flex-wrap">
-          <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>
diff --git a/src/components/survey-sale/detail/DataTable.tsx b/src/components/survey-sale/detail/DataTable.tsx
index 414164c..b47c092 100644
--- a/src/components/survey-sale/detail/DataTable.tsx
+++ b/src/components/survey-sale/detail/DataTable.tsx
@@ -3,7 +3,7 @@
 export default function DataTable() {
   return (
     <>
-      <div className="sale-frame">
+      <div className="sale-data-table-wrap">
         <table className="sale-data-table">
           <colgroup>
             <col style={{ width: '80px' }} />
diff --git a/src/components/survey-sale/detail/DetailForm.tsx b/src/components/survey-sale/detail/DetailForm.tsx
index 9462e95..6e5fc24 100644
--- a/src/components/survey-sale/detail/DetailForm.tsx
+++ b/src/components/survey-sale/detail/DetailForm.tsx
@@ -1,62 +1,53 @@
 'use client'
 
-export default function DetailForm() {
+import { Mode, SurveyBasicInfo } from '@/types/Survey'
+import { useEffect, useState } from 'react'
+import ButtonForm from './ButtonForm'
+import BasicForm from './BasicForm'
+import RoofForm from './RoofForm'
+
+export default function DetailForm(props: { surveyInfo?: SurveyBasicInfo; mode?: Mode }) {
+  const [surveyInfo, setSurveyInfo] = useState<Partial<SurveyBasicInfo>>(
+    props.surveyInfo ?? {
+      REPRESENTATIVE: '',
+      CONSTRUCTION_POINT: '',
+      STORE: '',
+      INVESTIGATION_DATE: '',
+      BUILDING_NAME: '',
+      CUSTOMER_NAME: '',
+      POST_CODE: '',
+      ADDRESS: '',
+      ADDRESS_DETAIL: '',
+      SUBMISSION_STATUS: true,
+      SUBMISSION_DATE: '2021-01-01',
+      DETAIL_INFO: null,
+      REG_DT: new Date(),
+      UPT_DT: new Date(),
+    },
+  )
+  const [roofValue, setRoofValue] = useState<Boolean>(false)
+  const [mode, setMode] = useState<Mode>(props.mode ?? 'CREATE')
+  const basicInfoProps = { surveyInfo, setSurveyInfo, mode }
+  const roofInfoProps = { surveyInfo, mode }
+  const buttonFormProps = { mode, setMode }
+
+  useEffect(() => {
+    // setMode(props.surveyInfo ? 'EDIT' : 'CREATE')
+  }, [props.surveyInfo])
+
+  useEffect(() => {
+    console.log(surveyInfo)
+  }, [surveyInfo])
+
   return (
     <>
-      <div className="sale-frame">
-        <div className="data-form-wrap">
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">担当者名</div>
-            <input type="text" className="input-frame" disabled defaultValue={'HG'} />
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">販売店</div>
-            <input type="text" className="input-frame" disabled defaultValue={'HWJ(T01)'} />
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">施工店</div>
-            <input type="text" className="input-frame" disabled defaultValue={'施工点名表示'} />
-          </div>
-        </div>
-      </div>
-
-      <div className="sale-frame">
-        <div className="data-form-wrap">
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">現地調査日</div>
-            <input type="text" className="input-frame" disabled defaultValue={'2025/04/05'} />
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">建物名</div>
-            <input type="text" className="input-frame" disabled defaultValue={'ハンファジャパンビル'} />
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">顧客名</div>
-            <input type="text" className="input-frame" disabled defaultValue={'Hong gi'} />
-          </div>
-        </div>
-        <div className="btn-flex-wrap">
-          <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 className="btn-bx">
-            <button className="btn-frame n-blue icon">
-              削除<i className="btn-arr"></i>
-            </button>
-          </div>
-        </div>
+      <div className="sale-detail-toggle-wrap">
+        {mode}
+        {/* 기본정보 */}
+        <BasicForm {...basicInfoProps} />
+        {/* 전기/지붕정보 */}
+        <RoofForm {...roofInfoProps} />
+        <ButtonForm {...buttonFormProps} />
       </div>
     </>
   )
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..0723ab1 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);
diff --git a/src/types/Survey.ts b/src/types/Survey.ts
index 1401c47..83d2ec1 100644
--- a/src/types/Survey.ts
+++ b/src/types/Survey.ts
@@ -1,5 +1,3 @@
-import { SEARCH_OPTIONS_ENUM, SEARCH_OPTIONS_PARTNERS_ENUM, SORT_OPTIONS_ENUM } from '@/store/surveyFilterStore'
-
 export type SurveyBasicInfo = {
   ID: number
   REPRESENTATIVE: string
@@ -130,3 +128,5 @@ export type SurveyRegistRequest = {
   SUBMISSION_DATE: string | null
   DETAIL_INFO: SurveyDetailRequest | null
 }
+
+export type Mode = 'CREATE' | 'EDIT' | 'READ' | 'TEMP' // 등록 | 수정 | 상세 | 임시저장