auth.diff

diff --git a/packages/ui/src/routes/MainRoutes.js b/packages/ui/src/routes/MainRoutes.js
index 860c9f7..856c45d 100644
--- a/packages/ui/src/routes/MainRoutes.js
+++ b/packages/ui/src/routes/MainRoutes.js
@@ -28,6 +28,10 @@ const Credentials = Loadable(lazy(() => import('views/credentials')))
 // variables routing
 const Variables = Loadable(lazy(() => import('views/variables')))
 
+// Auth routing
+const AuthLogin = Loadable(lazy(() => import('views/authlogin')))
+const AuthRegister = Loadable(lazy(() => import('views/authregister')))
+
 // ==============================|| MAIN ROUTING ||============================== //
 
 const MainRoutes = {
@@ -69,6 +73,19 @@ const MainRoutes = {
         {
             path: '/view-past-runs',
             element: <PastRuns />
+        },
+        {
+            path: '/auth',
+            children: [
+                {
+                    path: '/auth/login',
+                    element: <AuthLogin />
+                },
+                {
+                    path: '/auth/register',
+                    element: <AuthRegister />
+                }
+            ]
         }
     ]
 }
diff --git a/packages/ui/src/views/authlogin/index.css b/packages/ui/src/views/authlogin/index.css
new file mode 100644
index 0000000..8be0694
--- /dev/null
+++ b/packages/ui/src/views/authlogin/index.css
@@ -0,0 +1,27 @@
+* {
+    margin: 0;
+    padding: 0;
+  }
+  
+  body {
+    background: #637d63;
+  }
+  
+  .App {
+    font-family: sans-serif;
+    text-align: center;
+  }
+  
+  .form {
+    max-width: 330px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    background: white;
+    padding: 20px;
+    margin-top: 30px;
+  }
+  
+  .form .form__custom-button {
+    margin-top: 50px;
+  }
\ No newline at end of file
diff --git a/packages/ui/src/views/authlogin/index.js b/packages/ui/src/views/authlogin/index.js
new file mode 100644
index 0000000..8211db5
--- /dev/null
+++ b/packages/ui/src/views/authlogin/index.js
@@ -0,0 +1,49 @@
+import { Link } from 'react-router-dom'
+import { Button, Checkbox, Grid, FormControlLabel, TextField } from '@mui/material'
+
+const AuthLogin = () => {
+    return (
+        <form className='form' noValidate>
+            <TextField
+                variant='outlined'
+                margin='normal'
+                required
+                fullWidth
+                id='email'
+                label='Email Address'
+                type='email'
+                name='email'
+                autoComplete='email'
+            />
+            <TextField
+                variant='outlined'
+                margin='normal'
+                required
+                fullWidth
+                name='password'
+                label='Password'
+                type='password'
+                id='password'
+                autoComplete='current-password'
+            />
+            <FormControlLabel control={<Checkbox value='remember' color='primary' />} label='Remember me' />
+            <Button type='submit' fullWidth variant='contained' color='primary' className='submit'>
+                Sign In
+            </Button>
+            <Grid container>
+                <Grid item xs>
+                    <Link to='#' variant='body2'>
+                        Forgot password?
+                    </Link>
+                </Grid>
+                <Grid item>
+                    <Link to='#' variant='body2'>
+                        {'Sign Up'}
+                    </Link>
+                </Grid>
+            </Grid>
+        </form>
+    )
+}
+
+export default AuthLogin
diff --git a/packages/ui/src/views/authregister/index.css b/packages/ui/src/views/authregister/index.css
new file mode 100644
index 0000000..8be0694
--- /dev/null
+++ b/packages/ui/src/views/authregister/index.css
@@ -0,0 +1,27 @@
+* {
+    margin: 0;
+    padding: 0;
+  }
+  
+  body {
+    background: #637d63;
+  }
+  
+  .App {
+    font-family: sans-serif;
+    text-align: center;
+  }
+  
+  .form {
+    max-width: 330px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    background: white;
+    padding: 20px;
+    margin-top: 30px;
+  }
+  
+  .form .form__custom-button {
+    margin-top: 50px;
+  }
\ No newline at end of file
diff --git a/packages/ui/src/views/authregister/index.js b/packages/ui/src/views/authregister/index.js
new file mode 100644
index 0000000..dea51b7
--- /dev/null
+++ b/packages/ui/src/views/authregister/index.js
@@ -0,0 +1,46 @@
+import { Button, TextField } from '@mui/material'
+
+const AuthRegister = () => {
+    return (
+        <form className='form' noValidate>
+            <TextField
+                variant='outlined'
+                margin='normal'
+                required
+                fullWidth
+                id='email'
+                label='Email Address'
+                type='email'
+                name='email'
+                autoComplete='email'
+            />
+            <TextField
+                variant='outlined'
+                margin='normal'
+                required
+                fullWidth
+                name='password'
+                label='Password'
+                type='password'
+                id='password'
+                autoComplete='current-password'
+            />
+            <TextField
+                variant='outlined'
+                margin='normal'
+                required
+                fullWidth
+                name='password'
+                label='Confirm password'
+                type='password'
+                id='password'
+                autoComplete='current-password'
+            />
+            <Button type='submit' fullWidth variant='contained' color='primary' className='submit'>
+                Sign Up
+            </Button>
+        </form>
+    )
+}
+
+export default AuthRegister