diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 9bf21f7..c980f76 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -10,6 +10,7 @@ import {
 } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+import { SkyProvider } from '@/ui'
 import PhoneHomeIndicator from '@/components/PhoneHomeIndicator.vue'
 import PhoneControlCenter from '@/components/PhoneControlCenter.vue'
 import PhoneMediaCapture from '@/components/PhoneMediaCapture.vue'
@@ -293,7 +294,6 @@ const activeAppId = computed(() =>
 const WHITE_STATUS_BAR_APP_IDS = new Set([
   'calculator',
   'camera',
-  'darkchat',
   'fliptok',
   'neon-drop',
   'sky-flappy',
@@ -331,9 +331,7 @@ const activitySuspended = ref(false)
 const simPicker = ref<SimPickerPayload | null>(null)
 const setupRequired = computed(
   () =>
-    !(
-      isDevelopment && setupDevelopmentSkipped.value
-    ) &&
+    !(isDevelopment && setupDevelopmentSkipped.value) &&
     (!phone.preferences.settings.setupCompleted ||
       (isDevelopment &&
         developmentParameters.has('setupPreview') &&
@@ -494,7 +492,10 @@ async function bootstrapUnlockedPhoneData(): Promise<void> {
     try {
       await task()
     } catch (error) {
-      console.error('[sky_phone] Failed to bootstrap unlocked phone data.', error)
+      console.error(
+        '[sky_phone] Failed to bootstrap unlocked phone data.',
+        error,
+      )
     }
   }
 }
@@ -1476,7 +1477,6 @@ onBeforeUnmount(() => {
                 :style="phoneDisplayStyle"
                 :class="{
                   dark: phone.isDarkMode,
-                  'phone-app--darkchat': route.params.appId === 'darkchat',
                   'phone-app--light': !phone.isDarkMode,
                   'phone-app--messages': route.params.appId === 'messages',
                   'phone-app--status-light':
@@ -1498,19 +1498,25 @@ onBeforeUnmount(() => {
                   @lock="lockPhone"
                 />
                 <SpringboardView v-if="!isDevelopmentRoute && !setupRequired" />
-                <RouterView v-slot="{ Component }">
-                  <Transition :name="appTransitionName">
-                    <component
-                      :is="Component"
-                      v-if="
-                        !setupRequired && (isAppRoute || isDevelopmentRoute)
-                      "
-                      :key="
-                        isDevelopmentRoute ? String(route.name) : route.path
-                      "
-                    />
-                  </Transition>
-                </RouterView>
+                <SkyProvider
+                  class="phone-app-theme"
+                  :dark="phone.isDarkMode"
+                  safe-areas
+                >
+                  <RouterView v-slot="{ Component }">
+                    <Transition :name="appTransitionName">
+                      <component
+                        :is="Component"
+                        v-if="
+                          !setupRequired && (isAppRoute || isDevelopmentRoute)
+                        "
+                        :key="
+                          isDevelopmentRoute ? String(route.name) : route.path
+                        "
+                      />
+                    </Transition>
+                  </RouterView>
+                </SkyProvider>
                 <PhoneHomeIndicator v-if="!isLocked && !setupRequired" />
                 <PhoneControlCenter
                   v-if="!setupRequired"
diff --git a/frontend/src/assets/img/app-icons/feather.svg b/frontend/src/assets/img/app-icons/feather.svg
index e69de29..6f3a090 100644
--- a/frontend/src/assets/img/app-icons/feather.svg
+++ b/frontend/src/assets/img/app-icons/feather.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" role="img" aria-label="Feather">
+  <defs>
+    <linearGradient id="sky" x1="18" y1="14" x2="108" y2="116" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#71C8FF"/>
+      <stop offset="0.48" stop-color="#438CF5"/>
+      <stop offset="1" stop-color="#2757D8"/>
+    </linearGradient>
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="5" stdDeviation="5" flood-color="#0B2F82" flood-opacity=".25"/>
+    </filter>
+  </defs>
+  <rect width="128" height="128" rx="30" fill="url(#sky)"/>
+  <path d="M96.7 28.3C79.9 28 59.4 38.6 48.2 55.8c-8.7 13.3-9.8 27.7-6 36.7l-10 10.2a5 5 0 0 0 7.1 7l10.1-10.3c9 3.2 21.3 1.3 31.7-6.4 14.8-11 22.9-31.9 20.8-59.9-.2-2.7-2.5-4.8-5.2-4.8Z" fill="#fff" filter="url(#shadow)"/>
+  <path d="M45.5 97.7c12.7-15.3 25.9-28.6 42.4-42.3M54.5 85.8l21.8-.7M66 72.6l1.4-20" fill="none" stroke="#347BE7" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/src/assets/img/app-icons/local-pages.webp b/frontend/src/assets/img/app-icons/local-pages.webp
index e69de29..91bd3b1 100644
Binary files a/frontend/src/assets/img/app-icons/local-pages.webp and b/frontend/src/assets/img/app-icons/local-pages.webp differ
diff --git a/frontend/src/assets/img/weather-icons/clear.webp b/frontend/src/assets/img/weather-icons/clear.webp
index e69de29..ea4240c 100644
Binary files a/frontend/src/assets/img/weather-icons/clear.webp and b/frontend/src/assets/img/weather-icons/clear.webp differ
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 84d8af8..4e2c2cf 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -347,6 +347,10 @@ button {
   color-scheme: light;
 }
 
+.phone-app-theme {
+  display: contents;
+}
+
 /* FiveM CEF blur-free glass fallback. Ultimate keeps the native effects. */
 .phone-app--performance {
   --phone-performance-glass: rgb(28 28 31 / 96%);
@@ -390,12 +394,7 @@ button {
   --tw-scale-x: 1 !important;
   --tw-scale-y: 1 !important;
   --tw-scale-z: 1 !important;
-  transform:
-    translate3d(
-      var(--tw-translate-x, 0),
-      var(--tw-translate-y, 0),
-      0
-    )
+  transform: translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), 0)
     scale(1) !important;
 }
 .phone-app--performance .k-glass {
@@ -403,8 +402,7 @@ button {
 }
 /* Konsta's default background utility is the solid-surface opt-in marker.
    Custom color utilities replace it, so semantic Glass colors stay intact. */
-.phone-app--performance
-  .k-glass:where([class~='bg-ios-light-glass']) {
+.phone-app--performance .k-glass:where([class~='bg-ios-light-glass']) {
   background: var(--phone-performance-glass) !important;
 }
 .phone-app--performance
@@ -1402,17 +1400,6 @@ button {
   }
 }
 
-/* DarkChat is intentionally independent from the phone appearance setting. */
-.phone-app--darkchat,
-.phone-app--darkchat .phone-app-window,
-.phone-app--darkchat .phone-app-window__content {
-  background: #000 !important;
-  color-scheme: dark;
-}
-.phone-app--darkchat .phone-status-bar {
-  color: #fff !important;
-  --status-bar-color: #fff;
-}
 .app-icon--darkchat {
   background: #050507;
 }
@@ -2847,6 +2834,8 @@ button {
   padding: 0;
   border: 1px solid #ffffff73;
   box-shadow: 0 1px 4px #0009;
+  background: #8e8e93;
+  color: #000;
 }
 .app-icon-item--editing:not(.app-icon-item--dragging) .app-icon-button {
   animation: app-icon-wobble 0.15s ease-in-out infinite alternate;
@@ -3412,8 +3401,8 @@ button {
   padding-top: 46px;
   padding-bottom: 25px;
   overflow: hidden;
-  background: #000;
-  color: #fff;
+  background: var(--sky-bg);
+  color: var(--sky-text);
 }
 
 .weather-app {
@@ -3564,7 +3553,12 @@ button {
     infinite;
 }
 .weather-app__sun-glow {
-  background: radial-gradient(circle at 74% 18%, #ffe6a766 0 5%, #ffcb6c28 14%, transparent 31%);
+  background: radial-gradient(
+    circle at 74% 18%,
+    #ffe6a766 0 5%,
+    #ffcb6c28 14%,
+    transparent 31%
+  );
 }
 .weather-app__stars {
   background:
@@ -3721,7 +3715,7 @@ button {
 }
 
 .banking-navbar {
-  --k-safe-area-top: 46px;
+  --sky-navbar-safe-area-top: 46px;
   position: absolute;
   z-index: 5;
   top: 0;
@@ -3774,6 +3768,14 @@ button {
   text-align: center;
 }
 
+.banking-empty {
+  min-height: 0;
+  margin: 0;
+  padding: 24px;
+  border: 0;
+  background: transparent;
+}
+
 .banking-empty p {
   margin: 0 0 8px;
   color: rgb(208 220 248 / 58%);
@@ -4124,15 +4126,63 @@ button {
   line-height: 1.4;
 }
 
-.banking-sheet__content > button:last-child {
-  margin-top: 15px;
-}
-
-.banking-sheet__content > button:last-child > span {
+.banking-sheet__content > .sky-button:last-child {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
+  margin-top: 15px;
+}
+
+.phone-app--light .banking-app {
+  --bank-green: #168b5b;
+  background:
+    radial-gradient(ellipse at 50% -8%, rgb(65 203 205 / 24%), transparent 42%),
+    radial-gradient(circle at 92% 18%, rgb(45 118 255 / 16%), transparent 34%),
+    linear-gradient(180deg, #edf9fb 0%, #f4f7fc 42%, #eef1f7 100%) !important;
+  color: var(--sky-text);
+}
+
+.phone-app--light .banking-app::before {
+  background:
+    radial-gradient(circle at 8% 54%, rgb(28 170 153 / 8%), transparent 31%),
+    radial-gradient(circle at 78% 72%, rgb(77 75 255 / 6%), transparent 30%),
+    linear-gradient(180deg, rgb(255 255 255 / 38%), transparent 32%);
+}
+
+.phone-app--light .banking-navbar {
+  color: var(--sky-text);
+}
+
+.phone-app--light .banking-loading,
+.phone-app--light .banking-empty,
+.phone-app--light .banking-empty p,
+.phone-app--light .banking-balance__label,
+.phone-app--light .banking-balance__trend,
+.phone-app--light .banking-action,
+.phone-app--light .banking-section-title > svg,
+.phone-app--light .banking-no-transactions,
+.phone-app--light .banking-activity-hero span,
+.phone-app--light .banking-activity-hero small,
+.phone-app--light .banking-chart-legend,
+.phone-app--light .banking-chart__day span,
+.phone-app--light .banking-modal__close,
+.phone-app--light .banking-sheet__content > p,
+.phone-app--light .banking-contact-picker > span,
+.phone-app--light .banking-contact-picker > p {
+  color: var(--sky-muted);
+}
+
+.phone-app--light .banking-balance__label small,
+.phone-app--light .banking-no-transactions,
+.phone-app--light .banking-modal__close {
+  border-color: var(--sky-hairline);
+  background: rgb(255 255 255 / 52%);
+}
+
+.phone-app--light .banking-action--primary,
+.phone-app--light .banking-action--primary .banking-action__icon {
+  color: #ffffff;
 }
 .weather-scroll {
   z-index: 1;
@@ -4146,7 +4196,9 @@ button {
   justify-content: center;
   margin-top: -56px;
   opacity: 0;
-  transition: opacity 160ms ease, transform 160ms ease;
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
   pointer-events: none;
 }
 .weather-pull-refresh.is-visible {
@@ -4237,9 +4289,15 @@ button {
   margin-top: 2px;
   color: #b7d9ec;
 }
-.weather-detail-card:nth-child(1) svg { color: var(--weather-accent-gold); }
-.weather-detail-card:nth-child(3) svg { color: #79d8d0; }
-.weather-detail-card:nth-child(4) svg { color: var(--weather-accent-cyan); }
+.weather-detail-card:nth-child(1) svg {
+  color: var(--weather-accent-gold);
+}
+.weather-detail-card:nth-child(3) svg {
+  color: #79d8d0;
+}
+.weather-detail-card:nth-child(4) svg {
+  color: var(--weather-accent-cyan);
+}
 .weather-detail-card span {
   color: var(--weather-muted);
   font-size: 9px;
@@ -4253,7 +4311,9 @@ button {
   font-weight: 680;
   line-height: 1.1;
 }
-.weather-detail-card:nth-child(4) strong { color: var(--weather-accent-cyan); }
+.weather-detail-card:nth-child(4) strong {
+  color: var(--weather-accent-cyan);
+}
 .weather-panel {
   margin: 0;
   overflow: hidden;
@@ -4270,7 +4330,10 @@ button {
   font-weight: 650;
   letter-spacing: -0.01em;
 }
-.weather-panel h2 svg { color: var(--weather-accent-cyan); opacity: 0.8; }
+.weather-panel h2 svg {
+  color: var(--weather-accent-cyan);
+  opacity: 0.8;
+}
 .weather-hourly {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
@@ -4387,10 +4450,14 @@ button {
   min-height: 0;
   flex: 1;
   overflow-y: auto;
-  padding: 0;
+  padding: 0 0
+    calc(var(--sky-tabbar-height) + var(--sky-safe-area-bottom) + 16px);
 }
-.clock-navbar__empty-inner {
-  height: 0;
+.clock-navbar.sky-navbar--no-navigation {
+  min-height: calc(
+    var(--sky-navbar-safe-area-top) + var(--sky-navbar-large-title-height)
+  );
+  padding-top: var(--sky-navbar-safe-area-top);
 }
 .phone-call-content {
   min-height: 0;
@@ -4564,6 +4631,9 @@ button {
   width: calc(100% - 32px);
   margin: 18px 16px 0;
 }
+.clock-alarm-save.sky-link {
+  color: #ff9f0a;
+}
 .clock-tool {
   margin: 0;
   padding: 0 16px;
diff --git a/frontend/src/components/AlarmEditor.vue b/frontend/src/components/AlarmEditor.vue
index 3c95e3a..0e63097 100644
--- a/frontend/src/components/AlarmEditor.vue
+++ b/frontend/src/components/AlarmEditor.vue
@@ -1,25 +1,21 @@
 <script setup lang="ts">
 import {
-  kBlock,
-  kBlockTitle,
-  kButton,
-  kLink,
-  kList,
-  kListInput,
-  kListItem,
-  kNavbar,
-} from 'konsta/vue'
+  SkyBlock as kBlock,
+  SkyBlockTitle as kBlockTitle,
+  SkyButton as kButton,
+  SkyField as kListInput,
+  SkyLink as kLink,
+  SkyList as kList,
+  SkyListItem as kListItem,
+  SkyNavbar as kNavbar,
+} from '@/ui'
 import { ChevronRight, Check, X } from 'lucide-vue-next'
 import { reactive, ref } from 'vue'
 
 import AlarmSoundMenu from '@/components/AlarmSoundMenu.vue'
 import { usePhoneStore } from '@/stores/phone'
 import TimeWheelPicker from '@/components/TimeWheelPicker.vue'
-import {
-  type Alarm,
-  type AlarmDraft,
-  WEEKDAY_IDS,
-} from '@/utils/alarms'
+import { type Alarm, type AlarmDraft, WEEKDAY_IDS } from '@/utils/alarms'
 
 const props = defineProps<{ alarm?: Alarm }>()
 const emit = defineEmits<{
@@ -44,14 +40,6 @@ const draft = reactive<AlarmDraft>({
   time: props.alarm?.time ?? '07:00',
   weekdays: [...(props.alarm?.weekdays ?? [])],
 })
-const dangerColors = {
-  tonalBgIos: 'bg-red-500/15 active:bg-red-500/25',
-  tonalTextIos: 'text-red-500',
-}
-const saveLinkColors = {
-  navbarTextIos: 'text-[#ff9f0a]',
-}
-
 function setNote(event: Event): void {
   draft.note = (event.target as HTMLInputElement).value.slice(0, 80)
 }
@@ -97,7 +85,7 @@ function toggleWeekday(weekday: number): void {
       <k-link
         component="button"
         icon-only
-        :colors="saveLinkColors"
+        class="clock-alarm-save"
         :link-props="{ type: 'button' }"
         :aria-label="phone.t('Common.save')"
         @click="save"
@@ -168,8 +156,7 @@ function toggleWeekday(weekday: number): void {
       v-if="alarm"
       large
       rounded
-      tonal
-      :colors="dangerColors"
+      variant="danger"
       class="clock-alarm-delete"
       @click="emit('delete')"
     >
diff --git a/frontend/src/components/AlarmSoundMenu.vue b/frontend/src/components/AlarmSoundMenu.vue
index 33e22b8..a4fb6f5 100644
--- a/frontend/src/components/AlarmSoundMenu.vue
+++ b/frontend/src/components/AlarmSoundMenu.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { kList, kListItem, kNavbar, kNavbarBackLink } from 'konsta/vue'
+import {
+  SkyList as kList,
+  SkyListItem as kListItem,
+  SkyNavbar as kNavbar,
+  SkyNavbarBackLink as kNavbarBackLink,
+} from '@/ui'
 import { Check } from 'lucide-vue-next'
 import { onBeforeUnmount } from 'vue'
 
diff --git a/frontend/src/components/AppIcon.vue b/frontend/src/components/AppIcon.vue
index 6485deb..eecbe58 100644
--- a/frontend/src/components/AppIcon.vue
+++ b/frontend/src/components/AppIcon.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { kBadge } from 'konsta/vue'
+import { SkyBadge as kBadge } from '@/ui'
 import { Minus } from 'lucide-vue-next'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
@@ -100,10 +100,6 @@ const unreadCount = computed(() => {
   if (props.app.id === 'companies') return companies.unreadCount
   return 0
 })
-const notificationBadgeColors = {
-  bg: 'bg-[#ff3b30]',
-  text: 'text-white',
-}
 const calendarWeekday = computed(() =>
   new Intl.DateTimeFormat(phone.lang, { weekday: 'short' })
     .format(calendarToday.value)
@@ -142,11 +138,6 @@ function launch(event: MouseEvent): void {
 
   void router.push(props.app.route)
 }
-const removeBadgeColors = {
-  bg: 'bg-[#8e8e93]',
-  text: 'text-black',
-}
-
 function clearHold(): void {
   if (holdTimer !== undefined) window.clearTimeout(holdTimer)
   holdTimer = undefined
@@ -321,7 +312,7 @@ onBeforeUnmount(() => {
           v-if="unreadCount"
           class="app-icon-badge"
           :small="compact"
-          :colors="notificationBadgeColors"
+          tone="danger"
         >
           {{ unreadCount > 99 ? '99+' : unreadCount }}
         </k-badge>
@@ -343,7 +334,7 @@ onBeforeUnmount(() => {
       @click.stop="emit('remove')"
       @pointerdown.stop
     >
-      <k-badge class="app-icon-remove__badge" :colors="removeBadgeColors">
+      <k-badge class="app-icon-remove__badge" tone="neutral">
         <Minus :size="15" :stroke-width="3" aria-hidden="true" />
       </k-badge>
     </button>
diff --git a/frontend/src/components/CustomAppFrame.vue b/frontend/src/components/CustomAppFrame.vue
index 135be23..ecdb250 100644
--- a/frontend/src/components/CustomAppFrame.vue
+++ b/frontend/src/components/CustomAppFrame.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { kBlock, kButton, kPage, kPreloader } from 'konsta/vue'
+import {
+  SkyAppPage as kPage,
+  SkyBlock as kBlock,
+  SkyButton as kButton,
+  SkySpinner as kPreloader,
+} from '@/ui'
 import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -478,7 +483,7 @@ watch(() => catalog.openRequests[props.app.id], flushOpenRequest, {
   text-align: center;
 }
 
-.custom-app-state :deep(.k-block) {
+.custom-app-state :deep(.sky-block) {
   margin: 0;
 }
 
diff --git a/frontend/src/components/account/AccountLogoutDialog.vue b/frontend/src/components/account/AccountLogoutDialog.vue
index 55ee3ba..0248f29 100644
--- a/frontend/src/components/account/AccountLogoutDialog.vue
+++ b/frontend/src/components/account/AccountLogoutDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { kDialog, kDialogButton } from 'konsta/vue'
+import { SkyDialog as kDialog, SkyDialogButton as kDialogButton } from '@/ui'
 
 import { useAppAuthStore, type AppAuthId } from '@/stores/app-auth'
 import { useCrewLinkStore } from '@/stores/crewlink'
@@ -39,7 +39,9 @@ function confirmLogout(): void {
 
 <template>
   <k-dialog :opened="opened" @backdropclick="close">
-    <template #title>{{ phone.t('Common.signOutTitle', { app: appName }) }}</template>
+    <template #title>{{
+      phone.t('Common.signOutTitle', { app: appName })
+    }}</template>
     <p>{{ phone.t('Common.signOutBody', { app: appName }) }}</p>
     <template #buttons>
       <k-dialog-button @click="close">
diff --git a/frontend/src/components/account/AppProfileAuth.vue b/frontend/src/components/account/AppProfileAuth.vue
index e675c2d..3cac30a 100644
--- a/frontend/src/components/account/AppProfileAuth.vue
+++ b/frontend/src/components/account/AppProfileAuth.vue
@@ -8,14 +8,14 @@ import {
   UserRound,
 } from 'lucide-vue-next'
 import {
-  kButton,
-  kGlass,
-  kList,
-  kListInput,
-  kPreloader,
-  kSegmented,
-  kSegmentedButton,
-} from 'konsta/vue'
+  SkyButton as kButton,
+  SkyField as kListInput,
+  SkyGlass as kGlass,
+  SkyList as kList,
+  SkySegmented as kSegmented,
+  SkySegmentedButton as kSegmentedButton,
+  SkySpinner as kPreloader,
+} from '@/ui'
 import { computed } from 'vue'
 
 const props = withDefaults(
@@ -328,7 +328,7 @@ const canSubmit = computed(() => {
   flex: 1;
   gap: 6px;
 }
-.app-profile-auth__photo :deep(.k-button) {
+.app-profile-auth__photo :deep(.sky-button) {
   min-height: 32px;
   justify-content: flex-start;
   gap: 6px;
@@ -410,8 +410,8 @@ const canSubmit = computed(() => {
   font-size: 11px;
 }
 .app-profile-auth__submit {
-  --k-button-bg-color: var(--auth-accent, var(--yellow, #ffd63e));
-  --k-button-text-color: #fff;
+  --sky-app-accent: var(--auth-accent, var(--yellow, #ffd63e));
+  --sky-button-text: #fff;
   width: 100%;
   min-height: 44px;
   display: flex;
diff --git a/frontend/src/components/account/IfruitAppAuth.vue b/frontend/src/components/account/IfruitAppAuth.vue
index a206ce9..4213101 100644
--- a/frontend/src/components/account/IfruitAppAuth.vue
+++ b/frontend/src/components/account/IfruitAppAuth.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import {
-  kButton,
-  kList,
-  kListInput,
-  kPreloader,
-  kSegmented,
-  kSegmentedButton,
-} from 'konsta/vue'
+  SkyButton as kButton,
+  SkyField as kListInput,
+  SkyList as kList,
+  SkySegmented as kSegmented,
+  SkySegmentedButton as kSegmentedButton,
+  SkySpinner as kPreloader,
+} from '@/ui'
 import { computed, ref } from 'vue'
 
 import { useAccountStore } from '@/stores/account'
@@ -36,11 +36,13 @@ const error = ref('')
 
 const canSubmit = computed(() => {
   const normalized = normalizeMailAddress(email.value)
-  const passwordValid = password.value.length >= 6 && password.value.length <= 64
+  const passwordValid =
+    password.value.length >= 6 && password.value.length <= 64
   return Boolean(
     normalized &&
       passwordValid &&
-      (mode.value === 'login' || (confirm.value && confirm.value === password.value)),
+      (mode.value === 'login' ||
+        (confirm.value && confirm.value === password.value)),
   )
 })
 
@@ -101,7 +103,10 @@ async function submit(): Promise<void> {
       <k-segmented-button :active="mode === 'login'" @click="setMode('login')">
         {{ phone.t('Common.appAuth.login') }}
       </k-segmented-button>
-      <k-segmented-button :active="mode === 'register'" @click="setMode('register')">
+      <k-segmented-button
+        :active="mode === 'register'"
+        @click="setMode('register')"
+      >
         {{ phone.t('Common.appAuth.register') }}
       </k-segmented-button>
     </k-segmented>
@@ -144,7 +149,13 @@ async function submit(): Promise<void> {
     <k-button large rounded :disabled="!canSubmit || pending" @click="submit">
       <k-preloader v-if="pending" />
       <template v-else>
-        {{ phone.t(mode === 'login' ? 'Common.appAuth.loginAction' : 'Common.appAuth.registerAction') }}
+        {{
+          phone.t(
+            mode === 'login'
+              ? 'Common.appAuth.loginAction'
+              : 'Common.appAuth.registerAction',
+          )
+        }}
       </template>
     </k-button>
   </section>
@@ -159,7 +170,7 @@ async function submit(): Promise<void> {
   text-align: center;
 }
 .ifruit-app-auth > small {
-  color: var(--k-color-primary);
+  color: var(--sky-app-accent);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.08em;
diff --git a/frontend/src/components/citymarkt/CityMarktSelect.vue b/frontend/src/components/citymarkt/CityMarktSelect.vue
index 4df61b7..c339fb8 100644
--- a/frontend/src/components/citymarkt/CityMarktSelect.vue
+++ b/frontend/src/components/citymarkt/CityMarktSelect.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Check, ChevronDown } from 'lucide-vue-next'
-import { kGlass } from 'konsta/vue'
+import { SkyGlass as kGlass } from '@/ui'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 type SelectOption = {
diff --git a/frontend/src/components/feather/FeatherPostCard.vue b/frontend/src/components/feather/FeatherPostCard.vue
index d771b94..5e27fe9 100644
--- a/frontend/src/components/feather/FeatherPostCard.vue
+++ b/frontend/src/components/feather/FeatherPostCard.vue
@@ -8,7 +8,11 @@ import {
   Share2,
   UserRound,
 } from 'lucide-vue-next'
-import { kButton, kGlass, kIcon } from 'konsta/vue'
+import {
+  SkyButton as kButton,
+  SkyGlass as kGlass,
+  SkyIcon as kIcon,
+} from '@/ui'
 import { computed, ref } from 'vue'
 
 import { usePhoneStore } from '@/stores/phone'
@@ -263,8 +267,8 @@ function relativeTime(timestamp: number): string {
   color: #438cf5;
 }
 .feather-follow {
-  --k-button-bg-color: transparent;
-  --k-button-text-color: var(--feather-blue, #1d9bf0);
+  --sky-app-accent: transparent;
+  --sky-button-text: var(--feather-blue, #1d9bf0);
   width: auto;
   min-width: 58px;
   max-width: 68px;
diff --git a/frontend/src/ui/SkyAppPage.vue b/frontend/src/ui/SkyAppPage.vue
index 653746d..a1389a7 100644
--- a/frontend/src/ui/SkyAppPage.vue
+++ b/frontend/src/ui/SkyAppPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, type CSSProperties } from 'vue'
+import { computed, useAttrs, type CSSProperties } from 'vue'
 
 import { provideSkyPageScroll } from './page-scroll-context'
 import { useSkyTheme } from './theme'
@@ -12,16 +12,18 @@ const props = withDefaults(
     accentSoft?: string
     component?: string
     dark?: boolean
-    label: string
+    label?: string
   }>(),
   {
     accent: '',
     accentSoft: '',
     component: 'main',
     dark: undefined,
+    label: '',
   },
 )
 
+const attrs = useAttrs()
 const theme = useSkyTheme()
 const pageScroll = provideSkyPageScroll()
 const isDark = computed(() => props.dark ?? theme?.dark.value ?? false)
@@ -31,6 +33,11 @@ const effectiveAccent = computed(
 const effectiveAccentSoft = computed(
   () => props.accentSoft || theme?.accentSoft.value || '',
 )
+const accessibleLabel = computed(() => {
+  if (props.label) return props.label
+  const attribute = attrs['aria-label']
+  return typeof attribute === 'string' && attribute ? attribute : undefined
+})
 
 const accentStyle = computed(() =>
   effectiveAccent.value || effectiveAccentSoft.value
@@ -60,7 +67,7 @@ const pageStyle = computed<CSSProperties>(
     class="sky-app-page"
     :class="{ 'sky-app-page--dark': isDark }"
     :style="pageStyle"
-    :aria-label="label"
+    :aria-label="accessibleLabel"
   >
     <div class="sky-app-page__backdrop" aria-hidden="true"></div>
     <slot />
diff --git a/frontend/src/ui/SkyNavbar.test.ts b/frontend/src/ui/SkyNavbar.test.ts
index fbac00b..920955a 100644
--- a/frontend/src/ui/SkyNavbar.test.ts
+++ b/frontend/src/ui/SkyNavbar.test.ts
@@ -60,6 +60,28 @@ describe('SkyNavbar', () => {
     expect(html).toContain('Settings')
   })
 
+  it('keeps migrated boolean sizing and inner hooks compatible', async () => {
+    const html = await renderToString(
+      createSSRApp({
+        render: () =>
+          h(
+            SkyNavbar,
+            {
+              component: 'nav',
+              innerClass: 'custom-inner',
+              large: true,
+              title: 'Clock',
+            },
+            { right: () => h('button', 'Edit') },
+          ),
+      }),
+    )
+
+    expect(html).toMatch(/^<nav/)
+    expect(html).toContain('sky-navbar--large')
+    expect(html).toContain('sky-navbar__inner custom-inner')
+  })
+
   it('renders the extended navigation row only when it has controls', async () => {
     const html = await renderToString(
       createSSRApp({
diff --git a/frontend/src/ui/SkyNavbar.vue b/frontend/src/ui/SkyNavbar.vue
index d9ff3aa..b84f926 100644
--- a/frontend/src/ui/SkyNavbar.vue
+++ b/frontend/src/ui/SkyNavbar.vue
@@ -18,25 +18,38 @@ const props = withDefaults(
   defineProps<{
     backAppearance?: 'plain' | 'surface'
     backLabel?: string
+    centerTitle?: boolean
+    colors?: Record<string, string>
+    component?: string
+    innerClass?: string
+    large?: boolean
+    medium?: boolean
     outline?: boolean
     showBack?: boolean
     showBackText?: boolean
     scrollEl?: HTMLElement | null
     subnavbarClass?: string
     subtitle?: string
-    title: string
+    title?: string
     transparent?: boolean
     variant?: 'compact' | 'large' | 'medium'
   }>(),
   {
     backAppearance: 'plain',
     backLabel: '',
+    centerTitle: true,
+    colors: undefined,
+    component: 'header',
+    innerClass: '',
+    large: false,
+    medium: false,
     outline: false,
     showBack: false,
     showBackText: false,
     subnavbarClass: '',
     subtitle: '',
     transparent: false,
+    title: '',
     variant: 'compact',
   },
 )
@@ -49,12 +62,19 @@ provideSkyNavbar()
 
 const slots = useSlots()
 const pageScroll = useSkyPageScroll()
+const resolvedVariant = computed(() => {
+  if (props.large) return 'large'
+  if (props.medium) return 'medium'
+  return props.variant
+})
 const accessibleBackLabel = computed(() => props.backLabel || props.title)
-const hasExtendedTitle = computed(() => props.variant !== 'compact')
+const hasExtendedTitle = computed(() => resolvedVariant.value !== 'compact')
 const isCollapsible = computed(
   () => hasExtendedTitle.value || props.transparent,
 )
-const titleHeight = computed(() => (props.variant === 'large' ? 52 : 44))
+const titleHeight = computed(() =>
+  resolvedVariant.value === 'large' ? 52 : 44,
+)
 const effectiveScrollElement = computed(() =>
   props.scrollEl === undefined
     ? (pageScroll?.element.value ?? null)
@@ -133,11 +153,12 @@ function hasNavigationRow(): boolean {
 </script>
 
 <template>
-  <header
+  <component
+    :is="component"
     v-bind="$attrs"
     class="sky-navbar"
     :class="[
-      `sky-navbar--${variant}`,
+      `sky-navbar--${resolvedVariant}`,
       {
         'sky-navbar--outline': outline,
         'sky-navbar--transparent': transparent,
@@ -150,7 +171,11 @@ function hasNavigationRow(): boolean {
     <div class="sky-navbar__blur" aria-hidden="true" />
     <div class="sky-navbar__background" aria-hidden="true" />
 
-    <div v-if="hasNavigationRow()" class="sky-navbar__inner">
+    <div
+      v-if="hasNavigationRow()"
+      class="sky-navbar__inner"
+      :class="innerClass"
+    >
       <div v-if="hasLeftContent()" class="sky-navbar__left sky-glass-surface">
         <slot name="left">
           <button
@@ -219,5 +244,5 @@ function hasNavigationRow(): boolean {
     >
       <slot name="subnavbar" />
     </div>
-  </header>
+  </component>
 </template>
diff --git a/frontend/src/ui/SkyTabBar.test.ts b/frontend/src/ui/SkyTabBar.test.ts
index 280ccee..ca12d1b 100644
--- a/frontend/src/ui/SkyTabBar.test.ts
+++ b/frontend/src/ui/SkyTabBar.test.ts
@@ -51,6 +51,21 @@ describe('SkyTabBar', () => {
     expect(html).toContain('sky-tabbar--labels')
   })
 
+  it('keeps migrated component and styling hooks on their intended layers', async () => {
+    const html = await renderToString(
+      createSSRApp(SkyTabBar, {
+        bgClass: 'custom-background',
+        component: 'footer',
+        innerClass: 'custom-inner',
+        label: 'Navigation',
+      }),
+    )
+
+    expect(html).toMatch(/^<footer/)
+    expect(html).toContain('sky-tabbar__background custom-background')
+    expect(html).toContain('sky-tabbar__inner custom-inner')
+  })
+
   it('matches the Konsta iOS glass, density, and moving highlight contract', () => {
     expect(foundation).toMatch(
       /\.sky-tabbar\s*\{[^}]*--sky-tabbar-pane-height:\s*48px[^}]*padding-right:\s*calc\(var\(--sky-safe-area-right\) \+ 16px\)[^}]*padding-bottom:\s*calc\(var\(--sky-safe-area-bottom\) \+ 16px\)/s,
diff --git a/frontend/src/ui/SkyTabBar.vue b/frontend/src/ui/SkyTabBar.vue
index 4374f5b..7422d52 100644
--- a/frontend/src/ui/SkyTabBar.vue
+++ b/frontend/src/ui/SkyTabBar.vue
@@ -6,6 +6,7 @@ import {
   onMounted,
   onUpdated,
   ref,
+  useAttrs,
   type CSSProperties,
 } from 'vue'
 
@@ -15,24 +16,37 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
+    bgClass?: string
+    component?: string
     floating?: boolean
     icons?: boolean
-    label: string
+    innerClass?: string
+    label?: string
     labels?: boolean
   }>(),
   {
+    bgClass: '',
+    component: 'nav',
     floating: true,
     icons: true,
+    innerClass: '',
+    label: '',
     labels: true,
   },
 )
 
+const attrs = useAttrs()
 const links = ref<HTMLElement | null>(null)
 const hasLinks = ref(false)
 const pressed = ref(false)
 const highlightWidth = ref('0%')
 const highlightTransform = ref('translateX(0%)')
 const transitionTimingFunction = ref('')
+const accessibleLabel = computed(() => {
+  if (props.label) return props.label
+  const attribute = attrs['aria-label']
+  return typeof attribute === 'string' && attribute ? attribute : undefined
+})
 let activeIndex = 0
 let newActiveIndex = 0
 let touchRect: DOMRect | null = null
@@ -191,7 +205,8 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <nav
+  <component
+    :is="component"
     v-bind="$attrs"
     class="sky-tabbar"
     :class="{
@@ -199,11 +214,11 @@ onBeforeUnmount(() => {
       'sky-tabbar--icons': props.icons,
       'sky-tabbar--labels': props.labels,
     }"
-    :aria-label="props.label"
+    :aria-label="accessibleLabel"
   >
     <span class="sky-tabbar__blur" aria-hidden="true" />
-    <span class="sky-tabbar__background" aria-hidden="true" />
-    <div class="sky-tabbar__inner">
+    <span class="sky-tabbar__background" :class="bgClass" aria-hidden="true" />
+    <div class="sky-tabbar__inner" :class="innerClass">
       <SkyGlass class="sky-tabbar__pane">
         <div ref="links" class="sky-tabbar__links">
           <slot />
@@ -220,5 +235,5 @@ onBeforeUnmount(() => {
         </span>
       </SkyGlass>
     </div>
-  </nav>
+  </component>
 </template>
diff --git a/frontend/src/ui/controls.css b/frontend/src/ui/controls.css
index d75bb86..48405da 100644
--- a/frontend/src/ui/controls.css
+++ b/frontend/src/ui/controls.css
@@ -80,7 +80,7 @@
   border: 1px solid transparent;
   border-radius: 4px;
   background: var(--sky-app-accent, #007aff);
-  color: #ffffff;
+  color: var(--sky-button-text, #ffffff);
   font-size: 15px;
   font-weight: 500;
   line-height: 1.2;
@@ -1037,7 +1037,7 @@ label.sky-list-item__row {
   min-width: 0;
   flex: 1 1 auto;
   overflow: hidden;
-  color: inherit;
+  color: var(--sky-list-item-title-color, inherit);
   font-size: 17px;
   font-weight: 400;
   line-height: 24px;
diff --git a/frontend/src/ui/controls/SkyLink.vue b/frontend/src/ui/controls/SkyLink.vue
index a09a2d2..98b936a 100644
--- a/frontend/src/ui/controls/SkyLink.vue
+++ b/frontend/src/ui/controls/SkyLink.vue
@@ -9,6 +9,7 @@ const props = withDefaults(
     disabled?: boolean
     href?: string
     iconOnly?: boolean
+    linkProps?: Record<string, unknown>
     type?: 'button' | 'reset' | 'submit'
   }>(),
   {
@@ -16,6 +17,7 @@ const props = withDefaults(
     disabled: false,
     href: undefined,
     iconOnly: false,
+    linkProps: () => ({}),
     type: 'button',
   },
 )
@@ -27,6 +29,7 @@ const emit = defineEmits<{
 const elementProps = computed<Record<string, unknown>>(() => {
   if (props.component === 'a') {
     return {
+      ...props.linkProps,
       'aria-disabled': props.disabled || undefined,
       href: props.disabled ? undefined : props.href,
       tabindex: props.disabled ? -1 : 0,
@@ -34,8 +37,9 @@ const elementProps = computed<Record<string, unknown>>(() => {
   }
 
   return {
+    ...props.linkProps,
     disabled: props.disabled,
-    type: props.type,
+    type: props.linkProps.type ?? props.type,
   }
 })
 
diff --git a/frontend/src/ui/controls/SkyNavbarBackLink.vue b/frontend/src/ui/controls/SkyNavbarBackLink.vue
index d609e10..1d68a21 100644
--- a/frontend/src/ui/controls/SkyNavbarBackLink.vue
+++ b/frontend/src/ui/controls/SkyNavbarBackLink.vue
@@ -5,18 +5,21 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
-    ariaLabel: string
+    ariaLabel?: string
     component?: 'a' | 'button'
     disabled?: boolean
     href?: string
+    linkProps?: Record<string, unknown>
     showText?: boolean
     text?: string
     type?: 'button' | 'reset' | 'submit'
   }>(),
   {
     component: 'button',
+    ariaLabel: '',
     disabled: false,
     href: undefined,
+    linkProps: () => ({}),
     showText: false,
     text: '',
     type: 'button',
@@ -28,7 +31,7 @@ const emit = defineEmits<{
 }>()
 
 const accessibleLabel = computed(
-  () => props.ariaLabel || (props.showText ? props.text : undefined),
+  () => props.ariaLabel || props.text || undefined,
 )
 const elementProps = computed<Record<string, unknown>>(() => {
   const common = {
@@ -37,6 +40,7 @@ const elementProps = computed<Record<string, unknown>>(() => {
 
   if (props.component === 'a') {
     return {
+      ...props.linkProps,
       ...common,
       'aria-disabled': props.disabled || undefined,
       href: props.disabled ? undefined : props.href,
@@ -45,9 +49,10 @@ const elementProps = computed<Record<string, unknown>>(() => {
   }
 
   return {
+    ...props.linkProps,
     ...common,
     disabled: props.disabled,
-    type: props.type,
+    type: props.linkProps.type ?? props.type,
   }
 })
 
diff --git a/frontend/src/ui/controls/SkySearchbar.vue b/frontend/src/ui/controls/SkySearchbar.vue
index 2da2ea8..090e256 100644
--- a/frontend/src/ui/controls/SkySearchbar.vue
+++ b/frontend/src/ui/controls/SkySearchbar.vue
@@ -7,7 +7,7 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
-    clearLabel: string
+    clearLabel?: string
     cancelLabel?: string
     cancelButton?: boolean
     clearButton?: boolean
@@ -29,6 +29,7 @@ const props = withDefaults(
     cancelButton: false,
     cancelLabel: '',
     clearButton: true,
+    clearLabel: '',
     component: 'div',
     disableButton: false,
     disableLabel: '',
@@ -167,7 +168,7 @@ function disable(event: MouseEvent): void {
         v-if="clearButton && localValue"
         class="sky-searchbar__clear"
         type="button"
-        :aria-label="clearLabel"
+        :aria-label="clearLabel || 'Clear search'"
         :disabled="disabled"
         @pointerdown.prevent
         @click="clear($event)"
diff --git a/frontend/src/ui/controls/SkyTabButton.vue b/frontend/src/ui/controls/SkyTabButton.vue
index 1f7c363..44dbb32 100644
--- a/frontend/src/ui/controls/SkyTabButton.vue
+++ b/frontend/src/ui/controls/SkyTabButton.vue
@@ -1,19 +1,27 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 defineOptions({ inheritAttrs: false })
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     active?: boolean
     ariaLabel?: string
+    component?: 'a' | 'button'
     disabled?: boolean
+    href?: string
     label?: string
+    linkProps?: Record<string, unknown>
     type?: 'button' | 'reset' | 'submit'
   }>(),
   {
     active: false,
     ariaLabel: '',
+    component: 'button',
     disabled: false,
+    href: undefined,
     label: '',
+    linkProps: () => ({}),
     type: 'button',
   },
 )
@@ -21,17 +29,33 @@ withDefaults(
 defineEmits<{
   click: [event: MouseEvent]
 }>()
+
+const elementProps = computed<Record<string, unknown>>(() => {
+  if (props.component === 'a') {
+    return {
+      ...props.linkProps,
+      'aria-disabled': props.disabled || undefined,
+      href: props.disabled ? undefined : props.href,
+      tabindex: props.disabled ? -1 : undefined,
+    }
+  }
+
+  return {
+    ...props.linkProps,
+    disabled: props.disabled,
+    type: props.linkProps.type ?? props.type,
+  }
+})
 </script>
 
 <template>
-  <button
-    v-bind="$attrs"
+  <component
+    :is="component"
+    v-bind="{ ...$attrs, ...elementProps }"
     class="sky-tab-button"
     :class="{ 'sky-tab-button--active': active }"
     :aria-current="active ? 'page' : undefined"
     :aria-label="ariaLabel || undefined"
-    :disabled="disabled"
-    :type="type"
     @click="$emit('click', $event)"
   >
     <span v-if="$slots.icon" class="sky-tab-button__icon">
@@ -41,5 +65,5 @@ defineEmits<{
       <slot name="label">{{ label }}</slot>
     </span>
     <slot />
-  </button>
+  </component>
 </template>
diff --git a/frontend/src/ui/foundation.css b/frontend/src/ui/foundation.css
index 94cb11c..c0b3180 100644
--- a/frontend/src/ui/foundation.css
+++ b/frontend/src/ui/foundation.css
@@ -785,6 +785,27 @@
   align-items: stretch;
 }
 
+.sky-tabbar__links > .sky-toolbar-pane {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+  border-radius: inherit;
+  background: transparent;
+  box-shadow: none;
+}
+
+.sky-tabbar__links > .sky-toolbar-pane::after {
+  display: none;
+}
+
+.sky-tabbar__links > .sky-toolbar-pane > .sky-tab-button {
+  min-width: 0;
+  min-height: var(--sky-tabbar-pane-height);
+  flex: 1 1 0;
+}
+
 .sky-tabbar__highlight {
   height: 100%;
   position: absolute;
diff --git a/frontend/src/views/apps/AppTheme.contract.test.ts b/frontend/src/views/apps/AppTheme.contract.test.ts
new file mode 100644
index 0000000..cdd38a8
--- /dev/null
+++ b/frontend/src/views/apps/AppTheme.contract.test.ts
@@ -0,0 +1,53 @@
+import { readdirSync, readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const appShellSource = readFileSync(
+  new URL('../../App.vue', import.meta.url),
+  'utf8',
+)
+const mainCssSource = readFileSync(
+  new URL('../../assets/main.css', import.meta.url),
+  'utf8',
+)
+const appDirectory = new URL('.', import.meta.url)
+const appSources = readdirSync(appDirectory)
+  .filter((file) => file.endsWith('.vue'))
+  .map((file) => ({
+    file,
+    source: readFileSync(new URL(file, appDirectory), 'utf8'),
+  }))
+
+describe('phone app theme contract', () => {
+  it('provides the reactive phone theme to every routed app', () => {
+    expect(appShellSource).toContain('import { SkyProvider }')
+    expect(appShellSource).toContain('class="phone-app-theme"')
+    expect(appShellSource).toContain(':dark="phone.isDarkMode"')
+    expect(appShellSource).toMatch(
+      /<SkyProvider[\s\S]*?<RouterView[\s\S]*?<component/,
+    )
+  })
+
+  it('does not force a routed app permanently into one color mode', () => {
+    for (const { file, source } of appSources) {
+      expect(source, file).not.toMatch(/:dark="(?:true|false)"/)
+    }
+    expect(appShellSource).not.toContain("'phone-app--darkchat'")
+    expect(mainCssSource).not.toContain('.phone-app--darkchat')
+  })
+
+  it('keeps shared app surfaces and known custom apps theme-aware', () => {
+    expect(mainCssSource).toContain('background: var(--sky-bg);')
+    expect(mainCssSource).toContain('color: var(--sky-text);')
+    expect(mainCssSource).toContain('.phone-app--light .banking-app')
+
+    const calculator = appSources.find(
+      ({ file }) => file === 'CalculatorApp.vue',
+    )?.source
+    const mail = appSources.find(({ file }) => file === 'MailApp.vue')?.source
+
+    expect(calculator).toContain("'calculator-app--light': !phone.isDarkMode")
+    expect(mail).toContain('background: var(--sky-bg) !important;')
+    expect(mail).toContain('color: var(--sky-text);')
+  })
+})
diff --git a/frontend/src/views/apps/BankingApp.contract.test.ts b/frontend/src/views/apps/BankingApp.contract.test.ts
new file mode 100644
index 0000000..2587e7c
--- /dev/null
+++ b/frontend/src/views/apps/BankingApp.contract.test.ts
@@ -0,0 +1,40 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const source = readFileSync(
+  new URL('./BankingApp.vue', import.meta.url),
+  'utf8',
+)
+
+describe('Banking app Sky UI migration', () => {
+  it('uses Sky UI instead of Konsta components', () => {
+    expect(source).not.toContain("from 'konsta/vue'")
+    expect(source).not.toMatch(/<\/?k-/)
+
+    for (const component of [
+      'SkyAppPage',
+      'SkyNavbar',
+      'SkyGlass',
+      'SkyCard',
+      'SkyList',
+      'SkyListItem',
+      'SkyField',
+      'SkyTabBar',
+      'SkyTabButton',
+      'SkySheet',
+      'SkyButton',
+      'SkySpinner',
+      'SkyEmptyState',
+      'SkyToast',
+    ]) {
+      expect(source).toContain(`<${component}`)
+    }
+  })
+
+  it('delegates sheet focus and escape handling to SkySheet', () => {
+    expect(source).toContain('@escape="closeAction"')
+    expect(source).not.toContain('handleSheetKeydown')
+    expect(source).not.toContain('handleWindowKeydown')
+  })
+})
diff --git a/frontend/src/views/apps/BankingApp.vue b/frontend/src/views/apps/BankingApp.vue
index 570d6be..c5d7118 100644
--- a/frontend/src/views/apps/BankingApp.vue
+++ b/frontend/src/views/apps/BankingApp.vue
@@ -1,21 +1,4 @@
 <script setup lang="ts">
-import {
-  kButton,
-  kCard,
-  kGlass,
-  kIcon,
-  kLink,
-  kList,
-  kListInput,
-  kListItem,
-  kNavbar,
-  kPage,
-  kPreloader,
-  kSheet,
-  kTabbar,
-  kTabbarLink,
-  kToolbarPane,
-} from 'konsta/vue'
 import {
   ArrowDownLeft,
   ArrowRight,
@@ -42,7 +25,23 @@ import type {
 import type { PhoneContact } from '@/types/phone'
 import { handleEnterAction } from '@/utils/keyboard'
 import { formatPhoneNumber, normalizePhoneNumber } from '@/utils/phone'
-import { SkyToast } from '@/ui'
+import {
+  SkyAppPage,
+  SkyButton,
+  SkyCard,
+  SkyEmptyState,
+  SkyField,
+  SkyGlass,
+  SkyLink,
+  SkyList,
+  SkyListItem,
+  SkyNavbar,
+  SkySheet,
+  SkySpinner,
+  SkyTabBar,
+  SkyTabButton,
+  SkyToast,
+} from '@/ui'
 
 type BankingTab = 'home' | 'activity'
 
@@ -64,7 +63,6 @@ let pullStartY = 0
 let isPulling = false
 let wheelRefreshTimeout: ReturnType<typeof setTimeout> | undefined
 let cooldownToastTimer: ReturnType<typeof setTimeout> | undefined
-let previousFocus: HTMLElement | null = null
 
 function closeCooldownToast(): void {
   cooldownToastOpened.value = false
@@ -241,50 +239,6 @@ function pullWithWheel(event: WheelEvent): void {
   wheelRefreshTimeout = setTimeout(finishPull, 130)
 }
 
-function focusableSheetElements(): HTMLElement[] {
-  const sheet = document.querySelector<HTMLElement>('.banking-sheet__content')
-  if (!sheet) return []
-  return Array.from(
-    sheet.querySelectorAll<HTMLElement>(
-      'button:not(:disabled), input:not(:disabled), [href], [tabindex]:not([tabindex="-1"])',
-    ),
-  )
-}
-
-function handleSheetKeydown(event: KeyboardEvent): void {
-  if (event.key === 'Escape') {
-    event.preventDefault()
-    event.stopPropagation()
-    closeAction()
-    return
-  }
-  if (event.key !== 'Tab') return
-
-  const focusable = focusableSheetElements()
-  if (!focusable.length) {
-    event.preventDefault()
-    return
-  }
-  const first = focusable[0]
-  const last = focusable[focusable.length - 1]
-  if (event.shiftKey && document.activeElement === first) {
-    event.preventDefault()
-    last.focus()
-  } else if (!event.shiftKey && document.activeElement === last) {
-    event.preventDefault()
-    first.focus()
-  }
-}
-
-function handleWindowKeydown(event: KeyboardEvent): void {
-  if (event.key !== 'Escape' || !action.value || event.defaultPrevented) {
-    return
-  }
-  event.preventDefault()
-  event.stopImmediatePropagation()
-  closeAction()
-}
-
 function errorMessage(code: string): string {
   return phone.t(`Apps.banking.errors.${code}`) ===
     `Apps.banking.errors.${code}`
@@ -318,7 +272,6 @@ async function submitAction(): Promise<void> {
 }
 
 onMounted(() => {
-  window.addEventListener('keydown', handleWindowKeydown)
   void banking.load()
 })
 
@@ -334,35 +287,28 @@ watch(
 
 watch(action, async (currentAction) => {
   if (currentAction) {
-    previousFocus =
-      document.activeElement instanceof HTMLElement
-        ? document.activeElement
-        : null
     await nextTick()
     document.getElementById('banking-transfer-target')?.focus()
-    return
   }
-  previousFocus?.focus()
-  previousFocus = null
 })
 
 onBeforeUnmount(() => {
-  window.removeEventListener('keydown', handleWindowKeydown)
   if (wheelRefreshTimeout) clearTimeout(wheelRefreshTimeout)
   if (cooldownToastTimer) clearTimeout(cooldownToastTimer)
-  previousFocus?.focus()
 })
 </script>
 
 <template>
-  <k-page
-    component="main"
+  <SkyAppPage
     class="banking-app pb-safe-24"
-    :colors="{ bgIos: 'bg-transparent' }"
+    :label="phone.t('Apps.banking.name')"
+    :dark="phone.isDarkMode"
+    accent="#2d76ff"
+    accent-soft="rgba(45, 118, 255, 0.18)"
   >
     <div class="banking-app__aurora" aria-hidden="true"></div>
 
-    <k-navbar
+    <SkyNavbar
       class="banking-navbar"
       :aria-hidden="Boolean(action)"
       :inert="Boolean(action)"
@@ -376,23 +322,25 @@ onBeforeUnmount(() => {
       :aria-hidden="Boolean(action)"
       :inert="Boolean(action)"
     >
-      <k-preloader />
+      <SkySpinner :label="phone.t('Common.loading')" />
       <span>{{ phone.t('Common.loading') }}</span>
     </div>
 
-    <div
+    <SkyEmptyState
       v-else-if="!banking.overview"
       class="banking-empty"
       :aria-hidden="Boolean(action)"
+      :body="errorMessage(banking.error)"
       :inert="Boolean(action)"
+      :title="phone.t('Apps.banking.unavailable')"
     >
-      <Landmark :size="34" />
-      <strong>{{ phone.t('Apps.banking.unavailable') }}</strong>
-      <p>{{ errorMessage(banking.error) }}</p>
-      <k-button rounded @click="banking.load(true)">
-        {{ phone.t('Apps.banking.tryAgain') }}
-      </k-button>
-    </div>
+      <template #icon><Landmark :size="34" /></template>
+      <template #actions>
+        <SkyButton rounded @click="banking.load(true)">
+          {{ phone.t('Apps.banking.tryAgain') }}
+        </SkyButton>
+      </template>
+    </SkyEmptyState>
 
     <div
       v-else
@@ -411,10 +359,10 @@ onBeforeUnmount(() => {
         :style="{ transform: `translateY(${pullDistance - pullThreshold}px)` }"
         aria-live="polite"
       >
-        <k-preloader />
+        <SkySpinner :label="phone.t('Common.loading')" />
       </div>
       <template v-if="activeTab === 'home'">
-        <k-glass class="banking-balance">
+        <SkyGlass class="banking-balance">
           <div class="banking-balance__label">
             <span>{{ phone.t('Apps.banking.totalBalance') }}</span>
             <small>#{{ banking.overview.playerId }}</small>
@@ -426,13 +374,13 @@ onBeforeUnmount(() => {
             }}</span>
             {{ phone.t('Apps.banking.recentPeriod') }}
           </div>
-        </k-glass>
+        </SkyGlass>
 
         <section
           class="banking-actions"
           :aria-label="phone.t('Apps.banking.actions')"
         >
-          <k-glass
+          <SkyGlass
             component="button"
             type="button"
             class="banking-action banking-action--primary"
@@ -441,47 +389,47 @@ onBeforeUnmount(() => {
             <span class="banking-action__icon"><Send :size="20" /></span>
             <b>{{ phone.t('Apps.banking.send') }}</b>
             <ChevronRight :size="16" aria-hidden="true" />
-          </k-glass>
+          </SkyGlass>
         </section>
 
-        <k-card class="banking-card banking-accounts">
+        <SkyCard class="banking-card banking-accounts">
           <div class="banking-section-title">
             <h2>{{ phone.t('Apps.banking.accounts') }}</h2>
           </div>
-          <k-list inset strong class="banking-account-list">
-            <k-list-item
+          <SkyList inset strong class="banking-account-list">
+            <SkyListItem
               :title="phone.t('Apps.banking.bankAccount')"
               :after="formatMoney(banking.overview.bank)"
             >
               <template #media><WalletCards :size="18" /></template>
-            </k-list-item>
-            <k-list-item
+            </SkyListItem>
+            <SkyListItem
               :title="phone.t('Apps.banking.cash')"
               :after="formatMoney(banking.overview.cash)"
             >
               <template #media><CircleDollarSign :size="18" /></template>
-            </k-list-item>
-          </k-list>
-        </k-card>
+            </SkyListItem>
+          </SkyList>
+        </SkyCard>
 
         <section class="banking-transactions">
           <div class="banking-section-title">
             <h2>{{ phone.t('Apps.banking.latestTransactions') }}</h2>
-            <k-link
+            <SkyLink
               component="button"
-              :link-props="{ type: 'button' }"
+              type="button"
               @click="activeTab = 'activity'"
             >
               {{ phone.t('Apps.banking.viewAll') }}
-            </k-link>
+            </SkyLink>
           </div>
-          <k-card
+          <SkyCard
             v-if="banking.overview.transactions.length"
             :content-wrap="false"
             class="banking-card banking-transaction-card"
           >
-            <k-list inset strong class="banking-transaction-list">
-              <k-list-item
+            <SkyList inset strong class="banking-transaction-list">
+              <SkyListItem
                 v-for="transaction in banking.overview.transactions.slice(0, 5)"
                 :key="transaction.id"
                 :subtitle="formatDate(transaction.createdAt)"
@@ -505,9 +453,9 @@ onBeforeUnmount(() => {
                     }}
                   </b>
                 </template>
-              </k-list-item>
-            </k-list>
-          </k-card>
+              </SkyListItem>
+            </SkyList>
+          </SkyCard>
           <p v-else class="banking-no-transactions">
             {{ phone.t('Apps.banking.noTransactions') }}
           </p>
@@ -523,7 +471,7 @@ onBeforeUnmount(() => {
           <small>{{ phone.t('Apps.banking.recentPeriod') }}</small>
         </section>
 
-        <k-card :content-wrap="false" class="banking-card banking-chart-card">
+        <SkyCard :content-wrap="false" class="banking-card banking-chart-card">
           <div class="banking-chart-legend">
             <span
               ><i class="is-incoming"></i
@@ -555,18 +503,18 @@ onBeforeUnmount(() => {
               <span>{{ day.label }}</span>
             </div>
           </div>
-        </k-card>
+        </SkyCard>
 
         <section class="banking-transactions banking-transactions--all">
           <div class="banking-section-title">
             <h2>{{ phone.t('Apps.banking.allTransactions') }}</h2>
           </div>
-          <k-card
+          <SkyCard
             :content-wrap="false"
             class="banking-card banking-transaction-card"
           >
-            <k-list inset strong class="banking-transaction-list">
-              <k-list-item
+            <SkyList inset strong class="banking-transaction-list">
+              <SkyListItem
                 v-for="transaction in banking.overview.transactions"
                 :key="transaction.id"
                 :subtitle="formatDate(transaction.createdAt)"
@@ -590,67 +538,55 @@ onBeforeUnmount(() => {
                     }}
                   </b>
                 </template>
-              </k-list-item>
-            </k-list>
-          </k-card>
+              </SkyListItem>
+            </SkyList>
+          </SkyCard>
         </section>
       </template>
     </div>
 
-    <k-tabbar
+    <SkyTabBar
       v-if="banking.overview"
-      component="nav"
       icons
       labels
-      class="bottom-0 left-0 fixed"
+      class="banking-tabbar"
       :aria-hidden="Boolean(action)"
-      :aria-label="phone.t('Apps.banking.navigation')"
       :inert="Boolean(action)"
+      :label="phone.t('Apps.banking.navigation')"
     >
-      <k-toolbar-pane>
-        <k-tabbar-link
-          component="button"
-          :active="activeTab === 'home'"
-          :link-props="{ type: 'button' }"
-          @click="activeTab = 'home'"
-        >
-          <template #label>{{ phone.t('Apps.banking.home') }}</template>
-          <template #icon>
-            <k-icon><House class="w-7 h-7" /></k-icon>
-          </template>
-        </k-tabbar-link>
-        <k-tabbar-link
-          component="button"
-          :active="activeTab === 'activity'"
-          :link-props="{ type: 'button' }"
-          @click="activeTab = 'activity'"
-        >
-          <template #label>{{ phone.t('Apps.banking.activity') }}</template>
-          <template #icon>
-            <k-icon><BarChart3 class="w-7 h-7" /></k-icon>
-          </template>
-        </k-tabbar-link>
-      </k-toolbar-pane>
-    </k-tabbar>
-
-    <k-sheet :opened="Boolean(action)" @backdropclick="closeAction">
-      <section
-        v-if="action"
-        class="banking-sheet__content"
-        role="dialog"
-        aria-modal="true"
-        :aria-labelledby="`banking-${action}-title`"
-        @keydown="handleSheetKeydown"
+      <SkyTabButton
+        :active="activeTab === 'home'"
+        :label="phone.t('Apps.banking.home')"
+        @click="activeTab = 'home'"
       >
-        <k-link
+        <template #icon><House :size="25" /></template>
+      </SkyTabButton>
+      <SkyTabButton
+        :active="activeTab === 'activity'"
+        :label="phone.t('Apps.banking.activity')"
+        @click="activeTab = 'activity'"
+      >
+        <template #icon><BarChart3 :size="25" /></template>
+      </SkyTabButton>
+    </SkyTabBar>
+
+    <SkySheet
+      :opened="Boolean(action)"
+      :ariaLabelledby="action ? `banking-${action}-title` : undefined"
+      @backdropclick="closeAction"
+      @escape="closeAction"
+    >
+      <section v-if="action" class="banking-sheet__content">
+        <SkyLink
           component="button"
           class="banking-modal__close"
           :aria-label="phone.t('Common.close')"
-          :link-props="{ type: 'button' }"
+          icon-only
+          type="button"
           @click="closeAction"
         >
           <X :size="17" />
-        </k-link>
+        </SkyLink>
         <span class="banking-modal__icon">
           <Send :size="23" />
         </span>
@@ -658,8 +594,8 @@ onBeforeUnmount(() => {
           {{ phone.t(`Apps.banking.forms.${action}.title`) }}
         </h2>
         <p>{{ phone.t(`Apps.banking.forms.${action}.body`) }}</p>
-        <k-list aria-live="polite" inset strong class="banking-form-list">
-          <k-list-input
+        <SkyList aria-live="polite" inset strong class="banking-form-list">
+          <SkyField
             :label="phone.t('Apps.banking.recipientPhone')"
             input-id="banking-transfer-target"
             inputmode="tel"
@@ -669,9 +605,9 @@ onBeforeUnmount(() => {
             :value="target"
             @input="updateTarget"
           />
-          <k-list-input
+          <SkyField
             :label="phone.t('Apps.banking.amount')"
-            :error="formError || undefined"
+            :error="formError || false"
             input-id="banking-transfer-amount"
             inputmode="numeric"
             min="1"
@@ -682,35 +618,41 @@ onBeforeUnmount(() => {
             @input="updateAmount"
             @keydown.enter="handleEnterAction($event, submitAction)"
           />
-        </k-list>
+        </SkyList>
         <div class="banking-contact-picker">
           <span>{{ phone.t('Apps.banking.chooseContact') }}</span>
-          <k-list v-if="calls.contacts.length" inset strong>
-            <k-list-item
+          <SkyList v-if="calls.contacts.length" inset strong>
+            <SkyListItem
               v-for="contact in calls.contacts"
               :key="contact.id"
               :title="contact.name"
               :subtitle="formatPhoneNumber(contact.phone_number)"
               link
+              link-component="button"
               @click="selectContact(contact)"
             />
-          </k-list>
+          </SkyList>
           <p v-else>{{ phone.t('Apps.banking.noContacts') }}</p>
         </div>
-        <k-button
+        <SkyButton
+          block
           large
           rounded
           :disabled="banking.isLoading"
           @click="submitAction"
         >
-          <k-preloader v-if="banking.isLoading" />
+          <SkySpinner
+            v-if="banking.isLoading"
+            :label="phone.t('Common.loading')"
+            :size="20"
+          />
           <template v-else>
             {{ phone.t(`Apps.banking.forms.${action}.submit`) }}
             <ArrowRight :size="17" />
           </template>
-        </k-button>
+        </SkyButton>
       </section>
-    </k-sheet>
+    </SkySheet>
 
     <SkyToast
       :opened="cooldownToastOpened"
@@ -720,5 +662,5 @@ onBeforeUnmount(() => {
     >
       {{ errorMessage('reload_cooldown') }}
     </SkyToast>
-  </k-page>
+  </SkyAppPage>
 </template>
diff --git a/frontend/src/views/apps/BillingApp.contract.test.ts b/frontend/src/views/apps/BillingApp.contract.test.ts
new file mode 100644
index 0000000..c289ebe
--- /dev/null
+++ b/frontend/src/views/apps/BillingApp.contract.test.ts
@@ -0,0 +1,42 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const source = readFileSync(
+  new URL('./BillingApp.vue', import.meta.url),
+  'utf8',
+)
+
+describe('Billing app Sky UI migration', () => {
+  it('uses Sky UI instead of Konsta components', () => {
+    expect(source).not.toContain("from 'konsta/vue'")
+    expect(source).not.toMatch(/<\/?k[A-Z-]/)
+    expect(source).not.toContain('--k-')
+
+    for (const component of [
+      'SkyAppPage',
+      'SkyNavbar',
+      'SkyNavbarBackLink',
+      'SkyGlass',
+      'SkyCard',
+      'SkyBadge',
+      'SkyButton',
+      'SkyLink',
+      'SkySearchbar',
+      'SkySegmented',
+      'SkySegmentedButton',
+      'SkySpinner',
+      'SkyTabBar',
+      'SkyTabButton',
+      'SkySheet',
+      'SkyToast',
+    ]) {
+      expect(source).toContain(`<${component}`)
+    }
+  })
+
+  it('uses the Sky sheet focus and escape behavior for payment', () => {
+    expect(source).toContain('@escape="paymentOpen = false"')
+    expect(source).toContain(':ariaLabelledby=')
+  })
+})
diff --git a/frontend/src/views/apps/BillingApp.vue b/frontend/src/views/apps/BillingApp.vue
index e637b63..4eb54df 100644
--- a/frontend/src/views/apps/BillingApp.vue
+++ b/frontend/src/views/apps/BillingApp.vue
@@ -21,26 +21,6 @@ import {
   WalletCards,
   X,
 } from 'lucide-vue-next'
-import {
-  kBadge,
-  kButton,
-  kCard,
-  kGlass,
-  kIcon,
-  kLink,
-  kNavbar,
-  kNavbarBackLink,
-  kPage,
-  kPreloader,
-  kSearchbar,
-  kSegmented,
-  kSegmentedButton,
-  kSheet,
-  kTabbar,
-  kTabbarLink,
-  kToast,
-  kToolbarPane,
-} from 'konsta/vue'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
 import { useBillingStore } from '@/stores/billing'
@@ -51,6 +31,24 @@ import type {
   BillingStatus,
   InvoiceSummary,
 } from '@/types/billing'
+import {
+  SkyAppPage,
+  SkyBadge,
+  SkyButton,
+  SkyCard,
+  SkyGlass,
+  SkyLink,
+  SkyNavbar,
+  SkyNavbarBackLink,
+  SkySearchbar,
+  SkySegmented,
+  SkySegmentedButton,
+  SkySheet,
+  SkySpinner,
+  SkyTabBar,
+  SkyTabButton,
+  SkyToast,
+} from '@/ui'
 import { isTrustedRootMessageSource } from '@/utils/windowMessages'
 
 type BillingTab = 'overview' | 'inbox' | 'history'
@@ -253,24 +251,27 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <kPage
-    component="main"
+  <SkyAppPage
     class="billing-app native-app"
+    :label="t('name')"
+    :dark="phone.isDarkMode"
+    accent="#1784ff"
+    accent-soft="rgba(23, 132, 255, 0.16)"
     :class="{
       'billing-app--home': screen === 'main' && tab === 'overview',
       'billing-app--light': !phone.isDarkMode,
       'billing-app--section': screen !== 'main' || tab !== 'overview',
     }"
   >
-    <kNavbar
+    <SkyNavbar
       class="billing-navbar"
       :subtitle="
         screen === 'main' && tab === 'overview' ? undefined : t('name')
       "
-      :title="screen === 'main' && tab === 'overview' ? undefined : title"
+      :title="screen === 'main' && tab === 'overview' ? t('name') : title"
     >
       <template v-if="screen === 'detail'" #left>
-        <kNavbarBackLink :show-text="false" :text="t('back')" @click="goBack" />
+        <SkyNavbarBackLink :ariaLabel="t('back')" @click="goBack" />
       </template>
       <template v-else-if="tab === 'overview'" #title>
         <ReceiptText
@@ -279,15 +280,15 @@ onBeforeUnmount(() => {
           :stroke-width="1.8"
         />
       </template>
-    </kNavbar>
+    </SkyNavbar>
 
     <section v-if="screen === 'detail'" class="billing-scroll billing-detail">
       <div v-if="billing.isLoading && !billing.detail" class="billing-loading">
-        <kPreloader />
+        <SkySpinner :label="phone.t('Common.loading')" />
         <span>{{ phone.t('Common.loading') }}</span>
       </div>
       <template v-else-if="billing.detail">
-        <kGlass
+        <SkyGlass
           :highlight="false"
           class="billing-detail__hero"
           :class="{
@@ -316,11 +317,11 @@ onBeforeUnmount(() => {
               <strong>{{ billing.detail.issuerLabel }}</strong>
               <span>#{{ billing.detail.id.slice(0, 13).toUpperCase() }}</span>
             </div>
-            <kBadge
+            <SkyBadge
               :class="`billing-status billing-status--${statusKey(billing.detail)}`"
             >
               {{ t(`status.${statusKey(billing.detail)}`) }}
-            </kBadge>
+            </SkyBadge>
             <div class="billing-detail__amount">
               <span>{{ t('detail.total') }}</span>
               <strong>{{
@@ -328,7 +329,7 @@ onBeforeUnmount(() => {
               }}</strong>
             </div>
           </template>
-        </kGlass>
+        </SkyGlass>
 
         <div class="billing-detail__section-title">
           {{
@@ -340,16 +341,23 @@ onBeforeUnmount(() => {
           }}
         </div>
 
-        <kCard :content-wrap="false" class="billing-panel">
-          <div v-if="billing.detail.status === 'paid'" class="billing-detail-row">
-            <span class="billing-detail-row__icon"><Building2 :size="18" /></span>
+        <SkyCard :content-wrap="false" class="billing-panel">
+          <div
+            v-if="billing.detail.status === 'paid'"
+            class="billing-detail-row"
+          >
+            <span class="billing-detail-row__icon"
+              ><Building2 :size="18"
+            /></span>
             <span class="billing-detail-row__copy">
               <small>{{ t('detail.issuer') }}</small>
               <strong>{{ billing.detail.issuerLabel }}</strong>
             </span>
           </div>
           <div v-else class="billing-detail-row">
-            <span class="billing-detail-row__icon"><ReceiptText :size="18" /></span>
+            <span class="billing-detail-row__icon"
+              ><ReceiptText :size="18"
+            /></span>
             <span class="billing-detail-row__copy">
               <small>{{ t('detail.reason') }}</small>
               <strong>{{ billing.detail.title }}</strong>
@@ -375,14 +383,20 @@ onBeforeUnmount(() => {
               }}</strong>
             </span>
           </div>
-          <div v-if="billing.detail.status !== 'paid'" class="billing-detail-row">
+          <div
+            v-if="billing.detail.status !== 'paid'"
+            class="billing-detail-row"
+          >
             <span class="billing-detail-row__icon"><Clock3 :size="18" /></span>
             <span class="billing-detail-row__copy">
               <small>{{ t('detail.due') }}</small>
               <strong>{{ formatDate(billing.detail.dueAt) }}</strong>
             </span>
           </div>
-          <div v-if="billing.detail.paymentReference" class="billing-detail-row">
+          <div
+            v-if="billing.detail.paymentReference"
+            class="billing-detail-row"
+          >
             <span class="billing-detail-row__icon"><Hash :size="18" /></span>
             <span class="billing-detail-row__copy">
               <small>{{ t('detail.paymentReference') }}</small>
@@ -398,27 +412,27 @@ onBeforeUnmount(() => {
               <strong>#{{ billing.detail.id.toUpperCase() }}</strong>
             </span>
           </div>
-        </kCard>
+        </SkyCard>
 
-        <kCard v-if="billing.detail.description" class="billing-note">
+        <SkyCard v-if="billing.detail.description" class="billing-note">
           <span>{{ t('detail.note') }}</span>
           <p>{{ billing.detail.description }}</p>
-        </kCard>
+        </SkyCard>
 
         <div v-if="billing.detail.canPay" class="billing-detail__actions">
-          <kButton rounded large @click="paymentOpen = true">
+          <SkyButton block rounded large @click="paymentOpen = true">
             <WalletCards :size="18" />
             {{ t('payment.payNow') }}
             <ChevronRight class="billing-action-chevron" :size="18" />
-          </kButton>
-          <kLink
+          </SkyButton>
+          <SkyLink
             v-if="billing.detail.canDispute"
             component="button"
-            :link-props="{ type: 'button' }"
+            type="button"
             @click="disputeInvoice"
           >
             {{ t('detail.dispute') }}
-          </kLink>
+          </SkyLink>
         </div>
       </template>
     </section>
@@ -428,44 +442,44 @@ onBeforeUnmount(() => {
         v-if="billing.isLoading && !billing.overview"
         class="billing-loading"
       >
-        <kPreloader />
+        <SkySpinner :label="phone.t('Common.loading')" />
         <span>{{ phone.t('Common.loading') }}</span>
       </div>
 
       <div v-else-if="billing.error && !billing.overview" class="billing-empty">
         <AlertTriangle :size="39" />
         <strong>{{ t(`errors.${billing.error}`) }}</strong>
-        <kButton rounded @click="billing.loadOverview(direction)">
+        <SkyButton rounded @click="billing.loadOverview(direction)">
           {{ t('tryAgain') }}
-        </kButton>
+        </SkyButton>
       </div>
 
       <template v-else-if="tab === 'overview' && billing.overview">
         <div class="billing-summary">
-          <kGlass
+          <SkyGlass
             :highlight="false"
             class="billing-summary__item billing-summary__item--open"
           >
             <ReceiptText :size="19" />
             <span>{{ t('summary.open') }}</span>
             <strong>{{ billing.overview.openCount }}</strong>
-          </kGlass>
-          <kGlass
+          </SkyGlass>
+          <SkyGlass
             :highlight="false"
             class="billing-summary__item billing-summary__item--due"
           >
             <CalendarDays :size="19" />
             <span>{{ t('summary.due') }}</span>
             <strong>{{ formatMoney(billing.overview.openTotal) }}</strong>
-          </kGlass>
-          <kGlass
+          </SkyGlass>
+          <SkyGlass
             :highlight="false"
             class="billing-summary__item billing-summary__item--overdue"
           >
             <AlertTriangle :size="19" />
             <span>{{ t('summary.overdue') }}</span>
             <strong>{{ billing.overview.overdueCount }}</strong>
-          </kGlass>
+          </SkyGlass>
         </div>
 
         <div
@@ -473,8 +487,8 @@ onBeforeUnmount(() => {
           class="billing-filter-panel billing-filter-panel--overview"
         >
           <span class="billing-filter-label">{{ t('filters.scope') }}</span>
-          <kSegmented class="billing-direction">
-            <kSegmentedButton
+          <SkySegmented class="billing-direction">
+            <SkySegmentedButton
               type="button"
               :active="direction === 'inbox'"
               @click="selectDirection('inbox')"
@@ -487,16 +501,16 @@ onBeforeUnmount(() => {
               >
                 {{ Math.min(99, billing.overview.unreadCount) }}
               </b>
-            </kSegmentedButton>
-            <kSegmentedButton
+            </SkySegmentedButton>
+            <SkySegmentedButton
               type="button"
               :active="direction === 'sent'"
               @click="selectDirection('sent')"
             >
               <Send :size="15" />
               <span>{{ t('direction.sent') }}</span>
-            </kSegmentedButton>
-          </kSegmented>
+            </SkySegmentedButton>
+          </SkySegmented>
         </div>
 
         <div class="billing-section-heading">
@@ -504,13 +518,9 @@ onBeforeUnmount(() => {
             <span>{{ t('overview.eyebrow') }}</span>
             <h2>{{ t('overview.urgent') }}</h2>
           </div>
-          <kLink
-            component="button"
-            :link-props="{ type: 'button' }"
-            @click="selectTab('inbox')"
-          >
+          <SkyLink component="button" type="button" @click="selectTab('inbox')">
             {{ t('overview.viewAll') }}
-          </kLink>
+          </SkyLink>
         </div>
 
         <div
@@ -533,11 +543,11 @@ onBeforeUnmount(() => {
               >
             </span>
             <span class="billing-invoice-card__amount">
-              <kBadge
+              <SkyBadge
                 :class="`billing-status billing-status--${statusKey(invoice)}`"
               >
                 {{ t(`status.${statusKey(invoice)}`) }}
-              </kBadge>
+              </SkyBadge>
               <strong>{{
                 formatMoney(invoice.amount, invoice.currency)
               }}</strong>
@@ -558,8 +568,8 @@ onBeforeUnmount(() => {
           class="billing-filter-panel"
         >
           <span class="billing-filter-label">{{ t('filters.scope') }}</span>
-          <kSegmented class="billing-direction">
-            <kSegmentedButton
+          <SkySegmented class="billing-direction">
+            <SkySegmentedButton
               type="button"
               :active="direction === 'inbox'"
               @click="selectDirection('inbox')"
@@ -572,20 +582,21 @@ onBeforeUnmount(() => {
               >
                 {{ Math.min(99, billing.overview.unreadCount) }}
               </b>
-            </kSegmentedButton>
-            <kSegmentedButton
+            </SkySegmentedButton>
+            <SkySegmentedButton
               type="button"
               :active="direction === 'sent'"
               @click="selectDirection('sent')"
             >
               <Send :size="15" />
               <span>{{ t('direction.sent') }}</span>
-            </kSegmentedButton>
-          </kSegmented>
+            </SkySegmentedButton>
+          </SkySegmented>
         </div>
-        <kSearchbar
+        <SkySearchbar
           v-if="tab === 'inbox'"
           class="billing-search"
+          :clear-label="phone.t('Common.clear')"
           :placeholder="t('search')"
           :value="search"
           @clear="clearSearch"
@@ -594,8 +605,8 @@ onBeforeUnmount(() => {
         <div v-if="tab === 'inbox'" class="billing-status-filter">
           <span class="billing-filter-label">{{ t('filters.status') }}</span>
           <div class="billing-status-filter__scroll">
-            <kSegmented class="billing-filters">
-              <kSegmentedButton
+            <SkySegmented class="billing-filters">
+              <SkySegmentedButton
                 v-for="entry in filters"
                 :key="entry"
                 type="button"
@@ -604,8 +615,8 @@ onBeforeUnmount(() => {
               >
                 <component :is="filterIcons[entry]" :size="14" />
                 <span>{{ t(`filters.${entry}`) }}</span>
-              </kSegmentedButton>
-            </kSegmented>
+              </SkySegmentedButton>
+            </SkySegmented>
           </div>
         </div>
 
@@ -613,7 +624,7 @@ onBeforeUnmount(() => {
           v-if="billing.isLoading"
           class="billing-loading billing-loading--list"
         >
-          <kPreloader />
+          <SkySpinner :label="phone.t('Common.loading')" />
         </div>
         <div v-else-if="visibleInvoices.length" class="billing-list">
           <button
@@ -636,17 +647,17 @@ onBeforeUnmount(() => {
               >
             </span>
             <span class="billing-list-row__meta">
-              <kBadge
+              <SkyBadge
                 :class="`billing-status billing-status--${statusKey(invoice)}`"
               >
                 {{ t(`status.${statusKey(invoice)}`) }}
-              </kBadge>
+              </SkyBadge>
               <strong>{{
                 formatMoney(invoice.amount, invoice.currency)
               }}</strong>
             </span>
           </button>
-          <kButton
+          <SkyButton
             v-if="billing.hasMore"
             clear
             :disabled="billing.isLoadingMore"
@@ -660,9 +671,12 @@ onBeforeUnmount(() => {
               )
             "
           >
-            <kPreloader v-if="billing.isLoadingMore" />
+            <SkySpinner
+              v-if="billing.isLoadingMore"
+              :label="phone.t('Common.loading')"
+            />
             <span v-else>{{ t('loadMore') }}</span>
-          </kButton>
+          </SkyButton>
         </div>
         <div v-else class="billing-empty billing-empty--list">
           <SearchX :size="39" />
@@ -672,111 +686,96 @@ onBeforeUnmount(() => {
       </template>
     </section>
 
-    <kTabbar
+    <SkyTabBar
       v-if="screen === 'main'"
-      component="nav"
       icons
       labels
-      class="billing-tabbar bottom-0 left-0 fixed"
-      inner-class="!w-full !max-w-none !gap-0 !px-1"
-      :aria-label="t('navigation')"
+      class="billing-tabbar"
+      :label="t('navigation')"
     >
-      <kToolbarPane class="billing-tab-pane">
-        <kTabbarLink
-          component="button"
-          :active="tab === 'overview'"
-          :link-props="{ class: 'billing-tab-button', type: 'button' }"
-          @click="selectTab('overview')"
-        >
-          <template #label
-            ><span class="billing-tab-label">{{
-              t('tabs.overview')
-            }}</span></template
-          >
-          <template #icon
-            ><kIcon
-              ><House
-                :size="20"
-                :fill="tab === 'overview' ? 'currentColor' : 'none'" /></kIcon
-          ></template>
-        </kTabbarLink>
-        <kTabbarLink
-          component="button"
-          :active="tab === 'inbox'"
-          :link-props="{ class: 'billing-tab-button', type: 'button' }"
-          @click="selectTab('inbox')"
-        >
-          <template #label
-            ><span class="billing-tab-label">{{
-              t('tabs.inbox')
-            }}</span></template
-          >
-          <template #icon>
-            <span class="billing-tab-icon">
-              <kIcon
-                ><Inbox
-                  :size="20"
-                  :fill="tab === 'inbox' ? 'currentColor' : 'none'"
-              /></kIcon>
-              <b v-if="billing.overview?.unreadCount">{{
-                Math.min(99, billing.overview.unreadCount)
-              }}</b>
-            </span>
-          </template>
-        </kTabbarLink>
-        <kTabbarLink
-          component="button"
-          :active="tab === 'history'"
-          :link-props="{ class: 'billing-tab-button', type: 'button' }"
-          @click="selectTab('history')"
-        >
-          <template #label
-            ><span class="billing-tab-label">{{
-              t('tabs.history')
-            }}</span></template
-          >
-          <template #icon
-            ><kIcon><History :size="20" /></kIcon
-          ></template>
-        </kTabbarLink>
-      </kToolbarPane>
-    </kTabbar>
+      <SkyTabButton
+        class="billing-tab-button"
+        :active="tab === 'overview'"
+        :label="t('tabs.overview')"
+        @click="selectTab('overview')"
+      >
+        <template #icon>
+          <House
+            :size="20"
+            :fill="tab === 'overview' ? 'currentColor' : 'none'"
+          />
+        </template>
+      </SkyTabButton>
+      <SkyTabButton
+        class="billing-tab-button"
+        :active="tab === 'inbox'"
+        :label="t('tabs.inbox')"
+        @click="selectTab('inbox')"
+      >
+        <template #icon>
+          <span class="billing-tab-icon">
+            <Inbox
+              :size="20"
+              :fill="tab === 'inbox' ? 'currentColor' : 'none'"
+            />
+            <b v-if="billing.overview?.unreadCount">{{
+              Math.min(99, billing.overview.unreadCount)
+            }}</b>
+          </span>
+        </template>
+      </SkyTabButton>
+      <SkyTabButton
+        class="billing-tab-button"
+        :active="tab === 'history'"
+        :label="t('tabs.history')"
+        @click="selectTab('history')"
+      >
+        <template #icon><History :size="20" /></template>
+      </SkyTabButton>
+    </SkyTabBar>
 
-    <kSheet
+    <SkySheet
       :opened="paymentOpen"
       class="billing-payment-sheet"
+      :ariaLabelledby="billing.detail ? 'billing-payment-title' : undefined"
       @backdropclick="paymentOpen = false"
+      @escape="paymentOpen = false"
     >
       <section v-if="billing.detail" class="billing-payment-sheet__content">
         <span class="billing-payment-sheet__icon"
           ><WalletCards :size="27"
         /></span>
-        <h2>{{ t('payment.title') }}</h2>
+        <h2 id="billing-payment-title">{{ t('payment.title') }}</h2>
         <p>{{ t('payment.body', { issuer: billing.detail.issuerLabel }) }}</p>
-        <kGlass :highlight="false" class="billing-payment-total">
+        <SkyGlass :highlight="false" class="billing-payment-total">
           <span>{{ billing.detail.title }}</span>
           <strong>{{
             formatMoney(billing.detail.amount, billing.detail.currency)
           }}</strong>
-        </kGlass>
-        <kButton rounded large :disabled="billing.isPaying" @click="payInvoice">
-          <kPreloader v-if="billing.isPaying" />
-          <span v-else>{{ t('payment.confirm') }}</span>
-        </kButton>
-        <kLink
-          component="button"
-          :link-props="{ type: 'button' }"
-          @click="paymentOpen = false"
+        </SkyGlass>
+        <SkyButton
+          block
+          rounded
+          large
+          :disabled="billing.isPaying"
+          @click="payInvoice"
         >
+          <SkySpinner
+            v-if="billing.isPaying"
+            :label="phone.t('Common.loading')"
+          />
+          <span v-else>{{ t('payment.confirm') }}</span>
+        </SkyButton>
+        <SkyLink component="button" type="button" @click="paymentOpen = false">
           {{ t('payment.cancel') }}
-        </kLink>
+        </SkyLink>
       </section>
-    </kSheet>
+    </SkySheet>
 
-    <kToast :opened="toastOpen" position="center" class="billing-toast">
+    <SkyToast :opened="toastOpen" position="center" class="billing-toast">
       {{ toastText }}
-    </kToast>
-  </kPage>
+    </SkyToast>
+  </SkyAppPage>
 </template>
 
 <style scoped>
@@ -800,8 +799,8 @@ onBeforeUnmount(() => {
   background: #f5f7fa;
 }
 .billing-navbar {
-  --k-navbar-bg-color: color-mix(in srgb, #07090c 90%, transparent);
-  --k-safe-area-top: 46px;
+  --sky-navbar-glass: color-mix(in srgb, #07090c 90%, transparent);
+  --sky-navbar-safe-area-top: 46px;
   position: absolute;
   z-index: 8;
   inset: 0 0 auto;
@@ -813,7 +812,7 @@ onBeforeUnmount(() => {
   border-bottom: 1px solid var(--billing-border);
 }
 .billing-app--light .billing-navbar {
-  --k-navbar-bg-color: color-mix(in srgb, #f5f7fa 91%, transparent);
+  --sky-navbar-glass: color-mix(in srgb, #f5f7fa 91%, transparent);
   background: color-mix(in srgb, #f5f7fa 88%, transparent);
 }
 .billing-navbar__brand-mark {
@@ -1036,7 +1035,7 @@ onBeforeUnmount(() => {
 .billing-search {
   margin: 0 0 11px;
 }
-.billing-search :deep(form) {
+.billing-search :deep(.sky-searchbar__control) {
   min-height: 36px;
   border-radius: 999px;
   background: color-mix(in srgb, var(--billing-panel) 96%, transparent);
@@ -1261,7 +1260,9 @@ onBeforeUnmount(() => {
   color: var(--billing-blue);
   background: rgb(23 132 255 / 11%);
 }
-.billing-detail__hero--paid + .billing-detail__section-title + .billing-panel
+.billing-detail__hero--paid
+  + .billing-detail__section-title
+  + .billing-panel
   .billing-detail-row__icon {
   color: #48c76f;
   background: rgb(72 199 111 / 11%);
@@ -1306,20 +1307,12 @@ onBeforeUnmount(() => {
   gap: 13px;
   margin-top: 16px;
 }
-.billing-detail__actions :deep(.k-button) {
-  --k-button-bg-color: var(--billing-blue);
+.billing-detail__actions :deep(.sky-button) {
   width: 100%;
 }
 .billing-action-chevron {
   margin-left: auto;
 }
-.billing-tab-pane {
-  width: 100% !important;
-  max-width: none;
-  flex: none;
-  gap: 2px;
-  padding: 0 4px;
-}
 :global(.billing-tab-button) {
   width: auto !important;
   min-width: 0 !important;
@@ -1400,24 +1393,23 @@ onBeforeUnmount(() => {
 .billing-payment-total strong {
   font-size: 18px;
 }
-.billing-payment-sheet :deep(.k-button) {
-  --k-button-bg-color: var(--billing-blue);
+.billing-payment-sheet :deep(.sky-button) {
   width: 100%;
 }
 @supports not (color: color-mix(in srgb, white, black)) {
   .billing-navbar {
-    --k-navbar-bg-color: rgb(7 9 12 / 90%);
+    --sky-navbar-glass: rgb(7 9 12 / 90%);
     background: rgb(7 9 12 / 88%);
   }
   .billing-app--light .billing-navbar {
-    --k-navbar-bg-color: rgb(245 247 250 / 91%);
+    --sky-navbar-glass: rgb(245 247 250 / 91%);
     background: rgb(245 247 250 / 88%);
   }
   .billing-summary__item,
   .billing-filter-panel,
   .billing-invoice-card,
   .billing-list-row,
-  .billing-search :deep(form),
+  .billing-search :deep(.sky-searchbar__control),
   .billing-detail__hero,
   .billing-panel,
   .billing-note {
diff --git a/frontend/src/views/apps/CalculatorApp.vue b/frontend/src/views/apps/CalculatorApp.vue
index 23c6139..5dabf8b 100644
--- a/frontend/src/views/apps/CalculatorApp.vue
+++ b/frontend/src/views/apps/CalculatorApp.vue
@@ -268,7 +268,10 @@ watch([() => calculator.display, expression], async () => {
 <template>
   <main
     class="native-app calculator-app"
-    :class="{ 'calculator-app--scientific': scientificOpened }"
+    :class="{
+      'calculator-app--light': !phone.isDarkMode,
+      'calculator-app--scientific': scientificOpened,
+    }"
     :aria-label="phone.t('Apps.calculator.name')"
   >
     <header class="calculator-toolbar">
@@ -366,9 +369,7 @@ watch([() => calculator.display, expression], async () => {
       @backdropclick="historyOpened = false"
       @escape="historyOpened = false"
     >
-      <section
-        class="calculator-history sky-ui-provider sky-ui-provider--dark"
-      >
+      <section class="calculator-history sky-ui-provider sky-ui-provider--dark">
         <div class="calculator-history__handle"></div>
         <SkyNavbar
           class="calculator-history__navbar"
@@ -573,6 +574,35 @@ watch([() => calculator.display, expression], async () => {
   box-shadow: inset 0 1px rgb(255 255 255 / 28%);
 }
 
+.calculator-app--light {
+  background: var(--sky-bg);
+  color: var(--sky-text);
+}
+
+.calculator-app--light .calculator-toolbar button,
+.calculator-app--light .calculator-key {
+  border-color: var(--sky-hairline);
+  background: linear-gradient(145deg, #ffffff, #e5e5ea);
+  box-shadow: inset 0 1px rgb(255 255 255 / 80%);
+  color: var(--sky-text);
+}
+
+.calculator-app--light .calculator-expression,
+.calculator-app--light .calculator-angle {
+  color: var(--sky-muted);
+}
+
+.calculator-app--light .calculator-key--utility {
+  background: linear-gradient(145deg, #d1d1d6, #aeaeb2);
+  color: #111114;
+}
+
+.calculator-app--light .calculator-key--operator {
+  border-color: #ffb23b;
+  background: linear-gradient(180deg, #ffa20c, var(--calculator-orange));
+  color: #ffffff;
+}
+
 .calculator-key__operator-icon {
   width: 24px;
   height: 24px;
diff --git a/frontend/src/views/apps/CalendarApp.vue b/frontend/src/views/apps/CalendarApp.vue
index 80b14f6..4833148 100644
--- a/frontend/src/views/apps/CalendarApp.vue
+++ b/frontend/src/views/apps/CalendarApp.vue
@@ -18,7 +18,7 @@ import {
   UserRound,
   X,
 } from 'lucide-vue-next'
-import { kGlass, kSearchbar, kToggle } from 'konsta/vue'
+import { SkyGlass, SkySearchbar, SkyToggle } from '@/ui'
 import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 
 import { useAccountStore } from '@/stores/account'
@@ -61,9 +61,7 @@ const saving = ref(false)
 const formError = ref('')
 const datePickerOpen = ref(false)
 const pickerDate = ref(selectedDate.value)
-const pickerMonth = ref(
-  new Date(today.getFullYear(), today.getMonth(), 1),
-)
+const pickerMonth = ref(new Date(today.getFullYear(), today.getMonth(), 1))
 const timePickerField = ref<TimeField | null>(null)
 const pickerHour = ref('09')
 const pickerMinute = ref('00')
@@ -88,9 +86,6 @@ const hourOptions = Array.from({ length: 24 }, (_, index) =>
 const minuteOptions = Array.from({ length: 12 }, (_, index) =>
   String(index * 5).padStart(2, '0'),
 )
-const calendarToggleColors = {
-  checkedBgIos: 'bg-[#ff3b30]',
-}
 const viewModes: Array<{
   icon: typeof LayoutGrid
   id: CalendarViewMode
@@ -359,7 +354,9 @@ async function toggleSearch(): Promise<void> {
 }
 
 function isAllDayEvent(event: CalendarEvent): boolean {
-  return timeValue(event.startsAt) === '00:00' && timeValue(event.endsAt) === '23:59'
+  return (
+    timeValue(event.startsAt) === '00:00' && timeValue(event.endsAt) === '23:59'
+  )
 }
 
 function eventTimeLabel(event: CalendarEvent): string {
@@ -550,15 +547,19 @@ onMounted(async () => {
         :class="{ 'calendar__toolbar--year': yearOverviewOpen }"
       >
         <Transition name="calendar-search" mode="out-in">
-          <div v-if="searchOpen" ref="searchToolbar" class="calendar__search-toolbar">
-            <k-searchbar
+          <div
+            v-if="searchOpen"
+            ref="searchToolbar"
+            class="calendar__search-toolbar"
+          >
+            <sky-searchbar
               class="calendar__searchbar"
               :placeholder="phone.t('Apps.calendar.searchPlaceholder')"
               :value="searchQuery"
               @clear="searchQuery = ''"
               @input="updateSearch"
             />
-            <k-glass
+            <sky-glass
               component="button"
               type="button"
               class="calendar__control calendar__control--close"
@@ -566,22 +567,22 @@ onMounted(async () => {
               @click="toggleSearch"
             >
               <X :size="20" />
-            </k-glass>
+            </sky-glass>
           </div>
           <div v-else class="calendar__toolbar-default">
-          <k-glass
-            v-if="!yearOverviewOpen"
-            component="button"
-            type="button"
-            class="calendar__control calendar__control--year"
-            :aria-label="String(visibleYear)"
-            @click="openYearOverview"
-          >
-            <ChevronLeft :size="20" />
-            <span>{{ visibleYear }}</span>
-          </k-glass>
+            <sky-glass
+              v-if="!yearOverviewOpen"
+              component="button"
+              type="button"
+              class="calendar__control calendar__control--year"
+              :aria-label="String(visibleYear)"
+              @click="openYearOverview"
+            >
+              <ChevronLeft :size="20" />
+              <span>{{ visibleYear }}</span>
+            </sky-glass>
             <div class="calendar__toolbar-actions">
-              <k-glass
+              <sky-glass
                 v-if="!yearOverviewOpen"
                 component="button"
                 class="calendar__control"
@@ -593,8 +594,8 @@ onMounted(async () => {
                   :is="viewModes.find((mode) => mode.id === viewMode)?.icon"
                   :size="19"
                 />
-              </k-glass>
-              <k-glass
+              </sky-glass>
+              <sky-glass
                 component="button"
                 class="calendar__control"
                 :aria-label="phone.t('Common.search')"
@@ -602,8 +603,8 @@ onMounted(async () => {
                 @click="toggleSearch"
               >
                 <Search :size="19" />
-              </k-glass>
-              <k-glass
+              </sky-glass>
+              <sky-glass
                 v-if="isAuthenticated"
                 component="button"
                 class="calendar__control"
@@ -612,7 +613,7 @@ onMounted(async () => {
                 @click="openCreate"
               >
                 <Plus :size="21" />
-              </k-glass>
+              </sky-glass>
             </div>
 
             <Transition name="calendar-popover">
@@ -734,9 +735,7 @@ onMounted(async () => {
                 >
                   <span class="calendar__day-number">{{ day.getDate() }}</span>
                   <span
-                    v-if="
-                      viewMode === 'compact' && eventsForDay(day).length
-                    "
+                    v-if="viewMode === 'compact' && eventsForDay(day).length"
                     class="calendar__compact-indicator"
                   />
                   <span
@@ -746,7 +745,10 @@ onMounted(async () => {
                     class="calendar__event-bars"
                   >
                     <i
-                      v-for="(event, eventIndex) in eventsForDay(day).slice(0, 3)"
+                      v-for="(event, eventIndex) in eventsForDay(day).slice(
+                        0,
+                        3,
+                      )"
                       :key="event.id"
                       :class="`calendar__event-dot--${eventIndex % 3}`"
                     />
@@ -820,14 +822,14 @@ onMounted(async () => {
       </div>
 
       <footer v-if="isAuthenticated" class="calendar__footer">
-        <k-glass
+        <sky-glass
           component="button"
           type="button"
           class="calendar__control calendar__control--today"
           @click="goToday"
         >
           {{ phone.t('Apps.calendar.today') }}
-        </k-glass>
+        </sky-glass>
       </footer>
     </template>
 
@@ -874,7 +876,11 @@ onMounted(async () => {
             <p>{{ selectedEvent.note }}</p>
           </div>
         </section>
-        <button class="calendar__delete calendar__share" type="button" @click="shareEvent">
+        <button
+          class="calendar__delete calendar__share"
+          type="button"
+          @click="shareEvent"
+        >
           <Share2 :size="18" />
           {{ phone.t('Apps.easyShare.share') }}
         </button>
@@ -887,14 +893,14 @@ onMounted(async () => {
 
     <section v-else class="calendar__form">
       <header class="calendar__sheet-header">
-        <k-glass
+        <sky-glass
           component="button"
           type="button"
           class="calendar__control calendar__sheet-action"
           @click="closeForm"
         >
           {{ phone.t('Common.cancel') }}
-        </k-glass>
+        </sky-glass>
         <strong>
           {{
             editingEvent
@@ -902,7 +908,7 @@ onMounted(async () => {
               : phone.t('Apps.calendar.newEvent')
           }}
         </strong>
-        <k-glass
+        <sky-glass
           component="button"
           type="button"
           class="calendar__control calendar__sheet-action"
@@ -910,7 +916,7 @@ onMounted(async () => {
           @click="saveEvent"
         >
           {{ editingEvent ? phone.t('Common.save') : phone.t('Common.add') }}
-        </k-glass>
+        </sky-glass>
       </header>
       <form class="calendar__sheet-scroll" @submit.prevent="saveEvent">
         <section class="calendar__group calendar__group--fields">
@@ -938,9 +944,9 @@ onMounted(async () => {
           </button>
           <div class="calendar__all-day-row">
             <span>{{ phone.t('Apps.calendar.allDay') }}</span>
-            <k-toggle
+            <sky-toggle
               :checked="draft.allDay"
-              :colors="calendarToggleColors"
+              style="--sky-app-accent: #ff3b30"
               :aria-label="phone.t('Apps.calendar.allDay')"
               @change="toggleAllDay"
             />
@@ -1025,23 +1031,23 @@ onMounted(async () => {
           </header>
 
           <div class="calendar__date-picker-month">
-            <k-glass
+            <sky-glass
               component="button"
               type="button"
               :aria-label="phone.t('Apps.calendar.previousMonth')"
               @click="movePickerMonth(-1)"
             >
               <ChevronLeft :size="20" />
-            </k-glass>
+            </sky-glass>
             <strong>{{ pickerMonthLabel }}</strong>
-            <k-glass
+            <sky-glass
               component="button"
               type="button"
               :aria-label="phone.t('Apps.calendar.nextMonth')"
               @click="movePickerMonth(1)"
             >
               <ChevronRight :size="20" />
-            </k-glass>
+            </sky-glass>
           </div>
 
           <div class="calendar__date-picker-weekdays" aria-hidden="true">
diff --git a/frontend/src/views/apps/CameraApp.contract.test.ts b/frontend/src/views/apps/CameraApp.contract.test.ts
index a4640cf..8380ea3 100644
--- a/frontend/src/views/apps/CameraApp.contract.test.ts
+++ b/frontend/src/views/apps/CameraApp.contract.test.ts
@@ -91,13 +91,14 @@ describe('Camera app controls', () => {
     )
     expect(cameraClient).toContain('capture_front_camera_transform')
     expect(cameraClient).toContain('forward_vector * front_camera_distance')
+    expect(cameraClient).toContain('front_camera_target_offset')
     expect(cameraClient).toContain('SetCamCoord(')
-    expect(cameraClient).toContain('SetCamRot(')
+    expect(cameraClient).toContain('PointCamAtCoord(')
+    expect(cameraClient).not.toContain('SetCamRot(')
     expect(cameraClient).not.toContain('SetEntityHeading(')
     expect(cameraClient).not.toContain('front_camera_position')
     expect(cameraClient).not.toContain('AttachCamToEntity(')
     expect(cameraClient).not.toContain('PointCamAtEntity(')
-    expect(cameraClient).not.toContain('PointCamAtCoord(')
     expect(cameraView).toContain("window.addEventListener('keyup', onKeyup)")
     expect(cameraView).toContain(
       "nuiCall('camera:setFocus', { focused: true })",
diff --git a/frontend/src/views/apps/CameraApp.vue b/frontend/src/views/apps/CameraApp.vue
index 86a0dfe..34e19f4 100644
--- a/frontend/src/views/apps/CameraApp.vue
+++ b/frontend/src/views/apps/CameraApp.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { kFab, kPage } from 'konsta/vue'
+import { SkyFab, SkyAppPage } from '@/ui'
 import {
   ArrowLeft,
   Images,
@@ -73,24 +73,6 @@ const pendingCount = computed(
   () =>
     captures.value.filter((capture) => capture.status === 'uploading').length,
 )
-const controlColors = {
-  bgIos: 'bg-ios-light-glass/75 dark:bg-ios-dark-glass/75',
-  activeBgIos: 'active:bg-white/90 dark:active:bg-white/20',
-  textIos: 'text-black/80 dark:text-white/80',
-}
-const flashColors = computed(() => ({
-  ...controlColors,
-  textIos: flashEnabled.value
-    ? 'text-yellow-500 dark:text-yellow-300'
-    : controlColors.textIos,
-}))
-const microphoneColors = computed(() => ({
-  ...controlColors,
-  textIos: microphoneEnabled.value
-    ? 'text-white'
-    : 'text-red-400',
-}))
-
 function correlationId(): string {
   return `${Date.now()}-${crypto.randomUUID()}`
 }
@@ -472,7 +454,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <k-page
+  <sky-app-page
     class="camera-page"
     :class="{ 'camera-page--landscape': phone.cameraLandscape }"
     :aria-label="phone.t('Apps.camera.name')"
@@ -508,12 +490,13 @@ onBeforeUnmount(() => {
         >
           <ArrowLeft :size="20" />
         </button>
-        <k-fab
+        <sky-fab
           v-else
           component="button"
           type="button"
           class="camera-control"
-          :colors="flashColors"
+          :class="{ 'camera-control--flash-active': flashEnabled }"
+          variant="neutral"
           :aria-label="phone.t('Apps.camera.flash')"
           @click="toggleFlash"
         >
@@ -521,13 +504,14 @@ onBeforeUnmount(() => {
             <Zap v-if="flashEnabled" :size="19" />
             <ZapOff v-else :size="19" />
           </template>
-        </k-fab>
-        <k-fab
+        </sky-fab>
+        <sky-fab
           v-if="mode === 'video'"
           component="button"
           type="button"
           class="camera-control"
-          :colors="microphoneColors"
+          :class="{ 'camera-control--danger': !microphoneEnabled }"
+          variant="neutral"
           :disabled="recording || savingVideo"
           :aria-label="
             phone.t(
@@ -543,7 +527,7 @@ onBeforeUnmount(() => {
             <Mic v-if="microphoneEnabled" :size="19" />
             <MicOff v-else :size="19" />
           </template>
-        </k-fab>
+        </sky-fab>
       </div>
       <span
         v-if="noticeText"
@@ -573,11 +557,11 @@ onBeforeUnmount(() => {
         <LockOpen v-else :size="12" />
         <kbd>{{ phone.t('Apps.camera.spaceKey') }}</kbd>
       </button>
-      <k-fab
+      <sky-fab
         component="button"
         type="button"
         class="camera-control"
-        :colors="controlColors"
+        variant="neutral"
         :disabled="recording || savingVideo"
         :aria-label="
           phone.t(
@@ -589,7 +573,7 @@ onBeforeUnmount(() => {
         @click="toggleOrientation"
       >
         <template #icon><RotateCcwSquare :size="19" /></template>
-      </k-fab>
+      </sky-fab>
     </header>
 
     <div v-if="recording || savingVideo" class="camera-record-status">
@@ -657,16 +641,16 @@ onBeforeUnmount(() => {
           <span></span>
         </button>
 
-        <k-fab
+        <sky-fab
           component="button"
           type="button"
           class="camera-control camera-selfie"
-          :colors="controlColors"
+          variant="neutral"
           :aria-label="phone.t('Apps.camera.flip')"
           @click="toggleFacing"
         >
           <template #icon><RefreshCw :size="20" /></template>
-        </k-fab>
+        </sky-fab>
       </div>
 
       <SkySegmented
@@ -694,7 +678,7 @@ onBeforeUnmount(() => {
         </SkySegmentedButton>
       </SkySegmented>
     </footer>
-  </k-page>
+  </sky-app-page>
 </template>
 
 <style scoped>
@@ -810,7 +794,14 @@ onBeforeUnmount(() => {
   height: 44px;
 }
 .camera-control {
-  --color-primary: transparent;
+  --sky-glass-solid: rgb(28 28 30 / 80%);
+  color: rgb(255 255 255 / 86%);
+}
+.camera-control--flash-active {
+  color: #ffd60a !important;
+}
+.camera-control--danger {
+  color: #ff6961 !important;
 }
 .camera-picker-back {
   width: 44px;
diff --git a/frontend/src/views/apps/CityMarktApp.vue b/frontend/src/views/apps/CityMarktApp.vue
index 2211135..887a8ea 100644
--- a/frontend/src/views/apps/CityMarktApp.vue
+++ b/frontend/src/views/apps/CityMarktApp.vue
@@ -34,17 +34,17 @@ import {
   X,
 } from 'lucide-vue-next'
 import {
-  kBadge,
-  kButton,
-  kGlass,
-  kIcon,
-  kNavbar,
-  kPage,
-  kSearchbar,
-  kTabbar,
-  kTabbarLink,
-  kToolbarPane,
-} from 'konsta/vue'
+  SkyBadge,
+  SkyButton,
+  SkyGlass,
+  SkyIcon,
+  SkyNavbar,
+  SkyAppPage,
+  SkySearchbar,
+  SkyTabBar,
+  SkyTabButton,
+  SkyToolbarPane,
+} from '@/ui'
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -115,10 +115,6 @@ type ProfileMediaContext = {
 }
 
 const phone = usePhoneStore()
-const detailActionColors = computed(() => ({
-  bgIos: phone.isDarkMode ? 'bg-ios-dark-glass' : 'bg-ios-light-glass',
-  shadowIos: phone.isDarkMode ? 'shadow-ios-dark-glass' : 'shadow-ios-light-glass',
-}))
 const route = useRoute()
 const router = useRouter()
 const account = useAccountStore()
@@ -144,7 +140,11 @@ const profileMode = ref<'own' | 'favorites'>('own')
 const onboardingReady = ref(false)
 const profileEditing = ref(false)
 const profilePending = ref(false)
-const profileDraft = ref<MarketplaceProfileDraft>({ avatarMediaId: 0, bio: '', displayName: '' })
+const profileDraft = ref<MarketplaceProfileDraft>({
+  avatarMediaId: 0,
+  bio: '',
+  displayName: '',
+})
 const selectedProfilePhoto = ref<PhoneMedia | null>(null)
 const message = ref('')
 const firstMessage = ref('')
@@ -258,7 +258,11 @@ const localPagesInstalled = computed(
 )
 const canSaveProfile = computed(() => {
   const nameLength = profileDraft.value.displayName.trim().length
-  return nameLength >= 2 && nameLength <= 40 && profileDraft.value.bio.trim().length <= 160
+  return (
+    nameLength >= 2 &&
+    nameLength <= 40 &&
+    profileDraft.value.bio.trim().length <= 160
+  )
 })
 const displayItems = computed(() => {
   if (tab.value === 'profile') {
@@ -442,9 +446,7 @@ function localPagesShareHint(listingId: string): string {
 }
 
 function hasLocalPagesPost(listingId: string): boolean {
-  return pages.ownItems.some(
-    (item) => item.citymarkt_listing_id === listingId,
-  )
+  return pages.ownItems.some((item) => item.citymarkt_listing_id === listingId)
 }
 
 function shareListing(): void {
@@ -558,7 +560,7 @@ function switchAuthMode(mode: 'login' | 'register'): void {
   profileDraft.value.displayName =
     mode === 'login'
       ? (marketplace.profile?.display_name ?? '')
-      : account.email.split('@')[0] ?? ''
+      : (account.email.split('@')[0] ?? '')
   if (mode === 'login') selectedProfilePhoto.value = null
 }
 
@@ -641,7 +643,8 @@ function syncProfileDraft(): void {
   profileDraft.value = {
     avatarMediaId: marketplace.profile?.avatar_media_id ?? 0,
     bio: marketplace.profile?.bio ?? '',
-    displayName: marketplace.profile?.display_name ?? account.email.split('@')[0] ?? '',
+    displayName:
+      marketplace.profile?.display_name ?? account.email.split('@')[0] ?? '',
   }
   selectedProfilePhoto.value = null
 }
@@ -683,7 +686,8 @@ async function saveProfile(): Promise<void> {
   }
   profilePending.value = true
   const response = await marketplace.saveProfile({
-    avatarMediaId: selectedProfilePhoto.value?.id ?? profileDraft.value.avatarMediaId,
+    avatarMediaId:
+      selectedProfilePhoto.value?.id ?? profileDraft.value.avatarMediaId,
     bio: profileDraft.value.bio.trim(),
     displayName: profileDraft.value.displayName.trim(),
   })
@@ -749,6 +753,17 @@ function resetSell(): void {
   }
 }
 
+function closeSell(): void {
+  resetSell()
+  screen.value = 'main'
+  tab.value = 'discover'
+}
+
+function closeChat(): void {
+  screen.value = 'main'
+  tab.value = 'inbox'
+}
+
 function editListing(): void {
   if (!selectedListing.value) return
   editing.value = {
@@ -968,7 +983,9 @@ async function blockSeller(): Promise<void> {
 
 onMounted(async () => {
   const selection = messageMedia.consumeMany<MediaContext>('citymarkt:sell')
-  const profileSelection = messageMedia.consumeMany<ProfileMediaContext>('citymarkt:profile-avatar')
+  const profileSelection = messageMedia.consumeMany<ProfileMediaContext>(
+    'citymarkt:profile-avatar',
+  )
   if (selection) {
     if (selection.context) {
       draft.value = selection.context.draft
@@ -1028,20 +1045,22 @@ onMounted(async () => {
     screen.value = 'main'
   }
   onboardingReady.value = true
-  if (marketplace.profile?.exists && typeof route.query.listingId === 'string') {
+  if (
+    marketplace.profile?.exists &&
+    typeof route.query.listingId === 'string'
+  ) {
     await openListing({ id: route.query.listingId })
   }
 })
 </script>
 
 <template>
-  <k-page
+  <sky-app-page
     component="main"
     class="citymarkt pb-safe-24"
     :class="{ 'citymarkt--light': !phone.isDarkMode }"
-    :colors="{ bgIos: 'bg-transparent' }"
   >
-    <k-navbar
+    <sky-navbar
       v-if="screen === 'main' && onboardingReady && isAuthenticated"
       class="citymarkt-navbar"
       :subtitle="
@@ -1058,14 +1077,16 @@ onMounted(async () => {
       "
     />
 
-    <div v-if="!onboardingReady" class="citymarkt__gate-loading">{{ phone.t('Common.loading') }}</div>
+    <div v-if="!onboardingReady" class="citymarkt__gate-loading">
+      {{ phone.t('Common.loading') }}
+    </div>
     <section
       v-if="screen === 'main' && onboardingReady"
       class="citymarkt__content"
       :class="{ 'citymarkt__content--auth': !isAuthenticated }"
     >
       <template v-if="tab === 'discover' || tab === 'search'">
-        <k-searchbar
+        <sky-searchbar
           component="form"
           :value="search"
           :placeholder="phone.t('Apps.citymarkt.searchPlaceholder')"
@@ -1082,9 +1103,9 @@ onMounted(async () => {
             type="button"
             @click="toggleCategory(item.id)"
           >
-            <k-glass class="citymarkt__category-icon">
+            <sky-glass class="citymarkt__category-icon">
               <component :is="item.icon" :size="19" />
-            </k-glass>
+            </sky-glass>
             {{ label('categories', item.id) }}
           </button>
         </div>
@@ -1115,7 +1136,7 @@ onMounted(async () => {
                 {{ marketplace.items.length }}
                 {{ phone.t('Apps.citymarkt.offers') }}
               </small>
-              <k-glass class="citymarkt-layout-toggle">
+              <sky-glass class="citymarkt-layout-toggle">
                 <button
                   type="button"
                   :aria-label="
@@ -1140,7 +1161,7 @@ onMounted(async () => {
                   <Rows3 v-if="listingLayout === 'compact'" :size="17" />
                   <LayoutGrid v-else :size="17" />
                 </button>
-              </k-glass>
+              </sky-glass>
             </span>
           </div>
         </div>
@@ -1158,7 +1179,7 @@ onMounted(async () => {
           class="citymarkt__grid"
           :class="{ 'citymarkt__grid--wide': listingLayout === 'wide' }"
         >
-          <k-glass
+          <sky-glass
             v-for="item in displayItems"
             :key="item.id"
             class="citymarkt-listing-card"
@@ -1170,29 +1191,31 @@ onMounted(async () => {
             >
               <span
                 class="citymarkt__card-image"
-              :class="{ 'citymarkt__card-image--empty': !item.image }"
-              :style="{ background: item.image ?? undefined }"
-            >
-              <span v-if="!item.image" class="citymarkt__image-placeholder"
-                ><ImageOff :size="20" /><small>{{
-                  phone.t('Apps.citymarkt.noPhoto')
-                }}</small></span
+                :class="{ 'citymarkt__card-image--empty': !item.image }"
+                :style="{ background: item.image ?? undefined }"
               >
-              <i v-if="item.status === 'reserved'">{{
-                phone.t('Apps.citymarkt.status.reserved')
-              }}</i>
+                <span v-if="!item.image" class="citymarkt__image-placeholder"
+                  ><ImageOff :size="20" /><small>{{
+                    phone.t('Apps.citymarkt.noPhoto')
+                  }}</small></span
+                >
+                <i v-if="item.status === 'reserved'">{{
+                  phone.t('Apps.citymarkt.status.reserved')
+                }}</i>
               </span>
               <span class="citymarkt-listing-card__body">
                 <strong>{{ formatPrice(item) }}</strong>
-                <span class="citymarkt-listing-card__title">{{ item.title }}</span>
+                <span class="citymarkt-listing-card__title">{{
+                  item.title
+                }}</span>
                 <small
-              ><MapPin :size="11" />
-              {{
-                item.district
-                  ? label('districts', item.district)
-                  : phone.t('Apps.citymarkt.noDistrict')
-              }}
-              · {{ relativeDate(item.created_at) }}</small
+                  ><MapPin :size="11" />
+                  {{
+                    item.district
+                      ? label('districts', item.district)
+                      : phone.t('Apps.citymarkt.noDistrict')
+                  }}
+                  · {{ relativeDate(item.created_at) }}</small
                 >
               </span>
             </button>
@@ -1214,7 +1237,7 @@ onMounted(async () => {
                 :fill="item.is_favorite ? 'currentColor' : 'none'"
               />
             </button>
-          </k-glass>
+          </sky-glass>
         </div>
       </template>
 
@@ -1223,9 +1246,9 @@ onMounted(async () => {
           <UserRound :size="40" />
           <h2>{{ phone.t('Apps.citymarkt.signInTitle') }}</h2>
           <p>{{ phone.t('Apps.citymarkt.signInBody') }}</p>
-          <k-button rounded @click="tab = 'profile'">
+          <sky-button rounded @click="tab = 'profile'">
             {{ phone.t('Apps.citymarkt.login') }}
-          </k-button>
+          </sky-button>
         </div>
         <div v-else-if="!marketplace.inquiries.length" class="citymarkt__empty">
           <MessageCircle :size="36" /><strong>{{
@@ -1234,7 +1257,7 @@ onMounted(async () => {
           ><span>{{ phone.t('Apps.citymarkt.noMessagesBody') }}</span>
         </div>
         <div v-else class="citymarkt__inquiries citymarkt__glass-list">
-          <k-glass v-for="item in marketplace.inquiries" :key="item.id">
+          <sky-glass v-for="item in marketplace.inquiries" :key="item.id">
             <button type="button" @click="openChat(item.id)">
               <span
                 :class="{ 'citymarkt__thumb--empty': !item.image }"
@@ -1249,7 +1272,7 @@ onMounted(async () => {
               <i v-if="Number(item.unread)">{{ item.unread }}</i
               ><ChevronRight :size="16" />
             </button>
-          </k-glass>
+          </sky-glass>
         </div>
       </template>
 
@@ -1268,104 +1291,194 @@ onMounted(async () => {
           />
         </div>
         <template v-else>
-          <section v-if="profileEditing || !marketplace.profile?.exists" class="citymarkt__profile-editor">
+          <section
+            v-if="profileEditing || !marketplace.profile?.exists"
+            class="citymarkt__profile-editor"
+          >
             <header>
               <div><UserRound :size="21" /></div>
               <span>
-                <strong>{{ phone.t(marketplace.profile?.exists ? 'Apps.citymarkt.editProfile' : 'Apps.citymarkt.createProfile') }}</strong>
+                <strong>{{
+                  phone.t(
+                    marketplace.profile?.exists
+                      ? 'Apps.citymarkt.editProfile'
+                      : 'Apps.citymarkt.createProfile',
+                  )
+                }}</strong>
                 <small>{{ phone.t('Apps.citymarkt.profileIntro') }}</small>
               </span>
             </header>
             <div class="citymarkt__profile-photo">
               <span>
-                <img v-if="selectedProfilePhoto?.url || marketplace.profile?.avatar_url" :src="selectedProfilePhoto?.url ?? marketplace.profile?.avatar_url ?? ''" alt="" />
-                <template v-else>{{ profileDraft.displayName.charAt(0).toUpperCase() || account.email.charAt(0).toUpperCase() }}</template>
+                <img
+                  v-if="
+                    selectedProfilePhoto?.url || marketplace.profile?.avatar_url
+                  "
+                  :src="
+                    selectedProfilePhoto?.url ??
+                    marketplace.profile?.avatar_url ??
+                    ''
+                  "
+                  alt=""
+                />
+                <template v-else>{{
+                  profileDraft.displayName.charAt(0).toUpperCase() ||
+                  account.email.charAt(0).toUpperCase()
+                }}</template>
               </span>
               <div>
-                <button type="button" @click="openProfileMedia('photos')"><Images :size="15" />{{ phone.t('Apps.citymarkt.chooseGallery') }}</button>
-                <button type="button" @click="openProfileMedia('camera')"><Camera :size="15" />{{ phone.t('Apps.citymarkt.takePhoto') }}</button>
-                <button v-if="profileDraft.avatarMediaId" type="button" class="danger" @click="removeProfilePhoto">{{ phone.t('Apps.citymarkt.removeProfilePhoto') }}</button>
+                <button type="button" @click="openProfileMedia('photos')">
+                  <Images :size="15" />{{
+                    phone.t('Apps.citymarkt.chooseGallery')
+                  }}
+                </button>
+                <button type="button" @click="openProfileMedia('camera')">
+                  <Camera :size="15" />{{ phone.t('Apps.citymarkt.takePhoto') }}
+                </button>
+                <button
+                  v-if="profileDraft.avatarMediaId"
+                  type="button"
+                  class="danger"
+                  @click="removeProfilePhoto"
+                >
+                  {{ phone.t('Apps.citymarkt.removeProfilePhoto') }}
+                </button>
               </div>
             </div>
-            <label>{{ phone.t('Apps.citymarkt.profileEmail') }}<k-glass><input :value="account.email" readonly /></k-glass></label>
-            <label>{{ phone.t('Apps.citymarkt.displayName') }}<k-glass><input v-model="profileDraft.displayName" maxlength="40" /></k-glass></label>
-            <label>{{ phone.t('Apps.citymarkt.profileBio') }}<k-glass><textarea v-model="profileDraft.bio" maxlength="160" /></k-glass></label>
+            <label
+              >{{ phone.t('Apps.citymarkt.profileEmail')
+              }}<sky-glass><input :value="account.email" readonly /></sky-glass
+            ></label>
+            <label
+              >{{ phone.t('Apps.citymarkt.displayName')
+              }}<sky-glass
+                ><input
+                  v-model="profileDraft.displayName"
+                  maxlength="40" /></sky-glass
+            ></label>
+            <label
+              >{{ phone.t('Apps.citymarkt.profileBio')
+              }}<sky-glass>
+                <textarea
+                  v-model="profileDraft.bio"
+                  maxlength="160"
+                /></sky-glass
+            ></label>
             <div class="citymarkt__profile-actions">
-              <button v-if="marketplace.profile?.exists" type="button" @click="cancelProfileEdit">{{ phone.t('Apps.citymarkt.cancel') }}</button>
-              <button type="button" :disabled="!canSaveProfile || profilePending" @click="saveProfile">{{ phone.t('Apps.citymarkt.saveProfile') }}</button>
+              <button
+                v-if="marketplace.profile?.exists"
+                type="button"
+                @click="cancelProfileEdit"
+              >
+                {{ phone.t('Apps.citymarkt.cancel') }}
+              </button>
+              <button
+                type="button"
+                :disabled="!canSaveProfile || profilePending"
+                @click="saveProfile"
+              >
+                {{ phone.t('Apps.citymarkt.saveProfile') }}
+              </button>
             </div>
           </section>
           <template v-else>
-          <k-glass class="citymarkt__glass-profile">
-            <span>
-              <img v-if="marketplace.profile?.avatar_url" :src="marketplace.profile.avatar_url" alt="" />
-              <template v-else>{{ marketplace.profile?.display_name.charAt(0).toUpperCase() }}</template>
-            </span>
-            <div>
-              <strong>{{ marketplace.profile?.display_name }}</strong>
-              <small>{{ account.email }}</small>
-              <p v-if="marketplace.profile?.bio">{{ marketplace.profile.bio }}</p>
-            </div>
-            <button type="button" :aria-label="phone.t('Apps.citymarkt.editProfile')" @click="editProfile"><Pencil :size="16" /></button>
-          </k-glass>
-          <k-glass class="citymarkt__glass-segmented">
-            <button
-              type="button"
-              :class="{ active: profileMode === 'own' }"
-              @click="profileMode = 'own'"
-            >
-              <Tag :size="14" />
-              {{ phone.t('Apps.citymarkt.myListings') }}
-              <span>{{ marketplace.counts.active }}</span>
-            </button>
-            <button
-              type="button"
-              :class="{ active: profileMode === 'favorites' }"
-              @click="profileMode = 'favorites'"
-            >
-              <Heart :size="14" />
-              {{ phone.t('Apps.citymarkt.favorites') }}
-              <span>{{ marketplace.items.length }}</span>
-            </button>
-          </k-glass>
-          <div v-if="!displayItems.length" class="citymarkt__empty">
-            <Tag :size="34" /><strong>{{
-              phone.t('Apps.citymarkt.noProfileListings')
-            }}</strong>
-          </div>
-          <div v-else class="citymarkt__list citymarkt__glass-list">
-            <k-glass
-              v-for="item in displayItems"
-              :key="item.id"
-              class="citymarkt-profile-listing"
-              ><button type="button" @click="openListing(item)">
-                <span
-                  :class="{ 'citymarkt__thumb--empty': !item.image }"
-                  :style="{ background: item.image ?? undefined }"
-                  ><ImageOff v-if="!item.image" :size="17"
-                /></span>
-                <div class="citymarkt-profile-listing__body">
-                  <b>{{ formatPrice(item) }}</b>
-                  <strong>{{ item.title }}</strong>
-                  <small>{{ label('status', item.status) }}</small>
-                </div>
-                <ChevronRight :size="17" /></button
-              ><button
-                v-if="profileMode === 'own' && (item.status === 'active' || item.status === 'reserved')"
-                class="citymarkt-profile-listing__share"
+            <sky-glass class="citymarkt__glass-profile">
+              <span>
+                <img
+                  v-if="marketplace.profile?.avatar_url"
+                  :src="marketplace.profile.avatar_url"
+                  alt=""
+                />
+                <template v-else>{{
+                  marketplace.profile?.display_name.charAt(0).toUpperCase()
+                }}</template>
+              </span>
+              <div>
+                <strong>{{ marketplace.profile?.display_name }}</strong>
+                <small>{{ account.email }}</small>
+                <p v-if="marketplace.profile?.bio">
+                  {{ marketplace.profile.bio }}
+                </p>
+              </div>
+              <button
                 type="button"
-                @click="shareToLocalPages(item.id)"
-              ><CircleCheck
-                v-if="hasLocalPagesPost(item.id)"
-                :size="15"
-              /><Share2 v-else :size="15" />{{ localPagesShareLabel(item.id) }}</button
-            ></k-glass>
-          </div>
+                :aria-label="phone.t('Apps.citymarkt.editProfile')"
+                @click="editProfile"
+              >
+                <Pencil :size="16" />
+              </button>
+            </sky-glass>
+            <sky-glass class="citymarkt__glass-segmented">
+              <button
+                type="button"
+                :class="{ active: profileMode === 'own' }"
+                @click="profileMode = 'own'"
+              >
+                <Tag :size="14" />
+                {{ phone.t('Apps.citymarkt.myListings') }}
+                <span>{{ marketplace.counts.active }}</span>
+              </button>
+              <button
+                type="button"
+                :class="{ active: profileMode === 'favorites' }"
+                @click="profileMode = 'favorites'"
+              >
+                <Heart :size="14" />
+                {{ phone.t('Apps.citymarkt.favorites') }}
+                <span>{{ marketplace.items.length }}</span>
+              </button>
+            </sky-glass>
+            <div v-if="!displayItems.length" class="citymarkt__empty">
+              <Tag :size="34" /><strong>{{
+                phone.t('Apps.citymarkt.noProfileListings')
+              }}</strong>
+            </div>
+            <div v-else class="citymarkt__list citymarkt__glass-list">
+              <sky-glass
+                v-for="item in displayItems"
+                :key="item.id"
+                class="citymarkt-profile-listing"
+                ><button type="button" @click="openListing(item)">
+                  <span
+                    :class="{ 'citymarkt__thumb--empty': !item.image }"
+                    :style="{ background: item.image ?? undefined }"
+                    ><ImageOff v-if="!item.image" :size="17"
+                  /></span>
+                  <div class="citymarkt-profile-listing__body">
+                    <b>{{ formatPrice(item) }}</b>
+                    <strong>{{ item.title }}</strong>
+                    <small>{{ label('status', item.status) }}</small>
+                  </div>
+                  <ChevronRight :size="17" /></button
+                ><button
+                  v-if="
+                    profileMode === 'own' &&
+                    (item.status === 'active' || item.status === 'reserved')
+                  "
+                  class="citymarkt-profile-listing__share"
+                  type="button"
+                  @click="shareToLocalPages(item.id)"
+                >
+                  <CircleCheck
+                    v-if="hasLocalPagesPost(item.id)"
+                    :size="15"
+                  /><Share2 v-else :size="15" />{{
+                    localPagesShareLabel(item.id)
+                  }}
+                </button></sky-glass
+              >
+            </div>
           </template>
-          <k-button large rounded outline class="citymarkt__logout" @click="logoutDialogOpen = true">
+          <sky-button
+            large
+            rounded
+            outline
+            class="citymarkt__logout"
+            @click="logoutDialogOpen = true"
+          >
             <LogOut :size="17" />
             {{ phone.t('Common.signOut') }}
-          </k-button>
+          </sky-button>
         </template>
       </template>
     </section>
@@ -1375,40 +1488,42 @@ onMounted(async () => {
       class="citymarkt__detail"
     >
       <div class="citymarkt__glass-actions">
-        <k-glass
+        <sky-glass
           component="button"
           type="button"
           class="citymarkt-detail-action"
-          :colors="detailActionColors"
           :aria-label="phone.t('Common.back')"
           @click="screen = 'main'"
-          ><ArrowLeft :size="19" /></k-glass
-        >
+          ><ArrowLeft :size="19"
+        /></sky-glass>
         <div>
-          <k-glass
+          <sky-glass
             v-if="!selectedListing.is_owner"
             component="button"
             type="button"
             class="citymarkt-detail-action"
-            :colors="detailActionColors"
             :class="{ active: selectedListing.is_favorite }"
-            :aria-label="phone.t(selectedListing.is_favorite ? 'Apps.citymarkt.removeFavorite' : 'Apps.citymarkt.addFavorite')"
+            :aria-label="
+              phone.t(
+                selectedListing.is_favorite
+                  ? 'Apps.citymarkt.removeFavorite'
+                  : 'Apps.citymarkt.addFavorite',
+              )
+            "
             @click="toggleListingFavorite(selectedListing)"
             ><Heart
               :size="19"
               :fill="selectedListing.is_favorite ? 'currentColor' : 'none'"
-            /></k-glass
-          >
-          <k-glass
+          /></sky-glass>
+          <sky-glass
             v-if="!selectedListing.is_owner"
             component="button"
             type="button"
             class="citymarkt-detail-action"
-            :colors="detailActionColors"
             :aria-label="phone.t('Apps.citymarkt.reportListing')"
             @click="screen = 'report'"
-            ><MoreHorizontal :size="20" /></k-glass
-          >
+            ><MoreHorizontal :size="20"
+          /></sky-glass>
         </div>
       </div>
       <CityMarktGallery
@@ -1442,7 +1557,15 @@ onMounted(async () => {
         </p>
         <p class="citymarkt__description">{{ selectedListing.description }}</p>
         <div class="citymarkt__seller">
-          <span><img v-if="selectedListing.seller_avatar" :src="selectedListing.seller_avatar" alt="" /><template v-else>{{ selectedListing.seller_name.charAt(0).toUpperCase() }}</template></span>
+          <span
+            ><img
+              v-if="selectedListing.seller_avatar"
+              :src="selectedListing.seller_avatar"
+              alt=""
+            /><template v-else>{{
+              selectedListing.seller_name.charAt(0).toUpperCase()
+            }}</template></span
+          >
           <div>
             <strong>{{ selectedListing.seller_name }}</strong
             ><small
@@ -1456,12 +1579,17 @@ onMounted(async () => {
           {{ selectedListing.phone_number }}
         </p>
         <button
-          v-if="selectedListing.status === 'active' || selectedListing.status === 'reserved'"
+          v-if="
+            selectedListing.status === 'active' ||
+            selectedListing.status === 'reserved'
+          "
           class="citymarkt__pages-share"
           type="button"
           @click="shareListing"
         >
-          <Share2 :size="17" /><span><strong>{{ phone.t('Apps.easyShare.share') }}</strong></span>
+          <Share2 :size="17" /><span
+            ><strong>{{ phone.t('Apps.easyShare.share') }}</strong></span
+          >
         </button>
         <template v-if="selectedListing.is_owner">
           <button
@@ -1478,7 +1606,9 @@ onMounted(async () => {
               :size="17"
             /><Share2 v-else :size="17" /><span
               ><strong>{{ localPagesShareLabel(selectedListing.id) }}</strong
-              ><small>{{ localPagesShareHint(selectedListing.id) }}</small></span
+              ><small>{{
+                localPagesShareHint(selectedListing.id)
+              }}</small></span
             >
           </button>
           <div class="citymarkt__owner-actions">
@@ -1534,27 +1664,38 @@ onMounted(async () => {
             </button>
           </div>
         </template>
-        <k-glass v-else class="citymarkt__glass-auth">{{
+        <sky-glass v-else class="citymarkt__glass-auth">{{
           phone.t('Apps.citymarkt.signInToMessage')
-        }}</k-glass>
+        }}</sky-glass>
       </div>
     </section>
 
     <section v-else-if="screen === 'sell'" class="citymarkt__sell">
-      <k-navbar
+      <sky-navbar
         class="citymarkt-create-navbar"
         center-title
         left-class="citymarkt-create-action citymarkt-create-action--close"
         right-class="citymarkt-create-action citymarkt-create-action--next"
-        :title="phone.t(editing ? 'Apps.citymarkt.editListing' : 'Apps.citymarkt.createListing')"
-        :subtitle="phone.t('Apps.citymarkt.step', { current: String(sellStep), total: '4' })"
+        :title="
+          phone.t(
+            editing
+              ? 'Apps.citymarkt.editListing'
+              : 'Apps.citymarkt.createListing',
+          )
+        "
+        :subtitle="
+          phone.t('Apps.citymarkt.step', {
+            current: String(sellStep),
+            total: '4',
+          })
+        "
       >
         <template #left>
           <button
             class="citymarkt-create-close"
             type="button"
             :aria-label="phone.t('Common.close')"
-            @click="resetSell(); screen = 'main'; tab = 'discover'"
+            @click="closeSell"
           >
             <X :size="20" />
           </button>
@@ -1569,11 +1710,13 @@ onMounted(async () => {
             {{
               sellStep < 4
                 ? phone.t('Apps.citymarkt.next')
-                : phone.t(editing ? 'Apps.citymarkt.save' : 'Apps.citymarkt.publish')
+                : phone.t(
+                    editing ? 'Apps.citymarkt.save' : 'Apps.citymarkt.publish',
+                  )
             }}
           </button>
         </template>
-      </k-navbar>
+      </sky-navbar>
       <div class="citymarkt__progress">
         <i :style="{ width: `${sellStep * 25}%` }" />
       </div>
@@ -1583,20 +1726,20 @@ onMounted(async () => {
           <h2>{{ phone.t('Apps.citymarkt.addPhotos') }}</h2>
           <p>{{ phone.t('Apps.citymarkt.addPhotosBody') }}</p>
           <div class="citymarkt__photo-actions">
-            <k-glass>
+            <sky-glass>
               <button type="button" @click="openMediaApp('photos')">
                 <span><Images :size="20" /></span>
                 <strong>{{ phone.t('Apps.citymarkt.chooseGallery') }}</strong>
                 <small>{{ phone.t('Apps.citymarkt.chooseGalleryBody') }}</small>
               </button>
-            </k-glass>
-            <k-glass>
+            </sky-glass>
+            <sky-glass>
               <button type="button" @click="openMediaApp('camera')">
                 <span><Camera :size="20" /></span>
                 <strong>{{ phone.t('Apps.citymarkt.takePhotos') }}</strong>
                 <small>{{ phone.t('Apps.citymarkt.takePhotosBody') }}</small>
               </button>
-            </k-glass>
+            </sky-glass>
           </div>
           <div class="citymarkt__selected-heading">
             <strong>{{ phone.t('Apps.citymarkt.selectedPhotos') }}</strong>
@@ -1655,12 +1798,12 @@ onMounted(async () => {
                 }}</small
               >
             </span>
-            <k-glass class="citymarkt__field-glass">
+            <sky-glass class="citymarkt__field-glass">
               <input
                 v-model="draft.title"
                 :maxlength="listingTextLimits.title.maximum"
               />
-            </k-glass>
+            </sky-glass>
           </label>
           <label>
             <span class="citymarkt__field-heading">
@@ -1686,12 +1829,14 @@ onMounted(async () => {
                 }}</small
               >
             </span>
-            <k-glass class="citymarkt__field-glass citymarkt__field-glass--textarea">
+            <sky-glass
+              class="citymarkt__field-glass citymarkt__field-glass--textarea"
+            >
               <textarea
                 v-model="draft.description"
                 :maxlength="listingTextLimits.description.maximum"
               />
-            </k-glass>
+            </sky-glass>
           </label>
           <label
             >{{ phone.t('Apps.citymarkt.category')
@@ -1721,14 +1866,13 @@ onMounted(async () => {
               @change="selectDraftPriceType" /></label
           ><label v-if="draft.priceType !== 'free'"
             >{{ phone.t('Apps.citymarkt.price') }}
-            <k-glass class="citymarkt__field-glass">
+            <sky-glass class="citymarkt__field-glass">
               <input
                 v-model="draft.price"
                 inputmode="numeric"
                 type="number"
                 min="1"
-              />
-            </k-glass></label
+              /> </sky-glass></label
           ><label
             >{{ phone.t('Apps.citymarkt.district')
             }}<CityMarktSelect
@@ -1763,7 +1907,7 @@ onMounted(async () => {
           ></template
         >
       </div>
-      <k-glass
+      <sky-glass
         v-if="sellStep > 1"
         component="button"
         class="citymarkt-create-back"
@@ -1772,7 +1916,7 @@ onMounted(async () => {
       >
         <ArrowLeft :size="18" />
         {{ phone.t('Apps.citymarkt.previous') }}
-      </k-glass>
+      </sky-glass>
     </section>
 
     <section
@@ -1780,13 +1924,9 @@ onMounted(async () => {
       class="citymarkt__chat"
     >
       <header>
-        <k-button
-          component="button"
-          clear
-          rounded
-          @click="screen = 'main'; tab = 'inbox'"
+        <sky-button component="button" clear rounded @click="closeChat"
           ><ArrowLeft :size="19"
-        /></k-button>
+        /></sky-button>
         <div>
           <strong>{{
             selectedChat.inquiry.seller_account_id === selectedChat.accountId
@@ -1796,12 +1936,12 @@ onMounted(async () => {
           ><small>{{ selectedChat.inquiry.title }}</small>
         </div>
       </header>
-      <k-glass class="citymarkt__glass-chat-listing"
+      <sky-glass class="citymarkt__glass-chat-listing"
         ><div>
           <strong>{{ formatPrice(selectedChat.inquiry) }}</strong
           ><span>{{ selectedChat.inquiry.title }}</span>
         </div>
-        <i>{{ label('status', selectedChat.inquiry.status) }}</i></k-glass
+        <i>{{ label('status', selectedChat.inquiry.status) }}</i></sky-glass
       >
       <div class="citymarkt__messages">
         <template v-for="item in chatTimeline" :key="item.key">
@@ -1836,14 +1976,14 @@ onMounted(async () => {
             <small>{{ phone.t('Apps.citymarkt.offerFor') }}</small>
             <strong>{{ selectedChat.inquiry.title }}</strong>
           </div>
-          <k-button
+          <sky-button
             component="button"
             clear
             rounded
             type="button"
             @click="offerPanelOpen = false"
             ><X :size="16"
-          /></k-button>
+          /></sky-button>
         </header>
         <label>
           {{ phone.t('Apps.citymarkt.offerAmount') }}
@@ -1898,8 +2038,8 @@ onMounted(async () => {
       class="citymarkt__report"
     >
       <header>
-        <k-button component="button" clear rounded @click="screen = 'detail'"
-          ><ArrowLeft :size="19" /></k-button
+        <sky-button component="button" clear rounded @click="screen = 'detail'"
+          ><ArrowLeft :size="19" /></sky-button
         ><strong>{{ phone.t('Apps.citymarkt.reportListing') }}</strong>
       </header>
       <div>
@@ -1921,17 +2061,23 @@ onMounted(async () => {
       </div>
     </section>
 
-    <k-tabbar
-      v-if="screen === 'main' && onboardingReady && isAuthenticated && marketplace.profile?.exists && !profileEditing"
+    <sky-tab-bar
+      v-if="
+        screen === 'main' &&
+        onboardingReady &&
+        isAuthenticated &&
+        marketplace.profile?.exists &&
+        !profileEditing
+      "
       component="nav"
       icons
-    labels
-    class="bottom-0 left-0 fixed"
-    inner-class="!w-full !max-w-none !gap-0 !px-1"
+      labels
+      class="bottom-0 left-0 fixed"
+      inner-class="!w-full !max-w-none !gap-0 !px-1"
       :aria-label="phone.t('Apps.citymarkt.name')"
     >
-      <k-toolbar-pane class="citymarkt__tab-pane">
-        <k-tabbar-link
+      <sky-toolbar-pane class="citymarkt__tab-pane">
+        <sky-tab-button
           v-for="item in tabs"
           :key="item.id"
           component="button"
@@ -1949,17 +2095,19 @@ onMounted(async () => {
               class="citymarkt__tab-icon"
               :class="{ 'citymarkt__tab-icon--create': item.id === 'sell' }"
             >
-              <k-icon>
+              <sky-icon>
                 <component :is="item.icon" :size="20" />
-              </k-icon>
-              <k-badge v-if="item.id === 'inbox' && marketplace.counts.unread">
+              </sky-icon>
+              <sky-badge
+                v-if="item.id === 'inbox' && marketplace.counts.unread"
+              >
                 {{ marketplace.counts.unread }}
-              </k-badge>
+              </sky-badge>
             </span>
           </template>
-        </k-tabbar-link>
-      </k-toolbar-pane>
-    </k-tabbar>
+        </sky-tab-button>
+      </sky-toolbar-pane>
+    </sky-tab-bar>
     <AccountLogoutDialog
       v-model:opened="logoutDialogOpen"
       app-id="citymarkt"
@@ -1970,73 +2118,1714 @@ onMounted(async () => {
         {{ feedback }}
       </div></Transition
     >
-  </k-page>
+  </sky-app-page>
 </template>
 
 <style scoped>
-.citymarkt{--yellow:#ffc928;--ink:#171816;--panel:#242522;--muted:#a6a89f;position:absolute;inset:0;padding:48px 0 25px;overflow:hidden;background:#151613;color:#f8f8f4;font-family:Inter,system-ui,sans-serif}.citymarkt--light{--ink:#fff;--panel:#f1f1ed;--muted:#71736c;background:#fafaf7;color:#161714}.citymarkt button,.citymarkt input,.citymarkt textarea,.citymarkt select{font:inherit}.citymarkt button{color:inherit}.citymarkt__header{height:64px;padding:6px 16px 8px;display:flex;align-items:center;justify-content:space-between}.citymarkt__brand{display:flex;align-items:center;gap:4px;color:var(--yellow);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.citymarkt__header h1{margin:1px 0 0;font-size:25px;line-height:1}.citymarkt__round,.citymarkt__top-actions button{position:relative;width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--panel)}.citymarkt__round i{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:#ff453a}.citymarkt__content{height:calc(100% - 64px - 58px);padding:0 14px 18px;overflow-y:auto;scrollbar-width:none}.citymarkt__search{height:38px;padding:0 10px;display:flex;align-items:center;gap:7px;border-radius:12px;background:var(--panel);color:var(--muted)}.citymarkt__search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:inherit;font-size:13px}.citymarkt__search button{padding:0;border:0;background:none}.citymarkt__categories{margin:12px -14px 2px;padding:0 14px 7px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}.citymarkt__categories button{width:61px;flex:none;padding:0;border:0;background:none;color:var(--muted);font-size:9px;white-space:nowrap}.citymarkt__categories button span{width:42px;height:42px;margin:0 auto 4px;border-radius:13px;display:grid;place-items:center;background:var(--panel);color:#efb911}.citymarkt__categories button.active span{background:var(--yellow);color:#171816}.citymarkt__filters{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px}.citymarkt__filters select{min-width:0;padding:8px;border:0;border-radius:9px;background:var(--panel);color:inherit;font-size:10px}.citymarkt__filters select:last-child{grid-column:1/-1}.citymarkt__section-title{margin:11px 1px 8px}.citymarkt__section-title div{display:flex;align-items:end;justify-content:space-between}.citymarkt__section-title strong{font-size:15px}.citymarkt__section-title small{color:var(--muted);font-size:9px}.citymarkt__grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 9px}.citymarkt__grid>button{min-width:0;padding:0;border:0;text-align:left;background:none}.citymarkt__card-image{position:relative;height:112px;margin-bottom:6px;display:block;border-radius:12px;background-size:cover!important;box-shadow:inset 0 0 0 1px #ffffff16}.citymarkt__card-image>i{position:absolute;left:6px;bottom:6px;padding:3px 6px;border-radius:6px;background:#161714d8;color:#fff;font-size:8px;font-style:normal;font-weight:800}.citymarkt__card-image>svg{position:absolute;top:7px;right:7px;padding:5px;box-sizing:content-box;border-radius:50%;background:#161714bb;color:#ffd02e}.citymarkt__grid button>strong{display:block;font-size:13px}.citymarkt__grid button>span:not(.citymarkt__card-image){display:block;overflow:hidden;font-size:11px;white-space:nowrap;text-overflow:ellipsis}.citymarkt__grid button>small,.citymarkt__preview-price+*+*+small{display:flex;align-items:center;gap:2px;overflow:hidden;color:var(--muted);font-size:8px;white-space:nowrap}.citymarkt__empty,.citymarkt__auth{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;color:var(--muted)}.citymarkt__empty strong,.citymarkt__auth h2{margin:4px 0 0;color:inherit;font-size:16px}.citymarkt__empty span,.citymarkt__auth p{max-width:220px;margin:0;font-size:11px}.citymarkt__auth svg{color:var(--yellow)}.citymarkt__inquiries,.citymarkt__list{display:flex;flex-direction:column;gap:7px}.citymarkt__inquiries>button,.citymarkt__list>button{width:100%;padding:8px;border:0;border-radius:13px;display:flex;align-items:center;gap:9px;text-align:left;background:var(--panel)}.citymarkt__inquiries>button>span,.citymarkt__list>button>span{width:48px;height:48px;flex:none;border-radius:10px}.citymarkt__inquiries div,.citymarkt__list div{min-width:0;flex:1}.citymarkt__inquiries strong,.citymarkt__inquiries b,.citymarkt__inquiries small,.citymarkt__list strong,.citymarkt__list b,.citymarkt__list small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.citymarkt__inquiries strong{font-size:12px}.citymarkt__inquiries b,.citymarkt__list b{font-size:10px}.citymarkt__inquiries small,.citymarkt__list small{color:var(--muted);font-size:9px}.citymarkt__inquiries i{min-width:17px;height:17px;padding:0 4px;border-radius:9px;display:grid;place-items:center;background:var(--yellow);color:#171816;font-size:9px;font-style:normal;font-weight:900}.citymarkt__profile{margin-bottom:12px;padding:12px;border-radius:15px;display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#3e3312,var(--panel))}.citymarkt__profile>span,.citymarkt__seller>span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:#171816;font-size:19px;font-weight:900}.citymarkt__profile strong,.citymarkt__profile small{display:block}.citymarkt__profile small{color:var(--muted);font-size:9px}.citymarkt__segmented{margin-bottom:10px;padding:3px;border-radius:10px;display:flex;background:var(--panel)}.citymarkt__segmented button{flex:1;padding:6px;border:0;border-radius:8px;background:none;font-size:9px}.citymarkt__segmented button.active{background:var(--yellow);color:#171816;font-weight:800}.citymarkt__list strong{font-size:11px}.citymarkt__tabbar{position:absolute;right:0;bottom:22px;left:0;height:58px;padding:7px 7px 0;display:flex;justify-content:space-around;border-top:1px solid #ffffff12;background:#171815ed;backdrop-filter:blur(18px)}.citymarkt--light .citymarkt__tabbar{border-color:#00000012;background:#fafaf7ed}.citymarkt__tabbar button{width:54px;padding:0;border:0;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;color:var(--muted);font-size:8px}.citymarkt__tabbar button>span{position:relative}.citymarkt__tabbar button.active{color:var(--yellow)}.citymarkt__tabbar button.sell span{width:37px;height:30px;margin-top:-4px;border-radius:10px;display:grid;place-items:center;background:var(--yellow);color:#171816}.citymarkt__tabbar button i{position:absolute;top:-5px;right:-9px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:#ff453a;color:white;font-size:8px;font-style:normal}.citymarkt__detail,.citymarkt__sell,.citymarkt__chat,.citymarkt__report{position:absolute;inset:0;padding-top:46px;overflow:hidden;background:#151613}.citymarkt--light .citymarkt__detail,.citymarkt--light .citymarkt__sell,.citymarkt--light .citymarkt__chat,.citymarkt--light .citymarkt__report{background:#fafaf7}.citymarkt__top-actions{position:absolute;z-index:2;top:52px;right:12px;left:12px;display:flex;justify-content:space-between}.citymarkt__top-actions>div{display:flex;gap:6px}.citymarkt__hero{height:205px;background-size:cover!important;position:relative}.citymarkt__hero>span{position:absolute;right:10px;bottom:9px;padding:4px 7px;border-radius:7px;background:#151613c9;color:white;font-size:8px}.citymarkt__detail-body{height:calc(100% - 205px);padding:13px 15px 35px;overflow-y:auto}.citymarkt__price-row{display:flex;justify-content:space-between}.citymarkt__price-row h2{margin:0;font-size:22px}.citymarkt__price-row span{display:inline-block;padding:3px 7px;border-radius:6px;background:var(--yellow);color:#171816;font-size:8px;font-weight:900}.citymarkt__price-row>small{color:var(--muted);font-size:9px}.citymarkt__detail-body>h1{margin:8px 0 3px;font-size:18px}.citymarkt__meta{margin:0;display:flex;align-items:center;gap:3px;color:var(--muted);font-size:10px}.citymarkt__description{padding:13px 0;border-bottom:1px solid #ffffff15;font-size:11px;line-height:1.5;white-space:pre-wrap}.citymarkt__seller{padding:8px 0;display:flex;align-items:center;gap:9px}.citymarkt__seller>span{width:38px;height:38px;font-size:16px}.citymarkt__seller strong,.citymarkt__seller small{display:block}.citymarkt__seller small,.citymarkt__phone{color:var(--muted);font-size:9px}.citymarkt__composer textarea{width:100%;height:60px;padding:9px;border:1px solid #ffffff18;border-radius:11px;resize:none;background:var(--panel);color:inherit;font-size:10px}.citymarkt__composer button,.citymarkt__owner-actions button,.citymarkt__report>div button{width:100%;margin-top:7px;padding:10px;border:0;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:5px;background:var(--yellow);color:#171816;font-size:10px;font-weight:900}.citymarkt__owner-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.citymarkt__owner-actions button{margin:0}.citymarkt__owner-actions button.danger{background:#44221f;color:#ff796f}.citymarkt__inline-auth{padding:12px;border-radius:11px;background:var(--panel);color:var(--muted);text-align:center;font-size:10px}.citymarkt__sell>header,.citymarkt__chat>header,.citymarkt__report>header{height:54px;padding:5px 12px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #ffffff12}.citymarkt__sell>header>button:first-child,.citymarkt__chat>header>button,.citymarkt__report>header>button{width:32px;height:32px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:var(--panel)}.citymarkt__sell>header>div,.citymarkt__chat>header>div{flex:1}.citymarkt__sell>header strong,.citymarkt__sell>header small,.citymarkt__chat>header strong,.citymarkt__chat>header small{display:block}.citymarkt__sell>header small,.citymarkt__chat>header small{color:var(--muted);font-size:9px}.citymarkt__sell>header>button:last-child{padding:6px;border:0;background:none;color:var(--yellow);font-size:10px;font-weight:800}.citymarkt__sell>header>button:disabled{opacity:.35}.citymarkt__progress{height:3px;background:var(--panel)}.citymarkt__progress i{height:100%;display:block;background:var(--yellow);transition:width .25s}.citymarkt__sell-body{height:calc(100% - 83px);padding:20px 16px 58px;overflow-y:auto}.citymarkt__sell-body>svg{color:var(--yellow)}.citymarkt__sell-body h2{margin:7px 0 4px;font-size:21px}.citymarkt__sell-body>p{margin:0 0 13px;color:var(--muted);font-size:10px}.citymarkt__photo-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.citymarkt__photo-picker button{aspect-ratio:1;border:2px solid transparent;border-radius:11px;background-size:cover!important}.citymarkt__photo-picker button.active{border-color:var(--yellow)}.citymarkt__photo-picker i{width:19px;height:19px;margin:5px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:#171816;font-size:9px;font-style:normal;font-weight:900}.citymarkt__photo-picker button:not(.active) i{display:none}.citymarkt__sell-body label{margin-top:12px;display:block;color:var(--muted);font-size:9px;font-weight:700}.citymarkt__sell-body input:not([type=checkbox]),.citymarkt__sell-body textarea,.citymarkt__sell-body select,.citymarkt__report select,.citymarkt__report textarea{width:100%;margin-top:5px;padding:10px;border:1px solid #ffffff14;border-radius:10px;outline:0;background:var(--panel);color:inherit;font-size:11px}.citymarkt__sell-body textarea{height:105px;resize:none}.citymarkt__switch{display:flex!important;align-items:center;gap:8px}.citymarkt__switch input{display:none}.citymarkt__switch span{width:35px;height:20px;border-radius:12px;background:#484a45}.citymarkt__switch span:after{content:'';width:16px;height:16px;margin:2px;display:block;border-radius:50%;background:white;transition:transform .2s}.citymarkt__switch input:checked+span{background:var(--yellow)}.citymarkt__switch input:checked+span:after{transform:translateX(15px)}.citymarkt__preview-image{height:170px;margin:12px 0;border-radius:15px;background-size:cover!important}.citymarkt__preview-price{font-size:21px}.citymarkt__sell-body h3{margin:6px 0;font-size:16px}.citymarkt__sell-body>small{display:flex;gap:3px;color:var(--muted)}.citymarkt__previous{position:absolute;bottom:33px;left:16px;padding:7px;border:0;background:none;color:var(--muted);font-size:10px}.citymarkt__chat-listing{margin:8px 10px;padding:8px 10px;border-radius:11px;display:flex;align-items:center;justify-content:space-between;background:var(--panel)}.citymarkt__chat-listing strong,.citymarkt__chat-listing span{display:block;font-size:10px}.citymarkt__chat-listing i{padding:3px 6px;border-radius:6px;background:#3d3621;color:var(--yellow);font-size:8px;font-style:normal}.citymarkt__messages{height:calc(100% - 178px);padding:8px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:7px}.citymarkt__messages article{max-width:80%;align-self:flex-start}.citymarkt__messages article.own{align-self:flex-end}.citymarkt__messages p{margin:0;padding:8px 10px;border-radius:12px 12px 12px 3px;background:var(--panel);font-size:10px;white-space:pre-wrap}.citymarkt__messages article.own p{border-radius:12px 12px 3px 12px;background:var(--yellow);color:#171816}.citymarkt__messages small{display:block;margin:2px 4px;color:var(--muted);font-size:7px;text-align:right}.citymarkt__chat-composer{position:absolute;right:8px;bottom:29px;left:8px;height:40px;padding:4px 4px 4px 10px;border-radius:14px;display:flex;background:var(--panel)}.citymarkt__chat-composer input{min-width:0;flex:1;border:0;outline:0;background:none;color:inherit;font-size:10px}.citymarkt__chat-composer button{width:32px;border:0;border-radius:11px;display:grid;place-items:center;background:var(--yellow);color:#171816}.citymarkt__reserve{position:absolute;right:12px;bottom:74px;padding:5px 8px;border:0;border-radius:7px;background:#3d3621;color:var(--yellow);font-size:8px}.citymarkt__report>header strong{font-size:14px}.citymarkt__report>div{padding:20px 16px}.citymarkt__report h2{font-size:19px}.citymarkt__report textarea{height:100px;resize:none}.citymarkt__report>div button.secondary{background:var(--panel);color:#ff796f}.citymarkt__toast{position:absolute;z-index:20;right:18px;bottom:92px;left:18px;padding:10px 12px;border-radius:11px;background:#f4f4ee;color:#171816;box-shadow:0 8px 30px #0007;font-size:10px;font-weight:800;text-align:center}.toast-enter-active,.toast-leave-active{transition:.2s}.toast-enter-from,.toast-leave-to{transform:translateY(8px);opacity:0}
-.citymarkt{--color-primary:var(--yellow);position:relative;height:100%;padding:0;background:#151613!important}.citymarkt--light{background:#fafaf7!important}.citymarkt-navbar{--k-safe-area-top:46px;position:absolute;z-index:5;top:0;right:0;left:0}.citymarkt__content{position:absolute;inset:0;height:auto;padding:108px 14px 112px}.citymarkt__navbar-action,.citymarkt__tab-icon{position:relative;display:grid;place-items:center}.citymarkt__navbar-action>.k-badge{position:absolute;top:-7px;right:-9px;pointer-events:none}.citymarkt__tab-icon>.k-badge{position:absolute;top:-7px;right:-11px;pointer-events:none}.citymarkt button.k-link{color:var(--color-primary)}
-.citymarkt__categories{margin-right:0;margin-left:0;padding-right:0;padding-left:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;overflow-x:visible}
-.citymarkt__categories button{width:auto;min-width:0}
-.citymarkt__filters .citymarkt-select:last-child{grid-column:1/-1}
-.citymarkt__segmented{padding:4px;gap:4px;border:1px solid #ffffff0b;border-radius:12px}
-.citymarkt__segmented button{min-height:36px;padding:8px 7px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;font-weight:700;transition:background .18s ease,color .18s ease,transform .18s ease}
-.citymarkt__segmented button:active{transform:scale(.98)}
-.citymarkt__segmented button svg{flex:none}
-.citymarkt__segmented button span{min-width:19px;height:19px;padding:0 5px;border-radius:10px;display:grid;place-items:center;background:#ffffff10;font-size:9px;font-weight:900}
-.citymarkt__segmented button.active span{background:#17181626}
-:global(.citymarkt--light) .citymarkt__segmented{border-color:#0000000b}
-:global(.citymarkt--light) .citymarkt__segmented button span{background:#0000000b}
-.citymarkt__messages{position:absolute;top:158px;right:0;bottom:116px;left:0;height:auto}
-.citymarkt__messages .citymarkt-offer{width:92%;max-width:92%}
-.citymarkt__chat-actions{position:absolute;right:9px;bottom:75px;left:9px;display:flex;gap:5px}
-.citymarkt__chat-actions button{min-height:34px;flex:1;padding:6px 8px;border:1px solid #ffc92831;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:4px;background:#3d3621;color:var(--yellow);font-size:8px;font-weight:900}
-.citymarkt__offer-panel{position:absolute;z-index:6;right:9px;bottom:75px;left:9px;padding:11px;border:1px solid #ffc92840;border-radius:15px;background:#292a27;box-shadow:0 14px 35px #000b}
-.citymarkt__offer-panel header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.citymarkt__offer-panel header div{min-width:0}.citymarkt__offer-panel header small,.citymarkt__offer-panel header strong{display:block}.citymarkt__offer-panel header small{color:var(--yellow);font-size:8px;font-weight:900;text-transform:uppercase}.citymarkt__offer-panel header strong{overflow:hidden;font-size:12px;white-space:nowrap;text-overflow:ellipsis}.citymarkt__offer-panel header button{width:27px;height:27px;flex:none;padding:0;border:0;border-radius:9px;display:grid;place-items:center;background:#ffffff0b}.citymarkt__offer-panel label{margin-top:9px;display:block;color:var(--muted);font-size:8px;font-weight:800}.citymarkt__offer-panel label>span{height:39px;margin-top:4px;padding:0 10px;border:1px solid #ffffff16;border-radius:11px;display:flex;align-items:center;gap:5px;background:#151613}.citymarkt__offer-panel label b{color:var(--yellow);font-size:16px}.citymarkt__offer-panel input{min-width:0;flex:1;border:0;outline:0;background:none;color:inherit;font-size:16px;font-weight:900}.citymarkt__offer-panel>button{width:100%;min-height:36px;margin-top:8px;border:0;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:5px;background:var(--yellow);color:#171816;font-size:9px;font-weight:900}.citymarkt__offer-panel>button:disabled{opacity:.45}
-:global(.citymarkt--light) .citymarkt__offer-panel{background:#fff;box-shadow:0 14px 35px #0003}:global(.citymarkt--light) .citymarkt__offer-panel label>span{border-color:#00000012;background:#f4f4ef}
-.citymarkt__form-select{margin-top:5px}
-.citymarkt__card-image--empty{background:linear-gradient(145deg,#2b2d28,#1e201d)!important}.citymarkt__image-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted)}.citymarkt__image-placeholder small{font-size:7px;font-weight:700}.citymarkt__thumb--empty{display:grid!important;place-items:center;background:linear-gradient(145deg,#2b2d28,#1e201d)!important;color:var(--muted)}
-.citymarkt__photo-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.citymarkt__photo-actions>button{min-width:0;padding:11px 9px;border:1px solid #ffffff12;border-radius:14px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:var(--panel)}.citymarkt__photo-actions>button>span{width:34px;height:34px;margin-bottom:8px;border-radius:11px;display:grid;place-items:center;background:#3d3621;color:var(--yellow)}.citymarkt__photo-actions strong{font-size:10px}.citymarkt__photo-actions small{margin-top:2px;color:var(--muted);font-size:7px;line-height:1.35}.citymarkt__selected-heading{margin:15px 1px 7px;display:flex;align-items:center;justify-content:space-between}.citymarkt__selected-heading strong{font-size:11px}.citymarkt__selected-heading span{padding:3px 6px;border-radius:7px;background:var(--panel);color:var(--yellow);font-size:8px;font-weight:900}.citymarkt__selection-gallery{height:142px;border-radius:14px}.citymarkt__selected-strip{margin-top:7px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.citymarkt__selected-strip button{position:relative;width:46px;height:46px;flex:none;border:1px solid #ffffff1d;border-radius:9px;background-position:center!important;background-size:cover!important}.citymarkt__selected-strip button i{position:absolute;left:3px;bottom:3px;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:#171816;font-size:7px;font-style:normal;font-weight:900}.citymarkt__selected-strip button svg{position:absolute;top:3px;right:3px;padding:2px;box-sizing:content-box;border-radius:50%;background:#11120fc7;color:#fff}
-.citymarkt__photo-source{position:absolute;z-index:8;inset:46px 0 0;padding:14px 14px 33px;background:#151613}.citymarkt--light .citymarkt__photo-source{background:#fafaf7}.citymarkt__photo-source>header{height:52px;display:flex;align-items:center;gap:8px}.citymarkt__photo-source>header>div{min-width:0;flex:1}.citymarkt__photo-source>header small,.citymarkt__photo-source>header strong{display:block}.citymarkt__photo-source>header small{color:var(--yellow);font-size:8px;font-weight:900;text-transform:uppercase}.citymarkt__photo-source>header strong{font-size:18px}.citymarkt__photo-source>header>span{padding:4px 7px;border-radius:8px;background:var(--panel);color:var(--yellow);font-size:8px;font-weight:900}.citymarkt__photo-source>header>button{width:31px;height:31px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:var(--panel)}.citymarkt__photo-source>.citymarkt__photo-picker{max-height:calc(100% - 58px);padding-bottom:12px;overflow-y:auto;scrollbar-width:none}.citymarkt__photo-source .citymarkt__photo-picker button{position:relative;background-position:center!important}.citymarkt__capture{height:calc(100% - 52px);display:flex;flex-direction:column;align-items:center}.citymarkt__viewfinder{position:relative;width:100%;min-height:305px;overflow:hidden;border-radius:18px;background-position:center!important;background-size:cover!important;box-shadow:inset 0 0 0 1px #ffffff1c}.citymarkt__viewfinder:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0001,#00000038)}.citymarkt__viewfinder>i{position:absolute;z-index:2;width:25px;height:25px;border-color:#fff;border-style:solid}.citymarkt__viewfinder .corner-tl{top:18px;left:18px;border-width:2px 0 0 2px}.citymarkt__viewfinder .corner-tr{top:18px;right:18px;border-width:2px 2px 0 0}.citymarkt__viewfinder .corner-bl{bottom:18px;left:18px;border-width:0 0 2px 2px}.citymarkt__viewfinder .corner-br{right:18px;bottom:18px;border-width:0 2px 2px 0}.citymarkt__camera-flash{position:absolute;z-index:4;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .12s}.citymarkt__camera-flash.active{opacity:.9}.citymarkt__capture p{max-width:230px;margin:9px 0;color:var(--muted);font-size:8px;text-align:center}.citymarkt__shutter{width:58px;height:58px;padding:0;border:5px solid #f5f5ee;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:#171816;box-shadow:0 0 0 2px #ffffff42}.citymarkt__preview-image{overflow:hidden}
-:global(.citymarkt--light) .citymarkt__card-image--empty,:global(.citymarkt--light) .citymarkt__thumb--empty{background:linear-gradient(145deg,#ecece7,#dedfd8)!important}:global(.citymarkt--light) .citymarkt__photo-actions>button{border-color:#00000010}:global(.citymarkt--light) .citymarkt__selected-strip button{border-color:#00000018}
-.citymarkt__sell>header strong{font-size:13px}.citymarkt__sell>header small{font-size:10px}.citymarkt__sell>header>button:last-child{font-size:11px}.citymarkt__sell-body h2{font-size:23px;line-height:1.15}.citymarkt__sell-body>p{font-size:11px;line-height:1.45}.citymarkt__sell-body label{font-size:10.5px}.citymarkt__sell-body input:not([type=checkbox]),.citymarkt__sell-body textarea{padding:11px 12px;font-size:12px}.citymarkt__sell-body input:not([type=checkbox]){min-height:41px}.citymarkt__sell-body textarea{line-height:1.4}.citymarkt__switch{font-size:10.5px!important}.citymarkt__previous{font-size:11px}.citymarkt__photo-actions strong{font-size:11px}.citymarkt__photo-actions small{font-size:8.5px;line-height:1.4}.citymarkt__selected-heading strong{font-size:12px}.citymarkt__selected-heading span{font-size:9px}.citymarkt__sell-body h3{font-size:18px}.citymarkt__sell-body>small{font-size:10px}.citymarkt__sell :deep(.citymarkt-select__trigger){height:41px;padding:0 12px;font-size:12px}.citymarkt__sell :deep(.citymarkt-select__menu button){min-height:35px;padding:8px;font-size:11px}.citymarkt__sell :deep(.citymarkt-gallery__empty strong){font-size:13px}.citymarkt__sell :deep(.citymarkt-gallery__empty small){font-size:9px;line-height:1.4}
-.citymarkt__field-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.citymarkt__field-heading>small{color:#ff9c72;font-size:8.5px;font-weight:850;white-space:nowrap;transition:color .18s ease}.citymarkt__field-heading>small.valid{color:#62dc8e}
-.citymarkt__pages-share{width:100%;margin:4px 0 8px;padding:10px 12px;border:1px solid #ffc92855;border-radius:12px;display:flex;align-items:center;gap:8px;text-align:left;background:#ffc92816;color:var(--yellow)!important}.citymarkt__pages-share span{flex:1}.citymarkt__pages-share strong,.citymarkt__pages-share small{display:block}.citymarkt__pages-share strong{font-size:10px}.citymarkt__pages-share small{color:var(--muted);font-size:8px}
+.citymarkt {
+  --yellow: #ffc928;
+  --ink: #171816;
+  --panel: #242522;
+  --muted: #a6a89f;
+  position: absolute;
+  inset: 0;
+  padding: 48px 0 25px;
+  overflow: hidden;
+  background: #151613;
+  color: #f8f8f4;
+  font-family: Inter, system-ui, sans-serif;
+}
+.citymarkt--light {
+  --ink: #fff;
+  --panel: #f1f1ed;
+  --muted: #71736c;
+  background: #fafaf7;
+  color: #161714;
+}
+.citymarkt button,
+.citymarkt input,
+.citymarkt textarea,
+.citymarkt select {
+  font: inherit;
+}
+.citymarkt button {
+  color: inherit;
+}
+.citymarkt__header {
+  height: 64px;
+  padding: 6px 16px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.citymarkt__brand {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--yellow);
+  font-size: 10px;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.citymarkt__header h1 {
+  margin: 1px 0 0;
+  font-size: 25px;
+  line-height: 1;
+}
+.citymarkt__round,
+.citymarkt__top-actions button {
+  position: relative;
+  width: 34px;
+  height: 34px;
+  border: 0;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--panel);
+}
+.citymarkt__round i {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #ff453a;
+}
+.citymarkt__content {
+  height: calc(100% - 64px - 58px);
+  padding: 0 14px 18px;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+.citymarkt__search {
+  height: 38px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  border-radius: 12px;
+  background: var(--panel);
+  color: var(--muted);
+}
+.citymarkt__search input {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font-size: 13px;
+}
+.citymarkt__search button {
+  padding: 0;
+  border: 0;
+  background: none;
+}
+.citymarkt__categories {
+  margin: 12px -14px 2px;
+  padding: 0 14px 7px;
+  display: flex;
+  gap: 10px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.citymarkt__categories button {
+  width: 61px;
+  flex: none;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--muted);
+  font-size: 9px;
+  white-space: nowrap;
+}
+.citymarkt__categories button span {
+  width: 42px;
+  height: 42px;
+  margin: 0 auto 4px;
+  border-radius: 13px;
+  display: grid;
+  place-items: center;
+  background: var(--panel);
+  color: #efb911;
+}
+.citymarkt__categories button.active span {
+  background: var(--yellow);
+  color: #171816;
+}
+.citymarkt__filters {
+  margin-top: 10px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+}
+.citymarkt__filters select {
+  min-width: 0;
+  padding: 8px;
+  border: 0;
+  border-radius: 9px;
+  background: var(--panel);
+  color: inherit;
+  font-size: 10px;
+}
+.citymarkt__filters select:last-child {
+  grid-column: 1/-1;
+}
+.citymarkt__section-title {
+  margin: 11px 1px 8px;
+}
+.citymarkt__section-title div {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+}
+.citymarkt__section-title strong {
+  font-size: 15px;
+}
+.citymarkt__section-title small {
+  color: var(--muted);
+  font-size: 9px;
+}
+.citymarkt__grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 13px 9px;
+}
+.citymarkt__grid > button {
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  text-align: left;
+  background: none;
+}
+.citymarkt__card-image {
+  position: relative;
+  height: 112px;
+  margin-bottom: 6px;
+  display: block;
+  border-radius: 12px;
+  background-size: cover !important;
+  box-shadow: inset 0 0 0 1px #ffffff16;
+}
+.citymarkt__card-image > i {
+  position: absolute;
+  left: 6px;
+  bottom: 6px;
+  padding: 3px 6px;
+  border-radius: 6px;
+  background: #161714d8;
+  color: #fff;
+  font-size: 8px;
+  font-style: normal;
+  font-weight: 800;
+}
+.citymarkt__card-image > svg {
+  position: absolute;
+  top: 7px;
+  right: 7px;
+  padding: 5px;
+  box-sizing: content-box;
+  border-radius: 50%;
+  background: #161714bb;
+  color: #ffd02e;
+}
+.citymarkt__grid button > strong {
+  display: block;
+  font-size: 13px;
+}
+.citymarkt__grid button > span:not(.citymarkt__card-image) {
+  display: block;
+  overflow: hidden;
+  font-size: 11px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.citymarkt__grid button > small,
+.citymarkt__preview-price + * + * + small {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 8px;
+  white-space: nowrap;
+}
+.citymarkt__empty,
+.citymarkt__auth {
+  min-height: 260px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  text-align: center;
+  color: var(--muted);
+}
+.citymarkt__empty strong,
+.citymarkt__auth h2 {
+  margin: 4px 0 0;
+  color: inherit;
+  font-size: 16px;
+}
+.citymarkt__empty span,
+.citymarkt__auth p {
+  max-width: 220px;
+  margin: 0;
+  font-size: 11px;
+}
+.citymarkt__auth svg {
+  color: var(--yellow);
+}
+.citymarkt__inquiries,
+.citymarkt__list {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+.citymarkt__inquiries > button,
+.citymarkt__list > button {
+  width: 100%;
+  padding: 8px;
+  border: 0;
+  border-radius: 13px;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  text-align: left;
+  background: var(--panel);
+}
+.citymarkt__inquiries > button > span,
+.citymarkt__list > button > span {
+  width: 48px;
+  height: 48px;
+  flex: none;
+  border-radius: 10px;
+}
+.citymarkt__inquiries div,
+.citymarkt__list div {
+  min-width: 0;
+  flex: 1;
+}
+.citymarkt__inquiries strong,
+.citymarkt__inquiries b,
+.citymarkt__inquiries small,
+.citymarkt__list strong,
+.citymarkt__list b,
+.citymarkt__list small {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.citymarkt__inquiries strong {
+  font-size: 12px;
+}
+.citymarkt__inquiries b,
+.citymarkt__list b {
+  font-size: 10px;
+}
+.citymarkt__inquiries small,
+.citymarkt__list small {
+  color: var(--muted);
+  font-size: 9px;
+}
+.citymarkt__inquiries i {
+  min-width: 17px;
+  height: 17px;
+  padding: 0 4px;
+  border-radius: 9px;
+  display: grid;
+  place-items: center;
+  background: var(--yellow);
+  color: #171816;
+  font-size: 9px;
+  font-style: normal;
+  font-weight: 900;
+}
+.citymarkt__profile {
+  margin-bottom: 12px;
+  padding: 12px;
+  border-radius: 15px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: linear-gradient(135deg, #3e3312, var(--panel));
+}
+.citymarkt__profile > span,
+.citymarkt__seller > span {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--yellow);
+  color: #171816;
+  font-size: 19px;
+  font-weight: 900;
+}
+.citymarkt__profile strong,
+.citymarkt__profile small {
+  display: block;
+}
+.citymarkt__profile small {
+  color: var(--muted);
+  font-size: 9px;
+}
+.citymarkt__segmented {
+  margin-bottom: 10px;
+  padding: 3px;
+  border-radius: 10px;
+  display: flex;
+  background: var(--panel);
+}
+.citymarkt__segmented button {
+  flex: 1;
+  padding: 6px;
+  border: 0;
+  border-radius: 8px;
+  background: none;
+  font-size: 9px;
+}
+.citymarkt__segmented button.active {
+  background: var(--yellow);
+  color: #171816;
+  font-weight: 800;
+}
+.citymarkt__list strong {
+  font-size: 11px;
+}
+.citymarkt__tabbar {
+  position: absolute;
+  right: 0;
+  bottom: 22px;
+  left: 0;
+  height: 58px;
+  padding: 7px 7px 0;
+  display: flex;
+  justify-content: space-around;
+  border-top: 1px solid #ffffff12;
+  background: #171815ed;
+  backdrop-filter: blur(18px);
+}
+.citymarkt--light .citymarkt__tabbar {
+  border-color: #00000012;
+  background: #fafaf7ed;
+}
+.citymarkt__tabbar button {
+  width: 54px;
+  padding: 0;
+  border: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  background: none;
+  color: var(--muted);
+  font-size: 8px;
+}
+.citymarkt__tabbar button > span {
+  position: relative;
+}
+.citymarkt__tabbar button.active {
+  color: var(--yellow);
+}
+.citymarkt__tabbar button.sell span {
+  width: 37px;
+  height: 30px;
+  margin-top: -4px;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  background: var(--yellow);
+  color: #171816;
+}
+.citymarkt__tabbar button i {
+  position: absolute;
+  top: -5px;
+  right: -9px;
+  min-width: 15px;
+  height: 15px;
+  padding: 0 3px;
+  border-radius: 8px;
+  background: #ff453a;
+  color: white;
+  font-size: 8px;
+  font-style: normal;
+}
+.citymarkt__detail,
+.citymarkt__sell,
+.citymarkt__chat,
+.citymarkt__report {
+  position: absolute;
+  inset: 0;
+  padding-top: 46px;
+  overflow: hidden;
+  background: #151613;
+}
+.citymarkt--light .citymarkt__detail,
+.citymarkt--light .citymarkt__sell,
+.citymarkt--light .citymarkt__chat,
+.citymarkt--light .citymarkt__report {
+  background: #fafaf7;
+}
+.citymarkt__top-actions {
+  position: absolute;
+  z-index: 2;
+  top: 52px;
+  right: 12px;
+  left: 12px;
+  display: flex;
+  justify-content: space-between;
+}
+.citymarkt__top-actions > div {
+  display: flex;
+  gap: 6px;
+}
+.citymarkt__hero {
+  height: 205px;
+  background-size: cover !important;
+  position: relative;
+}
+.citymarkt__hero > span {
+  position: absolute;
+  right: 10px;
+  bottom: 9px;
+  padding: 4px 7px;
+  border-radius: 7px;
+  background: #151613c9;
+  color: white;
+  font-size: 8px;
+}
+.citymarkt__detail-body {
+  height: calc(100% - 205px);
+  padding: 13px 15px 35px;
+  overflow-y: auto;
+}
+.citymarkt__price-row {
+  display: flex;
+  justify-content: space-between;
+}
+.citymarkt__price-row h2 {
+  margin: 0;
+  font-size: 22px;
+}
+.citymarkt__price-row span {
+  display: inline-block;
+  padding: 3px 7px;
+  border-radius: 6px;
+  background: var(--yellow);
+  color: #171816;
+  font-size: 8px;
+  font-weight: 900;
+}
+.citymarkt__price-row > small {
+  color: var(--muted);
+  font-size: 9px;
+}
+.citymarkt__detail-body > h1 {
+  margin: 8px 0 3px;
+  font-size: 18px;
+}
+.citymarkt__meta {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  color: var(--muted);
+  font-size: 10px;
+}
+.citymarkt__description {
+  padding: 13px 0;
+  border-bottom: 1px solid #ffffff15;
+  font-size: 11px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+.citymarkt__seller {
+  padding: 8px 0;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+.citymarkt__seller > span {
+  width: 38px;
+  height: 38px;
+  font-size: 16px;
+}
+.citymarkt__seller strong,
+.citymarkt__seller small {
+  display: block;
+}
+.citymarkt__seller small,
+.citymarkt__phone {
+  color: var(--muted);
+  font-size: 9px;
+}
+.citymarkt__composer textarea {
+  width: 100%;
+  height: 60px;
+  padding: 9px;
+  border: 1px solid #ffffff18;
+  border-radius: 11px;
+  resize: none;
+  background: var(--panel);
+  color: inherit;
+  font-size: 10px;
+}
+.citymarkt__composer button,
+.citymarkt__owner-actions button,
+.citymarkt__report > div button {
+  width: 100%;
+  margin-top: 7px;
+  padding: 10px;
+  border: 0;
+  border-radius: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  background: var(--yellow);
+  color: #171816;
+  font-size: 10px;
+  font-weight: 900;
+}
+.citymarkt__owner-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+}
+.citymarkt__owner-actions button {
+  margin: 0;
+}
+.citymarkt__owner-actions button.danger {
+  background: #44221f;
+  color: #ff796f;
+}
+.citymarkt__inline-auth {
+  padding: 12px;
+  border-radius: 11px;
+  background: var(--panel);
+  color: var(--muted);
+  text-align: center;
+  font-size: 10px;
+}
+.citymarkt__sell > header,
+.citymarkt__chat > header,
+.citymarkt__report > header {
+  height: 54px;
+  padding: 5px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-bottom: 1px solid #ffffff12;
+}
+.citymarkt__sell > header > button:first-child,
+.citymarkt__chat > header > button,
+.citymarkt__report > header > button {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--panel);
+}
+.citymarkt__sell > header > div,
+.citymarkt__chat > header > div {
+  flex: 1;
+}
+.citymarkt__sell > header strong,
+.citymarkt__sell > header small,
+.citymarkt__chat > header strong,
+.citymarkt__chat > header small {
+  display: block;
+}
+.citymarkt__sell > header small,
+.citymarkt__chat > header small {
+  color: var(--muted);
+  font-size: 9px;
+}
+.citymarkt__sell > header > button:last-child {
+  padding: 6px;
+  border: 0;
+  background: none;
+  color: var(--yellow);
+  font-size: 10px;
+  font-weight: 800;
+}
+.citymarkt__sell > header > button:disabled {
+  opacity: 0.35;
+}
+.citymarkt__progress {
+  height: 3px;
+  background: var(--panel);
+}
+.citymarkt__progress i {
+  height: 100%;
+  display: block;
+  background: var(--yellow);
+  transition: width 0.25s;
+}
+.citymarkt__sell-body {
+  height: calc(100% - 83px);
+  padding: 20px 16px 58px;
+  overflow-y: auto;
+}
+.citymarkt__sell-body > svg {
+  color: var(--yellow);
+}
+.citymarkt__sell-body h2 {
+  margin: 7px 0 4px;
+  font-size: 21px;
+}
+.citymarkt__sell-body > p {
+  margin: 0 0 13px;
+  color: var(--muted);
+  font-size: 10px;
+}
+.citymarkt__photo-picker {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 7px;
+}
+.citymarkt__photo-picker button {
+  aspect-ratio: 1;
+  border: 2px solid transparent;
+  border-radius: 11px;
+  background-size: cover !important;
+}
+.citymarkt__photo-picker button.active {
+  border-color: var(--yellow);
+}
+.citymarkt__photo-picker i {
+  width: 19px;
+  height: 19px;
+  margin: 5px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--yellow);
+  color: #171816;
+  font-size: 9px;
+  font-style: normal;
+  font-weight: 900;
+}
+.citymarkt__photo-picker button:not(.active) i {
+  display: none;
+}
+.citymarkt__sell-body label {
+  margin-top: 12px;
+  display: block;
+  color: var(--muted);
+  font-size: 9px;
+  font-weight: 700;
+}
+.citymarkt__sell-body input:not([type='checkbox']),
+.citymarkt__sell-body textarea,
+.citymarkt__sell-body select,
+.citymarkt__report select,
+.citymarkt__report textarea {
+  width: 100%;
+  margin-top: 5px;
+  padding: 10px;
+  border: 1px solid #ffffff14;
+  border-radius: 10px;
+  outline: 0;
+  background: var(--panel);
+  color: inherit;
+  font-size: 11px;
+}
+.citymarkt__sell-body textarea {
+  height: 105px;
+  resize: none;
+}
+.citymarkt__switch {
+  display: flex !important;
+  align-items: center;
+  gap: 8px;
+}
+.citymarkt__switch input {
+  display: none;
+}
+.citymarkt__switch span {
+  width: 35px;
+  height: 20px;
+  border-radius: 12px;
+  background: #484a45;
+}
+.citymarkt__switch span:after {
+  content: '';
+  width: 16px;
+  height: 16px;
+  margin: 2px;
+  display: block;
+  border-radius: 50%;
+  background: white;
+  transition: transform 0.2s;
+}
+.citymarkt__switch input:checked + span {
+  background: var(--yellow);
+}
+.citymarkt__switch input:checked + span:after {
+  transform: translateX(15px);
+}
+.citymarkt__preview-image {
+  height: 170px;
+  margin: 12px 0;
+  border-radius: 15px;
+  background-size: cover !important;
+}
+.citymarkt__preview-price {
+  font-size: 21px;
+}
+.citymarkt__sell-body h3 {
+  margin: 6px 0;
+  font-size: 16px;
+}
+.citymarkt__sell-body > small {
+  display: flex;
+  gap: 3px;
+  color: var(--muted);
+}
+.citymarkt__previous {
+  position: absolute;
+  bottom: 33px;
+  left: 16px;
+  padding: 7px;
+  border: 0;
+  background: none;
+  color: var(--muted);
+  font-size: 10px;
+}
+.citymarkt__chat-listing {
+  margin: 8px 10px;
+  padding: 8px 10px;
+  border-radius: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--panel);
+}
+.citymarkt__chat-listing strong,
+.citymarkt__chat-listing span {
+  display: block;
+  font-size: 10px;
+}
+.citymarkt__chat-listing i {
+  padding: 3px 6px;
+  border-radius: 6px;
+  background: #3d3621;
+  color: var(--yellow);
+  font-size: 8px;
+  font-style: normal;
+}
+.citymarkt__messages {
+  height: calc(100% - 178px);
+  padding: 8px 12px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+.citymarkt__messages article {
+  max-width: 80%;
+  align-self: flex-start;
+}
+.citymarkt__messages article.own {
+  align-self: flex-end;
+}
+.citymarkt__messages p {
+  margin: 0;
+  padding: 8px 10px;
+  border-radius: 12px 12px 12px 3px;
+  background: var(--panel);
+  font-size: 10px;
+  white-space: pre-wrap;
+}
+.citymarkt__messages article.own p {
+  border-radius: 12px 12px 3px 12px;
+  background: var(--yellow);
+  color: #171816;
+}
+.citymarkt__messages small {
+  display: block;
+  margin: 2px 4px;
+  color: var(--muted);
+  font-size: 7px;
+  text-align: right;
+}
+.citymarkt__chat-composer {
+  position: absolute;
+  right: 8px;
+  bottom: 29px;
+  left: 8px;
+  height: 40px;
+  padding: 4px 4px 4px 10px;
+  border-radius: 14px;
+  display: flex;
+  background: var(--panel);
+}
+.citymarkt__chat-composer input {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  outline: 0;
+  background: none;
+  color: inherit;
+  font-size: 10px;
+}
+.citymarkt__chat-composer button {
+  width: 32px;
+  border: 0;
+  border-radius: 11px;
+  display: grid;
+  place-items: center;
+  background: var(--yellow);
+  color: #171816;
+}
+.citymarkt__reserve {
+  position: absolute;
+  right: 12px;
+  bottom: 74px;
+  padding: 5px 8px;
+  border: 0;
+  border-radius: 7px;
+  background: #3d3621;
+  color: var(--yellow);
+  font-size: 8px;
+}
+.citymarkt__report > header strong {
+  font-size: 14px;
+}
+.citymarkt__report > div {
+  padding: 20px 16px;
+}
+.citymarkt__report h2 {
+  font-size: 19px;
+}
+.citymarkt__report textarea {
+  height: 100px;
+  resize: none;
+}
+.citymarkt__report > div button.secondary {
+  background: var(--panel);
+  color: #ff796f;
+}
+.citymarkt__toast {
+  position: absolute;
+  z-index: 20;
+  right: 18px;
+  bottom: 92px;
+  left: 18px;
+  padding: 10px 12px;
+  border-radius: 11px;
+  background: #f4f4ee;
+  color: #171816;
+  box-shadow: 0 8px 30px #0007;
+  font-size: 10px;
+  font-weight: 800;
+  text-align: center;
+}
+.toast-enter-active,
+.toast-leave-active {
+  transition: 0.2s;
+}
+.toast-enter-from,
+.toast-leave-to {
+  transform: translateY(8px);
+  opacity: 0;
+}
+.citymarkt {
+  --color-primary: var(--yellow);
+  position: relative;
+  height: 100%;
+  padding: 0;
+  background: #151613 !important;
+}
+.citymarkt--light {
+  background: #fafaf7 !important;
+}
+.citymarkt-navbar {
+  --sky-safe-area-top: 46px;
+  position: absolute;
+  z-index: 5;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+.citymarkt__content {
+  position: absolute;
+  inset: 0;
+  height: auto;
+  padding: 108px 14px 112px;
+}
+.citymarkt__navbar-action,
+.citymarkt__tab-icon {
+  position: relative;
+  display: grid;
+  place-items: center;
+}
+.citymarkt__navbar-action > .sky-badge {
+  position: absolute;
+  top: -7px;
+  right: -9px;
+  pointer-events: none;
+}
+.citymarkt__tab-icon > .sky-badge {
+  position: absolute;
+  top: -7px;
+  right: -11px;
+  pointer-events: none;
+}
+.citymarkt button.sky-link {
+  color: var(--color-primary);
+}
+.citymarkt__categories {
+  margin-right: 0;
+  margin-left: 0;
+  padding-right: 0;
+  padding-left: 0;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 4px;
+  overflow-x: visible;
+}
+.citymarkt__categories button {
+  width: auto;
+  min-width: 0;
+}
+.citymarkt__filters .citymarkt-select:last-child {
+  grid-column: 1/-1;
+}
+.citymarkt__segmented {
+  padding: 4px;
+  gap: 4px;
+  border: 1px solid #ffffff0b;
+  border-radius: 12px;
+}
+.citymarkt__segmented button {
+  min-height: 36px;
+  padding: 8px 7px;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 700;
+  transition:
+    background 0.18s ease,
+    color 0.18s ease,
+    transform 0.18s ease;
+}
+.citymarkt__segmented button:active {
+  transform: scale(0.98);
+}
+.citymarkt__segmented button svg {
+  flex: none;
+}
+.citymarkt__segmented button span {
+  min-width: 19px;
+  height: 19px;
+  padding: 0 5px;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  background: #ffffff10;
+  font-size: 9px;
+  font-weight: 900;
+}
+.citymarkt__segmented button.active span {
+  background: #17181626;
+}
+:global(.citymarkt--light) .citymarkt__segmented {
+  border-color: #0000000b;
+}
+:global(.citymarkt--light) .citymarkt__segmented button span {
+  background: #0000000b;
+}
+.citymarkt__messages {
+  position: absolute;
+  top: 158px;
+  right: 0;
+  bottom: 116px;
+  left: 0;
+  height: auto;
+}
+.citymarkt__messages .citymarkt-offer {
+  width: 92%;
+  max-width: 92%;
+}
+.citymarkt__chat-actions {
+  position: absolute;
+  right: 9px;
+  bottom: 75px;
+  left: 9px;
+  display: flex;
+  gap: 5px;
+}
+.citymarkt__chat-actions button {
+  min-height: 34px;
+  flex: 1;
+  padding: 6px 8px;
+  border: 1px solid #ffc92831;
+  border-radius: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  background: #3d3621;
+  color: var(--yellow);
+  font-size: 8px;
+  font-weight: 900;
+}
+.citymarkt__offer-panel {
+  position: absolute;
+  z-index: 6;
+  right: 9px;
+  bottom: 75px;
+  left: 9px;
+  padding: 11px;
+  border: 1px solid #ffc92840;
+  border-radius: 15px;
+  background: #292a27;
+  box-shadow: 0 14px 35px #000b;
+}
+.citymarkt__offer-panel header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+.citymarkt__offer-panel header div {
+  min-width: 0;
+}
+.citymarkt__offer-panel header small,
+.citymarkt__offer-panel header strong {
+  display: block;
+}
+.citymarkt__offer-panel header small {
+  color: var(--yellow);
+  font-size: 8px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+.citymarkt__offer-panel header strong {
+  overflow: hidden;
+  font-size: 12px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.citymarkt__offer-panel header button {
+  width: 27px;
+  height: 27px;
+  flex: none;
+  padding: 0;
+  border: 0;
+  border-radius: 9px;
+  display: grid;
+  place-items: center;
+  background: #ffffff0b;
+}
+.citymarkt__offer-panel label {
+  margin-top: 9px;
+  display: block;
+  color: var(--muted);
+  font-size: 8px;
+  font-weight: 800;
+}
+.citymarkt__offer-panel label > span {
+  height: 39px;
+  margin-top: 4px;
+  padding: 0 10px;
+  border: 1px solid #ffffff16;
+  border-radius: 11px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: #151613;
+}
+.citymarkt__offer-panel label b {
+  color: var(--yellow);
+  font-size: 16px;
+}
+.citymarkt__offer-panel input {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  outline: 0;
+  background: none;
+  color: inherit;
+  font-size: 16px;
+  font-weight: 900;
+}
+.citymarkt__offer-panel > button {
+  width: 100%;
+  min-height: 36px;
+  margin-top: 8px;
+  border: 0;
+  border-radius: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  background: var(--yellow);
+  color: #171816;
+  font-size: 9px;
+  font-weight: 900;
+}
+.citymarkt__offer-panel > button:disabled {
+  opacity: 0.45;
+}
+:global(.citymarkt--light) .citymarkt__offer-panel {
+  background: #fff;
+  box-shadow: 0 14px 35px #0003;
+}
+:global(.citymarkt--light) .citymarkt__offer-panel label > span {
+  border-color: #00000012;
+  background: #f4f4ef;
+}
+.citymarkt__form-select {
+  margin-top: 5px;
+}
+.citymarkt__card-image--empty {
+  background: linear-gradient(145deg, #2b2d28, #1e201d) !important;
+}
+.citymarkt__image-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  color: var(--muted);
+}
+.citymarkt__image-placeholder small {
+  font-size: 7px;
+  font-weight: 700;
+}
+.citymarkt__thumb--empty {
+  display: grid !important;
+  place-items: center;
+  background: linear-gradient(145deg, #2b2d28, #1e201d) !important;
+  color: var(--muted);
+}
+.citymarkt__photo-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+.citymarkt__photo-actions > button {
+  min-width: 0;
+  padding: 11px 9px;
+  border: 1px solid #ffffff12;
+  border-radius: 14px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+  background: var(--panel);
+}
+.citymarkt__photo-actions > button > span {
+  width: 34px;
+  height: 34px;
+  margin-bottom: 8px;
+  border-radius: 11px;
+  display: grid;
+  place-items: center;
+  background: #3d3621;
+  color: var(--yellow);
+}
+.citymarkt__photo-actions strong {
+  font-size: 10px;
+}
+.citymarkt__photo-actions small {
+  margin-top: 2px;
+  color: var(--muted);
+  font-size: 7px;
+  line-height: 1.35;
+}
+.citymarkt__selected-heading {
+  margin: 15px 1px 7px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.citymarkt__selected-heading strong {
+  font-size: 11px;
+}
+.citymarkt__selected-heading span {
+  padding: 3px 6px;
+  border-radius: 7px;
+  background: var(--panel);
+  color: var(--yellow);
+  font-size: 8px;
+  font-weight: 900;
+}
+.citymarkt__selection-gallery {
+  height: 142px;
+  border-radius: 14px;
+}
+.citymarkt__selected-strip {
+  margin-top: 7px;
+  display: flex;
+  gap: 6px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.citymarkt__selected-strip button {
+  position: relative;
+  width: 46px;
+  height: 46px;
+  flex: none;
+  border: 1px solid #ffffff1d;
+  border-radius: 9px;
+  background-position: center !important;
+  background-size: cover !important;
+}
+.citymarkt__selected-strip button i {
+  position: absolute;
+  left: 3px;
+  bottom: 3px;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--yellow);
+  color: #171816;
+  font-size: 7px;
+  font-style: normal;
+  font-weight: 900;
+}
+.citymarkt__selected-strip button svg {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  padding: 2px;
+  box-sizing: content-box;
+  border-radius: 50%;
+  background: #11120fc7;
+  color: #fff;
+}
+.citymarkt__photo-source {
+  position: absolute;
+  z-index: 8;
+  inset: 46px 0 0;
+  padding: 14px 14px 33px;
+  background: #151613;
+}
+.citymarkt--light .citymarkt__photo-source {
+  background: #fafaf7;
+}
+.citymarkt__photo-source > header {
+  height: 52px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.citymarkt__photo-source > header > div {
+  min-width: 0;
+  flex: 1;
+}
+.citymarkt__photo-source > header small,
+.citymarkt__photo-source > header strong {
+  display: block;
+}
+.citymarkt__photo-source > header small {
+  color: var(--yellow);
+  font-size: 8px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+.citymarkt__photo-source > header strong {
+  font-size: 18px;
+}
+.citymarkt__photo-source > header > span {
+  padding: 4px 7px;
+  border-radius: 8px;
+  background: var(--panel);
+  color: var(--yellow);
+  font-size: 8px;
+  font-weight: 900;
+}
+.citymarkt__photo-source > header > button {
+  width: 31px;
+  height: 31px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--panel);
+}
+.citymarkt__photo-source > .citymarkt__photo-picker {
+  max-height: calc(100% - 58px);
+  padding-bottom: 12px;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+.citymarkt__photo-source .citymarkt__photo-picker button {
+  position: relative;
+  background-position: center !important;
+}
+.citymarkt__capture {
+  height: calc(100% - 52px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.citymarkt__viewfinder {
+  position: relative;
+  width: 100%;
+  min-height: 305px;
+  overflow: hidden;
+  border-radius: 18px;
+  background-position: center !important;
+  background-size: cover !important;
+  box-shadow: inset 0 0 0 1px #ffffff1c;
+}
+.citymarkt__viewfinder:after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, #0001, #00000038);
+}
+.citymarkt__viewfinder > i {
+  position: absolute;
+  z-index: 2;
+  width: 25px;
+  height: 25px;
+  border-color: #fff;
+  border-style: solid;
+}
+.citymarkt__viewfinder .corner-tl {
+  top: 18px;
+  left: 18px;
+  border-width: 2px 0 0 2px;
+}
+.citymarkt__viewfinder .corner-tr {
+  top: 18px;
+  right: 18px;
+  border-width: 2px 2px 0 0;
+}
+.citymarkt__viewfinder .corner-bl {
+  bottom: 18px;
+  left: 18px;
+  border-width: 0 0 2px 2px;
+}
+.citymarkt__viewfinder .corner-br {
+  right: 18px;
+  bottom: 18px;
+  border-width: 0 2px 2px 0;
+}
+.citymarkt__camera-flash {
+  position: absolute;
+  z-index: 4;
+  inset: 0;
+  background: #fff;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s;
+}
+.citymarkt__camera-flash.active {
+  opacity: 0.9;
+}
+.citymarkt__capture p {
+  max-width: 230px;
+  margin: 9px 0;
+  color: var(--muted);
+  font-size: 8px;
+  text-align: center;
+}
+.citymarkt__shutter {
+  width: 58px;
+  height: 58px;
+  padding: 0;
+  border: 5px solid #f5f5ee;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--yellow);
+  color: #171816;
+  box-shadow: 0 0 0 2px #ffffff42;
+}
+.citymarkt__preview-image {
+  overflow: hidden;
+}
+:global(.citymarkt--light) .citymarkt__card-image--empty,
+:global(.citymarkt--light) .citymarkt__thumb--empty {
+  background: linear-gradient(145deg, #ecece7, #dedfd8) !important;
+}
+:global(.citymarkt--light) .citymarkt__photo-actions > button {
+  border-color: #00000010;
+}
+:global(.citymarkt--light) .citymarkt__selected-strip button {
+  border-color: #00000018;
+}
+.citymarkt__sell > header strong {
+  font-size: 13px;
+}
+.citymarkt__sell > header small {
+  font-size: 10px;
+}
+.citymarkt__sell > header > button:last-child {
+  font-size: 11px;
+}
+.citymarkt__sell-body h2 {
+  font-size: 23px;
+  line-height: 1.15;
+}
+.citymarkt__sell-body > p {
+  font-size: 11px;
+  line-height: 1.45;
+}
+.citymarkt__sell-body label {
+  font-size: 10.5px;
+}
+.citymarkt__sell-body input:not([type='checkbox']),
+.citymarkt__sell-body textarea {
+  padding: 11px 12px;
+  font-size: 12px;
+}
+.citymarkt__sell-body input:not([type='checkbox']) {
+  min-height: 41px;
+}
+.citymarkt__sell-body textarea {
+  line-height: 1.4;
+}
+.citymarkt__switch {
+  font-size: 10.5px !important;
+}
+.citymarkt__previous {
+  font-size: 11px;
+}
+.citymarkt__photo-actions strong {
+  font-size: 11px;
+}
+.citymarkt__photo-actions small {
+  font-size: 8.5px;
+  line-height: 1.4;
+}
+.citymarkt__selected-heading strong {
+  font-size: 12px;
+}
+.citymarkt__selected-heading span {
+  font-size: 9px;
+}
+.citymarkt__sell-body h3 {
+  font-size: 18px;
+}
+.citymarkt__sell-body > small {
+  font-size: 10px;
+}
+.citymarkt__sell :deep(.citymarkt-select__trigger) {
+  height: 41px;
+  padding: 0 12px;
+  font-size: 12px;
+}
+.citymarkt__sell :deep(.citymarkt-select__menu button) {
+  min-height: 35px;
+  padding: 8px;
+  font-size: 11px;
+}
+.citymarkt__sell :deep(.citymarkt-gallery__empty strong) {
+  font-size: 13px;
+}
+.citymarkt__sell :deep(.citymarkt-gallery__empty small) {
+  font-size: 9px;
+  line-height: 1.4;
+}
+.citymarkt__field-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.citymarkt__field-heading > small {
+  color: #ff9c72;
+  font-size: 8.5px;
+  font-weight: 850;
+  white-space: nowrap;
+  transition: color 0.18s ease;
+}
+.citymarkt__field-heading > small.valid {
+  color: #62dc8e;
+}
+.citymarkt__pages-share {
+  width: 100%;
+  margin: 4px 0 8px;
+  padding: 10px 12px;
+  border: 1px solid #ffc92855;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-align: left;
+  background: #ffc92816;
+  color: var(--yellow) !important;
+}
+.citymarkt__pages-share span {
+  flex: 1;
+}
+.citymarkt__pages-share strong,
+.citymarkt__pages-share small {
+  display: block;
+}
+.citymarkt__pages-share strong {
+  font-size: 10px;
+}
+.citymarkt__pages-share small {
+  color: var(--muted);
+  font-size: 8px;
+}
 
 /* Keep marketplace copy readable at the physical phone scale. */
-.citymarkt__brand{font-size:12px}
-.citymarkt__categories button{font-size:10.5px}
-.citymarkt__filters select,.citymarkt__section-title small{font-size:12px}
-.citymarkt__card-image>i,.citymarkt__hero>span,.citymarkt__price-row span,.citymarkt__chat-listing i,.citymarkt__reserve{font-size:10.5px}
-.citymarkt__grid button>span:not(.citymarkt__card-image){font-size:13px}
-.citymarkt__grid button>small,.citymarkt__preview-price+*+*+small{font-size:11.5px}
-.citymarkt__empty span,.citymarkt__auth p,.citymarkt__description{font-size:13px}
-.citymarkt__inquiries strong,.citymarkt__list strong{font-size:14px}
-.citymarkt__inquiries b,.citymarkt__list b,.citymarkt__profile small,.citymarkt__price-row>small,.citymarkt__seller small,.citymarkt__phone{font-size:11.5px}
-.citymarkt__inquiries small,.citymarkt__list small{font-size:11px}
-.citymarkt__inquiries i,.citymarkt__tabbar button i,.citymarkt__photo-picker i,.citymarkt__selected-strip button i{font-size:10px}
-.citymarkt__tabbar button{font-size:10.5px}
-.citymarkt__meta,.citymarkt__inline-auth,.citymarkt__toast{font-size:12px}
-.citymarkt__composer textarea,.citymarkt__chat-composer input{font-size:13px}
-.citymarkt__composer button,.citymarkt__owner-actions button,.citymarkt__report>div button{font-size:13px}
-.citymarkt__sell>header small,.citymarkt__chat>header small,.citymarkt__sell>header>button:last-child{font-size:12px}
-.citymarkt__sell-body>p,.citymarkt__sell-body label,.citymarkt__switch,.citymarkt__previous,.citymarkt__sell-body>small{font-size:12px!important}
-.citymarkt__sell-body input:not([type=checkbox]),.citymarkt__sell-body textarea,.citymarkt__sell-body select,.citymarkt__report select,.citymarkt__report textarea{font-size:13px}
-.citymarkt__chat-listing strong,.citymarkt__chat-listing span,.citymarkt__messages p{font-size:13px}
-.citymarkt__messages small{font-size:10.5px}
-.citymarkt__segmented button span{font-size:10.5px}
-.citymarkt__chat-actions button,.citymarkt__offer-panel>button{font-size:12px}
-.citymarkt__offer-panel header small,.citymarkt__offer-panel label{font-size:11.5px}
-.citymarkt__offer-panel header strong{font-size:14px}
-.citymarkt__image-placeholder small,.citymarkt__photo-actions small,.citymarkt__capture p{font-size:11.5px}
-.citymarkt__photo-actions strong,.citymarkt__selected-heading strong{font-size:13px}
-.citymarkt__selected-heading span,.citymarkt__photo-source>header small,.citymarkt__photo-source>header>span{font-size:11px}
-.citymarkt__field-heading>small{font-size:10.5px}
-.citymarkt__pages-share strong{font-size:12.5px}
-.citymarkt__pages-share small{font-size:11px}
-.citymarkt__sell :deep(.citymarkt-select__trigger){font-size:13px}
-.citymarkt__sell :deep(.citymarkt-select__menu button){font-size:12px}
-.citymarkt__sell :deep(.citymarkt-gallery__empty small){font-size:11.5px}
+.citymarkt__brand {
+  font-size: 12px;
+}
+.citymarkt__categories button {
+  font-size: 10.5px;
+}
+.citymarkt__filters select,
+.citymarkt__section-title small {
+  font-size: 12px;
+}
+.citymarkt__card-image > i,
+.citymarkt__hero > span,
+.citymarkt__price-row span,
+.citymarkt__chat-listing i,
+.citymarkt__reserve {
+  font-size: 10.5px;
+}
+.citymarkt__grid button > span:not(.citymarkt__card-image) {
+  font-size: 13px;
+}
+.citymarkt__grid button > small,
+.citymarkt__preview-price + * + * + small {
+  font-size: 11.5px;
+}
+.citymarkt__empty span,
+.citymarkt__auth p,
+.citymarkt__description {
+  font-size: 13px;
+}
+.citymarkt__inquiries strong,
+.citymarkt__list strong {
+  font-size: 14px;
+}
+.citymarkt__inquiries b,
+.citymarkt__list b,
+.citymarkt__profile small,
+.citymarkt__price-row > small,
+.citymarkt__seller small,
+.citymarkt__phone {
+  font-size: 11.5px;
+}
+.citymarkt__inquiries small,
+.citymarkt__list small {
+  font-size: 11px;
+}
+.citymarkt__inquiries i,
+.citymarkt__tabbar button i,
+.citymarkt__photo-picker i,
+.citymarkt__selected-strip button i {
+  font-size: 10px;
+}
+.citymarkt__tabbar button {
+  font-size: 10.5px;
+}
+.citymarkt__meta,
+.citymarkt__inline-auth,
+.citymarkt__toast {
+  font-size: 12px;
+}
+.citymarkt__composer textarea,
+.citymarkt__chat-composer input {
+  font-size: 13px;
+}
+.citymarkt__composer button,
+.citymarkt__owner-actions button,
+.citymarkt__report > div button {
+  font-size: 13px;
+}
+.citymarkt__sell > header small,
+.citymarkt__chat > header small,
+.citymarkt__sell > header > button:last-child {
+  font-size: 12px;
+}
+.citymarkt__sell-body > p,
+.citymarkt__sell-body label,
+.citymarkt__switch,
+.citymarkt__previous,
+.citymarkt__sell-body > small {
+  font-size: 12px !important;
+}
+.citymarkt__sell-body input:not([type='checkbox']),
+.citymarkt__sell-body textarea,
+.citymarkt__sell-body select,
+.citymarkt__report select,
+.citymarkt__report textarea {
+  font-size: 13px;
+}
+.citymarkt__chat-listing strong,
+.citymarkt__chat-listing span,
+.citymarkt__messages p {
+  font-size: 13px;
+}
+.citymarkt__messages small {
+  font-size: 10.5px;
+}
+.citymarkt__segmented button span {
+  font-size: 10.5px;
+}
+.citymarkt__chat-actions button,
+.citymarkt__offer-panel > button {
+  font-size: 12px;
+}
+.citymarkt__offer-panel header small,
+.citymarkt__offer-panel label {
+  font-size: 11.5px;
+}
+.citymarkt__offer-panel header strong {
+  font-size: 14px;
+}
+.citymarkt__image-placeholder small,
+.citymarkt__photo-actions small,
+.citymarkt__capture p {
+  font-size: 11.5px;
+}
+.citymarkt__photo-actions strong,
+.citymarkt__selected-heading strong {
+  font-size: 13px;
+}
+.citymarkt__selected-heading span,
+.citymarkt__photo-source > header small,
+.citymarkt__photo-source > header > span {
+  font-size: 11px;
+}
+.citymarkt__field-heading > small {
+  font-size: 10.5px;
+}
+.citymarkt__pages-share strong {
+  font-size: 12.5px;
+}
+.citymarkt__pages-share small {
+  font-size: 11px;
+}
+.citymarkt__sell :deep(.citymarkt-select__trigger) {
+  font-size: 13px;
+}
+.citymarkt__sell :deep(.citymarkt-select__menu button) {
+  font-size: 12px;
+}
+.citymarkt__sell :deep(.citymarkt-gallery__empty small) {
+  font-size: 11.5px;
+}
 .citymarkt__tab-pane {
   width: 100% !important;
   max-width: none;
@@ -2104,12 +3893,12 @@ onMounted(async () => {
 .citymarkt-detail-action.active {
   color: var(--yellow);
 }
-.citymarkt__glass-list > .k-glass {
+.citymarkt__glass-list > .sky-glass {
   width: 100%;
   flex: none;
   border-radius: 13px;
 }
-.citymarkt__glass-list > .k-glass > button {
+.citymarkt__glass-list > .sky-glass > button {
   width: 100%;
   padding: 8px;
   border: 0;
@@ -2119,7 +3908,7 @@ onMounted(async () => {
   text-align: left;
   background: transparent;
 }
-.citymarkt__glass-list > .k-glass > button > span {
+.citymarkt__glass-list > .sky-glass > button > span {
   width: 48px;
   height: 48px;
   flex: none;
@@ -2261,9 +4050,7 @@ onMounted(async () => {
 .citymarkt__grid--wide {
   grid-template-columns: minmax(0, 1fr);
 }
-.citymarkt__grid--wide
-  .citymarkt-listing-card
-  > .citymarkt-listing-card__open {
+.citymarkt__grid--wide .citymarkt-listing-card > .citymarkt-listing-card__open {
   display: grid;
   grid-template-columns: 116px minmax(0, 1fr);
 }
@@ -2303,7 +4090,9 @@ onMounted(async () => {
   font-size: 11px;
   font-weight: 800;
 }
-.citymarkt-profile-listing__share:disabled { opacity: .45 }
+.citymarkt-profile-listing__share:disabled {
+  opacity: 0.45;
+}
 .citymarkt-profile-listing > button > span {
   width: 60px !important;
   height: 60px !important;
@@ -2435,11 +4224,11 @@ onMounted(async () => {
   text-align: center;
   font-size: 12px;
 }
-.citymarkt__photo-actions > .k-glass {
+.citymarkt__photo-actions > .sky-glass {
   min-width: 0;
   border-radius: 14px;
 }
-.citymarkt__photo-actions > .k-glass > button {
+.citymarkt__photo-actions > .sky-glass > button {
   width: 100%;
   padding: 11px 9px;
   border: 0;
@@ -2449,7 +4238,7 @@ onMounted(async () => {
   text-align: left;
   background: transparent;
 }
-.citymarkt__photo-actions > .k-glass > button > span {
+.citymarkt__photo-actions > .sky-glass > button > span {
   width: 34px;
   height: 34px;
   margin-bottom: 8px;
@@ -2479,7 +4268,7 @@ onMounted(async () => {
   font-style: normal;
 }
 .citymarkt-create-navbar {
-  --k-safe-area-top: 46px;
+  --sky-safe-area-top: 46px;
   position: absolute;
   z-index: 5;
   top: 0;
@@ -2577,7 +4366,7 @@ onMounted(async () => {
   font-size: 10px;
   font-weight: 700;
 }
-.citymarkt__profile-editor > label > .k-glass {
+.citymarkt__profile-editor > label > .sky-glass {
   margin-top: 5px;
   border-radius: 11px;
 }
@@ -2617,7 +4406,7 @@ onMounted(async () => {
   color: #171816;
 }
 .citymarkt__profile-actions button:disabled {
-  opacity: .4;
+  opacity: 0.4;
 }
 .citymarkt__logout {
   width: 100%;
diff --git a/frontend/src/views/apps/ClockApp.contract.test.ts b/frontend/src/views/apps/ClockApp.contract.test.ts
index 4b9637c..4ffc8ea 100644
--- a/frontend/src/views/apps/ClockApp.contract.test.ts
+++ b/frontend/src/views/apps/ClockApp.contract.test.ts
@@ -13,19 +13,26 @@ const mainCss = readFileSync(
 
 describe('Clock app controls', () => {
   it('removes the empty navigation row from world clock and timer titles', () => {
-    expect(clockView).toContain("tab === 'world' || tab === 'timer'")
-    expect(clockView).toContain("'clock-navbar__empty-inner'")
+    expect(clockView).toContain('class="clock-navbar"')
+    expect(clockView).toContain('variant="large"')
+    expect(clockView).not.toContain('clock-navbar__empty-inner')
     expect(mainCss).toMatch(
-      /\.clock-navbar__empty-inner\s*\{[^}]*height:\s*0;/s,
+      /\.clock-navbar\.sky-navbar--no-navigation\s*\{[^}]*--sky-navbar-large-title-height[^}]*padding-top:\s*var\(--sky-navbar-safe-area-top\)/s,
     )
   })
 
   it('uses the danger color while stopwatch and timer controls are running', () => {
     expect(clockView).toMatch(
-      /clock\.stopwatchStartedAt === null[\s\S]*?positiveActionColors[\s\S]*?: dangerActionColors/,
+      /clock\.stopwatchStartedAt === null\s*\? 'primary'\s*:\s*'danger'/,
     )
     expect(clockView).toMatch(
-      /clock\.timerStartedAt === null[\s\S]*?positiveActionColors[\s\S]*?: dangerActionColors/,
+      /:variant="clock\.timerStartedAt === null \? 'primary' : 'danger'"/,
     )
   })
+
+  it('uses the shared full-width Sky tab bar', () => {
+    expect(clockView).toContain('<sky-tab-bar')
+    expect(clockView).toContain('<sky-tab-button')
+    expect(clockView).not.toContain('<sky-segmented')
+  })
 })
diff --git a/frontend/src/views/apps/ClockApp.vue b/frontend/src/views/apps/ClockApp.vue
index f91818e..e1c9d54 100644
--- a/frontend/src/views/apps/ClockApp.vue
+++ b/frontend/src/views/apps/ClockApp.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import {
-  kBlock,
-  kButton,
-  kLink,
-  kList,
-  kListInput,
-  kListItem,
-  kNavbar,
-  kPage,
-  kSegmented,
-  kSegmentedButton,
-  kToggle,
-} from 'konsta/vue'
+  SkyBlock,
+  SkyButton,
+  SkyLink,
+  SkyList,
+  SkyField,
+  SkyListItem,
+  SkyNavbar,
+  SkyAppPage,
+  SkyTabBar,
+  SkyTabButton,
+  SkyToggle,
+} from '@/ui'
 import {
   AlarmClock,
   ChevronRight,
@@ -107,26 +107,6 @@ const tabs = [
   { id: 'stopwatch', icon: Timer },
   { id: 'timer', icon: TimerReset },
 ] as const
-const tabBarColors = {
-  strongHighlightBgIos: 'bg-[#e5e5ea] dark:bg-[#2c2c2e]',
-}
-const secondaryActionColors = {
-  tonalBgIos:
-    'bg-[#e5e5ea] active:bg-[#d1d1d6] dark:bg-[#2c2c2e] dark:active:bg-[#3a3a3c]',
-  tonalTextIos: 'text-black dark:text-white',
-}
-const positiveActionColors = {
-  fillBgIos:
-    'bg-[#d9f7df] active:bg-[#c7efcf] dark:bg-[#103a20] dark:active:bg-[#174d2a]',
-  fillTextIos: 'text-[#248a3d] dark:text-[#30d158]',
-}
-const toggleColors = {
-  checkedBgIos: 'bg-[#30d158]',
-}
-const dangerActionColors = {
-  fillBgIos: 'bg-red-500 active:bg-red-600',
-  fillTextIos: 'text-white',
-}
 const weekdayKeys = [
   'sunday',
   'monday',
@@ -227,7 +207,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <k-page component="main" class="native-app clock-app">
+  <sky-app-page component="main" class="native-app clock-app">
     <AlarmSoundMenu
       v-if="timerSoundMenuOpen"
       :back-label="phone.t('Apps.clock.tabs.timer')"
@@ -245,30 +225,25 @@ onBeforeUnmount(() => {
     />
 
     <template v-else>
-      <k-navbar
+      <sky-navbar
         v-if="tab !== 'stopwatch'"
         :title="phone.t(`Apps.clock.tabs.${tab}`)"
-        :inner-class="
-          tab === 'world' || tab === 'timer'
-            ? 'clock-navbar__empty-inner'
-            : ''
-        "
-        large
+        variant="large"
         transparent
         class="clock-navbar"
       >
         <template #left>
-          <k-link
+          <sky-link
             v-if="tab === 'alarm'"
             component="button"
             :link-props="{ type: 'button' }"
             @click="toggleAlarmEditing"
           >
             {{ phone.t(alarmsEditing ? 'Common.done' : 'Common.edit') }}
-          </k-link>
+          </sky-link>
         </template>
         <template #right>
-          <k-link
+          <sky-link
             v-if="tab === 'alarm'"
             component="button"
             icon-only
@@ -277,24 +252,24 @@ onBeforeUnmount(() => {
             @click="openAlarmEditor()"
           >
             <Plus />
-          </k-link>
+          </sky-link>
         </template>
-      </k-navbar>
+      </sky-navbar>
 
-      <k-block component="section" nested class="clock-content">
-        <k-block v-if="tab === 'world'" nested class="clock-world-now">
+      <sky-block component="section" nested class="clock-content">
+        <sky-block v-if="tab === 'world'" nested class="clock-world-now">
           <span class="clock-world-location">{{
             phone.t('Apps.clock.location')
           }}</span>
           <time class="clock-world-time">{{ currentTime }}</time>
           <span class="clock-world-zone">{{ currentTimeZone }}</span>
-        </k-block>
+        </sky-block>
 
-        <k-list
+        <sky-list
           v-else-if="tab === 'alarm'"
           class="clock-konsta-list clock-alarm-list"
         >
-          <k-list-item
+          <sky-list-item
             v-for="alarm in clock.alarms"
             :key="alarm.id"
             link
@@ -307,38 +282,37 @@ onBeforeUnmount(() => {
             @click="openAlarmEditor(alarm.id)"
           >
             <template v-if="alarmsEditing" #media>
-              <k-button
+              <sky-button
                 rounded
                 small
                 inline
-                :colors="dangerActionColors"
+                variant="danger"
                 class="clock-alarm-remove"
                 :aria-label="phone.t('Apps.clock.alarm.delete')"
                 @click.stop="clock.deleteAlarm(alarm.id)"
               >
                 <Minus aria-hidden="true" />
-              </k-button>
+              </sky-button>
             </template>
             <template #after>
               <span v-if="!alarmsEditing" @click.stop>
-                <k-toggle
+                <sky-toggle
                   :checked="alarm.enabled"
-                  :colors="toggleColors"
+                  style="--sky-app-accent: #30d158"
                   :aria-label="`${alarm.time}, ${alarmSubtitle(alarm)}`"
                   @change="clock.toggleAlarm(alarm.id)"
                 />
               </span>
             </template>
-          </k-list-item>
-        </k-list>
+          </sky-list-item>
+        </sky-list>
 
-        <k-block v-else-if="tab === 'stopwatch'" nested class="clock-tool">
+        <sky-block v-else-if="tab === 'stopwatch'" nested class="clock-tool">
           <div class="clock-digits">{{ formatStopwatch(stopwatchValue) }}</div>
           <div class="clock-actions">
-            <k-button
+            <sky-button
               rounded
-              tonal
-              :colors="secondaryActionColors"
+              variant="secondary"
               class="clock-action-button"
               @click="
                 clock.stopwatchStartedAt === null
@@ -353,13 +327,16 @@ onBeforeUnmount(() => {
                     : 'Apps.clock.lap',
                 )
               }}
-            </k-button>
-            <k-button
+            </sky-button>
+            <sky-button
               rounded
-              :colors="
+              :variant="
+                clock.stopwatchStartedAt === null ? 'primary' : 'danger'
+              "
+              :style="
                 clock.stopwatchStartedAt === null
-                  ? positiveActionColors
-                  : dangerActionColors
+                  ? { '--sky-app-accent': '#30d158' }
+                  : undefined
               "
               class="clock-action-button"
               @click="
@@ -375,19 +352,19 @@ onBeforeUnmount(() => {
                     : 'Common.stop',
                 )
               }}
-            </k-button>
+            </sky-button>
           </div>
-          <k-list dividers class="clock-konsta-list clock-lap-list">
-            <k-list-item
+          <sky-list dividers class="clock-konsta-list clock-lap-list">
+            <sky-list-item
               v-for="(lap, index) in clock.laps"
               :key="index"
               :title="`${phone.t('Apps.clock.lap')} ${clock.laps.length - index}`"
               :after="formatStopwatch(lap)"
             />
-          </k-list>
-        </k-block>
+          </sky-list>
+        </sky-block>
 
-        <k-block v-else nested class="clock-tool clock-timer">
+        <sky-block v-else nested class="clock-tool clock-timer">
           <div
             v-if="clock.timerStartedAt !== null"
             class="timer-ring"
@@ -423,26 +400,26 @@ onBeforeUnmount(() => {
             :seconds-unit-label="phone.t('Apps.clock.timer.secondsShort')"
           />
 
-          <k-list
+          <sky-list
             strong
             inset
             class="clock-konsta-list clock-timer-settings clock-timer-note"
           >
-            <k-list-input
+            <sky-field
               :label="phone.t('Apps.clock.timer.note')"
               :placeholder="phone.t('Apps.clock.timer.notePlaceholder')"
               :value="clock.timerNote"
               maxlength="80"
               @input="setTimerNote"
             />
-          </k-list>
+          </sky-list>
 
-          <k-list
+          <sky-list
             strong
             inset
             class="clock-konsta-list clock-timer-settings clock-timer-sound"
           >
-            <k-list-item
+            <sky-list-item
               link
               :chevron="false"
               :title="phone.t('Apps.clock.timer.sound')"
@@ -454,25 +431,25 @@ onBeforeUnmount(() => {
                   <ChevronRight aria-hidden="true" />
                 </span>
               </template>
-            </k-list-item>
-          </k-list>
+            </sky-list-item>
+          </sky-list>
 
           <div class="clock-actions">
-            <k-button
+            <sky-button
               rounded
-              tonal
-              :colors="secondaryActionColors"
+              variant="secondary"
               class="clock-action-button"
               @click="clock.resetTimer()"
             >
               {{ phone.t('Common.reset') }}
-            </k-button>
-            <k-button
+            </sky-button>
+            <sky-button
               rounded
-              :colors="
+              :variant="clock.timerStartedAt === null ? 'primary' : 'danger'"
+              :style="
                 clock.timerStartedAt === null
-                  ? positiveActionColors
-                  : dangerActionColors
+                  ? { '--sky-app-accent': '#30d158' }
+                  : undefined
               "
               class="clock-action-button"
               :disabled="clock.timerStartedAt === null && timerValue <= 0"
@@ -489,39 +466,32 @@ onBeforeUnmount(() => {
                     : 'Common.pause',
                 )
               }}
-            </k-button>
+            </sky-button>
           </div>
-        </k-block>
-      </k-block>
+        </sky-block>
+      </sky-block>
 
-      <k-navbar component="nav" :aria-label="phone.t('Apps.clock.name')">
-        <template #subnavbar>
-          <k-segmented
-            strong
-            rounded
-            :colors="tabBarColors"
-            :data-active-tab="tab"
-          >
-            <k-segmented-button
-              v-for="item in tabs"
-              :key="item.id"
-              large
-              :active="tab === item.id"
-              :class="tab === item.id ? 'text-[#ff9f0a]' : 'text-[#8e8e93]'"
-              :aria-label="phone.t(`Apps.clock.tabs.${item.id}`)"
-              :aria-pressed="tab === item.id"
-              @click="selectTab(item.id)"
-            >
-              <span
-                class="flex flex-col items-center gap-0.5 text-[10px] leading-none"
-              >
-                <component :is="item.icon" class="h-5 w-5" aria-hidden="true" />
-                <span>{{ phone.t(`Apps.clock.tabs.${item.id}`) }}</span>
-              </span>
-            </k-segmented-button>
-          </k-segmented>
-        </template>
-      </k-navbar>
+      <sky-tab-bar
+        icons
+        labels
+        class="clock-tabbar"
+        :aria-label="phone.t('Apps.clock.name')"
+      >
+        <sky-tab-button
+          v-for="item in tabs"
+          :key="item.id"
+          :active="tab === item.id"
+          :aria-label="phone.t(`Apps.clock.tabs.${item.id}`)"
+          @click="selectTab(item.id)"
+        >
+          <template #icon>
+            <component :is="item.icon" aria-hidden="true" />
+          </template>
+          <template #label>
+            {{ phone.t(`Apps.clock.tabs.${item.id}`) }}
+          </template>
+        </sky-tab-button>
+      </sky-tab-bar>
     </template>
-  </k-page>
+  </sky-app-page>
 </template>
diff --git a/frontend/src/views/apps/CrewLinkApp.vue b/frontend/src/views/apps/CrewLinkApp.vue
index e29ff1c..f058b7e 100644
--- a/frontend/src/views/apps/CrewLinkApp.vue
+++ b/frontend/src/views/apps/CrewLinkApp.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
 import {
-  kBadge,
-  kBlockTitle,
-  kButton,
-  kCard,
-  kDialog,
-  kDialogButton,
-  kIcon,
-  kLink,
-  kList,
-  kListInput,
-  kListItem,
-  kNavbar,
-  kPage,
-  kPreloader,
-  kSheet,
-  kTabbar,
-  kTabbarLink,
-  kToast,
-  kToggle,
-  kToolbarPane,
-} from 'konsta/vue'
+  SkyBadge,
+  SkyBlockTitle,
+  SkyButton,
+  SkyCard,
+  SkyDialog,
+  SkyDialogButton,
+  SkyIcon,
+  SkyLink,
+  SkyList,
+  SkyField,
+  SkyListItem,
+  SkyNavbar,
+  SkyAppPage,
+  SkySpinner,
+  SkySheet,
+  SkyTabBar,
+  SkyTabButton,
+  SkyToast,
+  SkyToggle,
+  SkyToolbarPane,
+} from '@/ui'
 import {
   AlertTriangle,
   Camera,
@@ -1165,7 +1165,10 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <k-page class="crewlink" :class="{ 'crewlink--dark': phone.isDarkMode }">
+  <sky-app-page
+    class="crewlink"
+    :class="{ 'crewlink--dark': phone.isDarkMode }"
+  >
     <template v-if="!appAuth.isSignedIn('crewlink')">
       <div class="crewlink-onboarding crewlink-auth">
         <AppProfileAuth
@@ -1198,7 +1201,7 @@ onBeforeUnmount(() => {
     <template v-else-if="crew.isLoading && !crew.profile && !crew.error">
       <div class="crewlink-loading">
         <span class="crewlink-logo"><Radio /></span>
-        <k-preloader />
+        <sky-spinner />
         <p>{{ t('connecting') }}</p>
       </div>
     </template>
@@ -1209,9 +1212,9 @@ onBeforeUnmount(() => {
         <small>{{ t('privateNetwork') }}</small>
         <h1>{{ t('signInTitle') }}</h1>
         <p>{{ t('signInBody') }}</p>
-        <k-button large rounded @click="appAuth.signOut('crewlink')">
+        <sky-button large rounded @click="appAuth.signOut('crewlink')">
           {{ t('backToLogin') }}
-        </k-button>
+        </sky-button>
       </div>
     </template>
 
@@ -1223,8 +1226,8 @@ onBeforeUnmount(() => {
         <small>{{ t('welcomeEyebrow') }}</small>
         <h1>{{ t('welcomeTitle') }}</h1>
         <p>{{ t('welcomeBody') }}</p>
-        <k-list inset strong class="crewlink-form-list">
-          <k-list-input
+        <sky-list inset strong class="crewlink-form-list">
+          <sky-field
             input-id="crewlink-username"
             :label="t('username')"
             :placeholder="t('usernamePlaceholder')"
@@ -1234,20 +1237,20 @@ onBeforeUnmount(() => {
             @input="updateValue('username', $event)"
             @keydown.enter="handleEnterAction($event, createProfile)"
           />
-        </k-list>
+        </sky-list>
         <p v-if="formError" class="crewlink-error" role="alert">
           {{ formError }}
         </p>
-        <k-button
+        <sky-button
           large
           rounded
           :disabled="crew.isLoading"
           @click="createProfile"
         >
-          <k-preloader v-if="crew.isLoading" />
+          <sky-spinner v-if="crew.isLoading" />
           <template v-else>{{ t('createProfile') }}</template>
-        </k-button>
-        <k-button
+        </sky-button>
+        <sky-button
           large
           rounded
           outline
@@ -1255,7 +1258,7 @@ onBeforeUnmount(() => {
           @click="logoutDialogOpen = true"
         >
           <LogOut />{{ phone.t('Common.signOut') }}
-        </k-button>
+        </sky-button>
         <small class="crewlink-privacy"
           ><ShieldCheck />{{ t('privacyNote') }}</small
         >
@@ -1263,7 +1266,7 @@ onBeforeUnmount(() => {
     </template>
 
     <template v-else>
-      <k-navbar
+      <sky-navbar
         v-if="activeGroup"
         class="crewlink-navbar"
         :subtitle="headerSubtitle"
@@ -1286,7 +1289,7 @@ onBeforeUnmount(() => {
             <span><UserPlus /></span>
             <strong>{{ t('joinGroup') }}</strong>
           </button>
-          <k-button
+          <sky-button
             large
             rounded
             outline
@@ -1294,7 +1297,7 @@ onBeforeUnmount(() => {
             @click="logoutDialogOpen = true"
           >
             <LogOut />{{ phone.t('Common.signOut') }}
-          </k-button>
+          </sky-button>
         </section>
 
         <template v-else>
@@ -1445,12 +1448,12 @@ onBeforeUnmount(() => {
                 <small>{{ t('placeOnMapBody') }}</small>
               </div>
               <div>
-                <k-button rounded outline @click="cancelPingPlacement">
+                <sky-button rounded outline @click="cancelPingPlacement">
                   {{ phone.t('Common.cancel') }}
-                </k-button>
-                <k-button rounded @click="confirmPingPlacement">
+                </sky-button>
+                <sky-button rounded @click="confirmPingPlacement">
                   <MapPin />{{ t('addHere') }}
-                </k-button>
+                </sky-button>
               </div>
             </div>
 
@@ -1497,12 +1500,12 @@ onBeforeUnmount(() => {
                 }}
               </p>
               <div>
-                <k-badge class="crewlink-group-badge">{{
+                <sky-badge class="crewlink-group-badge">{{
                   roleLabel(activeGroup.role)
-                }}</k-badge>
-                <k-badge class="crewlink-group-badge">{{
+                }}</sky-badge>
+                <sky-badge class="crewlink-group-badge">{{
                   t('private')
-                }}</k-badge>
+                }}</sky-badge>
               </div>
             </div>
 
@@ -1534,9 +1537,9 @@ onBeforeUnmount(() => {
             </div>
 
             <template v-if="crew.invitations.length">
-              <k-block-title>{{ t('pendingInvitations') }}</k-block-title>
+              <sky-block-title>{{ t('pendingInvitations') }}</sky-block-title>
               <div class="crewlink-invitations crewlink-invitations--inline">
-                <k-card v-for="invite in crew.invitations" :key="invite.id">
+                <sky-card v-for="invite in crew.invitations" :key="invite.id">
                   <div class="crewlink-invite-card">
                     <i :style="{ background: colourValue(invite.colour) }"
                       ><Users
@@ -1561,15 +1564,15 @@ onBeforeUnmount(() => {
                       <Check />
                     </button>
                   </div>
-                </k-card>
+                </sky-card>
               </div>
             </template>
 
-            <k-block-title class="crewlink-members-title">{{
+            <sky-block-title class="crewlink-members-title">{{
               t(activeGroup.memberCount === 1 ? 'member' : 'members')
-            }}</k-block-title>
-            <k-list inset strong class="crewlink-member-list">
-              <k-list-item
+            }}</sky-block-title>
+            <sky-list inset strong class="crewlink-member-list">
+              <sky-list-item
                 v-for="member in activeGroup.members"
                 :key="member.id"
                 :link="member.id !== crew.profile?.id && canModerate"
@@ -1607,8 +1610,8 @@ onBeforeUnmount(() => {
                     :class="`role-${member.role}`"
                   />
                 </template>
-              </k-list-item>
-            </k-list>
+              </sky-list-item>
+            </sky-list>
           </section>
 
           <section
@@ -1626,7 +1629,7 @@ onBeforeUnmount(() => {
               </button>
             </div>
             <div v-if="activeGroup.pings.length" class="crewlink-ping-list">
-              <k-card
+              <sky-card
                 v-for="ping in activeGroup.pings"
                 :key="ping.id"
                 :content-wrap="false"
@@ -1662,7 +1665,7 @@ onBeforeUnmount(() => {
                     <Trash2 />
                   </button>
                 </article>
-              </k-card>
+              </sky-card>
             </div>
             <div v-else class="crewlink-empty-state">
               <span><CircleDot /></span>
@@ -1695,8 +1698,8 @@ onBeforeUnmount(() => {
               </div>
             </div>
 
-            <k-list inset strong>
-              <k-list-item
+            <sky-list inset strong>
+              <sky-list-item
                 :title="t('editProfile')"
                 :subtitle="t('editProfileBody')"
                 link
@@ -1712,48 +1715,48 @@ onBeforeUnmount(() => {
                     <UserRound v-else :size="20" />
                   </span>
                 </template>
-              </k-list-item>
-              <k-list-item
+              </sky-list-item>
+              <sky-list-item
                 link
                 link-component="button"
                 :title="phone.t('Apps.easyShare.shareProfile')"
                 @click="shareProfile"
               >
                 <template #media><Share2 :size="20" /></template>
-              </k-list-item>
-            </k-list>
+              </sky-list-item>
+            </sky-list>
 
-            <k-block-title>{{ t('privacyVisibility') }}</k-block-title>
-            <k-list inset strong>
-              <k-list-item
+            <sky-block-title>{{ t('privacyVisibility') }}</sky-block-title>
+            <sky-list inset strong>
+              <sky-list-item
                 :title="t('shareOnMap')"
                 :subtitle="t('shareOnMapBody')"
               >
                 <template #media><MapIcon :size="20" /></template>
                 <template #after
-                  ><k-toggle
+                  ><sky-toggle
                     :checked="crew.profile.mapVisible"
                     :disabled="pendingVisibility !== null"
                     @click.stop.prevent="updateVisibility('mapVisible')"
                 /></template>
-              </k-list-item>
-              <k-list-item
+              </sky-list-item>
+              <sky-list-item
                 :title="t('overheadLabels')"
                 :subtitle="t('overheadLabelsBody')"
               >
                 <template #media><Eye :size="20" /></template>
                 <template #after
-                  ><k-toggle
+                  ><sky-toggle
                     :checked="crew.profile.overheadVisible"
                     :disabled="pendingVisibility !== null"
                     @click.stop.prevent="updateVisibility('overheadVisible')"
                 /></template>
-              </k-list-item>
-            </k-list>
+              </sky-list-item>
+            </sky-list>
 
-            <k-block-title>{{ t('yourGroups') }}</k-block-title>
-            <k-list inset strong>
-              <k-list-item
+            <sky-block-title>{{ t('yourGroups') }}</sky-block-title>
+            <sky-list inset strong>
+              <sky-list-item
                 v-for="group in crew.groups"
                 :key="group.id"
                 :title="group.name"
@@ -1773,37 +1776,37 @@ onBeforeUnmount(() => {
                     :size="18"
                     :style="{ color: colourValue(group.colour) }"
                 /></template>
-              </k-list-item>
-              <k-list-item
+              </sky-list-item>
+              <sky-list-item
                 :title="t('createAnotherGroup')"
                 link
                 @click="openSheet('create-group')"
                 ><template #media><Plus :size="20" /></template
-              ></k-list-item>
-              <k-list-item
+              ></sky-list-item>
+              <sky-list-item
                 :title="t('joinWithCode')"
                 link
                 @click="openSheet('join-group')"
                 ><template #media><UserPlus :size="20" /></template
-              ></k-list-item>
-            </k-list>
+              ></sky-list-item>
+            </sky-list>
 
-            <k-block-title>{{ t('account') }}</k-block-title>
-            <k-list inset strong>
-              <k-list-item
+            <sky-block-title>{{ t('account') }}</sky-block-title>
+            <sky-list inset strong>
+              <sky-list-item
                 :title="t('externalApi')"
                 :subtitle="t('externalApiBody')"
                 ><template #media><Sparkles :size="20" /></template
-              ></k-list-item>
-              <k-list-item
+              ></sky-list-item>
+              <sky-list-item
                 :title="phone.t('Common.signOut')"
                 class="crewlink-danger-row"
                 link
                 @click="logoutDialogOpen = true"
               >
                 <template #media><LogOut :size="20" /></template>
-              </k-list-item>
-              <k-list-item
+              </sky-list-item>
+              <sky-list-item
                 :title="
                   activeGroup.isOwner ? t('deleteGroup') : t('leaveGroup')
                 "
@@ -1816,13 +1819,13 @@ onBeforeUnmount(() => {
                 "
               >
                 <template #media><Trash2 :size="20" /></template>
-              </k-list-item>
-            </k-list>
+              </sky-list-item>
+            </sky-list>
           </section>
         </template>
       </main>
 
-      <k-tabbar
+      <sky-tab-bar
         v-if="activeGroup && !placingPing"
         component="nav"
         icons
@@ -1831,26 +1834,26 @@ onBeforeUnmount(() => {
         inner-class="crewlink-tabbar__inner"
         :aria-label="t('navigation')"
       >
-        <k-toolbar-pane class="crewlink-tabbar__pane">
-          <k-tabbar-link
+        <sky-toolbar-pane class="crewlink-tabbar__pane">
+          <sky-tab-button
             component="button"
             :active="activeTab === 'map'"
             :link-props="{ type: 'button' }"
             @click="activeTab = 'map'"
             ><template #label>{{ t('map') }}</template
             ><template #icon
-              ><k-icon><MapIcon /></k-icon></template
-          ></k-tabbar-link>
-          <k-tabbar-link
+              ><sky-icon><MapIcon /></sky-icon></template
+          ></sky-tab-button>
+          <sky-tab-button
             component="button"
             :active="activeTab === 'group'"
             :link-props="{ type: 'button' }"
             @click="activeTab = 'group'"
             ><template #label>{{ t('crew') }}</template
             ><template #icon
-              ><k-icon><Users /></k-icon></template
-          ></k-tabbar-link>
-          <k-tabbar-link
+              ><sky-icon><Users /></sky-icon></template
+          ></sky-tab-button>
+          <sky-tab-button
             component="button"
             :active="activeTab === 'pings'"
             :link-props="{ type: 'button' }"
@@ -1858,54 +1861,54 @@ onBeforeUnmount(() => {
           >
             <template #label>{{ t('pings') }}</template>
             <template #icon>
-              <k-icon>
+              <sky-icon>
                 <span class="crewlink-pings-icon">
                   <MapPin />
-                  <k-badge
+                  <sky-badge
                     v-if="activeGroup.pings.length"
                     small
                     class="crewlink-pings-badge"
-                    >{{ activeGroup.pings.length }}</k-badge
+                    >{{ activeGroup.pings.length }}</sky-badge
                   >
                 </span>
-              </k-icon>
+              </sky-icon>
             </template>
-          </k-tabbar-link>
-          <k-tabbar-link
+          </sky-tab-button>
+          <sky-tab-button
             component="button"
             :active="activeTab === 'profile'"
             :link-props="{ type: 'button' }"
             @click="activeTab = 'profile'"
             ><template #label>{{ t('profile') }}</template
             ><template #icon
-              ><k-icon><UserRound /></k-icon></template
-          ></k-tabbar-link>
-        </k-toolbar-pane>
-      </k-tabbar>
+              ><sky-icon><UserRound /></sky-icon></template
+          ></sky-tab-button>
+        </sky-toolbar-pane>
+      </sky-tab-bar>
     </template>
 
-    <k-sheet :opened="Boolean(sheet)" @backdropclick="closeSheet">
+    <sky-sheet :opened="Boolean(sheet)" @backdropclick="closeSheet">
       <section
         v-if="sheet"
-        class="crewlink-sheet__content"
+        class="crewlink-sheet__panel__content"
         role="dialog"
         aria-modal="true"
       >
-        <k-link
+        <sky-link
           component="button"
-          class="crewlink-sheet__close"
+          class="crewlink-sheet__panel__close"
           :link-props="{ type: 'button' }"
           :aria-label="phone.t('Common.close')"
           @click="closeSheet"
           ><X
-        /></k-link>
+        /></sky-link>
 
         <template v-if="sheet === 'create-group'">
-          <span class="crewlink-sheet__icon"><Users /></span>
+          <span class="crewlink-sheet__panel__icon"><Users /></span>
           <h2>{{ t('createGroup') }}</h2>
           <p>{{ t('createGroupBody') }}</p>
-          <k-list inset strong class="crewlink-form-list"
-            ><k-list-input
+          <sky-list inset strong class="crewlink-form-list"
+            ><sky-field
               input-id="crewlink-group-name"
               :label="t('groupName')"
               :placeholder="t('groupNamePlaceholder')"
@@ -1913,7 +1916,7 @@ onBeforeUnmount(() => {
               maxlength="32"
               outline
               @input="updateValue('groupName', $event)"
-          /></k-list>
+          /></sky-list>
           <span class="crewlink-field-label">{{ t('groupColour') }}</span>
           <div class="crewlink-colours" role="radiogroup">
             <button
@@ -1930,21 +1933,21 @@ onBeforeUnmount(() => {
             </button>
           </div>
           <p v-if="formError" class="crewlink-error">{{ formError }}</p>
-          <k-button
+          <sky-button
             large
             rounded
             :disabled="crew.isLoading"
             @click="createGroup"
-            >{{ t('createCrew') }}</k-button
+            >{{ t('createCrew') }}</sky-button
           >
         </template>
 
         <template v-else-if="sheet === 'join-group'">
-          <span class="crewlink-sheet__icon"><UserPlus /></span>
+          <span class="crewlink-sheet__panel__icon"><UserPlus /></span>
           <h2>{{ t('joinWithCode') }}</h2>
           <p>{{ t('joinWithCodeBody') }}</p>
-          <k-list inset strong class="crewlink-form-list"
-            ><k-list-input
+          <sky-list inset strong class="crewlink-form-list"
+            ><sky-field
               input-id="crewlink-invite-code"
               :label="t('inviteCode')"
               :placeholder="t('inviteCodePlaceholder')"
@@ -1953,21 +1956,21 @@ onBeforeUnmount(() => {
               outline
               @input="updateValue('inviteCode', $event)"
               @keydown.enter="handleEnterAction($event, joinGroup)"
-          /></k-list>
+          /></sky-list>
           <p v-if="formError" class="crewlink-error">{{ formError }}</p>
-          <k-button
+          <sky-button
             large
             rounded
             :disabled="crew.isLoading"
             @click="joinGroup"
-            >{{ t('joinCrew') }}</k-button
+            >{{ t('joinCrew') }}</sky-button
           >
           <template v-if="crew.invitations.length">
-            <k-block-title class="crewlink-join-invitations-title">{{
+            <sky-block-title class="crewlink-join-invitations-title">{{
               t('pendingInvitations')
-            }}</k-block-title>
+            }}</sky-block-title>
             <div class="crewlink-invitations crewlink-invitations--join">
-              <k-card v-for="invite in crew.invitations" :key="invite.id">
+              <sky-card v-for="invite in crew.invitations" :key="invite.id">
                 <div class="crewlink-invite-card">
                   <i :style="{ background: colourValue(invite.colour) }"
                     ><Users
@@ -1992,13 +1995,13 @@ onBeforeUnmount(() => {
                     <Check />
                   </button>
                 </div>
-              </k-card>
+              </sky-card>
             </div>
           </template>
         </template>
 
         <template v-else-if="sheet === 'nearby'">
-          <span class="crewlink-sheet__icon"><Radio /></span>
+          <span class="crewlink-sheet__panel__icon"><Radio /></span>
           <h2>{{ t('peopleNearby') }}</h2>
           <p>
             {{
@@ -2007,14 +2010,14 @@ onBeforeUnmount(() => {
               })
             }}
           </p>
-          <k-preloader v-if="crew.isLoading" />
-          <k-list
+          <sky-spinner v-if="crew.isLoading" />
+          <sky-list
             v-else-if="nearbyPlayers.length"
             inset
             strong
             class="crewlink-nearby-list"
           >
-            <k-list-item
+            <sky-list-item
               v-for="player in nearbyPlayers"
               :key="player.source"
               class="crewlink-nearby-item"
@@ -2033,33 +2036,33 @@ onBeforeUnmount(() => {
                 ></template
               >
               <template #after
-                ><k-button
+                ><sky-button
                   small
                   rounded
                   class="crewlink-nearby-invite"
                   @click="inviteNearby(player)"
-                  >{{ t('invite') }}</k-button
+                  >{{ t('invite') }}</sky-button
                 ></template
               >
-            </k-list-item>
-          </k-list>
-          <div v-else class="crewlink-sheet-empty">
+            </sky-list-item>
+          </sky-list>
+          <div v-else class="crewlink-sheet__panel-empty">
             <EyeOff /><strong>{{ t('nobodyNearby') }}</strong
             ><span>{{ t('nobodyNearbyBody') }}</span>
           </div>
           <p v-if="formError" class="crewlink-error">{{ formError }}</p>
-          <k-button
+          <sky-button
             large
             rounded
             outline
             class="crewlink-nearby-rescan"
             @click="loadNearby"
-            ><RefreshCw />{{ t('scanAgain') }}</k-button
+            ><RefreshCw />{{ t('scanAgain') }}</sky-button
           >
         </template>
 
         <template v-else-if="sheet === 'ping'">
-          <span class="crewlink-sheet__icon"><MapPin /></span>
+          <span class="crewlink-sheet__panel__icon"><MapPin /></span>
           <h2 class="crewlink-ping-title">{{ t('newPing') }}</h2>
           <p class="crewlink-ping-description">{{ t('newPingBody') }}</p>
           <div class="crewlink-ping-types">
@@ -2079,8 +2082,8 @@ onBeforeUnmount(() => {
               }}</span>
             </button>
           </div>
-          <k-list inset strong class="crewlink-form-list crewlink-ping-form"
-            ><k-list-input
+          <sky-list inset strong class="crewlink-form-list crewlink-ping-form"
+            ><sky-field
               input-id="crewlink-ping-label"
               input-class="crewlink-ping-label-input"
               :label="t('pingLabel')"
@@ -2089,9 +2092,9 @@ onBeforeUnmount(() => {
               maxlength="48"
               outline
               @input="updateValue('pingLabel', $event)"
-          /></k-list>
-          <k-list inset strong class="crewlink-ping-location-list">
-            <k-list-item
+          /></sky-list>
+          <sky-list inset strong class="crewlink-ping-location-list">
+            <sky-list-item
               :title="t('placeOnMap')"
               :subtitle="t('positionSelected')"
               link
@@ -2099,32 +2102,32 @@ onBeforeUnmount(() => {
             >
               <template #media><Crosshair :size="22" /></template>
               <template #after><MapPinned :size="19" /></template>
-            </k-list-item>
-          </k-list>
+            </sky-list-item>
+          </sky-list>
           <p v-if="formError" class="crewlink-error">{{ formError }}</p>
-          <k-button
+          <sky-button
             large
             rounded
             class="crewlink-share-ping"
             :disabled="crew.isLoading"
             @click="createPing"
-            ><Flag />{{ t('sharePing') }}</k-button
+            ><Flag />{{ t('sharePing') }}</sky-button
           >
         </template>
 
         <template v-else-if="sheet === 'edit-group' && activeGroup">
-          <span class="crewlink-sheet__icon"><Settings2 /></span>
+          <span class="crewlink-sheet__panel__icon"><Settings2 /></span>
           <h2>{{ t('manageCrew') }}</h2>
           <p>{{ t('manageCrewBody') }}</p>
-          <k-list inset strong class="crewlink-form-list"
-            ><k-list-input
+          <sky-list inset strong class="crewlink-form-list"
+            ><sky-field
               input-id="crewlink-edit-name"
               :label="t('groupName')"
               :value="groupName"
               maxlength="32"
               outline
               @input="updateValue('groupName', $event)"
-          /></k-list>
+          /></sky-list>
           <span class="crewlink-field-label">{{ t('groupColour') }}</span>
           <div class="crewlink-colours">
             <button
@@ -2138,31 +2141,31 @@ onBeforeUnmount(() => {
               <Check />
             </button>
           </div>
-          <k-list inset strong>
-            <k-list-item
+          <sky-list inset strong>
+            <sky-list-item
               :title="t('memberPings')"
               :subtitle="t('memberPingsBody')"
               ><template #after
-                ><k-toggle
+                ><sky-toggle
                   :checked="activeGroup.allowMemberPings"
                   :disabled="pendingGroupSetting !== null"
                   @click.stop.prevent="
                     toggleGroupSetting('allowMemberPings')
                   " /></template
-            ></k-list-item>
-            <k-list-item
+            ></sky-list-item>
+            <sky-list-item
               :title="t('allowOverhead')"
               :subtitle="t('allowOverheadBody')"
               ><template #after
-                ><k-toggle
+                ><sky-toggle
                   :checked="activeGroup.overheadAllowed"
                   :disabled="pendingGroupSetting !== null"
                   @click.stop.prevent="
                     toggleGroupSetting('overheadAllowed')
                   " /></template
-            ></k-list-item>
-          </k-list>
-          <k-card v-if="activeGroup.inviteCode"
+            ></sky-list-item>
+          </sky-list>
+          <sky-card v-if="activeGroup.inviteCode"
             ><div class="crewlink-code-card">
               <small>{{ t('inviteCode') }}</small
               ><strong>{{ activeGroup.inviteCode }}</strong
@@ -2170,16 +2173,16 @@ onBeforeUnmount(() => {
               ><button type="button" @click="rotateInviteCode">
                 <RefreshCw />
               </button></div
-          ></k-card>
+          ></sky-card>
           <p v-if="formError" class="crewlink-error">{{ formError }}</p>
-          <k-button large rounded @click="saveGroup">{{
+          <sky-button large rounded @click="saveGroup">{{
             phone.t('Common.save')
-          }}</k-button>
+          }}</sky-button>
         </template>
 
         <template v-else-if="sheet === 'member' && selectedMember">
           <span
-            class="crewlink-sheet__avatar"
+            class="crewlink-sheet__panel__avatar"
             :style="{ '--crew': activeColour }"
             >{{ memberInitials(selectedMember) }}</span
           >
@@ -2188,11 +2191,11 @@ onBeforeUnmount(() => {
             {{ roleLabel(selectedMember.role) }} ·
             {{ memberStatus(selectedMember) }}
           </p>
-          <k-block-title class="crewlink-role-title">{{
+          <sky-block-title class="crewlink-role-title">{{
             t('assignRole')
-          }}</k-block-title>
-          <k-list inset strong class="crewlink-role-list">
-            <k-list-item
+          }}</sky-block-title>
+          <sky-list inset strong class="crewlink-role-list">
+            <sky-list-item
               v-for="role in editableRoles"
               :key="role"
               class="crewlink-role-item"
@@ -2211,24 +2214,24 @@ onBeforeUnmount(() => {
               <template #after
                 ><Check v-if="role === selectedMember.role" :size="18"
               /></template>
-            </k-list-item>
-          </k-list>
+            </sky-list-item>
+          </sky-list>
           <div class="crewlink-member-actions">
-            <k-button
+            <sky-button
               v-if="activeGroup?.isOwner"
               large
               rounded
               outline
               @click="confirmAction = 'transfer-owner'"
-              ><Crown />{{ t('transferOwnership') }}</k-button
+              ><Crown />{{ t('transferOwnership') }}</sky-button
             >
-            <k-button
+            <sky-button
               large
               rounded
               tonal
               class="crewlink-danger-button"
               @click="confirmAction = 'remove-member'"
-              ><Trash2 />{{ t('removeMember') }}</k-button
+              ><Trash2 />{{ t('removeMember') }}</sky-button
             >
           </div>
         </template>
@@ -2250,14 +2253,14 @@ onBeforeUnmount(() => {
           <h2>{{ t('editProfile') }}</h2>
           <p>{{ t('editProfileBody') }}</p>
           <div class="crewlink-profile-editor__media-actions">
-            <k-button rounded outline @click="openProfileMedia('photos')">
+            <sky-button rounded outline @click="openProfileMedia('photos')">
               <Images :size="16" />{{ t('gallery') }}
-            </k-button>
-            <k-button rounded outline @click="openProfileMedia('camera')">
+            </sky-button>
+            <sky-button rounded outline @click="openProfileMedia('camera')">
               <Camera :size="16" />{{ t('camera') }}
-            </k-button>
+            </sky-button>
           </div>
-          <k-button
+          <sky-button
             v-if="
               selectedProfilePhoto ||
               (crew.profile.avatarUrl && !profileAvatarRemoved)
@@ -2268,9 +2271,9 @@ onBeforeUnmount(() => {
             @click="removeProfilePhoto"
           >
             <Trash2 :size="15" />{{ t('removeProfilePhoto') }}
-          </k-button>
-          <k-list inset strong class="crewlink-form-list"
-            ><k-list-input
+          </sky-button>
+          <sky-list inset strong class="crewlink-form-list"
+            ><sky-field
               input-id="crewlink-edit-username"
               :label="t('username')"
               :value="username"
@@ -2278,38 +2281,38 @@ onBeforeUnmount(() => {
               outline
               @input="updateValue('username', $event)"
               @keydown.enter="handleEnterAction($event, saveProfile)"
-          /></k-list>
+          /></sky-list>
           <p v-if="formError" class="crewlink-error">{{ formError }}</p>
-          <k-button
+          <sky-button
             large
             rounded
             :disabled="crew.isLoading"
             @click="saveProfile"
           >
-            <k-preloader v-if="crew.isLoading" />
+            <sky-spinner v-if="crew.isLoading" />
             <template v-else>{{ phone.t('Common.save') }}</template>
-          </k-button>
+          </sky-button>
         </template>
       </section>
-    </k-sheet>
+    </sky-sheet>
 
-    <k-sheet
+    <sky-sheet
       :opened="Boolean(selectedMember && !sheet)"
       @backdropclick="selectedMember = null"
     >
       <section
         v-if="selectedMember"
-        class="crewlink-sheet__content crewlink-member-preview"
+        class="crewlink-sheet__panel__content crewlink-member-preview"
       >
-        <k-link
+        <sky-link
           component="button"
-          class="crewlink-sheet__close"
+          class="crewlink-sheet__panel__close"
           :link-props="{ type: 'button' }"
           @click="selectedMember = null"
           ><X
-        /></k-link>
+        /></sky-link>
         <span
-          class="crewlink-sheet__avatar"
+          class="crewlink-sheet__panel__avatar"
           :style="{ '--crew': activeColour }"
         >
           <img
@@ -2324,33 +2327,33 @@ onBeforeUnmount(() => {
           {{ roleLabel(selectedMember.role) }} ·
           {{ memberStatus(selectedMember) }}
         </p>
-        <k-button
+        <sky-button
           v-if="selectedMember.coords"
           large
           rounded
           @click="routeToSelectedMember"
-          ><Route />{{ t('setRoute') }}</k-button
+          ><Route />{{ t('setRoute') }}</sky-button
         >
       </section>
-    </k-sheet>
+    </sky-sheet>
 
-    <k-sheet
+    <sky-sheet
       :opened="Boolean(selectedPing)"
       @backdropclick="selectedPing = null"
     >
       <section
         v-if="selectedPing"
-        class="crewlink-sheet__content crewlink-member-preview"
+        class="crewlink-sheet__panel__content crewlink-member-preview"
       >
-        <k-link
+        <sky-link
           component="button"
-          class="crewlink-sheet__close"
+          class="crewlink-sheet__panel__close"
           :link-props="{ type: 'button' }"
           @click="selectedPing = null"
           ><X
-        /></k-link>
+        /></sky-link>
         <span
-          class="crewlink-sheet__icon"
+          class="crewlink-sheet__panel__icon"
           :style="{ background: pingColours[selectedPing.type] }"
           ><component :is="pingIcons[selectedPing.type]" /></span
         ><small>{{ t(`pingTypes.${selectedPing.type}`) }}</small>
@@ -2359,11 +2362,11 @@ onBeforeUnmount(() => {
           {{ t('sharedBy', { username: selectedPing.creatorUsername }) }} ·
           {{ expiresIn(selectedPing.expiresAt) }}
         </p>
-        <k-button large rounded @click="routeToSelectedPing"
-          ><Navigation />{{ t('setRoute') }}</k-button
+        <sky-button large rounded @click="routeToSelectedPing"
+          ><Navigation />{{ t('setRoute') }}</sky-button
         >
       </section>
-    </k-sheet>
+    </sky-sheet>
 
     <AccountLogoutDialog
       v-model:opened="logoutDialogOpen"
@@ -2372,32 +2375,32 @@ onBeforeUnmount(() => {
       @logged-out="activeTab = 'map'"
     />
 
-    <k-dialog
+    <sky-dialog
       :opened="Boolean(confirmAction)"
       @backdropclick="cancelConfirmation"
     >
       <template #title>{{ t(`confirm.${confirmAction}.title`) }}</template>
       <p>{{ t(`confirm.${confirmAction}.body`) }}</p>
       <template #buttons
-        ><k-dialog-button
+        ><sky-dialog-button
           class="crewlink-dialog-cancel"
           type="button"
           :aria-label="phone.t('Common.cancel')"
           @click="cancelConfirmation"
-          >{{ phone.t('Common.cancel') }}</k-dialog-button
-        ><k-dialog-button
+          >{{ phone.t('Common.cancel') }}</sky-dialog-button
+        ><sky-dialog-button
           strong
           type="button"
           @click="performConfirmedAction"
-          >{{ t('confirmAction') }}</k-dialog-button
+          >{{ t('confirmAction') }}</sky-dialog-button
         ></template
       >
-    </k-dialog>
+    </sky-dialog>
 
-    <k-toast :opened="Boolean(toastText)" position="center">{{
+    <sky-toast :opened="Boolean(toastText)" position="center">{{
       toastText
-    }}</k-toast>
-  </k-page>
+    }}</sky-toast>
+  </sky-app-page>
 </template>
 
 <style scoped>
@@ -2406,8 +2409,8 @@ onBeforeUnmount(() => {
   --cl-surface: rgba(255, 255, 255, 0.84);
   --cl-text: #102034;
   --cl-muted: #6e7c8d;
-  --k-safe-area-top: 46px;
-  --k-safe-area-bottom: 25px;
+  --sky-safe-area-top: 46px;
+  --sky-safe-area-bottom: 25px;
   position: relative;
   height: 100%;
   background: var(--cl-bg);
@@ -2424,7 +2427,7 @@ onBeforeUnmount(() => {
   background: transparent;
 }
 .crewlink-navbar {
-  --k-safe-area-top: 46px;
+  --sky-safe-area-top: 46px;
   position: absolute;
   z-index: 20;
   top: 0;
@@ -2447,7 +2450,7 @@ onBeforeUnmount(() => {
   overflow: hidden;
 }
 .crewlink-content--empty {
-  inset: var(--k-safe-area-top) 0 var(--k-safe-area-bottom);
+  inset: var(--sky-safe-area-top) 0 var(--sky-safe-area-bottom);
 }
 .crewlink-scroll-tab {
   height: 100%;
@@ -2643,7 +2646,7 @@ onBeforeUnmount(() => {
   gap: 7px;
   margin: 0;
 }
-.crewlink-invitations--join :deep(.k-card) {
+.crewlink-invitations--join :deep(.sky-card) {
   margin: 0;
 }
 .crewlink-invite-card {
@@ -2691,13 +2694,13 @@ onBeforeUnmount(() => {
 .crewlink-map-tab {
   height: 100%;
   padding-top: 94px;
-  padding-bottom: calc(80px + var(--k-safe-area-bottom));
+  padding-bottom: calc(80px + var(--sky-safe-area-bottom));
   display: flex;
   flex-direction: column;
   background: #09131c;
 }
 .crewlink-content--placing .crewlink-map-tab {
-  padding-bottom: var(--k-safe-area-bottom);
+  padding-bottom: var(--sky-safe-area-bottom);
 }
 .crewlink-map-summary {
   height: 64px;
@@ -2956,7 +2959,7 @@ onBeforeUnmount(() => {
   grid-template-columns: 1fr 1fr;
   gap: 8px;
 }
-.crewlink-ping-placement :deep(.k-button) {
+.crewlink-ping-placement :deep(.sky-button) {
   min-height: 44px;
 }
 .crewlink-ping-placement svg {
@@ -3099,7 +3102,7 @@ onBeforeUnmount(() => {
   font-weight: 700 !important;
   color: var(--cl-text) !important;
 }
-.crewlink-member-list :deep(.k-list-item) {
+.crewlink-member-list :deep(.sky-list-item) {
   min-height: 70px;
 }
 .crewlink-member-title {
@@ -3209,7 +3212,7 @@ onBeforeUnmount(() => {
   flex-direction: column;
   gap: 8px;
 }
-.crewlink-ping-list :deep(.k-card) {
+.crewlink-ping-list :deep(.sky-card) {
   margin: 0;
 }
 .crewlink-ping-list article {
@@ -3349,7 +3352,7 @@ onBeforeUnmount(() => {
   width: 18px;
 }
 .crewlink-danger-row {
-  --k-list-item-title-text-color: #e44760;
+  --sky-list-item-title-color: #e44760;
 }
 .crewlink-danger-button {
   color: #e44760 !important;
@@ -3397,10 +3400,10 @@ onBeforeUnmount(() => {
   gap: 8px;
   margin-top: 12px;
 }
-.crewlink-member-actions :deep(.k-button) {
+.crewlink-member-actions :deep(.sky-button) {
   margin-top: 0;
 }
-.crewlink-sheet__content {
+.crewlink-sheet__panel__content {
   position: relative;
   max-height: 82vh;
   overflow-y: auto;
@@ -3410,7 +3413,7 @@ onBeforeUnmount(() => {
   background: var(--cl-bg);
   border-radius: 24px 24px 0 0;
 }
-.crewlink-sheet__close {
+.crewlink-sheet__panel__close {
   position: absolute;
   right: 14px;
   top: 12px;
@@ -3422,11 +3425,11 @@ onBeforeUnmount(() => {
   color: var(--cl-muted);
   background: rgba(125, 145, 160, 0.15);
 }
-.crewlink-sheet__close svg {
+.crewlink-sheet__panel__close svg {
   width: 17px;
 }
-.crewlink-sheet__icon,
-.crewlink-sheet__avatar {
+.crewlink-sheet__panel__icon,
+.crewlink-sheet__panel__avatar {
   width: 56px;
   height: 56px;
   margin: 0 auto 9px;
@@ -3437,25 +3440,25 @@ onBeforeUnmount(() => {
   background: linear-gradient(145deg, #27d9ed, #287cff);
   box-shadow: 0 10px 25px rgba(31, 139, 205, 0.22);
 }
-.crewlink-sheet__avatar {
+.crewlink-sheet__panel__avatar {
   background: linear-gradient(145deg, var(--crew), #29415a);
   font-weight: 900;
 }
-.crewlink-sheet__icon svg {
+.crewlink-sheet__panel__icon svg {
   width: 26px;
 }
-.crewlink-sheet__content h2 {
+.crewlink-sheet__panel__content h2 {
   margin: 4px 0;
   font-size: 23px;
   line-height: 1.2;
 }
-.crewlink-sheet__content > p {
+.crewlink-sheet__panel__content > p {
   margin: 0 10px 13px;
   color: var(--cl-muted);
   font-size: 13px;
   line-height: 1.45;
 }
-.crewlink-sheet__content :deep(.button) {
+.crewlink-sheet__panel__content :deep(.button) {
   width: 100%;
   margin-top: 9px;
   font-size: 13px;
@@ -3535,7 +3538,7 @@ onBeforeUnmount(() => {
   font-size: 12px !important;
   margin: 8px !important;
 }
-.crewlink-sheet-empty {
+.crewlink-sheet__panel-empty {
   padding: 25px;
   display: flex;
   flex-direction: column;
@@ -3543,20 +3546,20 @@ onBeforeUnmount(() => {
   gap: 5px;
   color: var(--cl-muted);
 }
-.crewlink-sheet-empty svg {
+.crewlink-sheet__panel-empty svg {
   width: 34px;
 }
-.crewlink-sheet-empty strong {
+.crewlink-sheet__panel-empty strong {
   color: var(--cl-text);
 }
-.crewlink-sheet-empty span {
+.crewlink-sheet__panel-empty span {
   font-size: 11px;
 }
 .crewlink-ping-title {
   font-size: 25px !important;
   line-height: 30px !important;
 }
-.crewlink-sheet__content > .crewlink-ping-description {
+.crewlink-sheet__panel__content > .crewlink-ping-description {
   font-size: 14px;
   line-height: 19px;
 }
@@ -3590,7 +3593,7 @@ onBeforeUnmount(() => {
   width: 22px;
   height: 22px;
 }
-.crewlink-ping-form :deep(.k-list-input .text-xs) {
+.crewlink-ping-form :deep(.sky-field .text-xs) {
   font-size: 14px !important;
   font-weight: 600;
   line-height: 18px;
@@ -3599,7 +3602,7 @@ onBeforeUnmount(() => {
   font-size: 16px !important;
   line-height: 20px;
 }
-.crewlink-ping-location-list :deep(.k-list-item) {
+.crewlink-ping-location-list :deep(.sky-list-item) {
   min-height: 70px;
 }
 .crewlink-ping-location-copy {
@@ -3618,7 +3621,7 @@ onBeforeUnmount(() => {
   font-size: 14px;
   line-height: 18px;
 }
-.crewlink-sheet__content :deep(.crewlink-share-ping) {
+.crewlink-sheet__panel__content :deep(.crewlink-share-ping) {
   font-size: 16px;
 }
 .crewlink-code-card {
@@ -3671,17 +3674,17 @@ onBeforeUnmount(() => {
   gap: 2px;
   padding: 0;
 }
-.crewlink-tabbar :deep(.crewlink-tabbar__pane > .k-link) {
+.crewlink-tabbar :deep(.crewlink-tabbar__pane > .sky-link) {
   min-width: 0 !important;
   max-width: none !important;
   flex: 1 1 25% !important;
   padding-inline: 2px !important;
 }
-.crewlink-tabbar :deep(.k-tabbar-link-label) {
+.crewlink-tabbar :deep(.sky-tab-button__label) {
   font-size: 9px;
   line-height: 11px;
 }
-.crewlink-tabbar :deep(.k-icon) {
+.crewlink-tabbar :deep(.sky-icon) {
   width: 23px;
   height: 23px;
 }
@@ -3716,7 +3719,7 @@ onBeforeUnmount(() => {
   line-height: 11px;
   pointer-events: none;
 }
-.crewlink-sheet__content :deep(.crewlink-nearby-rescan) {
+.crewlink-sheet__panel__content :deep(.crewlink-nearby-rescan) {
   margin-top: 16px;
   margin-bottom: 10px;
 }
@@ -3754,10 +3757,10 @@ onBeforeUnmount(() => {
   height: 100%;
   object-fit: cover;
 }
-.crewlink-sheet__avatar {
+.crewlink-sheet__panel__avatar {
   overflow: hidden;
 }
-.crewlink-sheet__avatar img {
+.crewlink-sheet__panel__avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -3791,7 +3794,7 @@ onBeforeUnmount(() => {
   gap: 8px;
   margin: 4px 0 8px;
 }
-.crewlink-profile-editor__media-actions :deep(.k-button) {
+.crewlink-profile-editor__media-actions :deep(.sky-button) {
   min-width: 0;
   margin-top: 0;
   gap: 6px;
diff --git a/frontend/src/views/apps/DarkChatApp.vue b/frontend/src/views/apps/DarkChatApp.vue
index 95652bd..7eab1af 100644
--- a/frontend/src/views/apps/DarkChatApp.vue
+++ b/frontend/src/views/apps/DarkChatApp.vue
@@ -1777,7 +1777,7 @@ onBeforeUnmount(() => {
   <SkyAppPage
     class="darkchat-page dc-ios"
     :label="t('name')"
-    :dark="true"
+    :dark="phone.isDarkMode"
     accent="#0a84ff"
     accent-soft="rgb(10 132 255 / 18%)"
   >
diff --git a/frontend/src/views/apps/FeatherApp.vue b/frontend/src/views/apps/FeatherApp.vue
index 33e90aa..ac64ce1 100644
--- a/frontend/src/views/apps/FeatherApp.vue
+++ b/frontend/src/views/apps/FeatherApp.vue
@@ -28,29 +28,29 @@ import {
   X,
 } from 'lucide-vue-next'
 import {
-  kBlock,
-  kButton,
-  kFab,
-  kGlass,
-  kIcon,
-  kLink,
-  kList,
-  kListInput,
-  kListItem,
-  kNavbar,
-  kNavbarBackLink,
-  kPage,
-  kPreloader,
-  kSearchbar,
-  kSegmented,
-  kSegmentedButton,
-  kSheet,
-  kTabbar,
-  kTabbarLink,
-  kToast,
-  kToggle,
-  kToolbarPane,
-} from 'konsta/vue'
+  SkyBlock,
+  SkyButton,
+  SkyFab,
+  SkyGlass,
+  SkyIcon,
+  SkyLink,
+  SkyList,
+  SkyField,
+  SkyListItem,
+  SkyNavbar,
+  SkyNavbarBackLink,
+  SkyAppPage,
+  SkySpinner,
+  SkySearchbar,
+  SkySegmented,
+  SkySegmentedButton,
+  SkySheet,
+  SkyTabBar,
+  SkyTabButton,
+  SkyToast,
+  SkyToggle,
+  SkyToolbarPane,
+} from '@/ui'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -133,11 +133,6 @@ const authUsername = ref('')
 const authProfilePhoto = ref<SelectedPhoto | null>(null)
 const authBusy = ref(false)
 const authError = ref('')
-const composeFabColors = {
-  activeBgIos: 'active:!bg-[#2778dc] dark:active:!bg-[#2778dc]',
-  bgIos: '!bg-[#58a6ff] dark:!bg-[#58a6ff]',
-  textIos: '!text-white dark:!text-white',
-}
 let exploreSearchTimer: number | undefined
 let networkSearchTimer: number | undefined
 
@@ -841,7 +836,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <kPage
+  <SkyAppPage
     component="main"
     class="feather-app"
     :class="{
@@ -861,7 +856,7 @@ onMounted(async () => {
       'feather-app--compact': compactMode,
     }"
   >
-    <kNavbar
+    <SkyNavbar
       v-if="feather.onboarded && isAuthenticated"
       class="feather-navbar"
       :left-class="
@@ -883,13 +878,13 @@ onMounted(async () => {
         />
       </template>
       <template v-if="screen !== 'main'" #left>
-        <kNavbarBackLink
+        <SkyNavbarBackLink
           v-if="screen === 'profile'"
           :text="t('back')"
           :show-text="false"
           @click="goBack"
         />
-        <kLink
+        <SkyLink
           v-else-if="screen === 'composer'"
           component="button"
           class="feather-composer-close"
@@ -898,8 +893,8 @@ onMounted(async () => {
           @click="goBack"
         >
           <X :size="19" />
-        </kLink>
-        <kNavbarBackLink
+        </SkyLink>
+        <SkyNavbarBackLink
           v-else
           :text="t('back')"
           :show-text="false"
@@ -907,7 +902,7 @@ onMounted(async () => {
         />
       </template>
       <template #right>
-        <kButton
+        <SkyButton
           v-if="screen === 'composer'"
           rounded
           small
@@ -916,8 +911,8 @@ onMounted(async () => {
           @click="publish"
         >
           {{ busy ? t('posting') : t('post') }}
-        </kButton>
-        <kButton
+        </SkyButton>
+        <SkyButton
           v-else-if="screen === 'edit'"
           rounded
           small
@@ -926,12 +921,12 @@ onMounted(async () => {
           @click="saveProfile"
         >
           {{ busy ? t('loading') : t('saveProfile') }}
-        </kButton>
+        </SkyButton>
       </template>
-    </kNavbar>
+    </SkyNavbar>
 
     <div v-if="feather.loading && !feather.onboarded" class="feather-loading">
-      <kPreloader class="text-[#438cf5]" />
+      <SkySpinner class="text-[#438cf5]" />
       <span>{{ t('loading') }}</span>
     </div>
 
@@ -980,8 +975,8 @@ onMounted(async () => {
             <p>{{ t('profileDetailsHint') }}</p>
           </div>
         </div>
-        <kList strong inset class="feather-onboarding__fields">
-          <kListInput
+        <SkyList strong inset class="feather-onboarding__fields">
+          <SkyField
             :value="onboarding.displayName"
             :label="t('displayName')"
             :placeholder="t('displayNamePlaceholder')"
@@ -989,8 +984,8 @@ onMounted(async () => {
             @input="onboarding.displayName = inputValue($event)"
           >
             <template #media><UserRound :size="18" /></template>
-          </kListInput>
-          <kListInput
+          </SkyField>
+          <SkyField
             :value="onboarding.handle"
             :label="t('handle')"
             :placeholder="t('handlePlaceholder')"
@@ -999,8 +994,8 @@ onMounted(async () => {
             @input="onboarding.handle = inputValue($event)"
           >
             <template #media><AtSign :size="18" /></template>
-          </kListInput>
-          <kListInput
+          </SkyField>
+          <SkyField
             :value="onboarding.bio"
             type="textarea"
             :label="t('bio')"
@@ -1010,10 +1005,10 @@ onMounted(async () => {
             @input="onboarding.bio = inputValue($event)"
           >
             <template #media><AlignLeft :size="18" /></template>
-          </kListInput>
-        </kList>
+          </SkyField>
+        </SkyList>
       </div>
-      <kButton
+      <SkyButton
         large
         rounded
         :disabled="!canCreateProfile"
@@ -1021,8 +1016,8 @@ onMounted(async () => {
         @click="createProfile"
       >
         {{ t('start') }}
-      </kButton>
-      <kButton
+      </SkyButton>
+      <SkyButton
         large
         rounded
         outline
@@ -1031,7 +1026,7 @@ onMounted(async () => {
       >
         <LogOut :size="16" />
         {{ phone.t('Common.signOut') }}
-      </kButton>
+      </SkyButton>
     </section>
 
     <template v-else>
@@ -1039,7 +1034,7 @@ onMounted(async () => {
         <p v-if="replyTo" class="feather-replying">
           {{ t('replyingTo', { handle: replyTo.handle }) }}
         </p>
-        <kGlass :highlight="false" class="feather-composer-card">
+        <SkyGlass :highlight="false" class="feather-composer-card">
           <div class="feather-composer-card__inner">
             <div class="feather-composer__identity">
               <div class="feather-compose-avatar">
@@ -1072,7 +1067,7 @@ onMounted(async () => {
               }}</b>
             </div>
           </div>
-        </kGlass>
+        </SkyGlass>
 
         <section class="feather-composer-media">
           <header>
@@ -1084,7 +1079,7 @@ onMounted(async () => {
             <b>{{ photos.length }} / 4</b>
           </header>
           <div class="feather-composer-media__actions">
-            <kGlass :highlight="false">
+            <SkyGlass :highlight="false">
               <button
                 type="button"
                 :disabled="photos.length >= 4"
@@ -1094,8 +1089,8 @@ onMounted(async () => {
                 <strong>{{ t('chooseGallery') }}</strong>
                 <small>{{ t('chooseGalleryBody') }}</small>
               </button>
-            </kGlass>
-            <kGlass :highlight="false">
+            </SkyGlass>
+            <SkyGlass :highlight="false">
               <button
                 type="button"
                 :disabled="photos.length >= 4"
@@ -1105,7 +1100,7 @@ onMounted(async () => {
                 <strong>{{ t('takePhoto') }}</strong>
                 <small>{{ t('takePhotoBody') }}</small>
               </button>
-            </kGlass>
+            </SkyGlass>
           </div>
           <div v-if="photos.length" class="feather-composer-media__selected">
             <div class="feather-composer-media__selected-head">
@@ -1152,19 +1147,19 @@ onMounted(async () => {
         <div class="feather-edit__photo">
           <strong>{{ t('chooseAvatar') }}</strong>
           <div class="feather-edit__photo-actions">
-            <kButton tonal rounded @click="openProfileMedia('photos')">
+            <SkyButton tonal rounded @click="openProfileMedia('photos')">
               <Images :size="16" />
               <span>{{ t('chooseGallery') }}</span>
-            </kButton>
-            <kButton tonal rounded @click="openProfileMedia('camera')">
+            </SkyButton>
+            <SkyButton tonal rounded @click="openProfileMedia('camera')">
               <Camera :size="16" />
               <span>{{ t('takePhoto') }}</span>
-            </kButton>
+            </SkyButton>
           </div>
         </div>
 
-        <kList strong inset class="feather-edit__fields">
-          <kListInput
+        <SkyList strong inset class="feather-edit__fields">
+          <SkyField
             :value="editing.displayName"
             :label="t('displayName')"
             :placeholder="t('displayNamePlaceholder')"
@@ -1173,8 +1168,8 @@ onMounted(async () => {
             @input="editing.displayName = inputValue($event)"
           >
             <template #media><UserRound :size="18" /></template>
-          </kListInput>
-          <kListInput
+          </SkyField>
+          <SkyField
             :value="editing.bio"
             type="textarea"
             :label="t('bio')"
@@ -1184,40 +1179,40 @@ onMounted(async () => {
             @input="editing.bio = inputValue($event)"
           >
             <template #media><AlignLeft :size="18" /></template>
-          </kListInput>
-        </kList>
+          </SkyField>
+        </SkyList>
       </section>
 
       <section
         v-else-if="screen === 'connections' && activeProfile"
         class="feather-scroll feather-connections"
       >
-        <kSegmented class="feather-connections__tabs">
-          <kSegmentedButton
+        <SkySegmented class="feather-connections__tabs">
+          <SkySegmentedButton
             type="button"
             :active="connectionMode === 'followers'"
             :class="{ 'is-active': connectionMode === 'followers' }"
             @click="openConnections('followers')"
           >
             {{ t('followers') }}
-          </kSegmentedButton>
-          <kSegmentedButton
+          </SkySegmentedButton>
+          <SkySegmentedButton
             type="button"
             :active="connectionMode === 'following'"
             :class="{ 'is-active': connectionMode === 'following' }"
             @click="openConnections('following')"
           >
             {{ t('followingCount') }}
-          </kSegmentedButton>
-        </kSegmented>
+          </SkySegmentedButton>
+        </SkySegmented>
 
         <div
           v-if="feather.connectionLoading"
           class="feather-connections__loading"
         >
-          <kPreloader />
+          <SkySpinner />
         </div>
-        <kBlock
+        <SkyBlock
           v-else-if="!feather.connections.length"
           strong
           inset
@@ -1226,9 +1221,9 @@ onMounted(async () => {
           <UsersRound :size="30" />
           <strong>{{ t('noConnections') }}</strong>
           <p>{{ t('noConnectionsBody') }}</p>
-        </kBlock>
-        <kList v-else strong inset class="feather-connections__list">
-          <kListItem
+        </SkyBlock>
+        <SkyList v-else strong inset class="feather-connections__list">
+          <SkyListItem
             v-for="person in feather.connections"
             :key="person.id"
             :title="person.display_name"
@@ -1252,7 +1247,7 @@ onMounted(async () => {
               </button>
             </template>
             <template #after>
-              <kButton
+              <SkyButton
                 v-if="activeProfile.is_owner"
                 outline
                 rounded
@@ -1262,8 +1257,8 @@ onMounted(async () => {
               >
                 <UserMinus :size="13" />
                 <span>{{ t('removeConnection') }}</span>
-              </kButton>
-              <kButton
+              </SkyButton>
+              <SkyButton
                 v-else-if="!person.is_owner"
                 rounded
                 small
@@ -1275,10 +1270,10 @@ onMounted(async () => {
                 @click="followProfile(person)"
               >
                 {{ person.is_following ? t('following') : t('follow') }}
-              </kButton>
+              </SkyButton>
             </template>
-          </kListItem>
-        </kList>
+          </SkyListItem>
+        </SkyList>
       </section>
 
       <section
@@ -1296,7 +1291,7 @@ onMounted(async () => {
           @reply="focusThreadReply"
           @share="sharePost"
         />
-        <kGlass :highlight="false" class="feather-thread-reply">
+        <SkyGlass :highlight="false" class="feather-thread-reply">
           <form @submit.prevent="publishThreadReply">
             <span class="feather-avatar feather-thread-reply__avatar">
               <img
@@ -1320,7 +1315,7 @@ onMounted(async () => {
                   }}</span>
                   <p>{{ threadReplyTarget.body }}</p>
                 </div>
-                <kButton
+                <SkyButton
                   clear
                   rounded
                   small
@@ -1329,7 +1324,7 @@ onMounted(async () => {
                   @click="clearThreadReplyTarget"
                 >
                   <X :size="14" />
-                </kButton>
+                </SkyButton>
               </div>
               <span v-else class="feather-thread-reply__target">{{
                 t('replyingTo', { handle: feather.thread.post.handle })
@@ -1346,7 +1341,7 @@ onMounted(async () => {
                     count: String(360 - threadReplyBody.length),
                   })
                 }}</span>
-                <kButton
+                <SkyButton
                   rounded
                   small
                   type="submit"
@@ -1354,11 +1349,11 @@ onMounted(async () => {
                   class="feather-primary"
                 >
                   {{ busy ? t('posting') : t('reply') }}
-                </kButton>
+                </SkyButton>
               </footer>
             </div>
           </form>
-        </kGlass>
+        </SkyGlass>
         <h2 class="feather-section-title feather-thread-title">
           {{ t('replies') }}
           <span>{{ feather.thread.replies.length }}</span>
@@ -1389,7 +1384,7 @@ onMounted(async () => {
         "
         class="feather-scroll feather-profile-screen"
       >
-        <kGlass :highlight="false" class="feather-profile-glass">
+        <SkyGlass :highlight="false" class="feather-profile-glass">
           <div class="feather-profile">
             <div class="feather-profile__cover"></div>
             <div class="feather-profile__top">
@@ -1401,7 +1396,7 @@ onMounted(async () => {
                 />
                 <UserRound v-else :size="29" />
               </div>
-              <kButton
+              <SkyButton
                 v-if="!activeProfile.is_owner"
                 rounded
                 small
@@ -1413,11 +1408,11 @@ onMounted(async () => {
                 }"
                 @click="followProfile(activeProfile)"
               >
-                <kIcon v-if="!activeProfile.is_following"
+                <SkyIcon v-if="!activeProfile.is_following"
                   ><UserPlus :size="14"
-                /></kIcon>
+                /></SkyIcon>
                 {{ activeProfile.is_following ? t('following') : t('follow') }}
-              </kButton>
+              </SkyButton>
             </div>
             <div class="feather-profile__identity">
               <h1>
@@ -1450,7 +1445,7 @@ onMounted(async () => {
               </button>
             </div>
             <div v-if="activeProfile.is_owner" class="feather-profile__actions">
-              <kButton
+              <SkyButton
                 outline
                 rounded
                 class="feather-profile-action"
@@ -1458,16 +1453,16 @@ onMounted(async () => {
               >
                 <Share2 :size="15" />
                 <span>{{ t('shareProfile') }}</span>
-              </kButton>
-              <kButton
+              </SkyButton>
+              <SkyButton
                 rounded
                 class="feather-primary feather-profile-action"
                 @click="openEdit"
               >
                 <PencilLine :size="15" />
                 <span>{{ t('editProfile') }}</span>
-              </kButton>
-              <kButton
+              </SkyButton>
+              <SkyButton
                 rounded
                 outline
                 class="feather-profile-action feather-profile-action--logout"
@@ -1475,36 +1470,36 @@ onMounted(async () => {
               >
                 <LogOut :size="15" />
                 <span>{{ phone.t('Common.signOut') }}</span>
-              </kButton>
+              </SkyButton>
             </div>
           </div>
-        </kGlass>
-        <kSegmented class="feather-profile-tabs">
-          <kSegmentedButton
+        </SkyGlass>
+        <SkySegmented class="feather-profile-tabs">
+          <SkySegmentedButton
             type="button"
             :active="profileView === 'posts'"
             :class="{ 'is-active': profileView === 'posts' }"
             @click="selectProfileView('posts')"
           >
             <AlignLeft :size="16" /> {{ t('posts') }}
-          </kSegmentedButton>
-          <kSegmentedButton
+          </SkySegmentedButton>
+          <SkySegmentedButton
             type="button"
             :active="profileView === 'replies'"
             :class="{ 'is-active': profileView === 'replies' }"
             @click="selectProfileView('replies')"
           >
             <AtSign :size="17" />
-          </kSegmentedButton>
-          <kSegmentedButton
+          </SkySegmentedButton>
+          <SkySegmentedButton
             type="button"
             :active="profileView === 'media'"
             :class="{ 'is-active': profileView === 'media' }"
             @click="selectProfileView('media')"
           >
             <Video :size="17" />
-          </kSegmentedButton>
-          <kSegmentedButton
+          </SkySegmentedButton>
+          <SkySegmentedButton
             v-if="activeProfile.is_owner"
             type="button"
             :active="profileView === 'bookmarks'"
@@ -1514,13 +1509,13 @@ onMounted(async () => {
             @click="selectProfileView('bookmarks')"
           >
             <Bookmark :size="17" />
-          </kSegmentedButton>
-        </kSegmented>
+          </SkySegmentedButton>
+        </SkySegmented>
         <div
           v-if="profileView === 'bookmarks' && feather.bookmarksLoading"
           class="feather-network-loading"
         >
-          <kPreloader />
+          <SkySpinner />
         </div>
         <div
           v-else-if="
@@ -1577,7 +1572,7 @@ onMounted(async () => {
                   <p>{{ person.bio || t('noBio') }}</p>
                 </span>
               </button>
-              <kButton
+              <SkyButton
                 rounded
                 small
                 class="feather-follow-button"
@@ -1588,7 +1583,7 @@ onMounted(async () => {
                 @click="followProfile(person)"
               >
                 {{ person.is_following ? t('following') : t('follow') }}
-              </kButton>
+              </SkyButton>
             </article>
           </div>
         </section>
@@ -1596,23 +1591,23 @@ onMounted(async () => {
 
       <section v-else-if="screen === 'main'" class="feather-main">
         <div v-if="tab === 'home'" class="feather-feed-tabs">
-          <kSegmented class="feather-context-tabs">
-            <kSegmentedButton
+          <SkySegmented class="feather-context-tabs">
+            <SkySegmentedButton
               type="button"
               :active="feather.mode === 'for-you'"
               :class="{ 'is-active': feather.mode === 'for-you' }"
               @click="setFeedMode('for-you')"
-              >{{ t('forYou') }}</kSegmentedButton
+              >{{ t('forYou') }}</SkySegmentedButton
             >
-            <kSegmentedButton
+            <SkySegmentedButton
               type="button"
               :active="feather.mode === 'following'"
               :class="{ 'is-active': feather.mode === 'following' }"
               @click="setFeedMode('following')"
-              >{{ t('following') }}</kSegmentedButton
+              >{{ t('following') }}</SkySegmentedButton
             >
-          </kSegmented>
-          <kButton
+          </SkySegmented>
+          <SkyButton
             rounded
             small
             class="feather-feed-add"
@@ -1620,11 +1615,11 @@ onMounted(async () => {
           >
             <UsersRound :size="15" />
             {{ t('add') }}
-          </kButton>
+          </SkyButton>
         </div>
 
         <div v-if="tab === 'explore'" class="feather-explore-head">
-          <kSearchbar
+          <SkySearchbar
             :value="search"
             class="feather-explore-search"
             :placeholder="t('postSearchPlaceholder')"
@@ -1632,8 +1627,8 @@ onMounted(async () => {
             @input="search = inputValue($event)"
             @keyup.enter="runSearch"
           />
-          <kSegmented class="feather-context-tabs feather-explore-tabs">
-            <kSegmentedButton
+          <SkySegmented class="feather-context-tabs feather-explore-tabs">
+            <SkySegmentedButton
               v-for="category in exploreCategories"
               :key="category"
               type="button"
@@ -1642,33 +1637,33 @@ onMounted(async () => {
               @click="exploreView = category"
             >
               {{ t(`exploreTabs.${category}`) }}
-            </kSegmentedButton>
-          </kSegmented>
+            </SkySegmentedButton>
+          </SkySegmented>
         </div>
 
         <div v-if="tab === 'activity'" class="feather-activity-head">
-          <kSegmented class="feather-context-tabs">
-            <kSegmentedButton
+          <SkySegmented class="feather-context-tabs">
+            <SkySegmentedButton
               type="button"
               :active="activityView === 'all'"
               :class="{ 'is-active': activityView === 'all' }"
               @click="activityView = 'all'"
             >
               {{ t('all') }}
-            </kSegmentedButton>
-            <kSegmentedButton
+            </SkySegmentedButton>
+            <SkySegmentedButton
               type="button"
               :active="activityView === 'mentions'"
               :class="{ 'is-active': activityView === 'mentions' }"
               @click="activityView = 'mentions'"
             >
               {{ t('mentions') }}
-            </kSegmentedButton>
-          </kSegmented>
+            </SkySegmentedButton>
+          </SkySegmented>
         </div>
 
         <div v-if="tab === 'network'" class="feather-scroll feather-network">
-          <kGlass :highlight="false" class="feather-network-glass">
+          <SkyGlass :highlight="false" class="feather-network-glass">
             <header class="feather-network__hero">
               <div>
                 <small>{{ t('network') }}</small>
@@ -1677,8 +1672,8 @@ onMounted(async () => {
               </div>
               <UsersRound :size="35" />
             </header>
-          </kGlass>
-          <kSearchbar
+          </SkyGlass>
+          <SkySearchbar
             :value="networkSearch"
             class="feather-network-search"
             :placeholder="t('networkSearchPlaceholder')"
@@ -1687,7 +1682,7 @@ onMounted(async () => {
             @keyup.enter="runNetworkSearch"
           />
           <div v-if="feather.networkLoading" class="feather-network-loading">
-            <kPreloader />
+            <SkySpinner />
           </div>
           <template v-else>
             <section
@@ -1696,7 +1691,7 @@ onMounted(async () => {
               class="feather-network-section"
             >
               <h2 class="feather-section-title">{{ section.title }}</h2>
-              <kBlock
+              <SkyBlock
                 v-if="!section.profiles.length"
                 strong
                 inset
@@ -1715,9 +1710,9 @@ onMounted(async () => {
                       : t('noSuggestionsBody')
                   }}
                 </p>
-              </kBlock>
-              <kList v-else strong inset class="feather-network-list">
-                <kListItem
+              </SkyBlock>
+              <SkyList v-else strong inset class="feather-network-list">
+                <SkyListItem
                   v-for="person in section.profiles"
                   :key="person.id"
                   class="feather-network-person"
@@ -1780,7 +1775,7 @@ onMounted(async () => {
                     </span>
                   </template>
                   <template #after>
-                    <kButton
+                    <SkyButton
                       rounded
                       small
                       class="feather-follow-button feather-network-person__follow"
@@ -1790,14 +1785,14 @@ onMounted(async () => {
                       }"
                       @click="followProfile(person)"
                     >
-                      <kIcon v-if="!person.is_following"
+                      <SkyIcon v-if="!person.is_following"
                         ><UserPlus :size="13"
-                      /></kIcon>
+                      /></SkyIcon>
                       {{ person.is_following ? t('following') : t('follow') }}
-                    </kButton>
+                    </SkyButton>
                   </template>
-                </kListItem>
-              </kList>
+                </SkyListItem>
+              </SkyList>
             </section>
           </template>
         </div>
@@ -1860,7 +1855,7 @@ onMounted(async () => {
             v-if="tab === 'explore' && feather.exploreLoading"
             class="feather-network-loading"
           >
-            <kPreloader />
+            <SkySpinner />
           </div>
           <div
             v-else-if="!displayedPosts.length && !feather.loading"
@@ -1909,7 +1904,7 @@ onMounted(async () => {
                 <strong>{{ person.display_name }}</strong
                 ><span>@{{ person.handle }}</span>
               </button>
-              <kButton
+              <SkyButton
                 rounded
                 small
                 class="feather-follow-button"
@@ -1919,17 +1914,17 @@ onMounted(async () => {
                 }"
                 @click="followProfile(person)"
               >
-                <kIcon v-if="!person.is_following"
+                <SkyIcon v-if="!person.is_following"
                   ><UserPlus :size="14"
-                /></kIcon>
+                /></SkyIcon>
                 {{ person.is_following ? t('following') : t('follow') }}
-              </kButton>
+              </SkyButton>
             </div>
           </template>
         </div>
       </section>
 
-      <kTabbar
+      <SkyTabBar
         v-if="screen === 'main'"
         component="nav"
         icons
@@ -1938,8 +1933,8 @@ onMounted(async () => {
         inner-class="!w-full !max-w-none !gap-0 !px-1"
         :aria-label="t('name')"
       >
-        <kToolbarPane class="feather-tab-pane">
-          <kTabbarLink
+        <SkyToolbarPane class="feather-tab-pane">
+          <SkyTabButton
             component="button"
             :active="tab === 'home'"
             :link-props="{ class: 'feather-tab-button', type: 'button' }"
@@ -1949,13 +1944,13 @@ onMounted(async () => {
               ><span class="feather-tab-label">{{ t('home') }}</span></template
             >
             <template #icon
-              ><kIcon
+              ><SkyIcon
                 ><Home
                   :size="20"
-                  :fill="tab === 'home' ? 'currentColor' : 'none'" /></kIcon
+                  :fill="tab === 'home' ? 'currentColor' : 'none'" /></SkyIcon
             ></template>
-          </kTabbarLink>
-          <kTabbarLink
+          </SkyTabButton>
+          <SkyTabButton
             component="button"
             :active="tab === 'explore'"
             :link-props="{ class: 'feather-tab-button', type: 'button' }"
@@ -1967,10 +1962,10 @@ onMounted(async () => {
               }}</span></template
             >
             <template #icon
-              ><kIcon><Search :size="20" /></kIcon
+              ><SkyIcon><Search :size="20" /></SkyIcon
             ></template>
-          </kTabbarLink>
-          <kTabbarLink
+          </SkyTabButton>
+          <SkyTabButton
             component="button"
             :active="tab === 'network'"
             :link-props="{ class: 'feather-tab-button', type: 'button' }"
@@ -1982,14 +1977,14 @@ onMounted(async () => {
               }}</span></template
             >
             <template #icon>
-              <kIcon
+              <SkyIcon
                 ><UsersRound
                   :size="20"
                   :fill="tab === 'network' ? 'currentColor' : 'none'"
-              /></kIcon>
+              /></SkyIcon>
             </template>
-          </kTabbarLink>
-          <kTabbarLink
+          </SkyTabButton>
+          <SkyTabButton
             component="button"
             :active="tab === 'activity'"
             :link-props="{ class: 'feather-tab-button', type: 'button' }"
@@ -2002,16 +1997,16 @@ onMounted(async () => {
             >
             <template #icon>
               <span class="feather-tab-icon">
-                <kIcon
+                <SkyIcon
                   ><Bell
                     :size="20"
                     :fill="tab === 'activity' ? 'currentColor' : 'none'"
-                /></kIcon>
+                /></SkyIcon>
                 <b v-if="unreadActivities">{{ unreadActivities }}</b>
               </span>
             </template>
-          </kTabbarLink>
-          <kTabbarLink
+          </SkyTabButton>
+          <SkyTabButton
             component="button"
             :active="tab === 'profile'"
             :link-props="{ class: 'feather-tab-button', type: 'button' }"
@@ -2023,25 +2018,26 @@ onMounted(async () => {
               }}</span></template
             >
             <template #icon
-              ><kIcon
+              ><SkyIcon
                 ><UserRound
                   :size="20"
-                  :fill="tab === 'profile' ? 'currentColor' : 'none'" /></kIcon
+                  :fill="
+                    tab === 'profile' ? 'currentColor' : 'none'
+                  " /></SkyIcon
             ></template>
-          </kTabbarLink>
-        </kToolbarPane>
-      </kTabbar>
-      <kFab
+          </SkyTabButton>
+        </SkyToolbarPane>
+      </SkyTabBar>
+      <SkyFab
         v-if="screen === 'main'"
         component="button"
         type="button"
         class="feather-compose-fab"
-        :colors="composeFabColors"
         :aria-label="t('newPost')"
         @click="openComposer()"
       >
         <template #icon><Plus :size="20" /></template>
-      </kFab>
+      </SkyFab>
     </template>
 
     <AccountLogoutDialog
@@ -2050,64 +2046,64 @@ onMounted(async () => {
       :app-name="t('name')"
     />
 
-    <kSheet :opened="settingsOpen" @backdropclick="settingsOpen = false">
-      <kBlock strong inset class="feather-settings-sheet">
+    <SkySheet :opened="settingsOpen" @backdropclick="settingsOpen = false">
+      <SkyBlock strong inset class="feather-settings-sheet">
         <header>
           <div>
             <span>{{ t('settingsEyebrow') }}</span>
             <h2>{{ t('settings') }}</h2>
           </div>
-          <kButton clear rounded @click="settingsOpen = false">
+          <SkyButton clear rounded @click="settingsOpen = false">
             {{ t('done') }}
-          </kButton>
+          </SkyButton>
         </header>
-        <kList strong inset>
-          <kListItem :title="t('compactMode')" :text="t('compactModeBody')">
+        <SkyList strong inset>
+          <SkyListItem :title="t('compactMode')" :text="t('compactModeBody')">
             <template #after>
-              <kToggle
+              <SkyToggle
                 :checked="compactMode"
                 :aria-label="t('compactMode')"
                 @change="compactMode = !compactMode"
               />
             </template>
-          </kListItem>
-          <kListItem
+          </SkyListItem>
+          <SkyListItem
             :title="t('showSuggestions')"
             :text="t('showSuggestionsBody')"
           >
             <template #after>
-              <kToggle
+              <SkyToggle
                 :checked="showSuggestions"
                 :aria-label="t('showSuggestions')"
                 @change="showSuggestions = !showSuggestions"
               />
             </template>
-          </kListItem>
-        </kList>
-      </kBlock>
-    </kSheet>
+          </SkyListItem>
+        </SkyList>
+      </SkyBlock>
+    </SkySheet>
 
-    <kSheet :opened="menuPost !== null" @backdropclick="menuPost = null">
-      <kBlock strong inset class="feather-action-sheet">
-        <kButton v-if="menuPost?.is_owner" large tonal @click="deletePost"
-          ><Trash2 :size="18" /> {{ t('delete') }}</kButton
+    <SkySheet :opened="menuPost !== null" @backdropclick="menuPost = null">
+      <SkyBlock strong inset class="feather-action-sheet">
+        <SkyButton v-if="menuPost?.is_owner" large tonal @click="deletePost"
+          ><Trash2 :size="18" /> {{ t('delete') }}</SkyButton
         >
         <template v-else>
-          <kButton large tonal @click="reportOpen = true">{{
+          <SkyButton large tonal @click="reportOpen = true">{{
             t('report')
-          }}</kButton>
-          <kButton large tonal @click="blockPostAuthor">{{
+          }}</SkyButton>
+          <SkyButton large tonal @click="blockPostAuthor">{{
             t('block', { handle: menuPost?.handle ?? '' })
-          }}</kButton>
+          }}</SkyButton>
         </template>
-        <kButton large clear @click="menuPost = null">{{
+        <SkyButton large clear @click="menuPost = null">{{
           t('cancel')
-        }}</kButton>
-      </kBlock>
-    </kSheet>
+        }}</SkyButton>
+      </SkyBlock>
+    </SkySheet>
 
-    <kSheet :opened="reportOpen" @backdropclick="reportOpen = false">
-      <kBlock strong inset class="feather-report">
+    <SkySheet :opened="reportOpen" @backdropclick="reportOpen = false">
+      <SkyBlock strong inset class="feather-report">
         <h2>{{ t('reportTitle') }}</h2>
         <p>{{ t('reportBody') }}</p>
         <select v-model="reportReason">
@@ -2130,14 +2126,18 @@ onMounted(async () => {
           maxlength="500"
           :placeholder="t('bioPlaceholder')"
         ></textarea>
-        <kButton large rounded class="feather-primary" @click="submitReport">{{
-          t('reportSubmit')
-        }}</kButton>
-        <kButton large clear @click="reportOpen = false">
+        <SkyButton
+          large
+          rounded
+          class="feather-primary"
+          @click="submitReport"
+          >{{ t('reportSubmit') }}</SkyButton
+        >
+        <SkyButton large clear @click="reportOpen = false">
           {{ t('cancel') }}
-        </kButton>
-      </kBlock>
-    </kSheet>
+        </SkyButton>
+      </SkyBlock>
+    </SkySheet>
 
     <div
       v-if="mediaPreview && previewMedia"
@@ -2153,7 +2153,7 @@ onMounted(async () => {
         @click.stop
       />
       <template v-if="mediaPreview.items.length > 1">
-        <kButton
+        <SkyButton
           clear
           rounded
           class="feather-media-preview__arrow feather-media-preview__arrow--left"
@@ -2161,8 +2161,8 @@ onMounted(async () => {
           @click.stop="moveMediaPreview(-1)"
         >
           <ChevronLeft :size="20" :stroke-width="2.8" />
-        </kButton>
-        <kButton
+        </SkyButton>
+        <SkyButton
           clear
           rounded
           class="feather-media-preview__arrow feather-media-preview__arrow--right"
@@ -2170,15 +2170,15 @@ onMounted(async () => {
           @click.stop="moveMediaPreview(1)"
         >
           <ChevronRight :size="20" :stroke-width="2.8" />
-        </kButton>
+        </SkyButton>
         <span class="feather-media-preview__count">
           {{ mediaPreview.index + 1 }} / {{ mediaPreview.items.length }}
         </span>
       </template>
     </div>
 
-    <kToast :opened="Boolean(feedback)">{{ feedback }}</kToast>
-  </kPage>
+    <SkyToast :opened="Boolean(feedback)">{{ feedback }}</SkyToast>
+  </SkyAppPage>
 </template>
 
 <style scoped>
@@ -2210,8 +2210,8 @@ onMounted(async () => {
   cursor: default;
 }
 .feather-media-preview__arrow {
-  --k-button-bg-color: rgb(10 14 20 / 88%);
-  --k-button-text-color: #fff;
+  --sky-button-bg-color: rgb(10 14 20 / 88%);
+  --sky-button-text-color: #fff;
   position: absolute;
   top: 50%;
   width: 34px !important;
@@ -2253,14 +2253,14 @@ onMounted(async () => {
   color: #f4f7fa;
 }
 .feather-navbar {
-  --k-navbar-bg-color: color-mix(in srgb, #fff 91%, transparent);
-  --k-safe-area-top: 46px;
+  --sky-navbar-glass: color-mix(in srgb, #fff 91%, transparent);
+  --sky-safe-area-top: 46px;
   flex: 0 0 auto;
   border-bottom: 0.5px solid color-mix(in srgb, currentColor 12%, transparent);
   backdrop-filter: blur(18px);
 }
 :global(.dark) .feather-navbar {
-  --k-navbar-bg-color: color-mix(in srgb, #090d12 91%, transparent);
+  --sky-navbar-glass: color-mix(in srgb, #090d12 91%, transparent);
 }
 .feather-explore-search {
   width: auto;
@@ -2270,8 +2270,8 @@ onMounted(async () => {
   min-height: 32px;
 }
 .feather-primary {
-  --k-button-bg-color: var(--feather-blue);
-  --k-button-text-color: #fff;
+  --sky-button-bg-color: var(--feather-blue);
+  --sky-button-text-color: #fff;
 }
 .feather-loading,
 .feather-welcome {
@@ -2371,7 +2371,7 @@ onMounted(async () => {
 .feather-auth__modes {
   margin-bottom: 14px;
 }
-.feather-auth__modes :deep(.k-segmented-button-active) {
+.feather-auth__modes :deep(.sky-segmented-button--active) {
   color: var(--feather-blue);
 }
 .feather-auth__copy {
@@ -2391,7 +2391,7 @@ onMounted(async () => {
 .feather-auth__fields {
   margin: 4px 0 10px;
 }
-.feather-auth__fields :deep(.k-list-item-media) {
+.feather-auth__fields :deep(.sky-list-item__media) {
   color: var(--feather-blue);
 }
 .feather-auth__photo {
@@ -2423,7 +2423,7 @@ onMounted(async () => {
   flex: 1;
   gap: 6px;
 }
-.feather-auth__photo :deep(.k-button) {
+.feather-auth__photo :deep(.sky-button) {
   min-height: 34px;
   justify-content: flex-start;
   gap: 6px;
@@ -2505,8 +2505,8 @@ onMounted(async () => {
   box-shadow: 0 10px 24px rgb(67 140 245 / 24%);
 }
 .feather-onboarding__button:disabled {
-  --k-button-bg-color: rgb(67 140 245 / 13%);
-  --k-button-text-color: #71839a;
+  --sky-button-bg-color: rgb(67 140 245 / 13%);
+  --sky-button-text-color: #71839a;
   color: #71839a !important;
   background: rgb(67 140 245 / 13%) !important;
   opacity: 1;
@@ -2587,10 +2587,10 @@ onMounted(async () => {
 .feather-onboarding__fields {
   margin: 0;
 }
-.feather-onboarding__fields :deep(.k-list-item-media) {
+.feather-onboarding__fields :deep(.sky-list-item__media) {
   color: #72b5ff;
 }
-.feather-onboarding__fields :deep(.k-list-input .text-xs) {
+.feather-onboarding__fields :deep(.sky-field .text-xs) {
   font-size: 12px;
   line-height: 1.35;
 }
@@ -2630,8 +2630,8 @@ onMounted(async () => {
 .feather-profile-tabs {
   background: transparent;
 }
-.feather-context-tabs :deep(.k-button),
-.feather-profile-tabs :deep(.k-button) {
+.feather-context-tabs :deep(.sky-button),
+.feather-profile-tabs :deep(.sky-button) {
   min-height: 41px;
   overflow: visible;
   border-radius: 0;
@@ -2640,13 +2640,13 @@ onMounted(async () => {
   font-size: 12px;
   font-weight: 650;
 }
-.feather-context-tabs :deep(.k-button.is-active),
-.feather-profile-tabs :deep(.k-button.is-active) {
+.feather-context-tabs :deep(.sky-button.is-active),
+.feather-profile-tabs :deep(.sky-button.is-active) {
   color: currentColor;
   font-weight: 750;
 }
-.feather-context-tabs :deep(.k-button.is-active)::after,
-.feather-profile-tabs :deep(.k-button.is-active)::after {
+.feather-context-tabs :deep(.sky-button.is-active)::after,
+.feather-profile-tabs :deep(.sky-button.is-active)::after {
   position: absolute;
   right: 22%;
   bottom: 0;
@@ -2803,7 +2803,7 @@ onMounted(async () => {
   color: #7e8996;
   font-size: 10px;
 }
-.feather-composer__tools :deep(.k-button) {
+.feather-composer__tools :deep(.sky-button) {
   color: var(--feather-blue);
   font-size: 11px;
 }
@@ -2827,7 +2827,7 @@ onMounted(async () => {
   height: 50px;
   padding: 0 14px;
 }
-.feather-profile__top :deep(.k-button) {
+.feather-profile__top :deep(.sky-button) {
   margin-top: 9px;
 }
 .feather-profile__avatar {
@@ -3028,8 +3028,8 @@ onMounted(async () => {
   color: #e7e9ea;
 }
 .dark.feather-app .feather-navbar {
-  --k-navbar-bg-color: color-mix(in srgb, #000 90%, transparent);
-  --k-safe-area-top: 46px;
+  --sky-navbar-glass: color-mix(in srgb, #000 90%, transparent);
+  --sky-safe-area-top: 46px;
   border-bottom-color: var(--feather-border);
   background: color-mix(in srgb, #000 88%, transparent);
   backdrop-filter: blur(18px);
@@ -3068,8 +3068,8 @@ onMounted(async () => {
   min-width: 100%;
   padding: 0;
 }
-.dark.feather-app .feather-context-tabs :deep(.k-button),
-.dark.feather-app .feather-profile-tabs :deep(.k-button) {
+.dark.feather-app .feather-context-tabs :deep(.sky-button),
+.dark.feather-app .feather-profile-tabs :deep(.sky-button) {
   min-height: 46px;
   border-radius: 0;
   color: var(--feather-muted);
@@ -3078,12 +3078,12 @@ onMounted(async () => {
   font-weight: 750;
   white-space: nowrap;
 }
-.dark.feather-app .feather-context-tabs :deep(.k-button.is-active),
-.dark.feather-app .feather-profile-tabs :deep(.k-button.is-active) {
+.dark.feather-app .feather-context-tabs :deep(.sky-button.is-active),
+.dark.feather-app .feather-profile-tabs :deep(.sky-button.is-active) {
   color: #e7e9ea;
 }
-.dark.feather-app .feather-context-tabs :deep(.k-button.is-active)::after,
-.dark.feather-app .feather-profile-tabs :deep(.k-button.is-active)::after {
+.dark.feather-app .feather-context-tabs :deep(.sky-button.is-active)::after,
+.dark.feather-app .feather-profile-tabs :deep(.sky-button.is-active)::after {
   right: 20%;
   left: 20%;
   height: 3px;
@@ -3096,7 +3096,7 @@ onMounted(async () => {
   overflow-y: hidden !important;
   scrollbar-width: none;
 }
-.dark.feather-app .feather-explore-tabs :deep(.k-button) {
+.dark.feather-app .feather-explore-tabs :deep(.sky-button) {
   width: auto !important;
   min-width: 92px;
   flex: 0 0 auto !important;
@@ -3172,9 +3172,9 @@ onMounted(async () => {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
-.dark.feather-app .feather-person > :deep(.k-button) {
-  --k-button-bg-color: #eff3f4;
-  --k-button-text-color: #0f1419;
+.dark.feather-app .feather-person > :deep(.sky-button) {
+  --sky-button-bg-color: #eff3f4;
+  --sky-button-text-color: #0f1419;
   min-width: 66px;
   font-weight: 800;
 }
@@ -3281,14 +3281,14 @@ onMounted(async () => {
   gap: 8px;
   padding: 0 14px 16px;
 }
-.dark.feather-app .feather-profile__actions :deep(.k-button) {
+.dark.feather-app .feather-profile__actions :deep(.sky-button) {
   min-height: 39px;
   border-color: #536471;
   color: #e7e9ea;
   font-size: 13px;
   font-weight: 800;
 }
-.dark.feather-app .feather-profile-tabs :deep(.k-button) {
+.dark.feather-app .feather-profile-tabs :deep(.sky-button) {
   min-width: 62px;
   gap: 5px;
 }
@@ -3354,13 +3354,13 @@ onMounted(async () => {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
-.dark.feather-app .feather-profile-suggestion > :deep(.k-button) {
+.dark.feather-app .feather-profile-suggestion > :deep(.sky-button) {
   position: absolute;
   right: 10px;
   bottom: 74px;
   z-index: 2;
-  --k-button-bg-color: #eff3f4;
-  --k-button-text-color: #0f1419;
+  --sky-button-bg-color: #eff3f4;
+  --sky-button-text-color: #0f1419;
   min-width: 67px;
   font-weight: 800;
 }
@@ -3387,8 +3387,8 @@ onMounted(async () => {
   margin: 1px 0 0;
   font-size: 21px;
 }
-.dark.feather-app .feather-settings-sheet :deep(.k-list),
-.dark.feather-app .feather-settings-sheet :deep(.k-list-item) {
+.dark.feather-app .feather-settings-sheet :deep(.sky-list),
+.dark.feather-app .feather-settings-sheet :deep(.sky-list-item) {
   color: #e7e9ea;
   background: #16181c;
 }
@@ -3429,8 +3429,8 @@ onMounted(async () => {
   font: inherit;
 }
 .feather-app--active .feather-navbar {
-  --k-navbar-bg-color: color-mix(in srgb, #12171b 91%, transparent);
-  --k-safe-area-top: 46px;
+  --sky-navbar-glass: color-mix(in srgb, #12171b 91%, transparent);
+  --sky-safe-area-top: 46px;
   position: absolute;
   z-index: 8;
   top: 0;
@@ -3442,7 +3442,7 @@ onMounted(async () => {
   backdrop-filter: blur(18px);
 }
 .feather-app--active.feather-app--light .feather-navbar {
-  --k-navbar-bg-color: color-mix(in srgb, #fbfbf6 91%, transparent);
+  --sky-navbar-glass: color-mix(in srgb, #fbfbf6 91%, transparent);
   background: color-mix(in srgb, #fbfbf6 88%, transparent);
 }
 .feather-app--active.feather-app--section .feather-navbar {
@@ -3552,8 +3552,8 @@ onMounted(async () => {
   flex: 1;
 }
 .feather-app--active .feather-feed-add {
-  --k-button-bg-color: var(--feather-blue-dark);
-  --k-button-text-color: #fff;
+  --sky-button-bg-color: var(--feather-blue-dark);
+  --sky-button-text-color: #fff;
   width: 76px !important;
   min-width: 76px;
   min-height: 34px;
@@ -3595,8 +3595,8 @@ onMounted(async () => {
   padding: 0;
   background: transparent;
 }
-.feather-app--active .feather-context-tabs :deep(.k-button),
-.feather-app--active .feather-profile-tabs :deep(.k-button) {
+.feather-app--active .feather-context-tabs :deep(.sky-button),
+.feather-app--active .feather-profile-tabs :deep(.sky-button) {
   min-height: 34px;
   overflow: hidden;
   border-radius: 9px;
@@ -3606,21 +3606,21 @@ onMounted(async () => {
   font-weight: 750;
   white-space: nowrap;
 }
-.feather-app--active .feather-context-tabs :deep(.k-button.is-active),
-.feather-app--active .feather-profile-tabs :deep(.k-button.is-active) {
+.feather-app--active .feather-context-tabs :deep(.sky-button.is-active),
+.feather-app--active .feather-profile-tabs :deep(.sky-button.is-active) {
   color: #fff;
   background: var(--feather-blue-dark);
 }
 .feather-app--active.feather-app--light
   .feather-context-tabs
-  :deep(.k-button.is-active),
+  :deep(.sky-button.is-active),
 .feather-app--active.feather-app--light
   .feather-profile-tabs
-  :deep(.k-button.is-active) {
+  :deep(.sky-button.is-active) {
   color: #fff;
 }
-.feather-app--active .feather-context-tabs :deep(.k-button.is-active)::after,
-.feather-app--active .feather-profile-tabs :deep(.k-button.is-active)::after {
+.feather-app--active .feather-context-tabs :deep(.sky-button.is-active)::after,
+.feather-app--active .feather-profile-tabs :deep(.sky-button.is-active)::after {
   display: none;
 }
 .feather-app--active .feather-feed-tabs {
@@ -3636,7 +3636,10 @@ onMounted(async () => {
   overflow: visible;
   background: transparent;
 }
-.feather-app--active .feather-feed-tabs .feather-context-tabs :deep(.k-button) {
+.feather-app--active
+  .feather-feed-tabs
+  .feather-context-tabs
+  :deep(.sky-button) {
   position: relative;
   min-height: 42px;
   overflow: visible;
@@ -3648,14 +3651,14 @@ onMounted(async () => {
 .feather-app--active
   .feather-feed-tabs
   .feather-context-tabs
-  :deep(.k-button.is-active) {
+  :deep(.sky-button.is-active) {
   color: inherit;
   background: transparent !important;
 }
 .feather-app--active
   .feather-feed-tabs
   .feather-context-tabs
-  :deep(.k-button.is-active)::after {
+  :deep(.sky-button.is-active)::after {
   position: absolute;
   right: 24%;
   bottom: -1px;
@@ -3688,7 +3691,7 @@ onMounted(async () => {
   gap: 4px;
   overflow: hidden !important;
 }
-.feather-app--active .feather-explore-tabs :deep(.k-button) {
+.feather-app--active .feather-explore-tabs :deep(.sky-button) {
   width: 0 !important;
   min-width: 0;
   flex: 1 1 0 !important;
@@ -3720,8 +3723,8 @@ onMounted(async () => {
   color: var(--feather-muted);
 }
 .feather-app--active :deep(.feather-follow) {
-  --k-button-bg-color: transparent;
-  --k-button-text-color: var(--feather-blue);
+  --sky-button-bg-color: transparent;
+  --sky-button-text-color: var(--feather-blue);
 }
 .feather-app--active .feather-trend,
 .feather-app--active .feather-person,
@@ -3966,7 +3969,7 @@ onMounted(async () => {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
-.feather-app--active .feather-person > :deep(.k-button) {
+.feather-app--active .feather-person > :deep(.sky-button) {
   min-width: 72px;
   font-size: 10.5px;
   font-weight: 800;
@@ -3984,18 +3987,18 @@ onMounted(async () => {
     box-shadow 160ms ease,
     background-color 160ms ease;
 }
-.feather-app--active .feather-follow-button :deep(.k-icon) {
+.feather-app--active .feather-follow-button :deep(.sky-icon) {
   margin-right: 4px;
 }
 .feather-app--active .feather-follow-button--pending {
-  --k-button-bg-color: var(--feather-blue) !important;
-  --k-button-text-color: #fff !important;
+  --sky-button-bg-color: var(--feather-blue) !important;
+  --sky-button-text-color: #fff !important;
   border-color: color-mix(in srgb, var(--feather-blue) 76%, #fff);
   box-shadow: 0 4px 12px rgb(29 155 240 / 24%);
 }
 .feather-app--active .feather-follow-button--following {
-  --k-button-bg-color: transparent !important;
-  --k-button-text-color: currentColor !important;
+  --sky-button-bg-color: transparent !important;
+  --sky-button-text-color: currentColor !important;
   border-color: color-mix(in srgb, currentColor 22%, transparent);
   box-shadow: none;
 }
@@ -4074,7 +4077,7 @@ onMounted(async () => {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
-.feather-thread-reply__comment-target :deep(.k-button) {
+.feather-thread-reply__comment-target :deep(.sky-button) {
   width: 25px;
   min-width: 25px;
   height: 25px;
@@ -4111,7 +4114,7 @@ onMounted(async () => {
   color: var(--feather-muted);
   font-size: 9px;
 }
-.feather-thread-reply footer :deep(.k-button) {
+.feather-thread-reply footer :deep(.sky-button) {
   min-width: 62px;
   min-height: 29px;
   font-size: 10.5px;
@@ -4188,6 +4191,7 @@ onMounted(async () => {
   place-items: center;
 }
 .feather-compose-fab {
+  --sky-app-accent: #58a6ff;
   position: absolute;
   z-index: 12;
   right: 14px;
@@ -4321,7 +4325,7 @@ onMounted(async () => {
   gap: 7px;
   padding: 0 13px 13px;
 }
-.feather-app--active .feather-profile__actions :deep(.k-button) {
+.feather-app--active .feather-profile__actions :deep(.sky-button) {
   width: 100%;
   min-width: 0;
   min-height: 36px;
@@ -4436,7 +4440,7 @@ onMounted(async () => {
 }
 .feather-app.feather-app--active
   .feather-profile-suggestion
-  > :deep(.k-button) {
+  > :deep(.sky-button) {
   position: absolute;
   top: 10px;
   right: 9px;
@@ -4468,6 +4472,7 @@ onMounted(async () => {
   place-items: center;
   border: 1px solid var(--feather-border);
   border-radius: 50%;
+  color: #fff;
   color: inherit;
   background: var(--feather-panel);
 }
@@ -4792,7 +4797,7 @@ onMounted(async () => {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
 }
-.feather-edit__photo-actions :deep(.k-button) {
+.feather-edit__photo-actions :deep(.sky-button) {
   min-width: 0;
   min-height: 35px;
   gap: 6px;
@@ -4809,7 +4814,7 @@ onMounted(async () => {
   background: color-mix(in srgb, var(--feather-panel) 96%, transparent);
   box-shadow: 0 10px 28px rgb(0 0 0 / 7%);
 }
-.feather-edit__fields :deep(.k-list-item-media) {
+.feather-edit__fields :deep(.sky-list-item__media) {
   align-self: flex-start;
   margin-top: 20px;
   color: var(--feather-blue);
@@ -4823,7 +4828,7 @@ onMounted(async () => {
   min-height: 128px;
   resize: none;
 }
-.feather-edit__fields :deep(.k-list-input-info) {
+.feather-edit__fields :deep(.sky-field__info) {
   color: var(--feather-muted);
   font-size: 9px;
 }
@@ -4880,10 +4885,10 @@ onMounted(async () => {
   border-radius: 18px;
   background: color-mix(in srgb, var(--feather-panel) 96%, transparent);
 }
-.feather-connections__list :deep(.k-list-item-content) {
+.feather-connections__list :deep(.sky-list-item__content) {
   min-height: 62px;
 }
-.feather-connections__list :deep(.k-list-item-title) {
+.feather-connections__list :deep(.sky-list-item__title) {
   max-width: 108px;
   overflow: hidden;
   font-size: 12px;
@@ -4891,7 +4896,7 @@ onMounted(async () => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.feather-connections__list :deep(.k-list-item-text) {
+.feather-connections__list :deep(.sky-list-item__text) {
   max-width: 108px;
   overflow: hidden;
   color: var(--feather-muted);
@@ -4925,22 +4930,22 @@ onMounted(async () => {
 }
 @supports not (color: color-mix(in srgb, white, black)) {
   .feather-navbar {
-    --k-navbar-bg-color: rgb(255 255 255 / 91%);
+    --sky-navbar-glass: rgb(255 255 255 / 91%);
     border-bottom-color: rgb(127 127 127 / 18%);
   }
   :global(.dark) .feather-navbar {
-    --k-navbar-bg-color: rgb(9 13 18 / 91%);
+    --sky-navbar-glass: rgb(9 13 18 / 91%);
   }
   .dark.feather-app .feather-navbar {
-    --k-navbar-bg-color: rgb(0 0 0 / 90%);
+    --sky-navbar-glass: rgb(0 0 0 / 90%);
     background: rgb(0 0 0 / 88%);
   }
   .feather-app--active .feather-navbar {
-    --k-navbar-bg-color: rgb(18 23 27 / 91%);
+    --sky-navbar-glass: rgb(18 23 27 / 91%);
     background: rgb(18 23 27 / 88%);
   }
   .feather-app--active.feather-app--light .feather-navbar {
-    --k-navbar-bg-color: rgb(251 251 246 / 91%);
+    --sky-navbar-glass: rgb(251 251 246 / 91%);
     background: rgb(251 251 246 / 88%);
   }
   .feather-feed-tabs,
@@ -4994,8 +4999,8 @@ onMounted(async () => {
   }
   .feather-network-person__avatar .feather-avatar,
   .feather-app--active .feather-follow-button--pending,
-  .feather-app--active .feather-profile__actions :deep(.k-button),
-  .feather-edit__photo-actions :deep(.k-button) {
+  .feather-app--active .feather-profile__actions :deep(.sky-button),
+  .feather-edit__photo-actions :deep(.sky-button) {
     border-color: var(--feather-blue);
   }
   .feather-compose-fab,
diff --git a/frontend/src/views/apps/FlareApp.vue b/frontend/src/views/apps/FlareApp.vue
index b3c6abc..032f467 100644
--- a/frontend/src/views/apps/FlareApp.vue
+++ b/frontend/src/views/apps/FlareApp.vue
@@ -1,31 +1,31 @@
 <script setup lang="ts">
 import {
-  kBadge,
-  kBlock,
-  kBlockTitle,
-  kButton,
-  kCard,
-  kDialog,
-  kDialogButton,
-  kIcon,
-  kLink,
-  kList,
-  kListInput,
-  kListItem,
-  kMessage,
-  kMessagebar,
-  kMessages,
-  kNavbar,
-  kNavbarBackLink,
-  kPage,
-  kPreloader,
-  kSheet,
-  kTabbar,
-  kTabbarLink,
-  kToolbarPane,
-  kToast,
-  kToggle,
-} from 'konsta/vue'
+  SkyBadge,
+  SkyBlock,
+  SkyBlockTitle,
+  SkyButton,
+  SkyCard,
+  SkyDialog,
+  SkyDialogButton,
+  SkyIcon,
+  SkyLink,
+  SkyList,
+  SkyField,
+  SkyListItem,
+  SkyMessage,
+  SkyMessagebar,
+  SkyMessages,
+  SkyNavbar,
+  SkyNavbarBackLink,
+  SkyAppPage,
+  SkySpinner,
+  SkySheet,
+  SkyTabBar,
+  SkyTabButton,
+  SkyToolbarPane,
+  SkyToast,
+  SkyToggle,
+} from '@/ui'
 import {
   ArrowUpCircle,
   Camera,
@@ -625,7 +625,8 @@ async function openRevealedMatch(): Promise<void> {
 
 async function sendMessage(): Promise<void> {
   const body = draft.value.trim()
-  if ((!body && !shareDraft.value) || !activeMatch.value || flare.sending) return
+  if ((!body && !shareDraft.value) || !activeMatch.value || flare.sending)
+    return
   const shared = shareDraft.value
   draft.value = ''
   shareDraft.value = null
@@ -849,7 +850,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <k-page
+  <sky-app-page
     component="main"
     class="native-app flare-page"
     :class="{
@@ -861,7 +862,7 @@ onBeforeUnmount(() => {
   >
     <div v-if="flare.loading" class="flare-loading">
       <span class="flare-mark"><Flame fill="currentColor" /></span>
-      <k-preloader />
+      <sky-spinner />
     </div>
 
     <section
@@ -874,7 +875,7 @@ onBeforeUnmount(() => {
     </section>
 
     <template v-else-if="!flare.profile">
-      <k-navbar
+      <sky-navbar
         :title="phone.t('Apps.flare.createProfile')"
         class="flare-navbar top-0 sticky"
       />
@@ -886,7 +887,7 @@ onBeforeUnmount(() => {
             <p>{{ phone.t('Apps.flare.welcomeBody') }}</p>
           </div>
         </div>
-        <k-card :content-wrap="false" class="flare-photo-editor">
+        <sky-card :content-wrap="false" class="flare-photo-editor">
           <header>
             <div>
               <strong>{{ phone.t('Apps.flare.profilePhotos') }}</strong>
@@ -904,7 +905,7 @@ onBeforeUnmount(() => {
               <span v-if="index === 0" class="flare-photo-primary">
                 {{ phone.t('Apps.flare.primaryPhoto') }}
               </span>
-              <k-link
+              <sky-link
                 component="button"
                 icon-only
                 class="flare-photo-remove"
@@ -916,9 +917,9 @@ onBeforeUnmount(() => {
                 @click="removeDraftPhoto(photo.id)"
               >
                 <X />
-              </k-link>
+              </sky-link>
             </div>
-            <k-button
+            <sky-button
               v-if="draftPhotos.length < 6"
               clear
               class="flare-photo-add"
@@ -927,17 +928,17 @@ onBeforeUnmount(() => {
             >
               <Images />
               <span>{{ phone.t('Apps.flare.choosePhotos') }}</span>
-            </k-button>
+            </sky-button>
           </div>
-        </k-card>
-        <k-list inset strong>
-          <k-list-input
+        </sky-card>
+        <sky-list inset strong>
+          <sky-field
             :label="phone.t('Apps.flare.yourName')"
             :value="profileDraft.name"
             :placeholder="phone.t('Apps.flare.namePlaceholder')"
             @input="profileDraft.name = eventValue($event)"
           />
-          <k-list-input
+          <sky-field
             :label="phone.t('Apps.flare.age')"
             type="number"
             min="18"
@@ -945,7 +946,7 @@ onBeforeUnmount(() => {
             :value="profileDraft.age"
             @input="updateNumber('age', $event)"
           />
-          <k-list-input
+          <sky-field
             :label="phone.t('Apps.flare.bio')"
             type="textarea"
             :value="profileDraft.bio"
@@ -954,7 +955,7 @@ onBeforeUnmount(() => {
             :maxlength="300"
             @input="profileDraft.bio = eventValue($event)"
           />
-          <k-list-item
+          <sky-list-item
             class="flare-choice-row"
             :header="phone.t('Apps.flare.gender')"
             :title="choiceLabel('gender')"
@@ -962,7 +963,7 @@ onBeforeUnmount(() => {
             link-component="button"
             :link-props="choiceLinkProps('gender')"
           />
-          <k-list-item
+          <sky-list-item
             class="flare-choice-row"
             :header="phone.t('Apps.flare.showMe')"
             :title="choiceLabel('interestedIn')"
@@ -970,7 +971,7 @@ onBeforeUnmount(() => {
             link-component="button"
             :link-props="choiceLinkProps('interestedIn')"
           />
-          <k-list-item
+          <sky-list-item
             class="flare-choice-row"
             :header="phone.t('Apps.flare.relationshipGoal')"
             :title="choiceLabel('lookingFor')"
@@ -978,21 +979,21 @@ onBeforeUnmount(() => {
             link-component="button"
             :link-props="choiceLinkProps('lookingFor')"
           />
-          <k-list-input
+          <sky-field
             :label="phone.t('Apps.flare.interests')"
             :value="profileDraft.interests.join(', ')"
             :placeholder="phone.t('Apps.flare.interestsPlaceholder')"
             @input="updateInterests"
           />
-        </k-list>
+        </sky-list>
         <p class="flare-form-hint">
           {{ phone.t('Apps.flare.interestsHint') }}
         </p>
         <p v-if="flare.error" class="flare-error">
           {{ phone.t(`Apps.flare.errors.${flare.error}`) }}
         </p>
-        <k-block class="flare-profile-form__actions">
-          <k-button
+        <sky-block class="flare-profile-form__actions">
+          <sky-button
             large
             rounded
             :disabled="profileSaving"
@@ -1000,15 +1001,15 @@ onBeforeUnmount(() => {
             @click="saveProfile"
           >
             {{ phone.t('Apps.flare.start') }}
-          </k-button>
-        </k-block>
+          </sky-button>
+        </sky-block>
       </section>
     </template>
 
     <template v-else-if="activeMatch">
-      <k-navbar class="flare-navbar top-0 sticky">
+      <sky-navbar class="flare-navbar top-0 sticky">
         <template #left>
-          <k-navbar-back-link
+          <sky-navbar-back-link
             :text="phone.t('Common.back')"
             @click="closeMatch"
           />
@@ -1020,19 +1021,19 @@ onBeforeUnmount(() => {
           </span>
         </template>
         <template #right>
-          <k-link
+          <sky-link
             component="button"
             icon-only
             :aria-label="phone.t('Apps.flare.matchActions')"
             @click="unmatchDialog = true"
           >
             <Ellipsis />
-          </k-link>
+          </sky-link>
         </template>
-      </k-navbar>
+      </sky-navbar>
       <div ref="messageScroll" class="flare-chat-scroll">
-        <k-messages>
-          <k-message
+        <sky-messages>
+          <sky-message
             v-for="message in flare.messages"
             :key="message.id"
             :type="message.direction"
@@ -1045,10 +1046,13 @@ onBeforeUnmount(() => {
                 :payload="message.sharePayload"
                 variant="flare"
               />
-              <MessageAttachmentBubble v-else :message="attachmentMessage(message)" />
+              <MessageAttachmentBubble
+                v-else
+                :message="attachmentMessage(message)"
+              />
             </template>
-          </k-message>
-        </k-messages>
+          </sky-message>
+        </sky-messages>
       </div>
 
       <section v-if="attachmentMenuOpen" class="messages-attachment-menu">
@@ -1123,7 +1127,7 @@ onBeforeUnmount(() => {
               {{ phone.t('Apps.flare.retryGifs') }}
             </button>
           </div>
-          <k-preloader v-if="gifLoading" class="messages-gif-loading" />
+          <sky-spinner v-if="gifLoading" class="messages-gif-loading" />
         </div>
       </section>
 
@@ -1135,12 +1139,16 @@ onBeforeUnmount(() => {
 
       <div v-if="shareDraft" class="shared-composer-preview">
         <SharedContentCard compact :payload="shareDraft" variant="flare" />
-        <button type="button" :aria-label="phone.t('Common.close')" @click="shareDraft = null">
+        <button
+          type="button"
+          :aria-label="phone.t('Common.close')"
+          @click="shareDraft = null"
+        >
           <X :size="15" />
         </button>
       </div>
 
-      <k-messagebar
+      <sky-messagebar
         class="flare-messagebar messages-messagebar"
         :placeholder="phone.t('Apps.flare.messagePlaceholder')"
         :value="draft"
@@ -1149,8 +1157,8 @@ onBeforeUnmount(() => {
         @keydown.enter.exact="handleEnterAction($event, sendMessage)"
       >
         <template #left>
-          <k-toolbar-pane class="ios:h-10 messages-messagebar__tools">
-            <k-link
+          <sky-toolbar-pane class="ios:h-10 messages-messagebar__tools">
+            <sky-link
               component="button"
               icon-only
               :aria-label="phone.t('Apps.flare.moreActions')"
@@ -1160,26 +1168,26 @@ onBeforeUnmount(() => {
               @click="toggleAttachmentMenu"
             >
               <Plus :size="25" />
-            </k-link>
-          </k-toolbar-pane>
+            </sky-link>
+          </sky-toolbar-pane>
         </template>
         <template #right>
-          <k-toolbar-pane>
-            <k-link
+          <sky-toolbar-pane>
+            <sky-link
               component="button"
               icon-only
               :disabled="(!draft.trim() && !shareDraft) || flare.sending"
               @click="sendMessage"
             >
               <ArrowUpCircle :size="29" />
-            </k-link>
-          </k-toolbar-pane>
+            </sky-link>
+          </sky-toolbar-pane>
         </template>
-      </k-messagebar>
+      </sky-messagebar>
     </template>
 
     <template v-else>
-      <k-navbar
+      <sky-navbar
         :key="
           profileEditing
             ? 'profile-edit'
@@ -1193,7 +1201,7 @@ onBeforeUnmount(() => {
           v-if="activeTab === 'profile' && (profileEditing || profileSettings)"
           #left
         >
-          <k-navbar-back-link
+          <sky-navbar-back-link
             :text="phone.t('Common.back')"
             @click="closeProfileScreen"
           />
@@ -1213,7 +1221,7 @@ onBeforeUnmount(() => {
           </strong>
         </template>
         <template #right>
-          <k-link
+          <sky-link
             v-if="
               activeTab === 'profile' && (profileEditing || profileSettings)
             "
@@ -1224,8 +1232,8 @@ onBeforeUnmount(() => {
             @click="saveProfile"
           >
             {{ phone.t('Common.done') }}
-          </k-link>
-          <k-link
+          </sky-link>
+          <sky-link
             v-else-if="activeTab === 'discover'"
             component="button"
             icon-only
@@ -1233,9 +1241,9 @@ onBeforeUnmount(() => {
             @click="openSettings"
           >
             <SlidersHorizontal />
-          </k-link>
+          </sky-link>
         </template>
-      </k-navbar>
+      </sky-navbar>
 
       <section v-if="activeTab === 'discover'" class="flare-discover">
         <div
@@ -1245,9 +1253,9 @@ onBeforeUnmount(() => {
           <span class="flare-state__icon"><EyeOff /></span>
           <h2>{{ phone.t('Apps.flare.discoveryOffTitle') }}</h2>
           <p>{{ phone.t('Apps.flare.discoveryOffBody') }}</p>
-          <k-button rounded @click="setDiscovery(true)">
+          <sky-button rounded @click="setDiscovery(true)">
             {{ phone.t('Apps.flare.enableDiscovery') }}
-          </k-button>
+          </sky-button>
         </div>
         <div v-else-if="currentProfile" class="flare-deck">
           <article
@@ -1340,51 +1348,51 @@ onBeforeUnmount(() => {
           <span class="flare-state__icon"><RotateCcw /></span>
           <h2>{{ phone.t('Apps.flare.noProfiles') }}</h2>
           <p>{{ phone.t('Apps.flare.noProfilesBody') }}</p>
-          <k-button
+          <sky-button
             v-if="activeExploreMode !== 'all'"
             clear
             rounded
             @click="clearExplore"
           >
             {{ phone.t('Apps.flare.clearExploreFilter') }}
-          </k-button>
+          </sky-button>
         </div>
         <div
           v-if="flare.profile.discoverable && currentProfile"
           class="flare-actions"
         >
-          <k-button
+          <sky-button
             rounded
             class="flare-action flare-action--small flare-action--rewind"
             :aria-label="phone.t('Apps.flare.rewind')"
             @click="rewind"
           >
             <RotateCcw />
-          </k-button>
-          <k-button
+          </sky-button>
+          <sky-button
             rounded
             class="flare-action flare-action--pass"
             :aria-label="phone.t('Apps.flare.pass')"
             @click="swipe('pass')"
           >
             <X />
-          </k-button>
-          <k-button
+          </sky-button>
+          <sky-button
             rounded
             class="flare-action flare-action--small flare-action--super"
             :aria-label="phone.t('Apps.flare.superLike')"
             @click="swipe('superlike')"
           >
             <Star fill="currentColor" />
-          </k-button>
-          <k-button
+          </sky-button>
+          <sky-button
             rounded
             class="flare-action flare-action--like"
             :aria-label="phone.t('Apps.flare.like')"
             @click="swipe('like')"
           >
             <Heart fill="currentColor" />
-          </k-button>
+          </sky-button>
         </div>
       </section>
 
@@ -1396,7 +1404,7 @@ onBeforeUnmount(() => {
           <p>{{ phone.t('Apps.flare.exploreBody') }}</p>
         </div>
         <div class="flare-explore-grid">
-          <k-card
+          <sky-card
             v-for="tile in exploreTiles"
             :key="tile.key"
             :content-wrap="false"
@@ -1413,7 +1421,7 @@ onBeforeUnmount(() => {
               phone.t(`Apps.flare.exploreModes.${tile.key}`)
             }}</strong>
             <ChevronRight />
-          </k-card>
+          </sky-card>
         </div>
       </section>
 
@@ -1436,20 +1444,20 @@ onBeforeUnmount(() => {
               <small v-else>{{ phone.t('Apps.flare.likedYou') }}</small>
             </span>
             <div class="flare-like-actions">
-              <k-button
+              <sky-button
                 rounded
                 :aria-label="phone.t('Apps.flare.pass')"
                 @click="reactToLike(profile.id, 'pass')"
               >
                 <X />
-              </k-button>
-              <k-button
+              </sky-button>
+              <sky-button
                 rounded
                 :aria-label="phone.t('Apps.flare.like')"
                 @click="reactToLike(profile.id, 'like')"
               >
                 <Heart fill="currentColor" />
-              </k-button>
+              </sky-button>
             </div>
           </article>
         </div>
@@ -1482,8 +1490,8 @@ onBeforeUnmount(() => {
             </button>
           </div>
           <h2>{{ phone.t('Apps.flare.messages') }}</h2>
-          <k-list strong class="flare-conversation-list">
-            <k-list-item
+          <sky-list strong class="flare-conversation-list">
+            <sky-list-item
               v-for="match in flare.matches"
               :key="match.id"
               link
@@ -1502,8 +1510,8 @@ onBeforeUnmount(() => {
                   match.unread
                 }}</span>
               </template>
-            </k-list-item>
-          </k-list>
+            </sky-list-item>
+          </sky-list>
         </template>
         <div v-else class="flare-state flare-state--compact">
           <span class="flare-state__icon"><MessageCircle /></span>
@@ -1516,33 +1524,33 @@ onBeforeUnmount(() => {
         v-else-if="profileSettings"
         class="flare-scroll-view flare-settings"
       >
-        <k-block-title>{{
+        <sky-block-title>{{
           phone.t('Apps.flare.discoverySettings')
-        }}</k-block-title>
-        <k-list inset strong>
-          <k-list-item
+        }}</sky-block-title>
+        <sky-list inset strong>
+          <sky-list-item
             :title="phone.t('Apps.flare.showProfile')"
             :subtitle="phone.t('Apps.flare.showProfileBody')"
           >
             <template #after>
-              <k-toggle
+              <sky-toggle
                 :checked="flare.profile.discoverable"
                 :disabled="discoverySaving"
                 :aria-label="phone.t('Apps.flare.showProfile')"
                 @change="setDiscovery(!flare.profile.discoverable)"
               />
             </template>
-          </k-list-item>
-        </k-list>
-        <k-block class="flare-settings-note">
+          </sky-list-item>
+        </sky-list>
+        <sky-block class="flare-settings-note">
           {{ phone.t('Apps.flare.discoveryPrivacyNote') }}
-        </k-block>
+        </sky-block>
 
-        <k-block-title>{{
+        <sky-block-title>{{
           phone.t('Apps.flare.discoveryPreferences')
-        }}</k-block-title>
-        <k-list inset strong>
-          <k-list-item
+        }}</sky-block-title>
+        <sky-list inset strong>
+          <sky-list-item
             class="flare-choice-row"
             :header="phone.t('Apps.flare.showMe')"
             :title="choiceLabel('interestedIn')"
@@ -1550,7 +1558,7 @@ onBeforeUnmount(() => {
             link-component="button"
             :link-props="choiceLinkProps('interestedIn')"
           />
-          <k-list-input
+          <sky-field
             :label="phone.t('Apps.flare.minimumAge')"
             type="number"
             min="18"
@@ -1558,7 +1566,7 @@ onBeforeUnmount(() => {
             :value="profileDraft.minAge"
             @input="updateNumber('minAge', $event)"
           />
-          <k-list-input
+          <sky-field
             :label="phone.t('Apps.flare.maximumAge')"
             type="number"
             min="18"
@@ -1566,7 +1574,7 @@ onBeforeUnmount(() => {
             :value="profileDraft.maxAge"
             @input="updateNumber('maxAge', $event)"
           />
-        </k-list>
+        </sky-list>
         <p v-if="flare.error" class="flare-error">
           {{ phone.t(`Apps.flare.errors.${flare.error}`) }}
         </p>
@@ -1609,7 +1617,7 @@ onBeforeUnmount(() => {
             {{ phone.t('Apps.easyShare.shareProfile') }}
           </button>
         </div>
-        <k-card :content-wrap="false" class="flare-profile-card">
+        <sky-card :content-wrap="false" class="flare-profile-card">
           <span><Heart fill="currentColor" /></span>
           <div>
             <strong>{{
@@ -1618,11 +1626,11 @@ onBeforeUnmount(() => {
             <small>{{ phone.t('Apps.flare.profileGoalBody') }}</small>
           </div>
           <ChevronRight />
-        </k-card>
+        </sky-card>
       </section>
 
       <section v-else class="flare-profile-form flare-profile-form--editing">
-        <k-card :content-wrap="false" class="flare-photo-editor">
+        <sky-card :content-wrap="false" class="flare-photo-editor">
           <header>
             <div>
               <strong>{{ phone.t('Apps.flare.profilePhotos') }}</strong>
@@ -1640,7 +1648,7 @@ onBeforeUnmount(() => {
               <span v-if="index === 0" class="flare-photo-primary">
                 {{ phone.t('Apps.flare.primaryPhoto') }}
               </span>
-              <k-link
+              <sky-link
                 component="button"
                 icon-only
                 class="flare-photo-remove"
@@ -1652,9 +1660,9 @@ onBeforeUnmount(() => {
                 @click="removeDraftPhoto(photo.id)"
               >
                 <X />
-              </k-link>
+              </sky-link>
             </div>
-            <k-button
+            <sky-button
               v-if="draftPhotos.length < 6"
               clear
               class="flare-photo-add"
@@ -1663,16 +1671,16 @@ onBeforeUnmount(() => {
             >
               <Images />
               <span>{{ phone.t('Apps.flare.choosePhotos') }}</span>
-            </k-button>
+            </sky-button>
           </div>
-        </k-card>
-        <k-list inset strong>
-          <k-list-input
+        </sky-card>
+        <sky-list inset strong>
+          <sky-field
             :label="phone.t('Apps.flare.yourName')"
             :value="profileDraft.name"
             @input="profileDraft.name = eventValue($event)"
           />
-          <k-list-input
+          <sky-field
             :label="phone.t('Apps.flare.age')"
             type="number"
             min="18"
@@ -1680,7 +1688,7 @@ onBeforeUnmount(() => {
             :value="profileDraft.age"
             @input="updateNumber('age', $event)"
           />
-          <k-list-input
+          <sky-field
             :label="phone.t('Apps.flare.bio')"
             type="textarea"
             :value="profileDraft.bio"
@@ -1689,7 +1697,7 @@ onBeforeUnmount(() => {
             :maxlength="300"
             @input="profileDraft.bio = eventValue($event)"
           />
-          <k-list-item
+          <sky-list-item
             class="flare-choice-row"
             :header="phone.t('Apps.flare.gender')"
             :title="choiceLabel('gender')"
@@ -1697,7 +1705,7 @@ onBeforeUnmount(() => {
             link-component="button"
             :link-props="choiceLinkProps('gender')"
           />
-          <k-list-item
+          <sky-list-item
             class="flare-choice-row"
             :header="phone.t('Apps.flare.relationshipGoal')"
             :title="choiceLabel('lookingFor')"
@@ -1705,13 +1713,13 @@ onBeforeUnmount(() => {
             link-component="button"
             :link-props="choiceLinkProps('lookingFor')"
           />
-          <k-list-input
+          <sky-field
             :label="phone.t('Apps.flare.interests')"
             :value="profileDraft.interests.join(', ')"
             :placeholder="phone.t('Apps.flare.interestsPlaceholder')"
             @input="updateInterests"
           />
-        </k-list>
+        </sky-list>
         <p class="flare-form-hint">
           {{ phone.t('Apps.flare.interestsHint') }}
         </p>
@@ -1720,7 +1728,7 @@ onBeforeUnmount(() => {
         </p>
       </section>
 
-      <k-tabbar
+      <sky-tab-bar
         v-if="!profileEditing && !profileSettings"
         component="nav"
         icons
@@ -1730,8 +1738,8 @@ onBeforeUnmount(() => {
         class="flare-tabbar bottom-0 left-0 fixed"
         :aria-label="phone.t('Apps.flare.navigation')"
       >
-        <k-toolbar-pane class="flare-tab-pane">
-          <k-tabbar-link
+        <sky-toolbar-pane class="flare-tab-pane">
+          <sky-tab-button
             component="button"
             :active="activeTab === 'discover'"
             :link-props="{ type: 'button', class: 'flare-tab-link' }"
@@ -1741,10 +1749,10 @@ onBeforeUnmount(() => {
               phone.t('Apps.flare.tabs.discover')
             }}</template>
             <template #icon
-              ><k-icon><Flame fill="currentColor" /></k-icon
+              ><sky-icon><Flame fill="currentColor" /></sky-icon
             ></template>
-          </k-tabbar-link>
-          <k-tabbar-link
+          </sky-tab-button>
+          <sky-tab-button
             component="button"
             :active="activeTab === 'explore'"
             :link-props="{ type: 'button', class: 'flare-tab-link' }"
@@ -1752,10 +1760,10 @@ onBeforeUnmount(() => {
           >
             <template #label>{{ phone.t('Apps.flare.tabs.explore') }}</template>
             <template #icon
-              ><k-icon><Grid2X2 /></k-icon
+              ><sky-icon><Grid2X2 /></sky-icon
             ></template>
-          </k-tabbar-link>
-          <k-tabbar-link
+          </sky-tab-button>
+          <sky-tab-button
             component="button"
             :active="activeTab === 'likes'"
             :link-props="{ type: 'button', class: 'flare-tab-link' }"
@@ -1763,15 +1771,15 @@ onBeforeUnmount(() => {
           >
             <template #label>{{ phone.t('Apps.flare.tabs.likes') }}</template>
             <template #icon>
-              <k-icon class="flare-tab-icon">
+              <sky-icon class="flare-tab-icon">
                 <Heart fill="currentColor" />
-                <k-badge v-if="flare.likes.length" small>{{
+                <sky-badge v-if="flare.likes.length" small>{{
                   flare.likes.length
-                }}</k-badge>
-              </k-icon>
+                }}</sky-badge>
+              </sky-icon>
             </template>
-          </k-tabbar-link>
-          <k-tabbar-link
+          </sky-tab-button>
+          <sky-tab-button
             component="button"
             :active="activeTab === 'matches'"
             :link-props="{ type: 'button', class: 'flare-tab-link' }"
@@ -1779,15 +1787,15 @@ onBeforeUnmount(() => {
           >
             <template #label>{{ phone.t('Apps.flare.tabs.matches') }}</template>
             <template #icon>
-              <k-icon class="flare-tab-icon">
+              <sky-icon class="flare-tab-icon">
                 <MessageCircle />
-                <k-badge v-if="unreadMatches" small>{{
+                <sky-badge v-if="unreadMatches" small>{{
                   unreadMatches
-                }}</k-badge>
-              </k-icon>
+                }}</sky-badge>
+              </sky-icon>
             </template>
-          </k-tabbar-link>
-          <k-tabbar-link
+          </sky-tab-button>
+          <sky-tab-button
             component="button"
             :active="activeTab === 'profile'"
             :link-props="{ type: 'button', class: 'flare-tab-link' }"
@@ -1795,11 +1803,11 @@ onBeforeUnmount(() => {
           >
             <template #label>{{ phone.t('Apps.flare.tabs.profile') }}</template>
             <template #icon
-              ><k-icon><UserRound /></k-icon
+              ><sky-icon><UserRound /></sky-icon
             ></template>
-          </k-tabbar-link>
-        </k-toolbar-pane>
-      </k-tabbar>
+          </sky-tab-button>
+        </sky-toolbar-pane>
+      </sky-tab-bar>
     </template>
 
     <div
@@ -1829,89 +1837,89 @@ onBeforeUnmount(() => {
         <i :style="profilePhotoStyle(matchReveal.profile)" />
       </div>
       <div class="flare-match-actions">
-        <k-button
+        <sky-button
           large
           rounded
           class="flare-match-primary"
           @click="openRevealedMatch"
         >
           {{ phone.t('Apps.flare.sayHello') }}
-        </k-button>
-        <k-button
+        </sky-button>
+        <sky-button
           clear
           inline
           class="flare-match-secondary"
           @click="matchReveal = null"
         >
           {{ phone.t('Apps.flare.keepSwiping') }}
-        </k-button>
+        </sky-button>
       </div>
     </div>
 
     <div class="flare-choice-sheet">
-      <k-sheet :opened="choiceOpened" @backdropclick="closeChoice">
-      <section
-        id="flare-choice-sheet"
-        ref="choiceSheetContent"
-        class="flare-choice-sheet__content"
-        role="dialog"
-        :aria-hidden="!choiceOpened"
-        :aria-modal="choiceOpened ? 'true' : undefined"
-        aria-labelledby="flare-choice-sheet-title"
-        :inert="!choiceOpened"
-        @keydown.esc.stop.prevent="closeChoice"
-      >
-        <span class="flare-choice-sheet__grabber" aria-hidden="true" />
-        <header class="flare-choice-sheet__header">
-          <h2 id="flare-choice-sheet-title">{{ activeChoiceTitle }}</h2>
-          <k-link
-            component="button"
-            icon-only
-            class="flare-choice-sheet__close"
-            :aria-label="phone.t('Common.close')"
-            :link-props="{ type: 'button' }"
-            @click="closeChoice"
-          >
-            <X />
-          </k-link>
-        </header>
-        <k-list
-          component="ul"
-          role="listbox"
-          inset
-          strong
-          class="flare-choice-sheet__list"
+      <sky-sheet :opened="choiceOpened" @backdropclick="closeChoice">
+        <section
+          id="flare-choice-sheet"
+          ref="choiceSheetContent"
+          class="flare-choice-sheet__content"
+          role="dialog"
+          :aria-hidden="!choiceOpened"
+          :aria-modal="choiceOpened ? 'true' : undefined"
+          aria-labelledby="flare-choice-sheet-title"
+          :inert="!choiceOpened"
+          @keydown.esc.stop.prevent="closeChoice"
         >
-          <k-list-item
-            v-for="option in activeChoiceOptions"
-            :key="option.value"
-            class="flare-choice-option"
-            :title="option.label"
-            link
-            :chevron="false"
-            link-component="button"
-            :link-props="{
-              type: 'button',
-              role: 'option',
-              class: 'flare-choice-option__button',
-              'aria-selected': activeChoiceValue === option.value,
-            }"
-            @click="selectChoice(option.value)"
+          <span class="flare-choice-sheet__grabber" aria-hidden="true" />
+          <header class="flare-choice-sheet__header">
+            <h2 id="flare-choice-sheet-title">{{ activeChoiceTitle }}</h2>
+            <sky-link
+              component="button"
+              icon-only
+              class="flare-choice-sheet__close"
+              :aria-label="phone.t('Common.close')"
+              :link-props="{ type: 'button' }"
+              @click="closeChoice"
+            >
+              <X />
+            </sky-link>
+          </header>
+          <sky-list
+            component="ul"
+            role="listbox"
+            inset
+            strong
+            class="flare-choice-sheet__list"
           >
-            <template #after>
-              <Check
-                v-if="activeChoiceValue === option.value"
-                class="flare-choice-check"
-                aria-hidden="true"
-              />
-            </template>
-          </k-list-item>
-        </k-list>
-      </section>
-      </k-sheet>
+            <sky-list-item
+              v-for="option in activeChoiceOptions"
+              :key="option.value"
+              class="flare-choice-option"
+              :title="option.label"
+              link
+              :chevron="false"
+              link-component="button"
+              :link-props="{
+                type: 'button',
+                role: 'option',
+                class: 'flare-choice-option__button',
+                'aria-selected': activeChoiceValue === option.value,
+              }"
+              @click="selectChoice(option.value)"
+            >
+              <template #after>
+                <Check
+                  v-if="activeChoiceValue === option.value"
+                  class="flare-choice-check"
+                  aria-hidden="true"
+                />
+              </template>
+            </sky-list-item>
+          </sky-list>
+        </section>
+      </sky-sheet>
     </div>
 
-    <k-dialog :opened="unmatchDialog" @backdropclick="unmatchDialog = false">
+    <sky-dialog :opened="unmatchDialog" @backdropclick="unmatchDialog = false">
       <template #title>{{ phone.t('Apps.flare.unmatchTitle') }}</template>
       <p>
         {{
@@ -1921,19 +1929,19 @@ onBeforeUnmount(() => {
         }}
       </p>
       <template #buttons>
-        <k-dialog-button @click="unmatchDialog = false">
+        <sky-dialog-button @click="unmatchDialog = false">
           {{ phone.t('Common.cancel') }}
-        </k-dialog-button>
-        <k-dialog-button strong @click="confirmUnmatch">
+        </sky-dialog-button>
+        <sky-dialog-button strong @click="confirmUnmatch">
           {{ phone.t('Apps.flare.unmatch') }}
-        </k-dialog-button>
+        </sky-dialog-button>
       </template>
-    </k-dialog>
+    </sky-dialog>
 
-    <k-toast :opened="Boolean(actionToast)" position="center">
+    <sky-toast :opened="Boolean(actionToast)" position="center">
       {{ actionToast }}
-    </k-toast>
-  </k-page>
+    </sky-toast>
+  </sky-app-page>
 </template>
 
 <style scoped>
@@ -1945,8 +1953,8 @@ onBeforeUnmount(() => {
   --flare-surface: #fff;
   --flare-panel: #f4f4f6;
   --color-primary: var(--flare);
-  --k-safe-area-top: 46px;
-  --k-safe-area-bottom: 25px;
+  --sky-safe-area-top: 46px;
+  --sky-safe-area-bottom: 25px;
   display: flex !important;
   flex-direction: column;
   padding: 0 0 105px !important;
@@ -1967,7 +1975,7 @@ onBeforeUnmount(() => {
   color: var(--flare-ink);
   border-bottom: 1px solid color-mix(in srgb, var(--flare-ink) 9%, transparent);
 }
-.flare-navbar :deep(.k-link) {
+.flare-navbar :deep(.sky-link) {
   color: var(--flare-muted);
 }
 .flare-navbar :deep(.flare-navbar-done) {
@@ -2052,7 +2060,7 @@ onBeforeUnmount(() => {
 .flare-state--discovery-off {
   grid-row: 1 / -1;
 }
-.flare-state--discovery-off :deep(.k-button) {
+.flare-state--discovery-off :deep(.sky-button) {
   width: auto;
   margin-top: 7px;
   padding-right: 20px;
@@ -2410,7 +2418,7 @@ onBeforeUnmount(() => {
   display: flex;
   gap: 7px;
 }
-.flare-like-actions :deep(.k-button) {
+.flare-like-actions :deep(.sky-button) {
   width: 33px !important;
   height: 33px !important;
   min-width: 33px !important;
@@ -2420,7 +2428,7 @@ onBeforeUnmount(() => {
   background: rgb(7 7 9 / 72%);
   backdrop-filter: blur(10px);
 }
-.flare-like-actions :deep(.k-button:last-child) {
+.flare-like-actions :deep(.sky-button:last-child) {
   color: #35d898;
 }
 .flare-like-actions svg {
@@ -2667,8 +2675,8 @@ onBeforeUnmount(() => {
 .flare-profile-form__actions {
   margin: 16px 0 0 !important;
 }
-.flare-profile-form :deep(.k-list),
-.flare-settings :deep(.k-list) {
+.flare-profile-form :deep(.sky-list),
+.flare-settings :deep(.sky-list) {
   margin-top: 8px;
   margin-bottom: 8px;
 }
@@ -2842,7 +2850,7 @@ onBeforeUnmount(() => {
   padding-right: 0;
   padding-left: 0;
 }
-.flare-settings :deep(.k-block-title) {
+.flare-settings :deep(.sky-block-title) {
   margin-top: 15px;
   margin-bottom: 5px;
 }
@@ -2853,7 +2861,7 @@ onBeforeUnmount(() => {
   line-height: 1.45;
 }
 
-.flare-choice-sheet :deep(.k-sheet) {
+.flare-choice-sheet :deep(.sky-sheet__panel) {
   z-index: 70;
   max-height: min(62%, 420px);
   overflow-y: auto !important;
@@ -2862,7 +2870,7 @@ onBeforeUnmount(() => {
   box-shadow: 0 -18px 55px rgb(0 0 0 / 18%);
 }
 .flare-choice-sheet__content {
-  padding: 8px 0 max(18px, var(--k-safe-area-bottom));
+  padding: 8px 0 max(18px, var(--sky-safe-area-bottom));
 }
 .flare-choice-sheet__grabber {
   width: 36px;
@@ -2929,7 +2937,7 @@ onBeforeUnmount(() => {
 .flare-page--attachment-panel .flare-chat-scroll {
   padding-bottom: 390px;
 }
-.flare-chat-scroll :deep(.k-message-sent [class*='message-bubble']) {
+.flare-chat-scroll :deep(.sky-message--sent [class*='message-bubble']) {
   background: linear-gradient(
     110deg,
     var(--flare-warm),
@@ -2945,13 +2953,13 @@ onBeforeUnmount(() => {
   border-radius: 22px;
   box-shadow: 0 7px 24px rgb(0 0 0 / 12%);
 }
-.flare-messagebar :deep(.k-link) {
+.flare-messagebar :deep(.sky-link) {
   color: var(--flare);
 }
-.flare-messagebar :deep(.messages-messagebar__tools .k-link) {
+.flare-messagebar :deep(.messages-messagebar__tools .sky-link) {
   color: var(--flare-text);
 }
-.flare-messagebar :deep(.messages-messagebar__tools .k-link.active) {
+.flare-messagebar :deep(.messages-messagebar__tools .sky-link.active) {
   background: rgb(255 56 92 / 13%);
   color: var(--flare);
 }
@@ -2988,13 +2996,13 @@ onBeforeUnmount(() => {
   width: 22px;
   height: 22px;
 }
-.flare-tabbar :deep(.k-tabbar-link-active) {
+.flare-tabbar :deep(.sky-tab-button--active) {
   color: var(--flare) !important;
 }
 .flare-tab-icon {
   position: relative;
 }
-.flare-tab-icon :deep(.k-badge) {
+.flare-tab-icon :deep(.sky-badge) {
   position: absolute;
   top: -7px;
   right: -8px;
diff --git a/frontend/src/views/apps/FlipTokApp.vue b/frontend/src/views/apps/FlipTokApp.vue
index 173eee7..50140f9 100644
--- a/frontend/src/views/apps/FlipTokApp.vue
+++ b/frontend/src/views/apps/FlipTokApp.vue
@@ -1363,7 +1363,7 @@ onBeforeUnmount(() => {
 <template>
   <SkyAppPage
     class="fliptok-page"
-    :dark="true"
+    :dark="phone.isDarkMode"
     :label="t('name')"
     accent="#ff2d55"
     accent-soft="rgba(255, 45, 85, 0.18)"
diff --git a/frontend/src/views/apps/GalleryApp.vue b/frontend/src/views/apps/GalleryApp.vue
index 4a9b82b..f958403 100644
--- a/frontend/src/views/apps/GalleryApp.vue
+++ b/frontend/src/views/apps/GalleryApp.vue
@@ -1,20 +1,18 @@
 <script setup lang="ts">
 import {
-  kBlock,
-  kButton,
-  kDialog,
-  kLink,
-  kList,
-  kListInput,
-  kListItem,
-  kNavbar,
-  kNavbarBackLink,
-  kPage,
-  kPreloader,
-  kSegmented,
-  kSegmentedButton,
-  kToast,
-} from 'konsta/vue'
+  SkyBlock,
+  SkyDialog,
+  SkyLink,
+  SkyList,
+  SkyField,
+  SkyListItem,
+  SkyNavbarBackLink,
+  SkyAppPage,
+  SkySpinner,
+  SkySegmented,
+  SkySegmentedButton,
+  SkyToast,
+} from '@/ui'
 import {
   Check,
   ChevronLeft,
@@ -74,7 +72,8 @@ const developmentParameters = isDevelopment
   ? new URLSearchParams(window.location.search)
   : null
 const developmentApiEnabled = Boolean(developmentParameters?.has('apiPort'))
-const developmentGalleryState = developmentParameters?.get('galleryMock') ?? null
+const developmentGalleryState =
+  developmentParameters?.get('galleryMock') ?? null
 const filterItems = [
   { id: 'all', label: 'all' },
   { id: 'photo', label: 'photos' },
@@ -122,21 +121,6 @@ const importError = ref('')
 const importing = ref(false)
 const deleteDialogOpened = ref(false)
 const deleteManyDialogOpened = ref(false)
-const cancelButtonColors = {
-  fillBgIos: 'bg-[#8e8e93] active:bg-[#7a7a7f]',
-  fillBgMaterial: 'bg-[#8e8e93] active:bg-[#7a7a7f]',
-  fillTextIos: 'text-white',
-  fillTextMaterial: 'text-white',
-}
-const deleteButtonColors = {
-  fillBgIos: 'bg-[#ff3b30] active:bg-[#d9342b]',
-  fillBgMaterial: 'bg-[#ff3b30] active:bg-[#d9342b]',
-  fillTextIos: 'text-white',
-  fillTextMaterial: 'text-white',
-}
-const filterBarColors = {
-  strongHighlightBgIos: 'bg-[#63636680]',
-}
 const deleting = ref(false)
 const deletingMany = ref(false)
 const favoriting = ref(false)
@@ -178,11 +162,7 @@ const countText = computed(() => {
   const countKey = filter.value === 'all' ? 'all' : `${filter.value}s`
   const count = counts.value[countKey as keyof GalleryCounts]
   const translationKey =
-    count === 1
-      ? filter.value === 'all'
-        ? 'allOne'
-        : filter.value
-      : countKey
+    count === 1 ? (filter.value === 'all' ? 'allOne' : filter.value) : countKey
   return phone.t(`Apps.photos.counts.${translationKey}`, {
     count: new Intl.NumberFormat(phone.lang).format(count),
   })
@@ -195,7 +175,9 @@ const selectedMedia = computed(() =>
 )
 const selectedCountText = computed(() =>
   phone.t('Apps.photos.selection.selected', {
-    count: new Intl.NumberFormat(phone.lang).format(selectedMediaIds.value.length),
+    count: new Intl.NumberFormat(phone.lang).format(
+      selectedMediaIds.value.length,
+    ),
   }),
 )
 const selectedCaptureDay = computed(() => {
@@ -704,7 +686,9 @@ function shareSelected(): void {
     kind: mediaKind,
     link: `skyphone://media/${selected.value.id}`,
     subtitle: formatDate(selected.value.createdAt),
-    title: phone.t(mediaKind === 'video' ? 'Apps.photos.video' : 'Apps.photos.photo'),
+    title: phone.t(
+      mediaKind === 'video' ? 'Apps.photos.video' : 'Apps.photos.photo',
+    ),
   })
 }
 
@@ -719,7 +703,9 @@ async function toggleFavorite(): Promise<void> {
     )
     if (developmentItem) developmentItem.favorite = nextFavorite
     if (favoritesOnly.value && !nextFavorite) {
-      media.value = media.value.filter((entry) => entry.id !== selected.value?.id)
+      media.value = media.value.filter(
+        (entry) => entry.id !== selected.value?.id,
+      )
     }
     favoriting.value = false
     await fetchCounts()
@@ -738,7 +724,9 @@ async function toggleFavorite(): Promise<void> {
       )
       if (developmentItem) developmentItem.favorite = nextFavorite
       if (favoritesOnly.value && !nextFavorite) {
-        media.value = media.value.filter((entry) => entry.id !== selected.value?.id)
+        media.value = media.value.filter(
+          (entry) => entry.id !== selected.value?.id,
+        )
       }
       await fetchCounts()
       return
@@ -980,9 +968,7 @@ function onMessage(event: MessageEvent): void {
     closeMedia()
     showToast(phone.t('Apps.photos.deleted'))
   } else {
-    showToast(
-      phone.t(`Apps.photos.errors.${mediaErrorKey(result.error)}`),
-    )
+    showToast(phone.t(`Apps.photos.errors.${mediaErrorKey(result.error)}`))
   }
 }
 
@@ -1005,25 +991,25 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <k-page
+  <sky-app-page
     v-if="importMode === 'sources'"
     class="gallery-import-page !pt-[44px]"
     :aria-label="phone.t('Apps.photos.import.chooseSource')"
   >
-    <k-navbar :title="phone.t('Apps.photos.import.title')">
+    <sky-navbar :title="phone.t('Apps.photos.import.title')">
       <template #left>
-        <k-navbar-back-link
+        <sky-navbar-back-link
           component="button"
           :text="phone.t('Common.back')"
           @click="closeImport"
         />
       </template>
-    </k-navbar>
-    <k-block class="gallery-import-intro">
+    </sky-navbar>
+    <sky-block class="gallery-import-intro">
       {{ phone.t('Apps.photos.import.chooseSource') }}
-    </k-block>
-    <k-list inset strong>
-      <k-list-item
+    </sky-block>
+    <sky-list inset strong>
+      <sky-list-item
         v-for="source in importSources"
         :key="source.id"
         link
@@ -1044,31 +1030,31 @@ onBeforeUnmount(() => {
       >
         <template #media><Globe2 :size="22" /></template>
         <template #after><ChevronRight :size="18" /></template>
-      </k-list-item>
-    </k-list>
-  </k-page>
+      </sky-list-item>
+    </sky-list>
+  </sky-app-page>
 
-  <k-page
+  <sky-app-page
     v-else-if="importMode === 'form' && importSource"
     class="gallery-import-page !pt-[44px]"
     :aria-label="phone.t('Apps.photos.import.title')"
   >
-    <k-navbar :title="importSource.label">
+    <sky-navbar :title="importSource.label">
       <template #left>
-        <k-navbar-back-link
+        <sky-navbar-back-link
           component="button"
           :text="phone.t('Common.back')"
           @click="backFromImportForm"
         />
       </template>
-    </k-navbar>
+    </sky-navbar>
 
     <div class="gallery-import-form">
       <div class="gallery-import-form-icon"><Link2 :size="34" /></div>
       <h2>{{ phone.t('Apps.photos.import.linkTitle') }}</h2>
       <p>{{ phone.t('Apps.photos.import.linkBody') }}</p>
-      <k-list inset strong class="gallery-import-url-list">
-        <k-list-input
+      <sky-list inset strong class="gallery-import-url-list">
+        <sky-field
           outline
           input-id="gallery-import-url"
           inputmode="url"
@@ -1081,47 +1067,47 @@ onBeforeUnmount(() => {
           @input="updateImportUrl"
           @keyup.enter="commitUrlImport"
         />
-      </k-list>
-      <k-button
+      </sky-list>
+      <sky-button
         class="gallery-import-submit"
         large
         rounded
         :disabled="!importUrl.trim() || importing"
         @click="commitUrlImport"
       >
-        <k-preloader v-if="importing" class="mr-2" />
+        <sky-spinner v-if="importing" class="mr-2" />
         {{ phone.t('Apps.photos.import.action') }}
-      </k-button>
+      </sky-button>
     </div>
-  </k-page>
+  </sky-app-page>
 
-  <k-page
+  <sky-app-page
     v-else-if="!selected"
     class="gallery-page"
     :class="{ '!pt-[44px]': requestedMessageMedia }"
     :aria-label="phone.t('Apps.photos.name')"
   >
-    <k-navbar
+    <sky-navbar
       v-if="requestedMessageMedia"
       :title="phone.t('Apps.photos.name')"
     >
       <template #left>
-        <k-navbar-back-link
+        <sky-navbar-back-link
           component="button"
           :text="phone.t('Common.back')"
           @click="cancelMessageSelection"
         />
       </template>
       <template v-if="multipleSelection" #right>
-        <k-link
+        <sky-link
           component="button"
           :disabled="!selectedMediaIds.length"
           @click="completeMultipleSelection"
         >
           {{ phone.t('Common.done') }}
-        </k-link>
+        </sky-link>
       </template>
-    </k-navbar>
+    </sky-navbar>
     <SkyNavbar
       v-else
       class="gallery-library-navbar"
@@ -1137,7 +1123,11 @@ onBeforeUnmount(() => {
           class="gallery-header-actions sky-ui-provider sky-ui-provider--dark"
         >
           <SkyToolbarPane class="gallery-header-tool gallery-header-tool--text">
-            <SkyButton clear class="gallery-header-action" @click="exitSelectionMode">
+            <SkyButton
+              clear
+              class="gallery-header-action"
+              @click="exitSelectionMode"
+            >
               {{ phone.t('Common.cancel') }}
             </SkyButton>
           </SkyToolbarPane>
@@ -1176,7 +1166,11 @@ onBeforeUnmount(() => {
             </SkyButton>
           </SkyToolbarPane>
           <SkyToolbarPane class="gallery-header-tool gallery-header-tool--text">
-            <SkyButton clear class="gallery-header-action" @click="enterSelectionMode">
+            <SkyButton
+              clear
+              class="gallery-header-action"
+              @click="enterSelectionMode"
+            >
               {{ phone.t('Apps.photos.selection.action') }}
             </SkyButton>
           </SkyToolbarPane>
@@ -1186,12 +1180,12 @@ onBeforeUnmount(() => {
 
     <div ref="galleryContent" class="gallery-content">
       <div v-if="loading" class="gallery-state">
-        <k-preloader />
+        <sky-spinner />
         <span>{{ phone.t('Apps.photos.loading') }}</span>
       </div>
-      <k-block v-else-if="loadError" strong inset class="gallery-error">
+      <sky-block v-else-if="loadError" strong inset class="gallery-error">
         {{ loadError }}
-      </k-block>
+      </sky-block>
       <div v-else-if="!media.length" class="gallery-state gallery-empty">
         <strong>{{ phone.t('Apps.photos.emptyTitle') }}</strong>
         <span>{{ phone.t('Apps.photos.emptyBody') }}</span>
@@ -1213,18 +1207,12 @@ onBeforeUnmount(() => {
           :class="{
             'gallery-tile--selected': selectedMediaIds.includes(entry.id),
           }"
-          :style="
-            {
-              gridColumnStart: bottomRightGridPosition(
-                index,
-                orderedMedia.length,
-              ).column,
-              gridRowStart: bottomRightGridPosition(
-                index,
-                orderedMedia.length,
-              ).row,
-            }
-          "
+          :style="{
+            gridColumnStart: bottomRightGridPosition(index, orderedMedia.length)
+              .column,
+            gridRowStart: bottomRightGridPosition(index, orderedMedia.length)
+              .row,
+          }"
           type="button"
           :aria-pressed="
             selectionMode || multipleSelection
@@ -1275,20 +1263,15 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <k-navbar
+    <sky-navbar
       v-if="!requestedMessageMedia && !selectionMode"
       component="nav"
       class="gallery-filter-navbar"
       :aria-label="phone.t('Apps.photos.name')"
     >
       <template #subnavbar>
-        <k-segmented
-          strong
-          rounded
-          :colors="filterBarColors"
-          :data-active-filter="filter"
-        >
-          <k-segmented-button
+        <sky-segmented strong rounded :data-active-filter="filter">
+          <sky-segmented-button
             v-for="item in filterItems"
             :key="item.id"
             large
@@ -1298,10 +1281,10 @@ onBeforeUnmount(() => {
             @click="filter = item.id"
           >
             {{ phone.t(`Apps.photos.filters.${item.label}`) }}
-          </k-segmented-button>
-        </k-segmented>
+          </sky-segmented-button>
+        </sky-segmented>
       </template>
-    </k-navbar>
+    </sky-navbar>
 
     <SkyToolbar
       v-if="selectionMode"
@@ -1337,9 +1320,9 @@ onBeforeUnmount(() => {
         </SkyButton>
       </SkyToolbarPane>
     </SkyToolbar>
-  </k-page>
+  </sky-app-page>
 
-  <k-page
+  <sky-app-page
     v-else
     class="gallery-detail sky-ui-provider sky-ui-provider--dark"
   >
@@ -1398,7 +1381,7 @@ onBeforeUnmount(() => {
           @loadedmetadata="initializeVideo"
           @error="videoPlaybackError = true"
         ></video>
-        <k-block
+        <sky-block
           v-if="selected.mediaType === 'video' && videoPlaybackError"
           strong
           inset
@@ -1406,7 +1389,7 @@ onBeforeUnmount(() => {
           role="alert"
         >
           {{ phone.t('Apps.photos.errors.unsupported') }}
-        </k-block>
+        </sky-block>
       </div>
     </div>
 
@@ -1495,7 +1478,7 @@ onBeforeUnmount(() => {
         </SkyButton>
       </SkyToolbarPane>
     </SkyToolbar>
-  </k-page>
+  </sky-app-page>
 
   <SkyActionSheet
     class="gallery-sort-sheet sky-ui-provider"
@@ -1554,7 +1537,7 @@ onBeforeUnmount(() => {
     </SkyActionGroup>
   </SkyActionSheet>
 
-  <k-dialog
+  <sky-dialog
     :opened="deleteManyDialogOpened"
     @backdropclick="deleteManyDialogOpened = false"
   >
@@ -1563,54 +1546,48 @@ onBeforeUnmount(() => {
     </template>
     <p>{{ phone.t('Apps.photos.selection.deleteBody') }}</p>
     <template #buttons>
-      <k-button
+      <sky-button
         large
         rounded
-        :colors="cancelButtonColors"
+        variant="secondary"
         @click="deleteManyDialogOpened = false"
       >
         {{ phone.t('Common.cancel') }}
-      </k-button>
-      <k-button
-        large
-        rounded
-        :colors="deleteButtonColors"
-        @click="deleteSelection"
-      >
+      </sky-button>
+      <sky-button large rounded variant="danger" @click="deleteSelection">
         {{ phone.t('Common.delete') }}
-      </k-button>
+      </sky-button>
     </template>
-  </k-dialog>
+  </sky-dialog>
 
-  <k-dialog
+  <sky-dialog
     :opened="deleteDialogOpened"
     @backdropclick="deleteDialogOpened = false"
   >
     <template #title>{{ phone.t('Apps.photos.deleteTitle') }}</template>
     <p>{{ phone.t('Apps.photos.deleteBody') }}</p>
     <template #buttons>
-      <k-button
+      <sky-button
         large
         rounded
-        :colors="cancelButtonColors"
+        variant="secondary"
         @click="deleteDialogOpened = false"
       >
         {{ phone.t('Common.cancel') }}
-      </k-button>
-      <k-button
-        large
-        rounded
-        :colors="deleteButtonColors"
-        @click="deleteSelected"
-      >
+      </sky-button>
+      <sky-button large rounded variant="danger" @click="deleteSelected">
         {{ phone.t('Common.delete') }}
-      </k-button>
+      </sky-button>
     </template>
-  </k-dialog>
+  </sky-dialog>
 
-  <k-toast :opened="toastOpened" position="center" @click="toastOpened = false">
+  <sky-toast
+    :opened="toastOpened"
+    position="center"
+    @click="toastOpened = false"
+  >
     {{ toastText }}
-  </k-toast>
+  </sky-toast>
 </template>
 
 <style scoped>
@@ -1705,9 +1682,7 @@ onBeforeUnmount(() => {
 }
 .gallery-library-navbar :deep(.sky-navbar__title-container) {
   padding-right: calc(200px + var(--sky-safe-area-right));
-  transform: translateY(
-    calc(0px - var(--sky-navbar-collapse-offset) - 30px)
-  );
+  transform: translateY(calc(0px - var(--sky-navbar-collapse-offset) - 30px));
 }
 .gallery-header-actions {
   width: max-content;
diff --git a/frontend/src/views/apps/HealthApp.vue b/frontend/src/views/apps/HealthApp.vue
index 2e15f1b..ee85c05 100644
--- a/frontend/src/views/apps/HealthApp.vue
+++ b/frontend/src/views/apps/HealthApp.vue
@@ -279,7 +279,10 @@ onBeforeUnmount(() => {
           </div>
         </section>
 
-        <section class="health-metrics" :aria-label="phone.t('Apps.health.snapshot')">
+        <section
+          class="health-metrics"
+          :aria-label="phone.t('Apps.health.snapshot')"
+        >
           <div>
             <MapPin :size="20" aria-hidden="true" />
             <strong>{{ formatDistance(today?.distanceMeters ?? 0) }}</strong>
@@ -304,7 +307,11 @@ onBeforeUnmount(() => {
         <section class="health-section">
           <h2>{{ phone.t('Apps.health.thisWeek') }}</h2>
           <div class="health-week-chart">
-            <div v-for="day in visibleDays" :key="day.date" class="health-week-day">
+            <div
+              v-for="day in visibleDays"
+              :key="day.date"
+              class="health-week-day"
+            >
               <span>{{ weekday(day.date) }}</span>
               <div class="health-week-bar" aria-hidden="true">
                 <i
@@ -317,7 +324,6 @@ onBeforeUnmount(() => {
             </div>
           </div>
         </section>
-
       </template>
 
       <template v-else-if="activeTab === 'trends'">
@@ -333,11 +339,18 @@ onBeforeUnmount(() => {
           }}</small>
         </section>
 
-        <section class="health-trend-chart" :aria-label="phone.t('Apps.health.trends.dailyActivity')">
+        <section
+          class="health-trend-chart"
+          :aria-label="phone.t('Apps.health.trends.dailyActivity')"
+        >
           <div class="health-goal-line" aria-hidden="true">
             <span>{{ phone.t('Apps.health.trends.goal') }}</span>
           </div>
-          <div v-for="day in visibleDays" :key="day.date" class="health-trend-column">
+          <div
+            v-for="day in visibleDays"
+            :key="day.date"
+            class="health-trend-column"
+          >
             <div class="health-trend-column__bar">
               <i
                 :style="{
@@ -364,7 +377,10 @@ onBeforeUnmount(() => {
             <span>{{ phone.t('Apps.health.distance') }}</span>
             <strong>{{
               formatDistance(
-                visibleDays.reduce((total, day) => total + day.distanceMeters, 0),
+                visibleDays.reduce(
+                  (total, day) => total + day.distanceMeters,
+                  0,
+                ),
               )
             }}</strong>
           </div>
@@ -375,7 +391,10 @@ onBeforeUnmount(() => {
             <span>{{ phone.t('Apps.health.trends.activeTime') }}</span>
             <strong>{{
               formatMinutes(
-                visibleDays.reduce((total, day) => total + day.activeSeconds, 0),
+                visibleDays.reduce(
+                  (total, day) => total + day.activeSeconds,
+                  0,
+                ),
               )
             }}</strong>
           </div>
@@ -384,7 +403,11 @@ onBeforeUnmount(() => {
         <section class="health-section">
           <h2>{{ phone.t('Apps.health.trends.dailyActivity') }}</h2>
           <div class="health-list health-daily-list">
-            <div v-for="day in visibleDays" :key="day.date" class="health-list__row">
+            <div
+              v-for="day in visibleDays"
+              :key="day.date"
+              class="health-list__row"
+            >
               <strong class="health-day-letter">{{ weekday(day.date) }}</strong>
               <span>{{ fullDate(day.date) }}</span>
               <strong>{{ formatNumber(day.steps) }}</strong>
@@ -494,7 +517,9 @@ onBeforeUnmount(() => {
           <section class="health-section">
             <h2>{{ phone.t('Apps.health.medicalId.emergencyContact') }}</h2>
             <div class="health-contact">
-              <span class="health-contact__avatar"><UserRound :size="27" /></span>
+              <span class="health-contact__avatar"
+                ><UserRound :size="27"
+              /></span>
               <div>
                 <strong>{{
                   medicalId?.emergencyName ||
@@ -524,7 +549,6 @@ onBeforeUnmount(() => {
               phone.t('Apps.health.medicalId.emergencyCall')
             }}
           </SkyButton>
-
         </template>
 
         <p v-if="actionError" class="health-action-error" role="alert">
diff --git a/frontend/src/views/apps/HouseApp.vue b/frontend/src/views/apps/HouseApp.vue
index 2ca9fdf..887a7a1 100644
--- a/frontend/src/views/apps/HouseApp.vue
+++ b/frontend/src/views/apps/HouseApp.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import {
-  kBlockTitle,
-  kButton,
-  kCard,
-  kDialog,
-  kDialogButton,
-  kLink,
-  kList,
-  kListItem,
-  kNavbar,
-  kPage,
-  kPreloader,
-  kSheet,
-} from 'konsta/vue'
+  SkyBlockTitle,
+  SkyButton,
+  SkyCard,
+  SkyDialog,
+  SkyDialogButton,
+  SkyLink,
+  SkyList,
+  SkyListItem,
+  SkyNavbar,
+  SkyAppPage,
+  SkySpinner,
+  SkySheet,
+} from '@/ui'
 import {
   Camera,
   CarFront,
@@ -55,12 +55,6 @@ const isRefreshing = ref(false)
 const pullDistance = ref(0)
 
 const pullThreshold = 56
-const housePrimaryButtonColors = {
-  fillBgIos: 'bg-[#f47a38] active:bg-[#d86129]',
-  fillBgMaterial: 'bg-[#f47a38] active:bg-[#d86129]',
-  fillTextIos: 'text-white',
-  fillTextMaterial: 'text-white',
-}
 let pullStartY = 0
 let isPulling = false
 let wheelRefreshTimeout: ReturnType<typeof setTimeout> | undefined
@@ -246,15 +240,15 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <k-page component="main" class="house-page">
-    <k-navbar
+  <sky-app-page component="main" class="house-page">
+    <sky-navbar
       class="house-navbar"
       :subtitle="phone.t('Apps.house.subtitle')"
       :title="phone.t('Apps.house.name')"
     />
 
     <div v-if="housing.isLoading && !housing.overview" class="house-state">
-      <k-preloader />
+      <sky-spinner />
       <span>{{ phone.t('Common.loading') }}</span>
     </div>
 
@@ -262,26 +256,26 @@ onBeforeUnmount(() => {
       <span class="house-state__icon"><WifiOff :size="30" /></span>
       <strong>{{ phone.t('Apps.house.unavailable') }}</strong>
       <p>{{ translatedError(housing.error) }}</p>
-      <k-button
+      <sky-button
         rounded
-        :colors="housePrimaryButtonColors"
+        style="--sky-app-accent: var(--house-accent)"
         @click="refresh"
       >
         {{ phone.t('Apps.house.tryAgain') }}
-      </k-button>
+      </sky-button>
     </div>
 
     <div v-else-if="!housing.overview.available" class="house-state">
       <span class="house-state__icon"><Router :size="31" /></span>
       <strong>{{ phone.t('Apps.house.offline') }}</strong>
       <p>{{ phone.t('Apps.house.offlineBody') }}</p>
-      <k-button
+      <sky-button
         rounded
-        :colors="housePrimaryButtonColors"
+        style="--sky-app-accent: var(--house-accent)"
         @click="refresh"
       >
         {{ phone.t('Apps.house.tryAgain') }}
-      </k-button>
+      </sky-button>
     </div>
 
     <div
@@ -299,7 +293,7 @@ onBeforeUnmount(() => {
         :style="{ transform: `translateY(${pullDistance - pullThreshold}px)` }"
         aria-live="polite"
       >
-        <k-preloader />
+        <sky-spinner />
       </div>
       <section v-if="properties.length" class="house-properties">
         <header class="house-properties__heading">
@@ -310,10 +304,7 @@ onBeforeUnmount(() => {
           <span class="house-properties__count">{{ properties.length }}</span>
         </header>
 
-        <div
-          class="house-overview"
-          :aria-label="phone.t('Apps.house.myHomes')"
-        >
+        <div class="house-overview" :aria-label="phone.t('Apps.house.myHomes')">
           <span
             ><b>{{ ownedCount }}</b
             >{{ phone.t('Apps.house.owned') }}</span
@@ -328,16 +319,16 @@ onBeforeUnmount(() => {
           >
         </div>
 
-        <k-list inset strong class="house-property-list">
-          <k-list-item
-          v-for="property in properties"
-          :key="property.id"
-          link
-          chevron
-          :title="property.name"
-          :subtitle="propertySubtitle(property)"
-          :aria-label="`${phone.t('Apps.house.openDetails')}: ${property.name}`"
-          @click="selectedPropertyId = property.id"
+        <sky-list inset strong class="house-property-list">
+          <sky-list-item
+            v-for="property in properties"
+            :key="property.id"
+            link
+            chevron
+            :title="property.name"
+            :subtitle="propertySubtitle(property)"
+            :aria-label="`${phone.t('Apps.house.openDetails')}: ${property.name}`"
+            @click="selectedPropertyId = property.id"
           >
             <template #media>
               <span class="house-property__icon"><House :size="21" /></span>
@@ -359,8 +350,8 @@ onBeforeUnmount(() => {
                 }}
               </span>
             </template>
-          </k-list-item>
-        </k-list>
+          </sky-list-item>
+        </sky-list>
       </section>
 
       <section v-else class="house-empty">
@@ -368,24 +359,24 @@ onBeforeUnmount(() => {
         <small>{{ phone.t('Apps.house.myHomes') }}</small>
         <h1>{{ phone.t('Apps.house.empty') }}</h1>
         <p>{{ phone.t('Apps.house.emptyBody') }}</p>
-        <k-button
+        <sky-button
           inline
           rounded
-          :colors="housePrimaryButtonColors"
+          style="--sky-app-accent: var(--house-accent)"
           @click="refresh"
         >
           {{ phone.t('Apps.house.refresh') }}
-        </k-button>
+        </sky-button>
       </section>
     </div>
 
-    <k-sheet
+    <sky-sheet
       :opened="Boolean(selectedProperty)"
       class="house-detail-sheet"
       @backdropclick="selectedPropertyId = null"
     >
       <section v-if="selectedProperty" class="house-detail">
-        <k-glass
+        <sky-glass
           component="button"
           class="house-detail__close"
           type="button"
@@ -393,7 +384,7 @@ onBeforeUnmount(() => {
           @click="selectedPropertyId = null"
         >
           <X :size="18" />
-        </k-glass>
+        </sky-glass>
 
         <span class="house-detail__mark"><House :size="29" /></span>
         <small>{{ accessLabel(selectedProperty) }}</small>
@@ -414,12 +405,11 @@ onBeforeUnmount(() => {
           }}
         </span>
 
-        <k-button
+        <sky-button
           v-if="selectedProperty.capabilities.lock"
           large
           rounded
           class="house-lock-button"
-          :colors="housePrimaryButtonColors"
           :disabled="isPending('toggle_lock', selectedProperty)"
           @click="runCommand('toggle_lock', selectedProperty)"
         >
@@ -432,11 +422,11 @@ onBeforeUnmount(() => {
                 : 'Apps.house.lockDoor',
             )
           }}
-        </k-button>
+        </sky-button>
 
-        <k-block-title>{{ phone.t('Apps.house.actions') }}</k-block-title>
-        <k-list inset strong class="house-action-list">
-          <k-list-item
+        <sky-block-title>{{ phone.t('Apps.house.actions') }}</sky-block-title>
+        <sky-list inset strong class="house-action-list">
+          <sky-list-item
             link
             chevron
             :title="phone.t('Apps.house.setWaypoint')"
@@ -444,8 +434,8 @@ onBeforeUnmount(() => {
             @click="runCommand('set_waypoint', selectedProperty)"
           >
             <template #media><LocateFixed :size="19" /></template>
-          </k-list-item>
-          <k-list-item
+          </sky-list-item>
+          <sky-list-item
             :link="selectedProperty.capabilities.cctv"
             :chevron="selectedProperty.capabilities.cctv"
             :title="phone.t('Apps.house.viewCamera')"
@@ -466,26 +456,26 @@ onBeforeUnmount(() => {
             "
           >
             <template #media><Camera :size="19" /></template>
-          </k-list-item>
-          <k-list-item
+          </sky-list-item>
+          <sky-list-item
             link
             chevron
             :title="phone.t('Apps.easyShare.share')"
             @click="shareProperty(selectedProperty)"
           >
             <template #media><Share2 :size="19" /></template>
-          </k-list-item>
-        </k-list>
+          </sky-list-item>
+        </sky-list>
 
-        <k-block-title>{{ phone.t('Apps.house.status') }}</k-block-title>
-        <k-list inset strong class="house-facts">
-          <k-list-item
+        <sky-block-title>{{ phone.t('Apps.house.status') }}</sky-block-title>
+        <sky-list inset strong class="house-facts">
+          <sky-list-item
             :title="phone.t('Apps.house.access')"
             :after="accessLabel(selectedProperty)"
           >
             <template #media><UserRound :size="17" /></template>
-          </k-list-item>
-          <k-list-item
+          </sky-list-item>
+          <sky-list-item
             :title="phone.t('Apps.house.camera')"
             :after="
               phone.t(
@@ -496,8 +486,8 @@ onBeforeUnmount(() => {
             "
           >
             <template #media><Camera :size="17" /></template>
-          </k-list-item>
-          <k-list-item
+          </sky-list-item>
+          <sky-list-item
             v-if="selectedProperty.garage"
             :title="phone.t('Apps.house.garage')"
             :subtitle="
@@ -514,8 +504,8 @@ onBeforeUnmount(() => {
             "
           >
             <template #media><CarFront :size="17" /></template>
-          </k-list-item>
-        </k-list>
+          </sky-list-item>
+        </sky-list>
 
         <section v-if="selectedProperty.capabilities.keys" class="house-keys">
           <header>
@@ -523,17 +513,17 @@ onBeforeUnmount(() => {
               ><small>{{ phone.t('Apps.house.access') }}</small
               ><strong>{{ phone.t('Apps.house.keys') }}</strong></span
             >
-            <k-button
+            <sky-button
               rounded
               small
               inline
               @click="openKeyCandidates(selectedProperty)"
             >
               <Plus :size="15" />{{ phone.t('Apps.house.addKey') }}
-            </k-button>
+            </sky-button>
           </header>
-          <k-list v-if="selectedProperty.keys?.length" inset strong>
-            <k-list-item
+          <sky-list v-if="selectedProperty.keys?.length" inset strong>
+            <sky-list-item
               v-for="key in selectedProperty.keys"
               :key="key.identifier"
               :title="key.name"
@@ -545,7 +535,7 @@ onBeforeUnmount(() => {
             >
               <template #media><KeyRound :size="17" /></template>
               <template #after>
-                <k-button
+                <sky-button
                   clear
                   rounded
                   small
@@ -553,33 +543,33 @@ onBeforeUnmount(() => {
                   @click.stop="revokeCandidate = key"
                 >
                   {{ phone.t('Apps.house.revokeKey') }}
-                </k-button>
+                </sky-button>
               </template>
-            </k-list-item>
-          </k-list>
-          <k-card v-else class="house-keys__empty">
+            </sky-list-item>
+          </sky-list>
+          <sky-card v-else class="house-keys__empty">
             <KeyRound :size="25" />
             <strong>{{ phone.t('Apps.house.noKeys') }}</strong>
             <p>{{ phone.t('Apps.house.noKeysBody') }}</p>
-          </k-card>
+          </sky-card>
         </section>
       </section>
-    </k-sheet>
+    </sky-sheet>
 
-    <k-sheet
+    <sky-sheet
       :opened="candidatesOpened"
       class="house-candidates-sheet"
       @backdropclick="candidatesOpened = false"
     >
       <section class="house-candidates">
-        <k-link
+        <sky-link
           component="button"
           icon-only
           :aria-label="phone.t('Common.close')"
           :link-props="{ type: 'button' }"
           @click="candidatesOpened = false"
           ><X :size="18"
-        /></k-link>
+        /></sky-link>
         <UsersRound :size="34" />
         <h2>{{ phone.t('Apps.house.chooseResident') }}</h2>
         <p>{{ phone.t('Apps.house.chooseResidentBody') }}</p>
@@ -587,10 +577,10 @@ onBeforeUnmount(() => {
           v-if="housing.isLoadingCandidates"
           class="house-candidates__loading"
         >
-          <k-preloader />
+          <sky-spinner />
         </div>
-        <k-list v-else-if="housing.candidates.length" inset strong>
-          <k-list-item
+        <sky-list v-else-if="housing.candidates.length" inset strong>
+          <sky-list-item
             v-for="candidate in housing.candidates"
             :key="candidate.id"
             link
@@ -599,17 +589,17 @@ onBeforeUnmount(() => {
             @click="grantKey(candidate)"
           >
             <template #media><UserRound :size="17" /></template>
-          </k-list-item>
-        </k-list>
-        <k-card v-else class="house-keys__empty">
+          </sky-list-item>
+        </sky-list>
+        <sky-card v-else class="house-keys__empty">
           <UsersRound :size="25" />
           <strong>{{ phone.t('Apps.house.noCandidates') }}</strong>
           <p>{{ phone.t('Apps.house.noCandidatesBody') }}</p>
-        </k-card>
+        </sky-card>
       </section>
-    </k-sheet>
+    </sky-sheet>
 
-    <k-dialog
+    <sky-dialog
       :opened="Boolean(revokeCandidate)"
       @backdropclick="revokeCandidate = null"
     >
@@ -618,16 +608,16 @@ onBeforeUnmount(() => {
         {{ phone.t('Apps.house.revokeBody', { name: revokeCandidate.name }) }}
       </p>
       <template #buttons>
-        <k-dialog-button @click="revokeCandidate = null">{{
+        <sky-dialog-button @click="revokeCandidate = null">{{
           phone.t('Apps.house.cancel')
-        }}</k-dialog-button>
-        <k-dialog-button strong @click="revokeKey"
+        }}</sky-dialog-button>
+        <sky-dialog-button strong @click="revokeKey"
           ><Check :size="15" />{{
             phone.t('Apps.house.confirm')
-          }}</k-dialog-button
+          }}</sky-dialog-button
         >
       </template>
-    </k-dialog>
+    </sky-dialog>
 
     <SkyToast
       :opened="toastOpened"
@@ -637,7 +627,7 @@ onBeforeUnmount(() => {
     >
       {{ toastText }}
     </SkyToast>
-  </k-page>
+  </sky-app-page>
 </template>
 
 <style scoped>
@@ -667,8 +657,8 @@ onBeforeUnmount(() => {
     linear-gradient(165deg, #26201d 0, #111216 48%, #171d25 100%);
 }
 .house-navbar {
-  --k-safe-area-top: 46px;
-  --k-navbar-bg-color: transparent;
+  --sky-safe-area-top: 46px;
+  --sky-navbar-glass: transparent;
   position: absolute;
   z-index: 5;
   top: 0;
@@ -913,7 +903,7 @@ onBeforeUnmount(() => {
 }
 :global(.house-detail-sheet),
 :global(.house-candidates-sheet) {
-  --k-sheet-bg-color: var(--house-bg);
+  --sky-sheet__panel-bg-color: var(--house-bg);
   height: 88%;
   overflow: hidden;
   border-radius: 28px 28px 0 0;
@@ -975,7 +965,7 @@ onBeforeUnmount(() => {
   color: #c8522b;
 }
 .house-lock-button {
-  --k-button-bg-color: var(--house-accent);
+  --sky-app-accent: var(--house-accent);
   width: 100%;
   margin-bottom: 18px;
   gap: 6px;
@@ -1096,7 +1086,7 @@ onBeforeUnmount(() => {
   background: var(--house-bg);
 }
 .house-navbar {
-  --k-navbar-bg-color: var(--house-bg);
+  --sky-navbar-glass: var(--house-bg);
 }
 .house-scroll {
   padding: 0 0 46px;
@@ -1277,7 +1267,7 @@ onBeforeUnmount(() => {
   width: calc(100% - 32px);
   margin: 0 16px 20px;
 }
-.house-detail :deep(.k-block-title) {
+.house-detail :deep(.sky-block-title) {
   margin-top: 18px;
   margin-bottom: 7px;
   padding: 0 20px;
diff --git a/frontend/src/views/apps/LocalPagesApp.vue b/frontend/src/views/apps/LocalPagesApp.vue
index 239b96f..5e371a4 100644
--- a/frontend/src/views/apps/LocalPagesApp.vue
+++ b/frontend/src/views/apps/LocalPagesApp.vue
@@ -21,15 +21,15 @@ import {
   X,
 } from 'lucide-vue-next'
 import {
-  kGlass,
-  kIcon,
-  kNavbar,
-  kPage,
-  kSearchbar,
-  kTabbar,
-  kTabbarLink,
-  kToolbarPane,
-} from 'konsta/vue'
+  SkyGlass,
+  SkyIcon,
+  SkyNavbar,
+  SkyAppPage,
+  SkySearchbar,
+  SkyTabBar,
+  SkyTabButton,
+  SkyToolbarPane,
+} from '@/ui'
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -731,17 +731,16 @@ onMounted(async () => {
 </script>
 
 <template>
-  <k-page
+  <sky-app-page
     component="main"
     class="pages pb-safe-24"
     :class="{ 'pages--light': !phone.isDarkMode }"
-    :colors="{ bgIos: 'bg-transparent' }"
   >
     <template v-if="screen === 'main'">
       <div v-if="!onboardingReady" class="pages__gate-loading">
         {{ phone.t('Common.loading') }}
       </div>
-      <k-navbar
+      <sky-navbar
         v-if="onboardingReady && isAuthenticated && pages.profile?.exists"
         class="pages-navbar"
         :subtitle="
@@ -764,7 +763,7 @@ onMounted(async () => {
         }"
       >
         <template v-if="tab === 'feed'">
-          <k-glass class="pages-hero-glass">
+          <sky-glass class="pages-hero-glass">
             <div class="pages__hero">
               <div>
                 <small>{{ phone.t('Apps.localPages.cityPulse') }}</small
@@ -773,8 +772,8 @@ onMounted(async () => {
               </div>
               <MapPin :size="40" />
             </div>
-          </k-glass>
-          <k-searchbar
+          </sky-glass>
+          <sky-searchbar
             component="form"
             class="pages-searchbar"
             :value="search"
@@ -859,7 +858,7 @@ onMounted(async () => {
                     phone.t('Apps.localPages.profilePhotoHint')
                   }}</small>
                   <div class="pages__profile-photo-actions">
-                    <k-glass
+                    <sky-glass
                       ><button
                         type="button"
                         @click="openProfileMedia('camera')"
@@ -867,9 +866,9 @@ onMounted(async () => {
                         <Camera :size="15" />{{
                           phone.t('Apps.localPages.camera')
                         }}
-                      </button></k-glass
+                      </button></sky-glass
                     >
-                    <k-glass
+                    <sky-glass
                       ><button
                         type="button"
                         @click="openProfileMedia('photos')"
@@ -877,7 +876,7 @@ onMounted(async () => {
                         <Images :size="15" />{{
                           phone.t('Apps.localPages.gallery')
                         }}
-                      </button></k-glass
+                      </button></sky-glass
                     >
                   </div>
                   <button
@@ -892,7 +891,7 @@ onMounted(async () => {
               </div>
               <label>
                 {{ phone.t('Apps.localPages.profileEmail') }}
-                <k-glass
+                <sky-glass
                   class="pages__profile-field pages__profile-field--readonly"
                 >
                   <Mail :size="16" />
@@ -900,12 +899,12 @@ onMounted(async () => {
                     :value="pages.profile?.email || account.email"
                     readonly
                   />
-                </k-glass>
+                </sky-glass>
               </label>
               <label>
                 {{ phone.t('Apps.localPages.profileHandle') }}
                 <span>{{ profileDraft.handle.trim().length }}/24</span>
-                <k-glass class="pages__profile-field">
+                <sky-glass class="pages__profile-field">
                   <b>@</b>
                   <input
                     v-model="profileDraft.handle"
@@ -915,7 +914,7 @@ onMounted(async () => {
                     "
                     autocapitalize="none"
                   />
-                </k-glass>
+                </sky-glass>
                 <small>{{
                   phone.t('Apps.localPages.profileHandleHint')
                 }}</small>
@@ -923,7 +922,9 @@ onMounted(async () => {
               <label>
                 {{ phone.t('Apps.localPages.profileBio') }}
                 <span>{{ profileDraft.bio.trim().length }}/160</span>
-                <k-glass class="pages__profile-field pages__profile-field--bio">
+                <sky-glass
+                  class="pages__profile-field pages__profile-field--bio"
+                >
                   <textarea
                     v-model="profileDraft.bio"
                     maxlength="160"
@@ -931,17 +932,17 @@ onMounted(async () => {
                       phone.t('Apps.localPages.profileBioPlaceholder')
                     "
                   />
-                </k-glass>
+                </sky-glass>
               </label>
               <div class="pages__profile-actions">
-                <k-glass
+                <sky-glass
                   v-if="pages.profile?.exists"
                   class="pages__profile-action"
                   ><button type="button" @click="cancelProfileEdit">
                     {{ phone.t('Apps.localPages.profileCancel') }}
-                  </button></k-glass
+                  </button></sky-glass
                 >
-                <k-glass
+                <sky-glass
                   class="pages__profile-action pages__profile-action--save"
                   ><button
                     type="button"
@@ -949,12 +950,12 @@ onMounted(async () => {
                     @click="saveProfile"
                   >
                     {{ phone.t('Apps.localPages.profileSave') }}
-                  </button></k-glass
+                  </button></sky-glass
                 >
               </div>
             </section>
             <template v-else>
-              <k-glass class="pages-profile-glass">
+              <sky-glass class="pages-profile-glass">
                 <div class="pages__profile">
                   <span
                     ><img
@@ -983,8 +984,8 @@ onMounted(async () => {
                     <Pencil :size="15" />
                   </button>
                 </div>
-              </k-glass>
-              <k-glass class="pages-segmented-glass">
+              </sky-glass>
+              <sky-glass class="pages-segmented-glass">
                 <div class="pages__segmented">
                   <button
                     :class="{ active: profileMode === 'own' }"
@@ -998,9 +999,9 @@ onMounted(async () => {
                     {{ phone.t('Apps.localPages.saved') }}
                   </button>
                 </div>
-              </k-glass>
+              </sky-glass>
             </template>
-            <k-glass
+            <sky-glass
               v-if="!profileEditing && pages.profile?.exists"
               class="pages__logout-glass"
             >
@@ -1012,7 +1013,7 @@ onMounted(async () => {
                 <LogOut :size="16" />
                 {{ phone.t('Common.signOut') }}
               </button>
-            </k-glass>
+            </sky-glass>
           </template>
         </template>
 
@@ -1026,7 +1027,7 @@ onMounted(async () => {
           "
           class="pages__feed"
         >
-          <k-glass
+          <sky-glass
             v-for="post in displayedPosts"
             :key="post.id"
             class="pages-post-glass"
@@ -1112,7 +1113,7 @@ onMounted(async () => {
                 </button>
               </div>
             </article>
-          </k-glass>
+          </sky-glass>
           <div v-if="!displayedPosts.length" class="pages__empty">
             <Compass :size="38" /><strong>{{
               phone.t('Apps.localPages.noPosts')
@@ -1122,7 +1123,7 @@ onMounted(async () => {
         </div>
       </section>
 
-      <k-tabbar
+      <sky-tab-bar
         v-if="isAuthenticated && pages.profile?.exists"
         component="nav"
         icons
@@ -1131,8 +1132,8 @@ onMounted(async () => {
         inner-class="!w-full !max-w-none !gap-0 !px-1"
         :aria-label="phone.t('Apps.localPages.name')"
       >
-        <k-toolbar-pane class="pages__tab-pane">
-          <k-tabbar-link
+        <sky-toolbar-pane class="pages__tab-pane">
+          <sky-tab-button
             component="button"
             :active="tab === 'feed'"
             :link-props="{ class: 'pages-tab-button', type: 'button' }"
@@ -1144,10 +1145,10 @@ onMounted(async () => {
               }}</span></template
             >
             <template #icon
-              ><k-icon><Compass :size="20" /></k-icon
+              ><sky-icon><Compass :size="20" /></sky-icon
             ></template>
-          </k-tabbar-link>
-          <k-tabbar-link
+          </sky-tab-button>
+          <sky-tab-button
             component="button"
             :link-props="{ class: 'pages-tab-button', type: 'button' }"
             @click="selectTab('create')"
@@ -1159,10 +1160,10 @@ onMounted(async () => {
             >
             <template #icon
               ><span class="pages__tab-icon pages__tab-icon--create"
-                ><k-icon><Plus :size="21" /></k-icon></span
+                ><sky-icon><Plus :size="21" /></sky-icon></span
             ></template>
-          </k-tabbar-link>
-          <k-tabbar-link
+          </sky-tab-button>
+          <sky-tab-button
             component="button"
             :active="tab === 'profile'"
             :link-props="{ class: 'pages-tab-button', type: 'button' }"
@@ -1174,25 +1175,25 @@ onMounted(async () => {
               }}</span></template
             >
             <template #icon
-              ><k-icon><UserRound :size="20" /></k-icon
+              ><sky-icon><UserRound :size="20" /></sky-icon
             ></template>
-          </k-tabbar-link>
-        </k-toolbar-pane>
-      </k-tabbar>
+          </sky-tab-button>
+        </sky-toolbar-pane>
+      </sky-tab-bar>
     </template>
 
     <section v-else-if="screen === 'detail' && selected" class="pages__detail">
       <header>
-        <k-glass
+        <sky-glass
           component="button"
           type="button"
           class="pages__detail-control"
           @click="screen = 'main'"
         >
           <ArrowLeft :size="20" />
-        </k-glass>
+        </sky-glass>
         <strong>{{ phone.t('Apps.localPages.post') }}</strong>
-        <k-glass
+        <sky-glass
           v-if="selected.is_owner"
           component="button"
           type="button"
@@ -1200,8 +1201,8 @@ onMounted(async () => {
           @click="removePost"
         >
           <Trash2 :size="18" />
-        </k-glass>
-        <k-glass
+        </sky-glass>
+        <sky-glass
           v-else
           component="button"
           type="button"
@@ -1212,7 +1213,7 @@ onMounted(async () => {
             :size="18"
             :fill="selected.is_saved ? 'currentColor' : 'none'"
           />
-        </k-glass>
+        </sky-glass>
       </header>
       <div class="pages__detail-scroll">
         <div
@@ -1272,7 +1273,7 @@ onMounted(async () => {
           </button>
         </article>
       </div>
-      <k-glass class="pages__detail-actions">
+      <sky-glass class="pages__detail-actions">
         <button
           type="button"
           :class="{ active: selected.is_liked }"
@@ -1292,7 +1293,7 @@ onMounted(async () => {
             :fill="selected.is_saved ? 'currentColor' : 'none'"
           />{{ phone.t('Apps.localPages.save') }}
         </button>
-      </k-glass>
+      </sky-glass>
     </section>
 
     <section
@@ -1300,7 +1301,7 @@ onMounted(async () => {
       class="pages__compose"
       :class="{ 'pages__compose--citymarkt': cityMarktListing }"
     >
-      <k-navbar
+      <sky-navbar
         class="pages-create-navbar"
         center-title
         left-class="pages-create-action pages-create-action--close !min-w-[58px] !h-11 !p-0 !rounded-full"
@@ -1340,9 +1341,9 @@ onMounted(async () => {
             {{ phone.t('Apps.localPages.publish') }}
           </button>
         </template>
-      </k-navbar>
+      </sky-navbar>
       <div class="pages__compose-scroll">
-        <k-glass v-if="cityMarktListing" class="pages__citymarkt-source">
+        <sky-glass v-if="cityMarktListing" class="pages__citymarkt-source">
           <Store :size="19" />
           <span
             ><strong>{{
@@ -1352,7 +1353,7 @@ onMounted(async () => {
               phone.t('Apps.localPages.cityMarktComposeHint')
             }}</small></span
           >
-        </k-glass>
+        </sky-glass>
         <label
           >{{ phone.t('Apps.localPages.title') }}
           <span :class="{ valid: draft.title.trim().length >= 5 }"
@@ -1360,13 +1361,13 @@ onMounted(async () => {
             {{
               phone.t('Apps.citymarkt.minimumCharacters', { minimum: '5' })
             }}</span
-          ><k-glass class="pages__field-glass"
+          ><sky-glass class="pages__field-glass"
             ><input
               v-model="draft.title"
               maxlength="80"
               :placeholder="
                 phone.t('Apps.localPages.titlePlaceholder')
-              " /></k-glass
+              " /></sky-glass
         ></label>
         <label
           >{{ phone.t('Apps.localPages.body') }}
@@ -1375,12 +1376,12 @@ onMounted(async () => {
             {{
               phone.t('Apps.citymarkt.minimumCharacters', { minimum: '10' })
             }}</span
-          ><k-glass class="pages__field-glass pages__field-glass--textarea">
+          ><sky-glass class="pages__field-glass pages__field-glass--textarea">
             <textarea
               v-model="draft.body"
               maxlength="1500"
               :placeholder="phone.t('Apps.localPages.bodyPlaceholder')"
-            /></k-glass
+            /></sky-glass
         ></label>
         <div class="pages__form-row">
           <label
@@ -1412,19 +1413,19 @@ onMounted(async () => {
             }}
           </p>
           <div class="pages__photo-actions">
-            <k-glass
+            <sky-glass
               ><button type="button" @click="openMediaApp('photos')">
                 <span><Images :size="20" /></span>
                 <strong>{{ phone.t('Apps.citymarkt.chooseGallery') }}</strong>
                 <small>{{ phone.t('Apps.citymarkt.chooseGalleryBody') }}</small>
-              </button></k-glass
+              </button></sky-glass
             >
-            <k-glass
+            <sky-glass
               ><button type="button" @click="openMediaApp('camera')">
                 <span><Camera :size="20" /></span>
                 <strong>{{ phone.t('Apps.citymarkt.takePhotos') }}</strong>
                 <small>{{ phone.t('Apps.citymarkt.takePhotosBody') }}</small>
-              </button></k-glass
+              </button></sky-glass
             >
           </div>
           <div class="pages__selected-heading">
@@ -1471,7 +1472,7 @@ onMounted(async () => {
         {{ feedback }}
       </div></Transition
     >
-  </k-page>
+  </sky-app-page>
 </template>
 
 <style scoped>
@@ -2701,7 +2702,7 @@ onMounted(async () => {
   background: #fbfbf6 !important;
 }
 .pages-navbar {
-  --k-safe-area-top: 46px;
+  --sky-safe-area-top: 46px;
   position: absolute;
   z-index: 5;
   top: 0;
@@ -2819,7 +2820,7 @@ onMounted(async () => {
   padding-left: 3px !important;
 }
 .pages-create-navbar {
-  --k-safe-area-top: 46px;
+  --sky-safe-area-top: 46px;
   position: absolute;
   z-index: 5;
   top: 0;
diff --git a/frontend/src/views/apps/MailApp.vue b/frontend/src/views/apps/MailApp.vue
index 493f544..d22ff5d 100644
--- a/frontend/src/views/apps/MailApp.vue
+++ b/frontend/src/views/apps/MailApp.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import {
-  kDialog,
-  kDialogButton,
-  kFab,
-  kLink,
-  kNavbar,
-  kNavbarBackLink,
-  kPage,
-  kPreloader,
-  kToast,
-  kToolbar,
-  kToolbarPane,
-} from 'konsta/vue'
+  SkyDialog,
+  SkyDialogButton,
+  SkyFab,
+  SkyLink,
+  SkyNavbar,
+  SkyNavbarBackLink,
+  SkyAppPage,
+  SkySpinner,
+  SkyToast,
+  SkyToolbar,
+  SkyToolbarPane,
+} from '@/ui'
 import {
   ArrowLeft,
   Check,
@@ -743,7 +743,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <k-page
+  <sky-app-page
     v-if="!authenticated"
     class="mail-page mail-page--auth"
     :aria-label="phone.t('Apps.mail.loginTitle')"
@@ -839,7 +839,7 @@ onBeforeUnmount(() => {
         </label>
 
         <button class="mail-auth__submit" type="submit" :disabled="submitting">
-          <k-preloader v-if="submitting" />
+          <sky-spinner v-if="submitting" />
           <template v-else>
             {{
               phone.t(
@@ -854,9 +854,9 @@ onBeforeUnmount(() => {
         </p>
       </form>
     </div>
-  </k-page>
+  </sky-app-page>
 
-  <k-page
+  <sky-app-page
     v-else-if="screen === 'folders'"
     class="mail-page"
     :aria-label="phone.t('Apps.mail.mailboxes')"
@@ -918,7 +918,7 @@ onBeforeUnmount(() => {
         </div>
       </main>
 
-      <k-fab
+      <sky-fab
         component="button"
         class="mail-compose-fab"
         type="button"
@@ -926,18 +926,18 @@ onBeforeUnmount(() => {
         @click="beginCompose()"
       >
         <template #icon><SquarePen :size="22" /></template>
-      </k-fab>
+      </sky-fab>
     </div>
-  </k-page>
+  </sky-app-page>
 
-  <k-page
+  <sky-app-page
     v-else-if="screen === 'list'"
     class="mail-page"
     :aria-label="folderTitle"
   >
     <div class="mail-screen">
       <header class="mail-header mail-header--list">
-        <k-link
+        <sky-link
           component="button"
           icon-only
           class="mail-header__back"
@@ -945,22 +945,22 @@ onBeforeUnmount(() => {
           @click="goBack"
         >
           <ArrowLeft :size="21" />
-        </k-link>
+        </sky-link>
         <div v-if="mail.items.length" class="mail-header__actions">
-          <k-link
+          <sky-link
             v-if="mail.folder === 'trash' && !selecting"
             component="button"
             @click="emptyTrashOpened = true"
           >
             {{ phone.t('Apps.mail.emptyTrash') }}
-          </k-link>
-          <k-link
+          </sky-link>
+          <sky-link
             component="button"
             :disabled="deletingSelected"
             @click="toggleMailSelection"
           >
             {{ phone.t(selecting ? 'Common.done' : 'Apps.mail.select') }}
-          </k-link>
+          </sky-link>
         </div>
         <span v-else />
         <div class="mail-header__title">
@@ -992,7 +992,7 @@ onBeforeUnmount(() => {
       </header>
 
       <main class="mail-list">
-        <div v-if="mail.loading" class="mail-loading"><k-preloader /></div>
+        <div v-if="mail.loading" class="mail-loading"><sky-spinner /></div>
         <template v-else-if="mail.items.length">
           <div
             v-for="(item, index) in mail.items"
@@ -1081,7 +1081,7 @@ onBeforeUnmount(() => {
         </div>
       </main>
 
-      <k-fab
+      <sky-fab
         v-if="!selecting"
         component="button"
         class="mail-compose-fab"
@@ -1090,14 +1090,14 @@ onBeforeUnmount(() => {
         @click="beginCompose()"
       >
         <template #icon><SquarePen :size="21" /></template>
-      </k-fab>
-      <k-toolbar
+      </sky-fab>
+      <sky-toolbar
         v-else
         class="mail-selection-toolbar"
         inner-class="mail-selection-toolbar__inner"
         :outline="false"
       >
-        <k-toolbar-pane class="mail-selection-toolbar__pane">
+        <sky-toolbar-pane class="mail-selection-toolbar__pane">
           <span>
             {{
               phone.t('Apps.mail.selectedCount', {
@@ -1105,29 +1105,29 @@ onBeforeUnmount(() => {
               })
             }}
           </span>
-          <k-link
+          <sky-link
             component="button"
             :disabled="deletingSelected || !selectedItems.length"
             @click="deleteSelectedMessages"
           >
-            <k-preloader v-if="deletingSelected" />
+            <sky-spinner v-if="deletingSelected" />
             <Trash2 v-else :size="18" />
             {{ phone.t('Apps.mail.deleteSelected') }}
-          </k-link>
-        </k-toolbar-pane>
-      </k-toolbar>
+          </sky-link>
+        </sky-toolbar-pane>
+      </sky-toolbar>
     </div>
-  </k-page>
+  </sky-app-page>
 
-  <k-page
+  <sky-app-page
     v-else-if="screen === 'message' && selectedMessage"
     class="mail-page"
     :aria-label="selectedMessage.subject"
   >
     <div class="mail-screen">
-      <k-navbar class="mail-navbar" :title="folderTitle">
+      <sky-navbar class="mail-navbar" :title="folderTitle">
         <template #left>
-          <k-navbar-back-link
+          <sky-navbar-back-link
             component="button"
             :text="folderTitle"
             :aria-label="folderTitle"
@@ -1135,16 +1135,16 @@ onBeforeUnmount(() => {
           />
         </template>
         <template #right>
-          <k-link
+          <sky-link
             component="button"
             icon-only
             :aria-label="phone.t('Apps.mail.compose')"
             @click="beginCompose()"
           >
             <SquarePen :size="20" />
-          </k-link>
+          </sky-link>
         </template>
-      </k-navbar>
+      </sky-navbar>
 
       <article class="mail-message">
         <div class="mail-message__sender">
@@ -1172,13 +1172,13 @@ onBeforeUnmount(() => {
         </div>
       </article>
 
-      <k-toolbar
+      <sky-toolbar
         class="mail-action-bar"
         inner-class="mail-action-bar__inner"
         :outline="false"
       >
-        <k-toolbar-pane class="mail-action-bar__pane">
-          <k-link
+        <sky-toolbar-pane class="mail-action-bar__pane">
+          <sky-link
             component="button"
             icon-only
             type="button"
@@ -1186,8 +1186,8 @@ onBeforeUnmount(() => {
             @click="shareMessage"
           >
             <Share2 :size="20" />
-          </k-link>
-          <k-link
+          </sky-link>
+          <sky-link
             component="button"
             icon-only
             type="button"
@@ -1195,8 +1195,8 @@ onBeforeUnmount(() => {
             @click="composeReply(false)"
           >
             <Reply :size="20" />
-          </k-link>
-          <k-link
+          </sky-link>
+          <sky-link
             component="button"
             icon-only
             type="button"
@@ -1204,8 +1204,8 @@ onBeforeUnmount(() => {
             @click="composeReply(true)"
           >
             <ReplyAll :size="20" />
-          </k-link>
-          <k-link
+          </sky-link>
+          <sky-link
             component="button"
             icon-only
             type="button"
@@ -1213,8 +1213,8 @@ onBeforeUnmount(() => {
             @click="composeForward"
           >
             <Forward :size="20" />
-          </k-link>
-          <k-link
+          </sky-link>
+          <sky-link
             v-if="selectedMessage.trashed_at"
             component="button"
             icon-only
@@ -1223,8 +1223,8 @@ onBeforeUnmount(() => {
             @click="mutateSelected('mail:restore')"
           >
             <RotateCcw :size="20" />
-          </k-link>
-          <k-link
+          </sky-link>
+          <sky-link
             v-else
             component="button"
             icon-only
@@ -1234,8 +1234,8 @@ onBeforeUnmount(() => {
             @click="mutateSelected('mail:trash')"
           >
             <Trash2 :size="20" />
-          </k-link>
-          <k-link
+          </sky-link>
+          <sky-link
             v-if="selectedMessage.trashed_at"
             component="button"
             icon-only
@@ -1245,8 +1245,8 @@ onBeforeUnmount(() => {
             @click="mutateSelected('mail:delete-forever')"
           >
             <Trash2 :size="20" />
-          </k-link>
-          <k-link
+          </sky-link>
+          <sky-link
             v-else
             component="button"
             icon-only
@@ -1255,15 +1255,15 @@ onBeforeUnmount(() => {
             @click="mutateSelected('mail:set-read', { read: false })"
           >
             <MailOpen :size="20" />
-          </k-link>
-        </k-toolbar-pane>
-      </k-toolbar>
+          </sky-link>
+        </sky-toolbar-pane>
+      </sky-toolbar>
     </div>
-  </k-page>
+  </sky-app-page>
 
-  <k-page v-else-if="screen === 'compose'" class="mail-page">
+  <sky-app-page v-else-if="screen === 'compose'" class="mail-page">
     <div class="mail-screen mail-compose">
-      <k-navbar
+      <sky-navbar
         class="mail-navbar mail-compose__navbar"
         left-class="mail-compose__nav-side mail-compose__nav-side--left"
         right-class="mail-compose__nav-side mail-compose__nav-side--right"
@@ -1271,17 +1271,17 @@ onBeforeUnmount(() => {
         :title="phone.t('Apps.mail.compose')"
       >
         <template #left>
-          <k-link
+          <sky-link
             component="button"
             class="mail-compose__nav-action"
             type="button"
             @click="closeCompose"
           >
             {{ phone.t('Common.cancel') }}
-          </k-link>
+          </sky-link>
         </template>
         <template #right>
-          <k-link
+          <sky-link
             component="button"
             class="mail-compose__nav-action"
             type="button"
@@ -1290,9 +1290,9 @@ onBeforeUnmount(() => {
             @click="sendMessage"
           >
             {{ phone.t('Common.send') }}
-          </k-link>
+          </sky-link>
         </template>
-      </k-navbar>
+      </sky-navbar>
 
       <div class="mail-compose__fields">
         <label>
@@ -1340,40 +1340,44 @@ onBeforeUnmount(() => {
         </span>
       </div>
     </div>
-  </k-page>
+  </sky-app-page>
 
-  <k-dialog
+  <sky-dialog
     :opened="emptyTrashOpened"
     @backdropclick="emptyTrashOpened = false"
   >
     <template #title>{{ phone.t('Apps.mail.emptyTrashTitle') }}</template>
     <p>{{ phone.t('Apps.mail.emptyTrashBody') }}</p>
     <template #buttons>
-      <k-dialog-button @click="emptyTrashOpened = false">
+      <sky-dialog-button @click="emptyTrashOpened = false">
         {{ phone.t('Common.cancel') }}
-      </k-dialog-button>
-      <k-dialog-button strong @click="confirmEmptyTrash">
+      </sky-dialog-button>
+      <sky-dialog-button strong @click="confirmEmptyTrash">
         {{ phone.t('Apps.mail.emptyTrash') }}
-      </k-dialog-button>
+      </sky-dialog-button>
     </template>
-  </k-dialog>
+  </sky-dialog>
 
-  <k-toast :opened="toastOpened" position="center" @click="toastOpened = false">
+  <sky-toast
+    :opened="toastOpened"
+    position="center"
+    @click="toastOpened = false"
+  >
     {{ toastText }}
-  </k-toast>
+  </sky-toast>
 </template>
 
 <style scoped>
 .mail-page {
   --mail-blue: #0a84ff;
-  --mail-border: #ffffff1a;
-  --mail-muted: #8e8e93;
-  --mail-surface: #1c1c1e;
+  --mail-border: var(--sky-hairline);
+  --mail-muted: var(--sky-muted);
+  --mail-surface: var(--sky-surface);
   min-height: 0 !important;
   padding: 0 !important;
   overflow: hidden;
-  background: #000 !important;
-  color: #f5f5f7;
+  background: var(--sky-bg) !important;
+  color: var(--sky-text);
 }
 
 .mail-screen {
@@ -1381,7 +1385,7 @@ onBeforeUnmount(() => {
   height: 100%;
   min-height: 0;
   overflow: hidden;
-  background: #000;
+  background: var(--sky-bg);
   animation: mail-screen-enter 240ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
 }
 
@@ -1401,7 +1405,7 @@ button {
   grid-template-columns: 54px 1fr 54px;
   align-items: center;
   padding: 51px 15px 10px;
-  background: #000e;
+  background: color-mix(in srgb, var(--sky-bg) 88%, transparent);
   backdrop-filter: blur(18px) saturate(150%);
   -webkit-backdrop-filter: blur(18px) saturate(150%);
 }
@@ -1545,7 +1549,7 @@ button {
   white-space: nowrap;
 }
 
-.mail-header__actions :deep(.k-link) {
+.mail-header__actions :deep(.sky-link) {
   border: 0;
   padding: 4px 0;
   background: transparent;
@@ -1553,7 +1557,7 @@ button {
   font-size: 12px;
 }
 
-.mail-header__actions :deep(.k-link:disabled) {
+.mail-header__actions :deep(.sky-link:disabled) {
   opacity: 0.4;
 }
 
@@ -1566,7 +1570,7 @@ button {
   margin-top: 11px;
   padding: 0 10px;
   border-radius: 10px;
-  background: #1c1c1e;
+  background: var(--mail-surface);
   color: var(--mail-muted);
 }
 
@@ -1576,7 +1580,7 @@ button {
   border: 0;
   outline: 0;
   background: transparent;
-  color: #f5f5f7;
+  color: var(--sky-text);
   font-size: 14px;
 }
 
@@ -1663,7 +1667,7 @@ button {
   gap: 10px;
   border: 0;
   padding: 8px 13px 8px 19px;
-  background: #000;
+  background: var(--sky-bg);
   text-align: left;
   cursor: pointer;
   transform: translate3d(var(--mail-row-offset), 0, 0);
@@ -1797,7 +1801,7 @@ button {
 }
 
 .mail-row__subject {
-  color: #f5f5f7;
+  color: var(--sky-text);
   font-size: 13px;
 }
 
@@ -1838,21 +1842,21 @@ button {
 
 .mail-selection-toolbar :deep(.mail-selection-toolbar__pane > span) {
   overflow: hidden;
-  color: #f5f5f7;
+  color: var(--sky-text);
   font-size: 12px;
   font-weight: 650;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.mail-selection-toolbar :deep(.k-link) {
+.mail-selection-toolbar :deep(.sky-link) {
   gap: 6px;
   color: #ff453a;
   font-size: 12px;
   font-weight: 650;
 }
 
-.mail-selection-toolbar :deep(.k-link:disabled) {
+.mail-selection-toolbar :deep(.sky-link:disabled) {
   opacity: 0.4;
 }
 
@@ -1873,7 +1877,7 @@ button {
 
 .mail-empty h2 {
   margin: 13px 0 4px;
-  color: #f5f5f7;
+  color: var(--sky-text);
   font-size: 20px;
 }
 
@@ -1893,15 +1897,15 @@ button {
 }
 
 .mail-navbar {
-  --k-safe-area-top: 46px;
-  color: #f5f5f7;
+  --sky-safe-area-top: 46px;
+  color: var(--sky-text);
 }
 
-.mail-navbar :deep(.k-link) {
+.mail-navbar :deep(.sky-link) {
   color: var(--mail-blue);
 }
 
-.mail-navbar :deep(.k-link:disabled) {
+.mail-navbar :deep(.sky-link:disabled) {
   opacity: 0.4;
 }
 
@@ -1995,12 +1999,12 @@ button {
   width: 100%;
 }
 
-.mail-action-bar :deep(.k-link) {
+.mail-action-bar :deep(.sky-link) {
   position: relative;
-  color: #f5f5f7;
+  color: var(--sky-text);
 }
 
-.mail-action-bar :deep(.k-link::after) {
+.mail-action-bar :deep(.sky-link::after) {
   position: absolute;
   bottom: calc(100% + 9px);
   left: 50%;
@@ -2022,13 +2026,13 @@ button {
   white-space: nowrap;
 }
 
-.mail-action-bar :deep(.k-link:focus-visible),
+.mail-action-bar :deep(.sky-link:focus-visible),
 .mail-compose-fab:focus-visible {
   outline: 2px solid var(--mail-blue);
   outline-offset: 2px;
 }
 
-.mail-action-bar :deep(.k-link:focus-visible::after) {
+.mail-action-bar :deep(.sky-link:focus-visible::after) {
   opacity: 1;
   transform: translate(-50%, 0) scale(1);
 }
@@ -2039,7 +2043,7 @@ button {
     background: #ffffff0b;
   }
 
-  .mail-action-bar :deep(.k-link:hover) {
+  .mail-action-bar :deep(.sky-link:hover) {
     color: #64b5ff;
   }
 
@@ -2047,7 +2051,7 @@ button {
     color: #ff6961;
   }
 
-  .mail-action-bar :deep(.k-link:hover::after) {
+  .mail-action-bar :deep(.sky-link:hover::after) {
     opacity: 1;
     transform: translate(-50%, 0) scale(1);
   }
@@ -2079,7 +2083,7 @@ button {
   outline: 0;
   padding: 0 16px 0 0;
   background: transparent;
-  color: #f5f5f7;
+  color: var(--sky-text);
   font-size: 14px;
   font-weight: 400;
 }
@@ -2131,7 +2135,8 @@ button {
   overflow-y: auto;
   padding: 70px 22px 40px;
   background:
-    radial-gradient(circle at 50% 11%, #0a84ff2e, transparent 31%), #000;
+    radial-gradient(circle at 50% 11%, #0a84ff2e, transparent 31%),
+    var(--sky-bg);
 }
 
 .mail-auth__hero {
@@ -2180,7 +2185,7 @@ button {
   margin: 24px 0 14px;
   padding: 3px;
   border-radius: 11px;
-  background: #1c1c1e;
+  background: var(--sky-surface-muted);
 }
 
 .mail-auth__segment button {
@@ -2194,9 +2199,9 @@ button {
 }
 
 .mail-auth__segment button.is-active {
-  background: #3a3a3c;
-  color: #fff;
-  box-shadow: 0 1px 4px #0008;
+  background: var(--sky-surface-tint);
+  color: var(--sky-text);
+  box-shadow: 0 1px 4px rgb(0 0 0 / 18%);
 }
 
 .mail-auth__form {
@@ -2221,10 +2226,10 @@ button {
   align-items: center;
   gap: 10px;
   padding: 0 13px;
-  border: 1px solid #ffffff18;
+  border: 1px solid var(--sky-hairline);
   border-radius: 13px;
-  background: #1c1c1e;
-  color: #8e8e93;
+  background: var(--sky-surface);
+  color: var(--sky-muted);
 }
 
 .mail-auth__field:focus-within > div {
@@ -2238,7 +2243,7 @@ button {
   border: 0;
   outline: 0;
   background: transparent;
-  color: #f5f5f7;
+  color: var(--sky-text);
   font-size: 14px;
 }
 
@@ -2329,7 +2334,7 @@ button {
     transition-duration: 0.01ms;
   }
 
-  .mail-action-bar :deep(.k-link) {
+  .mail-action-bar :deep(.sky-link) {
     transition-duration: 0.01ms;
   }
 }
diff --git a/frontend/src/views/apps/MapApp.vue b/frontend/src/views/apps/MapApp.vue
index e628cae..aaaf209 100644
--- a/frontend/src/views/apps/MapApp.vue
+++ b/frontend/src/views/apps/MapApp.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import {
-  kButton,
-  kFab,
-  kList,
-  kListInput,
-  kPage,
-  kPreloader,
-  kSheet,
-  kToast,
-} from 'konsta/vue'
+  SkyButton,
+  SkyFab,
+  SkyList,
+  SkyField,
+  SkyAppPage,
+  SkySpinner,
+  SkySheet,
+  SkyToast,
+} from '@/ui'
 import {
   LocateFixed,
   Map,
@@ -103,15 +103,6 @@ const markerColors: Array<{ id: MapMarkerColor; value: string }> = [
   { id: 'red', value: '#ff453a' },
   { id: 'purple', value: '#bf5af2' },
 ]
-const mapControlColors = {
-  bgIos: 'bg-ios-light-glass dark:bg-ios-dark-glass',
-  activeBgIos: 'active:bg-white/90 dark:active:bg-white/20',
-  textIos: 'text-black dark:text-white',
-}
-const locationControlColors = {
-  ...mapControlColors,
-  textIos: 'text-white',
-}
 const activeMapStyle = computed(
   () => mapStyles.find((style) => style.id === mapStyle.value) ?? mapStyles[0],
 )
@@ -489,7 +480,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <k-page class="map-app">
+  <sky-app-page class="map-app">
     <div
       ref="viewportRef"
       class="map-viewport"
@@ -566,35 +557,35 @@ onBeforeUnmount(() => {
     </div>
 
     <nav class="map-controls" :aria-label="phone.t('Apps.map.controls')">
-      <k-fab
+      <sky-fab
         component="button"
         type="button"
         class="map-control map-control--share"
-        :colors="locationControlColors"
+        variant="neutral"
         :aria-label="phone.t('Apps.easyShare.name')"
         @click="shareCurrentLocation"
       >
         <template #icon>
           <Share2 aria-hidden="true" />
         </template>
-      </k-fab>
-      <k-fab
+      </sky-fab>
+      <sky-fab
         component="button"
         type="button"
         class="map-control"
-        :colors="mapControlColors"
+        variant="neutral"
         :aria-label="`${phone.t('Apps.map.switchStyle')}: ${phone.t(`Apps.map.styles.${mapStyle}`)}`"
         @click="cycleMapStyle"
       >
         <template #icon>
           <component :is="activeMapStyle.icon" aria-hidden="true" />
         </template>
-      </k-fab>
-      <k-fab
+      </sky-fab>
+      <sky-fab
         component="button"
         type="button"
         class="map-control map-control--marker"
-        :colors="locationControlColors"
+        variant="neutral"
         :disabled="placingMarker"
         :aria-label="phone.t('Apps.map.addMarker')"
         @click="startMarkerPlacement"
@@ -602,12 +593,12 @@ onBeforeUnmount(() => {
         <template #icon>
           <MapPinPlus aria-hidden="true" />
         </template>
-      </k-fab>
-      <k-fab
+      </sky-fab>
+      <sky-fab
         component="button"
         type="button"
         class="map-control map-control--location"
-        :colors="locationControlColors"
+        variant="neutral"
         :disabled="locating"
         :aria-label="phone.t('Apps.map.currentLocation')"
         @click="loadCurrentLocation(true)"
@@ -615,138 +606,138 @@ onBeforeUnmount(() => {
         <template #icon>
           <LocateFixed aria-hidden="true" />
         </template>
-      </k-fab>
+      </sky-fab>
     </nav>
 
     <section v-if="placingMarker" class="map-placement-panel">
       <strong>{{ phone.t('Apps.map.placeMarker') }}</strong>
       <span>{{ phone.t('Apps.map.placeMarkerHint') }}</span>
       <div>
-        <k-button small rounded outline @click="cancelMarkerPlacement">
+        <sky-button small rounded outline @click="cancelMarkerPlacement">
           <X :size="16" />
           {{ phone.t('Common.cancel') }}
-        </k-button>
-        <k-button small rounded @click="openMarkerEditor">
+        </sky-button>
+        <sky-button small rounded @click="openMarkerEditor">
           <MapPin :size="16" />
           {{ phone.t('Apps.map.addHere') }}
-        </k-button>
+        </sky-button>
       </div>
     </section>
 
     <div class="map-marker-sheet">
-      <k-sheet
+      <sky-sheet
         :opened="Boolean(draftCoords || selectedMarker)"
         @backdropclick="closeMarkerSheet"
       >
-      <section
-        v-if="draftCoords"
-        class="map-marker-sheet__content"
-        :class="{ 'map-marker-sheet__content--dark': phone.isDarkMode }"
-        role="dialog"
-        aria-modal="true"
-        :aria-label="phone.t('Apps.map.newMarker')"
-      >
-        <h2>{{ phone.t('Apps.map.newMarker') }}</h2>
-        <p>{{ phone.t('Apps.map.newMarkerDescription') }}</p>
-        <k-list inset strong>
-          <k-list-input
-            input-id="map-marker-label"
-            :label="phone.t('Apps.map.markerName')"
-            :placeholder="phone.t('Apps.map.markerNamePlaceholder')"
-            :value="markerLabel"
-            maxlength="40"
-            outline
-            @input="updateMarkerLabel"
-            @keydown.enter="handleEnterAction($event, saveMarker)"
-          />
-        </k-list>
-        <span class="map-marker-sheet__label">{{
-          phone.t('Apps.map.markerColor')
-        }}</span>
-        <div
-          class="map-marker-colors"
-          role="radiogroup"
-          :aria-label="phone.t('Apps.map.markerColor')"
+        <section
+          v-if="draftCoords"
+          class="map-marker-sheet__content"
+          :class="{ 'map-marker-sheet__content--dark': phone.isDarkMode }"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="phone.t('Apps.map.newMarker')"
         >
-          <button
-            v-for="color in markerColors"
-            :key="color.id"
-            type="button"
-            role="radio"
-            :aria-checked="markerColor === color.id"
-            :aria-label="phone.t(`Apps.map.colors.${color.id}`)"
-            :class="{ 'map-marker-color--active': markerColor === color.id }"
-            :style="{ backgroundColor: color.value }"
-            @click="markerColor = color.id"
-          ></button>
-        </div>
-        <p v-if="markerError" class="map-marker-error" role="alert">
-          {{ markerError }}
-        </p>
-        <k-button
-          large
-          rounded
-          :disabled="mapStore.isLoading || !markerLabel.trim()"
-          @click="saveMarker"
-        >
-          <k-preloader v-if="mapStore.isLoading" />
-          <template v-else>{{ phone.t('Apps.map.saveMarker') }}</template>
-        </k-button>
-      </section>
+          <h2>{{ phone.t('Apps.map.newMarker') }}</h2>
+          <p>{{ phone.t('Apps.map.newMarkerDescription') }}</p>
+          <sky-list inset strong>
+            <sky-field
+              input-id="map-marker-label"
+              :label="phone.t('Apps.map.markerName')"
+              :placeholder="phone.t('Apps.map.markerNamePlaceholder')"
+              :value="markerLabel"
+              maxlength="40"
+              outline
+              @input="updateMarkerLabel"
+              @keydown.enter="handleEnterAction($event, saveMarker)"
+            />
+          </sky-list>
+          <span class="map-marker-sheet__label">{{
+            phone.t('Apps.map.markerColor')
+          }}</span>
+          <div
+            class="map-marker-colors"
+            role="radiogroup"
+            :aria-label="phone.t('Apps.map.markerColor')"
+          >
+            <button
+              v-for="color in markerColors"
+              :key="color.id"
+              type="button"
+              role="radio"
+              :aria-checked="markerColor === color.id"
+              :aria-label="phone.t(`Apps.map.colors.${color.id}`)"
+              :class="{ 'map-marker-color--active': markerColor === color.id }"
+              :style="{ backgroundColor: color.value }"
+              @click="markerColor = color.id"
+            ></button>
+          </div>
+          <p v-if="markerError" class="map-marker-error" role="alert">
+            {{ markerError }}
+          </p>
+          <sky-button
+            large
+            rounded
+            :disabled="mapStore.isLoading || !markerLabel.trim()"
+            @click="saveMarker"
+          >
+            <sky-spinner v-if="mapStore.isLoading" />
+            <template v-else>{{ phone.t('Apps.map.saveMarker') }}</template>
+          </sky-button>
+        </section>
 
-      <section
-        v-else-if="selectedMarker"
-        class="map-marker-sheet__content map-marker-sheet__content--details"
-        :class="{ 'map-marker-sheet__content--dark': phone.isDarkMode }"
-        role="dialog"
-        aria-modal="true"
-        :aria-label="selectedMarker.label"
-      >
-        <span
-          class="map-marker-sheet__pin"
-          :style="{ color: markerColorValue(selectedMarker.color) }"
+        <section
+          v-else-if="selectedMarker"
+          class="map-marker-sheet__content map-marker-sheet__content--details"
+          :class="{ 'map-marker-sheet__content--dark': phone.isDarkMode }"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="selectedMarker.label"
         >
-          <MapPin :size="32" fill="currentColor" />
-        </span>
-        <h2>{{ selectedMarker.label }}</h2>
-        <p>
-          {{ selectedMarker.coords.x.toFixed(1) }},
-          {{ selectedMarker.coords.y.toFixed(1) }}
-        </p>
-        <p v-if="markerError" class="map-marker-error" role="alert">
-          {{ markerError }}
-        </p>
-        <k-button
-          large
-          rounded
-          class="map-marker-waypoint"
-          :disabled="mapStore.isLoading"
-          @click="setSelectedMarkerWaypoint"
-        >
-          <Route :size="17" />
-          {{ phone.t('Apps.map.setWaypoint') }}
-        </k-button>
-        <k-button
-          large
-          rounded
-          class="map-marker-delete"
-          :disabled="mapStore.isLoading"
-          @click="deleteSelectedMarker"
-        >
-          <k-preloader v-if="mapStore.isLoading" />
-          <template v-else>
-            <Trash2 :size="17" />
-            {{ phone.t('Apps.map.deleteMarker') }}
-          </template>
-        </k-button>
-      </section>
-      </k-sheet>
+          <span
+            class="map-marker-sheet__pin"
+            :style="{ color: markerColorValue(selectedMarker.color) }"
+          >
+            <MapPin :size="32" fill="currentColor" />
+          </span>
+          <h2>{{ selectedMarker.label }}</h2>
+          <p>
+            {{ selectedMarker.coords.x.toFixed(1) }},
+            {{ selectedMarker.coords.y.toFixed(1) }}
+          </p>
+          <p v-if="markerError" class="map-marker-error" role="alert">
+            {{ markerError }}
+          </p>
+          <sky-button
+            large
+            rounded
+            class="map-marker-waypoint"
+            :disabled="mapStore.isLoading"
+            @click="setSelectedMarkerWaypoint"
+          >
+            <Route :size="17" />
+            {{ phone.t('Apps.map.setWaypoint') }}
+          </sky-button>
+          <sky-button
+            large
+            rounded
+            class="map-marker-delete"
+            :disabled="mapStore.isLoading"
+            @click="deleteSelectedMarker"
+          >
+            <sky-spinner v-if="mapStore.isLoading" />
+            <template v-else>
+              <Trash2 :size="17" />
+              {{ phone.t('Apps.map.deleteMarker') }}
+            </template>
+          </sky-button>
+        </section>
+      </sky-sheet>
     </div>
 
-    <k-toast :opened="Boolean(toastText)" position="center">
+    <sky-toast :opened="Boolean(toastText)" position="center">
       {{ toastText }}
-    </k-toast>
-  </k-page>
+    </sky-toast>
+  </sky-app-page>
 </template>
 
 <style scoped>
@@ -910,7 +901,12 @@ onBeforeUnmount(() => {
 }
 
 .map-control {
-  --color-primary: #8e8e93;
+  --sky-glass-solid: rgb(247 247 248 / 92%);
+  color: #151515;
+}
+.sky-app-page--dark .map-control {
+  --sky-glass-solid: rgb(44 44 46 / 88%);
+  color: #fff;
 }
 
 .map-control svg {
diff --git a/frontend/src/views/apps/MusicApp.vue b/frontend/src/views/apps/MusicApp.vue
index 574054e..b2b7187 100644
--- a/frontend/src/views/apps/MusicApp.vue
+++ b/frontend/src/views/apps/MusicApp.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
 import {
-  kBlock,
-  kBlockTitle,
-  kButton,
-  kDialog,
-  kDialogButton,
-  kGlass,
-  kLink,
-  kList,
-  kListButton,
-  kListInput,
-  kListItem,
-  kNavbar,
-  kNavbarBackLink,
-  kPage,
-  kPreloader,
-  kRange,
-  kSearchbar,
-  kSheet,
-  kToast,
-} from 'konsta/vue'
+  SkyBlock,
+  SkyBlockTitle,
+  SkyButton,
+  SkyDialog,
+  SkyDialogButton,
+  SkyGlass,
+  SkyLink,
+  SkyList,
+  SkyListButton,
+  SkyField,
+  SkyListItem,
+  SkyNavbar,
+  SkyNavbarBackLink,
+  SkyAppPage,
+  SkySpinner,
+  SkyRange,
+  SkySearchbar,
+  SkySheet,
+  SkyToast,
+} from '@/ui'
 import {
   Check,
   CirclePlus,
@@ -283,7 +283,9 @@ function openTrackMenu(event: MouseEvent, track: MusicTrack): void {
   actionMenuOpened.value = true
 }
 
-function shareTrack(selectedTrack: MusicTrack | null = actionTrack.value): void {
+function shareTrack(
+  selectedTrack: MusicTrack | null = actionTrack.value,
+): void {
   const track = selectedTrack
   if (!track) return
   closeMenus()
@@ -311,7 +313,9 @@ function shareActivePlaylist(): void {
     id: playlist.id,
     kind: 'playlist',
     link: `skyphone://music/playlist/${playlist.id}`,
-    subtitle: phone.t('Apps.music.songCount', { count: String(playlist.entries.length) }),
+    subtitle: phone.t('Apps.music.songCount', {
+      count: String(playlist.entries.length),
+    }),
     title: playlist.name,
   })
 }
@@ -569,7 +573,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <k-page
+  <sky-app-page
     component="main"
     class="music-app sky-ui-provider"
     :class="{
@@ -578,20 +582,20 @@ onBeforeUnmount(() => {
       'sky-ui-provider--dark': phone.isDarkMode,
     }"
   >
-    <k-navbar
+    <sky-navbar
       component="nav"
       class="music-navbar"
       title-class="music-navbar-title"
       :title="activePlaylist ? activePlaylist.name : phone.t('Apps.music.name')"
     >
       <template v-if="activePlaylist" #left>
-        <k-navbar-back-link
+        <sky-navbar-back-link
           :text="phone.t('Apps.music.tabs.playlists')"
           @click="closePlaylist"
         />
       </template>
       <template #right>
-        <k-link
+        <sky-link
           v-if="activePlaylist"
           component="button"
           icon-only
@@ -599,8 +603,8 @@ onBeforeUnmount(() => {
           @click="openAddMenu"
         >
           <Ellipsis :size="22" />
-        </k-link>
-        <k-link
+        </sky-link>
+        <sky-link
           v-else
           component="button"
           icon-only
@@ -608,16 +612,16 @@ onBeforeUnmount(() => {
           @click="openAddMenu"
         >
           <Plus :size="24" />
-        </k-link>
+        </sky-link>
       </template>
-    </k-navbar>
+    </sky-navbar>
 
     <div ref="scrollEl" class="music-scroll">
       <div
         v-if="music.isLoading && !allTracks.length && !music.playlists.length"
         class="music-loading"
       >
-        <k-preloader />
+        <sky-spinner />
         <span>{{ phone.t('Apps.music.loading') }}</span>
       </div>
 
@@ -649,7 +653,7 @@ onBeforeUnmount(() => {
             }}
           </p>
           <div class="music-playlist-actions">
-            <k-button
+            <sky-button
               large
               rounded
               :disabled="!playlistTracks.length"
@@ -660,8 +664,8 @@ onBeforeUnmount(() => {
             >
               <Play :size="18" fill="currentColor" />
               {{ phone.t('Apps.music.play') }}
-            </k-button>
-            <k-button
+            </sky-button>
+            <sky-button
               large
               rounded
               tonal
@@ -669,12 +673,12 @@ onBeforeUnmount(() => {
             >
               <CirclePlus :size="18" />
               {{ phone.t('Apps.music.addSongs') }}
-            </k-button>
+            </sky-button>
           </div>
         </section>
 
-        <k-list v-if="playlistTracks.length" nested class="music-track-list">
-          <k-list-item
+        <sky-list v-if="playlistTracks.length" nested class="music-track-list">
+          <sky-list-item
             v-for="track in playlistTracks"
             :key="`${track.source}:${track.id}`"
             link
@@ -695,22 +699,22 @@ onBeforeUnmount(() => {
               </span>
             </template>
             <template #after>
-              <k-link
+              <sky-link
                 component="button"
                 icon-only
                 :aria-label="phone.t('Apps.music.songActions')"
                 @click="openTrackMenu($event, track)"
               >
                 <Ellipsis :size="20" />
-              </k-link>
+              </sky-link>
             </template>
-          </k-list-item>
-        </k-list>
-        <k-block v-else class="music-empty" inset>
+          </sky-list-item>
+        </sky-list>
+        <sky-block v-else class="music-empty" inset>
           <ListMusic :size="43" />
           <strong>{{ phone.t('Apps.music.emptyPlaylist') }}</strong>
           <span>{{ phone.t('Apps.music.emptyPlaylistBody') }}</span>
-        </k-block>
+        </sky-block>
       </template>
 
       <template v-else-if="activeTab === 'library'">
@@ -719,7 +723,11 @@ onBeforeUnmount(() => {
           <p>{{ phone.t('Apps.music.librarySubtitle') }}</p>
         </header>
 
-        <k-glass v-if="featuredTrack" class="music-featured" :highlight="false">
+        <sky-glass
+          v-if="featuredTrack"
+          class="music-featured"
+          :highlight="false"
+        >
           <button type="button" @click="playFeatured">
             <div class="music-featured-copy">
               <small>{{ phone.t('Apps.music.featured') }}</small>
@@ -743,12 +751,12 @@ onBeforeUnmount(() => {
               <Music2 v-else :size="52" />
             </div>
           </button>
-        </k-glass>
+        </sky-glass>
 
         <template v-if="recentTracks.length">
-          <k-block-title class="music-section-title">{{
+          <sky-block-title class="music-section-title">{{
             phone.t('Apps.music.recentlyAdded')
-          }}</k-block-title>
+          }}</sky-block-title>
           <section class="music-album-grid">
             <button
               v-for="track in recentTracks"
@@ -770,11 +778,11 @@ onBeforeUnmount(() => {
             </button>
           </section>
 
-          <k-block-title class="music-section-title">{{
+          <sky-block-title class="music-section-title">{{
             phone.t('Apps.music.songs')
-          }}</k-block-title>
-          <k-list nested class="music-track-list">
-            <k-list-item
+          }}</sky-block-title>
+          <sky-list nested class="music-track-list">
+            <sky-list-item
               v-for="track in allTracks"
               :key="`${track.source}:${track.id}`"
               link
@@ -795,27 +803,27 @@ onBeforeUnmount(() => {
                 </span>
               </template>
               <template #after>
-                <k-link
+                <sky-link
                   component="button"
                   icon-only
                   :aria-label="phone.t('Apps.music.songActions')"
                   @click="openTrackMenu($event, track)"
                 >
                   <Ellipsis :size="20" />
-                </k-link>
+                </sky-link>
               </template>
-            </k-list-item>
-          </k-list>
+            </sky-list-item>
+          </sky-list>
         </template>
-        <k-block v-else class="music-empty music-empty--library" inset>
+        <sky-block v-else class="music-empty music-empty--library" inset>
           <Music2 :size="48" />
           <strong>{{ phone.t('Apps.music.emptyLibrary') }}</strong>
           <span>{{ phone.t('Apps.music.emptyLibraryBody') }}</span>
-          <k-button rounded @click="openSheet('youtube')">
+          <sky-button rounded @click="openSheet('youtube')">
             <ExternalLink :size="17" />
             {{ phone.t('Apps.music.addYouTube') }}
-          </k-button>
-        </k-block>
+          </sky-button>
+        </sky-block>
       </template>
 
       <template v-else-if="activeTab === 'playlists'">
@@ -857,30 +865,30 @@ onBeforeUnmount(() => {
             </small>
           </button>
         </section>
-        <k-block v-else class="music-empty music-empty--library" inset>
+        <sky-block v-else class="music-empty music-empty--library" inset>
           <ListMusic :size="48" />
           <strong>{{ phone.t('Apps.music.noPlaylists') }}</strong>
           <span>{{ phone.t('Apps.music.noPlaylistsBody') }}</span>
-          <k-button rounded @click="openNewPlaylist()">
+          <sky-button rounded @click="openNewPlaylist()">
             <Plus :size="17" />
             {{ phone.t('Apps.music.newPlaylist') }}
-          </k-button>
-        </k-block>
+          </sky-button>
+        </sky-block>
       </template>
 
       <template v-else>
         <header class="music-large-title music-large-title--search">
           <h1>{{ pageTitle }}</h1>
         </header>
-        <k-searchbar
+        <sky-searchbar
           class="music-searchbar"
           :value="searchQuery"
           :placeholder="phone.t('Apps.music.searchPlaceholder')"
           @input="searchQuery = eventValue($event)"
           @clear="searchQuery = ''"
         />
-        <k-list v-if="searchResults.length" nested class="music-track-list">
-          <k-list-item
+        <sky-list v-if="searchResults.length" nested class="music-track-list">
+          <sky-list-item
             v-for="track in searchResults"
             :key="`${track.source}:${track.id}`"
             link
@@ -901,26 +909,26 @@ onBeforeUnmount(() => {
               </span>
             </template>
             <template #after>
-              <k-link
+              <sky-link
                 component="button"
                 icon-only
                 :aria-label="phone.t('Apps.music.songActions')"
                 @click="openTrackMenu($event, track)"
               >
                 <Ellipsis :size="20" />
-              </k-link>
+              </sky-link>
             </template>
-          </k-list-item>
-        </k-list>
-        <k-block v-else class="music-empty" inset>
+          </sky-list-item>
+        </sky-list>
+        <sky-block v-else class="music-empty" inset>
           <Search :size="42" />
           <strong>{{ phone.t('Apps.music.noResults') }}</strong>
           <span>{{ phone.t('Apps.music.noResultsBody') }}</span>
-        </k-block>
+        </sky-block>
       </template>
     </div>
 
-    <k-glass
+    <sky-glass
       v-if="music.currentTrack"
       class="music-mini-player"
       :highlight="false"
@@ -956,7 +964,7 @@ onBeforeUnmount(() => {
       >
         <SkipForward :size="23" fill="currentColor" />
       </button>
-    </k-glass>
+    </sky-glass>
 
     <SkyPillNavigation
       v-if="!activePlaylist"
@@ -1012,38 +1020,41 @@ onBeforeUnmount(() => {
       role="group"
       :aria-label="phone.t('Apps.music.addMusic')"
     >
-      <k-list nested>
+      <sky-list nested>
         <template v-if="activePlaylist">
-          <k-list-button link-component="button" @click="shareActivePlaylist">
+          <sky-list-button link-component="button" @click="shareActivePlaylist">
             <Share2 :size="18" /> {{ phone.t('Apps.easyShare.name') }}
-          </k-list-button>
-          <k-list-button
+          </sky-list-button>
+          <sky-list-button
             link-component="button"
             @click="openActivePlaylistTrackPicker"
           >
             <CirclePlus :size="18" /> {{ phone.t('Apps.music.addSongs') }}
-          </k-list-button>
-          <k-list-button link-component="button" @click="openSheet('rename')">
+          </sky-list-button>
+          <sky-list-button link-component="button" @click="openSheet('rename')">
             <ListMusic :size="18" />
             {{ phone.t('Apps.music.renamePlaylist') }}
-          </k-list-button>
-          <k-list-button
+          </sky-list-button>
+          <sky-list-button
             link-component="button"
             class="music-destructive"
             @click="requestDeletePlaylist"
           >
             <Trash2 :size="18" /> {{ phone.t('Apps.music.deletePlaylist') }}
-          </k-list-button>
+          </sky-list-button>
         </template>
         <template v-else>
-          <k-list-button link-component="button" @click="openSheet('youtube')">
+          <sky-list-button
+            link-component="button"
+            @click="openSheet('youtube')"
+          >
             <ExternalLink :size="18" /> {{ phone.t('Apps.music.addYouTube') }}
-          </k-list-button>
-          <k-list-button link-component="button" @click="openNewPlaylist()">
+          </sky-list-button>
+          <sky-list-button link-component="button" @click="openNewPlaylist()">
             <ListMusic :size="18" /> {{ phone.t('Apps.music.newPlaylist') }}
-          </k-list-button>
+          </sky-list-button>
         </template>
-      </k-list>
+      </sky-list>
     </section>
 
     <section
@@ -1056,398 +1067,397 @@ onBeforeUnmount(() => {
       role="group"
       :aria-label="phone.t('Apps.music.songActions')"
     >
-      <k-list nested>
-        <k-list-button link-component="button" @click="shareTrack">
+      <sky-list nested>
+        <sky-list-button link-component="button" @click="shareTrack()">
           <Share2 :size="18" /> {{ phone.t('Apps.easyShare.name') }}
-        </k-list-button>
-        <k-list-button
+        </sky-list-button>
+        <sky-list-button
           link-component="button"
           @click="openPlaylistPicker(actionTrack)"
         >
           <CirclePlus :size="18" /> {{ phone.t('Apps.music.addToPlaylist') }}
-        </k-list-button>
-        <k-list-button
+        </sky-list-button>
+        <sky-list-button
           v-if="activePlaylist"
           link-component="button"
           class="music-destructive"
           @click="removeFromActivePlaylist"
         >
           <X :size="18" /> {{ phone.t('Apps.music.removeFromPlaylist') }}
-        </k-list-button>
-        <k-list-button
+        </sky-list-button>
+        <sky-list-button
           v-if="actionTrack?.source === 'youtube'"
           link-component="button"
           class="music-destructive"
           @click="requestRemoveTrack"
         >
           <Trash2 :size="18" /> {{ phone.t('Apps.music.removeFromLibrary') }}
-        </k-list-button>
-      </k-list>
+        </sky-list-button>
+      </sky-list>
     </section>
 
     <div class="music-form-sheet">
-      <k-sheet
-        :opened="Boolean(activeSheet)"
-        @backdropclick="closeSheet"
-      >
+      <sky-sheet :opened="Boolean(activeSheet)" @backdropclick="closeSheet">
         <section class="music-sheet-content">
-        <header>
-          <k-link component="button" @click="closeSheet">{{
-            phone.t(
-              activeSheet === 'track-picker' ? 'Common.done' : 'Common.cancel',
-            )
-          }}</k-link>
-          <strong>{{ sheetTitle }}</strong>
-          <span />
-        </header>
+          <header>
+            <sky-link component="button" @click="closeSheet">{{
+              phone.t(
+                activeSheet === 'track-picker'
+                  ? 'Common.done'
+                  : 'Common.cancel',
+              )
+            }}</sky-link>
+            <strong>{{ sheetTitle }}</strong>
+            <span />
+          </header>
 
-        <template v-if="activeSheet === 'youtube'">
-          <div class="music-sheet-icon"><ExternalLink :size="28" /></div>
-          <p>{{ phone.t('Apps.music.youtubeBody') }}</p>
-          <k-list inset strong>
-            <k-list-input
-              :label="phone.t('Apps.music.youtubeUrl')"
-              input-id="music-youtube-url"
-              inputmode="url"
-              :placeholder="phone.t('Apps.music.youtubePlaceholder')"
-              type="url"
-              :value="youtubeUrl"
-              @input="youtubeUrl = eventValue($event)"
-              @keydown.enter="handleEnterAction($event, submitYouTube)"
-            />
-            <k-list-input
-              :label="phone.t('Apps.music.youtubeTitle')"
-              input-id="music-youtube-title"
-              maxlength="160"
-              :placeholder="phone.t('Apps.music.youtubeTitlePlaceholder')"
-              :value="youtubeTitle"
-              @input="youtubeTitle = eventValue($event)"
-              @keydown.enter="handleEnterAction($event, submitYouTube)"
-            />
-            <k-list-input
-              :label="phone.t('Apps.music.youtubeArtist')"
-              input-id="music-youtube-artist"
-              maxlength="120"
-              :placeholder="phone.t('Apps.music.youtubeArtistPlaceholder')"
-              :value="youtubeArtist"
-              @input="youtubeArtist = eventValue($event)"
-              @keydown.enter="handleEnterAction($event, submitYouTube)"
-            />
-          </k-list>
-          <p v-if="music.error" class="music-form-error" role="alert">
-            {{ errorText() }}
-          </p>
-          <k-button
-            large
-            rounded
-            :disabled="music.isLoading || !youtubeUrl.trim()"
-            @click="submitYouTube"
-          >
-            <k-preloader v-if="music.isLoading" />
-            <template v-else>{{ phone.t('Apps.music.addToLibrary') }}</template>
-          </k-button>
-        </template>
-
-        <template v-else-if="activeSheet === 'playlist-picker'">
-          <k-list
-            v-if="music.playlists.length"
-            inset
-            strong
-            class="music-picker-list"
-          >
-            <k-list-item
-              v-for="playlist in music.playlists"
-              :key="playlist.id"
-              :link="!actionTrackIsInPlaylist(playlist)"
-              link-component="button"
-              :chevron="false"
-              :link-props="{
-                type: 'button',
-                disabled: music.isLoading || actionTrackIsInPlaylist(playlist),
-              }"
-              :title="playlist.name"
-              :subtitle="
-                phone.t('Apps.music.songCount', {
-                  count: String(playlist.entries.length),
-                })
-              "
-              @click="addTrackToPlaylist(playlist)"
-            >
-              <template #media><ListMusic :size="22" /></template>
-              <template #after>
-                <span
-                  v-if="actionTrackIsInPlaylist(playlist)"
-                  class="music-picker-added"
-                >
-                  <Check :size="16" />
-                  {{ phone.t('Apps.music.alreadyAdded') }}
-                </span>
-                <CirclePlus v-else :size="19" />
-              </template>
-            </k-list-item>
-          </k-list>
-          <k-button
-            v-if="music.playlists.length"
-            rounded
-            tonal
-            class="music-picker-create"
-            :disabled="music.isLoading"
-            @click="openNewPlaylist(actionTrack)"
-          >
-            <Plus :size="17" /> {{ phone.t('Apps.music.newPlaylist') }}
-          </k-button>
-          <k-block v-else class="music-empty" inset>
-            <ListMusic :size="42" />
-            <strong>{{ phone.t('Apps.music.noPlaylists') }}</strong>
-            <span>{{ phone.t('Apps.music.createPlaylistFirst') }}</span>
-            <k-button
+          <template v-if="activeSheet === 'youtube'">
+            <div class="music-sheet-icon"><ExternalLink :size="28" /></div>
+            <p>{{ phone.t('Apps.music.youtubeBody') }}</p>
+            <sky-list inset strong>
+              <sky-field
+                :label="phone.t('Apps.music.youtubeUrl')"
+                input-id="music-youtube-url"
+                inputmode="url"
+                :placeholder="phone.t('Apps.music.youtubePlaceholder')"
+                type="url"
+                :value="youtubeUrl"
+                @input="youtubeUrl = eventValue($event)"
+                @keydown.enter="handleEnterAction($event, submitYouTube)"
+              />
+              <sky-field
+                :label="phone.t('Apps.music.youtubeTitle')"
+                input-id="music-youtube-title"
+                maxlength="160"
+                :placeholder="phone.t('Apps.music.youtubeTitlePlaceholder')"
+                :value="youtubeTitle"
+                @input="youtubeTitle = eventValue($event)"
+                @keydown.enter="handleEnterAction($event, submitYouTube)"
+              />
+              <sky-field
+                :label="phone.t('Apps.music.youtubeArtist')"
+                input-id="music-youtube-artist"
+                maxlength="120"
+                :placeholder="phone.t('Apps.music.youtubeArtistPlaceholder')"
+                :value="youtubeArtist"
+                @input="youtubeArtist = eventValue($event)"
+                @keydown.enter="handleEnterAction($event, submitYouTube)"
+              />
+            </sky-list>
+            <p v-if="music.error" class="music-form-error" role="alert">
+              {{ errorText() }}
+            </p>
+            <sky-button
+              large
               rounded
+              :disabled="music.isLoading || !youtubeUrl.trim()"
+              @click="submitYouTube"
+            >
+              <sky-spinner v-if="music.isLoading" />
+              <template v-else>{{
+                phone.t('Apps.music.addToLibrary')
+              }}</template>
+            </sky-button>
+          </template>
+
+          <template v-else-if="activeSheet === 'playlist-picker'">
+            <sky-list
+              v-if="music.playlists.length"
+              inset
+              strong
+              class="music-picker-list"
+            >
+              <sky-list-item
+                v-for="playlist in music.playlists"
+                :key="playlist.id"
+                :link="!actionTrackIsInPlaylist(playlist)"
+                link-component="button"
+                :chevron="false"
+                :link-props="{
+                  type: 'button',
+                  disabled:
+                    music.isLoading || actionTrackIsInPlaylist(playlist),
+                }"
+                :title="playlist.name"
+                :subtitle="
+                  phone.t('Apps.music.songCount', {
+                    count: String(playlist.entries.length),
+                  })
+                "
+                @click="addTrackToPlaylist(playlist)"
+              >
+                <template #media><ListMusic :size="22" /></template>
+                <template #after>
+                  <span
+                    v-if="actionTrackIsInPlaylist(playlist)"
+                    class="music-picker-added"
+                  >
+                    <Check :size="16" />
+                    {{ phone.t('Apps.music.alreadyAdded') }}
+                  </span>
+                  <CirclePlus v-else :size="19" />
+                </template>
+              </sky-list-item>
+            </sky-list>
+            <sky-button
+              v-if="music.playlists.length"
+              rounded
+              tonal
+              class="music-picker-create"
               :disabled="music.isLoading"
               @click="openNewPlaylist(actionTrack)"
-              >{{ phone.t('Apps.music.newPlaylist') }}</k-button
             >
-          </k-block>
-          <p v-if="music.error" class="music-form-error" role="alert">
-            {{ errorText() }}
-          </p>
-        </template>
+              <Plus :size="17" /> {{ phone.t('Apps.music.newPlaylist') }}
+            </sky-button>
+            <sky-block v-else class="music-empty" inset>
+              <ListMusic :size="42" />
+              <strong>{{ phone.t('Apps.music.noPlaylists') }}</strong>
+              <span>{{ phone.t('Apps.music.createPlaylistFirst') }}</span>
+              <sky-button
+                rounded
+                :disabled="music.isLoading"
+                @click="openNewPlaylist(actionTrack)"
+                >{{ phone.t('Apps.music.newPlaylist') }}</sky-button
+              >
+            </sky-block>
+            <p v-if="music.error" class="music-form-error" role="alert">
+              {{ errorText() }}
+            </p>
+          </template>
 
-        <template v-else-if="activeSheet === 'track-picker'">
-          <p>{{ phone.t('Apps.music.addSongsBody') }}</p>
-          <k-list
-            v-if="availablePlaylistTracks.length"
-            inset
-            strong
-            class="music-picker-list"
-          >
-            <k-list-item
-              v-for="track in availablePlaylistTracks"
-              :key="`${track.source}:${track.id}`"
-              link
-              link-component="button"
-              :chevron="false"
-              :link-props="{ type: 'button', disabled: music.isLoading }"
-              :title="track.title"
-              :subtitle="track.artist"
-              @click="addTrackToActivePlaylist(track)"
+          <template v-else-if="activeSheet === 'track-picker'">
+            <p>{{ phone.t('Apps.music.addSongsBody') }}</p>
+            <sky-list
+              v-if="availablePlaylistTracks.length"
+              inset
+              strong
+              class="music-picker-list"
             >
-              <template #media>
-                <span class="music-row-art" :style="fallbackArtwork(track)">
-                  <img
-                    v-if="track.artwork"
-                    :src="track.artwork"
-                    alt=""
-                    @error="hideBrokenArtwork"
-                  />
-                  <Music2 v-else :size="20" />
-                </span>
-              </template>
-              <template #after><CirclePlus :size="20" /></template>
-            </k-list-item>
-          </k-list>
-          <k-block v-else class="music-empty" inset>
-            <Check v-if="allTracks.length" :size="42" />
-            <Music2 v-else :size="42" />
-            <strong>{{
-              phone.t(
-                allTracks.length
-                  ? 'Apps.music.allSongsAdded'
-                  : 'Apps.music.emptyLibrary',
-              )
-            }}</strong>
-            <span>{{
-              phone.t(
-                allTracks.length
-                  ? 'Apps.music.allSongsAddedBody'
-                  : 'Apps.music.emptyLibraryBody',
-              )
-            }}</span>
-          </k-block>
-          <p v-if="music.error" class="music-form-error" role="alert">
-            {{ errorText() }}
-          </p>
-        </template>
+              <sky-list-item
+                v-for="track in availablePlaylistTracks"
+                :key="`${track.source}:${track.id}`"
+                link
+                link-component="button"
+                :chevron="false"
+                :link-props="{ type: 'button', disabled: music.isLoading }"
+                :title="track.title"
+                :subtitle="track.artist"
+                @click="addTrackToActivePlaylist(track)"
+              >
+                <template #media>
+                  <span class="music-row-art" :style="fallbackArtwork(track)">
+                    <img
+                      v-if="track.artwork"
+                      :src="track.artwork"
+                      alt=""
+                      @error="hideBrokenArtwork"
+                    />
+                    <Music2 v-else :size="20" />
+                  </span>
+                </template>
+                <template #after><CirclePlus :size="20" /></template>
+              </sky-list-item>
+            </sky-list>
+            <sky-block v-else class="music-empty" inset>
+              <Check v-if="allTracks.length" :size="42" />
+              <Music2 v-else :size="42" />
+              <strong>{{
+                phone.t(
+                  allTracks.length
+                    ? 'Apps.music.allSongsAdded'
+                    : 'Apps.music.emptyLibrary',
+                )
+              }}</strong>
+              <span>{{
+                phone.t(
+                  allTracks.length
+                    ? 'Apps.music.allSongsAddedBody'
+                    : 'Apps.music.emptyLibraryBody',
+                )
+              }}</span>
+            </sky-block>
+            <p v-if="music.error" class="music-form-error" role="alert">
+              {{ errorText() }}
+            </p>
+          </template>
 
-        <template v-else>
-          <div class="music-sheet-icon"><ListMusic :size="29" /></div>
-          <p>{{ phone.t('Apps.music.playlistBody') }}</p>
-          <k-list inset strong>
-            <k-list-input
-              :label="phone.t('Apps.music.playlistName')"
-              input-id="music-playlist-name"
-              maxlength="80"
-              :disabled="music.isLoading"
-              :placeholder="phone.t('Apps.music.playlistPlaceholder')"
-              :value="playlistName"
-              @input="playlistName = eventValue($event)"
-              @keydown.enter="handleEnterAction($event, submitPlaylist)"
-            />
-          </k-list>
-          <p v-if="music.error" class="music-form-error" role="alert">
-            {{ errorText() }}
-          </p>
-          <k-button
-            large
-            rounded
-            :disabled="music.isLoading || !playlistName.trim()"
-            @click="submitPlaylist"
-          >
-            <k-preloader v-if="music.isLoading" />
-            <template v-else>{{ phone.t('Common.save') }}</template>
-          </k-button>
-        </template>
+          <template v-else>
+            <div class="music-sheet-icon"><ListMusic :size="29" /></div>
+            <p>{{ phone.t('Apps.music.playlistBody') }}</p>
+            <sky-list inset strong>
+              <sky-field
+                :label="phone.t('Apps.music.playlistName')"
+                input-id="music-playlist-name"
+                maxlength="80"
+                :disabled="music.isLoading"
+                :placeholder="phone.t('Apps.music.playlistPlaceholder')"
+                :value="playlistName"
+                @input="playlistName = eventValue($event)"
+                @keydown.enter="handleEnterAction($event, submitPlaylist)"
+              />
+            </sky-list>
+            <p v-if="music.error" class="music-form-error" role="alert">
+              {{ errorText() }}
+            </p>
+            <sky-button
+              large
+              rounded
+              :disabled="music.isLoading || !playlistName.trim()"
+              @click="submitPlaylist"
+            >
+              <sky-spinner v-if="music.isLoading" />
+              <template v-else>{{ phone.t('Common.save') }}</template>
+            </sky-button>
+          </template>
         </section>
-      </k-sheet>
+      </sky-sheet>
     </div>
 
     <div class="music-player-sheet">
-      <k-sheet
-        :opened="playerOpened"
-        @backdropclick="playerOpened = false"
-      >
+      <sky-sheet :opened="playerOpened" @backdropclick="playerOpened = false">
         <section v-if="music.currentTrack" class="music-player">
-        <header>
-          <k-link
-            component="button"
-            icon-only
-            :aria-label="phone.t('Common.close')"
-            @click="playerOpened = false"
-          >
-            <X :size="20" />
-          </k-link>
-          <span>{{ phone.t('Apps.music.nowPlaying') }}</span>
-          <div class="music-player-header-actions">
-            <k-link
+          <header>
+            <sky-link
               component="button"
               icon-only
-              :aria-label="phone.t('Apps.easyShare.share')"
-              @click="shareTrack(music.currentTrack)"
+              :aria-label="phone.t('Common.close')"
+              @click="playerOpened = false"
             >
-              <Share2 :size="20" />
-            </k-link>
-            <k-link
-              component="button"
-              icon-only
-              :aria-label="phone.t('Apps.music.addToPlaylist')"
-              @click="openCurrentTrackPlaylistPicker"
-            >
-              <CirclePlus :size="21" />
-            </k-link>
+              <X :size="20" />
+            </sky-link>
+            <span>{{ phone.t('Apps.music.nowPlaying') }}</span>
+            <div class="music-player-header-actions">
+              <sky-link
+                component="button"
+                icon-only
+                :aria-label="phone.t('Apps.easyShare.share')"
+                @click="shareTrack(music.currentTrack)"
+              >
+                <Share2 :size="20" />
+              </sky-link>
+              <sky-link
+                component="button"
+                icon-only
+                :aria-label="phone.t('Apps.music.addToPlaylist')"
+                @click="openCurrentTrackPlaylistPicker"
+              >
+                <CirclePlus :size="21" />
+              </sky-link>
+            </div>
+          </header>
+          <div
+            class="music-player-art"
+            :style="fallbackArtwork(music.currentTrack)"
+          >
+            <img
+              v-if="music.currentTrack.artwork"
+              :src="music.currentTrack.artwork"
+              :alt="music.currentTrack.title"
+              @error="hideBrokenArtwork"
+            />
+            <Music2 v-else :size="86" />
           </div>
-        </header>
-        <div
-          class="music-player-art"
-          :style="fallbackArtwork(music.currentTrack)"
-        >
-          <img
-            v-if="music.currentTrack.artwork"
-            :src="music.currentTrack.artwork"
-            :alt="music.currentTrack.title"
-            @error="hideBrokenArtwork"
-          />
-          <Music2 v-else :size="86" />
-        </div>
-        <div class="music-player-copy">
-          <strong>{{ music.currentTrack.title }}</strong>
-          <span>{{ music.currentTrack.artist }}</span>
-        </div>
-        <div class="music-progress">
-          <k-range
-            :value="music.currentTime"
-            :min="0"
-            :max="Math.max(1, music.duration)"
-            :aria-label="phone.t('Apps.music.progress')"
-            @input="updateSeek"
-          />
-          <div>
-            <span>{{ formatTime(music.currentTime) }}</span
-            ><span
-              >-{{
-                formatTime(Math.max(0, music.duration - music.currentTime))
-              }}</span
-            >
+          <div class="music-player-copy">
+            <strong>{{ music.currentTrack.title }}</strong>
+            <span>{{ music.currentTrack.artist }}</span>
           </div>
-        </div>
-        <div class="music-player-controls">
-          <button
-            type="button"
-            :aria-label="phone.t('Apps.music.previous')"
-            @click="music.previous"
-          >
-            <SkipBack :size="38" fill="currentColor" />
-          </button>
-          <button
-            type="button"
-            :aria-label="
-              phone.t(music.isPlaying ? 'Common.pause' : 'Apps.music.play')
-            "
-            @click="music.toggle"
-          >
-            <Pause v-if="music.isPlaying" :size="50" fill="currentColor" />
-            <Play v-else :size="50" fill="currentColor" />
-          </button>
-          <button
-            type="button"
-            :aria-label="phone.t('Apps.music.next')"
-            @click="music.next"
-          >
-            <SkipForward :size="38" fill="currentColor" />
-          </button>
-        </div>
-        <div class="music-volume">
-          <Volume1 :size="18" />
-          <k-range
-            :value="Math.round(music.volume * 100)"
-            :min="0"
-            :max="100"
-            :aria-label="phone.t('Apps.music.volume')"
-            @input="updateVolume"
-          />
-          <Volume2 :size="20" />
-        </div>
-        <p v-if="music.playbackError" class="music-player-error">
-          {{ phone.t('Apps.music.errors.playback_failed') }}
-        </p>
+          <div class="music-progress">
+            <sky-range
+              :value="music.currentTime"
+              :min="0"
+              :max="Math.max(1, music.duration)"
+              :aria-label="phone.t('Apps.music.progress')"
+              @input="updateSeek"
+            />
+            <div>
+              <span>{{ formatTime(music.currentTime) }}</span
+              ><span
+                >-{{
+                  formatTime(Math.max(0, music.duration - music.currentTime))
+                }}</span
+              >
+            </div>
+          </div>
+          <div class="music-player-controls">
+            <button
+              type="button"
+              :aria-label="phone.t('Apps.music.previous')"
+              @click="music.previous"
+            >
+              <SkipBack :size="38" fill="currentColor" />
+            </button>
+            <button
+              type="button"
+              :aria-label="
+                phone.t(music.isPlaying ? 'Common.pause' : 'Apps.music.play')
+              "
+              @click="music.toggle"
+            >
+              <Pause v-if="music.isPlaying" :size="50" fill="currentColor" />
+              <Play v-else :size="50" fill="currentColor" />
+            </button>
+            <button
+              type="button"
+              :aria-label="phone.t('Apps.music.next')"
+              @click="music.next"
+            >
+              <SkipForward :size="38" fill="currentColor" />
+            </button>
+          </div>
+          <div class="music-volume">
+            <Volume1 :size="18" />
+            <sky-range
+              :value="Math.round(music.volume * 100)"
+              :min="0"
+              :max="100"
+              :aria-label="phone.t('Apps.music.volume')"
+              @input="updateVolume"
+            />
+            <Volume2 :size="20" />
+          </div>
+          <p v-if="music.playbackError" class="music-player-error">
+            {{ phone.t('Apps.music.errors.playback_failed') }}
+          </p>
         </section>
-      </k-sheet>
+      </sky-sheet>
     </div>
 
-    <k-dialog
+    <sky-dialog
       :opened="confirmRemoveTrack"
       :title="phone.t('Apps.music.removeSongTitle')"
       :content="phone.t('Apps.music.removeSongBody')"
       @backdropclick="cancelRemoveTrack"
     >
       <template #buttons>
-        <k-dialog-button @click="cancelRemoveTrack">{{
+        <sky-dialog-button @click="cancelRemoveTrack">{{
           phone.t('Common.cancel')
-        }}</k-dialog-button>
-        <k-dialog-button strong @click="removePersonalTrack">{{
+        }}</sky-dialog-button>
+        <sky-dialog-button strong @click="removePersonalTrack">{{
           phone.t('Common.delete')
-        }}</k-dialog-button>
+        }}</sky-dialog-button>
       </template>
-    </k-dialog>
+    </sky-dialog>
 
-    <k-dialog
+    <sky-dialog
       :opened="confirmDeletePlaylist"
       :title="phone.t('Apps.music.deletePlaylistTitle')"
       :content="phone.t('Apps.music.deletePlaylistBody')"
       @backdropclick="confirmDeletePlaylist = false"
     >
       <template #buttons>
-        <k-dialog-button @click="confirmDeletePlaylist = false">{{
+        <sky-dialog-button @click="confirmDeletePlaylist = false">{{
           phone.t('Common.cancel')
-        }}</k-dialog-button>
-        <k-dialog-button strong @click="deleteActivePlaylist">{{
+        }}</sky-dialog-button>
+        <sky-dialog-button strong @click="deleteActivePlaylist">{{
           phone.t('Common.delete')
-        }}</k-dialog-button>
+        }}</sky-dialog-button>
       </template>
-    </k-dialog>
+    </sky-dialog>
 
-    <k-toast position="center" :opened="Boolean(toastText)">{{
+    <sky-toast position="center" :opened="Boolean(toastText)">{{
       toastText
-    }}</k-toast>
-  </k-page>
+    }}</sky-toast>
+  </sky-app-page>
 </template>
 
 <style scoped>
@@ -1463,8 +1473,8 @@ onBeforeUnmount(() => {
   --music-label: #111114;
   --music-muted: #74747c;
   --music-line: rgb(18 18 23 / 9%);
-  --k-safe-area-top: 46px;
-  --k-safe-area-bottom: 25px;
+  --sky-safe-area-top: 46px;
+  --sky-safe-area-bottom: 25px;
   position: relative;
   display: flex !important;
   flex-direction: column;
@@ -2017,7 +2027,7 @@ onBeforeUnmount(() => {
   transition: none !important;
 }
 
-.music-popover :deep(.k-list) {
+.music-popover :deep(.sky-list) {
   z-index: auto;
   background: transparent;
 }
@@ -2031,7 +2041,7 @@ onBeforeUnmount(() => {
   color: #ff453a !important;
 }
 
-.music-player-sheet :deep(.k-sheet) {
+.music-player-sheet :deep(.sky-sheet__panel) {
   background: rgb(22 22 25 / 96%) !important;
 }
 
diff --git a/frontend/src/views/apps/NotesApp.menu.contract.test.ts b/frontend/src/views/apps/NotesApp.menu.contract.test.ts
index ed2df99..0a903d9 100644
--- a/frontend/src/views/apps/NotesApp.menu.contract.test.ts
+++ b/frontend/src/views/apps/NotesApp.menu.contract.test.ts
@@ -8,8 +8,8 @@ const menuSource = source.slice(
   source.indexOf('</SkyActionSheet>') + '</SkyActionSheet>'.length,
 )
 const listSource = source.slice(
-  source.indexOf('<k-page\n    v-if="!editorOpened"'),
-  source.indexOf('<k-page v-else'),
+  source.indexOf('<sky-app-page\n    v-if="!editorOpened"'),
+  source.indexOf('<sky-app-page v-else'),
 )
 
 describe('NotesApp list controls', () => {
diff --git a/frontend/src/views/apps/NotesApp.vue b/frontend/src/views/apps/NotesApp.vue
index 84432ff..eaca7cc 100644
--- a/frontend/src/views/apps/NotesApp.vue
+++ b/frontend/src/views/apps/NotesApp.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import {
-  kBlock,
-  kBlockTitle,
-  kLink,
-  kList,
-  kListButton,
-  kListItem,
-  kNavbar,
-  kNavbarBackLink,
-  kPage,
-} from 'konsta/vue'
+  SkyBlock,
+  SkyBlockTitle,
+  SkyLink,
+  SkyList,
+  SkyListButton,
+  SkyListItem,
+  SkyNavbar,
+  SkyNavbarBackLink,
+  SkyAppPage,
+} from '@/ui'
 import {
   Ellipsis,
   Pin,
@@ -183,16 +183,20 @@ function shareNote(): void {
 </script>
 
 <template>
-  <k-page
+  <sky-app-page
     v-if="!editorOpened"
     class="notes-list-page"
     :aria-label="phone.t('Apps.notes.name')"
   >
-    <k-navbar large transparent :title="phone.t('Apps.notes.name')" />
+    <sky-navbar
+      variant="large"
+      transparent
+      :title="phone.t('Apps.notes.name')"
+    />
 
     <SkyScrollArea as="main" class="notes-list-scroll">
-      <k-list v-if="visibleNotes.length" strong inset>
-        <k-list-item
+      <sky-list v-if="visibleNotes.length" strong inset>
+        <sky-list-item
           v-for="note in visibleNotes"
           :key="note.id"
           href="#"
@@ -205,25 +209,25 @@ function shareNote(): void {
           <template v-if="note.pinned" #after>
             <Pin :size="15" aria-hidden="true" />
           </template>
-        </k-list-item>
-      </k-list>
+        </sky-list-item>
+      </sky-list>
 
       <template v-else>
-        <k-block-title large>{{
+        <sky-block-title large>{{
           phone.t(
             searchQuery ? 'Apps.notes.noResults' : 'Apps.notes.emptyTitle',
           )
-        }}</k-block-title>
-        <k-block strong inset>{{
+        }}</sky-block-title>
+        <sky-block strong inset>{{
           phone.t(
             searchQuery ? 'Apps.notes.noResultsBody' : 'Apps.notes.emptyBody',
           )
-        }}</k-block>
-        <k-list v-if="!searchQuery" strong inset>
-          <k-list-button link-component="button" @click="createNote">
+        }}</sky-block>
+        <sky-list v-if="!searchQuery" strong inset>
+          <sky-list-button link-component="button" @click="createNote">
             {{ phone.t('Apps.notes.newNote') }}
-          </k-list-button>
-        </k-list>
+          </sky-list-button>
+        </sky-list>
       </template>
     </SkyScrollArea>
 
@@ -249,12 +253,12 @@ function shareNote(): void {
         </template>
       </SkyFab>
     </SkyToolbar>
-  </k-page>
+  </sky-app-page>
 
-  <k-page v-else class="notes-editor-page !pt-[44px] !pb-0">
-    <k-navbar :title="phone.t('Apps.notes.note')">
+  <sky-app-page v-else class="notes-editor-page !pt-[44px] !pb-0">
+    <sky-navbar :title="phone.t('Apps.notes.note')">
       <template #left>
-        <k-navbar-back-link
+        <sky-navbar-back-link
           component="button"
           :text="phone.t('Apps.notes.back')"
           :aria-label="phone.t('Apps.notes.back')"
@@ -262,16 +266,16 @@ function shareNote(): void {
         />
       </template>
       <template #right>
-        <k-link
+        <sky-link
           component="button"
           icon-only
           :aria-label="phone.t('Apps.notes.actions')"
           @click="openMenu"
         >
           <Ellipsis :size="22" />
-        </k-link>
+        </sky-link>
       </template>
-    </k-navbar>
+    </sky-navbar>
 
     <div class="notes-editor-layout">
       <NotesRichTextEditor
@@ -321,7 +325,7 @@ function shareNote(): void {
         </SkyButton>
       </div>
     </SkyActionSheet>
-  </k-page>
+  </sky-app-page>
 </template>
 
 <style scoped>
diff --git a/frontend/src/views/apps/PhoneApp.contract.test.ts b/frontend/src/views/apps/PhoneApp.contract.test.ts
index ecc3409..d75401e 100644
--- a/frontend/src/views/apps/PhoneApp.contract.test.ts
+++ b/frontend/src/views/apps/PhoneApp.contract.test.ts
@@ -12,4 +12,10 @@ describe('PhoneApp EasyShare contract', () => {
     expect(source).toContain('easyShare.open(response.data)')
     expect(source).not.toContain("kind: 'profile'")
   })
+
+  it('uses the shared full-width Sky tab bar for phone sections', () => {
+    expect(source).toContain('<sky-tab-bar')
+    expect(source).toContain('<sky-tab-button')
+    expect(source).not.toContain('<sky-segmented')
+  })
 })
diff --git a/frontend/src/views/apps/PhoneApp.vue b/frontend/src/views/apps/PhoneApp.vue
index 9d74b98..752b528 100644
--- a/frontend/src/views/apps/PhoneApp.vue
+++ b/frontend/src/views/apps/PhoneApp.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
 import {
-  kBlock,
-  kButton,
-  kDialog,
-  kDialogButton,
-  kGlass,
-  kList,
-  kListInput,
-  kNavbar,
-  kPage,
-  kSegmented,
-  kSegmentedButton,
-  kSheet,
-} from 'konsta/vue'
+  SkyBlock,
+  SkyButton,
+  SkyDialog,
+  SkyDialogButton,
+  SkyGlass,
+  SkyList,
+  SkyField,
+  SkyAppPage,
+  SkySheet,
+  SkyTabBar,
+  SkyTabButton,
+} from '@/ui'
 import {
   Camera,
   Check,
@@ -128,20 +127,6 @@ const contactProfileActions = [
   { id: 'mail', icon: Mail },
 ] as const
 const contactAlphabet = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ', '#']
-const tabBarColors = {
-  strongHighlightBgIos: 'bg-[#e5e5ea] dark:bg-[#2c2c2e]',
-}
-const profileNavbarColors = {
-  bgIos: 'bg-transparent',
-}
-const callButtonColors = {
-  fillBgIos: 'bg-[#34c759] active:bg-[#30b350]',
-  fillTextIos: 'text-white',
-}
-const endButtonColors = {
-  fillBgIos: 'bg-[#ff3b30] active:bg-[#e6352b]',
-  fillTextIos: 'text-white',
-}
 const visibleContacts = computed(() => {
   const needle = query.value.trim().toLowerCase()
   if (!needle) return calls.contacts
@@ -690,7 +675,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <k-page
+  <sky-app-page
     class="native-app phone-calls-app"
     :class="{
       'phone-app--light': !phone.isDarkMode,
@@ -731,19 +716,19 @@ onBeforeUnmount(() => {
               </button>
             </div>
             <div class="phone-in-call-keypad__footer">
-              <k-button
+              <sky-button
                 rounded
                 class="phone-in-call-keypad__end"
-                :colors="endButtonColors"
+                variant="danger"
                 @click="calls.hangup()"
               >
                 <PhoneOff />
-              </k-button>
-              <k-button
+              </sky-button>
+              <sky-button
                 clear
                 class="phone-in-call-keypad__hide"
                 @click="callKeypadOpened = false"
-                >{{ phone.t('Apps.phone.hideKeypad') }}</k-button
+                >{{ phone.t('Apps.phone.hideKeypad') }}</sky-button
               >
             </div>
           </div>
@@ -755,7 +740,7 @@ onBeforeUnmount(() => {
             @click.self="callMoreOpened = false"
           >
             <div class="phone-call-more__list">
-              <k-button
+              <sky-button
                 class="phone-call-more__item phone-call-more__contact-card"
                 @click="openCallContact"
               >
@@ -772,37 +757,37 @@ onBeforeUnmount(() => {
                       : 'Apps.phone.addToContacts',
                   )
                 }}</strong>
-              </k-button>
+              </sky-button>
 
-              <k-button
+              <sky-button
                 class="phone-call-more__item"
                 @click="messageActiveCaller"
               >
                 <MessageCircle />
                 <strong>{{ phone.t('Apps.phone.sendMessage') }}</strong>
-              </k-button>
+              </sky-button>
 
-              <k-button
+              <sky-button
                 v-if="activeCallContact"
                 class="phone-call-more__item phone-call-more__item--danger"
                 @click="removeActiveCallerContact"
               >
                 <Delete />
                 <strong>{{ phone.t('Apps.phone.removeContact') }}</strong>
-              </k-button>
+              </sky-button>
 
-              <k-button
+              <sky-button
                 class="phone-call-more__item phone-call-more__item--danger"
                 @click="confirmBlockNumber(calls.activeCall.otherNumber)"
               >
                 <PhoneOff />
                 <strong>{{ phone.t('Apps.phone.blockCaller') }}</strong>
-              </k-button>
+              </sky-button>
             </div>
           </div>
 
           <div v-else key="actions" class="phone-active-call__actions">
-            <k-button
+            <sky-button
               rounded
               class="phone-call-action"
               :class="{
@@ -821,12 +806,12 @@ onBeforeUnmount(() => {
             >
               <Volume2 />
               <span>{{ phone.t('Apps.phone.speaker') }}</span>
-            </k-button>
-            <k-button rounded class="phone-call-action is-disabled" disabled>
+            </sky-button>
+            <sky-button rounded class="phone-call-action is-disabled" disabled>
               <Video />
               <span>{{ phone.t('Apps.phone.faceTime') }}</span>
-            </k-button>
-            <k-button
+            </sky-button>
+            <sky-button
               rounded
               class="phone-call-action"
               :class="{ 'is-active': callMuted }"
@@ -834,22 +819,22 @@ onBeforeUnmount(() => {
             >
               <MicOff />
               <span>{{ phone.t('Apps.phone.mute') }}</span>
-            </k-button>
+            </sky-button>
 
             <div class="phone-call-action-anchor">
-              <k-button
+              <sky-button
                 rounded
                 class="phone-call-action"
                 @click="callMoreOpened = !callMoreOpened"
               >
                 <MoreHorizontal />
                 <span>{{ phone.t('Apps.phone.more') }}</span>
-              </k-button>
+              </sky-button>
             </div>
-            <k-button
+            <sky-button
               rounded
               class="phone-call-action phone-call-action--end"
-              :colors="endButtonColors"
+              variant="danger"
               @click="
                 calls.activeCall.direction === 'incoming' &&
                 calls.activeCall.state === 'ringing'
@@ -866,21 +851,20 @@ onBeforeUnmount(() => {
                     : 'Apps.phone.hangup',
                 )
               }}</span>
-            </k-button>
-            <k-button
+            </sky-button>
+            <sky-button
               v-if="
                 calls.activeCall.direction === 'incoming' &&
                 calls.activeCall.state === 'ringing'
               "
               rounded
               class="phone-call-action phone-call-action--answer"
-              :colors="callButtonColors"
               @click="answerCall"
             >
               <Phone />
               <span>{{ phone.t('Apps.phone.answer') }}</span>
-            </k-button>
-            <k-button
+            </sky-button>
+            <sky-button
               v-else
               rounded
               class="phone-call-action"
@@ -888,7 +872,7 @@ onBeforeUnmount(() => {
             >
               <Grid3X3 />
               <span>{{ phone.t('Apps.phone.keypad') }}</span>
-            </k-button>
+            </sky-button>
           </div>
         </Transition>
       </section>
@@ -901,10 +885,10 @@ onBeforeUnmount(() => {
         :class="{ 'phone-call-content--profile': selectedNumber }"
         @scroll.passive="handlePhoneContentScroll"
       >
-        <k-block v-if="!phone.device?.sim" class="text-center">
+        <sky-block v-if="!phone.device?.sim" class="text-center">
           <h2>{{ phone.t('Apps.phone.noSim') }}</h2>
           <p class="text-[#8e8e93]">{{ phone.t('Apps.phone.noSimBody') }}</p>
-        </k-block>
+        </sky-block>
 
         <template v-else-if="selectedNumber">
           <section
@@ -912,21 +896,21 @@ onBeforeUnmount(() => {
             :class="{ 'phone-contact-detail--compact': contactDetailCompact }"
           >
             <header class="phone-detail-header">
-              <k-button
+              <sky-button
                 rounded
                 class="phone-detail-header-button phone-detail-back"
                 :aria-label="phone.t('Common.back')"
                 @click="closeRecentDetail"
               >
                 <ChevronLeft :size="29" :stroke-width="2.4" />
-              </k-button>
+              </sky-button>
 
               <div class="phone-detail-compact-center">
                 <h2 class="phone-detail-compact-title">
                   {{ selectedDisplayName }}
                 </h2>
                 <div class="phone-detail-compact-actions">
-                  <k-button
+                  <sky-button
                     v-for="action in contactProfileActions"
                     :key="action.id"
                     rounded
@@ -947,11 +931,11 @@ onBeforeUnmount(() => {
                       :size="24"
                       fill="currentColor"
                     />
-                  </k-button>
+                  </sky-button>
                 </div>
               </div>
 
-              <k-button
+              <sky-button
                 v-if="!viewingOwnCard"
                 rounded
                 class="phone-detail-edit"
@@ -964,7 +948,7 @@ onBeforeUnmount(() => {
                     selectedContact ? 'Common.edit' : 'Apps.phone.addContact',
                   )
                 }}
-              </k-button>
+              </sky-button>
               <span v-else class="phone-detail-edit-spacer" />
             </header>
 
@@ -992,7 +976,7 @@ onBeforeUnmount(() => {
               </p>
 
               <div class="phone-contact-actions">
-                <k-button
+                <sky-button
                   v-for="action in contactProfileActions"
                   :key="action.id"
                   rounded
@@ -1009,12 +993,12 @@ onBeforeUnmount(() => {
                   @click="triggerContactAction(action.id)"
                 >
                   <component :is="action.icon" :size="23" fill="currentColor" />
-                </k-button>
+                </sky-button>
               </div>
             </div>
 
             <section v-if="viewingOwnCard" class="phone-profile-content">
-              <k-glass class="phone-own-profile-card">
+              <sky-glass class="phone-own-profile-card">
                 <div>
                   <span><Phone :size="19" /></span>
                   <p>
@@ -1029,16 +1013,16 @@ onBeforeUnmount(() => {
                     <strong>{{ phone.device?.name }}</strong>
                   </p>
                 </div>
-              </k-glass>
-              <k-glass class="phone-profile-card phone-profile-single-option">
+              </sky-glass>
+              <sky-glass class="phone-profile-card phone-profile-single-option">
                 <button type="button" @click="shareOwnProfile">
                   <span>{{ phone.t('Apps.easyShare.shareProfile') }}</span>
                 </button>
-              </k-glass>
+              </sky-glass>
             </section>
 
             <section v-else class="phone-profile-content">
-              <k-glass class="phone-profile-card phone-profile-info-card">
+              <sky-glass class="phone-profile-card phone-profile-info-card">
                 <button
                   type="button"
                   :disabled="selectedContact?.canCall === false"
@@ -1067,9 +1051,9 @@ onBeforeUnmount(() => {
                     {{ selectedContact.notes }}
                   </p>
                 </div>
-              </k-glass>
+              </sky-glass>
 
-              <k-glass class="phone-profile-card phone-profile-options-card">
+              <sky-glass class="phone-profile-card phone-profile-options-card">
                 <button
                   type="button"
                   :disabled="selectedContact?.canMessage === false"
@@ -1097,18 +1081,18 @@ onBeforeUnmount(() => {
                     )
                   }}</span>
                 </button>
-              </k-glass>
+              </sky-glass>
 
-              <k-glass class="phone-profile-card phone-profile-single-option">
+              <sky-glass class="phone-profile-card phone-profile-single-option">
                 <button
                   type="button"
                   @click="confirmBlockNumber(selectedNumber)"
                 >
                   <span>{{ phone.t('Apps.phone.blockContact') }}</span>
                 </button>
-              </k-glass>
+              </sky-glass>
 
-              <k-glass class="phone-history-card">
+              <sky-glass class="phone-history-card">
                 <h3>{{ phone.t('Apps.phone.callHistory') }}</h3>
                 <div
                   v-for="recent in selectedHistory"
@@ -1139,7 +1123,7 @@ onBeforeUnmount(() => {
                 <p v-if="!selectedHistory.length" class="phone-history-empty">
                   {{ phone.t('Apps.phone.noCallHistory') }}
                 </p>
-              </k-glass>
+              </sky-glass>
             </section>
           </section>
         </template>
@@ -1233,9 +1217,9 @@ onBeforeUnmount(() => {
                 </button>
               </article>
             </div>
-            <k-block v-else class="text-center text-[#8e8e93]">{{
+            <sky-block v-else class="text-center text-[#8e8e93]">{{
               phone.t('Apps.phone.noRecents')
-            }}</k-block>
+            }}</sky-block>
           </section>
         </template>
 
@@ -1348,9 +1332,9 @@ onBeforeUnmount(() => {
                 </button>
               </section>
             </div>
-            <k-block v-else class="text-center text-[#8e8e93]">{{
+            <sky-block v-else class="text-center text-[#8e8e93]">{{
               phone.t('Apps.phone.noContacts')
-            }}</k-block>
+            }}</sky-block>
 
             <nav
               v-if="!query"
@@ -1451,220 +1435,203 @@ onBeforeUnmount(() => {
           {{ error }}
         </p>
       </div>
-      <k-navbar
-        component="nav"
-        class="phone-bottom-navbar"
-        inner-class="hidden"
-        :colors="selectedNumber ? profileNavbarColors : undefined"
+      <sky-tab-bar
+        icons
+        labels
+        class="phone-bottom-tabbar"
         :aria-label="phone.t('Apps.phone.name')"
       >
-        <template #subnavbar>
-          <k-segmented
-            strong
-            rounded
-            :colors="tabBarColors"
-            :data-active-tab="tab"
-          >
-            <k-segmented-button
-              v-for="item in tabs"
-              :key="item.id"
-              large
-              :active="tab === item.id"
-              :class="tab === item.id ? 'text-[#007aff]' : 'text-[#8e8e93]'"
-              :aria-label="phone.t(`Apps.phone.${item.id}`)"
-              :aria-pressed="tab === item.id"
-              @click="selectTab(item.id)"
-            >
-              <span
-                class="flex flex-col items-center gap-0.5 text-[10px] leading-none"
-              >
-                <component :is="item.icon" class="h-5 w-5" />
-                <span>{{ phone.t(`Apps.phone.${item.id}`) }}</span>
-              </span>
-            </k-segmented-button>
-          </k-segmented>
-        </template>
-      </k-navbar>
+        <sky-tab-button
+          v-for="item in tabs"
+          :key="item.id"
+          :active="tab === item.id"
+          :aria-label="phone.t(`Apps.phone.${item.id}`)"
+          @click="selectTab(item.id)"
+        >
+          <template #icon>
+            <component :is="item.icon" aria-hidden="true" />
+          </template>
+          <template #label>{{ phone.t(`Apps.phone.${item.id}`) }}</template>
+        </sky-tab-button>
+      </sky-tab-bar>
     </template>
-  </k-page>
+  </sky-app-page>
 
   <div class="phone-contact-editor-sheet">
-    <k-sheet
-      :opened="editorOpened"
-      @backdropclick="editorOpened = false"
-    >
-    <section
-      class="phone-contact-editor"
-      :class="{ 'phone-contact-editor--light': !phone.isDarkMode }"
-      role="dialog"
-      aria-modal="true"
-      :aria-label="
-        phone.t(
-          editingContact?.readonly
-            ? 'Apps.phone.officialContact'
-            : editingContact
-              ? 'Apps.phone.editContact'
-              : 'Apps.phone.addContact',
-        )
-      "
-    >
-      <header class="phone-contact-editor__header">
-        <k-button
-          rounded
-          class="phone-contact-editor__header-button"
-          :aria-label="phone.t('Common.cancel')"
-          @click="editorOpened = false"
-        >
-          <X :size="27" />
-        </k-button>
-        <h2>
-          {{
-            phone.t(
-              editingContact?.readonly
-                ? 'Apps.phone.officialContact'
-                : editingContact
-                  ? 'Apps.phone.editContact'
-                  : 'Apps.phone.newContact',
-            )
-          }}
-        </h2>
-        <k-button
-          v-if="!editingContact?.readonly"
-          rounded
-          class="phone-contact-editor__header-button"
-          :aria-label="phone.t('Common.save')"
-          @click="saveContact"
-        >
-          <Check :size="28" :stroke-width="2.2" />
-        </k-button>
-      </header>
-
-      <div class="phone-contact-editor__scroll">
-        <div class="phone-contact-editor__photo">
-          <div
-            class="phone-contact-editor__avatar-wrap"
-            :class="{
-              'phone-contact-editor__avatar-wrap--has-photo': contactAvatarUrl,
-            }"
+    <sky-sheet :opened="editorOpened" @backdropclick="editorOpened = false">
+      <section
+        class="phone-contact-editor"
+        :class="{ 'phone-contact-editor--light': !phone.isDarkMode }"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="
+          phone.t(
+            editingContact?.readonly
+              ? 'Apps.phone.officialContact'
+              : editingContact
+                ? 'Apps.phone.editContact'
+                : 'Apps.phone.addContact',
+          )
+        "
+      >
+        <header class="phone-contact-editor__header">
+          <sky-button
+            rounded
+            class="phone-contact-editor__header-button"
+            :aria-label="phone.t('Common.cancel')"
+            @click="editorOpened = false"
           >
-            <button
-              class="phone-contact-editor__avatar"
-              type="button"
-              :aria-label="phone.t('Apps.phone.choosePhoto')"
-              :disabled="editingContact?.readonly"
-              @click="openContactPhotoPicker('photos')"
-            >
-              <img v-if="contactAvatarUrl" :src="contactAvatarUrl" alt="" />
-              <span v-else-if="contactEditorInitials">{{
-                contactEditorInitials
-              }}</span>
-              <UserRound v-else :size="72" :stroke-width="1.35" />
-            </button>
-            <k-button
-              v-if="contactAvatarUrl && !editingContact?.readonly"
-              rounded
-              class="phone-contact-editor__remove-photo"
-              :aria-label="phone.t('Apps.phone.removePhoto')"
-              @click="removeContactPhoto"
-            >
-              <Delete :size="25" />
-              <span>{{ phone.t('Apps.phone.removePhoto') }}</span>
-            </k-button>
-          </div>
-          <div
+            <X :size="27" />
+          </sky-button>
+          <h2>
+            {{
+              phone.t(
+                editingContact?.readonly
+                  ? 'Apps.phone.officialContact'
+                  : editingContact
+                    ? 'Apps.phone.editContact'
+                    : 'Apps.phone.newContact',
+              )
+            }}
+          </h2>
+          <sky-button
             v-if="!editingContact?.readonly"
-            class="phone-contact-editor__photo-actions"
+            rounded
+            class="phone-contact-editor__header-button"
+            :aria-label="phone.t('Common.save')"
+            @click="saveContact"
           >
-            <k-button
-              small
-              rounded
-              tonal
-              @click="openContactPhotoPicker('photos')"
+            <Check :size="28" :stroke-width="2.2" />
+          </sky-button>
+        </header>
+
+        <div class="phone-contact-editor__scroll">
+          <div class="phone-contact-editor__photo">
+            <div
+              class="phone-contact-editor__avatar-wrap"
+              :class="{
+                'phone-contact-editor__avatar-wrap--has-photo':
+                  contactAvatarUrl,
+              }"
             >
-              <Images :size="18" />
-              {{ phone.t('Apps.phone.chooseGallery') }}
-            </k-button>
-            <k-button
-              small
-              rounded
-              tonal
-              @click="openContactPhotoPicker('camera')"
+              <button
+                class="phone-contact-editor__avatar"
+                type="button"
+                :aria-label="phone.t('Apps.phone.choosePhoto')"
+                :disabled="editingContact?.readonly"
+                @click="openContactPhotoPicker('photos')"
+              >
+                <img v-if="contactAvatarUrl" :src="contactAvatarUrl" alt="" />
+                <span v-else-if="contactEditorInitials">{{
+                  contactEditorInitials
+                }}</span>
+                <UserRound v-else :size="72" :stroke-width="1.35" />
+              </button>
+              <sky-button
+                v-if="contactAvatarUrl && !editingContact?.readonly"
+                rounded
+                class="phone-contact-editor__remove-photo"
+                :aria-label="phone.t('Apps.phone.removePhoto')"
+                @click="removeContactPhoto"
+              >
+                <Delete :size="25" />
+                <span>{{ phone.t('Apps.phone.removePhoto') }}</span>
+              </sky-button>
+            </div>
+            <div
+              v-if="!editingContact?.readonly"
+              class="phone-contact-editor__photo-actions"
             >
-              <Camera :size="18" />
-              {{ phone.t('Apps.phone.takePhoto') }}
-            </k-button>
+              <sky-button
+                small
+                rounded
+                tonal
+                @click="openContactPhotoPicker('photos')"
+              >
+                <Images :size="18" />
+                {{ phone.t('Apps.phone.chooseGallery') }}
+              </sky-button>
+              <sky-button
+                small
+                rounded
+                tonal
+                @click="openContactPhotoPicker('camera')"
+              >
+                <Camera :size="18" />
+                {{ phone.t('Apps.phone.takePhoto') }}
+              </sky-button>
+            </div>
           </div>
-        </div>
 
-        <k-list strong inset class="phone-contact-editor__name-list">
-          <k-list-input
-            :value="contactFirstName"
-            :placeholder="phone.t('Apps.phone.firstName')"
-            autocomplete="given-name"
-            :readonly="editingContact?.readonly"
-            @input="contactFirstName = eventValue($event)"
-          />
-          <k-list-input
-            :value="contactLastName"
-            :placeholder="phone.t('Apps.phone.lastName')"
-            autocomplete="family-name"
-            :readonly="editingContact?.readonly"
-            @input="contactLastName = eventValue($event)"
-          />
-          <k-list-input
-            :value="contactOrganization"
-            :placeholder="phone.t('Apps.phone.companyOrGroup')"
-            autocomplete="organization"
-            :readonly="editingContact?.readonly"
-            @input="contactOrganization = eventValue($event)"
-          />
-        </k-list>
+          <sky-list strong inset class="phone-contact-editor__name-list">
+            <sky-field
+              :value="contactFirstName"
+              :placeholder="phone.t('Apps.phone.firstName')"
+              autocomplete="given-name"
+              :readonly="editingContact?.readonly"
+              @input="contactFirstName = eventValue($event)"
+            />
+            <sky-field
+              :value="contactLastName"
+              :placeholder="phone.t('Apps.phone.lastName')"
+              autocomplete="family-name"
+              :readonly="editingContact?.readonly"
+              @input="contactLastName = eventValue($event)"
+            />
+            <sky-field
+              :value="contactOrganization"
+              :placeholder="phone.t('Apps.phone.companyOrGroup')"
+              autocomplete="organization"
+              :readonly="editingContact?.readonly"
+              @input="contactOrganization = eventValue($event)"
+            />
+          </sky-list>
 
-        <k-list strong inset class="phone-contact-editor__number-list">
-          <k-list-input
-            :value="contactNumber"
-            :label="phone.t('Apps.phone.mobile')"
-            :placeholder="phone.t('Apps.phone.phoneNumber')"
-            inputmode="tel"
-            autocomplete="tel"
-            :readonly="editingContact?.readonly"
-            @input="contactNumber = eventValue($event)"
+          <sky-list strong inset class="phone-contact-editor__number-list">
+            <sky-field
+              :value="contactNumber"
+              :label="phone.t('Apps.phone.mobile')"
+              :placeholder="phone.t('Apps.phone.phoneNumber')"
+              inputmode="tel"
+              autocomplete="tel"
+              :readonly="editingContact?.readonly"
+              @input="contactNumber = eventValue($event)"
+            >
+              <template #media>
+                <span class="phone-contact-editor__add-icon"
+                  ><Plus :size="19"
+                /></span>
+              </template>
+            </sky-field>
+          </sky-list>
+
+          <sky-list strong inset class="phone-contact-editor__notes-list">
+            <sky-field
+              :value="contactNotes"
+              type="textarea"
+              :placeholder="phone.t('Apps.phone.notes')"
+              :maxlength="500"
+              autocapitalize="sentences"
+              :readonly="editingContact?.readonly"
+              @input="contactNotes = eventValue($event)"
+            />
+          </sky-list>
+
+          <p v-if="error" class="phone-contact-editor__error">{{ error }}</p>
+
+          <sky-button
+            v-if="editingContact && !editingContact.readonly"
+            class="phone-contact-editor__delete"
+            @click="deleteEditedContact"
           >
-            <template #media>
-              <span class="phone-contact-editor__add-icon"
-                ><Plus :size="19"
-              /></span>
-            </template>
-          </k-list-input>
-        </k-list>
-
-        <k-list strong inset class="phone-contact-editor__notes-list">
-          <k-list-input
-            :value="contactNotes"
-            type="textarea"
-            :placeholder="phone.t('Apps.phone.notes')"
-            :maxlength="500"
-            autocapitalize="sentences"
-            :readonly="editingContact?.readonly"
-            @input="contactNotes = eventValue($event)"
-          />
-        </k-list>
-
-        <p v-if="error" class="phone-contact-editor__error">{{ error }}</p>
-
-        <k-button
-          v-if="editingContact && !editingContact.readonly"
-          class="phone-contact-editor__delete"
-          @click="deleteEditedContact"
-        >
-          {{ phone.t('Apps.phone.deleteContact') }}
-        </k-button>
-      </div>
-    </section>
-    </k-sheet>
+            {{ phone.t('Apps.phone.deleteContact') }}
+          </sky-button>
+        </div>
+      </section>
+    </sky-sheet>
   </div>
 
-  <k-dialog
+  <sky-dialog
     :opened="blockDialogOpened"
     @backdropclick="blockDialogOpened = false"
   >
@@ -1677,14 +1644,14 @@ onBeforeUnmount(() => {
       }}
     </p>
     <template #buttons>
-      <k-dialog-button @click="blockDialogOpened = false">{{
+      <sky-dialog-button @click="blockDialogOpened = false">{{
         phone.t('Common.cancel')
-      }}</k-dialog-button>
-      <k-dialog-button strong @click="blockNumber">{{
+      }}</sky-dialog-button>
+      <sky-dialog-button strong @click="blockNumber">{{
         phone.t('Apps.phone.block')
-      }}</k-dialog-button>
+      }}</sky-dialog-button>
     </template>
-  </k-dialog>
+  </sky-dialog>
 </template>
 
 <style scoped>
@@ -2163,15 +2130,16 @@ onBeforeUnmount(() => {
   min-height: 0;
 }
 
-.phone-bottom-navbar {
-  padding-top: 6px !important;
+.phone-bottom-tabbar {
+  --sky-app-accent: #007aff;
 }
 
 .phone-recents,
 .phone-contacts,
 .phone-contact-detail {
   min-height: 100%;
-  padding: 8px 15px 16px;
+  padding: 8px 15px
+    calc(var(--sky-tabbar-height) + var(--sky-safe-area-bottom) + 16px);
 }
 
 .phone-contacts {
@@ -2366,7 +2334,8 @@ onBeforeUnmount(() => {
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
-  padding: 56px 24px 24px;
+  padding: 56px 24px
+    calc(var(--sky-tabbar-height) + var(--sky-safe-area-bottom) + 16px);
 }
 
 .phone-keypad-number {
@@ -2610,7 +2579,9 @@ onBeforeUnmount(() => {
 @media (max-height: 690px) {
   .phone-keypad {
     padding-top: 20px;
-    padding-bottom: 12px;
+    padding-bottom: calc(
+      var(--sky-tabbar-height) + var(--sky-safe-area-bottom) + 8px
+    );
   }
 
   .phone-keypad-suggestions {
@@ -3343,7 +3314,7 @@ onBeforeUnmount(() => {
   color: rgba(255, 255, 255, 0.62);
 }
 
-.phone-contact-editor-sheet :deep(.k-sheet) {
+.phone-contact-editor-sheet :deep(.sky-sheet__panel) {
   width: 100%;
   height: calc(100% - 52px);
   max-height: calc(100% - 52px);
diff --git a/frontend/src/views/apps/SkyUiApps.contract.test.ts b/frontend/src/views/apps/SkyUiApps.contract.test.ts
new file mode 100644
index 0000000..847e608
--- /dev/null
+++ b/frontend/src/views/apps/SkyUiApps.contract.test.ts
@@ -0,0 +1,86 @@
+import { readdirSync, readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const appDirectory = new URL('.', import.meta.url)
+const appSources = readdirSync(appDirectory)
+  .filter((file) => file.endsWith('.vue'))
+  .map((file) => ({
+    file,
+    source: readFileSync(new URL(file, appDirectory), 'utf8'),
+  }))
+
+const appSupportSources = [
+  '../../components/account/AccountLogoutDialog.vue',
+  '../../components/account/AppProfileAuth.vue',
+  '../../components/account/IfruitAppAuth.vue',
+  '../../components/AlarmEditor.vue',
+  '../../components/AlarmSoundMenu.vue',
+  '../../components/AppIcon.vue',
+  '../../components/citymarkt/CityMarktSelect.vue',
+  '../../components/CustomAppFrame.vue',
+  '../../components/feather/FeatherPostCard.vue',
+].map((file) => ({
+  file,
+  source: readFileSync(new URL(file, import.meta.url), 'utf8'),
+}))
+
+const skyUiIndexSources = [
+  '../../ui/index.ts',
+  '../../ui/controls/index.ts',
+  '../../ui/overlays/index.ts',
+  '../../ui/settings/index.ts',
+].map((file) => readFileSync(new URL(file, import.meta.url), 'utf8'))
+
+const exportedSkyTags = new Set(
+  skyUiIndexSources
+    .flatMap((source) =>
+      [...source.matchAll(/default as (Sky[A-Za-z0-9]+)/g)].map(
+        ([, name]) => name,
+      ),
+    )
+    .map((name) => name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()),
+)
+
+describe('phone apps use Sky UI', () => {
+  it('keeps every app free of direct Konsta UI imports', () => {
+    expect(appSources.length).toBeGreaterThan(0)
+
+    for (const { file, source } of appSources) {
+      expect(source, file).not.toContain("from 'konsta/vue'")
+    }
+  })
+
+  it('keeps app-specific support components on Sky UI', () => {
+    for (const { file, source } of appSupportSources) {
+      expect(source, file).not.toContain("from 'konsta/vue'")
+      expect(source, file).toContain("from '@/ui'")
+    }
+  })
+
+  it('only renders Sky UI tags that are exported by the shared library', () => {
+    for (const { file, source } of appSources) {
+      const tags = [...source.matchAll(/<\/?(sky-[a-z0-9-]+)/g)].map(
+        ([, tag]) => tag,
+      )
+
+      for (const tag of tags)
+        expect(exportedSkyTags, `${file}: ${tag}`).toContain(tag)
+    }
+  })
+
+  it('does not contain identifiers damaged by the Konsta prefix migration', () => {
+    const damagedIdentifier =
+      /(?:clocsky|crewlinsky|darsky|locsky|networsky|tracsky)/
+
+    for (const { file, source } of [...appSources, ...appSupportSources]) {
+      expect(source, file).not.toMatch(damagedIdentifier)
+    }
+  })
+
+  it('does not pass obsolete Konsta color maps into Sky components', () => {
+    for (const { file, source } of [...appSources, ...appSupportSources]) {
+      expect(source, file).not.toMatch(/\b:colors=/)
+    }
+  })
+})
diff --git a/frontend/src/views/apps/WeatherApp.vue b/frontend/src/views/apps/WeatherApp.vue
index 8bd6503..04fb723 100644
--- a/frontend/src/views/apps/WeatherApp.vue
+++ b/frontend/src/views/apps/WeatherApp.vue
@@ -73,12 +73,18 @@ const rainDrops = [
   '--rain-opacity': opacity,
 }))
 const snowFlakes = [
-  ['4%', '1.8s', '-1.2s', '0.4'], ['12%', '2.6s', '-0.5s', '0.65'],
-  ['19%', '2.1s', '-1.7s', '0.45'], ['27%', '2.9s', '-0.9s', '0.7'],
-  ['36%', '2.3s', '-1.4s', '0.55'], ['44%', '3.1s', '-0.2s', '0.45'],
-  ['53%', '2s', '-1.8s', '0.7'], ['62%', '2.7s', '-1.1s', '0.48'],
-  ['70%', '2.2s', '-0.7s', '0.6'], ['78%', '3s', '-1.6s', '0.42'],
-  ['87%', '2.4s', '-0.3s', '0.68'], ['95%', '2.8s', '-1.3s', '0.5'],
+  ['4%', '1.8s', '-1.2s', '0.4'],
+  ['12%', '2.6s', '-0.5s', '0.65'],
+  ['19%', '2.1s', '-1.7s', '0.45'],
+  ['27%', '2.9s', '-0.9s', '0.7'],
+  ['36%', '2.3s', '-1.4s', '0.55'],
+  ['44%', '3.1s', '-0.2s', '0.45'],
+  ['53%', '2s', '-1.8s', '0.7'],
+  ['62%', '2.7s', '-1.1s', '0.48'],
+  ['70%', '2.2s', '-0.7s', '0.6'],
+  ['78%', '3s', '-1.6s', '0.42'],
+  ['87%', '2.4s', '-0.3s', '0.68'],
+  ['95%', '2.8s', '-1.3s', '0.5'],
 ].map(([left, duration, delay, opacity]) => ({
   '--snow-delay': delay,
   '--snow-duration': duration,
@@ -166,7 +172,6 @@ watch(
     cooldownToastTimer = setTimeout(closeCooldownToast, 2800)
   },
 )
-
 </script>
 
 <template>
@@ -208,10 +213,7 @@ watch(
       aria-hidden="true"
     ></div>
     <div v-if="isNight" class="weather-app__stars" aria-hidden="true"></div>
-    <SkyNavbar
-      class="weather-navbar"
-      :title="phone.t('Apps.weather.name')"
-    />
+    <SkyNavbar class="weather-navbar" :title="phone.t('Apps.weather.name')" />
 
     <SkyScrollArea
       v-if="forecast"
@@ -257,44 +259,29 @@ watch(
         class="weather-details"
         :aria-label="phone.t('Apps.weather.details')"
       >
-        <SkyCard
-          :content-wrap="false"
-          class="weather-detail-card"
-        >
+        <SkyCard :content-wrap="false" class="weather-detail-card">
           <ThermometerSun :size="18" />
           <span>{{ phone.t('Apps.weather.feelsLike') }}</span>
           <strong>{{ forecast.feelsLike }}°</strong>
         </SkyCard>
-        <SkyCard
-          :content-wrap="false"
-          class="weather-detail-card"
-        >
+        <SkyCard :content-wrap="false" class="weather-detail-card">
           <Wind :size="18" />
           <span>{{ phone.t('Apps.weather.wind') }}</span>
           <strong>{{ forecast.windSpeed }} km/h</strong>
         </SkyCard>
-        <SkyCard
-          :content-wrap="false"
-          class="weather-detail-card"
-        >
+        <SkyCard :content-wrap="false" class="weather-detail-card">
           <Droplets :size="18" />
           <span>{{ phone.t('Apps.weather.humidity') }}</span>
           <strong>{{ forecast.humidity }}%</strong>
         </SkyCard>
-        <SkyCard
-          :content-wrap="false"
-          class="weather-detail-card"
-        >
+        <SkyCard :content-wrap="false" class="weather-detail-card">
           <Umbrella :size="18" />
           <span>{{ phone.t('Apps.weather.rain') }}</span>
           <strong>{{ forecast.rainChance }}%</strong>
         </SkyCard>
       </section>
 
-      <SkyCard
-        :content-wrap="false"
-        class="weather-panel weather-hourly-panel"
-      >
+      <SkyCard :content-wrap="false" class="weather-panel weather-hourly-panel">
         <h2><Gauge :size="15" />{{ phone.t('Apps.weather.hourly') }}</h2>
         <div class="weather-hourly">
           <div
@@ -315,10 +302,7 @@ watch(
     </SkyScrollArea>
 
     <div v-else class="weather-empty">
-      <SkySpinner
-        v-if="weather.isLoading"
-        :label="phone.t('Common.loading')"
-      />
+      <SkySpinner v-if="weather.isLoading" :label="phone.t('Common.loading')" />
       <CloudSun v-else :size="52" :stroke-width="1.4" />
       <strong>{{
         phone.t(
diff --git a/frontend/src/views/apps/weazel-news-app.vue b/frontend/src/views/apps/weazel-news-app.vue
index db706fe..e566b79 100644
--- a/frontend/src/views/apps/weazel-news-app.vue
+++ b/frontend/src/views/apps/weazel-news-app.vue
@@ -1,27 +1,27 @@
 <script setup lang="ts">
 import {
-  kButton,
-  kCard,
-  kDialog,
-  kDialogButton,
-  kIcon,
-  kLink,
-  kList,
-  kListInput,
-  kListItem,
-  kNavbar,
-  kNavbarBackLink,
-  kPage,
-  kPreloader,
-  kSearchbar,
-  kSegmented,
-  kSegmentedButton,
-  kSheet,
-  kTabbar,
-  kTabbarLink,
-  kToast,
-  kToolbarPane,
-} from 'konsta/vue'
+  SkyButton,
+  SkyCard,
+  SkyDialog,
+  SkyDialogButton,
+  SkyIcon,
+  SkyLink,
+  SkyList,
+  SkyField,
+  SkyListItem,
+  SkyNavbar,
+  SkyNavbarBackLink,
+  SkyAppPage,
+  SkySpinner,
+  SkySearchbar,
+  SkySegmented,
+  SkySegmentedButton,
+  SkySheet,
+  SkyTabBar,
+  SkyTabButton,
+  SkyToast,
+  SkyToolbarPane,
+} from '@/ui'
 import {
   BriefcaseBusiness,
   Building2,
@@ -462,22 +462,21 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <k-page
+  <sky-app-page
     component="main"
     class="weazel-app"
     :class="{ 'weazel-app--light': !phone.isDarkMode }"
-    :colors="{ bgIos: 'bg-transparent' }"
     :aria-label="t('name')"
   >
     <template v-if="screen === 'main'">
-      <k-navbar class="weazel-navbar" :center-title="true">
+      <sky-navbar class="weazel-navbar" :center-title="true">
         <template #title>
           <span class="weazel-brand" :aria-label="t('brand')">
             <span><Newspaper :size="16" :stroke-width="2.4" /></span>
             <b>{{ t('brand') }}</b>
           </span>
         </template>
-      </k-navbar>
+      </sky-navbar>
 
       <div class="weazel-scroll">
         <template v-if="activeTab === 'home'">
@@ -498,16 +497,16 @@ onBeforeUnmount(() => {
           </header>
 
           <div v-if="currentSurfaceLoading" class="weazel-state">
-            <k-preloader class="text-[#d71920]" />
+            <sky-spinner class="text-[#d71920]" />
             <span>{{ t('states.loading') }}</span>
           </div>
           <div v-else-if="activeError" class="weazel-state">
             <Newspaper :size="34" />
             <strong>{{ t('states.errorTitle') }}</strong>
             <span>{{ contextualError }}</span>
-            <k-button rounded small @click="loadHome">{{
+            <sky-button rounded small @click="loadHome">{{
               t('retry')
-            }}</k-button>
+            }}</sky-button>
           </div>
           <div v-else-if="!featuredArticle" class="weazel-state">
             <FileText :size="34" />
@@ -515,7 +514,7 @@ onBeforeUnmount(() => {
             <span>{{ t('states.emptyBody') }}</span>
           </div>
           <section v-else :aria-label="t('accessibility.articleList')">
-            <k-card :content-wrap="false" class="weazel-feature-card">
+            <sky-card :content-wrap="false" class="weazel-feature-card">
               <button
                 type="button"
                 :aria-label="
@@ -548,14 +547,14 @@ onBeforeUnmount(() => {
                   </small>
                 </div>
               </button>
-            </k-card>
+            </sky-card>
 
             <div class="weazel-latest-title">
               <span>{{ t('home.latest') }}</span>
               <i></i>
             </div>
             <div class="weazel-card-list">
-              <k-card
+              <sky-card
                 v-for="article in secondaryArticles"
                 :key="article.id"
                 :content-wrap="false"
@@ -581,9 +580,9 @@ onBeforeUnmount(() => {
                   />
                   <span v-else class="weazel-card-mark">W</span>
                 </button>
-              </k-card>
+              </sky-card>
             </div>
-            <k-button
+            <sky-button
               v-if="news.publicHasMore"
               class="weazel-load-more"
               tonal
@@ -597,7 +596,7 @@ onBeforeUnmount(() => {
               "
             >
               {{ t('loadMore') }}
-            </k-button>
+            </sky-button>
           </section>
         </template>
 
@@ -609,13 +608,13 @@ onBeforeUnmount(() => {
               <p>{{ t('categories.subtitle') }}</p>
             </div>
           </header>
-          <k-list
+          <sky-list
             inset
             strong
             class="weazel-category-list"
             :aria-label="t('accessibility.categoryList')"
           >
-            <k-list-item
+            <sky-list-item
               v-for="category in WEAZEL_NEWS_CATEGORY_IDS"
               :key="category"
               link
@@ -635,8 +634,8 @@ onBeforeUnmount(() => {
                   <component :is="categoryIcons[category]" :size="19" />
                 </span>
               </template>
-            </k-list-item>
-          </k-list>
+            </sky-list-item>
+          </sky-list>
         </template>
 
         <template v-else-if="activeTab === 'search'">
@@ -647,7 +646,7 @@ onBeforeUnmount(() => {
             </div>
           </header>
           <div class="weazel-search-shell">
-            <k-searchbar
+            <sky-searchbar
               component="form"
               class="weazel-searchbar"
               input-id="weazel-news-search"
@@ -675,7 +674,7 @@ onBeforeUnmount(() => {
             v-if="currentSurfaceLoading"
             class="weazel-state weazel-state--compact"
           >
-            <k-preloader class="text-[#d71920]" />
+            <sky-spinner class="text-[#d71920]" />
             <span>{{ t('states.loading') }}</span>
           </div>
           <div
@@ -685,9 +684,9 @@ onBeforeUnmount(() => {
             <Newspaper :size="34" />
             <strong>{{ t('states.errorTitle') }}</strong>
             <span>{{ contextualError }}</span>
-            <k-button rounded small @click="submitSearch">{{
+            <sky-button rounded small @click="submitSearch">{{
               t('retry')
-            }}</k-button>
+            }}</sky-button>
           </div>
           <div
             v-else-if="searchSubmitted && !news.publicItems.length"
@@ -698,7 +697,7 @@ onBeforeUnmount(() => {
             <span>{{ t('search.emptyBody') }}</span>
           </div>
           <div v-else-if="searchSubmitted" class="weazel-card-list">
-            <k-card
+            <sky-card
               v-for="article in news.publicItems"
               :key="article.id"
               :content-wrap="false"
@@ -714,9 +713,9 @@ onBeforeUnmount(() => {
                 <img v-if="article.imageUrl" :src="article.imageUrl" alt="" />
                 <ChevronRight v-else :size="20" />
               </button>
-            </k-card>
+            </sky-card>
           </div>
-          <k-button
+          <sky-button
             v-if="
               searchSubmitted && news.publicHasMore && !currentSurfaceLoading
             "
@@ -726,7 +725,7 @@ onBeforeUnmount(() => {
             @click="loadMoreSearch"
           >
             {{ t('loadMore') }}
-          </k-button>
+          </sky-button>
         </template>
 
         <template v-else>
@@ -742,16 +741,16 @@ onBeforeUnmount(() => {
             v-if="currentSurfaceLoading && !news.context"
             class="weazel-state"
           >
-            <k-preloader class="text-[#d71920]" />
+            <sky-spinner class="text-[#d71920]" />
             <span>{{ t('states.loading') }}</span>
           </div>
           <div v-else-if="activeError && !news.context" class="weazel-state">
             <Newspaper :size="34" />
             <strong>{{ t('states.errorTitle') }}</strong>
             <span>{{ contextualError }}</span>
-            <k-button rounded small @click="loadEditorial">{{
+            <sky-button rounded small @click="loadEditorial">{{
               t('retry')
-            }}</k-button>
+            }}</sky-button>
           </div>
           <div v-else-if="!news.context?.canManage" class="weazel-state">
             <UserRound :size="36" />
@@ -759,7 +758,7 @@ onBeforeUnmount(() => {
             <span>{{ t('states.readOnlyBody') }}</span>
           </div>
           <template v-else>
-            <k-card :content-wrap="false" class="weazel-access-card">
+            <sky-card :content-wrap="false" class="weazel-access-card">
               <div class="weazel-access-content">
                 <span class="weazel-access-avatar">W</span>
                 <div class="weazel-access-identity">
@@ -773,7 +772,7 @@ onBeforeUnmount(() => {
                     })
                   }}</small>
                 </div>
-                <k-button
+                <sky-button
                   rounded
                   small
                   class="weazel-new-article"
@@ -781,12 +780,12 @@ onBeforeUnmount(() => {
                   @click="createArticle"
                 >
                   <Plus :size="17" /> {{ t('editorial.newArticle') }}
-                </k-button>
+                </sky-button>
               </div>
-            </k-card>
+            </sky-card>
 
-            <k-segmented strong rounded class="weazel-editorial-filter">
-              <k-segmented-button
+            <sky-segmented strong rounded class="weazel-editorial-filter">
+              <sky-segmented-button
                 v-for="status in [
                   'all',
                   'published',
@@ -797,14 +796,14 @@ onBeforeUnmount(() => {
                 @click="changeEditorialStatus(status)"
               >
                 {{ t(`editorial.${status === 'draft' ? 'drafts' : status}`) }}
-              </k-segmented-button>
-            </k-segmented>
+              </sky-segmented-button>
+            </sky-segmented>
 
             <div
               v-if="currentSurfaceLoading"
               class="weazel-state weazel-state--compact"
             >
-              <k-preloader class="text-[#d71920]" />
+              <sky-spinner class="text-[#d71920]" />
             </div>
             <div
               v-else-if="activeError"
@@ -813,9 +812,9 @@ onBeforeUnmount(() => {
               <Newspaper :size="34" />
               <strong>{{ t('states.errorTitle') }}</strong>
               <span>{{ contextualError }}</span>
-              <k-button rounded small @click="loadEditorial">{{
+              <sky-button rounded small @click="loadEditorial">{{
                 t('retry')
-              }}</k-button>
+              }}</sky-button>
             </div>
             <div
               v-else-if="!news.managedItems.length"
@@ -825,14 +824,14 @@ onBeforeUnmount(() => {
               <strong>{{ t('states.noManagedTitle') }}</strong>
               <span>{{ t('states.noManagedBody') }}</span>
             </div>
-            <k-list
+            <sky-list
               v-else
               inset
               strong
               class="weazel-editorial-list"
               :aria-label="t('accessibility.editorialList')"
             >
-              <k-list-item
+              <sky-list-item
                 v-for="article in news.managedItems"
                 :key="article.id"
                 link
@@ -860,9 +859,9 @@ onBeforeUnmount(() => {
                     {{ statusLabel(article.status) }}
                   </span>
                 </template>
-              </k-list-item>
-            </k-list>
-            <k-button
+              </sky-list-item>
+            </sky-list>
+            <sky-button
               v-if="
                 news.managedItems.length &&
                 news.managedHasMore &&
@@ -874,12 +873,12 @@ onBeforeUnmount(() => {
               @click="loadMoreManaged"
             >
               {{ t('loadMore') }}
-            </k-button>
+            </sky-button>
           </template>
         </template>
       </div>
 
-      <k-tabbar
+      <sky-tab-bar
         component="nav"
         icons
         labels
@@ -887,8 +886,8 @@ onBeforeUnmount(() => {
         inner-class="weazel-tabbar__inner"
         :aria-label="t('navigation')"
       >
-        <k-toolbar-pane class="weazel-tabbar__pane">
-          <k-tabbar-link
+        <sky-toolbar-pane class="weazel-tabbar__pane">
+          <sky-tab-button
             component="button"
             class="weazel-tabbar__link"
             :active="activeTab === 'home'"
@@ -896,11 +895,11 @@ onBeforeUnmount(() => {
             @click="selectTab('home')"
           >
             <template #icon
-              ><k-icon><House :size="22" /></k-icon
+              ><sky-icon><House :size="22" /></sky-icon
             ></template>
             <template #label>{{ t('tabs.home') }}</template>
-          </k-tabbar-link>
-          <k-tabbar-link
+          </sky-tab-button>
+          <sky-tab-button
             component="button"
             class="weazel-tabbar__link"
             :active="activeTab === 'categories'"
@@ -908,11 +907,11 @@ onBeforeUnmount(() => {
             @click="selectTab('categories')"
           >
             <template #icon
-              ><k-icon><LayoutGrid :size="22" /></k-icon
+              ><sky-icon><LayoutGrid :size="22" /></sky-icon
             ></template>
             <template #label>{{ t('tabs.categories') }}</template>
-          </k-tabbar-link>
-          <k-tabbar-link
+          </sky-tab-button>
+          <sky-tab-button
             component="button"
             class="weazel-tabbar__link"
             :active="activeTab === 'search'"
@@ -920,11 +919,11 @@ onBeforeUnmount(() => {
             @click="selectTab('search')"
           >
             <template #icon
-              ><k-icon><Search :size="22" /></k-icon
+              ><sky-icon><Search :size="22" /></sky-icon
             ></template>
             <template #label>{{ t('tabs.search') }}</template>
-          </k-tabbar-link>
-          <k-tabbar-link
+          </sky-tab-button>
+          <sky-tab-button
             component="button"
             class="weazel-tabbar__link"
             :active="activeTab === 'editorial'"
@@ -932,25 +931,25 @@ onBeforeUnmount(() => {
             @click="selectTab('editorial')"
           >
             <template #icon
-              ><k-icon><UserRound :size="22" /></k-icon
+              ><sky-icon><UserRound :size="22" /></sky-icon
             ></template>
             <template #label>{{ t('tabs.editorial') }}</template>
-          </k-tabbar-link>
-        </k-toolbar-pane>
-      </k-tabbar>
+          </sky-tab-button>
+        </sky-toolbar-pane>
+      </sky-tab-bar>
     </template>
 
     <template v-else-if="screen === 'detail' && selectedArticle">
-      <k-navbar class="weazel-navbar" :title="t('article.readMore')">
+      <sky-navbar class="weazel-navbar" :title="t('article.readMore')">
         <template #left>
-          <k-navbar-back-link
+          <sky-navbar-back-link
             component="button"
             :text="t('back')"
             @click="closeDetail"
           />
         </template>
         <template v-if="news.context?.canManage && detailManaged" #right>
-          <k-link
+          <sky-link
             component="button"
             icon-only
             :aria-label="
@@ -959,9 +958,9 @@ onBeforeUnmount(() => {
             @click="editArticle(selectedArticle)"
           >
             <Pencil :size="19" />
-          </k-link>
+          </sky-link>
         </template>
-      </k-navbar>
+      </sky-navbar>
       <article class="weazel-detail-scroll">
         <img
           v-if="selectedArticle.imageUrl"
@@ -1000,34 +999,34 @@ onBeforeUnmount(() => {
           v-if="news.context?.canManage && detailManaged"
           class="weazel-detail-actions"
         >
-          <k-button rounded tonal @click="editArticle(selectedArticle)">
+          <sky-button rounded tonal @click="editArticle(selectedArticle)">
             <Pencil :size="18" /> {{ t('editorial.edit') }}
-          </k-button>
-          <k-button
+          </sky-button>
+          <sky-button
             rounded
             tonal
             class="weazel-danger"
             @click="requestDelete(selectedArticle)"
           >
             <Trash2 :size="18" /> {{ t('editorial.delete') }}
-          </k-button>
+          </sky-button>
         </div>
       </article>
     </template>
 
     <template v-else-if="screen === 'composer'">
-      <k-navbar
+      <sky-navbar
         class="weazel-navbar"
         :title="t(editingArticle ? 'composer.editTitle' : 'composer.newTitle')"
       >
         <template #left>
-          <k-navbar-back-link
+          <sky-navbar-back-link
             component="button"
             :text="t('back')"
             @click="closeComposer"
           />
         </template>
-      </k-navbar>
+      </sky-navbar>
       <div class="weazel-composer-scroll">
         <section class="weazel-composer-cover">
           <img
@@ -1039,7 +1038,7 @@ onBeforeUnmount(() => {
             <ImagePlus :size="34" /><span>{{ t('composer.cover') }}</span>
           </div>
           <div class="weazel-cover-actions">
-            <k-button
+            <sky-button
               rounded
               tonal
               class="weazel-cover-picker"
@@ -1055,8 +1054,8 @@ onBeforeUnmount(() => {
                   )
                 }}
               </span>
-            </k-button>
-            <k-button
+            </sky-button>
+            <sky-button
               v-if="selectedCover"
               rounded
               clear
@@ -1064,12 +1063,12 @@ onBeforeUnmount(() => {
               @click="removeCover"
             >
               {{ t('composer.removeCover') }}
-            </k-button>
+            </sky-button>
           </div>
         </section>
 
-        <k-list nested :dividers="false" class="weazel-composer-list">
-          <k-list-input
+        <sky-list nested :dividers="false" class="weazel-composer-list">
+          <sky-field
             outline
             class="weazel-composer-field"
             input-class="weazel-composer-input"
@@ -1079,7 +1078,7 @@ onBeforeUnmount(() => {
             :value="draft.title"
             @input="draft.title = eventValue($event)"
           />
-          <k-list-input
+          <sky-field
             outline
             class="weazel-composer-field"
             type="textarea"
@@ -1090,7 +1089,7 @@ onBeforeUnmount(() => {
             input-class="weazel-composer-input weazel-body-input"
             @input="draft.body = eventValue($event)"
           />
-          <k-list-item
+          <sky-list-item
             link
             link-component="button"
             :chevron="false"
@@ -1114,8 +1113,8 @@ onBeforeUnmount(() => {
                 :class="{ 'is-open': composerChoice === 'category' }"
               />
             </template>
-          </k-list-item>
-          <k-list-item
+          </sky-list-item>
+          <sky-list-item
             v-if="editingArticle"
             link
             link-component="button"
@@ -1140,12 +1139,12 @@ onBeforeUnmount(() => {
                 :class="{ 'is-open': composerChoice === 'status' }"
               />
             </template>
-          </k-list-item>
-        </k-list>
+          </sky-list-item>
+        </sky-list>
 
         <div class="weazel-composer-actions">
           <template v-if="!editingArticle">
-            <k-button
+            <sky-button
               large
               rounded
               tonal
@@ -1153,17 +1152,17 @@ onBeforeUnmount(() => {
               @click="saveArticle('draft')"
             >
               {{ t('composer.saveDraft') }}
-            </k-button>
-            <k-button
+            </sky-button>
+            <sky-button
               large
               rounded
               :disabled="news.mutating"
               @click="saveArticle('published')"
             >
               {{ t('composer.publish') }}
-            </k-button>
+            </sky-button>
           </template>
-          <k-button
+          <sky-button
             v-else
             large
             rounded
@@ -1171,12 +1170,12 @@ onBeforeUnmount(() => {
             @click="saveArticle()"
           >
             {{ t('composer.saveChanges') }}
-          </k-button>
+          </sky-button>
         </div>
       </div>
     </template>
 
-    <k-sheet
+    <sky-sheet
       :opened="composerChoice !== null"
       class="weazel-choice-sheet"
       @backdropclick="composerChoice = null"
@@ -1191,7 +1190,7 @@ onBeforeUnmount(() => {
         <div class="weazel-choice-sheet__handle" aria-hidden="true" />
         <header class="weazel-choice-sheet__header">
           <h2>{{ composerChoiceLabel }}</h2>
-          <k-link
+          <sky-link
             component="button"
             icon-only
             class="weazel-choice-sheet__close"
@@ -1200,15 +1199,15 @@ onBeforeUnmount(() => {
             @click="composerChoice = null"
           >
             <X />
-          </k-link>
+          </sky-link>
         </header>
-        <k-list
+        <sky-list
           nested
           :dividers="false"
           class="weazel-choice-options"
           role="listbox"
         >
-          <k-list-item
+          <sky-list-item
             v-for="option in composerChoiceOptions"
             :key="option.value"
             link
@@ -1238,35 +1237,35 @@ onBeforeUnmount(() => {
                 "
               />
             </template>
-          </k-list-item>
-        </k-list>
+          </sky-list-item>
+        </sky-list>
       </section>
-    </k-sheet>
+    </sky-sheet>
 
-    <k-dialog
+    <sky-dialog
       :opened="deleteDialogOpened"
       @backdropclick="deleteDialogOpened = false"
     >
       <template #title>{{ t('delete.title') }}</template>
       <p>{{ t('delete.body') }}</p>
       <template #buttons>
-        <k-dialog-button @click="deleteDialogOpened = false">
+        <sky-dialog-button @click="deleteDialogOpened = false">
           {{ t('delete.cancel') }}
-        </k-dialog-button>
-        <k-dialog-button strong class="text-red-500" @click="confirmDelete">
+        </sky-dialog-button>
+        <sky-dialog-button strong class="text-red-500" @click="confirmDelete">
           {{ t('delete.confirm') }}
-        </k-dialog-button>
+        </sky-dialog-button>
       </template>
-    </k-dialog>
+    </sky-dialog>
 
-    <k-toast
+    <sky-toast
       :opened="toastOpened"
       position="center"
       @click="toastOpened = false"
     >
       {{ toastText }}
-    </k-toast>
-  </k-page>
+    </sky-toast>
+  </sky-app-page>
 </template>
 
 <style scoped>
@@ -1294,7 +1293,7 @@ onBeforeUnmount(() => {
 }
 
 .weazel-navbar {
-  --k-safe-area-top: 46px;
+  --sky-safe-area-top: 46px;
   position: absolute;
   z-index: 10;
   top: 0;
@@ -1639,7 +1638,7 @@ onBeforeUnmount(() => {
   padding: 1.1cqh;
 }
 
-.weazel-access-card :deep(.k-card-content) {
+.weazel-access-card :deep(.sky-card__content) {
   padding: 0 !important;
 }
 
@@ -1859,20 +1858,20 @@ onBeforeUnmount(() => {
   padding: 0.37cqh 0 !important;
 }
 
-.weazel-tabbar :deep(.weazel-tabbar__link.k-link) {
+.weazel-tabbar :deep(.weazel-tabbar__link.sky-link) {
   padding-right: 0 !important;
   padding-left: 0 !important;
 }
 
-.weazel-tabbar :deep(.k-tabbar-link-icon),
-.weazel-tabbar :deep(.k-icon) {
+.weazel-tabbar :deep(.sky-tab-button__icon),
+.weazel-tabbar :deep(.sky-icon) {
   width: 22px !important;
   width: 2.72cqh !important;
   height: 22px !important;
   height: 2.72cqh !important;
 }
 
-.weazel-tabbar :deep(.k-tabbar-link-label) {
+.weazel-tabbar :deep(.sky-tab-button__label) {
   width: 100%;
   overflow: hidden;
   font-size: 9.5px;
diff --git a/sky_phone/source/client/camera.lua b/sky_phone/source/client/camera.lua
index 0c49eab..24903d9 100644
--- a/sky_phone/source/client/camera.lua
+++ b/sky_phone/source/client/camera.lua
@@ -44,7 +44,7 @@ local camera_state = {
     front_camera = false,
     front_camera_handle = nil,
     front_camera_offset = nil,
-    front_camera_rotation = nil,
+    front_camera_target_offset = nil,
     game_input = false,
     landscape = false,
     locked = false,
@@ -97,19 +97,12 @@ local function capture_front_camera_transform(ped)
         + vector3(0.0, 0.0, head_height + front_camera_height)
     local target_offset = (right_vector * (front_camera_side_offset * 0.25))
         + vector3(0.0, 0.0, head_height + front_camera_target_height)
-    local direction = target_offset - camera_offset
-    local horizontal_length = math.sqrt((direction.x * direction.x) + (direction.y * direction.y))
-    local rotation = vector3(
-        math.deg(math.atan(direction.z, horizontal_length)),
-        0.0,
-        math.deg(math.atan(-direction.x, direction.y))
-    )
-    return camera_offset, rotation
+    return camera_offset, target_offset
 end
 
 local function apply_front_camera(ped)
     if not camera_state.front_camera_handle or not DoesCamExist(camera_state.front_camera_handle) then
-        camera_state.front_camera_offset, camera_state.front_camera_rotation =
+        camera_state.front_camera_offset, camera_state.front_camera_target_offset =
             capture_front_camera_transform(ped)
         camera_state.front_camera_handle = CreateCam("DEFAULT_SCRIPTED_CAMERA", true)
         SetCamFov(camera_state.front_camera_handle, front_camera_fov)
@@ -119,19 +112,18 @@ local function apply_front_camera(ped)
 
     local ped_position = GetEntityCoords(ped)
     local camera_position = ped_position + camera_state.front_camera_offset
-    local rotation = camera_state.front_camera_rotation
+    local target_position = ped_position + camera_state.front_camera_target_offset
     SetCamCoord(
         camera_state.front_camera_handle,
         camera_position.x,
         camera_position.y,
         camera_position.z
     )
-    SetCamRot(
+    PointCamAtCoord(
         camera_state.front_camera_handle,
-        rotation.x,
-        rotation.y,
-        rotation.z,
-        2
+        target_position.x,
+        target_position.y,
+        target_position.z
     )
 end
 
@@ -142,7 +134,7 @@ local function clear_front_camera()
     end
     camera_state.front_camera_handle = nil
     camera_state.front_camera_offset = nil
-    camera_state.front_camera_rotation = nil
+    camera_state.front_camera_target_offset = nil
 end
 
 local function apply_rear_camera_view()
diff --git a/sky_phone/source/client/focus.lua b/sky_phone/source/client/focus.lua
index a565ea3..b8a8a3c 100644
--- a/sky_phone/source/client/focus.lua
+++ b/sky_phone/source/client/focus.lua
@@ -1,25 +1,34 @@
 SkyPhoneFocus = {}
 
+local blocked_phone_controls = { 19, 24, 140, 141, 142, 257, 263, 264 }
+
+function SkyPhoneFocus.ApplyGameInputControls()
+    for _, control in ipairs(blocked_phone_controls) do
+        DisableControlAction(0, control, true)
+    end
+    DisablePlayerFiring(PlayerId(), true)
+end
+
 function SkyPhoneFocus.Resolve(state)
     if state.activity_suspended then
-        return { cursor = false, focused = false, keep_input = false, movement_only = false }
+        return { cursor = false, focused = false, game_input = false, keep_input = false }
     end
     if state.call_focus then
-        return { cursor = true, focused = true, keep_input = false, movement_only = false }
+        return { cursor = true, focused = true, game_input = false, keep_input = false }
     end
     if state.camera_active and not state.camera_nui_focused then
-        return { cursor = false, focused = true, keep_input = true, movement_only = false }
+        return { cursor = false, focused = true, game_input = false, keep_input = true }
     end
-    local movement_only = state.is_open and state.allow_movement and not state.camera_active
+    local game_input = state.is_open and state.allow_movement and not state.camera_active
     local focused = state.is_open
         or state.notification_focus
         or state.payphone_focus
         or state.sim_picker_open
         or (state.camera_active and state.camera_nui_focused)
     return {
-        cursor = focused,
+        cursor = focused and not (game_input and state.cursor_disabled),
         focused = focused,
-        keep_input = movement_only,
-        movement_only = movement_only,
+        game_input = game_input,
+        keep_input = game_input,
     }
 end
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index 9b6aa64..d5267a7 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -12,7 +12,8 @@ local active_call_payload = nil
 local call_channel = 0
 local nui_generation = 0
 local activity_suspended = false
-local movement_only_input = false
+local phone_game_input = false
+local phone_cursor_disabled = false
 
 Bridge.Debug("debug", "[sky_phone] Client script initialized.", { always = true })
 
@@ -297,6 +298,7 @@ local function update_nui_focus()
         call_focus = call_focus,
         camera_active = camera_active,
         camera_nui_focused = camera_nui_focused,
+        cursor_disabled = phone_cursor_disabled,
         is_open = is_open,
         notification_focus = notification_focus,
         payphone_focus = payphone_focus,
@@ -304,7 +306,10 @@ local function update_nui_focus()
     })
     SetNuiFocus(focus.focused, focus.cursor)
     SetNuiFocusKeepInput(focus.keep_input)
-    movement_only_input = focus.movement_only
+    phone_game_input = focus.game_input
+    if not phone_game_input then
+        phone_cursor_disabled = false
+    end
     TriggerEvent("sky_phone:client:cameraFocusApplied", {
         active = camera_active,
         cursor = focus.cursor,
@@ -315,8 +320,12 @@ end
 
 CreateThread(function()
     while true do
-        if movement_only_input then
-            SkyPhoneFocus.ApplyMovementOnlyControls()
+        if phone_game_input then
+            SkyPhoneFocus.ApplyGameInputControls()
+            if IsDisabledControlJustPressed(0, 19) then
+                phone_cursor_disabled = not phone_cursor_disabled
+                update_nui_focus()
+            end
             Wait(0)
         else
             Wait(250)
@@ -1001,6 +1010,8 @@ AddEventHandler("onResourceStop", function(resource_name)
     sim_picker_payload = nil
     active_call_payload = nil
     activity_suspended = false
+    phone_game_input = false
+    phone_cursor_disabled = false
     SetNuiFocusKeepInput(false)
     SetNuiFocus(false, false)
 
diff --git a/sky_phone/source/server/notes.lua b/sky_phone/source/server/notes.lua
index 785a7f6..a83c5f5 100644
--- a/sky_phone/source/server/notes.lua
+++ b/sky_phone/source/server/notes.lua
@@ -65,7 +65,6 @@ Bridge.Callbacks.Register("sky_phone:notes:list", function(source)
     end
     return { success = true, data = SkyPhoneNotes.List(account_id, imei) }
 end)
-end)
 
 Bridge.Callbacks.Register("sky_phone:notes:create", function(source, data)
     if not SkyPhone.AllowOperation(source, "notes_write", 120, 60) then
@@ -175,3 +174,4 @@ Bridge.Callbacks.Register("sky_phone:notes:delete", function(source, data)
     notify_owner(account_id, imei)
     return { success = true, data = SkyPhoneNotes.List(account_id, imei) }
 end)
+end)
diff --git a/tests/client_camera.lua b/tests/client_camera.lua
new file mode 100644
index 0000000..5e7a5b1
--- /dev/null
+++ b/tests/client_camera.lua
@@ -0,0 +1,125 @@
+local callbacks = {}
+local camera_coord = nil
+local camera_target = nil
+local camera_created = false
+local camera_destroyed = false
+local scripted_camera_rendering = false
+
+local vector_meta = {}
+vector_meta.__index = vector_meta
+
+function vector_meta.__add(left, right)
+    return vector3(left.x + right.x, left.y + right.y, left.z + right.z)
+end
+
+function vector_meta.__sub(left, right)
+    return vector3(left.x - right.x, left.y - right.y, left.z - right.z)
+end
+
+function vector_meta.__mul(left, right)
+    if type(left) == "number" then
+        left, right = right, left
+    end
+    return vector3(left.x * right, left.y * right, left.z * right)
+end
+
+function vector3(x, y, z)
+    return setmetatable({ x = x, y = y, z = z }, vector_meta)
+end
+
+function RegisterNUICallback(name, callback)
+    callbacks[name] = callback
+end
+
+function RegisterNetEvent() end
+function AddEventHandler() end
+function TriggerEvent() end
+function TriggerServerEvent() end
+function SendNUIMessage() end
+function CreateThread() end
+function Wait() end
+function PlayerPedId() return 7 end
+function PlayerId() return 8 end
+function GetFollowPedCamViewMode() return 1 end
+function GetFollowVehicleCamViewMode() return 2 end
+function IsRadarHidden() return false end
+function DisplayRadar() end
+function SetFollowPedCamViewMode() end
+function SetFollowVehicleCamViewMode() end
+function IsPedInAnyVehicle() return false end
+function DisableControlAction() end
+function DisablePlayerFiring() end
+function HideHudAndRadarThisFrame() end
+function GetCurrentResourceName() return "sky_phone" end
+
+function GetEntityCoords()
+    return vector3(10.0, 20.0, 1.0)
+end
+
+function GetPedBoneCoords()
+    return vector3(10.0, 20.0, 2.7)
+end
+
+function GetEntityForwardVector()
+    return vector3(0.0, 1.0, 0.0)
+end
+
+function CreateCam(name, active)
+    assert(name == "DEFAULT_SCRIPTED_CAMERA" and active, "selfie camera must be created active")
+    camera_created = true
+    return 73
+end
+
+function DoesCamExist(handle)
+    return camera_created and not camera_destroyed and handle == 73
+end
+
+function SetCamFov() end
+function SetCamActive() end
+
+function RenderScriptCams(active)
+    scripted_camera_rendering = active
+end
+
+function SetCamCoord(_, x, y, z)
+    camera_coord = vector3(x, y, z)
+end
+
+function PointCamAtCoord(_, x, y, z)
+    camera_target = vector3(x, y, z)
+end
+
+function DestroyCam(handle)
+    assert(handle == 73, "the selfie camera handle must be destroyed")
+    camera_destroyed = true
+end
+
+local function response_from(name, data)
+    local response = nil
+    callbacks[name](data, function(value)
+        response = value
+    end)
+    return response
+end
+
+local function close_enough(actual, expected)
+    return math.abs(actual - expected) < 0.0001
+end
+
+dofile("sky_phone/source/client/camera.lua")
+
+assert(response_from("camera:setActive", { active = true }).success)
+assert(response_from("camera:setFacing", { front = true }).success)
+assert(camera_created and scripted_camera_rendering, "selfie mode must render a scripted camera")
+assert(camera_coord and camera_target, "selfie mode must position and aim the camera")
+assert(close_enough(camera_coord.x, 10.0))
+assert(close_enough(camera_coord.y, 21.45))
+assert(close_enough(camera_coord.z, 2.76))
+assert(close_enough(camera_target.x, 10.0))
+assert(close_enough(camera_target.y, 20.0))
+assert(close_enough(camera_target.z, 2.6))
+
+assert(response_from("camera:setFacing", { front = false }).success)
+assert(camera_destroyed and not scripted_camera_rendering, "rear mode must release the selfie camera")
+
+print("Client camera tests passed")
diff --git a/tests/client_focus.lua b/tests/client_focus.lua
index 11b4269..21bd95a 100644
--- a/tests/client_focus.lua
+++ b/tests/client_focus.lua
@@ -1,14 +1,9 @@
-local disabled_control_group = nil
-local enabled_controls = {}
+local disabled_controls = {}
 local firing_disabled = false
 
-function DisableAllControlActions(group)
-    disabled_control_group = group
-end
-
-function EnableControlAction(group, control, enabled)
-    assert(group == 0 and enabled, "movement controls must be enabled in the primary input group")
-    enabled_controls[control] = true
+function DisableControlAction(group, control, disabled)
+    assert(group == 0 and disabled, "phone controls must be disabled in the primary input group")
+    disabled_controls[control] = true
 end
 
 function PlayerId()
@@ -29,6 +24,7 @@ local function resolve(overrides)
         call_focus = false,
         camera_active = false,
         camera_nui_focused = true,
+        cursor_disabled = false,
         is_open = false,
         notification_focus = false,
         payphone_focus = false,
@@ -66,19 +62,30 @@ assert(
     movable_phone.cursor
         and movable_phone.focused
         and movable_phone.keep_input
-        and movable_phone.movement_only,
-    "an open phone must keep only movement input when movement is enabled"
+        and movable_phone.game_input,
+    "an open phone must keep GTA input when movement is enabled"
 )
 
-SkyPhoneFocus.ApplyMovementOnlyControls()
-assert(disabled_control_group == 0, "movement filtering must disable the primary input group")
-for _, control in ipairs({ 21, 30, 31, 32, 33, 34, 35 }) do
-    assert(enabled_controls[control], ("movement control %d must stay enabled"):format(control))
+local cursor_disabled_phone = resolve({
+    allow_movement = true,
+    cursor_disabled = true,
+    is_open = true,
+})
+assert(
+    not cursor_disabled_phone.cursor
+        and cursor_disabled_phone.focused
+        and cursor_disabled_phone.keep_input,
+    "toggling Alt must release the NUI cursor while preserving phone and GTA input"
+)
+
+SkyPhoneFocus.ApplyGameInputControls()
+for _, control in ipairs({ 19, 24, 140, 141, 142, 257, 263, 264 }) do
+    assert(disabled_controls[control], ("phone control %d must remain disabled"):format(control))
 end
-assert(not enabled_controls[1] and not enabled_controls[2], "look controls must stay disabled")
-assert(not enabled_controls[24] and not enabled_controls[25], "combat controls must stay disabled")
-assert(not enabled_controls[22], "jump must stay disabled")
-assert(firing_disabled, "player firing must remain disabled while the phone is open")
+assert(not disabled_controls[1] and not disabled_controls[2], "look controls must stay enabled")
+assert(not disabled_controls[21] and not disabled_controls[22], "sprint and jump must stay enabled")
+assert(not disabled_controls[30] and not disabled_controls[31], "movement axes must stay enabled")
+assert(firing_disabled, "player attacks must remain disabled while the phone is open")
 
 local movable_notification = resolve({ allow_movement = true, notification_focus = true })
 assert(
@@ -95,7 +102,7 @@ assert(
     not camera_game_input.cursor
         and camera_game_input.focused
         and camera_game_input.keep_input
-        and not camera_game_input.movement_only,
+        and not camera_game_input.game_input,
     "camera movement must keep keyboard focus without retaining the NUI cursor"
 )