diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 99988fc6..9eadf99d 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -1,5 +1,6 @@
 import Topbar from "./components/Topbar";
-import Sidebar from "./components/Sidebar";
+// import Sidebar from "./components/Sidebar";
+import DataSelection from "./components/Interface"
 import { ConfigProvider } from 'antd';
 import { BrowserRouter } from 'react-router-dom'
 
@@ -14,7 +15,8 @@ const App = () => (
   >
     <BrowserRouter>
       <Topbar />
-      <Sidebar />
+      {/* <Sidebar /> */}
+      <DataSelection />
     </BrowserRouter>
   </ConfigProvider>
 );
diff --git a/ui/src/components/Interface/index.tsx b/ui/src/components/Interface/index.tsx
new file mode 100644
index 00000000..00616da2
--- /dev/null
+++ b/ui/src/components/Interface/index.tsx
@@ -0,0 +1,52 @@
+import { useState } from 'react';
+
+function DataSelection() {
+  const [url, setUrl] = useState('');
+  const [dataPoints, setDataPoints] = useState([]);
+
+  const handleUrlChange = (event: any) => {
+    setUrl(event.target.value);
+  };
+
+  const handleElementClick = (event: any) => {
+    const element = event.target;
+    const dataPointLabel = prompt('Enter data point label (e.g., Product Title)');
+    if (dataPointLabel) {
+      const newPoints:any = [...dataPoints]; // Copy existing data points
+      newPoints.push({
+        label: dataPointLabel,
+        // Capture element attributes for data extraction (e.g., ID, class)
+        attributes: {
+          id: element.id,
+          class: element.className,
+        },
+      });
+      setDataPoints(newPoints);
+    }
+  };
+
+  const handleSubmit = async () => {
+    // Send URL and dataPoints to FastAPI endpoint (explained later)
+    const response = await fetch('/api/scrape', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ url, dataPoints }),
+    });
+    // Handle response (e.g., display extracted data)
+    const data = await response.json();
+    console.log(data);
+  };
+
+  return (
+    <div>
+      <input type="text" value={url} onChange={handleUrlChange} placeholder="Enter target URL" />
+      <div style={{ cursor: 'pointer' }} onClick={handleElementClick}>
+        Select elements on the webpage...
+      </div>
+      <button onClick={handleSubmit}>Extract Data</button>
+      {/* Display selected data points and labels for confirmation */}
+    </div>
+  );
+}
+
+export default DataSelection;