diff --git a/apps/web/src/components/context-window-badge/index.vue b/apps/web/src/components/context-window-badge/index.vue
new file mode 100644
index 00000000..b3c94886
--- /dev/null
+++ b/apps/web/src/components/context-window-badge/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <span
+    v-if="contextWindow"
+    class="inline-flex items-center gap-1 rounded-md border-0 px-2 py-0.5 text-xs font-medium shrink-0"
+    :class="badgeClass"
+  >
+    {{ formatted }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  contextWindow: number | undefined
+}>()
+
+const formatted = computed(() => {
+  const ctx = props.contextWindow
+  if (!ctx) return ''
+  if (ctx >= 1_000_000) return `${Math.round(ctx / 1_000_000)}M`
+  if (ctx >= 1000) return `${Math.round(ctx / 1000)}k`
+  return String(ctx)
+})
+
+const badgeClass = computed(() => {
+  const ctx = props.contextWindow ?? 0
+  if (ctx >= 1_000_000) return 'bg-violet-50 text-violet-700 dark:bg-violet-950 dark:text-violet-300'
+  if (ctx >= 100_000) return 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300'
+  if (ctx >= 32_000) return 'bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300'
+  if (ctx >= 8_000) return 'bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-300'
+  return 'bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400'
+})
+</script>
diff --git a/apps/web/src/components/model-capabilities/index.vue b/apps/web/src/components/model-capabilities/index.vue
new file mode 100644
index 00000000..c946e17b
--- /dev/null
+++ b/apps/web/src/components/model-capabilities/index.vue
@@ -0,0 +1,45 @@
+<template>
+  <span
+    v-for="cap in compatibilities"
+    :key="cap"
+    :title="$t(`models.compatibility.${cap}`, cap)"
+    class="inline-flex items-center justify-center rounded-md border-0 size-5 shrink-0"
+    :class="styleOf(cap)"
+  >
+    <component
+      :is="iconOf(cap)"
+      class="size-3"
+    />
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { Wrench, Eye, Image, Brain } from 'lucide-vue-next'
+
+defineProps<{
+  compatibilities: string[]
+}>()
+
+const ICONS: Record<string, Component> = {
+  'tool-call': Wrench,
+  'vision': Eye,
+  'image-output': Image,
+  'reasoning': Brain,
+}
+
+const CLASSES: Record<string, string> = {
+  'tool-call': 'bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300',
+  'vision': 'bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300',
+  'image-output': 'bg-pink-50 text-pink-700 dark:bg-pink-950 dark:text-pink-300',
+  'reasoning': 'bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-300',
+}
+
+function iconOf(cap: string): Component {
+  return ICONS[cap] ?? Wrench
+}
+
+function styleOf(cap: string): string {
+  return CLASSES[cap] ?? 'bg-accent text-foreground'
+}
+</script>
diff --git a/apps/web/src/pages/bots/components/model-select.vue b/apps/web/src/pages/bots/components/model-select.vue
index 459cdfd9..3687b5b6 100644
--- a/apps/web/src/pages/bots/components/model-select.vue
+++ b/apps/web/src/pages/bots/components/model-select.vue
@@ -7,14 +7,32 @@
     :search-placeholder="$t('bots.settings.searchModel')"
     search-aria-label="Search models"
     :empty-text="$t('bots.settings.noModel')"
-  />
+  >
+    <template #option-suffix="{ option }">
+      <span class="ml-auto flex items-center gap-1.5">
+        <ModelCapabilities
+          v-if="optionMeta(option)?.compatibilities?.length"
+          :compatibilities="optionMeta(option)!.compatibilities!"
+        />
+        <ContextWindowBadge :context-window="optionMeta(option)?.context_window" />
+        <span
+          v-if="option.description"
+          class="text-xs text-muted-foreground"
+        >
+          {{ option.description }}
+        </span>
+      </span>
+    </template>
+  </SearchableSelectPopover>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { ModelsGetResponse, ProvidersGetResponse } from '@memohai/sdk'
+import type { ModelsGetResponse, ModelsModelConfig, ProvidersGetResponse } from '@memohai/sdk'
 import SearchableSelectPopover from '@/components/searchable-select-popover/index.vue'
 import type { SearchableSelectOption } from '@/components/searchable-select-popover/index.vue'
+import ModelCapabilities from '@/components/model-capabilities/index.vue'
+import ContextWindowBadge from '@/components/context-window-badge/index.vue'
 
 const props = defineProps<{
   models: ModelsGetResponse[]
@@ -37,6 +55,10 @@ const providerMap = computed(() => {
   return map
 })
 
+function optionMeta(option: SearchableSelectOption): ModelsModelConfig | undefined {
+  return option.meta as ModelsModelConfig | undefined
+}
+
 const options = computed<SearchableSelectOption[]>(() =>
   typeFilteredModels.value.map((model) => {
     const providerId = model.llm_provider_id
@@ -47,6 +69,7 @@ const options = computed<SearchableSelectOption[]>(() =>
       group: providerId,
       groupLabel: providerMap.value.get(providerId) ?? providerId,
       keywords: [model.model_id, model.name ?? ''],
+      meta: model.config,
     }
   }),
 )
diff --git a/apps/web/src/pages/providers/components/model-item.vue b/apps/web/src/pages/providers/components/model-item.vue
index ccec6f11..a8fbbfe2 100644
--- a/apps/web/src/pages/providers/components/model-item.vue
+++ b/apps/web/src/pages/providers/components/model-item.vue
@@ -3,6 +3,18 @@
     <ItemContent>
       <ItemTitle class="flex items-center gap-2">
         {{ model.name || model.model_id }}
+        <Badge
+          v-if="model.type"
+          variant="outline"
+          size="sm"
+          class="inline-flex items-center gap-1"
+        >
+          <component
+            :is="typeIcon"
+            class="size-3"
+          />
+          {{ model.type }}
+        </Badge>
         <span
           v-if="testResult"
           class="inline-flex items-center gap-1.5 text-xs text-muted-foreground"
@@ -19,17 +31,7 @@
         />
       </ItemTitle>
       <ItemDescription class="gap-2 flex flex-wrap items-center mt-3">
-        <Badge variant="outline">
-          {{ model.type }}
-        </Badge>
-        <Badge
-          v-for="cap in (model.config?.compatibilities || [])"
-          :key="cap"
-          variant="secondary"
-          class="text-xs"
-        >
-          {{ $t(`models.compatibility.${cap}`, cap) }}
-        </Badge>
+        <ModelCapabilities :compatibilities="model.config?.compatibilities || []" />
         <Badge
           v-for="effort in reasoningEfforts"
           :key="effort"
@@ -38,12 +40,7 @@
         >
           {{ effort }}
         </Badge>
-        <span
-          v-if="model.config?.context_window"
-          class="text-xs text-muted-foreground"
-        >
-          ctx: {{ model.config.context_window.toLocaleString() }}
-        </span>
+        <ContextWindowBadge :context-window="model.config?.context_window" />
         <span
           v-if="testResult && testResult.status !== 'ok' && testResult.message"
           class="text-destructive text-xs"
@@ -104,8 +101,10 @@ import {
   Button,
   Spinner,
 } from '@memohai/ui'
-import { RefreshCw, Settings, Trash2 } from 'lucide-vue-next'
+import { RefreshCw, Settings, Trash2, MessageSquare, Binary } from 'lucide-vue-next'
 import ConfirmPopover from '@/components/confirm-popover/index.vue'
+import ModelCapabilities from '@/components/model-capabilities/index.vue'
+import ContextWindowBadge from '@/components/context-window-badge/index.vue'
 import { postModelsByIdTest } from '@memohai/sdk'
 import type { ModelsGetResponse, ModelsTestResponse } from '@memohai/sdk'
 import { ref, computed } from 'vue'
@@ -128,6 +127,10 @@ const testLoading = ref(false)
 const testResult = ref<ModelsTestResponse | null>(null)
 const reasoningEfforts = computed(() => ((props.model.config as ModelConfigWithReasoning | undefined)?.reasoning_efforts ?? []))
 
+const typeIcon = computed(() => {
+  return props.model.type === 'embedding' ? Binary : MessageSquare
+})
+
 const statusDotClass = computed(() => {
   switch (testResult.value?.status) {
     case 'ok': return 'bg-green-500'
@@ -153,5 +156,4 @@ async function runTest() {
     testLoading.value = false
   }
 }
-
 </script>