diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index e29511d..a24c1a4 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { kApp } from 'konsta/vue'
-import { computed, onBeforeUnmount, onMounted } from 'vue'
+import { computed, onBeforeUnmount, onMounted, type CSSProperties } from 'vue'
 import { useRoute } from 'vue-router'
 
 import PhoneHomeIndicator from '@/components/PhoneHomeIndicator.vue'
 import PhoneStatusBar from '@/components/PhoneStatusBar.vue'
+import { PHONE_FRAME_IMAGES } from '@/config/appearance'
 import { usePhoneStore, type PhoneOpenPayload } from '@/stores/phone'
 import { nuiCall } from '@/utils/nui'
 import SpringboardView from '@/views/SpringboardView.vue'
@@ -17,6 +18,13 @@ type AppMessage = {
 const phone = usePhoneStore()
 const route = useRoute()
 const isAppRoute = computed(() => route.name === 'app')
+const systemColorScheme = window.matchMedia('(prefers-color-scheme: dark)')
+const phoneDeviceStyle = computed<CSSProperties>(() => ({
+  '--phone-scale': phone.preferences.settings.phoneScale / 100,
+}))
+const phoneFrameImage = computed(
+  () => PHONE_FRAME_IMAGES[phone.preferences.settings.frame],
+)
 
 function onMessage(event: MessageEvent<AppMessage>): void {
   if (event.data?.type === 'app:open') {
@@ -32,9 +40,15 @@ function onKeydown(event: KeyboardEvent): void {
   void nuiCall('close')
 }
 
+function onSystemColorSchemeChange(event: MediaQueryListEvent): void {
+  phone.setSystemDarkMode(event.matches)
+}
+
 onMounted(() => {
   window.addEventListener('message', onMessage)
   window.addEventListener('keydown', onKeydown)
+  systemColorScheme.addEventListener('change', onSystemColorSchemeChange)
+  phone.setSystemDarkMode(systemColorScheme.matches)
   void nuiCall('ui:ready')
   if (import.meta.env.DEV) phone.open()
 })
@@ -42,15 +56,28 @@ onMounted(() => {
 onBeforeUnmount(() => {
   window.removeEventListener('message', onMessage)
   window.removeEventListener('keydown', onKeydown)
+  systemColorScheme.removeEventListener('change', onSystemColorSchemeChange)
 })
 </script>
 
 <template>
   <main v-if="phone.isOpen" class="phone-stage">
-    <section class="phone-device" :aria-label="phone.t('Common.phone')">
-      <div class="phone-device__island" aria-hidden="true"></div>
+    <section
+      class="phone-device"
+      :style="phoneDeviceStyle"
+      :aria-label="phone.t('Common.phone')"
+    >
       <div class="phone-screen" :class="{ 'phone-screen--app': isAppRoute }">
-        <k-app theme="ios" dark safe-areas class="phone-app">
+        <k-app
+          theme="ios"
+          :dark="phone.isDarkMode"
+          safe-areas
+          class="phone-app"
+          :class="{
+            dark: phone.isDarkMode,
+            'phone-app--light': !phone.isDarkMode,
+          }"
+        >
           <PhoneStatusBar />
           <SpringboardView />
           <RouterView v-slot="{ Component }">
@@ -61,6 +88,13 @@ onBeforeUnmount(() => {
           <PhoneHomeIndicator />
         </k-app>
       </div>
+      <img
+        class="phone-device__frame"
+        :src="phoneFrameImage"
+        alt=""
+        aria-hidden="true"
+        draggable="false"
+      />
     </section>
   </main>
 </template>
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 9ea04d6..5b965be 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -43,35 +43,35 @@ button {
   width: min(39vh, 390px);
   aspect-ratio: 390/844;
   padding: min(1.05vh, 10px);
-  overflow: hidden;
+  overflow: visible;
   pointer-events: auto;
-  background: linear-gradient(145deg, #41434a, #090a0d 38%, #2b2d32);
-  border: 1px solid #ffffff38;
+  background: transparent;
+  border: 0;
   border-radius: min(5.2vh, 52px);
-  box-shadow:
-    0 4vh 10vh #0009,
-    inset 0 0 0 1px #ffffff1f;
+  transform: scale(var(--phone-scale, 1));
+  transition: transform 0.25s ease;
+  box-shadow: none;
+  filter: drop-shadow(0 4vh 10vh #0009);
 }
-.phone-device__island {
+.phone-device__frame {
   position: absolute;
-  top: min(2.05vh, 20px);
-  left: 50%;
-  z-index: 80;
-  width: min(9.2vh, 92px);
-  height: min(2.85vh, 28px);
-  transform: translateX(-50%);
-  background: #050506;
-  border-radius: 999px;
-  box-shadow: inset 0 -1px 1px #ffffff12;
+  z-index: 100;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+  pointer-events: none;
 }
 .phone-screen {
   position: relative;
   container-type: size;
-  width: 100%;
-  height: 100%;
+  margin: auto;
+  margin-top: 0.9vh;
+  width: 94%;
+  height: 97%;
   overflow: hidden;
   background: #08080a;
-  border-radius: min(4.25vh, 42px);
+  border-radius: 4vh;
 }
 .phone-app {
   position: absolute !important;
@@ -1763,6 +1763,118 @@ button {
 .reference-settings .wallpaper-picker button {
   height: 105px;
 }
+.konsta-settings {
+  padding: 0;
+  overflow: hidden;
+  background: #000;
+  color: #fff;
+}
+.settings-konsta-list {
+  margin-top: 17px !important;
+  margin-bottom: 17px !important;
+}
+.settings-konsta-navbar {
+  z-index: 8;
+  margin-top: 44px;
+  flex: none;
+}
+.settings-subpage-scroll {
+  height: calc(100% - 88px);
+  padding: 1px 0 48px;
+  overflow-y: auto;
+}
+.settings-app-icon {
+  width: 32px;
+  height: 32px;
+  display: block;
+  object-fit: contain;
+}
+.settings-notification-app {
+  padding: 20px 20px 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 9px;
+}
+.settings-notification-app img {
+  width: 66px;
+  height: 66px;
+  object-fit: contain;
+}
+.settings-notification-app strong {
+  font-size: 17px;
+}
+.settings-range-row,
+.settings-scale-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 11px;
+}
+.settings-range-row > div,
+.settings-scale-row > div {
+  flex: 1;
+}
+.settings-scale-row > span {
+  font-size: 13px;
+}
+.settings-scale-row > strong {
+  font-size: 21px;
+}
+.settings-check {
+  color: #0a84ff;
+}
+.settings-frame-picker {
+  margin: 0 16px 22px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 11px;
+}
+.settings-frame-picker button {
+  min-width: 0;
+  padding: 9px 6px 7px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  border: 2px solid transparent;
+  border-radius: 13px;
+  background: #1c1c1e;
+  color: inherit;
+  font-size: 10px;
+}
+.settings-frame-picker button.active {
+  border-color: #0a84ff;
+}
+.settings-frame-picker img {
+  width: 40px;
+  height: 82px;
+  object-fit: fill;
+}
+.settings-wallpaper-picker {
+  margin-top: 10px;
+}
+.phone-app--light .konsta-settings {
+  background: #f2f2f7;
+  color: #000;
+}
+.phone-app--light .settings-search,
+.phone-app--light .settings-account,
+.phone-app--light .settings-frame-picker button {
+  background: #fff;
+}
+.phone-app--light .settings-search {
+  color: #8e8e93;
+}
+.phone-app--light .settings-search input {
+  color: #000;
+}
+.phone-app--light .settings-account small {
+  color: #666;
+}
+.phone-screen--app .phone-app--light .phone-status-bar {
+  color: #000;
+}
 * {
   scrollbar-width: none;
 }
diff --git a/frontend/src/config/appearance.ts b/frontend/src/config/appearance.ts
new file mode 100644
index 0000000..9ebeed0
--- /dev/null
+++ b/frontend/src/config/appearance.ts
@@ -0,0 +1,14 @@
+import blackFrame from '@/assets/img/frames/black.webp'
+import blueFrame from '@/assets/img/frames/blue.webp'
+import greenFrame from '@/assets/img/frames/green.webp'
+import lavenderFrame from '@/assets/img/frames/lavender.webp'
+import whiteFrame from '@/assets/img/frames/white.webp'
+import type { PhoneFrameId } from '@/utils/preferences'
+
+export const PHONE_FRAME_IMAGES: Record<PhoneFrameId, string> = {
+  black: blackFrame,
+  blue: blueFrame,
+  green: greenFrame,
+  lavender: lavenderFrame,
+  white: whiteFrame,
+}
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 1b31b9a..001b182 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -1,9 +1,11 @@
 import { defineStore } from 'pinia'
 
-import type { AppLaunchOrigin } from '@/types/apps'
+import type { AppLaunchOrigin, PhoneAppId } from '@/types/apps'
 import { clampPage } from '@/utils/pages'
 import {
   readPhonePreferences,
+  type AppNotificationPreferences,
+  type PhonePreferencesV1,
   type WallpaperId,
   writePhonePreferences,
 } from '@/utils/preferences'
@@ -132,32 +134,61 @@ const defaultLocales: LocaleTree = {
     settings: {
       name: 'Settings',
       searchPlaceholder: 'Search',
-      wifi: 'Wi-Fi',
-      bluetooth: 'Bluetooth',
       airplaneMode: 'Airplane Mode',
+      streamerMode: 'Streamer Mode',
       wallpaper: 'Wallpaper',
       on: 'On',
+      off: 'Off',
       accountName: 'Sky Citizen',
       accountDetail: 'Apple ID, iCloud, Media & Purchases',
-      mobileServices: 'Mobile Services',
-      personalHotspot: 'Personal Hotspot',
-      vpn: 'VPN',
       notifications: 'Notifications',
       sounds: 'Sounds & Haptics',
-      focus: 'Focus',
-      screenTime: 'Screen Time',
-      general: 'General',
-      display: 'Display & Brightness',
-      homeScreen: 'Home Screen & App Library',
-      accessibility: 'Accessibility',
-      battery: 'Battery',
-      privacy: 'Privacy & Security',
-      passwords: 'Passwords',
+      general: 'General Settings',
+      appearance: 'Appearance',
+      allowNotifications: 'Allow Notifications',
+      notificationSounds: 'Sounds',
+      ringtoneVolume: 'Ringtone Volume',
+      notificationVolume: 'Notification Volume',
+      ringtone: 'Ringtone',
+      notificationSound: 'Notification Sound',
+      appearanceMode: 'Appearance Mode',
+      automatic: 'Automatic',
+      light: 'Light',
+      dark: 'Dark',
+      phoneScale: 'Phone Scale',
+      phoneFrame: 'Phone Frame',
+      about: 'About',
+      deviceName: 'Device Name',
+      deviceNameValue: 'Sky Phone',
+      softwareVersion: 'Software Version',
+      language: 'Language',
+      languageValue: 'English',
+      localStorage: 'Local Storage',
+      localStorageValue: 'On Device',
+      back: 'Settings',
       wallpaperPicker: 'Built-in Wallpapers',
       toggle: {
-        wifi: 'Toggle Wi-Fi',
-        bluetooth: 'Toggle Bluetooth',
         airplaneMode: 'Toggle Airplane Mode',
+        streamerMode: 'Toggle Streamer Mode',
+        notifications: 'Toggle notifications for {app}',
+        notificationSounds: 'Toggle notification sounds for {app}',
+      },
+      frames: {
+        black: 'Black',
+        blue: 'Blue',
+        green: 'Green',
+        lavender: 'Lavender',
+        white: 'White',
+      },
+      ringtones: {
+        skyline: 'Skyline',
+        horizon: 'Horizon',
+        pulse: 'Pulse',
+      },
+      notificationSoundsList: {
+        chime: 'Chime',
+        signal: 'Signal',
+        soft: 'Soft',
       },
       wallpapers: {
         midnight: 'Midnight wallpaper',
@@ -224,7 +255,15 @@ export const usePhoneStore = defineStore('phone', {
     launchOrigin: null as AppLaunchOrigin | null,
     locales: defaultLocales,
     preferences: readPhonePreferences(),
+    systemDarkMode: window.matchMedia('(prefers-color-scheme: dark)').matches,
   }),
+  getters: {
+    isDarkMode(state): boolean {
+      if (state.preferences.settings.appearanceMode === 'dark') return true
+      if (state.preferences.settings.appearanceMode === 'light') return false
+      return state.systemDarkMode
+    },
+  },
   actions: {
     close(): void {
       this.isOpen = false
@@ -240,25 +279,42 @@ export const usePhoneStore = defineStore('phone', {
     setLaunchOrigin(origin: AppLaunchOrigin | null): void {
       this.launchOrigin = origin
     },
-    setSetting(
-      key: Exclude<keyof typeof this.preferences.settings, 'wallpaper'>,
+    setAppNotification(
+      appId: PhoneAppId,
+      key: keyof AppNotificationPreferences,
       value: boolean,
+    ): void {
+      this.preferences.settings.notifications[appId][key] = value
+      writePhonePreferences(this.preferences)
+    },
+    setPreference<K extends keyof PhonePreferencesV1['settings']>(
+      key: K,
+      value: PhonePreferencesV1['settings'][K],
     ): void {
       this.preferences.settings[key] = value
       writePhonePreferences(this.preferences)
     },
+    setSystemDarkMode(value: boolean): void {
+      this.systemDarkMode = value
+    },
     setWallpaper(wallpaper: WallpaperId): void {
       this.preferences.settings.wallpaper = wallpaper
       writePhonePreferences(this.preferences)
     },
-    t(path: string): string {
+    t(path: string, replacements: Record<string, string> = {}): string {
       const translated = getByPath(this.locales, path)
       const fallback = getByPath(defaultLocales, path)
-      return typeof translated === 'string'
-        ? translated
-        : typeof fallback === 'string'
-          ? fallback
-          : path
+      const value =
+        typeof translated === 'string'
+          ? translated
+          : typeof fallback === 'string'
+            ? fallback
+            : path
+      return Object.entries(replacements).reduce(
+        (result, [key, replacement]) =>
+          result.split(`{${key}}`).join(replacement),
+        value,
+      )
     },
   },
 })
diff --git a/frontend/src/utils/preferences.test.ts b/frontend/src/utils/preferences.test.ts
index 0fc4fa4..5a2a007 100644
--- a/frontend/src/utils/preferences.test.ts
+++ b/frontend/src/utils/preferences.test.ts
@@ -11,10 +11,46 @@ describe('preferences', () => {
     const value = parsePhonePreferences(
       JSON.stringify({
         version: 1,
-        settings: { wifi: false, wallpaper: 'ember' },
+        settings: {
+          appearanceMode: 'light',
+          notificationVolume: 45,
+          notifications: {
+            camera: { enabled: false, sounds: false },
+          },
+          phoneScale: 110,
+          wallpaper: 'ember',
+        },
       }),
     )
-    expect(value.settings.wifi).toBe(false)
+    expect(value.settings.appearanceMode).toBe('light')
+    expect(value.settings.notificationVolume).toBe(45)
+    expect(value.settings.notifications.camera).toEqual({
+      enabled: false,
+      sounds: false,
+    })
+    expect(value.settings.notifications.clock.enabled).toBe(true)
+    expect(value.settings.phoneScale).toBe(110)
     expect(value.settings.wallpaper).toBe('ember')
   })
+
+  it('clamps ranges and rejects unknown choices', () => {
+    const value = parsePhonePreferences(
+      JSON.stringify({
+        version: 1,
+        settings: {
+          appearanceMode: 'neon',
+          frame: 'gold',
+          notificationVolume: -10,
+          phoneScale: 500,
+          ringtoneVolume: 120,
+        },
+      }),
+    )
+
+    expect(value.settings.appearanceMode).toBe('automatic')
+    expect(value.settings.frame).toBe('black')
+    expect(value.settings.notificationVolume).toBe(0)
+    expect(value.settings.phoneScale).toBe(115)
+    expect(value.settings.ringtoneVolume).toBe(100)
+  })
 })
diff --git a/frontend/src/utils/preferences.ts b/frontend/src/utils/preferences.ts
index 43f359c..8deaa77 100644
--- a/frontend/src/utils/preferences.ts
+++ b/frontend/src/utils/preferences.ts
@@ -1,34 +1,126 @@
+import type { PhoneAppId } from '@/types/apps'
+
 export const PHONE_PREFERENCES_KEY = 'sky_phone.preferences.v1'
 
-export type WallpaperId = 'midnight' | 'aurora' | 'ember'
+export const APPEARANCE_MODE_IDS = ['automatic', 'light', 'dark'] as const
+export const PHONE_FRAME_IDS = [
+  'black',
+  'blue',
+  'green',
+  'lavender',
+  'white',
+] as const
+export const RINGTONE_IDS = ['skyline', 'horizon', 'pulse'] as const
+export const NOTIFICATION_SOUND_IDS = ['chime', 'signal', 'soft'] as const
+export const WALLPAPER_IDS = ['midnight', 'aurora', 'ember'] as const
+
+export type AppearanceMode = (typeof APPEARANCE_MODE_IDS)[number]
+export type PhoneFrameId = (typeof PHONE_FRAME_IDS)[number]
+export type RingtoneId = (typeof RINGTONE_IDS)[number]
+export type NotificationSoundId = (typeof NOTIFICATION_SOUND_IDS)[number]
+export type WallpaperId = (typeof WALLPAPER_IDS)[number]
+export type AppNotificationPreferences = {
+  enabled: boolean
+  sounds: boolean
+}
 
 export type PhonePreferencesV1 = {
   settings: {
     airplaneMode: boolean
-    bluetooth: boolean
-    cellular: boolean
-    personalHotspot: boolean
-    vpn: boolean
+    appearanceMode: AppearanceMode
+    frame: PhoneFrameId
+    notificationSound: NotificationSoundId
+    notificationVolume: number
+    notifications: Record<PhoneAppId, AppNotificationPreferences>
+    phoneScale: number
+    ringtone: RingtoneId
+    ringtoneVolume: number
+    streamerMode: boolean
     wallpaper: WallpaperId
-    wifi: boolean
   }
   version: 1
 }
 
+const DEFAULT_APP_NOTIFICATIONS: Record<
+  PhoneAppId,
+  AppNotificationPreferences
+> = {
+  'app-store': { enabled: true, sounds: true },
+  calculator: { enabled: true, sounds: true },
+  camera: { enabled: true, sounds: true },
+  clock: { enabled: true, sounds: true },
+  photos: { enabled: true, sounds: true },
+  settings: { enabled: true, sounds: true },
+}
+
 export const DEFAULT_PHONE_PREFERENCES: PhonePreferencesV1 = {
   settings: {
     airplaneMode: false,
-    bluetooth: true,
-    cellular: true,
-    personalHotspot: false,
-    vpn: false,
+    appearanceMode: 'automatic',
+    frame: 'black',
+    notificationSound: 'chime',
+    notificationVolume: 70,
+    notifications: DEFAULT_APP_NOTIFICATIONS,
+    phoneScale: 100,
+    ringtone: 'skyline',
+    ringtoneVolume: 80,
+    streamerMode: false,
     wallpaper: 'midnight',
-    wifi: true,
   },
   version: 1,
 }
 
-export const WALLPAPER_IDS: WallpaperId[] = ['midnight', 'aurora', 'ember']
+function readBoolean(value: unknown, fallback: boolean): boolean {
+  return typeof value === 'boolean' ? value : fallback
+}
+
+function readNumber(
+  value: unknown,
+  fallback: number,
+  minimum: number,
+  maximum: number,
+): number {
+  return typeof value === 'number' && Number.isFinite(value)
+    ? Math.min(maximum, Math.max(minimum, value))
+    : fallback
+}
+
+function readChoice<T extends string>(
+  value: unknown,
+  choices: readonly T[],
+  fallback: T,
+): T {
+  return typeof value === 'string' && choices.includes(value as T)
+    ? (value as T)
+    : fallback
+}
+
+function readNotifications(
+  value: unknown,
+): Record<PhoneAppId, AppNotificationPreferences> {
+  const source =
+    value && typeof value === 'object'
+      ? (value as Partial<
+          Record<PhoneAppId, Partial<AppNotificationPreferences>>
+        >)
+      : {}
+  const notifications = structuredClone(DEFAULT_APP_NOTIFICATIONS)
+
+  for (const appId of Object.keys(notifications) as PhoneAppId[]) {
+    notifications[appId] = {
+      enabled: readBoolean(
+        source[appId]?.enabled,
+        DEFAULT_APP_NOTIFICATIONS[appId].enabled,
+      ),
+      sounds: readBoolean(
+        source[appId]?.sounds,
+        DEFAULT_APP_NOTIFICATIONS[appId].sounds,
+      ),
+    }
+  }
+
+  return notifications
+}
 
 export function parsePhonePreferences(raw: string | null): PhonePreferencesV1 {
   if (!raw) return structuredClone(DEFAULT_PHONE_PREFERENCES)
@@ -43,28 +135,48 @@ export function parsePhonePreferences(raw: string | null): PhonePreferencesV1 {
     const defaults = DEFAULT_PHONE_PREFERENCES.settings
     return {
       settings: {
-        airplaneMode:
-          typeof settings.airplaneMode === 'boolean'
-            ? settings.airplaneMode
-            : defaults.airplaneMode,
-        bluetooth:
-          typeof settings.bluetooth === 'boolean'
-            ? settings.bluetooth
-            : defaults.bluetooth,
-        cellular:
-          typeof settings.cellular === 'boolean'
-            ? settings.cellular
-            : defaults.cellular,
-        personalHotspot:
-          typeof settings.personalHotspot === 'boolean'
-            ? settings.personalHotspot
-            : defaults.personalHotspot,
-        vpn: typeof settings.vpn === 'boolean' ? settings.vpn : defaults.vpn,
-        wallpaper: WALLPAPER_IDS.includes(settings.wallpaper as WallpaperId)
-          ? (settings.wallpaper as WallpaperId)
-          : defaults.wallpaper,
-        wifi:
-          typeof settings.wifi === 'boolean' ? settings.wifi : defaults.wifi,
+        airplaneMode: readBoolean(settings.airplaneMode, defaults.airplaneMode),
+        appearanceMode: readChoice(
+          settings.appearanceMode,
+          APPEARANCE_MODE_IDS,
+          defaults.appearanceMode,
+        ),
+        frame: readChoice(settings.frame, PHONE_FRAME_IDS, defaults.frame),
+        notificationSound: readChoice(
+          settings.notificationSound,
+          NOTIFICATION_SOUND_IDS,
+          defaults.notificationSound,
+        ),
+        notificationVolume: readNumber(
+          settings.notificationVolume,
+          defaults.notificationVolume,
+          0,
+          100,
+        ),
+        notifications: readNotifications(settings.notifications),
+        phoneScale: readNumber(
+          settings.phoneScale,
+          defaults.phoneScale,
+          85,
+          115,
+        ),
+        ringtone: readChoice(
+          settings.ringtone,
+          RINGTONE_IDS,
+          defaults.ringtone,
+        ),
+        ringtoneVolume: readNumber(
+          settings.ringtoneVolume,
+          defaults.ringtoneVolume,
+          0,
+          100,
+        ),
+        streamerMode: readBoolean(settings.streamerMode, defaults.streamerMode),
+        wallpaper: readChoice(
+          settings.wallpaper,
+          WALLPAPER_IDS,
+          defaults.wallpaper,
+        ),
       },
       version: 1,
     }
diff --git a/frontend/src/views/apps/SettingsApp.vue b/frontend/src/views/apps/SettingsApp.vue
index 4850a0a..ad47a78 100644
--- a/frontend/src/views/apps/SettingsApp.vue
+++ b/frontend/src/views/apps/SettingsApp.vue
@@ -1,158 +1,589 @@
 <script setup lang="ts">
 import {
-  Accessibility,
-  BatteryMedium,
+  kBlockTitle,
+  kList,
+  kListItem,
+  kNavbar,
+  kNavbarBackLink,
+  kPage,
+  kRange,
+  kToggle,
+} from 'konsta/vue'
+import {
   BellRing,
-  Bluetooth,
+  Check,
   ChevronRight,
-  Clock3,
-  Focus,
-  Globe2,
-  Grid2X2,
-  KeyRound,
-  LockKeyhole,
+  EyeOff,
   Monitor,
   Plane,
-  Radio,
   Search,
   Settings,
-  Smartphone,
   Sun,
   UserRound,
+  Volume1,
   Volume2,
-  Wifi,
 } from 'lucide-vue-next'
 import { computed, ref } from 'vue'
 
+import { PHONE_FRAME_IMAGES } from '@/config/appearance'
+import { PHONE_APPS } from '@/config/apps'
 import { usePhoneStore } from '@/stores/phone'
-import { WALLPAPER_IDS } from '@/utils/preferences'
+import type { PhoneAppDefinition, PhoneAppId } from '@/types/apps'
+import {
+  APPEARANCE_MODE_IDS,
+  NOTIFICATION_SOUND_IDS,
+  PHONE_FRAME_IDS,
+  RINGTONE_IDS,
+  WALLPAPER_IDS,
+  type AppearanceMode,
+  type NotificationSoundId,
+  type PhoneFrameId,
+  type RingtoneId,
+} from '@/utils/preferences'
+
+type SettingsView =
+  | 'root'
+  | 'notifications'
+  | 'notification-detail'
+  | 'sounds'
+  | 'general'
+  | 'appearance'
+  | 'wallpaper'
+type RootToggleKey = 'airplaneMode' | 'streamerMode'
+type SubmenuView = Exclude<SettingsView, 'root' | 'notification-detail'>
 
 const phone = usePhoneStore()
 const query = ref('')
-const groups = [
-  [
-    { key: 'airplaneMode', icon: Plane, color: '#ff9500', toggle: true },
-    {
-      key: 'wifi',
-      icon: Wifi,
-      color: '#0a84ff',
-      value: 'SkyNet 5G',
-      toggle: true,
-    },
-    {
-      key: 'bluetooth',
-      icon: Bluetooth,
-      color: '#0a84ff',
-      valueKey: 'Apps.settings.on',
-      toggle: true,
-    },
-    { key: 'mobileServices', icon: Radio, color: '#30d158' },
-    { key: 'personalHotspot', icon: Smartphone, color: '#30d158' },
-    { key: 'vpn', icon: Globe2, color: '#0a84ff' },
-  ],
-  [
-    { key: 'notifications', icon: BellRing, color: '#ff453a' },
-    { key: 'sounds', icon: Volume2, color: '#ff2d55' },
-    { key: 'focus', icon: Focus, color: '#5e5ce6' },
-    { key: 'screenTime', icon: Clock3, color: '#5e5ce6' },
-  ],
-  [
-    { key: 'general', icon: Settings, color: '#8e8e93' },
-    { key: 'display', icon: Sun, color: '#0a84ff' },
-    { key: 'homeScreen', icon: Grid2X2, color: '#5e5ce6' },
-    { key: 'accessibility', icon: Accessibility, color: '#0a84ff' },
-    { key: 'wallpaper', icon: Monitor, color: '#64d2ff' },
-    { key: 'battery', icon: BatteryMedium, color: '#30d158' },
-    { key: 'privacy', icon: LockKeyhole, color: '#0a84ff' },
-  ],
-  [{ key: 'passwords', icon: KeyRound, color: '#636366' }],
+const activeView = ref<SettingsView>('root')
+const selectedNotificationAppId = ref<PhoneAppId>('calculator')
+
+const toggleRows = [
+  { key: 'airplaneMode' as const, icon: Plane, color: '#ff9500' },
+  { key: 'streamerMode' as const, icon: EyeOff, color: '#af52de' },
 ]
-const filteredGroups = computed(() =>
-  groups
-    .map((group) =>
-      group.filter((row) =>
-        phone
-          .t(`Apps.settings.${row.key}`)
-          .toLowerCase()
-          .includes(query.value.toLowerCase()),
-      ),
-    )
-    .filter((group) => group.length),
+const serviceRows = [
+  {
+    key: 'notifications',
+    view: 'notifications' as const,
+    icon: BellRing,
+    color: '#ff453a',
+  },
+  {
+    key: 'sounds',
+    view: 'sounds' as const,
+    icon: Volume2,
+    color: '#ff2d55',
+  },
+]
+const preferenceRows = [
+  {
+    key: 'general',
+    view: 'general' as const,
+    icon: Settings,
+    color: '#8e8e93',
+  },
+  {
+    key: 'appearance',
+    view: 'appearance' as const,
+    icon: Sun,
+    color: '#0a84ff',
+  },
+  {
+    key: 'wallpaper',
+    view: 'wallpaper' as const,
+    icon: Monitor,
+    color: '#64d2ff',
+  },
+]
+
+const normalizedQuery = computed(() => query.value.trim().toLowerCase())
+const visibleToggleRows = computed(() =>
+  toggleRows.filter((row) => matchesSearch(row.key)),
 )
+const visibleServiceRows = computed(() =>
+  serviceRows.filter((row) => matchesSearch(row.key)),
+)
+const visiblePreferenceRows = computed(() =>
+  preferenceRows.filter((row) => matchesSearch(row.key)),
+)
+const notificationApps = computed(() =>
+  [...PHONE_APPS].sort((left, right) => left.gridOrder - right.gridOrder),
+)
+const selectedNotificationApp = computed(
+  () =>
+    PHONE_APPS.find((app) => app.id === selectedNotificationAppId.value) ??
+    PHONE_APPS[0],
+)
+const activeTitle = computed(() => {
+  if (activeView.value === 'notification-detail') {
+    return selectedNotificationApp.value
+      ? phone.t(selectedNotificationApp.value.labelKey)
+      : phone.t('Apps.settings.notifications')
+  }
+  return phone.t(`Apps.settings.${activeView.value}`)
+})
+
+function matchesSearch(key: string): boolean {
+  return (
+    !normalizedQuery.value ||
+    phone
+      .t(`Apps.settings.${key}`)
+      .toLowerCase()
+      .includes(normalizedQuery.value)
+  )
+}
+
+function openView(view: SubmenuView): void {
+  activeView.value = view
+}
+
+function openNotificationApp(app: PhoneAppDefinition): void {
+  selectedNotificationAppId.value = app.id
+  activeView.value = 'notification-detail'
+}
+
+function goBack(): void {
+  activeView.value =
+    activeView.value === 'notification-detail' ? 'notifications' : 'root'
+}
+
+function toggleRootSetting(key: RootToggleKey): void {
+  phone.setPreference(key, !phone.preferences.settings[key])
+}
+
+function updateVolume(
+  key: 'notificationVolume' | 'phoneScale' | 'ringtoneVolume',
+  event: Event,
+): void {
+  phone.setPreference(
+    key,
+    Number.parseInt((event.target as HTMLInputElement).value, 10),
+  )
+}
+
+function selectAppearanceMode(mode: AppearanceMode): void {
+  phone.setPreference('appearanceMode', mode)
+}
+
+function selectFrame(frame: PhoneFrameId): void {
+  phone.setPreference('frame', frame)
+}
+
+function selectRingtone(ringtone: RingtoneId): void {
+  phone.setPreference('ringtone', ringtone)
+}
+
+function selectNotificationSound(sound: NotificationSoundId): void {
+  phone.setPreference('notificationSound', sound)
+}
 </script>
 
 <template>
-  <main class="native-app reference-settings">
-    <section class="settings-scroll">
+  <k-page class="native-app konsta-settings">
+    <section v-if="activeView === 'root'" class="settings-scroll">
       <h1>{{ phone.t('Apps.settings.name') }}</h1>
       <div class="settings-search">
-        <Search :size="17" /><input
+        <Search :size="17" />
+        <input
           v-model="query"
           :placeholder="phone.t('Apps.settings.searchPlaceholder')"
+          type="search"
         />
       </div>
+
       <article class="settings-account">
         <span><UserRound :size="34" /></span>
         <div>
-          <strong>{{ phone.t('Apps.settings.accountName') }}</strong
-          ><small>{{ phone.t('Apps.settings.accountDetail') }}</small>
+          <strong>{{ phone.t('Apps.settings.accountName') }}</strong>
+          <small>{{ phone.t('Apps.settings.accountDetail') }}</small>
         </div>
         <ChevronRight :size="19" />
       </article>
-      <section
-        v-for="(group, groupIndex) in filteredGroups"
-        :key="groupIndex"
-        class="reference-settings-group"
+
+      <k-list
+        v-if="visibleToggleRows.length"
+        strong
+        inset
+        class="settings-konsta-list"
       >
-        <article v-for="row in group" :key="row.key">
-          <span class="settings-symbol" :style="{ background: row.color }"
-            ><component :is="row.icon" :size="16"
-          /></span>
-          <div>
-            <strong>{{ phone.t(`Apps.settings.${row.key}`) }}</strong
-            ><small v-if="row.value">{{ row.value }}</small
-            ><small v-else-if="row.valueKey">{{ phone.t(row.valueKey) }}</small>
-          </div>
-          <button
-            v-if="row.toggle"
-            class="ios-switch"
-            :class="{
-              active:
-                phone.preferences.settings[
-                  row.key as 'airplaneMode' | 'wifi' | 'bluetooth'
-                ],
-            }"
-            type="button"
-            :aria-label="phone.t(`Apps.settings.toggle.${row.key}`)"
-            @click="
-              phone.setSetting(
-                row.key as 'airplaneMode' | 'wifi' | 'bluetooth',
-                !phone.preferences.settings[
-                  row.key as 'airplaneMode' | 'wifi' | 'bluetooth'
-                ],
-              )
-            "
-          >
-            <span /></button
-          ><ChevronRight v-else :size="18" class="settings-chevron" />
-        </article>
-      </section>
-      <h2 class="settings-section-title">
-        {{ phone.t('Apps.settings.wallpaperPicker') }}
-      </h2>
-      <section class="wallpaper-picker">
-        <button
-          v-for="wallpaper in WALLPAPER_IDS"
-          :key="wallpaper"
-          type="button"
-          :class="[
-            `wallpaper--${wallpaper}`,
-            { active: phone.preferences.settings.wallpaper === wallpaper },
-          ]"
-          :aria-label="phone.t(`Apps.settings.wallpapers.${wallpaper}`)"
-          @click="phone.setWallpaper(wallpaper)"
-        />
-      </section>
+        <k-list-item
+          v-for="row in visibleToggleRows"
+          :key="row.key"
+          :title="phone.t(`Apps.settings.${row.key}`)"
+        >
+          <template #media>
+            <span class="settings-symbol" :style="{ background: row.color }">
+              <component :is="row.icon" :size="16" />
+            </span>
+          </template>
+          <template #after>
+            <k-toggle
+              component="div"
+              :checked="phone.preferences.settings[row.key]"
+              :aria-label="phone.t(`Apps.settings.toggle.${row.key}`)"
+              @change="toggleRootSetting(row.key)"
+            />
+          </template>
+        </k-list-item>
+      </k-list>
+
+      <k-list
+        v-if="visibleServiceRows.length"
+        strong
+        inset
+        class="settings-konsta-list"
+      >
+        <k-list-item
+          v-for="row in visibleServiceRows"
+          :key="row.key"
+          link
+          link-component="button"
+          :title="phone.t(`Apps.settings.${row.key}`)"
+          @click="openView(row.view)"
+        >
+          <template #media>
+            <span class="settings-symbol" :style="{ background: row.color }">
+              <component :is="row.icon" :size="16" />
+            </span>
+          </template>
+        </k-list-item>
+      </k-list>
+
+      <k-list
+        v-if="visiblePreferenceRows.length"
+        strong
+        inset
+        class="settings-konsta-list"
+      >
+        <k-list-item
+          v-for="row in visiblePreferenceRows"
+          :key="row.key"
+          link
+          link-component="button"
+          :title="phone.t(`Apps.settings.${row.key}`)"
+          @click="openView(row.view)"
+        >
+          <template #media>
+            <span class="settings-symbol" :style="{ background: row.color }">
+              <component :is="row.icon" :size="16" />
+            </span>
+          </template>
+        </k-list-item>
+      </k-list>
     </section>
-  </main>
+
+    <template v-else>
+      <k-navbar :title="activeTitle" class="settings-konsta-navbar">
+        <template #left>
+          <k-navbar-back-link
+            component="button"
+            :show-text="false"
+            :text="phone.t('Apps.settings.back')"
+            :aria-label="phone.t('Apps.settings.back')"
+            @click="goBack"
+          />
+        </template>
+      </k-navbar>
+
+      <section class="settings-subpage-scroll">
+        <template v-if="activeView === 'notifications'">
+          <k-list strong inset class="settings-konsta-list">
+            <k-list-item
+              v-for="app in notificationApps"
+              :key="app.id"
+              link
+              link-component="button"
+              :title="phone.t(app.labelKey)"
+              :after="
+                phone.t(
+                  phone.preferences.settings.notifications[app.id].enabled
+                    ? 'Apps.settings.on'
+                    : 'Apps.settings.off',
+                )
+              "
+              @click="openNotificationApp(app)"
+            >
+              <template #media>
+                <img
+                  class="settings-app-icon"
+                  :src="app.iconImage"
+                  alt=""
+                  draggable="false"
+                />
+              </template>
+            </k-list-item>
+          </k-list>
+        </template>
+
+        <template
+          v-else-if="
+            activeView === 'notification-detail' && selectedNotificationApp
+          "
+        >
+          <div class="settings-notification-app">
+            <img
+              :src="selectedNotificationApp.iconImage"
+              alt=""
+              draggable="false"
+            />
+            <strong>{{ phone.t(selectedNotificationApp.labelKey) }}</strong>
+          </div>
+          <k-list strong inset class="settings-konsta-list">
+            <k-list-item :title="phone.t('Apps.settings.allowNotifications')">
+              <template #after>
+                <k-toggle
+                  component="div"
+                  :checked="
+                    phone.preferences.settings.notifications[
+                      selectedNotificationApp.id
+                    ].enabled
+                  "
+                  :aria-label="
+                    phone.t('Apps.settings.toggle.notifications', {
+                      app: phone.t(selectedNotificationApp.labelKey),
+                    })
+                  "
+                  @change="
+                    phone.setAppNotification(
+                      selectedNotificationApp.id,
+                      'enabled',
+                      !phone.preferences.settings.notifications[
+                        selectedNotificationApp.id
+                      ].enabled,
+                    )
+                  "
+                />
+              </template>
+            </k-list-item>
+            <k-list-item :title="phone.t('Apps.settings.notificationSounds')">
+              <template #after>
+                <k-toggle
+                  component="div"
+                  :disabled="
+                    !phone.preferences.settings.notifications[
+                      selectedNotificationApp.id
+                    ].enabled
+                  "
+                  :checked="
+                    phone.preferences.settings.notifications[
+                      selectedNotificationApp.id
+                    ].sounds
+                  "
+                  :aria-label="
+                    phone.t('Apps.settings.toggle.notificationSounds', {
+                      app: phone.t(selectedNotificationApp.labelKey),
+                    })
+                  "
+                  @change="
+                    phone.setAppNotification(
+                      selectedNotificationApp.id,
+                      'sounds',
+                      !phone.preferences.settings.notifications[
+                        selectedNotificationApp.id
+                      ].sounds,
+                    )
+                  "
+                />
+              </template>
+            </k-list-item>
+          </k-list>
+        </template>
+
+        <template v-else-if="activeView === 'sounds'">
+          <k-block-title>
+            {{ phone.t('Apps.settings.ringtoneVolume') }}
+          </k-block-title>
+          <k-list strong inset class="settings-konsta-list settings-range-list">
+            <k-list-item>
+              <template #inner>
+                <div class="settings-range-row">
+                  <Volume1 :size="17" />
+                  <k-range
+                    :value="phone.preferences.settings.ringtoneVolume"
+                    :min="0"
+                    :max="100"
+                    @input="updateVolume('ringtoneVolume', $event)"
+                  />
+                  <Volume2 :size="19" />
+                </div>
+              </template>
+            </k-list-item>
+          </k-list>
+
+          <k-block-title>
+            {{ phone.t('Apps.settings.notificationVolume') }}
+          </k-block-title>
+          <k-list strong inset class="settings-konsta-list settings-range-list">
+            <k-list-item>
+              <template #inner>
+                <div class="settings-range-row">
+                  <Volume1 :size="17" />
+                  <k-range
+                    :value="phone.preferences.settings.notificationVolume"
+                    :min="0"
+                    :max="100"
+                    @input="updateVolume('notificationVolume', $event)"
+                  />
+                  <Volume2 :size="19" />
+                </div>
+              </template>
+            </k-list-item>
+          </k-list>
+
+          <k-block-title>{{ phone.t('Apps.settings.ringtone') }}</k-block-title>
+          <k-list strong inset class="settings-konsta-list">
+            <k-list-item
+              v-for="ringtone in RINGTONE_IDS"
+              :key="ringtone"
+              link
+              link-component="button"
+              :chevron="false"
+              :title="phone.t(`Apps.settings.ringtones.${ringtone}`)"
+              @click="selectRingtone(ringtone)"
+            >
+              <template #after>
+                <Check
+                  v-if="phone.preferences.settings.ringtone === ringtone"
+                  :size="19"
+                  class="settings-check"
+                />
+              </template>
+            </k-list-item>
+          </k-list>
+
+          <k-block-title>
+            {{ phone.t('Apps.settings.notificationSound') }}
+          </k-block-title>
+          <k-list strong inset class="settings-konsta-list">
+            <k-list-item
+              v-for="sound in NOTIFICATION_SOUND_IDS"
+              :key="sound"
+              link
+              link-component="button"
+              :chevron="false"
+              :title="phone.t(`Apps.settings.notificationSoundsList.${sound}`)"
+              @click="selectNotificationSound(sound)"
+            >
+              <template #after>
+                <Check
+                  v-if="phone.preferences.settings.notificationSound === sound"
+                  :size="19"
+                  class="settings-check"
+                />
+              </template>
+            </k-list-item>
+          </k-list>
+        </template>
+
+        <template v-else-if="activeView === 'general'">
+          <k-block-title>{{ phone.t('Apps.settings.about') }}</k-block-title>
+          <k-list strong inset class="settings-konsta-list">
+            <k-list-item
+              :title="phone.t('Apps.settings.deviceName')"
+              :after="phone.t('Apps.settings.deviceNameValue')"
+            />
+            <k-list-item
+              :title="phone.t('Apps.settings.softwareVersion')"
+              after="0.1.0"
+            />
+            <k-list-item
+              :title="phone.t('Apps.settings.language')"
+              :after="phone.t('Apps.settings.languageValue')"
+            />
+            <k-list-item
+              :title="phone.t('Apps.settings.localStorage')"
+              :after="phone.t('Apps.settings.localStorageValue')"
+            />
+          </k-list>
+        </template>
+
+        <template v-else-if="activeView === 'appearance'">
+          <k-block-title>
+            {{ phone.t('Apps.settings.appearanceMode') }}
+          </k-block-title>
+          <k-list strong inset class="settings-konsta-list">
+            <k-list-item
+              v-for="mode in APPEARANCE_MODE_IDS"
+              :key="mode"
+              link
+              link-component="button"
+              :chevron="false"
+              :title="phone.t(`Apps.settings.${mode}`)"
+              @click="selectAppearanceMode(mode)"
+            >
+              <template #after>
+                <Check
+                  v-if="phone.preferences.settings.appearanceMode === mode"
+                  :size="19"
+                  class="settings-check"
+                />
+              </template>
+            </k-list-item>
+          </k-list>
+
+          <k-block-title>
+            {{ phone.t('Apps.settings.phoneScale') }} ·
+            {{ phone.preferences.settings.phoneScale }}%
+          </k-block-title>
+          <k-list strong inset class="settings-konsta-list settings-range-list">
+            <k-list-item>
+              <template #inner>
+                <div class="settings-scale-row">
+                  <span>A</span>
+                  <k-range
+                    :value="phone.preferences.settings.phoneScale"
+                    :min="85"
+                    :max="115"
+                    :step="5"
+                    @input="updateVolume('phoneScale', $event)"
+                  />
+                  <strong>A</strong>
+                </div>
+              </template>
+            </k-list-item>
+          </k-list>
+
+          <k-block-title>
+            {{ phone.t('Apps.settings.phoneFrame') }}
+          </k-block-title>
+          <div class="settings-frame-picker">
+            <button
+              v-for="frame in PHONE_FRAME_IDS"
+              :key="frame"
+              type="button"
+              :class="{
+                active: phone.preferences.settings.frame === frame,
+              }"
+              :aria-label="phone.t(`Apps.settings.frames.${frame}`)"
+              @click="selectFrame(frame)"
+            >
+              <img :src="PHONE_FRAME_IMAGES[frame]" alt="" draggable="false" />
+              <span>{{ phone.t(`Apps.settings.frames.${frame}`) }}</span>
+            </button>
+          </div>
+        </template>
+
+        <template v-else-if="activeView === 'wallpaper'">
+          <k-block-title>
+            {{ phone.t('Apps.settings.wallpaperPicker') }}
+          </k-block-title>
+          <section class="wallpaper-picker settings-wallpaper-picker">
+            <button
+              v-for="wallpaper in WALLPAPER_IDS"
+              :key="wallpaper"
+              type="button"
+              :class="[
+                `wallpaper--${wallpaper}`,
+                {
+                  active: phone.preferences.settings.wallpaper === wallpaper,
+                },
+              ]"
+              :aria-label="phone.t(`Apps.settings.wallpapers.${wallpaper}`)"
+              @click="phone.setWallpaper(wallpaper)"
+            />
+          </section>
+        </template>
+      </section>
+    </template>
+  </k-page>
 </template>
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index 479ac9c..cbdf66e 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -54,13 +54,23 @@ Locales["en"] = {
                 },
             },
             settings = {
-                name = "Settings", searchPlaceholder = "Search", wifi = "Wi-Fi", bluetooth = "Bluetooth",
-                airplaneMode = "Airplane Mode", wallpaper = "Wallpaper", on = "On", accountName = "Sky Citizen",
-                accountDetail = "Apple ID, iCloud, Media & Purchases", mobileServices = "Mobile Services", personalHotspot = "Personal Hotspot",
-                vpn = "VPN", notifications = "Notifications", sounds = "Sounds & Haptics", focus = "Focus", screenTime = "Screen Time",
-                general = "General", display = "Display & Brightness", homeScreen = "Home Screen & App Library", accessibility = "Accessibility",
-                battery = "Battery", privacy = "Privacy & Security", passwords = "Passwords", wallpaperPicker = "Built-in Wallpapers",
-                toggle = { wifi = "Toggle Wi-Fi", bluetooth = "Toggle Bluetooth", airplaneMode = "Toggle Airplane Mode" },
+                name = "Settings", searchPlaceholder = "Search", airplaneMode = "Airplane Mode", streamerMode = "Streamer Mode",
+                wallpaper = "Wallpaper", on = "On", off = "Off", accountName = "Sky Citizen",
+                accountDetail = "Apple ID, iCloud, Media & Purchases", notifications = "Notifications", sounds = "Sounds & Haptics",
+                general = "General Settings", appearance = "Appearance", allowNotifications = "Allow Notifications",
+                notificationSounds = "Sounds", ringtoneVolume = "Ringtone Volume", notificationVolume = "Notification Volume",
+                ringtone = "Ringtone", notificationSound = "Notification Sound", appearanceMode = "Appearance Mode",
+                automatic = "Automatic", light = "Light", dark = "Dark", phoneScale = "Phone Scale", phoneFrame = "Phone Frame",
+                about = "About", deviceName = "Device Name", deviceNameValue = "Sky Phone", softwareVersion = "Software Version",
+                language = "Language", languageValue = "English", localStorage = "Local Storage", localStorageValue = "On Device",
+                back = "Settings", wallpaperPicker = "Built-in Wallpapers",
+                toggle = {
+                    airplaneMode = "Toggle Airplane Mode", streamerMode = "Toggle Streamer Mode",
+                    notifications = "Toggle notifications for {app}", notificationSounds = "Toggle notification sounds for {app}",
+                },
+                frames = { black = "Black", blue = "Blue", green = "Green", lavender = "Lavender", white = "White" },
+                ringtones = { skyline = "Skyline", horizon = "Horizon", pulse = "Pulse" },
+                notificationSoundsList = { chime = "Chime", signal = "Signal", soft = "Soft" },
                 wallpapers = { midnight = "Midnight wallpaper", aurora = "Aurora wallpaper", ember = "Ember wallpaper" },
             },
         },
diff --git a/sky_phone/source/html/index.html b/sky_phone/source/html/index.html
index 7430e82..5c3577a 100644
--- a/sky_phone/source/html/index.html
+++ b/sky_phone/source/html/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sky Phone</title>
-    <script type="module" crossorigin src="./assets/sky-index-CWWwvo5a.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/sky-index-RGdqVA4s.css">
+    <script type="module" crossorigin src="./assets/sky-index-CRNziHJr.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/sky-index-DINlYwL-.css">
   </head>
   <body>
     <div id="app"></div>