diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index 8ce27d3..c792b97 100644
--- a/src/app/canvas/page.jsx
+++ b/src/app/canvas/page.jsx
@@ -80,10 +80,10 @@ export default function CanvasPage() {
                     {/* <CanvasContextMenu/> */}
                     
                     {/* 패널 배치 집계 */}
-                    {/* <Penal01/> */}
-                    {/* <Penal02/> */}
-                    {/* <Penal03/> */}
-                    {/* <Penal04/> */}
+                    <Penal01/>
+                    <Penal02/>
+                    <Penal03/>
+                    <Penal04/>
 
                     {/* 배치면 초기 설정 */}
                     {/* <PlacementSettingPop/> */}
@@ -186,8 +186,8 @@ export default function CanvasPage() {
                     {/* <ColorSelect/> */}
 
                     {/* 글꼴 설정, 치수선 설정 */}
-                    <FontOption/>
-                    <LineOption/>
+                    {/* <FontOption/> */}
+                    {/* <LineOption/> */}
                     {/* <ShapeSizeOption/> */}
 
                     {/* 지붕재 선택 */}
diff --git a/src/components/canvas/penal/Penal01.jsx b/src/components/canvas/penal/Penal01.jsx
index a169138..b83fd5a 100644
--- a/src/components/canvas/penal/Penal01.jsx
+++ b/src/components/canvas/penal/Penal01.jsx
@@ -5,8 +5,9 @@ export default function Penal01(){
     const [penalAct, setPenalAct] = useState(true);
     return(
         <WithDraggable isShow={true} handle=".penal-wrap">
-            <div className={`penal-wrap ${penalAct ? 'act': ''}`} onClick={() => setPenalAct(!penalAct)}>
+            <div className={`penal-wrap ${penalAct ? 'act': ''}`} >
                 <h2>パネル配置集計</h2>
+                <button className="penal-arr" onClick={() => setPenalAct(!penalAct)}></button>
                 <div className="penal-table-wrap">
                     <table className="penal-table">
                         <thead>
diff --git a/src/components/canvas/penal/Penal02.jsx b/src/components/canvas/penal/Penal02.jsx
index a26acef..9f933ea 100644
--- a/src/components/canvas/penal/Penal02.jsx
+++ b/src/components/canvas/penal/Penal02.jsx
@@ -5,8 +5,9 @@ export default function Penal02(){
     const [penalAct, setPenalAct] = useState(true);
     return(
         <WithDraggable isShow={true} handle=".penal-wrap">
-            <div className={`penal-wrap ${penalAct ? 'act': ''}`} onClick={() => setPenalAct(!penalAct)}>
+            <div className={`penal-wrap ${penalAct ? 'act': ''}`}>
                 <h2>パネル配置集計</h2>
+                <button className="penal-arr" onClick={() => setPenalAct(!penalAct)}></button>
                 <div className="penal-table-wrap">
                     <table className="penal-table" style={{width: '335px'}}>
                         <thead>
diff --git a/src/components/canvas/penal/Penal03.jsx b/src/components/canvas/penal/Penal03.jsx
index 2c7dbe3..85b9a54 100644
--- a/src/components/canvas/penal/Penal03.jsx
+++ b/src/components/canvas/penal/Penal03.jsx
@@ -5,8 +5,9 @@ export default function Penal03(){
     const [penalAct, setPenalAct] = useState(true);
     return(
         <WithDraggable isShow={true} handle=".penal-wrap">
-            <div className={`penal-wrap ${penalAct ? 'act': ''}`} onClick={() => setPenalAct(!penalAct)}>
+            <div className={`penal-wrap ${penalAct ? 'act': ''}`} >
                 <h2>パネル配置集計</h2>
+                <button className="penal-arr" onClick={() => setPenalAct(!penalAct)}></button>
                 <div className="penal-table-wrap">
                     <table className="penal-table" style={{width: '335px'}}>
                         <thead>
diff --git a/src/components/canvas/penal/Penal04.jsx b/src/components/canvas/penal/Penal04.jsx
index 2f71201..342f1f2 100644
--- a/src/components/canvas/penal/Penal04.jsx
+++ b/src/components/canvas/penal/Penal04.jsx
@@ -5,8 +5,9 @@ export default function Penal04(){
     const [penalAct, setPenalAct] = useState(true);
     return(
         <WithDraggable isShow={true} handle=".penal-wrap">
-            <div className={`penal-wrap ${penalAct ? 'act': ''}`} onClick={() => setPenalAct(!penalAct)}>
+            <div className={`penal-wrap ${penalAct ? 'act': ''}`}>
                 <h2>パネル配置集計</h2>
+                <button className="penal-arr" onClick={() => setPenalAct(!penalAct)}></button>
                 <div className="penal-table-wrap">
                     <table className="penal-table" style={{width: '435px'}}>
                         <thead>
diff --git a/src/styles/_canvasside.scss b/src/styles/_canvasside.scss
index 66bba83..efb79f0 100644
--- a/src/styles/_canvasside.scss
+++ b/src/styles/_canvasside.scss
@@ -4,30 +4,28 @@
     top: 200px;
     left: 50px;
     z-index: 999999;
+    display: flex;
     width: 237px;
     height: 40px;
     line-height: 40px;
     background-color: #fff;
     border: 1px solid #DFDFDF;
-    padding: 0 34px 0 10px;
+    padding: 0 10px 0 10px;
     border-radius: 2px;
     box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
     cursor: pointer;
-    &::before{
-        content: '';
-        position: absolute;
-        top: 50%;
-        right: 12px;
-        transform: translateY(-50%);
-        width: 10px;
-        height: 6px;
+    .penal-arr{
+        flex: none;
+        width: 24px;
+        height: 100%;
         background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center;
-        background-size: cover;
+        background-size: 10px 6px;
     }
     h2{
         font-size: 12px;
         font-weight: 500;
         color: #3D3D3D;
+        flex: 1;
     }
     .penal-table-wrap{
         display: none;
@@ -69,7 +67,7 @@
         h2{
             color: #fff;
         }
-        &::before{
+        .penal-arr{
             background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center;
         }
         .penal-table-wrap{