diff --git a/app/src/Routes.tsx b/app/src/Routes.tsx
index 6887ac4ffd..3dd8f1f51a 100644
--- a/app/src/Routes.tsx
+++ b/app/src/Routes.tsx
@@ -24,6 +24,7 @@ import {
   ExperimentsPage,
   homeLoader,
   Layout,
+  LoginPage,
   ModelPage,
   ModelRoot,
   projectLoader,
@@ -37,110 +38,113 @@ import {
 
 const router = createBrowserRouter(
   createRoutesFromElements(
-    <Route path="/" element={<Layout />} errorElement={<ErrorElement />}>
-      <Route index loader={homeLoader} />
-      <Route
-        path="/model"
-        handle={{ crumb: () => "model" }}
-        element={<ModelRoot />}
-      >
-        <Route index element={<ModelPage />} />
-        <Route element={<ModelPage />}>
-          <Route path="dimensions">
+    <Route path="/" errorElement={<ErrorElement />}>
+      <Route path="/login" element={<LoginPage />} />
+      <Route element={<Layout />}>
+        <Route index loader={homeLoader} />
+        <Route
+          path="/model"
+          handle={{ crumb: () => "model" }}
+          element={<ModelRoot />}
+        >
+          <Route index element={<ModelPage />} />
+          <Route element={<ModelPage />}>
+            <Route path="dimensions">
+              <Route
+                path=":dimensionId"
+                element={<DimensionPage />}
+                loader={dimensionLoader}
+              />
+            </Route>
+          </Route>
+          <Route path="embeddings">
             <Route
-              path=":dimensionId"
-              element={<DimensionPage />}
-              loader={dimensionLoader}
+              path=":embeddingDimensionId"
+              element={<EmbeddingPage />}
+              loader={embeddingLoader}
+              handle={{
+                // `crumb` is your own abstraction, we decided
+                // to make this one a function so we can pass
+                // the data from the loader to it so that our
+                // breadcrumb is made up of dynamic content
+                crumb: (data: embeddingLoaderQuery$data) => data.embedding.name,
+              }}
             />
           </Route>
         </Route>
-        <Route path="embeddings">
+        <Route
+          path="/projects"
+          handle={{ crumb: () => "projects" }}
+          element={<ProjectsRoot />}
+        >
+          <Route index element={<ProjectsPage />} />
           <Route
-            path=":embeddingDimensionId"
-            element={<EmbeddingPage />}
-            loader={embeddingLoader}
+            path=":projectId"
+            element={<TracingRoot />}
+            loader={projectLoader}
             handle={{
-              // `crumb` is your own abstraction, we decided
-              // to make this one a function so we can pass
-              // the data from the loader to it so that our
-              // breadcrumb is made up of dynamic content
-              crumb: (data: embeddingLoaderQuery$data) => data.embedding.name,
+              crumb: (data: projectLoaderQuery$data) => data.project.name,
             }}
-          />
+          >
+            <Route index element={<ProjectPage />} />
+            <Route element={<ProjectPage />}>
+              <Route path="traces/:traceId" element={<TracePage />} />
+            </Route>
+          </Route>
+        </Route>
+        <Route path="/datasets" handle={{ crumb: () => "datasets" }}>
+          <Route index element={<DatasetsPage />} />
+          <Route
+            path=":datasetId"
+            loader={datasetLoader}
+            handle={{
+              crumb: (data: datasetLoaderQuery$data) => data.dataset.name,
+            }}
+          >
+            <Route element={<DatasetPage />} loader={datasetLoader}>
+              <Route
+                index
+                element={<ExperimentsPage />}
+                loader={experimentsLoader}
+              />
+              <Route
+                path="experiments"
+                element={<ExperimentsPage />}
+                loader={experimentsLoader}
+              />
+              <Route
+                path="examples"
+                element={<ExamplesPage />}
+                loader={examplesLoader}
+              >
+                <Route path=":exampleId" element={<ExamplePage />} />
+              </Route>
+            </Route>
+            <Route
+              path="compare"
+              handle={{
+                crumb: () => "compare",
+              }}
+              loader={experimentCompareLoader}
+              element={<ExperimentComparePage />}
+            />
+          </Route>
         </Route>
-      </Route>
-      <Route
-        path="/projects"
-        handle={{ crumb: () => "projects" }}
-        element={<ProjectsRoot />}
-      >
-        <Route index element={<ProjectsPage />} />
         <Route
-          path=":projectId"
-          element={<TracingRoot />}
-          loader={projectLoader}
+          path="/apis"
+          element={<APIsPage />}
           handle={{
-            crumb: (data: projectLoaderQuery$data) => data.project.name,
+            crumb: () => "APIs",
           }}
-        >
-          <Route index element={<ProjectPage />} />
-          <Route element={<ProjectPage />}>
-            <Route path="traces/:traceId" element={<TracePage />} />
-          </Route>
-        </Route>
-      </Route>
-      <Route path="/datasets" handle={{ crumb: () => "datasets" }}>
-        <Route index element={<DatasetsPage />} />
+        />
         <Route
-          path=":datasetId"
-          loader={datasetLoader}
+          path="/settings"
+          element={<SettingsPage />}
           handle={{
-            crumb: (data: datasetLoaderQuery$data) => data.dataset.name,
+            crumb: () => "Settings",
           }}
-        >
-          <Route element={<DatasetPage />} loader={datasetLoader}>
-            <Route
-              index
-              element={<ExperimentsPage />}
-              loader={experimentsLoader}
-            />
-            <Route
-              path="experiments"
-              element={<ExperimentsPage />}
-              loader={experimentsLoader}
-            />
-            <Route
-              path="examples"
-              element={<ExamplesPage />}
-              loader={examplesLoader}
-            >
-              <Route path=":exampleId" element={<ExamplePage />} />
-            </Route>
-          </Route>
-          <Route
-            path="compare"
-            handle={{
-              crumb: () => "compare",
-            }}
-            loader={experimentCompareLoader}
-            element={<ExperimentComparePage />}
-          />
-        </Route>
+        />
       </Route>
-      <Route
-        path="/apis"
-        element={<APIsPage />}
-        handle={{
-          crumb: () => "APIs",
-        }}
-      />
-      <Route
-        path="/settings"
-        element={<SettingsPage />}
-        handle={{
-          crumb: () => "Settings",
-        }}
-      />
     </Route>
   ),
   {
diff --git a/app/src/components/nav/Logo.tsx b/app/src/components/nav/Logo.tsx
index 4ad8d34477..7b69e35573 100644
--- a/app/src/components/nav/Logo.tsx
+++ b/app/src/components/nav/Logo.tsx
@@ -1,14 +1,15 @@
 import React from "react";
 import { css } from "@emotion/react";
 
-export function Logo() {
+export function Logo(props: { size?: number }) {
+  const { size = 28 } = props;
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 305.92 350.13"
-      width={28}
-      height={28}
+      width={size}
+      height={size}
       css={css`
         .cls-1 {
           fill: url(#linear-gradient);
diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx
index b5e0a239f6..3d391defc1 100644
--- a/app/src/pages/index.tsx
+++ b/app/src/pages/index.tsx
@@ -18,3 +18,4 @@ export * from "./experiments";
 export * from "./experiment";
 export * from "./settings";
 export * from "./apis";
+export * from "./login";
diff --git a/app/src/pages/login/LoginPage.tsx b/app/src/pages/login/LoginPage.tsx
new file mode 100644
index 0000000000..ecd15e171c
--- /dev/null
+++ b/app/src/pages/login/LoginPage.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import { css } from "@emotion/react";
+
+import { Button, Flex, Form, TextField, View } from "@arizeai/components";
+
+import { Logo } from "@phoenix/components/nav/Logo";
+
+export function LoginPage() {
+  return (
+    <main
+      css={css`
+        padding-top: var(--ac-global-dimension-size-2000);
+        width: 100%;
+      `}
+    >
+      <View
+        borderColor="dark"
+        borderWidth="thin"
+        width="size-5000"
+        padding="size-400"
+        backgroundColor="dark"
+        marginStart="auto"
+        marginEnd="auto"
+        borderRadius="medium"
+      >
+        <Flex direction="column" gap="size-200" alignItems="center">
+          <View paddingBottom="size-400">
+            <Logo size={120} />
+          </View>
+        </Flex>
+        <Form action="/login" method="post">
+          <TextField
+            label="Email"
+            name="email"
+            isRequired
+            type="email"
+            placeholder="your email address"
+          />
+          <TextField
+            label="Password"
+            name="password"
+            type="password"
+            isRequired
+            placeholder="your password"
+          />
+          <div
+            css={css`
+              margin-top: var(--ac-global-dimension-size-400);
+              margin-bottom: var(--ac-global-dimension-size-50);
+              button {
+                width: 100%;
+              }
+            `}
+          >
+            <Button variant="primary" type="submit">
+              Login
+            </Button>
+          </div>
+        </Form>
+      </View>
+    </main>
+  );
+}
diff --git a/app/src/pages/login/index.tsx b/app/src/pages/login/index.tsx
new file mode 100644
index 0000000000..cb85a48cda
--- /dev/null
+++ b/app/src/pages/login/index.tsx
@@ -0,0 +1 @@
+export * from "./LoginPage";