diff --git a/frontend/src/assets/img/app-previews/skypic.jpg b/frontend/src/assets/img/app-previews/skypic.jpg
index c50ef7e..f7ee46b 100644
Binary files a/frontend/src/assets/img/app-previews/skypic.jpg and b/frontend/src/assets/img/app-previews/skypic.jpg differ
diff --git a/frontend/src/skypic.backend.contract.test.ts b/frontend/src/skypic.backend.contract.test.ts
index 893f097..21cc2ac 100644
--- a/frontend/src/skypic.backend.contract.test.ts
+++ b/frontend/src/skypic.backend.contract.test.ts
@@ -243,6 +243,77 @@ describe('SkyPic backend contracts', () => {
     expect(mockServer).toContain('mediaItems.length * recipients.length > 40')
   })
 
+  it('maintains reciprocal UTC-day streaks and returns reconciled values', () => {
+    const friendshipMigration = migrationTable('friendships')
+    const friendshipInstall = installTable('friendships')
+    const friends = block(
+      server,
+      'local function list_friends',
+      'local function list_requests',
+    )
+    const conversations = block(
+      server,
+      'local function list_conversations',
+      'Bridge.Callbacks.Register("sky_phone:skypic:bootstrap"',
+    )
+    const metadata = block(
+      server,
+      'local function load_snap_metadata',
+      'local function opened_snap_from_row',
+    )
+    const sendSnap = block(
+      server,
+      'Bridge.Callbacks.Register("sky_phone:skypic:send-snap"',
+      'Bridge.Callbacks.Register("sky_phone:skypic:open-snap"',
+    )
+
+    for (const schema of [friendshipMigration, friendshipInstall]) {
+      expect(schema).toContain('profile_a_last_snap_on')
+      expect(schema).toContain('profile_b_last_snap_on')
+      expect(schema).toContain('streak_updated_on')
+      expect(schema).toContain('streak_count')
+      expect(schema).toContain('best_streak')
+      expect(schema).toContain('idx_sky_phone_skypic_streaks')
+    }
+
+    expect(sendSnap).toContain('SET %s = UTC_DATE()')
+    expect(sendSnap).toContain(
+      'SELECT 1 FROM `sky_phone_skypic_messages` message WHERE message.`id` = ?',
+    )
+    expect(sendSnap).toContain('friendship.profile_a_id == profile.profile_id')
+    expect(sendSnap).toContain('`profile_a_last_snap_on` = UTC_DATE()')
+    expect(sendSnap).toContain('`profile_b_last_snap_on` = UTC_DATE()')
+    expect(sendSnap).toContain(
+      '`streak_updated_on` = DATE_SUB(UTC_DATE(), INTERVAL 1 DAY)',
+    )
+    expect(sendSnap).toContain(
+      '`streak_updated_on` IS NULL OR `streak_updated_on` < UTC_DATE()',
+    )
+    expect(sendSnap).toContain('Bridge.Database.Transaction(statements)')
+
+    for (const serializer of [friends, conversations, metadata]) {
+      expect(serializer).toContain(
+        '`streak_updated_on` < DATE_SUB(UTC_DATE(), INTERVAL 1 DAY)',
+      )
+      expect(serializer).toContain(
+        'THEN 0 ELSE friendship.`streak_count` END AS `streak_count`',
+      )
+      expect(serializer).toContain('friendship.`best_streak`')
+    }
+    expect(metadata).toContain("friendship.`status` = 'accepted'")
+    expect(metadata).toContain(
+      'snap.streakCount = tonumber(row.streak_count) or 0',
+    )
+    expect(metadata).toContain(
+      'snap.bestStreak = tonumber(row.best_streak) or 0',
+    )
+
+    expect(server).toContain('SET `streak_count` = 0')
+    expect(server).toContain(
+      "WHERE `status` = 'accepted' AND `streak_count` > 0",
+    )
+  })
+
   it('keeps browser payload limits and profile creation aligned with production', () => {
     expect(config).toContain('CaptionMaxLength = 160')
     expect(server).toContain('valid_integer(data.avatarSeed, 1, 2147483647)')
diff --git a/frontend/src/stores/skypic.test.ts b/frontend/src/stores/skypic.test.ts
index 9da59d7..02c9143 100644
--- a/frontend/src/stores/skypic.test.ts
+++ b/frontend/src/stores/skypic.test.ts
@@ -537,6 +537,7 @@ describe('SkyPic store', () => {
     const store = useSkyPicStore()
     store.activeFriendshipId = friend.friendshipId
     store.conversations = [{ ...conversation }]
+    store.friends = [{ ...friend }]
     store.profile = { ...self }
 
     const response = await store.sendSnap({
@@ -566,9 +567,294 @@ describe('SkyPic store', () => {
       id: sent.id,
       type: sent.type,
     })
+    expect(store.friends[0]).toMatchObject({
+      bestStreak: friend.bestStreak,
+      streakCount: friend.streakCount,
+    })
+    expect(store.conversations[0]).toMatchObject({
+      bestStreak: conversation.bestStreak,
+      streakCount: conversation.streakCount,
+    })
     expect(store.profile.snapScore).toBe(self.snapScore + 1)
   })
 
+  it('reconciles one authoritative streak value across an atomic snap batch', async () => {
+    const sentBatch = [1, 2, 3].map(
+      (index): SkyPicSnap => ({
+        ...snap,
+        bestStreak: 18,
+        direction: 'sent',
+        id: `snap-batch-${index}`,
+        sender: { ...self, snapScore: self.snapScore + 3 },
+        streakCount: 1,
+      }),
+    )
+    mockNuiCall.mockResolvedValueOnce({ data: sentBatch, success: true })
+    const store = useSkyPicStore()
+    store.activeFriendshipId = friend.friendshipId
+    store.conversations = [{ ...conversation }]
+    store.friends = [{ ...friend }]
+    store.profile = { ...self }
+
+    await store.sendSnap({
+      allowReplay: false,
+      caption: '',
+      durationSeconds: 5,
+      mediaIds: [1, 2, 3],
+      overlayColor: '#ffffff',
+      recipientIds: [maya.id],
+      textOverlay: '',
+    })
+
+    expect(store.threadSnaps).toHaveLength(3)
+    expect(store.friends[0]).toMatchObject({
+      bestStreak: 18,
+      streakCount: 1,
+    })
+    expect(store.conversations[0]).toMatchObject({
+      bestStreak: 18,
+      streakCount: 1,
+    })
+    expect(store.profile.snapScore).toBe(self.snapScore + 3)
+  })
+
+  it('does not let an older send response overwrite streaks from a newer bootstrap', async () => {
+    const pendingSend = deferred<NuiResponse<SkyPicSnap[]>>()
+    const refreshedProfile = { ...self, snapScore: self.snapScore + 5 }
+    const refreshedFriend = {
+      ...friend,
+      bestStreak: 20,
+      streakCount: 9,
+    }
+    const refreshedConversation: SkyPicConversation = {
+      ...conversation,
+      bestStreak: 20,
+      lastItem: {
+        body: 'Authoritative newer item',
+        createdAt: '2026-08-19T14:00:00.000Z',
+        direction: 'received',
+        id: 'message-newer-hydration',
+        openedAt: null,
+        type: 'text',
+      },
+      streakCount: 9,
+    }
+    const refreshedBootstrap: SkyPicBootstrap = {
+      ...bootstrap,
+      conversations: [refreshedConversation],
+      friends: [refreshedFriend],
+      profile: refreshedProfile,
+    }
+    mockNuiCall
+      .mockReturnValueOnce(pendingSend.promise)
+      .mockResolvedValueOnce({ data: refreshedBootstrap, success: true })
+      .mockResolvedValueOnce({ data: refreshedBootstrap, success: true })
+    const store = useSkyPicStore()
+
+    const sending = store.sendSnap({
+      allowReplay: false,
+      caption: '',
+      durationSeconds: 5,
+      mediaId: 42,
+      mediaType: 'photo',
+      overlayColor: '#ffffff',
+      recipientIds: [maya.id],
+      textOverlay: '',
+    })
+    await expect(store.bootstrap()).resolves.toBe(true)
+
+    const staleSent: SkyPicSnap = {
+      ...snap,
+      bestStreak: 18,
+      direction: 'sent',
+      id: 'snap-stale-streak',
+      sender: refreshedProfile,
+      streakCount: 1,
+    }
+    pendingSend.resolve({ data: [staleSent], success: true })
+    await expect(sending).resolves.toMatchObject({ success: true })
+
+    expect(store.friends[0]).toMatchObject({
+      bestStreak: 20,
+      streakCount: 9,
+    })
+    expect(store.conversations[0]).toMatchObject({
+      bestStreak: 20,
+      lastItem: { id: 'message-newer-hydration' },
+      streakCount: 9,
+    })
+    expect(mockNuiCall).toHaveBeenNthCalledWith(3, 'skypic:bootstrap', {})
+  })
+
+  it('waits for a pending pre-commit bootstrap before its causal refresh', async () => {
+    const pendingSend = deferred<NuiResponse<SkyPicSnap[]>>()
+    const pendingBootstrap = deferred<NuiResponse<SkyPicBootstrap>>()
+    const committedSent: SkyPicSnap = {
+      ...snap,
+      bestStreak: 12,
+      createdAt: later,
+      direction: 'sent',
+      id: 'snap-after-pending-bootstrap',
+      sender: { ...self, snapScore: self.snapScore + 1 },
+      streakCount: 6,
+    }
+    const authoritativeConversation: SkyPicConversation = {
+      ...conversation,
+      bestStreak: 12,
+      lastItem: {
+        createdAt: committedSent.createdAt,
+        direction: 'sent',
+        id: committedSent.id,
+        openedAt: null,
+        type: committedSent.type,
+      },
+      streakCount: 6,
+    }
+    const postCommitBootstrap: SkyPicBootstrap = {
+      ...bootstrap,
+      conversations: [authoritativeConversation],
+      friends: [{ ...friend, streakCount: 6 }],
+      profile: { ...self, snapScore: self.snapScore + 1 },
+    }
+    mockNuiCall
+      .mockReturnValueOnce(pendingSend.promise)
+      .mockReturnValueOnce(pendingBootstrap.promise)
+      .mockResolvedValueOnce({ data: postCommitBootstrap, success: true })
+    const store = useSkyPicStore()
+
+    const sending = store.sendSnap({
+      allowReplay: false,
+      caption: '',
+      durationSeconds: 5,
+      mediaId: 42,
+      mediaType: 'photo',
+      overlayColor: '#ffffff',
+      recipientIds: [maya.id],
+      textOverlay: '',
+    })
+    const staleRefresh = store.bootstrap()
+    pendingSend.resolve({ data: [committedSent], success: true })
+    await Promise.resolve()
+    await Promise.resolve()
+    pendingBootstrap.resolve({ data: bootstrap, success: true })
+
+    await expect(staleRefresh).resolves.toBe(true)
+    await expect(sending).resolves.toMatchObject({ success: true })
+    expect(store.friends[0]).toMatchObject({
+      bestStreak: 12,
+      streakCount: 6,
+    })
+    expect(store.conversations[0]).toMatchObject({
+      bestStreak: 12,
+      lastItem: { id: committedSent.id },
+      streakCount: 6,
+    })
+    expect(store.profile?.snapScore).toBe(self.snapScore + 1)
+    expect(mockNuiCall).toHaveBeenNthCalledWith(3, 'skypic:bootstrap', {})
+  })
+
+  it('refreshes after a bootstrap that read before the pending send committed', async () => {
+    const pendingSend = deferred<NuiResponse<SkyPicSnap[]>>()
+    const pendingPreCommitBootstrap = deferred<NuiResponse<SkyPicBootstrap>>()
+    const staleHydration: SkyPicBootstrap = {
+      ...bootstrap,
+      conversations: [{ ...conversation }],
+      friends: [{ ...friend }],
+      profile: { ...self },
+    }
+    const committedSent: SkyPicSnap = {
+      ...snap,
+      bestStreak: 12,
+      createdAt: later,
+      direction: 'sent',
+      id: 'snap-committed-after-bootstrap-read',
+      sender: { ...self, snapScore: self.snapScore + 1 },
+      streakCount: 6,
+    }
+    const committedConversation: SkyPicConversation = {
+      ...conversation,
+      bestStreak: 12,
+      lastItem: {
+        createdAt: committedSent.createdAt,
+        direction: 'sent',
+        id: committedSent.id,
+        openedAt: null,
+        type: committedSent.type,
+      },
+      streakCount: 6,
+    }
+    const postCommitBootstrap: SkyPicBootstrap = {
+      ...bootstrap,
+      conversations: [committedConversation],
+      friends: [{ ...friend, streakCount: 6 }],
+      profile: { ...self, snapScore: self.snapScore + 1 },
+    }
+    mockNuiCall
+      .mockReturnValueOnce(pendingSend.promise)
+      .mockResolvedValueOnce({ data: staleHydration, success: true })
+      .mockReturnValueOnce(pendingPreCommitBootstrap.promise)
+      .mockResolvedValueOnce({ data: postCommitBootstrap, success: true })
+    const store = useSkyPicStore()
+
+    const sending = store.sendSnap({
+      allowReplay: false,
+      caption: '',
+      durationSeconds: 5,
+      mediaId: 42,
+      mediaType: 'photo',
+      overlayColor: '#ffffff',
+      recipientIds: [maya.id],
+      textOverlay: '',
+    })
+    await expect(store.bootstrap()).resolves.toBe(true)
+    expect(store.friends[0].streakCount).toBe(friend.streakCount)
+
+    const overlappingPreCommitRefresh = store.bootstrap()
+    pendingSend.resolve({ data: [committedSent], success: true })
+    pendingPreCommitBootstrap.resolve({
+      data: staleHydration,
+      success: true,
+    })
+    await expect(overlappingPreCommitRefresh).resolves.toBe(true)
+    await expect(sending).resolves.toMatchObject({ success: true })
+
+    expect(store.friends[0]).toMatchObject({
+      bestStreak: 12,
+      streakCount: 6,
+    })
+    expect(store.conversations[0]).toMatchObject({
+      bestStreak: 12,
+      lastItem: { id: committedSent.id },
+      streakCount: 6,
+    })
+    expect(mockNuiCall).toHaveBeenNthCalledWith(4, 'skypic:bootstrap', {})
+  })
+
+  it('does not refresh an obsolete session after a pending send resolves', async () => {
+    const pendingSend = deferred<NuiResponse<SkyPicSnap[]>>()
+    mockNuiCall.mockReturnValueOnce(pendingSend.promise)
+    const store = useSkyPicStore()
+
+    const sending = store.sendSnap({
+      allowReplay: false,
+      caption: '',
+      durationSeconds: 5,
+      mediaId: 42,
+      mediaType: 'photo',
+      overlayColor: '#ffffff',
+      recipientIds: [maya.id],
+      textOverlay: '',
+    })
+    store.resetSession()
+    pendingSend.resolve({ data: [snap], success: true })
+
+    await expect(sending).resolves.toEqual({
+      error: 'request_aborted',
+      success: false,
+    })
+    expect(mockNuiCall).toHaveBeenCalledTimes(1)
+  })
+
   it('deduplicates and caps a multi-photo snap batch without legacy media fields', async () => {
     mockNuiCall.mockResolvedValueOnce({ data: [], success: true })
     const store = useSkyPicStore()
diff --git a/frontend/src/stores/skypic.ts b/frontend/src/stores/skypic.ts
index 7348483..d1bf5f0 100644
--- a/frontend/src/stores/skypic.ts
+++ b/frontend/src/stores/skypic.ts
@@ -100,12 +100,14 @@ export const useSkyPicStore = defineStore('skypic', () => {
   const storyViewersLoadingMore = ref(false)
   const error = ref<string | null>(null)
   let bootstrapRequest = 0
+  let bootstrapGeneration = 0
   let searchRequest = 0
   let snapRequest = 0
   let storyRequest = 0
   let storyViewersRequest = 0
   let threadRequest = 0
   let sessionVersion = 0
+  let hydrationRevision = 0
   let storyViewersStoryId: string | null = null
   let bootstrapInFlight: {
     promise: Promise<boolean>
@@ -154,6 +156,29 @@ export const useSkyPicStore = defineStore('skypic', () => {
     conversations.value = sortByLastItem(conversations.value)
   }
 
+  function reconcileFriendshipStreak(snap: SkyPicSnap): void {
+    const streakCount = Number(snap.streakCount)
+    const bestStreak = Number(snap.bestStreak)
+    if (
+      !Number.isInteger(streakCount) ||
+      streakCount < 0 ||
+      !Number.isInteger(bestStreak) ||
+      bestStreak < streakCount
+    ) {
+      return
+    }
+    friends.value = friends.value.map((friend) =>
+      friend.friendshipId === snap.friendshipId
+        ? { ...friend, bestStreak, streakCount }
+        : friend,
+    )
+    conversations.value = conversations.value.map((conversation) =>
+      conversation.friendshipId === snap.friendshipId
+        ? { ...conversation, bestStreak, streakCount }
+        : conversation,
+    )
+  }
+
   function setError(response: NuiResponse<unknown>): void {
     if (response.error === 'request_aborted') return
     error.value = response.success ? null : (response.error ?? 'unknown_error')
@@ -172,6 +197,7 @@ export const useSkyPicStore = defineStore('skypic', () => {
 
   function resetSession(): void {
     sessionVersion += 1
+    hydrationRevision += 1
     bootstrapInFlight = null
     bootstrapPending.value = false
     bootstrapRequest += 1
@@ -217,6 +243,8 @@ export const useSkyPicStore = defineStore('skypic', () => {
       return
     }
 
+    hydrationRevision += 1
+
     blockedProfiles.value = arrayOrEmpty(data.blockedProfiles)
     friends.value = arrayOrEmpty(data.friends)
     requests.value = arrayOrEmpty(data.requests)
@@ -234,6 +262,7 @@ export const useSkyPicStore = defineStore('skypic', () => {
     if (bootstrapInFlight?.session === requestSession) {
       return bootstrapInFlight.promise
     }
+    bootstrapGeneration += 1
     const requestId = ++bootstrapRequest
     loading.value = true
     bootstrapPending.value = true
@@ -258,6 +287,15 @@ export const useSkyPicStore = defineStore('skypic', () => {
     return promise
   }
 
+  async function refreshAfterMutation(expectedSession: number): Promise<void> {
+    const pendingBootstrap = bootstrapInFlight
+    if (pendingBootstrap?.session === expectedSession) {
+      await pendingBootstrap.promise
+    }
+    if (expectedSession !== sessionVersion) return
+    await bootstrap()
+  }
+
   async function createProfile(
     input: SkyPicCreateProfileInput,
   ): Promise<NuiResponse<SkyPicProfile>> {
@@ -585,6 +623,9 @@ export const useSkyPicStore = defineStore('skypic', () => {
           mediaId: input.mediaId!,
           mediaType: input.mediaType!,
         }
+    const requestHydrationRevision = hydrationRevision
+    const requestBootstrapGeneration = bootstrapGeneration
+    const requestSession = sessionVersion
     const response = await sessionCall<SkyPicSnap[]>(
       'skypic:send-snap',
       payload,
@@ -592,25 +633,35 @@ export const useSkyPicStore = defineStore('skypic', () => {
     setError(response)
     if (response.success && response.data) {
       const active = activeFriendshipId.value
+      const canReconcileResponse =
+        requestSession === sessionVersion &&
+        requestHydrationRevision === hydrationRevision &&
+        requestBootstrapGeneration === bootstrapGeneration &&
+        bootstrapInFlight?.session !== requestSession
       threadSnaps.value = uniqueById([
         ...threadSnaps.value,
         ...response.data.filter((snap) => snap.friendshipId === active),
       ])
-      for (const snap of response.data) {
-        upsertConversationLastItem(snap.friendshipId, {
-          createdAt: snap.createdAt,
-          direction: snap.direction,
-          id: snap.id,
-          openedAt: snap.openedAt,
-          type: snap.type,
-        })
-      }
-      if (profile.value && response.data.length) {
-        const serverScore = response.data.find(
-          (snap) => snap.sender.id === profile.value?.id,
-        )?.sender.snapScore
-        profile.value.snapScore =
-          serverScore ?? profile.value.snapScore + response.data.length
+      if (canReconcileResponse) {
+        for (const snap of response.data) {
+          upsertConversationLastItem(snap.friendshipId, {
+            createdAt: snap.createdAt,
+            direction: snap.direction,
+            id: snap.id,
+            openedAt: snap.openedAt,
+            type: snap.type,
+          })
+          reconcileFriendshipStreak(snap)
+        }
+        if (profile.value && response.data.length) {
+          const serverScore = response.data.find(
+            (snap) => snap.sender.id === profile.value?.id,
+          )?.sender.snapScore
+          profile.value.snapScore =
+            serverScore ?? profile.value.snapScore + response.data.length
+        }
+      } else if (requestSession === sessionVersion) {
+        await refreshAfterMutation(requestSession)
       }
     }
     return response
diff --git a/frontend/src/types/skypic.ts b/frontend/src/types/skypic.ts
index 2e2d9a0..74aa2db 100644
--- a/frontend/src/types/skypic.ts
+++ b/frontend/src/types/skypic.ts
@@ -83,6 +83,8 @@ export type SkyPicConversation = {
 /** Direct snap lists intentionally contain no media URL or editor contents. */
 export type SkyPicSnap = {
   allowReplay: boolean
+  /** Present on successful sends so friendship streak UI can reconcile immediately. */
+  bestStreak?: number
   createdAt: string
   direction: SkyPicDirection
   durationSeconds: number
@@ -92,6 +94,8 @@ export type SkyPicSnap = {
   openedAt: string | null
   replayedAt: string | null
   sender: SkyPicProfileSummary
+  /** Present on successful sends so friendship streak UI can reconcile immediately. */
+  streakCount?: number
   type: SkyPicSnapType
 }
 
diff --git a/frontend/src/views/apps/SkyPicApp.contract.test.ts b/frontend/src/views/apps/SkyPicApp.contract.test.ts
index b255f03..4f43339 100644
--- a/frontend/src/views/apps/SkyPicApp.contract.test.ts
+++ b/frontend/src/views/apps/SkyPicApp.contract.test.ts
@@ -52,6 +52,54 @@ describe('SkyPic frontend contract', () => {
     expect(viewSource).not.toContain('var(--sp-cyan)')
   })
 
+  it('uses the reference-led Sky UI hierarchy without inventing camera filters or Spotlight', () => {
+    expect(viewSource).toContain('class="sp-camera-viewfinder"')
+    expect(viewSource).toContain('class="sp-camera-dock"')
+    expect(viewSource).toContain('class="sp-chat-list"')
+    expect(viewSource).toContain('class="sp-chat-row')
+    expect(viewSource).toContain('class="sp-story-rail"')
+    expect(viewSource).toContain('class="sp-story-grid"')
+    expect(viewSource).toContain('class="sp-discovery-grid"')
+    expect(viewSource).toContain('class="sp-bottom-nav"')
+    expect(viewSource).not.toContain('sp-camera-filter')
+    expect(viewSource).not.toContain('Spotlight')
+    expect(viewSource).not.toContain('advertisement')
+  })
+
+  it('builds story discovery only from safe metadata until view-story releases media', () => {
+    const storyFeedBlock = viewSource
+      .split('<section class="sp-story-feed">')[1]
+      ?.split('</section>')[0]
+
+    expect(viewSource).toContain('const friendStoryRail = computed(')
+    expect(storyFeedBlock).toBeTruthy()
+    expect(storyFeedBlock).toContain('v-for="story in store.stories"')
+    expect(storyFeedBlock).toContain('story.author.avatarUrl')
+    expect(storyFeedBlock).toContain('story.durationSeconds')
+    expect(storyFeedBlock).not.toContain('story.url')
+    expect(storyFeedBlock).not.toContain('store.viewedStory.url')
+  })
+
+  it('renders every visible streak as an accessible Flame icon', () => {
+    expect(viewSource.match(/<Flame/g)?.length).toBeGreaterThanOrEqual(4)
+    expect(viewSource).toContain("t('profile.streaks') +")
+    expect(viewSource).toContain('class="sp-navbar-streak"')
+    expect(viewSource).toContain('class="sp-profile-streak-stat"')
+    expect(viewSource).not.toContain('🔥')
+  })
+
+  it('keeps existing Snap and Story viewers full-bleed with ordered overlays', () => {
+    expect(viewSource).toContain(
+      'class="sp-media-viewer sp-media-viewer--snap"',
+    )
+    expect(viewSource).toContain(
+      'class="sp-media-viewer sp-media-viewer--story"',
+    )
+    expect(viewSource).toContain('object-fit: cover')
+    expect(viewSource).toContain('.sp-media-viewer::before')
+    expect(viewSource).toContain('.sp-media-viewer::after')
+  })
+
   it('uses the shared Camera and Gallery media handoff with a bounded draft', () => {
     expect(viewSource).toContain('mediaPicker.begin(')
     expect(viewSource).toContain("'skypic-draft'")
@@ -161,7 +209,7 @@ describe('SkyPic frontend contract', () => {
 
   it('keeps profile editing parse-safe and composer inputs canonical', () => {
     expect(viewSource).toContain('function toggleProfileEditor(): void')
-    expect(viewSource.match(/@click="toggleProfileEditor"/g)).toHaveLength(2)
+    expect(viewSource.match(/@click="toggleProfileEditor"/g)).toHaveLength(3)
     expect(viewSource).toContain('const MAX_CAPTION_LENGTH = 160')
     expect(viewSource).toContain(':maxlength="MAX_CAPTION_LENGTH"')
     expect(viewSource).toContain('.slice(0, MAX_CAPTION_LENGTH)')
diff --git a/frontend/src/views/apps/SkyPicApp.vue b/frontend/src/views/apps/SkyPicApp.vue
index dd7fb32..eb81241 100644
--- a/frontend/src/views/apps/SkyPicApp.vue
+++ b/frontend/src/views/apps/SkyPicApp.vue
@@ -7,6 +7,7 @@ import {
   ChevronRight,
   CirclePlay,
   Eye,
+  Flame,
   Image as ImageIcon,
   Images,
   LogOut,
@@ -20,7 +21,6 @@ import {
   Shield,
   Timer,
   Trash2,
-  UserRound,
   UsersRound,
   Video,
   X,
@@ -211,6 +211,17 @@ const ownStories = computed(() =>
 const communityStories = computed(() =>
   store.stories.filter((story) => !story.isOwner),
 )
+const friendStoryRail = computed(() => {
+  const authors = new Set<string>()
+  return communityStories.value.filter((story) => {
+    if (authors.has(story.author.id)) return false
+    authors.add(story.author.id)
+    return true
+  })
+})
+const bestStreak = computed(() =>
+  store.friends.reduce((best, friend) => Math.max(best, friend.bestStreak), 0),
+)
 const viewedStorySummary = computed(
   () =>
     store.stories.find((story) => story.id === store.viewedStory?.id) ?? null,
@@ -1779,14 +1790,23 @@ onBeforeUnmount(() => {
         <SkyNavbar
           :back-label="phone.t('Common.back')"
           show-back
-          :subtitle="
-            store.activeConversation.streakCount
-              ? `🔥 ${store.activeConversation.streakCount}`
-              : ''
-          "
           :title="store.activeConversation.profile.displayName"
           @back="closeThread"
         >
+          <template #subtitle>
+            <span
+              v-if="store.activeConversation.streakCount"
+              class="sp-navbar-streak"
+              :aria-label="
+                t('profile.streaks') +
+                ': ' +
+                store.activeConversation.streakCount
+              "
+            >
+              <Flame :size="13" aria-hidden="true" />
+              {{ store.activeConversation.streakCount }}
+            </span>
+          </template>
           <template #right>
             <button
               type="button"
@@ -2060,25 +2080,47 @@ onBeforeUnmount(() => {
           aria-labelledby="sp-camera-title"
         >
           <header class="sp-camera-header">
-            <span>
+            <button
+              type="button"
+              class="sp-camera-profile"
+              :aria-label="t('profile.title')"
+              @click="setTab('friends')"
+            >
+              <span
+                class="sp-avatar sp-avatar--small"
+                :style="avatarStyle(store.profile)"
+              >
+                <img
+                  v-if="store.profile.avatarUrl"
+                  :src="store.profile.avatarUrl"
+                  alt=""
+                />
+                <template v-else>{{ initials(store.profile) }}</template>
+              </span>
+            </button>
+            <span class="sp-camera-header__title">
               <small>{{ t('camera.eyebrow') }}</small>
               <h1 id="sp-camera-title">{{ t('camera.title') }}</h1>
             </span>
             <button
               type="button"
               class="sp-icon-button sp-icon-button--glass"
-              :aria-label="t('profile.title')"
-              @click="setTab('friends')"
+              :aria-label="t('chats.title')"
+              @click="setTab('chats')"
             >
-              <UserRound :size="20" aria-hidden="true" />
+              <MessageCircle :size="20" aria-hidden="true" />
             </button>
           </header>
 
-          <div class="sp-camera-preview">
-            <div class="sp-camera-preview__glow" aria-hidden="true" />
-            <Camera :size="54" aria-hidden="true" />
-            <p>{{ t('camera.body') }}</p>
-            <small>
+          <div class="sp-camera-viewfinder">
+            <span class="sp-camera-viewfinder__status">
+              <span aria-hidden="true" />
+              {{ t('camera.eyebrow') }}
+            </span>
+            <span class="sp-camera-reticle" aria-hidden="true">
+              <span />
+            </span>
+            <p class="sp-camera-viewfinder__hint">
               {{
                 t(
                   capturePurpose === 'story'
@@ -2086,96 +2128,123 @@ onBeforeUnmount(() => {
                     : 'camera.snapHint',
                 )
               }}
-            </small>
-          </div>
+            </p>
 
-          <SkySegmented
-            strong
-            rounded
-            :active-index="capturePurpose === 'snap' ? 0 : 1"
-            :aria-label="t('camera.title')"
-            :item-count="2"
-          >
-            <SkySegmentedButton
-              :active="capturePurpose === 'snap'"
-              @click="capturePurpose = 'snap'"
-            >
-              {{ t('camera.snap') }}
-            </SkySegmentedButton>
-            <SkySegmentedButton
-              :active="capturePurpose === 'story'"
-              @click="capturePurpose = 'story'"
-            >
-              {{ t('camera.story') }}
-            </SkySegmentedButton>
-          </SkySegmented>
+            <div class="sp-camera-dock">
+              <SkySegmented
+                compact
+                strong
+                :active-index="capturePurpose === 'snap' ? 0 : 1"
+                :aria-label="t('camera.title')"
+                :item-count="2"
+              >
+                <SkySegmentedButton
+                  :active="capturePurpose === 'snap'"
+                  @click="capturePurpose = 'snap'"
+                >
+                  {{ t('camera.snap') }}
+                </SkySegmentedButton>
+                <SkySegmentedButton
+                  :active="capturePurpose === 'story'"
+                  @click="capturePurpose = 'story'"
+                >
+                  {{ t('camera.story') }}
+                </SkySegmentedButton>
+              </SkySegmented>
 
-          <SkySegmented
-            compact
-            strong
-            :active-index="captureMediaType === 'photo' ? 0 : 1"
-            :aria-label="t('camera.title')"
-            :item-count="2"
-          >
-            <SkySegmentedButton
-              :active="captureMediaType === 'photo'"
-              @click="captureMediaType = 'photo'"
-            >
-              <ImageIcon :size="15" aria-hidden="true" />
-              {{ t('camera.photo') }}
-            </SkySegmentedButton>
-            <SkySegmentedButton
-              :active="captureMediaType === 'video'"
-              @click="captureMediaType = 'video'"
-            >
-              <Video :size="15" aria-hidden="true" />
-              {{ t('camera.video') }}
-            </SkySegmentedButton>
-          </SkySegmented>
+              <div class="sp-camera-actions">
+                <button
+                  type="button"
+                  class="sp-camera-secondary"
+                  :aria-label="t('camera.gallery')"
+                  @click="
+                    beginCapture('photos', captureMediaType, capturePurpose)
+                  "
+                >
+                  <Images :size="22" aria-hidden="true" />
+                </button>
+                <button
+                  type="button"
+                  class="sp-shutter"
+                  :aria-label="
+                    t(
+                      captureMediaType === 'photo'
+                        ? 'camera.capturePhoto'
+                        : 'camera.captureVideo',
+                    )
+                  "
+                  @click="
+                    beginCapture('camera', captureMediaType, capturePurpose)
+                  "
+                >
+                  <span>
+                    <Camera
+                      v-if="captureMediaType === 'photo'"
+                      :size="28"
+                      aria-hidden="true"
+                    />
+                    <CirclePlay v-else :size="29" aria-hidden="true" />
+                  </span>
+                </button>
+                <button
+                  type="button"
+                  class="sp-camera-secondary"
+                  :aria-label="
+                    t(
+                      captureMediaType === 'photo'
+                        ? 'camera.video'
+                        : 'camera.photo',
+                    )
+                  "
+                  @click="
+                    captureMediaType =
+                      captureMediaType === 'photo' ? 'video' : 'photo'
+                  "
+                >
+                  <Video
+                    v-if="captureMediaType === 'photo'"
+                    :size="22"
+                    aria-hidden="true"
+                  />
+                  <ImageIcon v-else :size="22" aria-hidden="true" />
+                </button>
+              </div>
 
-          <div class="sp-camera-actions">
-            <button
-              type="button"
-              class="sp-camera-secondary"
-              :aria-label="t('camera.gallery')"
-              @click="beginCapture('photos', captureMediaType, capturePurpose)"
-            >
-              <Images :size="22" aria-hidden="true" />
-            </button>
-            <button
-              type="button"
-              class="sp-shutter"
-              :aria-label="
-                t(
-                  captureMediaType === 'photo'
-                    ? 'camera.capturePhoto'
-                    : 'camera.captureVideo',
-                )
-              "
-              @click="beginCapture('camera', captureMediaType, capturePurpose)"
-            >
-              <span>
-                <Camera
-                  v-if="captureMediaType === 'photo'"
-                  :size="28"
-                  aria-hidden="true"
-                />
-                <CirclePlay v-else :size="29" aria-hidden="true" />
+              <span class="sp-camera-format">
+                {{
+                  t(
+                    captureMediaType === 'photo'
+                      ? 'camera.photo'
+                      : 'camera.video',
+                  )
+                }}
               </span>
-            </button>
-            <button
-              type="button"
-              class="sp-camera-secondary"
-              :aria-label="t('friends.title')"
-              @click="setTab('friends')"
-            >
-              <UsersRound :size="22" aria-hidden="true" />
-            </button>
+            </div>
           </div>
         </section>
 
         <template v-else-if="activeTab === 'chats'">
-          <SkyNavbar :title="t('chats.title')">
+          <SkyNavbar class="sp-content-navbar" :title="t('chats.title')">
+            <template #left>
+              <button
+                type="button"
+                class="sp-navbar-profile"
+                :aria-label="t('profile.title')"
+                @click="setTab('friends')"
+              >
+                <span
+                  class="sp-avatar sp-avatar--small"
+                  :style="avatarStyle(store.profile)"
+                >
+                  <img
+                    v-if="store.profile.avatarUrl"
+                    :src="store.profile.avatarUrl"
+                    alt=""
+                  />
+                  <template v-else>{{ initials(store.profile) }}</template>
+                </span>
+              </button>
+            </template>
             <template #right>
               <button
                 type="button"
@@ -2187,26 +2256,27 @@ onBeforeUnmount(() => {
               </button>
             </template>
           </SkyNavbar>
-          <SkyScrollArea with-tabbar class="sp-screen">
-            <section class="sp-section">
-              <header>
-                <span>
-                  <b>{{ t('chats.incoming') }}</b>
-                  <small v-if="incomingSnaps.length">
-                    {{ incomingSnaps.length }}
-                  </small>
-                </span>
+          <SkyScrollArea with-tabbar class="sp-screen sp-chat-screen">
+            <section v-if="incomingSnaps.length" class="sp-chat-group">
+              <header class="sp-screen-heading">
+                <b>{{ t('chats.incoming') }}</b>
+                <SkyBadge small tone="danger">
+                  {{ incomingSnaps.length }}
+                </SkyBadge>
               </header>
-              <div v-if="incomingSnaps.length" class="sp-snap-strip">
+              <div class="sp-chat-list">
                 <button
                   v-for="snap in incomingSnaps"
                   :key="snap.id"
                   type="button"
-                  class="sp-snap-card"
+                  class="sp-chat-row sp-chat-row--snap"
                   :disabled="!snapCanOpen(snap)"
                   @click="openThreadSnap(snap)"
                 >
-                  <span class="sp-avatar" :style="avatarStyle(snap.sender)">
+                  <span
+                    class="sp-avatar sp-avatar--chat sp-avatar--unread"
+                    :style="avatarStyle(snap.sender)"
+                  >
                     <img
                       v-if="snap.sender.avatarUrl"
                       :src="snap.sender.avatarUrl"
@@ -2214,77 +2284,133 @@ onBeforeUnmount(() => {
                     />
                     <template v-else>{{ initials(snap.sender) }}</template>
                   </span>
-                  <span>
+                  <span class="sp-chat-row__copy">
                     <b>{{ snap.sender.displayName }}</b>
-                    <small>{{ snapLabel(snap) }}</small>
+                    <small class="sp-chat-row__meta">
+                      <span
+                        class="sp-chat-status-dot"
+                        :class="{
+                          'sp-chat-status-dot--video':
+                            snap.type === 'snap_video',
+                        }"
+                        aria-hidden="true"
+                      />
+                      {{ snapLabel(snap) }} ·
+                      {{ relativeTime(snap.createdAt) }}
+                    </small>
+                  </span>
+                  <span class="sp-chat-row__action">
+                    <RotateCcw
+                      v-if="
+                        snap.openedAt && snap.allowReplay && !snap.replayedAt
+                      "
+                      :size="18"
+                      aria-hidden="true"
+                    />
+                    <Video
+                      v-else-if="snap.type === 'snap_video'"
+                      :size="18"
+                      aria-hidden="true"
+                    />
+                    <ImageIcon v-else :size="18" aria-hidden="true" />
                   </span>
-                  <RotateCcw
-                    v-if="snap.openedAt && snap.allowReplay && !snap.replayedAt"
-                    :size="17"
-                    aria-hidden="true"
-                  />
-                  <Video
-                    v-else-if="snap.type === 'snap_video'"
-                    :size="17"
-                    aria-hidden="true"
-                  />
-                  <ImageIcon v-else :size="17" aria-hidden="true" />
                 </button>
               </div>
-              <SkyEmptyState v-else compact :title="t('chats.noSnaps')" />
             </section>
 
-            <section class="sp-section">
-              <header>
+            <section class="sp-chat-group">
+              <header class="sp-screen-heading">
                 <b>{{ t('chats.conversations') }}</b>
+                <small>{{ store.conversations.length }}</small>
               </header>
-              <button
-                v-for="conversation in store.conversations"
-                :key="conversation.friendshipId"
-                type="button"
-                class="sp-person-row sp-conversation-row"
-                @click="openThread(conversation.friendshipId)"
-              >
-                <span
-                  class="sp-avatar"
-                  :style="avatarStyle(conversation.profile)"
+              <div v-if="store.conversations.length" class="sp-chat-list">
+                <button
+                  v-for="conversation in store.conversations"
+                  :key="conversation.friendshipId"
+                  type="button"
+                  class="sp-chat-row"
+                  :class="{
+                    'sp-chat-row--unread': conversation.unreadCount,
+                  }"
+                  @click="openThread(conversation.friendshipId)"
                 >
-                  <img
-                    v-if="conversation.profile.avatarUrl"
-                    :src="conversation.profile.avatarUrl"
-                    alt=""
-                  />
-                  <template v-else>
-                    {{ initials(conversation.profile) }}
-                  </template>
-                </span>
-                <span class="sp-person-row__copy">
-                  <b>
-                    {{ conversation.profile.displayName }}
-                    <span v-if="conversation.streakCount" class="sp-streak">
-                      🔥 {{ conversation.streakCount }}
-                    </span>
-                  </b>
-                  <small>{{ lastItemLabel(conversation) }}</small>
-                </span>
-                <span class="sp-row-after">
-                  <time v-if="conversation.lastItem">
-                    {{ relativeTime(conversation.lastItem.createdAt) }}
-                  </time>
-                  <SkyBadge v-if="conversation.unreadCount" small tone="danger">
-                    {{ conversation.unreadCount }}
-                  </SkyBadge>
-                </span>
-              </button>
+                  <span
+                    class="sp-avatar sp-avatar--chat"
+                    :class="{
+                      'sp-avatar--unread': conversation.unreadCount,
+                    }"
+                    :style="avatarStyle(conversation.profile)"
+                  >
+                    <img
+                      v-if="conversation.profile.avatarUrl"
+                      :src="conversation.profile.avatarUrl"
+                      alt=""
+                    />
+                    <template v-else>
+                      {{ initials(conversation.profile) }}
+                    </template>
+                  </span>
+                  <span class="sp-chat-row__copy">
+                    <b>{{ conversation.profile.displayName }}</b>
+                    <small class="sp-chat-row__meta">
+                      <span
+                        v-if="conversation.streakCount"
+                        class="sp-streak"
+                        :aria-label="
+                          t('profile.streaks') + ': ' + conversation.streakCount
+                        "
+                      >
+                        <Flame :size="13" aria-hidden="true" />
+                        {{ conversation.streakCount }}
+                      </span>
+                      <span>{{ lastItemLabel(conversation) }}</span>
+                      <template v-if="conversation.lastItem">
+                        · {{ relativeTime(conversation.lastItem.createdAt) }}
+                      </template>
+                    </small>
+                  </span>
+                  <span class="sp-chat-row__action">
+                    <SkyBadge
+                      v-if="conversation.unreadCount"
+                      small
+                      tone="danger"
+                    >
+                      {{ conversation.unreadCount }}
+                    </SkyBadge>
+                    <Camera v-else :size="20" aria-hidden="true" />
+                  </span>
+                </button>
+              </div>
               <SkyEmptyState
                 v-if="!store.conversations.length"
+                compact
                 :title="t('chats.noConversations')"
               />
             </section>
           </SkyScrollArea>
         </template>
         <template v-else-if="activeTab === 'stories'">
-          <SkyNavbar :title="t('stories.title')">
+          <SkyNavbar class="sp-content-navbar" :title="t('stories.title')">
+            <template #left>
+              <button
+                type="button"
+                class="sp-navbar-profile"
+                :aria-label="t('profile.title')"
+                @click="setTab('friends')"
+              >
+                <span
+                  class="sp-avatar sp-avatar--small"
+                  :style="avatarStyle(store.profile)"
+                >
+                  <img
+                    v-if="store.profile.avatarUrl"
+                    :src="store.profile.avatarUrl"
+                    alt=""
+                  />
+                  <template v-else>{{ initials(store.profile) }}</template>
+                </span>
+              </button>
+            </template>
             <template #right>
               <button
                 type="button"
@@ -2296,41 +2422,67 @@ onBeforeUnmount(() => {
               </button>
             </template>
           </SkyNavbar>
-          <SkyScrollArea with-tabbar class="sp-screen">
-            <section class="sp-story-hero">
-              <span class="sp-story-hero__icon">
-                <CirclePlay :size="24" aria-hidden="true" />
-              </span>
-              <span>
-                <b>{{ t('stories.add') }}</b>
-                <small>{{ t('camera.storyHint') }}</small>
-              </span>
-              <SkyButton
-                rounded
-                small
-                @click="beginCapture('camera', 'photo', 'story', [])"
-              >
-                <Camera :size="16" aria-hidden="true" />
-                {{ t('stories.add') }}
-              </SkyButton>
-            </section>
-
-            <section v-if="ownStories.length" class="sp-section">
-              <header>
-                <b>{{ t('stories.yours') }}</b>
+          <SkyScrollArea with-tabbar class="sp-screen sp-stories-screen">
+            <section class="sp-story-rail-section">
+              <header class="sp-screen-heading">
+                <b>{{ t('stories.friends') }}</b>
+                <small>{{ friendStoryRail.length }}</small>
               </header>
-              <article
-                v-for="story in ownStories"
-                :key="story.id"
-                class="sp-story-row sp-story-row--own"
-              >
+              <div class="sp-story-rail">
                 <button
+                  v-if="ownStories.length"
                   type="button"
+                  class="sp-story-rail__item"
+                  :disabled="store.storyViewing"
+                  @click="openStory(ownStories[0].id)"
+                >
+                  <span
+                    class="sp-avatar sp-avatar--story sp-story-rail__avatar"
+                    :style="avatarStyle(store.profile)"
+                  >
+                    <img
+                      v-if="store.profile.avatarUrl"
+                      :src="store.profile.avatarUrl"
+                      alt=""
+                    />
+                    <template v-else>{{ initials(store.profile) }}</template>
+                  </span>
+                  <small>{{ t('stories.yours') }}</small>
+                </button>
+                <button
+                  v-else
+                  type="button"
+                  class="sp-story-rail__item"
+                  @click="beginCapture('camera', 'photo', 'story', [])"
+                >
+                  <span
+                    class="sp-avatar sp-story-rail__avatar sp-story-rail__avatar--add"
+                    :style="avatarStyle(store.profile)"
+                  >
+                    <img
+                      v-if="store.profile.avatarUrl"
+                      :src="store.profile.avatarUrl"
+                      alt=""
+                    />
+                    <template v-else>{{ initials(store.profile) }}</template>
+                    <span class="sp-story-rail__plus" aria-hidden="true">
+                      <Plus :size="14" />
+                    </span>
+                  </span>
+                  <small>{{ t('stories.add') }}</small>
+                </button>
+
+                <button
+                  v-for="story in friendStoryRail"
+                  :key="story.id"
+                  type="button"
+                  class="sp-story-rail__item"
                   :disabled="store.storyViewing"
                   @click="openStory(story.id)"
                 >
                   <span
-                    class="sp-avatar sp-avatar--story"
+                    class="sp-avatar sp-avatar--story sp-story-rail__avatar"
+                    :class="{ 'sp-avatar--seen': story.seen }"
                     :style="avatarStyle(story.author)"
                   >
                     <img
@@ -2340,72 +2492,92 @@ onBeforeUnmount(() => {
                     />
                     <template v-else>{{ initials(story.author) }}</template>
                   </span>
-                  <span>
-                    <b>{{ t('stories.yours') }}</b>
-                    <small>
-                      {{
-                        t('stories.views', {
-                          count: String(story.viewCount),
-                        })
-                      }}
-                      · {{ relativeTime(story.createdAt) }}
-                    </small>
-                  </span>
+                  <small>{{ story.author.displayName }}</small>
                 </button>
-                <div class="sp-story-row__actions">
-                  <button
-                    type="button"
-                    :aria-label="t('stories.viewers')"
-                    @click="showStoryViewers(story)"
-                  >
-                    <Eye :size="17" aria-hidden="true" />
-                  </button>
-                  <button
-                    type="button"
-                    :aria-label="t('stories.delete')"
-                    @click="deleteStory(story.id)"
-                  >
-                    <Trash2 :size="17" aria-hidden="true" />
-                  </button>
-                </div>
-              </article>
+              </div>
             </section>
 
-            <section class="sp-section">
-              <header>
-                <b>{{ t('stories.friends') }}</b>
+            <section class="sp-story-feed">
+              <header class="sp-screen-heading">
+                <b>{{ t('stories.title') }}</b>
+                <small>{{ store.stories.length }}</small>
               </header>
-              <button
-                v-for="story in communityStories"
-                :key="story.id"
-                type="button"
-                class="sp-story-row"
-                :disabled="store.storyViewing"
-                @click="openStory(story.id)"
-              >
-                <span
-                  class="sp-avatar sp-avatar--story"
-                  :class="{ 'sp-avatar--seen': story.seen }"
-                  :style="avatarStyle(story.author)"
+              <div v-if="store.stories.length" class="sp-story-grid">
+                <article
+                  v-for="story in store.stories"
+                  :key="story.id"
+                  class="sp-story-card"
+                  :class="{
+                    'sp-story-card--owner': story.isOwner,
+                    'sp-story-card--seen': story.seen,
+                  }"
                 >
-                  <img
-                    v-if="story.author.avatarUrl"
-                    :src="story.author.avatarUrl"
-                    alt=""
-                  />
-                  <template v-else>{{ initials(story.author) }}</template>
-                </span>
-                <span>
-                  <b>{{ story.author.displayName }}</b>
-                  <small>
-                    {{ t(story.seen ? 'stories.seen' : 'stories.unseen') }}
-                    · {{ relativeTime(story.createdAt) }}
-                  </small>
-                </span>
-                <ChevronLeft class="sp-chevron" :size="18" aria-hidden="true" />
-              </button>
+                  <button
+                    type="button"
+                    class="sp-story-card__open"
+                    :disabled="store.storyViewing"
+                    @click="openStory(story.id)"
+                  >
+                    <span
+                      class="sp-story-card__media"
+                      :style="avatarStyle(story.author)"
+                    >
+                      <img
+                        v-if="story.author.avatarUrl"
+                        :src="story.author.avatarUrl"
+                        alt=""
+                      />
+                      <span v-else>{{ initials(story.author) }}</span>
+                    </span>
+                    <span class="sp-story-card__duration">
+                      <CirclePlay :size="13" aria-hidden="true" />
+                      {{ story.durationSeconds }}s
+                    </span>
+                    <span class="sp-story-card__copy">
+                      <b>
+                        {{
+                          story.isOwner
+                            ? t('stories.yours')
+                            : story.author.displayName
+                        }}
+                      </b>
+                      <small>
+                        <template v-if="story.isOwner">
+                          {{
+                            t('stories.views', {
+                              count: String(story.viewCount),
+                            })
+                          }}
+                        </template>
+                        <template v-else>
+                          {{
+                            t(story.seen ? 'stories.seen' : 'stories.unseen')
+                          }}
+                        </template>
+                        · {{ relativeTime(story.createdAt) }}
+                      </small>
+                    </span>
+                  </button>
+                  <div v-if="story.isOwner" class="sp-story-card__actions">
+                    <button
+                      type="button"
+                      :aria-label="t('stories.viewers')"
+                      @click="showStoryViewers(story)"
+                    >
+                      <Eye :size="15" aria-hidden="true" />
+                    </button>
+                    <button
+                      type="button"
+                      :aria-label="t('stories.delete')"
+                      @click="deleteStory(story.id)"
+                    >
+                      <Trash2 :size="15" aria-hidden="true" />
+                    </button>
+                  </div>
+                </article>
+              </div>
               <SkyEmptyState
-                v-if="!communityStories.length"
+                v-else
                 :body="t('stories.emptyBody')"
                 :title="t('stories.emptyTitle')"
               >
@@ -2430,7 +2602,27 @@ onBeforeUnmount(() => {
           </SkyScrollArea>
         </template>
         <template v-else>
-          <SkyNavbar :title="t('friends.title')">
+          <SkyNavbar class="sp-content-navbar" :title="t('friends.title')">
+            <template #left>
+              <button
+                type="button"
+                class="sp-navbar-profile"
+                :aria-label="t('profile.title')"
+                @click="toggleProfileEditor"
+              >
+                <span
+                  class="sp-avatar sp-avatar--small"
+                  :style="avatarStyle(store.profile)"
+                >
+                  <img
+                    v-if="store.profile.avatarUrl"
+                    :src="store.profile.avatarUrl"
+                    alt=""
+                  />
+                  <template v-else>{{ initials(store.profile) }}</template>
+                </span>
+              </button>
+            </template>
             <template #right>
               <button
                 type="button"
@@ -2442,7 +2634,7 @@ onBeforeUnmount(() => {
               </button>
             </template>
           </SkyNavbar>
-          <SkyScrollArea with-tabbar class="sp-screen">
+          <SkyScrollArea with-tabbar class="sp-screen sp-friends-screen">
             <section class="sp-profile-card">
               <span
                 class="sp-avatar sp-avatar--profile"
@@ -2476,13 +2668,12 @@ onBeforeUnmount(() => {
                   <small>{{ t('profile.friends') }}</small>
                 </span>
                 <span>
-                  <b>
-                    {{
-                      store.friends.reduce(
-                        (best, friend) => Math.max(best, friend.bestStreak),
-                        0,
-                      )
-                    }}
+                  <b
+                    class="sp-profile-streak-stat"
+                    :aria-label="t('profile.streaks') + ': ' + bestStreak"
+                  >
+                    <Flame :size="15" aria-hidden="true" />
+                    {{ bestStreak }}
                   </b>
                   <small>{{ t('profile.streaks') }}</small>
                 </span>
@@ -2585,7 +2776,10 @@ onBeforeUnmount(() => {
               </div>
             </form>
 
-            <section v-if="store.incomingRequests.length" class="sp-section">
+            <section
+              v-if="store.incomingRequests.length"
+              class="sp-section sp-friends-block"
+            >
               <header>
                 <b>{{ t('friends.requests') }}</b>
                 <SkyBadge tone="danger">
@@ -2633,7 +2827,10 @@ onBeforeUnmount(() => {
               </article>
             </section>
 
-            <section v-if="store.outgoingRequests.length" class="sp-section">
+            <section
+              v-if="store.outgoingRequests.length"
+              class="sp-section sp-friends-block"
+            >
               <header>
                 <b>{{ t('friends.sentRequests') }}</b>
                 <small>{{ store.outgoingRequests.length }}</small>
@@ -2667,7 +2864,10 @@ onBeforeUnmount(() => {
               </article>
             </section>
 
-            <section v-if="store.blockedProfiles.length" class="sp-section">
+            <section
+              v-if="store.blockedProfiles.length"
+              class="sp-section sp-friends-block"
+            >
               <header>
                 <b>{{ t('friends.blockedProfiles') }}</b>
                 <small>{{ store.blockedProfiles.length }}</small>
@@ -2691,7 +2891,7 @@ onBeforeUnmount(() => {
               </article>
             </section>
 
-            <section class="sp-section sp-discovery">
+            <section class="sp-section sp-discovery sp-friends-block">
               <header>
                 <b>
                   {{
@@ -2717,21 +2917,22 @@ onBeforeUnmount(() => {
               >
                 <SkySpinner />
               </div>
-              <template
-                v-for="person in searchQuery
-                  ? store.searchResults
-                  : store.suggestions"
-                v-else
-                :key="person.id"
-              >
+              <div v-else class="sp-discovery-grid">
                 <article
-                  class="sp-person-row"
+                  v-for="person in searchQuery
+                    ? store.searchResults
+                    : store.suggestions"
+                  :key="person.id"
+                  class="sp-discovery-card"
                   :class="{
                     'sp-person-row--highlighted':
                       highlightedProfileId === person.id,
                   }"
                 >
-                  <span class="sp-avatar" :style="avatarStyle(person)">
+                  <span
+                    class="sp-avatar sp-avatar--discovery"
+                    :style="avatarStyle(person)"
+                  >
                     <img
                       v-if="person.avatarUrl"
                       :src="person.avatarUrl"
@@ -2739,10 +2940,10 @@ onBeforeUnmount(() => {
                     />
                     <template v-else>{{ initials(person) }}</template>
                   </span>
-                  <span class="sp-person-row__copy">
+                  <span class="sp-discovery-card__copy">
                     <b>{{ person.displayName }}</b>
+                    <small> @{{ person.handle }} </small>
                     <small>
-                      @{{ person.handle }} ·
                       {{
                         t('friends.score', {
                           count: String(person.snapScore),
@@ -2751,6 +2952,7 @@ onBeforeUnmount(() => {
                     </small>
                   </span>
                   <SkyButton
+                    block
                     rounded
                     small
                     :disabled="person.friendshipStatus === 'outgoing'"
@@ -2759,10 +2961,10 @@ onBeforeUnmount(() => {
                     {{ profileRelationLabel(person) }}
                   </SkyButton>
                 </article>
-              </template>
+              </div>
             </section>
 
-            <section class="sp-section">
+            <section class="sp-section sp-friends-list">
               <header>
                 <b>{{ t('friends.all') }}</b>
                 <small>{{ store.friends.length }}</small>
@@ -2789,9 +2991,16 @@ onBeforeUnmount(() => {
                     <b>{{ friend.profile.displayName }}</b>
                     <small>
                       @{{ friend.profile.handle }}
-                      <template v-if="friend.streakCount">
-                        · 🔥 {{ friend.streakCount }}
-                      </template>
+                      <span
+                        v-if="friend.streakCount"
+                        class="sp-streak"
+                        :aria-label="
+                          t('profile.streaks') + ': ' + friend.streakCount
+                        "
+                      >
+                        <Flame :size="13" aria-hidden="true" />
+                        {{ friend.streakCount }}
+                      </span>
                     </small>
                   </span>
                 </div>
@@ -2835,7 +3044,11 @@ onBeforeUnmount(() => {
             </section>
           </SkyScrollArea>
         </template>
-        <SkyTabBar :aria-label="t('navigation')">
+        <SkyTabBar
+          class="sp-bottom-nav"
+          :class="{ 'sp-bottom-nav--camera': activeTab === 'camera' }"
+          :aria-label="t('navigation')"
+        >
           <SkyTabButton
             class="sp-tab sp-tab--camera"
             :active="activeTab === 'camera'"
@@ -2906,7 +3119,7 @@ onBeforeUnmount(() => {
 
     <div
       v-if="store.openedSnap"
-      class="sp-media-viewer"
+      class="sp-media-viewer sp-media-viewer--snap"
       role="dialog"
       aria-modal="true"
       :aria-label="t('viewer.snap')"
@@ -2968,7 +3181,7 @@ onBeforeUnmount(() => {
 
     <div
       v-if="store.viewedStory"
-      class="sp-media-viewer"
+      class="sp-media-viewer sp-media-viewer--story"
       role="dialog"
       aria-modal="true"
       :aria-label="t('viewer.story')"
@@ -3370,8 +3583,7 @@ onBeforeUnmount(() => {
 
 .sp-icon-button,
 .sp-send-button,
-.sp-request-actions button,
-.sp-story-row__actions button {
+.sp-request-actions button {
   display: inline-grid;
   width: var(--sky-touch-target);
   min-width: var(--sky-touch-target);
@@ -3533,8 +3745,7 @@ input:focus-visible {
   margin: var(--sky-space-3) 0 var(--sky-space-5);
 }
 
-.sp-change-media :deep(svg),
-.sp-story-hero :deep(svg) {
+.sp-change-media :deep(svg) {
   margin-right: 5px;
 }
 
@@ -3646,59 +3857,6 @@ input:focus-visible {
   line-height: 1;
 }
 
-.sp-camera-preview {
-  position: relative;
-  display: grid;
-  overflow: hidden;
-  min-height: 0;
-  flex: 1;
-  place-content: center;
-  justify-items: center;
-  padding: var(--sky-space-5);
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  border-radius: 28px;
-  background: rgba(255, 255, 255, 0.07);
-  text-align: center;
-  backdrop-filter: blur(18px);
-}
-
-.sp-camera-preview__glow {
-  position: absolute;
-  width: 180px;
-  height: 180px;
-  border-radius: 50%;
-  background: rgba(10, 132, 255, 0.38);
-  filter: blur(40px);
-}
-
-.sp-camera-preview > svg,
-.sp-camera-preview > p,
-.sp-camera-preview > small {
-  position: relative;
-}
-
-.sp-camera-preview > svg {
-  margin-bottom: var(--sky-space-4);
-  color: #55b4ff;
-  filter: drop-shadow(0 7px 18px rgba(10, 132, 255, 0.42));
-}
-
-.sp-camera-preview p {
-  max-width: 250px;
-  margin: 0;
-  font-size: 15px;
-  font-weight: 700;
-  line-height: 1.4;
-}
-
-.sp-camera-preview small {
-  max-width: 250px;
-  margin-top: var(--sky-space-2);
-  color: rgba(255, 255, 255, 0.64);
-  font-size: 11px;
-  line-height: 1.4;
-}
-
 .sp-camera-screen :deep(.sky-segmented) {
   flex: 0 0 auto;
 }
@@ -3748,66 +3906,385 @@ input:focus-visible {
   );
 }
 
-.sp-snap-strip {
-  display: grid;
-  gap: var(--sky-space-2);
-  padding: var(--sky-space-3);
+.sp-content-navbar :deep(.sky-navbar__inner) {
+  padding-inline: var(--sky-page-gutter);
 }
 
-.sp-snap-card {
+.sp-navbar-profile,
+.sp-camera-profile {
+  display: grid;
+  width: var(--sky-touch-target);
+  height: var(--sky-touch-target);
+  padding: 0;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+}
+
+.sp-camera-screen {
+  position: relative;
+  isolation: isolate;
+  padding: calc(var(--sky-safe-area-top) + 8px) var(--sky-page-gutter)
+    calc(var(--sky-safe-area-bottom) + 82px);
+  gap: 8px;
+  background:
+    radial-gradient(
+      circle at 12% 4%,
+      rgba(44, 157, 255, 0.42),
+      transparent 34%
+    ),
+    radial-gradient(
+      circle at 88% 64%,
+      rgba(5, 105, 210, 0.36),
+      transparent 40%
+    ),
+    linear-gradient(160deg, #06182d 0%, #0b2748 48%, #04111f 100%);
+}
+
+.sp-camera-screen::before {
+  position: absolute;
+  z-index: -1;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+  background-size: 44px 44px;
+  content: '';
+  inset: 0;
+  mask-image: linear-gradient(to bottom, transparent, black 24%, black);
+}
+
+.sp-camera-header {
+  position: relative;
+  z-index: 3;
+  display: grid;
+  grid-template-columns: var(--sky-touch-target) 1fr var(--sky-touch-target);
+  gap: var(--sky-space-2);
+}
+
+.sp-camera-header__title {
+  justify-items: center;
+  text-align: center;
+}
+
+.sp-camera-header h1 {
+  font-size: 21px;
+  letter-spacing: -0.02em;
+}
+
+.sp-camera-profile {
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(5, 16, 30, 0.42);
+}
+
+.sp-camera-viewfinder {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  min-height: 0;
+  flex: 1;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 30px;
+  background:
+    radial-gradient(
+      circle at 50% 32%,
+      rgba(49, 161, 255, 0.22),
+      transparent 27%
+    ),
+    linear-gradient(180deg, rgba(12, 33, 57, 0.78), rgba(3, 12, 24, 0.96));
+  box-shadow:
+    inset 0 1px rgba(255, 255, 255, 0.1),
+    0 26px 60px rgba(0, 7, 19, 0.34);
+}
+
+.sp-camera-viewfinder::before,
+.sp-camera-viewfinder::after {
+  position: absolute;
+  pointer-events: none;
+  content: '';
+}
+
+.sp-camera-viewfinder::before {
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 26px;
+  inset: 7px;
+}
+
+.sp-camera-viewfinder::after {
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 42%;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent);
+}
+
+.sp-camera-viewfinder__status {
+  position: absolute;
+  z-index: 2;
+  top: var(--sky-space-4);
+  left: var(--sky-space-4);
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 9px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: var(--sky-radius-pill);
+  background: rgba(3, 12, 24, 0.34);
+  color: rgba(255, 255, 255, 0.76);
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.sp-camera-viewfinder__status > span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #45dc78;
+  box-shadow: 0 0 0 4px rgba(69, 220, 120, 0.12);
+}
+
+.sp-camera-reticle {
+  position: absolute;
+  top: 39%;
+  left: 50%;
+  display: grid;
+  width: 76px;
+  height: 76px;
+  transform: translate(-50%, -50%);
+  place-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 24px;
+}
+
+.sp-camera-reticle::before,
+.sp-camera-reticle::after {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.36);
+  content: '';
+}
+
+.sp-camera-reticle::before {
+  width: 24px;
+  height: 1px;
+}
+
+.sp-camera-reticle::after {
+  width: 1px;
+  height: 24px;
+}
+
+.sp-camera-reticle > span {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--sp-camera-blue);
+  box-shadow: 0 0 18px rgba(10, 132, 255, 0.9);
+}
+
+.sp-camera-viewfinder__hint {
+  position: absolute;
+  z-index: 2;
+  right: var(--sky-space-5);
+  bottom: 164px;
+  left: var(--sky-space-5);
+  margin: 0;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 10px;
+  font-weight: 650;
+  line-height: 1.4;
+  text-align: center;
+}
+
+.sp-camera-dock {
+  position: absolute;
+  z-index: 3;
+  right: var(--sky-space-4);
+  bottom: var(--sky-space-3);
+  left: var(--sky-space-4);
+  display: grid;
+  justify-items: center;
+  gap: var(--sky-space-2);
+}
+
+.sp-camera-dock :deep(.sky-segmented) {
+  width: min(228px, 76%);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(4, 14, 28, 0.5);
+}
+
+.sp-camera-actions {
+  width: 100%;
+  grid-template-columns: 1fr 82px 1fr;
+  gap: var(--sky-space-3);
+}
+
+.sp-camera-secondary {
+  width: 46px;
+  height: 46px;
+  border-color: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.11);
+}
+
+.sp-shutter {
+  width: 78px;
+  height: 78px;
+  border-width: 4px;
+  background: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
+}
+
+.sp-shutter > span {
+  width: 62px;
+  height: 62px;
+}
+
+.sp-camera-format {
+  min-height: 16px;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.sp-chat-screen {
+  padding: 8px var(--sky-page-gutter) var(--sky-space-5);
+}
+
+.sp-chat-group {
+  margin-bottom: var(--sky-space-5);
+}
+
+.sp-screen-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 36px;
+  padding: 0 3px;
+}
+
+.sp-screen-heading b {
+  font-size: 13px;
+  letter-spacing: -0.01em;
+}
+
+.sp-screen-heading small {
+  color: var(--sky-muted);
+  font-size: 10px;
+}
+
+.sp-chat-list {
+  overflow: hidden;
+  border: 1px solid var(--sky-hairline);
+  border-radius: var(--sky-radius-card);
+  background: color-mix(in srgb, var(--sky-surface) 92%, transparent);
+}
+
+.sp-chat-row {
   display: grid;
   align-items: center;
-  min-height: 66px;
-  padding: 8px 10px;
-  border: 1px solid var(--sky-hairline);
-  border-radius: var(--sky-radius-control);
-  background: linear-gradient(
-    135deg,
-    var(--sky-surface),
-    var(--sky-surface-muted)
-  );
+  width: 100%;
+  min-height: 64px;
+  padding: 7px 10px;
+  border: 0;
+  border-bottom: 1px solid var(--sky-hairline);
+  background: transparent;
   color: var(--sky-text);
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: auto minmax(0, 1fr) auto;
   gap: var(--sky-space-3);
   text-align: left;
 }
 
-.sp-snap-card > span:nth-child(2) {
-  display: grid;
-  min-width: 0;
+.sp-chat-row:last-child {
+  border-bottom: 0;
 }
 
-.sp-snap-card small {
-  color: var(--sky-muted);
-  font-size: 11px;
+.sp-chat-row--unread,
+.sp-chat-row--snap {
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--sky-app-accent-soft) 60%, transparent),
+    transparent 72%
+  );
 }
 
-.sp-snap-card:not(:disabled) > svg {
-  color: var(--sp-pink);
-}
-
-.sp-snap-card:disabled {
+.sp-chat-row:disabled {
   opacity: 0.58;
 }
 
-.sp-conversation-row {
-  padding-block: 10px;
+.sp-avatar--chat {
+  width: 48px;
+  height: 48px;
 }
 
-.sp-streak {
-  color: #f36f32;
-  font-size: 11px;
+.sp-avatar--unread {
+  border-color: var(--sp-pink);
+  outline: 2px solid color-mix(in srgb, var(--sp-pink) 20%, transparent);
 }
 
-.sp-row-after {
+.sp-chat-row__copy {
   display: grid;
-  justify-items: end;
-  gap: 5px;
+  min-width: 0;
+  gap: 4px;
 }
 
-.sp-row-after time {
+.sp-chat-row__copy b,
+.sp-chat-row__meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sp-chat-row__copy b {
+  font-size: 14px;
+}
+
+.sp-chat-row__meta {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  color: var(--sky-muted);
+  font-size: 10px;
+  gap: 4px;
+}
+
+.sp-chat-status-dot {
+  width: 9px;
+  height: 9px;
+  flex: 0 0 auto;
+  border-radius: 3px;
+  background: var(--sp-pink);
+}
+
+.sp-chat-status-dot--video {
+  background: #9b4dff;
+}
+
+.sp-chat-row__action {
+  display: grid;
+  min-width: 32px;
+  min-height: 32px;
+  place-items: center;
   color: var(--sky-subtle);
-  font-size: 9px;
+}
+
+.sp-navbar-streak,
+.sp-streak {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 2px;
+  color: #f36f32;
+  font-size: 10px;
+  font-weight: 800;
+}
+
+.sp-navbar-streak {
+  justify-content: center;
+  font-size: 11px;
 }
 
 .sp-thread {
@@ -4058,101 +4535,227 @@ input:focus-visible {
   opacity: 0.42;
 }
 
-.sp-story-hero {
-  display: grid;
-  align-items: center;
-  margin-bottom: var(--sky-space-4);
-  padding: var(--sky-space-4);
-  border-radius: var(--sky-radius-card);
-  background:
-    radial-gradient(
-      circle at 80% 0%,
-      rgba(66, 232, 255, 0.27),
-      transparent 44%
-    ),
-    linear-gradient(135deg, rgba(90, 108, 255, 0.18), rgba(255, 91, 189, 0.14));
-  grid-template-columns: auto 1fr auto;
-  gap: var(--sky-space-3);
+.sp-stories-screen {
+  padding: 8px var(--sky-page-gutter) var(--sky-space-5);
 }
 
-.sp-story-hero__icon {
+.sp-story-rail-section {
+  margin-bottom: var(--sky-space-5);
+}
+
+.sp-story-rail {
+  display: flex;
+  overflow-x: auto;
+  padding: 4px 1px 6px;
+  gap: var(--sky-space-3);
+  scroll-snap-type: x proximity;
+  scrollbar-width: none;
+}
+
+.sp-story-rail::-webkit-scrollbar {
+  display: none;
+}
+
+.sp-story-rail__item {
   display: grid;
-  width: 46px;
-  height: 46px;
+  width: 68px;
+  min-width: 68px;
+  padding: 0;
+  justify-items: center;
+  border: 0;
+  background: transparent;
+  color: var(--sky-text);
+  gap: 7px;
+  scroll-snap-align: start;
+}
+
+.sp-story-rail__item:disabled {
+  opacity: 0.58;
+}
+
+.sp-story-rail__item small {
+  overflow: hidden;
+  width: 100%;
+  font-size: 10px;
+  font-weight: 700;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sp-story-rail__avatar {
+  position: relative;
+  width: 62px;
+  height: 62px;
+  border-width: 3px;
+  outline-color: var(--sky-bg);
+}
+
+.sp-story-rail__avatar--add {
+  overflow: visible;
+  border-color: var(--sky-subtle);
+}
+
+.sp-story-rail__avatar--add img {
+  border-radius: inherit;
+}
+
+.sp-story-rail__plus {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  display: grid;
+  width: 22px;
+  height: 22px;
   place-items: center;
-  border-radius: 16px;
+  border: 2px solid var(--sky-bg);
+  border-radius: 50%;
   background: var(--sky-app-accent);
   color: white;
 }
 
-.sp-story-hero > span:nth-child(2) {
+.sp-story-feed {
+  margin-bottom: var(--sky-space-4);
+}
+
+.sp-story-grid {
   display: grid;
-  gap: 2px;
-}
-
-.sp-story-hero small {
-  color: var(--sky-muted);
-  font-size: 10px;
-  line-height: 1.35;
-}
-
-.sp-story-row {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  min-height: 72px;
-  padding: 9px var(--sky-space-4);
-  border: 0;
-  border-bottom: 1px solid var(--sky-hairline);
-  background: transparent;
-  color: var(--sky-text);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: var(--sky-space-3);
-  text-align: left;
 }
 
-.sp-story-row > span:nth-child(2),
-.sp-story-row > button > span:nth-child(2) {
-  display: grid;
-  flex: 1;
-  gap: 2px;
+.sp-story-card {
+  position: relative;
+  overflow: hidden;
+  min-width: 0;
+  aspect-ratio: 3 / 4;
+  border: 1px solid var(--sky-hairline);
+  border-radius: var(--sky-radius-card);
+  background: var(--sky-surface-muted);
+  box-shadow: 0 10px 28px rgba(20, 27, 55, 0.12);
 }
 
-.sp-story-row small {
-  color: var(--sky-muted);
-  font-size: 11px;
+.sp-story-card--seen {
+  opacity: 0.72;
 }
 
-.sp-story-row--own {
-  display: grid;
-  grid-template-columns: 1fr auto;
+.sp-story-card--owner {
+  border-color: color-mix(
+    in srgb,
+    var(--sky-app-accent) 44%,
+    var(--sky-hairline)
+  );
 }
 
-.sp-story-row--own > button:first-child {
-  display: flex;
-  align-items: center;
-  min-height: 54px;
+.sp-story-card__open {
+  position: absolute;
+  display: block;
+  width: 100%;
   padding: 0;
   border: 0;
   background: transparent;
-  color: var(--sky-text);
-  gap: var(--sky-space-3);
+  color: white;
   text-align: left;
+  inset: 0;
 }
 
-.sp-story-row__actions {
-  display: flex;
+.sp-story-card__open:disabled {
+  opacity: 0.58;
+}
+
+.sp-story-card__media {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  color: white;
+  font-size: 30px;
+  font-weight: 850;
+  letter-spacing: 0.04em;
+  inset: 0;
+}
+
+.sp-story-card__media::after {
+  position: absolute;
+  background: linear-gradient(
+    180deg,
+    rgba(3, 7, 16, 0.08) 20%,
+    rgba(3, 7, 16, 0.82) 100%
+  );
+  content: '';
+  inset: 0;
+}
+
+.sp-story-card__media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.sp-story-card__duration {
+  position: absolute;
+  z-index: 2;
+  top: 9px;
+  left: 9px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 7px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: var(--sky-radius-pill);
+  background: rgba(4, 10, 22, 0.42);
+  font-size: 9px;
+  font-weight: 800;
+  backdrop-filter: blur(10px);
+}
+
+.sp-story-card__copy {
+  position: absolute;
+  z-index: 2;
+  right: 10px;
+  bottom: 10px;
+  left: 10px;
+  display: grid;
+  min-width: 0;
   gap: 3px;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
 }
 
-.sp-story-row__actions button {
-  width: 40px;
-  min-width: 40px;
-  height: 40px;
+.sp-story-card__copy b,
+.sp-story-card__copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.sp-chevron {
-  transform: rotate(180deg);
-  color: var(--sky-subtle);
+.sp-story-card__copy b {
+  font-size: 13px;
+}
+
+.sp-story-card__copy small {
+  color: rgba(255, 255, 255, 0.76);
+  font-size: 8px;
+}
+
+.sp-story-card__actions {
+  position: absolute;
+  z-index: 3;
+  top: 7px;
+  right: 7px;
+  display: flex;
+  gap: 4px;
+}
+
+.sp-story-card__actions button {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  place-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 50%;
+  background: rgba(4, 10, 22, 0.48);
+  color: white;
+  backdrop-filter: blur(10px);
 }
 
 .sp-profile-card {
@@ -4341,6 +4944,142 @@ input:focus-visible {
   gap: 2px;
 }
 
+.sp-friends-screen {
+  padding: 8px var(--sky-page-gutter) var(--sky-space-5);
+}
+
+.sp-friends-screen .sp-profile-card {
+  border-color: color-mix(
+    in srgb,
+    var(--sky-app-accent) 22%,
+    var(--sky-hairline)
+  );
+  background:
+    radial-gradient(
+      circle at 90% 6%,
+      var(--sky-app-accent-soft),
+      transparent 48%
+    ),
+    linear-gradient(
+      145deg,
+      var(--sky-surface),
+      color-mix(in srgb, var(--sky-surface-muted) 72%, transparent)
+    );
+  box-shadow: 0 12px 34px rgba(20, 27, 55, 0.1);
+}
+
+.sp-profile-streak-stat {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  color: #f36f32;
+}
+
+.sp-friends-block,
+.sp-friends-list {
+  border-radius: var(--sky-radius-card);
+  box-shadow: 0 8px 26px rgba(20, 27, 55, 0.06);
+}
+
+.sp-friends-block > header,
+.sp-friends-list > header {
+  min-height: 42px;
+}
+
+.sp-discovery :deep(.sky-searchbar) {
+  margin: var(--sky-space-3) var(--sky-space-3) var(--sky-space-2);
+}
+
+.sp-discovery-grid {
+  display: grid;
+  padding: var(--sky-space-2) var(--sky-space-3) var(--sky-space-3);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--sky-space-2);
+}
+
+.sp-discovery-card {
+  display: grid;
+  min-width: 0;
+  padding: var(--sky-space-3);
+  justify-items: center;
+  border: 1px solid var(--sky-hairline);
+  border-radius: var(--sky-radius-control);
+  background: var(--sky-surface-muted);
+  gap: var(--sky-space-2);
+  text-align: center;
+}
+
+.sp-discovery-card.sp-person-row--highlighted {
+  border-color: var(--sky-app-accent);
+  background: var(--sky-app-accent-soft);
+}
+
+.sp-avatar--discovery {
+  width: 58px;
+  height: 58px;
+}
+
+.sp-discovery-card__copy {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  gap: 2px;
+}
+
+.sp-discovery-card__copy b,
+.sp-discovery-card__copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sp-discovery-card__copy b {
+  font-size: 12px;
+}
+
+.sp-discovery-card__copy small {
+  color: var(--sky-muted);
+  font-size: 9px;
+}
+
+.sp-friends-list .sp-friend-card > .sp-person-row {
+  min-height: 60px;
+}
+
+.sp-friends-list .sp-person-row__copy small {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.sp-friends-list .sp-friend-actions {
+  padding: 0 var(--sky-space-3) var(--sky-space-2);
+  gap: 4px;
+}
+
+.sp-friends-list .sp-friend-actions button {
+  min-height: 42px;
+  border: 1px solid var(--sky-hairline);
+  background: var(--sky-surface-muted);
+}
+
+.sp-bottom-nav {
+  z-index: 55;
+}
+
+.sp-bottom-nav :deep(.sky-tabbar__pane) {
+  border: 1px solid var(--sky-hairline);
+  box-shadow: 0 14px 34px rgba(8, 13, 29, 0.18);
+}
+
+.sp-bottom-nav--camera :deep(.sky-tabbar__pane) {
+  border-color: rgba(255, 255, 255, 0.13);
+  background: rgba(3, 12, 24, 0.7);
+  box-shadow: 0 14px 38px rgba(0, 5, 15, 0.36);
+  backdrop-filter: blur(22px) saturate(1.18);
+}
+
 :deep(.sp-tab) {
   transition:
     color var(--sky-transition-normal) ease,
@@ -4547,6 +5286,92 @@ input:focus-visible {
   padding-bottom: calc(var(--sky-safe-area-bottom) + var(--sky-space-3));
 }
 
+.sp-media-viewer {
+  isolation: isolate;
+}
+
+.sp-media-viewer::before,
+.sp-media-viewer::after {
+  position: absolute;
+  z-index: 1;
+  right: 0;
+  left: 0;
+  pointer-events: none;
+  content: '';
+}
+
+.sp-media-viewer::before {
+  top: 0;
+  height: 22%;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
+}
+
+.sp-media-viewer::after {
+  bottom: 0;
+  height: 35%;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.74), transparent);
+}
+
+.sp-media-viewer > img,
+.sp-media-viewer > video {
+  position: relative;
+  z-index: 0;
+  object-fit: cover;
+}
+
+.sp-media-viewer > header {
+  z-index: 5;
+}
+
+.sp-viewer-progress {
+  z-index: 6;
+}
+
+.sp-viewer-loading {
+  z-index: 6;
+}
+
+.sp-media-viewer__overlay {
+  z-index: 3;
+  right: 0;
+  left: 0;
+  padding: 11px var(--sky-page-gutter);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.3);
+  font-size: clamp(20px, 6vw, 30px);
+  font-weight: 800;
+  line-height: 1.12;
+}
+
+.sp-media-viewer__caption {
+  z-index: 4;
+  right: auto;
+  bottom: calc(var(--sky-safe-area-bottom) + 24px);
+  max-width: calc(100% - (2 * var(--sky-page-gutter)));
+  margin: 0 var(--sky-page-gutter);
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1.35;
+  text-align: left;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.82);
+  backdrop-filter: none;
+}
+
+.sp-media-viewer__caption--with-reply {
+  bottom: calc(var(--sky-safe-area-bottom) + 80px);
+}
+
+.sp-story-reply {
+  z-index: 5;
+}
+
+.sp-media-viewer__owner-actions {
+  z-index: 5;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .sp-viewer-progress span {
     transition: none;
@@ -4556,9 +5381,5 @@ input:focus-visible {
   :deep(.sp-tab) {
     transition: none;
   }
-
-  .sp-camera-preview__glow {
-    filter: none;
-  }
 }
 </style>
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index c66522d..8898187 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -3577,6 +3577,16 @@ let skyPicFriends = [
     streakCount: 7,
   },
 ]
+const skyPicStreakStates = new Map([
+  [
+    '20000000-0000-4000-8000-000000000001',
+    {
+      friendLastSnapOn: skyPicUtcDay(),
+      selfLastSnapOn: skyPicUtcDay(),
+      streakUpdatedOn: skyPicUtcDay(),
+    },
+  ],
+])
 let skyPicRequests = [
   {
     createdAt: isoTime(-35 * 60_000),
@@ -3816,11 +3826,79 @@ function skyPicIncrementOwnScore(amount = 1) {
   if (skyPicProfile) skyPicProfile.snapScore = skyPicProfiles[0].snapScore
 }
 
+function skyPicUtcDay(timestamp = Date.now()) {
+  const value = new Date(timestamp)
+  return Number.isNaN(value.getTime()) ? null : value.toISOString().slice(0, 10)
+}
+
+function skyPicPreviousUtcDay(day) {
+  const value = new Date(`${day}T00:00:00.000Z`)
+  value.setUTCDate(value.getUTCDate() - 1)
+  return value.toISOString().slice(0, 10)
+}
+
+function skyPicApplyStreakActivity(
+  friend,
+  state,
+  side,
+  timestamp = Date.now(),
+) {
+  const day = skyPicUtcDay(timestamp)
+  if (!day || !state || !['friend', 'self'].includes(side)) return false
+
+  const previousDay = skyPicPreviousUtcDay(day)
+  if (
+    friend.streakCount > 0 &&
+    (!state.streakUpdatedOn || state.streakUpdatedOn < previousDay)
+  ) {
+    friend.streakCount = 0
+  }
+
+  state[side === 'self' ? 'selfLastSnapOn' : 'friendLastSnapOn'] = day
+  if (
+    state.selfLastSnapOn !== day ||
+    state.friendLastSnapOn !== day ||
+    state.streakUpdatedOn === day
+  ) {
+    return false
+  }
+
+  friend.streakCount =
+    state.streakUpdatedOn === previousDay ? friend.streakCount + 1 : 1
+  friend.bestStreak = Math.max(friend.bestStreak, friend.streakCount)
+  state.streakUpdatedOn = day
+  return true
+}
+
+function skyPicSyncStreak(friend) {
+  const conversation = skyPicConversation(friend.friendshipId)
+  if (!conversation) return
+  conversation.streakCount = friend.streakCount
+  conversation.bestStreak = friend.bestStreak
+}
+
+function skyPicRefreshStreaks(timestamp = Date.now()) {
+  const day = skyPicUtcDay(timestamp)
+  if (!day) return
+  const previousDay = skyPicPreviousUtcDay(day)
+  for (const friend of skyPicFriends) {
+    const state = skyPicStreakStates.get(friend.friendshipId)
+    if (
+      friend.streakCount > 0 &&
+      (!state?.streakUpdatedOn || state.streakUpdatedOn < previousDay)
+    ) {
+      friend.streakCount = 0
+      skyPicSyncStreak(friend)
+    }
+  }
+}
+
 function skyPicStoryVisible(story) {
   return story.isOwner || !skyPicBlockedProfileIds.has(story.author.id)
 }
 
 function skyPicBootstrap(testScenario = '') {
+  skyPicRefreshStreaks()
   if (testScenario === 'skypic-onboarding') {
     const profile = skyPicOnboardingProfile
       ? { ...skyPicOnboardingProfile }
@@ -8089,6 +8167,7 @@ app.post('/api/:endpoint', (request, response) => {
     }
     skyPicProfile = null
     skyPicFriends = []
+    skyPicStreakStates.clear()
     skyPicRequests = []
     skyPicConversations = []
     skyPicSnaps = []
@@ -8252,6 +8331,11 @@ app.post('/api/:endpoint', (request, response) => {
       streakCount: 0,
     }
     skyPicFriends.push(friend)
+    skyPicStreakStates.set(friendshipId, {
+      friendLastSnapOn: null,
+      selfLastSnapOn: null,
+      streakUpdatedOn: null,
+    })
     if (skyPicProfile) skyPicProfile.friendCount = skyPicFriends.length
     response.json({ success: true, data: skyPicFriendView(friend) })
     return
@@ -8277,6 +8361,7 @@ app.post('/api/:endpoint', (request, response) => {
     skyPicSnaps = skyPicSnaps.filter(
       (item) => item.friendshipId !== friendshipId,
     )
+    skyPicStreakStates.delete(friendshipId)
     skyPicMessages.delete(friendshipId)
     if (skyPicProfile) skyPicProfile.friendCount = skyPicFriends.length
     response.json({ success: true })
@@ -8317,6 +8402,7 @@ app.post('/api/:endpoint', (request, response) => {
         item.sender.id !== profileId && !friendshipIds.has(item.friendshipId),
     )
     for (const friendshipId of friendshipIds) {
+      skyPicStreakStates.delete(friendshipId)
       skyPicMessages.delete(friendshipId)
     }
     if (skyPicProfile) skyPicProfile.friendCount = skyPicFriends.length
@@ -8392,9 +8478,18 @@ app.post('/api/:endpoint', (request, response) => {
     const sent = []
     for (const friend of recipients) {
       for (const media of mediaItems) {
+        const streakState = skyPicStreakStates.get(friend.friendshipId) ?? {
+          friendLastSnapOn: null,
+          selfLastSnapOn: null,
+          streakUpdatedOn: null,
+        }
+        skyPicStreakStates.set(friend.friendshipId, streakState)
+        skyPicApplyStreakActivity(friend, streakState, 'self', createdAt)
+        skyPicSyncStreak(friend)
         const mediaType = media.mediaType === 'video' ? 'video' : 'photo'
         const snap = {
           allowReplay: request.body.allowReplay === true,
+          bestStreak: friend.bestStreak,
           createdAt,
           direction: 'sent',
           durationSeconds,
@@ -8404,6 +8499,7 @@ app.post('/api/:endpoint', (request, response) => {
           openedAt: null,
           replayedAt: null,
           sender: skyPicProfiles[0],
+          streakCount: friend.streakCount,
           type: mediaType === 'video' ? 'snap_video' : 'snap_photo',
         }
         skyPicSnaps.push(snap)
@@ -12988,6 +13084,7 @@ if (require.main === module) {
 
 module.exports = {
   app,
+  skyPicApplyStreakActivity,
   skyPicMessageBody,
   skyPicRecipientIds,
   skyPicTextOverlay,
diff --git a/frontend/testserver/smoke.cjs b/frontend/testserver/smoke.cjs
index 5ed2c6b..939b579 100644
--- a/frontend/testserver/smoke.cjs
+++ b/frontend/testserver/smoke.cjs
@@ -3,6 +3,7 @@ const { once } = require('node:events')
 
 const {
   app,
+  skyPicApplyStreakActivity,
   skyPicMessageBody,
   skyPicRecipientIds,
   skyPicTextOverlay,
@@ -318,6 +319,83 @@ async function verifySkyPicActions(baseUrl) {
     error: 'message_too_long',
   })
 
+  const streakFixture = { bestStreak: 18, streakCount: 7 }
+  const streakState = {
+    friendLastSnapOn: null,
+    selfLastSnapOn: null,
+    streakUpdatedOn: '2026-08-17',
+  }
+  assert.equal(
+    skyPicApplyStreakActivity(
+      streakFixture,
+      streakState,
+      'self',
+      '2026-08-18T08:00:00.000Z',
+    ),
+    false,
+  )
+  assert.equal(
+    skyPicApplyStreakActivity(
+      streakFixture,
+      streakState,
+      'self',
+      '2026-08-18T08:01:00.000Z',
+    ),
+    false,
+  )
+  assert.equal(
+    skyPicApplyStreakActivity(
+      streakFixture,
+      streakState,
+      'friend',
+      '2026-08-18T09:00:00.000Z',
+    ),
+    true,
+  )
+  assert.equal(streakFixture.streakCount, 8)
+  assert.equal(
+    skyPicApplyStreakActivity(
+      streakFixture,
+      streakState,
+      'friend',
+      '2026-08-18T09:01:00.000Z',
+    ),
+    false,
+  )
+  skyPicApplyStreakActivity(
+    streakFixture,
+    streakState,
+    'friend',
+    '2026-08-19T08:00:00.000Z',
+  )
+  assert.equal(
+    skyPicApplyStreakActivity(
+      streakFixture,
+      streakState,
+      'self',
+      '2026-08-19T09:00:00.000Z',
+    ),
+    true,
+  )
+  assert.equal(streakFixture.streakCount, 9)
+  skyPicApplyStreakActivity(
+    streakFixture,
+    streakState,
+    'self',
+    '2026-08-21T08:00:00.000Z',
+  )
+  assert.equal(streakFixture.streakCount, 0)
+  assert.equal(
+    skyPicApplyStreakActivity(
+      streakFixture,
+      streakState,
+      'friend',
+      '2026-08-21T09:00:00.000Z',
+    ),
+    true,
+  )
+  assert.deepEqual(streakFixture, { bestStreak: 18, streakCount: 1 })
+
   let bootstrap = await expectSuccess(baseUrl, 'skypic:bootstrap', {}, true)
   const friend = bootstrap.friends[0]
   const receivedSnap = bootstrap.inbox.find(
@@ -326,6 +404,16 @@ async function verifySkyPicActions(baseUrl) {
   assert(friend, 'skypic:bootstrap did not include a friend')
   assert(receivedSnap, 'skypic:bootstrap did not include an unopened snap')
   assert.equal(friend.profile.friendshipStatus, 'friends')
+  const streakConversation = bootstrap.conversations.find(
+    (conversation) => conversation.friendshipId === friend.friendshipId,
+  )
+  assert(streakConversation, 'SkyPic friend was missing its conversation')
+  assert.equal(typeof friend.streakCount, 'number')
+  assert.equal(typeof friend.bestStreak, 'number')
+  assert.equal(streakConversation.streakCount, friend.streakCount)
+  assert.equal(streakConversation.bestStreak, friend.bestStreak)
+  const expectedStreakCount = friend.streakCount
+  const expectedBestStreak = friend.bestStreak
   let expectedSnapScore = bootstrap.profile.snapScore
 
   const thread = await expectSuccess(
@@ -616,10 +704,14 @@ async function verifySkyPicActions(baseUrl) {
     30 * 24 * 60 * 60_000,
   )
   expectSkyPicMetadataSafe(sentSnaps, 'SkyPic sent snap response')
+  assert.equal(sentSnaps[0].streakCount, expectedStreakCount)
+  assert.equal(sentSnaps[0].bestStreak, expectedBestStreak)
   expectedSnapScore += sentSnaps.length
   assert.equal(sentSnaps[0].sender.snapScore, expectedSnapScore)
   bootstrap = await expectSuccess(baseUrl, 'skypic:bootstrap', {}, true)
   assert.equal(bootstrap.profile.snapScore, expectedSnapScore)
+  assert.equal(bootstrap.friends[0].streakCount, expectedStreakCount)
+  assert.equal(bootstrap.friends[0].bestStreak, expectedBestStreak)
 
   assert.deepEqual(
     await post(baseUrl, 'skypic:send-snap', {
@@ -704,10 +796,20 @@ async function verifySkyPicActions(baseUrl) {
   )
   assert.equal(sentPhotoBatch.length, 3)
   assert(sentPhotoBatch.every((snap) => snap.type === 'snap_photo'))
+  assert(
+    sentPhotoBatch.every(
+      (snap) =>
+        snap.streakCount === expectedStreakCount &&
+        snap.bestStreak === expectedBestStreak,
+    ),
+    'an atomic SkyPic photo batch advanced one friendship more than once per UTC day',
+  )
   assert.equal(new Set(sentPhotoBatch.map((snap) => snap.id)).size, 3)
   expectedSnapScore += sentPhotoBatch.length
   bootstrap = await expectSuccess(baseUrl, 'skypic:bootstrap', {}, true)
   assert.equal(bootstrap.profile.snapScore, expectedSnapScore)
+  assert.equal(bootstrap.friends[0].streakCount, expectedStreakCount)
+  assert.equal(bootstrap.friends[0].bestStreak, expectedBestStreak)
 
   const sentMessage = await expectSuccess(
     baseUrl,
diff --git a/sky_phone/source/server/skypic.lua b/sky_phone/source/server/skypic.lua
index 2fec2f0..48a89c5 100644
--- a/sky_phone/source/server/skypic.lua
+++ b/sky_phone/source/server/skypic.lua
@@ -342,7 +342,11 @@ end
 
 local function list_friends(profile_id)
     local rows = Bridge.Database.Query([[
-        SELECT friendship.`id` AS `friendship_id`, friendship.`streak_count`, friendship.`best_streak`,
+        SELECT friendship.`id` AS `friendship_id`,
+            CASE WHEN friendship.`streak_updated_on` IS NULL
+                    OR friendship.`streak_updated_on` < DATE_SUB(UTC_DATE(), INTERVAL 1 DAY)
+                THEN 0 ELSE friendship.`streak_count` END AS `streak_count`,
+            friendship.`best_streak`,
             friendship.`accepted_at`, friendship.`created_at`, peer.`id` AS `profile_id`, peer.`handle`,
             peer.`display_name`, peer.`avatar_seed`, peer.`snap_score`, avatar.`url` AS `avatar_url`
         FROM `sky_phone_skypic_friendships` friendship
@@ -561,7 +565,11 @@ end
 
 local function list_conversations(profile_id)
     local rows = Bridge.Database.Query([[
-        SELECT friendship.`id` AS `friendship_id`, friendship.`streak_count`, friendship.`best_streak`,
+        SELECT friendship.`id` AS `friendship_id`,
+            CASE WHEN friendship.`streak_updated_on` IS NULL
+                    OR friendship.`streak_updated_on` < DATE_SUB(UTC_DATE(), INTERVAL 1 DAY)
+                THEN 0 ELSE friendship.`streak_count` END AS `streak_count`,
+            friendship.`best_streak`,
             peer.`id` AS `profile_id`, peer.`handle`, peer.`display_name`, peer.`avatar_seed`,
             peer.`snap_score`, avatar.`url` AS `avatar_url`, message.`id` AS `last_id`,
             message.`message_type` AS `last_type`,
@@ -1617,8 +1625,14 @@ local function load_snap_metadata(message_ids, viewer_id)
             message.`message_type`, message.`view_seconds`, message.`allow_replay`, message.`opened_at`,
             message.`replayed_at`, message.`expires_at`, message.`created_at`, sender.`handle` AS `sender_handle`,
             sender.`display_name` AS `sender_display_name`, sender.`avatar_seed` AS `sender_avatar_seed`,
-            sender.`snap_score` AS `sender_snap_score`, avatar.`url` AS `sender_avatar_url`
+            sender.`snap_score` AS `sender_snap_score`, avatar.`url` AS `sender_avatar_url`,
+            CASE WHEN friendship.`streak_updated_on` IS NULL
+                    OR friendship.`streak_updated_on` < DATE_SUB(UTC_DATE(), INTERVAL 1 DAY)
+                THEN 0 ELSE friendship.`streak_count` END AS `streak_count`,
+            friendship.`best_streak`
         FROM `sky_phone_skypic_messages` message
+        JOIN `sky_phone_skypic_friendships` friendship
+            ON friendship.`id` = message.`friendship_id` AND friendship.`status` = 'accepted'
         JOIN `sky_phone_skypic_profiles` sender ON sender.`id` = message.`sender_profile_id`
         LEFT JOIN `sky_phone_media` avatar ON avatar.`id` = sender.`avatar_media_id`
         WHERE message.`id` IN (%s) AND message.`message_type` IN ('snap_photo','snap_video')
@@ -1628,6 +1642,8 @@ local function load_snap_metadata(message_ids, viewer_id)
     for _, row in ipairs(rows) do
         local snap = safe_snap_from_row(row, viewer_id)
         snap.recipientProfileId = row.recipient_profile_id
+        snap.streakCount = tonumber(row.streak_count) or 0
+        snap.bestStreak = tonumber(row.best_streak) or 0
         snaps_by_id[row.id] = snap
     end
     local snaps = {}