diff --git a/http/handler.go b/http/handler.go
index bdab80501..9bb3f742c 100644
--- a/http/handler.go
+++ b/http/handler.go
@@ -354,7 +354,7 @@ func (h *Handler) collectStats(next http.Handler) http.Handler {
 
 // latticeRoutes lists the frontend routes that do not directly correspond to
 // backend routes, and require special handling.
-var latticeRoutes = []string{"/tables", "/query", "/querybuilder"} // TODO somehow pull this from some metadata in the lattice directory
+var latticeRoutes = []string{"/tables", "/query", "/querybuilder", "/login"} // TODO somehow pull this from some metadata in the lattice directory
 
 // newRouter creates a new mux http router.
 func newRouter(handler *Handler) http.Handler {
diff --git a/lattice/src/App.tsx b/lattice/src/App.tsx
index f465bd480..bf55e0ace 100644
--- a/lattice/src/App.tsx
+++ b/lattice/src/App.tsx
@@ -11,6 +11,7 @@ import { MoleculaTablesContainer } from 'App/MoleculaTables';
 import { QueryContainer } from 'App/Query';
 import { QueryBuilderContainer } from 'App/QueryBuilder';
 import css from './App.module.scss';
+import Login from 'App/Login/Login';
 
 const App = () => {
   const [theme, setTheme] = useState<string>(
@@ -46,6 +47,7 @@ const App = () => {
               <Route path="/tables/:id?" component={MoleculaTablesContainer} />
               <Route exact path="/query" component={QueryContainer} />
               <Route exact path="/querybuilder" component={QueryBuilderContainer} />
+              <Route exact path="/login" component={Login} />
               <Route component={NotFound} />
             </Switch>
           </div>
diff --git a/lattice/src/App/Login/Login.tsx b/lattice/src/App/Login/Login.tsx
new file mode 100644
index 000000000..ebd4a1f7b
--- /dev/null
+++ b/lattice/src/App/Login/Login.tsx
@@ -0,0 +1,19 @@
+import LoginButton from './LoginButton';
+import { pilosa } from 'services/eventServices';
+
+function login() {
+  pilosa.get.login().then((res) => {
+    console.log(`login result:`, res);
+  });
+}
+
+function Login() {
+  return (
+    <>
+      <h6>Login</h6>
+      <LoginButton onClick={login} />
+    </>
+  );
+}
+
+export default Login;
diff --git a/lattice/src/App/Login/LoginButton.tsx b/lattice/src/App/Login/LoginButton.tsx
new file mode 100644
index 000000000..88b09634a
--- /dev/null
+++ b/lattice/src/App/Login/LoginButton.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+interface Props {
+  onClick: () => void;
+}
+
+const LoginButton: React.FC<Props> = ({ onClick }) => {
+  return <button onClick={onClick}>Login</button>;
+};
+
+export default LoginButton;
diff --git a/lattice/src/App/Login/index.ts b/lattice/src/App/Login/index.ts
new file mode 100644
index 000000000..a10c3a83a
--- /dev/null
+++ b/lattice/src/App/Login/index.ts
@@ -0,0 +1 @@
+export * from './Login';
diff --git a/lattice/src/services/eventServices.tsx b/lattice/src/services/eventServices.tsx
index 5ad7e19db..722ebc59f 100644
--- a/lattice/src/services/eventServices.tsx
+++ b/lattice/src/services/eventServices.tsx
@@ -14,6 +14,9 @@ export const pilosa = {
     status() {
       return api.get('/status');
     },
+    login() {
+      return api.get('/login');
+    },
     info() {
       return api.get('/info');
     },
diff --git a/lattice/src/shared/Nav/Nav.tsx b/lattice/src/shared/Nav/Nav.tsx
index e6d718420..52bfeb1dd 100644
--- a/lattice/src/shared/Nav/Nav.tsx
+++ b/lattice/src/shared/Nav/Nav.tsx
@@ -51,6 +51,13 @@ export const Nav = () => {
             </Typography>
           </ListItem>
         </NavLink>
+        <NavLink to="/login" activeClassName={css.activeNavLink}>
+          <ListItem className={css.navLink} button>
+            <Typography variant="subtitle2" color={textColor}>
+              Login
+            </Typography>
+          </ListItem>
+        </NavLink>
       </List>
     </div>
   );