From 1f426989af6cc23bebc7a160cd7b3cdabc4efa26 Mon Sep 17 00:00:00 2001
From: Jayden Pyles <jpylesbusiness@gmail.com>
Date: Sun, 8 Jun 2025 11:34:42 -0500
Subject: [PATCH] chore: wip ui

---
 .../advanced-job-options.tsx                  |  36 +-
 src/components/pages/home/home.tsx            |  21 +-
 .../element-table/element-table.tsx           | 381 ++++++++++--------
 .../job-submitter-header.tsx                  |  26 +-
 .../job-submitter-input.tsx                   |  47 ++-
 .../submit/job-submitter/job-submitter.tsx    |  44 +-
 .../site-map-input/site-map-input.tsx         | 103 +++--
 .../job-submitter/site-map/site-map.tsx       | 155 +++++--
 8 files changed, 521 insertions(+), 292 deletions(-)

diff --git a/src/components/common/advanced-job-options/advanced-job-options.tsx b/src/components/common/advanced-job-options/advanced-job-options.tsx
index 6156a89..f563691 100644
--- a/src/components/common/advanced-job-options/advanced-job-options.tsx
+++ b/src/components/common/advanced-job-options/advanced-job-options.tsx
@@ -1,7 +1,8 @@
-import { Box, Link, Typography } from "@mui/material";
-import { SetStateAction, Dispatch, useState } from "react";
-import { AdvancedJobOptionsDialog } from "./dialog/advanced-job-options-dialog";
 import { RawJobOptions } from "@/types";
+import SettingsIcon from "@mui/icons-material/Settings";
+import { Box, Button, Typography } from "@mui/material";
+import { Dispatch, SetStateAction, useState } from "react";
+import { AdvancedJobOptionsDialog } from "./dialog/advanced-job-options-dialog";
 
 export type AdvancedJobOptionsProps = {
   jobOptions: RawJobOptions;
@@ -17,26 +18,27 @@ export const AdvancedJobOptions = ({
   const [open, setOpen] = useState(false);
 
   return (
-    <Box sx={{ mb: 2 }}>
-      <Link
-        component="button"
-        variant="body2"
+    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+      <Button
+        variant="outlined"
         onClick={() => setOpen(true)}
+        startIcon={<SettingsIcon />}
         sx={{
-          textDecoration: "none",
-          color: "primary.main",
+          textTransform: "none",
+          borderRadius: 2,
+          px: 2,
+          py: 1,
+          borderColor: "divider",
+          color: "text.secondary",
           "&:hover": {
-            color: "primary.dark",
-            textDecoration: "underline",
+            borderColor: "primary.main",
+            color: "primary.main",
+            bgcolor: "action.hover",
           },
-          paddingLeft: 1,
-          display: "inline-flex",
-          alignItems: "center",
-          gap: 0.5,
         }}
       >
-        <Typography variant="body2">Advanced Job Options</Typography>
-      </Link>
+        <Typography variant="body2">Advanced Options</Typography>
+      </Button>
 
       <AdvancedJobOptionsDialog
         open={open}
diff --git a/src/components/pages/home/home.tsx b/src/components/pages/home/home.tsx
index 8b33cd3..7d6b92e 100644
--- a/src/components/pages/home/home.tsx
+++ b/src/components/pages/home/home.tsx
@@ -1,14 +1,14 @@
 "use client";
 
-import React, { useEffect, useRef } from "react";
-import { Container, Box } from "@mui/material";
-import { useRouter } from "next/router";
-import { ElementTable, JobSubmitter } from "@/components/submit/job-submitter";
-import { useJobSubmitterProvider } from "@/components/submit/job-submitter/provider";
 import {
   ErrorSnackbar,
   JobNotifySnackbar,
 } from "@/components/common/snackbars";
+import { ElementTable, JobSubmitter } from "@/components/submit/job-submitter";
+import { useJobSubmitterProvider } from "@/components/submit/job-submitter/provider";
+import { Box, Container } from "@mui/material";
+import { useRouter } from "next/router";
+import { useEffect, useRef } from "react";
 
 export const Home = () => {
   const {
@@ -50,19 +50,18 @@ export const Home = () => {
       flexDirection="column"
       justifyContent="center"
       alignItems="center"
-      height="100%"
+      minHeight="100vh"
       py={4}
     >
-      <Container maxWidth="lg" className="overflow-y-auto max-h-full">
-        <JobSubmitter />
-
-        {submittedURL.length > 0 ? (
+      <Container maxWidth="lg" className="overflow-y-auto">
+        <Box className="flex flex-col gap-6">
+          <JobSubmitter />
           <ElementTable
             rows={rows}
             setRows={setRows}
             submittedURL={submittedURL}
           />
-        ) : null}
+        </Box>
       </Container>
 
       {snackbarSeverity === "info" ? (
diff --git a/src/components/submit/job-submitter/element-table/element-table.tsx b/src/components/submit/job-submitter/element-table/element-table.tsx
index 6e038f4..bc41c97 100644
--- a/src/components/submit/job-submitter/element-table/element-table.tsx
+++ b/src/components/submit/job-submitter/element-table/element-table.tsx
@@ -2,11 +2,12 @@
 
 import { Element } from "@/types";
 import AddIcon from "@mui/icons-material/Add";
+import DeleteIcon from "@mui/icons-material/Delete";
 import {
   Box,
-  Button,
   Divider,
   IconButton,
+  Paper,
   Table,
   TableBody,
   TableCell,
@@ -40,196 +41,224 @@ export const ElementTable = ({ rows, setRows, submittedURL }: Props) => {
   };
 
   const handleDeleteRow = (elementName: string) => {
-    setRows(
-      rows.filter((r) => {
-        return elementName !== r.name;
-      })
-    );
+    setRows(rows.filter((r) => elementName !== r.name));
   };
 
   return (
-    <Box
-      className="animate-fadeIn"
-      bgcolor="background.paper"
+    <Paper
+      elevation={0}
       sx={{
+        p: 4,
         borderRadius: 2,
-        boxShadow: 1,
-        p: 3,
-        mb: 4,
+        bgcolor: "background.paper",
+        border: 1,
+        borderColor: "divider",
+        transition: "all 0.3s ease-in-out",
+        "&:hover": {
+          boxShadow: "0 4px 20px rgba(0, 0, 0, 0.05)",
+        },
       }}
     >
-      <Typography
-        variant="h5"
-        sx={{
-          mb: 3,
-          fontWeight: 600,
-          color: "text.primary",
-        }}
-      >
-        Elements to Scrape
-      </Typography>
-      <TableContainer
-        component={Box}
-        sx={{
-          maxHeight: "400px",
-          overflow: "auto",
-          borderRadius: 1,
-          border: 1,
-          borderColor: "divider",
-        }}
-      >
-        <Table
-          stickyHeader
-          size="small"
-          sx={{
-            tableLayout: "fixed",
-            width: "100%",
-            "& .MuiTableCell-root": {
-              borderBottom: "1px solid",
-              borderColor: "divider",
-              py: 1.5,
-            },
-            "& .MuiTableCell-head": {
-              bgcolor: "background.default",
+      <Box className="flex flex-col gap-6">
+        <Box>
+          <Typography
+            variant="h5"
+            sx={{
               fontWeight: 600,
-            },
+              color: "text.primary",
+              mb: 1,
+            }}
+          >
+            Elements to Scrape
+          </Typography>
+          <Typography
+            variant="body2"
+            sx={{
+              color: "text.secondary",
+            }}
+          >
+            Add elements to scrape from the target URL using XPath selectors
+          </Typography>
+        </Box>
+
+        <TableContainer
+          component={Box}
+          sx={{
+            maxHeight: "400px",
+            overflow: "auto",
+            borderRadius: 2,
+            border: 1,
+            borderColor: "divider",
           }}
         >
-          <TableHead>
-            <TableRow>
-              <TableCell width="30%">Name</TableCell>
-              <TableCell width="50%">XPath</TableCell>
-              <TableCell width="20%" align="center">
-                Actions
-              </TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            <TableRow>
-              <TableCell>
-                <TextField
-                  data-cy="name-field"
-                  placeholder="Enter element name"
-                  variant="outlined"
-                  fullWidth
-                  size="small"
-                  value={newRow.name}
-                  onChange={(e) =>
-                    setNewRow({ ...newRow, name: e.target.value })
-                  }
-                  sx={{
-                    "& .MuiOutlinedInput-root": {
-                      bgcolor: "background.default",
-                    },
-                  }}
-                />
-              </TableCell>
-              <TableCell>
-                <TextField
-                  data-cy="xpath-field"
-                  placeholder="Enter XPath selector"
-                  variant="outlined"
-                  fullWidth
-                  size="small"
-                  value={newRow.xpath}
-                  onChange={(e) =>
-                    setNewRow({ ...newRow, xpath: e.target.value })
-                  }
-                  sx={{
-                    "& .MuiOutlinedInput-root": {
-                      bgcolor: "background.default",
-                    },
-                  }}
-                />
-              </TableCell>
-              <TableCell align="center">
-                <Tooltip
-                  title={
-                    newRow.xpath.length > 0 && newRow.name.length > 0
-                      ? "Add Element"
-                      : "Fill out all fields to add an element"
-                  }
-                  placement="top"
-                >
-                  <span>
-                    <IconButton
-                      data-cy="add-button"
-                      aria-label="add"
-                      size="small"
-                      onClick={handleAddRow}
-                      disabled={
-                        !(newRow.xpath.length > 0 && newRow.name.length > 0)
-                      }
-                      sx={{
-                        bgcolor: "primary.main",
-                        color: "primary.contrastText",
+          <Table
+            stickyHeader
+            size="small"
+            sx={{
+              "& .MuiTableCell-root": {
+                borderBottom: "1px solid",
+                borderColor: "divider",
+                py: 1.5,
+              },
+              "& .MuiTableCell-head": {
+                bgcolor: "background.default",
+                fontWeight: 600,
+              },
+            }}
+          >
+            <TableHead>
+              <TableRow>
+                <TableCell width="30%">Name</TableCell>
+                <TableCell width="50%">XPath</TableCell>
+                <TableCell width="20%" align="center">
+                  Actions
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <TableRow>
+                <TableCell>
+                  <TextField
+                    data-cy="name-field"
+                    placeholder="Enter element name"
+                    variant="outlined"
+                    fullWidth
+                    size="small"
+                    value={newRow.name}
+                    onChange={(e) =>
+                      setNewRow({ ...newRow, name: e.target.value })
+                    }
+                    sx={{
+                      "& .MuiOutlinedInput-root": {
+                        borderRadius: 2,
+                        bgcolor: "background.default",
+                        transition: "all 0.2s ease-in-out",
                         "&:hover": {
-                          bgcolor: "primary.dark",
+                          "& .MuiOutlinedInput-notchedOutline": {
+                            borderColor: "primary.main",
+                          },
                         },
-                        "&.Mui-disabled": {
-                          bgcolor: "action.disabledBackground",
-                          color: "action.disabled",
+                      },
+                    }}
+                  />
+                </TableCell>
+                <TableCell>
+                  <TextField
+                    data-cy="xpath-field"
+                    placeholder="Enter XPath selector"
+                    variant="outlined"
+                    fullWidth
+                    size="small"
+                    value={newRow.xpath}
+                    onChange={(e) =>
+                      setNewRow({ ...newRow, xpath: e.target.value })
+                    }
+                    sx={{
+                      "& .MuiOutlinedInput-root": {
+                        borderRadius: 2,
+                        bgcolor: "background.default",
+                        transition: "all 0.2s ease-in-out",
+                        "&:hover": {
+                          "& .MuiOutlinedInput-notchedOutline": {
+                            borderColor: "primary.main",
+                          },
+                        },
+                      },
+                    }}
+                  />
+                </TableCell>
+                <TableCell align="center">
+                  <Tooltip
+                    title={
+                      newRow.xpath.length > 0 && newRow.name.length > 0
+                        ? "Add Element"
+                        : "Fill out all fields to add an element"
+                    }
+                    placement="top"
+                  >
+                    <span>
+                      <IconButton
+                        data-cy="add-button"
+                        aria-label="add"
+                        size="small"
+                        onClick={handleAddRow}
+                        disabled={
+                          !(newRow.xpath.length > 0 && newRow.name.length > 0)
+                        }
+                        sx={{
+                          bgcolor: "primary.main",
+                          color: "primary.contrastText",
+                          borderRadius: 2,
+                          transition: "all 0.2s ease-in-out",
+                          "&:hover": {
+                            bgcolor: "primary.dark",
+                            transform: "translateY(-1px)",
+                          },
+                          "&.Mui-disabled": {
+                            bgcolor: "action.disabledBackground",
+                            color: "action.disabled",
+                          },
+                        }}
+                      >
+                        <AddIcon fontSize="small" />
+                      </IconButton>
+                    </span>
+                  </Tooltip>
+                </TableCell>
+              </TableRow>
+              {rows.map((row, index) => (
+                <TableRow
+                  key={index}
+                  sx={{
+                    "&:hover": {
+                      bgcolor: "action.hover",
+                    },
+                  }}
+                >
+                  <TableCell>
+                    <Typography variant="body2" noWrap>
+                      {row.name}
+                    </Typography>
+                  </TableCell>
+                  <TableCell>
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        fontFamily: "monospace",
+                        fontSize: "0.875rem",
+                        color: "text.secondary",
+                      }}
+                      noWrap
+                    >
+                      {row.xpath}
+                    </Typography>
+                  </TableCell>
+                  <TableCell align="center">
+                    <IconButton
+                      onClick={() => handleDeleteRow(row.name)}
+                      size="small"
+                      color="error"
+                      sx={{
+                        transition: "all 0.2s ease-in-out",
+                        "&:hover": {
+                          bgcolor: "error.main",
+                          color: "error.contrastText",
+                          transform: "translateY(-1px)",
                         },
                       }}
                     >
-                      <AddIcon fontSize="small" />
+                      <DeleteIcon fontSize="small" />
                     </IconButton>
-                  </span>
-                </Tooltip>
-              </TableCell>
-            </TableRow>
-            {rows.map((row, index) => (
-              <TableRow
-                key={index}
-                sx={{
-                  "&:hover": {
-                    bgcolor: "action.hover",
-                  },
-                }}
-              >
-                <TableCell>
-                  <Typography variant="body2" noWrap>
-                    {row.name}
-                  </Typography>
-                </TableCell>
-                <TableCell>
-                  <Typography
-                    variant="body2"
-                    sx={{
-                      fontFamily: "monospace",
-                      fontSize: "0.875rem",
-                      color: "text.secondary",
-                    }}
-                    noWrap
-                  >
-                    {row.xpath}
-                  </Typography>
-                </TableCell>
-                <TableCell align="center">
-                  <Button
-                    onClick={() => handleDeleteRow(row.name)}
-                    size="small"
-                    variant="outlined"
-                    color="error"
-                    sx={{
-                      minWidth: "80px",
-                      textTransform: "none",
-                      "&:hover": {
-                        bgcolor: "error.main",
-                        color: "error.contrastText",
-                      },
-                    }}
-                  >
-                    Delete
-                  </Button>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-      <Divider sx={{ my: 3 }} />
-      <SiteMap />
-    </Box>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+
+        <Divider sx={{ my: 2 }} />
+        <SiteMap />
+      </Box>
+    </Paper>
   );
 };
diff --git a/src/components/submit/job-submitter/job-submitter-header/job-submitter-header.tsx b/src/components/submit/job-submitter/job-submitter-header/job-submitter-header.tsx
index 7a2fc87..85c897d 100644
--- a/src/components/submit/job-submitter/job-submitter-header/job-submitter-header.tsx
+++ b/src/components/submit/job-submitter/job-submitter-header/job-submitter-header.tsx
@@ -1,6 +1,5 @@
+import { Box, Typography } from "@mui/material";
 import React, { ReactNode } from "react";
-import { Typography } from "@mui/material";
-import classes from "./job-submitter-header.module.css";
 
 interface JobSubmitterHeaderProps {
   title?: string;
@@ -8,13 +7,26 @@ interface JobSubmitterHeaderProps {
 }
 
 export const JobSubmitterHeader: React.FC<JobSubmitterHeaderProps> = ({
-  title = "Scraping Made Easy",
+  title = "Scrape Webpage",
   children,
 }) => {
   return (
-    <div className={classes.jobSubmitterHeader}>
-      <Typography variant="h3">{title}</Typography>
-      {children}
-    </div>
+    <Box
+      sx={{
+        textAlign: "left",
+        mb: 1,
+      }}
+    >
+      <Typography
+        variant="h4"
+        sx={{
+          fontWeight: 600,
+          color: "text.primary",
+          mb: 1,
+        }}
+      >
+        {title}
+      </Typography>
+    </Box>
   );
 };
diff --git a/src/components/submit/job-submitter/job-submitter-input/job-submitter-input.tsx b/src/components/submit/job-submitter/job-submitter-input/job-submitter-input.tsx
index 28e874d..c12c0bd 100644
--- a/src/components/submit/job-submitter/job-submitter-input/job-submitter-input.tsx
+++ b/src/components/submit/job-submitter/job-submitter-input/job-submitter-input.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { TextField, Button, CircularProgress } from "@mui/material";
+import { Box, Button, CircularProgress, TextField } from "@mui/material";
 import { useJobSubmitterProvider } from "../provider";
 
 export type JobSubmitterInputProps = {
@@ -17,7 +16,14 @@ export const JobSubmitterInput = ({
     useJobSubmitterProvider();
 
   return (
-    <div className="flex flex-row space-x-4 items-center mb-2">
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: { xs: "column", sm: "row" },
+        gap: 2,
+        alignItems: { xs: "stretch", sm: "center" },
+      }}
+    >
       <TextField
         data-cy="url-input"
         label="URL"
@@ -27,19 +33,44 @@ export const JobSubmitterInput = ({
         onChange={(e) => setSubmittedURL(e.target.value)}
         error={!isValidURL}
         helperText={!isValidURL ? urlError : ""}
-        className="rounded-md"
+        sx={{
+          "& .MuiOutlinedInput-root": {
+            borderRadius: 2,
+            transition: "all 0.2s ease-in-out",
+            "&:hover": {
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderColor: "primary.main",
+              },
+            },
+          },
+        }}
       />
       <Button
         data-cy="submit-button"
         variant="contained"
-        size="small"
+        size="large"
         onClick={handleSubmit}
         disabled={!(rows.length > 0) || loading}
-        className={`bg-[#034efc] text-white font-semibold rounded-md 
-                    transition-transform transform hover:scale-105 disabled:opacity-50`}
+        sx={{
+          minWidth: { xs: "100%", sm: 120 },
+          height: { xs: 48, sm: 56 },
+          borderRadius: 2,
+          textTransform: "none",
+          fontSize: "1rem",
+          fontWeight: 500,
+          transition: "all 0.2s ease-in-out",
+          "&:hover": {
+            transform: "translateY(-1px)",
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+          },
+          "&:disabled": {
+            transform: "none",
+            boxShadow: "none",
+          },
+        }}
       >
         {loading ? <CircularProgress size={24} color="inherit" /> : "Submit"}
       </Button>
-    </div>
+    </Box>
   );
 };
diff --git a/src/components/submit/job-submitter/job-submitter.tsx b/src/components/submit/job-submitter/job-submitter.tsx
index f52ffce..56c6edf 100644
--- a/src/components/submit/job-submitter/job-submitter.tsx
+++ b/src/components/submit/job-submitter/job-submitter.tsx
@@ -4,6 +4,7 @@ import { AdvancedJobOptions } from "@/components/common/advanced-job-options";
 import { useSubmitJob } from "@/hooks/use-submit-job";
 import { parseJobOptions } from "@/lib";
 import { useUser } from "@/store/hooks";
+import { Box, Fade, Paper } from "@mui/material";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { JobSubmitterHeader } from "./job-submitter-header";
@@ -35,17 +36,36 @@ export const JobSubmitter = () => {
   }, [jobOptions]);
 
   return (
-    <div>
-      <JobSubmitterHeader />
-      <JobSubmitterInput
-        urlError={error}
-        handleSubmit={handleSubmit}
-        loading={loading}
-      />
-      <AdvancedJobOptions
-        jobOptions={jobOptions}
-        setJobOptions={setJobOptions}
-      />
-    </div>
+    <Fade in timeout={500}>
+      <Paper
+        elevation={0}
+        sx={{
+          p: 4,
+          borderRadius: 2,
+          bgcolor: "background.paper",
+          border: 1,
+          borderColor: "divider",
+          transition: "all 0.3s ease-in-out",
+          "&:hover": {
+            boxShadow: "0 4px 20px rgba(0, 0, 0, 0.05)",
+          },
+        }}
+      >
+        <Box className="flex flex-col gap-6">
+          <JobSubmitterHeader />
+          <Box className="flex flex-col gap-4">
+            <JobSubmitterInput
+              urlError={error}
+              handleSubmit={handleSubmit}
+              loading={loading}
+            />
+            <AdvancedJobOptions
+              jobOptions={jobOptions}
+              setJobOptions={setJobOptions}
+            />
+          </Box>
+        </Box>
+      </Paper>
+    </Fade>
   );
 };
diff --git a/src/components/submit/job-submitter/site-map/site-map-input/site-map-input.tsx b/src/components/submit/job-submitter/site-map/site-map-input/site-map-input.tsx
index 43195bd..94f0487 100644
--- a/src/components/submit/job-submitter/site-map/site-map-input/site-map-input.tsx
+++ b/src/components/submit/job-submitter/site-map/site-map-input/site-map-input.tsx
@@ -1,17 +1,17 @@
-import { useState } from "react";
-import { useJobSubmitterProvider } from "../../provider";
+import { ActionOption } from "@/types/job";
 import {
+  Box,
+  Button,
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  InputLabel,
   MenuItem,
   Select,
   TextField,
-  FormControl,
-  Button,
-  Checkbox,
-  FormControlLabel,
 } from "@mui/material";
-import { ActionOption } from "@/types/job";
-import classes from "./site-map-input.module.css";
-import { clsx } from "clsx";
+import { useState } from "react";
+import { useJobSubmitterProvider } from "../../provider";
 
 export type SiteMapInputProps = {
   disabled?: boolean;
@@ -28,7 +28,6 @@ export const SiteMapInput = ({
   clickOnce,
   input,
 }: SiteMapInputProps) => {
-  console.log(clickOnce);
   const [optionState, setOptionState] = useState<ActionOption>(
     option || "click"
   );
@@ -43,8 +42,6 @@ export const SiteMapInput = ({
   const handleAdd = () => {
     if (!siteMap) return;
 
-    console.log(optionState, xpathState, clickOnceState, inputState);
-
     setSiteMap((prevSiteMap) => ({
       ...prevSiteMap,
       actions: [
@@ -60,6 +57,7 @@ export const SiteMapInput = ({
     }));
 
     setXpathState("");
+    setInputState("");
   };
 
   const handleRemove = () => {
@@ -72,14 +70,22 @@ export const SiteMapInput = ({
   };
 
   return (
-    <div className="flex flex-col gap-2 w-full">
-      <div className="flex gap-2 items-center">
-        <FormControl className="w-1/4">
+    <Box
+      sx={{ display: "flex", flexDirection: "column", gap: 2, width: "100%" }}
+    >
+      <Box sx={{ display: "flex", gap: 2, alignItems: "center" }}>
+        <FormControl size="small" sx={{ minWidth: 120 }}>
+          <InputLabel>Action Type</InputLabel>
           <Select
             disabled={disabled}
-            displayEmpty
             value={optionState}
+            label="Action Type"
             onChange={(e) => setOptionState(e.target.value as ActionOption)}
+            sx={{
+              "& .MuiSelect-select": {
+                textTransform: "capitalize",
+              },
+            }}
           >
             <MenuItem value="click">Click</MenuItem>
             <MenuItem value="input">Input</MenuItem>
@@ -88,23 +94,49 @@ export const SiteMapInput = ({
         {optionState === "input" && (
           <TextField
             label="Input Text"
+            size="small"
             fullWidth
             value={inputState}
             onChange={(e) => setInputState(e.target.value)}
             disabled={disabled}
+            sx={{
+              "& .MuiOutlinedInput-root": {
+                bgcolor: "background.default",
+              },
+            }}
+          />
+        )}
+        {!disabled && (
+          <TextField
+            label="XPath Selector"
+            size="small"
+            fullWidth
+            value={xpathState}
+            onChange={(e) => setXpathState(e.target.value)}
+            disabled={disabled}
+            sx={{
+              "& .MuiOutlinedInput-root": {
+                bgcolor: "background.default",
+                fontFamily: "monospace",
+                fontSize: "1rem",
+              },
+            }}
           />
         )}
-        <TextField
-          label="XPath Selector"
-          fullWidth
-          value={xpathState}
-          onChange={(e) => setXpathState(e.target.value)}
-          disabled={disabled}
-        />
         {disabled ? (
           <Button
             onClick={handleRemove}
-            className={clsx(classes.button, classes.remove)}
+            size="small"
+            variant="outlined"
+            color="error"
+            sx={{
+              minWidth: "80px",
+              textTransform: "none",
+              "&:hover": {
+                bgcolor: "error.main",
+                color: "error.contrastText",
+              },
+            }}
           >
             Delete
           </Button>
@@ -112,24 +144,41 @@ export const SiteMapInput = ({
           <Button
             onClick={handleAdd}
             disabled={!xpathState}
-            className={clsx(classes.button, classes.add)}
+            size="small"
+            variant="contained"
+            color="primary"
+            sx={{
+              minWidth: "80px",
+              textTransform: "none",
+              "&.Mui-disabled": {
+                bgcolor: "action.disabledBackground",
+                color: "action.disabled",
+              },
+            }}
           >
             Add
           </Button>
         )}
-      </div>
+      </Box>
       {!disabled && (
         <FormControlLabel
           label="Do Once"
           control={
             <Checkbox
+              size="small"
               checked={clickOnceState}
               disabled={disabled}
               onChange={() => setClickOnceState(!clickOnceState)}
             />
           }
+          sx={{
+            "& .MuiFormControlLabel-label": {
+              fontSize: "0.875rem",
+              color: "text.secondary",
+            },
+          }}
         />
       )}
-    </div>
+    </Box>
   );
 };
diff --git a/src/components/submit/job-submitter/site-map/site-map.tsx b/src/components/submit/job-submitter/site-map/site-map.tsx
index d301edf..bf0aa9b 100644
--- a/src/components/submit/job-submitter/site-map/site-map.tsx
+++ b/src/components/submit/job-submitter/site-map/site-map.tsx
@@ -1,12 +1,22 @@
+import {
+  Box,
+  Button,
+  Divider,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
 import { useEffect, useState } from "react";
 import { useJobSubmitterProvider } from "../provider";
-import { Button, Divider, Typography, useTheme } from "@mui/material";
 import { SiteMapInput } from "./site-map-input";
 
 export const SiteMap = () => {
   const { siteMap, setSiteMap } = useJobSubmitterProvider();
   const [showSiteMap, setShowSiteMap] = useState<boolean>(false);
-  const theme = useTheme();
 
   const handleCreateSiteMap = () => {
     setSiteMap({ actions: [] });
@@ -25,46 +35,123 @@ export const SiteMap = () => {
   }, [siteMap]);
 
   return (
-    <div className="flex flex-col gap-4">
-      {siteMap ? (
-        <Button onClick={handleClearSiteMap}>Clear Site Map</Button>
+    <Box className="flex flex-col gap-4">
+      {!siteMap ? (
+        <Button
+          onClick={handleCreateSiteMap}
+          variant="contained"
+          color="primary"
+          sx={{
+            alignSelf: "flex-end",
+            textTransform: "none",
+          }}
+        >
+          Create Site Map
+        </Button>
       ) : (
-        <Button onClick={handleCreateSiteMap}>Create Site Map</Button>
-      )}
-      {showSiteMap && (
-        <div className="flex flex-col gap-4">
+        <Box className="flex flex-col gap-4">
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <Typography variant="h6" sx={{ fontWeight: 500 }}>
+              Site Map Configuration
+            </Typography>
+            <Button
+              onClick={handleClearSiteMap}
+              variant="outlined"
+              color="error"
+              size="small"
+              sx={{
+                textTransform: "none",
+                "&:hover": {
+                  bgcolor: "error.main",
+                  color: "error.contrastText",
+                },
+              }}
+            >
+              Clear Site Map
+            </Button>
+          </Box>
           <SiteMapInput />
           {siteMap?.actions && siteMap?.actions.length > 0 && (
             <>
-              <Divider
+              <Divider />
+              <TableContainer
                 sx={{
-                  borderColor:
-                    theme.palette.mode === "dark" ? "#ffffff" : "0000000",
+                  maxHeight: "400px",
+                  overflow: "auto",
+                  borderRadius: 1,
+                  border: 1,
+                  borderColor: "divider",
                 }}
-              />
-              <Typography className="w-full text-center" variant="h5">
-                Site Map Actions
-              </Typography>
+              >
+                <Table size="small" stickyHeader>
+                  <TableHead>
+                    <TableRow>
+                      <TableCell width="10%">
+                        <Typography sx={{ fontWeight: 600 }}>Action</Typography>
+                      </TableCell>
+                      <TableCell width="30%">
+                        <Typography sx={{ fontWeight: 600 }}>Type</Typography>
+                      </TableCell>
+                      <TableCell width="40%">
+                        <Typography sx={{ fontWeight: 600 }}>XPath</Typography>
+                      </TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {siteMap?.actions.reverse().map((action, index) => (
+                      <TableRow
+                        key={action.xpath}
+                        sx={{
+                          "&:hover": {
+                            bgcolor: "action.hover",
+                          },
+                        }}
+                      >
+                        <TableCell>
+                          <Typography variant="body2">{index + 1}</Typography>
+                        </TableCell>
+                        <TableCell>
+                          <Typography
+                            variant="body2"
+                            sx={{
+                              color:
+                                action.type === "click"
+                                  ? "primary.main"
+                                  : "warning.main",
+                              fontWeight: 500,
+                            }}
+                          >
+                            {action.type}
+                          </Typography>
+                        </TableCell>
+                        <TableCell>
+                          <Typography
+                            variant="body2"
+                            sx={{
+                              fontFamily: "monospace",
+                              fontSize: "0.875rem",
+                              color: "text.secondary",
+                            }}
+                            noWrap
+                          >
+                            {action.xpath}
+                          </Typography>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
             </>
           )}
-          <ul className="flex flex-col gap-4">
-            {siteMap?.actions.reverse().map((action, index) => (
-              <li key={action.xpath} className="flex w-full items-center">
-                <Typography variant="h6" className="w-[10%] mr-2">
-                  Action {index + 1}:
-                </Typography>
-                <SiteMapInput
-                  disabled={Boolean(siteMap)}
-                  xpath={action.xpath}
-                  option={action.type}
-                  clickOnce={action.do_once}
-                  input={action.input}
-                />
-              </li>
-            ))}
-          </ul>
-        </div>
+        </Box>
       )}
-    </div>
+    </Box>
   );
 };