diff --git a/ui/src/components/Sidebar/index.jsx b/ui/src/components/Sidebar/index.jsx
deleted file mode 100644
index 5fe3d0e0..00000000
--- a/ui/src/components/Sidebar/index.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Layout, Menu } from "antd";
-import { Link } from "react-router-dom";
-
-const { Sider } = Layout;
-
-const Sidebar = () => {
-    return (
-        <Sider
-            className="h-screen bg-white text-gray-800 fixed top-16 left-0 flex flex-col justify-between shadow-xl"
-            width={250}
-        >
-            <div className="flex flex-col justify-between h-full mt-32">
-                <Menu mode="vertical">
-                    <Menu.Item key="1">
-                        <Link to="/bots">Bots</Link>
-                    </Menu.Item>
-                    <Menu.Item key="2">
-                        <Link to="/workflow">Workflow</Link>
-                    </Menu.Item>
-                    <Menu.Item key="3">
-                        <Link to="/analytics">Analytics</Link>
-                    </Menu.Item>
-                    <Menu.Item key="4">
-                        <Link to="/api">API</Link>
-                    </Menu.Item>
-                </Menu>
-            </div>
-        </Sider>
-    );
-};
-
-export default Sidebar;
\ No newline at end of file
diff --git a/ui/src/components/Topbar/index.jsx b/ui/src/components/Topbar/index.jsx
deleted file mode 100644
index b36068ed..00000000
--- a/ui/src/components/Topbar/index.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useState } from "react";
-import { Layout, Menu, Col, Drawer } from "antd";
-import { Link } from "react-router-dom";
-import { FaBars } from "react-icons/fa";
-
-const { Header } = Layout;
-
-const Topbar = () => {
-  const [visible, setVisible] = useState(false);
-
-  const showDrawer = () => setVisible(true);
-  const hideDrawer = () => setVisible(false);
-
-  return (
-    <Header className="flex justify-between items-center h-16 bg-white shadow-md">
-      <Col span={4} className="flex items-center">
-        <Link to="/">
-          <img src="maxun_logo.png" alt="Maxun" className="h-8 w-auto" />
-        </Link>
-      </Col>
-      <Col span={16} className="hidden lg:flex justify-end">
-        <Menu mode="horizontal">
-          <Menu.Item key="1">
-            <Link to="/dashboard">Dashboard</Link>
-          </Menu.Item>
-          <Menu.Item key="2">
-            <Link to="/credits">Credits</Link>
-          </Menu.Item>
-          <Menu.Item key="3">
-            <Link to="/profile">Profile</Link>
-          </Menu.Item>
-        </Menu>
-      </Col>
-      <Col span={4} className="lg:hidden flex justify-end">
-        <FaBars className="text-2xl text-gray-600" onClick={showDrawer} />
-      </Col>
-      <Drawer
-        title="Navigation"
-        placement="right"
-        closable={false}
-        onClose={hideDrawer}
-        open={visible}
-        getContainer={() => document.body} // Ensure the drawer covers viewport on mobile
-      >
-        <Menu mode="vertical">
-          <Menu.Item key="1">
-            <Link to="/dashboard" onClick={hideDrawer}>
-              Dashboard
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="2">
-            <Link to="/credits" onClick={hideDrawer}>Credits</Link>
-          </Menu.Item>
-          <Menu.Item key="3">
-            <Link to="/profile" onClick={hideDrawer}>Profile</Link>
-          </Menu.Item>
-        </Menu>
-      </Drawer>
-    </Header>
-  );
-};
-
-export default Topbar;
\ No newline at end of file
diff --git a/ui/src/components/WebPreview/index.jsx b/ui/src/components/WebPreview/index.jsx
deleted file mode 100644
index 28a6e905..00000000
--- a/ui/src/components/WebPreview/index.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { 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);
-    }
-  }
-
-  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 allow-same-origin allow-popups allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-top-navigation allow-top-navigation-by-user-activation"
-          style={{ width: '850px', height: '620px', resize: 'both' }}
-        ></iframe>
-      ) : (
-        <p className="text-gray-500">No website loaded</p>
-      )}
-    </div>
-  );
-}
-
-export default WebPreview;