diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 437134b..1b5412c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import ImageUpload from "./components/ImageUpload";
 import CodePreview from "./components/CodePreview";
+import Preview from "./components/Preview";
 
 function App() {
   const [referenceImages, setReferenceImages] = useState<string[]>([]);
@@ -16,13 +17,14 @@ function App() {
         />
       )}
 
-      <CodePreview content="Hello World" />
-
       {referenceImages.length === 0 && (
         <>
           <ImageUpload setReferenceImages={setReferenceImages} />
         </>
       )}
+
+      <CodePreview content="Hello World" />
+      <Preview />
     </div>
   );
 }
diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
new file mode 100644
index 0000000..5cbaf84
--- /dev/null
+++ b/frontend/src/components/Preview.tsx
@@ -0,0 +1,13 @@
+function Preview() {
+  return (
+    <div className="w-[704px]">
+      <iframe
+        title="Iframe Example"
+        srcDoc={"<h1>Hello World</h1>"}
+        className="border-[5px] border-black rounded-[33px] p-4 shadow-lg 
+        transform scale-[0.55] origin-top-left w-[1280px] h-[832px]"
+      ></iframe>
+    </div>
+  );
+}
+export default Preview;