diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css b/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
index 11457d7d5d..455ec1a44c 100644
--- a/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
+++ b/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
@@ -1,4 +1,4 @@
-/* Auto-generated MDI subset – 268 icons */
+/* Auto-generated MDI subset – 270 icons */
 /* Do not edit manually. Run: pnpm run subset-icons */
 
 @font-face {
@@ -1060,6 +1060,14 @@
   content: "\F056E";
 }
 
+.mdi-view-grid-compact::before {
+  content: "\F1C61";
+}
+
+.mdi-view-grid-outline::before {
+  content: "\F11D9";
+}
+
 .mdi-volume-high::before {
   content: "\F057E";
 }
diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff
index 713b6f8b00..34292cc910 100644
Binary files a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff and b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff differ
diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2
index 5449462d76..724dd529c2 100644
Binary files a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 and b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 differ
diff --git a/dashboard/src/components/shared/ExtensionCard.vue b/dashboard/src/components/shared/ExtensionCard.vue
index e5e487de48..f1e5b8f6a1 100644
--- a/dashboard/src/components/shared/ExtensionCard.vue
+++ b/dashboard/src/components/shared/ExtensionCard.vue
@@ -3,6 +3,7 @@ import { ref, computed, watch, useAttrs } from "vue";
 import { useCustomizerStore } from "@/stores/customizer";
 import { useModuleI18n } from "@/i18n/composables";
 import UninstallConfirmDialog from "./UninstallConfirmDialog.vue";
+import PluginActivationSwitch from "./PluginActivationSwitch.vue";
 import PluginPlatformChip from "./PluginPlatformChip.vue";
 import StyledMenu from "./StyledMenu.vue";
 import defaultPluginIcon from "/favicon.svg";
@@ -25,6 +26,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 // 定义要发送到父组件的事件
@@ -188,6 +193,7 @@ const openWebui = () => {
   <v-card
     v-bind="attrs"
     class="extension-card mx-auto d-flex flex-column h-100"
+    :class="{ 'extension-card--compact': compact }"
     elevation="0"
     height="100%"
     :ripple="false"
@@ -210,7 +216,7 @@ const openWebui = () => {
   >
     <v-card-text class="extension-card-text">
       <div class="extension-content-row">
-        <div class="extension-image-container">
+        <div v-if="!compact" class="extension-image-container">
           <img
             :src="logoSrc"
             :alt="extension.name"
@@ -222,8 +228,8 @@ const openWebui = () => {
         <div class="extension-meta-group">
           <div class="extension-title-row">
             <p
-              class="text-h3 font-weight-black extension-title"
-              :class="{ 'text-h4': $vuetify.display.xs }"
+              class="font-weight-black extension-title"
+              :class="compact || $vuetify.display.xs ? 'text-h4' : 'text-h3'"
             >
               <v-tooltip
                 location="top"
@@ -241,11 +247,14 @@ const openWebui = () => {
                   >
                 </template>
               </v-tooltip>
-              <span v-if="extension.version" class="extension-version">
+              <span
+                v-if="extension.version && !compact"
+                class="extension-version"
+              >
                 {{ extension.version }}
               </span>
               <v-chip
-                v-if="extension.reserved"
+                v-if="extension.reserved && !compact"
                 color="primary"
                 size="x-small"
                 class="extension-system-chip"
@@ -253,7 +262,7 @@ const openWebui = () => {
                 {{ tm("status.system") }}
               </v-chip>
               <v-chip
-                v-if="!marketMode"
+                v-if="!marketMode && !compact"
                 :color="extension.activated ? 'success' : 'default'"
                 :prepend-icon="
                   extension.activated
@@ -292,40 +301,15 @@ const openWebui = () => {
               </v-tooltip>
             </p>
 
-            <template v-if="!marketMode">
-              <v-tooltip location="left">
-                <template v-slot:activator="{ props: tooltipProps }">
-                  <div class="extension-switch-wrap" @click.stop>
-                    <div
-                      v-bind="tooltipProps"
-                      style="display: inline-flex; align-items: center"
-                    >
-                      <v-switch
-                        :model-value="extension.activated"
-                        :aria-label="
-                          extension.activated
-                            ? tm('buttons.stop')
-                            : tm('buttons.load')
-                        "
-                        color="success"
-                        density="compact"
-                        hide-details
-                        inset
-                        @update:model-value="toggleActivation"
-                      ></v-switch>
-                    </div>
-                  </div>
-                </template>
-                <span>{{
-                  extension.activated
-                    ? tm("buttons.stop")
-                    : tm("buttons.load")
-                }}</span>
-              </v-tooltip>
-            </template>
+            <PluginActivationSwitch
+              v-if="!marketMode && !compact"
+              :activated="extension.activated"
+              tooltip-location="left"
+              @toggle="toggleActivation"
+            />
           </div>
 
-          <div class="extension-chip-group d-flex flex-wrap">
+          <div v-if="!compact" class="extension-chip-group d-flex flex-wrap">
             <v-chip
               v-if="extension?.has_update"
               color="warning"
@@ -359,6 +343,7 @@ const openWebui = () => {
           </div>
 
           <div
+            v-if="!compact"
             class="extension-desc"
             :class="{ 'text-caption': $vuetify.display.xs }"
           >
@@ -370,7 +355,7 @@ const openWebui = () => {
 
     <v-card-actions class="extension-actions">
       <template v-if="!marketMode">
-        <v-spacer></v-spacer>
+        <v-spacer v-if="!compact"></v-spacer>
         <v-tooltip location="top">
           <template v-slot:activator="{ props: pinTooltipProps }">
             <v-btn
@@ -378,7 +363,7 @@ const openWebui = () => {
               :aria-label="isPinned ? tm('buttons.unpin') : tm('buttons.pin')"
               :color="isPinned ? 'primary' : 'secondary'"
               :icon="isPinned ? 'mdi-pin' : 'mdi-pin-outline'"
-              size="small"
+              :size="compact ? 'x-small' : 'small'"
               variant="tonal"
               class="extension-pin-btn"
               @click.stop="togglePin"
@@ -392,7 +377,7 @@ const openWebui = () => {
             <v-btn
               v-bind="actionProps"
               icon="mdi-book-open-page-variant"
-              size="small"
+              :size="compact ? 'x-small' : 'small'"
               variant="tonal"
               color="info"
               @click.stop="viewReadme"
@@ -409,7 +394,7 @@ const openWebui = () => {
             <v-btn
               v-bind="actionProps"
               icon="mdi-monitor-dashboard"
-              size="small"
+              :size="compact ? 'x-small' : 'small'"
               variant="tonal"
               color="primary"
               :disabled="!extension.activated"
@@ -423,7 +408,7 @@ const openWebui = () => {
             <v-btn
               v-bind="actionProps"
               icon="mdi-cog"
-              size="small"
+              :size="compact ? 'x-small' : 'small'"
               variant="tonal"
               color="primary"
               @click.stop="configure"
@@ -436,7 +421,7 @@ const openWebui = () => {
             <v-btn
               v-bind="actionProps"
               icon="mdi-refresh"
-              size="small"
+              :size="compact ? 'x-small' : 'small'"
               variant="tonal"
               color="primary"
               @click.stop="reloadExtension"
@@ -449,7 +434,7 @@ const openWebui = () => {
             <v-btn
               v-bind="menuProps"
               icon="mdi-dots-horizontal"
-              size="small"
+              :size="compact ? 'x-small' : 'small'"
               variant="tonal"
               color="secondary"
               @click.stop
@@ -520,6 +505,12 @@ const openWebui = () => {
             }}</v-list-item-title>
           </v-list-item>
         </StyledMenu>
+
+        <PluginActivationSwitch
+          v-if="compact"
+          :activated="extension.activated"
+          @toggle="toggleActivation"
+        />
       </template>
       <template v-else>
         <v-btn color="primary" size="small" @click.stop="viewReadme">
@@ -620,20 +611,10 @@ const openWebui = () => {
   margin-left: 8px;
 }
 
-.extension-switch-wrap {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
 .extension-pin-btn {
   flex-shrink: 0;
 }
 
-.extension-switch-wrap :deep(.v-switch) {
-  margin: 0;
-}
-
 @media (max-width: 600px) {
   .extension-content-row {
     gap: 10px;
@@ -652,4 +633,30 @@ const openWebui = () => {
   min-height: 42px;
   padding: 0 12px 10px;
 }
+
+.extension-card--compact {
+  align-items: center;
+  flex-direction: row !important;
+  min-height: 44px;
+}
+
+.extension-card--compact .extension-card-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 6px 0 6px 12px;
+}
+
+.extension-card--compact .extension-content-row,
+.extension-card--compact .extension-title-row {
+  align-items: center;
+  gap: 4px;
+}
+
+.extension-card--compact .extension-actions {
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
+  gap: 2px;
+  min-height: 0;
+  padding: 6px 8px 6px 4px;
+}
 </style>
diff --git a/dashboard/src/components/shared/PluginActivationSwitch.vue b/dashboard/src/components/shared/PluginActivationSwitch.vue
new file mode 100644
index 0000000000..e9bdadfbae
--- /dev/null
+++ b/dashboard/src/components/shared/PluginActivationSwitch.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { useModuleI18n } from "@/i18n/composables";
+
+withDefaults(
+  defineProps<{
+    activated: boolean;
+    tooltipLocation?: "top" | "left";
+  }>(),
+  {
+    tooltipLocation: "top",
+  },
+);
+
+const emit = defineEmits(["toggle"]);
+const { tm } = useModuleI18n("features/extension");
+</script>
+
+<template>
+  <v-tooltip :location="tooltipLocation">
+    <template #activator="{ props: tooltipProps }">
+      <div class="plugin-activation-switch" @click.stop>
+        <div v-bind="tooltipProps" class="plugin-activation-switch__control">
+          <v-switch
+            :model-value="activated"
+            :aria-label="activated ? tm('buttons.stop') : tm('buttons.load')"
+            color="success"
+            density="compact"
+            hide-details
+            inset
+            @update:model-value="emit('toggle')"
+          />
+        </div>
+      </div>
+    </template>
+    <span>{{ activated ? tm("buttons.stop") : tm("buttons.load") }}</span>
+  </v-tooltip>
+</template>
+
+<style scoped>
+.plugin-activation-switch {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.plugin-activation-switch__control {
+  display: inline-flex;
+  align-items: center;
+}
+
+.plugin-activation-switch :deep(.v-switch) {
+  margin: 0;
+}
+</style>
diff --git a/dashboard/src/i18n/locales/en-US/features/extension.json b/dashboard/src/i18n/locales/en-US/features/extension.json
index 49ce481c60..54620312ce 100644
--- a/dashboard/src/i18n/locales/en-US/features/extension.json
+++ b/dashboard/src/i18n/locales/en-US/features/extension.json
@@ -27,8 +27,9 @@
     "all": "All"
   },
   "views": {
-    "card": "Card View",
-    "list": "List View"
+    "displayDensity": "Plugin display density",
+    "detailed": "Detailed mode",
+    "compact": "Compact mode"
   },
   "buttons": {
     "showSystemPlugins": "Show System Extensions",
diff --git a/dashboard/src/i18n/locales/ru-RU/features/extension.json b/dashboard/src/i18n/locales/ru-RU/features/extension.json
index 6eb112b0fd..67a69c76f6 100644
--- a/dashboard/src/i18n/locales/ru-RU/features/extension.json
+++ b/dashboard/src/i18n/locales/ru-RU/features/extension.json
@@ -27,8 +27,9 @@
         "all": "Все"
     },
     "views": {
-        "card": "Плитка",
-        "list": "Список"
+        "displayDensity": "Плотность отображения плагинов",
+        "detailed": "Подробный режим",
+        "compact": "Компактный режим"
     },
     "buttons": {
         "showSystemPlugins": "Показать системные",
diff --git a/dashboard/src/i18n/locales/zh-CN/features/extension.json b/dashboard/src/i18n/locales/zh-CN/features/extension.json
index 476bacd051..3e2dbdc6a8 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/extension.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/extension.json
@@ -27,8 +27,9 @@
     "all": "全部"
   },
   "views": {
-    "card": "卡片视图",
-    "list": "列表视图"
+    "displayDensity": "插件显示密度",
+    "detailed": "详细模式",
+    "compact": "紧凑模式"
   },
   "buttons": {
     "showSystemPlugins": "显示系统插件",
diff --git a/dashboard/src/views/ExtensionPage.vue b/dashboard/src/views/ExtensionPage.vue
index f632dfa009..0a76cdee62 100644
--- a/dashboard/src/views/ExtensionPage.vue
+++ b/dashboard/src/views/ExtensionPage.vue
@@ -58,8 +58,6 @@ const {
   updateConfirmDialog,
   updateAllConfirmDialog,
   changelogDialog,
-  getInitialListViewMode,
-  isListView,
   pluginSearch,
   loading_,
   currentPage,
diff --git a/dashboard/src/views/extension/InstalledPluginsTab.vue b/dashboard/src/views/extension/InstalledPluginsTab.vue
index b26359a1e5..de021a77c2 100644
--- a/dashboard/src/views/extension/InstalledPluginsTab.vue
+++ b/dashboard/src/views/extension/InstalledPluginsTab.vue
@@ -2,8 +2,11 @@
 import ExtensionCard from "@/components/shared/ExtensionCard.vue";
 import { normalizeTextInput } from "@/utils/inputValue";
 import {
+  PLUGIN_CARD_DENSITY,
   readPinnedExtensions,
+  readPluginCardDensity,
   writePinnedExtensions,
+  writePluginCardDensity,
 } from "./extensionPreferenceStorage.mjs";
 import { computed, ref, watch } from "vue";
 
@@ -168,6 +171,7 @@ const openPluginWebui = (extension) => {
 };
 
 const pinnedExtensionNames = ref(readPinnedExtensions());
+const pluginCardDensity = ref(readPluginCardDensity());
 
 const pinnedExtensionOrder = computed(() => {
   const order = new Map();
@@ -202,6 +206,10 @@ watch(
   { deep: true },
 );
 
+watch(pluginCardDensity, (density) => {
+  writePluginCardDensity(density);
+});
+
 const isPinnedExtension = (extension) => {
   const name = extension?.name;
   return !!name && pinnedExtensionOrder.value.has(name);
@@ -247,7 +255,7 @@ const togglePinnedExtension = (extension) => {
           </v-tab>
         </v-tabs>
 
-        <div class="installed-search-wrap d-flex align-center ml-auto">
+        <div class="installed-controls d-flex align-center ml-auto">
           <v-text-field
             :model-value="pluginSearch"
             @update:model-value="pluginSearch = normalizeTextInput($event)"
@@ -262,6 +270,38 @@ const togglePinnedExtension = (extension) => {
             class="plugin-search-field"
           >
           </v-text-field>
+
+          <v-btn-toggle
+            v-model="pluginCardDensity"
+            mandatory
+            divided
+            density="compact"
+            variant="outlined"
+            color="primary"
+            class="plugin-density-toggle"
+            :aria-label="tm('views.displayDensity')"
+          >
+            <v-btn
+              :value="PLUGIN_CARD_DENSITY.DETAILED"
+              icon
+              :aria-label="tm('views.detailed')"
+            >
+              <v-icon>mdi-view-grid-outline</v-icon>
+              <v-tooltip activator="parent" location="top">
+                {{ tm("views.detailed") }}
+              </v-tooltip>
+            </v-btn>
+            <v-btn
+              :value="PLUGIN_CARD_DENSITY.COMPACT"
+              icon
+              :aria-label="tm('views.compact')"
+            >
+              <v-icon>mdi-view-grid-compact</v-icon>
+              <v-tooltip activator="parent" location="top">
+                {{ tm("views.compact") }}
+              </v-tooltip>
+            </v-btn>
+          </v-btn-toggle>
         </div>
       </div>
     </div>
@@ -341,7 +381,7 @@ const togglePinnedExtension = (extension) => {
     </v-card>
 
     <v-fade-transition hide-on-leave>
-      <div>
+      <div class="installed-plugin-list-container">
         <v-row v-if="sortedInstalledPlugins.length === 0" class="text-center">
           <v-col cols="12" class="pa-2">
             <v-icon size="64" color="info" class="mb-4"
@@ -354,39 +394,31 @@ const togglePinnedExtension = (extension) => {
           </v-col>
         </v-row>
 
-        <v-row>
-          <v-col
-            cols="12"
-            md="6"
+        <div v-else class="installed-plugin-grid">
+          <ExtensionCard
             v-for="extension in sortedInstalledPlugins"
             :key="extension.name"
-            class="pb-2"
-          >
-            <ExtensionCard
-              :extension="extension"
-              :is-pinned="isPinnedExtension(extension)"
-              class="rounded-lg"
-              style="background-color: rgb(var(--v-theme-mcpCardBg))"
-              @click="openPluginDetail(extension)"
-              @toggle-pin="togglePinnedExtension(extension)"
-              @configure="openExtensionConfig(extension.name)"
-              @uninstall="
-                (ext, options) => uninstallExtension(ext.name, options)
-              "
-              @update="updateExtension(extension.name)"
-              @reload="reloadPlugin(extension.name)"
-              @toggle-activation="
-                extension.activated ? pluginOff(extension) : pluginOn(extension)
-              "
-              @view-handlers="showPluginInfo(extension)"
-              @view-readme="viewReadme(extension)"
-              @view-changelog="viewChangelog(extension)"
-              @open-webui="openPluginWebui(extension)"
-              @change-source="openPluginSourceBindingDialog(extension)"
-            >
-            </ExtensionCard>
-          </v-col>
-        </v-row>
+            :extension="extension"
+            :is-pinned="isPinnedExtension(extension)"
+            :compact="pluginCardDensity === PLUGIN_CARD_DENSITY.COMPACT"
+            class="rounded-lg"
+            style="background-color: rgb(var(--v-theme-mcpCardBg))"
+            @click="openPluginDetail(extension)"
+            @toggle-pin="togglePinnedExtension(extension)"
+            @configure="openExtensionConfig(extension.name)"
+            @uninstall="(ext, options) => uninstallExtension(ext.name, options)"
+            @update="updateExtension(extension.name)"
+            @reload="reloadPlugin(extension.name)"
+            @toggle-activation="
+              extension.activated ? pluginOff(extension) : pluginOn(extension)
+            "
+            @view-handlers="showPluginInfo(extension)"
+            @view-readme="viewReadme(extension)"
+            @view-changelog="viewChangelog(extension)"
+            @open-webui="openPluginWebui(extension)"
+            @change-source="openPluginSourceBindingDialog(extension)"
+          />
+        </div>
       </div>
     </v-fade-transition>
 
@@ -596,13 +628,35 @@ const togglePinnedExtension = (extension) => {
   gap: 12px;
 }
 
-.installed-search-wrap {
-  flex: 0 1 340px;
-  min-width: 220px;
+.installed-controls {
+  flex: 0 1 440px;
+  gap: 8px;
+  min-width: 300px;
 }
 
 .plugin-search-field {
-  width: 100%;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.plugin-density-toggle {
+  flex: 0 0 auto;
+}
+
+.installed-plugin-list-container {
+  container-type: inline-size;
+}
+
+.installed-plugin-grid {
+  display: grid;
+  gap: 8px 12px;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@container (min-width: 760px) {
+  .installed-plugin-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 @media (max-width: 700px) {
@@ -611,7 +665,7 @@ const togglePinnedExtension = (extension) => {
     flex-direction: column;
   }
 
-  .installed-search-wrap {
+  .installed-controls {
     flex: none;
     margin-left: 0 !important;
     min-width: 0;
diff --git a/dashboard/src/views/extension/MarketPluginsTab.vue b/dashboard/src/views/extension/MarketPluginsTab.vue
index fd03b48f59..2d28252177 100644
--- a/dashboard/src/views/extension/MarketPluginsTab.vue
+++ b/dashboard/src/views/extension/MarketPluginsTab.vue
@@ -45,8 +45,6 @@ const {
   forceUpdateDialog,
   updateAllConfirmDialog,
   changelogDialog,
-  getInitialListViewMode,
-  isListView,
   pluginSearch,
   loading_,
   currentPage,
diff --git a/dashboard/src/views/extension/extensionPreferenceStorage.mjs b/dashboard/src/views/extension/extensionPreferenceStorage.mjs
index c0ce80bdd0..c3293de0c0 100644
--- a/dashboard/src/views/extension/extensionPreferenceStorage.mjs
+++ b/dashboard/src/views/extension/extensionPreferenceStorage.mjs
@@ -1,4 +1,9 @@
 export const PINNED_EXTENSIONS_STORAGE_KEY = "astrbot.pinnedExtensions";
+export const PLUGIN_CARD_DENSITY_STORAGE_KEY = "astrbot.pluginCardDensity";
+export const PLUGIN_CARD_DENSITY = Object.freeze({
+  DETAILED: "detailed",
+  COMPACT: "compact",
+});
 
 const getStorageForRead = (storageOverride) => {
   if (storageOverride === null) {
@@ -87,3 +92,56 @@ export const writePinnedExtensions = (names, storage) => {
     // Ignore restricted storage environments.
   }
 };
+
+/**
+ * Read the saved plugin card density.
+ *
+ * Args:
+ *   storage: Optional storage override used by tests or restricted runtimes.
+ *
+ * Returns:
+ *   The saved density, or the detailed density when unavailable or invalid.
+ */
+export const readPluginCardDensity = (storage) => {
+  const targetStorage = getStorageForRead(storage);
+  if (!targetStorage) {
+    return PLUGIN_CARD_DENSITY.DETAILED;
+  }
+
+  try {
+    const saved = targetStorage.getItem(PLUGIN_CARD_DENSITY_STORAGE_KEY);
+    return Object.values(PLUGIN_CARD_DENSITY).includes(saved)
+      ? saved
+      : PLUGIN_CARD_DENSITY.DETAILED;
+  } catch {
+    return PLUGIN_CARD_DENSITY.DETAILED;
+  }
+};
+
+/**
+ * Persist the plugin card density.
+ *
+ * Args:
+ *   density: Density value to store. Unsupported values use the detailed mode.
+ *   storage: Optional storage override used by tests or restricted runtimes.
+ *
+ * Returns:
+ *   Nothing.
+ */
+export const writePluginCardDensity = (density, storage) => {
+  const targetStorage = getStorageForWrite(storage);
+  if (!targetStorage) {
+    return;
+  }
+
+  try {
+    targetStorage.setItem(
+      PLUGIN_CARD_DENSITY_STORAGE_KEY,
+      Object.values(PLUGIN_CARD_DENSITY).includes(density)
+        ? density
+        : PLUGIN_CARD_DENSITY.DETAILED,
+    );
+  } catch {
+    // Ignore restricted storage environments.
+  }
+};
diff --git a/dashboard/tests/extensionPreferenceStorage.test.mjs b/dashboard/tests/extensionPreferenceStorage.test.mjs
index 9062d2023c..dd4c1b3491 100644
--- a/dashboard/tests/extensionPreferenceStorage.test.mjs
+++ b/dashboard/tests/extensionPreferenceStorage.test.mjs
@@ -3,8 +3,12 @@ import assert from 'node:assert/strict';
 
 import {
   PINNED_EXTENSIONS_STORAGE_KEY,
+  PLUGIN_CARD_DENSITY,
+  PLUGIN_CARD_DENSITY_STORAGE_KEY,
   readPinnedExtensions,
+  readPluginCardDensity,
   writePinnedExtensions,
+  writePluginCardDensity,
 } from '../src/views/extension/extensionPreferenceStorage.mjs';
 
 test('readPinnedExtensions uses the legacy pinned extension storage key', () => {
@@ -52,3 +56,68 @@ test('writePinnedExtensions ignores unavailable storage', () => {
   assert.doesNotThrow(() => writePinnedExtensions(['alpha'], null));
   assert.doesNotThrow(() => writePinnedExtensions(['alpha'], {}));
 });
+
+test('readPluginCardDensity restores a saved compact mode', () => {
+  const storage = {
+    getItem(key) {
+      return key === PLUGIN_CARD_DENSITY_STORAGE_KEY
+        ? PLUGIN_CARD_DENSITY.COMPACT
+        : null;
+    },
+  };
+
+  assert.equal(readPluginCardDensity(storage), PLUGIN_CARD_DENSITY.COMPACT);
+});
+
+test('readPluginCardDensity falls back for invalid or unavailable storage', () => {
+  assert.equal(
+    readPluginCardDensity({
+      getItem() {
+        return 'unsupported';
+      },
+    }),
+    PLUGIN_CARD_DENSITY.DETAILED,
+  );
+  assert.equal(readPluginCardDensity(null), PLUGIN_CARD_DENSITY.DETAILED);
+  assert.equal(
+    readPluginCardDensity({
+      getItem() {
+        throw new Error('SecurityError');
+      },
+    }),
+    PLUGIN_CARD_DENSITY.DETAILED,
+  );
+});
+
+test('writePluginCardDensity stores a supported mode', () => {
+  const writes = [];
+  const storage = {
+    setItem(key, value) {
+      writes.push([key, value]);
+    },
+  };
+
+  writePluginCardDensity(PLUGIN_CARD_DENSITY.COMPACT, storage);
+
+  assert.deepEqual(writes, [
+    [PLUGIN_CARD_DENSITY_STORAGE_KEY, PLUGIN_CARD_DENSITY.COMPACT],
+  ]);
+});
+
+test('writePluginCardDensity normalizes invalid values and storage failures', () => {
+  const writes = [];
+  const storage = {
+    setItem(key, value) {
+      writes.push([key, value]);
+      throw new Error('QuotaExceededError');
+    },
+  };
+
+  assert.doesNotThrow(() => writePluginCardDensity('unsupported', storage));
+  assert.deepEqual(writes, [
+    [PLUGIN_CARD_DENSITY_STORAGE_KEY, PLUGIN_CARD_DENSITY.DETAILED],
+  ]);
+  assert.doesNotThrow(() =>
+    writePluginCardDensity(PLUGIN_CARD_DENSITY.COMPACT, null),
+  );
+});