diff --git a/ui/app/login/page.tsx b/ui/app/login/page.tsx
index 79f05c7423..a2e2464591 100644
--- a/ui/app/login/page.tsx
+++ b/ui/app/login/page.tsx
@@ -1,3 +1,38 @@
-import Password from '@/components/Password';
+'use client';
+import Image from 'next/image'
+import { useState } from 'react';
 
-export default function Login() { return <Password /> }
+import { Button } from '@/lib/Button';
+import { TextField } from '@/lib/TextField';
+import { Layout, LayoutMain } from '@/lib/Layout';
+
+export default function Password() {
+  const [pass, setPass] = useState("");
+  const [error, setError] = useState("");
+  return (
+  <Layout>
+      <LayoutMain alignSelf='center' justifySelf='center' width='xxLarge'>
+      <Image src="public/images/peerdb-combinedMark.svg" alt="PeerDB" width={512} />
+      {error && <div style={{
+        borderRadius:'8px',
+        fontWeight:'bold',
+        color:'#600',
+        backgroundColor:'#c66'
+        }}>{error}</div>}
+      Password: <TextField variant='simple' value={pass} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPass(e.target.value)} />
+      <Button
+        onClick={() => {
+          fetch('/api/login', {
+            method: 'POST',
+            body: JSON.stringify({password: pass}),
+          }).then((res: any) => {
+            setError(res.error);
+          });
+        }}
+      >
+        Login
+      </Button>
+    </LayoutMain>
+    </Layout>
+  );
+}
diff --git a/ui/app/page.tsx b/ui/app/page.tsx
index 37b2718978..13f1ebb374 100644
--- a/ui/app/page.tsx
+++ b/ui/app/page.tsx
@@ -1,5 +1,4 @@
 import Logout from '@/components/Logout';
-import Password from '@/components/Password';
 import SidebarComponent from '@/components/SidebarComponent';
 import { Header } from '@/lib/Header';
 import { Layout, LayoutMain } from '@/lib/Layout';
diff --git a/ui/components/Password.tsx b/ui/components/Password.tsx
deleted file mode 100644
index 2f02a357bb..0000000000
--- a/ui/components/Password.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client';
-import { Button } from '@/lib/Button';
-import { TextField } from '@/lib/TextField';
-import { useState } from 'react';
-
-export default function Password() {
-  const [pass, setPass] = useState("");
-  const [error, setError] = useState("");
-  return (
-    <>
-      {error && <div style={{
-        borderRadius:'8px',
-        fontWeight:'bold',
-        color:'#600',
-        backgroundColor:'#c66'
-        }}>{error}</div>}
-      Password: <TextField variant='simple' value={pass} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPass(e.target.value)} />
-      <Button
-        onClick={() => {
-          fetch('/api/login', {
-            method: 'POST',
-            body: JSON.stringify({password: pass}),
-          }).then((res: any) => {
-            setError(res.error);
-          });
-        }}
-      >
-        Login
-      </Button>
-    </>
-  );
-}
diff --git a/ui/middleware.ts b/ui/middleware.ts
index 30d92a9141..603addcb2f 100644
--- a/ui/middleware.ts
+++ b/ui/middleware.ts
@@ -6,6 +6,7 @@ export default function middleware(req: NextRequest) {
   if (req.nextUrl.pathname !== '/favicon.ico' &&
       req.nextUrl.pathname !== '/login' &&
       req.nextUrl.pathname !== '/api/login' &&
+      !req.nextUrl.pathname.startsWith("/public/") &&
       !req.nextUrl.pathname.startsWith("/_next/static/") &&
       process.env.PEERDB_PASSWORD &&
       req.cookies.get('auth')?.value !== process.env.PEERDB_PASSWORD) {