diff --git a/src/components/suitable/Suitable.tsx b/src/components/suitable/Suitable.tsx
index 8a2989c..fe2793d 100644
--- a/src/components/suitable/Suitable.tsx
+++ b/src/components/suitable/Suitable.tsx
@@ -9,7 +9,7 @@ import type { CommCode } from '@/types/CommCode'
 import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
 
 export default function Suitable() {
-  const [reference, setReference] = useState(false)
+  const [reference, setReference] = useState(true)
 
   const { getSuitableCommCode, refetchBySearch } = useSuitable()
   const { suitableCommCode, selectedCategory, setSelectedCategory, searchValue, setSearchValue, setIsSearch, clearSelectedItems } = useSuitableStore()
diff --git a/src/components/suitable/SuitableButton.tsx b/src/components/suitable/SuitableButton.tsx
new file mode 100644
index 0000000..f412c89
--- /dev/null
+++ b/src/components/suitable/SuitableButton.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+export default function SuitableButton() {
+  return (
+    <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>
+  )
+}
diff --git a/src/components/suitable/SuitableList.tsx b/src/components/suitable/SuitableList.tsx
index 9a3ec85..d436bc9 100644
--- a/src/components/suitable/SuitableList.tsx
+++ b/src/components/suitable/SuitableList.tsx
@@ -2,6 +2,7 @@
 
 import Image from 'next/image'
 import { useState } from 'react'
+import SuitableButton from './SuitableButton'
 import SuitableNoData from './SuitableNoData'
 import { useSuitable } from '@/hooks/useSuitable'
 import { useSuitableStore } from '@/store/useSuitableStore'
@@ -52,39 +53,42 @@ export default function SuitableList() {
       {isSearchLoading ? (
         <div>Loading...</div>
       ) : suitableSearchResults && suitableSearchResults.suitable.length > 0 ? (
-        suitableSearchResults.suitable.map((item: SuitableMain) => (
-          <div className={`compliance-check-bx ${openItems.has(item.ID) ? 'act' : ''}`} key={item.ID}>
-            <div className="check-name-wrap">
-              <div className="check-form-box ">
-                <input type="checkbox" id={`ch${item.ID}`} onClick={() => handleItemClick(item.ID)} />
-                <label htmlFor={`ch${item.ID}`}>{item.PRODUCT_NAME}</label>
-              </div>
-              <div className="check-name-btn">
-                <button className="bx-btn" onClick={() => toggleItemOpen(item.ID)}></button>
+        <>
+          {suitableSearchResults.suitable.map((item: SuitableMain) => (
+            <div className={`compliance-check-bx ${openItems.has(item.ID) ? 'act' : ''}`} key={item.ID}>
+              <div className="check-name-wrap">
+                <div className="check-form-box ">
+                  <input type="checkbox" id={`ch${item.ID}`} onClick={() => handleItemClick(item.ID)} />
+                  <label htmlFor={`ch${item.ID}`}>{item.PRODUCT_NAME}</label>
+                </div>
+                <div className="check-name-btn">
+                  <button className="bx-btn" onClick={() => toggleItemOpen(item.ID)}></button>
+                </div>
               </div>
+              <ul className="reference-list check">
+                {filterSuitableDetail(item.ID)?.map((subItem: SuitableDetail) => (
+                  <li className="reference-item" key={subItem.ID}>
+                    <div className="check-item-wrap">
+                      <div className="check-form-box light">
+                        <input type="checkbox" id={`ch${subItem.ID}`} />
+                        <label htmlFor={`ch${subItem.ID}`}>{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.TRESTLE_MFPC_CD)}</label>
+                      </div>
+                      <div className="compliance-icon-wrap">
+                        {suitableCheck(subItem.TRESTLE_MANUFACTURER_PRODUCT_NAME)}
+                        {subItem.MEMO && (
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </li>
+                ))}
+              </ul>
             </div>
-            <ul className="reference-list check">
-              {filterSuitableDetail(item.ID)?.map((subItem: SuitableDetail) => (
-                <li className="reference-item" key={subItem.ID}>
-                  <div className="check-item-wrap">
-                    <div className="check-form-box light">
-                      <input type="checkbox" id={`ch${subItem.ID}`} />
-                      <label htmlFor={`ch${subItem.ID}`}>{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.TRESTLE_MFPC_CD)}</label>
-                    </div>
-                    <div className="compliance-icon-wrap">
-                      {suitableCheck(subItem.TRESTLE_MANUFACTURER_PRODUCT_NAME)}
-                      {subItem.MEMO && (
-                        <div className="compliance-icon">
-                          <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))
+          ))}
+          <SuitableButton />
+        </>
       ) : (
         <SuitableNoData />
       )}