diff --git a/ui100/src/Login.tsx b/ui100/src/Login.tsx
new file mode 100644
index 00000000..5b9d2054
--- /dev/null
+++ b/ui100/src/Login.tsx
@@ -0,0 +1,40 @@
+import {Box, Button, Container, TextField, Typography} from "@mui/material";
+
+const Login = () => {
+    return (
+        <Typography>
+            <Container maxWidth="xs">
+                <Box sx={{ marginTop: 8, display: "flex", flexDirection: "column", alignItems: "center"}}>
+                    <h2>welcome to zrok...</h2>
+                    <Box component="form" noValidate>
+                        <TextField
+                            margin="normal"
+                            required
+                            fullWidth
+                            id="email"
+                            label="Email Address"
+                            name="email"
+                            autoComplete="email"
+                            autoFocus
+                        />
+                        <TextField
+                            margin="normal"
+                            required
+                            fullWidth
+                            name="password"
+                            label="Password"
+                            type="password"
+                            id="password"
+                            autoComplete="current-password"
+                        />
+                        <Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
+                            Log In
+                        </Button>
+                    </Box>
+                </Box>
+            </Container>
+        </Typography>
+    );
+}
+
+export default Login;
\ No newline at end of file
diff --git a/ui100/src/main.tsx b/ui100/src/main.tsx
index 77183852..1b37d21d 100644
--- a/ui100/src/main.tsx
+++ b/ui100/src/main.tsx
@@ -5,13 +5,15 @@ import ApiConsole from "./ApiConsole.tsx";
 import {ThemeProvider} from "@mui/material";
 import {theme} from "./model/theme.ts";
 import {BrowserRouter, Route, Routes} from "react-router";
+import Login from "./Login.tsx";
 
 createRoot(document.getElementById('root')!).render(
     <StrictMode>
         <ThemeProvider theme={theme}>
             <BrowserRouter>
                 <Routes>
-                    <Route path="/" element={<ApiConsole />} />
+                    <Route index element={<ApiConsole />} />
+                    <Route path="login" element={<Login />} />
                 </Routes>
             </BrowserRouter>
         </ThemeProvider>