diff --git a/.changeset/smooth-crabs-hope.md b/.changeset/smooth-crabs-hope.md
new file mode 100644
index 0000000..556f74e
--- /dev/null
+++ b/.changeset/smooth-crabs-hope.md
@@ -0,0 +1,6 @@
+---
+"@fessional/razor-mobile": patch
+"@fessional/razor-common": patch
+---
+
+✨ unocss ion-fit-card, common bool convertor
diff --git a/layers/mobile/uno.config.ts b/layers/mobile/uno.config.ts
new file mode 100644
index 0000000..e35f3ff
--- /dev/null
+++ b/layers/mobile/uno.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from 'unocss';
+
+export default defineConfig({
+  rules: [
+    ['ion-var-fit', {
+      '--width': 'fix-context',
+      '--height': 'fit-content',
+    }],
+    // https://ionicframework.com/docs/api/card
+    ['ion-var-card', {
+      '--border-radius': '4px',
+      '--box-shadow': 'rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px',
+    }],
+  ],
+  shortcuts: [
+    {
+      'ion-fit-card': 'ion-var-fit ion-var-card',
+    },
+  ],
+});
diff --git a/plays/3-play-h5m/pages/03-popup.vue b/plays/3-play-h5m/pages/03-popup.vue
new file mode 100644
index 0000000..e67ba11
--- /dev/null
+++ b/plays/3-play-h5m/pages/03-popup.vue
@@ -0,0 +1,33 @@
+<template>
+  <IonPage>
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton />
+        </IonButtons>
+        <IonTitle>Popup</IonTitle>
+        <IonButtons slot="end">
+          <IonMenuButton />
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent>
+      <div class="p-4">
+        <IonButton id="popup-default" class="text-white">
+          Popup Fit Card
+        </IonButton>
+        <IonModal trigger="popup-default" class="ion-fit-card">
+          <div class="w-40 h-30 p-4">
+            box of w-40 h-30 p-4
+          </div>
+        </IonModal>
+      </div>
+    </IonContent>
+  </IonPage>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  name: 'Ion Modal popup',
+});
+</script>