diff --git a/frontend/package.json b/frontend/package.json
index ba917dcc9..ba320d797 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,11 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
+    "@fortawesome/fontawesome-free": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.9.3",
     "@mui/x-data-grid": "^6.0.4",
diff --git a/frontend/src/common/components/Footer.tsx b/frontend/src/common/components/Footer.tsx
index c1a07eb61..10c7489df 100644
--- a/frontend/src/common/components/Footer.tsx
+++ b/frontend/src/common/components/Footer.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import { COLORS, URLs } from "../../constants";
 import { LinkedIn, YouTube, Instagram, GitHub } from "@mui/icons-material";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faReact } from "@fortawesome/free-brands-svg-icons";
 
 const theme = createTheme({
   components: {
@@ -9,7 +11,7 @@ const theme = createTheme({
       styleOverrides: {
         root: {
           fontSize: 40,
-          color: COLORS.dark_blue
+          color: COLORS.dark_blue,
         },
       },
     },
@@ -18,55 +20,38 @@ const theme = createTheme({
 
 const Footer = () => {
   return (
-    <div id="footer" data-testid="footer">
+    <div id='footer' data-testid='footer'>
       <ThemeProvider theme={theme}>
-        <div
-          className="footer-element"
-          id="footer-socials"
-          data-testid="footer-socials"
-        >
-          <a
-            className="foot-element"
-            data-testid="linkedin-icon"
-            title="Link to LinkedIn profile"
-            href={URLs.linkedin}
-          >
+        <div className='footer-element' id='footer-socials' data-testid='footer-socials'>
+          <a className='foot-element' data-testid='linkedin-icon' title='Link to LinkedIn profile' href={URLs.linkedin}>
             <LinkedIn />
           </a>
-          <a
-            className="foot-element"
-            title="Link to YouTube channel"
-            data-testid="youtube-icon"
-            href={URLs.youtube}
-          >
+          <a className='foot-element' title='Link to YouTube channel' data-testid='youtube-icon' href={URLs.youtube}>
             <YouTube />
           </a>
           <a
-            className="foot-element"
-            title="Link to Instagram profile"
-            data-testid="instagram-icon"
+            className='foot-element'
+            title='Link to Instagram profile'
+            data-testid='instagram-icon'
             href={URLs.instagram}
           >
             <Instagram />
           </a>
+          <a className='foot-element' title='Link to GitHub repository' data-testid='github-icon' href={URLs.github}>
+            <GitHub />
+          </a>
           <a
-            className="foot-element"
-            title="Link to GitHub repository"
-            data-testid="github-icon"
-            href={URLs.github}
+            className='foot-element'
+            title='Link to React documentation'
+            data-testid='react-icon'
+            href={URLs.reactLink}
           >
-            <GitHub />
+            <FontAwesomeIcon icon={faReact} style={{ fontSize: "2.5em", color: "#00233f" }} />
           </a>
         </div>
       </ThemeProvider>
-      <div
-        className="footer-element"
-        id="footer-name"
-        data-testid="footer-name"
-      >
-        <p className="copyright">
-          Deep Learning Playground © {new Date().getFullYear()}
-        </p>
+      <div className='footer-element' id='footer-name' data-testid='footer-name'>
+        <p className='copyright'>Deep Learning Playground © {new Date().getFullYear()}</p>
       </div>
     </div>
   );
diff --git a/frontend/src/common/components/NavBarMain.tsx b/frontend/src/common/components/NavBarMain.tsx
index 579746a9f..6b7fe9120 100644
--- a/frontend/src/common/components/NavBarMain.tsx
+++ b/frontend/src/common/components/NavBarMain.tsx
@@ -103,7 +103,7 @@ const NavbarMain = () => {
               <Grid item>
                 {isSignedIn(user) ? (
                   <Link href="/train" passHref className="nav-link">
-                    Train
+                    Hello World
                   </Link>
                 ) : null}
               </Grid>
@@ -123,7 +123,11 @@ const NavbarMain = () => {
                 </Link>
               </Grid>
               <Grid item>
-                <Link href={URLs.donate} passHref className="nav-link">
+                <Link
+                  href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+                  passHref
+                  className="nav-link"
+                >
                   Donate
                 </Link>
               </Grid>
diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
index 4ff358e95..c86c98cf1 100644
--- a/frontend/src/constants.ts
+++ b/frontend/src/constants.ts
@@ -15,6 +15,7 @@ export const URLs = Object.freeze({
   youtube: "https://www.youtube.com/channel/UC1DGL6Tb9ffwC-aHChadxMw",
   instagram: "https://www.instagram.com/datasciencegt/",
   github: "https://github.com/DSGT-DLP/Deep-Learning-Playground",
+  reactLink: "https://react.dev/",
 });
 
 export const GENERAL_STYLES = Object.freeze({
diff --git a/frontend/src/features/Train/features/Tabular/components/TabularFlow.tsx b/frontend/src/features/Train/features/Tabular/components/TabularFlow.tsx
index e56e6b428..bd874a8ed 100644
--- a/frontend/src/features/Train/features/Tabular/components/TabularFlow.tsx
+++ b/frontend/src/features/Train/features/Tabular/components/TabularFlow.tsx
@@ -1,14 +1,6 @@
 import HtmlTooltip from "@/common/components/HtmlTooltip";
 import InfoIcon from "@mui/icons-material/Info";
-import {
-  Button,
-  Card,
-  Divider,
-  Paper,
-  Stack,
-  TextField,
-  Typography,
-} from "@mui/material";
+import { Button, Card, Divider, Paper, Stack, TextField, Typography } from "@mui/material";
 import React, { useEffect } from "react";
 import ReactFlow, {
   Background,
@@ -24,11 +16,7 @@ import ReactFlow, {
   useNodesState,
 } from "reactflow";
 import "reactflow/dist/style.css";
-import {
-  ALL_LAYERS,
-  DEFAULT_LAYERS,
-  STEP_SETTINGS,
-} from "../constants/tabularConstants";
+import { ALL_LAYERS, DEFAULT_LAYERS, STEP_SETTINGS } from "../constants/tabularConstants";
 import { ParameterData } from "../types/tabularTypes";
 import assert from "assert";
 import { nanoid } from "nanoid/non-secure";
@@ -119,21 +107,16 @@ export default function TabularFlow(props: TabularFlowProps) {
   return (
     <>
       <Paper sx={{ mb: 2 }}>
-        <Stack alignItems="center" spacing={2} padding={2}>
-          <Typography variant="h2" fontSize={25}>
+        <Stack alignItems='center' spacing={2} padding={2}>
+          <Typography variant='h2' fontSize={25}>
             Layers
           </Typography>
-          <Stack
-            direction="row"
-            gap={1}
-            flexWrap="wrap"
-            justifyContent="space-between"
-          >
+          <Stack direction='row' gap={1} flexWrap='wrap' justifyContent='space-between'>
             {STEP_SETTINGS.PARAMETERS.layerValues.map((value) => (
               <Button
                 key={value}
-                variant="outlined"
-                color="primary"
+                variant='outlined'
+                color='primary'
                 onClick={() => {
                   setNodes((cur) => [
                     ...cur,
@@ -148,9 +131,7 @@ export default function TabularFlow(props: TabularFlowProps) {
                         label: STEP_SETTINGS.PARAMETERS.layers[value].label,
                         value: value,
                         onChange: onChange,
-                        parameters: STEP_SETTINGS.PARAMETERS.layers[
-                          value
-                        ].parameters.map(() => 0),
+                        parameters: STEP_SETTINGS.PARAMETERS.layers[value].parameters.map(() => 0),
                       },
                     },
                   ]);
@@ -192,23 +173,14 @@ function TextUpdaterNode(props: TextUpdaterNodeProps) {
 
   return (
     <>
-      <Handle
-        type="target"
-        position={Position.Top}
-        isConnectable={isConnectable}
-      />
+      <Handle type='target' position={Position.Top} isConnectable={isConnectable} />
       <div>
         <Card sx={{ p: 3 }}>
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            alignItems="center"
-            spacing={3}
-          >
+          <Stack direction='row' justifyContent='space-between' alignItems='center' spacing={3}>
             <HtmlTooltip
               title={
                 <React.Fragment>
-                  <Typography color="inherit">{layer.label}</Typography>
+                  <Typography color='inherit'>{layer.label}</Typography>
                   {layer.description}
                 </React.Fragment>
               }
@@ -216,16 +188,16 @@ function TextUpdaterNode(props: TextUpdaterNodeProps) {
               <InfoIcon>Info</InfoIcon>
             </HtmlTooltip>
 
-            <Typography variant="h3" fontSize={18}>
+            <Typography variant='h3' fontSize={18}>
               {layer.label}
             </Typography>
-            <Stack direction="row" alignItems="center" spacing={3}>
+            <Stack direction='row' alignItems='center' spacing={3}>
               <Stack
-                direction="row"
-                alignItems="center"
-                justifyContent="flex-end"
+                direction='row'
+                alignItems='center'
+                justifyContent='flex-end'
                 spacing={2}
-                divider={<Divider orientation="vertical" flexItem />}
+                divider={<Divider orientation='vertical' flexItem />}
               >
                 {layer.parameters.map((parameter, index) => (
                   <TextField
@@ -239,7 +211,7 @@ function TextUpdaterNode(props: TextUpdaterNodeProps) {
                     key={index}
                     label={parameter.label}
                     defaultValue={data.parameters?.[index]}
-                    size="small"
+                    size='small'
                     type={parameter.type}
                     required
                   />
@@ -249,12 +221,7 @@ function TextUpdaterNode(props: TextUpdaterNodeProps) {
           </Stack>
         </Card>
       </div>
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        id="b"
-        isConnectable={isConnectable}
-      />
+      <Handle type='source' position={Position.Bottom} id='b' isConnectable={isConnectable} />
     </>
   );
 }
@@ -266,9 +233,7 @@ interface OnChangeArgs {
 }
 
 interface LayerNodeData {
-  label:
-    | (typeof STEP_SETTINGS.PARAMETERS.layers)[ALL_LAYERS]["label"]
-    | "Start";
+  label: (typeof STEP_SETTINGS.PARAMETERS.layers)[ALL_LAYERS]["label"] | "Beginning";
   value: ALL_LAYERS | "root";
   parameters?: number[];
   onChange: (args: OnChangeArgs) => void;
@@ -282,7 +247,7 @@ const ROOT_NODE: Node<LayerNodeData> = {
   position: { x: DEFAULT_X_POSITION, y: 0 },
   deletable: false,
   data: {
-    label: "Start",
+    label: "Beginning",
     value: "root",
     parameters: [],
     onChange: () => undefined,
diff --git a/frontend/src/features/Train/features/Tabular/components/TabularParametersStep.tsx b/frontend/src/features/Train/features/Tabular/components/TabularParametersStep.tsx
index ab33fbe27..862be4220 100644
--- a/frontend/src/features/Train/features/Tabular/components/TabularParametersStep.tsx
+++ b/frontend/src/features/Train/features/Tabular/components/TabularParametersStep.tsx
@@ -32,16 +32,11 @@ const TabularParametersStep = ({
   setIsModified,
   setStep,
 }: {
-  renderStepperButtons: (
-    submitTrainspace: (data: TrainspaceData<"PARAMETERS">) => void
-  ) => React.ReactNode;
+  renderStepperButtons: (submitTrainspace: (data: TrainspaceData<"PARAMETERS">) => void) => React.ReactNode;
   setIsModified: React.Dispatch<React.SetStateAction<boolean>>;
   setStep: React.Dispatch<React.SetStateAction<number>>;
 }) => {
-  const trainspace = useAppSelector(
-    (state) =>
-      state.trainspace.current as TrainspaceData<"PARAMETERS"> | undefined
-  );
+  const trainspace = useAppSelector((state) => state.trainspace.current as TrainspaceData<"PARAMETERS"> | undefined);
   const dispatch = useAppDispatch();
   const [getColumns, { data, error }] = useLazyGetColumnsFromDatasetQuery();
   useEffect(() => {
@@ -59,8 +54,7 @@ const TabularParametersStep = ({
     setValue,
   } = useForm<ParameterData>({
     defaultValues: {
-      targetCol:
-        trainspace?.parameterData?.targetCol ?? (null as unknown as undefined),
+      targetCol: trainspace?.parameterData?.targetCol ?? (null as unknown as undefined),
       features: trainspace?.parameterData?.features ?? [],
       problemType: trainspace?.parameterData?.problemType ?? "CLASSIFICATION",
       criterion: trainspace?.parameterData?.criterion ?? "CELOSS",
@@ -85,7 +79,7 @@ const TabularParametersStep = ({
     <Stack spacing={3}>
       {error ? (
         <>
-          <Typography variant="h2" fontSize={25} textAlign={"center"}>
+          <Typography variant='h2' fontSize={25} textAlign={"center"}>
             Error Occurred!
           </Typography>
           <Button
@@ -104,7 +98,7 @@ const TabularParametersStep = ({
         <>
           <Controller
             control={control}
-            name="targetCol"
+            name='targetCol'
             rules={{ required: true }}
             render={({ field: { ref, onChange, ...field } }) => (
               <Autocomplete
@@ -119,25 +113,23 @@ const TabularParametersStep = ({
                       {...params}
                       inputRef={ref}
                       required
-                      label="Target Column"
-                      placeholder="Target"
+                      label='Target Column'
+                      placeholder='Target'
                       error={errors.targetCol ? true : false}
                     />
                   ) : (
-                    <Skeleton width="100%">
+                    <Skeleton width='100%'>
                       <TextField fullWidth />
                     </Skeleton>
                   )
                 }
-                options={
-                  data ? data.filter((col) => !features.includes(col)) : []
-                }
+                options={data ? data.filter((col) => !features.includes(col)) : []}
               />
             )}
           />
           <Controller
             control={control}
-            name="features"
+            name='features'
             rules={{ required: true }}
             render={({ field: { ref, onChange, ...field } }) => (
               <Autocomplete
@@ -153,12 +145,12 @@ const TabularParametersStep = ({
                       {...params}
                       inputRef={ref}
                       required
-                      label="Feature Columns"
-                      placeholder="Features"
+                      label='Feature Columns'
+                      placeholder='Features'
                       error={errors.features ? true : false}
                     />
                   ) : (
-                    <Skeleton width="100%">
+                    <Skeleton width='100%'>
                       <TextField fullWidth />
                     </Skeleton>
                   )
@@ -172,7 +164,7 @@ const TabularParametersStep = ({
       <FormControl>
         <FormLabel>Problem Type</FormLabel>
         <Controller
-          name="problemType"
+          name='problemType'
           control={control}
           rules={{ required: true }}
           render={({ field: { onChange, value } }) => (
@@ -190,11 +182,11 @@ const TabularParametersStep = ({
         />
       </FormControl>
       <Controller
-        name="criterion"
+        name='criterion'
         control={control}
         rules={{ required: true }}
         render={({ field: { onChange, value } }) => (
-          <TextField select label="Criterion" onChange={onChange} value={value}>
+          <TextField select label='Criterion' onChange={onChange} value={value}>
             {STEP_SETTINGS["PARAMETERS"].criterions.map((criterion) => (
               <MenuItem key={criterion.value} value={criterion.value}>
                 {criterion.label}
@@ -204,11 +196,11 @@ const TabularParametersStep = ({
         )}
       />
       <Controller
-        name="optimizerName"
+        name='optimizerName'
         control={control}
         rules={{ required: true }}
         render={({ field: { onChange, value } }) => (
-          <TextField select label="Optimizer" onChange={onChange} value={value}>
+          <TextField select label='Optimizer' onChange={onChange} value={value}>
             {STEP_SETTINGS["PARAMETERS"].optimizers.map((optimizer) => (
               <MenuItem key={optimizer.value} value={optimizer.value}>
                 {optimizer.label}
@@ -219,63 +211,57 @@ const TabularParametersStep = ({
       />
       <FormGroup>
         <Controller
-          name="shuffle"
+          name='shuffle'
           control={control}
           rules={{ required: true }}
           render={({ field: { onChange, value } }) => (
-            <FormControlLabel
-              control={
-                <Switch value={value} onChange={onChange} defaultChecked />
-              }
-              label="Shuffle"
-            />
+            <FormControlLabel control={<Switch value={value} onChange={onChange} defaultChecked />} label='Shuffle' />
           )}
         />
       </FormGroup>
       <Controller
-        name="epochs"
+        name='epochs'
         control={control}
         rules={{ required: true }}
         render={({ field: { onChange, value } }) => (
-          <TextField
-            label="Epochs"
-            type={"number"}
-            onChange={onChange}
-            value={value}
-          />
+          <TextField label='Epochs' type={"number"} onChange={onChange} value={value} />
         )}
       />
       <Controller
-        name="batchSize"
+        name='batchSize'
         control={control}
         rules={{ required: true }}
         render={({ field: { onChange, value } }) => (
-          <TextField
-            label="Batch Size"
-            type={"number"}
-            onChange={onChange}
-            value={value}
-          />
+          <TextField label='Batch Size' type={"number"} onChange={onChange} value={value} />
         )}
       />
       <FormControl>
         <FormLabel>Test Size</FormLabel>
         <Controller
-          name="testSize"
+          name='testSize'
+          control={control}
+          rules={{ required: true }}
+          render={({ field: { onChange, value } }) => (
+            <Slider step={0.01} value={value} onChange={onChange} min={0} max={1} valueLabelDisplay='auto' />
+          )}
+        />
+      </FormControl>
+
+      <FormControl>
+        <FormLabel>Super Cool Dataset?</FormLabel>
+        <Controller
+          name='coolChecker'
           control={control}
           rules={{ required: true }}
           render={({ field: { onChange, value } }) => (
-            <Slider
-              step={0.01}
-              value={value}
-              onChange={onChange}
-              min={0}
-              max={1}
-              valueLabelDisplay="auto"
-            />
+            <RadioGroup row value={value} onChange={onChange}>
+              <FormControlLabel key='Cool' value='Cool' control={<Radio />} label='Yuhhh' />
+              <FormControlLabel key='notCool' value='notCool' control={<Radio />} label='Nawww' />
+            </RadioGroup>
           )}
         />
       </FormControl>
+
       <Paper>
         <TabularFlow setLayers={setLayers} />
       </Paper>
diff --git a/frontend/src/features/Train/features/Tabular/components/TabularTrainspace.tsx b/frontend/src/features/Train/features/Tabular/components/TabularTrainspace.tsx
index 40aef3e08..f9bb1aefb 100644
--- a/frontend/src/features/Train/features/Tabular/components/TabularTrainspace.tsx
+++ b/frontend/src/features/Train/features/Tabular/components/TabularTrainspace.tsx
@@ -3,27 +3,14 @@ import { TrainspaceData } from "@/features/Train/features/Tabular/types/tabularT
 import { UseFormHandleSubmit, useForm } from "react-hook-form";
 import React, { useEffect, useState } from "react";
 import TrainspaceLayout from "@/features/Train/components/TrainspaceLayout";
-import {
-  Button,
-  Stack,
-  Step,
-  StepButton,
-  Stepper,
-  TextField,
-  CircularProgress,
-} from "@mui/material";
-import {
-  TRAINSPACE_SETTINGS,
-  STEP_SETTINGS,
-} from "../constants/tabularConstants";
+import { Button, Stack, Step, StepButton, Stepper, TextField, CircularProgress } from "@mui/material";
+import { TRAINSPACE_SETTINGS, STEP_SETTINGS } from "../constants/tabularConstants";
 import { useTrainTabularMutation } from "../redux/tabularApi";
 import { useRouter } from "next/router";
 import { removeTrainspaceData } from "@/features/Train/redux/trainspaceSlice";
 
 const TabularTrainspace = () => {
-  const trainspace = useAppSelector(
-    (state) => state.trainspace.current as TrainspaceData | undefined
-  );
+  const trainspace = useAppSelector((state) => state.trainspace.current as TrainspaceData | undefined);
   const {
     handleSubmit,
     formState: { errors, isDirty },
@@ -38,9 +25,9 @@ const TabularTrainspace = () => {
       code={`#Code to train your model locally\nprint("Hello World")`}
       nameField={
         <TextField
-          id="filled-basic"
-          label="Name"
-          variant="outlined"
+          id='filled-basic'
+          label='Name'
+          variant='outlined'
           required
           helperText={errors.name ? "Name is required" : ""}
           error={errors.name ? true : false}
@@ -49,17 +36,10 @@ const TabularTrainspace = () => {
         />
       }
       stepper={
-        <Stepper
-          activeStep={Math.min(
-            trainspace.step,
-            TRAINSPACE_SETTINGS.steps.length - 1
-          )}
-        >
+        <Stepper activeStep={Math.min(trainspace.step, TRAINSPACE_SETTINGS.steps.length - 1)}>
           {TRAINSPACE_SETTINGS.steps.map((step, index) => (
             <Step key={step}>
-              <StepButton onClick={() => setStep(index)}>
-                {STEP_SETTINGS[step].name}
-              </StepButton>
+              <StepButton onClick={() => setStep(index)}>{STEP_SETTINGS[step].name}</StepButton>
             </Step>
           ))}
         </Stepper>
@@ -109,29 +89,26 @@ const TrainspaceStepInner = ({
   }
 
   useEffect(() => {
-    if (trainspace.step < TRAINSPACE_SETTINGS.steps.length)
-      setStep(trainspace.step);
+    if (trainspace.step < TRAINSPACE_SETTINGS.steps.length) setStep(trainspace.step);
     else {
       train(trainspace)
         .unwrap()
         .then(({ trainspaceId }) => {
+          console.log("Trainspace submitted with ID:", trainspaceId);
           router.push({ pathname: `/train/${trainspaceId}` }).then(() => {
             dispatch(removeTrainspaceData());
           });
         });
     }
   }, [trainspace]);
-  
+
   if (!Component) return null;
   return (
     <Component
       renderStepperButtons={(submitTrainspace) => (
-        <Stack
-          direction={"row"}
-          justifyContent={step > 0 ? "space-between" : "end"}
-        >
+        <Stack direction={"row"} justifyContent={step > 0 ? "space-between" : "end"}>
           {step > 0 ? (
-            <Button variant="outlined" onClick={() => setStep(step - 1)}>
+            <Button variant='outlined' onClick={() => setStep(step - 1)}>
               Previous
             </Button>
           ) : null}
@@ -139,21 +116,13 @@ const TrainspaceStepInner = ({
           {isButtonClicked ? (
             <Button
               disabled
-              variant={
-                step < trainspace.step && !isStepModified && !isModified
-                  ? "outlined"
-                  : "contained"
-              }
+              variant={step < trainspace.step && !isStepModified && !isModified ? "outlined" : "contained"}
             >
               {trainbuttontext}
             </Button>
           ) : (
             <Button
-              variant={
-                step < trainspace.step && !isStepModified && !isModified
-                  ? "outlined"
-                  : "contained"
-              }
+              variant={step < trainspace.step && !isStepModified && !isModified ? "outlined" : "contained"}
               onClick={() => {
                 if (step < trainspace.step && !isStepModified && !isModified) {
                   setStep(step + 1);
diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx
index 4bc45f4e0..83ef20a2d 100644
--- a/frontend/src/pages/login.tsx
+++ b/frontend/src/pages/login.tsx
@@ -54,10 +54,8 @@ const LoadingOverlay = () => {
           alignItems: "center",
         }}
       >
-        <CircularProgress color="primary" size={80} />
-        <p style={{ marginTop: 10, fontSize: 16 }}>
-          Loading... Please wait a moment
-        </p>
+        <CircularProgress color='primary' size={80} />
+        <p style={{ marginTop: 10, fontSize: 16 }}>Loading... Please wait a moment</p>
       </div>
     </div>
   );
@@ -73,29 +71,31 @@ const Login = () => {
   const user = useAppSelector((state) => state.currentUser.user);
   const router = useRouter();
   const dispatch = useAppDispatch();
+
   useEffect(() => {
     if (router.isReady && isSignedIn(user)) {
       router.replace({ pathname: "/dashboard" });
+      console.log("User email is " + user.email);
     }
   }, [user, router.isReady]);
   const Title = (
     <>
-      <h1 className="title mb-5">
+      <h1 className='title mb-5'>
         No-code Solution for <br />
         Machine Learning
       </h1>
-      <p className="description text-center mb-4">
-        DLP is a playground where you can experiment with machine learning tools
-        by inputting a dataset and use PyTorch modules without writing any code
+      <p className='description text-center mb-4'>
+        DLP is a playground where you can experiment with machine learning tools by inputting a dataset and use PyTorch
+        modules without writing any code
       </p>
     </>
   );
 
   const SocialLogins = (
     <>
-      <div className="d-flex justify-content-evenly mb-5">
+      <div className='d-flex justify-content-evenly mb-5'>
         <Button
-          className="login-button google"
+          className='login-button google'
           style={{
             position: "relative",
           }}
@@ -119,7 +119,7 @@ const Login = () => {
           />
         </Button>
         <Button
-          className="login-button github"
+          className='login-button github'
           style={{ position: "relative" }}
           onClick={async () => {
             setIsLoading(true);
@@ -147,53 +147,45 @@ const Login = () => {
   const EmailPasswordInput = (
     <>
       {isRegistering && (
-        <Form.Group className="mb-3" controlId="login-name">
+        <Form.Group className='mb-3' controlId='login-name'>
           <Form.Label>Name</Form.Label>
-          <Form.Control
-            placeholder="Enter name"
-            onBlur={(e) => setFullName(e.target.value)}
-            autoComplete="name"
-          />
+          <Form.Control placeholder='Enter name' onBlur={(e) => setFullName(e.target.value)} autoComplete='name' />
         </Form.Group>
       )}
 
-      <Form.Group className="mb-3" controlId="login-email">
+      <Form.Group className='mb-3' controlId='login-email'>
         <Form.Label>Email address</Form.Label>
         <Form.Control
-          type="email"
-          placeholder="someone@example.com"
+          type='email'
+          placeholder='someone@example.com'
           onBlur={(e) => setEmail(e.target.value)}
-          autoComplete="email"
+          autoComplete='email'
         />
       </Form.Group>
 
-      <Form.Group className="mb-5" controlId="login-password">
+      <Form.Group className='mb-5' controlId='login-password'>
         <Form.Label>Password</Form.Label>
         <Form.Control
-          type="password"
-          placeholder="Password"
+          type='password'
+          placeholder='Password'
           onBlur={(e) => setPassword(e.target.value)}
-          autoComplete="current-password"
+          autoComplete='current-password'
         />
         {!isRegistering && (
-          <div className="link">
-            <Link href="/forgot">Forgot Password?</Link>
+          <div className='link'>
+            <Link href='/forgot'>Forgot Password?</Link>
           </div>
         )}
       </Form.Group>
       {isRegistering && process.env.REACT_APP_CAPTCHA_SITE_KEY && (
-        <div className="reCaptcha">
-          <ReCAPTCHA
-            sitekey={process.env.REACT_APP_CAPTCHA_SITE_KEY}
-            theme="dark"
-            onChange={(e) => setRecaptcha(e)}
-          />
+        <div className='reCaptcha'>
+          <ReCAPTCHA sitekey={process.env.REACT_APP_CAPTCHA_SITE_KEY} theme='dark' onChange={(e) => setRecaptcha(e)} />
         </div>
       )}
-      <div className="email-buttons d-flex flex-column">
+      <div className='email-buttons d-flex flex-column'>
         <Button
-          id="log-in"
-          className="mb-2"
+          id='log-in'
+          className='mb-2'
           onClick={async () => {
             if (isRegistering) {
               setIsLoading(true);
@@ -218,9 +210,7 @@ const Login = () => {
             } else {
               setIsLoading(true);
               try {
-                await dispatch(
-                  signInViaEmailAndPassword({ email, password })
-                ).unwrap();
+                await dispatch(signInViaEmailAndPassword({ email, password })).unwrap();
               } catch (e) {
                 toast.error((e as SerializedError).message, {
                   position: toast.POSITION.TOP_CENTER,
@@ -232,11 +222,7 @@ const Login = () => {
         >
           {isRegistering ? "Register" : "Log in"}
         </Button>
-        <Button
-          variant="outline-dark"
-          id="sign-up"
-          onClick={() => setIsRegistering((e) => !e)}
-        >
+        <Button variant='outline-dark' id='sign-up' onClick={() => setIsRegistering((e) => !e)}>
           {isRegistering ? "Log in" : "Register"}
         </Button>
       </div>
@@ -258,14 +244,11 @@ const Login = () => {
   return (
     <>
       <NavbarMain />
-      <div
-        id="login-page"
-        className="text-center d-flex justify-content-center"
-      >
-        <div className="main-container mt-5 mb-5">
+      <div id='login-page' className='text-center d-flex justify-content-center'>
+        <div className='main-container mt-5 mb-5'>
           {Title}
 
-          <Form className="form-container p-5">
+          <Form className='form-container p-5'>
             {SocialLogins}
             {EmailPasswordInput}
           </Form>