diff --git a/apps/stage-tamagotchi/index.html b/apps/stage-tamagotchi/index.html
index f4624dc62..3f7b9e5c8 100644
--- a/apps/stage-tamagotchi/index.html
+++ b/apps/stage-tamagotchi/index.html
@@ -19,7 +19,7 @@
     <script src="/assets/js/CubismSdkForWeb-5-r.3/Core/live2dcubismcore.min.js"></script>
   </head>
 
-  <body>
+  <body class="font-sans">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/apps/stage-tamagotchi/src/components/InteractiveArea.vue b/apps/stage-tamagotchi/src/components/InteractiveArea.vue
index c62e7c3f3..c7f7b812e 100644
--- a/apps/stage-tamagotchi/src/components/InteractiveArea.vue
+++ b/apps/stage-tamagotchi/src/components/InteractiveArea.vue
@@ -112,7 +112,7 @@ onMounted(() => {
         :placeholder="t('stage.message')"
         border="solid 2 primary-100"
         text="primary-400 hover:primary-600  placeholder:primary-400 placeholder:hover:primary-600"
-        bg="primary-50 dark:[#3c2632]" max-h="[10lh]" min-h="[1lh]"
+        bg="primary-50 dark:primary-100" max-h="[10lh]" min-h="[1lh]"
         w-full resize-none overflow-y-scroll rounded-xl p-2 font-medium outline-none
         transition="all duration-250 ease-in-out placeholder:all placeholder:duration-250 placeholder:ease-in-out"
         @submit="handleSend"
diff --git a/apps/stage-tamagotchi/src/layouts/settings.vue b/apps/stage-tamagotchi/src/layouts/settings.vue
index 6f436b1ab..522a23f4d 100644
--- a/apps/stage-tamagotchi/src/layouts/settings.vue
+++ b/apps/stage-tamagotchi/src/layouts/settings.vue
@@ -41,10 +41,6 @@ const routeHeaderMetadataMap = computed(() => {
       subtitle: t('settings.title'),
       title: t('settings.pages.modules.speech.title'),
     },
-    '/settings/modules/mcp': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.mcp-server.title'),
-    },
     '/settings/modules/hearing': {
       subtitle: t('settings.title'),
       title: t('settings.pages.modules.hearing.title'),
@@ -84,12 +80,18 @@ const routeHeaderMetadataMap = computed(() => {
     '/settings': {
       title: t('settings.title'),
     },
+
+    // Tamagotchi specific
+    '/settings/modules/mcp': {
+      subtitle: t('settings.title'),
+      title: t('settings.pages.modules.mcp-server.title'),
+    },
   }
 
-  for (const key in allProvidersMetadata.value) {
-    map[`/settings/providers/${key}`] = {
+  for (const metadata of allProvidersMetadata.value) {
+    map[`/settings/providers/${metadata.id}`] = {
       subtitle: t('settings.title'),
-      title: t(allProvidersMetadata.value[key]?.nameKey),
+      title: t(metadata.nameKey),
     }
   }
 
@@ -101,13 +103,22 @@ const routeHeaderMetadata = computed(() => routeHeaderMetadataMap.value[route.pa
 </script>
 
 <template>
-  <div px-4 py-8 flex="~ col gap-4">
-    <PageHeader
-      v-if="routeHeaderMetadata"
-      :title="routeHeaderMetadata.title"
-      :subtitle="routeHeaderMetadata.subtitle"
-      :show-back-button="route.path !== '/settings'"
-    />
-    <RouterView />
+  <div
+    :style="{
+      paddingBottom: 'env(safe-area-inset-bottom, 0px)',
+      paddingTop: 'env(safe-area-inset-top, 0px)',
+      paddingRight: 'env(safe-area-inset-right, 0px)',
+      paddingLeft: 'env(safe-area-inset-left, 0px)',
+    }"
+  >
+    <!-- Content -->
+    <div class="px-3 py-2 md:px-5 md:py-5" flex="~ col" mx-auto max-w-screen-xl>
+      <PageHeader
+        :title="routeHeaderMetadata?.title"
+        :subtitle="routeHeaderMetadata?.subtitle"
+        :disable-back-button="route.path === '/settings'"
+      />
+      <RouterView />
+    </div>
   </div>
 </template>
diff --git a/apps/stage-tamagotchi/src/pages/index.vue b/apps/stage-tamagotchi/src/pages/index.vue
index 7a37f778a..68caeb679 100644
--- a/apps/stage-tamagotchi/src/pages/index.vue
+++ b/apps/stage-tamagotchi/src/pages/index.vue
@@ -74,7 +74,7 @@ onMounted(async () => {
         <div
           border="solid 2 primary-100 "
           text="lg primary-400 hover:primary-600  placeholder:primary-400 placeholder:hover:primary-600"
-          bg="primary-50 dark:[#3c2632]" max-h="[10lh]" min-h="[1lh]"
+          bg="primary-50 dark:primary-100" max-h="[10lh]" min-h="[1lh]"
           flex cursor-pointer items-center justify-center rounded-l-xl p-4 transition-colors
           @click="openChat"
         >
@@ -83,7 +83,7 @@ onMounted(async () => {
         <div
           border="solid 2 primary-100 "
           text="lg primary-400 hover:primary-600  placeholder:primary-400 placeholder:hover:primary-600"
-          bg="primary-50 dark:[#3c2632]" max-h="[10lh]" min-h="[1lh]"
+          bg="primary-50 dark:primary-100" max-h="[10lh]" min-h="[1lh]"
           flex cursor-pointer items-center justify-center rounded-r-xl p-4 transition-colors
           @click="openSettings"
         >
diff --git a/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardListItem.vue b/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardListItem.vue
index c728cf398..b3d1b951b 100644
--- a/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardListItem.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardListItem.vue
@@ -44,7 +44,7 @@ const emit = defineEmits<{
     >
       <!-- Card header (name and badge) -->
       <div z-1 flex items-start justify-between gap-2>
-        <h3 flex-1 truncate text-lg font-bold>
+        <h3 flex-1 truncate text-lg font-thin>
           {{ name }}
         </h3>
         <div v-if="isActive" shrink-0 rounded-md p-1 bg="primary-100 dark:primary-900/40" text="primary-600 dark:primary-400">
diff --git a/apps/stage-tamagotchi/src/pages/settings/index.vue b/apps/stage-tamagotchi/src/pages/settings/index.vue
index b95a97c8f..e97e0d53d 100644
--- a/apps/stage-tamagotchi/src/pages/settings/index.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/index.vue
@@ -106,7 +106,7 @@ const settings = computed(() => [
 </script>
 
 <template>
-  <div flex="~ col gap-4">
+  <div flex="~ col gap-4" font-thin>
     <div />
     <div flex="~ col gap-4">
       <IconItem
diff --git a/apps/stage-tamagotchi/src/pages/settings/providers/anthropic.vue b/apps/stage-tamagotchi/src/pages/settings/providers/anthropic.vue
index 40fd041fa..fe019a6a7 100644
--- a/apps/stage-tamagotchi/src/pages/settings/providers/anthropic.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/providers/anthropic.vue
@@ -81,7 +81,7 @@ function handleResetSettings() {
     :on-back="() => router.back()"
   >
     <div bg="orange-50 dark:orange-900/20" rounded-xl p-4 flex="~ col gap-3">
-      <h2 text-xl font-bold text="orange-700 dark:orange-500">
+      <h2 text-xl font-semibold text="orange-700 dark:orange-500">
         Before you start
       </h2>
       <p>
diff --git a/apps/stage-web/src/pages/settings/airi-card/components/CardListItem.vue b/apps/stage-web/src/pages/settings/airi-card/components/CardListItem.vue
index c728cf398..b3d1b951b 100644
--- a/apps/stage-web/src/pages/settings/airi-card/components/CardListItem.vue
+++ b/apps/stage-web/src/pages/settings/airi-card/components/CardListItem.vue
@@ -44,7 +44,7 @@ const emit = defineEmits<{
     >
       <!-- Card header (name and badge) -->
       <div z-1 flex items-start justify-between gap-2>
-        <h3 flex-1 truncate text-lg font-bold>
+        <h3 flex-1 truncate text-lg font-thin>
           {{ name }}
         </h3>
         <div v-if="isActive" shrink-0 rounded-md p-1 bg="primary-100 dark:primary-900/40" text="primary-600 dark:primary-400">
diff --git a/apps/stage-web/src/pages/settings/index.vue b/apps/stage-web/src/pages/settings/index.vue
index b95a97c8f..e97e0d53d 100644
--- a/apps/stage-web/src/pages/settings/index.vue
+++ b/apps/stage-web/src/pages/settings/index.vue
@@ -106,7 +106,7 @@ const settings = computed(() => [
 </script>
 
 <template>
-  <div flex="~ col gap-4">
+  <div flex="~ col gap-4" font-thin>
     <div />
     <div flex="~ col gap-4">
       <IconItem
diff --git a/apps/stage-web/src/pages/settings/providers/anthropic.vue b/apps/stage-web/src/pages/settings/providers/anthropic.vue
index 40fd041fa..fe019a6a7 100644
--- a/apps/stage-web/src/pages/settings/providers/anthropic.vue
+++ b/apps/stage-web/src/pages/settings/providers/anthropic.vue
@@ -81,7 +81,7 @@ function handleResetSettings() {
     :on-back="() => router.back()"
   >
     <div bg="orange-50 dark:orange-900/20" rounded-xl p-4 flex="~ col gap-3">
-      <h2 text-xl font-bold text="orange-700 dark:orange-500">
+      <h2 text-xl font-semibold text="orange-700 dark:orange-500">
         Before you start
       </h2>
       <p>
diff --git a/packages/stage-ui/src/components/Layouts/PageHeader.vue b/packages/stage-ui/src/components/Layouts/PageHeader.vue
index 474d9fff0..866cd091a 100644
--- a/packages/stage-ui/src/components/Layouts/PageHeader.vue
+++ b/packages/stage-ui/src/components/Layouts/PageHeader.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { useMotion } from '@vueuse/motion'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 const props = withDefaults(defineProps<{
   title: string
   subtitle?: string
   showBackButton?: boolean
+  disableBackButton?: boolean
 }>(), {
   showBackButton: true,
+  disableBackButton: false,
 })
 
 const router = useRouter()
@@ -17,6 +19,7 @@ const route = useRoute()
 const pageHeaderRef = ref<HTMLElement>()
 const title = ref(props.title)
 const subtitle = ref(props.subtitle)
+const finalizedDisableBackButton = ref(props.disableBackButton)
 
 const { apply } = useMotion(pageHeaderRef, {
   initial: { opacity: 0, x: 10, transition: { duration: 250 } },
@@ -31,14 +34,18 @@ onMounted(async () => {
 
 onUnmounted(async () => {
   await apply('leave')
+  finalizedDisableBackButton.value = true
 })
 
 watch([() => props.title, () => props.subtitle, route], async () => {
   await apply('leave')
+  await nextTick()
 
+  finalizedDisableBackButton.value = props.disableBackButton
   title.value = props.title
   subtitle.value = props.subtitle
 
+  await nextTick()
   await apply('initial')
   await apply('enter')
 })
@@ -58,6 +65,7 @@ watch([() => props.title, () => props.subtitle, route], async () => {
   >
     <button @click="router.back()">
       <div
+        v-if="!finalizedDisableBackButton"
         i-solar:alt-arrow-left-line-duotone text-2xl
         :class="{ 'pointer-events-none op-0': !showBackButton }"
       />
diff --git a/packages/stage-ui/src/components/Menu/IconItem.vue b/packages/stage-ui/src/components/Menu/IconItem.vue
index db0f87910..53d54d313 100644
--- a/packages/stage-ui/src/components/Menu/IconItem.vue
+++ b/packages/stage-ui/src/components/Menu/IconItem.vue
@@ -22,7 +22,7 @@ defineProps<{
     :to="to"
   >
     <div z-1 flex-1>
-      <div text-lg font-bold class="menu-icon-item-title" transition="all ease-in-out duration-400">
+      <div text-lg font-thin class="menu-icon-item-title" transition="all ease-in-out duration-400">
         {{ title }}
       </div>
       <div
diff --git a/packages/stage-ui/src/components/Menu/IconStatusItem.vue b/packages/stage-ui/src/components/Menu/IconStatusItem.vue
index 6565d4478..3232f414b 100644
--- a/packages/stage-ui/src/components/Menu/IconStatusItem.vue
+++ b/packages/stage-ui/src/components/Menu/IconStatusItem.vue
@@ -30,7 +30,7 @@ const props = defineProps<{
     >
       <div z-1 flex-1>
         <div
-          text-lg font-bold
+          text-lg font-thin
           class="menu-icon-status-item-title"
           transition="all ease-in-out duration-400"
         >
