diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index ffd2e005..b2f9a022 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -1,6 +1,7 @@
 import { useCanvas } from '@/hooks/useCanvas'
 import { useEffect, useState } from 'react'
 import { Mode, useMode } from '@/hooks/useMode'
+import { Button } from '@nextui-org/react'
 import QRect from '@/components/fabric/QRect'
 import QPolygon from '@/components/fabric/QPolygon'
 
@@ -182,145 +183,101 @@ export default function Roof2() {
       {canvas && (
         <>
           <div className=" my-8 w-full text:pretty">
-            <button
-              className={`w-30 m-2 p-2 rounded ${
-                mode === Mode.DEFAULT ? 'bg-blue-500' : 'bg-gray-500'
-              } text-white`}
-              onClick={() => changeMode(canvas, Mode.DEFAULT)}
+            <Button
+              className="m-1 p-2"
+              color={`${mode === Mode.DEFAULT ? 'primary' : 'default'}`}
+              onClick={fillCellInPolygon}
             >
               모드 DEFAULT
-            </button>
-            <button
-              className={`w-30 m-2 p-2 rounded ${
-                mode === Mode.DRAW_LINE ? 'bg-blue-500' : 'bg-gray-500'
-              } text-white`}
+            </Button>
+            <Button
+              className="m-1 p-2"
+              color={`${mode === Mode.DRAW_LINE ? 'primary' : 'default'}`}
               onClick={() => changeMode(canvas, Mode.DRAW_LINE)}
             >
               기준선 긋기 모드
-            </button>
-            <button
-              className={`w-30 m-2 p-2 rounded ${
-                mode === Mode.EDIT ? 'bg-blue-500' : 'bg-gray-500'
-              } text-white`}
+            </Button>
+            <Button
+              className="m-1 p-2"
+              color={`${mode === Mode.EDIT ? 'primary' : 'default'}`}
               onClick={() => changeMode(canvas, Mode.EDIT)}
             >
               에디팅모드
-            </button>
-            <button
-              className={`w-30 m-2 p-2 rounded ${
-                mode === Mode.TEMPLATE ? 'bg-blue-500' : 'bg-gray-500'
-              } text-white`}
+            </Button>
+            <Button
+              className="m-1 p-2"
+              color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
               onClick={() => changeMode(canvas, Mode.TEMPLATE)}
             >
               템플릿
-            </button>
-            <button
-              className={`w-30 m-2 p-2 rounded ${
-                mode === Mode.TEXTBOX ? 'bg-blue-500' : 'bg-gray-500'
-              } text-white`}
+            </Button>
+            <Button
+              className="m-1 p-2"
+              color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`}
               onClick={() => changeMode(canvas, Mode.TEXTBOX)}
             >
               텍스트박스 모드
-            </button>
-            <button
-              className={`w-30 m-2 p-2 rounded ${
-                mode === Mode.DRAW_RECT ? 'bg-blue-500' : 'bg-gray-500'
-              } text-white`}
+            </Button>
+            <Button
+              className="m-1 p-2"
+              color={`${mode === Mode.DRAW_RECT ? 'primary' : 'default'}`}
               onClick={() => changeMode(canvas, Mode.DRAW_RECT)}
             >
               사각형 생성 모드
-            </button>
-            <button
-              className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
-              onClick={handleUndo}
-            >
+            </Button>
+            <Button className="m-1 p-2" onClick={handleUndo}>
               Undo
-            </button>
-            <button
-              className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
-              onClick={handleRedo}
-            >
+            </Button>
+            <Button className="m-1 p-2" onClick={handleRedo}>
               Redo
-            </button>
-            <button
-              className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
-              onClick={handleClear}
-            >
+            </Button>
+            <Button className="m-1 p-2" onClick={handleClear}>
               clear
-            </button>
-            <button
-              className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
-              onClick={zoomIn}
-            >
+            </Button>
+            <Button className="m-1 p-2" onClick={zoomIn}>
               확대
-            </button>
-            <button
-              className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
-              onClick={zoomOut}
-            >
+            </Button>
+            <Button className="m-1 p-2" onClick={zoomOut}>
               축소
-            </button>
+            </Button>
             현재 줌 : {zoom}%
-            <button
-              className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
-              onClick={makeRect}
-            >
+            <Button className="m-1 p-2" onClick={makeRect}>
               사각형만들기
-            </button>
-            <button
-              className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
-              onClick={makeLine}
-            >
+            </Button>
+            <Button className="m-1 p-2" onClick={makeLine}>
               선 추가
-            </button>
-            <button
-              className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
-              onClick={makePolygon}
-            >
+            </Button>
+            <Button className="m-1 p-2" onClick={makePolygon}>
               다각형 추가
-            </button>
-            <button
-              className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
+            </Button>
+            <Button
+              className="m-1 p-2"
               onClick={() => {
                 setCanvasBackgroundWithDots(canvas, 10)
               }}
             >
               점선 추가
-            </button>
-            <button
-              className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
+            </Button>
+            <Button
+              className="m-1 p-2"
               onClick={() => {
                 setCanvasBackgroundWithDots(canvas, 20)
               }}
             >
               점선 추가
-            </button>
-            <button
-              className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
-              onClick={() => {
-                saveImage()
-              }}
-            >
+            </Button>
+            <Button className="m-1 p-2" onClick={saveImage}>
               저장
-            </button>
-            <button
-              className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
-              onClick={makeQPolygon}
-            >
+            </Button>
+            <Button className="m-1 p-2" onClick={makeQPolygon}>
               QPolygon
-            </button>
-            <button
-              className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
-              onClick={rotateShape}
-            >
+            </Button>
+            <Button className="m-1 p-2" onClick={rotateShape}>
               회전
-            </button>
-            <button
-              className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
-              onClick={makeQLine}
-            >
+            </Button>
+            <Button className="m-1 p-2" onClick={makeQLine}>
               QLine
-            </button>
+            </Button>
           </div>
           <div className="flex justify-center flex-col items-center">
             <div className="m-2 p-2 w-80">