diff --git a/src/app/[locale]/roof2/RoofSelect.jsx b/src/app/[locale]/roof2/RoofSelect.jsx
index 3d14d535..4693a881 100644
--- a/src/app/[locale]/roof2/RoofSelect.jsx
+++ b/src/app/[locale]/roof2/RoofSelect.jsx
@@ -6,42 +6,124 @@ import { useAxios } from '@/hooks/useAxios'
 
 export default function RoofSelect() {
   const [roofMaterials, setRoofMaterials] = useState([])
+  const [manufacturers, setManufacturers] = useState([])
   const [trestles, setTrestles] = useState([])
+  const [modules, setModules] = useState([])
+  const [originTrestles, setOriginTrestles] = useState([])
+
+  const [roofMaterialId, setRoofMaterialId] = useState(null)
+  const [manufacturerId, setManufacturerId] = useState(null)
+  const [trestleId, setTrestleId] = useState(null)
 
   const { get } = useAxios()
 
-  const handleRoofMaterialOnChange = (e) => {
-    const id = e.target.value
-    setTrestles([])
-    get({ url: `/api/trestle/v1.0/trestles/${id}` }).then((res) => {
-      setTrestles(res)
-    })
-  }
-
   useEffect(() => {
     get({ url: '/api/roof-material/v1.0/roof-materials' }).then((res) => {
+      if (res.length === 0) {
+        return
+      }
       setRoofMaterials(res)
     })
   }, [])
-  return (
-    <>
-      <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-        {roofMaterials.length > 0 && (
-          <Select label="지붕재" className="max-w-xs" onChange={handleRoofMaterialOnChange}>
-            {roofMaterials.map((roofMaterial) => (
-              <SelectItem key={roofMaterial.id}>{roofMaterial.name}</SelectItem>
-            ))}
-          </Select>
-        )}
 
-        {trestles.length > 0 && (
-          <Select label="가대" className="max-w-xs">
-            {trestles.map((trestle) => (
-              <SelectItem key={trestle.id}>{trestle.name}</SelectItem>
-            ))}
-          </Select>
-        )}
-      </div>
-    </>
+  useEffect(() => {
+    if (!roofMaterialId) {
+      return
+    }
+
+    get({ url: `/api/trestle/v1.0/trestles/${roofMaterialId}` }).then((res) => {
+      if (res.length === 0) {
+        return
+      }
+      setOriginTrestles(res)
+      const manufactural = res.map((trestle) => {
+        return { id: trestle.manufacturerId, name: trestle.manufacturerName }
+      })
+      // Remove duplicates
+      const uniqueManufactural = Array.from(new Set(manufactural.map((a) => a.id))).map((id) => {
+        return manufactural.find((a) => a.id === id)
+      })
+
+      setManufacturers(uniqueManufactural)
+    })
+  }, [roofMaterialId])
+
+  useEffect(() => {
+    if (!manufacturerId) {
+      return
+    }
+
+    const trestles = originTrestles.filter((trestle) => trestle.manufacturerId === manufacturerId)
+    setTrestles(trestles)
+  }, [manufacturerId])
+
+  useEffect(() => {
+    if (!trestleId) {
+      return
+    }
+    console.log(roofMaterialId, trestleId)
+    get({ url: `/api/module/v1.0/modules/${roofMaterialId}/${trestleId}` }).then((res) => {
+      if (res.length === 0) {
+        return
+      }
+      setModules(res)
+    })
+  }, [trestleId])
+
+  const handleRoofMaterialOnChange = (e) => {
+    const roofMaterialId = e.target.value
+    setRoofMaterialId(roofMaterialId)
+    setManufacturers([])
+    setManufacturerId(null)
+    setTrestleId(null)
+    setTrestles([])
+    setModules([])
+  }
+
+  const handleManufacturersOnChange = (e) => {
+    const manufacturerId = Number(e.target.value)
+    setTrestles([])
+    setManufacturerId(manufacturerId)
+    setTrestleId(null)
+    setModules([])
+  }
+
+  const handleTrestlesOnChange = (e) => {
+    const trestleId = Number(e.target.value)
+    setTrestleId(trestleId)
+    setModules([])
+  }
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      {roofMaterials.length > 0 && (
+        <Select label="지붕재" className="max-w-xs" onChange={handleRoofMaterialOnChange}>
+          {roofMaterials.map((roofMaterial) => (
+            <SelectItem key={roofMaterial.id}>{roofMaterial.name}</SelectItem>
+          ))}
+        </Select>
+      )}
+      {manufacturers.length > 0 && (
+        <Select label="제조 회사" className="max-w-xs" onChange={handleManufacturersOnChange}>
+          {manufacturers.map((manufacturer) => (
+            <SelectItem key={manufacturer.id}>{manufacturer.name}</SelectItem>
+          ))}
+        </Select>
+      )}
+      {trestles.length > 0 && (
+        <Select label="가대" className="max-w-xs" onChange={handleTrestlesOnChange}>
+          {trestles.map((trestle) => (
+            <SelectItem key={trestle.id}>{trestle.name}</SelectItem>
+          ))}
+        </Select>
+      )}
+      {modules.length > 0 && (
+        <Select label="설치가능 모듈" className="max-w-xs">
+          {modules.map((module) => (
+            <SelectItem key={module.id}>{module.name}</SelectItem>
+          ))}
+        </Select>
+      )}
+    </div>
   )
 }
diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 5e5fbb6c..1acf612b 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -18,7 +18,6 @@ import { QLine } from '@/components/fabric/QLine'
 import { getCanvasState, insertCanvasState } from '@/lib/canvas'
 import { calculateIntersection } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
-import { useAxios } from '@/hooks/useAxios'
 import ThumbnailList from './ui/ThumbnailLIst'
 
 export default function Roof2() {