diff --git a/app/index.tsx b/app/index.tsx
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -23,6 +23,7 @@
       <Text>You are logged in as {handle}</Text>
       <Button title={"go to blog"} onPress={() => router.navigate("/blog/testaccount.maelstrom.dev")} />
       <Button title={"open composer"} onPress={() => router.navigate("/new")} />
+      <Button title={"logout"} onPress={() => authCtx.logout()} />
     </View>
   );
 }
diff --git a/app/login.tsx b/app/login.tsx
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -1,28 +1,64 @@
+import { Modal } from "@/src/components/primitive/Modal";
 import { Text } from "@/src/components/primitive/Text";
 import { AuthContext } from "@/src/context/AuthContext";
+import { useRouter } from "expo-router";
 import { useContext, useState } from "react";
-import { Button, TextInput, View } from "react-native";
+import { Button, StyleSheet, TextInput, View } from "react-native";
+
+const styles = StyleSheet.create({
+  modal: {
+    backgroundColor: "#5f5f5f",
+    borderRadius: 10,
+    padding: 20,
+  },
+  header: {
+    fontSize: 24,
+    marginBottom: 10,
+  },
+  label: {},
+  entry: {
+    backgroundColor: "#7c7c7c",
+    fontSize: 14,
+    padding: 5,
+    paddingHorizontal: 10,
+    marginVertical: 5,
+    borderRadius: 5,
+    color: "#fff",
+  },
+});
 
 export default function LoginPage() {
-  const authCtx = useContext(AuthContext)
-  const [handle, setHandle] = useState('')
-  const [password, setPassword] = useState('')
-  const [status, setStatus] = useState<'none' | 'logged-in'>('none')
+  const authCtx = useContext(AuthContext);
+  const router = useRouter()
+  const [handle, setHandle] = useState("");
+  const [password, setPassword] = useState("");
+  const [status, setStatus] = useState<"none" | "logged-in">("none");
 
   async function onLogin() {
     // await authCtx.login(handle)
-    await authCtx.loginWithPass(handle, password)
-    setStatus('logged-in')
+    await authCtx.loginWithPass(handle, password);
+    router.canDismiss() ? router.dismiss() : router.navigate("/")
   }
 
   return (
-    <View>
-      <TextInput value={handle} onChangeText={setHandle} />
-      <TextInput secureTextEntry value={password} onChangeText={setPassword} />
-      <Button title="Log in" onPress={onLogin}></Button>
-      {status === 'logged-in' && (
-        <Text>{"You're logged in!"}</Text>
-      )}
-    </View>
+    <Modal>
+      <View style={styles.modal}>
+        <Text style={styles.header}>Log in to bramblr</Text>
+        <Text style={styles.label}>ATProto handle/username</Text>
+        <TextInput
+          style={styles.entry}
+          value={handle}
+          onChangeText={setHandle}
+        />
+        <Text style={styles.label}>App password</Text>
+        <TextInput
+          style={styles.entry}
+          secureTextEntry
+          value={password}
+          onChangeText={setPassword}
+        />
+        <Button title="Log in" onPress={onLogin}></Button>
+      </View>
+    </Modal>
   );
 }
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@@ -1,8 +1,9 @@
 import AtpAgent, { Agent, CredentialSession } from "@atproto/api";
 import { createContext, useEffect, useState } from "react";
-import { BrowserOAuthClient } from "@atproto/oauth-client-browser";
+import { BrowserOAuthClient, Session } from "@atproto/oauth-client-browser";
 import { atprotoLoopbackClientMetadata } from "@atproto/oauth-types";
 import { Client } from "@atproto/lex";
+import { SessionManager } from "@atproto/api/dist/session-manager";
 
 export type AuthState = {
   agent: Agent | null;
@@ -10,12 +11,14 @@
 
   login: (handle: string) => Promise<void>;
   loginWithPass: (handle: string, password: string) => Promise<void>;
+  logout: () => void;
 };
 
 export const AuthContext = createContext<AuthState>({} as AuthState);
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
   const [agent, setAgent] = useState<Agent | null>(null);
+  const [session, setSession] = useState<CredentialSession | null>(null);
   const [oauthClient, setOauthClient] = useState<BrowserOAuthClient | null>(
     null,
   );
@@ -36,15 +39,16 @@
       // }
 
       // Try resume session
-      const sessionString = localStorage.getItem("session")
+      const sessionString = localStorage.getItem("session");
       if (sessionString) {
-        const session = new CredentialSession(new URL("https://bsky.social"))
-        const response = await session.resumeSession(JSON.parse(sessionString))
+        const session = new CredentialSession(new URL("https://bsky.social"));
+        const response = await session.resumeSession(JSON.parse(sessionString));
         if (!response.success) {
-          console.error("You need to log in again")
-          return
+          console.error("You need to log in again");
+          return;
         }
-        setAgent(new Agent(session))
+        setSession(session)
+        setAgent(new Agent(session));
       }
     }
     initialize();
@@ -66,8 +70,19 @@
 
     if (!response.success) throw "Fix me";
     setAgent(new Agent(session));
+    setSession(session);
 
-    localStorage.setItem("session", JSON.stringify(session.session!))
+    localStorage.setItem("session", JSON.stringify(session.session!));
+  }
+
+  async function logout() {
+    if (session) {
+      await session.logout();
+      localStorage.removeItem("session");
+      setSession(null);
+      setAgent(null);
+      console.log("Logged out")
+    }
   }
 
   return (
@@ -76,7 +91,8 @@
         agent: agent,
         client: agent && new Client(agent),
         login: login,
-        loginWithPass: loginWithPass
+        loginWithPass: loginWithPass,
+        logout: logout,
       }}
     >
       {children}
diff --git a/src/components/primitive/Modal.tsx b/src/components/primitive/Modal.tsx
--- a/src/components/primitive/Modal.tsx
+++ b/src/components/primitive/Modal.tsx
@@ -33,7 +33,7 @@
   } else {
     return (
       <TouchableWithoutFeedback
-        onPress={() => router.canDismiss() && router.dismiss()}
+        onPressIn={() => router.canDismiss() && router.dismiss()}
       >
         <View style={styles.container} {...props}>
           <View style={styles.wrapper}>