diff --git a/README.md b/README.md
index 551671f..8042460 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ Find and replace all on all files (CMD+SHIFT+F):
 - Package name: @threenine/nuxstr-comments
 - Description: Nuxstr Comments
 -->
-
+![Nuxt Fathom module](https://res.cloudinary.com/threenine-co-uk/image/upload/v1733252921/nuxstr-comments_rk7pig.png)
 # Nuxstr Comments
 
 [![npm version][npm-version-src]][npm-version-href]
@@ -14,6 +14,7 @@ Find and replace all on all files (CMD+SHIFT+F):
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
+![]()
 Enable [nostr protocol](https://nostr.com/) based comment system on your Nuxt 4 based applications.
 
 - [✨  Release Notes](/CHANGELOG.md)
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 993789a..7e25b8f 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -17,7 +17,9 @@ export default createConfigForNuxt({
 })
   .append(
     {
-      ignores: ['playground/**/*'],
+      rules: {
+        'vue/multi-word-component-names': 'off',
+      },
 
     },
     // your custom flat config here...
diff --git a/package.json b/package.json
index f55c58d..9494a34 100644
--- a/package.json
+++ b/package.json
@@ -41,12 +41,12 @@
     "@nuxt/devtools": "^2.6.2",
     "@nuxt/eslint": "1.9.0",
     "@nuxt/eslint-config": "^1.9.0",
-    "@nuxt/kit": "^4.2.1",
+    "@nuxt/kit": "^4.3.1",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^4.2.1",
     "@nuxt/scripts": "0.11.10",
     "@nuxt/test-utils": "^3.19.2",
-    "@nuxt/ui": "^4.3.0",
+    "@nuxt/ui": "^4.5.1",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/vue": "^8.1.0",
     "@types/node": "latest",
@@ -54,7 +54,7 @@
     "changelogen": "^0.6.2",
     "eslint": "^9.35.0",
     "jsdom": "^26.1.0",
-    "nuxt": "^4.2.1",
+    "nuxt": "^4.3.1",
     "typescript": "~5.9.2",
     "vitest": "^3.2.4",
     "vue-tsc": "^3.0.6"
diff --git a/playground/app/app.config.ts b/playground/app/app.config.ts
index 9283995..e0693eb 100644
--- a/playground/app/app.config.ts
+++ b/playground/app/app.config.ts
@@ -1,84 +1,84 @@
 export default defineAppConfig({
 
-    ui: {
-      colors: {
-        primary: 'orange',
-        neutral: 'neutral'
+  ui: {
+    colors: {
+      primary: 'orange',
+      neutral: 'neutral',
+    },
+    chip: {
+      slots: {
+        root: 'relative inline-flex items-center justify-center shrink-0',
+        base: 'rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap',
       },
-      chip: {
-        slots: {
-          root: 'relative inline-flex items-center justify-center shrink-0',
-          base: 'rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap'
+      variants: {
+        color: {
+          primary: 'bg-primary',
+          secondary: 'bg-secondary',
+          success: 'bg-success',
+          info: 'bg-info',
+          warning: 'bg-warning',
+          error: 'bg-error',
+          neutral: 'bg-inverted',
+        },
+        size: {
+          '3xs': 'h-[4px] min-w-[4px] text-[4px]',
+          '2xs': 'h-[5px] min-w-[5px] text-[5px]',
+          'xs': 'h-[6px] min-w-[6px] text-[6px]',
+          'sm': 'h-[7px] min-w-[7px] text-[7px]',
+          'md': 'h-[8px] min-w-[8px] text-[8px]',
+          'lg': 'h-[9px] min-w-[9px] text-[9px]',
+          'xl': 'h-[10px] min-w-[10px] text-[10px]',
+          '2xl': 'h-[11px] min-w-[11px] text-[11px]',
+          '3xl': 'h-[12px] min-w-[12px] text-[12px]',
+        },
+        position: {
+          'top-right': 'top-0 right-0',
+          'bottom-right': 'bottom-0 right-0',
+          'top-left': 'top-0 left-0',
+          'bottom-left': 'bottom-0 left-0',
         },
-        variants: {
-          color: {
-            primary: 'bg-primary',
-            secondary: 'bg-secondary',
-            success: 'bg-success',
-            info: 'bg-info',
-            warning: 'bg-warning',
-            error: 'bg-error',
-            neutral: 'bg-inverted'
-          },
-          size: {
-            '3xs': 'h-[4px] min-w-[4px] text-[4px]',
-            '2xs': 'h-[5px] min-w-[5px] text-[5px]',
-            xs: 'h-[6px] min-w-[6px] text-[6px]',
-            sm: 'h-[7px] min-w-[7px] text-[7px]',
-            md: 'h-[8px] min-w-[8px] text-[8px]',
-            lg: 'h-[9px] min-w-[9px] text-[9px]',
-            xl: 'h-[10px] min-w-[10px] text-[10px]',
-            '2xl': 'h-[11px] min-w-[11px] text-[11px]',
-            '3xl': 'h-[12px] min-w-[12px] text-[12px]'
-          },
-          position: {
-            'top-right': 'top-0 right-0',
-            'bottom-right': 'bottom-0 right-0',
-            'top-left': 'top-0 left-0',
-            'bottom-left': 'bottom-0 left-0'
-          },
-          inset: {
-            false: ''
-          },
-          standalone: {
-            false: 'absolute'
-          }
+        inset: {
+          false: '',
+        },
+        standalone: {
+          false: 'absolute',
         },
-        compoundVariants: [
-          {
-            position: 'top-right',
-            inset: false,
-            class: '-translate-y-1/2 translate-x-1/2 transform'
-          },
-          {
-            position: 'bottom-right',
-            inset: false,
-            class: 'translate-y-1/2 translate-x-1/2 transform'
-          },
-          {
-            position: 'top-left',
-            inset: false,
-            class: '-translate-y-1/2 -translate-x-1/2 transform'
-          },
-          {
-            position: 'bottom-left',
-            inset: false,
-            class: 'translate-y-1/2 -translate-x-1/2 transform'
-          }
-        ],
-        defaultVariants: {
-          size: 'md',
-          color: 'primary',
-          position: 'top-right'
-        }
       },
+      compoundVariants: [
+        {
+          position: 'top-right',
+          inset: false,
+          class: '-translate-y-1/2 translate-x-1/2 transform',
+        },
+        {
+          position: 'bottom-right',
+          inset: false,
+          class: 'translate-y-1/2 translate-x-1/2 transform',
+        },
+        {
+          position: 'top-left',
+          inset: false,
+          class: '-translate-y-1/2 -translate-x-1/2 transform',
+        },
+        {
+          position: 'bottom-left',
+          inset: false,
+          class: 'translate-y-1/2 -translate-x-1/2 transform',
+        },
+      ],
+      defaultVariants: {
+        size: 'md',
+        color: 'primary',
+        position: 'top-right',
+      },
+    },
     icons: {
       light: 'i-ph-sun',
-      dark: 'i-ph-moon'
+      dark: 'i-ph-moon',
     },
     skeleton: {
-      base: 'animate-pulse rounded-md bg-elevated'
-    }
+      base: 'animate-pulse rounded-md bg-elevated',
+    },
 
   },
 })
diff --git a/playground/app/pages/another-page.vue b/playground/app/pages/another-page.vue
index d1bfaa3..6a9c702 100644
--- a/playground/app/pages/another-page.vue
+++ b/playground/app/pages/another-page.vue
@@ -2,8 +2,14 @@
 
 <template>
   <div>
-    <nuxt-link to="/" class="text-primary">Back</nuxt-link>
-    <nuxt-link to="/another" class="text-primary">Another</nuxt-link>
+    <nuxt-link
+      to="/"
+      class="text-primary"
+    >Back</nuxt-link>
+    <nuxt-link
+      to="/another"
+      class="text-primary"
+    >Another</nuxt-link>
     <nuxstr-comments />
   </div>
 </template>
diff --git a/playground/app/pages/another/deeper/index.vue b/playground/app/pages/another/deeper/index.vue
index 16cd91b..ff50583 100644
--- a/playground/app/pages/another/deeper/index.vue
+++ b/playground/app/pages/another/deeper/index.vue
@@ -3,7 +3,6 @@
 </script>
 
 <template>
-
   <nuxstr-comments />
 </template>
 
diff --git a/playground/app/pages/another/index.vue b/playground/app/pages/another/index.vue
index 99162c5..2723517 100644
--- a/playground/app/pages/another/index.vue
+++ b/playground/app/pages/another/index.vue
@@ -3,14 +3,14 @@
 </script>
 
 <template>
-
   <div>
-
-    <nuxt-link to="/another/deeper" class="text-primary">Another deeper</nuxt-link>
-    <u-separator></u-separator>
+    <nuxt-link
+      to="/another/deeper"
+      class="text-primary"
+    >Another deeper</nuxt-link>
+    <u-separator />
     <nuxstr-comments />
   </div>
-
 </template>
 
 <style scoped>
diff --git a/playground/app/pages/index.vue b/playground/app/pages/index.vue
index d2fae8c..8e6d980 100644
--- a/playground/app/pages/index.vue
+++ b/playground/app/pages/index.vue
@@ -4,12 +4,12 @@
 <template>
   <nuxt-layout name="default-layout">
     <UContainer>
-    <h1>Playground</h1>
-    <p>Index Page</p> <nuxt-link
-      to="another-page"
-      class="text-primary"
-    > Another Page</nuxt-link>
-    <NuxstrComments />
+      <h1>Playground</h1>
+      <p>Index Page</p> <nuxt-link
+        to="another-page"
+        class="text-primary"
+      > Another Page</nuxt-link>
+      <NuxstrComments />
     </UContainer>
   </nuxt-layout>
 </template>
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 147ff06..74adc8e 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -4,6 +4,6 @@ export default defineNuxtConfig({
   css: ['~/assets/css/main.css'],
   compatibilityDate: '2025-08-19',
   nuxstrComments: {
-    relays: ['wss://relay.threenine.services']
+    relays: ['ws://localhost:10547'],
   },
 })
diff --git a/src/module.ts b/src/module.ts
index 2836b37..6b46019 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -57,12 +57,12 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.hook('nitro:config', (nitroConfig) => {
       nitroConfig.externals = nitroConfig.externals || {}
       nitroConfig.externals.inline = nitroConfig.externals.inline || []
-      nitroConfig.externals.inline.push('tseep', 'nostr-tools', 'defu')
+      nitroConfig.externals.inline.push('nostr-tools', 'defu')
     })
 
     // Build transpilation (you already had this)
     nuxt.options.build.transpile = nuxt.options.build.transpile || []
-    nuxt.options.build.transpile.push('tseep', 'nostr-tools', 'defu')
+    nuxt.options.build.transpile.push('nostr-tools', 'defu')
 
     // Expose runtime config to plugin
     nuxt.options.runtimeConfig.public.nuxstrComments = defu(nuxt.options.runtimeConfig.public.nuxstrComments || {}, options)
diff --git a/src/runtime/classes/NostrManager.ts b/src/runtime/classes/NostrManager.ts
index 2154c3c..64b05ca 100644
--- a/src/runtime/classes/NostrManager.ts
+++ b/src/runtime/classes/NostrManager.ts
@@ -26,13 +26,16 @@ export class NostrManager {
     return NostrManager.instance
   }
 
-  public subscribe(filter: Filter, onEvent: (event: NToolEvent) => void) {
+  public subscribe(filter: Filter, onEvent: (event: NToolEvent) => void, onEose?: () => void) {
     return this.pool.subscribeMany(this.relays, filter, {
       onevent(event) {
         if (verifyEvent(event)) {
           onEvent(event)
         }
       },
+      oneose() {
+        if (onEose) onEose()
+      },
     })
   }
 
diff --git a/src/runtime/components/NuxstrComments.vue b/src/runtime/components/NuxstrComments.vue
index b8575e4..23f68e9 100644
--- a/src/runtime/components/NuxstrComments.vue
+++ b/src/runtime/components/NuxstrComments.vue
@@ -1,12 +1,29 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import useNuxstr from '../composables/useNuxstr'
 import useComments from '../composables/useComments'
+import SignInModal from './SignInModal.vue'
 
 const props = defineProps<{ contentId?: string }>()
-const { login, isLoggedIn } = useNuxstr()
+const emit = defineEmits(['querying', 'completed', 'no-comments'])
+
+const { isLoggedIn } = useNuxstr()
 const { comments, subscribeComments, loading } = useComments(props.contentId)
 
+const isSignInModalOpen = ref(false)
+
+watch(loading, (isLoading) => {
+  if (isLoading) {
+    emit('querying')
+  }
+  else {
+    emit('completed')
+    if (comments.value.length === 0) {
+      emit('no-comments')
+    }
+  }
+})
+
 onMounted(() => {
   subscribeComments()
 })
@@ -23,16 +40,16 @@ onMounted(() => {
         v-if="!isLoggedIn"
         class="text-sm text-muted-foreground"
       >
-        <u-tooltip text="Sign in with NIP07 browser extension like Alby or nos2fx to comment">
-          <UButton
-            color="primary"
-            variant="solid"
-            leading-icon="game-icons:ostrich"
-            @click="login"
-          >
-            Sign in
-          </UButton>
-        </u-tooltip>
+        <UButton
+          color="primary"
+          variant="solid"
+          leading-icon="game-icons:ostrich"
+          @click="isSignInModalOpen = true"
+        >
+          Sign in
+        </UButton>
+
+        <SignInModal v-model:open="isSignInModalOpen" />
       </div>
     </div>
 
@@ -46,8 +63,12 @@ onMounted(() => {
     <div class="space-y-4">
       <div
         v-if="loading"
+        class="space-y-4"
       >
-        <scaffold-comment />
+        <scaffold-comment
+          v-for="n in 3"
+          :key="n"
+        />
       </div>
 
       <div
@@ -55,7 +76,13 @@ onMounted(() => {
         class="space-y-6"
       >
         <div v-if="comments.length === 0">
-          <scaffold-comment />
+          <UEmpty
+            icon="i-lucide-message-square-off"
+            title="No comments yet"
+            description="Be the first to share your thoughts!"
+            variant="subtle"
+            size="sm"
+          />
         </div>
         <UCard
           v-for="c in comments"
diff --git a/src/runtime/components/ScaffoldComment.vue b/src/runtime/components/ScaffoldComment.vue
index 9ddabb8..a0d061c 100644
--- a/src/runtime/components/ScaffoldComment.vue
+++ b/src/runtime/components/ScaffoldComment.vue
@@ -3,21 +3,19 @@
 </script>
 
 <template>
-  <div>
-    <p class="text-xs">
-      No comments available
-    </p>
-    <UCard
-      variant="subtle"
-      class="mt-auto"
-      :ui="{ header: 'flex items-center gap-1.5 text-dimmed' }"
-    >
-      <span><USkeleton class="h-4 w-5 rounded-full" /></span><USkeleton class="h-4" />
-      <div class="mt-3">
-        <USkeleton class="h-4" />
-      </div>
-    </UCard>
-  </div>
+  <UCard
+    variant="subtle"
+    class="mt-auto"
+    :ui="{ header: 'flex items-center gap-1.5 text-dimmed' }"
+  >
+    <div class="flex items-center gap-1.5">
+      <USkeleton class="h-4 w-5 rounded-full" /><USkeleton class="h-4" />
+    </div>
+
+    <div class="mt-3 space-y-2">
+      <USkeleton class="h-4" />
+    </div>
+  </UCard>
 </template>
 
 <style scoped>
diff --git a/src/runtime/components/SignInModal.vue b/src/runtime/components/SignInModal.vue
new file mode 100644
index 0000000..4029f1f
--- /dev/null
+++ b/src/runtime/components/SignInModal.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import Extension from './signin/Extension.vue'
+
+const open = defineModel<boolean>('open', { default: false })
+
+function handleSuccess() {
+  open.value = false
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    title="Sign in to Comment"
+    description="Choose your preferred way to sign in with Nostr."
+  >
+    <template #body>
+      <div class="space-y-6">
+        <!-- Nostr Education -->
+        <div class="p-4 rounded-lg bg-muted/50">
+          <div class="flex items-center gap-2 mb-2 text-sm font-semibold">
+            <UIcon
+              name="i-lucide-help-circle"
+              class="w-4 h-4"
+            />
+            What is Nostr?
+          </div>
+          <p class="text-xs leading-relaxed text-muted-foreground">
+            Nostr is a decentralized protocol for social media. Instead of a username and password, you use a cryptographic key pair.
+            Your "public key" is your identity, and your "private key" is used to sign messages.  <a
+              href="https://threenine.blog/posts/what-is-nostr"
+              target="_blank"
+              class="underline hover:text-primary text-primary"
+            >Learn more...</a>
+          </p>
+        </div>
+
+        <!-- Sign-in Options -->
+        <div class="space-y-4">
+          <Extension @login-success="handleSuccess" />
+        </div>
+
+        <!-- Footer Info -->
+        <div class="pt-4 border-t border-border">
+          <p class="text-[10px] text-center text-muted-foreground uppercase tracking-wider font-medium">
+            Privacy First
+          </p>
+          <p class="mt-1 text-xs text-center text-muted-foreground">
+            We never see your private key. Signing happens directly in your browser or extension.
+          </p>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>
diff --git a/src/runtime/components/signin/Extension.vue b/src/runtime/components/signin/Extension.vue
new file mode 100644
index 0000000..8a6fa93
--- /dev/null
+++ b/src/runtime/components/signin/Extension.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import useNuxstr from '../../composables/useNuxstr'
+
+const { login } = useNuxstr()
+
+const emit = defineEmits(['login-success'])
+
+async function handleLogin() {
+  await login()
+  emit('login-success')
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex items-start gap-3 p-4 border rounded-lg border-primary/20 bg-primary/5">
+      <UIcon
+        name="i-lucide-info"
+        class="w-5 h-5 mt-0.5 text-primary"
+      />
+      <div class="text-sm">
+        <p class="font-medium text-primary">
+          Browser Extension (NIP-07)
+        </p>
+        <p class="mt-1 text-muted-foreground">
+          Use a browser extension like Diogel, Alby or nos2x. This is the most secure way to sign in without sharing your private key.
+        </p>
+      </div>
+    </div>
+
+    <UButton
+      block
+      color="primary"
+      size="lg"
+      icon="game-icons:ostrich"
+      label="Sign in with Extension"
+      @click="handleLogin"
+    />
+
+    <p class="text-xs text-center text-muted-foreground">
+      Don't have an extension?
+      <a
+        href="https://threenine.io/products/diogel"
+        target="_blank"
+        class="underline hover:text-primary"
+      >Diogel</a> or
+      <a
+        href="https://getalby.com/"
+        target="_blank"
+        class="underline hover:text-primary"
+      >Get Alby</a> or
+      <a
+        href="https://github.com/fiatjaf/nos2x"
+        target="_blank"
+        class="underline hover:text-primary"
+      >nos2x</a>
+    </p>
+  </div>
+</template>
diff --git a/src/runtime/composables/useComments.ts b/src/runtime/composables/useComments.ts
index 1f59165..fc77eab 100644
--- a/src/runtime/composables/useComments.ts
+++ b/src/runtime/composables/useComments.ts
@@ -49,24 +49,31 @@ function useComments(customContentId?: string) {
   }
 
   async function subscribeComments() {
+    loading.value = true
     const filter: Filter = {
       kinds: [1111], // NDKKind.GenericReply is 22
       ['#t']: [tagValue()],
       limit: 100,
     }
 
-    subscribe(filter, async (event: Event) => {
-      if (commentsData.value.some(c => c.id === event.id)) return
-      const comment: Comment = {
-        id: event.id,
-        pubkey: event.pubkey,
-        created_at: event.created_at,
-        content: event.content,
-        profile: undefined,
-      }
-      comment.profile = await fetchProfile(event.pubkey)
-      commentsData.value.push(comment)
-    })
+    subscribe(
+      filter,
+      async (event: Event) => {
+        if (commentsData.value.some(c => c.id === event.id)) return
+        const comment: Comment = {
+          id: event.id,
+          pubkey: event.pubkey,
+          created_at: event.created_at,
+          content: event.content,
+          profile: undefined,
+        }
+        comment.profile = await fetchProfile(event.pubkey)
+        commentsData.value.push(comment)
+      },
+      () => {
+        loading.value = false
+      },
+    )
   }
 
   async function postComment(comment: string) {
diff --git a/src/runtime/composables/useNostr.ts b/src/runtime/composables/useNostr.ts
index 7060948..1664add 100644
--- a/src/runtime/composables/useNostr.ts
+++ b/src/runtime/composables/useNostr.ts
@@ -11,8 +11,8 @@ export const useNostr = (relays?: string[]) => {
   const effectiveRelays = relays || opts.relays || []
   const nostrManager = NostrManager.getInstance(effectiveRelays)
 
-  const subscribe = (filter: Filter, onEvent: (event: Event) => void) => {
-    return nostrManager.subscribe(filter, onEvent)
+  const subscribe = (filter: Filter, onEvent: (event: Event) => void, onEose?: () => void) => {
+    return nostrManager.subscribe(filter, onEvent, onEose)
   }
 
   const publish = (event: Event) => {