diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 9b7030a1..1acf612b 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -18,7 +18,7 @@ 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 ThumbnailLIst from './ui/ThumbnailLIst'
+import ThumbnailList from './ui/ThumbnailLIst'
 
 export default function Roof2() {
   const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas')
@@ -50,6 +50,12 @@ export default function Roof2() {
 
   const wall = useRecoilValue(wallState)
 
+  //canvas 썸네일
+  const [thumbnails, setThumbnails] = useState([])
+  const thumbnailProps = {
+    thumbnails,
+  }
+
   const {
     mode,
     setMode,
@@ -691,7 +697,7 @@ export default function Roof2() {
           </div>
         </>
       )}
-      <ThumbnailLIst />
+      <ThumbnailList {...thumbnailProps} />
       <div className="flex justify-start my-8 mx-2 w-full">
         <canvas id="canvas" style={{ border: '1px solid black' }} />
       </div>
diff --git a/src/components/ui/ThumbnailLIst.jsx b/src/components/ui/ThumbnailLIst.jsx
index 69be84d9..a36aa16d 100644
--- a/src/components/ui/ThumbnailLIst.jsx
+++ b/src/components/ui/ThumbnailLIst.jsx
@@ -1,3 +1,20 @@
-export default function ThumbnailLIst() {
-  return <div className="flex justify-center m-4 w-full">thumbnails</div>
+import { Card, Image } from '@nextui-org/react'
+
+export default function ThumbnailList(props) {
+  const { thumbnails } = props
+  console.log(props)
+  console.log(thumbnails)
+
+  return (
+    <>
+      <div className="flex justify-center m-4 w-full">
+        {thumbnails.length > 0 &&
+          thumbnails.map((thumbnail, index) => (
+            <Card isFooterBlurred radius="lg" className="border-none m-2">
+              <Image alt="Woman listing to music" className="object-cover" height={200} src="https://nextui.org/images/hero-card.jpeg" width={200} />
+            </Card>
+          ))}
+      </div>
+    </>
+  )
 }