diff --git a/apps/stage-web/locales/en.yml b/apps/stage-web/locales/en.yml
index eb757a767..4ed13ff42 100644
--- a/apps/stage-web/locales/en.yml
+++ b/apps/stage-web/locales/en.yml
@@ -73,30 +73,42 @@ settings:
   models: Model
   pages:
     card:
-      activate: Activate
+      title: Airi Card
+      description: Use Airi character card presets
+      upload: Upload
+      upload_desc: Click or drag file to upload
+      drop_here: Drop to upload
+      delete: Delete
       active: Active
+      active_badge: Currently Active
+      activate: Activate
       cancel: Cancel
       card_not_found: Card not found
       character: Character
+      personality: Personality
+      scenario: Scenario
+      systemprompt: System Prompt
+      posthistoryinstructions: Post-History Instructions
+      modules: Modules
+      close: Close
+      search: Search cards...
+      sort_by: Sort by
+      name_asc: Name (A-Z)
+      name_desc: Name (Z-A)
+      recent: Recently Added
+      no_cards: No cards yet. Click the button above to upload one!
+      no_results: No matching cards found
+      try_different_search: Try a different search term
       consciousness:
         model: Consciousness / Model
       created_by: created by
       creator_notes: Creator Notes
-      delete: Delete
       delete_card: Delete Card
       delete_confirmation: Are you sure you want to delete this card?
-      description: Use Airi character card presets
       description_label: Description
-      modules: Modules
-      personality: Personality
-      posthistoryinstructions: Post-History Instructions
-      scenario: Scenario
       speech:
         model: Speech / Model
         voice: Speech / Voice
-      systemprompt: System Prompt
-      title: Airi Card
-      upload: Upload
     memory:
       description: Where memories got stored, and organized
       title: Memory
diff --git a/apps/stage-web/locales/zh-CN.yml b/apps/stage-web/locales/zh-CN.yml
index eae80c358..932aa2c52 100644
--- a/apps/stage-web/locales/zh-CN.yml
+++ b/apps/stage-web/locales/zh-CN.yml
@@ -60,8 +60,11 @@ settings:
       title: Airi 角色卡
       description: 使用 Airi 角色卡预设
       upload: 上传
+      upload_desc: 点击或拖拽文件到此处上传
+      drop_here: 放开以上传文件
       delete: 删除
       active: 已激活
+      active_badge: 当前使用中
       activate: 激活
       delete_card: 删除角色卡
       delete_confirmation: 确定要删除这张角色卡吗？
@@ -76,6 +79,15 @@ settings:
       posthistoryinstructions: 历史提示指令
       modules: 模块
       cancel: 取消
+      close: 关闭
+      search: 搜索角色卡...
+      sort_by: 排序方式
+      name_asc: 名称 (A-Z)
+      name_desc: 名称 (Z-A)
+      recent: 最近添加
+      no_cards: 还没有任何角色卡，点击上方按钮上传一个吧！
+      no_results: 没有找到匹配的角色卡
+      try_different_search: 尝试使用其他关键词搜索
       consciousness:
         model: 意识 / 模型
       speech:
diff --git a/apps/stage-web/src/pages/settings/airi-card/[id].vue b/apps/stage-web/src/pages/settings/airi-card/[id].vue
deleted file mode 100644
index 8d55bbe45..000000000
--- a/apps/stage-web/src/pages/settings/airi-card/[id].vue
+++ /dev/null
@@ -1,311 +0,0 @@
-<script setup lang="ts">
-import type { AiriCard } from '@proj-airi/stage-ui/stores'
-
-import { Button, Section } from '@proj-airi/stage-ui/components'
-import { useAiriCardStore } from '@proj-airi/stage-ui/stores'
-import { storeToRefs } from 'pinia'
-import {
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogRoot,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from 'radix-vue'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
-
-const router = useRouter()
-const route = useRoute('/settings/airi-card/[id]')
-const { t } = useI18n()
-
-const cardStore = useAiriCardStore()
-const { getCard, removeCard } = cardStore
-const { activeCardId } = storeToRefs(cardStore)
-
-const id = computed(() => route.params.id)
-
-// Get current card
-const card = computed<AiriCard | undefined>(() => getCard(id.value as string))
-
-// Get module settings
-const moduleSettings = computed(() => {
-  const airiExt = card.value?.extensions?.airi?.modules
-  return {
-    consciousness: airiExt?.consciousness?.model || '',
-    speech: airiExt?.speech?.model || '',
-    voice: airiExt?.speech?.voice_id || '',
-  }
-})
-
-// Get character settings
-const characterSettings = computed(() => {
-  if (!card.value)
-    return {}
-
-  return {
-    personality: card.value.personality,
-    scenario: card.value.scenario,
-    systemPrompt: card.value.systemPrompt,
-    postHistoryInstructions: card.value.postHistoryInstructions,
-  }
-})
-
-// Check if card is active
-const isActive = computed(() => id.value === activeCardId.value)
-
-// Activate card
-function activateCard() {
-  activeCardId.value = id.value as string
-}
-
-// Animation control for card activation
-const isActivating = ref(false)
-
-function handleActivate() {
-  isActivating.value = true
-  setTimeout(() => {
-    activateCard()
-    isActivating.value = false
-    activeCardId.value = 'default'
-  }, 300)
-}
-
-// Delete card confirmation
-const showDeleteConfirm = ref(false)
-
-function handleDeleteConfirm() {
-  if (card.value) {
-    removeCard(id.value as string)
-    activateCard()
-  }
-  showDeleteConfirm.value = false
-}
-
-function hightlightTagToHtml(text: string) {
-  return text?.replace(/\{\{(.*?)\}\}/g, '<span class="bg-primary-500/20 inline-block">{{ $1 }}</span>').trim()
-}
-</script>
-
-<template>
-  <div
-    v-motion
-    flex="~ row" items-center gap-2
-    :initial="{ opacity: 0, x: 10 }"
-    :enter="{ opacity: 1, x: 0 }"
-    :leave="{ opacity: 0, x: -10 }"
-    :duration="250"
-  >
-    <button @click="router.back()">
-      <div i-solar:alt-arrow-left-line-duotone text-2xl />
-    </button>
-    <h1 relative>
-      <div absolute left-0 top-0 translate-y="[-80%]">
-        <span text="neutral-300 dark:neutral-500" text-nowrap>{{ t('settings.title') }}</span>
-      </div>
-      <div text-nowrap text-3xl font-semibold>
-        {{ t('settings.pages.card.title') }}
-      </div>
-    </h1>
-  </div>
-
-  <div bg="neutral-50 dark:[rgba(0,0,0,0.3)]" rounded-xl p-4 flex="~ col gap-4">
-    <div
-      v-if="card"
-      bg="neutral-50 dark:[rgba(0,0,0,0.3)]"
-      rounded-xl p-5 flex="~ col gap-5"
-      border="~ neutral-200/50 dark:neutral-700/30"
-      shadow="sm dark:md"
-      transition="all duration-300"
-      class="backdrop-blur-sm"
-    >
-      <!-- Header -->
-      <div flex="~ col" gap-3>
-        <div flex="~ row" items-center justify-between>
-          <div>
-            <h1 text-2xl font-bold class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
-              {{ card.name }}
-            </h1>
-            <div mt-1 text-sm text-neutral-500 dark:text-neutral-400>
-              v{{ card.version }}
-              <template v-if="card.creator">
-                · {{ t('settings.pages.card.created_by') }} <span font-medium>{{ card.creator }}</span>
-              </template>
-            </div>
-          </div>
-
-          <!-- Action buttons -->
-          <div flex="~ row" gap-2>
-            <!-- Delete button -->
-            <AlertDialogRoot v-if="id !== 'default'" v-model:open="showDeleteConfirm">
-              <AlertDialogTrigger as-child>
-                <Button
-                  variant="danger"
-                  :label="t('settings.pages.card.delete')"
-                />
-              </AlertDialogTrigger>
-              <AlertDialogPortal>
-                <AlertDialogOverlay class="fixed inset-0 z-50 bg-black/50" />
-                <AlertDialogContent
-                  class="fixed left-1/2 top-1/2 z-50 max-w-md w-full border border-neutral-200 rounded-xl bg-white p-6 shadow-xl -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800"
-                >
-                  <AlertDialogTitle class="mb-4 text-xl font-bold">
-                    {{ t('settings.pages.card.delete_card') }}
-                  </AlertDialogTitle>
-                  <AlertDialogDescription class="mb-6">
-                    {{ t('settings.pages.card.delete_confirmation') }} <b>"{{ card.name }}"</b>
-                  </AlertDialogDescription>
-
-                  <div class="flex flex-row justify-end gap-3">
-                    <AlertDialogCancel as-child>
-                      <Button
-                        variant="secondary"
-                        :label="t('settings.pages.card.cancel')"
-                        @click="() => showDeleteConfirm = false"
-                      />
-                    </AlertDialogCancel>
-                    <AlertDialogAction as-child>
-                      <Button
-                        variant="danger"
-                        :label="t('settings.pages.card.delete')"
-                        @click="handleDeleteConfirm"
-                      />
-                    </AlertDialogAction>
-                  </div>
-                </AlertDialogContent>
-              </AlertDialogPortal>
-            </AlertDialogRoot>
-
-            <!-- Activation button -->
-            <Button
-              variant="primary"
-              :label="isActive ? t('settings.pages.card.active') : t('settings.pages.card.activate')"
-              :disabled="isActive"
-              :class="{ 'animate-pulse': isActivating }"
-              @click="handleActivate"
-            />
-          </div>
-        </div>
-
-        <!-- Creator notes -->
-        <Section v-if="card.notes" :title="t('settings.pages.card.creator_notes')" icon="i-solar:notes-linear">
-          <div
-            bg="white/60 dark:black/30"
-            border="~ neutral-200/50 dark:neutral-700/30"
-            max-h-80 overflow-auto whitespace-pre-line rounded-lg p-4 text-neutral-700 dark:text-neutral-300 transition="all duration-200"
-            hover="bg-white/80 dark:bg-black/40"
-            v-html="hightlightTagToHtml(card.notes)"
-          />
-        </Section>
-
-        <!-- Description section -->
-        <Section v-if="card.description" :title="t('settings.pages.card.description_label')" icon="i-solar:document-text-linear">
-          <div
-            bg="white/60 dark:black/30"
-            max-h-80 overflow-auto whitespace-pre-line rounded-lg p-4
-            text="neutral-600 dark:neutral-300"
-            border="~ neutral-200/50 dark:neutral-700/30"
-            v-html="hightlightTagToHtml(card.description)"
-          />
-        </Section>
-
-        <!-- Character -->
-        <template v-if="Object.values(characterSettings).some(value => !!value)">
-          <Section :title="t('settings.pages.card.character')" icon="i-solar:user-rounded-linear">
-            <div flex="~ col" gap-4>
-              <template v-for="(value, key) in characterSettings" :key="key">
-                <div v-if="value" flex="~ col" gap-2>
-                  <h2 text-lg text-neutral-500 font-medium dark:text-neutral-400>
-                    {{ t(`settings.pages.card.${key.toLowerCase()}`) }}
-                  </h2>
-                  <div
-                    bg="white/60 dark:black/30"
-                    border="~ neutral-200/50 dark:neutral-700/30"
-                    transition="all duration-200"
-                    hover="bg-white/80 dark:bg-black/40"
-                    max-h-80 overflow-auto whitespace-pre-line rounded-lg p-3 text-neutral-700 dark:text-neutral-300
-                    v-html="hightlightTagToHtml(value)"
-                  />
-                </div>
-              </template>
-            </div>
-          </Section>
-        </template>
-
-        <!-- Modules -->
-        <Section :title="t('settings.pages.card.modules')" icon="i-solar:tuning-square-linear">
-          <div grid="~ cols-1 sm:cols-3" gap-4>
-            <div
-              flex="~ col"
-              bg="white/60 dark:black/30"
-              gap-1 rounded-lg p-3
-              border="~ neutral-200/50 dark:neutral-700/30"
-              transition="all duration-200"
-              hover="bg-white/80 dark:bg-black/40"
-            >
-              <span flex="~ row" items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400>
-                <div i-lucide:ghost />
-                {{ t('settings.pages.card.consciousness.model') }}
-              </span>
-              <div truncate font-medium>
-                {{ moduleSettings.consciousness ?? 'default' }}
-              </div>
-            </div>
-
-            <div
-              flex="~ col"
-              bg="white/60 dark:black/30"
-              gap-2 rounded-lg p-3
-              border="~ neutral-200/50 dark:neutral-700/30"
-              transition="all duration-200"
-              hover="bg-white/80 dark:bg-black/40"
-            >
-              <span flex="~ row" items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400>
-                <div i-lucide:mic />
-                {{ t('settings.pages.card.speech.model') }}
-              </span>
-              <div truncate font-medium>
-                {{ moduleSettings.speech ?? 'default' }}
-              </div>
-            </div>
-
-            <div
-              flex="~ col"
-              bg="white/60 dark:black/30"
-              gap-2 rounded-lg p-3
-              border="~ neutral-200/50 dark:neutral-700/30"
-              transition="all duration-200"
-              hover="bg-white/80 dark:bg-black/40"
-            >
-              <span flex="~ row" items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400>
-                <div i-lucide:music />
-                {{ t('settings.pages.card.speech.voice') }}
-              </span>
-              <div truncate font-medium>
-                {{ moduleSettings.voice ?? 'default' }}
-              </div>
-            </div>
-          </div>
-        </Section>
-      </div>
-    </div>
-    <div
-      v-else
-      bg="neutral-50/50 dark:neutral-900/50"
-      rounded-xl p-8 text-center
-      border="~ neutral-200/50 dark:neutral-700/30"
-      shadow="sm"
-    >
-      <div i-solar:card-search-broken mx-auto mb-3 text-6xl text-neutral-400 />
-      {{ t('settings.pages.card.card_not_found') }}
-    </div>
-  </div>
-
-  <div text="neutral-200/50 dark:neutral-600/20" pointer-events-none fixed bottom-0 right-0 z--1 translate-x-10 translate-y-10>
-    <div text="40" i-lucide:id-card />
-  </div>
-</template>
diff --git a/apps/stage-web/src/pages/settings/airi-card/components/CardDetailDialog.vue b/apps/stage-web/src/pages/settings/airi-card/components/CardDetailDialog.vue
new file mode 100644
index 000000000..36da728e6
--- /dev/null
+++ b/apps/stage-web/src/pages/settings/airi-card/components/CardDetailDialog.vue
@@ -0,0 +1,352 @@
+<script setup lang="ts">
+import type { AiriCard } from '@proj-airi/stage-ui/stores'
+
+import { Button } from '@proj-airi/stage-ui/components'
+import { useAiriCardStore } from '@proj-airi/stage-ui/stores'
+import { storeToRefs } from 'pinia'
+import {
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+} from 'radix-vue'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import DeleteCardDialog from './DeleteCardDialog.vue'
+
+interface Props {
+  modelValue: boolean
+  cardId: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const { t } = useI18n()
+const cardStore = useAiriCardStore()
+const { removeCard } = cardStore
+const { activeCardId } = storeToRefs(cardStore)
+
+// Get selected card data
+const selectedCard = computed<AiriCard | undefined>(() => {
+  if (!props.cardId)
+    return undefined
+  return cardStore.getCard(props.cardId)
+})
+
+// Get module settings
+const moduleSettings = computed(() => {
+  if (!selectedCard.value || !selectedCard.value.extensions?.airi?.modules) {
+    return {
+      consciousness: '',
+      speech: '',
+      voice: '',
+    }
+  }
+
+  const airiExt = selectedCard.value.extensions.airi.modules
+  return {
+    consciousness: airiExt.consciousness?.model || '',
+    speech: airiExt.speech?.model || '',
+    voice: airiExt.speech?.voice_id || '',
+  }
+})
+
+// Get character settings
+const characterSettings = computed(() => {
+  if (!selectedCard.value)
+    return {}
+
+  return {
+    personality: selectedCard.value.personality,
+    scenario: selectedCard.value.scenario,
+    systemPrompt: selectedCard.value.systemPrompt,
+    postHistoryInstructions: selectedCard.value.postHistoryInstructions,
+  }
+})
+
+// Check if card is active
+const isActive = computed(() => props.cardId === activeCardId.value)
+
+// Animation control for card activation
+const isActivating = ref(false)
+
+function handleActivate() {
+  isActivating.value = true
+  setTimeout(() => {
+    activeCardId.value = props.cardId
+    isActivating.value = false
+  }, 300)
+}
+
+function hightlightTagToHtml(text: string) {
+  return text?.replace(/\{\{(.*?)\}\}/g, '<span class="bg-primary-500/20 inline-block">{{ $1 }}</span>').trim()
+}
+
+// Delete confirmation
+const showDeleteConfirm = ref(false)
+
+function handleDeleteConfirm() {
+  if (selectedCard.value) {
+    removeCard(props.cardId)
+    emit('update:modelValue', false)
+  }
+  showDeleteConfirm.value = false
+}
+
+// Tab type definition
+interface Tab {
+  id: string
+  label: string
+  icon: string
+}
+
+// Active tab ID state
+const activeTabId = ref('')
+
+// Tabs for card details
+const tabs = computed<Tab[]>(() => {
+  const availableTabs: Tab[] = []
+
+  // Description tab - always show if there's description
+  if (selectedCard.value?.description) {
+    availableTabs.push({
+      id: 'description',
+      label: t('settings.pages.card.description_label'),
+      icon: 'i-solar:document-text-linear',
+    })
+  }
+
+  // Notes tab - only show if there are creator notes
+  if (selectedCard.value?.notes) {
+    availableTabs.push({
+      id: 'notes',
+      label: t('settings.pages.card.creator_notes'),
+      icon: 'i-solar:notes-linear',
+    })
+  }
+
+  // Character tab - only show if there are character settings
+  if (Object.values(characterSettings.value).some(value => !!value)) {
+    availableTabs.push({
+      id: 'character',
+      label: t('settings.pages.card.character'),
+      icon: 'i-solar:user-rounded-linear',
+    })
+  }
+
+  // Modules tab - always show
+  availableTabs.push({
+    id: 'modules',
+    label: t('settings.pages.card.modules'),
+    icon: 'i-solar:tuning-square-linear',
+  })
+
+  return availableTabs
+})
+
+// Active tab state - set to first available tab by default
+const activeTab = computed({
+  get: () => {
+    // If current active tab is not in available tabs, reset to first tab
+    if (!tabs.value.find(tab => tab.id === activeTabId.value))
+      return tabs.value[0]?.id || ''
+    return activeTabId.value
+  },
+  set: (value: string) => {
+    activeTabId.value = value
+  },
+})
+</script>
+
+<template>
+  <DialogRoot :open="modelValue" @update:open="emit('update:modelValue', $event)">
+    <DialogPortal>
+      <DialogOverlay class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut fixed inset-0 z-50 bg-black/50 backdrop-blur-sm" />
+      <DialogContent class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-50 m-0 max-h-[90vh] max-w-6xl w-[92vw] flex flex-col overflow-auto border border-neutral-200 rounded-xl bg-white p-5 shadow-xl 2xl:w-[60vw] lg:w-[80vw] md:w-[85vw] xl:w-[70vw] -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800 sm:p-6">
+        <div v-if="selectedCard" class="w-full flex flex-col gap-5">
+          <!-- Header with status indicator -->
+          <div flex="~ col" gap-3>
+            <div flex="~ row" items-center justify-between>
+              <div>
+                <div flex="~ row" items-center gap-2>
+                  <DialogTitle text-2xl font-bold class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
+                    {{ selectedCard.name }}
+                  </DialogTitle>
+                  <div v-if="isActive" class="bg-primary-100 text-primary-600 dark:bg-primary-900/40 dark:text-primary-400 flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium">
+                    <div i-solar:check-circle-bold-duotone text-xs />
+                    {{ t('settings.pages.card.active_badge') }}
+                  </div>
+                </div>
+                <div mt-1 text-sm text-neutral-500 dark:text-neutral-400>
+                  v{{ selectedCard.version }}
+                  <template v-if="selectedCard.creator">
+                    · {{ t('settings.pages.card.created_by') }} <span font-medium>{{ selectedCard.creator }}</span>
+                  </template>
+                </div>
+              </div>
+
+              <!-- Action buttons -->
+              <div flex="~ row" gap-2>
+                <!-- Activation button -->
+                <Button
+                  variant="primary"
+                  :icon="isActive ? 'i-solar:check-circle-bold-duotone' : 'i-solar:play-circle-broken'"
+                  :label="isActive ? t('settings.pages.card.active') : t('settings.pages.card.activate')"
+                  :disabled="isActive"
+                  :class="{ 'animate-pulse': isActivating }"
+                  @click="handleActivate"
+                />
+              </div>
+            </div>
+
+            <!-- Card content tabs -->
+            <div class="mt-4">
+              <div class="border-b border-neutral-200 dark:border-neutral-700">
+                <div class="flex justify-center -mb-px sm:justify-start space-x-1">
+                  <button
+                    v-for="tab in tabs"
+                    :key="tab.id"
+                    class="px-4 py-2 text-sm font-medium"
+                    :class="[
+                      activeTab === tab.id
+                        ? 'text-primary-600 dark:text-primary-400 border-b-2 border-primary-500 dark:border-primary-400'
+                        : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300',
+                    ]"
+                    @click="activeTab = tab.id"
+                  >
+                    <div class="flex items-center gap-1">
+                      <div :class="tab.icon" />
+                      {{ tab.label }}
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <!-- Creator notes -->
+            <div v-if="activeTab === 'notes' && selectedCard.notes">
+              <div
+                bg="white/60 dark:black/30"
+                border="~ neutral-200/50 dark:neutral-700/30"
+                max-h-60 overflow-auto whitespace-pre-line rounded-lg p-4 text-neutral-700 sm:max-h-80 dark:text-neutral-300 transition="all duration-200"
+                hover="bg-white/80 dark:bg-black/40"
+                v-html="hightlightTagToHtml(selectedCard.notes)"
+              />
+            </div>
+
+            <!-- Description section -->
+            <div v-if="activeTab === 'description' && selectedCard.description">
+              <div
+                bg="white/60 dark:black/30"
+                max-h-60 overflow-auto whitespace-pre-line rounded-lg p-4 sm:max-h-80
+                text="neutral-600 dark:neutral-300"
+                border="~ neutral-200/50 dark:neutral-700/30"
+                v-html="hightlightTagToHtml(selectedCard.description)"
+              />
+            </div>
+
+            <!-- Character -->
+            <div v-if="activeTab === 'character' && Object.values(characterSettings).some(value => !!value)">
+              <div flex="~ col" max-h-60 gap-4 overflow-auto pr-1 sm:max-h-80>
+                <template v-for="(value, key) in characterSettings" :key="key">
+                  <div v-if="value" flex="~ col" gap-2>
+                    <h2 text-lg text-neutral-500 font-medium dark:text-neutral-400>
+                      {{ t(`settings.pages.card.${key.toLowerCase()}`) }}
+                    </h2>
+                    <div
+                      bg="white/60 dark:black/30"
+                      border="~ neutral-200/50 dark:neutral-700/30"
+                      transition="all duration-200"
+                      hover="bg-white/80 dark:bg-black/40"
+                      max-h-none overflow-auto whitespace-pre-line rounded-lg p-3 text-neutral-700 dark:text-neutral-300
+                      v-html="hightlightTagToHtml(value)"
+                    />
+                  </div>
+                </template>
+              </div>
+            </div>
+
+            <!-- Modules -->
+            <div v-if="activeTab === 'modules'">
+              <div grid="~ cols-1 sm:cols-3" gap-4>
+                <div
+                  flex="~ col"
+                  bg="white/60 dark:black/30"
+                  gap-1 rounded-lg p-3
+                  border="~ neutral-200/50 dark:neutral-700/30"
+                  transition="all duration-200"
+                  hover="bg-white/80 dark:bg-black/40"
+                >
+                  <span flex="~ row" items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400>
+                    <div i-lucide:ghost />
+                    {{ t('settings.pages.card.consciousness.model') }}
+                  </span>
+                  <div truncate font-medium>
+                    {{ moduleSettings.consciousness ?? 'default' }}
+                  </div>
+                </div>
+
+                <div
+                  flex="~ col"
+                  bg="white/60 dark:black/30"
+                  gap-2 rounded-lg p-3
+                  border="~ neutral-200/50 dark:neutral-700/30"
+                  transition="all duration-200"
+                  hover="bg-white/80 dark:bg-black/40"
+                >
+                  <span flex="~ row" items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400>
+                    <div i-lucide:mic />
+                    {{ t('settings.pages.card.speech.model') }}
+                  </span>
+                  <div truncate font-medium>
+                    {{ moduleSettings.speech ?? 'default' }}
+                  </div>
+                </div>
+
+                <div
+                  flex="~ col"
+                  bg="white/60 dark:black/30"
+                  gap-2 rounded-lg p-3
+                  border="~ neutral-200/50 dark:neutral-700/30"
+                  transition="all duration-200"
+                  hover="bg-white/80 dark:bg-black/40"
+                >
+                  <span flex="~ row" items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400>
+                    <div i-lucide:music />
+                    {{ t('settings.pages.card.speech.voice') }}
+                  </span>
+                  <div truncate font-medium>
+                    {{ moduleSettings.voice ?? 'default' }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          v-else
+          bg="neutral-50/50 dark:neutral-900/50"
+          rounded-xl p-8 text-center
+          border="~ neutral-200/50 dark:neutral-700/30"
+          shadow="sm"
+        >
+          <div i-solar:card-search-broken mx-auto mb-3 text-6xl text-neutral-400 />
+          {{ t('settings.pages.card.card_not_found') }}
+        </div>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+
+  <!-- Delete confirmation dialog -->
+  <DeleteCardDialog
+    v-model="showDeleteConfirm"
+    :card-name="selectedCard?.name"
+    @confirm="handleDeleteConfirm"
+    @cancel="showDeleteConfirm = false"
+  />
+</template>
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
new file mode 100644
index 000000000..5f1981e30
--- /dev/null
+++ b/apps/stage-web/src/pages/settings/airi-card/components/CardListItem.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+interface Props {
+  id: string
+  name: string
+  description?: string
+  isActive: boolean
+  isSelected: boolean
+  version: string
+  consciousnessModel: string
+  voiceModel: string
+}
+
+defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'select'): void
+  (e: 'activate'): void
+  (e: 'delete'): void
+}>()
+</script>
+
+<template>
+  <div
+    relative min-h-120px flex="~ col" cursor-pointer overflow-hidden rounded-xl
+    :class="[
+      isSelected
+        ? 'border-2 border-primary-400 dark:border-primary-600'
+        : 'border-2 border-neutral-100 dark:border-neutral-800/25',
+    ]"
+    bg="neutral-200/50 dark:neutral-800/50"
+    drop-shadow="none hover:[0px_4px_4px_rgba(220,220,220,0.4)] active:[0px_0px_0px_rgba(220,220,220,0.25)] dark:hover:none"
+    transition="all ease-in-out duration-400"
+    before="content-empty absolute inset-0 z-0 w-25% h-full transition-all duration-400 ease-in-out bg-gradient-to-r from-primary-500/0 to-primary-500/0 dark:from-primary-400/0 dark:to-primary-400/0 mask-image-[linear-gradient(120deg,white_100%)] opacity-0"
+    hover="before:(w-50% opacity-100 bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent)"
+    @click="emit('select')"
+  >
+    <!-- Card content -->
+    <div
+      relative flex="~ col 1" justify-between gap-3 overflow-hidden rounded-lg bg="white dark:neutral-900" p-5
+      transition="all ease-in-out duration-400"
+      after="content-empty absolute inset-0 z--2 w-full h-full bg-dotted-[neutral-200/80] bg-size-10px mask-image-[linear-gradient(165deg,white_30%,transparent_50%)] transition-all duration-400 ease-in-out"
+      hover="after:bg-dotted-[primary-300/50] dark:after:bg-dotted-[primary-200/20]"
+    >
+      <!-- Card header (name and badge) -->
+      <div z-1 flex items-start justify-between gap-2>
+        <h3 flex-1 truncate text-lg font-bold hover="text-primary-600 dark:text-primary-300">
+          {{ 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">
+          <div i-solar:check-circle-bold-duotone text-sm />
+        </div>
+      </div>
+
+      <!-- Card description -->
+      <p v-if="description" line-clamp-3 min-h-40px flex-1 text-sm text="neutral-500 dark:neutral-400" hover="text-primary-600/80 dark:text-primary-300/80">
+        {{ description }}
+      </p>
+
+      <!-- Card stats -->
+      <div z-1 flex items-center justify-between text-xs text="neutral-500 dark:neutral-400">
+        <div>v{{ version }}</div>
+        <div flex items-center gap-1.5>
+          <div flex items-center gap-0.5>
+            <div i-lucide:ghost text-xs />
+            <span>{{ consciousnessModel }}</span>
+          </div>
+          <div flex items-center gap-0.5>
+            <div i-lucide:mic text-xs />
+            <span>{{ voiceModel }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Card actions -->
+    <div flex items-center justify-end px-2 py-1.5>
+      <button
+        rounded-lg p-1.5 transition-colors hover="bg-neutral-200 dark:bg-neutral-700/50"
+        :disabled="isActive"
+        @click.stop="emit('activate')"
+      >
+        <div
+          :class="[
+            isActive
+              ? 'i-solar:check-circle-bold-duotone text-primary-500 dark:text-primary-400'
+              : 'i-solar:play-circle-broken text-neutral-500 dark:text-neutral-400',
+          ]"
+        />
+      </button>
+
+      <button
+        v-if="id !== 'default'"
+        rounded-lg p-1.5 transition-colors hover="bg-neutral-200 dark:bg-neutral-700/50"
+        @click.stop="emit('delete')"
+      >
+        <div i-solar:trash-bin-trash-linear text="neutral-500 dark:neutral-400" />
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/apps/stage-web/src/pages/settings/airi-card/components/DeleteCardDialog.vue b/apps/stage-web/src/pages/settings/airi-card/components/DeleteCardDialog.vue
new file mode 100644
index 000000000..f2276f74e
--- /dev/null
+++ b/apps/stage-web/src/pages/settings/airi-card/components/DeleteCardDialog.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { Button } from '@proj-airi/stage-ui/components/Button'
+import {
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogRoot,
+  AlertDialogTitle,
+} from 'radix-vue'
+import { useI18n } from 'vue-i18n'
+
+interface Props {
+  modelValue: boolean
+  cardName?: string
+}
+
+defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'confirm'): void
+  (e: 'cancel'): void
+}>()
+
+const { t } = useI18n()
+
+function handleCancel() {
+  emit('update:modelValue', false)
+  emit('cancel')
+}
+
+function handleConfirm() {
+  emit('update:modelValue', false)
+  emit('confirm')
+}
+</script>
+
+<template>
+  <AlertDialogRoot :open="modelValue" @update:open="emit('update:modelValue', $event)">
+    <AlertDialogPortal>
+      <AlertDialogOverlay class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut fixed inset-0 z-50 bg-black/50" />
+      <AlertDialogContent
+        class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-50 max-w-md w-full border border-neutral-200 rounded-xl bg-white p-6 shadow-xl -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800"
+      >
+        <AlertDialogTitle class="mb-4 text-xl font-bold">
+          {{ t('settings.pages.card.delete_card') }}
+        </AlertDialogTitle>
+        <AlertDialogDescription class="mb-6">
+          {{ t('settings.pages.card.delete_confirmation') }} <b>"{{ cardName || '' }}"</b>
+        </AlertDialogDescription>
+
+        <div class="flex flex-row justify-end gap-3">
+          <AlertDialogCancel as-child>
+            <Button
+              variant="secondary"
+              :label="t('settings.pages.card.cancel')"
+              @click="handleCancel"
+            />
+          </AlertDialogCancel>
+          <AlertDialogAction as-child>
+            <Button
+              variant="danger"
+              :label="t('settings.pages.card.delete')"
+              @click="handleConfirm"
+            />
+          </AlertDialogAction>
+        </div>
+      </AlertDialogContent>
+    </AlertDialogPortal>
+  </AlertDialogRoot>
+</template>
diff --git a/apps/stage-web/src/pages/settings/airi-card/index.vue b/apps/stage-web/src/pages/settings/airi-card/index.vue
index 8f0e6390b..b97064d54 100644
--- a/apps/stage-web/src/pages/settings/airi-card/index.vue
+++ b/apps/stage-web/src/pages/settings/airi-card/index.vue
@@ -1,25 +1,38 @@
 <script setup lang="ts">
 import type { ccv3 } from '@proj-airi/ccc'
 
-import { Button } from '@proj-airi/stage-ui/components/Button'
-import { RadioCardDetailManySelect } from '@proj-airi/stage-ui/components/Form'
 import { useAiriCardStore } from '@proj-airi/stage-ui/stores'
 import { storeToRefs } from 'pinia'
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
+import CardDetailDialog from './components/CardDetailDialog.vue'
+import CardListItem from './components/CardListItem.vue'
+import DeleteCardDialog from './components/DeleteCardDialog.vue'
+
 const router = useRouter()
 const { t } = useI18n()
 const cardStore = useAiriCardStore()
-const { addCard } = cardStore
+const { addCard, removeCard } = cardStore
 const { cards, activeCardId } = storeToRefs(cardStore)
 
 // Currently selected card ID (different from active card ID)
-const selectedCardId = ref<string>(activeCardId.value || '')
+const selectedCardId = ref<string>('')
+// Dialog state
+const isCardDialogOpen = ref(false)
+
+// Search query
+const searchQuery = ref('')
+
+// Sort option
+const sortOption = ref('nameAsc')
+
+// Drag and drop
+const isDragging = ref(false)
 
 // Card list data structure
-interface CardListItem {
+interface CardItem {
   id: string
   name: string
   description?: string
@@ -28,7 +41,7 @@ interface CardListItem {
 }
 
 // Transform cards Map to array for display
-const cardsArray = computed<CardListItem[]>(() =>
+const cardsArray = computed<CardItem[]>(() =>
   Array.from(cards.value.entries()).map(([id, card]) => ({
     id,
     name: card.name,
@@ -36,6 +49,51 @@ const cardsArray = computed<CardListItem[]>(() =>
   })),
 )
 
+// Filtered cards based on search query
+const filteredCards = computed<CardItem[]>(() => {
+  if (!searchQuery.value)
+    return cardsArray.value
+
+  const query = searchQuery.value.toLowerCase()
+  return cardsArray.value.filter(item =>
+    item.name.toLowerCase().includes(query)
+    || (item.description && item.description.toLowerCase().includes(query)),
+  )
+})
+
+// Sorted filtered cards based on sort option
+const sortedFilteredCards = computed<CardItem[]>(() => {
+  // Create a new array to avoid mutating the source
+  const sorted = [...filteredCards.value]
+
+  if (sortOption.value === 'nameAsc')
+    return sorted.sort((a, b) => a.name.localeCompare(b.name))
+  else if (sortOption.value === 'nameDesc')
+    return sorted.sort((a, b) => b.name.localeCompare(a.name))
+  else if (sortOption.value === 'recent')
+    return sorted.sort((a, b) => b.id.localeCompare(a.id))
+  else
+    return sorted
+})
+
+// Delete confirmation
+const showDeleteConfirm = ref(false)
+const cardToDelete = ref<string | null>(null)
+
+function handleDeleteConfirm() {
+  if (cardToDelete.value) {
+    removeCard(cardToDelete.value)
+    cardToDelete.value = null
+    showDeleteConfirm.value = false
+  }
+}
+
+// Card deletion confirmation
+function confirmDelete(id: string) {
+  cardToDelete.value = id
+  showDeleteConfirm.value = true
+}
+
 /**
  * Handles card file upload and processing
  */
@@ -55,6 +113,7 @@ async function handleUpload() {
 
       // Add card and select it
       selectedCardId.value = addCard(cardJSON)
+      isCardDialogOpen.value = true
     }
     catch (error) {
       console.error('Error processing card file:', error)
@@ -64,10 +123,39 @@ async function handleUpload() {
   fileInput.click()
 }
 
-watch(selectedCardId, (cardId) => {
-  if (cardId)
-    router.push(`/settings/airi-card/${cardId}`)
-})
+function handleSelectCard(cardId: string) {
+  selectedCardId.value = cardId
+  isCardDialogOpen.value = true
+}
+
+// Card activation
+function activateCard(id: string) {
+  activeCardId.value = id
+}
+
+// Card version number
+function getVersionNumber(id: string) {
+  const card = cards.value.get(id)
+  return card?.version || '1.0.0'
+}
+
+// Card module short name
+function getModuleShortName(id: string, module: 'consciousness' | 'voice') {
+  const card = cards.value.get(id)
+  if (!card || !card.extensions?.airi?.modules)
+    return 'default'
+
+  const airiExt = card.extensions.airi.modules
+
+  if (module === 'consciousness') {
+    return airiExt.consciousness?.model ? airiExt.consciousness.model.split('-').pop() || 'default' : 'default'
+  }
+  else if (module === 'voice') {
+    return airiExt.speech?.voice_id || 'default'
+  }
+
+  return 'default'
+}
 </script>
 
 <template>
@@ -92,32 +180,145 @@ watch(selectedCardId, (cardId) => {
     </h1>
   </div>
 
-  <div bg="neutral-50 dark:[rgba(0,0,0,0.3)]" rounded-xl p-4 flex="~ col gap-4">
-    <!-- Toolbar -->
-    <div flex="~ col" gap-6>
-      <div flex="~ row gap-2 flex-wrap">
-        <!-- Upload button -->
-        <Button
-          variant="primary"
-          icon="i-solar:upload-line-duotone"
-          :label="t('settings.pages.card.upload')"
-          @click="handleUpload"
-        />
+  <div rounded-xl p-4 flex="~ col gap-4">
+    <!-- Toolbar with search and filters -->
+    <div flex="~ row" flex-wrap items-center justify-between gap-4>
+      <!-- Search bar -->
+      <div class="relative min-w-[200px] flex-1" inline-flex="~" w-full items-center>
+        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+          <div i-solar:magnifer-line-duotone class="text-neutral-500 dark:text-neutral-400" />
+        </div>
+        <input
+          v-model="searchQuery"
+          type="search"
+          class="w-full rounded-xl p-2.5 pl-10 text-sm outline-none"
+          border="focus:primary-100 dark:focus:primary-400/50 2 solid neutral-200 dark:neutral-800"
+          transition="all duration-200 ease-in-out"
+          bg="white dark:neutral-900"
+          :placeholder="t('settings.pages.card.search')"
+        >
       </div>
 
-      <!-- Card selection -->
+      <!-- Sort options -->
+      <div class="flex items-center gap-2">
+        <div text-sm text-neutral-500 dark:text-neutral-400>
+          {{ t('settings.pages.card.sort_by') }}:
+        </div>
+        <select
+          v-model="sortOption"
+          class="rounded-lg p-1.5 text-sm outline-none"
+          border="focus:primary-100 dark:focus:primary-400/50 2 solid neutral-200 dark:neutral-800"
+          bg="white dark:neutral-900"
+        >
+          <option value="nameAsc">
+            {{ t('settings.pages.card.name_asc') }}
+          </option>
+          <option value="nameDesc">
+            {{ t('settings.pages.card.name_desc') }}
+          </option>
+          <option value="recent">
+            {{ t('settings.pages.card.recent') }}
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <!-- Masonry card layout -->
+    <div
+      class="mt-4"
+      :class="{ 'grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4 grid-auto-rows-[minmax(min-content,max-content)] grid-auto-flow-dense sm:grid-cols-[repeat(auto-fill,minmax(240px,1fr))] sm:gap-5 md:grid-cols-[repeat(auto-fill,minmax(220px,1fr))] lg:grid-cols-[repeat(auto-fill,minmax(250px,1fr))]': cards.size > 0 }"
+    >
+      <!-- Upload card -->
+      <div
+        class="relative min-h-[120px] flex flex-col cursor-pointer items-center justify-center border-2 rounded-xl border-dashed p-6 transition-all duration-300"
+        border="neutral-200 dark:neutral-700 hover:primary-300 dark:hover:primary-700"
+        bg="white/60 dark:black/30 hover:white/80 dark:hover:black/40"
+        :style="{ transform: 'scale(0.98)', opacity: 0.95 }"
+        hover="scale-100 opacity-100 shadow-md dark:shadow-xl"
+        @click="handleUpload"
+      >
+        <div i-solar:upload-square-line-duotone mb-4 text-5xl text="neutral-400 dark:neutral-500" />
+        <p font-medium text="center neutral-600 dark:neutral-300">
+          {{ t('settings.pages.card.upload') }}
+        </p>
+        <p text="center neutral-500 dark:neutral-400" mt-2 text-sm>
+          {{ t('settings.pages.card.upload_desc') }}
+        </p>
+
+        <!-- Drag overlay -->
+        <div
+          v-if="isDragging"
+          class="bg-primary-100/80 border-primary-400 dark:bg-primary-900/80 dark:border-primary-600 absolute inset-0 flex items-center justify-center border-2 rounded-xl"
+        >
+          <div class="text-center">
+            <div i-solar:upload-minimalistic-bold class="dark:text-primary-400 text-primary-500 mb-2 text-5xl" />
+            <p font-medium text="primary-600 dark:primary-300">
+              {{ t('settings.pages.card.drop_here') }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Card Items -->
       <template v-if="cards.size > 0">
-        <RadioCardDetailManySelect
-          v-model="selectedCardId"
-          :items="cardsArray"
-          :expand-button-text="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.expand')"
-          :collapse-button-text="t('settings.pages.modules.consciousness.sections.section.provider-model-selection.collapse')"
-          :show-more="false"
+        <CardListItem
+          v-for="item in sortedFilteredCards"
+          :id="item.id"
+          :key="item.id"
+          :name="item.name"
+          :description="item.description"
+          :is-active="item.id === activeCardId"
+          :is-selected="item.id === selectedCardId && isCardDialogOpen"
+          :version="getVersionNumber(item.id)"
+          :consciousness-model="getModuleShortName(item.id, 'consciousness')"
+          :voice-model="getModuleShortName(item.id, 'voice')"
+          @select="handleSelectCard(item.id)"
+          @activate="activateCard(item.id)"
+          @delete="confirmDelete(item.id)"
         />
       </template>
+
+      <!-- No cards message -->
+      <div
+        v-if="cards.size === 0"
+        class="col-span-full rounded-xl p-8 text-center"
+        border="~ neutral-200/50 dark:neutral-700/30"
+        bg="neutral-50/50 dark:neutral-900/50"
+      >
+        <div i-solar:card-search-broken mx-auto mb-3 text-6xl text-neutral-400 />
+        <p>{{ t('settings.pages.card.no_cards') }}</p>
+      </div>
+
+      <!-- No search results -->
+      <div
+        v-if="searchQuery && sortedFilteredCards.length === 0"
+        class="col-span-full flex items-center gap-3 border-2 border-amber-200 rounded-xl bg-amber-50/80 p-4 dark:border-amber-800 dark:bg-amber-900/30"
+      >
+        <div i-solar:info-circle-line-duotone class="text-2xl text-amber-500 dark:text-amber-400" />
+        <div class="flex flex-col">
+          <span class="font-medium">{{ t('settings.pages.card.no_results') }}</span>
+          <span class="text-sm text-amber-600 dark:text-amber-400">
+            {{ t('settings.pages.card.try_different_search') }}
+          </span>
+        </div>
+      </div>
     </div>
   </div>
 
+  <!-- Delete confirmation dialog -->
+  <DeleteCardDialog
+    v-model="showDeleteConfirm"
+    :card-name="cardToDelete ? cardStore.getCard(cardToDelete)?.name : ''"
+    @confirm="handleDeleteConfirm"
+    @cancel="cardToDelete = null"
+  />
+
+  <!-- Card detail dialog -->
+  <CardDetailDialog
+    v-model="isCardDialogOpen"
+    :card-id="selectedCardId"
+  />
+
   <!-- Background decoration -->
   <div text="neutral-200/50 dark:neutral-600/20" pointer-events-none fixed bottom-0 right-0 z--1 translate-x-10 translate-y-10>
     <div text="40" i-lucide:id-card />