diff --git a/src/lib/components/LoginModal.svelte b/src/lib/components/LoginModal.svelte
index f77714b..8e21fa2 100644
--- a/src/lib/components/LoginModal.svelte
+++ b/src/lib/components/LoginModal.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { Button } from "flowbite-svelte";
-  import Login from './Login.svelte';
-  import { ndkSignedIn } from '$lib/ndk';
+  import { loginWithExtension, ndkSignedIn } from '$lib/ndk';
   
   const { show = false, onClose = () => {}, onLoginSuccess = () => {} } = $props<{
     show?: boolean;
@@ -9,36 +8,67 @@
     onLoginSuccess?: () => void;
   }>();
 
+  let signInFailed = $state<boolean>(false);
+  let errorMessage = $state<string>('');
+
   $effect(() => {
     if ($ndkSignedIn && show) {
       onLoginSuccess();
       onClose(new MouseEvent('click'));
     }
   });
+
+  async function handleSignInClick() {
+    try {
+      signInFailed = false;
+      errorMessage = '';
+      
+      const user = await loginWithExtension();
+      if (!user) {
+        throw new Error('The NIP-07 extension did not return a user.');
+      }
+    } catch (e) {
+      console.error(e);
+      signInFailed = true;
+      errorMessage = e instanceof Error ? e.message : 'Failed to sign in. Please try again.';
+    }
+  }
 </script>
 
 {#if show}
   <div class="fixed inset-0 z-50 flex items-center justify-center overflow-x-hidden overflow-y-auto outline-none focus:outline-none bg-gray-900 bg-opacity-50">
     <div class="relative w-auto my-6 mx-auto max-w-3xl">
-      <div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+      <div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white dark:bg-gray-800 outline-none focus:outline-none">
         <!-- Header -->
-        <div class="flex items-start justify-between p-5 border-b border-solid border-gray-300 rounded-t">
-          <h3 class="text-xl font-medium text-gray-900">Login Required</h3>
+        <div class="flex items-start justify-between p-5 border-b border-solid border-gray-300 dark:border-gray-600 rounded-t">
+          <h3 class="text-xl font-medium text-gray-900 dark:text-gray-100">Login Required</h3>
           <button 
             class="ml-auto bg-transparent border-0 text-gray-400 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
             onclick={onClose}
           >
-            <span class="bg-transparent text-gray-500 h-6 w-6 text-2xl block outline-none focus:outline-none">×</span>
+            <span class="bg-transparent text-gray-500 dark:text-gray-400 h-6 w-6 text-2xl block outline-none focus:outline-none">×</span>
           </button>
         </div>
         
         <!-- Body -->
         <div class="relative p-6 flex-auto">
-          <p class="text-base leading-relaxed text-gray-500 mb-4">
+          <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400 mb-6">
             You need to be logged in to submit an issue. Your form data will be preserved.
           </p>
-          <div class="flex justify-center">
-            <Login />
+          <div class="flex flex-col space-y-4">
+            <div class="flex justify-center">
+              <Button
+                color="primary"
+                onclick={handleSignInClick}
+              >
+                Sign in with Extension
+              </Button>
+            </div>
+            {#if signInFailed}
+              <div class="p-3 text-sm text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900 rounded">
+                {errorMessage}
+              </div>
+            {/if}
           </div>
         </div>
       </div>