diff --git a/public/static/images/canvas/hide-check-arr.svg b/public/static/images/canvas/hide-check-arr.svg
new file mode 100644
index 0000000..f2a1609
--- /dev/null
+++ b/public/static/images/canvas/hide-check-arr.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0L15.7942 13.5H0.205771L8 0Z" fill="white"/>
+</svg>
diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index ba2d22a..beb34ed 100644
--- a/src/app/canvas/page.jsx
+++ b/src/app/canvas/page.jsx
@@ -161,7 +161,7 @@ export default function CanvasPage() {
                     <RoofModuleOption/>
 
                     {/* 육지붕모듈 선택 */}
-                    <HexagonalRoofOption/>
+                    {/* <HexagonalRoofOption/> */}
 
                     {/* 회로 및 가대설정 */}
                     {/* <CircuitStandSetting/> */}
diff --git a/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab01.jsx b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab01.jsx
index a52e927..60be032 100644
--- a/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab01.jsx
+++ b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab01.jsx
@@ -130,7 +130,6 @@ export default function HexagonalRoofTab01({setTabNum}){
                 </div>
             </div>
             <div className="grid-btn-wrap">
-                <button className="btn-frame modal mr5">保存</button>
                 <button className="btn-frame modal act" onClick={() => setTabNum(2)}>Next</button>
             </div>
         </>
diff --git a/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab02.jsx b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab02.jsx
index 532f930..234ef74 100644
--- a/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab02.jsx
+++ b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab02.jsx
@@ -134,7 +134,7 @@ export default function HexagonalRoofTab03({setTabNum}){
                 </div>
             </div> */}
             <div className="grid-btn-wrap">
-                <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button>
+                <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>前に戻る</button>
                 <button className="btn-frame modal mr5">手動配置</button>
                 <button className="btn-frame modal act">設定値に自動配置</button>
             </div>
diff --git a/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab01.jsx b/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab01.jsx
index 43a434b..be47d43 100644
--- a/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab01.jsx
+++ b/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab01.jsx
@@ -152,7 +152,6 @@ export default function RoofModuleOptionTab01({setTabNum}){
                 </div>
             </div>
             <div className="grid-btn-wrap">
-                <button className="btn-frame modal mr5">保存</button>
                 <button className="btn-frame modal act" onClick={() => setTabNum(2)}>Next</button>
             </div>
         </>
diff --git a/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab02.jsx b/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab02.jsx
index 7915ded..79c2bab 100644
--- a/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab02.jsx
+++ b/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab02.jsx
@@ -108,16 +108,9 @@ export default function RoofModuleOptionTab02({setTabNum}){
                                     <label htmlFor="ch02">落雪防止金具設置</label>
                                 </div>
                             </div>
-                            <div className="flex-item-button">
-                                <button className="btn-frame roof">架台保存</button>
-                            </div>
                         </div>
                     </div>
-                </div>
-            </div>
-            <div className="module-table-box mb10">
-                <div className="module-table-inner">
-                    <div className="module-area">
+                    <div className="module-area mt10">
                         <div className="module-area-title">モジュール配置領域</div>
                         <div className="outline-form mr15">
                             <span>軒側</span>
@@ -161,7 +154,7 @@ export default function RoofModuleOptionTab02({setTabNum}){
             </div>
         </div>
         <div className="grid-btn-wrap">
-            <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button>
+            <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>前に戻る</button>
             <button className="btn-frame modal act" onClick={() => setTabNum(3)}>Next</button>
         </div>
         </>
diff --git a/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab03.jsx b/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab03.jsx
index c6865d4..569e748 100644
--- a/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab03.jsx
+++ b/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab03.jsx
@@ -1,10 +1,14 @@
+'use client'
+
+import { useState } from "react"
 
 export default function RoofModuleOptionTab03({setTabNum}){
+    const [useTab, setUseTab] = useState(false);
 
     return(
         <>
-            <div className="module-table-block-wrap">
-                <div className="module-table-box mb10">
+            <div className="module-table-flex-wrap">
+                <div className="module-table-box">
                     <div className="module-table-inner">
                         <div className="roof-module-table">
                             <table>
@@ -17,10 +21,8 @@ export default function RoofModuleOptionTab03({setTabNum}){
                                             </div>
                                         </th>
                                         <th >モジュール</th>
-                                        <th style={{width: '70px'}}>Max単数</th>
-                                        <th style={{width: '100px'}}>混合Max単数</th>
-                                        <th style={{width: '80px'}}>単数</th>
-                                        <th style={{width: '80px'}}>熱水</th>
+                                        <th style={{width: '100px'}}>単数</th>
+                                        <th style={{width: '100px'}}>熱水</th>
                                     </tr>
                                 </thead>
                                 <tbody>
@@ -37,8 +39,6 @@ export default function RoofModuleOptionTab03({setTabNum}){
                                                 <span className="name">Re.RISE-G3 440</span>
                                             </div>
                                         </td>
-                                        <td className="al-r">00</td>
-                                        <td className="al-r">00</td>
                                         <td className="al-r">
                                             <div className="input-grid" >
                                                 <input type="text" className="input-origin block" defaultValue={13}/>
@@ -63,8 +63,6 @@ export default function RoofModuleOptionTab03({setTabNum}){
                                                 <span className="name">Re.RISE MS-G3 290</span>
                                             </div>
                                         </td>
-                                        <td className="al-r">00</td>
-                                        <td className="al-r">00</td>
                                         <td className="al-r">
                                             <div className="input-grid" >
                                                 <input type="text" className="input-origin block" defaultValue={13}/>
@@ -81,30 +79,28 @@ export default function RoofModuleOptionTab03({setTabNum}){
                                         <td></td>
                                         <td></td>
                                         <td></td>
-                                        <td></td>
-                                        <td></td>
                                     </tr>
                                 </tbody>
                             </table>
                         </div>
+                        
                     </div>
                 </div>
-                <div className="module-table-box"> 
+                <div className="module-table-box non-flex">
                     <div className="module-table-inner">
-                        <div className="self-table-tit">設置形態を選択してください。</div>
-                        <div className="roof-module-table self">
+                        <div className="roof-module-table">
                             <table>
                                 <thead>
                                     <tr>
-                                        <th >千鳥配置</th>
-                                        <th >配置基準</th>
+                                        <th>千鳥配置</th>
+                                        <th>配置基準</th>
                                     </tr>
                                 </thead>
                                 <tbody>
                                     <tr>
-                                        <td className="al-c">
-                                            <div className="self-table-radio">
-                                                <div className="d-check-radio pop mr10">
+                                        <td>
+                                            <div className="hexagonal-radio-wrap">
+                                                <div className="d-check-radio pop mb10">
                                                     <input type="radio" name="radio02" id="ra03" />
                                                     <label htmlFor="ra03">する</label>
                                                 </div>
@@ -114,9 +110,9 @@ export default function RoofModuleOptionTab03({setTabNum}){
                                                 </div>
                                             </div>
                                         </td>
-                                        <td className="al-c">
-                                            <div className="self-table-radio">
-                                                <div className="d-check-radio pop mr10">
+                                        <td>
+                                            <div className="hexagonal-radio-wrap">
+                                                <div className="d-check-radio pop mb10">
                                                     <input type="radio" name="radio03" id="ra05" />
                                                     <label htmlFor="ra05">軒側</label>
                                                 </div>
@@ -133,8 +129,109 @@ export default function RoofModuleOptionTab03({setTabNum}){
                     </div>
                 </div>
             </div>
+            <div className="hide-check-guide">
+                屋根材別モジュールの最大段数。混合最大単数を確認してください 
+                <button className={`arr ${useTab ? 'act' : ''}`} onClick={() => setUseTab(!useTab)}></button>
+            </div>
+            <div className={`module-table-box mt10 ${useTab ? 'hide' : ''}`}>
+                <div className="module-table-inner">
+                    <div className="roof-module-table">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th rowSpan={2}style={{width: '22%'}}></th>
+                                    <th colSpan={2}>
+                                        <div className="color-wrap">
+                                            <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
+                                            <span className="name">Re.RISE-G3 440</span>
+                                        </div>
+                                    </th>
+                                    <th colSpan={2}>
+                                        <div className="color-wrap">
+                                            <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
+                                            <span className="name">Re.RISE-G3 440</span>
+                                        </div>
+                                    </th>
+                                    <th colSpan={2}>
+                                        <div className="color-wrap">
+                                            <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
+                                            <span className="name">Re.RISE-G3 440</span>
+                                        </div>
+                                    </th>
+                                </tr>
+                                <tr>
+                                    <th>Max最大単数</th>
+                                    <th>Max最大単数</th>
+                                    <th>Max最大単数</th>
+                                    <th>Max最大単数</th>
+                                    <th>Max最大単数</th>
+                                    <th>Max最大単数</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <div className="color-wrap">
+                                            <span className="color-box" style={{backgroundColor: '#96d37d'}}></span>
+                                            <span className="name">アスファルトシングル</span>
+                                        </div>
+                                    </td>
+                                    <td className="al-r">7</td>
+                                    <td className="al-r">5</td>
+                                    <td className="al-r">5</td>
+                                    <td className="al-r">2</td>
+                                    <td className="al-r">5</td>
+                                    <td className="al-r">2</td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <div className="color-wrap">
+                                            <span className="color-box" style={{backgroundColor: '#96d37d'}}></span>
+                                            <span className="name">アスファルトシングル</span>
+                                        </div>
+                                    </td>
+                                    <td className="al-r">7</td>
+                                    <td className="al-r">5</td>
+                                    <td className="al-r">5</td>
+                                    <td className="al-r">2</td>
+                                    <td className="al-r">5</td>
+                                    <td className="al-r">2</td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <div className="color-wrap">
+                                            <span className="color-box" style={{backgroundColor: '#96d37d'}}></span>
+                                            <span className="name">アスファルトシングル</span>
+                                        </div>
+                                    </td>
+                                    <td className="al-r">7</td>
+                                    <td className="al-r">5</td>
+                                    <td className="al-r">5</td>
+                                    <td className="al-r">2</td>
+                                    <td className="al-r">5</td>
+                                    <td className="al-r">2</td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <div className="color-wrap">
+                                            <span className="color-box" style={{backgroundColor: '#96d37d'}}></span>
+                                            <span className="name">アスファルトシングル</span>
+                                        </div>
+                                    </td>
+                                    <td className="al-r">7</td>
+                                    <td className="al-r">5</td>
+                                    <td className="al-r">5</td>
+                                    <td className="al-r">2</td>
+                                    <td className="al-r">5</td>
+                                    <td className="al-r">2</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
             <div className="grid-btn-wrap">
-                <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>以前</button>
+                <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>前に戻る</button>
                 <button className="btn-frame modal mr5">単数指定配置</button>
                 <button className="btn-frame modal mr5">手動配置</button>
                 <button className="btn-frame modal act">自動配置</button>
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 35cb899..fef7c2f 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -1483,6 +1483,10 @@ $alert-color: #101010;
     .outline-form{
         flex: 1;
     }
+    .non-flex{
+        min-width: 300px;
+        flex: none;
+    }
 }
 
 .module-box-tab{
@@ -2343,6 +2347,7 @@ $alert-color: #101010;
     }
 }
 
+
 .module-table-block-wrap{
     .roof-module-table{
         &.self{
@@ -2390,4 +2395,31 @@ $alert-color: #101010;
 
 .hexagonal-radio-wrap{
     padding: 17px 10px;
+}
+
+.hide-check-guide{
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    color: #fff;
+    margin-top: 10px;
+    font-weight: 500;
+    .arr{
+        width: 13px;
+        height: 13px;
+        margin-left: 10px;
+        background: url(../../public/static/images/canvas/hide-check-arr.svg) no-repeat center;
+        background-size: contain;
+        transform: rotate(180deg);
+        &.act{
+            transform: rotate(0deg);
+        }
+    }
+}
+
+.module-table-box{
+    &.hide{
+        overflow: hidden;
+        height: 0;
+    }
 }
\ No newline at end of file
diff --git a/src/styles/_table.scss b/src/styles/_table.scss
index 5efacd7..5fe69af 100644
--- a/src/styles/_table.scss
+++ b/src/styles/_table.scss
@@ -236,6 +236,16 @@ table{
                 .d-check-box{
                     opacity: 0.5;
                 }
+                .color-wrap{
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    .color-box{
+                        width: 14px;
+                        height: 14px;
+                        margin-right: 8px;
+                    }
+                }
             }
         }
         tbody{