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 bc41c97..7a08aed 100644
--- a/src/components/submit/job-submitter/element-table/element-table.tsx
+++ b/src/components/submit/job-submitter/element-table/element-table.tsx
@@ -53,7 +53,6 @@ export const ElementTable = ({ rows, setRows, submittedURL }: Props) => {
         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)",
         },
@@ -132,7 +131,6 @@ export const ElementTable = ({ rows, setRows, submittedURL }: Props) => {
                       "& .MuiOutlinedInput-root": {
                         borderRadius: 2,
                         bgcolor: "background.default",
-                        transition: "all 0.2s ease-in-out",
                         "&:hover": {
                           "& .MuiOutlinedInput-notchedOutline": {
                             borderColor: "primary.main",
@@ -157,7 +155,6 @@ export const ElementTable = ({ rows, setRows, submittedURL }: Props) => {
                       "& .MuiOutlinedInput-root": {
                         borderRadius: 2,
                         bgcolor: "background.default",
-                        transition: "all 0.2s ease-in-out",
                         "&:hover": {
                           "& .MuiOutlinedInput-notchedOutline": {
                             borderColor: "primary.main",
@@ -189,7 +186,6 @@ export const ElementTable = ({ rows, setRows, submittedURL }: Props) => {
                           bgcolor: "primary.main",
                           color: "primary.contrastText",
                           borderRadius: 2,
-                          transition: "all 0.2s ease-in-out",
                           "&:hover": {
                             bgcolor: "primary.dark",
                             transform: "translateY(-1px)",
@@ -239,7 +235,6 @@ export const ElementTable = ({ rows, setRows, submittedURL }: Props) => {
                       size="small"
                       color="error"
                       sx={{
-                        transition: "all 0.2s ease-in-out",
                         "&:hover": {
                           bgcolor: "error.main",
                           color: "error.contrastText",
diff --git a/src/components/submit/job-submitter/job-submitter-header/job-submitter-header.module.css b/src/components/submit/job-submitter/job-submitter-header/job-submitter-header.module.css
index 89762a2..7bd179e 100644
--- a/src/components/submit/job-submitter/job-submitter-header/job-submitter-header.module.css
+++ b/src/components/submit/job-submitter/job-submitter-header/job-submitter-header.module.css
@@ -2,3 +2,14 @@
   margin-bottom: 1rem;
   text-align: center;
 }
+
+.container {
+  text-align: left;
+  margin-bottom: 8px;
+}
+
+.title {
+  font-weight: 600;
+  color: var(--mui-palette-text-primary);
+  margin-bottom: 8px;
+}
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 85c897d..76f47db 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,5 +1,6 @@
 import { Box, Typography } from "@mui/material";
 import React, { ReactNode } from "react";
+import styles from "./job-submitter-header.module.css";
 
 interface JobSubmitterHeaderProps {
   title?: string;
@@ -11,22 +12,11 @@ export const JobSubmitterHeader: React.FC<JobSubmitterHeaderProps> = ({
   children,
 }) => {
   return (
-    <Box
-      sx={{
-        textAlign: "left",
-        mb: 1,
-      }}
-    >
-      <Typography
-        variant="h4"
-        sx={{
-          fontWeight: 600,
-          color: "text.primary",
-          mb: 1,
-        }}
-      >
+    <Box className={styles.container}>
+      <Typography variant="h4" className={styles.title}>
         {title}
       </Typography>
+      {children}
     </Box>
   );
 };
diff --git a/src/components/submit/job-submitter/job-submitter-input/job-submitter-input.module.css b/src/components/submit/job-submitter/job-submitter-input/job-submitter-input.module.css
index e69de29..18b3cc0 100644
--- a/src/components/submit/job-submitter/job-submitter-input/job-submitter-input.module.css
+++ b/src/components/submit/job-submitter/job-submitter-input/job-submitter-input.module.css
@@ -0,0 +1,52 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: stretch;
+}
+
+@media (min-width: 600px) {
+  .container {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.input {
+  width: 100%;
+}
+
+.input :global(.MuiOutlinedInput-root) {
+  border-radius: 16px;
+  transition: all 0.2s ease-in-out;
+}
+
+.input
+  :global(.MuiOutlinedInput-root:hover)
+  :global(.MuiOutlinedInput-notchedOutline) {
+  border-color: var(--mui-palette-primary-main);
+}
+
+.submitButton {
+  height: 48px !important;
+  border-radius: 16px;
+  font-size: 1rem !important;
+  font-weight: 500 !important;
+}
+
+.submitButton:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.submitButton:disabled {
+  transform: none;
+  box-shadow: none;
+}
+
+@media (min-width: 600px) {
+  .submitButton {
+    min-width: 120px;
+    height: 56px;
+  }
+}
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 c12c0bd..614a47a 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,6 @@
 import { Box, Button, CircularProgress, TextField } from "@mui/material";
 import { useJobSubmitterProvider } from "../provider";
+import styles from "./job-submitter-input.module.css";
 
 export type JobSubmitterInputProps = {
   urlError: string | null;
@@ -16,14 +17,7 @@ export const JobSubmitterInput = ({
     useJobSubmitterProvider();
 
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: { xs: "column", sm: "row" },
-        gap: 2,
-        alignItems: { xs: "stretch", sm: "center" },
-      }}
-    >
+    <Box className={styles.container}>
       <TextField
         data-cy="url-input"
         label="URL"
@@ -33,17 +27,7 @@ export const JobSubmitterInput = ({
         onChange={(e) => setSubmittedURL(e.target.value)}
         error={!isValidURL}
         helperText={!isValidURL ? urlError : ""}
-        sx={{
-          "& .MuiOutlinedInput-root": {
-            borderRadius: 2,
-            transition: "all 0.2s ease-in-out",
-            "&:hover": {
-              "& .MuiOutlinedInput-notchedOutline": {
-                borderColor: "primary.main",
-              },
-            },
-          },
-        }}
+        className={styles.input}
       />
       <Button
         data-cy="submit-button"
@@ -51,23 +35,7 @@ export const JobSubmitterInput = ({
         size="large"
         onClick={handleSubmit}
         disabled={!(rows.length > 0) || loading}
-        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",
-          },
-        }}
+        className={styles.submitButton}
       >
         {loading ? <CircularProgress size={24} color="inherit" /> : "Submit"}
       </Button>
diff --git a/src/components/submit/job-submitter/job-submitter.tsx b/src/components/submit/job-submitter/job-submitter.tsx
index 56c6edf..0d3d845 100644
--- a/src/components/submit/job-submitter/job-submitter.tsx
+++ b/src/components/submit/job-submitter/job-submitter.tsx
@@ -4,7 +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 { Box, Paper } from "@mui/material";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { JobSubmitterHeader } from "./job-submitter-header";
@@ -30,42 +30,34 @@ export const JobSubmitter = () => {
     await submitJob(submittedURL, rows, user, jobOptions, siteMap, false, null);
   };
 
-  console.log(jobOptions);
-  useEffect(() => {
-    console.log(jobOptions);
-  }, [jobOptions]);
-
   return (
-    <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>
+    <Paper
+      elevation={0}
+      sx={{
+        p: 4,
+        borderRadius: 2,
+        bgcolor: "background.paper",
+        border: 1,
+        borderColor: "divider",
+        "&: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>
-      </Paper>
-    </Fade>
+      </Box>
+    </Paper>
   );
 };