diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 68303710..9b7030a1 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -18,6 +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'
 
 export default function Roof2() {
   const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas')
@@ -690,6 +691,7 @@ export default function Roof2() {
           </div>
         </>
       )}
+      <ThumbnailLIst />
       <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
new file mode 100644
index 00000000..69be84d9
--- /dev/null
+++ b/src/components/ui/ThumbnailLIst.jsx
@@ -0,0 +1,3 @@
+export default function ThumbnailLIst() {
+  return <div className="flex justify-center m-4 w-full">thumbnails</div>
+}