diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3ff419b..78ebe16 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -56,6 +56,7 @@ import { useNotesStore } from '@/stores/notes'
 import { useMemosStore } from '@/stores/memos'
 import { useWeatherStore } from '@/stores/weather'
 import { useEasyShareStore } from '@/stores/easyshare'
+import { useRadioStore } from '@/stores/radio'
 import {
   useNotificationsStore,
   type PhoneNotification,
@@ -70,10 +71,15 @@ import type {
   CompanyUnreadCounts,
 } from '@/types/companies'
 import type { PhoneCall } from '@/types/phone'
+import type { DynamicIslandActivity } from '@/types/dynamicIsland'
 import type { EasyShareEvent } from '@/types/easyshare'
 import type { CryptoMarketChangedData } from '@/types/crypto'
 import type { CityWarnEventData } from '@/types/citywarn'
 import { nuiCall } from '@/utils/nui'
+import {
+  installPhoneAudioController,
+  setPhoneOutputVolume,
+} from '@/utils/phoneAudio'
 import { formatTimer } from '@/utils/clock'
 import { parsePhonePreferences } from '@/utils/preferences'
 import { getHairlinePixelStyle } from '@/utils/rendering'
@@ -82,6 +88,7 @@ import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 import SpringboardView from '@/views/SpringboardView.vue'
 
 type AppMessage = {
+  openHome?: boolean
   type?: string
   data?:
     | CalendarReminderData
@@ -313,6 +320,7 @@ const notes = useNotesStore()
 const memos = useMemosStore()
 const weather = useWeatherStore()
 const easyShare = useEasyShareStore()
+const radio = useRadioStore()
 const notifications = useNotificationsStore()
 const route = useRoute()
 const router = useRouter()
@@ -335,8 +343,13 @@ const DARK_STATUS_BAR_APP_IDS = new Set([
   'minesweeper',
   'number-merge',
 ])
+const isDynamicIslandGalleryRoute = computed(
+  () => isDevelopment && route.name === 'development-dynamic-islands',
+)
 const isDevelopmentRoute = computed(
-  () => isDevelopment && route.name === 'development-sky-ui',
+  () =>
+    isDevelopment &&
+    (route.name === 'development-sky-ui' || isDynamicIslandGalleryRoute.value),
 )
 const appTransitionName = computed(() =>
   route.query.transition === 'app-switch' ? 'app-switch' : 'app-window',
@@ -356,9 +369,12 @@ const setupPreviewDismissed = ref(false)
 const setupDevelopmentSkipped = ref(false)
 const setupAppearanceSelected = ref(false)
 const pendingUnlockRoute = ref<string | null>(null)
+const openHomeRequested = ref(false)
 const unlockedServicesLoaded = ref(false)
 const controlCenterOpened = ref(false)
 const activitySuspended = ref(false)
+const dynamicIslandExpanded = ref(false)
+const dynamicIslandActivity = ref<DynamicIslandActivity | null>(null)
 const simPicker = ref<SimPickerPayload | null>(null)
 const setupRequired = computed(
   () =>
@@ -432,6 +448,12 @@ const phoneResolutionStyle = computed<CSSProperties>(() => ({
 }))
 const phoneStageStyle = computed<CSSProperties>(() => ({
   ...phoneResolutionStyle.value,
+  '--phone-live-activity-peek-height':
+    dynamicIslandActivity.value === 'music'
+      ? '190px'
+      : dynamicIslandActivity.value === 'recording'
+        ? '132px'
+        : '112px',
   visibility: activitySuspended.value ? 'hidden' : 'visible',
 }))
 const phoneDisplayStyle = computed<CSSProperties>(() => ({
@@ -449,6 +471,7 @@ let unlockTimer: number | undefined
 let passcodeLockTimer: number | undefined
 let hardwareVolumeHudTimer: number | undefined
 let unlockedServicesIdle: number | undefined
+let removePhoneAudioController: (() => void) | undefined
 let phoneClosePending = false
 let simPickerClosePending = false
 
@@ -758,6 +781,7 @@ function onMessage(event: MessageEvent<AppMessage>): void {
       })
     }
   } else if (event.data?.type === 'app:open') {
+    openHomeRequested.value = event.data.openHome === true
     hydratePhone(event.data.data as PhoneOpenPayload)
     void syncNavigationState().then(() => nuiCall('ui:opened'))
   } else if (event.data?.type === 'device:updated') {
@@ -1473,6 +1497,7 @@ function onFocusOut(event: FocusEvent): void {
 }
 
 onMounted(() => {
+  removePhoneAudioController = installPhoneAudioController()
   document.addEventListener('focusin', onFocusIn)
   document.addEventListener('focusout', onFocusOut)
   window.addEventListener('message', onMessage)
@@ -1587,6 +1612,23 @@ watch(
   },
 )
 
+watch(
+  () => Boolean(dynamicIslandActivity.value || calls.activeCall),
+  (active) => {
+    void nuiCall('ui:live-activity', { active })
+  },
+  { immediate: true },
+)
+
+watch(
+  hardwareAlertVolume,
+  (volume) => {
+    setPhoneOutputVolume(volume / 100)
+    if (radio.data.connected) void radio.setVolume(volume)
+  },
+  { immediate: true },
+)
+
 watch(
   () => phone.isOpen,
   (isOpen) => {
@@ -1619,7 +1661,8 @@ watch(
     }
     isLocked.value = setupRequired.value
       ? false
-      : !isDevelopment || developmentLockScreenPreview
+      : developmentLockScreenPreview ||
+        (!isDevelopment && phone.security.enabled)
     passcodeRequired.value = isLocked.value && phone.security.enabled
     unlockedServicesLoaded.value = false
     controlCenterOpened.value = false
@@ -1637,8 +1680,18 @@ watch(
       startPasscodeLock(passcodeRetrySeconds.value)
     }
     phone.setLaunchOrigin(null)
-    if (isLocked.value || setupRequired.value) void router.replace('/')
-    else loadUnlockedPhoneData()
+    if (setupRequired.value) {
+      void router.replace('/')
+    } else if (openHomeRequested.value) {
+      openHomeRequested.value = false
+      if (isLocked.value) pendingUnlockRoute.value = '/'
+      else {
+        void router.replace('/')
+        loadUnlockedPhoneData()
+      }
+    } else if (!isLocked.value) {
+      loadUnlockedPhoneData()
+    }
   },
 )
 
@@ -1650,6 +1703,7 @@ watch(
 )
 
 onBeforeUnmount(() => {
+  removePhoneAudioController?.()
   updateTextInputFocus(false)
   cancelUnlockedPhoneDataLoad()
   weather.stop()
@@ -1688,12 +1742,15 @@ onBeforeUnmount(() => {
         phone.isOpen ||
         notifications.current ||
         calls.activeCall ||
+        dynamicIslandActivity ||
         notifications.devicePreviews.length
       "
       class="phone-stage"
       :class="{
         'phone-stage--browser-preview': isBrowserPreview,
         'phone-stage--landscape': phone.cameraLandscape,
+        'phone-stage--live-activity':
+          !phone.isOpen && Boolean(dynamicIslandActivity || calls.activeCall),
         'phone-stage--peek': notifications.isPeeking,
       }"
       :style="phoneStageStyle"
@@ -1713,7 +1770,12 @@ onBeforeUnmount(() => {
           @open="openNotificationPreview"
         />
         <div
-          v-if="phone.isOpen || notifications.current || calls.activeCall"
+          v-if="
+            phone.isOpen ||
+            notifications.current ||
+            calls.activeCall ||
+            dynamicIslandActivity
+          "
           class="phone-resolution-wrapper phone-resolution-wrapper--primary"
         >
           <div class="phone-resolution-canvas phone-resolution-canvas--primary">
@@ -1721,6 +1783,7 @@ onBeforeUnmount(() => {
               class="phone-device"
               :class="{
                 'phone-app--light': !displayedDarkMode,
+                'phone-device--island-expanded': dynamicIslandExpanded,
                 [`phone-app--${phone.preferences.settings.graphicsMode}`]: true,
               }"
               :aria-label="phone.t('Common.phone')"
@@ -1832,7 +1895,6 @@ onBeforeUnmount(() => {
                     @control-center="toggleControlCenter"
                     @lock="lockPhone"
                   />
-                  <PhoneDynamicIsland v-if="!setupRequired" />
                   <SpringboardView
                     v-if="!isDevelopmentRoute && !setupRequired"
                     @edit-mode-change="springboardEditing = $event"
@@ -1918,6 +1980,11 @@ onBeforeUnmount(() => {
                 aria-hidden="true"
                 draggable="false"
               />
+              <PhoneDynamicIsland
+                v-if="!setupRequired && !isDynamicIslandGalleryRoute"
+                @expanded-change="dynamicIslandExpanded = $event"
+                @live-activity-change="dynamicIslandActivity = $event"
+              />
             </section>
           </div>
         </div>
diff --git a/frontend/src/AppDevelopmentPreview.contract.test.ts b/frontend/src/AppDevelopmentPreview.contract.test.ts
index da85cf8..bd46b82 100644
--- a/frontend/src/AppDevelopmentPreview.contract.test.ts
+++ b/frontend/src/AppDevelopmentPreview.contract.test.ts
@@ -2,7 +2,7 @@ import { readFileSync } from 'node:fs'
 
 import { describe, expect, it } from 'vitest'
 
-const source = readFileSync(new URL('./App.vue', import.meta.url), 'utf8')
+const source = readFileSync(new URL('./App.vue', import.meta.url), 'utf8').replace(/\r\n/g, '\n')
 const mainCss = readFileSync(
   new URL('./assets/main.css', import.meta.url),
   'utf8',
@@ -22,15 +22,32 @@ describe('browser development preview contract', () => {
 
   it('starts unlocked while preserving an explicit lock screen preview', () => {
     expect(source).toContain("developmentParameters.has('lockScreenPreview')")
-    expect(source).toContain(': !isDevelopment || developmentLockScreenPreview')
+    expect(source).toContain(
+      'developmentLockScreenPreview ||\n        (!isDevelopment && phone.security.enabled)',
+    )
     expect(source).toContain("developmentParameters.has('setupPreview')")
   })
 
-  it('loads authenticated app data without replacing direct app routes', () => {
-    expect(source).toContain(
+  it('restores the active route after the lock screen', () => {
+    expect(source).toMatch(
+      /if \(setupRequired\.value\) \{[\s\S]*?router\.replace\('\/'\)/,
+    )
+    expect(source).toMatch(
+      /else if \(!isLocked\.value\) \{\s*loadUnlockedPhoneData\(\)/,
+    )
+    expect(source).not.toContain(
       "if (isLocked.value || setupRequired.value) void router.replace('/')",
     )
-    expect(source).toContain('else loadUnlockedPhoneData()')
+  })
+
+  it('opens Space-triggered live activities on Home or the enabled lock screen', () => {
+    expect(source).toContain(
+      'openHomeRequested.value = event.data.openHome === true',
+    )
+    expect(source).toContain(
+      "if (isLocked.value) pendingUnlockRoute.value = '/'",
+    )
+    expect(source).toContain("void router.replace('/')")
   })
 
   it('requires the passcode again after a full device lock', () => {
@@ -100,7 +117,9 @@ describe('browser development preview contract', () => {
     expect(source).toContain("developmentParameters.has('browserPreview')")
     expect(source).toContain('import.meta.env.DEV ||')
     expect(source).toContain("'phone-stage--browser-preview': isBrowserPreview")
-    expect(source).toContain('return (availableScale * 0.94) / PHONE_BASE_SCALE')
+    expect(source).toContain(
+      'return (availableScale * 0.94) / PHONE_BASE_SCALE',
+    )
     expect(mainCss).toMatch(
       /\.phone-stage--browser-preview\s*\{[^}]*place-items:\s*center;[^}]*padding:\s*0;/s,
     )
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 41ea588..1eb36f7 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -259,6 +259,20 @@ button {
   transform: translateY(calc(100% - 190px));
   transform-origin: right bottom;
 }
+
+.phone-stage--live-activity .phone-resolution-wrapper--primary .phone-device {
+  pointer-events: none;
+  transform: translateY(
+    calc(100% - var(--phone-live-activity-peek-height, 145px))
+  );
+  transform-origin: right bottom;
+}
+.phone-stage--live-activity
+  .phone-device
+  > :not(.phone-screen):not(.phone-device__frame):not(.phone-dynamic-island),
+.phone-stage--live-activity .phone-screen > * {
+  visibility: hidden;
+}
 .phone-lift-enter-active {
   transition: opacity 0.52s linear;
 }
@@ -384,7 +398,7 @@ button {
   overflow: hidden;
   border: 1px solid rgb(255 255 255 / 16%);
   border-radius: 15px;
-  color: #0a84ff;
+  color: #a9abb2;
   background: rgb(47 47 51 / 98%);
   box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
   pointer-events: none;
@@ -672,6 +686,9 @@ button {
   transition: transform 280ms var(--sky-ease-out, ease-out);
   will-change: transform;
 }
+.phone-device--island-expanded .phone-notification {
+  top: 130px !important;
+}
 .phone-notification__icon {
   width: 38px;
   height: 38px;
@@ -795,78 +812,6 @@ button {
   cursor: pointer;
   pointer-events: auto;
 }
-.phone-dynamic-island {
-  position: absolute;
-  z-index: 98;
-  top: 12px;
-  left: 50%;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 300px;
-  min-height: 72px;
-  padding: 10px 12px 10px 16px;
-  border: 1px solid rgb(255 255 255 / 10%);
-  border-radius: 28px;
-  color: #fff;
-  background: #050505;
-  box-shadow: 0 8px 24px rgb(0 0 0 / 45%);
-  transform: translateX(-50%);
-}
-.phone-dynamic-island__caller {
-  min-width: 0;
-  flex: 1;
-}
-.phone-dynamic-island__caller span,
-.phone-dynamic-island__caller strong {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.phone-dynamic-island__caller span {
-  color: rgb(255 255 255 / 58%);
-  font-size: 11px;
-  line-height: 14px;
-}
-.phone-dynamic-island__caller strong {
-  margin-top: 2px;
-  font-size: 15px;
-  line-height: 18px;
-}
-.phone-dynamic-island__actions {
-  display: flex;
-  gap: 8px;
-}
-.phone-dynamic-island__actions .sky-button--icon-only {
-  width: 44px;
-  min-width: 44px;
-  height: 44px;
-}
-.phone-dynamic-island__actions svg {
-  width: 19px;
-  height: 19px;
-}
-.phone-dynamic-island__answer {
-  --sky-app-accent: #34c759;
-}
-.phone-dynamic-island-enter-active,
-.phone-dynamic-island-leave-active {
-  transition:
-    opacity 180ms ease,
-    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-.phone-dynamic-island-enter-from,
-.phone-dynamic-island-leave-to {
-  opacity: 0;
-  transform: translateX(-50%) scale(0.86);
-}
-@media (prefers-reduced-motion: reduce) {
-  .phone-dynamic-island-enter-active,
-  .phone-dynamic-island-leave-active {
-    transition: none;
-  }
-}
 .phone-home-indicator {
   position: absolute;
   z-index: 90;
diff --git a/frontend/src/companiesServiceLineCalls.contract.test.ts b/frontend/src/companiesServiceLineCalls.contract.test.ts
index b604bcc..c110c9f 100644
--- a/frontend/src/companiesServiceLineCalls.contract.test.ts
+++ b/frontend/src/companiesServiceLineCalls.contract.test.ts
@@ -14,6 +14,10 @@ const callsServer = readFileSync(
   new URL('../../sky_phone/source/server/calls.lua', import.meta.url),
   'utf8',
 ).replace(/\r\n/g, '\n')
+const phoneServer = readFileSync(
+  new URL('../../sky_phone/source/server/phone.lua', import.meta.url),
+  'utf8',
+).replace(/\r\n/g, '\n')
 const companiesStore = readFileSync(
   new URL('./stores/companies.ts', import.meta.url),
   'utf8',
@@ -85,3 +89,35 @@ describe('Companies outbound service-line call contract', () => {
     expect(startCompanyCall).not.toContain('data.callerNumber')
   })
 })
+
+describe('Companies background call availability contract', () => {
+  it('keeps call availability enabled after the phone UI closes', () => {
+    const closeDevice = sourceBlock(
+      phoneServer,
+      `Bridge.Callbacks.Register(${quote}sky_phone:device:close${quote}`,
+      `Bridge.Callbacks.Register(${quote}sky_phone:device:notification-open${quote}`,
+    )
+
+    expect(closeDevice).toContain('sessions[source] = nil')
+    expect(closeDevice).not.toContain(
+      'SkyPhoneCompanies.ClearCallAvailability(source)',
+    )
+  })
+
+  it('routes background calls only to an owned phone with the same registered SIM', () => {
+    const getCallTargets = sourceBlock(
+      companiesServer,
+      'function SkyPhoneCompanies.GetCallTargets(',
+      '\n\nlocal function profile_row(',
+    )
+
+    expect(getCallTargets).toContain('SkyPhone.LoadDevice(readiness.imei)')
+    expect(getCallTargets).toContain(
+      'SkyPhone.FindDeviceSlots(source, readiness.imei)',
+    )
+    expect(getCallTargets).toContain('device.sim_id == readiness.sim_id')
+    expect(getCallTargets).toContain('device.sim_type == "registered"')
+    expect(getCallTargets).toContain('device.registered_at ~= nil')
+    expect(getCallTargets).not.toContain('current_device(source, true)')
+  })
+})
diff --git a/frontend/src/components/PayphoneOverlay.vue b/frontend/src/components/PayphoneOverlay.vue
index eb1fbd3..fef7d10 100644
--- a/frontend/src/components/PayphoneOverlay.vue
+++ b/frontend/src/components/PayphoneOverlay.vue
@@ -3,6 +3,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 
 import payphoneFrame from '@/assets/img/payphone/american-payphone-frame.png'
 import { nuiCall } from '@/utils/nui'
+import { registerPhoneMediaElement } from '@/utils/phoneAudio'
 import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
 type PayphoneState =
@@ -70,7 +71,9 @@ const buttonSounds: HTMLAudioElement[] = []
 function prepareButtonSounds(): void {
   if (buttonSounds.length) return
   for (let index = 0; index < 4; index += 1) {
-    const sound = new Audio(`${import.meta.env.BASE_URL}sounds/button.mp3`)
+    const sound = registerPhoneMediaElement(
+      new Audio(`${import.meta.env.BASE_URL}sounds/button.mp3`),
+    )
     sound.preload = 'auto'
     sound.volume = 0.55
     buttonSounds.push(sound)
diff --git a/frontend/src/components/PhoneDynamicIsland.contract.test.ts b/frontend/src/components/PhoneDynamicIsland.contract.test.ts
index 7997f79..627f510 100644
--- a/frontend/src/components/PhoneDynamicIsland.contract.test.ts
+++ b/frontend/src/components/PhoneDynamicIsland.contract.test.ts
@@ -5,8 +5,15 @@ import { describe, expect, it } from 'vitest'
 const source = readFileSync(
   new URL('./PhoneDynamicIsland.vue', import.meta.url),
   'utf8',
+).replace(/\r\n/g, '\n')
+const appSource = readFileSync(
+  new URL('../App.vue', import.meta.url),
+  'utf8',
+).replace(/\r\n/g, '\n')
+const mainCss = readFileSync(
+  new URL('../assets/main.css', import.meta.url),
+  'utf8',
 )
-const appSource = readFileSync(new URL('../App.vue', import.meta.url), 'utf8')
 const recorderSource = readFileSync(
   new URL('./PhoneMemoRecorder.vue', import.meta.url),
   'utf8',
@@ -19,16 +26,23 @@ const clockSource = readFileSync(
   new URL('../views/apps/ClockApp.vue', import.meta.url),
   'utf8',
 )
+const serverMemosSource = readFileSync(
+  new URL('../../../sky_phone/source/server/memos.lua', import.meta.url),
+  'utf8',
+)
 
 describe('Phone Dynamic Island contract', () => {
   it('renders once at phone shell level instead of forcing calls into Phone', () => {
     expect(appSource).toContain(
       "import PhoneDynamicIsland from '@/components/PhoneDynamicIsland.vue'",
     )
-    expect(appSource).toContain('<PhoneDynamicIsland v-if="!setupRequired" />')
     expect(appSource).toContain(
-      'phone.isOpen || notifications.current || calls.activeCall',
+      "'phone-device--island-expanded': dynamicIslandExpanded",
     )
+    expect(appSource).toMatch(
+      /class="phone-device__frame"[\s\S]*?<PhoneDynamicIsland[\s\S]*?@expanded-change="dynamicIslandExpanded = \$event"[\s\S]*?@live-activity-change="dynamicIslandActivity = \$event"/,
+    )
+    expect(appSource).toContain('dynamicIslandActivity ||')
     expect(appSource).not.toContain(
       "window.setTimeout(() => void router.push('/apps/phone'), 0)",
     )
@@ -45,7 +59,44 @@ describe('Phone Dynamic Island contract', () => {
     expect(source).toContain('call.answeredAt ?? call.startedAt')
   })
 
+  it('hides an activity in its owning foreground app but restores it after closing', () => {
+    expect(source).toContain(
+      'if (!currentActivity || !phone.isOpen) return currentActivity',
+    )
+    expect(source).toContain("activeAppId.value === 'phone'")
+    expect(source).toContain(
+      "currentActivity === 'recording' && activeAppId.value === 'memos'",
+    )
+    expect(source).toContain("activeAppId.value === 'clock'")
+    expect(source).toContain(
+      "currentActivity === 'music' && activeAppId.value === 'music'",
+    )
+  })
+
+  it('shows only a compact frame and island for background live activities', () => {
+    expect(source).toContain("'live-activity-change': [activity:")
+    expect(source).toContain("emit('live-activity-change', nextActivity)")
+    expect(appSource).toContain(
+      "'phone-stage--live-activity':\n          !phone.isOpen && Boolean(dynamicIslandActivity || calls.activeCall)",
+    )
+    expect(mainCss).toMatch(
+      /\.phone-stage--live-activity[\s\S]*?pointer-events:\s*none;[\s\S]*?--phone-live-activity-peek-height/,
+    )
+    expect(mainCss).toMatch(
+      /\.phone-stage--live-activity[\s\S]*?> :not\(\.phone-screen\):not\(\.phone-device__frame\):not\(\.phone-dynamic-island\)[\s\S]*?\.phone-screen > \*[\s\S]*?visibility:\s*hidden;/,
+    )
+    expect(appSource).toContain("? '190px'")
+    expect(appSource).toContain("? '132px'")
+    expect(appSource).toContain(": '112px'")
+    expect(source).toContain(
+      "!phone.isOpen ||\n            activity.value === 'incoming-call' ||",
+    )
+  })
+
   it('connects music, recorder, timer, and stopwatch controls to their stores', () => {
+    expect(source).toContain(
+      "if (music.isPlaying && music.currentTrack) return 'music'",
+    )
     expect(source).toContain('@click.stop="music.previous()"')
     expect(source).toContain('@click.stop="music.toggle()"')
     expect(source).toContain('@click.stop="music.next()"')
@@ -53,9 +104,31 @@ describe('Phone Dynamic Island contract', () => {
     expect(source).toContain('clock.pauseTimer(Date.now())')
     expect(source).toContain('clock.pauseStopwatch(Date.now())')
     expect(source).toContain('clock.addLap(Date.now())')
+    expect(source).not.toContain('phone-dynamic-island__lap')
+    expect(source).toContain('phone-dynamic-island__stopwatch-meta')
+    expect(source).toContain('{{ stopwatchLapLabel }}')
+    expect(source).toContain('{{ stopwatchLapValue }}')
+    expect(source).toContain('{{ stopwatchTotalDisplay }}')
   })
 
-  it('keeps recorder state available across app changes', () => {
+  it('matches the reference music player and timer control layouts', () => {
+    expect(source).toContain('phone-dynamic-island__music-equalizer')
+    expect(source).toContain('phone-dynamic-island__progress-track')
+    expect(source).toContain('{{ musicElapsedLabel }}')
+    expect(source).toContain('{{ musicRemainingLabel }}')
+    expect(source).not.toContain('Airplay')
+    expect(source).toContain('<X aria-hidden="true" />')
+    expect(source).toMatch(
+      /\.phone-dynamic-island--timer\.phone-dynamic-island__copy|\.phone-dynamic-island--timer \.phone-dynamic-island__copy/,
+    )
+    expect(source).toContain(
+      '.phone-dynamic-island--music .phone-dynamic-island__actions--media',
+    )
+    expect(source).toContain('justify-content: center')
+    expect(source).toContain('gap: 34px')
+  })
+
+  it('keeps recorder state available across app changes and phone closes', () => {
     expect(recorderSource).toContain(
       "message.type === 'memo:recordStateRequest'",
     )
@@ -65,6 +138,15 @@ describe('Phone Dynamic Island contract', () => {
     expect(memosSource).not.toContain(
       "if (recordingActive.value) postRecorderCommand('memo:recordCancel')",
     )
+    expect(recorderSource).toContain('() => phone.device?.imei ?? null')
+    expect(recorderSource).not.toContain(
+      'if (!isOpen || deviceSessionChanged) cancelRecording()',
+    )
+    expect(recorderSource).toContain('deviceImei: finalDeviceImei')
+    expect(serverMemosSource).toContain('device_owner(src, data.deviceImei)')
+    expect(serverMemosSource).toContain(
+      'SkyPhone.FindDeviceSlots(source, imei)[1]',
+    )
   })
 
   it('opens both clock live activities on the correct clock tab', () => {
@@ -75,13 +157,68 @@ describe('Phone Dynamic Island contract', () => {
     )
   })
 
+  it('opens activities by tapping the island without a separate expand icon', () => {
+    expect(source).toContain('@click.stop="toggleExpanded"')
+    expect(source).toContain('@click.stop="openActivity"')
+    expect(source).not.toContain('Maximize2')
+    expect(source).not.toContain('phone-dynamic-island__open-icon')
+  })
+
+  it('collapses expanded activities on taps, swipes, and scrolling outside', () => {
+    expect(source).toContain('ref="islandElement"')
+    expect(source).toContain(
+      "document.addEventListener('pointerdown', onOutsidePointerDown, true)",
+    )
+    expect(source).toContain(
+      "document.addEventListener('scroll', collapseExpanded, true)",
+    )
+    expect(source).toContain('islandElement.value?.contains(event.target)')
+    expect(source).toContain('expanded.value = false')
+    expect(source).toContain(
+      "document.removeEventListener('pointerdown', onOutsidePointerDown, true)",
+    )
+    expect(source).toContain(
+      "document.removeEventListener('scroll', collapseExpanded, true)",
+    )
+  })
+
   it('animates state changes and moves popup notifications below expanded UI', () => {
     expect(source).toContain('<Transition name="phone-dynamic-island">')
     expect(source).toContain(
       '<Transition name="phone-dynamic-island-content" mode="out-in">',
     )
     expect(source).toContain(".phone-dynamic-island[data-expanded='true']")
-    expect(source).toContain('~ .phone-notification-provider')
+    expect(source).toContain("emit('expanded-change', false)")
+    expect(mainCss).toContain(
+      '.phone-device--island-expanded .phone-notification',
+    )
     expect(source).toContain('@media (prefers-reduced-motion: reduce)')
   })
+
+  it('renders below the top edge and above the physical camera frame', () => {
+    expect(source).toMatch(
+      /\.phone-dynamic-island\s*\{[^}]*z-index:\s*102;[^}]*top:\s*30px;/s,
+    )
+    expect(mainCss).not.toMatch(/\.phone-dynamic-island\s*\{/)
+  })
+
+  it('keeps compact and expanded islands close to the physical camera proportions', () => {
+    expect(source).toMatch(
+      /\.phone-dynamic-island\s*\{[^}]*width:\s*126px;[^}]*height:\s*38px;/s,
+    )
+    expect(source).toMatch(
+      /\.phone-dynamic-island\[data-expanded='true'\]\s*\{[^}]*width:\s*318px;[^}]*height:\s*74px;/s,
+    )
+    expect(source).toMatch(
+      /\.phone-dynamic-island--incoming-call\[data-expanded='true'\]\s*\{[^}]*height:\s*68px;/s,
+    )
+    expect(source).toMatch(
+      /\.phone-dynamic-island--music\[data-expanded='true'\]\s*\{[^}]*width:\s*316px;[^}]*height:\s*150px;/s,
+    )
+    expect(source).toMatch(
+      /\.phone-dynamic-island--stopwatch\[data-expanded='true'\]\s*\{[^}]*height:\s*70px;/s,
+    )
+    expect(source).toContain('box-sizing: border-box')
+    expect(source).toContain('padding: 8px 16px 8px 10px')
+  })
 })
diff --git a/frontend/src/components/PhoneDynamicIsland.vue b/frontend/src/components/PhoneDynamicIsland.vue
index 2293ab0..aa17e84 100644
--- a/frontend/src/components/PhoneDynamicIsland.vue
+++ b/frontend/src/components/PhoneDynamicIsland.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {
   Gauge,
-  Maximize2,
   Mic,
   Pause,
   Phone,
@@ -13,6 +12,7 @@ import {
   SkipForward,
   Square,
   Timer,
+  X,
 } from 'lucide-vue-next'
 import {
   computed,
@@ -28,31 +28,45 @@ import { useCallsStore } from '@/stores/calls'
 import { useClockStore } from '@/stores/clock'
 import { useMusicStore } from '@/stores/music'
 import { usePhoneStore } from '@/stores/phone'
+import type { DynamicIslandActivity } from '@/types/dynamicIsland'
 import type { MemoRecorderState } from '@/types/memos'
 import {
   elapsedMilliseconds,
   formatStopwatch,
   formatTimer,
   remainingMilliseconds,
-  timerProgressRatio,
 } from '@/utils/clock'
 import { formatPhoneNumber } from '@/utils/phone'
 import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
-type IslandActivity =
-  | 'call'
-  | 'incoming-call'
-  | 'music'
-  | 'recording'
-  | 'stopwatch'
-  | 'timer'
-
+const props = withDefaults(
+  defineProps<{
+    preview?: boolean
+    previewActivity?: DynamicIslandActivity
+    previewExpanded?: boolean
+    previewEyebrow?: string
+    previewProgress?: number
+    previewSubtitle?: string
+    previewTitle?: string
+    previewValue?: string
+  }>(),
+  {
+    preview: false,
+    previewExpanded: false,
+    previewProgress: 0,
+  },
+)
+const emit = defineEmits<{
+  'expanded-change': [expanded: boolean]
+  'live-activity-change': [activity: DynamicIslandActivity | null]
+}>()
 const router = useRouter()
 const calls = useCallsStore()
 const clock = useClockStore()
 const music = useMusicStore()
 const phone = usePhoneStore()
 const expanded = ref(false)
+const islandElement = ref<HTMLElement | null>(null)
 const now = ref(Date.now())
 const recorderState = ref<MemoRecorderState>({
   elapsedMs: 0,
@@ -62,6 +76,14 @@ const recorderState = ref<MemoRecorderState>({
 let collapseTimer: number | undefined
 let ticker: number | undefined
 
+const activeAppId = computed(() => {
+  const currentRoute = router.currentRoute.value
+  return currentRoute.name === 'app' &&
+    typeof currentRoute.params.appId === 'string'
+    ? currentRoute.params.appId
+    : ''
+})
+
 const recordingActive = computed(() =>
   ['paused', 'recording', 'starting', 'stopping', 'uploading'].includes(
     recorderState.value.state,
@@ -79,7 +101,7 @@ const timerActive = computed(
 const stopwatchActive = computed(
   () => clock.stopwatchStartedAt !== null || clock.stopwatchAccumulated > 0,
 )
-const activity = computed<IslandActivity | null>(() => {
+const liveActivity = computed<DynamicIslandActivity | null>(() => {
   const call = calls.activeCall
   if (call?.direction === 'incoming' && call.state === 'ringing') {
     return 'incoming-call'
@@ -88,9 +110,33 @@ const activity = computed<IslandActivity | null>(() => {
   if (recordingActive.value) return 'recording'
   if (timerActive.value) return 'timer'
   if (stopwatchActive.value) return 'stopwatch'
-  if (music.currentTrack) return 'music'
+  if (music.isPlaying && music.currentTrack) return 'music'
   return null
 })
+const runtimeActivity = computed<DynamicIslandActivity | null>(() => {
+  const currentActivity = liveActivity.value
+  if (!currentActivity || !phone.isOpen) return currentActivity
+  if (
+    (currentActivity === 'incoming-call' || currentActivity === 'call') &&
+    activeAppId.value === 'phone'
+  ) {
+    return null
+  }
+  if (currentActivity === 'recording' && activeAppId.value === 'memos') {
+    return null
+  }
+  if (
+    (currentActivity === 'timer' || currentActivity === 'stopwatch') &&
+    activeAppId.value === 'clock'
+  ) {
+    return null
+  }
+  if (currentActivity === 'music' && activeAppId.value === 'music') return null
+  return currentActivity
+})
+const activity = computed<DynamicIslandActivity | null>(() =>
+  props.preview ? (props.previewActivity ?? null) : runtimeActivity.value,
+)
 const activityKey = computed(() => {
   if (activity.value === 'incoming-call' || activity.value === 'call') {
     return `${activity.value}:${calls.activeCall?.id ?? ''}`
@@ -100,8 +146,15 @@ const activityKey = computed(() => {
   }
   return activity.value
 })
-const isExpanded = computed(
-  () => activity.value === 'incoming-call' || expanded.value,
+const isExpanded = computed(() =>
+  props.preview
+    ? props.previewExpanded
+    : Boolean(
+        activity.value &&
+          (!phone.isOpen ||
+            activity.value === 'incoming-call' ||
+            expanded.value),
+      ),
 )
 const callContact = computed(() => {
   const number = calls.activeCall?.otherNumber
@@ -112,10 +165,17 @@ const callContact = computed(() => {
 })
 const callName = computed(() => {
   const number = calls.activeCall?.otherNumber ?? ''
-  return callContact.value?.name ?? formatPhoneNumber(number)
+  return (
+    props.previewTitle ?? callContact.value?.name ?? formatPhoneNumber(number)
+  )
 })
 const callInitials = computed(() =>
-  (callContact.value?.name ?? calls.activeCall?.otherNumber ?? '')
+  (
+    props.previewTitle ??
+    callContact.value?.name ??
+    calls.activeCall?.otherNumber ??
+    ''
+  )
     .split(/\s+/)
     .map((part) => part.charAt(0).toUpperCase())
     .filter(Boolean)
@@ -128,6 +188,7 @@ const callDuration = computed(() => {
   return formatDuration(now.value - (call.answeredAt ?? call.startedAt))
 })
 const callStatus = computed(() => {
+  if (props.previewSubtitle !== undefined) return props.previewSubtitle
   const call = calls.activeCall
   if (!call) return ''
   if (call.state === 'connected') return callDuration.value
@@ -148,9 +209,6 @@ const timerValue = computed(() =>
     now.value,
   ),
 )
-const timerProgress = computed(() =>
-  timerProgressRatio(timerValue.value, clock.timerDuration),
-)
 const stopwatchValue = computed(() =>
   elapsedMilliseconds(
     clock.stopwatchAccumulated,
@@ -158,15 +216,44 @@ const stopwatchValue = computed(() =>
     now.value,
   ),
 )
+const stopwatchLapLabel = computed(() =>
+  props.preview
+    ? 'LAP 1'
+    : `${phone.t('Apps.clock.lap').toLocaleUpperCase(phone.lang)} ${clock.laps.length + 1}`,
+)
+const stopwatchLapValue = computed(() => {
+  if (props.preview) return '00:02'
+  const latestCompletedLap = clock.laps[0] ?? 0
+  return formatLapTime(stopwatchValue.value - latestCompletedLap)
+})
+const stopwatchTotalDisplay = computed(() => {
+  if (props.preview) return '00:11,48'
+  const decimalSeparator =
+    new Intl.NumberFormat(phone.lang)
+      .formatToParts(1.1)
+      .find((part) => part.type === 'decimal')?.value ?? '.'
+  return formatStopwatch(stopwatchValue.value).replace('.', decimalSeparator)
+})
 const musicProgress = computed(() =>
-  music.duration > 0
-    ? Math.max(0, Math.min(1, music.currentTime / music.duration))
-    : 0,
+  props.preview
+    ? props.previewProgress
+    : music.duration > 0
+      ? Math.max(0, Math.min(1, music.currentTime / music.duration))
+      : 0,
 )
 const progressStyle = computed<CSSProperties>(() => ({
   '--dynamic-island-progress': `${musicProgress.value * 100}%`,
 }))
+const musicElapsedLabel = computed(() =>
+  props.preview ? '1:20' : formatPlaybackTime(music.currentTime),
+)
+const musicRemainingLabel = computed(() =>
+  props.preview
+    ? '-2:15'
+    : `-${formatPlaybackTime(Math.max(0, music.duration - music.currentTime))}`,
+)
 const activityTitle = computed(() => {
+  if (props.previewTitle !== undefined) return props.previewTitle
   switch (activity.value) {
     case 'incoming-call':
       return phone.t('Apps.phone.incoming')
@@ -198,6 +285,7 @@ const recordingStatus = computed(() => {
   }
 })
 const compactValue = computed(() => {
+  if (props.previewValue !== undefined) return props.previewValue
   switch (activity.value) {
     case 'call':
       return callDuration.value || callStatus.value
@@ -213,13 +301,50 @@ const compactValue = computed(() => {
       return ''
   }
 })
-const visibleLevels = computed(() =>
-  recorderState.value.levels
-    .slice(-12)
-    .map((level) => Math.max(0.12, Math.min(1, Number(level) || 0))),
-)
+const visibleLevels = computed(() => {
+  const levels = props.preview
+    ? [0.24, 0.48, 0.82, 0.38, 0.64, 0.92, 0.56, 0.76, 0.34, 0.68, 0.44, 0.86]
+    : recorderState.value.levels.slice(-12)
+  return levels.map((level) => Math.max(0.12, Math.min(1, Number(level) || 0)))
+})
+const expandedEyebrow = computed(() => {
+  if (props.previewEyebrow !== undefined) return props.previewEyebrow
+  if (activity.value === 'incoming-call') return phone.t('Apps.phone.incoming')
+  if (activity.value === 'recording') return recordingStatus.value
+  if (activity.value === 'music') return phone.t('Apps.music.nowPlaying')
+  if (activity.value === 'timer') return phone.t('Apps.clock.tabs.timer')
+  if (activity.value === 'stopwatch') {
+    return phone.t('Apps.clock.tabs.stopwatch')
+  }
+  return phone.t('Apps.phone.connected')
+})
+const expandedTitle = computed(() => {
+  if (props.previewTitle !== undefined) return props.previewTitle
+  if (activity.value === 'call' || activity.value === 'incoming-call') {
+    return callName.value
+  }
+  if (activity.value === 'music') return music.currentTrack?.title ?? ''
+  if (activity.value === 'recording') {
+    return formatDuration(recorderState.value.elapsedMs)
+  }
+  if (activity.value === 'timer') return formatTimer(timerValue.value)
+  return formatStopwatch(stopwatchValue.value)
+})
+const expandedSubtitle = computed(() => {
+  if (props.previewSubtitle !== undefined) return props.previewSubtitle
+  if (activity.value === 'call' || activity.value === 'incoming-call') {
+    return callStatus.value
+  }
+  if (activity.value === 'music') return music.currentTrack?.artist ?? ''
+  if (activity.value === 'timer') return clock.timerNote
+  if (activity.value === 'recording') return recordingStatus.value
+  return phone.t(
+    clock.stopwatchStartedAt === null ? 'Common.start' : 'Common.stop',
+  )
+})
 
 watch(activityKey, (nextActivity) => {
+  if (props.preview) return
   window.clearTimeout(collapseTimer)
   if (!nextActivity) {
     expanded.value = false
@@ -233,6 +358,23 @@ watch(activityKey, (nextActivity) => {
   }
 })
 
+watch(
+  liveActivity,
+  (nextActivity) => {
+    if (!props.preview) emit('live-activity-change', nextActivity)
+  },
+  { immediate: true },
+)
+
+watch(
+  [isExpanded, activity],
+  ([nextExpanded, nextActivity]) => {
+    if (props.preview) return
+    emit('expanded-change', Boolean(nextActivity && nextExpanded))
+  },
+  { immediate: true },
+)
+
 function formatDuration(milliseconds: number): string {
   const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000))
   const hours = Math.floor(totalSeconds / 3600)
@@ -243,12 +385,41 @@ function formatDuration(milliseconds: number): string {
     : `${String(minutes).padStart(2, '0')}:${seconds}`
 }
 
+function formatPlaybackTime(seconds: number): string {
+  const safeSeconds = Math.max(0, Math.floor(seconds))
+  return `${Math.floor(safeSeconds / 60)}:${String(safeSeconds % 60).padStart(2, '0')}`
+}
+
+function formatLapTime(milliseconds: number): string {
+  const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000))
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = totalSeconds % 60
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
+}
+
 function toggleExpanded(): void {
+  if (props.preview) return
   if (activity.value === 'incoming-call') return
   window.clearTimeout(collapseTimer)
   expanded.value = !expanded.value
 }
 
+function collapseExpanded(): void {
+  if (!expanded.value) return
+  window.clearTimeout(collapseTimer)
+  expanded.value = false
+}
+
+function onOutsidePointerDown(event: PointerEvent): void {
+  if (
+    event.target instanceof Node &&
+    islandElement.value?.contains(event.target)
+  ) {
+    return
+  }
+  collapseExpanded()
+}
+
 function openActivity(): void {
   const currentActivity = activity.value
   if (!currentActivity) return
@@ -312,7 +483,10 @@ function onMessage(event: MessageEvent): void {
 }
 
 onMounted(() => {
+  if (props.preview) return
   window.addEventListener('message', onMessage)
+  document.addEventListener('pointerdown', onOutsidePointerDown, true)
+  document.addEventListener('scroll', collapseExpanded, true)
   ticker = window.setInterval(() => {
     now.value = Date.now()
   }, 250)
@@ -320,7 +494,13 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
+  if (!props.preview) {
+    emit('expanded-change', false)
+    emit('live-activity-change', null)
+  }
   window.removeEventListener('message', onMessage)
+  document.removeEventListener('pointerdown', onOutsidePointerDown, true)
+  document.removeEventListener('scroll', collapseExpanded, true)
   window.clearInterval(ticker)
   window.clearTimeout(collapseTimer)
 })
@@ -330,12 +510,19 @@ onBeforeUnmount(() => {
   <Transition name="phone-dynamic-island">
     <section
       v-if="activity"
+      ref="islandElement"
       class="phone-dynamic-island"
       :class="`phone-dynamic-island--${activity}`"
       :data-expanded="isExpanded"
+      :data-preview="props.preview ? 'true' : undefined"
       :aria-label="activityTitle"
-      :role="activity === 'incoming-call' ? 'alert' : undefined"
-      :aria-atomic="activity === 'incoming-call' ? 'true' : undefined"
+      :aria-hidden="props.preview || undefined"
+      :role="
+        !props.preview && activity === 'incoming-call' ? 'alert' : undefined
+      "
+      :aria-atomic="
+        !props.preview && activity === 'incoming-call' ? 'true' : undefined
+      "
     >
       <Transition name="phone-dynamic-island-content" mode="out-in">
         <button
@@ -367,16 +554,16 @@ onBeforeUnmount(() => {
             aria-hidden="true"
           />
           <img
-            v-else-if="music.currentTrack?.artwork"
+            v-else-if="music.currentTrack?.artwork && !props.preview"
             class="phone-dynamic-island__compact-artwork"
             :src="music.currentTrack.artwork"
             alt=""
           />
-          <Play
+          <span
             v-else
-            class="phone-dynamic-island__compact-icon phone-dynamic-island__compact-icon--music"
+            class="phone-dynamic-island__compact-artwork phone-dynamic-island__compact-artwork--fallback"
             aria-hidden="true"
-          />
+          ></span>
           <span class="phone-dynamic-island__compact-value">{{
             compactValue
           }}</span>
@@ -423,7 +610,11 @@ onBeforeUnmount(() => {
                 >{{ callInitials }}</span
               >
               <img
-                v-else-if="activity === 'music' && music.currentTrack?.artwork"
+                v-else-if="
+                  activity === 'music' &&
+                  music.currentTrack?.artwork &&
+                  !props.preview
+                "
                 :src="music.currentTrack.artwork"
                 alt=""
               />
@@ -445,58 +636,36 @@ onBeforeUnmount(() => {
                 <Gauge v-else />
               </span>
             </span>
-            <span class="phone-dynamic-island__copy">
+            <span
+              v-if="activity === 'stopwatch'"
+              class="phone-dynamic-island__stopwatch-copy"
+            >
+              <span class="phone-dynamic-island__stopwatch-meta">
+                <span>{{ stopwatchLapLabel }}</span>
+                <strong>{{ stopwatchLapValue }}</strong>
+              </span>
+              <strong class="phone-dynamic-island__stopwatch-total">
+                {{ stopwatchTotalDisplay }}
+              </strong>
+            </span>
+            <span v-else class="phone-dynamic-island__copy">
               <span class="phone-dynamic-island__eyebrow">
-                {{
-                  activity === 'incoming-call'
-                    ? phone.t('Apps.phone.incoming')
-                    : activity === 'recording'
-                      ? recordingStatus
-                      : activity === 'music'
-                        ? phone.t('Apps.music.nowPlaying')
-                        : activity === 'timer'
-                          ? phone.t('Apps.clock.tabs.timer')
-                          : activity === 'stopwatch'
-                            ? phone.t('Apps.clock.tabs.stopwatch')
-                            : phone.t('Apps.phone.connected')
-                }}
+                {{ expandedEyebrow }}
               </span>
               <strong class="phone-dynamic-island__title">
-                {{
-                  activity === 'call' || activity === 'incoming-call'
-                    ? callName
-                    : activity === 'music'
-                      ? music.currentTrack?.title
-                      : activity === 'recording'
-                        ? formatDuration(recorderState.elapsedMs)
-                        : activity === 'timer'
-                          ? formatTimer(timerValue)
-                          : formatStopwatch(stopwatchValue)
-                }}
+                {{ expandedTitle }}
               </strong>
               <span class="phone-dynamic-island__subtitle">
-                {{
-                  activity === 'call' || activity === 'incoming-call'
-                    ? callStatus
-                    : activity === 'music'
-                      ? music.currentTrack?.artist
-                      : activity === 'timer'
-                        ? clock.timerNote
-                        : activity === 'recording'
-                          ? recordingStatus
-                          : phone.t(
-                              clock.stopwatchStartedAt === null
-                                ? 'Common.start'
-                                : 'Common.stop',
-                            )
-                }}
+                {{ expandedSubtitle }}
               </span>
             </span>
-            <Maximize2
-              v-if="activity !== 'incoming-call'"
-              class="phone-dynamic-island__open-icon"
+            <span
+              v-if="activity === 'music'"
+              class="phone-dynamic-island__music-equalizer"
               aria-hidden="true"
-            />
+            >
+              <i></i><i></i><i></i><i></i>
+            </span>
           </button>
 
           <div
@@ -515,15 +684,11 @@ onBeforeUnmount(() => {
             class="phone-dynamic-island__progress"
             :style="progressStyle"
             aria-hidden="true"
-          ></div>
-          <div
-            v-else-if="activity === 'timer'"
-            class="phone-dynamic-island__progress phone-dynamic-island__progress--timer"
-            :style="{
-              '--dynamic-island-progress': `${timerProgress * 100}%`,
-            }"
-            aria-hidden="true"
-          ></div>
+          >
+            <span>{{ musicElapsedLabel }}</span>
+            <i class="phone-dynamic-island__progress-track"></i>
+            <span>{{ musicRemainingLabel }}</span>
+          </div>
 
           <div
             v-if="activity === 'incoming-call'"
@@ -532,18 +697,18 @@ onBeforeUnmount(() => {
             <button
               type="button"
               class="phone-dynamic-island__call-action phone-dynamic-island__call-action--decline"
+              :aria-label="phone.t('Apps.phone.decline')"
               @click.stop="endCall"
             >
               <PhoneOff aria-hidden="true" />
-              <span>{{ phone.t('Apps.phone.decline') }}</span>
             </button>
             <button
               type="button"
               class="phone-dynamic-island__call-action phone-dynamic-island__call-action--answer"
+              :aria-label="phone.t('Apps.phone.answer')"
               @click.stop="calls.answer()"
             >
               <Phone aria-hidden="true" />
-              <span>{{ phone.t('Apps.phone.answer') }}</span>
             </button>
           </div>
           <div
@@ -587,7 +752,10 @@ onBeforeUnmount(() => {
               "
               @click.stop="music.toggle()"
             >
-              <Pause v-if="music.isPlaying" aria-hidden="true" />
+              <Pause
+                v-if="props.preview || music.isPlaying"
+                aria-hidden="true"
+              />
               <Play v-else aria-hidden="true" />
             </button>
             <button
@@ -606,7 +774,10 @@ onBeforeUnmount(() => {
             <button
               type="button"
               class="phone-dynamic-island__action"
-              :disabled="!['paused', 'recording'].includes(recorderState.state)"
+              :disabled="
+                !props.preview &&
+                !['paused', 'recording'].includes(recorderState.state)
+              "
               :aria-label="
                 phone.t(
                   recorderState.state === 'paused'
@@ -625,7 +796,10 @@ onBeforeUnmount(() => {
             <button
               type="button"
               class="phone-dynamic-island__action phone-dynamic-island__action--recording"
-              :disabled="!['paused', 'recording'].includes(recorderState.state)"
+              :disabled="
+                !props.preview &&
+                !['paused', 'recording'].includes(recorderState.state)
+              "
               :aria-label="phone.t('Apps.memos.stop')"
               @click.stop="postRecorderCommand('memo:recordStop')"
             >
@@ -642,7 +816,7 @@ onBeforeUnmount(() => {
               :aria-label="phone.t('Common.reset')"
               @click.stop="clock.resetTimer()"
             >
-              <RotateCcw aria-hidden="true" />
+              <X aria-hidden="true" />
             </button>
             <button
               type="button"
@@ -656,7 +830,10 @@ onBeforeUnmount(() => {
               "
               @click.stop="toggleTimer"
             >
-              <Play v-if="clock.timerStartedAt === null" aria-hidden="true" />
+              <Play
+                v-if="!props.preview && clock.timerStartedAt === null"
+                aria-hidden="true"
+              />
               <Pause v-else aria-hidden="true" />
             </button>
           </div>
@@ -677,11 +854,7 @@ onBeforeUnmount(() => {
                   : clock.addLap(Date.now())
               "
             >
-              <RotateCcw
-                v-if="clock.stopwatchStartedAt === null"
-                aria-hidden="true"
-              />
-              <span v-else class="phone-dynamic-island__lap">+1</span>
+              <RotateCcw aria-hidden="true" />
             </button>
             <button
               type="button"
@@ -696,7 +869,7 @@ onBeforeUnmount(() => {
               @click.stop="toggleStopwatch"
             >
               <Play
-                v-if="clock.stopwatchStartedAt === null"
+                v-if="!props.preview && clock.stopwatchStartedAt === null"
                 aria-hidden="true"
               />
               <Pause v-else aria-hidden="true" />
@@ -708,25 +881,17 @@ onBeforeUnmount(() => {
   </Transition>
 </template>
 
-<style>
-.phone-dynamic-island[data-expanded='true']
-  ~ .phone-notification-provider
-  .phone-notification {
-  top: 130px !important;
-}
-</style>
-
 <style scoped>
 .phone-dynamic-island {
   position: absolute;
-  z-index: 99;
-  top: 6px;
+  z-index: 102;
+  top: 30px;
   left: 50%;
-  width: 132px;
+  width: 126px;
   max-width: calc(100% - 24px);
-  height: 44px;
+  height: 38px;
   overflow: hidden;
-  border-radius: 24px;
+  border-radius: 999px;
   color: #fff;
   background: #000;
   box-shadow: 0 5px 18px rgb(0 0 0 / 22%);
@@ -739,15 +904,57 @@ onBeforeUnmount(() => {
     box-shadow 360ms ease;
 }
 
+.phone-dynamic-island--call:not([data-expanded='true']) {
+  width: 138px;
+}
+
+.phone-dynamic-island--music:not([data-expanded='true']) {
+  width: 172px;
+}
+
+.phone-dynamic-island--recording:not([data-expanded='true']) {
+  width: 148px;
+}
+
+.phone-dynamic-island--timer:not([data-expanded='true']) {
+  width: 144px;
+}
+
+.phone-dynamic-island--stopwatch:not([data-expanded='true']) {
+  width: 156px;
+}
+
+.phone-dynamic-island[data-preview='true'] {
+  pointer-events: none;
+}
+
 .phone-dynamic-island[data-expanded='true'] {
-  width: 356px;
-  height: 118px;
-  border-radius: 30px;
+  width: 318px;
+  height: 74px;
+  border-radius: 999px;
   box-shadow: 0 12px 32px rgb(0 0 0 / 32%);
 }
 
 .phone-dynamic-island--incoming-call[data-expanded='true'] {
-  height: 124px;
+  height: 68px;
+}
+
+.phone-dynamic-island--music[data-expanded='true'] {
+  width: 316px;
+  height: 150px;
+  border-radius: 32px;
+}
+
+.phone-dynamic-island--recording[data-expanded='true'] {
+  height: 92px;
+}
+
+.phone-dynamic-island--timer[data-expanded='true'] {
+  height: 70px;
+}
+
+.phone-dynamic-island--stopwatch[data-expanded='true'] {
+  height: 70px;
 }
 
 .phone-dynamic-island__compact,
@@ -764,16 +971,16 @@ onBeforeUnmount(() => {
 .phone-dynamic-island__compact {
   display: flex;
   width: 100%;
-  height: 44px;
-  padding: 0 10px;
+  height: 38px;
+  padding: 0 9px;
   align-items: center;
   gap: 7px;
   background: transparent;
 }
 
 .phone-dynamic-island__compact-icon {
-  width: 17px;
-  height: 17px;
+  width: 16px;
+  height: 16px;
   flex: 0 0 auto;
   stroke-width: 2.4;
 }
@@ -795,18 +1002,23 @@ onBeforeUnmount(() => {
 }
 
 .phone-dynamic-island__compact-artwork {
-  width: 24px;
-  height: 24px;
+  width: 22px;
+  height: 22px;
   flex: 0 0 auto;
   border-radius: 7px;
   object-fit: cover;
 }
 
+.phone-dynamic-island__compact-artwork--fallback,
+.phone-dynamic-island__symbol--music {
+  background: linear-gradient(180deg, #ff9f43 0%, #e6538d 52%, #8b5cf6 100%);
+}
+
 .phone-dynamic-island__compact-value {
   min-width: 0;
   overflow: hidden;
   flex: 1 1 auto;
-  font-size: 12px;
+  font-size: 11px;
   font-variant-numeric: tabular-nums;
   font-weight: 650;
   letter-spacing: -0.15px;
@@ -859,13 +1071,53 @@ onBeforeUnmount(() => {
 .phone-dynamic-island__expanded {
   position: relative;
   display: grid;
+  box-sizing: border-box;
   height: 100%;
-  padding: 10px 11px;
+  padding: 8px 10px;
   grid-template-columns: minmax(0, 1fr) auto;
   grid-template-rows: minmax(0, 1fr) auto;
   column-gap: 10px;
 }
 
+.phone-dynamic-island--music .phone-dynamic-island__expanded {
+  padding: 10px 12px;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: 48px 18px minmax(0, 1fr);
+  row-gap: 4px;
+}
+
+.phone-dynamic-island--music .phone-dynamic-island__summary {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.phone-dynamic-island--timer .phone-dynamic-island__expanded,
+.phone-dynamic-island--stopwatch .phone-dynamic-island__expanded {
+  padding: 8px 16px 8px 10px;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-rows: 1fr;
+  column-gap: 8px;
+}
+
+.phone-dynamic-island--timer .phone-dynamic-island__summary,
+.phone-dynamic-island--stopwatch .phone-dynamic-island__summary {
+  justify-content: flex-end;
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.phone-dynamic-island--timer .phone-dynamic-island__leading,
+.phone-dynamic-island--stopwatch .phone-dynamic-island__leading {
+  display: none;
+}
+
+.phone-dynamic-island--timer .phone-dynamic-island__copy {
+  align-items: baseline;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 7px;
+}
+
 .phone-dynamic-island__summary {
   display: flex;
   min-width: 0;
@@ -886,6 +1138,12 @@ onBeforeUnmount(() => {
   border-radius: 14px;
 }
 
+.phone-dynamic-island--music .phone-dynamic-island__leading,
+.phone-dynamic-island--music .phone-dynamic-island__leading img,
+.phone-dynamic-island--music .phone-dynamic-island__symbol {
+  border-radius: 11px;
+}
+
 .phone-dynamic-island__leading img {
   display: block;
   object-fit: cover;
@@ -910,8 +1168,11 @@ onBeforeUnmount(() => {
 }
 
 .phone-dynamic-island__symbol--music {
-  color: #e6bbff;
-  background: #3d184d;
+  color: transparent;
+}
+
+.phone-dynamic-island__symbol--music svg {
+  display: none;
 }
 
 .phone-dynamic-island__symbol--recording {
@@ -956,7 +1217,7 @@ onBeforeUnmount(() => {
 }
 
 .phone-dynamic-island--music .phone-dynamic-island__eyebrow {
-  color: #d28cff;
+  display: none;
 }
 
 .phone-dynamic-island__title,
@@ -966,6 +1227,101 @@ onBeforeUnmount(() => {
   white-space: nowrap;
 }
 
+.phone-dynamic-island--timer .phone-dynamic-island__eyebrow,
+.phone-dynamic-island--stopwatch .phone-dynamic-island__eyebrow {
+  color: #ffad33;
+  font-size: 10px;
+  line-height: 1;
+}
+
+.phone-dynamic-island--timer .phone-dynamic-island__title,
+.phone-dynamic-island--stopwatch .phone-dynamic-island__title {
+  color: #ffb340;
+  font-size: 27px;
+  font-weight: 450;
+  letter-spacing: -1.2px;
+  line-height: 1;
+}
+
+.phone-dynamic-island--timer .phone-dynamic-island__subtitle,
+.phone-dynamic-island--stopwatch .phone-dynamic-island__subtitle {
+  display: none;
+}
+
+.phone-dynamic-island--stopwatch .phone-dynamic-island__title {
+  font-size: 22px;
+  letter-spacing: -0.8px;
+}
+
+.phone-dynamic-island__stopwatch-copy {
+  display: flex;
+  min-width: 0;
+  align-items: flex-end;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1px;
+  font-variant-numeric: tabular-nums;
+}
+
+.phone-dynamic-island__stopwatch-meta {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 8px;
+  color: #62310e;
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: 0.3px;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.phone-dynamic-island__stopwatch-meta strong {
+  color: #ff9f43;
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.phone-dynamic-island__stopwatch-total {
+  color: #ff9f43;
+  font-size: 31px;
+  font-weight: 350;
+  letter-spacing: -1.4px;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.phone-dynamic-island__music-equalizer {
+  display: flex;
+  height: 24px;
+  margin-left: auto;
+  align-items: center;
+  gap: 2px;
+  color: #d28cff;
+}
+
+.phone-dynamic-island__music-equalizer i {
+  width: 2px;
+  border-radius: 2px;
+  background: currentcolor;
+}
+
+.phone-dynamic-island__music-equalizer i:nth-child(1) {
+  height: 10px;
+}
+
+.phone-dynamic-island__music-equalizer i:nth-child(2) {
+  height: 18px;
+}
+
+.phone-dynamic-island__music-equalizer i:nth-child(3) {
+  height: 14px;
+}
+
+.phone-dynamic-island__music-equalizer i:nth-child(4) {
+  height: 8px;
+}
+
 .phone-dynamic-island__title {
   font-size: 14px;
   font-variant-numeric: tabular-nums;
@@ -981,13 +1337,6 @@ onBeforeUnmount(() => {
   line-height: 13px;
 }
 
-.phone-dynamic-island__open-icon {
-  width: 13px;
-  height: 13px;
-  margin-left: auto;
-  color: #71717a;
-}
-
 .phone-dynamic-island__waveform {
   position: absolute;
   right: 118px;
@@ -1010,30 +1359,35 @@ onBeforeUnmount(() => {
 }
 
 .phone-dynamic-island__progress {
-  position: absolute;
-  right: 12px;
-  bottom: 10px;
-  left: 12px;
-  height: 2px;
-  overflow: hidden;
-  border-radius: 2px;
-  background: #27272a;
+  display: grid;
+  align-items: center;
+  gap: 6px;
+  grid-column: 1;
+  grid-row: 2;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  color: #8e8e93;
+  font-size: 9px;
+  font-variant-numeric: tabular-nums;
 }
 
-.phone-dynamic-island__progress::after {
+.phone-dynamic-island__progress-track {
+  position: relative;
+  height: 3px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #343438;
+}
+
+.phone-dynamic-island__progress-track::after {
   display: block;
   width: var(--dynamic-island-progress);
   height: 100%;
   border-radius: inherit;
-  background: #bf5af2;
+  background: #a1a1aa;
   content: '';
   transition: width 250ms linear;
 }
 
-.phone-dynamic-island__progress--timer::after {
-  background: #ff9f0a;
-}
-
 .phone-dynamic-island__actions {
   display: flex;
   min-width: 98px;
@@ -1049,11 +1403,56 @@ onBeforeUnmount(() => {
   gap: 5px;
 }
 
+.phone-dynamic-island--music .phone-dynamic-island__actions--media {
+  min-width: 0;
+  justify-content: center;
+  gap: 34px;
+  grid-column: 1;
+  grid-row: 3;
+}
+
+.phone-dynamic-island--music .phone-dynamic-island__action {
+  color: #fff;
+  background: transparent;
+}
+
+.phone-dynamic-island--music .phone-dynamic-island__action svg {
+  width: 22px;
+  height: 22px;
+}
+
+.phone-dynamic-island--music .phone-dynamic-island__action--primary svg {
+  width: 26px;
+  height: 26px;
+}
+
 .phone-dynamic-island__actions--incoming {
-  min-width: 126px;
+  min-width: 98px;
   gap: 10px;
 }
 
+.phone-dynamic-island--timer .phone-dynamic-island__actions,
+.phone-dynamic-island--stopwatch .phone-dynamic-island__actions {
+  min-width: 94px;
+  justify-content: flex-start;
+  gap: 6px;
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.phone-dynamic-island--timer .phone-dynamic-island__action,
+.phone-dynamic-island--stopwatch .phone-dynamic-island__action {
+  width: 44px;
+  height: 44px;
+}
+
+.phone-dynamic-island--timer .phone-dynamic-island__action--timer,
+.phone-dynamic-island--stopwatch .phone-dynamic-island__action--timer {
+  order: -1;
+  color: #ff9f0a;
+  background: #4a2d0b;
+}
+
 .phone-dynamic-island__action {
   display: grid;
   width: 44px;
@@ -1098,15 +1497,13 @@ onBeforeUnmount(() => {
 }
 
 .phone-dynamic-island__call-action {
-  display: flex;
-  width: 58px;
-  min-height: 64px;
-  padding: 4px 0 0;
-  align-items: center;
-  flex-direction: column;
-  gap: 4px;
+  display: grid;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  place-items: center;
+  border-radius: 50%;
   background: transparent;
-  font-size: 9px;
 }
 
 .phone-dynamic-island__call-action svg {
@@ -1124,11 +1521,6 @@ onBeforeUnmount(() => {
   background: #30d158;
 }
 
-.phone-dynamic-island__lap {
-  font-size: 13px;
-  font-weight: 750;
-}
-
 .phone-dynamic-island-enter-active,
 .phone-dynamic-island-leave-active {
   transition:
diff --git a/frontend/src/components/PhoneMemoRecorder.vue b/frontend/src/components/PhoneMemoRecorder.vue
index 67bb605..fd50ad2 100644
--- a/frontend/src/components/PhoneMemoRecorder.vue
+++ b/frontend/src/components/PhoneMemoRecorder.vue
@@ -54,6 +54,7 @@ let metadata: MemoRecordingMetadata = { note: '', pinned: false, title: '' }
 let currentState: MemoRecorderStateName = 'idle'
 let currentElapsedMs = 0
 let currentCorrelationId = ''
+let recordingDeviceImei = ''
 let removeRecorderErrorListener: (() => void) | null = null
 
 function postRecorderState(state: MemoRecorderStateName, error?: string): void {
@@ -153,6 +154,7 @@ function resetRecordingData(): void {
   pausedStartedAt = 0
   totalPausedMs = 0
   currentElapsedMs = 0
+  recordingDeviceImei = ''
   liveLevels = Array(LIVE_LEVEL_SAMPLES).fill(0.08)
 }
 
@@ -189,7 +191,8 @@ function failRecording(error: string, generation = recordingGeneration): void {
 }
 
 async function startRecording(data: Record<string, unknown>): Promise<void> {
-  if (!phone.isOpen) {
+  const deviceImei = phone.device?.imei
+  if (!phone.isOpen || !deviceImei) {
     console.error('[Memos] Cannot start a recording while the phone is closed.')
     return
   }
@@ -217,6 +220,7 @@ async function startRecording(data: Record<string, unknown>): Promise<void> {
   metadata = { note: '', pinned: false, title: '' }
   updateMetadata(data)
   resetRecordingData()
+  recordingDeviceImei = deviceImei
   postRecorderState('starting')
   try {
     const acquiredStream = await navigator.mediaDevices.getUserMedia({
@@ -340,6 +344,7 @@ async function stopRecording(data: Record<string, unknown>): Promise<void> {
     if (generation !== recordingGeneration) return
     const waveform = compressedWaveform()
     const finalMetadata = { ...metadata }
+    const finalDeviceImei = recordingDeviceImei
     const exceededSizeLimit = recordingTooLarge
     cleanupRecorder(false)
     resetRecordingData()
@@ -355,6 +360,7 @@ async function stopRecording(data: Record<string, unknown>): Promise<void> {
     liveLevels = waveform.slice(-LIVE_LEVEL_SAMPLES)
     const uploadData = {
       correlationId,
+      deviceImei: finalDeviceImei,
       durationMs,
       mimeType,
       note: finalMetadata.note,
@@ -569,18 +575,9 @@ function onMessage(event: MessageEvent): void {
 onMounted(() => window.addEventListener('message', onMessage))
 
 watch(
-  () =>
-    [
-      phone.isOpen,
-      phone.device?.imei ?? null,
-      phone.deviceSessionToken,
-    ] as const,
-  ([isOpen, imei, sessionToken], previous) => {
-    const deviceSessionChanged =
-      previous !== undefined &&
-      previous[0] &&
-      (previous[1] !== imei || previous[2] !== sessionToken)
-    if (!isOpen || deviceSessionChanged) cancelRecording()
+  () => phone.device?.imei ?? null,
+  (imei, previousImei) => {
+    if (previousImei && imei !== previousImei) cancelRecording()
   },
 )
 
diff --git a/frontend/src/features/games/memory/audio.ts b/frontend/src/features/games/memory/audio.ts
index 70a1e50..a54d6aa 100644
--- a/frontend/src/features/games/memory/audio.ts
+++ b/frontend/src/features/games/memory/audio.ts
@@ -1,3 +1,5 @@
+import { getPhoneOutputVolume } from '@/utils/phoneAudio'
+
 export type MemorySound = 'flip' | 'match' | 'mismatch' | 'win'
 
 type Tone = {
@@ -46,7 +48,10 @@ export function playMemorySound(sound: MemorySound, enabled: boolean): void {
     oscillator.type = tone.type
     oscillator.frequency.setValueAtTime(tone.frequency, start)
     gain.gain.setValueAtTime(0.0001, start)
-    gain.gain.exponentialRampToValueAtTime(tone.volume, start + 0.012)
+    gain.gain.exponentialRampToValueAtTime(
+      Math.max(0.0001, tone.volume * getPhoneOutputVolume()),
+      start + 0.012,
+    )
     gain.gain.exponentialRampToValueAtTime(0.0001, end)
     oscillator.connect(gain)
     gain.connect(audioContext.destination)
diff --git a/frontend/src/features/games/minesweeper/audio.ts b/frontend/src/features/games/minesweeper/audio.ts
index 46b3dce..9726cfd 100644
--- a/frontend/src/features/games/minesweeper/audio.ts
+++ b/frontend/src/features/games/minesweeper/audio.ts
@@ -1,3 +1,5 @@
+import { registerPhoneMediaElement } from '@/utils/phoneAudio'
+
 import flagUrl from '@/assets/audio/minesweeper/flag.wav?url'
 import clearUrl from '@/assets/audio/minesweeper/clear.wav?url'
 import mineUrl from '@/assets/audio/minesweeper/mine.wav?url'
@@ -28,7 +30,7 @@ function getPlayers(sound: MinesweeperSound): HTMLAudioElement[] {
   if (existing) return existing
 
   const players = Array.from({ length: 3 }, () => {
-    const player = new Audio(soundUrls[sound])
+    const player = registerPhoneMediaElement(new Audio(soundUrls[sound]))
     player.preload = 'auto'
     player.volume = 0.82
     return player
diff --git a/frontend/src/features/games/neon-drop/audio.ts b/frontend/src/features/games/neon-drop/audio.ts
index ffc132f..c3cf322 100644
--- a/frontend/src/features/games/neon-drop/audio.ts
+++ b/frontend/src/features/games/neon-drop/audio.ts
@@ -1,3 +1,5 @@
+import { getPhoneOutputVolume } from '@/utils/phoneAudio'
+
 export type NeonDropSound =
   | 'clear'
   | 'drop'
@@ -48,7 +50,10 @@ function playSequence(sound: NeonDropSound): void {
     oscillator.type = type
     oscillator.frequency.setValueAtTime(frequency, start + delay)
     gain.gain.setValueAtTime(0.0001, start + delay)
-    gain.gain.exponentialRampToValueAtTime(0.12, start + delay + 0.008)
+    gain.gain.exponentialRampToValueAtTime(
+      Math.max(0.0001, 0.12 * getPhoneOutputVolume()),
+      start + delay + 0.008,
+    )
     gain.gain.exponentialRampToValueAtTime(0.0001, start + delay + duration)
     oscillator.connect(gain)
     gain.connect(context.destination)
diff --git a/frontend/src/features/games/number-merge/audio.ts b/frontend/src/features/games/number-merge/audio.ts
index 23ab2f1..ca89ba3 100644
--- a/frontend/src/features/games/number-merge/audio.ts
+++ b/frontend/src/features/games/number-merge/audio.ts
@@ -1,3 +1,5 @@
+import { registerPhoneMediaElement } from '@/utils/phoneAudio'
+
 import gameOverUrl from '@/assets/audio/number-merge/game-over.wav?url'
 import mergeUrl from '@/assets/audio/number-merge/merge.wav?url'
 import moveUrl from '@/assets/audio/number-merge/move.wav?url'
@@ -18,7 +20,7 @@ function getPlayers(sound: NumberMergeSound): HTMLAudioElement[] {
   if (existing) return existing
 
   const players = Array.from({ length: 3 }, () => {
-    const player = new Audio(soundUrls[sound])
+    const player = registerPhoneMediaElement(new Audio(soundUrls[sound]))
     player.preload = 'auto'
     player.volume = 0.82
     return player
diff --git a/frontend/src/features/games/sky-flappy/audio.ts b/frontend/src/features/games/sky-flappy/audio.ts
index a8af227..40cb679 100644
--- a/frontend/src/features/games/sky-flappy/audio.ts
+++ b/frontend/src/features/games/sky-flappy/audio.ts
@@ -1,3 +1,5 @@
+import { registerPhoneMediaElement } from '@/utils/phoneAudio'
+
 import crashUrl from '@/assets/audio/sky-flappy/crash.wav?url'
 import flapUrl from '@/assets/audio/sky-flappy/flap.wav?url'
 import pointUrl from '@/assets/audio/sky-flappy/point.wav?url'
@@ -11,7 +13,7 @@ export function playSkyFlappySound(sound: SkyFlappySound, enabled: boolean): voi
   let players = pools.get(sound)
   if (!players) {
     players = Array.from({ length: 3 }, () => {
-      const player = new Audio(urls[sound])
+      const player = registerPhoneMediaElement(new Audio(urls[sound]))
       player.preload = 'auto'
       player.volume = 0.84
       return player
diff --git a/frontend/src/features/games/tower-stack/audio.ts b/frontend/src/features/games/tower-stack/audio.ts
index 5c9374f..d2c6e42 100644
--- a/frontend/src/features/games/tower-stack/audio.ts
+++ b/frontend/src/features/games/tower-stack/audio.ts
@@ -1,3 +1,5 @@
+import { registerPhoneMediaElement } from '@/utils/phoneAudio'
+
 import fallUrl from '@/assets/audio/tower-stack/fall.wav?url'
 import hitUrl from '@/assets/audio/tower-stack/hit.wav?url'
 import perfectUrl from '@/assets/audio/tower-stack/perfect.wav?url'
@@ -18,7 +20,7 @@ function getPlayers(sound: TowerStackSound): HTMLAudioElement[] {
   if (existing) return existing
 
   const players = Array.from({ length: 3 }, () => {
-    const player = new Audio(soundUrls[sound])
+    const player = registerPhoneMediaElement(new Audio(soundUrls[sound]))
     player.preload = 'auto'
     player.volume = 0.84
     return player
diff --git a/frontend/src/phoneAudio.contract.test.ts b/frontend/src/phoneAudio.contract.test.ts
new file mode 100644
index 0000000..f5ea468
--- /dev/null
+++ b/frontend/src/phoneAudio.contract.test.ts
@@ -0,0 +1,37 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const appSource = readFileSync(new URL('./App.vue', import.meta.url), 'utf8')
+const audioSource = readFileSync(
+  new URL('./utils/phoneAudio.ts', import.meta.url),
+  'utf8',
+)
+const mainCss = readFileSync(
+  new URL('./assets/main.css', import.meta.url),
+  'utf8',
+)
+const musicSource = readFileSync(
+  new URL('./stores/music.ts', import.meta.url),
+  'utf8',
+)
+
+describe('phone audio output contract', () => {
+  it('applies the hardware volume to app media and live YouTube playback', () => {
+    expect(appSource).toContain('installPhoneAudioController()')
+    expect(appSource).toContain('setPhoneOutputVolume(volume / 100)')
+    expect(appSource).toContain(
+      'if (radio.data.connected) void radio.setVolume(volume)',
+    )
+    expect(audioSource).toContain(
+      "document.addEventListener('play', onMediaPlay, true)",
+    )
+    expect(audioSource).toContain('localVolume * outputVolume')
+    expect(musicSource).toContain('registerPhoneMediaElement(new Audio())')
+    expect(musicSource).toContain('store.volume * getPhoneOutputVolume() * 100')
+  })
+
+  it('renders the hardware speaker symbol in grey', () => {
+    expect(mainCss).toMatch(/\.phone-volume-hud\s*\{[\s\S]*?color:\s*#a9abb2;/)
+  })
+})
diff --git a/frontend/src/phoneInventory.contract.test.ts b/frontend/src/phoneInventory.contract.test.ts
index d6e589c..9af37bd 100644
--- a/frontend/src/phoneInventory.contract.test.ts
+++ b/frontend/src/phoneInventory.contract.test.ts
@@ -3,7 +3,7 @@ import { readFileSync } from 'node:fs'
 import { describe, expect, it } from 'vitest'
 
 const readResourceFile = (path: string) =>
-  readFileSync(new URL(`../../sky_phone/${path}`, import.meta.url), 'utf8')
+  readFileSync(new URL(`../../sky_phone/${path}`, import.meta.url), 'utf8').replace(/\r\n/g, '\n')
 const readFrontendFile = (path: string) =>
   readFileSync(new URL(path, import.meta.url), 'utf8')
 
@@ -232,6 +232,22 @@ describe('phone inventory contracts', () => {
     )
   })
 
+  it('opens a running live activity with Space without affecting normal gameplay', () => {
+    const phoneClient = readResourceFile('source/client/main.lua')
+
+    expect(phoneClient).toContain(
+      'RegisterCommand("sky_phone_live_activity_open"',
+    )
+    expect(phoneClient).toContain(
+      'if not live_activity_active or is_open or open_requested then',
+    )
+    expect(phoneClient).toContain(
+      'RegisterKeyMapping(\n    "sky_phone_live_activity_open"',
+    )
+    expect(phoneClient).toContain('"SPACE"')
+    expect(phoneClient).toContain('RegisterNUICallback("ui:live-activity"')
+  })
+
   it('keeps a server-selected unique handset as the preferred hotkey device', () => {
     const phoneServer = readResourceFile('source/server/phone.lua')
 
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index e48ea1a..c168ca0 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -15,6 +15,12 @@ const developmentRoutes: RouteRecordRaw[] = import.meta.env.DEV
         name: 'development-sky-ui',
         path: '/development/sky-ui/:demo?',
       },
+      {
+        component: () =>
+          import('@/views/development/PhoneDynamicIslandGallery.vue'),
+        name: 'development-dynamic-islands',
+        path: '/development/dynamic-islands',
+      },
     ]
   : []
 
diff --git a/frontend/src/stores/app-store.test.ts b/frontend/src/stores/app-store.test.ts
index f65e70f..47c414f 100644
--- a/frontend/src/stores/app-store.test.ts
+++ b/frontend/src/stores/app-store.test.ts
@@ -64,6 +64,41 @@ describe('app store', () => {
     expect(apps.isInstalled('snake')).toBe(false)
     expect(apps.isInstalled('health')).toBe(true)
     expect(apps.isInstalled('citywarn')).toBe(true)
+    expect(apps.homeLayout.dock).toEqual([
+      'phone',
+      'messages',
+      'camera',
+      'clock',
+    ])
+    for (const dockAppId of ['phone', 'messages', 'camera', 'clock']) {
+      expect(apps.homeLayout.grid).not.toContain(dockAppId)
+    }
+  })
+
+  it('migrates current layouts so dock apps are not repeated in the grid', () => {
+    const apps = useAppStoreStore()
+
+    apps.hydrate({
+      homeLayout: {
+        dock: ['phone', 'messages', 'camera', 'clock'],
+        grid: ['phone', 'messages', 'calculator', 'camera', 'clock'],
+        hidden: [],
+        pageCount: 1,
+        version: HOME_LAYOUT_VERSION,
+      },
+    })
+
+    expect(apps.homeLayout.dock).toEqual([
+      'phone',
+      'messages',
+      'camera',
+      'clock',
+    ])
+    for (const dockAppId of ['phone', 'messages', 'camera', 'clock']) {
+      expect(apps.homeLayout.grid).not.toContain(dockAppId)
+    }
+    expect(apps.homeLayout.grid).toContain('calculator')
+    expect(mocks.phone.saveDeviceNamespace).toHaveBeenCalledTimes(1)
   })
 
   it('removes old automatic apps unless the player installed them', () => {
@@ -320,7 +355,7 @@ describe('app store', () => {
     const apps = useAppStoreStore()
     apps.hydrate(null)
     mocks.phone.saveDeviceNamespace.mockClear()
-    const sourceIndex = apps.homeLayout.grid.indexOf('phone')
+    const sourceIndex = apps.homeLayout.grid.indexOf('calculator')
     expect(sourceIndex).toBeGreaterThanOrEqual(0)
 
     expect(
@@ -329,7 +364,7 @@ describe('app store', () => {
         HOME_GRID_PAGE_SIZE,
       ]),
     ).toBe(true)
-    expect(apps.homeLayout.grid[HOME_GRID_PAGE_SIZE]).toBe('phone')
+    expect(apps.homeLayout.grid[HOME_GRID_PAGE_SIZE]).toBe('calculator')
     expect(mocks.phone.saveDeviceNamespace).toHaveBeenCalledTimes(1)
   })
 
@@ -386,18 +421,18 @@ describe('app store', () => {
     mocks.phone.saveDeviceNamespace.mockClear()
 
     const notesIndex = apps.homeLayout.grid.indexOf('notes')
-    const clockIndex = apps.homeLayout.grid.indexOf('clock')
+    const settingsIndex = apps.homeLayout.grid.indexOf('settings')
     const folderId = apps.createHomeFolder(
       'grid',
       notesIndex,
       'grid',
-      clockIndex,
+      settingsIndex,
       'Utilities',
     )
 
     expect(folderId).toBeTruthy()
     expect(getHomeFolder(apps.homeLayout, folderId!)?.apps).toEqual([
-      'clock',
+      'settings',
       'notes',
     ])
     const mailIndex = apps.homeLayout.grid.indexOf('mail')
@@ -405,7 +440,7 @@ describe('app store', () => {
     apps.moveHomeFolderApp(folderId!, 2, 0)
     apps.renameHomeFolder(folderId!, 'Work')
     expect(getHomeFolder(apps.homeLayout, folderId!)).toMatchObject({
-      apps: ['mail', 'notes', 'clock'],
+      apps: ['mail', 'notes', 'settings'],
       name: 'Work',
     })
 
diff --git a/frontend/src/stores/app-store.ts b/frontend/src/stores/app-store.ts
index 6c4a63f..990799d 100644
--- a/frontend/src/stores/app-store.ts
+++ b/frontend/src/stores/app-store.ts
@@ -25,6 +25,7 @@ import {
   parseHomeLayout,
   reflowHomeGridForWidgetChange,
   renameHomeFolder,
+  removeDockGridDuplicates,
   removeHomeApp,
   restoreHomeApp,
   type HomeArea,
@@ -45,7 +46,7 @@ const pendingInstallations = new WeakMap<
 >()
 
 function getDefaultGridIds(): LaunchablePhoneAppId[] {
-  return [...PHONE_APPS]
+  return PHONE_APPS.filter((app) => app.dockOrder === null)
     .sort((a, b) => a.gridOrder - b.gridOrder)
     .map((app) => app.id)
 }
@@ -263,12 +264,16 @@ export const useAppStoreStore = defineStore('app-store', {
         getDefaultGridIds(),
         getDefaultDockIds(),
       )
-      this.homeLayout = parseHomeLayout(
+      const parsedHomeLayout = parseHomeLayout(
         data?.homeLayout,
         defaults,
         installedIds,
         false,
       )
+      const normalizedHomeLayout = removeDockGridDuplicates(parsedHomeLayout)
+      const removedDockGridDuplicates =
+        normalizedHomeLayout !== parsedHomeLayout
+      this.homeLayout = normalizedHomeLayout
       const protectedHiddenAppIds =
         this.homeLayout.hidden.filter(isProtectedHomeApp)
       for (const appId of protectedHiddenAppIds) {
@@ -292,6 +297,7 @@ export const useAppStoreStore = defineStore('app-store', {
       this.hydrated = true
       if (
         protectedHiddenAppIds.length ||
+        removedDockGridDuplicates ||
         removedLegacyDefaults ||
         layoutVersion === 2 ||
         layoutVersion === 3 ||
@@ -320,11 +326,8 @@ export const useAppStoreStore = defineStore('app-store', {
         getDefaultDockIds(),
       )
       const previous = JSON.stringify(this.homeLayout)
-      this.homeLayout = parseHomeLayout(
-        this.homeLayout,
-        defaults,
-        installedIds,
-        false,
+      this.homeLayout = removeDockGridDuplicates(
+        parseHomeLayout(this.homeLayout, defaults, installedIds, false),
       )
 
       for (const appId of [...this.homeLayout.hidden]) {
diff --git a/frontend/src/stores/music.ts b/frontend/src/stores/music.ts
index 5aba534..38187a0 100644
--- a/frontend/src/stores/music.ts
+++ b/frontend/src/stores/music.ts
@@ -7,6 +7,11 @@ import type {
   MusicTrack,
 } from '@/types/music'
 import { nuiCall } from '@/utils/nui'
+import {
+  getPhoneOutputVolume,
+  registerPhoneMediaElement,
+  subscribePhoneOutputVolume,
+} from '@/utils/phoneAudio'
 
 export type YouTubePlayer = {
   destroy: () => void
@@ -48,7 +53,7 @@ declare global {
   }
 }
 
-const audio = new Audio()
+const audio = registerPhoneMediaElement(new Audio())
 audio.preload = 'auto'
 const YOUTUBE_API_TIMEOUT_MS = 12000
 let audioBound = false
@@ -59,6 +64,11 @@ let youtubeApiPromise: Promise<YouTubeApi> | null = null
 let youtubePlayer: YouTubePlayer | null = null
 let youtubeProgressTimer: number | null = null
 
+subscribePhoneOutputVolume((volume) => {
+  const localVolume = useMusicStore().volume
+  youtubePlayer?.setVolume(localVolume * volume * 100)
+})
+
 export function musicTrackKey(
   track: Pick<MusicTrack, 'id' | 'source'>,
 ): string {
@@ -276,7 +286,7 @@ async function loadYouTubeTrack(videoId: string): Promise<void> {
   const api = await loadYouTubeApi()
   const store = useMusicStore()
   if (youtubePlayer) {
-    youtubePlayer.setVolume(store.volume * 100)
+    youtubePlayer.setVolume(store.volume * getPhoneOutputVolume() * 100)
     youtubePlayer.loadVideoById(videoId)
     youtubePlayer.playVideo()
     startYoutubeProgress()
@@ -319,7 +329,9 @@ async function loadYouTubeTrack(videoId: string): Promise<void> {
         },
         onReady: (event) => {
           youtubePlayer = event.target
-          event.target.setVolume(useMusicStore().volume * 100)
+          event.target.setVolume(
+            useMusicStore().volume * getPhoneOutputVolume() * 100,
+          )
           event.target.playVideo()
           startYoutubeProgress()
           resolve()
@@ -554,7 +566,7 @@ export const useMusicStore = defineStore('music', {
     setVolume(value: number): void {
       this.volume = Math.max(0, Math.min(1, value))
       audio.volume = this.volume
-      youtubePlayer?.setVolume(this.volume * 100)
+      youtubePlayer?.setVolume(this.volume * getPhoneOutputVolume() * 100)
     },
     stop(): void {
       stopActiveMedia()
diff --git a/frontend/src/types/dynamicIsland.ts b/frontend/src/types/dynamicIsland.ts
new file mode 100644
index 0000000..9f12011
--- /dev/null
+++ b/frontend/src/types/dynamicIsland.ts
@@ -0,0 +1,7 @@
+export type DynamicIslandActivity =
+  | 'call'
+  | 'incoming-call'
+  | 'music'
+  | 'recording'
+  | 'stopwatch'
+  | 'timer'
diff --git a/frontend/src/utils/homeLayout.test.ts b/frontend/src/utils/homeLayout.test.ts
index ee7e058..8222d44 100644
--- a/frontend/src/utils/homeLayout.test.ts
+++ b/frontend/src/utils/homeLayout.test.ts
@@ -21,6 +21,7 @@ import {
   moveHomeFolderApp,
   parseHomeLayout,
   reflowHomeGridForWidgetChange,
+  removeDockGridDuplicates,
   removeHomeApp,
   renameHomeFolder,
   restoreHomeApp,
@@ -78,6 +79,40 @@ describe('home layout', () => {
     expect(layout.version).toBe(HOME_LAYOUT_VERSION)
   })
 
+  it('removes dock apps from the grid and normalizes affected folders', () => {
+    const layout: HomeLayout = {
+      ...defaults,
+      dock: [
+        'phone',
+        {
+          apps: ['messages', 'mail'],
+          id: 'folder-abcdef',
+          name: 'Dock',
+          type: 'folder',
+        },
+        null,
+        null,
+      ],
+      grid: [
+        'phone',
+        {
+          apps: ['messages', 'notes'],
+          id: 'folder-ghijkl',
+          name: 'Grid',
+          type: 'folder',
+        },
+        'mail',
+        'clock',
+        ...Array.from({ length: HOME_GRID_PAGE_SIZE - 4 }, () => null),
+      ],
+    }
+
+    const normalized = removeDockGridDuplicates(layout)
+
+    expect(normalized.grid.slice(0, 3)).toEqual(['notes', 'clock', null])
+    expect(normalized.dock).toEqual(layout.dock)
+  })
+
   it('migrates compact persisted arrays and appends newly installed apps', () => {
     const layout = parseHomeLayout(
       {
diff --git a/frontend/src/utils/homeLayout.ts b/frontend/src/utils/homeLayout.ts
index a9b3ac9..abc5411 100644
--- a/frontend/src/utils/homeLayout.ts
+++ b/frontend/src/utils/homeLayout.ts
@@ -505,6 +505,37 @@ export function createDefaultHomeLayout(
   }
 }
 
+export function removeDockGridDuplicates(layout: HomeLayout): HomeLayout {
+  const dockAppIds = new Set<LaunchablePhoneAppId>()
+  for (const item of layout.dock) {
+    if (typeof item === 'string') dockAppIds.add(item)
+    if (isHomeFolder(item)) {
+      for (const appId of item.apps) dockAppIds.add(appId)
+    }
+  }
+  if (!dockAppIds.size) return layout
+
+  let changed = false
+  const grid = layout.grid.map((item): HomeSlot => {
+    if (typeof item === 'string') {
+      if (!dockAppIds.has(item)) return item
+      changed = true
+      return null
+    }
+    if (!isHomeFolder(item)) return null
+
+    const apps = item.apps.filter((appId) => !dockAppIds.has(appId))
+    if (apps.length === item.apps.length) return cloneItem(item)
+    changed = true
+    return normalizeFolder({ ...item, apps })
+  })
+  if (!changed) return layout
+
+  const next = cloneLayout(layout)
+  next.grid = compactGridPages(grid)
+  return next
+}
+
 export function parseHomeLayout(
   value: unknown,
   defaults: HomeLayout,
diff --git a/frontend/src/utils/phoneAudio.ts b/frontend/src/utils/phoneAudio.ts
new file mode 100644
index 0000000..d399954
--- /dev/null
+++ b/frontend/src/utils/phoneAudio.ts
@@ -0,0 +1,96 @@
+type PhoneAudioVolumeListener = (volume: number) => void
+
+const mediaElements = new Map<HTMLMediaElement, boolean>()
+const mediaLocalVolumes = new WeakMap<HTMLMediaElement, number>()
+const volumeListeners = new Set<PhoneAudioVolumeListener>()
+
+let documentListenerReferences = 0
+let outputVolume = 1
+
+function clampVolume(volume: number): number {
+  return Math.max(0, Math.min(1, Number.isFinite(volume) ? volume : 0))
+}
+
+function applyMediaVolume(element: HTMLMediaElement): void {
+  const localVolume = mediaLocalVolumes.get(element) ?? element.volume
+  const nextVolume = clampVolume(localVolume * outputVolume)
+  if (Math.abs(element.volume - nextVolume) < 0.001) return
+  element.volume = nextVolume
+}
+
+function onMediaVolumeChange(event: Event): void {
+  const element = event.currentTarget as HTMLMediaElement
+  const currentLocalVolume = mediaLocalVolumes.get(element) ?? element.volume
+  const expectedVolume = clampVolume(currentLocalVolume * outputVolume)
+  if (Math.abs(element.volume - expectedVolume) < 0.001) return
+  mediaLocalVolumes.set(element, clampVolume(element.volume))
+  applyMediaVolume(element)
+}
+
+function onMediaPlay(event: Event): void {
+  if (event.target instanceof HTMLMediaElement) {
+    trackPhoneMediaElement(event.target, false)
+  }
+}
+
+function trackPhoneMediaElement<T extends HTMLMediaElement>(
+  element: T,
+  persistent: boolean,
+): T {
+  if (mediaElements.has(element)) {
+    if (persistent) mediaElements.set(element, true)
+    return element
+  }
+  mediaElements.set(element, persistent)
+  mediaLocalVolumes.set(element, clampVolume(element.volume))
+  element.addEventListener('volumechange', onMediaVolumeChange)
+  applyMediaVolume(element)
+  return element
+}
+
+export function getPhoneOutputVolume(): number {
+  return outputVolume
+}
+
+export function installPhoneAudioController(): () => void {
+  documentListenerReferences += 1
+  if (documentListenerReferences === 1) {
+    document.addEventListener('play', onMediaPlay, true)
+    document
+      .querySelectorAll<HTMLMediaElement>('audio, video')
+      .forEach((element) => trackPhoneMediaElement(element, false))
+  }
+
+  return () => {
+    documentListenerReferences = Math.max(0, documentListenerReferences - 1)
+    if (documentListenerReferences === 0) {
+      document.removeEventListener('play', onMediaPlay, true)
+    }
+  }
+}
+
+export function registerPhoneMediaElement<T extends HTMLMediaElement>(
+  element: T,
+): T {
+  return trackPhoneMediaElement(element, true)
+}
+
+export function setPhoneOutputVolume(volume: number): void {
+  outputVolume = clampVolume(volume)
+  for (const [element, persistent] of mediaElements) {
+    if (!persistent && !element.isConnected && element.paused) {
+      element.removeEventListener('volumechange', onMediaVolumeChange)
+      mediaElements.delete(element)
+      continue
+    }
+    applyMediaVolume(element)
+  }
+  for (const listener of volumeListeners) listener(outputVolume)
+}
+
+export function subscribePhoneOutputVolume(
+  listener: PhoneAudioVolumeListener,
+): () => void {
+  volumeListeners.add(listener)
+  return () => volumeListeners.delete(listener)
+}
diff --git a/frontend/src/utils/tones.test.ts b/frontend/src/utils/tones.test.ts
index 24cd5f6..a45536c 100644
--- a/frontend/src/utils/tones.test.ts
+++ b/frontend/src/utils/tones.test.ts
@@ -32,7 +32,7 @@ describe('phone tones', () => {
       }> = []
       vi.stubGlobal(
         'Audio',
-        class {
+        class extends EventTarget {
           currentTime = 7
           loop = false
           pause = pause
@@ -42,6 +42,7 @@ describe('phone tones', () => {
           volume = 0
 
           constructor(src: string) {
+            super()
             this.src = src
             players.push(this)
           }
diff --git a/frontend/src/utils/tones.ts b/frontend/src/utils/tones.ts
index f6f13c3..d22cad9 100644
--- a/frontend/src/utils/tones.ts
+++ b/frontend/src/utils/tones.ts
@@ -1,3 +1,4 @@
+import { registerPhoneMediaElement } from '@/utils/phoneAudio'
 import type { AlarmSoundId } from '@/utils/alarms'
 import type { NotificationSoundId } from '@/utils/preferences'
 
@@ -495,8 +496,8 @@ export function playPhoneVibration(
   kind: PhoneVibrationKind,
   loop: boolean,
 ): () => void {
-  const player = new Audio(
-    `${import.meta.env.BASE_URL}${VIBRATION_SOUND_PATHS[kind]}`,
+  const player = registerPhoneMediaElement(
+    new Audio(`${import.meta.env.BASE_URL}${VIBRATION_SOUND_PATHS[kind]}`),
   )
   let stopped = false
   player.loop = loop
diff --git a/frontend/src/views/apps/FlipTokApp.vue b/frontend/src/views/apps/FlipTokApp.vue
index e089523..42cc360 100644
--- a/frontend/src/views/apps/FlipTokApp.vue
+++ b/frontend/src/views/apps/FlipTokApp.vue
@@ -77,6 +77,10 @@ import {
   SkyToggle,
 } from '@/ui'
 import { nuiCall } from '@/utils/nui'
+import {
+  getPhoneOutputVolume,
+  subscribePhoneOutputVolume,
+} from '@/utils/phoneAudio'
 
 type Tab = 'feed' | 'discover' | 'create' | 'activity' | 'profile'
 type AuthMode = 'login' | 'register'
@@ -194,6 +198,8 @@ let flipTokYoutubePlayer: YouTubePlayer | null = null
 let flipTokYoutubeApi: YouTubeApi | null = null
 let flipTokYoutubeOwner = ''
 let flipTokYoutubeVideoId = ''
+let flipTokYoutubeVolume = 0
+let removePhoneOutputVolumeListener: (() => void) | undefined
 let observer: IntersectionObserver | null = null
 let videoClickTimer: number | null = null
 let likePulseTimer: number | null = null
@@ -786,6 +792,7 @@ async function playFlipTokYoutube(
   seconds = 0,
 ): Promise<void> {
   flipTokYoutubeOwner = owner
+  flipTokYoutubeVolume = volume
   try {
     const api = await loadYouTubeApi()
     flipTokYoutubeApi = api
@@ -794,7 +801,7 @@ async function playFlipTokYoutube(
         flipTokYoutubeVideoId = videoId
         flipTokYoutubePlayer.loadVideoById(videoId)
       }
-      flipTokYoutubePlayer.setVolume(volume)
+      flipTokYoutubePlayer.setVolume(volume * getPhoneOutputVolume())
       flipTokYoutubePlayer.seekTo(Math.max(0, seconds), true)
       flipTokYoutubePlayer.playVideo()
       if (owner === 'composer') customMusicLoadFailed.value = false
@@ -835,7 +842,7 @@ async function playFlipTokYoutube(
           },
           onReady: (event) => {
             flipTokYoutubePlayer = event.target
-            event.target.setVolume(volume)
+            event.target.setVolume(volume * getPhoneOutputVolume())
             event.target.seekTo(Math.max(0, seconds), true)
             event.target.playVideo()
             if (owner === 'composer') customMusicLoadFailed.value = false
@@ -1627,7 +1634,10 @@ watch(originalVolume, (value) => {
 
 watch(musicVolume, (value) => {
   if (composerMusic.value) composerMusic.value.volume = value / 100
-  if (flipTokYoutubeOwner === 'composer') flipTokYoutubePlayer?.setVolume(value)
+  if (flipTokYoutubeOwner === 'composer') {
+    flipTokYoutubeVolume = value
+    flipTokYoutubePlayer?.setVolume(value * getPhoneOutputVolume())
+  }
 })
 
 watch(
@@ -1655,6 +1665,9 @@ watch(
 )
 
 onMounted(async () => {
+  removePhoneOutputVolumeListener = subscribePhoneOutputVolume((volume) => {
+    flipTokYoutubePlayer?.setVolume(flipTokYoutubeVolume * volume)
+  })
   const profileSelection = messageMedia.consumeMany<ProfileMediaContext>(
     'fliptok:profile-avatar',
   )
@@ -1731,6 +1744,7 @@ onMounted(async () => {
 })
 
 onBeforeUnmount(() => {
+  removePhoneOutputVolumeListener?.()
   observer?.disconnect()
   if (videoClickTimer !== null) window.clearTimeout(videoClickTimer)
   if (likePulseTimer !== null) window.clearTimeout(likePulseTimer)
diff --git a/frontend/src/views/development/PhoneDynamicIslandGallery.contract.test.ts b/frontend/src/views/development/PhoneDynamicIslandGallery.contract.test.ts
new file mode 100644
index 0000000..3ee94c5
--- /dev/null
+++ b/frontend/src/views/development/PhoneDynamicIslandGallery.contract.test.ts
@@ -0,0 +1,70 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const gallerySource = readFileSync(
+  new URL('./PhoneDynamicIslandGallery.vue', import.meta.url),
+  'utf8',
+)
+const islandSource = readFileSync(
+  new URL('../../components/PhoneDynamicIsland.vue', import.meta.url),
+  'utf8',
+)
+const appSource = readFileSync(
+  new URL('../../App.vue', import.meta.url),
+  'utf8',
+)
+const routerSource = readFileSync(
+  new URL('../../router/index.ts', import.meta.url),
+  'utf8',
+)
+
+describe('Dynamic Island development gallery contract', () => {
+  it('shows every runtime activity and both supported presentation sizes', () => {
+    for (const activity of [
+      'incoming-call',
+      'call',
+      'music',
+      'recording',
+      'timer',
+      'stopwatch',
+    ]) {
+      expect(gallerySource).toContain(`activity: '${activity}'`)
+    }
+    expect(gallerySource).toContain("label: 'Compact'")
+    expect(gallerySource).toContain("label: 'Expanded'")
+    expect(
+      gallerySource.match(
+        /activity: '(?:incoming-call|call|music|recording|timer|stopwatch)'/g,
+      ),
+    ).toHaveLength(11)
+  })
+
+  it('uses the production component with inert preview data', () => {
+    expect(gallerySource).toContain('<PhoneDynamicIsland')
+    expect(gallerySource).toContain(':preview-activity="variant.activity"')
+    expect(islandSource).toContain('previewActivity?: DynamicIslandActivity')
+    expect(islandSource).toContain(
+      ':data-preview="props.preview ? \'true\' : undefined"',
+    )
+    expect(islandSource).toContain(".phone-dynamic-island[data-preview='true']")
+    expect(gallerySource).toMatch(
+      /\.dynamic-island-gallery__stage\s*\{[^}]*width:\s*100%;/s,
+    )
+    expect(gallerySource).toMatch(
+      /dynamic-island-gallery__preview\.phone-dynamic-island[\s\S]*?max-width:\s*calc\(100% - 12px\);/,
+    )
+  })
+
+  it('keeps the gallery development-only and hides the live island above it', () => {
+    expect(routerSource).toContain("name: 'development-dynamic-islands'")
+    expect(routerSource).toContain("path: '/development/dynamic-islands'")
+    expect(routerSource).toMatch(
+      /const developmentRoutes[^=]*=\s*import\.meta\.env\.DEV/,
+    )
+    expect(appSource).toContain("route.name === 'development-dynamic-islands'")
+    expect(appSource).toContain(
+      'v-if="!setupRequired && !isDynamicIslandGalleryRoute"',
+    )
+  })
+})
diff --git a/frontend/src/views/development/PhoneDynamicIslandGallery.vue b/frontend/src/views/development/PhoneDynamicIslandGallery.vue
new file mode 100644
index 0000000..d7749dd
--- /dev/null
+++ b/frontend/src/views/development/PhoneDynamicIslandGallery.vue
@@ -0,0 +1,303 @@
+<script setup lang="ts">
+import PhoneDynamicIsland from '@/components/PhoneDynamicIsland.vue'
+import type { DynamicIslandActivity } from '@/types/dynamicIsland'
+
+type GalleryVariant = {
+  activity: DynamicIslandActivity
+  expanded: boolean
+  eyebrow: string
+  label: string
+  progress?: number
+  subtitle: string
+  title: string
+  value: string
+}
+
+type GalleryGroup = {
+  label: string
+  variants: GalleryVariant[]
+}
+
+const galleryGroups: GalleryGroup[] = [
+  {
+    label: 'Incoming call',
+    variants: [
+      {
+        activity: 'incoming-call',
+        expanded: true,
+        eyebrow: 'Incoming call',
+        label: 'Expanded',
+        subtitle: 'mobile',
+        title: 'Tania Castillo',
+        value: 'Incoming',
+      },
+    ],
+  },
+  {
+    label: 'Active call',
+    variants: [
+      {
+        activity: 'call',
+        expanded: false,
+        eyebrow: 'Connected',
+        label: 'Compact',
+        subtitle: '00:42',
+        title: 'Alex Rivera',
+        value: '00:42',
+      },
+      {
+        activity: 'call',
+        expanded: true,
+        eyebrow: 'Connected',
+        label: 'Expanded',
+        subtitle: '00:42',
+        title: 'Alex Rivera',
+        value: '00:42',
+      },
+    ],
+  },
+  {
+    label: 'Music',
+    variants: [
+      {
+        activity: 'music',
+        expanded: false,
+        eyebrow: 'Now Playing',
+        label: 'Compact',
+        progress: 0.64,
+        subtitle: 'Los Santos Radio',
+        title: 'Night Drive',
+        value: 'Night Drive',
+      },
+      {
+        activity: 'music',
+        expanded: true,
+        eyebrow: 'Now Playing',
+        label: 'Expanded',
+        progress: 0.64,
+        subtitle: 'Los Santos Radio',
+        title: 'Night Drive',
+        value: 'Night Drive',
+      },
+    ],
+  },
+  {
+    label: 'Voice recording',
+    variants: [
+      {
+        activity: 'recording',
+        expanded: false,
+        eyebrow: 'Recording',
+        label: 'Compact',
+        subtitle: 'Voice memo',
+        title: '00:37',
+        value: '00:37',
+      },
+      {
+        activity: 'recording',
+        expanded: true,
+        eyebrow: 'Recording',
+        label: 'Expanded',
+        subtitle: 'Voice memo',
+        title: '00:37',
+        value: '00:37',
+      },
+    ],
+  },
+  {
+    label: 'Timer',
+    variants: [
+      {
+        activity: 'timer',
+        expanded: false,
+        eyebrow: 'Timer',
+        label: 'Compact',
+        progress: 0.47,
+        subtitle: '',
+        title: '0:21',
+        value: '0:21',
+      },
+      {
+        activity: 'timer',
+        expanded: true,
+        eyebrow: 'Timer',
+        label: 'Expanded',
+        progress: 0.47,
+        subtitle: '',
+        title: '0:21',
+        value: '0:21',
+      },
+    ],
+  },
+  {
+    label: 'Stopwatch',
+    variants: [
+      {
+        activity: 'stopwatch',
+        expanded: false,
+        eyebrow: 'Stopwatch',
+        label: 'Compact',
+        subtitle: '',
+        title: '00:11,48',
+        value: '00:11,48',
+      },
+      {
+        activity: 'stopwatch',
+        expanded: true,
+        eyebrow: 'Stopwatch',
+        label: 'Expanded',
+        subtitle: '',
+        title: '00:11,48',
+        value: '00:11,48',
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <main class="dynamic-island-gallery">
+    <header class="dynamic-island-gallery__header">
+      <span>Development preview</span>
+      <h1>Dynamic Islands</h1>
+      <p>Every runtime activity in its supported compact and expanded state.</p>
+    </header>
+
+    <section
+      v-for="group in galleryGroups"
+      :key="group.label"
+      class="dynamic-island-gallery__group"
+    >
+      <h2>{{ group.label }}</h2>
+      <article
+        v-for="variant in group.variants"
+        :key="`${variant.activity}-${variant.label}`"
+        class="dynamic-island-gallery__variant"
+      >
+        <span>{{ variant.label }}</span>
+        <div
+          class="dynamic-island-gallery__stage"
+          :class="{
+            'dynamic-island-gallery__stage--expanded': variant.expanded,
+          }"
+        >
+          <PhoneDynamicIsland
+            class="dynamic-island-gallery__preview"
+            preview
+            :preview-activity="variant.activity"
+            :preview-expanded="variant.expanded"
+            :preview-eyebrow="variant.eyebrow"
+            :preview-progress="variant.progress"
+            :preview-subtitle="variant.subtitle"
+            :preview-title="variant.title"
+            :preview-value="variant.value"
+          />
+        </div>
+      </article>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.dynamic-island-gallery {
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+  overflow-y: auto;
+  padding: 58px 6px 32px;
+  color: #f7f7fb;
+  background:
+    radial-gradient(circle at 50% 0%, rgb(96 75 180 / 22%), transparent 30%),
+    linear-gradient(180deg, #111116 0%, #070709 100%);
+  scrollbar-width: none;
+}
+
+.dynamic-island-gallery::-webkit-scrollbar {
+  display: none;
+}
+
+.dynamic-island-gallery__header,
+.dynamic-island-gallery__group {
+  width: 100%;
+  max-width: 356px;
+  margin-inline: auto;
+}
+
+.dynamic-island-gallery__header {
+  padding: 4px 8px 18px;
+}
+
+.dynamic-island-gallery__header span,
+.dynamic-island-gallery__variant > span {
+  color: #a7a7b3;
+  font-size: 11px;
+  font-weight: 650;
+  letter-spacing: 0.55px;
+  text-transform: uppercase;
+}
+
+.dynamic-island-gallery__header h1 {
+  margin: 4px 0 5px;
+  font-size: 28px;
+  letter-spacing: -0.8px;
+}
+
+.dynamic-island-gallery__header p {
+  margin: 0;
+  color: #b6b6c2;
+  font-size: 12px;
+  line-height: 17px;
+}
+
+.dynamic-island-gallery__group {
+  padding: 14px 0 18px;
+  border-top: 1px solid rgb(255 255 255 / 9%);
+}
+
+.dynamic-island-gallery__group h2 {
+  margin: 0 8px 10px;
+  font-size: 15px;
+  letter-spacing: -0.2px;
+}
+
+.dynamic-island-gallery__variant + .dynamic-island-gallery__variant {
+  margin-top: 10px;
+}
+
+.dynamic-island-gallery__variant > span {
+  display: block;
+  margin: 0 10px 5px;
+  font-size: 9px;
+}
+
+.dynamic-island-gallery__stage {
+  display: grid;
+  width: 100%;
+  min-height: 72px;
+  overflow: hidden;
+  place-items: center;
+  border: 1px solid rgb(255 255 255 / 8%);
+  border-radius: 30px;
+  background:
+    radial-gradient(circle at 70% 15%, rgb(93 89 255 / 24%), transparent 34%),
+    #1a1a22;
+}
+
+.dynamic-island-gallery__stage--expanded {
+  min-height: 142px;
+}
+
+:deep(.dynamic-island-gallery__preview.phone-dynamic-island) {
+  position: relative;
+  top: auto;
+  left: auto;
+  max-width: calc(100% - 12px);
+  transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dynamic-island-gallery {
+    scroll-behavior: auto;
+  }
+}
+</style>
diff --git a/frontend/src/views/development/SkyUiKitchenSinkView.contract.test.ts b/frontend/src/views/development/SkyUiKitchenSinkView.contract.test.ts
index 1f190e1..fe5e302 100644
--- a/frontend/src/views/development/SkyUiKitchenSinkView.contract.test.ts
+++ b/frontend/src/views/development/SkyUiKitchenSinkView.contract.test.ts
@@ -229,9 +229,7 @@ describe('development Sky UI Kitchen Sink contract', () => {
       /const developmentRoutes[^=]*=\s*import\.meta\.env\.DEV[\s\S]*?import\('@\/views\/development\/SkyUiKitchenSinkView\.vue'\)/,
     )
     expect(routerSource).toContain("name: 'development-sky-ui'")
-    expect(appSource).toContain(
-      "isDevelopment && route.name === 'development-sky-ui'",
-    )
+    expect(appSource).toContain("route.name === 'development-sky-ui'")
     expect(appSource).toContain(
       'isDevelopmentRoute ? String(route.name) : route.path',
     )
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index a829646..f89ceb9 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -23,6 +23,7 @@ const lifecycleEndpoints = new Set([
   'notification:focus',
   'sim:picker-close',
   'ui:input-focus',
+  'ui:live-activity',
   'ui:opened',
   'ui:ready',
 ])
diff --git a/frontend/testserver/smoke.cjs b/frontend/testserver/smoke.cjs
index 782f746..5a0a574 100644
--- a/frontend/testserver/smoke.cjs
+++ b/frontend/testserver/smoke.cjs
@@ -1157,6 +1157,7 @@ async function main() {
       'notification:focus',
       'sim:picker-close',
       'ui:input-focus',
+      'ui:live-activity',
       'ui:opened',
       'ui:ready',
     ]
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index 0eea389..42bf0e2 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -6,6 +6,8 @@ local open_without_focus = false
 local device_payload = nil
 local equipped_phone_number = nil
 local nui_generation = 0
+local live_activity_active = false
+local open_home_requested = false
 
 local function get_equipped_phone_number()
     if not device_payload or not device_payload.device.sim then
@@ -75,7 +77,9 @@ local function send_open_message()
     SendNUIMessage({
         type = "app:open",
         data = payload,
+        openHome = open_home_requested,
     })
+    open_home_requested = false
 end
 
 local function open_phone()
@@ -169,6 +173,25 @@ RegisterCommand("sky_phone_toggle", function()
     Bridge.Callbacks.Trigger("sky_phone:device:open-request", {})
 end, false)
 
+RegisterCommand("sky_phone_live_activity_open", function()
+    if not live_activity_active or is_open or open_requested then
+        return
+    end
+
+    open_home_requested = true
+    local result = Bridge.Callbacks.Trigger("sky_phone:device:open-request", {})
+    if not result or not result.success then
+        open_home_requested = false
+    end
+end, false)
+
+RegisterKeyMapping(
+    "sky_phone_live_activity_open",
+    locale.Controls.OpenPhone,
+    "keyboard",
+    "SPACE"
+)
+
 if Config.Phone.Keybind then
     if type(Config.Phone.Keybind) ~= "string" or Config.Phone.Keybind == "" then
         error("[sky_phone] Config.Phone.Keybind must be a non-empty keyboard key name or false.")
@@ -255,6 +278,15 @@ RegisterNUICallback("ui:input-focus", function(data, cb)
     cb({ success = true })
 end)
 
+RegisterNUICallback("ui:live-activity", function(data, cb)
+    if type(data) ~= "table" or type(data.active) ~= "boolean" then
+        cb({ success = false, error = "invalid_request" })
+        return
+    end
+    live_activity_active = data.active
+    cb({ success = true })
+end)
+
 RegisterNUICallback("close", function(data, cb)
     if type(data) ~= "table" then
         cb({ success = false, error = "invalid_request" })
@@ -302,6 +334,8 @@ RegisterNetEvent("sky_phone:device:invalidated", function()
     close_phone(false)
     device_payload = nil
     update_equipped_phone_number(nil)
+    live_activity_active = false
+    open_home_requested = false
 end)
 
 RegisterNetEvent("sky_phone:device:error", function(error_code)
diff --git a/sky_phone/source/server/companies.lua b/sky_phone/source/server/companies.lua
index e955f1b..a7943f4 100644
--- a/sky_phone/source/server/companies.lua
+++ b/sky_phone/source/server/companies.lua
@@ -679,18 +679,16 @@ function SkyPhoneCompanies.GetCallTargets(company_id)
     end
     for source, readiness in pairs(call_availability) do
         local member = online[source] and call_member(source) or nil
-        local device = member and current_device(source, true) or nil
-        if not member or not device or member.company_id ~= readiness.company_id
-            or readiness.company_id ~= company_id or readiness.imei ~= device.imei
-            or readiness.sim_id ~= device.sim_id
-        then
-            if not member or not device or member.company_id ~= readiness.company_id
-                or readiness.imei ~= (device and device.imei)
-                or readiness.sim_id ~= (device and device.sim_id)
-            then
-                call_availability[source] = nil
-            end
-        else
+        local device = member and SkyPhone.LoadDevice(readiness.imei) or nil
+        local device_slots = device and SkyPhone.FindDeviceSlots(source, readiness.imei) or {}
+        local readiness_valid = member and device and device_slots[1]
+            and member.company_id == readiness.company_id
+            and device.sim_id == readiness.sim_id
+            and device.sim_type == "registered"
+            and device.registered_at ~= nil
+        if not readiness_valid then
+            call_availability[source] = nil
+        elseif readiness.company_id == company_id then
             targets[#targets + 1] = {
                 source = source,
                 simId = device.sim_id,
diff --git a/sky_phone/source/server/memos.lua b/sky_phone/source/server/memos.lua
index df674f9..c31084b 100644
--- a/sky_phone/source/server/memos.lua
+++ b/sky_phone/source/server/memos.lua
@@ -51,6 +51,23 @@ local function session_owner(source)
     }
 end
 
+local function device_owner(source, imei)
+    if not SkyPhoneImei.IsValid(imei) then
+        return nil, { success = false, error = "invalid_request" }
+    end
+    if not SkyPhone.FindDeviceSlots(source, imei)[1] then
+        return nil, { success = false, error = "owner_changed" }
+    end
+    local device = SkyPhone.LoadDevice(imei)
+    if not device then
+        return nil, { success = false, error = "device_not_found" }
+    end
+    return {
+        account_id = device.account_id and tonumber(device.account_id) or nil,
+        imei = imei,
+    }
+end
+
 local function owner_condition(owner, alias)
     local prefix = alias and ("`%s`."):format(alias) or ""
     if owner.account_id then
@@ -317,7 +334,7 @@ RegisterNetEvent("sky_phone:memos:request-upload", function(data)
         upload_result(src, type(data) == "table" and data.correlationId or nil, false, "invalid_memo")
         return
     end
-    local owner, error_response = session_owner(src)
+    local owner, error_response = device_owner(src, data.deviceImei)
     if not owner then
         upload_result(src, memo.correlation_id, false, error_response.error)
         return
@@ -392,7 +409,7 @@ RegisterNetEvent("sky_phone:memos:complete-upload", function(data)
         return
     end
     state.completing = true
-    local owner, error_response = session_owner(src)
+    local owner, error_response = device_owner(src, state.owner.imei)
     if not owner or owner.imei ~= state.owner.imei or owner.account_id ~= state.owner.account_id then
         pending_uploads[request_id] = nil
         local rejected, _, trusted_remote = SkyPhoneMedia.VerifyRemoteUpload(state, data.remoteId, data.url)
diff --git a/sky_phone/source/server/phone.lua b/sky_phone/source/server/phone.lua
index 0fbe374..147fbad 100644
--- a/sky_phone/source/server/phone.lua
+++ b/sky_phone/source/server/phone.lua
@@ -958,7 +958,6 @@ Bridge.Debug(
 )
 
 Bridge.Callbacks.Register("sky_phone:device:close", function(source)
-    SkyPhoneCompanies.ClearCallAvailability(source)
     sessions[source] = nil
     return { success = true }
 end)