diff --git a/src/App.tsx b/src/App.tsx
index 4e847ab..c6d2321 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,6 +14,7 @@ import { Provider as JotaiProvider } from "jotai";
 import { Home } from "./Home.tsx";
 import { Video } from "./Video.tsx";
 import { Version } from "./Version.tsx";
+import { Login } from "./Login.tsx";
 import "./App.css";
 
 function App() {
@@ -43,6 +44,10 @@ const router = createBrowserRouter([
     path: "/video",
     element: <Video />,
   },
+  {
+    path: "/login",
+    element: <Login />,
+  },
 ]);
 
 export default App;
diff --git a/src/Home.tsx b/src/Home.tsx
index 5d2360e..0c5a9ba 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -12,7 +12,7 @@ import { AppNav, Footer } from "./components/AppNav.tsx";
 import { Container, Row, Col, Image, Card } from "react-bootstrap";
 import { atom, useAtomValue } from "jotai";
 import { atomWithQuery } from "jotai-tanstack-query";
-import { DiagnosticsCard } from "./DiagnosticsCard.tsx";
+import { DiagnosticsCard } from "./components/DiagnosticsCard.tsx";
 
 const statusStringQuery = async () => {
   const resp = await fetch("api/status");
diff --git a/src/Login.tsx b/src/Login.tsx
new file mode 100644
index 0000000..c892af3
--- /dev/null
+++ b/src/Login.tsx
@@ -0,0 +1,64 @@
+//
+// Copyright 2026 James Pace
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+//
+// This Source Code Form is "Incompatible With Secondary Licenses", as
+// defined by the Mozilla Public License, v. 2.0.
+//
+import { AppNav, Footer } from "./components/AppNav.tsx";
+import { Container, Row, Col, Card, Button, Form } from "react-bootstrap";
+import { atom, useAtomValue } from "jotai";
+import { useNavigate } from "react-router-dom";
+
+
+export function Login() {
+  return (
+    <div>
+      <AppNav />
+      <Container className="vert-padded">
+          <LoginForm />
+      </Container>
+      <Footer />
+    </div>
+  );
+}
+
+
+function LoginForm() {
+    const navigate = useNavigate();
+
+    const onSubmit = async (event) => {
+        event.preventDefault();
+
+        console.log(event.target);
+        const formEntries = new FormData(event.target);
+        const formData = Object.fromEntries(formEntries);
+        console.log(formData);
+
+        const resp = await fetch("/api/login", {
+            method: 'POST',
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(formData),
+        });
+        if(resp.redirected) {
+            navigate("/");
+        }
+    }
+    return (
+        <Form onSubmit={onSubmit}>
+            <Form.Group controlId="passwordForm">
+               <Form.Label>Password</Form.Label>
+               <Form.Control name="password" type="password" />
+            </Form.Group>
+
+             <Button type="submit">
+                 Submit
+             </Button>
+        </Form>
+    );
+}
diff --git a/src/DiagnosticsCard.tsx b/src/components/DiagnosticsCard.tsx
similarity index 100%
rename from src/DiagnosticsCard.tsx
rename to src/components/DiagnosticsCard.tsx