diff --git a/ui/app/api/login/route.ts b/ui/app/api/login/route.ts
index 2b609ba66d..9ae9b961e0 100644
--- a/ui/app/api/login/route.ts
+++ b/ui/app/api/login/route.ts
@@ -5,8 +5,9 @@ export async function POST(request: Request) {
   if (process.env.PEERDB_PASSWORD !== password) {
     return new Response(JSON.stringify({ error: 'wrong password' }));
   }
-  cookies().set('password', password, {
+  cookies().set('auth', password, {
     expires: Date.now() + 24 * 60 * 60 * 1000,
+    secure: process.env.PEERDB_SECURE_COOKIES === 'true',
   });
   return new Response('{}');
 }
diff --git a/ui/app/api/logout/route.ts b/ui/app/api/logout/route.ts
new file mode 100644
index 0000000000..6ecd0f8971
--- /dev/null
+++ b/ui/app/api/logout/route.ts
@@ -0,0 +1,7 @@
+import {NextResponse} from 'next/server'
+import { cookies } from 'next/headers';
+
+export async function POST(req: Request) {
+  cookies().delete('auth');
+  return NextResponse.redirect(new URL('/login', req.url))
+}
diff --git a/ui/app/login/page.tsx b/ui/app/login/page.tsx
new file mode 100644
index 0000000000..79f05c7423
--- /dev/null
+++ b/ui/app/login/page.tsx
@@ -0,0 +1,3 @@
+import Password from '@/components/Password';
+
+export default function Login() { return <Password /> }
diff --git a/ui/app/page.tsx b/ui/app/page.tsx
index 4821dbcae8..37b2718978 100644
--- a/ui/app/page.tsx
+++ b/ui/app/page.tsx
@@ -1,3 +1,4 @@
+import Logout from '@/components/Logout';
 import Password from '@/components/Password';
 import SidebarComponent from '@/components/SidebarComponent';
 import { Header } from '@/lib/Header';
@@ -9,7 +10,7 @@ export default function Home() {
     <Layout sidebar={<SidebarComponent />}>
       <LayoutMain alignSelf='center' justifySelf='center' width='xxLarge'>
         <Header variant='largeTitle'>PeerDB Home Page</Header>
-        <>PEERDB_PASSWORD <Password /></>
+        {cookies().get('auth') && <Logout />}
       </LayoutMain>
     </Layout>
   );
diff --git a/ui/components/Logout.tsx b/ui/components/Logout.tsx
new file mode 100644
index 0000000000..72975b8fc3
--- /dev/null
+++ b/ui/components/Logout.tsx
@@ -0,0 +1,10 @@
+'use client';
+import { Button } from '@/lib/Button';
+
+export default function Logout() {
+  return (
+    <Button onClick={() => fetch('/api/logout', { method: 'POST' })}>
+      Logout
+    </Button>
+  );
+}
diff --git a/ui/components/Password.tsx b/ui/components/Password.tsx
index f0b2103c5d..2f02a357bb 100644
--- a/ui/components/Password.tsx
+++ b/ui/components/Password.tsx
@@ -1,17 +1,27 @@
 '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 (
     <>
-      <input id='password' type='password' />
+      {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: (document.getElementById('password') as any).value,
-            }),
+            body: JSON.stringify({password: pass}),
+          }).then((res: any) => {
+            setError(res.error);
           });
         }}
       >
diff --git a/ui/middleware.ts b/ui/middleware.ts
index ca4f345488..30d92a9141 100644
--- a/ui/middleware.ts
+++ b/ui/middleware.ts
@@ -3,11 +3,14 @@ import type {NextRequest} from 'next/server';
 import {NextResponse} from 'next/server'
 
 export default function middleware(req: NextRequest) {
-  if (req.nextUrl.pathname !== '/' &&
+  if (req.nextUrl.pathname !== '/favicon.ico' &&
+      req.nextUrl.pathname !== '/login' &&
+      req.nextUrl.pathname !== '/api/login' &&
       !req.nextUrl.pathname.startsWith("/_next/static/") &&
       process.env.PEERDB_PASSWORD &&
-      req.cookies.get('password')?.value !== process.env.PEERDB_PASSWORD) {
-    return new Response('{}', {status : 401});
+      req.cookies.get('auth')?.value !== process.env.PEERDB_PASSWORD) {
+    req.cookies.delete('auth');
+    return NextResponse.redirect(new URL('/login', req.url))
   }
   return NextResponse.next()
 }