diff --git a/.env b/.env
index be5a3cf..7d17662 100644
--- a/.env
+++ b/.env
@@ -5,7 +5,8 @@
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
 # DATABASE_URL="sqlserver://3team.devgrr.kr:1433;database=onsitesurvey;user=sa;password=1q2w3e4r!;encrypt=true;trustServerCertificate=true;"
-DATABASE_URL="sqlserver://3team.devgrr.kr:1433;database=onsitesurvey;user=sa;password=1q2w3e4r!;encrypt=true;trustServerCertificate=true;"
+# DATABASE_URL="sqlserver://3team.devgrr.kr:1433;database=onsitesurvey;user=sa;password=1q2w3e4r!;encrypt=true;trustServerCertificate=true;"
+DATABASE_URL="mysql://root:root@localhost:3306/onsitesurvey"
 
 # SESSION_PASSWORD="QWERASDFZXCV1234567890REWQFDSAVCXZ"
 SESSION_PASSWORD="This application is for mobile field research"
\ No newline at end of file
diff --git a/next.config.ts b/next.config.ts
index 1ff5ba6..24e03eb 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -6,14 +6,14 @@ const nextConfig: NextConfig = {
   sassOptions: {
     includePaths: [path.join(__dirname, './src/styles')],
   },
-  async rewrites() {
-    return [
-      {
-        source: '/api/:path*',
-        destination: `${process.env.NEXT_PUBLIC_API_URL}/api/:path*`,
-      },
-    ]
-  },
+  // async rewrites() {
+  //   return [
+  //     {
+  //       source: '/api/:path*',
+  //       destination: `${process.env.NEXT_PUBLIC_API_URL}/api/:path*`,
+  //     },
+  //   ]
+  // },
 }
 
 export default nextConfig
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index a58b277..f2a45c6 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -3,7 +3,7 @@ generator client {
 }
 
 datasource db {
-  provider = "sqlserver"
+  provider = "mysql"
   url      = env("DATABASE_URL")
 }
 
diff --git a/public/assets/images/common/btn_arr_up.svg b/public/assets/images/common/btn_arr_up.svg
new file mode 100644
index 0000000..b90389f
--- /dev/null
+++ b/public/assets/images/common/btn_arr_up.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 5L5 1L9 5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg> 
\ No newline at end of file
diff --git a/src/api/surveySales.ts b/src/api/surveySales.ts
deleted file mode 100644
index 1eac5d2..0000000
--- a/src/api/surveySales.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-import { axiosInstance } from '@/libs/axios'
-
-export interface SurveySalesBasicInfo {
-  id?: number
-  representative: string
-  store: string | null
-  construction_point: string | null
-  investigation_date: string | null
-  building_name: string | null
-  customer_name: string | null
-  post_code: string | null
-  address: string | null
-  address_detail: string | null
-  submission_status: boolean
-  submission_date?: string | null
-  detail_info?: SurveySalesDetailInfo | null
-}
-
-export interface SurveySalesDetailInfo {
-  id?: number
-  contract_capacity: string | null
-  retail_company: string | null
-  supplementary_facilities: number | null
-  supplementary_facilities_etc: string | null
-  installation_system: number | null
-  installation_system_etc: string | null
-  construction_year: number | null
-  construction_year_etc: string | null
-  roof_material: number | null
-  roof_material_etc: string | null
-  roof_shape: number | null
-  roof_shape_etc: string | null
-  roof_slope: string | null
-  house_structure: number | null
-  house_structure_etc: string | null
-  rafter_material: number | null
-  rafter_material_etc: string | null
-  rafter_size: number | null
-  rafter_size_etc: string | null
-  rafter_pitch: number | null
-  rafter_pitch_etc: string | null
-  rafter_direction: number | null
-  open_field_plate_kind: number | null
-  open_field_plate_kind_etc: string | null
-  open_field_plate_thickness: string | null
-  leak_trace: boolean | null
-  waterproof_material: number | null
-  waterproof_material_etc: string | null
-  insulation_presence: number | null
-  insulation_presence_etc: string | null
-  structure_order: number | null
-  structure_order_etc: string | null
-  installation_availability: number | null
-  installation_availability_etc: string | null
-  memo: string | null
-}
-
-export const surveySalesApi = {
-  create: async (data: SurveySalesBasicInfo): Promise<number> => {
-    try {
-      const response = await axiosInstance.post<SurveySalesBasicInfo>('/api/survey-sales', data)
-      return response.data.id ?? 0
-    } catch (error) {
-      console.error(error)
-      return 0
-    }
-  },
-  getList: async (): Promise<SurveySalesBasicInfo[] | []> => {
-    try {
-      const response = await axiosInstance.get<SurveySalesBasicInfo[]>('/api/survey-sales')
-      return response.data
-    } catch (error) {
-      console.error(error)
-      return []
-    }
-  },
-  getDetail: async (id: number): Promise<SurveySalesBasicInfo | null> => {
-    try {
-      const response = await axiosInstance.get<SurveySalesBasicInfo>(`/api/survey-sales/${id}`)
-      return response.data
-    } catch (error) {
-      console.error(error)
-      return null
-    }
-  },
-  update: async (id: number, data: SurveySalesBasicInfo): Promise<SurveySalesBasicInfo | null> => {
-    try {
-      const response = await axiosInstance.put<SurveySalesBasicInfo>(`/api/survey-sales/${id}`, data)
-      return response.data
-    } catch (error) {
-      console.error(error)
-      return null
-    }
-  },
-  delete: async (id: number, isDetail: boolean = false): Promise<boolean> => {
-    try {
-      await axiosInstance.delete(`/api/survey-sales/${id}`, {
-        params: {
-          detail_id: isDetail ? id : undefined,
-        },
-      })
-      return true
-    } catch (error) {
-      throw error
-    }
-  },
-  createDetail: async (surveyId: number, data: SurveySalesDetailInfo): Promise<boolean> => {
-    try {
-      await axiosInstance.post<SurveySalesDetailInfo>(`/api/survey-sales/${surveyId}`, data)
-      return true
-    } catch (error) {
-      throw error
-    }
-  },
-  confirm: async (id: number): Promise<boolean> => {
-    try {
-      await axiosInstance.patch<SurveySalesBasicInfo>(`/api/survey-sales/${id}`)
-      return true
-    } catch (error) {
-      throw error
-    }
-  },
-  // update: async (data: SurveySalesBasicInfo): Promise<SurveySalesBasicInfo> => {
-  //   const response = await axiosInstance.put<SurveySalesBasicInfo>(`/api/survey-sales`, data)
-  //   return response.data
-  // },
-}
diff --git a/src/app/api/survey-sales/[id]/route.ts b/src/app/api/survey-sales/[id]/route.ts
index 444157b..6010be1 100644
--- a/src/app/api/survey-sales/[id]/route.ts
+++ b/src/app/api/survey-sales/[id]/route.ts
@@ -44,20 +44,36 @@ export async function PUT(request: Request, context: { params: { id: string } })
   return NextResponse.json(survey)
 }
 
-export async function DELETE(request: Request, context: { params: { id: string; detail_id: string } }) {
-  const { id, detail_id } = await context.params
-  if (detail_id) {
-    // @ts-ignore
-    const survey = await prisma.SD_SERVEY_SALES_DETAIL_INFO.delete({
-      where: { id: Number(detail_id) },
-    })
-  } else {
-    // @ts-ignore
-    const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.delete({
-      where: { id: Number(id) },
+export async function DELETE(request: Request, context: { params: { id: string } }) {
+  const { id } = await context.params
+
+  try {
+    //@ts-ignore
+    await prisma.$transaction(async (tx) => {
+      // @ts-ignore
+      const detailData = await tx.SD_SERVEY_SALES_BASIC_INFO.findUnique({
+        where: { id: Number(id) },
+        select: {
+          detail_info: true,
+        },
+      })
+      console.log('detailData:: ', detailData)
+      if (detailData?.detail_info?.id) {
+        // @ts-ignore
+        await tx.SD_SERVEY_SALES_DETAIL_INFO.delete({
+          where: { id: Number(detailData?.detail_info?.id) },
+        })
+      }
+      // @ts-ignore
+      await tx.SD_SERVEY_SALES_BASIC_INFO.delete({
+        where: { id: Number(id) },
+      })
     })
+    return NextResponse.json({ message: 'Survey deleted successfully' })
+  } catch (error) {
+    console.error(error)
+    return NextResponse.json({ message: 'Survey deletion failed' }, { status: 500 })
   }
-  return NextResponse.json({ message: 'Survey deleted successfully' })
 }
 
 export async function PATCH(request: Request, context: { params: { id: string } }) {
diff --git a/src/app/survey-sale/[id]/basic-info/page.tsx b/src/app/survey-sale/basic-info/page.tsx
similarity index 100%
rename from src/app/survey-sale/[id]/basic-info/page.tsx
rename to src/app/survey-sale/basic-info/page.tsx
diff --git a/src/app/survey-sale/[id]/roof-info/page.tsx b/src/app/survey-sale/roof-info/page.tsx
similarity index 100%
rename from src/app/survey-sale/[id]/roof-info/page.tsx
rename to src/app/survey-sale/roof-info/page.tsx
diff --git a/src/app/survey-sales/[id]/page.tsx b/src/app/survey-sales/[id]/page.tsx
deleted file mode 100644
index eb6685c..0000000
--- a/src/app/survey-sales/[id]/page.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import SurveyDetail from '@/components/survey-sales/SurveyDetail'
-
-export default function SurveySalesDetailPage() {
-  return <SurveyDetail />
-}
-
diff --git a/src/app/survey-sales/page.tsx b/src/app/survey-sales/page.tsx
deleted file mode 100644
index b04c6c1..0000000
--- a/src/app/survey-sales/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import SurveySales from '@/components/SurveySales'
-import SurveySaleList from '@/components/survey-sales/SurveySaleList'
-
-export default function page() {
-  return (
-    <>
-      <h1 className="text-2xl font-bold my-4 flex justify-center">조사 매물 정보</h1>
-      {/* <SurveySales /> */}
-      <SurveySaleList />
-    </>
-  )
-}
diff --git a/src/app/survey-sales/write/page.tsx b/src/app/survey-sales/write/page.tsx
deleted file mode 100644
index 5d7b38f..0000000
--- a/src/app/survey-sales/write/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import MainSurveyForm from '@/components/survey-sales/write-survey-sales/MainSurveyForm'
-
-export default function SurveyWritePage() {
-  return (
-    <div>
-      <MainSurveyForm />
-    </div>
-  )
-}
diff --git a/src/components/LoadMoreButton.tsx b/src/components/LoadMoreButton.tsx
index 0a92e1b..7c54f21 100644
--- a/src/components/LoadMoreButton.tsx
+++ b/src/components/LoadMoreButton.tsx
@@ -7,5 +7,19 @@ interface LoadMoreButtonProps {
 }
 
 export default function LoadMoreButton({ hasMore, onLoadMore, onScrollToTop }: LoadMoreButtonProps) {
-  return <div>{hasMore ? <button onClick={onLoadMore}>Load More</button> : <button onClick={onScrollToTop}>Scroll to Top</button>}</div>
+  return (
+    <>
+      {hasMore ? (
+        <button onClick={onLoadMore} className="btn-frame n-blue icon">
+          もっと見る
+          <i className="btn-edit"></i>
+        </button>
+      ) : (
+        <button onClick={onScrollToTop} className="btn-frame n-blue icon">
+          トップシフト
+          <i className="btn-arr-up"></i>
+        </button>
+      )}
+    </>
+  )
 }
diff --git a/src/components/survey-sale/detail/BasicForm.tsx b/src/components/survey-sale/detail/BasicForm.tsx
index fce0e49..744ee47 100644
--- a/src/components/survey-sale/detail/BasicForm.tsx
+++ b/src/components/survey-sale/detail/BasicForm.tsx
@@ -1,21 +1,52 @@
 'use client'
 
+import { SurveyBasicRequest } from '@/types/Survey'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+
+const defaultBasicInfoForm: SurveyBasicRequest = {
+  representative: '',
+  store: null,
+  construction_point: null,
+  investigation_date: null,
+  building_name: null,
+  customer_name: null,
+  post_code: null,
+  address: null,
+  address_detail: null,
+  submission_status: false,
+  submission_date: null,
+}
+
 export default function BasicForm() {
+  const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(defaultBasicInfoForm)
+
+  const handleChange = (key: keyof SurveyBasicRequest, value: string) => {
+    setBasicInfoData({ ...basicInfoData, [key]: value })
+  }
+
+  const router = useRouter()
+  const handleSave = () => {
+    console.log('save')
+  }
+  const handleDelete = () => {
+    console.log('delete')
+  }
   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'} />
+            <input type="text" className="input-frame" id='representative' value={basicInfoData.representative} onChange={(e) => handleChange('representative', e.target.value)} />
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">販売店</div>
-            <input type="text" className="input-frame" defaultValue={'HWJ(T01)'} />
+            <input type="text" className="input-frame" id='store' value={basicInfoData.store ?? ''} onChange={(e) => handleChange('store', e.target.value)} />
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">施工店</div>
-            <input type="text" className="input-frame" defaultValue={'施工点名表示'} />
+            <input type="text" className="input-frame" id='construction_point' value={basicInfoData.construction_point ?? ''} onChange={(e) => handleChange('construction_point', e.target.value)} />
           </div>
         </div>
       </div>
@@ -28,19 +59,19 @@ export default function BasicForm() {
               <button className="date-btn">
                 <i className="date-icon"></i>
               </button>
-              <input type="text" className="date-frame" defaultValue={'2025.04.16'} />
+              <input type="date" className="date-frame" id='investigation_date' value={basicInfoData.investigation_date ?? ''} onChange={(e) => handleChange('investigation_date', e.target.value)} />
             </div>
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">建物名</div>
-            <input type="text" className="input-frame" defaultValue={'ギルドン'} />
+            <input type="text" className="input-frame" id='building_name' value={basicInfoData.building_name ?? ''} onChange={(e) => handleChange('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" defaultValue={'HWJ Building'} />
+            <div className="data-input-form-tit">顧客名</div>
+            <input type="text" className="input-frame" id='customer_name' value={basicInfoData.customer_name ?? ''} onChange={(e) => handleChange('customer_name', e.target.value)} />
           </div>
           <div className="data-input-form-bx">
-            <div className="data-input-form-tit">建物名</div>
+            <div className="data-input-form-tit">建物の住所</div>
             <div className="form-flex">
               <div className="form-bx">
                 <input type="text" className="input-frame" defaultValue={'1050013'} disabled />
@@ -68,17 +99,17 @@ export default function BasicForm() {
         </div>
         <div className="btn-flex-wrap">
           <div className="btn-bx">
-            <button className="btn-frame n-blue icon">
+            <button className="btn-frame n-blue icon" onClick={handleSave}>
               一時保存<i className="btn-arr"></i>
             </button>
           </div>
           <div className="btn-bx">
-            <button className="btn-frame red icon">
+            <button className="btn-frame red icon" onClick={handleDelete}>
               保存<i className="btn-arr"></i>
             </button>
           </div>
           <div className="btn-bx">
-            <button className="btn-frame n-blue icon">
+            <button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
               リスト<i className="btn-arr"></i>
             </button>
           </div>
diff --git a/src/components/survey-sale/detail/DataTable.tsx b/src/components/survey-sale/detail/DataTable.tsx
index 414164c..0c48ece 100644
--- a/src/components/survey-sale/detail/DataTable.tsx
+++ b/src/components/survey-sale/detail/DataTable.tsx
@@ -1,6 +1,18 @@
 'use client'
 
+import { useServey } from '@/hooks/useSurvey'
+import { useParams } from 'next/navigation'
+
 export default function DataTable() {
+  const params = useParams()
+  const id = params.id
+
+  const { surveyDetail, isLoadingSurveyDetail } = useServey(Number(id))
+
+  if (isLoadingSurveyDetail) {
+    return <div>Loading...</div>
+  }
+
   return (
     <>
       <div className="sale-frame">
@@ -12,19 +24,23 @@ export default function DataTable() {
           <tbody>
             <tr>
               <th>登録番号</th>
-              <td>0000000020</td>
+              <td>{surveyDetail?.id}</td>
             </tr>
             <tr>
               <th>登録日</th>
-              <td>2025.04.11</td>
+              <td>{surveyDetail?.created_at ? new Date(surveyDetail?.created_at).toLocaleString() : ''}</td>
             </tr>
             <tr>
               <th>更新日時</th>
-              <td>2025.04.11 15:06:29</td>
+              <td>{surveyDetail?.updated_at ? new Date(surveyDetail?.updated_at).toLocaleString() : ''}</td>
             </tr>
             <tr>
               <th>提出可否</th>
-              <td>2025.04.12 10:00:00 (INTERPLUG –販売店)</td>
+              <td>
+                {surveyDetail?.submission_status && surveyDetail?.submission_date
+                  ? new Date(surveyDetail.submission_date).toLocaleString()
+                  : '未提出'}
+              </td>
             </tr>
             <tr>
               <th>ダウンロード</th>
diff --git a/src/components/survey-sale/detail/DetailForm.tsx b/src/components/survey-sale/detail/DetailForm.tsx
index 9462e95..2fed5f7 100644
--- a/src/components/survey-sale/detail/DetailForm.tsx
+++ b/src/components/survey-sale/detail/DetailForm.tsx
@@ -1,21 +1,53 @@
 'use client'
 
+import { useServey } from '@/hooks/useSurvey'
+import { useParams, useRouter } from 'next/navigation'
+
 export default function DetailForm() {
+  const router = useRouter()
+  const params = useParams()
+  const id = params.id
+
+  const { surveyDetail, deleteSurvey, submitSurvey, isLoadingSurveyDetail } = useServey(Number(id))
+
+  if (isLoadingSurveyDetail) {
+    return <div>Loading...</div>
+  }
+
+  const handleSubmit = async () => {
+    if (confirm('submit?')) {
+      if (surveyDetail?.id) {
+        await submitSurvey()
+      }
+    }
+  }
+  const handleUpdate = () => {
+    router.push(`/survey-sale/basic-info?id=${id}`)
+  }
+  const handleDelete = async () => {
+    if (confirm('delete?')) {
+      if (surveyDetail?.id) {
+        await deleteSurvey()
+        router.push('/survey-sale')
+      }
+    }
+  }
+
   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'} />
+            <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.representative} />
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">販売店</div>
-            <input type="text" className="input-frame" disabled defaultValue={'HWJ(T01)'} />
+            <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.store ?? ''} />
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">施工店</div>
-            <input type="text" className="input-frame" disabled defaultValue={'施工点名表示'} />
+            <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.construction_point ?? ''} />
           </div>
         </div>
       </div>
@@ -24,35 +56,35 @@ export default function DetailForm() {
         <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'} />
+            <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.investigation_date ?? ''} />
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">建物名</div>
-            <input type="text" className="input-frame" disabled defaultValue={'ハンファジャパンビル'} />
+            <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.building_name ?? ''} />
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">顧客名</div>
-            <input type="text" className="input-frame" disabled defaultValue={'Hong gi'} />
+            <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.customer_name ?? ''} />
           </div>
         </div>
         <div className="btn-flex-wrap">
           <div className="btn-bx">
-            <button className="btn-frame n-blue icon">
+            <button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
               リスト<i className="btn-arr"></i>
             </button>
           </div>
           <div className="btn-bx">
-            <button className="btn-frame red icon">
+            <button className="btn-frame red icon" onClick={handleSubmit}>
               提出<i className="btn-arr"></i>
             </button>
           </div>
           <div className="btn-bx">
-            <button className="btn-frame n-blue icon">
+            <button className="btn-frame n-blue icon" onClick={handleUpdate}>
               修正<i className="btn-arr"></i>
             </button>
           </div>
           <div className="btn-bx">
-            <button className="btn-frame n-blue icon">
+            <button className="btn-frame n-blue icon" onClick={handleDelete}>
               削除<i className="btn-arr"></i>
             </button>
           </div>
diff --git a/src/components/survey-sale/list/ListTable.tsx b/src/components/survey-sale/list/ListTable.tsx
index 6d15b1e..fcf7769 100644
--- a/src/components/survey-sale/list/ListTable.tsx
+++ b/src/components/survey-sale/list/ListTable.tsx
@@ -1,31 +1,53 @@
 'use client'
 
+import LoadMoreButton from '@/components/LoadMoreButton'
+import { useServey } from '@/hooks/useSurvey'
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
 export default function ListTable() {
+  const router = useRouter()
+  const { surveyList, isLoadingSurveyList } = useServey()
+  const [hasMore, setHasMore] = useState(surveyList.length > 5)
+  const [visibleItems, setVisibleItems] = useState(5)
+
+  const handleLoadMore = () => {
+    const newVisibleItems = Math.min(visibleItems + 5, surveyList.length)
+    setVisibleItems(newVisibleItems)
+    setHasMore(newVisibleItems < surveyList.length)
+  }
+
+  const handleScrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  const handleDetail = (id: number) => {
+    router.push(`/survey-sale/${id}`)
+  }
+
   return (
     <>
       <div className="sale-frame">
         <ul className="sale-list-wrap">
-          {Array.from({ length: 4 }).map((_, idx) => (
-            <li className="sale-list-item" key={idx}>
+          {surveyList.slice(0, visibleItems).map((survey) => (
+            <li className="sale-list-item cursor-pointer" key={survey.id} onClick={() => handleDetail(survey.id)}>
               <div className="sale-item-bx">
                 <div className="sale-item-date-bx">
-                  <div className="sale-item-num">0000000021</div>
-                  <div className="sale-item-date">2025.04.22</div>
+                  <div className="sale-item-num">{survey.id}</div>
+                  <div className="sale-item-date">{survey.investigation_date}</div>
                 </div>
-                <div className="sale-item-tit">Hanwha Building</div>
-                <div className="sale-item-customer">Gil dong</div>
+                <div className="sale-item-tit">{survey.building_name}</div>
+                <div className="sale-item-customer">{survey.customer_name}</div>
                 <div className="sale-item-update-bx">
-                  <div className="sale-item-name">Hong Gildong</div>
-                  <div className="sale-item-update">2025.04.22 10:00:21</div>
+                  <div className="sale-item-name">{survey.representative}</div>
+                  <div className="sale-item-update">{new Date(survey.updated_at).toLocaleString()}</div>
                 </div>
               </div>
             </li>
           ))}
         </ul>
         <div className="sale-edit-btn">
-          <button className="btn-frame n-blue icon">
-            もっと見る<i className="btn-edit"></i>
-          </button>
+          <LoadMoreButton hasMore={hasMore} onLoadMore={handleLoadMore} onScrollToTop={handleScrollToTop} />
         </div>
       </div>
     </>
diff --git a/src/components/survey-sale/list/SearchForm.tsx b/src/components/survey-sale/list/SearchForm.tsx
index 5763dbf..67794a2 100644
--- a/src/components/survey-sale/list/SearchForm.tsx
+++ b/src/components/survey-sale/list/SearchForm.tsx
@@ -1,10 +1,13 @@
 'use client'
 
+import { useRouter } from 'next/navigation'
+
 export default function SearchForm() {
+  const router = useRouter()
   return (
     <div className="sale-frame">
       <div className="sale-form-bx">
-        <button className="btn-frame n-blue icon">
+        <button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale/basic-info')}>
           新規売買登録<i className="btn-arr"></i>
         </button>
       </div>
diff --git a/src/components/survey-sales/EtcCheckbox.tsx b/src/components/survey-sales/EtcCheckbox.tsx
index 6e4a866..1dd6c03 100644
--- a/src/components/survey-sales/EtcCheckbox.tsx
+++ b/src/components/survey-sales/EtcCheckbox.tsx
@@ -1,17 +1,17 @@
 'use client'
 import { useState } from "react"
-import { SurveySalesDetailInfo } from "@/api/surveySales"
+import { SurveyDetailRequest } from "@/types/Survey"
 
 interface EtcCheckboxProps {
-  formName: keyof SurveySalesDetailInfo
+  formName: keyof SurveyDetailRequest
   label: string
-  detailInfoForm: SurveySalesDetailInfo
-  setDetailInfoForm: (form: SurveySalesDetailInfo) => void
+  detailInfoForm: SurveyDetailRequest
+  setDetailInfoForm: (form: SurveyDetailRequest) => void
 }
 
 export default function EtcCheckbox({ formName, label, detailInfoForm, setDetailInfoForm }: EtcCheckboxProps) {
   const [showEtcInput, setShowEtcInput] = useState(false)
-  const etcFieldName = `${formName}_etc` as keyof SurveySalesDetailInfo
+  const etcFieldName = `${formName}_etc` as keyof SurveyDetailRequest
 
   return (
     <div className="space-y-2">
diff --git a/src/components/survey-sales/SurveyDetail.tsx b/src/components/survey-sales/SurveyDetail.tsx
index 20145a3..a50b9ab 100644
--- a/src/components/survey-sales/SurveyDetail.tsx
+++ b/src/components/survey-sales/SurveyDetail.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { useServey } from '@/hooks/useSurvey'
-import { SurveySalesBasicInfo } from '@/api/surveySales'
 import { useParams, useRouter } from 'next/navigation'
 
 export default function SurveyDetail() {
@@ -56,6 +55,7 @@ export default function SurveyDetail() {
           back
         </button>
       </div>
+      <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.store ?? ''} />
     </div>
   )
 }
diff --git a/src/components/survey-sales/write-survey-sales/BasicWriteForm.tsx b/src/components/survey-sales/write-survey-sales/BasicWriteForm.tsx
index bf73338..8fe0a6f 100644
--- a/src/components/survey-sales/write-survey-sales/BasicWriteForm.tsx
+++ b/src/components/survey-sales/write-survey-sales/BasicWriteForm.tsx
@@ -1,15 +1,15 @@
 'use client'
 
-import { SurveySalesBasicInfo } from '@/api/surveySales'
+import { SurveyBasicRequest } from '@/types/Survey'
 
 export default function BasicWriteForm({
   basicInfoData,
   setBasicInfoData,
 }: {
-  basicInfoData: SurveySalesBasicInfo
-  setBasicInfoData: (basicInfoData: SurveySalesBasicInfo) => void
+  basicInfoData: SurveyBasicRequest
+  setBasicInfoData: (basicInfoData: SurveyBasicRequest) => void
 }) {
-  const handleChange = (key: keyof SurveySalesBasicInfo, value: string) => {
+  const handleChange = (key: keyof SurveyBasicRequest, value: string) => {
     setBasicInfoData({ ...basicInfoData, [key]: value.toString() })
   }
 
diff --git a/src/components/survey-sales/write-survey-sales/DetailWriteForm.tsx b/src/components/survey-sales/write-survey-sales/DetailWriteForm.tsx
index 488f046..032d6f1 100644
--- a/src/components/survey-sales/write-survey-sales/DetailWriteForm.tsx
+++ b/src/components/survey-sales/write-survey-sales/DetailWriteForm.tsx
@@ -1,24 +1,24 @@
 'use client'
 import React from 'react'
 import EtcCheckbox from '../EtcCheckbox'
-import { SurveySalesDetailInfo } from '@/api/surveySales'
+import { SurveyDetailRequest } from '@/types/Survey'
 
 interface DetailWriteFormProps {
-  detailInfoForm: SurveySalesDetailInfo
-  setDetailInfoForm: (form: SurveySalesDetailInfo) => void
+  detailInfoForm: SurveyDetailRequest
+  setDetailInfoForm: (form: SurveyDetailRequest) => void
 }
 
 export default function DetailWriteForm({ detailInfoForm, setDetailInfoForm }: DetailWriteFormProps) {
-  const handleNumberInput = (field: keyof SurveySalesDetailInfo, value: string) => {
+  const handleNumberInput = (field: keyof SurveyDetailRequest, value: string) => {
     const numberValue = value === '' ? null : Number(value)
     setDetailInfoForm({ ...detailInfoForm, [field]: numberValue })
   }
 
-  const handleTextInput = (field: keyof SurveySalesDetailInfo, value: string) => {
+  const handleTextInput = (field: keyof SurveyDetailRequest, value: string) => {
     setDetailInfoForm({ ...detailInfoForm, [field]: value || null })
   }
 
-  const handleBooleanInput = (field: keyof SurveySalesDetailInfo, checked: boolean) => {
+  const handleBooleanInput = (field: keyof SurveyDetailRequest, checked: boolean) => {
     setDetailInfoForm({ ...detailInfoForm, [field]: checked })
   }
 
diff --git a/src/components/survey-sales/write-survey-sales/MainSurveyForm.tsx b/src/components/survey-sales/write-survey-sales/MainSurveyForm.tsx
index f51aa2b..b49b96e 100644
--- a/src/components/survey-sales/write-survey-sales/MainSurveyForm.tsx
+++ b/src/components/survey-sales/write-survey-sales/MainSurveyForm.tsx
@@ -6,10 +6,12 @@ import DetailWriteForm from './DetailWriteForm'
 import { SurveySalesBasicInfo, SurveySalesDetailInfo } from '@/api/surveySales'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useServey } from '@/hooks/useSurvey'
+import { SurveyBasicRequest, SurveyDetailRequest } from '@/types/Survey'
 
 type TabType = 'basic' | 'detail'
 
-const defaultDetailInfoForm: SurveySalesDetailInfo = {
+const defaultDetailInfoForm: SurveyDetailRequest = {
+  basic_info_id: 0,
   contract_capacity: null,
   retail_company: null,
   supplementary_facilities: null,
@@ -47,7 +49,7 @@ const defaultDetailInfoForm: SurveySalesDetailInfo = {
   memo: null,
 }
 
-const defaultBasicInfoForm: SurveySalesBasicInfo = {
+const defaultBasicInfoForm: SurveyBasicRequest = {
   representative: '',
   store: null,
   construction_point: null,
@@ -58,6 +60,7 @@ const defaultBasicInfoForm: SurveySalesBasicInfo = {
   address: null,
   address_detail: null,
   submission_status: false,
+  submission_date: null,
 }
 
 export default function MainSurveyForm() {
@@ -74,8 +77,8 @@ export default function MainSurveyForm() {
   const router = useRouter()
   const { createSurvey, isCreatingSurvey, createSurveyDetail, surveyDetail, updateSurvey } = useServey(Number(id))
 
-  const [detailInfoForm, setDetailInfoForm] = useState<SurveySalesDetailInfo>(defaultDetailInfoForm)
-  const [basicInfoData, setBasicInfoData] = useState<SurveySalesBasicInfo>(defaultBasicInfoForm)
+  const [detailInfoForm, setDetailInfoForm] = useState<SurveyDetailRequest>(defaultDetailInfoForm)
+  const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(defaultBasicInfoForm)
 
   useEffect(() => {
     if (surveyDetail) {
@@ -94,8 +97,8 @@ export default function MainSurveyForm() {
     if (id) {
       updateSurvey({
         ...basicInfoData,
-        detail_info: detailInfoForm,
         submission_status: isSubmit,
+        submission_date: isSubmit ? new Date().toISOString() : null,
       })
       router.push('/survey-sales')
       return
diff --git a/src/hooks/useSurvey.ts b/src/hooks/useSurvey.ts
index 7e99341..e8cc428 100644
--- a/src/hooks/useSurvey.ts
+++ b/src/hooks/useSurvey.ts
@@ -1,26 +1,29 @@
-import { SurveySalesBasicInfo, surveySalesApi, SurveySalesDetailInfo } from '@/api/surveySales'
 import { axiosInstance } from '@/libs/axios'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import type { SurveyBasicInfo, SurveyBasicRequest, SurveyDetailInfo, SurveyDetailRequest } from '@/types/Survey'
 
 export function useServey(id?: number): {
-  surveyList: SurveySalesBasicInfo[] | []
-  surveyDetail: SurveySalesBasicInfo | null
+  surveyList: SurveyBasicInfo[] | []
+  surveyDetail: SurveyBasicInfo | null
   isLoadingSurveyList: boolean
   isLoadingSurveyDetail: boolean
   isCreatingSurvey: boolean
   isUpdatingSurvey: boolean
   isDeletingSurvey: boolean
-  createSurvey: (survey: SurveySalesBasicInfo) => Promise<number>
-  createSurveyDetail: (params: { surveyId: number; surveyDetail: SurveySalesDetailInfo }) => void
-  updateSurvey: (survey: SurveySalesBasicInfo) => void
-  deleteSurvey: (params: { id: number; isDetail: boolean }) => void
-  confirmSurvey: (id: number) => void
+  createSurvey: (survey: SurveyBasicRequest) => Promise<number>
+  createSurveyDetail: (params: { surveyId: number; surveyDetail: SurveyDetailRequest }) => void
+  updateSurvey: (survey: SurveyBasicRequest) => void
+  deleteSurvey: () => Promise<boolean>
+  submitSurvey: () => void
 } {
   const queryClient = useQueryClient()
 
   const { data: surveyList, isLoading: isLoadingSurveyList } = useQuery({
     queryKey: ['survey', 'list'],
-    queryFn: () => surveySalesApi.getList(),
+    queryFn: async () => {
+      const resp = await axiosInstance.get<SurveyBasicInfo[]>('/api/survey-sales')
+      return resp.data
+    },
   })
 
   const { data: surveyDetail, isLoading: isLoadingSurveyDetail } = useQuery({
@@ -28,15 +31,15 @@ export function useServey(id?: number): {
     queryFn: async () => {
       if (id === undefined) throw new Error('id is required')
       if (id === null) return null
-      const resp = await axiosInstance.get<SurveySalesBasicInfo>(`/api/survey-sales/${id}`)
+      const resp = await axiosInstance.get<SurveyBasicInfo>(`/api/survey-sales/${id}`)
       return resp.data
     },
     enabled: id !== undefined,
   })
 
   const { mutateAsync: createSurvey, isPending: isCreatingSurvey } = useMutation({
-    mutationFn: async (survey: SurveySalesBasicInfo) => {
-      const resp = await axiosInstance.post<SurveySalesBasicInfo>('/api/survey-sales', survey)
+    mutationFn: async (survey: SurveyBasicRequest) => {
+      const resp = await axiosInstance.post<SurveyBasicInfo>('/api/survey-sales', survey)
       return resp.data.id ?? 0
     },
     onSuccess: (data) => {
@@ -46,9 +49,9 @@ export function useServey(id?: number): {
   })
 
   const { mutate: updateSurvey, isPending: isUpdatingSurvey } = useMutation({
-    mutationFn: async (survey: SurveySalesBasicInfo) => {
+    mutationFn: async (survey: SurveyBasicRequest) => {
       if (id === undefined) throw new Error('id is required')
-      const resp = await axiosInstance.put<SurveySalesBasicInfo>(`/api/survey-sales/${id}`, survey)
+      const resp = await axiosInstance.put<SurveyBasicInfo>(`/api/survey-sales/${id}`, survey)
       return resp.data
     },
     onSuccess: () => {
@@ -58,19 +61,9 @@ export function useServey(id?: number): {
   })
 
   const { mutateAsync: deleteSurvey, isPending: isDeletingSurvey } = useMutation({
-    mutationFn: async ({ id, isDetail }: { id: number; isDetail: boolean }) => {
-      if (id === undefined) throw new Error('id is required')
-      const resp = await axiosInstance.delete<boolean>(`/api/survey-sales/${id}`, { params: { isDetail } })
-      return resp.data
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
-    },
-  })
-
-  const { mutateAsync: createSurveyDetail, isPending: isCreatingSurveyDetail } = useMutation({
-    mutationFn: async ({ surveyId, surveyDetail }: { surveyId: number; surveyDetail: SurveySalesDetailInfo }) => {
-      const resp = await axiosInstance.post<SurveySalesDetailInfo>(`/api/survey-sales/${surveyId}`, surveyDetail)
+    mutationFn: async () => {
+      if (id === null) throw new Error('id is required')
+      const resp = await axiosInstance.delete<boolean>(`/api/survey-sales/${id}`)
       return resp.data
     },
     onSuccess: () => {
@@ -79,8 +72,19 @@ export function useServey(id?: number): {
     },
   })
 
-  const { mutateAsync: confirmSurvey, isPending: isConfirmingSurvey } = useMutation({
-    mutationFn: async (id: number) => {
+  const { mutateAsync: createSurveyDetail, isPending: isCreatingSurveyDetail } = useMutation({
+    mutationFn: async ({ surveyId, surveyDetail }: { surveyId: number; surveyDetail: SurveyDetailRequest }) => {
+      const resp = await axiosInstance.post<SurveyDetailInfo>(`/api/survey-sales/${surveyId}`, surveyDetail)
+      return resp.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
+      queryClient.invalidateQueries({ queryKey: ['survey', id] })
+    },
+  })
+
+  const { mutateAsync: submitSurvey } = useMutation({
+    mutationFn: async () => {
       if (id === undefined) throw new Error('id is required')
       const resp = await axiosInstance.patch<boolean>(`/api/survey-sales/${id}`)
       return resp.data
@@ -103,6 +107,6 @@ export function useServey(id?: number): {
     updateSurvey,
     deleteSurvey,
     createSurveyDetail,
-    confirmSurvey,
+    submitSurvey,
   }
 }
diff --git a/src/styles/base/_button.scss b/src/styles/base/_button.scss
index c6d11ad..b4d61a4 100644
--- a/src/styles/base/_button.scss
+++ b/src/styles/base/_button.scss
@@ -49,6 +49,14 @@
     background-size: cover;
     margin-left: 12px;
   }
+  .btn-arr-up{
+    display: block;
+    width: 10px;
+    height: 6px;
+    background: url(/assets/images/common/btn_arr_up.svg)no-repeat center;
+    background-size: cover;
+    margin-left: 12px;
+  }
   .btn-edit{
     display: block;
     width: 10px;
diff --git a/src/types/Survey.ts b/src/types/Survey.ts
new file mode 100644
index 0000000..aa7d61e
--- /dev/null
+++ b/src/types/Survey.ts
@@ -0,0 +1,111 @@
+export type SurveyBasicInfo = {
+  id: number
+  representative: string
+  store: string | null
+  construction_point: string | null
+  investigation_date: string | null
+  building_name: string | null
+  customer_name: string | null
+  post_code: string | null
+  address: string | null
+  address_detail: string | null
+  submission_status: boolean
+  submission_date: string | null
+  detail_info: SurveyDetailInfo | null
+  created_at: Date
+  updated_at: Date
+}
+
+export type SurveyDetailInfo = {
+  id: number
+  contract_capacity: string | null
+  retail_company: string | null
+  supplementary_facilities: number | null
+  supplementary_facilities_etc: string | null
+  installation_system: number | null
+  installation_system_etc: string | null
+  construction_year: number | null
+  construction_year_etc: string | null
+  roof_material: number | null
+  roof_material_etc: string | null
+  roof_shape: number | null
+  roof_shape_etc: string | null
+  roof_slope: string | null
+  house_structure: number | null
+  house_structure_etc: string | null
+  rafter_material: number | null
+  rafter_material_etc: string | null
+  rafter_size: number | null
+  rafter_size_etc: string | null
+  rafter_pitch: number | null
+  rafter_pitch_etc: string | null
+  rafter_direction: number | null
+  open_field_plate_kind: number | null
+  open_field_plate_kind_etc: string | null
+  open_field_plate_thickness: string | null
+  leak_trace: boolean | null
+  waterproof_material: number | null
+  waterproof_material_etc: string | null
+  insulation_presence: number | null
+  insulation_presence_etc: string | null
+  structure_order: number | null
+  structure_order_etc: string | null
+  installation_availability: number | null
+  installation_availability_etc: string | null
+  memo: string | null
+  created_at: Date
+  updated_at: Date
+}
+
+export type SurveyBasicRequest = {
+  representative: string
+  store: string | null
+  construction_point: string | null
+  investigation_date: string | null
+  building_name: string | null
+  customer_name: string | null
+  post_code: string | null
+  address: string | null
+  address_detail: string | null
+  submission_status: boolean
+  submission_date: string | null
+}
+
+export type SurveyDetailRequest = {
+  contract_capacity: string | null
+  retail_company: string | null
+  supplementary_facilities: number | null
+  supplementary_facilities_etc: string | null
+  installation_system: number | null
+  installation_system_etc: string | null
+  construction_year: number | null
+  construction_year_etc: string | null
+  roof_material: number | null
+  roof_material_etc: string | null
+  roof_shape: number | null
+  roof_shape_etc: string | null
+  roof_slope: string | null
+  house_structure: number | null
+  house_structure_etc: string | null
+  rafter_material: number | null
+  rafter_material_etc: string | null
+  rafter_size: number | null
+  rafter_size_etc: string | null
+  rafter_pitch: number | null
+  rafter_pitch_etc: string | null
+  rafter_direction: number | null
+  open_field_plate_kind: number | null
+  open_field_plate_kind_etc: string | null
+  open_field_plate_thickness: string | null
+  leak_trace: boolean | null
+  waterproof_material: number | null
+  waterproof_material_etc: string | null
+  insulation_presence: number | null
+  insulation_presence_etc: string | null
+  structure_order: number | null
+  structure_order_etc: string | null
+  installation_availability: number | null
+  installation_availability_etc: string | null
+  memo: string | null
+  basic_info_id: number
+}