diff --git a/ui/src/components/WebPreview/index.jsx b/ui/src/components/WebPreview/index.jsx
new file mode 100644
index 00000000..66d03282
--- /dev/null
+++ b/ui/src/components/WebPreview/index.jsx
@@ -0,0 +1,55 @@
+// components/WebPreview.js
+import React, { useEffect, useRef, useState } from 'react';
+import { getCssSelector } from "css-selector-generator";
+import axios from 'axios'
+
+function WebPreview({ html, setHtml, elements }) {
+  
+  const [url, setUrl] = useState(null);
+  const [isFetching, setIsFetching] = useState(false);
+
+  async function loadWebsite() {
+    try {
+        setIsFetching(true);
+        const response = await axios.post('http://localhost:3000/load-website', {
+            url: 'https://syehan-travelize.netlify.app/'
+        });
+        console.log('Response:', response.data);
+        setHtml(response.data);
+        setIsFetching(false);
+    } catch (error) {
+        console.error('Error loading website:', error);
+    }
+}
+
+  const generateCssSelector = (element) => {
+    const selector = element.nodeName.toLowerCase();
+    if (element.id) {
+      return `#${element.id}`;
+    } else {
+      const classes = Array.from(element.classList).join('.');
+      return `${selector}.${classes}`;
+    }
+  };
+
+  return (
+    <div className="border border-gray-300 p-4 mb-4">
+       <button onClick={() => loadWebsite()}  className="bg-blue-500 text-white px-4 py-2 rounded">Load Website</button>
+      <h2 className="text-lg font-semibold mb-2">Web Page Preview</h2>
+         {
+          html && html.length > 0 ? (
+            <iframe
+            srcDoc={html}
+            sandbox="allow-forms allow-scripts"
+            style={{width: "850px", height:"620px", resize: "both"}}
+        ></iframe>
+          ) :
+          (
+            <p className="text-gray-500">No website loaded</p>
+          )
+         }
+    </div>
+  );
+}
+
+export default WebPreview;