From e5f26f4b1f39abf0cc7ba85be34046e9ac5ea815 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Mon, 15 Jun 2026 21:24:25 +0700
Subject: [PATCH] Revert "fix: resolve Zod compatibility issues for clean
 build"

This reverts commit be47816c6447e5f620287275e670cc32eac02bb5.


Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 package.json                                  |    3 +-
 src/components/AppProvider.tsx                |    4 +-
 src/src/App.test.tsx                          |    8 +
 src/src/App.tsx                               |   79 +
 src/src/AppRouter.tsx                         |   95 +
 src/src/components/AddPhotoToSpot.tsx         |  234 ++
 src/src/components/AddTagsToSpot.tsx          |  181 ++
 src/src/components/AddToCollectionDialog.tsx  |  267 ++
 src/src/components/AppProvider.tsx            |  149 ++
 src/src/components/BackupReminder.tsx         |  144 ++
 src/src/components/CameraCapture.tsx          |  313 +++
 src/src/components/EditProfileForm.tsx        |  373 +++
 src/src/components/ErrorBoundary.tsx          |  113 +
 src/src/components/EventCard.tsx              |  308 +++
 src/src/components/FollowListManager.tsx      |  276 ++
 src/src/components/FounderFollow.tsx          |  320 +++
 src/src/components/GearSwapItemCard.tsx       |  296 +++
 src/src/components/LanguageToggle.tsx         |  122 +
 src/src/components/Layout.tsx                 |  769 ++++++
 src/src/components/MarketplaceItemCard.tsx    |  564 +++++
 src/src/components/MyDataTab.tsx              |  792 ++++++
 src/src/components/NostrProvider.tsx          |  113 +
 src/src/components/NostrSync.tsx              |  251 ++
 src/src/components/NoteContent.test.tsx       |  136 +
 src/src/components/NoteContent.tsx            |  137 +
 src/src/components/OfflineIndicator.tsx       |  115 +
 src/src/components/PWAInstallPrompt.tsx       |  351 +++
 src/src/components/QualityMeter.tsx           |  231 ++
 src/src/components/RelatrSettings.tsx         |  288 +++
 src/src/components/RelayListManager.tsx       |  365 +++
 src/src/components/ReportDialog.tsx           |  314 +++
 src/src/components/SasquatchGuide.tsx         |  451 ++++
 src/src/components/ScrollToTop.tsx            |   12 +
 src/src/components/SecuritySettings.tsx       |  330 +++
 src/src/components/SetStatusDialog.tsx        |  360 +++
 src/src/components/ShopBountyCard.tsx         |  192 ++
 src/src/components/SortDropdown.tsx           |  148 ++
 src/src/components/SpamFeePayment.tsx         |  320 +++
 src/src/components/SponsorSlot.tsx            |  160 ++
 src/src/components/SpotCard.tsx               |  245 ++
 src/src/components/SpotMap.tsx                | 1099 ++++++++
 src/src/components/SpotOwnership.tsx          |  355 +++
 src/src/components/SpotPicker.tsx             |  198 ++
 src/src/components/TagInput.tsx               |  195 ++
 src/src/components/ThemeToggle.tsx            |   19 +
 src/src/components/TourCard.tsx               |  452 ++++
 src/src/components/TrustBadge.tsx             |   78 +
 src/src/components/TrustFilter.tsx            |  161 ++
 src/src/components/UserStatusIndicator.tsx    |   94 +
 src/src/components/WalletModal.tsx            |  404 +++
 src/src/components/WeatherToggle.tsx          |   36 +
 src/src/components/WhosSkating.tsx            |  138 +
 src/src/components/ZapButton.tsx              |   58 +
 src/src/components/ZapDialog.tsx              |  700 ++++++
 src/src/components/auth/AccountSwitcher.tsx   |  107 +
 .../components/auth/AmberCallbackHandler.tsx  |  229 ++
 src/src/components/auth/LoginArea.tsx         |  116 +
 src/src/components/auth/LoginDialog.tsx       |  501 ++++
 .../components/auth/MnemonicSignupDialog.tsx  |  453 ++++
 src/src/components/auth/SignupDialog.tsx      |  845 +++++++
 .../components/auth/SignupMethodDialog.tsx    |  141 ++
 src/src/components/comments/Comment.tsx       |  174 ++
 src/src/components/comments/CommentForm.tsx   |   90 +
 .../components/comments/CommentsSection.tsx   |  100 +
 .../components/onboarding/RelayEducation.tsx  |  307 +++
 src/src/components/ui/accordion.tsx           |   56 +
 src/src/components/ui/alert-dialog.tsx        |  139 ++
 src/src/components/ui/alert.tsx               |   59 +
 src/src/components/ui/aspect-ratio.tsx        |    5 +
 src/src/components/ui/avatar.tsx              |   48 +
 src/src/components/ui/badge-variants.ts       |   21 +
 src/src/components/ui/badge.tsx               |   17 +
 src/src/components/ui/breadcrumb.tsx          |  115 +
 src/src/components/ui/button-variants.ts      |   30 +
 src/src/components/ui/button.tsx              |   28 +
 src/src/components/ui/calendar.tsx            |   64 +
 src/src/components/ui/card.tsx                |   79 +
 src/src/components/ui/carousel.tsx            |  260 ++
 src/src/components/ui/chart.tsx               |  363 +++
 src/src/components/ui/checkbox.tsx            |   28 +
 src/src/components/ui/collapsible.tsx         |    9 +
 src/src/components/ui/command.tsx             |  153 ++
 src/src/components/ui/context-menu.tsx        |  198 ++
 src/src/components/ui/dialog.tsx              |  120 +
 src/src/components/ui/drawer.tsx              |  116 +
 src/src/components/ui/dropdown-menu.tsx       |  198 ++
 src/src/components/ui/form-utils.ts           |   48 +
 src/src/components/ui/form.tsx                |  133 +
 src/src/components/ui/hover-card.tsx          |   27 +
 src/src/components/ui/input-otp.tsx           |   69 +
 src/src/components/ui/input.tsx               |   22 +
 src/src/components/ui/label.tsx               |   24 +
 src/src/components/ui/menubar.tsx             |  234 ++
 .../components/ui/navigation-menu-variants.ts |    5 +
 src/src/components/ui/navigation-menu.tsx     |  123 +
 src/src/components/ui/pagination.tsx          |  118 +
 src/src/components/ui/popover.tsx             |   29 +
 src/src/components/ui/progress.tsx            |   26 +
 src/src/components/ui/radio-group.tsx         |   42 +
 src/src/components/ui/resizable.tsx           |   43 +
 src/src/components/ui/scroll-area.tsx         |   46 +
 src/src/components/ui/select.tsx              |  158 ++
 src/src/components/ui/separator.tsx           |   29 +
 src/src/components/ui/sheet.tsx               |  131 +
 src/src/components/ui/sidebar-utils.ts        |   52 +
 src/src/components/ui/sidebar.tsx             |  724 ++++++
 src/src/components/ui/skeleton.tsx            |   15 +
 src/src/components/ui/slider.tsx              |   26 +
 src/src/components/ui/switch.tsx              |   27 +
 src/src/components/ui/table.tsx               |  117 +
 src/src/components/ui/tabs.tsx                |   53 +
 src/src/components/ui/textarea.tsx            |   23 +
 src/src/components/ui/toast.tsx               |  127 +
 src/src/components/ui/toaster.tsx             |   33 +
 src/src/components/ui/toggle-group.tsx        |   59 +
 src/src/components/ui/toggle-variants.ts      |   23 +
 src/src/components/ui/toggle.tsx              |   22 +
 src/src/components/ui/tooltip.tsx             |   28 +
 src/src/components/wallet/CashuWallet.tsx     |  644 +++++
 src/src/components/wallet/CashuWalletCard.tsx |  690 +++++
 .../wallet/LightningPrivacyTips.tsx           |  226 ++
 .../components/wallet/MintPrivacyManager.tsx  |  486 ++++
 src/src/components/wallet/QRScannerModal.tsx  |  145 ++
 .../wallet/WalletComparisonGuide.tsx          |  188 ++
 src/src/contexts/AppContext.ts                |   32 +
 src/src/contexts/LanguageContext.tsx          |  143 ++
 src/src/contexts/NWCContext.tsx               |    8 +
 src/src/hooks/&1                              |    0
 src/src/hooks/useAppContext.ts                |   14 +
 src/src/hooks/useAuthor.ts                    |   64 +
 src/src/hooks/useBTCMap.ts                    |  139 ++
 src/src/hooks/useBatchTrustScores.ts          |  123 +
 src/src/hooks/useBtcMapPlaces.ts              |   78 +
 src/src/hooks/useCoaches.ts                   |  118 +
 src/src/hooks/useComments.ts                  |   98 +
 src/src/hooks/useCurrentUser.ts               |   59 +
 src/src/hooks/useDirectMessages.ts            |  721 ++++++
 src/src/hooks/useExchangeRate.ts              |   41 +
 src/src/hooks/useFollowList.ts                |   29 +
 src/src/hooks/useFollowing.ts                 |  247 ++
 src/src/hooks/useFoodSpots.ts                 |  107 +
 src/src/hooks/useIsMobile.tsx                 |   19 +
 src/src/hooks/useLabProfiles.ts               |  104 +
 src/src/hooks/useLightningAddress.ts          |   38 +
 src/src/hooks/useListingReports.ts            |  192 ++
 src/src/hooks/useListingRestrictions.ts       |  270 ++
 src/src/hooks/useLocalStorage.ts              |   54 +
 src/src/hooks/useLoggedInAccounts.ts          |   91 +
 src/src/hooks/useLoginActions.ts              |   69 +
 src/src/hooks/useMarketplace.ts               |   87 +
 src/src/hooks/useNWC.ts                       |  221 ++
 src/src/hooks/useNWCContext.ts                |   15 +
 src/src/hooks/useNoGoodRadio.ts               |   41 +
 src/src/hooks/useNostr.ts                     |    6 +
 src/src/hooks/useNostrPublish.ts              |  119 +
 src/src/hooks/useNutzap.ts                    |  334 +++
 src/src/hooks/useOfflineCache.ts              |  249 ++
 src/src/hooks/usePostComment.ts               |   92 +
 src/src/hooks/useQRCodeScanner.ts             |  175 ++
 src/src/hooks/useRelatrScore.ts               |  243 ++
 src/src/hooks/useSasquatchGuide.ts            |  195 ++
 src/src/hooks/useSellerInfo.ts                |  161 ++
 src/src/hooks/useSellerSales.ts               |  149 ++
 src/src/hooks/useShops.ts                     |  214 ++
 src/src/hooks/useSkateEvents.ts               |  105 +
 src/src/hooks/useSkateRelays.ts               |  140 ++
 src/src/hooks/useSkateShops.ts                |   71 +
 src/src/hooks/useSkateSpots.ts                |  154 ++
 src/src/hooks/useSpotCollections.ts           |  372 +++
 src/src/hooks/useSpotContributions.ts         |  175 ++
 src/src/hooks/useSpotServices.ts              |   69 +
 src/src/hooks/useSpotWeather.ts               |  111 +
 src/src/hooks/useStash.ts                     |  271 ++
 src/src/hooks/useTheme.ts                     |   20 +
 src/src/hooks/useToast.ts                     |  182 ++
 src/src/hooks/useTours.ts                     |  123 +
 src/src/hooks/useTrustScore.ts                |  143 ++
 src/src/hooks/useUploadFile.ts                |   26 +
 src/src/hooks/useUserStatus.ts                |  293 +++
 src/src/hooks/useWallet.ts                    |   41 +
 src/src/hooks/useZaps.ts                      |  350 +++
 src/src/hooks/wallet/useCashu.ts              |  251 ++
 src/src/hooks/wallet/useHistoryManager.ts     |  106 +
 .../hooks/wallet/useLightningOperations.ts    |  156 ++
 src/src/hooks/wallet/useMintManager.ts        |  187 ++
 src/src/hooks/wallet/useTokenOperations.ts    |  167 ++
 src/src/i18n/en.ts                            |  799 ++++++
 src/src/i18n/es.ts                            |  800 ++++++
 src/src/index.css                             |  385 +++
 src/src/lib/amber.ts                          |  495 ++++
 src/src/lib/exchangeRateService.ts            |  140 ++
 src/src/lib/genUserName.test.ts               |   33 +
 src/src/lib/genUserName.ts                    |   34 +
 src/src/lib/lightningAddress.ts               |  162 ++
 src/src/lib/nip06.test.ts                     |  173 ++
 src/src/lib/nip06.ts                          |  107 +
 src/src/lib/offlineCache.ts                   |  301 +++
 src/src/lib/polyfills.ts                      |   90 +
 src/src/lib/relatr.ts                         |  188 ++
 src/src/lib/skateTags.ts                      |  424 ++++
 src/src/lib/skateboardRating.ts               |  144 ++
 src/src/lib/types.ts                          | 1238 +++++++++
 src/src/lib/utils.ts                          |    6 +
 src/src/lib/wallet/qrCodeGenerator.ts         |   25 +
 src/src/lib/weather.ts                        |  347 +++
 src/src/main.tsx                              |   47 +
 src/src/pages/AboutPage.tsx                   |  263 ++
 src/src/pages/BecomeCoachPage.tsx             |  438 ++++
 src/src/pages/BecomeFilmerPage.tsx            |  474 ++++
 src/src/pages/BountyLeaderboardPage.tsx       |  483 ++++
 src/src/pages/CoachDetailPage.tsx             |  287 +++
 src/src/pages/CollectionDetailPage.tsx        |  401 +++
 src/src/pages/CommunityStatsPage.tsx          |  520 ++++
 src/src/pages/ConversationPage.tsx            |  288 +++
 src/src/pages/CreateEventPage.tsx             |  889 +++++++
 src/src/pages/CreateListingPage.tsx           | 1086 ++++++++
 src/src/pages/CreateShopPage.tsx              |  509 ++++
 src/src/pages/CreateSpotPage.tsx              |  645 +++++
 src/src/pages/CreateTourPage.tsx              | 2215 +++++++++++++++++
 src/src/pages/DirectMessagesPage.tsx          |  326 +++
 src/src/pages/EditEventPage.tsx               |  572 +++++
 src/src/pages/EditShopPage.tsx                |  564 +++++
 src/src/pages/EditSpotPage.tsx                |  641 +++++
 src/src/pages/EventDetailPage.tsx             |  368 +++
 src/src/pages/EventsPage.tsx                  |  613 +++++
 src/src/pages/FAQPage.tsx                     |  302 +++
 src/src/pages/FoodPage.tsx                    |  280 +++
 src/src/pages/GearSwapPage.tsx                |  444 ++++
 src/src/pages/Index.tsx                       |  585 +++++
 src/src/pages/LabPage.tsx                     |  407 +++
 src/src/pages/MapPage.tsx                     | 1170 +++++++++
 src/src/pages/MarketplacePage.tsx             |  218 ++
 src/src/pages/NIP19Page.tsx                   |  378 +++
 src/src/pages/NotFound.tsx                    |   33 +
 src/src/pages/OnboardingPage.tsx              |  618 +++++
 src/src/pages/PyramidPage.tsx                 |  204 ++
 src/src/pages/SettingsPage.tsx                |  634 +++++
 src/src/pages/ShopDetailPage.tsx              |  485 ++++
 src/src/pages/SignersPage.tsx                 |  376 +++
 src/src/pages/SpotCollectionsPage.tsx         |  500 ++++
 src/src/pages/SpotDetailPage.tsx              |  961 +++++++
 src/src/pages/StashPage.tsx                   | 1656 ++++++++++++
 src/src/pages/TourDetailPage.tsx              |  373 +++
 src/src/pages/WalletPage.tsx                  |  355 +++
 src/src/test/ErrorBoundary.test.tsx           |   60 +
 src/src/test/TestApp.tsx                      |   56 +
 src/src/test/setup.ts                         |   40 +
 src/src/vite-env.d.ts                         |    8 +
 248 files changed, 60432 insertions(+), 3 deletions(-)
 create mode 100644 src/src/App.test.tsx
 create mode 100644 src/src/App.tsx
 create mode 100644 src/src/AppRouter.tsx
 create mode 100644 src/src/components/AddPhotoToSpot.tsx
 create mode 100644 src/src/components/AddTagsToSpot.tsx
 create mode 100644 src/src/components/AddToCollectionDialog.tsx
 create mode 100644 src/src/components/AppProvider.tsx
 create mode 100644 src/src/components/BackupReminder.tsx
 create mode 100644 src/src/components/CameraCapture.tsx
 create mode 100644 src/src/components/EditProfileForm.tsx
 create mode 100644 src/src/components/ErrorBoundary.tsx
 create mode 100644 src/src/components/EventCard.tsx
 create mode 100644 src/src/components/FollowListManager.tsx
 create mode 100644 src/src/components/FounderFollow.tsx
 create mode 100644 src/src/components/GearSwapItemCard.tsx
 create mode 100644 src/src/components/LanguageToggle.tsx
 create mode 100644 src/src/components/Layout.tsx
 create mode 100644 src/src/components/MarketplaceItemCard.tsx
 create mode 100644 src/src/components/MyDataTab.tsx
 create mode 100644 src/src/components/NostrProvider.tsx
 create mode 100644 src/src/components/NostrSync.tsx
 create mode 100644 src/src/components/NoteContent.test.tsx
 create mode 100644 src/src/components/NoteContent.tsx
 create mode 100644 src/src/components/OfflineIndicator.tsx
 create mode 100644 src/src/components/PWAInstallPrompt.tsx
 create mode 100644 src/src/components/QualityMeter.tsx
 create mode 100644 src/src/components/RelatrSettings.tsx
 create mode 100644 src/src/components/RelayListManager.tsx
 create mode 100644 src/src/components/ReportDialog.tsx
 create mode 100644 src/src/components/SasquatchGuide.tsx
 create mode 100644 src/src/components/ScrollToTop.tsx
 create mode 100644 src/src/components/SecuritySettings.tsx
 create mode 100644 src/src/components/SetStatusDialog.tsx
 create mode 100644 src/src/components/ShopBountyCard.tsx
 create mode 100644 src/src/components/SortDropdown.tsx
 create mode 100644 src/src/components/SpamFeePayment.tsx
 create mode 100644 src/src/components/SponsorSlot.tsx
 create mode 100644 src/src/components/SpotCard.tsx
 create mode 100644 src/src/components/SpotMap.tsx
 create mode 100644 src/src/components/SpotOwnership.tsx
 create mode 100644 src/src/components/SpotPicker.tsx
 create mode 100644 src/src/components/TagInput.tsx
 create mode 100644 src/src/components/ThemeToggle.tsx
 create mode 100644 src/src/components/TourCard.tsx
 create mode 100644 src/src/components/TrustBadge.tsx
 create mode 100644 src/src/components/TrustFilter.tsx
 create mode 100644 src/src/components/UserStatusIndicator.tsx
 create mode 100644 src/src/components/WalletModal.tsx
 create mode 100644 src/src/components/WeatherToggle.tsx
 create mode 100644 src/src/components/WhosSkating.tsx
 create mode 100644 src/src/components/ZapButton.tsx
 create mode 100644 src/src/components/ZapDialog.tsx
 create mode 100644 src/src/components/auth/AccountSwitcher.tsx
 create mode 100644 src/src/components/auth/AmberCallbackHandler.tsx
 create mode 100644 src/src/components/auth/LoginArea.tsx
 create mode 100644 src/src/components/auth/LoginDialog.tsx
 create mode 100644 src/src/components/auth/MnemonicSignupDialog.tsx
 create mode 100644 src/src/components/auth/SignupDialog.tsx
 create mode 100644 src/src/components/auth/SignupMethodDialog.tsx
 create mode 100644 src/src/components/comments/Comment.tsx
 create mode 100644 src/src/components/comments/CommentForm.tsx
 create mode 100644 src/src/components/comments/CommentsSection.tsx
 create mode 100644 src/src/components/onboarding/RelayEducation.tsx
 create mode 100644 src/src/components/ui/accordion.tsx
 create mode 100644 src/src/components/ui/alert-dialog.tsx
 create mode 100644 src/src/components/ui/alert.tsx
 create mode 100644 src/src/components/ui/aspect-ratio.tsx
 create mode 100644 src/src/components/ui/avatar.tsx
 create mode 100644 src/src/components/ui/badge-variants.ts
 create mode 100644 src/src/components/ui/badge.tsx
 create mode 100644 src/src/components/ui/breadcrumb.tsx
 create mode 100644 src/src/components/ui/button-variants.ts
 create mode 100644 src/src/components/ui/button.tsx
 create mode 100644 src/src/components/ui/calendar.tsx
 create mode 100644 src/src/components/ui/card.tsx
 create mode 100644 src/src/components/ui/carousel.tsx
 create mode 100644 src/src/components/ui/chart.tsx
 create mode 100644 src/src/components/ui/checkbox.tsx
 create mode 100644 src/src/components/ui/collapsible.tsx
 create mode 100644 src/src/components/ui/command.tsx
 create mode 100644 src/src/components/ui/context-menu.tsx
 create mode 100644 src/src/components/ui/dialog.tsx
 create mode 100644 src/src/components/ui/drawer.tsx
 create mode 100644 src/src/components/ui/dropdown-menu.tsx
 create mode 100644 src/src/components/ui/form-utils.ts
 create mode 100644 src/src/components/ui/form.tsx
 create mode 100644 src/src/components/ui/hover-card.tsx
 create mode 100644 src/src/components/ui/input-otp.tsx
 create mode 100644 src/src/components/ui/input.tsx
 create mode 100644 src/src/components/ui/label.tsx
 create mode 100644 src/src/components/ui/menubar.tsx
 create mode 100644 src/src/components/ui/navigation-menu-variants.ts
 create mode 100644 src/src/components/ui/navigation-menu.tsx
 create mode 100644 src/src/components/ui/pagination.tsx
 create mode 100644 src/src/components/ui/popover.tsx
 create mode 100644 src/src/components/ui/progress.tsx
 create mode 100644 src/src/components/ui/radio-group.tsx
 create mode 100644 src/src/components/ui/resizable.tsx
 create mode 100644 src/src/components/ui/scroll-area.tsx
 create mode 100644 src/src/components/ui/select.tsx
 create mode 100644 src/src/components/ui/separator.tsx
 create mode 100644 src/src/components/ui/sheet.tsx
 create mode 100644 src/src/components/ui/sidebar-utils.ts
 create mode 100644 src/src/components/ui/sidebar.tsx
 create mode 100644 src/src/components/ui/skeleton.tsx
 create mode 100644 src/src/components/ui/slider.tsx
 create mode 100644 src/src/components/ui/switch.tsx
 create mode 100644 src/src/components/ui/table.tsx
 create mode 100644 src/src/components/ui/tabs.tsx
 create mode 100644 src/src/components/ui/textarea.tsx
 create mode 100644 src/src/components/ui/toast.tsx
 create mode 100644 src/src/components/ui/toaster.tsx
 create mode 100644 src/src/components/ui/toggle-group.tsx
 create mode 100644 src/src/components/ui/toggle-variants.ts
 create mode 100644 src/src/components/ui/toggle.tsx
 create mode 100644 src/src/components/ui/tooltip.tsx
 create mode 100644 src/src/components/wallet/CashuWallet.tsx
 create mode 100644 src/src/components/wallet/CashuWalletCard.tsx
 create mode 100644 src/src/components/wallet/LightningPrivacyTips.tsx
 create mode 100644 src/src/components/wallet/MintPrivacyManager.tsx
 create mode 100644 src/src/components/wallet/QRScannerModal.tsx
 create mode 100644 src/src/components/wallet/WalletComparisonGuide.tsx
 create mode 100644 src/src/contexts/AppContext.ts
 create mode 100644 src/src/contexts/LanguageContext.tsx
 create mode 100644 src/src/contexts/NWCContext.tsx
 create mode 100644 src/src/hooks/&1
 create mode 100644 src/src/hooks/useAppContext.ts
 create mode 100644 src/src/hooks/useAuthor.ts
 create mode 100644 src/src/hooks/useBTCMap.ts
 create mode 100644 src/src/hooks/useBatchTrustScores.ts
 create mode 100644 src/src/hooks/useBtcMapPlaces.ts
 create mode 100644 src/src/hooks/useCoaches.ts
 create mode 100644 src/src/hooks/useComments.ts
 create mode 100644 src/src/hooks/useCurrentUser.ts
 create mode 100644 src/src/hooks/useDirectMessages.ts
 create mode 100644 src/src/hooks/useExchangeRate.ts
 create mode 100644 src/src/hooks/useFollowList.ts
 create mode 100644 src/src/hooks/useFollowing.ts
 create mode 100644 src/src/hooks/useFoodSpots.ts
 create mode 100644 src/src/hooks/useIsMobile.tsx
 create mode 100644 src/src/hooks/useLabProfiles.ts
 create mode 100644 src/src/hooks/useLightningAddress.ts
 create mode 100644 src/src/hooks/useListingReports.ts
 create mode 100644 src/src/hooks/useListingRestrictions.ts
 create mode 100644 src/src/hooks/useLocalStorage.ts
 create mode 100644 src/src/hooks/useLoggedInAccounts.ts
 create mode 100644 src/src/hooks/useLoginActions.ts
 create mode 100644 src/src/hooks/useMarketplace.ts
 create mode 100644 src/src/hooks/useNWC.ts
 create mode 100644 src/src/hooks/useNWCContext.ts
 create mode 100644 src/src/hooks/useNoGoodRadio.ts
 create mode 100644 src/src/hooks/useNostr.ts
 create mode 100644 src/src/hooks/useNostrPublish.ts
 create mode 100644 src/src/hooks/useNutzap.ts
 create mode 100644 src/src/hooks/useOfflineCache.ts
 create mode 100644 src/src/hooks/usePostComment.ts
 create mode 100644 src/src/hooks/useQRCodeScanner.ts
 create mode 100644 src/src/hooks/useRelatrScore.ts
 create mode 100644 src/src/hooks/useSasquatchGuide.ts
 create mode 100644 src/src/hooks/useSellerInfo.ts
 create mode 100644 src/src/hooks/useSellerSales.ts
 create mode 100644 src/src/hooks/useShops.ts
 create mode 100644 src/src/hooks/useSkateEvents.ts
 create mode 100644 src/src/hooks/useSkateRelays.ts
 create mode 100644 src/src/hooks/useSkateShops.ts
 create mode 100644 src/src/hooks/useSkateSpots.ts
 create mode 100644 src/src/hooks/useSpotCollections.ts
 create mode 100644 src/src/hooks/useSpotContributions.ts
 create mode 100644 src/src/hooks/useSpotServices.ts
 create mode 100644 src/src/hooks/useSpotWeather.ts
 create mode 100644 src/src/hooks/useStash.ts
 create mode 100644 src/src/hooks/useTheme.ts
 create mode 100644 src/src/hooks/useToast.ts
 create mode 100644 src/src/hooks/useTours.ts
 create mode 100644 src/src/hooks/useTrustScore.ts
 create mode 100644 src/src/hooks/useUploadFile.ts
 create mode 100644 src/src/hooks/useUserStatus.ts
 create mode 100644 src/src/hooks/useWallet.ts
 create mode 100644 src/src/hooks/useZaps.ts
 create mode 100644 src/src/hooks/wallet/useCashu.ts
 create mode 100644 src/src/hooks/wallet/useHistoryManager.ts
 create mode 100644 src/src/hooks/wallet/useLightningOperations.ts
 create mode 100644 src/src/hooks/wallet/useMintManager.ts
 create mode 100644 src/src/hooks/wallet/useTokenOperations.ts
 create mode 100644 src/src/i18n/en.ts
 create mode 100644 src/src/i18n/es.ts
 create mode 100644 src/src/index.css
 create mode 100644 src/src/lib/amber.ts
 create mode 100644 src/src/lib/exchangeRateService.ts
 create mode 100644 src/src/lib/genUserName.test.ts
 create mode 100644 src/src/lib/genUserName.ts
 create mode 100644 src/src/lib/lightningAddress.ts
 create mode 100644 src/src/lib/nip06.test.ts
 create mode 100644 src/src/lib/nip06.ts
 create mode 100644 src/src/lib/offlineCache.ts
 create mode 100644 src/src/lib/polyfills.ts
 create mode 100644 src/src/lib/relatr.ts
 create mode 100644 src/src/lib/skateTags.ts
 create mode 100644 src/src/lib/skateboardRating.ts
 create mode 100644 src/src/lib/types.ts
 create mode 100644 src/src/lib/utils.ts
 create mode 100644 src/src/lib/wallet/qrCodeGenerator.ts
 create mode 100644 src/src/lib/weather.ts
 create mode 100644 src/src/main.tsx
 create mode 100644 src/src/pages/AboutPage.tsx
 create mode 100644 src/src/pages/BecomeCoachPage.tsx
 create mode 100644 src/src/pages/BecomeFilmerPage.tsx
 create mode 100644 src/src/pages/BountyLeaderboardPage.tsx
 create mode 100644 src/src/pages/CoachDetailPage.tsx
 create mode 100644 src/src/pages/CollectionDetailPage.tsx
 create mode 100644 src/src/pages/CommunityStatsPage.tsx
 create mode 100644 src/src/pages/ConversationPage.tsx
 create mode 100644 src/src/pages/CreateEventPage.tsx
 create mode 100644 src/src/pages/CreateListingPage.tsx
 create mode 100644 src/src/pages/CreateShopPage.tsx
 create mode 100644 src/src/pages/CreateSpotPage.tsx
 create mode 100644 src/src/pages/CreateTourPage.tsx
 create mode 100644 src/src/pages/DirectMessagesPage.tsx
 create mode 100644 src/src/pages/EditEventPage.tsx
 create mode 100644 src/src/pages/EditShopPage.tsx
 create mode 100644 src/src/pages/EditSpotPage.tsx
 create mode 100644 src/src/pages/EventDetailPage.tsx
 create mode 100644 src/src/pages/EventsPage.tsx
 create mode 100644 src/src/pages/FAQPage.tsx
 create mode 100644 src/src/pages/FoodPage.tsx
 create mode 100644 src/src/pages/GearSwapPage.tsx
 create mode 100644 src/src/pages/Index.tsx
 create mode 100644 src/src/pages/LabPage.tsx
 create mode 100644 src/src/pages/MapPage.tsx
 create mode 100644 src/src/pages/MarketplacePage.tsx
 create mode 100644 src/src/pages/NIP19Page.tsx
 create mode 100644 src/src/pages/NotFound.tsx
 create mode 100644 src/src/pages/OnboardingPage.tsx
 create mode 100644 src/src/pages/PyramidPage.tsx
 create mode 100644 src/src/pages/SettingsPage.tsx
 create mode 100644 src/src/pages/ShopDetailPage.tsx
 create mode 100644 src/src/pages/SignersPage.tsx
 create mode 100644 src/src/pages/SpotCollectionsPage.tsx
 create mode 100644 src/src/pages/SpotDetailPage.tsx
 create mode 100644 src/src/pages/StashPage.tsx
 create mode 100644 src/src/pages/TourDetailPage.tsx
 create mode 100644 src/src/pages/WalletPage.tsx
 create mode 100644 src/src/test/ErrorBoundary.test.tsx
 create mode 100644 src/src/test/TestApp.tsx
 create mode 100644 src/src/test/setup.ts
 create mode 100644 src/src/vite-env.d.ts

diff --git a/package.json b/package.json
index a8525f2..df5dc4e 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "lucide-react": "^0.462.0",
     "ngeohash": "^0.6.3",
     "nostr-tools": "^2.13.0",
+    "npubcash-sdk": "^0.2.0",
     "qrcode": "^1.5.4",
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
@@ -84,7 +85,7 @@
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.3",
-    "zod": "^3.23.8"
+    "zod": "^3.25.71"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
diff --git a/src/components/AppProvider.tsx b/src/components/AppProvider.tsx
index ea86a74..2da8a41 100644
--- a/src/components/AppProvider.tsx
+++ b/src/components/AppProvider.tsx
@@ -14,7 +14,7 @@ interface AppProviderProps {
 // Zod schema for RelayMetadata validation
 const RelayMetadataSchema = z.object({
   relays: z.array(z.object({
-    url: z.string().url(),
+    url: z.url(),
     read: z.boolean(),
     write: z.boolean(),
   })),
@@ -23,7 +23,7 @@ const RelayMetadataSchema = z.object({
 
 // Zod schema for BlossomServerMetadata validation
 const BlossomServerMetadataSchema = z.object({
-  servers: z.array(z.string().url()),
+  servers: z.array(z.url()),
   updatedAt: z.number(),
 }) satisfies z.ZodType<BlossomServerMetadata>;
 
diff --git a/src/src/App.test.tsx b/src/src/App.test.tsx
new file mode 100644
index 0000000..bedec00
--- /dev/null
+++ b/src/src/App.test.tsx
@@ -0,0 +1,8 @@
+import { render } from '@testing-library/react';
+import { test } from 'vitest';
+
+import App from './App';
+
+test('App', () => {
+  render(<App />);
+})
\ No newline at end of file
diff --git a/src/src/App.tsx b/src/src/App.tsx
new file mode 100644
index 0000000..76cc557
--- /dev/null
+++ b/src/src/App.tsx
@@ -0,0 +1,79 @@
+// NOTE: This file should normally not be modified unless you are adding a new provider.
+// To add new routes, edit the AppRouter.tsx file.
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createHead, UnheadProvider } from '@unhead/react/client';
+import { InferSeoMetaPlugin } from '@unhead/addons';
+import { Suspense } from 'react';
+import NostrProvider from '@/components/NostrProvider';
+import { NostrSync } from '@/components/NostrSync';
+import { Toaster } from "@/components/ui/toaster";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { NostrLoginProvider } from '@nostrify/react/login';
+import { AppProvider } from '@/components/AppProvider';
+import { NWCProvider } from '@/contexts/NWCContext';
+import { LanguageProvider } from '@/contexts/LanguageContext';
+import { AppConfig } from '@/contexts/AppContext';
+import { PWAInstallPrompt } from '@/components/PWAInstallPrompt';
+import { AmberCallbackHandler } from '@/components/auth/AmberCallbackHandler';
+import AppRouter from './AppRouter';
+
+const head = createHead({
+  plugins: [
+    InferSeoMetaPlugin(),
+  ],
+});
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      staleTime: 60000, // 1 minute
+      gcTime: Infinity,
+    },
+  },
+});
+
+const defaultConfig: AppConfig = {
+  theme: "dark",
+  relayMetadata: {
+    relays: [
+      { url: 'wss://relay.ditto.pub', read: true, write: true },
+      { url: 'wss://goskatespots.nostr1.com', read: true, write: true },
+      { url: 'wss://wotr.relatr.xyz', read: true, write: true },
+      { url: 'wss://purplepag.es', read: true, write: false }, // Profile aggregator - read only
+    ],
+    updatedAt: 0,
+  },
+  useSkateRelay: true, // Use community relay by default for skate content
+};
+
+export function App() {
+  return (
+    <UnheadProvider head={head}>
+      <LanguageProvider>
+        <AppProvider storageKey="nostr:app-config" defaultConfig={defaultConfig}>
+          <QueryClientProvider client={queryClient}>
+            <NostrLoginProvider storageKey='nostr:login'>
+              <NostrProvider>
+                <NostrSync />
+                <AmberCallbackHandler />
+                <NWCProvider>
+                  <TooltipProvider>
+                    <Toaster />
+                    <PWAInstallPrompt />
+                    <Suspense>
+                      <AppRouter />
+                    </Suspense>
+                  </TooltipProvider>
+                </NWCProvider>
+              </NostrProvider>
+            </NostrLoginProvider>
+          </QueryClientProvider>
+        </AppProvider>
+      </LanguageProvider>
+    </UnheadProvider>
+  );
+}
+
+export default App;
diff --git a/src/src/AppRouter.tsx b/src/src/AppRouter.tsx
new file mode 100644
index 0000000..9ffc49a
--- /dev/null
+++ b/src/src/AppRouter.tsx
@@ -0,0 +1,95 @@
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { ScrollToTop } from "./components/ScrollToTop";
+
+import Index from "./pages/Index";
+import MapPage from "./pages/MapPage";
+import EventsPage from "./pages/EventsPage";
+import FoodPage from "./pages/FoodPage";
+import WalletPage from "./pages/WalletPage";
+import SettingsPage from "./pages/SettingsPage";
+import CreateSpotPage from "./pages/CreateSpotPage";
+import CreateShopPage from "./pages/CreateShopPage";
+import CreateEventPage from "./pages/CreateEventPage";
+import CreateListingPage from "./pages/CreateListingPage";
+import CreateTourPage from "./pages/CreateTourPage";
+import EditSpotPage from "./pages/EditSpotPage";
+import EditShopPage from "./pages/EditShopPage";
+import EditEventPage from "./pages/EditEventPage";
+import GearSwapPage from "./pages/GearSwapPage";
+import SpotDetailPage from "./pages/SpotDetailPage";
+import ShopDetailPage from "./pages/ShopDetailPage";
+import EventDetailPage from "./pages/EventDetailPage";
+import OnboardingPage from "./pages/OnboardingPage";
+import PyramidPage from "./pages/PyramidPage";
+import LabPage from "./pages/LabPage";
+import BecomeCoachPage from "./pages/BecomeCoachPage";
+import BecomeFilmerPage from "./pages/BecomeFilmerPage";
+import CoachDetailPage from "./pages/CoachDetailPage";
+import TourDetailPage from "./pages/TourDetailPage";
+import AboutPage from "./pages/AboutPage";
+import FAQPage from "./pages/FAQPage";
+import CommunityStatsPage from "./pages/CommunityStatsPage";
+import SpotCollectionsPage from "./pages/SpotCollectionsPage";
+import CollectionDetailPage from "./pages/CollectionDetailPage";
+import DirectMessagesPage from "./pages/DirectMessagesPage";
+import ConversationPage from "./pages/ConversationPage";
+import BountyLeaderboardPage from "./pages/BountyLeaderboardPage";
+import SignersPage from "./pages/SignersPage";
+import StashPage from "./pages/StashPage";
+import { NIP19Page } from "./pages/NIP19Page";
+import NotFound from "./pages/NotFound";
+
+export function AppRouter() {
+  return (
+    <BrowserRouter>
+      <ScrollToTop />
+      <Routes>
+        <Route path="/" element={<Index />} />
+        <Route path="/map" element={<MapPage />} />
+        <Route path="/events" element={<EventsPage />} />
+        <Route path="/lab" element={<LabPage />} />
+        {/* Legacy route redirect */}
+        <Route path="/coaches" element={<LabPage />} />
+        <Route path="/become-coach" element={<BecomeCoachPage />} />
+        <Route path="/become-filmer" element={<BecomeFilmerPage />} />
+        <Route path="/coach/:pubkey/:identifier" element={<CoachDetailPage />} />
+        <Route path="/onboarding" element={<OnboardingPage />} />
+        <Route path="/pyramid" element={<PyramidPage />} />
+        <Route path="/marketplace" element={<GearSwapPage />} />
+        <Route path="/stats" element={<CommunityStatsPage />} />
+        <Route path="/about" element={<AboutPage />} />
+        <Route path="/faq" element={<FAQPage />} />
+        <Route path="/food" element={<FoodPage />} />
+        <Route path="/wallet" element={<WalletPage />} />
+        <Route path="/settings" element={<SettingsPage />} />
+        <Route path="/create-spot" element={<CreateSpotPage />} />
+        <Route path="/create-shop" element={<CreateShopPage />} />
+        <Route path="/create-event" element={<CreateEventPage />} />
+        <Route path="/create-listing" element={<CreateListingPage />} />
+        <Route path="/create-tour" element={<CreateTourPage />} />
+        <Route path="/edit-spot/:pubkey/:identifier" element={<EditSpotPage />} />
+        <Route path="/edit-shop/:pubkey/:identifier" element={<EditShopPage />} />
+        <Route path="/edit-event/:pubkey/:identifier" element={<EditEventPage />} />
+        <Route path="/spot/:pubkey/:identifier" element={<SpotDetailPage />} />
+        <Route path="/shop/:pubkey/:identifier" element={<ShopDetailPage />} />
+        <Route path="/event/:pubkey/:identifier" element={<EventDetailPage />} />
+        <Route path="/tour/:pubkey/:identifier" element={<TourDetailPage />} />
+        <Route path="/collections" element={<SpotCollectionsPage />} />
+        <Route path="/collections/:pubkey/:identifier" element={<CollectionDetailPage />} />
+        <Route path="/messages" element={<DirectMessagesPage />} />
+        <Route path="/messages/:npub" element={<ConversationPage />} />
+        {/* Bounty System */}
+        <Route path="/bounties" element={<BountyLeaderboardPage />} />
+        {/* Security & Signers */}
+        <Route path="/signers" element={<SignersPage />} />
+        {/* Stash - Private Inventory */}
+        <Route path="/stash" element={<StashPage />} />
+        {/* NIP-19 route for npub1, note1, naddr1, nevent1, nprofile1 */}
+        <Route path="/:nip19" element={<NIP19Page />} />
+        {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+export default AppRouter;
diff --git a/src/src/components/AddPhotoToSpot.tsx b/src/src/components/AddPhotoToSpot.tsx
new file mode 100644
index 0000000..6a3fc70
--- /dev/null
+++ b/src/src/components/AddPhotoToSpot.tsx
@@ -0,0 +1,234 @@
+import { useState } from 'react';
+import { Camera, Upload, Loader2, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useUploadFile } from '@/hooks/useUploadFile';
+import { useToast } from '@/hooks/useToast';
+import { useQueryClient } from '@tanstack/react-query';
+import { PHOTO_CONTRIBUTION_KIND } from '@/hooks/useSpotContributions';
+import { SKATE_SPOT_KIND } from '@/lib/types';
+import { LoginArea } from '@/components/auth/LoginArea';
+
+interface AddPhotoToSpotProps {
+  spotPubkey: string;
+  spotIdentifier: string;
+  spotTitle: string;
+}
+
+export function AddPhotoToSpot({ spotPubkey, spotIdentifier, spotTitle }: AddPhotoToSpotProps) {
+  const { user } = useCurrentUser();
+  const { mutateAsync: publishEvent, isPending: isPublishing } = useNostrPublish();
+  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  
+  const [open, setOpen] = useState(false);
+  const [caption, setCaption] = useState('');
+  const [uploadedImage, setUploadedImage] = useState<{ url: string; mimeType?: string } | null>(null);
+  
+  const spotRef = `${SKATE_SPOT_KIND}:${spotPubkey}:${spotIdentifier}`;
+  
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+    
+    try {
+      const file = files[0];
+      const tags = await uploadFile(file);
+      const url = tags.find(([name]) => name === 'url')?.[1];
+      const mimeType = tags.find(([name]) => name === 'm')?.[1];
+      
+      if (url) {
+        setUploadedImage({ url, mimeType });
+        toast({
+          title: 'Photo uploaded',
+          description: 'Add a caption and submit to contribute!',
+        });
+      }
+    } catch (error) {
+      toast({
+        title: 'Upload failed',
+        description: error instanceof Error ? error.message : 'Failed to upload photo',
+        variant: 'destructive',
+      });
+    }
+    
+    e.target.value = '';
+  };
+  
+  const handleSubmit = async () => {
+    if (!uploadedImage) {
+      toast({
+        title: 'No photo',
+        description: 'Please upload a photo first.',
+        variant: 'destructive',
+      });
+      return;
+    }
+    
+    try {
+      // Create kind 1063 file metadata event
+      const eventTags: string[][] = [
+        ['url', uploadedImage.url],
+        ['a', spotRef],
+        ['alt', `Community photo for ${spotTitle}`],
+      ];
+      
+      if (uploadedImage.mimeType) {
+        eventTags.push(['m', uploadedImage.mimeType]);
+      }
+      
+      await publishEvent({
+        kind: PHOTO_CONTRIBUTION_KIND,
+        content: caption.trim(),
+        tags: eventTags,
+      });
+      
+      toast({
+        title: 'Photo contributed!',
+        description: 'Your photo has been added to this spot.',
+      });
+      
+      // Reset and close
+      setCaption('');
+      setUploadedImage(null);
+      setOpen(false);
+      
+      // Invalidate the photos query
+      queryClient.invalidateQueries({ queryKey: ['spot-photos', spotPubkey, spotIdentifier] });
+    } catch (error) {
+      toast({
+        title: 'Failed to contribute',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+    }
+  };
+  
+  const handleClose = () => {
+    setOpen(false);
+    setCaption('');
+    setUploadedImage(null);
+  };
+  
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-2">
+          <Camera className="h-4 w-4" />
+          Add Photo
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Camera className="h-5 w-5 text-[#ff0040]" />
+            Add Photo to Spot
+          </DialogTitle>
+          <DialogDescription>
+            Contribute a photo to help others discover this spot.
+          </DialogDescription>
+        </DialogHeader>
+        
+        {!user ? (
+          <div className="py-6 text-center">
+            <p className="text-muted-foreground mb-4">Log in to contribute photos</p>
+            <LoginArea className="justify-center" />
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {/* Photo upload area */}
+            {uploadedImage ? (
+              <div className="relative">
+                <img
+                  src={uploadedImage.url}
+                  alt="Uploaded"
+                  className="w-full aspect-video object-cover rounded-lg"
+                />
+                <Button
+                  variant="destructive"
+                  size="icon"
+                  className="absolute top-2 right-2 h-8 w-8"
+                  onClick={() => setUploadedImage(null)}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            ) : (
+              <Card className="border-dashed">
+                <CardContent className="py-8">
+                  <label className="flex flex-col items-center cursor-pointer">
+                    <input
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={handleImageUpload}
+                      disabled={isUploading}
+                    />
+                    {isUploading ? (
+                      <>
+                        <Loader2 className="h-10 w-10 animate-spin text-muted-foreground mb-2" />
+                        <span className="text-sm text-muted-foreground">Uploading...</span>
+                      </>
+                    ) : (
+                      <>
+                        <Upload className="h-10 w-10 text-muted-foreground mb-2" />
+                        <span className="text-sm text-muted-foreground">Click to upload a photo</span>
+                        <span className="text-xs text-muted-foreground mt-1">JPG, PNG, WebP</span>
+                      </>
+                    )}
+                  </label>
+                </CardContent>
+              </Card>
+            )}
+            
+            {/* Caption */}
+            <div className="space-y-2">
+              <Textarea
+                placeholder="Add a caption (optional) - describe what's in the photo, when it was taken, etc."
+                value={caption}
+                onChange={(e) => setCaption(e.target.value)}
+                rows={3}
+              />
+            </div>
+            
+            {/* Actions */}
+            <div className="flex gap-2 justify-end">
+              <Button variant="outline" onClick={handleClose}>
+                Cancel
+              </Button>
+              <Button
+                onClick={handleSubmit}
+                disabled={!uploadedImage || isPublishing}
+                className="bg-[#ff0040] hover:bg-[#ff0040]/90"
+              >
+                {isPublishing ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Contributing...
+                  </>
+                ) : (
+                  <>
+                    <Camera className="h-4 w-4 mr-2" />
+                    Contribute Photo
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/src/components/AddTagsToSpot.tsx b/src/src/components/AddTagsToSpot.tsx
new file mode 100644
index 0000000..3c16d57
--- /dev/null
+++ b/src/src/components/AddTagsToSpot.tsx
@@ -0,0 +1,181 @@
+import { useState } from 'react';
+import { Tags, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { TagInput } from '@/components/TagInput';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useToast } from '@/hooks/useToast';
+import { useQueryClient } from '@tanstack/react-query';
+import { SKATE_SPOT_KIND } from '@/lib/types';
+import { LoginArea } from '@/components/auth/LoginArea';
+
+interface AddTagsToSpotProps {
+  spotPubkey: string;
+  spotIdentifier: string;
+  spotTitle: string;
+  existingTags?: string[];
+}
+
+export function AddTagsToSpot({ spotPubkey, spotIdentifier, spotTitle, existingTags = [] }: AddTagsToSpotProps) {
+  const { user } = useCurrentUser();
+  const { mutateAsync: publishEvent, isPending: isPublishing } = useNostrPublish();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  
+  const [open, setOpen] = useState(false);
+  const [tags, setTags] = useState<string[]>([]);
+  
+  const spotRef = `${SKATE_SPOT_KIND}:${spotPubkey}:${spotIdentifier}`;
+  
+  const handleSubmit = async () => {
+    if (tags.length === 0) {
+      toast({
+        title: 'No tags',
+        description: 'Please add at least one tag.',
+        variant: 'destructive',
+      });
+      return;
+    }
+    
+    try {
+      // Create kind 1111 comment with tag suggestions
+      const eventTags: string[][] = [
+        // Reference the spot with 'a' tag (NIP-22 comment target)
+        ['a', spotRef],
+        // Root marker for comment threading
+        ['K', String(SKATE_SPOT_KIND)],
+        // Mark this as a tag contribution
+        ['t', 'skatespot-tags'],
+      ];
+      
+      // Add all suggested tags
+      for (const tag of tags) {
+        eventTags.push(['t', tag]);
+      }
+      
+      await publishEvent({
+        kind: 1111,
+        content: `Suggested tags for ${spotTitle}: ${tags.map(t => `#${t}`).join(' ')}`,
+        tags: eventTags,
+      });
+      
+      toast({
+        title: 'Tags suggested!',
+        description: 'Your tag suggestions have been submitted.',
+      });
+      
+      // Reset and close
+      setTags([]);
+      setOpen(false);
+      
+      // Invalidate the tags query
+      queryClient.invalidateQueries({ queryKey: ['spot-tag-suggestions', spotPubkey, spotIdentifier] });
+    } catch (error) {
+      toast({
+        title: 'Failed to suggest tags',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+    }
+  };
+  
+  const handleClose = () => {
+    setOpen(false);
+    setTags([]);
+  };
+  
+  // Filter out tags that already exist on the spot
+  const handleTagChange = (newTags: string[]) => {
+    // Remove any tags that are already on the spot
+    const filteredTags = newTags.filter(tag => !existingTags.includes(tag));
+    setTags(filteredTags);
+  };
+  
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-2">
+          <Tags className="h-4 w-4" />
+          Suggest Tags
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Tags className="h-5 w-5 text-[#ccff00]" />
+            Suggest Tags
+          </DialogTitle>
+          <DialogDescription>
+            Help categorize this spot by suggesting relevant tags.
+          </DialogDescription>
+        </DialogHeader>
+        
+        {!user ? (
+          <div className="py-6 text-center">
+            <p className="text-muted-foreground mb-4">Log in to suggest tags</p>
+            <LoginArea className="justify-center" />
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {/* Existing tags display */}
+            {existingTags.length > 0 && (
+              <div>
+                <p className="text-xs text-muted-foreground mb-2">Current tags on this spot:</p>
+                <div className="flex flex-wrap gap-1">
+                  {existingTags.map(tag => (
+                    <span key={tag} className="px-2 py-0.5 text-xs bg-gray-800 rounded-full text-gray-400">
+                      #{tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+            
+            {/* Tag input */}
+            <div>
+              <p className="text-sm font-medium mb-2">Add new tags:</p>
+              <TagInput
+                tags={tags}
+                onChange={handleTagChange}
+                placeholder="Type to search or add tags..."
+                maxTags={10}
+              />
+            </div>
+            
+            {/* Actions */}
+            <div className="flex gap-2 justify-end pt-2">
+              <Button variant="outline" onClick={handleClose}>
+                Cancel
+              </Button>
+              <Button
+                onClick={handleSubmit}
+                disabled={tags.length === 0 || isPublishing}
+                className="bg-[#ccff00] text-black hover:bg-[#ccff00]/90"
+              >
+                {isPublishing ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Submitting...
+                  </>
+                ) : (
+                  <>
+                    <Tags className="h-4 w-4 mr-2" />
+                    Suggest {tags.length} Tag{tags.length !== 1 ? 's' : ''}
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/src/components/AddToCollectionDialog.tsx b/src/src/components/AddToCollectionDialog.tsx
new file mode 100644
index 0000000..4570b9d
--- /dev/null
+++ b/src/src/components/AddToCollectionDialog.tsx
@@ -0,0 +1,267 @@
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useToast } from '@/hooks/useToast';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import {
+  useMySpotCollections,
+  useCreateSpotCollection,
+  useAddSpotToCollection,
+} from '@/hooks/useSpotCollections';
+import { SKATE_SPOT_KIND, type SkateSpot, type SpotCollection } from '@/lib/types';
+import { FolderPlus, Plus, Check, Loader2, FolderOpen, MapPin } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface AddToCollectionDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  spot: SkateSpot;
+}
+
+export function AddToCollectionDialog({ open, onOpenChange, spot }: AddToCollectionDialogProps) {
+  const { user } = useCurrentUser();
+  const { data: collections, isLoading } = useMySpotCollections();
+  const { createCollection, isPending: isCreating } = useCreateSpotCollection();
+  const { addSpotToCollection, isPending: isAdding } = useAddSpotToCollection();
+  const { toast } = useToast();
+
+  const [showNewForm, setShowNewForm] = useState(false);
+  const [newTitle, setNewTitle] = useState('');
+  const [newDescription, setNewDescription] = useState('');
+  const [addingToId, setAddingToId] = useState<string | null>(null);
+
+  const spotRef = `${SKATE_SPOT_KIND}:${spot.pubkey}:${spot.identifier}`;
+
+  const handleAddToCollection = async (collection: SpotCollection) => {
+    if (collection.spotRefs.includes(spotRef)) {
+      toast({
+        title: 'Already saved',
+        description: `"${spot.title}" is already in "${collection.title}"`,
+      });
+      return;
+    }
+
+    setAddingToId(collection.id);
+    try {
+      await addSpotToCollection({
+        collection,
+        spotPubkey: spot.pubkey,
+        spotIdentifier: spot.identifier,
+      });
+      toast({
+        title: 'Spot saved!',
+        description: `Added "${spot.title}" to "${collection.title}"`,
+      });
+      onOpenChange(false);
+    } catch (error) {
+      toast({
+        title: 'Failed to save',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+    } finally {
+      setAddingToId(null);
+    }
+  };
+
+  const handleCreateCollection = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newTitle.trim()) return;
+
+    try {
+      await createCollection({
+        title: newTitle.trim(),
+        description: newDescription.trim() || undefined,
+        spotRefs: [spotRef], // Add the current spot to the new collection
+      });
+      toast({
+        title: 'Collection created!',
+        description: `"${spot.title}" added to your new collection "${newTitle}"`,
+      });
+      setNewTitle('');
+      setNewDescription('');
+      setShowNewForm(false);
+      onOpenChange(false);
+    } catch (error) {
+      toast({
+        title: 'Failed to create collection',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  if (!user) {
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="bg-black border-2 border-[#ff0040]/50">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-white">
+              <FolderPlus className="h-5 w-5 text-[#ccff00]" />
+              Save to Collection
+            </DialogTitle>
+          </DialogHeader>
+          <div className="py-8 text-center">
+            <p className="text-gray-400">Please log in to save spots to collections</p>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-black border-2 border-[#ff0040]/50 mx-4 max-w-[calc(100vw-2rem)] sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-white">
+            <FolderPlus className="h-5 w-5 text-[#ccff00]" />
+            Save to Collection
+          </DialogTitle>
+          <DialogDescription className="text-gray-400 text-sm">
+            Save "{spot.title}" to one of your collections
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 mt-4">
+          {/* Existing Collections */}
+          {isLoading ? (
+            <div className="space-y-2">
+              {Array.from({ length: 3 }).map((_, i) => (
+                <Skeleton key={i} className="h-16 w-full" />
+              ))}
+            </div>
+          ) : collections && collections.length > 0 ? (
+            <div className="space-y-2 max-h-48 sm:max-h-64 overflow-y-auto pr-1 sm:pr-2 -mr-1 sm:-mr-2">
+              {collections.map((collection) => {
+                const isInCollection = collection.spotRefs.includes(spotRef);
+                const isAddingThis = addingToId === collection.id;
+
+                return (
+                  <button
+                    key={collection.id}
+                    onClick={() => handleAddToCollection(collection)}
+                    disabled={isAdding || isInCollection}
+                    className={cn(
+                      'w-full p-2.5 sm:p-3 rounded-lg border-2 transition-all text-left flex items-center gap-2.5 sm:gap-3 touch-manipulation active:scale-[0.98]',
+                      isInCollection
+                        ? 'border-[#ccff00]/50 bg-[#ccff00]/10 cursor-default'
+                        : 'border-gray-700 hover:border-[#ccff00]/50 hover:bg-[#ccff00]/5'
+                    )}
+                  >
+                    <div className={cn(
+                      'w-9 h-9 sm:w-10 sm:h-10 rounded-lg flex items-center justify-center flex-shrink-0',
+                      isInCollection ? 'bg-[#ccff00]/20' : 'bg-gray-800'
+                    )}>
+                      {isAddingThis ? (
+                        <Loader2 className="h-4 w-4 sm:h-5 sm:w-5 animate-spin text-[#ccff00]" />
+                      ) : isInCollection ? (
+                        <Check className="h-4 w-4 sm:h-5 sm:w-5 text-[#ccff00]" />
+                      ) : (
+                        <FolderOpen className="h-4 w-4 sm:h-5 sm:w-5 text-gray-400" />
+                      )}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className={cn(
+                        'font-bold truncate text-sm sm:text-base',
+                        isInCollection ? 'text-[#ccff00]' : 'text-white'
+                      )}>
+                        {collection.title}
+                      </p>
+                      <p className="text-[10px] sm:text-xs text-gray-500 flex items-center gap-1">
+                        <MapPin className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
+                        {collection.spotRefs.length} spot{collection.spotRefs.length !== 1 ? 's' : ''}
+                        {isInCollection && ' · Already saved'}
+                      </p>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          ) : !showNewForm ? (
+            <div className="text-center py-4 sm:py-6 text-gray-400">
+              <FolderOpen className="h-10 w-10 sm:h-12 sm:w-12 mx-auto mb-2 sm:mb-3 opacity-50" />
+              <p className="text-sm sm:text-base">You don't have any collections yet</p>
+              <p className="text-xs sm:text-sm">Create your first one below!</p>
+            </div>
+          ) : null}
+
+          {/* Create New Collection Form */}
+          {showNewForm ? (
+            <form onSubmit={handleCreateCollection} className="space-y-3 sm:space-y-4 pt-3 sm:pt-4 border-t border-gray-800">
+              <div className="space-y-1.5 sm:space-y-2">
+                <Label htmlFor="title" className="text-white text-sm">Collection Name</Label>
+                <Input
+                  id="title"
+                  value={newTitle}
+                  onChange={(e) => setNewTitle(e.target.value)}
+                  placeholder="Barcelona Trip 2024"
+                  className="bg-black border-gray-700 text-white h-11"
+                  autoFocus
+                />
+              </div>
+              <div className="space-y-1.5 sm:space-y-2">
+                <Label htmlFor="description" className="text-white text-sm">Description (optional)</Label>
+                <Textarea
+                  id="description"
+                  value={newDescription}
+                  onChange={(e) => setNewDescription(e.target.value)}
+                  placeholder="My favorite spots from my Barcelona trip..."
+                  className="bg-black border-gray-700 text-white resize-none"
+                  rows={2}
+                />
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setShowNewForm(false)}
+                  className="flex-1 border-gray-700 h-11"
+                >
+                  Cancel
+                </Button>
+                <Button
+                  type="submit"
+                  disabled={!newTitle.trim() || isCreating}
+                  className="flex-1 bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold h-11"
+                >
+                  {isCreating ? (
+                    <>
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                      <span className="hidden sm:inline">Creating...</span>
+                      <span className="sm:hidden">...</span>
+                    </>
+                  ) : (
+                    <>
+                      <Plus className="h-4 w-4 sm:mr-2" />
+                      <span className="hidden sm:inline">Create & Save</span>
+                      <span className="sm:hidden">Create</span>
+                    </>
+                  )}
+                </Button>
+              </div>
+            </form>
+          ) : (
+            <Button
+              onClick={() => setShowNewForm(true)}
+              variant="outline"
+              className="w-full border-dashed border-gray-600 hover:border-[#ccff00]/50 hover:bg-[#ccff00]/5 h-11"
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              Create New Collection
+            </Button>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/src/components/AppProvider.tsx b/src/src/components/AppProvider.tsx
new file mode 100644
index 0000000..0358861
--- /dev/null
+++ b/src/src/components/AppProvider.tsx
@@ -0,0 +1,149 @@
+import { ReactNode, useEffect } from 'react';
+import { z } from 'zod';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+import { AppContext, type AppConfig, type AppContextType, type Theme, type RelayMetadata } from '@/contexts/AppContext';
+
+interface AppProviderProps {
+  children: ReactNode;
+  /** Application storage key */
+  storageKey: string;
+  /** Default app configuration */
+  defaultConfig: AppConfig;
+}
+
+// Zod schema for RelayMetadata validation
+const RelayMetadataSchema = z.object({
+  relays: z.array(z.object({
+    url: z.string().url(),
+    read: z.boolean(),
+    write: z.boolean(),
+  })),
+  updatedAt: z.number(),
+}) satisfies z.ZodType<RelayMetadata>;
+
+// Zod schema for AppConfig validation
+const AppConfigSchema = z.object({
+  theme: z.enum(['dark', 'light', 'system']),
+  relayMetadata: RelayMetadataSchema,
+}) satisfies z.ZodType<AppConfig>;
+
+export function AppProvider(props: AppProviderProps) {
+  const {
+    children,
+    storageKey,
+    defaultConfig,
+  } = props;
+
+  // App configuration state with localStorage persistence
+  const [rawConfig, setConfig] = useLocalStorage<Partial<AppConfig>>(
+    storageKey,
+    {},
+    {
+      serialize: JSON.stringify,
+      deserialize: (value: string) => {
+        const parsed = JSON.parse(value);
+        return AppConfigSchema.partial().parse(parsed);
+      }
+    }
+  );
+
+  // Generic config updater with callback pattern
+  const updateConfig = (updater: (currentConfig: Partial<AppConfig>) => Partial<AppConfig>) => {
+    setConfig(updater);
+  };
+
+  // Merge configs with special handling for relay metadata
+  const config = { ...defaultConfig, ...rawConfig };
+
+  // Force migration to correct relays and dark theme
+  useEffect(() => {
+    let needsUpdate = false;
+    const updates: Partial<AppConfig> = {};
+
+    // Check relay configuration
+    if (config.relayMetadata.relays) {
+      const currentRelayUrls = config.relayMetadata.relays.map(r => r.url).sort().join(',');
+      const expectedRelayUrls = defaultConfig.relayMetadata.relays.map(r => r.url).sort().join(',');
+
+      if (currentRelayUrls !== expectedRelayUrls) {
+        console.log('Migrating relays to:', defaultConfig.relayMetadata.relays.map(r => r.url));
+        updates.relayMetadata = defaultConfig.relayMetadata;
+        needsUpdate = true;
+      }
+    }
+
+    // Force dark theme (app is dark-only now)
+    if (config.theme !== 'dark') {
+      console.log('Forcing dark theme');
+      updates.theme = 'dark';
+      needsUpdate = true;
+    }
+
+    if (needsUpdate) {
+      updateConfig((current) => ({
+        ...current,
+        ...updates,
+      }));
+    }
+  }, []);
+
+  // Ensure relay list is never empty - fallback to default if no relays configured
+  if (!config.relayMetadata.relays || config.relayMetadata.relays.length === 0) {
+    config.relayMetadata = defaultConfig.relayMetadata;
+  }
+
+  const appContextValue: AppContextType = {
+    config,
+    updateConfig,
+  };
+
+  // Apply theme effects to document
+  useApplyTheme(config.theme);
+
+  return (
+    <AppContext.Provider value={appContextValue}>
+      {children}
+    </AppContext.Provider>
+  );
+}
+
+/**
+ * Hook to apply theme changes to the document root
+ */
+function useApplyTheme(theme: Theme) {
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove('light', 'dark');
+
+    if (theme === 'system') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
+        .matches
+        ? 'dark'
+        : 'light';
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  // Handle system theme changes when theme is set to "system"
+  useEffect(() => {
+    if (theme !== 'system') return;
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const handleChange = () => {
+      const root = window.document.documentElement;
+      root.classList.remove('light', 'dark');
+
+      const systemTheme = mediaQuery.matches ? 'dark' : 'light';
+      root.classList.add(systemTheme);
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [theme]);
+}
\ No newline at end of file
diff --git a/src/src/components/BackupReminder.tsx b/src/src/components/BackupReminder.tsx
new file mode 100644
index 0000000..245e1ad
--- /dev/null
+++ b/src/src/components/BackupReminder.tsx
@@ -0,0 +1,144 @@
+import { useState, useEffect } from 'react';
+import { AlertTriangle, X, Download, CheckCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+import { useTranslation } from '@/contexts/LanguageContext';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+
+const BACKUP_REMINDER_KEY = 'backup-reminder-dismissed';
+const BACKUP_CONFIRMED_KEY = 'backup-confirmed';
+
+/**
+ * Persistent backup reminder that shows after signup
+ * Encourages users to backup their recovery phrase or nsec
+ * Uses a bottom sheet for better mobile experience
+ */
+export function BackupReminder() {
+  const { user } = useCurrentUser();
+  const [dismissed, setDismissed] = useLocalStorage(BACKUP_REMINDER_KEY, false);
+  const [confirmed, setConfirmed] = useLocalStorage(BACKUP_CONFIRMED_KEY, false);
+  const [showReminder, setShowReminder] = useState(false);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (!user) {
+      setShowReminder(false);
+      return;
+    }
+
+    // Show reminder if:
+    // 1. User is logged in
+    // 2. Not dismissed
+    // 3. Not confirmed they backed up
+    // Add a small delay so it doesn't immediately pop up on login
+    const timer = setTimeout(() => {
+      const shouldShow = !dismissed && !confirmed;
+      setShowReminder(shouldShow);
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, [user, dismissed, confirmed]);
+
+  const handleDismiss = () => {
+    setDismissed(true);
+    setShowReminder(false);
+  };
+
+  const handleConfirmBackup = () => {
+    setConfirmed(true);
+    setShowReminder(false);
+  };
+
+  const handleBackupNow = () => {
+    window.location.href = '/settings?tab=security';
+  };
+
+  if (!showReminder) return null;
+
+  return (
+    <Sheet open={showReminder} onOpenChange={setShowReminder}>
+      <SheetContent 
+        side="bottom" 
+        className="rounded-t-2xl border-t-4 border-amber-500 bg-gradient-to-b from-amber-950/90 to-black/95 backdrop-blur-lg"
+        onInteractOutside={(e) => e.preventDefault()}
+      >
+        <SheetHeader className="text-left">
+          <div className="flex items-start justify-between">
+            <div className="flex items-center gap-3">
+              <div className="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-amber-500/20 flex items-center justify-center">
+                <AlertTriangle className="h-5 w-5 sm:h-6 sm:w-6 text-amber-500" />
+              </div>
+              <div className="flex-1">
+                <SheetTitle className="text-lg sm:text-xl font-bold text-amber-400">
+                  {t('backup.title')}
+                </SheetTitle>
+                <SheetDescription className="text-xs sm:text-sm text-gray-400">
+                  {t('backup.subtitle')}
+                </SheetDescription>
+              </div>
+            </div>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleDismiss}
+              className="ml-2 -mt-1 text-gray-500 hover:text-gray-300"
+            >
+              <X className="h-5 w-5" />
+            </Button>
+          </div>
+        </SheetHeader>
+
+        <div className="mt-4 sm:mt-6 space-y-4">
+          {/* Warning message */}
+          <div className="p-3 sm:p-4 rounded-xl bg-amber-500/10 border border-amber-500/30">
+            <p className="text-sm sm:text-base text-gray-200 leading-relaxed">
+              {t('backup.message')}
+            </p>
+            <p className="text-sm sm:text-base text-gray-300 mt-2">
+              ⚠️ {t('backup.warning')}
+            </p>
+          </div>
+
+          {/* Action buttons - stacked on mobile */}
+          <div className="flex flex-col sm:flex-row gap-3">
+            <Button
+              onClick={handleBackupNow}
+              className="flex-1 h-12 sm:h-11 text-sm sm:text-base font-semibold bg-amber-500 hover:bg-amber-600 text-black"
+              size="lg"
+            >
+              <Download className="mr-2 h-5 w-5" />
+              {t('backup.backupNow')}
+            </Button>
+            
+            <Button
+              onClick={handleConfirmBackup}
+              variant="outline"
+              className="flex-1 h-12 sm:h-11 text-sm sm:text-base border-amber-500/50 text-amber-400 hover:bg-amber-500/20"
+              size="lg"
+            >
+              <CheckCircle className="mr-2 h-5 w-5" />
+              {t('backup.confirmed')}
+            </Button>
+          </div>
+
+          {/* Dismiss link */}
+          <div className="text-center pt-1">
+            <button 
+              onClick={handleDismiss}
+              className="text-xs text-gray-500 hover:text-gray-400 underline"
+            >
+              {t('backup.remindLater')}
+            </button>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/src/src/components/CameraCapture.tsx b/src/src/components/CameraCapture.tsx
new file mode 100644
index 0000000..4152f35
--- /dev/null
+++ b/src/src/components/CameraCapture.tsx
@@ -0,0 +1,313 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { useToast } from '@/hooks/useToast';
+import { cn } from '@/lib/utils';
+import {
+  Camera,
+  X,
+  RotateCcw,
+  Check,
+  Loader2,
+  SwitchCamera,
+} from 'lucide-react';
+
+interface CameraCaptureProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCapture: (file: File) => void;
+  isUploading?: boolean;
+}
+
+export function CameraCapture({
+  open,
+  onOpenChange,
+  onCapture,
+  isUploading,
+}: CameraCaptureProps) {
+  const { toast } = useToast();
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
+  const [capturedImage, setCapturedImage] = useState<string | null>(null);
+  const [facingMode, setFacingMode] = useState<'user' | 'environment'>('environment');
+  const [isStarting, setIsStarting] = useState(false);
+
+  // Start the camera
+  const startCamera = useCallback(async (facing: 'user' | 'environment' = facingMode) => {
+    setIsStarting(true);
+    try {
+      // Stop any existing stream first
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach(track => track.stop());
+      }
+
+      const constraints: MediaStreamConstraints = {
+        video: {
+          facingMode: facing,
+          width: { ideal: 1920 },
+          height: { ideal: 1080 },
+        },
+        audio: false,
+      };
+
+      const stream = await navigator.mediaDevices.getUserMedia(constraints);
+      streamRef.current = stream;
+
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+        await videoRef.current.play();
+      }
+
+      setHasPermission(true);
+      setFacingMode(facing);
+    } catch (error) {
+      console.error('Camera access error:', error);
+      setHasPermission(false);
+      toast({
+        title: 'Camera access denied',
+        description: 'Please allow camera access in your browser settings to take photos.',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsStarting(false);
+    }
+  }, [facingMode, toast]);
+
+  // Stop the camera
+  const stopCamera = useCallback(() => {
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach(track => track.stop());
+      streamRef.current = null;
+    }
+    if (videoRef.current) {
+      videoRef.current.srcObject = null;
+    }
+  }, []);
+
+  // Start camera when dialog opens
+  useEffect(() => {
+    if (open) {
+      startCamera();
+    } else {
+      stopCamera();
+      setCapturedImage(null);
+      setHasPermission(null);
+    }
+
+    return () => {
+      stopCamera();
+    };
+  }, [open, startCamera, stopCamera]);
+
+  // Switch camera (front/back)
+  const switchCamera = () => {
+    const newFacing = facingMode === 'user' ? 'environment' : 'user';
+    setCapturedImage(null);
+    startCamera(newFacing);
+  };
+
+  // Capture photo
+  const capturePhoto = () => {
+    if (!videoRef.current || !canvasRef.current) return;
+
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+
+    if (!ctx) return;
+
+    // Set canvas dimensions to video dimensions
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+
+    // Draw the video frame to the canvas
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+    // Get the data URL
+    const dataUrl = canvas.toDataURL('image/jpeg', 0.9);
+    setCapturedImage(dataUrl);
+  };
+
+  // Retake photo
+  const retakePhoto = () => {
+    setCapturedImage(null);
+  };
+
+  // Confirm and upload photo
+  const confirmPhoto = async () => {
+    if (!capturedImage || !canvasRef.current) return;
+
+    // Convert data URL to Blob then to File
+    const response = await fetch(capturedImage);
+    const blob = await response.blob();
+    const file = new File([blob], `skate-spot-${Date.now()}.jpg`, { type: 'image/jpeg' });
+
+    onCapture(file);
+  };
+
+  // Handle close
+  const handleClose = () => {
+    stopCamera();
+    setCapturedImage(null);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[500px] p-0 overflow-hidden bg-black border-[#ff0040]/50">
+        <DialogHeader className="p-4 border-b border-gray-800">
+          <DialogTitle className="flex items-center gap-2 text-white">
+            <Camera className="h-5 w-5 text-[#ff0040]" />
+            Take a Photo
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="relative aspect-[4/3] bg-black">
+          {/* Hidden canvas for capturing */}
+          <canvas ref={canvasRef} className="hidden" />
+
+          {/* Loading state */}
+          {isStarting && (
+            <div className="absolute inset-0 flex items-center justify-center bg-black">
+              <div className="text-center">
+                <Loader2 className="h-8 w-8 animate-spin text-[#ccff00] mx-auto mb-2" />
+                <p className="text-gray-400 text-sm">Starting camera...</p>
+              </div>
+            </div>
+          )}
+
+          {/* No permission state */}
+          {hasPermission === false && (
+            <div className="absolute inset-0 flex items-center justify-center bg-black">
+              <div className="text-center p-6">
+                <Camera className="h-12 w-12 text-gray-600 mx-auto mb-4" />
+                <h3 className="text-white font-bold mb-2">Camera Access Required</h3>
+                <p className="text-gray-400 text-sm mb-4">
+                  Please allow camera access in your browser to take photos.
+                </p>
+                <Button
+                  onClick={() => startCamera()}
+                  className="bg-[#ff0040] hover:bg-[#ff0040]/90"
+                >
+                  Try Again
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* Video feed */}
+          {!capturedImage && (
+            <video
+              ref={videoRef}
+              autoPlay
+              playsInline
+              muted
+              className={cn(
+                'w-full h-full object-cover',
+                (isStarting || hasPermission === false) && 'hidden'
+              )}
+            />
+          )}
+
+          {/* Captured image preview */}
+          {capturedImage && (
+            <img
+              src={capturedImage}
+              alt="Captured"
+              className="w-full h-full object-cover"
+            />
+          )}
+
+          {/* Camera switch button */}
+          {!capturedImage && hasPermission && !isStarting && (
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={switchCamera}
+              className="absolute top-2 right-2 bg-black/50 hover:bg-black/70 text-white"
+            >
+              <SwitchCamera className="h-5 w-5" />
+            </Button>
+          )}
+
+          {/* Crosshairs/guides */}
+          {!capturedImage && hasPermission && !isStarting && (
+            <div className="absolute inset-0 pointer-events-none">
+              {/* Grid lines */}
+              <div className="absolute inset-0 grid grid-cols-3 grid-rows-3">
+                <div className="border-r border-white/20" />
+                <div className="border-r border-white/20" />
+                <div />
+                <div className="border-r border-t border-white/20" />
+                <div className="border-r border-t border-white/20" />
+                <div className="border-t border-white/20" />
+                <div className="border-r border-t border-white/20" />
+                <div className="border-r border-t border-white/20" />
+                <div className="border-t border-white/20" />
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Controls */}
+        <div className="p-4 bg-black border-t border-gray-800">
+          {!capturedImage ? (
+            <div className="flex items-center justify-center gap-4">
+              <Button
+                variant="outline"
+                onClick={handleClose}
+                className="border-gray-700 text-gray-400 hover:bg-gray-900"
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={capturePhoto}
+                disabled={!hasPermission || isStarting}
+                className="bg-[#ff0040] hover:bg-[#ff0040]/90 text-white px-8 h-12 rounded-full"
+              >
+                <Camera className="h-5 w-5" />
+              </Button>
+            </div>
+          ) : (
+            <div className="flex items-center justify-center gap-4">
+              <Button
+                variant="outline"
+                onClick={retakePhoto}
+                disabled={isUploading}
+                className="gap-2 border-gray-700 text-gray-400 hover:bg-gray-900"
+              >
+                <RotateCcw className="h-4 w-4" />
+                Retake
+              </Button>
+              <Button
+                onClick={confirmPhoto}
+                disabled={isUploading}
+                className="gap-2 bg-[#ccff00] hover:bg-[#ccff00]/90 text-black font-bold"
+              >
+                {isUploading ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    Uploading...
+                  </>
+                ) : (
+                  <>
+                    <Check className="h-4 w-4" />
+                    Use Photo
+                  </>
+                )}
+              </Button>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/src/components/EditProfileForm.tsx b/src/src/components/EditProfileForm.tsx
new file mode 100644
index 0000000..f81a140
--- /dev/null
+++ b/src/src/components/EditProfileForm.tsx
@@ -0,0 +1,373 @@
+import React, { useEffect, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useToast } from '@/hooks/useToast';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Switch } from '@/components/ui/switch';
+import { Loader2, Upload } from 'lucide-react';
+import { NSchema as n, type NostrMetadata } from '@nostrify/nostrify';
+import { useQueryClient } from '@tanstack/react-query';
+import { useUploadFile } from '@/hooks/useUploadFile';
+
+export const EditProfileForm: React.FC = () => {
+  const queryClient = useQueryClient();
+
+  const { user, metadata } = useCurrentUser();
+  const { mutateAsync: publishEvent, isPending } = useNostrPublish();
+  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+  const { toast } = useToast();
+
+  // Initialize the form with default values
+  const form = useForm<NostrMetadata>({
+    resolver: zodResolver(n.metadata()),
+    defaultValues: {
+      name: '',
+      about: '',
+      picture: '',
+      banner: '',
+      website: '',
+      nip05: '',
+      bot: false,
+    },
+  });
+
+  // Update form values when user data is loaded
+  useEffect(() => {
+    if (metadata) {
+      form.reset({
+        name: metadata.name || '',
+        about: metadata.about || '',
+        picture: metadata.picture || '',
+        banner: metadata.banner || '',
+        website: metadata.website || '',
+        nip05: metadata.nip05 || '',
+        bot: metadata.bot || false,
+      });
+    }
+  }, [metadata, form]);
+
+  // Handle file uploads for profile picture and banner
+  const uploadPicture = async (file: File, field: 'picture' | 'banner') => {
+    try {
+      // The first tuple in the array contains the URL
+      const [[_, url]] = await uploadFile(file);
+      form.setValue(field, url);
+      toast({
+        title: 'Success',
+        description: `${field === 'picture' ? 'Profile picture' : 'Banner'} uploaded successfully`,
+      });
+    } catch (error) {
+      console.error(`Failed to upload ${field}:`, error);
+      toast({
+        title: 'Error',
+        description: `Failed to upload ${field === 'picture' ? 'profile picture' : 'banner'}. Please try again.`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onSubmit = async (values: NostrMetadata) => {
+    if (!user) {
+      toast({
+        title: 'Error',
+        description: 'You must be logged in to update your profile',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    try {
+      // Combine existing metadata with new values
+      const data = { ...metadata, ...values };
+
+      // Clean up empty values
+      for (const key in data) {
+        if (data[key] === '') {
+          delete data[key];
+        }
+      }
+
+      // Publish the metadata event (kind 0) with retry logic
+      let attempts = 0;
+      let lastError;
+
+      while (attempts < 3) {
+        try {
+          await publishEvent({
+            kind: 0,
+            content: JSON.stringify(data),
+          });
+
+          // Success! Break out of retry loop
+          break;
+        } catch (err) {
+          lastError = err;
+          attempts++;
+
+          // Wait a bit before retrying
+          if (attempts < 3) {
+            await new Promise(resolve => setTimeout(resolve, 1000));
+          }
+        }
+      }
+
+      // If all attempts failed, throw the last error
+      if (attempts === 3 && lastError) {
+        throw lastError;
+      }
+
+      // Invalidate queries to refresh the data
+      queryClient.invalidateQueries({ queryKey: ['logins'] });
+      queryClient.invalidateQueries({ queryKey: ['author', user.pubkey] });
+
+      toast({
+        title: 'Success',
+        description: 'Your profile has been updated',
+      });
+    } catch (error) {
+      console.error('Failed to update profile:', error);
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      toast({
+        title: 'Error',
+        description: 'Failed to publish profile. Check your relay connections in Settings > Relays',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input placeholder="Your name" {...field} />
+              </FormControl>
+              <FormDescription>
+                This is your display name that will be displayed to others.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="about"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Bio</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Tell others about yourself"
+                  className="resize-none"
+                  {...field}
+                />
+              </FormControl>
+              <FormDescription>
+                A short description about yourself.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <FormField
+            control={form.control}
+            name="picture"
+            render={({ field }) => (
+              <ImageUploadField
+                field={field}
+                label="Profile Picture"
+                placeholder="https://example.com/profile.jpg"
+                description="URL to your profile picture. You can upload an image or provide a URL."
+                previewType="square"
+                onUpload={(file) => uploadPicture(file, 'picture')}
+              />
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="banner"
+            render={({ field }) => (
+              <ImageUploadField
+                field={field}
+                label="Banner Image"
+                placeholder="https://example.com/banner.jpg"
+                description="URL to a wide banner image for your profile. You can upload an image or provide a URL."
+                previewType="wide"
+                onUpload={(file) => uploadPicture(file, 'banner')}
+              />
+            )}
+          />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <FormField
+            control={form.control}
+            name="website"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Website</FormLabel>
+                <FormControl>
+                  <Input placeholder="https://yourwebsite.com" {...field} />
+                </FormControl>
+                <FormDescription>
+                  Your personal website or social media link.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="nip05"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>NIP-05 Identifier</FormLabel>
+                <FormControl>
+                  <Input placeholder="you@example.com" {...field} />
+                </FormControl>
+                <FormDescription>
+                  Your verified Nostr identifier.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <FormField
+          control={form.control}
+          name="bot"
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+              <div className="space-y-0.5">
+                <FormLabel className="text-base">Bot Account</FormLabel>
+                <FormDescription>
+                  Mark this account as automated or a bot.
+                </FormDescription>
+              </div>
+              <FormControl>
+                <Switch
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+
+        <Button
+          type="submit"
+          className="w-full md:w-auto"
+          disabled={isPending || isUploading}
+        >
+          {(isPending || isUploading) && (
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          )}
+          Save Profile
+        </Button>
+      </form>
+    </Form>
+  );
+};
+
+// Reusable component for image upload fields
+interface ImageUploadFieldProps {
+  field: {
+    value: string | undefined;
+    onChange: (value: string) => void;
+    name: string;
+    onBlur: () => void;
+  };
+  label: string;
+  placeholder: string;
+  description: string;
+  previewType: 'square' | 'wide';
+  onUpload: (file: File) => void;
+}
+
+const ImageUploadField: React.FC<ImageUploadFieldProps> = ({
+  field,
+  label,
+  placeholder,
+  description,
+  previewType,
+  onUpload,
+}) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <FormItem>
+      <FormLabel>{label}</FormLabel>
+      <div className="flex flex-col gap-2">
+        <FormControl>
+          <Input
+            placeholder={placeholder}
+            name={field.name}
+            value={field.value ?? ''}
+            onChange={e => field.onChange(e.target.value)}
+            onBlur={field.onBlur}
+          />
+        </FormControl>
+        <div className="flex items-center gap-2">
+          <input
+            type="file"
+            ref={fileInputRef}
+            accept="image/*"
+            className="hidden"
+            onChange={(e) => {
+              const file = e.target.files?.[0];
+              if (file) {
+                onUpload(file);
+              }
+            }}
+          />
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => fileInputRef.current?.click()}
+          >
+            <Upload className="h-4 w-4 mr-2" />
+            Upload Image
+          </Button>
+          {field.value && (
+            <div className={`h-10 ${previewType === 'square' ? 'w-10' : 'w-24'} rounded overflow-hidden`}>
+              <img
+                src={field.value}
+                alt={`${label} preview`}
+                className="h-full w-full object-cover"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+      <FormDescription>
+        {description}
+      </FormDescription>
+      <FormMessage />
+    </FormItem>
+  );
+};
diff --git a/src/src/components/ErrorBoundary.tsx b/src/src/components/ErrorBoundary.tsx
new file mode 100644
index 0000000..ffa1f37
--- /dev/null
+++ b/src/src/components/ErrorBoundary.tsx
@@ -0,0 +1,113 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Error caught by ErrorBoundary:', error, errorInfo);
+
+    this.setState({
+      error,
+      errorInfo,
+    });
+  }
+
+  handleReset = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="min-h-screen bg-background flex items-center justify-center p-4">
+          <div className="max-w-md w-full space-y-4">
+            <div className="text-center">
+              <h2 className="text-2xl font-bold text-foreground mb-2">
+                Something went wrong
+              </h2>
+              <p className="text-muted-foreground">
+                An unexpected error occurred. The error has been reported.
+              </p>
+            </div>
+
+            <div className="bg-muted p-4 rounded-lg">
+              <details className="text-sm">
+                <summary className="cursor-pointer font-medium text-foreground">
+                  Error details
+                </summary>
+                <div className="mt-2 space-y-2">
+                  <div>
+                    <strong className="text-foreground">Message:</strong>
+                    <p className="text-muted-foreground mt-1">
+                      {this.state.error?.message}
+                    </p>
+                  </div>
+                  {this.state.error?.stack && (
+                    <div>
+                      <strong className="text-foreground">Stack trace:</strong>
+                      <pre className="text-xs text-muted-foreground mt-1 overflow-auto max-h-32">
+                        {this.state.error.stack}
+                      </pre>
+                    </div>
+                  )}
+                </div>
+              </details>
+            </div>
+
+            <div className="flex gap-2">
+              <button
+                onClick={this.handleReset}
+                className="flex-1 px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+              >
+                Try again
+              </button>
+              <button
+                onClick={() => window.location.reload()}
+                className="flex-1 px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/90 transition-colors"
+              >
+                Reload page
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
\ No newline at end of file
diff --git a/src/src/components/EventCard.tsx b/src/src/components/EventCard.tsx
new file mode 100644
index 0000000..8f21cd4
--- /dev/null
+++ b/src/src/components/EventCard.tsx
@@ -0,0 +1,308 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Calendar, Clock, MapPin, MoreVertical, Flag } from 'lucide-react';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { genUserName } from '@/lib/genUserName';
+import { ZapButton } from '@/components/ZapButton';
+import { TrustBadge } from '@/components/TrustBadge';
+import { ReportDialog } from '@/components/ReportDialog';
+import type { SkateEvent } from '@/lib/types';
+import { EVENT_TYPE_LABELS } from '@/lib/types';
+
+interface EventCardProps {
+  event: SkateEvent;
+  compact?: boolean;
+}
+
+function formatDate(timestamp: number): string {
+  const date = new Date(timestamp * 1000);
+  return date.toLocaleDateString('en-US', {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+
+function formatTime(timestamp: number): string {
+  const date = new Date(timestamp * 1000);
+  return date.toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+}
+
+function getRelativeTime(timestamp: number): string {
+  const now = Date.now() / 1000;
+  const diff = timestamp - now;
+
+  if (diff < 0) return 'Past';
+
+  const days = Math.floor(diff / 86400);
+  const hours = Math.floor((diff % 86400) / 3600);
+
+  if (days > 0) {
+    return days === 1 ? 'Tomorrow' : `In ${days} days`;
+  }
+  if (hours > 0) {
+    return `In ${hours} hour${hours > 1 ? 's' : ''}`;
+  }
+  return 'Starting soon';
+}
+
+export function EventCard({ event, compact = false }: EventCardProps) {
+  const author = useAuthor(event.pubkey);
+  const { user } = useCurrentUser();
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(event.pubkey);
+  const [showReportDialog, setShowReportDialog] = useState(false);
+
+  const relativeTime = getRelativeTime(event.start);
+  const isUpcoming = event.start > Date.now() / 1000;
+  const isOwner = user?.pubkey === event.pubkey;
+
+  if (compact) {
+    return (
+      <Link to={`/event/${event.pubkey}/${event.identifier}`}>
+        <Card className="group hover:shadow-2xl hover:shadow-[#ccff00]/20 transition-all duration-300 border-2 border-[#ccff00]/20 hover:border-[#ccff00]/60 bg-black/90 backdrop-blur">
+          <CardContent className="p-4">
+            <div className="flex items-start gap-4">
+              {/* Date Badge */}
+              <div className="flex-shrink-0 w-16 text-center">
+                <div className="bg-[#ccff00]/10 border-2 border-[#ccff00]/50 rounded-lg p-2">
+                  <div className="text-xs font-bold text-[#ccff00] uppercase">
+                    {new Date(event.start * 1000).toLocaleDateString('en-US', { month: 'short' })}
+                  </div>
+                  <div className="text-2xl font-black text-white">
+                    {new Date(event.start * 1000).getDate()}
+                  </div>
+                </div>
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-start justify-between gap-2 mb-1">
+                  <h3 className="font-bold text-white group-hover:text-[#ccff00] transition-colors line-clamp-1 uppercase tracking-wide">
+                    {event.title}
+                  </h3>
+                  {isUpcoming && (
+                    <Badge className="flex-shrink-0 text-xs bg-[#ff0040] text-white border-0 font-bold uppercase">
+                      {relativeTime}
+                    </Badge>
+                  )}
+                </div>
+
+                <div className="flex items-center gap-2 text-xs text-gray-400 flex-wrap">
+                  <span className="flex items-center gap-1">
+                    <Clock className="h-3 w-3 text-[#ccff00]" />
+                    {formatTime(event.start)}
+                  </span>
+                  {event.location && (
+                    <span className="flex items-center gap-1 truncate">
+                      <MapPin className="h-3 w-3 flex-shrink-0 text-[#ff0040]" />
+                      <span className="truncate">{event.location}</span>
+                    </span>
+                  )}
+                  <TrustBadge pubkey={event.pubkey} size="sm" />
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </Link>
+    );
+  }
+
+  return (
+    <Link to={`/event/${event.pubkey}/${event.identifier}`}>
+      <Card className="group overflow-hidden hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 border-border/50 hover:border-primary/30">
+        {/* Image */}
+        <div className="relative aspect-[16/9] overflow-hidden bg-muted">
+          {event.image ? (
+            <img
+              src={event.image}
+              alt={event.title}
+              className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+            />
+          ) : (
+            <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-primary/20 to-accent/20">
+              <Calendar className="h-12 w-12 text-primary/40" />
+            </div>
+          )}
+          {/* Date overlay */}
+          <div className="absolute top-3 left-3">
+            <div className="bg-background/95 backdrop-blur-sm rounded-lg px-3 py-2 text-center shadow-lg">
+              <div className="text-xs font-medium text-primary uppercase">
+                {new Date(event.start * 1000).toLocaleDateString('en-US', { month: 'short' })}
+              </div>
+              <div className="text-xl font-bold">
+                {new Date(event.start * 1000).getDate()}
+              </div>
+            </div>
+          </div>
+          {/* Type badges */}
+          {event.types.length > 0 && (
+            <div className="absolute top-3 right-3 flex flex-wrap gap-1">
+              {event.types.slice(0, 2).map((type) => (
+                <Badge
+                  key={type}
+                  className="bg-primary text-primary-foreground"
+                >
+                  {EVENT_TYPE_LABELS[type] || type}
+                </Badge>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <CardHeader className="pb-2">
+          {/* Name Display at Top */}
+          <div className="mb-3 pb-2 border-b border-[#ccff00]/20">
+            <div className="flex items-center gap-2">
+              <Avatar className="h-8 w-8 border border-[#ccff00]/30">
+                <AvatarImage src={metadata?.picture} alt={displayName} />
+                <AvatarFallback className="text-xs bg-[#ccff00]/20 text-[#ccff00]">
+                  {displayName.slice(0, 2).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <h4 className="font-bold text-white text-sm truncate">{displayName}</h4>
+                  <TrustBadge pubkey={event.pubkey} size="sm" />
+                </div>
+                {metadata?.nip05 && (
+                  <div className="flex items-center gap-1 text-xs">
+                    <div className="w-1.5 h-1.5 rounded-full bg-[#ccff00]" />
+                    <span className="text-[#ccff00] font-bold truncate">{metadata.nip05}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-start justify-between gap-2">
+            <h3 className="font-bold text-lg leading-tight text-white group-hover:text-[#ccff00] transition-colors line-clamp-2 uppercase">
+              {event.title}
+            </h3>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3 text-sm text-gray-400">
+            <span className="flex items-center gap-1">
+              <Calendar className="h-4 w-4 text-[#ccff00]" />
+              {formatDate(event.start)}
+            </span>
+            <span className="flex items-center gap-1">
+              <Clock className="h-4 w-4 text-[#ff6600]" />
+              {formatTime(event.start)}
+            </span>
+          </div>
+
+          {event.location && (
+            <p className="text-sm text-gray-400 flex items-center gap-1 line-clamp-1">
+              <MapPin className="h-4 w-4 flex-shrink-0 text-[#ff0040]" />
+              {event.location}
+            </p>
+          )}
+        </CardHeader>
+
+        <CardContent className="pb-4">
+          {event.description && (
+            <p className="text-sm text-gray-400 line-clamp-2">
+              {event.description}
+            </p>
+          )}
+
+          <div className="flex items-center justify-end mt-4 pt-4 border-t border-[#ccff00]/20">
+            <div className="flex items-center gap-2" onClick={(e) => e.preventDefault()}>
+              <ZapButton target={event.event} className="text-gray-400 hover:text-[#ccff00]" />
+              {/* More options menu */}
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    className="h-8 w-8 text-gray-400 hover:text-white"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <MoreVertical className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-40">
+                  {!isOwner && (
+                    <DropdownMenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setShowReportDialog(true);
+                      }}
+                      className="text-red-500 focus:text-red-500"
+                    >
+                      <Flag className="h-4 w-4 mr-2" />
+                      Report
+                    </DropdownMenuItem>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Report Dialog */}
+      <ReportDialog
+        open={showReportDialog}
+        onOpenChange={setShowReportDialog}
+        targetType="event"
+        targetPubkey={event.pubkey}
+        targetEventId={event.id}
+        targetTitle={event.title}
+      />
+    </Link>
+  );
+}
+
+export function EventCardSkeleton({ compact = false }: { compact?: boolean }) {
+  if (compact) {
+    return (
+      <Card>
+        <CardContent className="p-4">
+          <div className="flex items-start gap-4">
+            <Skeleton className="w-14 h-16 rounded-lg" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-5 w-3/4" />
+              <Skeleton className="h-4 w-1/2" />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="overflow-hidden">
+      <Skeleton className="aspect-[16/9] w-full" />
+      <CardHeader className="pb-2">
+        <Skeleton className="h-6 w-3/4" />
+        <Skeleton className="h-4 w-1/2" />
+        <Skeleton className="h-4 w-2/3" />
+      </CardHeader>
+      <CardContent className="pb-4">
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-4/5" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/src/components/FollowListManager.tsx b/src/src/components/FollowListManager.tsx
new file mode 100644
index 0000000..694cbc4
--- /dev/null
+++ b/src/src/components/FollowListManager.tsx
@@ -0,0 +1,276 @@
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useFollowing, useFollowers, useFollowActions } from '@/hooks/useFollowing';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { genUserName } from '@/lib/genUserName';
+import { Users, UserPlus, UserMinus, Loader2, AlertCircle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+function FollowingUserCard({ pubkey, onUnfollow }: { pubkey: string; onUnfollow: (pubkey: string) => void }) {
+  const author = useAuthor(pubkey);
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(pubkey);
+  const [isUnfollowing, setIsUnfollowing] = useState(false);
+
+  const handleUnfollow = async () => {
+    setIsUnfollowing(true);
+    await onUnfollow(pubkey);
+    setIsUnfollowing(false);
+  };
+
+  return (
+    <div className="flex items-center justify-between p-3 bg-black/50 rounded-lg border border-gray-700 hover:border-[#ff0040]/50 transition-all">
+      <div className="flex items-center gap-3 flex-1 min-w-0">
+        <Avatar className="h-10 w-10 border-2 border-[#ff0040]/30">
+          <AvatarImage src={metadata?.picture} alt={displayName} />
+          <AvatarFallback className="bg-black text-[#ff0040] text-xs">
+            {displayName.slice(0, 2).toUpperCase()}
+          </AvatarFallback>
+        </Avatar>
+        <div className="flex-1 min-w-0">
+          <div className="font-bold text-white truncate">{displayName}</div>
+          {metadata?.nip05 && (
+            <div className="flex items-center gap-1 text-xs">
+              <div className="w-1.5 h-1.5 rounded-full bg-[#ccff00]" />
+              <span className="text-[#ccff00] truncate">{metadata.nip05}</span>
+            </div>
+          )}
+          {!metadata?.nip05 && (
+            <div className="text-xs text-gray-500 truncate font-mono">
+              {pubkey.slice(0, 8)}...{pubkey.slice(-8)}
+            </div>
+          )}
+        </div>
+      </div>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={handleUnfollow}
+        disabled={isUnfollowing}
+        className="gap-1 border-gray-600 hover:border-red-500 hover:text-red-500"
+      >
+        {isUnfollowing ? (
+          <Loader2 className="h-3 w-3 animate-spin" />
+        ) : (
+          <UserMinus className="h-3 w-3" />
+        )}
+        Unfollow
+      </Button>
+    </div>
+  );
+}
+
+function FollowerUserCard({ pubkey }: { pubkey: string }) {
+  const author = useAuthor(pubkey);
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(pubkey);
+
+  return (
+    <div className="flex items-center gap-3 p-3 bg-black/50 rounded-lg border border-gray-700">
+      <Avatar className="h-10 w-10 border-2 border-[#ccff00]/30">
+        <AvatarImage src={metadata?.picture} alt={displayName} />
+        <AvatarFallback className="bg-black text-[#ccff00] text-xs">
+          {displayName.slice(0, 2).toUpperCase()}
+        </AvatarFallback>
+      </Avatar>
+      <div className="flex-1 min-w-0">
+        <div className="font-bold text-white truncate">{displayName}</div>
+        {metadata?.nip05 && (
+          <div className="flex items-center gap-1 text-xs">
+            <div className="w-1.5 h-1.5 rounded-full bg-[#ccff00]" />
+            <span className="text-[#ccff00] truncate">{metadata.nip05}</span>
+          </div>
+        )}
+        {!metadata?.nip05 && (
+          <div className="text-xs text-gray-500 truncate font-mono">
+            {pubkey.slice(0, 8)}...{pubkey.slice(-8)}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function FollowListManager() {
+  const { user } = useCurrentUser();
+  const { data: following = [], isLoading: followingLoading } = useFollowing();
+  const { data: followers = [], isLoading: followersLoading } = useFollowers();
+  const { unfollow, followByIdentifier, isFollowing, isUnfollowing } = useFollowActions();
+
+  const [followInput, setFollowInput] = useState('');
+
+  const handleFollow = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!followInput.trim()) return;
+
+    await followByIdentifier(followInput.trim());
+    setFollowInput('');
+  };
+
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <Card className="bg-gradient-to-br from-purple-950/30 to-blue-950/30 border-2 border-purple-500/50">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-purple-400">
+          <Users className="h-5 w-5" />
+          Your Nostr Network
+        </CardTitle>
+        <CardDescription className="text-gray-300">
+          Manage who you follow. Following users helps build your Web of Trust and determines which spots show trust badges.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Tabs defaultValue="following" className="space-y-4">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="following" className="gap-2">
+              <UserPlus className="h-4 w-4" />
+              Following ({following.length})
+            </TabsTrigger>
+            <TabsTrigger value="followers" className="gap-2">
+              <Users className="h-4 w-4" />
+              Followers ({followers.length})
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="following" className="space-y-4">
+            {/* Add Follow Input */}
+            <form onSubmit={handleFollow} className="space-y-2">
+              <div className="flex gap-2">
+                <Input
+                  placeholder="npub1... or user@domain.com"
+                  value={followInput}
+                  onChange={(e) => setFollowInput(e.target.value)}
+                  className="flex-1"
+                  disabled={isFollowing}
+                />
+                <Button
+                  type="submit"
+                  disabled={!followInput.trim() || isFollowing}
+                  className="gap-2 bg-[#ff0040] hover:bg-[#ff0040]/90"
+                >
+                  {isFollowing ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <UserPlus className="h-4 w-4" />
+                  )}
+                  Follow
+                </Button>
+              </div>
+              <p className="text-xs text-gray-500">
+                💡 Paste a Nostr pubkey (npub1...), NIP-05 address (user@domain.com), or hex pubkey
+              </p>
+            </form>
+
+            {/* Following List */}
+            {followingLoading ? (
+              <div className="space-y-2">
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <div key={i} className="p-3 bg-black/50 rounded-lg border border-gray-700">
+                    <div className="flex items-center gap-3">
+                      <Skeleton className="h-10 w-10 rounded-full" />
+                      <div className="space-y-1 flex-1">
+                        <Skeleton className="h-4 w-32" />
+                        <Skeleton className="h-3 w-24" />
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : following.length > 0 ? (
+              <div className="space-y-2 max-h-96 overflow-y-auto">
+                {following.map((pubkey) => (
+                  <FollowingUserCard
+                    key={pubkey}
+                    pubkey={pubkey}
+                    onUnfollow={unfollow}
+                  />
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-8 border-2 border-dashed border-gray-700 rounded-lg">
+                <Users className="h-12 w-12 mx-auto mb-3 text-gray-600" />
+                <p className="text-gray-400 mb-2">You're not following anyone yet</p>
+                <p className="text-sm text-gray-500">
+                  Follow skaters to see their spots with ✅ VERIFIED badges
+                </p>
+              </div>
+            )}
+
+            {/* Trust Info */}
+            {following.length > 0 && (
+              <div className="p-4 rounded-lg bg-green-950/30 border border-green-500/30 text-sm">
+                <p className="text-green-400">
+                  <strong>✅ Trust Badges Active:</strong> Spots created by people you follow will now show VERIFIED badges.
+                  Spots by their friends will show TRUSTED badges.
+                </p>
+              </div>
+            )}
+          </TabsContent>
+
+          <TabsContent value="followers" className="space-y-4">
+            {followersLoading ? (
+              <div className="space-y-2">
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <div key={i} className="p-3 bg-black/50 rounded-lg border border-gray-700">
+                    <div className="flex items-center gap-3">
+                      <Skeleton className="h-10 w-10 rounded-full" />
+                      <div className="space-y-1 flex-1">
+                        <Skeleton className="h-4 w-32" />
+                        <Skeleton className="h-3 w-24" />
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : followers.length > 0 ? (
+              <div className="space-y-2 max-h-96 overflow-y-auto">
+                {followers.map((pubkey) => (
+                  <FollowerUserCard key={pubkey} pubkey={pubkey} />
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-8 border-2 border-dashed border-gray-700 rounded-lg">
+                <Users className="h-12 w-12 mx-auto mb-3 text-gray-600" />
+                <p className="text-gray-400 mb-2">No followers yet</p>
+                <p className="text-sm text-gray-500">
+                  Share your Nostr profile to gain followers!
+                </p>
+              </div>
+            )}
+          </TabsContent>
+        </Tabs>
+
+        {/* Info Card */}
+        <Card className="bg-blue-950/30 border-2 border-blue-500/50 mt-6">
+          <CardHeader>
+            <CardTitle className="text-sm text-blue-400">💡 How Following Affects Trust Badges</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm text-gray-300">
+            <p>
+              <strong className="text-white">✅ VERIFIED (Green):</strong> Spots created by people you directly follow
+            </p>
+            <p>
+              <strong className="text-white">🟡 TRUSTED (Yellow):</strong> Spots created by people your friends follow (2 hops)
+            </p>
+            <p>
+              <strong className="text-white">⚪ Unverified:</strong> Spots by users with no connection to your network
+            </p>
+            <p className="text-xs text-blue-400 mt-4">
+              💡 Tip: Follow active skateboarders to see more verified spots and build your trust network!
+            </p>
+          </CardContent>
+        </Card>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/src/components/FounderFollow.tsx b/src/src/components/FounderFollow.tsx
new file mode 100644
index 0000000..282ba3f
--- /dev/null
+++ b/src/src/components/FounderFollow.tsx
@@ -0,0 +1,320 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { useFollowActions, useIsFollowing } from '@/hooks/useFollowing';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useToast } from '@/hooks/useToast';
+import { genUserName } from '@/lib/genUserName';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import { Progress } from '@/components/ui/progress';
+import { Badge } from '@/components/ui/badge';
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogDescription 
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { 
+  Heart, 
+  CheckCircle2, 
+  Sparkles, 
+  UserPlus,
+  Crown,
+  Zap,
+} from 'lucide-react';
+
+// The founder's npub - decode to hex pubkey
+const FOUNDER_PUBKEY = '20e7c953439e66f3882ab96fe0faa8ba246d6fb12c03b0cb4e2dc4623b8bcb21';
+const HOLD_DURATION = 3000; // 3 seconds
+
+interface FounderFollowProps {
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+  showBadge?: boolean;
+}
+
+export function FounderFollow({ className, size = 'md', showBadge = true }: FounderFollowProps) {
+  const { user } = useCurrentUser();
+  const { follow } = useFollowActions();
+  const isFollowing = useIsFollowing(FOUNDER_PUBKEY);
+  const author = useAuthor(FOUNDER_PUBKEY);
+  const { toast } = useToast();
+  
+  const [isHolding, setIsHolding] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [showConfetti, setShowConfetti] = useState(false);
+  const [showDialog, setShowDialog] = useState(false);
+  
+  const holdTimer = useRef<NodeJS.Timeout | null>(null);
+  const progressInterval = useRef<NodeJS.Timeout | null>(null);
+  const startTime = useRef<number>(0);
+
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(FOUNDER_PUBKEY);
+  const avatar = metadata?.picture;
+
+  const sizeClasses = {
+    sm: 'h-10 w-10',
+    md: 'h-14 w-14',
+    lg: 'h-20 w-20',
+  };
+
+  const cleanup = useCallback(() => {
+    if (holdTimer.current) {
+      clearTimeout(holdTimer.current);
+      holdTimer.current = null;
+    }
+    if (progressInterval.current) {
+      clearInterval(progressInterval.current);
+      progressInterval.current = null;
+    }
+    setIsHolding(false);
+    setProgress(0);
+  }, []);
+
+  const handleHoldComplete = useCallback(async () => {
+    cleanup();
+    
+    if (!user) {
+      toast({
+        title: 'Login Required',
+        description: 'Please log in to follow the founder',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (isFollowing) {
+      toast({
+        title: 'Already Following',
+        description: `You're already following ${displayName}!`,
+      });
+      return;
+    }
+
+    try {
+      await follow(FOUNDER_PUBKEY);
+      setShowConfetti(true);
+      setShowDialog(true);
+      
+      // Hide confetti after animation
+      setTimeout(() => setShowConfetti(false), 3000);
+    } catch (error) {
+      console.error('[FounderFollow] Failed to follow:', error);
+    }
+  }, [user, isFollowing, follow, displayName, cleanup, toast]);
+
+  const handleHoldStart = useCallback((e: React.TouchEvent | React.MouseEvent) => {
+    e.preventDefault();
+    
+    if (isFollowing) {
+      toast({
+        title: 'Already Following',
+        description: `You're already following ${displayName}!`,
+      });
+      return;
+    }
+
+    setIsHolding(true);
+    startTime.current = Date.now();
+
+    // Progress animation
+    progressInterval.current = setInterval(() => {
+      const elapsed = Date.now() - startTime.current;
+      const newProgress = Math.min((elapsed / HOLD_DURATION) * 100, 100);
+      setProgress(newProgress);
+      
+      if (newProgress >= 100) {
+        handleHoldComplete();
+      }
+    }, 16); // ~60fps
+
+    // Timeout as backup
+    holdTimer.current = setTimeout(handleHoldComplete, HOLD_DURATION);
+  }, [isFollowing, displayName, handleHoldComplete, toast]);
+
+  const handleHoldEnd = useCallback(() => {
+    cleanup();
+  }, [cleanup]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return cleanup;
+  }, [cleanup]);
+
+  return (
+    <>
+      <div className={cn('relative inline-block', className)}>
+        {/* Confetti effect */}
+        {showConfetti && (
+          <div className="absolute inset-0 pointer-events-none overflow-visible z-50">
+            {Array.from({ length: 20 }).map((_, i) => (
+              <div
+                key={i}
+                className="absolute animate-confetti"
+                style={{
+                  left: '50%',
+                  top: '50%',
+                  width: '8px',
+                  height: '8px',
+                  borderRadius: '50%',
+                  backgroundColor: ['#ff0040', '#ccff00', '#ff6600', '#00ccff', '#9933ff'][i % 5],
+                  animationDelay: `${i * 0.05}s`,
+                  transform: `rotate(${i * 18}deg) translateY(-40px)`,
+                }}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Avatar with hold effect */}
+        <div
+          onMouseDown={handleHoldStart}
+          onMouseUp={handleHoldEnd}
+          onMouseLeave={handleHoldEnd}
+          onTouchStart={handleHoldStart}
+          onTouchEnd={handleHoldEnd}
+          onTouchCancel={handleHoldEnd}
+          className={cn(
+            'relative cursor-pointer transition-all duration-200 select-none',
+            isHolding && 'scale-110'
+          )}
+        >
+          {/* Progress ring */}
+          {isHolding && (
+            <svg 
+              className="absolute -inset-1 z-10 -rotate-90"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                r="46"
+                fill="none"
+                stroke="#ff6600"
+                strokeWidth="4"
+                strokeDasharray={`${progress * 2.89} 289`}
+                className="drop-shadow-[0_0_8px_#ff6600]"
+              />
+            </svg>
+          )}
+          
+          {/* Glow effect */}
+          <div 
+            className={cn(
+              'absolute -inset-2 rounded-full bg-gradient-to-r from-[#ff6600] to-[#ff0040] opacity-0 blur-lg transition-opacity duration-300',
+              isHolding && 'opacity-60',
+              isFollowing && 'opacity-30'
+            )} 
+          />
+
+          <Avatar 
+            className={cn(
+              sizeClasses[size],
+              'border-2 transition-all duration-200',
+              isFollowing ? 'border-[#ccff00]' : 'border-[#ff6600]/50',
+              isHolding && 'border-[#ff6600] shadow-[0_0_20px_rgba(255,102,0,0.5)]'
+            )}
+          >
+            <AvatarImage src={avatar} alt={displayName} />
+            <AvatarFallback className="bg-gradient-to-br from-[#ff6600] to-[#ff0040] text-white font-black">
+              {displayName.slice(0, 2).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+
+          {/* Following indicator */}
+          {isFollowing && showBadge && (
+            <div className="absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-[#ccff00] border-2 border-black flex items-center justify-center">
+              <CheckCircle2 className="h-3 w-3 text-black" />
+            </div>
+          )}
+
+          {/* Crown for founder */}
+          <div className="absolute -top-2 left-1/2 -translate-x-1/2">
+            <Crown className="h-4 w-4 text-yellow-400 drop-shadow-[0_0_4px_rgba(250,204,21,0.8)]" />
+          </div>
+        </div>
+
+        {/* Hold hint text */}
+        {!isFollowing && !isHolding && (
+          <p className="text-[10px] text-center text-muted-foreground mt-1.5 max-w-[80px]">
+            Hold to follow founder
+          </p>
+        )}
+
+        {/* Holding progress text */}
+        {isHolding && (
+          <p className="text-[10px] text-center text-[#ff6600] mt-1.5 font-bold animate-pulse">
+            {Math.floor(progress)}% Hold...
+          </p>
+        )}
+      </div>
+
+      {/* Success Dialog */}
+      <Dialog open={showDialog} onOpenChange={setShowDialog}>
+        <DialogContent className="bg-black/95 border-2 border-[#ccff00]/50 max-w-sm">
+          <DialogHeader>
+            <DialogTitle className="text-center text-2xl font-black text-[#ccff00] flex items-center justify-center gap-2">
+              <Sparkles className="h-6 w-6" />
+              Welcome!
+              <Sparkles className="h-6 w-6" />
+            </DialogTitle>
+            <DialogDescription className="text-center text-gray-300 pt-2">
+              You're now following the SkateSpots founder!
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex flex-col items-center py-6 space-y-4">
+            <Avatar className="h-24 w-24 border-4 border-[#ccff00] shadow-[0_0_30px_rgba(204,255,0,0.3)]">
+              <AvatarImage src={avatar} alt={displayName} />
+              <AvatarFallback className="bg-gradient-to-br from-[#ff6600] to-[#ff0040] text-white text-2xl font-black">
+                {displayName.slice(0, 2).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+
+            <div className="text-center">
+              <h3 className="font-black text-xl text-white">{displayName}</h3>
+              <Badge className="mt-2 bg-gradient-to-r from-[#ff6600] to-[#ff0040] text-white">
+                <Crown className="h-3 w-3 mr-1" />
+                Founder
+              </Badge>
+            </div>
+
+            <div className="text-center text-sm text-muted-foreground max-w-xs">
+              <p>Stay connected to get updates on new features, community events, and skate spot discoveries!</p>
+            </div>
+
+            <Button 
+              onClick={() => setShowDialog(false)}
+              className="w-full bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold"
+            >
+              <Zap className="h-4 w-4 mr-2" />
+              Let's Go!
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* CSS for confetti animation */}
+      <style>{`
+        @keyframes confetti {
+          0% {
+            transform: rotate(var(--rotation)) translateY(0) scale(1);
+            opacity: 1;
+          }
+          100% {
+            transform: rotate(var(--rotation)) translateY(-100px) scale(0);
+            opacity: 0;
+          }
+        }
+        .animate-confetti {
+          animation: confetti 1s ease-out forwards;
+        }
+      `}</style>
+    </>
+  );
+}
+
+export default FounderFollow;
diff --git a/src/src/components/GearSwapItemCard.tsx b/src/src/components/GearSwapItemCard.tsx
new file mode 100644
index 0000000..9ec8572
--- /dev/null
+++ b/src/src/components/GearSwapItemCard.tsx
@@ -0,0 +1,296 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { nip19 } from 'nostr-tools';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { genUserName } from '@/lib/genUserName';
+import { getSkateboardRating, getTrustLevel, SELLER_TRUST_BADGES } from '@/lib/skateboardRating';
+import { GEAR_CONDITIONS, GEAR_CATEGORIES, PRICE_TYPES, formatPrice, type MarketplaceItem } from '@/lib/types';
+import {
+  MessageCircle,
+  MapPin,
+  Search,
+  Tag,
+  CheckCircle,
+  ShieldCheck,
+  AlertTriangle,
+  MoreVertical,
+  Flag,
+} from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ReportDialog } from '@/components/ReportDialog';
+import { formatDistanceToNow } from 'date-fns';
+
+interface GearSwapItemCardProps {
+  item: MarketplaceItem;
+  trustScore?: number;
+  salesCount: number;
+  isFollowing?: boolean;
+}
+
+export function GearSwapItemCard({ item, trustScore, salesCount, isFollowing }: GearSwapItemCardProps) {
+  const { user } = useCurrentUser();
+  const navigate = useNavigate();
+  const author = useAuthor(item.pubkey);
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(item.pubkey);
+  const avatar = metadata?.picture;
+  const [showReportDialog, setShowReportDialog] = useState(false);
+
+  const npub = nip19.npubEncode(item.pubkey);
+  const isOwnListingCheck = user?.pubkey === item.pubkey;
+
+  // Format price display
+  const priceDisplay = formatPrice(item.price, item.priceType);
+
+  const timeAgo = formatDistanceToNow(new Date(item.createdAt * 1000), { addSuffix: true });
+
+  const primaryImage = item.images[0];
+  const isWTB = item.listingType === 'wtb';
+  
+  // Get condition info
+  const conditionInfo = item.condition ? GEAR_CONDITIONS[item.condition] : null;
+  
+  // Get category label
+  const categoryLabel = item.category?.find((c) => GEAR_CATEGORIES[c as keyof typeof GEAR_CATEGORIES])
+    ? GEAR_CATEGORIES[item.category.find((c) => GEAR_CATEGORIES[c as keyof typeof GEAR_CATEGORIES]) as keyof typeof GEAR_CATEGORIES]
+    : null;
+
+  // Get price type label
+  const priceTypeLabel = item.priceType ? PRICE_TYPES[item.priceType]?.label : null;
+
+  // Skateboard rating for seller
+  const sellerRating = getSkateboardRating(salesCount);
+  
+  // Trust level
+  const trustLevel = getTrustLevel(trustScore);
+  const trustBadge = SELLER_TRUST_BADGES[trustLevel];
+
+  const isOwnListing = user?.pubkey === item.pubkey;
+
+  return (
+    <Card
+      className={`bg-black/90 border-2 group cursor-pointer transition-all hover:scale-[1.02] ${
+        isWTB
+          ? 'border-blue-500/20 hover:border-blue-500/60 hover:shadow-[0_0_30px_rgba(59,130,246,0.2)]'
+          : 'border-orange-500/20 hover:border-orange-500/60 hover:shadow-[0_0_30px_rgba(255,102,0,0.2)]'
+      }`}
+      onClick={() => navigate(`/messages/${npub}`)}
+    >
+      <CardContent className="p-0">
+        {/* Image */}
+        <div className="relative aspect-square overflow-hidden rounded-t-lg">
+          {primaryImage ? (
+            <img
+              src={primaryImage}
+              alt={item.title}
+              className="w-full h-full object-cover transition-transform group-hover:scale-105"
+            />
+          ) : (
+            <div
+              className={`w-full h-full flex items-center justify-center ${
+                isWTB ? 'bg-blue-950/50' : 'bg-orange-950/50'
+              }`}
+            >
+              <span className="text-6xl">{isWTB ? '🔍' : '🛹'}</span>
+            </div>
+          )}
+          
+          {/* WTB Badge */}
+          {isWTB && (
+            <Badge className="absolute top-2 left-2 bg-blue-500 text-white border-0 shadow-lg">
+              <Search className="h-3 w-3 mr-1" />
+              WTB
+            </Badge>
+          )}
+          
+          {/* Price Badge */}
+          <div className="absolute top-2 right-2">
+            <Badge
+              className={`text-sm font-bold border-0 shadow-lg ${
+                item.priceType === 'free'
+                  ? 'bg-green-500 text-white'
+                  : isWTB
+                  ? 'bg-blue-500 text-white'
+                  : 'bg-orange-500 text-white'
+              }`}
+            >
+              {priceDisplay}
+            </Badge>
+          </div>
+
+          {/* Condition Badge (bottom left) */}
+          {conditionInfo && (
+            <Badge
+              variant="outline"
+              className="absolute bottom-2 left-2 bg-black/80 border-gray-600 text-xs backdrop-blur-sm"
+            >
+              {conditionInfo.emoji} {conditionInfo.label}
+            </Badge>
+          )}
+          
+          {/* More options menu */}
+          {!isOwnListingCheck && (
+            <div className="absolute bottom-2 right-2">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    className="h-7 w-7 bg-black/80 backdrop-blur-sm text-gray-400 hover:text-white"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <MoreVertical className="h-3.5 w-3.5" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-40">
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setShowReportDialog(true);
+                    }}
+                    className="text-red-500 focus:text-red-500"
+                  >
+                    <Flag className="h-4 w-4 mr-2" />
+                    Report
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          )}
+        </div>
+
+        {/* Content */}
+        <div className="p-4">
+          {/* Title */}
+          <h3
+            className={`font-bold text-sm uppercase mb-1 line-clamp-1 ${
+              isWTB ? 'text-blue-400' : 'text-orange-400'
+            }`}
+          >
+            {item.title}
+          </h3>
+
+          {/* Category + Size */}
+          <div className="flex flex-wrap gap-1 mb-3">
+            {categoryLabel && (
+              <Badge variant="outline" className="text-[10px] border-gray-700 text-gray-400">
+                {categoryLabel}
+              </Badge>
+            )}
+            {item.size && (
+              <Badge variant="outline" className="text-[10px] border-gray-700 text-gray-400">
+                {item.size}
+              </Badge>
+            )}
+          </div>
+
+          {/* Location */}
+          {item.location && (
+            <div className="flex items-center gap-1 text-xs text-gray-500 mb-3">
+              <MapPin className="h-3 w-3 text-orange-500" />
+              <span className="truncate">{item.location}</span>
+            </div>
+          )}
+
+          {/* Divider */}
+          <div className="border-t border-gray-800 pt-3">
+            {/* Seller Info */}
+            <div className="flex items-center gap-2 mb-2">
+              <Avatar className="h-6 w-6 border border-gray-700">
+                <AvatarImage src={avatar} alt={displayName} />
+                <AvatarFallback className="bg-gray-800 text-gray-400 text-xs">
+                  {displayName.slice(0, 2).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <span className="text-xs text-gray-400 truncate flex-1">{displayName}</span>
+              
+              {/* Trust Badge */}
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Badge
+                      variant="outline"
+                      className={`text-[10px] px-1.5 gap-0.5 ${trustBadge.className}`}
+                    >
+                      {trustLevel === 'verified' && <CheckCircle className="h-3 w-3" />}
+                      {trustLevel === 'trusted' && <ShieldCheck className="h-3 w-3" />}
+                      {trustLevel === 'new' && <AlertTriangle className="h-3 w-3" />}
+                      {trustBadge.label}
+                    </Badge>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">
+                    <p className="text-xs">{trustBadge.description}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+
+            {/* Skateboard Rating */}
+            <div className="flex items-center justify-between">
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div className="flex items-center gap-1">
+                      {sellerRating.rating > 0 ? (
+                        <span className="text-sm">{sellerRating.display}</span>
+                      ) : (
+                        <span className="text-xs text-gray-500">🛹 New seller</span>
+                      )}
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">
+                    <div className="text-center">
+                      <p className="font-bold">{salesCount} sale{salesCount !== 1 ? 's' : ''}</p>
+                      <p className="text-xs text-muted-foreground">{sellerRating.label}</p>
+                    </div>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+              
+              <span className="text-[10px] text-gray-600">{timeAgo}</span>
+            </div>
+          </div>
+
+          {/* Contact Button */}
+          <Button
+            variant="outline"
+            size="sm"
+            className={`w-full mt-3 gap-2 ${
+              isWTB
+                ? 'border-blue-500/50 text-blue-400 hover:bg-blue-500/10'
+                : 'border-orange-500/50 text-orange-400 hover:bg-orange-500/10'
+            }`}
+            onClick={(e) => {
+              e.stopPropagation();
+              navigate(`/messages/${npub}`);
+            }}
+          >
+            <MessageCircle className="h-4 w-4" />
+            {isWTB ? 'I Have This!' : 'Contact Seller'}
+          </Button>
+        </div>
+      </CardContent>
+
+      {/* Report Dialog */}
+      <ReportDialog
+        open={showReportDialog}
+        onOpenChange={setShowReportDialog}
+        targetType="listing"
+        targetPubkey={item.pubkey}
+        targetEventId={item.id}
+        targetTitle={item.title}
+      />
+    </Card>
+  );
+}
diff --git a/src/src/components/LanguageToggle.tsx b/src/src/components/LanguageToggle.tsx
new file mode 100644
index 0000000..eaa1abc
--- /dev/null
+++ b/src/src/components/LanguageToggle.tsx
@@ -0,0 +1,122 @@
+import { Languages } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useTranslation, type Language } from '@/contexts/LanguageContext';
+import { cn } from '@/lib/utils';
+
+interface LanguageOption {
+  code: Language;
+  name: string;
+  nativeName: string;
+  flag: string;
+}
+
+const languages: LanguageOption[] = [
+  { code: 'en', name: 'English', nativeName: 'English', flag: '🇬🇧' },
+  { code: 'es', name: 'Spanish', nativeName: 'Español', flag: '🇪🇸' },
+];
+
+interface LanguageToggleProps {
+  /** Show only the flag icon (compact mode) */
+  compact?: boolean;
+  /** Additional class names */
+  className?: string;
+  /** Variant style */
+  variant?: 'default' | 'outline' | 'ghost';
+}
+
+/**
+ * Language toggle dropdown for switching between English and Spanish
+ */
+export function LanguageToggle({ compact = false, className, variant = 'ghost' }: LanguageToggleProps) {
+  const { language, setLanguage, t } = useTranslation();
+
+  const currentLanguage = languages.find(l => l.code === language) || languages[0];
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant={variant}
+          size={compact ? 'icon' : 'default'}
+          className={cn(
+            'gap-2',
+            compact ? 'w-10 h-10' : 'px-3',
+            className
+          )}
+        >
+          <span className="text-lg">{currentLanguage.flag}</span>
+          {!compact && (
+            <>
+              <span className="hidden sm:inline">{currentLanguage.nativeName}</span>
+              <Languages className="h-4 w-4 sm:hidden" />
+            </>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-48">
+        {languages.map((lang) => (
+          <DropdownMenuItem
+            key={lang.code}
+            onClick={() => setLanguage(lang.code)}
+            className={cn(
+              'flex items-center gap-3 cursor-pointer',
+              language === lang.code && 'bg-primary/10 text-primary'
+            )}
+          >
+            <span className="text-lg">{lang.flag}</span>
+            <div className="flex flex-col">
+              <span className="font-medium">{lang.nativeName}</span>
+              {lang.nativeName !== lang.name && (
+                <span className="text-xs text-muted-foreground">{lang.name}</span>
+              )}
+            </div>
+            {language === lang.code && (
+              <span className="ml-auto text-primary">✓</span>
+            )}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+/**
+ * Simple language selector for settings page
+ */
+export function LanguageSelector() {
+  const { language, setLanguage, t } = useTranslation();
+
+  return (
+    <div className="space-y-3">
+      <label className="text-sm font-medium">{t('settings.selectLanguage')}</label>
+      <div className="grid grid-cols-2 gap-3">
+        {languages.map((lang) => (
+          <button
+            key={lang.code}
+            onClick={() => setLanguage(lang.code)}
+            className={cn(
+              'flex items-center gap-3 p-4 rounded-xl border-2 transition-all',
+              language === lang.code
+                ? 'border-primary bg-primary/10 shadow-lg shadow-primary/20'
+                : 'border-border hover:border-primary/50 hover:bg-muted/50'
+            )}
+          >
+            <span className="text-2xl">{lang.flag}</span>
+            <div className="text-left">
+              <div className="font-bold">{lang.nativeName}</div>
+              {lang.nativeName !== lang.name && (
+                <div className="text-xs text-muted-foreground">{lang.name}</div>
+              )}
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/src/components/Layout.tsx b/src/src/components/Layout.tsx
new file mode 100644
index 0000000..e3d6e96
--- /dev/null
+++ b/src/src/components/Layout.tsx
@@ -0,0 +1,769 @@
+import { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { SasquatchGuide } from '@/components/SasquatchGuide';
+import { useSasquatchGuide } from '@/hooks/useSasquatchGuide';
+import { BackupReminder } from '@/components/BackupReminder';
+import { LanguageToggle } from '@/components/LanguageToggle';
+import { useCashu } from '@/hooks/wallet/useCashu';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useTranslation } from '@/contexts/LanguageContext';
+import { useLoggedInAccounts } from '@/hooks/useLoggedInAccounts';
+
+import {
+  MapPin,
+  Calendar,
+  Menu,
+  Home,
+  Wallet,
+  Settings,
+  GraduationCap,
+  BarChart3,
+  MoreHorizontal,
+  Info,
+  Bookmark,
+  MessageCircle,
+  Gift,
+  LogOut,
+  User,
+  LogIn,
+  Plus,
+  CheckCircle2,
+  Database,
+  Package,
+  Zap,
+} from 'lucide-react';
+import { OfflineIndicator } from '@/components/OfflineIndicator';
+import { UserStatusIndicator } from '@/components/UserStatusIndicator';
+import { SetStatusDialog } from '@/components/SetStatusDialog';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import { useAuthor } from '@/hooks/useAuthor';
+import { genUserName } from '@/lib/genUserName';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+// Nav item keys that map to translation keys
+const navItemKeys = [
+  { href: '/', labelKey: 'nav.home', icon: Home },
+  { href: '/map', labelKey: 'nav.map', icon: MapPin },
+  { href: '/lab', labelKey: 'nav.lab', icon: GraduationCap },
+  { href: '/events', labelKey: 'nav.events', icon: Calendar },
+];
+
+// Format sats for display (e.g., 1234 -> "1.2k", 12345 -> "12k")
+function formatSatsCompact(sats: number): string {
+  if (sats >= 1000000) {
+    return `${(sats / 1000000).toFixed(1)}M`;
+  }
+  if (sats >= 1000) {
+    return `${(sats / 1000).toFixed(sats >= 10000 ? 0 : 1)}k`;
+  }
+  return sats.toString();
+}
+
+function NavLink({
+  href,
+  label,
+  icon: Icon,
+  isActive,
+  onClick,
+}: {
+  href: string;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+  isActive: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <Link
+      to={href}
+      onClick={onClick}
+      className={cn(
+        'flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200',
+        isActive
+          ? 'bg-primary text-primary-foreground shadow-lg shadow-primary/25'
+          : 'hover:bg-muted text-muted-foreground hover:text-foreground'
+      )}
+    >
+      <Icon className="h-5 w-5" />
+      <span className="font-medium">{label}</span>
+    </Link>
+  );
+}
+
+// Mobile header user menu - shows when logged in with dropdown for actions
+function MobileHeaderUserMenu({ 
+  pubkey, 
+  onLogout,
+  onSetStatus,
+}: { 
+  pubkey: string;
+  onLogout: () => void;
+  onSetStatus: () => void;
+}) {
+  const author = useAuthor(pubkey);
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(pubkey);
+  const avatar = metadata?.picture;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button className="touch-manipulation relative flex items-center gap-2 px-2 py-1.5 rounded-full bg-green-500/10 border border-green-500/30 active:scale-95 transition-transform">
+          <Avatar className="h-7 w-7 border-2 border-green-500/50">
+            <AvatarImage src={avatar} alt={displayName} />
+            <AvatarFallback className="bg-green-500/20 text-green-400 text-[10px] font-bold">
+              {displayName.slice(0, 2).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+          {/* Status indicator */}
+          <UserStatusIndicator pubkey={pubkey} size="sm" />
+          <span className="text-green-400 text-xs font-bold uppercase tracking-wide hidden xs:inline">
+            <CheckCircle2 className="h-3 w-3 inline mr-1" />
+            In
+          </span>
+          {/* Green online indicator dot */}
+          <span className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-green-500 border-2 border-black rounded-full xs:hidden" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56 p-2">
+        {/* User info header */}
+        <div className="px-2 py-3 mb-2 rounded-lg bg-green-500/10 border border-green-500/20">
+          <div className="flex items-center gap-3">
+            <div className="relative">
+              <Avatar className="h-10 w-10 border-2 border-green-500/50">
+                <AvatarImage src={avatar} alt={displayName} />
+                <AvatarFallback className="bg-green-500/20 text-green-400 text-sm font-bold">
+                  {displayName.slice(0, 2).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <UserStatusIndicator pubkey={pubkey} size="sm" className="absolute -bottom-1 -right-1" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="font-bold text-sm truncate">{displayName}</p>
+              <p className="text-xs text-green-500 flex items-center gap-1">
+                <CheckCircle2 className="h-3 w-3" />
+                Logged In
+              </p>
+            </div>
+          </div>
+        </div>
+        
+        {/* Set Status - highlighted */}
+        <DropdownMenuItem
+          onClick={onSetStatus}
+          className="flex items-center gap-2 cursor-pointer mb-1 bg-green-500/10 border border-green-500/30 rounded-lg"
+        >
+          <span className="relative flex h-2.5 w-2.5">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+            <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500" />
+          </span>
+          <span className="text-green-400 font-bold">Set Status</span>
+          <span className="ml-auto text-xs text-green-500">🛹</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link to="/create-spot" className="flex items-center gap-2 cursor-pointer">
+            <Plus className="h-4 w-4 text-[#ccff00]" />
+            <span className="text-[#ccff00] font-medium">Add Spot</span>
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link to="/settings" className="flex items-center gap-2 cursor-pointer">
+            <User className="h-4 w-4" />
+            My Profile
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link to="/settings?tab=mydata" className="flex items-center gap-2 cursor-pointer">
+            <Database className="h-4 w-4 text-[#ccff00]" />
+            <span className="text-[#ccff00]">My Data</span>
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link to="/stash" className="flex items-center gap-2 cursor-pointer">
+            <Package className="h-4 w-4 text-purple-400" />
+            <span className="text-purple-400">My Stash</span>
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link to="/wallet" className="flex items-center gap-2 cursor-pointer">
+            <Wallet className="h-4 w-4 text-orange-400" />
+            <span className="text-orange-400">Wallet</span>
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem 
+          onClick={onLogout}
+          className="flex items-center gap-2 cursor-pointer text-red-400"
+        >
+          <LogOut className="h-4 w-4" />
+          Log Out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function MobileNav({
+  isActive,
+  cashuBalance,
+  isLoggedIn,
+  userPubkey,
+  userAvatar,
+  userName,
+  t,
+}: {
+  isActive: (path: string) => boolean;
+  cashuBalance: number;
+  isLoggedIn: boolean;
+  userPubkey?: string;
+  userAvatar?: string;
+  userName?: string;
+  t: (key: string) => string;
+}) {
+  return (
+    <nav className="fixed bottom-0 left-0 right-0 z-50 md:hidden safe-area-bottom">
+      <div className="glass border-t border-border safe-area-left safe-area-right">
+        <div className="flex items-center justify-around px-1 py-2">
+          {navItemKeys.map((item) => (
+            <Link
+              key={item.href}
+              to={item.href}
+              className={cn(
+                'flex flex-col items-center justify-center gap-0.5 py-2 px-2 rounded-xl transition-all duration-200 min-w-[48px] min-h-[48px] touch-manipulation active:scale-95',
+                isActive(item.href)
+                  ? 'text-primary'
+                  : 'text-muted-foreground'
+              )}
+            >
+              <item.icon className={cn(
+                'h-5 w-5 transition-transform',
+                isActive(item.href) && 'scale-110'
+              )} />
+              <span className="text-[10px] font-medium leading-tight">{t(item.labelKey)}</span>
+            </Link>
+          ))}
+          {/* Wallet in mobile nav */}
+          {isLoggedIn && (
+            <Link
+              to="/wallet"
+              className={cn(
+                'flex flex-col items-center justify-center gap-0.5 py-2 px-2 rounded-xl transition-all duration-200 min-w-[48px] min-h-[48px] relative touch-manipulation active:scale-95',
+                isActive('/wallet')
+                  ? 'text-orange-500'
+                  : 'text-muted-foreground'
+              )}
+            >
+              <div className="relative">
+                <Wallet className={cn(
+                  'h-5 w-5 transition-transform',
+                  isActive('/wallet') && 'scale-110'
+                )} />
+                {cashuBalance > 0 && (
+                  <span className="absolute -top-1 -right-2 min-w-[16px] h-4 px-1 text-[8px] font-bold bg-orange-500 text-white rounded-full flex items-center justify-center">
+                    {formatSatsCompact(cashuBalance)}
+                  </span>
+                )}
+              </div>
+              <span className="text-[10px] font-medium leading-tight">{t('nav.wallet')}</span>
+            </Link>
+          )}
+          {/* Profile/Login in mobile nav */}
+          <Link
+            to={isLoggedIn ? "/settings" : "/settings"}
+            className={cn(
+              'flex flex-col items-center justify-center gap-0.5 py-2 px-2 rounded-xl transition-all duration-200 min-w-[48px] min-h-[48px] relative touch-manipulation active:scale-95',
+              isActive('/settings')
+                ? 'text-primary'
+                : 'text-muted-foreground'
+            )}
+          >
+            {isLoggedIn && userPubkey ? (
+              <div className="relative">
+                <Avatar className={cn(
+                  'h-6 w-6 border-2 transition-transform',
+                  isActive('/settings') ? 'border-primary scale-110' : 'border-gray-600'
+                )}>
+                  <AvatarImage src={userAvatar} alt={userName} />
+                  <AvatarFallback className="bg-[#ff0040]/20 text-[#ff0040] text-[8px] font-bold">
+                    {(userName || '??').slice(0, 2).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                {/* Green online indicator dot */}
+                <span className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-green-500 border-2 border-black rounded-full" />
+              </div>
+            ) : (
+              <User className="h-5 w-5" />
+            )}
+            <span className="text-[10px] font-medium leading-tight">
+              {isLoggedIn ? 'Profile' : 'Log In'}
+            </span>
+          </Link>
+        </div>
+      </div>
+      {/* Safe area spacer for notched devices */}
+      <div className="h-safe-area-bottom bg-background" />
+    </nav>
+  );
+}
+
+export function Layout({ children }: LayoutProps) {
+  const location = useLocation();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [showStatusDialog, setShowStatusDialog] = useState(false);
+  const { currentMessage, dismissCurrentMessage } = useSasquatchGuide();
+  const { user } = useCurrentUser();
+  const { totalBalance: cashuBalance, isInitialized: hasCashu } = useCashu();
+  const { t } = useTranslation();
+  const { currentUser: currentAccount, removeLogin } = useLoggedInAccounts();
+  const author = useAuthor(user?.pubkey || '');
+  const displayName = author.data?.metadata?.name ?? genUserName(user?.pubkey);
+  const userAvatar = author.data?.metadata?.picture;
+
+  const isActive = (path: string) => {
+    if (path === '/') return location.pathname === '/';
+    return location.pathname.startsWith(path);
+  };
+
+  return (
+    <div className="min-h-screen bg-black text-white">
+      {/* Desktop Header */}
+      <header className="hidden md:flex sticky top-0 z-50 border-b border-red-500/30 bg-black/95 backdrop-blur">
+        <div className="container flex items-center justify-between h-16 px-4">
+          <Link to="/" className="flex items-center gap-3 group">
+            <div className="relative">
+              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center shadow-lg">
+                <MapPin className="h-5 w-5 text-white" />
+              </div>
+            </div>
+            <span className="text-xl font-black uppercase tracking-wider neon-red" style={{
+              textShadow: '0 0 10px #ff0040, 0 0 20px #ff0040'
+            }}>SKATESPOTS</span>
+          </Link>
+
+          <nav className="flex items-center gap-1">
+            {navItemKeys.map((item) => (
+              <Link
+                key={item.href}
+                to={item.href}
+                className={cn(
+                  'flex items-center gap-2 px-4 py-2 rounded-lg transition-all duration-200 text-sm font-bold uppercase tracking-wide',
+                  isActive(item.href)
+                    ? 'text-red-500'
+                    : 'text-gray-400 hover:text-red-400'
+                )}
+              >
+                <item.icon className="h-4 w-4" />
+                {t(item.labelKey)}
+              </Link>
+            ))}
+            
+            {/* More Menu - Desktop */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button 
+                  variant="ghost" 
+                  className={cn(
+                    'flex items-center gap-2 px-4 py-2 rounded-lg transition-all duration-200 text-sm font-bold uppercase tracking-wide h-auto',
+                    (isActive('/bounties') || isActive('/stats') || isActive('/about'))
+                      ? 'text-red-500'
+                      : 'text-gray-400 hover:text-red-400'
+                  )}
+                >
+                  <MoreHorizontal className="h-4 w-4" />
+                  {t('nav.more')}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48">
+                {user && (
+                  <DropdownMenuItem asChild>
+                    <Link to="/collections" className="flex items-center gap-2 cursor-pointer">
+                      <Bookmark className="h-4 w-4" />
+                      My Collections
+                    </Link>
+                  </DropdownMenuItem>
+                )}
+                {user && (
+                  <DropdownMenuItem asChild>
+                    <Link to="/stash" className="flex items-center gap-2 cursor-pointer">
+                      <Package className="h-4 w-4 text-purple-400" />
+                      <span className="text-purple-400">My Stash</span>
+                    </Link>
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuItem asChild>
+                  <Link to="/bounties" className="flex items-center gap-2 cursor-pointer">
+                    <Gift className="h-4 w-4 text-orange-400" />
+                    <span className="text-orange-400">Map & Earn</span>
+                  </Link>
+                </DropdownMenuItem>
+
+                <DropdownMenuItem asChild>
+                  <Link to="/stats" className="flex items-center gap-2 cursor-pointer">
+                    <BarChart3 className="h-4 w-4" />
+                    {t('nav.stats')}
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem asChild>
+                  <Link to="/about" className="flex items-center gap-2 cursor-pointer">
+                    <Info className="h-4 w-4" />
+                    {t('nav.about')}
+                  </Link>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </nav>
+
+          <div className="flex items-center gap-3">
+            {/* Messages Quick Access - Desktop */}
+            {user && (
+              <Link to="/messages">
+                <Button 
+                  variant="ghost" 
+                  size="icon"
+                  className={cn(
+                    isActive('/messages') 
+                      ? "text-[#ff0040] bg-[#ff0040]/10" 
+                      : "text-gray-400 hover:text-[#ff0040] hover:bg-[#ff0040]/10"
+                  )}
+                  title="Messages"
+                >
+                  <MessageCircle className="h-5 w-5" />
+                </Button>
+              </Link>
+            )}
+            {/* Collections Quick Access - Desktop */}
+            {user && (
+              <Link to="/collections">
+                <Button 
+                  variant="ghost" 
+                  size="icon"
+                  className={cn(
+                    isActive('/collections') 
+                      ? "text-[#ccff00] bg-[#ccff00]/10" 
+                      : "text-gray-400 hover:text-[#ccff00] hover:bg-[#ccff00]/10"
+                  )}
+                  title="My Collections"
+                >
+                  <Bookmark className="h-5 w-5" />
+                </Button>
+              </Link>
+            )}
+            {/* Wallet Quick Access - Desktop */}
+            {user && (
+              <Link to="/wallet">
+                <Button 
+                  variant="ghost" 
+                  className={cn(
+                    "gap-2 px-3",
+                    isActive('/wallet') 
+                      ? "text-orange-500 bg-orange-500/10" 
+                      : "text-gray-400 hover:text-orange-400 hover:bg-orange-500/10"
+                  )}
+                >
+                  <Wallet className="h-5 w-5" />
+                  {hasCashu && cashuBalance > 0 && (
+                    <span className="text-sm font-bold">
+                      {formatSatsCompact(cashuBalance)}
+                    </span>
+                  )}
+                </Button>
+              </Link>
+            )}
+            {/* Status Quick Access - Desktop */}
+            {user && (
+              <Button 
+                variant="outline"
+                className="gap-2 px-3 border-green-500/50 text-green-400 hover:text-green-300 hover:bg-green-500/10 hover:border-green-500"
+                onClick={() => setShowStatusDialog(true)}
+                title="Set Your Status"
+              >
+                <span className="relative flex h-2.5 w-2.5">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+                  <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500" />
+                </span>
+                <span className="text-sm font-bold">Status</span>
+              </Button>
+            )}
+            {/* Offline Indicator */}
+            <OfflineIndicator />
+            {/* Language Toggle */}
+            <LanguageToggle compact className="text-gray-400 hover:text-white" />
+            <Link to="/settings">
+              <Button variant="ghost" size="icon">
+                <Settings className="h-5 w-5" />
+              </Button>
+            </Link>
+            <LoginArea className="max-w-60" />
+          </div>
+        </div>
+      </header>
+
+      {/* Mobile Header */}
+      <header className="md:hidden sticky top-0 z-50 border-b border-red-500/30 bg-black/95 backdrop-blur safe-area-top">
+        <div className="flex items-center justify-between h-14 px-3 gap-3">
+          <Link to="/" className="flex items-center gap-2 touch-manipulation active:opacity-80 flex-1 min-w-0">
+            <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center flex-shrink-0 shadow-lg">
+              <MapPin className="h-4 w-4 text-white" />
+            </div>
+            <span className="text-lg font-black uppercase neon-red" style={{
+              textShadow: '0 0 8px #ff0040'
+            }}>SKATESPOTS</span>
+          </Link>
+
+          <div className="flex items-center gap-1 flex-shrink-0">
+            {/* User menu when logged in / Login button when not */}
+            {user ? (
+              <MobileHeaderUserMenu 
+                pubkey={user.pubkey} 
+                onLogout={() => removeLogin(currentAccount?.id || '')}
+                onSetStatus={() => setShowStatusDialog(true)}
+              />
+            ) : (
+              <LoginArea compact className="flex flex-row gap-1" />
+            )}
+            
+            <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+              <SheetTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-10 w-10 touch-manipulation active:scale-95 transition-transform">
+                  <Menu className="h-5 w-5" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="right" className="w-80">
+                <div className="flex flex-col gap-6 mt-6">
+                  {/* Wallet Card - Mobile Menu */}
+                  {user && (
+                    <Link 
+                      to="/wallet" 
+                      onClick={() => setMobileMenuOpen(false)}
+                      className="block"
+                    >
+                      <div className={cn(
+                        "p-4 rounded-xl border-2 transition-all",
+                        isActive('/wallet')
+                          ? "bg-orange-500/20 border-orange-500/50"
+                          : "bg-orange-500/10 border-orange-500/30 hover:bg-orange-500/20"
+                      )}>
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-3">
+                            <div className="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center">
+                              <Wallet className="h-5 w-5 text-orange-500" />
+                            </div>
+                            <div>
+                              <p className="font-bold text-sm">{t('wallet.cashu.title')}</p>
+                              <p className="text-xs text-muted-foreground">Ecash</p>
+                            </div>
+                          </div>
+                          {hasCashu && (
+                            <div className="text-right">
+                              <p className="font-bold text-orange-500">
+                                {cashuBalance.toLocaleString()}
+                              </p>
+                              <p className="text-xs text-muted-foreground">sats</p>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </Link>
+                  )}
+
+                  <div className="flex flex-col gap-2">
+                    {navItemKeys.map((item) => (
+                      <NavLink
+                        key={item.href}
+                        href={item.href}
+                        label={t(item.labelKey)}
+                        icon={item.icon}
+                        isActive={isActive(item.href)}
+                        onClick={() => setMobileMenuOpen(false)}
+                      />
+                    ))}
+                    {user && (
+                      <NavLink
+                        href="/messages"
+                        label="Messages"
+                        icon={MessageCircle}
+                        isActive={isActive('/messages')}
+                        onClick={() => setMobileMenuOpen(false)}
+                      />
+                    )}
+                    {user && (
+                      <NavLink
+                        href="/collections"
+                        label="My Collections"
+                        icon={Bookmark}
+                        isActive={isActive('/collections')}
+                        onClick={() => setMobileMenuOpen(false)}
+                      />
+                    )}
+                    {user && (
+                      <NavLink
+                        href="/stash"
+                        label="My Stash"
+                        icon={Package}
+                        isActive={isActive('/stash')}
+                        onClick={() => setMobileMenuOpen(false)}
+                      />
+                    )}
+                    <NavLink
+                      href="/bounties"
+                      label="Map & Earn"
+                      icon={Gift}
+                      isActive={isActive('/bounties')}
+                      onClick={() => setMobileMenuOpen(false)}
+                    />
+                    <NavLink
+                      href="/stats"
+                      label={t('nav.stats')}
+                      icon={BarChart3}
+                      isActive={isActive('/stats')}
+                      onClick={() => setMobileMenuOpen(false)}
+                    />
+                    <NavLink
+                      href="/about"
+                      label={t('nav.about')}
+                      icon={Info}
+                      isActive={isActive('/about')}
+                      onClick={() => setMobileMenuOpen(false)}
+                    />
+                    <NavLink
+                      href="/settings"
+                      label={t('nav.settings')}
+                      icon={Settings}
+                      isActive={isActive('/settings')}
+                      onClick={() => setMobileMenuOpen(false)}
+                    />
+                  </div>
+                  {/* Language Toggle in Mobile Menu */}
+                  <div className="py-3 border-t">
+                    <LanguageToggle className="w-full justify-start" variant="ghost" />
+                  </div>
+                  {/* Login/Logout Section */}
+                  <div className="pt-4 border-t space-y-3">
+                    {user ? (
+                      <>
+                        {/* User Profile Card */}
+                        <div className="p-4 rounded-xl bg-gradient-to-br from-green-500/10 to-green-500/5 border border-green-500/20">
+                          <div className="flex items-center gap-3">
+                            <Avatar className="h-12 w-12 border-2 border-green-500/50">
+                              <AvatarImage src={author.data?.metadata?.picture} alt={displayName} />
+                              <AvatarFallback className="bg-[#ff0040]/20 text-[#ff0040] text-sm font-bold">
+                                {displayName.slice(0, 2).toUpperCase()}
+                              </AvatarFallback>
+                            </Avatar>
+                            <div className="flex-1 min-w-0">
+                              <p className="font-bold text-base truncate">{displayName}</p>
+                              <p className="text-sm text-green-500 flex items-center gap-1.5">
+                                <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+                                Logged In
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                        
+                        {/* Logout Button - Big and Clear */}
+                        <Button
+                          variant="outline"
+                          size="lg"
+                          className="w-full justify-center gap-3 text-red-400 border-red-500/50 hover:bg-red-500/20 hover:text-red-300 hover:border-red-500 h-12 text-base font-bold"
+                          onClick={() => {
+                            removeLogin(currentAccount?.id || '');
+                            setMobileMenuOpen(false);
+                          }}
+                        >
+                          <LogOut className="h-5 w-5" />
+                          Log Out
+                        </Button>
+                      </>
+                    ) : (
+                      <>
+                        {/* Not Logged In - Clear CTA */}
+                        <div className="p-4 rounded-xl bg-gradient-to-br from-[#ff0040]/10 to-[#ff0040]/5 border border-[#ff0040]/20 text-center">
+                          <User className="h-10 w-10 mx-auto mb-2 text-[#ff0040]/50" />
+                          <p className="font-bold text-base mb-1">Not Logged In</p>
+                          <p className="text-sm text-muted-foreground mb-4">
+                            Log in to add spots, zap skaters, and save your favorites
+                          </p>
+                          <LoginArea className="w-full justify-center" />
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </SheetContent>
+            </Sheet>
+          </div>
+        </div>
+      </header>
+
+      {/* Backup Reminder */}
+      <BackupReminder />
+
+      {/* Main Content */}
+      <main className="pb-20 md:pb-6">
+        {children}
+      </main>
+
+      {/* Footer - Desktop */}
+      <footer className="hidden md:block border-t border-gray-800 bg-black/95 py-6">
+        <div className="container px-4">
+          <div className="flex flex-col md:flex-row items-center justify-between gap-4 text-sm text-gray-400">
+            <span>Made with <span className="text-red-500">❤️</span> for the skateboarding community</span>
+            <div className="flex items-center gap-2 text-xs text-gray-500">
+              <span>Not sponsored by</span>
+              <span className="inline-flex items-center gap-1.5">
+                <img 
+                  src="https://opensats.org/favicon.ico" 
+                  alt="OpenSats" 
+                  className="h-4 w-4"
+                />
+                <span className="font-medium text-gray-400">OpenSats</span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </footer>
+
+      {/* No mobile footer - bottom nav provides navigation, keeps UI clean */}
+
+      {/* Mobile Bottom Navigation */}
+      <MobileNav 
+        isActive={isActive} 
+        cashuBalance={cashuBalance} 
+        isLoggedIn={!!user}
+        userPubkey={user?.pubkey}
+        userAvatar={userAvatar}
+        userName={displayName}
+        t={t}
+      />
+
+      {/* Sasquatch Guide (Desktop only) */}
+      <div className="hidden md:block">
+        <SasquatchGuide 
+          message={currentMessage}
+          onDismiss={dismissCurrentMessage}
+        />
+      </div>
+
+      {/* Set Status Dialog */}
+      <SetStatusDialog
+        open={showStatusDialog}
+        onOpenChange={setShowStatusDialog}
+      />
+    </div>
+  );
+}
diff --git a/src/src/components/MarketplaceItemCard.tsx b/src/src/components/MarketplaceItemCard.tsx
new file mode 100644
index 0000000..a7216ea
--- /dev/null
+++ b/src/src/components/MarketplaceItemCard.tsx
@@ -0,0 +1,564 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { nip19 } from 'nostr-tools';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useCashu } from '@/hooks/wallet/useCashu';
+import { useToast } from '@/hooks/useToast';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useListingReports } from '@/hooks/useListingReports';
+import { useSellerInfo } from '@/hooks/useSellerInfo';
+import { useTrustScore } from '@/hooks/useTrustScore';
+import { genUserName } from '@/lib/genUserName';
+import { TrustBadge } from '@/components/TrustBadge';
+import {
+  MessageCircle,
+  Clock,
+  Search,
+  Tag,
+  Flag,
+  MoreVertical,
+  ShieldCheck,
+  ShieldAlert,
+  Calendar,
+  Package,
+  AlertTriangle,
+  CheckCircle,
+} from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+import type { MarketplaceItem } from '@/lib/types';
+import { GEAR_CONDITIONS, GEAR_CATEGORIES, PRICE_TYPES, LISTING_REPORT_REASONS, formatPrice } from '@/lib/types';
+
+interface MarketplaceItemCardProps {
+  item: MarketplaceItem;
+  compact?: boolean;
+}
+
+export function MarketplaceItemCard({ item, compact = false }: MarketplaceItemCardProps) {
+  const { user } = useCurrentUser();
+  const { toast } = useToast();
+  const navigate = useNavigate();
+  const { mutateAsync: publishEvent } = useNostrPublish();
+  const author = useAuthor(item.pubkey);
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(item.pubkey);
+  const avatar = metadata?.picture;
+
+  const npub = nip19.npubEncode(item.pubkey);
+
+  // Fetch reports for this listing
+  const { data: reportData } = useListingReports(item.id, item.pubkey);
+  
+  // Fetch seller info
+  const { data: sellerInfo } = useSellerInfo(item.pubkey);
+  
+  // Fetch trust score
+  const { data: trustScore } = useTrustScore(item.pubkey);
+
+  // Cashu wallet integration
+  const { totalBalance: cashuBalance, isInitialized: hasCashu, coco } = useCashu();
+  const [showPaymentDialog, setShowPaymentDialog] = useState(false);
+  const [showReportDialog, setShowReportDialog] = useState(false);
+  const [reportReason, setReportReason] = useState<string>('');
+  const [reportDetails, setReportDetails] = useState('');
+  const [isReporting, setIsReporting] = useState(false);
+  const [isPaying, setIsPaying] = useState(false);
+
+  // Format price display
+  const priceDisplay = item.price
+    ? `${formatPrice(item.price, item.priceType)}${item.price.frequency ? `/${item.price.frequency}` : ''}`
+    : formatPrice(undefined, item.priceType);
+
+  const timeAgo = formatDistanceToNow(new Date(item.createdAt * 1000), { addSuffix: true });
+
+  const primaryImage = item.images[0];
+  const isWTB = item.listingType === 'wtb';
+  // Expiration is stored as unix timestamp in seconds
+  const isExpired = item.expiration ? item.expiration < Math.floor(Date.now() / 1000) : false;
+
+  // Get condition info
+  const conditionInfo = item.condition ? GEAR_CONDITIONS[item.condition] : null;
+
+  // Get category label
+  const categoryLabel = item.category?.find((c) => GEAR_CATEGORIES[c as keyof typeof GEAR_CATEGORIES])
+    ? GEAR_CATEGORIES[item.category.find((c) => GEAR_CATEGORIES[c as keyof typeof GEAR_CATEGORIES]) as keyof typeof GEAR_CATEGORIES]
+    : null;
+
+  // Get price type label
+  const priceTypeLabel = item.priceType ? PRICE_TYPES[item.priceType]?.label : null;
+
+  // Calculate price in sats (rough estimate: $1 = 2500 sats at $40k/BTC)
+  const priceInSats = item.price?.amount ? Math.round(parseFloat(item.price.amount) * 2500) : 0;
+  const canPayWithCashu = hasCashu && cashuBalance >= priceInSats && priceInSats > 0;
+
+  // Seller verification status
+  const isVerifiedSeller = sellerInfo?.hasNip05 || false;
+  const isHighTrust = (trustScore || 0) >= 60;
+  const accountAgeDays = sellerInfo?.accountAge || 0;
+  const previousListings = sellerInfo?.listingCount || 0;
+
+  // Report status
+  const reportCount = reportData?.count || 0;
+  const shouldHide = reportData?.shouldHide || false;
+
+  const handleCashuPayment = async () => {
+    if (!coco || !user) return;
+
+    setIsPaying(true);
+    try {
+      toast({
+        title: 'Payment Feature Coming Soon',
+        description: `Cashu peer-to-peer payments will be available soon! For now, please contact the seller directly.`,
+      });
+      setShowPaymentDialog(false);
+    } catch (error) {
+      toast({
+        variant: 'destructive',
+        title: 'Payment Failed',
+        description: error instanceof Error ? error.message : 'Failed to process payment',
+      });
+    } finally {
+      setIsPaying(false);
+    }
+  };
+
+  const handleReport = async () => {
+    if (!user || !reportReason) {
+      toast({ title: 'Please select a reason', variant: 'destructive' });
+      return;
+    }
+
+    setIsReporting(true);
+    try {
+      // Publish NIP-56 report event (kind 1984)
+      await publishEvent({
+        kind: 1984,
+        content: reportDetails.trim(),
+        tags: [
+          ['e', item.id, '', reportReason],
+          ['p', item.pubkey],
+          ['L', 'skate-spots.report'],
+          ['l', reportReason, 'skate-spots.report'],
+        ],
+      });
+
+      toast({
+        title: 'Report submitted',
+        description: 'Thank you for helping keep the marketplace safe.',
+      });
+      setShowReportDialog(false);
+      setReportReason('');
+      setReportDetails('');
+    } catch (error) {
+      toast({
+        variant: 'destructive',
+        title: 'Failed to submit report',
+        description: error instanceof Error ? error.message : 'Please try again',
+      });
+    } finally {
+      setIsReporting(false);
+    }
+  };
+
+  // Don't render expired or heavily reported listings
+  if (isExpired || shouldHide) {
+    return null;
+  }
+
+  const isOwnListing = user?.pubkey === item.pubkey;
+
+  return (
+    <Card
+      className={`bg-black/90 border-2 ${
+        isWTB
+          ? 'border-blue-500/20 hover:border-blue-500/60 hover:shadow-blue-500/10'
+          : 'border-orange-500/20 hover:border-orange-500/60 hover:shadow-orange-500/10'
+      } hover:shadow-2xl transition-all relative`}
+    >
+      {/* Report warning badge */}
+      {reportCount > 0 && reportCount < 3 && (
+        <div className="absolute top-2 right-2 z-10">
+          <Badge variant="destructive" className="text-xs gap-1">
+            <AlertTriangle className="h-3 w-3" />
+            {reportCount} report{reportCount > 1 ? 's' : ''}
+          </Badge>
+        </div>
+      )}
+
+      <CardContent className="p-4">
+        <div className="flex items-start gap-4">
+          {/* Product Image */}
+          <div className="flex-shrink-0">
+            {primaryImage ? (
+              <div
+                className={`w-20 h-20 rounded-lg overflow-hidden border-2 ${
+                  isWTB ? 'border-blue-500/30' : 'border-orange-500/30'
+                }`}
+              >
+                <img src={primaryImage} alt={item.title} className="w-full h-full object-cover" />
+              </div>
+            ) : (
+              <div
+                className={`w-20 h-20 rounded-lg border-2 border-dashed ${
+                  isWTB ? 'border-blue-500/30 bg-blue-500/5' : 'border-orange-500/30 bg-orange-500/5'
+                } flex items-center justify-center`}
+              >
+                <span className="text-3xl">{isWTB ? '🔍' : '🛹'}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 min-w-0">
+            {/* Listing Type Badge + Title */}
+            <div className="flex items-start justify-between gap-2 mb-2">
+              <div className="flex-1 min-w-0">
+                {isWTB && (
+                  <Badge className="bg-blue-500/20 text-blue-400 border-blue-500/50 mb-1 text-xs">
+                    <Search className="h-3 w-3 mr-1" />
+                    WANT TO BUY
+                  </Badge>
+                )}
+                <h3
+                  className={`font-black text-base uppercase ${
+                    isWTB ? 'text-blue-400' : 'text-orange-400'
+                  } leading-tight`}
+                >
+                  {item.title}
+                </h3>
+              </div>
+              <div className="text-right flex items-start gap-1">
+                <div>
+                  <span
+                    className={`text-lg font-bold ${
+                      isWTB ? 'text-blue-500' : 'text-orange-500'
+                    } whitespace-nowrap`}
+                  >
+                    {priceDisplay}
+                  </span>
+                  {priceTypeLabel && priceTypeLabel !== 'Fixed Price' && (
+                    <div className="text-xs text-gray-400">{priceTypeLabel}</div>
+                  )}
+                </div>
+                
+                {/* Actions dropdown */}
+                {user && !isOwnListing && (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="icon" className="h-6 w-6 text-gray-400">
+                        <MoreVertical className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem
+                        onClick={() => setShowReportDialog(true)}
+                        className="text-red-400 focus:text-red-400"
+                      >
+                        <Flag className="h-4 w-4 mr-2" />
+                        Report Listing
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                )}
+              </div>
+            </div>
+
+            {/* Condition, Size, Category Badges */}
+            <div className="flex flex-wrap gap-1 mb-2">
+              {conditionInfo && (
+                <Badge variant="outline" className="text-xs border-gray-600 bg-gray-800/50">
+                  {conditionInfo.emoji} {conditionInfo.label}
+                </Badge>
+              )}
+              {item.size && (
+                <Badge variant="outline" className="text-xs border-gray-600 bg-gray-800/50">
+                  {item.size}
+                </Badge>
+              )}
+              {categoryLabel && (
+                <Badge variant="outline" className="text-xs border-gray-600 bg-gray-800/50">
+                  <Tag className="h-3 w-3 mr-1" />
+                  {categoryLabel}
+                </Badge>
+              )}
+            </div>
+
+            {/* Description */}
+            {(item.summary || item.description) && !compact && (
+              <p className="text-sm text-gray-300 line-clamp-2 mb-3">
+                {item.summary || item.description}
+              </p>
+            )}
+
+            {/* Seller Info with enhanced trust indicators */}
+            <div className="flex items-center gap-2 mb-2 flex-wrap">
+              <Avatar className="h-6 w-6 border border-orange-500/30">
+                <AvatarImage src={avatar} alt={displayName} />
+                <AvatarFallback className="bg-orange-500/20 text-orange-400 text-xs">
+                  {displayName.slice(0, 2).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex-1 min-w-0 text-xs text-gray-400">
+                <span className="font-medium text-gray-300">{displayName}</span>
+                <span className="mx-1">•</span>
+                <span>{timeAgo}</span>
+              </div>
+              
+              {/* Trust indicators */}
+              <div className="flex items-center gap-1">
+                {isVerifiedSeller && (
+                  <Badge variant="outline" className="text-xs border-green-500/50 text-green-400 bg-green-500/10 gap-1">
+                    <CheckCircle className="h-3 w-3" />
+                    Verified
+                  </Badge>
+                )}
+                {isHighTrust && !isVerifiedSeller && (
+                  <Badge variant="outline" className="text-xs border-blue-500/50 text-blue-400 bg-blue-500/10 gap-1">
+                    <ShieldCheck className="h-3 w-3" />
+                    Trusted
+                  </Badge>
+                )}
+                <TrustBadge pubkey={item.pubkey} size="sm" showLabel={false} />
+              </div>
+            </div>
+
+            {/* Seller stats (account age, listings) */}
+            {!compact && sellerInfo && (
+              <div className="flex items-center gap-3 text-xs text-gray-500 mb-2">
+                {accountAgeDays > 0 && (
+                  <div className="flex items-center gap-1">
+                    <Calendar className="h-3 w-3" />
+                    <span>
+                      {accountAgeDays < 30
+                        ? `${accountAgeDays}d old`
+                        : accountAgeDays < 365
+                        ? `${Math.floor(accountAgeDays / 30)}mo old`
+                        : `${Math.floor(accountAgeDays / 365)}y old`}
+                    </span>
+                  </div>
+                )}
+                {previousListings > 1 && (
+                  <div className="flex items-center gap-1">
+                    <Package className="h-3 w-3" />
+                    <span>{previousListings} listings</span>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Availability */}
+            {item.availability && (
+              <div className="flex items-center gap-1 text-xs text-gray-400 mb-3">
+                <Clock className="h-3 w-3 text-orange-500" />
+                <span>Usually here {item.availability}</span>
+              </div>
+            )}
+
+            {/* Status Badge */}
+            {item.status && item.status !== 'active' && (
+              <Badge
+                variant="secondary"
+                className={`text-xs mb-2 ${
+                  item.status === 'sold' ? 'bg-gray-700 text-gray-400' : 'bg-yellow-900/50 text-yellow-400'
+                }`}
+              >
+                {item.status.toUpperCase()}
+              </Badge>
+            )}
+
+            {/* Action Buttons */}
+            <div className="space-y-2">
+              {/* Pay with Cashu button */}
+              {user && !isOwnListing && canPayWithCashu && item.status === 'active' && !isWTB && (
+                <Button
+                  onClick={() => setShowPaymentDialog(true)}
+                  size="sm"
+                  className="w-full gap-2 bg-orange-500 hover:bg-orange-600 text-white"
+                >
+                  🥜 Pay {priceInSats.toLocaleString()} sats with Cashu
+                </Button>
+              )}
+
+              {/* Contact button */}
+              <Button
+                variant="outline"
+                size="sm"
+                className={`w-full gap-2 ${
+                  isWTB
+                    ? 'border-blue-500/50 text-blue-400 hover:bg-blue-500/10'
+                    : 'border-orange-500/50 text-orange-400 hover:bg-orange-500/10'
+                }`}
+                onClick={() => navigate(`/messages/${npub}`)}
+              >
+                <MessageCircle className="h-4 w-4" />
+                {isWTB ? 'I Have This!' : 'Contact Seller'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+
+      {/* Payment Confirmation Dialog */}
+      <Dialog open={showPaymentDialog} onOpenChange={setShowPaymentDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Confirm Payment</DialogTitle>
+            <DialogDescription>Review the payment details before confirming</DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            {/* Item details */}
+            <div className="flex items-start gap-3 p-3 rounded-lg bg-muted">
+              {primaryImage && (
+                <img src={primaryImage} alt={item.title} className="w-16 h-16 rounded object-cover" />
+              )}
+              <div className="flex-1">
+                <h4 className="font-bold">{item.title}</h4>
+                <p className="text-sm text-muted-foreground">Sold by {displayName}</p>
+              </div>
+            </div>
+
+            {/* Payment details */}
+            <div className="space-y-2">
+              <div className="flex justify-between text-sm">
+                <span>Price:</span>
+                <span className="font-bold">{priceDisplay}</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span>Amount (sats):</span>
+                <span className="font-bold">{priceInSats.toLocaleString()} sats</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span>Your Cashu Balance:</span>
+                <span className="font-bold">{cashuBalance.toLocaleString()} sats</span>
+              </div>
+              <div className="flex justify-between text-sm text-muted-foreground">
+                <span>After Payment:</span>
+                <span>{(cashuBalance - priceInSats).toLocaleString()} sats</span>
+              </div>
+            </div>
+
+            <Card className="bg-yellow-950/30 border-yellow-500/30">
+              <CardContent className="p-3">
+                <p className="text-xs text-yellow-200">
+                  ⚠️ <strong>Peer-to-peer payments are coming soon!</strong> This feature will allow
+                  you to send Cashu tokens directly to the seller. For now, please contact the seller
+                  to arrange payment.
+                </p>
+              </CardContent>
+            </Card>
+
+            <div className="flex gap-2">
+              <Button onClick={() => setShowPaymentDialog(false)} variant="outline" className="flex-1">
+                Cancel
+              </Button>
+              <Button
+                onClick={handleCashuPayment}
+                disabled={isPaying}
+                className="flex-1 bg-orange-500 hover:bg-orange-600"
+              >
+                {isPaying ? 'Processing...' : 'Confirm Payment'}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Report Dialog */}
+      <Dialog open={showReportDialog} onOpenChange={setShowReportDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Flag className="h-5 w-5 text-red-400" />
+              Report Listing
+            </DialogTitle>
+            <DialogDescription>
+              Help keep the marketplace safe by reporting inappropriate or misleading listings.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label>Reason for report *</Label>
+              <div className="grid grid-cols-1 gap-2">
+                {Object.entries(LISTING_REPORT_REASONS).map(([key, { label, description }]) => (
+                  <Button
+                    key={key}
+                    type="button"
+                    variant={reportReason === key ? 'default' : 'outline'}
+                    className={`h-auto py-2 px-3 justify-start text-left ${
+                      reportReason === key
+                        ? 'bg-red-500 hover:bg-red-600'
+                        : 'border-gray-600 hover:bg-gray-800'
+                    }`}
+                    onClick={() => setReportReason(key)}
+                  >
+                    <div>
+                      <div className="font-medium">{label}</div>
+                      <div className="text-xs opacity-70">{description}</div>
+                    </div>
+                  </Button>
+                ))}
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="report-details">Additional details (optional)</Label>
+              <Textarea
+                id="report-details"
+                placeholder="Provide any additional context that might help..."
+                value={reportDetails}
+                onChange={(e) => setReportDetails(e.target.value)}
+                rows={3}
+                className="bg-gray-800 border-gray-700"
+              />
+            </div>
+
+            <Card className="bg-gray-800/50 border-gray-700">
+              <CardContent className="p-3">
+                <p className="text-xs text-gray-400">
+                  Reports are published to Nostr and help the community identify problematic listings.
+                  Listings with multiple reports may be automatically hidden.
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowReportDialog(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleReport}
+              disabled={isReporting || !reportReason}
+              className="bg-red-500 hover:bg-red-600"
+            >
+              {isReporting ? 'Submitting...' : 'Submit Report'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Card>
+  );
+}
diff --git a/src/src/components/MyDataTab.tsx b/src/src/components/MyDataTab.tsx
new file mode 100644
index 0000000..ddef79e
--- /dev/null
+++ b/src/src/components/MyDataTab.tsx
@@ -0,0 +1,792 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useNostr } from '@nostrify/react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { NostrEvent } from '@nostrify/nostrify';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Checkbox } from '@/components/ui/checkbox';
+import { 
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { toast } from '@/hooks/useToast';
+import { 
+  Database, 
+  Download, 
+  Trash2, 
+  MapPin, 
+  Calendar, 
+  Store, 
+  MessageSquare,
+  FileJson,
+  Clock,
+  ExternalLink,
+  AlertTriangle,
+  ShoppingBag,
+  GraduationCap,
+  FolderHeart,
+  Video,
+  Heart,
+  Zap,
+} from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+
+// Kind constants
+const KINDS = {
+  POST: 1,
+  REACTION: 7,
+  ZAP_RECEIPT: 9735,
+  COMMENT: 1111,
+  SPOT: 30818,
+  EVENT: 31923,
+  SHOP: 30017,
+  LISTING: 30402,
+  COLLECTION: 30003,
+  COACH: 35001,
+  FILMER: 35002,
+};
+
+// Event kind labels and icons
+const KIND_CONFIG: Record<number, { label: string; icon: typeof MapPin; color: string; category: string }> = {
+  [KINDS.POST]: { label: 'Post', icon: MessageSquare, color: 'text-blue-400', category: 'posts' },
+  [KINDS.REACTION]: { label: 'Reaction', icon: Heart, color: 'text-pink-400', category: 'reactions' },
+  [KINDS.COMMENT]: { label: 'Comment', icon: MessageSquare, color: 'text-gray-400', category: 'comments' },
+  [KINDS.SPOT]: { label: 'Spot', icon: MapPin, color: 'text-[#ccff00]', category: 'spots' },
+  [KINDS.EVENT]: { label: 'Event', icon: Calendar, color: 'text-[#ff0040]', category: 'events' },
+  [KINDS.SHOP]: { label: 'Shop', icon: Store, color: 'text-purple-400', category: 'shops' },
+  [KINDS.LISTING]: { label: 'Listing', icon: ShoppingBag, color: 'text-orange-400', category: 'listings' },
+  [KINDS.COLLECTION]: { label: 'Collection', icon: FolderHeart, color: 'text-pink-400', category: 'collections' },
+  [KINDS.COACH]: { label: 'Coach Profile', icon: GraduationCap, color: 'text-green-400', category: 'labProfiles' },
+  [KINDS.FILMER]: { label: 'Filmer Profile', icon: Video, color: 'text-cyan-400', category: 'labProfiles' },
+};
+
+interface DataStats {
+  spots: number;
+  events: number;
+  shops: number;
+  listings: number;
+  posts: number;
+  comments: number;
+  collections: number;
+  labProfiles: number;
+  reactions: number;
+  zapsReceived: number;
+  total: number;
+}
+
+
+
+function StatCard({ 
+  icon: Icon, 
+  label, 
+  count, 
+  color,
+  isLoading,
+  subtitle,
+}: { 
+  icon: typeof MapPin; 
+  label: string; 
+  count: number;
+  color: string;
+  isLoading: boolean;
+  subtitle?: string;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center p-2 sm:p-4 rounded-lg sm:rounded-xl bg-black/50 border border-gray-800 hover:border-gray-700 transition-colors min-w-0">
+      <Icon className={`h-4 w-4 sm:h-5 sm:w-5 mb-1 sm:mb-1.5 ${color}`} />
+      {isLoading ? (
+        <Skeleton className="h-5 sm:h-7 w-8 sm:w-10 mb-0.5" />
+      ) : (
+        <span className="text-base sm:text-xl font-black text-white">{count}</span>
+      )}
+      <span className="text-[9px] sm:text-[10px] text-gray-400 uppercase tracking-wide text-center leading-tight">{label}</span>
+      {subtitle && <span className="text-[8px] sm:text-[9px] text-gray-500 leading-tight">{subtitle}</span>}
+    </div>
+  );
+}
+
+function EventRow({ 
+  event, 
+  onDelete 
+}: { 
+  event: NostrEvent; 
+  onDelete: (event: NostrEvent) => void;
+}) {
+  const config = KIND_CONFIG[event.kind] || { label: `Kind ${event.kind}`, icon: FileJson, color: 'text-gray-400', category: 'other' };
+  const Icon = config.icon;
+  
+  // Get title/identifier for the event
+  const getEventTitle = () => {
+    // For reactions, show what was reacted to
+    if (event.kind === KINDS.REACTION) {
+      const emoji = event.content || '❤️';
+      return `${emoji} reaction`;
+    }
+    
+    // Check for title tag
+    const titleTag = event.tags.find(([k]) => k === 'title')?.[1];
+    if (titleTag) return titleTag;
+    
+    // Check for d tag (identifier)
+    const dTag = event.tags.find(([k]) => k === 'd')?.[1];
+    if (dTag) return dTag;
+    
+    // For posts/comments, use truncated content
+    if (event.content) {
+      return event.content.length > 50 ? event.content.slice(0, 50) + '...' : event.content;
+    }
+    
+    return `Event ${event.id.slice(0, 8)}...`;
+  };
+
+  return (
+    <div className="flex items-center gap-3 p-3 rounded-lg bg-black/30 border border-gray-800 hover:border-gray-700 transition-colors group">
+      <div className={`p-2 rounded-lg bg-gray-900 ${config.color}`}>
+        <Icon className="h-4 w-4" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium text-white truncate">{getEventTitle()}</p>
+        <div className="flex items-center gap-2 text-xs text-gray-500">
+          <span className={config.color}>{config.label}</span>
+          <span>•</span>
+          <Clock className="h-3 w-3" />
+          <span>{formatDistanceToNow(event.created_at * 1000, { addSuffix: true })}</span>
+        </div>
+      </div>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => onDelete(event)}
+        className="opacity-0 group-hover:opacity-100 transition-opacity text-red-400 hover:text-red-300 hover:bg-red-500/10"
+      >
+        <Trash2 className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}
+
+// Helper to get event title
+function getEventTitle(event: NostrEvent): string {
+  // For reactions, show what was reacted to
+  if (event.kind === KINDS.REACTION) {
+    const emoji = event.content || '❤️';
+    return `${emoji} reaction`;
+  }
+  
+  // Check for title tag
+  const titleTag = event.tags.find(([k]) => k === 'title')?.[1];
+  if (titleTag) return titleTag;
+  
+  // Check for name tag (for shops)
+  const nameTag = event.tags.find(([k]) => k === 'name')?.[1];
+  if (nameTag) return nameTag;
+  
+  // Check for d tag (identifier)
+  const dTag = event.tags.find(([k]) => k === 'd')?.[1];
+  if (dTag && dTag.length < 40) return dTag;
+  
+  // For posts/comments, use truncated content
+  if (event.content) {
+    const cleaned = event.content.replace(/\n/g, ' ').trim();
+    return cleaned.length > 40 ? cleaned.slice(0, 40) + '...' : cleaned;
+  }
+  
+  return `Event ${event.id.slice(0, 8)}...`;
+}
+
+function SelectiveDeletionDialog({
+  userEvents,
+  onDeleteSelected,
+  isDeleting,
+}: {
+  userEvents: NostrEvent[];
+  onDeleteSelected: (events: NostrEvent[]) => Promise<void>;
+  isDeleting: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const [selectedEvents, setSelectedEvents] = useState<Set<string>>(new Set());
+  const [filterKind, setFilterKind] = useState<number | 'all'>('all');
+
+  // Group events by kind for the filter tabs
+  const eventsByKind = userEvents.reduce((acc, event) => {
+    if (!acc[event.kind]) acc[event.kind] = [];
+    acc[event.kind].push(event);
+    return acc;
+  }, {} as Record<number, NostrEvent[]>);
+
+  // Get filtered events
+  const filteredEvents = filterKind === 'all' 
+    ? userEvents 
+    : userEvents.filter(e => e.kind === filterKind);
+
+  const toggleEvent = (eventId: string) => {
+    const newSelected = new Set(selectedEvents);
+    if (newSelected.has(eventId)) {
+      newSelected.delete(eventId);
+    } else {
+      newSelected.add(eventId);
+    }
+    setSelectedEvents(newSelected);
+  };
+
+  const selectAllVisible = () => {
+    const newSelected = new Set(selectedEvents);
+    for (const event of filteredEvents) {
+      newSelected.add(event.id);
+    }
+    setSelectedEvents(newSelected);
+  };
+
+  const selectNone = () => {
+    if (filterKind === 'all') {
+      setSelectedEvents(new Set());
+    } else {
+      // Only deselect visible items
+      const newSelected = new Set(selectedEvents);
+      for (const event of filteredEvents) {
+        newSelected.delete(event.id);
+      }
+      setSelectedEvents(newSelected);
+    }
+  };
+
+  const handleDelete = async () => {
+    const eventsToDelete = userEvents.filter(e => selectedEvents.has(e.id));
+    await onDeleteSelected(eventsToDelete);
+    setOpen(false);
+    setSelectedEvents(new Set());
+  };
+
+  const selectedCount = selectedEvents.size;
+
+  // Available filter tabs
+  const filterTabs: { kind: number | 'all'; label: string; icon: typeof MapPin; color: string }[] = [
+    { kind: 'all', label: 'All', icon: Database, color: 'text-white' },
+    ...(eventsByKind[KINDS.SPOT]?.length ? [{ kind: KINDS.SPOT, label: 'Spots', icon: MapPin, color: 'text-[#ccff00]' }] : []),
+    ...(eventsByKind[KINDS.EVENT]?.length ? [{ kind: KINDS.EVENT, label: 'Events', icon: Calendar, color: 'text-[#ff0040]' }] : []),
+    ...(eventsByKind[KINDS.SHOP]?.length ? [{ kind: KINDS.SHOP, label: 'Shops', icon: Store, color: 'text-purple-400' }] : []),
+    ...(eventsByKind[KINDS.LISTING]?.length ? [{ kind: KINDS.LISTING, label: 'Listings', icon: ShoppingBag, color: 'text-orange-400' }] : []),
+    ...(eventsByKind[KINDS.COLLECTION]?.length ? [{ kind: KINDS.COLLECTION, label: 'Collections', icon: FolderHeart, color: 'text-pink-400' }] : []),
+    ...((eventsByKind[KINDS.COACH]?.length || eventsByKind[KINDS.FILMER]?.length) ? [{ kind: KINDS.COACH, label: 'Lab', icon: GraduationCap, color: 'text-green-400' }] : []),
+    ...((eventsByKind[KINDS.POST]?.length || eventsByKind[KINDS.COMMENT]?.length) ? [{ kind: KINDS.POST, label: 'Posts', icon: MessageSquare, color: 'text-blue-400' }] : []),
+    ...(eventsByKind[KINDS.REACTION]?.length ? [{ kind: KINDS.REACTION, label: 'Reactions', icon: Heart, color: 'text-pink-400' }] : []),
+  ];
+
+  // Handle special filter cases (Lab = Coach + Filmer, Posts = Post + Comment)
+  const getFilteredEventsForTab = () => {
+    if (filterKind === 'all') return userEvents;
+    if (filterKind === KINDS.COACH) return userEvents.filter(e => e.kind === KINDS.COACH || e.kind === KINDS.FILMER);
+    if (filterKind === KINDS.POST) return userEvents.filter(e => e.kind === KINDS.POST || e.kind === KINDS.COMMENT);
+    return userEvents.filter(e => e.kind === filterKind);
+  };
+
+  const displayEvents = getFilteredEventsForTab();
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="outline"
+          disabled={!userEvents?.length || isDeleting}
+          className="flex-1 border-red-500/50 text-red-400 hover:bg-red-500/10"
+        >
+          <Trash2 className="h-4 w-4 mr-2" />
+          {isDeleting ? 'Deleting...' : 'Request Deletion'}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="bg-gray-900 border-gray-700 max-w-lg max-h-[85vh] flex flex-col">
+        <DialogHeader className="flex-shrink-0">
+          <DialogTitle className="flex items-center gap-2 text-white">
+            <Trash2 className="h-5 w-5 text-red-400" />
+            Select Content to Delete
+          </DialogTitle>
+          <DialogDescription className="text-gray-400">
+            Select the specific items you want to request deletion for.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-hidden flex flex-col space-y-3 py-2">
+          {/* Filter tabs */}
+          <div className="flex gap-1 overflow-x-auto pb-2 flex-shrink-0">
+            {filterTabs.map((tab) => {
+              const Icon = tab.icon;
+              const isActive = filterKind === tab.kind;
+              const count = tab.kind === 'all' 
+                ? userEvents.length 
+                : tab.kind === KINDS.COACH 
+                  ? (eventsByKind[KINDS.COACH]?.length || 0) + (eventsByKind[KINDS.FILMER]?.length || 0)
+                  : tab.kind === KINDS.POST
+                    ? (eventsByKind[KINDS.POST]?.length || 0) + (eventsByKind[KINDS.COMMENT]?.length || 0)
+                    : eventsByKind[tab.kind]?.length || 0;
+              
+              return (
+                <button
+                  key={String(tab.kind)}
+                  onClick={() => setFilterKind(tab.kind)}
+                  className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium whitespace-nowrap transition-colors ${
+                    isActive 
+                      ? 'bg-gray-700 text-white' 
+                      : 'bg-gray-800/50 text-gray-400 hover:bg-gray-800'
+                  }`}
+                >
+                  <Icon className={`h-3 w-3 ${isActive ? tab.color : ''}`} />
+                  {tab.label}
+                  <span className={`${isActive ? 'text-gray-300' : 'text-gray-500'}`}>({count})</span>
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Quick actions */}
+          <div className="flex items-center justify-between flex-shrink-0">
+            <div className="flex gap-2 text-xs">
+              <button onClick={selectAllVisible} className="text-[#ccff00] hover:underline">
+                Select All {filterKind !== 'all' ? 'Visible' : ''}
+              </button>
+              <span className="text-gray-600">|</span>
+              <button onClick={selectNone} className="text-gray-400 hover:underline">Clear</button>
+            </div>
+            <span className="text-xs text-gray-500">
+              {selectedCount} selected
+            </span>
+          </div>
+
+          {/* Event list */}
+          <div className="flex-1 overflow-y-auto space-y-1.5 pr-1 min-h-0">
+            {displayEvents.length === 0 ? (
+              <div className="text-center py-8 text-gray-500">
+                No items in this category
+              </div>
+            ) : (
+              displayEvents.map((event) => {
+                const config = KIND_CONFIG[event.kind] || { label: `Kind ${event.kind}`, icon: FileJson, color: 'text-gray-400', category: 'other' };
+                const Icon = config.icon;
+                const isChecked = selectedEvents.has(event.id);
+                
+                return (
+                  <label
+                    key={event.id}
+                    className={`flex items-center gap-2 p-2.5 rounded-lg border transition-colors cursor-pointer ${
+                      isChecked
+                        ? 'bg-red-950/30 border-red-500/50'
+                        : 'bg-black/30 border-gray-800 hover:border-gray-700'
+                    }`}
+                  >
+                    <Checkbox
+                      checked={isChecked}
+                      onCheckedChange={() => toggleEvent(event.id)}
+                      className="border-gray-600 data-[state=checked]:bg-red-500 data-[state=checked]:border-red-500 flex-shrink-0"
+                    />
+                    <div className={`p-1.5 rounded ${config.color} bg-gray-800 flex-shrink-0`}>
+                      <Icon className="h-3.5 w-3.5" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm text-white truncate">{getEventTitle(event)}</p>
+                      <p className="text-[10px] text-gray-500">
+                        {config.label} • {formatDistanceToNow(event.created_at * 1000, { addSuffix: true })}
+                      </p>
+                    </div>
+                  </label>
+                );
+              })
+            )}
+          </div>
+
+          {/* Warning */}
+          <div className="p-2.5 rounded-lg bg-yellow-950/50 border border-yellow-500/30 flex-shrink-0">
+            <div className="flex items-start gap-2">
+              <AlertTriangle className="h-4 w-4 text-yellow-500 flex-shrink-0 mt-0.5" />
+              <p className="text-yellow-200 text-xs">
+                <strong>Important:</strong> Nostr is decentralized. Relays <em>should</em> honor deletion requests, 
+                but some may not. This is not a guaranteed permanent deletion.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="flex-shrink-0 flex-col sm:flex-row gap-2 pt-2 border-t border-gray-800">
+          <Button
+            variant="ghost"
+            onClick={() => setOpen(false)}
+            className="border-gray-700"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleDelete}
+            disabled={selectedCount === 0 || isDeleting}
+            className="bg-red-500 hover:bg-red-600 text-white"
+          >
+            {isDeleting ? (
+              'Deleting...'
+            ) : (
+              <>
+                Delete {selectedCount} {selectedCount === 1 ? 'Item' : 'Items'}
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function MyDataTab() {
+  const { user } = useCurrentUser();
+  const { nostr } = useNostr();
+  const queryClient = useQueryClient();
+  const { mutateAsync: publishEvent } = useNostrPublish();
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [showAllActivity, setShowAllActivity] = useState(false);
+
+  // Fetch all user events
+  const { data: userEvents, isLoading, refetch } = useQuery({
+    queryKey: ['my-data', user?.pubkey],
+    queryFn: async ({ signal }) => {
+      if (!user?.pubkey) return [];
+      
+      const querySignal = AbortSignal.any([signal, AbortSignal.timeout(15000)]);
+      
+      // Query for all event kinds the user might have published
+      const events = await nostr.query([
+        { 
+          authors: [user.pubkey], 
+          kinds: [
+            KINDS.POST, 
+            KINDS.REACTION,
+            KINDS.COMMENT, 
+            KINDS.SPOT, 
+            KINDS.EVENT, 
+            KINDS.SHOP, 
+            KINDS.LISTING, 
+            KINDS.COLLECTION, 
+            KINDS.COACH, 
+            KINDS.FILMER
+          ],
+          limit: 500 
+        }
+      ], { signal: querySignal });
+      
+      // Sort by created_at descending
+      return events.sort((a, b) => b.created_at - a.created_at);
+    },
+    enabled: !!user?.pubkey,
+    staleTime: 60000,
+  });
+
+  // Fetch zaps received (where user is the recipient)
+  const { data: zapsReceived } = useQuery({
+    queryKey: ['my-zaps-received', user?.pubkey],
+    queryFn: async ({ signal }) => {
+      if (!user?.pubkey) return [];
+      
+      const querySignal = AbortSignal.any([signal, AbortSignal.timeout(10000)]);
+      
+      // Query for zap receipts where user is tagged
+      const events = await nostr.query([
+        { 
+          kinds: [KINDS.ZAP_RECEIPT],
+          '#p': [user.pubkey],
+          limit: 100 
+        }
+      ], { signal: querySignal });
+      
+      return events;
+    },
+    enabled: !!user?.pubkey,
+    staleTime: 60000,
+  });
+
+  // Calculate stats
+  const stats: DataStats = {
+    spots: userEvents?.filter(e => e.kind === KINDS.SPOT).length || 0,
+    events: userEvents?.filter(e => e.kind === KINDS.EVENT).length || 0,
+    shops: userEvents?.filter(e => e.kind === KINDS.SHOP).length || 0,
+    listings: userEvents?.filter(e => e.kind === KINDS.LISTING).length || 0,
+    posts: userEvents?.filter(e => e.kind === KINDS.POST).length || 0,
+    comments: userEvents?.filter(e => e.kind === KINDS.COMMENT).length || 0,
+    collections: userEvents?.filter(e => e.kind === KINDS.COLLECTION).length || 0,
+    labProfiles: userEvents?.filter(e => e.kind === KINDS.COACH || e.kind === KINDS.FILMER).length || 0,
+    reactions: userEvents?.filter(e => e.kind === KINDS.REACTION).length || 0,
+    zapsReceived: zapsReceived?.length || 0,
+    total: userEvents?.length || 0,
+  };
+
+  // Export all data as JSON
+  const handleExportData = () => {
+    if (!userEvents || userEvents.length === 0) {
+      toast({
+        title: 'No data to export',
+        description: 'You haven\'t published any events yet.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    const exportData = {
+      exportedAt: new Date().toISOString(),
+      pubkey: user?.pubkey,
+      stats,
+      eventCount: userEvents.length,
+      zapsReceivedCount: zapsReceived?.length || 0,
+      events: userEvents,
+      zapsReceived: zapsReceived || [],
+    };
+
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `skatespots-data-${new Date().toISOString().split('T')[0]}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+
+    toast({
+      title: 'Data exported!',
+      description: `Downloaded ${userEvents.length} events as JSON.`,
+    });
+  };
+
+  // Delete a single event
+  const handleDeleteEvent = async (event: NostrEvent) => {
+    try {
+      const isAddressable = event.kind >= 30000 && event.kind < 40000;
+      const tags: string[][] = [['k', String(event.kind)]];
+      
+      if (isAddressable) {
+        const dTag = event.tags.find(([k]) => k === 'd')?.[1] || '';
+        tags.push(['a', `${event.kind}:${event.pubkey}:${dTag}`]);
+      } else {
+        tags.push(['e', event.id]);
+      }
+
+      await publishEvent({
+        kind: 5,
+        content: 'Deletion requested via SkateSpots',
+        tags,
+      });
+
+      toast({
+        title: 'Deletion requested',
+        description: 'The deletion request has been published to relays.',
+      });
+
+      refetch();
+    } catch (error) {
+      console.error('Failed to delete event:', error);
+      toast({
+        title: 'Deletion failed',
+        description: 'Could not publish deletion request. Please try again.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  // Delete selected events
+  const handleDeleteSelected = async (eventsToDelete: NostrEvent[]) => {
+    if (!eventsToDelete || eventsToDelete.length === 0) return;
+    
+    setIsDeleting(true);
+    
+    try {
+      const deletionTags: string[][] = [];
+      const kindsToDelete = new Set<number>();
+      
+      for (const event of eventsToDelete) {
+        kindsToDelete.add(event.kind);
+        const isAddressable = event.kind >= 30000 && event.kind < 40000;
+        
+        if (isAddressable) {
+          const dTag = event.tags.find(([k]) => k === 'd')?.[1] || '';
+          deletionTags.push(['a', `${event.kind}:${event.pubkey}:${dTag}`]);
+        } else {
+          deletionTags.push(['e', event.id]);
+        }
+      }
+
+      for (const kind of kindsToDelete) {
+        deletionTags.push(['k', String(kind)]);
+      }
+
+      await publishEvent({
+        kind: 5,
+        content: 'Selective deletion requested via SkateSpots - user exercising right to delete their data',
+        tags: deletionTags,
+      });
+
+      toast({
+        title: 'Deletion requested',
+        description: `Requested deletion of ${eventsToDelete.length} items. Note: Some relays may not honor this request.`,
+      });
+
+      queryClient.invalidateQueries({ queryKey: ['my-data'] });
+      refetch();
+    } catch (error) {
+      console.error('Failed to delete events:', error);
+      toast({
+        title: 'Deletion failed',
+        description: 'Could not publish deletion request. Please try again.',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  if (!user) {
+    return (
+      <Card className="border-dashed">
+        <CardContent className="py-12 text-center">
+          <Database className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+          <h3 className="text-lg font-medium mb-2">Login Required</h3>
+          <p className="text-muted-foreground mb-6">
+            Log in to view and manage your data.
+          </p>
+          <LoginArea className="justify-center" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const displayedEvents = showAllActivity ? userEvents : userEvents?.slice(0, 10);
+
+  return (
+    <div className="space-y-6">
+      {/* Header Card */}
+      <Card className="bg-gradient-to-br from-[#ccff00]/10 to-[#00ff00]/5 border-2 border-[#ccff00]/30">
+        <CardHeader className="pb-4">
+          <CardTitle className="flex items-center gap-2 text-white">
+            <Database className="h-5 w-5 text-[#ccff00]" />
+            My Data
+          </CardTitle>
+          <CardDescription className="text-gray-300">
+            Your content on the Nostr network. You own this data - export it anytime or request deletion.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4 sm:space-y-6">
+          {/* Stats Grid - responsive 2x4 on mobile, 4x2 on desktop */}
+          <div className="space-y-2 sm:space-y-3">
+            {/* Row 1: Main content */}
+            <div className="grid grid-cols-4 gap-1.5 sm:gap-2">
+              <StatCard icon={MapPin} label="Spots" count={stats.spots} color="text-[#ccff00]" isLoading={isLoading} />
+              <StatCard icon={Calendar} label="Events" count={stats.events} color="text-[#ff0040]" isLoading={isLoading} />
+              <StatCard icon={Store} label="Shops" count={stats.shops} color="text-purple-400" isLoading={isLoading} />
+              <StatCard icon={ShoppingBag} label="Listings" count={stats.listings} color="text-orange-400" isLoading={isLoading} />
+            </div>
+            {/* Row 2: Social & Lab */}
+            <div className="grid grid-cols-4 gap-1.5 sm:gap-2">
+              <StatCard icon={MessageSquare} label="Posts" count={stats.posts + stats.comments} color="text-blue-400" isLoading={isLoading} />
+              <StatCard icon={GraduationCap} label="Lab" count={stats.labProfiles} color="text-green-400" isLoading={isLoading} subtitle="Coach/Filmer" />
+              <StatCard icon={Heart} label="Reactions" count={stats.reactions} color="text-pink-400" isLoading={isLoading} />
+              <StatCard icon={Zap} label="Zaps" count={stats.zapsReceived} color="text-yellow-400" isLoading={isLoading} subtitle="Received" />
+            </div>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex flex-col sm:flex-row gap-3">
+            <Button
+              onClick={handleExportData}
+              disabled={isLoading || !userEvents?.length}
+              className="flex-1 bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold"
+            >
+              <Download className="h-4 w-4 mr-2" />
+              Export All Data
+            </Button>
+            
+            <SelectiveDeletionDialog
+              userEvents={userEvents || []}
+              onDeleteSelected={handleDeleteSelected}
+              isDeleting={isDeleting}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Recent Activity */}
+      <Card className="bg-black/50 border-gray-800">
+        <CardHeader className="pb-3">
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg text-white">Recent Activity</CardTitle>
+            {userEvents && userEvents.length > 10 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowAllActivity(!showAllActivity)}
+                className="text-[#ccff00] hover:text-[#ccff00]/80"
+              >
+                {showAllActivity ? 'Show Less' : `View All (${userEvents.length})`}
+                <ExternalLink className="h-3 w-3 ml-1" />
+              </Button>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <div className="space-y-3">
+              {[...Array(5)].map((_, i) => (
+                <Skeleton key={i} className="h-16 w-full" />
+              ))}
+            </div>
+          ) : !userEvents?.length ? (
+            <div className="text-center py-8">
+              <Database className="h-10 w-10 mx-auto mb-3 text-gray-600" />
+              <p className="text-gray-400">No data published yet</p>
+              <p className="text-gray-500 text-sm mt-1">
+                Start by <Link to="/create-spot" className="text-[#ccff00] hover:underline">adding a spot</Link>!
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-2 max-h-[500px] overflow-y-auto pr-2">
+              {displayedEvents?.map((event) => (
+                <EventRow key={event.id} event={event} onDelete={handleDeleteEvent} />
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Data Ownership Info */}
+      <Card className="bg-blue-950/30 border-blue-500/30">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-blue-400 text-base">About Your Data</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3 text-sm text-gray-300">
+          <p>
+            <strong className="text-white">You own your data.</strong> All content is signed with your cryptographic keys 
+            and stored on Nostr relays. No company controls it.
+          </p>
+          <ul className="space-y-2 ml-4">
+            <li className="flex items-start gap-2">
+              <span className="text-[#ccff00]">✓</span>
+              <span><strong>Export anytime</strong> - Download all your events as JSON</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-[#ccff00]">✓</span>
+              <span><strong>Portable</strong> - Use your keys in any Nostr app</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-[#ccff00]">✓</span>
+              <span><strong>Selective deletion</strong> - Choose exactly what to delete</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-yellow-400">⚠</span>
+              <span><strong>Decentralized caveat</strong> - Some relays may retain data despite deletion requests</span>
+            </li>
+          </ul>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/src/components/NostrProvider.tsx b/src/src/components/NostrProvider.tsx
new file mode 100644
index 0000000..091703a
--- /dev/null
+++ b/src/src/components/NostrProvider.tsx
@@ -0,0 +1,113 @@
+import React, { useEffect, useRef } from 'react';
+import { NostrEvent, NostrFilter, NPool, NRelay1 } from '@nostrify/nostrify';
+import { NostrContext } from '@nostrify/react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useAppContext } from '@/hooks/useAppContext';
+import { SKATE_RELAY } from '@/lib/types';
+
+interface NostrProviderProps {
+  children: React.ReactNode;
+}
+
+// Default fallback relays - used if no relays are configured
+const DEFAULT_RELAYS = [
+  { url: 'wss://relay.ditto.pub', read: true, write: true },
+  { url: SKATE_RELAY, read: true, write: true },
+  { url: 'wss://wotr.relatr.xyz', read: true, write: true },
+  { url: 'wss://purplepag.es', read: true, write: false }, // Profile aggregator
+];
+
+const NostrProvider: React.FC<NostrProviderProps> = (props) => {
+  const { children } = props;
+  const { config } = useAppContext();
+
+  const queryClient = useQueryClient();
+
+  // Create NPool instance only once
+  const pool = useRef<NPool | undefined>(undefined);
+
+  // Use refs so the pool always has the latest data
+  const relayMetadata = useRef(config.relayMetadata);
+  const useSkateRelay = useRef(config.useSkateRelay ?? true);
+
+  // Invalidate Nostr queries when relay metadata changes
+  useEffect(() => {
+    relayMetadata.current = config.relayMetadata;
+    useSkateRelay.current = config.useSkateRelay ?? true;
+    queryClient.invalidateQueries({ queryKey: ['nostr'] });
+  }, [config.relayMetadata, config.useSkateRelay, queryClient]);
+
+  // Initialize NPool only once
+  if (!pool.current) {
+    pool.current = new NPool({
+      open(url: string) {
+        return new NRelay1(url);
+      },
+      reqRouter(filters: NostrFilter[]) {
+        const routes = new Map<string, NostrFilter[]>();
+
+        // Get relays from metadata, fallback to defaults if empty
+        const configuredRelays = relayMetadata.current.relays.length > 0
+          ? relayMetadata.current.relays
+          : DEFAULT_RELAYS;
+
+        // Route to all read relays
+        const readRelays = configuredRelays
+          .filter(r => r.read)
+          .map(r => r.url);
+
+        // Ensure we always have at least one relay
+        if (readRelays.length === 0) {
+          console.warn('[NostrProvider] No read relays configured, using defaults');
+          for (const relay of DEFAULT_RELAYS) {
+            routes.set(relay.url, filters);
+          }
+        } else {
+          console.log('[NostrProvider] Routing query to read relays:', readRelays);
+          for (const url of readRelays) {
+            routes.set(url, filters);
+          }
+        }
+
+        return routes;
+      },
+      eventRouter(event: NostrEvent) {
+        // Get relays from metadata, fallback to defaults if empty
+        const configuredRelays = relayMetadata.current.relays.length > 0
+          ? relayMetadata.current.relays
+          : DEFAULT_RELAYS;
+
+        // Get write relays from metadata
+        const writeRelays = configuredRelays
+          .filter(r => r.write)
+          .map(r => r.url);
+
+        const allRelays = new Set<string>(writeRelays);
+
+        // Include community relay if setting is enabled (default: true)
+        // This ensures skate content is published to the community relay for discoverability
+        if (useSkateRelay.current) {
+          allRelays.add(SKATE_RELAY);
+        }
+
+        // Ensure we always have at least one relay
+        if (allRelays.size === 0) {
+          console.warn('No write relays configured, using defaults');
+          DEFAULT_RELAYS.forEach(r => allRelays.add(r.url));
+        }
+
+        console.log(`[NostrProvider] Publishing kind ${event.kind} to relays:`, [...allRelays]);
+
+        return [...allRelays];
+      },
+    });
+  }
+
+  return (
+    <NostrContext.Provider value={{ nostr: pool.current }}>
+      {children}
+    </NostrContext.Provider>
+  );
+};
+
+export default NostrProvider;
\ No newline at end of file
diff --git a/src/src/components/NostrSync.tsx b/src/src/components/NostrSync.tsx
new file mode 100644
index 0000000..9296e87
--- /dev/null
+++ b/src/src/components/NostrSync.tsx
@@ -0,0 +1,251 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNostr } from '@nostrify/react';
+import { useNostrLogin } from '@nostrify/react/login';
+import { useQueryClient } from '@tanstack/react-query';
+import { NSchema as n } from '@nostrify/nostrify';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useAppContext } from '@/hooks/useAppContext';
+import { useToast } from '@/hooks/useToast';
+
+// Default relays for new users
+const NEW_USER_RELAYS = [
+  { url: 'wss://relay.ditto.pub', read: true, write: true },
+  { url: 'wss://goskatespots.nostr1.com', read: true, write: true },
+  { url: 'wss://wotr.relatr.xyz', read: true, write: true },
+  { url: 'wss://purplepag.es', read: true, write: false }, // Profile aggregator
+];
+
+// Fallback relays for fetching profile data (aggregators that index many profiles)
+const FALLBACK_RELAYS = [
+  'wss://purplepag.es',
+  'wss://relay.nostr.band',
+  'wss://relay.damus.io',
+  'wss://nos.lol',
+];
+
+/**
+ * NostrSync - Syncs user's Nostr data on login
+ *
+ * This component runs globally to sync various Nostr data when the user logs in.
+ * It fetches data and populates TanStack Query cache so other hooks don't need to refetch.
+ * 
+ * Currently syncs:
+ * - NIP-65 relay list (kind 10002)
+ * - Profile metadata (kind 0) - cached for useAuthor hook
+ * 
+ * New users (without a published relay list) get default relays instead of
+ * inheriting from previous browser sessions.
+ */
+export function NostrSync() {
+  const { nostr } = useNostr();
+  const { user } = useCurrentUser();
+  const { logins } = useNostrLogin();
+  const { config, updateConfig } = useAppContext();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const syncedUsers = useRef<Set<string>>(new Set());
+  const [syncStatus, setSyncStatus] = useState<'idle' | 'syncing' | 'success' | 'error'>('idle');
+
+  useEffect(() => {
+    if (!user) return;
+
+    // Only sync once per user per session
+    if (syncedUsers.current.has(user.pubkey)) return;
+
+    const syncWithRetry = async <T,>(
+      queryFn: () => Promise<T>,
+      maxRetries: number = 5,
+      initialDelayMs: number = 1000
+    ): Promise<T | null> => {
+      for (let attempt = 1; attempt <= maxRetries; attempt++) {
+        try {
+          return await queryFn();
+        } catch (error) {
+          console.warn(`[NostrSync] Attempt ${attempt}/${maxRetries} failed:`, error);
+          if (attempt < maxRetries) {
+            // Exponential backoff: 1s, 2s, 4s, 8s, 16s
+            const delay = initialDelayMs * Math.pow(2, attempt - 1);
+            await new Promise(resolve => setTimeout(resolve, delay));
+          }
+        }
+      }
+      return null;
+    };
+
+    const syncUserData = async () => {
+      setSyncStatus('syncing');
+      console.log('[NostrSync] Starting sync for user:', user.pubkey.slice(0, 8) + '...');
+
+      // FIX B: Invalidate any stale cached data for this user BEFORE fetching
+      // This ensures we don't use old cached empty results
+      queryClient.invalidateQueries({ queryKey: ['author', user.pubkey] });
+      
+      // Also invalidate the logins cache so useLoggedInAccounts refetches
+      const loginsKey = logins.map((l) => l.id).join(';');
+      queryClient.invalidateQueries({ queryKey: ['nostr', 'logins', loginsKey] });
+
+      let relaysSynced = false;
+      let profileSynced = false;
+
+      // Sync relay list (NIP-65)
+      const syncRelays = async (): Promise<boolean> => {
+        const events = await nostr.query(
+          [{ kinds: [10002], authors: [user.pubkey], limit: 1 }],
+          { signal: AbortSignal.timeout(10000) }
+        );
+
+        if (events.length > 0) {
+          const event = events[0];
+
+          // Only update if the event is newer than our stored data
+          if (event.created_at > config.relayMetadata.updatedAt) {
+            const fetchedRelays = event.tags
+              .filter(([name]) => name === 'r')
+              .map(([, url, marker]) => ({
+                url,
+                read: !marker || marker === 'read',
+                write: !marker || marker === 'write',
+              }));
+
+            if (fetchedRelays.length > 0) {
+              console.log('[NostrSync] Synced relay list from NIP-65:', fetchedRelays.length, 'relays');
+              updateConfig((current) => ({
+                ...current,
+                relayMetadata: {
+                  relays: fetchedRelays,
+                  updatedAt: event.created_at,
+                },
+              }));
+              return true;
+            }
+          } else {
+            return true; // Already have latest
+          }
+        } else {
+          // No NIP-65 relay list found - this is a new user!
+          console.log('[NostrSync] New user - setting default relays');
+          updateConfig((current) => ({
+            ...current,
+            relayMetadata: {
+              relays: NEW_USER_RELAYS,
+              updatedAt: 0,
+            },
+          }));
+          return true;
+        }
+        return false;
+      };
+
+      // Sync profile (kind 0) and populate useAuthor cache
+      const syncProfile = async (relayGroup?: ReturnType<typeof nostr.group>): Promise<boolean> => {
+        const querySource = relayGroup || nostr;
+        console.log('[NostrSync] Querying profile for pubkey:', user.pubkey.slice(0, 8) + '...');
+        const events = await querySource.query(
+          [{ kinds: [0], authors: [user.pubkey], limit: 1 }],
+          { signal: AbortSignal.timeout(10000) }
+        );
+        console.log('[NostrSync] Profile query returned', events.length, 'events');
+        
+        if (events.length > 0) {
+          const event = events[0];
+          
+          // FIX A: Parse metadata and populate useAuthor's TanStack Query cache
+          try {
+            const metadata = n.json().pipe(n.metadata()).parse(event.content);
+            
+            // Set the cache data that useAuthor expects
+            queryClient.setQueryData(['author', user.pubkey], { 
+              metadata, 
+              event 
+            });
+            
+            // FIX A+: Also update useLoggedInAccounts cache so profile shows everywhere
+            const loginsKey = logins.map((l) => l.id).join(';');
+            queryClient.setQueryData(['nostr', 'logins', loginsKey], (oldData: Array<{ id: string; pubkey: string; metadata: typeof metadata; event?: typeof event }> | undefined) => {
+              if (!oldData) {
+                // Create initial data from logins
+                return logins.map((login) => {
+                  if (login.pubkey === user.pubkey) {
+                    return { id: login.id, pubkey: login.pubkey, metadata, event };
+                  }
+                  return { id: login.id, pubkey: login.pubkey, metadata: {} };
+                });
+              }
+              // Update existing data
+              return oldData.map((account) => {
+                if (account.pubkey === user.pubkey) {
+                  return { ...account, metadata, event };
+                }
+                return account;
+              });
+            });
+            
+            console.log('[NostrSync] Profile synced and cached:', metadata.name || 'unnamed');
+            return true;
+          } catch (parseError) {
+            // Event exists but content couldn't be parsed - still cache the event
+            queryClient.setQueryData(['author', user.pubkey], { event });
+            console.warn('[NostrSync] Profile event found but metadata parse failed');
+            return true;
+          }
+        }
+        return false;
+      };
+
+      // Try main relays first with retry
+      const mainResult = await syncWithRetry(async () => {
+        const [relayResult, profileResult] = await Promise.all([
+          syncRelays(),
+          syncProfile()
+        ]);
+        return { relays: relayResult, profile: profileResult };
+      }, 3, 1500);
+
+      if (mainResult) {
+        relaysSynced = mainResult.relays;
+        profileSynced = mainResult.profile;
+      }
+
+      // If profile not found on main relays, try fallback relays
+      if (!profileSynced) {
+        console.log('[NostrSync] Profile not found on main relays, trying fallbacks...');
+        
+        const fallbackResult = await syncWithRetry(async () => {
+          const fallbackGroup = nostr.group(FALLBACK_RELAYS);
+          return await syncProfile(fallbackGroup);
+        }, 3, 2000);
+
+        if (fallbackResult) {
+          profileSynced = true;
+        }
+      }
+
+      // Mark sync complete for this user
+      syncedUsers.current.add(user.pubkey);
+
+      if (relaysSynced || profileSynced) {
+        setSyncStatus('success');
+        console.log('[NostrSync] Sync completed - relays:', relaysSynced, 'profile:', profileSynced);
+      } else {
+        setSyncStatus('error');
+        console.error('[NostrSync] Sync failed - could not reach relays');
+        toast({
+          title: 'Connection Issue',
+          description: 'Could not sync your profile. Check your internet connection.',
+          variant: 'destructive',
+        });
+      }
+    };
+
+    // FIX C: Longer initial delay to allow relay connections to establish
+    // This helps with external signers like Amber where PWA context may need time
+    // to re-establish WebSocket connections after returning from the signer app
+    const timeoutId = setTimeout(() => {
+      syncUserData();
+    }, 800);
+
+    return () => clearTimeout(timeoutId);
+  }, [user, config.relayMetadata.updatedAt, nostr, updateConfig, toast, queryClient, logins]);
+
+  return null;
+}
diff --git a/src/src/components/NoteContent.test.tsx b/src/src/components/NoteContent.test.tsx
new file mode 100644
index 0000000..a3244d1
--- /dev/null
+++ b/src/src/components/NoteContent.test.tsx
@@ -0,0 +1,136 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { TestApp } from '@/test/TestApp';
+import { NoteContent } from './NoteContent';
+import type { NostrEvent } from '@nostrify/nostrify';
+
+describe('NoteContent', () => {
+  it('linkifies URLs in kind 1 events', () => {
+    const event: NostrEvent = {
+      id: 'test-id',
+      pubkey: 'test-pubkey',
+      created_at: Math.floor(Date.now() / 1000),
+      kind: 1,
+      tags: [],
+      content: 'Check out this link: https://example.com',
+      sig: 'test-sig',
+    };
+
+    render(
+      <TestApp>
+        <NoteContent event={event} />
+      </TestApp>
+    );
+
+    const link = screen.getByRole('link', { name: 'https://example.com' });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', 'https://example.com');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+
+  it('linkifies URLs in kind 1111 events (comments)', () => {
+    const event: NostrEvent = {
+      id: 'test-comment-id',
+      pubkey: 'test-pubkey',
+      created_at: Math.floor(Date.now() / 1000),
+      kind: 1111,
+      tags: [
+        ['a', '30040:pubkey:identifier'],
+        ['k', '30040'],
+        ['p', 'pubkey'],
+      ],
+      content: 'I think the log events should be different kind numbers instead of having a `log-type` tag. That way you can use normal Nostr filters to filter the log types. Also, the `note` type should just b a kind 1111: https://nostrbook.dev/kinds/1111',
+      sig: 'test-sig',
+    };
+
+    render(
+      <TestApp>
+        <NoteContent event={event} />
+      </TestApp>
+    );
+
+    const link = screen.getByRole('link', { name: 'https://nostrbook.dev/kinds/1111' });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', 'https://nostrbook.dev/kinds/1111');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+
+  it('handles text without URLs correctly', () => {
+    const event: NostrEvent = {
+      id: 'test-id',
+      pubkey: 'test-pubkey',
+      created_at: Math.floor(Date.now() / 1000),
+      kind: 1111,
+      tags: [],
+      content: 'This is just plain text without any links.',
+      sig: 'test-sig',
+    };
+
+    render(
+      <TestApp>
+        <NoteContent event={event} />
+      </TestApp>
+    );
+
+    expect(screen.getByText('This is just plain text without any links.')).toBeInTheDocument();
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+  });
+
+  it('renders hashtags as links', () => {
+    const event: NostrEvent = {
+      id: 'test-id',
+      pubkey: 'test-pubkey',
+      created_at: Math.floor(Date.now() / 1000),
+      kind: 1,
+      tags: [],
+      content: 'This is a post about #nostr and #bitcoin development.',
+      sig: 'test-sig',
+    };
+
+    render(
+      <TestApp>
+        <NoteContent event={event} />
+      </TestApp>
+    );
+
+    const nostrHashtag = screen.getByRole('link', { name: '#nostr' });
+    const bitcoinHashtag = screen.getByRole('link', { name: '#bitcoin' });
+    
+    expect(nostrHashtag).toBeInTheDocument();
+    expect(bitcoinHashtag).toBeInTheDocument();
+    expect(nostrHashtag).toHaveAttribute('href', '/t/nostr');
+    expect(bitcoinHashtag).toHaveAttribute('href', '/t/bitcoin');
+  });
+
+  it('generates deterministic names for users without metadata and styles them differently', () => {
+    // Use a valid npub for testing
+    const event: NostrEvent = {
+      id: 'test-id',
+      pubkey: 'test-pubkey',
+      created_at: Math.floor(Date.now() / 1000),
+      kind: 1,
+      tags: [],
+      content: `Mentioning nostr:npub1zg69v7ys40x77y352eufp27daufrg4ncjz4ummcjx3t83y9tehhsqepuh0`,
+      sig: 'test-sig',
+    };
+
+    render(
+      <TestApp>
+        <NoteContent event={event} />
+      </TestApp>
+    );
+
+    // The mention should be rendered with a deterministic name
+    const mention = screen.getByRole('link');
+    expect(mention).toBeInTheDocument();
+    
+    // Should have muted styling for generated names (gray instead of blue)
+    expect(mention).toHaveClass('text-gray-500');
+    expect(mention).not.toHaveClass('text-blue-500');
+    
+    // The text should start with @ and contain a generated name (not a truncated npub)
+    const linkText = mention.textContent;
+    expect(linkText).not.toMatch(/^@npub1/); // Should not be a truncated npub
+    expect(linkText).toEqual("@Swift Falcon");
+  });
+});
\ No newline at end of file
diff --git a/src/src/components/NoteContent.tsx b/src/src/components/NoteContent.tsx
new file mode 100644
index 0000000..a7a7c30
--- /dev/null
+++ b/src/src/components/NoteContent.tsx
@@ -0,0 +1,137 @@
+import { useMemo } from 'react';
+import { type NostrEvent } from '@nostrify/nostrify';
+import { Link } from 'react-router-dom';
+import { nip19 } from 'nostr-tools';
+import { useAuthor } from '@/hooks/useAuthor';
+import { genUserName } from '@/lib/genUserName';
+import { cn } from '@/lib/utils';
+
+interface NoteContentProps {
+  event: NostrEvent;
+  className?: string;
+}
+
+/** Parses content of text note events so that URLs and hashtags are linkified. */
+export function NoteContent({
+  event, 
+  className, 
+}: NoteContentProps) {  
+  // Process the content to render mentions, links, etc.
+  const content = useMemo(() => {
+    const text = event.content;
+    
+    // Regex to find URLs, Nostr references, and hashtags
+    const regex = /(https?:\/\/[^\s]+)|nostr:(npub1|note1|nprofile1|nevent1)([023456789acdefghjklmnpqrstuvwxyz]+)|(#\w+)/g;
+    
+    const parts: React.ReactNode[] = [];
+    let lastIndex = 0;
+    let match: RegExpExecArray | null;
+    let keyCounter = 0;
+    
+    while ((match = regex.exec(text)) !== null) {
+      const [fullMatch, url, nostrPrefix, nostrData, hashtag] = match;
+      const index = match.index;
+      
+      // Add text before this match
+      if (index > lastIndex) {
+        parts.push(text.substring(lastIndex, index));
+      }
+      
+      if (url) {
+        // Handle URLs
+        parts.push(
+          <a 
+            key={`url-${keyCounter++}`}
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-500 hover:underline"
+          >
+            {url}
+          </a>
+        );
+      } else if (nostrPrefix && nostrData) {
+        // Handle Nostr references
+        try {
+          const nostrId = `${nostrPrefix}${nostrData}`;
+          const decoded = nip19.decode(nostrId);
+          
+          if (decoded.type === 'npub') {
+            const pubkey = decoded.data;
+            parts.push(
+              <NostrMention key={`mention-${keyCounter++}`} pubkey={pubkey} />
+            );
+          } else {
+            // For other types, just show as a link
+            parts.push(
+              <Link 
+                key={`nostr-${keyCounter++}`}
+                to={`/${nostrId}`}
+                className="text-blue-500 hover:underline"
+              >
+                {fullMatch}
+              </Link>
+            );
+          }
+        } catch {
+          // If decoding fails, just render as text
+          parts.push(fullMatch);
+        }
+      } else if (hashtag) {
+        // Handle hashtags
+        const tag = hashtag.slice(1); // Remove the #
+        parts.push(
+          <Link 
+            key={`hashtag-${keyCounter++}`}
+            to={`/t/${tag}`}
+            className="text-blue-500 hover:underline"
+          >
+            {hashtag}
+          </Link>
+        );
+      }
+      
+      lastIndex = index + fullMatch.length;
+    }
+    
+    // Add any remaining text
+    if (lastIndex < text.length) {
+      parts.push(text.substring(lastIndex));
+    }
+    
+    // If no special content was found, just use the plain text
+    if (parts.length === 0) {
+      parts.push(text);
+    }
+    
+    return parts;
+  }, [event]);
+
+  return (
+    <div className={cn("whitespace-pre-wrap break-words", className)}>
+      {content.length > 0 ? content : event.content}
+    </div>
+  );
+}
+
+// Helper component to display user mentions
+function NostrMention({ pubkey }: { pubkey: string }) {
+  const author = useAuthor(pubkey);
+  const npub = nip19.npubEncode(pubkey);
+  const hasRealName = !!author.data?.metadata?.name;
+  const displayName = author.data?.metadata?.name ?? genUserName(pubkey);
+
+  return (
+    <Link 
+      to={`/${npub}`}
+      className={cn(
+        "font-medium hover:underline",
+        hasRealName 
+          ? "text-blue-500" 
+          : "text-gray-500 hover:text-gray-700"
+      )}
+    >
+      @{displayName}
+    </Link>
+  );
+}
\ No newline at end of file
diff --git a/src/src/components/OfflineIndicator.tsx b/src/src/components/OfflineIndicator.tsx
new file mode 100644
index 0000000..a699fe8
--- /dev/null
+++ b/src/src/components/OfflineIndicator.tsx
@@ -0,0 +1,115 @@
+import { useOnlineStatus, usePendingPostsCount, useSyncPendingPosts } from '@/hooks/useOfflineCache';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Wifi, WifiOff, Cloud, CloudOff, Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface OfflineIndicatorProps {
+  className?: string;
+  showWhenOnline?: boolean;
+}
+
+export function OfflineIndicator({ className, showWhenOnline = false }: OfflineIndicatorProps) {
+  const isOnline = useOnlineStatus();
+  const { data: pendingCount } = usePendingPostsCount();
+  const { isSyncing } = useSyncPendingPosts();
+
+  // Don't show when online (unless explicitly requested or there are pending posts)
+  if (isOnline && !showWhenOnline && !pendingCount && !isSyncing) {
+    return null;
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className={cn(
+            'gap-2 h-8 px-3 font-medium',
+            isOnline
+              ? 'text-green-400 hover:text-green-300 hover:bg-green-500/10'
+              : 'text-orange-400 hover:text-orange-300 hover:bg-orange-500/10 animate-pulse',
+            className
+          )}
+        >
+          {isSyncing ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : isOnline ? (
+            <Wifi className="h-4 w-4" />
+          ) : (
+            <WifiOff className="h-4 w-4" />
+          )}
+          {!isOnline && <span className="text-xs">Offline</span>}
+          {pendingCount !== undefined && pendingCount > 0 && (
+            <Badge variant="secondary" className="h-5 px-1.5 text-xs bg-orange-500/20 text-orange-400">
+              {pendingCount}
+            </Badge>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-72 bg-black border-gray-700">
+        <div className="space-y-4">
+          {/* Connection Status */}
+          <div className="flex items-center gap-3">
+            <div className={cn(
+              'w-10 h-10 rounded-full flex items-center justify-center',
+              isOnline ? 'bg-green-500/20' : 'bg-orange-500/20'
+            )}>
+              {isOnline ? (
+                <Cloud className="h-5 w-5 text-green-400" />
+              ) : (
+                <CloudOff className="h-5 w-5 text-orange-400" />
+              )}
+            </div>
+            <div>
+              <p className="font-bold text-white">
+                {isOnline ? 'Connected' : 'Offline Mode'}
+              </p>
+              <p className="text-xs text-gray-400">
+                {isOnline
+                  ? 'All features available'
+                  : 'Browsing cached spots'}
+              </p>
+            </div>
+          </div>
+
+          {/* Pending Posts */}
+          {pendingCount !== undefined && pendingCount > 0 && (
+            <div className="p-3 rounded-lg bg-orange-500/10 border border-orange-500/30">
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-orange-400 font-medium">
+                  {pendingCount} pending post{pendingCount > 1 ? 's' : ''}
+                </span>
+                {isSyncing && (
+                  <Badge className="bg-orange-500 text-white text-xs">
+                    <Loader2 className="h-3 w-3 mr-1 animate-spin" />
+                    Syncing
+                  </Badge>
+                )}
+              </div>
+              <p className="text-xs text-gray-400 mt-1">
+                {isOnline
+                  ? 'Publishing when connection stabilizes...'
+                  : 'Will be published when back online'}
+              </p>
+            </div>
+          )}
+
+          {/* Offline Features Info */}
+          {!isOnline && (
+            <div className="text-xs text-gray-400 space-y-1">
+              <p className="font-medium text-gray-300">Available offline:</p>
+              <ul className="list-disc list-inside space-y-0.5">
+                <li>Browse previously viewed spots</li>
+                <li>View cached spot details</li>
+                <li>Queue posts for later</li>
+              </ul>
+            </div>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/src/src/components/PWAInstallPrompt.tsx b/src/src/components/PWAInstallPrompt.tsx
new file mode 100644
index 0000000..33d6920
--- /dev/null
+++ b/src/src/components/PWAInstallPrompt.tsx
@@ -0,0 +1,351 @@
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+import { useTranslation } from '@/contexts/LanguageContext';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Button } from '@/components/ui/button';
+import { Download, X, Share, Plus, Smartphone } from 'lucide-react';
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt: () => Promise<void>;
+  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
+}
+
+// Detect iOS
+const isIOS = () => {
+  if (typeof navigator === 'undefined') return false;
+  return /iPad|iPhone|iPod/.test(navigator.userAgent) || 
+    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+};
+
+// Detect if running in standalone mode (PWA)
+const isStandalone = () => {
+  if (typeof window === 'undefined') return false;
+  return window.matchMedia('(display-mode: standalone)').matches ||
+    // iOS Safari specific check
+    ('standalone' in window.navigator && (window.navigator as Navigator & { standalone: boolean }).standalone);
+};
+
+// Detect mobile/tablet
+const isMobileOrTablet = () => {
+  if (typeof navigator === 'undefined') return false;
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
+    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1); // iPad
+};
+
+export function PWAInstallPrompt() {
+  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
+  const [showPrompt, setShowPrompt] = useState(false);
+  const [showManualPrompt, setShowManualPrompt] = useState(false);
+  const [dismissed, setDismissed] = useLocalStorage('pwa-install-dismissed', false);
+  const [installed, setInstalled] = useLocalStorage('pwa-installed', false);
+  const [isIOSDevice] = useState(isIOS());
+  const hasPromptFiredRef = useRef(false);
+  const { t } = useTranslation();
+
+  // Handler for beforeinstallprompt
+  const handleBeforeInstallPrompt = useCallback((e: Event) => {
+    e.preventDefault();
+    hasPromptFiredRef.current = true;
+    setDeferredPrompt(e as BeforeInstallPromptEvent);
+  }, []);
+
+  // Handler for app installed
+  const handleAppInstalled = useCallback(() => {
+    setInstalled(true);
+    setShowPrompt(false);
+    setShowManualPrompt(false);
+    setDeferredPrompt(null);
+  }, [setInstalled]);
+
+  useEffect(() => {
+    // Don't show if already dismissed or installed
+    if (dismissed || installed) return;
+
+    // Check if running in standalone mode (already installed)
+    if (isStandalone()) {
+      setInstalled(true);
+      return;
+    }
+
+    // Check if mobile/tablet - only show on mobile devices
+    if (!isMobileOrTablet()) return;
+
+    // Add event listeners
+    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+    window.addEventListener('appinstalled', handleAppInstalled);
+
+    // For iOS, we can't use beforeinstallprompt - show manual instructions after delay
+    if (isIOSDevice) {
+      const timer = setTimeout(() => {
+        setShowManualPrompt(true);
+      }, 5000);
+      return () => {
+        clearTimeout(timer);
+        window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+        window.removeEventListener('appinstalled', handleAppInstalled);
+      };
+    }
+
+    return () => {
+      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+      window.removeEventListener('appinstalled', handleAppInstalled);
+    };
+  }, [dismissed, installed, setInstalled, isIOSDevice, handleBeforeInstallPrompt, handleAppInstalled]);
+
+  // Separate effect to handle showing prompts based on deferredPrompt state
+  useEffect(() => {
+    if (dismissed || installed) return;
+    if (!isMobileOrTablet() || isIOSDevice) return;
+
+    // If we have a deferred prompt, show native install after delay
+    if (deferredPrompt) {
+      const timer = setTimeout(() => {
+        setShowPrompt(true);
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+
+    // Fallback: If beforeinstallprompt doesn't fire within 7 seconds on Android, show manual prompt
+    const fallbackTimer = setTimeout(() => {
+      if (!hasPromptFiredRef.current && !deferredPrompt) {
+        setShowManualPrompt(true);
+      }
+    }, 7000);
+
+    return () => clearTimeout(fallbackTimer);
+  }, [deferredPrompt, dismissed, installed, isIOSDevice]);
+
+  const handleInstall = async () => {
+    if (!deferredPrompt) return;
+
+    // Show the install prompt
+    await deferredPrompt.prompt();
+
+    // Wait for the user's response
+    const { outcome } = await deferredPrompt.userChoice;
+
+    if (outcome === 'accepted') {
+      setInstalled(true);
+    }
+
+    // Clear the deferred prompt
+    setDeferredPrompt(null);
+    setShowPrompt(false);
+  };
+
+  const handleDismiss = () => {
+    setShowPrompt(false);
+    setShowManualPrompt(false);
+    setDismissed(true);
+  };
+
+  // Native install prompt (Android Chrome)
+  if (showPrompt && deferredPrompt) {
+    return (
+      <Sheet open={showPrompt} onOpenChange={setShowPrompt}>
+        <SheetContent 
+          side="bottom" 
+          className="rounded-t-2xl border-t-4 border-[#ff0040] bg-gradient-to-b from-[#ff0040]/10 to-black/95 backdrop-blur-lg"
+          onInteractOutside={(e) => e.preventDefault()}
+        >
+          <SheetHeader className="text-left">
+            <div className="flex items-start justify-between">
+              <div className="flex items-center gap-3">
+                <div className="flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-gradient-to-br from-[#ff0040] to-[#cc0033] flex items-center justify-center shadow-lg shadow-[#ff0040]/30">
+                  <Smartphone className="h-6 w-6 sm:h-7 sm:w-7 text-white" />
+                </div>
+                <div className="flex-1">
+                  <SheetTitle className="text-lg sm:text-xl font-bold">
+                    {t('pwa.installTitle')}
+                  </SheetTitle>
+                  <SheetDescription className="text-xs sm:text-sm text-gray-400">
+                    {t('pwa.installSubtitle')}
+                  </SheetDescription>
+                </div>
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleDismiss}
+                className="ml-2 -mt-1 text-gray-500 hover:text-gray-300"
+              >
+                <X className="h-5 w-5" />
+              </Button>
+            </div>
+          </SheetHeader>
+
+          <div className="mt-4 sm:mt-6">
+            {/* Benefits list */}
+            <div className="grid grid-cols-3 gap-2 mb-5">
+              <div className="text-center p-2 rounded-lg bg-[#ff0040]/10 border border-[#ff0040]/30">
+                <p className="text-lg">⚡</p>
+                <p className="text-[10px] sm:text-xs text-gray-400">{t('pwa.benefits.fast')}</p>
+              </div>
+              <div className="text-center p-2 rounded-lg bg-[#ff0040]/10 border border-[#ff0040]/30">
+                <p className="text-lg">📴</p>
+                <p className="text-[10px] sm:text-xs text-gray-400">{t('pwa.benefits.offline')}</p>
+              </div>
+              <div className="text-center p-2 rounded-lg bg-[#ff0040]/10 border border-[#ff0040]/30">
+                <p className="text-lg">🛹</p>
+                <p className="text-[10px] sm:text-xs text-gray-400">{t('pwa.benefits.fullAccess')}</p>
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <Button
+                onClick={handleInstall}
+                className="w-full h-12 sm:h-14 text-sm sm:text-base font-bold bg-[#ff0040] hover:bg-[#ff0040]/90 shadow-lg shadow-[#ff0040]/30"
+                size="lg"
+              >
+                <Download className="mr-2 h-5 w-5" />
+                {t('pwa.installApp')}
+              </Button>
+
+              <button
+                onClick={handleDismiss}
+                className="w-full text-center text-xs text-gray-500 hover:text-gray-400 py-2"
+              >
+                {t('pwa.maybeLater')}
+              </button>
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  // Manual install instructions (iOS and fallback for other browsers)
+  if (showManualPrompt) {
+    return (
+      <Sheet open={showManualPrompt} onOpenChange={setShowManualPrompt}>
+        <SheetContent 
+          side="bottom" 
+          className="rounded-t-2xl border-t-4 border-[#ccff00] bg-gradient-to-b from-[#ccff00]/10 to-black/95 backdrop-blur-lg max-h-[85vh] overflow-y-auto"
+          onInteractOutside={(e) => e.preventDefault()}
+        >
+          <SheetHeader className="text-left">
+            <div className="flex items-start justify-between">
+              <div className="flex items-center gap-3">
+                <div className="flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-gradient-to-br from-[#ccff00] to-[#99cc00] flex items-center justify-center shadow-lg shadow-[#ccff00]/30">
+                  <Smartphone className="h-6 w-6 sm:h-7 sm:w-7 text-black" />
+                </div>
+                <div className="flex-1">
+                  <SheetTitle className="text-lg sm:text-xl font-bold text-[#ccff00]">
+                    {t('pwa.addToHomeScreen')}
+                  </SheetTitle>
+                  <SheetDescription className="text-xs sm:text-sm text-gray-400">
+                    {isIOSDevice ? t('pwa.iosStep1Hint') : t('pwa.androidStep1Hint')}
+                  </SheetDescription>
+                </div>
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleDismiss}
+                className="ml-2 -mt-1 text-gray-500 hover:text-gray-300"
+              >
+                <X className="h-5 w-5" />
+              </Button>
+            </div>
+          </SheetHeader>
+
+          <div className="mt-4 sm:mt-6 space-y-4">
+            {isIOSDevice ? (
+              // iOS Instructions
+              <div className="space-y-3">
+                <div className="flex items-center gap-3 p-3 sm:p-4 rounded-xl bg-[#ccff00]/10 border border-[#ccff00]/30">
+                  <div className="flex-shrink-0 w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-[#ccff00] text-black flex items-center justify-center font-bold text-sm sm:text-base shadow-md">
+                    1
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm sm:text-base font-medium text-white">{t('pwa.iosStep1')}</p>
+                    <p className="text-xs sm:text-sm text-gray-400 flex items-center gap-1 mt-0.5">
+                      <Share className="h-3 w-3 sm:h-4 sm:w-4" /> {t('pwa.iosStep1Hint')}
+                    </p>
+                  </div>
+                </div>
+                
+                <div className="flex items-center gap-3 p-3 sm:p-4 rounded-xl bg-[#ccff00]/10 border border-[#ccff00]/30">
+                  <div className="flex-shrink-0 w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-[#ccff00] text-black flex items-center justify-center font-bold text-sm sm:text-base shadow-md">
+                    2
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm sm:text-base font-medium text-white">{t('pwa.iosStep2')}</p>
+                    <p className="text-xs sm:text-sm text-gray-400 flex items-center gap-1 mt-0.5">
+                      <Plus className="h-3 w-3 sm:h-4 sm:w-4" /> {t('pwa.iosStep2Hint')}
+                    </p>
+                  </div>
+                </div>
+                
+                <div className="flex items-center gap-3 p-3 sm:p-4 rounded-xl bg-[#ccff00]/10 border border-[#ccff00]/30">
+                  <div className="flex-shrink-0 w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-[#ccff00] text-black flex items-center justify-center font-bold text-sm sm:text-base shadow-md">
+                    3
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm sm:text-base font-medium text-white">{t('pwa.iosStep3')}</p>
+                    <p className="text-xs sm:text-sm text-gray-400 mt-0.5">{t('pwa.iosStep3Hint')}</p>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              // Android/Other Instructions
+              <div className="space-y-3">
+                <div className="flex items-center gap-3 p-3 sm:p-4 rounded-xl bg-[#ccff00]/10 border border-[#ccff00]/30">
+                  <div className="flex-shrink-0 w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-[#ccff00] text-black flex items-center justify-center font-bold text-sm sm:text-base shadow-md">
+                    1
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm sm:text-base font-medium text-white">{t('pwa.androidStep1')}</p>
+                    <p className="text-xs sm:text-sm text-gray-400 mt-0.5">{t('pwa.androidStep1Hint')}</p>
+                  </div>
+                </div>
+                
+                <div className="flex items-center gap-3 p-3 sm:p-4 rounded-xl bg-[#ccff00]/10 border border-[#ccff00]/30">
+                  <div className="flex-shrink-0 w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-[#ccff00] text-black flex items-center justify-center font-bold text-sm sm:text-base shadow-md">
+                    2
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm sm:text-base font-medium text-white">{t('pwa.androidStep2')}</p>
+                    <p className="text-xs sm:text-sm text-gray-400 mt-0.5">{t('pwa.androidStep2Hint')}</p>
+                  </div>
+                </div>
+                
+                <div className="flex items-center gap-3 p-3 sm:p-4 rounded-xl bg-[#ccff00]/10 border border-[#ccff00]/30">
+                  <div className="flex-shrink-0 w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-[#ccff00] text-black flex items-center justify-center font-bold text-sm sm:text-base shadow-md">
+                    3
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm sm:text-base font-medium text-white">{t('pwa.androidStep3')}</p>
+                    <p className="text-xs sm:text-sm text-gray-400 mt-0.5">{t('pwa.androidStep3Hint')}</p>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            <Button
+              onClick={handleDismiss}
+              className="w-full h-12 text-sm sm:text-base font-semibold bg-[#ccff00] text-black hover:bg-[#ccff00]/90"
+              size="lg"
+            >
+              {t('pwa.gotIt')}
+            </Button>
+          </div>
+
+          <div className="mt-3 text-center">
+            <p className="text-xs text-muted-foreground">
+              {t('pwa.tagline')}
+            </p>
+          </div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return null;
+}
diff --git a/src/src/components/QualityMeter.tsx b/src/src/components/QualityMeter.tsx
new file mode 100644
index 0000000..1c5850d
--- /dev/null
+++ b/src/src/components/QualityMeter.tsx
@@ -0,0 +1,231 @@
+import { useMemo } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { 
+  Zap, 
+  Camera, 
+  FileText, 
+  MapPin, 
+  Phone, 
+  Globe, 
+  Clock,
+  Check,
+  Circle,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export interface QualityCheckItem {
+  id: string;
+  label: string;
+  description?: string;
+  points: number;
+  completed: boolean;
+  icon: React.ComponentType<{ className?: string }>;
+}
+
+interface QualityMeterProps {
+  type: 'spot' | 'shop';
+  // Form state checks
+  hasLocation: boolean;
+  hasPhotos: boolean;
+  photoCount: number;
+  hasDescription: boolean;
+  descriptionLength: number;
+  // Shop-specific
+  hasPhone?: boolean;
+  hasWebsite?: boolean;
+  hasHours?: boolean;
+  // Spot-specific
+  hasSpotType?: boolean;
+  className?: string;
+}
+
+export function QualityMeter({
+  type,
+  hasLocation,
+  hasPhotos,
+  photoCount,
+  hasDescription,
+  descriptionLength,
+  hasPhone,
+  hasWebsite,
+  hasHours,
+  hasSpotType,
+  className,
+}: QualityMeterProps) {
+  const checks = useMemo(() => {
+    const items: QualityCheckItem[] = [
+      {
+        id: 'location',
+        label: 'Location added',
+        points: 20,
+        completed: hasLocation,
+        icon: MapPin,
+      },
+      {
+        id: 'photo1',
+        label: 'At least 1 photo',
+        points: 20,
+        completed: hasPhotos,
+        icon: Camera,
+      },
+      {
+        id: 'photo3',
+        label: '3+ photos',
+        description: 'More angles = better',
+        points: 15,
+        completed: photoCount >= 3,
+        icon: Camera,
+      },
+      {
+        id: 'description',
+        label: 'Description',
+        points: 15,
+        completed: hasDescription && descriptionLength >= 20,
+        icon: FileText,
+      },
+      {
+        id: 'description-detailed',
+        label: 'Detailed description (100+ chars)',
+        points: 10,
+        completed: descriptionLength >= 100,
+        icon: FileText,
+      },
+    ];
+
+    if (type === 'shop') {
+      items.push(
+        {
+          id: 'contact',
+          label: 'Contact info',
+          description: 'Phone or website',
+          points: 10,
+          completed: !!hasPhone || !!hasWebsite,
+          icon: Phone,
+        },
+        {
+          id: 'hours',
+          label: 'Opening hours',
+          points: 10,
+          completed: !!hasHours,
+          icon: Clock,
+        }
+      );
+    } else {
+      items.push({
+        id: 'spot-type',
+        label: 'Spot type selected',
+        points: 10,
+        completed: !!hasSpotType,
+        icon: MapPin,
+      });
+    }
+
+    return items;
+  }, [type, hasLocation, hasPhotos, photoCount, hasDescription, descriptionLength, hasPhone, hasWebsite, hasHours, hasSpotType]);
+
+  const { score, maxScore, completedItems, totalItems } = useMemo(() => {
+    const completed = checks.filter(c => c.completed);
+    const total = checks.reduce((sum, c) => sum + c.points, 0);
+    const current = completed.reduce((sum, c) => sum + c.points, 0);
+    return {
+      score: current,
+      maxScore: total,
+      completedItems: completed.length,
+      totalItems: checks.length,
+    };
+  }, [checks]);
+
+  const percentage = Math.round((score / maxScore) * 100);
+
+  const getScoreColor = () => {
+    if (percentage >= 80) return 'text-green-400';
+    if (percentage >= 50) return 'text-[#ccff00]';
+    if (percentage >= 30) return 'text-yellow-400';
+    return 'text-orange-400';
+  };
+
+  const getProgressColor = () => {
+    if (percentage >= 80) return 'bg-green-500';
+    if (percentage >= 50) return 'bg-[#ccff00]';
+    if (percentage >= 30) return 'bg-yellow-500';
+    return 'bg-orange-500';
+  };
+
+  const getScoreLabel = () => {
+    if (percentage >= 80) return 'Excellent!';
+    if (percentage >= 50) return 'Good';
+    if (percentage >= 30) return 'Basic';
+    return 'Getting started';
+  };
+
+  return (
+    <Card className={cn('bg-gradient-to-br from-[#ccff00]/5 to-transparent border-[#ccff00]/20', className)}>
+      <CardContent className="p-4">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-2">
+            <Zap className="h-4 w-4 text-[#ccff00]" />
+            <span className="text-sm font-bold uppercase text-gray-300">Earning Potential</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className={cn('text-sm font-bold', getScoreColor())}>
+              {getScoreLabel()}
+            </span>
+            <span className="text-xs text-gray-500">
+              {percentage}%
+            </span>
+          </div>
+        </div>
+
+        {/* Progress Bar */}
+        <div className="relative h-3 bg-gray-800 rounded-full overflow-hidden mb-4">
+          <div 
+            className={cn('h-full transition-all duration-500 ease-out rounded-full', getProgressColor())}
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+
+        {/* Checklist */}
+        <div className="space-y-2">
+          {checks.map((check) => {
+            const Icon = check.icon;
+            return (
+              <div 
+                key={check.id}
+                className={cn(
+                  'flex items-center gap-2 text-xs transition-all',
+                  check.completed ? 'text-green-400' : 'text-gray-500'
+                )}
+              >
+                <div className="flex-shrink-0">
+                  {check.completed ? (
+                    <Check className="h-3.5 w-3.5" />
+                  ) : (
+                    <Circle className="h-3.5 w-3.5" />
+                  )}
+                </div>
+                <Icon className="h-3 w-3 flex-shrink-0" />
+                <span className={check.completed ? 'line-through opacity-70' : ''}>
+                  {check.label}
+                </span>
+                <span className={cn(
+                  'ml-auto text-[10px] font-bold',
+                  check.completed ? 'text-green-400' : 'text-gray-600'
+                )}>
+                  +{check.points}%
+                </span>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Tip */}
+        <div className="mt-4 pt-3 border-t border-gray-800">
+          <p className="text-[10px] text-gray-500">
+            💡 Higher quality = More zaps from the community!
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/src/components/RelatrSettings.tsx b/src/src/components/RelatrSettings.tsx
new file mode 100644
index 0000000..2e2f256
--- /dev/null
+++ b/src/src/components/RelatrSettings.tsx
@@ -0,0 +1,288 @@
+import { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { useToast } from '@/hooks/useToast';
+import { enableRelatr, getRelatrConfig, disableRelatr } from '@/hooks/useRelatrScore';
+import { useNostr } from '@nostrify/react';
+import { Shield, ExternalLink, Search, CheckCircle2, ChevronDown, ChevronUp } from 'lucide-react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+
+/**
+ * RelatrSettings component for configuring Relatr global trust score integration
+ * 
+ * Relatr publishes trust scores as NIP-85 Trusted Assertion events (kind 30382).
+ * Auto-enabled by default for all users with ContextVM's official service.
+ */
+export function RelatrSettings() {
+  const { toast } = useToast();
+  const { nostr } = useNostr();
+  const config = getRelatrConfig();
+
+  const [pubkey, setPubkey] = useState(config.servicePubkey);
+  const [relay, setRelay] = useState(config.relay);
+  const [isSearching, setIsSearching] = useState(false);
+  const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);
+
+  const handleAutoDiscover = async () => {
+    setIsSearching(true);
+    toast({
+      title: 'Searching for Relatr service...',
+      description: 'Querying Nostr for Relatr profiles',
+    });
+
+    try {
+      // Search for profiles mentioning "relatr" or "contextvm"
+      const profiles = await nostr.query(
+        [{ kinds: [0], search: 'relatr', limit: 10 }],
+        { signal: AbortSignal.timeout(10000) }
+      );
+
+      console.log('[RelatrSettings] Found profiles:', profiles);
+
+      // Look for official Relatr service
+      for (const profile of profiles) {
+        try {
+          const metadata = JSON.parse(profile.content);
+          const name = metadata.name?.toLowerCase() || '';
+          const about = metadata.about?.toLowerCase() || '';
+          const website = metadata.website?.toLowerCase() || '';
+
+          if (
+            name.includes('relatr') ||
+            about.includes('trust score') ||
+            website.includes('relatr.xyz')
+          ) {
+            setPubkey(profile.pubkey);
+            toast({
+              title: 'Found Relatr service!',
+              description: `Service: ${metadata.name || 'Unknown'}`,
+            });
+            return;
+          }
+        } catch (e) {
+          // Skip invalid JSON
+        }
+      }
+
+      toast({
+        title: 'No Relatr service found',
+        description: 'Try entering the pubkey manually or check https://www.relatr.xyz/',
+        variant: 'destructive',
+      });
+    } catch (error) {
+      console.error('[RelatrSettings] Auto-discovery failed:', error);
+      toast({
+        title: 'Search failed',
+        description: 'Could not query Nostr for Relatr profiles',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsSearching(false);
+    }
+  };
+
+  const handleEnable = () => {
+    if (!pubkey || pubkey.length !== 64) {
+      toast({
+        title: 'Invalid pubkey',
+        description: 'Please enter a valid 64-character hex pubkey',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    enableRelatr(pubkey, relay);
+    
+    toast({
+      title: 'Relatr enabled!',
+      description: 'Global trust scores are now active.',
+    });
+  };
+
+  const handleDisable = () => {
+    disableRelatr();
+    
+    toast({
+      title: 'Relatr disabled',
+      description: 'Trust scores are no longer being fetched.',
+    });
+  };
+
+  return (
+    <Card className="bg-black/90 border-2 border-[#ccff00]/30">
+      <CardHeader>
+        <CardTitle className="text-xl font-black uppercase text-[#ccff00] flex items-center gap-2">
+          <Shield className="h-5 w-5" />
+          Relatr Trust Scores
+        </CardTitle>
+        <CardDescription>
+          Global trust scores help identify reliable users and reduce spam
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {/* Status - Always visible */}
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <Label className="text-sm font-bold text-gray-300">Status</Label>
+            <Badge variant={config.enabled ? 'default' : 'outline'} className="gap-2">
+              {config.enabled ? (
+                <>
+                  <CheckCircle2 className="h-3 w-3" />
+                  Active
+                </>
+              ) : (
+                'Disabled'
+              )}
+            </Badge>
+          </div>
+
+          {/* Info Alert */}
+          <Alert className="bg-[#ccff00]/10 border-[#ccff00]/50">
+            <Shield className="h-4 w-4 text-[#ccff00]" />
+            <AlertDescription className="text-sm text-gray-300">
+              {config.enabled ? (
+                <>
+                  <strong className="text-[#ccff00]">Relatr is active.</strong> Trust scores from ContextVM's global network analysis help identify reliable skaters and reduce spam.
+                </>
+              ) : (
+                <>
+                  <strong className="text-[#ccff00]">Relatr is disabled.</strong> Enable it to get trust scores from the global Nostr network.
+                </>
+              )}
+            </AlertDescription>
+          </Alert>
+
+          {/* Quick Actions */}
+          {config.enabled ? (
+            <Button
+              onClick={handleDisable}
+              variant="outline"
+              className="w-full gap-2 border-red-500/50 text-red-400 hover:bg-red-500/10"
+            >
+              Disable Relatr
+            </Button>
+          ) : (
+            <Button
+              onClick={handleEnable}
+              className="w-full gap-2 bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold uppercase"
+              disabled={!pubkey || pubkey.length !== 64}
+            >
+              <Shield className="h-4 w-4" />
+              Enable Relatr
+            </Button>
+          )}
+        </div>
+
+        {/* Advanced Settings - Collapsible */}
+        <Collapsible open={isAdvancedOpen} onOpenChange={setIsAdvancedOpen}>
+          <CollapsibleTrigger asChild>
+            <Button
+              variant="ghost"
+              className="w-full gap-2 text-gray-400 hover:text-white"
+            >
+              {isAdvancedOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+              Advanced Settings
+            </Button>
+          </CollapsibleTrigger>
+          
+          <CollapsibleContent className="space-y-4 pt-4">
+            {/* Service Pubkey Input */}
+            <div className="space-y-2">
+              <Label htmlFor="relatr-pubkey" className="text-sm font-bold text-gray-300">
+                Relatr Service Pubkey
+              </Label>
+              <div className="flex gap-2">
+                <Input
+                  id="relatr-pubkey"
+                  placeholder="Enter 64-character hex pubkey..."
+                  value={pubkey}
+                  onChange={(e) => setPubkey(e.target.value)}
+                  className="font-mono text-xs"
+                  maxLength={64}
+                />
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleAutoDiscover}
+                  disabled={isSearching}
+                  className="gap-2 whitespace-nowrap"
+                >
+                  <Search className="h-4 w-4" />
+                  {isSearching ? 'Searching...' : 'Auto-Discover'}
+                </Button>
+              </div>
+              <p className="text-xs text-gray-500">
+                Default: ContextVM's official Relatr service (npub1dvmc...)
+              </p>
+            </div>
+
+            {/* Relay Input */}
+            <div className="space-y-2">
+              <Label htmlFor="relatr-relay" className="text-sm font-bold text-gray-300">
+                Relay (where Relatr publishes scores)
+              </Label>
+              <Input
+                id="relatr-relay"
+                placeholder="wss://relay.example.com"
+                value={relay}
+                onChange={(e) => setRelay(e.target.value)}
+                className="font-mono text-xs"
+              />
+              <p className="text-xs text-gray-500">
+                Default: wss://relay.contextvm.org (ContextVM's official relay)
+              </p>
+            </div>
+
+            {/* Apply Changes Button */}
+            <Button
+              onClick={handleEnable}
+              variant="outline"
+              className="w-full gap-2"
+              disabled={!pubkey || pubkey.length !== 64}
+            >
+              Apply Changes
+            </Button>
+
+            {/* Documentation Links */}
+            <div className="pt-4 border-t border-gray-700 space-y-2">
+              <p className="text-sm font-bold text-gray-300">Learn More:</p>
+              <div className="flex flex-col gap-2">
+                <a
+                  href="https://www.relatr.xyz/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-[#ccff00] hover:underline inline-flex items-center gap-1"
+                >
+                  <ExternalLink className="h-3 w-3" />
+                  Relatr Website
+                </a>
+                <a
+                  href="https://github.com/ContextVM/relatr"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-[#ccff00] hover:underline inline-flex items-center gap-1"
+                >
+                  <ExternalLink className="h-3 w-3" />
+                  Relatr GitHub
+                </a>
+                <a
+                  href="https://github.com/nostr-protocol/nips/blob/master/85.md"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-[#ccff00] hover:underline inline-flex items-center gap-1"
+                >
+                  <ExternalLink className="h-3 w-3" />
+                  NIP-85 Specification
+                </a>
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/src/components/RelayListManager.tsx b/src/src/components/RelayListManager.tsx
new file mode 100644
index 0000000..0dbd778
--- /dev/null
+++ b/src/src/components/RelayListManager.tsx
@@ -0,0 +1,365 @@
+import { useState, useEffect } from 'react';
+import { Plus, X, Wifi, Settings, HelpCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Switch } from '@/components/ui/switch';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { useAppContext } from '@/hooks/useAppContext';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useToast } from '@/hooks/useToast';
+import { cn } from '@/lib/utils';
+
+interface Relay {
+  url: string;
+  read: boolean;
+  write: boolean;
+}
+
+export function RelayListManager() {
+  const { config, updateConfig } = useAppContext();
+  const { user } = useCurrentUser();
+  const { mutate: publishEvent } = useNostrPublish();
+  const { toast } = useToast();
+
+  const [relays, setRelays] = useState<Relay[]>(config.relayMetadata.relays);
+  const [newRelayUrl, setNewRelayUrl] = useState('');
+
+  // Sync local state with config when it changes (e.g., from NostrProvider sync)
+  useEffect(() => {
+    setRelays(config.relayMetadata.relays);
+  }, [config.relayMetadata.relays]);
+
+  const normalizeRelayUrl = (url: string): string => {
+    url = url.trim();
+    try {
+      return new URL(url).toString();
+    } catch {
+      try {
+        return new URL(`wss://${url}`).toString();
+      } catch {
+        return url;
+      }
+    }
+  };
+
+  const isValidRelayUrl = (url: string): boolean => {
+    const trimmed = url.trim();
+    if (!trimmed) return false;
+
+    const normalized = normalizeRelayUrl(trimmed);
+    try {
+      new URL(normalized);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  const handleAddRelay = () => {
+    if (!isValidRelayUrl(newRelayUrl)) {
+      toast({
+        title: 'Invalid relay URL',
+        description: 'Please enter a valid relay URL (e.g., wss://relay.example.com)',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    const normalized = normalizeRelayUrl(newRelayUrl);
+
+    if (relays.some(r => r.url === normalized)) {
+      toast({
+        title: 'Relay already exists',
+        description: 'This relay is already in your list.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    const newRelays = [...relays, { url: normalized, read: true, write: true }];
+    setRelays(newRelays);
+    setNewRelayUrl('');
+
+    saveRelays(newRelays);
+  };
+
+  const handleRemoveRelay = (url: string) => {
+    const newRelays = relays.filter(r => r.url !== url);
+    setRelays(newRelays);
+    saveRelays(newRelays);
+  };
+
+  const handleToggleRead = (url: string) => {
+    const relay = relays.find(r => r.url === url);
+    if (!relay) return;
+
+    // Prevent disabling read if write is already disabled
+    if (relay.read && !relay.write) {
+      toast({
+        title: 'Cannot disable read',
+        description: 'At least one of read or write must be enabled for each relay.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    const newRelays = relays.map(r =>
+      r.url === url ? { ...r, read: !r.read } : r
+    );
+    setRelays(newRelays);
+    saveRelays(newRelays);
+  };
+
+  const handleToggleWrite = (url: string) => {
+    const relay = relays.find(r => r.url === url);
+    if (!relay) return;
+
+    // Prevent disabling write if read is already disabled
+    if (!relay.read && relay.write) {
+      toast({
+        title: 'Cannot disable write',
+        description: 'At least one of read or write must be enabled for each relay.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    const newRelays = relays.map(r =>
+      r.url === url ? { ...r, write: !r.write } : r
+    );
+    setRelays(newRelays);
+    saveRelays(newRelays);
+  };
+
+  const saveRelays = (newRelays: Relay[]) => {
+    const now = Math.floor(Date.now() / 1000);
+
+    // Update local config
+    updateConfig((current) => ({
+      ...current,
+      relayMetadata: {
+        relays: newRelays,
+        updatedAt: now,
+      },
+    }));
+
+    // Publish to Nostr if user is logged in
+    if (user) {
+      publishNIP65RelayList(newRelays);
+    }
+  };
+
+  const publishNIP65RelayList = (relayList: Relay[]) => {
+    const tags = relayList.map(relay => {
+      if (relay.read && relay.write) {
+        return ['r', relay.url];
+      } else if (relay.read) {
+        return ['r', relay.url, 'read'];
+      } else if (relay.write) {
+        return ['r', relay.url, 'write'];
+      }
+      // If neither read nor write, don't include (shouldn't happen)
+      return null;
+    }).filter((tag): tag is string[] => tag !== null);
+
+    publishEvent(
+      {
+        kind: 10002,
+        content: '',
+        tags,
+      },
+      {
+        onSuccess: () => {
+          toast({
+            title: 'Relay list published',
+            description: 'Your relay list has been published to Nostr.',
+          });
+        },
+        onError: (error) => {
+          console.error('Failed to publish relay list:', error);
+          toast({
+            title: 'Failed to publish relay list',
+            description: 'There was an error publishing your relay list to Nostr.',
+            variant: 'destructive',
+          });
+        },
+      }
+    );
+  };
+
+  const renderRelayUrl = (url: string): string => {
+    try {
+      const parsed = new URL(url);
+      if (parsed.protocol === 'wss:') {
+        if (parsed.pathname === '/') {
+          return parsed.host;
+        } else {
+          return parsed.host + parsed.pathname;
+        }
+      } else {
+        return parsed.href;
+      }
+    } catch {
+      return url;
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Relay List */}
+      <div className="space-y-2">
+        {relays.map((relay) => (
+          <div
+            key={relay.url}
+            className="flex items-center gap-3 p-3 rounded-md border bg-muted/20"
+          >
+            <Wifi className="h-4 w-4 text-muted-foreground shrink-0" />
+            <div className="flex-1 min-w-0">
+              <div className="font-mono text-sm truncate" title={relay.url}>
+                {renderRelayUrl(relay.url)}
+              </div>
+              {/* Read/Write status badges */}
+              <div className="flex gap-1.5 mt-1">
+                <span className={cn(
+                  "text-[10px] px-1.5 py-0.5 rounded font-medium",
+                  relay.read 
+                    ? "bg-green-500/20 text-green-400 border border-green-500/30" 
+                    : "bg-gray-500/20 text-gray-500 border border-gray-500/30"
+                )}>
+                  Read {relay.read ? '✓' : '✗'}
+                </span>
+                <span className={cn(
+                  "text-[10px] px-1.5 py-0.5 rounded font-medium",
+                  relay.write 
+                    ? "bg-blue-500/20 text-blue-400 border border-blue-500/30" 
+                    : "bg-gray-500/20 text-gray-500 border border-gray-500/30"
+                )}>
+                  Write {relay.write ? '✓' : '✗'}
+                </span>
+              </div>
+            </div>
+
+            {/* Settings Button */}
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-7 px-2 gap-1.5 shrink-0 text-xs"
+                >
+                  <Settings className="h-3 w-3" />
+                  Settings
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-56" align="end">
+                <div className="space-y-4">
+                  <div className="space-y-3">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-1.5">
+                        <Label htmlFor={`read-${relay.url}`} className="text-sm cursor-pointer">
+                          Read
+                        </Label>
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <HelpCircle className="h-3 w-3 text-muted-foreground" />
+                            </TooltipTrigger>
+                            <TooltipContent className="max-w-xs">
+                              <p className="text-xs">Fetch content from this relay</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      </div>
+                      <Switch
+                        id={`read-${relay.url}`}
+                        checked={relay.read}
+                        onCheckedChange={() => handleToggleRead(relay.url)}
+                        className="data-[state=checked]:bg-green-500 scale-75"
+                      />
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-1.5">
+                        <Label htmlFor={`write-${relay.url}`} className="text-sm cursor-pointer">
+                          Write
+                        </Label>
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <HelpCircle className="h-3 w-3 text-muted-foreground" />
+                            </TooltipTrigger>
+                            <TooltipContent className="max-w-xs">
+                              <p className="text-xs">Publish your posts to this relay</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      </div>
+                      <Switch
+                        id={`write-${relay.url}`}
+                        checked={relay.write}
+                        onCheckedChange={() => handleToggleWrite(relay.url)}
+                        className="data-[state=checked]:bg-blue-500 scale-75"
+                      />
+                    </div>
+                  </div>
+                  <p className="text-[10px] text-muted-foreground border-t pt-2">
+                    At least one option must be enabled
+                  </p>
+                </div>
+              </PopoverContent>
+            </Popover>
+
+            {/* Remove Button */}
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => handleRemoveRelay(relay.url)}
+              className="size-5 text-muted-foreground hover:text-destructive hover:bg-transparent shrink-0"
+              disabled={relays.length <= 1}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+        ))}
+      </div>
+
+      {/* Add Relay Form */}
+      <div className="flex gap-2">
+        <div className="flex-1">
+          <Label htmlFor="new-relay-url" className="sr-only">
+            Relay URL
+          </Label>
+          <Input
+            id="new-relay-url"
+            placeholder="Enter relay URL (e.g., wss://relay.example.com)"
+            value={newRelayUrl}
+            onChange={(e) => setNewRelayUrl(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleAddRelay();
+              }
+            }}
+          />
+        </div>
+        <Button
+          onClick={handleAddRelay}
+          disabled={!newRelayUrl.trim()}
+          variant="outline"
+          size="sm"
+          className="h-10 shrink-0"
+        >
+          <Plus className="h-4 w-4 mr-2" />
+          Add Relay
+        </Button>
+      </div>
+
+      {!user && (
+        <p className="text-xs text-muted-foreground">
+          Log in to sync your relay list with Nostr
+        </p>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/src/components/ReportDialog.tsx b/src/src/components/ReportDialog.tsx
new file mode 100644
index 0000000..b7c71e1
--- /dev/null
+++ b/src/src/components/ReportDialog.tsx
@@ -0,0 +1,314 @@
+import { useState } from 'react';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useToast } from '@/hooks/useToast';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Loader2, Flag, AlertTriangle, CheckCircle2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+// NIP-56 Report types with skate-specific labels
+const REPORT_REASONS = [
+  {
+    id: 'spam',
+    label: 'Fake/Non-existent spot',
+    description: 'This spot does not exist or location is wrong',
+    icon: '📍',
+  },
+  {
+    id: 'other',
+    label: 'Stolen/Fake photos',
+    description: 'Photos are stock images or stolen from elsewhere',
+    icon: '📸',
+  },
+  {
+    id: 'spam',
+    label: 'Spam or advertising',
+    description: 'Promotional content or duplicate listings',
+    icon: '🗑️',
+    subtype: 'spam-ad',
+  },
+  {
+    id: 'illegal',
+    label: 'Dangerous location',
+    description: 'Private property, unsafe, or illegal to access',
+    icon: '⚠️',
+  },
+  {
+    id: 'nudity',
+    label: 'Inappropriate content',
+    description: 'Contains offensive or adult content',
+    icon: '🔞',
+  },
+  {
+    id: 'impersonation',
+    label: 'Impersonation',
+    description: 'Someone pretending to be someone else',
+    icon: '👤',
+  },
+  {
+    id: 'other',
+    label: 'Other',
+    description: 'Something else not listed above',
+    icon: '📝',
+    subtype: 'other-general',
+  },
+] as const;
+
+interface ReportDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  // What we're reporting
+  targetType: 'spot' | 'event' | 'tour' | 'shop' | 'user' | 'listing' | 'coach' | 'filmer';
+  targetPubkey: string;
+  targetEventId?: string;
+  targetTitle?: string;
+  // Callback after report
+  onReported?: () => void;
+}
+
+export function ReportDialog({
+  open,
+  onOpenChange,
+  targetType,
+  targetPubkey,
+  targetEventId,
+  targetTitle,
+  onReported,
+}: ReportDialogProps) {
+  const { user } = useCurrentUser();
+  const { mutateAsync: publishEvent, isPending } = useNostrPublish();
+  const { toast } = useToast();
+
+  const [selectedReason, setSelectedReason] = useState<string>('');
+  const [additionalDetails, setAdditionalDetails] = useState('');
+  const [step, setStep] = useState<'form' | 'success'>('form');
+
+  const handleSubmit = async () => {
+    if (!user || !selectedReason) return;
+
+    const reason = REPORT_REASONS.find(
+      (r) => r.id === selectedReason || r.subtype === selectedReason
+    );
+    if (!reason) return;
+
+    try {
+      // Build NIP-56 report tags
+      const tags: string[][] = [];
+
+      // Always include the pubkey being reported
+      if (targetEventId) {
+        // Reporting an event (spot, tour, etc.)
+        tags.push(['e', targetEventId, reason.id]);
+        tags.push(['p', targetPubkey]);
+      } else {
+        // Reporting just a user/profile
+        tags.push(['p', targetPubkey, reason.id]);
+      }
+
+      // Build content with context
+      let content = '';
+      if (additionalDetails.trim()) {
+        content = additionalDetails.trim();
+      }
+      if (targetTitle) {
+        content = content
+          ? `${content}\n\nReported: ${targetTitle} (${targetType})`
+          : `Reported: ${targetTitle} (${targetType})`;
+      }
+
+      await publishEvent({
+        kind: 1984, // NIP-56 Report
+        content,
+        tags,
+      });
+
+      setStep('success');
+      onReported?.();
+
+      toast({
+        title: 'Report submitted',
+        description: 'Thank you for helping keep SkateSpots safe.',
+      });
+    } catch (error) {
+      toast({
+        title: 'Failed to submit report',
+        description: error instanceof Error ? error.message : 'Please try again',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleClose = () => {
+    onOpenChange(false);
+    // Reset form after animation
+    setTimeout(() => {
+      setSelectedReason('');
+      setAdditionalDetails('');
+      setStep('form');
+    }, 200);
+  };
+
+  const getReasonKey = (reason: typeof REPORT_REASONS[number]) => {
+    return reason.subtype || reason.id;
+  };
+
+  if (!user) {
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Flag className="h-5 w-5 text-red-500" />
+              Report Content
+            </DialogTitle>
+          </DialogHeader>
+          <div className="text-center py-6">
+            <AlertTriangle className="h-12 w-12 mx-auto mb-4 text-yellow-500" />
+            <p className="text-muted-foreground">
+              You need to be logged in to report content.
+            </p>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Flag className="h-5 w-5 text-red-500" />
+            Report Content
+          </DialogTitle>
+          {step === 'form' && (
+            <DialogDescription>
+              Help keep the community safe by reporting inappropriate content.
+            </DialogDescription>
+          )}
+        </DialogHeader>
+
+        {step === 'form' ? (
+          <div className="space-y-4">
+            {/* Target info */}
+            {targetTitle && (
+              <div className="p-3 rounded-lg bg-muted/50 border">
+                <p className="text-xs text-muted-foreground uppercase mb-1">
+                  Reporting {targetType}
+                </p>
+                <p className="font-medium text-sm truncate">{targetTitle}</p>
+              </div>
+            )}
+
+            {/* Reason selection */}
+            <div className="space-y-2">
+              <Label>Why are you reporting this?</Label>
+              <RadioGroup
+                value={selectedReason}
+                onValueChange={setSelectedReason}
+                className="space-y-2"
+              >
+                {REPORT_REASONS.map((reason) => {
+                  const key = getReasonKey(reason);
+                  return (
+                    <div
+                      key={key}
+                      className={cn(
+                        'flex items-start space-x-3 p-3 rounded-lg border transition-colors cursor-pointer',
+                        selectedReason === key
+                          ? 'border-red-500/50 bg-red-500/10'
+                          : 'border-border hover:bg-muted/50'
+                      )}
+                      onClick={() => setSelectedReason(key)}
+                    >
+                      <RadioGroupItem value={key} id={key} className="mt-0.5" />
+                      <div className="flex-1 min-w-0">
+                        <Label
+                          htmlFor={key}
+                          className="flex items-center gap-2 cursor-pointer font-medium"
+                        >
+                          <span>{reason.icon}</span>
+                          {reason.label}
+                        </Label>
+                        <p className="text-xs text-muted-foreground mt-0.5">
+                          {reason.description}
+                        </p>
+                      </div>
+                    </div>
+                  );
+                })}
+              </RadioGroup>
+            </div>
+
+            {/* Additional details */}
+            <div className="space-y-2">
+              <Label htmlFor="details">Additional details (optional)</Label>
+              <Textarea
+                id="details"
+                placeholder="Provide any additional context that might help..."
+                value={additionalDetails}
+                onChange={(e) => setAdditionalDetails(e.target.value)}
+                rows={3}
+                className="resize-none"
+              />
+            </div>
+
+            {/* Submit */}
+            <div className="flex gap-2 pt-2">
+              <Button
+                variant="outline"
+                onClick={handleClose}
+                className="flex-1"
+                disabled={isPending}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleSubmit}
+                disabled={!selectedReason || isPending}
+                className="flex-1 bg-red-500 hover:bg-red-600"
+              >
+                {isPending ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Submitting...
+                  </>
+                ) : (
+                  <>
+                    <Flag className="h-4 w-4 mr-2" />
+                    Submit Report
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        ) : (
+          /* Success state */
+          <div className="text-center py-6">
+            <div className="w-16 h-16 rounded-full bg-green-500/20 flex items-center justify-center mx-auto mb-4">
+              <CheckCircle2 className="h-8 w-8 text-green-500" />
+            </div>
+            <h3 className="font-bold text-lg mb-2">Report Submitted</h3>
+            <p className="text-muted-foreground text-sm mb-6">
+              Thanks for helping keep SkateSpots safe and accurate. Your report
+              will be reviewed by trusted community members.
+            </p>
+            <Button onClick={handleClose} className="w-full">
+              Done
+            </Button>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/src/components/SasquatchGuide.tsx b/src/src/components/SasquatchGuide.tsx
new file mode 100644
index 0000000..d4c1bc9
--- /dev/null
+++ b/src/src/components/SasquatchGuide.tsx
@@ -0,0 +1,451 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { X, Minimize2, HelpCircle, Send } from 'lucide-react';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { cn } from '@/lib/utils';
+
+export type SasquatchContext = 'home' | 'onboarding' | 'map' | 'lab';
+
+export interface GuideMessage {
+  id: string;
+  title: string;
+  message: string;
+  context?: SasquatchContext; // Context for FAQ responses
+  suggestedQuestions?: string[]; // Quick questions users can click
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+  enableChat?: boolean; // Allow Q&A on this message
+}
+
+interface SasquatchGuideProps {
+  message?: GuideMessage;
+  onDismiss?: () => void;
+}
+
+interface ChatMessage {
+  role: 'user' | 'sasquatch';
+  text: string;
+  timestamp: number;
+}
+
+// Context-specific FAQ responses
+type FAQResponses = Record<string, string>;
+
+// Home & Onboarding - Getting started, Nostr basics, Bitcoin basics
+const HOME_ONBOARDING_FAQ: FAQResponses = {
+  // Nostr basics - Full explanations
+  'what is nostr': "Nostr stands for 'Notes and Other Stuff Transmitted by Relays'. It's a simple, open protocol for decentralized social networks. Think Twitter, but no one can ban you, censor you, or control your data. You use cryptographic keys (like a password that can't be reset) instead of usernames. Your identity is portable across all Nostr apps - one account works everywhere! No company owns Nostr, it's just a protocol like email.",
+  
+  'how does nostr work': "Here's the technical overview: You get a public key (npub - your identity, shareable) and a private key (nsec - for signing, keep secret!). When you post, your content is cryptographically signed with your private key and sent to relays (simple servers). Apps like SkateSpots connect to these relays to fetch and display content. No blockchain, no mining, no tokens - just a simple, elegant protocol that puts YOU in control of your data and identity!",
+  
+  'what is relay': "Relays are lightweight servers that store and forward your Nostr events (posts, profiles, etc.). Think of them like post offices - you can send mail through any post office, and it still reaches its destination. You can use any relay, switch anytime, run your own, or use multiple simultaneously. This app connects to several relays for redundancy, so your content is always available even if one relay goes down. Relays are simple, cheap to run, and keep Nostr censorship-resistant!",
+  
+  // Bitcoin & Lightning - Basics for skaters
+  'what is bitcoin': "Bitcoin is digital money that no government or company controls. Created in 2009, it's peer-to-peer electronic cash - you can send it directly to anyone, anywhere, instantly. No banks needed! For skateboarding, it's perfect: permissionless (no one can stop you), censorship-resistant (can't be frozen), and global (works everywhere). Bitcoin is programmed to be scarce - only 21 million will ever exist - making it valuable like digital gold. Perfect for supporting skaters and content creators worldwide! 🪙",
+  
+  'what are zaps': "Zaps are instant Bitcoin Lightning tips sent over Nostr! When you see a sick spot, killer trick video, or helpful content, you can zap the creator - sending them Bitcoin in milliseconds. It goes directly to their wallet, no middlemen taking cuts. Zaps are tied to your Nostr identity, so creators can see who appreciated their work. It's like hitting 'like' but with real monetary value! ⚡ Think of it as buying someone a coffee, but digital and instant.",
+  
+  // Getting started - Step-by-step
+  'how to login': "Step-by-step login guide:\n\n1. **Browser Extension (Desktop)**: Install Alby, nos2x, or Flamingo extension. Click 'Log in' in top-right, then approve the connection request.\n\n2. **Mobile/New User**: Click 'Sign up' to generate new keys. Your browser will download your nsec (secret key) - SAVE IT SAFELY! This is your account - lose it and you lose everything.\n\n3. **Existing User**: Click 'Log in', then 'Paste nsec' if you already have Nostr keys.\n\nNew to Nostr? Choose 'Sign up' - it takes 30 seconds! 🎯",
+  
+  // Privacy & Security
+  'is it safe': "YES! Privacy and security breakdown:\n\n✅ **Cryptography**: Nostr uses military-grade elliptic curve cryptography (same as Bitcoin). Your private key proves you own your account.\n\n✅ **Data Control**: You own your data. Posts are signed by YOUR key and stored on relays you choose.\n\n✅ **Privacy**: No email required, no phone number, no personal info needed to sign up.\n\n⚠️ **Important**: NEVER share your nsec (private key) with anyone! Use browser extensions like Alby to keep it secure. If someone gets your nsec, they control your account forever.\n\nFor more info: https://nostr.how/en/guides/sweep-your-nsec",
+  
+  // Lightning & other
+  'what is lightning': "Lightning Network is Bitcoin's instant payment layer - like Bitcoin on steroids! Send or receive Bitcoin in milliseconds for tiny fees (fractions of a cent). Perfect for tips, small transactions, and everyday use. It works by creating payment channels between users, allowing thousands of transactions per second. For SkateSpots, Lightning enables instant zaps to reward creators! ⚡",
+  
+  'what is nwc': "NWC (Nostr Wallet Connect) is like USB-C for Bitcoin wallets! It's an open protocol that lets you connect your Lightning wallet to apps like SkateSpots. Instead of copying invoices or switching between apps, NWC lets you zap directly with one click. You connect once (paste a connection string from your wallet), and boom - instant zaps forever! Works with Alby, Minibits, Zeus, Coinos, and other modern wallets. It's secure (encrypted over Nostr), you control spending limits, and you can revoke access anytime. Think of it as signing into SkateSpots with your wallet! 🔌⚡",
+  
+  'nostr wallet connect': "NWC (Nostr Wallet Connect) is like USB-C for Bitcoin wallets! It's an open protocol that lets you connect your Lightning wallet to apps like SkateSpots. Instead of copying invoices or switching between apps, NWC lets you zap directly with one click. You connect once (paste a connection string from your wallet), and boom - instant zaps forever! Works with Alby, Minibits, Zeus, Coinos, and other modern wallets. It's secure (encrypted over Nostr), you control spending limits, and you can revoke access anytime. Think of it as signing into SkateSpots with your wallet! 🔌⚡",
+  
+  'how to zap': "First, connect a Lightning wallet (like Alby extension, or Minibits/Zeus/Coinos with NWC). Then click the ⚡ button on any content. Enter an amount in sats (1 sat ≈ $0.0004) and confirm. The sats go directly to the creator instantly! Common amounts: 21 sats (small tip), 210 sats (nice!), 2100 sats (generous!), 21000 sats (wow!).",
+  
+  'do i need bitcoin': "Nope! You can browse spots, view events, explore the map, and connect with the community - all 100% FREE without any Bitcoin. But if you want to zap creators or earn sats for contributing spots/events, you'll need a Lightning wallet. Think of Bitcoin as optional premium features, not a requirement!",
+  
+  'is this free': "100% free! No subscriptions, no ads, no corporate BS. Built by skaters, for skaters. You can earn Bitcoin by contributing quality spots and events (through community zaps), but the core app is completely free to use forever!",
+  
+  'what can i do': "Discover spots worldwide, connect with pros at The Lab (coaches & filmers), join events and sessions, connect with skaters, earn sats for quality contributions, zap creators you appreciate, check weather conditions before skating, and help build the decentralized skate community! Everything is free except optional zaps.",
+  
+  'who owns my data': "You do! Your posts are cryptographically signed with your keys and stored on relays. You can backup your keys, switch apps anytime, and no one can delete your content without your permission. Not even SkateSpots can censor you - that's the power of Nostr!",
+  
+  // Trust Scores & Relays
+  'what are trust scores': "Trust scores help identify reliable skaters and reduce spam! SkateSpots uses Relatr - a service that analyzes the entire Nostr network to compute global trust scores (0-100). It looks at factors like followers, activity, engagement, and zaps sent/received. Higher scores = more trusted accounts. This is auto-enabled for all users and helps protect the community from bots and spam. You can see trust scores on profiles and use them to verify coaches, shop owners, and other skaters. It's like reputation points for Nostr! 🛡️",
+  
+  'trust score': "Trust scores help identify reliable skaters and reduce spam! SkateSpots uses Relatr - a service that analyzes the entire Nostr network to compute global trust scores (0-100). It looks at factors like followers, activity, engagement, and zaps sent/received. Higher scores = more trusted accounts. This is auto-enabled for all users and helps protect the community from bots and spam. You can see trust scores on profiles and use them to verify coaches, shop owners, and other skaters. It's like reputation points for Nostr! 🛡️",
+  
+  'what is relatr': "Relatr is a trust scoring service powered by ContextVM that analyzes the entire Nostr network. It publishes global trust scores (NIP-85 events) to relays, helping apps like SkateSpots identify trustworthy users and filter spam. Think of it as a decentralized reputation system - instead of trusting one company's algorithm, Relatr computes scores from real network data (followers, engagement, zaps, activity). It's enabled by default in SkateSpots to protect the community! You can customize it in Settings → Advanced if you want. 🔍",
+  
+  'what is nip85': "NIP-85 is a Nostr protocol for 'Trusted Assertions' - a way for services to publish trust and reputation data about users. Relatr uses NIP-85 to publish trust scores (ranks 0-100) along with metadata like follower counts, post counts, and zap amounts. Other apps can read these scores from relays to help filter content and identify trustworthy accounts. It's like a decentralized credit score, but for social networks! SkateSpots reads NIP-85 events from Relatr to show trust scores on profiles. 📊",
+  
+  'how do relays work': "Relays store and forward your Nostr events! When you post, your content is sent to all your configured relays. When you browse, SkateSpots queries relays to fetch content. SkateSpots uses 2 default relays:\n\n1. 🛹 **goskatespots.nostr1.com** - Our primary skate relay (allowlisted for quality)\n2. 🛡️ **wotr.relatr.xyz** - Relatr's Web of Trust relay for trust scores + redundancy\n\nYou can manage relays in Settings → Relays. Want to run your own relay? Check out relay.tools! ⚡",
+  
+  'what relays does this use': "SkateSpots uses 2 default relays:\n\n1. 🛹 **goskatespots.nostr1.com** - Our primary skate relay (allowlisted for quality)\n2. 🛡️ **wotr.relatr.xyz** - Relatr's Web of Trust relay for trust scores + redundancy\n\nYour posts go to both, so even if one is down, your content stays available! The primary relay uses an allowlist to prevent spam - DM the relay owner for access. The backup ensures your content always gets published. Want to run your own relay? Check out relay.tools! 📡",
+  
+  'what is goskatespots relay': "goskatespots.nostr1.com is our primary skateboarding relay! It has custom policies for spots, events, coaches, filmers, and shops. It uses an **allowlist** for trust and spam management - your npub must be specifically approved to publish here. This keeps the quality high and spam low! If you're not on the allowlist yet, no worries - your content still publishes to the backup relay (wotr.relatr.xyz) so it's never lost. DM the relay owner to request access! 🛹",
+  
+  'why cant i publish': "If you're getting publish errors, it's usually because you're not on the goskatespots.nostr1.com allowlist yet. Good news: your content STILL gets published to the backup relay (wotr.relatr.xyz), so nothing is lost! Everyone can see your spots, events, and posts. To get allowlisted on the primary relay:\n\n1. Build trust - contribute quality spots, be active in the community\n2. DM the relay owner with your npub\n3. Wait for approval\n\nIn the meantime, keep posting - the backup has you covered! 📝",
+  
+  'allowlist relay': "The primary relay (goskatespots.nostr1.com) uses an allowlist to maintain quality and prevent spam. Only approved npubs can publish there. But don't worry - you have a backup relay (wotr.relatr.xyz) that accepts posts from everyone! Your content still publishes and everyone can see it. Think of the allowlist like a VIP club - it's exclusive, but you don't NEED it to participate. Request access by DMing the relay owner, or just keep using the backup! 🎫",
+  
+  'how to manage relays': "Go to Settings → Relays! You'll see your 2 default relays and can add/remove relays as needed. Each relay has read/write toggles:\n\n- **Write (publish)**: Your posts go to these relays\n- **Read (fetch)**: You fetch content from these relays\n\nFor best results, enable both read+write on all relays. Want to run your own relay? Check out relay.tools to easily spin up and manage your own Nostr relay! Pro tip: If you're having issues, try removing and re-adding problematic relays. ⚙️",
+  
+  // Cashu Wallet
+  'what is cashu': "Cashu is digital cash backed by Bitcoin Lightning! It's like holding Bitcoin tokens directly in your browser - no external wallet needed. You can send and receive instantly, it works offline at skate spots, and it's privacy-focused (mints don't track who you pay). Think of it as cash in your pocket, but digital! Cashu tokens are always redeemable for Lightning sats, so you're never stuck. Your wallet is built right into SkateSpots - go to Settings → Wallet to use it! Learn more: https://cashumints.space 🥜",
+  
+  'how does cashu work': "Cashu uses ecash technology - digital tokens backed by Bitcoin held at mints (servers). When you receive Lightning, a mint converts it to tokens stored in your browser. When you send Lightning, tokens are converted back. The cool part: mints can't see who pays who (privacy!), and you can use multiple mints for redundancy (like multiple relays!). Your tokens are secured by a 12-word backup phrase. It's like having a Bitcoin wallet built into SkateSpots - works offline, instant, and private! 💰",
+  
+  'cashu wallet backup': "Your Cashu wallet has a 12-word recovery phrase (seed) - just like your Nostr nsec! Go to Settings → Wallet → Cashu Wallet → View Recovery Phrase to see your words. Write them down on paper and store safely in a secure place. If you clear browser data or switch devices, you'll need these words to restore your balance. ⚠️ NEVER share your seed with anyone - it's like a password that can't be reset! Anyone with your seed controls your wallet. Keep it as secure as your Nostr keys! 🔐",
+  
+  'what are mints': "Mints are servers that issue Cashu tokens backed by Bitcoin Lightning. Think of them like banks, but open and interoperable - any wallet can use any mint! When you receive Lightning, a mint converts it to tokens. When you send Lightning, a mint converts tokens back. SkateSpots uses mint.minibits.cash by default, but you can add more in Settings → Wallet → Manage Mints. Using multiple mints is RECOMMENDED for redundancy (like multiple Nostr relays!). If one mint goes down, others keep working. Check https://cashumints.space to explore all available mints. 🏦",
+  
+  'how to use cashu wallet': "Go to Settings → Wallet and scroll to the Cashu Wallet section!\n\n**To receive:**\n1. Enter amount in sats\n2. Click 'Generate Invoice'\n3. Pay from any Lightning wallet\n4. Tokens appear in your balance!\n\n**To send:**\n1. Enter amount\n2. Click 'Create Token'\n3. Share the QR code or copy the token\n4. Recipient redeems it!\n\nYou can also pay Lightning invoices directly or receive Cashu tokens from other users. It's all built-in - no external app needed! 🛹⚡",
+  
+  'cashu vs lightning': "Both use Bitcoin Lightning, but differently:\n\n**Lightning Wallet (NWC):**\n• External app connected to SkateSpots\n• Requires setup\n• Always online\n• More established\n\n**Cashu Wallet (Built-in):**\n• Built into SkateSpots\n• No setup needed\n• Works offline\n• Privacy-focused\n\n**Best practice:** Use BOTH for redundancy! Cashu for quick payments at skate spots, Lightning/NWC for larger amounts and long-term storage. They work together - you can move sats between them anytime! 💪",
+  
+  'is cashu safe': "Yes! Cashu uses cryptography (same tech as Bitcoin) to secure your tokens. Your balance is stored locally in your browser, and you control the seed. Important notes:\n\n✅ Mints are trusted servers (like relays) that back your tokens with Bitcoin\n✅ Use multiple mints for redundancy\n✅ Always backup your seed phrase\n✅ Tokens are always redeemable for Lightning sats\n⚠️ If a mint shuts down, withdraw your sats to Lightning first\n\nThink of mints like banks - use reputable ones and spread your balance! Check https://cashumints.space for trusted mints. 💰",
+};
+
+// The Lab - Coaching, filming, and services
+const LAB_FAQ: FAQResponses = {
+  'what is the lab': "The Lab is where skaters level up! It's our marketplace for coaching and filming services. Find experienced skaters who can teach you tricks, or connect with filmers and photographers to capture your sessions. All profiles are on Nostr, so you know they're real skaters, not fake accounts. You can filter by skills (street, vert, transitions, etc.) and location. Want to earn sats teaching? You can offer your own services too!",
+  
+  'what is lab': "The Lab is where skaters level up! It's our marketplace for coaching and filming services. Find experienced skaters who can teach you tricks, or connect with filmers and photographers to capture your sessions. All profiles are on Nostr, so you know they're real skaters, not fake accounts. You can filter by skills (street, vert, transitions, etc.) and location. Want to earn sats teaching? You can offer your own services too!",
+  
+  'how to find coach': "Use the filters at the top! Select the 'Coaching' tab, then pick skills you want to learn (kickflips, grinds, bowl riding, etc.). Browse coaches in your area - each profile shows their experience, specialties, rates, and bio. Click any coach to see their full profile and contact them directly through Nostr. Pro tip: Look for coaches with NIP-05 verification (the green checkmark) - they're verified skaters!",
+  
+  'how to find filmer': "Switch to the 'Filming' tab at the top! You'll find photographers and videographers who specialize in skate content. Filter by service type (photos, video editing, full sessions, etc.) and search by location. Check their portfolios, rates, and experience, then reach out directly. Many filmers accept Bitcoin payments too! 📹",
+  
+  'how to offer coaching': "Click 'Offer Coaching' at the top! Fill out your profile: years of experience, what you can teach (street, vert, technical tricks, etc.), your location, and rates. Add photos and a detailed bio so skaters know who they're learning from. Your profile lives on Nostr, so you own it forever. Start earning sats while helping skaters progress!",
+  
+  'how to become coach': "Click 'Offer Coaching' at the top! Fill out your profile: years of experience, what you can teach (street, vert, technical tricks, etc.), your location, and rates. Add photos and a detailed bio so skaters know who they're learning from. Your profile lives on Nostr, so you own it forever. Start earning sats while helping skaters progress!",
+  
+  'how to offer filming': "Click 'Offer Filming' at the top! Detail what services you provide (filming sessions, photo shoots, video editing, slow-mo, etc.), your gear setup, experience, and pricing. Upload sample work to show your style. Once published, skaters can find you and book sessions. All payment terms are between you and the client - total freedom!",
+  
+  'what are skills': "Skills are what coaches can teach! Options include: 🛹 Street (ledges, rails, stairs, gaps), 🏗️ Vert (half pipes, ramps), 🌊 Transitions (quarter pipes, mini ramps), 🎪 Bowls (pool riding), 💪 Technical (flip tricks, manuals), and more. Filter by what you want to learn, and we'll match you with coaches who specialize in it!",
+  
+  'how much does coaching cost': "Rates vary by coach! Each profile shows their pricing - some charge hourly, others offer package deals. You'll see rates like '$50/hour' or 'Negotiable'. Many coaches also accept Bitcoin Lightning payments. Contact coaches directly to discuss rates and book sessions. Pro tip: Some coaches offer discounts for multiple sessions!",
+  
+  'can i message coaches': "Yes! Click any coach profile and you'll see their contact info. Most coaches list their Nostr pubkey, so you can message them directly through any Nostr client. Some also include email, phone, or social media. All communication happens off-platform - we just connect you!",
+  
+  'nip05 verification': "The green checkmark means they have NIP-05 verification! This proves they control a domain (like theirname@skateshop.com). It's not required, but it adds credibility - you know they're a real person/business. Verified coaches and filmers are more trustworthy!",
+};
+
+// Map/Spots/Shops - Navigation, adding spots, finding shops, gear swap
+const MAP_FAQ: FAQResponses = {
+  'how to use map': "Easy! The map shows three types of markers: 🛹 Skate Spots (parks, street spots), 🏪 Skate Shops (where to buy gear), and 🛒 Gear Swap (peer-to-peer marketplace at spots). Toggle them on/off with the buttons above the map. Click any marker to see details, or switch to list view to filter by spot type (street, park, bowl, etc.). Click anywhere on the map to add a new spot!",
+  
+  'how to add a spot': "Click anywhere on the map to drop a pin at that location! Add photos of the spot, describe the features (rails, ledges, stairs, quarter pipes, etc.), tag the spot type (street, park, diy, etc.), and add access info. Hit publish and boom - it's on Nostr forever! Your contribution helps skaters worldwide find new places to shred. 🛹",
+  
+  'how to add spot': "Click anywhere on the map to drop a pin at that location! Add photos of the spot, describe the features (rails, ledges, stairs, quarter pipes, etc.), tag the spot type (street, park, diy, etc.), and add access info. Hit publish and boom - it's on Nostr forever! Your contribution helps skaters worldwide find new places to shred. 🛹",
+  
+  'what are spots': "Spots are skateable locations - anywhere you can ride! This includes skateparks (concrete bowls, ramps), street spots (stairs, handrails, ledges), DIY spots (built by skaters), transitions (quarter pipes, half pipes), and bowls. Each spot is geotagged on the map with photos, descriptions, and features. Think of it as Waze for skateboarding - skaters helping skaters find the best places to session! 🗺️",
+  
+  'what are shops': "Skate shops are local businesses where you can buy boards, trucks, wheels, shoes, and all your skate gear. They're tagged with 🏪 on the map. Supporting your local shop supports the skate community! Many shops are run by skaters, host events, and are the heart of local skate scenes. You can add shops to the map too - just make sure to verify ownership if you're claiming a shop profile!",
+  
+  'what is gear swap': "Gear Swap is a peer-to-peer marketplace where skaters can buy and sell used gear at specific spots! See something for sale? Meet at that spot for safe pickup. It's marked with 🛒 on the map. Important: Gear listings DON'T appear at shops (conflict of interest) - they only show at regular skate spots. List your old deck, wheels, or shoes and meet up at your local spot to sell them!",
+  
+  'how to sell gear': "Find a spot on the map and click it, then scroll to the Gear Swap section and hit 'List Gear'. Upload photos, set your price in dollars (or mark as free), describe the condition, and add when you're usually at that spot. Buyers will see your listing when they view that spot. Meet up safely at the spot for the transaction. Keep it skater-to-skater! 💰",
+  
+  'can i list gear at shop': "Nope! Gear Swap is peer-to-peer only and doesn't appear at shop locations to avoid conflicts of interest. Shops sell new gear - Gear Swap is for used gear between skaters. List your gear at regular skate spots (parks, street spots, DIY spots) instead. This keeps shops and the marketplace separate and fair for everyone! 🏪🚫",
+  
+  'how to find shop': "Toggle on the 🏪 Shops filter at the top of the map (or in list view). You'll see all registered skate shops with their locations, contact info, hours, and what they carry. Click any shop to see details or get directions. Support your local shop - they're the backbone of the skate community! Many accept Bitcoin payments too. ⚡",
+  
+  'how to find skate shop': "Toggle on the 🏪 Shops filter at the top of the map (or in list view). You'll see all registered skate shops with their locations, contact info, hours, and what they carry. Click any shop to see details or get directions. Support your local shop - they're the backbone of the skate community! Many accept Bitcoin payments too. ⚡",
+  
+  'how to add shop': "If you're a shop owner: Go to the map and look for 'Add Shop' option. Fill in your business details, upload photos, add your hours and contact info. For verification, set up a NIP-05 identifier on your domain - this proves you own the shop! If you're NOT the owner but want to add a shop to the map, you can still add it, but owners can later claim and verify their profiles.",
+  
+  'what are spot types': "Spots are tagged by their features: 🏞️ Street (stairs, rails, ledges, gaps), 🛝 Park (built skateparks with ramps), 🏗️ DIY (skater-built spots), 🌊 Bowl (concrete bowls and pools), 🎪 Vert (half pipes, mega ramps), 🛤️ Transition (quarter pipes, mini ramps), 🏛️ Plaza (open areas with multiple features), and more! Use these filters to find exactly what you want to skate.",
+  
+  'spot types': "Spots are tagged by their features: 🏞️ Street (stairs, rails, ledges, gaps), 🛝 Park (built skateparks with ramps), 🏗️ DIY (skater-built spots), 🌊 Bowl (concrete bowls and pools), 🎪 Vert (half pipes, mega ramps), 🛤️ Transition (quarter pipes, mini ramps), 🏛️ Plaza (open areas with multiple features), and more! Use these filters to find exactly what you want to skate.",
+  
+  'how to filter spots': "Use the filter buttons at the top! Toggle Spots 🛹, Shops 🏪, and Gear 🛒 on/off to show/hide each type. Below that, you'll see spot type filters like Street, Park, Bowl, DIY, etc. Click any to filter - click again to remove. Switch between Map and List view using the view toggle buttons. In list view, you can search by name or location too!",
+  
+  'weather on map': "Toggle the ☁️ Weather button to see real-time conditions at spots! You'll see temperature, rain probability, wind, and a 'skateability score'. Filter by 'Good' or 'Perfect' conditions to find spots that are dry and rideable right now. Weather doesn't show for shops (since you're shopping indoors). This feature helps you plan sessions and avoid skating in the rain! 🌤️",
+  
+  'map vs list view': "Map view shows spots visually on an interactive map - great for discovering spots near you or planning routes. List view shows all spots in a grid with photos and details - better for browsing and filtering by specific types. Toggle between them with the buttons at the top. Both views respect your filters!",
+};
+
+// Context-aware answer finder
+function findAnswer(question: string, context?: SasquatchContext): string {
+  const q = question.toLowerCase();
+  
+  // Choose FAQ based on context
+  let faq: FAQResponses;
+  switch (context) {
+    case 'lab':
+      faq = LAB_FAQ;
+      break;
+    case 'map':
+      faq = MAP_FAQ;
+      break;
+    case 'home':
+    case 'onboarding':
+    default:
+      faq = HOME_ONBOARDING_FAQ;
+      break;
+  }
+  
+  // Check context-specific FAQ first
+  for (const [key, answer] of Object.entries(faq)) {
+    if (q.includes(key)) {
+      return answer;
+    }
+  }
+  
+  // Fallback to checking all FAQs if not found in context
+  const allFAQs = { ...HOME_ONBOARDING_FAQ, ...LAB_FAQ, ...MAP_FAQ };
+  for (const [key, answer] of Object.entries(allFAQs)) {
+    if (q.includes(key)) {
+      return answer;
+    }
+  }
+  
+  return "Hmm, I'm not sure about that one! Try checking the FAQ page, or ask the community on Nostr. You can also browse the map to learn by exploring!";
+}
+
+export function SasquatchGuide({ message, onDismiss }: SasquatchGuideProps) {
+  const { user } = useCurrentUser();
+  const [isMinimized, setIsMinimized] = useLocalStorage('sasquatch-minimized', false);
+  const [isVisible, setIsVisible] = useState(false);
+  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
+  const [userInput, setUserInput] = useState('');
+  const [showChat, setShowChat] = useState(false);
+
+  useEffect(() => {
+    if (message) {
+      // Delay appearance for smooth animation when first loading
+      const timer = setTimeout(() => setIsVisible(true), 500);
+      return () => clearTimeout(timer);
+    } else {
+      setIsVisible(false);
+    }
+  }, [message]);
+
+  const handleDismiss = () => {
+    // Just minimize instead of fully dismissing
+    setIsMinimized(true);
+  };
+
+  const handleSendMessage = () => {
+    if (!userInput.trim()) return;
+
+    const userMsg: ChatMessage = {
+      role: 'user',
+      text: userInput,
+      timestamp: Date.now(),
+    };
+
+    const answer = findAnswer(userInput, message?.context);
+    const sasquatchMsg: ChatMessage = {
+      role: 'sasquatch',
+      text: answer,
+      timestamp: Date.now() + 500,
+    };
+
+    setChatMessages([...chatMessages, userMsg, sasquatchMsg]);
+    setUserInput('');
+  };
+
+  // Don't show if no message for this page
+  if (!message) return null;
+
+  return (
+    <>
+      {/* Minimized button */}
+      {isMinimized ? (
+        <div
+          className={cn(
+            'fixed bottom-20 md:bottom-4 left-4 z-40 transition-all duration-300',
+            'opacity-100 translate-y-0' // Always visible when minimized
+          )}
+        >
+          <Button
+            onClick={() => setIsMinimized(false)}
+            className="flex items-center gap-2 bg-gradient-to-r from-amber-700 to-amber-900 hover:from-amber-600 hover:to-amber-800 text-white shadow-lg h-12 px-4 border-2 border-amber-500/30"
+          >
+            <img
+              src="/images/sasquatch-guide.webp"
+              alt="The Sasquatch"
+              className="h-6 w-6 rounded-full"
+            />
+            <HelpCircle className="h-4 w-4" />
+          </Button>
+        </div>
+      ) : (
+        /* Full guide */
+        <div
+          className={cn(
+            'fixed bottom-20 md:bottom-4 left-4 right-4 md:right-auto z-40 transition-all duration-300',
+            isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'
+          )}
+        >
+          <div className="bg-gradient-to-br from-amber-50 to-orange-50 border-2 border-amber-500/50 rounded-lg shadow-2xl max-w-sm mx-auto md:mx-0">
+            {/* Header with Sasquatch */}
+            <div className="flex items-start gap-3 p-4 pb-3 border-b border-amber-200">
+              <div className="relative">
+                <img
+                  src="/images/sasquatch-guide.webp"
+                  alt="The Sasquatch"
+                  className="h-12 w-12 rounded-full border-2 border-amber-400 shadow-md"
+                />
+                <span className="absolute -bottom-1 -right-1 flex h-4 w-4">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+                  <span className="relative inline-flex rounded-full h-4 w-4 bg-green-500 border-2 border-white" />
+                </span>
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="font-bold text-sm text-amber-900 flex items-center gap-2">
+                  {message.title}
+                  <span className="text-xs px-1.5 py-0.5 bg-amber-200 text-amber-800 rounded-full">
+                    🛹
+                  </span>
+                </div>
+                <div className="text-xs text-amber-700">The Sasquatch</div>
+              </div>
+              <div className="flex gap-1">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6 text-amber-600 hover:text-amber-800 hover:bg-amber-100"
+                  onClick={() => setIsMinimized(true)}
+                >
+                  <Minimize2 className="h-3 w-3" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6 text-amber-600 hover:text-red-600 hover:bg-red-50"
+                  onClick={handleDismiss}
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              </div>
+            </div>
+
+            {/* Message */}
+            <div className="p-4">
+              <p className="text-sm text-gray-800 leading-relaxed">
+                {message.message}
+              </p>
+
+              {/* Action button */}
+              {message.action && (
+                <Button
+                  onClick={message.action.onClick}
+                  size="sm"
+                  className="mt-3 w-full bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700 text-white font-bold"
+                >
+                  {message.action.label}
+                </Button>
+              )}
+
+              {/* Chat feature */}
+              {message.enableChat && (
+                <div className="mt-4 pt-4 border-t border-amber-200">
+                  {!showChat ? (
+                    <Button
+                      onClick={() => setShowChat(true)}
+                      size="sm"
+                      variant="outline"
+                      className="w-full border-amber-400 text-amber-800 hover:bg-amber-100"
+                    >
+                      <HelpCircle className="h-3 w-3 mr-2" />
+                      {message.context === 'lab' && 'Ask about Coaching & Filming'}
+                      {message.context === 'map' && 'Ask about Spots, Shops & Gear'}
+                      {(message.context === 'home' || message.context === 'onboarding') && 'Ask me about Nostr, Bitcoin & Zaps'}
+                    </Button>
+                  ) : (
+                    <div className="space-y-3">
+                      {/* Default questions */}
+                      {chatMessages.length === 0 && message.suggestedQuestions && (
+                        <div className="space-y-1.5">
+                          <div className="text-[10px] text-amber-700 font-semibold mb-2">Quick Questions:</div>
+                          {message.suggestedQuestions.map((q) => (
+                            <Button
+                              key={q}
+                              onClick={() => {
+                                setUserInput(q);
+                                setTimeout(() => handleSendMessage(), 100);
+                              }}
+                              size="sm"
+                              variant="ghost"
+                              className="w-full justify-start text-xs text-amber-800 hover:bg-amber-100 h-auto py-1.5"
+                            >
+                              {q}
+                            </Button>
+                          ))}
+                        </div>
+                      )}
+
+                      {/* Chat messages */}
+                      {chatMessages.length > 0 && (
+                        <ScrollArea className="h-48 rounded border border-amber-200 bg-white p-2">
+                          <div className="space-y-2">
+                            {chatMessages.map((msg, idx) => (
+                              <div
+                                key={idx}
+                                className={cn(
+                                  'text-xs p-2 rounded leading-relaxed',
+                                  msg.role === 'user'
+                                    ? 'bg-blue-100 text-blue-900 ml-6'
+                                    : 'bg-amber-100 text-amber-900 mr-6'
+                                )}
+                              >
+                                <div className="font-bold text-[10px] mb-1 opacity-70">
+                                  {msg.role === 'user' ? '🧑 You' : '🦧 Sasquatch'}
+                                </div>
+                                {msg.text}
+                              </div>
+                            ))}
+                          </div>
+                        </ScrollArea>
+                      )}
+
+                      {/* Input */}
+                      <div className="flex gap-2">
+                        <Input
+                          value={userInput}
+                          onChange={(e) => setUserInput(e.target.value)}
+                          onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()}
+                          placeholder="Type your question..."
+                          className="text-sm border-amber-300 focus-visible:ring-amber-400"
+                        />
+                        <Button
+                          onClick={handleSendMessage}
+                          size="sm"
+                          disabled={!userInput.trim()}
+                          className="bg-amber-600 hover:bg-amber-700"
+                        >
+                          <Send className="h-3 w-3" />
+                        </Button>
+                      </div>
+
+                      {chatMessages.length > 0 && (
+                        <Button
+                          onClick={() => {
+                            setChatMessages([]);
+                            setShowChat(false);
+                          }}
+                          size="sm"
+                          variant="ghost"
+                          className="w-full text-xs text-amber-600 hover:text-amber-800"
+                        >
+                          Start over
+                        </Button>
+                      )}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/src/components/ScrollToTop.tsx b/src/src/components/ScrollToTop.tsx
new file mode 100644
index 0000000..5e38302
--- /dev/null
+++ b/src/src/components/ScrollToTop.tsx
@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}
\ No newline at end of file
diff --git a/src/src/components/SecuritySettings.tsx b/src/src/components/SecuritySettings.tsx
new file mode 100644
index 0000000..59c46a5
--- /dev/null
+++ b/src/src/components/SecuritySettings.tsx
@@ -0,0 +1,330 @@
+import { useState } from 'react';
+import { Download, Copy, Eye, EyeOff, Shield, AlertTriangle, CheckCircle, ExternalLink } from 'lucide-react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+import { toast } from '@/hooks/useToast';
+import QRCode from 'qrcode';
+
+export function SecuritySettings() {
+  const { user } = useCurrentUser();
+  const [confirmed, setConfirmed] = useLocalStorage('backup-confirmed', false);
+  const [showWarning, setShowWarning] = useState(!confirmed);
+
+  if (!user) {
+    return (
+      <Card className="border-dashed">
+        <CardContent className="py-12 text-center">
+          <Shield className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+          <h3 className="text-lg font-medium mb-2">Login Required</h3>
+          <p className="text-muted-foreground">
+            Log in to access security settings.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const handleConfirmBackup = () => {
+    setConfirmed(true);
+    setShowWarning(false);
+    toast({
+      title: 'Backup Confirmed! ✅',
+      description: 'Great! Your keys are safe.',
+    });
+  };
+
+  const handleGenerateQR = async () => {
+    try {
+      // Note: In a real implementation, you'd need access to the user's nsec/mnemonic
+      // This is a placeholder showing where QR generation would happen
+      toast({
+        title: 'QR Code Generation',
+        description: 'This feature requires accessing your stored keys. Please use the backup methods provided during signup.',
+        variant: 'destructive',
+      });
+    } catch {
+      toast({
+        title: 'QR Code Failed',
+        description: 'Could not generate QR code.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Backup Warning */}
+      {showWarning && (
+        <Alert className="bg-gradient-to-r from-amber-500/10 to-red-500/10 border-2 border-amber-500/50">
+          <AlertTriangle className="h-5 w-5 text-amber-500" />
+          <AlertDescription>
+            <div className="space-y-3">
+              <p className="font-bold text-amber-400">
+                ⚠️ Have you backed up your recovery phrase or secret key?
+              </p>
+              <p className="text-sm text-gray-300">
+                Your keys are the ONLY way to access your account. If you lose them, you lose everything - 
+                there's no password reset!
+              </p>
+              <Button
+                onClick={handleConfirmBackup}
+                size="sm"
+                className="bg-amber-500 hover:bg-amber-600 text-black font-bold"
+              >
+                <CheckCircle className="h-4 w-4 mr-2" />
+                I've Backed Up My Keys
+              </Button>
+            </div>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Backup Status */}
+      <Card className={confirmed ? "bg-green-950/20 border-2 border-green-500/30" : "bg-red-950/20 border-2 border-red-500/30"}>
+        <CardHeader>
+          <CardTitle className={confirmed ? "text-green-400" : "text-red-400"}>
+            {confirmed ? '✅ Backup Confirmed' : '⚠️ Backup Not Confirmed'}
+          </CardTitle>
+          <CardDescription>
+            {confirmed 
+              ? 'You\'ve confirmed that your keys are safely backed up.'
+              : 'Make sure to backup your recovery phrase or secret key!'}
+          </CardDescription>
+        </CardHeader>
+        {!confirmed && (
+          <CardContent>
+            <p className="text-sm text-gray-400 mb-4">
+              Did you save your recovery phrase or secret key during signup? 
+              If not, you'll need to create a new account as we cannot recover lost keys.
+            </p>
+            <Button
+              onClick={handleConfirmBackup}
+              variant="outline"
+              className="border-green-500/50 text-green-400 hover:bg-green-500/20"
+            >
+              Yes, I've Backed Up My Keys
+            </Button>
+          </CardContent>
+        )}
+      </Card>
+
+      {/* Security Information */}
+      <Card className="bg-black/90 border-2 border-[#ccff00]/30">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-[#ccff00]">
+            <Shield className="h-5 w-5" />
+            Key Security Best Practices
+          </CardTitle>
+          <CardDescription>
+            How to keep your Nostr account safe
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-3 text-sm">
+            <div className="flex items-start gap-3">
+              <div className="text-2xl">✍️</div>
+              <div>
+                <p className="font-bold text-white">Write it down on paper</p>
+                <p className="text-gray-400">Physical backup is the safest. Store in a secure location like a safe.</p>
+              </div>
+            </div>
+            
+            <div className="flex items-start gap-3">
+              <div className="text-2xl">💾</div>
+              <div>
+                <p className="font-bold text-white">Multiple backups</p>
+                <p className="text-gray-400">Keep copies in different secure locations (home safe, bank deposit box, etc.)</p>
+              </div>
+            </div>
+            
+            <div className="flex items-start gap-3">
+              <div className="text-2xl">🔒</div>
+              <div>
+                <p className="font-bold text-white">Never share your keys</p>
+                <p className="text-gray-400">Real Nostr apps NEVER ask for your nsec or recovery phrase after initial login</p>
+              </div>
+            </div>
+            
+            <div className="flex items-start gap-3">
+              <div className="text-2xl">🚫</div>
+              <div>
+                <p className="font-bold text-white">Don't store in cloud unencrypted</p>
+                <p className="text-gray-400">Avoid Google Docs, email drafts, or plain text cloud storage</p>
+              </div>
+            </div>
+            
+            <div className="flex items-start gap-3">
+              <div className="text-2xl">🔐</div>
+              <div>
+                <p className="font-bold text-white">Consider using a browser extension</p>
+                <p className="text-gray-400">Alby, nos2x, or Flamingo keep your keys secure and never expose them to websites</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="pt-4 border-t border-[#ccff00]/20">
+            <h4 className="font-bold text-[#ff0040] mb-2 uppercase text-sm">
+              ⚠️ Important Reminders
+            </h4>
+            <ul className="text-xs text-gray-400 space-y-1">
+              <li>• If you lose your keys, you lose your account permanently</li>
+              <li>• No company or person can reset your password - not even us</li>
+              <li>• Anyone with your keys has full control of your account</li>
+              <li>• Your keys control all your Nostr data across ALL apps</li>
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Browser Extension & Mobile App Recommendations */}
+      <Card className="bg-black/90 border-2 border-purple-500/30">
+        <CardHeader>
+          <CardTitle className="text-purple-400">🔌 Recommended Nostr Signers</CardTitle>
+          <CardDescription>
+            Use a Nostr signer for better security and convenience
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {/* Amber - Android */}
+            <a 
+              href="https://github.com/greenart7c3/Amber" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="block p-4 rounded-lg bg-gradient-to-r from-[#ccff00]/10 to-green-500/10 border border-[#ccff00]/30 hover:border-[#ccff00]/60 transition-all"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex-1">
+                  <div className="font-bold text-white flex items-center gap-2">
+                    Amber
+                    <span className="text-xs px-2 py-0.5 bg-[#ccff00]/20 text-[#ccff00] rounded-full">Android</span>
+                  </div>
+                  <p className="text-xs text-gray-400 mt-1">
+                    Secure Nostr signer for Android. Keeps your keys safe on your phone and signs events without exposing them.
+                  </p>
+                </div>
+                <ExternalLink className="h-4 w-4 text-gray-500" />
+              </div>
+            </a>
+            <a 
+              href="https://getalby.com" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="block p-4 rounded-lg bg-gradient-to-r from-amber-500/10 to-yellow-500/10 border border-amber-500/30 hover:border-amber-500/60 transition-all"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex-1">
+                  <div className="font-bold text-white flex items-center gap-2">
+                    Alby
+                    <span className="text-xs px-2 py-0.5 bg-green-500/20 text-green-400 rounded-full">Recommended</span>
+                  </div>
+                  <p className="text-xs text-gray-400 mt-1">
+                    Full-featured extension with Lightning wallet, WebLN, and NWC support.
+                  </p>
+                </div>
+                <ExternalLink className="h-4 w-4 text-gray-500" />
+              </div>
+            </a>
+
+            <a 
+              href="https://www.getflamingo.org/" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="block p-4 rounded-lg bg-black/50 border border-purple-500/30 hover:border-purple-500/60 transition-all"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex-1">
+                  <div className="font-bold text-white">Flamingo</div>
+                  <p className="text-xs text-gray-400 mt-1">
+                    Simple, clean interface. Focuses on Nostr signing without wallet features.
+                  </p>
+                </div>
+                <ExternalLink className="h-4 w-4 text-gray-500" />
+              </div>
+            </a>
+
+            <a 
+              href="https://github.com/fiatjaf/nos2x" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="block p-4 rounded-lg bg-black/50 border border-purple-500/30 hover:border-purple-500/60 transition-all"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex-1">
+                  <div className="font-bold text-white">nos2x</div>
+                  <p className="text-xs text-gray-400 mt-1">
+                    Minimal, lightweight extension for advanced users.
+                  </p>
+                </div>
+                <ExternalLink className="h-4 w-4 text-gray-500" />
+              </div>
+            </a>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Nostr Connect (Bunkers) */}
+      <Card className="bg-black/90 border-2 border-blue-500/30">
+        <CardHeader>
+          <CardTitle className="text-blue-400">☁️ Nostr Connect (Remote Signers)</CardTitle>
+          <CardDescription>
+            Use a remote signer to access your account from any device
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-gray-400 mb-4">
+            Nostr Connect (also called "bunkers") lets you store your keys on a secure server and sign in from any device. 
+            Your keys never leave the server, but you can use your account anywhere!
+          </p>
+
+          <div className="space-y-3">
+            <a 
+              href="https://nsec.app" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="block p-4 rounded-lg bg-gradient-to-r from-blue-500/10 to-cyan-500/10 border border-blue-500/30 hover:border-blue-500/60 transition-all"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex-1">
+                  <div className="font-bold text-white flex items-center gap-2">
+                    nsec.app
+                    <span className="text-xs px-2 py-0.5 bg-blue-500/20 text-blue-400 rounded-full">Popular</span>
+                  </div>
+                  <p className="text-xs text-gray-400 mt-1">
+                    Free, secure remote signer. Create bunker:// URI and paste when logging in.
+                  </p>
+                </div>
+                <ExternalLink className="h-4 w-4 text-gray-500" />
+              </div>
+            </a>
+
+            <a 
+              href="https://nostrum.social" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="block p-4 rounded-lg bg-black/50 border border-blue-500/30 hover:border-blue-500/60 transition-all"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex-1">
+                  <div className="font-bold text-white">Nostrum</div>
+                  <p className="text-xs text-gray-400 mt-1">
+                    Another remote signer option with mobile support.
+                  </p>
+                </div>
+                <ExternalLink className="h-4 w-4 text-gray-500" />
+              </div>
+            </a>
+          </div>
+
+          <div className="mt-4 p-3 rounded-lg bg-blue-950/30 border border-blue-500/30 text-sm text-gray-300">
+            <p><strong className="text-blue-400">💡 How to use:</strong> Create an account on one of these services, 
+            get your bunker:// connection string, then paste it in the "Nostr Connect" tab when logging in.</p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/src/components/SetStatusDialog.tsx b/src/src/components/SetStatusDialog.tsx
new file mode 100644
index 0000000..05e5f73
--- /dev/null
+++ b/src/src/components/SetStatusDialog.tsx
@@ -0,0 +1,360 @@
+import { useState, useMemo } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Slider } from '@/components/ui/slider';
+import { Card, CardContent } from '@/components/ui/card';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { useToast } from '@/hooks/useToast';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useSkateSpots } from '@/hooks/useSkateSpots';
+import { useUserStatus, useSetUserStatus, useClearUserStatus, SKATING_STATUSES, type SkatingStatusId } from '@/hooks/useUserStatus';
+import type { SkateSpot } from '@/lib/types';
+import { cn } from '@/lib/utils';
+import { Loader2, MapPin, Clock, X, Zap, Search } from 'lucide-react';
+
+interface SetStatusDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  preselectedSpot?: SkateSpot;
+}
+
+export function SetStatusDialog({
+  open,
+  onOpenChange,
+  preselectedSpot,
+}: SetStatusDialogProps) {
+  const { user } = useCurrentUser();
+  const { toast } = useToast();
+  const { data: currentStatus } = useUserStatus(user?.pubkey);
+  const setStatus = useSetUserStatus();
+  const clearStatus = useClearUserStatus();
+
+  const [selectedStatusId, setSelectedStatusId] = useState<SkatingStatusId | null>(null);
+  const [customStatus, setCustomStatus] = useState('');
+  const [linkedSpot, setLinkedSpot] = useState<{ pubkey: string; identifier: string; title?: string } | null>(
+    preselectedSpot ? { pubkey: preselectedSpot.pubkey, identifier: preselectedSpot.identifier, title: preselectedSpot.title } : null
+  );
+  const [expirationMinutes, setExpirationMinutes] = useState(60); // Default 1 hour
+  const [showSpotPicker, setShowSpotPicker] = useState(false);
+  const [spotSearchQuery, setSpotSearchQuery] = useState('');
+
+  // Get spots for picker
+  const { data: allSpots } = useSkateSpots(100);
+  const filteredSpots = useMemo(() => {
+    if (!allSpots) return [];
+    if (!spotSearchQuery) return allSpots.slice(0, 10);
+    const query = spotSearchQuery.toLowerCase();
+    return allSpots
+      .filter(s => 
+        s.title.toLowerCase().includes(query) ||
+        s.location?.toLowerCase().includes(query)
+      )
+      .slice(0, 10);
+  }, [allSpots, spotSearchQuery]);
+
+  const handleSetStatus = async () => {
+    try {
+      await setStatus.mutateAsync({
+        statusId: selectedStatusId || undefined,
+        customStatus: !selectedStatusId ? customStatus : undefined,
+        linkedSpot: linkedSpot || undefined,
+        expirationMinutes,
+      });
+
+      toast({
+        title: 'Status updated!',
+        description: 'Your skating status is now visible to others.',
+      });
+      onOpenChange(false);
+      // Reset form
+      setSelectedStatusId(null);
+      setCustomStatus('');
+      if (!preselectedSpot) setLinkedSpot(null);
+    } catch (error) {
+      toast({
+        title: 'Failed to set status',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleClearStatus = async () => {
+    try {
+      await clearStatus.mutateAsync();
+      toast({
+        title: 'Status cleared',
+        description: 'Your status has been removed.',
+      });
+      onOpenChange(false);
+    } catch (error) {
+      toast({
+        title: 'Failed to clear status',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleSpotSelected = (spot: SkateSpot) => {
+    setLinkedSpot({ pubkey: spot.pubkey, identifier: spot.identifier, title: spot.title });
+    setShowSpotPicker(false);
+    setSpotSearchQuery('');
+  };
+
+  const formatExpiration = (minutes: number) => {
+    if (minutes < 60) return `${minutes} min`;
+    if (minutes === 60) return '1 hour';
+    if (minutes < 1440) return `${Math.round(minutes / 60)} hours`;
+    return `${Math.round(minutes / 1440)} day${minutes >= 2880 ? 's' : ''}`;
+  };
+
+  if (!user) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px] bg-black border-[#ccff00]/50">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-white">
+            <Zap className="h-5 w-5 text-[#ccff00]" />
+            Set Your Status
+          </DialogTitle>
+          <DialogDescription>
+            Let others know what you're up to. Your status will be visible on your profile and at linked spots.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6 py-4">
+          {/* Current Status */}
+          {currentStatus && (
+            <Card className="bg-green-500/10 border-green-500/30">
+              <CardContent className="p-3">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span className="relative flex">
+                      <span className="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-green-400 opacity-75" />
+                      <span className="relative inline-flex h-2 w-2 rounded-full bg-green-500" />
+                    </span>
+                    <span className="text-green-400 font-medium text-sm">
+                      {currentStatus.emoji} {currentStatus.status}
+                    </span>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleClearStatus}
+                    disabled={clearStatus.isPending}
+                    className="h-7 px-2 text-xs text-red-400 hover:text-red-300 hover:bg-red-500/10"
+                  >
+                    {clearStatus.isPending ? (
+                      <Loader2 className="h-3 w-3 animate-spin" />
+                    ) : (
+                      <>
+                        <X className="h-3 w-3 mr-1" />
+                        Clear
+                      </>
+                    )}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Quick Status Options */}
+          <div className="space-y-2">
+            <Label className="text-sm font-bold text-[#ccff00]">Quick Status</Label>
+            <div className="grid grid-cols-2 gap-2">
+              {SKATING_STATUSES.map((status) => (
+                <Card
+                  key={status.id}
+                  className={cn(
+                    'cursor-pointer transition-all border-2',
+                    selectedStatusId === status.id
+                      ? 'bg-[#ccff00]/20 border-[#ccff00] ring-2 ring-[#ccff00]/50'
+                      : 'border-gray-700 hover:border-[#ccff00]/50'
+                  )}
+                  onClick={() => {
+                    setSelectedStatusId(status.id);
+                    setCustomStatus('');
+                  }}
+                >
+                  <CardContent className="p-3 flex items-center gap-2">
+                    <span className="text-xl">{status.emoji}</span>
+                    <div className="flex-1 min-w-0">
+                      <p className="font-bold text-sm text-white truncate">{status.label}</p>
+                    </div>
+                    {selectedStatusId === status.id && (
+                      <div className="w-4 h-4 rounded-full bg-[#ccff00] flex items-center justify-center flex-shrink-0">
+                        <span className="text-black text-[10px]">✓</span>
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+
+          {/* Custom Status */}
+          <div className="space-y-2">
+            <Label htmlFor="custom-status" className="text-sm font-bold text-gray-400">
+              Or write your own
+            </Label>
+            <Input
+              id="custom-status"
+              placeholder="What are you up to?"
+              value={customStatus}
+              onChange={(e) => {
+                setCustomStatus(e.target.value);
+                setSelectedStatusId(null);
+              }}
+              className="bg-black border-gray-700"
+            />
+          </div>
+
+          {/* Link to Spot */}
+          <div className="space-y-2">
+            <Label className="text-sm font-bold text-[#ff0040] flex items-center gap-1">
+              <MapPin className="h-3 w-3" />
+              Link to a Spot (optional)
+            </Label>
+            {linkedSpot ? (
+              <Card className="bg-[#ff0040]/10 border-[#ff0040]/30">
+                <CardContent className="p-3 flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <MapPin className="h-4 w-4 text-[#ff0040]" />
+                    <span className="text-sm font-medium text-white">
+                      {linkedSpot.title || 'Spot selected'}
+                    </span>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setLinkedSpot(null)}
+                    className="h-7 px-2 text-xs"
+                    disabled={!!preselectedSpot}
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                </CardContent>
+              </Card>
+            ) : showSpotPicker ? (
+              <Card className="bg-gray-900/50 border-gray-700">
+                <CardContent className="p-3 space-y-3">
+                  <div className="flex items-center gap-2">
+                    <div className="relative flex-1">
+                      <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500" />
+                      <Input
+                        placeholder="Search spots..."
+                        value={spotSearchQuery}
+                        onChange={(e) => setSpotSearchQuery(e.target.value)}
+                        className="bg-gray-800 border-gray-700 pl-9 h-9"
+                        autoFocus
+                      />
+                    </div>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        setShowSpotPicker(false);
+                        setSpotSearchQuery('');
+                      }}
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </div>
+
+                  <ScrollArea className="h-48">
+                    <div className="space-y-1.5">
+                      {filteredSpots.map((spot) => (
+                        <button
+                          key={`${spot.pubkey}:${spot.identifier}`}
+                          type="button"
+                          className="w-full flex items-center gap-2 p-2 rounded-lg text-left transition-colors text-sm hover:bg-gray-800"
+                          onClick={() => handleSpotSelected(spot)}
+                        >
+                          <MapPin className="h-4 w-4 flex-shrink-0 text-[#ff0040]" />
+                          <div className="flex-1 min-w-0">
+                            <div className="font-medium truncate text-white">{spot.title}</div>
+                            {spot.location && (
+                              <div className="text-xs text-gray-400 truncate">{spot.location}</div>
+                            )}
+                          </div>
+                        </button>
+                      ))}
+                      {filteredSpots.length === 0 && (
+                        <p className="text-sm text-gray-400 text-center py-4">
+                          No spots found.
+                        </p>
+                      )}
+                    </div>
+                  </ScrollArea>
+                </CardContent>
+              </Card>
+            ) : (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowSpotPicker(true)}
+                className="w-full border-gray-700 text-gray-400"
+              >
+                <MapPin className="h-4 w-4 mr-2" />
+                Select a spot
+              </Button>
+            )}
+          </div>
+
+          {/* Auto-clear Timer */}
+          <div className="space-y-3">
+            <Label className="text-sm font-bold text-orange-400 flex items-center gap-1">
+              <Clock className="h-3 w-3" />
+              Auto-clear after: {formatExpiration(expirationMinutes)}
+            </Label>
+            <Slider
+              value={[expirationMinutes]}
+              onValueChange={([value]) => setExpirationMinutes(value)}
+              min={15}
+              max={1440}
+              step={15}
+              className="w-full"
+            />
+            <div className="flex justify-between text-xs text-gray-500">
+              <span>15 min</span>
+              <span>1 hr</span>
+              <span>4 hrs</span>
+              <span>24 hrs</span>
+            </div>
+          </div>
+
+          {/* Submit Button */}
+          <Button
+            onClick={handleSetStatus}
+            disabled={(!selectedStatusId && !customStatus) || setStatus.isPending}
+            className="w-full bg-[#ccff00] hover:bg-[#ccff00]/90 text-black font-bold"
+          >
+            {setStatus.isPending ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Setting Status...
+              </>
+            ) : (
+              <>
+                <Zap className="h-4 w-4 mr-2" />
+                Set Status
+              </>
+            )}
+          </Button>
+        </div>
+
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/src/components/ShopBountyCard.tsx b/src/src/components/ShopBountyCard.tsx
new file mode 100644
index 0000000..ecffc2f
--- /dev/null
+++ b/src/src/components/ShopBountyCard.tsx
@@ -0,0 +1,192 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import {
+  Zap,
+  Check,
+  Circle,
+  Camera,
+  FileText,
+  MapPin,
+  Phone,
+  Clock,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface ShopBountyCardProps {
+  // Current form state to calculate potential reward
+  hasName: boolean;
+  hasAddress: boolean;
+  hasCoordinates: boolean;
+  hasDescription: boolean;
+  hasPhone: boolean;
+  hasWebsite: boolean;
+  hasHours: boolean;
+  photoCount: number;
+}
+
+interface QualityCheckItem {
+  id: string;
+  label: string;
+  points: number;
+  completed: boolean;
+  icon: React.ComponentType<{ className?: string }>;
+}
+
+export function ShopBountyCard({
+  hasName,
+  hasAddress,
+  hasCoordinates,
+  hasDescription,
+  hasPhone,
+  hasWebsite,
+  hasHours,
+  photoCount,
+}: ShopBountyCardProps) {
+  const checks: QualityCheckItem[] = [
+    {
+      id: 'name',
+      label: 'Shop name',
+      points: 15,
+      completed: hasName,
+      icon: MapPin,
+    },
+    {
+      id: 'location',
+      label: 'Address & coordinates',
+      points: 20,
+      completed: hasAddress && hasCoordinates,
+      icon: MapPin,
+    },
+    {
+      id: 'photo1',
+      label: 'At least 1 photo',
+      points: 15,
+      completed: photoCount >= 1,
+      icon: Camera,
+    },
+    {
+      id: 'photo3',
+      label: '3+ photos',
+      points: 10,
+      completed: photoCount >= 3,
+      icon: Camera,
+    },
+    {
+      id: 'description',
+      label: 'Description',
+      points: 15,
+      completed: hasDescription,
+      icon: FileText,
+    },
+    {
+      id: 'contact',
+      label: 'Contact info',
+      points: 10,
+      completed: hasPhone || hasWebsite,
+      icon: Phone,
+    },
+    {
+      id: 'hours',
+      label: 'Opening hours',
+      points: 15,
+      completed: hasHours,
+      icon: Clock,
+    },
+  ];
+
+  const completedChecks = checks.filter(c => c.completed);
+  const score = completedChecks.reduce((sum, c) => sum + c.points, 0);
+  const maxScore = checks.reduce((sum, c) => sum + c.points, 0);
+  const percentage = Math.round((score / maxScore) * 100);
+
+  const getScoreColor = () => {
+    if (percentage >= 80) return 'text-green-400';
+    if (percentage >= 50) return 'text-[#ccff00]';
+    if (percentage >= 30) return 'text-yellow-400';
+    return 'text-orange-400';
+  };
+
+  const getProgressColor = () => {
+    if (percentage >= 80) return 'bg-green-500';
+    if (percentage >= 50) return 'bg-[#ccff00]';
+    if (percentage >= 30) return 'bg-yellow-500';
+    return 'bg-orange-500';
+  };
+
+  const getScoreLabel = () => {
+    if (percentage >= 80) return 'Excellent!';
+    if (percentage >= 50) return 'Good';
+    if (percentage >= 30) return 'Basic';
+    return 'Getting started';
+  };
+
+  return (
+    <Card className="bg-gradient-to-br from-[#ccff00]/5 to-transparent border-[#ccff00]/20">
+      <CardContent className="p-4">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-2">
+            <Zap className="h-4 w-4 text-[#ccff00]" />
+            <span className="text-sm font-bold uppercase text-gray-300">Earning Potential</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className={cn('text-sm font-bold', getScoreColor())}>
+              {getScoreLabel()}
+            </span>
+            <span className="text-xs text-gray-500">
+              {percentage}%
+            </span>
+          </div>
+        </div>
+
+        {/* Progress Bar */}
+        <div className="relative h-3 bg-gray-800 rounded-full overflow-hidden mb-4">
+          <div 
+            className={cn('h-full transition-all duration-500 ease-out rounded-full', getProgressColor())}
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+
+        {/* Checklist */}
+        <div className="space-y-2">
+          {checks.map((check) => {
+            const Icon = check.icon;
+            return (
+              <div 
+                key={check.id}
+                className={cn(
+                  'flex items-center gap-2 text-xs transition-all',
+                  check.completed ? 'text-green-400' : 'text-gray-500'
+                )}
+              >
+                <div className="flex-shrink-0">
+                  {check.completed ? (
+                    <Check className="h-3.5 w-3.5" />
+                  ) : (
+                    <Circle className="h-3.5 w-3.5" />
+                  )}
+                </div>
+                <Icon className="h-3 w-3 flex-shrink-0" />
+                <span className={check.completed ? 'line-through opacity-70' : ''}>
+                  {check.label}
+                </span>
+                <span className={cn(
+                  'ml-auto text-[10px] font-bold',
+                  check.completed ? 'text-green-400' : 'text-gray-600'
+                )}>
+                  +{check.points}%
+                </span>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Tip */}
+        <div className="mt-4 pt-3 border-t border-gray-800">
+          <p className="text-[10px] text-gray-500">
+            💡 Higher quality = More zaps from the community!
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/src/components/SortDropdown.tsx b/src/src/components/SortDropdown.tsx
new file mode 100644
index 0000000..7eb7b96
--- /dev/null
+++ b/src/src/components/SortDropdown.tsx
@@ -0,0 +1,148 @@
+import { ArrowUpDown, Clock, TrendingUp, MapPin, MessageCircle, Zap, Shield } from 'lucide-react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+
+export type SortOption = 
+  | 'recent'
+  | 'trust'
+  | 'proximity'
+  | 'popular'
+  | 'zaps';
+
+interface SortDropdownProps {
+  value: SortOption;
+  onChange: (value: SortOption) => void;
+  className?: string;
+  showProximity?: boolean; // Only show if geolocation available
+  contentType?: 'spots' | 'events' | 'coaches' | 'generic';
+}
+
+const SORT_OPTIONS = {
+  recent: {
+    label: 'Most Recent',
+    icon: Clock,
+    description: 'Newest first',
+  },
+  trust: {
+    label: 'Highest Trust',
+    icon: Shield,
+    description: 'Most trusted creators',
+  },
+  proximity: {
+    label: 'Closest to Me',
+    icon: MapPin,
+    description: 'Nearest locations',
+  },
+  popular: {
+    label: 'Most Popular',
+    icon: TrendingUp,
+    description: 'Most comments/reactions',
+  },
+  zaps: {
+    label: 'Most Zapped',
+    icon: Zap,
+    description: 'Highest value received',
+  },
+};
+
+export function SortDropdown({ 
+  value, 
+  onChange, 
+  className,
+  showProximity = false,
+  contentType = 'generic',
+}: SortDropdownProps) {
+  const selectedOption = SORT_OPTIONS[value];
+  const Icon = selectedOption.icon;
+
+  // Determine which sort options to show based on content type
+  const availableOptions: SortOption[] = ['recent', 'trust'];
+  
+  if (showProximity) {
+    availableOptions.push('proximity');
+  }
+  
+  // Popular sorting available for all content types
+  availableOptions.push('popular');
+  
+  // Zaps available for all content
+  availableOptions.push('zaps');
+
+  return (
+    <Select value={value} onValueChange={(v) => onChange(v as SortOption)}>
+      <SelectTrigger className={cn("w-[200px] gap-2", className)}>
+        <ArrowUpDown className="h-4 w-4 text-muted-foreground" />
+        <SelectValue>
+          <span className="flex items-center gap-2">
+            <Icon className="h-4 w-4" />
+            {selectedOption.label}
+          </span>
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        {availableOptions.map((option) => {
+          const opt = SORT_OPTIONS[option];
+          const OptionIcon = opt.icon;
+          
+          return (
+            <SelectItem key={option} value={option}>
+              <div className="flex items-center gap-2 w-full">
+                <OptionIcon className="h-4 w-4 text-muted-foreground" />
+                <div className="flex-1">
+                  <div className="font-medium">{opt.label}</div>
+                  <div className="text-xs text-muted-foreground">{opt.description}</div>
+                </div>
+              </div>
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  );
+}
+
+/**
+ * Helper function to calculate popularity score for sorting
+ * Based on comments, reactions, and other engagement metrics
+ */
+export function calculatePopularity(
+  commentCount: number = 0,
+  reactionCount: number = 0,
+  zapCount: number = 0
+): number {
+  // Weighted popularity: comments worth 3x, reactions 1x, zaps 5x
+  return (commentCount * 3) + (reactionCount * 1) + (zapCount * 5);
+}
+
+/**
+ * Calculate distance between two coordinates in kilometers
+ * Uses Haversine formula
+ */
+export function calculateDistance(
+  lat1: number,
+  lon1: number,
+  lat2: number,
+  lon2: number
+): number {
+  const R = 6371; // Earth's radius in km
+  const dLat = toRad(lat2 - lat1);
+  const dLon = toRad(lon2 - lon1);
+  
+  const a = 
+    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+    Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
+    Math.sin(dLon / 2) * Math.sin(dLon / 2);
+  
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  return R * c;
+}
+
+function toRad(degrees: number): number {
+  return degrees * (Math.PI / 180);
+}
diff --git a/src/src/components/SpamFeePayment.tsx b/src/src/components/SpamFeePayment.tsx
new file mode 100644
index 0000000..0d2da57
--- /dev/null
+++ b/src/src/components/SpamFeePayment.tsx
@@ -0,0 +1,320 @@
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/hooks/useToast';
+import { useWallet } from '@/hooks/useWallet';
+import { useNWC } from '@/hooks/useNWCContext';
+import { getInvoiceFromLightningAddress } from '@/lib/lightningAddress';
+import { LISTING_FEE_SATS, PLATFORM_LIGHTNING_ADDRESS } from '@/hooks/useListingRestrictions';
+import { Zap, Loader2, CheckCircle, Copy, ExternalLink, ShieldAlert, TrendingUp, MapPin } from 'lucide-react';
+import QRCode from 'qrcode';
+
+interface SpamFeePaymentProps {
+  feeRecipient: string;
+  feeRecipientName: string;
+  onPaymentSuccess: () => void;
+  onSkip?: () => void;
+}
+
+type PaymentState = 'idle' | 'generating' | 'waiting' | 'paying' | 'success' | 'error';
+
+export function SpamFeePayment({
+  feeRecipient,
+  feeRecipientName,
+  onPaymentSuccess,
+}: SpamFeePaymentProps) {
+  const { toast } = useToast();
+  const { webln, activeNWC } = useWallet();
+  const { sendPayment } = useNWC();
+  const [paymentState, setPaymentState] = useState<PaymentState>('idle');
+  const [invoice, setInvoice] = useState<string | null>(null);
+  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // Auto-pay when wallet is connected and invoice is generated
+  useEffect(() => {
+    if (invoice && paymentState === 'waiting' && (webln || activeNWC)) {
+      handleAutoPay();
+    }
+  }, [invoice, paymentState, webln, activeNWC]);
+
+  const generateInvoice = async () => {
+    setPaymentState('generating');
+    setError(null);
+
+    try {
+      const bolt11 = await getInvoiceFromLightningAddress({
+        lightningAddress: feeRecipient,
+        amountSats: LISTING_FEE_SATS,
+        comment: 'SkateSpots listing fee',
+      });
+
+      setInvoice(bolt11);
+
+      // Generate QR code
+      const qr = await QRCode.toDataURL(bolt11.toUpperCase(), {
+        width: 256,
+        margin: 2,
+        color: {
+          dark: '#000000',
+          light: '#ffffff',
+        },
+      });
+      setQrCodeUrl(qr);
+
+      setPaymentState('waiting');
+
+      // If wallet is available, try auto-pay
+      if (webln || activeNWC) {
+        await handleAutoPay();
+      }
+    } catch (err) {
+      console.error('Failed to generate invoice:', err);
+      setError(err instanceof Error ? err.message : 'Failed to generate invoice');
+      setPaymentState('error');
+    }
+  };
+
+  const handleAutoPay = async () => {
+    if (!invoice) return;
+    
+    setPaymentState('paying');
+
+    try {
+      // Try NWC first
+      if (activeNWC && activeNWC.isConnected) {
+        await sendPayment(activeNWC, invoice);
+        setPaymentState('success');
+        toast({
+          title: 'Payment successful!',
+          description: `${LISTING_FEE_SATS} sats sent to ${feeRecipientName}`,
+        });
+        setTimeout(onPaymentSuccess, 1500);
+        return;
+      }
+
+      // Try WebLN
+      if (webln) {
+        if (webln.enable) {
+          await webln.enable();
+        }
+        await webln.sendPayment(invoice);
+        setPaymentState('success');
+        toast({
+          title: 'Payment successful!',
+          description: `${LISTING_FEE_SATS} sats sent to ${feeRecipientName}`,
+        });
+        setTimeout(onPaymentSuccess, 1500);
+        return;
+      }
+
+      // No auto-pay available, stay in waiting state
+      setPaymentState('waiting');
+    } catch (err) {
+      console.error('Auto-pay failed:', err);
+      // Fall back to manual payment
+      setPaymentState('waiting');
+      toast({
+        title: 'Auto-pay failed',
+        description: 'Please pay manually using the QR code or invoice',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const copyInvoice = async () => {
+    if (!invoice) return;
+    try {
+      await navigator.clipboard.writeText(invoice);
+      toast({ title: 'Invoice copied!' });
+    } catch {
+      toast({ title: 'Failed to copy', variant: 'destructive' });
+    }
+  };
+
+  const openInWallet = () => {
+    if (!invoice) return;
+    window.open(`lightning:${invoice}`, '_blank');
+  };
+
+  // Show success state
+  if (paymentState === 'success') {
+    return (
+      <Card className="bg-green-950/30 border-2 border-green-500/50">
+        <CardContent className="py-8 text-center">
+          <CheckCircle className="h-12 w-12 text-green-400 mx-auto mb-4" />
+          <h3 className="font-bold text-green-400 text-lg mb-2">Payment Received!</h3>
+          <p className="text-gray-300">
+            Your {LISTING_FEE_SATS} sat fee has been paid. You can now create your listing.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Show payment flow
+  return (
+    <Card className="bg-yellow-950/30 border-2 border-yellow-500/50">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-yellow-400">
+          <ShieldAlert className="h-5 w-5" />
+          One-Time Listing Fee
+        </CardTitle>
+        <CardDescription className="text-gray-300">
+          As a new member, a small fee is required for your first listing.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Why this fee exists */}
+        <div className="bg-black/30 rounded-lg p-4 space-y-3">
+          <h4 className="font-bold text-white text-sm">Why do I need to pay?</h4>
+          <div className="space-y-2 text-sm">
+            <div className="flex items-start gap-2">
+              <ShieldAlert className="h-4 w-4 text-yellow-400 mt-0.5 flex-shrink-0" />
+              <p className="text-gray-300">
+                <span className="text-white font-medium">Spam prevention:</span> This fee stops bots and scammers from flooding the marketplace with fake listings.
+              </p>
+            </div>
+            <div className="flex items-start gap-2">
+              <TrendingUp className="h-4 w-4 text-green-400 mt-0.5 flex-shrink-0" />
+              <p className="text-gray-300">
+                <span className="text-white font-medium">Trust building:</span> New accounts need to prove commitment before listing. After a few successful listings, this fee is waived.
+              </p>
+            </div>
+            <div className="flex items-start gap-2">
+              <MapPin className="h-4 w-4 text-[#ff6600] mt-0.5 flex-shrink-0" />
+              <p className="text-gray-300">
+                <span className="text-white font-medium">Supports the community:</span> Fee goes to{' '}
+                <span className="font-semibold text-yellow-400">{feeRecipientName}</span>
+                {feeRecipient !== PLATFORM_LIGHTNING_ADDRESS && ' — the person who created this spot!'}
+                {feeRecipient === PLATFORM_LIGHTNING_ADDRESS && ' — helping keep SkateSpots running.'}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Fee amount */}
+        <div className="text-center py-3 bg-yellow-500/10 rounded-lg border border-yellow-500/30">
+          <div className="text-3xl font-black text-yellow-400">
+            ⚡ {LISTING_FEE_SATS.toLocaleString()} sats
+          </div>
+          <p className="text-sm text-gray-400 mt-1">~${(LISTING_FEE_SATS * 0.0006).toFixed(2)} USD • One-time fee</p>
+        </div>
+
+        {/* Initial state - generate invoice button */}
+        {paymentState === 'idle' && (
+          <Button
+            onClick={generateInvoice}
+            className="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold"
+          >
+            <Zap className="h-4 w-4 mr-2" />
+            Pay {LISTING_FEE_SATS} sats to Continue
+          </Button>
+        )}
+
+        {/* Generating invoice */}
+        {paymentState === 'generating' && (
+          <div className="text-center py-4">
+            <Loader2 className="h-8 w-8 animate-spin mx-auto text-yellow-400" />
+            <p className="text-gray-400 mt-2">Generating invoice...</p>
+          </div>
+        )}
+
+        {/* Paying */}
+        {paymentState === 'paying' && (
+          <div className="text-center py-4">
+            <Loader2 className="h-8 w-8 animate-spin mx-auto text-yellow-400" />
+            <p className="text-gray-400 mt-2">Processing payment...</p>
+          </div>
+        )}
+
+        {/* Waiting for payment - show QR and manual options */}
+        {paymentState === 'waiting' && invoice && qrCodeUrl && (
+          <div className="space-y-4">
+            {/* QR Code */}
+            <div className="flex justify-center">
+              <div className="bg-white p-3 rounded-lg">
+                <img src={qrCodeUrl} alt="Payment QR Code" className="w-48 h-48" />
+              </div>
+            </div>
+
+            {/* Action buttons */}
+            <div className="grid grid-cols-2 gap-2">
+              <Button
+                variant="outline"
+                onClick={copyInvoice}
+                className="border-yellow-500/50 hover:bg-yellow-500/10"
+              >
+                <Copy className="h-4 w-4 mr-2" />
+                Copy Invoice
+              </Button>
+              <Button
+                variant="outline"
+                onClick={openInWallet}
+                className="border-yellow-500/50 hover:bg-yellow-500/10"
+              >
+                <ExternalLink className="h-4 w-4 mr-2" />
+                Open Wallet
+              </Button>
+            </div>
+
+            {/* Try again with wallet */}
+            {(webln || activeNWC) && (
+              <Button
+                onClick={handleAutoPay}
+                className="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold"
+              >
+                <Zap className="h-4 w-4 mr-2" />
+                Pay with Connected Wallet
+              </Button>
+            )}
+
+            <p className="text-xs text-gray-400 text-center">
+              Scan the QR code with a Lightning wallet or use the buttons above
+            </p>
+          </div>
+        )}
+
+        {/* Error state */}
+        {paymentState === 'error' && error && (
+          <div className="space-y-4">
+            <div className="text-center py-2">
+              <p className="text-red-400">{error}</p>
+            </div>
+            <Button
+              onClick={generateInvoice}
+              variant="outline"
+              className="w-full border-yellow-500/50 hover:bg-yellow-500/10"
+            >
+              Try Again
+            </Button>
+          </div>
+        )}
+
+        {/* How to avoid future fees */}
+        <div className="bg-green-500/10 rounded-lg p-3 border border-green-500/30">
+          <p className="text-green-400 font-semibold text-sm mb-2">
+            ✨ How to skip this fee in the future:
+          </p>
+          <ul className="text-gray-300 text-sm space-y-1">
+            <li className="flex items-center gap-2">
+              <span className="text-green-400">→</span>
+              Add a skate spot to the map
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="text-green-400">→</span>
+              Complete 2-3 successful listings
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="text-green-400">→</span>
+              Build your community reputation
+            </li>
+          </ul>
+          <p className="text-xs text-gray-400 mt-2">
+            Trusted members get unlimited free listings!
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/src/components/SponsorSlot.tsx b/src/src/components/SponsorSlot.tsx
new file mode 100644
index 0000000..33a09cc
--- /dev/null
+++ b/src/src/components/SponsorSlot.tsx
@@ -0,0 +1,160 @@
+/**
+ * SponsorSlot - Invisible placeholder for future sponsors
+ * 
+ * This component renders nothing when no sponsors are provided,
+ * but can be "activated" by passing sponsor data.
+ * 
+ * Sizes:
+ * - banner: Full-width horizontal banner (homepage, tour pages)
+ * - card: Square/rectangular card (sidebar, grid layouts)
+ * - inline: Small inline mention (challenge cards, footer)
+ * 
+ * Usage:
+ * <SponsorSlot size="banner" /> // Invisible placeholder
+ * <SponsorSlot size="banner" sponsors={[{name: "Vans", logo: "...", url: "..."}]} />
+ */
+
+import { cn } from '@/lib/utils';
+
+export interface Sponsor {
+  name: string;
+  logo?: string;
+  url?: string;
+  tier?: 'title' | 'gold' | 'silver' | 'challenge' | 'partner';
+}
+
+interface SponsorSlotProps {
+  size: 'banner' | 'card' | 'inline';
+  sponsors?: Sponsor[];
+  title?: string; // e.g., "Powered by", "Sponsored by", "Partners"
+  className?: string;
+  // For challenge sponsors
+  challengeId?: string;
+}
+
+export function SponsorSlot({ 
+  size, 
+  sponsors, 
+  title = 'Partners',
+  className,
+}: SponsorSlotProps) {
+  // If no sponsors, render nothing (invisible placeholder)
+  if (!sponsors || sponsors.length === 0) {
+    return null;
+  }
+
+  // Banner style - full width, horizontal layout
+  if (size === 'banner') {
+    return (
+      <div className={cn(
+        'w-full py-6 border-t border-b border-gray-800 bg-black/50',
+        className
+      )}>
+        <div className="container px-4">
+          <p className="text-xs text-gray-500 uppercase tracking-wider mb-4 text-center">
+            {title}
+          </p>
+          <div className="flex items-center justify-center gap-8 flex-wrap">
+            {sponsors.map((sponsor) => (
+              <SponsorItem key={sponsor.name} sponsor={sponsor} size="banner" />
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Card style - for sidebar or grid layouts
+  if (size === 'card') {
+    return (
+      <div className={cn(
+        'p-4 rounded-lg border border-gray-800 bg-black/50',
+        className
+      )}>
+        <p className="text-xs text-gray-500 uppercase tracking-wider mb-3">
+          {title}
+        </p>
+        <div className="flex flex-col gap-3">
+          {sponsors.map((sponsor) => (
+            <SponsorItem key={sponsor.name} sponsor={sponsor} size="card" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Inline style - small, compact
+  if (size === 'inline') {
+    return (
+      <div className={cn(
+        'flex items-center gap-2 text-xs text-gray-500',
+        className
+      )}>
+        <span>{title}:</span>
+        {sponsors.map((sponsor, idx) => (
+          <span key={sponsor.name}>
+            <SponsorItem sponsor={sponsor} size="inline" />
+            {idx < sponsors.length - 1 && ', '}
+          </span>
+        ))}
+      </div>
+    );
+  }
+
+  return null;
+}
+
+// Individual sponsor display
+function SponsorItem({ sponsor, size }: { sponsor: Sponsor; size: 'banner' | 'card' | 'inline' }) {
+  const content = (
+    <div className={cn(
+      'flex items-center gap-2 transition-opacity hover:opacity-80',
+      size === 'banner' && 'flex-col',
+      size === 'card' && 'flex-row',
+      size === 'inline' && 'inline-flex',
+    )}>
+      {sponsor.logo && (
+        <img 
+          src={sponsor.logo} 
+          alt={sponsor.name}
+          className={cn(
+            'object-contain',
+            size === 'banner' && 'h-10 max-w-[120px]',
+            size === 'card' && 'h-6 max-w-[80px]',
+            size === 'inline' && 'h-4 max-w-[60px]',
+          )}
+        />
+      )}
+      <span className={cn(
+        'font-medium',
+        size === 'banner' && 'text-sm text-gray-400',
+        size === 'card' && 'text-sm text-gray-300',
+        size === 'inline' && 'text-xs text-gray-400',
+        !sponsor.logo && 'text-gray-300', // More visible if no logo
+      )}>
+        {sponsor.name}
+      </span>
+      {sponsor.tier === 'title' && size !== 'inline' && (
+        <span className="text-[10px] text-yellow-500 uppercase">Title Sponsor</span>
+      )}
+    </div>
+  );
+
+  if (sponsor.url) {
+    return (
+      <a 
+        href={sponsor.url} 
+        target="_blank" 
+        rel="noopener noreferrer"
+        className="block"
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return content;
+}
+
+// Export types for use in tour schema
+export type { Sponsor as TourSponsor };
diff --git a/src/src/components/SpotCard.tsx b/src/src/components/SpotCard.tsx
new file mode 100644
index 0000000..a91aff6
--- /dev/null
+++ b/src/src/components/SpotCard.tsx
@@ -0,0 +1,245 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { MapPin, Store, Bookmark, MoreVertical, Flag } from 'lucide-react';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { genUserName } from '@/lib/genUserName';
+import { ZapButton } from '@/components/ZapButton';
+import { TrustBadge } from '@/components/TrustBadge';
+import { AddToCollectionDialog } from '@/components/AddToCollectionDialog';
+import { ReportDialog } from '@/components/ReportDialog';
+import type { SkateSpot } from '@/lib/types';
+import { SPOT_TYPE_LABELS, ACCESS_TYPE_INFO } from '@/lib/types';
+import { cn } from '@/lib/utils';
+
+interface SpotCardProps {
+  spot: SkateSpot;
+}
+
+export function SpotCard({ spot }: SpotCardProps) {
+  const author = useAuthor(spot.pubkey);
+  const { user } = useCurrentUser();
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(spot.pubkey);
+  const [showCollectionDialog, setShowCollectionDialog] = useState(false);
+  const [showReportDialog, setShowReportDialog] = useState(false);
+
+  // Determine if this is a shop or a spot
+  const isShop = spot.types.includes('shop');
+  const isOwner = user?.pubkey === spot.pubkey;
+  const route = isShop ? `/shop/${spot.pubkey}/${spot.identifier}` : `/spot/${spot.pubkey}/${spot.identifier}`;
+
+  return (
+    <Link to={route}>
+      <Card className={cn(
+        "group overflow-hidden hover:shadow-2xl transition-all duration-300 border-2 bg-black/90 backdrop-blur",
+        isShop
+          ? "border-[#ccff00]/30 hover:border-[#ccff00]/70 hover:shadow-[#ccff00]/30"
+          : "border-[#ff0040]/20 hover:border-[#ff0040]/60 hover:shadow-[#ff0040]/30"
+      )}>
+        {/* Image */}
+        <div className="relative aspect-video overflow-hidden bg-black">
+          {spot.images[0] ? (
+            <img
+              src={spot.images[0]}
+              alt={spot.title}
+              className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110 group-hover:brightness-110"
+            />
+          ) : (
+            <div className={cn(
+              "w-full h-full flex items-center justify-center bg-gradient-to-br",
+              isShop
+                ? "from-[#ccff00]/20 to-[#00ff88]/20"
+                : "from-[#ff0040]/20 to-[#ff6600]/20"
+            )}>
+              {isShop ? (
+                <Store className="h-16 w-16 text-[#ccff00]/40" />
+              ) : (
+                <MapPin className="h-16 w-16 text-[#ff0040]/40" />
+              )}
+            </div>
+          )}
+          {/* Shop badge or Type badges overlay */}
+          <div className="absolute top-3 left-3 flex flex-col gap-1">
+            {isShop ? (
+              <Badge className="bg-[#ccff00]/90 text-black backdrop-blur-sm border-2 border-white font-black uppercase text-xs">
+                🏪 SKATE SHOP
+              </Badge>
+            ) : (
+              <>
+                {spot.accessType && (
+                  <Badge
+                    className="bg-black/90 backdrop-blur-sm border-2 font-bold uppercase text-[10px]"
+                    style={{
+                      borderColor: ACCESS_TYPE_INFO[spot.accessType].color,
+                      color: ACCESS_TYPE_INFO[spot.accessType].color
+                    }}
+                  >
+                    {ACCESS_TYPE_INFO[spot.accessType].emoji} {ACCESS_TYPE_INFO[spot.accessType].label.split(' - ')[0]}
+                  </Badge>
+                )}
+                {spot.types.length > 0 && (
+                  <div className="flex flex-wrap gap-1">
+                    {spot.types.slice(0, 2).map((type) => (
+                      <Badge
+                        key={type}
+                        className="bg-black/80 text-[#ccff00] backdrop-blur-sm border border-[#ccff00]/50 font-bold uppercase text-[10px]"
+                      >
+                        {SPOT_TYPE_LABELS[type] || type}
+                      </Badge>
+                    ))}
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+
+        <CardHeader className="pb-2">
+          <h3 className={cn(
+            "font-bold text-lg leading-tight transition-colors line-clamp-1 uppercase tracking-wide",
+            isShop
+              ? "text-white group-hover:text-[#ccff00]"
+              : "text-white group-hover:text-[#ff0040]"
+          )}>
+            {spot.title}
+          </h3>
+          {spot.location && (
+            <p className="text-sm text-gray-400 flex items-center gap-1 line-clamp-1">
+              {isShop ? (
+                <Store className="h-3 w-3 flex-shrink-0 text-[#ccff00]" />
+              ) : (
+                <MapPin className="h-3 w-3 flex-shrink-0 text-[#ff0040]" />
+              )}
+              {spot.location}
+            </p>
+          )}
+        </CardHeader>
+
+        <CardContent className="pb-3">
+          {spot.description && (
+            <p className="text-sm text-gray-400 line-clamp-2">
+              {spot.description}
+            </p>
+          )}
+        </CardContent>
+
+        <CardFooter className="pt-0 flex items-center justify-between border-t border-[#ff0040]/20 mt-2 pt-3">
+          <div className="flex items-center gap-2 flex-1 min-w-0">
+            <Avatar className="h-6 w-6 border border-[#ff0040]/30">
+              <AvatarImage src={metadata?.picture} alt={displayName} />
+              <AvatarFallback className="text-xs bg-black text-[#ff0040]">
+                {displayName.slice(0, 2).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            <span className="text-xs text-gray-400 truncate max-w-[80px]">
+              {displayName}
+            </span>
+            {/* Trust Badge */}
+            <TrustBadge pubkey={spot.pubkey} size="sm" />
+          </div>
+
+          <div className="flex items-center gap-2" onClick={(e) => e.preventDefault()}>
+            {user && !isShop && (
+              <Button
+                size="icon"
+                variant="ghost"
+                className="h-8 w-8 text-gray-400 hover:text-[#ccff00] hover:bg-[#ccff00]/10"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setShowCollectionDialog(true);
+                }}
+              >
+                <Bookmark className="h-4 w-4" />
+              </Button>
+            )}
+            <ZapButton target={spot.event} className="text-gray-400 hover:text-[#ccff00]" />
+            {/* More options menu */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="h-8 w-8 text-gray-400 hover:text-white"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <MoreVertical className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-40">
+                {!isOwner && (
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setShowReportDialog(true);
+                    }}
+                    className="text-red-500 focus:text-red-500"
+                  >
+                    <Flag className="h-4 w-4 mr-2" />
+                    Report
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </CardFooter>
+      </Card>
+
+      {/* Collection Dialog */}
+      {!isShop && (
+        <AddToCollectionDialog
+          open={showCollectionDialog}
+          onOpenChange={setShowCollectionDialog}
+          spot={spot}
+        />
+      )}
+
+      {/* Report Dialog */}
+      <ReportDialog
+        open={showReportDialog}
+        onOpenChange={setShowReportDialog}
+        targetType={isShop ? 'shop' : 'spot'}
+        targetPubkey={spot.pubkey}
+        targetEventId={spot.id}
+        targetTitle={spot.title}
+      />
+    </Link>
+  );
+}
+
+export function SpotCardSkeleton() {
+  return (
+    <Card className="overflow-hidden">
+      <Skeleton className="aspect-video w-full" />
+      <CardHeader className="pb-2">
+        <Skeleton className="h-6 w-3/4" />
+        <Skeleton className="h-4 w-1/2" />
+      </CardHeader>
+      <CardContent className="pb-3">
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-4/5" />
+        </div>
+      </CardContent>
+      <CardFooter className="pt-0">
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-6 w-6 rounded-full" />
+          <Skeleton className="h-4 w-20" />
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/src/src/components/SpotMap.tsx b/src/src/components/SpotMap.tsx
new file mode 100644
index 0000000..bc67c0f
--- /dev/null
+++ b/src/src/components/SpotMap.tsx
@@ -0,0 +1,1099 @@
+import { useEffect, useRef, useMemo, useCallback } from 'react';
+import L from 'leaflet';
+import ngeohash from 'ngeohash';
+import { useNavigate } from 'react-router-dom';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { MapPin } from 'lucide-react';
+import type { SkateSpot, MarketplaceItem, SkateTour } from '@/lib/types';
+import { SPOT_TYPE_LABELS, formatPrice } from '@/lib/types';
+import type { SpotWeatherData } from '@/hooks/useSpotWeather';
+import type { BtcMapPlace } from '@/hooks/useBtcMapPlaces';
+import { isRecentlyVerified, isBoosted } from '@/hooks/useBtcMapPlaces';
+
+// Fix default marker icon issues with webpack/vite
+const defaultIcon = L.icon({
+  iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+  iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
+  shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41],
+});
+
+L.Marker.prototype.options.icon = defaultIcon;
+
+// Custom skate spot marker icon (for regular spots)
+const createSkateSpotIcon = (weatherColor?: string, weatherIcon?: string) => {
+  const gradient = weatherColor
+    ? `background: ${weatherColor};`
+    : 'background: linear-gradient(135deg, #ff0040, #ff6600);';
+
+  const borderColor = weatherColor ? weatherColor : '#fff';
+
+  return L.divIcon({
+    className: 'skate-spot-marker',
+    html: `
+      <div style="
+        width: 36px;
+        height: 36px;
+        ${gradient}
+        border-radius: 50% 50% 50% 0;
+        transform: rotate(-45deg);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 4px 12px rgba(255,0,64,0.5);
+        border: 3px solid ${borderColor};
+        position: relative;
+      ">
+        ${weatherIcon ? `
+          <div style="
+            position: absolute;
+            top: -8px;
+            right: -8px;
+            background: white;
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+            transform: rotate(45deg);
+          ">${weatherIcon}</div>
+        ` : ''}
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transform: rotate(45deg);">
+          <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/>
+          <circle cx="12" cy="10" r="3"/>
+        </svg>
+      </div>
+    `,
+    iconSize: [36, 36],
+    iconAnchor: [18, 36],
+    popupAnchor: [0, -36],
+  });
+};
+
+// Custom shop marker icon (for shops)
+const createShopIcon = () => L.divIcon({
+  className: 'skate-shop-marker',
+  html: `
+    <div style="
+      width: 36px;
+      height: 36px;
+      background: linear-gradient(135deg, #ccff00, #00ff88);
+      border-radius: 50% 50% 50% 0;
+      transform: rotate(-45deg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 12px rgba(204,255,0,0.5);
+      border: 2px solid #fff;
+    ">
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transform: rotate(45deg);">
+        <path d="M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z"/>
+        <path d="m3 9 2.45-4.9A2 2 0 0 1 7.24 3h9.52a2 2 0 0 1 1.8 1.1L21 9"/>
+        <path d="M12 3v6"/>
+      </svg>
+    </div>
+  `,
+  iconSize: [36, 36],
+  iconAnchor: [18, 36],
+  popupAnchor: [0, -36],
+});
+
+// Dual-purpose marker (shop + spot)
+const createDualIcon = (hasGear?: boolean, gearCount?: number) => L.divIcon({
+  className: 'dual-marker',
+  html: `
+    <div style="
+      width: 44px;
+      height: 44px;
+      position: relative;
+      transform: rotate(-45deg);
+    ">
+      <!-- Main container -->
+      <div style="
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg, #9333ea 50%, #ff0040 50%);
+        border-radius: 50% 50% 50% 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 4px 12px rgba(147,51,234,0.5);
+        border: 2px solid #fff;
+      ">
+        <!-- Dual icons: shop + spot -->
+        <div style="transform: rotate(45deg); display: flex; gap: 2px;">
+          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z"/>
+            <path d="m3 9 2.45-4.9A2 2 0 0 1 7.24 3h9.52a2 2 0 0 1 1.8 1.1L21 9"/>
+          </svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="#fff" stroke="#fff" stroke-width="2">
+            <path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h1M16 3h1a2 2 0 0 1 2 2v5a2 2 0 0 0 2 2 2 2 0 0 0-2 2v5a2 2 0 0 1-2 2h-1"/>
+          </svg>
+        </div>
+      </div>
+      ${hasGear && gearCount ? `
+        <div style="
+          position: absolute;
+          bottom: -6px;
+          right: -6px;
+          background: #ff6600;
+          color: white;
+          border-radius: 50%;
+          width: 18px;
+          height: 18px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 10px;
+          font-weight: bold;
+          border: 2px solid #fff;
+          transform: rotate(45deg);
+        ">${gearCount}</div>
+      ` : ''}
+    </div>
+  `,
+  iconSize: [44, 44],
+  iconAnchor: [22, 44],
+  popupAnchor: [0, -44],
+});
+
+// Custom tour marker icon (cyan color with route/person icon)
+const createTourIcon = () => L.divIcon({
+  className: 'tour-marker',
+  html: `
+    <div style="
+      width: 40px;
+      height: 40px;
+      background: linear-gradient(135deg, #06b6d4, #0891b2);
+      border-radius: 50% 50% 50% 0;
+      transform: rotate(-45deg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 12px rgba(6,182,212,0.5);
+      border: 3px solid #fff;
+      position: relative;
+    ">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="transform: rotate(45deg);">
+        <circle cx="12" cy="8" r="5"/>
+        <path d="M20 21a8 8 0 0 0-16 0"/>
+      </svg>
+      <div style="
+        position: absolute;
+        top: -6px;
+        right: -6px;
+        background: #fbbf24;
+        border-radius: 50%;
+        width: 16px;
+        height: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        font-weight: bold;
+        border: 2px solid #fff;
+        transform: rotate(45deg);
+      ">🛹</div>
+    </div>
+  `,
+  iconSize: [40, 40],
+  iconAnchor: [20, 40],
+  popupAnchor: [0, -40],
+});
+
+// Custom BTC Map marker icon (for Bitcoin-accepting places)
+const createBtcMapIcon = (isBoosted?: boolean) => L.divIcon({
+  className: 'btcmap-marker',
+  html: `
+    <div style="
+      width: 32px;
+      height: 32px;
+      background: linear-gradient(135deg, #f7931a, #ffb347);
+      border-radius: 50% 50% 50% 0;
+      transform: rotate(-45deg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 12px rgba(247,147,26,0.5);
+      border: 2px solid ${isBoosted ? '#ffd700' : '#fff'};
+      position: relative;
+    ">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#fff" style="transform: rotate(45deg);">
+        <path d="M12.5 8.8v-3h2.1c.6 0 1.1.1 1.4.4.4.3.5.7.5 1.2 0 .5-.2.9-.5 1.1-.4.2-.8.3-1.4.3h-2.1zm0 5.4v-3.5h2.3c.7 0 1.2.2 1.6.5.4.3.6.8.6 1.3 0 .5-.2 1-.6 1.3-.4.3-.9.5-1.6.5h-2.3zm-2 2.8V5h4.6c1.2 0 2.1.3 2.8.9.7.6 1 1.4 1 2.4 0 .7-.2 1.3-.5 1.8-.3.5-.8.8-1.4 1 .7.1 1.3.5 1.7 1 .4.5.6 1.2.6 2 0 1.1-.4 2-1.1 2.6-.7.6-1.7.9-3 .9h-4.7z"/>
+      </svg>
+      ${isBoosted ? `
+        <div style="
+          position: absolute;
+          top: -6px;
+          right: -6px;
+          background: #ffd700;
+          border-radius: 50%;
+          width: 14px;
+          height: 14px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 8px;
+          border: 2px solid #fff;
+          transform: rotate(45deg);
+        ">⭐</div>
+      ` : ''}
+    </div>
+  `,
+  iconSize: [32, 32],
+  iconAnchor: [16, 32],
+  popupAnchor: [0, -32],
+});
+
+// Custom marketplace marker icon (for gear swap)
+const createMarketplaceIcon = (count?: number) => L.divIcon({
+  className: 'marketplace-marker',
+  html: `
+    <div style="
+      width: 36px;
+      height: 36px;
+      background: linear-gradient(135deg, #ff6600, #ff9933);
+      border-radius: 50% 50% 50% 0;
+      transform: rotate(-45deg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 12px rgba(255,102,0,0.5);
+      border: 2px solid #fff;
+      position: relative;
+    ">
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transform: rotate(45deg);">
+        <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/>
+        <path d="M3 6h18"/>
+        <path d="M16 10a4 4 0 0 1-8 0"/>
+      </svg>
+      ${count && count > 1 ? `
+        <div style="
+          position: absolute;
+          top: -8px;
+          right: -8px;
+          background: #ff0040;
+          color: white;
+          border-radius: 50%;
+          width: 20px;
+          height: 20px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 11px;
+          font-weight: bold;
+          border: 2px solid #fff;
+          transform: rotate(45deg);
+        ">${count}</div>
+      ` : ''}
+    </div>
+  `,
+  iconSize: [36, 36],
+  iconAnchor: [18, 36],
+  popupAnchor: [0, -36],
+});
+
+interface SpotMapProps {
+  spots: SkateSpot[];
+  marketplaceItems?: MarketplaceItem[];
+  tours?: SkateTour[];
+  btcMapPlaces?: BtcMapPlace[];
+  center?: [number, number];
+  zoom?: number;
+  onSpotClick?: (spot: SkateSpot) => void;
+  selectedSpot?: SkateSpot | null;
+  onMapClick?: (lat: number, lng: number) => void;
+  onMapMove?: (center: { lat: number; lon: number }) => void;
+  enableClickToAdd?: boolean;
+  className?: string;
+  weatherEnabled?: boolean;
+  weatherData?: Map<string, SpotWeatherData>;
+  showSpots?: boolean;
+  showShops?: boolean;
+  showGear?: boolean;
+  showTours?: boolean;
+  showBtcMap?: boolean;
+}
+
+function createPopupContent(
+  spot: SkateSpot,
+  onViewDetails: () => void,
+  weatherData?: SpotWeatherData
+): HTMLElement {
+  const container = document.createElement('div');
+  container.className = 'p-2 min-w-[200px]';
+
+  // Title
+  const title = document.createElement('h3');
+  title.className = 'font-bold text-lg mb-1';
+  title.textContent = spot.title;
+  container.appendChild(title);
+
+  // Location
+  if (spot.location) {
+    const location = document.createElement('p');
+    location.className = 'text-sm text-gray-500 mb-2 flex items-center gap-1';
+    location.innerHTML = `<svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg> ${spot.location}`;
+    container.appendChild(location);
+  }
+
+  // Weather section (if enabled and available)
+  if (weatherData) {
+    const weatherSection = document.createElement('div');
+    weatherSection.className = 'mb-3 p-2 rounded-lg bg-gray-50 border border-gray-200';
+
+    // Current conditions
+    const currentWeather = document.createElement('div');
+    currentWeather.className = 'flex items-center justify-between mb-2';
+    currentWeather.innerHTML = `
+      <div class="flex items-center gap-2">
+        <span class="text-2xl">${weatherData.weather.weatherIcon}</span>
+        <div>
+          <div class="font-semibold">${weatherData.weather.temperature}°C</div>
+          <div class="text-xs text-gray-500">${weatherData.weather.weatherDescription}</div>
+        </div>
+      </div>
+      <div class="text-right">
+        <div class="text-xs font-semibold" style="color: ${weatherData.skateability.color}">
+          ${weatherData.skateability.label}
+        </div>
+        <div class="text-xs text-gray-500">${weatherData.skateability.score}/100</div>
+      </div>
+    `;
+    weatherSection.appendChild(currentWeather);
+
+    // Details
+    const details = document.createElement('div');
+    details.className = 'text-xs space-y-1 text-gray-600';
+    details.innerHTML = `
+      <div>💨 Wind: ${weatherData.weather.windSpeed} km/h ${weatherData.weather.windDirectionLabel}</div>
+      <div>💧 Humidity: ${weatherData.weather.humidity}%</div>
+      ${weatherData.airQuality ? `<div>🌫️ Air Quality: ${weatherData.airQuality.aqiLabel} (${weatherData.airQuality.aqi})</div>` : ''}
+    `;
+    weatherSection.appendChild(details);
+
+    // Forecast (if available)
+    if (weatherData.forecast?.daily && weatherData.forecast.daily.length > 0) {
+      const forecastDiv = document.createElement('div');
+      forecastDiv.className = 'mt-2 pt-2 border-t border-gray-200';
+
+      const forecastTitle = document.createElement('div');
+      forecastTitle.className = 'text-xs font-semibold mb-1 text-gray-700';
+      forecastTitle.textContent = '3-Day Forecast';
+      forecastDiv.appendChild(forecastTitle);
+
+      const forecastGrid = document.createElement('div');
+      forecastGrid.className = 'grid grid-cols-3 gap-1 text-xs text-center';
+
+      weatherData.forecast.daily.forEach((day) => {
+        const dayDiv = document.createElement('div');
+        dayDiv.className = 'p-1';
+        const date = new Date(day.date);
+        const dayName = date.toLocaleDateString('en-US', { weekday: 'short' });
+        dayDiv.innerHTML = `
+          <div class="font-semibold text-gray-700">${dayName}</div>
+          <div class="text-lg my-1">${day.weatherIcon}</div>
+          <div class="text-gray-600">${day.maxTemp}°/${day.minTemp}°</div>
+          ${day.precipitationProbability > 0 ? `<div class="text-blue-600">${day.precipitationProbability}% 🌧️</div>` : ''}
+        `;
+        forecastGrid.appendChild(dayDiv);
+      });
+
+      forecastDiv.appendChild(forecastGrid);
+      weatherSection.appendChild(forecastDiv);
+    }
+
+    container.appendChild(weatherSection);
+  }
+
+  // Types
+  if (spot.types.length > 0) {
+    const typesContainer = document.createElement('div');
+    typesContainer.className = 'flex flex-wrap gap-1 mb-3';
+    spot.types.slice(0, 3).forEach((type) => {
+      const badge = document.createElement('span');
+      badge.className = 'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold bg-gray-100 text-gray-800';
+      badge.textContent = SPOT_TYPE_LABELS[type] || type;
+      typesContainer.appendChild(badge);
+    });
+    container.appendChild(typesContainer);
+  }
+
+  // Button
+  const button = document.createElement('button');
+  button.className = 'w-full inline-flex items-center justify-center rounded-md text-sm font-medium bg-orange-500 text-white hover:bg-orange-600 h-8 px-3 transition-colors';
+  button.textContent = 'View Details';
+  button.onclick = (e) => {
+    e.preventDefault();
+    onViewDetails();
+  };
+  container.appendChild(button);
+
+  return container;
+}
+
+// Enhanced popup with marketplace items section
+function createEnhancedPopupContent(
+  spot: SkateSpot,
+  marketplaceItems: MarketplaceItem[],
+  onViewDetails: () => void,
+  weatherData?: SpotWeatherData
+): HTMLElement {
+  const container = document.createElement('div');
+  container.className = 'p-2 min-w-[250px] max-w-[350px]';
+
+  // Location name header
+  const header = document.createElement('div');
+  header.className = 'mb-3 pb-2 border-b border-gray-700';
+  const locationName = document.createElement('h3');
+  locationName.className = 'font-bold text-lg text-white';
+  locationName.textContent = `📍 ${spot.title}`;
+  header.appendChild(locationName);
+  container.appendChild(header);
+
+  // Spot/Shop Section
+  const spotSection = document.createElement('div');
+  spotSection.className = 'mb-3';
+  
+  const isShop = spot.types.includes('shop');
+  const spotIcon = isShop ? '🏪' : '🛹';
+  const spotLabel = isShop ? 'SKATE SHOP' : 'SKATE SPOT';
+  
+  const spotTitle = document.createElement('div');
+  spotTitle.className = 'font-bold text-sm text-gray-200 mb-2';
+  spotTitle.textContent = `${spotIcon} ${spotLabel}`;
+  spotSection.appendChild(spotTitle);
+
+  // Spot types
+  if (spot.types.length > 0) {
+    const typesContainer = document.createElement('div');
+    typesContainer.className = 'flex flex-wrap gap-1 mb-2';
+    spot.types.slice(0, 3).forEach((type) => {
+      const badge = document.createElement('span');
+      badge.className = 'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold bg-gray-800 text-gray-200 border-gray-600';
+      badge.textContent = SPOT_TYPE_LABELS[type] || type;
+      typesContainer.appendChild(badge);
+    });
+    spotSection.appendChild(typesContainer);
+  }
+
+  // View spot button
+  const spotButton = document.createElement('button');
+  spotButton.className = 'w-full inline-flex items-center justify-center rounded-md text-xs font-medium bg-red-500 text-white hover:bg-red-600 h-7 px-3 transition-colors mt-2';
+  spotButton.textContent = 'View Details →';
+  spotButton.onclick = (e) => {
+    e.preventDefault();
+    onViewDetails();
+  };
+  spotSection.appendChild(spotButton);
+
+  container.appendChild(spotSection);
+
+  // Marketplace Section (if items exist)
+  if (marketplaceItems.length > 0) {
+    const separator = document.createElement('div');
+    separator.className = 'border-t border-gray-700 my-3';
+    container.appendChild(separator);
+
+    const gearSection = document.createElement('div');
+    
+    const gearTitle = document.createElement('div');
+    gearTitle.className = 'font-bold text-sm text-orange-400 mb-2';
+    gearTitle.textContent = `🛒 GEAR FOR SALE (${marketplaceItems.length})`;
+    gearSection.appendChild(gearTitle);
+
+    // Show up to 3 items
+    const itemsList = document.createElement('div');
+    itemsList.className = 'space-y-2 mb-2';
+    
+    marketplaceItems.slice(0, 3).forEach((item) => {
+      const itemDiv = document.createElement('div');
+      itemDiv.className = 'text-xs text-gray-300';
+      
+      const price = formatPrice(item.price, item.priceType);
+      itemDiv.textContent = `• ${item.title} - ${price}`;
+      
+      itemsList.appendChild(itemDiv);
+    });
+    
+    gearSection.appendChild(itemsList);
+
+    // View all gear button
+    const gearButton = document.createElement('button');
+    gearButton.className = 'w-full inline-flex items-center justify-center rounded-md text-xs font-medium bg-orange-500 text-white hover:bg-orange-600 h-7 px-3 transition-colors';
+    gearButton.textContent = marketplaceItems.length > 3 ? `View All ${marketplaceItems.length} Items →` : 'View Gear →';
+    gearButton.onclick = (e) => {
+      e.preventDefault();
+      onViewDetails(); // Goes to spot page which has gear section
+    };
+    gearSection.appendChild(gearButton);
+
+    container.appendChild(gearSection);
+  }
+
+  return container;
+}
+
+export function SpotMap({
+  spots,
+  marketplaceItems = [],
+  tours = [],
+  btcMapPlaces = [],
+  center = [40.7128, -74.006], // Default to NYC
+  zoom = 3,
+  onSpotClick,
+  selectedSpot,
+  onMapClick,
+  onMapMove,
+  enableClickToAdd = false,
+  className,
+  weatherEnabled = false,
+  weatherData,
+  showSpots = true,
+  showShops = true,
+  showGear = true,
+  showTours = true,
+  showBtcMap = false,
+}: SpotMapProps) {
+  const mapRef = useRef<HTMLDivElement>(null);
+  const mapInstanceRef = useRef<L.Map | null>(null);
+  const markersRef = useRef<L.Marker[]>([]);
+  const btcMapMarkersRef = useRef<L.Marker[]>([]);
+  const onMapMoveRef = useRef(onMapMove);
+  const navigate = useNavigate();
+
+  // Keep the ref updated with latest callback
+  useEffect(() => {
+    onMapMoveRef.current = onMapMove;
+  }, [onMapMove]);
+
+  // Group all entities by location (geohash-8 for ~40m grouping)
+  // This ensures nearby but distinct spots each get their own marker
+  const locationGroups = useMemo(() => {
+    const groups = new Map<string, {
+      geohash: string;
+      lat: number;
+      lng: number;
+      spots: SkateSpot[];
+      marketplaceItems: MarketplaceItem[];
+    }>();
+
+    // Add spots
+    if (showSpots || showShops) {
+      spots?.filter((spot) => spot.geohash).forEach((spot) => {
+        const key = spot.geohash.slice(0, 8);
+        const { latitude, longitude } = ngeohash.decode(spot.geohash);
+        
+        if (!groups.has(key)) {
+          groups.set(key, {
+            geohash: key,
+            lat: latitude,
+            lng: longitude,
+            spots: [],
+            marketplaceItems: [],
+          });
+        }
+        
+        const isShop = spot.types.includes('shop');
+        if ((isShop && showShops) || (!isShop && showSpots)) {
+          groups.get(key)!.spots.push(spot);
+        }
+      });
+    }
+
+    // Add marketplace items (but NOT at shop-only locations)
+    if (showGear) {
+      marketplaceItems?.filter((item) => item.geohash).forEach((item) => {
+        const key = item.geohash!.slice(0, 8);
+        
+        if (!groups.has(key)) {
+          const { latitude, longitude } = ngeohash.decode(item.geohash!);
+          groups.set(key, {
+            geohash: key,
+            lat: latitude,
+            lng: longitude,
+            spots: [],
+            marketplaceItems: [],
+          });
+        }
+        
+        const group = groups.get(key)!;
+        
+        // IMPORTANT: Don't add gear to shop-only locations (conflict of interest)
+        // Only add gear if:
+        // 1. No spots at this location (standalone gear listing), OR
+        // 2. There's at least one regular (non-shop) spot at this location
+        const hasShopOnly = group.spots.length > 0 && group.spots.every(s => s.types.includes('shop'));
+        
+        if (!hasShopOnly) {
+          group.marketplaceItems.push(item);
+        }
+      });
+    }
+
+    return Array.from(groups.values()).filter(
+      group => group.spots.length > 0 || group.marketplaceItems.length > 0
+    );
+  }, [spots, marketplaceItems, showSpots, showShops, showGear]);
+
+  const handleViewDetails = useCallback((spot: SkateSpot) => {
+    // Check if this is a shop by looking at types
+    const isShop = spot.types.includes('shop');
+    const route = isShop ? '/shop' : '/spot';
+    navigate(`${route}/${spot.pubkey}/${spot.identifier}`);
+  }, [navigate]);
+
+  // Initialize map
+  useEffect(() => {
+    if (!mapRef.current || mapInstanceRef.current) return;
+
+    const map = L.map(mapRef.current, {
+      center,
+      zoom,
+      scrollWheelZoom: true,
+      attributionControl: false, // Remove attribution control
+    });
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '', // Remove attribution text
+    }).addTo(map);
+
+    // Add click handler if enabled
+    if (enableClickToAdd && onMapClick) {
+      map.on('click', (e) => {
+        onMapClick(e.latlng.lat, e.latlng.lng);
+      });
+    }
+
+    // Add moveend handler for BTC Map updates
+    map.on('moveend', () => {
+      const center = map.getCenter();
+      console.log('[SpotMap] Map moved to:', center.lat, center.lng);
+      onMapMoveRef.current?.({ lat: center.lat, lon: center.lng });
+    });
+
+    mapInstanceRef.current = map;
+
+    // Fix map size after initialization and ensure tiles are loaded
+    setTimeout(() => {
+      map.invalidateSize();
+      // Force a redraw to ensure everything is ready
+      map.whenReady(() => {
+        console.log('[SpotMap] Map is ready');
+        // Trigger initial map move event
+        const center = map.getCenter();
+        console.log('[SpotMap] Initial center:', center.lat, center.lng);
+        onMapMoveRef.current?.({ lat: center.lat, lon: center.lng });
+      });
+    }, 100);
+
+    return () => {
+      map.remove();
+      mapInstanceRef.current = null;
+    };
+  }, []);
+
+  // Fix map size when container resizes
+  useEffect(() => {
+    const map = mapInstanceRef.current;
+    if (!map || !mapRef.current) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      map.invalidateSize();
+    });
+
+    resizeObserver.observe(mapRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  // Update center when selectedSpot changes
+  useEffect(() => {
+    const map = mapInstanceRef.current;
+    if (!map) return;
+
+    if (selectedSpot && selectedSpot.geohash) {
+      const { latitude, longitude } = ngeohash.decode(selectedSpot.geohash);
+      map.setView([latitude, longitude], 15, { animate: true });
+    }
+  }, [selectedSpot]);
+
+  // Update markers
+  useEffect(() => {
+    const map = mapInstanceRef.current;
+    if (!map) return;
+
+    // Wait for map to be fully loaded before adding markers
+    if (!map.getContainer()) return;
+
+    // Clear existing markers
+    markersRef.current.forEach((marker) => marker.remove());
+    markersRef.current = [];
+
+    // Ensure we have location data before adding markers
+    if (locationGroups.length === 0) return;
+
+    console.log('[SpotMap] Adding', locationGroups.length, 'markers to map');
+
+    // Add new markers for each location group
+    locationGroups.forEach((group) => {
+      const hasSpots = group.spots.length > 0;
+      
+      // Determine primary spot (for popup)
+      const primarySpot = group.spots[0];
+      
+      // Check if primary spot is a shop
+      const isShop = primarySpot?.types.includes('shop');
+      // Check if location has BOTH shop type AND other skate spot types (like park, street, etc.)
+      const hasNonShopTypes = primarySpot?.types.some(t => t !== 'shop');
+      
+      // IMPORTANT: Don't show gear at shop-only locations (conflict of interest)
+      // Only show gear at regular skate spots or dual shop+spot locations
+      const canShowGear = hasNonShopTypes || !isShop;
+      const hasGear = canShowGear && group.marketplaceItems.length > 0;
+      const gearCount = hasGear ? group.marketplaceItems.length : 0;
+
+      // Determine icon based on what's at this location
+      let icon: L.DivIcon;
+      
+      if (isShop && hasNonShopTypes) {
+        // Location has shop type AND other spot types (e.g., park, street) - use dual icon
+        icon = createDualIcon(hasGear, gearCount);
+      } else if (isShop) {
+        // Shop only - just shop type, no other spot types
+        icon = createShopIcon();
+      } else if (hasSpots && !hasGear) {
+        // Regular spot only
+        const spotWeather = weatherEnabled && weatherData && primarySpot ? weatherData.get(primarySpot.geohash) : undefined;
+        if (spotWeather) {
+          icon = createSkateSpotIcon(spotWeather.skateability.color, spotWeather.weather.weatherIcon);
+        } else {
+          icon = createSkateSpotIcon();
+        }
+      } else if (!hasSpots && hasGear) {
+        // Gear only (no spot)
+        icon = createMarketplaceIcon(gearCount);
+      } else {
+        // Spot + gear - regular spot icon
+        const spotWeather = weatherEnabled && weatherData && primarySpot ? weatherData.get(primarySpot.geohash) : undefined;
+        if (spotWeather) {
+          icon = createSkateSpotIcon(spotWeather.skateability.color, spotWeather.weather.weatherIcon);
+        } else {
+          icon = createSkateSpotIcon();
+        }
+      }
+
+      const marker = L.marker([group.lat, group.lng], {
+        icon,
+      });
+
+      // Create popup
+      if (primarySpot) {
+        const spotWeather = weatherEnabled && weatherData ? weatherData.get(primarySpot.geohash) : undefined;
+        
+        // Use enhanced popup if there are marketplace items, otherwise use standard
+        const popupContent = hasGear 
+          ? createEnhancedPopupContent(primarySpot, group.marketplaceItems, () => handleViewDetails(primarySpot), spotWeather)
+          : createPopupContent(primarySpot, () => handleViewDetails(primarySpot), spotWeather);
+        
+        marker.bindPopup(popupContent, {
+          maxWidth: 350,
+          className: 'custom-popup',
+        });
+
+        marker.on('click', () => {
+          onSpotClick?.(primarySpot);
+        });
+      } else if (hasGear && !hasSpots) {
+        // Gear-only location (no spot) - create simple gear popup
+        const container = document.createElement('div');
+        container.className = 'p-2 min-w-[200px]';
+        
+        const title = document.createElement('h3');
+        title.className = 'font-bold text-sm text-orange-400 mb-2';
+        title.textContent = `🛒 GEAR FOR SALE (${gearCount})`;
+        container.appendChild(title);
+
+        const itemsList = document.createElement('div');
+        itemsList.className = 'space-y-1 mb-3';
+        
+        group.marketplaceItems.slice(0, 3).forEach((item) => {
+          const itemDiv = document.createElement('div');
+          itemDiv.className = 'text-xs text-gray-300';
+          const price = formatPrice(item.price, item.priceType);
+          itemDiv.textContent = `• ${item.title} - ${price}`;
+          itemsList.appendChild(itemDiv);
+        });
+        
+        container.appendChild(itemsList);
+
+        const button = document.createElement('button');
+        button.className = 'w-full inline-flex items-center justify-center rounded-md text-xs font-medium bg-orange-500 text-white hover:bg-orange-600 h-7 px-3 transition-colors';
+        button.textContent = 'View Items →';
+        button.onclick = (e) => {
+          e.preventDefault();
+          // Navigate to marketplace or first item's linked spot
+          const firstItem = group.marketplaceItems[0];
+          if (firstItem?.spotReference) {
+            const [, pubkey, identifier] = firstItem.spotReference.split(':');
+            navigate(`/spot/${pubkey}/${identifier}`);
+          } else {
+            navigate('/marketplace');
+          }
+        };
+        container.appendChild(button);
+
+        marker.bindPopup(container, {
+          maxWidth: 300,
+          className: 'custom-popup',
+        });
+      }
+
+      marker.addTo(map);
+      markersRef.current.push(marker);
+    });
+
+    // Add tour markers (separate from spot/shop markers)
+    if (showTours && tours.length > 0) {
+      console.log('[SpotMap] Adding', tours.length, 'tour markers');
+      
+      tours.forEach((tour) => {
+        // Use meeting point coords if available, otherwise decode geohash
+        let lat: number, lng: number;
+        
+        if (tour.meetingPointCoords) {
+          lat = tour.meetingPointCoords.lat;
+          lng = tour.meetingPointCoords.lon;
+        } else if (tour.geohash) {
+          const decoded = ngeohash.decode(tour.geohash);
+          lat = decoded.latitude;
+          lng = decoded.longitude;
+        } else {
+          return; // Skip tours without location
+        }
+
+        const tourMarker = L.marker([lat, lng], {
+          icon: createTourIcon(),
+        });
+
+        // Create tour popup
+        const container = document.createElement('div');
+        container.className = 'p-3 min-w-[250px] max-w-[300px]';
+        
+        // Tour header
+        const header = document.createElement('div');
+        header.className = 'flex items-start gap-2 mb-3';
+        header.innerHTML = `
+          <div class="w-10 h-10 rounded-lg bg-cyan-500/20 flex items-center justify-center flex-shrink-0">
+            <span class="text-lg">🛹</span>
+          </div>
+          <div class="flex-1 min-w-0">
+            <h3 class="font-bold text-base text-white leading-tight">${tour.title}</h3>
+            <p class="text-xs text-cyan-400 font-medium">LOCAL TOUR</p>
+          </div>
+        `;
+        container.appendChild(header);
+
+        // Tour details
+        const details = document.createElement('div');
+        details.className = 'space-y-1.5 mb-3 text-xs text-gray-300';
+        
+        if (tour.location) {
+          details.innerHTML += `<div class="flex items-center gap-2">📍 ${tour.location}</div>`;
+        }
+        if (tour.meetingPoint) {
+          details.innerHTML += `<div class="flex items-center gap-2">🚩 Meet at: ${tour.meetingPoint}</div>`;
+        }
+        if (tour.duration) {
+          details.innerHTML += `<div class="flex items-center gap-2">⏱️ ${tour.duration} hours</div>`;
+        }
+        if (tour.skillLevel) {
+          const skillEmoji = tour.skillLevel === 'beginner' ? '🌱' : tour.skillLevel === 'intermediate' ? '🔥' : tour.skillLevel === 'advanced' ? '💀' : '🛹';
+          details.innerHTML += `<div class="flex items-center gap-2">${skillEmoji} ${tour.skillLevel.charAt(0).toUpperCase() + tour.skillLevel.slice(1)} level</div>`;
+        }
+        if (tour.price) {
+          details.innerHTML += `<div class="flex items-center gap-2">⚡ ${tour.price.toLocaleString()} sats</div>`;
+        }
+        container.appendChild(details);
+
+        // Spot types badges
+        if (tour.spotTypes.length > 0) {
+          const badges = document.createElement('div');
+          badges.className = 'flex flex-wrap gap-1 mb-3';
+          tour.spotTypes.slice(0, 4).forEach((type) => {
+            const badge = document.createElement('span');
+            badge.className = 'inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold bg-cyan-500/20 text-cyan-300 border border-cyan-500/30';
+            badge.textContent = type;
+            badges.appendChild(badge);
+          });
+          container.appendChild(badges);
+        }
+
+        // View button
+        const button = document.createElement('button');
+        button.className = 'w-full inline-flex items-center justify-center rounded-md text-xs font-bold bg-cyan-500 text-white hover:bg-cyan-600 h-8 px-3 transition-colors';
+        button.textContent = 'View Tour →';
+        button.onclick = (e) => {
+          e.preventDefault();
+          navigate(`/tour/${tour.pubkey}/${tour.identifier}`);
+        };
+        container.appendChild(button);
+
+        tourMarker.bindPopup(container, {
+          maxWidth: 320,
+          className: 'custom-popup tour-popup',
+        });
+
+        tourMarker.addTo(map);
+        markersRef.current.push(tourMarker);
+      });
+    }
+  }, [locationGroups, tours, showTours, onSpotClick, handleViewDetails, weatherEnabled, weatherData, navigate]);
+
+  // Update BTC Map markers
+  useEffect(() => {
+    const map = mapInstanceRef.current;
+    if (!map) return;
+
+    // Clear existing BTC Map markers
+    btcMapMarkersRef.current.forEach((marker) => marker.remove());
+    btcMapMarkersRef.current = [];
+
+    // Don't add markers if BTC Map is disabled
+    if (!showBtcMap || btcMapPlaces.length === 0) return;
+
+    console.log('[SpotMap] Adding', btcMapPlaces.length, 'BTC Map markers');
+
+    btcMapPlaces.forEach((place) => {
+      const boosted = isBoosted(place.boosted_until);
+      const recentlyVerified = isRecentlyVerified(place.verified_at);
+
+      const marker = L.marker([place.lat, place.lon], {
+        icon: createBtcMapIcon(boosted),
+      });
+
+      // Create popup content
+      const container = document.createElement('div');
+      container.className = 'p-3 min-w-[220px] max-w-[300px]';
+
+      // Header with Bitcoin icon
+      const header = document.createElement('div');
+      header.className = 'flex items-start gap-2 mb-2';
+      header.innerHTML = `
+        <div class="w-8 h-8 rounded-lg bg-[#f7931a]/20 flex items-center justify-center flex-shrink-0">
+          <span class="text-lg">₿</span>
+        </div>
+        <div class="flex-1 min-w-0">
+          <h3 class="font-bold text-sm text-white leading-tight">${place.name}</h3>
+          <p class="text-[10px] text-[#f7931a] font-medium uppercase">Accepts Bitcoin</p>
+        </div>
+      `;
+      container.appendChild(header);
+
+      // Badges row
+      const badges = document.createElement('div');
+      badges.className = 'flex flex-wrap gap-1 mb-2';
+      if (boosted) {
+        badges.innerHTML += `<span class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold bg-yellow-500/20 text-yellow-300 border border-yellow-500/30">⭐ Boosted</span>`;
+      }
+      if (recentlyVerified) {
+        badges.innerHTML += `<span class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold bg-green-500/20 text-green-300 border border-green-500/30">✓ Verified</span>`;
+      }
+      if (badges.innerHTML) {
+        container.appendChild(badges);
+      }
+
+      // Details
+      const details = document.createElement('div');
+      details.className = 'space-y-1 mb-3 text-xs text-gray-300';
+      if (place.address) {
+        details.innerHTML += `<div class="flex items-start gap-1.5">📍 <span class="flex-1">${place.address}</span></div>`;
+      }
+      if (place.opening_hours) {
+        details.innerHTML += `<div class="flex items-start gap-1.5">🕐 <span class="flex-1">${place.opening_hours}</span></div>`;
+      }
+      if (place.phone) {
+        details.innerHTML += `<div class="flex items-start gap-1.5">📞 <a href="tel:${place.phone}" class="text-[#f7931a] hover:underline">${place.phone}</a></div>`;
+      }
+      if (place.description) {
+        details.innerHTML += `<div class="text-gray-400 text-[11px] mt-2 line-clamp-2">${place.description}</div>`;
+      }
+      container.appendChild(details);
+
+      // Action buttons
+      const actions = document.createElement('div');
+      actions.className = 'flex gap-2';
+
+      if (place.website) {
+        const websiteBtn = document.createElement('a');
+        websiteBtn.href = place.website;
+        websiteBtn.target = '_blank';
+        websiteBtn.rel = 'noopener noreferrer';
+        websiteBtn.className = 'flex-1 inline-flex items-center justify-center rounded-md text-xs font-medium bg-[#f7931a] text-white hover:bg-[#f7931a]/90 h-7 px-2 transition-colors';
+        websiteBtn.textContent = 'Website';
+        actions.appendChild(websiteBtn);
+      }
+
+      const btcMapBtn = document.createElement('a');
+      btcMapBtn.href = `https://btcmap.org/merchant/${place.id}`;
+      btcMapBtn.target = '_blank';
+      btcMapBtn.rel = 'noopener noreferrer';
+      btcMapBtn.className = `${place.website ? '' : 'flex-1 '}inline-flex items-center justify-center rounded-md text-xs font-medium bg-gray-700 text-white hover:bg-gray-600 h-7 px-2 transition-colors`;
+      btcMapBtn.textContent = 'BTC Map →';
+      actions.appendChild(btcMapBtn);
+
+      container.appendChild(actions);
+
+      marker.bindPopup(container, {
+        maxWidth: 320,
+        className: 'custom-popup btcmap-popup',
+      });
+
+      marker.addTo(map);
+      btcMapMarkersRef.current.push(marker);
+    });
+  }, [btcMapPlaces, showBtcMap]);
+
+  return (
+    <div className={className}>
+      <div className="relative h-full w-full">
+        <div ref={mapRef} className="h-full w-full rounded-xl" />
+        {/* OpenStreetMap Attribution */}
+        <div className="absolute bottom-2 left-2 z-[1000] bg-black/80 backdrop-blur px-2 py-1 rounded text-[10px] text-gray-400">
+          Map data ©{' '}
+          <a
+            href="https://www.openstreetmap.org/copyright"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-[#ccff00] hover:underline"
+          >
+            OpenStreetMap
+          </a>
+          {' '}contributors
+          {showBtcMap && (
+            <>
+              {' • '}
+              <a
+                href="https://btcmap.org"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[#f7931a] hover:underline"
+              >
+                BTC Map
+              </a>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/src/components/SpotOwnership.tsx b/src/src/components/SpotOwnership.tsx
new file mode 100644
index 0000000..9e7f55b
--- /dev/null
+++ b/src/src/components/SpotOwnership.tsx
@@ -0,0 +1,355 @@
+import { useState, useMemo } from 'react';
+import { UserPlus, AlertTriangle, Loader2, Crown, Clock } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useToast } from '@/hooks/useToast';
+import { useQueryClient } from '@tanstack/react-query';
+import { SKATE_SPOT_KIND, type SkateSpot } from '@/lib/types';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { nip19 } from 'nostr-tools';
+
+// 6 months in seconds
+const ABANDONED_THRESHOLD = 6 * 30 * 24 * 60 * 60;
+
+interface SpotOwnershipProps {
+  spot: SkateSpot;
+}
+
+/**
+ * Component that handles:
+ * 1. Transfer ownership (owner can transfer to another user)
+ * 2. Claim abandoned spot (any user can claim if owner inactive 6+ months)
+ */
+export function SpotOwnership({ spot }: SpotOwnershipProps) {
+  const { user } = useCurrentUser();
+  const { mutateAsync: publishEvent, isPending: isPublishing } = useNostrPublish();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const ownerProfile = useAuthor(spot.pubkey);
+  
+  const [transferOpen, setTransferOpen] = useState(false);
+  const [claimOpen, setClaimOpen] = useState(false);
+  const [recipientNpub, setRecipientNpub] = useState('');
+  
+  const isOwner = user && user.pubkey === spot.pubkey;
+  
+  // Check if spot is abandoned (owner hasn't updated in 6+ months)
+  const isAbandoned = useMemo(() => {
+    const now = Math.floor(Date.now() / 1000);
+    return (now - spot.createdAt) > ABANDONED_THRESHOLD;
+  }, [spot.createdAt]);
+  
+  // Calculate how long ago the spot was last updated
+  const lastUpdatedText = useMemo(() => {
+    const now = Math.floor(Date.now() / 1000);
+    const diff = now - spot.createdAt;
+    const days = Math.floor(diff / (24 * 60 * 60));
+    const months = Math.floor(days / 30);
+    const years = Math.floor(months / 12);
+    
+    if (years > 0) return `${years} year${years > 1 ? 's' : ''} ago`;
+    if (months > 0) return `${months} month${months > 1 ? 's' : ''} ago`;
+    return `${days} day${days > 1 ? 's' : ''} ago`;
+  }, [spot.createdAt]);
+  
+  const handleTransfer = async () => {
+    if (!recipientNpub.trim()) {
+      toast({
+        title: 'Recipient required',
+        description: 'Please enter the npub of the new owner.',
+        variant: 'destructive',
+      });
+      return;
+    }
+    
+    // Decode npub to get hex pubkey
+    let recipientPubkey: string;
+    try {
+      const decoded = nip19.decode(recipientNpub.trim());
+      if (decoded.type !== 'npub') {
+        throw new Error('Invalid npub format');
+      }
+      recipientPubkey = decoded.data;
+    } catch {
+      toast({
+        title: 'Invalid npub',
+        description: 'Please enter a valid npub address.',
+        variant: 'destructive',
+      });
+      return;
+    }
+    
+    if (recipientPubkey === spot.pubkey) {
+      toast({
+        title: 'Same owner',
+        description: 'Cannot transfer to the current owner.',
+        variant: 'destructive',
+      });
+      return;
+    }
+    
+    try {
+      // Publish a transfer event (kind 1111 comment with transfer marker)
+      await publishEvent({
+        kind: 1111,
+        content: `Ownership transfer request for spot "${spot.title}"`,
+        tags: [
+          ['a', `${SKATE_SPOT_KIND}:${spot.pubkey}:${spot.identifier}`],
+          ['K', String(SKATE_SPOT_KIND)],
+          ['t', 'spot-transfer'],
+          ['p', recipientPubkey, '', 'new-owner'],
+        ],
+      });
+      
+      toast({
+        title: 'Transfer requested',
+        description: 'The new owner will need to claim the spot to complete the transfer.',
+      });
+      
+      setTransferOpen(false);
+      setRecipientNpub('');
+      queryClient.invalidateQueries({ queryKey: ['spot-transfers', spot.pubkey, spot.identifier] });
+    } catch (error) {
+      toast({
+        title: 'Transfer failed',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+    }
+  };
+  
+  const handleClaim = async () => {
+    if (!user) return;
+    
+    try {
+      // Re-publish the spot under the new owner's pubkey
+      // This creates a new addressable event with the same d-tag but new owner
+      const eventTags: string[][] = [];
+      
+      // Copy all original tags except the ones we're changing
+      for (const tag of spot.event.tags) {
+        eventTags.push([...tag]);
+      }
+      
+      // Add claim reference
+      eventTags.push(['claim-from', spot.pubkey]);
+      eventTags.push(['claim-reason', isAbandoned ? 'abandoned' : 'transfer']);
+      
+      await publishEvent({
+        kind: SKATE_SPOT_KIND,
+        content: spot.description,
+        tags: eventTags,
+      });
+      
+      toast({
+        title: 'Spot claimed!',
+        description: 'You are now the owner of this spot. You can edit it from your profile.',
+      });
+      
+      setClaimOpen(false);
+      queryClient.invalidateQueries({ queryKey: ['skate-spots'] });
+      queryClient.invalidateQueries({ queryKey: ['skate-spot', spot.identifier] });
+    } catch (error) {
+      toast({
+        title: 'Claim failed',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+    }
+  };
+  
+  // Don't show anything for shops
+  if (spot.types.includes('shop')) {
+    return null;
+  }
+  
+  return (
+    <>
+      {/* Owner: Transfer button */}
+      {isOwner && (
+        <Dialog open={transferOpen} onOpenChange={setTransferOpen}>
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm" className="gap-2">
+              <UserPlus className="h-4 w-4" />
+              Transfer Ownership
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2">
+                <UserPlus className="h-5 w-5 text-[#ff0040]" />
+                Transfer Spot Ownership
+              </DialogTitle>
+              <DialogDescription>
+                Transfer "{spot.title}" to another user. This action cannot be undone.
+              </DialogDescription>
+            </DialogHeader>
+            
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <label className="text-sm font-medium">New Owner's npub</label>
+                <Input
+                  placeholder="npub1..."
+                  value={recipientNpub}
+                  onChange={(e) => setRecipientNpub(e.target.value)}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Enter the npub of the user you want to transfer this spot to.
+                </p>
+              </div>
+              
+              <Card className="bg-yellow-500/10 border-yellow-500/30">
+                <CardContent className="p-3">
+                  <div className="flex gap-2 text-yellow-500">
+                    <AlertTriangle className="h-5 w-5 flex-shrink-0" />
+                    <div className="text-sm">
+                      <p className="font-medium">Warning</p>
+                      <p className="text-yellow-400/80">
+                        After transfer, you will no longer be able to edit or delete this spot.
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+              
+              <div className="flex gap-2 justify-end">
+                <Button variant="outline" onClick={() => setTransferOpen(false)}>
+                  Cancel
+                </Button>
+                <Button
+                  onClick={handleTransfer}
+                  disabled={!recipientNpub.trim() || isPublishing}
+                  className="bg-[#ff0040] hover:bg-[#ff0040]/90"
+                >
+                  {isPublishing ? (
+                    <>
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                      Transferring...
+                    </>
+                  ) : (
+                    'Transfer Ownership'
+                  )}
+                </Button>
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+      )}
+      
+      {/* Non-owner: Claim abandoned spot */}
+      {!isOwner && isAbandoned && user && (
+        <Card className="bg-orange-500/10 border-2 border-orange-500/30">
+          <CardContent className="p-4">
+            <div className="flex items-start gap-3">
+              <Clock className="h-6 w-6 text-orange-500 flex-shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <h3 className="font-bold text-orange-400 uppercase text-sm mb-1">
+                  Spot May Be Abandoned
+                </h3>
+                <p className="text-xs text-gray-400 mb-3">
+                  Last updated {lastUpdatedText}. If the original owner is inactive, 
+                  you can claim this spot to maintain and improve it.
+                </p>
+                <Button
+                  size="sm"
+                  className="gap-2 bg-orange-500 hover:bg-orange-600 text-white"
+                  onClick={() => setClaimOpen(true)}
+                >
+                  <Crown className="h-4 w-4" />
+                  Claim This Spot
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+      
+      {/* Not logged in: Show login for abandoned spots */}
+      {!isOwner && isAbandoned && !user && (
+        <Card className="bg-orange-500/10 border-2 border-orange-500/30">
+          <CardContent className="p-4">
+            <div className="flex items-start gap-3">
+              <Clock className="h-6 w-6 text-orange-500 flex-shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <h3 className="font-bold text-orange-400 uppercase text-sm mb-1">
+                  Spot May Be Abandoned
+                </h3>
+                <p className="text-xs text-gray-400 mb-3">
+                  Last updated {lastUpdatedText}. Log in to claim and maintain this spot.
+                </p>
+                <LoginArea className="justify-start" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+      
+      {/* Claim confirmation dialog */}
+      <AlertDialog open={claimOpen} onOpenChange={setClaimOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="flex items-center gap-2">
+              <Crown className="h-5 w-5 text-orange-500" />
+              Claim "{spot.title}"?
+            </AlertDialogTitle>
+            <AlertDialogDescription asChild>
+              <div className="space-y-3">
+                <p>
+                  You're about to claim ownership of this spot. This will create your own 
+                  version of the spot that you can edit and maintain.
+                </p>
+                <div className="bg-muted p-3 rounded-lg text-sm">
+                  <p className="font-medium mb-1">What happens when you claim:</p>
+                  <ul className="list-disc list-inside text-muted-foreground space-y-1">
+                    <li>You become the owner and can edit the spot</li>
+                    <li>The original spot remains (Nostr is decentralized)</li>
+                    <li>Your version may appear alongside the original</li>
+                  </ul>
+                </div>
+              </div>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleClaim}
+              disabled={isPublishing}
+              className="bg-orange-500 hover:bg-orange-600"
+            >
+              {isPublishing ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Claiming...
+                </>
+              ) : (
+                'Claim Spot'
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
diff --git a/src/src/components/SpotPicker.tsx b/src/src/components/SpotPicker.tsx
new file mode 100644
index 0000000..c24b6ed
--- /dev/null
+++ b/src/src/components/SpotPicker.tsx
@@ -0,0 +1,198 @@
+import { useState, useMemo } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { useSkateSpots } from '@/hooks/useSkateSpots';
+import { MapPin, Search, X, Plus } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface SpotPickerProps {
+  selectedSpots: string[]; // Array of "pubkey:identifier" strings
+  onSpotsChange: (spots: string[]) => void;
+  maxSpots?: number;
+  label?: string;
+  description?: string;
+}
+
+export function SpotPicker({
+  selectedSpots,
+  onSpotsChange,
+  maxSpots = 5,
+  label = 'Spots Where You\'re Available',
+  description = 'Select spots where you offer your services',
+}: SpotPickerProps) {
+  const { data: allSpots } = useSkateSpots(100);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Filter spots for search
+  const filteredSpots = useMemo(() => {
+    if (!allSpots) return [];
+    if (!searchQuery) return allSpots.slice(0, 10);
+    
+    const query = searchQuery.toLowerCase();
+    return allSpots
+      .filter(s => 
+        s.title.toLowerCase().includes(query) ||
+        s.location?.toLowerCase().includes(query)
+      )
+      .slice(0, 10);
+  }, [allSpots, searchQuery]);
+
+  // Get selected spot details
+  const selectedSpotDetails = useMemo(() => {
+    if (!allSpots) return [];
+    return selectedSpots
+      .map(spotId => {
+        const [pubkey, identifier] = spotId.split(':');
+        return allSpots.find(s => s.pubkey === pubkey && s.identifier === identifier);
+      })
+      .filter(Boolean);
+  }, [allSpots, selectedSpots]);
+
+  const toggleSpot = (pubkey: string, identifier: string) => {
+    const spotId = `${pubkey}:${identifier}`;
+    if (selectedSpots.includes(spotId)) {
+      onSpotsChange(selectedSpots.filter(id => id !== spotId));
+    } else if (selectedSpots.length < maxSpots) {
+      onSpotsChange([...selectedSpots, spotId]);
+    }
+  };
+
+  const removeSpot = (spotId: string) => {
+    onSpotsChange(selectedSpots.filter(id => id !== spotId));
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <div>
+          <Label className="text-base font-bold">{label}</Label>
+          <p className="text-sm text-muted-foreground mt-0.5">{description}</p>
+        </div>
+        <Badge variant="outline" className="text-xs">
+          {selectedSpots.length}/{maxSpots}
+        </Badge>
+      </div>
+
+      {/* Selected spots */}
+      {selectedSpotDetails.length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {selectedSpotDetails.map((spot) => spot && (
+            <Badge
+              key={`${spot.pubkey}:${spot.identifier}`}
+              variant="secondary"
+              className="gap-1.5 py-1.5 px-3 bg-[#ff0040]/10 border border-[#ff0040]/30 text-[#ff0040]"
+            >
+              <MapPin className="h-3 w-3" />
+              {spot.title}
+              <button
+                type="button"
+                onClick={() => removeSpot(`${spot.pubkey}:${spot.identifier}`)}
+                className="ml-1 hover:bg-[#ff0040]/20 rounded-full p-0.5"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+
+      {/* Add spot button / expanded picker */}
+      {selectedSpots.length < maxSpots && (
+        <>
+          {!isExpanded ? (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="gap-2 border-dashed"
+              onClick={() => setIsExpanded(true)}
+            >
+              <Plus className="h-4 w-4" />
+              Add Spot
+            </Button>
+          ) : (
+            <Card className="bg-gray-900/50 border-gray-700">
+              <CardContent className="p-3 space-y-3">
+                <div className="flex items-center gap-2">
+                  <div className="relative flex-1">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500" />
+                    <Input
+                      placeholder="Search spots..."
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      className="bg-gray-800 border-gray-700 pl-9 h-9"
+                    />
+                  </div>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      setIsExpanded(false);
+                      setSearchQuery('');
+                    }}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+
+                <div className="max-h-48 overflow-y-auto space-y-1.5">
+                  {filteredSpots.map((spot) => {
+                    const spotId = `${spot.pubkey}:${spot.identifier}`;
+                    const isSelected = selectedSpots.includes(spotId);
+                    
+                    return (
+                      <button
+                        key={spotId}
+                        type="button"
+                        className={cn(
+                          'w-full flex items-center gap-2 p-2 rounded-lg text-left transition-colors text-sm',
+                          isSelected
+                            ? 'bg-[#ff0040]/20 border border-[#ff0040]/50'
+                            : 'hover:bg-gray-800 border border-transparent'
+                        )}
+                        onClick={() => toggleSpot(spot.pubkey, spot.identifier)}
+                        disabled={!isSelected && selectedSpots.length >= maxSpots}
+                      >
+                        <MapPin className={cn(
+                          'h-4 w-4 flex-shrink-0',
+                          isSelected ? 'text-[#ff0040]' : 'text-gray-500'
+                        )} />
+                        <div className="flex-1 min-w-0">
+                          <div className="font-medium truncate">{spot.title}</div>
+                          {spot.location && (
+                            <div className="text-xs text-gray-400 truncate">{spot.location}</div>
+                          )}
+                        </div>
+                        {isSelected && (
+                          <Badge variant="outline" className="text-[10px] border-[#ff0040]/50 text-[#ff0040]">
+                            Selected
+                          </Badge>
+                        )}
+                      </button>
+                    );
+                  })}
+                  {filteredSpots.length === 0 && (
+                    <p className="text-sm text-gray-400 text-center py-4">
+                      No spots found. Try a different search.
+                    </p>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </>
+      )}
+
+      {selectedSpots.length === 0 && (
+        <p className="text-xs text-gray-400 italic">
+          Adding spots helps users find you when browsing specific locations
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/src/src/components/TagInput.tsx b/src/src/components/TagInput.tsx
new file mode 100644
index 0000000..46a0ab6
--- /dev/null
+++ b/src/src/components/TagInput.tsx
@@ -0,0 +1,195 @@
+import { useState, useRef, useEffect, KeyboardEvent } from 'react';
+import { X, Hash, AlertTriangle } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+import {
+  searchTags,
+  normalizeTag,
+  isCuratedTag,
+  MAX_TAGS,
+} from '@/lib/skateTags';
+
+interface TagInputProps {
+  tags: string[];
+  onChange: (tags: string[]) => void;
+  placeholder?: string;
+  maxTags?: number;
+  className?: string;
+  disabled?: boolean;
+}
+
+export function TagInput({
+  tags,
+  onChange,
+  placeholder = 'Add tags...',
+  maxTags = MAX_TAGS,
+  className,
+  disabled = false,
+}: TagInputProps) {
+  const [inputValue, setInputValue] = useState('');
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Update suggestions when input changes
+  useEffect(() => {
+    if (inputValue.trim()) {
+      const results = searchTags(inputValue, 8).filter(
+        (tag) => !tags.includes(tag)
+      );
+      setSuggestions(results);
+      setShowSuggestions(results.length > 0);
+      setSelectedIndex(-1);
+    } else {
+      setSuggestions([]);
+      setShowSuggestions(false);
+    }
+  }, [inputValue, tags]);
+
+  // Close suggestions when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setShowSuggestions(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const addTag = (tag: string) => {
+    const normalized = normalizeTag(tag);
+    if (normalized && !tags.includes(normalized) && tags.length < maxTags) {
+      onChange([...tags, normalized]);
+      setInputValue('');
+      setShowSuggestions(false);
+      inputRef.current?.focus();
+    }
+  };
+
+  const removeTag = (tagToRemove: string) => {
+    onChange(tags.filter((tag) => tag !== tagToRemove));
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      if (selectedIndex >= 0 && selectedIndex < suggestions.length) {
+        addTag(suggestions[selectedIndex]);
+      } else if (inputValue.trim()) {
+        addTag(inputValue);
+      }
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setSelectedIndex((prev) =>
+        prev < suggestions.length - 1 ? prev + 1 : prev
+      );
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : -1));
+    } else if (e.key === 'Escape') {
+      setShowSuggestions(false);
+    } else if (e.key === 'Backspace' && !inputValue && tags.length > 0) {
+      removeTag(tags[tags.length - 1]);
+    } else if (e.key === ',' || e.key === ' ') {
+      if (inputValue.trim()) {
+        e.preventDefault();
+        addTag(inputValue);
+      }
+    }
+  };
+
+  const isAtLimit = tags.length >= maxTags;
+
+  return (
+    <div ref={containerRef} className={cn('relative', className)}>
+      {/* Tags display */}
+      <div className="flex flex-wrap gap-1.5 mb-2">
+        {tags.map((tag) => {
+          const isCurated = isCuratedTag(tag);
+          return (
+            <Badge
+              key={tag}
+              variant={isCurated ? 'secondary' : 'outline'}
+              className={cn(
+                'pl-2 pr-1 py-1 text-sm flex items-center gap-1',
+                isCurated
+                  ? 'bg-[#ccff00]/20 text-[#ccff00] border-[#ccff00]/30'
+                  : 'bg-yellow-500/10 text-yellow-400 border-yellow-500/30'
+              )}
+            >
+              <Hash className="h-3 w-3" />
+              {tag}
+              {!isCurated && (
+                <AlertTriangle className="h-3 w-3 ml-0.5 text-yellow-500" />
+              )}
+              <button
+                type="button"
+                onClick={() => removeTag(tag)}
+                className="ml-1 hover:bg-white/10 rounded p-0.5"
+                disabled={disabled}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </Badge>
+          );
+        })}
+      </div>
+
+      {/* Input */}
+      <div className="relative">
+        <Hash className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input
+          ref={inputRef}
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={isAtLimit ? `Max ${maxTags} tags reached` : placeholder}
+          disabled={disabled || isAtLimit}
+          className="pl-9"
+        />
+      </div>
+
+      {/* Tag count */}
+      <div className="mt-1.5">
+        <p className="text-xs text-muted-foreground">
+          {tags.length}/{maxTags} tags
+          {tags.some((t) => !isCuratedTag(t)) && (
+            <span className="text-yellow-500 ml-2">
+              <AlertTriangle className="h-3 w-3 inline mr-1" />
+              Custom tags detected
+            </span>
+          )}
+        </p>
+      </div>
+
+      {/* Autocomplete suggestions */}
+      {showSuggestions && suggestions.length > 0 && (
+        <div className="absolute z-50 w-full mt-1 bg-black border border-gray-700 rounded-lg shadow-lg max-h-48 overflow-y-auto">
+          {suggestions.map((suggestion, index) => (
+            <button
+              key={suggestion}
+              type="button"
+              className={cn(
+                'w-full px-3 py-2 text-left text-sm flex items-center gap-2 hover:bg-gray-800',
+                index === selectedIndex && 'bg-gray-800'
+              )}
+              onClick={() => addTag(suggestion)}
+            >
+              <Hash className="h-3 w-3 text-[#ccff00]" />
+              {suggestion}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default TagInput;
diff --git a/src/src/components/ThemeToggle.tsx b/src/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..990651f
--- /dev/null
+++ b/src/src/components/ThemeToggle.tsx
@@ -0,0 +1,19 @@
+import { Moon, Sun } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useTheme } from '@/hooks/useTheme';
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+    >
+      <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
+}
diff --git a/src/src/components/TourCard.tsx b/src/src/components/TourCard.tsx
new file mode 100644
index 0000000..011ba40
--- /dev/null
+++ b/src/src/components/TourCard.tsx
@@ -0,0 +1,452 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Route, Clock, MapPin, Users, Zap, Globe, Calendar, Trophy, Skull, MoreVertical, Flag } from 'lucide-react';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { genUserName } from '@/lib/genUserName';
+import { ZapButton } from '@/components/ZapButton';
+import { TrustBadge } from '@/components/TrustBadge';
+import { ReportDialog } from '@/components/ReportDialog';
+
+import type { SkateTour, TourCategory } from '@/lib/types';
+import { TOUR_CATEGORIES, TOUR_SKILL_LEVELS } from '@/lib/types';
+import { cn } from '@/lib/utils';
+
+interface TourCardProps {
+  tour: SkateTour;
+  compact?: boolean;
+}
+
+function getCategoryIcon(category: TourCategory) {
+  switch (category) {
+    case 'local':
+      return <Route className="h-4 w-4" />;
+    case 'national':
+      return <Route className="h-4 w-4" />;
+    case 'international':
+      return <Globe className="h-4 w-4" />;
+    case 'destruction':
+      return <Skull className="h-4 w-4" />;
+    default:
+      return <Route className="h-4 w-4" />;
+  }
+}
+
+function formatDuration(duration?: number, unit?: string): string {
+  if (!duration) return '';
+  
+  switch (unit) {
+    case 'hours':
+      return `${duration} hr${duration > 1 ? 's' : ''}`;
+    case 'days':
+      return `${duration} day${duration > 1 ? 's' : ''}`;
+    case 'weeks':
+      return duration >= 4 ? `${Math.floor(duration / 4)} month${Math.floor(duration / 4) > 1 ? 's' : ''}` : `${duration} week${duration > 1 ? 's' : ''}`;
+    default:
+      return `${duration}`;
+  }
+}
+
+function formatDateRange(startDate?: number, endDate?: number): string {
+  if (!startDate) return '';
+  
+  const start = new Date(startDate * 1000);
+  const startStr = start.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  
+  if (!endDate) return startStr;
+  
+  const end = new Date(endDate * 1000);
+  const endStr = end.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+  
+  return `${startStr} - ${endStr}`;
+}
+
+function getTourStatus(tour: SkateTour): { label: string; color: string } | null {
+  if (tour.category !== 'destruction') return null;
+  
+  const now = Date.now() / 1000;
+  
+  if (tour.startDate && now < tour.startDate) {
+    return { label: 'Registration Open', color: '#ccff00' };
+  } else if (tour.startDate && tour.endDate && now >= tour.startDate && now <= tour.endDate) {
+    return { label: 'Active', color: '#ff0040' };
+  } else if (tour.endDate && now > tour.endDate) {
+    return { label: 'Completed', color: '#888' };
+  }
+  
+  return null;
+}
+
+export function TourCard({ tour, compact = false }: TourCardProps) {
+  const author = useAuthor(tour.pubkey);
+  const { user } = useCurrentUser();
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(tour.pubkey);
+  const [showReportDialog, setShowReportDialog] = useState(false);
+  
+  const categoryInfo = TOUR_CATEGORIES[tour.category];
+  const skillInfo = tour.skillLevel ? TOUR_SKILL_LEVELS[tour.skillLevel as keyof typeof TOUR_SKILL_LEVELS] : null;
+  const tourStatus = getTourStatus(tour);
+  const isOwner = user?.pubkey === tour.pubkey;
+  
+  // Get location text based on category
+  const locationText = tour.category === 'destruction' || tour.category === 'international'
+    ? tour.countries?.join(', ') || tour.cities?.join(', ') || 'Worldwide'
+    : tour.location || tour.cities?.join(', ');
+
+  if (compact) {
+    return (
+      <Link to={`/tour/${tour.pubkey}/${tour.identifier}`}>
+        <Card 
+          className="group hover:shadow-2xl transition-all duration-300 border-2 bg-black/90 backdrop-blur"
+          style={{ 
+            borderColor: `${categoryInfo.color}33`,
+            boxShadow: `0 0 0 0 ${categoryInfo.color}00`
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.borderColor = `${categoryInfo.color}99`;
+            e.currentTarget.style.boxShadow = `0 10px 40px ${categoryInfo.color}33`;
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.borderColor = `${categoryInfo.color}33`;
+            e.currentTarget.style.boxShadow = `0 0 0 0 ${categoryInfo.color}00`;
+          }}
+        >
+          <CardContent className="p-4">
+            <div className="flex items-start gap-4">
+              {/* Category Badge */}
+              <div 
+                className="flex-shrink-0 w-14 h-14 rounded-lg flex flex-col items-center justify-center"
+                style={{ backgroundColor: `${categoryInfo.color}20`, border: `2px solid ${categoryInfo.color}80` }}
+              >
+                <span className="text-xl">{categoryInfo.emoji}</span>
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-start justify-between gap-2 mb-1">
+                  <h3 
+                    className="font-bold text-white transition-colors line-clamp-1 uppercase tracking-wide"
+                    style={{ color: 'white' }}
+                  >
+                    {tour.title}
+                  </h3>
+                  {tourStatus && (
+                    <Badge 
+                      className="flex-shrink-0 text-xs border-0 font-bold uppercase"
+                      style={{ backgroundColor: tourStatus.color, color: tourStatus.color === '#ccff00' ? 'black' : 'white' }}
+                    >
+                      {tourStatus.label}
+                    </Badge>
+                  )}
+                </div>
+
+                <div className="flex items-center gap-2 text-xs text-gray-400 flex-wrap">
+                  <Badge 
+                    variant="outline" 
+                    className="text-[10px] px-1.5 py-0 font-bold"
+                    style={{ borderColor: categoryInfo.color, color: categoryInfo.color }}
+                  >
+                    {categoryInfo.label}
+                  </Badge>
+                  {tour.duration && (
+                    <span className="flex items-center gap-1">
+                      <Clock className="h-3 w-3" style={{ color: categoryInfo.color }} />
+                      {formatDuration(tour.duration, tour.durationUnit)}
+                    </span>
+                  )}
+                  {locationText && (
+                    <span className="flex items-center gap-1 truncate">
+                      <MapPin className="h-3 w-3 flex-shrink-0 text-[#ff0040]" />
+                      <span className="truncate">{locationText}</span>
+                    </span>
+                  )}
+                  <TrustBadge pubkey={tour.pubkey} size="sm" />
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </Link>
+    );
+  }
+
+  return (
+    <Link to={`/tour/${tour.pubkey}/${tour.identifier}`}>
+      <Card 
+        className="group overflow-hidden transition-all duration-300 border-2 bg-black/90 backdrop-blur"
+        style={{ 
+          borderColor: `${categoryInfo.color}33`,
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.borderColor = `${categoryInfo.color}80`;
+          e.currentTarget.style.boxShadow = `0 20px 50px ${categoryInfo.color}20`;
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.borderColor = `${categoryInfo.color}33`;
+          e.currentTarget.style.boxShadow = 'none';
+        }}
+      >
+        {/* Image */}
+        <div className="relative aspect-[16/9] overflow-hidden bg-muted">
+          {tour.image ? (
+            <img
+              src={tour.image}
+              alt={tour.title}
+              className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+            />
+          ) : (
+            <div 
+              className="w-full h-full flex items-center justify-center"
+              style={{ background: `linear-gradient(135deg, ${categoryInfo.color}20 0%, ${categoryInfo.color}05 100%)` }}
+            >
+              {tour.category === 'destruction' ? (
+                <Skull className="h-16 w-16" style={{ color: `${categoryInfo.color}40` }} />
+              ) : (
+                <Route className="h-16 w-16" style={{ color: `${categoryInfo.color}40` }} />
+              )}
+            </div>
+          )}
+          
+          {/* Category overlay */}
+          <div className="absolute top-3 left-3">
+            <Badge 
+              className="backdrop-blur-sm shadow-lg font-bold text-xs uppercase"
+              style={{ 
+                backgroundColor: `${categoryInfo.color}dd`,
+                color: categoryInfo.color === '#ccff00' ? 'black' : 'white'
+              }}
+            >
+              {categoryInfo.emoji} {categoryInfo.label}
+            </Badge>
+          </div>
+          
+          {/* Status/Price overlay */}
+          <div className="absolute top-3 right-3 flex flex-col gap-1 items-end">
+            {tourStatus && (
+              <Badge 
+                className="backdrop-blur-sm shadow-lg font-bold text-xs uppercase"
+                style={{ 
+                  backgroundColor: `${tourStatus.color}dd`,
+                  color: tourStatus.color === '#ccff00' ? 'black' : 'white'
+                }}
+              >
+                {tourStatus.label}
+              </Badge>
+            )}
+            {tour.prizePool && (
+              <Badge className="bg-orange-500/90 backdrop-blur-sm shadow-lg font-bold text-xs">
+                <Trophy className="h-3 w-3 mr-1" />
+                {tour.prizePool.toLocaleString()} sats
+              </Badge>
+            )}
+          </div>
+        </div>
+
+        <CardHeader className="pb-2">
+          {/* Guide/Organizer info */}
+          <div className="mb-3 pb-2 border-b" style={{ borderColor: `${categoryInfo.color}33` }}>
+            <div className="flex items-center gap-2">
+              <Avatar className="h-8 w-8" style={{ border: `1px solid ${categoryInfo.color}50` }}>
+                <AvatarImage src={metadata?.picture} alt={displayName} />
+                <AvatarFallback className="text-xs" style={{ backgroundColor: `${categoryInfo.color}20`, color: categoryInfo.color }}>
+                  {displayName.slice(0, 2).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <h4 className="font-bold text-white text-sm truncate">{displayName}</h4>
+                  <TrustBadge pubkey={tour.pubkey} size="sm" />
+                </div>
+                {metadata?.nip05 && (
+                  <div className="flex items-center gap-1 text-xs">
+                    <div className="w-1.5 h-1.5 rounded-full bg-[#ccff00]" />
+                    <span className="text-[#ccff00] font-bold truncate">{metadata.nip05}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-start justify-between gap-2">
+            <h3 
+              className="font-bold text-lg leading-tight text-white transition-colors line-clamp-2 uppercase"
+            >
+              {tour.title}
+            </h3>
+          </div>
+
+          {/* Tour dates for destruction tours */}
+          {tour.category === 'destruction' && tour.startDate && (
+            <div className="flex items-center gap-2 text-sm text-gray-400">
+              <Calendar className="h-4 w-4" style={{ color: categoryInfo.color }} />
+              <span>{formatDateRange(tour.startDate, tour.endDate)}</span>
+            </div>
+          )}
+
+          {/* Tour meta info */}
+          <div className="flex flex-wrap items-center gap-3 text-sm text-gray-400">
+            {tour.duration && (
+              <span className="flex items-center gap-1">
+                <Clock className="h-4 w-4" style={{ color: categoryInfo.color }} />
+                {formatDuration(tour.duration, tour.durationUnit)}
+              </span>
+            )}
+            {tour.maxGroupSize && (
+              <span className="flex items-center gap-1">
+                <Users className="h-4 w-4 text-[#ff6600]" />
+                Max {tour.maxGroupSize}
+              </span>
+            )}
+            {tour.maxTeams && (
+              <span className="flex items-center gap-1">
+                <Users className="h-4 w-4 text-[#ff6600]" />
+                {tour.maxTeams} teams max
+              </span>
+            )}
+            {skillInfo && (
+              <span className="flex items-center gap-1">
+                <span>{skillInfo.emoji}</span>
+                {skillInfo.label}
+              </span>
+            )}
+          </div>
+
+          {locationText && (
+            <p className="text-sm text-gray-400 flex items-center gap-1 line-clamp-1">
+              <MapPin className="h-4 w-4 flex-shrink-0 text-[#ff0040]" />
+              {locationText}
+            </p>
+          )}
+        </CardHeader>
+
+        <CardContent className="pb-4">
+          {tour.description && (
+            <p className="text-sm text-gray-400 line-clamp-2">
+              {tour.description}
+            </p>
+          )}
+
+          {/* Price or Entry Fee */}
+          <div className="flex items-center justify-between mt-4 pt-4 border-t" style={{ borderColor: `${categoryInfo.color}33` }}>
+            <div className="flex items-center gap-2">
+              {tour.category === 'destruction' && tour.entryFee ? (
+                <Badge variant="outline" className="border-orange-500/50 text-orange-400">
+                  <Zap className="h-3 w-3 mr-1" />
+                  Entry: {tour.entryFee.toLocaleString()} sats
+                </Badge>
+              ) : tour.price ? (
+                <Badge variant="outline" className="border-orange-500/50 text-orange-400">
+                  <Zap className="h-3 w-3 mr-1" />
+                  {tour.price.toLocaleString()} sats
+                </Badge>
+              ) : (
+                <Badge variant="outline" className="border-green-500/50 text-green-400">
+                  Contact for price
+                </Badge>
+              )}
+            </div>
+            <div className="flex items-center gap-2" onClick={(e) => e.preventDefault()}>
+              <ZapButton target={tour.event} className="text-gray-400 hover:text-[#ccff00]" />
+              {/* More options menu */}
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    className="h-8 w-8 text-gray-400 hover:text-white"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <MoreVertical className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-40">
+                  {!isOwner && (
+                    <DropdownMenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setShowReportDialog(true);
+                      }}
+                      className="text-red-500 focus:text-red-500"
+                    >
+                      <Flag className="h-4 w-4 mr-2" />
+                      Report
+                    </DropdownMenuItem>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Report Dialog */}
+      <ReportDialog
+        open={showReportDialog}
+        onOpenChange={setShowReportDialog}
+        targetType="tour"
+        targetPubkey={tour.pubkey}
+        targetEventId={tour.id}
+        targetTitle={tour.title}
+      />
+    </Link>
+  );
+}
+
+export function TourCardSkeleton({ compact = false }: { compact?: boolean }) {
+  if (compact) {
+    return (
+      <Card className="border-2 border-gray-800">
+        <CardContent className="p-4">
+          <div className="flex items-start gap-4">
+            <Skeleton className="w-14 h-14 rounded-lg" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-5 w-3/4" />
+              <Skeleton className="h-4 w-1/2" />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="overflow-hidden border-2 border-gray-800">
+      <Skeleton className="aspect-[16/9] w-full" />
+      <CardHeader className="pb-2">
+        <div className="flex items-center gap-2 mb-3 pb-2 border-b border-gray-800">
+          <Skeleton className="w-8 h-8 rounded-full" />
+          <div className="flex-1 space-y-1">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-3 w-32" />
+          </div>
+        </div>
+        <Skeleton className="h-6 w-3/4" />
+        <Skeleton className="h-4 w-1/2" />
+        <Skeleton className="h-4 w-2/3" />
+      </CardHeader>
+      <CardContent className="pb-4">
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-4/5" />
+        </div>
+        <div className="flex items-center justify-between mt-4 pt-4 border-t border-gray-800">
+          <Skeleton className="h-6 w-24" />
+          <Skeleton className="h-8 w-8 rounded-full" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/src/components/TrustBadge.tsx b/src/src/components/TrustBadge.tsx
new file mode 100644
index 0000000..b5538a5
--- /dev/null
+++ b/src/src/components/TrustBadge.tsx
@@ -0,0 +1,78 @@
+import { Badge } from '@/components/ui/badge';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Shield, CheckCircle2, AlertCircle } from 'lucide-react';
+import { useTrustScore, getTrustBadgeConfig } from '@/hooks/useTrustScore';
+import { cn } from '@/lib/utils';
+
+interface TrustBadgeProps {
+  pubkey: string | undefined;
+  className?: string;
+  showLabel?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+/**
+ * TrustBadge component displays a visual trust score indicator for a Nostr user.
+ * 
+ * Trust levels:
+ * - 100: Self (your own content)
+ * - 90: Direct follow
+ * - 60: Friend-of-friend
+ * - 30: NIP-05 verified
+ * - 0: Unknown/unverified
+ */
+export function TrustBadge({ pubkey, className, showLabel = true, size = 'sm' }: TrustBadgeProps) {
+  const { data: trustScore, isLoading } = useTrustScore(pubkey);
+  const badge = getTrustBadgeConfig(trustScore);
+
+  if (isLoading || !badge.show) {
+    return null;
+  }
+
+  const sizeClasses = {
+    sm: 'text-[9px] px-1.5 py-0 h-4 gap-0.5',
+    md: 'text-xs px-2 py-0.5 h-5 gap-1',
+    lg: 'text-sm px-3 py-1 h-6 gap-1.5',
+  };
+
+  const iconSizes = {
+    sm: 'h-2.5 w-2.5',
+    md: 'h-3 w-3',
+    lg: 'h-4 w-4',
+  };
+
+  const getTooltipText = (score: number | undefined) => {
+    if (score === undefined) return 'Trust score unavailable';
+    if (score === 100) return 'This is your content';
+    if (score >= 90) return 'You follow this user';
+    if (score >= 60) return 'Friend of a friend (2 hops)';
+    if (score >= 30) return 'NIP-05 verified user';
+    return 'Unknown user';
+  };
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Badge 
+            variant={badge.variant}
+            className={cn(sizeClasses[size], badge.className, className, 'cursor-help select-none')}
+          >
+            {badge.icon === 'check' && <CheckCircle2 className={iconSizes[size]} />}
+            {badge.icon === 'shield' && <Shield className={iconSizes[size]} />}
+            {!badge.icon && <AlertCircle className={iconSizes[size]} />}
+            {showLabel && <span className="font-bold uppercase">{badge.label}</span>}
+          </Badge>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" className="max-w-xs">
+          <div className="space-y-1">
+            <p className="font-bold">{getTooltipText(trustScore)}</p>
+            <p className="text-xs text-muted-foreground">
+              Trust scores help identify reliable contributors in the skateboarding community.
+            </p>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
diff --git a/src/src/components/TrustFilter.tsx b/src/src/components/TrustFilter.tsx
new file mode 100644
index 0000000..a024996
--- /dev/null
+++ b/src/src/components/TrustFilter.tsx
@@ -0,0 +1,161 @@
+import { Shield, CheckCircle2, Users } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuCheckboxItem,
+  DropdownMenuTrigger,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+
+export type TrustFilterLevel = 'all' | 'verified' | 'trusted' | 'following';
+
+interface TrustFilterProps {
+  value: TrustFilterLevel;
+  onChange: (value: TrustFilterLevel) => void;
+  className?: string;
+  compact?: boolean;
+}
+
+const TRUST_LEVELS = [
+  {
+    value: 'all' as const,
+    label: 'All Users',
+    description: 'Show content from everyone',
+    icon: Users,
+    color: 'text-gray-400',
+  },
+  {
+    value: 'verified' as const,
+    label: 'Verified',
+    description: 'You follow them or they are verified (trust ≥90)',
+    icon: CheckCircle2,
+    color: 'text-green-500',
+  },
+  {
+    value: 'trusted' as const,
+    label: 'Trusted',
+    description: 'Friends-of-friends or NIP-05 verified (trust ≥60)',
+    icon: Shield,
+    color: 'text-yellow-500',
+  },
+  {
+    value: 'following' as const,
+    label: 'Following Only',
+    description: 'Only show content from people you follow',
+    icon: CheckCircle2,
+    color: 'text-green-500',
+  },
+];
+
+export function TrustFilter({ value, onChange, className, compact = false }: TrustFilterProps) {
+  const currentLevel = TRUST_LEVELS.find((l) => l.value === value) || TRUST_LEVELS[0];
+  const Icon = currentLevel.icon;
+
+  if (compact) {
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            className={cn("gap-2", className)}
+          >
+            <Icon className="h-4 w-4" />
+            Trust Filter
+            {value !== 'all' && (
+              <Badge variant="secondary" className="ml-1 px-1.5 py-0 text-[10px]">
+                {value === 'verified' ? '≥90' : value === 'trusted' ? '≥60' : 'Following'}
+              </Badge>
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-72">
+          <DropdownMenuLabel>Filter by Trust Level</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {TRUST_LEVELS.map((level) => (
+            <DropdownMenuCheckboxItem
+              key={level.value}
+              checked={value === level.value}
+              onCheckedChange={() => onChange(level.value)}
+              className="flex flex-col items-start py-3"
+            >
+              <div className="flex items-center gap-2 mb-1">
+                <level.icon className={cn("h-4 w-4", level.color)} />
+                <span className="font-bold">{level.label}</span>
+              </div>
+              <p className="text-xs text-muted-foreground pl-6">{level.description}</p>
+            </DropdownMenuCheckboxItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      <label className="text-sm font-bold text-gray-300 uppercase tracking-wide flex items-center gap-2">
+        <Shield className="h-4 w-4 text-[#ccff00]" />
+        Trust Filter
+      </label>
+      <div className="grid gap-2">
+        {TRUST_LEVELS.map((level) => {
+          const Icon = level.icon;
+          const isActive = value === level.value;
+
+          return (
+            <button
+              key={level.value}
+              onClick={() => onChange(level.value)}
+              className={cn(
+                "flex items-start gap-3 p-3 rounded-lg border-2 transition-all text-left",
+                isActive
+                  ? "bg-black/50 border-[#ccff00] shadow-[0_0_10px_rgba(204,255,0,0.3)]"
+                  : "bg-black/20 border-white/10 hover:border-white/30"
+              )}
+            >
+              <Icon className={cn("h-5 w-5 flex-shrink-0 mt-0.5", isActive ? level.color : "text-gray-500")} />
+              <div className="flex-1">
+                <div className="font-bold text-white mb-1">{level.label}</div>
+                <p className="text-xs text-gray-400">{level.description}</p>
+              </div>
+              {isActive && (
+                <CheckCircle2 className="h-5 w-5 text-[#ccff00] flex-shrink-0" />
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Helper function to filter items by trust score
+ */
+export function filterByTrustLevel<T extends { pubkey: string }>(
+  items: T[],
+  level: TrustFilterLevel,
+  getTrustScore: (pubkey: string) => number | undefined
+): T[] {
+  if (level === 'all') return items;
+
+  return items.filter((item) => {
+    const score = getTrustScore(item.pubkey);
+    if (score === undefined) return false;
+
+    switch (level) {
+      case 'verified':
+        return score >= 90;
+      case 'trusted':
+        return score >= 60;
+      case 'following':
+        return score === 90 || score === 100;
+      default:
+        return true;
+    }
+  });
+}
diff --git a/src/src/components/UserStatusIndicator.tsx b/src/src/components/UserStatusIndicator.tsx
new file mode 100644
index 0000000..aa7abd3
--- /dev/null
+++ b/src/src/components/UserStatusIndicator.tsx
@@ -0,0 +1,94 @@
+import { useUserStatus, SKATING_STATUSES } from '@/hooks/useUserStatus';
+import { Badge } from '@/components/ui/badge';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+
+interface UserStatusIndicatorProps {
+  pubkey: string;
+  className?: string;
+  showLabel?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function UserStatusIndicator({
+  pubkey,
+  className,
+  showLabel = false,
+  size = 'sm',
+}: UserStatusIndicatorProps) {
+  const { data: status, isLoading } = useUserStatus(pubkey);
+
+  if (isLoading || !status) return null;
+
+  const preset = status.statusId
+    ? SKATING_STATUSES.find(s => s.id === status.statusId)
+    : null;
+
+  const emoji = status.emoji || preset?.emoji || '🛹';
+  const label = preset?.label || status.status;
+
+  const sizeClasses = {
+    sm: 'text-xs px-1.5 py-0',
+    md: 'text-sm px-2 py-0.5',
+    lg: 'text-base px-3 py-1',
+  };
+
+  const dotSizeClasses = {
+    sm: 'w-2 h-2',
+    md: 'w-2.5 h-2.5',
+    lg: 'w-3 h-3',
+  };
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className={cn('inline-flex items-center gap-1', className)}>
+            {/* Pulsing dot indicator */}
+            <span className="relative flex">
+              <span
+                className={cn(
+                  'animate-ping absolute inline-flex rounded-full bg-green-400 opacity-75',
+                  dotSizeClasses[size]
+                )}
+              />
+              <span
+                className={cn(
+                  'relative inline-flex rounded-full bg-green-500',
+                  dotSizeClasses[size]
+                )}
+              />
+            </span>
+            {showLabel && (
+              <Badge
+                variant="outline"
+                className={cn(
+                  'border-green-500/50 text-green-400 font-medium',
+                  sizeClasses[size]
+                )}
+              >
+                {emoji} {label}
+              </Badge>
+            )}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent side="top" className="max-w-[200px]">
+          <div className="text-center">
+            <div className="text-lg mb-1">{emoji}</div>
+            <p className="font-bold">{label}</p>
+            {status.linkedSpot && (
+              <p className="text-xs text-muted-foreground mt-1">
+                📍 At a spot
+              </p>
+            )}
+            {status.expiration && (
+              <p className="text-xs text-muted-foreground mt-1">
+                ⏱️ Auto-clears in {Math.round((status.expiration - Date.now() / 1000) / 60)} min
+              </p>
+            )}
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
diff --git a/src/src/components/WalletModal.tsx b/src/src/components/WalletModal.tsx
new file mode 100644
index 0000000..38f6a8e
--- /dev/null
+++ b/src/src/components/WalletModal.tsx
@@ -0,0 +1,404 @@
+import { useState, forwardRef } from 'react';
+import { Wallet, Plus, Trash2, Zap, Globe, WalletMinimal, CheckCircle, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+  DrawerClose,
+} from '@/components/ui/drawer';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { useNWC } from '@/hooks/useNWCContext';
+import { useWallet } from '@/hooks/useWallet';
+import { useToast } from '@/hooks/useToast';
+import { useIsMobile } from '@/hooks/useIsMobile';
+import type { NWCConnection, NWCInfo } from '@/hooks/useNWC';
+import type { WebLNProvider } from "@webbtc/webln-types";
+
+interface WalletModalProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+// Extracted AddWalletContent to prevent re-renders
+const AddWalletContent = forwardRef<HTMLDivElement, {
+  alias: string;
+  setAlias: (value: string) => void;
+  connectionUri: string;
+  setConnectionUri: (value: string) => void;
+}>(({ alias, setAlias, connectionUri, setConnectionUri }, ref) => (
+  <div className="space-y-4 px-4" ref={ref}>
+    <div>
+      <Label htmlFor="alias">Wallet Name (optional)</Label>
+      <Input
+        id="alias"
+        placeholder="My Lightning Wallet"
+        value={alias}
+        onChange={(e) => setAlias(e.target.value)}
+      />
+    </div>
+    <div>
+      <Label htmlFor="connection-uri">Connection URI</Label>
+      <Textarea
+        id="connection-uri"
+        placeholder="nostr+walletconnect://..."
+        value={connectionUri}
+        onChange={(e) => setConnectionUri(e.target.value)}
+        rows={3}
+      />
+    </div>
+  </div>
+));
+AddWalletContent.displayName = 'AddWalletContent';
+
+// Recommended wallets for NWC
+const RECOMMENDED_WALLETS = [
+  { name: 'Alby', url: 'https://getalby.com', type: 'extension' },
+  { name: 'Minibits', url: 'https://www.minibits.cash', type: 'mobile' },
+  { name: 'Zeus', url: 'https://zeusln.com', type: 'mobile' },
+  { name: 'Coinos', url: 'https://coinos.io', type: 'web' },
+];
+
+// Extracted WalletContent to prevent re-renders
+const WalletContent = forwardRef<HTMLDivElement, {
+  webln: WebLNProvider | null;
+  hasNWC: boolean;
+  connections: NWCConnection[];
+  connectionInfo: Record<string, NWCInfo>;
+  activeConnection: string | null;
+  handleSetActive: (cs: string) => void;
+  handleRemoveConnection: (cs: string) => void;
+  setAddDialogOpen: (open: boolean) => void;
+}>(({
+  webln,
+  hasNWC,
+  connections,
+  connectionInfo,
+  activeConnection,
+  handleSetActive,
+  handleRemoveConnection,
+  setAddDialogOpen
+}, ref) => (
+  <div className="space-y-4 sm:space-y-6 px-0 sm:px-4 pb-4" ref={ref}>
+    {/* NWC First - Primary Option */}
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <h3 className="font-medium text-sm sm:text-base">Nostr Wallet Connect</h3>
+        <Button size="sm" variant="outline" onClick={() => setAddDialogOpen(true)}>
+          <Plus className="h-4 w-4 mr-1" />
+          Add Wallet
+        </Button>
+      </div>
+      
+      {/* Connected Wallets List */}
+      {connections.length > 0 ? (
+        <div className="space-y-2">
+          {connections.map((connection) => {
+            const info = connectionInfo[connection.connectionString];
+            const isActive = activeConnection === connection.connectionString;
+            return (
+              <div key={connection.connectionString} className={`flex items-center justify-between p-3 border rounded-lg ${isActive ? 'ring-2 ring-primary bg-primary/5' : ''}`}>
+                <div className="flex items-center gap-3">
+                  <WalletMinimal className="h-4 w-4 text-muted-foreground" />
+                  <div>
+                    <p className="text-sm font-medium">
+                      {connection.alias || info?.alias || 'Lightning Wallet'}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      NWC Connection
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  {isActive && <CheckCircle className="h-4 w-4 text-green-600" />}
+                  {!isActive && (
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => handleSetActive(connection.connectionString)}
+                    >
+                      <Zap className="h-3 w-3" />
+                    </Button>
+                  )}
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => handleRemoveConnection(connection.connectionString)}
+                  >
+                    <Trash2 className="h-3 w-3" />
+                  </Button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="text-center py-4 px-3 border border-dashed rounded-lg">
+          <WalletMinimal className="h-8 w-8 mx-auto mb-2 text-muted-foreground" />
+          <p className="text-sm text-muted-foreground mb-3">
+            Paste your NWC connection string to send zaps
+          </p>
+          <Button size="sm" onClick={() => setAddDialogOpen(true)}>
+            <Plus className="h-4 w-4 mr-1" />
+            Connect Wallet
+          </Button>
+        </div>
+      )}
+    </div>
+
+    <Separator />
+
+    {/* WebLN - Secondary Option */}
+    <div className="space-y-2">
+      <div className="flex items-center justify-between p-2 sm:p-3 border rounded-lg">
+        <div className="flex items-center gap-2 sm:gap-3">
+          <Globe className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+          <div className="min-w-0">
+            <p className="text-xs sm:text-sm font-medium">Browser Extension (WebLN)</p>
+            <p className="text-[10px] sm:text-xs text-muted-foreground">Auto-detected if installed</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-1 sm:gap-2 flex-shrink-0">
+          {webln && <CheckCircle className="h-3 w-3 sm:h-4 sm:w-4 text-green-600" />}
+          <Badge variant={webln ? "default" : "secondary"} className="text-[10px] sm:text-xs">
+            {webln ? "Ready" : "Not Found"}
+          </Badge>
+        </div>
+      </div>
+    </div>
+
+    {/* Recommended Wallets - Show when no wallet connected */}
+    {!webln && connections.length === 0 && (
+      <>
+        <Separator />
+        <div className="space-y-3">
+          <h4 className="text-sm font-medium text-muted-foreground">Get NWC from:</h4>
+          <div className="grid gap-2">
+            {RECOMMENDED_WALLETS.map((wallet) => (
+              <a
+                key={wallet.name}
+                href={wallet.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center justify-between p-2 border rounded-lg hover:bg-accent transition-colors"
+              >
+                <div className="flex items-center gap-2">
+                  <Zap className="h-4 w-4 text-yellow-500" />
+                  <span className="text-sm font-medium">{wallet.name}</span>
+                </div>
+                <Badge variant="outline" className="text-[10px]">
+                  {wallet.type}
+                </Badge>
+              </a>
+            ))}
+          </div>
+        </div>
+      </>
+    )}
+  </div>
+));
+WalletContent.displayName = 'WalletContent';
+
+export function WalletModal({ children, className }: WalletModalProps) {
+  const [open, setOpen] = useState(false);
+  const [addDialogOpen, setAddDialogOpen] = useState(false);
+  const [connectionUri, setConnectionUri] = useState('');
+  const [alias, setAlias] = useState('');
+  const [isConnecting, setIsConnecting] = useState(false);
+  const isMobile = useIsMobile();
+
+  const {
+    connections,
+    activeConnection,
+    connectionInfo,
+    addConnection,
+    removeConnection,
+    setActiveConnection
+  } = useNWC();
+
+  const { webln } = useWallet();
+
+  const hasNWC = connections.length > 0 && connections.some(c => c.isConnected);
+  const { toast } = useToast();
+
+  const handleAddConnection = async () => {
+    if (!connectionUri.trim()) {
+      toast({
+        title: 'Connection URI required',
+        description: 'Please enter a valid NWC connection URI.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    setIsConnecting(true);
+    try {
+      const success = await addConnection(connectionUri.trim(), alias.trim() || undefined);
+      if (success) {
+        setConnectionUri('');
+        setAlias('');
+        setAddDialogOpen(false);
+      }
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  const handleRemoveConnection = (connectionString: string) => {
+    removeConnection(connectionString);
+  };
+
+  const handleSetActive = (connectionString: string) => {
+    setActiveConnection(connectionString);
+    toast({
+      title: 'Active wallet changed',
+      description: 'The selected wallet is now active for zaps.',
+    });
+  };
+
+  const walletContentProps = {
+    webln,
+    hasNWC,
+    connections,
+    connectionInfo,
+    activeConnection,
+    handleSetActive,
+    handleRemoveConnection,
+    setAddDialogOpen,
+  };
+
+  const addWalletDialog = (
+    <Dialog open={addDialogOpen} onOpenChange={setAddDialogOpen}>
+      <DialogContent className="w-[calc(100%-1rem)] sm:max-w-[425px] p-4 sm:p-6">
+        <DialogHeader>
+          <DialogTitle className="text-base sm:text-lg">Connect NWC Wallet</DialogTitle>
+          <DialogDescription className="text-xs sm:text-sm">
+            Enter your connection string from a compatible wallet.
+          </DialogDescription>
+        </DialogHeader>
+        <AddWalletContent
+          alias={alias}
+          setAlias={setAlias}
+          connectionUri={connectionUri}
+          setConnectionUri={setConnectionUri}
+        />
+        <DialogFooter className="px-0 sm:px-4">
+          <Button
+            onClick={handleAddConnection}
+            disabled={isConnecting || !connectionUri.trim()}
+            className="w-full"
+          >
+            {isConnecting ? 'Connecting...' : 'Connect'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+
+  if (isMobile) {
+    return (
+      <>
+        <Drawer open={open} onOpenChange={setOpen}>
+          <DrawerTrigger asChild>
+            {children || (
+              <Button variant="outline" size="sm" className={className}>
+                <Wallet className="h-4 w-4 mr-2" />
+                Wallet Settings
+              </Button>
+            )}
+          </DrawerTrigger>
+          <DrawerContent className="h-full">
+            <DrawerHeader className="text-center relative">
+              <DrawerClose asChild>
+                <Button variant="ghost" size="sm" className="absolute right-4 top-4">
+                  <X className="h-4 w-4" />
+                  <span className="sr-only">Close</span>
+                </Button>
+              </DrawerClose>
+              <DrawerTitle className="flex items-center justify-center gap-2 pt-2">
+                <Wallet className="h-5 w-5" />
+                Lightning Wallet
+              </DrawerTitle>
+              <DrawerDescription>
+                Connect your lightning wallet to send zaps instantly.
+              </DrawerDescription>
+            </DrawerHeader>
+            <div className="overflow-y-auto">
+              <WalletContent {...walletContentProps} />
+            </div>
+          </DrawerContent>
+        </Drawer>
+        {/* Render Add Wallet as a separate Drawer for mobile */}
+        <Drawer open={addDialogOpen} onOpenChange={setAddDialogOpen}>
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle>Connect NWC Wallet</DrawerTitle>
+              <DrawerDescription>
+                Enter your connection string from a compatible wallet.
+              </DrawerDescription>
+            </DrawerHeader>
+            <AddWalletContent
+              alias={alias}
+              setAlias={setAlias}
+              connectionUri={connectionUri}
+              setConnectionUri={setConnectionUri}
+            />
+            <div className="p-4">
+              <Button
+                onClick={handleAddConnection}
+                disabled={isConnecting || !connectionUri.trim()}
+                className="w-full"
+              >
+                {isConnecting ? 'Connecting...' : 'Connect'}
+              </Button>
+            </div>
+          </DrawerContent>
+        </Drawer>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          {children || (
+            <Button variant="outline" size="sm" className={className}>
+              <Wallet className="h-4 w-4 mr-2" />
+              Wallet Settings
+            </Button>
+          )}
+        </DialogTrigger>
+        <DialogContent className="w-[calc(100%-1rem)] sm:max-w-[500px] max-h-[85vh] max-h-[85dvh] overflow-y-auto p-4 sm:p-6">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
+              <Wallet className="h-5 w-5" />
+              Lightning Wallet
+            </DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              Connect your lightning wallet to send zaps instantly.
+            </DialogDescription>
+          </DialogHeader>
+          <WalletContent {...walletContentProps} />
+        </DialogContent>
+      </Dialog>
+      {addWalletDialog}
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/src/components/WeatherToggle.tsx b/src/src/components/WeatherToggle.tsx
new file mode 100644
index 0000000..47d4b4c
--- /dev/null
+++ b/src/src/components/WeatherToggle.tsx
@@ -0,0 +1,36 @@
+import { Button } from '@/components/ui/button';
+import { Cloud, CloudOff } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface WeatherToggleProps {
+  enabled: boolean;
+  onToggle: () => void;
+  className?: string;
+}
+
+export function WeatherToggle({ enabled, onToggle, className }: WeatherToggleProps) {
+  return (
+    <Button
+      variant={enabled ? 'default' : 'outline'}
+      size="sm"
+      onClick={onToggle}
+      className={cn(
+        'gap-2 transition-all',
+        enabled && 'bg-blue-500 hover:bg-blue-600 border-blue-500',
+        className
+      )}
+    >
+      {enabled ? (
+        <>
+          <Cloud className="h-4 w-4" />
+          <span className="hidden sm:inline">Weather On</span>
+        </>
+      ) : (
+        <>
+          <CloudOff className="h-4 w-4" />
+          <span className="hidden sm:inline">Weather Off</span>
+        </>
+      )}
+    </Button>
+  );
+}
diff --git a/src/src/components/WhosSkating.tsx b/src/src/components/WhosSkating.tsx
new file mode 100644
index 0000000..116a58d
--- /dev/null
+++ b/src/src/components/WhosSkating.tsx
@@ -0,0 +1,138 @@
+import { Link } from 'react-router-dom';
+import { nip19 } from 'nostr-tools';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Button } from '@/components/ui/button';
+import { useWhosSkatingAtSpot, SKATING_STATUSES } from '@/hooks/useUserStatus';
+import { useAuthor } from '@/hooks/useAuthor';
+import { genUserName } from '@/lib/genUserName';
+import { formatDistanceToNow } from 'date-fns';
+import { Users, MessageCircle, Zap } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface WhosSkatingProps {
+  spotPubkey: string;
+  spotIdentifier: string;
+  className?: string;
+}
+
+function SkaterCard({ pubkey, status, emoji }: { pubkey: string; status: string; emoji?: string }) {
+  const { data: authorData, isLoading } = useAuthor(pubkey);
+  const metadata = authorData?.metadata;
+  const displayName = metadata?.name ?? genUserName(pubkey);
+  const npub = nip19.npubEncode(pubkey);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-3 p-3 rounded-lg bg-black/50">
+        <Skeleton className="h-10 w-10 rounded-full" />
+        <div className="flex-1">
+          <Skeleton className="h-4 w-24 mb-1" />
+          <Skeleton className="h-3 w-16" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Link 
+      to={`/${npub}`}
+      className="block"
+    >
+      <div className="flex items-center gap-3 p-3 rounded-lg bg-black/50 hover:bg-black/70 transition-colors border border-transparent hover:border-[#ccff00]/30">
+        <div className="relative">
+          <Avatar className="h-10 w-10 border-2 border-green-500/50">
+            <AvatarImage src={metadata?.picture} alt={displayName} />
+            <AvatarFallback className="bg-green-500/20 text-green-400 font-bold">
+              {displayName.slice(0, 2).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+          {/* Online indicator */}
+          <span className="absolute -bottom-0.5 -right-0.5 flex h-3.5 w-3.5">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+            <span className="relative inline-flex rounded-full h-3.5 w-3.5 bg-green-500 border-2 border-black" />
+          </span>
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="font-bold text-white text-sm truncate">{displayName}</p>
+          <p className="text-xs text-green-400 truncate">
+            {emoji} {status}
+          </p>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 w-8 p-0 text-gray-400 hover:text-[#ccff00]"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            // Navigate to DM
+            window.location.href = `/messages/${npub}`;
+          }}
+        >
+          <MessageCircle className="h-4 w-4" />
+        </Button>
+      </div>
+    </Link>
+  );
+}
+
+export function WhosSkating({ spotPubkey, spotIdentifier, className }: WhosSkatingProps) {
+  const { data: skatersAtSpot, isLoading } = useWhosSkatingAtSpot(spotPubkey, spotIdentifier);
+
+  // Don't show if no one is skating
+  if (!isLoading && (!skatersAtSpot || skatersAtSpot.length === 0)) {
+    return null;
+  }
+
+  return (
+    <Card className={cn('bg-gradient-to-br from-green-500/10 to-[#ccff00]/10 border-2 border-green-500/30', className)}>
+      <CardHeader className="pb-3">
+        <CardTitle className="text-lg flex items-center gap-2">
+          <span className="relative flex">
+            <span className="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-green-400 opacity-75" />
+            <span className="relative inline-flex h-3 w-3 rounded-full bg-green-500" />
+          </span>
+          <Users className="h-5 w-5 text-green-400" />
+          Who's Skating
+          {skatersAtSpot && skatersAtSpot.length > 0 && (
+            <Badge className="bg-green-500/20 text-green-400 border-green-500/50">
+              {skatersAtSpot.length}
+            </Badge>
+          )}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        {isLoading ? (
+          <>
+            <Skeleton className="h-16 w-full rounded-lg" />
+            <Skeleton className="h-16 w-full rounded-lg" />
+          </>
+        ) : skatersAtSpot && skatersAtSpot.length > 0 ? (
+          <>
+            {skatersAtSpot.slice(0, 5).map((skater) => {
+              const preset = skater.statusId
+                ? SKATING_STATUSES.find(s => s.id === skater.statusId)
+                : null;
+              return (
+                <SkaterCard
+                  key={skater.pubkey}
+                  pubkey={skater.pubkey}
+                  status={preset?.label || skater.status}
+                  emoji={skater.emoji || preset?.emoji || '🛹'}
+                />
+              );
+            })}
+            {skatersAtSpot.length > 5 && (
+              <p className="text-xs text-gray-400 text-center pt-2">
+                +{skatersAtSpot.length - 5} more
+              </p>
+            )}
+          </>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/src/components/ZapButton.tsx b/src/src/components/ZapButton.tsx
new file mode 100644
index 0000000..bb3bbd8
--- /dev/null
+++ b/src/src/components/ZapButton.tsx
@@ -0,0 +1,58 @@
+import { ZapDialog } from '@/components/ZapDialog';
+import { useZaps } from '@/hooks/useZaps';
+import { useWallet } from '@/hooks/useWallet';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useAuthor } from '@/hooks/useAuthor';
+import { Zap } from 'lucide-react';
+import type { Event } from 'nostr-tools';
+
+interface ZapButtonProps {
+  target: Event;
+  className?: string;
+  showCount?: boolean;
+  zapData?: { count: number; totalSats: number; isLoading?: boolean };
+}
+
+export function ZapButton({
+  target,
+  className = "text-xs ml-1",
+  showCount = true,
+  zapData: externalZapData
+}: ZapButtonProps) {
+  const { user } = useCurrentUser();
+  const { data: author } = useAuthor(target?.pubkey || '');
+  const { webln, activeNWC } = useWallet();
+
+  // Only fetch data if not provided externally
+  const { totalSats: fetchedTotalSats, isLoading } = useZaps(
+    externalZapData ? [] : target ?? [], // Empty array prevents fetching if external data provided
+    webln,
+    activeNWC
+  );
+
+  // Don't show zap button if user is not logged in, is the author, or author has no lightning address
+  if (!user || !target || user.pubkey === target.pubkey || (!author?.metadata?.lud16 && !author?.metadata?.lud06)) {
+    return null;
+  }
+
+  // Use external data if provided, otherwise use fetched data
+  const totalSats = externalZapData?.totalSats ?? fetchedTotalSats;
+  const showLoading = externalZapData?.isLoading || isLoading;
+
+  return (
+    <ZapDialog target={target}>
+      <div className={`flex items-center gap-1 ${className}`}>
+        <Zap className="h-4 w-4" />
+        <span className="text-xs">
+          {showLoading ? (
+            '...'
+          ) : showCount && totalSats > 0 ? (
+            `${totalSats.toLocaleString()}`
+          ) : (
+            'Zap'
+          )}
+        </span>
+      </div>
+    </ZapDialog>
+  );
+}
\ No newline at end of file
diff --git a/src/src/components/ZapDialog.tsx b/src/src/components/ZapDialog.tsx
new file mode 100644
index 0000000..27dd60e
--- /dev/null
+++ b/src/src/components/ZapDialog.tsx
@@ -0,0 +1,700 @@
+import { useState, useEffect, useRef, forwardRef } from 'react';
+import { Zap, Copy, Check, ExternalLink, Sparkle, Sparkles, Star, Rocket, ArrowLeft, X, Wallet } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+  DrawerClose,
+} from '@/components/ui/drawer';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Card, CardContent } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useToast } from '@/hooks/useToast';
+import { useZaps } from '@/hooks/useZaps';
+import { useWallet } from '@/hooks/useWallet';
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { useCashu } from '@/hooks/wallet/useCashu';
+import { useLightningOperations } from '@/hooks/wallet/useLightningOperations';
+import { WalletModal } from '@/components/WalletModal';
+import type { Event } from 'nostr-tools';
+import QRCode from 'qrcode';
+import type { WebLNProvider } from "@webbtc/webln-types";
+
+interface ZapDialogProps {
+  target: Event;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const presetAmounts = [
+  { amount: 1, icon: Sparkle },
+  { amount: 50, icon: Sparkles },
+  { amount: 100, icon: Zap },
+  { amount: 250, icon: Star },
+  { amount: 1000, icon: Rocket },
+];
+
+interface ZapContentProps {
+  invoice: string | null;
+  amount: number | string;
+  comment: string;
+  isZapping: boolean;
+  qrCodeUrl: string;
+  copied: boolean;
+  webln: WebLNProvider | null;
+  handleZap: () => void;
+  handleCopy: () => void;
+  openInWallet: () => void;
+  setAmount: (amount: number | string) => void;
+  setComment: (comment: string) => void;
+  inputRef: React.RefObject<HTMLInputElement>;
+  zap: (amount: number, comment: string) => void;
+  paymentMethod?: 'lightning' | 'cashu';
+  setPaymentMethod?: (method: 'lightning' | 'cashu') => void;
+  cashuBalance?: number;
+  hasCashu?: boolean;
+}
+
+// Wallet Setup Screen - shown when user has no wallet connected
+const WalletSetupContent = forwardRef<HTMLDivElement, {
+  onContinue: () => void;
+}>(({ onContinue }, ref) => (
+  <div className="px-4 py-6 space-y-6" ref={ref}>
+    <div className="text-center space-y-3">
+      <div className="mx-auto w-16 h-16 rounded-full bg-orange-500/20 flex items-center justify-center">
+        <Wallet className="h-8 w-8 text-orange-400" />
+      </div>
+      <div>
+        <h3 className="font-bold text-lg mb-2">Connect Your Wallet First</h3>
+        <p className="text-sm text-muted-foreground">
+          To send zaps (Bitcoin tips), you need to connect a Lightning wallet.
+        </p>
+      </div>
+    </div>
+
+    <Card className="bg-blue-950/30 border-blue-500/50">
+      <CardContent className="p-4 space-y-3">
+        <div className="flex items-start gap-3">
+          <div className="text-2xl">💡</div>
+          <div className="flex-1">
+            <p className="text-sm font-medium mb-1">Quick Setup (30 seconds)</p>
+            <p className="text-xs text-muted-foreground">
+              Connect your existing Lightning wallet with Nostr Wallet Connect (NWC). No extra accounts needed.
+            </p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+
+    <div className="space-y-3">
+      <WalletModal>
+        <Button className="w-full gap-2 bg-orange-500 hover:bg-orange-600" size="lg">
+          <Wallet className="h-4 w-4" />
+          Connect Wallet with NWC
+        </Button>
+      </WalletModal>
+
+      <a
+        href="https://planb.academy/en/tutorials/wallet"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="block"
+      >
+        <Button variant="outline" className="w-full gap-2" size="lg">
+          <ExternalLink className="h-4 w-4" />
+          Don't have a wallet? Learn how
+        </Button>
+      </a>
+
+      <Button
+        variant="ghost"
+        onClick={onContinue}
+        className="w-full text-muted-foreground hover:text-foreground"
+        size="sm"
+      >
+        Skip for now (manual invoice)
+      </Button>
+    </div>
+
+    <Card className="bg-yellow-950/30 border-yellow-500/30">
+      <CardContent className="p-3">
+        <p className="text-xs text-gray-300">
+          <strong className="text-yellow-400">ℹ️ Note:</strong> You can still create an invoice without connecting a wallet, but you'll need to copy it manually to pay.
+        </p>
+      </CardContent>
+    </Card>
+  </div>
+));
+WalletSetupContent.displayName = 'WalletSetupContent';
+
+// Moved ZapContent outside of ZapDialog to prevent re-renders causing focus loss
+const ZapContent = forwardRef<HTMLDivElement, ZapContentProps>(({
+  invoice,
+  amount,
+  comment,
+  isZapping,
+  qrCodeUrl,
+  copied,
+  webln,
+  handleZap,
+  handleCopy,
+  openInWallet,
+  setAmount,
+  setComment,
+  inputRef,
+  zap,
+  paymentMethod,
+  setPaymentMethod,
+  cashuBalance,
+  hasCashu,
+}, ref) => (
+  <div ref={ref}>
+    {invoice ? (
+      <div className="flex flex-col h-full min-h-0">
+        {/* Payment amount display */}
+        <div className="text-center pt-4">
+          <div className="text-2xl font-bold">{amount} sats</div>
+        </div>
+
+        <Separator className="my-4" />
+
+        <div className="flex flex-col justify-center min-h-0 flex-1 px-2">
+          {/* QR Code */}
+          <div className="flex justify-center">
+            <Card className="p-3 [@media(max-height:680px)]:max-w-[65vw] max-w-[95vw] mx-auto">
+              <CardContent className="p-0 flex justify-center">
+                {qrCodeUrl ? (
+                  <img
+                    src={qrCodeUrl}
+                    alt="Lightning Invoice QR Code"
+                    className="w-full h-auto aspect-square max-w-full object-contain"
+                  />
+                ) : (
+                  <div className="w-full aspect-square bg-muted animate-pulse rounded" />
+                )}
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Invoice input */}
+          <div className="space-y-2 mt-4">
+            <Label htmlFor="invoice">Lightning Invoice</Label>
+            <div className="flex gap-2 min-w-0">
+              <Input
+                id="invoice"
+                value={invoice}
+                readOnly
+                className="font-mono text-xs min-w-0 flex-1 overflow-hidden text-ellipsis"
+                onClick={(e) => e.currentTarget.select()}
+              />
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={handleCopy}
+                className="shrink-0"
+              >
+                {copied ? (
+                  <Check className="h-4 w-4 text-green-600" />
+                ) : (
+                  <Copy className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          </div>
+
+          {/* Payment buttons */}
+          <div className="space-y-3 mt-4">
+            {webln && (
+              <Button
+                onClick={() => {
+                  const finalAmount = typeof amount === 'string' ? parseInt(amount, 10) : amount;
+                  zap(finalAmount, comment);
+                }}
+                disabled={isZapping}
+                className="w-full"
+                size="lg"
+              >
+                <Zap className="h-4 w-4 mr-2" />
+                {isZapping ? "Processing..." : "Pay with WebLN"}
+              </Button>
+            )}
+
+            <Button
+              variant="outline"
+              onClick={openInWallet}
+              className="w-full"
+              size="lg"
+            >
+              <ExternalLink className="h-4 w-4 mr-2" />
+              Open in Lightning Wallet
+            </Button>
+
+            <div className="text-xs sm:text-[.65rem] text-muted-foreground text-center">
+              Scan the QR code or copy the invoice to pay with any Lightning wallet.
+            </div>
+          </div>
+        </div>
+      </div>
+    ) : (
+      <>
+        <div className="grid gap-3 px-4 py-4 w-full overflow-hidden">
+          {/* Cashu Balance Banner - Show prominently if user has Cashu funds */}
+          {hasCashu && cashuBalance !== undefined && cashuBalance > 0 && setPaymentMethod && (
+            <Card className={cn(
+              "border-2 transition-all cursor-pointer",
+              paymentMethod === 'cashu' 
+                ? "bg-orange-500/20 border-orange-500/50" 
+                : "bg-orange-500/10 border-orange-500/30 hover:bg-orange-500/15"
+            )}
+            onClick={() => setPaymentMethod('cashu')}
+            >
+              <CardContent className="p-3">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center">
+                      <span className="text-xl">🥜</span>
+                    </div>
+                    <div>
+                      <p className="text-sm font-bold text-orange-400">Cashu Wallet</p>
+                      <p className="text-xs text-muted-foreground">Pay instantly with your built-in wallet</p>
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-lg font-bold text-orange-400">{cashuBalance.toLocaleString()}</p>
+                    <p className="text-[10px] text-muted-foreground uppercase">sats available</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Payment Method Selector - show if user has Cashu but might want Lightning too */}
+          {hasCashu && cashuBalance !== undefined && setPaymentMethod && (
+            <>
+              <div className="flex items-center gap-2">
+                <Button
+                  type="button"
+                  variant={paymentMethod === 'cashu' ? 'default' : 'ghost'}
+                  size="sm"
+                  onClick={() => setPaymentMethod('cashu')}
+                  className={cn(
+                    "flex-1 gap-2 h-9",
+                    paymentMethod === 'cashu' && "bg-orange-500 hover:bg-orange-600"
+                  )}
+                >
+                  <span>🥜</span>
+                  <span className="text-xs">Cashu</span>
+                </Button>
+                <Button
+                  type="button"
+                  variant={paymentMethod === 'lightning' ? 'default' : 'ghost'}
+                  size="sm"
+                  onClick={() => setPaymentMethod('lightning')}
+                  className="flex-1 gap-2 h-9"
+                >
+                  <Zap className="h-4 w-4" />
+                  <span className="text-xs">Lightning</span>
+                </Button>
+              </div>
+              <Separator />
+            </>
+          )}
+          
+          <ToggleGroup
+            type="single"
+            value={String(amount)}
+            onValueChange={(value) => {
+              if (value) {
+                setAmount(parseInt(value, 10));
+              }
+            }}
+            className="grid grid-cols-5 gap-1 w-full"
+          >
+            {presetAmounts.map(({ amount: presetAmount, icon: Icon }) => (
+              <ToggleGroupItem
+                key={presetAmount}
+                value={String(presetAmount)}
+                className="flex flex-col h-auto min-w-0 text-xs px-1 py-2"
+              >
+                <Icon className="h-4 w-4 mb-1" />
+                <span className="truncate">{presetAmount}</span>
+              </ToggleGroupItem>
+            ))}
+          </ToggleGroup>
+          <div className="flex items-center gap-2">
+            <div className="h-px flex-1 bg-muted" />
+            <span className="text-xs text-muted-foreground">OR</span>
+            <div className="h-px flex-1 bg-muted" />
+          </div>
+          <Input
+            ref={inputRef}
+            id="custom-amount"
+            type="number"
+            placeholder="Custom amount"
+            value={amount}
+            onChange={(e) => setAmount(e.target.value)}
+            className="w-full text-sm"
+          />
+          <Textarea
+            id="custom-comment"
+            placeholder="Add a comment (optional)"
+            value={comment}
+            onChange={(e) => setComment(e.target.value)}
+            className="w-full resize-none text-sm"
+            rows={2}
+          />
+        </div>
+        <div className="px-4 pb-4 space-y-2">
+          {/* Show insufficient balance warning for Cashu */}
+          {paymentMethod === 'cashu' && cashuBalance !== undefined && (
+            typeof amount === 'number' && amount > cashuBalance ? (
+              <Card className="bg-yellow-950/30 border-yellow-500/30">
+                <CardContent className="p-3">
+                  <p className="text-xs text-yellow-200">
+                    ⚠️ Insufficient Cashu balance. You need {(amount - cashuBalance).toLocaleString()} more sats.
+                    Switch to Lightning or top up your Cashu wallet.
+                  </p>
+                </CardContent>
+              </Card>
+            ) : null
+          )}
+          
+          <Button 
+            onClick={handleZap} 
+            className="w-full" 
+            disabled={
+              isZapping || 
+              (paymentMethod === 'cashu' && typeof amount === 'number' && cashuBalance !== undefined && amount > cashuBalance)
+            } 
+            size="default"
+          >
+            {isZapping ? (
+              'Creating invoice...'
+            ) : (
+              <>
+                {paymentMethod === 'cashu' ? '🥜' : <Zap className="h-4 w-4 mr-2" />}
+                Zap {amount} sats {paymentMethod === 'cashu' ? 'with Cashu' : ''}
+              </>
+            )}
+          </Button>
+        </div>
+      </>
+    )}
+  </div>
+));
+ZapContent.displayName = 'ZapContent';
+
+export function ZapDialog({ target, children, className }: ZapDialogProps) {
+  const [open, setOpen] = useState(false);
+  const { user } = useCurrentUser();
+  const { data: author } = useAuthor(target.pubkey);
+  const { toast } = useToast();
+  const { webln, activeNWC } = useWallet();
+  const { zap, isZapping, invoice, setInvoice } = useZaps(target, webln, activeNWC, () => setOpen(false));
+  const [amount, setAmount] = useState<number | string>(100);
+  const [comment, setComment] = useState<string>('');
+  const [copied, setCopied] = useState(false);
+  const [qrCodeUrl, setQrCodeUrl] = useState<string>('');
+  const [showWalletSetup, setShowWalletSetup] = useState(false);
+  const [hasShownSetup, setHasShownSetup] = useState(false);
+  const [paymentMethod, setPaymentMethod] = useState<'lightning' | 'cashu'>('lightning');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isMobile = useIsMobile();
+
+  // Cashu wallet integration
+  const { totalBalance: cashuBalance, isInitialized: hasCashu, coco, mints } = useCashu();
+
+  // Check if user has any wallet connected
+  const hasWallet = !!webln || !!activeNWC;
+  const hasAnyCashuBalance = hasCashu && cashuBalance > 0;
+
+  useEffect(() => {
+    if (target) {
+      setComment('Zapped with Engorile!');
+    }
+  }, [target]);
+
+  // Generate QR code
+  useEffect(() => {
+    let isCancelled = false;
+
+    const generateQR = async () => {
+      if (!invoice) {
+        setQrCodeUrl('');
+        return;
+      }
+
+      try {
+        const url = await QRCode.toDataURL(invoice.toUpperCase(), {
+          width: 512,
+          margin: 2,
+          color: {
+            dark: '#000000',
+            light: '#FFFFFF',
+          },
+        });
+
+        if (!isCancelled) {
+          setQrCodeUrl(url);
+        }
+      } catch (err) {
+        if (!isCancelled) {
+          console.error('Failed to generate QR code:', err);
+        }
+      }
+    };
+
+    generateQR();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [invoice]);
+
+  const handleCopy = async () => {
+    if (invoice) {
+      await navigator.clipboard.writeText(invoice);
+      setCopied(true);
+      toast({
+        title: 'Invoice copied',
+        description: 'Lightning invoice copied to clipboard',
+      });
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const openInWallet = () => {
+    if (invoice) {
+      const lightningUrl = `lightning:${invoice}`;
+      window.open(lightningUrl, '_blank');
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      setAmount(100);
+      setInvoice(null);
+      setCopied(false);
+      setQrCodeUrl('');
+      
+      // Show wallet setup screen if no wallet connected and haven't shown it yet
+      if (!hasWallet && !hasShownSetup) {
+        setShowWalletSetup(true);
+      } else {
+        setShowWalletSetup(false);
+      }
+    } else {
+      // Clean up state when dialog closes
+      setAmount(100);
+      setInvoice(null);
+      setCopied(false);
+      setQrCodeUrl('');
+      setShowWalletSetup(false);
+    }
+  }, [open, setInvoice, hasWallet, hasShownSetup]);
+
+  const handleZap = async () => {
+    const finalAmount = typeof amount === 'string' ? parseInt(amount, 10) : amount;
+    
+    // If Cashu payment method is selected and user has invoice to pay
+    if (paymentMethod === 'cashu' && hasCashu && coco && invoice) {
+      try {
+        // Get first active mint
+        const activeMint = mints.find(m => m.url);
+        if (!activeMint) {
+          throw new Error('No active mint found');
+        }
+
+        // Pay the Lightning invoice using Cashu (create and pay melt quote)
+        const meltQuote = await coco.quotes.createMeltQuote(activeMint.url, invoice);
+        await coco.quotes.payMeltQuote(activeMint.url, meltQuote.quote);
+        
+        toast({
+          title: 'Zap sent!',
+          description: `Successfully zapped ${finalAmount} sats from your Cashu wallet`,
+        });
+        setOpen(false);
+        setInvoice(null);
+      } catch (error) {
+        console.error('Cashu payment error:', error);
+        toast({
+          variant: 'destructive',
+          title: 'Payment failed',
+          description: error instanceof Error ? error.message : 'Failed to pay with Cashu wallet',
+        });
+      }
+    } else {
+      // Use regular Lightning/NWC zap flow
+      zap(finalAmount, comment);
+    }
+  };
+
+  const handleContinueWithoutWallet = () => {
+    setShowWalletSetup(false);
+    setHasShownSetup(true);
+  };
+
+  const contentProps = {
+    invoice,
+    amount,
+    comment,
+    isZapping,
+    qrCodeUrl,
+    copied,
+    webln,
+    handleZap,
+    handleCopy,
+    openInWallet,
+    setAmount,
+    setComment,
+    inputRef,
+    zap,
+    paymentMethod,
+    setPaymentMethod,
+    cashuBalance,
+    hasCashu,
+  };
+
+  if (!user || user.pubkey === target.pubkey || !author?.metadata?.lud06 && !author?.metadata?.lud16) {
+    return null;
+  }
+
+  if (isMobile) {
+    // Use drawer for entire mobile flow, make it full-screen when showing invoice
+    return (
+      <Drawer
+        open={open}
+        onOpenChange={(newOpen) => {
+          // Reset invoice when closing
+          if (!newOpen) {
+            setInvoice(null);
+            setQrCodeUrl('');
+          }
+          setOpen(newOpen);
+        }}
+        dismissible={true} // Always allow dismissal via drag
+        snapPoints={invoice ? [0.5, 0.75, 0.98] : [0.98]}
+        activeSnapPoint={invoice ? 0.98 : 0.98}
+        modal={true}
+        shouldScaleBackground={false}
+        fadeFromIndex={0}
+      >
+        <DrawerTrigger asChild>
+          <div className={`cursor-pointer ${className || ''}`}>
+            {children}
+          </div>
+        </DrawerTrigger>
+        <DrawerContent
+          key={invoice ? 'payment' : 'form'}
+          className={cn(
+            "transition-all duration-300",
+            invoice ? "h-full max-h-screen" : "max-h-[98vh]"
+          )}
+          data-testid="zap-modal"
+        >
+          <DrawerHeader className="text-center relative">
+            {/* Back button when showing invoice */}
+            {invoice && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  setInvoice(null);
+                  setQrCodeUrl('');
+                }}
+                className="absolute left-4 top-4 flex items-center gap-2"
+              >
+                <ArrowLeft className="h-4 w-4" />
+              </Button>
+            )}
+
+            {/* Close button */}
+            <DrawerClose asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="absolute right-4 top-4"
+              >
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+              </Button>
+            </DrawerClose>
+
+            <DrawerTitle className="text-lg break-words pt-2">
+              {showWalletSetup ? 'Connect Wallet' : invoice ? 'Lightning Payment' : 'Send a Zap'}
+            </DrawerTitle>
+            <DrawerDescription className="text-sm break-words text-center">
+              {showWalletSetup ? (
+                'Connect your Lightning wallet to send zaps'
+              ) : invoice ? (
+                'Pay with Bitcoin Lightning Network'
+              ) : (
+                'Zaps are small Bitcoin payments that support the creator of this item. If you enjoyed this, consider sending a zap!'
+              )}
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="flex-1 overflow-y-auto px-4 pb-4">
+            {showWalletSetup ? (
+              <WalletSetupContent onContinue={handleContinueWithoutWallet} />
+            ) : (
+              <ZapContent {...contentProps} />
+            )}
+          </div>
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <div className={`cursor-pointer ${className || ''}`}>
+          {children}
+        </div>
+      </DialogTrigger>
+      <DialogContent className="w-[calc(100%-1rem)] sm:max-w-[425px] max-h-[90vh] max-h-[90dvh] overflow-hidden p-4 sm:p-6" data-testid="zap-modal">
+        <DialogHeader>
+          <DialogTitle className="text-base sm:text-lg break-words">
+            {showWalletSetup ? 'Connect Wallet' : invoice ? 'Lightning Payment' : 'Send a Zap'}
+          </DialogTitle>
+          <DialogDescription className="text-xs sm:text-sm text-center break-words">
+            {showWalletSetup ? (
+              'Connect your Lightning wallet to send zaps'
+            ) : invoice ? (
+              'Pay with Bitcoin Lightning Network'
+            ) : (
+              <>
+                Zaps are small Bitcoin payments that support creators. Consider sending a zap!
+              </>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="overflow-y-auto -mx-4 sm:-mx-6 px-4 sm:px-6">
+          {showWalletSetup ? (
+            <WalletSetupContent onContinue={handleContinueWithoutWallet} />
+          ) : (
+            <ZapContent {...contentProps} />
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/src/components/auth/AccountSwitcher.tsx b/src/src/components/auth/AccountSwitcher.tsx
new file mode 100644
index 0000000..a3d7b0c
--- /dev/null
+++ b/src/src/components/auth/AccountSwitcher.tsx
@@ -0,0 +1,107 @@
+// NOTE: This file is stable and usually should not be modified.
+// It is important that all functionality in this file is preserved, and should only be modified if explicitly requested.
+
+import { ChevronDown, LogOut, UserIcon, UserPlus, Wallet } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.tsx';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar.tsx';
+import { WalletModal } from '@/components/WalletModal';
+import { useLoggedInAccounts, type Account } from '@/hooks/useLoggedInAccounts';
+import { genUserName } from '@/lib/genUserName';
+
+interface AccountSwitcherProps {
+  onAddAccountClick: () => void;
+}
+
+export function AccountSwitcher({ onAddAccountClick }: AccountSwitcherProps) {
+  const { currentUser, otherUsers, setLogin, removeLogin } = useLoggedInAccounts();
+
+  if (!currentUser) return null;
+
+  const getDisplayName = (account: Account): string => {
+    return account.metadata.name ?? genUserName(account.pubkey);
+  }
+
+  const getNip05 = (account: Account): string | undefined => {
+    return account.metadata.nip05;
+  }
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <button className='flex items-center gap-3 p-3 rounded-full hover:bg-accent transition-all w-full text-foreground'>
+          <div className="relative">
+            <Avatar className='w-10 h-10'>
+              <AvatarImage src={currentUser.metadata.picture} alt={getDisplayName(currentUser)} />
+              <AvatarFallback>{getDisplayName(currentUser).charAt(0)}</AvatarFallback>
+            </Avatar>
+            {/* Green online indicator dot */}
+            <span className="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-green-500 border-2 border-background rounded-full" />
+          </div>
+          <div className='flex-1 text-left hidden md:block truncate'>
+            <p className='font-medium text-sm truncate'>{getDisplayName(currentUser)}</p>
+            {getNip05(currentUser) && (
+              <p className='text-xs text-muted-foreground truncate'>
+                {getNip05(currentUser)}
+              </p>
+            )}
+          </div>
+          <ChevronDown className='w-4 h-4 text-muted-foreground' />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className='w-56 p-2 animate-scale-in'>
+        <div className='font-medium text-sm px-2 py-1.5'>Switch Account</div>
+        {otherUsers.map((user) => (
+          <DropdownMenuItem
+            key={user.id}
+            onClick={() => setLogin(user.id)}
+            className='flex items-center gap-2 cursor-pointer p-2 rounded-md'
+          >
+            <Avatar className='w-8 h-8'>
+              <AvatarImage src={user.metadata.picture} alt={getDisplayName(user)} />
+              <AvatarFallback>{getDisplayName(user)?.charAt(0) || <UserIcon />}</AvatarFallback>
+            </Avatar>
+            <div className='flex-1 truncate'>
+              <p className='text-sm font-medium'>{getDisplayName(user)}</p>
+              {getNip05(user) && (
+                <p className='text-xs text-muted-foreground truncate'>
+                  {getNip05(user)}
+                </p>
+              )}
+            </div>
+            {user.id === currentUser.id && <div className='w-2 h-2 rounded-full bg-primary'></div>}
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        <WalletModal>
+          <DropdownMenuItem
+            className='flex items-center gap-2 cursor-pointer p-2 rounded-md'
+            onSelect={(e) => e.preventDefault()}
+          >
+            <Wallet className='w-4 h-4' />
+            <span>Wallet Settings</span>
+          </DropdownMenuItem>
+        </WalletModal>
+        <DropdownMenuItem
+          onClick={onAddAccountClick}
+          className='flex items-center gap-2 cursor-pointer p-2 rounded-md'
+        >
+          <UserPlus className='w-4 h-4' />
+          <span>Add another account</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => removeLogin(currentUser.id)}
+          className='flex items-center gap-2 cursor-pointer p-2 rounded-md text-red-500'
+        >
+          <LogOut className='w-4 h-4' />
+          <span>Log out</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
\ No newline at end of file
diff --git a/src/src/components/auth/AmberCallbackHandler.tsx b/src/src/components/auth/AmberCallbackHandler.tsx
new file mode 100644
index 0000000..c1580bc
--- /dev/null
+++ b/src/src/components/auth/AmberCallbackHandler.tsx
@@ -0,0 +1,229 @@
+/**
+ * AmberCallbackHandler
+ * 
+ * This component handles Amber (NIP-55) callbacks at the app level.
+ * It processes results from Amber after signing operations and login.
+ * 
+ * For web apps, Amber communication works via URL redirects:
+ * 1. App opens nostrsigner: URL to request signing
+ * 2. Amber opens and user approves/rejects
+ * 3. Amber redirects back to callbackUrl with result in query params
+ * 4. This component processes the result
+ * 
+ * PWA NOTE: PWAs can lose localStorage when redirecting to external apps.
+ * This handler uses multiple fallback strategies:
+ * 1. Check localStorage, sessionStorage, and IndexedDB for pending operation
+ * 2. If all storage is lost but result looks like a pubkey, assume it's a login
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import { useLoginActions } from '@/hooks/useLoginActions';
+import { useToast } from '@/hooks/useToast';
+import {
+  isAmberCallback,
+  getAmberCallbackResult,
+  getAmberPendingOperationAsync,
+  clearAmberPendingOperation,
+  cleanAmberCallbackUrl,
+} from '@/lib/amber';
+
+export function AmberCallbackHandler() {
+  const login = useLoginActions();
+  const { toast } = useToast();
+  const hasProcessed = useRef(false);
+  const [debugInfo, setDebugInfo] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Log on mount for debugging
+    console.log('[AmberCallback] Component mounted');
+    console.log('[AmberCallback] URL:', window.location.href);
+    console.log('[AmberCallback] Search:', window.location.search);
+    console.log('[AmberCallback] Pre-captured event:', sessionStorage.getItem('amber_callback_event'));
+    
+    // Check if this is an Amber callback
+    const isCallback = isAmberCallback();
+    console.log('[AmberCallback] isAmberCallback():', isCallback);
+    
+    if (!isCallback) {
+      return;
+    }
+    
+    // Only process once per page load
+    if (hasProcessed.current) {
+      console.log('[AmberCallback] Already processed, skipping');
+      return;
+    }
+    hasProcessed.current = true;
+
+    console.log('[AmberCallback] Processing Amber callback...');
+    
+    // Show debug info temporarily
+    setDebugInfo('Processing Amber login...');
+
+    // Process async to allow IndexedDB lookup
+    processAmberCallback();
+
+    async function processAmberCallback() {
+      const result = getAmberCallbackResult();
+      
+      console.log('[AmberCallback] Result:', result);
+      setDebugInfo(`Got result: ${result ? result.substring(0, 16) + '...' : 'null'}`);
+
+      // Clean up URL immediately to prevent re-processing on refresh
+      cleanAmberCallbackUrl();
+
+      if (!result) {
+        // User cancelled or Amber failed
+        clearAmberPendingOperation();
+        setDebugInfo('No result from Amber');
+        toast({
+          title: 'Amber',
+          description: 'No result received from Amber. Operation may have been cancelled.',
+          variant: 'destructive',
+        });
+        return;
+      }
+
+      // Try to get pending operation from any storage
+      const pendingOp = await getAmberPendingOperationAsync();
+      console.log('[AmberCallback] Pending operation:', pendingOp);
+
+      // FALLBACK: If no pending operation found, but result looks like a valid pubkey,
+      // assume this is a login callback (PWA storage was cleared during redirect)
+      const pubkeyRegex = /^[0-9a-fA-F]{64}$/;
+      
+      if (!pendingOp) {
+        console.warn('[AmberCallback] No pending operation found - storage may have been cleared');
+        
+        // Check if result looks like a pubkey (login callback)
+        if (pubkeyRegex.test(result)) {
+          console.log('[AmberCallback] Result looks like pubkey, treating as login callback');
+          setDebugInfo('Valid pubkey! Logging in...');
+          try {
+            login.amber(result.toLowerCase());
+            setDebugInfo('Login successful!');
+            toast({
+              title: 'Logged in',
+              description: 'Successfully logged in with Amber!',
+            });
+            // Clear debug after success
+            setTimeout(() => setDebugInfo(null), 2000);
+            return;
+          } catch (error) {
+            console.error('[AmberCallback] Amber login failed:', error);
+            setDebugInfo(`Login error: ${error}`);
+            toast({
+              title: 'Login failed',
+              description: 'Failed to complete Amber login. Please try again.',
+              variant: 'destructive',
+            });
+            return;
+          }
+        }
+        
+        // Not a pubkey - can't determine what operation this was for
+        setDebugInfo(`Invalid result format: ${result.substring(0, 20)}...`);
+        toast({
+          title: 'Amber',
+          description: 'Session data was lost. Please try again.',
+          variant: 'destructive',
+        });
+        return;
+      }
+
+      // Process based on operation type
+      switch (pendingOp.type) {
+        case 'get_public_key': {
+          console.log('[AmberCallback] Processing get_public_key...');
+          
+          if (pubkeyRegex.test(result)) {
+            try {
+              login.amber(result.toLowerCase());
+              clearAmberPendingOperation();
+              console.log('[AmberCallback] Login successful!');
+              toast({
+                title: 'Logged in',
+                description: 'Successfully logged in with Amber!',
+              });
+            } catch (error) {
+              console.error('[AmberCallback] Amber login failed:', error);
+              clearAmberPendingOperation();
+              toast({
+                title: 'Login failed',
+                description: 'Failed to complete Amber login. Please try again.',
+                variant: 'destructive',
+              });
+            }
+          } else {
+            console.warn('[AmberCallback] Invalid pubkey format:', result);
+            clearAmberPendingOperation();
+            toast({
+              title: 'Login failed',
+              description: 'Invalid pubkey received from Amber.',
+              variant: 'destructive',
+            });
+          }
+          break;
+        }
+
+        case 'sign_event': {
+          // Store the signed event result for the caller to retrieve
+          // This is tricky because the original caller's promise can't be resolved
+          // after a page redirect. For now, we'll store it and show a toast.
+          try {
+            const signedEvent = JSON.parse(result);
+            // Store in sessionStorage for potential retrieval
+            sessionStorage.setItem('amber_signed_event', JSON.stringify(signedEvent));
+            clearAmberPendingOperation();
+            toast({
+              title: 'Event signed',
+              description: 'Your event has been signed by Amber.',
+            });
+            // Reload the page to re-submit the event
+            // This is a workaround since we can't resolve the original promise
+            window.location.reload();
+          } catch (e) {
+            console.error('Failed to parse signed event:', e);
+            clearAmberPendingOperation();
+            toast({
+              title: 'Signing failed',
+              description: 'Failed to process signed event from Amber.',
+              variant: 'destructive',
+            });
+          }
+          break;
+        }
+
+        case 'nip04_encrypt':
+        case 'nip44_encrypt':
+        case 'nip04_decrypt':
+        case 'nip44_decrypt': {
+          // Store encryption/decryption results
+          sessionStorage.setItem('amber_crypto_result', result);
+          clearAmberPendingOperation();
+          toast({
+            title: 'Operation complete',
+            description: `${pendingOp.type.replace('_', ' ')} completed.`,
+          });
+          break;
+        }
+
+        default: {
+          console.warn('Unknown Amber operation type:', pendingOp.type);
+          clearAmberPendingOperation();
+        }
+      }
+    }
+  }, [login, toast]);
+
+  // Show debug overlay when processing Amber callback
+  if (debugInfo) {
+    return (
+      <div className="fixed top-0 left-0 right-0 z-[9999] bg-yellow-500 text-black px-4 py-2 text-center text-sm font-mono">
+        🔐 Amber: {debugInfo}
+      </div>
+    );
+  }
+
+  return null;
+}
diff --git a/src/src/components/auth/LoginArea.tsx b/src/src/components/auth/LoginArea.tsx
new file mode 100644
index 0000000..be48e02
--- /dev/null
+++ b/src/src/components/auth/LoginArea.tsx
@@ -0,0 +1,116 @@
+// NOTE: This file is stable and usually should not be modified.
+// It is important that all functionality in this file is preserved, and should only be modified if explicitly requested.
+
+import { useState } from 'react';
+import { User, UserPlus } from 'lucide-react';
+import { Button } from '@/components/ui/button.tsx';
+import LoginDialog from './LoginDialog';
+import SignupDialog from './SignupDialog';
+import SignupMethodDialog from './SignupMethodDialog';
+import MnemonicSignupDialog from './MnemonicSignupDialog';
+import { useLoggedInAccounts } from '@/hooks/useLoggedInAccounts';
+import { AccountSwitcher } from './AccountSwitcher';
+import { cn } from '@/lib/utils';
+
+export interface LoginAreaProps {
+  className?: string;
+  /** Compact mode for mobile headers - smaller buttons without text */
+  compact?: boolean;
+}
+
+export function LoginArea({ className, compact }: LoginAreaProps) {
+  const { currentUser } = useLoggedInAccounts();
+  const [loginDialogOpen, setLoginDialogOpen] = useState(false);
+  const [signupMethodDialogOpen, setSignupMethodDialogOpen] = useState(false);
+  const [mnemonicSignupDialogOpen, setMnemonicSignupDialogOpen] = useState(false);
+  const [nsecSignupDialogOpen, setNsecSignupDialogOpen] = useState(false);
+
+  const handleLogin = () => {
+    setLoginDialogOpen(false);
+    setSignupMethodDialogOpen(false);
+    setMnemonicSignupDialogOpen(false);
+    setNsecSignupDialogOpen(false);
+  };
+
+  return (
+    <div className={cn("inline-flex items-center justify-center", className)}>
+      {currentUser ? (
+        <AccountSwitcher onAddAccountClick={() => setLoginDialogOpen(true)} />
+      ) : compact ? (
+        // Compact mode for mobile headers - icon only
+        <div className="flex gap-1 justify-center">
+          <Button
+            onClick={() => setSignupMethodDialogOpen(true)}
+            size="icon"
+            className='h-9 w-9 rounded-full bg-[#ccff00] text-black hover:bg-[#ccff00]/90'
+            title="Sign Up"
+          >
+            <UserPlus className='w-4 h-4' />
+          </Button>
+          <Button
+            onClick={() => setLoginDialogOpen(true)}
+            variant="outline"
+            size="icon"
+            className="h-9 w-9 rounded-full border border-gray-600 hover:border-[#ff0040]"
+            title="Log In"
+          >
+            <User className='w-4 h-4' />
+          </Button>
+        </div>
+      ) : (
+        // Default full-size buttons
+        <div className="flex gap-3 justify-center w-full">
+          <Button
+            onClick={() => setSignupMethodDialogOpen(true)}
+            className='flex items-center gap-2 px-5 py-2.5 rounded-full bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold transition-all flex-1 sm:flex-none'
+          >
+            <UserPlus className='w-4 h-4' />
+            <span>Sign Up</span>
+          </Button>
+          <Button
+            onClick={() => setLoginDialogOpen(true)}
+            variant="outline"
+            className="flex items-center gap-2 px-5 py-2.5 rounded-full font-medium transition-all border-2 border-gray-600 hover:border-[#ff0040] flex-1 sm:flex-none"
+          >
+            <User className='w-4 h-4' />
+            <span className='truncate'>Log In</span>
+          </Button>
+        </div>
+      )}
+
+      <LoginDialog
+        isOpen={loginDialogOpen}
+        onClose={() => setLoginDialogOpen(false)}
+        onLogin={handleLogin}
+        onSignup={() => setSignupMethodDialogOpen(true)}
+      />
+
+      <SignupMethodDialog
+        isOpen={signupMethodDialogOpen}
+        onClose={() => setSignupMethodDialogOpen(false)}
+        onSelectMnemonic={() => {
+          setSignupMethodDialogOpen(false);
+          setMnemonicSignupDialogOpen(true);
+        }}
+        onSelectNsec={() => {
+          setSignupMethodDialogOpen(false);
+          setNsecSignupDialogOpen(true);
+        }}
+      />
+
+      <MnemonicSignupDialog
+        isOpen={mnemonicSignupDialogOpen}
+        onClose={() => setMnemonicSignupDialogOpen(false)}
+        onSwitchToNsec={() => {
+          setMnemonicSignupDialogOpen(false);
+          setNsecSignupDialogOpen(true);
+        }}
+      />
+
+      <SignupDialog
+        isOpen={nsecSignupDialogOpen}
+        onClose={() => setNsecSignupDialogOpen(false)}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/src/components/auth/LoginDialog.tsx b/src/src/components/auth/LoginDialog.tsx
new file mode 100644
index 0000000..fffef8d
--- /dev/null
+++ b/src/src/components/auth/LoginDialog.tsx
@@ -0,0 +1,501 @@
+// NOTE: This file is stable and usually should not be modified.
+// It is important that all functionality in this file is preserved, and should only be modified if explicitly requested.
+
+import React, { useState, useEffect } from 'react';
+import { Shield, AlertTriangle, UserPlus, Sparkles, Cloud, Smartphone, ClipboardPaste, Check, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Dialog, DialogContent, DialogHeader, DialogDescription } from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { useLoginActions } from '@/hooks/useLoginActions';
+import { useToast } from '@/hooks/useToast';
+import { cn } from '@/lib/utils';
+
+interface LoginDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onLogin: () => void;
+  onSignup?: () => void;
+}
+
+const validateBunkerUri = (uri: string) => {
+  return uri.startsWith('bunker://');
+};
+
+const LoginDialog: React.FC<LoginDialogProps> = ({ isOpen, onClose, onLogin, onSignup }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [bunkerUri, setBunkerUri] = useState('');
+  const [errors, setErrors] = useState<{
+    bunker?: string;
+    extension?: string;
+    amber?: string;
+  }>({});
+  const [amberStep, setAmberStep] = useState<'initial' | 'waiting' | 'success'>('initial');
+  const [amberPubkeyInput, setAmberPubkeyInput] = useState('');
+  const login = useLoginActions();
+  const { toast } = useToast();
+
+  // Reset all state when dialog opens/closes
+  useEffect(() => {
+    if (isOpen) {
+      // Reset state when dialog opens
+      setIsLoading(false);
+      setBunkerUri('');
+      setErrors({});
+      setAmberStep('initial');
+      setAmberPubkeyInput('');
+    }
+  }, [isOpen]);
+
+  const handleExtensionLogin = async () => {
+    setIsLoading(true);
+    setErrors(prev => ({ ...prev, extension: undefined }));
+
+    try {
+      if (!('nostr' in window)) {
+        throw new Error('Nostr extension not found. Please install a NIP-07 extension.');
+      }
+      await login.extension();
+      onLogin();
+      onClose();
+    } catch (e: unknown) {
+      const error = e as Error;
+      console.error('Bunker login failed:', error);
+      console.error('Nsec login failed:', error);
+      console.error('Extension login failed:', error);
+      setErrors(prev => ({
+        ...prev,
+        extension: error instanceof Error ? error.message : 'Extension login failed'
+      }));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleAmberLogin = () => {
+    // For PWA: Open Amber WITHOUT callback URL so it copies to clipboard
+    // Then user can paste the pubkey
+    setAmberStep('waiting');
+    setErrors(prev => ({ ...prev, amber: undefined }));
+    
+    // Open Amber without callback - it will copy pubkey to clipboard
+    const amberUrl = 'nostrsigner:?compressionType=none&returnType=signature&type=get_public_key';
+    window.location.href = amberUrl;
+  };
+
+  const handleAmberPaste = async () => {
+    setErrors(prev => ({ ...prev, amber: undefined }));
+    
+    try {
+      // Try to read from clipboard
+      const text = await navigator.clipboard.readText();
+      const pubkey = text.trim().toLowerCase();
+      
+      // Validate pubkey format (64 hex characters)
+      const pubkeyRegex = /^[0-9a-f]{64}$/;
+      if (!pubkeyRegex.test(pubkey)) {
+        setErrors(prev => ({ 
+          ...prev, 
+          amber: 'Invalid pubkey format. Make sure Amber copied the pubkey to clipboard.' 
+        }));
+        return;
+      }
+      
+      // Complete login
+      login.amber(pubkey);
+      setAmberStep('success');
+      toast({
+        title: 'Logged in',
+        description: 'Successfully logged in with Amber!',
+      });
+      
+      setTimeout(() => {
+        onLogin();
+        onClose();
+      }, 500);
+      
+    } catch (error) {
+      console.error('Clipboard read failed:', error);
+      setErrors(prev => ({ 
+        ...prev, 
+        amber: 'Could not read clipboard. Please paste your pubkey manually below.' 
+      }));
+    }
+  };
+
+  const handleAmberManualInput = () => {
+    const pubkey = amberPubkeyInput.trim().toLowerCase();
+    
+    // Validate pubkey format (64 hex characters)
+    const pubkeyRegex = /^[0-9a-f]{64}$/;
+    if (!pubkeyRegex.test(pubkey)) {
+      setErrors(prev => ({ 
+        ...prev, 
+        amber: 'Invalid pubkey. Must be 64 hexadecimal characters.' 
+      }));
+      return;
+    }
+    
+    // Complete login
+    login.amber(pubkey);
+    setAmberStep('success');
+    toast({
+      title: 'Logged in',
+      description: 'Successfully logged in with Amber!',
+    });
+    
+    setTimeout(() => {
+      onLogin();
+      onClose();
+    }, 500);
+  };
+
+  const handleBunkerLogin = async () => {
+    if (!bunkerUri.trim()) {
+      setErrors(prev => ({ ...prev, bunker: 'Please enter a bunker URI' }));
+      return;
+    }
+
+    if (!validateBunkerUri(bunkerUri)) {
+      setErrors(prev => ({ ...prev, bunker: 'Invalid bunker URI format. Must start with bunker://' }));
+      return;
+    }
+
+    setIsLoading(true);
+    setErrors(prev => ({ ...prev, bunker: undefined }));
+
+    try {
+      await login.bunker(bunkerUri);
+      onLogin();
+      onClose();
+      // Clear the URI from memory
+      setBunkerUri('');
+    } catch {
+      setErrors(prev => ({
+        ...prev,
+        bunker: 'Failed to connect to bunker. Please check the URI.'
+      }));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSignupClick = () => {
+    onClose();
+    if (onSignup) {
+      onSignup();
+    }
+  };
+
+  // Detect device type for better UX
+  const isAndroid = /Android/i.test(navigator.userAgent);
+  const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
+  const isMobile = isAndroid || isIOS;
+  const hasExtension = typeof window !== 'undefined' && 'nostr' in window;
+
+  // Detect best default tab based on device and browser capabilities
+  const getDefaultTab = () => {
+    // Android - Amber is the best option
+    if (isAndroid) return 'amber';
+    
+    // iOS - Bunker is recommended (no Amber support)
+    if (isIOS) return 'bunker';
+    
+    // Desktop with extension - use extension
+    if (hasExtension) return 'extension';
+    
+    // Desktop without extension - show extension tab with install prompt
+    return 'extension';
+  };
+  
+  const defaultTab = getDefaultTab();
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent
+        className={cn("w-[calc(100%-1rem)] sm:max-w-md max-h-[90vh] max-h-[90dvh] p-0 overflow-hidden rounded-2xl bg-black border-2 border-[#ff0040]/50")}
+      >
+        <DialogHeader className={cn('px-4 sm:px-6 pt-4 sm:pt-6 pb-1 relative')}>
+
+            <DialogDescription className="text-center text-sm">
+              Sign up or log in to continue
+            </DialogDescription>
+        </DialogHeader>
+        <div className='px-4 sm:px-6 pt-2 pb-4 space-y-4 overflow-y-auto flex-1'>
+          {/* Prominent Sign Up Section */}
+          <div className='relative p-6 rounded-2xl bg-black border-2 border-[#ccff00]/50 overflow-hidden'>
+            {/* Neon glow effect */}
+            <div className="absolute inset-0 bg-[#ccff00]/5 blur-xl"></div>
+
+            <div className='relative z-10 text-center space-y-3'>
+              <div className='flex justify-center items-center gap-2 mb-2'>
+                <Sparkles className='w-5 h-5 text-[#ccff00]' />
+                <span className='font-bold text-[#ccff00] uppercase tracking-wide' style={{
+                  textShadow: '0 0 10px #ccff00'
+                }}>
+                  New here?
+                </span>
+              </div>
+              <p className='text-sm text-gray-300'>
+                Create a free account in seconds. No email required.
+              </p>
+              <Button
+                onClick={handleSignupClick}
+                className='w-full rounded-full py-4 text-base font-bold bg-[#ccff00] text-black hover:bg-[#ccff00]/90 transform transition-all duration-200 hover:scale-105 shadow-[0_0_20px_rgba(204,255,0,0.5)] border-0 uppercase tracking-wide'
+              >
+                <UserPlus className='w-4 h-4 mr-2' />
+                <span>Create Account</span>
+              </Button>
+            </div>
+          </div>
+
+          {/* Divider */}
+          <div className='relative'>
+            <div className='absolute inset-0 flex items-center'>
+              <div className='w-full border-t border-gray-300 dark:border-gray-600'></div>
+            </div>
+            <div className='relative flex justify-center text-sm'>
+              <span className='px-3 bg-background text-muted-foreground'>
+                <span>Or log in</span>
+              </span>
+            </div>
+          </div>
+
+          {/* Login Methods */}
+          <Tabs defaultValue={defaultTab} className="w-full">
+            <TabsList className="grid w-full grid-cols-3 bg-black/50 border border-[#ff0040]/30 rounded-lg mb-4 h-auto p-1">
+              <TabsTrigger value="extension" className="flex flex-col sm:flex-row items-center gap-0.5 sm:gap-1 text-[10px] sm:text-sm py-1.5 sm:py-2 px-1 sm:px-3">
+                <Shield className="w-4 h-4" />
+                <span className="hidden sm:inline">Extension</span>
+                <span className="sm:hidden">Ext</span>
+              </TabsTrigger>
+              <TabsTrigger value="amber" className="flex flex-col sm:flex-row items-center gap-0.5 sm:gap-1 text-[10px] sm:text-sm py-1.5 sm:py-2 px-1 sm:px-3">
+                <Smartphone className="w-4 h-4" />
+                <span>Amber</span>
+              </TabsTrigger>
+              <TabsTrigger value="bunker" className="flex flex-col sm:flex-row items-center gap-0.5 sm:gap-1 text-[10px] sm:text-sm py-1.5 sm:py-2 px-1 sm:px-3">
+                <Cloud className="w-4 h-4" />
+                <span className="hidden sm:inline">Bunker</span>
+                <span className="sm:hidden">Bnk</span>
+              </TabsTrigger>
+            </TabsList>
+            <TabsContent value='extension' className='space-y-3'>
+              {errors.extension && (
+                <Alert variant="destructive" className="bg-red-950/50 border-red-500/50">
+                  <AlertTriangle className="h-4 w-4" />
+                  <AlertDescription className="text-sm">
+                    <strong>No extension detected.</strong> Try using the <strong>Create Account</strong> button above{isAndroid ? ', or use Amber on Android' : isIOS ? ', or use Bunker for iOS' : ''}.
+                  </AlertDescription>
+                </Alert>
+              )}
+              <div className='text-center p-6 rounded-lg bg-black/50 border-2 border-[#ff0040]/30'>
+                <Shield className='w-12 h-12 mx-auto mb-3 text-[#ff0040]' />
+                <p className='text-sm text-gray-300 mb-2 font-bold'>
+                  {isMobile ? 'Browser Extension' : 'One-Click Login (Desktop)'}
+                </p>
+                <p className='text-xs text-gray-400 mb-4'>
+                  {isMobile 
+                    ? 'Works with mobile browsers that have Nostr extensions (e.g., Kiwi Browser + Alby).'
+                    : 'Best for desktop browsers with Alby, nos2x, or similar extensions installed.'
+                  }
+                </p>
+                <div className="flex justify-center">
+                  <Button
+                    className='w-full rounded-full py-4 bg-[#ff0040] hover:bg-[#ff0040]/90 border-2 border-[#ff0040] shadow-[0_0_20px_rgba(255,0,64,0.5)] font-bold uppercase'
+                    onClick={handleExtensionLogin}
+                    disabled={isLoading}
+                  >
+                    {isLoading ? 'Logging in...' : 'Login with Extension'}
+                  </Button>
+                </div>
+              </div>
+            </TabsContent>
+
+            <TabsContent value='amber' className='space-y-3'>
+              {isIOS && (
+                <Alert className="bg-yellow-950/50 border-yellow-500/50">
+                  <AlertTriangle className="h-4 w-4 text-yellow-500" />
+                  <AlertDescription className="text-sm text-yellow-200">
+                    Amber is Android-only. For iOS, use <strong>Bunker</strong> (nsec.app or Nostrum).
+                  </AlertDescription>
+                </Alert>
+              )}
+              
+              {/* Step 1: Open Amber */}
+              {amberStep === 'initial' && (
+                <div className='text-center p-6 rounded-lg bg-black/50 border-2 border-[#ccff00]/30'>
+                  <Smartphone className='w-12 h-12 mx-auto mb-3 text-[#ccff00]' />
+                  <p className='text-sm text-gray-300 mb-2 font-bold'>
+                    Login with Amber (Android)
+                  </p>
+                  <p className='text-xs text-gray-400 mb-4'>
+                    Tap the button below to open Amber. Select your profile and approve the request. Then return here to complete login.
+                  </p>
+                  <div className="flex justify-center">
+                    <Button
+                      className='w-full rounded-full py-4 bg-[#ccff00] text-black hover:bg-[#ccff00]/90 border-2 border-[#ccff00] shadow-[0_0_20px_rgba(204,255,0,0.5)] font-bold uppercase'
+                      onClick={handleAmberLogin}
+                      disabled={isLoading || isIOS}
+                    >
+                      {isIOS ? 'Not available on iOS' : '1. Open Amber'}
+                    </Button>
+                  </div>
+                  <p className='text-xs text-gray-400 mt-3'>
+                    Don't have Amber? <a href="https://github.com/greenart7c3/Amber" target="_blank" rel="noopener noreferrer" className="text-[#ccff00] hover:underline">Download from GitHub</a> or F-Droid
+                  </p>
+                </div>
+              )}
+              
+              {/* Step 2: Paste from clipboard */}
+              {amberStep === 'waiting' && (
+                <div className='text-center p-6 rounded-lg bg-black/50 border-2 border-[#ccff00]/30'>
+                  <ClipboardPaste className='w-12 h-12 mx-auto mb-3 text-[#ccff00]' />
+                  <p className='text-sm text-gray-300 mb-2 font-bold'>
+                    Step 2: Complete Login
+                  </p>
+                  <p className='text-xs text-gray-400 mb-4'>
+                    After approving in Amber, your pubkey was copied to clipboard. Tap the button below to paste it and complete login.
+                  </p>
+                  
+                  {errors.amber && (
+                    <Alert variant="destructive" className="mb-4 bg-red-950/50 border-red-500/50 text-left">
+                      <AlertTriangle className="h-4 w-4" />
+                      <AlertDescription className="text-sm">{errors.amber}</AlertDescription>
+                    </Alert>
+                  )}
+                  
+                  <div className="space-y-3">
+                    <Button
+                      className='w-full rounded-full py-4 bg-[#ccff00] text-black hover:bg-[#ccff00]/90 border-2 border-[#ccff00] shadow-[0_0_20px_rgba(204,255,0,0.5)] font-bold uppercase'
+                      onClick={handleAmberPaste}
+                    >
+                      <ClipboardPaste className="w-4 h-4 mr-2" />
+                      2. Paste from Clipboard
+                    </Button>
+                    
+                    <div className="text-xs text-gray-500">or paste manually:</div>
+                    
+                    <div className="flex gap-2">
+                      <Input
+                        value={amberPubkeyInput}
+                        onChange={(e) => setAmberPubkeyInput(e.target.value)}
+                        placeholder="Paste your pubkey (64 hex chars)"
+                        className="flex-1 text-xs"
+                      />
+                      <Button
+                        onClick={handleAmberManualInput}
+                        disabled={!amberPubkeyInput.trim()}
+                        className="bg-[#ccff00]/20 text-[#ccff00] hover:bg-[#ccff00]/30"
+                      >
+                        Go
+                      </Button>
+                    </div>
+                    
+                    <Button
+                      variant="ghost"
+                      className="w-full text-xs text-gray-500"
+                      onClick={() => setAmberStep('initial')}
+                    >
+                      ← Back to Step 1
+                    </Button>
+                  </div>
+                </div>
+              )}
+              
+              {/* Success state */}
+              {amberStep === 'success' && (
+                <div className='text-center p-6 rounded-lg bg-black/50 border-2 border-green-500/30'>
+                  <Check className='w-12 h-12 mx-auto mb-3 text-green-500' />
+                  <p className='text-sm text-green-400 mb-2 font-bold'>
+                    Successfully logged in!
+                  </p>
+                  <Loader2 className="w-6 h-6 mx-auto animate-spin text-green-500" />
+                </div>
+              )}
+            </TabsContent>
+
+            <TabsContent value='bunker' className='space-y-4'>
+              {isIOS && (
+                <Alert className="bg-blue-950/50 border-blue-500/50">
+                  <Cloud className="h-4 w-4 text-blue-400" />
+                  <AlertDescription className="text-sm text-blue-200">
+                    <strong>Recommended for iOS!</strong> Use nsec.app for the best experience on iPhone/iPad.
+                  </AlertDescription>
+                </Alert>
+              )}
+              <div className='text-center p-6 rounded-lg bg-black/50 border-2 border-blue-500/30'>
+                <Cloud className='w-12 h-12 mx-auto mb-3 text-blue-400' />
+                <p className='text-sm text-gray-300 mb-2 font-bold'>
+                  Login with Nostr Connect {isIOS && '(Best for iOS)'}
+                </p>
+                <p className='text-xs text-gray-400 mb-4'>
+                  {isIOS 
+                    ? 'Works on any device! Get a bunker:// connection string from nsec.app and paste it below.'
+                    : 'Access your account from any device using a remote signer (bunker). Your keys stay safe on the server.'
+                  }
+                </p>
+                
+                <div className='space-y-2'>
+                  <label htmlFor='bunkerUri' className='text-sm font-medium block text-left'>
+                    Bunker Connection String
+                  </label>
+                  <Input
+                    id='bunkerUri'
+                    value={bunkerUri}
+                    onChange={(e) => {
+                      setBunkerUri(e.target.value);
+                      if (errors.bunker) setErrors(prev => ({ ...prev, bunker: undefined }));
+                    }}
+                    className={`rounded-lg ${
+                      errors.bunker ? 'border-red-500' : ''
+                    }`}
+                    placeholder='bunker://...'
+                    autoComplete="off"
+                  />
+                  {errors.bunker && (
+                    <p className="text-sm text-red-500">{errors.bunker}</p>
+                  )}
+                </div>
+
+                <div className="flex justify-center mt-4">
+                  <Button
+                    className='w-full rounded-full py-4 bg-blue-500 hover:bg-blue-600 border-2 border-blue-500 shadow-[0_0_20px_rgba(59,130,246,0.5)] font-bold uppercase'
+                    onClick={handleBunkerLogin}
+                    disabled={isLoading || !bunkerUri.trim()}
+                  >
+                    {isLoading ? 'Connecting...' : 'Connect to Bunker'}
+                  </Button>
+                </div>
+
+                <div className='mt-4 pt-4 border-t border-gray-700'>
+                  <p className='text-xs text-gray-500 mb-2'>Get a bunker connection from:</p>
+                  <div className="flex flex-wrap gap-2 justify-center">
+                    <a 
+                      href="https://nsec.app" 
+                      target="_blank" 
+                      rel="noopener noreferrer"
+                      className="text-xs px-3 py-1 bg-blue-500/20 text-blue-400 rounded-full hover:bg-blue-500/30 transition-colors"
+                    >
+                      nsec.app →
+                    </a>
+                    <a 
+                      href="https://nostrum.social" 
+                      target="_blank" 
+                      rel="noopener noreferrer"
+                      className="text-xs px-3 py-1 bg-blue-500/20 text-blue-400 rounded-full hover:bg-blue-500/30 transition-colors"
+                    >
+                      Nostrum →
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </DialogContent>
+    </Dialog>
+    );
+  };
+
+export default LoginDialog;
diff --git a/src/src/components/auth/MnemonicSignupDialog.tsx b/src/src/components/auth/MnemonicSignupDialog.tsx
new file mode 100644
index 0000000..d7b3f0b
--- /dev/null
+++ b/src/src/components/auth/MnemonicSignupDialog.tsx
@@ -0,0 +1,453 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Download, Copy, CheckCircle, Eye, EyeOff, ArrowRight, RefreshCw, Shield, ExternalLink } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Card, CardContent } from '@/components/ui/card';
+import { toast } from '@/hooks/useToast';
+import { useLoginActions } from '@/hooks/useLoginActions';
+import { nip19 } from 'nostr-tools';
+import { cn } from '@/lib/utils';
+import { 
+  generateMnemonicPhrase,
+  privateKeyFromMnemonic,
+  mnemonicToWords,
+  wordsToMnemonic 
+} from '@/lib/nip06';
+import QRCode from 'qrcode';
+
+interface MnemonicSignupDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSwitchToNsec: () => void;
+}
+
+const MnemonicSignupDialog: React.FC<MnemonicSignupDialogProps> = ({ 
+  isOpen, 
+  onClose,
+  onSwitchToNsec 
+}) => {
+  const [step, setStep] = useState<'generate' | 'verify' | 'complete'>('generate');
+  const [mnemonic, setMnemonic] = useState('');
+  const [words, setWords] = useState<string[]>([]);
+  const [showMnemonic, setShowMnemonic] = useState(true);
+  const [verifyIndices, setVerifyIndices] = useState<number[]>([]);
+  const [verifyInputs, setVerifyInputs] = useState<Record<number, string>>({});
+  const [isVerified, setIsVerified] = useState(false);
+  const login = useLoginActions();
+
+  // Generate new mnemonic
+  const handleGenerate = () => {
+    const newMnemonic = generateMnemonicPhrase(128); // 12 words
+    setMnemonic(newMnemonic);
+    setWords(mnemonicToWords(newMnemonic));
+    
+    // Pick 3 random words for verification
+    const indices: number[] = [];
+    while (indices.length < 3) {
+      const rand = Math.floor(Math.random() * 12);
+      if (!indices.includes(rand)) indices.push(rand);
+    }
+    setVerifyIndices(indices.sort((a, b) => a - b));
+    
+    toast({
+      title: 'Recovery Phrase Generated! 🎉',
+      description: 'Write down these 12 words in order. They\'re the key to your account!',
+    });
+  };
+
+  // Download mnemonic as text file
+  const handleDownload = () => {
+    try {
+      const blob = new Blob([mnemonic], { type: 'text/plain; charset=utf-8' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'nostr-recovery-phrase.txt';
+      a.style.display = 'none';
+      document.body.appendChild(a);
+      a.click();
+      URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+      
+      toast({
+        title: 'Recovery Phrase Saved!',
+        description: 'Keep this file in a secure location.',
+      });
+    } catch {
+      toast({
+        title: 'Download failed',
+        description: 'Could not download the file. Please copy manually.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  // Copy to clipboard
+  const handleCopy = () => {
+    navigator.clipboard.writeText(mnemonic);
+    toast({
+      title: 'Copied to clipboard!',
+      description: 'Your recovery phrase has been copied.',
+    });
+  };
+
+  // Generate QR code
+  const handleQR = async () => {
+    try {
+      const qrDataUrl = await QRCode.toDataURL(mnemonic, {
+        width: 300,
+        margin: 2,
+      });
+      
+      // Create a new window with the QR code
+      const win = window.open('', '_blank');
+      if (win) {
+        win.document.write(`
+          <html>
+            <head>
+              <title>Recovery Phrase QR Code</title>
+              <style>
+                body {
+                  display: flex;
+                  flex-direction: column;
+                  align-items: center;
+                  justify-content: center;
+                  min-height: 100vh;
+                  margin: 0;
+                  font-family: system-ui, sans-serif;
+                  background: #000;
+                  color: #fff;
+                }
+                h1 { margin-bottom: 1rem; }
+                img { border: 8px solid #fff; border-radius: 8px; }
+                p { margin-top: 1rem; color: #ff0040; font-weight: bold; }
+              </style>
+            </head>
+            <body>
+              <h1>🔐 Your Recovery Phrase QR Code</h1>
+              <img src="${qrDataUrl}" alt="Recovery Phrase QR Code" />
+              <p>⚠️ Keep this QR code private and secure!</p>
+              <button onclick="window.print()" style="margin-top: 1rem; padding: 0.5rem 1rem; font-size: 16px; cursor: pointer;">
+                Print QR Code
+              </button>
+            </body>
+          </html>
+        `);
+        win.document.close();
+      }
+    } catch {
+      toast({
+        title: 'QR Code failed',
+        description: 'Could not generate QR code.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  // Proceed to verification
+  const handleProceedToVerify = () => {
+    setStep('verify');
+  };
+
+  // Verify the words
+  const handleVerify = () => {
+    const isCorrect = verifyIndices.every((idx) => {
+      return verifyInputs[idx]?.toLowerCase().trim() === words[idx];
+    });
+
+    if (isCorrect) {
+      setIsVerified(true);
+      // Log in with the mnemonic
+      try {
+        const privateKey = privateKeyFromMnemonic(mnemonic);
+        const nsec = nip19.nsecEncode(privateKey);
+        login.nsec(nsec);
+        setStep('complete');
+        
+        toast({
+          title: 'Account Created! 🎉',
+          description: 'You\'re all set! Your recovery phrase is secure.',
+        });
+        
+        // Mark signup as completed
+        localStorage.setItem('signup_completed', Date.now().toString());
+        
+        setTimeout(() => {
+          onClose();
+        }, 2000);
+      } catch {
+        toast({
+          title: 'Login Failed',
+          description: 'Failed to create account. Please try again.',
+          variant: 'destructive',
+        });
+      }
+    } else {
+      toast({
+        title: 'Verification Failed',
+        description: 'The words don\'t match. Please check and try again.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  // Reset and start over
+  const handleStartOver = () => {
+    setMnemonic('');
+    setWords([]);
+    setVerifyInputs({});
+    setIsVerified(false);
+    setStep('generate');
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto bg-gradient-to-br from-gray-900 to-black border-2 border-[#ccff00]/30">
+        <DialogHeader>
+          <DialogTitle className="text-2xl font-black uppercase text-center">
+            <span className="neon-orange">Create Account with</span>{' '}
+            <span className="neon-lime">Recovery Phrase</span>
+          </DialogTitle>
+        </DialogHeader>
+
+        {/* STEP 1: Generate & Backup */}
+        {step === 'generate' && (
+          <div className="space-y-6">
+            {!mnemonic ? (
+              <Card className="bg-black/50 border-[#ccff00]/20">
+                <CardContent className="p-8 text-center space-y-4">
+                  <div className="text-6xl mb-4">🔑</div>
+                  <h3 className="text-xl font-bold text-[#ccff00]">
+                    12-Word Recovery Phrase
+                  </h3>
+                  <p className="text-gray-400 text-sm max-w-md mx-auto">
+                    Your recovery phrase is like a master password. Write it down on paper and keep it safe. 
+                    You'll need it to access your account from other devices or if you clear your browser data.
+                  </p>
+                  <Button
+                    onClick={handleGenerate}
+                    className="w-full max-w-xs bg-gradient-to-r from-[#ff0040] to-[#ff6600] hover:from-[#ff0040]/90 hover:to-[#ff6600]/90 font-bold uppercase"
+                    size="lg"
+                  >
+                    Generate Recovery Phrase
+                  </Button>
+                  <div className="pt-4">
+                    <button
+                      onClick={onSwitchToNsec}
+                      className="text-xs text-gray-500 hover:text-gray-300 underline"
+                    >
+                      Use advanced nsec key instead
+                    </button>
+                  </div>
+                </CardContent>
+              </Card>
+            ) : (
+              <>
+                {/* Recovery phrase display */}
+                <Card className="bg-black/50 border-[#ccff00]/30">
+                  <CardContent className="p-6">
+                    <div className="flex items-center justify-between mb-4">
+                      <h3 className="font-bold text-[#ccff00] uppercase">Your Recovery Phrase</h3>
+                      <div className="flex gap-2">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => setShowMnemonic(!showMnemonic)}
+                          className="text-gray-400 hover:text-white"
+                        >
+                          {showMnemonic ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={handleStartOver}
+                          className="text-gray-400 hover:text-white"
+                        >
+                          <RefreshCw className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+                    
+                    <div className="grid grid-cols-3 gap-3 mb-4">
+                      {words.map((word, idx) => (
+                        <div
+                          key={idx}
+                          className={cn(
+                            "flex items-center gap-2 p-3 rounded-lg border-2",
+                            "bg-gray-900 border-[#ccff00]/20"
+                          )}
+                        >
+                          <span className="text-xs text-gray-500 font-mono">{idx + 1}.</span>
+                          <span className="font-mono text-sm text-white">
+                            {showMnemonic ? word : '••••••'}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+
+                    <div className="flex flex-wrap gap-2 justify-center">
+                      <Button
+                        onClick={handleCopy}
+                        variant="outline"
+                        size="sm"
+                        className="border-[#ccff00]/50 text-[#ccff00] hover:bg-[#ccff00]/10"
+                      >
+                        <Copy className="h-4 w-4 mr-2" />
+                        Copy
+                      </Button>
+                      <Button
+                        onClick={handleDownload}
+                        variant="outline"
+                        size="sm"
+                        className="border-[#ccff00]/50 text-[#ccff00] hover:bg-[#ccff00]/10"
+                      >
+                        <Download className="h-4 w-4 mr-2" />
+                        Download
+                      </Button>
+                      <Button
+                        onClick={handleQR}
+                        variant="outline"
+                        size="sm"
+                        className="border-[#ccff00]/50 text-[#ccff00] hover:bg-[#ccff00]/10"
+                      >
+                        QR Code
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                {/* Warning */}
+                <Card className="bg-[#ff0040]/10 border-2 border-[#ff0040]/50">
+                  <CardContent className="p-6">
+                    <h3 className="font-bold text-[#ff0040] mb-3 uppercase flex items-center gap-2">
+                      <span>⚠️</span> Critical Security Warning
+                    </h3>
+                    <ul className="space-y-2 text-sm text-gray-300">
+                      <li>✍️ <strong>Write it down</strong> on paper and store it safely</li>
+                      <li>🔒 <strong>Never share</strong> your recovery phrase with anyone</li>
+                      <li>💾 <strong>Keep multiple backups</strong> in different secure locations</li>
+                      <li>❌ <strong>Anyone with this phrase</strong> controls your account forever</li>
+                      <li>🚫 <strong>If you lose it</strong>, you lose your account permanently</li>
+                    </ul>
+                  </CardContent>
+                </Card>
+
+                {/* Continue button */}
+                <Button
+                  onClick={handleProceedToVerify}
+                  className="w-full bg-gradient-to-r from-[#ccff00] to-[#00ff00] hover:from-[#ccff00]/90 hover:to-[#00ff00]/90 text-black font-bold uppercase"
+                  size="lg"
+                >
+                  I've Saved It Securely
+                  <ArrowRight className="ml-2 h-5 w-5" />
+                </Button>
+              </>
+            )}
+          </div>
+        )}
+
+        {/* STEP 2: Verify */}
+        {step === 'verify' && (
+          <div className="space-y-6">
+            <Card className="bg-black/50 border-[#ccff00]/30">
+              <CardContent className="p-6">
+                <h3 className="font-bold text-[#ccff00] mb-4 uppercase text-center">
+                  Verify Your Recovery Phrase
+                </h3>
+                <p className="text-gray-400 text-sm mb-6 text-center">
+                  To make sure you've saved it correctly, please enter these words:
+                </p>
+
+                <div className="space-y-4 max-w-md mx-auto">
+                  {verifyIndices.map((idx) => (
+                    <div key={idx} className="space-y-2">
+                      <label className="text-sm text-gray-300 font-mono">
+                        Word #{idx + 1}
+                      </label>
+                      <input
+                        type="text"
+                        value={verifyInputs[idx] || ''}
+                        onChange={(e) => setVerifyInputs({ ...verifyInputs, [idx]: e.target.value })}
+                        placeholder={`Enter word #${idx + 1}`}
+                        className="w-full px-4 py-3 rounded-lg bg-gray-900 border-2 border-[#ccff00]/20 text-white placeholder-gray-600 focus:border-[#ccff00]/50 focus:outline-none font-mono"
+                      />
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+
+            <div className="flex gap-3">
+              <Button
+                onClick={() => setStep('generate')}
+                variant="outline"
+                className="flex-1 border-gray-600 text-gray-400 hover:bg-gray-800"
+              >
+                Go Back
+              </Button>
+              <Button
+                onClick={handleVerify}
+                disabled={!verifyIndices.every((idx) => verifyInputs[idx]?.trim())}
+                className="flex-1 bg-gradient-to-r from-[#ccff00] to-[#00ff00] hover:from-[#ccff00]/90 hover:to-[#00ff00]/90 text-black font-bold uppercase"
+              >
+                Verify & Create Account
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* STEP 3: Complete */}
+        {step === 'complete' && (
+          <div className="py-6 space-y-6">
+            <Card className="bg-gradient-to-br from-[#ccff00]/10 to-[#00ff00]/10 border-2 border-[#ccff00]/50">
+              <CardContent className="p-8 text-center space-y-4">
+                <div className="text-6xl mb-2">✅</div>
+                <h3 className="text-2xl font-black uppercase text-[#ccff00]">
+                  Account Created!
+                </h3>
+                <p className="text-gray-300">
+                  Your Nostr account is ready to go!
+                </p>
+                <CheckCircle className="h-12 w-12 mx-auto text-[#00ff00]" />
+              </CardContent>
+            </Card>
+            
+            {/* Next Steps - Signer Recommendation */}
+            <Card className="bg-blue-950/30 border-2 border-blue-500/30">
+              <CardContent className="p-6 space-y-4">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 rounded-lg bg-blue-500/20">
+                    <Shield className="h-5 w-5 text-blue-400" />
+                  </div>
+                  <div>
+                    <h4 className="font-bold text-blue-400">Recommended: Set Up a Signer App</h4>
+                    <p className="text-xs text-gray-400">Keep your keys extra secure</p>
+                  </div>
+                </div>
+                <p className="text-sm text-gray-300">
+                  For better security, use a dedicated signer app instead of pasting your recovery phrase everywhere. 
+                  Signer apps keep your keys safe while letting you use any Nostr app.
+                </p>
+                <Link to="/signers" onClick={onClose}>
+                  <Button className="w-full bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 border border-blue-500/50">
+                    <ExternalLink className="h-4 w-4 mr-2" />
+                    Learn About Signer Apps
+                  </Button>
+                </Link>
+                <button
+                  onClick={onClose}
+                  className="w-full text-xs text-gray-500 hover:text-gray-400 py-2"
+                >
+                  Skip for now
+                </button>
+              </CardContent>
+            </Card>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default MnemonicSignupDialog;
diff --git a/src/src/components/auth/SignupDialog.tsx b/src/src/components/auth/SignupDialog.tsx
new file mode 100644
index 0000000..f34d9f1
--- /dev/null
+++ b/src/src/components/auth/SignupDialog.tsx
@@ -0,0 +1,845 @@
+// NOTE: This file is stable and usually should not be modified.
+// It is important that all functionality in this file is preserved, and should only be modified if explicitly requested.
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Link } from 'react-router-dom';
+import { Download, Key, UserPlus, FileText, Shield, User, Sparkles, LogIn, CheckCircle, Upload, Globe, Eye, EyeOff, ExternalLink } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Card, CardContent } from '@/components/ui/card';
+import { toast } from '@/hooks/useToast';
+import { useLoginActions } from '@/hooks/useLoginActions';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useUploadFile } from '@/hooks/useUploadFile';
+import { generateSecretKey, getPublicKey, nip19 } from 'nostr-tools';
+import { cn } from '@/lib/utils';
+
+interface SignupDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onComplete?: () => void;
+}
+
+const sanitizeFilename = (filename: string) => {
+  return filename.replace(/[^a-z0-9_.-]/gi, '_');
+}
+
+const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete }) => {
+  const [step, setStep] = useState<'welcome' | 'generate' | 'download' | 'profile' | 'done'>('welcome');
+  const [isLoading, setIsLoading] = useState(false);
+  const [nsec, setNsec] = useState('');
+  const [showSparkles, setShowSparkles] = useState(false);
+  const [keySecured, setKeySecured] = useState<'none' | 'downloaded'>('none');
+  const [showNsec, setShowNsec] = useState(false);
+  const [showNpub, setShowNpub] = useState(false);
+  const [profileData, setProfileData] = useState({
+    name: '',
+    about: '',
+    picture: ''
+  });
+  const login = useLoginActions();
+  const { mutateAsync: publishEvent, isPending: isPublishing } = useNostrPublish();
+  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+  const avatarFileInputRef = useRef<HTMLInputElement>(null);
+
+  // Generate a proper nsec key using nostr-tools
+  const generateKey = () => {
+    setIsLoading(true);
+    setShowSparkles(true);
+
+    // Add a dramatic pause for the key generation effect
+    setTimeout(() => {
+      try {
+        // Generate a new secret key
+        const sk = generateSecretKey();
+
+        // Convert to nsec format
+        setNsec(nip19.nsecEncode(sk));
+        setStep('download');
+
+        toast({
+          title: 'Your Secret Key is Ready!',
+          description: 'A new secret key has been generated for you.',
+        });
+      } catch {
+        toast({
+          title: 'Error',
+          description: 'Failed to generate key. Please try again.',
+          variant: 'destructive',
+        });
+      } finally {
+        setIsLoading(false);
+        setShowSparkles(false);
+      }
+    }, 2000);
+  };
+
+  const downloadKey = () => {
+    try {
+      // Create a blob with the key text
+      const blob = new Blob([nsec], { type: 'text/plain; charset=utf-8' });
+      const url = globalThis.URL.createObjectURL(blob);
+
+      // Sanitize filename
+      const filename = sanitizeFilename('nostr-nsec-key.txt');
+
+      // Create a temporary link element and trigger download
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      a.style.display = 'none';
+      document.body.appendChild(a);
+      a.click();
+
+      // Clean up immediately
+      globalThis.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+
+      // Mark as secured
+      setKeySecured('downloaded');
+
+      toast({
+        title: 'Secret Key Saved!',
+        description: 'Your key has been safely stored.',
+      });
+    } catch {
+      toast({
+        title: 'Download failed',
+        description: 'Could not download the key file. Please copy it manually.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+
+
+  const finishKeySetup = () => {
+    try {
+      login.nsec(nsec);
+      setStep('profile');
+    } catch {
+      toast({
+        title: 'Login Failed',
+        description: 'Failed to login with the generated key. Please try again.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // Reset file input
+    e.target.value = '';
+
+    // Validate file type
+    if (!file.type.startsWith('image/')) {
+      toast({
+        title: 'Invalid file type',
+        description: 'Please select an image file for your avatar.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    // Validate file size (max 5MB)
+    if (file.size > 5 * 1024 * 1024) {
+      toast({
+        title: 'File too large',
+        description: 'Avatar image must be smaller than 5MB.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    try {
+      const tags = await uploadFile(file);
+      // Get the URL from the first tag
+      const url = tags[0]?.[1];
+      if (url) {
+        setProfileData(prev => ({ ...prev, picture: url }));
+        toast({
+          title: 'Avatar uploaded!',
+          description: 'Your avatar has been uploaded successfully.',
+        });
+      }
+    } catch {
+      toast({
+        title: 'Upload failed',
+        description: 'Failed to upload avatar. Please try again.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const finishSignup = async (skipProfile = false) => {
+    // Mark signup completion time for fallback welcome modal
+    localStorage.setItem('signup_completed', Date.now().toString());
+
+    try {
+      // Publish profile if user provided information
+      if (!skipProfile && (profileData.name || profileData.about || profileData.picture)) {
+        const metadata: Record<string, string> = {};
+        if (profileData.name) metadata.name = profileData.name;
+        if (profileData.about) metadata.about = profileData.about;
+        if (profileData.picture) metadata.picture = profileData.picture;
+
+        await publishEvent({
+          kind: 0,
+          content: JSON.stringify(metadata),
+        });
+
+        toast({
+          title: 'Profile Created!',
+          description: 'Your profile has been set up.',
+        });
+      }
+
+      // Show the done step with signer recommendation
+      setStep('done');
+    } catch {
+      toast({
+        title: 'Profile Setup Failed',
+        description: 'Your account was created but profile setup failed. You can update it later.',
+        variant: 'destructive',
+      });
+
+      // Still proceed to completion even if profile failed
+      setStep('done');
+    }
+  };
+  
+  const handleFinishComplete = () => {
+    onClose();
+    if (onComplete) {
+      setTimeout(() => {
+        onComplete();
+      }, 600);
+    } else {
+      toast({
+        title: 'Welcome!',
+        description: 'Your account is ready.',
+      });
+    }
+  };
+
+  const getTitle = () => {
+    if (step === 'welcome') return (
+      <span className="flex items-center justify-center gap-2">
+        Create Your Account
+      </span>
+    );
+    if (step === 'generate') return (
+      <span className="flex items-center justify-center gap-2">
+        Generating Your Key
+      </span>
+    );
+    if (step === 'download') return (
+      <span className="flex items-center justify-center gap-2">
+        Secret Key
+      </span>
+    );
+    if (step === 'profile') return (
+      <span className="flex items-center justify-center gap-2">
+        Create Your Profile
+      </span>
+    );
+    return (
+      <span className="flex items-center justify-center gap-2">
+        Welcome!
+      </span>
+    );
+  };
+
+  // Reset state when dialog opens
+  useEffect(() => {
+    if (isOpen) {
+      setStep('welcome');
+      setIsLoading(false);
+      setNsec('');
+      setShowSparkles(false);
+      setKeySecured('none');
+      setShowNsec(false);
+      setShowNpub(false);
+      setProfileData({ name: '', about: '', picture: '' });
+    }
+  }, [isOpen]);
+
+  // Add sparkle animation effect
+  useEffect(() => {
+    if (showSparkles) {
+      const interval = setInterval(() => {
+        // This will trigger re-renders for sparkle animation
+      }, 100);
+      return () => clearInterval(interval);
+    }
+  }, [showSparkles]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent
+        className={cn("w-[calc(100%-1rem)] sm:max-w-md max-h-[90vh] max-h-[90dvh] p-0 overflow-hidden rounded-2xl flex flex-col")}
+      >
+        <DialogHeader className={cn('px-4 sm:px-6 pt-4 sm:pt-6 pb-1 relative flex-shrink-0')}>
+          <DialogTitle className={cn('font-semibold text-center text-base sm:text-lg')}>
+            {getTitle()}
+          </DialogTitle>
+        </DialogHeader>
+        <div className='px-4 sm:px-6 pt-2 pb-4 space-y-4 overflow-y-auto flex-1'>
+          {/* Welcome Step - New engaging introduction */}
+          {step === 'welcome' && (
+            <div className='text-center space-y-4'>
+              {/* Hero illustration */}
+              <div className='relative p-6 rounded-2xl bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/50 dark:to-indigo-950/50'>
+                <div className='flex justify-center items-center space-x-4 mb-3'>
+                  <div className='relative'>
+                    <UserPlus className='w-12 h-12 text-blue-600' />
+                    <Sparkles className='w-4 h-4 text-yellow-500 absolute -top-1 -right-1 animate-pulse' />
+                  </div>
+                  <Globe className='w-16 h-16 text-blue-700 animate-spin-slow' />
+                  <div className='relative'>
+                    <FileText className='w-12 h-12 text-blue-600' />
+                    <Sparkles className='w-4 h-4 text-yellow-500 absolute -top-1 -left-1 animate-pulse' style={{animationDelay: '0.3s'}} />
+                  </div>
+                </div>
+
+                {/* Benefits */}
+                <div className='grid grid-cols-1 gap-2 text-sm'>
+                  <div className='flex items-center justify-center gap-2 text-blue-700 dark:text-blue-300'>
+                    <Shield className='w-4 h-4' />
+                    Community-run, skater-owned
+                  </div>
+                  <div className='flex items-center justify-center gap-2 text-blue-700 dark:text-blue-300'>
+                    <User className='w-4 h-4' />
+                    You control your account
+                  </div>
+                  <div className='flex items-center justify-center gap-2 text-blue-700 dark:text-blue-300'>
+                    <Globe className='w-4 h-4' />
+                    Connect with skaters worldwide
+                  </div>
+                </div>
+              </div>
+
+              <div className='space-y-3'>
+                <Button
+                  className='w-full rounded-full py-6 text-lg font-bold uppercase bg-[#ccff00] text-black hover:bg-[#ccff00]/90 transform transition-all duration-200 hover:scale-105 shadow-[0_0_20px_rgba(204,255,0,0.5)]'
+                  onClick={() => setStep('generate')}
+                >
+                  <LogIn className='w-5 h-5 mr-2' />
+                  Get Started
+                </Button>
+                <a href="/onboarding" onClick={onClose}>
+                  <Button
+                    variant="outline"
+                    className='w-full rounded-full py-3 border-2 border-[#ff0040]/50 hover:bg-[#ff0040]/10 text-[#ff0040] font-bold uppercase'
+                  >
+                    <Sparkles className='w-4 h-4 mr-2' />
+                    Need Help? View Guide
+                  </Button>
+                </a>
+              </div>
+            </div>
+          )}
+
+          {/* Generate Step - Enhanced with animations */}
+          {step === 'generate' && (
+            <div className='text-center space-y-4'>
+              <div className='relative p-6 rounded-2xl bg-gradient-to-br from-blue-50 to-purple-100 dark:from-blue-950/50 dark:to-purple-950/50 overflow-hidden'>
+                {/* Animated background elements */}
+                {showSparkles && (
+                  <div className='absolute inset-0'>
+                    {[...Array(12)].map((_, i) => (
+                      <Sparkles
+                        key={i}
+                        className={`absolute w-4 h-4 text-yellow-400 animate-ping`}
+                        style={{
+                          left: `${Math.random() * 80 + 10}%`,
+                          top: `${Math.random() * 80 + 10}%`,
+                          animationDelay: `${Math.random() * 2}s`
+                        }}
+                      />
+                    ))}
+                  </div>
+                )}
+
+                <div className='relative z-10'>
+                  {isLoading ? (
+                    <div className='space-y-3'>
+                      <div className='relative'>
+                        <Key className='w-20 h-20 text-primary mx-auto animate-pulse' />
+                        <div className='absolute inset-0 flex items-center justify-center'>
+                          <div className='w-24 h-24 border-4 border-yellow-400 border-t-transparent rounded-full animate-spin'></div>
+                        </div>
+                      </div>
+                      <div className='space-y-2'>
+                        <p className='text-lg font-semibold text-primary flex items-center justify-center gap-2'>
+                          <Sparkles className='w-5 h-5' />
+                          Generating your secret key...
+                        </p>
+                        <p className='text-sm text-muted-foreground'>
+                          Creating your secure key
+                        </p>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className='space-y-3'>
+                      <Key className='w-20 h-20 text-primary mx-auto' />
+                      <div className='space-y-2'>
+                        <p className='text-lg font-semibold'>
+                          Ready to generate your secret key?
+                        </p>
+                        <p className='text-sm text-muted-foreground px-5'>
+                          This key will be your password to access applications within the Nostr network.
+                        </p>
+
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {!isLoading && (
+                <Button
+                  className='w-full rounded-full py-6 text-lg font-semibold bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 transform transition-all duration-200 hover:scale-105 shadow-lg'
+                  onClick={generateKey}
+                  disabled={isLoading}
+                >
+                  <Sparkles className='w-5 h-5 mr-2' />
+                  Generate My Secret Key
+                </Button>
+              )}
+            </div>
+          )}
+
+          {/* Download Step - Whimsical and magical */}
+          {step === 'download' && (
+            <div className='text-center space-y-4'>
+              {/* Key reveal */}
+              <div className='relative p-6 rounded-2xl bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/50 dark:to-indigo-950/50 overflow-hidden'>
+                {/* Sparkles */}
+                <div className='absolute inset-0 pointer-events-none'>
+                  <Sparkles className='absolute top-3 left-4 w-3 h-3 text-yellow-400 animate-pulse' style={{animationDelay: '0s'}} />
+                  <Sparkles className='absolute top-6 right-6 w-3 h-3 text-yellow-500 animate-pulse' style={{animationDelay: '0.5s'}} />
+                  <Sparkles className='absolute bottom-4 left-6 w-3 h-3 text-yellow-400 animate-pulse' style={{animationDelay: '1s'}} />
+                  <Sparkles className='absolute bottom-3 right-4 w-3 h-3 text-yellow-500 animate-pulse' style={{animationDelay: '1.5s'}} />
+                </div>
+
+                <div className='relative z-10 flex justify-center items-center mb-3'>
+                  <div className='relative'>
+                    <div className='w-16 h-16 bg-gradient-to-br from-blue-200 to-indigo-300 rounded-full flex items-center justify-center shadow-lg animate-pulse'>
+                      <Key className='w-8 h-8 text-indigo-800' />
+                    </div>
+                    <div className='absolute -top-1 -right-1 w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center animate-bounce'>
+                      <Sparkles className='w-3 h-3 text-white' />
+                    </div>
+                  </div>
+                </div>
+
+                <div className='relative z-10 space-y-2'>
+                  <p className='text-base font-semibold'>
+                    Your secret key has been generated!
+                  </p>
+
+                  {/* Warning */}
+                  <div className='relative mx-auto max-w-sm'>
+                    <div className='p-3 bg-gradient-to-r from-amber-100 via-yellow-50 to-amber-100 dark:from-amber-950/40 dark:via-yellow-950/20 dark:to-amber-950/40 rounded-lg border-2 border-amber-300 dark:border-amber-700 shadow-md'>
+                      <div className='flex items-center gap-2 mb-1'>
+                        <FileText className='w-3 h-3 text-amber-700' />
+                        <span className='text-xs font-bold text-amber-800 dark:text-amber-200'>
+                          Important Warning
+                        </span>
+                      </div>
+                      <p className='text-xs text-red-700 dark:text-amber-300 italic'>
+                        This key is your primary and only means of accessing your account. Store it safely and securely.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Your Keys - nsec and npub with copy buttons and privacy controls */}
+              <Card className="bg-black/50 border-[#ff0040]/30">
+                <CardContent className="p-4 space-y-3">
+                  {/* nsec (secret key) */}
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <label className="text-xs font-bold uppercase text-[#ff0040]">🔐 Secret Key (nsec)</label>
+                      <div className="flex gap-1">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-auto py-1 px-2 text-xs hover:bg-[#ff0040]/10 text-[#ff0040] font-bold"
+                          onClick={() => setShowNsec(!showNsec)}
+                          title={showNsec ? "Hide secret key" : "Show secret key"}
+                        >
+                          {showNsec ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-auto py-1 px-2 text-xs hover:bg-[#ff0040]/10 text-[#ff0040] font-bold"
+                          onClick={() => {
+                            navigator.clipboard.writeText(nsec);
+                            toast({ title: 'Copied!', description: 'Secret key copied to clipboard' });
+                          }}
+                        >
+                          Copy
+                        </Button>
+                      </div>
+                    </div>
+                    <div className="p-2 bg-black rounded border border-[#ff0040]/20 font-mono text-xs break-all text-white">
+                      {showNsec ? nsec : '••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••'}
+                    </div>
+                    <p className="text-xs text-yellow-400">⚠️ This is your PASSWORD - keep it secret and safe!</p>
+                  </div>
+
+                  {/* npub (public key) */}
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <label className="text-xs font-bold uppercase text-[#ccff00]">👤 Public Key (npub)</label>
+                      <div className="flex gap-1">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-auto py-1 px-2 text-xs hover:bg-[#ccff00]/10 text-[#ccff00] font-bold"
+                          onClick={() => setShowNpub(!showNpub)}
+                          title={showNpub ? "Hide public key" : "Show public key"}
+                        >
+                          {showNpub ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-auto py-1 px-2 text-xs hover:bg-[#ccff00]/10 text-[#ccff00] font-bold"
+                          onClick={() => {
+                            try {
+                              const { data } = nip19.decode(nsec);
+                              const pk = getPublicKey(data as Uint8Array);
+                              const npub = nip19.npubEncode(pk);
+                              navigator.clipboard.writeText(npub);
+                              toast({ title: 'Copied!', description: 'Public key copied to clipboard' });
+                            } catch (error) {
+                              toast({ title: 'Error', description: 'Failed to copy public key', variant: 'destructive' });
+                            }
+                          }}
+                        >
+                          Copy
+                        </Button>
+                      </div>
+                    </div>
+                    <div className="p-2 bg-black rounded border border-[#ccff00]/20 font-mono text-xs break-all text-white">
+                      {showNpub ? (() => {
+                        try {
+                          const { data } = nip19.decode(nsec);
+                          const pk = getPublicKey(data as Uint8Array);
+                          return nip19.npubEncode(pk);
+                        } catch {
+                          return 'Error generating npub';
+                        }
+                      })() : '••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••'}
+                    </div>
+                    <p className="text-xs text-gray-400">✓ This is your USERNAME - safe to share publicly</p>
+                  </div>
+
+                  <div className="pt-2 text-xs text-gray-300 border-t border-gray-700">
+                    <p className="mb-1"><strong>What's the difference?</strong></p>
+                    <ul className="space-y-1 ml-4 list-disc">
+                      <li><strong className="text-[#ff0040]">nsec</strong> = Your password. Never share this!</li>
+                      <li><strong className="text-[#ccff00]">npub</strong> = Your username. Share this with friends!</li>
+                    </ul>
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Security options */}
+              <div className='space-y-3'>
+
+
+                <p className="text-sm text-center text-gray-300 font-bold">Now download your secret key to keep it safe:</p>
+
+                <div className='grid grid-cols-1 gap-2'>
+                  {/* Download Option */}
+                   <Card className={`cursor-pointer transition-all duration-200 border-2 ${
+                    keySecured === 'downloaded'
+                       ? 'ring-2 ring-green-500 bg-green-950/20 border-green-500/50'
+                       : 'hover:bg-[#ff0040]/5 hover:border-[#ff0040]/20 border-[#ff0040]/20'
+                   }`}>
+                    <CardContent className='p-3'>
+                      <Button
+                        variant="ghost"
+                        className='w-full h-auto p-0 justify-start hover:bg-transparent'
+                        onClick={downloadKey}
+                      >
+                        <div className='flex items-center gap-3 w-full'>
+                          <div className={`p-1.5 rounded-lg border-2 ${
+                            keySecured === 'downloaded'
+                               ? 'bg-green-900 border-green-500'
+                               : 'bg-[#ff0040]/10 border-[#ff0040]/30'
+                           }`}>
+                            {keySecured === 'downloaded' ? (
+                               <CheckCircle className='w-4 h-4 text-green-400' />
+                             ) : (
+                               <Download className='w-4 h-4 text-[#ff0040]' />
+                             )}
+                          </div>
+                          <div className='flex-1 text-left'>
+                             <div className='font-bold text-sm uppercase text-white'>
+                               Download as File
+                             </div>
+                             <div className='text-xs text-gray-400'>
+                               Save as nostr-nsec-key.txt file
+                             </div>
+                          </div>
+                          {keySecured === 'downloaded' && (
+                             <div className='text-xs font-bold text-green-400 uppercase'>
+                               ✓ Downloaded
+                             </div>
+                           )}
+                        </div>
+                      </Button>
+                    </CardContent>
+                  </Card>
+
+
+                </div>
+
+                {/* Continue button */}
+                <Button
+                  className={`w-full rounded-full py-6 text-base font-bold uppercase transform transition-all duration-200 shadow-lg ${
+                    keySecured === 'downloaded'
+                      ? 'bg-[#ccff00] text-black hover:bg-[#ccff00]/90 border-2 border-[#ccff00] shadow-[0_0_20px_rgba(204,255,0,0.5)] hover:scale-105'
+                      : 'bg-gray-700 text-gray-400 cursor-not-allowed border-2 border-gray-600'
+                  }`}
+                  onClick={finishKeySetup}
+                  disabled={keySecured !== 'downloaded'}
+                >
+                  <LogIn className='w-5 h-5 mr-2 flex-shrink-0' />
+                  <span className="text-center leading-tight">
+                    {keySecured === 'none' ? (
+                      <>
+                        Download Your Key First
+                      </>
+                    ) : (
+                      <>
+                        My Key is Safe - Continue
+                      </>
+                    )}
+                  </span>
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* Profile Step - Optional profile setup */}
+          {step === 'profile' && (
+            <div className='text-center space-y-4'>
+              {/* Profile setup illustration */}
+              <div className='relative p-6 rounded-2xl bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-950/50 dark:to-indigo-950/50 overflow-hidden'>
+                {/* Sparkles */}
+                <div className='absolute inset-0 pointer-events-none'>
+                  <Sparkles className='absolute top-3 left-4 w-3 h-3 text-yellow-400 animate-pulse' style={{animationDelay: '0s'}} />
+                  <Sparkles className='absolute top-6 right-6 w-3 h-3 text-yellow-500 animate-pulse' style={{animationDelay: '0.5s'}} />
+                  <Sparkles className='absolute bottom-4 left-6 w-3 h-3 text-yellow-400 animate-pulse' style={{animationDelay: '1s'}} />
+                </div>
+
+                <div className='relative z-10 flex justify-center items-center mb-3'>
+                  <div className='relative'>
+                    <div className='w-16 h-16 bg-gradient-to-br from-blue-200 to-indigo-300 rounded-full flex items-center justify-center shadow-lg'>
+                      <User className='w-8 h-8 text-blue-800' />
+                    </div>
+                    <div className='absolute -top-1 -right-1 w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center animate-bounce'>
+                      <Sparkles className='w-3 h-3 text-white' />
+                    </div>
+                  </div>
+                </div>
+
+                <div className='relative z-10 space-y-2'>
+                  <p className='text-base font-semibold'>
+                    Almost there! Let's set up your profile
+                  </p>
+
+                  <p className='text-sm text-muted-foreground'>
+                    Your profile is your identity on Nostr.
+                  </p>
+                </div>
+              </div>
+
+              {/* Publishing status indicator */}
+              {isPublishing && (
+                <div className='relative p-4 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 border border-blue-200 dark:border-blue-800'>
+                  <div className='flex items-center justify-center gap-3'>
+                    <div className='w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full animate-spin' />
+                    <span className='text-sm font-medium text-blue-700 dark:text-blue-300'>
+                      Publishing your profile...
+                    </span>
+                  </div>
+                </div>
+              )}
+
+              {/* Profile form */}
+              <div className={`space-y-4 text-left ${isPublishing ? 'opacity-50 pointer-events-none' : ''}`}>
+                <div className='space-y-2'>
+                  <label htmlFor='profile-name' className='text-sm font-medium'>
+                    Display Name
+                  </label>
+                  <Input
+                    id='profile-name'
+                    value={profileData.name}
+                    onChange={(e) => setProfileData(prev => ({ ...prev, name: e.target.value }))}
+                    placeholder='Your name'
+                    className='rounded-lg'
+                    disabled={isPublishing}
+                  />
+                </div>
+
+                <div className='space-y-2'>
+                  <label htmlFor='profile-about' className='text-sm font-medium'>
+                    Bio
+                  </label>
+                  <Textarea
+                    id='profile-about'
+                    value={profileData.about}
+                    onChange={(e) => setProfileData(prev => ({ ...prev, about: e.target.value }))}
+                    placeholder='Tell others about yourself...'
+                    className='rounded-lg resize-none'
+                    rows={3}
+                    disabled={isPublishing}
+                  />
+                </div>
+
+                <div className='space-y-2'>
+                  <label htmlFor='profile-picture' className='text-sm font-medium'>
+                    Avatar
+                  </label>
+                  <div className='flex gap-2'>
+                    <Input
+                      id='profile-picture'
+                      value={profileData.picture}
+                      onChange={(e) => setProfileData(prev => ({ ...prev, picture: e.target.value }))}
+                      placeholder='https://example.com/your-avatar.jpg'
+                      className='rounded-lg flex-1'
+                      disabled={isPublishing}
+                    />
+                    <input
+                      type='file'
+                      accept='image/*'
+                      className='hidden'
+                      ref={avatarFileInputRef}
+                      onChange={handleAvatarUpload}
+                    />
+                    <Button
+                      type='button'
+                      variant='outline'
+                      size='icon'
+                      onClick={() => avatarFileInputRef.current?.click()}
+                      disabled={isUploading || isPublishing}
+                      className='rounded-lg shrink-0'
+                      title='Upload avatar image'
+                    >
+                      {isUploading ? (
+                        <div className='w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin' />
+                      ) : (
+                        <Upload className='w-4 h-4' />
+                      )}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+
+              {/* Action buttons */}
+              <div className='space-y-3'>
+                <Button
+                  className='w-full rounded-full py-4 text-base font-semibold bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 transform transition-all duration-200 hover:scale-105 shadow-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none'
+                  onClick={() => finishSignup(false)}
+                  disabled={isPublishing || isUploading}
+                >
+                  {isPublishing ? (
+                    <>
+                      <div className='w-4 h-4 mr-2 border-2 border-current border-t-transparent rounded-full animate-spin' />
+                      Creating Profile...
+                    </>
+                  ) : (
+                    <>
+                      <User className='w-4 h-4 mr-2' />
+                      Create Profile & Finish
+                    </>
+                  )}
+                </Button>
+
+                <Button
+                  variant='outline'
+                  className='w-full rounded-full py-3 disabled:opacity-50 disabled:cursor-not-allowed'
+                  onClick={() => finishSignup(true)}
+                  disabled={isPublishing || isUploading}
+                >
+                  {isPublishing ? (
+                    <>
+                      <div className='w-4 h-4 mr-2 border-2 border-current border-t-transparent rounded-full animate-spin' />
+                      Setting up account...
+                    </>
+                  ) : (
+                    'Skip for now'
+                  )}
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* Done Step - Account created with signer recommendation */}
+          {step === 'done' && (
+            <div className='py-4 space-y-4'>
+              <Card className='bg-gradient-to-br from-[#ccff00]/10 to-[#00ff00]/10 border-2 border-[#ccff00]/50'>
+                <CardContent className='p-6 text-center space-y-3'>
+                  <div className='text-5xl mb-2'>✅</div>
+                  <h3 className='text-xl font-black uppercase text-[#ccff00]'>
+                    Account Created!
+                  </h3>
+                  <p className='text-gray-300 text-sm'>
+                    Your Nostr account is ready to go!
+                  </p>
+                  <CheckCircle className='h-10 w-10 mx-auto text-[#00ff00]' />
+                </CardContent>
+              </Card>
+              
+              {/* Next Steps - Signer Recommendation */}
+              <Card className='bg-blue-950/30 border-2 border-blue-500/30'>
+                <CardContent className='p-5 space-y-3'>
+                  <div className='flex items-center gap-3'>
+                    <div className='p-2 rounded-lg bg-blue-500/20'>
+                      <Shield className='h-5 w-5 text-blue-400' />
+                    </div>
+                    <div>
+                      <h4 className='font-bold text-blue-400'>Recommended: Set Up a Signer App</h4>
+                      <p className='text-xs text-gray-400'>Keep your keys extra secure</p>
+                    </div>
+                  </div>
+                  <p className='text-sm text-gray-300'>
+                    For better security, use a dedicated signer app instead of pasting your secret key everywhere. 
+                    Signer apps keep your keys safe while letting you use any Nostr app.
+                  </p>
+                  <Link to='/signers' onClick={handleFinishComplete}>
+                    <Button className='w-full bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 border border-blue-500/50'>
+                      <ExternalLink className='h-4 w-4 mr-2' />
+                      Learn About Signer Apps
+                    </Button>
+                  </Link>
+                  <button
+                    onClick={handleFinishComplete}
+                    className='w-full text-xs text-gray-500 hover:text-gray-400 py-2'
+                  >
+                    Skip for now
+                  </button>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default SignupDialog;
diff --git a/src/src/components/auth/SignupMethodDialog.tsx b/src/src/components/auth/SignupMethodDialog.tsx
new file mode 100644
index 0000000..e12b095
--- /dev/null
+++ b/src/src/components/auth/SignupMethodDialog.tsx
@@ -0,0 +1,141 @@
+import React from 'react';
+import { Key, FileText, ArrowRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Card, CardContent } from '@/components/ui/card';
+
+interface SignupMethodDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelectMnemonic: () => void;
+  onSelectNsec: () => void;
+}
+
+const SignupMethodDialog: React.FC<SignupMethodDialogProps> = ({ 
+  isOpen, 
+  onClose,
+  onSelectMnemonic,
+  onSelectNsec
+}) => {
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-3xl bg-gradient-to-br from-gray-900 to-black border-2 border-[#ccff00]/30">
+        <DialogHeader>
+          <DialogTitle className="text-3xl font-black uppercase text-center mb-2">
+            <span className="neon-orange">Choose Your</span>{' '}
+            <span className="neon-lime">Signup Method</span>
+          </DialogTitle>
+          <p className="text-center text-gray-400 text-sm">
+            Both methods are secure. Choose what works best for you!
+          </p>
+        </DialogHeader>
+
+        <div className="grid md:grid-cols-2 gap-6 mt-4">
+          {/* Mnemonic Option (Recommended) */}
+          <Card className="bg-gradient-to-br from-[#ccff00]/10 to-[#00ff00]/5 border-2 border-[#ccff00]/50 hover:border-[#ccff00] transition-all cursor-pointer group"
+                onClick={onSelectMnemonic}>
+            <CardContent className="p-6 space-y-4">
+              <div className="flex items-center justify-between">
+                <FileText className="h-12 w-12 text-[#ccff00]" />
+                <span className="text-xs font-bold uppercase px-2 py-1 bg-[#ccff00]/20 text-[#ccff00] rounded-full">
+                  Recommended
+                </span>
+              </div>
+              
+              <div>
+                <h3 className="text-2xl font-black uppercase text-[#ccff00] mb-2">
+                  Recovery Phrase
+                </h3>
+                <p className="text-sm text-gray-400 mb-3">
+                  12 easy-to-remember words. Industry standard used by Bitcoin, Ethereum, and most crypto wallets.
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex items-start gap-2">
+                  <span className="text-[#00ff00] text-lg">✓</span>
+                  <span className="text-xs text-gray-300">Easy to write down on paper</span>
+                </div>
+                <div className="flex items-start gap-2">
+                  <span className="text-[#00ff00] text-lg">✓</span>
+                  <span className="text-xs text-gray-300">Works with other Nostr apps (NIP-06)</span>
+                </div>
+                <div className="flex items-start gap-2">
+                  <span className="text-[#00ff00] text-lg">✓</span>
+                  <span className="text-xs text-gray-300">Can generate multiple accounts</span>
+                </div>
+                <div className="flex items-start gap-2">
+                  <span className="text-[#00ff00] text-lg">✓</span>
+                  <span className="text-xs text-gray-300">Familiar to crypto users</span>
+                </div>
+              </div>
+
+              <Button
+                className="w-full bg-gradient-to-r from-[#ccff00] to-[#00ff00] hover:from-[#ccff00]/90 hover:to-[#00ff00]/90 text-black font-bold uppercase group-hover:scale-105 transition-transform"
+              >
+                Use Recovery Phrase
+                <ArrowRight className="ml-2 h-4 w-4" />
+              </Button>
+            </CardContent>
+          </Card>
+
+          {/* Nsec Option (Advanced) */}
+          <Card className="bg-gradient-to-br from-[#ff0040]/5 to-[#ff6600]/5 border-2 border-[#ff0040]/30 hover:border-[#ff0040]/60 transition-all cursor-pointer group"
+                onClick={onSelectNsec}>
+            <CardContent className="p-6 space-y-4">
+              <div className="flex items-center justify-between">
+                <Key className="h-12 w-12 text-[#ff0040]" />
+                <span className="text-xs font-bold uppercase px-2 py-1 bg-[#ff0040]/20 text-[#ff0040] rounded-full">
+                  Advanced
+                </span>
+              </div>
+              
+              <div>
+                <h3 className="text-2xl font-black uppercase text-[#ff0040] mb-2">
+                  Secret Key (nsec)
+                </h3>
+                <p className="text-sm text-gray-400 mb-3">
+                  Raw cryptographic key. More technical but gives you direct access to your Nostr identity.
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex items-start gap-2">
+                  <span className="text-[#ff6600] text-lg">✓</span>
+                  <span className="text-xs text-gray-300">Direct cryptographic control</span>
+                </div>
+                <div className="flex items-start gap-2">
+                  <span className="text-[#ff6600] text-lg">✓</span>
+                  <span className="text-xs text-gray-300">Compatible with all Nostr apps</span>
+                </div>
+                <div className="flex items-start gap-2">
+                  <span className="text-[#ff6600] text-lg">✓</span>
+                  <span className="text-xs text-gray-300">Single string to backup</span>
+                </div>
+                <div className="flex items-start gap-2">
+                  <span className="text-[#ff6600] text-lg">✓</span>
+                  <span className="text-xs text-gray-300">No derivation layer</span>
+                </div>
+              </div>
+
+              <Button
+                className="w-full bg-gradient-to-r from-[#ff0040] to-[#ff6600] hover:from-[#ff0040]/90 hover:to-[#ff6600]/90 text-white font-bold uppercase group-hover:scale-105 transition-transform"
+              >
+                Use Secret Key
+                <ArrowRight className="ml-2 h-4 w-4" />
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="text-center mt-4">
+          <p className="text-xs text-gray-500">
+            🔒 Both methods are equally secure. Choose based on your preference!
+          </p>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default SignupMethodDialog;
diff --git a/src/src/components/comments/Comment.tsx b/src/src/components/comments/Comment.tsx
new file mode 100644
index 0000000..e42dc3d
--- /dev/null
+++ b/src/src/components/comments/Comment.tsx
@@ -0,0 +1,174 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { NostrEvent } from '@nostrify/nostrify';
+import { nip19 } from 'nostr-tools';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useComments } from '@/hooks/useComments';
+import { CommentForm } from './CommentForm';
+import { NoteContent } from '@/components/NoteContent';
+import { ReportDialog } from '@/components/ReportDialog';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { MessageSquare, ChevronDown, ChevronRight, MoreHorizontal, Flag } from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+import { genUserName } from '@/lib/genUserName';
+
+interface CommentProps {
+  root: NostrEvent | URL;
+  comment: NostrEvent;
+  depth?: number;
+  maxDepth?: number;
+  limit?: number;
+}
+
+export function Comment({ root, comment, depth = 0, maxDepth = 3, limit }: CommentProps) {
+  const [showReplyForm, setShowReplyForm] = useState(false);
+  const [showReplies, setShowReplies] = useState(depth < 2); // Auto-expand first 2 levels
+  const [showReportDialog, setShowReportDialog] = useState(false);
+  
+  const author = useAuthor(comment.pubkey);
+  const { data: commentsData } = useComments(root, limit);
+  
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(comment.pubkey)
+  const timeAgo = formatDistanceToNow(new Date(comment.created_at * 1000), { addSuffix: true });
+
+  // Get direct replies to this comment
+  const replies = commentsData?.getDirectReplies(comment.id) || [];
+  const hasReplies = replies.length > 0;
+
+  return (
+    <div className={`space-y-3 ${depth > 0 ? 'ml-6 border-l-2 border-muted pl-4' : ''}`}>
+      <Card className="bg-card/50">
+        <CardContent className="p-4">
+          <div className="space-y-3">
+            {/* Comment Header */}
+            <div className="flex items-start justify-between">
+              <div className="flex items-center space-x-3">
+                <Link to={`/${nip19.npubEncode(comment.pubkey)}`}>
+                  <Avatar className="h-8 w-8 hover:ring-2 hover:ring-primary/30 transition-all cursor-pointer">
+                    <AvatarImage src={metadata?.picture} />
+                    <AvatarFallback className="text-xs">
+                      {displayName.charAt(0)}
+                    </AvatarFallback>
+                  </Avatar>
+                </Link>
+                <div>
+                  <Link 
+                    to={`/${nip19.npubEncode(comment.pubkey)}`}
+                    className="font-medium text-sm hover:text-primary transition-colors"
+                  >
+                    {displayName}
+                  </Link>
+                  <p className="text-xs text-muted-foreground">{timeAgo}</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Comment Content */}
+            <div className="text-sm">
+              <NoteContent event={comment} className="text-sm" />
+            </div>
+
+            {/* Comment Actions */}
+            <div className="flex items-center justify-between pt-2">
+              <div className="flex items-center space-x-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowReplyForm(!showReplyForm)}
+                  className="h-8 px-2 text-xs"
+                >
+                  <MessageSquare className="h-3 w-3 mr-1" />
+                  Reply
+                </Button>
+                
+                {hasReplies && (
+                  <Collapsible open={showReplies} onOpenChange={setShowReplies}>
+                    <CollapsibleTrigger asChild>
+                      <Button variant="ghost" size="sm" className="h-8 px-2 text-xs">
+                        {showReplies ? (
+                          <ChevronDown className="h-3 w-3 mr-1" />
+                        ) : (
+                          <ChevronRight className="h-3 w-3 mr-1" />
+                        )}
+                        {replies.length} {replies.length === 1 ? 'reply' : 'replies'}
+                      </Button>
+                    </CollapsibleTrigger>
+                  </Collapsible>
+                )}
+              </div>
+
+              {/* Comment menu */}
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 px-2 text-xs"
+                    aria-label="Comment options"
+                  >
+                    <MoreHorizontal className="h-3 w-3" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-40">
+                  <DropdownMenuItem
+                    onClick={() => setShowReportDialog(true)}
+                    className="text-red-500 focus:text-red-500"
+                  >
+                    <Flag className="h-4 w-4 mr-2" />
+                    Report
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Reply Form */}
+      {showReplyForm && (
+        <div className="ml-6">
+          <CommentForm
+            root={root}
+            reply={comment}
+            onSuccess={() => setShowReplyForm(false)}
+            placeholder="Write a reply..."
+            compact
+          />
+        </div>
+      )}
+
+      {/* Replies */}
+      {hasReplies && (
+        <Collapsible open={showReplies} onOpenChange={setShowReplies}>
+          <CollapsibleContent className="space-y-3">
+            {replies.map((reply) => (
+              <Comment
+                key={reply.id}
+                root={root}
+                comment={reply}
+                depth={depth + 1}
+                maxDepth={maxDepth}
+                limit={limit}
+              />
+            ))}
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+
+      {/* Report Dialog */}
+      <ReportDialog
+        open={showReportDialog}
+        onOpenChange={setShowReportDialog}
+        targetType="user"
+        targetPubkey={comment.pubkey}
+        targetEventId={comment.id}
+        targetTitle={comment.content.slice(0, 50) + (comment.content.length > 50 ? '...' : '')}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/src/components/comments/CommentForm.tsx b/src/src/components/comments/CommentForm.tsx
new file mode 100644
index 0000000..7c973f2
--- /dev/null
+++ b/src/src/components/comments/CommentForm.tsx
@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Card, CardContent } from '@/components/ui/card';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { usePostComment } from '@/hooks/usePostComment';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { NostrEvent } from '@nostrify/nostrify';
+import { MessageSquare, Send } from 'lucide-react';
+
+interface CommentFormProps {
+  root: NostrEvent | URL;
+  reply?: NostrEvent | URL;
+  onSuccess?: () => void;
+  placeholder?: string;
+  compact?: boolean;
+}
+
+export function CommentForm({
+  root,
+  reply,
+  onSuccess, 
+  placeholder = "Write a comment...",
+  compact = false 
+}: CommentFormProps) {
+  const [content, setContent] = useState('');
+  const { user } = useCurrentUser();
+  const { mutate: postComment, isPending } = usePostComment();
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!content.trim() || !user) return;
+
+    postComment(
+      { content: content.trim(), root, reply },
+      {
+        onSuccess: () => {
+          setContent('');
+          onSuccess?.();
+        },
+      }
+    );
+  };
+
+  if (!user) {
+    return (
+      <Card className={compact ? "border-dashed" : ""}>
+        <CardContent className={compact ? "p-4" : "p-6"}>
+          <div className="text-center space-y-4">
+            <div className="flex items-center justify-center space-x-2 text-muted-foreground">
+              <MessageSquare className="h-5 w-5" />
+              <span>Sign in to {reply ? 'reply' : 'comment'}</span>
+            </div>
+            <LoginArea />
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className={compact ? "border-dashed" : ""}>
+      <CardContent className={compact ? "p-4" : "p-6"}>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <Textarea
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            placeholder={placeholder}
+            className={compact ? "min-h-[80px]" : "min-h-[100px]"}
+            disabled={isPending}
+          />
+          <div className="flex justify-between items-center">
+            <span className="text-sm text-muted-foreground">
+              {reply ? 'Replying to comment' : 'Adding to the discussion'}
+            </span>
+            <Button 
+              type="submit" 
+              disabled={!content.trim() || isPending}
+              size={compact ? "sm" : "default"}
+            >
+              <Send className="h-4 w-4 mr-2" />
+              {isPending ? 'Posting...' : (reply ? 'Reply' : 'Comment')}
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/src/src/components/comments/CommentsSection.tsx b/src/src/components/comments/CommentsSection.tsx
new file mode 100644
index 0000000..a269934
--- /dev/null
+++ b/src/src/components/comments/CommentsSection.tsx
@@ -0,0 +1,100 @@
+import { useComments } from '@/hooks/useComments';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { MessageSquare } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { NostrEvent } from '@nostrify/nostrify';
+import { CommentForm } from './CommentForm';
+import { Comment } from './Comment';
+
+interface CommentsSectionProps {
+  root: NostrEvent | URL;
+  title?: string;
+  emptyStateMessage?: string;
+  emptyStateSubtitle?: string;
+  className?: string;
+  limit?: number;
+}
+
+export function CommentsSection({ 
+  root,
+  title = "Comments",
+  emptyStateMessage = "No comments yet",
+  emptyStateSubtitle = "Be the first to share your thoughts!",
+  className,
+  limit = 500,
+}: CommentsSectionProps) {
+  const { data: commentsData, isLoading, error } = useComments(root, limit);
+  const comments = commentsData?.topLevelComments || [];
+
+  if (error) {
+    return (
+      <Card className="rounded-none sm:rounded-lg mx-0 sm:mx-0">
+        <CardContent className="px-2 py-6 sm:p-6">
+          <div className="text-center text-muted-foreground">
+            <MessageSquare className="h-8 w-8 mx-auto mb-2 opacity-50" />
+            <p>Failed to load comments</p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className={cn("rounded-none sm:rounded-lg mx-0 sm:mx-0", className)}>
+      <CardHeader className="px-2 pt-6 pb-4 sm:p-6">
+        <CardTitle className="flex items-center space-x-2">
+          <MessageSquare className="h-5 w-5" />
+          <span>{title}</span>
+          {!isLoading && (
+            <span className="text-sm font-normal text-muted-foreground">
+              ({comments.length})
+            </span>
+          )}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="px-2 pb-6 pt-4 sm:p-6 sm:pt-0 space-y-6">
+        {/* Comment Form */}
+        <CommentForm root={root} />
+
+        {/* Comments List */}
+        {isLoading ? (
+          <div className="space-y-4">
+            {[...Array(3)].map((_, i) => (
+              <Card key={i} className="bg-card/50">
+                <CardContent className="p-4">
+                  <div className="space-y-3">
+                    <div className="flex items-center space-x-3">
+                      <Skeleton className="h-8 w-8 rounded-full" />
+                      <div className="space-y-1">
+                        <Skeleton className="h-4 w-24" />
+                        <Skeleton className="h-3 w-16" />
+                      </div>
+                    </div>
+                    <Skeleton className="h-16 w-full" />
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : comments.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-30" />
+            <p className="text-lg font-medium mb-2">{emptyStateMessage}</p>
+            <p className="text-sm">{emptyStateSubtitle}</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {comments.map((comment) => (
+              <Comment
+                key={comment.id}
+                root={root}
+                comment={comment}
+              />
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/src/src/components/onboarding/RelayEducation.tsx b/src/src/components/onboarding/RelayEducation.tsx
new file mode 100644
index 0000000..289d83f
--- /dev/null
+++ b/src/src/components/onboarding/RelayEducation.tsx
@@ -0,0 +1,307 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { cn } from '@/lib/utils';
+import {
+  Globe,
+  Lock,
+  Unlock,
+  Key,
+  ChevronRight,
+  ChevronLeft,
+  CheckCircle2,
+  AlertTriangle,
+  Store,
+  Users,
+  Shield,
+} from 'lucide-react';
+
+interface RelayEducationProps {
+  onComplete: () => void;
+  onSkip?: () => void;
+}
+
+export function RelayEducation({ onComplete, onSkip }: RelayEducationProps) {
+  const [currentStep, setCurrentStep] = useState(1);
+  const totalSteps = 3;
+
+  const nextStep = () => {
+    if (currentStep < totalSteps) {
+      setCurrentStep(currentStep + 1);
+    } else {
+      onComplete();
+    }
+  };
+
+  const prevStep = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  return (
+    <Card className="w-full max-w-lg mx-auto border-2 border-purple-500/30 bg-gradient-to-br from-purple-500/5 to-blue-500/5">
+      <CardContent className="p-6">
+        {/* Progress */}
+        <div className="mb-6">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-xs font-bold text-gray-400 uppercase tracking-wide">
+              Understanding Nostr
+            </span>
+            <span className="text-xs text-gray-500">
+              Step {currentStep} of {totalSteps}
+            </span>
+          </div>
+          <Progress value={(currentStep / totalSteps) * 100} className="h-1.5" />
+        </div>
+
+        {/* Step 1: Relay Concept */}
+        {currentStep === 1 && (
+          <div className="space-y-6">
+            <div className="text-center">
+              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-purple-500/20 mb-4">
+                <Globe className="h-8 w-8 text-purple-500" />
+              </div>
+              <h2 className="text-xl font-black uppercase mb-2">Understanding Relays</h2>
+              <p className="text-gray-400 text-sm">
+                Think of relays like skate shops that share news about spots
+              </p>
+            </div>
+
+            {/* Visual Diagram */}
+            <div className="flex items-center justify-center gap-2 py-4">
+              <div className="flex flex-col items-center gap-1">
+                <div className="w-12 h-12 rounded-lg bg-red-500/20 flex items-center justify-center">
+                  <span className="text-2xl">🛹</span>
+                </div>
+                <span className="text-xs text-gray-500">You</span>
+              </div>
+              
+              <ChevronRight className="h-5 w-5 text-gray-600" />
+              
+              <div className="flex flex-col items-center gap-1">
+                <div className="flex gap-1">
+                  <div className="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
+                    <Store className="h-5 w-5 text-purple-500" />
+                  </div>
+                  <div className="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
+                    <Store className="h-5 w-5 text-purple-500" />
+                  </div>
+                </div>
+                <span className="text-xs text-gray-500">Relays</span>
+              </div>
+              
+              <ChevronRight className="h-5 w-5 text-gray-600" />
+              
+              <div className="flex flex-col items-center gap-1">
+                <div className="w-12 h-12 rounded-lg bg-green-500/20 flex items-center justify-center">
+                  <Users className="h-6 w-6 text-green-500" />
+                </div>
+                <span className="text-xs text-gray-500">Skaters</span>
+              </div>
+            </div>
+
+            <div className="space-y-3 text-sm">
+              <div className="flex items-start gap-3 p-3 rounded-lg bg-green-500/10 border border-green-500/20">
+                <CheckCircle2 className="h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" />
+                <div>
+                  <span className="font-bold text-green-400">No company owns your account</span>
+                  <p className="text-gray-400 text-xs mt-0.5">Your identity lives on multiple relay servers</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3 p-3 rounded-lg bg-green-500/10 border border-green-500/20">
+                <CheckCircle2 className="h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" />
+                <div>
+                  <span className="font-bold text-green-400">Your posts can't be deleted by others</span>
+                  <p className="text-gray-400 text-xs mt-0.5">Data is distributed across the network</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20">
+                <AlertTriangle className="h-5 w-5 text-amber-500 flex-shrink-0 mt-0.5" />
+                <div>
+                  <span className="font-bold text-amber-400">Relay operators can see public posts</span>
+                  <p className="text-gray-400 text-xs mt-0.5">Think of it like posting on a bulletin board</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Step 2: Public vs Private */}
+        {currentStep === 2 && (
+          <div className="space-y-6">
+            <div className="text-center">
+              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-500/20 mb-4">
+                <Shield className="h-8 w-8 text-blue-500" />
+              </div>
+              <h2 className="text-xl font-black uppercase mb-2">Public vs Private</h2>
+              <p className="text-gray-400 text-sm">
+                Know what's visible and what's encrypted
+              </p>
+            </div>
+
+            <div className="grid gap-4">
+              {/* Public */}
+              <div className="p-4 rounded-lg bg-red-500/10 border border-red-500/20">
+                <div className="flex items-center gap-2 mb-3">
+                  <Unlock className="h-5 w-5 text-red-400" />
+                  <span className="font-bold text-red-400 uppercase text-sm">Public (Anyone Can See)</span>
+                </div>
+                <div className="space-y-2 text-sm text-gray-300">
+                  <div className="flex items-center gap-2">
+                    <span className="text-red-400">•</span>
+                    <span>Spots you add to the map</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-red-400">•</span>
+                    <span>Reviews and comments</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-red-400">•</span>
+                    <span>Your profile info (name, picture)</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-red-400">•</span>
+                    <span>Who you follow</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Private */}
+              <div className="p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+                <div className="flex items-center gap-2 mb-3">
+                  <Lock className="h-5 w-5 text-green-400" />
+                  <span className="font-bold text-green-400 uppercase text-sm">Private (Encrypted)</span>
+                </div>
+                <div className="space-y-2 text-sm text-gray-300">
+                  <div className="flex items-center gap-2">
+                    <span className="text-green-400">•</span>
+                    <span>Direct messages</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-green-400">•</span>
+                    <span>Wallet communications</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="p-3 rounded-lg bg-gray-800/50 border border-gray-700">
+              <p className="text-xs text-gray-400 text-center">
+                <span className="text-amber-400 font-bold">Note:</span> Posts may be stored permanently on relays. 
+                Think before you post - just like real life!
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Step 3: Key Backup */}
+        {currentStep === 3 && (
+          <div className="space-y-6">
+            <div className="text-center">
+              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-amber-500/20 mb-4">
+                <Key className="h-8 w-8 text-amber-500" />
+              </div>
+              <h2 className="text-xl font-black uppercase mb-2">Your Keys = Your Account</h2>
+              <p className="text-gray-400 text-sm">
+                This is the most important thing to understand
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <div className="p-4 rounded-lg bg-amber-500/10 border border-amber-500/30">
+                <h3 className="font-bold text-amber-400 mb-2 flex items-center gap-2">
+                  <Key className="h-4 w-4" />
+                  Your Secret Key (nsec)
+                </h3>
+                <p className="text-sm text-gray-300 mb-3">
+                  Think of it like your skateboard - never lend it to anyone. 
+                  It proves you own your account.
+                </p>
+                <div className="space-y-2 text-sm">
+                  <div className="flex items-start gap-2 text-red-400">
+                    <span className="font-bold">⚠️</span>
+                    <span>If lost, your account can't be recovered</span>
+                  </div>
+                  <div className="flex items-start gap-2 text-red-400">
+                    <span className="font-bold">⚠️</span>
+                    <span>No "forgot password" - nobody can reset it</span>
+                  </div>
+                  <div className="flex items-start gap-2 text-green-400">
+                    <span className="font-bold">✓</span>
+                    <span>Back it up and store it safely</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="p-4 rounded-lg bg-purple-500/10 border border-purple-500/30">
+                <h3 className="font-bold text-purple-400 mb-2 flex items-center gap-2">
+                  <Globe className="h-4 w-4" />
+                  Your Public Key (npub)
+                </h3>
+                <p className="text-sm text-gray-300">
+                  This is like your username - share it freely so others can find you!
+                </p>
+              </div>
+            </div>
+
+            <div className="p-3 rounded-lg bg-green-500/10 border border-green-500/20 text-center">
+              <p className="text-sm text-green-400 font-bold">
+                🔐 You're in control - no company can lock you out!
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Navigation */}
+        <div className="flex items-center justify-between mt-6 pt-4 border-t border-gray-800">
+          <div>
+            {currentStep > 1 ? (
+              <Button 
+                variant="ghost" 
+                onClick={prevStep}
+                className="gap-1"
+              >
+                <ChevronLeft className="h-4 w-4" />
+                Back
+              </Button>
+            ) : onSkip ? (
+              <Button 
+                variant="ghost" 
+                onClick={onSkip}
+                className="text-gray-500"
+              >
+                Skip
+              </Button>
+            ) : (
+              <div />
+            )}
+          </div>
+          
+          <Button 
+            onClick={nextStep}
+            className={cn(
+              "gap-1",
+              currentStep === totalSteps 
+                ? "bg-green-500 hover:bg-green-600" 
+                : "bg-purple-500 hover:bg-purple-600"
+            )}
+          >
+            {currentStep === totalSteps ? (
+              <>
+                Got It!
+                <CheckCircle2 className="h-4 w-4" />
+              </>
+            ) : (
+              <>
+                Next
+                <ChevronRight className="h-4 w-4" />
+              </>
+            )}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/src/components/ui/accordion.tsx b/src/src/components/ui/accordion.tsx
new file mode 100644
index 0000000..e6a723d
--- /dev/null
+++ b/src/src/components/ui/accordion.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/src/src/components/ui/alert-dialog.tsx b/src/src/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..4bd7937
--- /dev/null
+++ b/src/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,139 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button-variants"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "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",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/src/src/components/ui/alert.tsx b/src/src/components/ui/alert.tsx
new file mode 100644
index 0000000..41fa7e0
--- /dev/null
+++ b/src/src/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/src/src/components/ui/aspect-ratio.tsx b/src/src/components/ui/aspect-ratio.tsx
new file mode 100644
index 0000000..c4abbf3
--- /dev/null
+++ b/src/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }
diff --git a/src/src/components/ui/avatar.tsx b/src/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..2a948cb
--- /dev/null
+++ b/src/src/components/ui/avatar.tsx
@@ -0,0 +1,48 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full object-cover", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/src/src/components/ui/badge-variants.ts b/src/src/components/ui/badge-variants.ts
new file mode 100644
index 0000000..f6b20a6
--- /dev/null
+++ b/src/src/components/ui/badge-variants.ts
@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority"
+
+export const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
\ No newline at end of file
diff --git a/src/src/components/ui/badge.tsx b/src/src/components/ui/badge.tsx
new file mode 100644
index 0000000..0abefc2
--- /dev/null
+++ b/src/src/components/ui/badge.tsx
@@ -0,0 +1,17 @@
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { badgeVariants } from "./badge-variants"
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge }
diff --git a/src/src/components/ui/breadcrumb.tsx b/src/src/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..71a5c32
--- /dev/null
+++ b/src/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,115 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:size-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/src/src/components/ui/button-variants.ts b/src/src/components/ui/button-variants.ts
new file mode 100644
index 0000000..63a20d3
--- /dev/null
+++ b/src/src/components/ui/button-variants.ts
@@ -0,0 +1,30 @@
+import { cva } from "class-variance-authority"
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
\ No newline at end of file
diff --git a/src/src/components/ui/button.tsx b/src/src/components/ui/button.tsx
new file mode 100644
index 0000000..25fa2bd
--- /dev/null
+++ b/src/src/components/ui/button.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "./button-variants"
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button }
diff --git a/src/src/components/ui/calendar.tsx b/src/src/components/ui/calendar.tsx
new file mode 100644
index 0000000..169142b
--- /dev/null
+++ b/src/src/components/ui/calendar.tsx
@@ -0,0 +1,64 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button-variants";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ..._props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };
diff --git a/src/src/components/ui/card.tsx b/src/src/components/ui/card.tsx
new file mode 100644
index 0000000..afa13ec
--- /dev/null
+++ b/src/src/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/src/components/ui/carousel.tsx b/src/src/components/ui/carousel.tsx
new file mode 100644
index 0000000..9c2b9bf
--- /dev/null
+++ b/src/src/components/ui/carousel.tsx
@@ -0,0 +1,260 @@
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}
diff --git a/src/src/components/ui/chart.tsx b/src/src/components/ui/chart.tsx
new file mode 100644
index 0000000..a21d77e
--- /dev/null
+++ b/src/src/components/ui/chart.tsx
@@ -0,0 +1,363 @@
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"]
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+})
+ChartContainer.displayName = "Chart"
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([_, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean
+      hideIndicator?: boolean
+      indicator?: "line" | "dot" | "dashed"
+      nameKey?: string
+      labelKey?: string
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null
+      }
+
+      const [item] = payload
+      const key = `${labelKey || item.dataKey || item.name || "value"}`
+      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        )
+      }
+
+      if (!value) {
+        return null
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ])
+
+    if (!active || !payload?.length) {
+      return null
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot"
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color || item.payload.fill || item.color
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+)
+ChartTooltipContent.displayName = "ChartTooltip"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean
+      nameKey?: string
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    if (!payload?.length) {
+      return null
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+)
+ChartLegendContent.displayName = "ChartLegend"
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/src/src/components/ui/checkbox.tsx b/src/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..ddbdd01
--- /dev/null
+++ b/src/src/components/ui/checkbox.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/src/src/components/ui/collapsible.tsx b/src/src/components/ui/collapsible.tsx
new file mode 100644
index 0000000..a23e7a2
--- /dev/null
+++ b/src/src/components/ui/collapsible.tsx
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/src/src/components/ui/command.tsx b/src/src/components/ui/command.tsx
new file mode 100644
index 0000000..69d63a4
--- /dev/null
+++ b/src/src/components/ui/command.tsx
@@ -0,0 +1,153 @@
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+type CommandDialogProps = DialogProps
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/src/src/components/ui/context-menu.tsx b/src/src/components/ui/context-menu.tsx
new file mode 100644
index 0000000..3e52999
--- /dev/null
+++ b/src/src/components/ui/context-menu.tsx
@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/src/src/components/ui/dialog.tsx b/src/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..7d52ed7
--- /dev/null
+++ b/src/src/components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "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",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-4 sm:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg max-h-[calc(100vh-2rem)] max-h-[calc(100dvh-2rem)] overflow-y-auto",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-3 top-3 sm:right-4 sm: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-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/src/src/components/ui/drawer.tsx b/src/src/components/ui/drawer.tsx
new file mode 100644
index 0000000..c17b0cc
--- /dev/null
+++ b/src/src/components/ui/drawer.tsx
@@ -0,0 +1,116 @@
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/src/src/components/ui/dropdown-menu.tsx b/src/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..769ff7a
--- /dev/null
+++ b/src/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/src/src/components/ui/form-utils.ts b/src/src/components/ui/form-utils.ts
new file mode 100644
index 0000000..c765ff2
--- /dev/null
+++ b/src/src/components/ui/form-utils.ts
@@ -0,0 +1,48 @@
+import * as React from "react"
+import {
+  FieldPath,
+  FieldValues,
+  useFormContext,
+} from "react-hook-form"
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+export const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+type FormItemContextValue = {
+  id: string
+}
+
+export const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+export const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
\ No newline at end of file
diff --git a/src/src/components/ui/form.tsx b/src/src/components/ui/form.tsx
new file mode 100644
index 0000000..b7a6301
--- /dev/null
+++ b/src/src/components/ui/form.tsx
@@ -0,0 +1,133 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { FormFieldContext, FormItemContext, useFormField } from "./form-utils"
+
+const Form = FormProvider
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/src/src/components/ui/hover-card.tsx b/src/src/components/ui/hover-card.tsx
new file mode 100644
index 0000000..863ff01
--- /dev/null
+++ b/src/src/components/ui/hover-card.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/src/src/components/ui/input-otp.tsx b/src/src/components/ui/input-otp.tsx
new file mode 100644
index 0000000..ebf5c28
--- /dev/null
+++ b/src/src/components/ui/input-otp.tsx
@@ -0,0 +1,69 @@
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Dot } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Dot />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/src/src/components/ui/input.tsx b/src/src/components/ui/input.tsx
new file mode 100644
index 0000000..68551b9
--- /dev/null
+++ b/src/src/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/src/src/components/ui/label.tsx b/src/src/components/ui/label.tsx
new file mode 100644
index 0000000..683faa7
--- /dev/null
+++ b/src/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/src/src/components/ui/menubar.tsx b/src/src/components/ui/menubar.tsx
new file mode 100644
index 0000000..d11c299
--- /dev/null
+++ b/src/src/components/ui/menubar.tsx
@@ -0,0 +1,234 @@
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const MenubarMenu = MenubarPrimitive.Menu
+
+const MenubarGroup = MenubarPrimitive.Group
+
+const MenubarPortal = MenubarPrimitive.Portal
+
+const MenubarSub = MenubarPrimitive.Sub
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
+      className
+    )}
+    {...props}
+  />
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+)
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+MenubarShortcut.displayname = "MenubarShortcut"
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+}
diff --git a/src/src/components/ui/navigation-menu-variants.ts b/src/src/components/ui/navigation-menu-variants.ts
new file mode 100644
index 0000000..403e12f
--- /dev/null
+++ b/src/src/components/ui/navigation-menu-variants.ts
@@ -0,0 +1,5 @@
+import { cva } from "class-variance-authority"
+
+export const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+)
\ No newline at end of file
diff --git a/src/src/components/ui/navigation-menu.tsx b/src/src/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..0e1499b
--- /dev/null
+++ b/src/src/components/ui/navigation-menu.tsx
@@ -0,0 +1,123 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { navigationMenuTriggerStyle } from "./navigation-menu-variants"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}
diff --git a/src/src/components/ui/pagination.tsx b/src/src/components/ui/pagination.tsx
new file mode 100644
index 0000000..5bacb4a
--- /dev/null
+++ b/src/src/components/ui/pagination.tsx
@@ -0,0 +1,118 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { ButtonProps } from "@/components/ui/button"
+import { buttonVariants } from "@/components/ui/button-variants"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}
diff --git a/src/src/components/ui/popover.tsx b/src/src/components/ui/popover.tsx
new file mode 100644
index 0000000..bbba7e0
--- /dev/null
+++ b/src/src/components/ui/popover.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
diff --git a/src/src/components/ui/progress.tsx b/src/src/components/ui/progress.tsx
new file mode 100644
index 0000000..105fb65
--- /dev/null
+++ b/src/src/components/ui/progress.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/src/src/components/ui/radio-group.tsx b/src/src/components/ui/radio-group.tsx
new file mode 100644
index 0000000..43b43b4
--- /dev/null
+++ b/src/src/components/ui/radio-group.tsx
@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
diff --git a/src/src/components/ui/resizable.tsx b/src/src/components/ui/resizable.tsx
new file mode 100644
index 0000000..cd3cb0e
--- /dev/null
+++ b/src/src/components/ui/resizable.tsx
@@ -0,0 +1,43 @@
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/src/src/components/ui/scroll-area.tsx b/src/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..cff30bf
--- /dev/null
+++ b/src/src/components/ui/scroll-area.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit] [&>div]:!block [&>div]:!w-full">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/src/src/components/ui/select.tsx b/src/src/components/ui/select.tsx
new file mode 100644
index 0000000..ea85bc1
--- /dev/null
+++ b/src/src/components/ui/select.tsx
@@ -0,0 +1,158 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 md:text-sm",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/src/src/components/ui/separator.tsx b/src/src/components/ui/separator.tsx
new file mode 100644
index 0000000..6d7f122
--- /dev/null
+++ b/src/src/components/ui/separator.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/src/src/components/ui/sheet.tsx b/src/src/components/ui/sheet.tsx
new file mode 100644
index 0000000..7b1dbe4
--- /dev/null
+++ b/src/src/components/ui/sheet.tsx
@@ -0,0 +1,131 @@
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "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",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+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",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+  VariantProps<typeof sheetVariants> { }
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="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 className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet, SheetClose,
+  SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger
+}
+
diff --git a/src/src/components/ui/sidebar-utils.ts b/src/src/components/ui/sidebar-utils.ts
new file mode 100644
index 0000000..01c777b
--- /dev/null
+++ b/src/src/components/ui/sidebar-utils.ts
@@ -0,0 +1,52 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+
+export const SIDEBAR_COOKIE_NAME = "sidebar:state"
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+export const SIDEBAR_WIDTH = "16rem"
+export const SIDEBAR_WIDTH_MOBILE = "18rem"
+export const SIDEBAR_WIDTH_ICON = "3rem"
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+export type SidebarContext = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+export const SidebarContext = React.createContext<SidebarContext | null>(null)
+
+export function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+export const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
\ No newline at end of file
diff --git a/src/src/components/ui/sidebar.tsx b/src/src/components/ui/sidebar.tsx
new file mode 100644
index 0000000..51a2b57
--- /dev/null
+++ b/src/src/components/ui/sidebar.tsx
@@ -0,0 +1,724 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { VariantProps } from "class-variance-authority"
+import { PanelLeft } from "lucide-react"
+
+import { useIsMobile } from "@/hooks/useIsMobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import { Sheet, SheetContent } from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import {
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_MOBILE,
+  SIDEBAR_WIDTH_ICON,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SidebarContext,
+  useSidebar,
+  sidebarMenuButtonVariants,
+  type SidebarContext as SidebarContextType,
+} from "./sidebar-utils"
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile()
+    const [openMobile, setOpenMobile] = React.useState(false)
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen)
+    const open = openProp ?? _open
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === "function" ? value(open) : value
+        if (setOpenProp) {
+          setOpenProp(openState)
+        } else {
+          _setOpen(openState)
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      },
+      [setOpenProp, open]
+    )
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open)
+    }, [isMobile, setOpen, setOpenMobile])
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault()
+          toggleSidebar()
+        }
+      }
+
+      window.addEventListener("keydown", handleKeyDown)
+      return () => window.removeEventListener("keydown", handleKeyDown)
+    }, [toggleSidebar])
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed"
+
+    const contextValue = React.useMemo<SidebarContextType>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    )
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              className
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    )
+  }
+)
+SidebarProvider.displayName = "SidebarProvider"
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right"
+    variant?: "sidebar" | "floating" | "inset"
+    collapsible?: "offcanvas" | "icon" | "none"
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      )
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer hidden md:block text-sidebar-foreground"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+          )}
+        />
+        <div
+          className={cn(
+            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+Sidebar.displayName = "Sidebar"
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeft />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+})
+SidebarTrigger.displayName = "SidebarTrigger"
+
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarRail.displayName = "SidebarRail"
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInset.displayName = "SidebarInset"
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInput.displayName = "SidebarInput"
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarHeader.displayName = "SidebarHeader"
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarFooter.displayName = "SidebarFooter"
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+})
+SidebarSeparator.displayName = "SidebarSeparator"
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarContent.displayName = "SidebarContent"
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarGroup.displayName = "SidebarGroup"
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupLabel.displayName = "SidebarGroupLabel"
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupAction.displayName = "SidebarGroupAction"
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn("w-full text-sm", className)}
+    {...props}
+  />
+))
+SidebarGroupContent.displayName = "SidebarGroupContent"
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    {...props}
+  />
+))
+SidebarMenu.displayName = "SidebarMenu"
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn("group/menu-item relative", className)}
+    {...props}
+  />
+))
+SidebarMenuItem.displayName = "SidebarMenuItem"
+
+
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button"
+    const { isMobile, state } = useSidebar()
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    )
+
+    if (!tooltip) {
+      return button
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      }
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    )
+  }
+)
+SidebarMenuButton.displayName = "SidebarMenuButton"
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    showOnHover?: boolean
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuAction.displayName = "SidebarMenuAction"
+
+const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuBadge.displayName = "SidebarMenuBadge"
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 flex-1 max-w-[--skeleton-width]"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+})
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
+
+const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu-sub"
+    className={cn(
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuSub.displayName = "SidebarMenuSub"
+
+const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />)
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean
+    size?: "sm" | "md"
+    isActive?: boolean
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+}
diff --git a/src/src/components/ui/skeleton.tsx b/src/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..01b8b6d
--- /dev/null
+++ b/src/src/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/src/src/components/ui/slider.tsx b/src/src/components/ui/slider.tsx
new file mode 100644
index 0000000..e161dae
--- /dev/null
+++ b/src/src/components/ui/slider.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
diff --git a/src/src/components/ui/switch.tsx b/src/src/components/ui/switch.tsx
new file mode 100644
index 0000000..aa58baa
--- /dev/null
+++ b/src/src/components/ui/switch.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/src/src/components/ui/table.tsx b/src/src/components/ui/table.tsx
new file mode 100644
index 0000000..7f3502f
--- /dev/null
+++ b/src/src/components/ui/table.tsx
@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/src/src/components/ui/tabs.tsx b/src/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..f57fffd
--- /dev/null
+++ b/src/src/components/ui/tabs.tsx
@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/src/src/components/ui/textarea.tsx b/src/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..acd41bc
--- /dev/null
+++ b/src/src/components/ui/textarea.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/src/src/components/ui/toast.tsx b/src/src/components/ui/toast.tsx
new file mode 100644
index 0000000..a822477
--- /dev/null
+++ b/src/src/components/ui/toast.tsx
@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
diff --git a/src/src/components/ui/toaster.tsx b/src/src/components/ui/toaster.tsx
new file mode 100644
index 0000000..18edc7c
--- /dev/null
+++ b/src/src/components/ui/toaster.tsx
@@ -0,0 +1,33 @@
+import { useToast } from "@/hooks/useToast"
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/src/src/components/ui/toggle-group.tsx b/src/src/components/ui/toggle-group.tsx
new file mode 100644
index 0000000..172f316
--- /dev/null
+++ b/src/src/components/ui/toggle-group.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle-variants"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/src/src/components/ui/toggle-variants.ts b/src/src/components/ui/toggle-variants.ts
new file mode 100644
index 0000000..0c8f15f
--- /dev/null
+++ b/src/src/components/ui/toggle-variants.ts
@@ -0,0 +1,23 @@
+import { cva } from "class-variance-authority"
+
+export const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
\ No newline at end of file
diff --git a/src/src/components/ui/toggle.tsx b/src/src/components/ui/toggle.tsx
new file mode 100644
index 0000000..a2c2275
--- /dev/null
+++ b/src/src/components/ui/toggle.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "./toggle-variants"
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle }
diff --git a/src/src/components/ui/tooltip.tsx b/src/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..e121f0a
--- /dev/null
+++ b/src/src/components/ui/tooltip.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/src/src/components/wallet/CashuWallet.tsx b/src/src/components/wallet/CashuWallet.tsx
new file mode 100644
index 0000000..1eafe49
--- /dev/null
+++ b/src/src/components/wallet/CashuWallet.tsx
@@ -0,0 +1,644 @@
+import { useState, useEffect } from 'react';
+import { useCashu } from '@/hooks/wallet/useCashu';
+import { useMintManager } from '@/hooks/wallet/useMintManager';
+import { useLightningOperations } from '@/hooks/wallet/useLightningOperations';
+import { useTokenOperations } from '@/hooks/wallet/useTokenOperations';
+import { useHistoryManager } from '@/hooks/wallet/useHistoryManager';
+import { useSatsToUsd } from '@/hooks/useExchangeRate';
+import { generateQRCode } from '@/lib/wallet/qrCodeGenerator';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { 
+  Wallet, 
+  ArrowDownCircle, 
+  ArrowUpCircle, 
+  History, 
+  Copy, 
+  ExternalLink,
+  AlertCircle,
+  Shield,
+  Trash2,
+  Plus,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export function CashuWallet() {
+  const {
+    coco,
+    repositories,
+    balances,
+    mints,
+    totalBalance,
+    isInitialized,
+    isLoading: walletLoading,
+    error: walletError,
+    mnemonic,
+    getEncodedToken,
+    refreshMints,
+  } = useCashu();
+
+  const usdValue = useSatsToUsd(totalBalance);
+
+  const {
+    activeMintUrl,
+    setActiveMintUrl,
+    mintUrl,
+    setMintUrl,
+    handleAddMint,
+    handleRemoveMintClick,
+    handleConfirmRemoveMint,
+    mintToRemove,
+    showRemoveMintModal,
+    setShowRemoveMintModal,
+    getCleanMintLabel,
+  } = useMintManager({ coco, mints, repositories, refreshMints });
+
+  const {
+    quoteAmount,
+    setQuoteAmount,
+    showInvoiceModal,
+    setShowInvoiceModal,
+    currentInvoice,
+    handleLightningReceive,
+    lightningInvoice,
+    setLightningInvoice,
+    isProcessingPayment,
+    handleLightningSend,
+  } = useLightningOperations({ coco, activeMintUrl, generateQRCode });
+
+  const {
+    tokenInput,
+    setTokenInput,
+    handleTokenReceive,
+    sendAmount,
+    setSendAmount,
+    handleTokenSend,
+    sentToken,
+    setSentToken,
+    sentTokenQRCode,
+  } = useTokenOperations({ coco, activeMintUrl, generateQRCode, getEncodedToken });
+
+  const { history, isLoading: historyLoading } = useHistoryManager({
+    coco,
+    repositories,
+    mints,
+  });
+
+  // Set first mint as active if none selected
+  useEffect(() => {
+    if (mints.length > 0 && !activeMintUrl) {
+      setActiveMintUrl(mints[0].url);
+    }
+  }, [mints, activeMintUrl, setActiveMintUrl]);
+
+  // Show wallet loading state
+  if (walletLoading) {
+    return (
+      <Card className="bg-black/90 border-2 border-orange-500/30">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-orange-400">
+            <Wallet className="h-5 w-5" />
+            Cashu Wallet
+          </CardTitle>
+          <CardDescription>Initializing wallet...</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Skeleton className="h-20 w-full" />
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-10 w-full" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Show wallet error state
+  if (walletError) {
+    return (
+      <Card className="bg-black/90 border-2 border-red-500/50">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-red-400">
+            <AlertCircle className="h-5 w-5" />
+            Wallet Error
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Alert className="bg-red-950/30 border-red-500/50">
+            <AlertCircle className="h-4 w-4 text-red-400" />
+            <AlertDescription className="text-gray-300">
+              {walletError.message}
+            </AlertDescription>
+          </Alert>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Copy to clipboard helper
+  const copyToClipboard = async (text: string, label: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      // Could add toast notification here
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  return (
+    <>
+      <Card className="bg-gradient-to-br from-orange-950/30 to-yellow-950/30 border-2 border-orange-500/50">
+        <CardHeader>
+          <CardTitle className="text-xl font-black uppercase text-orange-400 flex items-center gap-2">
+            <Wallet className="h-5 w-5" />
+            Cashu Wallet
+          </CardTitle>
+          <CardDescription>
+            Built-in wallet for easy payments - no external setup required
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Balance Display */}
+          <div className="text-center py-6 space-y-2">
+            <div className="text-sm text-gray-400 uppercase tracking-wide">Total Balance</div>
+            <div className="text-4xl font-black text-white">
+              {totalBalance.toLocaleString()} <span className="text-2xl text-gray-400">sats</span>
+            </div>
+            {usdValue !== null && (
+              <div className="text-lg text-gray-400">
+                ≈ ${usdValue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+              </div>
+            )}
+          </div>
+
+          {/* Active Mint Selector */}
+          {mints.length > 0 && (
+            <div className="space-y-2">
+              <Label className="text-sm font-bold text-gray-300">Active Mint</Label>
+              <Select value={activeMintUrl || undefined} onValueChange={setActiveMintUrl}>
+                <SelectTrigger className="bg-gray-800 border-gray-700">
+                  <SelectValue placeholder="Select a mint" />
+                </SelectTrigger>
+                <SelectContent>
+                  {mints.map((mint) => (
+                    <SelectItem key={mint.url} value={mint.url}>
+                      <div className="flex items-center justify-between gap-3">
+                        <span>{getCleanMintLabel(mint)}</span>
+                        <span className="text-xs text-gray-400">
+                          {balances[mint.url] || 0} sats
+                        </span>
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          {/* Main Actions */}
+          <Tabs defaultValue="receive" className="w-full">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="receive" className="gap-2">
+                <ArrowDownCircle className="h-4 w-4" />
+                Receive
+              </TabsTrigger>
+              <TabsTrigger value="send" className="gap-2">
+                <ArrowUpCircle className="h-4 w-4" />
+                Send
+              </TabsTrigger>
+            </TabsList>
+
+            {/* Receive Tab */}
+            <TabsContent value="receive" className="space-y-4 mt-4">
+              {/* Lightning Invoice */}
+              <div className="space-y-3">
+                <Label className="text-sm font-bold text-gray-300">Receive Lightning Payment</Label>
+                <div className="flex gap-2">
+                  <Input
+                    type="number"
+                    placeholder="Amount in sats"
+                    value={quoteAmount}
+                    onChange={(e) => setQuoteAmount(e.target.value)}
+                    className="bg-gray-800 border-gray-700"
+                  />
+                  <Button
+                    onClick={handleLightningReceive}
+                    disabled={!activeMintUrl || !quoteAmount}
+                    className="bg-orange-500 hover:bg-orange-600"
+                  >
+                    Generate Invoice
+                  </Button>
+                </div>
+              </div>
+
+              <div className="relative">
+                <div className="absolute inset-0 flex items-center">
+                  <span className="w-full border-t border-gray-700" />
+                </div>
+                <div className="relative flex justify-center text-xs uppercase">
+                  <span className="bg-background px-2 text-gray-500">Or</span>
+                </div>
+              </div>
+
+              {/* Cashu Token */}
+              <div className="space-y-3">
+                <Label className="text-sm font-bold text-gray-300">Receive Cashu Token</Label>
+                <div className="space-y-2">
+                  <Input
+                    placeholder="Paste Cashu token..."
+                    value={tokenInput}
+                    onChange={(e) => setTokenInput(e.target.value)}
+                    className="bg-gray-800 border-gray-700 font-mono text-xs"
+                  />
+                  <Button
+                    onClick={handleTokenReceive}
+                    disabled={!tokenInput}
+                    className="w-full bg-green-600 hover:bg-green-700"
+                  >
+                    Receive Token
+                  </Button>
+                </div>
+              </div>
+            </TabsContent>
+
+            {/* Send Tab */}
+            <TabsContent value="send" className="space-y-4 mt-4">
+              {/* Send Token */}
+              <div className="space-y-3">
+                <Label className="text-sm font-bold text-gray-300">Send Cashu Token</Label>
+                <div className="flex gap-2">
+                  <Input
+                    type="number"
+                    placeholder="Amount in sats"
+                    value={sendAmount}
+                    onChange={(e) => setSendAmount(e.target.value)}
+                    className="bg-gray-800 border-gray-700"
+                  />
+                  <Button
+                    onClick={handleTokenSend}
+                    disabled={!activeMintUrl || !sendAmount}
+                    className="bg-orange-500 hover:bg-orange-600"
+                  >
+                    Create Token
+                  </Button>
+                </div>
+              </div>
+
+              <div className="relative">
+                <div className="absolute inset-0 flex items-center">
+                  <span className="w-full border-t border-gray-700" />
+                </div>
+                <div className="relative flex justify-center text-xs uppercase">
+                  <span className="bg-background px-2 text-gray-500">Or</span>
+                </div>
+              </div>
+
+              {/* Pay Lightning Invoice */}
+              <div className="space-y-3">
+                <Label className="text-sm font-bold text-gray-300">Pay Lightning Invoice</Label>
+                <div className="space-y-2">
+                  <Input
+                    placeholder="Paste Lightning invoice (lnbc...)"
+                    value={lightningInvoice}
+                    onChange={(e) => setLightningInvoice(e.target.value)}
+                    className="bg-gray-800 border-gray-700 font-mono text-xs"
+                  />
+                  <Button
+                    onClick={handleLightningSend}
+                    disabled={!lightningInvoice || isProcessingPayment}
+                    className="w-full bg-blue-600 hover:bg-blue-700"
+                  >
+                    {isProcessingPayment ? 'Processing...' : 'Pay Invoice'}
+                  </Button>
+                </div>
+              </div>
+            </TabsContent>
+          </Tabs>
+
+          {/* History */}
+          {history.length > 0 && (
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <Label className="text-sm font-bold text-gray-300 flex items-center gap-2">
+                  <History className="h-4 w-4" />
+                  Recent Activity
+                </Label>
+              </div>
+              <div className="space-y-2 max-h-48 overflow-y-auto">
+                {history.slice(0, 5).map((entry) => (
+                  <div
+                    key={entry.id}
+                    className="flex items-center justify-between p-2 rounded-lg bg-black/50 border border-gray-700"
+                  >
+                    <div className="flex items-center gap-2">
+                      {entry.type === 'mint' || entry.type === 'receive' ? (
+                        <ArrowDownCircle className="h-4 w-4 text-green-400" />
+                      ) : (
+                        <ArrowUpCircle className="h-4 w-4 text-red-400" />
+                      )}
+                      <div>
+                        <div className="text-sm font-medium text-white">
+                          {entry.type === 'mint' && 'Received Lightning'}
+                          {entry.type === 'melt' && 'Sent Lightning'}
+                          {entry.type === 'send' && 'Sent Token'}
+                          {entry.type === 'receive' && 'Received Token'}
+                        </div>
+                        <div className="text-xs text-gray-400">
+                          {new Date(entry.timestamp).toLocaleDateString()}
+                        </div>
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <div className="text-sm font-mono text-white">
+                        {entry.type === 'mint' || entry.type === 'receive' ? '+' : '-'}
+                        {entry.amount.toLocaleString()} sats
+                      </div>
+                      <Badge
+                        variant={entry.status === 'completed' ? 'default' : entry.status === 'pending' ? 'secondary' : 'destructive'}
+                        className="text-[10px]"
+                      >
+                        {entry.status}
+                      </Badge>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* What is Cashu Info Card */}
+      <Card className="bg-blue-950/30 border-2 border-blue-500/50">
+        <CardHeader>
+          <CardTitle className="text-blue-400">What is Cashu?</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <p className="text-gray-300 text-sm">
+            Cashu is digital cash backed by Bitcoin Lightning. Think of it as Bitcoin tokens you hold in your browser.
+          </p>
+          <div className="grid gap-2 text-sm">
+            <div className="flex items-start gap-2">
+              <span className="text-green-400">✅</span>
+              <span className="text-gray-300">Works offline at skate spots</span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-400">✅</span>
+              <span className="text-gray-300">Instant peer-to-peer payments</span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-400">✅</span>
+              <span className="text-gray-300">Privacy-focused (mints don't track you)</span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-400">✅</span>
+              <span className="text-gray-300">Always redeemable for Lightning sats</span>
+            </div>
+          </div>
+          <a
+            href="https://cashumints.space/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 text-sm text-[#ccff00] hover:text-[#ccff00]/80 font-bold"
+          >
+            <ExternalLink className="h-4 w-4" />
+            Learn more at cashumints.space
+          </a>
+        </CardContent>
+      </Card>
+
+      {/* Mint Management */}
+      <Card className="bg-purple-950/30 border-2 border-purple-500/50">
+        <CardHeader>
+          <CardTitle className="text-purple-400 flex items-center gap-2">
+            <Shield className="h-5 w-5" />
+            Trusted Mints ({mints.length})
+          </CardTitle>
+          <CardDescription className="text-gray-400">
+            Manage which mints you trust. Multiple mints = redundancy (like multiple relays)
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Mint List */}
+          <div className="space-y-2">
+            {mints.map((mint) => (
+              <div
+                key={mint.url}
+                className="flex items-center justify-between p-3 rounded-lg bg-black/50 border border-purple-500/30"
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="font-mono text-sm text-white truncate">
+                    {getCleanMintLabel(mint)}
+                  </div>
+                  <div className="text-xs text-gray-400">
+                    {balances[mint.url] || 0} sats
+                  </div>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleRemoveMintClick(mint)}
+                  className="text-red-400 hover:text-red-300 hover:bg-red-500/10"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+
+          {/* Add Mint */}
+          <div className="space-y-2">
+            <Label className="text-sm font-bold text-gray-300">Add New Mint</Label>
+            <div className="flex gap-2">
+              <Input
+                placeholder="https://mint.example.com"
+                value={mintUrl}
+                onChange={(e) => setMintUrl(e.target.value)}
+                className="bg-gray-800 border-gray-700 font-mono text-xs"
+              />
+              <Button
+                onClick={handleAddMint}
+                disabled={!mintUrl}
+                variant="outline"
+                size="sm"
+                className="border-purple-500/50 text-purple-400 hover:bg-purple-500/10"
+              >
+                <Plus className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+
+          <a
+            href="https://cashumints.space/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 text-sm text-purple-400 hover:text-purple-300"
+          >
+            <ExternalLink className="h-3 w-3" />
+            Find more mints at cashumints.space
+          </a>
+        </CardContent>
+      </Card>
+
+      {/* Backup Warning */}
+      {mnemonic && (
+        <Card className="bg-yellow-950/30 border-2 border-yellow-500/50">
+          <CardHeader>
+            <CardTitle className="text-yellow-400 flex items-center gap-2">
+              <Shield className="h-5 w-5" />
+              Backup Your Wallet
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <p className="text-gray-300 text-sm">
+              Your wallet is secured with a 12-word recovery phrase. Save it safely - you'll need it to restore your balance if you clear browser data.
+            </p>
+            <Button
+              onClick={() => {
+                // Show backup modal (will implement separately)
+                alert(`Your backup phrase:\n\n${mnemonic}\n\nWrite these words down and store them safely!`);
+              }}
+              variant="outline"
+              className="w-full border-yellow-500/50 text-yellow-400 hover:bg-yellow-500/10"
+            >
+              View Recovery Phrase
+            </Button>
+            <p className="text-xs text-gray-400 italic">
+              💡 This is like your Nostr nsec - keep it secret and backed up!
+            </p>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Invoice Modal */}
+      <Dialog open={showInvoiceModal} onOpenChange={setShowInvoiceModal}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>Receive {currentInvoice?.amount} sats</DialogTitle>
+            <DialogDescription>
+              Pay this invoice from any Lightning wallet
+            </DialogDescription>
+          </DialogHeader>
+          {currentInvoice && (
+            <div className="space-y-4">
+              <div className="flex justify-center p-4 bg-white rounded-lg">
+                <img src={currentInvoice.qrCodeUrl} alt="Invoice QR Code" className="max-w-full h-auto" />
+              </div>
+              <div className="space-y-2">
+                <Label className="text-xs text-gray-400">Lightning Invoice</Label>
+                <div className="flex gap-2">
+                  <Input
+                    value={currentInvoice.invoice}
+                    readOnly
+                    className="font-mono text-xs bg-gray-800 border-gray-700"
+                  />
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => copyToClipboard(currentInvoice.invoice, 'Invoice')}
+                  >
+                    <Copy className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+              <p className="text-sm text-yellow-400">
+                ⏳ Waiting for payment...
+              </p>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* Send Token Modal */}
+      <Dialog open={!!sentToken} onOpenChange={(open) => !open && setSentToken(null)}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>Token Ready to Send</DialogTitle>
+            <DialogDescription>
+              Share this token with the recipient
+            </DialogDescription>
+          </DialogHeader>
+          {sentToken && (
+            <div className="space-y-4">
+              {sentTokenQRCode && (
+                <div className="flex justify-center p-4 bg-white rounded-lg">
+                  <img src={sentTokenQRCode} alt="Token QR Code" className="max-w-full h-auto" />
+                </div>
+              )}
+              <div className="space-y-2">
+                <Label className="text-xs text-gray-400">Cashu Token</Label>
+                <div className="space-y-2">
+                  <Input
+                    value={sentToken}
+                    readOnly
+                    className="font-mono text-xs bg-gray-800 border-gray-700"
+                  />
+                  <div className="flex gap-2">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => copyToClipboard(sentToken, 'Token')}
+                      className="flex-1"
+                    >
+                      <Copy className="h-4 w-4 mr-2" />
+                      Copy Token
+                    </Button>
+                  </div>
+                </div>
+              </div>
+              <Alert className="bg-yellow-950/30 border-yellow-500/30">
+                <AlertCircle className="h-4 w-4 text-yellow-400" />
+                <AlertDescription className="text-sm text-gray-300">
+                  Anyone with this token can claim it - treat it like cash!
+                </AlertDescription>
+              </Alert>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* Remove Mint Confirmation */}
+      <Dialog open={showRemoveMintModal} onOpenChange={setShowRemoveMintModal}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Remove Mint?</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to remove {mintToRemove && getCleanMintLabel(mintToRemove)}?
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <Alert className="bg-yellow-950/30 border-yellow-500/30">
+              <AlertCircle className="h-4 w-4 text-yellow-400" />
+              <AlertDescription className="text-sm text-gray-300">
+                Make sure you have withdrawn all funds from this mint before removing it.
+              </AlertDescription>
+            </Alert>
+            <div className="flex gap-3 justify-end">
+              <Button variant="outline" onClick={() => setShowRemoveMintModal(false)}>
+                Cancel
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={handleConfirmRemoveMint}
+              >
+                Remove Mint
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/src/src/components/wallet/CashuWalletCard.tsx b/src/src/components/wallet/CashuWalletCard.tsx
new file mode 100644
index 0000000..f9c8494
--- /dev/null
+++ b/src/src/components/wallet/CashuWalletCard.tsx
@@ -0,0 +1,690 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useCashu } from '@/hooks/wallet/useCashu';
+import { useMintManager } from '@/hooks/wallet/useMintManager';
+import { useLightningOperations } from '@/hooks/wallet/useLightningOperations';
+import { useTokenOperations } from '@/hooks/wallet/useTokenOperations';
+import { useHistoryManager } from '@/hooks/wallet/useHistoryManager';
+import { useSatsToUsd } from '@/hooks/useExchangeRate';
+import { useLightningAddress } from '@/hooks/useLightningAddress';
+import { generateQRCode } from '@/lib/wallet/qrCodeGenerator';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { 
+  Wallet, 
+  ArrowDownCircle, 
+  ArrowUpCircle, 
+  History, 
+  Copy, 
+  ExternalLink,
+  AlertCircle,
+  Shield,
+  ScanLine,
+  Zap,
+} from 'lucide-react';
+import { useToast } from '@/hooks/useToast';
+import { QRScannerModal } from '@/components/wallet/QRScannerModal';
+import { MintPrivacyManager } from '@/components/wallet/MintPrivacyManager';
+
+export function CashuWalletCard() {
+  const {
+    coco,
+    repositories,
+    balances,
+    mints,
+    totalBalance,
+    isInitialized,
+    isLoading: walletLoading,
+    error: walletError,
+    mnemonic,
+    getEncodedToken,
+    refreshMints,
+  } = useCashu();
+
+  const usdValue = useSatsToUsd(totalBalance);
+  const { toast } = useToast();
+  const { getInvoice: getLightningInvoice, isLoading: isResolvingAddress } = useLightningAddress();
+
+  const {
+    activeMintUrl,
+    setActiveMintUrl,
+    handleAddMint,
+    handleRemoveMintDirect,
+    getCleanMintLabel,
+  } = useMintManager({ coco, mints, repositories, refreshMints });
+
+  const {
+    quoteAmount,
+    setQuoteAmount,
+    showInvoiceModal,
+    setShowInvoiceModal,
+    currentInvoice,
+    handleLightningReceive,
+    lightningInvoice,
+    setLightningInvoice,
+    isProcessingPayment,
+    handleLightningSend,
+  } = useLightningOperations({ coco, activeMintUrl, generateQRCode });
+
+  const {
+    tokenInput,
+    setTokenInput,
+    handleTokenReceive,
+    sendAmount,
+    setSendAmount,
+    handleTokenSend,
+    sentToken,
+    setSentToken,
+    sentTokenQRCode,
+  } = useTokenOperations({ coco, activeMintUrl, generateQRCode, getEncodedToken });
+
+  const { history, isLoading: historyLoading } = useHistoryManager({
+    coco,
+    repositories,
+    mints,
+  });
+
+  // QR Scanner state
+  const [showQRScanner, setShowQRScanner] = useState(false);
+  
+  // Lightning address state
+  const [lightningAddress, setLightningAddress] = useState('');
+
+  // Set first mint as active if none selected
+  useEffect(() => {
+    if (mints.length > 0 && !activeMintUrl) {
+      setActiveMintUrl(mints[0].url);
+    }
+  }, [mints, activeMintUrl, setActiveMintUrl]);
+
+  // Handle QR scan result
+  const handleQRScanResult = useCallback(async (result: { type: string; value: string }) => {
+    setShowQRScanner(false);
+    
+    switch (result.type) {
+      case 'cashu_token':
+        setTokenInput(result.value);
+        // Auto-receive
+        if (coco) {
+          try {
+            await coco.wallet.receive(result.value);
+            toast({ title: 'Token received', description: 'Cashu token redeemed successfully!' });
+          } catch (err) {
+            toast({ 
+              variant: 'destructive', 
+              title: 'Receive failed', 
+              description: err instanceof Error ? err.message : 'Unknown error' 
+            });
+          }
+        }
+        break;
+      case 'lightning_invoice':
+        setLightningInvoice(result.value);
+        break;
+      case 'lightning_address':
+        setLightningAddress(result.value);
+        break;
+      default:
+        toast({ 
+          variant: 'destructive', 
+          title: 'Unknown QR code', 
+          description: 'Could not recognize the scanned content' 
+        });
+    }
+  }, [coco, setTokenInput, setLightningInvoice, toast]);
+
+  // Handle paying a Lightning address
+  const handlePayLightningAddress = useCallback(async () => {
+    if (!lightningAddress || !sendAmount || !coco || !activeMintUrl) return;
+    
+    try {
+      const amount = parseInt(sendAmount);
+      if (isNaN(amount) || amount <= 0) {
+        toast({ variant: 'destructive', title: 'Invalid amount', description: 'Please enter a valid amount' });
+        return;
+      }
+
+      // First resolve the Lightning address to get an invoice
+      const invoice = await getLightningInvoice({ lightningAddress, amountSats: amount });
+      
+      // Then pay the invoice using Cashu
+      const meltQuote = await coco.quotes.createMeltQuote(activeMintUrl, invoice);
+      await coco.quotes.payMeltQuote(activeMintUrl, meltQuote.quote);
+      
+      toast({ title: 'Payment sent', description: `Sent ${amount} sats to ${lightningAddress}` });
+      setLightningAddress('');
+      setSendAmount('');
+    } catch (err) {
+      toast({ 
+        variant: 'destructive', 
+        title: 'Payment failed', 
+        description: err instanceof Error ? err.message : 'Unknown error' 
+      });
+    }
+  }, [lightningAddress, sendAmount, coco, activeMintUrl, getLightningInvoice, toast, setSendAmount]);
+
+  // Copy to clipboard helper
+  const copyToClipboard = async (text: string, label: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast({ title: 'Copied', description: `${label} copied to clipboard` });
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  // Show wallet loading state
+  if (walletLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Wallet className="h-5 w-5 text-orange-500" />
+            Cashu Wallet
+          </CardTitle>
+          <CardDescription>Initializing wallet...</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Skeleton className="h-20 w-full" />
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-10 w-full" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Show wallet error state
+  if (walletError) {
+    return (
+      <Card className="border-destructive/50">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Wallet Error
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertDescription>{walletError.message}</AlertDescription>
+          </Alert>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <>
+      <div className="grid gap-4 sm:gap-6 lg:grid-cols-2">
+        {/* Main Wallet Card */}
+        <Card className="lg:col-span-2 border-orange-500/30 bg-gradient-to-br from-orange-500/5 to-yellow-500/5">
+          <CardHeader className="p-4 sm:p-6">
+            <CardTitle className="text-lg sm:text-xl font-bold flex items-center gap-2">
+              <Wallet className="h-5 w-5 text-orange-500" />
+              Cashu Wallet
+            </CardTitle>
+            <CardDescription className="text-xs sm:text-sm">
+              Built-in ecash wallet - no external setup required
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4 sm:space-y-6 p-4 sm:p-6 pt-0 sm:pt-0">
+            {/* Balance Display */}
+            <div className="text-center py-4 sm:py-6 space-y-1 sm:space-y-2">
+              <div className="text-xs sm:text-sm text-muted-foreground uppercase tracking-wide">Total Balance</div>
+              <div className="text-3xl sm:text-4xl font-black">
+                {totalBalance.toLocaleString()} <span className="text-xl sm:text-2xl text-muted-foreground">sats</span>
+              </div>
+              {usdValue !== null && (
+                <div className="text-base sm:text-lg text-muted-foreground">
+                  ≈ ${usdValue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                </div>
+              )}
+            </div>
+
+            {/* Active Mint Selector */}
+            {mints.length > 0 && (
+              <div className="space-y-2">
+                <Label className="text-sm font-medium">Active Mint</Label>
+                <Select value={activeMintUrl || undefined} onValueChange={setActiveMintUrl}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a mint" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {mints.map((mint) => (
+                      <SelectItem key={mint.url} value={mint.url}>
+                        <div className="flex items-center justify-between gap-3">
+                          <span>{getCleanMintLabel(mint)}</span>
+                          <span className="text-xs text-muted-foreground">
+                            {balances[mint.url] || 0} sats
+                          </span>
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+
+            {/* Main Actions */}
+            <Tabs defaultValue="receive" className="w-full">
+              <TabsList className="grid w-full grid-cols-2">
+                <TabsTrigger value="receive" className="gap-2">
+                  <ArrowDownCircle className="h-4 w-4" />
+                  Receive
+                </TabsTrigger>
+                <TabsTrigger value="send" className="gap-2">
+                  <ArrowUpCircle className="h-4 w-4" />
+                  Send
+                </TabsTrigger>
+              </TabsList>
+
+              {/* Receive Tab */}
+              <TabsContent value="receive" className="space-y-4 mt-4">
+                {/* Lightning Invoice */}
+                <div className="space-y-3">
+                  <Label className="text-sm font-medium">Receive Lightning Payment</Label>
+                  <div className="flex gap-2">
+                    <Input
+                      type="number"
+                      placeholder="Amount in sats"
+                      value={quoteAmount}
+                      onChange={(e) => setQuoteAmount(e.target.value)}
+                    />
+                    <Button
+                      onClick={handleLightningReceive}
+                      disabled={!activeMintUrl || !quoteAmount}
+                      className="bg-orange-500 hover:bg-orange-600"
+                    >
+                      Generate Invoice
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="relative">
+                  <div className="absolute inset-0 flex items-center">
+                    <span className="w-full border-t" />
+                  </div>
+                  <div className="relative flex justify-center text-xs uppercase">
+                    <span className="bg-background px-2 text-muted-foreground">Or</span>
+                  </div>
+                </div>
+
+                {/* Cashu Token */}
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Label className="text-sm font-medium">Receive Cashu Token</Label>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 gap-1"
+                      onClick={() => setShowQRScanner(true)}
+                    >
+                      <ScanLine className="h-4 w-4" />
+                      Scan
+                    </Button>
+                  </div>
+                  <div className="space-y-2">
+                    <Input
+                      placeholder="Paste Cashu token (cashu...)"
+                      value={tokenInput}
+                      onChange={(e) => setTokenInput(e.target.value)}
+                      className="font-mono text-xs"
+                    />
+                    <Button
+                      onClick={handleTokenReceive}
+                      disabled={!tokenInput}
+                      className="w-full bg-green-600 hover:bg-green-700"
+                    >
+                      Receive Token
+                    </Button>
+                  </div>
+                </div>
+              </TabsContent>
+
+              {/* Send Tab */}
+              <TabsContent value="send" className="space-y-4 mt-4">
+                {/* Send Token */}
+                <div className="space-y-3">
+                  <Label className="text-sm font-medium">Create Cashu Token</Label>
+                  <div className="flex gap-2">
+                    <Input
+                      type="number"
+                      placeholder="Amount in sats"
+                      value={sendAmount}
+                      onChange={(e) => setSendAmount(e.target.value)}
+                    />
+                    <Button
+                      onClick={handleTokenSend}
+                      disabled={!activeMintUrl || !sendAmount}
+                      className="bg-orange-500 hover:bg-orange-600"
+                    >
+                      Create Token
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="relative">
+                  <div className="absolute inset-0 flex items-center">
+                    <span className="w-full border-t" />
+                  </div>
+                  <div className="relative flex justify-center text-xs uppercase">
+                    <span className="bg-background px-2 text-muted-foreground">Or</span>
+                  </div>
+                </div>
+
+                {/* Pay Lightning Invoice */}
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Label className="text-sm font-medium">Pay Lightning Invoice</Label>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 gap-1"
+                      onClick={() => setShowQRScanner(true)}
+                    >
+                      <ScanLine className="h-4 w-4" />
+                      Scan
+                    </Button>
+                  </div>
+                  <div className="space-y-2">
+                    <Input
+                      placeholder="Paste Lightning invoice (lnbc...)"
+                      value={lightningInvoice}
+                      onChange={(e) => setLightningInvoice(e.target.value)}
+                      className="font-mono text-xs"
+                    />
+                    <Button
+                      onClick={handleLightningSend}
+                      disabled={!lightningInvoice || isProcessingPayment}
+                      className="w-full bg-blue-600 hover:bg-blue-700"
+                    >
+                      <Zap className="h-4 w-4 mr-2" />
+                      {isProcessingPayment ? 'Processing...' : 'Pay Invoice'}
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="relative">
+                  <div className="absolute inset-0 flex items-center">
+                    <span className="w-full border-t" />
+                  </div>
+                  <div className="relative flex justify-center text-xs uppercase">
+                    <span className="bg-background px-2 text-muted-foreground">Or</span>
+                  </div>
+                </div>
+
+                {/* Pay Lightning Address */}
+                <div className="space-y-3">
+                  <Label className="text-sm font-medium">Pay Lightning Address</Label>
+                  <div className="space-y-2">
+                    <Input
+                      placeholder="user@domain.com"
+                      value={lightningAddress}
+                      onChange={(e) => setLightningAddress(e.target.value)}
+                    />
+                    <div className="flex gap-2">
+                      <Input
+                        type="number"
+                        placeholder="Amount in sats"
+                        value={sendAmount}
+                        onChange={(e) => setSendAmount(e.target.value)}
+                        className="flex-1"
+                      />
+                      <Button
+                        onClick={handlePayLightningAddress}
+                        disabled={!lightningAddress || !sendAmount || isResolvingAddress || isProcessingPayment}
+                        className="bg-purple-600 hover:bg-purple-700"
+                      >
+                        {isResolvingAddress ? 'Resolving...' : 'Send'}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </TabsContent>
+            </Tabs>
+
+            {/* History */}
+            {history.length > 0 && (
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <Label className="text-sm font-medium flex items-center gap-2">
+                    <History className="h-4 w-4" />
+                    Recent Activity
+                  </Label>
+                </div>
+                <div className="space-y-2 max-h-48 overflow-y-auto">
+                  {history.slice(0, 5).map((entry) => (
+                    <div
+                      key={entry.id}
+                      className="flex items-center justify-between p-2 rounded-lg bg-muted/50 border"
+                    >
+                      <div className="flex items-center gap-2">
+                        {entry.type === 'mint' || entry.type === 'receive' ? (
+                          <ArrowDownCircle className="h-4 w-4 text-green-500" />
+                        ) : (
+                          <ArrowUpCircle className="h-4 w-4 text-red-500" />
+                        )}
+                        <div>
+                          <div className="text-sm font-medium">
+                            {entry.type === 'mint' && 'Received Lightning'}
+                            {entry.type === 'melt' && 'Sent Lightning'}
+                            {entry.type === 'send' && 'Sent Token'}
+                            {entry.type === 'receive' && 'Received Token'}
+                          </div>
+                          <div className="text-xs text-muted-foreground">
+                            {new Date(entry.timestamp).toLocaleDateString()}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <div className="text-sm font-mono">
+                          {entry.type === 'mint' || entry.type === 'receive' ? '+' : '-'}
+                          {entry.amount.toLocaleString()} sats
+                        </div>
+                        <Badge
+                          variant={entry.status === 'completed' ? 'default' : entry.status === 'pending' ? 'secondary' : 'destructive'}
+                          className="text-[10px]"
+                        >
+                          {entry.status}
+                        </Badge>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* What is Cashu Info Card */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Zap className="h-5 w-5 text-amber-500" />
+              What is Cashu?
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <p className="text-muted-foreground text-sm">
+              Cashu is digital cash backed by Bitcoin Lightning. Think of it as Bitcoin tokens you hold in your browser.
+            </p>
+            <div className="grid gap-2 text-sm">
+              <div className="flex items-start gap-2">
+                <span className="text-green-500">✅</span>
+                <span className="text-muted-foreground">Works offline at skate spots</span>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className="text-green-500">✅</span>
+                <span className="text-muted-foreground">Instant peer-to-peer payments</span>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className="text-green-500">✅</span>
+                <span className="text-muted-foreground">Privacy-focused (mints don't track you)</span>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className="text-green-500">✅</span>
+                <span className="text-muted-foreground">Always redeemable for Lightning sats</span>
+              </div>
+            </div>
+            <a
+              href="https://cashumints.space/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 text-sm text-primary hover:underline font-medium"
+            >
+              <ExternalLink className="h-4 w-4" />
+              Learn more at cashumints.space
+            </a>
+          </CardContent>
+        </Card>
+
+        {/* Mint Privacy Management */}
+        <MintPrivacyManager
+          mints={mints}
+          balances={balances}
+          activeMintUrl={activeMintUrl}
+          onSetActiveMint={setActiveMintUrl}
+          onAddMint={handleAddMint}
+          onRemoveMint={handleRemoveMintDirect}
+          totalBalance={totalBalance}
+        />
+      </div>
+
+      {/* Backup Warning */}
+      {mnemonic && (
+        <Card className="mt-6 border-amber-500/50 bg-amber-500/5">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-amber-600">
+              <Shield className="h-5 w-5" />
+              Backup Your Wallet
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <p className="text-muted-foreground text-sm">
+              Your wallet is secured with a 12-word recovery phrase. Save it safely - you'll need it to restore your balance if you clear browser data.
+            </p>
+            <Button
+              onClick={() => {
+                alert(`Your backup phrase:\n\n${mnemonic}\n\nWrite these words down and store them safely!`);
+              }}
+              variant="outline"
+              className="w-full border-amber-500/50 text-amber-600 hover:bg-amber-500/10"
+            >
+              View Recovery Phrase
+            </Button>
+            <p className="text-xs text-muted-foreground italic">
+              This is like your Nostr nsec - keep it secret and backed up!
+            </p>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Invoice Modal */}
+      <Dialog open={showInvoiceModal} onOpenChange={setShowInvoiceModal}>
+        <DialogContent className="w-[calc(100%-1rem)] sm:max-w-md p-4 sm:p-6">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">Receive {currentInvoice?.amount} sats</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              Pay this invoice from any Lightning wallet
+            </DialogDescription>
+          </DialogHeader>
+          {currentInvoice && (
+            <div className="space-y-3 sm:space-y-4">
+              <div className="flex justify-center p-2 sm:p-4 bg-white rounded-lg">
+                <img src={currentInvoice.qrCodeUrl} alt="Invoice QR Code" className="max-w-full max-h-[40vh] h-auto object-contain" />
+              </div>
+              <div className="space-y-2">
+                <Label className="text-xs text-muted-foreground">Lightning Invoice</Label>
+                <div className="flex gap-2">
+                  <Input
+                    value={currentInvoice.invoice}
+                    readOnly
+                    className="font-mono text-[10px] sm:text-xs"
+                  />
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => copyToClipboard(currentInvoice.invoice, 'Invoice')}
+                  >
+                    <Copy className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+              <p className="text-xs sm:text-sm text-amber-600">
+                ⏳ Waiting for payment...
+              </p>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* Send Token Modal */}
+      <Dialog open={!!sentToken} onOpenChange={(open) => !open && setSentToken(null)}>
+        <DialogContent className="w-[calc(100%-1rem)] sm:max-w-md p-4 sm:p-6">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">Token Ready to Send</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              Share this token with the recipient
+            </DialogDescription>
+          </DialogHeader>
+          {sentToken && (
+            <div className="space-y-3 sm:space-y-4">
+              {sentTokenQRCode && (
+                <div className="flex justify-center p-2 sm:p-4 bg-white rounded-lg">
+                  <img src={sentTokenQRCode} alt="Token QR Code" className="max-w-full max-h-[40vh] h-auto object-contain" />
+                </div>
+              )}
+              <div className="space-y-2">
+                <Label className="text-xs text-muted-foreground">Cashu Token</Label>
+                <div className="space-y-2">
+                  <Input
+                    value={sentToken}
+                    readOnly
+                    className="font-mono text-[10px] sm:text-xs"
+                  />
+                  <div className="flex gap-2">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => copyToClipboard(sentToken, 'Token')}
+                      className="flex-1"
+                    >
+                      <Copy className="h-4 w-4 mr-2" />
+                      Copy Token
+                    </Button>
+                  </div>
+                </div>
+              </div>
+              <Alert className="border-amber-500/50 bg-amber-500/5">
+                <AlertCircle className="h-4 w-4 text-amber-600" />
+                <AlertDescription className="text-xs sm:text-sm">
+                  Anyone with this token can claim it - treat it like cash!
+                </AlertDescription>
+              </Alert>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* QR Scanner Modal */}
+      <QRScannerModal
+        isOpen={showQRScanner}
+        onClose={() => setShowQRScanner(false)}
+        onResult={handleQRScanResult}
+      />
+    </>
+  );
+}
diff --git a/src/src/components/wallet/LightningPrivacyTips.tsx b/src/src/components/wallet/LightningPrivacyTips.tsx
new file mode 100644
index 0000000..5051001
--- /dev/null
+++ b/src/src/components/wallet/LightningPrivacyTips.tsx
@@ -0,0 +1,226 @@
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import {
+  Shield,
+  Eye,
+  EyeOff,
+  Wallet,
+  AlertTriangle,
+  ChevronDown,
+  ChevronUp,
+  Nut,
+  Zap,
+  Globe,
+  Lock,
+  CheckCircle2,
+  Info,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface LightningPrivacyTipsProps {
+  className?: string;
+  defaultExpanded?: boolean;
+}
+
+export function LightningPrivacyTips({ className, defaultExpanded = false }: LightningPrivacyTipsProps) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+  return (
+    <Card className={cn("border-blue-500/30", className)}>
+      <CardHeader 
+        className="cursor-pointer" 
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <div className="flex items-center justify-between">
+          <CardTitle className="flex items-center gap-2 text-base">
+            <Shield className="h-5 w-5 text-blue-500" />
+            Privacy Tips
+          </CardTitle>
+          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+            {isExpanded ? (
+              <ChevronUp className="h-4 w-4" />
+            ) : (
+              <ChevronDown className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+        {!isExpanded && (
+          <CardDescription className="text-xs">
+            Learn how to protect your financial privacy
+          </CardDescription>
+        )}
+      </CardHeader>
+      
+      {isExpanded && (
+        <CardContent className="space-y-4 pt-0">
+          {/* Cashu vs Lightning Comparison */}
+          <div className="grid gap-3 sm:grid-cols-2">
+            {/* Cashu - Recommended */}
+            <div className="p-3 rounded-lg bg-green-500/10 border border-green-500/30">
+              <div className="flex items-center gap-2 mb-2">
+                <Nut className="h-5 w-5 text-orange-500" />
+                <span className="font-bold text-sm text-green-400">CASHU (Recommended)</span>
+              </div>
+              <div className="space-y-1.5 text-xs text-gray-300">
+                <div className="flex items-center gap-2">
+                  <CheckCircle2 className="h-3 w-3 text-green-500" />
+                  <span>Anonymous transactions</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <CheckCircle2 className="h-3 w-3 text-green-500" />
+                  <span>Blind signatures hide activity</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <CheckCircle2 className="h-3 w-3 text-green-500" />
+                  <span>No IP exposure</span>
+                </div>
+                <div className="flex items-center gap-2 text-amber-400">
+                  <AlertTriangle className="h-3 w-3" />
+                  <span>Trust mint with funds</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Lightning Address */}
+            <div className="p-3 rounded-lg bg-amber-500/10 border border-amber-500/30">
+              <div className="flex items-center gap-2 mb-2">
+                <Zap className="h-5 w-5 text-amber-500" />
+                <span className="font-bold text-sm text-amber-400">LIGHTNING ADDRESS</span>
+              </div>
+              <div className="space-y-1.5 text-xs text-gray-300">
+                <div className="flex items-center gap-2 text-amber-400">
+                  <Eye className="h-3 w-3" />
+                  <span>Can be linked to identity</span>
+                </div>
+                <div className="flex items-center gap-2 text-amber-400">
+                  <Eye className="h-3 w-3" />
+                  <span>Payment history traceable</span>
+                </div>
+                <div className="flex items-center gap-2 text-amber-400">
+                  <Globe className="h-3 w-3" />
+                  <span>IP visible when invoicing</span>
+                </div>
+                <div className="flex items-center gap-2 text-green-400">
+                  <Lock className="h-3 w-3" />
+                  <span>Self-custody possible</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Best Practices */}
+          <div className="space-y-2">
+            <h4 className="font-bold text-sm flex items-center gap-2">
+              <Info className="h-4 w-4 text-blue-500" />
+              Best Practices
+            </h4>
+            <div className="space-y-2 text-xs">
+              <div className="flex items-start gap-2 p-2 rounded bg-gray-800/50">
+                <span className="text-blue-400 font-bold">1.</span>
+                <div>
+                  <span className="font-medium text-gray-200">Use Cashu for receiving tips</span>
+                  <p className="text-gray-500 mt-0.5">Built-in Cashu wallet is the most private way to receive zaps</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-2 p-2 rounded bg-gray-800/50">
+                <span className="text-blue-400 font-bold">2.</span>
+                <div>
+                  <span className="font-medium text-gray-200">Use a separate wallet for SkateSpots</span>
+                  <p className="text-gray-500 mt-0.5">Don't use your main savings wallet - keep app funds separate</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-2 p-2 rounded bg-gray-800/50">
+                <span className="text-blue-400 font-bold">3.</span>
+                <div>
+                  <span className="font-medium text-gray-200">Consider using VPN or Tor</span>
+                  <p className="text-gray-500 mt-0.5">Hides your IP address when making transactions</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-2 p-2 rounded bg-gray-800/50">
+                <span className="text-blue-400 font-bold">4.</span>
+                <div>
+                  <span className="font-medium text-gray-200">Avoid identity-linked Lightning addresses</span>
+                  <p className="text-gray-500 mt-0.5">Use pseudonymous addresses not tied to your real name</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Quick Tip */}
+          <Alert className="border-green-500/30 bg-green-500/5">
+            <Nut className="h-4 w-4 text-orange-500" />
+            <AlertDescription className="text-xs">
+              <span className="font-bold text-green-400">Pro tip:</span> Receive payments to your Cashu wallet first, 
+              then periodically move larger amounts to your personal wallet using a VPN for the transfer.
+            </AlertDescription>
+          </Alert>
+        </CardContent>
+      )}
+    </Card>
+  );
+}
+
+// Warning shown when adding Lightning address
+export function LightningAddressPrivacyWarning({ 
+  onUseCashu, 
+  onContinue 
+}: { 
+  onUseCashu?: () => void;
+  onContinue: () => void;
+}) {
+  return (
+    <div className="p-4 rounded-lg bg-amber-500/10 border border-amber-500/30 space-y-3">
+      <div className="flex items-start gap-3">
+        <AlertTriangle className="h-5 w-5 text-amber-500 flex-shrink-0 mt-0.5" />
+        <div>
+          <h4 className="font-bold text-amber-400 text-sm">Privacy Note</h4>
+          <p className="text-xs text-gray-300 mt-1">
+            Lightning addresses can potentially link your SkateSpots activity to your real identity.
+          </p>
+        </div>
+      </div>
+      
+      <div className="space-y-2 text-xs text-gray-400">
+        <p className="font-medium">For better privacy:</p>
+        <ul className="space-y-1 ml-4">
+          <li className="flex items-center gap-2">
+            <span className="text-amber-400">•</span>
+            Use a dedicated wallet for this app
+          </li>
+          <li className="flex items-center gap-2">
+            <span className="text-amber-400">•</span>
+            Consider using Cashu wallet instead
+          </li>
+          <li className="flex items-center gap-2">
+            <span className="text-amber-400">•</span>
+            Use VPN/Tor for transactions
+          </li>
+        </ul>
+      </div>
+
+      <div className="flex gap-2 pt-1">
+        {onUseCashu && (
+          <Button 
+            variant="outline" 
+            size="sm" 
+            onClick={onUseCashu}
+            className="flex-1 border-green-500/50 text-green-400 hover:bg-green-500/10"
+          >
+            <Nut className="h-4 w-4 mr-1" />
+            Use Cashu Instead
+          </Button>
+        )}
+        <Button 
+          variant="outline" 
+          size="sm" 
+          onClick={onContinue}
+          className="flex-1"
+        >
+          I Understand
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/src/components/wallet/MintPrivacyManager.tsx b/src/src/components/wallet/MintPrivacyManager.tsx
new file mode 100644
index 0000000..9955396
--- /dev/null
+++ b/src/src/components/wallet/MintPrivacyManager.tsx
@@ -0,0 +1,486 @@
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Switch } from '@/components/ui/switch';
+import { Progress } from '@/components/ui/progress';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import {
+  Shield,
+  Plus,
+  Trash2,
+  AlertTriangle,
+  Info,
+  ExternalLink,
+  ChevronDown,
+  ChevronUp,
+  Star,
+  Globe,
+  Lock,
+  Eye,
+  EyeOff,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useToast } from '@/hooks/useToast';
+
+interface Mint {
+  url: string;
+  name?: string;
+  info?: unknown;
+}
+
+interface MintPrivacyManagerProps {
+  mints: Mint[];
+  balances: { [mintUrl: string]: number };
+  activeMintUrl: string | null;
+  onSetActiveMint: (url: string) => void;
+  onAddMint: (url: string) => Promise<void>;
+  onRemoveMint: (mint: Mint) => void;
+  totalBalance: number;
+  className?: string;
+}
+
+// Recommended mints (no stablecoin mints)
+const RECOMMENDED_MINTS = [
+  {
+    url: 'https://mint.minibits.cash/Bitcoin',
+    name: 'Minibits',
+    description: 'Popular mobile-friendly mint',
+  },
+  {
+    url: 'https://mint.coinos.io',
+    name: 'Coinos',
+    description: 'Web-based mint from Canada',
+  },
+  {
+    url: 'https://legend.lnbits.com/cashu/api/v1/AptDNABNBXv8gpuywhx6NV',
+    name: 'LNbits Legend',
+    description: 'Community mint on LNbits',
+  },
+];
+
+export function MintPrivacyManager({
+  mints,
+  balances,
+  activeMintUrl,
+  onSetActiveMint,
+  onAddMint,
+  onRemoveMint,
+  totalBalance,
+  className,
+}: MintPrivacyManagerProps) {
+  const [showPrivacyTips, setShowPrivacyTips] = useState(false);
+  const [showAddMint, setShowAddMint] = useState(false);
+  const [mintUrl, setMintUrl] = useState('');
+  const [isAddingMint, setIsAddingMint] = useState(false);
+  const [mintToRemove, setMintToRemove] = useState<Mint | null>(null);
+  const [autoDistribute, setAutoDistribute] = useState(false);
+  const { toast } = useToast();
+
+  // Calculate distribution across mints
+  const mintDistribution = mints.map(mint => ({
+    mint,
+    balance: balances[mint.url] || 0,
+    percentage: totalBalance > 0 ? ((balances[mint.url] || 0) / totalBalance) * 100 : 0,
+  }));
+
+  // Privacy score based on distribution
+  const getPrivacyScore = () => {
+    if (mints.length === 0) return { score: 0, label: 'No Mints', color: 'text-gray-500' };
+    if (mints.length === 1) return { score: 30, label: 'Single Mint', color: 'text-red-400' };
+    
+    // Check if funds are well distributed
+    const maxPercentage = Math.max(...mintDistribution.map(m => m.percentage));
+    if (maxPercentage > 80) return { score: 50, label: 'Concentrated', color: 'text-amber-400' };
+    if (maxPercentage > 60) return { score: 70, label: 'Moderate', color: 'text-yellow-400' };
+    return { score: 90, label: 'Well Distributed', color: 'text-green-400' };
+  };
+
+  const privacyScore = getPrivacyScore();
+
+  const handleAddMint = async () => {
+    if (!mintUrl.trim()) return;
+    
+    // Basic validation
+    if (!mintUrl.startsWith('https://')) {
+      toast({ variant: 'destructive', title: 'Invalid URL', description: 'Mint URL must start with https://' });
+      return;
+    }
+
+    setIsAddingMint(true);
+    try {
+      await onAddMint(mintUrl.trim());
+      setMintUrl('');
+      setShowAddMint(false);
+      toast({ title: 'Mint Added', description: 'New mint added successfully' });
+    } catch (err) {
+      toast({ 
+        variant: 'destructive', 
+        title: 'Failed to add mint', 
+        description: err instanceof Error ? err.message : 'Unknown error' 
+      });
+    } finally {
+      setIsAddingMint(false);
+    }
+  };
+
+  const handleConfirmRemove = () => {
+    if (mintToRemove) {
+      onRemoveMint(mintToRemove);
+      setMintToRemove(null);
+    }
+  };
+
+  const getCleanMintLabel = (mint: Mint) => {
+    if (mint.name) return mint.name;
+    try {
+      const url = new URL(mint.url);
+      return url.hostname;
+    } catch {
+      return mint.url;
+    }
+  };
+
+  return (
+    <>
+      <Card className={cn("border-purple-500/30", className)}>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="flex items-center gap-2 text-base">
+              <Shield className="h-5 w-5 text-purple-500" />
+              Mint Privacy
+            </CardTitle>
+            <Badge 
+              variant="outline" 
+              className={cn("text-xs", privacyScore.color)}
+            >
+              {privacyScore.label}
+            </Badge>
+          </div>
+          <CardDescription className="text-xs">
+            Using multiple mints improves privacy by preventing any single mint from seeing all your transactions
+          </CardDescription>
+        </CardHeader>
+        
+        <CardContent className="space-y-4">
+          {/* Distribution Visualization */}
+          {mints.length > 0 && totalBalance > 0 && (
+            <div className="space-y-2">
+              <Label className="text-xs text-muted-foreground">Fund Distribution</Label>
+              <div className="h-3 rounded-full bg-gray-800 overflow-hidden flex">
+                {mintDistribution.map((item, index) => (
+                  <div
+                    key={item.mint.url}
+                    className={cn(
+                      "h-full transition-all",
+                      index === 0 && "bg-purple-500",
+                      index === 1 && "bg-blue-500",
+                      index === 2 && "bg-green-500",
+                      index === 3 && "bg-amber-500",
+                      index >= 4 && "bg-gray-500"
+                    )}
+                    style={{ width: `${item.percentage}%` }}
+                    title={`${getCleanMintLabel(item.mint)}: ${item.percentage.toFixed(1)}%`}
+                  />
+                ))}
+              </div>
+              <div className="flex flex-wrap gap-2 text-xs">
+                {mintDistribution.map((item, index) => (
+                  <div key={item.mint.url} className="flex items-center gap-1">
+                    <div className={cn(
+                      "w-2 h-2 rounded-full",
+                      index === 0 && "bg-purple-500",
+                      index === 1 && "bg-blue-500",
+                      index === 2 && "bg-green-500",
+                      index === 3 && "bg-amber-500",
+                      index >= 4 && "bg-gray-500"
+                    )} />
+                    <span className="text-gray-400">{getCleanMintLabel(item.mint)}</span>
+                    <span className="text-gray-500">({item.percentage.toFixed(0)}%)</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Privacy Warning */}
+          {mints.length === 1 && (
+            <Alert className="border-amber-500/30 bg-amber-500/5">
+              <AlertTriangle className="h-4 w-4 text-amber-500" />
+              <AlertDescription className="text-xs">
+                Using a single mint means that mint can see all your transaction timing and amounts.
+                Consider adding more mints for better privacy.
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {/* Mint List */}
+          <div className="space-y-2">
+            <Label className="text-xs font-medium">Your Mints ({mints.length})</Label>
+            <div className="space-y-2 max-h-48 overflow-y-auto">
+              {mints.map((mint) => (
+                <div
+                  key={mint.url}
+                  className={cn(
+                    "flex items-center justify-between p-3 rounded-lg border transition-colors",
+                    activeMintUrl === mint.url
+                      ? "bg-purple-500/10 border-purple-500/30"
+                      : "bg-muted/50 border-muted"
+                  )}
+                >
+                  <div 
+                    className="flex-1 min-w-0 cursor-pointer"
+                    onClick={() => onSetActiveMint(mint.url)}
+                  >
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium text-sm truncate">
+                        {getCleanMintLabel(mint)}
+                      </span>
+                      {activeMintUrl === mint.url && (
+                        <Badge variant="secondary" className="text-[10px]">
+                          <Star className="h-2.5 w-2.5 mr-0.5" />
+                          Default
+                        </Badge>
+                      )}
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      {(balances[mint.url] || 0).toLocaleString()} sats
+                    </div>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setMintToRemove(mint)}
+                    className="text-destructive hover:text-destructive h-8 w-8 p-0"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Add Mint */}
+          <Button
+            variant="outline"
+            className="w-full gap-2"
+            onClick={() => setShowAddMint(true)}
+          >
+            <Plus className="h-4 w-4" />
+            Add Mint
+          </Button>
+
+          {/* Auto Distribution Toggle */}
+          <div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
+            <div className="space-y-0.5">
+              <Label className="text-sm font-medium">Auto-distribute funds</Label>
+              <p className="text-xs text-muted-foreground">
+                Spread received funds across multiple mints
+              </p>
+            </div>
+            <Switch
+              checked={autoDistribute}
+              onCheckedChange={setAutoDistribute}
+            />
+          </div>
+          {autoDistribute && (
+            <p className="text-xs text-amber-500 italic">
+              Coming soon - this feature is planned for a future update
+            </p>
+          )}
+
+          {/* Privacy Tips Toggle */}
+          <Button
+            variant="ghost"
+            className="w-full justify-between text-sm"
+            onClick={() => setShowPrivacyTips(!showPrivacyTips)}
+          >
+            <span className="flex items-center gap-2">
+              <Info className="h-4 w-4 text-blue-500" />
+              Privacy Tips
+            </span>
+            {showPrivacyTips ? (
+              <ChevronUp className="h-4 w-4" />
+            ) : (
+              <ChevronDown className="h-4 w-4" />
+            )}
+          </Button>
+
+          {showPrivacyTips && (
+            <div className="space-y-2 text-xs p-3 rounded-lg bg-blue-500/5 border border-blue-500/20">
+              <div className="flex items-start gap-2">
+                <span className="text-blue-400 font-bold">•</span>
+                <span className="text-gray-300">Use 2-3 different mints minimum for better privacy</span>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className="text-blue-400 font-bold">•</span>
+                <span className="text-gray-300">Don't keep all funds in one mint - spread them out</span>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className="text-blue-400 font-bold">•</span>
+                <span className="text-gray-300">Consider mint jurisdiction (different countries = different legal access)</span>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className="text-blue-400 font-bold">•</span>
+                <span className="text-gray-300">Mints see timing of transactions but NOT who you pay (blind signatures)</span>
+              </div>
+              <div className="mt-2 pt-2 border-t border-blue-500/20">
+                <p className="text-gray-500 italic">
+                  Future features: Mint rotation and privacy scoring - stay tuned!
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* External Link */}
+          <a
+            href="https://cashumints.space/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground"
+          >
+            <ExternalLink className="h-3 w-3" />
+            Find more mints at cashumints.space
+          </a>
+        </CardContent>
+      </Card>
+
+      {/* Add Mint Dialog */}
+      <Dialog open={showAddMint} onOpenChange={setShowAddMint}>
+        <DialogContent className="w-[calc(100%-1rem)] sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Add Mint</DialogTitle>
+            <DialogDescription>
+              Add a new Cashu mint to your wallet
+            </DialogDescription>
+          </DialogHeader>
+          
+          <div className="space-y-4">
+            {/* Manual Entry */}
+            <div className="space-y-2">
+              <Label className="text-sm">Mint URL</Label>
+              <div className="flex gap-2">
+                <Input
+                  placeholder="https://mint.example.com"
+                  value={mintUrl}
+                  onChange={(e) => setMintUrl(e.target.value)}
+                  className="font-mono text-xs"
+                />
+                <Button
+                  onClick={handleAddMint}
+                  disabled={!mintUrl || isAddingMint}
+                >
+                  {isAddingMint ? 'Adding...' : 'Add'}
+                </Button>
+              </div>
+            </div>
+
+            <div className="relative">
+              <div className="absolute inset-0 flex items-center">
+                <span className="w-full border-t" />
+              </div>
+              <div className="relative flex justify-center text-xs uppercase">
+                <span className="bg-background px-2 text-muted-foreground">Or choose from list</span>
+              </div>
+            </div>
+
+            {/* Recommended Mints */}
+            <div className="space-y-2">
+              <Label className="text-xs text-muted-foreground">Recommended Mints</Label>
+              {RECOMMENDED_MINTS.map((mint) => {
+                const isAdded = mints.some(m => m.url.toLowerCase() === mint.url.toLowerCase());
+                return (
+                  <div
+                    key={mint.url}
+                    className={cn(
+                      "flex items-center justify-between p-3 rounded-lg border",
+                      isAdded ? "bg-green-500/5 border-green-500/20" : "bg-muted/50"
+                    )}
+                  >
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <Globe className="h-4 w-4 text-muted-foreground" />
+                        <span className="font-medium text-sm">{mint.name}</span>
+                      </div>
+                      <p className="text-xs text-muted-foreground ml-6">{mint.description}</p>
+                    </div>
+                    {isAdded ? (
+                      <Badge variant="secondary" className="text-xs">Added</Badge>
+                    ) : (
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={async () => {
+                          setIsAddingMint(true);
+                          try {
+                            await onAddMint(mint.url);
+                            toast({ title: 'Mint Added', description: `${mint.name} added successfully` });
+                          } catch (err) {
+                            toast({ 
+                              variant: 'destructive', 
+                              title: 'Failed', 
+                              description: err instanceof Error ? err.message : 'Unknown error' 
+                            });
+                          } finally {
+                            setIsAddingMint(false);
+                          }
+                        }}
+                        disabled={isAddingMint}
+                      >
+                        Add
+                      </Button>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Trust Warning */}
+            <Alert className="border-amber-500/30 bg-amber-500/5">
+              <AlertTriangle className="h-4 w-4 text-amber-500" />
+              <AlertDescription className="text-xs">
+                <span className="font-bold text-amber-400">Trust Warning:</span> Mints are custodial - they hold your funds.
+                Only use mints you trust. If a mint disappears, your funds may be lost.
+                Spreading funds across multiple mints reduces risk.
+              </AlertDescription>
+            </Alert>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Remove Mint Confirmation */}
+      <Dialog open={!!mintToRemove} onOpenChange={(open) => !open && setMintToRemove(null)}>
+        <DialogContent className="w-[calc(100%-1rem)] sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Remove Mint?</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to remove {mintToRemove && getCleanMintLabel(mintToRemove)}?
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            {mintToRemove && (balances[mintToRemove.url] || 0) > 0 && (
+              <Alert className="border-red-500/30 bg-red-500/5">
+                <AlertTriangle className="h-4 w-4 text-red-500" />
+                <AlertDescription className="text-xs">
+                  <span className="font-bold text-red-400">Warning:</span> This mint has {(balances[mintToRemove.url] || 0).toLocaleString()} sats.
+                  Withdraw your funds before removing!
+                </AlertDescription>
+              </Alert>
+            )}
+            <div className="flex gap-2 justify-end">
+              <Button variant="outline" onClick={() => setMintToRemove(null)}>
+                Cancel
+              </Button>
+              <Button variant="destructive" onClick={handleConfirmRemove}>
+                Remove Mint
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/src/src/components/wallet/QRScannerModal.tsx b/src/src/components/wallet/QRScannerModal.tsx
new file mode 100644
index 0000000..c92b9e9
--- /dev/null
+++ b/src/src/components/wallet/QRScannerModal.tsx
@@ -0,0 +1,145 @@
+import { useEffect, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useQRCodeScanner, classifyQRCode, type QRScanResult } from '@/hooks/useQRCodeScanner';
+import { useToast } from '@/hooks/useToast';
+import { ScanLine, Clipboard, X } from 'lucide-react';
+
+interface QRScannerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onResult: (result: QRScanResult) => void;
+}
+
+export function QRScannerModal({
+  isOpen,
+  onClose,
+  onResult,
+}: QRScannerModalProps) {
+  const { toast } = useToast();
+  const { isScanning, error, startScanning, stopScanning } = useQRCodeScanner();
+
+  // Handle scan result
+  const handleScanResult = useCallback((result: QRScanResult) => {
+    onResult(result);
+    stopScanning();
+    onClose();
+  }, [onResult, stopScanning, onClose]);
+
+  // Handle paste from clipboard
+  const handlePasteFromClipboard = async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      if (!text || !text.trim()) {
+        toast({ 
+          variant: 'destructive', 
+          title: 'Clipboard empty', 
+          description: 'No text found in clipboard' 
+        });
+        return;
+      }
+
+      const result = classifyQRCode(text.trim());
+      handleScanResult(result);
+    } catch (err) {
+      console.error('Error pasting from clipboard:', err);
+      toast({ 
+        variant: 'destructive', 
+        title: 'Paste failed', 
+        description: 'Could not read from clipboard' 
+      });
+    }
+  };
+
+  // Start/stop scanning based on isOpen
+  useEffect(() => {
+    if (isOpen) {
+      // Small delay to ensure the DOM element is ready
+      const timer = setTimeout(() => {
+        startScanning(handleScanResult);
+      }, 100);
+      return () => clearTimeout(timer);
+    } else {
+      stopScanning();
+    }
+  }, [isOpen, startScanning, stopScanning, handleScanResult]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      stopScanning();
+    };
+  }, [stopScanning]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => {
+      if (!open) {
+        stopScanning();
+        onClose();
+      }
+    }}>
+      <DialogContent className="w-[calc(100%-1rem)] max-w-[min(90vw,500px)] p-3 sm:p-6">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
+            <ScanLine className="h-5 w-5" />
+            Scan QR Code
+          </DialogTitle>
+          <DialogDescription className="text-xs sm:text-sm">
+            Position the QR code within the camera view to scan
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="relative w-full" style={{ aspectRatio: '1 / 1', maxHeight: '50vh' }}>
+          {/* Scanner requires element with id="qr-reader" */}
+          <div
+            id="qr-reader"
+            className="w-full h-full rounded-xl overflow-hidden bg-muted"
+          />
+
+          {/* Error overlay */}
+          {error && (
+            <div className="absolute inset-x-2 sm:inset-x-4 top-2 sm:top-4 p-2 sm:p-3 bg-destructive text-destructive-foreground rounded-lg text-center z-50 shadow-lg text-xs sm:text-sm">
+              {error}
+            </div>
+          )}
+
+          {/* Scanning indicator */}
+          {isScanning && !error && (
+            <div className="absolute inset-0 pointer-events-none flex items-center justify-center">
+              <div className="w-32 h-32 sm:w-48 sm:h-48 border-2 border-primary rounded-lg opacity-50" />
+            </div>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex flex-col sm:flex-row gap-2 sm:gap-3 justify-center mt-2 sm:mt-4">
+          <Button
+            onClick={handlePasteFromClipboard}
+            variant="outline"
+            className="gap-2 text-sm"
+            size="sm"
+          >
+            <Clipboard className="h-4 w-4" />
+            Paste from Clipboard
+          </Button>
+          <Button
+            onClick={() => {
+              stopScanning();
+              onClose();
+            }}
+            variant="ghost"
+            size="sm"
+            className="text-sm"
+          >
+            <X className="h-4 w-4 mr-2" />
+            Cancel
+          </Button>
+        </div>
+
+        <p className="text-[10px] sm:text-xs text-muted-foreground text-center mt-1 sm:mt-2">
+          Scan a Cashu token, Lightning invoice, or Lightning address
+        </p>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/src/components/wallet/WalletComparisonGuide.tsx b/src/src/components/wallet/WalletComparisonGuide.tsx
new file mode 100644
index 0000000..fd89fb9
--- /dev/null
+++ b/src/src/components/wallet/WalletComparisonGuide.tsx
@@ -0,0 +1,188 @@
+import { useState } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import {
+  ChevronDown,
+  ChevronUp,
+  Nut,
+  Zap,
+  Lightbulb,
+  Sparkles,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface WalletComparisonGuideProps {
+  className?: string;
+  defaultExpanded?: boolean;
+}
+
+export function WalletComparisonGuide({ className, defaultExpanded = false }: WalletComparisonGuideProps) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+  return (
+    <Card className={cn("border-gray-700 bg-gradient-to-br from-gray-900 to-gray-800", className)}>
+      <CardContent className="p-4">
+        {/* Header - Always visible */}
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="w-full flex items-center justify-between text-left"
+        >
+          <div className="flex items-center gap-2">
+            <span className="text-xl">🛹</span>
+            <span className="font-bold text-sm">
+              {isExpanded ? 'Wallet Guide (Skater Edition)' : 'Quick Guide'}
+            </span>
+          </div>
+          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+            {isExpanded ? (
+              <ChevronUp className="h-4 w-4" />
+            ) : (
+              <ChevronDown className="h-4 w-4" />
+            )}
+          </Button>
+        </button>
+
+        {/* Collapsed Summary */}
+        {!isExpanded && (
+          <div className="mt-3 space-y-2 text-sm">
+            <div className="flex items-center gap-2">
+              <Nut className="h-4 w-4 text-orange-500" />
+              <span className="text-gray-300">
+                <span className="font-bold text-orange-400">Cashu</span> = Privacy + Convenience 
+                <span className="text-gray-500"> (mint holds funds)</span>
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Zap className="h-4 w-4 text-yellow-500" />
+              <span className="text-gray-300">
+                <span className="font-bold text-yellow-400">Lightning</span> = Control + Security 
+                <span className="text-gray-500"> (you hold keys)</span>
+              </span>
+            </div>
+            <div className="flex items-start gap-2 mt-3 p-2 rounded-lg bg-green-500/10 border border-green-500/20">
+              <Lightbulb className="h-4 w-4 text-green-500 flex-shrink-0 mt-0.5" />
+              <span className="text-xs text-green-400">
+                Use both: Cashu for tips, Lightning for savings
+              </span>
+            </div>
+          </div>
+        )}
+
+        {/* Expanded Full Guide */}
+        {isExpanded && (
+          <div className="mt-4 space-y-4">
+            {/* Cashu Section */}
+            <div className="p-4 rounded-lg bg-orange-500/10 border border-orange-500/20">
+              <div className="flex items-center gap-2 mb-2">
+                <Nut className="h-5 w-5 text-orange-500" />
+                <h3 className="font-bold text-orange-400">CASHU WALLET</h3>
+              </div>
+              <p className="text-sm text-gray-400 italic mb-3">
+                Like cash in your pocket at the skatepark
+              </p>
+              <ul className="space-y-1.5 text-sm text-gray-300">
+                <li className="flex items-start gap-2">
+                  <span className="text-orange-400">•</span>
+                  <span>Quick to pull out for a tip</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-orange-400">•</span>
+                  <span>Don't carry your life savings here</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-orange-400">•</span>
+                  <span>If the mint disappears, funds could be lost</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-orange-400">•</span>
+                  <span>Nobody knows how much you have (privacy!)</span>
+                </li>
+              </ul>
+              <div className="mt-3 pt-3 border-t border-orange-500/20">
+                <p className="text-xs text-orange-300">
+                  <span className="font-bold">Perfect for:</span> Session snacks, zapping clips, small tips
+                </p>
+              </div>
+            </div>
+
+            {/* Lightning Section */}
+            <div className="p-4 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
+              <div className="flex items-center gap-2 mb-2">
+                <Zap className="h-5 w-5 text-yellow-500" />
+                <h3 className="font-bold text-yellow-400">LIGHTNING WALLET</h3>
+              </div>
+              <p className="text-sm text-gray-400 italic mb-3">
+                Like your bank account - you're in control
+              </p>
+              <ul className="space-y-1.5 text-sm text-gray-300">
+                <li className="flex items-start gap-2">
+                  <span className="text-yellow-400">•</span>
+                  <span>Secure, you control the keys</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-yellow-400">•</span>
+                  <span>Takes a moment to set up</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-yellow-400">•</span>
+                  <span>Full transaction history</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-yellow-400">•</span>
+                  <span>Better for bigger amounts</span>
+                </li>
+              </ul>
+              <div className="mt-3 pt-3 border-t border-yellow-500/20">
+                <p className="text-xs text-yellow-300">
+                  <span className="font-bold">Perfect for:</span> Gear purchases, savings, big zaps
+                </p>
+              </div>
+            </div>
+
+            {/* Pro Tips Section */}
+            <div className="p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <div className="flex items-center gap-2 mb-3">
+                <Sparkles className="h-5 w-5 text-green-500" />
+                <h3 className="font-bold text-green-400">PRO TIPS</h3>
+              </div>
+              <ul className="space-y-2 text-sm text-gray-300">
+                <li className="flex items-start gap-2">
+                  <span className="text-green-400 font-bold">1.</span>
+                  <span>
+                    <span className="font-medium text-white">Use both wallets</span> - Keep session money in Cashu, savings in Lightning
+                  </span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-green-400 font-bold">2.</span>
+                  <span>
+                    <span className="font-medium text-white">Try different wallets</span> - Experiment to find what works for you. Each has different features and trade-offs
+                  </span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-green-400 font-bold">3.</span>
+                  <span>
+                    <span className="font-medium text-white">Better privacy</span> - Using multiple wallets means no single app sees all your activity
+                  </span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-green-400 font-bold">4.</span>
+                  <span>
+                    <span className="font-medium text-white">Gain experience</span> - The more tools you know, the more options you have. Start small, learn as you go
+                  </span>
+                </li>
+              </ul>
+            </div>
+
+            {/* Bottom Summary */}
+            <div className="text-center p-3 rounded-lg bg-gray-800/50 border border-gray-700">
+              <p className="text-xs text-gray-400">
+                🎯 <span className="font-bold text-white">TL;DR:</span> There's no "best" wallet - it depends on your needs. 
+                Try both, use what feels right, and don't keep all your sats in one place!
+              </p>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/src/contexts/AppContext.ts b/src/src/contexts/AppContext.ts
new file mode 100644
index 0000000..23bf70e
--- /dev/null
+++ b/src/src/contexts/AppContext.ts
@@ -0,0 +1,32 @@
+import { createContext } from "react";
+
+export type Theme = "dark" | "light" | "system";
+
+export interface RelayMetadata {
+  /** List of relays with read/write permissions */
+  relays: { url: string; read: boolean; write: boolean }[];
+  /** Unix timestamp of when the relay list was last updated */
+  updatedAt: number;
+}
+
+export interface AppConfig {
+  /** Current theme */
+  theme: Theme;
+  /** NIP-65 relay list metadata */
+  relayMetadata: RelayMetadata;
+  /** Whether to use the community relay (goskatespots.nostr1.com) for skate content.
+   * When true (default), community relay is always included for reads/writes.
+   * When false, only user's configured relays are used.
+   * Note: Logged-out users always use community relay regardless of this setting.
+   */
+  useSkateRelay: boolean;
+}
+
+export interface AppContextType {
+  /** Current application configuration */
+  config: AppConfig;
+  /** Update configuration using a callback that receives current config and returns new config */
+  updateConfig: (updater: (currentConfig: Partial<AppConfig>) => Partial<AppConfig>) => void;
+}
+
+export const AppContext = createContext<AppContextType | undefined>(undefined);
diff --git a/src/src/contexts/LanguageContext.tsx b/src/src/contexts/LanguageContext.tsx
new file mode 100644
index 0000000..f6a3bb6
--- /dev/null
+++ b/src/src/contexts/LanguageContext.tsx
@@ -0,0 +1,143 @@
+import { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+
+// Supported languages
+export type Language = 'en' | 'es';
+
+// Translation key type - allows nested keys like 'nav.home'
+type TranslationKey = string;
+
+// Translation values can be strings or nested objects
+type TranslationValue = string | { [key: string]: TranslationValue };
+
+// Translations structure
+export type Translations = {
+  [key: string]: TranslationValue;
+};
+
+interface LanguageContextType {
+  /** Current language */
+  language: Language;
+  /** Set the current language */
+  setLanguage: (lang: Language) => void;
+  /** Translate a key - supports dot notation for nested keys */
+  t: (key: TranslationKey, params?: Record<string, string | number>) => string;
+  /** Check if current language is RTL (for future Arabic support, etc.) */
+  isRTL: boolean;
+}
+
+const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
+
+// Import translations
+import en from '@/i18n/en';
+import es from '@/i18n/es';
+
+const translations: Record<Language, Translations> = { en, es };
+
+/**
+ * Get nested value from object using dot notation
+ * e.g., getNestedValue({ nav: { home: 'Home' } }, 'nav.home') => 'Home'
+ */
+function getNestedValue(obj: Translations, path: string): string | undefined {
+  const keys = path.split('.');
+  let current: TranslationValue = obj;
+  
+  for (const key of keys) {
+    if (current && typeof current === 'object' && key in current) {
+      current = current[key];
+    } else {
+      return undefined;
+    }
+  }
+  
+  return typeof current === 'string' ? current : undefined;
+}
+
+/**
+ * Replace parameters in translation string
+ * e.g., interpolate('Hello {{name}}!', { name: 'World' }) => 'Hello World!'
+ */
+function interpolate(str: string, params?: Record<string, string | number>): string {
+  if (!params) return str;
+  
+  return str.replace(/\{\{(\w+)\}\}/g, (_, key) => {
+    return params[key]?.toString() ?? `{{${key}}}`;
+  });
+}
+
+interface LanguageProviderProps {
+  children: ReactNode;
+}
+
+export function LanguageProvider({ children }: LanguageProviderProps) {
+  const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('app-language', 'en');
+  const [language, setLanguageState] = useState<Language>(storedLanguage);
+
+  // Sync with localStorage
+  useEffect(() => {
+    setLanguageState(storedLanguage);
+  }, [storedLanguage]);
+
+  const setLanguage = useCallback((lang: Language) => {
+    setLanguageState(lang);
+    setStoredLanguage(lang);
+    // Update HTML lang attribute for accessibility
+    document.documentElement.lang = lang;
+  }, [setStoredLanguage]);
+
+  // Set initial HTML lang attribute
+  useEffect(() => {
+    document.documentElement.lang = language;
+  }, [language]);
+
+  const t = useCallback((key: TranslationKey, params?: Record<string, string | number>): string => {
+    // Try to get translation in current language
+    const translation = getNestedValue(translations[language], key);
+    
+    if (translation) {
+      return interpolate(translation, params);
+    }
+    
+    // Fallback to English
+    if (language !== 'en') {
+      const fallback = getNestedValue(translations.en, key);
+      if (fallback) {
+        return interpolate(fallback, params);
+      }
+    }
+    
+    // Return key if no translation found (helps identify missing translations)
+    console.warn(`Missing translation for key: ${key}`);
+    return key;
+  }, [language]);
+
+  // Currently no RTL languages supported, but ready for future
+  const isRTL = false;
+
+  return (
+    <LanguageContext.Provider value={{ language, setLanguage, t, isRTL }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+}
+
+/**
+ * Hook to access translation functions and language state
+ */
+export function useTranslation() {
+  const context = useContext(LanguageContext);
+  
+  if (context === undefined) {
+    throw new Error('useTranslation must be used within a LanguageProvider');
+  }
+  
+  return context;
+}
+
+/**
+ * Hook to get just the translation function (convenience)
+ */
+export function useT() {
+  const { t } = useTranslation();
+  return t;
+}
diff --git a/src/src/contexts/NWCContext.tsx b/src/src/contexts/NWCContext.tsx
new file mode 100644
index 0000000..43e866b
--- /dev/null
+++ b/src/src/contexts/NWCContext.tsx
@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { useNWCInternal as useNWCHook } from '@/hooks/useNWC';
+import { NWCContext } from '@/hooks/useNWCContext';
+
+export function NWCProvider({ children }: { children: ReactNode }) {
+  const nwc = useNWCHook();
+  return <NWCContext.Provider value={nwc}>{children}</NWCContext.Provider>;
+}
\ No newline at end of file
diff --git a/src/src/hooks/&1 b/src/src/hooks/&1
new file mode 100644
index 0000000..e69de29
diff --git a/src/src/hooks/useAppContext.ts b/src/src/hooks/useAppContext.ts
new file mode 100644
index 0000000..7554806
--- /dev/null
+++ b/src/src/hooks/useAppContext.ts
@@ -0,0 +1,14 @@
+import { useContext } from "react";
+import { AppContext, type AppContextType } from "@/contexts/AppContext";
+
+/**
+ * Hook to access and update application configuration
+ * @returns Application context with config and update methods
+ */
+export function useAppContext(): AppContextType {
+  const context = useContext(AppContext);
+  if (context === undefined) {
+    throw new Error('useAppContext must be used within an AppProvider');
+  }
+  return context;
+}
\ No newline at end of file
diff --git a/src/src/hooks/useAuthor.ts b/src/src/hooks/useAuthor.ts
new file mode 100644
index 0000000..9a2ab5d
--- /dev/null
+++ b/src/src/hooks/useAuthor.ts
@@ -0,0 +1,64 @@
+import { type NostrEvent, type NostrMetadata, NSchema as n } from '@nostrify/nostrify';
+import { useNostr } from '@nostrify/react';
+import { useQuery } from '@tanstack/react-query';
+
+// Fallback relays for profile aggregation
+const FALLBACK_RELAYS = [
+  'wss://purplepag.es',
+  'wss://relay.nostr.band',
+];
+
+export function useAuthor(pubkey: string | undefined) {
+  const { nostr } = useNostr();
+
+  return useQuery<{ event?: NostrEvent; metadata?: NostrMetadata }>({
+    queryKey: ['author', pubkey ?? ''],
+    queryFn: async ({ signal }) => {
+      if (!pubkey) {
+        return {};
+      }
+
+      const querySignal = AbortSignal.any([signal, AbortSignal.timeout(8000)]);
+
+      try {
+        // Try main relays first
+        let [event] = await nostr.query(
+          [{ kinds: [0], authors: [pubkey], limit: 1 }],
+          { signal: querySignal },
+        );
+
+        // If not found, try fallback profile aggregator relays
+        if (!event) {
+          try {
+            const fallbackGroup = nostr.group(FALLBACK_RELAYS);
+            [event] = await fallbackGroup.query(
+              [{ kinds: [0], authors: [pubkey], limit: 1 }],
+              { signal: AbortSignal.timeout(5000) },
+            );
+          } catch {
+            // Fallback failed, continue with no event
+          }
+        }
+
+        if (!event) {
+          // No profile found - this is okay, user may not have published one yet
+          return {};
+        }
+
+        try {
+          const metadata = n.json().pipe(n.metadata()).parse(event.content);
+          return { metadata, event };
+        } catch {
+          return { event };
+        }
+      } catch (error) {
+        // Network error or timeout - return empty to avoid breaking the UI
+        console.warn('[useAuthor] Failed to fetch profile for', pubkey?.slice(0, 8), error);
+        return {};
+      }
+    },
+    staleTime: 5 * 60 * 1000, // Keep cached data fresh for 5 minutes
+    retry: 2,
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000), // Exponential backoff
+  });
+}
diff --git a/src/src/hooks/useBTCMap.ts b/src/src/hooks/useBTCMap.ts
new file mode 100644
index 0000000..5f23f1e
--- /dev/null
+++ b/src/src/hooks/useBTCMap.ts
@@ -0,0 +1,139 @@
+import { useQuery } from '@tanstack/react-query';
+
+export interface BTCMapMerchant {
+  id: string;
+  name: string;
+  lat: number;
+  lon: number;
+  tags: {
+    name?: string;
+    'payment:lightning'?: string;
+    'payment:onchain'?: string;
+    'payment:lightning_contactless'?: string;
+    amenity?: string;
+    shop?: string;
+    cuisine?: string;
+    opening_hours?: string;
+    website?: string;
+    phone?: string;
+  };
+  osm_json?: {
+    type: string;
+    id: number;
+  };
+}
+
+interface BTCMapResponse {
+  type: string;
+  features: Array<{
+    type: string;
+    geometry: {
+      type: string;
+      coordinates: [number, number]; // [lon, lat]
+    };
+    properties: {
+      id: string;
+      name?: string;
+      'payment:lightning'?: string;
+      'payment:onchain'?: string;
+      [key: string]: string | undefined;
+    };
+  }>;
+}
+
+/**
+ * Fetch Bitcoin-accepting merchants from BTCMap API
+ * Uses bounding box to get merchants in the visible map area
+ */
+export function useBTCMap(bounds?: { 
+  north: number; 
+  south: number; 
+  east: number; 
+  west: number;
+}, enabled: boolean = false) {
+  return useQuery({
+    queryKey: ['btcmap', bounds?.north, bounds?.south, bounds?.east, bounds?.west],
+    queryFn: async ({ signal }): Promise<BTCMapMerchant[]> => {
+      if (!bounds) return [];
+
+      // BTCMap API endpoint - get elements in bounding box
+      // Using their public API
+      const url = `https://api.btcmap.org/v2/elements?updated_since=2020-01-01&bounds=${bounds.south},${bounds.west},${bounds.north},${bounds.east}`;
+      
+      const response = await fetch(url, { 
+        signal,
+        headers: {
+          'Accept': 'application/json',
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error(`BTCMap API error: ${response.status}`);
+      }
+
+      const data = await response.json();
+      
+      // Transform the response to our format
+      const merchants: BTCMapMerchant[] = data
+        .filter((item: { 'osm_json': { lat?: number; lon?: number }; deleted_at?: string }) => 
+          item.osm_json?.lat && item.osm_json?.lon && !item.deleted_at
+        )
+        .map((item: { 
+          id: string; 
+          'osm_json': { 
+            lat: number; 
+            lon: number; 
+            tags?: Record<string, string>;
+            type?: string;
+            id?: number;
+          } 
+        }) => ({
+          id: item.id,
+          name: item.osm_json.tags?.name || 'Bitcoin Merchant',
+          lat: item.osm_json.lat,
+          lon: item.osm_json.lon,
+          tags: item.osm_json.tags || {},
+          osm_json: {
+            type: item.osm_json.type || 'node',
+            id: item.osm_json.id || 0,
+          }
+        }));
+
+      return merchants;
+    },
+    enabled: enabled && !!bounds,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    gcTime: 30 * 60 * 1000, // 30 minutes
+  });
+}
+
+/**
+ * Get a human-readable category for the merchant
+ */
+export function getMerchantCategory(merchant: BTCMapMerchant): string {
+  const { tags } = merchant;
+  
+  if (tags.amenity === 'cafe' || tags.amenity === 'coffee') return '☕ Café';
+  if (tags.amenity === 'restaurant') return '🍽️ Restaurant';
+  if (tags.amenity === 'bar' || tags.amenity === 'pub') return '🍺 Bar';
+  if (tags.amenity === 'fast_food') return '🍔 Fast Food';
+  if (tags.shop === 'convenience') return '🏪 Convenience';
+  if (tags.shop === 'supermarket') return '🛒 Supermarket';
+  if (tags.shop === 'clothes') return '👕 Clothing';
+  if (tags.shop === 'sports') return '⚽ Sports';
+  if (tags.shop === 'electronics') return '📱 Electronics';
+  if (tags.shop) return '🏬 Shop';
+  if (tags.amenity === 'atm') return '🏧 ATM';
+  if (tags.amenity === 'bank') return '🏦 Bank';
+  
+  return '₿ Bitcoin Accepted';
+}
+
+/**
+ * Check if merchant accepts Lightning
+ */
+export function acceptsLightning(merchant: BTCMapMerchant): boolean {
+  const { tags } = merchant;
+  return tags['payment:lightning'] === 'yes' || 
+         tags['payment:lightning_contactless'] === 'yes';
+}
diff --git a/src/src/hooks/useBatchTrustScores.ts b/src/src/hooks/useBatchTrustScores.ts
new file mode 100644
index 0000000..5c2b1f1
--- /dev/null
+++ b/src/src/hooks/useBatchTrustScores.ts
@@ -0,0 +1,123 @@
+import { useQuery } from '@tanstack/react-query';
+import { useNostr } from '@nostrify/react';
+import { useCurrentUser } from './useCurrentUser';
+
+/**
+ * Hook to fetch trust scores for multiple pubkeys in batch.
+ * More efficient than calling useTrustScore multiple times.
+ * 
+ * @param pubkeys - Array of pubkeys to calculate trust scores for
+ * @returns Map of pubkey to trust score (0-100)
+ */
+export function useBatchTrustScores(pubkeys: string[]) {
+  const { nostr } = useNostr();
+  const { user } = useCurrentUser();
+
+  return useQuery({
+    queryKey: ['batch-trust-scores', pubkeys.sort().join(','), user?.pubkey],
+    queryFn: async (c) => {
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(8000)]);
+      const scores = new Map<string, number>();
+
+      try {
+        // Get user's follow list (kind 3)
+        const sourcePubkey = user?.pubkey || '20e7c953439e66f3882ab96fe0faa8ba246d6fb12c03b0cb4e2dc4623b8bcb21';
+        
+        const followListEvents = await nostr.query(
+          [{ kinds: [3], authors: [sourcePubkey], limit: 1 }],
+          { signal }
+        );
+
+        const followList = followListEvents[0];
+        if (!followList) {
+          console.warn('[useBatchTrustScores] No follow list found');
+          // Default all to 0
+          pubkeys.forEach((pk) => scores.set(pk, 0));
+          return scores;
+        }
+
+        // Extract followed pubkeys
+        const following = new Set(
+          followList.tags
+            .filter(([tag]) => tag === 'p')
+            .map(([, pubkey]) => pubkey)
+        );
+
+        // Process each pubkey
+        for (const targetPubkey of pubkeys) {
+          // Self score = 100
+          if (user?.pubkey && targetPubkey === user.pubkey) {
+            scores.set(targetPubkey, 100);
+            continue;
+          }
+
+          // Direct follow = 90
+          if (following.has(targetPubkey)) {
+            scores.set(targetPubkey, 90);
+            continue;
+          }
+
+          // Default to 0 (will check friend-of-friend and NIP-05 later)
+          scores.set(targetPubkey, 0);
+        }
+
+        // Get friend-of-friend relationships (batch query)
+        const uncheckedPubkeys = pubkeys.filter((pk) => scores.get(pk) === 0);
+        
+        if (uncheckedPubkeys.length > 0) {
+          const friendsFollowLists = await nostr.query(
+            [{ kinds: [3], authors: Array.from(following), limit: 100 }],
+            { signal }
+          );
+
+          // Build a set of all friends-of-friends
+          const friendsOfFriends = new Set<string>();
+          for (const friendList of friendsFollowLists) {
+            friendList.tags
+              .filter(([tag]) => tag === 'p')
+              .forEach(([, pubkey]) => friendsOfFriends.add(pubkey));
+          }
+
+          // Check friend-of-friend = 60
+          for (const pubkey of uncheckedPubkeys) {
+            if (friendsOfFriends.has(pubkey)) {
+              scores.set(pubkey, 60);
+            }
+          }
+        }
+
+        // Check NIP-05 verification for remaining 0-score pubkeys
+        const unverifiedPubkeys = pubkeys.filter((pk) => scores.get(pk) === 0);
+        
+        if (unverifiedPubkeys.length > 0) {
+          const profileEvents = await nostr.query(
+            [{ kinds: [0], authors: unverifiedPubkeys }],
+            { signal }
+          );
+
+          for (const profileEvent of profileEvents) {
+            try {
+              const metadata = JSON.parse(profileEvent.content);
+              if (metadata.nip05) {
+                scores.set(profileEvent.pubkey, 30);
+              }
+            } catch (e) {
+              // Ignore JSON parse errors
+            }
+          }
+        }
+
+        return scores;
+      } catch (error) {
+        console.warn('[useBatchTrustScores] Error calculating batch trust scores:', error);
+        // Return default scores of 0
+        pubkeys.forEach((pk) => scores.set(pk, 0));
+        return scores;
+      }
+    },
+    enabled: pubkeys.length > 0,
+    staleTime: 3600000, // Cache for 1 hour
+    gcTime: 86400000, // Keep in cache for 24 hours
+    retry: 1,
+  });
+}
diff --git a/src/src/hooks/useBtcMapPlaces.ts b/src/src/hooks/useBtcMapPlaces.ts
new file mode 100644
index 0000000..7bc38e4
--- /dev/null
+++ b/src/src/hooks/useBtcMapPlaces.ts
@@ -0,0 +1,78 @@
+import { useQuery } from '@tanstack/react-query';
+
+export interface BtcMapPlace {
+  id: number;
+  lat: number;
+  lon: number;
+  icon: string;
+  name: string;
+  address?: string;
+  opening_hours?: string;
+  verified_at?: string;
+  boosted_until?: string;
+  website?: string;
+  phone?: string;
+  description?: string;
+}
+
+interface UseBtcMapPlacesOptions {
+  lat: number;
+  lon: number;
+  radiusKm?: number;
+  enabled?: boolean;
+}
+
+/**
+ * Fetches Bitcoin-accepting places from BTC Map API within a radius
+ */
+export function useBtcMapPlaces({ lat, lon, radiusKm = 25, enabled = true }: UseBtcMapPlacesOptions) {
+  return useQuery({
+    queryKey: ['btcmap-places', lat.toFixed(2), lon.toFixed(2), radiusKm],
+    queryFn: async () => {
+      const fields = 'id,lat,lon,icon,name,address,opening_hours,verified_at,boosted_until,website,phone,description';
+      const url = `https://api.btcmap.org/v4/places/search?lat=${lat}&lon=${lon}&radius_km=${radiusKm}&fields=${fields}`;
+      
+      console.log('[useBtcMapPlaces] Fetching:', url);
+      
+      const response = await fetch(url);
+      
+      if (!response.ok) {
+        throw new Error(`BTC Map API error: ${response.status}`);
+      }
+      
+      const places: BtcMapPlace[] = await response.json();
+      console.log('[useBtcMapPlaces] Found', places.length, 'places');
+      
+      return places;
+    },
+    enabled: enabled && lat !== 0 && lon !== 0,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    gcTime: 30 * 60 * 1000, // 30 minutes cache
+    refetchOnWindowFocus: false,
+  });
+}
+
+/**
+ * Get Material Icons URL for a BTC Map place icon
+ */
+export function getBtcMapIconUrl(icon: string): string {
+  return `https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/${icon}/default/24px.svg`;
+}
+
+/**
+ * Check if a place was recently verified (within last 6 months)
+ */
+export function isRecentlyVerified(verifiedAt?: string): boolean {
+  if (!verifiedAt) return false;
+  const sixMonthsAgo = new Date();
+  sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6);
+  return new Date(verifiedAt) > sixMonthsAgo;
+}
+
+/**
+ * Check if a place is currently boosted
+ */
+export function isBoosted(boostedUntil?: string): boolean {
+  if (!boostedUntil) return false;
+  return new Date(boostedUntil) > new Date();
+}
diff --git a/src/src/hooks/useCoaches.ts b/src/src/hooks/useCoaches.ts
new file mode 100644
index 0000000..2b88071
--- /dev/null
+++ b/src/src/hooks/useCoaches.ts
@@ -0,0 +1,118 @@
+import { useQuery } from '@tanstack/react-query';
+import { SKATE_COACH_KIND, parseSkateCoach, type SkateCoach } from '@/lib/types';
+import { useSkateRelays } from '@/hooks/useSkateRelays';
+
+export function useCoaches(limit = 100) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['coaches', limit, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(10000);
+
+      console.log('[useCoaches] Querying for coaches...');
+
+      const events = await querySkateContent(
+        [
+          {
+            kinds: [SKATE_COACH_KIND],
+            '#t': ['skatecoach'],
+            limit,
+          },
+        ],
+        { signal }
+      );
+
+      console.log(`[useCoaches] Received ${events.length} events`);
+
+      const coaches: SkateCoach[] = [];
+      for (const event of events) {
+        const coach = parseSkateCoach(event);
+        if (coach) coaches.push(coach);
+      }
+
+      console.log(`[useCoaches] Parsed coaches: ${coaches.length}`);
+
+      return coaches.sort((a, b) => b.createdAt - a.createdAt);
+    },
+    staleTime: 30000,
+    refetchOnMount: 'always',
+  });
+}
+
+export function useCoach(identifier: string, pubkey?: string) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['coach', identifier, pubkey, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(10000);
+
+      const filter: {
+        kinds: number[];
+        '#d': string[];
+        authors?: string[];
+        limit: number;
+      } = {
+        kinds: [SKATE_COACH_KIND],
+        '#d': [identifier],
+        limit: 1,
+      };
+
+      if (pubkey) filter.authors = [pubkey];
+
+      console.log(`[useCoach] Querying for coach: ${identifier}`);
+
+      const events = await querySkateContent([filter], { signal });
+
+      console.log(`[useCoach] Received ${events.length} events`);
+
+      if (events.length === 0) {
+        console.warn(`[useCoach] No events found for identifier: ${identifier}`);
+        return null;
+      }
+
+      return parseSkateCoach(events[0]);
+    },
+    enabled: !!identifier,
+    staleTime: 30000,
+    refetchOnMount: 'always',
+  });
+}
+
+export function useUserCoachProfile(pubkey: string) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['user-coach-profile', pubkey, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(10000);
+
+      console.log(`[useUserCoachProfile] Querying for coach profile: ${pubkey}`);
+
+      const events = await querySkateContent(
+        [
+          {
+            kinds: [SKATE_COACH_KIND],
+            authors: [pubkey],
+            '#d': ['coach-profile'],
+            limit: 1,
+          },
+        ],
+        { signal }
+      );
+
+      console.log(`[useUserCoachProfile] Received ${events.length} events`);
+
+      if (events.length === 0) {
+        console.warn(`[useUserCoachProfile] No coach profile found for pubkey: ${pubkey}`);
+        return null;
+      }
+
+      return parseSkateCoach(events[0]);
+    },
+    enabled: !!pubkey,
+    staleTime: 30000,
+    refetchOnMount: 'always',
+  });
+}
diff --git a/src/src/hooks/useComments.ts b/src/src/hooks/useComments.ts
new file mode 100644
index 0000000..5fdf42b
--- /dev/null
+++ b/src/src/hooks/useComments.ts
@@ -0,0 +1,98 @@
+import { NKinds, NostrEvent, NostrFilter } from '@nostrify/nostrify';
+import { useNostr } from '@nostrify/react';
+import { useQuery } from '@tanstack/react-query';
+
+export function useComments(root: NostrEvent | URL, limit?: number) {
+  const { nostr } = useNostr();
+
+  return useQuery({
+    queryKey: ['nostr', 'comments', root instanceof URL ? root.toString() : root.id, limit],
+    queryFn: async (c) => {
+      const filter: NostrFilter = { kinds: [1111] };
+
+      if (root instanceof URL) {
+        filter['#I'] = [root.toString()];
+      } else if (NKinds.addressable(root.kind)) {
+        const d = root.tags.find(([name]) => name === 'd')?.[1] ?? '';
+        filter['#A'] = [`${root.kind}:${root.pubkey}:${d}`];
+      } else if (NKinds.replaceable(root.kind)) {
+        filter['#A'] = [`${root.kind}:${root.pubkey}:`];
+      } else {
+        filter['#E'] = [root.id];
+      }
+
+      if (typeof limit === 'number') {
+        filter.limit = limit;
+      }
+
+      // Query for all kind 1111 comments that reference this addressable event regardless of depth
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(5000)]);
+      const events = await nostr.query([filter], { signal });
+
+      // Helper function to get tag value
+      const getTagValue = (event: NostrEvent, tagName: string): string | undefined => {
+        const tag = event.tags.find(([name]) => name === tagName);
+        return tag?.[1];
+      };
+
+      // Filter top-level comments (those with lowercase tag matching the root)
+      const topLevelComments = events.filter(comment => {
+        if (root instanceof URL) {
+          return getTagValue(comment, 'i') === root.toString();
+        } else if (NKinds.addressable(root.kind)) {
+          const d = getTagValue(root, 'd') ?? '';
+          return getTagValue(comment, 'a') === `${root.kind}:${root.pubkey}:${d}`;
+        } else if (NKinds.replaceable(root.kind)) {
+          return getTagValue(comment, 'a') === `${root.kind}:${root.pubkey}:`;
+        } else {
+          return getTagValue(comment, 'e') === root.id;
+        }
+      });
+
+      // Helper function to get all descendants of a comment
+      const getDescendants = (parentId: string): NostrEvent[] => {
+        const directReplies = events.filter(comment => {
+          const eTag = getTagValue(comment, 'e');
+          return eTag === parentId;
+        });
+
+        const allDescendants = [...directReplies];
+        
+        // Recursively get descendants of each direct reply
+        for (const reply of directReplies) {
+          allDescendants.push(...getDescendants(reply.id));
+        }
+
+        return allDescendants;
+      };
+
+      // Create a map of comment ID to its descendants
+      const commentDescendants = new Map<string, NostrEvent[]>();
+      for (const comment of events) {
+        commentDescendants.set(comment.id, getDescendants(comment.id));
+      }
+
+      // Sort top-level comments by creation time (newest first)
+      const sortedTopLevel = topLevelComments.sort((a, b) => b.created_at - a.created_at);
+
+      return {
+        allComments: events,
+        topLevelComments: sortedTopLevel,
+        getDescendants: (commentId: string) => {
+          const descendants = commentDescendants.get(commentId) || [];
+          // Sort descendants by creation time (oldest first for threaded display)
+          return descendants.sort((a, b) => a.created_at - b.created_at);
+        },
+        getDirectReplies: (commentId: string) => {
+          const directReplies = events.filter(comment => {
+            const eTag = getTagValue(comment, 'e');
+            return eTag === commentId;
+          });
+          // Sort direct replies by creation time (oldest first for threaded display)
+          return directReplies.sort((a, b) => a.created_at - b.created_at);
+        }
+      };
+    },
+    enabled: !!root,
+  });
+}
\ No newline at end of file
diff --git a/src/src/hooks/useCurrentUser.ts b/src/src/hooks/useCurrentUser.ts
new file mode 100644
index 0000000..0f69454
--- /dev/null
+++ b/src/src/hooks/useCurrentUser.ts
@@ -0,0 +1,59 @@
+import { type NLoginType, NUser, useNostrLogin } from '@nostrify/react/login';
+import { useNostr } from '@nostrify/react';
+import { useCallback, useMemo } from 'react';
+
+import { useAuthor } from './useAuthor.ts';
+import { AmberSigner } from '@/lib/amber';
+import type { AmberLoginType } from './useLoginActions';
+
+/** Extended login type that includes Amber */
+type ExtendedLoginType = NLoginType | AmberLoginType;
+
+export function useCurrentUser() {
+  const { nostr } = useNostr();
+  const { logins } = useNostrLogin();
+
+  const loginToUser = useCallback((login: ExtendedLoginType): NUser  => {
+    switch (login.type) {
+      case 'nsec': // Nostr login with secret key
+        return NUser.fromNsecLogin(login);
+      case 'bunker': // Nostr login with NIP-46 "bunker://" URI
+        return NUser.fromBunkerLogin(login, nostr);
+      case 'extension': // Nostr login with NIP-07 browser extension
+        return NUser.fromExtensionLogin(login);
+      case 'amber': { // Nostr login with Amber (NIP-55)
+        const amberLogin = login as AmberLoginType;
+        const signer = new AmberSigner(amberLogin.pubkey);
+        return new NUser({ pubkey: amberLogin.pubkey, signer });
+      }
+      // Other login types can be defined here
+      default:
+        throw new Error(`Unsupported login type: ${(login as ExtendedLoginType).type}`);
+    }
+  }, [nostr]);
+
+  const users = useMemo(() => {
+    const users: NUser[] = [];
+
+    for (const login of logins) {
+      try {
+        const user = loginToUser(login);
+        users.push(user);
+      } catch (error) {
+        console.warn('Skipped invalid login', login.id, error);
+      }
+    }
+
+    return users;
+  }, [logins, loginToUser]);
+
+  const user = users[0] as NUser | undefined;
+  const author = useAuthor(user?.pubkey);
+
+  return {
+    user,
+    users,
+    isLoadingProfile: author.isLoading,
+    ...author.data,
+  };
+}
diff --git a/src/src/hooks/useDirectMessages.ts b/src/src/hooks/useDirectMessages.ts
new file mode 100644
index 0000000..21c90ad
--- /dev/null
+++ b/src/src/hooks/useDirectMessages.ts
@@ -0,0 +1,721 @@
+import { useCallback, useMemo } from 'react';
+import { useNostr } from '@nostrify/react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { nip44, nip19, getEventHash, generateSecretKey, getPublicKey } from 'nostr-tools';
+import { bytesToHex } from '@noble/hashes/utils';
+import type { NostrEvent } from '@nostrify/nostrify';
+import { useCurrentUser } from './useCurrentUser';
+import { useAppContext } from './useAppContext';
+
+// NIP-17 Message Types
+export interface DirectMessage {
+  id: string;
+  pubkey: string; // Sender's pubkey
+  content: string;
+  createdAt: number;
+  replyTo?: string; // Parent message ID
+  conversationWith: string; // The other party's pubkey (for 1:1) or group ID (for groups)
+  participants?: string[]; // All participants in group chat
+  subject?: string; // Optional conversation subject/title
+}
+
+export interface Conversation {
+  pubkey: string; // The other party (1:1) or empty for groups
+  participants?: string[]; // All participants (for groups)
+  lastMessage?: DirectMessage;
+  unreadCount: number;
+  isGroup?: boolean;
+  subject?: string;
+}
+
+// Group chat identifier is hash of sorted participants
+export function getGroupId(participants: string[]): string {
+  const sorted = [...participants].sort();
+  return sorted.join(':');
+}
+
+// Constants
+const GIFT_WRAP_KIND = 1059;
+const SEAL_KIND = 13;
+const DM_KIND = 14;
+const TWO_DAYS = 2 * 24 * 60 * 60;
+
+// Helper to generate random timestamp within past 2 days
+const randomPastTimestamp = () => Math.floor(Date.now() / 1000) - Math.floor(Math.random() * TWO_DAYS);
+
+/**
+ * Create an unsigned rumor event (NIP-17 kind 14)
+ * Supports both 1:1 and group conversations
+ */
+function createRumor(
+  senderPubkey: string,
+  recipientPubkeys: string | string[],
+  content: string,
+  options?: {
+    replyTo?: string;
+    subject?: string;
+  }
+): NostrEvent {
+  const recipients = Array.isArray(recipientPubkeys) ? recipientPubkeys : [recipientPubkeys];
+  
+  const tags: string[][] = recipients.map(pubkey => ['p', pubkey]);
+
+  if (options?.replyTo) {
+    tags.push(['e', options.replyTo]);
+  }
+  
+  if (options?.subject) {
+    tags.push(['subject', options.subject]);
+  }
+
+  const rumor = {
+    pubkey: senderPubkey,
+    created_at: Math.floor(Date.now() / 1000),
+    kind: DM_KIND,
+    tags,
+    content,
+  };
+
+  // Calculate id but don't sign
+  const id = getEventHash(rumor as NostrEvent);
+
+  return {
+    ...rumor,
+    id,
+    sig: '', // Unsigned
+  } as NostrEvent;
+}
+
+/**
+ * Hook to send NIP-17 direct messages (1:1 or group)
+ */
+export function useSendDirectMessage() {
+  const { nostr } = useNostr();
+  const { user } = useCurrentUser();
+  const { config } = useAppContext();
+  const queryClient = useQueryClient();
+
+  const sendMessage = useCallback(async (
+    recipientPubkeys: string | string[],
+    content: string,
+    options?: {
+      replyTo?: string;
+      subject?: string;
+    }
+  ): Promise<void> => {
+    if (!user?.signer?.nip44) {
+      throw new Error('NIP-44 encryption not available. Please use a compatible signer.');
+    }
+
+    const recipients = Array.isArray(recipientPubkeys) ? recipientPubkeys : [recipientPubkeys];
+    const isGroup = recipients.length > 1;
+
+    // 1. Create the unsigned rumor (kind 14)
+    const rumor = createRumor(user.pubkey, recipients, content, options);
+
+    // 2. For each recipient, create a seal encrypted to them
+    // In NIP-17, we encrypt the rumor to each recipient separately
+    const createSealAndWrap = async (targetPubkey: string): Promise<NostrEvent> => {
+      // Encrypt rumor to this specific recipient using NIP-44
+      const rumorJson = JSON.stringify(rumor);
+      const encryptedRumor = await user.signer.nip44!.encrypt(targetPubkey, rumorJson);
+
+      const sealEvent = await user.signer.signEvent({
+        kind: SEAL_KIND,
+        created_at: randomPastTimestamp(),
+        tags: [],
+        content: encryptedRumor,
+      });
+
+      // Generate ephemeral keypair for gift wrap
+      const ephemeralSecretKey = generateSecretKey();
+      const ephemeralPubkey = getPublicKey(ephemeralSecretKey);
+
+      // Encrypt seal to target using ephemeral key
+      const sealJson = JSON.stringify(sealEvent);
+      const conversationKey = nip44.v2.utils.getConversationKey(
+        bytesToHex(ephemeralSecretKey),
+        targetPubkey
+      );
+      const encryptedSeal = nip44.v2.encrypt(sealJson, conversationKey);
+
+      // Create gift wrap event
+      const giftWrap: NostrEvent = {
+        id: '',
+        pubkey: ephemeralPubkey,
+        created_at: randomPastTimestamp(),
+        kind: GIFT_WRAP_KIND,
+        tags: [['p', targetPubkey]],
+        content: encryptedSeal,
+        sig: '',
+      };
+
+      // Calculate ID and sign with ephemeral key
+      giftWrap.id = getEventHash(giftWrap);
+      
+      // Sign with ephemeral secret key using nostr-tools
+      const { schnorr } = await import('@noble/curves/secp256k1');
+      const sig = schnorr.sign(giftWrap.id, ephemeralSecretKey);
+      giftWrap.sig = bytesToHex(sig);
+
+      return giftWrap;
+    };
+
+    // 3. Create gift wraps for all recipients AND sender (so sender sees own messages)
+    const allTargets = [...new Set([...recipients, user.pubkey])];
+    const giftWraps = await Promise.all(allTargets.map(createSealAndWrap));
+
+    // 4. Publish to relays
+    const writeRelays = config.relayMetadata.relays
+      .filter(r => r.write)
+      .map(r => r.url);
+
+    // Publish all gift wraps
+    for (const relayUrl of writeRelays) {
+      try {
+        const relay = nostr.relay(relayUrl);
+        for (const wrap of giftWraps) {
+          await relay.event(wrap);
+        }
+      } catch (error) {
+        console.warn(`[DM] Failed to publish to ${relayUrl}:`, error);
+      }
+    }
+
+    // Invalidate queries to refresh message list
+    queryClient.invalidateQueries({ queryKey: ['direct-messages'] });
+    queryClient.invalidateQueries({ queryKey: ['conversations'] });
+    if (isGroup) {
+      queryClient.invalidateQueries({ queryKey: ['group-conversations'] });
+    }
+
+  }, [user, nostr, config, queryClient]);
+
+  return useMutation({
+    mutationFn: async ({ recipients, content, replyTo, subject }: {
+      recipients: string | string[];
+      content: string;
+      replyTo?: string;
+      subject?: string;
+    }) => {
+      await sendMessage(recipients, content, { replyTo, subject });
+    },
+  });
+}
+
+/**
+ * Hook to send group DMs for P2P trading
+ * Convenience wrapper with trading-specific defaults
+ */
+export function useSendTradeDM() {
+  const sendDM = useSendDirectMessage();
+  
+  return useMutation({
+    mutationFn: async ({ 
+      participants, 
+      content, 
+      itemTitle,
+      tradeType 
+    }: {
+      participants: string[];
+      content: string;
+      itemTitle?: string;
+      tradeType?: 'buy' | 'sell' | 'trade';
+    }) => {
+      const subject = itemTitle 
+        ? `${tradeType === 'buy' ? 'WTB' : tradeType === 'sell' ? 'For Sale' : 'Trade'}: ${itemTitle}`
+        : undefined;
+      
+      await sendDM.mutateAsync({ 
+        recipients: participants, 
+        content,
+        subject 
+      });
+    },
+  });
+}
+
+/**
+ * Hook to fetch and decrypt direct messages for a conversation
+ */
+export function useConversation(otherPubkey: string) {
+  const { nostr } = useNostr();
+  const { user } = useCurrentUser();
+  const { config } = useAppContext();
+
+  const relayUrls = config.relayMetadata.relays
+    .filter(r => r.read)
+    .map(r => r.url)
+    .sort()
+    .join(',');
+
+  return useQuery({
+    queryKey: ['direct-messages', otherPubkey, user?.pubkey, relayUrls],
+    queryFn: async (c) => {
+      if (!user?.signer?.nip44 || !otherPubkey) return [];
+
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(15000)]);
+
+      const readRelays = config.relayMetadata.relays
+        .filter(r => r.read)
+        .map(r => r.url);
+
+      // Query for gift wraps addressed to us
+      const allEvents: NostrEvent[] = [];
+
+      for (const relayUrl of readRelays) {
+        try {
+          const relay = nostr.relay(relayUrl);
+          const events = await relay.query(
+            [{
+              kinds: [GIFT_WRAP_KIND],
+              '#p': [user.pubkey],
+              limit: 100,
+            }],
+            { signal }
+          );
+          allEvents.push(...events);
+        } catch (error) {
+          console.warn(`[DM] Failed to query ${relayUrl}:`, error);
+        }
+      }
+
+      // Deduplicate by ID
+      const uniqueEvents = Array.from(
+        new Map(allEvents.map(e => [e.id, e])).values()
+      );
+
+      // Decrypt and filter messages
+      const messages: DirectMessage[] = [];
+
+      for (const giftWrap of uniqueEvents) {
+        try {
+          // Decrypt gift wrap to get seal
+          const sealJson = await user.signer.nip44.decrypt(giftWrap.pubkey, giftWrap.content);
+          const seal = JSON.parse(sealJson) as NostrEvent;
+
+          // Verify seal is kind 13
+          if (seal.kind !== SEAL_KIND) continue;
+
+          // Decrypt seal to get rumor
+          const rumorJson = await user.signer.nip44.decrypt(seal.pubkey, seal.content);
+          const rumor = JSON.parse(rumorJson) as NostrEvent;
+
+          // Verify rumor pubkey matches seal pubkey (prevent impersonation)
+          if (rumor.pubkey !== seal.pubkey) continue;
+
+          // Verify this is a kind 14 DM
+          if (rumor.kind !== DM_KIND) continue;
+
+          // Check if this message is part of the conversation with otherPubkey
+          const pTags = rumor.tags.filter(t => t[0] === 'p').map(t => t[1]);
+          const isFromOther = rumor.pubkey === otherPubkey;
+          const isToOther = pTags.includes(otherPubkey);
+          const isFromMe = rumor.pubkey === user.pubkey;
+          const isToMe = pTags.includes(user.pubkey);
+
+          // Message is part of this conversation if:
+          // - It's from the other person to me, OR
+          // - It's from me to the other person
+          if ((isFromOther && isToMe) || (isFromMe && isToOther)) {
+            const replyTo = rumor.tags.find(t => t[0] === 'e')?.[1];
+
+            messages.push({
+              id: rumor.id,
+              pubkey: rumor.pubkey,
+              content: rumor.content,
+              createdAt: rumor.created_at,
+              replyTo,
+              conversationWith: otherPubkey,
+            });
+          }
+        } catch (error) {
+          // Failed to decrypt - not for us or corrupted
+          console.debug('[DM] Failed to decrypt message:', error);
+        }
+      }
+
+      // Sort by creation time (oldest first for chat display)
+      return messages.sort((a, b) => a.createdAt - b.createdAt);
+    },
+    enabled: !!user?.signer?.nip44 && !!otherPubkey,
+    staleTime: 30000,
+    refetchInterval: 30000, // Poll for new messages
+  });
+}
+
+/**
+ * Hook to fetch all conversations
+ */
+export function useConversations() {
+  const { nostr } = useNostr();
+  const { user } = useCurrentUser();
+  const { config } = useAppContext();
+
+  const relayUrls = config.relayMetadata.relays
+    .filter(r => r.read)
+    .map(r => r.url)
+    .sort()
+    .join(',');
+
+  return useQuery({
+    queryKey: ['conversations', user?.pubkey, relayUrls],
+    queryFn: async (c) => {
+      if (!user?.signer?.nip44) return [];
+
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(15000)]);
+
+      const readRelays = config.relayMetadata.relays
+        .filter(r => r.read)
+        .map(r => r.url);
+
+      // Query for gift wraps addressed to us
+      const allEvents: NostrEvent[] = [];
+
+      for (const relayUrl of readRelays) {
+        try {
+          const relay = nostr.relay(relayUrl);
+          const events = await relay.query(
+            [{
+              kinds: [GIFT_WRAP_KIND],
+              '#p': [user.pubkey],
+              limit: 200,
+            }],
+            { signal }
+          );
+          allEvents.push(...events);
+        } catch (error) {
+          console.warn(`[DM] Failed to query ${relayUrl}:`, error);
+        }
+      }
+
+      // Deduplicate
+      const uniqueEvents = Array.from(
+        new Map(allEvents.map(e => [e.id, e])).values()
+      );
+
+      // Decrypt and organize by conversation
+      const conversationMap = new Map<string, DirectMessage[]>();
+
+      for (const giftWrap of uniqueEvents) {
+        try {
+          // Decrypt gift wrap
+          const sealJson = await user.signer.nip44.decrypt(giftWrap.pubkey, giftWrap.content);
+          const seal = JSON.parse(sealJson) as NostrEvent;
+
+          if (seal.kind !== SEAL_KIND) continue;
+
+          // Decrypt seal
+          const rumorJson = await user.signer.nip44.decrypt(seal.pubkey, seal.content);
+          const rumor = JSON.parse(rumorJson) as NostrEvent;
+
+          if (rumor.pubkey !== seal.pubkey) continue;
+          if (rumor.kind !== DM_KIND) continue;
+
+          // Determine conversation partner
+          const pTags = rumor.tags.filter(t => t[0] === 'p').map(t => t[1]);
+          let conversationWith: string;
+
+          if (rumor.pubkey === user.pubkey) {
+            // Message from me - conversation is with the recipient
+            conversationWith = pTags.find(p => p !== user.pubkey) || pTags[0];
+          } else {
+            // Message to me - conversation is with the sender
+            conversationWith = rumor.pubkey;
+          }
+
+          if (!conversationWith) continue;
+
+          const message: DirectMessage = {
+            id: rumor.id,
+            pubkey: rumor.pubkey,
+            content: rumor.content,
+            createdAt: rumor.created_at,
+            conversationWith,
+          };
+
+          const existing = conversationMap.get(conversationWith) || [];
+          existing.push(message);
+          conversationMap.set(conversationWith, existing);
+
+        } catch (error) {
+          console.debug('[DM] Failed to decrypt:', error);
+        }
+      }
+
+      // Build conversation list
+      const conversations: Conversation[] = [];
+
+      for (const [pubkey, messages] of conversationMap) {
+        // Sort messages to find the latest
+        const sorted = messages.sort((a, b) => b.createdAt - a.createdAt);
+        
+        conversations.push({
+          pubkey,
+          lastMessage: sorted[0],
+          unreadCount: 0, // Could implement read receipts later
+        });
+      }
+
+      // Sort conversations by last message time
+      return conversations.sort((a, b) => 
+        (b.lastMessage?.createdAt || 0) - (a.lastMessage?.createdAt || 0)
+      );
+    },
+    enabled: !!user?.signer?.nip44,
+    staleTime: 30000,
+    refetchInterval: 60000, // Poll for new conversations
+  });
+}
+
+/**
+ * Helper to format pubkey for display
+ */
+export function formatPubkeyShort(pubkey: string): string {
+  try {
+    const npub = nip19.npubEncode(pubkey);
+    return `${npub.slice(0, 8)}...${npub.slice(-4)}`;
+  } catch {
+    return `${pubkey.slice(0, 8)}...${pubkey.slice(-4)}`;
+  }
+}
+
+/**
+ * Hook to fetch group conversations (multi-participant chats)
+ * Group conversations have more than 1 p-tag in the rumor
+ */
+export function useGroupConversations() {
+  const { nostr } = useNostr();
+  const { user } = useCurrentUser();
+  const { config } = useAppContext();
+
+  const relayUrls = config.relayMetadata.relays
+    .filter(r => r.read)
+    .map(r => r.url)
+    .sort()
+    .join(',');
+
+  return useQuery({
+    queryKey: ['group-conversations', user?.pubkey, relayUrls],
+    queryFn: async (c) => {
+      if (!user?.signer?.nip44) return [];
+
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(15000)]);
+
+      const readRelays = config.relayMetadata.relays
+        .filter(r => r.read)
+        .map(r => r.url);
+
+      // Query for gift wraps addressed to us
+      const allEvents: NostrEvent[] = [];
+
+      for (const relayUrl of readRelays) {
+        try {
+          const relay = nostr.relay(relayUrl);
+          const events = await relay.query(
+            [{
+              kinds: [GIFT_WRAP_KIND],
+              '#p': [user.pubkey],
+              limit: 200,
+            }],
+            { signal }
+          );
+          allEvents.push(...events);
+        } catch (error) {
+          console.warn(`[DM] Failed to query ${relayUrl}:`, error);
+        }
+      }
+
+      // Deduplicate
+      const uniqueEvents = Array.from(
+        new Map(allEvents.map(e => [e.id, e])).values()
+      );
+
+      // Decrypt and find group conversations (>1 participant)
+      const groupMap = new Map<string, { participants: string[]; messages: DirectMessage[]; subject?: string }>();
+
+      for (const giftWrap of uniqueEvents) {
+        try {
+          // Decrypt gift wrap
+          const sealJson = await user.signer.nip44.decrypt(giftWrap.pubkey, giftWrap.content);
+          const seal = JSON.parse(sealJson) as NostrEvent;
+
+          if (seal.kind !== SEAL_KIND) continue;
+
+          // Decrypt seal
+          const rumorJson = await user.signer.nip44.decrypt(seal.pubkey, seal.content);
+          const rumor = JSON.parse(rumorJson) as NostrEvent;
+
+          if (rumor.pubkey !== seal.pubkey) continue;
+          if (rumor.kind !== DM_KIND) continue;
+
+          // Get all participants from p tags
+          const pTags = rumor.tags.filter(t => t[0] === 'p').map(t => t[1]);
+          
+          // Only include if this is a group (more than 1 p tag)
+          if (pTags.length <= 1) continue;
+
+          // Include sender in participants
+          const allParticipants = [...new Set([rumor.pubkey, ...pTags])];
+          const groupId = getGroupId(allParticipants);
+          
+          // Get subject if present
+          const subject = rumor.tags.find(t => t[0] === 'subject')?.[1];
+
+          const message: DirectMessage = {
+            id: rumor.id,
+            pubkey: rumor.pubkey,
+            content: rumor.content,
+            createdAt: rumor.created_at,
+            conversationWith: groupId,
+            participants: allParticipants,
+            subject,
+          };
+
+          const existing = groupMap.get(groupId) || { 
+            participants: allParticipants, 
+            messages: [],
+            subject 
+          };
+          existing.messages.push(message);
+          // Update subject if newer message has one
+          if (subject && message.createdAt > (existing.messages[0]?.createdAt || 0)) {
+            existing.subject = subject;
+          }
+          groupMap.set(groupId, existing);
+
+        } catch (error) {
+          console.debug('[DM] Failed to decrypt group message:', error);
+        }
+      }
+
+      // Build group conversation list
+      const conversations: Conversation[] = [];
+
+      for (const [groupId, data] of groupMap) {
+        const sorted = data.messages.sort((a, b) => b.createdAt - a.createdAt);
+        
+        conversations.push({
+          pubkey: groupId, // Use group ID as identifier
+          participants: data.participants,
+          lastMessage: sorted[0],
+          unreadCount: 0,
+          isGroup: true,
+          subject: data.subject,
+        });
+      }
+
+      // Sort by last message time
+      return conversations.sort((a, b) => 
+        (b.lastMessage?.createdAt || 0) - (a.lastMessage?.createdAt || 0)
+      );
+    },
+    enabled: !!user?.signer?.nip44,
+    staleTime: 30000,
+    refetchInterval: 60000,
+  });
+}
+
+/**
+ * Hook to fetch messages in a specific group conversation
+ */
+export function useGroupConversation(participants: string[]) {
+  const { nostr } = useNostr();
+  const { user } = useCurrentUser();
+  const { config } = useAppContext();
+  
+  const groupId = getGroupId(participants);
+
+  const relayUrls = config.relayMetadata.relays
+    .filter(r => r.read)
+    .map(r => r.url)
+    .sort()
+    .join(',');
+
+  return useQuery({
+    queryKey: ['group-messages', groupId, user?.pubkey, relayUrls],
+    queryFn: async (c) => {
+      if (!user?.signer?.nip44 || participants.length === 0) return [];
+
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(15000)]);
+
+      const readRelays = config.relayMetadata.relays
+        .filter(r => r.read)
+        .map(r => r.url);
+
+      // Query for gift wraps addressed to us
+      const allEvents: NostrEvent[] = [];
+
+      for (const relayUrl of readRelays) {
+        try {
+          const relay = nostr.relay(relayUrl);
+          const events = await relay.query(
+            [{
+              kinds: [GIFT_WRAP_KIND],
+              '#p': [user.pubkey],
+              limit: 200,
+            }],
+            { signal }
+          );
+          allEvents.push(...events);
+        } catch (error) {
+          console.warn(`[DM] Failed to query ${relayUrl}:`, error);
+        }
+      }
+
+      // Deduplicate
+      const uniqueEvents = Array.from(
+        new Map(allEvents.map(e => [e.id, e])).values()
+      );
+
+      // Decrypt and filter to this group
+      const messages: DirectMessage[] = [];
+
+      for (const giftWrap of uniqueEvents) {
+        try {
+          const sealJson = await user.signer.nip44.decrypt(giftWrap.pubkey, giftWrap.content);
+          const seal = JSON.parse(sealJson) as NostrEvent;
+
+          if (seal.kind !== SEAL_KIND) continue;
+
+          const rumorJson = await user.signer.nip44.decrypt(seal.pubkey, seal.content);
+          const rumor = JSON.parse(rumorJson) as NostrEvent;
+
+          if (rumor.pubkey !== seal.pubkey) continue;
+          if (rumor.kind !== DM_KIND) continue;
+
+          // Get all participants
+          const pTags = rumor.tags.filter(t => t[0] === 'p').map(t => t[1]);
+          const allParticipants = [...new Set([rumor.pubkey, ...pTags])];
+          const messageGroupId = getGroupId(allParticipants);
+
+          // Only include if this message is part of the target group
+          if (messageGroupId !== groupId) continue;
+
+          const subject = rumor.tags.find(t => t[0] === 'subject')?.[1];
+          const replyTo = rumor.tags.find(t => t[0] === 'e')?.[1];
+
+          messages.push({
+            id: rumor.id,
+            pubkey: rumor.pubkey,
+            content: rumor.content,
+            createdAt: rumor.created_at,
+            conversationWith: groupId,
+            participants: allParticipants,
+            subject,
+            replyTo,
+          });
+
+        } catch (error) {
+          console.debug('[DM] Failed to decrypt:', error);
+        }
+      }
+
+      // Sort by creation time (oldest first for chat display)
+      return messages.sort((a, b) => a.createdAt - b.createdAt);
+    },
+    enabled: !!user?.signer?.nip44 && participants.length > 0,
+    staleTime: 30000,
+    refetchInterval: 30000,
+  });
+}
diff --git a/src/src/hooks/useExchangeRate.ts b/src/src/hooks/useExchangeRate.ts
new file mode 100644
index 0000000..c3ff79e
--- /dev/null
+++ b/src/src/hooks/useExchangeRate.ts
@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { getBtcUsdRate } from '@/lib/exchangeRateService';
+
+/**
+ * Hook to fetch and cache BTC/USD exchange rate
+ */
+export function useExchangeRate() {
+  return useQuery({
+    queryKey: ['btc-usd-rate'],
+    queryFn: getBtcUsdRate,
+    staleTime: 60000, // Consider stale after 1 minute
+    refetchInterval: 120000, // Refetch every 2 minutes
+    retry: 2,
+    retryDelay: 1000,
+  });
+}
+
+/**
+ * Hook to convert sats to USD with current exchange rate
+ */
+export function useSatsToUsd(sats: number | null | undefined) {
+  const { data: rate } = useExchangeRate();
+  
+  return useMemo(() => {
+    if (!sats || !rate) return null;
+    return (sats / 100000000) * rate;
+  }, [sats, rate]);
+}
+
+/**
+ * Hook to convert USD to sats with current exchange rate
+ */
+export function useUsdToSats(usd: number | null | undefined) {
+  const { data: rate } = useExchangeRate();
+  
+  return useMemo(() => {
+    if (!usd || !rate) return null;
+    return Math.floor((usd / rate) * 100000000);
+  }, [usd, rate]);
+}
diff --git a/src/src/hooks/useFollowList.ts b/src/src/hooks/useFollowList.ts
new file mode 100644
index 0000000..d9da147
--- /dev/null
+++ b/src/src/hooks/useFollowList.ts
@@ -0,0 +1,29 @@
+import { useQuery } from '@tanstack/react-query';
+import { useNostr } from '@nostrify/react';
+
+/**
+ * Hook to fetch a user's follow list (kind 3 event).
+ * Returns the latest kind 3 event for the given pubkey.
+ */
+export function useFollowList(pubkey: string | undefined) {
+  const { nostr } = useNostr();
+
+  return useQuery({
+    queryKey: ['follow-list', pubkey],
+    queryFn: async (c) => {
+      if (!pubkey) return null;
+
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(5000)]);
+
+      const events = await nostr.query(
+        [{ kinds: [3], authors: [pubkey], limit: 1 }],
+        { signal }
+      );
+
+      return events[0] || null;
+    },
+    enabled: !!pubkey,
+    staleTime: 300000, // 5 minutes
+    gcTime: 600000, // 10 minutes
+  });
+}
diff --git a/src/src/hooks/useFollowing.ts b/src/src/hooks/useFollowing.ts
new file mode 100644
index 0000000..f56f6b8
--- /dev/null
+++ b/src/src/hooks/useFollowing.ts
@@ -0,0 +1,247 @@
+import { useNostr } from '@nostrify/react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useCurrentUser } from './useCurrentUser';
+import { useToast } from './useToast';
+import { nip19 } from 'nostr-tools';
+
+/**
+ * Hook to fetch the list of pubkeys that a user follows
+ */
+export function useFollowing(pubkey?: string) {
+  const { nostr } = useNostr();
+  const { user } = useCurrentUser();
+  const targetPubkey = pubkey || user?.pubkey;
+
+  return useQuery({
+    queryKey: ['following', targetPubkey],
+    queryFn: async (c) => {
+      if (!targetPubkey) return [];
+
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(5000)]);
+
+      const events = await nostr.query(
+        [{ kinds: [3], authors: [targetPubkey], limit: 1 }],
+        { signal }
+      );
+
+      if (!events[0]) return [];
+
+      // Extract followed pubkeys from p tags
+      const following = events[0].tags
+        .filter(([tag]) => tag === 'p')
+        .map(([, pubkey]) => pubkey);
+
+      return following;
+    },
+    enabled: !!targetPubkey,
+    staleTime: 60000, // 1 minute
+  });
+}
+
+/**
+ * Hook to fetch the list of pubkeys that follow a user
+ */
+export function useFollowers(pubkey?: string) {
+  const { nostr } = useNostr();
+  const { user } = useCurrentUser();
+  const targetPubkey = pubkey || user?.pubkey;
+
+  return useQuery({
+    queryKey: ['followers', targetPubkey],
+    queryFn: async (c) => {
+      if (!targetPubkey) return [];
+
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(10000)]);
+
+      // Query all kind 3 events that have a p tag with our pubkey
+      const events = await nostr.query(
+        [{ kinds: [3], '#p': [targetPubkey], limit: 100 }],
+        { signal }
+      );
+
+      // Extract the authors (people who follow us)
+      const followers = events.map((event) => event.pubkey);
+
+      // Deduplicate (same person might have multiple follow lists)
+      return Array.from(new Set(followers));
+    },
+    enabled: !!targetPubkey,
+    staleTime: 60000, // 1 minute
+  });
+}
+
+/**
+ * Hook to follow/unfollow users
+ */
+export function useFollowActions() {
+  const { nostr } = useNostr();
+  const { user } = useCurrentUser();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+
+  const followMutation = useMutation({
+    mutationFn: async (targetPubkey: string) => {
+      if (!user) throw new Error('Must be logged in to follow users');
+
+      // Get current follow list
+      const events = await nostr.query(
+        [{ kinds: [3], authors: [user.pubkey], limit: 1 }],
+        { signal: AbortSignal.timeout(5000) }
+      );
+
+      const currentFollowList = events[0];
+      const currentTags = currentFollowList?.tags || [];
+
+      // Check if already following
+      const alreadyFollowing = currentTags.some(
+        ([tag, pubkey]) => tag === 'p' && pubkey === targetPubkey
+      );
+
+      if (alreadyFollowing) {
+        throw new Error('Already following this user');
+      }
+
+      // Add new p tag
+      const newTags = [...currentTags, ['p', targetPubkey]];
+
+      // Publish new follow list
+      await user.signer.signEvent({
+        kind: 3,
+        content: currentFollowList?.content || '',
+        tags: newTags,
+        created_at: Math.floor(Date.now() / 1000),
+      }).then((signedEvent) => nostr.event(signedEvent));
+
+      return targetPubkey;
+    },
+    onSuccess: (targetPubkey) => {
+      // Invalidate queries to refetch
+      queryClient.invalidateQueries({ queryKey: ['following', user?.pubkey] });
+      queryClient.invalidateQueries({ queryKey: ['trust-score'] });
+
+      toast({
+        title: 'Followed successfully',
+        description: 'This user is now in your network',
+      });
+    },
+    onError: (error) => {
+      toast({
+        title: 'Failed to follow',
+        description: error instanceof Error ? error.message : 'Unknown error',
+        variant: 'destructive',
+      });
+    },
+  });
+
+  const unfollowMutation = useMutation({
+    mutationFn: async (targetPubkey: string) => {
+      if (!user) throw new Error('Must be logged in to unfollow users');
+
+      // Get current follow list
+      const events = await nostr.query(
+        [{ kinds: [3], authors: [user.pubkey], limit: 1 }],
+        { signal: AbortSignal.timeout(5000) }
+      );
+
+      const currentFollowList = events[0];
+      if (!currentFollowList) {
+        throw new Error('No follow list found');
+      }
+
+      // Remove the p tag for this pubkey
+      const newTags = currentFollowList.tags.filter(
+        ([tag, pubkey]) => !(tag === 'p' && pubkey === targetPubkey)
+      );
+
+      // Publish updated follow list
+      await user.signer.signEvent({
+        kind: 3,
+        content: currentFollowList.content || '',
+        tags: newTags,
+        created_at: Math.floor(Date.now() / 1000),
+      }).then((signedEvent) => nostr.event(signedEvent));
+
+      return targetPubkey;
+    },
+    onSuccess: () => {
+      // Invalidate queries
+      queryClient.invalidateQueries({ queryKey: ['following', user?.pubkey] });
+      queryClient.invalidateQueries({ queryKey: ['trust-score'] });
+
+      toast({
+        title: 'Unfollowed successfully',
+        description: 'Removed from your network',
+      });
+    },
+    onError: (error) => {
+      toast({
+        title: 'Failed to unfollow',
+        description: error instanceof Error ? error.message : 'Unknown error',
+        variant: 'destructive',
+      });
+    },
+  });
+
+  /**
+   * Parse npub/nip05 and follow the user
+   */
+  const followByIdentifier = async (identifier: string) => {
+    try {
+      // Try to decode as npub first
+      if (identifier.startsWith('npub1')) {
+        const decoded = nip19.decode(identifier);
+        if (decoded.type === 'npub') {
+          await followMutation.mutateAsync(decoded.data);
+          return;
+        }
+      }
+
+      // Try to resolve as NIP-05
+      if (identifier.includes('@')) {
+        const [name, domain] = identifier.split('@');
+        const response = await fetch(
+          `https://${domain}/.well-known/nostr.json?name=${name}`
+        );
+        const data = await response.json();
+        const pubkey = data.names?.[name];
+        
+        if (pubkey) {
+          await followMutation.mutateAsync(pubkey);
+          return;
+        }
+      }
+
+      // Try as raw hex pubkey
+      if (identifier.length === 64 && /^[0-9a-f]+$/.test(identifier)) {
+        await followMutation.mutateAsync(identifier);
+        return;
+      }
+
+      throw new Error('Invalid identifier. Use npub1..., user@domain.com, or hex pubkey');
+    } catch (error) {
+      toast({
+        title: 'Failed to follow',
+        description: error instanceof Error ? error.message : 'Invalid identifier',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return {
+    follow: followMutation.mutateAsync,
+    unfollow: unfollowMutation.mutateAsync,
+    followByIdentifier,
+    isFollowing: followMutation.isPending,
+    isUnfollowing: unfollowMutation.isPending,
+  };
+}
+
+/**
+ * Check if current user is following a specific pubkey
+ */
+export function useIsFollowing(targetPubkey: string | undefined) {
+  const { data: following = [] } = useFollowing();
+
+  if (!targetPubkey) return false;
+  return following.includes(targetPubkey);
+}
diff --git a/src/src/hooks/useFoodSpots.ts b/src/src/hooks/useFoodSpots.ts
new file mode 100644
index 0000000..96f4bdd
--- /dev/null
+++ b/src/src/hooks/useFoodSpots.ts
@@ -0,0 +1,107 @@
+import { useQuery } from '@tanstack/react-query';
+import ngeohash from 'ngeohash';
+import type { FoodSpot } from '@/lib/types';
+
+const CORS_PROXY = 'https://proxy.shakespeare.diy/?url=';
+const OVERPASS_API = 'https://overpass-api.de/api/interpreter';
+
+interface OverpassElement {
+  type: string;
+  id: number;
+  lat?: number;
+  lon?: number;
+  center?: { lat: number; lon: number };
+  tags?: Record<string, string>;
+}
+
+function calculateDistance(lat1: number, lon1: number, lat2: number, lon2: number): number {
+  const R = 6371; // Earth's radius in km
+  const dLat = ((lat2 - lat1) * Math.PI) / 180;
+  const dLon = ((lon2 - lon1) * Math.PI) / 180;
+  const a =
+    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+    Math.cos((lat1 * Math.PI) / 180) *
+      Math.cos((lat2 * Math.PI) / 180) *
+      Math.sin(dLon / 2) *
+      Math.sin(dLon / 2);
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  return R * c;
+}
+
+export function useFoodSpots(geohash: string | undefined, radiusKm = 1) {
+  return useQuery({
+    queryKey: ['food-spots', geohash, radiusKm],
+    queryFn: async () => {
+      if (!geohash) return [];
+
+      // Decode geohash to get center coordinates
+      const { latitude: centerLat, longitude: centerLon } = ngeohash.decode(geohash);
+
+      // Calculate bounding box for the search area
+      const latOffset = radiusKm / 111; // ~111km per degree of latitude
+      const lonOffset = radiusKm / (111 * Math.cos((centerLat * Math.PI) / 180));
+
+      const south = centerLat - latOffset;
+      const west = centerLon - lonOffset;
+      const north = centerLat + latOffset;
+      const east = centerLon + lonOffset;
+
+      // Overpass QL query for restaurants, cafes, fast food, etc.
+      const query = `
+        [out:json][timeout:25];
+        (
+          node["amenity"~"restaurant|cafe|fast_food|bar|pub|food_court"](${south},${west},${north},${east});
+          way["amenity"~"restaurant|cafe|fast_food|bar|pub|food_court"](${south},${west},${north},${east});
+        );
+        out center;
+      `;
+
+      const response = await fetch(CORS_PROXY + encodeURIComponent(OVERPASS_API), {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: `data=${encodeURIComponent(query)}`,
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch food spots');
+      }
+
+      const data = await response.json();
+
+      const foodSpots: FoodSpot[] = data.elements
+        .map((element: OverpassElement) => {
+          const lat = element.lat ?? element.center?.lat;
+          const lon = element.lon ?? element.center?.lon;
+          const tags = element.tags ?? {};
+
+          if (!lat || !lon) return null;
+
+          const distance = calculateDistance(centerLat, centerLon, lat, lon);
+
+          return {
+            id: `${element.type}-${element.id}`,
+            name: tags.name || 'Unknown',
+            lat,
+            lng: lon,
+            type: tags.amenity || 'restaurant',
+            cuisine: tags.cuisine,
+            address: [tags['addr:housenumber'], tags['addr:street'], tags['addr:city']]
+              .filter(Boolean)
+              .join(' '),
+            phone: tags.phone,
+            website: tags.website,
+            openingHours: tags.opening_hours,
+            distance,
+          };
+        })
+        .filter(Boolean)
+        .sort((a: FoodSpot, b: FoodSpot) => (a.distance ?? Infinity) - (b.distance ?? Infinity));
+
+      return foodSpots as FoodSpot[];
+    },
+    enabled: !!geohash,
+    staleTime: 300000, // 5 minutes
+  });
+}
diff --git a/src/src/hooks/useIsMobile.tsx b/src/src/hooks/useIsMobile.tsx
new file mode 100644
index 0000000..0fae217
--- /dev/null
+++ b/src/src/hooks/useIsMobile.tsx
@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react"
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = useState(window.innerWidth < MOBILE_BREAKPOINT);
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    }
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}
diff --git a/src/src/hooks/useLabProfiles.ts b/src/src/hooks/useLabProfiles.ts
new file mode 100644
index 0000000..f4b8a71
--- /dev/null
+++ b/src/src/hooks/useLabProfiles.ts
@@ -0,0 +1,104 @@
+import { useQuery } from '@tanstack/react-query';
+import { SKATE_COACH_KIND, SKATE_FILMER_KIND, parseSkateCoach, parseSkateFilmer, type SkateCoach, type SkateFilmer } from '@/lib/types';
+import { useSkateRelays } from '@/hooks/useSkateRelays';
+
+export type LabProfile = (SkateCoach | SkateFilmer) & {
+  profileType: 'coach' | 'filmer';
+};
+
+export function useLabProfiles(limit = 100) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['lab-profiles', limit, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(10000);
+
+      console.log('[useLabProfiles] Querying for coaches and filmers...');
+
+      const events = await querySkateContent(
+        [
+          {
+            kinds: [SKATE_COACH_KIND, SKATE_FILMER_KIND],
+            '#t': ['skatecoach', 'skatefilmer'],
+            limit: limit * 2,
+          },
+        ],
+        { signal }
+      );
+
+      console.log(`[useLabProfiles] Received ${events.length} events`);
+
+      const profiles: LabProfile[] = [];
+      for (const event of events) {
+        if (event.kind === SKATE_COACH_KIND) {
+          const coach = parseSkateCoach(event);
+          if (coach) {
+            profiles.push({ ...coach, profileType: 'coach' });
+          }
+        } else if (event.kind === SKATE_FILMER_KIND) {
+          const filmer = parseSkateFilmer(event);
+          if (filmer) {
+            profiles.push({ ...filmer, profileType: 'filmer' });
+          }
+        }
+      }
+
+      console.log(`[useLabProfiles] Parsed profiles: ${profiles.length} (coaches + filmers)`);
+
+      return profiles.sort((a, b) => b.createdAt - a.createdAt);
+    },
+    staleTime: 30000,
+    refetchOnMount: 'always',
+  });
+}
+
+export function useLabProfile(identifier: string, pubkey?: string) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['lab-profile', identifier, pubkey, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(10000);
+
+      const filter: {
+        kinds: number[];
+        '#d': string[];
+        authors?: string[];
+        limit: number;
+      } = {
+        kinds: [SKATE_COACH_KIND, SKATE_FILMER_KIND],
+        '#d': [identifier],
+        limit: 1,
+      };
+
+      if (pubkey) filter.authors = [pubkey];
+
+      console.log(`[useLabProfile] Querying for profile: ${identifier}`);
+
+      const events = await querySkateContent([filter], { signal });
+
+      console.log(`[useLabProfile] Received ${events.length} events`);
+
+      if (events.length === 0) {
+        console.warn(`[useLabProfile] No events found for identifier: ${identifier}`);
+        return null;
+      }
+
+      const event = events[0];
+
+      if (event.kind === SKATE_COACH_KIND) {
+        const coach = parseSkateCoach(event);
+        return coach ? { ...coach, profileType: 'coach' as const } : null;
+      } else if (event.kind === SKATE_FILMER_KIND) {
+        const filmer = parseSkateFilmer(event);
+        return filmer ? { ...filmer, profileType: 'filmer' as const } : null;
+      }
+
+      return null;
+    },
+    enabled: !!identifier,
+    staleTime: 30000,
+    refetchOnMount: 'always',
+  });
+}
diff --git a/src/src/hooks/useLightningAddress.ts b/src/src/hooks/useLightningAddress.ts
new file mode 100644
index 0000000..8f78c98
--- /dev/null
+++ b/src/src/hooks/useLightningAddress.ts
@@ -0,0 +1,38 @@
+import { useState, useCallback } from 'react';
+import { getInvoiceFromLightningAddress, type GetInvoiceParams } from '@/lib/lightningAddress';
+
+interface UseLightningAddressReturn {
+  getInvoice: (params: GetInvoiceParams) => Promise<string>;
+  isLoading: boolean;
+  error: string | null;
+}
+
+/**
+ * Hook for resolving Lightning addresses to invoices
+ */
+export function useLightningAddress(): UseLightningAddressReturn {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const getInvoice = useCallback(async (params: GetInvoiceParams): Promise<string> => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const invoice = await getInvoiceFromLightningAddress(params);
+      setIsLoading(false);
+      return invoice;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+      setError(errorMessage);
+      setIsLoading(false);
+      throw err;
+    }
+  }, []);
+
+  return {
+    getInvoice,
+    isLoading,
+    error,
+  };
+}
diff --git a/src/src/hooks/useListingReports.ts b/src/src/hooks/useListingReports.ts
new file mode 100644
index 0000000..0277759
--- /dev/null
+++ b/src/src/hooks/useListingReports.ts
@@ -0,0 +1,192 @@
+import { useNostr } from '@nostrify/react';
+import { useQuery } from '@tanstack/react-query';
+import { useAppContext } from '@/hooks/useAppContext';
+
+const REPORT_KIND = 1984; // NIP-56 Report kind
+
+export interface ListingReport {
+  id: string;
+  pubkey: string;
+  reportedEventId: string;
+  reportedPubkey: string;
+  reason: string;
+  content: string;
+  createdAt: number;
+}
+
+/**
+ * Hook to fetch reports for a specific listing event.
+ * Returns the count and details of reports.
+ */
+export function useListingReports(eventId: string, pubkey: string) {
+  const { nostr } = useNostr();
+  const { config } = useAppContext();
+
+  const relayUrls = config.relayMetadata.relays
+    .filter(r => r.read)
+    .map(r => r.url)
+    .sort()
+    .join(',');
+
+  return useQuery({
+    queryKey: ['listing-reports', eventId, relayUrls],
+    queryFn: async (c) => {
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(8000)]);
+
+      try {
+        const readRelays = config.relayMetadata.relays
+          .filter(r => r.read)
+          .map(r => r.url);
+
+        const allEvents: any[] = [];
+
+        for (const relayUrl of readRelays) {
+          try {
+            const relay = nostr.relay(relayUrl);
+            const relayEvents = await relay.query(
+              [
+                {
+                  kinds: [REPORT_KIND],
+                  '#e': [eventId],
+                  limit: 50,
+                },
+              ],
+              { signal }
+            );
+            allEvents.push(...relayEvents);
+          } catch (error) {
+            console.warn(`[useListingReports] Failed to query relay ${relayUrl}:`, error);
+          }
+        }
+
+        // Deduplicate by event ID
+        const eventMap = new Map<string, any>();
+        for (const event of allEvents) {
+          if (!eventMap.has(event.id)) {
+            eventMap.set(event.id, event);
+          }
+        }
+
+        const reports: ListingReport[] = [];
+        for (const event of Array.from(eventMap.values())) {
+          // Extract reason from e tag (3rd element) or p tag
+          const eTag = event.tags.find(([t, id]: [string, string]) => t === 'e' && id === eventId);
+          const pTag = event.tags.find(([t]: [string]) => t === 'p');
+          
+          const reason = eTag?.[2] || pTag?.[2] || 'other';
+
+          reports.push({
+            id: event.id,
+            pubkey: event.pubkey,
+            reportedEventId: eventId,
+            reportedPubkey: pubkey,
+            reason,
+            content: event.content,
+            createdAt: event.created_at,
+          });
+        }
+
+        return {
+          reports,
+          count: reports.length,
+          isReported: reports.length > 0,
+          shouldHide: reports.length >= 3, // Auto-hide threshold
+        };
+      } catch (error) {
+        console.warn('[useListingReports] Error fetching reports:', error);
+        return {
+          reports: [],
+          count: 0,
+          isReported: false,
+          shouldHide: false,
+        };
+      }
+    },
+    enabled: !!eventId,
+    staleTime: 60000, // Cache for 1 minute
+    gcTime: 300000, // Keep in cache for 5 minutes
+  });
+}
+
+/**
+ * Hook to batch fetch report counts for multiple listings.
+ * More efficient than calling useListingReports multiple times.
+ */
+export function useBatchListingReports(eventIds: string[]) {
+  const { nostr } = useNostr();
+  const { config } = useAppContext();
+
+  const relayUrls = config.relayMetadata.relays
+    .filter(r => r.read)
+    .map(r => r.url)
+    .sort()
+    .join(',');
+
+  return useQuery({
+    queryKey: ['batch-listing-reports', eventIds.sort().join(','), relayUrls],
+    queryFn: async (c) => {
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(10000)]);
+      const reportCounts = new Map<string, number>();
+
+      // Initialize all to 0
+      eventIds.forEach(id => reportCounts.set(id, 0));
+
+      if (eventIds.length === 0) {
+        return reportCounts;
+      }
+
+      try {
+        const readRelays = config.relayMetadata.relays
+          .filter(r => r.read)
+          .map(r => r.url);
+
+        const allEvents: any[] = [];
+
+        for (const relayUrl of readRelays) {
+          try {
+            const relay = nostr.relay(relayUrl);
+            const relayEvents = await relay.query(
+              [
+                {
+                  kinds: [REPORT_KIND],
+                  '#e': eventIds,
+                  limit: 200,
+                },
+              ],
+              { signal }
+            );
+            allEvents.push(...relayEvents);
+          } catch (error) {
+            console.warn(`[useBatchListingReports] Failed to query relay ${relayUrl}:`, error);
+          }
+        }
+
+        // Deduplicate by event ID
+        const eventMap = new Map<string, any>();
+        for (const event of allEvents) {
+          if (!eventMap.has(event.id)) {
+            eventMap.set(event.id, event);
+          }
+        }
+
+        // Count reports per listing
+        for (const event of Array.from(eventMap.values())) {
+          const eTags = event.tags.filter(([t]: [string]) => t === 'e');
+          for (const [, eventId] of eTags) {
+            if (eventIds.includes(eventId)) {
+              reportCounts.set(eventId, (reportCounts.get(eventId) || 0) + 1);
+            }
+          }
+        }
+
+        return reportCounts;
+      } catch (error) {
+        console.warn('[useBatchListingReports] Error fetching batch reports:', error);
+        return reportCounts;
+      }
+    },
+    enabled: eventIds.length > 0,
+    staleTime: 60000,
+    gcTime: 300000,
+  });
+}
diff --git a/src/src/hooks/useListingRestrictions.ts b/src/src/hooks/useListingRestrictions.ts
new file mode 100644
index 0000000..7180326
--- /dev/null
+++ b/src/src/hooks/useListingRestrictions.ts
@@ -0,0 +1,270 @@
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useNostr } from '@nostrify/react';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+import { MARKETPLACE_ITEM_KIND, SKATE_SPOT_KIND, SKATE_RELAY } from '@/lib/types';
+import type { NostrEvent } from '@nostrify/nostrify';
+
+// Platform fee destination
+export const PLATFORM_LIGHTNING_ADDRESS = 'skatespots@minibits.cash';
+
+// Platform owner pubkeys - always trusted, never pay fees
+export const PLATFORM_OWNER_PUBKEYS = [
+  '20e7c953439e66f3882ab96fe0faa8ba246d6fb12c03b0cb4e2dc4623b8bcb21', // npub1yrnuj56rnen08zp2h9h7p74ghgjx6ma39spmpj6w9hzxywutevsst7k5cx
+  'caba497f7beda0650d6b78ab211216e4d2ebabeec9ca6eb2a05cee8e55c6871b', // npub1e2ayjlmmaksx2rtt0z4jzyskunfwh2lwe89xav4qtnhgu4wxsudsp98a4l
+];
+
+// Trust levels based on activity
+export type TrustLevel = 'unknown' | 'newcomer' | 'active' | 'trusted';
+
+// Listing limits per trust level (per 30-day period)
+export const LISTING_LIMITS: Record<TrustLevel, number> = {
+  unknown: 0,    // No NIP-05 = can't list at all
+  newcomer: 3,   // Has NIP-05 but no activity yet - REQUIRES FEE
+  active: 10,    // Has spots or 2+ listings - NO FEE
+  trusted: 50,   // Established member (spots + listings) - NO FEE
+};
+
+// Cooldown in milliseconds (24 hours for unknown users)
+export const COOLDOWN_MS = 24 * 60 * 60 * 1000;
+
+// Fee in sats for unknown users
+export const LISTING_FEE_SATS = 1000;
+
+interface ListingRestrictions {
+  trustLevel: TrustLevel;
+  listingLimit: number;
+  listingsThisMonth: number;
+  remainingListings: number;
+  canCreateListing: boolean;
+  requiresFee: boolean;
+  feeRecipient: string | null; // Lightning address - spot owner or platform
+  feeRecipientName: string | null; // Name for display
+  cooldownEndsAt: number | null;
+  isInCooldown: boolean;
+  timeUntilCooldownEnds: number | null; // milliseconds
+  hasNip05: boolean;
+  isPlatformOwner: boolean; // Platform owners bypass all restrictions
+  hasSpotsCreated: boolean;
+  hasListingsCreated: boolean;
+  isLoading: boolean;
+}
+
+interface LastListingRecord {
+  timestamp: number;
+  spotOwnerPubkey?: string;
+}
+
+/**
+ * Hook to manage listing restrictions based on user trust level
+ */
+export function useListingRestrictions(linkedSpotPubkey?: string): ListingRestrictions {
+  const { nostr } = useNostr();
+  const { user } = useCurrentUser();
+  const [lastListingRecord, setLastListingRecord] = useLocalStorage<LastListingRecord | null>(
+    'last-listing-record',
+    null
+  );
+
+  // Check if user has NIP-05 verification
+  const hasNip05 = !!user?.metadata?.nip05;
+  
+  // Check if user is a platform owner (bypasses all restrictions)
+  const isPlatformOwner = !!user?.pubkey && PLATFORM_OWNER_PUBKEYS.includes(user.pubkey);
+
+  // Query user's spots
+  const { data: userSpots, isLoading: spotsLoading } = useQuery({
+    queryKey: ['user-spots', user?.pubkey],
+    queryFn: async (c) => {
+      if (!user?.pubkey) return [];
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(5000)]);
+      const relay = nostr.relay(SKATE_RELAY);
+      const events = await relay.query([{
+        kinds: [SKATE_SPOT_KIND],
+        authors: [user.pubkey],
+        limit: 50,
+      }], { signal });
+      return events;
+    },
+    enabled: !!user?.pubkey,
+    staleTime: 60000,
+  });
+
+  // Query user's listings (last 30 days)
+  const thirtyDaysAgo = Math.floor((Date.now() - 30 * 24 * 60 * 60 * 1000) / 1000);
+  const { data: userListings, isLoading: listingsLoading } = useQuery({
+    queryKey: ['user-listings', user?.pubkey, thirtyDaysAgo],
+    queryFn: async (c) => {
+      if (!user?.pubkey) return [];
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(5000)]);
+      const relay = nostr.relay(SKATE_RELAY);
+      const events = await relay.query([{
+        kinds: [MARKETPLACE_ITEM_KIND],
+        authors: [user.pubkey],
+        since: thirtyDaysAgo,
+        limit: 100,
+      }], { signal });
+      return events;
+    },
+    enabled: !!user?.pubkey,
+    staleTime: 30000,
+  });
+
+  // Query spot owner's metadata if we have a linked spot
+  const { data: spotOwnerData } = useQuery({
+    queryKey: ['spot-owner', linkedSpotPubkey],
+    queryFn: async (c) => {
+      if (!linkedSpotPubkey) return null;
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(5000)]);
+      const events = await nostr.query([{
+        kinds: [0],
+        authors: [linkedSpotPubkey],
+        limit: 1,
+      }], { signal });
+      if (events.length === 0) return null;
+      try {
+        const metadata = JSON.parse(events[0].content);
+        return {
+          pubkey: linkedSpotPubkey,
+          lud16: metadata.lud16 || null,
+          name: metadata.name || metadata.display_name || null,
+        };
+      } catch {
+        return null;
+      }
+    },
+    enabled: !!linkedSpotPubkey,
+    staleTime: 300000,
+  });
+
+  const isLoading = spotsLoading || listingsLoading;
+
+  // Calculate trust level
+  const trustLevel = useMemo((): TrustLevel => {
+    if (!user) return 'unknown';
+    
+    // Platform owners are ALWAYS trusted - no exceptions, no other checks needed
+    // This must be checked FIRST before any other conditions
+    if (PLATFORM_OWNER_PUBKEYS.includes(user.pubkey)) {
+      return 'trusted';
+    }
+    
+    // For non-platform-owners, NIP-05 is required
+    if (!hasNip05) return 'unknown';
+    
+    // While loading, assume user is at least active if they have NIP-05
+    // This prevents showing the fee payment UI while data loads
+    // Better to temporarily give benefit of the doubt than show fee to trusted users
+    if (isLoading && hasNip05) {
+      return 'active';
+    }
+
+    const spotsCreated = userSpots?.length || 0;
+    const listingsCreated = userListings?.length || 0;
+
+    // Trusted: Has created spots AND has successful listings
+    if (spotsCreated >= 1 && listingsCreated >= 3) {
+      return 'trusted';
+    }
+
+    // Active: Has created spots OR has multiple listings
+    if (spotsCreated >= 1 || listingsCreated >= 2) {
+      return 'active';
+    }
+
+    // Newcomer: Has NIP-05 but limited activity
+    if (hasNip05) {
+      return 'newcomer';
+    }
+
+    return 'unknown';
+  }, [user, hasNip05, userSpots, userListings, isLoading]);
+
+  // Calculate cooldown status (only for unknown users)
+  const cooldownStatus = useMemo(() => {
+    if (trustLevel !== 'unknown' || !lastListingRecord) {
+      return { isInCooldown: false, cooldownEndsAt: null, timeUntilCooldownEnds: null };
+    }
+
+    const cooldownEndsAt = lastListingRecord.timestamp + COOLDOWN_MS;
+    const now = Date.now();
+    const isInCooldown = now < cooldownEndsAt;
+    const timeUntilCooldownEnds = isInCooldown ? cooldownEndsAt - now : null;
+
+    return { isInCooldown, cooldownEndsAt, timeUntilCooldownEnds };
+  }, [trustLevel, lastListingRecord]);
+
+  // Calculate listings this month
+  const listingsThisMonth = userListings?.length || 0;
+  const listingLimit = LISTING_LIMITS[trustLevel];
+  const remainingListings = Math.max(0, listingLimit - listingsThisMonth);
+
+  // Determine if fee is required - only for newcomers (NIP-05 but no activity yet)
+  // Users without NIP-05 can't list at all, so we don't need to handle that case here
+  const requiresFee = trustLevel === 'newcomer';
+
+  // Determine fee recipient
+  const feeRecipient = useMemo(() => {
+    if (!requiresFee) return null;
+    
+    // If spot has owner with lightning address, pay them
+    if (spotOwnerData?.lud16) {
+      return spotOwnerData.lud16;
+    }
+    
+    // Otherwise pay platform
+    return PLATFORM_LIGHTNING_ADDRESS;
+  }, [requiresFee, spotOwnerData]);
+
+  const feeRecipientName = useMemo(() => {
+    if (!requiresFee) return null;
+    if (spotOwnerData?.lud16) {
+      return spotOwnerData.name || 'Spot Owner';
+    }
+    return 'SkateSpots';
+  }, [requiresFee, spotOwnerData]);
+
+  // Can create listing?
+  const canCreateListing = useMemo(() => {
+    if (!user) return false;
+    // Platform owners can always create listings
+    if (isPlatformOwner) return true;
+    if (!hasNip05) return false;
+    if (remainingListings <= 0) return false;
+    if (cooldownStatus.isInCooldown) return false;
+    return true;
+  }, [user, isPlatformOwner, hasNip05, remainingListings, cooldownStatus.isInCooldown]);
+
+  return {
+    trustLevel,
+    listingLimit,
+    listingsThisMonth,
+    remainingListings,
+    canCreateListing,
+    requiresFee,
+    feeRecipient,
+    feeRecipientName,
+    cooldownEndsAt: cooldownStatus.cooldownEndsAt,
+    isInCooldown: cooldownStatus.isInCooldown,
+    timeUntilCooldownEnds: cooldownStatus.timeUntilCooldownEnds,
+    hasNip05,
+    isPlatformOwner,
+    hasSpotsCreated: (userSpots?.length || 0) > 0,
+    hasListingsCreated: (userListings?.length || 0) > 0,
+    isLoading,
+  };
+}
+
+/**
+ * Record a listing creation for cooldown tracking
+ */
+export function recordListingCreation(
+  setLastListingRecord: (record: LastListingRecord) => void,
+  spotOwnerPubkey?: string
+) {
+  setLastListingRecord({
+    timestamp: Date.now(),
+    spotOwnerPubkey,
+  });
+}
diff --git a/src/src/hooks/useLocalStorage.ts b/src/src/hooks/useLocalStorage.ts
new file mode 100644
index 0000000..73c2959
--- /dev/null
+++ b/src/src/hooks/useLocalStorage.ts
@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Generic hook for managing localStorage state
+ */
+export function useLocalStorage<T>(
+  key: string,
+  defaultValue: T,
+  serializer?: {
+    serialize: (value: T) => string;
+    deserialize: (value: string) => T;
+  }
+) {
+  const serialize = serializer?.serialize || JSON.stringify;
+  const deserialize = serializer?.deserialize || JSON.parse;
+
+  const [state, setState] = useState<T>(() => {
+    try {
+      const item = localStorage.getItem(key);
+      return item ? deserialize(item) : defaultValue;
+    } catch (error) {
+      console.warn(`Failed to load ${key} from localStorage:`, error);
+      return defaultValue;
+    }
+  });
+
+  const setValue = (value: T | ((prev: T) => T)) => {
+    try {
+      const valueToStore = value instanceof Function ? value(state) : value;
+      setState(valueToStore);
+      localStorage.setItem(key, serialize(valueToStore));
+    } catch (error) {
+      console.warn(`Failed to save ${key} to localStorage:`, error);
+    }
+  };
+
+  // Sync with localStorage changes from other tabs
+  useEffect(() => {
+    const handleStorageChange = (e: StorageEvent) => {
+      if (e.key === key && e.newValue !== null) {
+        try {
+          setState(deserialize(e.newValue));
+        } catch (error) {
+          console.warn(`Failed to sync ${key} from localStorage:`, error);
+        }
+      }
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    return () => window.removeEventListener('storage', handleStorageChange);
+  }, [key, deserialize]);
+
+  return [state, setValue] as const;
+}
\ No newline at end of file
diff --git a/src/src/hooks/useLoggedInAccounts.ts b/src/src/hooks/useLoggedInAccounts.ts
new file mode 100644
index 0000000..2a11134
--- /dev/null
+++ b/src/src/hooks/useLoggedInAccounts.ts
@@ -0,0 +1,91 @@
+import { useNostr } from '@nostrify/react';
+import { useNostrLogin } from '@nostrify/react/login';
+import { useQuery } from '@tanstack/react-query';
+import { NSchema as n, NostrEvent, NostrMetadata } from '@nostrify/nostrify';
+
+export interface Account {
+  id: string;
+  pubkey: string;
+  event?: NostrEvent;
+  metadata: NostrMetadata;
+}
+
+// Fallback relays for fetching profile data
+const FALLBACK_RELAYS = [
+  'wss://relay.damus.io',
+  'wss://relay.nostr.band',
+  'wss://nos.lol',
+  'wss://purplepag.es',
+];
+
+export function useLoggedInAccounts() {
+  const { nostr } = useNostr();
+  const { logins, setLogin, removeLogin } = useNostrLogin();
+
+  const { data: authors = [] } = useQuery({
+    queryKey: ['nostr', 'logins', logins.map((l) => l.id).join(';')],
+    queryFn: async ({ signal }) => {
+      if (logins.length === 0) return [];
+
+      // Try primary relays first with longer timeout
+      let events: NostrEvent[] = [];
+      
+      try {
+        events = await nostr.query(
+          [{ kinds: [0], authors: logins.map((l) => l.pubkey) }],
+          { signal: AbortSignal.any([signal, AbortSignal.timeout(5000)]) },
+        );
+      } catch (error) {
+        console.warn('[useLoggedInAccounts] Primary relay query failed, trying fallback relays...');
+      }
+
+      // If no events found, try fallback relays
+      if (events.length === 0) {
+        try {
+          const fallbackGroup = nostr.group(FALLBACK_RELAYS);
+          events = await fallbackGroup.query(
+            [{ kinds: [0], authors: logins.map((l) => l.pubkey) }],
+            { signal: AbortSignal.any([signal, AbortSignal.timeout(8000)]) },
+          );
+          if (events.length > 0) {
+            console.log('[useLoggedInAccounts] Found profile on fallback relays');
+          }
+        } catch (error) {
+          console.warn('[useLoggedInAccounts] Fallback relay query also failed:', error);
+        }
+      }
+
+      return logins.map(({ id, pubkey }): Account => {
+        const event = events.find((e) => e.pubkey === pubkey);
+        try {
+          const metadata = n.json().pipe(n.metadata()).parse(event?.content);
+          return { id, pubkey, metadata, event };
+        } catch {
+          return { id, pubkey, metadata: {}, event };
+        }
+      });
+    },
+    retry: 3,
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
+    staleTime: 30000, // Consider data fresh for 30 seconds
+  });
+
+  // Current user is the first login
+  const currentUser: Account | undefined = (() => {
+    const login = logins[0];
+    if (!login) return undefined;
+    const author = authors.find((a) => a.id === login.id);
+    return { metadata: {}, ...author, id: login.id, pubkey: login.pubkey };
+  })();
+
+  // Other users are all logins except the current one
+  const otherUsers = (authors || []).slice(1) as Account[];
+
+  return {
+    authors,
+    currentUser,
+    otherUsers,
+    setLogin,
+    removeLogin,
+  };
+}
\ No newline at end of file
diff --git a/src/src/hooks/useLoginActions.ts b/src/src/hooks/useLoginActions.ts
new file mode 100644
index 0000000..df5bf2e
--- /dev/null
+++ b/src/src/hooks/useLoginActions.ts
@@ -0,0 +1,69 @@
+import { useNostr } from '@nostrify/react';
+import { NLogin, useNostrLogin } from '@nostrify/react/login';
+import { setAmberLogin, clearAmberLogin, openAmberForLogin } from '@/lib/amber';
+
+// NOTE: This file should not be edited except for adding new login methods.
+
+/** Custom login type for Amber (NIP-55) */
+export interface AmberLoginType {
+  id: string;
+  type: 'amber';
+  pubkey: string;
+  createdAt: number;
+}
+
+export function useLoginActions() {
+  const { nostr } = useNostr();
+  const { logins, addLogin, removeLogin } = useNostrLogin();
+
+  return {
+    // Login with a Nostr secret key
+    nsec(nsec: string): void {
+      const login = NLogin.fromNsec(nsec);
+      addLogin(login);
+    },
+    // Login with a NIP-46 "bunker://" URI
+    async bunker(uri: string): Promise<void> {
+      const login = await NLogin.fromBunker(uri, nostr);
+      addLogin(login);
+    },
+    // Login with a NIP-07 browser extension
+    async extension(): Promise<void> {
+      const login = await NLogin.fromExtension();
+      addLogin(login);
+    },
+    // Login with Amber (NIP-55) - opens Amber app
+    openAmber(): void {
+      openAmberForLogin();
+    },
+    // Complete Amber login after callback
+    amber(pubkey: string): void {
+      // Store in localStorage for persistence
+      setAmberLogin(pubkey);
+      
+      // Create a custom login entry
+      const login: AmberLoginType = {
+        id: `amber_${pubkey}`,
+        type: 'amber',
+        pubkey,
+        createdAt: Date.now(),
+      };
+      
+      // Add to the login system (cast to any since it's a custom type)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      addLogin(login as any);
+    },
+    // Log out the current user
+    async logout(): Promise<void> {
+      const login = logins[0];
+      if (login) {
+        // Clear Amber login from localStorage if it was an Amber login
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if ((login as any).type === 'amber') {
+          clearAmberLogin();
+        }
+        removeLogin(login.id);
+      }
+    }
+  };
+}
diff --git a/src/src/hooks/useMarketplace.ts b/src/src/hooks/useMarketplace.ts
new file mode 100644
index 0000000..21d248c
--- /dev/null
+++ b/src/src/hooks/useMarketplace.ts
@@ -0,0 +1,87 @@
+import { useQuery } from '@tanstack/react-query';
+import { MARKETPLACE_ITEM_KIND, parseMarketplaceItem, type MarketplaceItem } from '@/lib/types';
+import { useSkateRelays } from '@/hooks/useSkateRelays';
+
+export function useMarketplaceItems(limit = 100) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['marketplace-items', limit, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(10000);
+
+      console.log('[useMarketplaceItems] Querying for marketplace items...');
+
+      const events = await querySkateContent(
+        [
+          {
+            kinds: [MARKETPLACE_ITEM_KIND],
+            '#t': ['skateboarding'],
+            limit,
+          },
+        ],
+        { signal }
+      );
+
+      console.log(`[useMarketplaceItems] Received ${events.length} events`);
+
+      const items: MarketplaceItem[] = [];
+      for (const event of events) {
+        const item = parseMarketplaceItem(event);
+        if (item) items.push(item);
+      }
+
+      console.log(`[useMarketplaceItems] Parsed items: ${items.length}`);
+
+      return items.sort((a, b) => b.createdAt - a.createdAt);
+    },
+    staleTime: 30000,
+    refetchOnMount: 'always',
+  });
+}
+
+export function useMarketplaceAtSpot(spotPubkey: string, spotIdentifier: string, limit = 20) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['marketplace-at-spot', spotPubkey, spotIdentifier, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(10000);
+
+      // Build spot reference (naddr format without encoding)
+      const spotRef = `30818:${spotPubkey}:${spotIdentifier}`;
+
+      console.log(`[useMarketplaceAtSpot] Querying for items at spot: ${spotRef}`);
+
+      const events = await querySkateContent(
+        [
+          {
+            kinds: [MARKETPLACE_ITEM_KIND],
+            '#a': [spotRef],
+            '#t': ['skateboarding'],
+            limit,
+          },
+        ],
+        { signal }
+      );
+
+      console.log(`[useMarketplaceAtSpot] Received ${events.length} events`);
+
+      const items: MarketplaceItem[] = [];
+      for (const event of events) {
+        const item = parseMarketplaceItem(event);
+        // Only show items that are active or don't have a status
+        if (item && (!item.status || item.status === 'active')) {
+          items.push(item);
+        }
+      }
+
+      console.log(`[useMarketplaceAtSpot] Parsed active items: ${items.length}`);
+
+      return items.sort((a, b) => b.createdAt - a.createdAt);
+    },
+    enabled: !!spotPubkey && !!spotIdentifier,
+    staleTime: 30000,
+    refetchOnMount: 'always',
+  });
+}
diff --git a/src/src/hooks/useNWC.ts b/src/src/hooks/useNWC.ts
new file mode 100644
index 0000000..43b14c7
--- /dev/null
+++ b/src/src/hooks/useNWC.ts
@@ -0,0 +1,221 @@
+import { useState, useCallback } from 'react';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+import { useToast } from '@/hooks/useToast';
+import { LN } from '@getalby/sdk';
+
+export interface NWCConnection {
+  connectionString: string;
+  alias?: string;
+  isConnected: boolean;
+  client?: LN;
+}
+
+export interface NWCInfo {
+  alias?: string;
+  color?: string;
+  pubkey?: string;
+  network?: string;
+  methods?: string[];
+  notifications?: string[];
+}
+
+export function useNWCInternal() {
+  const { toast } = useToast();
+  const [connections, setConnections] = useLocalStorage<NWCConnection[]>('nwc-connections', []);
+  const [activeConnection, setActiveConnection] = useLocalStorage<string | null>('nwc-active-connection', null);
+  const [connectionInfo, setConnectionInfo] = useState<Record<string, NWCInfo>>({});
+
+  // Add new connection
+  const addConnection = async (uri: string, alias?: string): Promise<boolean> => {
+    const parseNWCUri = (uri: string): { connectionString: string } | null => {
+      try {
+        if (!uri.startsWith('nostr+walletconnect://') && !uri.startsWith('nostrwalletconnect://')) {
+          console.error('Invalid NWC URI protocol:', { protocol: uri.split('://')[0] });
+          return null;
+        }
+        return { connectionString: uri };
+      } catch (error) {
+        console.error('Failed to parse NWC URI:', error);
+        return null;
+      }
+    };
+
+    const parsed = parseNWCUri(uri);
+    if (!parsed) {
+      toast({
+        title: 'Invalid NWC URI',
+        description: 'Please check the connection string and try again.',
+        variant: 'destructive',
+      });
+      return false;
+    }
+
+    const existingConnection = connections.find(c => c.connectionString === parsed.connectionString);
+    if (existingConnection) {
+      toast({
+        title: 'Connection already exists',
+        description: 'This wallet is already connected.',
+        variant: 'destructive',
+      });
+      return false;
+    }
+
+    try {
+      let timeoutId: NodeJS.Timeout | undefined;
+      const testPromise = new Promise((resolve, reject) => {
+        try {
+          const client = new LN(parsed.connectionString);
+          resolve(client);
+        } catch (error) {
+          reject(error);
+        }
+      });
+      const timeoutPromise = new Promise<never>((_, reject) => {
+        timeoutId = setTimeout(() => reject(new Error('Connection test timeout')), 10000);
+      });
+
+      try {
+        await Promise.race([testPromise, timeoutPromise]) as LN;
+        if (timeoutId) clearTimeout(timeoutId);
+      } catch (error) {
+        if (timeoutId) clearTimeout(timeoutId);
+        throw error;
+      }
+
+      const connection: NWCConnection = {
+        connectionString: parsed.connectionString,
+        alias: alias || 'NWC Wallet',
+        isConnected: true,
+      };
+
+      setConnectionInfo(prev => ({
+        ...prev,
+        [parsed.connectionString]: {
+          alias: connection.alias,
+          methods: ['pay_invoice'],
+        },
+      }));
+
+      const newConnections = [...connections, connection];
+      setConnections(newConnections);
+
+      if (connections.length === 0 || !activeConnection)
+        setActiveConnection(parsed.connectionString);
+
+      toast({
+        title: 'Wallet connected',
+        description: `Successfully connected to ${connection.alias}.`,
+      });
+
+      return true;
+    } catch (error) {
+      console.error('NWC connection failed:', error);
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+
+      toast({
+        title: 'Connection failed',
+        description: `Could not connect to the wallet: ${errorMessage}`,
+        variant: 'destructive',
+      });
+      return false;
+    }
+  };
+
+  // Remove connection
+  const removeConnection = (connectionString: string) => {
+    const filtered = connections.filter(c => c.connectionString !== connectionString);
+    setConnections(filtered);
+
+    if (activeConnection === connectionString) {
+      const newActive = filtered.length > 0 ? filtered[0].connectionString : null;
+      setActiveConnection(newActive);
+    }
+
+    setConnectionInfo(prev => {
+      const newInfo = { ...prev };
+      delete newInfo[connectionString];
+      return newInfo;
+    });
+
+    toast({
+      title: 'Wallet disconnected',
+      description: 'The wallet connection has been removed.',
+    });
+  };
+
+  // Get active connection
+  const getActiveConnection = useCallback((): NWCConnection | null => {
+    if (!activeConnection && connections.length > 0) {
+      setActiveConnection(connections[0].connectionString);
+      return connections[0];
+    }
+
+    if (!activeConnection) return null;
+
+    const found = connections.find(c => c.connectionString === activeConnection);
+    return found || null;
+  }, [activeConnection, connections, setActiveConnection]);
+
+  // Send payment using the SDK
+  const sendPayment = useCallback(async (
+    connection: NWCConnection,
+    invoice: string
+  ): Promise<{ preimage: string }> => {
+    if (!connection.connectionString) {
+      throw new Error('Invalid connection: missing connection string');
+    }
+
+    let client: LN;
+    try {
+      client = new LN(connection.connectionString);
+    } catch (error) {
+      console.error('Failed to create NWC client:', error);
+      throw new Error(`Failed to create NWC client: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+
+    try {
+      let timeoutId: NodeJS.Timeout | undefined;
+      const timeoutPromise = new Promise<never>((_, reject) => {
+        timeoutId = setTimeout(() => reject(new Error('Payment timeout after 15 seconds')), 15000);
+      });
+
+      const paymentPromise = client.pay(invoice);
+
+      try {
+        const response = await Promise.race([paymentPromise, timeoutPromise]) as { preimage: string };
+        if (timeoutId) clearTimeout(timeoutId);
+        return response;
+      } catch (error) {
+        if (timeoutId) clearTimeout(timeoutId);
+        throw error;
+      }
+    } catch (error) {
+      console.error('NWC payment failed:', error);
+
+      if (error instanceof Error) {
+        if (error.message.includes('timeout')) {
+          throw new Error('Payment timed out. Please try again.');
+        } else if (error.message.includes('insufficient')) {
+          throw new Error('Insufficient balance in connected wallet.');
+        } else if (error.message.includes('invalid')) {
+          throw new Error('Invalid invoice or connection. Please check your wallet.');
+        } else {
+          throw new Error(`Payment failed: ${error.message}`);
+        }
+      }
+
+      throw new Error('Payment failed with unknown error');
+    }
+  }, []);
+
+  return {
+    connections,
+    activeConnection,
+    connectionInfo,
+    addConnection,
+    removeConnection,
+    setActiveConnection,
+    getActiveConnection,
+    sendPayment,
+  };
+}
\ No newline at end of file
diff --git a/src/src/hooks/useNWCContext.ts b/src/src/hooks/useNWCContext.ts
new file mode 100644
index 0000000..08304dc
--- /dev/null
+++ b/src/src/hooks/useNWCContext.ts
@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import { createContext } from 'react';
+import { useNWCInternal } from '@/hooks/useNWC';
+
+type NWCContextType = ReturnType<typeof useNWCInternal>;
+
+export const NWCContext = createContext<NWCContextType | null>(null);
+
+export function useNWC(): NWCContextType {
+  const context = useContext(NWCContext);
+  if (!context) {
+    throw new Error('useNWC must be used within a NWCProvider');
+  }
+  return context;
+}
\ No newline at end of file
diff --git a/src/src/hooks/useNoGoodRadio.ts b/src/src/hooks/useNoGoodRadio.ts
new file mode 100644
index 0000000..350edf2
--- /dev/null
+++ b/src/src/hooks/useNoGoodRadio.ts
@@ -0,0 +1,41 @@
+import { useQuery } from '@tanstack/react-query';
+
+const NOGOOD_PUBKEY = '55f04590674f3648f4cdc9dc8ce32da2a282074cd0b020596ee033d12d385185';
+
+interface RadioStreamInfo {
+  streamUrl: string;
+  title: string;
+  description: string;
+  status: 'planned' | 'live' | 'ended';
+  image?: string;
+}
+
+/**
+ * Fetch NoGood Radio live stream information
+ *
+ * Note: The actual zap.stream URL format for NoGood's 24/7 stream is not yet determined.
+ * The stream at https://zap.stream/nogood appears to use a different streaming protocol
+ * or requires authentication. For now, using a test stream as placeholder.
+ *
+ * TODO: Investigate zap.stream's streaming protocol and authentication mechanism
+ */
+export function useNoGoodRadio() {
+  return useQuery({
+    queryKey: ['nogood-radio'],
+    queryFn: async () => {
+      console.log('[useNoGoodRadio] Loading NoGood Radio');
+
+      //  Use a working internet radio stream as placeholder
+      // This demonstrates the player functionality while we determine
+      // the correct zap.stream URL format for NoGood's actual stream
+      return {
+        streamUrl: 'https://stream.radioparadise.com/aac-320',
+        title: 'NoGood Radio (Test Stream)',
+        description: '24/7 vibing music - Using test stream while investigating zap.stream format',
+        status: 'live' as const,
+      } as RadioStreamInfo;
+    },
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
+}
diff --git a/src/src/hooks/useNostr.ts b/src/src/hooks/useNostr.ts
new file mode 100644
index 0000000..68db540
--- /dev/null
+++ b/src/src/hooks/useNostr.ts
@@ -0,0 +1,6 @@
+// This file exists because LLMs get confused and try to create this file if it doesn't exist.
+// The `useNostr` hook should be imported directly from `@nostrify/react`, not from this file.
+
+// This file SHOULD NOT be edited or removed.
+
+export { useNostr } from "@nostrify/react";
diff --git a/src/src/hooks/useNostrPublish.ts b/src/src/hooks/useNostrPublish.ts
new file mode 100644
index 0000000..46c20a7
--- /dev/null
+++ b/src/src/hooks/useNostrPublish.ts
@@ -0,0 +1,119 @@
+import { useNostr } from "@nostrify/react";
+import { useMutation, type UseMutationResult } from "@tanstack/react-query";
+
+import { useCurrentUser } from "./useCurrentUser";
+
+import type { NostrEvent } from "@nostrify/nostrify";
+
+/**
+ * Publishes a Nostr event with retry logic and improved error handling
+ */
+export function useNostrPublish(): UseMutationResult<NostrEvent> {
+  const { nostr } = useNostr();
+  const { user } = useCurrentUser();
+
+  return useMutation({
+    mutationFn: async (t: Omit<NostrEvent, 'id' | 'pubkey' | 'sig'>) => {
+      if (!user) {
+        throw new Error("You must be logged in to publish events");
+      }
+
+      console.log('[useNostrPublish] Starting publish for kind:', t.kind);
+
+      const tags = t.tags ?? [];
+
+      // Add the client tag if it doesn't exist
+      if (location.protocol === "https:" && !tags.some(([name]) => name === "client")) {
+        tags.push(["client", location.hostname]);
+      }
+
+      console.log('[useNostrPublish] Tags prepared:', tags.length, 'tags');
+
+      // Sign the event
+      console.log('[useNostrPublish] Signing event...');
+      const event = await user.signer.signEvent({
+        kind: t.kind,
+        content: t.content ?? "",
+        tags,
+        created_at: t.created_at ?? Math.floor(Date.now() / 1000),
+      });
+      console.log('[useNostrPublish] Event signed successfully:', event.id);
+
+      // Publish with retry logic
+      console.log('[useNostrPublish] Publishing to relays...');
+      await publishEventWithRetry(nostr, event);
+      console.log('[useNostrPublish] Publish complete!');
+
+      return event;
+    },
+    onError: (error) => {
+      console.error("Failed to publish event:", error);
+    },
+    onSuccess: (data) => {
+      console.log("Event published successfully:", data);
+    },
+  });
+}
+
+/**
+ * Publishes event with retry logic and partial success handling
+ */
+async function publishEventWithRetry(
+  nostr: any,
+  event: NostrEvent,
+  maxRetries = 1,
+  timeoutMs = 15000
+): Promise<void> {
+  let lastError: Error | null = null;
+
+  // Try publishing with retries
+  for (let attempt = 0; attempt <= maxRetries; attempt++) {
+    try {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+
+      try {
+        // Attempt to publish
+        await nostr.event(event, { signal: controller.signal });
+
+        console.log(`Event published successfully (attempt ${attempt + 1}/${maxRetries + 1})`);
+        return; // Success!
+
+      } finally {
+        clearTimeout(timeoutId);
+      }
+
+    } catch (error) {
+      lastError = error instanceof Error ? error : new Error(String(error));
+      console.warn(`Publish attempt ${attempt + 1} failed:`, lastError.message);
+
+      // If this isn't the last attempt, wait before retrying
+      if (attempt < maxRetries) {
+        const backoffMs = 1000 * Math.pow(2, attempt);
+        console.log(`Retrying in ${backoffMs}ms...`);
+        await new Promise(resolve => setTimeout(resolve, backoffMs));
+      }
+    }
+  }
+
+  // All retries failed
+  if (lastError) {
+    // Provide user-friendly error messages
+    if (lastError.name === 'AbortError' || lastError.message.includes('timeout')) {
+      throw new Error(
+        'Publishing timed out. Your relays may be slow or unreachable. ' +
+        'Try checking your relay connections in Settings > Relays.'
+      );
+    } else if (lastError.message.includes('network') || lastError.message.includes('fetch')) {
+      throw new Error(
+        'Network error while publishing. Please check your internet connection and try again.'
+      );
+    } else {
+      throw new Error(
+        `Failed to publish after ${maxRetries + 1} attempts: ${lastError.message}`
+      );
+    }
+  }
+
+  throw new Error('Failed to publish event to any relay');
+}
\ No newline at end of file
diff --git a/src/src/hooks/useNutzap.ts b/src/src/hooks/useNutzap.ts
new file mode 100644
index 0000000..366f6e9
--- /dev/null
+++ b/src/src/hooks/useNutzap.ts
@@ -0,0 +1,334 @@
+import { useNostr } from '@nostrify/react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useCurrentUser } from './useCurrentUser';
+import { useNostrPublish } from './useNostrPublish';
+import { useCashu } from './wallet/useCashu';
+import { useToast } from './useToast';
+import type { NostrEvent } from '@nostrify/nostrify';
+
+// NIP-61 Kinds
+export const NUTZAP_INFO_KIND = 10019; // User's nutzap receiving preferences
+export const NUTZAP_KIND = 9321; // Nutzap event
+export const NUTZAP_HISTORY_KIND = 7376; // Nutzap redemption history
+
+export interface NutzapInfo {
+  pubkey: string;
+  relays: string[];
+  mints: Array<{ url: string; units: string[] }>;
+  p2pkPubkey?: string;
+}
+
+export interface Nutzap {
+  id: string;
+  pubkey: string; // sender
+  recipientPubkey: string;
+  eventId?: string;
+  mintUrl: string;
+  amount: number;
+  unit: string;
+  comment?: string;
+  proofs: string[];
+  createdAt: number;
+}
+
+// Parse a kind:10019 nutzap info event
+function parseNutzapInfo(event: NostrEvent): NutzapInfo | null {
+  const relays: string[] = [];
+  const mints: Array<{ url: string; units: string[] }> = [];
+  let p2pkPubkey: string | undefined;
+
+  for (const tag of event.tags) {
+    if (tag[0] === 'relay' && tag[1]) {
+      relays.push(tag[1]);
+    } else if (tag[0] === 'mint' && tag[1]) {
+      const units = tag.slice(2);
+      mints.push({ url: tag[1], units: units.length > 0 ? units : ['sat'] });
+    } else if (tag[0] === 'pubkey' && tag[1]) {
+      p2pkPubkey = tag[1];
+    }
+  }
+
+  if (relays.length === 0 && mints.length === 0) {
+    return null;
+  }
+
+  return {
+    pubkey: event.pubkey,
+    relays,
+    mints,
+    p2pkPubkey,
+  };
+}
+
+// Parse a kind:9321 nutzap event
+function parseNutzap(event: NostrEvent): Nutzap | null {
+  const proofs: string[] = [];
+  let mintUrl = '';
+  let unit = 'sat';
+  let recipientPubkey = '';
+  let eventId: string | undefined;
+  let amount = 0;
+
+  for (const tag of event.tags) {
+    if (tag[0] === 'proof' && tag[1]) {
+      proofs.push(tag[1]);
+      // Try to extract amount from proof
+      try {
+        const proof = JSON.parse(tag[1]);
+        if (proof.amount) {
+          amount += proof.amount;
+        }
+      } catch {
+        // Ignore parse errors
+      }
+    } else if (tag[0] === 'u' && tag[1]) {
+      mintUrl = tag[1];
+    } else if (tag[0] === 'unit' && tag[1]) {
+      unit = tag[1];
+    } else if (tag[0] === 'p' && tag[1]) {
+      recipientPubkey = tag[1];
+    } else if (tag[0] === 'e' && tag[1]) {
+      eventId = tag[1];
+    }
+  }
+
+  if (!mintUrl || proofs.length === 0 || !recipientPubkey) {
+    return null;
+  }
+
+  return {
+    id: event.id,
+    pubkey: event.pubkey,
+    recipientPubkey,
+    eventId,
+    mintUrl,
+    amount,
+    unit,
+    comment: event.content || undefined,
+    proofs,
+    createdAt: event.created_at,
+  };
+}
+
+/**
+ * Get a user's nutzap info (kind:10019)
+ */
+export function useNutzapInfo(pubkey: string | undefined) {
+  const { nostr } = useNostr();
+
+  return useQuery({
+    queryKey: ['nutzap-info', pubkey],
+    queryFn: async (c) => {
+      if (!pubkey) return null;
+
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(5000)]);
+      const events = await nostr.query([
+        {
+          kinds: [NUTZAP_INFO_KIND],
+          authors: [pubkey],
+          limit: 1,
+        },
+      ], { signal });
+
+      if (events.length === 0) return null;
+
+      return parseNutzapInfo(events[0]);
+    },
+    enabled: !!pubkey,
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  });
+}
+
+/**
+ * Get nutzaps received by a user or for a specific event
+ */
+export function useNutzaps(params: { pubkey?: string; eventId?: string }) {
+  const { nostr } = useNostr();
+
+  return useQuery({
+    queryKey: ['nutzaps', params.pubkey, params.eventId],
+    queryFn: async (c) => {
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(8000)]);
+      
+      const filters: Parameters<typeof nostr.query>[0] = [];
+      
+      if (params.eventId) {
+        filters.push({
+          kinds: [NUTZAP_KIND],
+          '#e': [params.eventId],
+          limit: 100,
+        });
+      } else if (params.pubkey) {
+        filters.push({
+          kinds: [NUTZAP_KIND],
+          '#p': [params.pubkey],
+          limit: 100,
+        });
+      }
+
+      if (filters.length === 0) return [];
+
+      const events = await nostr.query(filters, { signal });
+
+      const nutzaps: Nutzap[] = [];
+      for (const event of events) {
+        const nutzap = parseNutzap(event);
+        if (nutzap) {
+          nutzaps.push(nutzap);
+        }
+      }
+
+      return nutzaps.sort((a, b) => b.createdAt - a.createdAt);
+    },
+    enabled: !!(params.pubkey || params.eventId),
+    staleTime: 1000 * 30, // 30 seconds
+  });
+}
+
+/**
+ * Check if the current user can receive nutzaps
+ */
+export function useCanReceiveNutzaps() {
+  const { user } = useCurrentUser();
+  const { data: nutzapInfo } = useNutzapInfo(user?.pubkey);
+
+  return {
+    canReceive: !!(nutzapInfo && nutzapInfo.mints.length > 0 && nutzapInfo.p2pkPubkey),
+    nutzapInfo,
+  };
+}
+
+/**
+ * Setup nutzap receiving (publish kind:10019)
+ */
+export function useSetupNutzapReceiving() {
+  const { user } = useCurrentUser();
+  const { mutateAsync: publishEvent } = useNostrPublish();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      mints,
+      relays,
+      p2pkPubkey,
+    }: {
+      mints: Array<{ url: string; units?: string[] }>;
+      relays: string[];
+      p2pkPubkey: string;
+    }) => {
+      if (!user) throw new Error('Must be logged in');
+
+      const tags: string[][] = [];
+
+      // Add relays
+      for (const relay of relays) {
+        tags.push(['relay', relay]);
+      }
+
+      // Add mints with units
+      for (const mint of mints) {
+        const mintTag = ['mint', mint.url, ...(mint.units || ['sat'])];
+        tags.push(mintTag);
+      }
+
+      // Add P2PK pubkey (MUST be different from main Nostr pubkey)
+      tags.push(['pubkey', p2pkPubkey]);
+
+      await publishEvent({
+        kind: NUTZAP_INFO_KIND,
+        content: '',
+        tags,
+      });
+
+      return { mints, relays, p2pkPubkey };
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['nutzap-info'] });
+      toast({
+        title: 'Nutzap receiving enabled',
+        description: 'You can now receive ecash zaps!',
+      });
+    },
+    onError: (error) => {
+      toast({
+        title: 'Setup failed',
+        description: error instanceof Error ? error.message : 'Failed to setup nutzap receiving',
+        variant: 'destructive',
+      });
+    },
+  });
+}
+
+/**
+ * Send a nutzap to someone
+ * Note: This is a simplified implementation. Full implementation would require:
+ * - P2PK locking of tokens
+ * - DLEQ proofs
+ * - Proper token minting/swapping
+ */
+export function useSendNutzap() {
+  const { user } = useCurrentUser();
+  const { mutateAsync: publishEvent } = useNostrPublish();
+  const { coco, repositories } = useCashu();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      recipientPubkey,
+      recipientNutzapInfo,
+      eventId,
+      eventKind,
+      amount,
+      comment,
+    }: {
+      recipientPubkey: string;
+      recipientNutzapInfo: NutzapInfo;
+      eventId?: string;
+      eventKind?: number;
+      amount: number;
+      comment?: string;
+    }) => {
+      if (!user) throw new Error('Must be logged in');
+      if (!coco || !repositories) throw new Error('Cashu wallet not initialized');
+      if (!recipientNutzapInfo.p2pkPubkey) throw new Error('Recipient has no P2PK pubkey configured');
+      if (recipientNutzapInfo.mints.length === 0) throw new Error('Recipient has no mints configured');
+
+      // For now, we'll show a message that full nutzap support is coming
+      // Full implementation would require:
+      // 1. Check if we have tokens on any of recipient's mints
+      // 2. Mint/swap tokens P2PK-locked to recipient's p2pkPubkey
+      // 3. Include DLEQ proofs
+      // 4. Publish kind:9321 event
+
+      throw new Error('Full nutzap sending coming soon! For now, use regular Lightning zaps.');
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['nutzaps'] });
+    },
+    onError: (error) => {
+      toast({
+        title: 'Nutzap failed',
+        description: error instanceof Error ? error.message : 'Failed to send nutzap',
+        variant: 'destructive',
+      });
+    },
+  });
+}
+
+/**
+ * Get total nutzaps received for an event
+ */
+export function useNutzapTotal(eventId: string | undefined) {
+  const { data: nutzaps } = useNutzaps({ eventId });
+
+  if (!nutzaps) {
+    return { count: 0, totalAmount: 0 };
+  }
+
+  return {
+    count: nutzaps.length,
+    totalAmount: nutzaps.reduce((sum, nz) => sum + nz.amount, 0),
+  };
+}
diff --git a/src/src/hooks/useOfflineCache.ts b/src/src/hooks/useOfflineCache.ts
new file mode 100644
index 0000000..04d829a
--- /dev/null
+++ b/src/src/hooks/useOfflineCache.ts
@@ -0,0 +1,249 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  cacheSpot,
+  cacheSpots,
+  getCachedSpot,
+  getAllCachedSpots,
+  getRecentlyViewedSpots,
+  getCacheStats,
+  clearOldCache,
+  clearAllCache,
+  isOffline,
+  onConnectionChange,
+  queuePost,
+  getPendingPosts,
+  getPendingPostsCount,
+  removePendingPost,
+  updatePendingPostStatus,
+} from '@/lib/offlineCache';
+import { useNostrPublish } from './useNostrPublish';
+import { useToast } from './useToast';
+import type { NostrEvent } from '@nostrify/nostrify';
+import type { SkateSpot } from '@/lib/types';
+
+// ============ Connection Status Hook ============
+
+/**
+ * Hook to track online/offline status
+ */
+export function useOnlineStatus() {
+  const [online, setOnline] = useState(!isOffline());
+
+  useEffect(() => {
+    const unsubscribe = onConnectionChange(setOnline);
+    return unsubscribe;
+  }, []);
+
+  return online;
+}
+
+// ============ Spot Caching Hooks ============
+
+/**
+ * Hook to cache a spot when viewing
+ */
+export function useCacheSpotOnView() {
+  return useCallback(async (event: NostrEvent, spot: SkateSpot) => {
+    try {
+      await cacheSpot(event, spot);
+    } catch (error) {
+      console.warn('[OfflineCache] Failed to cache spot:', error);
+    }
+  }, []);
+}
+
+/**
+ * Hook to cache multiple spots (e.g., when loading map)
+ */
+export function useCacheSpotsOnLoad() {
+  return useCallback(async (spotsWithEvents: Array<{ event: NostrEvent; spot: SkateSpot }>) => {
+    try {
+      await cacheSpots(spotsWithEvents);
+    } catch (error) {
+      console.warn('[OfflineCache] Failed to cache spots:', error);
+    }
+  }, []);
+}
+
+/**
+ * Hook to get a cached spot (for offline fallback)
+ */
+export function useCachedSpot(pubkey: string | undefined, identifier: string | undefined) {
+  return useQuery({
+    queryKey: ['cached-spot', pubkey, identifier],
+    queryFn: async () => {
+      if (!pubkey || !identifier) return null;
+      return getCachedSpot(pubkey, identifier);
+    },
+    enabled: !!pubkey && !!identifier,
+    staleTime: Infinity, // Cache never goes stale
+  });
+}
+
+/**
+ * Hook to get all cached spots (for offline browsing)
+ */
+export function useCachedSpots() {
+  return useQuery({
+    queryKey: ['cached-spots'],
+    queryFn: getAllCachedSpots,
+    staleTime: 1000 * 60, // 1 minute
+  });
+}
+
+/**
+ * Hook to get recently viewed spots
+ */
+export function useRecentlyViewedSpots(limit: number = 50) {
+  return useQuery({
+    queryKey: ['recently-viewed-spots', limit],
+    queryFn: () => getRecentlyViewedSpots(limit),
+    staleTime: 1000 * 60,
+  });
+}
+
+/**
+ * Hook to get cache statistics
+ */
+export function useCacheStats() {
+  return useQuery({
+    queryKey: ['cache-stats'],
+    queryFn: getCacheStats,
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  });
+}
+
+/**
+ * Hook to manage cache (clear old/all)
+ */
+export function useCacheManagement() {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+
+  const clearOld = useMutation({
+    mutationFn: async (maxAgeDays: number = 7) => {
+      const maxAgeMs = maxAgeDays * 24 * 60 * 60 * 1000;
+      return clearOldCache(maxAgeMs);
+    },
+    onSuccess: (count) => {
+      queryClient.invalidateQueries({ queryKey: ['cached-spots'] });
+      queryClient.invalidateQueries({ queryKey: ['cache-stats'] });
+      toast({
+        title: 'Cache cleaned',
+        description: `Removed ${count} old spots from cache`,
+      });
+    },
+  });
+
+  const clearAll = useMutation({
+    mutationFn: clearAllCache,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['cached-spots'] });
+      queryClient.invalidateQueries({ queryKey: ['cache-stats'] });
+      toast({
+        title: 'Cache cleared',
+        description: 'All cached spots have been removed',
+      });
+    },
+  });
+
+  return { clearOld, clearAll };
+}
+
+// ============ Pending Posts Hooks ============
+
+/**
+ * Hook to get pending posts count
+ */
+export function usePendingPostsCount() {
+  const isOnline = useOnlineStatus();
+
+  return useQuery({
+    queryKey: ['pending-posts-count'],
+    queryFn: getPendingPostsCount,
+    refetchInterval: isOnline ? 5000 : false, // Only refresh when online
+  });
+}
+
+/**
+ * Hook to sync pending posts when coming back online
+ */
+export function useSyncPendingPosts() {
+  const isOnline = useOnlineStatus();
+  const queryClient = useQueryClient();
+  const { mutateAsync: publishEvent } = useNostrPublish();
+  const { toast } = useToast();
+  const [isSyncing, setIsSyncing] = useState(false);
+
+  // Attempt to sync when coming back online
+  useEffect(() => {
+    if (!isOnline || isSyncing) return;
+
+    const syncPosts = async () => {
+      const pending = await getPendingPosts();
+      if (pending.length === 0) return;
+
+      setIsSyncing(true);
+      let successCount = 0;
+      let failCount = 0;
+
+      for (const post of pending) {
+        try {
+          await updatePendingPostStatus(post.id, 'publishing');
+          await publishEvent({
+            kind: post.kind,
+            content: post.content,
+            tags: post.tags,
+          });
+          await removePendingPost(post.id);
+          successCount++;
+        } catch (error) {
+          console.error('[OfflineSync] Failed to publish post:', error);
+          await updatePendingPostStatus(post.id, 'failed', post.retries + 1);
+          failCount++;
+        }
+      }
+
+      setIsSyncing(false);
+      queryClient.invalidateQueries({ queryKey: ['pending-posts-count'] });
+
+      if (successCount > 0 || failCount > 0) {
+        toast({
+          title: 'Syncing complete',
+          description: successCount > 0
+            ? `Published ${successCount} queued post${successCount > 1 ? 's' : ''}`
+            : `Failed to publish ${failCount} post${failCount > 1 ? 's' : ''}`,
+          variant: failCount > 0 && successCount === 0 ? 'destructive' : 'default',
+        });
+      }
+    };
+
+    // Small delay before syncing to let network stabilize
+    const timeout = setTimeout(syncPosts, 2000);
+    return () => clearTimeout(timeout);
+  }, [isOnline, isSyncing, publishEvent, queryClient, toast]);
+
+  return { isSyncing };
+}
+
+/**
+ * Hook to queue a post for offline publishing
+ */
+export function useQueuePost() {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+
+  return useMutation({
+    mutationFn: async ({ kind, content, tags }: { kind: number; content: string; tags: string[][] }) => {
+      return queuePost(kind, content, tags);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['pending-posts-count'] });
+      toast({
+        title: 'Post queued',
+        description: 'Your post will be published when you\'re back online',
+      });
+    },
+  });
+}
diff --git a/src/src/hooks/usePostComment.ts b/src/src/hooks/usePostComment.ts
new file mode 100644
index 0000000..30fe3eb
--- /dev/null
+++ b/src/src/hooks/usePostComment.ts
@@ -0,0 +1,92 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { NKinds, type NostrEvent } from '@nostrify/nostrify';
+
+interface PostCommentParams {
+  root: NostrEvent | URL; // The root event to comment on
+  reply?: NostrEvent | URL; // Optional reply to another comment
+  content: string;
+}
+
+/** Post a NIP-22 (kind 1111) comment on an event. */
+export function usePostComment() {
+  const { mutateAsync: publishEvent } = useNostrPublish();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ root, reply, content }: PostCommentParams) => {
+      const tags: string[][] = [];
+
+      // d-tag identifiers
+      const dRoot = root instanceof URL ? '' : root.tags.find(([name]) => name === 'd')?.[1] ?? '';
+      const dReply = reply instanceof URL ? '' : reply?.tags.find(([name]) => name === 'd')?.[1] ?? '';
+
+      // Root event tags
+      if (root instanceof URL) {
+        tags.push(['I', root.toString()]);
+      } else if (NKinds.addressable(root.kind)) {
+        tags.push(['A', `${root.kind}:${root.pubkey}:${dRoot}`]);
+      } else if (NKinds.replaceable(root.kind)) {
+        tags.push(['A', `${root.kind}:${root.pubkey}:`]);
+      } else {
+        tags.push(['E', root.id]);
+      }
+      if (root instanceof URL) {
+        tags.push(['K', root.hostname]);
+      } else {
+        tags.push(['K', root.kind.toString()]);
+        tags.push(['P', root.pubkey]);
+      }
+
+      // Reply event tags
+      if (reply) {
+        if (reply instanceof URL) {
+          tags.push(['i', reply.toString()]);
+        } else if (NKinds.addressable(reply.kind)) {
+          tags.push(['a', `${reply.kind}:${reply.pubkey}:${dReply}`]);
+        } else if (NKinds.replaceable(reply.kind)) {
+          tags.push(['a', `${reply.kind}:${reply.pubkey}:`]);
+        } else {
+          tags.push(['e', reply.id]);
+        }
+        if (reply instanceof URL) {
+          tags.push(['k', reply.hostname]);
+        } else {
+          tags.push(['k', reply.kind.toString()]);
+          tags.push(['p', reply.pubkey]);
+        }
+      } else {
+        // If this is a top-level comment, use the root event's tags
+        if (root instanceof URL) {
+          tags.push(['i', root.toString()]);
+        } else if (NKinds.addressable(root.kind)) {
+          tags.push(['a', `${root.kind}:${root.pubkey}:${dRoot}`]);
+        } else if (NKinds.replaceable(root.kind)) {
+          tags.push(['a', `${root.kind}:${root.pubkey}:`]);
+        } else {
+          tags.push(['e', root.id]);
+        }
+        if (root instanceof URL) {
+          tags.push(['k', root.hostname]);
+        } else {
+          tags.push(['k', root.kind.toString()]);
+          tags.push(['p', root.pubkey]);
+        }
+      }
+
+      const event = await publishEvent({
+        kind: 1111,
+        content,
+        tags,
+      });
+
+      return event;
+    },
+    onSuccess: (_, { root }) => {
+      // Invalidate and refetch comments
+      queryClient.invalidateQueries({
+        queryKey: ['comments', root instanceof URL ? root.toString() : root.id]
+      });
+    },
+  });
+}
\ No newline at end of file
diff --git a/src/src/hooks/useQRCodeScanner.ts b/src/src/hooks/useQRCodeScanner.ts
new file mode 100644
index 0000000..1460af1
--- /dev/null
+++ b/src/src/hooks/useQRCodeScanner.ts
@@ -0,0 +1,175 @@
+import { useState, useCallback, useRef } from 'react';
+import { Html5Qrcode } from 'html5-qrcode';
+
+export type QRScanResult = 
+  | { type: 'lightning_invoice'; value: string }
+  | { type: 'lightning_address'; value: string }
+  | { type: 'cashu_token'; value: string }
+  | { type: 'bitcoin_address'; value: string }
+  | { type: 'npub'; value: string }
+  | { type: 'unknown'; value: string };
+
+/**
+ * Classify scanned QR code content
+ */
+export function classifyQRCode(decodedText: string): QRScanResult {
+  const trimmed = decodedText.trim();
+
+  // Lightning invoice: lnbc... or lightning:lnbc...
+  const lightningInvoiceMatch = trimmed.match(/^(?:lightning:)?(lnbc[a-z0-9]+)$/i);
+  if (lightningInvoiceMatch) {
+    return { type: 'lightning_invoice', value: lightningInvoiceMatch[1] };
+  }
+
+  // Lightning address: name@domain.tld or lightning:name@domain.tld
+  const lightningAddressMatch = trimmed.match(/^(?:lightning:)?([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/);
+  if (lightningAddressMatch) {
+    return { type: 'lightning_address', value: lightningAddressMatch[1] };
+  }
+
+  // Cashu token: cashu...
+  if (/^cashu[A-Za-z0-9+/=_-]+$/i.test(trimmed)) {
+    return { type: 'cashu_token', value: trimmed };
+  }
+
+  // Bitcoin address: bc1... or legacy (1..., 3...)
+  if (/^(bc1|3|1)[a-zA-Z0-9]{25,62}$/.test(trimmed)) {
+    return { type: 'bitcoin_address', value: trimmed };
+  }
+
+  // Nostr npub: npub1... or nostr:npub1...
+  const npubMatch = trimmed.match(/^(?:nostr:)?(npub1[a-z0-9]{58})$/);
+  if (npubMatch) {
+    return { type: 'npub', value: npubMatch[1] };
+  }
+
+  return { type: 'unknown', value: trimmed };
+}
+
+export function useQRCodeScanner() {
+  const [isScanning, setIsScanning] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const scannerRef = useRef<Html5Qrcode | null>(null);
+  const isStartingRef = useRef(false);
+  const shouldCancelRef = useRef(false);
+
+  const startScanning = useCallback(async (
+    onResult: (result: QRScanResult) => void
+  ): Promise<void> => {
+    try {
+      isStartingRef.current = true;
+      shouldCancelRef.current = false;
+      setError(null);
+      
+      // Find available cameras
+      const devices = await Html5Qrcode.getCameras();
+      if (devices.length === 0) {
+        throw new Error('No cameras found');
+      }
+
+      if (shouldCancelRef.current) {
+        isStartingRef.current = false;
+        return;
+      }
+
+      // Use rear camera by default, or first available
+      const cameraId = devices.length > 1 
+        ? devices.find(d => 
+            d.label.toLowerCase().includes('back') || 
+            d.label.toLowerCase().includes('rear')
+          )?.id || devices[0].id
+        : devices[0].id;
+
+      // Initialize scanner
+      const scanner = new Html5Qrcode('qr-reader');
+      scannerRef.current = scanner;
+
+      // Start scanning
+      await scanner.start(
+        cameraId,
+        {
+          fps: 10,
+          aspectRatio: 1,
+          qrbox: 250
+        },
+        (decodedText) => {
+          const result = classifyQRCode(decodedText);
+          onResult(result);
+        },
+        (errorMessage) => {
+          // Ignore "QR code not found" errors
+          if (!errorMessage.includes('qr')) {
+            console.debug('QR scan error:', errorMessage);
+          }
+        }
+      );
+
+      isStartingRef.current = false;
+      setIsScanning(true);
+      
+    } catch (err) {
+      isStartingRef.current = false;
+      let errorMessage = 'Failed to start camera';
+      
+      if (err instanceof Error) {
+        errorMessage = err.message;
+      }
+      
+      if (errorMessage.includes('NotAllowedError') || errorMessage.includes('Permission denied')) {
+        errorMessage = 'Camera permission denied. Please allow camera access.';
+      } else if (errorMessage.includes('NotFoundError') || errorMessage.includes('No device')) {
+        errorMessage = 'No camera found. Please connect a camera.';
+      }
+      
+      setError(errorMessage);
+      setIsScanning(false);
+    }
+  }, []);
+
+  const stopScanning = useCallback(async (): Promise<void> => {
+    try {
+      if (isStartingRef.current) {
+        shouldCancelRef.current = true;
+        let attempts = 0;
+        while (isStartingRef.current && attempts < 50) {
+          await new Promise(resolve => setTimeout(resolve, 100));
+          attempts++;
+        }
+      }
+      
+      if (scannerRef.current) {
+        const scanner = scannerRef.current;
+        
+        const state = scanner.getState();
+        if (state === 2) { // SCANNING
+          await scanner.stop();
+        } else if (state === 1) { // STARTING
+          await new Promise(resolve => setTimeout(resolve, 200));
+          if (scanner.getState() === 2) {
+            await scanner.stop();
+          }
+        }
+        
+        await scanner.clear();
+        scannerRef.current = null;
+      }
+      
+      shouldCancelRef.current = false;
+      isStartingRef.current = false;
+      setIsScanning(false);
+      setError(null);
+    } catch (err) {
+      console.error('Error stopping scanner:', err);
+      scannerRef.current = null;
+      setIsScanning(false);
+    }
+  }, []);
+
+  return {
+    isScanning,
+    error,
+    startScanning,
+    stopScanning,
+    classifyQRCode,
+  };
+}
diff --git a/src/src/hooks/useRelatrScore.ts b/src/src/hooks/useRelatrScore.ts
new file mode 100644
index 0000000..5a1e9a8
--- /dev/null
+++ b/src/src/hooks/useRelatrScore.ts
@@ -0,0 +1,243 @@
+import { useQuery } from '@tanstack/react-query';
+import { useNostr } from '@nostrify/react';
+
+/**
+ * Relatr NIP-85 Trust Score Hook
+ * 
+ * Queries Relatr service for global trust scores using NIP-85 (Trusted Assertions).
+ * Relatr publishes trust scores as kind 30382 addressable events.
+ * 
+ * NIP-85 Format:
+ * {
+ *   "kind": 30382,
+ *   "tags": [
+ *     ["d", "<target-pubkey>"],
+ *     ["rank", "85"],  // Trust score 0-100
+ *     ["followers", "1234"],
+ *     // ... other metrics
+ *   ]
+ * }
+ * 
+ * Documentation:
+ * - NIP-85: https://github.com/nostr-protocol/nips/blob/master/85.md
+ * - Relatr: https://www.relatr.xyz/
+ * - GitHub: https://github.com/ContextVM/relatr
+ */
+
+interface RelatrConfig {
+  enabled: boolean;
+  servicePubkey: string; // Relatr service's pubkey publishing trust scores
+  relay: string; // Relay where Relatr publishes assertions
+}
+
+/**
+ * Relatr service configuration
+ * 
+ * ContextVM's official Relatr service publishes trust scores to Nostr relays.
+ * Service pubkey: npub1dvmcpmefwtnn6dctsj3728n64xhrf06p9yude77echmrkgs5zmyqw33jdm
+ * Hex: 6b3780ef2972e73d370b84a3e51e7aa9ae34bf412938dcfbd9c5f63b221416c8
+ * 
+ * Auto-enabled for all logged-in users to provide spam protection and trust scores.
+ */
+const RELATR_CONFIG: RelatrConfig = {
+  enabled: true, // Auto-enabled for all users
+  servicePubkey: '6b3780ef2972e73d370b84a3e51e7aa9ae34bf412938dcfbd9c5f63b221416c8', // ContextVM's Relatr service
+  relay: 'wss://relay.contextvm.org', // ContextVM's relay where Relatr publishes NIP-85 events
+};
+
+export interface RelatrScore {
+  pubkey: string;
+  rank: number; // 0-100 trust score
+  followers?: number;
+  firstCreatedAt?: number;
+  postCount?: number;
+  replyCount?: number;
+  reactionsCount?: number;
+  zapAmountReceived?: number;
+  zapAmountSent?: number;
+  timestamp: number;
+}
+
+/**
+ * Fetch Relatr global trust score for a pubkey using NIP-85
+ * 
+ * @param targetPubkey - The pubkey to get trust score for
+ * @param sourcePubkey - Optional perspective pubkey (most Relatr services use a default source)
+ * @returns RelatrScore or null if unavailable
+ */
+export function useRelatrScore(targetPubkey: string | undefined, sourcePubkey?: string) {
+  const { nostr } = useNostr();
+
+  return useQuery({
+    queryKey: ['relatr-score', targetPubkey, sourcePubkey],
+    queryFn: async (c) => {
+      if (!targetPubkey || !RELATR_CONFIG.enabled || !RELATR_CONFIG.servicePubkey) {
+        return null;
+      }
+
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(5000)]);
+
+      try {
+        // Query NIP-85 Trusted Assertion for this user
+        // Kind 30382 = User trust assertions
+        // d tag = target pubkey
+        const events = await nostr.relay(RELATR_CONFIG.relay).query(
+          [{
+            kinds: [30382],
+            authors: [RELATR_CONFIG.servicePubkey],
+            '#d': [targetPubkey],
+            limit: 1,
+          }],
+          { signal }
+        );
+
+        if (events.length === 0) {
+          console.log(`[Relatr] No trust assertion found for ${targetPubkey.slice(0, 8)}`);
+          return null;
+        }
+
+        const event = events[0];
+        
+        // Parse NIP-85 tags
+        const getRankTag = event.tags.find(([name]) => name === 'rank')?.[1];
+        const rank = getRankTag ? parseInt(getRankTag) : undefined;
+
+        if (rank === undefined) {
+          console.warn(`[Relatr] Assertion found but no rank tag for ${targetPubkey.slice(0, 8)}`);
+          return null;
+        }
+
+        // Parse optional metrics
+        const getTag = (name: string) => event.tags.find(([n]) => n === name)?.[1];
+        const getIntTag = (name: string) => {
+          const value = getTag(name);
+          return value ? parseInt(value) : undefined;
+        };
+
+        const score: RelatrScore = {
+          pubkey: targetPubkey,
+          rank,
+          followers: getIntTag('followers'),
+          firstCreatedAt: getIntTag('first_created_at'),
+          postCount: getIntTag('post_cnt'),
+          replyCount: getIntTag('reply_cnt'),
+          reactionsCount: getIntTag('reactions_cnt'),
+          zapAmountReceived: getIntTag('zap_amt_recd'),
+          zapAmountSent: getIntTag('zap_amt_sent'),
+          timestamp: event.created_at,
+        };
+
+        console.log(`[Relatr] Trust score for ${targetPubkey.slice(0, 8)}: ${rank}`);
+        return score;
+      } catch (error) {
+        console.warn('[Relatr] Error fetching trust score:', error);
+        return null;
+      }
+    },
+    enabled: !!targetPubkey && RELATR_CONFIG.enabled && !!RELATR_CONFIG.servicePubkey,
+    staleTime: 3600000, // Cache for 1 hour
+    gcTime: 86400000, // Keep in cache for 24 hours
+    retry: 1,
+  });
+}
+
+/**
+ * Batch fetch Relatr scores for multiple pubkeys
+ * 
+ * More efficient than individual queries when checking many users.
+ */
+export function useBatchRelatrScores(targetPubkeys: string[]) {
+  const { nostr } = useNostr();
+
+  return useQuery({
+    queryKey: ['batch-relatr-scores', targetPubkeys.sort().join(',')],
+    queryFn: async (c) => {
+      if (!RELATR_CONFIG.enabled || !RELATR_CONFIG.servicePubkey || targetPubkeys.length === 0) {
+        return new Map<string, RelatrScore>();
+      }
+
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(10000)]);
+      const scores = new Map<string, RelatrScore>();
+
+      try {
+        // Query all trust assertions for these pubkeys
+        const events = await nostr.relay(RELATR_CONFIG.relay).query(
+          [{
+            kinds: [30382],
+            authors: [RELATR_CONFIG.servicePubkey],
+            '#d': targetPubkeys,
+            limit: targetPubkeys.length,
+          }],
+          { signal }
+        );
+
+        console.log(`[Relatr] Found ${events.length} trust assertions for ${targetPubkeys.length} pubkeys`);
+
+        // Parse each assertion
+        for (const event of events) {
+          const dTag = event.tags.find(([name]) => name === 'd')?.[1];
+          const rankTag = event.tags.find(([name]) => name === 'rank')?.[1];
+
+          if (!dTag || !rankTag) continue;
+
+          const rank = parseInt(rankTag);
+          const getTag = (name: string) => event.tags.find(([n]) => n === name)?.[1];
+          const getIntTag = (name: string) => {
+            const value = getTag(name);
+            return value ? parseInt(value) : undefined;
+          };
+
+          scores.set(dTag, {
+            pubkey: dTag,
+            rank,
+            followers: getIntTag('followers'),
+            firstCreatedAt: getIntTag('first_created_at'),
+            postCount: getIntTag('post_cnt'),
+            replyCount: getIntTag('reply_cnt'),
+            reactionsCount: getIntTag('reactions_cnt'),
+            zapAmountReceived: getIntTag('zap_amt_recd'),
+            zapAmountSent: getIntTag('zap_amt_sent'),
+            timestamp: event.created_at,
+          });
+        }
+
+        return scores;
+      } catch (error) {
+        console.warn('[Relatr] Error fetching batch trust scores:', error);
+        return new Map<string, RelatrScore>();
+      }
+    },
+    enabled: RELATR_CONFIG.enabled && !!RELATR_CONFIG.servicePubkey && targetPubkeys.length > 0,
+    staleTime: 3600000,
+    gcTime: 86400000,
+    retry: 1,
+  });
+}
+
+/**
+ * Get Relatr configuration
+ */
+export function getRelatrConfig(): RelatrConfig {
+  return { ...RELATR_CONFIG };
+}
+
+/**
+ * Enable Relatr integration
+ * Call this after confirming the service pubkey
+ */
+export function enableRelatr(servicePubkey: string, relay?: string) {
+  RELATR_CONFIG.enabled = true;
+  RELATR_CONFIG.servicePubkey = servicePubkey;
+  if (relay) {
+    RELATR_CONFIG.relay = relay;
+  }
+  console.log('[Relatr] Enabled with service pubkey:', servicePubkey.slice(0, 16) + '...');
+}
+
+/**
+ * Disable Relatr integration
+ */
+export function disableRelatr() {
+  RELATR_CONFIG.enabled = false;
+  console.log('[Relatr] Disabled');
+}
diff --git a/src/src/hooks/useSasquatchGuide.ts b/src/src/hooks/useSasquatchGuide.ts
new file mode 100644
index 0000000..9b75223
--- /dev/null
+++ b/src/src/hooks/useSasquatchGuide.ts
@@ -0,0 +1,195 @@
+import { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import type { GuideMessage } from '@/components/SasquatchGuide';
+
+// Sasquatch's skate jokes - randomly displayed in The Lab
+const LAB_JOKES = [
+  "Why did the skateboarder bring a ladder to The Lab? Because they heard the kickflips were on another level! 🛹😂",
+  "What do you call a sasquatch who can tre flip? A myth! But seriously, these coaches can teach you anything. 🦧",
+  "How do skaters stay cool in summer? They hang out in The Lab where the tricks are always fresh! ❄️",
+  "Why don't sasquatches need coaches? Because we're naturally board! But you humans should check out these pros. 🎓",
+  "What's a skateboarder's favorite type of music? BOARD rock! Get it? ...I'll see myself out. 🎸",
+  "Why did the skateboard go to therapy? It had too many issues with commitment... to grinds! 😅",
+  "I tried to teach a tree to skateboard once. It was great until it got board. Now it just stands there. 🌲",
+  "What's the difference between a bad skater and a pizza? A pizza can feed a family of four. But these coaches can fix that! 🍕",
+  "Why did the skater bring a camera to The Lab? To capture all the moments before they bail! 📸",
+  "How many skaters does it take to change a lightbulb? None - they're too busy trying to ollie over it! 💡"
+];
+
+// Map and spots jokes - mixed with skateboarding humor
+const MAP_JOKES = [
+  "Why did the skate spot go to the doctor? It had too many cracks! 😂 But seriously, report those conditions!",
+  "What do you call a sasquatch who knows every spot? A legend! And now you can be one too by adding spots to the map! 🗺️",
+  "Why did the skater bring a map to the skatepark? They heard the lines were off the charts! 📍",
+  "How do skate shops stay in business? They keep their inventory wheel-y organized! 🛒",
+  "What's a spot's favorite season? FALL... get it? Because that's when most people... nevermind. 🍂",
+  "Why don't spots ever get lonely? Because skaters always drop in! 😎",
+  "I once found a spot so perfect, I thought I was dreaming. Turned out I was just board. 💤",
+  "What do skate shops and sasquatches have in common? We both know where the best grip is! 🦧",
+  "Why did the ledge break up with the handrail? Too much grinding in the relationship! 💔",
+  "How do you make a skate spot laugh? Tell it a crack joke! The spot will split up! 🤣",
+  "What's a skater's favorite type of store? One with good boards, of course! And you can find them all here. 🛹",
+  "Why do sasquatches love maps? Because X marks the spot... and we ALWAYS find it! ❌"
+];
+
+// Get a random joke from a specific category
+function getRandomJoke(jokes: string[]): string {
+  return jokes[Math.floor(Math.random() * jokes.length)];
+}
+
+/**
+ * Sasquatch Guide - Context-aware helper for onboarding and tips
+ * Always visible on home and onboarding pages, can be minimized/expanded at will
+ */
+export function useSasquatchGuide() {
+  const location = useLocation();
+  const { user } = useCurrentUser();
+  const [currentMessage, setCurrentMessage] = useState<GuideMessage | undefined>();
+
+  useEffect(() => {
+    let message: GuideMessage | undefined;
+
+    // Show on home page
+    if (location.pathname === '/') {
+      message = {
+        id: 'welcome',
+        title: 'Welcome to SkateSpots! 🦧',
+        message: "Yo, I'm The Sasquatch. Keeper of boards, trails, and wild rides. Welcome to the untamed skate world on Nostr—no suits, no ads, just skaters carving their own path. Here, you own your tricks, your data, and even earn Bitcoin for leaving your mark. Connect with skaters in your hood or across the globe. No rules but shredding, no footprints but your own.",
+        context: 'home',
+        suggestedQuestions: [
+          'What is Nostr?',
+          'What can I do?',
+          'What are zaps?',
+          'What is Cashu?',
+          'What are trust scores?',
+          'How do relays work?',
+          'Is this free?',
+          'How to login?',
+        ],
+        action: {
+          label: 'Learn More',
+          onClick: () => {
+            window.location.href = '/onboarding';
+          },
+        },
+        enableChat: true,
+      };
+    }
+
+    // Show on onboarding page
+    else if (location.pathname === '/onboarding') {
+      message = {
+        id: 'onboarding',
+        title: 'Getting Started 🚀',
+        message: "Let me help you understand the basics! Nostr is your identity, Bitcoin Lightning lets you earn sats for contributions, and zaps are instant tips. Ask me anything about getting started!",
+        context: 'onboarding',
+        suggestedQuestions: [
+          'How to login?',
+          'What is Nostr?',
+          'How does Nostr work?',
+          'What is Cashu?',
+          'How to use Cashu wallet?',
+          'What are mints?',
+          'What are zaps?',
+          'What is NWC?',
+        ],
+        action: {
+          label: user ? 'Start exploring' : 'Login to begin',
+          onClick: () => {
+            if (user) {
+              window.location.href = '/map';
+            } else {
+              // Scroll to login section
+              const loginSection = document.getElementById('login-section');
+              if (loginSection) {
+                loginSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                // Highlight the section briefly
+                loginSection.classList.add('ring-4', 'ring-red-500/50');
+                setTimeout(() => {
+                  loginSection.classList.remove('ring-4', 'ring-red-500/50');
+                }, 2000);
+              } else {
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+              }
+            }
+          },
+        },
+        enableChat: true,
+      };
+    }
+
+    // Show on The Lab page with random jokes
+    else if (location.pathname === '/lab') {
+      const joke = getRandomJoke(LAB_JOKES);
+      message = {
+        id: 'lab-guide',
+        title: 'Welcome to The Lab! 🎓',
+        message: `This is where the magic happens! Find coaches who can teach you anything from kickflips to darkslides, or connect with filmers to capture your best sessions. Filter by skills, check their experience, and book a session. Remember - everyone started somewhere!\n\n${joke}`,
+        context: 'lab',
+        suggestedQuestions: [
+          'What is The Lab?',
+          'How to find coach?',
+          'How to find filmer?',
+          'How to offer coaching?',
+          'What are skills?',
+          'How much does coaching cost?',
+          'Can I message coaches?',
+          'NIP05 verification?',
+        ],
+        action: user ? undefined : {
+          label: 'Login to Offer Services',
+          onClick: () => {
+            window.location.href = '/onboarding';
+          },
+        },
+        enableChat: true,
+      };
+    }
+
+    // Show on Shops & Spots map page with random jokes
+    else if (location.pathname === '/map') {
+      const joke = getRandomJoke(MAP_JOKES);
+      message = {
+        id: 'map-guide',
+        title: 'Shops & Spots Explorer! 🗺️',
+        message: `Welcome to the global skate database! Use the map to discover spots and shops worldwide, or switch to list view to filter by type. Toggle between Spots (🛹), Shops (🏪), and Gear (🛒) using the buttons. Pro tip: Click anywhere on the map when logged in to add a new spot!\n\n${joke}`,
+        context: 'map',
+        suggestedQuestions: [
+          'How to use map?',
+          'How to add spot?',
+          'What are spots?',
+          'What are shops?',
+          'What is gear swap?',
+          'How to filter spots?',
+          'Weather on map?',
+          'Map vs list view?',
+        ],
+        action: user ? {
+          label: 'Add Your First Spot',
+          onClick: () => {
+            // This will just scroll to show them they can click the map
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          },
+        } : {
+          label: 'Login to Add Spots',
+          onClick: () => {
+            window.location.href = '/onboarding';
+          },
+        },
+        enableChat: true,
+      };
+    }
+
+    setCurrentMessage(message);
+  }, [location.pathname, user]);
+
+  const dismissCurrentMessage = () => {
+    setCurrentMessage(undefined);
+  };
+
+  return {
+    currentMessage,
+    dismissCurrentMessage,
+  };
+}
diff --git a/src/src/hooks/useSellerInfo.ts b/src/src/hooks/useSellerInfo.ts
new file mode 100644
index 0000000..b5b2a52
--- /dev/null
+++ b/src/src/hooks/useSellerInfo.ts
@@ -0,0 +1,161 @@
+import { useNostr } from '@nostrify/react';
+import { useQuery } from '@tanstack/react-query';
+import { MARKETPLACE_ITEM_KIND } from '@/lib/types';
+import { useAppContext } from '@/hooks/useAppContext';
+
+export interface SellerInfo {
+  pubkey: string;
+  accountAge: number; // Days since first event
+  listingCount: number;
+  activeListingCount: number;
+  hasNip05: boolean;
+  nip05?: string;
+  firstSeen?: number; // Unix timestamp of first event
+}
+
+/**
+ * Hook to fetch seller information including account age and listing count.
+ */
+export function useSellerInfo(pubkey: string | undefined) {
+  const { nostr } = useNostr();
+  const { config } = useAppContext();
+
+  const relayUrls = config.relayMetadata.relays
+    .filter(r => r.read)
+    .map(r => r.url)
+    .sort()
+    .join(',');
+
+  return useQuery({
+    queryKey: ['seller-info', pubkey, relayUrls],
+    queryFn: async (c) => {
+      if (!pubkey) return null;
+
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(10000)]);
+
+      try {
+        const readRelays = config.relayMetadata.relays
+          .filter(r => r.read)
+          .map(r => r.url);
+
+        // Query profile (kind 0) and marketplace listings in parallel
+        const profileEventsPromise: Promise<any[]>[] = [];
+        const listingEventsPromise: Promise<any[]>[] = [];
+
+        for (const relayUrl of readRelays) {
+          try {
+            const relay = nostr.relay(relayUrl);
+            
+            profileEventsPromise.push(
+              relay.query(
+                [{ kinds: [0], authors: [pubkey], limit: 1 }],
+                { signal }
+              ).catch(() => [])
+            );
+
+            listingEventsPromise.push(
+              relay.query(
+                [{ 
+                  kinds: [MARKETPLACE_ITEM_KIND], 
+                  authors: [pubkey],
+                  '#t': ['skateboarding'],
+                  limit: 100 
+                }],
+                { signal }
+              ).catch(() => [])
+            );
+          } catch (error) {
+            // Ignore individual relay errors
+          }
+        }
+
+        const [profileResults, listingResults] = await Promise.all([
+          Promise.all(profileEventsPromise),
+          Promise.all(listingEventsPromise),
+        ]);
+
+        // Flatten results
+        const profileEvents = profileResults.flat();
+        const listingEvents = listingResults.flat();
+
+        // Get profile metadata
+        let hasNip05 = false;
+        let nip05: string | undefined;
+        let profileCreatedAt: number | undefined;
+
+        if (profileEvents.length > 0) {
+          const profile = profileEvents.reduce((latest, current) =>
+            current.created_at > latest.created_at ? current : latest
+          );
+          
+          try {
+            const metadata = JSON.parse(profile.content);
+            hasNip05 = !!metadata.nip05;
+            nip05 = metadata.nip05;
+          } catch (e) {
+            // Ignore JSON parse errors
+          }
+          
+          profileCreatedAt = profile.created_at;
+        }
+
+        // Deduplicate listings by d-tag
+        const listingMap = new Map<string, any>();
+        for (const event of listingEvents) {
+          const d = event.tags.find(([name]: [string]) => name === 'd')?.[1];
+          if (d) {
+            const key = `${event.pubkey}:${event.kind}:${d}`;
+            const existing = listingMap.get(key);
+            if (!existing || event.created_at > existing.created_at) {
+              listingMap.set(key, event);
+            }
+          }
+        }
+
+        const uniqueListings = Array.from(listingMap.values());
+        
+        // Count active listings (not expired, status = active)
+        const now = Math.floor(Date.now() / 1000);
+        const activeListings = uniqueListings.filter(event => {
+          const status = event.tags.find(([name]: [string]) => name === 'status')?.[1];
+          const expiration = event.tags.find(([name]: [string]) => name === 'expiration')?.[1];
+          
+          if (status && status !== 'active') return false;
+          if (expiration && parseInt(expiration) < now) return false;
+          
+          return true;
+        });
+
+        // Find oldest event timestamp (approximation of account age)
+        const allTimestamps = [
+          ...uniqueListings.map(e => e.created_at),
+          ...(profileCreatedAt ? [profileCreatedAt] : []),
+        ];
+        
+        const firstSeen = allTimestamps.length > 0 
+          ? Math.min(...allTimestamps)
+          : undefined;
+
+        const accountAge = firstSeen 
+          ? Math.floor((now - firstSeen) / (24 * 60 * 60)) // Days
+          : 0;
+
+        return {
+          pubkey,
+          accountAge,
+          listingCount: uniqueListings.length,
+          activeListingCount: activeListings.length,
+          hasNip05,
+          nip05,
+          firstSeen,
+        } as SellerInfo;
+      } catch (error) {
+        console.warn('[useSellerInfo] Error fetching seller info:', error);
+        return null;
+      }
+    },
+    enabled: !!pubkey,
+    staleTime: 300000, // Cache for 5 minutes
+    gcTime: 600000, // Keep in cache for 10 minutes
+  });
+}
diff --git a/src/src/hooks/useSellerSales.ts b/src/src/hooks/useSellerSales.ts
new file mode 100644
index 0000000..d08f820
--- /dev/null
+++ b/src/src/hooks/useSellerSales.ts
@@ -0,0 +1,149 @@
+import { useQuery } from '@tanstack/react-query';
+import { useNostr } from '@nostrify/react';
+import { useSkateRelays } from '@/hooks/useSkateRelays';
+
+/**
+ * Hook to track completed sales for a seller.
+ * 
+ * Sales are tracked via status changes in marketplace listings (kind 30402).
+ * A "sale" is counted when a listing has status = 'sold'.
+ * 
+ * Future enhancement: Could also track via kind 1111 comments with specific tags
+ * to confirm receipt/completion of sales.
+ */
+export function useSellerSales(pubkey: string | undefined) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['seller-sales', pubkey, getQueryKeySuffix()],
+    queryFn: async () => {
+      if (!pubkey) return { totalSales: 0, recentSales: [] };
+
+      const signal = AbortSignal.timeout(8000);
+
+      try {
+        // Query all marketplace listings by this seller
+        const events = await querySkateContent(
+          [
+            {
+              kinds: [30402], // NIP-99 Classified Listings
+              authors: [pubkey],
+              '#t': ['skateboarding'],
+              limit: 200,
+            },
+          ],
+          { signal }
+        );
+
+        // Deduplicate by d-tag (keep latest version of each listing)
+        const listingMap = new Map<string, typeof events[0]>();
+        for (const event of events) {
+          const d = event.tags.find(([name]) => name === 'd')?.[1];
+          if (d) {
+            const existing = listingMap.get(d);
+            if (!existing || event.created_at > existing.created_at) {
+              listingMap.set(d, event);
+            }
+          }
+        }
+
+        // Count listings with status = 'sold'
+        const allListings = Array.from(listingMap.values());
+        const soldListings = allListings.filter(event => {
+          const status = event.tags.find(([name]) => name === 'status')?.[1];
+          return status === 'sold';
+        });
+
+        // Get recent sales (last 5)
+        const recentSales = soldListings
+          .sort((a, b) => b.created_at - a.created_at)
+          .slice(0, 5)
+          .map(event => ({
+            id: event.id,
+            title: event.tags.find(([name]) => name === 'title')?.[1] || 'Unknown item',
+            soldAt: event.created_at,
+          }));
+
+        return {
+          totalSales: soldListings.length,
+          recentSales,
+        };
+      } catch (error) {
+        console.warn('[useSellerSales] Error:', error);
+        return { totalSales: 0, recentSales: [] };
+      }
+    },
+    enabled: !!pubkey,
+    staleTime: 300000, // 5 minutes
+    gcTime: 600000, // 10 minutes
+  });
+}
+
+/**
+ * Batch hook to get sales for multiple sellers at once
+ */
+export function useBatchSellerSales(pubkeys: string[]) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['batch-seller-sales', pubkeys.sort().join(','), getQueryKeySuffix()],
+    queryFn: async () => {
+      if (pubkeys.length === 0) return new Map<string, number>();
+
+      const signal = AbortSignal.timeout(10000);
+
+      try {
+        // Query listings for all sellers at once
+        const events = await querySkateContent(
+          [
+            {
+              kinds: [30402],
+              authors: pubkeys,
+              '#t': ['skateboarding'],
+              limit: 500,
+            },
+          ],
+          { signal }
+        );
+
+        // Group by pubkey and count sold items
+        const salesByPubkey = new Map<string, number>();
+        
+        // Initialize all pubkeys with 0
+        for (const pk of pubkeys) {
+          salesByPubkey.set(pk, 0);
+        }
+
+        // Deduplicate by pubkey+d-tag (keep latest version of each listing)
+        const listingMap = new Map<string, typeof events[0]>();
+        for (const event of events) {
+          const d = event.tags.find(([name]) => name === 'd')?.[1];
+          if (d) {
+            const key = `${event.pubkey}:${d}`;
+            const existing = listingMap.get(key);
+            if (!existing || event.created_at > existing.created_at) {
+              listingMap.set(key, event);
+            }
+          }
+        }
+
+        // Count sold listings per pubkey
+        for (const event of listingMap.values()) {
+          const status = event.tags.find(([name]) => name === 'status')?.[1];
+          if (status === 'sold') {
+            const current = salesByPubkey.get(event.pubkey) || 0;
+            salesByPubkey.set(event.pubkey, current + 1);
+          }
+        }
+
+        return salesByPubkey;
+      } catch (error) {
+        console.warn('[useBatchSellerSales] Error:', error);
+        return new Map<string, number>();
+      }
+    },
+    enabled: pubkeys.length > 0,
+    staleTime: 300000,
+    gcTime: 600000,
+  });
+}
diff --git a/src/src/hooks/useShops.ts b/src/src/hooks/useShops.ts
new file mode 100644
index 0000000..8b72f72
--- /dev/null
+++ b/src/src/hooks/useShops.ts
@@ -0,0 +1,214 @@
+import { useQuery } from '@tanstack/react-query';
+import { SKATE_SHOP_KIND, SKATE_SPOT_KIND, parseSkateShop, parseSkateSpot, type SkateShop } from '@/lib/types';
+import { useSkateRelays } from '@/hooks/useSkateRelays';
+
+export function useShops(limit = 100) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['skate-shops', limit, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(10000);
+
+      console.log('[useShops] Querying for shops');
+
+      // Query new shop kind (30017)
+      const newShops = await querySkateContent(
+        [
+          {
+            kinds: [SKATE_SHOP_KIND],
+            '#t': ['skateshop'],
+            limit,
+          },
+        ],
+        { signal }
+      );
+      console.log(`[useShops] Received ${newShops.length} new shops (kind 30017)`);
+
+      // Query old shops (kind 30818 with 'shop' type) for backward compatibility
+      const oldShops = await querySkateContent(
+        [
+          {
+            kinds: [SKATE_SPOT_KIND],
+            '#t': ['shop'],
+            limit,
+          },
+        ],
+        { signal }
+      );
+      console.log(`[useShops] Received ${oldShops.length} old shops (kind 30818)`);
+
+      const allEvents = [...newShops, ...oldShops];
+
+      const shops: SkateShop[] = [];
+      for (const event of allEvents) {
+        // Try parsing as new shop (kind 30017)
+        let shop = parseSkateShop(event);
+
+        // If that fails, try parsing as old spot and convert to shop
+        if (!shop && event.kind === SKATE_SPOT_KIND) {
+          const spot = parseSkateSpot(event);
+          if (spot && spot.types.includes('shop')) {
+            // Convert old spot-type shop to new shop format
+            shop = {
+              id: spot.id,
+              pubkey: spot.pubkey,
+              identifier: spot.identifier,
+              name: spot.title,
+              description: spot.description,
+              geohash: spot.geohash,
+              location: spot.location,
+              images: spot.images,
+              phone: undefined,
+              email: undefined,
+              website: undefined,
+              instagram: undefined,
+              hours: undefined,
+              createdAt: spot.createdAt,
+              event: spot.event,
+            };
+          }
+        }
+
+        if (shop) {
+          shops.push(shop);
+        } else {
+          console.warn('[useShops] Failed to parse event:', event);
+        }
+      }
+
+      console.log('[useShops] Parsed shops:', shops.length);
+
+      // Sort by created_at descending
+      return shops.sort((a, b) => b.createdAt - a.createdAt);
+    },
+    staleTime: 30000,
+    gcTime: 300000,
+    refetchOnMount: 'always',
+  });
+}
+
+export function useShop(identifier: string, pubkey?: string) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['skate-shop', identifier, pubkey, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(10000);
+
+      console.log(`[useShop] Querying for shop: ${identifier}`);
+
+      // Query new shop format (kind 30017)
+      const newFilter: {
+        kinds: number[];
+        '#d': string[];
+        authors?: string[];
+        limit: number;
+      } = {
+        kinds: [SKATE_SHOP_KIND],
+        '#d': [identifier],
+        limit: 1,
+      };
+      if (pubkey) newFilter.authors = [pubkey];
+
+      const newShops = await querySkateContent([newFilter], { signal });
+      console.log(`[useShop] Received ${newShops.length} new shops`);
+
+      // Query old shop format (kind 30818 with 'shop' type) for backward compatibility
+      const oldFilter: {
+        kinds: number[];
+        '#d': string[];
+        '#t': string[];
+        authors?: string[];
+        limit: number;
+      } = {
+        kinds: [SKATE_SPOT_KIND],
+        '#d': [identifier],
+        '#t': ['shop'],
+        limit: 1,
+      };
+      if (pubkey) oldFilter.authors = [pubkey];
+
+      const oldShops = await querySkateContent([oldFilter], { signal });
+      console.log(`[useShop] Received ${oldShops.length} old shops`);
+
+      const allEvents = [...newShops, ...oldShops];
+
+      if (allEvents.length === 0) {
+        console.warn(`[useShop] No events found for identifier: ${identifier}`);
+        return null;
+      }
+
+      // If multiple events, take the most recent
+      const mostRecent = allEvents.reduce((latest, current) =>
+        current.created_at > latest.created_at ? current : latest
+      );
+
+      // Try parsing as new shop first
+      let shop = parseSkateShop(mostRecent);
+
+      // If that fails, try parsing as old spot and convert
+      if (!shop && mostRecent.kind === SKATE_SPOT_KIND) {
+        const spot = parseSkateSpot(mostRecent);
+        if (spot && spot.types.includes('shop')) {
+          shop = {
+            id: spot.id,
+            pubkey: spot.pubkey,
+            identifier: spot.identifier,
+            name: spot.title,
+            description: spot.description,
+            geohash: spot.geohash,
+            location: spot.location,
+            images: spot.images,
+            phone: undefined,
+            email: undefined,
+            website: undefined,
+            instagram: undefined,
+            hours: undefined,
+            createdAt: spot.createdAt,
+            event: spot.event,
+          };
+        }
+      }
+
+      return shop;
+    },
+    enabled: !!identifier,
+    staleTime: 30000,
+    refetchOnMount: 'always',
+  });
+}
+
+export function useUserShops(pubkey: string) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['user-skate-shops', pubkey, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(10000);
+
+      const events = await querySkateContent(
+        [
+          {
+            kinds: [SKATE_SHOP_KIND],
+            authors: [pubkey],
+            '#t': ['skateshop'],
+            limit: 50,
+          },
+        ],
+        { signal }
+      );
+
+      const shops: SkateShop[] = [];
+      for (const event of events) {
+        const shop = parseSkateShop(event);
+        if (shop) shops.push(shop);
+      }
+
+      return shops.sort((a, b) => b.createdAt - a.createdAt);
+    },
+    enabled: !!pubkey,
+    staleTime: 30000,
+    refetchOnMount: 'always',
+  });
+}
diff --git a/src/src/hooks/useSkateEvents.ts b/src/src/hooks/useSkateEvents.ts
new file mode 100644
index 0000000..965e78b
--- /dev/null
+++ b/src/src/hooks/useSkateEvents.ts
@@ -0,0 +1,105 @@
+import { useQuery } from '@tanstack/react-query';
+import { CALENDAR_EVENT_KIND, parseSkateEvent, type SkateEvent } from '@/lib/types';
+import { useSkateRelays } from '@/hooks/useSkateRelays';
+
+export function useSkateEvents(limit = 50) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['skate-events', limit, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(10000);
+
+      const events = await querySkateContent(
+        [
+          {
+            kinds: [CALENDAR_EVENT_KIND],
+            '#t': ['skateboarding'],
+            limit,
+          },
+        ],
+        { signal }
+      );
+
+      const skateEvents: SkateEvent[] = [];
+      for (const event of events) {
+        const skateEvent = parseSkateEvent(event);
+        if (skateEvent) skateEvents.push(skateEvent);
+      }
+
+      // Sort by start time
+      return skateEvents.sort((a, b) => a.start - b.start);
+    },
+    staleTime: 60000,
+  });
+}
+
+export function useUpcomingSkateEvents(limit = 20) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+  const now = Math.floor(Date.now() / 1000);
+
+  return useQuery({
+    queryKey: ['upcoming-skate-events', limit, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(10000);
+
+      const events = await querySkateContent(
+        [
+          {
+            kinds: [CALENDAR_EVENT_KIND],
+            '#t': ['skateboarding'],
+            limit: limit * 2, // Fetch more to filter
+          },
+        ],
+        { signal }
+      );
+
+      const skateEvents: SkateEvent[] = [];
+      for (const event of events) {
+        const skateEvent = parseSkateEvent(event);
+        // Only include future events
+        if (skateEvent && skateEvent.start >= now) {
+          skateEvents.push(skateEvent);
+        }
+      }
+
+      // Sort by start time ascending (soonest first)
+      return skateEvents.sort((a, b) => a.start - b.start).slice(0, limit);
+    },
+    staleTime: 60000,
+  });
+}
+
+export function useSkateEvent(identifier: string, pubkey?: string) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['skate-event', identifier, pubkey, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(10000);
+
+      const filter: {
+        kinds: number[];
+        '#d': string[];
+        authors?: string[];
+        limit: number;
+      } = {
+        kinds: [CALENDAR_EVENT_KIND],
+        '#d': [identifier],
+        limit: 1,
+      };
+
+      if (pubkey) {
+        filter.authors = [pubkey];
+      }
+
+      const events = await querySkateContent([filter], { signal });
+
+      if (events.length === 0) return null;
+
+      return parseSkateEvent(events[0]);
+    },
+    enabled: !!identifier,
+    staleTime: 60000,
+  });
+}
diff --git a/src/src/hooks/useSkateRelays.ts b/src/src/hooks/useSkateRelays.ts
new file mode 100644
index 0000000..1ae02ef
--- /dev/null
+++ b/src/src/hooks/useSkateRelays.ts
@@ -0,0 +1,140 @@
+import { useNostr } from '@nostrify/react';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useAppContext } from '@/hooks/useAppContext';
+import { SKATE_RELAY } from '@/lib/types';
+import type { NostrEvent, NostrFilter } from '@nostrify/nostrify';
+
+/**
+ * Hook that provides relay-aware query functions for skate-specific content.
+ * 
+ * Logic:
+ * - Logged out: Always use community relay only (bootstrap)
+ * - Logged in + useSkateRelay=true: Community relay + user relays (default)
+ * - Logged in + useSkateRelay=false: User relays only (opted out)
+ */
+export function useSkateRelays() {
+  const { nostr } = useNostr();
+  const { user } = useCurrentUser();
+  const { config } = useAppContext();
+
+  const isLoggedIn = !!user;
+  const useSkateRelay = config.useSkateRelay ?? true;
+
+  /**
+   * Get the list of relay URLs to query for skate content
+   */
+  const getReadRelays = (): string[] => {
+    // Logged out: always use community relay only
+    if (!isLoggedIn) {
+      return [SKATE_RELAY];
+    }
+
+    // Logged in: check setting
+    const userRelays = config.relayMetadata.relays
+      .filter(r => r.read)
+      .map(r => r.url);
+
+    if (useSkateRelay) {
+      // Include community relay + user relays (deduplicated)
+      const relaySet = new Set([SKATE_RELAY, ...userRelays]);
+      return Array.from(relaySet);
+    } else {
+      // User opted out - only their relays
+      // If they have no relays configured, fall back to community relay
+      return userRelays.length > 0 ? userRelays : [SKATE_RELAY];
+    }
+  };
+
+  /**
+   * Get the list of relay URLs to publish skate content to
+   */
+  const getWriteRelays = (): string[] => {
+    // Logged out shouldn't be publishing, but just in case
+    if (!isLoggedIn) {
+      return [SKATE_RELAY];
+    }
+
+    const userRelays = config.relayMetadata.relays
+      .filter(r => r.write)
+      .map(r => r.url);
+
+    if (useSkateRelay) {
+      // Include community relay + user relays (deduplicated)
+      const relaySet = new Set([SKATE_RELAY, ...userRelays]);
+      return Array.from(relaySet);
+    } else {
+      // User opted out - only their relays
+      // If they have no relays configured, fall back to community relay
+      return userRelays.length > 0 ? userRelays : [SKATE_RELAY];
+    }
+  };
+
+  /**
+   * Query skate content from appropriate relays based on user state/settings.
+   * Automatically handles parallel queries and deduplication for addressable events.
+   */
+  const querySkateContent = async (
+    filters: NostrFilter[],
+    options: { signal: AbortSignal }
+  ): Promise<NostrEvent[]> => {
+    const relays = getReadRelays();
+
+    console.log(`[useSkateRelays] Querying ${relays.length} relay(s):`, relays);
+
+    // Query all relays in parallel
+    const queryPromises = relays.map(async (relayUrl) => {
+      try {
+        const relay = nostr.relay(relayUrl);
+        const events = await relay.query(filters, options);
+        console.log(`[useSkateRelays] ${relayUrl} returned ${events.length} events`);
+        return events;
+      } catch (error) {
+        console.warn(`[useSkateRelays] Failed to query ${relayUrl}:`, error);
+        return [];
+      }
+    });
+
+    const results = await Promise.all(queryPromises);
+    const allEvents = results.flat();
+
+    // Deduplicate addressable events by pubkey+kind+d-tag
+    const eventMap = new Map<string, NostrEvent>();
+    for (const event of allEvents) {
+      const dTag = event.tags.find(([name]) => name === 'd')?.[1];
+      if (dTag) {
+        // Addressable event - dedupe by coordinate
+        const key = `${event.pubkey}:${event.kind}:${dTag}`;
+        const existing = eventMap.get(key);
+        if (!existing || event.created_at > existing.created_at) {
+          eventMap.set(key, event);
+        }
+      } else {
+        // Regular event - dedupe by id
+        eventMap.set(event.id, event);
+      }
+    }
+
+    const uniqueEvents = Array.from(eventMap.values());
+    console.log(`[useSkateRelays] Total unique events: ${uniqueEvents.length}`);
+
+    return uniqueEvents;
+  };
+
+  /**
+   * Generate a stable query key suffix based on relay configuration.
+   * Used to invalidate cache when relay settings change.
+   */
+  const getQueryKeySuffix = (): string => {
+    const relays = getReadRelays();
+    return relays.sort().join(',');
+  };
+
+  return {
+    getReadRelays,
+    getWriteRelays,
+    querySkateContent,
+    getQueryKeySuffix,
+    isLoggedIn,
+    useSkateRelay,
+  };
+}
diff --git a/src/src/hooks/useSkateShops.ts b/src/src/hooks/useSkateShops.ts
new file mode 100644
index 0000000..09b2d66
--- /dev/null
+++ b/src/src/hooks/useSkateShops.ts
@@ -0,0 +1,71 @@
+import { useQuery } from '@tanstack/react-query';
+import { SKATE_SHOP_KIND, parseSkateShop, type SkateShop } from '@/lib/types';
+import { useSkateRelays } from '@/hooks/useSkateRelays';
+
+/**
+ * Hook to fetch skate shops using the skate relay logic
+ */
+export function useSkateShops(limit: number = 100) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery<SkateShop[]>({
+    queryKey: ['skate-shops', limit, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(10000);
+
+      const events = await querySkateContent(
+        [{ 
+          kinds: [SKATE_SHOP_KIND], 
+          '#t': ['skateshop'],
+          limit 
+        }],
+        { signal }
+      );
+
+      // Parse events into SkateShop objects
+      const shops: SkateShop[] = [];
+      for (const event of events) {
+        const shop = parseSkateShop(event);
+        if (shop) shops.push(shop);
+      }
+
+      // Sort by created_at descending
+      return shops.sort((a, b) => b.createdAt - a.createdAt);
+    },
+    staleTime: 60000, // 1 minute
+  });
+}
+
+/**
+ * Hook to fetch a single skate shop by pubkey and identifier
+ */
+export function useSkateShop(pubkey: string | undefined, identifier: string | undefined) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery<SkateShop | null>({
+    queryKey: ['skate-shop', pubkey, identifier, getQueryKeySuffix()],
+    queryFn: async () => {
+      if (!pubkey || !identifier) return null;
+
+      const signal = AbortSignal.timeout(10000);
+
+      const events = await querySkateContent(
+        [{
+          kinds: [SKATE_SHOP_KIND],
+          authors: [pubkey],
+          '#d': [identifier],
+          limit: 1,
+        }],
+        { signal }
+      );
+
+      if (events.length > 0) {
+        return parseSkateShop(events[0]);
+      }
+
+      return null;
+    },
+    enabled: !!pubkey && !!identifier,
+    staleTime: 30000,
+  });
+}
diff --git a/src/src/hooks/useSkateSpots.ts b/src/src/hooks/useSkateSpots.ts
new file mode 100644
index 0000000..cf6f22f
--- /dev/null
+++ b/src/src/hooks/useSkateSpots.ts
@@ -0,0 +1,154 @@
+import { useQuery } from '@tanstack/react-query';
+import { SKATE_SPOT_KIND, parseSkateSpot, type SkateSpot } from '@/lib/types';
+import { useSkateRelays } from '@/hooks/useSkateRelays';
+import { cacheSpots, getAllCachedSpots, isOffline } from '@/lib/offlineCache';
+
+export function useSkateSpots(limit = 100) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['skate-spots', limit, getQueryKeySuffix()],
+    queryFn: async () => {
+      // If offline, return cached spots
+      if (isOffline()) {
+        console.log('[useSkateSpots] Offline, returning cached spots');
+        const cachedSpots = await getAllCachedSpots();
+        return cachedSpots.sort((a, b) => b.createdAt - a.createdAt).slice(0, limit);
+      }
+
+      const signal = AbortSignal.timeout(30000);
+
+      const events = await querySkateContent(
+        [
+          {
+            kinds: [SKATE_SPOT_KIND],
+            '#t': ['skatespot'],
+            limit,
+          },
+        ],
+        { signal }
+      );
+
+      const spots: SkateSpot[] = [];
+      const spotsWithEvents: Array<{ event: typeof events[0]; spot: SkateSpot }> = [];
+      
+      for (const event of events) {
+        const spot = parseSkateSpot(event);
+        if (spot) {
+          spots.push(spot);
+          spotsWithEvents.push({ event, spot });
+        } else {
+          console.warn('[useSkateSpots] Failed to parse event:', event);
+        }
+      }
+
+      console.log('[useSkateSpots] Parsed spots:', spots.length);
+
+      // Cache spots in the background for offline use
+      if (spotsWithEvents.length > 0) {
+        cacheSpots(spotsWithEvents).catch(err => 
+          console.warn('[useSkateSpots] Failed to cache spots:', err)
+        );
+      }
+
+      // Sort by created_at descending
+      return spots.sort((a, b) => b.createdAt - a.createdAt);
+    },
+    staleTime: 30000,
+    gcTime: 300000,
+    refetchOnMount: 'always',
+  });
+}
+
+export function useSkateSpot(identifier: string, pubkey?: string) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['skate-spot', identifier, pubkey, getQueryKeySuffix()],
+    queryFn: async () => {
+      // If offline, try to get from cache first
+      if (isOffline() && pubkey) {
+        console.log('[useSkateSpot] Offline, checking cache');
+        const { getCachedSpot } = await import('@/lib/offlineCache');
+        const cached = await getCachedSpot(pubkey, identifier);
+        if (cached) {
+          console.log('[useSkateSpot] Found in cache:', identifier);
+          return cached;
+        }
+      }
+
+      const signal = AbortSignal.timeout(30000);
+
+      const filter: {
+        kinds: number[];
+        '#d': string[];
+        authors?: string[];
+        limit: number;
+      } = {
+        kinds: [SKATE_SPOT_KIND],
+        '#d': [identifier],
+        limit: 1,
+      };
+
+      if (pubkey) {
+        filter.authors = [pubkey];
+      }
+
+      const events = await querySkateContent([filter], { signal });
+
+      if (events.length === 0) {
+        console.warn(`[useSkateSpot] No events found for identifier: ${identifier}`);
+        return null;
+      }
+
+      const spot = parseSkateSpot(events[0]);
+      
+      // Cache the spot for offline use
+      if (spot) {
+        const { cacheSpot } = await import('@/lib/offlineCache');
+        cacheSpot(events[0], spot).catch(err => 
+          console.warn('[useSkateSpot] Failed to cache spot:', err)
+        );
+      }
+
+      return spot;
+    },
+    enabled: !!identifier,
+    staleTime: 30000,
+    refetchOnMount: 'always',
+  });
+}
+
+export function useUserSkateSpots(pubkey: string) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['user-skate-spots', pubkey, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(30000);
+
+      const events = await querySkateContent(
+        [
+          {
+            kinds: [SKATE_SPOT_KIND],
+            authors: [pubkey],
+            '#t': ['skatespot'],
+            limit: 50,
+          },
+        ],
+        { signal }
+      );
+
+      const spots: SkateSpot[] = [];
+      for (const event of events) {
+        const spot = parseSkateSpot(event);
+        if (spot) spots.push(spot);
+      }
+
+      return spots.sort((a, b) => b.createdAt - a.createdAt);
+    },
+    enabled: !!pubkey,
+    staleTime: 30000,
+    refetchOnMount: 'always',
+  });
+}
diff --git a/src/src/hooks/useSpotCollections.ts b/src/src/hooks/useSpotCollections.ts
new file mode 100644
index 0000000..cbb1438
--- /dev/null
+++ b/src/src/hooks/useSpotCollections.ts
@@ -0,0 +1,372 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { SPOT_COLLECTION_KIND, SKATE_SPOT_KIND, parseSpotCollection, type SpotCollection } from '@/lib/types';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useSkateRelays } from '@/hooks/useSkateRelays';
+
+/**
+ * Fetch all spot collections for a specific user
+ */
+export function useSpotCollections(pubkey?: string) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['spot-collections', pubkey, getQueryKeySuffix()],
+    queryFn: async () => {
+      if (!pubkey) return [];
+
+      const signal = AbortSignal.timeout(10000);
+
+      const events = await querySkateContent(
+        [
+          {
+            kinds: [SPOT_COLLECTION_KIND],
+            authors: [pubkey],
+            '#t': ['skatespots'],
+            limit: 50,
+          },
+        ],
+        { signal }
+      );
+
+      const collections: SpotCollection[] = [];
+      for (const event of events) {
+        const collection = parseSpotCollection(event);
+        if (collection) collections.push(collection);
+      }
+
+      return collections.sort((a, b) => b.createdAt - a.createdAt);
+    },
+    enabled: !!pubkey,
+    staleTime: 30000,
+    refetchOnMount: 'always',
+  });
+}
+
+/**
+ * Fetch the current user's spot collections
+ */
+export function useMySpotCollections() {
+  const { user } = useCurrentUser();
+  return useSpotCollections(user?.pubkey);
+}
+
+/**
+ * Fetch a single spot collection by identifier
+ */
+export function useSpotCollection(identifier: string, pubkey?: string) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['spot-collection', identifier, pubkey, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(10000);
+
+      const filter: {
+        kinds: number[];
+        '#d': string[];
+        '#t': string[];
+        authors?: string[];
+        limit: number;
+      } = {
+        kinds: [SPOT_COLLECTION_KIND],
+        '#d': [identifier],
+        '#t': ['skatespots'],
+        limit: 1,
+      };
+
+      if (pubkey) {
+        filter.authors = [pubkey];
+      }
+
+      const events = await querySkateContent([filter], { signal });
+
+      if (events.length === 0) return null;
+
+      return parseSpotCollection(events[0]);
+    },
+    enabled: !!identifier,
+    staleTime: 30000,
+    refetchOnMount: 'always',
+  });
+}
+
+/**
+ * Create a new spot collection
+ */
+export function useCreateSpotCollection() {
+  const { mutateAsync: publishEvent, isPending } = useNostrPublish();
+  const queryClient = useQueryClient();
+  const { user } = useCurrentUser();
+
+  const createCollection = async ({
+    title,
+    description,
+    image,
+    spotRefs = [],
+  }: {
+    title: string;
+    description?: string;
+    image?: string;
+    spotRefs?: string[];
+  }) => {
+    if (!user) throw new Error('Must be logged in to create a collection');
+
+    // Generate a unique identifier
+    const identifier = `${title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}-${Date.now()}`;
+
+    const tags: string[][] = [
+      ['d', identifier],
+      ['title', title],
+      ['t', 'skatespots'],
+      ['alt', `Spot collection: ${title}`],
+    ];
+
+    if (description) {
+      tags.push(['description', description]);
+    }
+
+    if (image) {
+      tags.push(['image', image]);
+    }
+
+    // Add spot references
+    for (const ref of spotRefs) {
+      tags.push(['a', ref]);
+    }
+
+    const event = await publishEvent({
+      kind: SPOT_COLLECTION_KIND,
+      content: description || '',
+      tags,
+    });
+
+    // Invalidate collections cache
+    queryClient.invalidateQueries({ queryKey: ['spot-collections', user.pubkey] });
+
+    return event;
+  };
+
+  return { createCollection, isPending };
+}
+
+/**
+ * Add a spot to a collection
+ */
+export function useAddSpotToCollection() {
+  const { mutateAsync: publishEvent, isPending } = useNostrPublish();
+  const queryClient = useQueryClient();
+  const { user } = useCurrentUser();
+
+  const addSpotToCollection = async ({
+    collection,
+    spotPubkey,
+    spotIdentifier,
+  }: {
+    collection: SpotCollection;
+    spotPubkey: string;
+    spotIdentifier: string;
+  }) => {
+    if (!user) throw new Error('Must be logged in to modify a collection');
+    if (collection.pubkey !== user.pubkey) throw new Error('You can only modify your own collections');
+
+    const spotRef = `${SKATE_SPOT_KIND}:${spotPubkey}:${spotIdentifier}`;
+
+    // Check if already in collection
+    if (collection.spotRefs.includes(spotRef)) {
+      throw new Error('Spot already in collection');
+    }
+
+    // Build updated tags from original event
+    const tags: string[][] = [
+      ['d', collection.identifier],
+      ['title', collection.title],
+      ['t', 'skatespots'],
+      ['alt', `Spot collection: ${collection.title}`],
+    ];
+
+    if (collection.description) {
+      tags.push(['description', collection.description]);
+    }
+
+    if (collection.image) {
+      tags.push(['image', collection.image]);
+    }
+
+    // Add existing spot refs
+    for (const ref of collection.spotRefs) {
+      tags.push(['a', ref]);
+    }
+
+    // Add new spot ref
+    tags.push(['a', spotRef]);
+
+    const event = await publishEvent({
+      kind: SPOT_COLLECTION_KIND,
+      content: collection.description || '',
+      tags,
+    });
+
+    // Invalidate caches
+    queryClient.invalidateQueries({ queryKey: ['spot-collections', user.pubkey] });
+    queryClient.invalidateQueries({ queryKey: ['spot-collection', collection.identifier] });
+
+    return event;
+  };
+
+  return { addSpotToCollection, isPending };
+}
+
+/**
+ * Remove a spot from a collection
+ */
+export function useRemoveSpotFromCollection() {
+  const { mutateAsync: publishEvent, isPending } = useNostrPublish();
+  const queryClient = useQueryClient();
+  const { user } = useCurrentUser();
+
+  const removeSpotFromCollection = async ({
+    collection,
+    spotPubkey,
+    spotIdentifier,
+  }: {
+    collection: SpotCollection;
+    spotPubkey: string;
+    spotIdentifier: string;
+  }) => {
+    if (!user) throw new Error('Must be logged in to modify a collection');
+    if (collection.pubkey !== user.pubkey) throw new Error('You can only modify your own collections');
+
+    const spotRef = `${SKATE_SPOT_KIND}:${spotPubkey}:${spotIdentifier}`;
+
+    // Filter out the spot to remove
+    const updatedSpotRefs = collection.spotRefs.filter(ref => ref !== spotRef);
+
+    // Build updated tags
+    const tags: string[][] = [
+      ['d', collection.identifier],
+      ['title', collection.title],
+      ['t', 'skatespots'],
+      ['alt', `Spot collection: ${collection.title}`],
+    ];
+
+    if (collection.description) {
+      tags.push(['description', collection.description]);
+    }
+
+    if (collection.image) {
+      tags.push(['image', collection.image]);
+    }
+
+    // Add remaining spot refs
+    for (const ref of updatedSpotRefs) {
+      tags.push(['a', ref]);
+    }
+
+    const event = await publishEvent({
+      kind: SPOT_COLLECTION_KIND,
+      content: collection.description || '',
+      tags,
+    });
+
+    // Invalidate caches
+    queryClient.invalidateQueries({ queryKey: ['spot-collections', user.pubkey] });
+    queryClient.invalidateQueries({ queryKey: ['spot-collection', collection.identifier] });
+
+    return event;
+  };
+
+  return { removeSpotFromCollection, isPending };
+}
+
+/**
+ * Delete a spot collection
+ */
+export function useDeleteSpotCollection() {
+  const { mutateAsync: publishEvent, isPending } = useNostrPublish();
+  const queryClient = useQueryClient();
+  const { user } = useCurrentUser();
+
+  const deleteCollection = async (collection: SpotCollection) => {
+    if (!user) throw new Error('Must be logged in to delete a collection');
+    if (collection.pubkey !== user.pubkey) throw new Error('You can only delete your own collections');
+
+    // Publish deletion event (kind 5)
+    await publishEvent({
+      kind: 5,
+      content: 'Deleted collection',
+      tags: [
+        ['e', collection.id],
+        ['a', `${SPOT_COLLECTION_KIND}:${collection.pubkey}:${collection.identifier}`],
+      ],
+    });
+
+    // Invalidate caches
+    queryClient.invalidateQueries({ queryKey: ['spot-collections', user.pubkey] });
+    queryClient.invalidateQueries({ queryKey: ['spot-collection', collection.identifier] });
+  };
+
+  return { deleteCollection, isPending };
+}
+
+/**
+ * Update a spot collection (title, description, image)
+ */
+export function useUpdateSpotCollection() {
+  const { mutateAsync: publishEvent, isPending } = useNostrPublish();
+  const queryClient = useQueryClient();
+  const { user } = useCurrentUser();
+
+  const updateCollection = async ({
+    collection,
+    title,
+    description,
+    image,
+  }: {
+    collection: SpotCollection;
+    title?: string;
+    description?: string;
+    image?: string;
+  }) => {
+    if (!user) throw new Error('Must be logged in to update a collection');
+    if (collection.pubkey !== user.pubkey) throw new Error('You can only update your own collections');
+
+    const newTitle = title ?? collection.title;
+    const newDescription = description ?? collection.description;
+    const newImage = image ?? collection.image;
+
+    const tags: string[][] = [
+      ['d', collection.identifier],
+      ['title', newTitle],
+      ['t', 'skatespots'],
+      ['alt', `Spot collection: ${newTitle}`],
+    ];
+
+    if (newDescription) {
+      tags.push(['description', newDescription]);
+    }
+
+    if (newImage) {
+      tags.push(['image', newImage]);
+    }
+
+    // Keep existing spot refs
+    for (const ref of collection.spotRefs) {
+      tags.push(['a', ref]);
+    }
+
+    const event = await publishEvent({
+      kind: SPOT_COLLECTION_KIND,
+      content: newDescription || '',
+      tags,
+    });
+
+    // Invalidate caches
+    queryClient.invalidateQueries({ queryKey: ['spot-collections', user.pubkey] });
+    queryClient.invalidateQueries({ queryKey: ['spot-collection', collection.identifier] });
+
+    return event;
+  };
+
+  return { updateCollection, isPending };
+}
diff --git a/src/src/hooks/useSpotContributions.ts b/src/src/hooks/useSpotContributions.ts
new file mode 100644
index 0000000..129527a
--- /dev/null
+++ b/src/src/hooks/useSpotContributions.ts
@@ -0,0 +1,175 @@
+import { useMemo } from 'react';
+import { useNostr } from '@nostrify/react';
+import { useQuery } from '@tanstack/react-query';
+import type { NostrEvent } from '@nostrify/nostrify';
+import { SKATE_SPOT_KIND } from '@/lib/types';
+
+// Kind 1063 = File Metadata (NIP-94) for community photos
+export const PHOTO_CONTRIBUTION_KIND = 1063;
+
+export interface PhotoContribution {
+  id: string;
+  pubkey: string;
+  url: string;
+  mimeType?: string;
+  caption: string;
+  createdAt: number;
+  event: NostrEvent;
+}
+
+export interface TagContribution {
+  id: string;
+  pubkey: string;
+  tags: string[];
+  createdAt: number;
+  event: NostrEvent;
+}
+
+/**
+ * Parse a kind 1063 file metadata event into a PhotoContribution
+ */
+function parsePhotoContribution(event: NostrEvent): PhotoContribution | null {
+  if (event.kind !== PHOTO_CONTRIBUTION_KIND) return null;
+  
+  const url = event.tags.find(([name]) => name === 'url')?.[1];
+  if (!url) return null;
+  
+  const mimeType = event.tags.find(([name]) => name === 'm')?.[1];
+  
+  return {
+    id: event.id,
+    pubkey: event.pubkey,
+    url,
+    mimeType,
+    caption: event.content,
+    createdAt: event.created_at,
+    event,
+  };
+}
+
+/**
+ * Parse a kind 1111 comment event that contains tag suggestions
+ */
+function parseTagContribution(event: NostrEvent): TagContribution | null {
+  if (event.kind !== 1111) return null;
+  
+  // Check if this is a tag contribution (has #skatespot-tags marker)
+  const isTagContribution = event.tags.some(
+    ([name, value]) => name === 't' && value === 'skatespot-tags'
+  );
+  if (!isTagContribution) return null;
+  
+  // Extract suggested tags (all t tags except the marker)
+  const tags = event.tags
+    .filter(([name, value]) => name === 't' && value !== 'skatespot-tags')
+    .map(([, value]) => value)
+    .filter(Boolean) as string[];
+  
+  if (tags.length === 0) return null;
+  
+  return {
+    id: event.id,
+    pubkey: event.pubkey,
+    tags,
+    createdAt: event.created_at,
+    event,
+  };
+}
+
+/**
+ * Hook to fetch community photo contributions for a spot
+ */
+export function useSpotPhotos(spotPubkey: string, spotIdentifier: string) {
+  const { nostr } = useNostr();
+  
+  const spotRef = `${SKATE_SPOT_KIND}:${spotPubkey}:${spotIdentifier}`;
+  
+  return useQuery({
+    queryKey: ['spot-photos', spotPubkey, spotIdentifier],
+    queryFn: async (c) => {
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(5000)]);
+      
+      // Query kind 1063 events that reference this spot via 'a' tag
+      const events = await nostr.query([
+        {
+          kinds: [PHOTO_CONTRIBUTION_KIND],
+          '#a': [spotRef],
+          limit: 50,
+        },
+      ], { signal });
+      
+      return events
+        .map(parsePhotoContribution)
+        .filter((p): p is PhotoContribution => p !== null)
+        .sort((a, b) => b.createdAt - a.createdAt);
+    },
+    enabled: !!spotPubkey && !!spotIdentifier,
+  });
+}
+
+/**
+ * Hook to fetch community tag suggestions for a spot
+ */
+export function useSpotTagSuggestions(spotPubkey: string, spotIdentifier: string) {
+  const { nostr } = useNostr();
+  
+  const spotRef = `${SKATE_SPOT_KIND}:${spotPubkey}:${spotIdentifier}`;
+  
+  return useQuery({
+    queryKey: ['spot-tag-suggestions', spotPubkey, spotIdentifier],
+    queryFn: async (c) => {
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(5000)]);
+      
+      // Query kind 1111 comments that are tag contributions
+      const events = await nostr.query([
+        {
+          kinds: [1111],
+          '#a': [spotRef],
+          '#t': ['skatespot-tags'],
+          limit: 100,
+        },
+      ], { signal });
+      
+      return events
+        .map(parseTagContribution)
+        .filter((t): t is TagContribution => t !== null)
+        .sort((a, b) => b.createdAt - a.createdAt);
+    },
+    enabled: !!spotPubkey && !!spotIdentifier,
+  });
+}
+
+/**
+ * Hook to get aggregated community tags with vote counts
+ */
+export function useAggregatedSpotTags(spotPubkey: string, spotIdentifier: string) {
+  const { data: tagContributions } = useSpotTagSuggestions(spotPubkey, spotIdentifier);
+  
+  return useMemo(() => {
+    if (!tagContributions) return [];
+    
+    // Count how many times each tag was suggested
+    const tagCounts = new Map<string, { count: number; contributors: Set<string> }>();
+    
+    for (const contribution of tagContributions) {
+      for (const tag of contribution.tags) {
+        const existing = tagCounts.get(tag) || { count: 0, contributors: new Set() };
+        // Only count each contributor once per tag
+        if (!existing.contributors.has(contribution.pubkey)) {
+          existing.count++;
+          existing.contributors.add(contribution.pubkey);
+        }
+        tagCounts.set(tag, existing);
+      }
+    }
+    
+    // Convert to array and sort by count
+    return Array.from(tagCounts.entries())
+      .map(([tag, { count, contributors }]) => ({
+        tag,
+        count,
+        contributorCount: contributors.size,
+      }))
+      .sort((a, b) => b.count - a.count);
+  }, [tagContributions]);
+}
diff --git a/src/src/hooks/useSpotServices.ts b/src/src/hooks/useSpotServices.ts
new file mode 100644
index 0000000..b064c7a
--- /dev/null
+++ b/src/src/hooks/useSpotServices.ts
@@ -0,0 +1,69 @@
+import { useQuery } from '@tanstack/react-query';
+import { useNostr } from '@nostrify/react';
+import { 
+  SKATE_COACH_KIND, 
+  SKATE_FILMER_KIND, 
+  SKATE_SPOT_KIND,
+  parseSkateCoach, 
+  parseSkateFilmer,
+  type SkateCoach,
+  type SkateFilmer,
+  SKATE_RELAY,
+} from '@/lib/types';
+
+interface SpotServices {
+  coaches: SkateCoach[];
+  filmers: SkateFilmer[];
+}
+
+/**
+ * Hook to fetch coaches and filmers available at a specific spot
+ */
+export function useSpotServices(spotPubkey?: string, spotIdentifier?: string) {
+  const { nostr } = useNostr();
+
+  return useQuery({
+    queryKey: ['spot-services', spotPubkey, spotIdentifier],
+    queryFn: async (c): Promise<SpotServices> => {
+      if (!spotPubkey || !spotIdentifier) {
+        return { coaches: [], filmers: [] };
+      }
+
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(8000)]);
+      const relay = nostr.relay(SKATE_RELAY);
+      
+      // The spot reference format: "30818:pubkey:identifier"
+      const spotRef = `${SKATE_SPOT_KIND}:${spotPubkey}:${spotIdentifier}`;
+
+      // Query for coaches and filmers that reference this spot
+      const events = await relay.query([
+        {
+          kinds: [SKATE_COACH_KIND, SKATE_FILMER_KIND],
+          '#a': [spotRef],
+          limit: 50,
+        }
+      ], { signal });
+
+      const coaches: SkateCoach[] = [];
+      const filmers: SkateFilmer[] = [];
+
+      for (const event of events) {
+        if (event.kind === SKATE_COACH_KIND) {
+          const coach = parseSkateCoach(event);
+          if (coach) coaches.push(coach);
+        } else if (event.kind === SKATE_FILMER_KIND) {
+          const filmer = parseSkateFilmer(event);
+          if (filmer) filmers.push(filmer);
+        }
+      }
+
+      // Sort by creation date (newest first)
+      coaches.sort((a, b) => b.createdAt - a.createdAt);
+      filmers.sort((a, b) => b.createdAt - a.createdAt);
+
+      return { coaches, filmers };
+    },
+    enabled: !!spotPubkey && !!spotIdentifier,
+    staleTime: 60000,
+  });
+}
diff --git a/src/src/hooks/useSpotWeather.ts b/src/src/hooks/useSpotWeather.ts
new file mode 100644
index 0000000..6413e5d
--- /dev/null
+++ b/src/src/hooks/useSpotWeather.ts
@@ -0,0 +1,111 @@
+import { useQuery } from '@tanstack/react-query';
+import ngeohash from 'ngeohash';
+import {
+  fetchWeather,
+  fetchAirQuality,
+  fetchWeatherForecast,
+  calculateSkateability,
+  type WeatherData,
+  type AirQualityData,
+  type WeatherForecast,
+  type SkateabilityScore,
+} from '@/lib/weather';
+
+export interface SpotWeatherData {
+  weather: WeatherData;
+  airQuality?: AirQualityData;
+  forecast?: WeatherForecast;
+  skateability: SkateabilityScore;
+}
+
+/**
+ * Fetch weather data for a single spot by geohash
+ */
+export function useSpotWeather(geohash: string | undefined, enabled: boolean = true) {
+  return useQuery({
+    queryKey: ['spot-weather', geohash],
+    queryFn: async () => {
+      if (!geohash) throw new Error('Geohash is required');
+
+      const { latitude, longitude } = ngeohash.decode(geohash);
+
+      // Fetch weather and air quality in parallel
+      const [weather, airQuality, forecast] = await Promise.all([
+        fetchWeather(latitude, longitude),
+        fetchAirQuality(latitude, longitude).catch(() => undefined), // Air quality might not be available everywhere
+        fetchWeatherForecast(latitude, longitude).catch(() => undefined),
+      ]);
+
+      const skateability = calculateSkateability(weather, airQuality);
+
+      return {
+        weather,
+        airQuality,
+        forecast,
+        skateability,
+      } as SpotWeatherData;
+    },
+    enabled: enabled && !!geohash,
+    staleTime: 10 * 60 * 1000, // 10 minutes
+    gcTime: 30 * 60 * 1000, // 30 minutes
+  });
+}
+
+/**
+ * Fetch weather data for multiple spots
+ * Returns a map of geohash -> weather data
+ */
+export function useMultipleSpotWeather(geohashes: string[], enabled: boolean = true) {
+  return useQuery({
+    queryKey: ['multiple-spot-weather', geohashes.sort().join(',')],
+    queryFn: async () => {
+      console.log('[useMultipleSpotWeather] Fetching weather for geohashes:', geohashes);
+
+      // Deduplicate geohashes to avoid fetching the same location multiple times
+      const uniqueGeohashes = [...new Set(geohashes)];
+
+      // Fetch weather for all spots in parallel
+      const weatherDataPromises = uniqueGeohashes.map(async (geohash) => {
+        try {
+          const { latitude, longitude } = ngeohash.decode(geohash);
+
+          const [weather, airQuality] = await Promise.all([
+            fetchWeather(latitude, longitude),
+            fetchAirQuality(latitude, longitude).catch(() => undefined),
+          ]);
+
+          const skateability = calculateSkateability(weather, airQuality);
+
+          return {
+            geohash,
+            data: {
+              weather,
+              airQuality,
+              skateability,
+            } as SpotWeatherData,
+          };
+        } catch (error) {
+          console.error(`Failed to fetch weather for ${geohash}:`, error);
+          return null;
+        }
+      });
+
+      const results = await Promise.all(weatherDataPromises);
+
+      // Convert array to map
+      const weatherMap = new Map<string, SpotWeatherData>();
+      results.forEach((result) => {
+        if (result) {
+          weatherMap.set(result.geohash, result.data);
+        }
+      });
+
+      console.log('[useMultipleSpotWeather] Weather data fetched for', weatherMap.size, 'locations');
+      return weatherMap;
+    },
+    enabled: enabled && geohashes.length > 0,
+    staleTime: 10 * 60 * 1000, // 10 minutes
+    gcTime: 30 * 60 * 1000, // 30 minutes
+    retry: 2,
+  });
+}
diff --git a/src/src/hooks/useStash.ts b/src/src/hooks/useStash.ts
new file mode 100644
index 0000000..1109b94
--- /dev/null
+++ b/src/src/hooks/useStash.ts
@@ -0,0 +1,271 @@
+import { useCallback, useMemo } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useNostr } from '@nostrify/react';
+import { useCurrentUser } from './useCurrentUser';
+import { useNostrPublish } from './useNostrPublish';
+
+// Stash item stored in encrypted NIP-51 list
+export interface StashItem {
+  id: string;
+  title: string;
+  category: 'deck' | 'trucks' | 'wheels' | 'bearings' | 'shoes' | 'clothing' | 'protective' | 'complete' | 'other';
+  condition: 'new' | 'like_new' | 'good' | 'well_used';
+  size?: string;
+  brand?: string;
+  description?: string;
+  minPrice?: number; // Minimum sats willing to accept
+  maxPrice?: number; // Maximum sats willing to pay (for WTB)
+  images?: string[];
+  willingToTrade?: boolean;
+  willingToSell?: boolean;
+  addedAt: number;
+  // Visibility settings
+  visibility: 'private' | 'friends' | 'public';
+  // Optional geohash for local matching
+  geohash?: string;
+  // Item type: regular stash item or Want To Buy
+  itemType?: 'stash' | 'wtb';
+  // Rarity override (for special items)
+  rarity?: 'common' | 'uncommon' | 'rare' | 'epic' | 'legendary';
+}
+
+export interface Stash {
+  items: StashItem[];
+  updatedAt: number;
+}
+
+// Kind 30001 is NIP-51 "Follow sets" - we use a private encrypted list
+const STASH_KIND = 30001;
+const STASH_D_TAG = 'skatespots-stash';
+
+/**
+ * Hook to manage user's private gear stash
+ * Uses NIP-44 encryption to store items privately
+ */
+export function useStash() {
+  const { nostr } = useNostr();
+  const { user } = useCurrentUser();
+  const queryClient = useQueryClient();
+  const { mutateAsync: createEvent } = useNostrPublish();
+
+  // Fetch and decrypt stash
+  const { data: stash, isLoading, error } = useQuery({
+    queryKey: ['stash', user?.pubkey],
+    queryFn: async ({ signal }): Promise<Stash> => {
+      if (!user?.pubkey || !user.signer?.nip44) {
+        return { items: [], updatedAt: 0 };
+      }
+
+      const combinedSignal = AbortSignal.any([signal, AbortSignal.timeout(10000)]);
+
+      // Fetch the encrypted stash event
+      const events = await nostr.query([{
+        kinds: [STASH_KIND],
+        authors: [user.pubkey],
+        '#d': [STASH_D_TAG],
+        limit: 1,
+      }], { signal: combinedSignal });
+
+      if (events.length === 0) {
+        return { items: [], updatedAt: 0 };
+      }
+
+      const event = events[0];
+
+      try {
+        // Decrypt the content (encrypted to self)
+        const decrypted = await user.signer.nip44.decrypt(user.pubkey, event.content);
+        const stashData = JSON.parse(decrypted) as Stash;
+        return stashData;
+      } catch (err) {
+        console.error('[Stash] Failed to decrypt stash:', err);
+        return { items: [], updatedAt: 0 };
+      }
+    },
+    enabled: !!user?.pubkey && !!user.signer?.nip44,
+    staleTime: 60000, // 1 minute
+  });
+
+  // Save stash (encrypt and publish)
+  const saveStash = useCallback(async (newStash: Stash) => {
+    if (!user?.pubkey || !user.signer?.nip44) {
+      throw new Error('Encryption not available');
+    }
+
+    // Encrypt to self
+    const encrypted = await user.signer.nip44.encrypt(user.pubkey, JSON.stringify(newStash));
+
+    // Publish as replaceable event
+    await createEvent({
+      kind: STASH_KIND,
+      content: encrypted,
+      tags: [
+        ['d', STASH_D_TAG],
+        ['alt', 'Private gear stash (encrypted)'],
+      ],
+    });
+
+    // Invalidate cache
+    queryClient.invalidateQueries({ queryKey: ['stash', user.pubkey] });
+  }, [user, createEvent, queryClient]);
+
+  // Add item mutation
+  const addItem = useMutation({
+    mutationFn: async (item: Omit<StashItem, 'id' | 'addedAt'>) => {
+      const currentStash = stash || { items: [], updatedAt: 0 };
+      const newItem: StashItem = {
+        ...item,
+        id: crypto.randomUUID(),
+        addedAt: Math.floor(Date.now() / 1000),
+      };
+
+      const newStash: Stash = {
+        items: [...currentStash.items, newItem],
+        updatedAt: Math.floor(Date.now() / 1000),
+      };
+
+      await saveStash(newStash);
+      return newItem;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['stash', user?.pubkey] });
+    },
+  });
+
+  // Update item mutation
+  const updateItem = useMutation({
+    mutationFn: async (item: StashItem) => {
+      const currentStash = stash || { items: [], updatedAt: 0 };
+      const newStash: Stash = {
+        items: currentStash.items.map(i => i.id === item.id ? item : i),
+        updatedAt: Math.floor(Date.now() / 1000),
+      };
+
+      await saveStash(newStash);
+      return item;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['stash', user?.pubkey] });
+    },
+  });
+
+  // Remove item mutation
+  const removeItem = useMutation({
+    mutationFn: async (itemId: string) => {
+      const currentStash = stash || { items: [], updatedAt: 0 };
+      const newStash: Stash = {
+        items: currentStash.items.filter(i => i.id !== itemId),
+        updatedAt: Math.floor(Date.now() / 1000),
+      };
+
+      await saveStash(newStash);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['stash', user?.pubkey] });
+    },
+  });
+
+  // Stats for RPG display
+  const stats = useMemo(() => {
+    if (!stash) return { total: 0, byCategory: {}, totalValue: 0 };
+
+    const byCategory: Record<string, number> = {};
+    let totalValue = 0;
+
+    for (const item of stash.items) {
+      byCategory[item.category] = (byCategory[item.category] || 0) + 1;
+      if (item.minPrice) totalValue += item.minPrice;
+    }
+
+    return {
+      total: stash.items.length,
+      byCategory,
+      totalValue,
+    };
+  }, [stash]);
+
+  return {
+    stash,
+    items: stash?.items || [],
+    stats,
+    isLoading,
+    error,
+    addItem,
+    updateItem,
+    removeItem,
+    isEncryptionAvailable: !!user?.signer?.nip44,
+  };
+}
+
+// Category metadata for RPG display
+export const STASH_CATEGORIES = {
+  deck: { emoji: '🛹', label: 'Decks', color: '#ff0040', rarity: 'common' },
+  trucks: { emoji: '🔧', label: 'Trucks', color: '#ff6600', rarity: 'common' },
+  wheels: { emoji: '⚙️', label: 'Wheels', color: '#ccff00', rarity: 'common' },
+  bearings: { emoji: '🔩', label: 'Bearings', color: '#00ff88', rarity: 'uncommon' },
+  shoes: { emoji: '👟', label: 'Shoes', color: '#00ccff', rarity: 'uncommon' },
+  clothing: { emoji: '👕', label: 'Clothing', color: '#9933ff', rarity: 'common' },
+  protective: { emoji: '🛡️', label: 'Protective', color: '#ff33cc', rarity: 'rare' },
+  complete: { emoji: '🎯', label: 'Completes', color: '#ffd700', rarity: 'epic' },
+  other: { emoji: '📦', label: 'Other', color: '#888888', rarity: 'common' },
+} as const;
+
+export const CONDITION_LABELS = {
+  new: { label: '🆕 New', color: '#00ff00', stars: 5 },
+  like_new: { label: '✨ Like New', color: '#ccff00', stars: 4 },
+  good: { label: '👍 Good', color: '#ffcc00', stars: 3 },
+  well_used: { label: '⚠️ Well Used', color: '#ff6600', stars: 2 },
+} as const;
+
+// RPG-style rarity tiers with multipliers for XP
+export const RARITY_TIERS = {
+  common: { label: 'Common', color: '#9ca3af', xpMultiplier: 1, bgGradient: 'from-gray-500/20 to-gray-600/20' },
+  uncommon: { label: 'Uncommon', color: '#22c55e', xpMultiplier: 1.5, bgGradient: 'from-green-500/20 to-emerald-600/20' },
+  rare: { label: 'Rare', color: '#3b82f6', xpMultiplier: 2, bgGradient: 'from-blue-500/20 to-indigo-600/20' },
+  epic: { label: 'Epic', color: '#a855f7', xpMultiplier: 3, bgGradient: 'from-purple-500/20 to-violet-600/20' },
+  legendary: { label: 'Legendary', color: '#fbbf24', xpMultiplier: 5, bgGradient: 'from-yellow-400/20 to-orange-500/20' },
+} as const;
+
+// Calculate player level based on total items and value
+export function calculateSkaterLevel(stats: { total: number; totalValue: number; byCategory: Record<string, number> }): {
+  level: number;
+  currentXP: number;
+  xpToNextLevel: number;
+  title: string;
+  progress: number;
+} {
+  // XP formula: 100 per item + value/100
+  const xp = stats.total * 100 + Math.floor(stats.totalValue / 100);
+  
+  // Level formula: sqrt(xp/100)
+  const level = Math.max(1, Math.floor(Math.sqrt(xp / 100)));
+  
+  const xpForCurrentLevel = level * level * 100;
+  const xpForNextLevel = (level + 1) * (level + 1) * 100;
+  
+  const currentXP = xp - xpForCurrentLevel;
+  const xpToNextLevel = xpForNextLevel - xpForCurrentLevel;
+  const progress = Math.min(100, (currentXP / xpToNextLevel) * 100);
+  
+  // Titles based on level
+  const titles: Record<number, string> = {
+    1: 'Grom',
+    2: 'Pusher',
+    3: 'Street Rat',
+    5: 'Park Local',
+    8: 'Session Regular',
+    12: 'Spot Hunter',
+    15: 'Gear Head',
+    20: 'Skate Collector',
+    25: 'Board Hoarder',
+    30: 'Stash Master',
+    50: 'Legendary Collector',
+  };
+  
+  let title = 'Grom';
+  for (const [lvl, t] of Object.entries(titles)) {
+    if (level >= parseInt(lvl)) title = t;
+  }
+  
+  return { level, currentXP, xpToNextLevel, title, progress };
+}
diff --git a/src/src/hooks/useTheme.ts b/src/src/hooks/useTheme.ts
new file mode 100644
index 0000000..24f7a5d
--- /dev/null
+++ b/src/src/hooks/useTheme.ts
@@ -0,0 +1,20 @@
+import { type Theme } from "@/contexts/AppContext";
+import { useAppContext } from "@/hooks/useAppContext";
+
+/**
+ * Hook to get and set the active theme
+ * @returns Theme context with theme and setTheme
+ */
+export function useTheme(): { theme: Theme; setTheme: (theme: Theme) => void } {
+  const { config, updateConfig } = useAppContext();
+
+  return {
+    theme: config.theme,
+    setTheme: (theme: Theme) => {
+      updateConfig((currentConfig) => ({
+        ...currentConfig,
+        theme,
+      }));
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/src/hooks/useToast.ts b/src/src/hooks/useToast.ts
new file mode 100644
index 0000000..62cc2e2
--- /dev/null
+++ b/src/src/hooks/useToast.ts
@@ -0,0 +1,182 @@
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type Action =
+  | {
+      type: "ADD_TOAST";
+      toast: ToasterToast
+    }
+  | {
+      type: "UPDATE_TOAST";
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: "DISMISS_TOAST";
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: "REMOVE_TOAST";
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/src/src/hooks/useTours.ts b/src/src/hooks/useTours.ts
new file mode 100644
index 0000000..ed1307c
--- /dev/null
+++ b/src/src/hooks/useTours.ts
@@ -0,0 +1,123 @@
+import { useQuery } from '@tanstack/react-query';
+import { SKATE_TOUR_KIND, parseSkateTour, type SkateTour } from '@/lib/types';
+import { useSkateRelays } from '@/hooks/useSkateRelays';
+
+export function useTours(limit = 100) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['skate-tours', limit, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(10000);
+
+      console.log('[useTours] Querying for tours');
+
+      const events = await querySkateContent(
+        [
+          {
+            kinds: [SKATE_TOUR_KIND],
+            '#t': ['skate-tour'],
+            limit,
+          },
+        ],
+        { signal }
+      );
+
+      console.log(`[useTours] Received ${events.length} events`);
+
+      const tours: SkateTour[] = [];
+      for (const event of events) {
+        const tour = parseSkateTour(event);
+        if (tour) {
+          tours.push(tour);
+        } else {
+          console.warn('[useTours] Failed to parse event:', event);
+        }
+      }
+
+      console.log('[useTours] Parsed tours:', tours.length);
+
+      // Sort by created_at descending
+      return tours.sort((a, b) => b.createdAt - a.createdAt);
+    },
+    staleTime: 30000,
+    gcTime: 300000,
+    refetchOnMount: 'always',
+  });
+}
+
+export function useTour(identifier: string, pubkey?: string) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['skate-tour', identifier, pubkey, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(10000);
+
+      const filter: {
+        kinds: number[];
+        '#d': string[];
+        authors?: string[];
+        limit: number;
+      } = {
+        kinds: [SKATE_TOUR_KIND],
+        '#d': [identifier],
+        limit: 1,
+      };
+
+      if (pubkey) {
+        filter.authors = [pubkey];
+      }
+
+      console.log(`[useTour] Querying for tour: ${identifier}`);
+
+      const events = await querySkateContent([filter], { signal });
+
+      console.log(`[useTour] Received ${events.length} events`);
+
+      if (events.length === 0) {
+        console.warn(`[useTour] No events found for identifier: ${identifier}`);
+        return null;
+      }
+
+      return parseSkateTour(events[0]);
+    },
+    enabled: !!identifier,
+    staleTime: 30000,
+    refetchOnMount: 'always',
+  });
+}
+
+export function useUserTours(pubkey: string) {
+  const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
+
+  return useQuery({
+    queryKey: ['user-skate-tours', pubkey, getQueryKeySuffix()],
+    queryFn: async () => {
+      const signal = AbortSignal.timeout(10000);
+
+      const events = await querySkateContent(
+        [
+          {
+            kinds: [SKATE_TOUR_KIND],
+            authors: [pubkey],
+            '#t': ['skate-tour'],
+            limit: 50,
+          },
+        ],
+        { signal }
+      );
+
+      const tours: SkateTour[] = [];
+      for (const event of events) {
+        const tour = parseSkateTour(event);
+        if (tour) tours.push(tour);
+      }
+
+      return tours.sort((a, b) => b.createdAt - a.createdAt);
+    },
+    enabled: !!pubkey,
+    staleTime: 30000,
+    refetchOnMount: 'always',
+  });
+}
diff --git a/src/src/hooks/useTrustScore.ts b/src/src/hooks/useTrustScore.ts
new file mode 100644
index 0000000..a26e826
--- /dev/null
+++ b/src/src/hooks/useTrustScore.ts
@@ -0,0 +1,143 @@
+import { useQuery } from '@tanstack/react-query';
+import { useNostr } from '@nostrify/react';
+import { useCurrentUser } from './useCurrentUser';
+
+/**
+ * Hook to calculate trust score for a Nostr pubkey using Web of Trust (WoT).
+ * 
+ * Trust scores are calculated using social graph analysis:
+ * - 100: Self (viewing your own content)
+ * - 90: Direct follow (you follow them)
+ * - 60: Friend-of-friend (you follow someone who follows them)
+ * - 30: Has NIP-05 verification
+ * - 0: No connection or verification
+ * 
+ * @param targetPubkey - The pubkey to calculate trust score for
+ * @returns Trust score (0-100) or undefined if not available
+ */
+export function useTrustScore(targetPubkey: string | undefined) {
+  const { nostr } = useNostr();
+  const { user } = useCurrentUser();
+
+  return useQuery({
+    queryKey: ['trust-score', targetPubkey, user?.pubkey],
+    queryFn: async (c) => {
+      if (!targetPubkey) return undefined;
+      
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(5000)]);
+
+      try {
+        // Self score = 100
+        if (user?.pubkey && targetPubkey === user.pubkey) {
+          return 100;
+        }
+
+        // Get user's follow list (kind 3)
+        const sourcePubkey = user?.pubkey || '20e7c953439e66f3882ab96fe0faa8ba246d6fb12c03b0cb4e2dc4623b8bcb21';
+        
+        const followListEvents = await nostr.query(
+          [{ kinds: [3], authors: [sourcePubkey], limit: 1 }],
+          { signal }
+        );
+
+        const followList = followListEvents[0];
+        if (!followList) {
+          console.warn('[useTrustScore] No follow list found for source pubkey');
+          return 0;
+        }
+
+        // Extract followed pubkeys from tags
+        const following = new Set(
+          followList.tags
+            .filter(([tag]) => tag === 'p')
+            .map(([, pubkey]) => pubkey)
+        );
+
+        // Direct follow = 90
+        if (following.has(targetPubkey)) {
+          console.log(`[useTrustScore] ${targetPubkey.slice(0, 8)} is directly followed: 90`);
+          return 90;
+        }
+
+        // Check friend-of-friend (2 hops)
+        const friendsFollowLists = await nostr.query(
+          [{ kinds: [3], authors: Array.from(following), limit: 100 }],
+          { signal }
+        );
+
+        for (const friendList of friendsFollowLists) {
+          const friendFollowing = friendList.tags
+            .filter(([tag]) => tag === 'p')
+            .map(([, pubkey]) => pubkey);
+          
+          if (friendFollowing.includes(targetPubkey)) {
+            console.log(`[useTrustScore] ${targetPubkey.slice(0, 8)} is friend-of-friend: 60`);
+            return 60;
+          }
+        }
+
+        // Check if they have NIP-05 verification (basic credibility)
+        const profileEvents = await nostr.query(
+          [{ kinds: [0], authors: [targetPubkey], limit: 1 }],
+          { signal }
+        );
+
+        if (profileEvents[0]) {
+          try {
+            const metadata = JSON.parse(profileEvents[0].content);
+            if (metadata.nip05) {
+              console.log(`[useTrustScore] ${targetPubkey.slice(0, 8)} has NIP-05: 30`);
+              return 30;
+            }
+          } catch (e) {
+            // Ignore JSON parse errors
+          }
+        }
+
+        // No trust signals found
+        console.log(`[useTrustScore] ${targetPubkey.slice(0, 8)} has no trust signals: 0`);
+        return 0;
+      } catch (error) {
+        console.warn('[useTrustScore] Error calculating trust score:', error);
+        return undefined;
+      }
+    },
+    enabled: !!targetPubkey,
+    staleTime: 3600000, // Cache for 1 hour (trust scores change slowly)
+    gcTime: 86400000, // Keep in cache for 24 hours
+    retry: 1, // Only retry once on failure
+  });
+}
+
+/**
+ * Get trust badge configuration based on trust score
+ */
+export function getTrustBadgeConfig(score: number | undefined) {
+  if (score === undefined || score < 50) {
+    return {
+      show: false,
+      variant: 'outline' as const,
+      className: 'border-gray-500 text-gray-500',
+      label: 'UNVERIFIED',
+      icon: null,
+    };
+  }
+
+  if (score < 80) {
+    return {
+      show: true,
+      variant: 'outline' as const,
+      className: 'border-yellow-500 text-yellow-500',
+      label: 'TRUSTED',
+      icon: 'shield',
+    };
+  }
+
+  return {
+    show: true,
+    variant: 'default' as const,
+    className: 'bg-green-500 text-white',
+    label: 'VERIFIED',
+    icon: 'check',
+  };
+}
diff --git a/src/src/hooks/useUploadFile.ts b/src/src/hooks/useUploadFile.ts
new file mode 100644
index 0000000..a3c9793
--- /dev/null
+++ b/src/src/hooks/useUploadFile.ts
@@ -0,0 +1,26 @@
+import { useMutation } from "@tanstack/react-query";
+import { BlossomUploader } from '@nostrify/nostrify/uploaders';
+
+import { useCurrentUser } from "./useCurrentUser";
+
+export function useUploadFile() {
+  const { user } = useCurrentUser();
+
+  return useMutation({
+    mutationFn: async (file: File) => {
+      if (!user) {
+        throw new Error('Must be logged in to upload files');
+      }
+
+      const uploader = new BlossomUploader({
+        servers: [
+          'https://blossom.primal.net/',
+        ],
+        signer: user.signer,
+      });
+
+      const tags = await uploader.upload(file);
+      return tags;
+    },
+  });
+}
\ No newline at end of file
diff --git a/src/src/hooks/useUserStatus.ts b/src/src/hooks/useUserStatus.ts
new file mode 100644
index 0000000..4088f8d
--- /dev/null
+++ b/src/src/hooks/useUserStatus.ts
@@ -0,0 +1,293 @@
+import { useNostr } from '@nostrify/react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useCurrentUser } from './useCurrentUser';
+import { useNostrPublish } from './useNostrPublish';
+import type { NostrEvent } from '@nostrify/nostrify';
+
+// NIP-38 User Status Kind
+export const USER_STATUS_KIND = 30315;
+
+// Skating status presets with emojis
+export const SKATING_STATUSES = [
+  { id: 'skating', label: 'Skating', emoji: '🛹', description: 'Currently skating' },
+  { id: 'filming', label: 'Filming', emoji: '🎬', description: 'Filming tricks' },
+  { id: 'looking-for-sesh', label: 'Looking for Sesh', emoji: '👀', description: 'Want to skate with others' },
+  { id: 'coaching', label: 'Coaching', emoji: '🎓', description: 'Teaching/coaching' },
+  { id: 'chilling', label: 'Chilling', emoji: '😎', description: 'Hanging out at the spot' },
+  { id: 'driving-to-spot', label: 'On My Way', emoji: '🚗', description: 'Heading to a spot' },
+  { id: 'taking-a-break', label: 'Taking a Break', emoji: '🧃', description: 'Resting/hydrating' },
+  { id: 'done-for-today', label: 'Done for Today', emoji: '🌙', description: 'Finished skating' },
+] as const;
+
+export type SkatingStatusId = typeof SKATING_STATUSES[number]['id'];
+
+export interface UserStatus {
+  pubkey: string;
+  status: string;
+  statusId?: SkatingStatusId;
+  emoji?: string;
+  linkedSpot?: {
+    pubkey: string;
+    identifier: string;
+    title?: string;
+  };
+  expiration?: number;
+  createdAt: number;
+}
+
+// Parse a NIP-38 status event into our format
+function parseStatusEvent(event: NostrEvent): UserStatus | null {
+  const dTag = event.tags.find(([name]) => name === 'd')?.[1];
+  if (dTag !== 'general') return null; // Only handle general statuses for now
+
+  const status = event.content;
+  if (!status) return null;
+
+  // Find linked spot (a tag)
+  const aTag = event.tags.find(([name]) => name === 'a')?.[1];
+  let linkedSpot: UserStatus['linkedSpot'] | undefined;
+  if (aTag) {
+    const parts = aTag.split(':');
+    if (parts.length >= 3 && parts[0] === '30818') {
+      linkedSpot = {
+        pubkey: parts[1],
+        identifier: parts[2],
+      };
+    }
+  }
+
+  // Find expiration
+  const expirationTag = event.tags.find(([name]) => name === 'expiration')?.[1];
+  const expiration = expirationTag ? parseInt(expirationTag, 10) : undefined;
+
+  // Check if expired
+  if (expiration && expiration < Math.floor(Date.now() / 1000)) {
+    return null;
+  }
+
+  // Try to match to a skating status preset
+  const matchedStatus = SKATING_STATUSES.find(s => 
+    status.toLowerCase().includes(s.label.toLowerCase()) ||
+    status.includes(s.emoji)
+  );
+
+  return {
+    pubkey: event.pubkey,
+    status,
+    statusId: matchedStatus?.id,
+    emoji: matchedStatus?.emoji,
+    linkedSpot,
+    expiration,
+    createdAt: event.created_at,
+  };
+}
+
+// Hook to get a user's current status
+export function useUserStatus(pubkey: string | undefined) {
+  const { nostr } = useNostr();
+
+  return useQuery({
+    queryKey: ['user-status', pubkey],
+    queryFn: async (c) => {
+      if (!pubkey) return null;
+
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(5000)]);
+      const events = await nostr.query([
+        {
+          kinds: [USER_STATUS_KIND],
+          authors: [pubkey],
+          '#d': ['general'],
+          limit: 1,
+        },
+      ], { signal });
+
+      if (events.length === 0) return null;
+
+      return parseStatusEvent(events[0]);
+    },
+    enabled: !!pubkey,
+    staleTime: 1000 * 60, // 1 minute
+    refetchInterval: 1000 * 60 * 2, // Refetch every 2 minutes
+  });
+}
+
+// Hook to get statuses for multiple users
+export function useBatchUserStatuses(pubkeys: string[]) {
+  const { nostr } = useNostr();
+
+  return useQuery({
+    queryKey: ['batch-user-statuses', pubkeys.join(',')],
+    queryFn: async (c) => {
+      if (pubkeys.length === 0) return new Map<string, UserStatus>();
+
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(8000)]);
+      const events = await nostr.query([
+        {
+          kinds: [USER_STATUS_KIND],
+          authors: pubkeys,
+          '#d': ['general'],
+        },
+      ], { signal });
+
+      const statusMap = new Map<string, UserStatus>();
+      
+      // Group by pubkey and get most recent
+      const latestByPubkey = new Map<string, NostrEvent>();
+      for (const event of events) {
+        const existing = latestByPubkey.get(event.pubkey);
+        if (!existing || event.created_at > existing.created_at) {
+          latestByPubkey.set(event.pubkey, event);
+        }
+      }
+
+      for (const event of latestByPubkey.values()) {
+        const status = parseStatusEvent(event);
+        if (status) {
+          statusMap.set(event.pubkey, status);
+        }
+      }
+
+      return statusMap;
+    },
+    enabled: pubkeys.length > 0,
+    staleTime: 1000 * 60,
+    refetchInterval: 1000 * 60 * 2,
+  });
+}
+
+// Hook to get users skating at a specific spot
+export function useWhosSkatingAtSpot(spotPubkey: string, spotIdentifier: string) {
+  const { nostr } = useNostr();
+
+  return useQuery({
+    queryKey: ['whos-skating', spotPubkey, spotIdentifier],
+    queryFn: async (c) => {
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(8000)]);
+      const spotRef = `30818:${spotPubkey}:${spotIdentifier}`;
+      
+      // Query statuses that reference this spot
+      const events = await nostr.query([
+        {
+          kinds: [USER_STATUS_KIND],
+          '#a': [spotRef],
+          '#d': ['general'],
+          limit: 50,
+        },
+      ], { signal });
+
+      const now = Math.floor(Date.now() / 1000);
+      const statuses: UserStatus[] = [];
+      const seenPubkeys = new Set<string>();
+
+      // Sort by created_at descending to get most recent first
+      const sortedEvents = events.sort((a, b) => b.created_at - a.created_at);
+
+      for (const event of sortedEvents) {
+        if (seenPubkeys.has(event.pubkey)) continue;
+        
+        const status = parseStatusEvent(event);
+        if (status) {
+          // Only include if not expired and created within last 4 hours
+          if (!status.expiration || status.expiration > now) {
+            if (now - status.createdAt < 4 * 60 * 60) {
+              statuses.push(status);
+              seenPubkeys.add(event.pubkey);
+            }
+          }
+        }
+      }
+
+      return statuses;
+    },
+    staleTime: 1000 * 30, // 30 seconds
+    refetchInterval: 1000 * 60, // 1 minute
+  });
+}
+
+// Hook to set current user's status
+export function useSetUserStatus() {
+  const { user } = useCurrentUser();
+  const { mutateAsync: publishEvent } = useNostrPublish();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      statusId,
+      customStatus,
+      linkedSpot,
+      expirationMinutes,
+    }: {
+      statusId?: SkatingStatusId;
+      customStatus?: string;
+      linkedSpot?: { pubkey: string; identifier: string };
+      expirationMinutes?: number;
+    }) => {
+      if (!user) throw new Error('Must be logged in');
+
+      // Build status content
+      let content = '';
+      if (statusId) {
+        const preset = SKATING_STATUSES.find(s => s.id === statusId);
+        if (preset) {
+          content = `${preset.emoji} ${preset.label}`;
+        }
+      }
+      if (customStatus) {
+        content = customStatus;
+      }
+
+      // Build tags
+      const tags: string[][] = [
+        ['d', 'general'], // Required for NIP-38
+      ];
+
+      // Add spot reference if provided
+      if (linkedSpot) {
+        tags.push(['a', `30818:${linkedSpot.pubkey}:${linkedSpot.identifier}`]);
+      }
+
+      // Add expiration if provided
+      if (expirationMinutes && expirationMinutes > 0) {
+        const expiration = Math.floor(Date.now() / 1000) + expirationMinutes * 60;
+        tags.push(['expiration', expiration.toString()]);
+      }
+
+      await publishEvent({
+        kind: USER_STATUS_KIND,
+        content,
+        tags,
+      });
+
+      return { content, linkedSpot };
+    },
+    onSuccess: () => {
+      // Invalidate status queries
+      queryClient.invalidateQueries({ queryKey: ['user-status'] });
+      queryClient.invalidateQueries({ queryKey: ['whos-skating'] });
+    },
+  });
+}
+
+// Hook to clear current user's status
+export function useClearUserStatus() {
+  const { user } = useCurrentUser();
+  const { mutateAsync: publishEvent } = useNostrPublish();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async () => {
+      if (!user) throw new Error('Must be logged in');
+
+      // Publish empty status to clear
+      await publishEvent({
+        kind: USER_STATUS_KIND,
+        content: '',
+        tags: [['d', 'general']],
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['user-status'] });
+      queryClient.invalidateQueries({ queryKey: ['whos-skating'] });
+    },
+  });
+}
diff --git a/src/src/hooks/useWallet.ts b/src/src/hooks/useWallet.ts
new file mode 100644
index 0000000..524d354
--- /dev/null
+++ b/src/src/hooks/useWallet.ts
@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+import { useNWC } from '@/hooks/useNWCContext';
+import type { WebLNProvider } from '@webbtc/webln-types';
+
+export interface WalletStatus {
+  hasNWC: boolean;
+  webln: WebLNProvider | null;
+  activeNWC: ReturnType<typeof useNWC>['getActiveConnection'] extends () => infer T ? T : null;
+  preferredMethod: 'nwc' | 'webln' | 'manual';
+}
+
+export function useWallet() {
+  const { connections, getActiveConnection } = useNWC();
+
+  // Get the active connection directly - no memoization to avoid stale state
+  const activeNWC = getActiveConnection();
+
+  // Access WebLN directly from browser global scope (Bitcoin Connect sets this)
+  const webln = (globalThis as { webln?: WebLNProvider }).webln || null;
+
+  // Calculate status values reactively
+  const hasNWC = useMemo(() => {
+    return connections.length > 0 && connections.some(c => c.isConnected);
+  }, [connections]);
+
+  // Determine preferred payment method
+  const preferredMethod: WalletStatus['preferredMethod'] = activeNWC
+    ? 'nwc'
+    : webln
+    ? 'webln'
+    : 'manual';
+
+  const status: WalletStatus = {
+    hasNWC,
+    webln,
+    activeNWC,
+    preferredMethod,
+  };
+
+  return status;
+}
\ No newline at end of file
diff --git a/src/src/hooks/useZaps.ts b/src/src/hooks/useZaps.ts
new file mode 100644
index 0000000..ec16d45
--- /dev/null
+++ b/src/src/hooks/useZaps.ts
@@ -0,0 +1,350 @@
+import { useState, useMemo, useEffect, useCallback } from 'react';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useAppContext } from '@/hooks/useAppContext';
+import { useToast } from '@/hooks/useToast';
+import { useNWC } from '@/hooks/useNWCContext';
+import type { NWCConnection } from '@/hooks/useNWC';
+import { nip57 } from 'nostr-tools';
+import type { Event } from 'nostr-tools';
+import type { WebLNProvider } from '@webbtc/webln-types';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useNostr } from '@nostrify/react';
+import type { NostrEvent } from '@nostrify/nostrify';
+
+export function useZaps(
+  target: Event | Event[],
+  webln: WebLNProvider | null,
+  _nwcConnection: NWCConnection | null,
+  onZapSuccess?: () => void
+) {
+  const { nostr } = useNostr();
+  const { toast } = useToast();
+  const { user } = useCurrentUser();
+  const { config } = useAppContext();
+  const queryClient = useQueryClient();
+
+  // Handle the case where an empty array is passed (from ZapButton when external data is provided)
+  const actualTarget = Array.isArray(target) ? (target.length > 0 ? target[0] : null) : target;
+
+  const author = useAuthor(actualTarget?.pubkey);
+  const { sendPayment, getActiveConnection } = useNWC();
+  const [isZapping, setIsZapping] = useState(false);
+  const [invoice, setInvoice] = useState<string | null>(null);
+
+  // Cleanup state when component unmounts
+  useEffect(() => {
+    return () => {
+      setIsZapping(false);
+      setInvoice(null);
+    };
+  }, []);
+
+  const { data: zapEvents, ...query } = useQuery<NostrEvent[], Error>({
+    queryKey: ['zaps', actualTarget?.id],
+    staleTime: 30000, // 30 seconds
+    refetchInterval: (query) => {
+      // Only refetch if the query is currently being observed (component is mounted)
+      return query.getObserversCount() > 0 ? 60000 : false;
+    },
+    queryFn: async (c) => {
+      if (!actualTarget) return [];
+
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(5000)]);
+
+      // Query for zap receipts for this specific event
+      if (actualTarget.kind >= 30000 && actualTarget.kind < 40000) {
+        // Addressable event
+        const identifier = actualTarget.tags.find((t) => t[0] === 'd')?.[1] || '';
+        const events = await nostr.query([{
+          kinds: [9735],
+          '#a': [`${actualTarget.kind}:${actualTarget.pubkey}:${identifier}`],
+        }], { signal });
+        return events;
+      } else {
+        // Regular event
+        const events = await nostr.query([{
+          kinds: [9735],
+          '#e': [actualTarget.id],
+        }], { signal });
+        return events;
+      }
+    },
+    enabled: !!actualTarget?.id,
+  });
+
+  // Process zap events into simple counts and totals
+  const { zapCount, totalSats, zaps } = useMemo(() => {
+    if (!zapEvents || !Array.isArray(zapEvents) || !actualTarget) {
+      return { zapCount: 0, totalSats: 0, zaps: [] };
+    }
+
+    let count = 0;
+    let sats = 0;
+
+    zapEvents.forEach(zap => {
+      count++;
+
+      // Try multiple methods to extract the amount:
+
+      // Method 1: amount tag (from zap request, sometimes copied to receipt)
+      const amountTag = zap.tags.find(([name]) => name === 'amount')?.[1];
+      if (amountTag) {
+        const millisats = parseInt(amountTag);
+        sats += Math.floor(millisats / 1000);
+        return;
+      }
+
+      // Method 2: Extract from bolt11 invoice
+      const bolt11Tag = zap.tags.find(([name]) => name === 'bolt11')?.[1];
+      if (bolt11Tag) {
+        try {
+          const invoiceSats = nip57.getSatoshisAmountFromBolt11(bolt11Tag);
+          sats += invoiceSats;
+          return;
+        } catch (error) {
+          console.warn('Failed to parse bolt11 amount:', error);
+        }
+      }
+
+      // Method 3: Parse from description (zap request JSON)
+      const descriptionTag = zap.tags.find(([name]) => name === 'description')?.[1];
+      if (descriptionTag) {
+        try {
+          const zapRequest = JSON.parse(descriptionTag);
+          const requestAmountTag = zapRequest.tags?.find(([name]: string[]) => name === 'amount')?.[1];
+          if (requestAmountTag) {
+            const millisats = parseInt(requestAmountTag);
+            sats += Math.floor(millisats / 1000);
+            return;
+          }
+        } catch (error) {
+          console.warn('Failed to parse description JSON:', error);
+        }
+      }
+
+      console.warn('Could not extract amount from zap receipt:', zap.id);
+    });
+
+
+    return { zapCount: count, totalSats: sats, zaps: zapEvents };
+  }, [zapEvents, actualTarget]);
+
+  const zap = async (amount: number, comment: string) => {
+    if (amount <= 0) {
+      return;
+    }
+
+    setIsZapping(true);
+    setInvoice(null); // Clear any previous invoice at the start
+
+    if (!user) {
+      toast({
+        title: 'Login required',
+        description: 'You must be logged in to send a zap.',
+        variant: 'destructive',
+      });
+      setIsZapping(false);
+      return;
+    }
+
+    if (!actualTarget) {
+      toast({
+        title: 'Event not found',
+        description: 'Could not find the event to zap.',
+        variant: 'destructive',
+      });
+      setIsZapping(false);
+      return;
+    }
+
+    try {
+      if (!author.data || !author.data?.metadata || !author.data?.event ) {
+        toast({
+          title: 'Author not found',
+          description: 'Could not find the author of this item.',
+          variant: 'destructive',
+        });
+        setIsZapping(false);
+        return;
+      }
+
+      const { lud06, lud16 } = author.data.metadata;
+      if (!lud06 && !lud16) {
+        toast({
+          title: 'Lightning address not found',
+          description: 'The author does not have a lightning address configured.',
+          variant: 'destructive',
+        });
+        setIsZapping(false);
+        return;
+      }
+
+      // Get zap endpoint using the old reliable method
+      const zapEndpoint = await nip57.getZapEndpoint(author.data.event);
+      if (!zapEndpoint) {
+        toast({
+          title: 'Zap endpoint not found',
+          description: 'Could not find a zap endpoint for the author.',
+          variant: 'destructive',
+        });
+        setIsZapping(false);
+        return;
+      }
+
+      // Create zap request - use appropriate event format based on kind
+      // For addressable events (30000-39999), pass the object to get 'a' tag
+      // For all other events, pass the ID string to get 'e' tag
+      const event = (actualTarget.kind >= 30000 && actualTarget.kind < 40000)
+        ? actualTarget
+        : actualTarget.id;
+
+      const zapAmount = amount * 1000; // convert to millisats
+
+      const zapRequest = nip57.makeZapRequest({
+        profile: actualTarget.pubkey,
+        event: event,
+        amount: zapAmount,
+        relays: config.relayMetadata.relays.map(r => r.url),
+        comment
+      });
+
+      // Sign the zap request (but don't publish to relays - only send to LNURL endpoint)
+      if (!user.signer) {
+        throw new Error('No signer available');
+      }
+      const signedZapRequest = await user.signer.signEvent(zapRequest);
+
+      try {
+        const res = await fetch(`${zapEndpoint}?amount=${zapAmount}&nostr=${encodeURI(JSON.stringify(signedZapRequest))}`);
+            const responseData = await res.json();
+
+            if (!res.ok) {
+              throw new Error(`HTTP ${res.status}: ${responseData.reason || 'Unknown error'}`);
+            }
+
+            const newInvoice = responseData.pr;
+            if (!newInvoice || typeof newInvoice !== 'string') {
+              throw new Error('Lightning service did not return a valid invoice');
+            }
+
+            // Get the current active NWC connection dynamically
+            const currentNWCConnection = getActiveConnection();
+
+            // Try NWC first if available and properly connected
+            if (currentNWCConnection && currentNWCConnection.connectionString && currentNWCConnection.isConnected) {
+              try {
+                await sendPayment(currentNWCConnection, newInvoice);
+
+                // Clear states immediately on success
+                setIsZapping(false);
+                setInvoice(null);
+
+                toast({
+                  title: 'Zap successful!',
+                  description: `You sent ${amount} sats via NWC to the author.`,
+                });
+
+                // Invalidate zap queries to refresh counts
+                queryClient.invalidateQueries({ queryKey: ['zaps'] });
+
+                // Close dialog last to ensure clean state
+                onZapSuccess?.();
+                return;
+              } catch (nwcError) {
+                console.error('NWC payment failed, falling back:', nwcError);
+
+                // Show specific NWC error to user for debugging
+                const errorMessage = nwcError instanceof Error ? nwcError.message : 'Unknown NWC error';
+                toast({
+                  title: 'NWC payment failed',
+                  description: `${errorMessage}. Falling back to other payment methods...`,
+                  variant: 'destructive',
+                });
+              }
+            }
+
+            if (webln) {  // Try WebLN next
+              try {
+                // For native WebLN, we may need to enable it first
+                let webLnProvider = webln;
+                if (webln.enable && typeof webln.enable === 'function') {
+                  const enabledProvider = await webln.enable();
+                  // Some implementations return the provider, others return void
+                  // Cast to WebLNProvider to handle both cases
+                  const provider = enabledProvider as WebLNProvider | undefined;
+                  if (provider) {
+                    webLnProvider = provider;
+                  }
+                }
+
+                await webLnProvider.sendPayment(newInvoice);
+
+                // Clear states immediately on success
+                setIsZapping(false);
+                setInvoice(null);
+
+                toast({
+                  title: 'Zap successful!',
+                  description: `You sent ${amount} sats to the author.`,
+                });
+
+                // Invalidate zap queries to refresh counts
+                queryClient.invalidateQueries({ queryKey: ['zaps'] });
+
+                // Close dialog last to ensure clean state
+                onZapSuccess?.();
+              } catch (weblnError) {
+                console.error('WebLN payment failed, falling back:', weblnError);
+
+                // Show specific WebLN error to user for debugging
+                const errorMessage = weblnError instanceof Error ? weblnError.message : 'Unknown WebLN error';
+                toast({
+                  title: 'WebLN payment failed',
+                  description: `${errorMessage}. Falling back to other payment methods...`,
+                  variant: 'destructive',
+                });
+
+                setInvoice(newInvoice);
+                setIsZapping(false);
+              }
+            } else { // Default - show QR code and manual Lightning URI
+              setInvoice(newInvoice);
+              setIsZapping(false);
+            }
+          } catch (err) {
+            console.error('Zap error:', err);
+            toast({
+              title: 'Zap failed',
+              description: (err as Error).message,
+              variant: 'destructive',
+            });
+            setIsZapping(false);
+          }
+    } catch (err) {
+      console.error('Zap error:', err);
+      toast({
+        title: 'Zap failed',
+        description: (err as Error).message,
+        variant: 'destructive',
+      });
+      setIsZapping(false);
+    }
+  };
+
+  const resetInvoice = useCallback(() => {
+    setInvoice(null);
+  }, []);
+
+  return {
+    zaps,
+    zapCount,
+    totalSats,
+    ...query,
+    zap,
+    isZapping,
+    invoice,
+    setInvoice,
+    resetInvoice,
+  };
+}
diff --git a/src/src/hooks/wallet/useCashu.ts b/src/src/hooks/wallet/useCashu.ts
new file mode 100644
index 0000000..a1fe64e
--- /dev/null
+++ b/src/src/hooks/wallet/useCashu.ts
@@ -0,0 +1,251 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useLocalStorage } from '../useLocalStorage';
+import * as bip39 from '@scure/bip39';
+import { wordlist } from '@scure/bip39/wordlists/english';
+import { initializeCoco, ConsoleLogger, getEncodedToken, type Repositories } from 'coco-cashu-core';
+import { IndexedDbRepositories } from 'coco-cashu-indexeddb';
+import type { Mint } from 'coco-cashu-core';
+
+// Types from coco-cashu-core
+type CocoManager = Awaited<ReturnType<typeof initializeCoco>>;
+
+// Singleton pattern to prevent multiple initializations
+let globalCocoInstance: CocoManager | null = null;
+let globalRepositories: Repositories | null = null;
+let globalInitializationPromise: Promise<{ coco: CocoManager; repositories: Repositories }> | null = null;
+
+export interface UseCashuReturn {
+  // The typed coco manager (direct library access)
+  coco: CocoManager | null;
+  
+  // Repositories for direct access to proof data
+  repositories: Repositories | null;
+  
+  // React state (for reactivity)
+  balances: { [mintUrl: string]: number };
+  mints: Array<{ url: string; name?: string; info?: unknown }>;
+  totalBalance: number;
+  
+  // Status
+  isInitialized: boolean;
+  isLoading: boolean;
+  error: Error | null;
+  
+  // Mnemonic management
+  mnemonic: string | null;
+  setMnemonic: (mnemonic: string) => void;
+  generateMnemonic: () => string;
+  
+  // Utility functions
+  clearError: () => void;
+  getEncodedToken: typeof getEncodedToken;
+  refreshMints: () => Promise<void>;
+}
+
+export function useCashu(): UseCashuReturn {
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  
+  // Mnemonic management with localStorage
+  const [mnemonic, setMnemonicState] = useLocalStorage<string | null>('cashu-mnemonic', null);
+  
+  // Manager instance ref
+  const cocoRef = useRef<CocoManager | null>(null);
+  const repositoriesRef = useRef<Repositories | null>(null);
+  
+  // React state for UI reactivity
+  const [balances, setBalances] = useState<{ [mintUrl: string]: number }>({});
+  const [mints, setMints] = useState<Array<{ url: string; name?: string; info?: unknown }>>([]);
+
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+
+  const generateMnemonic = useCallback(() => {
+    return bip39.generateMnemonic(wordlist);
+  }, []);
+
+  const refreshMints = useCallback(async () => {
+    const coco = cocoRef.current;
+    if (!coco) return;
+    
+    try {
+      // Only show trusted mints in the UI
+      const mintList = await coco.mint.getAllTrustedMints();
+      setMints(mintList.map((m: Mint) => ({ 
+        url: m.mintUrl, 
+        name: m.name,
+        info: m.mintInfo
+      })));
+    } catch (err) {
+      console.error('Failed to refresh mints:', err);
+    }
+  }, []);
+
+  const setMnemonic = useCallback((newMnemonic: string) => {
+    if (!bip39.validateMnemonic(newMnemonic, wordlist)) {
+      throw new Error('Invalid mnemonic');
+    }
+    setMnemonicState(newMnemonic);
+    // Reinitialize manager with new mnemonic
+    setIsInitialized(false);
+  }, [setMnemonicState]);
+
+  // Initialize the coco manager
+  const initializeCocoManager = useCallback(async () => {
+    if (isInitialized || isLoading) return;
+    
+    setIsLoading(true);
+    setError(null);
+    
+    try {
+      // Use singleton pattern to prevent multiple initializations
+      if (globalCocoInstance && globalRepositories) {
+        cocoRef.current = globalCocoInstance;
+        repositoriesRef.current = globalRepositories;
+        setIsInitialized(true);
+        setIsLoading(false);
+        return;
+      }
+      
+      // If there's already an initialization in progress, wait for it
+      if (globalInitializationPromise) {
+        console.log('[Cashu] Waiting for existing initialization...');
+        const { coco, repositories } = await globalInitializationPromise;
+        cocoRef.current = coco;
+        repositoriesRef.current = repositories;
+        setIsInitialized(true);
+        setIsLoading(false);
+        return;
+      }
+      
+      // Generate or retrieve mnemonic
+      let currentMnemonic = mnemonic;
+      if (!currentMnemonic) {
+        currentMnemonic = bip39.generateMnemonic(wordlist);
+        setMnemonicState(currentMnemonic);
+      }
+      
+      // Create seed from mnemonic
+      const seed = bip39.mnemonicToSeedSync(currentMnemonic);
+      
+      // Initialize repositories with proper initialization
+      const repo = new IndexedDbRepositories({ name: "cashu-wallet" });
+      await repo.init();
+      
+      // Create initialization promise
+      globalInitializationPromise = (async () => {
+        const coco = await initializeCoco({
+          repo,
+          seedGetter: async () => seed,
+          logger: new ConsoleLogger("coco", { level: "info" })
+        });
+        return { coco, repositories: repo };
+      })();
+      
+      // Initialize coco manager
+      const { coco, repositories } = await globalInitializationPromise;
+      
+      // Store as singleton
+      console.log('[Cashu] Storing new coco instance as singleton');
+      globalCocoInstance = coco;
+      globalRepositories = repositories;
+      globalInitializationPromise = null;
+      cocoRef.current = coco;
+      repositoriesRef.current = repositories;
+      
+      // Enable built-in services for automatic quote processing
+      try {
+        console.log('[Cashu] Enabling coco services...');
+        await coco.enableMintQuoteWatcher({ watchExistingPendingOnStart: false });
+        await coco.enableMintQuoteProcessor();
+        await coco.enableProofStateWatcher();
+        console.log('[Cashu] All coco services enabled successfully');
+      } catch (err) {
+        console.warn('[Cashu] Failed to enable some coco services:', err);
+      }
+      
+      // Add default mint if no mints exist
+      try {
+        const DEFAULT_MINT_URL = 'https://mint.minibits.cash/Bitcoin';
+        const existingMints = await coco.mint.getAllTrustedMints();
+        const hasDefaultMint = existingMints.some((m: Mint) => 
+          m.mintUrl.toLowerCase() === DEFAULT_MINT_URL.toLowerCase()
+        );
+        
+        if (!hasDefaultMint && existingMints.length === 0) {
+          console.log('[Cashu] Adding default mint:', DEFAULT_MINT_URL);
+          await coco.mint.addMint(DEFAULT_MINT_URL, { trusted: true });
+          console.log('[Cashu] Default mint added successfully');
+        }
+      } catch (err) {
+        console.warn('[Cashu] Failed to add default mint:', err);
+      }
+      
+      setIsInitialized(true);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to initialize Cashu wallet';
+      setError(new Error(errorMessage));
+      globalInitializationPromise = null;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [isInitialized, isLoading, mnemonic, setMnemonicState]);
+
+  // Initialize on mount and when mnemonic changes
+  useEffect(() => {
+    initializeCocoManager();
+  }, [initializeCocoManager]);
+
+  // Auto-refresh balances and mints on manager events
+  useEffect(() => {
+    const coco = cocoRef.current;
+    if (!coco) return;
+    
+    const refreshBalances = async () => {
+      try {
+        const newBalances = await coco.wallet.getBalances();
+        setBalances(newBalances);
+      } catch (err) {
+        console.error('[Cashu] Failed to refresh balances:', err);
+      }
+    };
+    
+    // Initial load
+    refreshBalances();
+    refreshMints();
+    
+    // Listen to events
+    const unsubs = [
+      coco.on('proofs:saved', refreshBalances),
+      coco.on('proofs:state-changed', refreshBalances),
+      coco.on('send:created', refreshBalances),
+      coco.on('receive:created', refreshBalances),
+      coco.on('mint:added', refreshMints),
+      coco.on('mint:updated', refreshMints),
+    ];
+    
+    return () => unsubs.forEach(unsub => unsub());
+  }, [isInitialized, refreshMints]);
+
+  // Calculate total balance
+  const totalBalance = Object.values(balances).reduce((sum, balance) => sum + balance, 0);
+
+  return {
+    coco: cocoRef.current,
+    repositories: repositoriesRef.current,
+    balances,
+    mints,
+    totalBalance,
+    isInitialized,
+    isLoading,
+    error,
+    mnemonic,
+    setMnemonic,
+    generateMnemonic,
+    clearError,
+    getEncodedToken,
+    refreshMints,
+  };
+}
diff --git a/src/src/hooks/wallet/useHistoryManager.ts b/src/src/hooks/wallet/useHistoryManager.ts
new file mode 100644
index 0000000..ec1b6fd
--- /dev/null
+++ b/src/src/hooks/wallet/useHistoryManager.ts
@@ -0,0 +1,106 @@
+import { useState, useEffect, useCallback } from 'react';
+import type { Manager } from 'coco-cashu-core';
+import type { CashuMint } from './useMintManager';
+
+export interface HistoryEntry {
+  id: string;
+  type: 'mint' | 'melt' | 'send' | 'receive';
+  amount: number;
+  mintUrl: string;
+  status: 'pending' | 'completed' | 'failed';
+  timestamp: number;
+  quoteId?: string;
+  invoice?: string;
+}
+
+interface UseHistoryManagerProps {
+  coco: Manager | null;
+  repositories: unknown;
+  mints: CashuMint[];
+}
+
+export function useHistoryManager({
+  coco,
+  repositories,
+  mints,
+}: UseHistoryManagerProps) {
+  const [history, setHistory] = useState<HistoryEntry[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const refreshHistory = useCallback(async () => {
+    if (!coco || !repositories) return;
+
+    setIsLoading(true);
+    try {
+      const allHistory: HistoryEntry[] = [];
+
+      // Fetch mint quotes (receive operations)
+      const mintQuotes = await (repositories as any).mintQuoteRepository?.getAll() || [];
+      for (const quote of mintQuotes) {
+        allHistory.push({
+          id: quote.quoteId,
+          type: 'mint',
+          amount: quote.amount,
+          mintUrl: quote.mintUrl,
+          status: quote.state === 'paid' ? 'completed' : quote.state === 'pending' ? 'pending' : 'failed',
+          timestamp: quote.createdAt || Date.now(),
+          quoteId: quote.quoteId,
+          invoice: quote.request,
+        });
+      }
+
+      // Fetch melt quotes (send operations)
+      const meltQuotes = await (repositories as any).meltQuoteRepository?.getAll() || [];
+      for (const quote of meltQuotes) {
+        allHistory.push({
+          id: quote.quoteId,
+          type: 'melt',
+          amount: quote.amount,
+          mintUrl: quote.mintUrl,
+          status: quote.state === 'paid' ? 'completed' : quote.state === 'pending' ? 'pending' : 'failed',
+          timestamp: quote.createdAt || Date.now(),
+          quoteId: quote.quoteId,
+          invoice: quote.request,
+        });
+      }
+
+      // Sort by timestamp (newest first)
+      allHistory.sort((a, b) => b.timestamp - a.timestamp);
+
+      setHistory(allHistory);
+    } catch (err) {
+      console.error('[Cashu] Failed to refresh history:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [coco, repositories]);
+
+  // Refresh history when coco initializes
+  useEffect(() => {
+    if (coco) {
+      refreshHistory();
+    }
+  }, [coco, refreshHistory]);
+
+  // Listen to events for real-time updates
+  useEffect(() => {
+    if (!coco) return;
+
+    const unsubs = [
+      coco.on('mint-quote:created', refreshHistory),
+      coco.on('mint-quote:redeemed', refreshHistory),
+      coco.on('melt-quote:created', refreshHistory),
+      coco.on('melt-quote:paid', refreshHistory),
+      coco.on('send:created', refreshHistory),
+      coco.on('receive:created', refreshHistory),
+    ];
+
+    return () => unsubs.forEach(unsub => unsub());
+  }, [coco, refreshHistory]);
+
+  return {
+    history,
+    isLoading,
+    refreshHistory,
+  };
+}
diff --git a/src/src/hooks/wallet/useLightningOperations.ts b/src/src/hooks/wallet/useLightningOperations.ts
new file mode 100644
index 0000000..6d96cfd
--- /dev/null
+++ b/src/src/hooks/wallet/useLightningOperations.ts
@@ -0,0 +1,156 @@
+import { useState, useCallback, useRef } from 'react';
+import type { Manager } from 'coco-cashu-core';
+import { useToast } from '@/hooks/useToast';
+
+interface UseLightningOperationsProps {
+  coco: Manager | null;
+  activeMintUrl: string | null;
+  generateQRCode: (text: string) => Promise<string>;
+}
+
+export function useLightningOperations({
+  coco,
+  activeMintUrl,
+  generateQRCode,
+}: UseLightningOperationsProps) {
+  const { toast } = useToast();
+  
+  // Receive state
+  const [quoteAmount, setQuoteAmount] = useState('');
+  const [showInvoiceModal, setShowInvoiceModal] = useState(false);
+  const [currentInvoice, setCurrentInvoice] = useState<{
+    quoteId: string;
+    mintUrl: string;
+    amount: number;
+    invoice: string;
+    qrCodeUrl: string;
+    expiry: number;
+  } | null>(null);
+
+  // Send state
+  const [lightningInvoice, setLightningInvoice] = useState('');
+  const [isProcessingPayment, setIsProcessingPayment] = useState(false);
+
+  const mintQuoteUnsubscribeRef = useRef<(() => void) | null>(null);
+
+  // Handle receive (create mint quote/invoice)
+  const handleLightningReceive = useCallback(async () => {
+    if (!coco || !quoteAmount || !activeMintUrl) return;
+
+    try {
+      const amount = parseInt(quoteAmount);
+      if (isNaN(amount) || amount <= 0) {
+        toast({ 
+          variant: 'destructive', 
+          title: 'Invalid amount', 
+          description: 'Please enter a valid amount' 
+        });
+        return;
+      }
+      
+      const quote = await coco.quotes.createMintQuote(activeMintUrl, amount);
+      const qrCodeUrl = await generateQRCode(quote.request);
+
+      setCurrentInvoice({
+        quoteId: quote.quote,
+        mintUrl: activeMintUrl,
+        amount,
+        invoice: quote.request,
+        qrCodeUrl,
+        expiry: quote.expiry,
+      });
+      
+      setShowInvoiceModal(true);
+      setQuoteAmount('');
+
+      // Clean up any previous listener
+      if (mintQuoteUnsubscribeRef.current) {
+        mintQuoteUnsubscribeRef.current();
+        mintQuoteUnsubscribeRef.current = null;
+      }
+
+      // Listen for payment
+      const quoteId = quote.quote;
+      const invoiceAmount = amount;
+
+      const unsubscribe = coco.on('mint-quote:redeemed', (payload: unknown) => {
+        const redeemedQuote = payload as { quoteId?: string };
+
+        if (redeemedQuote.quoteId === quoteId) {
+          toast({ 
+            title: 'Payment received', 
+            description: `Successfully received ${invoiceAmount} sats!` 
+          });
+          setShowInvoiceModal(false);
+          setCurrentInvoice(null);
+          mintQuoteUnsubscribeRef.current = null;
+          unsubscribe();
+        }
+      });
+
+      mintQuoteUnsubscribeRef.current = unsubscribe;
+    } catch (err) {
+      toast({ 
+        variant: 'destructive', 
+        title: 'Failed to create invoice', 
+        description: err instanceof Error ? err.message : 'Unknown error' 
+      });
+    }
+  }, [coco, quoteAmount, activeMintUrl, generateQRCode, toast]);
+
+  // Handle send (pay Lightning invoice)
+  const handleLightningSend = useCallback(async () => {
+    if (isProcessingPayment || !coco || !lightningInvoice || !activeMintUrl) return;
+
+    setIsProcessingPayment(true);
+
+    try {
+      const invoice = lightningInvoice.trim();
+      
+      // Create and pay melt quote
+      const meltQuote = await coco.quotes.createMeltQuote(activeMintUrl, invoice);
+      await coco.quotes.payMeltQuote(activeMintUrl, meltQuote.quote);
+
+      toast({ 
+        title: 'Payment sent', 
+        description: 'Lightning payment completed successfully' 
+      });
+
+      setLightningInvoice('');
+    } catch (err) {
+      toast({ 
+        variant: 'destructive', 
+        title: 'Payment failed', 
+        description: err instanceof Error ? err.message : 'Unknown error' 
+      });
+    } finally {
+      setIsProcessingPayment(false);
+    }
+  }, [coco, lightningInvoice, activeMintUrl, isProcessingPayment, toast]);
+
+  // Cleanup listener on unmount
+  useCallback(() => {
+    return () => {
+      if (mintQuoteUnsubscribeRef.current) {
+        mintQuoteUnsubscribeRef.current();
+      }
+    };
+  }, []);
+
+  return {
+    // Receive
+    quoteAmount,
+    setQuoteAmount,
+    showInvoiceModal,
+    setShowInvoiceModal,
+    currentInvoice,
+    setCurrentInvoice,
+    handleLightningReceive,
+    
+    // Send
+    lightningInvoice,
+    setLightningInvoice,
+    isProcessingPayment,
+    handleLightningSend,
+  };
+}
diff --git a/src/src/hooks/wallet/useMintManager.ts b/src/src/hooks/wallet/useMintManager.ts
new file mode 100644
index 0000000..57331a6
--- /dev/null
+++ b/src/src/hooks/wallet/useMintManager.ts
@@ -0,0 +1,187 @@
+import { useState, useCallback } from 'react';
+import type { Manager, Repositories } from 'coco-cashu-core';
+import { useToast } from '@/hooks/useToast';
+
+export interface CashuMint {
+  url: string;
+  name?: string;
+}
+
+// Mint utility functions
+export const getCleanMintLabel = (mint: { name?: string; url: string }): string => {
+  if (mint.name && mint.name.trim().length > 0) {
+    return mint.name.replace(/^https?:\/\//, '');
+  }
+  try {
+    return new URL(mint.url).host;
+  } catch {
+    return mint.url.replace(/^https?:\/\//, '');
+  }
+};
+
+export const isUnknownMintError = (err: unknown): boolean => {
+  const errorMessage = err instanceof Error ? err.message : String(err);
+  const errorName = err instanceof Error ? err.constructor.name : '';
+  return errorName === 'UnknownMintError' || 
+         errorMessage.includes('UnknownMintError') || 
+         (errorMessage.includes('Mint') && errorMessage.includes('is not known'));
+};
+
+export const extractMintUrlFromError = (err: unknown): string | null => {
+  const errorMessage = err instanceof Error ? err.message : String(err);
+  const mintUrlMatch = errorMessage.match(/Mint (https?:\/\/[^\s]+)/);
+  return mintUrlMatch?.[1] || null;
+};
+
+interface UseMintManagerProps {
+  coco: Manager | null;
+  mints: CashuMint[];
+  repositories: Repositories | null;
+  refreshMints: () => Promise<void>;
+}
+
+export function useMintManager({
+  coco,
+  mints,
+  repositories,
+  refreshMints,
+}: UseMintManagerProps) {
+  const { toast } = useToast();
+  const [activeMintUrl, setActiveMintUrl] = useState<string | null>(null);
+  const [mintUrl, setMintUrl] = useState('');
+  const [mintToRemove, setMintToRemove] = useState<CashuMint | null>(null);
+  const [showRemoveMintModal, setShowRemoveMintModal] = useState(false);
+
+  // Set active mint
+  const handleSetActiveMint = useCallback(
+    async (url: string | null) => {
+      setActiveMintUrl(url);
+    },
+    []
+  );
+
+  // Add a new mint - accepts optional URL parameter or uses mintUrl state
+  const handleAddMint = useCallback(async (urlToAdd?: string) => {
+    const targetUrl = urlToAdd || mintUrl.trim();
+    if (!targetUrl || !coco) return;
+    
+    try {
+      // Normalize URL - add https:// if not present
+      let normalizedUrl = targetUrl;
+      if (
+        !normalizedUrl.startsWith('http://') &&
+        !normalizedUrl.startsWith('https://')
+      ) {
+        normalizedUrl = `https://${normalizedUrl}`;
+      }
+
+      // Check if mint already exists
+      const existingMint = mints.find(mint => 
+        mint.url.toLowerCase() === normalizedUrl.toLowerCase()
+      );
+      
+      if (existingMint) {
+        throw new Error('This mint is already in your list');
+      }
+
+      // Add mint and automatically trust it
+      await coco.mint.addMint(normalizedUrl, { trusted: true });
+      
+      // Only clear the input if we were using the state URL
+      if (!urlToAdd) {
+        setMintUrl('');
+      }
+
+      if (!urlToAdd) {
+        toast({ 
+          title: 'Mint added', 
+          description: 'Mint added and trusted successfully' 
+        });
+      }
+
+      await refreshMints();
+    } catch (err) {
+      if (!urlToAdd) {
+        toast({ 
+          variant: 'destructive', 
+          title: 'Failed to add mint', 
+          description: err instanceof Error ? err.message : 'Unknown error' 
+        });
+      }
+      throw err; // Re-throw so external callers can handle it
+    }
+  }, [mintUrl, coco, mints, toast, refreshMints]);
+
+  // Show remove confirmation modal (for internal use)
+  const handleRemoveMintClick = useCallback((mint: CashuMint) => {
+    setMintToRemove(mint);
+    setShowRemoveMintModal(true);
+  }, []);
+
+  // Direct remove mint function (for external components with their own confirmation)
+  const handleRemoveMintDirect = useCallback(async (mint: CashuMint) => {
+    if (!repositories) return;
+
+    try {
+      // Delete the mint from the backend
+      await repositories.mintRepository.deleteMint(mint.url);
+
+      // If the removed mint was active, switch to first available
+      if (activeMintUrl === mint.url) {
+        const remainingMints = mints.filter(
+          (m) => m.url !== mint.url
+        );
+        if (remainingMints.length > 0) {
+          handleSetActiveMint(remainingMints[0].url);
+        } else {
+          setActiveMintUrl(null);
+        }
+      }
+
+      toast({
+        title: 'Mint removed',
+        description: `${getCleanMintLabel(mint)} has been removed`
+      });
+
+      await refreshMints();
+    } catch (err) {
+      toast({ 
+        variant: 'destructive', 
+        title: 'Failed to remove mint', 
+        description: err instanceof Error ? err.message : 'Unknown error' 
+      });
+      throw err;
+    }
+  }, [
+    mints,
+    activeMintUrl,
+    handleSetActiveMint,
+    repositories,
+    refreshMints,
+    toast,
+  ]);
+
+  // Confirm and remove mint (uses internal state)
+  const handleConfirmRemoveMint = useCallback(async () => {
+    if (!mintToRemove) return;
+    await handleRemoveMintDirect(mintToRemove);
+    setShowRemoveMintModal(false);
+    setMintToRemove(null);
+  }, [mintToRemove, handleRemoveMintDirect]);
+
+  return {
+    activeMintUrl,
+    setActiveMintUrl: handleSetActiveMint,
+    mintUrl,
+    setMintUrl,
+    handleAddMint,
+    handleRemoveMintClick,
+    handleRemoveMintDirect,
+    handleConfirmRemoveMint,
+    mintToRemove,
+    setMintToRemove,
+    showRemoveMintModal,
+    setShowRemoveMintModal,
+    getCleanMintLabel,
+  };
+}
diff --git a/src/src/hooks/wallet/useTokenOperations.ts b/src/src/hooks/wallet/useTokenOperations.ts
new file mode 100644
index 0000000..9d2a37e
--- /dev/null
+++ b/src/src/hooks/wallet/useTokenOperations.ts
@@ -0,0 +1,167 @@
+import { useState, useCallback } from 'react';
+import { isUnknownMintError, extractMintUrlFromError } from './useMintManager';
+import type { Manager } from 'coco-cashu-core';
+import type { Token } from '@cashu/cashu-ts';
+import { useToast } from '@/hooks/useToast';
+
+interface UseTokenOperationsProps {
+  coco: Manager | null;
+  activeMintUrl: string | null;
+  generateQRCode: (text: string) => Promise<string>;
+  getEncodedToken: (token: Token | string) => string;
+}
+
+export function useTokenOperations({
+  coco,
+  activeMintUrl,
+  generateQRCode,
+  getEncodedToken,
+}: UseTokenOperationsProps) {
+  const { toast } = useToast();
+  
+  // Receive state
+  const [tokenInput, setTokenInput] = useState('');
+  
+  // Send state
+  const [sendAmount, setSendAmount] = useState('');
+  
+  // Transaction output state
+  const [sentToken, setSentToken] = useState<string | null>(null);
+  const [sentTokenQRCode, setSentTokenQRCode] = useState<string>('');
+
+  // Generate QR code for sent token
+  const generateSentTokenQRCode = useCallback(async (token: string) => {
+    try {
+      const qrCodeUrl = await generateQRCode(token);
+      setSentTokenQRCode(qrCodeUrl);
+    } catch (err) {
+      console.error('[Cashu] Failed to generate sent token QR code:', err);
+    }
+  }, [generateQRCode]);
+
+  // Handle unknown mint error by adding the mint and retrying
+  const handleUnknownMintError = useCallback(
+    async (mintUrl: string) => {
+      if (!coco) return;
+
+      try {
+        console.log('[Cashu] Adding unknown mint:', mintUrl);
+
+        // Check if mint exists
+        const allMints = await coco.mint.getAllMints();
+        const isKnown = allMints.some(m => m.mintUrl.toLowerCase() === mintUrl.toLowerCase());
+        
+        if (isKnown) {
+          // Mint exists but may not be trusted
+          const isTrusted = await coco.mint.isTrustedMint(mintUrl);
+          if (!isTrusted) {
+            await coco.mint.trustMint(mintUrl);
+          }
+        } else {
+          // Add the mint and automatically trust it
+          await coco.mint.addMint(mintUrl, { trusted: true });
+        }
+
+        // Retry receiving the token
+        await coco.wallet.receive(tokenInput);
+        setTokenInput('');
+
+        toast({ 
+          title: 'Token received', 
+          description: `Token redeemed successfully! Added new mint: ${new URL(mintUrl).host}` 
+        });
+      } catch (retryErr) {
+        toast({ 
+          variant: 'destructive', 
+          title: 'Receive failed', 
+          description: retryErr instanceof Error ? retryErr.message : 'Unknown error' 
+        });
+      }
+    },
+    [coco, tokenInput, toast]
+  );
+
+  // Handle receive (token)
+  const handleTokenReceive = useCallback(async () => {
+    if (!coco || !tokenInput) return;
+
+    try {
+      const tokenToProcess = tokenInput.trim();
+      
+      console.log('[Cashu] Attempting to receive token:', tokenToProcess.substring(0, 20) + '...');
+      await coco.wallet.receive(tokenToProcess);
+      setTokenInput('');
+      
+      toast({ 
+        title: 'Token received', 
+        description: 'Cashu token redeemed successfully!' 
+      });
+    } catch (err) {
+      console.error('[Cashu] Token receive error:', err);
+
+      // Handle UnknownMintError by automatically adding the mint
+      if (isUnknownMintError(err)) {
+        const mintUrl = extractMintUrlFromError(err);
+        if (mintUrl) {
+          await handleUnknownMintError(mintUrl);
+          return;
+        }
+      }
+
+      toast({ 
+        variant: 'destructive', 
+        title: 'Receive failed', 
+        description: err instanceof Error ? err.message : 'Unknown error' 
+      });
+    }
+  }, [coco, tokenInput, handleUnknownMintError, toast]);
+
+  // Handle send (token)
+  const handleTokenSend = useCallback(async () => {
+    if (!coco || !sendAmount || !activeMintUrl) return;
+
+    try {
+      const amount = parseInt(sendAmount);
+      if (isNaN(amount) || amount <= 0) {
+        toast({ 
+          variant: 'destructive', 
+          title: 'Invalid amount', 
+          description: 'Please enter a valid amount' 
+        });
+        return;
+      }
+      
+      const token = await coco.wallet.send(activeMintUrl, amount);
+      const encodedToken = getEncodedToken(token);
+      setSentToken(encodedToken);
+      await generateSentTokenQRCode(encodedToken);
+      setSendAmount('');
+      
+      toast({
+        title: 'Token created',
+        description: `${amount} sats token ready to share`
+      });
+    } catch (err) {
+      toast({ 
+        variant: 'destructive', 
+        title: 'Send failed', 
+        description: err instanceof Error ? err.message : 'Unknown error' 
+      });
+    }
+  }, [coco, sendAmount, activeMintUrl, getEncodedToken, generateSentTokenQRCode, toast]);
+
+  return {
+    // Receive state
+    tokenInput,
+    setTokenInput,
+    handleTokenReceive,
+    // Send state
+    sendAmount,
+    setSendAmount,
+    handleTokenSend,
+    // Transaction output state
+    sentToken,
+    setSentToken,
+    sentTokenQRCode,
+  };
+}
diff --git a/src/src/i18n/en.ts b/src/src/i18n/en.ts
new file mode 100644
index 0000000..80ef437
--- /dev/null
+++ b/src/src/i18n/en.ts
@@ -0,0 +1,799 @@
+/**
+ * English translations
+ * Note: Skateboarding trick names and terminology stay in English
+ */
+const en = {
+  // Common
+  common: {
+    loading: 'Loading...',
+    error: 'Error',
+    save: 'Save',
+    cancel: 'Cancel',
+    delete: 'Delete',
+    edit: 'Edit',
+    create: 'Create',
+    submit: 'Submit',
+    close: 'Close',
+    back: 'Back',
+    next: 'Next',
+    done: 'Done',
+    search: 'Search',
+    filter: 'Filter',
+    sort: 'Sort',
+    share: 'Share',
+    copy: 'Copy',
+    copied: 'Copied!',
+    viewAll: 'View All',
+    seeMore: 'See More',
+    showMore: 'Show More',
+    showLess: 'Show Less',
+    noResults: 'No results found',
+    tryAgain: 'Try Again',
+    learnMore: 'Learn More',
+    getStarted: 'Get Started',
+    yes: 'Yes',
+    no: 'No',
+    or: 'or',
+    and: 'and',
+    free: 'Free',
+    new: 'New',
+    popular: 'Popular',
+    featured: 'Featured',
+    verified: 'Verified',
+    sats: 'sats',
+    clear: 'Clear',
+    clearFilters: 'Clear Filters',
+    clearAll: 'Clear All',
+  },
+
+  // Navigation
+  nav: {
+    home: 'Home',
+    map: 'Shops & Spots',
+    lab: 'The Lab',
+    events: 'Events',
+    wallet: 'Wallet',
+    settings: 'Settings',
+    more: 'More',
+    rewards: 'Rewards',
+    stats: 'Community Stats',
+    about: 'About',
+    food: 'Food',
+    marketplace: 'Marketplace',
+  },
+
+  // Authentication
+  auth: {
+    login: 'Log in',
+    logout: 'Log out',
+    signUp: 'Sign Up',
+    signUpTitle: 'New to Nostr?',
+    signUpDesc: "Create a new account to get started. It's free and open.",
+    orLogIn: 'Or log in',
+    loginWithExtension: 'Login with Extension',
+    loginWithAmber: 'Login with Amber (Android)',
+    loginWithKey: 'Secret Key (nsec) or Recovery Phrase',
+    loginWithBunker: 'Login with Nostr Connect',
+    bunkerUri: 'Bunker Connection String',
+    openAmber: 'Open Amber',
+    connectToBunker: 'Connect to Bunker',
+    noExtension: 'No extension detected.',
+    extensionHelp: 'Try using the Sign Up button above to create a new account, or use the Amber, Key or Bunker tabs if you have existing credentials.',
+    amberDesc: 'Amber is a secure Nostr signer app for Android devices. Click the button below to open Amber and authorize access.',
+    bunkerDesc: 'Access your account from any device using a remote signer (bunker). Your keys stay safe on the server, never exposed to websites.',
+    keyPlaceholder: 'nsec1... or your 12-word recovery phrase',
+    keyHint: 'You can paste either your nsec key or 12-word recovery phrase',
+    uploadKeyFile: 'Upload Your Key File',
+    loggingIn: 'Logging in...',
+    connecting: 'Connecting...',
+    verifying: 'Verifying...',
+  },
+
+  // Backup Reminder
+  backup: {
+    title: 'Backup Your Account!',
+    subtitle: 'Important security reminder',
+    message: 'Your recovery phrase or secret key (nsec) is the ONLY way to access your account from other devices.',
+    warning: 'If you lose it, you lose your account forever!',
+    backupNow: 'Backup Now',
+    confirmed: "I've Backed It Up",
+    remindLater: 'Remind me later',
+  },
+
+  // PWA Install
+  pwa: {
+    installTitle: 'Install SkateSpots',
+    installSubtitle: 'Get the full app experience',
+    addToHomeScreen: 'Add to Home Screen',
+    installApp: 'Install App',
+    maybeLater: 'Maybe later',
+    gotIt: 'Got it!',
+    benefits: {
+      fast: 'Lightning Fast',
+      offline: 'Works Offline',
+      fullAccess: 'Full Access',
+    },
+    iosStep1: 'Tap the Share button',
+    iosStep1Hint: 'at the bottom of Safari',
+    iosStep2: 'Scroll and tap "Add to Home Screen"',
+    iosStep2Hint: 'in the share menu',
+    iosStep3: 'Tap "Add" to install',
+    iosStep3Hint: 'The app will appear on your home screen',
+    androidStep1: 'Tap the menu button',
+    androidStep1Hint: '(three dots) in your browser',
+    androidStep2: 'Select "Add to Home Screen"',
+    androidStep2Hint: 'or "Install App"',
+    androidStep3: 'Confirm to install',
+    androidStep3Hint: 'The app will appear on your home screen',
+    tagline: 'Free • Works offline • Fast & reliable',
+  },
+
+  // Home/Index Page
+  home: {
+    tagline: 'Community-Powered • Relay-Based',
+    title: 'SKATE SPOTS',
+    subtitle: 'Discover Spots • Meet Up • Learn Tricks • Support Locals',
+    description: 'Real skateboarding happens offline - this tool helps you find it.',
+    betaWarning: 'BETA - Under Construction • Use at Your Own Risk',
+    pwaHint: 'Progressive Web App - Install on Your Device',
+    exploreMap: 'Explore Map',
+    addSpot: 'Add Spot',
+    globalSpots: 'Global Spots',
+    openCommunity: 'Open Community',
+    lightningZaps: 'Lightning Zaps',
+    featuredSpots: 'Featured Spots',
+    featuredSpotsDesc: 'Community-verified skate spots from around the world',
+    upcomingEvents: 'Upcoming Events',
+    upcomingEventsDesc: 'Contests, meetups, and sessions happening soon',
+    noSpotsYet: 'No spots found yet',
+    noSpotsHint: 'Be the first to add a skate spot!',
+    noEventsYet: 'No upcoming events',
+    noEventsHint: 'Check back later or create one!',
+    theLab: 'The Lab',
+    theLabDesc: 'Learn tricks, find coaches, and level up your skating',
+    coaches: 'Coaches',
+    coachesDesc: 'Learn from experienced skaters who can help you progress',
+    filmers: 'Filmers',
+    filmersDesc: 'Connect with filmers to capture your best clips',
+    findCoach: 'Find a Coach',
+    becomeCoach: 'Become a Coach',
+    findFilmer: 'Find a Filmer',
+    becomeFilmer: 'Become a Filmer',
+    viewAllSpots: 'View All Spots',
+    viewAllEvents: 'View All Events',
+    createEvent: 'Create Event',
+    readyToShare: 'Ready to Share?',
+    readyToShareDesc: 'Help the skateboarding community grow by adding your favorite spots. Every location you share helps fellow skaters discover new places to ride.',
+  },
+
+  // Map Page
+  mapPage: {
+    title: 'Shops & Spots',
+    spots: 'Spots',
+    shops: 'Shops',
+    filters: 'Filters',
+    listView: 'List',
+    mapView: 'Map',
+    nearMe: 'Near Me',
+    searchPlaceholder: 'Search spots...',
+    noSpotsInArea: 'No spots in this area',
+    zoomIn: 'Zoom In',
+    zoomOut: 'Zoom Out',
+    myLocation: 'My Location',
+    locationsFound: '{{count}} locations found',
+    spotsOnly: 'Spots only',
+    shopsOnly: 'Shops only',
+    spotsAndShops: 'Spots & Shops',
+    noSpotsMatch: 'No spots match your filters.',
+    noSpotsYet: 'No spots have been added yet.',
+    addFirstSpot: 'Add First Spot',
+  },
+
+  // Spots
+  spots: {
+    addSpot: 'Add Spot',
+    editSpot: 'Edit Spot',
+    spotDetails: 'Spot Details',
+    spotName: 'Spot Name',
+    spotType: 'Spot Type',
+    description: 'Description',
+    location: 'Location',
+    address: 'Address',
+    photos: 'Photos',
+    addPhotos: 'Add Photos',
+    obstacles: 'Obstacles',
+    features: 'Features',
+    bustLevel: 'Bust Level',
+    bestTime: 'Best Time',
+    tips: 'Tips',
+    reviews: 'Reviews',
+    addReview: 'Add Review',
+    reportSpot: 'Report Spot',
+    directions: 'Directions',
+    shareSpot: 'Share Spot',
+    createdBy: 'Created by',
+    lastUpdated: 'Last updated',
+    // Spot types (keep some English as they're skate terms)
+    types: {
+      park: 'Skatepark',
+      street: 'Street Spot',
+      diy: 'DIY Spot',
+      plaza: 'Plaza',
+      indoor: 'Indoor',
+      bowl: 'Bowl',
+      vert: 'Vert',
+      miniramp: 'Mini Ramp',
+    },
+    // Bust levels
+    bustLevels: {
+      chill: 'Chill',
+      moderate: 'Moderate',
+      sketchy: 'Sketchy',
+      heavy: 'Heavy',
+    },
+  },
+
+  // Events
+  events: {
+    title: 'Skate Events',
+    createEvent: 'Create Event',
+    editEvent: 'Edit Event',
+    eventDetails: 'Event Details',
+    eventName: 'Event Name',
+    eventType: 'Event Type',
+    date: 'Date',
+    time: 'Time',
+    startDate: 'Start Date',
+    endDate: 'End Date',
+    venue: 'Venue',
+    organizer: 'Organizer',
+    attendees: 'Attendees',
+    going: 'Going',
+    interested: 'Interested',
+    rsvp: 'RSVP',
+    ticketPrice: 'Ticket Price',
+    freeEntry: 'Free Entry',
+    register: 'Register',
+    moreInfo: 'More Info',
+    upcomingEvents: 'Upcoming',
+    pastEvents: 'Past',
+    noEvents: 'No events found',
+    findEvents: 'Find contests, demos, sessions, and more',
+    searchPlaceholder: 'Search events...',
+    loginToCreate: 'Login to create events',
+    noEventsMatch: 'No upcoming events match your filters.',
+    noUpcoming: 'No upcoming events found.',
+    noPast: 'No past events found.',
+    // Event types
+    types: {
+      contest: 'Contest',
+      session: 'Session',
+      meetup: 'Meetup',
+      premiere: 'Video Premiere',
+      workshop: 'Workshop',
+      demo: 'Demo',
+      jam: 'Jam',
+    },
+  },
+
+  // Shops
+  shops: {
+    title: 'Skate Shops',
+    addShop: 'Add Shop',
+    editShop: 'Edit Shop',
+    shopDetails: 'Shop Details',
+    shopName: 'Shop Name',
+    hours: 'Hours',
+    phone: 'Phone',
+    website: 'Website',
+    services: 'Services',
+    brands: 'Brands',
+    supportLocal: 'Support Local',
+  },
+
+  // Wallet
+  wallet: {
+    title: 'Wallet',
+    balance: 'Balance',
+    send: 'Send',
+    receive: 'Receive',
+    transactions: 'Transactions',
+    history: 'History',
+    noTransactions: 'No transactions yet',
+    sendSats: 'Send Sats',
+    receiveSats: 'Receive Sats',
+    amount: 'Amount',
+    recipient: 'Recipient',
+    lightning: 'Lightning',
+    onChain: 'On-chain',
+    invoice: 'Invoice',
+    address: 'Address',
+    scanQR: 'Scan QR',
+    paste: 'Paste',
+    payInvoice: 'Pay Invoice',
+    createInvoice: 'Create Invoice',
+    copied: 'Copied to clipboard!',
+    insufficientFunds: 'Insufficient funds',
+    paymentSent: 'Payment sent!',
+    paymentReceived: 'Payment received!',
+    cashu: {
+      title: 'Cashu Wallet',
+      tokens: 'Tokens',
+      mint: 'Mint',
+      mints: 'Mints',
+      manageMints: 'Manage Mints',
+      addMint: 'Add Mint',
+      removeMint: 'Remove Mint',
+      defaultMint: 'Default Mint',
+      backup: 'Backup',
+      restore: 'Restore',
+      recoveryPhrase: 'Recovery Phrase',
+      viewRecoveryPhrase: 'View Recovery Phrase',
+      seedWarning: 'This is like your Nostr nsec - keep it secret and backed up!',
+    },
+  },
+
+  // Settings
+  settings: {
+    title: 'Settings',
+    profile: 'Profile',
+    editProfile: 'Edit Profile',
+    account: 'Account',
+    security: 'Security',
+    relays: 'Relays',
+    appearance: 'Appearance',
+    language: 'Language',
+    notifications: 'Notifications',
+    privacy: 'Privacy',
+    about: 'About',
+    help: 'Help',
+    feedback: 'Feedback',
+    version: 'Version',
+    // Profile fields
+    displayName: 'Display Name',
+    username: 'Username',
+    bio: 'Bio',
+    website: 'Website',
+    lightningAddress: 'Lightning Address',
+    profilePicture: 'Profile Picture',
+    banner: 'Banner',
+    saveProfile: 'Save Profile',
+    // Security
+    backupKeys: 'Backup Keys',
+    exportKeys: 'Export Keys',
+    secretKey: 'Secret Key',
+    publicKey: 'Public Key',
+    showSecretKey: 'Show Secret Key',
+    hideSecretKey: 'Hide Secret Key',
+    copyKey: 'Copy Key',
+    keysBackedUp: "You've confirmed that your keys are safely backed up.",
+    keysNotBackedUp: 'Make sure to backup your recovery phrase or secret key!',
+    // Language
+    selectLanguage: 'Select Language',
+    english: 'English',
+    spanish: 'Spanish',
+  },
+
+  // Lab / Coaches
+  lab: {
+    title: 'The Lab',
+    subtitle: 'Level up your skating',
+    coaches: 'Coaches',
+    filmers: 'Filmers',
+    findCoach: 'Find a Coach',
+    becomeCoach: 'Become a Coach',
+    findFilmer: 'Find a Filmer',
+    becomeFilmer: 'Become a Filmer',
+    hourlyRate: 'Hourly Rate',
+    experience: 'Experience',
+    specialties: 'Specialties',
+    availability: 'Availability',
+    bookSession: 'Book a Session',
+    contactCoach: 'Contact Coach',
+    noCoaches: 'No coaches found in your area',
+    noFilmers: 'No filmers found in your area',
+  },
+
+  // Rewards
+  rewards: {
+    title: 'Rewards',
+    yourPoints: 'Your Points',
+    earnPoints: 'Earn Points',
+    redeemPoints: 'Redeem Points',
+    leaderboard: 'Leaderboard',
+    achievements: 'Achievements',
+    dailyTasks: 'Daily Tasks',
+    weeklyTasks: 'Weekly Tasks',
+  },
+
+  // Zaps
+  zaps: {
+    zapButton: 'Zap',
+    sendZap: 'Send Zap',
+    zapAmount: 'Zap Amount',
+    customAmount: 'Custom Amount',
+    addMessage: 'Add a message (optional)',
+    sending: 'Sending...',
+    sent: 'Zap sent!',
+    failed: 'Zap failed',
+    received: 'You received a zap!',
+  },
+
+  // Errors
+  errors: {
+    somethingWentWrong: 'Something went wrong',
+    tryAgainLater: 'Please try again later',
+    notFound: 'Not found',
+    pageNotFound: 'Page not found',
+    unauthorized: 'Unauthorized',
+    loginRequired: 'Please log in to continue',
+    networkError: 'Network error',
+    checkConnection: 'Please check your internet connection',
+    invalidInput: 'Invalid input',
+    requiredField: 'This field is required',
+  },
+
+  // Time/Date
+  time: {
+    today: 'Today',
+    yesterday: 'Yesterday',
+    tomorrow: 'Tomorrow',
+    thisWeek: 'This week',
+    nextWeek: 'Next week',
+    thisMonth: 'This month',
+    justNow: 'Just now',
+    minutesAgo: '{{count}} minutes ago',
+    hoursAgo: '{{count}} hours ago',
+    daysAgo: '{{count}} days ago',
+  },
+
+  // Footer
+  footer: {
+    vibedWith: 'Vibed with',
+    poweredBy: 'Powered by',
+    openSource: 'Open Source',
+    contribute: 'Contribute',
+    decentralized: 'Decentralized',
+    communityOwned: 'Community Owned',
+  },
+
+  // Create Spot Page
+  createSpot: {
+    title: 'Add a Skate Spot',
+    subtitle: 'Share a skateboarding spot with the community',
+    backToMap: 'Back to Map',
+    namePlaceholder: 'e.g., Hollywood High School',
+    descriptionPlaceholder: 'Describe the spot, obstacles, best times to skate, security info, etc.',
+    addressPlaceholder: 'e.g., 1521 N Highland Ave, Los Angeles, CA',
+    selectType: 'Select spot type',
+    selectBustLevel: 'Select bust level',
+    uploadPhotos: 'Upload',
+    dragDrop: 'Drag and drop or click to upload',
+    maxPhotos: 'Max 5 photos',
+    publishing: 'Publishing...',
+    success: 'Spot published successfully!',
+    error: 'Failed to publish spot',
+    locationRequired: 'Please select a location on the map',
+    useCurrentLocation: 'Use my current location',
+    pickOnMap: 'Pick Location on Map',
+    loginToAdd: 'You need to log in to add a skate spot.',
+    requiredFields: 'Tell us about this spot. All fields marked with * are required.',
+    coordinates: 'Coordinates',
+    latitudePlaceholder: 'Latitude (e.g., 34.1012)',
+    longitudePlaceholder: 'Longitude (e.g., -118.3389)',
+    gettingLocation: 'Getting location...',
+    accessType: 'Access Type',
+    publicTitle: 'Public - Open to Everyone',
+    publicDesc: 'Skate parks, public plazas, street spots',
+    privateTitle: 'Private Property - Permission Needed',
+    privateDesc: 'Backyard ramps, private land, gated spots',
+    localsTitle: 'Ask Locals First',
+    localsDesc: "Respect the spot, don't blow it out",
+    contactInfo: 'Contact Information',
+    contactPlaceholder: 'e.g., Phone number, Instagram, email...',
+    contactHintPrivate: 'How should people contact you for permission?',
+    contactHintLocals: 'How should people reach out to ask about the spot?',
+  },
+
+  // Create Event Page
+  createEvent: {
+    title: 'Create an Event',
+    subtitle: 'Organize a skateboarding event for the community',
+    backToEvents: 'Back to Events',
+    namePlaceholder: 'e.g., Summer Skate Session',
+    descriptionPlaceholder: 'Describe the event, what to expect, rules, prizes, etc.',
+    selectType: 'Select event type',
+    venuePlaceholder: 'e.g., Venice Beach Skatepark, CA',
+    selectDate: 'Select date',
+    selectTime: 'Select time',
+    ticketPricePlaceholder: 'Leave empty for free events',
+    publishing: 'Publishing...',
+    success: 'Event published successfully!',
+    error: 'Failed to publish event',
+    loginToCreate: 'You need to log in to create an event.',
+    requiredFields: 'Tell us about this event. All fields marked with * are required.',
+    startDateTime: 'Start Date & Time',
+    endDateTime: 'End Date & Time (optional)',
+    coordinatesOptional: 'Coordinates (optional)',
+    coverImage: 'Cover Image',
+    uploadCover: 'Upload cover image',
+    nip05Recommended: 'NIP-05 Verification Recommended',
+    nip05Desc: 'Add a NIP-05 identifier to your profile to verify your identity and build trust with attendees.',
+    addNip05: 'Add NIP-05 in Settings',
+  },
+
+  // Spot Detail Page
+  spotDetail: {
+    postedBy: 'Posted by',
+    getDirections: 'Get Directions',
+    reviews: 'Reviews',
+    noReviews: 'No reviews yet',
+    beFirstReview: 'Be the first to review this spot!',
+    writeReview: 'Write a Review',
+    submitReview: 'Submit Review',
+    rating: 'Rating',
+    reviewPlaceholder: 'Share your experience at this spot...',
+    relatedSpots: 'Nearby Spots',
+  },
+
+  // Event Detail Page
+  eventDetail: {
+    organizedBy: 'Organized by',
+    eventInfo: 'Event Info',
+    location: 'Location',
+    dateTime: 'Date & Time',
+    price: 'Price',
+    attendeeCount: '{{count}} going',
+    interested: 'Interested',
+    going: 'Going',
+    notGoing: 'Not Going',
+    share: 'Share Event',
+  },
+
+  // Profile Page
+  profile: {
+    posts: 'Posts',
+    spots: 'Spots',
+    events: 'Events',
+    following: 'Following',
+    followers: 'Followers',
+    editProfile: 'Edit Profile',
+    follow: 'Follow',
+    unfollow: 'Unfollow',
+    noPostsYet: 'No posts yet',
+    noBio: 'No bio yet',
+    zapProfile: 'Zap this skater',
+  },
+
+  // About Page
+  about: {
+    title: 'About SkateSpots',
+    subtitle: 'A decentralized skateboarding community',
+    whatIs: 'What is SkateSpots?',
+    whatIsDesc: 'SkateSpots is a community-powered platform for discovering skateboarding locations worldwide. Built on Nostr, it gives skaters true ownership of their data.',
+    features: 'Features',
+    featuresDesc: 'Find spots, create events, connect with coaches, and support your local skate shops—all in one place.',
+    nostr: 'Built on Nostr',
+    nostrDesc: 'Nostr is a simple, open protocol that enables truly censorship-resistant global communication. Your account and data belong to you.',
+    openSource: 'Open Source',
+    openSourceDesc: 'SkateSpots is completely open source. Contribute, fork, or run your own instance.',
+    lightning: 'Lightning Payments',
+    lightningDesc: 'Zap your favorite skaters, coaches, and content creators with Bitcoin Lightning payments.',
+  },
+
+  // FAQ Page
+  faq: {
+    title: 'Frequently Asked Questions',
+    subtitle: 'Everything you need to know about SkateSpots',
+    whatIsNostr: 'What is Nostr?',
+    whatIsNostrAnswer: 'Nostr is an open protocol for decentralized social networking. Unlike traditional platforms, you own your data and identity.',
+    howToStart: 'How do I get started?',
+    howToStartAnswer: 'Click "Sign Up" to create a new Nostr account, or "Log In" if you already have one. You can use a browser extension, mobile app, or secret key.',
+    whatAreZaps: 'What are Zaps?',
+    whatAreZapsAnswer: 'Zaps are Bitcoin Lightning tips you can send to other users. They\'re a way to show appreciation for great content or support creators.',
+    howToAddSpot: 'How do I add a spot?',
+    howToAddSpotAnswer: 'Log in to your account, click "Add Spot" and fill in the details including location, photos, and description.',
+    isItFree: 'Is SkateSpots free?',
+    isItFreeAnswer: 'Yes! SkateSpots is completely free to use. You can optionally send Zaps (Bitcoin tips) to other users.',
+    canIEditSpot: 'Can I edit or delete my spots?',
+    canIEditSpotAnswer: 'Yes, you can edit spots you\'ve created. Due to the decentralized nature of Nostr, deletion requests are sent but some relays may retain data.',
+  },
+
+  // Onboarding
+  onboarding: {
+    welcome: 'Welcome to SkateSpots!',
+    welcomeDesc: 'Let\'s get you set up in just a few steps.',
+    step1Title: 'Create Your Account',
+    step1Desc: 'Your Nostr keys are being generated. This is like a password that you control.',
+    step2Title: 'Backup Your Keys',
+    step2Desc: 'Save your recovery phrase somewhere safe. This is the only way to recover your account!',
+    step3Title: 'Set Up Your Profile',
+    step3Desc: 'Tell the community about yourself.',
+    step4Title: 'You\'re Ready!',
+    step4Desc: 'Start exploring spots, events, and connecting with skaters.',
+    skipForNow: 'Skip for now',
+    continueToApp: 'Continue to App',
+  },
+
+  // Lab (Coaches/Filmers)
+  lab: {
+    title: 'The Lab',
+    subtitle: 'Level up your skating',
+    coaches: 'Coaches',
+    filmers: 'Filmers',
+    findCoach: 'Find a Coach',
+    becomeCoach: 'Become a Coach',
+    findFilmer: 'Find a Filmer',
+    becomeFilmer: 'Become a Filmer',
+    hourlyRate: 'Hourly Rate',
+    experience: 'Experience',
+    specialties: 'Specialties',
+    availability: 'Availability',
+    bookSession: 'Book a Session',
+    contactCoach: 'Contact Coach',
+    noCoaches: 'No coaches found in your area',
+    noFilmers: 'No filmers found in your area',
+  },
+
+  // Lab Page
+  labPage: {
+    title: 'The Lab',
+    subtitle: 'Learn tricks. Capture moments. Connect with other Skaters',
+    coachesTab: 'Coaching',
+    filmersTab: 'Filming',
+    offerCoaching: 'OFFER COACHING',
+    offerFilming: 'OFFER FILMING',
+    loginToOffer: 'Login to offer services',
+    whatToLearn: 'WHAT DO YOU WANT TO LEARN?',
+    whatContent: 'WHAT TYPE OF CONTENT?',
+    selectSkillsDesc: "Select skills and we'll match you with coaches",
+    selectFilmingDesc: "Select filming services you're looking for",
+    searchPlaceholder: 'Search by name, location, or skills...',
+    noServicesYet: 'NO SERVICES YET',
+    beFirstToOffer: 'Be the first to offer coaching or filming services to the community!',
+    skills: 'Skills',
+    rate: 'Rate',
+    perHour: '/hour',
+    contact: 'Contact',
+    viewProfile: 'View Profile',
+    noProfilesYet: 'No profiles yet',
+    beFirstCoach: 'Be the first to register as a coach!',
+    beFirstFilmer: 'Be the first to register as a filmer!',
+    yearsExperience: 'years experience',
+  },
+
+  // Become Coach/Filmer Forms
+  becomeCoach: {
+    title: 'Become a Coach',
+    subtitle: 'Share your skills and help other skaters progress',
+    bioPlaceholder: 'Tell us about your skating background and teaching style...',
+    skillsPlaceholder: 'e.g., kickflip, heelflip, grinds, bowls',
+    selectSkills: 'Select skills you can teach',
+    hourlyRate: 'Hourly Rate (sats)',
+    ratePlaceholder: 'e.g., 5000',
+    locationPlaceholder: 'Your city or area',
+    publishing: 'Publishing profile...',
+    success: 'Coach profile created!',
+    error: 'Failed to create profile',
+  },
+
+  becomeFilmer: {
+    title: 'Become a Filmer',
+    subtitle: 'Capture the best clips for the community',
+    bioPlaceholder: 'Tell us about your filming experience and equipment...',
+    specialtiesPlaceholder: 'e.g., fisheye, long lens, drone, editing',
+    selectSpecialties: 'Select your specialties',
+    hourlyRate: 'Hourly Rate (sats)',
+    ratePlaceholder: 'e.g., 5000',
+    locationPlaceholder: 'Your city or area',
+    portfolioUrl: 'Portfolio URL',
+    portfolioPlaceholder: 'Link to your work (YouTube, Instagram, etc.)',
+    publishing: 'Publishing profile...',
+    success: 'Filmer profile created!',
+    error: 'Failed to create profile',
+  },
+
+  // Skills (keep in English as skate terminology)
+  skills: {
+    kickflip: 'Kickflip',
+    heelflip: 'Heelflip',
+    ollie: 'Ollie',
+    treflip: '360 Flip',
+    shuvit: 'Shuvit',
+    hardflip: 'Hardflip',
+    varial: 'Varial',
+    nollie: 'Nollie',
+    fakie: 'Fakie',
+    switch: 'Switch',
+    grind: 'Grind',
+    slide: 'Slide',
+    manual: 'Manual',
+    transition: 'Transition',
+    bowl: 'Bowl',
+    vert: 'Vert',
+    street: 'Street',
+    flatground: 'Flatground',
+  },
+
+  // Food Spots
+  food: {
+    title: 'Food Spots',
+    subtitle: 'Fuel up before or after your session',
+    addFood: 'Add Food Spot',
+    categories: {
+      all: 'All',
+      burgers: 'Burgers',
+      pizza: 'Pizza',
+      tacos: 'Tacos',
+      coffee: 'Coffee',
+      drinks: 'Drinks',
+      snacks: 'Snacks',
+    },
+    skaterFriendly: 'Skater Friendly',
+    nearSpots: 'Near Skate Spots',
+  },
+
+  // Marketplace
+  marketplace: {
+    title: 'Marketplace',
+    subtitle: 'Buy, sell, and trade skate gear',
+    addListing: 'Add Listing',
+    condition: 'Condition',
+    conditions: {
+      new: 'New',
+      likeNew: 'Like New',
+      good: 'Good',
+      fair: 'Fair',
+      poor: 'Poor',
+    },
+    categories: {
+      all: 'All',
+      decks: 'Decks',
+      trucks: 'Trucks',
+      wheels: 'Wheels',
+      bearings: 'Bearings',
+      shoes: 'Shoes',
+      clothing: 'Clothing',
+      protection: 'Protection',
+      other: 'Other',
+    },
+    priceRange: 'Price Range',
+    location: 'Location',
+    seller: 'Seller',
+    contact: 'Contact Seller',
+    makeOffer: 'Make Offer',
+    sold: 'Sold',
+    available: 'Available',
+    gear: 'Gear',
+    sellGear: 'Sell Gear',
+    wantToBuy: 'Want to Buy',
+  },
+
+  // Weather
+  weather: {
+    title: 'Weather',
+    current: 'Current Conditions',
+    forecast: 'Forecast',
+    humidity: 'Humidity',
+    wind: 'Wind',
+    feelsLike: 'Feels like',
+    goodForSkating: 'Good for skating!',
+    notIdeal: 'Not ideal conditions',
+    allWeather: 'All Weather',
+    goodWeather: 'Good Weather',
+    perfectWeather: 'Perfect Weather',
+  },
+
+  // Radio
+  radio: {
+    title: 'NoGood Radio',
+    nowPlaying: 'Now Playing',
+    loading: 'Loading stream...',
+    play: 'Play',
+    pause: 'Pause',
+    volume: 'Volume',
+    mute: 'Mute',
+  },
+};
+
+export default en;
diff --git a/src/src/i18n/es.ts b/src/src/i18n/es.ts
new file mode 100644
index 0000000..c3eaa0a
--- /dev/null
+++ b/src/src/i18n/es.ts
@@ -0,0 +1,800 @@
+/**
+ * Spanish translations (Spain / Castellano)
+ * Note: Skateboarding trick names and terminology stay in English
+ * (kickflip, ollie, grind, etc. are universal in skate culture)
+ */
+const es = {
+  // Common
+  common: {
+    loading: 'Cargando...',
+    error: 'Error',
+    save: 'Guardar',
+    cancel: 'Cancelar',
+    delete: 'Eliminar',
+    edit: 'Editar',
+    create: 'Crear',
+    submit: 'Enviar',
+    close: 'Cerrar',
+    back: 'Atrás',
+    next: 'Siguiente',
+    done: 'Listo',
+    search: 'Buscar',
+    filter: 'Filtrar',
+    sort: 'Ordenar',
+    share: 'Compartir',
+    copy: 'Copiar',
+    copied: '¡Copiado!',
+    viewAll: 'Ver Todo',
+    seeMore: 'Ver Más',
+    showMore: 'Mostrar Más',
+    showLess: 'Mostrar Menos',
+    noResults: 'No se encontraron resultados',
+    tryAgain: 'Intentar de Nuevo',
+    learnMore: 'Saber Más',
+    getStarted: 'Comenzar',
+    yes: 'Sí',
+    no: 'No',
+    or: 'o',
+    and: 'y',
+    free: 'Gratis',
+    new: 'Nuevo',
+    popular: 'Popular',
+    featured: 'Destacado',
+    verified: 'Verificado',
+    sats: 'sats',
+    clear: 'Limpiar',
+    clearFilters: 'Limpiar Filtros',
+    clearAll: 'Limpiar Todo',
+  },
+
+  // Navigation
+  nav: {
+    home: 'Inicio',
+    map: 'Tiendas y Spots',
+    lab: 'El Lab',
+    events: 'Eventos',
+    wallet: 'Billetera',
+    settings: 'Ajustes',
+    more: 'Más',
+    rewards: 'Recompensas',
+    stats: 'Estadísticas',
+    about: 'Acerca de',
+    food: 'Comida',
+    marketplace: 'Mercado',
+  },
+
+  // Authentication
+  auth: {
+    login: 'Iniciar Sesión',
+    logout: 'Cerrar Sesión',
+    signUp: 'Registrarse',
+    signUpTitle: '¿Nuevo en Nostr?',
+    signUpDesc: 'Crea una cuenta nueva para empezar. Es gratis y abierto.',
+    orLogIn: 'O inicia sesión',
+    loginWithExtension: 'Iniciar con Extensión',
+    loginWithAmber: 'Iniciar con Amber (Android)',
+    loginWithKey: 'Clave Secreta (nsec) o Frase de Recuperación',
+    loginWithBunker: 'Iniciar con Nostr Connect',
+    bunkerUri: 'Cadena de Conexión del Bunker',
+    openAmber: 'Abrir Amber',
+    connectToBunker: 'Conectar al Bunker',
+    noExtension: 'No se detectó ninguna extensión.',
+    extensionHelp: 'Intenta usar el botón Registrarse arriba para crear una cuenta nueva, o usa las pestañas Amber, Clave o Bunker si tienes credenciales existentes.',
+    amberDesc: 'Amber es una app segura de firma Nostr para dispositivos Android. Haz clic en el botón para abrir Amber y autorizar el acceso.',
+    bunkerDesc: 'Accede a tu cuenta desde cualquier dispositivo usando un firmador remoto (bunker). Tus claves se mantienen seguras en el servidor, nunca expuestas a sitios web.',
+    keyPlaceholder: 'nsec1... o tu frase de recuperación de 12 palabras',
+    keyHint: 'Puedes pegar tu clave nsec o tu frase de recuperación de 12 palabras',
+    uploadKeyFile: 'Subir Archivo de Clave',
+    loggingIn: 'Iniciando sesión...',
+    connecting: 'Conectando...',
+    verifying: 'Verificando...',
+  },
+
+  // Backup Reminder
+  backup: {
+    title: '¡Respalda Tu Cuenta!',
+    subtitle: 'Recordatorio de seguridad importante',
+    message: 'Tu frase de recuperación o clave secreta (nsec) es la ÚNICA forma de acceder a tu cuenta desde otros dispositivos.',
+    warning: '¡Si la pierdes, pierdes tu cuenta para siempre!',
+    backupNow: 'Respaldar Ahora',
+    confirmed: 'Ya la Respaldé',
+    remindLater: 'Recordarme después',
+  },
+
+  // PWA Install
+  pwa: {
+    installTitle: 'Instalar SkateSpots',
+    installSubtitle: 'Obtén la experiencia completa de la app',
+    addToHomeScreen: 'Añadir a Pantalla de Inicio',
+    installApp: 'Instalar App',
+    maybeLater: 'Quizás después',
+    gotIt: '¡Entendido!',
+    benefits: {
+      fast: 'Súper Rápido',
+      offline: 'Funciona Sin Internet',
+      fullAccess: 'Acceso Completo',
+    },
+    iosStep1: 'Toca el botón Compartir',
+    iosStep1Hint: 'en la parte inferior de Safari',
+    iosStep2: 'Desplázate y toca "Añadir a pantalla de inicio"',
+    iosStep2Hint: 'en el menú de compartir',
+    iosStep3: 'Toca "Añadir" para instalar',
+    iosStep3Hint: 'La app aparecerá en tu pantalla de inicio',
+    androidStep1: 'Toca el botón de menú',
+    androidStep1Hint: '(tres puntos) en tu navegador',
+    androidStep2: 'Selecciona "Añadir a pantalla de inicio"',
+    androidStep2Hint: 'o "Instalar aplicación"',
+    androidStep3: 'Confirma para instalar',
+    androidStep3Hint: 'La app aparecerá en tu pantalla de inicio',
+    tagline: 'Gratis • Funciona sin conexión • Rápido y confiable',
+  },
+
+  // Home/Index Page
+  home: {
+    tagline: 'Impulsado por la Comunidad • Basado en Relays',
+    title: 'SKATE SPOTS',
+    subtitle: 'Descubre Spots • Reúnete • Aprende Trucos • Apoya Locales',
+    description: 'El skate real pasa offline - esta herramienta te ayuda a encontrarlo.',
+    betaWarning: 'BETA - En Construcción • Usa Bajo Tu Propio Riesgo',
+    pwaHint: 'App Web Progresiva - Instala en Tu Dispositivo',
+    exploreMap: 'Explorar Mapa',
+    addSpot: 'Añadir Spot',
+    globalSpots: 'Spots Globales',
+    openCommunity: 'Comunidad Abierta',
+    lightningZaps: 'Zaps Lightning',
+    featuredSpots: 'Spots Destacados',
+    featuredSpotsDesc: 'Spots de skate verificados por la comunidad de todo el mundo',
+    upcomingEvents: 'Próximos Eventos',
+    upcomingEventsDesc: 'Competiciones, quedadas y sessions que vienen pronto',
+    noSpotsYet: 'Aún no hay spots',
+    noSpotsHint: '¡Sé el primero en añadir un spot de skate!',
+    noEventsYet: 'No hay próximos eventos',
+    noEventsHint: '¡Vuelve más tarde o crea uno!',
+    theLab: 'El Lab',
+    theLabDesc: 'Aprende trucos, encuentra coaches y mejora tu skate',
+    coaches: 'Coaches',
+    coachesDesc: 'Aprende de skaters experimentados que pueden ayudarte a progresar',
+    filmers: 'Filmers',
+    filmersDesc: 'Conecta con filmers para capturar tus mejores clips',
+    findCoach: 'Buscar Coach',
+    becomeCoach: 'Ser Coach',
+    findFilmer: 'Buscar Filmer',
+    becomeFilmer: 'Ser Filmer',
+    viewAllSpots: 'Ver Todos los Spots',
+    viewAllEvents: 'Ver Todos los Eventos',
+    createEvent: 'Crear Evento',
+    readyToShare: '¿Listo para Compartir?',
+    readyToShareDesc: 'Ayuda a crecer la comunidad de skateboarding añadiendo tus spots favoritos. Cada ubicación que compartas ayuda a otros skaters a descubrir nuevos lugares para patinar.',
+  },
+
+  // Map Page
+  mapPage: {
+    title: 'Tiendas y Spots',
+    spots: 'Spots',
+    shops: 'Tiendas',
+    filters: 'Filtros',
+    listView: 'Lista',
+    mapView: 'Mapa',
+    nearMe: 'Cerca de Mí',
+    searchPlaceholder: 'Buscar spots...',
+    noSpotsInArea: 'No hay spots en esta área',
+    zoomIn: 'Acercar',
+    zoomOut: 'Alejar',
+    myLocation: 'Mi Ubicación',
+    locationsFound: '{{count}} ubicaciones encontradas',
+    spotsOnly: 'Solo Spots',
+    shopsOnly: 'Solo Tiendas',
+    spotsAndShops: 'Spots y Tiendas',
+    noSpotsMatch: 'Ningún spot coincide con tus filtros.',
+    noSpotsYet: 'Aún no se han añadido spots.',
+    addFirstSpot: 'Añadir Primer Spot',
+  },
+
+  // Spots
+  spots: {
+    addSpot: 'Añadir Spot',
+    editSpot: 'Editar Spot',
+    spotDetails: 'Detalles del Spot',
+    spotName: 'Nombre del Spot',
+    spotType: 'Tipo de Spot',
+    description: 'Descripción',
+    location: 'Ubicación',
+    address: 'Dirección',
+    photos: 'Fotos',
+    addPhotos: 'Añadir Fotos',
+    obstacles: 'Obstáculos',
+    features: 'Características',
+    bustLevel: 'Nivel de Riesgo',
+    bestTime: 'Mejor Horario',
+    tips: 'Consejos',
+    reviews: 'Reseñas',
+    addReview: 'Añadir Reseña',
+    reportSpot: 'Reportar Spot',
+    directions: 'Cómo Llegar',
+    shareSpot: 'Compartir Spot',
+    createdBy: 'Creado por',
+    lastUpdated: 'Última actualización',
+    // Spot types (keeping English skate terms)
+    types: {
+      park: 'Skatepark',
+      street: 'Street Spot',
+      diy: 'Spot DIY',
+      plaza: 'Plaza',
+      indoor: 'Indoor',
+      bowl: 'Bowl',
+      vert: 'Vert',
+      miniramp: 'Mini Ramp',
+    },
+    // Bust levels
+    bustLevels: {
+      chill: 'Tranqui',
+      moderate: 'Moderado',
+      sketchy: 'Arriesgado',
+      heavy: 'Peligroso',
+    },
+  },
+
+  // Events
+  events: {
+    title: 'Eventos de Skate',
+    createEvent: 'Crear Evento',
+    editEvent: 'Editar Evento',
+    eventDetails: 'Detalles del Evento',
+    eventName: 'Nombre del Evento',
+    eventType: 'Tipo de Evento',
+    date: 'Fecha',
+    time: 'Hora',
+    startDate: 'Fecha de Inicio',
+    endDate: 'Fecha de Fin',
+    venue: 'Lugar',
+    organizer: 'Organizador',
+    attendees: 'Asistentes',
+    going: 'Voy',
+    interested: 'Interesado',
+    rsvp: 'Confirmar',
+    ticketPrice: 'Precio de Entrada',
+    freeEntry: 'Entrada Gratis',
+    register: 'Registrarse',
+    moreInfo: 'Más Info',
+    upcomingEvents: 'Próximos',
+    pastEvents: 'Pasados',
+    noEvents: 'No se encontraron eventos',
+    findEvents: 'Encuentra competencias, demos, sessions y más',
+    searchPlaceholder: 'Buscar eventos...',
+    loginToCreate: 'Inicia sesión para crear eventos',
+    noEventsMatch: 'Ningún evento próximo coincide con tus filtros.',
+    noUpcoming: 'No se encontraron próximos eventos.',
+    noPast: 'No se encontraron eventos pasados.',
+    // Event types (keeping some English skate terms)
+    types: {
+      contest: 'Competencia',
+      session: 'Session',
+      meetup: 'Encuentro',
+      premiere: 'Premiere de Video',
+      workshop: 'Taller',
+      demo: 'Demo',
+      jam: 'Jam',
+    },
+  },
+
+  // Shops
+  shops: {
+    title: 'Tiendas de Skate',
+    addShop: 'Añadir Tienda',
+    editShop: 'Editar Tienda',
+    shopDetails: 'Detalles de la Tienda',
+    shopName: 'Nombre de la Tienda',
+    hours: 'Horario',
+    phone: 'Teléfono',
+    website: 'Sitio Web',
+    services: 'Servicios',
+    brands: 'Marcas',
+    supportLocal: 'Apoya lo Local',
+  },
+
+  // Wallet
+  wallet: {
+    title: 'Billetera',
+    balance: 'Saldo',
+    send: 'Enviar',
+    receive: 'Recibir',
+    transactions: 'Transacciones',
+    history: 'Historial',
+    noTransactions: 'Aún no hay transacciones',
+    sendSats: 'Enviar Sats',
+    receiveSats: 'Recibir Sats',
+    amount: 'Cantidad',
+    recipient: 'Destinatario',
+    lightning: 'Lightning',
+    onChain: 'On-chain',
+    invoice: 'Factura',
+    address: 'Dirección',
+    scanQR: 'Escanear QR',
+    paste: 'Pegar',
+    payInvoice: 'Pagar Factura',
+    createInvoice: 'Crear Factura',
+    copied: '¡Copiado al portapapeles!',
+    insufficientFunds: 'Fondos insuficientes',
+    paymentSent: '¡Pago enviado!',
+    paymentReceived: '¡Pago recibido!',
+    cashu: {
+      title: 'Billetera Cashu',
+      tokens: 'Tokens',
+      mint: 'Mint',
+      mints: 'Mints',
+      manageMints: 'Administrar Mints',
+      addMint: 'Añadir Mint',
+      removeMint: 'Eliminar Mint',
+      defaultMint: 'Mint Predeterminado',
+      backup: 'Respaldar',
+      restore: 'Restaurar',
+      recoveryPhrase: 'Frase de Recuperación',
+      viewRecoveryPhrase: 'Ver Frase de Recuperación',
+      seedWarning: '¡Esto es como tu nsec de Nostr - mantenlo secreto y respaldado!',
+    },
+  },
+
+  // Settings
+  settings: {
+    title: 'Ajustes',
+    profile: 'Perfil',
+    editProfile: 'Editar Perfil',
+    account: 'Cuenta',
+    security: 'Seguridad',
+    relays: 'Relays',
+    appearance: 'Apariencia',
+    language: 'Idioma',
+    notifications: 'Notificaciones',
+    privacy: 'Privacidad',
+    about: 'Acerca de',
+    help: 'Ayuda',
+    feedback: 'Comentarios',
+    version: 'Versión',
+    // Profile fields
+    displayName: 'Nombre para Mostrar',
+    username: 'Nombre de Usuario',
+    bio: 'Biografía',
+    website: 'Sitio Web',
+    lightningAddress: 'Dirección Lightning',
+    profilePicture: 'Foto de Perfil',
+    banner: 'Banner',
+    saveProfile: 'Guardar Perfil',
+    // Security
+    backupKeys: 'Respaldar Claves',
+    exportKeys: 'Exportar Claves',
+    secretKey: 'Clave Secreta',
+    publicKey: 'Clave Pública',
+    showSecretKey: 'Mostrar Clave Secreta',
+    hideSecretKey: 'Ocultar Clave Secreta',
+    copyKey: 'Copiar Clave',
+    keysBackedUp: 'Has confirmado que tus claves están respaldadas de forma segura.',
+    keysNotBackedUp: '¡Asegúrate de respaldar tu frase de recuperación o clave secreta!',
+    // Language
+    selectLanguage: 'Seleccionar Idioma',
+    english: 'Inglés',
+    spanish: 'Español',
+  },
+
+  // Lab / Coaches
+  lab: {
+    title: 'El Lab',
+    subtitle: 'Mejora tu skate',
+    coaches: 'Coaches',
+    filmers: 'Filmers',
+    findCoach: 'Buscar Coach',
+    becomeCoach: 'Ser Coach',
+    findFilmer: 'Buscar Filmer',
+    becomeFilmer: 'Ser Filmer',
+    hourlyRate: 'Tarifa por Hora',
+    experience: 'Experiencia',
+    specialties: 'Especialidades',
+    availability: 'Disponibilidad',
+    bookSession: 'Reservar Sesión',
+    contactCoach: 'Contactar Coach',
+    noCoaches: 'No se encontraron coaches en tu área',
+    noFilmers: 'No se encontraron filmers en tu área',
+  },
+
+  // Rewards
+  rewards: {
+    title: 'Recompensas',
+    yourPoints: 'Tus Puntos',
+    earnPoints: 'Ganar Puntos',
+    redeemPoints: 'Canjear Puntos',
+    leaderboard: 'Tabla de Líderes',
+    achievements: 'Logros',
+    dailyTasks: 'Tareas Diarias',
+    weeklyTasks: 'Tareas Semanales',
+  },
+
+  // Zaps
+  zaps: {
+    zapButton: 'Zap',
+    sendZap: 'Enviar Zap',
+    zapAmount: 'Cantidad del Zap',
+    customAmount: 'Cantidad Personalizada',
+    addMessage: 'Añadir mensaje (opcional)',
+    sending: 'Enviando...',
+    sent: '¡Zap enviado!',
+    failed: 'Zap falló',
+    received: '¡Recibiste un zap!',
+  },
+
+  // Errors
+  errors: {
+    somethingWentWrong: 'Algo salió mal',
+    tryAgainLater: 'Por favor intenta de nuevo más tarde',
+    notFound: 'No encontrado',
+    pageNotFound: 'Página no encontrada',
+    unauthorized: 'No autorizado',
+    loginRequired: 'Por favor inicia sesión para continuar',
+    networkError: 'Error de red',
+    checkConnection: 'Por favor verifica tu conexión a internet',
+    invalidInput: 'Entrada inválida',
+    requiredField: 'Este campo es obligatorio',
+  },
+
+  // Time/Date
+  time: {
+    today: 'Hoy',
+    yesterday: 'Ayer',
+    tomorrow: 'Mañana',
+    thisWeek: 'Esta semana',
+    nextWeek: 'Próxima semana',
+    thisMonth: 'Este mes',
+    justNow: 'Ahora mismo',
+    minutesAgo: 'hace {{count}} minutos',
+    hoursAgo: 'hace {{count}} horas',
+    daysAgo: 'hace {{count}} días',
+  },
+
+  // Footer
+  footer: {
+    vibedWith: 'Creado con',
+    poweredBy: 'Impulsado por',
+    openSource: 'Código Abierto',
+    contribute: 'Contribuir',
+    decentralized: 'Descentralizado',
+    communityOwned: 'Propiedad de la Comunidad',
+  },
+
+  // Create Spot Page
+  createSpot: {
+    title: 'Añadir un Spot de Skate',
+    subtitle: 'Comparte un spot de skate con la comunidad',
+    backToMap: 'Volver al Mapa',
+    namePlaceholder: 'ej., Hollywood High School',
+    descriptionPlaceholder: 'Describe el spot, obstáculos, mejores horarios, info de seguridad, etc.',
+    addressPlaceholder: 'ej., 1521 N Highland Ave, Los Angeles, CA',
+    selectType: 'Selecciona el tipo de spot',
+    selectBustLevel: 'Selecciona el nivel de riesgo',
+    uploadPhotos: 'Subir',
+    dragDrop: 'Arrastra y suelta o haz clic para subir',
+    maxPhotos: 'Máximo 5 fotos',
+    publishing: 'Publicando...',
+    success: '¡Spot publicado exitosamente!',
+    error: 'Error al publicar el spot',
+    locationRequired: 'Por favor selecciona una ubicación en el mapa',
+    useCurrentLocation: 'Usar mi ubicación actual',
+    pickOnMap: 'Elegir Ubicación en el Mapa',
+    loginToAdd: 'Necesitas iniciar sesión para añadir un spot de skate.',
+    requiredFields: 'Cuéntanos sobre este spot. Los campos con * son obligatorios.',
+    coordinates: 'Coordenadas',
+    latitudePlaceholder: 'Latitud (ej., 34.1012)',
+    longitudePlaceholder: 'Longitud (ej., -118.3389)',
+    gettingLocation: 'Obteniendo ubicación...',
+    accessType: 'Tipo de Acceso',
+    publicTitle: 'Público - Abierto a Todos',
+    publicDesc: 'Skateparks, plazas públicas, spots callejeros',
+    privateTitle: 'Propiedad Privada - Se Necesita Permiso',
+    privateDesc: 'Rampas en patios, terrenos privados, spots cerrados',
+    localsTitle: 'Pregunta a los Locales Primero',
+    localsDesc: 'Respeta el spot, no lo quemes',
+    contactInfo: 'Información de Contacto',
+    contactPlaceholder: 'ej., Teléfono, Instagram, email...',
+    contactHintPrivate: '¿Cómo deben contactarte para pedir permiso?',
+    contactHintLocals: '¿Cómo deben preguntar sobre el spot?',
+  },
+
+  // Create Event Page
+  createEvent: {
+    title: 'Crear un Evento',
+    subtitle: 'Organiza un evento de skate para la comunidad',
+    backToEvents: 'Volver a Eventos',
+    namePlaceholder: 'ej., Session de Verano',
+    descriptionPlaceholder: 'Describe el evento, qué esperar, reglas, premios, etc.',
+    selectType: 'Selecciona el tipo de evento',
+    venuePlaceholder: 'ej., Venice Beach Skatepark, CA',
+    selectDate: 'Selecciona la fecha',
+    selectTime: 'Selecciona la hora',
+    ticketPricePlaceholder: 'Deja vacío para eventos gratis',
+    publishing: 'Publicando...',
+    success: '¡Evento publicado exitosamente!',
+    error: 'Error al publicar el evento',
+    loginToCreate: 'Necesitas iniciar sesión para crear un evento.',
+    requiredFields: 'Cuéntanos sobre este evento. Los campos con * son obligatorios.',
+    startDateTime: 'Fecha y Hora de Inicio',
+    endDateTime: 'Fecha y Hora de Fin (opcional)',
+    coordinatesOptional: 'Coordenadas (opcional)',
+    coverImage: 'Imagen de Portada',
+    uploadCover: 'Subir imagen de portada',
+    nip05Recommended: 'Se Recomienda Verificación NIP-05',
+    nip05Desc: 'Añade un identificador NIP-05 a tu perfil para verificar tu identidad y generar confianza con los asistentes.',
+    addNip05: 'Añadir NIP-05 en Ajustes',
+  },
+
+  // Spot Detail Page
+  spotDetail: {
+    postedBy: 'Publicado por',
+    getDirections: 'Cómo Llegar',
+    reviews: 'Reseñas',
+    noReviews: 'Aún no hay reseñas',
+    beFirstReview: '¡Sé el primero en reseñar este spot!',
+    writeReview: 'Escribir una Reseña',
+    submitReview: 'Enviar Reseña',
+    rating: 'Calificación',
+    reviewPlaceholder: 'Comparte tu experiencia en este spot...',
+    relatedSpots: 'Spots Cercanos',
+  },
+
+  // Event Detail Page
+  eventDetail: {
+    organizedBy: 'Organizado por',
+    eventInfo: 'Info del Evento',
+    location: 'Ubicación',
+    dateTime: 'Fecha y Hora',
+    price: 'Precio',
+    attendeeCount: '{{count}} asistirán',
+    interested: 'Interesado',
+    going: 'Voy',
+    notGoing: 'No Voy',
+    share: 'Compartir Evento',
+  },
+
+  // Profile Page
+  profile: {
+    posts: 'Publicaciones',
+    spots: 'Spots',
+    events: 'Eventos',
+    following: 'Siguiendo',
+    followers: 'Seguidores',
+    editProfile: 'Editar Perfil',
+    follow: 'Seguir',
+    unfollow: 'Dejar de Seguir',
+    noPostsYet: 'Aún no hay publicaciones',
+    noBio: 'Sin biografía aún',
+    zapProfile: 'Enviar Zap a este skater',
+  },
+
+  // About Page
+  about: {
+    title: 'Acerca de SkateSpots',
+    subtitle: 'Una comunidad de skateboarding descentralizada',
+    whatIs: '¿Qué es SkateSpots?',
+    whatIsDesc: 'SkateSpots es una plataforma impulsada por la comunidad para descubrir lugares de skateboarding en todo el mundo. Construida en Nostr, da a los skaters verdadera propiedad de sus datos.',
+    features: 'Características',
+    featuresDesc: 'Encuentra spots, crea eventos, conecta con coaches y apoya a tus tiendas de skate locales—todo en un solo lugar.',
+    nostr: 'Construido en Nostr',
+    nostrDesc: 'Nostr es un protocolo simple y abierto que permite comunicación global verdaderamente resistente a la censura. Tu cuenta y datos te pertenecen.',
+    openSource: 'Código Abierto',
+    openSourceDesc: 'SkateSpots es completamente de código abierto. Contribuye, haz fork o corre tu propia instancia.',
+    lightning: 'Pagos Lightning',
+    lightningDesc: 'Envía Zaps a tus skaters, coaches y creadores de contenido favoritos con pagos Bitcoin Lightning.',
+  },
+
+  // FAQ Page
+  faq: {
+    title: 'Preguntas Frecuentes',
+    subtitle: 'Todo lo que necesitas saber sobre SkateSpots',
+    whatIsNostr: '¿Qué es Nostr?',
+    whatIsNostrAnswer: 'Nostr es un protocolo abierto para redes sociales descentralizadas. A diferencia de plataformas tradicionales, tú eres dueño de tus datos e identidad.',
+    howToStart: '¿Cómo empiezo?',
+    howToStartAnswer: 'Haz clic en "Registrarse" para crear una nueva cuenta Nostr, o "Iniciar Sesión" si ya tienes una. Puedes usar una extensión de navegador, app móvil o clave secreta.',
+    whatAreZaps: '¿Qué son los Zaps?',
+    whatAreZapsAnswer: 'Los Zaps son propinas de Bitcoin Lightning que puedes enviar a otros usuarios. Son una forma de mostrar aprecio por buen contenido o apoyar a creadores.',
+    howToAddSpot: '¿Cómo añado un spot?',
+    howToAddSpotAnswer: 'Inicia sesión en tu cuenta, haz clic en "Añadir Spot" y completa los detalles incluyendo ubicación, fotos y descripción.',
+    isItFree: '¿SkateSpots es gratis?',
+    isItFreeAnswer: '¡Sí! SkateSpots es completamente gratis de usar. Opcionalmente puedes enviar Zaps (propinas de Bitcoin) a otros usuarios.',
+    canIEditSpot: '¿Puedo editar o eliminar mis spots?',
+    canIEditSpotAnswer: 'Sí, puedes editar spots que hayas creado. Debido a la naturaleza descentralizada de Nostr, las solicitudes de eliminación se envían pero algunos relays pueden retener los datos.',
+  },
+
+  // Onboarding
+  onboarding: {
+    welcome: '¡Bienvenido a SkateSpots!',
+    welcomeDesc: 'Vamos a configurarte en solo unos pasos.',
+    step1Title: 'Crea Tu Cuenta',
+    step1Desc: 'Tus claves Nostr están siendo generadas. Es como una contraseña que tú controlas.',
+    step2Title: 'Respalda Tus Claves',
+    step2Desc: '¡Guarda tu frase de recuperación en un lugar seguro. Es la única forma de recuperar tu cuenta!',
+    step3Title: 'Configura Tu Perfil',
+    step3Desc: 'Cuéntale a la comunidad sobre ti.',
+    step4Title: '¡Estás Listo!',
+    step4Desc: 'Empieza a explorar spots, eventos y conectar con skaters.',
+    skipForNow: 'Saltar por ahora',
+    continueToApp: 'Continuar a la App',
+  },
+
+  // Lab (Coaches/Filmers)
+  lab: {
+    title: 'El Lab',
+    subtitle: 'Mejora tu skate',
+    coaches: 'Coaches',
+    filmers: 'Filmers',
+    findCoach: 'Buscar Coach',
+    becomeCoach: 'Ser Coach',
+    findFilmer: 'Buscar Filmer',
+    becomeFilmer: 'Ser Filmer',
+    hourlyRate: 'Tarifa por Hora',
+    experience: 'Experiencia',
+    specialties: 'Especialidades',
+    availability: 'Disponibilidad',
+    bookSession: 'Reservar Sesión',
+    contactCoach: 'Contactar Coach',
+    noCoaches: 'No se encontraron coaches en tu área',
+    noFilmers: 'No se encontraron filmers en tu área',
+  },
+
+  // Lab Page
+  labPage: {
+    title: 'El Lab',
+    subtitle: 'Aprende trucos. Captura momentos. Conecta con otros Skaters',
+    coachesTab: 'Coaching',
+    filmersTab: 'Filmación',
+    offerCoaching: 'OFRECER COACHING',
+    offerFilming: 'OFRECER FILMACIÓN',
+    loginToOffer: 'Inicia sesión para ofrecer servicios',
+    whatToLearn: '¿QUÉ QUIERES APRENDER?',
+    whatContent: '¿QUÉ TIPO DE CONTENIDO?',
+    selectSkillsDesc: 'Selecciona habilidades y te conectaremos con coaches',
+    selectFilmingDesc: 'Selecciona los servicios de filmación que buscas',
+    searchPlaceholder: 'Buscar por nombre, ubicación o habilidades...',
+    noServicesYet: 'AÚN NO HAY SERVICIOS',
+    beFirstToOffer: '¡Sé el primero en ofrecer servicios de coaching o filmación a la comunidad!',
+    skills: 'Habilidades',
+    rate: 'Tarifa',
+    perHour: '/hora',
+    contact: 'Contactar',
+    viewProfile: 'Ver Perfil',
+    noProfilesYet: 'Aún no hay perfiles',
+    beFirstCoach: '¡Sé el primero en registrarte como coach!',
+    beFirstFilmer: '¡Sé el primero en registrarte como filmer!',
+    yearsExperience: 'años de experiencia',
+  },
+
+  // Become Coach/Filmer Forms
+  becomeCoach: {
+    title: 'Conviértete en Coach',
+    subtitle: 'Comparte tus habilidades y ayuda a otros skaters a progresar',
+    bioPlaceholder: 'Cuéntanos sobre tu experiencia en skate y estilo de enseñanza...',
+    skillsPlaceholder: 'ej., kickflip, heelflip, grinds, bowls',
+    selectSkills: 'Selecciona las habilidades que puedes enseñar',
+    hourlyRate: 'Tarifa por Hora (sats)',
+    ratePlaceholder: 'ej., 5000',
+    locationPlaceholder: 'Tu ciudad o área',
+    publishing: 'Publicando perfil...',
+    success: '¡Perfil de coach creado!',
+    error: 'Error al crear el perfil',
+  },
+
+  becomeFilmer: {
+    title: 'Conviértete en Filmer',
+    subtitle: 'Captura los mejores clips para la comunidad',
+    bioPlaceholder: 'Cuéntanos sobre tu experiencia filmando y tu equipo...',
+    specialtiesPlaceholder: 'ej., fisheye, teleobjetivo, drone, edición',
+    selectSpecialties: 'Selecciona tus especialidades',
+    hourlyRate: 'Tarifa por Hora (sats)',
+    ratePlaceholder: 'ej., 5000',
+    locationPlaceholder: 'Tu ciudad o área',
+    portfolioUrl: 'URL del Portafolio',
+    portfolioPlaceholder: 'Enlace a tu trabajo (YouTube, Instagram, etc.)',
+    publishing: 'Publicando perfil...',
+    success: '¡Perfil de filmer creado!',
+    error: 'Error al crear el perfil',
+  },
+
+  // Skills (mantener en inglés como terminología de skate)
+  skills: {
+    kickflip: 'Kickflip',
+    heelflip: 'Heelflip',
+    ollie: 'Ollie',
+    treflip: '360 Flip',
+    shuvit: 'Shuvit',
+    hardflip: 'Hardflip',
+    varial: 'Varial',
+    nollie: 'Nollie',
+    fakie: 'Fakie',
+    switch: 'Switch',
+    grind: 'Grind',
+    slide: 'Slide',
+    manual: 'Manual',
+    transition: 'Transition',
+    bowl: 'Bowl',
+    vert: 'Vert',
+    street: 'Street',
+    flatground: 'Flatground',
+  },
+
+  // Food Spots
+  food: {
+    title: 'Spots de Comida',
+    subtitle: 'Recarga energía antes o después de tu session',
+    addFood: 'Añadir Spot de Comida',
+    categories: {
+      all: 'Todos',
+      burgers: 'Hamburguesas',
+      pizza: 'Pizza',
+      tacos: 'Tacos',
+      coffee: 'Café',
+      drinks: 'Bebidas',
+      snacks: 'Snacks',
+    },
+    skaterFriendly: 'Amigable para Skaters',
+    nearSpots: 'Cerca de Spots de Skate',
+  },
+
+  // Marketplace
+  marketplace: {
+    title: 'Mercado',
+    subtitle: 'Compra, vende e intercambia equipo de skate',
+    addListing: 'Añadir Anuncio',
+    condition: 'Condición',
+    conditions: {
+      new: 'Nuevo',
+      likeNew: 'Como Nuevo',
+      good: 'Bueno',
+      fair: 'Regular',
+      poor: 'Malo',
+    },
+    categories: {
+      all: 'Todos',
+      decks: 'Tablas',
+      trucks: 'Trucks',
+      wheels: 'Ruedas',
+      bearings: 'Rodamientos',
+      shoes: 'Zapatos',
+      clothing: 'Ropa',
+      protection: 'Protección',
+      other: 'Otros',
+    },
+    priceRange: 'Rango de Precio',
+    location: 'Ubicación',
+    seller: 'Vendedor',
+    contact: 'Contactar Vendedor',
+    makeOffer: 'Hacer Oferta',
+    sold: 'Vendido',
+    available: 'Disponible',
+    gear: 'Equipo',
+    sellGear: 'Vender Equipo',
+    wantToBuy: 'Busco Comprar',
+  },
+
+  // Weather
+  weather: {
+    title: 'Clima',
+    current: 'Condiciones Actuales',
+    forecast: 'Pronóstico',
+    humidity: 'Humedad',
+    wind: 'Viento',
+    feelsLike: 'Sensación térmica',
+    goodForSkating: '¡Buen clima para patinar!',
+    notIdeal: 'Condiciones no ideales',
+    allWeather: 'Todo Clima',
+    goodWeather: 'Buen Clima',
+    perfectWeather: 'Clima Perfecto',
+  },
+
+  // Radio
+  radio: {
+    title: 'NoGood Radio',
+    nowPlaying: 'Reproduciendo Ahora',
+    loading: 'Cargando stream...',
+    play: 'Reproducir',
+    pause: 'Pausar',
+    volume: 'Volumen',
+    mute: 'Silenciar',
+  },
+};
+
+export default es;
diff --git a/src/src/index.css b/src/src/index.css
new file mode 100644
index 0000000..d6ced38
--- /dev/null
+++ b/src/src/index.css
@@ -0,0 +1,385 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Light theme - Clean with subtle neon accents */
+    --background: 0 0% 100%;
+    --foreground: 0 0% 10%;
+
+    --card: 0 0% 98%;
+    --card-foreground: 0 0% 10%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 10%;
+
+    /* Darker neon red for light mode */
+    --primary: 349 85% 45%;
+    --primary-foreground: 0 0% 100%;
+
+    --secondary: 0 0% 95%;
+    --secondary-foreground: 0 0% 10%;
+
+    --muted: 0 0% 96%;
+    --muted-foreground: 0 0% 40%;
+
+    /* Darker neon lime for light mode */
+    --accent: 75 80% 40%;
+    --accent-foreground: 0 0% 100%;
+
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+
+    --border: 0 0% 90%;
+    --input: 0 0% 95%;
+    --ring: 349 85% 45%;
+
+    --radius: 1rem;
+
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 0 0% 10%;
+    --sidebar-primary: 349 85% 45%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 0 0% 95%;
+    --sidebar-accent-foreground: 0 0% 10%;
+    --sidebar-border: 0 0% 90%;
+    --sidebar-ring: 349 85% 45%;
+
+    /* Custom gradient colors */
+    --gradient-start: 349 85% 45%;
+    --gradient-end: 75 80% 40%;
+  }
+
+  .dark {
+    /* Pure black THUG2 aesthetic */
+    --background: 0 0% 0%;
+    --foreground: 0 0% 100%;
+
+    --card: 0 0% 5%;
+    --card-foreground: 0 0% 100%;
+
+    --popover: 0 0% 5%;
+    --popover-foreground: 0 0% 100%;
+
+    /* Neon red primary */
+    --primary: 349 100% 50%;
+    --primary-foreground: 0 0% 100%;
+
+    --secondary: 0 0% 10%;
+    --secondary-foreground: 0 0% 100%;
+
+    --muted: 0 0% 10%;
+    --muted-foreground: 0 0% 60%;
+
+    /* Neon lime accent */
+    --accent: 75 100% 60%;
+    --accent-foreground: 0 0% 0%;
+
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+
+    --border: 349 100% 50% / 0.3;
+    --input: 0 0% 10%;
+    --ring: 349 100% 50%;
+
+    --sidebar-background: 0 0% 0%;
+    --sidebar-foreground: 0 0% 100%;
+    --sidebar-primary: 349 100% 50%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 0 0% 10%;
+    --sidebar-accent-foreground: 0 0% 100%;
+    --sidebar-border: 349 100% 50% / 0.3;
+    --sidebar-ring: 349 100% 50%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Leaflet map overrides */
+.leaflet-container {
+  height: 100%;
+  width: 100%;
+  border-radius: var(--radius);
+  z-index: 0;
+}
+
+.leaflet-popup-content-wrapper {
+  border-radius: calc(var(--radius) - 4px);
+  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+}
+
+.leaflet-popup-content {
+  margin: 0;
+}
+
+/* THUG2-inspired neon effects */
+@keyframes neon-glow {
+  0%, 100% { text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor, 0 0 40px currentColor; }
+  50% { text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor, 0 0 20px currentColor; }
+}
+
+.neon-header {
+  animation: neon-glow 2s ease-in-out infinite;
+  font-family: 'Impact', 'Arial Black', sans-serif;
+  letter-spacing: 0.1em;
+}
+
+.neon-red {
+  color: #ff0040;
+  text-shadow:
+    0 0 10px #ff0040,
+    0 0 20px #ff0040,
+    0 0 30px #ff0040,
+    0 0 40px #ff0040,
+    2px 2px 4px rgba(0,0,0,0.9);
+}
+
+.neon-lime {
+  color: #ccff00;
+  text-shadow:
+    0 0 10px #ccff00,
+    0 0 20px #ccff00,
+    0 0 30px #ccff00,
+    0 0 40px #ccff00,
+    2px 2px 4px rgba(0,0,0,0.9);
+}
+
+.neon-orange {
+  color: #ff6600;
+  text-shadow:
+    0 0 10px #ff6600,
+    0 0 20px #ff6600,
+    0 0 30px #ff6600;
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, #ff0040 0%, #ff6600 50%, #ccff00 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-slideUp {
+  animation: slideUp 0.6s ease-out;
+}
+
+.animate-pulse-slow {
+  animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes stagger {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.stagger-children > * {
+  animation: stagger 0.5s ease-out backwards;
+}
+
+.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
+.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
+.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
+.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
+.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
+.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }
+
+.dark .leaflet-tile-pane {
+  filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9);
+}
+
+.dark .leaflet-control-zoom a {
+  background-color: hsl(var(--card));
+  color: hsl(var(--foreground));
+  border-color: hsl(var(--border));
+}
+
+.dark .leaflet-control-zoom a:hover {
+  background-color: hsl(var(--muted));
+}
+
+.dark .leaflet-popup-content-wrapper,
+.dark .leaflet-popup-tip {
+  background-color: hsl(var(--card));
+  color: hsl(var(--foreground));
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: hsl(var(--muted));
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse-glow {
+  0%, 100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.4); }
+  50% { box-shadow: 0 0 0 8px hsl(var(--primary) / 0); }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.4s ease-out forwards;
+}
+
+.animate-slideUp {
+  animation: slideUp 0.5s ease-out forwards;
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 2s infinite;
+}
+
+/* Stagger animation for lists */
+.stagger-children > * {
+  opacity: 0;
+  animation: fadeIn 0.4s ease-out forwards;
+}
+
+.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
+.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
+.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
+.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
+.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
+.stagger-children > *:nth-child(6) { animation-delay: 250ms; }
+.stagger-children > *:nth-child(7) { animation-delay: 300ms; }
+.stagger-children > *:nth-child(8) { animation-delay: 350ms; }
+
+/* Gradient text */
+.gradient-text {
+  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Glass effect */
+.glass {
+  background: hsl(var(--card) / 0.8);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+/* Safe area insets for iOS notched devices */
+.h-safe-area-bottom {
+  height: env(safe-area-inset-bottom, 0px);
+}
+
+.pb-safe {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+.pt-safe {
+  padding-top: env(safe-area-inset-top, 0px);
+}
+
+.safe-area-top {
+  padding-top: env(safe-area-inset-top, 0px);
+}
+
+.safe-area-bottom {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+.safe-area-left {
+  padding-left: env(safe-area-inset-left, 0px);
+}
+
+.safe-area-right {
+  padding-right: env(safe-area-inset-right, 0px);
+}
+
+/* Mobile bottom nav spacing - add padding to content to avoid overlap */
+@media (max-width: 768px) {
+  .mobile-nav-padding {
+    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
+  }
+}
+
+/* Prevent horizontal overflow on mobile */
+html, body {
+  overflow-x: hidden;
+  max-width: 100vw;
+}
+
+/* Improve touch targets for mobile */
+@media (max-width: 768px) {
+  button, a, input, select, textarea {
+    min-height: 44px;
+  }
+  
+  /* Better tap highlight on mobile */
+  a, button {
+    -webkit-tap-highlight-color: rgba(255, 0, 64, 0.1);
+  }
+}
+
+/* Fix input zoom on iOS */
+@media screen and (max-width: 768px) {
+  input, select, textarea {
+    font-size: 16px !important;
+  }
+}
+
+/* Hide scrollbar utility - useful for horizontal scrolling filters */
+.scrollbar-hide {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;  /* Chrome, Safari and Opera */
+}
+
+/* Extra small breakpoint for very small phones */
+@media (min-width: 375px) {
+  .xs\:inline {
+    display: inline;
+  }
+}
diff --git a/src/src/lib/amber.ts b/src/src/lib/amber.ts
new file mode 100644
index 0000000..3b03b59
--- /dev/null
+++ b/src/src/lib/amber.ts
@@ -0,0 +1,495 @@
+import type { NostrEvent, NostrSigner } from '@nostrify/nostrify';
+
+/**
+ * Pending Amber operation stored in multiple places for PWA resilience.
+ * Used to track operations that are waiting for Amber to return.
+ */
+export interface AmberPendingOperation {
+  type: 'get_public_key' | 'sign_event' | 'nip04_encrypt' | 'nip04_decrypt' | 'nip44_encrypt' | 'nip44_decrypt';
+  /** Unique ID for the operation */
+  id: string;
+  /** The unsigned event JSON (for sign_event) */
+  eventJson?: string;
+  /** Timestamp when operation was initiated */
+  timestamp: number;
+  /** The pubkey to encrypt/decrypt with (for nip04/nip44 operations) */
+  targetPubkey?: string;
+  /** The plaintext to encrypt (for encrypt operations) */
+  plaintext?: string;
+  /** The ciphertext to decrypt (for decrypt operations) */
+  ciphertext?: string;
+}
+
+const AMBER_PENDING_KEY = 'amber_pending_operation';
+const AMBER_LOGIN_KEY = 'amber_login';
+
+/**
+ * Store pending operation info for when Amber returns.
+ * Uses multiple storage mechanisms for PWA resilience.
+ */
+export function setAmberPendingOperation(operation: AmberPendingOperation): void {
+  const json = JSON.stringify(operation);
+  
+  // Store in multiple places for resilience (PWAs can lose localStorage on redirect)
+  try {
+    localStorage.setItem(AMBER_PENDING_KEY, json);
+  } catch (e) {
+    console.warn('[Amber] Failed to store in localStorage:', e);
+  }
+  
+  try {
+    sessionStorage.setItem(AMBER_PENDING_KEY, json);
+  } catch (e) {
+    console.warn('[Amber] Failed to store in sessionStorage:', e);
+  }
+  
+  // Also store in IndexedDB for maximum persistence
+  try {
+    const request = indexedDB.open('amber_store', 1);
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains('pending')) {
+        db.createObjectStore('pending');
+      }
+    };
+    request.onsuccess = () => {
+      const db = request.result;
+      const tx = db.transaction('pending', 'readwrite');
+      tx.objectStore('pending').put(json, AMBER_PENDING_KEY);
+    };
+  } catch (e) {
+    console.warn('[Amber] Failed to store in IndexedDB:', e);
+  }
+}
+
+/**
+ * Get pending operation from any available storage.
+ */
+export function getAmberPendingOperation(): AmberPendingOperation | null {
+  // Try localStorage first
+  let stored = localStorage.getItem(AMBER_PENDING_KEY);
+  
+  // Fall back to sessionStorage
+  if (!stored) {
+    stored = sessionStorage.getItem(AMBER_PENDING_KEY);
+    if (stored) {
+      console.log('[Amber] Found pending op in sessionStorage (localStorage was empty)');
+    }
+  }
+  
+  if (!stored) return null;
+  
+  try {
+    return JSON.parse(stored) as AmberPendingOperation;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Get pending operation from IndexedDB (async).
+ */
+export async function getAmberPendingOperationAsync(): Promise<AmberPendingOperation | null> {
+  // First try sync storage
+  const syncResult = getAmberPendingOperation();
+  if (syncResult) return syncResult;
+  
+  // Try IndexedDB
+  return new Promise((resolve) => {
+    try {
+      const request = indexedDB.open('amber_store', 1);
+      request.onupgradeneeded = () => {
+        const db = request.result;
+        if (!db.objectStoreNames.contains('pending')) {
+          db.createObjectStore('pending');
+        }
+      };
+      request.onsuccess = () => {
+        const db = request.result;
+        if (!db.objectStoreNames.contains('pending')) {
+          resolve(null);
+          return;
+        }
+        const tx = db.transaction('pending', 'readonly');
+        const getReq = tx.objectStore('pending').get(AMBER_PENDING_KEY);
+        getReq.onsuccess = () => {
+          if (getReq.result) {
+            console.log('[Amber] Found pending op in IndexedDB');
+            try {
+              resolve(JSON.parse(getReq.result));
+            } catch {
+              resolve(null);
+            }
+          } else {
+            resolve(null);
+          }
+        };
+        getReq.onerror = () => resolve(null);
+      };
+      request.onerror = () => resolve(null);
+    } catch {
+      resolve(null);
+    }
+  });
+}
+
+/**
+ * Clear the pending operation from all storage.
+ */
+export function clearAmberPendingOperation(): void {
+  try {
+    localStorage.removeItem(AMBER_PENDING_KEY);
+  } catch { /* ignore */ }
+  
+  try {
+    sessionStorage.removeItem(AMBER_PENDING_KEY);
+  } catch { /* ignore */ }
+  
+  try {
+    const request = indexedDB.open('amber_store', 1);
+    request.onsuccess = () => {
+      const db = request.result;
+      if (db.objectStoreNames.contains('pending')) {
+        const tx = db.transaction('pending', 'readwrite');
+        tx.objectStore('pending').delete(AMBER_PENDING_KEY);
+      }
+    };
+  } catch { /* ignore */ }
+}
+
+/**
+ * Store Amber login (pubkey).
+ */
+export function setAmberLogin(pubkey: string): void {
+  localStorage.setItem(AMBER_LOGIN_KEY, pubkey);
+}
+
+/**
+ * Get stored Amber login pubkey.
+ */
+export function getAmberLogin(): string | null {
+  return localStorage.getItem(AMBER_LOGIN_KEY);
+}
+
+/**
+ * Clear Amber login.
+ */
+export function clearAmberLogin(): void {
+  localStorage.removeItem(AMBER_LOGIN_KEY);
+}
+
+/**
+ * Check if the current page was opened as an Amber callback.
+ * Also checks pre-captured data from main.tsx for PWA resilience.
+ */
+export function isAmberCallback(): boolean {
+  const params = new URLSearchParams(window.location.search);
+  if (params.has('event')) return true;
+  
+  // Check pre-captured data (PWAs might lose URL params during hydration)
+  const preCaptured = sessionStorage.getItem('amber_callback_event');
+  if (preCaptured) {
+    console.log('[Amber] Found pre-captured callback data');
+    return true;
+  }
+  
+  return false;
+}
+
+/**
+ * Get the result from Amber callback URL.
+ * Falls back to pre-captured data from main.tsx.
+ */
+export function getAmberCallbackResult(): string | null {
+  const params = new URLSearchParams(window.location.search);
+  const fromUrl = params.get('event');
+  
+  if (fromUrl) {
+    console.log('[Amber] Got result from URL params:', fromUrl);
+    return fromUrl;
+  }
+  
+  // Check pre-captured data
+  const preCaptured = sessionStorage.getItem('amber_callback_event');
+  if (preCaptured) {
+    console.log('[Amber] Got result from pre-captured data:', preCaptured);
+    // Clear it so we don't process it again
+    sessionStorage.removeItem('amber_callback_event');
+    sessionStorage.removeItem('amber_callback_url');
+    sessionStorage.removeItem('amber_callback_timestamp');
+    return preCaptured;
+  }
+  
+  return null;
+}
+
+/**
+ * Clean the URL after processing Amber callback.
+ */
+export function cleanAmberCallbackUrl(): void {
+  const cleanUrl = window.location.origin + window.location.pathname;
+  window.history.replaceState({}, '', cleanUrl);
+}
+
+/**
+ * Generate a unique operation ID.
+ */
+function generateOperationId(): string {
+  return `amber_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+}
+
+/**
+ * Build callback URL for Amber operations.
+ */
+function buildCallbackUrl(): string {
+  const baseUrl = window.location.origin + window.location.pathname;
+  return `${baseUrl}?event=`;
+}
+
+/**
+ * Open Amber for get_public_key operation.
+ */
+export function openAmberForLogin(): void {
+  const operationId = generateOperationId();
+  const callbackUrl = buildCallbackUrl();
+  
+  const pendingOp = {
+    type: 'get_public_key' as const,
+    id: operationId,
+    timestamp: Date.now(),
+  };
+  
+  console.log('[Amber] Opening Amber for login...');
+  console.log('[Amber] Callback URL:', callbackUrl);
+  console.log('[Amber] Pending operation:', pendingOp);
+  
+  setAmberPendingOperation(pendingOp);
+  
+  // Verify it was stored
+  const stored = localStorage.getItem('amber_pending_operation');
+  console.log('[Amber] Stored in localStorage:', stored);
+  
+  // NIP-55 format for web applications
+  const amberUrl = `nostrsigner:?compressionType=none&returnType=signature&type=get_public_key&callbackUrl=${encodeURIComponent(callbackUrl)}`;
+  
+  console.log('[Amber] Opening URL:', amberUrl);
+  window.location.href = amberUrl;
+}
+
+/**
+ * Open Amber for sign_event operation.
+ * Returns a promise that resolves when user returns to the page.
+ * The actual result needs to be processed on page load.
+ */
+export function openAmberForSignEvent(event: Omit<NostrEvent, 'id' | 'sig'>): void {
+  const operationId = generateOperationId();
+  const callbackUrl = buildCallbackUrl();
+  const eventJson = JSON.stringify(event);
+  
+  setAmberPendingOperation({
+    type: 'sign_event',
+    id: operationId,
+    eventJson,
+    timestamp: Date.now(),
+  });
+  
+  const encodedEvent = encodeURIComponent(eventJson);
+  const amberUrl = `nostrsigner:${encodedEvent}?compressionType=none&returnType=event&type=sign_event&callbackUrl=${encodeURIComponent(callbackUrl)}`;
+  
+  window.location.href = amberUrl;
+}
+
+/**
+ * Open Amber for NIP-04 encrypt operation.
+ */
+export function openAmberForNip04Encrypt(pubkey: string, plaintext: string): void {
+  const operationId = generateOperationId();
+  const callbackUrl = buildCallbackUrl();
+  
+  setAmberPendingOperation({
+    type: 'nip04_encrypt',
+    id: operationId,
+    targetPubkey: pubkey,
+    plaintext,
+    timestamp: Date.now(),
+  });
+  
+  const encodedText = encodeURIComponent(plaintext);
+  const amberUrl = `nostrsigner:${encodedText}?pubkey=${pubkey}&compressionType=none&returnType=signature&type=nip04_encrypt&callbackUrl=${encodeURIComponent(callbackUrl)}`;
+  
+  window.location.href = amberUrl;
+}
+
+/**
+ * Open Amber for NIP-04 decrypt operation.
+ */
+export function openAmberForNip04Decrypt(pubkey: string, ciphertext: string): void {
+  const operationId = generateOperationId();
+  const callbackUrl = buildCallbackUrl();
+  
+  setAmberPendingOperation({
+    type: 'nip04_decrypt',
+    id: operationId,
+    targetPubkey: pubkey,
+    ciphertext,
+    timestamp: Date.now(),
+  });
+  
+  const encodedText = encodeURIComponent(ciphertext);
+  const amberUrl = `nostrsigner:${encodedText}?pubkey=${pubkey}&compressionType=none&returnType=signature&type=nip04_decrypt&callbackUrl=${encodeURIComponent(callbackUrl)}`;
+  
+  window.location.href = amberUrl;
+}
+
+/**
+ * Open Amber for NIP-44 encrypt operation.
+ */
+export function openAmberForNip44Encrypt(pubkey: string, plaintext: string): void {
+  const operationId = generateOperationId();
+  const callbackUrl = buildCallbackUrl();
+  
+  setAmberPendingOperation({
+    type: 'nip44_encrypt',
+    id: operationId,
+    targetPubkey: pubkey,
+    plaintext,
+    timestamp: Date.now(),
+  });
+  
+  const encodedText = encodeURIComponent(plaintext);
+  const amberUrl = `nostrsigner:${encodedText}?pubkey=${pubkey}&compressionType=none&returnType=signature&type=nip44_encrypt&callbackUrl=${encodeURIComponent(callbackUrl)}`;
+  
+  window.location.href = amberUrl;
+}
+
+/**
+ * Open Amber for NIP-44 decrypt operation.
+ */
+export function openAmberForNip44Decrypt(pubkey: string, ciphertext: string): void {
+  const operationId = generateOperationId();
+  const callbackUrl = buildCallbackUrl();
+  
+  setAmberPendingOperation({
+    type: 'nip44_decrypt',
+    id: operationId,
+    targetPubkey: pubkey,
+    ciphertext,
+    timestamp: Date.now(),
+  });
+  
+  const encodedText = encodeURIComponent(ciphertext);
+  const amberUrl = `nostrsigner:${encodedText}?pubkey=${pubkey}&compressionType=none&returnType=signature&type=nip44_decrypt&callbackUrl=${encodeURIComponent(callbackUrl)}`;
+  
+  window.location.href = amberUrl;
+}
+
+/**
+ * Decode a gzip-compressed Amber result (prefixed with "Signer1").
+ * Falls back to treating as plain text if not compressed.
+ */
+export function decodeAmberResult(result: string): string {
+  if (result.startsWith('Signer1')) {
+    // Gzip compressed result
+    const base64 = result.substring(7); // Remove "Signer1" prefix
+    try {
+      const binary = atob(base64);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i);
+      }
+      // Use DecompressionStream if available
+      const ds = new DecompressionStream('gzip');
+      const writer = ds.writable.getWriter();
+      writer.write(bytes);
+      writer.close();
+      
+      const reader = ds.readable.getReader();
+      const chunks: Uint8Array[] = [];
+      
+      const readChunks = async (): Promise<string> => {
+        const { done, value } = await reader.read();
+        if (done) {
+          const combined = new Uint8Array(chunks.reduce((acc, c) => acc + c.length, 0));
+          let offset = 0;
+          for (const chunk of chunks) {
+            combined.set(chunk, offset);
+            offset += chunk.length;
+          }
+          return new TextDecoder().decode(combined);
+        }
+        chunks.push(value);
+        return readChunks();
+      };
+      
+      // For sync usage, we'll just return the raw result
+      // The caller should handle async decompression if needed
+      console.warn('Gzip decompression requires async handling');
+      return result;
+    } catch (e) {
+      console.error('Failed to decode gzip result:', e);
+      return result;
+    }
+  }
+  
+  // Plain text result - might be URL encoded
+  try {
+    return decodeURIComponent(result);
+  } catch {
+    return result;
+  }
+}
+
+/**
+ * AmberSigner implements the NostrSigner interface for Amber.
+ * 
+ * Note: Due to the nature of web-to-Amber communication via URL redirects,
+ * signing operations will redirect the user to Amber and require them to
+ * return to the app. This means sign() cannot return synchronously.
+ * 
+ * For a better UX, consider using NIP-46 (Nostr Connect / Bunker) instead.
+ */
+export class AmberSigner implements NostrSigner {
+  readonly pubkey: string;
+
+  constructor(pubkey: string) {
+    this.pubkey = pubkey;
+  }
+
+  async getPublicKey(): Promise<string> {
+    return this.pubkey;
+  }
+
+  async sign(event: Omit<NostrEvent, 'id' | 'sig'>): Promise<NostrEvent> {
+    // Store the current state and redirect to Amber
+    // The result will be processed on page reload
+    openAmberForSignEvent(event);
+    
+    // This promise will never resolve in the current page context
+    // because we're redirecting to Amber
+    return new Promise(() => {
+      // The page will redirect, so this never resolves
+    });
+  }
+
+  readonly nip04 = {
+    encrypt: async (pubkey: string, plaintext: string): Promise<string> => {
+      openAmberForNip04Encrypt(pubkey, plaintext);
+      return new Promise(() => {});
+    },
+    decrypt: async (pubkey: string, ciphertext: string): Promise<string> => {
+      openAmberForNip04Decrypt(pubkey, ciphertext);
+      return new Promise(() => {});
+    },
+  };
+
+  readonly nip44 = {
+    encrypt: async (pubkey: string, plaintext: string): Promise<string> => {
+      openAmberForNip44Encrypt(pubkey, plaintext);
+      return new Promise(() => {});
+    },
+    decrypt: async (pubkey: string, ciphertext: string): Promise<string> => {
+      openAmberForNip44Decrypt(pubkey, ciphertext);
+      return new Promise(() => {});
+    },
+  };
+}
diff --git a/src/src/lib/exchangeRateService.ts b/src/src/lib/exchangeRateService.ts
new file mode 100644
index 0000000..07c84ab
--- /dev/null
+++ b/src/src/lib/exchangeRateService.ts
@@ -0,0 +1,140 @@
+/**
+ * Exchange rate service for fetching BTC/USD rates from Coinbase API
+ * 
+ * Module-level cache to avoid excessive API calls
+ */
+const COINBASE_API_URL = "https://api.coinbase.com/v2/exchange-rates";
+const CACHE_DURATION_MS = 60000; // 1 minute cache
+
+let cachedRate: number | null = null;
+let cacheTimestamp: number = 0;
+
+/**
+ * Get the current BTC/USD exchange rate from Coinbase API
+ * Uses caching to avoid excessive API calls
+ * 
+ * @returns Promise resolving to BTC/USD exchange rate
+ */
+export async function getBtcUsdRate(): Promise<number> {
+  const now = Date.now();
+  
+  // Return cached rate if still valid
+  if (cachedRate && (now - cacheTimestamp) < CACHE_DURATION_MS) {
+    console.debug(`Using cached BTC/USD rate: ${cachedRate}`, {
+      cache_age_ms: now - cacheTimestamp,
+    });
+    return cachedRate;
+  }
+
+  try {
+    console.debug("Fetching BTC/USD rate from Coinbase API");
+
+    const response = await fetch(`${COINBASE_API_URL}?currency=BTC`, {
+      method: "GET",
+      headers: {
+        "Accept": "application/json",
+      },
+      signal: AbortSignal.timeout(10000), // 10 second timeout
+    });
+
+    if (!response.ok) {
+      throw new Error(`Coinbase API error: ${response.status} ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    
+    // Validate response structure
+    if (!data?.data?.rates?.USD) {
+      throw new Error("Invalid response format from Coinbase API");
+    }
+
+    const rate = parseFloat(data.data.rates.USD);
+    
+    if (isNaN(rate) || rate <= 0) {
+      throw new Error(`Invalid exchange rate received: ${data.data.rates.USD}`);
+    }
+
+    // Update cache
+    cachedRate = rate;
+    cacheTimestamp = now;
+
+    console.info(`Fetched BTC/USD rate from Coinbase: ${rate}`, { rate });
+
+    return rate;
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    
+    console.error(`Failed to fetch BTC/USD rate: ${errorMessage}`);
+
+    // If we have a cached rate, use it as fallback
+    if (cachedRate) {
+      const cacheAge = now - cacheTimestamp;
+      console.warn(`Using stale cached rate as fallback: ${cachedRate}`, {
+        cache_age_ms: cacheAge,
+      });
+      return cachedRate;
+    }
+
+    // If no cached rate available, throw error
+    throw new Error(`Unable to fetch BTC/USD exchange rate: ${errorMessage}`);
+  }
+}
+
+/**
+ * Convert BTC amount to USD using current exchange rate
+ */
+export async function btcToUsd(btcAmount: number): Promise<number> {
+  const rate = await getBtcUsdRate();
+  return btcAmount * rate;
+}
+
+/**
+ * Convert USD amount to BTC using current exchange rate
+ */
+export async function usdToBtc(usdAmount: number): Promise<number> {
+  const rate = await getBtcUsdRate();
+  return usdAmount / rate;
+}
+
+/**
+ * Convert sats to USD using current exchange rate
+ */
+export async function satsToUsd(sats: number): Promise<number> {
+  const btcAmount = sats / 100000000; // Convert sats to BTC
+  return btcToUsd(btcAmount);
+}
+
+/**
+ * Convert USD to sats using current exchange rate
+ */
+export async function usdToSats(usdAmount: number): Promise<number> {
+  const btcAmount = await usdToBtc(usdAmount);
+  return Math.floor(btcAmount * 100000000); // Convert BTC to sats
+}
+
+/**
+ * Clear the cached exchange rate (useful for testing or forcing refresh)
+ */
+export function clearCache(): void {
+  cachedRate = null;
+  cacheTimestamp = 0;
+}
+
+/**
+ * Get cache status for debugging
+ */
+export function getCacheStatus(): { 
+  rate: number | null; 
+  age_ms: number; 
+  is_valid: boolean 
+} {
+  const now = Date.now();
+  const age = now - cacheTimestamp;
+  const isValid = cachedRate !== null && age < CACHE_DURATION_MS;
+  
+  return {
+    rate: cachedRate,
+    age_ms: age,
+    is_valid: isValid,
+  };
+}
diff --git a/src/src/lib/genUserName.test.ts b/src/src/lib/genUserName.test.ts
new file mode 100644
index 0000000..b92b52a
--- /dev/null
+++ b/src/src/lib/genUserName.test.ts
@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import { genUserName } from './genUserName';
+
+describe('genUserName', () => {
+  it('generates a deterministic name from a seed', () => {
+    const seed = 'test-seed-123';
+    const name1 = genUserName(seed);
+    const name2 = genUserName(seed);
+    
+    expect(name1).toEqual('Brave Whale');
+    expect(name1).toEqual(name2);
+  });
+
+  it('generates different names for different seeds', () => {
+    const name1 = genUserName('seed1');
+    const name2 = genUserName('seed2');
+    const name3 = genUserName('seed3');
+    
+    // While it's theoretically possible for different seeds to generate the same name,
+    // it's very unlikely with our word lists
+    expect(name1).not.toBe(name2);
+    expect(name2).not.toBe(name3);
+    expect(name1).not.toBe(name3);
+  });
+
+  it('handles typical Nostr pubkey format', () => {
+    // Typical hex pubkey (64 characters)
+    const pubkey = 'e4690a13290739da123aa17d553851dec4cdd0e9d89aa18de3741c446caf8761';
+    const name = genUserName(pubkey);
+    
+    expect(name).toEqual('Gentle Hawk');
+  });
+});
\ No newline at end of file
diff --git a/src/src/lib/genUserName.ts b/src/src/lib/genUserName.ts
new file mode 100644
index 0000000..4153a65
--- /dev/null
+++ b/src/src/lib/genUserName.ts
@@ -0,0 +1,34 @@
+/** Generate a deterministic user display name based on a string seed. */
+export function genUserName(seed: string | undefined | null): string {
+  // Guard against undefined/null seed
+  if (!seed) {
+    return 'Anonymous';
+  }
+
+  // Use a simple hash of the pubkey to generate consistent adjective + noun combinations
+  const adjectives = [
+    'Swift', 'Bright', 'Calm', 'Bold', 'Wise', 'Kind', 'Quick', 'Brave',
+    'Cool', 'Sharp', 'Clear', 'Strong', 'Smart', 'Fast', 'Keen', 'Pure',
+    'Noble', 'Gentle', 'Fierce', 'Steady', 'Clever', 'Proud', 'Silent', 'Wild'
+  ];
+  
+  const nouns = [
+    'Fox', 'Eagle', 'Wolf', 'Bear', 'Lion', 'Tiger', 'Hawk', 'Owl',
+    'Deer', 'Raven', 'Falcon', 'Lynx', 'Otter', 'Whale', 'Shark', 'Dolphin',
+    'Phoenix', 'Dragon', 'Panther', 'Jaguar', 'Cheetah', 'Leopard', 'Puma', 'Cobra'
+  ];
+
+  // Create a simple hash from the pubkey
+  let hash = 0;
+  for (let i = 0; i < seed.length; i++) {
+    const char = seed.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
+  
+  // Use absolute value to ensure positive index
+  const adjIndex = Math.abs(hash) % adjectives.length;
+  const nounIndex = Math.abs(hash >> 8) % nouns.length;
+  
+  return [adjectives[adjIndex], nouns[nounIndex]].join(' ');
+}
\ No newline at end of file
diff --git a/src/src/lib/lightningAddress.ts b/src/src/lib/lightningAddress.ts
new file mode 100644
index 0000000..e9b1689
--- /dev/null
+++ b/src/src/lib/lightningAddress.ts
@@ -0,0 +1,162 @@
+/**
+ * Lightning Address resolution via LNURL-pay protocol
+ */
+
+interface LNURLPayResponse {
+  status?: 'OK' | 'ERROR';
+  tag: 'payRequest';
+  commentAllowed?: number;
+  minSendable: number;
+  maxSendable: number;
+  metadata: string;
+  callback: string;
+}
+
+interface LNURLInvoiceResponse {
+  status?: 'OK' | 'ERROR';
+  reason?: string;
+  pr?: string;
+}
+
+/**
+ * Validate if a string is a valid Lightning address
+ */
+export function isValidLightningAddress(address: string): boolean {
+  if (!address || typeof address !== 'string') {
+    return false;
+  }
+
+  const trimmed = address.trim();
+  const parts = trimmed.split('@');
+  if (parts.length !== 2) {
+    return false;
+  }
+
+  const [username, domain] = parts;
+
+  if (!username || username.length === 0) {
+    return false;
+  }
+
+  if (!domain || !domain.includes('.')) {
+    return false;
+  }
+
+  const domainParts = domain.split('.');
+  if (domainParts.length < 2 || domainParts[domainParts.length - 1].length < 2) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Resolve Lightning address to LNURL-pay endpoint
+ */
+export async function resolveLightningAddress(
+  lightningAddress: string
+): Promise<LNURLPayResponse> {
+  if (!isValidLightningAddress(lightningAddress)) {
+    throw new Error('Invalid Lightning address format. Expected: username@domain.com');
+  }
+
+  const [username, domain] = lightningAddress.split('@');
+  const lnurlEndpoint = `https://${domain}/.well-known/lnurlp/${username}`;
+
+  const response = await fetch(lnurlEndpoint, {
+    headers: { 'Accept': 'application/json' },
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to resolve Lightning address: ${response.status} ${response.statusText}`
+    );
+  }
+
+  const data: LNURLPayResponse = await response.json();
+
+  if (data.status && data.status !== 'OK') {
+    throw new Error('LNURL endpoint returned error status');
+  }
+
+  if (data.tag !== 'payRequest') {
+    throw new Error(`Unexpected LNURL tag: ${data.tag}`);
+  }
+
+  return data;
+}
+
+export interface GetInvoiceParams {
+  lightningAddress: string;
+  amountSats: number;
+  comment?: string;
+}
+
+/**
+ * Get BOLT11 invoice from Lightning address
+ */
+export async function getInvoiceFromLightningAddress(
+  params: GetInvoiceParams
+): Promise<string> {
+  const { lightningAddress, amountSats, comment } = params;
+
+  if (!isValidLightningAddress(lightningAddress)) {
+    throw new Error('Invalid Lightning address format. Expected: username@domain.com');
+  }
+
+  if (amountSats <= 0) {
+    throw new Error('Amount must be greater than 0');
+  }
+
+  // Step 1: Resolve LNURL-pay endpoint
+  const lnurlData = await resolveLightningAddress(lightningAddress);
+
+  // Step 2: Validate amount against min/max bounds
+  const minSats = lnurlData.minSendable / 1000;
+  const maxSats = lnurlData.maxSendable / 1000;
+
+  if (amountSats < minSats) {
+    throw new Error(`Amount ${amountSats} sats is below minimum ${minSats} sats`);
+  }
+
+  if (amountSats > maxSats) {
+    throw new Error(`Amount ${amountSats} sats exceeds maximum ${maxSats} sats`);
+  }
+
+  // Step 3: Request invoice from callback URL
+  const amountMsats = amountSats * 1000;
+  const callbackUrl = new URL(lnurlData.callback);
+  callbackUrl.searchParams.set('amount', amountMsats.toString());
+
+  if (comment && lnurlData.commentAllowed) {
+    if (comment.length > lnurlData.commentAllowed) {
+      throw new Error(
+        `Comment length ${comment.length} exceeds maximum ${lnurlData.commentAllowed} characters`
+      );
+    }
+    callbackUrl.searchParams.set('comment', comment);
+  }
+
+  const invoiceResponse = await fetch(callbackUrl.toString(), {
+    headers: { 'Accept': 'application/json' },
+  });
+
+  if (!invoiceResponse.ok) {
+    throw new Error(
+      `Failed to get invoice: ${invoiceResponse.status} ${invoiceResponse.statusText}`
+    );
+  }
+
+  const invoiceData: LNURLInvoiceResponse = await invoiceResponse.json();
+
+  if (invoiceData.pr) {
+    return invoiceData.pr;
+  }
+
+  if (invoiceData.status && invoiceData.status !== 'OK') {
+    const errorReason = invoiceData.reason || 'Invoice generation failed';
+    throw new Error(`Invoice generation failed: ${errorReason}`);
+  }
+
+  throw new Error('No invoice returned from provider');
+}
diff --git a/src/src/lib/nip06.test.ts b/src/src/lib/nip06.test.ts
new file mode 100644
index 0000000..6529495
--- /dev/null
+++ b/src/src/lib/nip06.test.ts
@@ -0,0 +1,173 @@
+import { describe, it, expect } from 'vitest';
+import { getPublicKey, nip19 } from 'nostr-tools';
+import {
+  generateMnemonicPhrase,
+  validateMnemonicPhrase,
+  privateKeyFromMnemonic,
+  normalizeMnemonic,
+  mnemonicToWords,
+  wordsToMnemonic,
+  deriveMultipleAccounts,
+} from './nip06';
+
+describe('NIP-06 Key Derivation', () => {
+  // Test vector from NIP-06 specification
+  const TEST_MNEMONIC = 'leader monkey parrot ring guide accident before fence cannon height naive bean';
+  const TEST_PRIVATE_KEY_HEX = '7f7ff03d123792d6ac594bfa67bf6d0c0ab55b6b1fdb6249303fe861f1ccba9a';
+
+  describe('generateMnemonicPhrase', () => {
+    it('generates a valid 12-word mnemonic by default', () => {
+      const mnemonic = generateMnemonicPhrase();
+      const words = mnemonic.split(' ');
+      
+      expect(words).toHaveLength(12);
+      expect(validateMnemonicPhrase(mnemonic)).toBe(true);
+    });
+
+    it('generates a valid 24-word mnemonic when requested', () => {
+      const mnemonic = generateMnemonicPhrase(256);
+      const words = mnemonic.split(' ');
+      
+      expect(words).toHaveLength(24);
+      expect(validateMnemonicPhrase(mnemonic)).toBe(true);
+    });
+
+    it('generates different mnemonics on each call', () => {
+      const mnemonic1 = generateMnemonicPhrase();
+      const mnemonic2 = generateMnemonicPhrase();
+      
+      expect(mnemonic1).not.toBe(mnemonic2);
+    });
+  });
+
+  describe('validateMnemonicPhrase', () => {
+    it('validates correct mnemonic', () => {
+      expect(validateMnemonicPhrase(TEST_MNEMONIC)).toBe(true);
+    });
+
+    it('rejects invalid mnemonic', () => {
+      expect(validateMnemonicPhrase('invalid mnemonic phrase')).toBe(false);
+    });
+
+    it('rejects empty string', () => {
+      expect(validateMnemonicPhrase('')).toBe(false);
+    });
+
+    it('rejects incorrect word count', () => {
+      expect(validateMnemonicPhrase('word word word')).toBe(false);
+    });
+  });
+
+  describe('privateKeyFromMnemonic', () => {
+    it('derives correct private key from test vector', () => {
+      const privateKey = privateKeyFromMnemonic(TEST_MNEMONIC);
+      const privateKeyHex = Buffer.from(privateKey).toString('hex');
+      
+      expect(privateKeyHex).toBe(TEST_PRIVATE_KEY_HEX);
+    });
+
+    it('derives same key for same mnemonic', () => {
+      const key1 = privateKeyFromMnemonic(TEST_MNEMONIC);
+      const key2 = privateKeyFromMnemonic(TEST_MNEMONIC);
+      
+      expect(Buffer.from(key1).toString('hex')).toBe(Buffer.from(key2).toString('hex'));
+    });
+
+    it('throws error for invalid mnemonic', () => {
+      expect(() => {
+        privateKeyFromMnemonic('invalid mnemonic');
+      }).toThrow('Invalid mnemonic phrase');
+    });
+
+    it('derives different keys for different accounts', () => {
+      const key0 = privateKeyFromMnemonic(TEST_MNEMONIC, 0);
+      const key1 = privateKeyFromMnemonic(TEST_MNEMONIC, 1);
+      
+      expect(Buffer.from(key0).toString('hex')).not.toBe(Buffer.from(key1).toString('hex'));
+    });
+
+    it('can be encoded to valid nsec', () => {
+      const privateKey = privateKeyFromMnemonic(TEST_MNEMONIC);
+      const nsec = nip19.nsecEncode(privateKey);
+      
+      expect(nsec).toMatch(/^nsec1[a-z0-9]{58}$/);
+    });
+
+    it('derives valid public key', () => {
+      const privateKey = privateKeyFromMnemonic(TEST_MNEMONIC);
+      const publicKey = getPublicKey(privateKey);
+      
+      expect(publicKey).toHaveLength(64); // Hex string of 32 bytes
+      expect(publicKey).toMatch(/^[0-9a-f]{64}$/);
+    });
+  });
+
+  describe('normalizeMnemonic', () => {
+    it('trims whitespace', () => {
+      expect(normalizeMnemonic('  test phrase  ')).toBe('test phrase');
+    });
+
+    it('converts to lowercase', () => {
+      expect(normalizeMnemonic('TEST PHRASE')).toBe('test phrase');
+    });
+
+    it('normalizes multiple spaces', () => {
+      expect(normalizeMnemonic('test    phrase   here')).toBe('test phrase here');
+    });
+
+    it('handles mixed case and spacing', () => {
+      expect(normalizeMnemonic('  TeSt   PhRaSe  ')).toBe('test phrase');
+    });
+  });
+
+  describe('mnemonicToWords / wordsToMnemonic', () => {
+    it('splits mnemonic into word array', () => {
+      const words = mnemonicToWords(TEST_MNEMONIC);
+      expect(words).toHaveLength(12);
+      expect(words[0]).toBe('leader');
+      expect(words[11]).toBe('bean');
+    });
+
+    it('joins word array into mnemonic', () => {
+      const words = ['test', 'phrase', 'here'];
+      const mnemonic = wordsToMnemonic(words);
+      expect(mnemonic).toBe('test phrase here');
+    });
+
+    it('round-trips correctly', () => {
+      const original = TEST_MNEMONIC;
+      const words = mnemonicToWords(original);
+      const reconstructed = wordsToMnemonic(words);
+      expect(reconstructed).toBe(original);
+    });
+  });
+
+  describe('deriveMultipleAccounts', () => {
+    it('derives multiple accounts from one mnemonic', () => {
+      const accounts = deriveMultipleAccounts(TEST_MNEMONIC, 3);
+      
+      expect(accounts).toHaveLength(3);
+      expect(accounts[0]).toHaveLength(32);
+      expect(accounts[1]).toHaveLength(32);
+      expect(accounts[2]).toHaveLength(32);
+      
+      // All should be different
+      const hex0 = Buffer.from(accounts[0]).toString('hex');
+      const hex1 = Buffer.from(accounts[1]).toString('hex');
+      const hex2 = Buffer.from(accounts[2]).toString('hex');
+      
+      expect(hex0).not.toBe(hex1);
+      expect(hex1).not.toBe(hex2);
+      expect(hex0).not.toBe(hex2);
+    });
+
+    it('first account matches single derivation', () => {
+      const accounts = deriveMultipleAccounts(TEST_MNEMONIC, 3);
+      const singleAccount = privateKeyFromMnemonic(TEST_MNEMONIC, 0);
+      
+      expect(Buffer.from(accounts[0]).toString('hex')).toBe(
+        Buffer.from(singleAccount).toString('hex')
+      );
+    });
+  });
+});
diff --git a/src/src/lib/nip06.ts b/src/src/lib/nip06.ts
new file mode 100644
index 0000000..2336d7d
--- /dev/null
+++ b/src/src/lib/nip06.ts
@@ -0,0 +1,107 @@
+import { generateMnemonic, mnemonicToSeedSync, validateMnemonic } from '@scure/bip39';
+import { wordlist } from '@scure/bip39/wordlists/english';
+import { HDKey } from '@scure/bip32';
+
+/**
+ * NIP-06: Basic key derivation from mnemonic seed phrase
+ * https://github.com/nostr-protocol/nips/blob/master/06.md
+ * 
+ * Uses BIP39 for mnemonic generation and BIP32 for key derivation
+ * Derivation path: m/44'/1237'/account'/0/0
+ */
+
+export const NIP06_PATH = "m/44'/1237'/0'/0/0";
+
+/**
+ * Generate a new mnemonic seed phrase
+ * @param strength - 128 for 12 words, 256 for 24 words (default: 128)
+ * @returns 12 or 24 word mnemonic phrase
+ */
+export function generateMnemonicPhrase(strength: 128 | 256 = 128): string {
+  return generateMnemonic(wordlist, strength);
+}
+
+/**
+ * Validate a mnemonic seed phrase
+ * @param mnemonic - Space-separated words
+ * @returns true if valid, false otherwise
+ */
+export function validateMnemonicPhrase(mnemonic: string): boolean {
+  try {
+    return validateMnemonic(mnemonic, wordlist);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Derive a private key from a mnemonic phrase using NIP-06
+ * @param mnemonic - Space-separated mnemonic phrase
+ * @param account - Account index (default: 0)
+ * @returns 32-byte private key as Uint8Array
+ */
+export function privateKeyFromMnemonic(mnemonic: string, account: number = 0): Uint8Array {
+  if (!validateMnemonicPhrase(mnemonic)) {
+    throw new Error('Invalid mnemonic phrase');
+  }
+
+  // Generate seed from mnemonic
+  const seed = mnemonicToSeedSync(mnemonic);
+
+  // Derive key using NIP-06 path
+  const path = account === 0 ? NIP06_PATH : `m/44'/1237'/${account}'/0/0`;
+  const hdKey = HDKey.fromMasterSeed(seed);
+  const derivedKey = hdKey.derive(path);
+
+  if (!derivedKey.privateKey) {
+    throw new Error('Failed to derive private key');
+  }
+
+  return derivedKey.privateKey;
+}
+
+/**
+ * Derive multiple accounts from a single mnemonic
+ * @param mnemonic - Space-separated mnemonic phrase
+ * @param count - Number of accounts to derive (default: 1)
+ * @returns Array of 32-byte private keys
+ */
+export function deriveMultipleAccounts(mnemonic: string, count: number = 1): Uint8Array[] {
+  const accounts: Uint8Array[] = [];
+  
+  for (let i = 0; i < count; i++) {
+    accounts.push(privateKeyFromMnemonic(mnemonic, i));
+  }
+  
+  return accounts;
+}
+
+/**
+ * Normalize mnemonic phrase (trim, lowercase, normalize whitespace)
+ * @param mnemonic - Raw mnemonic input
+ * @returns Normalized mnemonic
+ */
+export function normalizeMnemonic(mnemonic: string): string {
+  return mnemonic
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, ' '); // Normalize whitespace to single spaces
+}
+
+/**
+ * Split mnemonic into word array
+ * @param mnemonic - Space-separated mnemonic phrase
+ * @returns Array of words
+ */
+export function mnemonicToWords(mnemonic: string): string[] {
+  return normalizeMnemonic(mnemonic).split(' ');
+}
+
+/**
+ * Join word array into mnemonic string
+ * @param words - Array of mnemonic words
+ * @returns Space-separated mnemonic phrase
+ */
+export function wordsToMnemonic(words: string[]): string {
+  return words.join(' ');
+}
diff --git a/src/src/lib/offlineCache.ts b/src/src/lib/offlineCache.ts
new file mode 100644
index 0000000..06cd566
--- /dev/null
+++ b/src/src/lib/offlineCache.ts
@@ -0,0 +1,301 @@
+import Dexie, { type Table } from 'dexie';
+import type { NostrEvent } from '@nostrify/nostrify';
+import type { SkateSpot } from '@/lib/types';
+
+// Define the database schema
+interface CachedSpot {
+  id: string; // event id
+  pubkey: string;
+  identifier: string;
+  event: NostrEvent;
+  spot: SkateSpot;
+  cachedAt: number;
+  viewedAt: number;
+}
+
+interface PendingPost {
+  id: string; // local uuid
+  kind: number;
+  content: string;
+  tags: string[][];
+  createdAt: number;
+  status: 'pending' | 'publishing' | 'failed';
+  retries: number;
+}
+
+interface OfflineSettings {
+  key: string;
+  value: string;
+}
+
+// Create the Dexie database
+class SkateSpotsCacheDB extends Dexie {
+  spots!: Table<CachedSpot, string>;
+  pendingPosts!: Table<PendingPost, string>;
+  settings!: Table<OfflineSettings, string>;
+
+  constructor() {
+    super('SkateSpotsCacheDB');
+    this.version(1).stores({
+      spots: 'id, pubkey, identifier, [pubkey+identifier], cachedAt, viewedAt',
+      pendingPosts: 'id, kind, status, createdAt',
+      settings: 'key',
+    });
+  }
+}
+
+// Singleton database instance
+let db: SkateSpotsCacheDB | null = null;
+
+function getDB(): SkateSpotsCacheDB {
+  if (!db) {
+    db = new SkateSpotsCacheDB();
+  }
+  return db;
+}
+
+// ============ Spot Caching ============
+
+/**
+ * Cache a spot for offline viewing
+ */
+export async function cacheSpot(event: NostrEvent, spot: SkateSpot): Promise<void> {
+  const db = getDB();
+  const now = Date.now();
+
+  await db.spots.put({
+    id: event.id,
+    pubkey: spot.pubkey,
+    identifier: spot.identifier,
+    event,
+    spot,
+    cachedAt: now,
+    viewedAt: now,
+  });
+}
+
+/**
+ * Cache multiple spots at once
+ */
+export async function cacheSpots(spotsWithEvents: Array<{ event: NostrEvent; spot: SkateSpot }>): Promise<void> {
+  const db = getDB();
+  const now = Date.now();
+
+  await db.spots.bulkPut(
+    spotsWithEvents.map(({ event, spot }) => ({
+      id: event.id,
+      pubkey: spot.pubkey,
+      identifier: spot.identifier,
+      event,
+      spot,
+      cachedAt: now,
+      viewedAt: now,
+    }))
+  );
+}
+
+/**
+ * Get a cached spot by pubkey and identifier
+ */
+export async function getCachedSpot(pubkey: string, identifier: string): Promise<SkateSpot | null> {
+  const db = getDB();
+  const cached = await db.spots
+    .where('[pubkey+identifier]')
+    .equals([pubkey, identifier])
+    .first();
+
+  if (cached) {
+    // Update viewedAt
+    await db.spots.update(cached.id, { viewedAt: Date.now() });
+    return cached.spot;
+  }
+
+  return null;
+}
+
+/**
+ * Get all cached spots
+ */
+export async function getAllCachedSpots(): Promise<SkateSpot[]> {
+  const db = getDB();
+  const cached = await db.spots.toArray();
+  return cached.map(c => c.spot);
+}
+
+/**
+ * Get recently viewed spots (for offline browsing)
+ */
+export async function getRecentlyViewedSpots(limit: number = 50): Promise<SkateSpot[]> {
+  const db = getDB();
+  const cached = await db.spots
+    .orderBy('viewedAt')
+    .reverse()
+    .limit(limit)
+    .toArray();
+  return cached.map(c => c.spot);
+}
+
+/**
+ * Get cache statistics
+ */
+export async function getCacheStats(): Promise<{
+  spotCount: number;
+  oldestCachedAt: number | null;
+  newestCachedAt: number | null;
+  totalSizeEstimate: number;
+}> {
+  const db = getDB();
+  const spots = await db.spots.toArray();
+  
+  if (spots.length === 0) {
+    return {
+      spotCount: 0,
+      oldestCachedAt: null,
+      newestCachedAt: null,
+      totalSizeEstimate: 0,
+    };
+  }
+
+  const cachedTimes = spots.map(s => s.cachedAt);
+  const totalSize = spots.reduce((acc, s) => acc + JSON.stringify(s).length, 0);
+
+  return {
+    spotCount: spots.length,
+    oldestCachedAt: Math.min(...cachedTimes),
+    newestCachedAt: Math.max(...cachedTimes),
+    totalSizeEstimate: totalSize,
+  };
+}
+
+/**
+ * Clear old cached spots (older than maxAge in milliseconds)
+ */
+export async function clearOldCache(maxAgeMs: number = 7 * 24 * 60 * 60 * 1000): Promise<number> {
+  const db = getDB();
+  const cutoff = Date.now() - maxAgeMs;
+  
+  const oldSpots = await db.spots
+    .where('cachedAt')
+    .below(cutoff)
+    .primaryKeys();
+
+  await db.spots.bulkDelete(oldSpots);
+  return oldSpots.length;
+}
+
+/**
+ * Clear all cached spots
+ */
+export async function clearAllCache(): Promise<void> {
+  const db = getDB();
+  await db.spots.clear();
+}
+
+// ============ Pending Posts Queue ============
+
+/**
+ * Add a post to the pending queue (for posting when back online)
+ */
+export async function queuePost(kind: number, content: string, tags: string[][]): Promise<string> {
+  const db = getDB();
+  const id = crypto.randomUUID();
+
+  await db.pendingPosts.add({
+    id,
+    kind,
+    content,
+    tags,
+    createdAt: Date.now(),
+    status: 'pending',
+    retries: 0,
+  });
+
+  return id;
+}
+
+/**
+ * Get all pending posts
+ */
+export async function getPendingPosts(): Promise<PendingPost[]> {
+  const db = getDB();
+  return db.pendingPosts
+    .where('status')
+    .equals('pending')
+    .sortBy('createdAt');
+}
+
+/**
+ * Update a pending post's status
+ */
+export async function updatePendingPostStatus(
+  id: string,
+  status: 'pending' | 'publishing' | 'failed',
+  retries?: number
+): Promise<void> {
+  const db = getDB();
+  const update: Partial<PendingPost> = { status };
+  if (retries !== undefined) {
+    update.retries = retries;
+  }
+  await db.pendingPosts.update(id, update);
+}
+
+/**
+ * Remove a pending post (after successful publish)
+ */
+export async function removePendingPost(id: string): Promise<void> {
+  const db = getDB();
+  await db.pendingPosts.delete(id);
+}
+
+/**
+ * Get pending posts count
+ */
+export async function getPendingPostsCount(): Promise<number> {
+  const db = getDB();
+  return db.pendingPosts.where('status').equals('pending').count();
+}
+
+// ============ Offline Detection ============
+
+/**
+ * Check if the app is currently offline
+ */
+export function isOffline(): boolean {
+  return !navigator.onLine;
+}
+
+/**
+ * Listen for online/offline status changes
+ */
+export function onConnectionChange(callback: (isOnline: boolean) => void): () => void {
+  const handleOnline = () => callback(true);
+  const handleOffline = () => callback(false);
+
+  window.addEventListener('online', handleOnline);
+  window.addEventListener('offline', handleOffline);
+
+  return () => {
+    window.removeEventListener('online', handleOnline);
+    window.removeEventListener('offline', handleOffline);
+  };
+}
+
+// ============ Settings ============
+
+/**
+ * Store a setting in the offline cache
+ */
+export async function setSetting(key: string, value: string): Promise<void> {
+  const db = getDB();
+  await db.settings.put({ key, value });
+}
+
+/**
+ * Get a setting from the offline cache
+ */
+export async function getSetting(key: string): Promise<string | null> {
+  const db = getDB();
+  const setting = await db.settings.get(key);
+  return setting?.value ?? null;
+}
diff --git a/src/src/lib/polyfills.ts b/src/src/lib/polyfills.ts
new file mode 100644
index 0000000..17e7e56
--- /dev/null
+++ b/src/src/lib/polyfills.ts
@@ -0,0 +1,90 @@
+import Buffer from 'buffer';
+
+/**
+ * Polyfill for Buffer in browser environment
+ *
+ * Many Node.js libraries like isomorphic-git and bitcoinjs-lib expect Buffer to be globally available.
+ * This polyfill makes the buffer package's Buffer available globally.
+ */
+if (!globalThis.Buffer) {
+  globalThis.Buffer = Buffer.Buffer;
+}
+
+/**
+ * Polyfill for AbortSignal.any()
+ * 
+ * AbortSignal.any() creates an AbortSignal that will be aborted when any of the
+ * provided signals are aborted. This is useful for combining multiple abort signals.
+ * 
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/any_static
+ */
+
+// Check if AbortSignal.any is already available
+if (!AbortSignal.any) {
+  AbortSignal.any = function(signals: AbortSignal[]): AbortSignal {
+    // If no signals provided, return a signal that never aborts
+    if (signals.length === 0) {
+      return new AbortController().signal;
+    }
+
+    // If only one signal, return it directly for efficiency
+    if (signals.length === 1) {
+      return signals[0];
+    }
+
+    // Check if any signal is already aborted
+    for (const signal of signals) {
+      if (signal.aborted) {
+        // Create an already-aborted signal with the same reason
+        const controller = new AbortController();
+        controller.abort(signal.reason);
+        return controller.signal;
+      }
+    }
+
+    // Create a new controller for the combined signal
+    const controller = new AbortController();
+
+    // Function to abort the combined signal
+    const onAbort = (event: Event) => {
+      const target = event.target as AbortSignal;
+      controller.abort(target.reason);
+    };
+
+    // Listen for abort events on all input signals
+    for (const signal of signals) {
+      signal.addEventListener('abort', onAbort, { once: true });
+    }
+
+    // Clean up listeners when the combined signal is aborted
+    controller.signal.addEventListener('abort', () => {
+      for (const signal of signals) {
+        signal.removeEventListener('abort', onAbort);
+      }
+    }, { once: true });
+
+    return controller.signal;
+  };
+}
+
+/**
+ * Polyfill for AbortSignal.timeout()
+ * 
+ * AbortSignal.timeout() creates an AbortSignal that will be aborted after a
+ * specified number of milliseconds.
+ * 
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/timeout_static
+ */
+
+// Check if AbortSignal.timeout is already available
+if (!AbortSignal.timeout) {
+  AbortSignal.timeout = function(milliseconds: number): AbortSignal {
+    const controller = new AbortController();
+    
+    setTimeout(() => {
+      controller.abort(new DOMException('The operation was aborted due to timeout', 'TimeoutError'));
+    }, milliseconds);
+    
+    return controller.signal;
+  };
+}
\ No newline at end of file
diff --git a/src/src/lib/relatr.ts b/src/src/lib/relatr.ts
new file mode 100644
index 0000000..3d01c2d
--- /dev/null
+++ b/src/src/lib/relatr.ts
@@ -0,0 +1,188 @@
+/**
+ * Relatr API Integration
+ * 
+ * Relatr is a decentralized Web of Trust service that provides global trust scores
+ * for Nostr pubkeys. This module provides integration with the Relatr service.
+ * 
+ * Documentation: https://www.relatr.xyz/
+ * GitHub: https://github.com/ContextVM/relatr
+ */
+
+export interface RelatrScore {
+  source: string;      // Source pubkey (perspective)
+  target: string;      // Target pubkey being scored
+  score: number;       // Trust score (0-100)
+  distance?: number;   // Social graph distance
+  hasNip05?: boolean;  // NIP-05 verification status
+  hasLud16?: boolean;  // Lightning address status
+  timestamp: number;   // When score was calculated
+}
+
+export interface RelatrBatchRequest {
+  source: string;      // Perspective pubkey
+  targets: string[];   // Array of pubkeys to score
+}
+
+export interface RelatrBatchResponse {
+  scores: Map<string, RelatrScore>;
+}
+
+/**
+ * Relatr API client
+ * 
+ * NOTE: This is a placeholder implementation. The actual Relatr API
+ * endpoint structure needs to be confirmed from the official documentation.
+ * 
+ * Relatr provides an MCP (Model Context Protocol) server interface, which
+ * may require different integration patterns than a traditional REST API.
+ * 
+ * Potential API patterns:
+ * 1. REST API: https://api.relatr.xyz/v1/scores?source=...&target=...
+ * 2. MCP Server: Requires MCP client connection
+ * 3. Nostr Events: Trust scores published as Nostr events
+ */
+export class RelatrClient {
+  private apiUrl: string;
+  private corsProxy: string;
+
+  constructor(
+    apiUrl = 'https://api.relatr.xyz',
+    corsProxy = 'https://proxy.shakespeare.diy/?url='
+  ) {
+    this.apiUrl = apiUrl;
+    this.corsProxy = corsProxy;
+  }
+
+  /**
+   * Fetch trust score for a single target from source's perspective
+   * 
+   * @param source - Source pubkey (viewer's perspective)
+   * @param target - Target pubkey to score
+   * @returns Trust score or null if unavailable
+   */
+  async getScore(source: string, target: string): Promise<RelatrScore | null> {
+    try {
+      // TODO: Confirm actual Relatr API endpoint structure
+      // This is a placeholder based on common REST patterns
+      const url = `${this.corsProxy}${encodeURIComponent(
+        `${this.apiUrl}/v1/score?source=${source}&target=${target}`
+      )}`;
+
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        signal: AbortSignal.timeout(10000),
+      });
+
+      if (!response.ok) {
+        console.warn(`[Relatr] API returned ${response.status}`);
+        return null;
+      }
+
+      const data = await response.json();
+      
+      return {
+        source,
+        target,
+        score: data.score || 0,
+        distance: data.distance,
+        hasNip05: data.hasNip05,
+        hasLud16: data.hasLud16,
+        timestamp: Date.now(),
+      };
+    } catch (error) {
+      console.warn('[Relatr] Failed to fetch score:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Fetch trust scores for multiple targets in batch
+   * 
+   * @param source - Source pubkey (viewer's perspective)
+   * @param targets - Array of target pubkeys to score
+   * @returns Map of target pubkey to score
+   */
+  async getBatchScores(
+    source: string,
+    targets: string[]
+  ): Promise<Map<string, RelatrScore>> {
+    const scores = new Map<string, RelatrScore>();
+
+    try {
+      // TODO: Confirm if Relatr supports batch requests
+      // Option 1: Batch endpoint
+      const url = `${this.corsProxy}${encodeURIComponent(`${this.apiUrl}/v1/batch`)}`;
+      
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ source, targets }),
+        signal: AbortSignal.timeout(15000),
+      });
+
+      if (!response.ok) {
+        console.warn(`[Relatr] Batch API returned ${response.status}`);
+        return scores;
+      }
+
+      const data = await response.json();
+      
+      // Parse batch response
+      if (Array.isArray(data.scores)) {
+        for (const scoreData of data.scores) {
+          scores.set(scoreData.target, {
+            source,
+            target: scoreData.target,
+            score: scoreData.score || 0,
+            distance: scoreData.distance,
+            hasNip05: scoreData.hasNip05,
+            hasLud16: scoreData.hasLud16,
+            timestamp: Date.now(),
+          });
+        }
+      }
+
+      return scores;
+    } catch (error) {
+      console.warn('[Relatr] Batch request failed, falling back to individual requests:', error);
+      
+      // Fallback: Make individual requests (slower but reliable)
+      for (const target of targets.slice(0, 10)) { // Limit to 10 to avoid rate limits
+        const score = await this.getScore(source, target);
+        if (score) {
+          scores.set(target, score);
+        }
+        // Small delay between requests
+        await new Promise(resolve => setTimeout(resolve, 100));
+      }
+
+      return scores;
+    }
+  }
+}
+
+/**
+ * Global Relatr client instance
+ * 
+ * NOTE: Set RELATR_ENABLED = false until API integration is confirmed
+ */
+export const RELATR_ENABLED = false; // Toggle when API is ready
+export const relatrClient = new RelatrClient();
+
+/**
+ * Normalize Relatr score to 0-100 scale
+ * Relatr may use different scoring systems, this ensures compatibility
+ */
+export function normalizeRelatrScore(score: number): number {
+  // Assume Relatr uses 0-1 scale, convert to 0-100
+  if (score <= 1) {
+    return Math.round(score * 100);
+  }
+  // Already 0-100 scale
+  return Math.round(Math.max(0, Math.min(100, score)));
+}
diff --git a/src/src/lib/skateTags.ts b/src/src/lib/skateTags.ts
new file mode 100644
index 0000000..72ad988
--- /dev/null
+++ b/src/src/lib/skateTags.ts
@@ -0,0 +1,424 @@
+/**
+ * Curated list of skateboarding tags for spot categorization.
+ * Tags are organized by category for autocomplete suggestions.
+ * 
+ * Rules:
+ * - All tags are lowercase
+ * - Multi-word tags use hyphens (no spaces)
+ * - No special characters except hyphens
+ * - No # prefix (added in UI only)
+ */
+
+export interface TagCategory {
+  name: string;
+  description: string;
+  tags: string[];
+}
+
+// Feature tags - obstacles and terrain types
+export const featureTags: TagCategory = {
+  name: 'Features',
+  description: 'Obstacles and terrain',
+  tags: [
+    // Ledges & Manual Pads
+    'ledge',
+    'manual-pad',
+    'manny-pad',
+    'curb',
+    'planter',
+    'bench',
+    'picnic-table',
+    'hubba',
+    'hubba-ledge',
+    'slappy-curb',
+    'waxed',
+    
+    // Rails
+    'rail',
+    'handrail',
+    'flatrail',
+    'flat-bar',
+    'kinked-rail',
+    'kink',
+    'rainbow-rail',
+    'down-rail',
+    'double-kinked',
+    'curved-rail',
+    'pole-jam',
+    
+    // Stairs & Gaps
+    'stairs',
+    'stair-set',
+    'gap',
+    'euro-gap',
+    'hip',
+    'drop',
+    'loading-dock',
+    'bump-to-bar',
+    'out-ledge',
+    
+    // Transition
+    'quarter',
+    'quarter-pipe',
+    'halfpipe',
+    'half-pipe',
+    'miniramp',
+    'mini-ramp',
+    'vert',
+    'bowl',
+    'pool',
+    'cradle',
+    'spine',
+    'channel',
+    'extension',
+    'coping',
+    'roll-in',
+    'fly-out',
+    'tombstone',
+    
+    // Banks & Ramps
+    'bank',
+    'bank-to-wall',
+    'kicker',
+    'launch',
+    'pyramid',
+    'volcano',
+    'fun-box',
+    'funbox',
+    'a-frame',
+    
+    // Flow Features
+    'snake-run',
+    'pump-track',
+    'flow-section',
+    'lines',
+    
+    // Walls & Vertical
+    'wallride',
+    'wall-ride',
+    'wall',
+    'ditch',
+    'full-pipe',
+    
+    // Flatground
+    'flatground',
+    'flat',
+    'smooth-ground',
+  ],
+};
+
+// Surface tags - materials and textures
+export const surfaceTags: TagCategory = {
+  name: 'Surfaces',
+  description: 'Materials and textures',
+  tags: [
+    'concrete',
+    'marble',
+    'granite',
+    'brick',
+    'metal',
+    'steel',
+    'wood',
+    'asphalt',
+    'tile',
+    'terrazzo',
+    'stone',
+    'painted',
+    'sealed',
+    'polished',
+    'smooth',
+    'rough',
+    'crusty',
+    'slippery',
+    'grippy',
+    'cracked',
+    'pebbled',
+  ],
+};
+
+// Size tags - dimensions and scale
+export const sizeTags: TagCategory = {
+  name: 'Sizes',
+  description: 'Dimensions and scale',
+  tags: [
+    'small',
+    'medium',
+    'large',
+    'massive',
+    'huge',
+    'tiny',
+    'mellow',
+    'steep',
+    'low',
+    'high',
+    'long',
+    'short',
+    'wide',
+    'narrow',
+    'deep',
+    'shallow',
+  ],
+};
+
+// Stair count tags
+export const stairTags: TagCategory = {
+  name: 'Stair Counts',
+  description: 'Number of stairs',
+  tags: [
+    '2-stair',
+    '3-stair',
+    '4-stair',
+    '5-stair',
+    '6-stair',
+    '7-stair',
+    '8-stair',
+    '9-stair',
+    '10-stair',
+    '11-stair',
+    '12-stair',
+    '10-plus',
+    'double-set',
+    'triple-set',
+  ],
+};
+
+// Vibe & condition tags
+export const vibeTags: TagCategory = {
+  name: 'Vibes',
+  description: 'Atmosphere and condition',
+  tags: [
+    // Fame & History
+    'famous',
+    'classic',
+    'legendary',
+    'iconic',
+    'hidden-gem',
+    'underrated',
+    'local-secret',
+    
+    // Skill Level
+    'beginner-friendly',
+    'beginner',
+    'intermediate',
+    'advanced',
+    'pro-spot',
+    'gnarly',
+    'scary',
+    
+    // Atmosphere
+    'chill',
+    'mellow-vibes',
+    'locals-only',
+    'welcoming',
+    'busy',
+    'empty',
+    'crowded',
+    
+    // Time & Lighting
+    'night-spot',
+    'night-lights',
+    'lit',
+    'well-lit',
+    'dark',
+    'daytime-only',
+    '24-hours',
+    
+    // Weather Protection
+    'covered',
+    'shaded',
+    'indoor',
+    'outdoor',
+    'rain-protected',
+    'under-bridge',
+    
+    // Security & Access
+    'security',
+    'guards',
+    'bust-factor',
+    'chill-security',
+    'no-security',
+    'skate-stopped',
+    'knobbed',
+    'capped',
+    'clipped',
+    
+    // Condition
+    'well-maintained',
+    'clean',
+    'pristine',
+    'run-down',
+    'abandoned',
+    'demolished',
+    'renovated',
+    'new',
+    'old-school',
+  ],
+};
+
+// Location context tags
+export const locationTags: TagCategory = {
+  name: 'Location',
+  description: 'Location context',
+  tags: [
+    'downtown',
+    'city-center',
+    'suburban',
+    'industrial',
+    'residential',
+    'campus',
+    'university',
+    'school',
+    'waterfront',
+    'beach',
+    'riverside',
+    'rooftop',
+    'underground',
+    'basement',
+    'parking-garage',
+    'parking-lot',
+    'business-district',
+    'shopping-center',
+    'mall',
+    'train-station',
+    'metro',
+    'museum',
+    'library',
+    'church',
+    'government',
+    'courthouse',
+    'hospital',
+    'airport',
+  ],
+};
+
+// Trick-specific tags
+export const trickTags: TagCategory = {
+  name: 'Tricks',
+  description: 'Good for specific tricks',
+  tags: [
+    'grind-spot',
+    'slide-spot',
+    'manual-spot',
+    'flip-tricks',
+    'tech-spot',
+    'tech-ledge',
+    'power-moves',
+    'transition-tricks',
+    'airs',
+    'transfers',
+    'lines',
+    'speed',
+    'flow',
+  ],
+};
+
+// All tag categories
+export const allTagCategories: TagCategory[] = [
+  featureTags,
+  surfaceTags,
+  sizeTags,
+  stairTags,
+  vibeTags,
+  locationTags,
+  trickTags,
+];
+
+// Flat list of all curated tags
+export const allCuratedTags: string[] = allTagCategories.flatMap(cat => cat.tags);
+
+// Set for O(1) lookup
+export const curatedTagSet = new Set(allCuratedTags);
+
+/**
+ * Check if a tag is in the curated list
+ */
+export function isCuratedTag(tag: string): boolean {
+  return curatedTagSet.has(tag.toLowerCase());
+}
+
+/**
+ * Normalize a tag: lowercase, replace spaces with hyphens, remove special chars
+ */
+export function normalizeTag(tag: string): string {
+  return tag
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-')           // spaces to hyphens
+    .replace(/[^a-z0-9-]/g, '')     // remove special chars
+    .replace(/-+/g, '-')            // collapse multiple hyphens
+    .replace(/^-|-$/g, '');         // trim leading/trailing hyphens
+}
+
+/**
+ * Search tags by prefix for autocomplete
+ */
+export function searchTags(query: string, limit: number = 10): string[] {
+  const normalized = normalizeTag(query);
+  if (!normalized) return [];
+  
+  const results: string[] = [];
+  
+  // First, exact prefix matches
+  for (const tag of allCuratedTags) {
+    if (tag.startsWith(normalized)) {
+      results.push(tag);
+      if (results.length >= limit) return results;
+    }
+  }
+  
+  // Then, contains matches
+  for (const tag of allCuratedTags) {
+    if (tag.includes(normalized) && !tag.startsWith(normalized)) {
+      results.push(tag);
+      if (results.length >= limit) return results;
+    }
+  }
+  
+  return results;
+}
+
+/**
+ * Get suggested tags by category
+ */
+export function getTagsByCategory(categoryName: string): string[] {
+  const category = allTagCategories.find(
+    cat => cat.name.toLowerCase() === categoryName.toLowerCase()
+  );
+  return category?.tags ?? [];
+}
+
+/**
+ * Validate tags array - returns valid tags and warnings for non-curated tags
+ */
+export function validateTags(tags: string[]): {
+  valid: string[];
+  warnings: string[];
+} {
+  const valid: string[] = [];
+  const warnings: string[] = [];
+  
+  for (const tag of tags) {
+    const normalized = normalizeTag(tag);
+    if (normalized) {
+      valid.push(normalized);
+      if (!isCuratedTag(normalized)) {
+        warnings.push(normalized);
+      }
+    }
+  }
+  
+  return { valid, warnings };
+}
+
+// Spot categories (for the category dropdown)
+export const spotCategories = [
+  { value: 'street', label: 'Street', description: 'Street spots - stairs, rails, ledges' },
+  { value: 'park', label: 'Park', description: 'Skateparks - public or private' },
+  { value: 'diy', label: 'DIY', description: 'DIY/homemade spots' },
+  { value: 'plaza', label: 'Plaza', description: 'Public plazas with skate-friendly architecture' },
+] as const;
+
+export type SpotCategory = typeof spotCategories[number]['value'];
+
+// Max tags allowed per spot
+export const MAX_TAGS = 20;
diff --git a/src/src/lib/skateboardRating.ts b/src/src/lib/skateboardRating.ts
new file mode 100644
index 0000000..806dd29
--- /dev/null
+++ b/src/src/lib/skateboardRating.ts
@@ -0,0 +1,144 @@
+/**
+ * Skateboard emoji rating system for SkateSpots
+ * Uses 🛹 emojis instead of stars, from 1 to 10
+ */
+
+/**
+ * Generate skateboard rating display (1-10 skateboards based on count)
+ * @param count - The count to convert to a rating (sales, reviews, etc.)
+ * @param maxDisplay - Maximum skateboards to display (default 10)
+ * @returns Object with emoji string and numeric rating
+ */
+export function getSkateboardRating(count: number, maxDisplay = 10): { 
+  rating: number; 
+  display: string; 
+  label: string;
+} {
+  // Scale: 1-10 based on count thresholds
+  let rating: number;
+  let label: string;
+
+  if (count === 0) {
+    rating = 0;
+    label = 'New';
+  } else if (count === 1) {
+    rating = 1;
+    label = 'Just starting';
+  } else if (count <= 3) {
+    rating = 2;
+    label = 'Getting known';
+  } else if (count <= 5) {
+    rating = 3;
+    label = 'Building rep';
+  } else if (count <= 8) {
+    rating = 4;
+    label = 'Solid';
+  } else if (count <= 12) {
+    rating = 5;
+    label = 'Reliable';
+  } else if (count <= 18) {
+    rating = 6;
+    label = 'Well known';
+  } else if (count <= 25) {
+    rating = 7;
+    label = 'Established';
+  } else if (count <= 35) {
+    rating = 8;
+    label = 'Trusted';
+  } else if (count <= 50) {
+    rating = 9;
+    label = 'Pro seller';
+  } else {
+    rating = 10;
+    label = 'Legendary';
+  }
+
+  // Clamp to max display
+  const displayRating = Math.min(rating, maxDisplay);
+  const display = '🛹'.repeat(displayRating);
+
+  return { rating, display, label };
+}
+
+/**
+ * Get skateboard rating for skate spots (based on reviews/ratings)
+ * @param reviewCount - Number of reviews
+ * @param averageRating - Average rating (1-5 scale typically)
+ * @returns Object with emoji string and numeric rating
+ */
+export function getSpotSkateboardRating(reviewCount: number, averageRating: number = 0): {
+  rating: number;
+  display: string;
+  label: string;
+} {
+  // Combine review count and average rating for final score
+  // Weight: 60% average rating, 40% review count factor
+  let rating: number;
+  let label: string;
+
+  if (reviewCount === 0) {
+    rating = 0;
+    label = 'No reviews';
+  } else {
+    // Scale average rating (1-5) to (2-10)
+    const ratingScore = ((averageRating - 1) / 4) * 8 + 2;
+    
+    // Review count bonus (up to +2 for 20+ reviews)
+    const countBonus = Math.min(reviewCount / 10, 2);
+    
+    rating = Math.round(Math.min(ratingScore + countBonus, 10));
+    
+    if (rating <= 2) label = 'Sketchy';
+    else if (rating <= 4) label = 'Decent';
+    else if (rating <= 6) label = 'Solid spot';
+    else if (rating <= 8) label = 'Classic';
+    else label = 'Legendary';
+  }
+
+  const display = rating > 0 ? '🛹'.repeat(rating) : '';
+
+  return { rating, display, label };
+}
+
+/**
+ * Compact display for tight spaces (shows count + single emoji)
+ */
+export function getCompactRating(count: number): string {
+  if (count === 0) return '🛹 0';
+  return `🛹 ${count}`;
+}
+
+/**
+ * Trust badge configurations matching the skateboard theme
+ */
+export const SELLER_TRUST_BADGES = {
+  verified: { 
+    emoji: '✅', 
+    label: 'Verified', 
+    description: 'You follow them directly',
+    className: 'border-green-500/50 text-green-400 bg-green-500/10'
+  },
+  trusted: { 
+    emoji: '🛡️', 
+    label: 'Trusted', 
+    description: 'Friend-of-friend or NIP-05',
+    className: 'border-blue-500/50 text-blue-400 bg-blue-500/10'
+  },
+  new: { 
+    emoji: '⚠️', 
+    label: 'New', 
+    description: 'No trust signals yet',
+    className: 'border-yellow-500/50 text-yellow-400 bg-yellow-500/10'
+  },
+} as const;
+
+export type TrustLevel = keyof typeof SELLER_TRUST_BADGES;
+
+/**
+ * Get trust level from trust score
+ */
+export function getTrustLevel(trustScore: number | undefined): TrustLevel {
+  if (trustScore === undefined || trustScore < 50) return 'new';
+  if (trustScore >= 90) return 'verified';
+  return 'trusted';
+}
diff --git a/src/src/lib/types.ts b/src/src/lib/types.ts
new file mode 100644
index 0000000..8d0e1dc
--- /dev/null
+++ b/src/src/lib/types.ts
@@ -0,0 +1,1238 @@
+import type { NostrEvent } from '@nostrify/nostrify';
+
+// Community relay for all skate-specific content (spots, events, coaches, shops, etc.)
+// This ensures all users see the same content regardless of their personal relay settings
+export const SKATE_RELAY = 'wss://goskatespots.nostr1.com';
+
+export const SKATE_SPOT_KIND = 30818; // Addressable event - editable per pubkey+kind+d-tag
+export const SKATE_SHOP_KIND = 30017; // NIP-15 Stall (marketplace)
+export const CALENDAR_EVENT_KIND = 31923;
+export const SKATE_COACH_KIND = 35001;
+export const SKATE_FILMER_KIND = 35002; // Skate filmer/photographer profiles
+export const MARKETPLACE_ITEM_KIND = 30402; // NIP-99 Classified Listings
+export const SPOT_COLLECTION_KIND = 30003; // NIP-51 Bookmark sets for spot collections
+export const SKATE_TOUR_KIND = 30823; // Local skate tours - guides offer to show hidden spots
+
+export interface SkateSpot {
+  id: string;
+  pubkey: string;
+  identifier: string;
+  title: string;
+  description: string;
+  geohash: string;
+  location?: string;
+  images: string[];
+  category?: string; // Primary category: street, park, diy, plaza
+  tags: string[]; // Freeform tags (features, surfaces, vibes)
+  types: string[]; // Legacy - combined category + tags for backwards compat
+  accessType?: 'public' | 'private' | 'locals';
+  contactInfo?: string;
+  createdAt: number;
+  event: NostrEvent;
+}
+
+export interface SkateShop {
+  id: string;
+  pubkey: string;
+  identifier: string;
+  name: string;
+  description: string;
+  geohash: string;
+  location?: string;
+  images: string[];
+  phone?: string;
+  email?: string;
+  website?: string;
+  instagram?: string;
+  hours?: string;
+  createdAt: number;
+  event: NostrEvent;
+}
+
+export interface SkateEvent {
+  id: string;
+  pubkey: string;
+  identifier: string;
+  title: string;
+  description: string;
+  start: number;
+  end?: number;
+  geohash?: string;
+  location?: string;
+  image?: string;
+  types: string[];
+  createdAt: number;
+  event: NostrEvent;
+}
+
+export interface FoodSpot {
+  id: string;
+  name: string;
+  lat: number;
+  lng: number;
+  type: string;
+  cuisine?: string;
+  address?: string;
+  phone?: string;
+  website?: string;
+  openingHours?: string;
+  distance?: number;
+}
+
+export function parseSkateSpot(event: NostrEvent): SkateSpot | null {
+  if (event.kind !== SKATE_SPOT_KIND) return null;
+
+  // Must have 'skatespot' tag to be identified as a spot event
+  const hasSkateSpotTag = event.tags.some(([name, value]) => name === 't' && value === 'skatespot');
+  if (!hasSkateSpotTag) return null;
+
+  const d = event.tags.find(([name]) => name === 'd')?.[1];
+  const title = event.tags.find(([name]) => name === 'title')?.[1];
+  const geohash = event.tags.find(([name]) => name === 'g')?.[1];
+
+  if (!d || !title || !geohash) return null;
+
+  const location = event.tags.find(([name]) => name === 'location')?.[1];
+
+  // Support both 'image' (old) and 'imeta' (new, NIP-92) tags
+  const imageTags = event.tags.filter(([name]) => name === 'image').map(([, url]) => url);
+  const imetaTags = event.tags
+    .filter(([name]) => name === 'imeta')
+    .map((tag) => {
+      // imeta format: ['imeta', 'url https://...', 'm image/jpeg', ...]
+      const urlPart = tag.find((part) => part.startsWith('url '));
+      return urlPart ? urlPart.replace('url ', '') : null;
+    })
+    .filter(Boolean) as string[];
+
+  const images = [...imageTags, ...imetaTags];
+
+  // Get category from dedicated tag (new format)
+  const category = event.tags.find(([name]) => name === 'category')?.[1];
+
+  // Get all t tags except 'skatespot'
+  const allTags = event.tags
+    .filter(([name, value]) => name === 't' && value !== 'skatespot')
+    .map(([, value]) => value)
+    .filter(Boolean) as string[];
+
+  // Separate category-level tags (street, park, diy, plaza) from feature tags
+  const categoryValues = ['street', 'park', 'diy', 'plaza', 'transition'];
+  const legacyCategory = allTags.find(t => categoryValues.includes(t));
+  const tags = allTags.filter(t => !categoryValues.includes(t));
+
+  // types is legacy - combine category + tags for backwards compat
+  const types = allTags;
+
+  const accessType = event.tags.find(([name]) => name === 'access')?.[1] as 'public' | 'private' | 'locals' | undefined;
+  const contactInfo = event.tags.find(([name]) => name === 'contact')?.[1];
+
+  return {
+    id: event.id,
+    pubkey: event.pubkey,
+    identifier: d,
+    title,
+    description: event.content,
+    geohash,
+    location,
+    images,
+    category: category || legacyCategory, // Prefer new format, fallback to legacy
+    tags,
+    types,
+    accessType,
+    contactInfo,
+    createdAt: event.created_at,
+    event,
+  };
+}
+
+export function parseSkateShop(event: NostrEvent): SkateShop | null {
+  if (event.kind !== SKATE_SHOP_KIND) return null;
+
+  // Must have 'skateshop' tag to be identified as a shop event
+  const hasShopTag = event.tags.some(([name, value]) => name === 't' && value === 'skateshop');
+  if (!hasShopTag) return null;
+
+  const d = event.tags.find(([name]) => name === 'd')?.[1];
+  const name = event.tags.find(([name]) => name === 'name')?.[1];
+  const geohash = event.tags.find(([name]) => name === 'g')?.[1];
+
+  if (!d || !name || !geohash) return null;
+
+  const location = event.tags.find(([name]) => name === 'location')?.[1];
+
+  // Support both 'image' and 'imeta' tags
+  const imageTags = event.tags.filter(([name]) => name === 'image').map(([, url]) => url);
+  const imetaTags = event.tags
+    .filter(([name]) => name === 'imeta')
+    .map((tag) => {
+      const urlPart = tag.find((part) => part.startsWith('url '));
+      return urlPart ? urlPart.replace('url ', '') : null;
+    })
+    .filter(Boolean) as string[];
+
+  const images = [...imageTags, ...imetaTags];
+
+  const phone = event.tags.find(([name]) => name === 'phone')?.[1];
+  const email = event.tags.find(([name]) => name === 'email')?.[1];
+  const website = event.tags.find(([name]) => name === 'website')?.[1];
+  const instagram = event.tags.find(([name]) => name === 'instagram')?.[1];
+  const hours = event.tags.find(([name]) => name === 'hours')?.[1];
+
+  return {
+    id: event.id,
+    pubkey: event.pubkey,
+    identifier: d,
+    name,
+    description: event.content,
+    geohash,
+    location,
+    images,
+    phone,
+    email,
+    website,
+    instagram,
+    hours,
+    createdAt: event.created_at,
+    event,
+  };
+}
+
+export function parseSkateEvent(event: NostrEvent): SkateEvent | null {
+  if (event.kind !== CALENDAR_EVENT_KIND) return null;
+
+  const d = event.tags.find(([name]) => name === 'd')?.[1];
+  const title = event.tags.find(([name]) => name === 'title')?.[1];
+  const start = event.tags.find(([name]) => name === 'start')?.[1];
+
+  // Must have skateboarding tag
+  const hasSkateboardingTag = event.tags.some(
+    ([name, value]) => name === 't' && value === 'skateboarding'
+  );
+
+  if (!d || !title || !start || !hasSkateboardingTag) return null;
+
+  const end = event.tags.find(([name]) => name === 'end')?.[1];
+  const geohash = event.tags.find(([name]) => name === 'g')?.[1];
+  const location = event.tags.find(([name]) => name === 'location')?.[1];
+  const image = event.tags.find(([name]) => name === 'image')?.[1];
+
+  const types = event.tags
+    .filter(([name, value]) => name === 't' && value !== 'skateboarding')
+    .map(([, value]) => value)
+    .filter(Boolean) as string[];
+
+  return {
+    id: event.id,
+    pubkey: event.pubkey,
+    identifier: d,
+    title,
+    description: event.content,
+    start: parseInt(start),
+    end: end ? parseInt(end) : undefined,
+    geohash,
+    location,
+    image,
+    types,
+    createdAt: event.created_at,
+    event,
+  };
+}
+
+// Main spot categories (mutually exclusive - user picks ONE)
+export const SPOT_CATEGORIES = {
+  street: { label: 'Street', emoji: '🛣️', description: 'Random found spots, urban terrain' },
+  transition: { label: 'Transition', emoji: '🌊', description: 'Curved/ramped surfaces' },
+  park: { label: 'Park', emoji: '🏟️', description: 'Built skateparks' },
+  plaza: { label: 'Plaza', emoji: '📍', description: 'Urban plazas (like MACBA, Love Park)' },
+} as const;
+
+// Spot features organized by category
+export const SPOT_FEATURES = {
+  // Street features
+  wallrides: { label: 'Wallrides', emoji: '🧱', category: 'street' },
+  stairs: { label: 'Stairs & Handrails', emoji: '🪜', category: 'street' },
+  rails: { label: 'Rails', emoji: '🚧', category: 'street' },
+  ledges: { label: 'Ledges & Curbs', emoji: '⬜', category: 'street' },
+  gaps: { label: 'Gaps', emoji: '🕳️', category: 'street' },
+  flatground: { label: 'Flatground', emoji: '⬛', category: 'street' },
+  'manual-pads': { label: 'Manual Pads', emoji: '⚖️', category: 'street' },
+  
+  // Transition features
+  'half-pipes': { label: 'Half Pipes', emoji: '🌊', category: 'transition' },
+  'quarter-pipes': { label: 'Quarter Pipes', emoji: '🌀', category: 'transition' },
+  'mini-ramps': { label: 'Mini Ramps', emoji: '🎢', category: 'transition' },
+  bowls: { label: 'Bowls', emoji: '🥣', category: 'transition' },
+  vert: { label: 'Vert Ramps', emoji: '🔝', category: 'transition' },
+  'mega-ramps': { label: 'Mega Ramps', emoji: '🚀', category: 'transition' },
+  
+  // Park-specific features (only in Park/Plaza)
+  hubbas: { label: 'Hubbas', emoji: '📐', category: 'park' },
+  'euro-gaps': { label: 'Euro Gaps', emoji: '🔀', category: 'park' },
+  banks: { label: 'Banks', emoji: '📈', category: 'park' },
+  'spine-ramps': { label: 'Spine Ramps', emoji: '🔃', category: 'park' },
+  'roll-ins': { label: 'Roll-ins', emoji: '⬇️', category: 'park' },
+  hips: { label: 'Hips', emoji: '↗️', category: 'park' },
+  volcano: { label: 'Volcano', emoji: '🌋', category: 'park' },
+  pyramids: { label: 'Pyramids / Funboxes', emoji: '🔺', category: 'park' },
+  'snake-runs': { label: 'Snake Runs', emoji: '🐍', category: 'park' },
+  'pump-track': { label: 'Pump Track Rollers', emoji: '🔄', category: 'park' },
+  'flat-bars': { label: 'Flat Bars', emoji: '➖', category: 'park' },
+} as const;
+
+// Get features available for a category
+export function getFeaturesForCategory(category: string): Array<{ key: string; label: string; emoji: string }> {
+  const allStreetFeatures = Object.entries(SPOT_FEATURES)
+    .filter(([, v]) => v.category === 'street')
+    .map(([key, v]) => ({ key, label: v.label, emoji: v.emoji }));
+  
+  const allTransitionFeatures = Object.entries(SPOT_FEATURES)
+    .filter(([, v]) => v.category === 'transition')
+    .map(([key, v]) => ({ key, label: v.label, emoji: v.emoji }));
+  
+  const allParkFeatures = Object.entries(SPOT_FEATURES)
+    .filter(([, v]) => v.category === 'park')
+    .map(([key, v]) => ({ key, label: v.label, emoji: v.emoji }));
+
+  switch (category) {
+    case 'street':
+      return allStreetFeatures;
+    case 'transition':
+      return allTransitionFeatures;
+    case 'park':
+    case 'plaza':
+      // Parks and Plazas get ALL features
+      return [...allStreetFeatures, ...allTransitionFeatures, ...allParkFeatures];
+    default:
+      return [];
+  }
+}
+
+// Get all features as flat list (for filters)
+export function getAllFeatures(): Array<{ key: string; label: string; emoji: string; category: string }> {
+  return Object.entries(SPOT_FEATURES).map(([key, v]) => ({
+    key,
+    label: v.label,
+    emoji: v.emoji,
+    category: v.category,
+  }));
+}
+
+// Legacy SPOT_TYPE_LABELS for backwards compatibility (combines categories + features)
+export const SPOT_TYPE_LABELS: Record<string, string> = {
+  // Categories
+  street: 'Street',
+  transition: 'Transition',
+  park: 'Park',
+  plaza: 'Plaza',
+  // Features (for display/filtering)
+  wallrides: 'Wallrides',
+  stairs: 'Stairs & Handrails',
+  rails: 'Rails',
+  ledges: 'Ledges & Curbs',
+  gaps: 'Gaps',
+  flatground: 'Flatground',
+  'manual-pads': 'Manual Pads',
+  'half-pipes': 'Half Pipes',
+  'quarter-pipes': 'Quarter Pipes',
+  'mini-ramps': 'Mini Ramps',
+  bowls: 'Bowls',
+  vert: 'Vert Ramps',
+  'mega-ramps': 'Mega Ramps',
+  hubbas: 'Hubbas',
+  'euro-gaps': 'Euro Gaps',
+  banks: 'Banks',
+  'spine-ramps': 'Spine Ramps',
+  'roll-ins': 'Roll-ins',
+  hips: 'Hips',
+  volcano: 'Volcano',
+  pyramids: 'Pyramids / Funboxes',
+  'snake-runs': 'Snake Runs',
+  'pump-track': 'Pump Track Rollers',
+  'flat-bars': 'Flat Bars',
+  // Legacy (deprecated but kept for backwards compat)
+  diy: 'DIY',
+  rail: 'Rail',
+  ledge: 'Ledge',
+  gap: 'Gap',
+  bowl: 'Bowl',
+  stall: 'Stall',
+  slappy: 'Slappy',
+};
+
+export const ACCESS_TYPE_INFO = {
+  public: { emoji: '🌍', label: 'Public - Open to Everyone', color: '#ff0040' },
+  private: { emoji: '🔒', label: 'Private Property - Permission Needed', color: '#ff6600' },
+  locals: { emoji: '👥', label: 'Ask Locals First', color: '#ccff00' },
+};
+
+export const EVENT_TYPE_LABELS: Record<string, string> = {
+  contest: 'Contest',
+  demo: 'Demo',
+  session: 'Session',
+  workshop: 'Workshop',
+  premiere: 'Premiere',
+  tradeshow: 'Trade Show',
+  gameskate: 'Game of Skate',
+  // Music & Culture
+  concert: '🎸 Concert',
+  jam: '🎵 Jam',
+  festival: '🎪 Festival',
+  popup: '🎯 Pop-Up',
+};
+
+export const COACH_SKILL_LABELS: Record<string, string> = {
+  basics: 'Basics',
+  ollies: 'Ollies',
+  kickflips: 'Kickflips',
+  grinds: 'Grinds & Slides',
+  manuals: 'Manuals',
+  inverts: 'Inverts',
+  vert: 'Vert/Ramp',
+  bowl: 'Bowl',
+  street: 'Street',
+  freestyle: 'Freestyle',
+  safety: 'Safety',
+  diy: 'DIY Skate Modules',
+};
+
+export const COACH_SKILL_DESCRIPTIONS: Record<string, string> = {
+  basics: 'Pushing, stance, balance, turning',
+  ollies: 'Ollie and variations (nollie, fakie)',
+  kickflips: 'Kickflip, heelflip, and variations',
+  grinds: '50-50, 5-0, boardslide, and more',
+  manuals: 'Manual, nose manual, combos',
+  inverts: 'Invert, handplant, eggplant, andrecht',
+  vert: 'Half-pipe, quarter-pipe, drop-ins',
+  bowl: 'Bowl carving, pumping, lines',
+  street: 'Street obstacles and creativity',
+  freestyle: 'Flatground tricks and flow',
+  safety: 'How to fall, protective gear, injury prevention',
+  diy: 'Building ramps, rails, ledges, and other skate obstacles',
+};
+
+// Filming service types
+export const FILMING_SERVICE_LABELS: Record<string, string> = {
+  miniclips: 'Mini Clips',
+  longparts: 'Long Video Parts',
+  koth: 'King of the Road Style',
+  documentaries: 'Documentaries',
+  contests: 'Filming for Contests',
+  raw: 'Raw Footage',
+  photos: 'Action Photography',
+};
+
+export const FILMING_SERVICE_DESCRIPTIONS: Record<string, string> = {
+  miniclips: '15-60 sec clips for social media',
+  longparts: '3-10 min full video parts with music',
+  koth: 'Adventure/challenge style skate videos',
+  documentaries: 'Skate culture and story-driven content',
+  contests: 'Professional contest and competition coverage',
+  raw: 'Unedited multi-angle footage',
+  photos: 'Sequence shots and peak moments',
+};
+
+// Filming skills/equipment
+export const FILMING_SKILL_LABELS: Record<string, string> = {
+  vx1000: 'VX1000',
+  dslr: 'DSLR/Mirrorless',
+  phone: 'Phone Filming',
+  drone: 'Drone/Aerial',
+  fisheye: 'Fisheye Lens',
+  longlens: 'Long Lens',
+  editing: 'Video Editing',
+  color: 'Color Grading',
+};
+
+export const FILMING_SKILL_DESCRIPTIONS: Record<string, string> = {
+  vx1000: 'Classic VX1000 skateboarding aesthetic',
+  dslr: 'High quality DSLR or mirrorless camera',
+  phone: 'Mobile filming with modern smartphones',
+  drone: 'Aerial and drone footage',
+  fisheye: 'Wide-angle fisheye lens shots',
+  longlens: 'Long lens for detailed shots',
+  editing: 'Professional video editing and post-production',
+  color: 'Color correction and grading',
+};
+
+export interface SkateCoach {
+  id: string;
+  pubkey: string;
+  identifier: string;
+  title: string;
+  bio: string;
+  geohash?: string;
+  location?: string;
+  image?: string;
+  skills: string[];
+  experience?: string;
+  rate?: string;
+  phone?: string;
+  email?: string;
+  website?: string;
+  instagram?: string;
+  spotRefs?: string[]; // Array of spot references: "30818:pubkey:d-tag"
+  createdAt: number;
+  event: NostrEvent;
+}
+
+export interface SkateFilmer {
+  id: string;
+  pubkey: string;
+  identifier: string;
+  title: string;
+  bio: string;
+  geohash?: string;
+  location?: string;
+  image?: string;
+  skills: string[];   // Combined services and filming skills
+  experience?: string; // Years of experience
+  rate?: string;
+  phone?: string;
+  email?: string;
+  website?: string;
+  social?: string; // Social media handle or link
+  spotRefs?: string[]; // Array of spot references: "30818:pubkey:d-tag"
+  createdAt: number;
+  event: NostrEvent;
+}
+
+export interface SkateTour {
+  id: string;
+  pubkey: string;
+  identifier: string;
+  title: string;
+  description: string;
+  category: TourCategory; // local, national, international, destruction
+  geohash?: string; // City-level location (low precision for privacy)
+  location?: string; // City/region name
+  meetingPoint?: string; // Public meeting spot name
+  meetingPointCoords?: { lat: number; lon: number };
+  image?: string;
+  duration?: number; // Hours for local, days for national/international
+  durationUnit?: 'hours' | 'days' | 'weeks';
+  skillLevel?: 'beginner' | 'intermediate' | 'advanced' | 'all';
+  spotTypes: string[]; // street, park, diy, transition
+  maxGroupSize?: number;
+  price?: number; // Sats (host decides)
+  availability?: string; // e.g., "weekends", "by appointment" (for local/national)
+  languages?: string[];
+  shopRef?: string; // Reference to partner shop (naddr)
+  shopName?: string; // Partner shop name
+  shopDiscount?: number; // Percentage discount at partner shop
+  // National/International/Destruction specific
+  cities?: string[]; // List of cities for multi-city tours
+  countries?: string[]; // List of countries for international/destruction tours
+  transportInfo?: string; // How participants will travel
+  accommodationInfo?: string; // Accommodation recommendations
+  // Organizer contact (for destruction tours)
+  organizerContact?: string; // Contact details for the organizer
+  // Destruction Tour specific
+  startDate?: number; // Unix timestamp - when competition starts (challenges revealed)
+  endDate?: number; // Unix timestamp - when competition ends
+  entryFee?: number; // Sats per team
+  prizePool?: number; // Total prize in sats
+  prizeDistribution?: { place: number; percentage: number }[]; // e.g., [{place: 1, percentage: 50}]
+  maxTeams?: number;
+  minTeamSize?: number;
+  maxTeamSize?: number;
+  challenges?: DestructionChallenge[];
+  acceptedClipSources?: ('blossom' | 'youtube' | 'instagram' | 'any')[]; // What clip sources organizer accepts
+  // Film release options (for destruction tours)
+  filmRelease?: {
+    atShops: boolean; // Teams' films can premiere at local skate shops
+    online: boolean; // Films also released online
+    releaseDate?: number; // Unix timestamp for film release (after competition ends)
+  };
+  // Sponsors (for future use)
+  sponsors?: TourSponsor[];
+  createdAt: number;
+  event: NostrEvent;
+}
+
+// Tour sponsor interface
+export interface TourSponsor {
+  name: string;
+  logo?: string;
+  url?: string;
+  tier?: 'title' | 'gold' | 'silver' | 'challenge' | 'partner';
+  challengeId?: string; // If sponsoring a specific challenge
+}
+
+export function parseSkateCoach(event: NostrEvent): SkateCoach | null {
+  if (event.kind !== SKATE_COACH_KIND) return null;
+
+  const d = event.tags.find(([name]) => name === 'd')?.[1];
+  const title = event.tags.find(([name]) => name === 'title')?.[1];
+
+  if (!d || !title) return null;
+
+  const location = event.tags.find(([name]) => name === 'location')?.[1];
+  const geohash = event.tags.find(([name]) => name === 'g')?.[1];
+  const image = event.tags.find(([name]) => name === 'image')?.[1];
+  const skills = event.tags.filter(([name, value]) => name === 't' && value !== 'skatecoach').map(([, value]) => value);
+  const experience = event.tags.find(([name]) => name === 'experience')?.[1];
+  const rate = event.tags.find(([name]) => name === 'rate')?.[1];
+  const phone = event.tags.find(([name]) => name === 'phone')?.[1];
+  const email = event.tags.find(([name]) => name === 'email')?.[1];
+  const website = event.tags.find(([name]) => name === 'website')?.[1];
+  const instagram = event.tags.find(([name]) => name === 'instagram')?.[1];
+  // Extract spot references (a tags pointing to kind 30818 spots)
+  const spotRefs = event.tags
+    .filter(([name, value]) => name === 'a' && value?.startsWith('30818:'))
+    .map(([, value]) => value);
+
+  return {
+    id: event.id,
+    pubkey: event.pubkey,
+    identifier: d,
+    title,
+    bio: event.content,
+    location,
+    geohash,
+    image,
+    skills,
+    experience,
+    rate,
+    phone,
+    email,
+    website,
+    instagram,
+    spotRefs: spotRefs.length > 0 ? spotRefs : undefined,
+    createdAt: event.created_at,
+    event,
+  };
+}
+
+export function parseSkateFilmer(event: NostrEvent): SkateFilmer | null {
+  if (event.kind !== SKATE_FILMER_KIND) return null;
+
+  const d = event.tags.find(([name]) => name === 'd')?.[1];
+  const title = event.tags.find(([name]) => name === 'title')?.[1];
+
+  if (!d || !title) return null;
+
+  const location = event.tags.find(([name]) => name === 'location')?.[1];
+  const geohash = event.tags.find(([name]) => name === 'g')?.[1];
+  const image = event.tags.find(([name]) => name === 'image')?.[1];
+  const skills = event.tags.filter(([name, value]) => name === 't' && value !== 'skatefilmer').map(([, value]) => value);
+  const experience = event.tags.find(([name]) => name === 'experience')?.[1];
+  const rate = event.tags.find(([name]) => name === 'rate')?.[1];
+  const phone = event.tags.find(([name]) => name === 'phone')?.[1];
+  const email = event.tags.find(([name]) => name === 'email')?.[1];
+  const website = event.tags.find(([name]) => name === 'website')?.[1];
+  const social = event.tags.find(([name]) => name === 'social')?.[1];
+  // Extract spot references (a tags pointing to kind 30818 spots)
+  const spotRefs = event.tags
+    .filter(([name, value]) => name === 'a' && value?.startsWith('30818:'))
+    .map(([, value]) => value);
+
+  return {
+    id: event.id,
+    pubkey: event.pubkey,
+    identifier: d,
+    title,
+    bio: event.content,
+    location,
+    geohash,
+    image,
+    skills,
+    experience,
+    rate,
+    phone,
+    email,
+    website,
+    social,
+    spotRefs: spotRefs.length > 0 ? spotRefs : undefined,
+    createdAt: event.created_at,
+    event,
+  };
+}
+
+export function parseSkateTour(event: NostrEvent): SkateTour | null {
+  if (event.kind !== SKATE_TOUR_KIND) return null;
+
+  // Must have 'skate-tour' tag
+  const hasTourTag = event.tags.some(([name, value]) => name === 't' && value === 'skate-tour');
+  if (!hasTourTag) return null;
+
+  const d = event.tags.find(([name]) => name === 'd')?.[1];
+  const title = event.tags.find(([name]) => name === 'title')?.[1];
+
+  if (!d || !title) return null;
+
+  // Tour category - default to 'local' for backwards compatibility
+  const categoryTag = event.tags.find(([name]) => name === 'tour-category')?.[1];
+  const category = (categoryTag as TourCategory) || 'local';
+
+  const location = event.tags.find(([name]) => name === 'location')?.[1];
+  const geohash = event.tags.find(([name]) => name === 'g')?.[1];
+  const meetingPoint = event.tags.find(([name]) => name === 'meeting-point')?.[1];
+  const meetingCoordsTag = event.tags.find(([name]) => name === 'meeting-point-coords');
+  const meetingPointCoords = meetingCoordsTag 
+    ? { lat: parseFloat(meetingCoordsTag[1]), lon: parseFloat(meetingCoordsTag[2]) }
+    : undefined;
+  const image = event.tags.find(([name]) => name === 'image')?.[1];
+  
+  const durationTag = event.tags.find(([name]) => name === 'duration');
+  const duration = durationTag ? parseFloat(durationTag[1]) : undefined;
+  const durationUnit = durationTag?.[2] as SkateTour['durationUnit'] || 'hours';
+  
+  const skillLevel = event.tags.find(([name]) => name === 'skill-level')?.[1] as SkateTour['skillLevel'];
+  
+  // Filter out category tags when getting spot types
+  const categoryTags = ['skate-tour', 'local-tour', 'national-tour', 'international-tour', 'destruction-tour'];
+  const spotTypes = event.tags
+    .filter(([name, value]) => name === 't' && !categoryTags.includes(value))
+    .map(([, value]) => value);
+  
+  const maxGroupTag = event.tags.find(([name]) => name === 'max-group')?.[1];
+  const maxGroupSize = maxGroupTag ? parseInt(maxGroupTag) : undefined;
+  
+  const priceTag = event.tags.find(([name]) => name === 'price')?.[1];
+  const price = priceTag ? parseInt(priceTag) : undefined;
+  
+  const availability = event.tags.find(([name]) => name === 'available')?.[1];
+  
+  const languagesTag = event.tags.find(([name]) => name === 'languages');
+  const languages = languagesTag ? languagesTag.slice(1) : undefined;
+  
+  const shopRef = event.tags.find(([name]) => name === 'shop')?.[1];
+  const shopName = event.tags.find(([name]) => name === 'shop-name')?.[1];
+  const shopDiscountTag = event.tags.find(([name]) => name === 'shop-discount')?.[1];
+  const shopDiscount = shopDiscountTag ? parseInt(shopDiscountTag) : undefined;
+
+  // National/International fields
+  const citiesTag = event.tags.find(([name]) => name === 'cities');
+  const cities = citiesTag ? citiesTag.slice(1) : undefined;
+  
+  const countriesTag = event.tags.find(([name]) => name === 'countries');
+  const countries = countriesTag ? countriesTag.slice(1) : undefined;
+  
+  const transportInfo = event.tags.find(([name]) => name === 'transport')?.[1];
+  const accommodationInfo = event.tags.find(([name]) => name === 'accommodation')?.[1];
+  const organizerContact = event.tags.find(([name]) => name === 'organizer-contact')?.[1];
+
+  // Destruction Tour fields
+  const startDateTag = event.tags.find(([name]) => name === 'start-date')?.[1];
+  const startDate = startDateTag ? parseInt(startDateTag) : undefined;
+  
+  const endDateTag = event.tags.find(([name]) => name === 'end-date')?.[1];
+  const endDate = endDateTag ? parseInt(endDateTag) : undefined;
+  
+  const entryFeeTag = event.tags.find(([name]) => name === 'entry-fee')?.[1];
+  const entryFee = entryFeeTag ? parseInt(entryFeeTag) : undefined;
+  
+  const prizePoolTag = event.tags.find(([name]) => name === 'prize-pool')?.[1];
+  const prizePool = prizePoolTag ? parseInt(prizePoolTag) : undefined;
+  
+  // Parse prize distribution: ["prize-dist", "1", "50", "2", "30", "3", "20"]
+  const prizeDistTag = event.tags.find(([name]) => name === 'prize-dist');
+  let prizeDistribution: { place: number; percentage: number }[] | undefined;
+  if (prizeDistTag && prizeDistTag.length > 1) {
+    prizeDistribution = [];
+    for (let i = 1; i < prizeDistTag.length; i += 2) {
+      if (prizeDistTag[i] && prizeDistTag[i + 1]) {
+        prizeDistribution.push({
+          place: parseInt(prizeDistTag[i]),
+          percentage: parseInt(prizeDistTag[i + 1]),
+        });
+      }
+    }
+  }
+  
+  const maxTeamsTag = event.tags.find(([name]) => name === 'max-teams')?.[1];
+  const maxTeams = maxTeamsTag ? parseInt(maxTeamsTag) : undefined;
+  
+  const minTeamSizeTag = event.tags.find(([name]) => name === 'min-team-size')?.[1];
+  const minTeamSize = minTeamSizeTag ? parseInt(minTeamSizeTag) : undefined;
+  
+  const maxTeamSizeTag = event.tags.find(([name]) => name === 'max-team-size')?.[1];
+  const maxTeamSize = maxTeamSizeTag ? parseInt(maxTeamSizeTag) : undefined;
+  
+  // Parse challenges from tags - format: ["challenge", "id", "title", "description", "points", "revealDate"]
+  // All challenges are secret until the tour start date by default
+  let challenges: DestructionChallenge[] | undefined;
+  const challengesTags = event.tags.filter(([name]) => name === 'challenge');
+  if (challengesTags.length > 0) {
+    challenges = challengesTags.map(tag => ({
+      id: tag[1] || '',
+      title: tag[2] || '',
+      description: tag[3] || undefined,
+      points: parseInt(tag[4] || '0'),
+      isSecret: true, // All challenges are secret until start date
+      revealDate: tag[5] ? parseInt(tag[5]) : startDate, // Defaults to tour start date
+    }));
+  }
+  
+  // Parse accepted clip sources
+  const clipSourcesTag = event.tags.find(([name]) => name === 'clip-sources');
+  const acceptedClipSources = clipSourcesTag 
+    ? clipSourcesTag.slice(1) as ('blossom' | 'youtube' | 'instagram' | 'any')[]
+    : undefined;
+
+  // Parse film release options - format: ["film-release", "shops", "online"]
+  const filmReleaseTag = event.tags.find(([name]) => name === 'film-release');
+  const filmReleaseDateTag = event.tags.find(([name]) => name === 'film-release-date')?.[1];
+  let filmRelease: SkateTour['filmRelease'];
+  if (filmReleaseTag) {
+    const options = filmReleaseTag.slice(1);
+    filmRelease = {
+      atShops: options.includes('shops'),
+      online: options.includes('online'),
+      releaseDate: filmReleaseDateTag ? parseInt(filmReleaseDateTag) : undefined,
+    };
+  }
+
+  // Parse sponsors - format: ["sponsor", "tier", "name", "logo-url", "website-url", "challengeId?"]
+  const sponsorTags = event.tags.filter(([name]) => name === 'sponsor');
+  let sponsors: TourSponsor[] | undefined;
+  if (sponsorTags.length > 0) {
+    sponsors = sponsorTags.map(tag => ({
+      tier: tag[1] as TourSponsor['tier'],
+      name: tag[2] || '',
+      logo: tag[3] || undefined,
+      url: tag[4] || undefined,
+      challengeId: tag[5] || undefined,
+    }));
+  }
+
+  return {
+    id: event.id,
+    pubkey: event.pubkey,
+    identifier: d,
+    title,
+    description: event.content,
+    category,
+    location,
+    geohash,
+    meetingPoint,
+    meetingPointCoords,
+    image,
+    duration,
+    durationUnit,
+    skillLevel,
+    spotTypes,
+    maxGroupSize,
+    price,
+    availability,
+    languages,
+    shopRef,
+    shopName,
+    shopDiscount,
+    cities,
+    countries,
+    transportInfo,
+    accommodationInfo,
+    organizerContact,
+    startDate,
+    endDate,
+    entryFee,
+    prizePool,
+    prizeDistribution,
+    maxTeams,
+    minTeamSize,
+    maxTeamSize,
+    challenges,
+    acceptedClipSources,
+    filmRelease,
+    sponsors,
+    createdAt: event.created_at,
+    event,
+  };
+}
+
+// Tour skill levels
+export const TOUR_SKILL_LEVELS = {
+  beginner: { label: 'Beginner', emoji: '🌱', description: 'New to skating or basic tricks' },
+  intermediate: { label: 'Intermediate', emoji: '🔥', description: 'Comfortable with most terrain' },
+  advanced: { label: 'Advanced', emoji: '💀', description: 'Experienced skater, gnarly spots' },
+  all: { label: 'All Levels', emoji: '🛹', description: 'Suitable for everyone' },
+} as const;
+
+// Tour spot types (what kind of spots the tour covers)
+export const TOUR_SPOT_TYPES = {
+  street: { label: 'Street', emoji: '🛣️' },
+  park: { label: 'Park', emoji: '🏟️' },
+  diy: { label: 'DIY', emoji: '🔨' },
+  transition: { label: 'Transition', emoji: '🌊' },
+  hidden: { label: 'Hidden Gems', emoji: '💎' },
+} as const;
+
+// Tour categories
+export const TOUR_CATEGORIES = {
+  local: { 
+    label: 'Local Tour', 
+    emoji: '🏠', 
+    color: '#06b6d4', // Cyan
+    description: 'Show hidden spots in your city',
+    durationLabel: '2-8 hours',
+  },
+  national: { 
+    label: 'National Tour', 
+    emoji: '🚐', 
+    color: '#f97316', // Orange
+    description: 'Multi-city road trips across the country',
+    durationLabel: '2-14 days',
+  },
+  international: { 
+    label: 'International Tour', 
+    emoji: '✈️', 
+    color: '#a855f7', // Purple
+    description: 'Cross-border adventures across multiple countries',
+    durationLabel: '1-8 weeks',
+  },
+  destruction: { 
+    label: 'World Destruction', 
+    emoji: '💀', 
+    color: '#ef4444', // Red
+    description: 'KOTR-style global team competition',
+    durationLabel: '1-12 months',
+  },
+} as const;
+
+export type TourCategory = keyof typeof TOUR_CATEGORIES;
+
+// Destruction Tour Challenge interface
+export interface DestructionChallenge {
+  id: string;
+  title: string;
+  description?: string;
+  points: number;
+  isSecret?: boolean; // Hidden until competition starts (all challenges secret by default)
+  revealDate?: number; // Unix timestamp when challenge becomes visible (defaults to tour start date)
+}
+
+// Destruction Tour Team interface
+export interface DestructionTeam {
+  id: string;
+  name: string;
+  members: string[]; // pubkeys of team members
+  captainPubkey: string;
+  points: number;
+  completedChallenges: string[]; // Challenge IDs
+}
+
+// Destruction Tour Submission (clip/proof)
+export interface DestructionSubmission {
+  id: string;
+  teamId: string;
+  challengeId: string;
+  submitterPubkey: string;
+  videoUrl?: string; // External link (YouTube, Instagram, etc.)
+  blossomUrl?: string; // Blossom-hosted video
+  description?: string;
+  submittedAt: number;
+  status: 'pending' | 'approved' | 'rejected';
+  pointsAwarded?: number;
+}
+
+// Gear Categories
+export const GEAR_CATEGORIES = {
+  deck: 'Deck',
+  trucks: 'Trucks',
+  wheels: 'Wheels',
+  bearings: 'Bearings',
+  shoes: 'Skate Shoes',
+  clothing: 'Clothing',
+  protective: 'Protective Gear',
+  stickers: 'Stickers',
+  wax: 'Wax',
+  tools: 'Tools',
+  griptape: 'Griptape',
+  rubbrick: 'Rub Brick',
+} as const;
+
+// Gear Conditions
+export const GEAR_CONDITIONS = {
+  new: { label: 'New', emoji: '🆕', description: 'Never used, still in packaging' },
+  like_new: { label: 'Like New', emoji: '👍', description: 'Barely used, excellent condition' },
+  good: { label: 'Good', emoji: '✅', description: 'Normal wear, functions perfectly' },
+  well_used: { label: 'Well Used', emoji: '⚠️', description: 'Shows wear but still works' },
+} as const;
+
+// Price Types
+export const PRICE_TYPES = {
+  fixed: { label: 'Fixed Price', description: 'Set price in USD or sats' },
+  free: { label: 'Free', description: 'Giving away' },
+  trade: { label: 'Trade', description: 'Looking to swap' },
+  offer: { label: 'Make Offer', description: 'Price negotiable' },
+} as const;
+
+// Listing Types
+export const LISTING_TYPES = {
+  selling: { label: 'Selling', emoji: '💰', description: 'Listing gear for sale' },
+  wtb: { label: 'Want to Buy', emoji: '🔍', description: 'Looking for specific gear' },
+} as const;
+
+// Size Options by Category
+export const SIZE_OPTIONS: Record<string, string[]> = {
+  deck: ['7.5"', '7.75"', '8.0"', '8.125"', '8.25"', '8.38"', '8.5"', '8.75"', '9.0"+'],
+  trucks: ['129', '139', '144', '149', '159'],
+  wheels: ['50mm', '52mm', '54mm', '56mm', '58mm', '60mm'],
+  shoes: ['US 6', 'US 6.5', 'US 7', 'US 7.5', 'US 8', 'US 8.5', 'US 9', 'US 9.5', 'US 10', 'US 10.5', 'US 11', 'US 11.5', 'US 12', 'US 13', 'US 14'],
+  clothing: ['XS', 'S', 'M', 'L', 'XL', 'XXL'],
+};
+
+// Truck Heights
+export const TRUCK_HEIGHTS = ['Low', 'Mid', 'High', 'Inverted'];
+
+// Wheel Hardness
+export const WHEEL_HARDNESS = ['78a', '87a', '92a', '97a', '99a', '101a'];
+
+// Category-specific required fields for validation
+export const CATEGORY_REQUIRED_FIELDS: Record<string, { size?: boolean; condition?: boolean }> = {
+  deck: { size: true, condition: true },
+  trucks: { size: true, condition: true },
+  wheels: { size: true, condition: true },
+  bearings: { condition: true },
+  shoes: { size: true, condition: true },
+  clothing: { size: true, condition: true },
+  protective: { size: false, condition: true },
+  stickers: { size: false, condition: false },
+  wax: { size: false, condition: false },
+  tools: { size: false, condition: true },
+  griptape: { size: false, condition: true },
+  rubbrick: { size: false, condition: true },
+};
+
+// Report reasons for NIP-56
+export const LISTING_REPORT_REASONS = {
+  category_mismatch: { label: 'Wrong Category', description: 'Item is listed in the wrong category' },
+  misleading_description: { label: 'Misleading Description', description: 'Description does not match the actual item' },
+  fake_photos: { label: 'Fake/Stolen Photos', description: 'Photos are stock images or stolen from elsewhere' },
+  scam: { label: 'Suspected Scam', description: 'This listing appears to be a scam' },
+  spam: { label: 'Spam/Duplicate', description: 'Spam or duplicate listing' },
+  inappropriate: { label: 'Inappropriate Content', description: 'Contains inappropriate or offensive content' },
+  counterfeit: { label: 'Counterfeit Goods', description: 'Item appears to be fake or counterfeit' },
+} as const;
+
+// Expiration Options (in days)
+export const EXPIRATION_OPTIONS = [
+  { value: 7, label: '7 days' },
+  { value: 14, label: '14 days' },
+  { value: 30, label: '30 days' },
+];
+
+// Currency Options (ISO 4217 codes + Bitcoin)
+export const CURRENCY_OPTIONS = [
+  // Crypto
+  { code: 'sats', label: 'sats', symbol: '₿', region: 'Bitcoin' },
+  { code: 'BTC', label: 'BTC', symbol: '₿', region: 'Bitcoin' },
+  
+  // Major Fiat - Americas
+  { code: 'USD', label: 'USD', symbol: '$', region: 'United States' },
+  { code: 'CAD', label: 'CAD', symbol: 'C$', region: 'Canada' },
+  { code: 'MXN', label: 'MXN', symbol: '$', region: 'Mexico' },
+  { code: 'BRL', label: 'BRL', symbol: 'R$', region: 'Brazil' },
+  { code: 'ARS', label: 'ARS', symbol: '$', region: 'Argentina' },
+  { code: 'CLP', label: 'CLP', symbol: '$', region: 'Chile' },
+  { code: 'COP', label: 'COP', symbol: '$', region: 'Colombia' },
+  { code: 'PEN', label: 'PEN', symbol: 'S/', region: 'Peru' },
+  
+  // Major Fiat - Europe
+  { code: 'EUR', label: 'EUR', symbol: '€', region: 'Eurozone' },
+  { code: 'GBP', label: 'GBP', symbol: '£', region: 'United Kingdom' },
+  { code: 'CHF', label: 'CHF', symbol: 'Fr', region: 'Switzerland' },
+  { code: 'SEK', label: 'SEK', symbol: 'kr', region: 'Sweden' },
+  { code: 'NOK', label: 'NOK', symbol: 'kr', region: 'Norway' },
+  { code: 'DKK', label: 'DKK', symbol: 'kr', region: 'Denmark' },
+  { code: 'PLN', label: 'PLN', symbol: 'zł', region: 'Poland' },
+  { code: 'CZK', label: 'CZK', symbol: 'Kč', region: 'Czech Republic' },
+  { code: 'HUF', label: 'HUF', symbol: 'Ft', region: 'Hungary' },
+  { code: 'RON', label: 'RON', symbol: 'lei', region: 'Romania' },
+  
+  // Major Fiat - Asia Pacific
+  { code: 'JPY', label: 'JPY', symbol: '¥', region: 'Japan' },
+  { code: 'CNY', label: 'CNY', symbol: '¥', region: 'China' },
+  { code: 'KRW', label: 'KRW', symbol: '₩', region: 'South Korea' },
+  { code: 'AUD', label: 'AUD', symbol: 'A$', region: 'Australia' },
+  { code: 'NZD', label: 'NZD', symbol: 'NZ$', region: 'New Zealand' },
+  { code: 'SGD', label: 'SGD', symbol: 'S$', region: 'Singapore' },
+  { code: 'HKD', label: 'HKD', symbol: 'HK$', region: 'Hong Kong' },
+  { code: 'TWD', label: 'TWD', symbol: 'NT$', region: 'Taiwan' },
+  { code: 'THB', label: 'THB', symbol: '฿', region: 'Thailand' },
+  { code: 'PHP', label: 'PHP', symbol: '₱', region: 'Philippines' },
+  { code: 'IDR', label: 'IDR', symbol: 'Rp', region: 'Indonesia' },
+  { code: 'MYR', label: 'MYR', symbol: 'RM', region: 'Malaysia' },
+  { code: 'INR', label: 'INR', symbol: '₹', region: 'India' },
+  
+  // Middle East & Africa
+  { code: 'AED', label: 'AED', symbol: 'د.إ', region: 'UAE' },
+  { code: 'SAR', label: 'SAR', symbol: '﷼', region: 'Saudi Arabia' },
+  { code: 'ILS', label: 'ILS', symbol: '₪', region: 'Israel' },
+  { code: 'TRY', label: 'TRY', symbol: '₺', region: 'Turkey' },
+  { code: 'ZAR', label: 'ZAR', symbol: 'R', region: 'South Africa' },
+  { code: 'NGN', label: 'NGN', symbol: '₦', region: 'Nigeria' },
+  { code: 'EGP', label: 'EGP', symbol: 'E£', region: 'Egypt' },
+];
+
+// Helper to get currency symbol from code
+export function getCurrencySymbol(code: string): string {
+  const currency = CURRENCY_OPTIONS.find(c => c.code === code);
+  return currency?.symbol || code;
+}
+
+// Helper to format price with correct currency symbol
+export function formatPrice(price: { amount: string; currency: string } | undefined, priceType?: string): string {
+  if (!price) {
+    if (priceType === 'free') return 'FREE';
+    if (priceType === 'trade') return 'Trade';
+    if (priceType === 'offer') return 'Make Offer';
+    return 'Offer';
+  }
+  
+  const symbol = getCurrencySymbol(price.currency);
+  
+  // For Bitcoin/sats, show symbol before amount
+  if (price.currency === 'sats' || price.currency === 'BTC') {
+    return `${symbol}${price.amount}`;
+  }
+  
+  // For most currencies, show symbol before amount
+  return `${symbol}${price.amount} ${price.currency}`;
+}
+
+// NIP-99 Marketplace (Gear Swap)
+export interface MarketplaceItem {
+  id: string;
+  pubkey: string;
+  identifier: string;
+  title: string;
+  description: string;
+  summary?: string;
+  price?: {
+    amount: string;
+    currency: string;
+    frequency?: string;
+  };
+  priceType?: 'fixed' | 'free' | 'trade' | 'offer';
+  condition?: 'new' | 'like_new' | 'good' | 'well_used';
+  listingType?: 'selling' | 'wtb';
+  size?: string;
+  expiration?: number; // Unix timestamp
+  images: string[];
+  location?: string;
+  geohash?: string;
+  category: string[];
+  status?: string; // 'active' | 'sold' | 'pending'
+  spotReference?: string; // 'a' tag pointing to spot event
+  availability?: string; // When seller is at the spot
+  createdAt: number;
+  publishedAt?: number;
+  event: NostrEvent;
+}
+
+// NIP-51 Spot Collections (Bookmark sets)
+export interface SpotCollection {
+  id: string;
+  pubkey: string;
+  identifier: string;
+  title: string;
+  description: string;
+  image?: string;
+  spotRefs: string[]; // Array of "a" tag references: "30818:pubkey:d-tag"
+  createdAt: number;
+  event: NostrEvent;
+}
+
+export function parseSpotCollection(event: NostrEvent): SpotCollection | null {
+  if (event.kind !== SPOT_COLLECTION_KIND) return null;
+
+  const d = event.tags.find(([name]) => name === 'd')?.[1];
+  const title = event.tags.find(([name]) => name === 'title')?.[1];
+
+  // Must have skatespots tag to be a skate spot collection
+  const hasSkatespotsTag = event.tags.some(
+    ([name, value]) => name === 't' && value === 'skatespots'
+  );
+  if (!d || !title || !hasSkatespotsTag) return null;
+
+  const description = event.tags.find(([name]) => name === 'description')?.[1] || event.content;
+  const image = event.tags.find(([name]) => name === 'image')?.[1];
+
+  // Get all "a" tags that reference spots (kind 30818)
+  const spotRefs = event.tags
+    .filter(([name, value]) => name === 'a' && value?.startsWith(`${SKATE_SPOT_KIND}:`))
+    .map(([, value]) => value);
+
+  return {
+    id: event.id,
+    pubkey: event.pubkey,
+    identifier: d,
+    title,
+    description,
+    image,
+    spotRefs,
+    createdAt: event.created_at,
+    event,
+  };
+}
+
+export function parseMarketplaceItem(event: NostrEvent): MarketplaceItem | null {
+  if (event.kind !== MARKETPLACE_ITEM_KIND) return null;
+
+  const d = event.tags.find(([name]) => name === 'd')?.[1];
+  const title = event.tags.find(([name]) => name === 'title')?.[1];
+
+  if (!d || !title) return null;
+
+  const summary = event.tags.find(([name]) => name === 'summary')?.[1];
+  const location = event.tags.find(([name]) => name === 'location')?.[1];
+  const geohash = event.tags.find(([name]) => name === 'g')?.[1];
+  const status = event.tags.find(([name]) => name === 'status')?.[1];
+  const availability = event.tags.find(([name]) => name === 'available')?.[1];
+  const spotReference = event.tags.find(([name]) => name === 'a')?.[1];
+  const publishedAtTag = event.tags.find(([name]) => name === 'published_at')?.[1];
+  
+  // Parse new fields
+  const priceType = event.tags.find(([name]) => name === 'price_type')?.[1] as MarketplaceItem['priceType'];
+  const condition = event.tags.find(([name]) => name === 'condition')?.[1] as MarketplaceItem['condition'];
+  const listingType = event.tags.find(([name]) => name === 'listing_type')?.[1] as MarketplaceItem['listingType'];
+  const size = event.tags.find(([name]) => name === 'size')?.[1];
+  const expirationTag = event.tags.find(([name]) => name === 'expiration')?.[1];
+  const expiration = expirationTag ? parseInt(expirationTag) : undefined;
+  
+  // Parse price tag: ["price", "40", "USD", "optional-frequency"]
+  const priceTag = event.tags.find(([name]) => name === 'price');
+  const price = priceTag ? {
+    amount: priceTag[1] || '0',
+    currency: priceTag[2] || 'USD',
+    frequency: priceTag[3],
+  } : undefined;
+
+  // Parse images (NIP-58 format)
+  const images = event.tags
+    .filter(([name]) => name === 'image')
+    .map(([, url]) => url);
+
+  // Parse categories/tags
+  const category = event.tags
+    .filter(([name]) => name === 't')
+    .map(([, value]) => value);
+
+  return {
+    id: event.id,
+    pubkey: event.pubkey,
+    identifier: d,
+    title,
+    description: event.content,
+    summary,
+    price,
+    priceType,
+    condition,
+    listingType,
+    size,
+    expiration,
+    images,
+    location,
+    geohash,
+    category,
+    status,
+    spotReference,
+    availability,
+    createdAt: event.created_at,
+    publishedAt: publishedAtTag ? parseInt(publishedAtTag) : undefined,
+    event,
+  };
+}
diff --git a/src/src/lib/utils.ts b/src/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/src/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/src/src/lib/wallet/qrCodeGenerator.ts b/src/src/lib/wallet/qrCodeGenerator.ts
new file mode 100644
index 0000000..404c099
--- /dev/null
+++ b/src/src/lib/wallet/qrCodeGenerator.ts
@@ -0,0 +1,25 @@
+import QRCode from 'qrcode';
+
+/**
+ * Generate a QR code data URL from text
+ * 
+ * @param text - Text to encode in QR code
+ * @returns Promise resolving to data URL
+ */
+export async function generateQRCode(text: string): Promise<string> {
+  try {
+    const dataUrl = await QRCode.toDataURL(text, {
+      width: 300,
+      margin: 2,
+      color: {
+        dark: '#000000',
+        light: '#FFFFFF',
+      },
+      errorCorrectionLevel: 'M',
+    });
+    return dataUrl;
+  } catch (err) {
+    console.error('[QR] Failed to generate QR code:', err);
+    throw new Error('Failed to generate QR code');
+  }
+}
diff --git a/src/src/lib/weather.ts b/src/src/lib/weather.ts
new file mode 100644
index 0000000..4ea0aed
--- /dev/null
+++ b/src/src/lib/weather.ts
@@ -0,0 +1,347 @@
+/**
+ * Weather API service using Open-Meteo (free, no API key required)
+ * https://open-meteo.com/
+ */
+
+export interface WeatherData {
+  temperature: number; // Celsius
+  temperatureFahrenheit: number; // Fahrenheit
+  feelsLike: number; // Celsius
+  feelsLikeFahrenheit: number; // Fahrenheit
+  weatherCode: number; // WMO Weather Code
+  weatherDescription: string;
+  weatherIcon: string; // Emoji
+  precipitation: number; // mm
+  precipitationProbability: number; // %
+  humidity: number; // %
+  windSpeed: number; // km/h
+  windDirection: number; // degrees
+  windDirectionLabel: string; // N, NE, E, etc.
+  cloudCover: number; // %
+  visibility: number; // meters
+  uvIndex: number;
+  isDay: boolean;
+  timestamp: number;
+}
+
+export interface AirQualityData {
+  aqi: number; // Air Quality Index (US EPA standard)
+  aqiLabel: string; // Good, Moderate, Unhealthy, etc.
+  aqiColor: string; // Color for UI
+  pm25: number; // PM2.5 concentration
+  pm10: number; // PM10 concentration
+  timestamp: number;
+}
+
+export interface WeatherForecast {
+  daily: {
+    date: string;
+    maxTemp: number;
+    minTemp: number;
+    weatherCode: number;
+    weatherIcon: string;
+    precipitationProbability: number;
+  }[];
+}
+
+export interface SkateabilityScore {
+  score: number; // 0-100
+  label: string; // Perfect, Good, Okay, Poor, Unrideable
+  color: string; // green, yellow, orange, red
+  reasons: string[];
+}
+
+// WMO Weather Codes to emoji and description
+const weatherCodes: Record<number, { icon: string; description: string }> = {
+  0: { icon: '☀️', description: 'Clear sky' },
+  1: { icon: '🌤️', description: 'Mainly clear' },
+  2: { icon: '⛅', description: 'Partly cloudy' },
+  3: { icon: '☁️', description: 'Overcast' },
+  45: { icon: '🌫️', description: 'Foggy' },
+  48: { icon: '🌫️', description: 'Depositing rime fog' },
+  51: { icon: '🌦️', description: 'Light drizzle' },
+  53: { icon: '🌦️', description: 'Moderate drizzle' },
+  55: { icon: '🌧️', description: 'Dense drizzle' },
+  56: { icon: '🌧️', description: 'Light freezing drizzle' },
+  57: { icon: '🌧️', description: 'Dense freezing drizzle' },
+  61: { icon: '🌧️', description: 'Slight rain' },
+  63: { icon: '🌧️', description: 'Moderate rain' },
+  65: { icon: '🌧️', description: 'Heavy rain' },
+  66: { icon: '🌧️', description: 'Light freezing rain' },
+  67: { icon: '🌧️', description: 'Heavy freezing rain' },
+  71: { icon: '🌨️', description: 'Slight snow' },
+  73: { icon: '🌨️', description: 'Moderate snow' },
+  75: { icon: '🌨️', description: 'Heavy snow' },
+  77: { icon: '🌨️', description: 'Snow grains' },
+  80: { icon: '🌦️', description: 'Slight rain showers' },
+  81: { icon: '🌧️', description: 'Moderate rain showers' },
+  82: { icon: '⛈️', description: 'Violent rain showers' },
+  85: { icon: '🌨️', description: 'Slight snow showers' },
+  86: { icon: '🌨️', description: 'Heavy snow showers' },
+  95: { icon: '⛈️', description: 'Thunderstorm' },
+  96: { icon: '⛈️', description: 'Thunderstorm with slight hail' },
+  99: { icon: '⛈️', description: 'Thunderstorm with heavy hail' },
+};
+
+function getWeatherInfo(code: number): { icon: string; description: string } {
+  return weatherCodes[code] || { icon: '❓', description: 'Unknown' };
+}
+
+function getWindDirection(degrees: number): string {
+  const directions = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];
+  const index = Math.round(degrees / 22.5) % 16;
+  return directions[index];
+}
+
+function celsiusToFahrenheit(celsius: number): number {
+  return Math.round((celsius * 9 / 5) + 32);
+}
+
+function getAQIInfo(aqi: number): { label: string; color: string } {
+  if (aqi <= 50) return { label: 'Good', color: '#00e400' };
+  if (aqi <= 100) return { label: 'Moderate', color: '#ffff00' };
+  if (aqi <= 150) return { label: 'Unhealthy for Sensitive Groups', color: '#ff7e00' };
+  if (aqi <= 200) return { label: 'Unhealthy', color: '#ff0000' };
+  if (aqi <= 300) return { label: 'Very Unhealthy', color: '#8f3f97' };
+  return { label: 'Hazardous', color: '#7e0023' };
+}
+
+/**
+ * Fetch current weather for a location
+ */
+export async function fetchWeather(lat: number, lng: number): Promise<WeatherData> {
+  const params = new URLSearchParams({
+    latitude: lat.toFixed(6),
+    longitude: lng.toFixed(6),
+    current: 'temperature_2m,relative_humidity_2m,apparent_temperature,is_day,precipitation,weather_code,cloud_cover,wind_speed_10m,wind_direction_10m,uv_index',
+    temperature_unit: 'celsius',
+    wind_speed_unit: 'kmh',
+    precipitation_unit: 'mm',
+    timezone: 'auto',
+  });
+
+  const response = await fetch(`https://api.open-meteo.com/v1/forecast?${params}`);
+  if (!response.ok) throw new Error('Failed to fetch weather data');
+
+  const data = await response.json();
+  const current = data.current;
+
+  const weatherInfo = getWeatherInfo(current.weather_code);
+
+  return {
+    temperature: Math.round(current.temperature_2m),
+    temperatureFahrenheit: celsiusToFahrenheit(current.temperature_2m),
+    feelsLike: Math.round(current.apparent_temperature),
+    feelsLikeFahrenheit: celsiusToFahrenheit(current.apparent_temperature),
+    weatherCode: current.weather_code,
+    weatherDescription: weatherInfo.description,
+    weatherIcon: weatherInfo.icon,
+    precipitation: current.precipitation || 0,
+    precipitationProbability: 0, // Not available in current weather
+    humidity: current.relative_humidity_2m,
+    windSpeed: Math.round(current.wind_speed_10m),
+    windDirection: current.wind_direction_10m,
+    windDirectionLabel: getWindDirection(current.wind_direction_10m),
+    cloudCover: current.cloud_cover,
+    visibility: 10000, // Open-Meteo doesn't provide visibility in free tier
+    uvIndex: current.uv_index || 0,
+    isDay: current.is_day === 1,
+    timestamp: Date.now(),
+  };
+}
+
+/**
+ * Fetch air quality data for a location
+ */
+export async function fetchAirQuality(lat: number, lng: number): Promise<AirQualityData> {
+  const params = new URLSearchParams({
+    latitude: lat.toFixed(6),
+    longitude: lng.toFixed(6),
+    current: 'us_aqi,pm10,pm2_5',
+    timezone: 'auto',
+  });
+
+  const response = await fetch(`https://air-quality-api.open-meteo.com/v1/air-quality?${params}`);
+  if (!response.ok) throw new Error('Failed to fetch air quality data');
+
+  const data = await response.json();
+  const current = data.current;
+
+  const aqi = current.us_aqi || 0;
+  const aqiInfo = getAQIInfo(aqi);
+
+  return {
+    aqi,
+    aqiLabel: aqiInfo.label,
+    aqiColor: aqiInfo.color,
+    pm25: current.pm2_5 || 0,
+    pm10: current.pm10 || 0,
+    timestamp: Date.now(),
+  };
+}
+
+/**
+ * Fetch 3-day weather forecast for a location
+ */
+export async function fetchWeatherForecast(lat: number, lng: number): Promise<WeatherForecast> {
+  const params = new URLSearchParams({
+    latitude: lat.toFixed(6),
+    longitude: lng.toFixed(6),
+    daily: 'weather_code,temperature_2m_max,temperature_2m_min,precipitation_probability_max',
+    temperature_unit: 'celsius',
+    timezone: 'auto',
+    forecast_days: '3',
+  });
+
+  const response = await fetch(`https://api.open-meteo.com/v1/forecast?${params}`);
+  if (!response.ok) throw new Error('Failed to fetch forecast data');
+
+  const data = await response.json();
+
+  return {
+    daily: data.daily.time.map((date: string, index: number) => {
+      const weatherInfo = getWeatherInfo(data.daily.weather_code[index]);
+      return {
+        date,
+        maxTemp: Math.round(data.daily.temperature_2m_max[index]),
+        minTemp: Math.round(data.daily.temperature_2m_min[index]),
+        weatherCode: data.daily.weather_code[index],
+        weatherIcon: weatherInfo.icon,
+        precipitationProbability: data.daily.precipitation_probability_max[index] || 0,
+      };
+    }),
+  };
+}
+
+/**
+ * Calculate skateability score based on weather conditions
+ */
+export function calculateSkateability(
+  weather: WeatherData,
+  airQuality?: AirQualityData
+): SkateabilityScore {
+  let score = 100;
+  const reasons: string[] = [];
+
+  // Precipitation (dealbreaker)
+  if (weather.precipitation > 0) {
+    score = 0;
+    reasons.push('Currently raining');
+    return {
+      score,
+      label: 'Unrideable',
+      color: '#ff0000',
+      reasons,
+    };
+  }
+
+  // Check for rain/snow conditions
+  const isRaining = [51, 53, 55, 56, 57, 61, 63, 65, 66, 67, 80, 81, 82].includes(weather.weatherCode);
+  const isSnowing = [71, 73, 75, 77, 85, 86].includes(weather.weatherCode);
+  const isThunderstorm = [95, 96, 99].includes(weather.weatherCode);
+
+  if (isRaining || isSnowing || isThunderstorm) {
+    score = 0;
+    reasons.push(isSnowing ? 'Snowing' : isThunderstorm ? 'Thunderstorm' : 'Raining');
+    return {
+      score,
+      label: 'Unrideable',
+      color: '#ff0000',
+      reasons,
+    };
+  }
+
+  // Temperature
+  if (weather.temperature < 0) {
+    score -= 50;
+    reasons.push('Freezing temperature');
+  } else if (weather.temperature < 5) {
+    score -= 30;
+    reasons.push('Very cold');
+  } else if (weather.temperature > 38) {
+    score -= 40;
+    reasons.push('Extremely hot');
+  } else if (weather.temperature > 32) {
+    score -= 20;
+    reasons.push('Very hot');
+  }
+
+  // Wind
+  if (weather.windSpeed > 40) {
+    score -= 40;
+    reasons.push('Very strong wind');
+  } else if (weather.windSpeed > 25) {
+    score -= 25;
+    reasons.push('Strong wind');
+  } else if (weather.windSpeed > 15) {
+    score -= 10;
+    reasons.push('Moderate wind');
+  }
+
+  // Air quality
+  if (airQuality) {
+    if (airQuality.aqi > 200) {
+      score -= 40;
+      reasons.push('Very unhealthy air');
+    } else if (airQuality.aqi > 150) {
+      score -= 25;
+      reasons.push('Unhealthy air');
+    } else if (airQuality.aqi > 100) {
+      score -= 10;
+      reasons.push('Moderate air quality');
+    }
+  }
+
+  // Humidity (affects grip)
+  if (weather.humidity > 90) {
+    score -= 15;
+    reasons.push('Very humid');
+  } else if (weather.humidity > 75) {
+    score -= 5;
+    reasons.push('Humid');
+  }
+
+  // UV Index (safety concern)
+  if (weather.uvIndex > 10) {
+    score -= 10;
+    reasons.push('Extreme UV - wear sunscreen');
+  } else if (weather.uvIndex > 7) {
+    score -= 5;
+    reasons.push('High UV - sun protection recommended');
+  }
+
+  // Ensure score doesn't go below 0
+  score = Math.max(0, score);
+
+  // If no negative reasons, add positive feedback
+  if (reasons.length === 0) {
+    reasons.push('Perfect skating conditions');
+  }
+
+  let label: string;
+  let color: string;
+
+  if (score >= 85) {
+    label = 'Perfect';
+    color = '#00e400';
+  } else if (score >= 70) {
+    label = 'Good';
+    color = '#92d050';
+  } else if (score >= 50) {
+    label = 'Okay';
+    color = '#ffff00';
+  } else if (score >= 25) {
+    label = 'Poor';
+    color = '#ff7e00';
+  } else {
+    label = 'Bad';
+    color = '#ff0000';
+  }
+
+  return {
+    score,
+    label,
+    color,
+    reasons,
+  };
+}
diff --git a/src/src/main.tsx b/src/src/main.tsx
new file mode 100644
index 0000000..4ddc5ec
--- /dev/null
+++ b/src/src/main.tsx
@@ -0,0 +1,47 @@
+import { createRoot } from 'react-dom/client';
+
+// Import polyfills first
+import './lib/polyfills.ts';
+
+import { ErrorBoundary } from '@/components/ErrorBoundary';
+import App from './App.tsx';
+import './index.css';
+
+// Outfit font for modern, clean typography
+import '@fontsource-variable/outfit';
+
+// Leaflet CSS is loaded via CDN in index.html to avoid build issues
+
+/**
+ * AMBER CALLBACK PRE-CHECK
+ * 
+ * PWAs can sometimes lose URL parameters during React hydration.
+ * This runs BEFORE React renders to capture Amber callback data.
+ * We store it in sessionStorage so the AmberCallbackHandler can retrieve it.
+ */
+(function captureAmberCallback() {
+  const params = new URLSearchParams(window.location.search);
+  const event = params.get('event');
+  
+  if (event) {
+    console.log('[Amber Pre-Check] Detected Amber callback in URL');
+    console.log('[Amber Pre-Check] Full URL:', window.location.href);
+    console.log('[Amber Pre-Check] Event param:', event);
+    
+    // Store the callback data immediately before React can interfere
+    try {
+      sessionStorage.setItem('amber_callback_event', event);
+      sessionStorage.setItem('amber_callback_url', window.location.href);
+      sessionStorage.setItem('amber_callback_timestamp', Date.now().toString());
+      console.log('[Amber Pre-Check] Stored callback data in sessionStorage');
+    } catch (e) {
+      console.error('[Amber Pre-Check] Failed to store callback:', e);
+    }
+  }
+})();
+
+createRoot(document.getElementById("root")!).render(
+  <ErrorBoundary>
+    <App />
+  </ErrorBoundary>
+);
diff --git a/src/src/pages/AboutPage.tsx b/src/src/pages/AboutPage.tsx
new file mode 100644
index 0000000..d245bb5
--- /dev/null
+++ b/src/src/pages/AboutPage.tsx
@@ -0,0 +1,263 @@
+import { useSeoMeta } from '@unhead/react';
+import { Link } from 'react-router-dom';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useToast } from '@/hooks/useToast';
+import {
+  MapPin,
+  Heart,
+  Globe,
+  Zap,
+  Shield,
+  Users,
+  Code,
+  ExternalLink,
+  BarChart3,
+  AlertCircle,
+} from 'lucide-react';
+
+export default function AboutPage() {
+  useSeoMeta({
+    title: 'About - SkateSpots',
+    description: 'Learn about SkateSpots and our mission to build a decentralized skateboarding community.',
+  });
+
+  const { user } = useCurrentUser();
+  const { toast } = useToast();
+
+  const copyNpub = () => {
+    navigator.clipboard.writeText('npub1yrnuj56rnen08zp2h9h7p74ghgjx6ma39spmpj6w9hzxywutevsst7k5cx');
+    toast({
+      title: 'Copied!',
+      description: 'npub copied to clipboard. Paste it in your favorite Nostr client to send a DM.',
+    });
+  };
+
+  // Bug report template for DM
+  const bugReportTemplate = `🐛 Bug Report
+
+What happened:
+
+What I expected:
+
+Steps to reproduce:
+
+Device/Browser: ${navigator.userAgent.includes('Mobile') ? 'Mobile' : 'Desktop'} - ${navigator.userAgent.split(' ').slice(-2).join(' ')}
+
+Version: v0.1.0`;
+
+  const bugReportUrl = `/messages/npub1yrnuj56rnen08zp2h9h7p74ghgjx6ma39spmpj6w9hzxywutevsst7k5cx?message=${encodeURIComponent(bugReportTemplate)}`;
+
+  return (
+    <Layout>
+      <div className="container px-4 py-12 max-w-4xl">
+        {/* Hero */}
+        <div className="text-center mb-12">
+          <div className="mb-6">
+            <div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-gradient-to-br from-[#ff0040] to-[#ff6600] mb-4">
+              <MapPin className="h-10 w-10 text-white" />
+            </div>
+          </div>
+          <h1 className="text-4xl md:text-6xl font-black uppercase mb-4" style={{
+            fontFamily: 'Impact, "Arial Black", sans-serif',
+            letterSpacing: '0.05em'
+          }}>
+            <span className="neon-red">ABOUT</span>{' '}
+            <span className="gradient-text">SKATESPOTS</span>
+          </h1>
+          <p className="text-xl text-gray-300 max-w-2xl mx-auto mb-6">
+            Connect with local skate scenes worldwide. <strong className="text-[#ff0040]">Skater-owned data</strong>, community-run relays.
+          </p>
+          <Link to="/stats">
+            <Button
+              variant="outline"
+              className="gap-2 border-2 border-[#ccff00] text-[#ccff00] hover:bg-[#ccff00]/10"
+            >
+              <BarChart3 className="h-4 w-4" />
+              View Community Stats
+            </Button>
+          </Link>
+        </div>
+
+        {/* Mission */}
+        <Card className="bg-black/90 border-2 border-[#ff0040]/50 mb-8">
+          <CardContent className="p-8">
+            <div className="flex items-start gap-4 mb-4">
+              <Heart className="h-8 w-8 text-[#ff0040] flex-shrink-0" />
+              <div>
+                <h2 className="text-2xl font-black uppercase text-white mb-3">Our Mission</h2>
+                <p className="text-gray-300 leading-relaxed">
+                  SkateSpots helps skateboarders discover spots, connect with pros at The Lab, and organize sessions -
+                  all without corporate control. The real skating happens offline, this tool just connects you to it.
+                </p>
+              </div>
+            </div>
+            <p className="text-gray-300 leading-relaxed">
+              Skateboarding knowledge should live with the community, not locked in corporate apps.
+              That's why SkateSpots runs on Nostr - a relay-based system where skaters control the data
+              and no company can delete your spots.
+            </p>
+          </CardContent>
+        </Card>
+
+        {/* Why Nostr */}
+        <Card className="bg-black/90 border-2 border-[#ccff00]/50 mb-8">
+          <CardContent className="p-8">
+            <div className="flex items-start gap-4 mb-6">
+              <Globe className="h-8 w-8 text-[#ccff00] flex-shrink-0" />
+              <div>
+                <h2 className="text-2xl font-black uppercase text-white mb-3">Why Nostr?</h2>
+              </div>
+            </div>
+
+            <div className="grid md:grid-cols-2 gap-4">
+              <div className="p-4 rounded-lg bg-black/50 border border-[#ff0040]/20">
+                <Shield className="h-6 w-6 text-[#ff0040] mb-2" />
+                <h3 className="font-bold text-white uppercase text-sm mb-2">Community-Controlled</h3>
+                <p className="text-sm text-gray-400">
+                  Your spots live on community relays. Skaters run the servers, not corporations.
+                </p>
+              </div>
+              <div className="p-4 rounded-lg bg-black/50 border border-[#ccff00]/20">
+                <Users className="h-6 w-6 text-[#ccff00] mb-2" />
+                <h3 className="font-bold text-white uppercase text-sm mb-2">You Own Your Data</h3>
+                <p className="text-sm text-gray-400">
+                  Your Nostr identity is yours. Take it to any Nostr app - no lock-in.
+                </p>
+              </div>
+              <div className="p-4 rounded-lg bg-black/50 border border-[#ff6600]/20">
+                <Zap className="h-6 w-6 text-[#ff6600] mb-2" />
+                <h3 className="font-bold text-white uppercase text-sm mb-2">Bitcoin Integration</h3>
+                <p className="text-sm text-gray-400">
+                  Zap creators directly with Bitcoin. No platform taking 30%.
+                </p>
+              </div>
+              <div className="p-4 rounded-lg bg-black/50 border border-[#ccff00]/20">
+                <Code className="h-6 w-6 text-[#ccff00] mb-2" />
+                <h3 className="font-bold text-white uppercase text-sm mb-2">Open Source</h3>
+                <p className="text-sm text-gray-400">
+                  Built in the open. Anyone can contribute or fork the code.
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Links */}
+        <div className="grid md:grid-cols-2 gap-6">
+          <Card className="bg-black/90 border-2 border-[#ccff00]/50">
+            <CardContent className="p-6 text-center">
+              <h3 className="font-black uppercase text-[#ccff00] mb-4">Get Involved</h3>
+              <p className="text-gray-300 mb-4 text-sm">
+                SkateSpots is open source and community-driven. Contribute code, share spots, or help others get started.
+              </p>
+              <a href="/onboarding">
+                <Button className="gap-2 bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold uppercase w-full">
+                  Get Started
+                </Button>
+              </a>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-black/90 border-2 border-[#ff0040]/50">
+            <CardContent className="p-6 text-center">
+              <h3 className="font-black uppercase text-[#ff0040] mb-4">Learn About Nostr</h3>
+              <p className="text-gray-300 mb-4 text-sm">
+                New to Nostr? Learn about the protocol that powers SkateSpots and thousands of other apps.
+              </p>
+              <a href="https://nostr.com" target="_blank" rel="noopener noreferrer">
+                <Button variant="outline" className="gap-2 border-2 border-[#ff0040]/50 hover:bg-[#ff0040]/10 text-[#ff0040] font-bold uppercase w-full">
+                  <ExternalLink className="h-4 w-4" />
+                  Visit Nostr.com
+                </Button>
+              </a>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Beta Testing Notice */}
+        <Card className="bg-yellow-950/20 border-yellow-500/30 mt-8">
+          <CardContent className="p-6">
+            <div className="flex items-start gap-4">
+              <AlertCircle className="h-6 w-6 text-yellow-500 flex-shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <h3 className="font-bold text-yellow-500 uppercase mb-2">Beta Testing</h3>
+                <p className="text-sm text-gray-300 mb-4">
+                  Dear User! Thank you for beta testing SkateSpots. Please note that the app is still 
+                  in beta, and there may be bugs or security issues. If you encounter any problems 
+                  or want to report a bug/issue, please reach out!
+                </p>
+                <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center">
+                  <div className="flex-1 bg-black/30 rounded-lg p-3 border border-yellow-500/20 min-w-0">
+                    <p className="text-xs text-gray-400 mb-1">Give us feedback:</p>
+                    <code className="text-xs text-yellow-400 break-all">
+                      npub1yrnuj56rnen08zp2h9h7p74ghgjx6ma39spmpj6w9hzxywutevsst7k5cx
+                    </code>
+                  </div>
+                  <div className="flex gap-2 flex-shrink-0">
+                    <Button 
+                      variant="outline" 
+                      size="sm"
+                      className="border-yellow-500/50 text-yellow-500 hover:bg-yellow-500/10"
+                      onClick={copyNpub}
+                    >
+                      Copy npub
+                    </Button>
+                    {user ? (
+                      <Link to={bugReportUrl}>
+                        <Button 
+                          size="sm"
+                          className="bg-yellow-500 text-black hover:bg-yellow-400"
+                        >
+                          Report Bug
+                        </Button>
+                      </Link>
+                    ) : (
+                      <a 
+                        href="https://njump.me/npub1yrnuj56rnen08zp2h9h7p74ghgjx6ma39spmpj6w9hzxywutevsst7k5cx"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <Button 
+                          size="sm"
+                          className="bg-yellow-500 text-black hover:bg-yellow-400"
+                        >
+                          View Profile
+                        </Button>
+                      </a>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Powered By */}
+        <div className="text-center mt-12 p-6">
+          <p className="text-gray-400 mb-2 uppercase tracking-wide">Powered by</p>
+          <div className="flex items-center justify-center gap-3">
+            <a
+              href="https://nostr.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-[#ccff00] hover:text-[#ccff00]/80 font-black text-xl uppercase"
+            >
+              Nostr
+            </a>
+            <span className="text-gray-600">•</span>
+            <span className="text-[#ff0040] font-black text-xl uppercase">
+              Decentralized
+            </span>
+            <span className="text-gray-600">•</span>
+            <span className="text-orange-400 font-black text-xl uppercase">
+              Community-Owned
+            </span>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/BecomeCoachPage.tsx b/src/src/pages/BecomeCoachPage.tsx
new file mode 100644
index 0000000..54a09db
--- /dev/null
+++ b/src/src/pages/BecomeCoachPage.tsx
@@ -0,0 +1,438 @@
+import { useState } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { useNavigate, Link } from 'react-router-dom';
+import ngeohash from 'ngeohash';
+import { nip19 } from 'nostr-tools';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useUploadFile } from '@/hooks/useUploadFile';
+import { useToast } from '@/hooks/useToast';
+import { useWallet } from '@/hooks/useWallet';
+import { WalletModal } from '@/components/WalletModal';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { SpotPicker } from '@/components/SpotPicker';
+import { SKATE_COACH_KIND, SKATE_SPOT_KIND, COACH_SKILL_LABELS, COACH_SKILL_DESCRIPTIONS } from '@/lib/types';
+import { cn } from '@/lib/utils';
+import { GraduationCap, Upload, X, Loader2, ArrowLeft, MapPin, Wallet, ExternalLink } from 'lucide-react';
+
+const SKILL_ENTRIES = Object.entries(COACH_SKILL_LABELS);
+
+export default function BecomeCoachPage() {
+  useSeoMeta({
+    title: 'Become a Coach - SkateSpots',
+    description: 'Create your skateboarding coach profile.',
+  });
+
+  const navigate = useNavigate();
+  const { user } = useCurrentUser();
+  const author = useAuthor(user?.pubkey || '');
+  const { mutateAsync: createEvent, isPending: isPublishing } = useNostrPublish();
+  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+  const { toast } = useToast();
+  const { webln, activeNWC } = useWallet();
+  
+  // Check if user has any wallet connected
+  const hasWallet = !!webln || !!activeNWC;
+
+  const [bio, setBio] = useState('');
+  const [location, setLocation] = useState('');
+  const [latitude, setLatitude] = useState('');
+  const [longitude, setLongitude] = useState('');
+  const [selectedSkills, setSelectedSkills] = useState<string[]>([]);
+  const [image, setImage] = useState<string | null>(null);
+  const [experience, setExperience] = useState('');
+  const [rate, setRate] = useState('');
+  const [phone, setPhone] = useState('');
+  const [email, setEmail] = useState('');
+  const [website, setWebsite] = useState('');
+  const [instagram, setInstagram] = useState('');
+  const [selectedSpots, setSelectedSpots] = useState<string[]>([]);
+  const [isGettingLocation, setIsGettingLocation] = useState(false);
+
+  const getDisplayName = () => {
+    if (author.data?.metadata?.name) return author.data.metadata.name;
+    if (user?.pubkey) {
+      const npub = nip19.npubEncode(user.pubkey);
+      return `${npub.slice(0, 12)}...${npub.slice(-4)}`;
+    }
+    return 'Anonymous Coach';
+  };
+
+  const toggleSkill = (skill: string) => {
+    setSelectedSkills((prev) => prev.includes(skill) ? prev.filter((s) => s !== skill) : [...prev, skill]);
+  };
+
+  const getCurrentLocation = () => {
+    if (!navigator.geolocation) {
+      toast({ title: 'Geolocation not supported', variant: 'destructive' });
+      return;
+    }
+
+    setIsGettingLocation(true);
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        setLatitude(position.coords.latitude.toFixed(6));
+        setLongitude(position.coords.longitude.toFixed(6));
+        setIsGettingLocation(false);
+        toast({ title: 'Location found' });
+      },
+      (error) => {
+        setIsGettingLocation(false);
+        toast({ title: 'Location error', description: error.message, variant: 'destructive' });
+      }
+    );
+  };
+
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    try {
+      const file = files[0];
+      const tags = await uploadFile(file);
+      const url = tags[0]?.[1];
+      if (url) {
+        setImage(url);
+        toast({ title: 'Image uploaded' });
+      }
+    } catch (error) {
+      toast({ title: 'Upload failed', description: error instanceof Error ? error.message : 'Failed', variant: 'destructive' });
+    }
+    e.target.value = '';
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (selectedSkills.length === 0) {
+      toast({ title: 'Skills required', description: 'Select at least one skill.', variant: 'destructive' });
+      return;
+    }
+
+    try {
+      const identifier = 'coach-profile';
+      const displayName = getDisplayName();
+
+      const tags: string[][] = [
+        ['d', identifier],
+        ['title', displayName],
+        ['t', 'skatecoach'],
+        ['alt', `Skate coach: ${displayName}`],
+      ];
+
+      if (location.trim()) tags.push(['location', location.trim()]);
+
+      if (latitude && longitude) {
+        const lat = parseFloat(latitude);
+        const lng = parseFloat(longitude);
+        if (!isNaN(lat) && !isNaN(lng)) {
+          const geohash = ngeohash.encode(lat, lng, 7);
+          tags.push(['g', geohash]);
+        }
+      }
+
+      for (const skill of selectedSkills) tags.push(['t', skill]);
+      if (image) tags.push(['image', image]);
+      if (experience.trim()) tags.push(['experience', experience.trim()]);
+      if (rate.trim()) tags.push(['rate', rate.trim()]);
+      if (phone.trim()) tags.push(['phone', phone.trim()]);
+      if (email.trim()) tags.push(['email', email.trim()]);
+      if (website.trim()) tags.push(['website', website.trim()]);
+      if (instagram.trim()) tags.push(['instagram', instagram.trim()]);
+      
+      // Add spot references
+      for (const spotId of selectedSpots) {
+        const [spotPubkey, spotIdentifier] = spotId.split(':');
+        tags.push(['a', `${SKATE_SPOT_KIND}:${spotPubkey}:${spotIdentifier}`]);
+      }
+
+      await createEvent({
+        kind: SKATE_COACH_KIND,
+        content: bio.trim(),
+        tags,
+      });
+
+      toast({ title: 'Coach profile created!', description: 'Your profile has been published.' });
+      navigate(`/coach/${user?.pubkey}/${identifier}`);
+    } catch (error) {
+      toast({ title: 'Failed to publish', description: error instanceof Error ? error.message : 'Error', variant: 'destructive' });
+    }
+  };
+
+  if (!user) {
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="max-w-xl mx-auto bg-gray-900 border-gray-700">
+            <CardContent className="py-12 text-center">
+              <GraduationCap className="h-12 w-12 mx-auto mb-4 text-gray-600" />
+              <h2 className="text-xl font-bold mb-2">Login Required</h2>
+              <p className="text-gray-400 mb-6">You need to log in to create a coach profile.</p>
+              <LoginArea className="justify-center max-w-60 mx-auto" />
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  const hasNip05 = user?.metadata?.nip05;
+
+  return (
+    <Layout>
+      <div className="container px-4 sm:px-6 py-6 sm:py-8 max-w-2xl">
+        <div className="mb-6">
+          <Link to="/lab" className="inline-flex items-center text-gray-400 hover:text-white transition-colors mb-4">
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Back to The Lab
+          </Link>
+          <h1 className="text-3xl font-black uppercase neon-lime" style={{
+            fontFamily: 'Impact, "Arial Black", sans-serif'
+          }}>Become a Coach</h1>
+          <p className="text-gray-400 mt-1">Share your skateboarding knowledge</p>
+
+          {!hasNip05 && (
+            <Card className="mt-4 bg-yellow-950/30 border-2 border-yellow-500/50">
+              <CardContent className="p-4">
+                <div className="flex items-start gap-3">
+                  <div className="text-yellow-500">⚠️</div>
+                  <div>
+                    <h3 className="font-bold text-yellow-400 mb-1">NIP-05 Verification Required</h3>
+                    <p className="text-sm text-gray-300 mb-2">
+                      Add a NIP-05 identifier to your profile to verify your identity and build trust with students. This helps students know you're a legitimate coach.
+                    </p>
+                    <Link to="/settings">
+                      <Button variant="outline" size="sm" className="border-yellow-500/50 hover:bg-yellow-500/10 text-yellow-400 font-bold">
+                        Add NIP-05 in Settings
+                      </Button>
+                    </Link>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Wallet Requirement */}
+          <Card className="mt-4 bg-orange-950/30 border-2 border-orange-500/50">
+            <CardContent className="p-4">
+              <div className="flex items-start gap-3">
+                <Wallet className="h-6 w-6 text-orange-400 flex-shrink-0 mt-0.5" />
+                <div className="flex-1">
+                  <h3 className="font-bold text-orange-400 mb-2">⚡ Payment Setup Required</h3>
+                  <p className="text-sm text-gray-300 mb-3">
+                    To receive lesson payments from students, you need to connect a Lightning wallet. Students will zap you directly for coaching sessions.
+                  </p>
+                  
+                  {hasWallet ? (
+                    <div className="p-3 rounded-lg bg-green-950/30 border border-green-500/50">
+                      <div className="flex items-center gap-2 mb-1">
+                        <div className="h-2 w-2 rounded-full bg-green-500" />
+                        <p className="text-sm font-bold text-green-400">Wallet Connected - Ready to Receive Payments!</p>
+                      </div>
+                      <p className="text-xs text-gray-400">
+                        {webln ? 'Using WebLN browser extension' : 'Using Nostr Wallet Connect'}
+                      </p>
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      <div className="p-3 rounded-lg bg-red-950/30 border border-red-500/50">
+                        <div className="flex items-center gap-2">
+                          <div className="h-2 w-2 rounded-full bg-red-500" />
+                          <p className="text-sm font-bold text-red-400">No Wallet Connected</p>
+                        </div>
+                      </div>
+                      
+                      <div className="flex flex-col sm:flex-row gap-2">
+                        <WalletModal>
+                          <Button className="gap-2 bg-orange-500 hover:bg-orange-600 flex-1">
+                            <Wallet className="h-4 w-4" />
+                            Connect Wallet with NWC
+                          </Button>
+                        </WalletModal>
+                        <a
+                          href="https://planb.academy/en/tutorials/wallet"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="flex-1"
+                        >
+                          <Button variant="outline" className="gap-2 w-full border-orange-500/50 text-orange-400 hover:bg-orange-500/10">
+                            <ExternalLink className="h-4 w-4" />
+                            Learn How
+                          </Button>
+                        </a>
+                      </div>
+
+                      <p className="text-xs text-gray-400 italic">
+                        💡 Tip: Most Lightning wallets support NWC (Alby, Minibits, Zeus, Coinos). Takes 30 seconds to set up.
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <Card className="bg-gray-900 border-gray-700">
+            <CardHeader>
+              <CardTitle>Coach Profile</CardTitle>
+              <CardDescription className="text-gray-400">Tell students about your experience</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="space-y-2">
+                <Label>Your Coach Identity</Label>
+                <div className="p-4 rounded-lg border-2 border-red-500/30 bg-red-500/5">
+                  <p className="font-black text-lg">{getDisplayName()}</p>
+                  <p className="text-sm text-gray-400 mt-1">From your Nostr profile</p>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="bio">Bio / Coaching Philosophy</Label>
+                <Textarea id="bio" placeholder="Your background, teaching style..." value={bio} onChange={(e) => setBio(e.target.value)} rows={5} className="bg-gray-800 border-gray-700" />
+              </div>
+
+              <div className="space-y-3">
+                <Label>Skills I Teach * (select at least one)</Label>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                  {SKILL_ENTRIES.map(([skill, label]) => (
+                    <button
+                      key={skill}
+                      type="button"
+                      onClick={() => toggleSkill(skill)}
+                      className={cn(
+                        'p-3 rounded-lg text-left transition-all border text-sm',
+                        selectedSkills.includes(skill)
+                          ? 'bg-red-500 text-white border-red-500'
+                          : 'bg-gray-800 hover:bg-gray-700 border-gray-700'
+                      )}
+                    >
+                      <div className="font-bold">{label}</div>
+                      <div className={cn('text-xs mt-1 line-clamp-1', selectedSkills.includes(skill) ? 'text-white/80' : 'text-gray-400')}>
+                        {COACH_SKILL_DESCRIPTIONS[skill]}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="experience">Years Experience</Label>
+                  <Input id="experience" type="number" placeholder="15" value={experience} onChange={(e) => setExperience(e.target.value)} className="bg-gray-800 border-gray-700" />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="rate">Hourly Rate</Label>
+                  <Input id="rate" placeholder="5000 sats/hr" value={rate} onChange={(e) => setRate(e.target.value)} className="bg-gray-800 border-gray-700" />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="location">City / Area</Label>
+                <Input id="location" placeholder="Los Angeles, CA" value={location} onChange={(e) => setLocation(e.target.value)} className="bg-gray-800 border-gray-700" />
+              </div>
+
+              <div className="space-y-3">
+                <Label className="text-base font-bold">Contact Information</Label>
+                <p className="text-sm text-gray-400">How students can reach you (all optional, but recommended)</p>
+
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="phone">Phone Number</Label>
+                    <Input id="phone" type="tel" placeholder="+1 234 567 8900" value={phone} onChange={(e) => setPhone(e.target.value)} className="bg-gray-800 border-gray-700" />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="email">Email</Label>
+                    <Input id="email" type="email" placeholder="coach@example.com" value={email} onChange={(e) => setEmail(e.target.value)} className="bg-gray-800 border-gray-700" />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="website">Website</Label>
+                    <Input id="website" type="url" placeholder="https://mysite.com" value={website} onChange={(e) => setWebsite(e.target.value)} className="bg-gray-800 border-gray-700" />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="instagram">Instagram</Label>
+                    <Input id="instagram" placeholder="@username" value={instagram} onChange={(e) => setInstagram(e.target.value)} className="bg-gray-800 border-gray-700" />
+                  </div>
+                </div>
+
+                <div className="p-3 rounded-lg border border-blue-500/30 bg-blue-500/5">
+                  <p className="text-sm text-gray-300">
+                    💬 Students can message you directly through SkateSpots' encrypted messaging
+                  </p>
+                </div>
+              </div>
+
+              {/* Spot Picker */}
+              <SpotPicker
+                selectedSpots={selectedSpots}
+                onSpotsChange={setSelectedSpots}
+                maxSpots={5}
+                label="Spots Where You Coach"
+                description="Select spots where you offer coaching sessions"
+              />
+
+              <div className="space-y-2">
+                <Label>Coordinates (optional)</Label>
+                <div className="grid grid-cols-2 gap-4">
+                  <Input placeholder="Latitude" value={latitude} onChange={(e) => setLatitude(e.target.value)} className="bg-gray-800 border-gray-700" />
+                  <Input placeholder="Longitude" value={longitude} onChange={(e) => setLongitude(e.target.value)} className="bg-gray-800 border-gray-700" />
+                </div>
+                <Button type="button" variant="outline" size="sm" onClick={getCurrentLocation} disabled={isGettingLocation} className="mt-2 border-gray-700">
+                  {isGettingLocation ? <><Loader2 className="h-4 w-4 mr-2 animate-spin" />Getting...</> : <><MapPin className="h-4 w-4 mr-2" />Use current location</>}
+                </Button>
+              </div>
+
+              <div className="space-y-2">
+                <Label>Profile Photo</Label>
+                {image ? (
+                  <div className="relative w-32 h-32 rounded-full overflow-hidden bg-gray-800">
+                    <img src={image} alt="Profile" className="w-full h-full object-cover" />
+                    <button type="button" onClick={() => setImage(null)} className="absolute top-2 right-2 p-1 rounded-full bg-black/80 hover:bg-red-500">
+                      <X className="h-4 w-4" />
+                    </button>
+                  </div>
+                ) : (
+                  <label className="block w-32 h-32 rounded-full border-2 border-dashed border-gray-700 flex flex-col items-center justify-center cursor-pointer hover:bg-gray-800/50">
+                    <input type="file" accept="image/*" className="hidden" onChange={handleImageUpload} disabled={isUploading} />
+                    {isUploading ? <Loader2 className="h-6 w-6 animate-spin" /> : <><Upload className="h-6 w-6 mb-1 text-gray-500" /><span className="text-xs text-gray-500">Upload</span></>}
+                  </label>
+                )}
+              </div>
+
+              <Button 
+                type="submit" 
+                className="w-full bg-red-500 hover:bg-red-600 uppercase font-black" 
+                disabled={isPublishing || isUploading || !hasWallet}
+              >
+                {isPublishing ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Publishing...
+                  </>
+                ) : !hasWallet ? (
+                  <>
+                    <Wallet className="h-4 w-4 mr-2" />
+                    CONNECT WALLET TO CONTINUE
+                  </>
+                ) : (
+                  <>
+                    <GraduationCap className="h-4 w-4 mr-2" />
+                    CREATE COACH PROFILE
+                  </>
+                )}
+              </Button>
+            </CardContent>
+          </Card>
+        </form>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/BecomeFilmerPage.tsx b/src/src/pages/BecomeFilmerPage.tsx
new file mode 100644
index 0000000..b6f7e87
--- /dev/null
+++ b/src/src/pages/BecomeFilmerPage.tsx
@@ -0,0 +1,474 @@
+import { useState } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { useNavigate, Link } from 'react-router-dom';
+import ngeohash from 'ngeohash';
+import { nip19 } from 'nostr-tools';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useUploadFile } from '@/hooks/useUploadFile';
+import { useToast } from '@/hooks/useToast';
+import { useWallet } from '@/hooks/useWallet';
+import { WalletModal } from '@/components/WalletModal';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { SpotPicker } from '@/components/SpotPicker';
+import { SKATE_FILMER_KIND, SKATE_SPOT_KIND, FILMING_SERVICE_LABELS, FILMING_SERVICE_DESCRIPTIONS, FILMING_SKILL_LABELS, FILMING_SKILL_DESCRIPTIONS } from '@/lib/types';
+import { cn } from '@/lib/utils';
+import { Video, Upload, X, Loader2, ArrowLeft, MapPin, Wallet, ExternalLink } from 'lucide-react';
+
+const SERVICE_ENTRIES = Object.entries(FILMING_SERVICE_LABELS);
+const SKILL_ENTRIES = Object.entries(FILMING_SKILL_LABELS);
+
+export default function BecomeFilmerPage() {
+  useSeoMeta({
+    title: 'Become a Filmer - SkateSpots',
+    description: 'Create your skateboarding filming profile.',
+  });
+
+  const navigate = useNavigate();
+  const { user } = useCurrentUser();
+  const author = useAuthor(user?.pubkey || '');
+  const { mutateAsync: createEvent, isPending: isPublishing } = useNostrPublish();
+  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+  const { toast } = useToast();
+  const { webln, activeNWC } = useWallet();
+  
+  // Check if user has any wallet connected
+  const hasWallet = !!webln || !!activeNWC;
+
+  const [bio, setBio] = useState('');
+  const [location, setLocation] = useState('');
+  const [latitude, setLatitude] = useState('');
+  const [longitude, setLongitude] = useState('');
+  const [selectedServices, setSelectedServices] = useState<string[]>([]);
+  const [selectedSkills, setSelectedSkills] = useState<string[]>([]);
+  const [image, setImage] = useState<string | null>(null);
+  const [experience, setExperience] = useState('');
+  const [rate, setRate] = useState('');
+  const [phone, setPhone] = useState('');
+  const [email, setEmail] = useState('');
+  const [website, setWebsite] = useState('');
+  const [social, setSocial] = useState('');
+  const [selectedSpots, setSelectedSpots] = useState<string[]>([]);
+  const [isGettingLocation, setIsGettingLocation] = useState(false);
+
+  const getDisplayName = () => {
+    if (author.data?.metadata?.name) return author.data.metadata.name;
+    if (user?.pubkey) {
+      const npub = nip19.npubEncode(user.pubkey);
+      return `${npub.slice(0, 12)}...${npub.slice(-4)}`;
+    }
+    return 'Anonymous Filmer';
+  };
+
+  const toggleService = (service: string) => {
+    setSelectedServices((prev) => prev.includes(service) ? prev.filter((s) => s !== service) : [...prev, service]);
+  };
+
+  const toggleSkill = (skill: string) => {
+    setSelectedSkills((prev) => prev.includes(skill) ? prev.filter((s) => s !== skill) : [...prev, skill]);
+  };
+
+  const getCurrentLocation = () => {
+    if (!navigator.geolocation) {
+      toast({ title: 'Geolocation not supported', variant: 'destructive' });
+      return;
+    }
+
+    setIsGettingLocation(true);
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        setLatitude(position.coords.latitude.toFixed(6));
+        setLongitude(position.coords.longitude.toFixed(6));
+        setIsGettingLocation(false);
+        toast({ title: 'Location found' });
+      },
+      (error) => {
+        setIsGettingLocation(false);
+        toast({ title: 'Location error', description: error.message, variant: 'destructive' });
+      }
+    );
+  };
+
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    try {
+      const file = files[0];
+      const tags = await uploadFile(file);
+      const url = tags[0]?.[1];
+      if (url) {
+        setImage(url);
+        toast({ title: 'Image uploaded' });
+      }
+    } catch (error) {
+      toast({ title: 'Upload failed', description: error instanceof Error ? error.message : 'Failed', variant: 'destructive' });
+    }
+    e.target.value = '';
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (selectedServices.length === 0) {
+      toast({ title: 'Services required', description: 'Select at least one service.', variant: 'destructive' });
+      return;
+    }
+
+    if (selectedSkills.length === 0) {
+      toast({ title: 'Skills required', description: 'Select at least one filming skill.', variant: 'destructive' });
+      return;
+    }
+
+    try {
+      const identifier = 'filming-profile';
+      const displayName = getDisplayName();
+
+      const tags: string[][] = [
+        ['d', identifier],
+        ['title', displayName],
+        ['t', 'skatefilmer'],
+        ['alt', `Skate filmer: ${displayName}`],
+      ];
+
+      if (location.trim()) tags.push(['location', location.trim()]);
+
+      if (latitude && longitude) {
+        const lat = parseFloat(latitude);
+        const lng = parseFloat(longitude);
+        if (!isNaN(lat) && !isNaN(lng)) {
+          const geohash = ngeohash.encode(lat, lng, 7);
+          tags.push(['g', geohash]);
+        }
+      }
+
+      for (const service of selectedServices) tags.push(['t', service]);
+      for (const skill of selectedSkills) tags.push(['t', skill]);
+      if (image) tags.push(['image', image]);
+      if (experience.trim()) tags.push(['experience', experience.trim()]);
+      if (rate.trim()) tags.push(['rate', rate.trim()]);
+      if (phone.trim()) tags.push(['phone', phone.trim()]);
+      if (email.trim()) tags.push(['email', email.trim()]);
+      if (website.trim()) tags.push(['website', website.trim()]);
+      if (social.trim()) tags.push(['social', social.trim()]);
+      
+      // Add spot references
+      for (const spotId of selectedSpots) {
+        const [spotPubkey, spotIdentifier] = spotId.split(':');
+        tags.push(['a', `${SKATE_SPOT_KIND}:${spotPubkey}:${spotIdentifier}`]);
+      }
+
+      await createEvent({
+        kind: SKATE_FILMER_KIND,
+        content: bio.trim(),
+        tags,
+      });
+
+      toast({ title: 'Filming profile created!', description: 'Your profile has been published.' });
+      navigate(`/coach/${user?.pubkey}/${identifier}`);
+    } catch (error) {
+      toast({ title: 'Failed to publish', description: error instanceof Error ? error.message : 'Error', variant: 'destructive' });
+    }
+  };
+
+  if (!user) {
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="max-w-xl mx-auto bg-gray-900 border-gray-700">
+            <CardContent className="py-12 text-center">
+              <Video className="h-12 w-12 mx-auto mb-4 text-gray-600" />
+              <h2 className="text-xl font-bold mb-2">Login Required</h2>
+              <p className="text-gray-400 mb-6">You need to log in to create a filming profile.</p>
+              <LoginArea className="justify-center max-w-60 mx-auto" />
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  const hasNip05 = user?.metadata?.nip05;
+
+  return (
+    <Layout>
+      <div className="container px-4 sm:px-6 py-6 sm:py-8 max-w-2xl">
+        <div className="mb-6">
+          <Link to="/lab" className="inline-flex items-center text-gray-400 hover:text-white transition-colors mb-4">
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Back to The Lab
+          </Link>
+          <h1 className="text-3xl font-black uppercase neon-lime" style={{
+            fontFamily: 'Impact, "Arial Black", sans-serif'
+          }}>Become a Filmer</h1>
+          <p className="text-gray-400 mt-1">Offer your filming & editing services</p>
+
+          {!hasNip05 && (
+            <Card className="mt-4 bg-yellow-950/30 border-2 border-yellow-500/50">
+              <CardContent className="p-4">
+                <div className="flex items-start gap-3">
+                  <div className="text-yellow-500">⚠️</div>
+                  <div>
+                    <h3 className="font-bold text-yellow-400 mb-1">NIP-05 Verification Required</h3>
+                    <p className="text-sm text-gray-300 mb-2">
+                      Add a NIP-05 identifier to your profile to verify your identity and build trust with clients. This helps clients know you're a legitimate filmer.
+                    </p>
+                    <Link to="/settings">
+                      <Button variant="outline" size="sm" className="border-yellow-500/50 hover:bg-yellow-500/10 text-yellow-400 font-bold">
+                        Add NIP-05 in Settings
+                      </Button>
+                    </Link>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Wallet Requirement */}
+          <Card className="mt-4 bg-orange-950/30 border-2 border-orange-500/50">
+            <CardContent className="p-4">
+              <div className="flex items-start gap-3">
+                <Wallet className="h-6 w-6 text-orange-400 flex-shrink-0 mt-0.5" />
+                <div className="flex-1">
+                  <h3 className="font-bold text-orange-400 mb-2">⚡ Payment Setup Required</h3>
+                  <p className="text-sm text-gray-300 mb-3">
+                    To receive payments from clients for filming services, you need to connect a Lightning wallet. Clients will zap you directly for your work.
+                  </p>
+                  
+                  {hasWallet ? (
+                    <div className="p-3 rounded-lg bg-green-950/30 border border-green-500/50">
+                      <div className="flex items-center gap-2 mb-1">
+                        <div className="h-2 w-2 rounded-full bg-green-500" />
+                        <p className="text-sm font-bold text-green-400">Wallet Connected - Ready to Receive Payments!</p>
+                      </div>
+                      <p className="text-xs text-gray-400">
+                        {webln ? 'Using WebLN browser extension' : 'Using Nostr Wallet Connect'}
+                      </p>
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      <div className="p-3 rounded-lg bg-red-950/30 border border-red-500/50">
+                        <div className="flex items-center gap-2">
+                          <div className="h-2 w-2 rounded-full bg-red-500" />
+                          <p className="text-sm font-bold text-red-400">No Wallet Connected</p>
+                        </div>
+                      </div>
+                      
+                      <div className="flex flex-col sm:flex-row gap-2">
+                        <WalletModal>
+                          <Button className="gap-2 bg-orange-500 hover:bg-orange-600 flex-1">
+                            <Wallet className="h-4 w-4" />
+                            Connect Wallet with NWC
+                          </Button>
+                        </WalletModal>
+                        <a
+                          href="https://planb.academy/en/tutorials/wallet"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="flex-1"
+                        >
+                          <Button variant="outline" className="gap-2 w-full border-orange-500/50 text-orange-400 hover:bg-orange-500/10">
+                            <ExternalLink className="h-4 w-4" />
+                            Learn How
+                          </Button>
+                        </a>
+                      </div>
+
+                      <p className="text-xs text-gray-400 italic">
+                        💡 Tip: Most Lightning wallets support NWC (Alby, Minibits, Zeus, Coinos). Takes 30 seconds to set up.
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <Card className="bg-gray-900 border-gray-700">
+            <CardHeader>
+              <CardTitle>Filming Profile</CardTitle>
+              <CardDescription className="text-gray-400">Tell clients about your filming expertise</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="space-y-2">
+                <Label>Your Filmer Identity</Label>
+                <div className="p-4 rounded-lg border-2 border-red-500/30 bg-red-500/5">
+                  <p className="font-black text-lg">{getDisplayName()}</p>
+                  <p className="text-sm text-gray-400 mt-1">From your Nostr profile</p>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="bio">Bio / About Your Work</Label>
+                <Textarea id="bio" placeholder="Your background, style, equipment..." value={bio} onChange={(e) => setBio(e.target.value)} rows={5} className="bg-gray-800 border-gray-700" />
+              </div>
+
+              <div className="space-y-3">
+                <Label>Services Offered * (select at least one)</Label>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                  {SERVICE_ENTRIES.map(([service, label]) => (
+                    <button
+                      key={service}
+                      type="button"
+                      onClick={() => toggleService(service)}
+                      className={cn(
+                        'p-3 rounded-lg text-left transition-all border text-sm',
+                        selectedServices.includes(service)
+                          ? 'bg-red-500 text-white border-red-500'
+                          : 'bg-gray-800 hover:bg-gray-700 border-gray-700'
+                      )}
+                    >
+                      <div className="font-bold">{label}</div>
+                      <div className={cn('text-xs mt-1 line-clamp-1', selectedServices.includes(service) ? 'text-white/80' : 'text-gray-400')}>
+                        {FILMING_SERVICE_DESCRIPTIONS[service]}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div className="space-y-3">
+                <Label>Filming Skills * (select at least one)</Label>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                  {SKILL_ENTRIES.map(([skill, label]) => (
+                    <button
+                      key={skill}
+                      type="button"
+                      onClick={() => toggleSkill(skill)}
+                      className={cn(
+                        'p-3 rounded-lg text-left transition-all border text-sm',
+                        selectedSkills.includes(skill)
+                          ? 'bg-purple-500 text-white border-purple-500'
+                          : 'bg-gray-800 hover:bg-gray-700 border-gray-700'
+                      )}
+                    >
+                      <div className="font-bold">{label}</div>
+                      <div className={cn('text-xs mt-1 line-clamp-1', selectedSkills.includes(skill) ? 'text-white/80' : 'text-gray-400')}>
+                        {FILMING_SKILL_DESCRIPTIONS[skill]}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="experience">Years Experience</Label>
+                  <Input id="experience" type="number" placeholder="5" value={experience} onChange={(e) => setExperience(e.target.value)} className="bg-gray-800 border-gray-700" />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="rate">Rate</Label>
+                  <Input id="rate" placeholder="10000 sats/video" value={rate} onChange={(e) => setRate(e.target.value)} className="bg-gray-800 border-gray-700" />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="location">City / Area</Label>
+                <Input id="location" placeholder="Los Angeles, CA" value={location} onChange={(e) => setLocation(e.target.value)} className="bg-gray-800 border-gray-700" />
+              </div>
+
+              <div className="space-y-3">
+                <Label className="text-base font-bold">Contact Information</Label>
+                <p className="text-sm text-gray-400">How clients can reach you (all optional, but recommended)</p>
+
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="phone">Phone Number</Label>
+                    <Input id="phone" type="tel" placeholder="+1 234 567 8900" value={phone} onChange={(e) => setPhone(e.target.value)} className="bg-gray-800 border-gray-700" />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="email">Email</Label>
+                    <Input id="email" type="email" placeholder="filmer@example.com" value={email} onChange={(e) => setEmail(e.target.value)} className="bg-gray-800 border-gray-700" />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="website">Website / Portfolio</Label>
+                    <Input id="website" type="url" placeholder="https://myportfolio.com" value={website} onChange={(e) => setWebsite(e.target.value)} className="bg-gray-800 border-gray-700" />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="social">Social Media</Label>
+                    <Input id="social" placeholder="@username" value={social} onChange={(e) => setSocial(e.target.value)} className="bg-gray-800 border-gray-700" />
+                  </div>
+                </div>
+
+                <div className="p-3 rounded-lg border border-blue-500/30 bg-blue-500/5">
+                  <p className="text-sm text-gray-300">
+                    💬 Clients can message you directly through SkateSpots' encrypted messaging
+                  </p>
+                </div>
+              </div>
+
+              {/* Spot Picker */}
+              <SpotPicker
+                selectedSpots={selectedSpots}
+                onSpotsChange={setSelectedSpots}
+                maxSpots={5}
+                label="Spots Where You Film"
+                description="Select spots where you offer filming services"
+              />
+
+              <div className="space-y-2">
+                <Label>Coordinates (optional)</Label>
+                <div className="grid grid-cols-2 gap-4">
+                  <Input placeholder="Latitude" value={latitude} onChange={(e) => setLatitude(e.target.value)} className="bg-gray-800 border-gray-700" />
+                  <Input placeholder="Longitude" value={longitude} onChange={(e) => setLongitude(e.target.value)} className="bg-gray-800 border-gray-700" />
+                </div>
+                <Button type="button" variant="outline" size="sm" onClick={getCurrentLocation} disabled={isGettingLocation} className="mt-2 border-gray-700">
+                  {isGettingLocation ? <><Loader2 className="h-4 w-4 mr-2 animate-spin" />Getting...</> : <><MapPin className="h-4 w-4 mr-2" />Use current location</>}
+                </Button>
+              </div>
+
+              <div className="space-y-2">
+                <Label>Profile Photo</Label>
+                {image ? (
+                  <div className="relative w-32 h-32 rounded-full overflow-hidden bg-gray-800">
+                    <img src={image} alt="Profile" className="w-full h-full object-cover" />
+                    <button type="button" onClick={() => setImage(null)} className="absolute top-2 right-2 p-1 rounded-full bg-black/80 hover:bg-red-500">
+                      <X className="h-4 w-4" />
+                    </button>
+                  </div>
+                ) : (
+                  <label className="block w-32 h-32 rounded-full border-2 border-dashed border-gray-700 flex flex-col items-center justify-center cursor-pointer hover:bg-gray-800/50">
+                    <input type="file" accept="image/*" className="hidden" onChange={handleImageUpload} disabled={isUploading} />
+                    {isUploading ? <Loader2 className="h-6 w-6 animate-spin" /> : <><Upload className="h-6 w-6 mb-1 text-gray-500" /><span className="text-xs text-gray-500">Upload</span></>}
+                  </label>
+                )}
+              </div>
+
+              <Button 
+                type="submit" 
+                className="w-full bg-red-500 hover:bg-red-600 uppercase font-black" 
+                disabled={isPublishing || isUploading || !hasWallet}
+              >
+                {isPublishing ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Publishing...
+                  </>
+                ) : !hasWallet ? (
+                  <>
+                    <Wallet className="h-4 w-4 mr-2" />
+                    CONNECT WALLET TO CONTINUE
+                  </>
+                ) : (
+                  <>
+                    <Video className="h-4 w-4 mr-2" />
+                    CREATE FILMING PROFILE
+                  </>
+                )}
+              </Button>
+            </CardContent>
+          </Card>
+        </form>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/BountyLeaderboardPage.tsx b/src/src/pages/BountyLeaderboardPage.tsx
new file mode 100644
index 0000000..04cb639
--- /dev/null
+++ b/src/src/pages/BountyLeaderboardPage.tsx
@@ -0,0 +1,483 @@
+import { useMemo } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { Link } from 'react-router-dom';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useSkateShops } from '@/hooks/useSkateShops';
+import { useSkateSpots } from '@/hooks/useSkateSpots';
+import { genUserName } from '@/lib/genUserName';
+import { nip19 } from 'nostr-tools';
+import {
+  Trophy,
+  Medal,
+  Crown,
+  Store,
+  MapPin,
+  Zap,
+  Camera,
+  FileText,
+  Users,
+  ChevronRight,
+  Sparkles,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+// Leaderboard entry component
+function LeaderboardEntry({ 
+  rank, 
+  pubkey, 
+  count, 
+  type,
+  isCurrentUser 
+}: { 
+  rank: number; 
+  pubkey: string; 
+  count: number;
+  type: 'shops' | 'spots' | 'total';
+  isCurrentUser: boolean;
+}) {
+  const author = useAuthor(pubkey);
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(pubkey);
+  const avatar = metadata?.picture;
+
+  // Rank styling
+  const getRankIcon = () => {
+    if (rank === 1) return <Crown className="h-5 w-5 text-yellow-400" />;
+    if (rank === 2) return <Medal className="h-5 w-5 text-gray-300" />;
+    if (rank === 3) return <Medal className="h-5 w-5 text-amber-600" />;
+    return <span className="text-sm font-bold text-gray-500">#{rank}</span>;
+  };
+
+  const getRankBg = () => {
+    if (rank === 1) return 'bg-gradient-to-r from-yellow-950/50 to-orange-950/30 border-yellow-500/50';
+    if (rank === 2) return 'bg-gradient-to-r from-gray-900/50 to-gray-800/30 border-gray-500/50';
+    if (rank === 3) return 'bg-gradient-to-r from-amber-950/50 to-orange-950/30 border-amber-600/50';
+    return 'bg-black/30 border-gray-800';
+  };
+
+  const getTypeLabel = () => {
+    if (type === 'shops') return 'shops';
+    if (type === 'spots') return 'spots';
+    return 'contributions';
+  };
+
+  return (
+    <Link to={`/${nip19.npubEncode(pubkey)}`}>
+      <div className={cn(
+        'flex items-center gap-3 p-3 sm:p-4 rounded-xl border-2 transition-all hover:scale-[1.01]',
+        getRankBg(),
+        isCurrentUser && 'ring-2 ring-[#ff0040] ring-offset-2 ring-offset-black'
+      )}>
+        {/* Rank */}
+        <div className="w-8 h-8 flex items-center justify-center flex-shrink-0">
+          {getRankIcon()}
+        </div>
+
+        {/* Avatar */}
+        <Avatar className="h-10 w-10 sm:h-12 sm:w-12 border-2 border-gray-700 flex-shrink-0">
+          <AvatarImage src={avatar} alt={displayName} />
+          <AvatarFallback className="bg-[#ff0040]/20 text-[#ff0040] text-xs sm:text-sm font-bold">
+            {displayName.slice(0, 2).toUpperCase()}
+          </AvatarFallback>
+        </Avatar>
+
+        {/* Info */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <p className="font-bold text-white truncate text-sm sm:text-base">
+              {displayName}
+            </p>
+            {isCurrentUser && (
+              <Badge className="bg-[#ff0040] text-white text-[10px] px-1.5 py-0">You</Badge>
+            )}
+          </div>
+          <p className="text-xs text-gray-500">
+            {count} {getTypeLabel()}
+          </p>
+        </div>
+
+        {/* Count */}
+        <div className="text-right flex-shrink-0">
+          <p className="text-lg sm:text-xl font-black text-[#ccff00]">{count}</p>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+function LeaderboardSkeleton() {
+  return (
+    <div className="space-y-3">
+      {Array.from({ length: 10 }).map((_, i) => (
+        <div key={i} className="flex items-center gap-3 p-4 rounded-xl bg-black/30 border border-gray-800">
+          <Skeleton className="w-8 h-8 rounded-full" />
+          <Skeleton className="h-12 w-12 rounded-full" />
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-3 w-20" />
+          </div>
+          <Skeleton className="h-6 w-12" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function BountyLeaderboardPage() {
+  useSeoMeta({
+    title: 'Map & Earn - SkateSpots',
+    description: 'Map skate spots and shops, earn zaps from the community. See the top contributors.',
+  });
+
+  const { user } = useCurrentUser();
+  const { data: shops, isLoading: shopsLoading } = useSkateShops(500);
+  const { data: spots, isLoading: spotsLoading } = useSkateSpots(500);
+
+  // Calculate shop leaderboard
+  const shopLeaderboard = useMemo(() => {
+    if (!shops) return [];
+    
+    const countByPubkey: Record<string, number> = {};
+    shops.forEach(shop => {
+      countByPubkey[shop.pubkey] = (countByPubkey[shop.pubkey] || 0) + 1;
+    });
+
+    return Object.entries(countByPubkey)
+      .map(([pubkey, count]) => ({ pubkey, count }))
+      .sort((a, b) => b.count - a.count)
+      .slice(0, 50);
+  }, [shops]);
+
+  // Calculate spot leaderboard
+  const spotLeaderboard = useMemo(() => {
+    if (!spots) return [];
+    
+    const countByPubkey: Record<string, number> = {};
+    spots.forEach(spot => {
+      countByPubkey[spot.pubkey] = (countByPubkey[spot.pubkey] || 0) + 1;
+    });
+
+    return Object.entries(countByPubkey)
+      .map(([pubkey, count]) => ({ pubkey, count }))
+      .sort((a, b) => b.count - a.count)
+      .slice(0, 50);
+  }, [spots]);
+
+  // Combined leaderboard (total contributions)
+  const combinedLeaderboard = useMemo(() => {
+    const combined: Record<string, { shops: number; spots: number; total: number }> = {};
+    
+    shops?.forEach(shop => {
+      if (!combined[shop.pubkey]) combined[shop.pubkey] = { shops: 0, spots: 0, total: 0 };
+      combined[shop.pubkey].shops++;
+      combined[shop.pubkey].total++;
+    });
+    
+    spots?.forEach(spot => {
+      if (!combined[spot.pubkey]) combined[spot.pubkey] = { shops: 0, spots: 0, total: 0 };
+      combined[spot.pubkey].spots++;
+      combined[spot.pubkey].total++;
+    });
+
+    return Object.entries(combined)
+      .map(([pubkey, data]) => ({ pubkey, ...data }))
+      .sort((a, b) => b.total - a.total)
+      .slice(0, 50);
+  }, [shops, spots]);
+
+  // Find user's rank
+  const userCombinedRank = combinedLeaderboard.findIndex(e => e.pubkey === user?.pubkey) + 1;
+  const userContributions = combinedLeaderboard.find(e => e.pubkey === user?.pubkey);
+
+  // Stats
+  const totalShops = shops?.length || 0;
+  const totalSpots = spots?.length || 0;
+  const totalMappers = combinedLeaderboard.length;
+
+  return (
+    <Layout>
+      <div className="container px-4 py-6 sm:py-8 max-w-4xl">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#ccff00]/10 border border-[#ccff00]/30 mb-4">
+            <Zap className="h-5 w-5 text-[#ccff00]" />
+            <span className="text-[#ccff00] font-bold uppercase text-sm">Map & Earn</span>
+          </div>
+          <h1 className="text-3xl sm:text-4xl font-black uppercase mb-3">
+            <span className="neon-lime">HELP MAP THE WORLD</span>
+          </h1>
+          <p className="text-gray-400 max-w-lg mx-auto">
+            Add spots and shops, get zapped by grateful skaters. Top contributors may receive bonus rewards!
+          </p>
+        </div>
+
+        {/* How It Works */}
+        <Card className="mb-8 bg-gradient-to-br from-[#ccff00]/5 to-[#ff0040]/5 border-2 border-[#ccff00]/20">
+          <CardContent className="p-6">
+            <h2 className="text-lg font-black uppercase mb-4 flex items-center gap-2">
+              <Sparkles className="h-5 w-5 text-[#ccff00]" />
+              How It Works
+            </h2>
+            <div className="grid sm:grid-cols-3 gap-4">
+              <div className="p-4 rounded-xl bg-black/40 border border-gray-800">
+                <div className="w-10 h-10 rounded-lg bg-[#ff0040]/20 flex items-center justify-center mb-3">
+                  <MapPin className="h-5 w-5 text-[#ff0040]" />
+                </div>
+                <h3 className="font-bold text-white mb-1">1. Map</h3>
+                <p className="text-xs text-gray-400">
+                  Add spots & shops with photos and details
+                </p>
+              </div>
+              <div className="p-4 rounded-xl bg-black/40 border border-gray-800">
+                <div className="w-10 h-10 rounded-lg bg-[#ccff00]/20 flex items-center justify-center mb-3">
+                  <Zap className="h-5 w-5 text-[#ccff00]" />
+                </div>
+                <h3 className="font-bold text-white mb-1">2. Earn Zaps</h3>
+                <p className="text-xs text-gray-400">
+                  Skaters who find your spots useful will tip you
+                </p>
+              </div>
+              <div className="p-4 rounded-xl bg-black/40 border border-gray-800">
+                <div className="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center mb-3">
+                  <Trophy className="h-5 w-5 text-orange-400" />
+                </div>
+                <h3 className="font-bold text-white mb-1">3. Bonus Rewards</h3>
+                <p className="text-xs text-gray-400">
+                  Top mappers may get bonus rewards from our fund
+                </p>
+              </div>
+            </div>
+
+            {/* Quality Tips */}
+            <div className="mt-4 p-4 rounded-xl bg-black/40 border border-[#ccff00]/20">
+              <p className="text-sm font-bold text-[#ccff00] mb-2">💡 Pro Tips for More Zaps:</p>
+              <div className="flex flex-wrap gap-3 text-xs text-gray-400">
+                <span className="flex items-center gap-1">
+                  <Camera className="h-3 w-3" />
+                  Add 3+ photos
+                </span>
+                <span className="flex items-center gap-1">
+                  <FileText className="h-3 w-3" />
+                  Write detailed descriptions
+                </span>
+                <span className="flex items-center gap-1">
+                  <MapPin className="h-3 w-3" />
+                  Accurate location
+                </span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Quick Actions */}
+        <div className="grid grid-cols-2 gap-3 mb-8">
+          <Link to="/create-shop">
+            <Card className="h-full bg-[#ccff00]/10 border-2 border-[#ccff00]/30 hover:border-[#ccff00]/60 transition-all hover:scale-[1.02] cursor-pointer">
+              <CardContent className="p-4 sm:p-6 text-center">
+                <Store className="h-8 w-8 mx-auto mb-2 text-[#ccff00]" />
+                <h3 className="font-black uppercase text-sm sm:text-base mb-1">Map a Shop</h3>
+                <p className="text-xs text-gray-400 hidden sm:block">Skate shops, board stores</p>
+              </CardContent>
+            </Card>
+          </Link>
+          <Link to="/create-spot">
+            <Card className="h-full bg-[#ff0040]/10 border-2 border-[#ff0040]/30 hover:border-[#ff0040]/60 transition-all hover:scale-[1.02] cursor-pointer">
+              <CardContent className="p-4 sm:p-6 text-center">
+                <MapPin className="h-8 w-8 mx-auto mb-2 text-[#ff0040]" />
+                <h3 className="font-black uppercase text-sm sm:text-base mb-1">Map a Spot</h3>
+                <p className="text-xs text-gray-400 hidden sm:block">Parks, street spots, DIY</p>
+              </CardContent>
+            </Card>
+          </Link>
+        </div>
+
+        {/* Stats */}
+        <div className="grid grid-cols-3 gap-3 mb-6">
+          <Card className="bg-[#ccff00]/10 border-[#ccff00]/30">
+            <CardContent className="p-3 sm:p-4 text-center">
+              <Store className="h-5 w-5 mx-auto mb-1 text-[#ccff00]" />
+              <p className="text-xl sm:text-2xl font-black text-white">{totalShops}</p>
+              <p className="text-[10px] sm:text-xs text-gray-400 uppercase">Shops</p>
+            </CardContent>
+          </Card>
+          <Card className="bg-[#ff0040]/10 border-[#ff0040]/30">
+            <CardContent className="p-3 sm:p-4 text-center">
+              <MapPin className="h-5 w-5 mx-auto mb-1 text-[#ff0040]" />
+              <p className="text-xl sm:text-2xl font-black text-white">{totalSpots}</p>
+              <p className="text-[10px] sm:text-xs text-gray-400 uppercase">Spots</p>
+            </CardContent>
+          </Card>
+          <Card className="bg-orange-500/10 border-orange-500/30">
+            <CardContent className="p-3 sm:p-4 text-center">
+              <Users className="h-5 w-5 mx-auto mb-1 text-orange-400" />
+              <p className="text-xl sm:text-2xl font-black text-white">{totalMappers}</p>
+              <p className="text-[10px] sm:text-xs text-gray-400 uppercase">Mappers</p>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* User's position (if logged in and has contributions) */}
+        {user && userCombinedRank > 0 && userContributions && (
+          <Card className="mb-6 bg-gradient-to-r from-[#ff0040]/20 to-[#ccff00]/10 border-2 border-[#ff0040]/50">
+            <CardContent className="p-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <div className="w-12 h-12 rounded-full bg-[#ff0040]/20 flex items-center justify-center">
+                    <span className="text-lg font-black text-[#ff0040]">#{userCombinedRank}</span>
+                  </div>
+                  <div>
+                    <p className="font-bold text-white">Your Ranking</p>
+                    <p className="text-sm text-gray-400">
+                      {userContributions.spots} spots • {userContributions.shops} shops
+                    </p>
+                  </div>
+                </div>
+                <div className="text-right">
+                  <p className="text-2xl font-black text-[#ccff00]">{userContributions.total}</p>
+                  <p className="text-xs text-gray-500">total</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Leaderboard */}
+        <div className="mb-4">
+          <h2 className="text-xl font-black uppercase flex items-center gap-2">
+            <Trophy className="h-5 w-5 text-yellow-400" />
+            Top Mappers
+          </h2>
+        </div>
+
+        <Tabs defaultValue="combined" className="space-y-4">
+          <TabsList className="grid w-full grid-cols-3 bg-black/50 border border-gray-800">
+            <TabsTrigger value="combined" className="gap-1.5 text-xs sm:text-sm">
+              <Trophy className="h-4 w-4" />
+              <span className="hidden sm:inline">Overall</span>
+            </TabsTrigger>
+            <TabsTrigger value="shops" className="gap-1.5 text-xs sm:text-sm">
+              <Store className="h-4 w-4" />
+              Shops
+            </TabsTrigger>
+            <TabsTrigger value="spots" className="gap-1.5 text-xs sm:text-sm">
+              <MapPin className="h-4 w-4" />
+              Spots
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="combined">
+            {shopsLoading || spotsLoading ? (
+              <LeaderboardSkeleton />
+            ) : combinedLeaderboard.length > 0 ? (
+              <div className="space-y-2">
+                {combinedLeaderboard.slice(0, 20).map((entry, i) => (
+                  <LeaderboardEntry
+                    key={entry.pubkey}
+                    rank={i + 1}
+                    pubkey={entry.pubkey}
+                    count={entry.total}
+                    type="total"
+                    isCurrentUser={entry.pubkey === user?.pubkey}
+                  />
+                ))}
+              </div>
+            ) : (
+              <Card className="border-dashed border-2 border-gray-700">
+                <CardContent className="py-12 text-center">
+                  <Trophy className="h-12 w-12 mx-auto mb-4 text-gray-600" />
+                  <p className="text-gray-400 mb-4">No contributions yet. Be the first!</p>
+                  <Link to="/create-spot">
+                    <Button className="bg-[#ff0040] hover:bg-[#ff0040]/90 text-white font-bold">
+                      Add First Spot
+                    </Button>
+                  </Link>
+                </CardContent>
+              </Card>
+            )}
+          </TabsContent>
+
+          <TabsContent value="shops">
+            {shopsLoading ? (
+              <LeaderboardSkeleton />
+            ) : shopLeaderboard.length > 0 ? (
+              <div className="space-y-2">
+                {shopLeaderboard.slice(0, 20).map((entry, i) => (
+                  <LeaderboardEntry
+                    key={entry.pubkey}
+                    rank={i + 1}
+                    pubkey={entry.pubkey}
+                    count={entry.count}
+                    type="shops"
+                    isCurrentUser={entry.pubkey === user?.pubkey}
+                  />
+                ))}
+              </div>
+            ) : (
+              <Card className="border-dashed border-2 border-gray-700">
+                <CardContent className="py-12 text-center">
+                  <Store className="h-12 w-12 mx-auto mb-4 text-gray-600" />
+                  <p className="text-gray-400 mb-4">No shops mapped yet</p>
+                  <Link to="/create-shop">
+                    <Button className="bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold">
+                      Add First Shop
+                    </Button>
+                  </Link>
+                </CardContent>
+              </Card>
+            )}
+          </TabsContent>
+
+          <TabsContent value="spots">
+            {spotsLoading ? (
+              <LeaderboardSkeleton />
+            ) : spotLeaderboard.length > 0 ? (
+              <div className="space-y-2">
+                {spotLeaderboard.slice(0, 20).map((entry, i) => (
+                  <LeaderboardEntry
+                    key={entry.pubkey}
+                    rank={i + 1}
+                    pubkey={entry.pubkey}
+                    count={entry.count}
+                    type="spots"
+                    isCurrentUser={entry.pubkey === user?.pubkey}
+                  />
+                ))}
+              </div>
+            ) : (
+              <Card className="border-dashed border-2 border-gray-700">
+                <CardContent className="py-12 text-center">
+                  <MapPin className="h-12 w-12 mx-auto mb-4 text-gray-600" />
+                  <p className="text-gray-400 mb-4">No spots mapped yet</p>
+                  <Link to="/create-spot">
+                    <Button className="bg-[#ff0040] hover:bg-[#ff0040]/90 text-white font-bold">
+                      Add First Spot
+                    </Button>
+                  </Link>
+                </CardContent>
+              </Card>
+            )}
+          </TabsContent>
+        </Tabs>
+
+        {/* Community Note */}
+        <Card className="mt-8 bg-gray-900/50 border-gray-800">
+          <CardContent className="p-4 sm:p-6 text-center">
+            <Zap className="h-8 w-8 mx-auto mb-3 text-yellow-400" />
+            <h3 className="font-bold text-white mb-2">Powered by Community Zaps</h3>
+            <p className="text-sm text-gray-400 max-w-md mx-auto">
+              When you find a spot helpful, zap the mapper! It's the best way to say thanks and encourage more contributions.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/CoachDetailPage.tsx b/src/src/pages/CoachDetailPage.tsx
new file mode 100644
index 0000000..2c012c8
--- /dev/null
+++ b/src/src/pages/CoachDetailPage.tsx
@@ -0,0 +1,287 @@
+import { useSeoMeta } from '@unhead/react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ZapButton } from '@/components/ZapButton';
+import { TrustBadge } from '@/components/TrustBadge';
+import { useLabProfile } from '@/hooks/useLabProfiles';
+import { useAuthor } from '@/hooks/useAuthor';
+import { genUserName } from '@/lib/genUserName';
+import { COACH_SKILL_LABELS, COACH_SKILL_DESCRIPTIONS, FILMING_SERVICE_LABELS, FILMING_SERVICE_DESCRIPTIONS, FILMING_SKILL_LABELS, FILMING_SKILL_DESCRIPTIONS } from '@/lib/types';
+import NotFound from './NotFound';
+import {
+  GraduationCap,
+  MapPin,
+  ArrowLeft,
+  MessageCircle,
+  Mail,
+  Phone,
+  Globe,
+  Instagram,
+  Calendar,
+  Video,
+} from 'lucide-react';
+import { nip19 } from 'nostr-tools';
+
+function CoachDetailSkeleton() {
+  return (
+    <Layout>
+      <div className="container px-4 py-8 max-w-4xl">
+        <Skeleton className="h-6 w-32 mb-6" />
+        <div className="grid md:grid-cols-3 gap-6">
+          <div className="md:col-span-2 space-y-6">
+            <Card>
+              <CardContent className="pt-6">
+                <div className="flex items-start gap-4">
+                  <Skeleton className="h-20 w-20 rounded-full" />
+                  <div className="flex-1 space-y-2">
+                    <Skeleton className="h-8 w-48" />
+                    <Skeleton className="h-4 w-32" />
+                  </div>
+                </div>
+                <Skeleton className="h-24 w-full mt-4" />
+              </CardContent>
+            </Card>
+          </div>
+          <div>
+            <Skeleton className="h-64 w-full" />
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+export default function CoachDetailPage() {
+  const { pubkey, identifier } = useParams<{ pubkey: string; identifier: string }>();
+  const { data: profile, isLoading, error } = useLabProfile(identifier || '', pubkey);
+  const author = useAuthor(profile?.pubkey);
+  const navigate = useNavigate();
+
+  const isCoach = profile?.profileType === 'coach';
+  const isFilmer = profile?.profileType === 'filmer';
+
+  useSeoMeta({
+    title: profile ? `${profile.title} - SkateSpots` : 'Profile - SkateSpots',
+    description: profile?.bio || 'View profile.',
+  });
+
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(profile?.pubkey || '');
+
+  if (isLoading) {
+    return <CoachDetailSkeleton />;
+  }
+
+  if (error || !profile) {
+    return <NotFound />;
+  }
+
+  const npub = nip19.npubEncode(profile.pubkey);
+
+  // Get skill labels and descriptions based on profile type
+  const getSkillLabel = (skill: string) => {
+    if (isCoach) return COACH_SKILL_LABELS[skill] || skill;
+    if (isFilmer) return FILMING_SERVICE_LABELS[skill] || FILMING_SKILL_LABELS[skill] || skill;
+    return skill;
+  };
+
+  const getSkillDescription = (skill: string) => {
+    if (isCoach) return COACH_SKILL_DESCRIPTIONS[skill];
+    if (isFilmer) return FILMING_SERVICE_DESCRIPTIONS[skill] || FILMING_SKILL_DESCRIPTIONS[skill];
+    return undefined;
+  };
+
+  return (
+    <Layout>
+      <div className="container px-4 py-8 max-w-4xl">
+        <Link
+          to="/lab"
+          className="inline-flex items-center text-muted-foreground hover:text-foreground transition-colors mb-6"
+        >
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Back to The Lab
+        </Link>
+
+        <div className="grid md:grid-cols-3 gap-6">
+          {/* Main Content */}
+          <div className="md:col-span-2 space-y-6">
+            {/* Profile Card */}
+            <Card className={`bg-black/90 border-2 ${isCoach ? 'border-[#ff0040]/30' : 'border-orange-500/30'}`}>
+              <CardContent className="pt-6">
+                <div className="flex items-start gap-4 mb-6">
+                  <Avatar className="h-20 w-20">
+                    <AvatarImage src={profile.image || metadata?.picture} alt={profile.title} />
+                    <AvatarFallback className={`${isCoach ? 'bg-[#ff0040]' : 'bg-orange-500'} text-white text-2xl`}>
+                      {profile.title.slice(0, 2).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2 mb-2 flex-wrap">
+                      <h1 className={`text-3xl font-black uppercase ${isCoach ? 'text-[#ff0040]' : 'text-orange-500'}`} style={{
+                        fontFamily: 'Impact, "Arial Black", sans-serif'
+                      }}>
+                        {profile.title}
+                      </h1>
+                      {isCoach && <GraduationCap className="h-7 w-7 text-[#ff0040]" />}
+                      {isFilmer && <Video className="h-7 w-7 text-orange-500" />}
+                      <TrustBadge pubkey={profile.pubkey} size="md" />
+                    </div>
+                    <p className="text-gray-400 flex items-center gap-2">
+                      <Calendar className="h-4 w-4" />
+                      Joined {new Date(profile.createdAt * 1000).toLocaleDateString()}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Bio */}
+                {profile.bio && (
+                  <div className="mb-6">
+                    <h3 className="text-lg font-bold text-[#ccff00] uppercase mb-2">About</h3>
+                    <p className="text-gray-300 whitespace-pre-wrap">{profile.bio}</p>
+                  </div>
+                )}
+
+                {/* Skills */}
+                {profile.skills.length > 0 && (
+                  <div className="mb-6">
+                    <h3 className="text-lg font-bold text-[#ccff00] uppercase mb-3">
+                      {isCoach ? 'Skills' : 'Services & Skills'}
+                    </h3>
+                    <div className="space-y-3">
+                      {profile.skills.map((skill) => (
+                        <div key={skill} className={`bg-black/50 border rounded-lg p-3 ${isCoach ? 'border-[#ff0040]/30' : 'border-orange-500/30'}`}>
+                          <div className="flex items-start gap-3">
+                            <Badge className={`${isCoach ? 'bg-[#ff0040]' : 'bg-orange-500'} text-white font-bold`}>
+                              {getSkillLabel(skill)}
+                            </Badge>
+                            {getSkillDescription(skill) && (
+                              <p className="text-sm text-gray-400 flex-1">
+                                {getSkillDescription(skill)}
+                              </p>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Experience & Rate */}
+                <div className="grid grid-cols-2 gap-4">
+                  {profile.experience && (
+                    <div>
+                      <h4 className="text-sm font-bold text-[#ccff00] uppercase mb-1">Experience</h4>
+                      <p className="text-gray-300">{profile.experience} years</p>
+                    </div>
+                  )}
+                  {profile.rate && (
+                    <div>
+                      <h4 className="text-sm font-bold text-[#ccff00] uppercase mb-1">Rate</h4>
+                      <p className="text-gray-300">{profile.rate}</p>
+                    </div>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-6">
+            {/* Contact Card */}
+            <Card className="bg-black/90 border-2 border-[#ccff00]/50">
+              <CardHeader>
+                <CardTitle className="text-lg text-[#ccff00] uppercase font-black flex items-center gap-2">
+                  <MessageCircle className="h-5 w-5" />
+                  Contact
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                {/* Direct Message */}
+                <Button 
+                  variant="outline" 
+                  className="w-full gap-2 border-[#ff0040] hover:bg-[#ff0040]/10 text-white"
+                  onClick={() => navigate(`/messages/${npub}`)}
+                >
+                  <MessageCircle className="h-4 w-4" />
+                  Send Message
+                </Button>
+
+                {/* Contact Info from Profile */}
+                {profile.phone && (
+                  <a href={`tel:${profile.phone}`} className="flex items-center gap-2 text-sm text-gray-300 p-2 bg-black/50 rounded hover:bg-black/70 transition-colors">
+                    <Phone className="h-4 w-4 text-[#ccff00]" />
+                    <span className="truncate">{profile.phone}</span>
+                  </a>
+                )}
+
+                {profile.email && (
+                  <a href={`mailto:${profile.email}`} className="flex items-center gap-2 text-sm text-gray-300 p-2 bg-black/50 rounded hover:bg-black/70 transition-colors">
+                    <Mail className="h-4 w-4 text-[#ccff00]" />
+                    <span className="truncate">{profile.email}</span>
+                  </a>
+                )}
+
+                {profile.website && (
+                  <a href={profile.website} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-sm text-gray-300 p-2 bg-black/50 rounded hover:bg-black/70 transition-colors">
+                    <Globe className="h-4 w-4 text-[#ccff00]" />
+                    <span className="truncate">{profile.website.replace(/^https?:\/\//, '')}</span>
+                  </a>
+                )}
+
+                {isCoach && profile.instagram && (
+                  <a href={`https://instagram.com/${profile.instagram.replace('@', '')}`} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-sm text-gray-300 p-2 bg-black/50 rounded hover:bg-black/70 transition-colors">
+                    <Instagram className="h-4 w-4 text-[#ccff00]" />
+                    <span className="truncate">@{profile.instagram.replace('@', '')}</span>
+                  </a>
+                )}
+
+                {isFilmer && profile.social && (
+                  <a href={profile.social.startsWith('http') ? profile.social : `https://${profile.social}`} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-sm text-gray-300 p-2 bg-black/50 rounded hover:bg-black/70 transition-colors">
+                    <Globe className="h-4 w-4 text-[#ccff00]" />
+                    <span className="truncate">{profile.social.replace(/^https?:\/\//, '')}</span>
+                  </a>
+                )}
+
+                {/* Lightning Address from Nostr Profile */}
+                {metadata?.lud16 && (
+                  <div className="flex items-center gap-2 text-sm text-gray-300 p-2 bg-black/50 rounded">
+                    <Mail className="h-4 w-4 text-[#ccff00]" />
+                    <span className="truncate">{metadata.lud16}</span>
+                  </div>
+                )}
+
+                {/* Zap Button */}
+                <div className="pt-3 border-t border-gray-700">
+                  <ZapButton
+                    target={profile.event}
+                    className="w-full justify-center"
+                  />
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Location Card */}
+            {profile.location && (
+              <Card className="bg-black/90 border-2 border-gray-700">
+                <CardHeader>
+                  <CardTitle className="text-lg text-white uppercase font-black flex items-center gap-2">
+                    <MapPin className={`h-5 w-5 ${isCoach ? 'text-[#ff0040]' : 'text-orange-500'}`} />
+                    Location
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-gray-300">{profile.location}</p>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/CollectionDetailPage.tsx b/src/src/pages/CollectionDetailPage.tsx
new file mode 100644
index 0000000..2f48a5b
--- /dev/null
+++ b/src/src/pages/CollectionDetailPage.tsx
@@ -0,0 +1,401 @@
+import { useMemo } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { useSeoMeta } from '@unhead/react';
+import { useNostr } from '@nostrify/react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { Layout } from '@/components/Layout';
+import { SpotCard, SpotCardSkeleton } from '@/components/SpotCard';
+import { SpotMap } from '@/components/SpotMap';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Badge } from '@/components/ui/badge';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { useToast } from '@/hooks/useToast';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useAppContext } from '@/hooks/useAppContext';
+import {
+  useSpotCollection,
+  useRemoveSpotFromCollection,
+  useDeleteSpotCollection,
+} from '@/hooks/useSpotCollections';
+import { SKATE_SPOT_KIND, parseSkateSpot, type SkateSpot } from '@/lib/types';
+import {
+  ArrowLeft,
+  FolderOpen,
+  MapPin,
+  Calendar,
+  Trash2,
+  X,
+  Share2,
+  Loader2,
+  AlertTriangle,
+} from 'lucide-react';
+import NotFound from './NotFound';
+import { useState } from 'react';
+
+function CollectionDetailSkeleton() {
+  return (
+    <Layout>
+      <div className="container px-4 py-8">
+        <Skeleton className="h-6 w-32 mb-6" />
+        <div className="space-y-6">
+          <Skeleton className="h-12 w-3/4" />
+          <Skeleton className="h-6 w-1/2" />
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <SpotCardSkeleton key={i} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+export default function CollectionDetailPage() {
+  const { pubkey, identifier } = useParams<{ pubkey: string; identifier: string }>();
+  const { data: collection, isLoading, error } = useSpotCollection(identifier || '', pubkey);
+  const { user } = useCurrentUser();
+  const { nostr } = useNostr();
+  const { config } = useAppContext();
+  const { removeSpotFromCollection, isPending: isRemoving } = useRemoveSpotFromCollection();
+  const { deleteCollection, isPending: isDeleting } = useDeleteSpotCollection();
+  const { toast } = useToast();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [removingSpotId, setRemovingSpotId] = useState<string | null>(null);
+
+  const isOwner = user && collection && user.pubkey === collection.pubkey;
+
+  useSeoMeta({
+    title: collection ? `${collection.title} - SkateSpots Collection` : 'Spot Collection - SkateSpots',
+    description: collection?.description || 'A curated collection of skate spots',
+  });
+
+  // Fetch all spots referenced in the collection
+  const { data: spots, isLoading: isSpotsLoading } = useQuery({
+    queryKey: ['collection-spots', collection?.id, collection?.spotRefs],
+    queryFn: async (c) => {
+      if (!collection || collection.spotRefs.length === 0) return [];
+
+      const signal = AbortSignal.any([c.signal, AbortSignal.timeout(15000)]);
+      const readRelays = config.relayMetadata.relays
+        .filter(r => r.read)
+        .map(r => r.url);
+
+      // Parse spot references to build filters
+      const spotFilters = collection.spotRefs.map((ref) => {
+        const [kind, pubkey, d] = ref.split(':');
+        return { kind: parseInt(kind), pubkey, d };
+      }).filter(f => f.kind === SKATE_SPOT_KIND);
+
+      if (spotFilters.length === 0) return [];
+
+      const allEvents: any[] = [];
+
+      // Query each relay for all spots
+      for (const relayUrl of readRelays) {
+        try {
+          const relay = nostr.relay(relayUrl);
+          // Query each spot individually (addressable events need specific filters)
+          for (const filter of spotFilters) {
+            const events = await relay.query(
+              [{
+                kinds: [SKATE_SPOT_KIND],
+                authors: [filter.pubkey],
+                '#d': [filter.d],
+                limit: 1,
+              }],
+              { signal }
+            );
+            allEvents.push(...events);
+          }
+        } catch (error) {
+          console.warn(`[CollectionDetail] Failed to query relay ${relayUrl}:`, error);
+        }
+      }
+
+      // Deduplicate by event id
+      const eventMap = new Map<string, typeof allEvents[0]>();
+      for (const event of allEvents) {
+        const d = event.tags.find(([name]: [string]) => name === 'd')?.[1];
+        if (d) {
+          const key = `${event.pubkey}:${event.kind}:${d}`;
+          const existing = eventMap.get(key);
+          if (!existing || event.created_at > existing.created_at) {
+            eventMap.set(key, event);
+          }
+        }
+      }
+
+      const spots: SkateSpot[] = [];
+      for (const event of Array.from(eventMap.values())) {
+        const spot = parseSkateSpot(event);
+        if (spot) spots.push(spot);
+      }
+
+      return spots;
+    },
+    enabled: !!collection && collection.spotRefs.length > 0,
+    staleTime: 30000,
+  });
+
+  const handleRemoveSpot = async (spot: SkateSpot) => {
+    if (!collection || !isOwner) return;
+
+    setRemovingSpotId(spot.id);
+    try {
+      await removeSpotFromCollection({
+        collection,
+        spotPubkey: spot.pubkey,
+        spotIdentifier: spot.identifier,
+      });
+      toast({
+        title: 'Spot removed',
+        description: `"${spot.title}" has been removed from this collection`,
+      });
+    } catch (error) {
+      toast({
+        title: 'Failed to remove spot',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+    } finally {
+      setRemovingSpotId(null);
+    }
+  };
+
+  const handleDeleteCollection = async () => {
+    if (!collection) return;
+
+    try {
+      await deleteCollection(collection);
+      toast({
+        title: 'Collection deleted',
+        description: `"${collection.title}" has been removed`,
+      });
+      navigate('/collections');
+    } catch (error) {
+      toast({
+        title: 'Failed to delete collection',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+    }
+    setShowDeleteDialog(false);
+  };
+
+  const handleShare = async () => {
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title: collection?.title,
+          text: collection?.description || `Check out this spot collection: ${collection?.title}`,
+          url: window.location.href,
+        });
+      } catch {
+        // User cancelled or share failed
+      }
+    } else {
+      navigator.clipboard.writeText(window.location.href);
+      toast({
+        title: 'Link copied!',
+        description: 'Collection link has been copied to clipboard',
+      });
+    }
+  };
+
+  if (isLoading) {
+    return <CollectionDetailSkeleton />;
+  }
+
+  if (error || !collection) {
+    return <NotFound />;
+  }
+
+  return (
+    <Layout>
+      <div className="container px-4 py-4 sm:py-8">
+        {/* Back link */}
+        <Link
+          to="/collections"
+          className="inline-flex items-center text-muted-foreground hover:text-foreground transition-colors mb-4 sm:mb-6 text-sm"
+        >
+          <ArrowLeft className="h-4 w-4 mr-1.5 sm:mr-2" />
+          Back to Collections
+        </Link>
+
+        {/* Header */}
+        <div className="flex flex-col gap-4 mb-6 sm:mb-8">
+          <div className="flex items-start justify-between gap-3">
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2 sm:gap-3 mb-1 sm:mb-2">
+                <FolderOpen className="h-6 w-6 sm:h-8 sm:w-8 text-[#ccff00] flex-shrink-0" />
+                <h1 className="text-xl sm:text-3xl font-black uppercase tracking-wider text-white truncate">
+                  {collection.title}
+                </h1>
+              </div>
+              {collection.description && (
+                <p className="text-gray-400 mt-1 sm:mt-2 max-w-2xl text-sm sm:text-base">
+                  {collection.description}
+                </p>
+              )}
+            </div>
+
+            <div className="flex items-center gap-1.5 sm:gap-2 flex-shrink-0">
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={handleShare}
+                className="border-gray-700 h-9 w-9 sm:h-10 sm:w-10"
+              >
+                <Share2 className="h-4 w-4" />
+              </Button>
+              {isOwner && (
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() => setShowDeleteDialog(true)}
+                  className="border-red-500/50 hover:bg-red-500/10 hover:text-red-500 h-9 w-9 sm:h-10 sm:w-10"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
+          </div>
+          
+          <div className="flex flex-wrap items-center gap-2 sm:gap-4 text-xs sm:text-sm text-gray-500">
+            <Badge variant="outline" className="border-[#ccff00]/50 text-[#ccff00]">
+              <MapPin className="h-2.5 w-2.5 sm:h-3 sm:w-3 mr-1" />
+              {collection.spotRefs.length} spot{collection.spotRefs.length !== 1 ? 's' : ''}
+            </Badge>
+            <span className="flex items-center gap-1">
+              <Calendar className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
+              Created {new Date(collection.createdAt * 1000).toLocaleDateString()}
+            </span>
+          </div>
+        </div>
+
+        {/* Map showing all spots */}
+        {spots && spots.length > 0 && (
+          <Card className="mb-6 sm:mb-8 border-2 border-[#ccff00]/30">
+            <CardHeader className="p-3 sm:p-6 pb-2 sm:pb-4">
+              <CardTitle className="text-base sm:text-lg flex items-center gap-2">
+                <MapPin className="h-4 w-4 sm:h-5 sm:w-5 text-[#ccff00]" />
+                Collection Map
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="p-3 sm:p-6 pt-0">
+              <div className="aspect-[4/3] sm:aspect-[2/1] rounded-lg overflow-hidden">
+                <SpotMap
+                  spots={spots}
+                  className="h-full"
+                  zoom={5}
+                />
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Spots grid */}
+        {isSpotsLoading ? (
+          <div className="grid gap-4 sm:gap-6 grid-cols-2 lg:grid-cols-3">
+            {Array.from({ length: collection.spotRefs.length || 3 }).map((_, i) => (
+              <SpotCardSkeleton key={i} />
+            ))}
+          </div>
+        ) : spots && spots.length > 0 ? (
+          <div className="grid gap-4 sm:gap-6 grid-cols-2 lg:grid-cols-3">
+            {spots.map((spot) => (
+              <div key={spot.id} className="relative group">
+                <SpotCard spot={spot} />
+                {isOwner && (
+                  <Button
+                    size="icon"
+                    variant="destructive"
+                    className="absolute top-2 right-2 h-8 w-8 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity z-10 touch-manipulation"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleRemoveSpot(spot);
+                    }}
+                    disabled={isRemoving}
+                  >
+                    {removingSpotId === spot.id ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <X className="h-4 w-4" />
+                    )}
+                  </Button>
+                )}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <Card className="border-dashed border-2 border-gray-700">
+            <CardContent className="py-16 text-center">
+              <MapPin className="h-16 w-16 mx-auto mb-4 text-gray-600" />
+              <h2 className="text-xl font-bold mb-2">No spots in this collection</h2>
+              <p className="text-gray-400 mb-6">
+                {isOwner 
+                  ? 'Add spots to your collection by clicking "Save to Collection" on any spot'
+                  : 'This collection is empty'}
+              </p>
+              {isOwner && (
+                <Link to="/map">
+                  <Button className="bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold uppercase">
+                    Browse Spots
+                  </Button>
+                </Link>
+              )}
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent className="bg-black border-2 border-red-500/50 mx-4 max-w-[calc(100vw-2rem)] sm:max-w-lg">
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-white flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-red-500" />
+              Delete Collection?
+            </AlertDialogTitle>
+            <AlertDialogDescription className="text-gray-400 text-sm">
+              This will permanently delete "{collection.title}". The spots themselves won't be affected.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter className="flex-col sm:flex-row gap-2 sm:gap-0">
+            <AlertDialogCancel className="border-gray-700 h-11 sm:h-auto">Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteCollection}
+              disabled={isDeleting}
+              className="bg-red-500 hover:bg-red-600 text-white h-11 sm:h-auto"
+            >
+              {isDeleting ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Deleting...
+                </>
+              ) : (
+                'Delete'
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/CommunityStatsPage.tsx b/src/src/pages/CommunityStatsPage.tsx
new file mode 100644
index 0000000..9d32a52
--- /dev/null
+++ b/src/src/pages/CommunityStatsPage.tsx
@@ -0,0 +1,520 @@
+import { useMemo } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { Link } from 'react-router-dom';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useSkateSpots } from '@/hooks/useSkateSpots';
+import { useSkateEvents } from '@/hooks/useSkateEvents';
+import { useLabProfiles } from '@/hooks/useLabProfiles';
+import { useShops } from '@/hooks/useShops';
+import { useBatchTrustScores } from '@/hooks/useBatchTrustScores';
+import { useSkateRelays } from '@/hooks/useSkateRelays';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  Legend,
+} from 'recharts';
+import {
+  TrendingUp,
+  Users,
+  Shield,
+  CheckCircle2,
+  AlertCircle,
+  MapPin,
+  Calendar,
+  GraduationCap,
+  Store,
+  Radio,
+} from 'lucide-react';
+
+const TRUST_COLORS = {
+  verified: '#22c55e',    // green-500
+  trusted: '#eab308',     // yellow-500
+  unverified: '#6b7280',  // gray-500
+};
+
+export default function CommunityStatsPage() {
+  useSeoMeta({
+    title: 'Community Stats - SkateSpots',
+    description: 'View trust analytics and community statistics for the SkateSpots community.',
+  });
+
+  // Call all hooks unconditionally at the top
+  const { getReadRelays, isLoggedIn } = useSkateRelays();
+  const relays = getReadRelays();
+
+  const { data: spots, isLoading: spotsLoading } = useSkateSpots(500);
+  const { data: events, isLoading: eventsLoading } = useSkateEvents(500);
+  const { data: profiles, isLoading: profilesLoading } = useLabProfiles(500);
+  const { data: shops, isLoading: shopsLoading } = useShops(500);
+
+  // Combine all unique pubkeys
+  const allPubkeys = useMemo(() => {
+    const pubkeySet = new Set<string>();
+    spots?.forEach((s) => pubkeySet.add(s.pubkey));
+    events?.forEach((e) => pubkeySet.add(e.pubkey));
+    profiles?.forEach((p) => pubkeySet.add(p.pubkey));
+    shops?.forEach((s) => pubkeySet.add(s.pubkey));
+    return Array.from(pubkeySet);
+  }, [spots, events, profiles, shops]);
+
+  const { data: trustScores, isLoading: trustLoading } = useBatchTrustScores(allPubkeys);
+
+  const isLoading = spotsLoading || eventsLoading || profilesLoading || shopsLoading || trustLoading;
+
+  // Calculate trust distribution
+  const trustDistribution = useMemo(() => {
+    if (!trustScores) return { verified: 0, trusted: 0, unverified: 0 };
+
+    const distribution = {
+      verified: 0,   // score >= 90
+      trusted: 0,    // score >= 60 && score < 90
+      unverified: 0, // score < 60
+    };
+
+    Array.from(trustScores.values()).forEach((score) => {
+      if (score >= 90) distribution.verified++;
+      else if (score >= 60) distribution.trusted++;
+      else distribution.unverified++;
+    });
+
+    return distribution;
+  }, [trustScores]);
+
+  // Calculate content by trust level
+  const contentByTrust = useMemo(() => {
+    if (!trustScores) return { verified: 0, trusted: 0, unverified: 0 };
+
+    const spotsByTrust = { verified: 0, trusted: 0, unverified: 0 };
+    spots?.forEach((spot) => {
+      const score = trustScores.get(spot.pubkey) || 0;
+      if (score >= 90) spotsByTrust.verified++;
+      else if (score >= 60) spotsByTrust.trusted++;
+      else spotsByTrust.unverified++;
+    });
+
+    return spotsByTrust;
+  }, [spots, trustScores]);
+
+  // Prepare chart data
+  const trustDistributionData = [
+    { name: 'Verified', value: trustDistribution.verified, color: TRUST_COLORS.verified },
+    { name: 'Trusted', value: trustDistribution.trusted, color: TRUST_COLORS.trusted },
+    { name: 'Unverified', value: trustDistribution.unverified, color: TRUST_COLORS.unverified },
+  ];
+
+  const contentByTrustData = [
+    { category: 'Verified', spots: contentByTrust.verified },
+    { category: 'Trusted', spots: contentByTrust.trusted },
+    { category: 'Unverified', spots: contentByTrust.unverified },
+  ];
+
+  const totalContributors = allPubkeys.length;
+  const totalContent = (spots?.length || 0) + (events?.length || 0) + (profiles?.length || 0) + (shops?.length || 0);
+  const verifiedPercentage = totalContributors > 0 ? ((trustDistribution.verified / totalContributors) * 100).toFixed(1) : '0';
+  const trustedPercentage = totalContributors > 0 ? (((trustDistribution.verified + trustDistribution.trusted) / totalContributors) * 100).toFixed(1) : '0';
+
+  if (isLoading) {
+    return (
+      <Layout>
+        <div className="container px-4 py-12 max-w-6xl">
+          <Skeleton className="h-12 w-64 mb-8" />
+          <div className="grid md:grid-cols-3 gap-6 mb-8">
+            {Array.from({ length: 3 }).map((_, i) => (
+              <Card key={i}>
+                <CardContent className="pt-6">
+                  <Skeleton className="h-24 w-full" />
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+          <div className="grid md:grid-cols-2 gap-6">
+            {Array.from({ length: 2 }).map((_, i) => (
+              <Card key={i}>
+                <CardContent className="pt-6">
+                  <Skeleton className="h-64 w-full" />
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="container px-4 py-12 max-w-6xl">
+        {/* Header */}
+        <div className="mb-12 text-center">
+          <h1 className="text-4xl md:text-6xl font-black uppercase mb-4 gradient-text" style={{
+            fontFamily: 'Impact, "Arial Black", sans-serif',
+            letterSpacing: '0.05em'
+          }}>
+            Community Stats
+          </h1>
+          <p className="text-xl text-gray-400 max-w-2xl mx-auto">
+            Trust analytics and community metrics for the SkateSpots network
+          </p>
+        </div>
+
+        {/* Relay Info Notice */}
+        <div className="mb-8 p-4 rounded-lg bg-gray-900/50 border border-gray-700 flex items-start gap-3">
+          <Radio className="h-5 w-5 text-gray-400 mt-0.5 flex-shrink-0" />
+          <div className="text-sm text-gray-400">
+            <p>
+              <span className="text-gray-300 font-medium">Data source:</span>{' '}
+              {relays.length === 1 ? (
+                <>Querying <span className="text-[#ccff00] font-mono text-xs">{relays[0].replace('wss://', '')}</span></>
+              ) : (
+                <>Querying {relays.length} relays</>
+              )}
+              {isLoggedIn && (
+                <>
+                  {' '}—{' '}
+                  <Link to="/settings?tab=relays" className="text-[#ccff00] hover:underline">
+                    Manage relays
+                  </Link>
+                </>
+              )}
+            </p>
+            {!isLoggedIn && (
+              <p className="mt-1 text-xs text-gray-500">
+                Log in to customize which relays to query
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Key Metrics */}
+        <div className="grid md:grid-cols-3 gap-6 mb-8">
+          {/* Total Contributors */}
+          <Card className="bg-black/90 border-2 border-[#ff0040]/30">
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm text-gray-400 uppercase font-bold mb-2">Total Contributors</p>
+                  <p className="text-4xl font-black text-white">{totalContributors}</p>
+                </div>
+                <Users className="h-12 w-12 text-[#ff0040]" />
+              </div>
+              <div className="mt-4 pt-4 border-t border-[#ff0040]/20">
+                <div className="flex items-center gap-2 text-sm">
+                  <CheckCircle2 className="h-4 w-4 text-green-500" />
+                  <span className="text-gray-300">{verifiedPercentage}% verified</span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Total Content */}
+          <Card className="bg-black/90 border-2 border-[#ccff00]/30">
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm text-gray-400 uppercase font-bold mb-2">Total Content</p>
+                  <p className="text-4xl font-black text-white">{totalContent}</p>
+                </div>
+                <MapPin className="h-12 w-12 text-[#ccff00]" />
+              </div>
+              <div className="mt-4 pt-4 border-t border-[#ccff00]/20 space-y-1">
+                <div className="flex justify-between text-xs text-gray-400">
+                  <span>Spots: {spots?.length || 0}</span>
+                  <span>Events: {events?.length || 0}</span>
+                </div>
+                <div className="flex justify-between text-xs text-gray-400">
+                  <span>Coaches: {profiles?.length || 0}</span>
+                  <span>Shops: {shops?.length || 0}</span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Trust Score */}
+          <Card className="bg-black/90 border-2 border-green-500/30">
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm text-gray-400 uppercase font-bold mb-2">Trusted Network</p>
+                  <p className="text-4xl font-black text-white">{trustedPercentage}%</p>
+                </div>
+                <Shield className="h-12 w-12 text-green-500" />
+              </div>
+              <div className="mt-4 pt-4 border-t border-green-500/20">
+                <div className="flex items-center gap-2 text-sm text-gray-300">
+                  <TrendingUp className="h-4 w-4 text-green-500" />
+                  Contributors with trust ≥60
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Charts */}
+        <div className="grid md:grid-cols-2 gap-6 mb-8">
+          {/* Trust Distribution Pie Chart */}
+          <Card className="bg-black/90 border-2 border-[#ff0040]/20">
+            <CardHeader>
+              <CardTitle className="text-xl font-black uppercase text-[#ccff00] flex items-center gap-2">
+                <Users className="h-5 w-5" />
+                Trust Distribution
+              </CardTitle>
+              <p className="text-sm text-gray-400">
+                Breakdown of contributors by trust level
+              </p>
+            </CardHeader>
+            <CardContent>
+              <ResponsiveContainer width="100%" height={300}>
+                <PieChart>
+                  <Pie
+                    data={trustDistributionData}
+                    cx="50%"
+                    cy="50%"
+                    labelLine={false}
+                    label={(entry) => `${entry.name}: ${entry.value}`}
+                    outerRadius={100}
+                    fill="#8884d8"
+                    dataKey="value"
+                  >
+                    {trustDistributionData.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: '#000',
+                      border: '2px solid #ff0040',
+                      borderRadius: '8px',
+                    }}
+                  />
+                  <Legend />
+                </PieChart>
+              </ResponsiveContainer>
+            </CardContent>
+          </Card>
+
+          {/* Content by Trust Bar Chart */}
+          <Card className="bg-black/90 border-2 border-[#ccff00]/20">
+            <CardHeader>
+              <CardTitle className="text-xl font-black uppercase text-[#ff0040] flex items-center gap-2">
+                <MapPin className="h-5 w-5" />
+                Spots by Trust Level
+              </CardTitle>
+              <p className="text-sm text-gray-400">
+                Number of skate spots created by each trust level
+              </p>
+            </CardHeader>
+            <CardContent>
+              <ResponsiveContainer width="100%" height={300}>
+                <BarChart data={contentByTrustData}>
+                  <CartesianGrid strokeDasharray="3 3" stroke="#333" />
+                  <XAxis dataKey="category" stroke="#999" />
+                  <YAxis stroke="#999" />
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: '#000',
+                      border: '2px solid #ccff00',
+                      borderRadius: '8px',
+                    }}
+                  />
+                  <Bar dataKey="spots" fill="#ff0040" />
+                </BarChart>
+              </ResponsiveContainer>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Trust Level Breakdown */}
+        <div className="grid md:grid-cols-3 gap-6">
+          {/* Verified Users */}
+          <Card className="bg-black/90 border-2 border-green-500/30">
+            <CardHeader>
+              <CardTitle className="text-lg font-black uppercase text-green-500 flex items-center gap-2">
+                <CheckCircle2 className="h-5 w-5" />
+                Verified
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                <div className="flex items-baseline gap-2">
+                  <span className="text-5xl font-black text-white">{trustDistribution.verified}</span>
+                  <span className="text-gray-400 text-sm">contributors</span>
+                </div>
+                <p className="text-sm text-gray-400">
+                  People you follow directly or your own content (trust ≥90)
+                </p>
+                <Badge className="bg-green-500 text-white">
+                  {verifiedPercentage}% of community
+                </Badge>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Trusted Users */}
+          <Card className="bg-black/90 border-2 border-yellow-500/30">
+            <CardHeader>
+              <CardTitle className="text-lg font-black uppercase text-yellow-500 flex items-center gap-2">
+                <Shield className="h-5 w-5" />
+                Trusted
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                <div className="flex items-baseline gap-2">
+                  <span className="text-5xl font-black text-white">{trustDistribution.trusted}</span>
+                  <span className="text-gray-400 text-sm">contributors</span>
+                </div>
+                <p className="text-sm text-gray-400">
+                  Friends-of-friends or NIP-05 verified users (trust 60-89)
+                </p>
+                <Badge className="bg-yellow-500 text-white">
+                  {((trustDistribution.trusted / totalContributors) * 100).toFixed(1)}% of community
+                </Badge>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Unverified Users */}
+          <Card className="bg-black/90 border-2 border-gray-500/30">
+            <CardHeader>
+              <CardTitle className="text-lg font-black uppercase text-gray-400 flex items-center gap-2">
+                <AlertCircle className="h-5 w-5" />
+                Unverified
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                <div className="flex items-baseline gap-2">
+                  <span className="text-5xl font-black text-white">{trustDistribution.unverified}</span>
+                  <span className="text-gray-400 text-sm">contributors</span>
+                </div>
+                <p className="text-sm text-gray-400">
+                  Unknown or no trust signals (trust &lt;60)
+                </p>
+                <Badge variant="outline" className="border-gray-500 text-gray-400">
+                  {((trustDistribution.unverified / totalContributors) * 100).toFixed(1)}% of community
+                </Badge>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Content Breakdown */}
+        <div className="mt-8">
+          <h2 className="text-3xl font-black uppercase text-[#ccff00] mb-6" style={{
+            fontFamily: 'Impact, "Arial Black", sans-serif'
+          }}>
+            Content Breakdown
+          </h2>
+
+          <div className="grid md:grid-cols-4 gap-4">
+            <Card className="bg-black/90 border-2 border-[#ff0040]/30">
+              <CardContent className="pt-6">
+                <MapPin className="h-8 w-8 text-[#ff0040] mb-3" />
+                <p className="text-3xl font-black text-white mb-1">{spots?.length || 0}</p>
+                <p className="text-sm text-gray-400 uppercase font-bold">Skate Spots</p>
+                <div className="mt-3 space-y-1">
+                  <div className="text-xs text-gray-500">
+                    ✓ {contentByTrust.verified} from verified users
+                  </div>
+                  <div className="text-xs text-gray-500">
+                    🛡️ {contentByTrust.trusted} from trusted users
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-black/90 border-2 border-[#ccff00]/30">
+              <CardContent className="pt-6">
+                <Calendar className="h-8 w-8 text-[#ccff00] mb-3" />
+                <p className="text-3xl font-black text-white mb-1">{events?.length || 0}</p>
+                <p className="text-sm text-gray-400 uppercase font-bold">Events</p>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-black/90 border-2 border-[#ff6600]/30">
+              <CardContent className="pt-6">
+                <GraduationCap className="h-8 w-8 text-[#ff6600] mb-3" />
+                <p className="text-3xl font-black text-white mb-1">{profiles?.length || 0}</p>
+                <p className="text-sm text-gray-400 uppercase font-bold">Coaches/Filmers</p>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-black/90 border-2 border-green-500/30">
+              <CardContent className="pt-6">
+                <Store className="h-8 w-8 text-green-500 mb-3" />
+                <p className="text-3xl font-black text-white mb-1">{shops?.length || 0}</p>
+                <p className="text-sm text-gray-400 uppercase font-bold">Skate Shops</p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+
+        {/* About Trust Scores */}
+        <Card className="mt-8 bg-gradient-to-br from-[#ff0040]/10 to-[#ccff00]/10 border-2 border-[#ccff00]/50">
+          <CardHeader>
+            <CardTitle className="text-xl font-black uppercase text-[#ccff00] flex items-center gap-2">
+              <Shield className="h-6 w-6" />
+              About Trust Scores
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <p className="text-gray-300">
+                Trust scores help identify reliable contributors in the skateboarding community using a 
+                <strong className="text-[#ccff00]"> Web of Trust</strong> algorithm.
+              </p>
+
+              <div className="grid md:grid-cols-3 gap-4">
+                <div className="p-4 rounded-lg bg-green-500/10 border border-green-500/30">
+                  <div className="flex items-center gap-2 mb-2">
+                    <CheckCircle2 className="h-5 w-5 text-green-500" />
+                    <span className="font-bold text-green-500 uppercase text-sm">Verified (90-100)</span>
+                  </div>
+                  <p className="text-xs text-gray-400">
+                    Users you follow directly or your own content
+                  </p>
+                </div>
+
+                <div className="p-4 rounded-lg bg-yellow-500/10 border border-yellow-500/30">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Shield className="h-5 w-5 text-yellow-500" />
+                    <span className="font-bold text-yellow-500 uppercase text-sm">Trusted (60-89)</span>
+                  </div>
+                  <p className="text-xs text-gray-400">
+                    Friends-of-friends or NIP-05 verified users
+                  </p>
+                </div>
+
+                <div className="p-4 rounded-lg bg-gray-500/10 border border-gray-500/30">
+                  <div className="flex items-center gap-2 mb-2">
+                    <AlertCircle className="h-5 w-5 text-gray-400" />
+                    <span className="font-bold text-gray-400 uppercase text-sm">Unverified (0-59)</span>
+                  </div>
+                  <p className="text-xs text-gray-400">
+                    Unknown users with no trust signals
+                  </p>
+                </div>
+              </div>
+
+              <p className="text-sm text-gray-400 italic">
+                Trust scores are calculated client-side using your follow list. Scores are personalized - 
+                different users see different trust levels for the same contributor.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/ConversationPage.tsx b/src/src/pages/ConversationPage.tsx
new file mode 100644
index 0000000..38a0997
--- /dev/null
+++ b/src/src/pages/ConversationPage.tsx
@@ -0,0 +1,288 @@
+import { useState, useRef, useEffect } from 'react';
+import { useParams, Link, useSearchParams } from 'react-router-dom';
+import { useSeoMeta } from '@unhead/react';
+import { nip19 } from 'nostr-tools';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useConversation, useSendDirectMessage, type DirectMessage } from '@/hooks/useDirectMessages';
+import { useAuthor } from '@/hooks/useAuthor';
+import { genUserName } from '@/lib/genUserName';
+import { formatDistanceToNow } from 'date-fns';
+import {
+  ArrowLeft,
+  Send,
+  Lock,
+  Loader2,
+  AlertCircle,
+  RefreshCw,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import NotFound from './NotFound';
+
+// Single message bubble
+function MessageBubble({ message, isFromMe }: { message: DirectMessage; isFromMe: boolean }) {
+  const timeAgo = formatDistanceToNow(new Date(message.createdAt * 1000), { addSuffix: true });
+
+  return (
+    <div className={cn(
+      "flex",
+      isFromMe ? "justify-end" : "justify-start"
+    )}>
+      <div className={cn(
+        "max-w-[85%] sm:max-w-[80%] rounded-2xl px-3 py-2 sm:px-4",
+        isFromMe 
+          ? "bg-[#ff0040] text-white rounded-br-sm" 
+          : "bg-gray-800 text-white rounded-bl-sm"
+      )}>
+        <p className="whitespace-pre-wrap break-words text-sm sm:text-base">{message.content}</p>
+        <p className={cn(
+          "text-[10px] sm:text-xs mt-1",
+          isFromMe ? "text-white/60" : "text-gray-500"
+        )}>
+          {timeAgo}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function MessageSkeleton({ isFromMe }: { isFromMe: boolean }) {
+  return (
+    <div className={cn("flex", isFromMe ? "justify-end" : "justify-start")}>
+      <Skeleton className={cn(
+        "rounded-2xl h-16",
+        isFromMe ? "w-48" : "w-64"
+      )} />
+    </div>
+  );
+}
+
+export default function ConversationPage() {
+  const { npub } = useParams<{ npub: string }>();
+  const [searchParams] = useSearchParams();
+  const { user } = useCurrentUser();
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  
+  // Support pre-filled message from URL query param
+  const prefillMessage = searchParams.get('message') || '';
+  const [newMessage, setNewMessage] = useState('');
+  
+  // Set pre-filled message when URL param changes
+  useEffect(() => {
+    if (prefillMessage) {
+      setNewMessage(prefillMessage);
+    }
+  }, [prefillMessage]);
+
+  // Decode npub to get pubkey
+  let otherPubkey: string | null = null;
+  try {
+    if (npub?.startsWith('npub1')) {
+      const decoded = nip19.decode(npub);
+      if (decoded.type === 'npub') {
+        otherPubkey = decoded.data;
+      }
+    }
+  } catch {
+    // Invalid npub
+  }
+
+  const { data: messages, isLoading, error, refetch, isRefetching } = useConversation(otherPubkey || '');
+  const { mutate: sendMessage, isPending: isSending } = useSendDirectMessage();
+  const author = useAuthor(otherPubkey || undefined);
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? (otherPubkey ? genUserName(otherPubkey) : 'Unknown');
+  const avatar = metadata?.picture;
+
+  useSeoMeta({
+    title: `Chat with ${displayName} - SkateSpots`,
+    description: 'Private encrypted conversation',
+  });
+
+  // Scroll to bottom when messages change
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  const handleSend = () => {
+    if (!newMessage.trim() || !otherPubkey || isSending) return;
+
+    sendMessage(
+      { recipientPubkey: otherPubkey, content: newMessage.trim() },
+      {
+        onSuccess: () => {
+          setNewMessage('');
+        },
+      }
+    );
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  // Invalid npub
+  if (!otherPubkey) {
+    return <NotFound />;
+  }
+
+  // Not logged in
+  if (!user) {
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="border-dashed border-2 border-gray-700">
+            <CardContent className="py-16 text-center">
+              <Lock className="h-16 w-16 mx-auto mb-4 text-gray-600" />
+              <h2 className="text-xl font-bold mb-2">Log in to view messages</h2>
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  // Check NIP-44 support
+  if (!user.signer?.nip44) {
+    const isAndroid = /Android/i.test(navigator.userAgent);
+    const isMobile = isAndroid || /iPhone|iPad|iPod/i.test(navigator.userAgent);
+    
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="border-dashed border-2 border-orange-500/30">
+            <CardContent className="py-12 text-center px-4">
+              <AlertCircle className="h-12 w-12 mx-auto mb-4 text-orange-500" />
+              <h2 className="text-lg font-bold mb-2">Secure Login Required</h2>
+              <p className="text-gray-400 text-sm mb-3">
+                Messages require a secure signer app.
+              </p>
+              {isMobile && isAndroid && (
+                <a 
+                  href="https://github.com/greenart7c3/Amber"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#ccff00] text-black font-bold text-sm"
+                >
+                  Get Amber →
+                </a>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="container px-4 py-2 sm:py-4 max-w-2xl h-[calc(100dvh-56px-80px)] sm:h-[calc(100dvh-64px-60px)] md:h-[calc(100vh-64px-60px)] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center gap-2 sm:gap-3 pb-3 sm:pb-4 border-b border-gray-800 flex-shrink-0">
+          <Link to="/messages">
+            <Button variant="ghost" size="icon" className="text-gray-400 hover:text-white">
+              <ArrowLeft className="h-5 w-5" />
+            </Button>
+          </Link>
+          <Avatar className="h-8 w-8 sm:h-10 sm:w-10 border-2 border-gray-700 flex-shrink-0">
+            <AvatarImage src={avatar} alt={displayName} />
+            <AvatarFallback className="bg-[#ff0040]/20 text-[#ff0040] text-xs sm:text-sm">
+              {displayName.slice(0, 2).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex-1 min-w-0">
+            <p className="font-bold text-white truncate text-sm sm:text-base">{displayName}</p>
+            <p className="text-[10px] sm:text-xs text-gray-500 flex items-center gap-1">
+              <Lock className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
+              Encrypted
+            </p>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => refetch()}
+            disabled={isRefetching}
+            className="text-gray-400 hover:text-white"
+          >
+            <RefreshCw className={cn("h-4 w-4", isRefetching && "animate-spin")} />
+          </Button>
+        </div>
+
+        {/* Messages Area */}
+        <div className="flex-1 overflow-y-auto py-3 sm:py-4 space-y-2 sm:space-y-3 min-h-0">
+          {isLoading ? (
+            <>
+              <MessageSkeleton isFromMe={false} />
+              <MessageSkeleton isFromMe={true} />
+              <MessageSkeleton isFromMe={false} />
+            </>
+          ) : error ? (
+            <div className="text-center py-8">
+              <AlertCircle className="h-12 w-12 mx-auto mb-3 text-red-500" />
+              <p className="text-gray-400">Failed to load messages</p>
+              <Button
+                variant="outline"
+                onClick={() => refetch()}
+                className="mt-4 border-gray-700"
+              >
+                Try Again
+              </Button>
+            </div>
+          ) : messages && messages.length > 0 ? (
+            messages.map((msg) => (
+              <MessageBubble
+                key={msg.id}
+                message={msg}
+                isFromMe={msg.pubkey === user.pubkey}
+              />
+            ))
+          ) : (
+            <div className="text-center py-12">
+              <p className="text-gray-500">No messages yet</p>
+              <p className="text-gray-600 text-sm mt-1">
+                Send a message to start the conversation
+              </p>
+            </div>
+          )}
+          <div ref={messagesEndRef} />
+        </div>
+
+        {/* Message Input */}
+        <div className="pt-3 sm:pt-4 border-t border-gray-800 flex-shrink-0 pb-safe">
+          <div className="flex gap-2">
+            <Textarea
+              value={newMessage}
+              onChange={(e) => setNewMessage(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Type a message..."
+              className="bg-gray-900 border-gray-700 text-white resize-none min-h-[44px] max-h-24 sm:max-h-32 text-sm sm:text-base"
+              rows={1}
+            />
+            <Button
+              onClick={handleSend}
+              disabled={!newMessage.trim() || isSending}
+              className="bg-[#ff0040] hover:bg-[#ff0040]/90 text-white h-[44px] w-[44px] sm:h-auto sm:w-auto p-0 sm:px-4 flex-shrink-0"
+            >
+              {isSending ? (
+                <Loader2 className="h-5 w-5 animate-spin" />
+              ) : (
+                <Send className="h-5 w-5" />
+              )}
+            </Button>
+          </div>
+          <p className="text-[10px] sm:text-xs text-gray-600 mt-1.5 sm:mt-2 text-center hidden sm:block">
+            Messages are end-to-end encrypted using NIP-17
+          </p>
+        </div>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/CreateEventPage.tsx b/src/src/pages/CreateEventPage.tsx
new file mode 100644
index 0000000..074d34c
--- /dev/null
+++ b/src/src/pages/CreateEventPage.tsx
@@ -0,0 +1,889 @@
+import { useState } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { useNavigate } from 'react-router-dom';
+import ngeohash from 'ngeohash';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useUploadFile } from '@/hooks/useUploadFile';
+import { useTours } from '@/hooks/useTours';
+import { useSkateSpots } from '@/hooks/useSkateSpots';
+import { useToast } from '@/hooks/useToast';
+import { useTranslation } from '@/contexts/LanguageContext';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { CALENDAR_EVENT_KIND, EVENT_TYPE_LABELS, TOUR_CATEGORIES, SKATE_TOUR_KIND, SKATE_SPOT_KIND, SPOT_CATEGORIES, type SkateTour, type SkateSpot } from '@/lib/types';
+import { cn } from '@/lib/utils';
+import {
+  Calendar,
+  Upload,
+  X,
+  Loader2,
+  ArrowLeft,
+  MapPin,
+  Route,
+  ChevronDown,
+  Link2,
+  Skull,
+  Globe,
+  Map,
+} from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+const EVENT_TYPES = Object.entries(EVENT_TYPE_LABELS);
+
+export default function CreateEventPage() {
+  const { t } = useTranslation();
+  
+  useSeoMeta({
+    title: 'Create a Skate Event - SkateSpots',
+    description: 'Create a new skateboarding event for the community.',
+  });
+
+  const navigate = useNavigate();
+  const { user } = useCurrentUser();
+  const { mutateAsync: createEvent, isPending: isPublishing } = useNostrPublish();
+  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+  const { toast } = useToast();
+
+  // Fetch available tours for linking
+  const { data: tours, isLoading: toursLoading } = useTours(100);
+  
+  // Fetch available spots for linking
+  const { data: spots, isLoading: spotsLoading } = useSkateSpots(200);
+
+  // Form state
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [location, setLocation] = useState('');
+  const [latitude, setLatitude] = useState('');
+  const [longitude, setLongitude] = useState('');
+  const [startDate, setStartDate] = useState('');
+  const [startTime, setStartTime] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [endTime, setEndTime] = useState('');
+  const [selectedTypes, setSelectedTypes] = useState<string[]>([]);
+  const [image, setImage] = useState<string | null>(null);
+  const [isGettingLocation, setIsGettingLocation] = useState(false);
+  
+  // Tour linking state
+  const [linkedTourId, setLinkedTourId] = useState<string>('none');
+  const [tourLinkExpanded, setTourLinkExpanded] = useState(false);
+  
+  // Spot linking state
+  const [linkedSpotId, setLinkedSpotId] = useState<string>('none');
+  const [showSpotSelector, setShowSpotSelector] = useState(false);
+  const [spotSearchQuery, setSpotSearchQuery] = useState('');
+
+  // Get the selected tour (if any)
+  const selectedTour = tours?.find((t) => `${t.pubkey}:${t.identifier}` === linkedTourId);
+  
+  // Get the selected spot (if any)
+  const selectedSpot = spots?.find((s) => `${s.pubkey}:${s.identifier}` === linkedSpotId);
+  
+  // Filter spots by search query
+  const filteredSpots = spots?.filter((spot) => {
+    if (!spotSearchQuery) return true;
+    const query = spotSearchQuery.toLowerCase();
+    return (
+      spot.title.toLowerCase().includes(query) ||
+      spot.location?.toLowerCase().includes(query) ||
+      spot.category?.toLowerCase().includes(query)
+    );
+  });
+  
+  // Group tours by category for easier selection
+  const toursByCategory = tours?.reduce((acc, tour) => {
+    const cat = tour.category || 'local';
+    if (!acc[cat]) acc[cat] = [];
+    acc[cat].push(tour);
+    return acc;
+  }, {} as Record<string, SkateTour[]>);
+  
+  // Group spots by category for easier selection
+  const spotsByCategory = filteredSpots?.reduce((acc, spot) => {
+    const cat = spot.category || 'street';
+    if (!acc[cat]) acc[cat] = [];
+    acc[cat].push(spot);
+    return acc;
+  }, {} as Record<string, SkateSpot[]>);
+
+  const toggleType = (type: string) => {
+    setSelectedTypes((prev) =>
+      prev.includes(type) ? prev.filter((t) => t !== type) : [...prev, type]
+    );
+  };
+
+  const getCurrentLocation = () => {
+    if (!navigator.geolocation) {
+      toast({
+        title: 'Geolocation not supported',
+        description: 'Your browser does not support geolocation.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    setIsGettingLocation(true);
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        setLatitude(position.coords.latitude.toFixed(6));
+        setLongitude(position.coords.longitude.toFixed(6));
+        setIsGettingLocation(false);
+        toast({
+          title: 'Location found',
+          description: 'Your current location has been set.',
+        });
+      },
+      (error) => {
+        setIsGettingLocation(false);
+        toast({
+          title: 'Location error',
+          description: error.message,
+          variant: 'destructive',
+        });
+      }
+    );
+  };
+
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    try {
+      const file = files[0];
+      const tags = await uploadFile(file);
+      const url = tags[0]?.[1];
+      if (url) {
+        setImage(url);
+        toast({
+          title: 'Image uploaded',
+          description: 'Your image has been uploaded successfully.',
+        });
+      }
+    } catch (error) {
+      toast({
+        title: 'Upload failed',
+        description: error instanceof Error ? error.message : 'Failed to upload image',
+        variant: 'destructive',
+      });
+    }
+
+    // Clear the input
+    e.target.value = '';
+  };
+
+  const removeImage = () => {
+    setImage(null);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!title.trim()) {
+      toast({
+        title: 'Title required',
+        description: 'Please enter a name for this event.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (!startDate || !startTime) {
+      toast({
+        title: 'Start time required',
+        description: 'Please enter when the event starts.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    // Parse start time
+    const startDateTime = new Date(`${startDate}T${startTime}`);
+    const startTimestamp = Math.floor(startDateTime.getTime() / 1000);
+
+    if (isNaN(startTimestamp)) {
+      toast({
+        title: 'Invalid date',
+        description: 'Please enter a valid start date and time.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    // Parse end time if provided
+    let endTimestamp: number | undefined;
+    if (endDate && endTime) {
+      const endDateTime = new Date(`${endDate}T${endTime}`);
+      endTimestamp = Math.floor(endDateTime.getTime() / 1000);
+
+      if (isNaN(endTimestamp) || endTimestamp <= startTimestamp) {
+        toast({
+          title: 'Invalid end time',
+          description: 'End time must be after start time.',
+          variant: 'destructive',
+        });
+        return;
+      }
+    }
+
+    try {
+      // Create unique identifier
+      const identifier = title
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-|-$/g, '')
+        .slice(0, 50) + '-' + Date.now().toString(36);
+
+      // Build tags
+      const tags: string[][] = [
+        ['d', identifier],
+        ['title', title.trim()],
+        ['start', startTimestamp.toString()],
+        ['t', 'skateboarding'],
+        ['alt', `Skate event: ${title.trim()}`],
+      ];
+
+      if (endTimestamp) {
+        tags.push(['end', endTimestamp.toString()]);
+      }
+
+      if (location.trim()) {
+        tags.push(['location', location.trim()]);
+      }
+
+      // Add geohash if coordinates provided
+      if (latitude && longitude) {
+        const lat = parseFloat(latitude);
+        const lng = parseFloat(longitude);
+        if (!isNaN(lat) && !isNaN(lng) && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
+          const geohash = ngeohash.encode(lat, lng, 7);
+          tags.push(['g', geohash]);
+        }
+      }
+
+      for (const type of selectedTypes) {
+        tags.push(['t', type]);
+      }
+
+      if (image) {
+        tags.push(['image', image]);
+      }
+
+      // Add tour link if selected
+      if (selectedTour && linkedTourId !== 'none') {
+        // Use 'a' tag to reference the tour (addressable event reference)
+        tags.push(['a', `${SKATE_TOUR_KIND}:${selectedTour.pubkey}:${selectedTour.identifier}`]);
+        // Also add a readable tour-name tag for easier display
+        tags.push(['tour-name', selectedTour.title]);
+        // Add tour category tag for filtering
+        tags.push(['tour-category', selectedTour.category]);
+      }
+
+      // Add spot link if selected
+      if (selectedSpot && linkedSpotId !== 'none') {
+        // Use 'a' tag to reference the spot (addressable event reference)
+        tags.push(['a', `${SKATE_SPOT_KIND}:${selectedSpot.pubkey}:${selectedSpot.identifier}`]);
+        // Also add a readable spot-name tag for easier display
+        tags.push(['spot-name', selectedSpot.title]);
+        // Add spot category tag for filtering
+        if (selectedSpot.category) {
+          tags.push(['spot-category', selectedSpot.category]);
+        }
+      }
+
+      await createEvent({
+        kind: CALENDAR_EVENT_KIND,
+        content: description.trim(),
+        tags,
+      });
+
+      toast({
+        title: 'Event created!',
+        description: 'Your event has been published to the network.',
+      });
+
+      navigate(`/event/${user?.pubkey}/${identifier}`);
+    } catch (error) {
+      toast({
+        title: 'Failed to publish',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  if (!user) {
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="max-w-xl mx-auto border-dashed">
+            <CardContent className="py-12 text-center">
+              <Calendar className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+              <h2 className="text-xl font-bold mb-2">{t('errors.loginRequired')}</h2>
+              <p className="text-muted-foreground mb-6">
+                {t('createEvent.loginToCreate')}
+              </p>
+              <LoginArea className="justify-center" />
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  const hasNip05 = user?.metadata?.nip05;
+
+  return (
+    <Layout>
+      <div className="container px-4 sm:px-6 py-6 sm:py-8 max-w-2xl">
+        <div className="mb-6">
+          <Link to="/events" className="inline-flex items-center text-gray-400 hover:text-white transition-colors mb-4">
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            {t('createEvent.backToEvents')}
+          </Link>
+          <h1 className="text-3xl font-black uppercase neon-red" style={{
+            fontFamily: 'Impact, "Arial Black", sans-serif'
+          }}>{t('createEvent.title')}</h1>
+          <p className="text-gray-400 mt-1">
+            {t('createEvent.subtitle')}
+          </p>
+
+          {!hasNip05 && (
+            <Card className="mt-4 bg-yellow-950/30 border-2 border-yellow-500/50">
+              <CardContent className="p-4">
+                <div className="flex items-start gap-3">
+                  <div className="text-yellow-500">⚠️</div>
+                  <div>
+                    <h3 className="font-bold text-yellow-400 mb-1">{t('createEvent.nip05Recommended')}</h3>
+                    <p className="text-sm text-gray-300 mb-2">
+                      {t('createEvent.nip05Desc')}
+                    </p>
+                    <Link to="/settings">
+                      <Button variant="outline" size="sm" className="border-yellow-500/50 hover:bg-yellow-500/10 text-yellow-400 font-bold">
+                        {t('createEvent.addNip05')}
+                      </Button>
+                    </Link>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <Card>
+            <CardHeader>
+              <CardTitle>{t('events.eventDetails')}</CardTitle>
+              <CardDescription>
+                {t('createEvent.requiredFields')}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {/* Title */}
+              <div className="space-y-2">
+                <Label htmlFor="title">{t('events.eventName')} *</Label>
+                <Input
+                  id="title"
+                  placeholder={t('createEvent.namePlaceholder')}
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  required
+                />
+              </div>
+
+              {/* Description */}
+              <div className="space-y-2">
+                <Label htmlFor="description">{t('spots.description')}</Label>
+                <Textarea
+                  id="description"
+                  placeholder={t('createEvent.descriptionPlaceholder')}
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  rows={4}
+                />
+              </div>
+
+              {/* Start Date/Time */}
+              <div className="space-y-2">
+                <Label>{t('createEvent.startDateTime')} *</Label>
+                <div className="grid grid-cols-2 gap-4">
+                  <Input
+                    type="date"
+                    value={startDate}
+                    onChange={(e) => setStartDate(e.target.value)}
+                    required
+                  />
+                  <Input
+                    type="time"
+                    value={startTime}
+                    onChange={(e) => setStartTime(e.target.value)}
+                    required
+                  />
+                </div>
+              </div>
+
+              {/* End Date/Time */}
+              <div className="space-y-2">
+                <Label>{t('createEvent.endDateTime')}</Label>
+                <div className="grid grid-cols-2 gap-4">
+                  <Input
+                    type="date"
+                    value={endDate}
+                    onChange={(e) => setEndDate(e.target.value)}
+                  />
+                  <Input
+                    type="time"
+                    value={endTime}
+                    onChange={(e) => setEndTime(e.target.value)}
+                  />
+                </div>
+              </div>
+
+              {/* Location Address */}
+              <div className="space-y-2">
+                <Label htmlFor="location">{t('events.venue')}</Label>
+                <Input
+                  id="location"
+                  placeholder={t('createEvent.venuePlaceholder')}
+                  value={location}
+                  onChange={(e) => setLocation(e.target.value)}
+                />
+              </div>
+
+              {/* Coordinates (optional for events) */}
+              <div className="space-y-2">
+                <Label>{t('createEvent.coordinatesOptional')}</Label>
+                <div className="grid grid-cols-2 gap-4">
+                  <Input
+                    placeholder={t('createSpot.latitudePlaceholder')}
+                    value={latitude}
+                    onChange={(e) => setLatitude(e.target.value)}
+                  />
+                  <Input
+                    placeholder={t('createSpot.longitudePlaceholder')}
+                    value={longitude}
+                    onChange={(e) => setLongitude(e.target.value)}
+                  />
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={getCurrentLocation}
+                  disabled={isGettingLocation}
+                  className="mt-2"
+                >
+                  {isGettingLocation ? (
+                    <>
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                      {t('createSpot.gettingLocation')}
+                    </>
+                  ) : (
+                    <>
+                      <MapPin className="h-4 w-4 mr-2" />
+                      {t('createSpot.useCurrentLocation')}
+                    </>
+                  )}
+                </Button>
+              </div>
+
+              {/* Link to Spot from Map */}
+              <div className="space-y-3 p-4 rounded-lg border-2 border-[#ff0040]/30 bg-[#ff0040]/5">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <Map className="h-5 w-5 text-[#ff0040]" />
+                    <div>
+                      <Label className="text-base font-bold text-[#ff0040]">Link to a Skate Spot</Label>
+                      <p className="text-xs text-gray-400">
+                        {selectedSpot ? `Selected: ${selectedSpot.title}` : 'Select a spot from the map where this event takes place'}
+                      </p>
+                    </div>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setShowSpotSelector(!showSpotSelector)}
+                    className={cn(
+                      'border-[#ff0040]/50',
+                      selectedSpot 
+                        ? 'bg-[#ff0040] text-white hover:bg-[#ff0040]/90' 
+                        : 'text-[#ff0040] hover:bg-[#ff0040]/10'
+                    )}
+                  >
+                    {showSpotSelector ? 'Hide Spots' : selectedSpot ? 'Change Spot' : 'Select Spot'}
+                    <ChevronDown className={cn('h-4 w-4 ml-1 transition-transform', showSpotSelector && 'rotate-180')} />
+                  </Button>
+                </div>
+
+                {/* Selected spot preview */}
+                {selectedSpot && !showSpotSelector && (
+                  <div className="p-3 rounded-lg bg-black/40 border border-[#ff0040]/30">
+                    <div className="flex items-start gap-3">
+                      {selectedSpot.images && selectedSpot.images[0] ? (
+                        <img 
+                          src={selectedSpot.images[0]} 
+                          alt={selectedSpot.title}
+                          className="w-16 h-16 rounded-lg object-cover flex-shrink-0"
+                        />
+                      ) : (
+                        <div className="w-16 h-16 rounded-lg bg-[#ff0040]/20 flex items-center justify-center flex-shrink-0">
+                          <MapPin className="h-6 w-6 text-[#ff0040]" />
+                        </div>
+                      )}
+                      <div className="flex-1 min-w-0">
+                        {selectedSpot.category && SPOT_CATEGORIES[selectedSpot.category as keyof typeof SPOT_CATEGORIES] && (
+                          <Badge variant="outline" className="mb-1 text-[10px] border-[#ff0040]/50 text-[#ff0040]">
+                            {SPOT_CATEGORIES[selectedSpot.category as keyof typeof SPOT_CATEGORIES].emoji} {SPOT_CATEGORIES[selectedSpot.category as keyof typeof SPOT_CATEGORIES].label}
+                          </Badge>
+                        )}
+                        <h4 className="font-bold text-white text-sm">{selectedSpot.title}</h4>
+                        {selectedSpot.location && (
+                          <p className="text-xs text-gray-400 flex items-center gap-1">
+                            <MapPin className="h-3 w-3" />
+                            {selectedSpot.location}
+                          </p>
+                        )}
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => {
+                          setLinkedSpotId('none');
+                          setLocation('');
+                          setLatitude('');
+                          setLongitude('');
+                        }}
+                        className="text-gray-400 hover:text-red-400 h-8 w-8 p-0"
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                )}
+
+                {/* Spot selector */}
+                {showSpotSelector && (
+                  <div className="space-y-3">
+                    {/* Search */}
+                    <Input
+                      placeholder="Search spots by name, location, or category..."
+                      value={spotSearchQuery}
+                      onChange={(e) => setSpotSearchQuery(e.target.value)}
+                      className="bg-black border-[#ff0040]/30"
+                    />
+
+                    {/* Spots list */}
+                    <div className="max-h-64 overflow-y-auto rounded-lg border border-[#ff0040]/20 p-2 space-y-2">
+                      {spotsLoading ? (
+                        <div className="flex items-center justify-center py-4">
+                          <Loader2 className="h-5 w-5 animate-spin text-[#ff0040]" />
+                          <span className="ml-2 text-sm text-gray-400">Loading spots...</span>
+                        </div>
+                      ) : filteredSpots && filteredSpots.length > 0 ? (
+                        <>
+                          {/* Group by category */}
+                          {spotsByCategory && Object.entries(spotsByCategory).map(([category, categorySpots]) => {
+                            const catInfo = SPOT_CATEGORIES[category as keyof typeof SPOT_CATEGORIES];
+                            return (
+                              <div key={category}>
+                                <div className="px-2 py-1.5 text-xs font-bold text-gray-400 uppercase flex items-center gap-1 sticky top-0 bg-black/80 backdrop-blur-sm">
+                                  {catInfo?.emoji || '🛹'} {catInfo?.label || category} ({categorySpots.length})
+                                </div>
+                                {categorySpots.map((spot) => (
+                                  <button
+                                    key={spot.id}
+                                    type="button"
+                                    onClick={() => {
+                                      setLinkedSpotId(`${spot.pubkey}:${spot.identifier}`);
+                                      // Auto-fill location and coordinates from spot
+                                      if (spot.location) setLocation(spot.location);
+                                      if (spot.geohash) {
+                                        const coords = ngeohash.decode(spot.geohash);
+                                        setLatitude(coords.latitude.toFixed(6));
+                                        setLongitude(coords.longitude.toFixed(6));
+                                      }
+                                      setShowSpotSelector(false);
+                                      setSpotSearchQuery('');
+                                    }}
+                                    className={cn(
+                                      'w-full p-3 rounded-lg text-left transition-colors',
+                                      linkedSpotId === `${spot.pubkey}:${spot.identifier}`
+                                        ? 'bg-[#ff0040]/20 border-2 border-[#ff0040]'
+                                        : 'bg-black/50 border border-gray-800 hover:border-[#ff0040]/50'
+                                    )}
+                                  >
+                                    <div className="flex items-start gap-3">
+                                      {spot.images && spot.images[0] ? (
+                                        <img
+                                          src={spot.images[0]}
+                                          alt={spot.title}
+                                          className="w-12 h-12 rounded-lg object-cover flex-shrink-0"
+                                        />
+                                      ) : (
+                                        <div className="w-12 h-12 rounded-lg bg-[#ff0040]/20 flex items-center justify-center flex-shrink-0">
+                                          <MapPin className="h-5 w-5 text-[#ff0040]" />
+                                        </div>
+                                      )}
+                                      <div className="flex-1 min-w-0">
+                                        <h4 className="font-bold text-white text-sm truncate">{spot.title}</h4>
+                                        {spot.location && (
+                                          <p className="text-xs text-gray-400 flex items-center gap-1 truncate">
+                                            <MapPin className="h-3 w-3 flex-shrink-0" />
+                                            <span className="truncate">{spot.location}</span>
+                                          </p>
+                                        )}
+                                        {spot.tags && spot.tags.length > 0 && (
+                                          <div className="flex gap-1 mt-1 flex-wrap">
+                                            {spot.tags.slice(0, 3).map((tag) => (
+                                              <Badge key={tag} variant="outline" className="text-[9px] px-1 py-0 border-gray-700">
+                                                {tag}
+                                              </Badge>
+                                            ))}
+                                          </div>
+                                        )}
+                                      </div>
+                                      {linkedSpotId === `${spot.pubkey}:${spot.identifier}` && (
+                                        <div className="text-[#ff0040]">✓</div>
+                                      )}
+                                    </div>
+                                  </button>
+                                ))}
+                              </div>
+                            );
+                          })}
+                        </>
+                      ) : (
+                        <div className="text-center py-4">
+                          <MapPin className="h-8 w-8 mx-auto mb-2 text-gray-600" />
+                          <p className="text-sm text-gray-400">
+                            {spotSearchQuery ? 'No spots match your search' : 'No spots available'}
+                          </p>
+                          <Link to="/create-spot" className="text-xs text-[#ff0040] hover:underline mt-1 block">
+                            Add a new spot →
+                          </Link>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Event Types */}
+              <div className="space-y-2">
+                <Label>{t('events.eventType')}</Label>
+                <div className="flex flex-wrap gap-2">
+                  {EVENT_TYPES.map(([type, label]) => (
+                    <Badge
+                      key={type}
+                      variant={selectedTypes.includes(type) ? 'default' : 'outline'}
+                      className={cn(
+                        'cursor-pointer transition-colors',
+                        selectedTypes.includes(type)
+                          ? 'bg-primary hover:bg-primary/90'
+                          : 'hover:bg-muted'
+                      )}
+                      onClick={() => toggleType(type)}
+                    >
+                      {label}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+
+              {/* Cover Image */}
+              <div className="space-y-2">
+                <Label>{t('createEvent.coverImage')}</Label>
+                {image ? (
+                  <div className="relative aspect-video rounded-lg overflow-hidden bg-muted max-w-xs">
+                    <img src={image} alt="Event cover" className="w-full h-full object-cover" />
+                    <button
+                      type="button"
+                      onClick={removeImage}
+                      className="absolute top-2 right-2 p-1 rounded-full bg-background/80 hover:bg-destructive hover:text-destructive-foreground transition-colors"
+                    >
+                      <X className="h-4 w-4" />
+                    </button>
+                  </div>
+                ) : (
+                  <label className="block max-w-xs aspect-video rounded-lg border-2 border-dashed flex flex-col items-center justify-center cursor-pointer hover:bg-muted/50 transition-colors">
+                    <input
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={handleImageUpload}
+                      disabled={isUploading}
+                    />
+                    {isUploading ? (
+                      <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                    ) : (
+                      <>
+                        <Upload className="h-6 w-6 text-muted-foreground mb-1" />
+                        <span className="text-sm text-muted-foreground">{t('createEvent.uploadCover')}</span>
+                      </>
+                    )}
+                  </label>
+                )}
+              </div>
+
+              {/* Link to Tour (Optional) */}
+              <Collapsible open={tourLinkExpanded} onOpenChange={setTourLinkExpanded}>
+                <CollapsibleTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className={cn(
+                      'w-full justify-between',
+                      selectedTour ? 'border-cyan-500/50 bg-cyan-500/10' : ''
+                    )}
+                  >
+                    <span className="flex items-center gap-2">
+                      <Link2 className="h-4 w-4 text-cyan-400" />
+                      <span>
+                        {selectedTour 
+                          ? `Linked to: ${selectedTour.title}`
+                          : 'Link to a Tour (Optional)'}
+                      </span>
+                    </span>
+                    <ChevronDown className={cn('h-4 w-4 transition-transform', tourLinkExpanded && 'rotate-180')} />
+                  </Button>
+                </CollapsibleTrigger>
+                <CollapsibleContent className="pt-4 space-y-4">
+                  <div className="p-4 rounded-lg bg-cyan-500/10 border border-cyan-500/20">
+                    <p className="text-sm text-gray-300 mb-4">
+                      Link this event to a tour to show it's part of a larger series. Great for national tours, 
+                      international adventures, or World Destruction Tour challenge days.
+                    </p>
+                    
+                    <div className="space-y-2">
+                      <Label className="text-cyan-400">Select Tour</Label>
+                      <Select value={linkedTourId} onValueChange={setLinkedTourId}>
+                        <SelectTrigger className="border-cyan-500/30">
+                          <SelectValue placeholder={toursLoading ? 'Loading tours...' : 'No tour linked'} />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="none">No tour linked</SelectItem>
+                          
+                          {/* Group by category */}
+                          {toursByCategory && Object.entries(toursByCategory).map(([category, categoryTours]) => {
+                            const catInfo = TOUR_CATEGORIES[category as keyof typeof TOUR_CATEGORIES];
+                            return (
+                              <div key={category}>
+                                <div className="px-2 py-1.5 text-xs font-bold text-gray-400 uppercase flex items-center gap-1">
+                                  {catInfo?.emoji || '🛹'} {catInfo?.label || category}
+                                </div>
+                                {categoryTours.map((tour) => (
+                                  <SelectItem 
+                                    key={`${tour.pubkey}:${tour.identifier}`} 
+                                    value={`${tour.pubkey}:${tour.identifier}`}
+                                  >
+                                    <span className="flex items-center gap-2">
+                                      {tour.category === 'destruction' ? (
+                                        <Skull className="h-3 w-3 text-red-400" />
+                                      ) : tour.category === 'international' ? (
+                                        <Globe className="h-3 w-3 text-purple-400" />
+                                      ) : (
+                                        <Route className="h-3 w-3 text-cyan-400" />
+                                      )}
+                                      {tour.title}
+                                      {tour.location && (
+                                        <span className="text-gray-500 text-xs">
+                                          ({tour.location})
+                                        </span>
+                                      )}
+                                    </span>
+                                  </SelectItem>
+                                ))}
+                              </div>
+                            );
+                          })}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {selectedTour && (
+                      <div className="mt-4 p-3 rounded-lg bg-black/40 border border-cyan-500/30">
+                        <div className="flex items-start gap-3">
+                          {selectedTour.image ? (
+                            <img 
+                              src={selectedTour.image} 
+                              alt={selectedTour.title}
+                              className="w-16 h-16 rounded-lg object-cover flex-shrink-0"
+                            />
+                          ) : (
+                            <div 
+                              className="w-16 h-16 rounded-lg flex items-center justify-center flex-shrink-0"
+                              style={{ backgroundColor: TOUR_CATEGORIES[selectedTour.category]?.color + '30' }}
+                            >
+                              {selectedTour.category === 'destruction' ? (
+                                <Skull className="h-6 w-6" style={{ color: TOUR_CATEGORIES[selectedTour.category]?.color }} />
+                              ) : (
+                                <Route className="h-6 w-6" style={{ color: TOUR_CATEGORIES[selectedTour.category]?.color }} />
+                              )}
+                            </div>
+                          )}
+                          <div className="flex-1 min-w-0">
+                            <Badge 
+                              variant="outline" 
+                              className="mb-1 text-[10px]"
+                              style={{ 
+                                borderColor: TOUR_CATEGORIES[selectedTour.category]?.color,
+                                color: TOUR_CATEGORIES[selectedTour.category]?.color
+                              }}
+                            >
+                              {TOUR_CATEGORIES[selectedTour.category]?.emoji} {TOUR_CATEGORIES[selectedTour.category]?.label}
+                            </Badge>
+                            <h4 className="font-bold text-white text-sm">{selectedTour.title}</h4>
+                            {selectedTour.location && (
+                              <p className="text-xs text-gray-400 flex items-center gap-1">
+                                <MapPin className="h-3 w-3" />
+                                {selectedTour.location}
+                              </p>
+                            )}
+                            {selectedTour.description && (
+                              <p className="text-xs text-gray-500 line-clamp-2 mt-1">
+                                {selectedTour.description}
+                              </p>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+
+              {/* Submit */}
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={isPublishing || isUploading}
+              >
+                {isPublishing ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    {t('createEvent.publishing')}
+                  </>
+                ) : (
+                  <>
+                    <Calendar className="h-4 w-4 mr-2" />
+                    {t('events.createEvent')}
+                  </>
+                )}
+              </Button>
+            </CardContent>
+          </Card>
+        </form>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/CreateListingPage.tsx b/src/src/pages/CreateListingPage.tsx
new file mode 100644
index 0000000..7c36245
--- /dev/null
+++ b/src/src/pages/CreateListingPage.tsx
@@ -0,0 +1,1086 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { useNavigate, Link, useSearchParams } from 'react-router-dom';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useUploadFile } from '@/hooks/useUploadFile';
+import { useToast } from '@/hooks/useToast';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+import { useSkateSpot, useSkateSpots } from '@/hooks/useSkateSpots';
+import { useListingRestrictions, LISTING_FEE_SATS, recordListingCreation } from '@/hooks/useListingRestrictions';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { SpamFeePayment } from '@/components/SpamFeePayment';
+import {
+  MARKETPLACE_ITEM_KIND,
+  GEAR_CATEGORIES,
+  GEAR_CONDITIONS,
+  PRICE_TYPES,
+  LISTING_TYPES,
+  SIZE_OPTIONS,
+  TRUCK_HEIGHTS,
+  WHEEL_HARDNESS,
+  EXPIRATION_OPTIONS,
+  CURRENCY_OPTIONS,
+  CATEGORY_REQUIRED_FIELDS,
+} from '@/lib/types';
+import {
+  ShoppingBag,
+  Upload,
+  X,
+  Loader2,
+  ArrowLeft,
+  MapPin,
+  AlertTriangle,
+  CheckCircle,
+  Search,
+  Clock,
+  Shield,
+  Zap,
+} from 'lucide-react';
+import ngeohash from 'ngeohash';
+
+export default function CreateListingPage() {
+  useSeoMeta({
+    title: 'List Gear - SkateSpots',
+    description: 'List skateboarding gear for sale or find gear you want to buy.',
+  });
+
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { user } = useCurrentUser();
+  const { mutateAsync: createEvent, isPending: isPublishing } = useNostrPublish();
+  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+  const { toast } = useToast();
+
+  // Get spot reference from URL parameter
+  const spotParam = searchParams.get('spot'); // Format: "pubkey:identifier"
+  const [spotPubkey, spotIdentifier] = spotParam?.split(':') || ['', ''];
+  const { data: linkedSpot } = useSkateSpot(spotIdentifier, spotPubkey);
+
+  // Get all spots for picker
+  const { data: allSpots } = useSkateSpots(100);
+
+  // Anti-spam restrictions
+  const restrictions = useListingRestrictions(linkedSpot?.pubkey);
+  const [feePaid, setFeePaid] = useState(false);
+  const [lastListingRecord, setLastListingRecord] = useLocalStorage<{ timestamp: number; spotOwnerPubkey?: string } | null>(
+    'last-listing-record',
+    null
+  );
+
+  // Check if coming from stash
+  const fromStash = searchParams.get('fromStash') === 'true';
+  const stashId = searchParams.get('stashId');
+
+  // Form state - initialize from URL params if coming from stash
+  const [listingType, setListingType] = useState<'selling' | 'wtb'>('selling');
+  const [category, setCategory] = useState(searchParams.get('category') || '');
+  const [title, setTitle] = useState(searchParams.get('title') || '');
+  const [description, setDescription] = useState(searchParams.get('description') || '');
+  const [summary, setSummary] = useState(searchParams.get('brand') ? `Brand: ${searchParams.get('brand')}` : '');
+  const [condition, setCondition] = useState<string>(searchParams.get('condition') || '');
+  const [priceType, setPriceType] = useState<string>(searchParams.get('priceType') || 'fixed');
+  const [price, setPrice] = useState(searchParams.get('price') || '');
+  const [currency, setCurrency] = useState('sats'); // Default to sats when coming from stash (stash uses sats)
+  const [size, setSize] = useState(searchParams.get('size') || '');
+  const [truckHeight, setTruckHeight] = useState('');
+  const [wheelHardness, setWheelHardness] = useState('');
+  const [images, setImages] = useState<string[]>(() => {
+    const imagesParam = searchParams.get('images');
+    return imagesParam ? imagesParam.split(',').filter(Boolean) : [];
+  });
+  const [availability, setAvailability] = useState('');
+  const [expiration, setExpiration] = useState(30);
+  const [selectedSpotId, setSelectedSpotId] = useState<string | null>(spotParam || null);
+  const [spotSearchQuery, setSpotSearchQuery] = useState('');
+
+  // Check if user has NIP-05 verification (or is platform owner who bypasses this)
+  const hasNip05 = !!user?.metadata?.nip05 || restrictions.isPlatformOwner;
+
+  // Format cooldown time remaining
+  const formatCooldownTime = (ms: number | null): string => {
+    if (!ms) return '';
+    const hours = Math.floor(ms / (1000 * 60 * 60));
+    const minutes = Math.floor((ms % (1000 * 60 * 60)) / (1000 * 60));
+    if (hours > 0) {
+      return `${hours}h ${minutes}m`;
+    }
+    return `${minutes}m`;
+  };
+
+  // Check if user can proceed (fee paid or not required)
+  const canProceedWithListing = !restrictions.requiresFee || feePaid;
+
+  // Get selected spot details
+  const selectedSpot = useMemo(() => {
+    if (!selectedSpotId) return null;
+    if (linkedSpot && spotParam === selectedSpotId) return linkedSpot;
+    if (!allSpots) return null;
+    
+    const [pubkey, identifier] = selectedSpotId.split(':');
+    return allSpots.find(s => s.pubkey === pubkey && s.identifier === identifier) || null;
+  }, [selectedSpotId, linkedSpot, allSpots, spotParam]);
+
+  // Filter spots for search
+  const filteredSpots = useMemo(() => {
+    if (!allSpots) return [];
+    if (!spotSearchQuery) return allSpots.slice(0, 10);
+    
+    const query = spotSearchQuery.toLowerCase();
+    return allSpots
+      .filter(s => 
+        s.title.toLowerCase().includes(query) ||
+        s.location?.toLowerCase().includes(query)
+      )
+      .slice(0, 10);
+  }, [allSpots, spotSearchQuery]);
+
+  // Pre-fill spot if coming from URL
+  useEffect(() => {
+    if (linkedSpot && !selectedSpotId) {
+      setSelectedSpotId(spotParam);
+    }
+  }, [linkedSpot, spotParam, selectedSpotId]);
+
+  // Size options based on category
+  const currentSizeOptions = SIZE_OPTIONS[category] || [];
+  const showTruckHeight = category === 'trucks';
+  const showWheelHardness = category === 'wheels';
+
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    try {
+      const file = files[0];
+      const tags = await uploadFile(file);
+      const url = tags[0]?.[1];
+      if (url) {
+        setImages((prev) => [...prev, url]);
+        toast({ title: 'Image uploaded' });
+      }
+    } catch (error) {
+      toast({
+        title: 'Upload failed',
+        description: error instanceof Error ? error.message : 'Failed',
+        variant: 'destructive',
+      });
+    }
+    e.target.value = '';
+  };
+
+  const removeImage = (index: number) => {
+    setImages((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  // Get category-specific requirements
+  const categoryRequirements = category ? CATEGORY_REQUIRED_FIELDS[category] : null;
+  const requiresSize = categoryRequirements?.size && listingType === 'selling';
+  const requiresCondition = categoryRequirements?.condition && listingType === 'selling';
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // Anti-spam validation
+    if (!restrictions.canCreateListing && !feePaid) {
+      if (restrictions.isInCooldown) {
+        toast({
+          title: 'Cooldown active',
+          description: `Please wait ${formatCooldownTime(restrictions.timeUntilCooldownEnds)} before creating another listing`,
+          variant: 'destructive',
+        });
+        return;
+      }
+      if (restrictions.remainingListings <= 0) {
+        toast({
+          title: 'Listing limit reached',
+          description: `You've reached your monthly limit of ${restrictions.listingLimit} listings`,
+          variant: 'destructive',
+        });
+        return;
+      }
+    }
+
+    if (restrictions.requiresFee && !feePaid) {
+      toast({
+        title: 'Fee required',
+        description: 'Please pay the anti-spam fee to continue',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    // Validation
+    if (!title.trim()) {
+      toast({ title: 'Title required', variant: 'destructive' });
+      return;
+    }
+
+    if (!category) {
+      toast({ title: 'Category required', variant: 'destructive' });
+      return;
+    }
+
+    if (listingType === 'selling' && images.length === 0) {
+      toast({ 
+        title: 'Photo required', 
+        description: 'At least one photo is required when selling gear',
+        variant: 'destructive' 
+      });
+      return;
+    }
+
+    if (!hasNip05) {
+      toast({
+        title: 'NIP-05 verification required',
+        description: 'You need a verified Nostr address to list gear',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (priceType === 'fixed' && !price.trim()) {
+      toast({ title: 'Price required for fixed price listings', variant: 'destructive' });
+      return;
+    }
+
+    // Category-specific validation
+    if (requiresSize && !size) {
+      toast({ 
+        title: 'Size required', 
+        description: `Please select a size for ${GEAR_CATEGORIES[category as keyof typeof GEAR_CATEGORIES]}`,
+        variant: 'destructive' 
+      });
+      return;
+    }
+
+    if (requiresCondition && !condition) {
+      toast({ 
+        title: 'Condition required', 
+        description: `Please select the condition of your ${GEAR_CATEGORIES[category as keyof typeof GEAR_CATEGORIES]}`,
+        variant: 'destructive' 
+      });
+      return;
+    }
+
+    try {
+      const identifier = `listing-${Date.now()}`;
+      const now = Math.floor(Date.now() / 1000);
+      const expirationTimestamp = now + (expiration * 24 * 60 * 60);
+
+      const tags: string[][] = [
+        ['d', identifier],
+        ['title', title.trim()],
+        ['t', 'skateboarding'],
+        ['t', category],
+        ['price_type', priceType],
+        ['listing_type', listingType],
+        ['expiration', expirationTimestamp.toString()],
+        ['status', 'active'],
+        ['published_at', now.toString()],
+        ['alt', `${listingType === 'wtb' ? 'WTB' : 'Gear listing'}: ${title}`],
+      ];
+
+      // Price (only for fixed price)
+      if (priceType === 'fixed' && price.trim()) {
+        tags.push(['price', price.trim(), currency]);
+      }
+
+      if (summary.trim()) tags.push(['summary', summary.trim()]);
+      if (condition) tags.push(['condition', condition]);
+      
+      // Size with optional modifiers
+      if (size) {
+        let sizeValue = size;
+        if (showTruckHeight && truckHeight) {
+          sizeValue = `${size} ${truckHeight}`;
+        }
+        if (showWheelHardness && wheelHardness) {
+          sizeValue = `${size} ${wheelHardness}`;
+        }
+        tags.push(['size', sizeValue]);
+      }
+      
+      if (availability.trim()) tags.push(['available', availability.trim()]);
+
+      // Spot reference and geohash
+      if (selectedSpot) {
+        const spotRef = `30818:${selectedSpot.pubkey}:${selectedSpot.identifier}`;
+        tags.push(['a', spotRef]);
+        tags.push(['location', selectedSpot.title]);
+        if (selectedSpot.geohash) {
+          tags.push(['g', selectedSpot.geohash]);
+        }
+      }
+
+      // Add images
+      for (const imageUrl of images) {
+        tags.push(['image', imageUrl]);
+      }
+
+      await createEvent({
+        kind: MARKETPLACE_ITEM_KIND,
+        content: description.trim(),
+        tags,
+      });
+
+      // Record listing creation for cooldown tracking (only for unknown trust level)
+      if (restrictions.trustLevel === 'unknown') {
+        recordListingCreation(setLastListingRecord, selectedSpot?.pubkey);
+      }
+
+      toast({
+        title: listingType === 'wtb' ? 'Want to Buy posted!' : 'Listing created!',
+        description: listingType === 'wtb' ? 'Sellers will be able to find your request.' : 'Your gear is now listed.',
+      });
+
+      // Navigate back
+      if (selectedSpot) {
+        navigate(`/spot/${selectedSpot.pubkey}/${selectedSpot.identifier}`);
+      } else {
+        navigate('/map');
+      }
+    } catch (error) {
+      toast({
+        title: 'Failed to publish',
+        description: error instanceof Error ? error.message : 'Error',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  if (!user) {
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="max-w-xl mx-auto bg-gray-900 border-gray-700">
+            <CardContent className="py-12 text-center">
+              <ShoppingBag className="h-12 w-12 mx-auto mb-4 text-gray-600" />
+              <h2 className="text-xl font-bold mb-2">Login Required</h2>
+              <p className="text-gray-400 mb-6">You need to log in to list gear.</p>
+              <LoginArea className="justify-center max-w-60 mx-auto" />
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="container px-4 sm:px-6 py-6 sm:py-8 max-w-2xl">
+        <div className="mb-6">
+          <Link
+            to={fromStash ? '/stash' : (selectedSpot ? `/spot/${selectedSpot.pubkey}/${selectedSpot.identifier}` : '/map')}
+            className="inline-flex items-center text-gray-400 hover:text-white transition-colors mb-4"
+          >
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            {fromStash ? 'Back to Stash' : (selectedSpot ? `Back to ${selectedSpot.title}` : 'Back to Map')}
+          </Link>
+          <h1
+            className="text-3xl font-black uppercase neon-orange"
+            style={{
+              fontFamily: 'Impact, "Arial Black", sans-serif',
+            }}
+          >
+            {listingType === 'wtb' ? 'WANT TO BUY' : 'LIST YOUR GEAR'}
+          </h1>
+          <p className="text-gray-400 mt-1">
+            {listingType === 'wtb'
+              ? 'Tell the community what gear you\'re looking for'
+              : 'Sell skateboarding gear to the community'}
+          </p>
+        </div>
+
+        {/* Coming from Stash indicator */}
+        {fromStash && (
+          <Card className="mb-6 bg-purple-950/30 border-2 border-purple-500/50">
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3">
+                <div className="p-2 rounded-lg bg-purple-500/20">
+                  <ShoppingBag className="h-5 w-5 text-purple-400" />
+                </div>
+                <div className="flex-1">
+                  <h3 className="font-bold text-purple-400 mb-0.5">Listing from your Stash</h3>
+                  <p className="text-sm text-gray-300">
+                    Pre-filled with your stash item details. Review and pick a meetup spot!
+                  </p>
+                </div>
+                <Link to="/stash" className="text-purple-400 hover:text-purple-300">
+                  <ArrowLeft className="h-4 w-4" />
+                </Link>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* NIP-05 Requirement Notice - never shown to platform owners */}
+        {!hasNip05 && !restrictions.isPlatformOwner && (
+          <Card className="mb-6 bg-red-950/30 border-2 border-red-500/50">
+            <CardContent className="p-4">
+              <div className="flex items-start gap-3">
+                <AlertTriangle className="h-5 w-5 text-red-400 flex-shrink-0 mt-0.5" />
+                <div>
+                  <h3 className="font-bold text-red-400 mb-1">NIP-05 Verification Required</h3>
+                  <p className="text-sm text-gray-300 mb-3">
+                    To prevent spam and protect buyers, you need a verified Nostr address (NIP-05) to list gear.
+                  </p>
+                  <Link to="/settings">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="border-red-500/50 hover:bg-red-500/10 text-red-400"
+                    >
+                      Add NIP-05 in Settings
+                    </Button>
+                  </Link>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {hasNip05 && (
+          <Card className="mb-6 bg-green-950/30 border-2 border-green-500/50">
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3">
+                <CheckCircle className="h-5 w-5 text-green-400 flex-shrink-0" />
+                <div>
+                  <span className="font-bold text-green-400">Verified: </span>
+                  <span className="text-gray-300">{user.metadata?.nip05}</span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Trust Level & Listing Limits - Loading state */}
+        {hasNip05 && restrictions.isLoading && (
+          <Card className="mb-6 bg-gray-900 border-gray-700">
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3">
+                <Loader2 className="h-5 w-5 text-blue-400 animate-spin" />
+                <div>
+                  <span className="text-gray-400">Checking your trust level...</span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Trust Level & Listing Limits - Loaded state */}
+        {hasNip05 && !restrictions.isLoading && (
+          <Card className="mb-6 bg-gray-900 border-gray-700">
+            <CardContent className="p-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <Shield className="h-5 w-5 text-blue-400 flex-shrink-0" />
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <span className="font-bold text-gray-200">Trust Level: </span>
+                      <Badge 
+                        variant="outline" 
+                        className={
+                          restrictions.trustLevel === 'trusted' ? 'border-green-500 text-green-400' :
+                          restrictions.trustLevel === 'active' ? 'border-blue-500 text-blue-400' :
+                          restrictions.trustLevel === 'newcomer' ? 'border-yellow-500 text-yellow-400' :
+                          'border-gray-500 text-gray-400'
+                        }
+                      >
+                        {restrictions.trustLevel === 'trusted' ? '⭐ Trusted' :
+                         restrictions.trustLevel === 'active' ? '🔥 Active' :
+                         restrictions.trustLevel === 'newcomer' ? '🌱 Newcomer' :
+                         '👋 New User'}
+                      </Badge>
+                    </div>
+                    <p className="text-xs text-gray-400 mt-1">
+                      {restrictions.remainingListings} of {restrictions.listingLimit} listings remaining this month
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Cooldown Warning */}
+        {restrictions.isInCooldown && (
+          <Card className="mb-6 bg-orange-950/30 border-2 border-orange-500/50">
+            <CardContent className="p-4">
+              <div className="flex items-start gap-3">
+                <Clock className="h-5 w-5 text-orange-400 flex-shrink-0 mt-0.5" />
+                <div>
+                  <h3 className="font-bold text-orange-400 mb-1">Cooldown Active</h3>
+                  <p className="text-sm text-gray-300">
+                    New users have a 24-hour cooldown between listings.
+                    <br />
+                    <span className="font-semibold">
+                      Time remaining: {formatCooldownTime(restrictions.timeUntilCooldownEnds)}
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Listing Limit Reached - never shown to platform owners */}
+        {restrictions.remainingListings <= 0 && !restrictions.isInCooldown && !restrictions.isPlatformOwner && (
+          <Card className="mb-6 bg-red-950/30 border-2 border-red-500/50">
+            <CardContent className="p-4">
+              <div className="flex items-start gap-3">
+                <AlertTriangle className="h-5 w-5 text-red-400 flex-shrink-0 mt-0.5" />
+                <div>
+                  <h3 className="font-bold text-red-400 mb-1">Monthly Limit Reached</h3>
+                  <p className="text-sm text-gray-300">
+                    You've reached your limit of {restrictions.listingLimit} listings this month.
+                    Build your reputation by creating spots or completing sales to increase your limit.
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Anti-Spam Fee Payment - for newcomers (NIP-05 verified but no spots/listings yet) */}
+        {hasNip05 && !restrictions.isLoading && restrictions.requiresFee && !feePaid && restrictions.feeRecipient && !restrictions.isInCooldown && restrictions.remainingListings > 0 && (
+          <div className="mb-6">
+            <SpamFeePayment
+              feeRecipient={restrictions.feeRecipient}
+              feeRecipientName={restrictions.feeRecipientName || 'SkateSpots'}
+              onPaymentSuccess={() => setFeePaid(true)}
+            />
+          </div>
+        )}
+
+        {/* Fee Paid Success */}
+        {feePaid && (
+          <Card className="mb-6 bg-green-950/30 border-2 border-green-500/50">
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3">
+                <Zap className="h-5 w-5 text-green-400 flex-shrink-0" />
+                <div>
+                  <span className="font-bold text-green-400">Fee Paid!</span>
+                  <span className="text-gray-300 ml-2">You can now create your listing.</span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        <form onSubmit={handleSubmit}>
+          {/* Listing Type Toggle */}
+          <Card className="bg-gray-900 border-gray-700 mb-6">
+            <CardHeader>
+              <CardTitle>What do you want to do?</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 gap-4">
+                <Button
+                  type="button"
+                  variant={listingType === 'selling' ? 'default' : 'outline'}
+                  className={`h-20 flex-col gap-2 ${
+                    listingType === 'selling'
+                      ? 'bg-orange-500 hover:bg-orange-600'
+                      : 'border-gray-600'
+                  }`}
+                  onClick={() => setListingType('selling')}
+                >
+                  <span className="text-2xl">💰</span>
+                  <span className="font-bold">SELL GEAR</span>
+                </Button>
+                <Button
+                  type="button"
+                  variant={listingType === 'wtb' ? 'default' : 'outline'}
+                  className={`h-20 flex-col gap-2 ${
+                    listingType === 'wtb'
+                      ? 'bg-blue-500 hover:bg-blue-600'
+                      : 'border-gray-600'
+                  }`}
+                  onClick={() => setListingType('wtb')}
+                >
+                  <span className="text-2xl">🔍</span>
+                  <span className="font-bold">WANT TO BUY</span>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Category Selection */}
+          <Card className="bg-gray-900 border-gray-700 mb-6">
+            <CardHeader>
+              <CardTitle>Category *</CardTitle>
+              <CardDescription className="text-gray-400">What type of gear?</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
+                {Object.entries(GEAR_CATEGORIES).map(([key, label]) => (
+                  <Button
+                    key={key}
+                    type="button"
+                    variant={category === key ? 'default' : 'outline'}
+                    size="sm"
+                    className={`${
+                      category === key
+                        ? 'bg-orange-500 hover:bg-orange-600'
+                        : 'border-gray-600 hover:bg-gray-800'
+                    }`}
+                    onClick={() => {
+                      setCategory(key);
+                      setSize('');
+                      setTruckHeight('');
+                      setWheelHardness('');
+                    }}
+                  >
+                    {label}
+                  </Button>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Gear Details */}
+          <Card className="bg-gray-900 border-gray-700 mb-6">
+            <CardHeader>
+              <CardTitle>Gear Details</CardTitle>
+              <CardDescription className="text-gray-400">
+                {listingType === 'wtb' ? 'Describe what you\'re looking for' : 'Tell buyers about your item'}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="space-y-2">
+                <Label htmlFor="title">Title *</Label>
+                <Input
+                  id="title"
+                  placeholder={listingType === 'wtb' ? 'Looking for 8.0" deck' : 'Almost New Palace Deck 8.25"'}
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  className="bg-gray-800 border-gray-700"
+                  required
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="summary">Short Summary</Label>
+                <Input
+                  id="summary"
+                  placeholder={listingType === 'wtb' ? 'Any brand, prefer minimal graphics' : 'Great condition, barely used'}
+                  value={summary}
+                  onChange={(e) => setSummary(e.target.value)}
+                  className="bg-gray-800 border-gray-700"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="description">Description</Label>
+                <Textarea
+                  id="description"
+                  placeholder={
+                    listingType === 'wtb'
+                      ? 'Describe exactly what you\'re looking for - brand preferences, condition requirements, etc.'
+                      : 'Got this deck for Christmas but prefer a smaller size. Happy to let you try it before buying!'
+                  }
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  rows={4}
+                  className="bg-gray-800 border-gray-700"
+                />
+              </div>
+
+              {/* Condition (only for selling) */}
+              {listingType === 'selling' && (
+                <div className="space-y-2">
+                  <Label>Condition {requiresCondition && <span className="text-red-400">*</span>}</Label>
+                  <div className="grid grid-cols-2 gap-2">
+                    {Object.entries(GEAR_CONDITIONS).map(([key, { label, emoji, description }]) => (
+                      <Button
+                        key={key}
+                        type="button"
+                        variant={condition === key ? 'default' : 'outline'}
+                        className={`h-auto py-3 flex-col items-start ${
+                          condition === key
+                            ? 'bg-orange-500 hover:bg-orange-600'
+                            : 'border-gray-600 hover:bg-gray-800'
+                        }`}
+                        onClick={() => setCondition(key)}
+                      >
+                        <span className="font-bold">
+                          {emoji} {label}
+                        </span>
+                        <span className="text-xs opacity-70">{description}</span>
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Size */}
+              {currentSizeOptions.length > 0 && (
+                <div className="space-y-2">
+                  <Label>Size {requiresSize && <span className="text-red-400">*</span>}</Label>
+                  <Select value={size} onValueChange={setSize}>
+                    <SelectTrigger className="bg-gray-800 border-gray-700">
+                      <SelectValue placeholder="Select size" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {currentSizeOptions.map((s) => (
+                        <SelectItem key={s} value={s}>
+                          {s}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+
+              {/* Truck Height */}
+              {showTruckHeight && (
+                <div className="space-y-2">
+                  <Label>Truck Height</Label>
+                  <Select value={truckHeight} onValueChange={setTruckHeight}>
+                    <SelectTrigger className="bg-gray-800 border-gray-700">
+                      <SelectValue placeholder="Select height" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {TRUCK_HEIGHTS.map((h) => (
+                        <SelectItem key={h} value={h}>
+                          {h}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+
+              {/* Wheel Hardness */}
+              {showWheelHardness && (
+                <div className="space-y-2">
+                  <Label>Wheel Hardness</Label>
+                  <Select value={wheelHardness} onValueChange={setWheelHardness}>
+                    <SelectTrigger className="bg-gray-800 border-gray-700">
+                      <SelectValue placeholder="Select hardness" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {WHEEL_HARDNESS.map((h) => (
+                        <SelectItem key={h} value={h}>
+                          {h}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Pricing */}
+          <Card className="bg-gray-900 border-gray-700 mb-6">
+            <CardHeader>
+              <CardTitle>Pricing</CardTitle>
+              <CardDescription className="text-gray-400">
+                {listingType === 'wtb' ? 'How do you want to pay?' : 'How do you want to sell?'}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="grid grid-cols-2 gap-2">
+                {Object.entries(PRICE_TYPES).map(([key, { label, description }]) => (
+                  <Button
+                    key={key}
+                    type="button"
+                    variant={priceType === key ? 'default' : 'outline'}
+                    className={`h-auto py-3 flex-col items-start ${
+                      priceType === key
+                        ? 'bg-orange-500 hover:bg-orange-600'
+                        : 'border-gray-600 hover:bg-gray-800'
+                    }`}
+                    onClick={() => setPriceType(key)}
+                  >
+                    <span className="font-bold">{label}</span>
+                    <span className="text-xs opacity-70">{description}</span>
+                  </Button>
+                ))}
+              </div>
+
+              {priceType === 'fixed' && (
+                <div className="grid grid-cols-3 gap-4">
+                  <div className="col-span-2 space-y-2">
+                    <Label htmlFor="price">Price *</Label>
+                    <Input
+                      id="price"
+                      type="number"
+                      placeholder="40"
+                      value={price}
+                      onChange={(e) => setPrice(e.target.value)}
+                      className="bg-gray-800 border-gray-700"
+                      required={priceType === 'fixed'}
+                      min="0"
+                      step="0.01"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="currency">Currency</Label>
+                    <Select value={currency} onValueChange={setCurrency}>
+                      <SelectTrigger className="bg-gray-800 border-gray-700">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent className="max-h-[300px]">
+                        {CURRENCY_OPTIONS.map(({ code, label, region }) => (
+                          <SelectItem key={code} value={code}>
+                            {label} <span className="text-gray-500 text-xs ml-1">({region})</span>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Photos (required for selling) */}
+          <Card className="bg-gray-900 border-gray-700 mb-6">
+            <CardHeader>
+              <CardTitle>
+                Photos {listingType === 'selling' && '*'}
+              </CardTitle>
+              <CardDescription className="text-gray-400">
+                {listingType === 'selling'
+                  ? 'At least one photo is required'
+                  : 'Optional - add reference images'}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-3 gap-4">
+                {images.map((imageUrl, index) => (
+                  <div
+                    key={index}
+                    className="relative aspect-square rounded-lg overflow-hidden bg-gray-800"
+                  >
+                    <img
+                      src={imageUrl}
+                      alt={`Product ${index + 1}`}
+                      className="w-full h-full object-cover"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => removeImage(index)}
+                      className="absolute top-2 right-2 p-1 rounded-full bg-black/80 hover:bg-red-500"
+                    >
+                      <X className="h-4 w-4" />
+                    </button>
+                  </div>
+                ))}
+                {images.length < 5 && (
+                  <label className="aspect-square rounded-lg border-2 border-dashed border-gray-700 flex flex-col items-center justify-center cursor-pointer hover:bg-gray-800/50">
+                    <input
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={handleImageUpload}
+                      disabled={isUploading}
+                    />
+                    {isUploading ? (
+                      <Loader2 className="h-6 w-6 animate-spin text-gray-500" />
+                    ) : (
+                      <>
+                        <Upload className="h-6 w-6 mb-1 text-gray-500" />
+                        <span className="text-xs text-gray-500">Upload</span>
+                      </>
+                    )}
+                  </label>
+                )}
+              </div>
+              <p className="text-xs text-gray-400 mt-2">
+                Add up to 5 photos. First image will be the main photo.
+              </p>
+            </CardContent>
+          </Card>
+
+          {/* Location / Spot Picker */}
+          <Card className="bg-gray-900 border-gray-700 mb-6">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <MapPin className="h-5 w-5 text-orange-500" />
+                Pickup Location
+              </CardTitle>
+              <CardDescription className="text-gray-400">
+                Link to a skate spot for easy meetups
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {selectedSpot && (
+                <Card className="bg-orange-950/30 border-2 border-orange-500/50">
+                  <CardContent className="p-4">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        <MapPin className="h-5 w-5 text-orange-400" />
+                        <div>
+                          <h3 className="font-bold text-orange-400">{selectedSpot.title}</h3>
+                          {selectedSpot.location && (
+                            <p className="text-sm text-gray-400">{selectedSpot.location}</p>
+                          )}
+                        </div>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setSelectedSpotId(null)}
+                        className="text-gray-400 hover:text-white"
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+
+              {!selectedSpot && (
+                <>
+                  <div className="relative">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500" />
+                    <Input
+                      placeholder="Search spots..."
+                      value={spotSearchQuery}
+                      onChange={(e) => setSpotSearchQuery(e.target.value)}
+                      className="bg-gray-800 border-gray-700 pl-9"
+                    />
+                  </div>
+
+                  <div className="max-h-48 overflow-y-auto space-y-2">
+                    {filteredSpots.map((spot) => (
+                      <Button
+                        key={`${spot.pubkey}:${spot.identifier}`}
+                        type="button"
+                        variant="outline"
+                        className="w-full justify-start h-auto py-3 border-gray-700 hover:bg-gray-800"
+                        onClick={() => setSelectedSpotId(`${spot.pubkey}:${spot.identifier}`)}
+                      >
+                        <MapPin className="h-4 w-4 mr-2 text-orange-400" />
+                        <div className="text-left">
+                          <div className="font-medium">{spot.title}</div>
+                          {spot.location && (
+                            <div className="text-xs text-gray-400">{spot.location}</div>
+                          )}
+                        </div>
+                      </Button>
+                    ))}
+                    {filteredSpots.length === 0 && (
+                      <p className="text-sm text-gray-400 text-center py-4">
+                        No spots found. Try a different search.
+                      </p>
+                    )}
+                  </div>
+                </>
+              )}
+
+              <div className="space-y-2">
+                <Label htmlFor="availability">When are you usually available?</Label>
+                <Input
+                  id="availability"
+                  placeholder="Weekends 10am-2pm, Tue/Thu evenings"
+                  value={availability}
+                  onChange={(e) => setAvailability(e.target.value)}
+                  className="bg-gray-800 border-gray-700"
+                />
+                <p className="text-xs text-gray-400">
+                  💡 Helps buyers coordinate meetups with you
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Expiration */}
+          <Card className="bg-gray-900 border-gray-700 mb-6">
+            <CardHeader>
+              <CardTitle>Listing Duration</CardTitle>
+              <CardDescription className="text-gray-400">
+                How long should this listing stay active?
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-3 gap-2">
+                {EXPIRATION_OPTIONS.map(({ value, label }) => (
+                  <Button
+                    key={value}
+                    type="button"
+                    variant={expiration === value ? 'default' : 'outline'}
+                    className={`${
+                      expiration === value
+                        ? 'bg-orange-500 hover:bg-orange-600'
+                        : 'border-gray-600 hover:bg-gray-800'
+                    }`}
+                    onClick={() => setExpiration(value)}
+                  >
+                    {label}
+                  </Button>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Submit Button */}
+          <Button
+            type="submit"
+            className="w-full bg-orange-500 hover:bg-orange-600 uppercase font-black h-14 text-lg"
+            disabled={
+              isPublishing || 
+              isUploading || 
+              (!hasNip05 && !restrictions.isPlatformOwner) || 
+              (restrictions.isLoading && !restrictions.isPlatformOwner) ||
+              (restrictions.isInCooldown && !restrictions.isPlatformOwner) || 
+              (restrictions.remainingListings <= 0 && !restrictions.isPlatformOwner) ||
+              (!restrictions.isLoading && restrictions.requiresFee && !feePaid && !restrictions.isPlatformOwner)
+            }
+          >
+            {isPublishing ? (
+              <>
+                <Loader2 className="h-5 w-5 mr-2 animate-spin" />
+                Publishing...
+              </>
+            ) : restrictions.isLoading && !restrictions.isPlatformOwner ? (
+              <>
+                <Loader2 className="h-5 w-5 mr-2 animate-spin" />
+                Checking eligibility...
+              </>
+            ) : restrictions.isInCooldown && !restrictions.isPlatformOwner ? (
+              <>
+                <Clock className="h-5 w-5 mr-2" />
+                COOLDOWN: {formatCooldownTime(restrictions.timeUntilCooldownEnds)}
+              </>
+            ) : restrictions.remainingListings <= 0 && !restrictions.isPlatformOwner ? (
+              <>
+                <AlertTriangle className="h-5 w-5 mr-2" />
+                LIMIT REACHED
+              </>
+            ) : restrictions.requiresFee && !feePaid && !restrictions.isPlatformOwner ? (
+              <>
+                <Zap className="h-5 w-5 mr-2" />
+                PAY FEE TO CONTINUE
+              </>
+            ) : (
+              <>
+                <ShoppingBag className="h-5 w-5 mr-2" />
+                {listingType === 'wtb' ? 'POST WANT TO BUY' : 'LIST GEAR FOR SALE'}
+              </>
+            )}
+          </Button>
+        </form>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/CreateShopPage.tsx b/src/src/pages/CreateShopPage.tsx
new file mode 100644
index 0000000..03ad43b
--- /dev/null
+++ b/src/src/pages/CreateShopPage.tsx
@@ -0,0 +1,509 @@
+import { useState, useEffect } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import ngeohash from 'ngeohash';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useUploadFile } from '@/hooks/useUploadFile';
+import { useToast } from '@/hooks/useToast';
+import { ShopBountyCard } from '@/components/ShopBountyCard';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { SKATE_SHOP_KIND } from '@/lib/types';
+import {
+  Store,
+  Upload,
+  X,
+  Loader2,
+  ArrowLeft,
+  MapPin,
+} from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+export default function CreateShopPage() {
+  useSeoMeta({
+    title: 'Add a Skate Shop - SkateSpots',
+    description: 'Add your skate shop to the community.',
+  });
+
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { user } = useCurrentUser();
+  const { mutateAsync: createEvent, isPending: isPublishing } = useNostrPublish();
+  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+  const { toast } = useToast();
+
+  // Form state
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [location, setLocation] = useState('');
+  const [latitude, setLatitude] = useState('');
+  const [longitude, setLongitude] = useState('');
+  const [phone, setPhone] = useState('');
+  const [email, setEmail] = useState('');
+  const [website, setWebsite] = useState('');
+  const [instagram, setInstagram] = useState('');
+  const [hours, setHours] = useState('');
+  const [images, setImages] = useState<string[]>([]);
+  const [isGettingLocation, setIsGettingLocation] = useState(false);
+
+  // Pre-fill coordinates from URL params (from map click)
+  useEffect(() => {
+    const lat = searchParams.get('lat');
+    const lng = searchParams.get('lng');
+    if (lat && lng) {
+      setLatitude(lat);
+      setLongitude(lng);
+    }
+  }, [searchParams]);
+
+  const getCurrentLocation = () => {
+    if (!navigator.geolocation) {
+      toast({
+        title: 'Geolocation not supported',
+        description: 'Your browser does not support geolocation.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    setIsGettingLocation(true);
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        setLatitude(position.coords.latitude.toFixed(6));
+        setLongitude(position.coords.longitude.toFixed(6));
+        setIsGettingLocation(false);
+        toast({
+          title: 'Location found',
+          description: 'Your current location has been set.',
+        });
+      },
+      (error) => {
+        setIsGettingLocation(false);
+        toast({
+          title: 'Location error',
+          description: error.message,
+          variant: 'destructive',
+        });
+      }
+    );
+  };
+
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    try {
+      const file = files[0];
+      const tags = await uploadFile(file);
+      const url = tags[0]?.[1];
+      if (url) {
+        setImages((prev) => [...prev, url]);
+        toast({
+          title: 'Image uploaded',
+          description: 'Your image has been uploaded successfully.',
+        });
+      }
+    } catch (error) {
+      toast({
+        title: 'Upload failed',
+        description: error instanceof Error ? error.message : 'Failed to upload image',
+        variant: 'destructive',
+      });
+    }
+
+    // Clear the input
+    e.target.value = '';
+  };
+
+  const removeImage = (url: string) => {
+    setImages((prev) => prev.filter((img) => img !== url));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!name.trim()) {
+      toast({
+        title: 'Shop name required',
+        description: 'Please enter a name for your shop.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (!location.trim()) {
+      toast({
+        title: 'Address required',
+        description: 'Please enter your shop address.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (!latitude || !longitude) {
+      toast({
+        title: 'Location required',
+        description: 'Please enter coordinates or use your current location.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    const lat = parseFloat(latitude);
+    const lng = parseFloat(longitude);
+
+    if (isNaN(lat) || isNaN(lng) || lat < -90 || lat > 90 || lng < -180 || lng > 180) {
+      toast({
+        title: 'Invalid coordinates',
+        description: 'Please enter valid latitude (-90 to 90) and longitude (-180 to 180).',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    try {
+      // Generate geohash from coordinates (7 chars = ~153m precision)
+      const geohash = ngeohash.encode(lat, lng, 7);
+
+      // Create unique identifier for addressable event
+      const identifier = name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-|-$/g, '')
+        .slice(0, 50) + '-' + Date.now().toString(36);
+
+      // Build tags according to NIP-15 and custom extensions
+      const tags: string[][] = [
+        ['d', identifier], // Required for addressable events
+        ['name', name.trim()],
+        ['g', geohash],
+        ['t', 'skateshop'], // Primary identifier for shop events
+        ['lat', lat.toString()],
+        ['lon', lng.toString()],
+        ['location', location.trim()],
+      ];
+
+      if (phone.trim()) {
+        tags.push(['phone', phone.trim()]);
+      }
+
+      if (email.trim()) {
+        tags.push(['email', email.trim()]);
+      }
+
+      if (website.trim()) {
+        tags.push(['website', website.trim()]);
+      }
+
+      if (instagram.trim()) {
+        tags.push(['instagram', instagram.trim()]);
+      }
+
+      if (hours.trim()) {
+        tags.push(['hours', hours.trim()]);
+      }
+
+      for (const imageUrl of images) {
+        // Use imeta tag for NIP-92 compatibility
+        tags.push(['imeta', `url ${imageUrl}`, 'm image/jpeg']);
+      }
+
+      console.log('Publishing shop event:', {
+        kind: SKATE_SHOP_KIND,
+        tags,
+        content: description.trim()
+      });
+
+      await createEvent({
+        kind: SKATE_SHOP_KIND,
+        content: description.trim(),
+        tags,
+      });
+
+      toast({
+        title: '🎉 Shop added!',
+        description: 'Your skate shop is now on the map. Skaters can zap you to say thanks!',
+      });
+
+      // Navigate to shop detail using pubkey and identifier
+      navigate(`/shop/${user?.pubkey}/${identifier}`);
+    } catch (error) {
+      console.error('Failed to create shop:', error);
+      toast({
+        title: 'Failed to publish',
+        description: error instanceof Error ? error.message : 'Something went wrong. Check console for details.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  if (!user) {
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="max-w-xl mx-auto border-dashed">
+            <CardContent className="py-12 text-center">
+              <Store className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+              <h2 className="text-xl font-bold mb-2">Login Required</h2>
+              <p className="text-muted-foreground mb-6">
+                You need to log in to add a skate shop.
+              </p>
+              <LoginArea className="justify-center" />
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="container px-4 sm:px-6 py-6 sm:py-8 max-w-2xl">
+        <div className="mb-6">
+          <Link to="/map" className="inline-flex items-center text-gray-400 hover:text-white transition-colors mb-4">
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Back to Map
+          </Link>
+          <h1 className="text-3xl font-black uppercase neon-lime" style={{
+            fontFamily: 'Impact, "Arial Black", sans-serif'
+          }}>Add a Skate Shop</h1>
+          <p className="text-gray-400 mt-1">
+            List your shop on the map and connect with the community
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <Card className="bg-black/90 border-2 border-[#ccff00]/30">
+            <CardHeader>
+              <CardTitle className="text-[#ccff00] uppercase font-black">Shop Details</CardTitle>
+              <CardDescription className="text-gray-400">
+                Tell the community about your shop. All fields marked with * are required.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {/* Shop Name */}
+              <div className="space-y-2">
+                <Label htmlFor="name">Shop Name *</Label>
+                <Input
+                  id="name"
+                  placeholder="e.g., Supreme Los Angeles"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  required
+                />
+              </div>
+
+              {/* Description */}
+              <div className="space-y-2">
+                <Label htmlFor="description">Description</Label>
+                <Textarea
+                  id="description"
+                  placeholder="Tell people about your shop, what you sell, your specialty..."
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  rows={4}
+                />
+              </div>
+
+              {/* Location Address */}
+              <div className="space-y-2">
+                <Label htmlFor="location">Shop Address *</Label>
+                <Input
+                  id="location"
+                  placeholder="e.g., 411 N Fairfax Ave, Los Angeles, CA 90036"
+                  value={location}
+                  onChange={(e) => setLocation(e.target.value)}
+                  required
+                />
+              </div>
+
+              {/* Coordinates */}
+              <div className="space-y-2">
+                <Label>Coordinates *</Label>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <Input
+                      placeholder="Latitude (e.g., 34.0737)"
+                      value={latitude}
+                      onChange={(e) => setLatitude(e.target.value)}
+                      required
+                    />
+                  </div>
+                  <div>
+                    <Input
+                      placeholder="Longitude (e.g., -118.3614)"
+                      value={longitude}
+                      onChange={(e) => setLongitude(e.target.value)}
+                      required
+                    />
+                  </div>
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={getCurrentLocation}
+                  disabled={isGettingLocation}
+                  className="mt-2"
+                >
+                  {isGettingLocation ? (
+                    <>
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                      Getting location...
+                    </>
+                  ) : (
+                    <>
+                      <MapPin className="h-4 w-4 mr-2" />
+                      Use my current location
+                    </>
+                  )}
+                </Button>
+              </div>
+
+              {/* Contact Information */}
+              <div className="space-y-3 p-4 rounded-lg border-2 border-[#ccff00]/30 bg-[#ccff00]/5">
+                <div className="flex items-center gap-2 mb-2">
+                  <span className="text-2xl">📞</span>
+                  <Label className="text-base font-bold text-[#ccff00]">Contact Information</Label>
+                </div>
+                <p className="text-sm text-gray-400 mb-3">
+                  Help customers reach you (at least one contact method recommended)
+                </p>
+                
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="phone">Phone Number</Label>
+                    <Input
+                      id="phone"
+                      type="tel"
+                      placeholder="+1 234 567 8900"
+                      value={phone}
+                      onChange={(e) => setPhone(e.target.value)}
+                      className="bg-black border-[#ccff00]/30"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="email">Email</Label>
+                    <Input
+                      id="email"
+                      type="email"
+                      placeholder="shop@example.com"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      className="bg-black border-[#ccff00]/30"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="website">Website</Label>
+                    <Input
+                      id="website"
+                      type="url"
+                      placeholder="https://myshop.com"
+                      value={website}
+                      onChange={(e) => setWebsite(e.target.value)}
+                      className="bg-black border-[#ccff00]/30"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="instagram">Instagram</Label>
+                    <Input
+                      id="instagram"
+                      placeholder="@shopname"
+                      value={instagram}
+                      onChange={(e) => setInstagram(e.target.value)}
+                      className="bg-black border-[#ccff00]/30"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Hours of Operation */}
+              <div className="space-y-2">
+                <Label htmlFor="hours">Hours of Operation</Label>
+                <Input
+                  id="hours"
+                  placeholder="e.g., Mon-Sat 10AM-8PM, Sun 12PM-6PM"
+                  value={hours}
+                  onChange={(e) => setHours(e.target.value)}
+                />
+              </div>
+
+              {/* Images */}
+              <div className="space-y-2">
+                <Label>Shop Photos</Label>
+                <div className="grid grid-cols-3 gap-4">
+                  {images.map((url) => (
+                    <div key={url} className="relative aspect-video rounded-lg overflow-hidden bg-muted">
+                      <img src={url} alt="Shop" className="w-full h-full object-cover" />
+                      <button
+                        type="button"
+                        onClick={() => removeImage(url)}
+                        className="absolute top-1 right-1 p-1 rounded-full bg-background/80 hover:bg-destructive hover:text-destructive-foreground transition-colors"
+                      >
+                        <X className="h-4 w-4" />
+                      </button>
+                    </div>
+                  ))}
+                  <label className="aspect-video rounded-lg border-2 border-dashed flex flex-col items-center justify-center cursor-pointer hover:bg-muted/50 transition-colors">
+                    <input
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={handleImageUpload}
+                      disabled={isUploading}
+                    />
+                    {isUploading ? (
+                      <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                    ) : (
+                      <>
+                        <Upload className="h-6 w-6 text-muted-foreground mb-1" />
+                        <span className="text-xs text-muted-foreground">Upload</span>
+                      </>
+                    )}
+                  </label>
+                </div>
+              </div>
+
+              {/* Quality Meter */}
+              <ShopBountyCard
+                hasName={!!name.trim()}
+                hasAddress={!!location.trim()}
+                hasCoordinates={!!latitude && !!longitude}
+                hasDescription={!!description.trim()}
+                hasPhone={!!phone.trim()}
+                hasWebsite={!!website.trim()}
+                hasHours={!!hours.trim()}
+                photoCount={images.length}
+              />
+
+              {/* Submit */}
+              <Button
+                type="submit"
+                className="w-full bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-black uppercase"
+                disabled={isPublishing || isUploading}
+              >
+                {isPublishing ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Publishing...
+                  </>
+                ) : (
+                  <>
+                    <Store className="h-4 w-4 mr-2" />
+                    Add Shop
+                  </>
+                )}
+              </Button>
+            </CardContent>
+          </Card>
+        </form>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/CreateSpotPage.tsx b/src/src/pages/CreateSpotPage.tsx
new file mode 100644
index 0000000..7dff25a
--- /dev/null
+++ b/src/src/pages/CreateSpotPage.tsx
@@ -0,0 +1,645 @@
+import { useState, useEffect } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import ngeohash from 'ngeohash';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useUploadFile } from '@/hooks/useUploadFile';
+import { useToast } from '@/hooks/useToast';
+import { useTranslation } from '@/contexts/LanguageContext';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { QualityMeter } from '@/components/QualityMeter';
+import { TagInput } from '@/components/TagInput';
+import { SKATE_SPOT_KIND } from '@/lib/types';
+import { spotCategories, MAX_TAGS } from '@/lib/skateTags';
+import { cn } from '@/lib/utils';
+import {
+  MapPin,
+  Upload,
+  X,
+  Loader2,
+  ArrowLeft,
+  Check,
+  Camera,
+} from 'lucide-react';
+import { CameraCapture } from '@/components/CameraCapture';
+import { Link } from 'react-router-dom';
+
+
+
+export default function CreateSpotPage() {
+  const { t } = useTranslation();
+  
+  useSeoMeta({
+    title: 'Add a Skate Spot - SkateSpots',
+    description: 'Share a new skateboarding spot with the community.',
+  });
+
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { user } = useCurrentUser();
+  const { mutateAsync: createEvent, isPending: isPublishing } = useNostrPublish();
+  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+  const { toast } = useToast();
+
+  // Form state
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [location, setLocation] = useState('');
+  const [latitude, setLatitude] = useState('');
+  const [longitude, setLongitude] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<string>('');
+  const [tags, setTags] = useState<string[]>([]);
+  const [accessType, setAccessType] = useState<'public' | 'private' | 'locals'>('public');
+  const [contactInfo, setContactInfo] = useState('');
+  const [images, setImages] = useState<string[]>([]);
+  const [isGettingLocation, setIsGettingLocation] = useState(false);
+  const [showCamera, setShowCamera] = useState(false);
+
+  // Pre-fill coordinates from URL params (from map click)
+  useEffect(() => {
+    const lat = searchParams.get('lat');
+    const lng = searchParams.get('lng');
+    if (lat && lng) {
+      setLatitude(lat);
+      setLongitude(lng);
+    }
+    
+    // Check for quick capture image from map page
+    const quickCapture = searchParams.get('quickCapture');
+    if (quickCapture === 'true') {
+      const capturedImage = sessionStorage.getItem('quickCaptureImage');
+      if (capturedImage) {
+        setImages([capturedImage]);
+        sessionStorage.removeItem('quickCaptureImage');
+      }
+    }
+  }, [searchParams]);
+
+  const handleCategoryChange = (category: string) => {
+    setSelectedCategory(category);
+  };
+
+  const getCurrentLocation = () => {
+    if (!navigator.geolocation) {
+      toast({
+        title: 'Geolocation not supported',
+        description: 'Your browser does not support geolocation.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    setIsGettingLocation(true);
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        setLatitude(position.coords.latitude.toFixed(6));
+        setLongitude(position.coords.longitude.toFixed(6));
+        setIsGettingLocation(false);
+        toast({
+          title: 'Location found',
+          description: 'Your current location has been set.',
+        });
+      },
+      (error) => {
+        setIsGettingLocation(false);
+        toast({
+          title: 'Location error',
+          description: error.message,
+          variant: 'destructive',
+        });
+      }
+    );
+  };
+
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    try {
+      const file = files[0];
+      const tags = await uploadFile(file);
+      const url = tags[0]?.[1];
+      if (url) {
+        setImages((prev) => [...prev, url]);
+        toast({
+          title: 'Image uploaded',
+          description: 'Your image has been uploaded successfully.',
+        });
+      }
+    } catch (error) {
+      toast({
+        title: 'Upload failed',
+        description: error instanceof Error ? error.message : 'Failed to upload image',
+        variant: 'destructive',
+      });
+    }
+
+    // Clear the input
+    e.target.value = '';
+  };
+
+  // Handle camera capture
+  const handleCameraCapture = async (file: File) => {
+    try {
+      const tags = await uploadFile(file);
+      const url = tags[0]?.[1];
+      if (url) {
+        setImages((prev) => [...prev, url]);
+        setShowCamera(false);
+        toast({
+          title: 'Photo captured!',
+          description: 'Your photo has been uploaded successfully.',
+        });
+      }
+    } catch (error) {
+      toast({
+        title: 'Upload failed',
+        description: error instanceof Error ? error.message : 'Failed to upload photo',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const removeImage = (url: string) => {
+    setImages((prev) => prev.filter((img) => img !== url));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!title.trim()) {
+      toast({
+        title: 'Title required',
+        description: 'Please enter a name for this spot.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (!latitude || !longitude) {
+      toast({
+        title: 'Location required',
+        description: 'Please enter coordinates or use your current location.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    const lat = parseFloat(latitude);
+    const lng = parseFloat(longitude);
+
+    if (isNaN(lat) || isNaN(lng) || lat < -90 || lat > 90 || lng < -180 || lng > 180) {
+      toast({
+        title: 'Invalid coordinates',
+        description: 'Please enter valid latitude (-90 to 90) and longitude (-180 to 180).',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    try {
+      // Generate geohash from coordinates (7 chars = ~153m precision)
+      const geohash = ngeohash.encode(lat, lng, 7);
+
+      // Create unique identifier for addressable event
+      const identifier = title
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-|-$/g, '')
+        .slice(0, 50) + '-' + Date.now().toString(36);
+
+      // Build event tags
+      const eventTags: string[][] = [
+        ['d', identifier], // Required for addressable events
+        ['title', title.trim()],
+        ['g', geohash],
+        ['t', 'skatespot'], // Primary identifier for spot events
+        ['access', accessType],
+        ['lat', lat.toString()],
+        ['lon', lng.toString()],
+      ];
+
+      if (location.trim()) {
+        eventTags.push(['location', location.trim()]);
+      }
+
+      if (contactInfo.trim()) {
+        eventTags.push(['contact', contactInfo.trim()]);
+      }
+
+      // Add category as dedicated tag (new format)
+      if (selectedCategory) {
+        eventTags.push(['category', selectedCategory]);
+        // Also add as t tag for backwards compatibility and relay filtering
+        eventTags.push(['t', selectedCategory]);
+      }
+      
+      // Add all freeform tags
+      for (const tag of tags) {
+        eventTags.push(['t', tag]);
+      }
+
+      // Add images
+      for (const imageUrl of images) {
+        // Use imeta tag for NIP-92 compatibility
+        eventTags.push(['imeta', `url ${imageUrl}`, 'm image/jpeg']);
+      }
+      
+      // Add alt tag for NIP-31 (human-readable description)
+      eventTags.push(['alt', `Skate spot: ${title.trim()}`]);
+
+      console.log('Publishing spot event:', {
+        kind: SKATE_SPOT_KIND,
+        tags: eventTags,
+        content: description.trim()
+      });
+
+      await createEvent({
+        kind: SKATE_SPOT_KIND,
+        content: description.trim(),
+        tags: eventTags,
+      });
+
+      toast({
+        title: 'Spot added!',
+        description: 'Your skate spot has been published to the network.',
+      });
+
+      // Navigate to spot detail using pubkey and identifier
+      navigate(`/spot/${user?.pubkey}/${identifier}`);
+    } catch (error) {
+      console.error('Failed to create spot:', error);
+      toast({
+        title: 'Failed to publish',
+        description: error instanceof Error ? error.message : 'Something went wrong. Check console for details.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  if (!user) {
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="max-w-xl mx-auto border-dashed">
+            <CardContent className="py-12 text-center">
+              <MapPin className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+              <h2 className="text-xl font-bold mb-2">{t('errors.loginRequired')}</h2>
+              <p className="text-muted-foreground mb-6">
+                {t('createSpot.loginToAdd')}
+              </p>
+              <LoginArea className="justify-center" />
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="container px-4 sm:px-6 py-6 sm:py-8 max-w-2xl">
+        <div className="mb-6">
+          <Link to="/map" className="inline-flex items-center text-gray-400 hover:text-white transition-colors mb-4">
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            {t('createSpot.backToMap')}
+          </Link>
+          <h1 className="text-3xl font-black uppercase neon-red" style={{
+            fontFamily: 'Impact, "Arial Black", sans-serif'
+          }}>{t('createSpot.title')}</h1>
+          <p className="text-gray-400 mt-1">
+            {t('createSpot.subtitle')}
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <Card className="bg-black/90 border-2 border-[#ff0040]/30">
+            <CardHeader>
+              <CardTitle className="text-[#ff0040] uppercase font-black">{t('spots.spotDetails')}</CardTitle>
+              <CardDescription className="text-gray-400">
+                {t('createSpot.requiredFields')}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {/* Title */}
+              <div className="space-y-2">
+                <Label htmlFor="title">{t('spots.spotName')} *</Label>
+                <Input
+                  id="title"
+                  placeholder={t('createSpot.namePlaceholder')}
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  required
+                />
+              </div>
+
+              {/* Description */}
+              <div className="space-y-2">
+                <Label htmlFor="description">{t('spots.description')}</Label>
+                <Textarea
+                  id="description"
+                  placeholder={t('createSpot.descriptionPlaceholder')}
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  rows={4}
+                />
+              </div>
+
+              {/* Location Address */}
+              <div className="space-y-2">
+                <Label htmlFor="location">{t('spots.address')}</Label>
+                <Input
+                  id="location"
+                  placeholder={t('createSpot.addressPlaceholder')}
+                  value={location}
+                  onChange={(e) => setLocation(e.target.value)}
+                />
+              </div>
+
+              {/* Coordinates */}
+              <div className="space-y-2">
+                <Label>{t('createSpot.coordinates')} *</Label>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <Input
+                      placeholder={t('createSpot.latitudePlaceholder')}
+                      value={latitude}
+                      onChange={(e) => setLatitude(e.target.value)}
+                      required
+                    />
+                  </div>
+                  <div>
+                    <Input
+                      placeholder={t('createSpot.longitudePlaceholder')}
+                      value={longitude}
+                      onChange={(e) => setLongitude(e.target.value)}
+                      required
+                    />
+                  </div>
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={getCurrentLocation}
+                  disabled={isGettingLocation}
+                  className="mt-2"
+                >
+                  {isGettingLocation ? (
+                    <>
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                      {t('createSpot.gettingLocation')}
+                    </>
+                  ) : (
+                    <>
+                      <MapPin className="h-4 w-4 mr-2" />
+                      {t('createSpot.useCurrentLocation')}
+                    </>
+                  )}
+                </Button>
+              </div>
+
+              {/* Access Type */}
+              <div className="space-y-3">
+                <Label className="text-base font-bold">{t('createSpot.accessType')} *</Label>
+                <div className="space-y-2">
+                  {/* Public */}
+                  <Card
+                    className={cn(
+                      "cursor-pointer transition-all border-2",
+                      accessType === 'public'
+                        ? "bg-[#ff0040]/10 border-[#ff0040] ring-2 ring-[#ff0040]/50"
+                        : "border-gray-700 hover:border-[#ff0040]/50"
+                    )}
+                    onClick={() => setAccessType('public')}
+                  >
+                    <CardContent className="p-4">
+                      <div className="flex items-start gap-3">
+                        <div className="text-2xl">🌍</div>
+                        <div className="flex-1">
+                          <h4 className="font-bold text-white mb-1">{t('createSpot.publicTitle')}</h4>
+                          <p className="text-sm text-gray-400">{t('createSpot.publicDesc')}</p>
+                        </div>
+                        {accessType === 'public' && (
+                          <div className="w-6 h-6 rounded-full bg-[#ff0040] flex items-center justify-center">
+                            <span className="text-white text-xs">✓</span>
+                          </div>
+                        )}
+                      </div>
+                    </CardContent>
+                  </Card>
+
+                  {/* Private */}
+                  <Card
+                    className={cn(
+                      "cursor-pointer transition-all border-2",
+                      accessType === 'private'
+                        ? "bg-[#ff6600]/10 border-[#ff6600] ring-2 ring-[#ff6600]/50"
+                        : "border-gray-700 hover:border-[#ff6600]/50"
+                    )}
+                    onClick={() => setAccessType('private')}
+                  >
+                    <CardContent className="p-4">
+                      <div className="flex items-start gap-3">
+                        <div className="text-2xl">🔒</div>
+                        <div className="flex-1">
+                          <h4 className="font-bold text-white mb-1">{t('createSpot.privateTitle')}</h4>
+                          <p className="text-sm text-gray-400">{t('createSpot.privateDesc')}</p>
+                        </div>
+                        {accessType === 'private' && (
+                          <div className="w-6 h-6 rounded-full bg-[#ff6600] flex items-center justify-center">
+                            <span className="text-white text-xs">✓</span>
+                          </div>
+                        )}
+                      </div>
+                    </CardContent>
+                  </Card>
+
+                  {/* Ask Locals */}
+                  <Card
+                    className={cn(
+                      "cursor-pointer transition-all border-2",
+                      accessType === 'locals'
+                        ? "bg-[#ccff00]/10 border-[#ccff00] ring-2 ring-[#ccff00]/50"
+                        : "border-gray-700 hover:border-[#ccff00]/50"
+                    )}
+                    onClick={() => setAccessType('locals')}
+                  >
+                    <CardContent className="p-4">
+                      <div className="flex items-start gap-3">
+                        <div className="text-2xl">👥</div>
+                        <div className="flex-1">
+                          <h4 className="font-bold text-white mb-1">{t('createSpot.localsTitle')}</h4>
+                          <p className="text-sm text-gray-400">{t('createSpot.localsDesc')}</p>
+                        </div>
+                        {accessType === 'locals' && (
+                          <div className="w-6 h-6 rounded-full bg-[#ccff00] flex items-center justify-center">
+                            <span className="text-black text-xs">✓</span>
+                          </div>
+                        )}
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+              </div>
+
+              {/* Contact Info for Private/Locals */}
+              {(accessType === 'private' || accessType === 'locals') && (
+                <div className="space-y-2">
+                  <Label htmlFor="contact">{t('createSpot.contactInfo')}</Label>
+                  <Input
+                    id="contact"
+                    placeholder={t('createSpot.contactPlaceholder')}
+                    value={contactInfo}
+                    onChange={(e) => setContactInfo(e.target.value)}
+                    className="bg-black border-[#ff6600]/30"
+                  />
+                  <p className="text-xs text-gray-400">
+                    {accessType === 'private'
+                      ? t('createSpot.contactHintPrivate')
+                      : t('createSpot.contactHintLocals')}
+                  </p>
+                </div>
+              )}
+
+              {/* Spot Category (required, mutually exclusive) */}
+              <div className="space-y-3">
+                <Label className="text-base font-bold">{t('spots.spotType')} *</Label>
+                <div className="grid grid-cols-2 gap-2">
+                  {spotCategories.map((category) => (
+                    <Card
+                      key={category.value}
+                      className={cn(
+                        "cursor-pointer transition-all border-2 touch-manipulation active:scale-[0.98]",
+                        selectedCategory === category.value
+                          ? "bg-[#ff0040]/10 border-[#ff0040] ring-2 ring-[#ff0040]/50"
+                          : "border-gray-700 hover:border-[#ff0040]/50"
+                      )}
+                      onClick={() => handleCategoryChange(category.value)}
+                    >
+                      <CardContent className="p-3 sm:p-4 text-center relative">
+                        <div className="font-bold text-sm sm:text-base">{category.label}</div>
+                        <div className="text-xs text-gray-400 mt-1">{category.description}</div>
+                        {selectedCategory === category.value && (
+                          <div className="absolute top-1 right-1 w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-[#ff0040] flex items-center justify-center">
+                            <Check className="h-2.5 w-2.5 sm:h-3 sm:w-3 text-white" />
+                          </div>
+                        )}
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+
+              {/* Freeform Tags */}
+              <div className="space-y-3">
+                <Label className="text-base font-bold">Tags</Label>
+                <p className="text-xs text-gray-400 -mt-1">
+                  Add tags for features, surfaces, vibes (max {MAX_TAGS})
+                </p>
+                <TagInput
+                  tags={tags}
+                  onChange={setTags}
+                  placeholder="Type to search or add tags..."
+                  maxTags={MAX_TAGS}
+                />
+              </div>
+
+              {/* Images */}
+              <div className="space-y-2">
+                <Label>{t('spots.photos')}</Label>
+                <div className="grid grid-cols-3 gap-4">
+                  {images.map((url) => (
+                    <div key={url} className="relative aspect-video rounded-lg overflow-hidden bg-muted">
+                      <img src={url} alt="Spot" className="w-full h-full object-cover" />
+                      <button
+                        type="button"
+                        onClick={() => removeImage(url)}
+                        className="absolute top-1 right-1 p-1 rounded-full bg-background/80 hover:bg-destructive hover:text-destructive-foreground transition-colors"
+                      >
+                        <X className="h-4 w-4" />
+                      </button>
+                    </div>
+                  ))}
+                  {/* Camera capture button */}
+                  <button
+                    type="button"
+                    onClick={() => setShowCamera(true)}
+                    disabled={isUploading}
+                    className="aspect-video rounded-lg border-2 border-dashed border-[#ff0040]/50 flex flex-col items-center justify-center cursor-pointer hover:bg-[#ff0040]/10 hover:border-[#ff0040] transition-colors"
+                  >
+                    <Camera className="h-6 w-6 text-[#ff0040] mb-1" />
+                    <span className="text-xs text-[#ff0040] font-bold">Take Photo</span>
+                  </button>
+                  {/* File upload button */}
+                  <label className="aspect-video rounded-lg border-2 border-dashed border-gray-600 flex flex-col items-center justify-center cursor-pointer hover:bg-muted/50 hover:border-gray-500 transition-colors">
+                    <input
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={handleImageUpload}
+                      disabled={isUploading}
+                    />
+                    {isUploading ? (
+                      <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                    ) : (
+                      <>
+                        <Upload className="h-6 w-6 text-muted-foreground mb-1" />
+                        <span className="text-xs text-muted-foreground">{t('createSpot.uploadPhotos')}</span>
+                      </>
+                    )}
+                  </label>
+                </div>
+              </div>
+
+              {/* Camera Capture Dialog */}
+              <CameraCapture
+                open={showCamera}
+                onOpenChange={setShowCamera}
+                onCapture={handleCameraCapture}
+                isUploading={isUploading}
+              />
+
+              {/* Quality Meter */}
+              <QualityMeter
+                type="spot"
+                hasLocation={!!(latitude && longitude)}
+                hasPhotos={images.length > 0}
+                photoCount={images.length}
+                hasDescription={description.trim().length > 0}
+                descriptionLength={description.trim().length}
+                hasSpotType={!!selectedCategory}
+              />
+
+              {/* Submit */}
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={isPublishing || isUploading}
+              >
+                {isPublishing ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    {t('createSpot.publishing')}
+                  </>
+                ) : (
+                  <>
+                    <MapPin className="h-4 w-4 mr-2" />
+                    {t('home.addSpot')}
+                  </>
+                )}
+              </Button>
+            </CardContent>
+          </Card>
+        </form>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/CreateTourPage.tsx b/src/src/pages/CreateTourPage.tsx
new file mode 100644
index 0000000..fa9bb36
--- /dev/null
+++ b/src/src/pages/CreateTourPage.tsx
@@ -0,0 +1,2215 @@
+import { useState, useEffect } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import ngeohash from 'ngeohash';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Slider } from '@/components/ui/slider';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useUploadFile } from '@/hooks/useUploadFile';
+import { useShops } from '@/hooks/useShops';
+import { useToast } from '@/hooks/useToast';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { SKATE_TOUR_KIND, TOUR_SKILL_LEVELS, TOUR_SPOT_TYPES, TOUR_CATEGORIES, type TourCategory, type DestructionChallenge } from '@/lib/types';
+import {
+  Route,
+  Upload,
+  X,
+  Loader2,
+  ArrowLeft,
+  MapPin,
+  Clock,
+  Users,
+  Zap,
+  Globe,
+  Info,
+  ChevronDown,
+  Store,
+  Percent,
+  Plane,
+  Car,
+  Skull,
+  Trophy,
+  Target,
+  Plus,
+  Trash2,
+  Calendar,
+  Eye,
+  EyeOff,
+} from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { cn } from '@/lib/utils';
+
+// Common languages shown by default
+const COMMON_LANGUAGES = [
+  { code: 'en', label: 'English', flag: '🇺🇸' },
+  { code: 'es', label: 'Spanish', flag: '🇪🇸' },
+  { code: 'pt', label: 'Portuguese', flag: '🇧🇷' },
+  { code: 'fr', label: 'French', flag: '🇫🇷' },
+  { code: 'de', label: 'German', flag: '🇩🇪' },
+  { code: 'it', label: 'Italian', flag: '🇮🇹' },
+  { code: 'ja', label: 'Japanese', flag: '🇯🇵' },
+  { code: 'zh', label: 'Chinese', flag: '🇨🇳' },
+];
+
+// Extended language list (shown when expanded)
+const ALL_LANGUAGES = [
+  // Common (also in COMMON_LANGUAGES)
+  { code: 'en', label: 'English', flag: '🇺🇸' },
+  { code: 'es', label: 'Spanish', flag: '🇪🇸' },
+  { code: 'pt', label: 'Portuguese', flag: '🇧🇷' },
+  { code: 'fr', label: 'French', flag: '🇫🇷' },
+  { code: 'de', label: 'German', flag: '🇩🇪' },
+  { code: 'it', label: 'Italian', flag: '🇮🇹' },
+  { code: 'ja', label: 'Japanese', flag: '🇯🇵' },
+  { code: 'zh', label: 'Chinese', flag: '🇨🇳' },
+  // European
+  { code: 'nl', label: 'Dutch', flag: '🇳🇱' },
+  { code: 'pl', label: 'Polish', flag: '🇵🇱' },
+  { code: 'ru', label: 'Russian', flag: '🇷🇺' },
+  { code: 'uk', label: 'Ukrainian', flag: '🇺🇦' },
+  { code: 'cs', label: 'Czech', flag: '🇨🇿' },
+  { code: 'sk', label: 'Slovak', flag: '🇸🇰' },
+  { code: 'hu', label: 'Hungarian', flag: '🇭🇺' },
+  { code: 'ro', label: 'Romanian', flag: '🇷🇴' },
+  { code: 'bg', label: 'Bulgarian', flag: '🇧🇬' },
+  { code: 'hr', label: 'Croatian', flag: '🇭🇷' },
+  { code: 'sr', label: 'Serbian', flag: '🇷🇸' },
+  { code: 'sl', label: 'Slovenian', flag: '🇸🇮' },
+  { code: 'el', label: 'Greek', flag: '🇬🇷' },
+  { code: 'tr', label: 'Turkish', flag: '🇹🇷' },
+  { code: 'sv', label: 'Swedish', flag: '🇸🇪' },
+  { code: 'no', label: 'Norwegian', flag: '🇳🇴' },
+  { code: 'da', label: 'Danish', flag: '🇩🇰' },
+  { code: 'fi', label: 'Finnish', flag: '🇫🇮' },
+  { code: 'is', label: 'Icelandic', flag: '🇮🇸' },
+  { code: 'et', label: 'Estonian', flag: '🇪🇪' },
+  { code: 'lv', label: 'Latvian', flag: '🇱🇻' },
+  { code: 'lt', label: 'Lithuanian', flag: '🇱🇹' },
+  { code: 'ca', label: 'Catalan', flag: '🏴󠁥󠁳󠁣󠁴󠁿' },
+  { code: 'eu', label: 'Basque', flag: '🏴' },
+  { code: 'gl', label: 'Galician', flag: '🏴' },
+  // Asian
+  { code: 'ko', label: 'Korean', flag: '🇰🇷' },
+  { code: 'vi', label: 'Vietnamese', flag: '🇻🇳' },
+  { code: 'th', label: 'Thai', flag: '🇹🇭' },
+  { code: 'id', label: 'Indonesian', flag: '🇮🇩' },
+  { code: 'ms', label: 'Malay', flag: '🇲🇾' },
+  { code: 'tl', label: 'Filipino', flag: '🇵🇭' },
+  { code: 'hi', label: 'Hindi', flag: '🇮🇳' },
+  { code: 'bn', label: 'Bengali', flag: '🇧🇩' },
+  { code: 'ta', label: 'Tamil', flag: '🇮🇳' },
+  { code: 'te', label: 'Telugu', flag: '🇮🇳' },
+  { code: 'mr', label: 'Marathi', flag: '🇮🇳' },
+  { code: 'gu', label: 'Gujarati', flag: '🇮🇳' },
+  { code: 'kn', label: 'Kannada', flag: '🇮🇳' },
+  { code: 'ml', label: 'Malayalam', flag: '🇮🇳' },
+  { code: 'pa', label: 'Punjabi', flag: '🇮🇳' },
+  { code: 'ne', label: 'Nepali', flag: '🇳🇵' },
+  { code: 'si', label: 'Sinhala', flag: '🇱🇰' },
+  { code: 'my', label: 'Burmese', flag: '🇲🇲' },
+  { code: 'km', label: 'Khmer', flag: '🇰🇭' },
+  { code: 'lo', label: 'Lao', flag: '🇱🇦' },
+  { code: 'mn', label: 'Mongolian', flag: '🇲🇳' },
+  // Middle Eastern
+  { code: 'ar', label: 'Arabic', flag: '🇸🇦' },
+  { code: 'he', label: 'Hebrew', flag: '🇮🇱' },
+  { code: 'fa', label: 'Persian', flag: '🇮🇷' },
+  { code: 'ur', label: 'Urdu', flag: '🇵🇰' },
+  // African
+  { code: 'sw', label: 'Swahili', flag: '🇰🇪' },
+  { code: 'am', label: 'Amharic', flag: '🇪🇹' },
+  { code: 'zu', label: 'Zulu', flag: '🇿🇦' },
+  { code: 'xh', label: 'Xhosa', flag: '🇿🇦' },
+  { code: 'af', label: 'Afrikaans', flag: '🇿🇦' },
+  { code: 'ha', label: 'Hausa', flag: '🇳🇬' },
+  { code: 'yo', label: 'Yoruba', flag: '🇳🇬' },
+  { code: 'ig', label: 'Igbo', flag: '🇳🇬' },
+  // Americas
+  { code: 'pt-BR', label: 'Brazilian Portuguese', flag: '🇧🇷' },
+  { code: 'es-MX', label: 'Mexican Spanish', flag: '🇲🇽' },
+  { code: 'es-AR', label: 'Argentine Spanish', flag: '🇦🇷' },
+  { code: 'qu', label: 'Quechua', flag: '🇵🇪' },
+  { code: 'gn', label: 'Guarani', flag: '🇵🇾' },
+  // Sign Languages
+  { code: 'asl', label: 'ASL (American Sign)', flag: '🇺🇸' },
+  { code: 'bsl', label: 'BSL (British Sign)', flag: '🇬🇧' },
+  { code: 'lsf', label: 'LSF (French Sign)', flag: '🇫🇷' },
+  { code: 'dgs', label: 'DGS (German Sign)', flag: '🇩🇪' },
+  { code: 'jsl', label: 'JSL (Japanese Sign)', flag: '🇯🇵' },
+  { code: 'auslan', label: 'Auslan (Australian Sign)', flag: '🇦🇺' },
+  { code: 'lse', label: 'LSE (Spanish Sign)', flag: '🇪🇸' },
+  { code: 'libras', label: 'Libras (Brazilian Sign)', flag: '🇧🇷' },
+  // Oceanian
+  { code: 'mi', label: 'Māori', flag: '🇳🇿' },
+  { code: 'haw', label: 'Hawaiian', flag: '🇺🇸' },
+  { code: 'sm', label: 'Samoan', flag: '🇼🇸' },
+  { code: 'to', label: 'Tongan', flag: '🇹🇴' },
+  { code: 'fj', label: 'Fijian', flag: '🇫🇯' },
+  // Additional European
+  { code: 'ga', label: 'Irish (Gaeilge)', flag: '🇮🇪' },
+  { code: 'cy', label: 'Welsh', flag: '🏴󠁧󠁢󠁷󠁬󠁳󠁿' },
+  { code: 'gd', label: 'Scottish Gaelic', flag: '🏴󠁧󠁢󠁳󠁣󠁴󠁿' },
+  { code: 'mt', label: 'Maltese', flag: '🇲🇹' },
+  { code: 'sq', label: 'Albanian', flag: '🇦🇱' },
+  { code: 'mk', label: 'Macedonian', flag: '🇲🇰' },
+  { code: 'bs', label: 'Bosnian', flag: '🇧🇦' },
+  { code: 'be', label: 'Belarusian', flag: '🇧🇾' },
+  { code: 'ka', label: 'Georgian', flag: '🇬🇪' },
+  { code: 'hy', label: 'Armenian', flag: '🇦🇲' },
+  { code: 'az', label: 'Azerbaijani', flag: '🇦🇿' },
+  // Central Asian
+  { code: 'kk', label: 'Kazakh', flag: '🇰🇿' },
+  { code: 'uz', label: 'Uzbek', flag: '🇺🇿' },
+  { code: 'tg', label: 'Tajik', flag: '🇹🇯' },
+  { code: 'ky', label: 'Kyrgyz', flag: '🇰🇬' },
+  { code: 'tk', label: 'Turkmen', flag: '🇹🇲' },
+  // Additional African
+  { code: 'so', label: 'Somali', flag: '🇸🇴' },
+  { code: 'rw', label: 'Kinyarwanda', flag: '🇷🇼' },
+  { code: 'sn', label: 'Shona', flag: '🇿🇼' },
+  { code: 'mg', label: 'Malagasy', flag: '🇲🇬' },
+  { code: 'wo', label: 'Wolof', flag: '🇸🇳' },
+  // Caribbean & Creoles
+  { code: 'ht', label: 'Haitian Creole', flag: '🇭🇹' },
+  { code: 'pap', label: 'Papiamento', flag: '🇨🇼' },
+  { code: 'jm', label: 'Jamaican Patois', flag: '🇯🇲' },
+];
+
+export default function CreateTourPage() {
+  useSeoMeta({
+    title: 'Create a Tour - SkateSpots',
+    description: 'Organize skate tours - local hidden gem tours, national road trips, international adventures, or KOTR-style destruction competitions.',
+  });
+
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { user, metadata, isLoadingProfile } = useCurrentUser();
+  const { mutateAsync: createEvent, isPending: isPublishing } = useNostrPublish();
+  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+  const { toast } = useToast();
+
+  // Tour category state
+  const [tourCategory, setTourCategory] = useState<TourCategory>('local');
+
+  // Form state
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [location, setLocation] = useState(''); // City/region
+  const [meetingPoint, setMeetingPoint] = useState('');
+  const [meetingLat, setMeetingLat] = useState('');
+  const [meetingLng, setMeetingLng] = useState('');
+  const [duration, setDuration] = useState([3]); // Hours/Days depending on category
+  const [durationUnit, setDurationUnit] = useState<'hours' | 'days' | 'weeks'>('hours');
+  const [skillLevel, setSkillLevel] = useState<string>('all');
+  const [spotTypes, setSpotTypes] = useState<string[]>(['street']);
+  const [maxGroupSize, setMaxGroupSize] = useState([4]);
+  const [price, setPrice] = useState('');
+  const [availability, setAvailability] = useState('');
+  const [languages, setLanguages] = useState<string[]>(['en']);
+  const [languagesExpanded, setLanguagesExpanded] = useState(false);
+  const [image, setImage] = useState<string | null>(null);
+  const [isGettingLocation, setIsGettingLocation] = useState(false);
+  
+  // Partner shop state
+  const [partnerShopId, setPartnerShopId] = useState<string>('');
+  const [shopDiscount, setShopDiscount] = useState([10]); // Default 10%
+  const [shopExpanded, setShopExpanded] = useState(false);
+  
+  // National/International specific
+  const [cities, setCities] = useState<string[]>([]);
+  const [newCity, setNewCity] = useState('');
+  const [countries, setCountries] = useState<string[]>([]);
+  const [newCountry, setNewCountry] = useState('');
+  const [transportInfo, setTransportInfo] = useState('');
+  const [accommodationInfo, setAccommodationInfo] = useState('');
+  
+  // World Destruction Tour specific
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [entryFee, setEntryFee] = useState('');
+  const [prizePool, setPrizePool] = useState('');
+  const [prizeDistribution, setPrizeDistribution] = useState([
+    { place: 1, percentage: 50 },
+    { place: 2, percentage: 30 },
+    { place: 3, percentage: 20 },
+  ]);
+  const [maxTeams, setMaxTeams] = useState([4]);
+  const [minTeamSize, setMinTeamSize] = useState([4]);
+  const [maxTeamSize, setMaxTeamSize] = useState([6]);
+  const [challenges, setChallenges] = useState<DestructionChallenge[]>([]);
+  const [acceptedClipSources, setAcceptedClipSources] = useState<string[]>(['blossom', 'youtube', 'instagram']);
+  const [organizerContact, setOrganizerContact] = useState(''); // Organizer contact details
+  
+  // Film release options for World Destruction Tours
+  const [enableFilmRelease, setEnableFilmRelease] = useState(false);
+  const [filmReleaseAtShops, setFilmReleaseAtShops] = useState(true); // Release at partner skate shops
+  const [filmReleaseOnline, setFilmReleaseOnline] = useState(true); // Also release online
+  const [filmReleaseDate, setFilmReleaseDate] = useState(''); // Optional specific date for film release
+  const [showAvailableShops, setShowAvailableShops] = useState(false); // Toggle to show available shops for premieres
+  
+  // Fetch shops for partner selection
+  const { data: shops, isLoading: shopsLoading } = useShops(100);
+  
+  // Update duration unit based on category
+  useEffect(() => {
+    if (tourCategory === 'local') {
+      setDurationUnit('hours');
+      setDuration([3]);
+    } else if (tourCategory === 'national') {
+      setDurationUnit('days');
+      setDuration([5]);
+    } else if (tourCategory === 'international') {
+      setDurationUnit('weeks');
+      setDuration([4]); // Default 4 weeks / 1 month
+    } else if (tourCategory === 'destruction') {
+      // World Destruction uses months (stored as 'months' but we'll use weeks * 4)
+      setDurationUnit('weeks'); // We'll display as months
+      setDuration([4]); // 1 month = 4 weeks
+    }
+  }, [tourCategory]);
+
+  // Challenge management - all challenges are secret until competition start date
+  const addChallenge = () => {
+    const newChallenge: DestructionChallenge = {
+      id: `ch-${Date.now()}`,
+      title: '',
+      description: '',
+      points: 100,
+      isSecret: true, // Always secret until start date
+    };
+    setChallenges([...challenges, newChallenge]);
+  };
+
+  const updateChallenge = (index: number, updates: Partial<DestructionChallenge>) => {
+    const updated = [...challenges];
+    updated[index] = { ...updated[index], ...updates };
+    setChallenges(updated);
+  };
+
+  const removeChallenge = (index: number) => {
+    setChallenges(challenges.filter((_, i) => i !== index));
+  };
+
+  // City/Country management for multi-city tours
+  const addCity = () => {
+    if (newCity.trim() && !cities.includes(newCity.trim())) {
+      setCities([...cities, newCity.trim()]);
+      setNewCity('');
+    }
+  };
+
+  const removeCity = (city: string) => {
+    setCities(cities.filter(c => c !== city));
+  };
+
+  const addCountry = () => {
+    if (newCountry.trim() && !countries.includes(newCountry.trim())) {
+      setCountries([...countries, newCountry.trim()]);
+      setNewCountry('');
+    }
+  };
+
+  const removeCountry = (country: string) => {
+    setCountries(countries.filter(c => c !== country));
+  };
+
+  // Pre-fill coordinates from URL params (from map click)
+  useEffect(() => {
+    const lat = searchParams.get('lat');
+    const lng = searchParams.get('lng');
+    if (lat && lng) {
+      setMeetingLat(lat);
+      setMeetingLng(lng);
+    }
+  }, [searchParams]);
+
+  const getCurrentLocation = () => {
+    if (!navigator.geolocation) {
+      toast({
+        title: 'Geolocation not supported',
+        description: 'Your browser does not support geolocation.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    setIsGettingLocation(true);
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        setMeetingLat(position.coords.latitude.toFixed(6));
+        setMeetingLng(position.coords.longitude.toFixed(6));
+        setIsGettingLocation(false);
+        toast({
+          title: 'Location found',
+          description: 'Your current location has been set as meeting point.',
+        });
+      },
+      (error) => {
+        setIsGettingLocation(false);
+        toast({
+          title: 'Location error',
+          description: error.message,
+          variant: 'destructive',
+        });
+      }
+    );
+  };
+
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    try {
+      const file = files[0];
+      const tags = await uploadFile(file);
+      const url = tags[0]?.[1];
+      if (url) {
+        setImage(url);
+        toast({
+          title: 'Image uploaded',
+          description: 'Your tour image has been uploaded.',
+        });
+      }
+    } catch (error) {
+      toast({
+        title: 'Upload failed',
+        description: error instanceof Error ? error.message : 'Failed to upload image',
+        variant: 'destructive',
+      });
+    }
+
+    e.target.value = '';
+  };
+
+  const toggleSpotType = (type: string) => {
+    setSpotTypes((prev) =>
+      prev.includes(type)
+        ? prev.filter((t) => t !== type)
+        : [...prev, type]
+    );
+  };
+
+  const toggleLanguage = (code: string) => {
+    setLanguages((prev) =>
+      prev.includes(code)
+        ? prev.filter((l) => l !== code)
+        : [...prev, code]
+    );
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!title.trim()) {
+      toast({
+        title: 'Tour title required',
+        description: 'Please enter a name for your tour.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    // Location required only for local/national tours
+    if ((tourCategory === 'local' || tourCategory === 'national') && !location.trim()) {
+      toast({
+        title: 'City/region required',
+        description: 'Please enter your city or region.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    // Meeting point required only for local/national tours
+    if ((tourCategory === 'local' || tourCategory === 'national') && !meetingPoint.trim()) {
+      toast({
+        title: 'Meeting point required',
+        description: 'Please enter where you will meet tour participants.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    // Coordinates required only for local/national tours
+    if ((tourCategory === 'local' || tourCategory === 'national') && (!meetingLat || !meetingLng)) {
+      toast({
+        title: 'Meeting point coordinates required',
+        description: 'Please enter coordinates or use your current location.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    let lat = 0;
+    let lng = 0;
+    if (tourCategory === 'local' || tourCategory === 'national') {
+      lat = parseFloat(meetingLat);
+      lng = parseFloat(meetingLng);
+
+      if (isNaN(lat) || isNaN(lng) || lat < -90 || lat > 90 || lng < -180 || lng > 180) {
+        toast({
+          title: 'Invalid coordinates',
+          description: 'Please enter valid latitude (-90 to 90) and longitude (-180 to 180).',
+          variant: 'destructive',
+        });
+        return;
+      }
+    }
+
+    // Spot types required only for non-destruction tours
+    if (tourCategory !== 'destruction' && spotTypes.length === 0) {
+      toast({
+        title: 'Spot types required',
+        description: 'Please select at least one type of spot you will show.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    // International tour requires at least one country
+    if (tourCategory === 'international' && countries.length === 0) {
+      toast({
+        title: 'Countries required',
+        description: 'Please add at least one country for your international tour.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    // Destruction tour validations
+    if (tourCategory === 'destruction') {
+      if (!startDate) {
+        toast({
+          title: 'Start date required',
+          description: 'Please set when the competition starts (challenges will be revealed on this date).',
+          variant: 'destructive',
+        });
+        return;
+      }
+      if (challenges.length === 0) {
+        toast({
+          title: 'Challenges required',
+          description: 'Please add at least one challenge for teams to complete.',
+          variant: 'destructive',
+        });
+        return;
+      }
+    }
+
+    try {
+      // Generate low-precision geohash for city-level location (4 chars = ~39km)
+      const geohash = ngeohash.encode(lat, lng, 4);
+
+      // Create unique identifier
+      const identifier = title
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-|-$/g, '')
+        .slice(0, 50) + '-' + Date.now().toString(36);
+
+      // Build tags
+      const tags: string[][] = [
+        ['d', identifier],
+        ['title', title.trim()],
+        ['t', 'skate-tour'], // Primary identifier
+        ['tour-category', tourCategory], // Tour category
+      ];
+
+      // Location/geohash only for local/national tours
+      if (tourCategory === 'local' || tourCategory === 'national') {
+        tags.push(['g', geohash]);
+        tags.push(['location', location.trim()]);
+        tags.push(['meeting-point', meetingPoint.trim()]);
+        tags.push(['meeting-point-coords', lat.toString(), lng.toString()]);
+      }
+
+      // Duration - store in appropriate unit
+      const durationVal = tourCategory === 'destruction' 
+        ? duration[0].toString() // weeks (displayed as months)
+        : duration[0].toString();
+      const durationUnitVal = tourCategory === 'destruction' ? 'weeks' : durationUnit;
+      tags.push(['duration', durationVal, durationUnitVal]);
+
+      // Skill level - destruction tours are always advanced
+      if (tourCategory === 'destruction') {
+        tags.push(['skill-level', 'advanced']);
+      } else {
+        tags.push(['skill-level', skillLevel]);
+      }
+
+      // Max group size (not for destruction tours)
+      if (tourCategory !== 'destruction') {
+        tags.push(['max-group', maxGroupSize[0].toString()]);
+      }
+
+      // Add spot type tags - destruction tours include ALL spot types automatically
+      if (tourCategory === 'destruction') {
+        Object.keys(TOUR_SPOT_TYPES).forEach((type) => {
+          tags.push(['t', type]);
+        });
+      } else {
+        spotTypes.forEach((type) => {
+          tags.push(['t', type]);
+        });
+      }
+
+      // Add optional tags
+      if (price && tourCategory !== 'destruction') {
+        tags.push(['price', price]);
+      }
+
+      // Availability only for non-destruction tours
+      if (availability.trim() && tourCategory !== 'destruction') {
+        tags.push(['available', availability.trim()]);
+      }
+
+      if (languages.length > 0) {
+        tags.push(['languages', ...languages]);
+      }
+
+      if (image) {
+        tags.push(['image', image]);
+      }
+
+      // Partner shop discount
+      if (partnerShopId) {
+        const selectedShop = shops?.find(s => `${s.pubkey}:${s.identifier}` === partnerShopId);
+        if (selectedShop) {
+          // Store reference as naddr-like format
+          tags.push(['shop', `30017:${selectedShop.pubkey}:${selectedShop.identifier}`]);
+          tags.push(['shop-name', selectedShop.name]);
+          tags.push(['shop-discount', shopDiscount[0].toString()]);
+        }
+      }
+
+      // ============ NATIONAL/INTERNATIONAL SPECIFIC TAGS ============
+      if (tourCategory === 'national' || tourCategory === 'international') {
+        if (cities.length > 0) {
+          tags.push(['cities', ...cities]);
+        }
+        if (tourCategory === 'international' && countries.length > 0) {
+          tags.push(['countries', ...countries]);
+        }
+        if (transportInfo.trim()) {
+          tags.push(['transport', transportInfo.trim()]);
+        }
+        if (accommodationInfo.trim()) {
+          tags.push(['accommodation', accommodationInfo.trim()]);
+        }
+      }
+
+      // ============ WORLD DESTRUCTION TOUR SPECIFIC TAGS ============
+      if (tourCategory === 'destruction') {
+        // Cities and countries for the competition
+        if (cities.length > 0) {
+          tags.push(['cities', ...cities]);
+        }
+        if (countries.length > 0) {
+          tags.push(['countries', ...countries]);
+        }
+
+        // Organizer contact
+        if (organizerContact.trim()) {
+          tags.push(['organizer-contact', organizerContact.trim()]);
+        }
+
+        // Transport info
+        if (transportInfo.trim()) {
+          tags.push(['transport', transportInfo.trim()]);
+        }
+
+        // Competition dates - challenges are revealed on start date
+        const startTimestamp = startDate ? (new Date(startDate).getTime() / 1000).toString() : '';
+        if (startTimestamp) {
+          tags.push(['start-date', startTimestamp]);
+        }
+        if (endDate) {
+          tags.push(['end-date', (new Date(endDate).getTime() / 1000).toString()]);
+        }
+
+        // Entry fee
+        if (entryFee) {
+          tags.push(['entry-fee', entryFee]);
+        }
+
+        // Prize pool and distribution
+        if (prizePool) {
+          tags.push(['prize-pool', prizePool]);
+          // Format: ["prize-dist", "1", "50", "2", "30", "3", "20"]
+          const distParts = prizeDistribution.flatMap(p => [p.place.toString(), p.percentage.toString()]);
+          tags.push(['prize-dist', ...distParts]);
+        }
+
+        // Team settings
+        tags.push(['max-teams', maxTeams[0].toString()]);
+        tags.push(['min-team-size', minTeamSize[0].toString()]);
+        tags.push(['max-team-size', maxTeamSize[0].toString()]);
+
+        // Challenges - format: ["challenge", "id", "title", "description", "points", "revealDate"]
+        // All challenges are secret and revealed on start date
+        challenges.forEach((ch) => {
+          tags.push(['challenge', ch.id, ch.title, ch.description || '', ch.points.toString(), startTimestamp]);
+        });
+
+        // Accepted clip sources
+        if (acceptedClipSources.length > 0) {
+          tags.push(['clip-sources', ...acceptedClipSources]);
+        }
+
+        // Film release options
+        if (enableFilmRelease) {
+          const releaseOptions: string[] = [];
+          if (filmReleaseAtShops) releaseOptions.push('shops');
+          if (filmReleaseOnline) releaseOptions.push('online');
+          if (releaseOptions.length > 0) {
+            tags.push(['film-release', ...releaseOptions]);
+          }
+          if (filmReleaseDate) {
+            tags.push(['film-release-date', (new Date(filmReleaseDate).getTime() / 1000).toString()]);
+          }
+        }
+      }
+
+      // Platform fee - varies by tour category
+      // Local: 10%, National: 7%, International: 5%, World Destruction: 5%
+      const platformFees: Record<TourCategory, string> = {
+        local: '10',
+        national: '7',
+        international: '5',
+        destruction: '5',
+      };
+      tags.push(['zap-split', 'skatespots@minibits.cash', platformFees[tourCategory]]);
+
+      // NIP-31 alt tag
+      const locationText = tourCategory === 'destruction' || tourCategory === 'international'
+        ? (countries.length > 0 ? countries.join(', ') : cities.join(', '))
+        : location.trim();
+      const altText = tourCategory === 'destruction' 
+        ? `World Destruction Tour: ${title.trim()} - ${locationText}`
+        : `Skate Tour: ${title.trim()} in ${locationText}`;
+      tags.push(['alt', altText]);
+
+      console.log('Publishing tour event:', {
+        kind: SKATE_TOUR_KIND,
+        tags,
+        content: description.trim(),
+      });
+
+      await createEvent({
+        kind: SKATE_TOUR_KIND,
+        content: description.trim(),
+        tags,
+      });
+
+      const toastMessages = {
+        local: { title: '🏠 Local Tour Created!', description: 'Your tour is now visible. Skaters can book via DM!' },
+        national: { title: '🚐 National Tour Created!', description: 'Your road trip is live! Start coordinating with interested skaters.' },
+        international: { title: '✈️ International Tour Created!', description: 'Your global adventure is listed! Connect with skaters worldwide.' },
+        destruction: { title: '💀 WORLD DESTRUCTION TOUR CREATED!', description: 'Teams can register. Challenges revealed on start date!' },
+      };
+      toast(toastMessages[tourCategory]);
+
+      navigate(`/tour/${user?.pubkey}/${identifier}`);
+    } catch (error) {
+      console.error('Failed to create tour:', error);
+      toast({
+        title: 'Failed to publish',
+        description: error instanceof Error ? error.message : 'Something went wrong.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  if (!user) {
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="max-w-xl mx-auto border-dashed">
+            <CardContent className="py-12 text-center">
+              <Route className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+              <h2 className="text-xl font-bold mb-2">Login Required</h2>
+              <p className="text-muted-foreground mb-6">
+                You need to log in to create a tour.
+              </p>
+              <LoginArea className="justify-center" />
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  // NIP-05 verification required for tour creation (spam prevention)
+  // Note: metadata comes from useAuthor which loads asynchronously
+  const hasNip05 = !!metadata?.nip05;
+
+  // Show loading state while profile is being fetched
+  if (isLoadingProfile) {
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="max-w-xl mx-auto border-dashed">
+            <CardContent className="py-12 text-center">
+              <Loader2 className="h-12 w-12 mx-auto mb-4 animate-spin text-cyan-400" />
+              <h2 className="text-xl font-bold mb-2">Loading Profile...</h2>
+              <p className="text-muted-foreground">
+                Checking your NIP-05 verification status.
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  // Require NIP-05 for tour creation
+  if (!hasNip05) {
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="max-w-xl mx-auto border-2 border-red-500/50 bg-red-950/20">
+            <CardContent className="py-12 text-center">
+              <div className="w-16 h-16 rounded-full bg-red-500/20 flex items-center justify-center mx-auto mb-4">
+                <Route className="h-8 w-8 text-red-400" />
+              </div>
+              <h2 className="text-xl font-bold mb-2 text-red-400">NIP-05 Verification Required</h2>
+              <p className="text-gray-300 mb-2">
+                To prevent spam and build trust, tour organizers must have NIP-05 verification.
+              </p>
+              <p className="text-gray-500 text-sm mb-6">
+                NIP-05 proves your identity by linking your Nostr profile to a domain you control.
+              </p>
+              
+              <div className="space-y-3 max-w-sm mx-auto mb-6">
+                <p className="text-xs text-gray-400 font-bold uppercase">Get Free NIP-05:</p>
+                <div className="grid grid-cols-2 gap-2">
+                  <a 
+                    href="https://nip05.social" 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className="block p-3 rounded-lg bg-black/50 border border-green-500/30 hover:border-green-500/60 transition-all text-left"
+                  >
+                    <div className="font-bold text-white text-sm">nip05.social</div>
+                    <div className="text-xs text-gray-400">Free NIP-05</div>
+                  </a>
+                  <a 
+                    href="https://nostr.directory" 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className="block p-3 rounded-lg bg-black/50 border border-purple-500/30 hover:border-purple-500/60 transition-all text-left"
+                  >
+                    <div className="font-bold text-white text-sm">nostr.directory</div>
+                    <div className="text-xs text-gray-400">Free NIP-05</div>
+                  </a>
+                </div>
+              </div>
+              
+              <Link to="/settings">
+                <Button className="bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold">
+                  Update Your Profile
+                </Button>
+              </Link>
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="container px-4 sm:px-6 py-6 sm:py-8 max-w-2xl">
+        <div className="mb-6">
+          <Link to="/map" className="inline-flex items-center text-gray-400 hover:text-white transition-colors mb-4">
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Back to Map
+          </Link>
+          <h1 className="text-3xl font-black uppercase" style={{
+            fontFamily: 'Impact, "Arial Black", sans-serif',
+            color: TOUR_CATEGORIES[tourCategory].color,
+            textShadow: `0 0 10px ${TOUR_CATEGORIES[tourCategory].color}50`,
+          }}>Create a Tour</h1>
+          <p className="text-gray-400 mt-1">
+            {TOUR_CATEGORIES[tourCategory].description}
+          </p>
+        </div>
+
+        {/* Tour Category Selection */}
+        <div className="mb-6">
+          <Label className="text-base font-bold mb-3 block">Tour Type</Label>
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
+            {Object.entries(TOUR_CATEGORIES).map(([key, cat]) => (
+              <Button
+                key={key}
+                type="button"
+                variant={tourCategory === key ? 'default' : 'outline'}
+                onClick={() => setTourCategory(key as TourCategory)}
+                className={cn(
+                  'flex-col h-auto py-3 gap-1',
+                  tourCategory === key
+                    ? 'border-2'
+                    : 'border-gray-700 hover:border-gray-500'
+                )}
+                style={{
+                  backgroundColor: tourCategory === key ? cat.color : undefined,
+                  borderColor: tourCategory === key ? cat.color : undefined,
+                  color: tourCategory === key ? (key === 'local' || key === 'international' ? 'white' : 'black') : undefined,
+                }}
+              >
+                <span className="text-xl">{cat.emoji}</span>
+                <span className="text-xs font-bold">{cat.label}</span>
+                <span className="text-[10px] opacity-70">{cat.durationLabel}</span>
+              </Button>
+            ))}
+          </div>
+        </div>
+
+        {/* Info banner - changes based on category */}
+        <Card className="mb-6" style={{ 
+          backgroundColor: `${TOUR_CATEGORIES[tourCategory].color}10`, 
+          borderColor: `${TOUR_CATEGORIES[tourCategory].color}30` 
+        }}>
+          <CardContent className="py-4">
+            <div className="flex gap-3">
+              <Info className="h-5 w-5 flex-shrink-0 mt-0.5" style={{ color: TOUR_CATEGORIES[tourCategory].color }} />
+              <div className="text-sm">
+                {tourCategory === 'local' && (
+                  <>
+                    <p className="font-bold mb-1" style={{ color: TOUR_CATEGORIES[tourCategory].color }}>How Local Tours Work</p>
+                    <ul className="text-gray-300 space-y-1 text-xs">
+                      <li>• You set your price - <strong>platform takes 10%</strong></li>
+                      <li>• Hidden spots stay hidden - you show them in person</li>
+                      <li>• Visitors book via DM and pay in Lightning</li>
+                      <li>• Build your reputation with reviews and zaps</li>
+                    </ul>
+                  </>
+                )}
+                {tourCategory === 'national' && (
+                  <>
+                    <p className="font-bold mb-1" style={{ color: TOUR_CATEGORIES[tourCategory].color }}>How National Tours Work</p>
+                    <ul className="text-gray-300 space-y-1 text-xs">
+                      <li>• Multi-city road trips across your country</li>
+                      <li>• You set the price - <strong>platform takes only 7%</strong></li>
+                      <li>• Include transport/accommodation info for participants</li>
+                      <li>• Build legendary skate adventures!</li>
+                    </ul>
+                  </>
+                )}
+                {tourCategory === 'international' && (
+                  <>
+                    <p className="font-bold mb-1" style={{ color: TOUR_CATEGORIES[tourCategory].color }}>How International Tours Work</p>
+                    <ul className="text-gray-300 space-y-1 text-xs">
+                      <li>• Cross-border adventures across multiple countries</li>
+                      <li>• You set the price - <strong>platform takes only 5%</strong></li>
+                      <li>• Connect skaters from around the world</li>
+                      <li>• Create unforgettable global experiences!</li>
+                    </ul>
+                  </>
+                )}
+                {tourCategory === 'destruction' && (
+                  <>
+                    <p className="font-bold mb-1" style={{ color: TOUR_CATEGORIES[tourCategory].color }}>💀 WORLD DESTRUCTION TOUR - KOTR Style</p>
+                    <ul className="text-gray-300 space-y-1 text-xs">
+                      <li>• Global team competition - up to 12 months long</li>
+                      <li>• YOU define challenges, points, prizes - we just provide the platform</li>
+                      <li>• <strong>All challenges are SECRET</strong> until competition start date</li>
+                      <li>• Clips via Blossom upload OR external links (YouTube, Instagram, any URL)</li>
+                      <li>• Advanced level only - all spot types included automatically</li>
+                      <li>• <strong>Platform takes only 5%</strong> of entry fees (NOT prize pool)</li>
+                    </ul>
+                  </>
+                )}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <form onSubmit={handleSubmit}>
+          <Card className="bg-black/90 border-2 border-cyan-500/30">
+            <CardHeader>
+              <CardTitle className="uppercase font-black flex items-center gap-2" style={{ color: TOUR_CATEGORIES[tourCategory].color }}>
+                {tourCategory === 'destruction' ? <Skull className="h-5 w-5" /> : <Route className="h-5 w-5" />}
+                {tourCategory === 'destruction' ? 'World Destruction Tour' : 'Tour Details'}
+              </CardTitle>
+              <CardDescription className="text-gray-400">
+                {tourCategory === 'destruction' 
+                  ? 'Set up your global KOTR-style competition - you define EVERYTHING!' 
+                  : 'Tell skaters what to expect on your tour'}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {/* Tour Title */}
+              <div className="space-y-2">
+                <Label htmlFor="title">Tour Title *</Label>
+                <Input
+                  id="title"
+                  placeholder="e.g., Berlin Kreuzberg - Underground Spots Tour"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  className="bg-black border-cyan-500/30"
+                  required
+                />
+              </div>
+
+              {/* Description */}
+              <div className="space-y-2">
+                <Label htmlFor="description">Description</Label>
+                <Textarea
+                  id="description"
+                  placeholder="Describe what skaters will experience: spots you'll visit, vibe, what makes your tour unique..."
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  rows={4}
+                  className="bg-black border-cyan-500/30"
+                />
+              </div>
+
+              {/* City/Region - only for local and national tours */}
+              {(tourCategory === 'local' || tourCategory === 'national') && (
+                <div className="space-y-2">
+                  <Label htmlFor="location">{tourCategory === 'local' ? 'City / Region *' : 'Starting City *'}</Label>
+                  <Input
+                    id="location"
+                    placeholder={tourCategory === 'local' ? 'e.g., Berlin, Germany' : 'e.g., Los Angeles, USA'}
+                    value={location}
+                    onChange={(e) => setLocation(e.target.value)}
+                    className="bg-black"
+                    style={{ borderColor: `${TOUR_CATEGORIES[tourCategory].color}30` }}
+                    required
+                  />
+                </div>
+              )}
+
+              {/* Meeting Point - only for local and national tours */}
+              {(tourCategory === 'local' || tourCategory === 'national') && (
+              <div className="space-y-3 p-4 rounded-lg border-2 bg-opacity-5" style={{ 
+                borderColor: `${TOUR_CATEGORIES[tourCategory].color}30`,
+                backgroundColor: `${TOUR_CATEGORIES[tourCategory].color}05`
+              }}>
+                <div className="flex items-center gap-2 mb-2">
+                  <MapPin className="h-5 w-5" style={{ color: TOUR_CATEGORIES[tourCategory].color }} />
+                  <Label className="text-base font-bold" style={{ color: TOUR_CATEGORIES[tourCategory].color }}>Meeting Point *</Label>
+                </div>
+                <p className="text-sm text-gray-400 mb-3">
+                  Where will you meet tour participants? Choose a public, well-known spot.
+                </p>
+
+                <Input
+                  placeholder="e.g., Warschauer Straße Station"
+                  value={meetingPoint}
+                  onChange={(e) => setMeetingPoint(e.target.value)}
+                  className="bg-black"
+                  style={{ borderColor: `${TOUR_CATEGORIES[tourCategory].color}30` }}
+                  required={tourCategory === 'local' || tourCategory === 'national'}
+                />
+
+                <div className="grid grid-cols-2 gap-4 mt-3">
+                  <div>
+                    <Input
+                      placeholder="Latitude"
+                      value={meetingLat}
+                      onChange={(e) => setMeetingLat(e.target.value)}
+                      className="bg-black border-cyan-500/30"
+                      required
+                    />
+                  </div>
+                  <div>
+                    <Input
+                      placeholder="Longitude"
+                      value={meetingLng}
+                      onChange={(e) => setMeetingLng(e.target.value)}
+                      className="bg-black border-cyan-500/30"
+                      required
+                    />
+                  </div>
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={getCurrentLocation}
+                  disabled={isGettingLocation}
+                  className="mt-2 border-cyan-500/50 text-cyan-400 hover:bg-cyan-500/10"
+                >
+                  {isGettingLocation ? (
+                    <>
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                      Getting location...
+                    </>
+                  ) : (
+                    <>
+                      <MapPin className="h-4 w-4 mr-2" />
+                      Use my current location
+                    </>
+                  )}
+                </Button>
+              </div>
+              )}
+
+              {/* Duration - changes based on category */}
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <Label className="flex items-center gap-2">
+                    <Clock className="h-4 w-4" style={{ color: TOUR_CATEGORIES[tourCategory].color }} />
+                    Duration
+                  </Label>
+                  <span className="font-bold" style={{ color: TOUR_CATEGORIES[tourCategory].color }}>
+                    {tourCategory === 'destruction' 
+                      ? `${Math.ceil(duration[0] / 4)} month${Math.ceil(duration[0] / 4) > 1 ? 's' : ''}`
+                      : tourCategory === 'international'
+                        ? `${duration[0]} week${duration[0] > 1 ? 's' : ''} (~${Math.ceil(duration[0] / 4)} month${Math.ceil(duration[0] / 4) > 1 ? 's' : ''})`
+                        : `${duration[0]} ${durationUnit}`
+                    }
+                  </span>
+                </div>
+                <Slider
+                  value={duration}
+                  onValueChange={setDuration}
+                  min={tourCategory === 'local' ? 1 : tourCategory === 'destruction' ? 4 : 1}
+                  max={tourCategory === 'local' ? 8 : tourCategory === 'national' ? 14 : tourCategory === 'international' ? 8 : 48}
+                  step={tourCategory === 'local' ? 0.5 : tourCategory === 'destruction' ? 4 : 1}
+                  className="w-full"
+                />
+                <p className="text-xs text-gray-500">
+                  {tourCategory === 'local' && 'How long is your typical tour?'}
+                  {tourCategory === 'national' && 'How many days is the road trip?'}
+                  {tourCategory === 'international' && 'How many weeks is the adventure? (up to 2 months)'}
+                  {tourCategory === 'destruction' && 'How long is the competition? (1-12 months)'}
+                </p>
+              </div>
+
+              {/* Skill Level - not shown for destruction tours (always advanced) */}
+              {tourCategory !== 'destruction' && (
+                <div className="space-y-3">
+                  <Label>Skill Level</Label>
+                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
+                    {Object.entries(TOUR_SKILL_LEVELS).map(([key, level]) => (
+                      <Button
+                        key={key}
+                        type="button"
+                        variant={skillLevel === key ? 'default' : 'outline'}
+                        size="sm"
+                        onClick={() => setSkillLevel(key)}
+                        className={cn(
+                          'flex-col h-auto py-2',
+                          skillLevel === key
+                            ? ''
+                            : 'border-gray-700 hover:border-gray-500'
+                        )}
+                        style={skillLevel === key ? { backgroundColor: TOUR_CATEGORIES[tourCategory].color } : undefined}
+                      >
+                        <span className="text-lg mb-1">{level.emoji}</span>
+                        <span className="text-xs">{level.label}</span>
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Spot Types - not shown for destruction tours (all spots included) */}
+              {tourCategory !== 'destruction' && (
+                <div className="space-y-3">
+                  <Label>Types of Spots *</Label>
+                  <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+                    {Object.entries(TOUR_SPOT_TYPES).map(([key, type]) => (
+                      <Button
+                        key={key}
+                        type="button"
+                        variant={spotTypes.includes(key) ? 'default' : 'outline'}
+                        size="sm"
+                        onClick={() => toggleSpotType(key)}
+                        className={cn(
+                          'gap-2',
+                          spotTypes.includes(key)
+                            ? ''
+                            : 'border-gray-700 hover:border-gray-500'
+                        )}
+                        style={spotTypes.includes(key) ? { backgroundColor: TOUR_CATEGORIES[tourCategory].color } : undefined}
+                      >
+                        <span>{type.emoji}</span>
+                        <span>{type.label}</span>
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Max Group Size - only for non-destruction tours */}
+              {tourCategory !== 'destruction' && (
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Label className="flex items-center gap-2">
+                      <Users className="h-4 w-4" style={{ color: TOUR_CATEGORIES[tourCategory].color }} />
+                      Max Group Size
+                    </Label>
+                    <span className="font-bold" style={{ color: TOUR_CATEGORIES[tourCategory].color }}>{maxGroupSize[0]} people</span>
+                  </div>
+                  <Slider
+                    value={maxGroupSize}
+                    onValueChange={setMaxGroupSize}
+                    min={1}
+                    max={tourCategory === 'local' ? 10 : 20}
+                    step={1}
+                    className="w-full"
+                  />
+                </div>
+              )}
+
+              {/* ============ NATIONAL/INTERNATIONAL SPECIFIC FIELDS ============ */}
+              {(tourCategory === 'national' || tourCategory === 'international') && (
+                <div className="space-y-4 p-4 rounded-lg border-2" style={{ 
+                  borderColor: `${TOUR_CATEGORIES[tourCategory].color}30`,
+                  backgroundColor: `${TOUR_CATEGORIES[tourCategory].color}05`
+                }}>
+                  <div className="flex items-center gap-2 mb-2">
+                    {tourCategory === 'national' ? <Car className="h-5 w-5" /> : <Plane className="h-5 w-5" />}
+                    <Label className="text-base font-bold" style={{ color: TOUR_CATEGORIES[tourCategory].color }}>
+                      {tourCategory === 'national' ? 'Road Trip Details' : 'International Adventure Details'}
+                    </Label>
+                  </div>
+
+                  {/* Cities */}
+                  <div className="space-y-2">
+                    <Label>Cities on the Tour</Label>
+                    <div className="flex gap-2">
+                      <Input
+                        placeholder="Add a city..."
+                        value={newCity}
+                        onChange={(e) => setNewCity(e.target.value)}
+                        onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), addCity())}
+                        className="bg-black border-gray-700"
+                      />
+                      <Button type="button" onClick={addCity} variant="outline" size="icon">
+                        <Plus className="h-4 w-4" />
+                      </Button>
+                    </div>
+                    {cities.length > 0 && (
+                      <div className="flex flex-wrap gap-2 mt-2">
+                        {cities.map((city) => (
+                          <span key={city} className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full" style={{
+                            backgroundColor: `${TOUR_CATEGORIES[tourCategory].color}20`,
+                            color: TOUR_CATEGORIES[tourCategory].color
+                          }}>
+                            {city}
+                            <button type="button" onClick={() => removeCity(city)} className="hover:text-red-400">
+                              <X className="h-3 w-3" />
+                            </button>
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Countries (International only) */}
+                  {tourCategory === 'international' && (
+                    <div className="space-y-2">
+                      <Label>Countries *</Label>
+                      <div className="flex gap-2">
+                        <Input
+                          placeholder="Add a country..."
+                          value={newCountry}
+                          onChange={(e) => setNewCountry(e.target.value)}
+                          onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), addCountry())}
+                          className="bg-black"
+                          style={{ borderColor: `${TOUR_CATEGORIES[tourCategory].color}30` }}
+                        />
+                        <Button type="button" onClick={addCountry} variant="outline" size="icon" style={{ borderColor: `${TOUR_CATEGORIES[tourCategory].color}50` }}>
+                          <Plus className="h-4 w-4" />
+                        </Button>
+                      </div>
+                      {countries.length > 0 && (
+                        <div className="flex flex-wrap gap-2 mt-2">
+                          {countries.map((country) => (
+                            <span key={country} className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full" style={{
+                              backgroundColor: `${TOUR_CATEGORIES[tourCategory].color}20`,
+                              color: TOUR_CATEGORIES[tourCategory].color
+                            }}>
+                              {country}
+                              <button type="button" onClick={() => removeCountry(country)} className="hover:text-red-400">
+                                <X className="h-3 w-3" />
+                              </button>
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {/* Transport Info */}
+                  <div className="space-y-2">
+                    <Label>Transport Info</Label>
+                    <Textarea
+                      placeholder="How will participants travel? e.g., 'Van provided', 'Fly into Barcelona, we rent a van', 'Train between cities'"
+                      value={transportInfo}
+                      onChange={(e) => setTransportInfo(e.target.value)}
+                      rows={2}
+                      className="bg-black border-gray-700"
+                    />
+                  </div>
+
+                  {/* Accommodation Info */}
+                  <div className="space-y-2">
+                    <Label>Accommodation Info</Label>
+                    <Textarea
+                      placeholder="Accommodation recommendations or arrangements, e.g., 'Budget hostels along the route', 'Camping gear required', 'Airbnbs included'"
+                      value={accommodationInfo}
+                      onChange={(e) => setAccommodationInfo(e.target.value)}
+                      rows={2}
+                      className="bg-black border-gray-700"
+                    />
+                  </div>
+                </div>
+              )}
+
+              {/* ============ WORLD DESTRUCTION TOUR SPECIFIC FIELDS ============ */}
+              {tourCategory === 'destruction' && (
+                <div className="space-y-6">
+                  {/* Cities & Countries */}
+                  <div className="space-y-4 p-4 rounded-lg border-2 border-red-500/30 bg-red-500/5">
+                    <div className="flex items-center gap-2">
+                      <Globe className="h-5 w-5 text-red-500" />
+                      <Label className="text-base font-bold text-red-500">Competition Locations</Label>
+                    </div>
+                    <p className="text-xs text-gray-400">Where will teams be competing? Add all cities and countries involved.</p>
+
+                    {/* Cities */}
+                    <div className="space-y-2">
+                      <Label className="text-sm">Cities</Label>
+                      <div className="flex gap-2">
+                        <Input
+                          placeholder="Add a city..."
+                          value={newCity}
+                          onChange={(e) => setNewCity(e.target.value)}
+                          onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), addCity())}
+                          className="bg-black border-red-500/30"
+                        />
+                        <Button type="button" onClick={addCity} variant="outline" size="icon" className="border-red-500/50">
+                          <Plus className="h-4 w-4" />
+                        </Button>
+                      </div>
+                      {cities.length > 0 && (
+                        <div className="flex flex-wrap gap-2 mt-2">
+                          {cities.map((city) => (
+                            <span key={city} className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-red-500/20 text-red-400">
+                              {city}
+                              <button type="button" onClick={() => removeCity(city)} className="hover:text-white">
+                                <X className="h-3 w-3" />
+                              </button>
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Countries */}
+                    <div className="space-y-2">
+                      <Label className="text-sm">Countries</Label>
+                      <div className="flex gap-2">
+                        <Input
+                          placeholder="Add a country..."
+                          value={newCountry}
+                          onChange={(e) => setNewCountry(e.target.value)}
+                          onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), addCountry())}
+                          className="bg-black border-red-500/30"
+                        />
+                        <Button type="button" onClick={addCountry} variant="outline" size="icon" className="border-red-500/50">
+                          <Plus className="h-4 w-4" />
+                        </Button>
+                      </div>
+                      {countries.length > 0 && (
+                        <div className="flex flex-wrap gap-2 mt-2">
+                          {countries.map((country) => (
+                            <span key={country} className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-red-500/20 text-red-400">
+                              {country}
+                              <button type="button" onClick={() => removeCountry(country)} className="hover:text-white">
+                                <X className="h-3 w-3" />
+                              </button>
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Organizer Contact */}
+                  <div className="space-y-2">
+                    <Label className="flex items-center gap-2 text-red-500">
+                      <Users className="h-4 w-4" />
+                      Organizer Contact Details *
+                    </Label>
+                    <Textarea
+                      placeholder="How can teams contact you? e.g., Nostr npub, email, Telegram, etc."
+                      value={organizerContact}
+                      onChange={(e) => setOrganizerContact(e.target.value)}
+                      rows={2}
+                      className="bg-black border-red-500/30"
+                    />
+                    <p className="text-xs text-gray-500">This will be visible to registered teams</p>
+                  </div>
+
+                  {/* Transport Info */}
+                  <div className="space-y-2">
+                    <Label className="flex items-center gap-2">
+                      <Car className="h-4 w-4 text-red-500" />
+                      Transport Info
+                    </Label>
+                    <Textarea
+                      placeholder="How will teams travel between locations? Any transport provided or recommended?"
+                      value={transportInfo}
+                      onChange={(e) => setTransportInfo(e.target.value)}
+                      rows={2}
+                      className="bg-black border-red-500/30"
+                    />
+                  </div>
+
+                  {/* Competition Dates */}
+                  <div className="space-y-4 p-4 rounded-lg border-2 border-red-500/30 bg-red-500/5">
+                    <div className="flex items-center gap-2">
+                      <Calendar className="h-5 w-5 text-red-500" />
+                      <Label className="text-base font-bold text-red-500">Competition Dates</Label>
+                    </div>
+                    <p className="text-xs text-gray-400">
+                      ⚠️ <strong>All challenges are SECRET until the start date!</strong> Teams won't see challenges until competition begins.
+                    </p>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="space-y-2">
+                        <Label className="text-xs">Start Date</Label>
+                        <Input
+                          type="date"
+                          value={startDate}
+                          onChange={(e) => setStartDate(e.target.value)}
+                          className="bg-black border-red-500/30"
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label className="text-xs">End Date</Label>
+                        <Input
+                          type="date"
+                          value={endDate}
+                          onChange={(e) => setEndDate(e.target.value)}
+                          className="bg-black border-red-500/30"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Team Settings */}
+                  <div className="space-y-4 p-4 rounded-lg border-2 border-red-500/30 bg-red-500/5">
+                    <div className="flex items-center gap-2">
+                      <Users className="h-5 w-5 text-red-500" />
+                      <Label className="text-base font-bold text-red-500">Team Settings</Label>
+                    </div>
+                    
+                    <div className="space-y-3">
+                      <div className="flex items-center justify-between">
+                        <Label className="text-sm">Max Teams</Label>
+                        <span className="text-red-400 font-bold">{maxTeams[0]} teams</span>
+                      </div>
+                      <Slider
+                        value={maxTeams}
+                        onValueChange={setMaxTeams}
+                        min={2}
+                        max={16}
+                        step={1}
+                        className="w-full"
+                      />
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="space-y-3">
+                        <div className="flex items-center justify-between">
+                          <Label className="text-sm">Min Team Size</Label>
+                          <span className="text-red-400 font-bold">{minTeamSize[0]}</span>
+                        </div>
+                        <Slider
+                          value={minTeamSize}
+                          onValueChange={setMinTeamSize}
+                          min={1}
+                          max={8}
+                          step={1}
+                          className="w-full"
+                        />
+                      </div>
+                      <div className="space-y-3">
+                        <div className="flex items-center justify-between">
+                          <Label className="text-sm">Max Team Size</Label>
+                          <span className="text-red-400 font-bold">{maxTeamSize[0]}</span>
+                        </div>
+                        <Slider
+                          value={maxTeamSize}
+                          onValueChange={setMaxTeamSize}
+                          min={2}
+                          max={12}
+                          step={1}
+                          className="w-full"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Entry Fee & Prize Pool */}
+                  <div className="space-y-4 p-4 rounded-lg border-2 border-red-500/30 bg-red-500/5">
+                    <div className="flex items-center gap-2">
+                      <Trophy className="h-5 w-5 text-red-500" />
+                      <Label className="text-base font-bold text-red-500">Entry & Prizes</Label>
+                    </div>
+                    
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="space-y-2">
+                        <Label className="text-sm flex items-center gap-2">
+                          <Zap className="h-3 w-3 text-orange-400" />
+                          Entry Fee per Team (sats)
+                        </Label>
+                        <Input
+                          type="number"
+                          placeholder="e.g., 100000"
+                          value={entryFee}
+                          onChange={(e) => setEntryFee(e.target.value)}
+                          className="bg-black border-red-500/30"
+                        />
+                        <p className="text-[10px] text-gray-500">You keep 95% • Platform takes 5% • Leave empty for free entry</p>
+                      </div>
+                      <div className="space-y-2">
+                        <Label className="text-sm flex items-center gap-2">
+                          <Trophy className="h-3 w-3 text-yellow-400" />
+                          Total Prize Pool (sats)
+                        </Label>
+                        <Input
+                          type="number"
+                          placeholder="e.g., 2000000"
+                          value={prizePool}
+                          onChange={(e) => setPrizePool(e.target.value)}
+                          className="bg-black border-red-500/30"
+                        />
+                        <p className="text-[10px] text-gray-500">Optional - total prizes available</p>
+                      </div>
+                    </div>
+
+                    {/* Prize Distribution */}
+                    {prizePool && parseInt(prizePool) > 0 && (
+                      <div className="space-y-3 mt-4 p-3 rounded bg-black/50">
+                        <Label className="text-sm">Prize Distribution</Label>
+                        <div className="space-y-2">
+                          {prizeDistribution.map((prize, idx) => (
+                            <div key={prize.place} className="flex items-center gap-3">
+                              <span className="text-sm w-16">
+                                {prize.place === 1 && '🥇 1st'}
+                                {prize.place === 2 && '🥈 2nd'}
+                                {prize.place === 3 && '🥉 3rd'}
+                              </span>
+                              <Input
+                                type="number"
+                                value={prize.percentage}
+                                onChange={(e) => {
+                                  const updated = [...prizeDistribution];
+                                  updated[idx].percentage = parseInt(e.target.value) || 0;
+                                  setPrizeDistribution(updated);
+                                }}
+                                className="w-20 bg-black border-gray-700 text-center"
+                              />
+                              <span className="text-sm text-gray-500">%</span>
+                              <span className="text-sm text-yellow-400 ml-auto">
+                                {Math.floor(parseInt(prizePool) * prize.percentage / 100).toLocaleString()} sats
+                              </span>
+                            </div>
+                          ))}
+                        </div>
+                        <p className="text-[10px] text-gray-500">
+                          Total: {prizeDistribution.reduce((sum, p) => sum + p.percentage, 0)}%
+                        </p>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Challenges */}
+                  <div className="space-y-4 p-4 rounded-lg border-2 border-red-500/30 bg-red-500/5">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <Target className="h-5 w-5 text-red-500" />
+                        <Label className="text-base font-bold text-red-500">Challenges</Label>
+                      </div>
+                      <Button type="button" onClick={addChallenge} variant="outline" size="sm" className="border-red-500/50 text-red-400 hover:bg-red-500/10">
+                        <Plus className="h-4 w-4 mr-1" />
+                        Add Challenge
+                      </Button>
+                    </div>
+                    <div className="flex items-center gap-2 p-2 rounded bg-yellow-500/10 border border-yellow-500/30">
+                      <EyeOff className="h-4 w-4 text-yellow-500 flex-shrink-0" />
+                      <p className="text-xs text-yellow-400">
+                        <strong>All challenges are SECRET</strong> until competition start date. Teams won't see them until then!
+                      </p>
+                    </div>
+
+                    {challenges.length === 0 ? (
+                      <div className="text-center py-6 border-2 border-dashed border-gray-700 rounded-lg">
+                        <Target className="h-8 w-8 mx-auto mb-2 text-gray-600" />
+                        <p className="text-sm text-gray-500">No challenges yet</p>
+                        <p className="text-xs text-gray-600">Add challenges for teams to complete</p>
+                      </div>
+                    ) : (
+                      <div className="space-y-3">
+                        {challenges.map((challenge, idx) => (
+                          <div key={challenge.id} className="p-3 rounded-lg bg-black/50 border border-gray-700 space-y-3">
+                            <div className="flex items-start justify-between gap-2">
+                              <div className="flex-1 space-y-2">
+                                <Input
+                                  placeholder="Challenge title, e.g., 'Kickflip a 10 stair'"
+                                  value={challenge.title}
+                                  onChange={(e) => updateChallenge(idx, { title: e.target.value })}
+                                  className="bg-black border-gray-700"
+                                />
+                                <Textarea
+                                  placeholder="Optional description..."
+                                  value={challenge.description || ''}
+                                  onChange={(e) => updateChallenge(idx, { description: e.target.value })}
+                                  rows={2}
+                                  className="bg-black border-gray-700 text-sm"
+                                />
+                              </div>
+                              <Button type="button" variant="ghost" size="icon" onClick={() => removeChallenge(idx)} className="text-red-400 hover:bg-red-500/20">
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            </div>
+                            <div className="flex items-center gap-4">
+                              <div className="flex items-center gap-2">
+                                <Label className="text-xs">Points:</Label>
+                                <Input
+                                  type="number"
+                                  value={challenge.points}
+                                  onChange={(e) => updateChallenge(idx, { points: parseInt(e.target.value) || 0 })}
+                                  className="w-20 bg-black border-gray-700 text-center"
+                                />
+                              </div>
+                              <span className="text-xs text-gray-500 flex items-center gap-1">
+                                <EyeOff className="h-3 w-3" /> Secret until start
+                              </span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Accepted Clip Sources */}
+                  <div className="space-y-3">
+                    <Label>Accepted Clip Sources</Label>
+                    <p className="text-xs text-gray-400">What formats will you accept for clip submissions?</p>
+                    <div className="flex flex-wrap gap-2">
+                      {[
+                        { id: 'blossom', label: '📦 Blossom Upload', desc: '< 50MB' },
+                        { id: 'youtube', label: '▶️ YouTube' },
+                        { id: 'instagram', label: '📸 Instagram' },
+                        { id: 'any', label: '🔗 Any URL' },
+                      ].map((source) => (
+                        <Button
+                          key={source.id}
+                          type="button"
+                          variant={acceptedClipSources.includes(source.id) ? 'default' : 'outline'}
+                          size="sm"
+                          onClick={() => {
+                            setAcceptedClipSources((prev) =>
+                              prev.includes(source.id)
+                                ? prev.filter((s) => s !== source.id)
+                                : [...prev, source.id]
+                            );
+                          }}
+                          className={cn(
+                            acceptedClipSources.includes(source.id)
+                              ? 'bg-red-500 hover:bg-red-600'
+                              : 'border-gray-700 hover:border-red-500/50'
+                          )}
+                        >
+                          {source.label}
+                        </Button>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Film Release Options */}
+                  <div className="space-y-4 p-4 rounded-lg border-2 border-purple-500/30 bg-purple-500/5">
+                    <div className="flex items-start gap-3">
+                      <div className="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center flex-shrink-0">
+                        <span className="text-xl">🎬</span>
+                      </div>
+                      <div className="flex-1">
+                        <div className="flex items-center justify-between">
+                          <Label className="text-base font-bold text-purple-400">Team Film Premieres</Label>
+                          <Button
+                            type="button"
+                            variant={enableFilmRelease ? 'default' : 'outline'}
+                            size="sm"
+                            onClick={() => setEnableFilmRelease(!enableFilmRelease)}
+                            className={cn(
+                              enableFilmRelease
+                                ? 'bg-purple-500 hover:bg-purple-600'
+                                : 'border-purple-500/50 text-purple-400 hover:bg-purple-500/10'
+                            )}
+                          >
+                            {enableFilmRelease ? 'Enabled' : 'Enable'}
+                          </Button>
+                        </div>
+                        <p className="text-xs text-gray-400 mt-1">
+                          After the competition, each team's clips become a full film that can premiere at local skate shops worldwide.
+                        </p>
+                      </div>
+                    </div>
+
+                    {enableFilmRelease && (
+                      <div className="space-y-4 pt-3 border-t border-purple-500/20">
+                        <p className="text-xs text-purple-300">
+                          🎥 Teams compile their challenge clips into a final film. Shops can host premiere events, connecting global competition to local communities.
+                        </p>
+                        
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                          {/* Premiere at Shops */}
+                          <Button
+                            type="button"
+                            variant={filmReleaseAtShops ? 'default' : 'outline'}
+                            onClick={() => setFilmReleaseAtShops(!filmReleaseAtShops)}
+                            className={cn(
+                              'h-auto py-3 flex-col items-start gap-1',
+                              filmReleaseAtShops
+                                ? 'bg-[#ccff00] text-black hover:bg-[#ccff00]/90'
+                                : 'border-[#ccff00]/50 hover:bg-[#ccff00]/10'
+                            )}
+                          >
+                            <div className="flex items-center gap-2 w-full">
+                              <Store className="h-4 w-4" />
+                              <span className="font-bold">Local Shop Premieres</span>
+                            </div>
+                            <span className={cn(
+                              'text-xs',
+                              filmReleaseAtShops ? 'text-black/70' : 'text-gray-400'
+                            )}>
+                              Skate shops worldwide can host film nights
+                            </span>
+                          </Button>
+
+                          {/* Online Release */}
+                          <Button
+                            type="button"
+                            variant={filmReleaseOnline ? 'default' : 'outline'}
+                            onClick={() => setFilmReleaseOnline(!filmReleaseOnline)}
+                            className={cn(
+                              'h-auto py-3 flex-col items-start gap-1',
+                              filmReleaseOnline
+                                ? 'bg-cyan-500 text-white hover:bg-cyan-600'
+                                : 'border-cyan-500/50 text-cyan-400 hover:bg-cyan-500/10'
+                            )}
+                          >
+                            <div className="flex items-center gap-2 w-full">
+                              <Globe className="h-4 w-4" />
+                              <span className="font-bold">Online Release</span>
+                            </div>
+                            <span className={cn(
+                              'text-xs',
+                              filmReleaseOnline ? 'text-white/70' : 'text-gray-400'
+                            )}>
+                              Also release films on YouTube/Nostr
+                            </span>
+                          </Button>
+                        </div>
+
+                        {/* Film Release Date */}
+                        <div className="space-y-2">
+                          <Label className="text-purple-400 text-sm">Film Release Date (Optional)</Label>
+                          <Input
+                            type="date"
+                            value={filmReleaseDate}
+                            onChange={(e) => setFilmReleaseDate(e.target.value)}
+                            min={endDate || startDate}
+                            className="bg-black border-purple-500/30"
+                          />
+                          <p className="text-xs text-gray-500">
+                            When films will be available. Leave blank to release immediately after competition ends.
+                          </p>
+                        </div>
+
+                        {filmReleaseAtShops && (
+                          <div className="space-y-3">
+                            <div className="p-3 rounded-lg bg-[#ccff00]/10 border border-[#ccff00]/30">
+                              <p className="text-xs text-[#ccff00]">
+                                <strong>💡 How Shop Premieres Work:</strong> Contact shops directly to arrange premiere nights. 
+                                All arrangements are private between you and the shops.
+                              </p>
+                            </div>
+
+                            {/* Toggle to show available shops */}
+                            <Button
+                              type="button"
+                              variant="outline"
+                              onClick={() => setShowAvailableShops(!showAvailableShops)}
+                              className="w-full border-[#ccff00]/50 text-[#ccff00] hover:bg-[#ccff00]/10"
+                            >
+                              <Store className="h-4 w-4 mr-2" />
+                              {showAvailableShops ? 'Hide' : 'Show'} Available Skate Shops ({shops?.length || 0})
+                              <ChevronDown className={cn(
+                                'h-4 w-4 ml-2 transition-transform',
+                                showAvailableShops && 'rotate-180'
+                              )} />
+                            </Button>
+
+                            {/* Available shops list */}
+                            {showAvailableShops && (
+                              <div className="space-y-2 max-h-64 overflow-y-auto rounded-lg border border-[#ccff00]/20 p-2">
+                                {shopsLoading ? (
+                                  <div className="flex items-center justify-center py-4">
+                                    <Loader2 className="h-5 w-5 animate-spin text-[#ccff00]" />
+                                    <span className="ml-2 text-sm text-gray-400">Loading shops...</span>
+                                  </div>
+                                ) : shops && shops.length > 0 ? (
+                                  <>
+                                    <p className="text-xs text-gray-400 px-2 pb-2 border-b border-gray-800">
+                                      Contact these shops directly to arrange film premiere nights. All arrangements are private.
+                                    </p>
+                                    {shops.map((shop) => (
+                                      <div
+                                        key={shop.id}
+                                        className="p-3 rounded-lg bg-black/50 border border-gray-800 hover:border-[#ccff00]/30 transition-colors"
+                                      >
+                                        <div className="flex items-start gap-3">
+                                          {shop.images && shop.images[0] ? (
+                                            <img
+                                              src={shop.images[0]}
+                                              alt={shop.name}
+                                              className="w-12 h-12 rounded-lg object-cover flex-shrink-0"
+                                            />
+                                          ) : (
+                                            <div className="w-12 h-12 rounded-lg bg-[#ccff00]/20 flex items-center justify-center flex-shrink-0">
+                                              <Store className="h-5 w-5 text-[#ccff00]" />
+                                            </div>
+                                          )}
+                                          <div className="flex-1 min-w-0">
+                                            <h4 className="font-bold text-white text-sm truncate">{shop.name}</h4>
+                                            {shop.location && (
+                                              <p className="text-xs text-gray-400 flex items-center gap-1">
+                                                <MapPin className="h-3 w-3 flex-shrink-0" />
+                                                <span className="truncate">{shop.location}</span>
+                                              </p>
+                                            )}
+                                            <div className="flex items-center gap-2 mt-1 flex-wrap">
+                                              {shop.website && (
+                                                <a
+                                                  href={shop.website}
+                                                  target="_blank"
+                                                  rel="noopener noreferrer"
+                                                  className="text-xs text-cyan-400 hover:text-cyan-300"
+                                                  onClick={(e) => e.stopPropagation()}
+                                                >
+                                                  🌐 Website
+                                                </a>
+                                              )}
+                                              {shop.instagram && (
+                                                <a
+                                                  href={`https://instagram.com/${shop.instagram.replace('@', '')}`}
+                                                  target="_blank"
+                                                  rel="noopener noreferrer"
+                                                  className="text-xs text-pink-400 hover:text-pink-300"
+                                                  onClick={(e) => e.stopPropagation()}
+                                                >
+                                                  📸 Instagram
+                                                </a>
+                                              )}
+                                              {shop.email && (
+                                                <a
+                                                  href={`mailto:${shop.email}`}
+                                                  className="text-xs text-orange-400 hover:text-orange-300"
+                                                  onClick={(e) => e.stopPropagation()}
+                                                >
+                                                  ✉️ Email
+                                                </a>
+                                              )}
+                                              {shop.phone && (
+                                                <a
+                                                  href={`tel:${shop.phone}`}
+                                                  className="text-xs text-green-400 hover:text-green-300"
+                                                  onClick={(e) => e.stopPropagation()}
+                                                >
+                                                  📞 Call
+                                                </a>
+                                              )}
+                                            </div>
+                                          </div>
+                                          <Link
+                                            to={`/shop/${shop.pubkey}/${shop.identifier}`}
+                                            className="text-xs text-[#ccff00] hover:underline flex-shrink-0"
+                                            onClick={(e) => e.stopPropagation()}
+                                          >
+                                            View →
+                                          </Link>
+                                        </div>
+                                      </div>
+                                    ))}
+                                  </>
+                                ) : (
+                                  <div className="text-center py-4">
+                                    <Store className="h-8 w-8 mx-auto mb-2 text-gray-600" />
+                                    <p className="text-sm text-gray-400">No skate shops registered yet</p>
+                                    <p className="text-xs text-gray-500 mt-1">
+                                      Shops can register at /create-shop
+                                    </p>
+                                  </div>
+                                )}
+                              </div>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {/* Price - only for non-destruction tours (destruction uses entry fee) */}
+              {tourCategory !== 'destruction' && (
+                <div className="space-y-2">
+                  <Label htmlFor="price" className="flex items-center gap-2">
+                    <Zap className="h-4 w-4 text-orange-400" />
+                    Price per Person (sats)
+                  </Label>
+                  <Input
+                    id="price"
+                    type="number"
+                    placeholder="e.g., 25000"
+                    value={price}
+                    onChange={(e) => setPrice(e.target.value)}
+                    className="bg-black"
+                    style={{ borderColor: `${TOUR_CATEGORIES[tourCategory].color}30` }}
+                  />
+                  <p className="text-xs text-gray-500">
+                    You set the price • Platform takes {tourCategory === 'local' ? '10%' : tourCategory === 'national' ? '7%' : '5%'}
+                  </p>
+                  {price && parseInt(price) > 0 && (
+                    <div className="text-xs mt-1" style={{ color: TOUR_CATEGORIES[tourCategory].color }}>
+                      You receive: {Math.floor(parseInt(price) * (tourCategory === 'local' ? 0.9 : tourCategory === 'national' ? 0.93 : 0.95)).toLocaleString()} sats per person
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {/* Availability */}
+              <div className="space-y-2">
+                <Label htmlFor="availability">Availability</Label>
+                <Input
+                  id="availability"
+                  placeholder="e.g., Weekends, By appointment, Mornings only"
+                  value={availability}
+                  onChange={(e) => setAvailability(e.target.value)}
+                  className="bg-black border-cyan-500/30"
+                />
+              </div>
+
+              {/* Partner Shop Discount */}
+              <Collapsible open={shopExpanded} onOpenChange={setShopExpanded}>
+                <div className="space-y-3 p-4 rounded-lg border-2 border-[#ccff00]/30 bg-[#ccff00]/5">
+                  <CollapsibleTrigger asChild>
+                    <button
+                      type="button"
+                      className="flex items-center justify-between w-full text-left"
+                    >
+                      <div className="flex items-center gap-2">
+                        <Store className="h-5 w-5 text-[#ccff00]" />
+                        <div>
+                          <Label className="text-base font-bold text-[#ccff00] cursor-pointer">Partner Shop Discount</Label>
+                          <p className="text-xs text-gray-400">
+                            Offer tour participants a discount at a local skate shop
+                          </p>
+                        </div>
+                      </div>
+                      <ChevronDown className={cn(
+                        'h-5 w-5 text-[#ccff00] transition-transform',
+                        shopExpanded && 'rotate-180'
+                      )} />
+                    </button>
+                  </CollapsibleTrigger>
+                  
+                  <CollapsibleContent className="space-y-4 pt-3">
+                    <div className="text-xs text-gray-400 p-3 rounded bg-gray-900/50 border border-gray-800">
+                      <p className="font-medium text-white mb-1">How it works:</p>
+                      <ul className="space-y-1">
+                        <li>1. Partner with a local skate shop you trust</li>
+                        <li>2. Set a discount percentage for tour participants</li>
+                        <li>3. After the tour, give participants a confirmation to show at the shop</li>
+                        <li>4. Shop honors the discount - builds community & drives foot traffic!</li>
+                      </ul>
+                    </div>
+                    
+                    {/* Shop Selection */}
+                    <div className="space-y-2">
+                      <Label>Select Partner Shop</Label>
+                      {shopsLoading ? (
+                        <div className="flex items-center gap-2 text-gray-400 py-4">
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                          <span className="text-sm">Loading shops...</span>
+                        </div>
+                      ) : shops && shops.length > 0 ? (
+                        <div className="grid grid-cols-1 gap-2 max-h-48 overflow-y-auto">
+                          <Button
+                            type="button"
+                            variant={!partnerShopId ? 'default' : 'outline'}
+                            size="sm"
+                            onClick={() => setPartnerShopId('')}
+                            className={cn(
+                              'justify-start gap-2',
+                              !partnerShopId
+                                ? 'bg-gray-700'
+                                : 'border-gray-700'
+                            )}
+                          >
+                            <X className="h-4 w-4" />
+                            No partner shop
+                          </Button>
+                          {shops.map((shop) => {
+                            const shopKey = `${shop.pubkey}:${shop.identifier}`;
+                            return (
+                              <Button
+                                key={shopKey}
+                                type="button"
+                                variant={partnerShopId === shopKey ? 'default' : 'outline'}
+                                size="sm"
+                                onClick={() => setPartnerShopId(shopKey)}
+                                className={cn(
+                                  'justify-start gap-2 h-auto py-2',
+                                  partnerShopId === shopKey
+                                    ? 'bg-[#ccff00] text-black hover:bg-[#ccff00]/90'
+                                    : 'border-gray-700 hover:border-[#ccff00]/50'
+                                )}
+                              >
+                                <Store className="h-4 w-4 flex-shrink-0" />
+                                <div className="text-left">
+                                  <div className="font-medium">{shop.name}</div>
+                                  {shop.location && (
+                                    <div className={cn(
+                                      'text-xs',
+                                      partnerShopId === shopKey ? 'text-black/70' : 'text-gray-500'
+                                    )}>
+                                      {shop.location}
+                                    </div>
+                                  )}
+                                </div>
+                              </Button>
+                            );
+                          })}
+                        </div>
+                      ) : (
+                        <div className="text-sm text-gray-500 space-y-2">
+                          <p>No skate shops found on the network yet.</p>
+                          <Link to="/create-shop" className="text-[#ccff00] hover:underline inline-flex items-center gap-1">
+                            <Store className="h-3 w-3" />
+                            Add a shop first
+                          </Link>
+                        </div>
+                      )}
+                    </div>
+                    
+                    {/* Pro tip about coordinating with shop */}
+                    <div className="text-xs text-amber-400/80 p-3 rounded bg-amber-500/10 border border-amber-500/20">
+                      <p className="font-medium text-amber-400 mb-1">💡 Pro Tip: Coordinate with the shop first!</p>
+                      <p>Before listing a partner discount, contact the shop owner via DM to agree on the discount percentage. This ensures they're on board and will honor the discount for your tour participants.</p>
+                    </div>
+
+                    {/* Discount Slider */}
+                    {partnerShopId && (
+                      <div className="space-y-3">
+                        <div className="flex items-center justify-between">
+                          <Label className="flex items-center gap-2">
+                            <Percent className="h-4 w-4 text-[#ccff00]" />
+                            Discount Percentage
+                          </Label>
+                          <span className="text-[#ccff00] font-bold text-lg">{shopDiscount[0]}% OFF</span>
+                        </div>
+                        <Slider
+                          value={shopDiscount}
+                          onValueChange={setShopDiscount}
+                          min={5}
+                          max={50}
+                          step={5}
+                          className="w-full"
+                        />
+                        <p className="text-xs text-gray-500">
+                          Tour participants can show their booking confirmation at the shop to receive this discount
+                        </p>
+                      </div>
+                    )}
+                  </CollapsibleContent>
+                </div>
+              </Collapsible>
+
+              {/* Languages */}
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <Label className="flex items-center gap-2">
+                    <Globe className="h-4 w-4 text-cyan-400" />
+                    Languages Spoken
+                  </Label>
+                  {languages.length > 0 && (
+                    <span className="text-xs text-cyan-400">
+                      {languages.length} selected
+                    </span>
+                  )}
+                </div>
+                
+                {/* Common languages - always visible */}
+                <div className="flex flex-wrap gap-2">
+                  {COMMON_LANGUAGES.map((lang) => (
+                    <Button
+                      key={lang.code}
+                      type="button"
+                      variant={languages.includes(lang.code) ? 'default' : 'outline'}
+                      size="sm"
+                      onClick={() => toggleLanguage(lang.code)}
+                      className={cn(
+                        'gap-1.5 h-8',
+                        languages.includes(lang.code)
+                          ? 'bg-cyan-500 hover:bg-cyan-600'
+                          : 'border-gray-700 hover:border-cyan-500/50'
+                      )}
+                    >
+                      <span>{lang.flag}</span>
+                      <span className="text-xs">{lang.label}</span>
+                    </Button>
+                  ))}
+                </div>
+
+                {/* Collapsible section for all languages */}
+                <Collapsible open={languagesExpanded} onOpenChange={setLanguagesExpanded}>
+                  <CollapsibleTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="w-full justify-between text-gray-400 hover:text-cyan-400 hover:bg-cyan-500/10"
+                    >
+                      <span>{languagesExpanded ? 'Show less' : `Show all ${ALL_LANGUAGES.length} languages`}</span>
+                      <ChevronDown className={cn(
+                        'h-4 w-4 transition-transform',
+                        languagesExpanded && 'rotate-180'
+                      )} />
+                    </Button>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent className="pt-3">
+                    <div className="flex flex-wrap gap-1.5 max-h-64 overflow-y-auto p-2 rounded-lg bg-gray-900/50 border border-gray-800">
+                      {ALL_LANGUAGES.filter(l => !COMMON_LANGUAGES.find(c => c.code === l.code)).map((lang) => (
+                        <Button
+                          key={lang.code}
+                          type="button"
+                          variant={languages.includes(lang.code) ? 'default' : 'outline'}
+                          size="sm"
+                          onClick={() => toggleLanguage(lang.code)}
+                          className={cn(
+                            'gap-1 h-7 text-xs px-2',
+                            languages.includes(lang.code)
+                              ? 'bg-cyan-500 hover:bg-cyan-600'
+                              : 'border-gray-700 hover:border-cyan-500/50'
+                          )}
+                        >
+                          <span>{lang.flag}</span>
+                          <span>{lang.label}</span>
+                        </Button>
+                      ))}
+                    </div>
+                  </CollapsibleContent>
+                </Collapsible>
+
+                {/* Show selected languages not in common list */}
+                {languages.filter(l => !COMMON_LANGUAGES.find(c => c.code === l)).length > 0 && !languagesExpanded && (
+                  <div className="flex flex-wrap gap-1.5">
+                    <span className="text-xs text-gray-500 mr-1">Also selected:</span>
+                    {languages.filter(l => !COMMON_LANGUAGES.find(c => c.code === l)).map((code) => {
+                      const lang = ALL_LANGUAGES.find(l => l.code === code);
+                      if (!lang) return null;
+                      return (
+                        <span key={code} className="inline-flex items-center gap-1 text-xs bg-cyan-500/20 text-cyan-300 px-2 py-0.5 rounded-full">
+                          {lang.flag} {lang.label}
+                          <button
+                            type="button"
+                            onClick={() => toggleLanguage(code)}
+                            className="hover:text-red-400"
+                          >
+                            <X className="h-3 w-3" />
+                          </button>
+                        </span>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+
+              {/* Tour Image */}
+              <div className="space-y-2">
+                <Label>Tour Photo</Label>
+                <div className="flex gap-4">
+                  {image ? (
+                    <div className="relative w-32 h-24 rounded-lg overflow-hidden bg-muted">
+                      <img src={image} alt="Tour" className="w-full h-full object-cover" />
+                      <button
+                        type="button"
+                        onClick={() => setImage(null)}
+                        className="absolute top-1 right-1 p-1 rounded-full bg-background/80 hover:bg-destructive hover:text-destructive-foreground transition-colors"
+                      >
+                        <X className="h-4 w-4" />
+                      </button>
+                    </div>
+                  ) : (
+                    <label className="w-32 h-24 rounded-lg border-2 border-dashed border-cyan-500/30 flex flex-col items-center justify-center cursor-pointer hover:bg-cyan-500/5 transition-colors">
+                      <input
+                        type="file"
+                        accept="image/*"
+                        className="hidden"
+                        onChange={handleImageUpload}
+                        disabled={isUploading}
+                      />
+                      {isUploading ? (
+                        <Loader2 className="h-6 w-6 animate-spin text-cyan-400" />
+                      ) : (
+                        <>
+                          <Upload className="h-6 w-6 text-cyan-400 mb-1" />
+                          <span className="text-xs text-gray-400">Upload</span>
+                        </>
+                      )}
+                    </label>
+                  )}
+                  <div className="text-xs text-gray-500 flex-1">
+                    <p>Add a photo of yourself skating or a cool spot from your tour.</p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Submit */}
+              <Button
+                type="submit"
+                className="w-full font-black uppercase"
+                style={{ 
+                  backgroundColor: TOUR_CATEGORIES[tourCategory].color,
+                  color: tourCategory === 'destruction' || tourCategory === 'national' ? 'black' : 'white',
+                }}
+                disabled={isPublishing || isUploading}
+              >
+                {isPublishing ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Publishing...
+                  </>
+                ) : (
+                  <>
+                    {tourCategory === 'destruction' ? <Skull className="h-4 w-4 mr-2" /> : 
+                     tourCategory === 'international' ? <Plane className="h-4 w-4 mr-2" /> :
+                     tourCategory === 'national' ? <Car className="h-4 w-4 mr-2" /> :
+                     <Route className="h-4 w-4 mr-2" />}
+                    {tourCategory === 'destruction' ? 'Create World Destruction Tour' : 'Create Tour'}
+                  </>
+                )}
+              </Button>
+            </CardContent>
+          </Card>
+        </form>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/DirectMessagesPage.tsx b/src/src/pages/DirectMessagesPage.tsx
new file mode 100644
index 0000000..f9b28bb
--- /dev/null
+++ b/src/src/pages/DirectMessagesPage.tsx
@@ -0,0 +1,326 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useSeoMeta } from '@unhead/react';
+import { nip19 } from 'nostr-tools';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Badge } from '@/components/ui/badge';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useConversations, formatPubkeyShort } from '@/hooks/useDirectMessages';
+import { useAuthor } from '@/hooks/useAuthor';
+import { genUserName } from '@/lib/genUserName';
+import { formatDistanceToNow } from 'date-fns';
+import {
+  MessageCircle,
+  Plus,
+  Search,
+  Lock,
+  AlertCircle,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+// Conversation preview component
+function ConversationPreview({ pubkey, lastMessage }: { 
+  pubkey: string; 
+  lastMessage?: { content: string; createdAt: number; pubkey: string };
+}) {
+  const author = useAuthor(pubkey);
+  const { user } = useCurrentUser();
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(pubkey);
+  const avatar = metadata?.picture;
+
+  const isFromMe = lastMessage?.pubkey === user?.pubkey;
+  const timeAgo = lastMessage 
+    ? formatDistanceToNow(new Date(lastMessage.createdAt * 1000), { addSuffix: true })
+    : '';
+
+  return (
+    <Link to={`/messages/${nip19.npubEncode(pubkey)}`}>
+      <Card className={cn(
+        "hover:bg-gray-900/50 transition-colors cursor-pointer border-gray-800",
+        "hover:border-[#ff0040]/50 active:scale-[0.99]"
+      )}>
+        <CardContent className="p-3 sm:p-4">
+          <div className="flex items-center gap-2.5 sm:gap-3">
+            <Avatar className="h-10 w-10 sm:h-12 sm:w-12 border-2 border-gray-700 flex-shrink-0">
+              <AvatarImage src={avatar} alt={displayName} />
+              <AvatarFallback className="bg-[#ff0040]/20 text-[#ff0040] text-xs sm:text-sm">
+                {displayName.slice(0, 2).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center justify-between gap-2">
+                <p className="font-bold text-white truncate text-sm sm:text-base">{displayName}</p>
+                {timeAgo && (
+                  <span className="text-[10px] sm:text-xs text-gray-500 flex-shrink-0">{timeAgo}</span>
+                )}
+              </div>
+              {lastMessage && (
+                <p className="text-xs sm:text-sm text-gray-400 truncate">
+                  {isFromMe && <span className="text-gray-500">You: </span>}
+                  {lastMessage.content}
+                </p>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}
+
+function ConversationSkeleton() {
+  return (
+    <Card className="border-gray-800">
+      <CardContent className="p-4">
+        <div className="flex items-center gap-3">
+          <Skeleton className="h-12 w-12 rounded-full" />
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-3 w-48" />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function DirectMessagesPage() {
+  const { user } = useCurrentUser();
+  const { data: conversations, isLoading, error } = useConversations();
+  const [showNewMessage, setShowNewMessage] = useState(false);
+  const [newRecipient, setNewRecipient] = useState('');
+  const [recipientError, setRecipientError] = useState('');
+
+  useSeoMeta({
+    title: 'Messages - SkateSpots',
+    description: 'Private encrypted messages with the skateboarding community',
+  });
+
+  const handleStartConversation = () => {
+    setRecipientError('');
+    
+    // Try to parse the input as npub or hex pubkey
+    let pubkey = newRecipient.trim();
+    
+    try {
+      if (pubkey.startsWith('npub1')) {
+        const decoded = nip19.decode(pubkey);
+        if (decoded.type === 'npub') {
+          pubkey = decoded.data;
+        } else {
+          throw new Error('Invalid npub');
+        }
+      } else if (!/^[a-f0-9]{64}$/i.test(pubkey)) {
+        throw new Error('Invalid pubkey format');
+      }
+      
+      // Navigate to conversation
+      window.location.href = `/messages/${nip19.npubEncode(pubkey)}`;
+    } catch {
+      setRecipientError('Please enter a valid npub or pubkey');
+    }
+  };
+
+  // Not logged in
+  if (!user) {
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="border-dashed border-2 border-gray-700">
+            <CardContent className="py-16 text-center">
+              <Lock className="h-16 w-16 mx-auto mb-4 text-gray-600" />
+              <h2 className="text-xl font-bold mb-2">Log in to access messages</h2>
+              <p className="text-gray-400">
+                Private, encrypted messaging with skaters in the community
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  // Check if NIP-44 is available
+  if (!user.signer?.nip44) {
+    const isAndroid = /Android/i.test(navigator.userAgent);
+    const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
+    const isMobile = isAndroid || isIOS;
+    
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="border-dashed border-2 border-orange-500/30">
+            <CardContent className="py-12 sm:py-16 text-center px-4">
+              <AlertCircle className="h-12 w-12 sm:h-16 sm:w-16 mx-auto mb-4 text-orange-500" />
+              <h2 className="text-lg sm:text-xl font-bold mb-2">Secure Login Required</h2>
+              <p className="text-gray-400 mb-4 text-sm sm:text-base">
+                Private messages require a secure signer app to encrypt your conversations.
+              </p>
+              {isMobile ? (
+                <div className="space-y-3">
+                  {isAndroid && (
+                    <div className="p-4 rounded-lg bg-[#ccff00]/10 border border-[#ccff00]/30">
+                      <p className="text-sm text-gray-300 mb-3">
+                        <strong className="text-[#ccff00]">On Android:</strong> Use the Amber app
+                      </p>
+                      <a 
+                        href="https://github.com/greenart7c3/Amber"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#ccff00] text-black font-bold text-sm"
+                      >
+                        Get Amber →
+                      </a>
+                    </div>
+                  )}
+                  {isIOS && (
+                    <div className="p-4 rounded-lg bg-blue-500/10 border border-blue-500/30">
+                      <p className="text-sm text-gray-300">
+                        <strong className="text-blue-400">On iOS:</strong> Try logging in with a bunker connection (nsec.app) from Settings
+                      </p>
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <p className="text-sm text-gray-500">
+                  Try logging in with a browser extension like Alby or nos2x that supports encryption.
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="container px-4 py-4 sm:py-8 max-w-2xl">
+        {/* Header */}
+        <div className="flex items-center justify-between gap-3 mb-4 sm:mb-6">
+          <div className="min-w-0 flex-1">
+            <h1 className="text-xl sm:text-2xl font-black uppercase tracking-wider flex items-center gap-2 sm:gap-3">
+              <MessageCircle className="h-5 w-5 sm:h-7 sm:w-7 text-[#ff0040] flex-shrink-0" />
+              <span className="truncate">MESSAGES</span>
+            </h1>
+            <p className="text-gray-400 text-xs sm:text-sm mt-1 flex items-center gap-1">
+              <Lock className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
+              <span className="hidden xs:inline">End-to-end encrypted with NIP-17</span>
+              <span className="xs:hidden">Encrypted</span>
+            </p>
+          </div>
+          <Button
+            onClick={() => setShowNewMessage(true)}
+            className="bg-[#ff0040] hover:bg-[#ff0040]/90 text-white font-bold flex-shrink-0 h-10 sm:h-auto px-3 sm:px-4"
+          >
+            <Plus className="h-4 w-4 sm:mr-2" />
+            <span className="hidden sm:inline">New Message</span>
+          </Button>
+        </div>
+
+        {/* Conversations List */}
+        <div className="space-y-3">
+          {isLoading ? (
+            <>
+              <ConversationSkeleton />
+              <ConversationSkeleton />
+              <ConversationSkeleton />
+            </>
+          ) : error ? (
+            <Card className="border-red-500/30">
+              <CardContent className="py-8 text-center">
+                <AlertCircle className="h-12 w-12 mx-auto mb-3 text-red-500" />
+                <p className="text-gray-400">Failed to load messages</p>
+              </CardContent>
+            </Card>
+          ) : conversations && conversations.length > 0 ? (
+            conversations.map((conv) => (
+              <ConversationPreview
+                key={conv.pubkey}
+                pubkey={conv.pubkey}
+                lastMessage={conv.lastMessage}
+              />
+            ))
+          ) : (
+            <Card className="border-dashed border-2 border-gray-700">
+              <CardContent className="py-12 text-center">
+                <MessageCircle className="h-16 w-16 mx-auto mb-4 text-gray-600" />
+                <h2 className="text-xl font-bold mb-2">No messages yet</h2>
+                <p className="text-gray-400 mb-6">
+                  Start a conversation with someone in the community
+                </p>
+                <Button
+                  onClick={() => setShowNewMessage(true)}
+                  className="bg-[#ff0040] hover:bg-[#ff0040]/90 text-white font-bold"
+                >
+                  <Plus className="h-4 w-4 mr-2" />
+                  Start a Conversation
+                </Button>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+
+      {/* New Message Dialog */}
+      <Dialog open={showNewMessage} onOpenChange={setShowNewMessage}>
+        <DialogContent className="bg-black border-2 border-[#ff0040]/50 mx-4 max-w-[calc(100vw-2rem)] sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-white">
+              <MessageCircle className="h-5 w-5 text-[#ff0040]" />
+              New Message
+            </DialogTitle>
+            <DialogDescription className="text-gray-400 text-sm">
+              Enter the npub or pubkey of the person you want to message
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 mt-4">
+            <div className="space-y-2">
+              <Input
+                value={newRecipient}
+                onChange={(e) => {
+                  setNewRecipient(e.target.value);
+                  setRecipientError('');
+                }}
+                placeholder="npub1... or hex pubkey"
+                className="bg-black border-gray-700 text-white font-mono text-sm h-11"
+              />
+              {recipientError && (
+                <p className="text-sm text-red-500">{recipientError}</p>
+              )}
+            </div>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                onClick={() => setShowNewMessage(false)}
+                className="flex-1 border-gray-700 h-11"
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleStartConversation}
+                disabled={!newRecipient.trim()}
+                className="flex-1 bg-[#ff0040] hover:bg-[#ff0040]/90 text-white font-bold h-11"
+              >
+                Start Chat
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/EditEventPage.tsx b/src/src/pages/EditEventPage.tsx
new file mode 100644
index 0000000..20919f6
--- /dev/null
+++ b/src/src/pages/EditEventPage.tsx
@@ -0,0 +1,572 @@
+import { useState, useEffect } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { useNavigate, useParams } from 'react-router-dom';
+import ngeohash from 'ngeohash';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useUploadFile } from '@/hooks/useUploadFile';
+import { useToast } from '@/hooks/useToast';
+import { useSkateEvent } from '@/hooks/useSkateEvents';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { CALENDAR_EVENT_KIND, EVENT_TYPE_LABELS } from '@/lib/types';
+import { cn } from '@/lib/utils';
+import {
+  Calendar,
+  Upload,
+  X,
+  Loader2,
+  ArrowLeft,
+  MapPin,
+  AlertTriangle,
+} from 'lucide-react';
+import { Link } from 'react-router-dom';
+import NotFound from './NotFound';
+
+const EVENT_TYPES = Object.entries(EVENT_TYPE_LABELS);
+
+function formatDateForInput(timestamp: number): string {
+  const date = new Date(timestamp * 1000);
+  return date.toISOString().split('T')[0];
+}
+
+function formatTimeForInput(timestamp: number): string {
+  const date = new Date(timestamp * 1000);
+  return date.toTimeString().slice(0, 5);
+}
+
+function EditEventSkeleton() {
+  return (
+    <Layout>
+      <div className="container px-4 py-8 max-w-2xl">
+        <Skeleton className="h-6 w-32 mb-4" />
+        <Skeleton className="h-10 w-64 mb-2" />
+        <Skeleton className="h-5 w-48 mb-6" />
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-6 w-32" />
+            <Skeleton className="h-4 w-64" />
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-24 w-full" />
+            <div className="grid grid-cols-2 gap-4">
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+            <Skeleton className="h-10 w-full" />
+          </CardContent>
+        </Card>
+      </div>
+    </Layout>
+  );
+}
+
+export default function EditEventPage() {
+  const { pubkey, identifier } = useParams<{ pubkey: string; identifier: string }>();
+  const navigate = useNavigate();
+  const { user } = useCurrentUser();
+  const { data: event, isLoading, error } = useSkateEvent(identifier || '', pubkey);
+  const { mutateAsync: createEvent, isPending: isPublishing } = useNostrPublish();
+  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+  const { toast } = useToast();
+
+  // Form state
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [location, setLocation] = useState('');
+  const [latitude, setLatitude] = useState('');
+  const [longitude, setLongitude] = useState('');
+  const [startDate, setStartDate] = useState('');
+  const [startTime, setStartTime] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [endTime, setEndTime] = useState('');
+  const [selectedTypes, setSelectedTypes] = useState<string[]>([]);
+  const [image, setImage] = useState<string | null>(null);
+  const [isGettingLocation, setIsGettingLocation] = useState(false);
+  const [initialized, setInitialized] = useState(false);
+
+  useSeoMeta({
+    title: event ? `Edit ${event.title} - SkateSpots` : 'Edit Event - SkateSpots',
+    description: 'Edit your skateboarding event.',
+  });
+
+  // Initialize form with existing data
+  useEffect(() => {
+    if (event && !initialized) {
+      setTitle(event.title);
+      setDescription(event.description || '');
+      setLocation(event.location || '');
+      setSelectedTypes(event.types);
+      setImage(event.image || null);
+
+      // Set dates and times
+      setStartDate(formatDateForInput(event.start));
+      setStartTime(formatTimeForInput(event.start));
+
+      if (event.end) {
+        setEndDate(formatDateForInput(event.end));
+        setEndTime(formatTimeForInput(event.end));
+      }
+
+      // Decode geohash to get coordinates
+      if (event.geohash) {
+        const { latitude: lat, longitude: lng } = ngeohash.decode(event.geohash);
+        setLatitude(lat.toFixed(6));
+        setLongitude(lng.toFixed(6));
+      }
+
+      setInitialized(true);
+    }
+  }, [event, initialized]);
+
+  const toggleType = (type: string) => {
+    setSelectedTypes((prev) =>
+      prev.includes(type) ? prev.filter((t) => t !== type) : [...prev, type]
+    );
+  };
+
+  const getCurrentLocation = () => {
+    if (!navigator.geolocation) {
+      toast({
+        title: 'Geolocation not supported',
+        description: 'Your browser does not support geolocation.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    setIsGettingLocation(true);
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        setLatitude(position.coords.latitude.toFixed(6));
+        setLongitude(position.coords.longitude.toFixed(6));
+        setIsGettingLocation(false);
+        toast({
+          title: 'Location found',
+          description: 'Your current location has been set.',
+        });
+      },
+      (error) => {
+        setIsGettingLocation(false);
+        toast({
+          title: 'Location error',
+          description: error.message,
+          variant: 'destructive',
+        });
+      }
+    );
+  };
+
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    try {
+      const file = files[0];
+      const tags = await uploadFile(file);
+      const url = tags[0]?.[1];
+      if (url) {
+        setImage(url);
+        toast({
+          title: 'Image uploaded',
+          description: 'Your image has been uploaded successfully.',
+        });
+      }
+    } catch (error) {
+      toast({
+        title: 'Upload failed',
+        description: error instanceof Error ? error.message : 'Failed to upload image',
+        variant: 'destructive',
+      });
+    }
+
+    e.target.value = '';
+  };
+
+  const removeImage = () => {
+    setImage(null);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!event) return;
+
+    if (!title.trim()) {
+      toast({
+        title: 'Title required',
+        description: 'Please enter a name for this event.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (!startDate || !startTime) {
+      toast({
+        title: 'Start time required',
+        description: 'Please enter when the event starts.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    // Parse start time
+    const startDateTime = new Date(`${startDate}T${startTime}`);
+    const startTimestamp = Math.floor(startDateTime.getTime() / 1000);
+
+    if (isNaN(startTimestamp)) {
+      toast({
+        title: 'Invalid date',
+        description: 'Please enter a valid start date and time.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    // Parse end time if provided
+    let endTimestamp: number | undefined;
+    if (endDate && endTime) {
+      const endDateTime = new Date(`${endDate}T${endTime}`);
+      endTimestamp = Math.floor(endDateTime.getTime() / 1000);
+
+      if (isNaN(endTimestamp) || endTimestamp <= startTimestamp) {
+        toast({
+          title: 'Invalid end time',
+          description: 'End time must be after start time.',
+          variant: 'destructive',
+        });
+        return;
+      }
+    }
+
+    try {
+      // Build tags - use the same identifier to update the addressable event
+      const tags: string[][] = [
+        ['d', event.identifier],
+        ['title', title.trim()],
+        ['start', startTimestamp.toString()],
+        ['t', 'skateboarding'],
+        ['alt', `Skate event: ${title.trim()}`],
+      ];
+
+      if (endTimestamp) {
+        tags.push(['end', endTimestamp.toString()]);
+      }
+
+      if (location.trim()) {
+        tags.push(['location', location.trim()]);
+      }
+
+      // Add geohash if coordinates provided
+      if (latitude && longitude) {
+        const lat = parseFloat(latitude);
+        const lng = parseFloat(longitude);
+        if (!isNaN(lat) && !isNaN(lng) && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
+          const geohash = ngeohash.encode(lat, lng, 7);
+          tags.push(['g', geohash]);
+        }
+      }
+
+      for (const type of selectedTypes) {
+        tags.push(['t', type]);
+      }
+
+      if (image) {
+        tags.push(['image', image]);
+      }
+
+      await createEvent({
+        kind: CALENDAR_EVENT_KIND,
+        content: description.trim(),
+        tags,
+      });
+
+      toast({
+        title: 'Event updated!',
+        description: 'Your changes have been published to the network.',
+      });
+
+      navigate(`/event/${user?.pubkey}/${event.identifier}`);
+    } catch (error) {
+      toast({
+        title: 'Failed to update',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  if (isLoading) {
+    return <EditEventSkeleton />;
+  }
+
+  if (error || !event) {
+    return <NotFound />;
+  }
+
+  // Check if user is logged in
+  if (!user) {
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="max-w-xl mx-auto border-dashed">
+            <CardContent className="py-12 text-center">
+              <Calendar className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+              <h2 className="text-xl font-bold mb-2">Login Required</h2>
+              <p className="text-muted-foreground mb-6">
+                You need to log in to edit this event.
+              </p>
+              <LoginArea className="justify-center" />
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  // Check if user is the owner
+  if (user.pubkey !== event.pubkey) {
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="max-w-xl mx-auto border-destructive">
+            <CardContent className="py-12 text-center">
+              <AlertTriangle className="h-12 w-12 mx-auto mb-4 text-destructive" />
+              <h2 className="text-xl font-bold mb-2">Access Denied</h2>
+              <p className="text-muted-foreground mb-6">
+                You can only edit events that you created.
+              </p>
+              <Link to={`/event/${event.pubkey}/${event.identifier}`}>
+                <Button variant="outline">Back to Event</Button>
+              </Link>
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="container px-4 py-8 max-w-2xl">
+        <div className="mb-6">
+          <Link
+            to={`/event/${event.pubkey}/${event.identifier}`}
+            className="inline-flex items-center text-muted-foreground hover:text-foreground transition-colors mb-4"
+          >
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Back to Event
+          </Link>
+          <h1 className="text-3xl font-bold">Edit Event</h1>
+          <p className="text-muted-foreground mt-1">
+            Update the details for {event.title}
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <Card>
+            <CardHeader>
+              <CardTitle>Event Details</CardTitle>
+              <CardDescription>
+                Update the information about this event. All fields marked with * are required.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {/* Title */}
+              <div className="space-y-2">
+                <Label htmlFor="title">Event Name *</Label>
+                <Input
+                  id="title"
+                  placeholder="e.g., Summer Skate Session"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  required
+                />
+              </div>
+
+              {/* Description */}
+              <div className="space-y-2">
+                <Label htmlFor="description">Description</Label>
+                <Textarea
+                  id="description"
+                  placeholder="Describe the event, what to expect, rules, prizes, etc."
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  rows={4}
+                />
+              </div>
+
+              {/* Start Date/Time */}
+              <div className="space-y-2">
+                <Label>Start Date & Time *</Label>
+                <div className="grid grid-cols-2 gap-4">
+                  <Input
+                    type="date"
+                    value={startDate}
+                    onChange={(e) => setStartDate(e.target.value)}
+                    required
+                  />
+                  <Input
+                    type="time"
+                    value={startTime}
+                    onChange={(e) => setStartTime(e.target.value)}
+                    required
+                  />
+                </div>
+              </div>
+
+              {/* End Date/Time */}
+              <div className="space-y-2">
+                <Label>End Date & Time (optional)</Label>
+                <div className="grid grid-cols-2 gap-4">
+                  <Input
+                    type="date"
+                    value={endDate}
+                    onChange={(e) => setEndDate(e.target.value)}
+                  />
+                  <Input
+                    type="time"
+                    value={endTime}
+                    onChange={(e) => setEndTime(e.target.value)}
+                  />
+                </div>
+              </div>
+
+              {/* Location Address */}
+              <div className="space-y-2">
+                <Label htmlFor="location">Venue / Address</Label>
+                <Input
+                  id="location"
+                  placeholder="e.g., Venice Beach Skatepark, CA"
+                  value={location}
+                  onChange={(e) => setLocation(e.target.value)}
+                />
+              </div>
+
+              {/* Coordinates (optional for events) */}
+              <div className="space-y-2">
+                <Label>Coordinates (optional)</Label>
+                <div className="grid grid-cols-2 gap-4">
+                  <Input
+                    placeholder="Latitude"
+                    value={latitude}
+                    onChange={(e) => setLatitude(e.target.value)}
+                  />
+                  <Input
+                    placeholder="Longitude"
+                    value={longitude}
+                    onChange={(e) => setLongitude(e.target.value)}
+                  />
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={getCurrentLocation}
+                  disabled={isGettingLocation}
+                  className="mt-2"
+                >
+                  {isGettingLocation ? (
+                    <>
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                      Getting location...
+                    </>
+                  ) : (
+                    <>
+                      <MapPin className="h-4 w-4 mr-2" />
+                      Use my current location
+                    </>
+                  )}
+                </Button>
+              </div>
+
+              {/* Event Types */}
+              <div className="space-y-2">
+                <Label>Event Type(s)</Label>
+                <div className="flex flex-wrap gap-2">
+                  {EVENT_TYPES.map(([type, label]) => (
+                    <Badge
+                      key={type}
+                      variant={selectedTypes.includes(type) ? 'default' : 'outline'}
+                      className={cn(
+                        'cursor-pointer transition-colors',
+                        selectedTypes.includes(type)
+                          ? 'bg-primary hover:bg-primary/90'
+                          : 'hover:bg-muted'
+                      )}
+                      onClick={() => toggleType(type)}
+                    >
+                      {label}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+
+              {/* Cover Image */}
+              <div className="space-y-2">
+                <Label>Cover Image</Label>
+                {image ? (
+                  <div className="relative aspect-video rounded-lg overflow-hidden bg-muted max-w-xs">
+                    <img src={image} alt="Event cover" className="w-full h-full object-cover" />
+                    <button
+                      type="button"
+                      onClick={removeImage}
+                      className="absolute top-2 right-2 p-1 rounded-full bg-background/80 hover:bg-destructive hover:text-destructive-foreground transition-colors"
+                    >
+                      <X className="h-4 w-4" />
+                    </button>
+                  </div>
+                ) : (
+                  <label className="block max-w-xs aspect-video rounded-lg border-2 border-dashed flex flex-col items-center justify-center cursor-pointer hover:bg-muted/50 transition-colors">
+                    <input
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={handleImageUpload}
+                      disabled={isUploading}
+                    />
+                    {isUploading ? (
+                      <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                    ) : (
+                      <>
+                        <Upload className="h-6 w-6 text-muted-foreground mb-1" />
+                        <span className="text-sm text-muted-foreground">Upload cover image</span>
+                      </>
+                    )}
+                  </label>
+                )}
+              </div>
+
+              {/* Submit */}
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={isPublishing || isUploading}
+              >
+                {isPublishing ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Saving...
+                  </>
+                ) : (
+                  <>
+                    <Calendar className="h-4 w-4 mr-2" />
+                    Save Changes
+                  </>
+                )}
+              </Button>
+            </CardContent>
+          </Card>
+        </form>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/EditShopPage.tsx b/src/src/pages/EditShopPage.tsx
new file mode 100644
index 0000000..5c6154b
--- /dev/null
+++ b/src/src/pages/EditShopPage.tsx
@@ -0,0 +1,564 @@
+import { useState, useEffect } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { useNavigate, useParams } from 'react-router-dom';
+import ngeohash from 'ngeohash';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useUploadFile } from '@/hooks/useUploadFile';
+import { useToast } from '@/hooks/useToast';
+import { useShop } from '@/hooks/useShops';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { SKATE_SHOP_KIND } from '@/lib/types';
+import {
+  Store,
+  Upload,
+  X,
+  Loader2,
+  ArrowLeft,
+  MapPin,
+  AlertTriangle,
+} from 'lucide-react';
+import { Link } from 'react-router-dom';
+import NotFound from './NotFound';
+
+function EditShopSkeleton() {
+  return (
+    <Layout>
+      <div className="container px-4 py-8 max-w-2xl">
+        <Skeleton className="h-6 w-32 mb-4" />
+        <Skeleton className="h-10 w-64 mb-2" />
+        <Skeleton className="h-5 w-48 mb-6" />
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-6 w-32" />
+            <Skeleton className="h-4 w-64" />
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-24 w-full" />
+            <Skeleton className="h-10 w-full" />
+            <div className="grid grid-cols-2 gap-4">
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+            <Skeleton className="h-10 w-full" />
+          </CardContent>
+        </Card>
+      </div>
+    </Layout>
+  );
+}
+
+export default function EditShopPage() {
+  const { pubkey, identifier } = useParams<{ pubkey: string; identifier: string }>();
+  const navigate = useNavigate();
+  const { user } = useCurrentUser();
+  const { data: shop, isLoading, error } = useShop(identifier || '', pubkey);
+  const { mutateAsync: createEvent, isPending: isPublishing } = useNostrPublish();
+  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+  const { toast } = useToast();
+
+  // Form state
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [location, setLocation] = useState('');
+  const [latitude, setLatitude] = useState('');
+  const [longitude, setLongitude] = useState('');
+  const [phone, setPhone] = useState('');
+  const [email, setEmail] = useState('');
+  const [website, setWebsite] = useState('');
+  const [instagram, setInstagram] = useState('');
+  const [hours, setHours] = useState('');
+  const [images, setImages] = useState<string[]>([]);
+  const [isGettingLocation, setIsGettingLocation] = useState(false);
+  const [initialized, setInitialized] = useState(false);
+
+  useSeoMeta({
+    title: shop ? `Edit ${shop.name} - SkateSpots` : 'Edit Shop - SkateSpots',
+    description: 'Edit your skate shop.',
+  });
+
+  // Initialize form with existing data
+  useEffect(() => {
+    if (shop && !initialized) {
+      setName(shop.name);
+      setDescription(shop.description || '');
+      setLocation(shop.location || '');
+      setPhone(shop.phone || '');
+      setEmail(shop.email || '');
+      setWebsite(shop.website || '');
+      setInstagram(shop.instagram || '');
+      setHours(shop.hours || '');
+      setImages(shop.images);
+
+      // Decode geohash to get coordinates
+      if (shop.geohash) {
+        const { latitude: lat, longitude: lng } = ngeohash.decode(shop.geohash);
+        setLatitude(lat.toFixed(6));
+        setLongitude(lng.toFixed(6));
+      }
+
+      setInitialized(true);
+    }
+  }, [shop, initialized]);
+
+  const getCurrentLocation = () => {
+    if (!navigator.geolocation) {
+      toast({
+        title: 'Geolocation not supported',
+        description: 'Your browser does not support geolocation.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    setIsGettingLocation(true);
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        setLatitude(position.coords.latitude.toFixed(6));
+        setLongitude(position.coords.longitude.toFixed(6));
+        setIsGettingLocation(false);
+        toast({
+          title: 'Location found',
+          description: 'Your current location has been set.',
+        });
+      },
+      (error) => {
+        setIsGettingLocation(false);
+        toast({
+          title: 'Location error',
+          description: error.message,
+          variant: 'destructive',
+        });
+      }
+    );
+  };
+
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    try {
+      const file = files[0];
+      const tags = await uploadFile(file);
+      const url = tags[0]?.[1];
+      if (url) {
+        setImages((prev) => [...prev, url]);
+        toast({
+          title: 'Image uploaded',
+          description: 'Your image has been uploaded successfully.',
+        });
+      }
+    } catch (error) {
+      toast({
+        title: 'Upload failed',
+        description: error instanceof Error ? error.message : 'Failed to upload image',
+        variant: 'destructive',
+      });
+    }
+
+    e.target.value = '';
+  };
+
+  const removeImage = (url: string) => {
+    setImages((prev) => prev.filter((img) => img !== url));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!shop) return;
+
+    if (!name.trim()) {
+      toast({
+        title: 'Shop name required',
+        description: 'Please enter a name for your shop.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (!location.trim()) {
+      toast({
+        title: 'Address required',
+        description: 'Please enter your shop address.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (!latitude || !longitude) {
+      toast({
+        title: 'Location required',
+        description: 'Please enter coordinates or use your current location.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    const lat = parseFloat(latitude);
+    const lng = parseFloat(longitude);
+
+    if (isNaN(lat) || isNaN(lng) || lat < -90 || lat > 90 || lng < -180 || lng > 180) {
+      toast({
+        title: 'Invalid coordinates',
+        description: 'Please enter valid latitude (-90 to 90) and longitude (-180 to 180).',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    try {
+      // Generate geohash from coordinates (7 chars = ~153m precision)
+      const geohash = ngeohash.encode(lat, lng, 7);
+
+      // Build tags - use the same identifier to update the addressable event
+      const tags: string[][] = [
+        ['d', shop.identifier],
+        ['name', name.trim()],
+        ['g', geohash],
+        ['t', 'skateshop'],
+        ['lat', lat.toString()],
+        ['lon', lng.toString()],
+        ['location', location.trim()],
+        ['alt', `Skate shop: ${name.trim()}`],
+      ];
+
+      if (phone.trim()) {
+        tags.push(['phone', phone.trim()]);
+      }
+
+      if (email.trim()) {
+        tags.push(['email', email.trim()]);
+      }
+
+      if (website.trim()) {
+        tags.push(['website', website.trim()]);
+      }
+
+      if (instagram.trim()) {
+        tags.push(['instagram', instagram.trim()]);
+      }
+
+      if (hours.trim()) {
+        tags.push(['hours', hours.trim()]);
+      }
+
+      for (const imageUrl of images) {
+        // Use imeta tag for NIP-92 compatibility
+        tags.push(['imeta', `url ${imageUrl}`, 'm image/jpeg']);
+      }
+
+      await createEvent({
+        kind: SKATE_SHOP_KIND,
+        content: description.trim(),
+        tags,
+      });
+
+      toast({
+        title: 'Shop updated!',
+        description: 'Your changes have been published to the network.',
+      });
+
+      navigate(`/shop/${user?.pubkey}/${shop.identifier}`);
+    } catch (error) {
+      toast({
+        title: 'Failed to update',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  if (isLoading) {
+    return <EditShopSkeleton />;
+  }
+
+  if (error || !shop) {
+    return <NotFound />;
+  }
+
+  // Check if user is the owner
+  if (!user) {
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="max-w-xl mx-auto border-dashed">
+            <CardContent className="py-12 text-center">
+              <Store className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+              <h2 className="text-xl font-bold mb-2">Login Required</h2>
+              <p className="text-muted-foreground mb-6">
+                You need to log in to edit this shop.
+              </p>
+              <LoginArea className="justify-center" />
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  if (user.pubkey !== shop.pubkey) {
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="max-w-xl mx-auto border-destructive">
+            <CardContent className="py-12 text-center">
+              <AlertTriangle className="h-12 w-12 mx-auto mb-4 text-destructive" />
+              <h2 className="text-xl font-bold mb-2">Access Denied</h2>
+              <p className="text-muted-foreground mb-6">
+                You can only edit shops that you created.
+              </p>
+              <Link to={`/shop/${shop.pubkey}/${shop.identifier}`}>
+                <Button variant="outline">Back to Shop</Button>
+              </Link>
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="container px-4 py-8 max-w-2xl">
+        <div className="mb-6">
+          <Link
+            to={`/shop/${shop.pubkey}/${shop.identifier}`}
+            className="inline-flex items-center text-muted-foreground hover:text-foreground transition-colors mb-4"
+          >
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Back to Shop
+          </Link>
+          <h1 className="text-3xl font-black uppercase neon-lime" style={{
+            fontFamily: 'Impact, "Arial Black", sans-serif'
+          }}>Edit Shop</h1>
+          <p className="text-muted-foreground mt-1">
+            Update the details for {shop.name}
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <Card className="bg-black/90 border-2 border-[#ccff00]/30">
+            <CardHeader>
+              <CardTitle className="text-[#ccff00] uppercase font-black">Shop Details</CardTitle>
+              <CardDescription className="text-gray-400">
+                Update your shop information. All fields marked with * are required.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {/* Shop Name */}
+              <div className="space-y-2">
+                <Label htmlFor="name">Shop Name *</Label>
+                <Input
+                  id="name"
+                  placeholder="e.g., Supreme Los Angeles"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  required
+                />
+              </div>
+
+              {/* Description */}
+              <div className="space-y-2">
+                <Label htmlFor="description">Description</Label>
+                <Textarea
+                  id="description"
+                  placeholder="Tell people about your shop, what you sell, your specialty..."
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  rows={4}
+                />
+              </div>
+
+              {/* Location Address */}
+              <div className="space-y-2">
+                <Label htmlFor="location">Shop Address *</Label>
+                <Input
+                  id="location"
+                  placeholder="e.g., 411 N Fairfax Ave, Los Angeles, CA 90036"
+                  value={location}
+                  onChange={(e) => setLocation(e.target.value)}
+                  required
+                />
+              </div>
+
+              {/* Coordinates */}
+              <div className="space-y-2">
+                <Label>Coordinates *</Label>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <Input
+                      placeholder="Latitude (e.g., 34.0737)"
+                      value={latitude}
+                      onChange={(e) => setLatitude(e.target.value)}
+                      required
+                    />
+                  </div>
+                  <div>
+                    <Input
+                      placeholder="Longitude (e.g., -118.3614)"
+                      value={longitude}
+                      onChange={(e) => setLongitude(e.target.value)}
+                      required
+                    />
+                  </div>
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={getCurrentLocation}
+                  disabled={isGettingLocation}
+                  className="mt-2"
+                >
+                  {isGettingLocation ? (
+                    <>
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                      Getting location...
+                    </>
+                  ) : (
+                    <>
+                      <MapPin className="h-4 w-4 mr-2" />
+                      Use my current location
+                    </>
+                  )}
+                </Button>
+              </div>
+
+              {/* Contact Information */}
+              <div className="space-y-3 p-4 rounded-lg border-2 border-[#ccff00]/30 bg-[#ccff00]/5">
+                <div className="flex items-center gap-2 mb-2">
+                  <span className="text-2xl">📞</span>
+                  <Label className="text-base font-bold text-[#ccff00]">Contact Information</Label>
+                </div>
+                <p className="text-sm text-gray-400 mb-3">
+                  Help customers reach you (at least one contact method recommended)
+                </p>
+                
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="phone">Phone Number</Label>
+                    <Input
+                      id="phone"
+                      type="tel"
+                      placeholder="+1 234 567 8900"
+                      value={phone}
+                      onChange={(e) => setPhone(e.target.value)}
+                      className="bg-black border-[#ccff00]/30"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="email">Email</Label>
+                    <Input
+                      id="email"
+                      type="email"
+                      placeholder="shop@example.com"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      className="bg-black border-[#ccff00]/30"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="website">Website</Label>
+                    <Input
+                      id="website"
+                      type="url"
+                      placeholder="https://myshop.com"
+                      value={website}
+                      onChange={(e) => setWebsite(e.target.value)}
+                      className="bg-black border-[#ccff00]/30"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="instagram">Instagram</Label>
+                    <Input
+                      id="instagram"
+                      placeholder="@shopname"
+                      value={instagram}
+                      onChange={(e) => setInstagram(e.target.value)}
+                      className="bg-black border-[#ccff00]/30"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Hours of Operation */}
+              <div className="space-y-2">
+                <Label htmlFor="hours">Hours of Operation</Label>
+                <Input
+                  id="hours"
+                  placeholder="e.g., Mon-Sat 10AM-8PM, Sun 12PM-6PM"
+                  value={hours}
+                  onChange={(e) => setHours(e.target.value)}
+                />
+              </div>
+
+              {/* Images */}
+              <div className="space-y-2">
+                <Label>Shop Photos</Label>
+                <div className="grid grid-cols-3 gap-4">
+                  {images.map((url) => (
+                    <div key={url} className="relative aspect-video rounded-lg overflow-hidden bg-muted">
+                      <img src={url} alt="Shop" className="w-full h-full object-cover" />
+                      <button
+                        type="button"
+                        onClick={() => removeImage(url)}
+                        className="absolute top-1 right-1 p-1 rounded-full bg-background/80 hover:bg-destructive hover:text-destructive-foreground transition-colors"
+                      >
+                        <X className="h-4 w-4" />
+                      </button>
+                    </div>
+                  ))}
+                  <label className="aspect-video rounded-lg border-2 border-dashed flex flex-col items-center justify-center cursor-pointer hover:bg-muted/50 transition-colors">
+                    <input
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={handleImageUpload}
+                      disabled={isUploading}
+                    />
+                    {isUploading ? (
+                      <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                    ) : (
+                      <>
+                        <Upload className="h-6 w-6 text-muted-foreground mb-1" />
+                        <span className="text-xs text-muted-foreground">Upload</span>
+                      </>
+                    )}
+                  </label>
+                </div>
+              </div>
+
+              {/* Submit */}
+              <Button
+                type="submit"
+                className="w-full bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-black uppercase"
+                disabled={isPublishing || isUploading}
+              >
+                {isPublishing ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Saving...
+                  </>
+                ) : (
+                  <>
+                    <Store className="h-4 w-4 mr-2" />
+                    Save Changes
+                  </>
+                )}
+              </Button>
+            </CardContent>
+          </Card>
+        </form>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/EditSpotPage.tsx b/src/src/pages/EditSpotPage.tsx
new file mode 100644
index 0000000..e5770cf
--- /dev/null
+++ b/src/src/pages/EditSpotPage.tsx
@@ -0,0 +1,641 @@
+import { useState, useEffect } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { useNavigate, useParams } from 'react-router-dom';
+import ngeohash from 'ngeohash';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useUploadFile } from '@/hooks/useUploadFile';
+import { useToast } from '@/hooks/useToast';
+import { useSkateSpot } from '@/hooks/useSkateSpots';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { TagInput } from '@/components/TagInput';
+import { SKATE_SPOT_KIND } from '@/lib/types';
+import { spotCategories, MAX_TAGS } from '@/lib/skateTags';
+import { cn } from '@/lib/utils';
+import {
+  MapPin,
+  Upload,
+  X,
+  Loader2,
+  ArrowLeft,
+  AlertTriangle,
+  Check,
+} from 'lucide-react';
+import { Link } from 'react-router-dom';
+import NotFound from './NotFound';
+
+function EditSpotSkeleton() {
+  return (
+    <Layout>
+      <div className="container px-4 py-8 max-w-2xl">
+        <Skeleton className="h-6 w-32 mb-4" />
+        <Skeleton className="h-10 w-64 mb-2" />
+        <Skeleton className="h-5 w-48 mb-6" />
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-6 w-32" />
+            <Skeleton className="h-4 w-64" />
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-24 w-full" />
+            <Skeleton className="h-10 w-full" />
+            <div className="grid grid-cols-2 gap-4">
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+            <Skeleton className="h-10 w-full" />
+          </CardContent>
+        </Card>
+      </div>
+    </Layout>
+  );
+}
+
+export default function EditSpotPage() {
+  const { pubkey, identifier } = useParams<{ pubkey: string; identifier: string }>();
+  const navigate = useNavigate();
+  const { user } = useCurrentUser();
+  const { data: spot, isLoading, error } = useSkateSpot(identifier || '', pubkey);
+  const { mutateAsync: createEvent, isPending: isPublishing } = useNostrPublish();
+  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+  const { toast } = useToast();
+
+  // Form state
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [location, setLocation] = useState('');
+  const [latitude, setLatitude] = useState('');
+  const [longitude, setLongitude] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<string>('');
+  const [tags, setTags] = useState<string[]>([]);
+  const [accessType, setAccessType] = useState<'public' | 'private' | 'locals'>('public');
+  const [contactInfo, setContactInfo] = useState('');
+  const [images, setImages] = useState<string[]>([]);
+  const [isGettingLocation, setIsGettingLocation] = useState(false);
+  const [initialized, setInitialized] = useState(false);
+
+  useSeoMeta({
+    title: spot ? `Edit ${spot.title} - SkateSpots` : 'Edit Spot - SkateSpots',
+    description: 'Edit your skateboarding spot.',
+  });
+
+  // Initialize form with existing data
+  useEffect(() => {
+    if (spot && !initialized) {
+      setTitle(spot.title);
+      setDescription(spot.description || '');
+      setLocation(spot.location || '');
+      setAccessType(spot.accessType || 'public');
+      setContactInfo(spot.contactInfo || '');
+      setImages(spot.images);
+      
+      // Set category (new format) or extract from types (legacy)
+      setSelectedCategory(spot.category || '');
+      
+      // Set tags (new format)
+      setTags(spot.tags || []);
+
+      // Decode geohash to get coordinates
+      if (spot.geohash) {
+        const { latitude: lat, longitude: lng } = ngeohash.decode(spot.geohash);
+        setLatitude(lat.toFixed(6));
+        setLongitude(lng.toFixed(6));
+      }
+
+      setInitialized(true);
+    }
+  }, [spot, initialized]);
+  
+  const handleCategoryChange = (category: string) => {
+    setSelectedCategory(category);
+  };
+
+  const getCurrentLocation = () => {
+    if (!navigator.geolocation) {
+      toast({
+        title: 'Geolocation not supported',
+        description: 'Your browser does not support geolocation.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    setIsGettingLocation(true);
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        setLatitude(position.coords.latitude.toFixed(6));
+        setLongitude(position.coords.longitude.toFixed(6));
+        setIsGettingLocation(false);
+        toast({
+          title: 'Location found',
+          description: 'Your current location has been set.',
+        });
+      },
+      (error) => {
+        setIsGettingLocation(false);
+        toast({
+          title: 'Location error',
+          description: error.message,
+          variant: 'destructive',
+        });
+      }
+    );
+  };
+
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    try {
+      const file = files[0];
+      const tags = await uploadFile(file);
+      const url = tags[0]?.[1];
+      if (url) {
+        setImages((prev) => [...prev, url]);
+        toast({
+          title: 'Image uploaded',
+          description: 'Your image has been uploaded successfully.',
+        });
+      }
+    } catch (error) {
+      toast({
+        title: 'Upload failed',
+        description: error instanceof Error ? error.message : 'Failed to upload image',
+        variant: 'destructive',
+      });
+    }
+
+    e.target.value = '';
+  };
+
+  const removeImage = (url: string) => {
+    setImages((prev) => prev.filter((img) => img !== url));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!spot) return;
+
+    if (!title.trim()) {
+      toast({
+        title: 'Title required',
+        description: 'Please enter a name for this spot.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (!latitude || !longitude) {
+      toast({
+        title: 'Location required',
+        description: 'Please enter coordinates or use your current location.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    const lat = parseFloat(latitude);
+    const lng = parseFloat(longitude);
+
+    if (isNaN(lat) || isNaN(lng) || lat < -90 || lat > 90 || lng < -180 || lng > 180) {
+      toast({
+        title: 'Invalid coordinates',
+        description: 'Please enter valid latitude (-90 to 90) and longitude (-180 to 180).',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    try {
+      // Generate geohash from coordinates (7 chars = ~153m precision)
+      const geohash = ngeohash.encode(lat, lng, 7);
+
+      // Build event tags - use the same identifier to update the addressable event
+      const eventTags: string[][] = [
+        ['d', spot.identifier],
+        ['title', title.trim()],
+        ['g', geohash],
+        ['t', 'skatespot'],
+        ['access', accessType],
+        ['lat', lat.toString()],
+        ['lon', lng.toString()],
+        ['alt', `Skate spot: ${title.trim()}`],
+      ];
+
+      if (location.trim()) {
+        eventTags.push(['location', location.trim()]);
+      }
+
+      if (contactInfo.trim()) {
+        eventTags.push(['contact', contactInfo.trim()]);
+      }
+
+      // Add category as dedicated tag (new format)
+      if (selectedCategory) {
+        eventTags.push(['category', selectedCategory]);
+        // Also add as t tag for backwards compatibility and relay filtering
+        eventTags.push(['t', selectedCategory]);
+      }
+      
+      // Add all freeform tags
+      for (const tag of tags) {
+        eventTags.push(['t', tag]);
+      }
+
+      for (const imageUrl of images) {
+        // Use imeta tag for NIP-92 compatibility
+        eventTags.push(['imeta', `url ${imageUrl}`, 'm image/jpeg']);
+      }
+
+      await createEvent({
+        kind: SKATE_SPOT_KIND,
+        content: description.trim(),
+        tags: eventTags,
+      });
+
+      toast({
+        title: 'Spot updated!',
+        description: 'Your changes have been published to the network.',
+      });
+
+      navigate(`/spot/${user?.pubkey}/${spot.identifier}`);
+    } catch (error) {
+      toast({
+        title: 'Failed to update',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  if (isLoading) {
+    return <EditSpotSkeleton />;
+  }
+
+  if (error || !spot) {
+    return <NotFound />;
+  }
+
+  // Check if user is the owner
+  if (!user) {
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="max-w-xl mx-auto border-dashed">
+            <CardContent className="py-12 text-center">
+              <MapPin className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+              <h2 className="text-xl font-bold mb-2">Login Required</h2>
+              <p className="text-muted-foreground mb-6">
+                You need to log in to edit this spot.
+              </p>
+              <LoginArea className="justify-center" />
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  if (user.pubkey !== spot.pubkey) {
+    return (
+      <Layout>
+        <div className="container px-4 py-8">
+          <Card className="max-w-xl mx-auto border-destructive">
+            <CardContent className="py-12 text-center">
+              <AlertTriangle className="h-12 w-12 mx-auto mb-4 text-destructive" />
+              <h2 className="text-xl font-bold mb-2">Access Denied</h2>
+              <p className="text-muted-foreground mb-6">
+                You can only edit spots that you created.
+              </p>
+              <Link to={`/spot/${spot.pubkey}/${spot.identifier}`}>
+                <Button variant="outline">Back to Spot</Button>
+              </Link>
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="container px-4 py-8 max-w-2xl">
+        <div className="mb-6">
+          <Link
+            to={`/spot/${spot.pubkey}/${spot.identifier}`}
+            className="inline-flex items-center text-muted-foreground hover:text-foreground transition-colors mb-4"
+          >
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Back to Spot
+          </Link>
+          <h1 className="text-3xl font-bold">Edit Spot</h1>
+          <p className="text-muted-foreground mt-1">
+            Update the details for {spot.title}
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <Card>
+            <CardHeader>
+              <CardTitle>Spot Details</CardTitle>
+              <CardDescription>
+                Update the information about this spot. All fields marked with * are required.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {/* Title */}
+              <div className="space-y-2">
+                <Label htmlFor="title">Spot Name *</Label>
+                <Input
+                  id="title"
+                  placeholder="e.g., Hollywood High School"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  required
+                />
+              </div>
+
+              {/* Description */}
+              <div className="space-y-2">
+                <Label htmlFor="description">Description</Label>
+                <Textarea
+                  id="description"
+                  placeholder="Describe the spot, obstacles, best times to skate, security info, etc."
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  rows={4}
+                />
+              </div>
+
+              {/* Location Address */}
+              <div className="space-y-2">
+                <Label htmlFor="location">Address / Location</Label>
+                <Input
+                  id="location"
+                  placeholder="e.g., 1521 N Highland Ave, Los Angeles, CA"
+                  value={location}
+                  onChange={(e) => setLocation(e.target.value)}
+                />
+              </div>
+
+              {/* Coordinates */}
+              <div className="space-y-2">
+                <Label>Coordinates *</Label>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <Input
+                      placeholder="Latitude (e.g., 34.1012)"
+                      value={latitude}
+                      onChange={(e) => setLatitude(e.target.value)}
+                      required
+                    />
+                  </div>
+                  <div>
+                    <Input
+                      placeholder="Longitude (e.g., -118.3389)"
+                      value={longitude}
+                      onChange={(e) => setLongitude(e.target.value)}
+                      required
+                    />
+                  </div>
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={getCurrentLocation}
+                  disabled={isGettingLocation}
+                  className="mt-2"
+                >
+                  {isGettingLocation ? (
+                    <>
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                      Getting location...
+                    </>
+                  ) : (
+                    <>
+                      <MapPin className="h-4 w-4 mr-2" />
+                      Use my current location
+                    </>
+                  )}
+                </Button>
+              </div>
+
+              {/* Access Type */}
+              <div className="space-y-3">
+                <Label className="text-base font-bold">Access Type *</Label>
+                <div className="space-y-2">
+                  {/* Public */}
+                  <Card
+                    className={cn(
+                      "cursor-pointer transition-all border-2",
+                      accessType === 'public'
+                        ? "bg-[#ff0040]/10 border-[#ff0040] ring-2 ring-[#ff0040]/50"
+                        : "border-gray-700 hover:border-[#ff0040]/50"
+                    )}
+                    onClick={() => setAccessType('public')}
+                  >
+                    <CardContent className="p-4">
+                      <div className="flex items-start gap-3">
+                        <div className="text-2xl">🌍</div>
+                        <div className="flex-1">
+                          <h4 className="font-bold text-white mb-1">Public - Open to Everyone</h4>
+                          <p className="text-sm text-gray-400">Skate parks, public plazas, street spots</p>
+                        </div>
+                        {accessType === 'public' && (
+                          <div className="w-6 h-6 rounded-full bg-[#ff0040] flex items-center justify-center">
+                            <span className="text-white text-xs">✓</span>
+                          </div>
+                        )}
+                      </div>
+                    </CardContent>
+                  </Card>
+
+                  {/* Private */}
+                  <Card
+                    className={cn(
+                      "cursor-pointer transition-all border-2",
+                      accessType === 'private'
+                        ? "bg-[#ff6600]/10 border-[#ff6600] ring-2 ring-[#ff6600]/50"
+                        : "border-gray-700 hover:border-[#ff6600]/50"
+                    )}
+                    onClick={() => setAccessType('private')}
+                  >
+                    <CardContent className="p-4">
+                      <div className="flex items-start gap-3">
+                        <div className="text-2xl">🔒</div>
+                        <div className="flex-1">
+                          <h4 className="font-bold text-white mb-1">Private Property - Permission Needed</h4>
+                          <p className="text-sm text-gray-400">Backyard ramps, private land, gated spots</p>
+                        </div>
+                        {accessType === 'private' && (
+                          <div className="w-6 h-6 rounded-full bg-[#ff6600] flex items-center justify-center">
+                            <span className="text-white text-xs">✓</span>
+                          </div>
+                        )}
+                      </div>
+                    </CardContent>
+                  </Card>
+
+                  {/* Ask Locals */}
+                  <Card
+                    className={cn(
+                      "cursor-pointer transition-all border-2",
+                      accessType === 'locals'
+                        ? "bg-[#ccff00]/10 border-[#ccff00] ring-2 ring-[#ccff00]/50"
+                        : "border-gray-700 hover:border-[#ccff00]/50"
+                    )}
+                    onClick={() => setAccessType('locals')}
+                  >
+                    <CardContent className="p-4">
+                      <div className="flex items-start gap-3">
+                        <div className="text-2xl">👥</div>
+                        <div className="flex-1">
+                          <h4 className="font-bold text-white mb-1">Ask Locals First</h4>
+                          <p className="text-sm text-gray-400">Respect the spot, don't blow it out</p>
+                        </div>
+                        {accessType === 'locals' && (
+                          <div className="w-6 h-6 rounded-full bg-[#ccff00] flex items-center justify-center">
+                            <span className="text-black text-xs">✓</span>
+                          </div>
+                        )}
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+              </div>
+
+              {/* Contact Info for Private/Locals */}
+              {(accessType === 'private' || accessType === 'locals') && (
+                <div className="space-y-2">
+                  <Label htmlFor="contact">Contact Information</Label>
+                  <Input
+                    id="contact"
+                    placeholder="e.g., Phone number, Instagram, email..."
+                    value={contactInfo}
+                    onChange={(e) => setContactInfo(e.target.value)}
+                    className="bg-black border-[#ff6600]/30"
+                  />
+                  <p className="text-xs text-gray-400">
+                    {accessType === 'private'
+                      ? 'How should people contact you for permission?'
+                      : 'How should people reach out to ask about the spot?'}
+                  </p>
+                </div>
+              )}
+
+              {/* Spot Category (required, mutually exclusive) */}
+              <div className="space-y-3">
+                <Label className="text-base font-bold">Spot Type *</Label>
+                <div className="grid grid-cols-2 gap-2">
+                  {spotCategories.map((category) => (
+                    <Card
+                      key={category.value}
+                      className={cn(
+                        "cursor-pointer transition-all border-2 touch-manipulation active:scale-[0.98]",
+                        selectedCategory === category.value
+                          ? "bg-[#ff0040]/10 border-[#ff0040] ring-2 ring-[#ff0040]/50"
+                          : "border-gray-700 hover:border-[#ff0040]/50"
+                      )}
+                      onClick={() => handleCategoryChange(category.value)}
+                    >
+                      <CardContent className="p-3 sm:p-4 text-center relative">
+                        <div className="font-bold text-sm sm:text-base">{category.label}</div>
+                        <div className="text-xs text-gray-400 mt-1">{category.description}</div>
+                        {selectedCategory === category.value && (
+                          <div className="absolute top-1 right-1 w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-[#ff0040] flex items-center justify-center">
+                            <Check className="h-2.5 w-2.5 sm:h-3 sm:w-3 text-white" />
+                          </div>
+                        )}
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+
+              {/* Freeform Tags */}
+              <div className="space-y-3">
+                <Label className="text-base font-bold">Tags</Label>
+                <p className="text-xs text-gray-400 -mt-1">
+                  Add tags for features, surfaces, vibes (max {MAX_TAGS})
+                </p>
+                <TagInput
+                  tags={tags}
+                  onChange={setTags}
+                  placeholder="Type to search or add tags..."
+                  maxTags={MAX_TAGS}
+                />
+              </div>
+
+
+
+              {/* Images */}
+              <div className="space-y-2">
+                <Label>Photos</Label>
+                <div className="grid grid-cols-3 gap-4">
+                  {images.map((url) => (
+                    <div key={url} className="relative aspect-video rounded-lg overflow-hidden bg-muted">
+                      <img src={url} alt="Spot" className="w-full h-full object-cover" />
+                      <button
+                        type="button"
+                        onClick={() => removeImage(url)}
+                        className="absolute top-1 right-1 p-1 rounded-full bg-background/80 hover:bg-destructive hover:text-destructive-foreground transition-colors"
+                      >
+                        <X className="h-4 w-4" />
+                      </button>
+                    </div>
+                  ))}
+                  <label className="aspect-video rounded-lg border-2 border-dashed flex flex-col items-center justify-center cursor-pointer hover:bg-muted/50 transition-colors">
+                    <input
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={handleImageUpload}
+                      disabled={isUploading}
+                    />
+                    {isUploading ? (
+                      <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                    ) : (
+                      <>
+                        <Upload className="h-6 w-6 text-muted-foreground mb-1" />
+                        <span className="text-xs text-muted-foreground">Upload</span>
+                      </>
+                    )}
+                  </label>
+                </div>
+              </div>
+
+              {/* Submit */}
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={isPublishing || isUploading}
+              >
+                {isPublishing ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Saving...
+                  </>
+                ) : (
+                  <>
+                    <MapPin className="h-4 w-4 mr-2" />
+                    Save Changes
+                  </>
+                )}
+              </Button>
+            </CardContent>
+          </Card>
+        </form>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/EventDetailPage.tsx b/src/src/pages/EventDetailPage.tsx
new file mode 100644
index 0000000..75b7d0b
--- /dev/null
+++ b/src/src/pages/EventDetailPage.tsx
@@ -0,0 +1,368 @@
+import { useMemo } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { useParams, Link } from 'react-router-dom';
+import ngeohash from 'ngeohash';
+import { Layout } from '@/components/Layout';
+import { SpotMap } from '@/components/SpotMap';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Button } from '@/components/ui/button';
+import { ZapButton } from '@/components/ZapButton';
+import { CommentsSection } from '@/components/comments/CommentsSection';
+import { useSkateEvent } from '@/hooks/useSkateEvents';
+import { useAuthor } from '@/hooks/useAuthor';
+import { genUserName } from '@/lib/genUserName';
+import { EVENT_TYPE_LABELS } from '@/lib/types';
+import NotFound from './NotFound';
+import {
+  Calendar,
+  Clock,
+  MapPin,
+  ArrowLeft,
+  Share2,
+  Navigation,
+  CalendarPlus,
+  Pencil,
+} from 'lucide-react';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+
+function formatDate(timestamp: number): string {
+  const date = new Date(timestamp * 1000);
+  return date.toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+function formatTime(timestamp: number): string {
+  const date = new Date(timestamp * 1000);
+  return date.toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+}
+
+function EventDetailSkeleton() {
+  return (
+    <Layout>
+      <div className="container px-4 py-8">
+        <div className="grid lg:grid-cols-3 gap-8">
+          <div className="lg:col-span-2 space-y-6">
+            <Skeleton className="aspect-video w-full rounded-xl" />
+            <div className="space-y-4">
+              <Skeleton className="h-10 w-3/4" />
+              <Skeleton className="h-6 w-1/2" />
+              <div className="flex gap-2">
+                <Skeleton className="h-6 w-20" />
+                <Skeleton className="h-6 w-20" />
+              </div>
+              <Skeleton className="h-24 w-full" />
+            </div>
+          </div>
+          <div className="space-y-6">
+            <Skeleton className="h-48 w-full rounded-xl" />
+            <Skeleton className="h-32 w-full rounded-xl" />
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+export default function EventDetailPage() {
+  const { pubkey, identifier } = useParams<{ pubkey: string; identifier: string }>();
+  const { data: event, isLoading, error } = useSkateEvent(identifier || '', pubkey);
+  const author = useAuthor(event?.pubkey);
+  const { user } = useCurrentUser();
+
+  const isOwner = user && event && user.pubkey === event.pubkey;
+
+  useSeoMeta({
+    title: event ? `${event.title} - SkateSpots` : 'Skate Event - SkateSpots',
+    description: event?.description || 'View this skateboarding event on SkateSpots.',
+  });
+
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(event?.pubkey || '');
+
+  const coordinates = useMemo(() => {
+    if (!event?.geohash) return null;
+    const { latitude, longitude } = ngeohash.decode(event.geohash);
+    return { lat: latitude, lng: longitude };
+  }, [event?.geohash]);
+
+  const isUpcoming = event ? event.start > Date.now() / 1000 : false;
+  const isPast = event ? event.start < Date.now() / 1000 : false;
+
+  const handleShare = async () => {
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title: event?.title,
+          text: event?.description || `Check out this skate event: ${event?.title}`,
+          url: window.location.href,
+        });
+      } catch {
+        // User cancelled or share failed
+      }
+    } else {
+      navigator.clipboard.writeText(window.location.href);
+    }
+  };
+
+  const handleDirections = () => {
+    if (coordinates) {
+      window.open(
+        `https://www.google.com/maps/dir/?api=1&destination=${coordinates.lat},${coordinates.lng}`,
+        '_blank'
+      );
+    }
+  };
+
+  const handleAddToCalendar = () => {
+    if (!event) return;
+
+    const startDate = new Date(event.start * 1000);
+    const endDate = event.end ? new Date(event.end * 1000) : new Date(event.start * 1000 + 3600000); // Default 1 hour
+
+    const formatICSDate = (date: Date) => {
+      return date.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';
+    };
+
+    const icsContent = [
+      'BEGIN:VCALENDAR',
+      'VERSION:2.0',
+      'BEGIN:VEVENT',
+      `DTSTART:${formatICSDate(startDate)}`,
+      `DTEND:${formatICSDate(endDate)}`,
+      `SUMMARY:${event.title}`,
+      `DESCRIPTION:${event.description || ''}`,
+      `LOCATION:${event.location || ''}`,
+      'END:VEVENT',
+      'END:VCALENDAR',
+    ].join('\n');
+
+    const blob = new Blob([icsContent], { type: 'text/calendar' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${event.title.replace(/[^a-z0-9]/gi, '-')}.ics`;
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+
+  if (isLoading) {
+    return <EventDetailSkeleton />;
+  }
+
+  if (error || !event) {
+    return <NotFound />;
+  }
+
+  return (
+    <Layout>
+      <div className="container px-4 py-8">
+        {/* Back link */}
+        <Link
+          to="/events"
+          className="inline-flex items-center text-muted-foreground hover:text-foreground transition-colors mb-6"
+        >
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Back to Events
+        </Link>
+
+        <div className="grid lg:grid-cols-3 gap-8">
+          {/* Main Content */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Cover Image */}
+            {event.image ? (
+              <div className="aspect-video rounded-xl overflow-hidden bg-muted">
+                <img
+                  src={event.image}
+                  alt={event.title}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            ) : (
+              <div className="aspect-video rounded-xl bg-gradient-to-br from-primary/20 to-accent/20 flex items-center justify-center">
+                <Calendar className="h-16 w-16 text-primary/40" />
+              </div>
+            )}
+
+            {/* Event Info */}
+            <div className="space-y-4">
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <div className="flex items-center gap-2 mb-2">
+                    {isUpcoming && (
+                      <Badge className="bg-green-500">Upcoming</Badge>
+                    )}
+                    {isPast && (
+                      <Badge variant="secondary">Past Event</Badge>
+                    )}
+                  </div>
+                  <h1 className="text-3xl font-bold">{event.title}</h1>
+                </div>
+                <div className="flex items-center gap-2">
+                  {isOwner && (
+                    <Link to={`/edit-event/${event.pubkey}/${event.identifier}`}>
+                      <Button variant="outline" size="icon">
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                    </Link>
+                  )}
+                  <Button variant="outline" size="icon" onClick={handleShare}>
+                    <Share2 className="h-4 w-4" />
+                  </Button>
+                  {isUpcoming && (
+                    <Button variant="outline" size="icon" onClick={handleAddToCalendar}>
+                      <CalendarPlus className="h-4 w-4" />
+                    </Button>
+                  )}
+                </div>
+              </div>
+
+              {/* Date & Time */}
+              <div className="flex flex-wrap gap-4 text-muted-foreground">
+                <div className="flex items-center gap-2">
+                  <Calendar className="h-5 w-5" />
+                  <span>{formatDate(event.start)}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Clock className="h-5 w-5" />
+                  <span>
+                    {formatTime(event.start)}
+                    {event.end && ` - ${formatTime(event.end)}`}
+                  </span>
+                </div>
+              </div>
+
+              {/* Location */}
+              {event.location && (
+                <p className="text-muted-foreground flex items-center gap-2">
+                  <MapPin className="h-5 w-5" />
+                  {event.location}
+                </p>
+              )}
+
+              {/* Types */}
+              {event.types.length > 0 && (
+                <div className="flex flex-wrap gap-2">
+                  {event.types.map((type) => (
+                    <Badge key={type} variant="secondary">
+                      {EVENT_TYPE_LABELS[type] || type}
+                    </Badge>
+                  ))}
+                </div>
+              )}
+
+              {/* Description */}
+              {event.description && (
+                <Card>
+                  <CardContent className="pt-6">
+                    <p className="whitespace-pre-wrap">{event.description}</p>
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Comments Section */}
+              {event.event && <CommentsSection root={event.event} />}
+            </div>
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-6">
+            {/* Date Card */}
+            <Card className="bg-gradient-to-br from-primary/5 to-accent/5">
+              <CardContent className="pt-6">
+                <div className="text-center">
+                  <div className="text-sm font-medium text-primary uppercase mb-1">
+                    {new Date(event.start * 1000).toLocaleDateString('en-US', { month: 'long' })}
+                  </div>
+                  <div className="text-5xl font-bold mb-2">
+                    {new Date(event.start * 1000).getDate()}
+                  </div>
+                  <div className="text-muted-foreground">
+                    {new Date(event.start * 1000).toLocaleDateString('en-US', { weekday: 'long' })}
+                  </div>
+                  <div className="text-lg font-medium mt-2">
+                    {formatTime(event.start)}
+                  </div>
+                </div>
+
+                {isUpcoming && (
+                  <Button className="w-full mt-4 gap-2" onClick={handleAddToCalendar}>
+                    <CalendarPlus className="h-4 w-4" />
+                    Add to Calendar
+                  </Button>
+                )}
+              </CardContent>
+            </Card>
+
+            {/* Map (if has location) */}
+            {coordinates && (
+              <Card>
+                <CardHeader className="pb-3">
+                  <CardTitle className="text-lg flex items-center gap-2">
+                    <MapPin className="h-5 w-5 text-primary" />
+                    Location
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="aspect-square rounded-lg overflow-hidden">
+                    <SpotMap
+                      spots={[]}
+                      center={[coordinates.lat, coordinates.lng]}
+                      zoom={15}
+                      className="h-full"
+                    />
+                  </div>
+                  <Button
+                    variant="outline"
+                    className="w-full mt-4 gap-2"
+                    onClick={handleDirections}
+                  >
+                    <Navigation className="h-4 w-4" />
+                    Get Directions
+                  </Button>
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Organizer Card */}
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="text-lg">Organizer</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-center gap-3">
+                  <Avatar className="h-12 w-12">
+                    <AvatarImage src={metadata?.picture} alt={displayName} />
+                    <AvatarFallback>
+                      {displayName.slice(0, 2).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium truncate">{displayName}</p>
+                    <p className="text-sm text-muted-foreground">Event Organizer</p>
+                  </div>
+                </div>
+
+                <div className="mt-4 flex items-center gap-2">
+                  <ZapButton
+                    target={event.event}
+                    className="flex-1 justify-center"
+                  />
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/EventsPage.tsx b/src/src/pages/EventsPage.tsx
new file mode 100644
index 0000000..3310261
--- /dev/null
+++ b/src/src/pages/EventsPage.tsx
@@ -0,0 +1,613 @@
+import { useState, useMemo } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { Link } from 'react-router-dom';
+import { Layout } from '@/components/Layout';
+import { EventCard, EventCardSkeleton } from '@/components/EventCard';
+import { TourCard, TourCardSkeleton } from '@/components/TourCard';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { TrustFilter, type TrustFilterLevel, filterByTrustLevel } from '@/components/TrustFilter';
+import { SortDropdown, type SortOption } from '@/components/SortDropdown';
+import { useSkateEvents } from '@/hooks/useSkateEvents';
+import { useTours } from '@/hooks/useTours';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useBatchTrustScores } from '@/hooks/useBatchTrustScores';
+import { useComments } from '@/hooks/useComments';
+import { useTranslation } from '@/contexts/LanguageContext';
+import { EVENT_TYPE_LABELS, TOUR_CATEGORIES, TOUR_SKILL_LEVELS, type TourCategory, type SkateTour } from '@/lib/types';
+import {
+  Search,
+  Plus,
+  Calendar,
+  X,
+  Route,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export default function EventsPage() {
+  const { t } = useTranslation();
+  
+  useSeoMeta({
+    title: 'Skate Events & Tours - SkateSpots',
+    description: 'Discover skateboarding events, competitions, tours, and sessions near you.',
+  });
+
+  const { user } = useCurrentUser();
+  const { data: events, isLoading: eventsLoading } = useSkateEvents(100);
+  const { data: tours, isLoading: toursLoading } = useTours(100);
+
+  // Main view: events or tours
+  const [mainView, setMainView] = useState<'events' | 'tours'>('events');
+  
+  // Event filters
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedTypes, setSelectedTypes] = useState<string[]>([]);
+  const [activeTab, setActiveTab] = useState<'upcoming' | 'past'>('upcoming');
+  const [trustFilter, setTrustFilter] = useState<TrustFilterLevel>('all');
+  const [sortBy, setSortBy] = useState<SortOption>('recent');
+  
+  // Tour filters
+  const [tourSearchQuery, setTourSearchQuery] = useState('');
+  const [tourCategory, setTourCategory] = useState<TourCategory | 'all'>('all');
+  const [tourSkillLevel, setTourSkillLevel] = useState<string>('all');
+  const [tourVerifiedOnly, setTourVerifiedOnly] = useState(false);
+  const [tourTrustFilter, setTourTrustFilter] = useState<TrustFilterLevel>('all');
+  const [tourSortBy, setTourSortBy] = useState<SortOption>('recent');
+
+  const now = Math.floor(Date.now() / 1000);
+
+  // Fetch trust scores for all event organizers and tour guides
+  const allPubkeys = useMemo(() => {
+    const eventPubkeys = events?.map((e) => e.pubkey) || [];
+    const tourPubkeys = tours?.map((t) => t.pubkey) || [];
+    return [...new Set([...eventPubkeys, ...tourPubkeys])];
+  }, [events, tours]);
+  const { data: trustScores } = useBatchTrustScores(allPubkeys);
+
+  const getTrustScore = (pubkey: string) => trustScores?.get(pubkey);
+
+  // Fetch comment counts for popularity sorting
+  const allEventIds = useMemo(() => {
+    const eventIds = events?.map((e) => e.event.id) || [];
+    const tourIds = tours?.map((t) => t.event.id) || [];
+    return [...eventIds, ...tourIds];
+  }, [events, tours]);
+  const { data: allComments } = useComments(allEventIds);
+
+  const getCommentCount = (eventId: string) => {
+    return allComments?.filter((c) => {
+      const eTag = c.tags.find(([tag]) => tag === 'e')?.[1];
+      return eTag === eventId;
+    }).length || 0;
+  };
+
+  // Filter and sort tours
+  const filteredTours = useMemo(() => {
+    if (!tours) return [];
+
+    let filtered = tours.filter((tour) => {
+      // Search filter
+      if (tourSearchQuery) {
+        const query = tourSearchQuery.toLowerCase();
+        const matchesTitle = tour.title.toLowerCase().includes(query);
+        const matchesLocation = tour.location?.toLowerCase().includes(query);
+        const matchesDescription = tour.description?.toLowerCase().includes(query);
+        const matchesCities = tour.cities?.some(c => c.toLowerCase().includes(query));
+        const matchesCountries = tour.countries?.some(c => c.toLowerCase().includes(query));
+        if (!matchesTitle && !matchesLocation && !matchesDescription && !matchesCities && !matchesCountries) {
+          return false;
+        }
+      }
+
+      // Category filter
+      if (tourCategory !== 'all' && tour.category !== tourCategory) {
+        return false;
+      }
+
+      // Skill level filter
+      if (tourSkillLevel !== 'all' && tour.skillLevel !== tourSkillLevel) {
+        return false;
+      }
+
+      return true;
+    });
+
+    // Apply trust filter
+    if (trustScores && tourTrustFilter !== 'all') {
+      filtered = filterByTrustLevel(filtered, tourTrustFilter, getTrustScore);
+    }
+
+    // Apply sorting
+    filtered.sort((a, b) => {
+      switch (tourSortBy) {
+        case 'trust': {
+          const scoreA = getTrustScore(a.pubkey) || 0;
+          const scoreB = getTrustScore(b.pubkey) || 0;
+          if (scoreB !== scoreA) return scoreB - scoreA;
+          return b.createdAt - a.createdAt;
+        }
+        case 'popular': {
+          const popA = getCommentCount(a.event.id);
+          const popB = getCommentCount(b.event.id);
+          if (popB !== popA) return popB - popA;
+          return b.createdAt - a.createdAt;
+        }
+        case 'recent':
+        default:
+          return b.createdAt - a.createdAt;
+      }
+    });
+
+    return filtered;
+  }, [tours, tourSearchQuery, tourCategory, tourSkillLevel, tourTrustFilter, trustScores, tourSortBy]);
+
+  // Filter and sort events
+  const filteredEvents = useMemo(() => {
+    if (!events) return { upcoming: [], past: [] };
+
+    let filtered = events.filter((event) => {
+      // Search filter
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase();
+        const matchesTitle = event.title.toLowerCase().includes(query);
+        const matchesLocation = event.location?.toLowerCase().includes(query);
+        const matchesDescription = event.description?.toLowerCase().includes(query);
+        if (!matchesTitle && !matchesLocation && !matchesDescription) {
+          return false;
+        }
+      }
+
+      // Type filter
+      if (selectedTypes.length > 0) {
+        const hasMatchingType = event.types.some((type) =>
+          selectedTypes.includes(type)
+        );
+        if (!hasMatchingType) return false;
+      }
+
+      return true;
+    });
+
+    // Apply trust filter
+    if (trustScores && trustFilter !== 'all') {
+      filtered = filterByTrustLevel(filtered, trustFilter, getTrustScore);
+    }
+
+    // Split into upcoming and past
+    let upcoming = filtered.filter((e) => e.start >= now);
+    let past = filtered.filter((e) => e.start < now);
+
+    // Apply sorting
+    const sortFn = (a: typeof events[0], b: typeof events[0]) => {
+      switch (sortBy) {
+        case 'trust': {
+          const scoreA = getTrustScore(a.pubkey) || 0;
+          const scoreB = getTrustScore(b.pubkey) || 0;
+          if (scoreB !== scoreA) return scoreB - scoreA; // Highest first
+          return a.start - b.start; // Then by time
+        }
+        case 'popular': {
+          const popA = getCommentCount(a.event.id);
+          const popB = getCommentCount(b.event.id);
+          if (popB !== popA) return popB - popA; // Most popular first
+          return a.start - b.start;
+        }
+        case 'recent':
+        default:
+          return 0; // Keep time-based sorting
+      }
+    };
+
+    // Sort upcoming by start time (ascending) + secondary sort
+    upcoming.sort((a, b) => {
+      if (sortBy === 'recent') return a.start - b.start;
+      return sortFn(a, b);
+    });
+
+    // Sort past by start time (descending) + secondary sort  
+    past.sort((a, b) => {
+      if (sortBy === 'recent') return b.start - a.start;
+      return sortFn(a, b);
+    });
+
+    return { upcoming, past };
+  }, [events, searchQuery, selectedTypes, trustFilter, trustScores, sortBy, now, allComments]);
+
+  const toggleType = (type: string) => {
+    setSelectedTypes((prev) =>
+      prev.includes(type)
+        ? prev.filter((t) => t !== type)
+        : [...prev, type]
+    );
+  };
+
+  const clearFilters = () => {
+    setSearchQuery('');
+    setSelectedTypes([]);
+    setTrustFilter('all');
+    setSortBy('recent');
+  };
+
+  const clearTourFilters = () => {
+    setTourSearchQuery('');
+    setTourCategory('all');
+    setTourSkillLevel('all');
+    setTourVerifiedOnly(false);
+    setTourTrustFilter('all');
+    setTourSortBy('recent');
+  };
+
+  const hasActiveFilters = searchQuery || selectedTypes.length > 0 || trustFilter !== 'all' || sortBy !== 'recent';
+  const hasActiveTourFilters = tourSearchQuery || tourCategory !== 'all' || tourSkillLevel !== 'all' || tourVerifiedOnly || tourTrustFilter !== 'all' || tourSortBy !== 'recent';
+  
+  const isLoading = mainView === 'events' ? eventsLoading : toursLoading;
+
+  return (
+    <Layout>
+      <div className="container px-4 py-8">
+        {/* Header */}
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
+          <div>
+            <h1 className="text-3xl font-black uppercase neon-lime" style={{
+              fontFamily: 'Impact, "Arial Black", sans-serif'
+            }}>
+              {mainView === 'events' ? t('events.title') : 'Skate Tours'}
+            </h1>
+            <p className="text-gray-400 mt-1">
+              {mainView === 'events' 
+                ? t('events.findEvents')
+                : 'Discover local guides, national road trips, and world destruction competitions'}
+            </p>
+          </div>
+          {user ? (
+            <Link to={mainView === 'events' ? '/create-event' : '/create-tour'}>
+              <Button className="gap-2 bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold uppercase">
+                <Plus className="h-4 w-4" />
+                {mainView === 'events' ? t('events.createEvent') : 'Create Tour'}
+              </Button>
+            </Link>
+          ) : (
+            <Badge variant="outline" className="border-yellow-500/50 text-yellow-400 px-3 py-1">
+              🔒 {t('events.loginToCreate')}
+            </Badge>
+          )}
+        </div>
+
+        {/* Main View Toggle: Events / Tours */}
+        <div className="flex gap-2 mb-6">
+          <Button
+            variant={mainView === 'events' ? 'default' : 'outline'}
+            onClick={() => setMainView('events')}
+            className={cn(
+              'gap-2 font-bold uppercase',
+              mainView === 'events' 
+                ? 'bg-[#ccff00] text-black hover:bg-[#ccff00]/90' 
+                : 'border-[#ccff00]/30 text-[#ccff00] hover:bg-[#ccff00]/10'
+            )}
+          >
+            <Calendar className="h-4 w-4" />
+            Events
+            {events && events.length > 0 && (
+              <Badge variant="secondary" className={cn(
+                'ml-1',
+                mainView === 'events' ? 'bg-black/20 text-black' : 'bg-[#ccff00]/20 text-[#ccff00]'
+              )}>
+                {events.length}
+              </Badge>
+            )}
+          </Button>
+          <Button
+            variant={mainView === 'tours' ? 'default' : 'outline'}
+            onClick={() => setMainView('tours')}
+            className={cn(
+              'gap-2 font-bold uppercase',
+              mainView === 'tours' 
+                ? 'bg-cyan-500 text-white hover:bg-cyan-500/90' 
+                : 'border-cyan-500/30 text-cyan-400 hover:bg-cyan-500/10'
+            )}
+          >
+            <Route className="h-4 w-4" />
+            Tours
+            {tours && tours.length > 0 && (
+              <Badge variant="secondary" className={cn(
+                'ml-1',
+                mainView === 'tours' ? 'bg-white/20 text-white' : 'bg-cyan-500/20 text-cyan-400'
+              )}>
+                {tours.length}
+              </Badge>
+            )}
+          </Button>
+        </div>
+
+        {/* Events View */}
+        {mainView === 'events' && (
+          <>
+            {/* Filters */}
+            <div className="space-y-4 mb-8">
+              {/* Search, Trust Filter, and Sort */}
+              <div className="flex flex-col sm:flex-row gap-3">
+                <div className="relative flex-1 max-w-md">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder={t('events.searchPlaceholder')}
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="pl-9"
+                  />
+                </div>
+                <div className="flex gap-2">
+                  <SortDropdown
+                    value={sortBy}
+                    onChange={setSortBy}
+                    contentType="events"
+                  />
+                  <TrustFilter
+                    value={trustFilter}
+                    onChange={setTrustFilter}
+                    compact
+                  />
+                </div>
+              </div>
+
+              {/* Type filters */}
+              <ScrollArea className="w-full whitespace-nowrap">
+                <div className="flex gap-2 pb-2">
+                  {Object.entries(EVENT_TYPE_LABELS).map(([type, label]) => (
+                    <Badge
+                      key={type}
+                      variant={selectedTypes.includes(type) ? 'default' : 'outline'}
+                      className={cn(
+                        'cursor-pointer transition-colors',
+                        selectedTypes.includes(type)
+                          ? 'bg-primary hover:bg-primary/90'
+                          : 'hover:bg-muted'
+                      )}
+                      onClick={() => toggleType(type)}
+                    >
+                      {label}
+                    </Badge>
+                  ))}
+                  {hasActiveFilters && (
+                    <Badge
+                      variant="destructive"
+                      className="cursor-pointer gap-1"
+                      onClick={clearFilters}
+                    >
+                      <X className="h-3 w-3" />
+                      {t('common.clearAll')}
+                    </Badge>
+                  )}
+                </div>
+                <ScrollBar orientation="horizontal" />
+              </ScrollArea>
+            </div>
+
+            {/* Tabs */}
+            <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as 'upcoming' | 'past')}>
+              <TabsList className="mb-6">
+                <TabsTrigger value="upcoming" className="gap-2">
+                  {t('events.upcomingEvents')}
+                  {filteredEvents.upcoming.length > 0 && (
+                    <Badge variant="secondary" className="ml-1">
+                      {filteredEvents.upcoming.length}
+                    </Badge>
+                  )}
+                </TabsTrigger>
+                <TabsTrigger value="past" className="gap-2">
+                  {t('events.pastEvents')}
+                  {filteredEvents.past.length > 0 && (
+                    <Badge variant="secondary" className="ml-1">
+                      {filteredEvents.past.length}
+                    </Badge>
+                  )}
+                </TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="upcoming">
+                {eventsLoading ? (
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 stagger-children">
+                    {Array.from({ length: 6 }).map((_, i) => (
+                      <EventCardSkeleton key={i} />
+                    ))}
+                  </div>
+                ) : filteredEvents.upcoming.length > 0 ? (
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 stagger-children">
+                    {filteredEvents.upcoming.map((event) => (
+                      <EventCard key={event.id} event={event} />
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-center py-12">
+                    <Calendar className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+                    <p className="text-muted-foreground mb-4">
+                      {hasActiveFilters
+                        ? t('events.noEventsMatch')
+                        : t('events.noUpcoming')}
+                    </p>
+                    {hasActiveFilters ? (
+                      <Button variant="outline" onClick={clearFilters}>
+                        {t('common.clearFilters')}
+                      </Button>
+                    ) : (
+                      user && (
+                        <Link to="/create-event">
+                          <Button className="gap-2">
+                            <Plus className="h-4 w-4" />
+                            {t('events.createEvent')}
+                          </Button>
+                        </Link>
+                      )
+                    )}
+                  </div>
+                )}
+              </TabsContent>
+
+              <TabsContent value="past">
+                {eventsLoading ? (
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 stagger-children">
+                    {Array.from({ length: 6 }).map((_, i) => (
+                      <EventCardSkeleton key={i} />
+                    ))}
+                  </div>
+                ) : filteredEvents.past.length > 0 ? (
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 stagger-children">
+                    {filteredEvents.past.map((event) => (
+                      <EventCard key={event.id} event={event} />
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-center py-12">
+                    <Calendar className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+                    <p className="text-muted-foreground">
+                      {t('events.noPast')}
+                    </p>
+                  </div>
+                )}
+              </TabsContent>
+            </Tabs>
+          </>
+        )}
+
+        {/* Tours View */}
+        {mainView === 'tours' && (
+          <>
+            {/* Tour Filters */}
+            <div className="space-y-4 mb-8">
+              {/* Search, Category, Skill Level, Sort, Trust */}
+              <div className="flex flex-col sm:flex-row gap-3">
+                <div className="relative flex-1 max-w-md">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="Search tours by name, location, or country..."
+                    value={tourSearchQuery}
+                    onChange={(e) => setTourSearchQuery(e.target.value)}
+                    className="pl-9"
+                  />
+                </div>
+                <div className="flex gap-2 flex-wrap">
+                  <Select value={tourCategory} onValueChange={(v) => setTourCategory(v as TourCategory | 'all')}>
+                    <SelectTrigger className="w-[140px]">
+                      <SelectValue placeholder="Category" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="all">All Categories</SelectItem>
+                      {Object.entries(TOUR_CATEGORIES).map(([key, info]) => (
+                        <SelectItem key={key} value={key}>
+                          {info.emoji} {info.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  
+                  <Select value={tourSkillLevel} onValueChange={setTourSkillLevel}>
+                    <SelectTrigger className="w-[130px]">
+                      <SelectValue placeholder="Skill Level" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="all">All Levels</SelectItem>
+                      {Object.entries(TOUR_SKILL_LEVELS).map(([key, info]) => (
+                        <SelectItem key={key} value={key}>
+                          {info.emoji} {info.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  
+                  <SortDropdown
+                    value={tourSortBy}
+                    onChange={setTourSortBy}
+                    contentType="tours"
+                  />
+                  <TrustFilter
+                    value={tourTrustFilter}
+                    onChange={setTourTrustFilter}
+                    compact
+                  />
+                </div>
+              </div>
+
+              {/* Tour Category Quick Filters */}
+              <ScrollArea className="w-full whitespace-nowrap">
+                <div className="flex gap-2 pb-2">
+                  {Object.entries(TOUR_CATEGORIES).map(([key, info]) => (
+                    <Badge
+                      key={key}
+                      variant={tourCategory === key ? 'default' : 'outline'}
+                      className={cn(
+                        'cursor-pointer transition-colors',
+                        tourCategory === key
+                          ? 'text-white'
+                          : 'hover:bg-muted'
+                      )}
+                      style={{
+                        backgroundColor: tourCategory === key ? info.color : 'transparent',
+                        borderColor: `${info.color}60`,
+                        color: tourCategory === key ? (info.color === '#ccff00' ? 'black' : 'white') : info.color,
+                      }}
+                      onClick={() => setTourCategory(tourCategory === key ? 'all' : key as TourCategory)}
+                    >
+                      {info.emoji} {info.label}
+                    </Badge>
+                  ))}
+                  {hasActiveTourFilters && (
+                    <Badge
+                      variant="destructive"
+                      className="cursor-pointer gap-1"
+                      onClick={clearTourFilters}
+                    >
+                      <X className="h-3 w-3" />
+                      Clear All
+                    </Badge>
+                  )}
+                </div>
+                <ScrollBar orientation="horizontal" />
+              </ScrollArea>
+            </div>
+
+            {/* Tours Grid */}
+            {toursLoading ? (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 stagger-children">
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <TourCardSkeleton key={i} />
+                ))}
+              </div>
+            ) : filteredTours.length > 0 ? (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 stagger-children">
+                {filteredTours.map((tour) => (
+                  <TourCard key={tour.id} tour={tour} />
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-12">
+                <Route className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+                <p className="text-muted-foreground mb-4">
+                  {hasActiveTourFilters
+                    ? 'No tours match your filters'
+                    : 'No tours available yet'}
+                </p>
+                {hasActiveTourFilters ? (
+                  <Button variant="outline" onClick={clearTourFilters}>
+                    Clear Filters
+                  </Button>
+                ) : (
+                  user && (
+                    <Link to="/create-tour">
+                      <Button className="gap-2 bg-cyan-500 hover:bg-cyan-600">
+                        <Plus className="h-4 w-4" />
+                        Create Tour
+                      </Button>
+                    </Link>
+                  )
+                )}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/FAQPage.tsx b/src/src/pages/FAQPage.tsx
new file mode 100644
index 0000000..64d5daf
--- /dev/null
+++ b/src/src/pages/FAQPage.tsx
@@ -0,0 +1,302 @@
+import { useSeoMeta } from '@unhead/react';
+import { Link } from 'react-router-dom';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { HelpCircle } from 'lucide-react';
+
+const faqs = [
+  {
+    category: 'Getting Started',
+    questions: [
+      {
+        q: 'What is SkateSpots?',
+        a: 'SkateSpots is a decentralized app for skateboarders to discover spots, buy/sell gear, connect with coaches and filmers, join events, and build community. Built on Nostr, your contributions can\'t be deleted by any company.',
+      },
+      {
+        q: 'Is SkateSpots free to use?',
+        a: 'Yes! 100% free. Browse spots, add locations, buy/sell gear, connect with coaches/filmers, join events - all free. Zaps (Bitcoin tips) are completely optional.',
+      },
+      {
+        q: 'What is Nostr?',
+        a: 'Nostr is a simple protocol for creating decentralized social apps. Instead of one company controlling everything, your data lives on multiple servers. You own your account - not a platform.',
+      },
+      {
+        q: 'Do I need Bitcoin to use SkateSpots?',
+        a: 'No! Bitcoin is completely optional. You only need it if you want to send/receive zaps (tips) or use the built-in Cashu wallet. Everything else works without any Bitcoin.',
+      },
+    ],
+  },
+  {
+    category: 'Spots & Map',
+    questions: [
+      {
+        q: 'How do I add a skate spot?',
+        a: 'Login to SkateSpots, go to the map page, tap the Filters button (on mobile) or click "Add Spot". Fill in the details (name, location, type), and publish. Your spot will appear on the map for everyone.',
+      },
+      {
+        q: 'Can spots be deleted?',
+        a: 'Creators can delete their own spots by publishing a deletion event. However, because Nostr is decentralized, some relays may keep the content. This is a feature - it prevents censorship.',
+      },
+      {
+        q: 'What\'s the difference between Public, Private, and Ask Locals?',
+        a: 'Public spots are open to everyone (parks, plazas). Private spots need permission from the owner (backyard ramps). Ask Locals means respect the spot and check with local skaters first.',
+      },
+      {
+        q: 'What are the map filters?',
+        a: 'You can filter the map to show: Spots (skate parks & street spots), Shops (local skate shops), Gear (items for sale), Tours (local guides), and Bitcoin merchants (places that accept sats).',
+      },
+      {
+        q: 'How do I find spots near me?',
+        a: 'The map automatically centers on your location if you allow it. You can also search by city name or use the "Near Me" sort option to see closest spots first.',
+      },
+    ],
+  },
+  {
+    category: 'Gear Swap & Marketplace',
+    questions: [
+      {
+        q: 'How do I sell gear?',
+        a: 'Go to the map, open filters, and tap "Sell Gear" - or visit a spot page and click "List Gear". You\'ll need NIP-05 verification. Add photos, price, condition, and link it to a spot for meetups.',
+      },
+      {
+        q: 'Why do I need NIP-05 to sell gear?',
+        a: 'NIP-05 verification helps prevent spam and scams. It proves you\'re a real person with a verifiable identity. You can get free NIP-05 from nostr.directory or nip05.social.',
+      },
+      {
+        q: 'What\'s the anti-spam fee for new sellers?',
+        a: 'New sellers (NIP-05 verified but no spots/listings yet) pay a small 1000 sats fee for their first listing. This prevents spam. Once you\'ve created spots or have 2+ listings, no fee is required.',
+      },
+      {
+        q: 'What currencies can I use for pricing?',
+        a: 'You can price items in sats (Bitcoin), or any major fiat currency (USD, EUR, GBP, etc.). The currency symbol and code are shown to buyers so there\'s no confusion.',
+      },
+      {
+        q: 'How do I meet up with buyers/sellers?',
+        a: 'Listings are linked to spots - you agree to meet at a public skate spot for safe exchanges. Use the encrypted DMs feature to coordinate timing.',
+      },
+      {
+        q: 'What is My Stash?',
+        a: 'My Stash is your private encrypted inventory. Track gear you own, create wishlists, and easily list items for sale. Your stash is encrypted - only you can see it.',
+      },
+    ],
+  },
+  {
+    category: 'Coaches & Filmers (The Lab)',
+    questions: [
+      {
+        q: 'How do I become a coach?',
+        a: 'Go to The Lab (/lab) and click "Become a Coach". You\'ll need NIP-05 verification and a connected Lightning wallet. Add your skills, rates, and select spots where you coach.',
+      },
+      {
+        q: 'How do I become a filmer?',
+        a: 'Go to The Lab and click "Become a Filmer". Same requirements as coaching - NIP-05 and Lightning wallet. List your services, equipment, rates, and spots where you film.',
+      },
+      {
+        q: 'What spots can coaches/filmers select?',
+        a: 'When creating your profile, you can select up to 5 spots where you offer services. Your profile will appear on those spot pages under "Services at this Spot".',
+      },
+      {
+        q: 'How do coaches and filmers get paid?',
+        a: 'Payments go directly to you via Lightning zaps or however you arrange with clients. SkateSpots doesn\'t take any cut - we just connect you with skaters.',
+      },
+      {
+        q: 'Why do I need a wallet connected?',
+        a: 'A Lightning wallet (via NWC - Nostr Wallet Connect) lets students/clients pay you instantly with Bitcoin. Popular wallets: Alby, Minibits, Zeus, Coinos.',
+      },
+    ],
+  },
+  {
+    category: 'Local Tours',
+    questions: [
+      {
+        q: 'What are Local Tours?',
+        a: 'Local Tours let experienced skaters offer to show visitors around their city\'s best spots. Guides set their own rates and availability.',
+      },
+      {
+        q: 'How do I offer a tour?',
+        a: 'On the map, open filters and tap "Offer Tour" (or find it in Quick Actions). Set your city, meeting point, price, duration, and what types of spots you\'ll show.',
+      },
+      {
+        q: 'How do tours work?',
+        a: 'Visitors browse tours on the map, contact guides via encrypted DM, agree on details, and pay via Lightning. The guide shows them the best local spots.',
+      },
+    ],
+  },
+  {
+    category: 'Wallet & Payments',
+    questions: [
+      {
+        q: 'What are zaps?',
+        a: 'Zaps are instant Bitcoin Lightning tips. Like a spot? Zap the creator. Appreciate a coach? Zap them. Tips go directly to recipients - no platform cut.',
+      },
+      {
+        q: 'What is the Cashu wallet?',
+        a: 'SkateSpots has a built-in Cashu ecash wallet. You can receive Lightning payments, store sats, and spend them - all within the app. It\'s custodial but convenient.',
+      },
+      {
+        q: 'What is NWC (Nostr Wallet Connect)?',
+        a: 'NWC lets you connect your external Lightning wallet (Alby, Minibits, Zeus, etc.) to SkateSpots for one-click zaps. Your keys stay in your wallet.',
+      },
+      {
+        q: 'How much should I zap?',
+        a: 'Whatever feels right! Common amounts: 100-1000 sats (~$0.04-$0.40) for appreciation, more for serious contributions. Even small zaps show support.',
+      },
+    ],
+  },
+  {
+    category: 'Privacy & Data',
+    questions: [
+      {
+        q: 'What data is PUBLIC and visible to everyone?',
+        a: 'Almost everything you publish on SkateSpots is public and permanent on the Nostr network:\n\n• Your profile (name, picture, bio, website, Lightning address)\n• All spots you create (including the location/geohash)\n• All events you create\n• All comments and reviews you post\n• All zaps you send (amount, recipient, and message)\n• Your relay list (where your data is stored)\n• Your follow list (who you follow)\n• User statuses ("I\'m skating at X spot")\n• Marketplace listings (gear for sale)\n• Coach/filmer profiles\n• Shop listings\n• Tour offerings\n\nThink of it like posting on a public billboard - once published, anyone can see it and relays may keep copies indefinitely.',
+      },
+      {
+        q: 'What data is PRIVATE and encrypted?',
+        a: 'Only two things in SkateSpots are encrypted and private:\n\n1. Direct Messages (DMs) - Use NIP-44 end-to-end encryption. Only you and the recipient can read them. Not even relay operators can see the content.\n\n2. My Stash - Your personal gear inventory is encrypted to yourself using NIP-44. Only you can decrypt and view your stash contents.\n\nOther content like spots, profiles, and listings are public because they\'re meant to be discovered by the community. Nostr supports encryption for any data - SkateSpots uses it where privacy matters most.',
+      },
+      {
+        q: 'What location data does SkateSpots collect?',
+        a: 'SkateSpots uses location data extensively:\n\n• Creating spots: The spot\'s geohash (encoded lat/lng) is published publicly to Nostr forever\n• "I\'m Here" status: Broadcasts your real-time location to anyone on the network\n• Weather data: Your coordinates are sent to Open-Meteo API servers\n• Proximity sorting: Your location is used locally (not sent anywhere)\n• BTC Map: Your location is sent to btcmap.org to find Bitcoin merchants\n\n⚠️ WARNING: Never create spots at or near your home address. The geohash permanently reveals the location. The "I\'m Here" status tells everyone exactly where you are in real-time.',
+      },
+      {
+        q: 'What third-party services receive my data?',
+        a: 'SkateSpots connects to external services that can see your IP address and some data:\n\n• api.open-meteo.com - Receives your latitude/longitude for weather data\n• air-quality-api.open-meteo.com - Receives your coordinates for air quality\n• blossom.primal.net - Receives all photos you upload (and your IP)\n• proxy.shakespeare.diy - CORS proxy that sees some API requests\n• api.relatr.xyz - Receives Nostr pubkeys for trust score calculations\n• btcmap.org - Receives your location to show Bitcoin merchants\n• Nostr relays (various) - Store all your public events\n\nThese services can potentially log your IP address, approximate location, and usage patterns. Use a VPN if this concerns you.',
+      },
+      {
+        q: 'What is stored in my browser (localStorage)?',
+        a: 'The following data is stored locally in your browser:\n\n• Cashu wallet mnemonic (⚠️ SENSITIVE - controls your funds!)\n• Login session state\n• Language preference\n• App configuration settings\n• Amber signer pending operations\n• Sasquatch guide state\n• Cached spot data for offline viewing\n\nAnyone with physical access to your device could potentially read this data. The Cashu mnemonic is especially sensitive - if someone gets it, they can steal your funds.',
+      },
+      {
+        q: 'Do uploaded photos contain location data?',
+        a: 'Photos from your phone often contain EXIF metadata including:\n\n• GPS coordinates where the photo was taken\n• Date and time\n• Device model\n• Camera settings\n\nSkateSpots does NOT automatically strip this metadata. When you upload to Blossom servers, this data may be preserved. If privacy is critical, use an EXIF removal tool before uploading photos.',
+      },
+      {
+        q: 'Can I delete my data?',
+        a: 'Partially. You can publish deletion requests (kind 5 events) for your content, and well-behaved relays will honor them. However:\n\n• Some relays may ignore deletion requests\n• Other users may have already copied your data\n• Archived/cached copies may exist\n• This is intentional - it prevents censorship\n\nOnce something is published to Nostr, consider it potentially permanent. Think before you post.',
+      },
+      {
+        q: 'How do I protect my secret key (nsec)?',
+        a: 'Your nsec is the master key to your identity. If someone gets it, they can:\n\n• Post as you\n• Access your encrypted DMs\n• Access your encrypted Stash\n• Spend funds if linked to wallets\n\nBest practices:\n• Use a browser extension signer (Alby, nos2x) instead of pasting nsec directly\n• Use Amber app on Android for mobile signing\n• Never share your nsec with anyone\n• Never enter nsec on suspicious websites\n• Back up your nsec offline (paper, password manager)\n• There is NO password reset - lose it and you lose the account forever',
+      },
+      {
+        q: 'Is the Cashu wallet private?',
+        a: 'Cashu ecash provides good transaction privacy:\n\n• Mints use blinded signatures - they don\'t know who pays whom\n• Better privacy than on-chain Bitcoin for small amounts\n• Tokens are bearer instruments (whoever has them, owns them)\n\nHowever:\n• The mint knows your IP when you connect\n• If the mint colludes with recipients, privacy can be reduced\n• Your mnemonic in localStorage could be accessed by malware\n• It\'s still custodial - the mint could theoretically run off with funds',
+      },
+      {
+        q: 'What is NIP-05 verification?',
+        a: 'NIP-05 is like a verified checkmark - a Nostr address (like you@example.com) that proves identity. It\'s required for selling gear, coaching, filming, and creating events.\n\nPrivacy note: Your NIP-05 domain may reveal your real identity or be linkable to other accounts. Choose a provider wisely if anonymity matters to you.',
+      },
+      {
+        q: 'Can SkateSpots see my private key?',
+        a: 'No. SkateSpots never accesses or transmits your private key:\n\n• Browser extension signers (Alby, nos2x): Your key stays in the extension, SkateSpots only requests signatures\n• Amber (Android): Your key stays in Amber app\n• Mnemonic signup: The key is generated in your browser and stored in localStorage - SkateSpots does not access or send it anywhere\n\nSkateSpots is open source, so you can verify this yourself. For additional peace of mind, you can use a hardware signer or browser extension.',
+      },
+      {
+        q: 'Privacy recommendations summary',
+        a: '1. Using SkateSpots from home is fine, but for extra privacy consider using Tor or a VPN to hide your IP address from relays and third-party services\n\n2. Don\'t create spots at your home address - the location coordinates are stored on relays\n\n3. Be careful with "I\'m Here" status - it broadcasts your real-time location to relays\n\n4. Use a browser extension signer (Alby, nos2x) instead of pasting nsec directly\n\n5. Back up your Cashu mnemonic securely - it controls your funds\n\n6. Strip EXIF data from photos before uploading if location privacy matters\n\n7. Remember: everything except DMs and Stash is stored on relays you connect to\n\n8. Choose your relays wisely - they are responsible for storing and serving your data. You can manage relays in Settings > Relays',
+      },
+      {
+        q: 'Who is responsible for my data?',
+        a: 'In Nostr, relays are responsible for storing and serving your data - not SkateSpots. Here\'s how it works:\n\n• When you publish content, it goes to the relays you\'re connected to\n• Each relay operator decides their own policies (what to store, how long, who can access)\n• Different relays may have different data retention and privacy policies\n• You can choose which relays to use in Settings > Relays\n• Your data exists on multiple independent relays - no single entity controls it\n\nSkateSpots is just a client (viewer/publisher) - we don\'t store your Nostr events. The relays do. This is the beauty of decentralization: you\'re not dependent on any single company, but it also means you should choose relays you trust.\n\nDefault relays include goskatespots.nostr1.com (community relay) and standard Nostr relays. You can add/remove relays anytime.',
+      },
+    ],
+  },
+  {
+    category: 'Shops & Events',
+    questions: [
+      {
+        q: 'How do I add a skate shop?',
+        a: 'On the map, click "Add Shop" (desktop) or find it in Quick Actions. You\'ll need NIP-05 verification. Add shop details, hours, and location.',
+      },
+      {
+        q: 'Can I claim a shop listing?',
+        a: 'Yes! If you own a shop that someone else listed, you can claim it with NIP-05 verification. This lets you manage the listing.',
+      },
+      {
+        q: 'How do I create an event?',
+        a: 'Go to the Events page and click "Create Event". Add name, date, time, location, and description. Events appear on the calendar for the community.',
+      },
+    ],
+  },
+];
+
+export default function FAQPage() {
+  useSeoMeta({
+    title: 'FAQ - SkateSpots',
+    description: 'Frequently asked questions about SkateSpots and Nostr.',
+  });
+
+  return (
+    <Layout>
+      <div className="container px-4 py-12 max-w-4xl">
+        {/* Hero */}
+        <div className="text-center mb-12">
+          <div className="mb-6">
+            <div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-gradient-to-br from-[#ff0040] to-[#ccff00] mb-4">
+              <HelpCircle className="h-10 w-10 text-white" />
+            </div>
+          </div>
+          <h1 className="text-4xl md:text-6xl font-black uppercase mb-4" style={{
+            fontFamily: 'Impact, "Arial Black", sans-serif',
+            letterSpacing: '0.05em'
+          }}>
+            <span className="gradient-text">FREQUENTLY ASKED QUESTIONS</span>
+          </h1>
+          <p className="text-xl text-gray-400 max-w-2xl mx-auto">
+            Everything you need to know about SkateSpots and Nostr
+          </p>
+        </div>
+
+        {/* FAQ Sections */}
+        <div className="space-y-8">
+          {faqs.map((section, idx) => (
+            <div key={idx}>
+              <h2 className="text-2xl font-black uppercase mb-4 text-[#ff0040]" style={{
+                fontFamily: 'Impact, "Arial Black", sans-serif'
+              }}>
+                {section.category}
+              </h2>
+              
+              <Card className="bg-black/90 border-2 border-gray-700">
+                <CardContent className="p-6">
+                  <Accordion type="single" collapsible className="w-full">
+                    {section.questions.map((faq, qIdx) => (
+                      <AccordionItem key={qIdx} value={`${idx}-${qIdx}`}>
+                        <AccordionTrigger className="text-left text-white hover:text-[#ff0040] font-bold">
+                          {faq.q}
+                        </AccordionTrigger>
+                        <AccordionContent className="text-gray-400 leading-relaxed">
+                          {faq.a}
+                        </AccordionContent>
+                      </AccordionItem>
+                    ))}
+                  </Accordion>
+                </CardContent>
+              </Card>
+            </div>
+          ))}
+        </div>
+
+        {/* Still Have Questions? */}
+        <Card className="bg-[#ccff00]/10 border-2 border-[#ccff00]/50 mt-12">
+          <CardContent className="p-8 text-center">
+            <h3 className="text-2xl font-black uppercase text-[#ccff00] mb-3">Still Have Questions?</h3>
+            <p className="text-gray-300 mb-6">
+              Check out our detailed onboarding guide for step-by-step instructions
+            </p>
+            <Link to="/onboarding">
+              <button className="px-8 py-4 rounded-full bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold uppercase shadow-[0_0_20px_rgba(204,255,0,0.5)] transition-all">
+                View Onboarding Guide
+              </button>
+            </Link>
+          </CardContent>
+        </Card>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/FoodPage.tsx b/src/src/pages/FoodPage.tsx
new file mode 100644
index 0000000..a31d653
--- /dev/null
+++ b/src/src/pages/FoodPage.tsx
@@ -0,0 +1,280 @@
+import { useState, useMemo } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useSkateSpots } from '@/hooks/useSkateSpots';
+import { useFoodSpots } from '@/hooks/useFoodSpots';
+import {
+  Utensils,
+  MapPin,
+  Phone,
+  Globe,
+  Clock,
+  Navigation,
+  Coffee,
+  Beer,
+  ChefHat,
+} from 'lucide-react';
+import type { FoodSpot } from '@/lib/types';
+
+const FOOD_TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  restaurant: ChefHat,
+  cafe: Coffee,
+  fast_food: Utensils,
+  bar: Beer,
+  pub: Beer,
+  food_court: Utensils,
+};
+
+const FOOD_TYPE_LABELS: Record<string, string> = {
+  restaurant: 'Restaurant',
+  cafe: 'Café',
+  fast_food: 'Fast Food',
+  bar: 'Bar',
+  pub: 'Pub',
+  food_court: 'Food Court',
+};
+
+function FoodSpotCard({ spot }: { spot: FoodSpot }) {
+  const Icon = FOOD_TYPE_ICONS[spot.type] || Utensils;
+
+  const handleDirections = () => {
+    window.open(
+      `https://www.google.com/maps/dir/?api=1&destination=${spot.lat},${spot.lng}`,
+      '_blank'
+    );
+  };
+
+  return (
+    <Card className="group hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 border-border/50 hover:border-primary/30">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
+              <Icon className="h-5 w-5 text-primary" />
+            </div>
+            <div className="min-w-0">
+              <CardTitle className="text-base line-clamp-1 group-hover:text-primary transition-colors">
+                {spot.name}
+              </CardTitle>
+              <div className="flex items-center gap-2 mt-1">
+                <Badge variant="secondary" className="text-xs">
+                  {FOOD_TYPE_LABELS[spot.type] || spot.type}
+                </Badge>
+                {spot.cuisine && (
+                  <span className="text-xs text-muted-foreground truncate">
+                    {spot.cuisine}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+          {spot.distance !== undefined && (
+            <Badge variant="outline" className="flex-shrink-0">
+              {spot.distance < 1
+                ? `${Math.round(spot.distance * 1000)}m`
+                : `${spot.distance.toFixed(1)}km`}
+            </Badge>
+          )}
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-3">
+        {spot.address && (
+          <div className="flex items-start gap-2 text-sm text-muted-foreground">
+            <MapPin className="h-4 w-4 flex-shrink-0 mt-0.5" />
+            <span className="line-clamp-2">{spot.address}</span>
+          </div>
+        )}
+
+        {spot.openingHours && (
+          <div className="flex items-start gap-2 text-sm text-muted-foreground">
+            <Clock className="h-4 w-4 flex-shrink-0 mt-0.5" />
+            <span className="line-clamp-1">{spot.openingHours}</span>
+          </div>
+        )}
+
+        <div className="flex items-center gap-2 pt-2">
+          {spot.phone && (
+            <a href={`tel:${spot.phone}`}>
+              <Button variant="outline" size="sm" className="gap-2">
+                <Phone className="h-3 w-3" />
+                Call
+              </Button>
+            </a>
+          )}
+          {spot.website && (
+            <a href={spot.website} target="_blank" rel="noopener noreferrer">
+              <Button variant="outline" size="sm" className="gap-2">
+                <Globe className="h-3 w-3" />
+                Website
+              </Button>
+            </a>
+          )}
+          <Button
+            variant="default"
+            size="sm"
+            className="gap-2 ml-auto"
+            onClick={handleDirections}
+          >
+            <Navigation className="h-3 w-3" />
+            Directions
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function FoodSpotSkeleton() {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <div className="flex items-start gap-3">
+          <Skeleton className="w-10 h-10 rounded-xl" />
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-5 w-3/4" />
+            <Skeleton className="h-4 w-1/3" />
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-2/3" />
+        <div className="flex gap-2 pt-2">
+          <Skeleton className="h-8 w-16" />
+          <Skeleton className="h-8 w-20" />
+          <Skeleton className="h-8 w-24 ml-auto" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function FoodPage() {
+  useSeoMeta({
+    title: 'Food Near Spots - SkateSpots',
+    description: 'Find restaurants, cafés, and food options near skateboarding spots.',
+  });
+
+  const { data: spots, isLoading: spotsLoading } = useSkateSpots(50);
+  const [selectedSpotId, setSelectedSpotId] = useState<string | null>(null);
+
+  const selectedSpot = useMemo(() => {
+    if (!selectedSpotId || !spots) return null;
+    return spots.find((s) => s.id === selectedSpotId) || null;
+  }, [selectedSpotId, spots]);
+
+  const {
+    data: foodSpots,
+    isLoading: foodLoading,
+  } = useFoodSpots(selectedSpot?.geohash, 1);
+
+  return (
+    <Layout>
+      <div className="container px-4 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold">Food Near Spots</h1>
+          <p className="text-muted-foreground mt-1">
+            Find places to eat near your favorite skate spots
+          </p>
+        </div>
+
+        {/* Spot selector */}
+        <Card className="mb-8">
+          <CardContent className="p-6">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
+              <div className="flex-1 w-full sm:w-auto">
+                <label className="text-sm font-medium mb-2 block">
+                  Select a skate spot
+                </label>
+                <Select
+                  value={selectedSpotId || ''}
+                  onValueChange={setSelectedSpotId}
+                  disabled={spotsLoading}
+                >
+                  <SelectTrigger className="w-full sm:w-[300px]">
+                    <SelectValue placeholder="Choose a spot..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {spots?.map((spot) => (
+                      <SelectItem key={spot.id} value={spot.id}>
+                        <div className="flex items-center gap-2">
+                          <MapPin className="h-4 w-4 text-muted-foreground" />
+                          <span>{spot.title}</span>
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {selectedSpot && (
+                <div className="text-sm text-muted-foreground">
+                  <span className="font-medium">Location:</span>{' '}
+                  {selectedSpot.location || 'Unknown'}
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Food results */}
+        {!selectedSpotId ? (
+          <Card className="border-dashed">
+            <CardContent className="py-16 text-center">
+              <Utensils className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+              <h3 className="text-lg font-medium mb-2">Select a Skate Spot</h3>
+              <p className="text-muted-foreground max-w-md mx-auto">
+                Choose a skate spot from the dropdown above to find nearby restaurants,
+                cafés, and other food options.
+              </p>
+            </CardContent>
+          </Card>
+        ) : foodLoading ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <FoodSpotSkeleton key={i} />
+            ))}
+          </div>
+        ) : foodSpots && foodSpots.length > 0 ? (
+          <>
+            <div className="flex items-center justify-between mb-6">
+              <p className="text-sm text-muted-foreground">
+                {foodSpots.length} place{foodSpots.length !== 1 ? 's' : ''} found
+                within 1km of {selectedSpot?.title}
+              </p>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 stagger-children">
+              {foodSpots.map((spot) => (
+                <FoodSpotCard key={spot.id} spot={spot} />
+              ))}
+            </div>
+          </>
+        ) : (
+          <Card className="border-dashed">
+            <CardContent className="py-16 text-center">
+              <Utensils className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+              <h3 className="text-lg font-medium mb-2">No Food Spots Found</h3>
+              <p className="text-muted-foreground max-w-md mx-auto">
+                We couldn't find any restaurants or cafés within 1km of this spot.
+                Try selecting a different location.
+              </p>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/GearSwapPage.tsx b/src/src/pages/GearSwapPage.tsx
new file mode 100644
index 0000000..4d7331f
--- /dev/null
+++ b/src/src/pages/GearSwapPage.tsx
@@ -0,0 +1,444 @@
+import { useState, useMemo } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { Link } from 'react-router-dom';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuCheckboxItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useMarketplaceItems } from '@/hooks/useMarketplace';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useBatchTrustScores } from '@/hooks/useBatchTrustScores';
+import { useBatchSellerSales } from '@/hooks/useSellerSales';
+import { useFollowList } from '@/hooks/useFollowList';
+import { GearSwapItemCard } from '@/components/GearSwapItemCard';
+import { GEAR_CATEGORIES, type MarketplaceItem } from '@/lib/types';
+import {
+  ShoppingCart,
+  Plus,
+  Search,
+  Filter,
+  ArrowUpDown,
+  Users,
+  ShieldCheck,
+  UserCheck,
+  AlertCircle,
+  Loader2,
+} from 'lucide-react';
+
+type SortOption = 'newest' | 'price_low' | 'price_high' | 'trust';
+type TrustFilter = 'all' | 'verified' | 'trusted' | 'following';
+
+export default function GearSwapPage() {
+  useSeoMeta({
+    title: 'Gear Swap - SkateSpots',
+    description: 'Buy & sell used skate gear with other skaters. Decks, trucks, wheels, shoes, and more.',
+  });
+
+  const { user } = useCurrentUser();
+  const { data: items, isLoading, error } = useMarketplaceItems(200);
+  const { data: followList } = useFollowList(user?.pubkey);
+
+  // Filter state
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
+  const [sortBy, setSortBy] = useState<SortOption>('newest');
+  const [trustFilter, setTrustFilter] = useState<TrustFilter>('all');
+  const [showOnlyWTB, setShowOnlyWTB] = useState(false);
+  const [showOnlySelling, setShowOnlySelling] = useState(false);
+
+  // Get unique seller pubkeys for batch queries
+  const sellerPubkeys = useMemo(() => {
+    if (!items) return [];
+    const pubkeys = new Set(items.map(item => item.pubkey));
+    return Array.from(pubkeys);
+  }, [items]);
+
+  // Batch fetch trust scores and sales for all sellers
+  const { data: trustScores } = useBatchTrustScores(sellerPubkeys);
+  const { data: sellerSales } = useBatchSellerSales(sellerPubkeys);
+
+  // Build follow set for quick lookup
+  const followingSet = useMemo(() => {
+    if (!followList) return new Set<string>();
+    return new Set(
+      followList.tags
+        .filter(([tag]) => tag === 'p')
+        .map(([, pubkey]) => pubkey)
+    );
+  }, [followList]);
+
+  // Filter and sort items
+  const filteredItems = useMemo(() => {
+    if (!items) return [];
+
+    let filtered = [...items];
+
+    // Filter out expired items
+    const now = Math.floor(Date.now() / 1000);
+    filtered = filtered.filter(item => {
+      if (item.expiration && item.expiration < now) return false;
+      if (item.status && item.status !== 'active') return false;
+      return true;
+    });
+
+    // Search filter
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(item =>
+        item.title.toLowerCase().includes(query) ||
+        item.description?.toLowerCase().includes(query) ||
+        item.summary?.toLowerCase().includes(query) ||
+        item.location?.toLowerCase().includes(query)
+      );
+    }
+
+    // Category filter
+    if (selectedCategory !== 'all') {
+      filtered = filtered.filter(item =>
+        item.category?.includes(selectedCategory)
+      );
+    }
+
+    // Listing type filters
+    if (showOnlyWTB) {
+      filtered = filtered.filter(item => item.listingType === 'wtb');
+    }
+    if (showOnlySelling) {
+      filtered = filtered.filter(item => item.listingType !== 'wtb');
+    }
+
+    // Trust filter
+    if (trustFilter !== 'all' && trustScores) {
+      filtered = filtered.filter(item => {
+        const score = trustScores.get(item.pubkey);
+        
+        switch (trustFilter) {
+          case 'verified':
+            return score !== undefined && score >= 90;
+          case 'trusted':
+            return score !== undefined && score >= 60;
+          case 'following':
+            return followingSet.has(item.pubkey);
+          default:
+            return true;
+        }
+      });
+    }
+
+    // Sort
+    switch (sortBy) {
+      case 'price_low':
+        filtered.sort((a, b) => {
+          const aPrice = a.price?.amount ? parseFloat(a.price.amount) : Infinity;
+          const bPrice = b.price?.amount ? parseFloat(b.price.amount) : Infinity;
+          return aPrice - bPrice;
+        });
+        break;
+      case 'price_high':
+        filtered.sort((a, b) => {
+          const aPrice = a.price?.amount ? parseFloat(a.price.amount) : 0;
+          const bPrice = b.price?.amount ? parseFloat(b.price.amount) : 0;
+          return bPrice - aPrice;
+        });
+        break;
+      case 'trust':
+        filtered.sort((a, b) => {
+          const aScore = trustScores?.get(a.pubkey) ?? 0;
+          const bScore = trustScores?.get(b.pubkey) ?? 0;
+          return bScore - aScore;
+        });
+        break;
+      case 'newest':
+      default:
+        filtered.sort((a, b) => b.createdAt - a.createdAt);
+        break;
+    }
+
+    return filtered;
+  }, [items, searchQuery, selectedCategory, sortBy, trustFilter, showOnlyWTB, showOnlySelling, trustScores, followingSet]);
+
+  const categoryOptions = [
+    { value: 'all', label: 'All Categories' },
+    ...Object.entries(GEAR_CATEGORIES).map(([key, label]) => ({
+      value: key,
+      label,
+    })),
+  ];
+
+  return (
+    <Layout>
+      <div className="container px-4 py-8 max-w-7xl">
+        {/* Header */}
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-8">
+          <div>
+            <div className="flex items-center gap-3 mb-2">
+              <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center">
+                <ShoppingCart className="h-6 w-6 text-white" />
+              </div>
+              <h1
+                className="text-3xl md:text-4xl font-black uppercase neon-orange"
+                style={{
+                  fontFamily: 'Impact, "Arial Black", sans-serif',
+                  letterSpacing: '0.05em',
+                }}
+              >
+                GEAR SWAP
+              </h1>
+            </div>
+            <p className="text-gray-400">
+              Buy & sell used skate gear with other skaters
+            </p>
+          </div>
+
+          <Link to="/create-listing">
+            <Button
+              size="lg"
+              className="gap-2 bg-orange-500 hover:bg-orange-600 text-white font-bold uppercase shadow-[0_0_20px_rgba(255,102,0,0.3)]"
+            >
+              <Plus className="h-5 w-5" />
+              List Gear
+            </Button>
+          </Link>
+        </div>
+
+        {/* Search & Filters */}
+        <Card className="bg-black/90 border-2 border-orange-500/20 mb-6">
+          <CardContent className="p-4">
+            {/* Search */}
+            <div className="relative mb-4">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-500" />
+              <Input
+                placeholder="Search gear..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-10 bg-gray-900 border-gray-700 h-12 text-lg"
+              />
+            </div>
+
+            {/* Category Pills */}
+            <div className="flex flex-wrap gap-2 mb-4">
+              {categoryOptions.map(({ value, label }) => (
+                <Button
+                  key={value}
+                  variant={selectedCategory === value ? 'default' : 'outline'}
+                  size="sm"
+                  className={
+                    selectedCategory === value
+                      ? 'bg-orange-500 hover:bg-orange-600 text-white'
+                      : 'border-gray-600 hover:bg-gray-800'
+                  }
+                  onClick={() => setSelectedCategory(value)}
+                >
+                  {label}
+                </Button>
+              ))}
+            </div>
+
+            {/* Filter Row */}
+            <div className="flex flex-wrap items-center gap-3">
+              {/* Condition / Listing Type */}
+              <div className="flex items-center gap-2">
+                <Button
+                  variant={showOnlySelling ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => {
+                    setShowOnlySelling(!showOnlySelling);
+                    if (!showOnlySelling) setShowOnlyWTB(false);
+                  }}
+                  className={
+                    showOnlySelling
+                      ? 'bg-orange-500/80 hover:bg-orange-500'
+                      : 'border-gray-600 text-gray-400 hover:bg-gray-800'
+                  }
+                >
+                  For Sale
+                </Button>
+                <Button
+                  variant={showOnlyWTB ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => {
+                    setShowOnlyWTB(!showOnlyWTB);
+                    if (!showOnlyWTB) setShowOnlySelling(false);
+                  }}
+                  className={
+                    showOnlyWTB
+                      ? 'bg-blue-500/80 hover:bg-blue-500'
+                      : 'border-gray-600 text-gray-400 hover:bg-gray-800'
+                  }
+                >
+                  <Search className="h-3 w-3 mr-1" />
+                  WTB
+                </Button>
+              </div>
+
+              <div className="border-l border-gray-700 h-6 mx-1" />
+
+              {/* Trust Filter */}
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 border-gray-600 text-gray-300 hover:bg-gray-800"
+                  >
+                    <ShieldCheck className="h-4 w-4" />
+                    Trust
+                    {trustFilter !== 'all' && (
+                      <Badge className="ml-1 bg-orange-500/20 text-orange-400 text-xs">
+                        {trustFilter}
+                      </Badge>
+                    )}
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-48">
+                  <DropdownMenuLabel>Filter by Trust</DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuCheckboxItem
+                    checked={trustFilter === 'all'}
+                    onCheckedChange={() => setTrustFilter('all')}
+                  >
+                    <Users className="h-4 w-4 mr-2" />
+                    All Sellers
+                  </DropdownMenuCheckboxItem>
+                  <DropdownMenuCheckboxItem
+                    checked={trustFilter === 'verified'}
+                    onCheckedChange={() => setTrustFilter('verified')}
+                  >
+                    <UserCheck className="h-4 w-4 mr-2 text-green-400" />
+                    Verified Only
+                  </DropdownMenuCheckboxItem>
+                  <DropdownMenuCheckboxItem
+                    checked={trustFilter === 'trusted'}
+                    onCheckedChange={() => setTrustFilter('trusted')}
+                  >
+                    <ShieldCheck className="h-4 w-4 mr-2 text-blue-400" />
+                    Trusted+
+                  </DropdownMenuCheckboxItem>
+                  <DropdownMenuCheckboxItem
+                    checked={trustFilter === 'following'}
+                    onCheckedChange={() => setTrustFilter('following')}
+                    disabled={!user}
+                  >
+                    <Users className="h-4 w-4 mr-2 text-purple-400" />
+                    Following Only
+                  </DropdownMenuCheckboxItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+
+              <div className="flex-1" />
+
+              {/* Sort */}
+              <Select
+                value={sortBy}
+                onValueChange={(v) => setSortBy(v as SortOption)}
+              >
+                <SelectTrigger className="w-40 bg-gray-900 border-gray-700">
+                  <ArrowUpDown className="h-4 w-4 mr-2" />
+                  <SelectValue placeholder="Sort by" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="newest">Newest</SelectItem>
+                  <SelectItem value="price_low">Price: Low → High</SelectItem>
+                  <SelectItem value="price_high">Price: High → Low</SelectItem>
+                  <SelectItem value="trust">Trust Score</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Results Count */}
+        {!isLoading && (
+          <div className="flex items-center justify-between mb-4">
+            <p className="text-sm text-gray-400">
+              {filteredItems.length} {filteredItems.length === 1 ? 'listing' : 'listings'} found
+            </p>
+          </div>
+        )}
+
+        {/* Loading State */}
+        {isLoading && (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+            {Array.from({ length: 8 }).map((_, i) => (
+              <Card key={i} className="bg-black/90 border-2 border-orange-500/20">
+                <CardContent className="p-4">
+                  <Skeleton className="w-full aspect-square rounded-lg mb-3" />
+                  <Skeleton className="h-5 w-3/4 mb-2" />
+                  <Skeleton className="h-4 w-1/2 mb-2" />
+                  <div className="flex items-center gap-2">
+                    <Skeleton className="h-6 w-6 rounded-full" />
+                    <Skeleton className="h-3 w-20" />
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+
+        {/* Error State */}
+        {error && (
+          <Card className="bg-red-950/30 border-2 border-red-500/50">
+            <CardContent className="py-8 text-center">
+              <AlertCircle className="h-12 w-12 mx-auto mb-4 text-red-400" />
+              <h3 className="text-lg font-bold text-red-400 mb-2">Failed to load listings</h3>
+              <p className="text-gray-400">Please try again later.</p>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Empty State */}
+        {!isLoading && !error && filteredItems.length === 0 && (
+          <Card className="bg-black/90 border-2 border-dashed border-orange-500/30">
+            <CardContent className="py-16 text-center">
+              <ShoppingCart className="h-16 w-16 mx-auto mb-4 text-gray-600" />
+              <h3 className="text-xl font-bold text-white mb-2">No listings found</h3>
+              <p className="text-gray-400 mb-6 max-w-md mx-auto">
+                {searchQuery || selectedCategory !== 'all' || trustFilter !== 'all'
+                  ? 'Try adjusting your filters or search query.'
+                  : 'Be the first to list your gear!'}
+              </p>
+              <Link to="/create-listing">
+                <Button className="gap-2 bg-orange-500 hover:bg-orange-600">
+                  <Plus className="h-4 w-4" />
+                  List Your Gear
+                </Button>
+              </Link>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Listings Grid */}
+        {!isLoading && !error && filteredItems.length > 0 && (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+            {filteredItems.map((item) => (
+              <GearSwapItemCard
+                key={item.id}
+                item={item}
+                trustScore={trustScores?.get(item.pubkey)}
+                salesCount={sellerSales?.get(item.pubkey) ?? 0}
+                isFollowing={followingSet.has(item.pubkey)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/Index.tsx b/src/src/pages/Index.tsx
new file mode 100644
index 0000000..60063dc
--- /dev/null
+++ b/src/src/pages/Index.tsx
@@ -0,0 +1,585 @@
+import { useSeoMeta } from '@unhead/react';
+import { Link } from 'react-router-dom';
+import { Layout } from '@/components/Layout';
+import { SpotCard, SpotCardSkeleton } from '@/components/SpotCard';
+import { EventCard, EventCardSkeleton } from '@/components/EventCard';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { useSkateSpots } from '@/hooks/useSkateSpots';
+import { useUpcomingSkateEvents } from '@/hooks/useSkateEvents';
+import { useLabProfiles } from '@/hooks/useLabProfiles';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useTranslation } from '@/contexts/LanguageContext';
+import { genUserName } from '@/lib/genUserName';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import {
+  MapPin,
+  Calendar,
+  Plus,
+  ChevronRight,
+  Sparkles,
+  CheckCircle2,
+  GraduationCap,
+  Video,
+  Crown,
+} from 'lucide-react';
+import { FounderFollow } from '@/components/FounderFollow';
+import { SponsorSlot } from '@/components/SponsorSlot';
+
+function HeroSection() {
+  const { user } = useCurrentUser();
+  const { t } = useTranslation();
+
+  return (
+    <section className="relative overflow-hidden bg-black">
+      {/* Neon background glows */}
+      <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#ff0040] opacity-20 rounded-full blur-[150px]" />
+      <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-[#ccff00] opacity-15 rounded-full blur-[120px]" />
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] bg-[#ff6600] opacity-10 rounded-full blur-[100px]" />
+
+      <div className="relative container px-4 sm:px-6 md:px-8 py-16 sm:py-20 md:py-28">
+        <div className="max-w-4xl mx-auto text-center">
+          <div className="mb-8">
+            <div className="inline-block px-6 py-2 rounded-full border-2 border-[#ff0040]/50 bg-black/50 backdrop-blur-sm mb-6">
+              <span className="text-[#ff0040] font-bold uppercase tracking-wider text-sm">
+                <Sparkles className="inline h-4 w-4 mr-2" />
+                {t('home.tagline')}
+              </span>
+            </div>
+
+            <h1 className="text-4xl sm:text-5xl md:text-7xl lg:text-8xl font-black uppercase mb-6 leading-[0.9]" style={{
+              fontFamily: 'Impact, "Arial Black", sans-serif',
+              letterSpacing: '0.05em'
+            }}>
+              <span className="block gradient-text">{t('home.title')}</span>
+            </h1>
+
+            <p className="text-base sm:text-lg md:text-xl lg:text-2xl text-gray-200 mb-3 md:mb-4 max-w-2xl mx-auto leading-relaxed font-bold uppercase tracking-wide px-4">
+              {t('home.subtitle')}
+            </p>
+            <p className="text-sm md:text-base text-gray-400 max-w-xl mx-auto px-4 mb-8">
+              {t('home.description')}
+            </p>
+
+            <div className="space-y-3 mb-8">
+              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-yellow-500/20 border border-yellow-500/50">
+                <span className="text-yellow-400 font-bold text-sm uppercase">
+                  ⚠️ {t('home.betaWarning')}
+                </span>
+              </div>
+              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-500/20 border border-blue-500/50 ml-2">
+                <span className="text-blue-400 font-bold text-sm uppercase">
+                  📱 {t('home.pwaHint')}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 mb-6 px-4">
+            <Link to="/map" className="w-full sm:w-auto">
+              <Button
+                size="lg"
+                className="w-full sm:w-auto gap-2 bg-[#ff0040] hover:bg-[#ff0040]/90 text-white border-2 border-[#ff0040] shadow-[0_0_20px_rgba(255,0,64,0.5)] font-bold uppercase px-6 sm:px-8 py-4 sm:py-6 text-sm sm:text-base"
+              >
+                <MapPin className="h-4 w-4 sm:h-5 sm:w-5" />
+                {t('home.exploreMap')}
+              </Button>
+            </Link>
+            {user && (
+              <Link to="/create-spot" className="w-full sm:w-auto">
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="w-full sm:w-auto gap-2 border-2 border-[#ccff00] bg-transparent hover:bg-[#ccff00]/10 text-[#ccff00] shadow-[0_0_15px_rgba(204,255,0,0.3)] font-bold uppercase px-6 sm:px-8 py-4 sm:py-6 text-sm sm:text-base"
+                >
+                  <Plus className="h-4 w-4 sm:h-5 sm:w-5" />
+                  {t('home.addSpot')}
+                </Button>
+              </Link>
+            )}
+          </div>
+
+          {/* Login/Signup Area - Prominent for logged out users (desktop only, mobile has it in header) */}
+          {!user && (
+            <div className="px-4 mt-6 hidden md:block">
+              <div className="max-w-md mx-auto p-5 sm:p-6 rounded-2xl bg-black/80 backdrop-blur-lg border-2 border-[#ccff00]/50 shadow-[0_0_30px_rgba(204,255,0,0.15)]">
+                <p className="text-center text-gray-200 mb-5 text-sm sm:text-base font-medium">
+                  Join the community to add spots, create events & more
+                </p>
+                <LoginArea className="flex flex-row gap-3 w-full justify-center" />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function FeaturedSpots() {
+  const { data: spots, isLoading } = useSkateSpots(8);
+  const { t } = useTranslation();
+
+  return (
+    <section className="bg-black py-16 border-t border-[#ff0040]/30">
+      <div className="container px-4">
+        <div className="flex items-center justify-between mb-10">
+          <div>
+            <h2 className="text-3xl md:text-4xl font-black uppercase neon-red mb-2" style={{
+              fontFamily: 'Impact, "Arial Black", sans-serif',
+              letterSpacing: '0.05em'
+            }}>
+              {t('home.featuredSpots')}
+            </h2>
+            <p className="text-gray-400 uppercase text-sm font-bold tracking-wide">
+              {t('home.featuredSpotsDesc')}
+            </p>
+          </div>
+          <Link to="/map">
+            <Button variant="ghost" className="gap-2 text-[#ff0040] hover:text-[#ff0040]/80 hover:bg-[#ff0040]/10">
+              {t('common.viewAll')}
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </Link>
+        </div>
+
+        {isLoading ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 stagger-children">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <SpotCardSkeleton key={i} />
+            ))}
+          </div>
+        ) : spots && spots.length > 0 ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 stagger-children">
+            {spots.slice(0, 4).map((spot) => (
+              <SpotCard key={spot.id} spot={spot} />
+            ))}
+          </div>
+        ) : (
+          <Card className="border-2 border-dashed border-[#ff0040]/30 bg-black/50">
+            <CardContent className="py-12 text-center">
+              <MapPin className="h-12 w-12 mx-auto mb-4 text-[#ff0040]/50" />
+              <p className="text-gray-400 mb-4 uppercase font-bold tracking-wide">
+                {t('home.noSpotsYet')}
+              </p>
+              <Link to="/create-spot">
+                <Button className="gap-2 bg-[#ff0040] hover:bg-[#ff0040]/90 font-bold uppercase">
+                  <Plus className="h-4 w-4" />
+                  {t('home.addSpot')}
+                </Button>
+              </Link>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </section>
+  );
+}
+
+function UpcomingEvents() {
+  const { data: events, isLoading } = useUpcomingSkateEvents(4);
+  const { t } = useTranslation();
+
+  return (
+    <section className="bg-black py-16 border-t border-[#ccff00]/30">
+      <div className="container px-4">
+        <div className="flex items-center justify-between mb-10">
+          <div>
+            <h2 className="text-3xl md:text-4xl font-black uppercase neon-lime mb-2" style={{
+              fontFamily: 'Impact, "Arial Black", sans-serif',
+              letterSpacing: '0.05em'
+            }}>
+              {t('home.upcomingEvents')}
+            </h2>
+            <p className="text-gray-400 uppercase text-sm font-bold tracking-wide">
+              {t('home.upcomingEventsDesc')}
+            </p>
+          </div>
+          <Link to="/events">
+            <Button variant="ghost" className="gap-2 text-[#ccff00] hover:text-[#ccff00]/80 hover:bg-[#ccff00]/10">
+              {t('common.viewAll')}
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </Link>
+        </div>
+
+        {isLoading ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <EventCardSkeleton key={i} compact />
+            ))}
+          </div>
+        ) : events && events.length > 0 ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
+            {events.map((event) => (
+              <EventCard key={event.id} event={event} compact />
+            ))}
+          </div>
+        ) : (
+          <Card className="border-2 border-dashed border-[#ccff00]/30 bg-black/50">
+            <CardContent className="py-12 text-center">
+              <Calendar className="h-12 w-12 mx-auto mb-4 text-[#ccff00]/50" />
+              <p className="text-gray-400 mb-4 uppercase font-bold tracking-wide">
+                {t('home.noEventsYet')}
+              </p>
+              <Link to="/create-event">
+                <Button className="gap-2 bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold uppercase">
+                  <Plus className="h-4 w-4" />
+                  {t('home.createEvent')}
+                </Button>
+              </Link>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </section>
+  );
+}
+
+function TheLabSection() {
+  const { data: profiles, isLoading } = useLabProfiles(100);
+  const { t } = useTranslation();
+
+  // Get 2 coaches and 2 filmers
+  const coaches = profiles?.filter(p => p.profileType === 'coach').slice(0, 2) || [];
+  const filmers = profiles?.filter(p => p.profileType === 'filmer').slice(0, 2) || [];
+  const displayProfiles = [...coaches, ...filmers];
+
+  return (
+    <section className="bg-black py-16 border-t border-[#ff6600]/30">
+      <div className="container px-4">
+        <div className="flex items-center justify-between mb-10">
+          <div>
+            <h2 className="text-3xl md:text-4xl font-black uppercase mb-2" style={{
+              fontFamily: 'Impact, "Arial Black", sans-serif',
+              letterSpacing: '0.05em'
+            }}>
+              <span className="neon-red">THE</span> <span className="neon-orange">LAB</span>
+            </h2>
+            <p className="text-gray-400 uppercase text-sm font-bold tracking-wide">
+              {t('home.theLabDesc')}
+            </p>
+          </div>
+          <Link to="/lab">
+            <Button variant="ghost" className="gap-2 text-[#ff6600] hover:text-[#ff6600]/80 hover:bg-[#ff6600]/10">
+              {t('common.viewAll')}
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </Link>
+        </div>
+
+        {isLoading ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <Card key={i} className="bg-black/90 border-2 border-[#ff6600]/20">
+                <CardContent className="p-6">
+                  <div className="flex items-start gap-4">
+                    {/* Avatar skeleton */}
+                    <div className="h-16 w-16 rounded-full bg-gray-800 animate-pulse flex-shrink-0" />
+                    <div className="flex-1 min-w-0 space-y-3">
+                      {/* Name skeleton */}
+                      <div className="flex items-center gap-2">
+                        <div className="h-5 w-28 bg-gray-800 animate-pulse rounded" />
+                        <div className="h-5 w-5 bg-gray-800 animate-pulse rounded" />
+                      </div>
+                      {/* Location skeleton */}
+                      <div className="h-3 w-24 bg-gray-800 animate-pulse rounded" />
+                      {/* Bio skeleton */}
+                      <div className="space-y-1.5">
+                        <div className="h-3 w-full bg-gray-800 animate-pulse rounded" />
+                        <div className="h-3 w-3/4 bg-gray-800 animate-pulse rounded" />
+                      </div>
+                      {/* Skills skeleton */}
+                      <div className="flex gap-1.5">
+                        <div className="h-5 w-14 bg-gray-800 animate-pulse rounded-full" />
+                        <div className="h-5 w-16 bg-gray-800 animate-pulse rounded-full" />
+                        <div className="h-5 w-12 bg-gray-800 animate-pulse rounded-full" />
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : displayProfiles.length > 0 ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
+            {displayProfiles.map((profile) => (
+              <LabProfileCard key={profile.id} profile={profile} />
+            ))}
+          </div>
+        ) : (
+          <Card className="border-2 border-dashed border-[#ff6600]/30 bg-black/50">
+            <CardContent className="py-12 text-center">
+              <GraduationCap className="h-12 w-12 mx-auto mb-4 text-[#ff6600]/50" />
+              <p className="text-gray-400 mb-4 uppercase font-bold tracking-wide">
+                {t('lab.noCoaches')}
+              </p>
+              <div className="flex flex-col sm:flex-row gap-3 justify-center">
+                <Link to="/become-coach">
+                  <Button className="gap-2 bg-red-500 hover:bg-red-600 font-bold uppercase">
+                    <GraduationCap className="h-4 w-4" />
+                    {t('home.becomeCoach')}
+                  </Button>
+                </Link>
+                <Link to="/become-filmer">
+                  <Button className="gap-2 bg-orange-500 hover:bg-orange-600 font-bold uppercase">
+                    <Video className="h-4 w-4" />
+                    {t('home.becomeFilmer')}
+                  </Button>
+                </Link>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </section>
+  );
+}
+
+function LabProfileCard({ profile }: { profile: any }) {
+  const author = useAuthor(profile.pubkey);
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(profile.pubkey);
+  const avatar = profile.image || metadata?.picture;
+  
+  const isCoach = profile.profileType === 'coach';
+  const accentColor = isCoach ? '#ff0040' : '#ff6600';
+
+  return (
+    <Link to={`/coach/${profile.pubkey}/${profile.identifier}`}>
+      <Card className="bg-black/90 border-2 hover:shadow-2xl transition-all h-full backdrop-blur" style={{ 
+        borderColor: `${accentColor}40`,
+      }}>
+        <CardContent className="p-6">
+          <div className="flex items-start gap-4">
+            <Avatar className="h-16 w-16 border-2" style={{ borderColor: `${accentColor}50` }}>
+              <AvatarImage src={avatar} alt={displayName} />
+              <AvatarFallback className="text-lg font-bold" style={{ 
+                backgroundColor: `${accentColor}20`,
+                color: accentColor
+              }}>
+                {displayName.slice(0, 2).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2 mb-1">
+                <h3 className="font-black text-lg uppercase truncate" style={{ color: accentColor }}>
+                  {displayName}
+                </h3>
+                {isCoach ? (
+                  <GraduationCap className="h-5 w-5 flex-shrink-0" style={{ color: accentColor }} />
+                ) : (
+                  <Video className="h-5 w-5 flex-shrink-0" style={{ color: accentColor }} />
+                )}
+              </div>
+              
+              {profile.location && (
+                <p className="text-sm text-gray-400 flex items-center gap-1 mb-2">
+                  <MapPin className="h-3 w-3" style={{ color: accentColor }} />
+                  {profile.location}
+                </p>
+              )}
+
+              {profile.bio && (
+                <p className="text-sm text-gray-300 line-clamp-2 mb-3">
+                  {profile.bio}
+                </p>
+              )}
+
+              {profile.skills.length > 0 && (
+                <div className="flex flex-wrap gap-1">
+                  {profile.skills.slice(0, 3).map((skill: string) => (
+                    <Badge key={skill} variant="secondary" className="text-xs bg-gray-800 border-gray-700">
+                      {skill}
+                    </Badge>
+                  ))}
+                  {profile.skills.length > 3 && (
+                    <Badge variant="secondary" className="text-xs bg-gray-800 border-gray-700">
+                      +{profile.skills.length - 3}
+                    </Badge>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}
+
+function NewToNostrSection() {
+  const { t } = useTranslation();
+  const { user } = useCurrentUser();
+
+  // Don't show this section if user is already logged in
+  if (user) return null;
+
+  return (
+    <section className="bg-black py-12 md:py-20 border-t border-[#ccff00]/30">
+      <div className="container px-4">
+        <div className="relative overflow-hidden rounded-2xl border-2 border-[#ccff00]/50 bg-black/50 backdrop-blur">
+          {/* Neon glow */}
+          <div className="absolute inset-0 bg-[#ccff00]/5 blur-xl" />
+
+          <div className="relative py-12 md:py-16 px-4 md:px-12 text-center">
+            <h2 className="text-3xl md:text-5xl font-black uppercase mb-4 neon-lime" style={{
+              fontFamily: 'Impact, "Arial Black", sans-serif',
+              letterSpacing: '0.05em'
+            }}>
+              NEW HERE?
+            </h2>
+            <p className="text-gray-300 max-w-2xl mx-auto mb-6 md:mb-8 text-base md:text-lg px-4">
+              Create a free account to add spots, join events, connect with skaters, and become part of the community. No email required.
+            </p>
+            
+            {/* Founder Follow - prominent placement */}
+            <div className="flex items-center justify-center gap-6 mb-8">
+              <div className="flex flex-col items-center">
+                <FounderFollow size="lg" showBadge={true} />
+              </div>
+              <div className="text-left max-w-xs hidden sm:block">
+                <div className="flex items-center gap-2 text-[#ff6600] font-bold text-sm mb-1">
+                  <Crown className="h-4 w-4" />
+                  Follow the Founder
+                </div>
+                <p className="text-gray-400 text-xs">
+                  Hold the avatar for 3 seconds to follow and stay updated on new features and events!
+                </p>
+              </div>
+            </div>
+            
+            <Link to="/onboarding">
+              <Button size="lg" className="gap-2 bg-[#ccff00] text-black hover:bg-[#ccff00]/90 border-2 border-[#ccff00] shadow-[0_0_20px_rgba(204,255,0,0.5)] font-bold uppercase px-10 py-6 text-lg">
+                <CheckCircle2 className="h-6 w-6" />
+                Create Account
+              </Button>
+            </Link>
+            <p className="text-gray-500 text-xs mt-4">
+              Your account works across all apps in the network
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function CTASection() {
+  const { t } = useTranslation();
+
+  return (
+    <section className="bg-black py-20 border-t border-[#ff6600]/30">
+      <div className="container px-4">
+        <div className="relative overflow-hidden rounded-2xl border-2 border-[#ff6600]/50">
+          {/* Neon glows */}
+          <div className="absolute top-0 right-0 w-96 h-96 bg-[#ff0040] opacity-20 rounded-full blur-[120px]" />
+          <div className="absolute bottom-0 left-0 w-96 h-96 bg-[#ccff00] opacity-15 rounded-full blur-[100px]" />
+
+          <div className="relative py-16 px-6 md:px-12 text-center bg-black/50 backdrop-blur">
+            <h2 className="text-3xl md:text-5xl font-black uppercase mb-4 neon-orange" style={{
+              fontFamily: 'Impact, "Arial Black", sans-serif',
+              letterSpacing: '0.05em'
+            }}>
+              {t('home.readyToShare')}
+            </h2>
+            <p className="text-gray-300 max-w-2xl mx-auto mb-8 text-lg">
+              {t('home.readyToShareDesc')}
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+              <Link to="/create-spot">
+                <Button size="lg" className="gap-2 bg-[#ff0040] hover:bg-[#ff0040]/90 text-white border-2 border-[#ff0040] shadow-[0_0_20px_rgba(255,0,64,0.5)] font-bold uppercase px-8">
+                  <Plus className="h-5 w-5" />
+                  {t('home.addSpot')}
+                </Button>
+              </Link>
+              <Link to="/create-event">
+                <Button size="lg" variant="outline" className="gap-2 border-2 border-[#ccff00] bg-transparent hover:bg-[#ccff00]/10 text-[#ccff00] shadow-[0_0_15px_rgba(204,255,0,0.3)] font-bold uppercase px-8">
+                  <Calendar className="h-5 w-5" />
+                  {t('home.createEvent')}
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function Footer() {
+  const { t } = useTranslation();
+
+  return (
+    <footer className="border-t border-[#ff0040]/30 bg-black">
+      <div className="container px-4 py-10">
+        <div className="flex flex-col md:flex-row items-center justify-between gap-6">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-[#ff0040] to-[#ff6600] flex items-center justify-center shadow-[0_0_20px_rgba(255,0,64,0.5)]">
+              <MapPin className="h-5 w-5 text-white" />
+            </div>
+            <span className="font-black uppercase text-xl neon-red" style={{
+              fontFamily: 'Impact, "Arial Black", sans-serif',
+              textShadow: '0 0 10px #ff0040'
+            }}>SkateSpots</span>
+          </div>
+
+          <p className="text-sm text-gray-400 text-center uppercase tracking-wide">
+            Open Source • Community Owned • No Ads
+          </p>
+
+          <div className="flex items-center gap-6 text-sm">
+            <Link to="/faq" className="text-gray-400 hover:text-[#ff0040] transition-colors uppercase font-bold tracking-wide">
+              FAQ
+            </Link>
+            <Link to="/about" className="text-gray-400 hover:text-[#ff0040] transition-colors uppercase font-bold tracking-wide">
+              {t('nav.about')}
+            </Link>
+            <a
+              href="https://nostr.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-gray-400 hover:text-[#ccff00] transition-colors uppercase font-bold tracking-wide"
+            >
+              Nostr
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default function Index() {
+  useSeoMeta({
+    title: 'SkateSpots - Discover Skateboarding Locations Worldwide',
+    description:
+      'Find the best skateboarding spots, connect with fellow skaters, and discover events near you. Built on Nostr for true decentralization.',
+  });
+
+  // Platform sponsors - currently empty (invisible placeholder)
+  // When sponsors are added, pass them here: sponsors={[{name: "Vans", logo: "...", tier: "title"}]}
+  const platformSponsors = undefined;
+
+  return (
+    <Layout>
+      <HeroSection />
+      <FeaturedSpots />
+      <UpcomingEvents />
+      <TheLabSection />
+      <NewToNostrSection />
+      <CTASection />
+      {/* Sponsor slot - invisible until sponsors are added */}
+      <SponsorSlot 
+        size="banner" 
+        sponsors={platformSponsors} 
+        title="Platform Partners"
+      />
+      <Footer />
+    </Layout>
+  );
+}
diff --git a/src/src/pages/LabPage.tsx b/src/src/pages/LabPage.tsx
new file mode 100644
index 0000000..2f0d0b4
--- /dev/null
+++ b/src/src/pages/LabPage.tsx
@@ -0,0 +1,407 @@
+import { useState, useMemo } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { Link } from 'react-router-dom';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { TrustFilter, type TrustFilterLevel, filterByTrustLevel } from '@/components/TrustFilter';
+import { SortDropdown, type SortOption } from '@/components/SortDropdown';
+import { useLabProfiles, type LabProfile } from '@/hooks/useLabProfiles';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useBatchTrustScores } from '@/hooks/useBatchTrustScores';
+import { useTranslation } from '@/contexts/LanguageContext';
+import { genUserName } from '@/lib/genUserName';
+import { COACH_SKILL_LABELS, COACH_SKILL_DESCRIPTIONS, FILMING_SERVICE_LABELS, FILMING_SERVICE_DESCRIPTIONS, FILMING_SKILL_LABELS } from '@/lib/types';
+import { GraduationCap, Search, Plus, MapPin, Filter, Video } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const COACH_SKILL_ENTRIES = Object.entries(COACH_SKILL_LABELS);
+const FILMING_SERVICE_ENTRIES = Object.entries(FILMING_SERVICE_LABELS);
+
+export default function LabPage() {
+  const { t } = useTranslation();
+  
+  useSeoMeta({
+    title: 'The Lab - SkateSpots',
+    description: 'Find skateboarding coaches, filmers, and photographers.',
+  });
+
+  const { user } = useCurrentUser();
+  const { data: profiles, isLoading } = useLabProfiles(100);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedSkills, setSelectedSkills] = useState<string[]>([]);
+  const [serviceType, setServiceType] = useState<'coaching' | 'filming'>('coaching');
+  const [trustFilter, setTrustFilter] = useState<TrustFilterLevel>('all');
+  const [sortBy, setSortBy] = useState<SortOption>('recent');
+
+  // Fetch trust scores for all profiles
+  const profilePubkeys = useMemo(() => profiles?.map((p) => p.pubkey) || [], [profiles]);
+  const { data: trustScores } = useBatchTrustScores(profilePubkeys);
+
+  const getTrustScore = (pubkey: string) => trustScores?.get(pubkey);
+
+  const toggleSkill = (skill: string) => {
+    setSelectedSkills((prev) =>
+      prev.includes(skill) ? prev.filter((s) => s !== skill) : [...prev, skill]
+    );
+  };
+
+  const filteredProfiles = useMemo(() => {
+    if (!profiles) return [];
+
+    let filtered = profiles.filter((profile) => {
+      // Filter by service type
+      if (serviceType === 'coaching' && profile.profileType !== 'coach') return false;
+      if (serviceType === 'filming' && profile.profileType !== 'filmer') return false;
+
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase();
+        const matchesTitle = profile.title.toLowerCase().includes(query);
+        const matchesLocation = profile.location?.toLowerCase().includes(query);
+        const matchesBio = profile.bio?.toLowerCase().includes(query);
+        if (!matchesTitle && !matchesLocation && !matchesBio) return false;
+      }
+
+      if (selectedSkills.length > 0) {
+        const hasMatchingSkill = profile.skills.some((skill) => selectedSkills.includes(skill));
+        if (!hasMatchingSkill) return false;
+      }
+
+      return true;
+    });
+
+    // Apply trust filter
+    if (trustScores && trustFilter !== 'all') {
+      filtered = filterByTrustLevel(filtered, trustFilter, getTrustScore);
+    }
+
+    // Apply sorting
+    filtered.sort((a, b) => {
+      switch (sortBy) {
+        case 'trust': {
+          const scoreA = getTrustScore(a.pubkey) || 0;
+          const scoreB = getTrustScore(b.pubkey) || 0;
+          if (scoreB !== scoreA) return scoreB - scoreA; // Highest trust first
+          return b.createdAt - a.createdAt; // Then newest
+        }
+        case 'recent':
+        default:
+          return b.createdAt - a.createdAt; // Newest first
+      }
+    });
+
+    return filtered;
+  }, [profiles, searchQuery, selectedSkills, serviceType, trustFilter, trustScores, sortBy]);
+
+  return (
+    <Layout>
+      <div className="container px-4 py-12">
+        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-8">
+          <div>
+            <h1 className="text-4xl font-black uppercase mb-2 neon-header">
+              <span className="neon-red">THE</span> <span className="neon-orange">LAB</span>
+            </h1>
+            <p className="text-gray-400">{t('labPage.subtitle')}</p>
+          </div>
+          {user ? (
+            <div className="flex gap-2">
+              <Link to="/become-coach">
+                <Button className="bg-red-500 hover:bg-red-600 gap-2 uppercase font-black">
+                  <Plus className="h-4 w-4" />
+                  {t('labPage.offerCoaching')}
+                </Button>
+              </Link>
+              <Link to="/become-filmer">
+                <Button className="bg-orange-500 hover:bg-orange-600 gap-2 uppercase font-black">
+                  <Plus className="h-4 w-4" />
+                  {t('labPage.offerFilming')}
+                </Button>
+              </Link>
+            </div>
+          ) : (
+            <Badge variant="outline" className="border-yellow-500/50 text-yellow-400 px-3 py-1.5">
+              🔒 {t('labPage.loginToOffer')}
+            </Badge>
+          )}
+        </div>
+
+        {/* Service Type Filter */}
+        <div className="flex gap-2 mb-6">
+          <Button
+            onClick={() => {
+              setServiceType('coaching');
+              setSelectedSkills([]);
+            }}
+            variant={serviceType === 'coaching' ? 'default' : 'outline'}
+            className={cn(
+              'uppercase font-bold gap-2',
+              serviceType === 'coaching' ? 'bg-red-500 hover:bg-red-600' : 'border-gray-700'
+            )}
+          >
+            <GraduationCap className="h-4 w-4" />
+            {t('labPage.coachesTab')}
+          </Button>
+          <Button
+            onClick={() => {
+              setServiceType('filming');
+              setSelectedSkills([]);
+            }}
+            variant={serviceType === 'filming' ? 'default' : 'outline'}
+            className={cn(
+              'uppercase font-bold gap-2',
+              serviceType === 'filming' ? 'bg-orange-500 hover:bg-orange-600' : 'border-gray-700'
+            )}
+          >
+            <Video className="h-4 w-4" />
+            {t('labPage.filmersTab')}
+          </Button>
+        </div>
+
+        {/* Filters */}
+        <Card className="bg-gray-900 border-red-500/30 mb-8">
+          <CardContent className="p-6">
+            <div className="space-y-4">
+              <div className="flex items-center gap-2 mb-3">
+                <Filter className={`h-5 w-5 ${serviceType === 'filming' ? 'text-orange-500' : 'text-red-500'}`} />
+                <h3 className="font-black uppercase text-sm">
+                  {serviceType === 'coaching' && t('labPage.whatToLearn')}
+                  {serviceType === 'filming' && t('labPage.whatContent')}
+                </h3>
+              </div>
+              <p className="text-sm text-gray-400 mb-4">
+                {serviceType === 'coaching' && t('labPage.selectSkillsDesc')}
+                {serviceType === 'filming' && t('labPage.selectFilmingDesc')}
+              </p>
+
+              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2">
+                {/* Show coach skills when coaching */}
+                {serviceType === 'coaching' && COACH_SKILL_ENTRIES.map(([skill, label]) => (
+                  <button
+                    key={skill}
+                    onClick={() => toggleSkill(skill)}
+                    className={cn(
+                      'p-3 rounded-lg text-left transition-all border text-sm',
+                      selectedSkills.includes(skill)
+                        ? 'bg-red-500 text-white border-red-500'
+                        : 'bg-gray-800 hover:bg-gray-700 border-gray-700 text-gray-300'
+                    )}
+                  >
+                    <div className="font-bold uppercase text-xs mb-1">{label}</div>
+                    <div className="text-xs opacity-70 line-clamp-1">
+                      {COACH_SKILL_DESCRIPTIONS[skill]}
+                    </div>
+                  </button>
+                ))}
+                
+                {/* Show filming services when filming */}
+                {serviceType === 'filming' && FILMING_SERVICE_ENTRIES.map(([service, label]) => (
+                  <button
+                    key={service}
+                    onClick={() => toggleSkill(service)}
+                    className={cn(
+                      'p-3 rounded-lg text-left transition-all border text-sm',
+                      selectedSkills.includes(service)
+                        ? 'bg-orange-500 text-white border-orange-500'
+                        : 'bg-gray-800 hover:bg-gray-700 border-gray-700 text-gray-300'
+                    )}
+                  >
+                    <div className="font-bold uppercase text-xs mb-1">{label}</div>
+                    <div className="text-xs opacity-70 line-clamp-1">
+                      {FILMING_SERVICE_DESCRIPTIONS[service]}
+                    </div>
+                  </button>
+                ))}
+              </div>
+
+              <div className="flex flex-col sm:flex-row gap-3">
+                <div className="relative flex-1">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500" />
+                  <Input
+                    placeholder={t('labPage.searchPlaceholder')}
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="pl-9 bg-gray-800 border-gray-700"
+                  />
+                </div>
+                <div className="flex gap-2">
+                  <SortDropdown
+                    value={sortBy}
+                    onChange={setSortBy}
+                    contentType="coaches"
+                  />
+                  <TrustFilter
+                    value={trustFilter}
+                    onChange={setTrustFilter}
+                    compact
+                  />
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Coaches Grid */}
+        {isLoading ? (
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <Card key={i} className="bg-black/90 border-2 border-[#ccff00]/20">
+                <CardContent className="p-6">
+                  {/* Name skeleton */}
+                  <div className="mb-4 pb-3 border-b border-[#ccff00]/20">
+                    <div className="flex items-center gap-2 mb-1">
+                      <div className="h-6 w-32 bg-gray-800 animate-pulse rounded" />
+                      <div className="h-5 w-5 bg-gray-800 animate-pulse rounded" />
+                    </div>
+                  </div>
+                  {/* Avatar and info */}
+                  <div className="flex items-start gap-4 mb-4">
+                    <div className="h-16 w-16 bg-gray-800 animate-pulse rounded-full" />
+                    <div className="flex-1 space-y-2">
+                      <div className="h-4 w-24 bg-gray-800 animate-pulse rounded" />
+                      <div className="h-3 w-32 bg-gray-800 animate-pulse rounded" />
+                    </div>
+                  </div>
+                  {/* Bio skeleton */}
+                  <div className="space-y-2 mb-4">
+                    <div className="h-3 w-full bg-gray-800 animate-pulse rounded" />
+                    <div className="h-3 w-4/5 bg-gray-800 animate-pulse rounded" />
+                  </div>
+                  {/* Skills skeleton */}
+                  <div className="flex gap-2">
+                    <div className="h-5 w-16 bg-gray-800 animate-pulse rounded-full" />
+                    <div className="h-5 w-20 bg-gray-800 animate-pulse rounded-full" />
+                    <div className="h-5 w-14 bg-gray-800 animate-pulse rounded-full" />
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : filteredProfiles.length > 0 ? (
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {filteredProfiles.map((profile) => (
+              <ProfileCard key={profile.id} profile={profile} />
+            ))}
+          </div>
+        ) : (
+          <Card className="bg-gray-900 border-dashed border-gray-700">
+            <CardContent className="py-16 text-center">
+              <GraduationCap className="h-16 w-16 mx-auto mb-4 text-gray-600" />
+              <h3 className="text-xl font-bold mb-2">{t('labPage.noServicesYet')}</h3>
+              <p className="text-gray-400 mb-6">
+                {t('labPage.beFirstToOffer')}
+              </p>
+              {user && (
+                <div className="flex gap-3 justify-center">
+                  <Link to="/become-coach">
+                    <Button className="bg-red-500 hover:bg-red-600 gap-2 uppercase font-black">
+                      <Plus className="h-4 w-4" />
+                      {t('labPage.offerCoaching')}
+                    </Button>
+                  </Link>
+                  <Link to="/become-filmer">
+                    <Button className="bg-orange-500 hover:bg-orange-600 gap-2 uppercase font-black">
+                      <Plus className="h-4 w-4" />
+                      {t('labPage.offerFilming')}
+                    </Button>
+                  </Link>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </Layout>
+  );
+}
+
+function ProfileCard({ profile }: { profile: LabProfile }) {
+  const author = useAuthor(profile.pubkey);
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(profile.pubkey);
+  const avatar = profile.image || metadata?.picture;
+  const nip05 = metadata?.nip05;
+
+  const isCoach = profile.profileType === 'coach';
+  const isFilmer = profile.profileType === 'filmer';
+
+  // Get skill labels based on profile type
+  const getSkillLabel = (skill: string) => {
+    if (isCoach) return COACH_SKILL_LABELS[skill] || skill;
+    if (isFilmer) {
+      return FILMING_SERVICE_LABELS[skill] || FILMING_SKILL_LABELS[skill] || skill;
+    }
+    return skill;
+  };
+
+  return (
+    <Link to={`/coach/${profile.pubkey}/${profile.identifier}`}>
+      <Card className="bg-black/90 border-2 border-[#ccff00]/20 hover:border-[#ccff00]/60 hover:shadow-2xl hover:shadow-[#ccff00]/20 transition-all h-full backdrop-blur">
+        <CardContent className="p-6">
+          {/* Name Display at Top */}
+          <div className="mb-4 pb-3 border-b border-[#ccff00]/20">
+            <div className="flex items-center gap-2 mb-1">
+              <h3 className="font-black text-xl uppercase text-white">{displayName}</h3>
+              {isCoach && <GraduationCap className="h-5 w-5 text-red-500" />}
+              {isFilmer && <Video className="h-5 w-5 text-orange-500" />}
+            </div>
+            {nip05 && (
+              <div className="flex items-center gap-1 text-xs">
+                <div className="w-2 h-2 rounded-full bg-[#ccff00]" />
+                <span className="text-[#ccff00] font-bold">{nip05}</span>
+              </div>
+            )}
+          </div>
+
+          <div className="flex items-start gap-4 mb-4">
+            <Avatar className="h-16 w-16 border-2 border-[#ccff00]/30">
+              <AvatarImage src={avatar} alt={profile.title} />
+              <AvatarFallback className="bg-[#ccff00]/20 text-[#ccff00] text-lg font-bold">
+                {displayName.slice(0, 2).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex-1 min-w-0">
+              <h4 className="font-bold text-gray-300 mb-1 truncate">{profile.title}</h4>
+              {profile.location && (
+                <p className="text-sm text-gray-400 flex items-center gap-1">
+                  <MapPin className="h-3 w-3 text-[#ff0040]" />
+                  {profile.location}
+                </p>
+              )}
+              {profile.experience && (
+                <p className="text-xs text-gray-500 mt-1">{profile.experience} years experience</p>
+              )}
+            </div>
+          </div>
+
+          {profile.skills.length > 0 && (
+            <div className="flex flex-wrap gap-1 mb-3">
+              {profile.skills.slice(0, 3).map((skill: string) => (
+                <Badge key={skill} variant="secondary" className="text-xs bg-gray-800 border-gray-700">
+                  {getSkillLabel(skill)}
+                </Badge>
+              ))}
+              {profile.skills.length > 3 && (
+                <Badge variant="secondary" className="text-xs bg-gray-800 border-gray-700">
+                  +{profile.skills.length - 3}
+                </Badge>
+              )}
+            </div>
+          )}
+
+          {profile.bio && (
+            <p className="text-sm text-gray-400 line-clamp-2">{profile.bio}</p>
+          )}
+
+          {profile.rate && (
+            <p className="text-xs text-orange-400 mt-3 font-bold">💰 {profile.rate}</p>
+          )}
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}
+
diff --git a/src/src/pages/MapPage.tsx b/src/src/pages/MapPage.tsx
new file mode 100644
index 0000000..6f78213
--- /dev/null
+++ b/src/src/pages/MapPage.tsx
@@ -0,0 +1,1170 @@
+import { useState, useMemo, useEffect } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import { Layout } from '@/components/Layout';
+import { SpotMap } from '@/components/SpotMap';
+import { SpotCard, SpotCardSkeleton } from '@/components/SpotCard';
+import { WeatherToggle } from '@/components/WeatherToggle';
+import { TrustFilter, type TrustFilterLevel, filterByTrustLevel } from '@/components/TrustFilter';
+import { SortDropdown, type SortOption, calculateDistance } from '@/components/SortDropdown';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { Card, CardContent } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Progress } from '@/components/ui/progress';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { LoginArea } from '@/components/auth/LoginArea';
+
+import { useSkateSpots } from '@/hooks/useSkateSpots';
+import { useShops } from '@/hooks/useShops';
+import { useMarketplaceItems } from '@/hooks/useMarketplace';
+import { useTours } from '@/hooks/useTours';
+import { useBtcMapPlaces } from '@/hooks/useBtcMapPlaces';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useBatchTrustScores } from '@/hooks/useBatchTrustScores';
+import { useMultipleSpotWeather } from '@/hooks/useSpotWeather';
+import { useComments } from '@/hooks/useComments';
+import { useStash, STASH_CATEGORIES, CONDITION_LABELS, RARITY_TIERS, type StashItem } from '@/hooks/useStash';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useSatsToUsd } from '@/hooks/useExchangeRate';
+import { genUserName } from '@/lib/genUserName';
+import { useTranslation } from '@/contexts/LanguageContext';
+import { SPOT_CATEGORIES } from '@/lib/types';
+import type { SkateSpot, SkateShop, SkateTour } from '@/lib/types';
+import ngeohash from 'ngeohash';
+import {
+  Search,
+  Plus,
+  List,
+  Map,
+  X,
+  ShoppingBag,
+  Route,
+  Backpack,
+  Package,
+  Target,
+  Star,
+  Zap,
+  Lock,
+  Users,
+  Globe,
+  ArrowRightLeft,
+  Crown,
+  Shield,
+  Trash2,
+  AlertTriangle,
+  Bitcoin,
+  SlidersHorizontal,
+  Check,
+  Camera,
+} from 'lucide-react';
+import { CameraCapture } from '@/components/CameraCapture';
+import { useUploadFile } from '@/hooks/useUploadFile';
+import { useToast } from '@/hooks/useToast';
+import { cn } from '@/lib/utils';
+
+type ViewMode = 'map' | 'list';
+
+// Compact stash item card for the drawer
+function MiniStashCard({ item, onDelete }: { item: StashItem; onDelete: () => void }) {
+  const category = STASH_CATEGORIES[item.category];
+  const condition = CONDITION_LABELS[item.condition];
+  const rarity = (item.rarity || category.rarity) as keyof typeof RARITY_TIERS;
+  const rarityTier = RARITY_TIERS[rarity];
+  const isWishlist = item.itemType === 'wtb';
+  const hasImage = item.images && item.images.length > 0;
+
+  return (
+    <div className={cn(
+      'relative p-3 rounded-lg border-2 bg-black/60 transition-all hover:bg-black/80',
+      isWishlist ? 'border-cyan-500/40' : `border-${rarity === 'common' ? 'gray' : rarity === 'uncommon' ? 'green' : rarity === 'rare' ? 'blue' : rarity === 'epic' ? 'purple' : 'yellow'}-500/40`
+    )} style={{ borderColor: rarityTier.color + '40' }}>
+      {/* Wishlist badge */}
+      {isWishlist && (
+        <Badge className="absolute -top-2 -left-1 bg-cyan-500 text-black text-[9px] px-1.5 py-0">
+          <Target className="h-2.5 w-2.5 mr-0.5" />
+          Wishlist
+        </Badge>
+      )}
+      
+      <div className="flex items-start gap-2">
+        {/* Image or emoji */}
+        {hasImage ? (
+          <div className="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0 border border-white/10">
+            <img src={item.images![0]} alt={item.title} className="w-full h-full object-cover" />
+          </div>
+        ) : (
+          <span className="text-2xl">{category.emoji}</span>
+        )}
+        <div className="flex-1 min-w-0">
+          <h4 className="font-bold text-sm text-white truncate">{item.title}</h4>
+          <p className="text-[10px] text-muted-foreground">
+            {item.brand && <span>{item.brand} • </span>}
+            {item.size && <span>{item.size}</span>}
+          </p>
+          <div className="flex items-center gap-2 mt-1">
+            {!isWishlist && (
+              <div className="flex items-center gap-0.5">
+                {Array.from({ length: 5 }).map((_, i) => (
+                  <Star 
+                    key={i}
+                    className={cn(
+                      'h-2.5 w-2.5',
+                      i < condition.stars ? 'fill-yellow-400 text-yellow-400' : 'text-gray-700'
+                    )}
+                  />
+                ))}
+              </div>
+            )}
+            {(item.minPrice || item.maxPrice) && (
+              <span className="text-[10px] text-amber-400 flex items-center gap-0.5">
+                <Zap className="h-2.5 w-2.5" />
+                {isWishlist ? `≤${item.maxPrice?.toLocaleString()}` : item.minPrice?.toLocaleString()}
+              </span>
+            )}
+          </div>
+        </div>
+        <div className="flex flex-col items-end gap-1">
+          <Badge 
+            variant="outline" 
+            className="text-[8px] px-1 py-0"
+            style={{ borderColor: rarityTier.color, color: rarityTier.color }}
+          >
+            {rarityTier.label}
+          </Badge>
+          <button 
+            onClick={onDelete}
+            className="p-1 rounded hover:bg-red-500/20 text-gray-500 hover:text-red-400 transition-colors"
+          >
+            <Trash2 className="h-3 w-3" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Stash drawer component
+function StashDrawer() {
+  const { user } = useCurrentUser();
+  const { items, stats, isLoading, addItem, removeItem, isEncryptionAvailable } = useStash();
+  const author = useAuthor(user?.pubkey || '');
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(user?.pubkey || '');
+  const avatar = metadata?.picture;
+  const usdValue = useSatsToUsd(stats.totalValue);
+  
+  const stashItems = items.filter(i => i.itemType !== 'wtb');
+  const wishlistItems = items.filter(i => i.itemType === 'wtb');
+
+  // Not logged in
+  if (!user) {
+    return (
+      <div className="p-6 text-center">
+        <Backpack className="h-12 w-12 mx-auto mb-4 text-[#ff6600]/50" />
+        <h3 className="font-bold text-lg mb-2">Your Private Stash</h3>
+        <p className="text-sm text-muted-foreground mb-4">
+          Track your gear, set prices, and find trades with other skaters.
+        </p>
+        <LoginArea className="justify-center" />
+      </div>
+    );
+  }
+
+  // No encryption
+  if (!isEncryptionAvailable) {
+    return (
+      <div className="p-6 text-center">
+        <AlertTriangle className="h-12 w-12 mx-auto mb-4 text-yellow-500" />
+        <h3 className="font-bold text-lg mb-2">Encryption Required</h3>
+        <p className="text-sm text-muted-foreground mb-4">
+          Use a signer with NIP-44 support (Alby, nos2x, Amber).
+        </p>
+        <Link to="/signers">
+          <Button variant="outline" size="sm">Learn More</Button>
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Profile header */}
+      <div className="p-4 bg-gradient-to-r from-[#ff6600]/20 to-[#ff0040]/20 border-b border-[#ff6600]/30">
+        <div className="flex items-center gap-3">
+          <Avatar className="h-12 w-12 border-2 border-[#ff6600]/50">
+            <AvatarImage src={avatar} alt={displayName} />
+            <AvatarFallback className="bg-[#ff6600]/20 text-[#ff6600] font-bold">
+              {displayName.slice(0, 2).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex-1 min-w-0">
+            <h3 className="font-bold text-white truncate">{displayName}</h3>
+            <p className="text-xs text-muted-foreground">{stats.total} items</p>
+          </div>
+          <div className="text-right">
+            <div className="flex items-center gap-1 text-amber-400">
+              <Zap className="h-3.5 w-3.5" />
+              <span className="font-bold text-sm">
+                {stats.totalValue > 999 ? Math.floor(stats.totalValue / 1000) + 'k' : stats.totalValue}
+              </span>
+            </div>
+            <p className="text-[10px] text-muted-foreground">
+              {usdValue ? `~$${usdValue.toFixed(0)}` : 'sats'}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Quick stats */}
+      <div className="grid grid-cols-3 gap-2 p-3 border-b border-white/10">
+        <div className="text-center p-2 rounded bg-black/40">
+          <div className="text-lg font-black text-[#ff0040]">{stashItems.length}</div>
+          <div className="text-[9px] text-muted-foreground uppercase">Items</div>
+        </div>
+        <div className="text-center p-2 rounded bg-black/40">
+          <div className="text-lg font-black text-cyan-400">{wishlistItems.length}</div>
+          <div className="text-[9px] text-muted-foreground uppercase">Wishlist</div>
+        </div>
+        <div className="text-center p-2 rounded bg-black/40">
+          <div className="text-lg font-black text-purple-400">{Object.keys(stats.byCategory).length}</div>
+          <div className="text-[9px] text-muted-foreground uppercase">Types</div>
+        </div>
+      </div>
+
+      {/* Items list */}
+      <div className="flex-1 overflow-auto p-3 space-y-2">
+        {isLoading ? (
+          Array.from({ length: 3 }).map((_, i) => (
+            <Skeleton key={i} className="h-20 w-full bg-white/5" />
+          ))
+        ) : items.length === 0 ? (
+          <div className="text-center py-8">
+            <Package className="h-10 w-10 mx-auto mb-3 text-muted-foreground/30" />
+            <p className="text-sm text-muted-foreground mb-3">Your stash is empty</p>
+            <Link to="/stash">
+              <Button size="sm" className="bg-[#ff6600] hover:bg-[#ff6600]/90">
+                <Plus className="h-3.5 w-3.5 mr-1" />
+                Add First Item
+              </Button>
+            </Link>
+          </div>
+        ) : (
+          <>
+            {/* Wishlist items first */}
+            {wishlistItems.length > 0 && (
+              <div className="mb-3">
+                <h4 className="text-[10px] font-bold uppercase text-cyan-400 mb-2 flex items-center gap-1">
+                  <Target className="h-3 w-3" />
+                  Wishlist ({wishlistItems.length})
+                </h4>
+                {wishlistItems.slice(0, 3).map(item => (
+                  <MiniStashCard 
+                    key={item.id} 
+                    item={item} 
+                    onDelete={() => removeItem.mutate(item.id)}
+                  />
+                ))}
+              </div>
+            )}
+            
+            {/* Stash items */}
+            {stashItems.length > 0 && (
+              <div>
+                <h4 className="text-[10px] font-bold uppercase text-[#ff6600] mb-2 flex items-center gap-1">
+                  <Package className="h-3 w-3" />
+                  My Gear ({stashItems.length})
+                </h4>
+                <div className="space-y-2">
+                  {stashItems.slice(0, 5).map(item => (
+                    <MiniStashCard 
+                      key={item.id} 
+                      item={item} 
+                      onDelete={() => removeItem.mutate(item.id)}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Footer actions */}
+      <div className="p-3 border-t border-white/10 space-y-2">
+        <Link to="/stash" className="block">
+          <Button className="w-full bg-gradient-to-r from-[#ff6600] to-[#ff0040] hover:opacity-90 font-bold">
+            <Backpack className="h-4 w-4 mr-2" />
+            Open Full Stash
+          </Button>
+        </Link>
+        <div className="flex gap-2">
+          <Link to="/stash" className="flex-1">
+            <Button variant="outline" size="sm" className="w-full border-[#ff6600]/50 text-[#ff6600] hover:bg-[#ff6600]/10">
+              <Plus className="h-3.5 w-3.5 mr-1" />
+              Add Item
+            </Button>
+          </Link>
+          <Link to="/stash" className="flex-1">
+            <Button variant="outline" size="sm" className="w-full border-cyan-500/50 text-cyan-400 hover:bg-cyan-500/10">
+              <Target className="h-3.5 w-3.5 mr-1" />
+              Wishlist
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function MapPage() {
+  const { t } = useTranslation();
+  
+  useSeoMeta({
+    title: 'Skate Spots Map - SkateSpots',
+    description: 'Explore skateboarding spots around the world on our interactive map.',
+  });
+
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { user } = useCurrentUser();
+  const { data: spots, isLoading: spotsLoading } = useSkateSpots(200);
+  const { data: shops, isLoading: shopsLoading } = useShops(200);
+  const { data: marketplaceItems, isLoading: marketplaceLoading } = useMarketplaceItems(200);
+  const { data: tours, isLoading: toursLoading } = useTours(100);
+
+  // Check if coming with ?view=gear to focus on marketplace
+  const viewParam = searchParams.get('view');
+  const focusGear = viewParam === 'gear';
+
+  const [viewMode, setViewMode] = useState<ViewMode>('map');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+  const [selectedSpot, setSelectedSpot] = useState<SkateSpot | null>(null);
+  const [weatherEnabled, setWeatherEnabled] = useState(false);
+  const [weatherFilter, setWeatherFilter] = useState<'all' | 'good' | 'perfect'>('all');
+  const [trustFilter, setTrustFilter] = useState<TrustFilterLevel>('all');
+  const [sortBy, setSortBy] = useState<SortOption>('recent');
+  const [userLocation, setUserLocation] = useState<{lat: number; lon: number} | null>(null);
+  
+  // Map entity type filters - if ?view=gear, only show gear initially
+  const [showSpots, setShowSpots] = useState(!focusGear);
+  const [showShops, setShowShops] = useState(!focusGear);
+  const [showGear, setShowGear] = useState(true);
+  const [showTours, setShowTours] = useState(!focusGear);
+  const [showBtcMap, setShowBtcMap] = useState(false);
+  
+  // Mobile filters sheet
+  const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
+  
+  // Quick camera capture
+  const [showQuickCamera, setShowQuickCamera] = useState(false);
+  const { mutateAsync: uploadFile, isPending: isUploadingQuickPhoto } = useUploadFile();
+  const { toast } = useToast();
+  
+  // BTC Map center for fetching places
+  const [mapCenter, setMapCenter] = useState<{ lat: number; lon: number }>({ lat: 40.7128, lon: -74.006 });
+  
+  const categoryKeys = Object.keys(SPOT_CATEGORIES);
+
+  // Fetch BTC Map places when enabled
+  const { data: btcMapPlaces, isLoading: btcMapLoading, error: btcMapError } = useBtcMapPlaces({
+    lat: mapCenter.lat,
+    lon: mapCenter.lon,
+    radiusKm: 50, // 50km radius
+    enabled: showBtcMap,
+  });
+
+  // Debug logging for BTC Map
+  useEffect(() => {
+    if (showBtcMap) {
+      console.log('[MapPage] BTC Map enabled, center:', mapCenter, 'loading:', btcMapLoading, 'places:', btcMapPlaces?.length, 'error:', btcMapError);
+    }
+  }, [showBtcMap, mapCenter, btcMapLoading, btcMapPlaces, btcMapError]);
+
+  const isLoading = spotsLoading || shopsLoading || marketplaceLoading || toursLoading;
+
+  // Get user's location for proximity sorting
+  useMemo(() => {
+    if (sortBy === 'proximity' && !userLocation) {
+      navigator.geolocation?.getCurrentPosition(
+        (position) => {
+          setUserLocation({
+            lat: position.coords.latitude,
+            lon: position.coords.longitude,
+          });
+          console.log('[MapPage] User location:', position.coords);
+        },
+        (error) => {
+          console.warn('[MapPage] Geolocation error:', error);
+        }
+      );
+    }
+  }, [sortBy, userLocation]);
+
+  // Combine spots and shops into unified list for map display
+  const allLocations = useMemo(() => {
+    const spotList = (spots || []).map(spot => ({ ...spot, isShop: false }));
+    const shopList = (shops || []).map(shop => ({
+      ...shop,
+      title: shop.name,
+      types: ['shop' as const],
+      isShop: true,
+      accessType: undefined,
+      contactInfo: undefined,
+    }));
+    return [...spotList, ...shopList];
+  }, [spots, shops]);
+
+  // Fetch trust scores for all creators
+  const locationPubkeys = useMemo(() => allLocations.map((l) => l.pubkey), [allLocations]);
+  const { data: trustScores } = useBatchTrustScores(locationPubkeys);
+
+  const getTrustScore = (pubkey: string) => trustScores?.get(pubkey);
+
+  // Fetch comments for popularity sorting
+  const spotIds = useMemo(() => allLocations.map((l) => l.event.id), [allLocations]);
+  const { data: allComments } = useComments(spotIds);
+
+  const getCommentCount = (eventId: string) => {
+    return allComments?.filter((c) => {
+      const eTag = c.tags.find(([tag]) => tag === 'e')?.[1];
+      return eTag === eventId;
+    }).length || 0;
+  };
+
+  // Get geohashes for weather fetching (only non-shop spots)
+  const spotGeohashes = useMemo(() => {
+    const geohashes = allLocations
+      .filter(spot => !spot.isShop && spot.geohash)
+      .map(spot => spot.geohash);
+
+    console.log('[MapPage] Spot geohashes:', geohashes);
+    console.log('[MapPage] Weather enabled:', weatherEnabled);
+    return geohashes;
+  }, [allLocations]);
+
+  // Fetch weather data for all spots
+  const { data: weatherData, isLoading: weatherLoading } = useMultipleSpotWeather(
+    spotGeohashes,
+    weatherEnabled
+  );
+
+  const handleMapClick = (lat: number, lng: number) => {
+    if (!user) return;
+    // Navigate to create spot with coordinates pre-filled
+    navigate(`/create-spot?lat=${lat.toFixed(6)}&lng=${lng.toFixed(6)}`);
+  };
+
+  // Handle quick camera capture - upload and navigate to create spot
+  const handleQuickCameraCapture = async (file: File) => {
+    try {
+      const tags = await uploadFile(file);
+      const url = tags[0]?.[1];
+      if (url) {
+        setShowQuickCamera(false);
+        // Store the captured image URL in sessionStorage for the create spot page
+        sessionStorage.setItem('quickCaptureImage', url);
+        // Get current location and navigate to create spot
+        if (navigator.geolocation) {
+          navigator.geolocation.getCurrentPosition(
+            (position) => {
+              navigate(`/create-spot?lat=${position.coords.latitude.toFixed(6)}&lng=${position.coords.longitude.toFixed(6)}&quickCapture=true`);
+            },
+            () => {
+              // If geolocation fails, still navigate but without coords
+              navigate('/create-spot?quickCapture=true');
+            }
+          );
+        } else {
+          navigate('/create-spot?quickCapture=true');
+        }
+        toast({
+          title: 'Photo captured!',
+          description: 'Now add the spot details.',
+        });
+      }
+    } catch (error) {
+      toast({
+        title: 'Upload failed',
+        description: error instanceof Error ? error.message : 'Failed to upload photo',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  // Filter combined spots and shops
+  const filteredSpots = useMemo(() => {
+    let filtered = allLocations.filter((item) => {
+      // Entity type filter (showSpots/showShops toggles)
+      if (item.isShop && !showShops) return false;
+      if (!item.isShop && !showSpots) return false;
+
+      // Search filter
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase();
+        const matchesTitle = item.title.toLowerCase().includes(query);
+        const matchesLocation = item.location?.toLowerCase().includes(query);
+        const matchesDescription = item.description?.toLowerCase().includes(query);
+        if (!matchesTitle && !matchesLocation && !matchesDescription) {
+          return false;
+        }
+      }
+
+      // Category filter
+      if (selectedCategories.length > 0) {
+        const hasMatchingCategory = item.types.some((type) =>
+          selectedCategories.includes(type)
+        );
+        if (!hasMatchingCategory) return false;
+      }
+      
+      // Weather filter (only applies when weather is enabled AND filter is not 'all')
+      if (weatherEnabled && weatherFilter !== 'all' && weatherData && !item.isShop && item.geohash) {
+        const spotWeather = weatherData.get(item.geohash);
+        if (spotWeather) {
+          if (weatherFilter === 'perfect' && spotWeather.skateability.score < 85) {
+            return false;
+          }
+          if (weatherFilter === 'good' && spotWeather.skateability.score < 70) {
+            return false;
+          }
+        }
+      }
+
+      return true;
+    });
+
+    // Apply trust filter
+    if (trustScores && trustFilter !== 'all') {
+      filtered = filterByTrustLevel(filtered, trustFilter, getTrustScore);
+    }
+
+    // Apply sorting
+    filtered.sort((a, b) => {
+      switch (sortBy) {
+        case 'trust': {
+          const scoreA = getTrustScore(a.pubkey) || 0;
+          const scoreB = getTrustScore(b.pubkey) || 0;
+          if (scoreB !== scoreA) return scoreB - scoreA; // Highest trust first
+          return b.event.created_at - a.event.created_at; // Then newest
+        }
+        case 'proximity': {
+          if (!userLocation || !a.geohash || !b.geohash) return 0;
+          const posA = ngeohash.decode(a.geohash);
+          const posB = ngeohash.decode(b.geohash);
+          const distA = calculateDistance(userLocation.lat, userLocation.lon, posA.latitude, posA.longitude);
+          const distB = calculateDistance(userLocation.lat, userLocation.lon, posB.latitude, posB.longitude);
+          return distA - distB; // Closest first
+        }
+        case 'popular': {
+          const commentsA = getCommentCount(a.event.id);
+          const commentsB = getCommentCount(b.event.id);
+          if (commentsB !== commentsA) return commentsB - commentsA; // Most comments first
+          return b.event.created_at - a.event.created_at;
+        }
+        case 'recent':
+        default:
+          return b.event.created_at - a.event.created_at; // Newest first
+      }
+    });
+
+    return filtered;
+  }, [allLocations, searchQuery, selectedCategories, weatherEnabled, weatherData, weatherFilter, showSpots, showShops, trustFilter, trustScores, sortBy, userLocation, allComments]);
+
+  const toggleCategory = (category: string) => {
+    setSelectedCategories((prev) =>
+      prev.includes(category)
+        ? prev.filter((c) => c !== category)
+        : [...prev, category]
+    );
+  };
+
+  const clearFilters = () => {
+    setSearchQuery('');
+    setSelectedCategories([]);
+    setWeatherFilter('all');
+    setTrustFilter('all');
+    setSortBy('recent');
+  };
+
+  const hasActiveFilters = searchQuery || selectedCategories.length > 0 || weatherFilter !== 'all' || trustFilter !== 'all' || sortBy !== 'recent';
+
+  // Count active layer filters for mobile badge
+  const activeLayerCount = [showSpots, showShops, showGear, showTours, showBtcMap].filter(Boolean).length;
+  const activeCategoryCount = selectedCategories.length;
+  const totalActiveFilters = activeCategoryCount + (trustFilter !== 'all' ? 1 : 0) + (sortBy !== 'recent' ? 1 : 0);
+
+  return (
+    <Layout>
+      {/* Account for mobile header (56px) + bottom nav (~72px+safe-area) on mobile, desktop header (64px) only on desktop */}
+      {/* Using 100dvh for mobile to handle iOS Safari URL bar correctly */}
+      <div className="h-[calc(100dvh-3.5rem-72px)] md:h-[calc(100vh-4rem)] flex flex-col">
+        {/* Toolbar */}
+        <div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+          <div className="container px-3 sm:px-4 py-2 sm:py-3">
+            {/* Row 1: Search + View Toggle + Filters (mobile) */}
+            <div className="flex items-center gap-2">
+              {/* Search */}
+              <div className="relative flex-1 min-w-0">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder={t('mapPage.searchPlaceholder')}
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-9 h-10"
+                />
+              </div>
+
+              {/* View toggle - compact on mobile */}
+              <div className="flex items-center rounded-lg border bg-muted p-0.5 flex-shrink-0">
+                <Button
+                  variant={viewMode === 'map' ? 'default' : 'ghost'}
+                  size="sm"
+                  className="h-9 w-9 sm:w-auto sm:px-3 p-0"
+                  onClick={() => setViewMode('map')}
+                >
+                  <Map className="h-4 w-4" />
+                  <span className="hidden sm:inline ml-2">{t('mapPage.mapView')}</span>
+                </Button>
+                <Button
+                  variant={viewMode === 'list' ? 'default' : 'ghost'}
+                  size="sm"
+                  className="h-9 w-9 sm:w-auto sm:px-3 p-0"
+                  onClick={() => setViewMode('list')}
+                >
+                  <List className="h-4 w-4" />
+                  <span className="hidden sm:inline ml-2">{t('mapPage.listView')}</span>
+                </Button>
+              </div>
+
+              {/* Mobile: Filters button that opens sheet */}
+              <Sheet open={mobileFiltersOpen} onOpenChange={setMobileFiltersOpen}>
+                <SheetTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-10 px-3 gap-2 md:hidden flex-shrink-0 relative"
+                  >
+                    <SlidersHorizontal className="h-4 w-4" />
+                    <span className="sr-only">Filters</span>
+                    {totalActiveFilters > 0 && (
+                      <span className="absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 text-[10px] font-bold bg-[#ff0040] text-white rounded-full flex items-center justify-center">
+                        {totalActiveFilters}
+                      </span>
+                    )}
+                  </Button>
+                </SheetTrigger>
+                <SheetContent side="bottom" className="h-[70vh] max-h-[600px] rounded-t-2xl px-4">
+                  <SheetHeader className="pb-2">
+                    <SheetTitle className="flex items-center justify-between text-base">
+                      <span>Filters</span>
+                      {hasActiveFilters && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="text-red-400 hover:text-red-300 h-8 px-2"
+                          onClick={() => {
+                            clearFilters();
+                          }}
+                        >
+                          <X className="h-3 w-3 mr-1" />
+                          Clear
+                        </Button>
+                      )}
+                    </SheetTitle>
+                  </SheetHeader>
+                  
+                  <div className="space-y-4 overflow-y-auto pb-20 -mx-4 px-4" style={{ maxHeight: 'calc(70vh - 120px)' }}>
+                    {/* Layer toggles */}
+                    <div>
+                      <h3 className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-wide">Show on Map</h3>
+                      <div className="grid grid-cols-3 gap-1.5">
+                        <Button
+                          variant={showSpots ? 'default' : 'outline'}
+                          size="sm"
+                          className={cn(
+                            'justify-center gap-1 h-9 text-xs px-2',
+                            showSpots ? 'bg-red-500 hover:bg-red-600' : ''
+                          )}
+                          onClick={() => setShowSpots(!showSpots)}
+                        >
+                          🛹 Spots
+                        </Button>
+                        <Button
+                          variant={showShops ? 'default' : 'outline'}
+                          size="sm"
+                          className={cn(
+                            'justify-center gap-1 h-9 text-xs px-2',
+                            showShops ? 'bg-purple-600 hover:bg-purple-700' : ''
+                          )}
+                          onClick={() => setShowShops(!showShops)}
+                        >
+                          🏪 Shops
+                        </Button>
+                        <Button
+                          variant={showGear ? 'default' : 'outline'}
+                          size="sm"
+                          className={cn(
+                            'justify-center gap-1 h-9 text-xs px-2',
+                            showGear ? 'bg-orange-500 hover:bg-orange-600' : ''
+                          )}
+                          onClick={() => setShowGear(!showGear)}
+                        >
+                          🛒 Gear
+                        </Button>
+                        <Button
+                          variant={showTours ? 'default' : 'outline'}
+                          size="sm"
+                          className={cn(
+                            'justify-center gap-1 h-9 text-xs px-2',
+                            showTours ? 'bg-cyan-500 hover:bg-cyan-600' : ''
+                          )}
+                          onClick={() => setShowTours(!showTours)}
+                        >
+                          🗺️ Tours
+                        </Button>
+                        <Button
+                          variant={showBtcMap ? 'default' : 'outline'}
+                          size="sm"
+                          className={cn(
+                            'justify-center gap-1 h-9 text-xs px-2 col-span-2',
+                            showBtcMap ? 'bg-[#f7931a] hover:bg-[#f7931a]/90' : 'border-[#f7931a]/50 text-[#f7931a]'
+                          )}
+                          onClick={() => setShowBtcMap(!showBtcMap)}
+                        >
+                          <Bitcoin className="h-3 w-3" /> Bitcoin
+                        </Button>
+                      </div>
+                    </div>
+
+                    {/* Spot categories */}
+                    <div>
+                      <h3 className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-wide">Spot Type</h3>
+                      <div className="flex flex-wrap gap-1.5">
+                        {Object.entries(SPOT_CATEGORIES).map(([key, cat]) => (
+                          <Button
+                            key={key}
+                            variant={selectedCategories.includes(key) ? 'default' : 'outline'}
+                            size="sm"
+                            className={cn(
+                              'gap-1 h-8 text-xs px-2',
+                              selectedCategories.includes(key) 
+                                ? 'bg-[#ff0040] hover:bg-[#ff0040]/90' 
+                                : ''
+                            )}
+                            onClick={() => toggleCategory(key)}
+                          >
+                            {cat.emoji} {cat.label}
+                          </Button>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* Sort & Trust */}
+                    <div className="grid grid-cols-2 gap-3">
+                      <div>
+                        <h3 className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-wide">Sort By</h3>
+                        <SortDropdown
+                          value={sortBy}
+                          onChange={setSortBy}
+                          contentType="spots"
+                          showProximity={!!userLocation}
+                        />
+                      </div>
+                      <div>
+                        <h3 className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-wide">Trust Level</h3>
+                        <TrustFilter
+                          value={trustFilter}
+                          onChange={setTrustFilter}
+                          compact
+                        />
+                      </div>
+                    </div>
+
+                    {/* Weather toggle */}
+                    <div>
+                      <h3 className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-wide">Weather</h3>
+                      <WeatherToggle
+                        enabled={weatherEnabled}
+                        onToggle={() => {
+                          const newWeatherEnabled = !weatherEnabled;
+                          setWeatherEnabled(newWeatherEnabled);
+                          if (!newWeatherEnabled) {
+                            setWeatherFilter('all');
+                          }
+                        }}
+                      />
+                    </div>
+
+                    {/* Quick actions for logged in users */}
+                    {user && (
+                      <div>
+                        <h3 className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-wide">Quick Actions</h3>
+                        <div className="grid grid-cols-2 gap-1.5">
+                          <Link to="/create-spot" onClick={() => setMobileFiltersOpen(false)}>
+                            <Button size="sm" className="w-full gap-1 bg-[#ff0040] hover:bg-[#ff0040]/90 font-bold h-9 text-xs">
+                              <Plus className="h-3 w-3" />
+                              Add Spot
+                            </Button>
+                          </Link>
+                          <Link to="/create-listing" onClick={() => setMobileFiltersOpen(false)}>
+                            <Button size="sm" variant="outline" className="w-full gap-1 border-orange-500/50 text-orange-400 font-bold h-9 text-xs">
+                              <ShoppingBag className="h-3 w-3" />
+                              Sell Gear
+                            </Button>
+                          </Link>
+                          <Link to="/stash" onClick={() => setMobileFiltersOpen(false)}>
+                            <Button size="sm" variant="outline" className="w-full gap-1 border-[#ff6600]/50 text-[#ff6600] font-bold h-9 text-xs">
+                              <Backpack className="h-3 w-3" />
+                              Stash
+                            </Button>
+                          </Link>
+                          <Link to="/create-tour" onClick={() => setMobileFiltersOpen(false)}>
+                            <Button size="sm" variant="outline" className="w-full gap-1 border-cyan-500/50 text-cyan-400 font-bold h-9 text-xs">
+                              <Route className="h-3 w-3" />
+                              Tour
+                            </Button>
+                          </Link>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Apply button fixed at bottom */}
+                  <div className="absolute bottom-0 left-0 right-0 p-3 bg-background border-t safe-area-bottom">
+                    <Button 
+                      className="w-full h-11 font-bold"
+                      onClick={() => setMobileFiltersOpen(false)}
+                    >
+                      Show Results
+                    </Button>
+                  </div>
+                </SheetContent>
+              </Sheet>
+
+              {/* Desktop: Weather toggle */}
+              <div className="hidden md:block">
+                <WeatherToggle
+                  enabled={weatherEnabled}
+                  onToggle={() => {
+                    const newWeatherEnabled = !weatherEnabled;
+                    setWeatherEnabled(newWeatherEnabled);
+                    if (!newWeatherEnabled) {
+                      setWeatherFilter('all');
+                    }
+                  }}
+                />
+              </div>
+            </div>
+
+            {/* Row 2: Entity toggles + Sort/Filter + Add buttons (DESKTOP ONLY) */}
+            <div className="hidden md:flex items-center gap-2 mt-2 overflow-x-auto scrollbar-hide -mx-3 px-3 sm:mx-0 sm:px-0">
+              {/* Entity toggles */}
+              <Button
+                variant={showSpots ? 'default' : 'outline'}
+                size="sm"
+                className={cn(
+                  'gap-1 font-bold text-xs px-2.5 h-8 flex-shrink-0 touch-manipulation active:scale-95',
+                  showSpots ? 'bg-red-500 hover:bg-red-600' : 'border-gray-700'
+                )}
+                onClick={() => setShowSpots(!showSpots)}
+              >
+                🛹 <span className="hidden xs:inline">{t('mapPage.spots')}</span>
+              </Button>
+              <Button
+                variant={showShops ? 'default' : 'outline'}
+                size="sm"
+                className={cn(
+                  'gap-1 font-bold text-xs px-2.5 h-8 flex-shrink-0 touch-manipulation active:scale-95',
+                  showShops ? 'bg-purple-600 hover:bg-purple-700' : 'border-gray-700'
+                )}
+                onClick={() => setShowShops(!showShops)}
+              >
+                🏪 <span className="hidden xs:inline">{t('mapPage.shops')}</span>
+              </Button>
+              <Button
+                variant={showGear ? 'default' : 'outline'}
+                size="sm"
+                className={cn(
+                  'gap-1 font-bold text-xs px-2.5 h-8 flex-shrink-0 touch-manipulation active:scale-95',
+                  showGear ? 'bg-orange-500 hover:bg-orange-600' : 'border-gray-700'
+                )}
+                onClick={() => setShowGear(!showGear)}
+              >
+                <ShoppingBag className="h-3.5 w-3.5" />
+                <span className="hidden xs:inline">{t('marketplace.gear')}</span>
+              </Button>
+              <Button
+                variant={showTours ? 'default' : 'outline'}
+                size="sm"
+                className={cn(
+                  'gap-1 font-bold text-xs px-2.5 h-8 flex-shrink-0 touch-manipulation active:scale-95',
+                  showTours ? 'bg-cyan-500 hover:bg-cyan-600' : 'border-gray-700'
+                )}
+                onClick={() => setShowTours(!showTours)}
+              >
+                <Route className="h-3.5 w-3.5" />
+                <span className="hidden xs:inline">Local Tours</span>
+              </Button>
+              
+              {/* BTC Map toggle */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant={showBtcMap ? 'default' : 'outline'}
+                    size="sm"
+                    className={cn(
+                      'gap-1 font-bold text-xs px-2.5 h-8 flex-shrink-0 touch-manipulation active:scale-95',
+                      showBtcMap ? 'bg-[#f7931a] hover:bg-[#f7931a]/90 text-white' : 'border-[#f7931a]/50 text-[#f7931a] hover:bg-[#f7931a]/10'
+                    )}
+                    onClick={() => setShowBtcMap(!showBtcMap)}
+                  >
+                    <Bitcoin className="h-3.5 w-3.5" />
+                    <span className="hidden xs:inline">SPEDN ✊</span>
+                    {btcMapLoading && showBtcMap && (
+                      <span className="ml-1 h-3 w-3 rounded-full border-2 border-white/30 border-t-white animate-spin" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className="max-w-[200px]">
+                  <p className="text-xs">
+                    {showBtcMap 
+                      ? `Showing ${btcMapPlaces?.length || 0} Bitcoin-accepting places nearby`
+                      : 'Show places where you can spend your sats (via BTC Map)'
+                    }
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+
+              {/* Stash drawer */}
+              <Sheet>
+                <SheetTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-1 font-bold text-xs px-2.5 h-8 flex-shrink-0 touch-manipulation active:scale-95 border-[#ff6600]/50 text-[#ff6600] hover:bg-[#ff6600]/10 hover:border-[#ff6600]"
+                  >
+                    <Backpack className="h-3.5 w-3.5" />
+                    <span className="hidden xs:inline">Stash</span>
+                  </Button>
+                </SheetTrigger>
+                <SheetContent side="right" className="w-[340px] sm:w-[400px] p-0 bg-black/95 border-l-2 border-[#ff6600]/30">
+                  <SheetHeader className="p-4 pb-0">
+                    <SheetTitle className="flex items-center gap-2 text-white">
+                      <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#ff6600] to-[#ff0040] flex items-center justify-center">
+                        <Backpack className="h-4 w-4 text-white" />
+                      </div>
+                      My Stash
+                      <Badge variant="outline" className="ml-auto border-green-500/50 text-green-400 text-[10px]">
+                        <Shield className="h-2.5 w-2.5 mr-1" />
+                        Encrypted
+                      </Badge>
+                    </SheetTitle>
+                  </SheetHeader>
+                  <StashDrawer />
+                </SheetContent>
+              </Sheet>
+
+              {/* Separator */}
+              <div className="w-px h-6 bg-gray-700 flex-shrink-0 hidden sm:block" />
+
+              {/* Sort and Filter */}
+              <SortDropdown
+                value={sortBy}
+                onChange={setSortBy}
+                contentType="spots"
+                showProximity={!!userLocation}
+              />
+              <TrustFilter
+                value={trustFilter}
+                onChange={setTrustFilter}
+                compact
+              />
+
+              {/* Clear filters */}
+              {hasActiveFilters && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-red-400 hover:text-red-300 hover:bg-red-500/10 h-8 w-8 p-0 flex-shrink-0 touch-manipulation active:scale-95"
+                  onClick={clearFilters}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              )}
+
+              {/* Spacer */}
+              <div className="flex-1 min-w-2" />
+
+              {/* Add buttons - icons only on mobile */}
+              {user ? (
+                <>
+                  <Link to="/create-spot" className="flex-shrink-0">
+                    <Button size="sm" className="gap-1.5 bg-[#ff0040] hover:bg-[#ff0040]/90 border-2 border-[#ff0040] font-bold h-8 px-2 sm:px-3">
+                      <Plus className="h-4 w-4" />
+                      <span className="hidden md:inline">{t('home.addSpot')}</span>
+                    </Button>
+                  </Link>
+                  <Link to="/create-shop" className="flex-shrink-0 hidden sm:block">
+                    <Button size="sm" variant="outline" className="gap-1.5 border-2 border-[#ccff00]/50 hover:bg-[#ccff00]/10 text-[#ccff00] font-bold h-8 px-2 sm:px-3">
+                      <Plus className="h-4 w-4" />
+                      <span className="hidden md:inline">{t('shops.addShop')}</span>
+                    </Button>
+                  </Link>
+                  <Link to="/create-listing" className="flex-shrink-0 hidden sm:block">
+                    <Button size="sm" variant="outline" className="gap-1.5 border-2 border-orange-500/50 hover:bg-orange-500/10 text-orange-400 font-bold h-8 px-2 sm:px-3">
+                      <ShoppingBag className="h-4 w-4" />
+                      <span className="hidden md:inline">{t('marketplace.sellGear')}</span>
+                    </Button>
+                  </Link>
+                  <Link to="/create-tour" className="flex-shrink-0 hidden sm:block">
+                    <Button size="sm" variant="outline" className="gap-1.5 border-2 border-cyan-500/50 hover:bg-cyan-500/10 text-cyan-400 font-bold h-8 px-2 sm:px-3">
+                      <Route className="h-4 w-4" />
+                      <span className="hidden md:inline">Offer Tour</span>
+                    </Button>
+                  </Link>
+                </>
+              ) : (
+                <Badge variant="outline" className="border-yellow-500/50 text-yellow-400 text-[10px] px-2 flex-shrink-0">
+                  🔒 {t('errors.loginRequired')}
+                </Badge>
+              )}
+            </div>
+
+            {/* Row 3: Category filters (DESKTOP ONLY) */}
+            <div className="hidden md:flex items-center gap-1.5 mt-2 overflow-x-auto scrollbar-hide -mx-3 px-3 sm:mx-0 sm:px-0 pb-0.5">
+              {Object.entries(SPOT_CATEGORIES).map(([key, cat]) => (
+                <Button
+                  key={key}
+                  variant={selectedCategories.includes(key) ? 'default' : 'outline'}
+                  size="sm"
+                  className={cn(
+                    'gap-1 font-bold text-xs flex-shrink-0 px-2.5 h-8 touch-manipulation active:scale-95',
+                    selectedCategories.includes(key) 
+                      ? 'bg-[#ff0040] hover:bg-[#ff0040]/90' 
+                      : 'border-gray-700 hover:border-[#ff0040]/50'
+                  )}
+                  onClick={() => toggleCategory(key)}
+                >
+                  {cat.emoji} {cat.label}
+                </Button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <div className="flex-1 relative">
+          {viewMode === 'map' ? (
+            <>
+              <SpotMap
+                spots={filteredSpots}
+                marketplaceItems={marketplaceItems || []}
+                tours={tours || []}
+                btcMapPlaces={btcMapPlaces || []}
+                selectedSpot={selectedSpot}
+                onSpotClick={setSelectedSpot}
+                onMapClick={handleMapClick}
+                onMapMove={setMapCenter}
+                enableClickToAdd={!!user}
+                className="h-full"
+                weatherEnabled={weatherEnabled}
+                weatherData={weatherData}
+                showSpots={showSpots}
+                showShops={showShops}
+                showGear={showGear}
+                showTours={showTours}
+                showBtcMap={showBtcMap}
+              />
+              {/* Loading indicator */}
+              {isLoading && (
+                <div className="absolute top-4 left-1/2 -translate-x-1/2 z-[1000] bg-black/90 backdrop-blur px-4 py-2 rounded-lg shadow-lg border border-[#ff0040]/30">
+                  <div className="flex items-center gap-3">
+                    <div className="animate-spin rounded-full h-4 w-4 border-2 border-[#ff0040] border-t-transparent" />
+                    <span className="text-sm text-white font-bold">{t('common.loading')}</span>
+                  </div>
+                </div>
+              )}
+
+              {/* Quick Capture FAB - only show for logged in users on mobile */}
+              {user && (
+                <div className="absolute bottom-24 right-4 z-[1000] md:hidden">
+                  <Button
+                    onClick={() => setShowQuickCamera(true)}
+                    className="h-14 w-14 rounded-full bg-[#ff0040] hover:bg-[#ff0040]/90 shadow-xl shadow-[#ff0040]/30 border-2 border-white/20"
+                  >
+                    <Camera className="h-6 w-6" />
+                  </Button>
+                  <span className="absolute -bottom-6 left-1/2 -translate-x-1/2 text-xs text-white font-bold whitespace-nowrap bg-black/70 px-2 py-0.5 rounded">
+                    Quick Snap
+                  </span>
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="h-full overflow-auto">
+              <div className="container px-4 py-6">
+                {isLoading ? (
+                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                    {Array.from({ length: 8 }).map((_, i) => (
+                      <SpotCardSkeleton key={i} />
+                    ))}
+                  </div>
+                ) : filteredSpots.length > 0 ? (
+                  <>
+                    <p className="text-sm text-muted-foreground mb-4">
+                      {t('mapPage.locationsFound', { count: filteredSpots.length })}
+                      {showSpots && !showShops && ` (${t('mapPage.spotsOnly')})`}
+                      {!showSpots && showShops && ` (${t('mapPage.shopsOnly')})`}
+                      {showSpots && showShops && ` (${t('mapPage.spotsAndShops')})`}
+                    </p>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 stagger-children">
+                      {filteredSpots.map((spot) => (
+                        <SpotCard key={spot.id} spot={spot} />
+                      ))}
+                    </div>
+                  </>
+                ) : (
+                  <div className="text-center py-12">
+                    <Map className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+                    <p className="text-muted-foreground mb-4">
+                      {hasActiveFilters
+                        ? t('mapPage.noSpotsMatch')
+                        : t('mapPage.noSpotsYet')}
+                    </p>
+                    {hasActiveFilters ? (
+                      <Button variant="outline" onClick={clearFilters}>
+                        {t('common.clearFilters')}
+                      </Button>
+                    ) : (
+                      user && (
+                        <Link to="/create-spot">
+                          <Button className="gap-2">
+                            <Plus className="h-4 w-4" />
+                            {t('mapPage.addFirstSpot')}
+                          </Button>
+                        </Link>
+                      )
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Quick Camera Capture Dialog */}
+      <CameraCapture
+        open={showQuickCamera}
+        onOpenChange={setShowQuickCamera}
+        onCapture={handleQuickCameraCapture}
+        isUploading={isUploadingQuickPhoto}
+      />
+    </Layout>
+  );
+}
diff --git a/src/src/pages/MarketplacePage.tsx b/src/src/pages/MarketplacePage.tsx
new file mode 100644
index 0000000..583e741
--- /dev/null
+++ b/src/src/pages/MarketplacePage.tsx
@@ -0,0 +1,218 @@
+import { useSeoMeta } from '@unhead/react';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  ShoppingBag,
+  ExternalLink,
+  Package,
+  DollarSign,
+  Shield,
+  Zap,
+  Store,
+  ShoppingCart,
+} from 'lucide-react';
+
+export default function MarketplacePage() {
+  useSeoMeta({
+    title: 'Marketplace - SkateSpots',
+    description: 'Buy and sell skateboarding gear on the decentralized Plebeian Market.',
+  });
+
+  return (
+    <Layout>
+      <div className="container px-4 py-12 max-w-4xl">
+        {/* Hero */}
+        <div className="text-center mb-12">
+          <div className="mb-6">
+            <div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-gradient-to-br from-[#ff6600] to-[#ff0040] mb-4">
+              <ShoppingBag className="h-10 w-10 text-white" />
+            </div>
+          </div>
+          <h1 className="text-4xl md:text-6xl font-black uppercase mb-4 neon-orange" style={{
+            fontFamily: 'Impact, "Arial Black", sans-serif',
+            letterSpacing: '0.05em'
+          }}>
+            Shops & Marketplace
+          </h1>
+          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+            Our marketplace is powered by <strong className="text-[#ff6600]">Plebeian Market</strong> - a decentralized marketplace on Nostr.
+            Skate shops can list their products, and you can buy/sell used gear directly with Bitcoin.
+          </p>
+        </div>
+
+        {/* Plebeian Market Info */}
+        <Card className="bg-black/90 border-2 border-[#ff6600]/50 mb-8">
+          <CardContent className="p-8">
+            <div className="flex items-start gap-6 mb-6">
+              <div className="w-16 h-16 rounded-xl bg-[#ff6600] flex items-center justify-center flex-shrink-0">
+                <Store className="h-8 w-8 text-white" />
+              </div>
+              <div className="flex-1">
+                <h2 className="text-2xl font-black uppercase text-[#ff6600] mb-3">What is Plebeian Market?</h2>
+                <p className="text-gray-300 mb-4">
+                  Plebeian Market is a decentralized marketplace built on Nostr. Buy and sell skateboarding gear
+                  directly with other skaters using Bitcoin. No middlemen, no fees, total freedom.
+                </p>
+              </div>
+            </div>
+
+            <div className="grid md:grid-cols-3 gap-4 mb-6">
+              <div className="p-4 rounded-lg bg-black/50 border border-[#ff0040]/20">
+                <Shield className="h-6 w-6 text-[#ff0040] mb-2" />
+                <h3 className="font-bold text-white uppercase text-sm mb-1">No Fees</h3>
+                <p className="text-xs text-gray-400">No platform taking 30%. Direct peer-to-peer sales.</p>
+              </div>
+              <div className="p-4 rounded-lg bg-black/50 border border-[#ccff00]/20">
+                <DollarSign className="h-6 w-6 text-[#ccff00] mb-2" />
+                <h3 className="font-bold text-white uppercase text-sm mb-1">Bitcoin Payments</h3>
+                <p className="text-xs text-gray-400">Pay with Bitcoin. Fast, secure, global.</p>
+              </div>
+              <div className="p-4 rounded-lg bg-black/50 border border-[#ff6600]/20">
+                <Package className="h-6 w-6 text-[#ff6600] mb-2" />
+                <h3 className="font-bold text-white uppercase text-sm mb-1">Decentralized</h3>
+                <p className="text-xs text-gray-400">Built on Nostr. No company controls it.</p>
+              </div>
+            </div>
+
+            <div className="flex justify-center">
+              <a href="https://plebeian.market" target="_blank" rel="noopener noreferrer">
+                <Button size="lg" className="gap-2 bg-[#ff6600] hover:bg-[#ff6600]/90 text-white border-2 border-[#ff6600] shadow-[0_0_20px_rgba(255,102,0,0.5)] font-bold uppercase px-12 py-6 text-lg">
+                  <ExternalLink className="h-6 w-6" />
+                  Visit Plebeian Market
+                </Button>
+              </a>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* What You Can Buy/Sell */}
+        <div className="mb-12">
+          <h2 className="text-2xl font-black uppercase text-white mb-6">What You Can Buy & Sell</h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            {[
+              {
+                title: 'Complete Decks',
+                items: ['Pre-built completes', 'Custom setups', 'Beginner boards'],
+                color: '#ff0040'
+              },
+              {
+                title: 'Deck Parts',
+                items: ['Decks', 'Trucks', 'Wheels', 'Bearings', 'Grip tape', 'Hardware'],
+                color: '#ff6600'
+              },
+              {
+                title: 'Apparel & Protection',
+                items: ['Skate shoes', 'Clothing', 'Helmets', 'Pads', 'Backpacks'],
+                color: '#ccff00'
+              },
+              {
+                title: 'Accessories',
+                items: ['Tools', 'Wax', 'Rails', 'Stickers', 'Videos', 'Magazines'],
+                color: '#ff0040'
+              },
+            ].map((category, i) => (
+              <Card key={i} className="bg-black/90 border-2" style={{ borderColor: `${category.color}30` }}>
+                <CardContent className="p-6">
+                  <h3 className="font-black uppercase mb-3" style={{ color: category.color }}>
+                    {category.title}
+                  </h3>
+                  <ul className="space-y-1">
+                    {category.items.map((item, j) => (
+                      <li key={j} className="text-sm text-gray-400 flex items-center gap-2">
+                        <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: category.color }} />
+                        {item}
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+
+        {/* How It Works */}
+        <Card className="bg-black/90 border-2 border-[#ccff00]/50">
+          <CardContent className="p-8">
+            <h2 className="text-2xl font-black uppercase text-[#ccff00] mb-6">How It Works</h2>
+
+            <div className="space-y-4">
+              {[
+                {
+                  num: 1,
+                  title: 'Browse Products',
+                  desc: 'Visit Plebeian Market and browse skateboarding gear from shops and individuals worldwide.',
+                },
+                {
+                  num: 2,
+                  title: 'Contact Sellers',
+                  desc: 'Message sellers directly via Nostr. Negotiate prices, ask questions, arrange shipping.',
+                },
+                {
+                  num: 3,
+                  title: 'Pay with Bitcoin',
+                  desc: 'Complete your purchase using Bitcoin Lightning for instant, low-fee payments.',
+                },
+                {
+                  num: 4,
+                  title: 'Leave Feedback',
+                  desc: 'Rate your experience and build seller reputation on Nostr. Your reviews help the community.',
+                },
+              ].map((step) => (
+                <div key={step.num} className="flex gap-4 p-4 rounded-lg bg-black/50 border border-[#ccff00]/20">
+                  <div className="w-10 h-10 rounded-full bg-[#ccff00] flex items-center justify-center font-black text-xl text-black flex-shrink-0">
+                    {step.num}
+                  </div>
+                  <div>
+                    <h4 className="font-black uppercase text-sm mb-1 text-white">{step.title}</h4>
+                    <p className="text-sm text-gray-400">{step.desc}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <div className="mt-8 p-4 rounded-lg bg-[#ff0040]/10 border border-[#ff0040]/30">
+              <div className="flex items-start gap-3">
+                <Zap className="h-5 w-5 text-[#ff0040] flex-shrink-0 mt-0.5" />
+                <div>
+                  <h4 className="font-bold text-[#ff0040] mb-1">Need Bitcoin?</h4>
+                  <p className="text-sm text-gray-300">
+                    You'll need a Lightning wallet with some sats to make purchases.
+                    Check out the <a href="/onboarding" className="text-[#ccff00] underline font-bold">onboarding guide</a> for wallet recommendations.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* For Shop Owners */}
+        <Card className="bg-black/90 border-2 border-[#ff0040]/50 mt-8">
+          <CardContent className="p-8 text-center">
+            <Store className="h-12 w-12 mx-auto mb-4 text-[#ff0040]" />
+            <h2 className="text-2xl font-black uppercase text-white mb-3">Own a Skate Shop?</h2>
+            <p className="text-gray-300 mb-6 max-w-xl mx-auto">
+              List your shop on SkateSpots and sell your products on Plebeian Market.
+              Reach customers worldwide with zero platform fees.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <a href="/create-shop">
+                <Button className="gap-2 bg-[#ff0040] hover:bg-[#ff0040]/90 text-white border-2 border-[#ff0040] shadow-[0_0_20px_rgba(255,0,64,0.5)] font-bold uppercase px-8">
+                  <Store className="h-5 w-5" />
+                  Add Your Shop
+                </Button>
+              </a>
+              <a href="https://plebeian.market/sell" target="_blank" rel="noopener noreferrer">
+                <Button variant="outline" className="gap-2 border-2 border-[#ccff00]/50 hover:bg-[#ccff00]/10 text-[#ccff00] font-bold uppercase px-8">
+                  <Package className="h-5 w-5" />
+                  Start Selling
+                </Button>
+              </a>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/NIP19Page.tsx b/src/src/pages/NIP19Page.tsx
new file mode 100644
index 0000000..2f3dafe
--- /dev/null
+++ b/src/src/pages/NIP19Page.tsx
@@ -0,0 +1,378 @@
+import { nip19 } from 'nostr-tools';
+import { useParams, Link } from 'react-router-dom';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ZapButton } from '@/components/ZapButton';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useUserSkateSpots } from '@/hooks/useSkateSpots';
+import { useUserShops } from '@/hooks/useShops';
+import { SpotCard, SpotCardSkeleton } from '@/components/SpotCard';
+import { genUserName } from '@/lib/genUserName';
+import NotFound from './NotFound';
+import {
+  MapPin,
+  Store,
+  MessageCircle,
+  Globe,
+  Zap,
+  Calendar,
+  ExternalLink,
+  ArrowLeft,
+  Copy,
+  Check,
+} from 'lucide-react';
+import { useState } from 'react';
+import { UserStatusIndicator } from '@/components/UserStatusIndicator';
+
+function ProfilePage({ pubkey }: { pubkey: string }) {
+  const author = useAuthor(pubkey);
+  const { user } = useCurrentUser();
+  const { data: spots, isLoading: spotsLoading } = useUserSkateSpots(pubkey);
+  const { data: shops, isLoading: shopsLoading } = useUserShops(pubkey);
+  const [copied, setCopied] = useState(false);
+
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(pubkey);
+  const avatar = metadata?.picture;
+  const banner = metadata?.banner;
+  const about = metadata?.about;
+  const website = metadata?.website;
+  const nip05 = metadata?.nip05;
+  const lud16 = metadata?.lud16;
+
+  const npub = nip19.npubEncode(pubkey);
+  const isOwnProfile = user?.pubkey === pubkey;
+
+  const handleCopyNpub = () => {
+    navigator.clipboard.writeText(npub);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  // Create a mock event for zapping
+  const profileEvent = author.data?.event;
+
+  if (author.isLoading) {
+    return (
+      <Layout>
+        <div className="container px-4 py-8 max-w-4xl">
+          <Skeleton className="h-48 w-full rounded-xl mb-4" />
+          <div className="flex items-end gap-4 -mt-16 px-4 mb-6">
+            <Skeleton className="h-32 w-32 rounded-full border-4 border-black" />
+            <div className="flex-1 space-y-2 pb-2">
+              <Skeleton className="h-8 w-48" />
+              <Skeleton className="h-4 w-32" />
+            </div>
+          </div>
+          <div className="space-y-4">
+            <Skeleton className="h-20 w-full" />
+            <div className="grid grid-cols-2 gap-4">
+              <Skeleton className="h-24" />
+              <Skeleton className="h-24" />
+            </div>
+          </div>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="container px-4 py-6 max-w-4xl">
+        {/* Back Button */}
+        <Link
+          to="/bounties"
+          className="inline-flex items-center text-gray-400 hover:text-white transition-colors mb-4"
+        >
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Back to Leaderboard
+        </Link>
+
+        {/* Banner */}
+        <div className="relative h-32 sm:h-48 rounded-xl overflow-hidden bg-gradient-to-br from-[#ff0040]/30 to-[#ccff00]/20 mb-4">
+          {banner && (
+            <img src={banner} alt="Banner" className="w-full h-full object-cover" />
+          )}
+          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
+        </div>
+
+        {/* Profile Header */}
+        <div className="flex flex-col sm:flex-row items-center sm:items-end gap-4 -mt-16 sm:-mt-20 px-4 mb-6 relative z-10">
+          <div className="relative">
+            <Avatar className="h-28 w-28 sm:h-32 sm:w-32 border-4 border-black shadow-xl">
+              <AvatarImage src={avatar} alt={displayName} />
+              <AvatarFallback className="bg-[#ff0040]/20 text-[#ff0040] text-2xl sm:text-3xl font-black">
+                {displayName.slice(0, 2).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            {/* User Status Indicator */}
+            <div className="absolute -bottom-1 -right-1">
+              <UserStatusIndicator pubkey={pubkey} size="lg" showLabel />
+            </div>
+          </div>
+          
+          <div className="flex-1 text-center sm:text-left pb-2">
+            <div className="flex items-center justify-center sm:justify-start gap-2 mb-1">
+              <h1 className="text-2xl sm:text-3xl font-black uppercase text-white">
+                {displayName}
+              </h1>
+              <UserStatusIndicator pubkey={pubkey} size="md" showLabel className="hidden sm:flex" />
+            </div>
+            {nip05 && (
+              <p className="text-sm text-[#ccff00] font-medium flex items-center justify-center sm:justify-start gap-1">
+                <Check className="h-3 w-3" />
+                {nip05}
+              </p>
+            )}
+          </div>
+
+          {/* Actions */}
+          <div className="flex items-center gap-2">
+            {!isOwnProfile && user && (
+              <Link to={`/messages/${npub}`}>
+                <Button variant="outline" className="gap-2 border-[#ff0040]/50 text-[#ff0040] hover:bg-[#ff0040]/10">
+                  <MessageCircle className="h-4 w-4" />
+                  <span className="hidden sm:inline">Message</span>
+                </Button>
+              </Link>
+            )}
+            {profileEvent && !isOwnProfile && (
+              <ZapButton
+                target={profileEvent}
+                className="bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold"
+              />
+            )}
+          </div>
+        </div>
+
+        {/* Profile Info */}
+        <div className="grid lg:grid-cols-3 gap-6">
+          {/* Main Content */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* About */}
+            {about && (
+              <Card className="bg-black/90 border-2 border-gray-800">
+                <CardContent className="p-4 sm:p-6">
+                  <p className="text-gray-300 whitespace-pre-wrap">{about}</p>
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Spots by this user */}
+            <div>
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-xl font-black uppercase flex items-center gap-2">
+                  <MapPin className="h-5 w-5 text-[#ff0040]" />
+                  Spots Added
+                  {spots && spots.length > 0 && (
+                    <Badge className="bg-[#ff0040]/20 text-[#ff0040] border-[#ff0040]/50">
+                      {spots.length}
+                    </Badge>
+                  )}
+                </h2>
+              </div>
+
+              {spotsLoading ? (
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  {Array.from({ length: 2 }).map((_, i) => (
+                    <SpotCardSkeleton key={i} />
+                  ))}
+                </div>
+              ) : spots && spots.length > 0 ? (
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  {spots.slice(0, 4).map((spot) => (
+                    <SpotCard key={spot.id} spot={spot} />
+                  ))}
+                </div>
+              ) : (
+                <Card className="border-dashed border-2 border-gray-800">
+                  <CardContent className="py-8 text-center">
+                    <MapPin className="h-10 w-10 mx-auto mb-3 text-gray-600" />
+                    <p className="text-gray-500">No spots added yet</p>
+                  </CardContent>
+                </Card>
+              )}
+            </div>
+
+            {/* Shops by this user */}
+            <div>
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-xl font-black uppercase flex items-center gap-2">
+                  <Store className="h-5 w-5 text-[#ccff00]" />
+                  Shops Added
+                  {shops && shops.length > 0 && (
+                    <Badge className="bg-[#ccff00]/20 text-[#ccff00] border-[#ccff00]/50">
+                      {shops.length}
+                    </Badge>
+                  )}
+                </h2>
+              </div>
+
+              {shopsLoading ? (
+                <div className="grid grid-cols-1 gap-3">
+                  {Array.from({ length: 2 }).map((_, i) => (
+                    <Skeleton key={i} className="h-20" />
+                  ))}
+                </div>
+              ) : shops && shops.length > 0 ? (
+                <div className="space-y-3">
+                  {shops.slice(0, 4).map((shop) => (
+                    <Link key={shop.id} to={`/shop/${shop.pubkey}/${shop.identifier}`}>
+                      <Card className="bg-black/90 border-2 border-[#ccff00]/30 hover:border-[#ccff00]/60 transition-all">
+                        <CardContent className="p-4 flex items-center gap-4">
+                          <div className="w-12 h-12 rounded-lg bg-[#ccff00]/20 flex items-center justify-center flex-shrink-0">
+                            <Store className="h-6 w-6 text-[#ccff00]" />
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <h3 className="font-bold text-white truncate">{shop.name}</h3>
+                            {shop.location && (
+                              <p className="text-sm text-gray-400 truncate">{shop.location}</p>
+                            )}
+                          </div>
+                        </CardContent>
+                      </Card>
+                    </Link>
+                  ))}
+                </div>
+              ) : (
+                <Card className="border-dashed border-2 border-gray-800">
+                  <CardContent className="py-8 text-center">
+                    <Store className="h-10 w-10 mx-auto mb-3 text-gray-600" />
+                    <p className="text-gray-500">No shops added yet</p>
+                  </CardContent>
+                </Card>
+              )}
+            </div>
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-4">
+            {/* Quick Info Card */}
+            <Card className="bg-black/90 border-2 border-gray-800">
+              <CardHeader className="pb-3">
+                <CardTitle className="text-lg">Info</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                {website && (
+                  <a
+                    href={website.startsWith('http') ? website : `https://${website}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-3 p-3 rounded-lg bg-gray-900 hover:bg-gray-800 transition-colors"
+                  >
+                    <Globe className="h-4 w-4 text-blue-400" />
+                    <span className="text-gray-300 text-sm truncate">
+                      {website.replace(/^https?:\/\//, '')}
+                    </span>
+                    <ExternalLink className="h-3 w-3 text-gray-500 ml-auto flex-shrink-0" />
+                  </a>
+                )}
+
+                {lud16 && (
+                  <div className="flex items-center gap-3 p-3 rounded-lg bg-gray-900">
+                    <Zap className="h-4 w-4 text-yellow-400" />
+                    <span className="text-gray-300 text-sm truncate">{lud16}</span>
+                  </div>
+                )}
+
+                {/* Npub Copy */}
+                <button
+                  onClick={handleCopyNpub}
+                  className="flex items-center gap-3 p-3 rounded-lg bg-gray-900 hover:bg-gray-800 transition-colors w-full text-left"
+                >
+                  {copied ? (
+                    <Check className="h-4 w-4 text-green-400" />
+                  ) : (
+                    <Copy className="h-4 w-4 text-gray-400" />
+                  )}
+                  <span className="text-gray-400 text-sm truncate flex-1">
+                    {copied ? 'Copied!' : `${npub.slice(0, 12)}...${npub.slice(-8)}`}
+                  </span>
+                </button>
+              </CardContent>
+            </Card>
+
+            {/* Stats Card */}
+            <Card className="bg-gradient-to-br from-[#ff0040]/10 to-[#ccff00]/10 border-2 border-[#ff0040]/30">
+              <CardContent className="p-4">
+                <h3 className="text-sm font-bold uppercase text-gray-400 mb-3">Contributions</h3>
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="text-center p-3 rounded-lg bg-black/40">
+                    <p className="text-2xl font-black text-[#ff0040]">{spots?.length || 0}</p>
+                    <p className="text-xs text-gray-500 uppercase">Spots</p>
+                  </div>
+                  <div className="text-center p-3 rounded-lg bg-black/40">
+                    <p className="text-2xl font-black text-[#ccff00]">{shops?.length || 0}</p>
+                    <p className="text-xs text-gray-500 uppercase">Shops</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Tip Card */}
+            {!isOwnProfile && profileEvent && (
+              <Card className="bg-gradient-to-br from-[#ccff00]/10 to-transparent border-2 border-[#ccff00]/30">
+                <CardContent className="p-4 text-center">
+                  <Zap className="h-8 w-8 mx-auto mb-2 text-[#ccff00]" />
+                  <h3 className="font-bold text-white mb-1">Support this mapper</h3>
+                  <p className="text-xs text-gray-400 mb-3">
+                    Send a zap to thank them for their contributions
+                  </p>
+                  <ZapButton
+                    target={profileEvent}
+                    className="w-full justify-center bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold"
+                  />
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+export function NIP19Page() {
+  const { nip19: identifier } = useParams<{ nip19: string }>();
+
+  if (!identifier) {
+    return <NotFound />;
+  }
+
+  let decoded;
+  try {
+    decoded = nip19.decode(identifier);
+  } catch {
+    return <NotFound />;
+  }
+
+  const { type, data } = decoded;
+
+  switch (type) {
+    case 'npub':
+      return <ProfilePage pubkey={data as string} />;
+
+    case 'nprofile':
+      return <ProfilePage pubkey={(data as { pubkey: string }).pubkey} />;
+
+    case 'note':
+      // AI agent should implement note view here
+      return <NotFound />;
+
+    case 'nevent':
+      // AI agent should implement event view here
+      return <NotFound />;
+
+    case 'naddr':
+      // AI agent should implement addressable event view here
+      return <NotFound />;
+
+    default:
+      return <NotFound />;
+  }
+}
diff --git a/src/src/pages/NotFound.tsx b/src/src/pages/NotFound.tsx
new file mode 100644
index 0000000..85e429d
--- /dev/null
+++ b/src/src/pages/NotFound.tsx
@@ -0,0 +1,33 @@
+import { useSeoMeta } from "@unhead/react";
+import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
+
+const NotFound = () => {
+  const location = useLocation();
+
+  useSeoMeta({
+    title: "404 - Page Not Found",
+    description: "The page you are looking for could not be found. Return to the home page to continue browsing.",
+  });
+
+  useEffect(() => {
+    console.error(
+      "404 Error: User attempted to access non-existent route:",
+      location.pathname
+    );
+  }, [location.pathname]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">404</h1>
+        <p className="text-xl text-gray-600 dark:text-gray-400 mb-4">Oops! Page not found</p>
+        <a href="/" className="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline">
+          Return to Home
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;
diff --git a/src/src/pages/OnboardingPage.tsx b/src/src/pages/OnboardingPage.tsx
new file mode 100644
index 0000000..95078c5
--- /dev/null
+++ b/src/src/pages/OnboardingPage.tsx
@@ -0,0 +1,618 @@
+import { useState } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { Link } from 'react-router-dom';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useCashu } from '@/hooks/wallet/useCashu';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { WalletModal } from '@/components/WalletModal';
+import { RelayEducation } from '@/components/onboarding/RelayEducation';
+import { useToast } from '@/hooks/useToast';
+import { cn } from '@/lib/utils';
+import {
+  CheckCircle2,
+  Globe,
+  DollarSign,
+  Shield,
+  Video,
+  Zap,
+  MapPin,
+  Calendar,
+  GraduationCap,
+  AlertCircle,
+  ShoppingBag,
+  ExternalLink,
+  Wallet,
+  ChevronRight,
+  Nut,
+  BookOpen,
+  Crown,
+} from 'lucide-react';
+import { FounderFollow } from '@/components/FounderFollow';
+
+// Progress tracker component
+function OnboardingProgress({ 
+  currentStep, 
+  totalSteps, 
+  completedSteps 
+}: { 
+  currentStep: number; 
+  totalSteps: number; 
+  completedSteps: number[];
+}) {
+  const progressPercent = (completedSteps.length / totalSteps) * 100;
+  
+  return (
+    <div className="mb-8">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-sm font-bold text-gray-400 uppercase tracking-wide">
+          Your Progress
+        </span>
+        <span className="text-sm font-bold text-[#ccff00]">
+          {completedSteps.length} of {totalSteps} complete
+        </span>
+      </div>
+      <Progress value={progressPercent} className="h-2 bg-gray-800" />
+      <div className="flex justify-between mt-3">
+        {[1, 2, 3, 4].map((step) => (
+          <div 
+            key={step} 
+            className={cn(
+              "flex items-center gap-2",
+              completedSteps.includes(step) ? "text-[#ccff00]" : "text-gray-500"
+            )}
+          >
+            <div className={cn(
+              "w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold border-2 transition-all",
+              completedSteps.includes(step) 
+                ? "bg-[#ccff00] text-black border-[#ccff00]" 
+                : currentStep === step 
+                  ? "border-[#ff0040] text-[#ff0040] bg-[#ff0040]/10" 
+                  : "border-gray-600"
+            )}>
+              {completedSteps.includes(step) ? <CheckCircle2 className="h-5 w-5" /> : step}
+            </div>
+            <span className="hidden sm:inline text-xs font-medium">
+              {step === 1 && "Login"}
+              {step === 2 && "Explore"}
+              {step === 3 && "Wallet"}
+              {step === 4 && "Go Skate"}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function OnboardingPage() {
+  useSeoMeta({
+    title: 'Get Started - SkateSpots',
+    description: 'Learn how to use SkateSpots and join the skateboarding community on Nostr.',
+  });
+
+  const { user } = useCurrentUser();
+  const { isInitialized: hasCashu, totalBalance: cashuBalance } = useCashu();
+  const { toast } = useToast();
+  const [showRelayEducation, setShowRelayEducation] = useState(false);
+  const [hasSeenRelayEducation, setHasSeenRelayEducation] = useLocalStorage('seen-relay-education', false);
+
+  const handleRelayEducationComplete = () => {
+    setShowRelayEducation(false);
+    setHasSeenRelayEducation(true);
+    toast({
+      title: '🎉 Nice!',
+      description: 'You now understand how Nostr works. Let\'s go skate!',
+    });
+  };
+
+  const copyNpub = () => {
+    navigator.clipboard.writeText('npub1yrnuj56rnen08zp2h9h7p74ghgjx6ma39spmpj6w9hzxywutevsst7k5cx');
+    toast({
+      title: 'Copied!',
+      description: 'npub copied to clipboard. Paste it in your favorite Nostr client to send a DM.',
+    });
+  };
+
+  // Bug report template for DM
+  const bugReportTemplate = `🐛 Bug Report
+
+What happened:
+
+What I expected:
+
+Steps to reproduce:
+
+Device/Browser: ${navigator.userAgent.includes('Mobile') ? 'Mobile' : 'Desktop'} - ${navigator.userAgent.split(' ').slice(-2).join(' ')}
+
+Version: v0.1.0`;
+
+  const bugReportUrl = `/messages/npub1yrnuj56rnen08zp2h9h7p74ghgjx6ma39spmpj6w9hzxywutevsst7k5cx?message=${encodeURIComponent(bugReportTemplate)}`;
+  
+  // Calculate completed steps
+  const completedSteps: number[] = [];
+  if (user) completedSteps.push(1);
+  if (user) completedSteps.push(2); // Exploration is available once logged in
+  if (hasCashu || (user && cashuBalance > 0)) completedSteps.push(3); // Wallet setup
+  // Step 4 is always the final action step
+  
+  const currentStep = user ? (hasCashu ? 4 : 3) : 1;
+
+  return (
+    <Layout>
+      <div className="container px-4 py-12 max-w-4xl">
+        {/* Hero Section with Progress */}
+        <div className="text-center mb-8">
+          <h1 className="text-4xl md:text-6xl font-black uppercase mb-4 neon-header">
+            <span className="neon-red">GET</span> <span className="neon-lime">ROLLING</span>
+          </h1>
+          <p className="text-lg md:text-xl text-gray-400 max-w-2xl mx-auto mb-6">
+            Connect with your local scene. Share spots. Find sessions. It's that simple.
+          </p>
+        </div>
+
+        {/* Progress Tracker */}
+        <OnboardingProgress 
+          currentStep={currentStep} 
+          totalSteps={4} 
+          completedSteps={completedSteps} 
+        />
+          
+        {/* Login/Signup Section - Step 1 */}
+        {!user ? (
+          <Card className="bg-gradient-to-br from-red-500/20 to-lime-500/20 border-2 border-red-500/50 mb-8 relative overflow-hidden" id="login-section">
+            {/* Step indicator */}
+            <div className="absolute top-4 left-4">
+              <div className="w-10 h-10 rounded-full bg-[#ff0040] flex items-center justify-center font-black text-xl shadow-[0_0_20px_rgba(255,0,64,0.5)]">
+                1
+              </div>
+            </div>
+            <CardContent className="p-6 pt-16 text-center">
+              <h2 className="text-2xl font-black uppercase mb-3">CREATE YOUR ACCOUNT</h2>
+              <p className="text-gray-300 mb-6 text-sm max-w-md mx-auto">
+                Log in with your Nostr account or create a new one. Your identity works across all Nostr apps - no company controls it.
+              </p>
+              <LoginArea className="flex justify-center" />
+            </CardContent>
+          </Card>
+        ) : (
+          <Card className="bg-green-950/30 border-2 border-green-500/50 mb-8">
+            <CardContent className="p-4 flex items-center gap-4">
+              <div className="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0">
+                <CheckCircle2 className="h-6 w-6 text-white" />
+              </div>
+              <div className="flex-1">
+                <p className="font-bold text-green-400">Step 1 Complete!</p>
+                <p className="text-sm text-gray-400">You're logged in and ready to explore.</p>
+              </div>
+              
+              {/* Founder Follow - hold for 3s */}
+              <div className="flex-shrink-0 flex flex-col items-center">
+                <FounderFollow size="sm" showBadge={true} />
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        <div className="space-y-8">
+          {/* Quick Info Banner with Learn More */}
+          <Card className="bg-gray-900/50 border-gray-800">
+            <CardContent className="p-4">
+              <div className="flex items-center gap-4">
+                <div className="text-3xl">⚡</div>
+                <div className="flex-1">
+                  <p className="text-gray-300 text-sm">
+                    <strong className="text-white">SkateSpots</strong> uses <strong className="text-[#ccff00]">Nostr</strong> - 
+                    a decentralized protocol where <strong className="text-red-500">YOU</strong> own your data. 
+                    No company can delete your spots or ban your account.
+                  </p>
+                </div>
+              </div>
+              <div className="mt-3 pt-3 border-t border-gray-800">
+                <Button 
+                  variant="outline" 
+                  size="sm"
+                  onClick={() => setShowRelayEducation(true)}
+                  className="gap-2 border-purple-500/50 text-purple-400 hover:bg-purple-500/10"
+                >
+                  <BookOpen className="h-4 w-4" />
+                  Learn How Nostr Works
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Step 2: Explore - What You Can Do */}
+          <Card className={cn(
+            "border-2 relative overflow-hidden",
+            user ? "bg-blue-950/20 border-blue-500/50" : "bg-gray-900/50 border-gray-700 opacity-60"
+          )}>
+            <div className="absolute top-4 left-4">
+              <div className={cn(
+                "w-10 h-10 rounded-full flex items-center justify-center font-black text-xl",
+                user ? "bg-blue-500 shadow-[0_0_20px_rgba(59,130,246,0.5)]" : "bg-gray-700"
+              )}>
+                2
+              </div>
+            </div>
+            <CardContent className="p-6 pt-16">
+              <h2 className="text-2xl font-black uppercase mb-4">EXPLORE THE COMMUNITY</h2>
+              <p className="text-gray-300 mb-6">
+                Everything is free! Browse spots, find coaches, join events - no Bitcoin required.
+              </p>
+              
+              <div className="grid sm:grid-cols-3 gap-4 mb-6">
+                {[
+                  { icon: MapPin, label: "Spots & Shops", desc: "Find skate spots worldwide", href: "/map", color: "red" },
+                  { icon: GraduationCap, label: "The Lab", desc: "Connect with coaches & filmers", href: "/lab", color: "orange" },
+                  { icon: Calendar, label: "Events", desc: "Join sessions & competitions", href: "/events", color: "lime" },
+                ].map((item) => (
+                  <Link key={item.href} to={item.href}>
+                    <Card className={cn(
+                      "h-full transition-all hover:scale-105",
+                      `bg-${item.color}-950/30 border-${item.color}-500/30 hover:border-${item.color}-500/60`
+                    )}>
+                      <CardContent className="p-4 text-center">
+                        <item.icon className={cn("h-8 w-8 mx-auto mb-2", `text-${item.color}-500`)} />
+                        <h3 className="font-bold text-sm mb-1">{item.label}</h3>
+                        <p className="text-xs text-gray-400">{item.desc}</p>
+                      </CardContent>
+                    </Card>
+                  </Link>
+                ))}
+              </div>
+
+              {user && (
+                <div className="flex flex-wrap gap-2 justify-center">
+                  <Link to="/map">
+                    <Button className="bg-[#ff0040] hover:bg-[#ff0040]/90 gap-2 font-bold uppercase">
+                      <MapPin className="h-4 w-4" />
+                      Explore Map
+                    </Button>
+                  </Link>
+                  <Link to="/create-spot">
+                    <Button variant="outline" className="border-[#ccff00] text-[#ccff00] hover:bg-[#ccff00]/10 gap-2 font-bold uppercase">
+                      Add Your First Spot
+                      <ChevronRight className="h-4 w-4" />
+                    </Button>
+                  </Link>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Step 3: Wallet Setup */}
+          <Card className={cn(
+            "border-2 relative overflow-hidden",
+            user ? "bg-orange-950/20 border-orange-500/50" : "bg-gray-900/50 border-gray-700 opacity-60"
+          )}>
+            <div className="absolute top-4 left-4">
+              <div className={cn(
+                "w-10 h-10 rounded-full flex items-center justify-center font-black text-xl",
+                user ? "bg-orange-500 shadow-[0_0_20px_rgba(249,115,22,0.5)]" : "bg-gray-700"
+              )}>
+                3
+              </div>
+            </div>
+            <CardContent className="p-6 pt-16">
+              <div className="flex items-center gap-2 mb-2">
+                <h2 className="text-2xl font-black uppercase">OPTIONAL: SET UP WALLET</h2>
+                <span className="text-xs bg-gray-700 text-gray-300 px-2 py-0.5 rounded uppercase font-bold">Optional</span>
+              </div>
+              <p className="text-gray-300 mb-6">
+                Want to tip skaters who share awesome spots? Set up a wallet to send zaps (Bitcoin tips). 
+                <strong className="text-green-400"> Totally optional!</strong>
+              </p>
+
+              <div className="grid sm:grid-cols-2 gap-4">
+                {/* Cashu Wallet - Built-in */}
+                <Card className="bg-orange-950/30 border-orange-500/30">
+                  <CardContent className="p-4">
+                    <div className="flex items-center gap-3 mb-3">
+                      <div className="w-12 h-12 rounded-lg bg-orange-500/20 flex items-center justify-center">
+                        <Nut className="h-6 w-6 text-orange-500" />
+                      </div>
+                      <div>
+                        <h3 className="font-bold">Cashu Wallet</h3>
+                        <p className="text-xs text-gray-400">Built into SkateSpots</p>
+                      </div>
+                    </div>
+                    <p className="text-sm text-gray-300 mb-3">
+                      No setup needed! Receive Lightning payments directly in the app.
+                    </p>
+                    {hasCashu && cashuBalance > 0 ? (
+                      <div className="flex items-center justify-between p-2 bg-green-950/30 rounded border border-green-500/30">
+                        <span className="text-sm text-green-400 font-bold">Balance:</span>
+                        <span className="text-sm font-bold text-green-400">{cashuBalance.toLocaleString()} sats</span>
+                      </div>
+                    ) : (
+                      <Link to="/wallet">
+                        <Button className="w-full bg-orange-500 hover:bg-orange-600 gap-2">
+                          <Wallet className="h-4 w-4" />
+                          Open Wallet
+                        </Button>
+                      </Link>
+                    )}
+                  </CardContent>
+                </Card>
+
+                {/* External Wallet - NWC */}
+                <Card className="bg-purple-950/30 border-purple-500/30">
+                  <CardContent className="p-4">
+                    <div className="flex items-center gap-3 mb-3">
+                      <div className="w-12 h-12 rounded-lg bg-purple-500/20 flex items-center justify-center">
+                        <Zap className="h-6 w-6 text-purple-500" />
+                      </div>
+                      <div>
+                        <h3 className="font-bold">External Wallet</h3>
+                        <p className="text-xs text-gray-400">Connect via NWC</p>
+                      </div>
+                    </div>
+                    <p className="text-sm text-gray-300 mb-3">
+                      Already have a Lightning wallet? Connect it with Nostr Wallet Connect.
+                    </p>
+                    {user ? (
+                      <WalletModal>
+                        <Button variant="outline" className="w-full border-purple-500/50 text-purple-400 hover:bg-purple-500/10 gap-2">
+                          <Wallet className="h-4 w-4" />
+                          Connect Wallet
+                        </Button>
+                      </WalletModal>
+                    ) : (
+                      <Button variant="outline" className="w-full" disabled>
+                        Login first to connect
+                      </Button>
+                    )}
+                  </CardContent>
+                </Card>
+              </div>
+
+              <p className="text-xs text-gray-500 text-center mt-4">
+                💡 Tip: $5 in Bitcoin = hundreds of zaps to share with the community
+              </p>
+            </CardContent>
+          </Card>
+
+          {/* Step 4: Go Skate! */}
+          <Card className={cn(
+            "border-2 relative overflow-hidden",
+            user ? "bg-[#ccff00]/10 border-[#ccff00]/50" : "bg-gray-900/50 border-gray-700 opacity-60"
+          )}>
+            <div className="absolute top-4 left-4">
+              <div className={cn(
+                "w-10 h-10 rounded-full flex items-center justify-center font-black text-xl",
+                user ? "bg-[#ccff00] text-black shadow-[0_0_20px_rgba(204,255,0,0.5)]" : "bg-gray-700"
+              )}>
+                4
+              </div>
+            </div>
+            <CardContent className="p-6 pt-16 text-center">
+              <h2 className="text-3xl font-black uppercase mb-4">GO SKATE! 🛹</h2>
+              <p className="text-gray-300 mb-6 max-w-md mx-auto">
+                Real skateboarding happens offline. Use SkateSpots to discover spots, then get out there and shred!
+              </p>
+              
+              {user ? (
+                <div className="flex flex-wrap gap-3 justify-center">
+                  <Link to="/map">
+                    <Button size="lg" className="bg-[#ff0040] hover:bg-[#ff0040]/90 gap-2 font-black uppercase shadow-[0_0_20px_rgba(255,0,64,0.5)]">
+                      <MapPin className="h-5 w-5" />
+                      Find Spots Near You
+                    </Button>
+                  </Link>
+                  <Link to="/events">
+                    <Button size="lg" variant="outline" className="border-[#ccff00] text-[#ccff00] hover:bg-[#ccff00]/10 gap-2 font-black uppercase">
+                      <Calendar className="h-5 w-5" />
+                      Join an Event
+                    </Button>
+                  </Link>
+                </div>
+              ) : (
+                <p className="text-gray-500 italic">Complete the steps above to get started</p>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* 100% Free Banner */}
+          <Card className="bg-green-950/30 border-green-500/30">
+            <CardContent className="p-6">
+              <div className="flex items-start gap-4">
+                <CheckCircle2 className="h-8 w-8 text-green-500 flex-shrink-0" />
+                <div>
+                  <h3 className="text-xl font-black uppercase mb-2">100% FREE TO USE</h3>
+                  <p className="text-gray-300">
+                    You don't need any Bitcoin to use SkateSpots. Browse spots, add locations, connect with pros, join events - all free.
+                    Zaps are completely optional for those who want to support creators.
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Why Nostr - Compact Version */}
+          <Card className="bg-purple-950/30 border-purple-500/30">
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3 mb-4">
+                <Globe className="h-8 w-8 text-purple-500" />
+                <h3 className="text-xl font-black uppercase">WHY NOSTR FOR SKATERS?</h3>
+              </div>
+
+              <div className="grid sm:grid-cols-2 gap-4">
+                <div className="p-4 bg-black/50 rounded-lg border border-red-500/20">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Shield className="h-5 w-5 text-red-500" />
+                    <h4 className="font-bold uppercase text-sm">YOUR SPOTS ARE PERMANENT</h4>
+                  </div>
+                  <p className="text-sm text-gray-400">
+                    No company can delete the spots you share. Your contributions live on multiple servers.
+                  </p>
+                </div>
+
+                <div className="p-4 bg-black/50 rounded-lg border border-green-500/20">
+                  <div className="flex items-center gap-2 mb-2">
+                    <DollarSign className="h-5 w-5 text-green-500" />
+                    <h4 className="font-bold uppercase text-sm">DIRECT TIPS TO CREATORS</h4>
+                  </div>
+                  <p className="text-sm text-gray-400">
+                    Zap skaters directly - no platform taking 30%. Money goes straight to them.
+                  </p>
+                </div>
+
+                <div className="p-4 bg-black/50 rounded-lg border border-orange-500/20">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Shield className="h-5 w-5 text-orange-500" />
+                    <h4 className="font-bold uppercase text-sm">OWN YOUR IDENTITY</h4>
+                  </div>
+                  <p className="text-sm text-gray-400">
+                    Your Nostr profile works everywhere. Build your rep once, take it to any app.
+                  </p>
+                </div>
+
+                <div className="p-4 bg-black/50 rounded-lg border border-blue-500/20">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Video className="h-5 w-5 text-blue-500" />
+                    <h4 className="font-bold uppercase text-sm">SUPPORT LOCAL FILMERS</h4>
+                  </div>
+                  <p className="text-sm text-gray-400">
+                    Show real appreciation with real value - not just likes that mean nothing.
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Common Questions */}
+          <div>
+            <h2 className="text-3xl font-black uppercase mb-6 text-center">COMMON QUESTIONS</h2>
+
+            <div className="space-y-4">
+              {[
+                {
+                  q: 'DO I NEED BITCOIN TO USE THIS APP?',
+                  a: 'No! SkateSpots is 100% free. You can browse spots, add locations, find pros at The Lab, create events, and connect with the community without any Bitcoin. Zaps are optional for those who want to tip creators.'
+                },
+                {
+                  q: 'WHAT\'S AN NSEC AND WHY IS IT IMPORTANT?',
+                  a: 'Your nsec (secret key) is like a password that proves you own your account. Unlike regular passwords, there\'s no "forgot password" option. If you lose it, you lose your account forever. That\'s why you download a backup when you sign up.'
+                },
+                {
+                  q: 'IS THIS FREE?',
+                  a: 'Yes! Creating a Nostr account and using SkateSpots is 100% free. You only need Bitcoin if you want to send zaps (tips), and even then you can receive zaps without having any Bitcoin yourself.'
+                },
+                {
+                  q: 'WHY CAN\'T I RESET MY PASSWORD?',
+                  a: 'Nostr doesn\'t have passwords - it has cryptographic keys. This means no company (including us) can access your account, but it also means no one can reset it for you. Your nsec IS your account. Keep it safe!'
+                },
+                {
+                  q: 'CAN I USE THIS ON MY PHONE?',
+                  a: 'Yes! SkateSpots works on any device with a web browser. On mobile, you can add it to your home screen for an app-like experience. Just visit the site and use the "Add to Home Screen" option in your browser menu.'
+                }
+              ].map((faq, i) => (
+                <Card key={i} className="bg-gray-900 border-gray-700">
+                  <CardContent className="p-6">
+                    <h3 className="font-bold mb-2">{faq.q}</h3>
+                    <p className="text-sm text-gray-400">{faq.a}</p>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+
+          {/* CTA */}
+          <Card className="bg-gradient-to-br from-red-500/20 to-lime-500/20 border-red-500/30">
+            <CardContent className="p-8 text-center">
+              <h2 className="text-3xl font-black uppercase mb-4">READY TO SHRED?</h2>
+              <p className="text-gray-300 mb-6">Start exploring spots, connecting with skaters, and building the community.</p>
+              <div className="flex flex-wrap gap-3 justify-center">
+                <Link to="/map">
+                  <Button size="lg" className="bg-red-500 hover:bg-red-600 gap-2 uppercase font-black text-lg">
+                    <MapPin className="h-5 w-5" />
+                    EXPLORE SPOTS
+                  </Button>
+                </Link>
+                <Link to="/lab">
+                  <Button size="lg" variant="outline" className="border-lime-500 hover:bg-lime-500/10 gap-2 uppercase font-black text-lg">
+                    <GraduationCap className="h-5 w-5" />
+                    VISIT THE LAB
+                  </Button>
+                </Link>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Beta Testing Notice */}
+          <Card className="bg-yellow-950/20 border-yellow-500/30">
+            <CardContent className="p-6">
+              <div className="flex items-start gap-4">
+                <AlertCircle className="h-6 w-6 text-yellow-500 flex-shrink-0 mt-0.5" />
+                <div className="flex-1">
+                  <h3 className="font-bold text-yellow-500 uppercase mb-2">Beta Testing</h3>
+                  <p className="text-sm text-gray-300 mb-4">
+                    Thanks for testing SkateSpots! This app is under active development – 
+                    you may encounter bugs or security issues. Your feedback helps us improve.
+                  </p>
+                  <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center">
+                    <div className="flex-1 bg-black/30 rounded-lg p-3 border border-yellow-500/20 min-w-0">
+                      <p className="text-xs text-gray-400 mb-1">Report bugs or share feedback:</p>
+                      <code className="text-xs text-yellow-400 break-all">
+                        npub1yrnuj56rnen08zp2h9h7p74ghgjx6ma39spmpj6w9hzxywutevsst7k5cx
+                      </code>
+                    </div>
+                    <div className="flex gap-2 flex-shrink-0">
+                      <Button 
+                        variant="outline" 
+                        size="sm"
+                        className="border-yellow-500/50 text-yellow-500 hover:bg-yellow-500/10"
+                        onClick={copyNpub}
+                      >
+                        Copy npub
+                      </Button>
+                      {user ? (
+                        <Link to={bugReportUrl}>
+                          <Button 
+                            size="sm"
+                            className="bg-yellow-500 text-black hover:bg-yellow-400"
+                          >
+                            Report Bug
+                          </Button>
+                        </Link>
+                      ) : (
+                        <a 
+                          href="https://njump.me/npub1yrnuj56rnen08zp2h9h7p74ghgjx6ma39spmpj6w9hzxywutevsst7k5cx"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          <Button 
+                            size="sm"
+                            className="bg-yellow-500 text-black hover:bg-yellow-400"
+                          >
+                            View Profile
+                          </Button>
+                        </a>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* Relay Education Dialog */}
+      <Dialog open={showRelayEducation} onOpenChange={setShowRelayEducation}>
+        <DialogContent className="w-[calc(100%-1rem)] sm:max-w-lg p-0 bg-transparent border-none">
+          <RelayEducation 
+            onComplete={handleRelayEducationComplete}
+            onSkip={() => setShowRelayEducation(false)}
+          />
+        </DialogContent>
+      </Dialog>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/PyramidPage.tsx b/src/src/pages/PyramidPage.tsx
new file mode 100644
index 0000000..91bfc2f
--- /dev/null
+++ b/src/src/pages/PyramidPage.tsx
@@ -0,0 +1,204 @@
+import { useSeoMeta } from '@unhead/react';
+import { useMemo } from 'react';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent } from '@/components/ui/card';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { useSkateSpots } from '@/hooks/useSkateSpots';
+import { useSkateEvents } from '@/hooks/useSkateEvents';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useTrustScore } from '@/hooks/useTrustScore';
+import { genUserName } from '@/lib/genUserName';
+import { Trophy, MapPin, Calendar, Zap, Medal } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+function ContributorRow({ pubkey, spots, events, rank }: { pubkey: string; spots: number; events: number; rank: number }) {
+  const author = useAuthor(pubkey);
+  const { data: trustScore } = useTrustScore(pubkey);
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(pubkey);
+  const total = spots + events;
+
+  const rankColor = rank === 1 ? 'text-yellow-400' : rank === 2 ? 'text-gray-300' : rank === 3 ? 'text-orange-400' : 'text-gray-500';
+  const rankEmoji = rank === 1 ? '🥇' : rank === 2 ? '🥈' : rank === 3 ? '🥉' : '';
+  
+  // Trust score color coding
+  const trustScoreColor = trustScore === undefined ? 'text-gray-500' :
+                         trustScore >= 80 ? 'text-green-500' :
+                         trustScore >= 50 ? 'text-yellow-500' :
+                         'text-gray-500';
+
+  return (
+    <div className="flex items-center gap-4 p-4 bg-black/50 rounded-lg border border-gray-700 hover:border-[#ff0040]/50 transition-all">
+      <div className={`text-3xl font-black ${rankColor} w-12 text-center`}>
+        {rankEmoji || `#${rank}`}
+      </div>
+      <Avatar className="h-12 w-12 border-2 border-[#ff0040]/30">
+        <AvatarImage src={metadata?.picture} alt={displayName} />
+        <AvatarFallback className="bg-black text-[#ff0040] font-bold">
+          {displayName.slice(0, 2).toUpperCase()}
+        </AvatarFallback>
+      </Avatar>
+      <div className="flex-1">
+        <div className="font-bold text-white">{displayName}</div>
+        {metadata?.nip05 && (
+          <div className="flex items-center gap-1 text-xs">
+            <div className="w-1.5 h-1.5 rounded-full bg-[#ccff00]" />
+            <span className="text-[#ccff00]">{metadata.nip05}</span>
+          </div>
+        )}
+      </div>
+      <div className="flex gap-4 text-sm">
+        <div className="text-center">
+          <div className="text-[#ff0040] font-black">{spots}</div>
+          <div className="text-gray-500 text-xs uppercase">Spots</div>
+        </div>
+        <div className="text-center">
+          <div className="text-[#ccff00] font-black">{events}</div>
+          <div className="text-gray-500 text-xs uppercase">Events</div>
+        </div>
+        <div className="text-center">
+          <div className="text-[#ff6600] font-black">{total}</div>
+          <div className="text-gray-500 text-xs uppercase">Total</div>
+        </div>
+        <div className="text-center min-w-[48px]">
+          <div className={cn("font-black", trustScoreColor)}>
+            {trustScore ?? '—'}
+          </div>
+          <div className="text-gray-500 text-xs uppercase">Trust</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function PyramidPage() {
+  useSeoMeta({
+    title: 'Pyramid Rankings - SkateSpots',
+    description: 'Top contributors and community leaders.',
+  });
+
+  const { user } = useCurrentUser();
+  const { data: allSpots } = useSkateSpots(500);
+  const { data: allEvents } = useSkateEvents(500);
+  const { data: userTrustScore } = useTrustScore(user?.pubkey);
+
+  // Calculate contributor rankings
+  const rankings = useMemo(() => {
+    if (!allSpots && !allEvents) return [];
+
+    const contributorMap = new Map<string, { spots: number; events: number }>();
+
+    // Count spots per contributor
+    allSpots?.forEach(spot => {
+      const current = contributorMap.get(spot.pubkey) || { spots: 0, events: 0 };
+      contributorMap.set(spot.pubkey, { ...current, spots: current.spots + 1 });
+    });
+
+    // Count events per contributor
+    allEvents?.forEach(event => {
+      const current = contributorMap.get(event.pubkey) || { spots: 0, events: 0 };
+      contributorMap.set(event.pubkey, { ...current, events: current.events + 1 });
+    });
+
+    // Convert to array and sort by total contributions
+    return Array.from(contributorMap.entries())
+      .map(([pubkey, stats]) => ({
+        pubkey,
+        spots: stats.spots,
+        events: stats.events,
+        total: stats.spots + stats.events,
+      }))
+      .sort((a, b) => b.total - a.total);
+  }, [allSpots, allEvents]);
+
+  const userRank = rankings.findIndex(r => r.pubkey === user?.pubkey) + 1;
+  const userStats = rankings.find(r => r.pubkey === user?.pubkey);
+
+  return (
+    <Layout>
+      <div className="container px-4 sm:px-6 py-8 sm:py-12">
+        <div className="text-center mb-12">
+          <Trophy className="h-16 w-16 mx-auto mb-4 text-orange-500" />
+          <h1 className="text-4xl md:text-6xl font-black uppercase mb-4 neon-header">
+            <span className="neon-red">PYRAMID</span> <span className="neon-lime">RANKINGS</span>
+          </h1>
+          <p className="text-gray-400 text-xl">Top contributors in your city</p>
+        </div>
+
+        {/* Your Stats */}
+        {user && userStats && (
+          <Card className="bg-gradient-to-br from-[#ff0040]/20 to-[#ccff00]/20 border-2 border-[#ff0040]/50 max-w-4xl mx-auto mb-8">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <div className="text-4xl font-black text-[#ff0040]">#{userRank}</div>
+                  <div>
+                    <div className="font-black text-xl text-white uppercase">Your Rank</div>
+                    <div className="text-sm text-gray-400">Keep contributing to climb higher!</div>
+                  </div>
+                </div>
+                <div className="flex gap-4">
+                  <div className="text-center">
+                    <div className="text-3xl font-black text-[#ff0040]">{userStats.spots}</div>
+                    <div className="text-xs text-gray-400 uppercase">Spots</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-3xl font-black text-[#ccff00]">{userStats.events}</div>
+                    <div className="text-xs text-gray-400 uppercase">Events</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-3xl font-black text-[#ff6600]">{userStats.total}</div>
+                    <div className="text-xs text-gray-400 uppercase">Total</div>
+                  </div>
+                  <div className="text-center">
+                    <div className={cn(
+                      "text-3xl font-black",
+                      userTrustScore === undefined ? "text-gray-500" :
+                      userTrustScore >= 80 ? "text-green-500" :
+                      userTrustScore >= 50 ? "text-yellow-500" :
+                      "text-gray-500"
+                    )}>
+                      {userTrustScore ?? '—'}
+                    </div>
+                    <div className="text-xs text-gray-400 uppercase">Trust</div>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Leaderboard */}
+        <Card className="bg-black/90 border-2 border-gray-700 max-w-4xl mx-auto">
+          <CardContent className="p-6">
+            <div className="flex items-center gap-3 mb-6">
+              <Medal className="h-8 w-8 text-[#ff0040]" />
+              <h2 className="text-2xl font-black uppercase">Top Contributors</h2>
+            </div>
+
+            {rankings.length > 0 ? (
+              <div className="space-y-2">
+                {rankings.slice(0, 20).map((contributor, idx) => (
+                  <ContributorRow
+                    key={contributor.pubkey}
+                    pubkey={contributor.pubkey}
+                    spots={contributor.spots}
+                    events={contributor.events}
+                    rank={idx + 1}
+                  />
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-12">
+                <Trophy className="h-16 w-16 mx-auto mb-4 text-gray-600" />
+                <p className="text-gray-400">No contributors yet. Be the first to add a spot or create an event!</p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/SettingsPage.tsx b/src/src/pages/SettingsPage.tsx
new file mode 100644
index 0000000..4770176
--- /dev/null
+++ b/src/src/pages/SettingsPage.tsx
@@ -0,0 +1,634 @@
+import { useSeoMeta } from '@unhead/react';
+import { Layout } from '@/components/Layout';
+import { EditProfileForm } from '@/components/EditProfileForm';
+import { RelayListManager } from '@/components/RelayListManager';
+import { FollowListManager } from '@/components/FollowListManager';
+import { WalletModal } from '@/components/WalletModal';
+import { SecuritySettings } from '@/components/SecuritySettings';
+import { RelatrSettings } from '@/components/RelatrSettings';
+import { LanguageSelector } from '@/components/LanguageToggle';
+import { MyDataTab } from '@/components/MyDataTab';
+import { useTranslation } from '@/contexts/LanguageContext';
+import { useQueryClient } from '@tanstack/react-query';
+import { useNostr } from '@nostrify/react';
+import { NSchema as n } from '@nostrify/nostrify';
+import { useState } from 'react';
+
+import { LoginArea } from '@/components/auth/LoginArea';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useAppContext } from '@/hooks/useAppContext';
+import { toast } from '@/hooks/useToast';
+
+import {
+  User,
+  Palette,
+  Radio,
+  Wallet,
+  Settings,
+  Wrench,
+  RotateCcw,
+  Shield,
+  ExternalLink,
+  Languages,
+  RefreshCw,
+  AlertCircle,
+  Database,
+} from 'lucide-react';
+
+// Fallback relays for fetching profile data
+const PROFILE_FALLBACK_RELAYS = [
+  'wss://purplepag.es',
+  'wss://relay.nostr.band',
+  'wss://relay.damus.io',
+  'wss://nos.lol',
+];
+
+function ProfileTab() {
+  const { user, metadata } = useCurrentUser();
+  const { nostr } = useNostr();
+  const queryClient = useQueryClient();
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const handleRefreshProfile = async () => {
+    if (!user) return;
+    
+    setIsRefreshing(true);
+    console.log('[ProfileTab] Manual refresh for pubkey:', user.pubkey.slice(0, 8) + '...');
+    
+    try {
+      // First invalidate the cache
+      queryClient.invalidateQueries({ queryKey: ['author', user.pubkey] });
+      
+      // Try main relays
+      let events = await nostr.query(
+        [{ kinds: [0], authors: [user.pubkey], limit: 1 }],
+        { signal: AbortSignal.timeout(8000) }
+      );
+      
+      console.log('[ProfileTab] Main relays returned', events.length, 'events');
+      
+      // If not found, try fallback relays
+      if (events.length === 0) {
+        console.log('[ProfileTab] Trying fallback relays...');
+        const fallbackGroup = nostr.group(PROFILE_FALLBACK_RELAYS);
+        events = await fallbackGroup.query(
+          [{ kinds: [0], authors: [user.pubkey], limit: 1 }],
+          { signal: AbortSignal.timeout(8000) }
+        );
+        console.log('[ProfileTab] Fallback relays returned', events.length, 'events');
+      }
+      
+      if (events.length > 0) {
+        const event = events[0];
+        try {
+          const profileMetadata = n.json().pipe(n.metadata()).parse(event.content);
+          queryClient.setQueryData(['author', user.pubkey], { metadata: profileMetadata, event });
+          toast({
+            title: 'Profile refreshed!',
+            description: `Found profile: ${profileMetadata.name || 'unnamed'}`,
+          });
+        } catch {
+          toast({
+            title: 'Profile found',
+            description: 'But metadata could not be parsed.',
+            variant: 'destructive',
+          });
+        }
+      } else {
+        toast({
+          title: 'Profile not found',
+          description: 'Your profile (kind 0 event) was not found on any relay. You may need to publish it.',
+          variant: 'destructive',
+        });
+      }
+    } catch (error) {
+      console.error('[ProfileTab] Refresh failed:', error);
+      toast({
+        title: 'Refresh failed',
+        description: 'Could not connect to relays. Check your internet connection.',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  if (!user) {
+    return (
+      <Card className="border-dashed">
+        <CardContent className="py-12 text-center">
+          <User className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+          <h3 className="text-lg font-medium mb-2">Login Required</h3>
+          <p className="text-muted-foreground mb-6">
+            Log in to edit your profile.
+          </p>
+          <LoginArea className="justify-center" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Profile sync status - show if no metadata found */}
+      {!metadata?.name && (
+        <Card className="bg-yellow-950/30 border-2 border-yellow-500/50">
+          <CardContent className="py-4">
+            <div className="flex items-center gap-3">
+              <AlertCircle className="h-5 w-5 text-yellow-500 flex-shrink-0" />
+              <div className="flex-1">
+                <p className="text-sm text-yellow-200">
+                  <strong>Profile not loaded.</strong> Your profile data wasn't found on the configured relays. 
+                  Try refreshing or make sure you've published your profile.
+                </p>
+              </div>
+              <Button
+                onClick={handleRefreshProfile}
+                disabled={isRefreshing}
+                size="sm"
+                variant="outline"
+                className="border-yellow-500/50 text-yellow-400 hover:bg-yellow-500/10 flex-shrink-0"
+              >
+                {isRefreshing ? (
+                  <RefreshCw className="h-4 w-4 animate-spin" />
+                ) : (
+                  <RefreshCw className="h-4 w-4" />
+                )}
+                <span className="ml-2 hidden sm:inline">Refresh</span>
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+      
+      <EditProfileForm />
+
+      {/* Following & Followers */}
+      <FollowListManager />
+
+      {/* NIP-05 Providers Info */}
+      <Card className="bg-blue-950/30 border-2 border-blue-500/50">
+        <CardHeader>
+          <CardTitle className="text-blue-400">NIP-05 Verification Providers</CardTitle>
+          <CardDescription className="text-gray-400">
+            Get a verified Nostr address (like email@domain.com) to build trust. Required for creating events, coaching, and shops.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid md:grid-cols-2 gap-4">
+            {/* Free Providers */}
+            <div className="space-y-3">
+              <h4 className="font-bold text-green-400 uppercase text-sm flex items-center gap-2">
+                <span>✅ Free Options</span>
+              </h4>
+              <a href="https://nostr.directory" target="_blank" rel="noopener noreferrer" className="block p-3 rounded-lg bg-black/50 border border-green-500/30 hover:border-green-500/60 transition-all">
+                <div className="font-bold text-white">nostr.directory</div>
+                <div className="text-xs text-gray-400">Free NIP-05 addresses</div>
+              </a>
+              <a href="https://nip05.social" target="_blank" rel="noopener noreferrer" className="block p-3 rounded-lg bg-black/50 border border-green-500/30 hover:border-green-500/60 transition-all">
+                <div className="font-bold text-white">nip05.social</div>
+                <div className="text-xs text-gray-400">Free verification service</div>
+              </a>
+            </div>
+
+            {/* Paid Providers */}
+            <div className="space-y-3">
+              <h4 className="font-bold text-yellow-400 uppercase text-sm flex items-center gap-2">
+                <span>💎 Premium Options</span>
+              </h4>
+              <a href="https://nostrplebs.com" target="_blank" rel="noopener noreferrer" className="block p-3 rounded-lg bg-black/50 border border-yellow-500/30 hover:border-yellow-500/60 transition-all">
+                <div className="font-bold text-white">nostrplebs.com</div>
+                <div className="text-xs text-gray-400">~$3/month • Custom domains</div>
+              </a>
+              <a href="https://nostr.band" target="_blank" rel="noopener noreferrer" className="block p-3 rounded-lg bg-black/50 border border-yellow-500/30 hover:border-yellow-500/60 transition-all">
+                <div className="font-bold text-white">nostr.band</div>
+                <div className="text-xs text-gray-400">One-time fee • Analytics included</div>
+              </a>
+            </div>
+          </div>
+
+          <div className="p-3 rounded-lg bg-yellow-950/30 border border-yellow-500/30 text-sm text-gray-300">
+            <p><strong className="text-yellow-400">💡 Tip:</strong> After getting your NIP-05, add it to your profile in the "NIP-05" field above and save.</p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function AppearanceTab() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="space-y-6">
+      {/* Language Settings */}
+      <Card className="bg-black/90 border-2 border-[#ccff00]/30">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-white">
+            <Languages className="h-5 w-5 text-[#ccff00]" />
+            {t('settings.language')}
+          </CardTitle>
+          <CardDescription className="text-gray-400">
+            {t('settings.selectLanguage')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <LanguageSelector />
+        </CardContent>
+      </Card>
+
+      {/* Theme Settings */}
+      <Card className="bg-black/90 border-2 border-[#ff0040]/30">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-white">
+            <Palette className="h-5 w-5 text-[#ff0040]" />
+            {t('settings.appearance')}
+          </CardTitle>
+          <CardDescription className="text-gray-400">
+            SkateSpots uses a dark neon aesthetic inspired by skate culture.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="p-6 rounded-lg bg-gradient-to-br from-[#ff0040]/10 to-[#ccff00]/10 border-2 border-[#ff0040]/30 text-center">
+            <div className="text-4xl mb-3">🌙</div>
+            <p className="font-bold text-white mb-2 uppercase tracking-wide">Dark Mode Only</p>
+            <p className="text-sm text-gray-300 leading-relaxed">
+              SkateSpots is designed with a dark neon aesthetic inspired by Tony Hawk's Underground 2 and skate culture.
+              The black background with neon pink, lime, and orange creates the signature skateboarding vibe.
+            </p>
+          </div>
+
+          <div className="text-xs text-gray-400 italic text-center">
+            💡 Embrace the darkness - that's where skaters thrive
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function RelaysTab() {
+  const { user } = useCurrentUser();
+  const { config, updateConfig } = useAppContext();
+  const useSkateRelay = config.useSkateRelay ?? true;
+
+  const handleToggleCommunityRelay = () => {
+    updateConfig((current) => ({
+      ...current,
+      useSkateRelay: !useSkateRelay,
+    }));
+    toast({
+      title: useSkateRelay ? 'Community relay disabled' : 'Community relay enabled',
+      description: useSkateRelay 
+        ? 'You will now only use your configured relays for skate content.'
+        : 'The SkateSpots community relay will be included for skate content.',
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Community Relay Setting - Only shown when logged in */}
+      {user && (
+        <Card className="bg-gradient-to-br from-[#ff0040]/10 to-[#ccff00]/10 border-2 border-[#ccff00]/50">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-[#ccff00]">
+              🛹 Community Relay
+            </CardTitle>
+            <CardDescription className="text-gray-300">
+              Control whether to include the SkateSpots community relay for skate-specific content.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center justify-between p-4 rounded-lg bg-black/50 border border-[#ccff00]/30">
+              <div className="flex-1">
+                <p className="font-bold text-white">Use Community Relay</p>
+                <p className="text-sm text-gray-400 mt-1">
+                  {useSkateRelay 
+                    ? 'Enabled - Your content syncs with the global skate community'
+                    : 'Disabled - Using only your personal relays'}
+                </p>
+              </div>
+              <Button
+                variant={useSkateRelay ? 'default' : 'outline'}
+                onClick={handleToggleCommunityRelay}
+                className={useSkateRelay 
+                  ? 'bg-[#ccff00] text-black hover:bg-[#ccff00]/80' 
+                  : 'border-gray-600 text-gray-400 hover:bg-gray-800'}
+              >
+                {useSkateRelay ? 'Enabled' : 'Disabled'}
+              </Button>
+            </div>
+
+            <div className="p-3 rounded-lg bg-blue-950/30 border border-blue-500/30">
+              <p className="text-sm text-blue-200">
+                <strong>💡 What does this do?</strong>
+              </p>
+              <ul className="text-sm text-gray-300 mt-2 space-y-1 list-disc list-inside">
+                <li><strong>Enabled (default):</strong> Your spots, events, and profiles sync with the global SkateSpots community</li>
+                <li><strong>Disabled:</strong> Content only goes to your personal relays - you're fully decentralized but may not see all community content</li>
+              </ul>
+            </div>
+
+            {!useSkateRelay && (
+              <div className="p-3 rounded-lg bg-yellow-950/30 border border-yellow-500/30">
+                <p className="text-sm text-yellow-200">
+                  <strong>⚠️ Note:</strong> With the community relay disabled, you'll only see skate content from relays you've configured below. Make sure you have at least one relay set up!
+                </p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Radio className="h-5 w-5" />
+            Nostr Relays
+          </CardTitle>
+          <CardDescription>
+            Manage which relays you connect to for sending and receiving data.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <RelayListManager />
+        </CardContent>
+      </Card>
+
+      {/* Default Relays Explanation */}
+      <Card className="bg-blue-950/30 border-2 border-blue-500/50">
+        <CardHeader>
+          <CardTitle className="text-blue-400">Default Relays</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-3">
+            {/* Primary Relay */}
+            <div className="p-4 rounded-lg bg-blue-900/20 border border-blue-500/30">
+              <div className="flex items-start gap-2 mb-2">
+                <div className="text-lg">🛹</div>
+                <div className="flex-1">
+                  <p className="font-bold text-white">goskatespots.nostr1.com</p>
+                  <p className="text-xs text-gray-400 font-mono mt-1">wss://goskatespots.nostr1.com</p>
+                </div>
+              </div>
+              <p className="text-sm text-gray-300 leading-relaxed">
+                Your dedicated skateboarding relay with custom policies for spots, events, Lab services (coaches/filmers), and shops.
+              </p>
+              <div className="mt-3 p-3 rounded bg-yellow-950/30 border border-yellow-500/30">
+                <p className="text-xs text-yellow-200">
+                  <strong>⚠️ Important:</strong> This relay uses an allowlist for trust and spam management. Your npub must be specifically allowed to publish events. DM the relay owner to request access.
+                </p>
+              </div>
+            </div>
+
+            {/* WoTR Relay */}
+            <div className="p-4 rounded-lg bg-purple-900/20 border border-purple-500/30">
+              <div className="flex items-start gap-2 mb-2">
+                <div className="text-lg">🛡️</div>
+                <div className="flex-1">
+                  <p className="font-bold text-white">wotr.relatr.xyz</p>
+                  <p className="text-xs text-gray-400 font-mono mt-1">wss://wotr.relatr.xyz</p>
+                </div>
+              </div>
+              <p className="text-sm text-gray-300 leading-relaxed">
+                Relatr's Web of Trust relay providing trust scores and broader Nostr network connectivity. Powers the global trust score features.
+              </p>
+            </div>
+          </div>
+
+          <p className="text-gray-400 text-sm">
+            Your content publishes to both relays for maximum reliability. If the primary relay rejects your event (not yet on allowlist), the backup relay ensures your content still gets published.
+          </p>
+
+          <div className="p-3 rounded-lg bg-green-950/30 border border-green-500/30">
+            <p className="text-sm text-green-200">
+              <strong>💡 Want to run your own relay?</strong> Check out{' '}
+              <a
+                href="https://relay.tools"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[#ccff00] hover:text-[#ccff00]/80 font-bold underline"
+              >
+                relay.tools
+              </a>
+              {' '}to easily spin up and manage your own Nostr relay!
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function WalletTab() {
+  const { user } = useCurrentUser();
+
+  if (!user) {
+    return (
+      <Card className="border-dashed">
+        <CardContent className="py-12 text-center">
+          <Wallet className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+          <h3 className="text-lg font-medium mb-2">Login Required</h3>
+          <p className="text-muted-foreground mb-6">
+            Log in to manage your wallet.
+          </p>
+          <LoginArea className="justify-center" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Redirect to Wallet Page */}
+      <Card className="bg-gradient-to-br from-orange-950/30 to-yellow-950/30 border-2 border-orange-500/50">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-white">
+            <Wallet className="h-5 w-5 text-orange-400" />
+            Your Wallet
+          </CardTitle>
+          <CardDescription className="text-gray-300">
+            Manage your Cashu wallet and Lightning connections from the dedicated wallet page.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <a href="/wallet">
+            <Button className="gap-2 bg-orange-500 hover:bg-orange-600 w-full sm:w-auto">
+              <Wallet className="h-4 w-4" />
+              Go to Wallet
+            </Button>
+          </a>
+        </CardContent>
+      </Card>
+
+      {/* NWC Quick Connect */}
+      <Card className="bg-purple-950/30 border-2 border-purple-500/50">
+        <CardHeader>
+          <CardTitle className="text-purple-400 flex items-center gap-2">
+            <Shield className="h-5 w-5" />
+            Connect External Wallet (NWC)
+          </CardTitle>
+          <CardDescription className="text-gray-400">
+            Connect your existing Lightning wallet using Nostr Wallet Connect for one-click zaps.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <WalletModal>
+            <Button variant="outline" className="gap-2 border-purple-500/50 text-purple-400 hover:bg-purple-500/10 w-full sm:w-auto">
+              <ExternalLink className="h-4 w-4" />
+              Connect with NWC
+            </Button>
+          </WalletModal>
+          
+          <div className="p-3 bg-black/50 rounded-lg border border-gray-700">
+            <p className="text-sm text-gray-400">
+              <strong className="text-gray-300">What is NWC?</strong> Nostr Wallet Connect lets you link your Lightning wallet (like Alby, Minibits, Zeus, or Coinos) to send zaps without copy-pasting invoices.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function AdvancedTab() {
+  const handleResetSasquatch = () => {
+    // Clear minimized state so Sasquatch appears expanded
+    localStorage.removeItem('sasquatch-minimized');
+    
+    // Show confirmation and reload
+    alert('The Sasquatch has been expanded! 🦧 Refresh the page to see him.');
+    window.location.reload();
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Relatr Integration */}
+      <RelatrSettings />
+
+      {/* Sasquatch Guide */}
+      <Card className="bg-amber-950/30 border-2 border-amber-500/50">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-amber-400">
+            🦧 The Sasquatch Guide
+          </CardTitle>
+          <CardDescription className="text-gray-400">
+            The Sasquatch is your onboarding guide - always available on home and onboarding pages.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="p-4 rounded-lg bg-black/50 border border-amber-500/30">
+            <p className="text-sm text-gray-300 mb-4">
+              The Sasquatch appears as a minimizable button in the bottom-left corner. Click to expand or minimize at any time. 
+              If you want to reset it to expanded view, use the button below.
+            </p>
+            <Button 
+              onClick={handleResetSasquatch}
+              variant="outline"
+              className="gap-2 border-amber-500 text-amber-400 hover:bg-amber-500/10"
+            >
+              <RotateCcw className="h-4 w-4" />
+              Expand The Sasquatch
+            </Button>
+          </div>
+          
+          <div className="text-xs text-gray-400 italic">
+            💡 The Sasquatch is always available - just look for the button in the bottom-left corner!
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default function SettingsPage() {
+  useSeoMeta({
+    title: 'Settings - SkateSpots',
+    description: 'Manage your SkateSpots account settings.',
+  });
+
+  // Check URL params for tab selection
+  const urlParams = new URLSearchParams(window.location.search);
+  const initialTab = urlParams.get('tab') || 'profile';
+
+  return (
+    <Layout>
+      <div className="container px-4 sm:px-6 py-6 sm:py-8">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold flex items-center gap-3">
+            <Settings className="h-8 w-8" />
+            Settings
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            Manage your account and app preferences
+          </p>
+        </div>
+
+        <Tabs defaultValue={initialTab} className="space-y-6">
+          {/* Grid tabs for mobile, horizontal for larger screens */}
+          <TabsList className="grid grid-cols-4 sm:grid-cols-7 gap-1 p-1 h-auto">
+            <TabsTrigger value="profile" className="flex-col sm:flex-row gap-1 sm:gap-1.5 px-2 py-2 sm:py-1.5 h-auto">
+              <User className="h-4 w-4" />
+              <span className="text-[10px] sm:text-sm">Profile</span>
+            </TabsTrigger>
+            <TabsTrigger value="mydata" className="flex-col sm:flex-row gap-1 sm:gap-1.5 px-2 py-2 sm:py-1.5 h-auto">
+              <Database className="h-4 w-4" />
+              <span className="text-[10px] sm:text-sm">My Data</span>
+            </TabsTrigger>
+            <TabsTrigger value="security" className="flex-col sm:flex-row gap-1 sm:gap-1.5 px-2 py-2 sm:py-1.5 h-auto">
+              <Shield className="h-4 w-4" />
+              <span className="text-[10px] sm:text-sm">Security</span>
+            </TabsTrigger>
+            <TabsTrigger value="appearance" className="flex-col sm:flex-row gap-1 sm:gap-1.5 px-2 py-2 sm:py-1.5 h-auto">
+              <Palette className="h-4 w-4" />
+              <span className="text-[10px] sm:text-sm">Theme</span>
+            </TabsTrigger>
+            <TabsTrigger value="relays" className="flex-col sm:flex-row gap-1 sm:gap-1.5 px-2 py-2 sm:py-1.5 h-auto">
+              <Radio className="h-4 w-4" />
+              <span className="text-[10px] sm:text-sm">Relays</span>
+            </TabsTrigger>
+            <TabsTrigger value="wallet" className="flex-col sm:flex-row gap-1 sm:gap-1.5 px-2 py-2 sm:py-1.5 h-auto">
+              <Wallet className="h-4 w-4" />
+              <span className="text-[10px] sm:text-sm">Wallet</span>
+            </TabsTrigger>
+            <TabsTrigger value="advanced" className="flex-col sm:flex-row gap-1 sm:gap-1.5 px-2 py-2 sm:py-1.5 h-auto">
+              <Wrench className="h-4 w-4" />
+              <span className="text-[10px] sm:text-sm">Advanced</span>
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="profile">
+            <ProfileTab />
+          </TabsContent>
+
+          <TabsContent value="mydata">
+            <MyDataTab />
+          </TabsContent>
+
+          <TabsContent value="security">
+            <SecuritySettings />
+          </TabsContent>
+
+          <TabsContent value="appearance">
+            <AppearanceTab />
+          </TabsContent>
+
+          <TabsContent value="relays">
+            <RelaysTab />
+          </TabsContent>
+
+          <TabsContent value="wallet">
+            <WalletTab />
+          </TabsContent>
+
+          <TabsContent value="advanced">
+            <AdvancedTab />
+          </TabsContent>
+        </Tabs>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/ShopDetailPage.tsx b/src/src/pages/ShopDetailPage.tsx
new file mode 100644
index 0000000..56aed29
--- /dev/null
+++ b/src/src/pages/ShopDetailPage.tsx
@@ -0,0 +1,485 @@
+import { useMemo, useState } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
+import ngeohash from 'ngeohash';
+import { Layout } from '@/components/Layout';
+import { SpotMap } from '@/components/SpotMap';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Button } from '@/components/ui/button';
+import { ZapButton } from '@/components/ZapButton';
+import { CommentsSection } from '@/components/comments/CommentsSection';
+import { useShop } from '@/hooks/useShops';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useToast } from '@/hooks/useToast';
+import { genUserName } from '@/lib/genUserName';
+import NotFound from './NotFound';
+import {
+  Store,
+  ArrowLeft,
+  Share2,
+  Navigation,
+  Calendar,
+  Pencil,
+  Trash2,
+  AlertTriangle,
+  Shield,
+  Phone,
+  Mail,
+  Globe,
+  Instagram,
+  Clock,
+  CheckCircle2,
+} from 'lucide-react';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
+function ShopDetailSkeleton() {
+  return (
+    <Layout>
+      <div className="container px-4 py-8">
+        <div className="grid lg:grid-cols-3 gap-8">
+          <div className="lg:col-span-2 space-y-6">
+            <Skeleton className="aspect-video w-full rounded-xl" />
+            <div className="space-y-4">
+              <Skeleton className="h-10 w-3/4" />
+              <Skeleton className="h-6 w-1/2" />
+              <Skeleton className="h-24 w-full" />
+            </div>
+          </div>
+          <div className="space-y-6">
+            <Skeleton className="h-64 w-full rounded-xl" />
+            <Skeleton className="h-32 w-full rounded-xl" />
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+export default function ShopDetailPage() {
+  const { pubkey, identifier } = useParams<{ pubkey: string; identifier: string }>();
+  const { data: shop, isLoading, error } = useShop(identifier || '', pubkey);
+  const author = useAuthor(shop?.pubkey);
+  const { user } = useCurrentUser();
+  const { mutateAsync: publishEvent } = useNostrPublish();
+  const { toast } = useToast();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
+  const isOwner = user && shop && user.pubkey === shop.pubkey;
+  const hasNip05 = user?.metadata?.nip05;
+
+  useSeoMeta({
+    title: shop ? `${shop.name} - SkateSpots` : 'Skate Shop - SkateSpots',
+    description: shop?.description || 'View this skate shop on SkateSpots.',
+  });
+
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(shop?.pubkey || '');
+
+  const coordinates = useMemo(() => {
+    if (!shop?.geohash) return null;
+    const { latitude, longitude } = ngeohash.decode(shop.geohash);
+    return { lat: latitude, lng: longitude };
+  }, [shop?.geohash]);
+
+  // Check if shop owner's NIP-05 domain matches website domain
+  const isVerifiedOwner = useMemo(() => {
+    if (!metadata?.nip05 || !shop?.website) return false;
+    
+    const nip05Domain = metadata.nip05.split('@')[1];
+    const websiteDomain = shop.website.replace(/^https?:\/\/(www\.)?/, '').split('/')[0];
+    
+    return nip05Domain.toLowerCase() === websiteDomain.toLowerCase();
+  }, [metadata?.nip05, shop?.website]);
+
+  const handleShare = async () => {
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title: shop?.name,
+          text: shop?.description || `Check out this skate shop: ${shop?.name}`,
+          url: window.location.href,
+        });
+      } catch {
+        // User cancelled or share failed
+      }
+    } else {
+      navigator.clipboard.writeText(window.location.href);
+      toast({
+        title: 'Link copied!',
+        description: 'Shop link copied to clipboard.',
+      });
+    }
+  };
+
+  const handleDirections = () => {
+    if (coordinates) {
+      window.open(
+        `https://www.google.com/maps/dir/?api=1&destination=${coordinates.lat},${coordinates.lng}`,
+        '_blank'
+      );
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!shop || !user) return;
+
+    try {
+      await publishEvent({
+        kind: 5,
+        content: 'Deleted shop',
+        tags: [
+          ['e', shop.id],
+          ['a', `${shop.event.kind}:${shop.pubkey}:${shop.identifier}`],
+        ],
+      });
+
+      setShowDeleteDialog(false);
+      toast({
+        title: 'Shop deleted',
+        description: 'Deletion request sent to relays. Most relays will remove this content.',
+      });
+
+      queryClient.invalidateQueries({ queryKey: ['skate-shops'] });
+      queryClient.invalidateQueries({ queryKey: ['skate-shop', shop.identifier, shop.pubkey] });
+      queryClient.invalidateQueries({ queryKey: ['user-skate-shops', user.pubkey] });
+
+      setTimeout(() => navigate('/map'), 1000);
+    } catch (error) {
+      toast({
+        title: 'Delete failed',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+      setShowDeleteDialog(false);
+    }
+  };
+
+  if (isLoading) {
+    return <ShopDetailSkeleton />;
+  }
+
+  if (error || !shop) {
+    return <NotFound />;
+  }
+
+  // Create a fake SkateSpot for the map component
+  const spotForMap = {
+    ...shop,
+    title: shop.name,
+    types: ['shop'],
+    accessType: undefined,
+    contactInfo: undefined,
+  };
+
+  return (
+    <Layout>
+      <div className="container px-4 py-8">
+        {/* Back link */}
+        <Link
+          to="/map"
+          className="inline-flex items-center text-muted-foreground hover:text-foreground transition-colors mb-6"
+        >
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Back to Map
+        </Link>
+
+        <div className="grid lg:grid-cols-3 gap-8">
+          {/* Main Content */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Image Gallery */}
+            {shop.images.length > 0 ? (
+              <div className="aspect-video rounded-xl overflow-hidden bg-muted">
+                <img
+                  src={shop.images[0]}
+                  alt={shop.name}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            ) : (
+              <div className="aspect-video rounded-xl bg-gradient-to-br from-[#ccff00]/20 to-[#00ff88]/20 flex items-center justify-center">
+                <Store className="h-16 w-16 text-[#ccff00]/40" />
+              </div>
+            )}
+
+            {/* Additional images */}
+            {shop.images.length > 1 && (
+              <div className="grid grid-cols-4 gap-2">
+                {shop.images.slice(1, 5).map((img, idx) => (
+                  <div key={idx} className="aspect-square rounded-lg overflow-hidden bg-muted">
+                    <img src={img} alt={`${shop.name} ${idx + 2}`} className="w-full h-full object-cover" />
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Shop Info */}
+            <div className="space-y-4">
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1">
+                  <div className="flex items-center gap-3 mb-2">
+                    <h1 className="text-3xl font-black uppercase neon-lime" style={{
+                      fontFamily: 'Impact, "Arial Black", sans-serif'
+                    }}>{shop.name}</h1>
+                    {isVerifiedOwner && (
+                      <Badge className="bg-blue-500/20 text-blue-400 border border-blue-500/50">
+                        <CheckCircle2 className="h-3 w-3 mr-1" />
+                        Verified
+                      </Badge>
+                    )}
+                  </div>
+                  {shop.location && (
+                    <p className="text-muted-foreground flex items-center gap-2">
+                      <Store className="h-4 w-4" />
+                      {shop.location}
+                    </p>
+                  )}
+                </div>
+                <div className="flex items-center gap-2">
+                  {isOwner && (
+                    <>
+                      <Link to={`/edit-shop/${shop.pubkey}/${shop.identifier}`}>
+                        <Button variant="outline" size="icon">
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                      </Link>
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        onClick={() => setShowDeleteDialog(true)}
+                        className="hover:bg-destructive hover:text-destructive-foreground"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </>
+                  )}
+                  <Button variant="outline" size="icon" onClick={handleShare}>
+                    <Share2 className="h-4 w-4" />
+                  </Button>
+                  <Button variant="outline" size="icon" onClick={handleDirections}>
+                    <Navigation className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* Hours */}
+              {shop.hours && (
+                <Card className="bg-black/90 border-2 border-gray-700">
+                  <CardContent className="p-4">
+                    <div className="flex items-center gap-3">
+                      <Clock className="h-5 w-5 text-[#ccff00]" />
+                      <div>
+                        <p className="text-sm text-gray-400">Hours</p>
+                        <p className="text-white font-medium">{shop.hours}</p>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Claim Shop Notice */}
+              {!isOwner && user && (
+                <Card className="bg-[#ccff00]/10 border-2 border-[#ccff00]/50">
+                  <CardContent className="p-6">
+                    <div className="flex items-start gap-3">
+                      <div className="text-2xl">🏪</div>
+                      <div className="flex-1">
+                        <h3 className="font-bold text-[#ccff00] mb-2 uppercase">Are You the Shop Owner?</h3>
+                        <p className="text-sm text-gray-300 mb-4">
+                          If you own or manage this shop, you can claim it to verify ownership using NIP-05.
+                        </p>
+                        {hasNip05 ? (
+                          <div>
+                            <p className="text-xs text-gray-400 mb-3">
+                              To claim this shop, add a NIP-05 identifier that matches the shop's website domain.
+                              For example, if the shop website is <code className="bg-black/50 px-1 rounded">supremenewyork.com</code>,
+                              your NIP-05 should be <code className="bg-black/50 px-1 rounded">you@supremenewyork.com</code>
+                            </p>
+                            <Link to="/settings">
+                              <Button className="gap-2 bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold uppercase w-full">
+                                <Shield className="h-4 w-4" />
+                                Update NIP-05 to Claim
+                              </Button>
+                            </Link>
+                          </div>
+                        ) : (
+                          <div>
+                            <p className="text-xs text-yellow-400 mb-2">⚠️ NIP-05 verification required to claim shops</p>
+                            <Link to="/settings">
+                              <Button variant="outline" size="sm" className="border-yellow-500/50 hover:bg-yellow-500/10 text-yellow-400 font-bold">
+                                Add NIP-05 in Settings
+                              </Button>
+                            </Link>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Description */}
+              {shop.description && (
+                <Card className="bg-black/90 border-2 border-gray-700">
+                  <CardContent className="pt-6">
+                    <p className="whitespace-pre-wrap text-gray-300">{shop.description}</p>
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Comments Section */}
+              {shop.event && <CommentsSection root={shop.event} />}
+            </div>
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-6">
+            {/* Contact Card */}
+            {(shop.phone || shop.email || shop.website || shop.instagram) && (
+              <Card className="bg-[#ccff00]/10 border-2 border-[#ccff00]/50">
+                <CardHeader className="pb-3">
+                  <CardTitle className="text-lg text-[#ccff00] uppercase font-black flex items-center gap-2">
+                    <Phone className="h-5 w-5" />
+                    Contact Shop
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-2">
+                  {shop.phone && (
+                    <a href={`tel:${shop.phone}`} className="flex items-center gap-3 p-3 bg-black/50 rounded-lg hover:bg-black/70 transition-colors">
+                      <Phone className="h-4 w-4 text-[#ccff00]" />
+                      <span className="text-gray-300">{shop.phone}</span>
+                    </a>
+                  )}
+                  {shop.email && (
+                    <a href={`mailto:${shop.email}`} className="flex items-center gap-3 p-3 bg-black/50 rounded-lg hover:bg-black/70 transition-colors">
+                      <Mail className="h-4 w-4 text-[#ccff00]" />
+                      <span className="text-gray-300 truncate">{shop.email}</span>
+                    </a>
+                  )}
+                  {shop.website && (
+                    <a href={shop.website} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 p-3 bg-black/50 rounded-lg hover:bg-black/70 transition-colors">
+                      <Globe className="h-4 w-4 text-[#ccff00]" />
+                      <span className="text-gray-300 truncate">{shop.website.replace(/^https?:\/\//, '')}</span>
+                    </a>
+                  )}
+                  {shop.instagram && (
+                    <a href={`https://instagram.com/${shop.instagram.replace('@', '')}`} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 p-3 bg-black/50 rounded-lg hover:bg-black/70 transition-colors">
+                      <Instagram className="h-4 w-4 text-[#ccff00]" />
+                      <span className="text-gray-300">@{shop.instagram.replace('@', '')}</span>
+                    </a>
+                  )}
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Map */}
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="text-lg flex items-center gap-2">
+                  <Store className="h-5 w-5 text-[#ccff00]" />
+                  Location
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="aspect-square rounded-lg overflow-hidden">
+                  <SpotMap
+                    spots={[spotForMap as any]}
+                    center={coordinates ? [coordinates.lat, coordinates.lng] : undefined}
+                    zoom={15}
+                    className="h-full"
+                  />
+                </div>
+                {coordinates && (
+                  <Button
+                    variant="outline"
+                    className="w-full mt-4 gap-2"
+                    onClick={handleDirections}
+                  >
+                    <Navigation className="h-4 w-4" />
+                    Get Directions
+                  </Button>
+                )}
+              </CardContent>
+            </Card>
+
+            {/* Added By Card with Tip the Mapper */}
+            <Card className="bg-gradient-to-br from-[#ccff00]/5 to-orange-500/5 border-2 border-[#ccff00]/30">
+              <CardHeader className="pb-3">
+                <CardTitle className="text-lg flex items-center gap-2">
+                  <span className="text-[#ccff00]">⚡</span>
+                  Tip the Mapper
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-center gap-3 mb-4">
+                  <Avatar className="h-12 w-12 border-2 border-[#ccff00]/30">
+                    <AvatarImage src={metadata?.picture} alt={displayName} />
+                    <AvatarFallback className="bg-[#ccff00]/10 text-[#ccff00]">
+                      {displayName.slice(0, 2).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium truncate">{displayName}</p>
+                    <p className="text-sm text-muted-foreground flex items-center gap-1">
+                      <Calendar className="h-3 w-3" />
+                      {new Date(shop.createdAt * 1000).toLocaleDateString()}
+                    </p>
+                  </div>
+                </div>
+
+                <p className="text-xs text-gray-400 mb-3">
+                  This shop was added by a community member. Zap them to say thanks!
+                </p>
+
+                <ZapButton
+                  target={shop.event}
+                  className="w-full justify-center bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold"
+                />
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent className="bg-black border-2 border-red-500/50">
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-white flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-red-500" />
+              Delete Shop?
+            </AlertDialogTitle>
+            <AlertDialogDescription className="text-gray-300">
+              This will permanently delete "{shop.name}" from all relays. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel className="border-gray-600">Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              className="bg-red-500 hover:bg-red-600 text-white"
+            >
+              Delete Shop
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/SignersPage.tsx b/src/src/pages/SignersPage.tsx
new file mode 100644
index 0000000..f71f87e
--- /dev/null
+++ b/src/src/pages/SignersPage.tsx
@@ -0,0 +1,376 @@
+import { useSeoMeta } from '@unhead/react';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import {
+  Smartphone,
+  Monitor,
+  Shield,
+  ExternalLink,
+  Star,
+  CheckCircle2,
+  Info,
+  Apple,
+  Chrome,
+} from 'lucide-react';
+
+// Platform detection
+const isAndroid = typeof navigator !== 'undefined' && /Android/i.test(navigator.userAgent);
+const isIOS = typeof navigator !== 'undefined' && /iPhone|iPad|iPod/i.test(navigator.userAgent);
+const isMobile = isAndroid || isIOS;
+
+interface SignerApp {
+  name: string;
+  description: string;
+  features: string[];
+  url: string;
+  recommended?: boolean;
+  platforms: ('android' | 'ios' | 'web' | 'desktop')[];
+  protocol?: string;
+}
+
+const androidSigners: SignerApp[] = [
+  {
+    name: 'Amber',
+    description: 'Native Android signer focused on security and ease of use. The best choice for Android users.',
+    features: ['Native app', 'Multiple key support', 'Event signing', 'Secure key storage'],
+    url: 'https://github.com/greenart7c3/Amber',
+    recommended: true,
+    platforms: ['android'],
+    protocol: 'NIP-55',
+  },
+  {
+    name: 'Nsec.app',
+    description: 'Cross-platform remote signer that acts as a secure vault for your keys.',
+    features: ['Remote signing', 'Works with any client', 'Cross-device sync'],
+    url: 'https://nsec.app',
+    platforms: ['android', 'ios', 'web'],
+    protocol: 'NIP-46',
+  },
+  {
+    name: 'Nostria Signer',
+    description: 'Remote signer app with keys stored in secure device storage.',
+    features: ['Secure storage', 'Remote signing', 'Multi-key support'],
+    url: 'https://nostria.app',
+    platforms: ['android', 'ios'],
+    protocol: 'NIP-46',
+  },
+  {
+    name: 'Nowser',
+    description: 'Multi-auth signer supporting both browser extension and remote signing protocols.',
+    features: ['NIP-07 support', 'NIP-46 support', 'Flexible signing'],
+    url: 'https://nowser.app',
+    platforms: ['android', 'ios'],
+    protocol: 'NIP-07 / NIP-46',
+  },
+];
+
+const iosSigners: SignerApp[] = [
+  {
+    name: 'Nsec.app',
+    description: 'The best option for iOS. Use it as a remote signer with any Nostr client.',
+    features: ['Remote signing', 'Works with any client', 'Cross-device sync'],
+    url: 'https://nsec.app',
+    recommended: true,
+    platforms: ['android', 'ios', 'web'],
+    protocol: 'NIP-46',
+  },
+  {
+    name: 'Nowser (TestFlight)',
+    description: 'iOS signer available via TestFlight with signing capabilities similar to Android.',
+    features: ['NIP-07 support', 'NIP-46 support', 'Native iOS app'],
+    url: 'https://testflight.apple.com/join/nowser',
+    platforms: ['ios'],
+    protocol: 'NIP-07 / NIP-46',
+  },
+  {
+    name: 'Nostria Signer',
+    description: 'Remote signer with secure key storage on your device.',
+    features: ['Secure storage', 'Remote signing', 'Multi-key support'],
+    url: 'https://nostria.app',
+    platforms: ['android', 'ios'],
+    protocol: 'NIP-46',
+  },
+];
+
+const browserSigners: SignerApp[] = [
+  {
+    name: 'nos2x',
+    description: 'Simple and reliable browser extension for signing Nostr events.',
+    features: ['Lightweight', 'Easy to use', 'Chrome/Brave/Edge support'],
+    url: 'https://chrome.google.com/webstore/detail/nos2x/kpgefcfmnafjgpblomihpgmejjdanjjp',
+    recommended: true,
+    platforms: ['web'],
+    protocol: 'NIP-07',
+  },
+  {
+    name: 'Alby',
+    description: 'Bitcoin Lightning wallet with built-in Nostr key management and WebLN.',
+    features: ['Lightning payments', 'Nostr signing', 'WebLN support', 'NWC support'],
+    url: 'https://getalby.com',
+    platforms: ['web', 'desktop'],
+    protocol: 'NIP-07',
+  },
+  {
+    name: 'Flamingo',
+    description: 'Nostr-focused browser extension with clean interface.',
+    features: ['Nostr signing', 'Clean UI', 'Privacy-focused'],
+    url: 'https://www.flamingowallet.com',
+    platforms: ['web'],
+    protocol: 'NIP-07',
+  },
+  {
+    name: 'Kiwi Browser + Extension',
+    description: 'On Android/GrapheneOS, use Kiwi Browser to load nos2x or Alby extensions.',
+    features: ['Extension support on mobile', 'Full browser experience', 'Works on GrapheneOS'],
+    url: 'https://kiwibrowser.com',
+    platforms: ['android'],
+    protocol: 'NIP-07',
+  },
+];
+
+function SignerCard({ signer }: { signer: SignerApp }) {
+  return (
+    <Card className={`bg-black/50 border-2 transition-all hover:shadow-lg ${
+      signer.recommended 
+        ? 'border-[#ccff00]/50 shadow-[0_0_15px_rgba(204,255,0,0.1)]' 
+        : 'border-gray-700/50 hover:border-gray-600'
+    }`}>
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div>
+            <CardTitle className="text-lg font-bold flex items-center gap-2">
+              {signer.name}
+              {signer.recommended && (
+                <Badge className="bg-[#ccff00] text-black text-xs">
+                  <Star className="h-3 w-3 mr-1" />
+                  Recommended
+                </Badge>
+              )}
+            </CardTitle>
+            {signer.protocol && (
+              <Badge variant="outline" className="mt-1 text-xs text-gray-400 border-gray-600">
+                {signer.protocol}
+              </Badge>
+            )}
+          </div>
+        </div>
+        <CardDescription className="text-gray-400 mt-2">
+          {signer.description}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pt-0">
+        <div className="flex flex-wrap gap-1.5 mb-4">
+          {signer.features.map((feature) => (
+            <span
+              key={feature}
+              className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-gray-800 text-gray-300"
+            >
+              <CheckCircle2 className="h-3 w-3 text-green-500" />
+              {feature}
+            </span>
+          ))}
+        </div>
+        <Button
+          asChild
+          className={`w-full ${
+            signer.recommended
+              ? 'bg-[#ccff00] text-black hover:bg-[#ccff00]/90'
+              : 'bg-gray-800 hover:bg-gray-700'
+          }`}
+        >
+          <a href={signer.url} target="_blank" rel="noopener noreferrer">
+            <ExternalLink className="h-4 w-4 mr-2" />
+            Get {signer.name}
+          </a>
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
+
+function PlatformSection({
+  icon: Icon,
+  title,
+  description,
+  signers,
+  highlighted,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  description: string;
+  signers: SignerApp[];
+  highlighted?: boolean;
+}) {
+  return (
+    <section className={`py-8 ${highlighted ? 'bg-[#ccff00]/5 -mx-4 px-4 rounded-2xl border border-[#ccff00]/20' : ''}`}>
+      <div className="flex items-center gap-3 mb-2">
+        <div className={`p-2 rounded-lg ${highlighted ? 'bg-[#ccff00]/20' : 'bg-gray-800'}`}>
+          <Icon className={`h-6 w-6 ${highlighted ? 'text-[#ccff00]' : 'text-gray-400'}`} />
+        </div>
+        <div>
+          <h2 className={`text-xl font-bold ${highlighted ? 'text-[#ccff00]' : 'text-white'}`}>
+            {title}
+          </h2>
+          {highlighted && (
+            <Badge className="bg-[#ccff00] text-black text-xs mt-1">
+              Your Platform
+            </Badge>
+          )}
+        </div>
+      </div>
+      <p className="text-gray-400 mb-6 ml-12">{description}</p>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {signers.map((signer) => (
+          <SignerCard key={signer.name} signer={signer} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default function SignersPage() {
+  useSeoMeta({
+    title: 'Signer Apps - Secure Your Nostr Keys | SkateSpots',
+    description: 'Learn about signer apps that keep your Nostr keys secure. Find the best option for Android, iOS, or desktop browsers.',
+  });
+
+  // Determine platform order - show user's platform first
+  const platformOrder = isAndroid 
+    ? ['android', 'ios', 'browser'] as const
+    : isIOS 
+      ? ['ios', 'android', 'browser'] as const
+      : ['browser', 'android', 'ios'] as const;
+
+  return (
+    <Layout>
+      <div className="min-h-screen bg-black">
+        {/* Hero Section */}
+        <section className="relative py-12 md:py-16 border-b border-[#ff0040]/30">
+          <div className="absolute inset-0 bg-gradient-to-b from-[#ff0040]/10 to-transparent" />
+          <div className="container px-4 relative">
+            <div className="max-w-3xl mx-auto text-center">
+              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#ff0040]/20 border border-[#ff0040]/50 mb-6">
+                <Shield className="h-5 w-5 text-[#ff0040]" />
+                <span className="text-[#ff0040] font-bold uppercase text-sm">Security Guide</span>
+              </div>
+              
+              <h1 className="text-3xl md:text-5xl font-black uppercase mb-4" style={{
+                fontFamily: 'Impact, "Arial Black", sans-serif',
+              }}>
+                <span className="text-white">Protect Your</span>{' '}
+                <span className="text-[#ccff00]">Nostr Keys</span>
+              </h1>
+              
+              <p className="text-gray-300 text-lg mb-6 max-w-2xl mx-auto">
+                Signer apps keep your private keys secure by signing events without exposing them. 
+                Instead of pasting your key into every app, let a signer handle it safely.
+              </p>
+
+              <Alert className="bg-blue-950/50 border-blue-500/50 text-left max-w-xl mx-auto">
+                <Info className="h-4 w-4 text-blue-400" />
+                <AlertDescription className="text-blue-200 text-sm">
+                  <strong>Why use a signer?</strong> Your Nostr private key is like a password that can never be changed. 
+                  A signer app keeps it safe while letting you use any Nostr app.
+                </AlertDescription>
+              </Alert>
+            </div>
+          </div>
+        </section>
+
+        {/* Signer Sections */}
+        <div className="container px-4 py-8 space-y-8">
+          {platformOrder.map((platform, index) => {
+            const isUserPlatform = index === 0 && isMobile;
+            
+            if (platform === 'android') {
+              return (
+                <PlatformSection
+                  key="android"
+                  icon={Smartphone}
+                  title="Android Signers"
+                  description="Native signer apps for Android devices, including GrapheneOS."
+                  signers={androidSigners}
+                  highlighted={isAndroid && index === 0}
+                />
+              );
+            }
+            
+            if (platform === 'ios') {
+              return (
+                <PlatformSection
+                  key="ios"
+                  icon={Apple}
+                  title="iOS Signers"
+                  description="Signer options for iPhone and iPad users."
+                  signers={iosSigners}
+                  highlighted={isIOS && index === 0}
+                />
+              );
+            }
+            
+            return (
+              <PlatformSection
+                key="browser"
+                icon={Chrome}
+                title="Browser Extensions"
+                description="Desktop browser extensions for signing on web apps."
+                signers={browserSigners}
+                highlighted={!isMobile && index === 0}
+              />
+            );
+          })}
+
+          {/* Protocol Info */}
+          <section className="py-8 border-t border-gray-800">
+            <h2 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
+              <Info className="h-5 w-5 text-gray-400" />
+              Understanding Protocols
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Card className="bg-black/50 border-gray-700/50">
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-base">NIP-07</CardTitle>
+                </CardHeader>
+                <CardContent className="text-sm text-gray-400">
+                  Browser extension standard. The extension injects signing capabilities into web apps. 
+                  Used by Alby, nos2x, Flamingo, and similar extensions.
+                </CardContent>
+              </Card>
+              <Card className="bg-black/50 border-gray-700/50">
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-base">NIP-46</CardTitle>
+                </CardHeader>
+                <CardContent className="text-sm text-gray-400">
+                  Remote signing protocol ("bunker"). Your signer app approves requests from other apps 
+                  without sharing your keys. Used by Nsec.app, Nostria, and Nowser.
+                </CardContent>
+              </Card>
+              <Card className="bg-black/50 border-gray-700/50">
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-base">NIP-55</CardTitle>
+                </CardHeader>
+                <CardContent className="text-sm text-gray-400">
+                  Android-specific signer protocol. Native apps can request signatures from Amber 
+                  without exposing keys. The most seamless Android experience.
+                </CardContent>
+              </Card>
+              <Card className="bg-black/50 border-gray-700/50">
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-base">Which to choose?</CardTitle>
+                </CardHeader>
+                <CardContent className="text-sm text-gray-400">
+                  <strong className="text-white">Android:</strong> Amber (NIP-55) for native apps<br />
+                  <strong className="text-white">iOS:</strong> Nsec.app (NIP-46) for best compatibility<br />
+                  <strong className="text-white">Desktop:</strong> Alby, nos2x, or Flamingo (NIP-07)
+                </CardContent>
+              </Card>
+            </div>
+          </section>
+        </div>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/SpotCollectionsPage.tsx b/src/src/pages/SpotCollectionsPage.tsx
new file mode 100644
index 0000000..1b9b0b0
--- /dev/null
+++ b/src/src/pages/SpotCollectionsPage.tsx
@@ -0,0 +1,500 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useSeoMeta } from '@unhead/react';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Badge } from '@/components/ui/badge';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { useToast } from '@/hooks/useToast';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import {
+  useMySpotCollections,
+  useCreateSpotCollection,
+  useDeleteSpotCollection,
+  useUpdateSpotCollection,
+} from '@/hooks/useSpotCollections';
+import type { SpotCollection } from '@/lib/types';
+import {
+  FolderPlus,
+  FolderOpen,
+  MapPin,
+  Plus,
+  Loader2,
+  Pencil,
+  Trash2,
+  Calendar,
+  ArrowRight,
+  Bookmark,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+function CollectionCard({
+  collection,
+  onEdit,
+  onDelete,
+}: {
+  collection: SpotCollection;
+  onEdit: (collection: SpotCollection) => void;
+  onDelete: (collection: SpotCollection) => void;
+}) {
+  return (
+    <Link to={`/collections/${collection.pubkey}/${collection.identifier}`}>
+      <Card className={cn(
+        "group overflow-hidden hover:shadow-2xl transition-all duration-300 border-2 bg-black/90 backdrop-blur active:scale-[0.98]",
+        "border-[#ccff00]/30 hover:border-[#ccff00]/70 hover:shadow-[#ccff00]/20"
+      )}>
+        {/* Image/Header */}
+        <div className="relative aspect-video overflow-hidden bg-gradient-to-br from-[#ccff00]/20 to-[#00ff88]/20">
+          {collection.image ? (
+            <img
+              src={collection.image}
+              alt={collection.title}
+              className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+            />
+          ) : (
+            <div className="w-full h-full flex items-center justify-center">
+              <FolderOpen className="h-12 w-12 sm:h-16 sm:w-16 text-[#ccff00]/40" />
+            </div>
+          )}
+          {/* Spot count badge */}
+          <div className="absolute top-2 left-2 sm:top-3 sm:left-3">
+            <Badge className="bg-black/80 text-[#ccff00] backdrop-blur-sm border border-[#ccff00]/50 font-bold text-xs">
+              <MapPin className="h-2.5 w-2.5 sm:h-3 sm:w-3 mr-1" />
+              {collection.spotRefs.length} spot{collection.spotRefs.length !== 1 ? 's' : ''}
+            </Badge>
+          </div>
+          {/* Action buttons - always visible on mobile, hover on desktop */}
+          <div className="absolute top-2 right-2 sm:top-3 sm:right-3 flex gap-1 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-8 w-8 sm:h-8 sm:w-8 bg-black/80 hover:bg-black text-white touch-manipulation"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onEdit(collection);
+              }}
+            >
+              <Pencil className="h-4 w-4" />
+            </Button>
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-8 w-8 sm:h-8 sm:w-8 bg-black/80 hover:bg-red-500/80 text-white touch-manipulation"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onDelete(collection);
+              }}
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+
+        <CardHeader className="p-3 sm:p-4 pb-1 sm:pb-2">
+          <h3 className="font-bold text-sm sm:text-lg leading-tight transition-colors line-clamp-1 uppercase tracking-wide text-white group-hover:text-[#ccff00]">
+            {collection.title}
+          </h3>
+          {collection.description && (
+            <p className="text-xs sm:text-sm text-gray-400 line-clamp-2">
+              {collection.description}
+            </p>
+          )}
+        </CardHeader>
+
+        <CardContent className="p-3 sm:p-4 pt-0 sm:pt-0 pb-3 sm:pb-4">
+          <div className="flex items-center justify-between text-[10px] sm:text-xs text-gray-500">
+            <span className="flex items-center gap-1">
+              <Calendar className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
+              {new Date(collection.createdAt * 1000).toLocaleDateString()}
+            </span>
+            <span className="flex items-center gap-1 text-[#ccff00] sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">
+              View
+              <ArrowRight className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}
+
+function CollectionCardSkeleton() {
+  return (
+    <Card className="overflow-hidden border-2 border-gray-800">
+      <Skeleton className="aspect-video w-full" />
+      <CardHeader className="pb-2">
+        <Skeleton className="h-6 w-3/4" />
+        <Skeleton className="h-4 w-full" />
+      </CardHeader>
+      <CardContent className="pb-4">
+        <Skeleton className="h-4 w-1/3" />
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function SpotCollectionsPage() {
+  const { user } = useCurrentUser();
+  const { data: collections, isLoading } = useMySpotCollections();
+  const { createCollection, isPending: isCreating } = useCreateSpotCollection();
+  const { deleteCollection, isPending: isDeleting } = useDeleteSpotCollection();
+  const { updateCollection, isPending: isUpdating } = useUpdateSpotCollection();
+  const { toast } = useToast();
+
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [selectedCollection, setSelectedCollection] = useState<SpotCollection | null>(null);
+
+  const [newTitle, setNewTitle] = useState('');
+  const [newDescription, setNewDescription] = useState('');
+  const [editTitle, setEditTitle] = useState('');
+  const [editDescription, setEditDescription] = useState('');
+
+  useSeoMeta({
+    title: 'My Spot Collections - SkateSpots',
+    description: 'Organize your favorite skate spots into personalized collections',
+  });
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newTitle.trim()) return;
+
+    try {
+      await createCollection({
+        title: newTitle.trim(),
+        description: newDescription.trim() || undefined,
+      });
+      toast({
+        title: 'Collection created!',
+        description: `"${newTitle}" is ready for spots`,
+      });
+      setNewTitle('');
+      setNewDescription('');
+      setShowCreateDialog(false);
+    } catch (error) {
+      toast({
+        title: 'Failed to create collection',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleEdit = (collection: SpotCollection) => {
+    setSelectedCollection(collection);
+    setEditTitle(collection.title);
+    setEditDescription(collection.description || '');
+    setShowEditDialog(true);
+  };
+
+  const handleEditSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedCollection || !editTitle.trim()) return;
+
+    try {
+      await updateCollection({
+        collection: selectedCollection,
+        title: editTitle.trim(),
+        description: editDescription.trim() || undefined,
+      });
+      toast({
+        title: 'Collection updated!',
+        description: 'Your changes have been saved',
+      });
+      setShowEditDialog(false);
+      setSelectedCollection(null);
+    } catch (error) {
+      toast({
+        title: 'Failed to update collection',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleDelete = (collection: SpotCollection) => {
+    setSelectedCollection(collection);
+    setShowDeleteDialog(true);
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!selectedCollection) return;
+
+    try {
+      await deleteCollection(selectedCollection);
+      toast({
+        title: 'Collection deleted',
+        description: `"${selectedCollection.title}" has been removed`,
+      });
+      setShowDeleteDialog(false);
+      setSelectedCollection(null);
+    } catch (error) {
+      toast({
+        title: 'Failed to delete collection',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Layout>
+      <div className="container px-4 py-4 sm:py-8">
+        {/* Header */}
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6 sm:mb-8">
+          <div className="min-w-0">
+            <h1 className="text-xl sm:text-3xl font-black uppercase tracking-wider flex items-center gap-2 sm:gap-3">
+              <Bookmark className="h-6 w-6 sm:h-8 sm:w-8 text-[#ccff00] flex-shrink-0" />
+              <span className="neon-text truncate">MY COLLECTIONS</span>
+            </h1>
+            <p className="text-gray-400 mt-1 sm:mt-2 text-sm sm:text-base">
+              Organize your favorite spots into personalized lists
+            </p>
+          </div>
+          {user && (
+            <Button
+              onClick={() => setShowCreateDialog(true)}
+              className="bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold uppercase gap-2 h-11 sm:h-auto w-full sm:w-auto flex-shrink-0"
+            >
+              <Plus className="h-4 w-4" />
+              New Collection
+            </Button>
+          )}
+        </div>
+
+        {/* Not logged in state */}
+        {!user && (
+          <Card className="border-dashed border-2 border-gray-700">
+            <CardContent className="py-16 text-center">
+              <FolderPlus className="h-16 w-16 mx-auto mb-4 text-gray-600" />
+              <h2 className="text-xl font-bold mb-2">Log in to create collections</h2>
+              <p className="text-gray-400 mb-6">
+                Save your favorite spots to personalized lists like "Barcelona Trip 2024" or "Best Rails in LA"
+              </p>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Loading state */}
+        {user && isLoading && (
+          <div className="grid gap-4 sm:gap-6 grid-cols-2 lg:grid-cols-3">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <CollectionCardSkeleton key={i} />
+            ))}
+          </div>
+        )}
+
+        {/* Empty state */}
+        {user && !isLoading && collections?.length === 0 && (
+          <Card className="border-dashed border-2 border-gray-700">
+            <CardContent className="py-16 text-center">
+              <FolderOpen className="h-16 w-16 mx-auto mb-4 text-[#ccff00]/40" />
+              <h2 className="text-xl font-bold mb-2">No collections yet</h2>
+              <p className="text-gray-400 mb-6">
+                Create your first collection to start organizing spots
+              </p>
+              <Button
+                onClick={() => setShowCreateDialog(true)}
+                className="bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold uppercase gap-2"
+              >
+                <Plus className="h-4 w-4" />
+                Create Your First Collection
+              </Button>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Collections grid */}
+        {user && !isLoading && collections && collections.length > 0 && (
+          <div className="grid gap-4 sm:gap-6 grid-cols-2 lg:grid-cols-3">
+            {collections.map((collection) => (
+              <CollectionCard
+                key={collection.id}
+                collection={collection}
+                onEdit={handleEdit}
+                onDelete={handleDelete}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Create Collection Dialog */}
+      <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
+        <DialogContent className="bg-black border-2 border-[#ccff00]/50 mx-4 max-w-[calc(100vw-2rem)] sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-white">
+              <FolderPlus className="h-5 w-5 text-[#ccff00]" />
+              Create New Collection
+            </DialogTitle>
+            <DialogDescription className="text-gray-400 text-sm">
+              Give your collection a name and optional description
+            </DialogDescription>
+          </DialogHeader>
+          <form onSubmit={handleCreate} className="space-y-4 mt-4">
+            <div className="space-y-2">
+              <Label htmlFor="create-title" className="text-white text-sm">Collection Name</Label>
+              <Input
+                id="create-title"
+                value={newTitle}
+                onChange={(e) => setNewTitle(e.target.value)}
+                placeholder="Barcelona Trip 2024"
+                className="bg-black border-gray-700 text-white h-11"
+                autoFocus
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="create-description" className="text-white text-sm">Description (optional)</Label>
+              <Textarea
+                id="create-description"
+                value={newDescription}
+                onChange={(e) => setNewDescription(e.target.value)}
+                placeholder="My favorite spots from my Barcelona trip..."
+                className="bg-black border-gray-700 text-white resize-none"
+                rows={3}
+              />
+            </div>
+            <div className="flex gap-2 pt-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setShowCreateDialog(false)}
+                className="flex-1 border-gray-700 h-11"
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={!newTitle.trim() || isCreating}
+                className="flex-1 bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold h-11"
+              >
+                {isCreating ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Creating...
+                  </>
+                ) : (
+                  <>
+                    <Plus className="h-4 w-4 mr-2" />
+                    <span className="hidden sm:inline">Create Collection</span>
+                    <span className="sm:hidden">Create</span>
+                  </>
+                )}
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Edit Collection Dialog */}
+      <Dialog open={showEditDialog} onOpenChange={setShowEditDialog}>
+        <DialogContent className="bg-black border-2 border-[#ccff00]/50 mx-4 max-w-[calc(100vw-2rem)] sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-white">
+              <Pencil className="h-5 w-5 text-[#ccff00]" />
+              Edit Collection
+            </DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleEditSubmit} className="space-y-4 mt-4">
+            <div className="space-y-2">
+              <Label htmlFor="edit-title" className="text-white text-sm">Collection Name</Label>
+              <Input
+                id="edit-title"
+                value={editTitle}
+                onChange={(e) => setEditTitle(e.target.value)}
+                className="bg-black border-gray-700 text-white h-11"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-description" className="text-white text-sm">Description (optional)</Label>
+              <Textarea
+                id="edit-description"
+                value={editDescription}
+                onChange={(e) => setEditDescription(e.target.value)}
+                className="bg-black border-gray-700 text-white resize-none"
+                rows={3}
+              />
+            </div>
+            <div className="flex gap-2 pt-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setShowEditDialog(false)}
+                className="flex-1 border-gray-700 h-11"
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={!editTitle.trim() || isUpdating}
+                className="flex-1 bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold h-11"
+              >
+                {isUpdating ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Saving...
+                  </>
+                ) : (
+                  'Save Changes'
+                )}
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent className="bg-black border-2 border-red-500/50 mx-4 max-w-[calc(100vw-2rem)] sm:max-w-lg">
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-white">Delete Collection?</AlertDialogTitle>
+            <AlertDialogDescription className="text-gray-400 text-sm">
+              This will permanently delete "{selectedCollection?.title}". The spots themselves won't be affected.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter className="flex-col sm:flex-row gap-2 sm:gap-0">
+            <AlertDialogCancel className="border-gray-700 h-11 sm:h-auto">Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteConfirm}
+              disabled={isDeleting}
+              className="bg-red-500 hover:bg-red-600 text-white h-11 sm:h-auto"
+            >
+              {isDeleting ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Deleting...
+                </>
+              ) : (
+                'Delete'
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/SpotDetailPage.tsx b/src/src/pages/SpotDetailPage.tsx
new file mode 100644
index 0000000..755908c
--- /dev/null
+++ b/src/src/pages/SpotDetailPage.tsx
@@ -0,0 +1,961 @@
+import { useMemo, useState } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
+import ngeohash from 'ngeohash';
+import { Layout } from '@/components/Layout';
+import { SpotMap } from '@/components/SpotMap';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Button } from '@/components/ui/button';
+import { ZapButton } from '@/components/ZapButton';
+import { CommentsSection } from '@/components/comments/CommentsSection';
+import { useSkateSpot } from '@/hooks/useSkateSpots';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useToast } from '@/hooks/useToast';
+import { useSpotWeather } from '@/hooks/useSpotWeather';
+import { useMarketplaceAtSpot } from '@/hooks/useMarketplace';
+import { useSpotServices } from '@/hooks/useSpotServices';
+import { MarketplaceItemCard } from '@/components/MarketplaceItemCard';
+import { genUserName } from '@/lib/genUserName';
+import { SPOT_TYPE_LABELS, ACCESS_TYPE_INFO } from '@/lib/types';
+import NotFound from './NotFound';
+import {
+  MapPin,
+  ArrowLeft,
+  Share2,
+  Navigation,
+  Calendar,
+  Pencil,
+  Trash2,
+  AlertTriangle,
+  Shield,
+  Phone,
+  Mail,
+  Globe,
+  Instagram,
+  Cloud,
+  Wind,
+  Droplets,
+  Sun,
+  ShoppingBag,
+  Plus,
+  Bookmark,
+  Users,
+  Camera,
+  Tags,
+  GraduationCap,
+  Video,
+  Star,
+  Flag,
+  MoreHorizontal,
+} from 'lucide-react';
+import { ReportDialog } from '@/components/ReportDialog';
+import { WhosSkating } from '@/components/WhosSkating';
+import { SetStatusDialog } from '@/components/SetStatusDialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { AddToCollectionDialog } from '@/components/AddToCollectionDialog';
+import { AddPhotoToSpot } from '@/components/AddPhotoToSpot';
+import { AddTagsToSpot } from '@/components/AddTagsToSpot';
+import { SpotOwnership } from '@/components/SpotOwnership';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useSpotPhotos, useAggregatedSpotTags } from '@/hooks/useSpotContributions';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
+function SpotDetailSkeleton() {
+  return (
+    <Layout>
+      <div className="container px-4 py-8">
+        <div className="grid lg:grid-cols-3 gap-8">
+          <div className="lg:col-span-2 space-y-6">
+            <Skeleton className="aspect-video w-full rounded-xl" />
+            <div className="space-y-4">
+              <Skeleton className="h-10 w-3/4" />
+              <Skeleton className="h-6 w-1/2" />
+              <div className="flex gap-2">
+                <Skeleton className="h-6 w-20" />
+                <Skeleton className="h-6 w-20" />
+              </div>
+              <Skeleton className="h-24 w-full" />
+            </div>
+          </div>
+          <div className="space-y-6">
+            <Skeleton className="h-64 w-full rounded-xl" />
+            <Skeleton className="h-32 w-full rounded-xl" />
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+export default function SpotDetailPage() {
+  const { pubkey, identifier } = useParams<{ pubkey: string; identifier: string }>();
+  const { data: spot, isLoading, error } = useSkateSpot(identifier || '', pubkey);
+  const { data: marketplaceItems, isLoading: isLoadingMarketplace } = useMarketplaceAtSpot(pubkey || '', identifier || '');
+  const { data: spotServices, isLoading: isLoadingServices } = useSpotServices(pubkey, identifier);
+  const author = useAuthor(spot?.pubkey);
+  const { user } = useCurrentUser();
+  const { mutateAsync: publishEvent } = useNostrPublish();
+  const { toast } = useToast();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [showCollectionDialog, setShowCollectionDialog] = useState(false);
+  const [showReportDialog, setShowReportDialog] = useState(false);
+  const [showStatusDialog, setShowStatusDialog] = useState(false);
+
+  const isOwner = user && spot && user.pubkey === spot.pubkey;
+  const isShop = spot?.types.includes('shop');
+  const hasNip05 = user?.metadata?.nip05;
+  
+  // Community contributions
+  const { data: communityPhotos } = useSpotPhotos(pubkey || '', identifier || '');
+  const aggregatedTags = useAggregatedSpotTags(pubkey || '', identifier || '');
+
+  useSeoMeta({
+    title: spot ? `${spot.title} - SkateSpots` : 'Skate Spot - SkateSpots',
+    description: spot?.description || 'View this skateboarding spot on SkateSpots.',
+  });
+
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(spot?.pubkey || '');
+
+  const coordinates = useMemo(() => {
+    if (!spot?.geohash) return null;
+    const { latitude, longitude } = ngeohash.decode(spot.geohash);
+    return { lat: latitude, lng: longitude };
+  }, [spot?.geohash]);
+
+  // Fetch weather data for this spot
+  const { data: weatherData, isLoading: weatherLoading } = useSpotWeather(spot?.geohash, true);
+
+  const handleShare = async () => {
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title: spot?.title,
+          text: spot?.description || `Check out this skate spot: ${spot?.title}`,
+          url: window.location.href,
+        });
+      } catch {
+        // User cancelled or share failed
+      }
+    } else {
+      navigator.clipboard.writeText(window.location.href);
+    }
+  };
+
+  const handleDirections = () => {
+    if (coordinates) {
+      window.open(
+        `https://www.google.com/maps/dir/?api=1&destination=${coordinates.lat},${coordinates.lng}`,
+        '_blank'
+      );
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!spot || !user) return;
+
+    try {
+      await publishEvent({
+        kind: 5,
+        content: 'Deleted spot',
+        tags: [
+          ['e', spot.id],
+          ['a', `${spot.event.kind}:${spot.pubkey}:${spot.identifier}`],
+        ],
+      });
+
+      setShowDeleteDialog(false);
+      toast({
+        title: 'Spot deleted',
+        description: 'Deletion request sent to relays. Most relays will remove this content.',
+      });
+
+      queryClient.invalidateQueries({ queryKey: ['skate-spots'] });
+      queryClient.invalidateQueries({ queryKey: ['skate-spot', spot.identifier, spot.pubkey] });
+      queryClient.invalidateQueries({ queryKey: ['user-skate-spots', user.pubkey] });
+
+      setTimeout(() => navigate('/map'), 1000);
+    } catch (error) {
+      toast({
+        title: 'Delete failed',
+        description: error instanceof Error ? error.message : 'Something went wrong',
+        variant: 'destructive',
+      });
+      setShowDeleteDialog(false);
+    }
+  };
+
+  if (isLoading) {
+    return <SpotDetailSkeleton />;
+  }
+
+  if (error || !spot) {
+    return <NotFound />;
+  }
+
+  return (
+    <Layout>
+      <div className="container px-4 py-8 overflow-x-hidden">
+        {/* Back link */}
+        <Link
+          to="/map"
+          className="inline-flex items-center text-muted-foreground hover:text-foreground transition-colors mb-6"
+        >
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Back to Map
+        </Link>
+
+        <div className="grid lg:grid-cols-3 gap-8">
+          {/* Main Content */}
+          <div className="lg:col-span-2 space-y-6 min-w-0">
+            {/* Image Gallery - Combines owner photos + community photos */}
+            {(() => {
+              const allImages = [
+                ...spot.images.map(url => ({ url, isOwner: true })),
+                ...(communityPhotos || []).map(p => ({ url: p.url, isOwner: false, caption: p.caption })),
+              ];
+              
+              return allImages.length > 0 ? (
+                <>
+                  <div className="aspect-video rounded-xl overflow-hidden bg-muted relative">
+                    <img
+                      src={allImages[0].url}
+                      alt={spot.title}
+                      className="w-full h-full object-cover"
+                    />
+                    {!allImages[0].isOwner && (
+                      <div className="absolute bottom-2 left-2 px-2 py-1 bg-black/70 rounded text-xs text-[#ccff00] flex items-center gap-1">
+                        <Users className="h-3 w-3" />
+                        Community
+                      </div>
+                    )}
+                  </div>
+                  
+                  {/* Additional images */}
+                  {allImages.length > 1 && (
+                    <div className="grid grid-cols-4 gap-2">
+                      {allImages.slice(1, 5).map((img, idx) => (
+                        <div key={idx} className="aspect-square rounded-lg overflow-hidden bg-muted relative">
+                          <img src={img.url} alt={`${spot.title} ${idx + 2}`} className="w-full h-full object-cover" />
+                          {!img.isOwner && (
+                            <div className="absolute bottom-1 left-1 px-1.5 py-0.5 bg-black/70 rounded text-[10px] text-[#ccff00] flex items-center gap-0.5">
+                              <Users className="h-2.5 w-2.5" />
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </>
+              ) : (
+                <div className="aspect-video rounded-xl bg-gradient-to-br from-primary/20 to-accent/20 flex items-center justify-center">
+                  <MapPin className="h-16 w-16 text-primary/40" />
+                </div>
+              );
+            })()}
+
+            {/* Spot Info */}
+            <div className="space-y-4">
+              <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
+                <div className="min-w-0 flex-1">
+                  <h1 className="text-2xl sm:text-3xl font-bold break-words">{spot.title}</h1>
+                  {spot.location && (
+                    <p className="text-muted-foreground flex items-start gap-2 mt-2 text-sm sm:text-base">
+                      <MapPin className="h-4 w-4 flex-shrink-0 mt-0.5" />
+                      <span className="break-words">{spot.location}</span>
+                    </p>
+                  )}
+                </div>
+                <div className="flex items-center gap-2 flex-wrap">
+                  {isOwner && (
+                    <>
+                      <Link to={`/edit-spot/${spot.pubkey}/${spot.identifier}`}>
+                        <Button variant="outline" size="icon">
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                      </Link>
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        onClick={() => setShowDeleteDialog(true)}
+                        className="hover:bg-destructive hover:text-destructive-foreground"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </>
+                  )}
+                  {user && !isShop && (
+                    <>
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        onClick={() => setShowCollectionDialog(true)}
+                        className="hover:bg-[#ccff00]/10 hover:text-[#ccff00] hover:border-[#ccff00]/50"
+                      >
+                        <Bookmark className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        onClick={() => setShowStatusDialog(true)}
+                        className="gap-2 bg-green-500 hover:bg-green-600 text-white font-bold"
+                      >
+                        <span className="relative flex h-2 w-2">
+                          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75" />
+                          <span className="relative inline-flex rounded-full h-2 w-2 bg-white" />
+                        </span>
+                        I'm Here
+                      </Button>
+                    </>
+                  )}
+                  <Button variant="outline" size="icon" onClick={handleShare}>
+                    <Share2 className="h-4 w-4" />
+                  </Button>
+                  <Button variant="outline" size="icon" onClick={handleDirections}>
+                    <Navigation className="h-4 w-4" />
+                  </Button>
+                  {/* More options menu */}
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="outline" size="icon">
+                        <MoreHorizontal className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="w-48">
+                      {!isOwner && (
+                        <DropdownMenuItem
+                          onClick={() => setShowReportDialog(true)}
+                          className="text-red-500 focus:text-red-500"
+                        >
+                          <Flag className="h-4 w-4 mr-2" />
+                          Report {isShop ? 'Shop' : 'Spot'}
+                        </DropdownMenuItem>
+                      )}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              </div>
+
+              {/* Access Type & Types */}
+              <div className="flex flex-wrap gap-2">
+                {spot.accessType && (
+                  <Badge
+                    className="border-2 font-bold uppercase"
+                    style={{
+                      borderColor: ACCESS_TYPE_INFO[spot.accessType].color,
+                      color: ACCESS_TYPE_INFO[spot.accessType].color,
+                      backgroundColor: `${ACCESS_TYPE_INFO[spot.accessType].color}20`
+                    }}
+                  >
+                    {ACCESS_TYPE_INFO[spot.accessType].emoji} {ACCESS_TYPE_INFO[spot.accessType].label}
+                  </Badge>
+                )}
+                {spot.types.map((type) => (
+                  <Badge key={type} className="bg-[#ccff00]/20 text-[#ccff00] border border-[#ccff00]/50 font-bold uppercase">
+                    {SPOT_TYPE_LABELS[type] || type}
+                  </Badge>
+                ))}
+                {/* Community suggested tags */}
+                {aggregatedTags.length > 0 && aggregatedTags.map(({ tag, count }) => (
+                  <Badge 
+                    key={tag} 
+                    className="bg-blue-500/10 text-blue-400 border border-blue-500/30 font-medium"
+                    title={`Suggested by ${count} user${count > 1 ? 's' : ''}`}
+                  >
+                    <Users className="h-3 w-3 mr-1" />
+                    {SPOT_TYPE_LABELS[tag] || tag}
+                    {count > 1 && <span className="ml-1 text-xs opacity-70">({count})</span>}
+                  </Badge>
+                ))}
+              </div>
+
+              {/* Community Contributions Section */}
+              {!isShop && (
+                <Card className="bg-black/90 border-2 border-blue-500/30 overflow-hidden">
+                  <CardContent className="p-4">
+                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+                      <div className="flex items-center gap-2 min-w-0">
+                        <Users className="h-5 w-5 text-blue-400 flex-shrink-0" />
+                        <span className="font-bold text-blue-400 uppercase text-sm whitespace-nowrap">Community</span>
+                        {((communityPhotos?.length || 0) + aggregatedTags.length) > 0 && (
+                          <Badge variant="secondary" className="bg-blue-500/20 text-blue-400 border-blue-500/50">
+                            {(communityPhotos?.length || 0) + aggregatedTags.length}
+                          </Badge>
+                        )}
+                      </div>
+                      <div className="flex gap-2 flex-shrink-0">
+                        <AddPhotoToSpot 
+                          spotPubkey={spot.pubkey} 
+                          spotIdentifier={spot.identifier} 
+                          spotTitle={spot.title} 
+                        />
+                        <AddTagsToSpot 
+                          spotPubkey={spot.pubkey} 
+                          spotIdentifier={spot.identifier} 
+                          spotTitle={spot.title}
+                          existingTags={spot.tags}
+                        />
+                      </div>
+                    </div>
+                    <p className="text-xs text-gray-500 mt-2">
+                      Help improve this spot by adding photos or suggesting tags
+                    </p>
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Spot Ownership - Transfer / Claim */}
+              <SpotOwnership spot={spot} />
+
+              {/* Claim Shop Notice */}
+              {isShop && !isOwner && user && (
+                <Card className="bg-[#ccff00]/10 border-2 border-[#ccff00]/50">
+                  <CardContent className="p-6">
+                    <div className="flex items-start gap-3">
+                      <div className="text-2xl">🏪</div>
+                      <div className="flex-1">
+                        <h3 className="font-bold text-[#ccff00] mb-2 uppercase">Are You the Shop Owner?</h3>
+                        <p className="text-sm text-gray-300 mb-4">
+                          If you own or manage this shop, you can claim it to verify ownership and manage the listing.
+                        </p>
+                        {hasNip05 ? (
+                          <Button className="gap-2 bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold uppercase w-full">
+                            <Shield className="h-4 w-4" />
+                            Claim This Shop
+                          </Button>
+                        ) : (
+                          <div>
+                            <p className="text-xs text-yellow-400 mb-2">⚠️ NIP-05 verification required to claim shops</p>
+                            <a href="/settings">
+                              <Button variant="outline" size="sm" className="border-yellow-500/50 hover:bg-yellow-500/10 text-yellow-400 font-bold">
+                                Add NIP-05 in Settings
+                              </Button>
+                            </a>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Contact Info for Private/Locals Spots */}
+              {spot.contactInfo && (spot.accessType === 'private' || spot.accessType === 'locals') && user && (
+                <Card className="bg-[#ff6600]/10 border-2 border-[#ff6600]/50">
+                  <CardContent className="p-4">
+                    <div className="flex items-start gap-3">
+                      <div className="text-xl">{spot.accessType === 'private' ? '🔒' : '👥'}</div>
+                      <div>
+                        <h4 className="font-bold text-[#ff6600] mb-1 uppercase text-sm">Contact Info</h4>
+                        <p className="text-sm text-gray-300">{spot.contactInfo}</p>
+                        <p className="text-xs text-gray-500 mt-1">
+                          {spot.accessType === 'private' ? 'Contact for permission' : 'Ask before skating'}
+                        </p>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Description */}
+              {spot.description && (
+                <Card className="bg-black/90 border-2 border-gray-700 overflow-hidden">
+                  <CardContent className="pt-6 px-4 sm:px-6">
+                    <p className="whitespace-pre-wrap text-gray-300 break-words">{spot.description}</p>
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Gear Swap Section - Only show on actual skate spots, not shops */}
+              {!isShop && (
+              <Card className="bg-black/90 border-2 border-orange-500/30 overflow-hidden">
+                <CardHeader className="border-b border-orange-500/20 px-4 sm:px-6">
+                  <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+                    <div className="min-w-0">
+                      <CardTitle className="text-lg sm:text-2xl font-black uppercase flex items-center gap-2 flex-wrap">
+                        <ShoppingBag className="h-5 w-5 sm:h-6 sm:w-6 text-orange-500 flex-shrink-0" />
+                        <span className="neon-orange">GEAR SWAP</span>
+                        {marketplaceItems && marketplaceItems.length > 0 && (
+                          <Badge variant="secondary" className="bg-orange-500/20 text-orange-400 border-orange-500/50">
+                            {marketplaceItems.length}
+                          </Badge>
+                        )}
+                      </CardTitle>
+                      <p className="text-sm text-gray-400 mt-2">
+                        Skaters at this spot are selling gear
+                      </p>
+                    </div>
+                    {user && (
+                      <Link to={`/create-listing?spot=${pubkey}:${identifier}`} className="flex-shrink-0">
+                        <Button 
+                          size="sm"
+                          className="gap-2 bg-orange-500 hover:bg-orange-600 font-bold uppercase w-full sm:w-auto"
+                        >
+                          <Plus className="h-4 w-4" />
+                          List Gear
+                        </Button>
+                      </Link>
+                    )}
+                  </div>
+                </CardHeader>
+                <CardContent className="pt-6">
+                  {isLoadingMarketplace ? (
+                    <div className="space-y-4">
+                      {Array.from({ length: 2 }).map((_, i) => (
+                        <Skeleton key={i} className="h-32 w-full" />
+                      ))}
+                    </div>
+                  ) : marketplaceItems && marketplaceItems.length > 0 ? (
+                    <div className="space-y-4">
+                      {marketplaceItems.map((item) => (
+                        <MarketplaceItemCard key={item.id} item={item} />
+                      ))}
+                      <div className="pt-4 border-t border-orange-500/20 text-center">
+                        <p className="text-sm text-gray-400 mb-2">
+                          💡 Meet at this spot for safe pickup
+                        </p>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="text-center py-12">
+                      <ShoppingBag className="h-12 w-12 mx-auto mb-4 text-orange-500/50" />
+                      <h3 className="text-lg font-bold mb-2">NO GEAR LISTED YET</h3>
+                      <p className="text-gray-400 mb-6">
+                        Be the first to list gear at this spot!
+                      </p>
+                      {user && (
+                        <Link to={`/create-listing?spot=${pubkey}:${identifier}`}>
+                          <Button className="gap-2 bg-orange-500 hover:bg-orange-600 font-bold uppercase">
+                            <Plus className="h-4 w-4" />
+                            List Your Gear Here
+                          </Button>
+                        </Link>
+                      )}
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+              )}
+
+              {/* Services Section - Coaches & Filmers */}
+              {!isShop && (spotServices?.coaches.length || spotServices?.filmers.length || isLoadingServices) && (
+                <Card className="bg-black/90 border-2 border-lime-500/30 overflow-hidden">
+                  <CardHeader className="border-b border-lime-500/20 px-4 sm:px-6">
+                    <CardTitle className="text-lg sm:text-2xl font-black uppercase flex items-center gap-2 flex-wrap">
+                      <GraduationCap className="h-5 w-5 sm:h-6 sm:w-6 text-lime-400 flex-shrink-0" />
+                      <span className="neon-lime">SERVICES</span>
+                      {((spotServices?.coaches.length || 0) + (spotServices?.filmers.length || 0)) > 0 && (
+                        <Badge variant="secondary" className="bg-lime-500/20 text-lime-400 border-lime-500/50">
+                          {(spotServices?.coaches.length || 0) + (spotServices?.filmers.length || 0)}
+                        </Badge>
+                      )}
+                    </CardTitle>
+                    <p className="text-sm text-gray-400 mt-2">
+                      Coaches and filmers available at this spot
+                    </p>
+                  </CardHeader>
+                  <CardContent className="pt-6">
+                    {isLoadingServices ? (
+                      <div className="space-y-4">
+                        {Array.from({ length: 2 }).map((_, i) => (
+                          <Skeleton key={i} className="h-24 w-full" />
+                        ))}
+                      </div>
+                    ) : (
+                      <div className="space-y-6">
+                        {/* Coaches */}
+                        {spotServices?.coaches && spotServices.coaches.length > 0 && (
+                          <div>
+                            <h3 className="text-sm font-bold text-lime-400 uppercase tracking-wide mb-3 flex items-center gap-2">
+                              <GraduationCap className="h-4 w-4" />
+                              Coaches ({spotServices.coaches.length})
+                            </h3>
+                            <div className="space-y-3">
+                              {spotServices.coaches.map((coach) => (
+                                <Link 
+                                  key={coach.id} 
+                                  to={`/coach/${coach.pubkey}/${coach.identifier}`}
+                                  className="block"
+                                >
+                                  <div className="flex items-center gap-4 p-4 rounded-lg bg-lime-500/5 border border-lime-500/20 hover:bg-lime-500/10 hover:border-lime-500/40 transition-colors">
+                                    <Avatar className="h-12 w-12 border-2 border-lime-500/30">
+                                      {coach.image && <AvatarImage src={coach.image} alt={coach.title} />}
+                                      <AvatarFallback className="bg-lime-500/20 text-lime-400">
+                                        {coach.title.slice(0, 2).toUpperCase()}
+                                      </AvatarFallback>
+                                    </Avatar>
+                                    <div className="flex-1 min-w-0">
+                                      <h4 className="font-bold truncate">{coach.title}</h4>
+                                      <div className="flex flex-wrap gap-1 mt-1">
+                                        {coach.skills.slice(0, 3).map((skill) => (
+                                          <Badge key={skill} variant="outline" className="text-[10px] border-lime-500/30 text-lime-400">
+                                            {skill}
+                                          </Badge>
+                                        ))}
+                                      </div>
+                                    </div>
+                                    {coach.rate && (
+                                      <div className="text-right">
+                                        <div className="text-sm font-bold text-lime-400">{coach.rate}</div>
+                                      </div>
+                                    )}
+                                  </div>
+                                </Link>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Filmers */}
+                        {spotServices?.filmers && spotServices.filmers.length > 0 && (
+                          <div>
+                            <h3 className="text-sm font-bold text-purple-400 uppercase tracking-wide mb-3 flex items-center gap-2">
+                              <Video className="h-4 w-4" />
+                              Filmers ({spotServices.filmers.length})
+                            </h3>
+                            <div className="space-y-3">
+                              {spotServices.filmers.map((filmer) => (
+                                <Link 
+                                  key={filmer.id} 
+                                  to={`/coach/${filmer.pubkey}/${filmer.identifier}`}
+                                  className="block"
+                                >
+                                  <div className="flex items-center gap-4 p-4 rounded-lg bg-purple-500/5 border border-purple-500/20 hover:bg-purple-500/10 hover:border-purple-500/40 transition-colors">
+                                    <Avatar className="h-12 w-12 border-2 border-purple-500/30">
+                                      {filmer.image && <AvatarImage src={filmer.image} alt={filmer.title} />}
+                                      <AvatarFallback className="bg-purple-500/20 text-purple-400">
+                                        {filmer.title.slice(0, 2).toUpperCase()}
+                                      </AvatarFallback>
+                                    </Avatar>
+                                    <div className="flex-1 min-w-0">
+                                      <h4 className="font-bold truncate">{filmer.title}</h4>
+                                      <div className="flex flex-wrap gap-1 mt-1">
+                                        {filmer.skills.slice(0, 3).map((skill) => (
+                                          <Badge key={skill} variant="outline" className="text-[10px] border-purple-500/30 text-purple-400">
+                                            {skill}
+                                          </Badge>
+                                        ))}
+                                      </div>
+                                    </div>
+                                    {filmer.rate && (
+                                      <div className="text-right">
+                                        <div className="text-sm font-bold text-purple-400">{filmer.rate}</div>
+                                      </div>
+                                    )}
+                                  </div>
+                                </Link>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+
+                        <div className="pt-4 border-t border-lime-500/20">
+                          <p className="text-sm text-gray-400 text-center mb-3">
+                            💡 Offer your services at this spot
+                          </p>
+                          <div className="flex gap-2 justify-center">
+                            <Link to="/become-coach">
+                              <Button size="sm" variant="outline" className="gap-2 border-lime-500/50 text-lime-400 hover:bg-lime-500/10">
+                                <GraduationCap className="h-4 w-4" />
+                                Coach Here
+                              </Button>
+                            </Link>
+                            <Link to="/become-filmer">
+                              <Button size="sm" variant="outline" className="gap-2 border-purple-500/50 text-purple-400 hover:bg-purple-500/10">
+                                <Video className="h-4 w-4" />
+                                Film Here
+                              </Button>
+                            </Link>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Comments Section */}
+              {spot.event && <CommentsSection root={spot.event} />}
+            </div>
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-6">
+            {/* Who's Skating - Only show for regular spots, not shops */}
+            {!isShop && (
+              <WhosSkating
+                spotPubkey={spot.pubkey}
+                spotIdentifier={spot.identifier}
+              />
+            )}
+
+            {/* Weather Card */}
+            {weatherData && (
+              <Card className="bg-gradient-to-br from-blue-500/10 to-purple-500/10 border-2 border-blue-500/30">
+                <CardHeader className="pb-3">
+                  <CardTitle className="text-lg flex items-center gap-2">
+                    <Cloud className="h-5 w-5 text-blue-400" />
+                    Weather Conditions
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  {/* Current Weather */}
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <span className="text-5xl">{weatherData.weather.weatherIcon}</span>
+                      <div>
+                        <div className="text-3xl font-bold">{weatherData.weather.temperature}°C</div>
+                        <div className="text-sm text-muted-foreground">{weatherData.weather.weatherDescription}</div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Skateability Score */}
+                  <div className="p-3 rounded-lg" style={{ backgroundColor: `${weatherData.skateability.color}20`, border: `2px solid ${weatherData.skateability.color}` }}>
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="font-semibold" style={{ color: weatherData.skateability.color }}>
+                        Skateability
+                      </span>
+                      <span className="text-2xl font-bold" style={{ color: weatherData.skateability.color }}>
+                        {weatherData.skateability.score}/100
+                      </span>
+                    </div>
+                    <div className="text-sm font-bold uppercase" style={{ color: weatherData.skateability.color }}>
+                      {weatherData.skateability.label}
+                    </div>
+                    <div className="mt-2 text-xs text-muted-foreground">
+                      {weatherData.skateability.reasons.join(' • ')}
+                    </div>
+                  </div>
+
+                  {/* Weather Details */}
+                  <div className="grid grid-cols-2 gap-3 text-sm">
+                    <div className="flex items-center gap-2">
+                      <Wind className="h-4 w-4 text-blue-400" />
+                      <div>
+                        <div className="text-xs text-muted-foreground">Wind</div>
+                        <div className="font-medium">{weatherData.weather.windSpeed} km/h {weatherData.weather.windDirectionLabel}</div>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Droplets className="h-4 w-4 text-blue-400" />
+                      <div>
+                        <div className="text-xs text-muted-foreground">Humidity</div>
+                        <div className="font-medium">{weatherData.weather.humidity}%</div>
+                      </div>
+                    </div>
+                    {weatherData.weather.uvIndex > 0 && (
+                      <div className="flex items-center gap-2">
+                        <Sun className="h-4 w-4 text-yellow-400" />
+                        <div>
+                          <div className="text-xs text-muted-foreground">UV Index</div>
+                          <div className="font-medium">{weatherData.weather.uvIndex}</div>
+                        </div>
+                      </div>
+                    )}
+                    {weatherData.airQuality && (
+                      <div className="flex items-center gap-2">
+                        <Cloud className="h-4 w-4" style={{ color: weatherData.airQuality.aqiColor }} />
+                        <div>
+                          <div className="text-xs text-muted-foreground">Air Quality</div>
+                          <div className="font-medium">{weatherData.airQuality.aqiLabel}</div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* 3-Day Forecast */}
+                  {weatherData.forecast?.daily && weatherData.forecast.daily.length > 0 && (
+                    <div className="pt-3 border-t border-border">
+                      <div className="text-sm font-semibold mb-3">3-Day Forecast</div>
+                      <div className="grid grid-cols-3 gap-2">
+                        {weatherData.forecast.daily.map((day, idx) => {
+                          const date = new Date(day.date);
+                          const dayName = idx === 0 ? 'Today' : idx === 1 ? 'Tomorrow' : date.toLocaleDateString('en-US', { weekday: 'short' });
+                          return (
+                            <div key={day.date} className="text-center p-2 rounded-lg bg-background/50">
+                              <div className="text-xs font-semibold text-muted-foreground mb-1">{dayName}</div>
+                              <div className="text-2xl my-1">{day.weatherIcon}</div>
+                              <div className="text-sm font-bold">
+                                {day.maxTemp}°<span className="text-muted-foreground">/{day.minTemp}°</span>
+                              </div>
+                              {day.precipitationProbability > 0 && (
+                                <div className="text-xs text-blue-400 mt-1">
+                                  {day.precipitationProbability}% 🌧️
+                                </div>
+                              )}
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Feels Like */}
+                  {weatherData.weather.feelsLike !== weatherData.weather.temperature && (
+                    <div className="text-xs text-muted-foreground text-center pt-2 border-t border-border">
+                      Feels like {weatherData.weather.feelsLike}°C
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Loading Weather */}
+            {weatherLoading && (
+              <Card className="bg-gradient-to-br from-blue-500/10 to-purple-500/10 border-2 border-blue-500/30">
+                <CardHeader className="pb-3">
+                  <CardTitle className="text-lg flex items-center gap-2">
+                    <Cloud className="h-5 w-5 text-blue-400" />
+                    Weather Conditions
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <Skeleton className="h-24 w-full" />
+                  <Skeleton className="h-20 w-full" />
+                  <Skeleton className="h-16 w-full" />
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Map */}
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="text-lg flex items-center gap-2">
+                  <MapPin className="h-5 w-5 text-primary" />
+                  Location
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="aspect-square rounded-lg overflow-hidden">
+                  <SpotMap
+                    spots={[spot]}
+                    center={coordinates ? [coordinates.lat, coordinates.lng] : undefined}
+                    zoom={15}
+                    className="h-full"
+                  />
+                </div>
+                {coordinates && (
+                  <Button
+                    variant="outline"
+                    className="w-full mt-4 gap-2"
+                    onClick={handleDirections}
+                  >
+                    <Navigation className="h-4 w-4" />
+                    Get Directions
+                  </Button>
+                )}
+              </CardContent>
+            </Card>
+
+            {/* Author Card with Tip the Mapper */}
+            <Card className="bg-gradient-to-br from-[#ccff00]/5 to-orange-500/5 border-2 border-[#ccff00]/30">
+              <CardHeader className="pb-3">
+                <CardTitle className="text-lg flex items-center gap-2">
+                  <span className="text-[#ccff00]">⚡</span>
+                  Tip the Mapper
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-center gap-3 mb-4">
+                  <Avatar className="h-12 w-12 border-2 border-[#ccff00]/30">
+                    <AvatarImage src={metadata?.picture} alt={displayName} />
+                    <AvatarFallback className="bg-[#ccff00]/10 text-[#ccff00]">
+                      {displayName.slice(0, 2).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium truncate">{displayName}</p>
+                    <p className="text-sm text-muted-foreground flex items-center gap-1">
+                      <Calendar className="h-3 w-3" />
+                      {new Date(spot.createdAt * 1000).toLocaleDateString()}
+                    </p>
+                  </div>
+                </div>
+
+                <p className="text-xs text-gray-400 mb-3">
+                  Found this spot useful? Send a zap to thank the mapper!
+                </p>
+
+                <ZapButton
+                  target={spot.event}
+                  className="w-full justify-center bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold"
+                />
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent className="bg-black border-2 border-red-500/50">
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-white flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-red-500" />
+              Delete Spot?
+            </AlertDialogTitle>
+            <AlertDialogDescription className="text-gray-300">
+              This will permanently delete "{spot.title}" from all relays. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel className="border-gray-600">Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              className="bg-red-500 hover:bg-red-600 text-white"
+            >
+              Delete Spot
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Add to Collection Dialog */}
+      {!isShop && (
+        <AddToCollectionDialog
+          open={showCollectionDialog}
+          onOpenChange={setShowCollectionDialog}
+          spot={spot}
+        />
+      )}
+
+      {/* Report Dialog */}
+      <ReportDialog
+        open={showReportDialog}
+        onOpenChange={setShowReportDialog}
+        targetType={isShop ? 'shop' : 'spot'}
+        targetPubkey={spot.pubkey}
+        targetEventId={spot.id}
+        targetTitle={spot.title}
+      />
+
+      {/* Set Status Dialog */}
+      <SetStatusDialog
+        open={showStatusDialog}
+        onOpenChange={setShowStatusDialog}
+        preselectedSpot={spot}
+      />
+    </Layout>
+  );
+}
diff --git a/src/src/pages/StashPage.tsx b/src/src/pages/StashPage.tsx
new file mode 100644
index 0000000..aa59381
--- /dev/null
+++ b/src/src/pages/StashPage.tsx
@@ -0,0 +1,1656 @@
+import { useState, useMemo, useRef } from 'react';
+import { useSeoMeta } from '@unhead/react';
+import { useNavigate } from 'react-router-dom';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { Progress } from '@/components/ui/progress';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter, DialogClose, DialogDescription } from '@/components/ui/dialog';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { useStash, STASH_CATEGORIES, CONDITION_LABELS, RARITY_TIERS, type StashItem } from '@/hooks/useStash';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useSatsToUsd } from '@/hooks/useExchangeRate';
+import { useUploadFile } from '@/hooks/useUploadFile';
+import { genUserName } from '@/lib/genUserName';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import {
+  Package,
+  Plus,
+  Trash2,
+  Edit3,
+  Lock,
+  Users,
+  Globe,
+  Zap,
+  ArrowRightLeft,
+  Eye,
+  EyeOff,
+  Shield,
+  Sparkles,
+  Star,
+  Crown,
+  Gem,
+  Search,
+  Filter,
+  AlertTriangle,
+  ShoppingCart,
+  Target,
+  Swords,
+  TrendingUp,
+  Heart,
+  MessageCircle,
+  Send,
+  Backpack,
+  Trophy,
+  Flame,
+  X,
+  Camera,
+  ImagePlus,
+  Loader2,
+  ExternalLink,
+  Store,
+  MapPin,
+} from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import { cn } from '@/lib/utils';
+
+// RPG rarity colors
+const RARITY_COLORS = {
+  common: 'from-gray-500 to-gray-600',
+  uncommon: 'from-green-500 to-emerald-600',
+  rare: 'from-blue-500 to-indigo-600',
+  epic: 'from-purple-500 to-violet-600',
+  legendary: 'from-yellow-400 to-orange-500',
+};
+
+const RARITY_GLOW = {
+  common: '',
+  uncommon: 'shadow-[0_0_15px_rgba(34,197,94,0.3)]',
+  rare: 'shadow-[0_0_20px_rgba(59,130,246,0.4)]',
+  epic: 'shadow-[0_0_25px_rgba(168,85,247,0.5)]',
+  legendary: 'shadow-[0_0_30px_rgba(250,204,21,0.6)] animate-pulse',
+};
+
+const RARITY_BORDER = {
+  common: 'border-gray-500/40',
+  uncommon: 'border-green-500/50',
+  rare: 'border-blue-500/50',
+  epic: 'border-purple-500/60',
+  legendary: 'border-yellow-400/70',
+};
+
+// Character class based on what they collect most
+function getCharacterClass(byCategory: Record<string, number>): { name: string; icon: React.ReactNode; color: string } {
+  const entries = Object.entries(byCategory);
+  if (entries.length === 0) return { name: 'Rookie', icon: <Backpack className="h-4 w-4" />, color: '#888' };
+  
+  const [topCategory] = entries.sort(([,a], [,b]) => b - a)[0];
+  
+  const classes: Record<string, { name: string; icon: React.ReactNode; color: string }> = {
+    deck: { name: 'Board Wizard', icon: <Swords className="h-4 w-4" />, color: '#ff0040' },
+    trucks: { name: 'Grind Master', icon: <Target className="h-4 w-4" />, color: '#ff6600' },
+    wheels: { name: 'Speed Demon', icon: <Flame className="h-4 w-4" />, color: '#ccff00' },
+    bearings: { name: 'Precision Tech', icon: <Gem className="h-4 w-4" />, color: '#00ff88' },
+    shoes: { name: 'Style Lord', icon: <Crown className="h-4 w-4" />, color: '#00ccff' },
+    clothing: { name: 'Fashion Icon', icon: <Star className="h-4 w-4" />, color: '#9933ff' },
+    protective: { name: 'Safety Knight', icon: <Shield className="h-4 w-4" />, color: '#ff33cc' },
+    complete: { name: 'Setup Sage', icon: <Trophy className="h-4 w-4" />, color: '#ffd700' },
+    other: { name: 'Collector', icon: <Package className="h-4 w-4" />, color: '#888' },
+  };
+  
+  return classes[topCategory] || classes.other;
+}
+
+function StashItemCard({ item, onEdit, onDelete, onListOnMarketplace, isWTB = false }: { item: StashItem; onEdit: () => void; onDelete: () => void; onListOnMarketplace?: () => void; isWTB?: boolean }) {
+  const category = STASH_CATEGORIES[item.category];
+  const condition = CONDITION_LABELS[item.condition];
+  const rarity = (item.rarity || category.rarity) as keyof typeof RARITY_COLORS;
+  const usdValue = useSatsToUsd(item.minPrice || item.maxPrice || 0);
+  const rarityTier = RARITY_TIERS[rarity];
+  
+  // Can list on marketplace if willing to sell or trade
+  const canListOnMarketplace = !isWTB && (item.willingToSell || item.willingToTrade);
+
+  return (
+    <Card className={cn(
+      'relative overflow-hidden transition-all duration-300 hover:scale-[1.02] cursor-pointer group',
+      'bg-gradient-to-br from-black/90 to-black/70 border-2',
+      RARITY_GLOW[rarity],
+      RARITY_BORDER[rarity],
+      isWTB && 'ring-2 ring-cyan-500/30'
+    )}>
+      {/* Rarity stripe with shimmer effect */}
+      <div className={cn('absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r', RARITY_COLORS[rarity])}>
+        {rarity !== 'common' && (
+          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-shimmer" />
+        )}
+      </div>
+
+      {/* Wishlist indicator */}
+      {isWTB && (
+        <div className="absolute top-3 left-2 z-10">
+          <Badge className="bg-cyan-500 text-black text-[10px] font-black uppercase">
+            <Heart className="h-2.5 w-2.5 mr-0.5" />
+            Wishlist
+          </Badge>
+        </div>
+      )}
+
+      {/* Rarity badge */}
+      <div className="absolute top-3 right-2 z-10">
+        <Badge 
+          variant="outline" 
+          className="text-[9px] px-1.5 py-0.5 backdrop-blur-sm font-bold uppercase tracking-wider"
+          style={{ borderColor: rarityTier.color, color: rarityTier.color, backgroundColor: rarityTier.color + '15' }}
+        >
+          {rarityTier.label}
+        </Badge>
+      </div>
+
+      {/* Item image or placeholder with RPG frame */}
+      <div className="h-36 bg-gradient-to-br from-black/50 to-black/30 flex items-center justify-center relative overflow-hidden">
+        <div className={cn(
+          'absolute inset-2 rounded-lg border-2 opacity-30',
+          RARITY_BORDER[rarity]
+        )} />
+        
+        {item.images?.[0] ? (
+          <img 
+            src={item.images[0]} 
+            alt={item.title}
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <div className="flex flex-col items-center gap-1">
+            <span className="text-5xl">{category.emoji}</span>
+            <span className="text-[10px] uppercase tracking-wider text-muted-foreground">{category.label}</span>
+          </div>
+        )}
+
+        {/* Hover overlay with actions */}
+        <div className="absolute inset-0 bg-black/80 opacity-0 group-hover:opacity-100 transition-all duration-200 flex flex-col items-center justify-center gap-2 backdrop-blur-sm">
+          <div className="flex items-center gap-2">
+            <Button size="sm" variant="outline" className="h-8 border-white/30" onClick={(e) => { e.stopPropagation(); onEdit(); }}>
+              <Edit3 className="h-3.5 w-3.5 mr-1" />
+              Edit
+            </Button>
+            <Button size="sm" variant="destructive" className="h-8" onClick={(e) => { e.stopPropagation(); onDelete(); }}>
+              <Trash2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+          {/* List on Marketplace button for items marked for sale/trade */}
+          {canListOnMarketplace && onListOnMarketplace && (
+            <Button 
+              size="sm" 
+              className="h-7 bg-[#ff6600] hover:bg-[#ff6600]/90 text-black font-bold"
+              onClick={(e) => { e.stopPropagation(); onListOnMarketplace(); }}
+            >
+              <Store className="h-3 w-3 mr-1" />
+              List on Marketplace
+            </Button>
+          )}
+          {item.visibility !== 'private' && (
+            <Button size="sm" variant="ghost" className="h-7 text-cyan-400 hover:text-cyan-300 hover:bg-cyan-500/10">
+              <Send className="h-3 w-3 mr-1" />
+              Share via DM
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <CardContent className="p-3 space-y-2">
+        {/* Title and category */}
+        <div className="flex items-start justify-between gap-2">
+          <div className="min-w-0">
+            <h3 className="font-bold text-sm text-white line-clamp-1" style={{ textShadow: `0 0 10px ${rarityTier.color}40` }}>
+              {item.title}
+            </h3>
+            <p className="text-xs text-muted-foreground flex items-center gap-1">
+              <span>{category.emoji}</span>
+              {item.brand && <span className="font-medium">{item.brand}</span>}
+              {item.size && <span className="text-muted-foreground/60">• {item.size}</span>}
+            </p>
+          </div>
+        </div>
+
+        {/* Condition stars */}
+        {!isWTB && (
+          <div className="flex items-center gap-1">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <Star 
+                key={i}
+                className={cn(
+                  'h-3 w-3 transition-all',
+                  i < condition.stars ? 'fill-yellow-400 text-yellow-400 drop-shadow-[0_0_4px_rgba(250,204,21,0.5)]' : 'text-gray-700'
+                )}
+              />
+            ))}
+            <span className="text-[10px] ml-1 font-medium" style={{ color: condition.color }}>
+              {condition.label.split(' ')[1]}
+            </span>
+          </div>
+        )}
+
+        {/* Price and trade info */}
+        <div className="flex items-center justify-between pt-2 border-t border-white/10">
+          {(item.minPrice || item.maxPrice) ? (
+            <div className="flex items-center gap-1">
+              <Zap className="h-3.5 w-3.5 text-amber-400" />
+              <span className="font-bold text-sm text-amber-400">
+                {isWTB ? 'Up to ' : ''}{(item.maxPrice || item.minPrice || 0).toLocaleString()}
+              </span>
+              <span className="text-[10px] text-muted-foreground">sats</span>
+              {usdValue && (
+                <span className="text-[10px] text-muted-foreground">(~${usdValue.toFixed(0)})</span>
+              )}
+            </div>
+          ) : (
+            <span className="text-xs text-muted-foreground">No price set</span>
+          )}
+
+          <div className="flex items-center gap-1">
+            {item.visibility === 'private' && (
+              <Tooltip>
+                <TooltipTrigger>
+                  <Lock className="h-3.5 w-3.5 text-red-400" />
+                </TooltipTrigger>
+                <TooltipContent>Private - only you can see</TooltipContent>
+              </Tooltip>
+            )}
+            {item.visibility === 'friends' && (
+              <Tooltip>
+                <TooltipTrigger>
+                  <Users className="h-3.5 w-3.5 text-blue-400" />
+                </TooltipTrigger>
+                <TooltipContent>Friends - mutual follows can see</TooltipContent>
+              </Tooltip>
+            )}
+            {item.willingToTrade && (
+              <Badge variant="outline" className="text-[9px] h-5 px-1 border-cyan-500/50 text-cyan-400 gap-0.5">
+                <ArrowRightLeft className="h-2.5 w-2.5" />
+              </Badge>
+            )}
+            {item.willingToSell && !isWTB && (
+              <Badge variant="outline" className="text-[9px] h-5 px-1 border-green-500/50 text-green-400 gap-0.5">
+                <Zap className="h-2.5 w-2.5" />
+              </Badge>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// Profile Stats Panel - Clean inventory overview
+function CharacterPanel({ stats, pubkey }: { stats: { total: number; byCategory: Record<string, number>; totalValue: number }; pubkey: string }) {
+  const author = useAuthor(pubkey);
+  const metadata = author.data?.metadata;
+  const displayName = metadata?.name ?? genUserName(pubkey);
+  const avatar = metadata?.picture;
+  const usdValue = useSatsToUsd(stats.totalValue);
+  
+  // Get top category for display
+  const topCategory = Object.entries(stats.byCategory).sort(([,a], [,b]) => b - a)[0];
+  const topCategoryInfo = topCategory ? STASH_CATEGORIES[topCategory[0] as keyof typeof STASH_CATEGORIES] : null;
+
+  return (
+    <Card className="bg-gradient-to-br from-black/90 to-black/70 border-2 border-[#ff6600]/40 overflow-hidden">
+      {/* Header */}
+      <div className="relative h-20 bg-gradient-to-r from-[#ff0040]/20 via-[#ff6600]/15 to-[#ccff00]/20 overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-t from-black/90 to-transparent" />
+      </div>
+      
+      {/* Avatar overlapping */}
+      <div className="relative -mt-10 px-4">
+        <Avatar className="h-16 w-16 border-4 border-black ring-2 ring-[#ff6600]/50">
+          <AvatarImage src={avatar} alt={displayName} />
+          <AvatarFallback className="bg-[#ff6600]/20 text-[#ff6600] text-lg font-black">
+            {displayName.slice(0, 2).toUpperCase()}
+          </AvatarFallback>
+        </Avatar>
+      </div>
+
+      <CardContent className="pt-2 pb-4 px-4 space-y-4">
+        {/* Name */}
+        <div>
+          <h3 className="font-black text-lg text-white">{displayName}</h3>
+          <p className="text-xs text-muted-foreground">
+            {topCategoryInfo ? (
+              <span className="flex items-center gap-1">
+                <span>{topCategoryInfo.emoji}</span>
+                <span>Mostly {topCategoryInfo.label.toLowerCase()}</span>
+              </span>
+            ) : (
+              'Start adding gear!'
+            )}
+          </p>
+        </div>
+
+        {/* Stats grid */}
+        <div className="grid grid-cols-2 gap-2">
+          <div className="p-3 rounded-lg bg-gradient-to-br from-[#ff0040]/10 to-[#ff0040]/5 border border-[#ff0040]/30 text-center">
+            <div className="text-2xl font-black text-[#ff0040]">{stats.total}</div>
+            <div className="text-[10px] uppercase tracking-wider text-muted-foreground">Items</div>
+          </div>
+          <div className="p-3 rounded-lg bg-gradient-to-br from-amber-500/10 to-amber-500/5 border border-amber-500/30 text-center">
+            <div className="flex items-center justify-center gap-1">
+              <Zap className="h-4 w-4 text-amber-400" />
+              <span className="text-lg font-black text-amber-400">
+                {stats.totalValue > 999999 ? (stats.totalValue / 1000000).toFixed(1) + 'M' : 
+                 stats.totalValue > 999 ? Math.floor(stats.totalValue / 1000) + 'k' : stats.totalValue}
+              </span>
+            </div>
+            <div className="text-[10px] uppercase tracking-wider text-muted-foreground">
+              {usdValue ? `~$${usdValue.toFixed(0)}` : 'Est. Value'}
+            </div>
+          </div>
+        </div>
+
+        {/* Category breakdown */}
+        {Object.keys(stats.byCategory).length > 0 && (
+          <div className="space-y-2">
+            <h4 className="text-[10px] font-black uppercase tracking-wider text-muted-foreground">By Category</h4>
+            <div className="grid grid-cols-3 gap-1.5">
+              {Object.entries(stats.byCategory).slice(0, 6).map(([cat, count]) => {
+                const category = STASH_CATEGORIES[cat as keyof typeof STASH_CATEGORIES];
+                if (!category) return null;
+                return (
+                  <div 
+                    key={cat} 
+                    className="flex items-center gap-1.5 px-2 py-1.5 rounded bg-black/40 border border-white/5"
+                  >
+                    <span className="text-sm">{category.emoji}</span>
+                    <span className="text-xs font-bold" style={{ color: category.color }}>{count}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+function AddItemDialog({ onAdd, mode = 'stash' }: { onAdd: (item: Omit<StashItem, 'id' | 'addedAt'>) => void; mode?: 'stash' | 'wtb' }) {
+  const [open, setOpen] = useState(false);
+  const isWTB = mode === 'wtb';
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+  
+  const [formData, setFormData] = useState<Partial<StashItem>>({
+    category: 'deck',
+    condition: 'good',
+    visibility: 'private',
+    willingToSell: !isWTB,
+    willingToTrade: false,
+    itemType: isWTB ? 'wtb' : 'stash',
+    images: [],
+  });
+
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    try {
+      const newImages: string[] = [...(formData.images || [])];
+      
+      for (const file of Array.from(files)) {
+        // Upload to Blossom
+        const tags = await uploadFile(file);
+        // First tag contains the URL
+        const urlTag = tags.find(t => t[0] === 'url');
+        if (urlTag) {
+          newImages.push(urlTag[1]);
+        }
+      }
+      
+      setFormData({ ...formData, images: newImages });
+    } catch (error) {
+      console.error('Failed to upload image:', error);
+    }
+    
+    // Reset input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const removeImage = (index: number) => {
+    const newImages = [...(formData.images || [])];
+    newImages.splice(index, 1);
+    setFormData({ ...formData, images: newImages });
+  };
+
+  const handleSubmit = () => {
+    if (!formData.title || !formData.category) return;
+    if (!isWTB && !formData.condition) return;
+
+    onAdd({
+      title: formData.title,
+      category: formData.category as StashItem['category'],
+      condition: isWTB ? 'good' : (formData.condition as StashItem['condition']),
+      visibility: formData.visibility || 'private',
+      size: formData.size,
+      brand: formData.brand,
+      description: formData.description,
+      minPrice: isWTB ? undefined : formData.minPrice,
+      maxPrice: isWTB ? formData.maxPrice : undefined,
+      willingToSell: isWTB ? false : formData.willingToSell,
+      willingToTrade: formData.willingToTrade,
+      images: formData.images,
+      itemType: isWTB ? 'wtb' : 'stash',
+    });
+
+    setFormData({
+      category: 'deck',
+      condition: 'good',
+      visibility: 'private',
+      willingToSell: !isWTB,
+      willingToTrade: false,
+      itemType: isWTB ? 'wtb' : 'stash',
+      images: [],
+    });
+    setOpen(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {isWTB ? (
+          <Button variant="outline" className="gap-2 border-cyan-500/50 text-cyan-400 hover:bg-cyan-500/10">
+            <Heart className="h-4 w-4" />
+            Add to Wishlist
+          </Button>
+        ) : (
+          <Button className="gap-2 bg-gradient-to-r from-[#ff0040] to-[#ff6600] hover:opacity-90 border-0 shadow-lg shadow-[#ff0040]/20">
+            <Plus className="h-4 w-4" />
+            Add to Stash
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto bg-black/95 border-2 border-[#ff6600]/40">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-white">
+            {isWTB ? (
+              <>
+                <Heart className="h-5 w-5 text-cyan-400" />
+                Add to Wishlist
+              </>
+            ) : (
+              <>
+                <Package className="h-5 w-5 text-[#ff6600]" />
+                Add Item to Stash
+              </>
+            )}
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            {isWTB 
+              ? "Add items you're looking for. We'll notify you when someone's stash matches!"
+              : "Add gear to your private inventory. Share selectively with traders."
+            }
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* Title */}
+          <div className="space-y-2">
+            <Label>{isWTB ? 'Looking for...' : 'Item Name'} *</Label>
+            <Input
+              placeholder={isWTB ? "e.g. Any 8.0-8.25 deck, good condition" : "e.g. Powell Peralta Flight Deck 8.25"}
+              value={formData.title || ''}
+              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+              className="bg-black/50 border-white/20"
+            />
+          </div>
+
+          {/* Category and Condition */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label>Category *</Label>
+              <Select 
+                value={formData.category} 
+                onValueChange={(v) => setFormData({ ...formData, category: v as StashItem['category'] })}
+              >
+                <SelectTrigger className="bg-black/50 border-white/20">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {Object.entries(STASH_CATEGORIES).map(([key, cat]) => (
+                    <SelectItem key={key} value={key}>
+                      {cat.emoji} {cat.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {!isWTB && (
+              <div className="space-y-2">
+                <Label>Condition *</Label>
+                <Select 
+                  value={formData.condition} 
+                  onValueChange={(v) => setFormData({ ...formData, condition: v as StashItem['condition'] })}
+                >
+                  <SelectTrigger className="bg-black/50 border-white/20">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {Object.entries(CONDITION_LABELS).map(([key, cond]) => (
+                      <SelectItem key={key} value={key}>
+                        {cond.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+            
+            {isWTB && (
+              <div className="space-y-2">
+                <Label>Min. Condition</Label>
+                <Select 
+                  value={formData.condition} 
+                  onValueChange={(v) => setFormData({ ...formData, condition: v as StashItem['condition'] })}
+                >
+                  <SelectTrigger className="bg-black/50 border-white/20">
+                    <SelectValue placeholder="Any condition" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {Object.entries(CONDITION_LABELS).map(([key, cond]) => (
+                      <SelectItem key={key} value={key}>
+                        {cond.label} or better
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+          </div>
+
+          {/* Brand and Size */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label>{isWTB ? 'Preferred Brand' : 'Brand'}</Label>
+              <Input
+                placeholder={isWTB ? "Any brand or specific" : "e.g. Powell, Spitfire"}
+                value={formData.brand || ''}
+                onChange={(e) => setFormData({ ...formData, brand: e.target.value })}
+                className="bg-black/50 border-white/20"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>{isWTB ? 'Size Range' : 'Size'}</Label>
+              <Input
+                placeholder={isWTB ? "e.g. 8.0-8.25" : "e.g. 8.25, 52mm"}
+                value={formData.size || ''}
+                onChange={(e) => setFormData({ ...formData, size: e.target.value })}
+                className="bg-black/50 border-white/20"
+              />
+            </div>
+          </div>
+
+          {/* Description */}
+          <div className="space-y-2">
+            <Label>{isWTB ? 'Additional Notes' : 'Description'}</Label>
+            <Textarea
+              placeholder={isWTB 
+                ? "Any specific requirements, colors, features you want..."
+                : "Describe the item, any damage, special features..."
+              }
+              value={formData.description || ''}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              rows={3}
+              className="bg-black/50 border-white/20"
+            />
+          </div>
+
+          {/* Image Upload - only for stash items */}
+          {!isWTB && (
+            <div className="space-y-2">
+              <Label>Photos</Label>
+              <div className="space-y-3">
+                {/* Image preview grid */}
+                {formData.images && formData.images.length > 0 && (
+                  <div className="grid grid-cols-3 gap-2">
+                    {formData.images.map((url, index) => (
+                      <div key={index} className="relative aspect-square rounded-lg overflow-hidden border border-white/20 group">
+                        <img src={url} alt={`Item photo ${index + 1}`} className="w-full h-full object-cover" />
+                        <button
+                          type="button"
+                          onClick={() => removeImage(index)}
+                          className="absolute top-1 right-1 p-1 rounded-full bg-black/80 text-white opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-500"
+                        >
+                          <X className="h-3 w-3" />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+                
+                {/* Upload button */}
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/*"
+                  multiple
+                  onChange={handleImageUpload}
+                  className="hidden"
+                />
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="w-full border-dashed border-white/30 hover:border-[#ff6600]/50 hover:bg-[#ff6600]/5"
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={isUploading}
+                >
+                  {isUploading ? (
+                    <>
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                      Uploading...
+                    </>
+                  ) : (
+                    <>
+                      <ImagePlus className="h-4 w-4 mr-2" />
+                      Add Photos
+                    </>
+                  )}
+                </Button>
+                <p className="text-xs text-muted-foreground">
+                  Add photos to help others see what you have. Max 5 photos recommended.
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Price */}
+          <div className="space-y-2">
+            <Label>{isWTB ? 'Max Budget (sats)' : 'Minimum Price (sats)'}</Label>
+            <Input
+              type="number"
+              placeholder={isWTB ? "e.g. 100000" : "e.g. 50000"}
+              value={isWTB ? (formData.maxPrice || '') : (formData.minPrice || '')}
+              onChange={(e) => setFormData({ 
+                ...formData, 
+                [isWTB ? 'maxPrice' : 'minPrice']: parseInt(e.target.value) || undefined 
+              })}
+              className="bg-black/50 border-white/20"
+            />
+            <p className="text-xs text-muted-foreground">
+              {isWTB 
+                ? "Maximum sats you're willing to pay"
+                : "The minimum sats you'd accept for this item"
+              }
+            </p>
+          </div>
+
+          {/* Willing to... */}
+          <div className="space-y-3">
+            {!isWTB && (
+              <div className="flex items-center justify-between p-3 rounded-lg bg-green-500/10 border border-green-500/30">
+                <div className="flex items-center gap-2">
+                  <Zap className="h-4 w-4 text-green-400" />
+                  <Label>Willing to Sell</Label>
+                </div>
+                <Switch
+                  checked={formData.willingToSell}
+                  onCheckedChange={(v) => setFormData({ ...formData, willingToSell: v })}
+                />
+              </div>
+            )}
+            <div className="flex items-center justify-between p-3 rounded-lg bg-cyan-500/10 border border-cyan-500/30">
+              <div className="flex items-center gap-2">
+                <ArrowRightLeft className="h-4 w-4 text-cyan-400" />
+                <Label>{isWTB ? 'Open to Trade' : 'Willing to Trade'}</Label>
+              </div>
+              <Switch
+                checked={formData.willingToTrade}
+                onCheckedChange={(v) => setFormData({ ...formData, willingToTrade: v })}
+              />
+            </div>
+          </div>
+
+          {/* Visibility */}
+          <div className="space-y-2">
+            <Label>Visibility</Label>
+            <Select 
+              value={formData.visibility} 
+              onValueChange={(v) => setFormData({ ...formData, visibility: v as StashItem['visibility'] })}
+            >
+              <SelectTrigger className="bg-black/50 border-white/20">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="private">
+                  <div className="flex items-center gap-2">
+                    <Lock className="h-3.5 w-3.5 text-red-400" />
+                    <span>Private - Only you</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="friends">
+                  <div className="flex items-center gap-2">
+                    <Users className="h-3.5 w-3.5 text-blue-400" />
+                    <span>Friends - Mutual follows</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="public">
+                  <div className="flex items-center gap-2">
+                    <Globe className="h-3.5 w-3.5 text-green-400" />
+                    <span>Public - Anyone</span>
+                  </div>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <p className="text-xs text-muted-foreground">
+              {formData.visibility === 'private' && 'Only visible to you. Share manually via DM.'}
+              {formData.visibility === 'friends' && 'Visible to people you mutually follow.'}
+              {formData.visibility === 'public' && 'Anyone can see this in your stash.'}
+            </p>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline" className="border-white/20">Cancel</Button>
+          </DialogClose>
+          <Button 
+            onClick={handleSubmit}
+            disabled={!formData.title || isUploading}
+            className={cn(
+              isWTB 
+                ? "bg-cyan-500 hover:bg-cyan-600 text-black" 
+                : "bg-[#ff6600] hover:bg-[#ff6600]/90"
+            )}
+          >
+            {isWTB ? (
+              <>
+                <Heart className="h-4 w-4 mr-2" />
+                Add to Wishlist
+              </>
+            ) : (
+              <>
+                <Plus className="h-4 w-4 mr-2" />
+                Add Item
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// Edit Item Dialog
+function EditItemDialog({ 
+  item, 
+  open, 
+  onOpenChange, 
+  onSave 
+}: { 
+  item: StashItem; 
+  open: boolean; 
+  onOpenChange: (open: boolean) => void;
+  onSave: (item: StashItem) => void;
+}) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+  const isWTB = item.itemType === 'wtb';
+  
+  const [formData, setFormData] = useState<StashItem>({ ...item });
+
+  // Reset form when item changes
+  useState(() => {
+    setFormData({ ...item });
+  });
+
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    try {
+      const newImages: string[] = [...(formData.images || [])];
+      
+      for (const file of Array.from(files)) {
+        const tags = await uploadFile(file);
+        const urlTag = tags.find(t => t[0] === 'url');
+        if (urlTag) {
+          newImages.push(urlTag[1]);
+        }
+      }
+      
+      setFormData({ ...formData, images: newImages });
+    } catch (error) {
+      console.error('Failed to upload image:', error);
+    }
+    
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const removeImage = (index: number) => {
+    const newImages = [...(formData.images || [])];
+    newImages.splice(index, 1);
+    setFormData({ ...formData, images: newImages });
+  };
+
+  const handleSubmit = () => {
+    if (!formData.title || !formData.category) return;
+    onSave(formData);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto bg-black/95 border-2 border-[#ff6600]/40">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-white">
+            <Edit3 className="h-5 w-5 text-[#ff6600]" />
+            Edit Item
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* Title */}
+          <div className="space-y-2">
+            <Label>Item Name *</Label>
+            <Input
+              value={formData.title || ''}
+              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+              className="bg-black/50 border-white/20"
+            />
+          </div>
+
+          {/* Category and Condition */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label>Category *</Label>
+              <Select 
+                value={formData.category} 
+                onValueChange={(v) => setFormData({ ...formData, category: v as StashItem['category'] })}
+              >
+                <SelectTrigger className="bg-black/50 border-white/20">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {Object.entries(STASH_CATEGORIES).map(([key, cat]) => (
+                    <SelectItem key={key} value={key}>
+                      {cat.emoji} {cat.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Condition</Label>
+              <Select 
+                value={formData.condition} 
+                onValueChange={(v) => setFormData({ ...formData, condition: v as StashItem['condition'] })}
+              >
+                <SelectTrigger className="bg-black/50 border-white/20">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {Object.entries(CONDITION_LABELS).map(([key, cond]) => (
+                    <SelectItem key={key} value={key}>
+                      {cond.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* Brand and Size */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label>Brand</Label>
+              <Input
+                value={formData.brand || ''}
+                onChange={(e) => setFormData({ ...formData, brand: e.target.value })}
+                className="bg-black/50 border-white/20"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>Size</Label>
+              <Input
+                value={formData.size || ''}
+                onChange={(e) => setFormData({ ...formData, size: e.target.value })}
+                className="bg-black/50 border-white/20"
+              />
+            </div>
+          </div>
+
+          {/* Description */}
+          <div className="space-y-2">
+            <Label>Description</Label>
+            <Textarea
+              value={formData.description || ''}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              rows={3}
+              className="bg-black/50 border-white/20"
+            />
+          </div>
+
+          {/* Image Upload */}
+          {!isWTB && (
+            <div className="space-y-2">
+              <Label>Photos</Label>
+              <div className="space-y-3">
+                {formData.images && formData.images.length > 0 && (
+                  <div className="grid grid-cols-3 gap-2">
+                    {formData.images.map((url, index) => (
+                      <div key={index} className="relative aspect-square rounded-lg overflow-hidden border border-white/20 group">
+                        <img src={url} alt={`Item photo ${index + 1}`} className="w-full h-full object-cover" />
+                        <button
+                          type="button"
+                          onClick={() => removeImage(index)}
+                          className="absolute top-1 right-1 p-1 rounded-full bg-black/80 text-white opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-500"
+                        >
+                          <X className="h-3 w-3" />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+                
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/*"
+                  multiple
+                  onChange={handleImageUpload}
+                  className="hidden"
+                />
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="w-full border-dashed border-white/30"
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={isUploading}
+                >
+                  {isUploading ? (
+                    <>
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                      Uploading...
+                    </>
+                  ) : (
+                    <>
+                      <ImagePlus className="h-4 w-4 mr-2" />
+                      Add Photos
+                    </>
+                  )}
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* Price */}
+          <div className="space-y-2">
+            <Label>{isWTB ? 'Max Budget (sats)' : 'Minimum Price (sats)'}</Label>
+            <Input
+              type="number"
+              value={isWTB ? (formData.maxPrice || '') : (formData.minPrice || '')}
+              onChange={(e) => setFormData({ 
+                ...formData, 
+                [isWTB ? 'maxPrice' : 'minPrice']: parseInt(e.target.value) || undefined 
+              })}
+              className="bg-black/50 border-white/20"
+            />
+          </div>
+
+          {/* Willing to... */}
+          <div className="space-y-3">
+            {!isWTB && (
+              <div className="flex items-center justify-between p-3 rounded-lg bg-green-500/10 border border-green-500/30">
+                <div className="flex items-center gap-2">
+                  <Zap className="h-4 w-4 text-green-400" />
+                  <Label>Willing to Sell</Label>
+                </div>
+                <Switch
+                  checked={formData.willingToSell}
+                  onCheckedChange={(v) => setFormData({ ...formData, willingToSell: v })}
+                />
+              </div>
+            )}
+            <div className="flex items-center justify-between p-3 rounded-lg bg-cyan-500/10 border border-cyan-500/30">
+              <div className="flex items-center gap-2">
+                <ArrowRightLeft className="h-4 w-4 text-cyan-400" />
+                <Label>Willing to Trade</Label>
+              </div>
+              <Switch
+                checked={formData.willingToTrade}
+                onCheckedChange={(v) => setFormData({ ...formData, willingToTrade: v })}
+              />
+            </div>
+          </div>
+
+          {/* Visibility */}
+          <div className="space-y-2">
+            <Label>Visibility</Label>
+            <Select 
+              value={formData.visibility} 
+              onValueChange={(v) => setFormData({ ...formData, visibility: v as StashItem['visibility'] })}
+            >
+              <SelectTrigger className="bg-black/50 border-white/20">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="private">
+                  <div className="flex items-center gap-2">
+                    <Lock className="h-3.5 w-3.5 text-red-400" />
+                    <span>Private</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="friends">
+                  <div className="flex items-center gap-2">
+                    <Users className="h-3.5 w-3.5 text-blue-400" />
+                    <span>Friends</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="public">
+                  <div className="flex items-center gap-2">
+                    <Globe className="h-3.5 w-3.5 text-green-400" />
+                    <span>Public</span>
+                  </div>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline" className="border-white/20">Cancel</Button>
+          </DialogClose>
+          <Button 
+            onClick={handleSubmit}
+            disabled={!formData.title || isUploading}
+            className="bg-[#ff6600] hover:bg-[#ff6600]/90"
+          >
+            <Edit3 className="h-4 w-4 mr-2" />
+            Save Changes
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// List at Spot Dialog - lets user pick a spot before creating listing
+function ListAtSpotDialog({
+  item,
+  open,
+  onOpenChange,
+  onSelectSpot,
+}: {
+  item: StashItem;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSelectSpot: (spotId: string | null) => void;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md bg-black/95 border-2 border-[#ff6600]/40">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-white">
+            <Store className="h-5 w-5 text-[#ff6600]" />
+            List "{item.title}"
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            Where can buyers pick up this item?
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-4 space-y-4">
+          {/* Options */}
+          <div className="space-y-3">
+            {/* Option 1: Link to a spot */}
+            <Button 
+              variant="outline" 
+              className="w-full justify-start h-auto py-4 border-[#ff6600]/50 hover:bg-[#ff6600]/10 hover:border-[#ff6600]"
+              onClick={() => onSelectSpot('pick')}
+            >
+              <MapPin className="h-6 w-6 mr-3 text-[#ff6600]" />
+              <div className="text-left flex-1">
+                <div className="font-bold text-white">Link to a Skate Spot</div>
+                <div className="text-xs text-muted-foreground">
+                  Best for local sales • Shows on spot page & map
+                </div>
+              </div>
+              <Badge className="bg-[#ff6600]/20 text-[#ff6600] border-[#ff6600]/50">
+                Recommended
+              </Badge>
+            </Button>
+            
+            {/* Option 2: No spot */}
+            <Button 
+              variant="outline" 
+              className="w-full justify-start h-auto py-4 border-gray-600 hover:bg-gray-800"
+              onClick={() => onSelectSpot(null)}
+            >
+              <Globe className="h-6 w-6 mr-3 text-gray-400" />
+              <div className="text-left">
+                <div className="font-bold text-white">No Specific Spot</div>
+                <div className="text-xs text-muted-foreground">
+                  Visible on Marketplace page only
+                </div>
+              </div>
+            </Button>
+          </div>
+
+          {/* Info box */}
+          <div className="p-3 rounded-lg bg-blue-500/10 border border-blue-500/30 text-xs">
+            <p className="text-blue-300">
+              <strong>💡 Tip:</strong> Listings linked to spots are easier to find for local skaters 
+              and appear on the map. You'll set availability times on the next screen.
+            </p>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// Wishlist Matching tips panel
+function WishlistMatchingPanel({ wishlistItems, stashItems }: { wishlistItems: StashItem[]; stashItems: StashItem[] }) {
+  // Find potential matches between wishlist and stash
+  const potentialMatches = useMemo(() => {
+    const matches: Array<{ wishlist: StashItem; match: StashItem; score: number }> = [];
+    
+    for (const wishlist of wishlistItems) {
+      for (const item of stashItems) {
+        if (item.category !== wishlist.category) continue;
+        if (!item.willingToSell && !item.willingToTrade) continue;
+        
+        // Calculate match score
+        let score = 50; // Base score for category match
+        
+        // Brand match
+        if (wishlist.brand && item.brand?.toLowerCase().includes(wishlist.brand.toLowerCase())) {
+          score += 20;
+        }
+        
+        // Size match (fuzzy)
+        if (wishlist.size && item.size) {
+          const wishlistSize = parseFloat(wishlist.size.replace(/[^0-9.]/g, ''));
+          const itemSize = parseFloat(item.size.replace(/[^0-9.]/g, ''));
+          if (!isNaN(wishlistSize) && !isNaN(itemSize) && Math.abs(wishlistSize - itemSize) < 0.5) {
+            score += 15;
+          }
+        }
+        
+        // Price compatibility
+        if (wishlist.maxPrice && item.minPrice && wishlist.maxPrice >= item.minPrice) {
+          score += 15;
+        }
+        
+        if (score >= 50) {
+          matches.push({ wishlist, match: item, score });
+        }
+      }
+    }
+    
+    return matches.sort((a, b) => b.score - a.score).slice(0, 3);
+  }, [wishlistItems, stashItems]);
+
+  if (wishlistItems.length === 0) return null;
+
+  return (
+    <Card className="bg-gradient-to-br from-cyan-500/10 to-blue-500/10 border-2 border-cyan-500/30">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm flex items-center gap-2 text-cyan-400">
+          <Heart className="h-4 w-4" />
+          Wishlist Matching
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <p className="text-xs text-muted-foreground">
+          {potentialMatches.length > 0 
+            ? `Found ${potentialMatches.length} potential matches in your stash!`
+            : "We'll notify you when friends' stashes match your wishlist"
+          }
+        </p>
+        
+        {potentialMatches.length > 0 && (
+          <div className="space-y-2">
+            {potentialMatches.map((m, i) => (
+              <div key={i} className="p-2 rounded bg-black/30 border border-white/10 text-xs">
+                <div className="flex items-center justify-between">
+                  <span className="text-cyan-400 truncate">{m.wishlist.title}</span>
+                  <Badge variant="outline" className="text-[10px] border-green-500/50 text-green-400">
+                    {m.score}% match
+                  </Badge>
+                </div>
+                <div className="text-muted-foreground mt-1">
+                  matches: <span className="text-white">{m.match.title}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+        
+        <div className="text-[10px] text-muted-foreground space-y-1">
+          <p>• Wishlist items are matched against friends' public stashes</p>
+          <p>• Get DM notifications when matches are found</p>
+          <p>• Set visibility to "Friends" for P2P matching</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function StashPage() {
+  useSeoMeta({
+    title: 'My Stash - SkateSpots',
+    description: 'Manage your private gear inventory. Track what you own, what you want to sell or trade.',
+  });
+
+  const navigate = useNavigate();
+  const { user } = useCurrentUser();
+  const { items, stats, isLoading, addItem, updateItem, removeItem, isEncryptionAvailable } = useStash();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filterCategory, setFilterCategory] = useState<string>('all');
+  const [activeTab, setActiveTab] = useState<'stash' | 'wishlist'>('stash');
+  
+  // Edit dialog state
+  const [editingItem, setEditingItem] = useState<StashItem | null>(null);
+  
+  // List at spot dialog state
+  const [listingItem, setListingItem] = useState<StashItem | null>(null);
+
+  // Navigate to create listing page with pre-filled data from stash item
+  const handleListOnMarketplace = (item: StashItem, spotChoice: string | null) => {
+    // Encode item data in URL params for pre-filling the form
+    const params = new URLSearchParams();
+    params.set('fromStash', 'true');
+    params.set('stashId', item.id);
+    params.set('title', item.title);
+    params.set('category', item.category);
+    params.set('condition', item.condition);
+    if (item.size) params.set('size', item.size);
+    if (item.brand) params.set('brand', item.brand);
+    if (item.description) params.set('description', item.description);
+    if (item.minPrice) params.set('price', item.minPrice.toString());
+    if (item.images && item.images.length > 0) {
+      params.set('images', item.images.join(','));
+    }
+    // Determine listing type based on preferences
+    if (item.willingToTrade && !item.willingToSell) {
+      params.set('priceType', 'trade');
+    } else if (item.willingToSell) {
+      params.set('priceType', 'fixed');
+    }
+    
+    // If user chose to pick a spot, mark it so the form focuses on spot selection
+    if (spotChoice === 'pick') {
+      params.set('pickSpot', 'true');
+    }
+    
+    navigate(`/create-listing?${params.toString()}`);
+  };
+  
+  // Handle spot selection from dialog
+  const handleSpotSelection = (spotChoice: string | null) => {
+    if (listingItem) {
+      handleListOnMarketplace(listingItem, spotChoice);
+      setListingItem(null);
+    }
+  };
+
+  // Separate stash items and wishlist items
+  const stashItems = useMemo(() => items.filter(i => i.itemType !== 'wtb'), [items]);
+  const wishlistItems = useMemo(() => items.filter(i => i.itemType === 'wtb'), [items]);
+  
+  const displayItems = activeTab === 'stash' ? stashItems : wishlistItems;
+
+  const filteredItems = displayItems.filter(item => {
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      if (!item.title.toLowerCase().includes(query) && 
+          !item.brand?.toLowerCase().includes(query) &&
+          !item.description?.toLowerCase().includes(query)) {
+        return false;
+      }
+    }
+    if (filterCategory !== 'all' && item.category !== filterCategory) {
+      return false;
+    }
+    return true;
+  });
+
+  // Not logged in
+  if (!user) {
+    return (
+      <Layout>
+        <div className="container px-4 py-12 max-w-4xl">
+          <div className="relative overflow-hidden rounded-2xl border-2 border-[#ff6600]/50 bg-black/50 backdrop-blur">
+            {/* Background effects */}
+            <div className="absolute top-0 right-0 w-64 h-64 bg-[#ff6600] opacity-10 rounded-full blur-[80px]" />
+            <div className="absolute bottom-0 left-0 w-48 h-48 bg-[#ff0040] opacity-10 rounded-full blur-[60px]" />
+            
+            <div className="relative py-16 px-6 text-center">
+              <div className="inline-flex items-center justify-center w-24 h-24 rounded-2xl bg-gradient-to-br from-[#ff6600] to-[#ff0040] mb-6 shadow-[0_0_40px_rgba(255,102,0,0.4)]">
+                <Backpack className="h-12 w-12 text-white" />
+              </div>
+              <h1 className="text-4xl md:text-5xl font-black uppercase mb-4" style={{
+                background: 'linear-gradient(135deg, #ff6600, #ff0040)',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+                textShadow: '0 0 40px rgba(255,102,0,0.3)'
+              }}>My Stash</h1>
+              <p className="text-gray-300 mb-8 max-w-lg mx-auto text-lg">
+                Your private gear inventory. Track what you own, set prices, and selectively share with traders.
+              </p>
+              
+              <div className="grid grid-cols-3 gap-4 max-w-md mx-auto mb-8 text-center">
+                <div className="p-4 rounded-lg bg-black/40 border border-white/10">
+                  <Shield className="h-6 w-6 mx-auto mb-2 text-[#ff6600]" />
+                  <p className="text-xs text-gray-400">End-to-End Encrypted</p>
+                </div>
+                <div className="p-4 rounded-lg bg-black/40 border border-white/10">
+                  <ArrowRightLeft className="h-6 w-6 mx-auto mb-2 text-cyan-400" />
+                  <p className="text-xs text-gray-400">P2P Trading</p>
+                </div>
+                <div className="p-4 rounded-lg bg-black/40 border border-white/10">
+                  <Target className="h-6 w-6 mx-auto mb-2 text-purple-400" />
+                  <p className="text-xs text-gray-400">WTB Matching</p>
+                </div>
+              </div>
+              
+              <LoginArea className="justify-center" />
+            </div>
+          </div>
+        </div>
+      </Layout>
+    );
+  }
+
+  // No encryption available
+  if (!isEncryptionAvailable) {
+    return (
+      <Layout>
+        <div className="container px-4 py-12 max-w-4xl">
+          <Card className="bg-black/80 border-2 border-yellow-500/50">
+            <CardContent className="p-8 text-center">
+              <AlertTriangle className="h-12 w-12 mx-auto mb-4 text-yellow-500" />
+              <h2 className="text-2xl font-black uppercase text-white mb-3">Encryption Required</h2>
+              <p className="text-gray-300 mb-6 max-w-md mx-auto">
+                Your Stash is encrypted for privacy. Please use a signer that supports NIP-44 encryption
+                (like Alby, nos2x, or Amber).
+              </p>
+              <Button variant="outline" onClick={() => window.location.href = '/signers'}>
+                Learn About Signers
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      {/* Add shimmer animation */}
+      <style>{`
+        @keyframes shimmer {
+          0% { transform: translateX(-100%); }
+          100% { transform: translateX(100%); }
+        }
+        .animate-shimmer {
+          animation: shimmer 2s infinite;
+        }
+      `}</style>
+      
+      <div className="container px-4 py-6 max-w-7xl">
+        {/* Header */}
+        <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
+          <div className="flex items-center gap-4">
+            <div className="relative">
+              <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-[#ff6600] to-[#ff0040] flex items-center justify-center shadow-[0_0_25px_rgba(255,102,0,0.4)]">
+                <Backpack className="h-7 w-7 text-white" />
+              </div>
+              <div className="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-[#ccff00] border-2 border-black flex items-center justify-center">
+                <span className="text-black text-[10px] font-black">{stats.total}</span>
+              </div>
+            </div>
+            <div>
+              <h1 className="text-3xl font-black uppercase text-white">My Stash</h1>
+              <p className="text-sm text-muted-foreground flex items-center gap-2">
+                <Shield className="h-3.5 w-3.5 text-green-400" />
+                <span>Encrypted & Private</span>
+                <span className="text-white/20">|</span>
+                <span className="text-[#ccff00]">{stats.total} items</span>
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <AddItemDialog onAdd={(item) => addItem.mutate(item)} mode="wtb" />
+            <AddItemDialog onAdd={(item) => addItem.mutate(item)} mode="stash" />
+          </div>
+        </div>
+
+        <div className="grid lg:grid-cols-4 gap-6">
+          {/* Main content */}
+          <div className="lg:col-span-3 space-y-4">
+            {/* Tabs for Stash vs Wishlist */}
+            <div className="flex items-center gap-2 p-1 rounded-lg bg-black/40 border border-white/10 w-fit">
+              <button
+                onClick={() => setActiveTab('stash')}
+                className={cn(
+                  "flex items-center gap-2 px-4 py-2 rounded-md font-bold text-sm transition-all",
+                  activeTab === 'stash' 
+                    ? "bg-gradient-to-r from-[#ff6600] to-[#ff0040] text-white shadow-lg" 
+                    : "text-gray-400 hover:text-white"
+                )}
+              >
+                <Package className="h-4 w-4" />
+                Stash ({stashItems.length})
+              </button>
+              <button
+                onClick={() => setActiveTab('wishlist')}
+                className={cn(
+                  "flex items-center gap-2 px-4 py-2 rounded-md font-bold text-sm transition-all",
+                  activeTab === 'wishlist' 
+                    ? "bg-cyan-500 text-black shadow-lg" 
+                    : "text-gray-400 hover:text-white"
+                )}
+              >
+                <Heart className="h-4 w-4" />
+                Wishlist ({wishlistItems.length})
+              </button>
+            </div>
+
+            {/* Search and filters */}
+            <div className="flex flex-col sm:flex-row gap-3">
+              <div className="relative flex-1">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder={activeTab === 'stash' ? "Search your stash..." : "Search your wishlist..."}
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-9 bg-black/40 border-white/20"
+                />
+              </div>
+              <Select value={filterCategory} onValueChange={setFilterCategory}>
+                <SelectTrigger className="w-full sm:w-[180px] bg-black/40 border-white/20">
+                  <Filter className="h-4 w-4 mr-2" />
+                  <SelectValue placeholder="All Categories" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Categories</SelectItem>
+                  {Object.entries(STASH_CATEGORIES).map(([key, cat]) => (
+                    <SelectItem key={key} value={key}>
+                      {cat.emoji} {cat.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Items grid */}
+            {isLoading ? (
+              <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <Card key={i} className="overflow-hidden bg-black/40 border-white/10">
+                    <Skeleton className="h-36 w-full bg-white/5" />
+                    <div className="p-3 space-y-2">
+                      <Skeleton className="h-4 w-3/4 bg-white/5" />
+                      <Skeleton className="h-3 w-1/2 bg-white/5" />
+                      <Skeleton className="h-3 w-full bg-white/5" />
+                    </div>
+                  </Card>
+                ))}
+              </div>
+            ) : filteredItems.length === 0 ? (
+              <Card className="bg-black/60 border-dashed border-2 border-gray-700">
+                <CardContent className="py-16 text-center">
+                  {activeTab === 'wishlist' ? (
+                    <>
+                      <Heart className="h-12 w-12 mx-auto mb-4 text-cyan-500/50" />
+                      <h3 className="text-xl font-bold text-white mb-2">Your Wishlist is Empty</h3>
+                      <p className="text-muted-foreground mb-6 max-w-sm mx-auto">
+                        Add items you're looking for to get notified when friends have matching gear.
+                      </p>
+                      <AddItemDialog onAdd={(item) => addItem.mutate(item)} mode="wtb" />
+                    </>
+                  ) : (
+                    <>
+                      <Sparkles className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+                      <h3 className="text-xl font-bold text-white mb-2">
+                        {stashItems.length === 0 ? 'Your Stash is Empty' : 'No Items Match'}
+                      </h3>
+                      <p className="text-muted-foreground mb-6 max-w-sm mx-auto">
+                        {stashItems.length === 0
+                          ? 'Add your gear to track what you own and what you might want to sell or trade.'
+                          : 'Try adjusting your search or filters.'}
+                      </p>
+                      {stashItems.length === 0 && (
+                        <AddItemDialog onAdd={(item) => addItem.mutate(item)} />
+                      )}
+                    </>
+                  )}
+                </CardContent>
+              </Card>
+            ) : (
+              <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+                {filteredItems.map((item) => (
+                  <StashItemCard
+                    key={item.id}
+                    item={item}
+                    isWTB={item.itemType === 'wtb'}
+                    onEdit={() => setEditingItem(item)}
+                    onDelete={() => removeItem.mutate(item.id)}
+                    onListOnMarketplace={() => setListingItem(item)}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-4">
+            {/* Profile Stats Panel */}
+            <CharacterPanel stats={stats} pubkey={user.pubkey} />
+
+            {/* Wishlist Matching Panel */}
+            <WishlistMatchingPanel wishlistItems={wishlistItems} stashItems={stashItems} />
+
+            {/* Marketplace connection card */}
+            <Card className="bg-gradient-to-br from-[#ff6600]/10 to-[#ff0040]/10 border-[#ff6600]/30">
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm flex items-center gap-2 text-[#ff6600]">
+                  <Store className="h-4 w-4" />
+                  Stash → Marketplace
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <p className="text-xs text-muted-foreground">
+                  Items marked for sale or trade can be listed on the public marketplace with one click.
+                </p>
+                <div className="flex flex-col gap-2">
+                  <div className="flex items-center gap-2 text-xs">
+                    <Badge variant="outline" className="border-green-500/50 text-green-400 gap-1">
+                      <Zap className="h-2.5 w-2.5" />
+                      Sell
+                    </Badge>
+                    <span className="text-muted-foreground">→ Fixed price listing</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-xs">
+                    <Badge variant="outline" className="border-cyan-500/50 text-cyan-400 gap-1">
+                      <ArrowRightLeft className="h-2.5 w-2.5" />
+                      Trade
+                    </Badge>
+                    <span className="text-muted-foreground">→ Trade listing</span>
+                  </div>
+                </div>
+                <Button 
+                  variant="outline" 
+                  size="sm" 
+                  className="w-full border-[#ff6600]/50 text-[#ff6600] hover:bg-[#ff6600]/10"
+                  onClick={() => navigate('/map?view=gear')}
+                >
+                  <ExternalLink className="h-3.5 w-3.5 mr-2" />
+                  Browse Marketplace
+                </Button>
+              </CardContent>
+            </Card>
+
+            {/* Tips card */}
+            <Card className="bg-gradient-to-br from-purple-500/10 to-pink-500/10 border-purple-500/30">
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm flex items-center gap-2 text-purple-400">
+                  <Gem className="h-4 w-4" />
+                  Pro Tips
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-2 text-xs text-muted-foreground">
+                <p>• Hover on items to see "List on Marketplace"</p>
+                <p>• Wishlist items auto-match with friends' stashes</p>
+                <p>• Share specific items via encrypted DMs</p>
+                <p>• Add photos to help others see what you have</p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+      
+      {/* Edit Item Dialog */}
+      {editingItem && (
+        <EditItemDialog
+          item={editingItem}
+          open={!!editingItem}
+          onOpenChange={(open) => !open && setEditingItem(null)}
+          onSave={(updatedItem) => {
+            updateItem.mutate(updatedItem);
+            setEditingItem(null);
+          }}
+        />
+      )}
+      
+      {/* List at Spot Dialog */}
+      {listingItem && (
+        <ListAtSpotDialog
+          item={listingItem}
+          open={!!listingItem}
+          onOpenChange={(open) => !open && setListingItem(null)}
+          onSelectSpot={handleSpotSelection}
+        />
+      )}
+    </Layout>
+  );
+}
diff --git a/src/src/pages/TourDetailPage.tsx b/src/src/pages/TourDetailPage.tsx
new file mode 100644
index 0000000..8abc04e
--- /dev/null
+++ b/src/src/pages/TourDetailPage.tsx
@@ -0,0 +1,373 @@
+import { useSeoMeta } from '@unhead/react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useTour } from '@/hooks/useTours';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { genUserName } from '@/lib/genUserName';
+import { TOUR_SKILL_LEVELS, TOUR_SPOT_TYPES } from '@/lib/types';
+import { ZapButton } from '@/components/ZapButton';
+import {
+  ArrowLeft,
+  Route,
+  MapPin,
+  Clock,
+  Users,
+  Zap,
+  Globe,
+  MessageCircle,
+  Calendar,
+  Star,
+  Share2,
+  Flag,
+  Store,
+  Percent,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { SponsorSlot } from '@/components/SponsorSlot';
+
+export default function TourDetailPage() {
+  const { pubkey, identifier } = useParams<{ pubkey: string; identifier: string }>();
+  const navigate = useNavigate();
+  const { user } = useCurrentUser();
+  const { data: tour, isLoading, error } = useTour(identifier || '', pubkey);
+  const author = useAuthor(tour?.pubkey || '');
+  const metadata = author.data?.metadata;
+  const guideName = metadata?.name ?? genUserName(tour?.pubkey || '');
+
+  useSeoMeta({
+    title: tour ? `${tour.title} - Local Tour - SkateSpots` : 'Local Tour - SkateSpots',
+    description: tour?.description || 'Discover hidden skate spots with a local guide',
+  });
+
+  const handleBookTour = () => {
+    if (!tour) return;
+    // Navigate to messages/DM with the guide
+    // For now, navigate to messages page - in future can open DM composer
+    navigate(`/messages?to=${tour.pubkey}`);
+  };
+
+  const handleShare = async () => {
+    if (!tour) return;
+    const url = window.location.href;
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title: tour.title,
+          text: `Check out this local skate tour: ${tour.title}`,
+          url,
+        });
+      } catch {
+        // User cancelled or error
+      }
+    } else {
+      await navigator.clipboard.writeText(url);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <Layout>
+        <div className="container px-4 py-6 max-w-3xl">
+          <Skeleton className="h-6 w-32 mb-6" />
+          <Card className="bg-black/90 border-cyan-500/30">
+            <CardHeader>
+              <Skeleton className="h-8 w-3/4 mb-2" />
+              <Skeleton className="h-4 w-1/2" />
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <Skeleton className="h-48 w-full rounded-lg" />
+              <div className="space-y-3">
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-3/4" />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  if (error || !tour) {
+    return (
+      <Layout>
+        <div className="container px-4 py-12">
+          <Card className="max-w-xl mx-auto border-dashed">
+            <CardContent className="py-12 text-center">
+              <Route className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+              <h2 className="text-xl font-bold mb-2">Tour Not Found</h2>
+              <p className="text-muted-foreground mb-6">
+                This tour may have been removed or doesn't exist.
+              </p>
+              <Link to="/map">
+                <Button variant="outline">
+                  <ArrowLeft className="h-4 w-4 mr-2" />
+                  Back to Map
+                </Button>
+              </Link>
+            </CardContent>
+          </Card>
+        </div>
+      </Layout>
+    );
+  }
+
+  const skillInfo = tour.skillLevel ? TOUR_SKILL_LEVELS[tour.skillLevel as keyof typeof TOUR_SKILL_LEVELS] : null;
+
+  return (
+    <Layout>
+      <div className="container px-4 py-6 max-w-3xl">
+        {/* Back link */}
+        <Link to="/map" className="inline-flex items-center text-gray-400 hover:text-white transition-colors mb-6">
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Back to Map
+        </Link>
+
+        {/* Main card */}
+        <Card className="bg-black/90 border-2 border-cyan-500/30 overflow-hidden">
+          {/* Tour image */}
+          {tour.image && (
+            <div className="relative h-48 sm:h-64 bg-gradient-to-br from-cyan-500/20 to-cyan-900/20">
+              <img
+                src={tour.image}
+                alt={tour.title}
+                className="w-full h-full object-cover"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
+            </div>
+          )}
+
+          <CardHeader className={cn(tour.image && '-mt-16 relative z-10')}>
+            <div className="flex items-start gap-4">
+              <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500 to-cyan-600 flex items-center justify-center shadow-lg shadow-cyan-500/25 flex-shrink-0">
+                <Route className="h-7 w-7 text-white" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <Badge className="bg-cyan-500/20 text-cyan-300 border-cyan-500/30 mb-2">
+                  LOCAL TOUR
+                </Badge>
+                <CardTitle className="text-2xl font-black text-white">
+                  {tour.title}
+                </CardTitle>
+                {tour.location && (
+                  <p className="text-gray-400 flex items-center gap-1 mt-1">
+                    <MapPin className="h-4 w-4" />
+                    {tour.location}
+                  </p>
+                )}
+              </div>
+            </div>
+          </CardHeader>
+
+          <CardContent className="space-y-6">
+            {/* Guide info */}
+            <div className="flex items-center justify-between p-4 rounded-xl bg-cyan-500/10 border border-cyan-500/20">
+              <div className="flex items-center gap-3">
+                <Avatar className="h-12 w-12 border-2 border-cyan-500/50">
+                  <AvatarImage src={metadata?.picture} alt={guideName} />
+                  <AvatarFallback className="bg-cyan-500/20 text-cyan-400">
+                    {guideName.slice(0, 2).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="font-bold text-white">{guideName}</p>
+                  <p className="text-xs text-cyan-400">Local Guide</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <ZapButton
+                  event={tour.event}
+                  variant="ghost"
+                  size="sm"
+                  className="text-orange-400 hover:text-orange-300 hover:bg-orange-500/10"
+                />
+                <Link to={`/npub1${tour.pubkey.slice(0, 8)}...`}>
+                  <Button variant="outline" size="sm" className="border-cyan-500/30 text-cyan-400 hover:bg-cyan-500/10">
+                    View Profile
+                  </Button>
+                </Link>
+              </div>
+            </div>
+
+            {/* Description */}
+            {tour.description && (
+              <div>
+                <h3 className="font-bold text-white mb-2">About This Tour</h3>
+                <p className="text-gray-300 whitespace-pre-wrap">{tour.description}</p>
+              </div>
+            )}
+
+            {/* Tour details grid */}
+            <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
+              {tour.duration && (
+                <div className="p-3 rounded-lg bg-gray-900/50 border border-gray-800">
+                  <div className="flex items-center gap-2 text-gray-400 mb-1">
+                    <Clock className="h-4 w-4" />
+                    <span className="text-xs">Duration</span>
+                  </div>
+                  <p className="font-bold text-white">{tour.duration} hours</p>
+                </div>
+              )}
+              
+              {tour.maxGroupSize && (
+                <div className="p-3 rounded-lg bg-gray-900/50 border border-gray-800">
+                  <div className="flex items-center gap-2 text-gray-400 mb-1">
+                    <Users className="h-4 w-4" />
+                    <span className="text-xs">Max Group</span>
+                  </div>
+                  <p className="font-bold text-white">{tour.maxGroupSize} people</p>
+                </div>
+              )}
+
+              {skillInfo && (
+                <div className="p-3 rounded-lg bg-gray-900/50 border border-gray-800">
+                  <div className="flex items-center gap-2 text-gray-400 mb-1">
+                    <Star className="h-4 w-4" />
+                    <span className="text-xs">Skill Level</span>
+                  </div>
+                  <p className="font-bold text-white flex items-center gap-1">
+                    <span>{skillInfo.emoji}</span>
+                    {skillInfo.label}
+                  </p>
+                </div>
+              )}
+
+              {tour.price && (
+                <div className="p-3 rounded-lg bg-orange-500/10 border border-orange-500/30">
+                  <div className="flex items-center gap-2 text-orange-400 mb-1">
+                    <Zap className="h-4 w-4" />
+                    <span className="text-xs">Price</span>
+                  </div>
+                  <p className="font-bold text-orange-400">{tour.price.toLocaleString()} sats</p>
+                  <p className="text-xs text-gray-500">per person</p>
+                </div>
+              )}
+
+              {tour.availability && (
+                <div className="p-3 rounded-lg bg-gray-900/50 border border-gray-800">
+                  <div className="flex items-center gap-2 text-gray-400 mb-1">
+                    <Calendar className="h-4 w-4" />
+                    <span className="text-xs">Availability</span>
+                  </div>
+                  <p className="font-bold text-white text-sm">{tour.availability}</p>
+                </div>
+              )}
+
+              {tour.languages && tour.languages.length > 0 && (
+                <div className="p-3 rounded-lg bg-gray-900/50 border border-gray-800">
+                  <div className="flex items-center gap-2 text-gray-400 mb-1">
+                    <Globe className="h-4 w-4" />
+                    <span className="text-xs">Languages</span>
+                  </div>
+                  <p className="font-bold text-white text-sm">
+                    {tour.languages.map(l => l.toUpperCase()).join(', ')}
+                  </p>
+                </div>
+              )}
+            </div>
+
+            {/* Spot types */}
+            {tour.spotTypes.length > 0 && (
+              <div>
+                <h3 className="font-bold text-white mb-2">Types of Spots</h3>
+                <div className="flex flex-wrap gap-2">
+                  {tour.spotTypes.map((type) => {
+                    const typeInfo = TOUR_SPOT_TYPES[type as keyof typeof TOUR_SPOT_TYPES];
+                    return (
+                      <Badge
+                        key={type}
+                        variant="outline"
+                        className="border-cyan-500/30 text-cyan-300"
+                      >
+                        {typeInfo?.emoji || '🛹'} {typeInfo?.label || type}
+                      </Badge>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+
+            {/* Partner Shop Discount */}
+            {tour.shopDiscount && tour.shopName && (
+              <div className="p-4 rounded-xl bg-[#ccff00]/10 border border-[#ccff00]/30">
+                <div className="flex items-start gap-3">
+                  <div className="w-12 h-12 rounded-lg bg-[#ccff00]/20 flex items-center justify-center flex-shrink-0">
+                    <Store className="h-6 w-6 text-[#ccff00]" />
+                  </div>
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2 mb-1">
+                      <Percent className="h-4 w-4 text-[#ccff00]" />
+                      <span className="font-bold text-[#ccff00]">Partner Shop Discount</span>
+                    </div>
+                    <p className="text-white font-bold text-lg mb-1">
+                      {tour.shopDiscount}% OFF at {tour.shopName}
+                    </p>
+                    <p className="text-xs text-gray-400">
+                      Book this tour to receive a discount at the partner skate shop. Show your booking confirmation to the shop staff.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Tour Sponsors - invisible placeholder until sponsors are added */}
+            <SponsorSlot 
+              size="card" 
+              sponsors={tour.sponsors} 
+              title="Tour Sponsors"
+              className="mt-4"
+            />
+
+            {/* Meeting point */}
+            {tour.meetingPoint && (
+              <div className="p-4 rounded-xl bg-cyan-500/10 border border-cyan-500/20">
+                <div className="flex items-center gap-2 text-cyan-400 mb-2">
+                  <Flag className="h-5 w-5" />
+                  <span className="font-bold">Meeting Point</span>
+                </div>
+                <p className="text-white">{tour.meetingPoint}</p>
+                {tour.meetingPointCoords && (
+                  <p className="text-xs text-gray-500 mt-1">
+                    {tour.meetingPointCoords.lat.toFixed(4)}, {tour.meetingPointCoords.lon.toFixed(4)}
+                  </p>
+                )}
+              </div>
+            )}
+
+            {/* Actions */}
+            <div className="flex flex-col sm:flex-row gap-3 pt-4 border-t border-gray-800">
+              <Button
+                onClick={handleBookTour}
+                className="flex-1 bg-cyan-500 hover:bg-cyan-600 text-white font-bold"
+                disabled={!user}
+              >
+                <MessageCircle className="h-4 w-4 mr-2" />
+                {user ? 'Contact Guide to Book' : 'Login to Book'}
+              </Button>
+              <Button
+                variant="outline"
+                onClick={handleShare}
+                className="border-gray-700 hover:bg-gray-800"
+              >
+                <Share2 className="h-4 w-4 mr-2" />
+                Share
+              </Button>
+            </div>
+
+            {!user && (
+              <p className="text-center text-sm text-gray-500">
+                Login to contact the guide and book this tour
+              </p>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/pages/WalletPage.tsx b/src/src/pages/WalletPage.tsx
new file mode 100644
index 0000000..8afcf78
--- /dev/null
+++ b/src/src/pages/WalletPage.tsx
@@ -0,0 +1,355 @@
+import { useSeoMeta } from '@unhead/react';
+import { Layout } from '@/components/Layout';
+import { WalletModal } from '@/components/WalletModal';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useWallet } from '@/hooks/useWallet';
+import { useNWC } from '@/hooks/useNWCContext';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useCashu } from '@/hooks/wallet/useCashu';
+import { useSatsToUsd } from '@/hooks/useExchangeRate';
+import { LoginArea } from '@/components/auth/LoginArea';
+import { CashuWalletCard } from '@/components/wallet/CashuWalletCard';
+import { LightningPrivacyTips } from '@/components/wallet/LightningPrivacyTips';
+import { WalletComparisonGuide } from '@/components/wallet/WalletComparisonGuide';
+import {
+  Wallet,
+  Zap,
+  Settings,
+  CheckCircle,
+  XCircle,
+  ExternalLink,
+  Globe,
+  WalletMinimal,
+  Info,
+  Nut,
+} from 'lucide-react';
+
+function WalletStatusCard() {
+  const { webln } = useWallet();
+  const { connections } = useNWC();
+  const { totalBalance: cashuBalance, isInitialized: hasCashu } = useCashu();
+  const cashuUsd = useSatsToUsd(cashuBalance);
+  const hasNWC = connections.length > 0 && connections.some(c => c.isConnected);
+  const isReady = webln || hasNWC || hasCashu;
+
+  return (
+    <Card className={isReady ? 'border-primary/30' : ''}>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="flex items-center gap-2">
+            <Wallet className="h-5 w-5 text-primary" />
+            Wallet Status
+          </CardTitle>
+          <Badge variant={isReady ? 'default' : 'secondary'}>
+            {isReady ? 'Ready' : 'Not Connected'}
+          </Badge>
+        </div>
+        <CardDescription>
+          {isReady
+            ? 'Your wallet is connected and ready to send zaps!'
+            : 'Connect a wallet to enable Lightning zaps'}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Cashu Wallet Status */}
+        <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
+          <div className="flex items-center gap-3">
+            <Nut className="h-5 w-5 text-orange-500" />
+            <div>
+              <p className="font-medium">Cashu Wallet</p>
+              <p className="text-sm text-muted-foreground">
+                {hasCashu && cashuBalance > 0
+                  ? `${cashuBalance.toLocaleString()} sats${cashuUsd ? ` (~$${cashuUsd.toFixed(2)})` : ''}`
+                  : 'Built-in ecash wallet'}
+              </p>
+            </div>
+          </div>
+          {hasCashu ? (
+            <CheckCircle className="h-5 w-5 text-green-500" />
+          ) : (
+            <XCircle className="h-5 w-5 text-muted-foreground" />
+          )}
+        </div>
+
+        {/* WebLN Status */}
+        <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
+          <div className="flex items-center gap-3">
+            <Globe className="h-5 w-5 text-muted-foreground" />
+            <div>
+              <p className="font-medium">WebLN</p>
+              <p className="text-sm text-muted-foreground">Browser extension wallet</p>
+            </div>
+          </div>
+          {webln ? (
+            <CheckCircle className="h-5 w-5 text-green-500" />
+          ) : (
+            <XCircle className="h-5 w-5 text-muted-foreground" />
+          )}
+        </div>
+
+        {/* NWC Status */}
+        <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
+          <div className="flex items-center gap-3">
+            <WalletMinimal className="h-5 w-5 text-muted-foreground" />
+            <div>
+              <p className="font-medium">Nostr Wallet Connect</p>
+              <p className="text-sm text-muted-foreground">
+                {connections.length > 0
+                  ? `${connections.length} wallet${connections.length !== 1 ? 's' : ''} connected`
+                  : 'Remote wallet connection'}
+              </p>
+            </div>
+          </div>
+          {hasNWC ? (
+            <CheckCircle className="h-5 w-5 text-green-500" />
+          ) : (
+            <XCircle className="h-5 w-5 text-muted-foreground" />
+          )}
+        </div>
+
+        <WalletModal>
+          <Button className="w-full gap-2">
+            <Settings className="h-4 w-4" />
+            Manage Wallets
+          </Button>
+        </WalletModal>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ZapsInfoCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Zap className="h-5 w-5 text-amber-500" />
+          What are Zaps?
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <p className="text-muted-foreground">
+          Zaps are Lightning Network micropayments on Nostr. They allow you to send
+          satoshis (sats) instantly to other users as a way of tipping, thanking, or
+          supporting their content.
+        </p>
+
+        <div className="space-y-3">
+          <div className="flex items-start gap-3 p-3 bg-muted/50 rounded-lg">
+            <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
+              <span className="text-lg">⚡</span>
+            </div>
+            <div>
+              <p className="font-medium">Instant</p>
+              <p className="text-sm text-muted-foreground">
+                Payments settle in seconds over the Lightning Network
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-start gap-3 p-3 bg-muted/50 rounded-lg">
+            <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
+              <span className="text-lg">🔐</span>
+            </div>
+            <div>
+              <p className="font-medium">Flexible custody</p>
+              <p className="text-sm text-muted-foreground">
+                Use your own wallet (self-custodial) or a custodial service - your choice
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-start gap-3 p-3 bg-muted/50 rounded-lg">
+            <div className="w-8 h-8 rounded-full bg-orange-500/10 flex items-center justify-center flex-shrink-0">
+              <span className="text-lg">🥜</span>
+            </div>
+            <div>
+              <p className="font-medium">NutZaps for privacy</p>
+              <p className="text-sm text-muted-foreground">
+                Use Cashu ecash for private zaps - mints can't see who pays whom
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-start gap-3 p-3 bg-muted/50 rounded-lg">
+            <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
+              <span className="text-lg">💜</span>
+            </div>
+            <div>
+              <p className="font-medium">Value for value</p>
+              <p className="text-sm text-muted-foreground">
+                Support creators directly for content you appreciate
+              </p>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function WalletResourcesCard() {
+  const walletResources = [
+    {
+      name: 'Alby',
+      description: 'Browser extension wallet with WebLN + NWC support',
+      url: 'https://getalby.com',
+      type: 'WebLN',
+    },
+    {
+      name: 'Minibits',
+      description: 'Mobile Cashu wallet with NWC support',
+      url: 'https://www.minibits.cash',
+      type: 'NWC',
+    },
+    {
+      name: 'Zeus',
+      description: 'Self-custodial mobile Lightning wallet',
+      url: 'https://zeusln.com',
+      type: 'NWC',
+    },
+    {
+      name: 'Coinos',
+      description: 'Web-based Lightning wallet, works on any device',
+      url: 'https://coinos.io',
+      type: 'NWC',
+    },
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Info className="h-5 w-5" />
+          Recommended Wallets
+        </CardTitle>
+        <CardDescription>
+          Get started with one of these Lightning wallets
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid gap-3">
+          {walletResources.map((wallet) => (
+            <a
+              key={wallet.name}
+              href={wallet.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center justify-between p-3 bg-muted/50 rounded-lg hover:bg-muted transition-colors group"
+            >
+              <div>
+                <div className="flex items-center gap-2">
+                  <p className="font-medium group-hover:text-primary transition-colors">
+                    {wallet.name}
+                  </p>
+                  <Badge variant="outline" className="text-xs">
+                    {wallet.type}
+                  </Badge>
+                </div>
+                <p className="text-sm text-muted-foreground">{wallet.description}</p>
+              </div>
+              <ExternalLink className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+            </a>
+          ))}
+        </div>
+        
+        <a
+          href="https://planb.academy/en/tutorials/wallet"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-2 text-sm text-orange-400 hover:text-orange-300 transition-colors"
+        >
+          <ExternalLink className="h-4 w-4" />
+          <span>Want to learn more? Check out Plan B Academy's wallet guides</span>
+        </a>
+      </CardContent>
+    </Card>
+  );
+}
+
+function NotLoggedInCard() {
+  return (
+    <Card className="border-dashed">
+      <CardContent className="py-12 text-center">
+        <Wallet className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+        <h3 className="text-lg font-medium mb-2">Login Required</h3>
+        <p className="text-muted-foreground max-w-md mx-auto mb-6">
+          Log in with your Nostr account to connect your Lightning wallet and start zapping.
+        </p>
+        <LoginArea className="justify-center" />
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function WalletPage() {
+  useSeoMeta({
+    title: 'Wallet - SkateSpots',
+    description: 'Connect your Lightning wallet to send zaps to skaters and spot creators.',
+  });
+
+  const { user } = useCurrentUser();
+
+  return (
+    <Layout>
+      <div className="container px-4 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold">Wallet</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage your Bitcoin and send zaps to skaters and creators
+          </p>
+        </div>
+
+        {user ? (
+          <div className="space-y-6">
+            {/* Wallet Comparison Guide */}
+            <WalletComparisonGuide />
+
+            <Tabs defaultValue="cashu" className="w-full">
+              <TabsList className="grid w-full grid-cols-2 mb-6">
+                <TabsTrigger value="cashu" className="gap-2">
+                  <Nut className="h-4 w-4" />
+                  Cashu Wallet
+                </TabsTrigger>
+                <TabsTrigger value="lightning" className="gap-2">
+                  <Zap className="h-4 w-4" />
+                  Lightning
+                </TabsTrigger>
+              </TabsList>
+
+            <TabsContent value="cashu" className="space-y-6">
+              <CashuWalletCard />
+            </TabsContent>
+
+            <TabsContent value="lightning" className="space-y-6">
+              {/* Privacy Tips at the top */}
+              <LightningPrivacyTips />
+              
+              <div className="grid gap-6 lg:grid-cols-2">
+                <div className="space-y-6">
+                  <WalletStatusCard />
+                  <WalletResourcesCard />
+                </div>
+                <div>
+                  <ZapsInfoCard />
+                </div>
+              </div>
+            </TabsContent>
+            </Tabs>
+          </div>
+        ) : (
+          <div className="max-w-xl mx-auto">
+            <NotLoggedInCard />
+            <div className="mt-6">
+              <ZapsInfoCard />
+            </div>
+          </div>
+        )}
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/src/test/ErrorBoundary.test.tsx b/src/src/test/ErrorBoundary.test.tsx
new file mode 100644
index 0000000..3f49427
--- /dev/null
+++ b/src/src/test/ErrorBoundary.test.tsx
@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { ErrorBoundary } from '@/components/ErrorBoundary';
+
+
+
+// Test component that throws an error
+const ThrowError = ({ shouldThrow }: { shouldThrow: boolean }) => {
+  if (shouldThrow) {
+    throw new Error('Test error');
+  }
+  return <div>No error</div>;
+};
+
+describe('ErrorBoundary', () => {
+  it('renders children when no error occurs', () => {
+    render(
+      <ErrorBoundary>
+        <div>Test content</div>
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByText('Test content')).toBeInTheDocument();
+  });
+
+  it('catches and displays error when child throws', () => {
+    // Suppress console.error for this test
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    render(
+      <ErrorBoundary>
+        <ThrowError shouldThrow={true} />
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+    expect(screen.getByText('An unexpected error occurred. The error has been reported.')).toBeInTheDocument();
+
+    consoleSpy.mockRestore();
+  });
+
+
+
+  it('uses custom fallback when provided', () => {
+    const customFallback = <div>Custom error message</div>;
+
+    // Suppress console.error for this test
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    render(
+      <ErrorBoundary fallback={customFallback}>
+        <ThrowError shouldThrow={true} />
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByText('Custom error message')).toBeInTheDocument();
+
+    consoleSpy.mockRestore();
+  });
+});
\ No newline at end of file
diff --git a/src/src/test/TestApp.tsx b/src/src/test/TestApp.tsx
new file mode 100644
index 0000000..d88fb9f
--- /dev/null
+++ b/src/src/test/TestApp.tsx
@@ -0,0 +1,56 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { createHead, UnheadProvider } from '@unhead/react/client';
+import { BrowserRouter } from 'react-router-dom';
+import { NostrLoginProvider } from '@nostrify/react/login';
+import NostrProvider from '@/components/NostrProvider';
+import { AppProvider } from '@/components/AppProvider';
+import { NWCProvider } from '@/contexts/NWCContext';
+import { AppConfig } from '@/contexts/AppContext';
+
+interface TestAppProps {
+  children: React.ReactNode;
+}
+
+export function TestApp({ children }: TestAppProps) {
+  const head = createHead();
+
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  const defaultConfig: AppConfig = {
+    theme: 'dark',
+    relayMetadata: {
+      relays: [
+        { url: 'wss://relay.ditto.pub', read: true, write: true },
+        { url: 'wss://goskatespots.nostr1.com', read: true, write: true },
+        { url: 'wss://wotr.relatr.xyz', read: true, write: true },
+        { url: 'wss://purplepag.es', read: true, write: false },
+      ],
+      updatedAt: 0,
+    },
+  };
+
+  return (
+    <UnheadProvider head={head}>
+      <AppProvider storageKey='test-app-config' defaultConfig={defaultConfig}>
+        <QueryClientProvider client={queryClient}>
+          <NostrLoginProvider storageKey='test-login'>
+            <NostrProvider>
+              <NWCProvider>
+                <BrowserRouter>
+                  {children}
+                </BrowserRouter>
+              </NWCProvider>
+            </NostrProvider>
+          </NostrLoginProvider>
+        </QueryClientProvider>
+      </AppProvider>
+    </UnheadProvider>
+  );
+}
+
+export default TestApp;
\ No newline at end of file
diff --git a/src/src/test/setup.ts b/src/src/test/setup.ts
new file mode 100644
index 0000000..fb9808b
--- /dev/null
+++ b/src/src/test/setup.ts
@@ -0,0 +1,40 @@
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+// Mock window.scrollTo
+Object.defineProperty(window, 'scrollTo', {
+  writable: true,
+  value: vi.fn(),
+});
+
+// Mock IntersectionObserver
+global.IntersectionObserver = vi.fn().mockImplementation((_callback) => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+  root: null,
+  rootMargin: '',
+  thresholds: [],
+}));
+
+// Mock ResizeObserver
+global.ResizeObserver = vi.fn().mockImplementation((_callback) => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
\ No newline at end of file
diff --git a/src/src/vite-env.d.ts b/src/src/vite-env.d.ts
new file mode 100644
index 0000000..c0640ec
--- /dev/null
+++ b/src/src/vite-env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare namespace JSX {
+  interface IntrinsicElements {
+    'bc-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    'bc-balance': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+  }
+}