diff --git a/src/lib/components/LoginDropdown.svelte b/src/lib/components/LoginDropdown.svelte
index 951bccd..200e682 100644
--- a/src/lib/components/LoginDropdown.svelte
+++ b/src/lib/components/LoginDropdown.svelte
@@ -1,7 +1,9 @@
-<script lang='ts'>
-    import { ndk } from '$lib/stores/nostr';
+<!-- ndk-svelte-components/LoginDropdown.svelte -->
+<script lang="ts">
+	import { ndk } from '$lib/stores/nostr';
+	import Nip07Button from './LoginModal/Nip07Button.svelte';
 </script>
 
 {#if !$ndk.signer}
-    <div></div>
-{/if}
\ No newline at end of file
+	<div></div>
+{/if}
diff --git a/src/lib/components/LoginModal/CollapsableDropdown.svelte b/src/lib/components/LoginModal/CollapsableDropdown.svelte
new file mode 100644
index 0000000..03dc595
--- /dev/null
+++ b/src/lib/components/LoginModal/CollapsableDropdown.svelte
@@ -0,0 +1,9 @@
+<!--lib/components/CollapsableDropdown.svelte-->
+<script lang="ts">
+</script>
+
+<div class="dropdown">
+	<div class="dropdown-trigger">
+		<button class="button" aria-haspopup="true" aria-controls="dropdown-menu"> </button>
+	</div>
+</div>
diff --git a/src/lib/components/LoginModal/Modal.svelte b/src/lib/components/LoginModal/Modal.svelte
new file mode 100644
index 0000000..f74aa1f
--- /dev/null
+++ b/src/lib/components/LoginModal/Modal.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let active = false;
+
+	function closeDialog() {
+		active = !active;
+	}
+</script>
+
+<div class="modal" class:is-active={active}>
+	<div class="modal-background"></div>
+	<div class="modal-card">
+		<header class="modal-card-head">
+			<p class="modal-card-title">Login</p>
+			<button class="delete" aria-label="close" on:click={closeDialog}></button>
+		</header>
+		<section class="modal-card-body"></section>
+	</div>
+</div>
diff --git a/src/lib/components/LoginModal/Nip07Button.svelte b/src/lib/components/LoginModal/Nip07Button.svelte
new file mode 100644
index 0000000..b487563
--- /dev/null
+++ b/src/lib/components/LoginModal/Nip07Button.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { ndk } from '$lib/stores/nostr';
+	import { login } from '$lib/utils/login';
+	import { currentUser } from '$lib/store';
+
+	let noNip07: boolean;
+
+	$: noNip07 = !window.nostr;
+
+	async function nip07Login() {
+		const user = await login($ndk, undefined, 'nip07');
+		if (!user) alert('Nip07 Login Failed');
+		else {
+			$currentUser = user;
+			localStorage.setItem('nostr-key-method', 'nip07');
+			localStorage.setItem('nostr-target-npub', $currentUser.npub);
+		}
+	}
+</script>
+
+{#if noNip07}
+	<div class="alert">
+		<span>No Nostr extension in your browser</span>
+		<div class="hidden">
+			<button class="button is-small">Need Help?</button>
+		</div>
+	</div>
+{:else}
+	<button on:click={nip07Login}>
+		<span>Use Browser Extension</span>
+	</button>
+{/if}
diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
index 2d9112c..1c82a3b 100644
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import {} from '@nostr-dev-kit/ndk-svelte-components';
 	import Avatar from '$lib/components/Avatar.svelte';
 	import { ndk } from '$lib/stores/nostr';
 	import { createEventDispatcher } from 'svelte';
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8e6de00..27792fd 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
 	import NavBar from '$lib/components/NavBar.svelte';
+	import LoginModal from '$lib/components/LoginModal/Modal.svelte';
 	import { ndk } from '$lib/stores/nostr';
 	import { NDKNip07Signer } from '@nostr-dev-kit/ndk';
 	import { onMount } from 'svelte';
 
+	let modalActive = false;
+
 	onMount(async () => {
 		await signIn();
 	});
 
 	async function signIn() {
+		modalActive = !modalActive;
 		console.debug('signIn called');
 		let signer;
 		try {
@@ -35,3 +39,4 @@
 
 <NavBar on:signin={signIn} />
 <slot></slot>
+<LoginModal active={modalActive} />