diff --git a/package-lock.json b/package-lock.json
index b1a2cf4..3486759 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "qr-scanner": "^1.4.2",
         "qrcode": "^1.5.4",
         "radix-vue": "^1.9.13",
-        "reka-ui": "^2.5.0",
+        "reka-ui": "^2.7.0",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7",
         "unique-names-generator": "^4.7.1",
@@ -12172,9 +12172,9 @@
       }
     },
     "node_modules/reka-ui": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.5.0.tgz",
-      "integrity": "sha512-81aMAmJeVCy2k0E6x7n1kypDY6aM1ldLis5+zcdV1/JtoAlSDck5OBsyLRJU9CfgbrQp1ImnRnBSmC4fZ2fkZQ==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.7.0.tgz",
+      "integrity": "sha512-m+XmxQN2xtFzBP3OAdIafKq7C8OETo2fqfxcIIxYmNN2Ch3r5oAf6yEYCIJg5tL/yJU2mHqF70dCCekUkrAnXA==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/dom": "^1.6.13",
diff --git a/package.json b/package.json
index 304528e..00b5554 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.4",
     "radix-vue": "^1.9.13",
-    "reka-ui": "^2.5.0",
+    "reka-ui": "^2.7.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "unique-names-generator": "^4.7.1",
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
index ba8df07..82ca06c 100644
Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
index 84495b0..8d9e452 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/icon-192.png b/public/icon-192.png
index 17abda4..4e6b3a3 100644
Binary files a/public/icon-192.png and b/public/icon-192.png differ
diff --git a/public/icon-512.png b/public/icon-512.png
index 3819dee..94f8c6b 100644
Binary files a/public/icon-512.png and b/public/icon-512.png differ
diff --git a/public/icon-maskable-192.png b/public/icon-maskable-192.png
index b280cd5..738f5f1 100644
Binary files a/public/icon-maskable-192.png and b/public/icon-maskable-192.png differ
diff --git a/public/icon-maskable-512.png b/public/icon-maskable-512.png
index bdd4754..3c734e6 100644
Binary files a/public/icon-maskable-512.png and b/public/icon-maskable-512.png differ
diff --git a/src/App.vue b/src/App.vue
index 127cdd6..559d0bf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import Navbar from '@/components/layout/Navbar.vue'
-import Footer from '@/components/layout/Footer.vue'
+import AppLayout from '@/components/layout/AppLayout.vue'
 import LoginDialog from '@/components/auth/LoginDialog.vue'
 import { Toaster } from '@/components/ui/sonner'
 import 'vue-sonner/style.css'
@@ -20,20 +19,18 @@ useTheme()
 // Initialize preloader
 const marketPreloader = useMarketPreloader()
 
-// Relay hub initialization is now handled by the base module
-
-// Hide navbar on login page
-const showNavbar = computed(() => {
+// Show layout on all pages except login
+const showLayout = computed(() => {
   return route.path !== '/login'
 })
 
 async function handleLoginSuccess() {
   showLoginDialog.value = false
   toast.success('Welcome back!')
-  
+
   // Trigger preloading after successful login
   marketPreloader.preloadMarket()
-  
+
   // Chat initialization is now handled by the chat module
 }
 
@@ -62,21 +59,14 @@ watch(() => auth.isAuthenticated.value, async (isAuthenticated) => {
 
 <template>
   <div class="min-h-screen bg-background font-sans antialiased">
-    <div class="relative flex min-h-screen flex-col"
-      style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
-      <header
-        v-if="showNavbar"
-        class="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <nav class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 flex h-14 lg:h-16 xl:h-20 items-center justify-between">
-          <Navbar />
-        </nav>
-      </header>
+    <!-- Sidebar layout for authenticated pages -->
+    <AppLayout v-if="showLayout">
+      <router-view />
+    </AppLayout>
 
-      <main class="flex-1">
-        <router-view />
-      </main>
-
-      <Footer v-if="showNavbar" />
+    <!-- Login page without sidebar -->
+    <div v-else class="min-h-screen">
+      <router-view />
     </div>
 
     <!-- Toast notifications -->
diff --git a/src/app.ts b/src/app.ts
index 459283e..5ee12b8 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -60,7 +60,7 @@ export async function createAppInstance() {
       {
         path: '/login',
         name: 'login',
-        component: () => import('./pages/Login.vue'),
+        component: () => import('./pages/LoginDemo.vue'),
         meta: { requiresAuth: false }
       },
       // Pre-register module routes
diff --git a/src/assets/logo.png b/src/assets/logo.png
index 489be52..85b3aa6 100644
Binary files a/src/assets/logo.png and b/src/assets/logo.png differ
diff --git a/src/components/layout/AppLayout.vue b/src/components/layout/AppLayout.vue
new file mode 100644
index 0000000..aac73c2
--- /dev/null
+++ b/src/components/layout/AppLayout.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import AppSidebar from './AppSidebar.vue'
+import AppTopBar from './AppTopBar.vue'
+import MobileDrawer from './MobileDrawer.vue'
+
+const sidebarOpen = ref(false)
+
+const openSidebar = () => {
+  sidebarOpen.value = true
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <!-- Mobile Drawer -->
+    <MobileDrawer v-model:open="sidebarOpen" />
+
+    <!-- Desktop Sidebar (fixed left) -->
+    <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
+      <AppSidebar />
+    </div>
+
+    <!-- Main content area (offset on desktop) -->
+    <div class="lg:pl-72">
+      <!-- Top Bar -->
+      <AppTopBar @open-sidebar="openSidebar" />
+
+      <!-- Main Content -->
+      <main
+        class="flex-1"
+        style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)"
+      >
+        <slot />
+      </main>
+    </div>
+  </div>
+</template>
diff --git a/src/components/layout/AppSidebar.vue b/src/components/layout/AppSidebar.vue
new file mode 100644
index 0000000..351ef6a
--- /dev/null
+++ b/src/components/layout/AppSidebar.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useTheme } from '@/components/theme-provider'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import {
+  Home,
+  Calendar,
+  ShoppingBag,
+  MessageSquare,
+  Settings,
+  Sun,
+  Moon
+} from 'lucide-vue-next'
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
+import { useModularNavigation } from '@/composables/useModularNavigation'
+
+const route = useRoute()
+const { t } = useI18n()
+const { theme, setTheme } = useTheme()
+const { navigation } = useModularNavigation()
+
+// Map navigation items to icons
+const navIcons: Record<string, any> = {
+  '/': Home,
+  '/events': Calendar,
+  '/market': ShoppingBag,
+  '/chat': MessageSquare,
+}
+
+const toggleTheme = () => {
+  setTheme(theme.value === 'dark' ? 'light' : 'dark')
+}
+
+// Check if route is active
+const isActive = (href: string) => {
+  if (href === '/') {
+    return route.path === '/'
+  }
+  return route.path.startsWith(href)
+}
+</script>
+
+<template>
+  <div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-border bg-background px-6 pb-4">
+    <!-- Logo -->
+    <div class="flex h-16 shrink-0 items-center">
+      <router-link to="/" class="flex items-center gap-2">
+        <img
+          src="@/assets/logo.png"
+          alt="Logo"
+          class="h-8 w-8"
+        />
+        <span class="font-semibold text-foreground">{{ t('nav.title') }}</span>
+      </router-link>
+    </div>
+
+    <!-- Navigation -->
+    <nav class="flex flex-1 flex-col">
+      <ul role="list" class="flex flex-1 flex-col gap-y-7">
+        <!-- Primary Navigation -->
+        <li>
+          <ul role="list" class="-mx-2 space-y-1">
+            <li v-for="item in navigation" :key="item.href">
+              <router-link
+                :to="item.href"
+                :class="[
+                  isActive(item.href)
+                    ? 'bg-accent text-accent-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+                  'group flex gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
+                ]"
+              >
+                <component
+                  :is="navIcons[item.href] || Home"
+                  :class="[
+                    isActive(item.href)
+                      ? 'text-accent-foreground'
+                      : 'text-muted-foreground group-hover:text-accent-foreground',
+                    'h-5 w-5 shrink-0'
+                  ]"
+                />
+                {{ item.name }}
+              </router-link>
+            </li>
+          </ul>
+        </li>
+
+        <!-- Secondary Section (placeholder for future use) -->
+        <li>
+          <div class="text-xs font-semibold text-muted-foreground">
+            <!-- Future: Your stalls, subscriptions, etc. -->
+          </div>
+          <ul role="list" class="-mx-2 mt-2 space-y-1">
+            <!-- Empty for now -->
+          </ul>
+        </li>
+
+        <!-- Footer: Settings & Preferences -->
+        <li class="mt-auto space-y-2">
+          <Separator />
+
+          <!-- Theme & Language -->
+          <div class="flex items-center justify-between px-2 py-1">
+            <Button
+              variant="ghost"
+              size="icon"
+              @click="toggleTheme"
+              class="h-8 w-8"
+            >
+              <Sun v-if="theme === 'dark'" class="h-4 w-4" />
+              <Moon v-else class="h-4 w-4" />
+            </Button>
+            <LanguageSwitcher />
+          </div>
+
+          <!-- Settings Link -->
+          <router-link
+            to="/settings"
+            :class="[
+              isActive('/settings')
+                ? 'bg-accent text-accent-foreground'
+                : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+              'group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
+            ]"
+          >
+            <Settings class="h-5 w-5 shrink-0" />
+            Settings
+          </router-link>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
diff --git a/src/components/layout/AppTopBar.vue b/src/components/layout/AppTopBar.vue
new file mode 100644
index 0000000..3fae1d2
--- /dev/null
+++ b/src/components/layout/AppTopBar.vue
@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+  Menu,
+  Bell,
+  ShoppingCart,
+  User,
+  LogOut,
+  Wallet,
+  Ticket,
+  Store,
+  Activity,
+} from 'lucide-vue-next'
+import CurrencyDisplay from '@/components/ui/CurrencyDisplay.vue'
+import LoginDialog from '@/components/auth/LoginDialog.vue'
+import ProfileDialog from '@/components/auth/ProfileDialog.vue'
+import { LogoutConfirmDialog } from '@/components/ui/LogoutConfirmDialog'
+import { auth } from '@/composables/useAuthService'
+import { useModularNavigation } from '@/composables/useModularNavigation'
+import { useMarketStore } from '@/modules/market/stores/market'
+import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
+import appConfig from '@/app.config'
+import { ref } from 'vue'
+
+const emit = defineEmits<{
+  (e: 'openSidebar'): void
+}>()
+
+const router = useRouter()
+const { userMenuItems } = useModularNavigation()
+const marketStore = useMarketStore()
+
+const showLoginDialog = ref(false)
+const showProfileDialog = ref(false)
+const showLogoutConfirm = ref(false)
+
+// Get PaymentService for wallet balance
+const paymentService = tryInjectService(SERVICE_TOKENS.PAYMENT_SERVICE) as any
+
+// Get ChatService for notifications
+const chatService = tryInjectService(SERVICE_TOKENS.CHAT_SERVICE) as any
+
+// Wallet balance
+const totalBalance = computed(() => {
+  return paymentService?.totalBalance || 0
+})
+
+// Combined notifications (chat unread for now)
+const totalNotifications = computed(() => {
+  return chatService?.totalUnreadCount?.value || 0
+})
+
+// Cart item count
+const cartItemCount = computed(() => {
+  return marketStore.totalCartItems
+})
+
+// Check if market module is enabled
+const isMarketEnabled = computed(() => {
+  return appConfig.modules.market?.enabled ?? false
+})
+
+const openLoginDialog = () => {
+  showLoginDialog.value = true
+}
+
+const openProfileDialog = () => {
+  showProfileDialog.value = true
+}
+
+const handleLogout = async () => {
+  try {
+    auth.logout()
+    router.push('/login')
+  } catch (error) {
+    console.error('Logout failed:', error)
+  }
+}
+
+const navigateToNotifications = () => {
+  // For now, navigate to chat since that's our notification source
+  router.push('/chat')
+}
+</script>
+
+<template>
+  <div
+    class="sticky top-0 z-40 flex h-14 shrink-0 items-center gap-x-4 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-4 sm:gap-x-6 sm:px-6 lg:px-8"
+  >
+    <!-- Mobile menu button -->
+    <Button
+      variant="ghost"
+      size="icon"
+      class="-m-2.5 p-2.5 lg:hidden"
+      @click="emit('openSidebar')"
+    >
+      <span class="sr-only">Open sidebar</span>
+      <Menu class="h-5 w-5" />
+    </Button>
+
+    <!-- Separator (mobile only) -->
+    <div class="h-6 w-px bg-border lg:hidden" aria-hidden="true" />
+
+    <!-- Spacer / Future search area -->
+    <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
+      <!-- Search placeholder for future -->
+      <div class="flex-1">
+        <!-- Future: Global search input -->
+      </div>
+
+      <!-- Right side actions -->
+      <div class="flex items-center gap-x-4 lg:gap-x-6">
+        <!-- Notifications (combined) -->
+        <Button
+          v-if="auth.isAuthenticated.value"
+          variant="ghost"
+          size="icon"
+          class="relative"
+          @click="navigateToNotifications"
+        >
+          <span class="sr-only">View notifications</span>
+          <Bell class="h-5 w-5" />
+          <Badge
+            v-if="totalNotifications > 0"
+            class="absolute -top-1 -right-1 h-4 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full"
+          >
+            {{ totalNotifications > 99 ? '99+' : totalNotifications }}
+          </Badge>
+        </Button>
+
+        <!-- Cart (only when market is enabled) -->
+        <router-link
+          v-if="auth.isAuthenticated.value && isMarketEnabled"
+          to="/cart"
+          class="relative flex items-center justify-center"
+        >
+          <Button variant="ghost" size="icon" class="relative">
+            <span class="sr-only">Shopping cart</span>
+            <ShoppingCart class="h-5 w-5" />
+            <Badge
+              v-if="cartItemCount > 0"
+              class="absolute -top-1 -right-1 h-4 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full"
+            >
+              {{ cartItemCount > 99 ? '99+' : cartItemCount }}
+            </Badge>
+          </Button>
+        </router-link>
+
+        <!-- Separator -->
+        <div class="hidden lg:block lg:h-6 lg:w-px lg:bg-border" aria-hidden="true" />
+
+        <!-- Profile dropdown -->
+        <div v-if="auth.isAuthenticated.value">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" class="relative flex items-center gap-2">
+                <User class="h-5 w-5" />
+                <span class="hidden lg:block text-sm font-semibold truncate max-w-32">
+                  {{ auth.userDisplay.value?.name || 'Anonymous' }}
+                </span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" class="w-56">
+              <!-- Wallet Balance -->
+              <DropdownMenuItem @click="() => router.push('/wallet')" class="gap-2">
+                <Wallet class="h-4 w-4 text-muted-foreground" />
+                <CurrencyDisplay :balance-msat="totalBalance" />
+              </DropdownMenuItem>
+
+              <DropdownMenuSeparator />
+
+              <!-- Profile -->
+              <DropdownMenuItem @click="openProfileDialog" class="gap-2">
+                <User class="h-4 w-4" />
+                Profile
+              </DropdownMenuItem>
+
+              <!-- User menu items (from modules) -->
+              <DropdownMenuItem
+                v-for="item in userMenuItems"
+                :key="item.href"
+                @click="() => router.push(item.href)"
+                class="gap-2"
+              >
+                <component
+                  :is="item.icon === 'Ticket' ? Ticket : item.icon === 'Store' ? Store : Activity"
+                  class="h-4 w-4"
+                />
+                {{ item.name }}
+              </DropdownMenuItem>
+
+              <DropdownMenuSeparator />
+
+              <!-- Logout -->
+              <DropdownMenuItem
+                @click="showLogoutConfirm = true"
+                class="gap-2 text-destructive"
+              >
+                <LogOut class="h-4 w-4" />
+                Logout
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        <!-- Login button (when not authenticated) -->
+        <Button
+          v-else
+          variant="outline"
+          size="sm"
+          @click="openLoginDialog"
+          class="gap-2"
+        >
+          <User class="h-4 w-4" />
+          <span class="hidden sm:inline">Login</span>
+        </Button>
+      </div>
+    </div>
+
+    <!-- Login Dialog -->
+    <LoginDialog v-model:is-open="showLoginDialog" />
+
+    <!-- Profile Dialog -->
+    <ProfileDialog v-model:is-open="showProfileDialog" />
+
+    <!-- Logout Confirm Dialog -->
+    <LogoutConfirmDialog
+      v-model:is-open="showLogoutConfirm"
+      @confirm="handleLogout"
+    />
+  </div>
+</template>
diff --git a/src/components/layout/MobileDrawer.vue b/src/components/layout/MobileDrawer.vue
new file mode 100644
index 0000000..20c4dad
--- /dev/null
+++ b/src/components/layout/MobileDrawer.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useTheme } from '@/components/theme-provider'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import {
+  Home,
+  Calendar,
+  ShoppingBag,
+  MessageSquare,
+  Settings,
+  Sun,
+  Moon,
+} from 'lucide-vue-next'
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
+import { useModularNavigation } from '@/composables/useModularNavigation'
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+}>()
+
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n()
+const { theme, setTheme } = useTheme()
+const { navigation } = useModularNavigation()
+
+// Map navigation items to icons
+const navIcons: Record<string, any> = {
+  '/': Home,
+  '/events': Calendar,
+  '/market': ShoppingBag,
+  '/chat': MessageSquare,
+}
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (value) => emit('update:open', value),
+})
+
+const toggleTheme = () => {
+  setTheme(theme.value === 'dark' ? 'light' : 'dark')
+}
+
+// Check if route is active
+const isActive = (href: string) => {
+  if (href === '/') {
+    return route.path === '/'
+  }
+  return route.path.startsWith(href)
+}
+
+// Navigate and close drawer
+const navigateTo = (href: string) => {
+  router.push(href)
+  isOpen.value = false
+}
+</script>
+
+<template>
+  <Sheet v-model:open="isOpen">
+    <SheetContent side="left" class="w-72 p-0">
+      <div class="flex h-full flex-col">
+        <!-- Header with Logo -->
+        <SheetHeader class="px-6 py-4 border-b border-border">
+          <SheetTitle class="flex items-center gap-2">
+            <img
+              src="@/assets/logo.png"
+              alt="Logo"
+              class="h-8 w-8"
+            />
+            <span class="font-semibold">{{ t('nav.title') }}</span>
+          </SheetTitle>
+        </SheetHeader>
+
+        <!-- Navigation -->
+        <nav class="flex-1 overflow-y-auto px-4 py-4">
+          <ul role="list" class="space-y-1">
+            <li v-for="item in navigation" :key="item.href">
+              <button
+                @click="navigateTo(item.href)"
+                :class="[
+                  isActive(item.href)
+                    ? 'bg-accent text-accent-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+                  'group flex w-full gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
+                ]"
+              >
+                <component
+                  :is="navIcons[item.href] || Home"
+                  :class="[
+                    isActive(item.href)
+                      ? 'text-accent-foreground'
+                      : 'text-muted-foreground group-hover:text-accent-foreground',
+                    'h-5 w-5 shrink-0'
+                  ]"
+                />
+                {{ item.name }}
+              </button>
+            </li>
+          </ul>
+
+          <!-- Secondary Section Placeholder -->
+          <div class="mt-8">
+            <div class="text-xs font-semibold text-muted-foreground px-2">
+              <!-- Future: Your stalls, subscriptions, etc. -->
+            </div>
+          </div>
+        </nav>
+
+        <!-- Footer -->
+        <div class="border-t border-border px-4 py-4 space-y-2">
+          <!-- Theme & Language -->
+          <div class="flex items-center justify-between px-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              @click="toggleTheme"
+              class="h-8 w-8"
+            >
+              <Sun v-if="theme === 'dark'" class="h-4 w-4" />
+              <Moon v-else class="h-4 w-4" />
+            </Button>
+            <LanguageSwitcher />
+          </div>
+
+          <Separator />
+
+          <!-- Settings Link -->
+          <button
+            @click="navigateTo('/settings')"
+            :class="[
+              isActive('/settings')
+                ? 'bg-accent text-accent-foreground'
+                : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+              'group flex w-full gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
+            ]"
+          >
+            <Settings class="h-5 w-5 shrink-0" />
+            Settings
+          </button>
+        </div>
+      </div>
+    </SheetContent>
+  </Sheet>
+</template>
diff --git a/src/components/layout/Navbar.vue b/src/components/layout/Navbar.old.vue
similarity index 97%
rename from src/components/layout/Navbar.vue
rename to src/components/layout/Navbar.old.vue
index 07fbba1..6eb160f 100644
--- a/src/components/layout/Navbar.vue
+++ b/src/components/layout/Navbar.old.vue
@@ -1,3 +1,13 @@
+<!--
+  DEPRECATED: This file is kept for reference only and will be deleted.
+
+  The top navbar layout has been replaced with a sidebar layout.
+  See the new layout components:
+  - AppLayout.vue (main layout wrapper)
+  - AppSidebar.vue (desktop sidebar)
+  - AppTopBar.vue (top bar with notifications, cart, profile)
+  - MobileDrawer.vue (mobile slide-out navigation)
+-->
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
diff --git a/src/components/ui/sheet/Sheet.vue b/src/components/ui/sheet/Sheet.vue
new file mode 100644
index 0000000..47b0968
--- /dev/null
+++ b/src/components/ui/sheet/Sheet.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/src/components/ui/sheet/SheetClose.vue b/src/components/ui/sheet/SheetClose.vue
new file mode 100644
index 0000000..0295976
--- /dev/null
+++ b/src/components/ui/sheet/SheetClose.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
diff --git a/src/components/ui/sheet/SheetContent.vue b/src/components/ui/sheet/SheetContent.vue
new file mode 100644
index 0000000..50f3de6
--- /dev/null
+++ b/src/components/ui/sheet/SheetContent.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { SheetVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import { sheetVariants } from "."
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes["class"]
+  side?: SheetVariants["side"]
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<SheetContentProps>()
+
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "side")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+      >
+        <X class="w-4 h-4" />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/src/components/ui/sheet/SheetDescription.vue b/src/components/ui/sheet/SheetDescription.vue
new file mode 100644
index 0000000..455c2f4
--- /dev/null
+++ b/src/components/ui/sheet/SheetDescription.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogDescription
+    :class="cn('text-sm text-muted-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/src/components/ui/sheet/SheetFooter.vue b/src/components/ui/sheet/SheetFooter.vue
new file mode 100644
index 0000000..5f481e5
--- /dev/null
+++ b/src/components/ui/sheet/SheetFooter.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/sheet/SheetHeader.vue b/src/components/ui/sheet/SheetHeader.vue
new file mode 100644
index 0000000..f97d24a
--- /dev/null
+++ b/src/components/ui/sheet/SheetHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/sheet/SheetTitle.vue b/src/components/ui/sheet/SheetTitle.vue
new file mode 100644
index 0000000..5870787
--- /dev/null
+++ b/src/components/ui/sheet/SheetTitle.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogTitle
+    :class="cn('text-lg font-semibold text-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/src/components/ui/sheet/SheetTrigger.vue b/src/components/ui/sheet/SheetTrigger.vue
new file mode 100644
index 0000000..a4fc3ee
--- /dev/null
+++ b/src/components/ui/sheet/SheetTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/src/components/ui/sheet/index.ts b/src/components/ui/sheet/index.ts
new file mode 100644
index 0000000..a370633
--- /dev/null
+++ b/src/components/ui/sheet/index.ts
@@ -0,0 +1,32 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Sheet } from "./Sheet.vue"
+export { default as SheetClose } from "./SheetClose.vue"
+export { default as SheetContent } from "./SheetContent.vue"
+export { default as SheetDescription } from "./SheetDescription.vue"
+export { default as SheetFooter } from "./SheetFooter.vue"
+export { default as SheetHeader } from "./SheetHeader.vue"
+export { default as SheetTitle } from "./SheetTitle.vue"
+export { default as SheetTrigger } from "./SheetTrigger.vue"
+
+export const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+            "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+)
+
+export type SheetVariants = VariantProps<typeof sheetVariants>
diff --git a/src/core/di-container.ts b/src/core/di-container.ts
index 32221f5..f9d65f9 100644
--- a/src/core/di-container.ts
+++ b/src/core/di-container.ts
@@ -137,6 +137,11 @@ export const SERVICE_TOKENS = {
   PROFILE_SERVICE: Symbol('profileService'),
   REACTION_SERVICE: Symbol('reactionService'),
 
+  // Link aggregator services
+  SUBMISSION_SERVICE: Symbol('submissionService'),
+  LINK_PREVIEW_SERVICE: Symbol('linkPreviewService'),
+  COMMUNITY_SERVICE: Symbol('communityService'),
+
   // Nostr metadata services
   NOSTR_METADATA_SERVICE: Symbol('nostrMetadataService'),
 
diff --git a/src/modules/market/components/CreateStoreDialog.vue b/src/modules/market/components/CreateStoreDialog.vue
index 613c005..78ef1b3 100644
--- a/src/modules/market/components/CreateStoreDialog.vue
+++ b/src/modules/market/components/CreateStoreDialog.vue
@@ -47,10 +47,14 @@
           <FormField v-slot="{ componentField }" name="currency">
             <FormItem>
               <FormLabel>Currency *</FormLabel>
-              <Select :disabled="isCreating" v-bind="componentField">
+              <Select
+                :key="`currency-select-${availableCurrencies.length}`"
+                :disabled="isCreating || isLoadingCurrencies"
+                v-bind="componentField"
+              >
                 <FormControl>
                   <SelectTrigger class="w-full">
-                    <SelectValue placeholder="Select currency" />
+                    <SelectValue :placeholder="isLoadingCurrencies ? 'Loading...' : 'Select currency'" />
                   </SelectTrigger>
                 </FormControl>
                 <SelectContent>
@@ -275,6 +279,7 @@ const toast = useToast()
 // Local state
 const isCreating = ref(false)
 const createError = ref<string | null>(null)
+const isLoadingCurrencies = ref(false)
 const availableCurrencies = ref<string[]>(['sat'])
 const availableZones = ref<Zone[]>([])
 const showNewZoneForm = ref(false)
@@ -331,11 +336,27 @@ const onSubmit = form.handleSubmit(async (values) => {
 
 // Methods
 const loadAvailableCurrencies = async () => {
+  isLoadingCurrencies.value = true
   try {
     const currencies = await nostrmarketAPI.getCurrencies()
-    availableCurrencies.value = currencies
+    if (currencies.length > 0) {
+      // Ensure 'sat' is always first in the list
+      const satIndex = currencies.indexOf('sat')
+      if (satIndex === -1) {
+        // Add 'sat' at the beginning if not present
+        availableCurrencies.value = ['sat', ...currencies]
+      } else if (satIndex > 0) {
+        // Move 'sat' to the beginning if present but not first
+        const withoutSat = currencies.filter(c => c !== 'sat')
+        availableCurrencies.value = ['sat', ...withoutSat]
+      } else {
+        availableCurrencies.value = currencies
+      }
+    }
   } catch (error) {
     console.error('Failed to load currencies:', error)
+  } finally {
+    isLoadingCurrencies.value = false
   }
 }
 
diff --git a/src/modules/market/components/DashboardOverview.vue b/src/modules/market/components/DashboardOverview.vue
index 103c07a..804d77c 100644
--- a/src/modules/market/components/DashboardOverview.vue
+++ b/src/modules/market/components/DashboardOverview.vue
@@ -77,77 +77,6 @@
       </div>
     </div>
 
-    <!-- Quick Actions -->
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-      <!-- Customer Actions -->
-      <div class="bg-card p-6 rounded-lg border shadow-sm">
-        <h3 class="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
-          <ShoppingCart class="w-5 h-5 text-primary" />
-          Customer Actions
-        </h3>
-        <div class="space-y-3">
-          <Button 
-            @click="navigateToMarket" 
-            variant="default" 
-            class="w-full justify-start"
-          >
-            <Store class="w-4 h-4 mr-2" />
-            Browse Market
-          </Button>
-          <Button 
-            @click="navigateToOrders" 
-            variant="outline" 
-            class="w-full justify-start"
-          >
-            <Package class="w-4 h-4 mr-2" />
-            View All Orders
-          </Button>
-          <Button 
-            @click="navigateToCart" 
-            variant="outline" 
-            class="w-full justify-start"
-          >
-            <ShoppingCart class="w-4 h-4 mr-2" />
-            Shopping Cart
-          </Button>
-        </div>
-      </div>
-
-      <!-- Merchant Actions -->
-      <div class="bg-card p-6 rounded-lg border shadow-sm">
-        <h3 class="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
-          <Store class="w-5 h-5 text-green-500" />
-          Merchant Actions
-        </h3>
-        <div class="space-y-3">
-          <Button 
-            @click="navigateToStore" 
-            variant="default" 
-            class="w-full justify-start"
-          >
-            <Store class="w-4 h-4 mr-2" />
-            Manage Store
-          </Button>
-          <Button 
-            @click="navigateToProducts" 
-            variant="outline" 
-            class="w-full justify-start"
-          >
-            <Package class="w-4 h-4 mr-2" />
-            Manage Products
-          </Button>
-          <Button 
-            @click="navigateToOrders" 
-            variant="outline" 
-            class="w-full justify-start"
-          >
-            <Package class="w-4 h-4 mr-2" />
-            View Orders
-          </Button>
-        </div>
-      </div>
-    </div>
-
     <!-- Recent Activity -->
     <div class="bg-card p-6 rounded-lg border shadow-sm">
       <h3 class="text-lg font-semibold text-foreground mb-4">Recent Activity</h3>
@@ -216,15 +145,12 @@
 
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
 import { useAuth } from '@/composables/useAuthService'
 import { useMarket } from '../composables/useMarket'
-import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import {
   Package,
   Store,
-  ShoppingCart,
   DollarSign,
   BarChart3,
   Clock
@@ -233,7 +159,6 @@ import type { OrderApiResponse, NostrmarketAPI } from '../services/nostrmarketAP
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import type { PaymentService } from '@/core/services/PaymentService'
 
-const router = useRouter()
 const auth = useAuth()
 const { isConnected } = useMarket()
 const nostrmarketAPI = injectService(SERVICE_TOKENS.NOSTRMARKET_API) as NostrmarketAPI
@@ -341,12 +266,6 @@ const getActivityVariant = (type: string) => {
   }
 }
 
-const navigateToMarket = () => router.push('/market')
-const navigateToOrders = () => router.push('/market-dashboard?tab=orders')
-const navigateToCart = () => router.push('/cart')
-const navigateToStore = () => router.push('/market-dashboard?tab=store')
-const navigateToProducts = () => router.push('/market-dashboard?tab=store')
-
 // Load orders when component mounts
 onMounted(() => {
   fetchOrders()
diff --git a/src/modules/market/components/MarketSettings.vue b/src/modules/market/components/MarketSettings.vue
index 44ade18..f636dcc 100644
--- a/src/modules/market/components/MarketSettings.vue
+++ b/src/modules/market/components/MarketSettings.vue
@@ -2,331 +2,518 @@
   <div class="space-y-6">
     <!-- Header -->
     <div>
-      <h2 class="text-2xl font-bold text-foreground">Market Settings</h2>
-      <p class="text-muted-foreground mt-1">Configure your store and market preferences</p>
+      <h2 class="text-2xl font-bold text-foreground">Store Settings</h2>
+      <p class="text-muted-foreground mt-1">Configure your store information</p>
     </div>
 
-    <!-- Settings Tabs -->
-    <div class="border-b border-border">
-      <nav class="flex space-x-8">
-        <button
-          v-for="tab in settingsTabs"
-          :key="tab.id"
-          @click="activeSettingsTab = tab.id"
-          :class="[
-            'py-2 px-1 border-b-2 font-medium text-sm transition-colors',
-            activeSettingsTab === tab.id
-              ? 'border-primary text-primary'
-              : 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground'
-          ]"
-        >
-          {{ tab.name }}
-        </button>
-      </nav>
+    <!-- Loading State -->
+    <div v-if="isLoading" class="flex justify-center py-12">
+      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
     </div>
 
-    <!-- Settings Content -->
-    <div class="min-h-[500px]">
-      <!-- Store Settings Tab -->
-      <div v-if="activeSettingsTab === 'store'" class="space-y-6">
-        <div class="bg-card p-6 rounded-lg border shadow-sm">
-          <h3 class="text-lg font-semibold text-foreground mb-4">Store Information</h3>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div>
-              <label class="block text-sm font-medium text-foreground mb-2">Store Name</label>
-              <Input v-model="storeSettings.name" placeholder="Enter store name" />
-            </div>
-            <div>
-              <label class="block text-sm font-medium text-foreground mb-2">Store Description</label>
-              <Input v-model="storeSettings.description" placeholder="Enter store description" />
-            </div>
-            <div>
-              <label class="block text-sm font-medium text-foreground mb-2">Contact Email</label>
-              <Input v-model="storeSettings.contactEmail" type="email" placeholder="Enter contact email" />
-            </div>
-            <div>
-              <label class="block text-sm font-medium text-foreground mb-2">Store Category</label>
-              <select v-model="storeSettings.category" class="w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring bg-background text-foreground">
-                <option value="">Select category</option>
-                <option value="electronics">Electronics</option>
-                <option value="clothing">Clothing</option>
-                <option value="books">Books</option>
-                <option value="food">Food & Beverages</option>
-                <option value="services">Services</option>
-                <option value="other">Other</option>
-              </select>
-            </div>
-          </div>
-          <div class="mt-6">
-            <Button @click="saveStoreSettings" variant="default">
-              Save Store Settings
-            </Button>
-          </div>
-        </div>
+    <!-- No Store State -->
+    <div v-else-if="!currentStall" class="text-center py-12">
+      <div class="w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-4">
+        <Store class="w-8 h-8 text-muted-foreground" />
       </div>
+      <h3 class="text-lg font-medium text-foreground mb-2">No Store Found</h3>
+      <p class="text-muted-foreground">
+        Create a store first to manage its settings
+      </p>
+    </div>
 
-      <!-- Payment Settings Tab -->
-      <div v-else-if="activeSettingsTab === 'payment'" class="space-y-6">
-        <div class="bg-card p-6 rounded-lg border shadow-sm">
-          <h3 class="text-lg font-semibold text-foreground mb-4">Payment Configuration</h3>
-          <div class="space-y-4">
-            <div>
-              <label class="block text-sm font-medium text-foreground mb-2">Default Currency</label>
-              <select v-model="paymentSettings.defaultCurrency" class="w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring bg-background text-foreground">
-                <option value="sat">Satoshi (sats)</option>
-                <option value="btc">Bitcoin (BTC)</option>
-                <option value="usd">US Dollar (USD)</option>
-                <option value="eur">Euro (EUR)</option>
-              </select>
-            </div>
-            <div>
-              <label class="block text-sm font-medium text-foreground mb-2">Invoice Expiry (minutes)</label>
-              <Input v-model="paymentSettings.invoiceExpiry" type="number" min="5" max="1440" placeholder="60" />
-            </div>
-            <div>
-              <label class="block text-sm font-medium text-foreground mb-2">Auto-generate Invoices</label>
-              <div class="flex items-center">
-                <input
-                  v-model="paymentSettings.autoGenerateInvoices"
-                  type="checkbox"
-                  class="h-4 w-4 text-primary focus:ring-primary border-input rounded"
+    <!-- Store Settings Form -->
+    <div v-else class="space-y-6">
+      <!-- Store Information -->
+      <div class="bg-card p-6 rounded-lg border shadow-sm">
+        <h3 class="text-lg font-semibold text-foreground mb-4">Store Information</h3>
+        <form @submit="onSubmit" class="space-y-4">
+          <FormField v-slot="{ componentField }" name="name">
+            <FormItem>
+              <FormLabel>Store Name *</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="Enter store name"
+                  :disabled="isSaving"
+                  v-bind="componentField"
                 />
-                <label class="ml-2 text-sm text-foreground">
-                  Automatically generate Lightning invoices for new orders
-                </label>
-              </div>
-            </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <FormField v-slot="{ componentField }" name="description">
+            <FormItem>
+              <FormLabel>Description</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Describe your store and what you sell"
+                  :disabled="isSaving"
+                  v-bind="componentField"
+                  rows="3"
+                />
+              </FormControl>
+              <FormDescription>
+                This description will be shown to customers browsing your store
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <FormField v-slot="{ componentField }" name="imageUrl">
+            <FormItem>
+              <FormLabel>Store Image URL</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="https://example.com/store-image.jpg"
+                  :disabled="isSaving"
+                  v-bind="componentField"
+                />
+              </FormControl>
+              <FormDescription>
+                Optional image to represent your store
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          </FormField>
+
+          <!-- Read-only Currency Field -->
+          <div class="pt-4 border-t">
+            <label class="block text-sm font-medium text-muted-foreground mb-1">Currency</label>
+            <div class="text-foreground">{{ currentStall.currency }}</div>
+            <p class="text-xs text-muted-foreground mt-1">Currency is set when the store is created and cannot be changed</p>
           </div>
-          <div class="mt-6">
-            <Button @click="savePaymentSettings" variant="default">
-              Save Payment Settings
+
+          <div class="pt-4">
+            <Button type="submit" :disabled="isSaving || !isFormValid">
+              <span v-if="isSaving">Saving...</span>
+              <span v-else>Save Changes</span>
             </Button>
           </div>
-        </div>
+        </form>
       </div>
 
-      <!-- Nostr Settings Tab -->
-      <div v-else-if="activeSettingsTab === 'nostr'" class="space-y-6">
-        <div class="bg-card p-6 rounded-lg border shadow-sm">
-          <h3 class="text-lg font-semibold text-foreground mb-4">Nostr Network Configuration</h3>
-          <div class="space-y-4">
-            <div>
-              <label class="block text-sm font-medium text-foreground mb-2">Relay Connections</label>
-              <div class="space-y-2">
-                <div v-for="relay in nostrSettings.relays" :key="relay" class="flex items-center gap-2">
-                  <Input :value="relay" readonly class="flex-1" />
-                  <Button @click="removeRelay(relay)" variant="outline" size="sm">
-                    <X class="w-4 h-4" />
-                  </Button>
-                </div>
-                <div class="flex gap-2">
-                  <Input v-model="newRelay" placeholder="wss://relay.example.com" class="flex-1" />
-                  <Button @click="addRelay" variant="outline">
-                    Add Relay
-                  </Button>
-                </div>
+      <!-- Shipping Zones Section -->
+      <div class="bg-card p-6 rounded-lg border shadow-sm">
+        <div class="flex items-center justify-between mb-4">
+          <div>
+            <h3 class="text-lg font-semibold text-foreground">Shipping Zones</h3>
+            <p class="text-sm text-muted-foreground">Configure where you ship and the associated costs</p>
+          </div>
+          <Button
+            v-if="!showAddZoneForm"
+            @click="showAddZoneForm = true"
+            size="sm"
+            :disabled="isZoneLoading"
+          >
+            <Plus class="w-4 h-4 mr-2" />
+            Add Zone
+          </Button>
+        </div>
+
+        <!-- Add Zone Form -->
+        <div v-if="showAddZoneForm" class="mb-6 p-4 bg-muted/50 rounded-lg border">
+          <h4 class="font-medium text-foreground mb-4">{{ editingZone ? 'Edit Zone' : 'Add New Zone' }}</h4>
+          <form @submit.prevent="saveZone" class="space-y-4">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label class="block text-sm font-medium text-foreground mb-1">Zone Name *</label>
+                <Input
+                  v-model="zoneForm.name"
+                  placeholder="e.g., Domestic, International"
+                  :disabled="isZoneSaving"
+                />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-foreground mb-1">Shipping Cost *</label>
+                <Input
+                  v-model.number="zoneForm.cost"
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  placeholder="0"
+                  :disabled="isZoneSaving"
+                />
               </div>
             </div>
+
             <div>
-              <label class="block text-sm font-medium text-foreground mb-2">Nostr Public Key</label>
-              <Input :value="nostrSettings.pubkey" readonly class="font-mono text-sm" />
-              <p class="text-xs text-muted-foreground mt-1">Your Nostr public key for receiving orders</p>
+              <label class="block text-sm font-medium text-foreground mb-1">Countries/Regions</label>
+              <Input
+                v-model="zoneForm.countriesInput"
+                placeholder="e.g., USA, Canada, Mexico (comma-separated)"
+                :disabled="isZoneSaving"
+              />
+              <p class="text-xs text-muted-foreground mt-1">Comma-separated list of countries or regions this zone covers</p>
             </div>
-            <div>
-              <label class="block text-sm font-medium text-foreground mb-2">Connection Status</label>
-              <div class="flex items-center gap-2">
-                <div 
-                  class="w-3 h-3 rounded-full"
-                  :class="orderEvents.isSubscribed ? 'bg-green-500' : 'bg-yellow-500'"
-                ></div>
-                <span class="text-sm text-muted-foreground">
-                  {{ orderEvents.isSubscribed ? 'Connected to Nostr network' : 'Connecting to Nostr network...' }}
+
+            <div class="flex gap-2">
+              <Button type="submit" :disabled="isZoneSaving || !isZoneFormValid" size="sm">
+                <span v-if="isZoneSaving">Saving...</span>
+                <span v-else>{{ editingZone ? 'Update Zone' : 'Add Zone' }}</span>
+              </Button>
+              <Button type="button" variant="outline" @click="cancelZoneForm" size="sm" :disabled="isZoneSaving">
+                Cancel
+              </Button>
+            </div>
+          </form>
+        </div>
+
+        <!-- Zones List -->
+        <div v-if="isZoneLoading" class="flex justify-center py-8">
+          <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
+        </div>
+
+        <div v-else-if="zones.length === 0 && !showAddZoneForm" class="text-center py-8 text-muted-foreground">
+          <Truck class="w-12 h-12 mx-auto mb-3 opacity-50" />
+          <p>No shipping zones configured</p>
+          <p class="text-sm">Add a shipping zone to enable shipping for your products</p>
+        </div>
+
+        <div v-else class="space-y-3">
+          <div
+            v-for="zone in zones"
+            :key="zone.id"
+            class="flex items-center justify-between p-4 bg-muted/30 rounded-lg border"
+          >
+            <div class="flex-1">
+              <div class="font-medium text-foreground">{{ zone.name }}</div>
+              <div class="text-sm text-muted-foreground">
+                <span>{{ formatCost(zone.cost) }} {{ zone.currency }}</span>
+                <span v-if="zone.countries?.length" class="ml-2">
+                  · {{ zone.countries.join(', ') }}
                 </span>
               </div>
             </div>
-          </div>
-          <div class="mt-6">
-            <Button @click="saveNostrSettings" variant="default">
-              Save Nostr Settings
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Shipping Settings Tab -->
-      <div v-else-if="activeSettingsTab === 'shipping'" class="space-y-6">
-        <div class="bg-card p-6 rounded-lg border shadow-sm">
-          <h3 class="text-lg font-semibold text-foreground mb-4">Shipping Zones</h3>
-          <div class="space-y-4">
-            <div v-for="zone in shippingSettings.zones" :key="zone.id" class="border border-border rounded-lg p-4">
-              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div>
-                  <label class="block text-sm font-medium text-foreground mb-1">Zone Name</label>
-                  <Input v-model="zone.name" placeholder="Zone name" />
-                </div>
-                <div>
-                  <label class="block text-sm font-medium text-foreground mb-1">Cost</label>
-                  <Input v-model="zone.cost" type="number" min="0" step="0.01" placeholder="0.00" />
-                </div>
-                <div>
-                  <label class="block text-sm font-medium text-foreground mb-1">Currency</label>
-                  <select v-model="zone.currency" class="w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring bg-background text-foreground">
-                    <option value="sat">Satoshi (sats)</option>
-                    <option value="btc">Bitcoin (BTC)</option>
-                    <option value="usd">US Dollar (USD)</option>
-                  </select>
-                </div>
-              </div>
-              <div class="mt-3 flex justify-end">
-                <Button @click="removeShippingZone(zone.id)" variant="outline" size="sm">
-                  Remove Zone
-                </Button>
-              </div>
+            <div class="flex gap-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                @click="editZone(zone)"
+                :disabled="isZoneSaving"
+              >
+                <Pencil class="w-4 h-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                @click="confirmDeleteZone(zone)"
+                :disabled="isZoneSaving"
+                class="text-destructive hover:text-destructive"
+              >
+                <Trash2 class="w-4 h-4" />
+              </Button>
             </div>
-            <Button @click="addShippingZone" variant="outline">
-              <Plus class="w-4 h-4 mr-2" />
-              Add Shipping Zone
-            </Button>
-          </div>
-          <div class="mt-6">
-            <Button @click="saveShippingSettings" variant="default">
-              Save Shipping Settings
-            </Button>
           </div>
         </div>
       </div>
     </div>
+
+    <!-- Delete Zone Confirmation Dialog -->
+    <Dialog :open="showDeleteConfirm" @update:open="showDeleteConfirm = $event">
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete Shipping Zone</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete "{{ zoneToDelete?.name }}"?
+            This action cannot be undone.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" @click="showDeleteConfirm = false" :disabled="isZoneSaving">
+            Cancel
+          </Button>
+          <Button
+            @click="deleteZone"
+            :disabled="isZoneSaving"
+            variant="destructive"
+          >
+            <span v-if="isZoneSaving">Deleting...</span>
+            <span v-else>Delete</span>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-// import { useOrderEvents } from '@/composables/useOrderEvents' // TODO: Move to market module
+import { ref, computed, onMounted, watch } from 'vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { Plus, X } from 'lucide-vue-next'
+import { Textarea } from '@/components/ui/textarea'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Store, Plus, Pencil, Trash2, Truck } from 'lucide-vue-next'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import type { NostrmarketAPI, Stall, Zone } from '../services/nostrmarketAPI'
+import { auth } from '@/composables/useAuthService'
+import { useToast } from '@/core/composables/useToast'
 
-// const marketStore = useMarketStore()
-// const orderEvents = useOrderEvents() // TODO: Move to market module
-const orderEvents = { isSubscribed: ref(false) } // Temporary mock
+// Services
+const nostrmarketAPI = injectService(SERVICE_TOKENS.NOSTRMARKET_API) as NostrmarketAPI
+const paymentService = injectService(SERVICE_TOKENS.PAYMENT_SERVICE) as any
+const toast = useToast()
 
-// Local state
-const activeSettingsTab = ref('store')
-const newRelay = ref('')
+// State
+const isLoading = ref(true)
+const isSaving = ref(false)
+const currentStall = ref<Stall | null>(null)
 
-// Settings data
-const storeSettings = ref({
-  name: 'My Store',
-  description: 'A great place to shop',
-  contactEmail: 'store@example.com',
-  category: 'other'
+// Zone state
+const zones = ref<Zone[]>([])
+const isZoneLoading = ref(false)
+const isZoneSaving = ref(false)
+const showAddZoneForm = ref(false)
+const editingZone = ref<Zone | null>(null)
+const showDeleteConfirm = ref(false)
+const zoneToDelete = ref<Zone | null>(null)
+
+// Zone form
+const zoneForm = ref({
+  name: '',
+  cost: 0,
+  countriesInput: ''
 })
 
-const paymentSettings = ref({
-  defaultCurrency: 'sat',
-  invoiceExpiry: 60,
-  autoGenerateInvoices: true
+const isZoneFormValid = computed(() => {
+  return zoneForm.value.name.trim().length > 0 && zoneForm.value.cost >= 0
 })
 
-const nostrSettings = ref({
-  relays: [
-    'wss://relay.damus.io',
-    'wss://relay.snort.social',
-    'wss://nostr-pub.wellorder.net'
-  ],
-  pubkey: 'npub1...' // TODO: Get from auth
+// Form schema - only fields that exist in the Stall model
+const formSchema = toTypedSchema(z.object({
+  name: z.string().min(1, "Store name is required").max(100, "Store name must be less than 100 characters"),
+  description: z.string().max(500, "Description must be less than 500 characters").optional(),
+  imageUrl: z.string().url("Must be a valid URL").optional().or(z.literal(''))
+}))
+
+// Form setup
+const form = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    name: '',
+    description: '',
+    imageUrl: ''
+  }
 })
 
-const shippingSettings = ref({
-  zones: [
-    {
-      id: '1',
-      name: 'Local',
-      cost: 0,
-      currency: 'sat',
-      estimatedDays: '1-2 days'
-    },
-    {
-      id: '2',
-      name: 'Domestic',
-      cost: 1000,
-      currency: 'sat',
-      estimatedDays: '3-5 days'
-    },
-    {
-      id: '3',
-      name: 'International',
-      cost: 5000,
-      currency: 'sat',
-      estimatedDays: '7-14 days'
+const { resetForm, meta } = form
+const isFormValid = computed(() => meta.value.valid)
+
+// Format cost for display
+const formatCost = (cost: number) => {
+  return cost === 0 ? 'Free' : cost.toString()
+}
+
+// Load store data
+const loadStoreData = async () => {
+  const currentUser = auth.currentUser?.value
+  if (!currentUser?.wallets?.length) {
+    isLoading.value = false
+    return
+  }
+
+  const inkey = paymentService.getPreferredWalletInvoiceKey()
+  if (!inkey) {
+    isLoading.value = false
+    return
+  }
+
+  try {
+    const stalls = await nostrmarketAPI.getStalls(inkey)
+    if (stalls && stalls.length > 0) {
+      currentStall.value = stalls[0]
+
+      // Update form with current values
+      resetForm({
+        values: {
+          name: stalls[0].name || '',
+          description: stalls[0].config?.description || '',
+          imageUrl: stalls[0].config?.image_url || ''
+        }
+      })
+
+      // Load zones
+      await loadZones()
     }
-  ]
+  } catch (error) {
+    console.error('Failed to load store data:', error)
+    toast.error('Failed to load store settings')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Load shipping zones
+const loadZones = async () => {
+  const inkey = paymentService.getPreferredWalletInvoiceKey()
+  if (!inkey) return
+
+  isZoneLoading.value = true
+  try {
+    zones.value = await nostrmarketAPI.getZones(inkey)
+  } catch (error) {
+    console.error('Failed to load zones:', error)
+    toast.error('Failed to load shipping zones')
+  } finally {
+    isZoneLoading.value = false
+  }
+}
+
+// Save store settings
+const onSubmit = form.handleSubmit(async (values) => {
+  if (!currentStall.value?.id) return
+
+  isSaving.value = true
+
+  try {
+    const adminKey = paymentService.getPreferredWalletAdminKey()
+    if (!adminKey) {
+      throw new Error('No wallet admin key available')
+    }
+
+    // Update the stall with new values
+    const updatedStall = await nostrmarketAPI.updateStall(adminKey, currentStall.value.id, {
+      name: values.name,
+      config: {
+        description: values.description || '',
+        image_url: values.imageUrl || undefined
+      }
+    })
+
+    currentStall.value = updatedStall
+    toast.success('Store settings saved successfully!')
+  } catch (error) {
+    console.error('Failed to save store settings:', error)
+    toast.error('Failed to save store settings')
+  } finally {
+    isSaving.value = false
+  }
 })
 
-// Settings tabs
-const settingsTabs = [
-  { id: 'store', name: 'Store Settings' },
-  { id: 'payment', name: 'Payment Settings' },
-  { id: 'nostr', name: 'Nostr Network' },
-  { id: 'shipping', name: 'Shipping Zones' }
-]
-
-// Methods
-const saveStoreSettings = () => {
-  // TODO: Save store settings
-  console.log('Saving store settings:', storeSettings.value)
-}
-
-const savePaymentSettings = () => {
-  // TODO: Save payment settings
-  console.log('Saving payment settings:', paymentSettings.value)
-}
-
-const saveNostrSettings = () => {
-  // TODO: Save Nostr settings
-  console.log('Saving Nostr settings:', nostrSettings.value)
-}
-
-const saveShippingSettings = () => {
-  // TODO: Save shipping settings
-  console.log('Saving shipping settings:', shippingSettings.value)
-}
-
-const addRelay = () => {
-  if (newRelay.value && !nostrSettings.value.relays.includes(newRelay.value)) {
-    nostrSettings.value.relays.push(newRelay.value)
-    newRelay.value = ''
-  }
-}
-
-const removeRelay = (relay: string) => {
-  const index = nostrSettings.value.relays.indexOf(relay)
-  if (index > -1) {
-    nostrSettings.value.relays.splice(index, 1)
-  }
-}
-
-const addShippingZone = () => {
-  const newZone = {
-    id: Date.now().toString(),
-    name: 'New Zone',
+// Zone form functions
+const resetZoneForm = () => {
+  zoneForm.value = {
+    name: '',
     cost: 0,
-    currency: 'sat',
-    estimatedDays: '3-5 days'
+    countriesInput: ''
   }
-  shippingSettings.value.zones.push(newZone)
+  editingZone.value = null
+  showAddZoneForm.value = false
 }
 
-const removeShippingZone = (zoneId: string) => {
-  const index = shippingSettings.value.zones.findIndex(z => z.id === zoneId)
-  if (index > -1) {
-    shippingSettings.value.zones.splice(index, 1)
+const cancelZoneForm = () => {
+  resetZoneForm()
+}
+
+const editZone = (zone: Zone) => {
+  editingZone.value = zone
+  zoneForm.value = {
+    name: zone.name,
+    cost: zone.cost,
+    countriesInput: zone.countries?.join(', ') || ''
+  }
+  showAddZoneForm.value = true
+}
+
+const saveZone = async () => {
+  const adminKey = paymentService.getPreferredWalletAdminKey()
+  if (!adminKey || !currentStall.value) return
+
+  isZoneSaving.value = true
+
+  try {
+    const countries = zoneForm.value.countriesInput
+      .split(',')
+      .map(c => c.trim())
+      .filter(c => c.length > 0)
+
+    const zoneData: Zone = {
+      id: editingZone.value?.id || '',
+      name: zoneForm.value.name.trim(),
+      currency: currentStall.value.currency,
+      cost: zoneForm.value.cost,
+      countries
+    }
+
+    if (editingZone.value) {
+      // Update existing zone
+      await nostrmarketAPI.updateZone(adminKey, editingZone.value.id, zoneData)
+      toast.success('Shipping zone updated!')
+    } else {
+      // Create new zone
+      await nostrmarketAPI.createZone(adminKey, {
+        name: zoneData.name,
+        currency: zoneData.currency,
+        cost: zoneData.cost,
+        countries: zoneData.countries
+      })
+      toast.success('Shipping zone added!')
+    }
+
+    // Reload zones and reset form
+    await loadZones()
+    resetZoneForm()
+  } catch (error) {
+    console.error('Failed to save zone:', error)
+    toast.error(editingZone.value ? 'Failed to update zone' : 'Failed to add zone')
+  } finally {
+    isZoneSaving.value = false
   }
 }
 
-// Lifecycle
-onMounted(() => {
-  console.log('Market Settings component loaded')
+const confirmDeleteZone = (zone: Zone) => {
+  zoneToDelete.value = zone
+  showDeleteConfirm.value = true
+}
+
+const deleteZone = async () => {
+  const adminKey = paymentService.getPreferredWalletAdminKey()
+  if (!adminKey || !zoneToDelete.value) return
+
+  isZoneSaving.value = true
+
+  try {
+    await nostrmarketAPI.deleteZone(adminKey, zoneToDelete.value.id)
+    toast.success('Shipping zone deleted!')
+    await loadZones()
+  } catch (error) {
+    console.error('Failed to delete zone:', error)
+    toast.error('Failed to delete zone')
+  } finally {
+    isZoneSaving.value = false
+    showDeleteConfirm.value = false
+    zoneToDelete.value = null
+  }
+}
+
+// Watch for auth changes
+watch(() => auth.currentUser?.value?.pubkey, async (newPubkey, oldPubkey) => {
+  if (newPubkey !== oldPubkey) {
+    isLoading.value = true
+    await loadStoreData()
+  }
+})
+
+// Initialize
+onMounted(async () => {
+  await loadStoreData()
 })
 </script>
-
diff --git a/src/modules/market/components/MerchantStore.vue b/src/modules/market/components/MerchantStore.vue
index 50da407..381fcae 100644
--- a/src/modules/market/components/MerchantStore.vue
+++ b/src/modules/market/components/MerchantStore.vue
@@ -49,84 +49,47 @@
 
       <!-- Stores Grid (shown when merchant profile exists) -->
       <div v-else>
-        <!-- Header Section -->
-        <div class="mb-8">
-        <div class="flex items-center justify-between mb-2">
-          <div>
-            <h2 class="text-2xl font-bold text-foreground">My Stores</h2>
-            <p class="text-muted-foreground mt-1">
-              Manage your stores and products
-            </p>
+        <!-- Loading State for Stalls -->
+        <div v-if="isLoadingStalls" class="flex justify-center py-12">
+          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+        </div>
+
+        <!-- No Store - Create First Store -->
+        <div v-else-if="userStalls.length === 0" class="flex flex-col items-center justify-center py-12">
+          <div class="w-24 h-24 bg-muted rounded-full flex items-center justify-center mb-6">
+            <Store class="w-12 h-12 text-muted-foreground" />
           </div>
-          <Button @click="navigateToMarket" variant="outline">
-            <Store class="w-4 h-4 mr-2" />
-            Browse Market
+          <h2 class="text-2xl font-bold text-foreground mb-2">Create Your Store</h2>
+          <p class="text-muted-foreground text-center mb-6 max-w-md">
+            Set up your store to start selling products on the Nostr marketplace.
+          </p>
+          <Button
+            @click="showCreateStoreDialog = true"
+            variant="default"
+            size="lg"
+          >
+            <Plus class="w-5 h-5 mr-2" />
+            Create Store
           </Button>
         </div>
-      </div>
 
-      <!-- Loading State for Stalls -->
-      <div v-if="isLoadingStalls" class="flex justify-center py-12">
-        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-      </div>
-
-      <!-- Stores Cards Grid -->
-      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
-        <!-- Existing Store Cards -->
-        <StoreCard
-          v-for="stall in userStalls"
-          :key="stall.id"
-          :stall="stall"
-          @manage="manageStall"
-          @view-products="viewStallProducts"
-        />
-
-        <!-- Create New Store Card -->
-        <div class="bg-card rounded-lg border-2 border-dashed border-muted-foreground/25 hover:border-primary/50 transition-colors">
-          <button 
-            @click="showCreateStoreDialog = true"
-            class="w-full h-full p-6 flex flex-col items-center justify-center min-h-[200px] hover:bg-muted/30 transition-colors"
-          >
-            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-3">
-              <Plus class="w-6 h-6 text-primary" />
-            </div>
-            <h3 class="text-lg font-semibold text-foreground mb-1">Create New Store</h3>
-            <p class="text-sm text-muted-foreground text-center">
-              Add another store to expand your marketplace presence
-            </p>
-          </button>
-        </div>
-      </div>
-
-      <!-- Active Store Dashboard (shown when a store is selected) -->
-      <div v-if="activeStall">
+      <!-- Active Store Dashboard (shown when user has a store) -->
+      <div v-else-if="activeStall">
         <!-- Header -->
         <div class="space-y-4 mb-6">
-          <!-- Top row with back button and currency -->
-          <div class="flex items-center gap-3">
-            <Button @click="activeStallId = null" variant="ghost" size="sm">
-              ← Back to Stores
-            </Button>
-            <div class="h-4 w-px bg-border"></div>
-            <Badge variant="secondary">{{ activeStall.currency }}</Badge>
-          </div>
-          
           <!-- Store info and actions -->
           <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
             <div class="flex-1">
-              <h2 class="text-xl sm:text-2xl font-bold text-foreground">{{ activeStall.name }}</h2>
-              <p class="text-sm sm:text-base text-muted-foreground mt-1">{{ activeStall.config?.description || 'Manage incoming orders and your products' }}</p>
-            </div>
-            <div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
-              <Button @click="navigateToMarket" variant="outline" class="w-full sm:w-auto">
-                <Store class="w-4 h-4 mr-2" />
-                <span class="sm:inline">Browse Market</span>
-              </Button>
-              <Button @click="showCreateProductDialog = true" variant="default" class="w-full sm:w-auto">
-                <Plus class="w-4 h-4 mr-2" />
-                <span>Add Product</span>
-              </Button>
+              <div class="flex items-center gap-3 mb-1">
+                <h2 class="text-xl sm:text-2xl font-bold text-foreground">{{ activeStall.name }}</h2>
+                <Badge variant="secondary">{{ activeStall.currency }}</Badge>
+              </div>
+              <p class="text-sm sm:text-base text-muted-foreground">{{ activeStall.config?.description || 'Manage incoming orders and your products' }}</p>
             </div>
+            <Button @click="navigateToMarket" variant="outline" class="w-full sm:w-auto">
+              <Store class="w-4 h-4 mr-2" />
+              <span class="sm:inline">Browse Market</span>
+            </Button>
           </div>
         </div>
 
@@ -188,20 +151,23 @@
             </div>
           </div>
 
-          <!-- Customer Satisfaction -->
-          <div class="bg-card p-4 sm:p-6 rounded-lg border shadow-sm">
+          <!-- Customer Satisfaction (Coming Soon) -->
+          <div class="bg-card p-4 sm:p-6 rounded-lg border shadow-sm opacity-50 relative">
+            <div class="absolute top-2 right-2">
+              <Badge variant="outline" class="text-xs">Coming Soon</Badge>
+            </div>
             <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
               <div class="flex-1">
                 <p class="text-xs sm:text-sm font-medium text-muted-foreground">Satisfaction</p>
-                <p class="text-xl sm:text-2xl font-bold text-foreground">{{ storeStats.satisfaction }}%</p>
+                <p class="text-xl sm:text-2xl font-bold text-muted-foreground">--%</p>
               </div>
-              <div class="w-10 h-10 sm:w-12 sm:h-12 bg-yellow-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
-                <Star class="w-5 h-5 sm:w-6 sm:h-6 text-yellow-500" />
+              <div class="w-10 h-10 sm:w-12 sm:h-12 bg-muted rounded-lg flex items-center justify-center flex-shrink-0">
+                <Star class="w-5 h-5 sm:w-6 sm:h-6 text-muted-foreground" />
               </div>
             </div>
             <div class="mt-3 sm:mt-4">
               <div class="flex items-center text-xs sm:text-sm text-muted-foreground">
-                <span>{{ storeStats.totalReviews }} reviews</span>
+                <span>No reviews yet</span>
               </div>
             </div>
           </div>
@@ -430,7 +396,6 @@ import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import CreateStoreDialog from './CreateStoreDialog.vue'
 import CreateProductDialog from './CreateProductDialog.vue'
 import DeleteConfirmDialog from './DeleteConfirmDialog.vue'
-import StoreCard from './StoreCard.vue'
 import MerchantOrders from './MerchantOrders.vue'
 
 const router = useRouter()
@@ -652,14 +617,6 @@ const loadStallProducts = async () => {
   }
 }
 
-const manageStall = (stallId: string) => {
-  activeStallId.value = stallId
-}
-
-const viewStallProducts = (stallId: string) => {
-  activeStallId.value = stallId
-}
-
 const navigateToMarket = () => router.push('/market')
 
 const checkMerchantProfile = async () => {
@@ -697,7 +654,6 @@ const checkMerchantProfile = async () => {
 // Event handlers
 const onStoreCreated = async (_stall: Stall) => {
   await loadStallsList()
-  toast.success('Store created successfully!')
 }
 
 const onProductCreated = async (_product: Product) => {
diff --git a/src/modules/market/components/OrderHistory.vue b/src/modules/market/components/OrderHistory.vue
index 0807c97..54401fa 100644
--- a/src/modules/market/components/OrderHistory.vue
+++ b/src/modules/market/components/OrderHistory.vue
@@ -212,19 +212,6 @@
       </div>
     </div>
 
-    <!-- Debug Information (Development Only) -->
-    <div v-if="isDevelopment" class="mt-8 p-4 bg-gray-100 rounded-lg">
-      <h4 class="font-medium mb-2">Debug Information</h4>
-      <div class="text-sm space-y-1">
-        <div>Total Orders in Store: {{ Object.keys(marketStore.orders).length }}</div>
-        <div>Filtered Orders: {{ filteredOrders.length }}</div>
-        <div>Order Events Subscribed: {{ orderEvents.isSubscribed ? 'Yes' : 'No' }}</div>
-        <div>Relay Hub Connected: {{ relayHub.isConnected ? 'Yes' : 'No' }}</div>
-        <div>Auth Status: {{ auth.isAuthenticated ? 'Authenticated' : 'Not Authenticated' }}</div>
-        <div>Current User: {{ auth.currentUser?.value?.pubkey ? 'Yes' : 'No' }}</div>
-      </div>
-    </div>
-
     <!-- Empty State -->
     <div v-else class="text-center py-12">
       <div class="w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-4">
@@ -312,8 +299,6 @@ const pendingOrders = computed(() => allOrders.value.filter(o => o.status === 'p
 const paidOrders = computed(() => allOrders.value.filter(o => o.status === 'paid').length)
 const pendingPayments = computed(() => allOrders.value.filter(o => !isOrderPaid(o)).length)
 
-const isDevelopment = computed(() => import.meta.env.DEV)
-
 // Methods
 const isOrderPaid = (order: any) => {
   // Prioritize the 'paid' field from Nostr status updates (type 2)
@@ -497,34 +482,9 @@ onMounted(() => {
     paymentService.forceResetPaymentState()
   }
   
-  // Orders are already loaded in the market store
-  console.log('Order History component loaded with', allOrders.value.length, 'orders')
-  console.log('Market store orders:', marketStore.orders)
-
-  // Debug: Log order details for orders with payment requests
-  allOrders.value.forEach(order => {
-    if (order.paymentRequest) {
-      console.log('Order with payment request:', {
-        id: order.id,
-        paymentRequest: order.paymentRequest.substring(0, 50) + '...',
-        hasPaymentRequest: !!order.paymentRequest,
-        status: order.status,
-        paymentStatus: order.paymentStatus
-      })
-    }
-  })
-
-  console.log('Order events status:', orderEvents.isSubscribed.value)
-  console.log('Relay hub connected:', relayHub.isConnected.value)
-  console.log('Auth status:', auth.isAuthenticated)
-  console.log('Current user:', auth.currentUser?.value?.pubkey)
-
   // Start listening for order events if not already listening
   if (!orderEvents.isSubscribed.value) {
-    console.log('Starting order events listener...')
     orderEvents.initialize()
-  } else {
-    console.log('Order events already listening')
   }
 })
 
diff --git a/src/modules/market/services/nostrmarketAPI.ts b/src/modules/market/services/nostrmarketAPI.ts
index 4913aa0..528336f 100644
--- a/src/modules/market/services/nostrmarketAPI.ts
+++ b/src/modules/market/services/nostrmarketAPI.ts
@@ -329,6 +329,34 @@ export class NostrmarketAPI extends BaseService {
     return stall
   }
 
+  /**
+   * Update an existing stall
+   */
+  async updateStall(
+    walletAdminkey: string,
+    stallId: string,
+    stallData: Partial<{
+      name: string
+      config: {
+        description?: string
+        image_url?: string
+      }
+    }>
+  ): Promise<Stall> {
+    const stall = await this.request<Stall>(
+      `/api/v1/stall/${stallId}`,
+      walletAdminkey,
+      {
+        method: 'PATCH',
+        body: JSON.stringify(stallData),
+      }
+    )
+
+    this.debug('Updated stall:', { stallId: stall.id, stallName: stall.name })
+
+    return stall
+  }
+
   /**
    * Get available shipping zones
    */
@@ -371,30 +399,70 @@ export class NostrmarketAPI extends BaseService {
   }
 
   /**
-   * Get available currencies
+   * Update an existing shipping zone
+   */
+  async updateZone(
+    walletAdminkey: string,
+    zoneId: string,
+    zoneData: Zone
+  ): Promise<Zone> {
+    const zone = await this.request<Zone>(
+      `/api/v1/zone/${zoneId}`,
+      walletAdminkey,
+      {
+        method: 'PATCH',
+        body: JSON.stringify(zoneData),
+      }
+    )
+
+    this.debug('Updated zone:', { zoneId: zone.id, zoneName: zone.name })
+
+    return zone
+  }
+
+  /**
+   * Delete a shipping zone
+   */
+  async deleteZone(walletAdminkey: string, zoneId: string): Promise<void> {
+    await this.request<void>(
+      `/api/v1/zone/${zoneId}`,
+      walletAdminkey,
+      { method: 'DELETE' }
+    )
+
+    this.debug('Deleted zone:', { zoneId })
+  }
+
+  /**
+   * Get available currencies from the LNbits core API
+   * This endpoint returns currencies allowed by the server configuration
    */
   async getCurrencies(): Promise<string[]> {
-    const baseCurrencies = ['sat']
+    // Call the LNbits core API directly (not under /nostrmarket)
+    const url = `${this.baseUrl}/api/v1/currencies`
 
     try {
-      const apiCurrencies = await this.request<string[]>(
-        '/api/v1/currencies',
-        '', // No authentication needed for currencies endpoint
-        { method: 'GET' }
-      )
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' }
+      })
 
-      if (apiCurrencies && Array.isArray(apiCurrencies)) {
-        // Combine base currencies with API currencies, removing duplicates
-        const allCurrencies = [...baseCurrencies, ...apiCurrencies.filter(currency => !baseCurrencies.includes(currency))]
-        this.debug('Retrieved currencies:', { count: allCurrencies.length, currencies: allCurrencies })
-        return allCurrencies
+      if (!response.ok) {
+        throw new Error(`Failed to fetch currencies: ${response.status}`)
       }
 
-      this.debug('No API currencies returned, using base currencies only')
-      return baseCurrencies
+      const apiCurrencies = await response.json()
+
+      if (apiCurrencies && Array.isArray(apiCurrencies)) {
+        this.debug('Retrieved currencies from LNbits core:', { count: apiCurrencies.length, currencies: apiCurrencies })
+        return apiCurrencies
+      }
+
+      this.debug('No currencies returned from server, using default')
+      return ['sat']
     } catch (error) {
-      this.debug('Failed to get currencies, falling back to base currencies:', error)
-      return baseCurrencies
+      this.debug('Failed to get currencies, using default:', error)
+      return ['sat']
     }
   }
 
diff --git a/src/modules/nostr-feed/LINK_AGGREGATOR_PLAN.md b/src/modules/nostr-feed/LINK_AGGREGATOR_PLAN.md
new file mode 100644
index 0000000..9f91aff
--- /dev/null
+++ b/src/modules/nostr-feed/LINK_AGGREGATOR_PLAN.md
@@ -0,0 +1,176 @@
+# Link Aggregator Implementation Plan
+
+## Overview
+
+Transform the nostr-feed module into a Reddit-style link aggregator with support for:
+- **Link posts** - External URLs with Open Graph previews
+- **Media posts** - Images/videos with inline display
+- **Self posts** - Text/markdown content
+
+## NIP Compliance
+
+| NIP | Purpose | Usage |
+|-----|---------|-------|
+| NIP-72 | Moderated Communities | Community definitions (kind 34550), approvals (kind 4550) |
+| NIP-22 | Comments | Community posts (kind 1111) with scoped threading |
+| NIP-92 | Media Attachments | `imeta` tags for media metadata |
+| NIP-94 | File Metadata | Reference for media fields |
+| NIP-25 | Reactions | Upvote (`+`) / Downvote (`-`) |
+| NIP-10 | Reply Threading | Fallback for kind 1 compatibility |
+
+## Event Structure
+
+### Submission (kind 1111)
+
+```jsonc
+{
+  "kind": 1111,
+  "content": "<self-post body or link description>",
+  "tags": [
+    // Community scope (NIP-72 + NIP-22)
+    ["A", "34550:<community-pubkey>:<community-d>", "<relay>"],
+    ["a", "34550:<community-pubkey>:<community-d>", "<relay>"],
+    ["K", "34550"],
+    ["k", "34550"],
+    ["P", "<community-pubkey>"],
+    ["p", "<community-pubkey>"],
+
+    // Submission metadata
+    ["title", "<post title>"],
+    ["post-type", "link|media|self"],
+
+    // Link post fields
+    ["r", "<url>"],
+    ["preview-title", "<og:title>"],
+    ["preview-description", "<og:description>"],
+    ["preview-image", "<og:image>"],
+    ["preview-site-name", "<og:site_name>"],
+
+    // Media post fields (NIP-92)
+    ["imeta", "url <url>", "m <mime>", "dim <WxH>", "blurhash <hash>", "alt <desc>"],
+
+    // Common
+    ["t", "<hashtag>"],
+    ["nsfw", "true|false"]
+  ]
+}
+```
+
+### Comment on Submission (kind 1111)
+
+```jsonc
+{
+  "kind": 1111,
+  "content": "<comment text>",
+  "tags": [
+    // Root scope (the community)
+    ["A", "34550:<community-pubkey>:<community-d>", "<relay>"],
+    ["K", "34550"],
+    ["P", "<community-pubkey>"],
+
+    // Parent (the submission or parent comment)
+    ["e", "<parent-event-id>", "<relay>", "<parent-pubkey>"],
+    ["k", "1111"],
+    ["p", "<parent-pubkey>"]
+  ]
+}
+```
+
+## Implementation Phases
+
+### Phase 1: Core Data Model
+- [x] Create feature branch
+- [x] Document plan
+- [x] Create `types/submission.ts` - Type definitions
+- [x] Create `SubmissionService.ts` - Submission CRUD
+- [x] Create `LinkPreviewService.ts` - OG tag fetching
+- [x] Extend `FeedService.ts` - Handle kind 1111
+
+### Phase 2: Post Creation
+- [x] Create `SubmitComposer.vue` - Multi-type composer
+- [x] Add link preview on URL paste
+- [x] Add NSFW toggle
+- [x] Add route `/submit` for composer
+- [ ] Integrate with pictrs for media upload (Future)
+
+### Phase 3: Feed Display
+- [x] Create `SubmissionRow.vue` - Link aggregator row (Reddit/Lemmy style)
+- [x] Create `VoteControls.vue` - Up/down voting
+- [x] Create `SortTabs.vue` - Sort tabs (hot, new, top, controversial)
+- [x] Create `SubmissionList.vue` - Main feed container
+- [x] Create `SubmissionThumbnail.vue` - Thumbnail display
+- [x] Add feed sorting (hot, new, top, controversial)
+- [x] Add score calculation
+- [x] Create `LinkAggregatorTest.vue` - Test page with mock data & live mode
+
+### Phase 4: Detail View
+- [x] Create `SubmissionDetail.vue` - Full post view with content display
+- [x] Create `SubmissionComment.vue` - Recursive threaded comments
+- [x] Create `SubmissionDetailPage.vue` - Route page wrapper
+- [x] Add route `/submission/:id` for detail view
+- [x] Add comment sorting (best, new, old, controversial)
+- [x] Integrate comment submission via SubmissionService.createComment()
+
+### Phase 5: Communities (Future)
+- [ ] Create `CommunityService.ts`
+- [ ] Create community browser
+- [ ] Add moderation queue
+
+## Ranking Algorithms
+
+### Hot Rank (Lemmy-style)
+```typescript
+function hotRank(score: number, createdAt: Date): number {
+  const order = Math.log10(Math.max(Math.abs(score), 1))
+  const sign = score > 0 ? 1 : score < 0 ? -1 : 0
+  const seconds = (createdAt.getTime() - EPOCH.getTime()) / 1000
+  return sign * order + seconds / 45000
+}
+```
+
+### Controversy Rank
+```typescript
+function controversyRank(upvotes: number, downvotes: number): number {
+  const total = upvotes + downvotes
+  if (total === 0) return 0
+  const magnitude = Math.pow(total, 0.8)
+  const balance = total > 0 ? Math.min(upvotes, downvotes) / Math.max(upvotes, downvotes) : 0
+  return magnitude * balance
+}
+```
+
+## File Structure
+
+```
+src/modules/nostr-feed/
+├── types/
+│   └── submission.ts         # NEW
+├── services/
+│   ├── FeedService.ts        # MODIFY
+│   ├── SubmissionService.ts  # NEW
+│   ├── LinkPreviewService.ts # NEW
+│   ├── CommunityService.ts   # NEW (Phase 5)
+│   ├── ProfileService.ts     # EXISTING
+│   └── ReactionService.ts    # EXISTING (enhance for up/down)
+├── components/
+│   ├── SubmissionCard.vue    # NEW (Phase 3)
+│   ├── SubmitComposer.vue    # NEW (Phase 2)
+│   ├── SubmissionDetail.vue  # NEW (Phase 4)
+│   ├── VoteButtons.vue       # NEW (Phase 3)
+│   ├── ThreadedPost.vue      # EXISTING (reuse)
+│   ├── NostrFeed.vue         # EXISTING (modify)
+│   └── NoteComposer.vue      # EXISTING
+├── composables/
+│   ├── useSubmissions.ts     # NEW
+│   ├── useCommunities.ts     # NEW (Phase 5)
+│   ├── useFeed.ts            # EXISTING
+│   └── useReactions.ts       # EXISTING
+└── config/
+    └── content-filters.ts    # MODIFY
+```
+
+## Migration Strategy
+
+1. **Backwards compatible** - Continue supporting kind 1 notes
+2. **Gradual adoption** - Add kind 1111 alongside existing
+3. **Feature flag** - Toggle between classic feed and link aggregator view
diff --git a/src/modules/nostr-feed/components/SortTabs.vue b/src/modules/nostr-feed/components/SortTabs.vue
new file mode 100644
index 0000000..84a174f
--- /dev/null
+++ b/src/modules/nostr-feed/components/SortTabs.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+/**
+ * SortTabs - Sort/filter tabs for submission list
+ * Minimal tab row like old Reddit: hot | new | top | controversial
+ */
+
+import { computed } from 'vue'
+import { Flame, Clock, TrendingUp, Swords } from 'lucide-vue-next'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select'
+import type { SortType, TimeRange } from '../types/submission'
+
+interface Props {
+  currentSort: SortType
+  currentTimeRange?: TimeRange
+  showTimeRange?: boolean
+}
+
+interface Emits {
+  (e: 'update:sort', sort: SortType): void
+  (e: 'update:timeRange', range: TimeRange): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  currentTimeRange: 'day',
+  showTimeRange: false
+})
+
+const emit = defineEmits<Emits>()
+
+const sortOptions: { id: SortType; label: string; icon: any }[] = [
+  { id: 'hot', label: 'hot', icon: Flame },
+  { id: 'new', label: 'new', icon: Clock },
+  { id: 'top', label: 'top', icon: TrendingUp },
+  { id: 'controversial', label: 'controversial', icon: Swords }
+]
+
+const timeRangeOptions: { id: TimeRange; label: string }[] = [
+  { id: 'hour', label: 'hour' },
+  { id: 'day', label: 'day' },
+  { id: 'week', label: 'week' },
+  { id: 'month', label: 'month' },
+  { id: 'year', label: 'year' },
+  { id: 'all', label: 'all time' }
+]
+
+// Show time range dropdown when top is selected
+const showTimeDropdown = computed(() =>
+  props.showTimeRange && props.currentSort === 'top'
+)
+
+function selectSort(sort: SortType) {
+  emit('update:sort', sort)
+}
+
+function selectTimeRange(range: TimeRange) {
+  emit('update:timeRange', range)
+}
+</script>
+
+<template>
+  <div class="flex items-center gap-1 text-sm border-b border-border pt-3 pb-2 mb-2">
+    <!-- Sort tabs -->
+    <template v-for="option in sortOptions" :key="option.id">
+      <button
+        type="button"
+        :class="[
+          'px-2 py-1 rounded transition-colors flex items-center gap-1',
+          currentSort === option.id
+            ? 'bg-accent text-foreground font-medium'
+            : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+        ]"
+        @click="selectSort(option.id)"
+      >
+        <component :is="option.icon" class="h-3.5 w-3.5" />
+        <span>{{ option.label }}</span>
+      </button>
+    </template>
+
+    <!-- Time range dropdown (for top) -->
+    <template v-if="showTimeDropdown">
+      <span class="text-muted-foreground mx-1">·</span>
+      <Select
+        :model-value="currentTimeRange"
+        @update:model-value="selectTimeRange($event as TimeRange)"
+      >
+        <SelectTrigger class="h-auto w-auto gap-1 border-0 bg-transparent px-1 py-0.5 text-sm text-muted-foreground shadow-none hover:text-foreground focus:ring-0">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem
+            v-for="range in timeRangeOptions"
+            :key="range.id"
+            :value="range.id"
+          >
+            {{ range.label }}
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    </template>
+  </div>
+</template>
diff --git a/src/modules/nostr-feed/components/SubmissionComment.vue b/src/modules/nostr-feed/components/SubmissionComment.vue
new file mode 100644
index 0000000..ab52a9e
--- /dev/null
+++ b/src/modules/nostr-feed/components/SubmissionComment.vue
@@ -0,0 +1,275 @@
+<script setup lang="ts">
+/**
+ * SubmissionComment - Recursive comment component for submission threads
+ * Displays a single comment with vote controls and nested replies
+ */
+
+import { computed, ref } from 'vue'
+import { formatDistanceToNow } from 'date-fns'
+import { ChevronUp, ChevronDown, Reply, Flag, MoreHorizontal, Send } from 'lucide-vue-next'
+import type { SubmissionComment as CommentType } from '../types/submission'
+
+interface Props {
+  comment: CommentType
+  depth: number
+  collapsedComments: Set<string>
+  getDisplayName: (pubkey: string) => string
+  isAuthenticated: boolean
+  currentUserPubkey?: string | null
+  replyingToId?: string | null
+  isSubmittingReply?: boolean
+}
+
+interface Emits {
+  (e: 'toggle-collapse', commentId: string): void
+  (e: 'reply', comment: CommentType): void
+  (e: 'cancel-reply'): void
+  (e: 'submit-reply', commentId: string, text: string): void
+  (e: 'upvote', comment: CommentType): void
+  (e: 'downvote', comment: CommentType): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  replyingToId: null,
+  isSubmittingReply: false
+})
+const emit = defineEmits<Emits>()
+
+// Local reply text
+const replyText = ref('')
+
+// Is this comment being replied to
+const isBeingRepliedTo = computed(() => props.replyingToId === props.comment.id)
+
+// Handle reply click
+function onReplyClick() {
+  emit('reply', props.comment)
+}
+
+// Submit the reply
+function submitReply() {
+  if (!replyText.value.trim()) return
+  emit('submit-reply', props.comment.id, replyText.value.trim())
+  replyText.value = ''
+}
+
+// Cancel reply
+function cancelReply() {
+  replyText.value = ''
+  emit('cancel-reply')
+}
+
+// Is this comment collapsed
+const isCollapsed = computed(() => props.collapsedComments.has(props.comment.id))
+
+// Has replies
+const hasReplies = computed(() => props.comment.replies && props.comment.replies.length > 0)
+
+// Count total nested replies
+const replyCount = computed(() => {
+  const count = (c: CommentType): number => {
+    let total = c.replies?.length || 0
+    c.replies?.forEach(r => { total += count(r) })
+    return total
+  }
+  return count(props.comment)
+})
+
+// Format time
+function formatTime(timestamp: number): string {
+  return formatDistanceToNow(timestamp * 1000, { addSuffix: true })
+}
+
+// Depth colors for threading lines (using theme-aware chart colors)
+const depthColors = [
+  'bg-chart-1',
+  'bg-chart-2',
+  'bg-chart-3',
+  'bg-chart-4',
+  'bg-chart-5'
+]
+
+const depthColor = computed(() => depthColors[props.depth % depthColors.length])
+
+// Is own comment
+const isOwnComment = computed(() =>
+  props.currentUserPubkey && props.currentUserPubkey === props.comment.pubkey
+)
+</script>
+
+<template>
+  <div
+    :class="[
+      'relative',
+      depth > 0 ? 'ml-0.5' : ''
+    ]"
+  >
+    <!-- Threading line -->
+    <div
+      v-if="depth > 0"
+      :class="[
+        'absolute left-0 top-0 bottom-0 w-0.5',
+        depthColor,
+        'hover:w-1 transition-all cursor-pointer'
+      ]"
+      @click="emit('toggle-collapse', comment.id)"
+    />
+
+    <!-- Comment content -->
+    <div
+      :class="[
+        'py-1',
+        depth > 0 ? 'pl-2' : '',
+        'hover:bg-accent/20 transition-colors'
+      ]"
+    >
+      <!-- Header row -->
+      <div class="flex items-center gap-2 text-xs">
+        <!-- Collapse toggle -->
+        <button
+          v-if="hasReplies"
+          class="text-muted-foreground hover:text-foreground"
+          @click="emit('toggle-collapse', comment.id)"
+        >
+          <ChevronDown v-if="!isCollapsed" class="h-3.5 w-3.5" />
+          <ChevronUp v-else class="h-3.5 w-3.5" />
+        </button>
+        <div v-else class="w-3.5" />
+
+        <!-- Author -->
+        <span class="font-medium hover:underline cursor-pointer">
+          {{ getDisplayName(comment.pubkey) }}
+        </span>
+
+        <!-- Score -->
+        <span class="text-muted-foreground">
+          {{ comment.votes.score }} {{ comment.votes.score === 1 ? 'point' : 'points' }}
+        </span>
+
+        <!-- Time -->
+        <span class="text-muted-foreground">
+          {{ formatTime(comment.created_at) }}
+        </span>
+
+        <!-- Collapsed indicator -->
+        <span v-if="isCollapsed && hasReplies" class="text-muted-foreground">
+          ({{ replyCount }} {{ replyCount === 1 ? 'child' : 'children' }})
+        </span>
+      </div>
+
+      <!-- Content (hidden when collapsed) -->
+      <div v-if="!isCollapsed">
+        <!-- Comment body -->
+        <div class="mt-1 text-sm whitespace-pre-wrap leading-relaxed pl-5">
+          {{ comment.content }}
+        </div>
+
+        <!-- Actions -->
+        <div class="flex items-center gap-1 mt-1 pl-5">
+          <!-- Vote buttons (inline style) -->
+          <button
+            :class="[
+              'p-1 transition-colors',
+              comment.votes.userVote === 'upvote'
+                ? 'text-orange-500'
+                : 'text-muted-foreground hover:text-orange-500'
+            ]"
+            :disabled="!isAuthenticated"
+            @click="emit('upvote', comment)"
+          >
+            <ChevronUp class="h-4 w-4" />
+          </button>
+          <button
+            :class="[
+              'p-1 transition-colors',
+              comment.votes.userVote === 'downvote'
+                ? 'text-blue-500'
+                : 'text-muted-foreground hover:text-blue-500'
+            ]"
+            :disabled="!isAuthenticated"
+            @click="emit('downvote', comment)"
+          >
+            <ChevronDown class="h-4 w-4" />
+          </button>
+
+          <!-- Reply -->
+          <button
+            class="flex items-center gap-1 px-2 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-accent rounded transition-colors"
+            :disabled="!isAuthenticated"
+            @click="onReplyClick"
+          >
+            <Reply class="h-3 w-3" />
+            <span>reply</span>
+          </button>
+
+          <!-- Report (not for own comments) -->
+          <button
+            v-if="!isOwnComment"
+            class="flex items-center gap-1 px-2 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-accent rounded transition-colors"
+          >
+            <Flag class="h-3 w-3" />
+            <span>report</span>
+          </button>
+
+          <!-- More options -->
+          <button
+            class="p-1 text-muted-foreground hover:text-foreground hover:bg-accent rounded transition-colors"
+          >
+            <MoreHorizontal class="h-3 w-3" />
+          </button>
+        </div>
+
+        <!-- Inline reply form -->
+        <div v-if="isBeingRepliedTo" class="mt-2 pl-5">
+          <div class="border rounded-lg bg-background p-2">
+            <textarea
+              v-model="replyText"
+              placeholder="Write a reply..."
+              rows="3"
+              class="w-full px-2 py-1.5 text-sm bg-transparent resize-none focus:outline-none"
+              :disabled="isSubmittingReply"
+            />
+            <div class="flex items-center justify-end gap-2 mt-1">
+              <button
+                class="px-3 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                @click="cancelReply"
+              >
+                Cancel
+              </button>
+              <button
+                class="flex items-center gap-1 px-3 py-1 text-xs bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors disabled:opacity-50"
+                :disabled="!replyText.trim() || isSubmittingReply"
+                @click="submitReply"
+              >
+                <Send class="h-3 w-3" />
+                Reply
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Nested replies -->
+        <div v-if="hasReplies" class="mt-1">
+          <SubmissionComment
+            v-for="reply in comment.replies"
+            :key="reply.id"
+            :comment="reply"
+            :depth="depth + 1"
+            :collapsed-comments="collapsedComments"
+            :get-display-name="getDisplayName"
+            :is-authenticated="isAuthenticated"
+            :current-user-pubkey="currentUserPubkey"
+            :replying-to-id="replyingToId"
+            :is-submitting-reply="isSubmittingReply"
+            @toggle-collapse="emit('toggle-collapse', $event)"
+            @reply="emit('reply', $event)"
+            @cancel-reply="emit('cancel-reply')"
+            @submit-reply="(commentId, text) => emit('submit-reply', commentId, text)"
+            @upvote="emit('upvote', $event)"
+            @downvote="emit('downvote', $event)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/nostr-feed/components/SubmissionDetail.vue b/src/modules/nostr-feed/components/SubmissionDetail.vue
new file mode 100644
index 0000000..7fe5822
--- /dev/null
+++ b/src/modules/nostr-feed/components/SubmissionDetail.vue
@@ -0,0 +1,553 @@
+<script setup lang="ts">
+/**
+ * SubmissionDetail - Full post view with comments
+ * Displays complete submission content and threaded comments
+ */
+
+import { ref, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { formatDistanceToNow } from 'date-fns'
+import {
+  ArrowLeft,
+  MessageSquare,
+  Share2,
+  Bookmark,
+  Flag,
+  ExternalLink,
+  Image as ImageIcon,
+  FileText,
+  Loader2,
+  Send
+} from 'lucide-vue-next'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import VoteControls from './VoteControls.vue'
+import SubmissionCommentComponent from './SubmissionComment.vue'
+import { useSubmission } from '../composables/useSubmissions'
+import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
+import type { ProfileService } from '../services/ProfileService'
+import type { SubmissionService } from '../services/SubmissionService'
+import type {
+  SubmissionComment as SubmissionCommentType,
+  LinkSubmission,
+  MediaSubmission,
+  SelfSubmission
+} from '../types/submission'
+
+interface Props {
+  /** Submission ID to display */
+  submissionId: string
+}
+
+const props = defineProps<Props>()
+const router = useRouter()
+
+// Comment sort options
+type CommentSort = 'best' | 'new' | 'old' | 'controversial'
+
+// Inject services
+const profileService = tryInjectService<ProfileService>(SERVICE_TOKENS.PROFILE_SERVICE)
+const authService = tryInjectService<any>(SERVICE_TOKENS.AUTH_SERVICE)
+const submissionService = tryInjectService<SubmissionService>(SERVICE_TOKENS.SUBMISSION_SERVICE)
+
+// Use submission composable - handles subscription automatically
+const { submission, comments, upvote, downvote, isLoading, error } = useSubmission(props.submissionId)
+
+// Comment composer state
+const showComposer = ref(false)
+const replyingTo = ref<{ id: string; author: string } | null>(null)
+const commentText = ref('')
+const isSubmittingComment = ref(false)
+const commentError = ref<string | null>(null)
+
+// Comment sorting state
+const commentSort = ref<CommentSort>('best')
+
+// Collapsed comments state
+const collapsedComments = ref(new Set<string>())
+
+// Sorted comments
+const sortedComments = computed(() => {
+  if (submissionService) {
+    return submissionService.getSortedComments(props.submissionId, commentSort.value)
+  }
+  return comments.value
+})
+
+// Auth state
+const isAuthenticated = computed(() => authService?.isAuthenticated?.value || false)
+const currentUserPubkey = computed(() => authService?.user?.value?.pubkey || null)
+
+// Get display name for a pubkey
+function getDisplayName(pubkey: string): string {
+  if (profileService) {
+    return profileService.getDisplayName(pubkey)
+  }
+  return `${pubkey.slice(0, 8)}...`
+}
+
+// Format timestamp
+function formatTime(timestamp: number): string {
+  return formatDistanceToNow(timestamp * 1000, { addSuffix: true })
+}
+
+// Extract domain from URL
+function extractDomain(url: string): string {
+  try {
+    return new URL(url).hostname.replace('www.', '')
+  } catch {
+    return url
+  }
+}
+
+// Cast submission to specific type
+const linkSubmission = computed(() =>
+  submission.value?.postType === 'link' ? submission.value as LinkSubmission : null
+)
+const mediaSubmission = computed(() =>
+  submission.value?.postType === 'media' ? submission.value as MediaSubmission : null
+)
+const selfSubmission = computed(() =>
+  submission.value?.postType === 'self' ? submission.value as SelfSubmission : null
+)
+
+// Community name
+const communityName = computed(() => {
+  if (!submission.value?.communityRef) return null
+  const parts = submission.value.communityRef.split(':')
+  return parts.length >= 3 ? parts.slice(2).join(':') : null
+})
+
+// Handle voting
+async function onUpvote() {
+  if (!isAuthenticated.value) return
+  try {
+    await upvote()
+  } catch (err) {
+    console.error('Failed to upvote:', err)
+  }
+}
+
+async function onDownvote() {
+  if (!isAuthenticated.value) return
+  try {
+    await downvote()
+  } catch (err) {
+    console.error('Failed to downvote:', err)
+  }
+}
+
+// Handle comment voting
+async function onCommentUpvote(comment: SubmissionCommentType) {
+  if (!isAuthenticated.value || !submissionService) return
+  try {
+    await submissionService.upvoteComment(props.submissionId, comment.id)
+  } catch (err) {
+    console.error('Failed to upvote comment:', err)
+  }
+}
+
+async function onCommentDownvote(comment: SubmissionCommentType) {
+  if (!isAuthenticated.value || !submissionService) return
+  try {
+    await submissionService.downvoteComment(props.submissionId, comment.id)
+  } catch (err) {
+    console.error('Failed to downvote comment:', err)
+  }
+}
+
+// Handle share
+function onShare() {
+  const url = window.location.href
+  navigator.clipboard?.writeText(url)
+  // TODO: Show toast
+}
+
+// Computed for passing to comment components
+const replyingToId = computed(() => replyingTo.value?.id || null)
+
+// Handle comment reply - for inline replies to comments
+function startReply(comment?: SubmissionCommentType) {
+  if (comment) {
+    // Replying to a comment - show inline form (handled by SubmissionComment)
+    replyingTo.value = { id: comment.id, author: getDisplayName(comment.pubkey) }
+    showComposer.value = false // Hide top composer
+  } else {
+    // Top-level comment - show top composer
+    replyingTo.value = null
+    showComposer.value = true
+  }
+  commentText.value = ''
+}
+
+function cancelReply() {
+  showComposer.value = false
+  replyingTo.value = null
+  commentText.value = ''
+}
+
+// Submit top-level comment (from top composer)
+async function submitComment() {
+  if (!commentText.value.trim() || !isAuthenticated.value || !submissionService) return
+
+  isSubmittingComment.value = true
+  commentError.value = null
+
+  try {
+    await submissionService.createComment(
+      props.submissionId,
+      commentText.value.trim(),
+      undefined // Top-level comment
+    )
+    cancelReply()
+  } catch (err: any) {
+    console.error('Failed to submit comment:', err)
+    commentError.value = err.message || 'Failed to post comment'
+  } finally {
+    isSubmittingComment.value = false
+  }
+}
+
+// Submit inline reply (from SubmissionComment's inline form)
+async function submitReply(commentId: string, text: string) {
+  if (!text.trim() || !isAuthenticated.value || !submissionService) return
+
+  isSubmittingComment.value = true
+  commentError.value = null
+
+  try {
+    await submissionService.createComment(
+      props.submissionId,
+      text.trim(),
+      commentId
+    )
+    cancelReply()
+  } catch (err: any) {
+    console.error('Failed to submit reply:', err)
+    commentError.value = err.message || 'Failed to post reply'
+  } finally {
+    isSubmittingComment.value = false
+  }
+}
+
+// Toggle comment collapse
+function toggleCollapse(commentId: string) {
+  if (collapsedComments.value.has(commentId)) {
+    collapsedComments.value.delete(commentId)
+  } else {
+    collapsedComments.value.add(commentId)
+  }
+  // Trigger reactivity
+  collapsedComments.value = new Set(collapsedComments.value)
+}
+
+// Go back
+function goBack() {
+  router.back()
+}
+
+// Helper to collect all pubkeys from comments recursively
+function collectCommentPubkeys(comments: SubmissionCommentType[]): string[] {
+  const pubkeys: string[] = []
+  for (const comment of comments) {
+    pubkeys.push(comment.pubkey)
+    if (comment.replies?.length) {
+      pubkeys.push(...collectCommentPubkeys(comment.replies))
+    }
+  }
+  return pubkeys
+}
+
+// Fetch profiles when submission loads
+watch(submission, (sub) => {
+  if (profileService && sub) {
+    profileService.fetchProfiles([sub.pubkey])
+  }
+}, { immediate: true })
+
+// Fetch profiles when comments load
+watch(comments, (newComments) => {
+  if (profileService && newComments.length > 0) {
+    const pubkeys = [...new Set(collectCommentPubkeys(newComments))]
+    profileService.fetchProfiles(pubkeys)
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <!-- Header -->
+    <header class="sticky top-0 z-40 bg-background/95 backdrop-blur border-b">
+      <div class="max-w-4xl mx-auto px-4 py-3">
+        <div class="flex items-center gap-3">
+          <Button variant="ghost" size="sm" @click="goBack" class="h-8 w-8 p-0">
+            <ArrowLeft class="h-4 w-4" />
+          </Button>
+          <div class="flex-1 min-w-0">
+            <h1 class="text-sm font-medium truncate">
+              {{ submission?.title || 'Loading...' }}
+            </h1>
+            <p v-if="communityName" class="text-xs text-muted-foreground">
+              {{ communityName }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Loading state -->
+    <div v-if="isLoading && !submission" class="flex items-center justify-center py-16">
+      <Loader2 class="h-6 w-6 animate-spin text-muted-foreground" />
+      <span class="ml-2 text-sm text-muted-foreground">Loading submission...</span>
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="error" class="max-w-4xl mx-auto p-4">
+      <div class="text-center py-8">
+        <p class="text-sm text-destructive">{{ error }}</p>
+        <Button variant="outline" size="sm" class="mt-4" @click="goBack">
+          Go Back
+        </Button>
+      </div>
+    </div>
+
+    <!-- Submission content -->
+    <main v-else-if="submission" class="max-w-4xl mx-auto">
+      <article class="p-4 border-b">
+        <!-- Post header with votes -->
+        <div class="flex gap-3">
+          <!-- Vote controls -->
+          <VoteControls
+            :score="submission.votes.score"
+            :user-vote="submission.votes.userVote"
+            :disabled="!isAuthenticated"
+            @upvote="onUpvote"
+            @downvote="onDownvote"
+          />
+
+          <!-- Content -->
+          <div class="flex-1 min-w-0">
+            <!-- Title -->
+            <h1 class="text-xl font-semibold leading-tight mb-2">
+              {{ submission.title }}
+            </h1>
+
+            <!-- Badges -->
+            <div v-if="submission.nsfw || submission.flair" class="flex items-center gap-2 mb-2">
+              <Badge v-if="submission.nsfw" variant="destructive" class="text-xs">
+                NSFW
+              </Badge>
+              <Badge v-if="submission.flair" variant="secondary" class="text-xs">
+                {{ submission.flair }}
+              </Badge>
+            </div>
+
+            <!-- Metadata -->
+            <div class="text-sm text-muted-foreground mb-4">
+              <span>submitted {{ formatTime(submission.created_at) }}</span>
+              <span> by </span>
+              <span class="font-medium hover:underline cursor-pointer">
+                {{ getDisplayName(submission.pubkey) }}
+              </span>
+              <template v-if="communityName">
+                <span> to </span>
+                <span class="font-medium hover:underline cursor-pointer">{{ communityName }}</span>
+              </template>
+            </div>
+
+            <!-- Link post content -->
+            <div v-if="linkSubmission" class="mb-4">
+              <a
+                :href="linkSubmission.url"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="block p-4 border rounded-lg hover:bg-accent/30 transition-colors group"
+              >
+                <div class="flex items-start gap-4">
+                  <!-- Preview image -->
+                  <div
+                    v-if="linkSubmission.preview?.image"
+                    class="flex-shrink-0 w-32 h-24 rounded overflow-hidden bg-muted"
+                  >
+                    <img
+                      :src="linkSubmission.preview.image"
+                      :alt="linkSubmission.preview.title || ''"
+                      class="w-full h-full object-cover"
+                    />
+                  </div>
+                  <div v-else class="flex-shrink-0 w-16 h-16 rounded bg-muted flex items-center justify-center">
+                    <ExternalLink class="h-6 w-6 text-muted-foreground" />
+                  </div>
+
+                  <!-- Preview content -->
+                  <div class="flex-1 min-w-0">
+                    <div class="flex items-center gap-2 text-xs text-muted-foreground mb-1">
+                      <ExternalLink class="h-3 w-3" />
+                      <span>{{ extractDomain(linkSubmission.url) }}</span>
+                    </div>
+                    <h3 v-if="linkSubmission.preview?.title" class="font-medium text-sm group-hover:underline">
+                      {{ linkSubmission.preview.title }}
+                    </h3>
+                    <p v-if="linkSubmission.preview?.description" class="text-xs text-muted-foreground mt-1 line-clamp-2">
+                      {{ linkSubmission.preview.description }}
+                    </p>
+                  </div>
+                </div>
+              </a>
+
+              <!-- Optional body -->
+              <div v-if="linkSubmission.body" class="mt-4 text-sm whitespace-pre-wrap">
+                {{ linkSubmission.body }}
+              </div>
+            </div>
+
+            <!-- Media post content -->
+            <div v-if="mediaSubmission" class="mb-4">
+              <div class="rounded-lg overflow-hidden bg-muted">
+                <img
+                  v-if="mediaSubmission.media.mimeType?.startsWith('image/')"
+                  :src="mediaSubmission.media.url"
+                  :alt="mediaSubmission.media.alt || ''"
+                  class="max-w-full max-h-[600px] mx-auto"
+                />
+                <video
+                  v-else-if="mediaSubmission.media.mimeType?.startsWith('video/')"
+                  :src="mediaSubmission.media.url"
+                  controls
+                  class="max-w-full max-h-[600px] mx-auto"
+                />
+                <div v-else class="p-8 flex flex-col items-center justify-center">
+                  <ImageIcon class="h-12 w-12 text-muted-foreground mb-2" />
+                  <a
+                    :href="mediaSubmission.media.url"
+                    target="_blank"
+                    class="text-sm text-primary hover:underline"
+                  >
+                    View media
+                  </a>
+                </div>
+              </div>
+
+              <!-- Caption -->
+              <div v-if="mediaSubmission.body" class="mt-4 text-sm whitespace-pre-wrap">
+                {{ mediaSubmission.body }}
+              </div>
+            </div>
+
+            <!-- Self post content -->
+            <div v-if="selfSubmission" class="mb-4">
+              <div class="text-sm whitespace-pre-wrap leading-relaxed">
+                {{ selfSubmission.body }}
+              </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="flex items-center gap-4 text-sm text-muted-foreground">
+              <button
+                class="flex items-center gap-1.5 hover:text-foreground transition-colors"
+                @click="startReply()"
+              >
+                <MessageSquare class="h-4 w-4" />
+                <span>{{ submission.commentCount }} comments</span>
+              </button>
+              <button
+                class="flex items-center gap-1.5 hover:text-foreground transition-colors"
+                @click="onShare"
+              >
+                <Share2 class="h-4 w-4" />
+                <span>share</span>
+              </button>
+              <button class="flex items-center gap-1.5 hover:text-foreground transition-colors">
+                <Bookmark class="h-4 w-4" />
+                <span>save</span>
+              </button>
+              <button class="flex items-center gap-1.5 hover:text-foreground transition-colors">
+                <Flag class="h-4 w-4" />
+                <span>report</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </article>
+
+      <!-- Top-level comment composer (only for new comments, not replies) -->
+      <div v-if="isAuthenticated && !replyingTo" class="p-4 border-b">
+        <div class="flex gap-2">
+          <textarea
+            v-model="commentText"
+            placeholder="Write a comment..."
+            rows="3"
+            class="flex-1 px-3 py-2 text-sm border rounded-lg bg-background resize-none focus:outline-none focus:ring-2 focus:ring-primary"
+          />
+        </div>
+        <!-- Comment error -->
+        <div v-if="commentError" class="mt-2 text-sm text-destructive">
+          {{ commentError }}
+        </div>
+        <div class="flex justify-end mt-2">
+          <Button
+            size="sm"
+            :disabled="!commentText.trim() || isSubmittingComment"
+            @click="submitComment"
+          >
+            <Loader2 v-if="isSubmittingComment" class="h-4 w-4 animate-spin mr-2" />
+            <Send v-else class="h-4 w-4 mr-2" />
+            Comment
+          </Button>
+        </div>
+      </div>
+
+      <!-- Comments section -->
+      <section class="divide-y divide-border">
+        <!-- Comment sort selector -->
+        <div v-if="sortedComments.length > 0" class="px-4 py-3 border-b flex items-center gap-2">
+          <span class="text-sm text-muted-foreground">Sort by:</span>
+          <select
+            v-model="commentSort"
+            class="text-sm bg-background border rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-primary"
+          >
+            <option value="best">Best</option>
+            <option value="new">New</option>
+            <option value="old">Old</option>
+            <option value="controversial">Controversial</option>
+          </select>
+        </div>
+
+        <div v-if="sortedComments.length === 0" class="p-8 text-center text-sm text-muted-foreground">
+          No comments yet. Be the first to comment!
+        </div>
+
+        <!-- Recursive comment rendering -->
+        <template v-for="comment in sortedComments" :key="comment.id">
+          <SubmissionCommentComponent
+            :comment="comment"
+            :depth="0"
+            :collapsed-comments="collapsedComments"
+            :get-display-name="getDisplayName"
+            :is-authenticated="isAuthenticated"
+            :current-user-pubkey="currentUserPubkey"
+            :replying-to-id="replyingToId"
+            :is-submitting-reply="isSubmittingComment"
+            @toggle-collapse="toggleCollapse"
+            @reply="startReply"
+            @cancel-reply="cancelReply"
+            @submit-reply="submitReply"
+            @upvote="onCommentUpvote"
+            @downvote="onCommentDownvote"
+          />
+        </template>
+      </section>
+    </main>
+
+    <!-- Not found state -->
+    <div v-else class="max-w-4xl mx-auto p-4">
+      <div class="text-center py-16">
+        <FileText class="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+        <p class="text-sm text-muted-foreground">Submission not found</p>
+        <Button variant="outline" size="sm" class="mt-4" @click="goBack">
+          Go Back
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/nostr-feed/components/SubmissionList.vue b/src/modules/nostr-feed/components/SubmissionList.vue
new file mode 100644
index 0000000..f4adea4
--- /dev/null
+++ b/src/modules/nostr-feed/components/SubmissionList.vue
@@ -0,0 +1,235 @@
+<script setup lang="ts">
+/**
+ * SubmissionList - Main container for Reddit/Lemmy style submission feed
+ * Includes sort tabs, submission rows, and loading states
+ */
+
+import { computed, onMounted, watch } from 'vue'
+import { Loader2 } from 'lucide-vue-next'
+import SortTabs from './SortTabs.vue'
+import SubmissionRow from './SubmissionRow.vue'
+import { useSubmissions } from '../composables/useSubmissions'
+import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
+import type { ProfileService } from '../services/ProfileService'
+import type { SubmissionWithMeta, SortType, TimeRange, CommunityRef } from '../types/submission'
+
+interface Props {
+  /** Community to filter by */
+  community?: CommunityRef | null
+  /** Show rank numbers */
+  showRanks?: boolean
+  /** Show time range selector for top sort */
+  showTimeRange?: boolean
+  /** Initial sort */
+  initialSort?: SortType
+  /** Max submissions to show */
+  limit?: number
+}
+
+interface Emits {
+  (e: 'submission-click', submission: SubmissionWithMeta): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showRanks: false,
+  showTimeRange: true,
+  initialSort: 'hot',
+  limit: 50
+})
+
+const emit = defineEmits<Emits>()
+
+// Inject profile service for display names
+const profileService = tryInjectService<ProfileService>(SERVICE_TOKENS.PROFILE_SERVICE)
+
+// Auth service for checking authentication
+const authService = tryInjectService<any>(SERVICE_TOKENS.AUTH_SERVICE)
+
+// Use submissions composable
+const {
+  submissions,
+  isLoading,
+  error,
+  currentSort,
+  currentTimeRange,
+  subscribe,
+  upvote,
+  downvote,
+  setSort
+} = useSubmissions({
+  autoSubscribe: false,
+  config: {
+    community: props.community,
+    limit: props.limit
+  }
+})
+
+// Set initial sort
+currentSort.value = props.initialSort
+
+// Current user pubkey
+const currentUserPubkey = computed(() => authService?.user?.value?.pubkey || null)
+
+// Is user authenticated
+const isAuthenticated = computed(() => authService?.isAuthenticated?.value || false)
+
+// Get display name for a pubkey
+function getDisplayName(pubkey: string): string {
+  if (profileService) {
+    return profileService.getDisplayName(pubkey)
+  }
+  // Fallback to truncated pubkey
+  return `${pubkey.slice(0, 8)}...`
+}
+
+// Handle sort change
+function onSortChange(sort: SortType) {
+  setSort(sort, currentTimeRange.value)
+}
+
+// Handle time range change
+function onTimeRangeChange(range: TimeRange) {
+  setSort(currentSort.value, range)
+}
+
+// Handle upvote
+async function onUpvote(submission: SubmissionWithMeta) {
+  try {
+    await upvote(submission.id)
+  } catch (err) {
+    console.error('Failed to upvote:', err)
+  }
+}
+
+// Handle downvote
+async function onDownvote(submission: SubmissionWithMeta) {
+  try {
+    await downvote(submission.id)
+  } catch (err) {
+    console.error('Failed to downvote:', err)
+  }
+}
+
+// Handle submission click
+function onSubmissionClick(submission: SubmissionWithMeta) {
+  emit('submission-click', submission)
+}
+
+// Handle share
+function onShare(submission: SubmissionWithMeta) {
+  // Copy link to clipboard or open share dialog
+  const url = `${window.location.origin}/submission/${submission.id}`
+  navigator.clipboard?.writeText(url)
+  // TODO: Show toast notification
+}
+
+// Handle save
+function onSave(submission: SubmissionWithMeta) {
+  // TODO: Implement save functionality
+  console.log('Save:', submission.id)
+}
+
+// Handle hide
+function onHide(submission: SubmissionWithMeta) {
+  // TODO: Implement hide functionality
+  console.log('Hide:', submission.id)
+}
+
+// Handle report
+function onReport(submission: SubmissionWithMeta) {
+  // TODO: Implement report functionality
+  console.log('Report:', submission.id)
+}
+
+// Fetch profiles when submissions change
+watch(submissions, (newSubmissions) => {
+  if (profileService && newSubmissions.length > 0) {
+    const pubkeys = [...new Set(newSubmissions.map(s => s.pubkey))]
+    profileService.fetchProfiles(pubkeys)
+  }
+}, { immediate: true })
+
+// Subscribe when community changes
+watch(() => props.community, () => {
+  subscribe({
+    community: props.community,
+    limit: props.limit
+  })
+}, { immediate: false })
+
+// Initial subscribe
+onMounted(() => {
+  subscribe({
+    community: props.community,
+    limit: props.limit
+  })
+})
+</script>
+
+<template>
+  <div class="submission-list">
+    <!-- Sort tabs -->
+    <SortTabs
+      :current-sort="currentSort"
+      :current-time-range="currentTimeRange"
+      :show-time-range="showTimeRange"
+      @update:sort="onSortChange"
+      @update:time-range="onTimeRangeChange"
+    />
+
+    <!-- Loading state -->
+    <div v-if="isLoading && submissions.length === 0" class="flex items-center justify-center py-8">
+      <Loader2 class="h-6 w-6 animate-spin text-muted-foreground" />
+      <span class="ml-2 text-sm text-muted-foreground">Loading submissions...</span>
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="error" class="text-center py-8">
+      <p class="text-sm text-destructive">{{ error }}</p>
+      <button
+        type="button"
+        class="mt-2 text-sm text-primary hover:underline"
+        @click="subscribe({ community, limit })"
+      >
+        Try again
+      </button>
+    </div>
+
+    <!-- Empty state -->
+    <div v-else-if="submissions.length === 0" class="text-center py-8">
+      <p class="text-sm text-muted-foreground">No submissions yet</p>
+    </div>
+
+    <!-- Submission list -->
+    <div v-else class="divide-y divide-border">
+      <SubmissionRow
+        v-for="(submission, index) in submissions"
+        :key="submission.id"
+        :submission="submission"
+        :rank="showRanks ? index + 1 : undefined"
+        :get-display-name="getDisplayName"
+        :current-user-pubkey="currentUserPubkey"
+        :is-authenticated="isAuthenticated"
+        @upvote="onUpvote"
+        @downvote="onDownvote"
+        @click="onSubmissionClick"
+        @share="onShare"
+        @save="onSave"
+        @hide="onHide"
+        @report="onReport"
+      />
+    </div>
+
+    <!-- Loading more indicator -->
+    <div v-if="isLoading && submissions.length > 0" class="flex items-center justify-center py-4">
+      <Loader2 class="h-4 w-4 animate-spin text-muted-foreground" />
+      <span class="ml-2 text-xs text-muted-foreground">Loading more...</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.submission-list {
+  max-width: 100%;
+}
+</style>
diff --git a/src/modules/nostr-feed/components/SubmissionRow.vue b/src/modules/nostr-feed/components/SubmissionRow.vue
new file mode 100644
index 0000000..3f21620
--- /dev/null
+++ b/src/modules/nostr-feed/components/SubmissionRow.vue
@@ -0,0 +1,247 @@
+<script setup lang="ts">
+/**
+ * SubmissionRow - Single submission row in Reddit/Lemmy style
+ * Compact, information-dense layout with votes, thumbnail, title, metadata
+ */
+
+import { computed } from 'vue'
+import { formatDistanceToNow } from 'date-fns'
+import { MessageSquare, Share2, Bookmark, EyeOff, Flag, Link2 } from 'lucide-vue-next'
+import VoteControls from './VoteControls.vue'
+import SubmissionThumbnail from './SubmissionThumbnail.vue'
+import { Badge } from '@/components/ui/badge'
+import type { SubmissionWithMeta, LinkSubmission, MediaSubmission } from '../types/submission'
+import { extractDomain } from '../types/submission'
+
+interface Props {
+  submission: SubmissionWithMeta
+  /** Display name resolver */
+  getDisplayName: (pubkey: string) => string
+  /** Current user pubkey for "own post" detection */
+  currentUserPubkey?: string | null
+  /** Show rank number */
+  rank?: number
+  /** Whether user is authenticated (for voting) */
+  isAuthenticated?: boolean
+}
+
+interface Emits {
+  (e: 'upvote', submission: SubmissionWithMeta): void
+  (e: 'downvote', submission: SubmissionWithMeta): void
+  (e: 'click', submission: SubmissionWithMeta): void
+  (e: 'save', submission: SubmissionWithMeta): void
+  (e: 'hide', submission: SubmissionWithMeta): void
+  (e: 'report', submission: SubmissionWithMeta): void
+  (e: 'share', submission: SubmissionWithMeta): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isAuthenticated: false
+})
+
+const emit = defineEmits<Emits>()
+
+// Extract thumbnail URL based on post type
+const thumbnailUrl = computed(() => {
+  const s = props.submission
+
+  if (s.postType === 'link') {
+    const link = s as LinkSubmission
+    return link.preview?.image || undefined
+  }
+
+  if (s.postType === 'media') {
+    const media = s as MediaSubmission
+    return media.media.thumbnail || media.media.url
+  }
+
+  return undefined
+})
+
+// Extract domain for link posts
+const domain = computed(() => {
+  if (props.submission.postType === 'link') {
+    const link = props.submission as LinkSubmission
+    return extractDomain(link.url)
+  }
+  return null
+})
+
+// Format timestamp
+const timeAgo = computed(() => {
+  return formatDistanceToNow(props.submission.created_at * 1000, { addSuffix: true })
+})
+
+// Author display name
+const authorName = computed(() => {
+  return props.getDisplayName(props.submission.pubkey)
+})
+
+// Is this the user's own post?
+const isOwnPost = computed(() => {
+  return props.currentUserPubkey === props.submission.pubkey
+})
+
+// Community name (if any)
+const communityName = computed(() => {
+  const ref = props.submission.communityRef
+  if (!ref) return null
+  // Extract identifier from "34550:pubkey:identifier"
+  const parts = ref.split(':')
+  return parts.length >= 3 ? parts.slice(2).join(':') : null
+})
+
+// Post type indicator for self posts
+const postTypeLabel = computed(() => {
+  if (props.submission.postType === 'self') return 'self'
+  return null
+})
+
+function onTitleClick() {
+  if (props.submission.postType === 'link') {
+    // Open external link
+    const link = props.submission as LinkSubmission
+    window.open(link.url, '_blank', 'noopener,noreferrer')
+  } else {
+    // Navigate to post detail
+    emit('click', props.submission)
+  }
+}
+
+function onCommentsClick() {
+  emit('click', props.submission)
+}
+</script>
+
+<template>
+  <div class="flex items-start gap-2 py-2 px-1 hover:bg-accent/30 transition-colors group">
+    <!-- Rank number (optional) -->
+    <div v-if="rank" class="w-6 text-right text-sm text-muted-foreground font-medium pt-1">
+      {{ rank }}
+    </div>
+
+    <!-- Vote controls -->
+    <VoteControls
+      :score="submission.votes.score"
+      :user-vote="submission.votes.userVote"
+      :disabled="!isAuthenticated"
+      @upvote="emit('upvote', submission)"
+      @downvote="emit('downvote', submission)"
+    />
+
+    <!-- Thumbnail -->
+    <SubmissionThumbnail
+      :src="thumbnailUrl"
+      :post-type="submission.postType"
+      :nsfw="submission.nsfw"
+      :size="70"
+      class="cursor-pointer"
+      @click="onCommentsClick"
+    />
+
+    <!-- Content -->
+    <div class="flex-1 min-w-0">
+      <!-- Title row -->
+      <div class="flex items-start gap-2">
+        <h3
+          class="text-sm font-medium leading-snug cursor-pointer hover:underline"
+          @click="onTitleClick"
+        >
+          {{ submission.title }}
+        </h3>
+
+        <!-- Domain for link posts -->
+        <span v-if="domain" class="text-xs text-muted-foreground flex-shrink-0">
+          ({{ domain }})
+        </span>
+
+        <!-- Self post indicator -->
+        <span v-if="postTypeLabel" class="text-xs text-muted-foreground flex-shrink-0">
+          ({{ postTypeLabel }})
+        </span>
+
+        <!-- External link icon for link posts -->
+        <Link2
+          v-if="submission.postType === 'link'"
+          class="h-3 w-3 text-muted-foreground flex-shrink-0 mt-0.5"
+        />
+      </div>
+
+      <!-- Flair badges -->
+      <div v-if="submission.nsfw || submission.flair" class="flex items-center gap-1 mt-0.5">
+        <Badge v-if="submission.nsfw" variant="destructive" class="text-[10px] px-1 py-0">
+          NSFW
+        </Badge>
+        <Badge v-if="submission.flair" variant="secondary" class="text-[10px] px-1 py-0">
+          {{ submission.flair }}
+        </Badge>
+      </div>
+
+      <!-- Metadata row -->
+      <div class="text-xs text-muted-foreground mt-1">
+        <span>submitted {{ timeAgo }}</span>
+        <span> by </span>
+        <span class="hover:underline cursor-pointer">{{ authorName }}</span>
+        <template v-if="communityName">
+          <span> to </span>
+          <span class="hover:underline cursor-pointer font-medium">{{ communityName }}</span>
+        </template>
+      </div>
+
+      <!-- Actions row -->
+      <div class="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
+        <!-- Comments -->
+        <button
+          type="button"
+          class="flex items-center gap-1 hover:text-foreground transition-colors"
+          @click="onCommentsClick"
+        >
+          <MessageSquare class="h-3.5 w-3.5" />
+          <span>{{ submission.commentCount }} comments</span>
+        </button>
+
+        <!-- Share -->
+        <button
+          type="button"
+          class="flex items-center gap-1 hover:text-foreground transition-colors opacity-0 group-hover:opacity-100"
+          @click="emit('share', submission)"
+        >
+          <Share2 class="h-3.5 w-3.5" />
+          <span>share</span>
+        </button>
+
+        <!-- Save -->
+        <button
+          type="button"
+          class="flex items-center gap-1 hover:text-foreground transition-colors opacity-0 group-hover:opacity-100"
+          :class="{ 'text-yellow-500': submission.isSaved }"
+          @click="emit('save', submission)"
+        >
+          <Bookmark class="h-3.5 w-3.5" :class="{ 'fill-current': submission.isSaved }" />
+          <span>{{ submission.isSaved ? 'saved' : 'save' }}</span>
+        </button>
+
+        <!-- Hide -->
+        <button
+          type="button"
+          class="flex items-center gap-1 hover:text-foreground transition-colors opacity-0 group-hover:opacity-100"
+          @click="emit('hide', submission)"
+        >
+          <EyeOff class="h-3.5 w-3.5" />
+          <span>hide</span>
+        </button>
+
+        <!-- Report (not for own posts) -->
+        <button
+          v-if="!isOwnPost"
+          type="button"
+          class="flex items-center gap-1 hover:text-foreground transition-colors opacity-0 group-hover:opacity-100"
+          @click="emit('report', submission)"
+        >
+          <Flag class="h-3.5 w-3.5" />
+          <span>report</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/nostr-feed/components/SubmissionThumbnail.vue b/src/modules/nostr-feed/components/SubmissionThumbnail.vue
new file mode 100644
index 0000000..5735327
--- /dev/null
+++ b/src/modules/nostr-feed/components/SubmissionThumbnail.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+/**
+ * SubmissionThumbnail - Small square thumbnail for submissions
+ * Shows preview image, video indicator, or placeholder icon
+ */
+
+import { computed } from 'vue'
+import { FileText, Image, ExternalLink } from 'lucide-vue-next'
+import type { SubmissionType } from '../types/submission'
+
+interface Props {
+  /** Thumbnail URL */
+  src?: string
+  /** Submission type for fallback icon */
+  postType: SubmissionType
+  /** Alt text */
+  alt?: string
+  /** Whether this is NSFW content */
+  nsfw?: boolean
+  /** Size in pixels */
+  size?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 70,
+  nsfw: false
+})
+
+// Determine fallback icon based on post type
+const FallbackIcon = computed(() => {
+  switch (props.postType) {
+    case 'link':
+      return ExternalLink
+    case 'media':
+      return Image
+    case 'self':
+    default:
+      return FileText
+  }
+})
+
+// Background color for fallback
+const fallbackBgClass = computed(() => {
+  switch (props.postType) {
+    case 'link':
+      return 'bg-blue-500/10'
+    case 'media':
+      return 'bg-purple-500/10'
+    case 'self':
+    default:
+      return 'bg-muted'
+  }
+})
+
+// Icon color for fallback
+const fallbackIconClass = computed(() => {
+  switch (props.postType) {
+    case 'link':
+      return 'text-blue-500'
+    case 'media':
+      return 'text-purple-500'
+    case 'self':
+    default:
+      return 'text-muted-foreground'
+  }
+})
+</script>
+
+<template>
+  <div
+    class="flex-shrink-0 rounded overflow-hidden"
+    :style="{ width: `${size}px`, height: `${size}px` }"
+  >
+    <!-- NSFW blur overlay -->
+    <template v-if="nsfw && src">
+      <div class="relative w-full h-full">
+        <img
+          :src="src"
+          :alt="alt || 'Thumbnail'"
+          class="w-full h-full object-cover blur-lg"
+        />
+        <div class="absolute inset-0 flex items-center justify-center bg-black/50">
+          <span class="text-[10px] font-bold text-red-500 uppercase">NSFW</span>
+        </div>
+      </div>
+    </template>
+
+    <!-- Image thumbnail -->
+    <template v-else-if="src">
+      <img
+        :src="src"
+        :alt="alt || 'Thumbnail'"
+        class="w-full h-full object-cover bg-muted"
+        loading="lazy"
+        @error="($event.target as HTMLImageElement).style.display = 'none'"
+      />
+    </template>
+
+    <!-- Fallback icon -->
+    <template v-else>
+      <div
+        :class="[
+          'w-full h-full flex items-center justify-center',
+          fallbackBgClass
+        ]"
+      >
+        <component
+          :is="FallbackIcon"
+          :class="['h-6 w-6', fallbackIconClass]"
+        />
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/src/modules/nostr-feed/components/SubmitComposer.vue b/src/modules/nostr-feed/components/SubmitComposer.vue
new file mode 100644
index 0000000..fcfd6bf
--- /dev/null
+++ b/src/modules/nostr-feed/components/SubmitComposer.vue
@@ -0,0 +1,406 @@
+<script setup lang="ts">
+/**
+ * SubmitComposer - Create new submissions (link, media, self posts)
+ * Similar to Lemmy's Create Post form
+ */
+
+import { ref, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+  Link2,
+  FileText,
+  Image as ImageIcon,
+  Loader2,
+  ExternalLink,
+  X,
+  AlertCircle
+} from 'lucide-vue-next'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
+import type { SubmissionService } from '../services/SubmissionService'
+import type { LinkPreviewService } from '../services/LinkPreviewService'
+import type {
+  LinkPreview,
+  SubmissionType,
+  LinkSubmissionForm,
+  SelfSubmissionForm,
+  SubmissionForm
+} from '../types/submission'
+
+interface Props {
+  /** Pre-selected community */
+  community?: string
+  /** Initial post type */
+  initialType?: SubmissionType
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  initialType: 'self'
+})
+
+const emit = defineEmits<{
+  (e: 'submitted', submissionId: string): void
+  (e: 'cancel'): void
+}>()
+
+const router = useRouter()
+
+// Services
+const submissionService = tryInjectService<SubmissionService>(SERVICE_TOKENS.SUBMISSION_SERVICE)
+const linkPreviewService = tryInjectService<LinkPreviewService>(SERVICE_TOKENS.LINK_PREVIEW_SERVICE)
+const authService = tryInjectService<any>(SERVICE_TOKENS.AUTH_SERVICE)
+
+// Auth state
+const isAuthenticated = computed(() => authService?.isAuthenticated?.value || false)
+
+// Form state
+const postType = ref<SubmissionType>(props.initialType)
+const title = ref('')
+const url = ref('')
+const body = ref('')
+const thumbnailUrl = ref('')
+const nsfw = ref(false)
+
+// Link preview state
+const linkPreview = ref<LinkPreview | null>(null)
+const isLoadingPreview = ref(false)
+const previewError = ref<string | null>(null)
+
+// Submission state
+const isSubmitting = ref(false)
+const submitError = ref<string | null>(null)
+
+// Validation
+const isValid = computed(() => {
+  if (!title.value.trim()) return false
+  if (postType.value === 'link' && !url.value.trim()) return false
+  if (postType.value === 'self' && !body.value.trim()) return false
+  return true
+})
+
+// Debounced URL preview fetching
+let previewTimeout: ReturnType<typeof setTimeout> | null = null
+
+watch(url, (newUrl) => {
+  if (previewTimeout) {
+    clearTimeout(previewTimeout)
+  }
+
+  linkPreview.value = null
+  previewError.value = null
+
+  if (!newUrl.trim() || postType.value !== 'link') {
+    return
+  }
+
+  // Validate URL format
+  try {
+    new URL(newUrl)
+  } catch {
+    return
+  }
+
+  // Debounce the preview fetch
+  previewTimeout = setTimeout(async () => {
+    await fetchLinkPreview(newUrl)
+  }, 500)
+})
+
+async function fetchLinkPreview(urlToFetch: string) {
+  if (!linkPreviewService) {
+    previewError.value = 'Link preview service not available'
+    return
+  }
+
+  isLoadingPreview.value = true
+  previewError.value = null
+
+  try {
+    const preview = await linkPreviewService.fetchPreview(urlToFetch)
+    linkPreview.value = preview
+  } catch (err: any) {
+    console.error('Failed to fetch link preview:', err)
+    previewError.value = err.message || 'Failed to load preview'
+  } finally {
+    isLoadingPreview.value = false
+  }
+}
+
+function clearPreview() {
+  linkPreview.value = null
+  previewError.value = null
+}
+
+async function handleSubmit() {
+  if (!isValid.value || !isAuthenticated.value || !submissionService) return
+
+  isSubmitting.value = true
+  submitError.value = null
+
+  try {
+    let form: SubmissionForm
+
+    if (postType.value === 'link') {
+      const linkForm: LinkSubmissionForm = {
+        postType: 'link',
+        title: title.value.trim(),
+        url: url.value.trim(),
+        body: body.value.trim() || undefined,
+        communityRef: props.community,
+        nsfw: nsfw.value
+      }
+      form = linkForm
+    } else if (postType.value === 'self') {
+      const selfForm: SelfSubmissionForm = {
+        postType: 'self',
+        title: title.value.trim(),
+        body: body.value.trim(),
+        communityRef: props.community,
+        nsfw: nsfw.value
+      }
+      form = selfForm
+    } else if (postType.value === 'media') {
+      // TODO: Implement media submission with file upload
+      submitError.value = 'Media uploads not yet implemented'
+      return
+    } else {
+      submitError.value = 'Unknown post type'
+      return
+    }
+
+    const submissionId = await submissionService.createSubmission(form)
+
+    if (submissionId) {
+      emit('submitted', submissionId)
+      // Navigate to the new submission
+      router.push({ name: 'submission-detail', params: { id: submissionId } })
+    } else {
+      submitError.value = 'Failed to create submission'
+    }
+  } catch (err: any) {
+    console.error('Failed to submit:', err)
+    submitError.value = err.message || 'Failed to create submission'
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+function handleCancel() {
+  emit('cancel')
+  router.back()
+}
+
+function selectPostType(type: SubmissionType) {
+  postType.value = type
+  // Clear URL when switching away from link type
+  if (type !== 'link') {
+    url.value = ''
+    clearPreview()
+  }
+}
+</script>
+
+<template>
+  <div class="max-w-2xl mx-auto p-4">
+    <h1 class="text-xl font-semibold mb-6">Create Post</h1>
+
+    <!-- Auth warning -->
+    <div v-if="!isAuthenticated" class="mb-4 p-4 bg-destructive/10 border border-destructive/20 rounded-lg">
+      <div class="flex items-center gap-2 text-destructive">
+        <AlertCircle class="h-4 w-4" />
+        <span class="text-sm font-medium">You must be logged in to create a post</span>
+      </div>
+    </div>
+
+    <!-- Post type selector -->
+    <div class="flex gap-2 mb-6">
+      <Button
+        :variant="postType === 'self' ? 'default' : 'outline'"
+        size="sm"
+        @click="selectPostType('self')"
+      >
+        <FileText class="h-4 w-4 mr-2" />
+        Text
+      </Button>
+      <Button
+        :variant="postType === 'link' ? 'default' : 'outline'"
+        size="sm"
+        @click="selectPostType('link')"
+      >
+        <Link2 class="h-4 w-4 mr-2" />
+        Link
+      </Button>
+      <Button
+        :variant="postType === 'media' ? 'default' : 'outline'"
+        size="sm"
+        @click="selectPostType('media')"
+        disabled
+        title="Coming soon"
+      >
+        <ImageIcon class="h-4 w-4 mr-2" />
+        Image
+      </Button>
+    </div>
+
+    <form @submit.prevent="handleSubmit" class="space-y-4">
+      <!-- Title -->
+      <div>
+        <label class="block text-sm font-medium mb-1.5">
+          Title <span class="text-destructive">*</span>
+        </label>
+        <input
+          v-model="title"
+          type="text"
+          placeholder="An interesting title"
+          maxlength="300"
+          class="w-full px-3 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary"
+          :disabled="!isAuthenticated"
+        />
+        <div class="text-xs text-muted-foreground mt-1 text-right">
+          {{ title.length }}/300
+        </div>
+      </div>
+
+      <!-- URL (for link posts) -->
+      <div v-if="postType === 'link'">
+        <label class="block text-sm font-medium mb-1.5">
+          URL <span class="text-destructive">*</span>
+        </label>
+        <input
+          v-model="url"
+          type="url"
+          placeholder="https://example.com/article"
+          class="w-full px-3 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary"
+          :disabled="!isAuthenticated"
+        />
+
+        <!-- Link preview -->
+        <div v-if="isLoadingPreview" class="mt-3 p-4 border rounded-lg bg-muted/30">
+          <div class="flex items-center gap-2 text-sm text-muted-foreground">
+            <Loader2 class="h-4 w-4 animate-spin" />
+            Loading preview...
+          </div>
+        </div>
+
+        <div v-else-if="previewError" class="mt-3 p-3 border border-destructive/20 rounded-lg bg-destructive/5">
+          <div class="flex items-center gap-2 text-sm text-destructive">
+            <AlertCircle class="h-4 w-4" />
+            {{ previewError }}
+          </div>
+        </div>
+
+        <div v-else-if="linkPreview" class="mt-3 p-4 border rounded-lg bg-muted/30">
+          <div class="flex items-start gap-3">
+            <!-- Preview image -->
+            <div v-if="linkPreview.image" class="flex-shrink-0 w-24 h-18 rounded overflow-hidden bg-muted">
+              <img
+                :src="linkPreview.image"
+                :alt="linkPreview.title || ''"
+                class="w-full h-full object-cover"
+              />
+            </div>
+
+            <!-- Preview content -->
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-2 text-xs text-muted-foreground mb-1">
+                <ExternalLink class="h-3 w-3" />
+                <span>{{ linkPreview.domain }}</span>
+                <button
+                  type="button"
+                  class="ml-auto p-1 hover:bg-accent rounded"
+                  @click="clearPreview"
+                >
+                  <X class="h-3 w-3" />
+                </button>
+              </div>
+              <h4 v-if="linkPreview.title" class="font-medium text-sm line-clamp-2">
+                {{ linkPreview.title }}
+              </h4>
+              <p v-if="linkPreview.description" class="text-xs text-muted-foreground mt-1 line-clamp-2">
+                {{ linkPreview.description }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Thumbnail URL (optional) -->
+      <div v-if="postType === 'link'">
+        <label class="block text-sm font-medium mb-1.5">
+          Thumbnail URL
+          <span class="text-muted-foreground font-normal">(optional)</span>
+        </label>
+        <input
+          v-model="thumbnailUrl"
+          type="url"
+          placeholder="https://example.com/image.jpg"
+          class="w-full px-3 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary"
+          :disabled="!isAuthenticated"
+        />
+      </div>
+
+      <!-- Body -->
+      <div>
+        <label class="block text-sm font-medium mb-1.5">
+          Body
+          <span v-if="postType === 'self'" class="text-destructive">*</span>
+          <span v-else class="text-muted-foreground font-normal">(optional)</span>
+        </label>
+        <textarea
+          v-model="body"
+          :placeholder="postType === 'self' ? 'Write your post content...' : 'Optional description or commentary...'"
+          rows="6"
+          class="w-full px-3 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary resize-y min-h-[120px]"
+          :disabled="!isAuthenticated"
+        />
+        <div class="text-xs text-muted-foreground mt-1">
+          Markdown supported
+        </div>
+      </div>
+
+      <!-- NSFW toggle -->
+      <div class="flex items-center gap-2">
+        <input
+          id="nsfw"
+          v-model="nsfw"
+          type="checkbox"
+          class="rounded border-muted-foreground"
+          :disabled="!isAuthenticated"
+        />
+        <label for="nsfw" class="text-sm font-medium cursor-pointer">
+          NSFW
+        </label>
+        <Badge v-if="nsfw" variant="destructive" class="text-xs">
+          Not Safe For Work
+        </Badge>
+      </div>
+
+      <!-- Error message -->
+      <div v-if="submitError" class="p-3 border border-destructive/20 rounded-lg bg-destructive/5">
+        <div class="flex items-center gap-2 text-sm text-destructive">
+          <AlertCircle class="h-4 w-4" />
+          {{ submitError }}
+        </div>
+      </div>
+
+      <!-- Actions -->
+      <div class="flex items-center gap-3 pt-4">
+        <Button
+          type="submit"
+          :disabled="!isValid || isSubmitting || !isAuthenticated"
+        >
+          <Loader2 v-if="isSubmitting" class="h-4 w-4 animate-spin mr-2" />
+          Create
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          @click="handleCancel"
+        >
+          Cancel
+        </Button>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/src/modules/nostr-feed/components/VoteControls.vue b/src/modules/nostr-feed/components/VoteControls.vue
new file mode 100644
index 0000000..689cc9c
--- /dev/null
+++ b/src/modules/nostr-feed/components/VoteControls.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+/**
+ * VoteControls - Compact upvote/downvote arrows with score
+ * Lemmy/Reddit style vertical layout
+ */
+
+import { computed } from 'vue'
+import { ChevronUp, ChevronDown } from 'lucide-vue-next'
+
+interface Props {
+  score: number
+  userVote: 'upvote' | 'downvote' | null
+  disabled?: boolean
+}
+
+interface Emits {
+  (e: 'upvote'): void
+  (e: 'downvote'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false
+})
+
+const emit = defineEmits<Emits>()
+
+// Format score for display (e.g., 1.2k for 1200)
+const displayScore = computed(() => {
+  const score = props.score
+  if (Math.abs(score) >= 10000) {
+    return (score / 1000).toFixed(0) + 'k'
+  }
+  if (Math.abs(score) >= 1000) {
+    return (score / 1000).toFixed(1) + 'k'
+  }
+  return score.toString()
+})
+
+// Score color based on value
+const scoreClass = computed(() => {
+  if (props.userVote === 'upvote') return 'text-orange-500'
+  if (props.userVote === 'downvote') return 'text-blue-500'
+  if (props.score > 0) return 'text-foreground'
+  if (props.score < 0) return 'text-muted-foreground'
+  return 'text-muted-foreground'
+})
+
+function onUpvote() {
+  if (!props.disabled) {
+    emit('upvote')
+  }
+}
+
+function onDownvote() {
+  if (!props.disabled) {
+    emit('downvote')
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-0 min-w-[40px]">
+    <!-- Upvote button -->
+    <button
+      type="button"
+      :disabled="disabled"
+      :class="[
+        'p-1 rounded transition-colors',
+        'hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed',
+        userVote === 'upvote' ? 'text-orange-500' : 'text-muted-foreground hover:text-orange-500'
+      ]"
+      @click="onUpvote"
+    >
+      <ChevronUp
+        class="h-5 w-5"
+        :class="{ 'fill-current': userVote === 'upvote' }"
+      />
+    </button>
+
+    <!-- Score -->
+    <span
+      :class="[
+        'text-xs font-bold tabular-nums min-w-[24px] text-center',
+        scoreClass
+      ]"
+    >
+      {{ displayScore }}
+    </span>
+
+    <!-- Downvote button -->
+    <button
+      type="button"
+      :disabled="disabled"
+      :class="[
+        'p-1 rounded transition-colors',
+        'hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed',
+        userVote === 'downvote' ? 'text-blue-500' : 'text-muted-foreground hover:text-blue-500'
+      ]"
+      @click="onDownvote"
+    >
+      <ChevronDown
+        class="h-5 w-5"
+        :class="{ 'fill-current': userVote === 'downvote' }"
+      />
+    </button>
+  </div>
+</template>
diff --git a/src/modules/nostr-feed/composables/useSubmissions.ts b/src/modules/nostr-feed/composables/useSubmissions.ts
new file mode 100644
index 0000000..82dd155
--- /dev/null
+++ b/src/modules/nostr-feed/composables/useSubmissions.ts
@@ -0,0 +1,335 @@
+/**
+ * useSubmissions Composable
+ *
+ * Provides reactive access to the SubmissionService for Reddit-style submissions.
+ */
+
+import { computed, ref, onMounted, onUnmounted, watch, type Ref, type ComputedRef } from 'vue'
+import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
+import type { SubmissionService } from '../services/SubmissionService'
+import type { LinkPreviewService } from '../services/LinkPreviewService'
+import type {
+  SubmissionWithMeta,
+  SubmissionForm,
+  SubmissionFeedConfig,
+  SubmissionComment,
+  SortType,
+  TimeRange,
+  LinkPreview
+} from '../types/submission'
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface UseSubmissionsOptions {
+  /** Auto-subscribe on mount */
+  autoSubscribe?: boolean
+  /** Feed configuration */
+  config?: Partial<SubmissionFeedConfig>
+}
+
+export interface UseSubmissionsReturn {
+  // State
+  submissions: ComputedRef<SubmissionWithMeta[]>
+  isLoading: ComputedRef<boolean>
+  error: ComputedRef<string | null>
+
+  // Sorting
+  currentSort: Ref<SortType>
+  currentTimeRange: Ref<TimeRange>
+
+  // Actions
+  subscribe: (config?: Partial<SubmissionFeedConfig>) => Promise<void>
+  unsubscribe: () => Promise<void>
+  refresh: () => Promise<void>
+  createSubmission: (form: SubmissionForm) => Promise<string>
+  upvote: (submissionId: string) => Promise<void>
+  downvote: (submissionId: string) => Promise<void>
+  setSort: (sort: SortType, timeRange?: TimeRange) => void
+
+  // Getters
+  getSubmission: (id: string) => SubmissionWithMeta | undefined
+  getComments: (submissionId: string) => SubmissionComment[]
+  getThreadedComments: (submissionId: string) => SubmissionComment[]
+
+  // Link preview
+  fetchLinkPreview: (url: string) => Promise<LinkPreview>
+  isPreviewLoading: (url: string) => boolean
+}
+
+// ============================================================================
+// Composable
+// ============================================================================
+
+export function useSubmissions(options: UseSubmissionsOptions = {}): UseSubmissionsReturn {
+  const {
+    autoSubscribe = true,
+    config: initialConfig = {}
+  } = options
+
+  // Inject services
+  const submissionService = tryInjectService<SubmissionService>(SERVICE_TOKENS.SUBMISSION_SERVICE)
+  const linkPreviewService = tryInjectService<LinkPreviewService>(SERVICE_TOKENS.LINK_PREVIEW_SERVICE)
+
+  // Local state
+  const currentSort = ref<SortType>('hot')
+  const currentTimeRange = ref<TimeRange>('day')
+
+  // Default feed config
+  const defaultConfig: SubmissionFeedConfig = {
+    sort: 'hot',
+    timeRange: 'day',
+    includeNsfw: false,
+    limit: 50,
+    ...initialConfig
+  }
+
+  // Computed values from service
+  const submissions = computed(() => {
+    if (!submissionService) return []
+    return submissionService.getSortedSubmissions(currentSort.value)
+  })
+
+  const isLoading = computed(() => submissionService?.isLoading.value ?? false)
+  const error = computed(() => submissionService?.error.value ?? null)
+
+  // ============================================================================
+  // Actions
+  // ============================================================================
+
+  /**
+   * Subscribe to submissions feed
+   */
+  async function subscribe(config?: Partial<SubmissionFeedConfig>): Promise<void> {
+    if (!submissionService) {
+      console.warn('SubmissionService not available')
+      return
+    }
+
+    const feedConfig: SubmissionFeedConfig = {
+      ...defaultConfig,
+      ...config,
+      sort: currentSort.value,
+      timeRange: currentTimeRange.value
+    }
+
+    await submissionService.subscribe(feedConfig)
+  }
+
+  /**
+   * Unsubscribe from feed
+   */
+  async function unsubscribe(): Promise<void> {
+    await submissionService?.unsubscribe()
+  }
+
+  /**
+   * Refresh the feed
+   */
+  async function refresh(): Promise<void> {
+    submissionService?.clear()
+    await subscribe()
+  }
+
+  /**
+   * Create a new submission
+   */
+  async function createSubmission(form: SubmissionForm): Promise<string> {
+    if (!submissionService) {
+      throw new Error('SubmissionService not available')
+    }
+    return submissionService.createSubmission(form)
+  }
+
+  /**
+   * Upvote a submission
+   */
+  async function upvote(submissionId: string): Promise<void> {
+    if (!submissionService) {
+      throw new Error('SubmissionService not available')
+    }
+    await submissionService.upvote(submissionId)
+  }
+
+  /**
+   * Downvote a submission
+   */
+  async function downvote(submissionId: string): Promise<void> {
+    if (!submissionService) {
+      throw new Error('SubmissionService not available')
+    }
+    await submissionService.downvote(submissionId)
+  }
+
+  /**
+   * Change sort order
+   */
+  function setSort(sort: SortType, timeRange?: TimeRange): void {
+    currentSort.value = sort
+    if (timeRange) {
+      currentTimeRange.value = timeRange
+    }
+  }
+
+  // ============================================================================
+  // Getters
+  // ============================================================================
+
+  /**
+   * Get a single submission by ID
+   */
+  function getSubmission(id: string): SubmissionWithMeta | undefined {
+    return submissionService?.getSubmission(id)
+  }
+
+  /**
+   * Get comments for a submission
+   */
+  function getComments(submissionId: string): SubmissionComment[] {
+    return submissionService?.getComments(submissionId) ?? []
+  }
+
+  /**
+   * Get threaded comments for a submission
+   */
+  function getThreadedComments(submissionId: string): SubmissionComment[] {
+    return submissionService?.getThreadedComments(submissionId) ?? []
+  }
+
+  // ============================================================================
+  // Link Preview
+  // ============================================================================
+
+  /**
+   * Fetch link preview for a URL
+   */
+  async function fetchLinkPreview(url: string): Promise<LinkPreview> {
+    if (!linkPreviewService) {
+      return {
+        url,
+        domain: new URL(url).hostname.replace(/^www\./, '')
+      }
+    }
+    return linkPreviewService.fetchPreview(url)
+  }
+
+  /**
+   * Check if preview is loading
+   */
+  function isPreviewLoading(url: string): boolean {
+    return linkPreviewService?.isLoading(url) ?? false
+  }
+
+  // ============================================================================
+  // Lifecycle
+  // ============================================================================
+
+  // Watch for sort changes and re-sort
+  watch([currentSort, currentTimeRange], async () => {
+    // Re-subscribe with new sort if needed for time-based filtering
+    if (currentSort.value === 'top') {
+      await subscribe()
+    }
+  })
+
+  // Auto-subscribe on mount
+  onMounted(() => {
+    if (autoSubscribe) {
+      subscribe()
+    }
+  })
+
+  // Cleanup on unmount
+  onUnmounted(() => {
+    unsubscribe()
+  })
+
+  // ============================================================================
+  // Return
+  // ============================================================================
+
+  return {
+    // State
+    submissions,
+    isLoading,
+    error,
+
+    // Sorting
+    currentSort,
+    currentTimeRange,
+
+    // Actions
+    subscribe,
+    unsubscribe,
+    refresh,
+    createSubmission,
+    upvote,
+    downvote,
+    setSort,
+
+    // Getters
+    getSubmission,
+    getComments,
+    getThreadedComments,
+
+    // Link preview
+    fetchLinkPreview,
+    isPreviewLoading
+  }
+}
+
+// ============================================================================
+// Single Submission Hook
+// ============================================================================
+
+/**
+ * Hook for working with a single submission
+ */
+export function useSubmission(submissionId: string) {
+  const submissionService = tryInjectService<SubmissionService>(SERVICE_TOKENS.SUBMISSION_SERVICE)
+
+  const isLoading = ref(false)
+  const error = ref<string | null>(null)
+
+  const submission = computed(() => submissionService?.getSubmission(submissionId))
+  const comments = computed(() => submissionService?.getThreadedComments(submissionId) ?? [])
+
+  async function subscribe(): Promise<void> {
+    if (!submissionService) return
+
+    isLoading.value = true
+    error.value = null
+
+    try {
+      await submissionService.subscribeToSubmission(submissionId)
+    } catch (err: any) {
+      error.value = err.message || 'Failed to load submission'
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function upvote(): Promise<void> {
+    await submissionService?.upvote(submissionId)
+  }
+
+  async function downvote(): Promise<void> {
+    await submissionService?.downvote(submissionId)
+  }
+
+  // Subscribe on mount
+  onMounted(() => {
+    subscribe()
+  })
+
+  return {
+    submission,
+    comments,
+    isLoading: computed(() => isLoading.value || submissionService?.isLoading.value || false),
+    error: computed(() => error.value || submissionService?.error.value || null),
+    subscribe,
+    upvote,
+    downvote
+  }
+}
diff --git a/src/modules/nostr-feed/index.ts b/src/modules/nostr-feed/index.ts
index 9967476..af179fd 100644
--- a/src/modules/nostr-feed/index.ts
+++ b/src/modules/nostr-feed/index.ts
@@ -2,10 +2,20 @@ import type { App } from 'vue'
 import type { ModulePlugin } from '@/core/types'
 import { container, SERVICE_TOKENS } from '@/core/di-container'
 import NostrFeed from './components/NostrFeed.vue'
+import SubmissionList from './components/SubmissionList.vue'
+import SubmissionRow from './components/SubmissionRow.vue'
+import SubmissionDetail from './components/SubmissionDetail.vue'
+import SubmissionComment from './components/SubmissionComment.vue'
+import SubmitComposer from './components/SubmitComposer.vue'
+import VoteControls from './components/VoteControls.vue'
+import SortTabs from './components/SortTabs.vue'
 import { useFeed } from './composables/useFeed'
+import { useSubmissions, useSubmission } from './composables/useSubmissions'
 import { FeedService } from './services/FeedService'
 import { ProfileService } from './services/ProfileService'
 import { ReactionService } from './services/ReactionService'
+import { SubmissionService } from './services/SubmissionService'
+import { LinkPreviewService } from './services/LinkPreviewService'
 
 /**
  * Nostr Feed Module Plugin
@@ -16,6 +26,27 @@ export const nostrFeedModule: ModulePlugin = {
   version: '1.0.0',
   dependencies: ['base'],
 
+  routes: [
+    {
+      path: '/submission/:id',
+      name: 'submission-detail',
+      component: () => import('./views/SubmissionDetailPage.vue'),
+      meta: {
+        title: 'Submission',
+        requiresAuth: false
+      }
+    },
+    {
+      path: '/submit',
+      name: 'submit-post',
+      component: () => import('./views/SubmitPage.vue'),
+      meta: {
+        title: 'Create Post',
+        requiresAuth: true
+      }
+    }
+  ],
+
   async install(app: App) {
     console.log('nostr-feed module: Starting installation...')
 
@@ -23,10 +54,14 @@ export const nostrFeedModule: ModulePlugin = {
     const feedService = new FeedService()
     const profileService = new ProfileService()
     const reactionService = new ReactionService()
+    const submissionService = new SubmissionService()
+    const linkPreviewService = new LinkPreviewService()
 
     container.provide(SERVICE_TOKENS.FEED_SERVICE, feedService)
     container.provide(SERVICE_TOKENS.PROFILE_SERVICE, profileService)
     container.provide(SERVICE_TOKENS.REACTION_SERVICE, reactionService)
+    container.provide(SERVICE_TOKENS.SUBMISSION_SERVICE, submissionService)
+    container.provide(SERVICE_TOKENS.LINK_PREVIEW_SERVICE, linkPreviewService)
     console.log('nostr-feed module: Services registered in DI container')
 
     // Initialize services
@@ -43,21 +78,39 @@ export const nostrFeedModule: ModulePlugin = {
       reactionService.initialize({
         waitForDependencies: true,
         maxRetries: 3
+      }),
+      submissionService.initialize({
+        waitForDependencies: true,
+        maxRetries: 3
+      }),
+      linkPreviewService.initialize({
+        waitForDependencies: true,
+        maxRetries: 3
       })
     ])
     console.log('nostr-feed module: Services initialized')
 
     // Register components globally
     app.component('NostrFeed', NostrFeed)
+    app.component('SubmissionList', SubmissionList)
     console.log('nostr-feed module: Installation complete')
   },
 
   components: {
-    NostrFeed
+    NostrFeed,
+    SubmissionList,
+    SubmissionRow,
+    SubmissionDetail,
+    SubmissionComment,
+    SubmitComposer,
+    VoteControls,
+    SortTabs
   },
 
   composables: {
-    useFeed
+    useFeed,
+    useSubmissions,
+    useSubmission
   }
 }
 
diff --git a/src/modules/nostr-feed/services/LinkPreviewService.ts b/src/modules/nostr-feed/services/LinkPreviewService.ts
new file mode 100644
index 0000000..e018aa8
--- /dev/null
+++ b/src/modules/nostr-feed/services/LinkPreviewService.ts
@@ -0,0 +1,552 @@
+/**
+ * LinkPreviewService
+ *
+ * Fetches Open Graph and meta tags from URLs to generate link previews.
+ * Used when creating link submissions to embed preview data.
+ */
+
+import { reactive } from 'vue'
+import { BaseService } from '@/core/base/BaseService'
+import type { LinkPreview } from '../types/submission'
+import { extractDomain } from '../types/submission'
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface CacheEntry {
+  preview: LinkPreview
+  timestamp: number
+}
+
+// ============================================================================
+// Service Definition
+// ============================================================================
+
+export class LinkPreviewService extends BaseService {
+  protected readonly metadata = {
+    name: 'LinkPreviewService',
+    version: '1.0.0',
+    dependencies: []
+  }
+
+  // Cache for previews (URL -> preview)
+  private cache = reactive(new Map<string, CacheEntry>())
+
+  // Cache TTL (15 minutes)
+  private readonly CACHE_TTL = 15 * 60 * 1000
+
+  // Loading state per URL
+  private _loading = reactive(new Map<string, boolean>())
+
+  // Error state per URL
+  private _errors = reactive(new Map<string, string>())
+
+  // CORS proxy URL (configurable)
+  private proxyUrl = ''
+
+  // ============================================================================
+  // Lifecycle
+  // ============================================================================
+
+  protected async onInitialize(): Promise<void> {
+    console.log('LinkPreviewService: Initializing...')
+
+    // Try to get proxy URL from environment
+    this.proxyUrl = import.meta.env.VITE_CORS_PROXY_URL || ''
+
+    // Clean expired cache entries periodically
+    setInterval(() => this.cleanCache(), this.CACHE_TTL)
+
+    console.log('LinkPreviewService: Initialization complete')
+  }
+
+  protected async onDispose(): Promise<void> {
+    this.cache.clear()
+    this._loading.clear()
+    this._errors.clear()
+  }
+
+  // ============================================================================
+  // Public API
+  // ============================================================================
+
+  /**
+   * Fetch link preview for a URL
+   */
+  async fetchPreview(url: string): Promise<LinkPreview> {
+    // Normalize URL
+    const normalizedUrl = this.normalizeUrl(url)
+
+    // Check cache
+    const cached = this.getCachedPreview(normalizedUrl)
+    if (cached) {
+      return cached
+    }
+
+    // Check if already loading
+    if (this._loading.get(normalizedUrl)) {
+      // Wait for existing request
+      return this.waitForPreview(normalizedUrl)
+    }
+
+    // Mark as loading
+    this._loading.set(normalizedUrl, true)
+    this._errors.delete(normalizedUrl)
+
+    try {
+      const preview = await this.doFetch(normalizedUrl)
+
+      // Cache the result
+      this.cache.set(normalizedUrl, {
+        preview,
+        timestamp: Date.now()
+      })
+
+      return preview
+
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to fetch preview'
+      this._errors.set(normalizedUrl, message)
+
+      // Return minimal preview on error
+      return {
+        url: normalizedUrl,
+        domain: extractDomain(normalizedUrl)
+      }
+
+    } finally {
+      this._loading.set(normalizedUrl, false)
+    }
+  }
+
+  /**
+   * Get cached preview if available and not expired
+   */
+  getCachedPreview(url: string): LinkPreview | null {
+    const cached = this.cache.get(url)
+    if (!cached) return null
+
+    // Check if expired
+    if (Date.now() - cached.timestamp > this.CACHE_TTL) {
+      this.cache.delete(url)
+      return null
+    }
+
+    return cached.preview
+  }
+
+  /**
+   * Check if URL is currently loading
+   */
+  isLoading(url: string): boolean {
+    return this._loading.get(url) || false
+  }
+
+  /**
+   * Get error for URL
+   */
+  getError(url: string): string | null {
+    return this._errors.get(url) || null
+  }
+
+  /**
+   * Clear cache for a specific URL or all
+   */
+  clearCache(url?: string): void {
+    if (url) {
+      this.cache.delete(url)
+    } else {
+      this.cache.clear()
+    }
+  }
+
+  // ============================================================================
+  // Fetching
+  // ============================================================================
+
+  /**
+   * Perform the actual fetch
+   */
+  private async doFetch(url: string): Promise<LinkPreview> {
+    // Try different methods in order of preference
+
+    // 1. Try direct fetch (works for same-origin or CORS-enabled sites)
+    try {
+      return await this.fetchDirect(url)
+    } catch (directError) {
+      this.debug('Direct fetch failed:', directError)
+    }
+
+    // 2. Try CORS proxy if configured
+    if (this.proxyUrl) {
+      try {
+        return await this.fetchViaProxy(url)
+      } catch (proxyError) {
+        this.debug('Proxy fetch failed:', proxyError)
+      }
+    }
+
+    // 3. Try oEmbed for supported sites
+    try {
+      return await this.fetchOembed(url)
+    } catch (oembedError) {
+      this.debug('oEmbed fetch failed:', oembedError)
+    }
+
+    // 4. Return basic preview with just the domain
+    return {
+      url,
+      domain: extractDomain(url)
+    }
+  }
+
+  /**
+   * Direct fetch (may fail due to CORS)
+   */
+  private async fetchDirect(url: string): Promise<LinkPreview> {
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Accept': 'text/html'
+      }
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`)
+    }
+
+    const html = await response.text()
+    return this.parseHtml(url, html)
+  }
+
+  /**
+   * Fetch via CORS proxy
+   */
+  private async fetchViaProxy(url: string): Promise<LinkPreview> {
+    const proxyUrl = `${this.proxyUrl}${encodeURIComponent(url)}`
+
+    const response = await fetch(proxyUrl, {
+      method: 'GET',
+      headers: {
+        'Accept': 'text/html'
+      }
+    })
+
+    if (!response.ok) {
+      throw new Error(`Proxy HTTP ${response.status}`)
+    }
+
+    const html = await response.text()
+    return this.parseHtml(url, html)
+  }
+
+  /**
+   * Try oEmbed for supported providers
+   */
+  private async fetchOembed(url: string): Promise<LinkPreview> {
+    // oEmbed providers and their endpoints
+    const providers = [
+      {
+        pattern: /youtube\.com\/watch|youtu\.be/,
+        endpoint: 'https://www.youtube.com/oembed'
+      },
+      {
+        pattern: /twitter\.com|x\.com/,
+        endpoint: 'https://publish.twitter.com/oembed'
+      },
+      {
+        pattern: /vimeo\.com/,
+        endpoint: 'https://vimeo.com/api/oembed.json'
+      }
+    ]
+
+    const provider = providers.find(p => p.pattern.test(url))
+    if (!provider) {
+      throw new Error('No oEmbed provider for URL')
+    }
+
+    const oembedUrl = `${provider.endpoint}?url=${encodeURIComponent(url)}&format=json`
+    const response = await fetch(oembedUrl)
+
+    if (!response.ok) {
+      throw new Error(`oEmbed HTTP ${response.status}`)
+    }
+
+    const data = await response.json()
+
+    return {
+      url,
+      domain: extractDomain(url),
+      title: data.title,
+      description: data.description || data.author_name,
+      image: data.thumbnail_url,
+      siteName: data.provider_name,
+      type: data.type,
+      videoUrl: data.html?.includes('iframe') ? url : undefined
+    }
+  }
+
+  // ============================================================================
+  // HTML Parsing
+  // ============================================================================
+
+  /**
+   * Parse HTML to extract Open Graph and meta tags
+   */
+  private parseHtml(url: string, html: string): LinkPreview {
+    const preview: LinkPreview = {
+      url,
+      domain: extractDomain(url)
+    }
+
+    // Create a DOM parser
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(html, 'text/html')
+
+    // Extract Open Graph tags
+    const ogTags = this.extractOgTags(doc)
+
+    // Extract Twitter Card tags (fallback)
+    const twitterTags = this.extractTwitterTags(doc)
+
+    // Extract standard meta tags (fallback)
+    const metaTags = this.extractMetaTags(doc)
+
+    // Merge with priority: OG > Twitter > Meta > Title
+    preview.title = ogTags.title || twitterTags.title || metaTags.title || this.extractTitle(doc)
+    preview.description = ogTags.description || twitterTags.description || metaTags.description
+    preview.image = ogTags.image || twitterTags.image
+    preview.siteName = ogTags.siteName || twitterTags.site
+    preview.type = ogTags.type
+    preview.videoUrl = ogTags.video
+    preview.favicon = this.extractFavicon(doc, url)
+
+    return preview
+  }
+
+  /**
+   * Extract Open Graph tags
+   */
+  private extractOgTags(doc: Document): Record<string, string | undefined> {
+    const tags: Record<string, string | undefined> = {}
+
+    const ogMetas = doc.querySelectorAll('meta[property^="og:"]')
+    ogMetas.forEach(meta => {
+      const property = meta.getAttribute('property')?.replace('og:', '')
+      const content = meta.getAttribute('content')
+      if (property && content) {
+        switch (property) {
+          case 'title':
+            tags.title = content
+            break
+          case 'description':
+            tags.description = content
+            break
+          case 'image':
+            tags.image = content
+            break
+          case 'site_name':
+            tags.siteName = content
+            break
+          case 'type':
+            tags.type = content
+            break
+          case 'video':
+          case 'video:url':
+            tags.video = content
+            break
+        }
+      }
+    })
+
+    return tags
+  }
+
+  /**
+   * Extract Twitter Card tags
+   */
+  private extractTwitterTags(doc: Document): Record<string, string | undefined> {
+    const tags: Record<string, string | undefined> = {}
+
+    const twitterMetas = doc.querySelectorAll('meta[name^="twitter:"]')
+    twitterMetas.forEach(meta => {
+      const name = meta.getAttribute('name')?.replace('twitter:', '')
+      const content = meta.getAttribute('content')
+      if (name && content) {
+        switch (name) {
+          case 'title':
+            tags.title = content
+            break
+          case 'description':
+            tags.description = content
+            break
+          case 'image':
+          case 'image:src':
+            tags.image = content
+            break
+          case 'site':
+            tags.site = content
+            break
+        }
+      }
+    })
+
+    return tags
+  }
+
+  /**
+   * Extract standard meta tags
+   */
+  private extractMetaTags(doc: Document): Record<string, string | undefined> {
+    const tags: Record<string, string | undefined> = {}
+
+    // Description
+    const descMeta = doc.querySelector('meta[name="description"]')
+    if (descMeta) {
+      tags.description = descMeta.getAttribute('content') || undefined
+    }
+
+    // Title from meta
+    const titleMeta = doc.querySelector('meta[name="title"]')
+    if (titleMeta) {
+      tags.title = titleMeta.getAttribute('content') || undefined
+    }
+
+    return tags
+  }
+
+  /**
+   * Extract page title
+   */
+  private extractTitle(doc: Document): string | undefined {
+    return doc.querySelector('title')?.textContent || undefined
+  }
+
+  /**
+   * Extract favicon URL
+   */
+  private extractFavicon(doc: Document, pageUrl: string): string | undefined {
+    // Try various link rel types
+    const selectors = [
+      'link[rel="icon"]',
+      'link[rel="shortcut icon"]',
+      'link[rel="apple-touch-icon"]'
+    ]
+
+    for (const selector of selectors) {
+      const link = doc.querySelector(selector)
+      const href = link?.getAttribute('href')
+      if (href) {
+        return this.resolveUrl(href, pageUrl)
+      }
+    }
+
+    // Default favicon location
+    return this.resolveUrl('/favicon.ico', pageUrl)
+  }
+
+  // ============================================================================
+  // Utilities
+  // ============================================================================
+
+  /**
+   * Normalize URL
+   */
+  private normalizeUrl(url: string): string {
+    let normalized = url.trim()
+
+    // Add protocol if missing
+    if (!normalized.startsWith('http://') && !normalized.startsWith('https://')) {
+      normalized = 'https://' + normalized
+    }
+
+    return normalized
+  }
+
+  /**
+   * Resolve relative URL to absolute
+   */
+  private resolveUrl(href: string, base: string): string {
+    try {
+      return new URL(href, base).toString()
+    } catch {
+      return href
+    }
+  }
+
+  /**
+   * Wait for an in-flight preview request
+   */
+  private async waitForPreview(url: string): Promise<LinkPreview> {
+    // Poll until loading is done
+    while (this._loading.get(url)) {
+      await new Promise(resolve => setTimeout(resolve, 100))
+    }
+
+    // Return cached result or error
+    const cached = this.getCachedPreview(url)
+    if (cached) return cached
+
+    return {
+      url,
+      domain: extractDomain(url)
+    }
+  }
+
+  /**
+   * Clean expired cache entries
+   */
+  private cleanCache(): void {
+    const now = Date.now()
+
+    for (const [url, entry] of this.cache) {
+      if (now - entry.timestamp > this.CACHE_TTL) {
+        this.cache.delete(url)
+      }
+    }
+  }
+
+  // ============================================================================
+  // Validation
+  // ============================================================================
+
+  /**
+   * Check if URL is valid
+   */
+  isValidUrl(url: string): boolean {
+    try {
+      const parsed = new URL(this.normalizeUrl(url))
+      return parsed.protocol === 'http:' || parsed.protocol === 'https:'
+    } catch {
+      return false
+    }
+  }
+
+  /**
+   * Check if URL is likely to be media
+   */
+  isMediaUrl(url: string): boolean {
+    const mediaExtensions = [
+      '.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg',
+      '.mp4', '.webm', '.mov', '.avi',
+      '.mp3', '.wav', '.ogg', '.flac'
+    ]
+
+    const lowerUrl = url.toLowerCase()
+    return mediaExtensions.some(ext => lowerUrl.includes(ext))
+  }
+
+  /**
+   * Guess media type from URL
+   */
+  guessMediaType(url: string): 'image' | 'video' | 'audio' | 'other' {
+    const lowerUrl = url.toLowerCase()
+
+    if (/\.(jpg|jpeg|png|gif|webp|svg)/.test(lowerUrl)) return 'image'
+    if (/\.(mp4|webm|mov|avi)/.test(lowerUrl)) return 'video'
+    if (/\.(mp3|wav|ogg|flac)/.test(lowerUrl)) return 'audio'
+
+    return 'other'
+  }
+}
diff --git a/src/modules/nostr-feed/services/ReactionService.ts b/src/modules/nostr-feed/services/ReactionService.ts
index 09a7e2f..24adfb7 100644
--- a/src/modules/nostr-feed/services/ReactionService.ts
+++ b/src/modules/nostr-feed/services/ReactionService.ts
@@ -427,6 +427,124 @@ export class ReactionService extends BaseService {
     }
   }
 
+  /**
+   * Send a dislike reaction to an event
+   */
+  async dislikeEvent(eventId: string, eventPubkey: string, eventKind: number): Promise<void> {
+    if (!this.authService?.isAuthenticated?.value) {
+      throw new Error('Must be authenticated to react')
+    }
+
+    if (!this.relayHub?.isConnected) {
+      throw new Error('Not connected to relays')
+    }
+
+    const userPubkey = this.authService.user.value?.pubkey
+    const userPrivkey = this.authService.user.value?.prvkey
+
+    if (!userPubkey || !userPrivkey) {
+      throw new Error('User keys not available')
+    }
+
+    // Check if user already disliked this event
+    const eventReactions = this.getEventReactions(eventId)
+    if (eventReactions.userHasDisliked) {
+      throw new Error('Already disliked this event')
+    }
+
+    try {
+      this._isLoading.value = true
+
+      // Create reaction event template according to NIP-25
+      const eventTemplate: EventTemplate = {
+        kind: 7, // Reaction
+        content: '-', // Dislike reaction
+        tags: [
+          ['e', eventId, '', eventPubkey], // Event being reacted to
+          ['p', eventPubkey], // Author of the event being reacted to
+          ['k', eventKind.toString()] // Kind of the event being reacted to
+        ],
+        created_at: Math.floor(Date.now() / 1000)
+      }
+
+      // Sign the event
+      const privkeyBytes = this.hexToUint8Array(userPrivkey)
+      const signedEvent = finalizeEvent(eventTemplate, privkeyBytes)
+
+      // Publish the reaction
+      await this.relayHub.publishEvent(signedEvent)
+
+      // Optimistically update local state
+      this.handleReactionEvent(signedEvent)
+
+    } catch (error) {
+      console.error('Failed to dislike event:', error)
+      throw error
+    } finally {
+      this._isLoading.value = false
+    }
+  }
+
+  /**
+   * Remove a dislike from an event using NIP-09 deletion events
+   */
+  async undislikeEvent(eventId: string): Promise<void> {
+    if (!this.authService?.isAuthenticated?.value) {
+      throw new Error('Must be authenticated to remove reaction')
+    }
+
+    if (!this.relayHub?.isConnected) {
+      throw new Error('Not connected to relays')
+    }
+
+    const userPubkey = this.authService.user.value?.pubkey
+    const userPrivkey = this.authService.user.value?.prvkey
+
+    if (!userPubkey || !userPrivkey) {
+      throw new Error('User keys not available')
+    }
+
+    // Get the user's reaction ID to delete
+    const eventReactions = this.getEventReactions(eventId)
+
+    if (!eventReactions.userHasDisliked || !eventReactions.userReactionId) {
+      throw new Error('No dislike reaction to remove')
+    }
+
+    try {
+      this._isLoading.value = true
+
+      // Create deletion event according to NIP-09
+      const eventTemplate: EventTemplate = {
+        kind: 5, // Deletion request
+        content: '', // Empty content or reason
+        tags: [
+          ['e', eventReactions.userReactionId], // The reaction event to delete
+          ['k', '7'] // Kind of event being deleted (reaction)
+        ],
+        created_at: Math.floor(Date.now() / 1000)
+      }
+
+      // Sign the event
+      const privkeyBytes = this.hexToUint8Array(userPrivkey)
+      const signedEvent = finalizeEvent(eventTemplate, privkeyBytes)
+
+      // Publish the deletion
+      const result = await this.relayHub.publishEvent(signedEvent)
+
+      console.log(`ReactionService: Dislike deletion published to ${result.success}/${result.total} relays`)
+
+      // Optimistically update local state
+      this.handleDeletionEvent(signedEvent)
+
+    } catch (error) {
+      console.error('Failed to remove dislike:', error)
+      throw error
+    } finally {
+      this._isLoading.value = false
+    }
+  }
+
   /**
    * Helper function to convert hex string to Uint8Array
    */
diff --git a/src/modules/nostr-feed/services/SubmissionService.ts b/src/modules/nostr-feed/services/SubmissionService.ts
new file mode 100644
index 0000000..b3f5658
--- /dev/null
+++ b/src/modules/nostr-feed/services/SubmissionService.ts
@@ -0,0 +1,1362 @@
+/**
+ * SubmissionService
+ *
+ * Handles Reddit-style submissions (link, media, self posts) using NIP-72 and NIP-22.
+ * Submissions are kind 1111 events scoped to a community with structured metadata.
+ */
+
+import { ref, reactive, computed } from 'vue'
+import { BaseService } from '@/core/base/BaseService'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import { eventBus } from '@/core/event-bus'
+import { finalizeEvent, type EventTemplate } from 'nostr-tools'
+import type { Event as NostrEvent, Filter } from 'nostr-tools'
+
+import {
+  SUBMISSION_KINDS,
+  type Submission,
+  type LinkSubmission,
+  type MediaSubmission,
+  type SelfSubmission,
+  type SubmissionType,
+  type SubmissionWithMeta,
+  type SubmissionVotes,
+  type SubmissionRanking,
+  type SubmissionForm,
+  type LinkSubmissionForm,
+  type MediaSubmissionForm,
+  type SelfSubmissionForm,
+  type SubmissionFeedConfig,
+  type SubmissionComment,
+  type LinkPreview,
+  type MediaAttachment,
+  parseCommunityRef,
+  formatCommunityRef,
+  extractDomain,
+  parseImetaTag,
+  buildImetaTag,
+  calculateHotRank,
+  calculateControversyRank
+} from '../types/submission'
+
+// ============================================================================
+// Service Definition
+// ============================================================================
+
+export class SubmissionService extends BaseService {
+  protected readonly metadata = {
+    name: 'SubmissionService',
+    version: '1.0.0',
+    dependencies: ['RelayHub', 'AuthService']
+  }
+
+  // Injected services
+  protected relayHub: any = null
+  protected authService: any = null
+  protected visibilityService: any = null
+  protected reactionService: any = null
+  protected linkPreviewService: any = null
+
+  // State
+  private _submissions = reactive(new Map<string, SubmissionWithMeta>())
+  private _comments = reactive(new Map<string, SubmissionComment[]>())
+  private _isLoading = ref(false)
+  private _error = ref<string | null>(null)
+
+  // Deduplication
+  private seenEventIds = new Set<string>()
+
+  // Subscription management
+  private currentSubscription: string | null = null
+  private currentUnsubscribe: (() => void) | null = null
+
+  // Public reactive state
+  public readonly submissions = computed(() => Array.from(this._submissions.values()))
+  public readonly isLoading = computed(() => this._isLoading.value)
+  public readonly error = computed(() => this._error.value)
+
+  // ============================================================================
+  // Lifecycle
+  // ============================================================================
+
+  protected async onInitialize(): Promise<void> {
+    console.log('SubmissionService: Starting initialization...')
+
+    this.relayHub = injectService(SERVICE_TOKENS.RELAY_HUB)
+    this.authService = injectService(SERVICE_TOKENS.AUTH_SERVICE)
+    this.visibilityService = injectService(SERVICE_TOKENS.VISIBILITY_SERVICE)
+    this.reactionService = injectService(SERVICE_TOKENS.REACTION_SERVICE)
+
+    if (!this.relayHub) {
+      throw new Error('RelayHub service not available')
+    }
+
+    // Register with visibility service
+    if (this.visibilityService) {
+      this.visibilityService.registerService(
+        'SubmissionService',
+        this.onResume.bind(this),
+        this.onPause.bind(this)
+      )
+    }
+
+    console.log('SubmissionService: Initialization complete')
+  }
+
+  private async onResume(): Promise<void> {
+    this.debug('App resumed')
+  }
+
+  private onPause(): void {
+    this.debug('App paused')
+  }
+
+  protected async onDispose(): Promise<void> {
+    await this.unsubscribe()
+    this._submissions.clear()
+    this._comments.clear()
+    this.seenEventIds.clear()
+  }
+
+  // ============================================================================
+  // Subscription Management
+  // ============================================================================
+
+  /**
+   * Subscribe to submissions based on feed configuration
+   */
+  async subscribe(config: SubmissionFeedConfig): Promise<void> {
+    await this.unsubscribe()
+
+    this._isLoading.value = true
+    this._error.value = null
+
+    try {
+      if (!this.relayHub?.isConnected) {
+        await this.relayHub?.connect()
+      }
+
+      const subscriptionId = `submissions-${Date.now()}`
+      const filters = this.buildFilters(config)
+
+      this.debug('Subscribing with filters:', filters)
+
+      const unsubscribe = this.relayHub.subscribe({
+        id: subscriptionId,
+        filters,
+        onEvent: (event: NostrEvent) => this.handleEvent(event),
+        onEose: () => {
+          this.debug('End of stored events')
+          // Refresh all submission votes from loaded reactions
+          this.refreshAllSubmissionVotes()
+          this._isLoading.value = false
+        },
+        onClose: () => {
+          this.debug('Subscription closed')
+        }
+      })
+
+      this.currentSubscription = subscriptionId
+      this.currentUnsubscribe = unsubscribe
+
+      // Timeout fallback
+      setTimeout(() => {
+        if (this._isLoading.value && this.currentSubscription === subscriptionId) {
+          this._isLoading.value = false
+        }
+      }, 10000)
+
+    } catch (err) {
+      this._error.value = err instanceof Error ? err.message : 'Failed to subscribe'
+      this._isLoading.value = false
+      throw err
+    }
+  }
+
+  /**
+   * Unsubscribe from current feed
+   */
+  async unsubscribe(): Promise<void> {
+    if (this.currentUnsubscribe) {
+      this.currentUnsubscribe()
+      this.currentSubscription = null
+      this.currentUnsubscribe = null
+    }
+  }
+
+  /**
+   * Subscribe to a specific submission and its comments
+   */
+  async subscribeToSubmission(submissionId: string): Promise<void> {
+    this._isLoading.value = true
+    this._error.value = null
+
+    try {
+      if (!this.relayHub?.isConnected) {
+        await this.relayHub?.connect()
+      }
+
+      const subscriptionId = `submission-${submissionId}-${Date.now()}`
+
+      // Build filters for the submission and its comments
+      const filters: Filter[] = [
+        // The submission itself
+        {
+          kinds: [SUBMISSION_KINDS.SUBMISSION],
+          ids: [submissionId]
+        },
+        // Comments referencing this submission (via 'e' tag - parent reference)
+        {
+          kinds: [SUBMISSION_KINDS.SUBMISSION],
+          '#e': [submissionId]
+        },
+        // Comments referencing this submission (via 'E' tag - root reference)
+        {
+          kinds: [SUBMISSION_KINDS.SUBMISSION],
+          '#E': [submissionId]
+        },
+        // Reactions on the submission and comments
+        {
+          kinds: [SUBMISSION_KINDS.REACTION],
+          '#e': [submissionId]
+        }
+      ]
+
+      this.debug('Subscribing to submission with filters:', filters)
+
+      const unsubscribe = this.relayHub.subscribe({
+        id: subscriptionId,
+        filters,
+        onEvent: (event: NostrEvent) => this.handleEvent(event),
+        onEose: () => {
+          this.debug('End of stored events for submission')
+          // Refresh submission votes from loaded reactions
+          this.refreshSubmissionVotes(submissionId)
+          // After loading comments, fetch their reactions
+          this.fetchCommentReactions(submissionId)
+          this._isLoading.value = false
+        },
+        onClose: () => {
+          this.debug('Submission subscription closed')
+        }
+      })
+
+      // Store for cleanup (don't overwrite main subscription)
+      // For now, we'll manage this separately
+      this.currentSubscription = subscriptionId
+      this.currentUnsubscribe = unsubscribe
+
+      // Timeout fallback
+      setTimeout(() => {
+        if (this._isLoading.value && this.currentSubscription === subscriptionId) {
+          this._isLoading.value = false
+        }
+      }, 10000)
+
+    } catch (err) {
+      this._error.value = err instanceof Error ? err.message : 'Failed to subscribe to submission'
+      this._isLoading.value = false
+      throw err
+    }
+  }
+
+  /**
+   * Build Nostr filters from feed configuration
+   */
+  private buildFilters(config: SubmissionFeedConfig): Filter[] {
+    const filters: Filter[] = []
+
+    // Main submissions filter
+    const submissionFilter: Filter = {
+      kinds: [SUBMISSION_KINDS.SUBMISSION],
+      limit: config.limit
+    }
+
+    // Community filter
+    if (config.community) {
+      submissionFilter['#a'] = [formatCommunityRef(config.community)]
+    }
+
+    // Author filter
+    if (config.authors?.length) {
+      submissionFilter.authors = config.authors
+    }
+
+    // Hashtag filter
+    if (config.hashtags?.length) {
+      submissionFilter['#t'] = config.hashtags
+    }
+
+    // Time range for "top" sort
+    if (config.sort === 'top' && config.timeRange) {
+      const now = Math.floor(Date.now() / 1000)
+      const ranges: Record<string, number> = {
+        hour: 3600,
+        day: 86400,
+        week: 604800,
+        month: 2592000,
+        year: 31536000,
+        all: 0
+      }
+      if (ranges[config.timeRange] > 0) {
+        submissionFilter.since = now - ranges[config.timeRange]
+      }
+    }
+
+    filters.push(submissionFilter)
+
+    // Also subscribe to reactions for these submissions
+    filters.push({
+      kinds: [SUBMISSION_KINDS.REACTION],
+      limit: 1000
+    })
+
+    // And deletions
+    filters.push({
+      kinds: [SUBMISSION_KINDS.DELETION]
+    })
+
+    return filters
+  }
+
+  // ============================================================================
+  // Event Handling
+  // ============================================================================
+
+  /**
+   * Handle incoming Nostr event
+   */
+  private handleEvent(event: NostrEvent): void {
+    switch (event.kind) {
+      case SUBMISSION_KINDS.SUBMISSION:
+        this.handleSubmissionEvent(event)
+        break
+      case SUBMISSION_KINDS.REACTION:
+        // Route to reaction service
+        this.reactionService?.handleReactionEvent(event)
+        break
+      case SUBMISSION_KINDS.DELETION:
+        this.handleDeletionEvent(event)
+        break
+    }
+  }
+
+  /**
+   * Handle kind 1111 submission event
+   */
+  private handleSubmissionEvent(event: NostrEvent): void {
+    // Deduplication
+    if (this.seenEventIds.has(event.id)) {
+      return
+    }
+    this.seenEventIds.add(event.id)
+
+    // Check if this is a top-level submission or a comment
+    if (this.isComment(event)) {
+      this.handleCommentEvent(event)
+      return
+    }
+
+    // Parse the submission
+    const submission = this.parseSubmission(event)
+    if (!submission) {
+      this.debug('Failed to parse submission:', event.id)
+      return
+    }
+
+    // Create full submission with metadata
+    const submissionWithMeta = this.enrichSubmission(submission)
+    this._submissions.set(submission.id, submissionWithMeta)
+
+    // Emit event
+    eventBus.emit('submission:new', { submission: submissionWithMeta }, 'nostr-feed')
+  }
+
+  /**
+   * Check if event is a comment (has parent that's not the community)
+   */
+  private isComment(event: NostrEvent): boolean {
+    const tags = event.tags || []
+
+    // Get root scope (A tag) and parent (a/e tag)
+    const rootTag = tags.find(t => t[0] === 'A')
+    const parentETag = tags.find(t => t[0] === 'e')
+    const parentATag = tags.find(t => t[0] === 'a' && t[1] !== rootTag?.[1])
+
+    // If parent e-tag exists and points to a different event, it's a comment
+    if (parentETag) {
+      return true
+    }
+
+    // If parent a-tag differs from root A-tag, it's a comment
+    if (parentATag && rootTag && parentATag[1] !== rootTag[1]) {
+      return true
+    }
+
+    return false
+  }
+
+  /**
+   * Handle comment on a submission
+   */
+  private handleCommentEvent(event: NostrEvent): void {
+    // Find the root submission ID
+    const rootTag = event.tags.find(t => t[0] === 'E') || event.tags.find(t => t[0] === 'e')
+    if (!rootTag) return
+
+    const rootId = rootTag[1]
+
+    // Check for duplicate comment
+    const existingComments = this._comments.get(rootId)
+    if (existingComments?.some(c => c.id === event.id)) {
+      return
+    }
+
+    // Parse as comment
+    const comment: SubmissionComment = {
+      id: event.id,
+      pubkey: event.pubkey,
+      created_at: event.created_at,
+      content: event.content,
+      rootId,
+      parentId: this.getParentId(event) || rootId,
+      depth: 0,
+      replies: [],
+      votes: this.getCommentVotes(event.id)
+    }
+
+    // Add to comments map
+    if (!this._comments.has(rootId)) {
+      this._comments.set(rootId, [])
+    }
+    this._comments.get(rootId)!.push(comment)
+
+    // Update comment count on the submission
+    const submission = this._submissions.get(rootId)
+    if (submission) {
+      submission.commentCount = this._comments.get(rootId)!.length
+    }
+  }
+
+  /**
+   * Get parent event ID from tags
+   */
+  private getParentId(event: NostrEvent): string | null {
+    const eTag = event.tags.find(t => t[0] === 'e')
+    return eTag ? eTag[1] : null
+  }
+
+  /**
+   * Handle deletion event
+   */
+  private handleDeletionEvent(event: NostrEvent): void {
+    const kTag = event.tags.find(t => t[0] === 'k')
+    const deletedKind = kTag?.[1]
+
+    // Route reaction deletions to reaction service
+    if (deletedKind === '7') {
+      this.reactionService?.handleDeletionEvent(event)
+      return
+    }
+
+    // Handle submission/comment deletions
+    if (deletedKind === '1111') {
+      const eTags = event.tags.filter(t => t[0] === 'e')
+      for (const eTag of eTags) {
+        const eventId = eTag[1]
+        const submission = this._submissions.get(eventId)
+
+        // Only delete if from the same author
+        if (submission && submission.pubkey === event.pubkey) {
+          this._submissions.delete(eventId)
+          this.seenEventIds.delete(eventId)
+        }
+      }
+    }
+  }
+
+  // ============================================================================
+  // Parsing
+  // ============================================================================
+
+  /**
+   * Parse a Nostr event into a Submission
+   */
+  private parseSubmission(event: NostrEvent): Submission | null {
+    const tags = event.tags || []
+
+    // Extract required fields
+    const titleTag = tags.find(t => t[0] === 'title')
+    const postTypeTag = tags.find(t => t[0] === 'post-type')
+
+    // Title is required
+    const title = titleTag?.[1]
+    if (!title) {
+      this.debug('Submission missing title:', event.id)
+      return null
+    }
+
+    // Determine post type
+    const postType = (postTypeTag?.[1] as SubmissionType) || this.inferPostType(event)
+
+    // Extract common fields
+    const base = {
+      id: event.id,
+      pubkey: event.pubkey,
+      created_at: event.created_at,
+      kind: SUBMISSION_KINDS.SUBMISSION,
+      tags,
+      title,
+      communityRef: this.extractCommunityRef(tags),
+      hashtags: this.extractHashtags(tags),
+      nsfw: tags.some(t => t[0] === 'nsfw' || (t[0] === 'content-warning')),
+      flair: tags.find(t => t[0] === 'flair')?.[1]
+    }
+
+    // Build type-specific submission
+    switch (postType) {
+      case 'link':
+        return this.parseLinkSubmission(event, base)
+      case 'media':
+        return this.parseMediaSubmission(event, base)
+      case 'self':
+      default:
+        return this.parseSelfSubmission(event, base)
+    }
+  }
+
+  /**
+   * Infer post type from event content/tags
+   */
+  private inferPostType(event: NostrEvent): SubmissionType {
+    const tags = event.tags || []
+
+    // Check for URL tag
+    const urlTag = tags.find(t => t[0] === 'r')
+    if (urlTag) return 'link'
+
+    // Check for media (imeta tag)
+    const imetaTag = tags.find(t => t[0] === 'imeta')
+    if (imetaTag) return 'media'
+
+    // Check for URL in content
+    const urlRegex = /https?:\/\/[^\s]+/
+    if (urlRegex.test(event.content)) {
+      // Check if it's a media URL
+      const mediaExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.mp4', '.webm', '.mov']
+      const match = event.content.match(urlRegex)
+      if (match && mediaExtensions.some(ext => match[0].toLowerCase().includes(ext))) {
+        return 'media'
+      }
+      return 'link'
+    }
+
+    return 'self'
+  }
+
+  /**
+   * Parse link submission
+   */
+  private parseLinkSubmission(
+    event: NostrEvent,
+    base: Omit<Submission, 'postType' | 'url' | 'preview' | 'body'>
+  ): LinkSubmission {
+    const tags = event.tags || []
+
+    // Get URL from 'r' tag or content
+    const urlTag = tags.find(t => t[0] === 'r')
+    let url = urlTag?.[1] || ''
+
+    if (!url) {
+      const urlMatch = event.content.match(/https?:\/\/[^\s]+/)
+      url = urlMatch?.[0] || ''
+    }
+
+    // Build preview from tags
+    const preview: LinkPreview = {
+      url,
+      domain: extractDomain(url),
+      title: tags.find(t => t[0] === 'preview-title')?.[1],
+      description: tags.find(t => t[0] === 'preview-description')?.[1],
+      image: tags.find(t => t[0] === 'preview-image')?.[1],
+      siteName: tags.find(t => t[0] === 'preview-site-name')?.[1]
+    }
+
+    return {
+      ...base,
+      postType: 'link',
+      url,
+      preview,
+      body: event.content
+    }
+  }
+
+  /**
+   * Parse media submission
+   */
+  private parseMediaSubmission(
+    event: NostrEvent,
+    base: Omit<Submission, 'postType' | 'media' | 'gallery' | 'body'>
+  ): MediaSubmission {
+    const tags = event.tags || []
+
+    // Parse imeta tags
+    const imetaTags = tags.filter(t => t[0] === 'imeta')
+    const mediaAttachments = imetaTags
+      .map(t => parseImetaTag(t))
+      .filter((m): m is MediaAttachment => m !== null)
+
+    // If no imeta, try to extract from content
+    if (mediaAttachments.length === 0) {
+      const urlMatch = event.content.match(/https?:\/\/[^\s]+/)
+      if (urlMatch) {
+        mediaAttachments.push({ url: urlMatch[0] })
+      }
+    }
+
+    const [primary, ...gallery] = mediaAttachments
+
+    return {
+      ...base,
+      postType: 'media',
+      media: primary || { url: '' },
+      gallery: gallery.length > 0 ? gallery : undefined,
+      body: event.content
+    }
+  }
+
+  /**
+   * Parse self/text submission
+   */
+  private parseSelfSubmission(
+    event: NostrEvent,
+    base: Omit<Submission, 'postType' | 'body'>
+  ): SelfSubmission {
+    return {
+      ...base,
+      postType: 'self',
+      body: event.content
+    }
+  }
+
+  /**
+   * Extract community reference from tags
+   */
+  private extractCommunityRef(tags: string[][]): string | undefined {
+    const aTag = tags.find(t => t[0] === 'A' || t[0] === 'a')
+    return aTag?.[1]
+  }
+
+  /**
+   * Extract hashtags from tags
+   */
+  private extractHashtags(tags: string[][]): string[] {
+    return tags.filter(t => t[0] === 't').map(t => t[1])
+  }
+
+  // ============================================================================
+  // Enrichment
+  // ============================================================================
+
+  /**
+   * Enrich submission with votes, ranking, etc.
+   */
+  private enrichSubmission(submission: Submission): SubmissionWithMeta {
+    const votes = this.getSubmissionVotes(submission.id)
+    const ranking = this.calculateRanking(submission, votes)
+
+    return {
+      ...submission,
+      votes,
+      ranking,
+      commentCount: this.getCommentCount(submission.id),
+      isSaved: false, // TODO: implement saved posts
+      isHidden: false,
+      approvalStatus: null
+    }
+  }
+
+  /**
+   * Get votes for a submission
+   */
+  private getSubmissionVotes(submissionId: string): SubmissionVotes {
+    // Get from reaction service if available
+    if (this.reactionService) {
+      const reactions = this.reactionService.getEventReactions(submissionId)
+      return {
+        upvotes: reactions.likes || 0,
+        downvotes: reactions.dislikes || 0,
+        score: (reactions.likes || 0) - (reactions.dislikes || 0),
+        userVote: reactions.userHasLiked ? 'upvote' : reactions.userHasDisliked ? 'downvote' : null,
+        userVoteId: reactions.userReactionId
+      }
+    }
+    return this.getDefaultVotes()
+  }
+
+  /**
+   * Get default votes object
+   */
+  private getDefaultVotes(): SubmissionVotes {
+    return {
+      upvotes: 0,
+      downvotes: 0,
+      score: 0,
+      userVote: null
+    }
+  }
+
+  /**
+   * Get votes for a comment from reaction service
+   */
+  private getCommentVotes(commentId: string): SubmissionVotes {
+    if (this.reactionService) {
+      const reactions = this.reactionService.getEventReactions(commentId)
+      return {
+        upvotes: reactions.likes || 0,
+        downvotes: reactions.dislikes || 0,
+        score: (reactions.likes || 0) - (reactions.dislikes || 0),
+        userVote: reactions.userHasLiked ? 'upvote' : reactions.userHasDisliked ? 'downvote' : null,
+        userVoteId: reactions.userReactionId
+      }
+    }
+    return this.getDefaultVotes()
+  }
+
+  /**
+   * Calculate ranking scores
+   */
+  private calculateRanking(submission: Submission, votes: SubmissionVotes): SubmissionRanking {
+    return {
+      hotRank: calculateHotRank(votes.score, submission.created_at),
+      controversyRank: calculateControversyRank(votes.upvotes, votes.downvotes),
+      scaledRank: 0 // TODO: implement community scaling
+    }
+  }
+
+  /**
+   * Get comment count for a submission
+   */
+  private getCommentCount(submissionId: string): number {
+    return this._comments.get(submissionId)?.length || 0
+  }
+
+  // ============================================================================
+  // Submission Creation
+  // ============================================================================
+
+  /**
+   * Create a new submission
+   */
+  async createSubmission(form: SubmissionForm): Promise<string> {
+    this.requireAuth()
+
+    const userPubkey = this.authService.user.value?.pubkey
+    const userPrivkey = this.authService.user.value?.prvkey
+
+    if (!userPubkey || !userPrivkey) {
+      throw new Error('User keys not available')
+    }
+
+    try {
+      this._isLoading.value = true
+
+      // Build event
+      const eventTemplate = await this.buildSubmissionEvent(form)
+
+      // Sign
+      const privkeyBytes = this.hexToUint8Array(userPrivkey)
+      const signedEvent = finalizeEvent(eventTemplate, privkeyBytes)
+
+      // Publish
+      await this.relayHub.publishEvent(signedEvent)
+
+      // Handle locally
+      this.handleSubmissionEvent(signedEvent)
+
+      return signedEvent.id
+
+    } finally {
+      this._isLoading.value = false
+    }
+  }
+
+  /**
+   * Build event template from submission form
+   */
+  private async buildSubmissionEvent(form: SubmissionForm): Promise<EventTemplate> {
+    const tags: string[][] = []
+
+    // Title (required)
+    tags.push(['title', form.title])
+
+    // Post type
+    tags.push(['post-type', form.postType])
+
+    // Community scope (if provided)
+    if (form.communityRef) {
+      const ref = parseCommunityRef(form.communityRef)
+      if (ref) {
+        tags.push(['A', form.communityRef])
+        tags.push(['a', form.communityRef])
+        tags.push(['K', '34550'])
+        tags.push(['k', '34550'])
+        tags.push(['P', ref.pubkey])
+        tags.push(['p', ref.pubkey])
+      }
+    }
+
+    // NSFW
+    if (form.nsfw) {
+      tags.push(['nsfw', 'true'])
+    }
+
+    // Flair
+    if (form.flair) {
+      tags.push(['flair', form.flair])
+    }
+
+    let content = ''
+
+    // Type-specific fields
+    switch (form.postType) {
+      case 'link': {
+        const linkForm = form as LinkSubmissionForm
+        tags.push(['r', linkForm.url])
+
+        // Fetch and add preview if available
+        if (this.linkPreviewService) {
+          try {
+            const preview = await this.linkPreviewService.fetchPreview(linkForm.url)
+            if (preview.title) tags.push(['preview-title', preview.title])
+            if (preview.description) tags.push(['preview-description', preview.description])
+            if (preview.image) tags.push(['preview-image', preview.image])
+            if (preview.siteName) tags.push(['preview-site-name', preview.siteName])
+          } catch (err) {
+            this.debug('Failed to fetch link preview:', err)
+          }
+        }
+
+        content = linkForm.body || ''
+        break
+      }
+
+      case 'media': {
+        const mediaForm = form as MediaSubmissionForm
+
+        // Handle file upload or URL
+        let mediaUrl: string
+        if (typeof mediaForm.media === 'string') {
+          mediaUrl = mediaForm.media
+        } else {
+          // TODO: Upload file and get URL
+          throw new Error('File upload not yet implemented')
+        }
+
+        // Add imeta tag
+        const imetaTag = buildImetaTag({
+          url: mediaUrl,
+          alt: mediaForm.alt
+        })
+        tags.push(imetaTag)
+
+        content = mediaForm.body || ''
+        break
+      }
+
+      case 'self': {
+        const selfForm = form as SelfSubmissionForm
+        content = selfForm.body
+        break
+      }
+    }
+
+    return {
+      kind: SUBMISSION_KINDS.SUBMISSION,
+      content,
+      tags,
+      created_at: Math.floor(Date.now() / 1000)
+    }
+  }
+
+  // ============================================================================
+  // Voting
+  // ============================================================================
+
+  /**
+   * Upvote a submission
+   */
+  async upvote(submissionId: string): Promise<void> {
+    const submission = this._submissions.get(submissionId)
+    if (!submission) throw new Error('Submission not found')
+
+    if (submission.votes.userVote === 'upvote') {
+      // Remove upvote
+      await this.reactionService?.unlikeEvent(submissionId)
+    } else {
+      // Add upvote (reaction service handles removing existing downvote)
+      await this.reactionService?.likeEvent(
+        submissionId,
+        submission.pubkey,
+        SUBMISSION_KINDS.SUBMISSION
+      )
+    }
+
+    // Refresh votes
+    this.refreshSubmissionVotes(submissionId)
+  }
+
+  /**
+   * Downvote a submission
+   */
+  async downvote(submissionId: string): Promise<void> {
+    const submission = this._submissions.get(submissionId)
+    if (!submission) throw new Error('Submission not found')
+
+    if (submission.votes.userVote === 'downvote') {
+      // Remove downvote
+      await this.reactionService?.undislikeEvent(submissionId)
+    } else {
+      // Add downvote (ReactionService keeps only latest reaction per user)
+      await this.reactionService?.dislikeEvent(
+        submissionId,
+        submission.pubkey,
+        SUBMISSION_KINDS.SUBMISSION
+      )
+    }
+
+    // Refresh votes
+    this.refreshSubmissionVotes(submissionId)
+  }
+
+  /**
+   * Refresh votes for a submission
+   */
+  private refreshSubmissionVotes(submissionId: string): void {
+    const submission = this._submissions.get(submissionId)
+    if (!submission) return
+
+    submission.votes = this.getSubmissionVotes(submissionId)
+    submission.ranking = this.calculateRanking(submission, submission.votes)
+  }
+
+  /**
+   * Refresh votes for all submissions
+   */
+  private refreshAllSubmissionVotes(): void {
+    for (const submissionId of this._submissions.keys()) {
+      this.refreshSubmissionVotes(submissionId)
+    }
+  }
+
+  /**
+   * Upvote a comment
+   */
+  async upvoteComment(submissionId: string, commentId: string): Promise<void> {
+    const comment = this.findComment(submissionId, commentId)
+    if (!comment) throw new Error('Comment not found')
+
+    if (comment.votes.userVote === 'upvote') {
+      // Remove upvote
+      await this.reactionService?.unlikeEvent(commentId)
+      comment.votes.userVote = null
+      comment.votes.upvotes = Math.max(0, comment.votes.upvotes - 1)
+    } else {
+      // Add upvote
+      await this.reactionService?.likeEvent(
+        commentId,
+        comment.pubkey,
+        SUBMISSION_KINDS.SUBMISSION
+      )
+      // If was downvoted, remove downvote
+      if (comment.votes.userVote === 'downvote') {
+        comment.votes.downvotes = Math.max(0, comment.votes.downvotes - 1)
+      }
+      comment.votes.userVote = 'upvote'
+      comment.votes.upvotes += 1
+    }
+
+    // Update score
+    comment.votes.score = comment.votes.upvotes - comment.votes.downvotes
+  }
+
+  /**
+   * Downvote a comment
+   */
+  async downvoteComment(submissionId: string, commentId: string): Promise<void> {
+    const comment = this.findComment(submissionId, commentId)
+    if (!comment) throw new Error('Comment not found')
+
+    if (comment.votes.userVote === 'downvote') {
+      // Remove downvote
+      await this.reactionService?.undislikeEvent(commentId)
+      comment.votes.userVote = null
+      comment.votes.downvotes = Math.max(0, comment.votes.downvotes - 1)
+    } else {
+      // Add downvote (ReactionService keeps only latest reaction per user)
+      await this.reactionService?.dislikeEvent(
+        commentId,
+        comment.pubkey,
+        SUBMISSION_KINDS.SUBMISSION
+      )
+      // If was upvoted, update local count
+      if (comment.votes.userVote === 'upvote') {
+        comment.votes.upvotes = Math.max(0, comment.votes.upvotes - 1)
+      }
+      comment.votes.userVote = 'downvote'
+      comment.votes.downvotes += 1
+    }
+
+    // Update score
+    comment.votes.score = comment.votes.upvotes - comment.votes.downvotes
+  }
+
+  // ============================================================================
+  // Sorting
+  // ============================================================================
+
+  /**
+   * Get sorted submissions
+   */
+  getSortedSubmissions(
+    sort: 'hot' | 'new' | 'top' | 'controversial' = 'hot'
+  ): SubmissionWithMeta[] {
+    const submissions = Array.from(this._submissions.values())
+
+    switch (sort) {
+      case 'hot':
+        return submissions.sort((a, b) => b.ranking.hotRank - a.ranking.hotRank)
+      case 'new':
+        return submissions.sort((a, b) => b.created_at - a.created_at)
+      case 'top':
+        return submissions.sort((a, b) => b.votes.score - a.votes.score)
+      case 'controversial':
+        return submissions.sort((a, b) => b.ranking.controversyRank - a.ranking.controversyRank)
+      default:
+        return submissions
+    }
+  }
+
+  // ============================================================================
+  // Comments
+  // ============================================================================
+
+  /**
+   * Get comments for a submission
+   */
+  getComments(submissionId: string): SubmissionComment[] {
+    return this._comments.get(submissionId) || []
+  }
+
+  /**
+   * Get threaded comments
+   */
+  getThreadedComments(submissionId: string): SubmissionComment[] {
+    const comments = this.getComments(submissionId)
+    return this.buildCommentTree(comments)
+  }
+
+  /**
+   * Build comment tree from flat list
+   */
+  private buildCommentTree(comments: SubmissionComment[]): SubmissionComment[] {
+    const commentMap = new Map<string, SubmissionComment>()
+    const rootComments: SubmissionComment[] = []
+
+    // Create map
+    comments.forEach(comment => {
+      commentMap.set(comment.id, { ...comment, replies: [], depth: 0 })
+    })
+
+    // Build tree
+    comments.forEach(comment => {
+      const current = commentMap.get(comment.id)!
+
+      if (comment.parentId === comment.rootId) {
+        // Top-level comment
+        rootComments.push(current)
+      } else {
+        // Nested reply
+        const parent = commentMap.get(comment.parentId)
+        if (parent) {
+          current.depth = parent.depth + 1
+          parent.replies.push(current)
+        } else {
+          // Parent not found, treat as root
+          rootComments.push(current)
+        }
+      }
+    })
+
+    // Sort by score
+    const sortByScore = (a: SubmissionComment, b: SubmissionComment) =>
+      b.votes.score - a.votes.score
+
+    rootComments.sort(sortByScore)
+    rootComments.forEach(comment => this.sortReplies(comment, sortByScore))
+
+    return rootComments
+  }
+
+  /**
+   * Recursively sort replies
+   */
+  private sortReplies(
+    comment: SubmissionComment,
+    compareFn: (a: SubmissionComment, b: SubmissionComment) => number
+  ): void {
+    if (comment.replies.length > 0) {
+      comment.replies.sort(compareFn)
+      comment.replies.forEach(reply => this.sortReplies(reply, compareFn))
+    }
+  }
+
+  /**
+   * Get sorted threaded comments
+   */
+  getSortedComments(
+    submissionId: string,
+    sort: 'best' | 'new' | 'old' | 'controversial' = 'best'
+  ): SubmissionComment[] {
+    const comments = this.getComments(submissionId)
+    const tree = this.buildCommentTree(comments)
+
+    // Apply custom sort to the tree
+    const compareFn = this.getCommentSortFn(sort)
+    tree.sort(compareFn)
+    tree.forEach(comment => this.sortReplies(comment, compareFn))
+
+    return tree
+  }
+
+  /**
+   * Get comparison function for comment sorting
+   */
+  private getCommentSortFn(
+    sort: 'best' | 'new' | 'old' | 'controversial'
+  ): (a: SubmissionComment, b: SubmissionComment) => number {
+    switch (sort) {
+      case 'best':
+        return (a, b) => b.votes.score - a.votes.score
+      case 'new':
+        return (a, b) => b.created_at - a.created_at
+      case 'old':
+        return (a, b) => a.created_at - b.created_at
+      case 'controversial':
+        return (a, b) => {
+          const aControversy = calculateControversyRank(a.votes.upvotes, a.votes.downvotes)
+          const bControversy = calculateControversyRank(b.votes.upvotes, b.votes.downvotes)
+          return bControversy - aControversy
+        }
+      default:
+        return (a, b) => b.votes.score - a.votes.score
+    }
+  }
+
+  /**
+   * Create a comment on a submission or reply to another comment
+   */
+  async createComment(
+    submissionId: string,
+    content: string,
+    parentCommentId?: string
+  ): Promise<string> {
+    this.requireAuth()
+
+    const userPubkey = this.authService.user.value?.pubkey
+    const userPrivkey = this.authService.user.value?.prvkey
+
+    if (!userPubkey || !userPrivkey) {
+      throw new Error('User keys not available')
+    }
+
+    // Get the root submission
+    const submission = this._submissions.get(submissionId)
+    if (!submission) {
+      throw new Error('Submission not found')
+    }
+
+    try {
+      this._isLoading.value = true
+
+      const tags: string[][] = []
+
+      // Root scope - the community (if submission has one)
+      if (submission.communityRef) {
+        const ref = parseCommunityRef(submission.communityRef)
+        if (ref) {
+          tags.push(['A', submission.communityRef])
+          tags.push(['K', '34550'])
+          tags.push(['P', ref.pubkey])
+        }
+      }
+
+      // Root reference - the submission
+      tags.push(['E', submissionId, '', submission.pubkey])
+
+      // Parent reference
+      if (parentCommentId) {
+        // Replying to a comment
+        const parentComment = this.findComment(submissionId, parentCommentId)
+        if (parentComment) {
+          tags.push(['e', parentCommentId, '', parentComment.pubkey])
+          tags.push(['p', parentComment.pubkey])
+        } else {
+          // Fallback to submission as parent
+          tags.push(['e', submissionId, '', submission.pubkey])
+          tags.push(['p', submission.pubkey])
+        }
+      } else {
+        // Top-level comment on submission
+        tags.push(['e', submissionId, '', submission.pubkey])
+        tags.push(['p', submission.pubkey])
+      }
+
+      tags.push(['k', '1111'])
+
+      const eventTemplate: EventTemplate = {
+        kind: SUBMISSION_KINDS.SUBMISSION,
+        content,
+        tags,
+        created_at: Math.floor(Date.now() / 1000)
+      }
+
+      // Sign
+      const privkeyBytes = this.hexToUint8Array(userPrivkey)
+      const signedEvent = finalizeEvent(eventTemplate, privkeyBytes)
+
+      // Publish
+      await this.relayHub.publishEvent(signedEvent)
+
+      // Handle locally - add to comments
+      const comment: SubmissionComment = {
+        id: signedEvent.id,
+        pubkey: signedEvent.pubkey,
+        created_at: signedEvent.created_at,
+        content: signedEvent.content,
+        rootId: submissionId,
+        parentId: parentCommentId || submissionId,
+        depth: 0,
+        replies: [],
+        votes: this.getDefaultVotes()
+      }
+
+      if (!this._comments.has(submissionId)) {
+        this._comments.set(submissionId, [])
+      }
+      this._comments.get(submissionId)!.push(comment)
+
+      // Update comment count on submission
+      const sub = this._submissions.get(submissionId)
+      if (sub) {
+        sub.commentCount = this.getCommentCount(submissionId)
+      }
+
+      return signedEvent.id
+
+    } finally {
+      this._isLoading.value = false
+    }
+  }
+
+  /**
+   * Find a comment by ID within a submission's comments
+   */
+  private findComment(submissionId: string, commentId: string): SubmissionComment | undefined {
+    const comments = this._comments.get(submissionId) || []
+    return comments.find(c => c.id === commentId)
+  }
+
+  /**
+   * Fetch reactions for all comments of a submission
+   */
+  private async fetchCommentReactions(submissionId: string): Promise<void> {
+    const comments = this._comments.get(submissionId)
+    if (!comments || comments.length === 0) return
+
+    const commentIds = comments.map(c => c.id)
+
+    this.debug('Fetching reactions for comments:', commentIds.length)
+
+    // Subscribe to reactions for all comment IDs
+    const filters: Filter[] = [
+      {
+        kinds: [SUBMISSION_KINDS.REACTION],
+        '#e': commentIds
+      }
+    ]
+
+    return new Promise<void>((resolve) => {
+      const subscriptionId = `comment-reactions-${submissionId}-${Date.now()}`
+
+      const unsubscribe = this.relayHub.subscribe({
+        id: subscriptionId,
+        filters,
+        onEvent: (event: NostrEvent) => {
+          // Route to reaction service
+          this.reactionService?.handleReactionEvent(event)
+        },
+        onEose: () => {
+          this.debug('End of comment reactions')
+          // Update all comment votes after reactions are loaded
+          this.updateCommentVotes(submissionId)
+          unsubscribe()
+          resolve()
+        },
+        onClose: () => {
+          resolve()
+        }
+      })
+
+      // Timeout fallback
+      setTimeout(() => {
+        unsubscribe()
+        resolve()
+      }, 5000)
+    })
+  }
+
+  /**
+   * Update votes for all comments from reaction service
+   */
+  private updateCommentVotes(submissionId: string): void {
+    const comments = this._comments.get(submissionId)
+    if (!comments) return
+
+    for (const comment of comments) {
+      comment.votes = this.getCommentVotes(comment.id)
+    }
+  }
+
+  // ============================================================================
+  // Utilities
+  // ============================================================================
+
+  /**
+   * Convert hex string to Uint8Array
+   */
+  private hexToUint8Array(hex: string): Uint8Array {
+    const bytes = new Uint8Array(hex.length / 2)
+    for (let i = 0; i < hex.length; i += 2) {
+      bytes[i / 2] = parseInt(hex.substr(i, 2), 16)
+    }
+    return bytes
+  }
+
+  /**
+   * Get a single submission by ID
+   */
+  getSubmission(id: string): SubmissionWithMeta | undefined {
+    return this._submissions.get(id)
+  }
+
+  /**
+   * Clear all data
+   */
+  clear(): void {
+    this._submissions.clear()
+    this._comments.clear()
+    this.seenEventIds.clear()
+    this._error.value = null
+  }
+}
diff --git a/src/modules/nostr-feed/types/index.ts b/src/modules/nostr-feed/types/index.ts
new file mode 100644
index 0000000..e6b40a8
--- /dev/null
+++ b/src/modules/nostr-feed/types/index.ts
@@ -0,0 +1,5 @@
+/**
+ * Types index - re-export all types from the module
+ */
+
+export * from './submission'
diff --git a/src/modules/nostr-feed/types/submission.ts b/src/modules/nostr-feed/types/submission.ts
new file mode 100644
index 0000000..ae7e0ad
--- /dev/null
+++ b/src/modules/nostr-feed/types/submission.ts
@@ -0,0 +1,528 @@
+/**
+ * Link Aggregator Types
+ *
+ * Implements Reddit-style submissions using NIP-72 (Communities) and NIP-22 (Comments).
+ * Submissions are kind 1111 events scoped to a community with structured metadata.
+ */
+
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+/** Nostr event kinds used by the link aggregator */
+export const SUBMISSION_KINDS = {
+  /** Community definition (NIP-72) */
+  COMMUNITY: 34550,
+  /** Submission/comment (NIP-22) */
+  SUBMISSION: 1111,
+  /** Moderator approval (NIP-72) */
+  APPROVAL: 4550,
+  /** Reaction/vote (NIP-25) */
+  REACTION: 7,
+  /** Deletion (NIP-09) */
+  DELETION: 5,
+  /** File metadata (NIP-94) - for media references */
+  FILE_METADATA: 1063
+} as const
+
+/** Submission post types */
+export type SubmissionType = 'link' | 'media' | 'self'
+
+/** Vote types for reactions */
+export type VoteType = 'upvote' | 'downvote' | null
+
+/** Feed sort options */
+export type SortType = 'hot' | 'new' | 'top' | 'controversial'
+
+/** Time range for "top" sorting */
+export type TimeRange = 'hour' | 'day' | 'week' | 'month' | 'year' | 'all'
+
+// ============================================================================
+// Link Preview Types
+// ============================================================================
+
+/** Open Graph metadata extracted from a URL */
+export interface LinkPreview {
+  /** The original URL */
+  url: string
+  /** og:title or page title */
+  title?: string
+  /** og:description or meta description */
+  description?: string
+  /** og:image URL */
+  image?: string
+  /** og:site_name */
+  siteName?: string
+  /** og:type (article, video, etc.) */
+  type?: string
+  /** og:video for video embeds */
+  videoUrl?: string
+  /** Favicon URL */
+  favicon?: string
+  /** Domain extracted from URL */
+  domain: string
+}
+
+// ============================================================================
+// Media Types (NIP-92 / NIP-94)
+// ============================================================================
+
+/** Media attachment metadata from imeta tag */
+export interface MediaAttachment {
+  /** Media URL */
+  url: string
+  /** MIME type (e.g., "image/jpeg", "video/mp4") */
+  mimeType?: string
+  /** Dimensions in "WxH" format */
+  dimensions?: string
+  /** Width in pixels */
+  width?: number
+  /** Height in pixels */
+  height?: number
+  /** Blurhash for placeholder */
+  blurhash?: string
+  /** Alt text for accessibility */
+  alt?: string
+  /** SHA-256 hash of the file */
+  hash?: string
+  /** File size in bytes */
+  size?: number
+  /** Thumbnail URL */
+  thumbnail?: string
+  /** Fallback URLs */
+  fallbacks?: string[]
+}
+
+/** Media type classification */
+export type MediaType = 'image' | 'video' | 'audio' | 'other'
+
+// ============================================================================
+// Submission Types
+// ============================================================================
+
+/** Base submission data shared by all post types */
+export interface SubmissionBase {
+  /** Nostr event ID */
+  id: string
+  /** Author public key */
+  pubkey: string
+  /** Unix timestamp (seconds) */
+  created_at: number
+  /** Event kind (1111) */
+  kind: typeof SUBMISSION_KINDS.SUBMISSION
+  /** Raw event tags */
+  tags: string[][]
+  /** Submission title (required) */
+  title: string
+  /** Post type discriminator */
+  postType: SubmissionType
+  /** Community reference (a-tag format) */
+  communityRef?: string
+  /** Hashtags/topics */
+  hashtags: string[]
+  /** Whether marked NSFW */
+  nsfw: boolean
+  /** Flair/label for the post */
+  flair?: string
+}
+
+/** Link submission with URL and preview */
+export interface LinkSubmission extends SubmissionBase {
+  postType: 'link'
+  /** External URL */
+  url: string
+  /** Link preview metadata */
+  preview?: LinkPreview
+  /** Optional body/description */
+  body?: string
+}
+
+/** Media submission with attachments */
+export interface MediaSubmission extends SubmissionBase {
+  postType: 'media'
+  /** Primary media attachment */
+  media: MediaAttachment
+  /** Additional media attachments (gallery) */
+  gallery?: MediaAttachment[]
+  /** Caption/description */
+  body?: string
+}
+
+/** Self/text submission */
+export interface SelfSubmission extends SubmissionBase {
+  postType: 'self'
+  /** Markdown body content */
+  body: string
+}
+
+/** Union type for all submission types */
+export type Submission = LinkSubmission | MediaSubmission | SelfSubmission
+
+// ============================================================================
+// Voting & Scoring
+// ============================================================================
+
+/** Vote counts and user state for a submission */
+export interface SubmissionVotes {
+  /** Total upvotes */
+  upvotes: number
+  /** Total downvotes */
+  downvotes: number
+  /** Net score (upvotes - downvotes) */
+  score: number
+  /** Current user's vote */
+  userVote: VoteType
+  /** User's vote event ID (for deletion) */
+  userVoteId?: string
+}
+
+/** Ranking scores for sorting */
+export interface SubmissionRanking {
+  /** Hot rank score (activity + recency) */
+  hotRank: number
+  /** Controversy rank (balanced voting) */
+  controversyRank: number
+  /** Scaled rank (amplifies smaller communities) */
+  scaledRank: number
+}
+
+// ============================================================================
+// Full Submission with Metadata
+// ============================================================================
+
+/** Complete submission with all associated data */
+export type SubmissionWithMeta = Submission & {
+  /** Vote counts and user state */
+  votes: SubmissionVotes
+  /** Ranking scores */
+  ranking: SubmissionRanking
+  /** Total comment count */
+  commentCount: number
+  /** Whether the submission is saved by current user */
+  isSaved: boolean
+  /** Whether hidden by current user */
+  isHidden: boolean
+  /** Approval status in moderated community */
+  approvalStatus: 'pending' | 'approved' | 'rejected' | null
+}
+
+// ============================================================================
+// Comments
+// ============================================================================
+
+/** Comment on a submission (also kind 1111) */
+export interface SubmissionComment {
+  /** Nostr event ID */
+  id: string
+  /** Author public key */
+  pubkey: string
+  /** Unix timestamp */
+  created_at: number
+  /** Comment text content */
+  content: string
+  /** Root submission ID */
+  rootId: string
+  /** Direct parent ID (submission or comment) */
+  parentId: string
+  /** Depth in comment tree (0 = top-level) */
+  depth: number
+  /** Child comments */
+  replies: SubmissionComment[]
+  /** Vote data */
+  votes: SubmissionVotes
+  /** Whether collapsed in UI */
+  isCollapsed?: boolean
+}
+
+// ============================================================================
+// Community Types (NIP-72)
+// ============================================================================
+
+/** Community moderator */
+export interface CommunityModerator {
+  pubkey: string
+  relay?: string
+  role: 'moderator' | 'admin'
+}
+
+/** Community definition (kind 34550) */
+export interface Community {
+  /** Unique identifier (d-tag) */
+  id: string
+  /** Creator public key */
+  pubkey: string
+  /** Display name */
+  name: string
+  /** Description/about */
+  description?: string
+  /** Banner/header image URL */
+  image?: string
+  /** Icon/avatar URL */
+  icon?: string
+  /** List of moderators */
+  moderators: CommunityModerator[]
+  /** Rules (markdown) */
+  rules?: string
+  /** Preferred relays */
+  relays: {
+    author?: string
+    requests?: string
+    approvals?: string
+  }
+  /** Tags/topics */
+  tags: string[]
+  /** Whether posts require approval */
+  requiresApproval: boolean
+  /** Creation timestamp */
+  created_at: number
+}
+
+/** Community reference (a-tag format) */
+export interface CommunityRef {
+  /** "34550" */
+  kind: string
+  /** Community creator pubkey */
+  pubkey: string
+  /** Community d-tag identifier */
+  identifier: string
+  /** Relay hint */
+  relay?: string
+}
+
+// ============================================================================
+// Form Types (for creating/editing)
+// ============================================================================
+
+/** Form data for creating a link submission */
+export interface LinkSubmissionForm {
+  postType: 'link'
+  title: string
+  url: string
+  body?: string
+  communityRef?: string
+  nsfw?: boolean
+  flair?: string
+}
+
+/** Form data for creating a media submission */
+export interface MediaSubmissionForm {
+  postType: 'media'
+  title: string
+  /** File to upload, or URL if already uploaded */
+  media: File | string
+  body?: string
+  alt?: string
+  communityRef?: string
+  nsfw?: boolean
+  flair?: string
+}
+
+/** Form data for creating a self/text submission */
+export interface SelfSubmissionForm {
+  postType: 'self'
+  title: string
+  body: string
+  communityRef?: string
+  nsfw?: boolean
+  flair?: string
+}
+
+/** Union type for submission forms */
+export type SubmissionForm = LinkSubmissionForm | MediaSubmissionForm | SelfSubmissionForm
+
+// ============================================================================
+// Feed Configuration
+// ============================================================================
+
+/** Configuration for fetching submissions */
+export interface SubmissionFeedConfig {
+  /** Community to filter by (optional, null = all) */
+  community?: CommunityRef | null
+  /** Sort order */
+  sort: SortType
+  /** Time range for "top" sort */
+  timeRange?: TimeRange
+  /** Filter by post type */
+  postTypes?: SubmissionType[]
+  /** Include NSFW content */
+  includeNsfw: boolean
+  /** Maximum submissions to fetch */
+  limit: number
+  /** Author filter */
+  authors?: string[]
+  /** Hashtag filter */
+  hashtags?: string[]
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+/**
+ * Parse an 'a' tag into a CommunityRef
+ * Format: "34550:<pubkey>:<identifier>"
+ */
+export function parseCommunityRef(aTag: string, relay?: string): CommunityRef | null {
+  const parts = aTag.split(':')
+  if (parts.length < 3 || parts[0] !== '34550') {
+    return null
+  }
+  return {
+    kind: parts[0],
+    pubkey: parts[1],
+    identifier: parts.slice(2).join(':'), // identifier may contain colons
+    relay
+  }
+}
+
+/**
+ * Format a CommunityRef back to 'a' tag format
+ */
+export function formatCommunityRef(ref: CommunityRef): string {
+  return `${ref.kind}:${ref.pubkey}:${ref.identifier}`
+}
+
+/**
+ * Extract domain from URL
+ */
+export function extractDomain(url: string): string {
+  try {
+    const parsed = new URL(url)
+    return parsed.hostname.replace(/^www\./, '')
+  } catch {
+    return url
+  }
+}
+
+/**
+ * Classify media type from MIME type
+ */
+export function classifyMediaType(mimeType?: string): MediaType {
+  if (!mimeType) return 'other'
+  if (mimeType.startsWith('image/')) return 'image'
+  if (mimeType.startsWith('video/')) return 'video'
+  if (mimeType.startsWith('audio/')) return 'audio'
+  return 'other'
+}
+
+/**
+ * Parse imeta tag into MediaAttachment
+ * Format: ["imeta", "url <url>", "m <mime>", "dim <WxH>", ...]
+ */
+export function parseImetaTag(tag: string[]): MediaAttachment | null {
+  if (tag[0] !== 'imeta') return null
+
+  const attachment: MediaAttachment = { url: '' }
+
+  for (let i = 1; i < tag.length; i++) {
+    const [key, ...valueParts] = tag[i].split(' ')
+    const value = valueParts.join(' ')
+
+    switch (key) {
+      case 'url':
+        attachment.url = value
+        break
+      case 'm':
+        attachment.mimeType = value
+        break
+      case 'dim':
+        attachment.dimensions = value
+        const [w, h] = value.split('x').map(Number)
+        if (!isNaN(w)) attachment.width = w
+        if (!isNaN(h)) attachment.height = h
+        break
+      case 'blurhash':
+        attachment.blurhash = value
+        break
+      case 'alt':
+        attachment.alt = value
+        break
+      case 'x':
+        attachment.hash = value
+        break
+      case 'size':
+        attachment.size = parseInt(value, 10)
+        break
+      case 'thumb':
+        attachment.thumbnail = value
+        break
+      case 'fallback':
+        attachment.fallbacks = attachment.fallbacks || []
+        attachment.fallbacks.push(value)
+        break
+    }
+  }
+
+  return attachment.url ? attachment : null
+}
+
+/**
+ * Build imeta tag from MediaAttachment
+ */
+export function buildImetaTag(media: MediaAttachment): string[] {
+  const tag = ['imeta']
+
+  tag.push(`url ${media.url}`)
+  if (media.mimeType) tag.push(`m ${media.mimeType}`)
+  if (media.dimensions) tag.push(`dim ${media.dimensions}`)
+  else if (media.width && media.height) tag.push(`dim ${media.width}x${media.height}`)
+  if (media.blurhash) tag.push(`blurhash ${media.blurhash}`)
+  if (media.alt) tag.push(`alt ${media.alt}`)
+  if (media.hash) tag.push(`x ${media.hash}`)
+  if (media.size) tag.push(`size ${media.size}`)
+  if (media.thumbnail) tag.push(`thumb ${media.thumbnail}`)
+  media.fallbacks?.forEach(fb => tag.push(`fallback ${fb}`))
+
+  return tag
+}
+
+// ============================================================================
+// Ranking Algorithms
+// ============================================================================
+
+/** Epoch for hot rank calculation (Unix timestamp) */
+const HOT_RANK_EPOCH = 1134028003 // Dec 8, 2005 (Reddit's epoch)
+
+/**
+ * Calculate hot rank score (Reddit/Lemmy style)
+ * Higher scores for posts with more upvotes that are newer
+ */
+export function calculateHotRank(score: number, createdAt: number): number {
+  const order = Math.log10(Math.max(Math.abs(score), 1))
+  const sign = score > 0 ? 1 : score < 0 ? -1 : 0
+  const seconds = createdAt - HOT_RANK_EPOCH
+  return sign * order + seconds / 45000
+}
+
+/**
+ * Calculate controversy rank
+ * Higher scores for posts with balanced up/down votes
+ */
+export function calculateControversyRank(upvotes: number, downvotes: number): number {
+  const total = upvotes + downvotes
+  if (total === 0) return 0
+
+  const magnitude = Math.pow(total, 0.8)
+  const balance = Math.min(upvotes, downvotes) / Math.max(upvotes, downvotes, 1)
+
+  return magnitude * balance
+}
+
+/**
+ * Calculate confidence score (Wilson score interval lower bound)
+ * Used for "best" comment sorting
+ */
+export function calculateConfidence(upvotes: number, downvotes: number): number {
+  const n = upvotes + downvotes
+  if (n === 0) return 0
+
+  const z = 1.96 // 95% confidence
+  const p = upvotes / n
+
+  const left = p + (z * z) / (2 * n)
+  const right = z * Math.sqrt((p * (1 - p) + (z * z) / (4 * n)) / n)
+  const under = 1 + (z * z) / n
+
+  return (left - right) / under
+}
diff --git a/src/modules/nostr-feed/views/SubmissionDetailPage.vue b/src/modules/nostr-feed/views/SubmissionDetailPage.vue
new file mode 100644
index 0000000..5350651
--- /dev/null
+++ b/src/modules/nostr-feed/views/SubmissionDetailPage.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+/**
+ * SubmissionDetailPage - Page wrapper for submission detail view
+ * Extracts route params and passes to SubmissionDetail component
+ */
+
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import SubmissionDetail from '../components/SubmissionDetail.vue'
+
+const route = useRoute()
+
+const submissionId = computed(() => route.params.id as string)
+</script>
+
+<template>
+  <SubmissionDetail :submission-id="submissionId" />
+</template>
diff --git a/src/modules/nostr-feed/views/SubmitPage.vue b/src/modules/nostr-feed/views/SubmitPage.vue
new file mode 100644
index 0000000..129208a
--- /dev/null
+++ b/src/modules/nostr-feed/views/SubmitPage.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+/**
+ * SubmitPage - Page wrapper for submission composer
+ * Handles route query params for community pre-selection
+ */
+
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import SubmitComposer from '../components/SubmitComposer.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+// Get community from query param if provided (e.g., /submit?community=...)
+const community = computed(() => route.query.community as string | undefined)
+
+// Handle submission completion
+function onSubmitted(submissionId: string) {
+  // Navigation is handled by SubmitComposer
+  console.log('Submission created:', submissionId)
+}
+
+// Handle cancel - go back
+function onCancel() {
+  router.back()
+}
+</script>
+
+<template>
+  <SubmitComposer
+    :community="community"
+    @submitted="onSubmitted"
+    @cancel="onCancel"
+  />
+</template>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 23d5c4d..84f89cb 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -1,268 +1,56 @@
 <template>
   <div class="flex flex-col h-screen bg-background">
     <PWAInstallPrompt auto-show />
-    <!-- TODO: Implement push notifications properly - currently commenting out admin notifications dialog -->
-    <!-- <NotificationPermission auto-show /> -->
 
-    <!-- Compact Header with Filters Toggle (Mobile) -->
+    <!-- Header -->
     <div class="sticky top-0 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
-      <div class="flex items-center justify-between px-4 py-2 sm:px-6">
+      <div class="max-w-4xl mx-auto flex items-center justify-between px-4 py-2 sm:px-6">
         <h1 class="text-lg font-semibold">Feed</h1>
-        <div class="flex items-center gap-2">
-          <!-- Active Filter Indicator -->
-          <div class="flex items-center gap-1 text-xs text-muted-foreground">
-            <span v-if="activeFilterCount > 0">{{ activeFilterCount }} filters</span>
-            <span v-else>All content</span>
-          </div>
-          <!-- Filter Toggle Button -->
-          <Button
-            variant="ghost"
-            size="sm"
-            @click="showFilters = !showFilters"
-            class="h-8 w-8 p-0"
-          >
-            <Filter class="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-
-      <!-- Collapsible Filter Panel -->
-      <div v-if="showFilters" class="border-t bg-background/95 backdrop-blur">
-        <div class="px-4 py-3 sm:px-6">
-          <FeedFilters v-model="selectedFilters" :admin-pubkeys="adminPubkeys" />
-        </div>
       </div>
     </div>
 
-    <!-- Main Feed Area - Takes remaining height with scrolling -->
+    <!-- Main Feed Area -->
     <div class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
-      <!-- Collapsible Composer -->
-      <div v-if="showComposer || replyTo" class="border-b bg-background sticky top-0 z-10">
-        <div class="max-h-[70vh] overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
-          <div class="px-4 py-3 sm:px-6">
-            <!-- Regular Note Composer -->
-            <NoteComposer
-              v-if="composerType === 'note' || replyTo"
-              :reply-to="replyTo"
-              @note-published="onNotePublished"
-              @clear-reply="onClearReply"
-              @close="onCloseComposer"
-            />
-
-            <!-- Rideshare Composer -->
-            <RideshareComposer
-              v-else-if="composerType === 'rideshare'"
-              @rideshare-published="onRidesharePublished"
-              @close="onCloseComposer"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- Feed Content - Natural flow with padding for sticky elements -->
-      <div>
-        <NostrFeed
-          :feed-type="feedType"
-          :content-filters="selectedFilters"
-          :admin-pubkeys="adminPubkeys"
-          :key="feedKey"
-          :compact-mode="true"
-          @reply-to-note="onReplyToNote"
+      <div class="max-w-4xl mx-auto px-4 sm:px-6">
+        <SubmissionList
+          :show-ranks="false"
+          :show-time-range="true"
+          initial-sort="hot"
+          @submission-click="onSubmissionClick"
         />
       </div>
     </div>
 
-    <!-- Floating Action Buttons for Compose -->
-    <div v-if="!showComposer && !replyTo" class="fixed bottom-6 right-6 z-50">
-      <!-- Main compose button -->
-      <div class="flex flex-col items-end gap-3">
-        <!-- Secondary buttons (when expanded) -->
-        <div v-if="showComposerOptions" class="flex flex-col gap-2">
-          <Button
-            @click="openComposer('note')"
-            size="lg"
-            class="h-12 px-4 rounded-full shadow-lg hover:shadow-xl transition-all gap-2 bg-card border-2 border-border hover:bg-accent text-card-foreground"
-          >
-            <MessageSquare class="h-4 w-4" />
-            <span class="text-sm font-medium">Note</span>
-          </Button>
-          <Button
-            @click="openComposer('rideshare')"
-            size="lg"
-            class="h-12 px-4 rounded-full shadow-lg hover:shadow-xl transition-all gap-2 bg-card border-2 border-border hover:bg-accent text-card-foreground"
-          >
-            <Car class="h-4 w-4" />
-            <span class="text-sm font-medium">Rideshare</span>
-          </Button>
-        </div>
-
-        <!-- Main FAB -->
-        <Button
-          @click="toggleComposerOptions"
-          size="lg"
-          class="h-14 w-14 rounded-full shadow-lg hover:shadow-xl transition-all bg-primary hover:bg-primary/90 border-2 border-primary-foreground/20 flex items-center justify-center p-0"
-        >
-          <Plus
-            class="h-6 w-6 stroke-[2.5] transition-transform duration-200"
-            :class="{ 'rotate-45': showComposerOptions }"
-          />
-        </Button>
-      </div>
-    </div>
-
-    <!-- Quick Filters Bar (Mobile) -->
-    <div class="md:hidden sticky bottom-0 z-30 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-t">
-      <div class="flex overflow-x-auto px-4 py-2 gap-2 scrollbar-hide">
-        <Button
-          v-for="(preset, key) in quickFilterPresets"
-          :key="key"
-          :variant="isPresetActive(key) ? 'default' : 'outline'"
-          size="sm"
-          @click="setQuickFilter(key)"
-          class="whitespace-nowrap"
-        >
-          {{ preset.label }}
-        </Button>
-      </div>
+    <!-- Floating Action Button for Create Post -->
+    <div class="fixed bottom-6 right-6 z-50">
+      <Button
+        @click="navigateToSubmit"
+        size="lg"
+        class="h-14 w-14 rounded-full shadow-lg hover:shadow-xl transition-all bg-primary hover:bg-primary/90 border-2 border-primary-foreground/20 flex items-center justify-center p-0"
+      >
+        <Plus class="h-6 w-6 stroke-[2.5]" />
+      </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-// NostrFeed is now registered globally by the nostr-feed module
-// No need to import it directly - use the modular version
-// TODO: Re-enable when push notifications are properly implemented
-// import NotificationPermission from '@/components/notifications/NotificationPermission.vue'
-import { ref, computed, watch } from 'vue'
-
+import { useRouter } from 'vue-router'
 import { Button } from '@/components/ui/button'
-import { Filter, Plus, MessageSquare, Car } from 'lucide-vue-next'
+import { Plus } from 'lucide-vue-next'
 import PWAInstallPrompt from '@/components/pwa/PWAInstallPrompt.vue'
-import FeedFilters from '@/modules/nostr-feed/components/FeedFilters.vue'
-import NoteComposer from '@/modules/nostr-feed/components/NoteComposer.vue'
-import RideshareComposer from '@/modules/nostr-feed/components/RideshareComposer.vue'
-import NostrFeed from '@/modules/nostr-feed/components/NostrFeed.vue'
-import { FILTER_PRESETS } from '@/modules/nostr-feed/config/content-filters'
-import appConfig from '@/app.config'
-import type { ContentFilter } from '@/modules/nostr-feed/services/FeedService'
-import type { ReplyToNote } from '@/modules/nostr-feed/components/NoteComposer.vue'
+import SubmissionList from '@/modules/nostr-feed/components/SubmissionList.vue'
+import type { SubmissionWithMeta } from '@/modules/nostr-feed/types/submission'
 
-// Get admin pubkeys from app config
-const adminPubkeys = appConfig.modules['nostr-feed']?.config?.adminPubkeys || []
+const router = useRouter()
 
-// UI state
-const showFilters = ref(false)
-const showComposer = ref(false)
-const showComposerOptions = ref(false)
-const composerType = ref<'note' | 'rideshare'>('note')
-
-// Feed configuration
-const selectedFilters = ref<ContentFilter[]>(FILTER_PRESETS.all)
-const feedKey = ref(0) // Force feed component to re-render when filters change
-
-// Note composer state
-const replyTo = ref<ReplyToNote | undefined>()
-
-// Quick filter presets for mobile bottom bar
-const quickFilterPresets = {
-  all: { label: 'All', filters: FILTER_PRESETS.all },
-  announcements: { label: 'Announcements', filters: FILTER_PRESETS.announcements },
-  rideshare: { label: 'Rideshare', filters: FILTER_PRESETS.rideshare }
+// Handle submission click - navigate to detail page
+function onSubmissionClick(submission: SubmissionWithMeta) {
+  router.push({ name: 'submission-detail', params: { id: submission.id } })
 }
 
-// Computed properties
-const activeFilterCount = computed(() => selectedFilters.value.length)
-
-const isPresetActive = (presetKey: string) => {
-  const preset = quickFilterPresets[presetKey as keyof typeof quickFilterPresets]
-  if (!preset) return false
-
-  return preset.filters.length === selectedFilters.value.length &&
-    preset.filters.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))
-}
-
-// Determine feed type based on selected filters
-const feedType = computed(() => {
-  if (selectedFilters.value.length === 0) return 'all'
-
-  // Check if it matches the 'all' preset
-  if (selectedFilters.value.length === FILTER_PRESETS.all.length &&
-      FILTER_PRESETS.all.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))) {
-    return 'all'
-  }
-
-  // Check if it matches the announcements preset
-  if (selectedFilters.value.length === FILTER_PRESETS.announcements.length &&
-      FILTER_PRESETS.announcements.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))) {
-    return 'announcements'
-  }
-
-  // Check if it matches the rideshare preset
-  if (selectedFilters.value.length === FILTER_PRESETS.rideshare.length &&
-      FILTER_PRESETS.rideshare.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))) {
-    return 'rideshare'
-  }
-
-  // For all other cases, use custom
-  return 'custom'
-})
-
-// Force feed to reload when filters change
-watch(selectedFilters, () => {
-  feedKey.value++
-}, { deep: true })
-
-// Handle note composer events
-// Methods
-const setQuickFilter = (presetKey: string) => {
-  const preset = quickFilterPresets[presetKey as keyof typeof quickFilterPresets]
-  if (preset) {
-    selectedFilters.value = preset.filters
-  }
-}
-
-const onNotePublished = (noteId: string) => {
-  console.log('Note published:', noteId)
-  // Refresh the feed to show the new note
-  feedKey.value++
-  // Clear reply state and hide composer
-  replyTo.value = undefined
-  showComposer.value = false
-}
-
-const onClearReply = () => {
-  replyTo.value = undefined
-  showComposer.value = false
-}
-
-const onReplyToNote = (note: ReplyToNote) => {
-  replyTo.value = note
-  showComposer.value = true
-}
-
-const onCloseComposer = () => {
-  showComposer.value = false
-  showComposerOptions.value = false
-  replyTo.value = undefined
-}
-
-// New composer methods
-const toggleComposerOptions = () => {
-  showComposerOptions.value = !showComposerOptions.value
-}
-
-const openComposer = (type: 'note' | 'rideshare') => {
-  composerType.value = type
-  showComposer.value = true
-  showComposerOptions.value = false
-}
-
-const onRidesharePublished = (noteId: string) => {
-  console.log('Rideshare post published:', noteId)
-  // Refresh the feed to show the new rideshare post
-  feedKey.value++
-  // Hide composer
-  showComposer.value = false
-  showComposerOptions.value = false
+// Navigate to submit page
+function navigateToSubmit() {
+  router.push({ name: 'submit-post' })
 }
 </script>
diff --git a/src/pages/LoginDemo.vue b/src/pages/LoginDemo.vue
new file mode 100644
index 0000000..f90aaa7
--- /dev/null
+++ b/src/pages/LoginDemo.vue
@@ -0,0 +1,231 @@
+<template>
+  <div
+    class="min-h-screen flex items-start sm:items-center justify-center px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-8 sm:py-12">
+    <div class="flex flex-col items-center justify-center space-y-3 sm:space-y-6 max-w-4xl mx-auto w-full mt-8 sm:mt-0">
+      <!-- Welcome Section -->
+      <div class="text-center space-y-2 sm:space-y-4">
+        <div class="flex justify-center">
+          <img src="@/assets/logo.png" alt="Logo" class="h-34 w-34 sm:h-42 sm:w-42 lg:h-50 lg:w-50" />
+        </div>
+        <div class="space-y-1 sm:space-y-3">
+          <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
+          <p class="text-sm sm:text-base md:text-xl text-muted-foreground max-w-md mx-auto px-4">
+            Your secure platform for events and community management
+          </p>
+        </div>
+      </div>
+
+      <!-- Demo Account Creation Card -->
+      <Card class="w-full max-w-md">
+        <CardContent class="p-4 sm:p-6 md:p-8 space-y-4 sm:space-y-6">
+          <!-- Demo Badge -->
+          <div class="flex justify-center">
+            <div
+              class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800">
+              <div class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>
+              <span class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Demo Mode</span>
+            </div>
+          </div>
+
+          <!-- Mode Toggle -->
+          <div class="flex justify-center">
+            <div class="inline-flex rounded-lg bg-muted p-1">
+              <Button variant="ghost" size="sm" :class="activeMode === 'demo' ? 'bg-background shadow-sm' : ''"
+                @click="activeMode = 'demo'">
+                Demo Account
+              </Button>
+              <Button variant="ghost" size="sm" :class="activeMode === 'login' ? 'bg-background shadow-sm' : ''"
+                @click="activeMode = 'login'">
+                Sign In
+              </Button>
+            </div>
+          </div>
+
+          <!-- Demo Mode Content -->
+          <div v-if="activeMode === 'demo'" class="space-y-4 sm:space-y-6 relative">
+            <!-- Loading Overlay -->
+            <div v-if="isLoading" class="absolute inset-0 bg-background/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center rounded-lg">
+              <div class="flex flex-col items-center gap-3 text-center px-4">
+                <div class="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
+                <div>
+                  <p class="text-sm font-medium">Creating your demo account...</p>
+                  <p class="text-xs text-muted-foreground mt-1">This will only take a moment</p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Demo Info -->
+            <div class="text-center space-y-2 sm:space-y-3">
+              <h2 class="text-lg sm:text-xl md:text-2xl font-semibold">Create Demo Account</h2>
+              <p class="text-muted-foreground text-xs sm:text-sm leading-relaxed">
+                Get instant access with a pre-funded demo account containing
+                <span class="font-semibold text-green-600 dark:text-green-400">1,000,000 FAKE satoshis</span>
+              </p>
+            </div>
+
+            <!-- Create Account Button -->
+            <Button @click="createFakeAccount" :disabled="isLoading"
+              class="w-full h-10 sm:h-12 text-base sm:text-lg font-medium" size="lg">
+              {{ 'Create Demo Account' }}
+            </Button>
+
+            <!-- Info Text -->
+            <p class="text-xs text-center text-muted-foreground">
+              Your credentials will be generated automatically
+            </p>
+          </div>
+
+          <!-- Login Mode Content -->
+          <div v-else class="space-y-4 sm:space-y-6">
+            <!-- Login Info -->
+            <div class="text-center space-y-2 sm:space-y-3">
+              <h2 class="text-lg sm:text-xl md:text-2xl font-semibold">Sign In</h2>
+              <p class="text-muted-foreground text-xs sm:text-sm leading-relaxed">
+                Sign in to your existing account
+              </p>
+            </div>
+
+            <!-- Login Form -->
+            <div class="space-y-4">
+              <div class="space-y-2">
+                <Label for="login-username">Username or Email</Label>
+                <Input id="login-username" v-model="loginForm.username" placeholder="Enter your username or email"
+                  @keydown.enter="handleLogin" />
+              </div>
+              <div class="space-y-2">
+                <Label for="login-password">Password</Label>
+                <Input id="login-password" type="password" v-model="loginForm.password"
+                  placeholder="Enter your password" @keydown.enter="handleLogin" />
+              </div>
+            </div>
+
+            <!-- Login Button -->
+            <Button @click="handleLogin" :disabled="isLoading || !canLogin"
+              class="w-full h-10 sm:h-12 text-base sm:text-lg font-medium" size="lg">
+              <span v-if="isLoading" class="animate-spin mr-2">⚡</span>
+              {{ isLoading ? 'Signing In...' : 'Sign In' }}
+            </Button>
+          </div>
+
+          <!-- Error Display -->
+          <p v-if="error" class="text-sm text-destructive text-center">
+            {{ error }}
+          </p>
+
+          <!-- Success Message -->
+          <div v-if="successMessage"
+            class="text-sm text-green-600 dark:text-green-400 text-center bg-green-50 dark:bg-green-950/20 p-3 rounded-lg border border-green-200 dark:border-green-800">
+            {{ successMessage }}
+          </div>
+
+          <!-- Demo Notice -->
+          <div class="text-center space-y-2">
+            <p class="text-xs text-muted-foreground">
+              This is a demo environment. All transactions use fake satoshis for testing purposes.
+            </p>
+            <div class="flex items-center justify-center gap-1 text-xs text-amber-600 dark:text-amber-400">
+              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd"
+                  d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                  clip-rule="evenodd" />
+              </svg>
+              <span class="font-medium">Demo data may be erased at any time</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { auth } from '@/composables/useAuthService'
+import { useDemoAccountGenerator } from '@/composables/useDemoAccountGenerator'
+import { toast } from 'vue-sonner'
+
+const router = useRouter()
+const { isLoading, error, generateNewCredentials } = useDemoAccountGenerator()
+const successMessage = ref('')
+const activeMode = ref<'demo' | 'login'>('demo')
+
+// Login form
+const loginForm = ref({
+  username: '',
+  password: ''
+})
+
+const canLogin = computed(() => {
+  return loginForm.value.username.trim() && loginForm.value.password.trim()
+})
+
+// Create fake account and automatically log in
+async function createFakeAccount() {
+  try {
+    isLoading.value = true
+    error.value = ''
+    successMessage.value = ''
+
+    // Generate credentials
+    const credentials = generateNewCredentials()
+
+    // Register the fake account
+    await auth.register({
+      username: credentials.username,
+      email: credentials.email,
+      password: credentials.password,
+      password_repeat: credentials.password
+    })
+
+    // Show success with username
+    successMessage.value = `Account created! Username: ${credentials.username}`
+    toast.success(`Logged in as ${credentials.username}!`)
+
+    // Redirect to home page after successful registration
+    setTimeout(() => {
+      router.push('/')
+    }, 2000)
+
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to create demo account'
+    toast.error('Failed to create demo account. Please try again.')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Login with existing credentials
+async function handleLogin() {
+  if (!canLogin.value) return
+
+  try {
+    isLoading.value = true
+    error.value = ''
+    successMessage.value = ''
+
+    await auth.login({
+      username: loginForm.value.username,
+      password: loginForm.value.password
+    })
+
+    successMessage.value = 'Login successful! Redirecting...'
+    toast.success('Login successful!')
+
+    // Redirect to home page after successful login
+    setTimeout(() => {
+      router.push('/')
+    }, 1500)
+
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Login failed'
+    toast.error('Login failed. Please check your credentials.')
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>
diff --git a/target-ui.md b/target-ui.md
new file mode 100644
index 0000000..7b8e802
--- /dev/null
+++ b/target-ui.md
@@ -0,0 +1,216 @@
+<template>
+  <!--
+    This example requires updating your template:
+
+    ```
+    <html class="h-full bg-white dark:bg-gray-900">
+    <body class="h-full">
+    ```
+  -->
+  <div>
+    <TransitionRoot as="template" :show="sidebarOpen">
+      <Dialog class="relative z-50 lg:hidden" @close="sidebarOpen = false">
+        <TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0" enter-to="" leave="transition-opacity ease-linear duration-300" leave-from="" leave-to="opacity-0">
+          <div class="fixed inset-0 bg-gray-900/80"></div>
+        </TransitionChild>
+
+        <div class="fixed inset-0 flex">
+          <TransitionChild as="template" enter="transition ease-in-out duration-300 transform" enter-from="-translate-x-full" enter-to="translate-x-0" leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0" leave-to="-translate-x-full">
+            <DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
+              <TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0" enter-to="" leave="ease-in-out duration-300" leave-from="" leave-to="opacity-0">
+                <div class="absolute left-full top-0 flex w-16 justify-center pt-5">
+                  <button type="button" class="-m-2.5 p-2.5" @click="sidebarOpen = false">
+                    <span class="sr-only">Close sidebar</span>
+                    <XMarkIcon class="size-6 text-white" aria-hidden="true" />
+                  </button>
+                </div>
+              </TransitionChild>
+
+              <!-- Sidebar component, swap this element with another sidebar if you like -->
+              <div class="relative flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 pb-4 dark:bg-gray-900 dark:ring dark:ring-white/10 dark:before:pointer-events-none dark:before:absolute dark:before:inset-0 dark:before:bg-black/10">
+                <div class="relative flex h-16 shrink-0 items-center">
+                  <img class="h-8 w-auto dark:hidden" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company" />
+                  <img class="hidden h-8 w-auto dark:block" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
+                </div>
+                <nav class="relative flex flex-1 flex-col">
+                  <ul role="list" class="flex flex-1 flex-col gap-y-7">
+                    <li>
+                      <ul role="list" class="-mx-2 space-y-1">
+                        <li v-for="item in navigation" :key="item.name">
+                          <a :href="item.href" :class="[item.current ? 'bg-gray-50 text-indigo-600 dark:bg-white/5 dark:text-white' : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white', 'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold']">
+                            <component :is="item.icon" :class="[item.current ? 'text-indigo-600 dark:text-white' : 'text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-white', 'size-6 shrink-0']" aria-hidden="true" />
+                            {{ item.name }}
+                          </a>
+                        </li>
+                      </ul>
+                    </li>
+                    <li>
+                      <div class="text-xs/6 font-semibold text-gray-400">Your teams</div>
+                      <ul role="list" class="-mx-2 mt-2 space-y-1">
+                        <li v-for="team in teams" :key="team.name">
+                          <a :href="team.href" :class="[team.current ? 'bg-gray-50 text-indigo-600 dark:bg-white/5 dark:text-white' : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white', 'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold']">
+                            <span :class="[team.current ? 'border-indigo-600 text-indigo-600 dark:border-white/20 dark:text-white' : 'border-gray-200 text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600 dark:border-white/10 dark:group-hover:border-white/20 dark:group-hover:text-white', 'flex size-6 shrink-0 items-center justify-center rounded-lg border bg-white text-[0.625rem] font-medium dark:bg-white/5']">{{ team.initial }}</span>
+                            <span class="truncate">{{ team.name }}</span>
+                          </a>
+                        </li>
+                      </ul>
+                    </li>
+                    <li class="mt-auto">
+                      <a href="#" class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white">
+                        <Cog6ToothIcon class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-white" aria-hidden="true" />
+                        Settings
+                      </a>
+                    </li>
+                  </ul>
+                </nav>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
+    <!-- Static sidebar for desktop -->
+    <div class="hidden bg-gray-900 lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
+      <!-- Sidebar component, swap this element with another sidebar if you like -->
+      <div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6 pb-4 dark:border-white/10 dark:bg-black/10">
+        <div class="flex h-16 shrink-0 items-center">
+          <img class="h-8 w-auto dark:hidden" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company" />
+          <img class="hidden h-8 w-auto dark:block" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
+        </div>
+        <nav class="flex flex-1 flex-col">
+          <ul role="list" class="flex flex-1 flex-col gap-y-7">
+            <li>
+              <ul role="list" class="-mx-2 space-y-1">
+                <li v-for="item in navigation" :key="item.name">
+                  <a :href="item.href" :class="[item.current ? 'bg-gray-50 text-indigo-600 dark:bg-white/5 dark:text-white' : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white', 'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold']">
+                    <component :is="item.icon" :class="[item.current ? 'text-indigo-600 dark:text-white' : 'text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-white', 'size-6 shrink-0']" aria-hidden="true" />
+                    {{ item.name }}
+                  </a>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <div class="text-xs/6 font-semibold text-gray-400">Your teams</div>
+              <ul role="list" class="-mx-2 mt-2 space-y-1">
+                <li v-for="team in teams" :key="team.name">
+                  <a :href="team.href" :class="[team.current ? 'bg-gray-50 text-indigo-600 dark:bg-white/5 dark:text-white' : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white', 'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold']">
+                    <span :class="[team.current ? 'border-indigo-600 text-indigo-600 dark:border-white/20 dark:text-white' : 'border-gray-200 text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600 dark:border-white/10 dark:group-hover:border-white/20 dark:group-hover:text-white', 'flex size-6 shrink-0 items-center justify-center rounded-lg border bg-white text-[0.625rem] font-medium dark:bg-white/5']">{{ team.initial }}</span>
+                    <span class="truncate">{{ team.name }}</span>
+                  </a>
+                </li>
+              </ul>
+            </li>
+            <li class="mt-auto">
+              <a href="#" class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white">
+                <Cog6ToothIcon class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-white" aria-hidden="true" />
+                Settings
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+
+    <div class="lg:pl-72">
+      <div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8 dark:border-white/10 dark:bg-gray-900 dark:shadow-none">
+        <button type="button" class="-m-2.5 p-2.5 text-gray-700 hover:text-gray-900 lg:hidden dark:text-gray-400 dark:hover:text-white" @click="sidebarOpen = true">
+          <span class="sr-only">Open sidebar</span>
+          <Bars3Icon class="size-6" aria-hidden="true" />
+        </button>
+
+        <!-- Separator -->
+        <div class="h-6 w-px bg-gray-200 lg:hidden dark:bg-white/10" aria-hidden="true"></div>
+
+        <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
+          <form class="grid flex-1 grid-cols-1" action="#" method="GET">
+            <input name="search" aria-label="Search" class="col-start-1 row-start-1 block size-full bg-white pl-8 text-base text-gray-900 outline-none placeholder:text-gray-400 sm:text-sm/6 dark:bg-gray-900 dark:text-white dark:placeholder:text-gray-500" placeholder="Search" />
+            <MagnifyingGlassIcon class="pointer-events-none col-start-1 row-start-1 size-5 self-center text-gray-400" aria-hidden="true" />
+          </form>
+          <div class="flex items-center gap-x-4 lg:gap-x-6">
+            <button type="button" class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500 dark:hover:text-white">
+              <span class="sr-only">View notifications</span>
+              <BellIcon class="size-6" aria-hidden="true" />
+            </button>
+
+            <!-- Separator -->
+            <div class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-200 dark:lg:bg-white/10" aria-hidden="true"></div>
+
+            <!-- Profile dropdown -->
+            <Menu as="div" class="relative">
+              <MenuButton class="relative flex items-center">
+                <span class="absolute -inset-1.5"></span>
+                <span class="sr-only">Open user menu</span>
+                <img class="size-8 rounded-full bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-800 dark:outline-white/10" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
+                <span class="hidden lg:flex lg:items-center">
+                  <span class="ml-4 text-sm/6 font-semibold text-gray-900 dark:text-white" aria-hidden="true">Tom Cook</span>
+                  <ChevronDownIcon class="ml-2 size-5 text-gray-400 dark:text-gray-500" aria-hidden="true" />
+                </span>
+              </MenuButton>
+              <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform scale-100" leave-to-class="transform opacity-0 scale-95">
+                <MenuItems class="absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg outline outline-1 outline-gray-900/5 dark:bg-gray-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
+                  <MenuItem v-for="item in userNavigation" :key="item.name" v-slot="{ active }">
+                    <a :href="item.href" :class="[active ? 'bg-gray-50 outline-none dark:bg-white/5' : '', 'block px-3 py-1 text-sm/6 text-gray-900 dark:text-white']">{{ item.name }}</a>
+                  </MenuItem>
+                </MenuItems>
+              </transition>
+            </Menu>
+          </div>
+        </div>
+      </div>
+
+      <main class="py-10">
+        <div class="px-4 sm:px-6 lg:px-8">
+          <!-- Your content -->
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import {
+  Dialog,
+  DialogPanel,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+  TransitionChild,
+  TransitionRoot,
+} from '@headlessui/vue'
+import {
+  Bars3Icon,
+  BellIcon,
+  CalendarIcon,
+  ChartPieIcon,
+  Cog6ToothIcon,
+  DocumentDuplicateIcon,
+  FolderIcon,
+  HomeIcon,
+  UsersIcon,
+  XMarkIcon,
+} from '@heroicons/vue/24/outline'
+import { ChevronDownIcon, MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
+
+const navigation = [
+  { name: 'Dashboard', href: '#', icon: HomeIcon, current: true },
+  { name: 'Team', href: '#', icon: UsersIcon, current: false },
+  { name: 'Projects', href: '#', icon: FolderIcon, current: false },
+  { name: 'Calendar', href: '#', icon: CalendarIcon, current: false },
+  { name: 'Documents', href: '#', icon: DocumentDuplicateIcon, current: false },
+  { name: 'Reports', href: '#', icon: ChartPieIcon, current: false },
+]
+const teams = [
+  { id: 1, name: 'Heroicons', href: '#', initial: 'H', current: false },
+  { id: 2, name: 'Tailwind Labs', href: '#', initial: 'T', current: false },
+  { id: 3, name: 'Workcation', href: '#', initial: 'W', current: false },
+]
+const userNavigation = [
+  { name: 'Your profile', href: '#' },
+  { name: 'Sign out', href: '#' },
+]
+
+const sidebarOpen = ref(false)
+</script>