From e8196cf6a681c40e60ffb4689d19d3510e58a42d Mon Sep 17 00:00:00 2001
From: Seranged <80223622+Seranged@users.noreply.github.com>
Date: Wed, 24 Jun 2026 12:45:14 +0100
Subject: [PATCH 1/5] feat: add vault overview accordions

Wrap vault overview sections in reusable accordion cards with configurable default open states across standard, pair, and Securitize views.
---
 .../overview/SecuritizeVaultOverview.vue      | 502 +++++++++--------
 .../overview/SecuritizeVaultOverviewPair.vue  |   6 +-
 ...ecuritizeVaultOverviewPairBlockGeneral.vue |  15 +-
 .../entities/vault/overview/VaultOverview.vue |   7 +
 .../VaultOverviewAccordionSection.vue         |  60 +++
 .../overview/VaultOverviewBlockAddresses.vue  |  87 ++-
 .../overview/VaultOverviewBlockBorrow.vue     |  13 +-
 .../VaultOverviewBlockCyclicalIRM.vue         |  17 +-
 .../overview/VaultOverviewBlockGeneral.vue    | 271 +++++-----
 .../vault/overview/VaultOverviewBlockIRM.vue  |  18 +-
 .../VaultOverviewBlockOracleAdapters.vue      |  12 +-
 .../VaultOverviewBlockRiskParameters.vue      | 213 ++++----
 .../overview/VaultOverviewBlockStats.vue      | 185 ++++---
 .../vault/overview/VaultOverviewPair.vue      |   3 +
 .../VaultOverviewPairBlockGeneral.vue         | 503 +++++++++---------
 .../overview/VaultOverviewPairBlockTypes.vue  |  13 +-
 16 files changed, 989 insertions(+), 936 deletions(-)
 create mode 100644 components/entities/vault/overview/VaultOverviewAccordionSection.vue

diff --git a/components/entities/vault/overview/SecuritizeVaultOverview.vue b/components/entities/vault/overview/SecuritizeVaultOverview.vue
index 9cb1cd6e..4a8f4e1b 100644
--- a/components/entities/vault/overview/SecuritizeVaultOverview.vue
+++ b/components/entities/vault/overview/SecuritizeVaultOverview.vue
@@ -151,283 +151,271 @@ const supplyCapPercentageDisplay = computed(() => {
     :class="[desktopOverview ? 'gap-16' : 'gap-12']"
   >
     <!-- Overview -->
-    <div
-      class="bg-surface-secondary rounded-xl flex flex-col gap-24 p-24 shadow-card"
+    <VaultOverviewAccordionSection
+      title="Overview"
+      :default-open="true"
+      content-class="flex flex-col items-start gap-24"
     >
-      <p class="text-h3 text-content-primary">
-        Overview
-      </p>
-      <div class="flex flex-col items-start gap-24">
-        <VaultDeprecationBanner
-          v-if="isDeprecated"
-          :reason="deprecationReason"
+      <VaultDeprecationBanner
+        v-if="isDeprecated"
+        :reason="deprecationReason"
+      />
+      <div
+        v-if="isRestricted"
+        class="w-full rounded-12 p-16 bg-warning-100 text-warning-500"
+      >
+        <div class="flex items-center gap-8">
+          <SvgIcon
+            name="warning"
+            class="!w-20 !h-20 flex-shrink-0"
+          />
+          <p class="text-p3 text-warning-500">
+            This vault is not available in your region.
+          </p>
+        </div>
+      </div>
+      <div
+        v-if="description"
+        class="w-full rounded-12 p-16 bg-surface-tertiary"
+      >
+        <!-- eslint-disable vue/no-v-html -- trusted label content -->
+        <p
+          class="text-p3 text-content-secondary auto-link"
+          v-html="autoLink(description)"
         />
+        <!-- eslint-enable vue/no-v-html -->
+      </div>
+      <VaultOverviewLabelValue
+        label="Price"
+        :value="priceDisplay"
+      />
+      <VaultOverviewLabelValue label="Market">
+        <NuxtLink
+          v-if="marketProductKey"
+          :to="{ name: 'explore-market', params: { market: marketProductKey }, query: { network: route.query.network } }"
+          class="text-p2 text-content-primary hover:text-accent-600 underline transition-colors"
+        >
+          {{ marketProductName }}
+        </NuxtLink>
+        <template v-else>
+          {{ marketProductName || '-' }}
+        </template>
+      </VaultOverviewLabelValue>
+      <VaultOverviewLabelValue
+        v-if="enableEntityBrandingDisplay"
+        label="Risk manager"
+      >
         <div
-          v-if="isRestricted"
-          class="w-full rounded-12 p-16 bg-warning-100 text-warning-500"
+          v-if="entities.length && isGovernorVerified"
+          class="flex flex-col gap-16"
         >
-          <div class="flex items-center gap-8">
-            <SvgIcon
-              name="warning"
-              class="!w-20 !h-20 flex-shrink-0"
+          <div
+            v-for="(entity, idx) in entities"
+            :key="idx"
+            class="flex items-center gap-8"
+            :class="{ 'opacity-20': isGovernanceLimited }"
+          >
+            <BaseAvatar
+              :label="entity.name"
+              :src="getEulerLabelEntityLogo(entity.logo)"
+              class="!w-28 !h-28"
             />
-            <p class="text-p3 text-warning-500">
-              This vault is not available in your region.
-            </p>
+            <a
+              :href="entity.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-p2 text-content-primary underline"
+            >{{ entity.name }}</a>
           </div>
         </div>
-        <div
-          v-if="description"
-          class="w-full rounded-12 p-16 bg-surface-tertiary"
-        >
-          <!-- eslint-disable vue/no-v-html -- trusted label content -->
-          <p
-            class="text-p3 text-content-secondary auto-link"
-            v-html="autoLink(description)"
-          />
-          <!-- eslint-enable vue/no-v-html -->
+        <VaultTypeChip
+          v-else-if="!isGovernorVerified"
+          :vault="vault"
+          type="unknown"
+          nudge
+        />
+        <div v-else>
+          -
         </div>
-        <VaultOverviewLabelValue
-          label="Price"
-          :value="priceDisplay"
+      </VaultOverviewLabelValue>
+      <VaultOverviewLabelValue
+        v-if="enableVaultTypeDisplay"
+        label="Vault type"
+      >
+        <VaultTypeBadges
+          :vault="vault"
+          nudge
         />
-        <VaultOverviewLabelValue label="Market">
-          <NuxtLink
-            v-if="marketProductKey"
-            :to="{ name: 'explore-market', params: { market: marketProductKey }, query: { network: route.query.network } }"
-            class="text-p2 text-content-primary hover:text-accent-600 underline transition-colors"
-          >
-            {{ marketProductName }}
-          </NuxtLink>
-          <template v-else>
-            {{ marketProductName || '-' }}
-          </template>
-        </VaultOverviewLabelValue>
-        <VaultOverviewLabelValue
-          v-if="enableEntityBrandingDisplay"
-          label="Risk manager"
-        >
-          <div
-            v-if="entities.length && isGovernorVerified"
-            class="flex flex-col gap-16"
-          >
-            <div
-              v-for="(entity, idx) in entities"
-              :key="idx"
-              class="flex items-center gap-8"
-              :class="{ 'opacity-20': isGovernanceLimited }"
-            >
-              <BaseAvatar
-                :label="entity.name"
-                :src="getEulerLabelEntityLogo(entity.logo)"
-                class="!w-28 !h-28"
-              />
-              <a
-                :href="entity.url"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-p2 text-content-primary underline"
-              >{{ entity.name }}</a>
-            </div>
+      </VaultOverviewLabelValue>
+      <VaultOverviewLabelValue label="Can be borrowed">
+        <div class="flex items-center gap-8">
+          <div>
+            <UiIcon :name="borrowCount ? 'green-tick' : 'red-cross'" />
           </div>
-          <VaultTypeChip
-            v-else-if="!isGovernorVerified"
-            :vault="vault"
-            type="unknown"
-            nudge
-          />
-          <div v-else>
-            -
-          </div>
-        </VaultOverviewLabelValue>
-        <VaultOverviewLabelValue
-          v-if="enableVaultTypeDisplay"
-          label="Vault type"
-        >
-          <VaultTypeBadges
-            :vault="vault"
-            nudge
-          />
-        </VaultOverviewLabelValue>
-        <VaultOverviewLabelValue label="Can be borrowed">
-          <div class="flex items-center gap-8">
-            <div>
-              <UiIcon :name="borrowCount ? 'green-tick' : 'red-cross'" />
-            </div>
-            <span class="text-p2 text-content-primary">
-              {{ formatMarketAvailability(borrowCount) }}
-            </span>
-          </div>
-        </VaultOverviewLabelValue>
-        <VaultOverviewLabelValue label="Can be used as collateral">
-          <div class="flex items-center gap-8">
-            <div>
-              <UiIcon :name="collateralCount ? 'green-tick' : 'red-cross'" />
-            </div>
-            <span class="text-p2 text-content-primary">
-              {{ formatMarketAvailability(collateralCount) }}
-            </span>
+          <span class="text-p2 text-content-primary">
+            {{ formatMarketAvailability(borrowCount) }}
+          </span>
+        </div>
+      </VaultOverviewLabelValue>
+      <VaultOverviewLabelValue label="Can be used as collateral">
+        <div class="flex items-center gap-8">
+          <div>
+            <UiIcon :name="collateralCount ? 'green-tick' : 'red-cross'" />
           </div>
-        </VaultOverviewLabelValue>
-      </div>
-    </div>
+          <span class="text-p2 text-content-primary">
+            {{ formatMarketAvailability(collateralCount) }}
+          </span>
+        </div>
+      </VaultOverviewLabelValue>
+    </VaultOverviewAccordionSection>
 
     <!-- Statistics -->
-    <div
-      class="bg-surface-secondary rounded-xl flex flex-col gap-24 p-24 shadow-card"
+    <VaultOverviewAccordionSection
+      title="Statistics"
+      :default-open="true"
+      content-class="flex flex-col items-start gap-24"
     >
-      <p class="text-h3 text-content-primary">
-        Statistics
-      </p>
-      <div class="flex flex-col items-start gap-24">
-        <VaultOverviewLabelValue
-          label="Total supply"
-          :value="totalSupplyDisplay"
-          orientation="horizontal"
-        />
-        <VaultOverviewLabelValue
-          orientation="horizontal"
-        >
-          <template #label>
-            Supply APY
-          </template>
-          <span class="flex items-center gap-4">
-            <UiModalPreviewTrigger
-              v-if="hasSupplyRewards(vault.address)"
-              :component="VaultSupplyApyModal"
-              :modal-data="supplyApyModalData"
-              aria-label="Show supply APY rewards breakdown"
-            >
-              <SvgIcon
-                class="!w-20 !h-20 text-accent-500 cursor-pointer"
-                name="sparks"
-              />
-            </UiModalPreviewTrigger>
-            {{ formatNumber(supplyApyWithRewards) }}%
-          </span>
-        </VaultOverviewLabelValue>
-      </div>
-    </div>
+      <VaultOverviewLabelValue
+        label="Total supply"
+        :value="totalSupplyDisplay"
+        orientation="horizontal"
+      />
+      <VaultOverviewLabelValue
+        orientation="horizontal"
+      >
+        <template #label>
+          Supply APY
+        </template>
+        <span class="flex items-center gap-4">
+          <UiModalPreviewTrigger
+            v-if="hasSupplyRewards(vault.address)"
+            :component="VaultSupplyApyModal"
+            :modal-data="supplyApyModalData"
+            aria-label="Show supply APY rewards breakdown"
+          >
+            <SvgIcon
+              class="!w-20 !h-20 text-accent-500 cursor-pointer"
+              name="sparks"
+            />
+          </UiModalPreviewTrigger>
+          {{ formatNumber(supplyApyWithRewards) }}%
+        </span>
+      </VaultOverviewLabelValue>
+    </VaultOverviewAccordionSection>
 
     <!-- Risk Parameters -->
-    <div
-      class="bg-surface-secondary rounded-xl flex flex-col gap-24 p-24 shadow-card"
+    <VaultOverviewAccordionSection
+      title="Risk parameters"
+      :default-open="false"
+      content-class="flex flex-col items-start gap-24"
     >
-      <p class="text-h3 text-content-primary">
-        Risk parameters
-      </p>
-      <div class="flex flex-col items-start gap-24">
-        <VaultOverviewLabelValue
-          label="Supply cap"
-          orientation="horizontal"
-        >
-          <div class="flex gap-4 items-center">
-            <span>
-              {{ supplyCapDisplay }}
-              <span v-if="vault.supplyCap && vault.supplyCap < maxUint256 && vault.supplyCap > 0n">
-                ({{ compactNumber(supplyCapPercentageDisplay, 2) }}%)
-              </span>
+      <VaultOverviewLabelValue
+        label="Supply cap"
+        orientation="horizontal"
+      >
+        <div class="flex gap-4 items-center">
+          <span>
+            {{ supplyCapDisplay }}
+            <span v-if="vault.supplyCap && vault.supplyCap < maxUint256 && vault.supplyCap > 0n">
+              ({{ compactNumber(supplyCapPercentageDisplay, 2) }}%)
             </span>
-            <UiRadialProgress
-              v-if="vault.supplyCap && vault.supplyCap < maxUint256 && vault.supplyCap > 0n"
-              :value="supplyCapPercentageDisplay"
-              :max="100"
-            />
-          </div>
-        </VaultOverviewLabelValue>
-        <VaultOverviewLabelValue
-          label="Share token exchange rate"
-          orientation="horizontal"
-        >
-          <template v-if="shareTokenExchangeRate !== undefined">
-            {{ formatNumber(nanoToValue(shareTokenExchangeRate, vault.asset.decimals), 6, 2) }}
-          </template>
-          <template v-else>
-            -
-          </template>
-        </VaultOverviewLabelValue>
-      </div>
-    </div>
+          </span>
+          <UiRadialProgress
+            v-if="vault.supplyCap && vault.supplyCap < maxUint256 && vault.supplyCap > 0n"
+            :value="supplyCapPercentageDisplay"
+            :max="100"
+          />
+        </div>
+      </VaultOverviewLabelValue>
+      <VaultOverviewLabelValue
+        label="Share token exchange rate"
+        orientation="horizontal"
+      >
+        <template v-if="shareTokenExchangeRate !== undefined">
+          {{ formatNumber(nanoToValue(shareTokenExchangeRate, vault.asset.decimals), 6, 2) }}
+        </template>
+        <template v-else>
+          -
+        </template>
+      </VaultOverviewLabelValue>
+    </VaultOverviewAccordionSection>
 
     <!-- Addresses -->
-    <div
-      class="bg-surface-secondary rounded-xl flex flex-col gap-24 p-24 shadow-card"
+    <VaultOverviewAccordionSection
+      title="Addresses"
+      :default-open="false"
+      content-class="flex flex-col items-start gap-24"
     >
-      <p class="text-h3 text-content-primary">
-        Addresses
-      </p>
-      <div class="flex flex-col items-start gap-24">
-        <VaultOverviewLabelValue
-          :label="`${vault.asset.symbol} token`"
-          orientation="horizontal"
-        >
-          <div class="flex gap-4 items-center">
-            <NuxtLink
-              :to="getExplorerAddressLink(vault.asset.address)"
-              class="text-accent-600 underline cursor-pointer hover:text-accent-500"
-              target="_blank"
-            >
-              {{ getSpecialAddressLabel(vault.asset.address) || shortenAddress(vault.asset.address) }}
-            </NuxtLink>
-            <button
-              class="text-content-muted cursor-pointer outline-none hover:text-content-secondary active:text-content-primary"
-              @click="onCopyClick(vault.asset.address)"
-            >
-              <SvgIcon
-                class="!w-18 !h-18"
-                name="copy"
-              />
-            </button>
-          </div>
-        </VaultOverviewLabelValue>
-        <VaultOverviewLabelValue
-          :label="`${vault.asset.symbol} vault`"
-          orientation="horizontal"
-        >
-          <div class="flex gap-4 items-center">
-            <NuxtLink
-              :to="getExplorerAddressLink(vault.address)"
-              class="text-accent-600 underline cursor-pointer hover:text-accent-500"
-              target="_blank"
-            >
-              {{ getSpecialAddressLabel(vault.address) || shortenAddress(vault.address) }}
-            </NuxtLink>
-            <button
-              class="text-content-muted cursor-pointer outline-none hover:text-content-secondary active:text-content-primary"
-              @click="onCopyClick(vault.address)"
-            >
-              <SvgIcon
-                class="!w-18 !h-18"
-                name="copy"
-              />
-            </button>
-          </div>
-        </VaultOverviewLabelValue>
-        <VaultOverviewLabelValue
-          v-if="vault.governor && vault.governor !== '0x0000000000000000000000000000000000000000'"
-          label="Risk manager"
-          orientation="horizontal"
-        >
-          <div class="flex gap-4 items-center">
-            <NuxtLink
-              :to="getExplorerAddressLink(vault.governor)"
-              class="text-accent-600 underline cursor-pointer hover:text-accent-500"
-              target="_blank"
-            >
-              {{ getSpecialAddressLabel(vault.governor) || shortenAddress(vault.governor) }}
-            </NuxtLink>
-            <button
-              class="text-content-muted cursor-pointer outline-none hover:text-content-secondary active:text-content-primary"
-              @click="onCopyClick(vault.governor)"
-            >
-              <SvgIcon
-                class="!w-18 !h-18"
-                name="copy"
-              />
-            </button>
-          </div>
-        </VaultOverviewLabelValue>
-      </div>
-    </div>
+      <VaultOverviewLabelValue
+        :label="`${vault.asset.symbol} token`"
+        orientation="horizontal"
+      >
+        <div class="flex gap-4 items-center">
+          <NuxtLink
+            :to="getExplorerAddressLink(vault.asset.address)"
+            class="text-accent-600 underline cursor-pointer hover:text-accent-500"
+            target="_blank"
+          >
+            {{ getSpecialAddressLabel(vault.asset.address) || shortenAddress(vault.asset.address) }}
+          </NuxtLink>
+          <button
+            class="text-content-muted cursor-pointer outline-none hover:text-content-secondary active:text-content-primary"
+            @click="onCopyClick(vault.asset.address)"
+          >
+            <SvgIcon
+              class="!w-18 !h-18"
+              name="copy"
+            />
+          </button>
+        </div>
+      </VaultOverviewLabelValue>
+      <VaultOverviewLabelValue
+        :label="`${vault.asset.symbol} vault`"
+        orientation="horizontal"
+      >
+        <div class="flex gap-4 items-center">
+          <NuxtLink
+            :to="getExplorerAddressLink(vault.address)"
+            class="text-accent-600 underline cursor-pointer hover:text-accent-500"
+            target="_blank"
+          >
+            {{ getSpecialAddressLabel(vault.address) || shortenAddress(vault.address) }}
+          </NuxtLink>
+          <button
+            class="text-content-muted cursor-pointer outline-none hover:text-content-secondary active:text-content-primary"
+            @click="onCopyClick(vault.address)"
+          >
+            <SvgIcon
+              class="!w-18 !h-18"
+              name="copy"
+            />
+          </button>
+        </div>
+      </VaultOverviewLabelValue>
+      <VaultOverviewLabelValue
+        v-if="vault.governor && vault.governor !== '0x0000000000000000000000000000000000000000'"
+        label="Risk manager"
+        orientation="horizontal"
+      >
+        <div class="flex gap-4 items-center">
+          <NuxtLink
+            :to="getExplorerAddressLink(vault.governor)"
+            class="text-accent-600 underline cursor-pointer hover:text-accent-500"
+            target="_blank"
+          >
+            {{ getSpecialAddressLabel(vault.governor) || shortenAddress(vault.governor) }}
+          </NuxtLink>
+          <button
+            class="text-content-muted cursor-pointer outline-none hover:text-content-secondary active:text-content-primary"
+            @click="onCopyClick(vault.governor)"
+          >
+            <SvgIcon
+              class="!w-18 !h-18"
+              name="copy"
+            />
+          </button>
+        </div>
+      </VaultOverviewLabelValue>
+    </VaultOverviewAccordionSection>
   </div>
 </template>
diff --git a/components/entities/vault/overview/SecuritizeVaultOverviewPair.vue b/components/entities/vault/overview/SecuritizeVaultOverviewPair.vue
index 7b683a2e..b2132826 100644
--- a/components/entities/vault/overview/SecuritizeVaultOverviewPair.vue
+++ b/components/entities/vault/overview/SecuritizeVaultOverviewPair.vue
@@ -8,17 +8,17 @@ defineProps<{ pair: SecuritizeBorrowVaultPair, desktopOverview?: boolean }>()
 <template>
   <div
     class="flex flex-col"
-    :class="[!desktopOverview ? 'gap-12' : '']"
+    :class="[desktopOverview ? 'gap-16' : 'gap-12']"
   >
     <SecuritizeVaultOverviewPairBlockGeneral
       :pair="pair"
-      :class="[desktopOverview ? 'py-16 [&:first-child]:!pt-0 px-0' : '']"
+      :default-open="true"
     />
     <!-- Oracle adapters should always come from the liability (borrow) vault -->
     <VaultOverviewBlockOracleAdapters
       :vault="pair.borrow"
       :collateral-vaults="[pair.collateral as unknown as EVault]"
-      :class="[desktopOverview ? 'py-16 [&:first-child]:!pt-0 px-0' : '']"
+      :default-open="false"
     />
   </div>
 </template>
diff --git a/components/entities/vault/overview/SecuritizeVaultOverviewPairBlockGeneral.vue b/components/entities/vault/overview/SecuritizeVaultOverviewPairBlockGeneral.vue
index a7c4fa28..68379845 100644
--- a/components/entities/vault/overview/SecuritizeVaultOverviewPairBlockGeneral.vue
+++ b/components/entities/vault/overview/SecuritizeVaultOverviewPairBlockGeneral.vue
@@ -9,7 +9,7 @@ import type { EVaultCollateral } from '@eulerxyz/euler-v2-sdk'
 import { formatNumber, formatSignificant } from '~/utils/string-utils'
 import { areTokenAddressesCorrelatedByTags } from '~/utils/token-categories'
 
-const { pair } = defineProps<{ pair: SecuritizeBorrowVaultPair }>()
+const { pair, defaultOpen = true } = defineProps<{ pair: SecuritizeBorrowVaultPair, defaultOpen?: boolean }>()
 const { getTokenCategoryTags } = useTokenList()
 
 const currentLiquidationLTV = computed(() => pair.ltv.currentLiquidationLTV)
@@ -98,10 +98,11 @@ const onRampDownInfoIconClick = (event: MouseEvent, pair: EVaultCollateral) => {
 </script>
 
 <template>
-  <div class="bg-body rounded-16 flex flex-col gap-24 p-24">
-    <p class="text-h3 text-white">
-      Overview
-    </p>
+  <VaultOverviewAccordionSection
+    title="Overview"
+    :default-open="defaultOpen"
+    content-class="flex flex-col items-start gap-24"
+  >
     <div class="flex flex-col items-start gap-24">
       <VaultOverviewLabelValue
         label="Price"
@@ -111,7 +112,7 @@ const onRampDownInfoIconClick = (event: MouseEvent, pair: EVaultCollateral) => {
           <span class="text-content-primary">{{ priceInvert.displaySymbol }}</span>
           <button
             type="button"
-            class="ml-4 text-content-primary hover:text-white transition-colors inline-flex"
+            class="ml-4 text-content-primary hover:text-accent-600 transition-colors inline-flex"
             @click.stop="priceInvert.toggle"
           >
             <SvgIcon
@@ -227,5 +228,5 @@ const onRampDownInfoIconClick = (event: MouseEvent, pair: EVaultCollateral) => {
         </span>
       </VaultOverviewLabelValue>
     </div>
-  </div>
+  </VaultOverviewAccordionSection>
 </template>
diff --git a/components/entities/vault/overview/VaultOverview.vue b/components/entities/vault/overview/VaultOverview.vue
index f5febdec..c1af975d 100644
--- a/components/entities/vault/overview/VaultOverview.vue
+++ b/components/entities/vault/overview/VaultOverview.vue
@@ -17,32 +17,39 @@ const isCyclicalIRM = computed(() => isVaultCyclicalNote(vault.address))
   >
     <VaultOverviewBlockGeneral
       :vault="vault"
+      :default-open="true"
     />
 
     <VaultOverviewBlockStats
       :vault="vault"
+      :default-open="true"
     />
 
     <VaultOverviewBlockRiskParameters
       :vault="vault"
+      :default-open="false"
     />
 
     <VaultOverviewBlockBorrow
       :vault="vault"
+      :default-open="false"
       @vault-click="(address: string) => emits('vault-click', address)"
     />
 
     <LazyVaultOverviewBlockCyclicalIRM
       v-if="isCyclicalIRM"
       :vault="vault"
+      :default-open="false"
     />
     <LazyVaultOverviewBlockIRM
       v-else
       :vault="vault"
+      :default-open="false"
     />
 
     <VaultOverviewBlockAddresses
       :vault="vault"
+      :default-open="false"
     />
   </div>
 </template>
diff --git a/components/entities/vault/overview/VaultOverviewAccordionSection.vue b/components/entities/vault/overview/VaultOverviewAccordionSection.vue
new file mode 100644
index 00000000..e8fa1dc9
--- /dev/null
+++ b/components/entities/vault/overview/VaultOverviewAccordionSection.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  title: string
+  defaultOpen?: boolean
+  contentClass?: string
+  hasActions?: boolean
+}>(), {
+  defaultOpen: true,
+  contentClass: 'flex flex-col gap-24',
+  hasActions: true,
+})
+
+const isOpen = ref(props.defaultOpen)
+const panelId = useId()
+
+const toggle = () => {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<template>
+  <section class="bg-surface-secondary rounded-xl shadow-card">
+    <div class="flex items-center gap-16">
+      <button
+        type="button"
+        class="flex min-w-0 items-center justify-between gap-16 text-left transition-colors hover:bg-card-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-inset"
+        :class="$slots.actions && hasActions ? 'flex-1 p-24 pr-0' : 'w-full p-24'"
+        :aria-expanded="isOpen"
+        :aria-controls="panelId"
+        @click="toggle"
+      >
+        <span class="text-h3 text-content-primary">
+          {{ title }}
+        </span>
+        <SvgIcon
+          name="arrow-down"
+          class="!w-20 !h-20 shrink-0 text-content-tertiary transition-transform"
+          :class="{ 'rotate-180': isOpen }"
+          aria-hidden="true"
+        />
+      </button>
+      <div
+        v-if="$slots.actions && hasActions"
+        class="shrink-0 pr-24"
+      >
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <div
+      v-if="isOpen"
+      :id="panelId"
+      class="px-24 pb-24"
+    >
+      <div :class="contentClass">
+        <slot />
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/components/entities/vault/overview/VaultOverviewBlockAddresses.vue b/components/entities/vault/overview/VaultOverviewBlockAddresses.vue
index 3c0c8c2b..cf5a9ba3 100644
--- a/components/entities/vault/overview/VaultOverviewBlockAddresses.vue
+++ b/components/entities/vault/overview/VaultOverviewBlockAddresses.vue
@@ -5,7 +5,7 @@ import { getSpecialAddressLabel } from '~/utils/special-addresses'
 import { getVaultHookTarget } from '~/utils/vault-hooks'
 import { isVaultBorrowable } from '~/utils/vault/classification'
 
-const { vault } = defineProps<{ vault: EVault }>()
+const { vault, defaultOpen = true } = defineProps<{ vault: EVault, defaultOpen?: boolean }>()
 
 const { chainId } = useEulerAddresses()
 
@@ -88,49 +88,48 @@ const getExplorerAddressLink = (address: string) => getExplorerLink(address, cha
 </script>
 
 <template>
-  <div class="bg-surface-secondary rounded-xl flex flex-col gap-24 p-24 shadow-card">
-    <p class="text-h3 text-content-primary">
-      Addresses
-    </p>
-    <div class="flex flex-col items-start gap-24">
-      <VaultOverviewLabelValue
-        v-for="infoItem in vaultAddresesInfo"
-        :key="infoItem.title"
-        :label="infoItem.title"
-        orientation="horizontal"
+  <VaultOverviewAccordionSection
+    title="Addresses"
+    :default-open="defaultOpen"
+    content-class="flex flex-col items-start gap-24"
+  >
+    <VaultOverviewLabelValue
+      v-for="infoItem in vaultAddresesInfo"
+      :key="infoItem.title"
+      :label="infoItem.title"
+      orientation="horizontal"
+    >
+      <template
+        v-if="infoItem.title === 'Unit of account'"
+        #label
       >
-        <template
-          v-if="infoItem.title === 'Unit of account'"
-          #label
+        <span class="flex items-center gap-4">
+          Unit of account
+          <UiFootnote
+            title="Unit of Account"
+            text="The reference currency used to denominate prices for LTV and health calculations in this vault. Typically USD or ETH. All collateral and debt values are converted to this unit when determining account health."
+            class="[--ui-footnote-icon-color:var(--text-muted)] hover:[--ui-footnote-icon-color:var(--text-secondary)]"
+          />
+        </span>
+      </template>
+      <div class="flex gap-4 items-center">
+        <NuxtLink
+          :to="getExplorerAddressLink(infoItem.address)"
+          class="text-accent-600 underline cursor-pointer hover:text-accent-500"
+          target="_blank"
         >
-          <span class="flex items-center gap-4">
-            Unit of account
-            <UiFootnote
-              title="Unit of Account"
-              text="The reference currency used to denominate prices for LTV and health calculations in this vault. Typically USD or ETH. All collateral and debt values are converted to this unit when determining account health."
-              class="[--ui-footnote-icon-color:var(--text-muted)] hover:[--ui-footnote-icon-color:var(--text-secondary)]"
-            />
-          </span>
-        </template>
-        <div class="flex gap-4 items-center">
-          <NuxtLink
-            :to="getExplorerAddressLink(infoItem.address)"
-            class="text-accent-600 underline cursor-pointer hover:text-accent-500"
-            target="_blank"
-          >
-            {{ getSpecialAddressLabel(infoItem.address) || shortenAddress(infoItem.address) }}
-          </NuxtLink>
-          <button
-            class="text-content-muted cursor-pointer outline-none hover:text-content-secondary active:text-content-primary"
-            @click="onCopyClick(infoItem.address)"
-          >
-            <SvgIcon
-              class="!w-18 !h-18"
-              name="copy"
-            />
-          </button>
-        </div>
-      </VaultOverviewLabelValue>
-    </div>
-  </div>
+          {{ getSpecialAddressLabel(infoItem.address) || shortenAddress(infoItem.address) }}
+        </NuxtLink>
+        <button
+          class="text-content-muted cursor-pointer outline-none hover:text-content-secondary active:text-content-primary"
+          @click="onCopyClick(infoItem.address)"
+        >
+          <SvgIcon
+            class="!w-18 !h-18"
+            name="copy"
+          />
+        </button>
+      </div>
+    </VaultOverviewLabelValue>
+  </VaultOverviewAccordionSection>
 </template>
diff --git a/components/entities/vault/overview/VaultOverviewBlockBorrow.vue b/components/entities/vault/overview/VaultOverviewBlockBorrow.vue
index 8f5357a7..38ae38cc 100644
--- a/components/entities/vault/overview/VaultOverviewBlockBorrow.vue
+++ b/components/entities/vault/overview/VaultOverviewBlockBorrow.vue
@@ -9,7 +9,7 @@ import { formatNumber } from '~/utils/string-utils'
 const emits = defineEmits<{
   'vault-click': [address: string]
 }>()
-const { vault } = defineProps<{ vault: EVault }>()
+const { vault, defaultOpen = true } = defineProps<{ vault: EVault, defaultOpen?: boolean }>()
 const { get: registryGet } = useVaultRegistry()
 
 const onCollateralClick = (address: string) => {
@@ -48,14 +48,13 @@ const allCollateralPairs = computed(() =>
 </script>
 
 <template>
-  <div
+  <VaultOverviewAccordionSection
     v-if="allCollateralPairs.length"
-    class="bg-surface-secondary rounded-xl flex flex-col gap-24 p-24 shadow-card"
+    title="Collateral exposure"
+    :default-open="defaultOpen"
+    content-class="flex flex-col gap-24"
   >
     <div>
-      <p class="text-h3 text-content-primary mb-12">
-        Collateral exposure
-      </p>
       <p class="text-content-secondary">
         Deposits in this vault can be borrowed.
         Please make sure you're comfortable accepting the collaterals
@@ -121,5 +120,5 @@ const allCollateralPairs = computed(() =>
         </div>
       </div>
     </div>
-  </div>
+  </VaultOverviewAccordionSection>
 </template>
diff --git a/components/entities/vault/overview/VaultOverviewBlockCyclicalIRM.vue b/components/entities/vault/overview/VaultOverviewBlockCyclicalIRM.vue
index 33b63672..de7c87ae 100644
--- a/components/entities/vault/overview/VaultOverviewBlockCyclicalIRM.vue
+++ b/components/entities/vault/overview/VaultOverviewBlockCyclicalIRM.vue
@@ -10,7 +10,7 @@ import { useVaultRegistry } from '~/composables/useVaultRegistry'
 import { zeroAddress, formatUnits } from 'viem'
 import { INTEREST_RATE_MODEL_TYPE, SECONDS_IN_YEAR } from '~/entities/constants'
 
-const { vault } = defineProps<{ vault: EVault }>()
+const { vault, defaultOpen = true } = defineProps<{ vault: EVault, defaultOpen?: boolean }>()
 
 const { get: registryGet } = useVaultRegistry()
 
@@ -282,16 +282,15 @@ const formatDuration = (seconds: bigint): string => {
 </script>
 
 <template>
-  <section
+  <VaultOverviewAccordionSection
     v-if="hasValidIRM && currentCycle"
-    class="bg-surface-secondary rounded-xl flex flex-col gap-24 p-24 shadow-card"
+    title="Interest rate model"
+    :default-open="defaultOpen"
+    content-class="flex flex-col gap-24"
   >
-    <header class="flex items-center justify-between gap-16">
-      <h2 class="text-h3 text-content-primary">
-        Interest rate model
-      </h2>
+    <template #actions>
       <CyclicalNoteBadge />
-    </header>
+    </template>
 
     <div
       v-if="currentCycle.preStartTimestamp !== null"
@@ -398,7 +397,7 @@ const formatDuration = (seconds: bigint): string => {
         </span>
       </div>
     </footer>
-  </section>
+  </VaultOverviewAccordionSection>
 </template>
 
 <style lang="scss" scoped>
diff --git a/components/entities/vault/overview/VaultOverviewBlockGeneral.vue b/components/entities/vault/overview/VaultOverviewBlockGeneral.vue
index 9d542bc8..c8aa9b65 100644
--- a/components/entities/vault/overview/VaultOverviewBlockGeneral.vue
+++ b/components/entities/vault/overview/VaultOverviewBlockGeneral.vue
@@ -14,7 +14,7 @@ import { formatMarketAvailability } from '~/utils/vault-display'
 import type { VaultTypeBadge } from '~/composables/useVaultTypeBadges'
 import { AccessControlBadge, CyclicalNoteBadge, GovernanceLimitedBadge, KeyringBadge } from '#components'
 
-const { vault } = defineProps<{ vault: EVault }>()
+const { vault, defaultOpen = true } = defineProps<{ vault: EVault, defaultOpen?: boolean }>()
 const route = useRoute()
 const { enableEntityBranding: enableEntityBrandingDisplay, enableVaultType: enableVaultTypeDisplay } = useDeployConfig()
 
@@ -100,151 +100,150 @@ watchEffect(async () => {
 </script>
 
 <template>
-  <div class="bg-surface-secondary rounded-xl flex flex-col gap-24 p-24 shadow-card">
-    <p class="text-h3 text-content-primary">
-      Overview
-    </p>
-    <div class="flex flex-col gap-20">
-      <VaultDeprecationBanner
-        v-if="isDeprecated"
-        :reason="deprecationReason"
-      />
-      <div
-        v-if="isRestricted"
-        class="w-full rounded-12 p-16 bg-warning-100 text-warning-500"
-      >
-        <div class="flex items-center gap-8">
-          <SvgIcon
-            name="warning"
-            class="!w-20 !h-20 flex-shrink-0"
-          />
-          <p class="text-p3 text-warning-500">
-            This vault is not available in your region.
-          </p>
-        </div>
+  <VaultOverviewAccordionSection
+    title="Overview"
+    :default-open="defaultOpen"
+    content-class="flex flex-col gap-20"
+  >
+    <VaultDeprecationBanner
+      v-if="isDeprecated"
+      :reason="deprecationReason"
+    />
+    <div
+      v-if="isRestricted"
+      class="w-full rounded-12 p-16 bg-warning-100 text-warning-500"
+    >
+      <div class="flex items-center gap-8">
+        <SvgIcon
+          name="warning"
+          class="!w-20 !h-20 flex-shrink-0"
+        />
+        <p class="text-p3 text-warning-500">
+          This vault is not available in your region.
+        </p>
       </div>
-      <!-- eslint-disable vue/no-v-html -- trusted label content -->
-      <p
-        v-if="description"
-        class="text-p2 text-content-secondary auto-link"
-        v-html="autoLink(description)"
+    </div>
+    <!-- eslint-disable vue/no-v-html -- trusted label content -->
+    <p
+      v-if="description"
+      class="text-p2 text-content-secondary auto-link"
+      v-html="autoLink(description)"
+    />
+    <!-- eslint-enable vue/no-v-html -->
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-32 gap-y-24">
+      <VaultOverviewLabelValue
+        label="Price"
+        :value="priceDisplay"
       />
-      <!-- eslint-enable vue/no-v-html -->
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-32 gap-y-24">
-        <VaultOverviewLabelValue
-          label="Price"
-          :value="priceDisplay"
+      <VaultOverviewLabelValue
+        v-if="enableVaultTypeDisplay"
+        label="Vault type"
+      >
+        <VaultTypeChip
+          :vault="vault"
+          :type="governanceType"
+          nudge
+          class="w-fit"
         />
-        <VaultOverviewLabelValue
-          v-if="enableVaultTypeDisplay"
-          label="Vault type"
-        >
-          <VaultTypeChip
-            :vault="vault"
-            :type="governanceType"
-            nudge
-            class="w-fit"
-          />
-        </VaultOverviewLabelValue>
-        <VaultOverviewLabelValue label="Market">
-          <div class="flex min-h-28 items-center">
-            <NuxtLink
-              v-if="marketProductKey"
-              :to="{ name: 'explore-market', params: { market: marketProductKey }, query: { network: route.query.network } }"
-              class="text-p2 text-content-primary hover:text-accent-600 underline transition-colors"
-            >
-              {{ marketProductName }}
-            </NuxtLink>
-            <template v-else>
-              {{ marketProductName || '-' }}
-            </template>
-          </div>
-        </VaultOverviewLabelValue>
-        <VaultOverviewLabelValue
-          v-if="enableEntityBrandingDisplay"
-          label="Risk manager"
-        >
-          <VaultTypeChip
-            v-if="!isGovernorVerified"
-            :vault="vault"
-            type="unknown"
-            nudge
-            class="w-fit"
-          />
-          <div
-            v-else-if="entities.length"
-            class="flex flex-col gap-8"
+      </VaultOverviewLabelValue>
+      <VaultOverviewLabelValue label="Market">
+        <div class="flex min-h-28 items-center">
+          <NuxtLink
+            v-if="marketProductKey"
+            :to="{ name: 'explore-market', params: { market: marketProductKey }, query: { network: route.query.network } }"
+            class="text-p2 text-content-primary hover:text-accent-600 underline transition-colors"
           >
-            <div
-              v-for="(entity, idx) in entities"
-              :key="idx"
-              class="flex items-center gap-8"
-              :class="{ 'opacity-20': isGovernanceLimited }"
-            >
-              <BaseAvatar
-                :label="entity.name"
-                :src="getEulerLabelEntityLogo(entity.logo)"
-                class="!w-28 !h-28"
-              />
-              <a
-                v-if="entity.url"
-                :href="entity.url"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-p2 text-content-primary hover:text-accent-600 underline transition-colors"
-              >{{ entity.name }}</a>
-              <span
-                v-else
-                class="text-p2 text-content-primary"
-              >{{ entity.name }}</span>
-            </div>
-          </div>
-          <div v-else>
-            -
-          </div>
-        </VaultOverviewLabelValue>
-        <VaultOverviewLabelValue label="Can be borrowed">
-          <div class="flex items-center gap-8">
-            <UiIcon :name="borrowCount ? 'green-tick' : 'red-cross'" />
-            <span class="text-p2 text-content-primary">
-              {{ formatMarketAvailability(borrowCount) }}
-            </span>
-          </div>
-        </VaultOverviewLabelValue>
-        <VaultOverviewLabelValue label="Can be used as collateral">
-          <div class="flex items-center gap-8">
-            <UiIcon :name="collateralCount ? 'green-tick' : 'red-cross'" />
-            <span class="text-p2 text-content-primary">
-              {{ formatMarketAvailability(collateralCount) }}
-            </span>
-          </div>
-        </VaultOverviewLabelValue>
-      </div>
-      <div
-        v-if="propertyBadges.length"
-        class="flex flex-col gap-20 pt-8"
-      >
-        <div class="flex items-center gap-12">
-          <p class="text-p4 uppercase tracking-[0.14em] text-content-muted whitespace-nowrap">
-            Types & properties
-          </p>
-          <div class="h-2 flex-1 bg-[var(--border-subtle)] opacity-70" />
+            {{ marketProductName }}
+          </NuxtLink>
+          <template v-else>
+            {{ marketProductName || '-' }}
+          </template>
         </div>
-        <div class="flex flex-col">
+      </VaultOverviewLabelValue>
+      <VaultOverviewLabelValue
+        v-if="enableEntityBrandingDisplay"
+        label="Risk manager"
+      >
+        <VaultTypeChip
+          v-if="!isGovernorVerified"
+          :vault="vault"
+          type="unknown"
+          nudge
+          class="w-fit"
+        />
+        <div
+          v-else-if="entities.length"
+          class="flex flex-col gap-8"
+        >
           <div
-            v-for="property in propertyBadges"
-            :key="property.label"
-            class="flex w-full flex-col items-start gap-8 border-t border-[var(--border-subtle)] py-16 first:border-t-0 first:pt-0 last:pb-0"
+            v-for="(entity, idx) in entities"
+            :key="idx"
+            class="flex items-center gap-8"
+            :class="{ 'opacity-20': isGovernanceLimited }"
           >
-            <component
-              :is="property.component"
+            <BaseAvatar
+              :label="entity.name"
+              :src="getEulerLabelEntityLogo(entity.logo)"
+              class="!w-28 !h-28"
             />
-            <span class="text-p3 text-content-tertiary">
-              {{ property.description }}
-            </span>
+            <a
+              v-if="entity.url"
+              :href="entity.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-p2 text-content-primary hover:text-accent-600 underline transition-colors"
+            >{{ entity.name }}</a>
+            <span
+              v-else
+              class="text-p2 text-content-primary"
+            >{{ entity.name }}</span>
           </div>
         </div>
+        <div v-else>
+          -
+        </div>
+      </VaultOverviewLabelValue>
+      <VaultOverviewLabelValue label="Can be borrowed">
+        <div class="flex items-center gap-8">
+          <UiIcon :name="borrowCount ? 'green-tick' : 'red-cross'" />
+          <span class="text-p2 text-content-primary">
+            {{ formatMarketAvailability(borrowCount) }}
+          </span>
+        </div>
+      </VaultOverviewLabelValue>
+      <VaultOverviewLabelValue label="Can be used as collateral">
+        <div class="flex items-center gap-8">
+          <UiIcon :name="collateralCount ? 'green-tick' : 'red-cross'" />
+          <span class="text-p2 text-content-primary">
+            {{ formatMarketAvailability(collateralCount) }}
+          </span>
+        </div>
+      </VaultOverviewLabelValue>
+    </div>
+    <div
+      v-if="propertyBadges.length"
+      class="flex flex-col gap-20 pt-8"
+    >
+      <div class="flex items-center gap-12">
+        <p class="text-p4 uppercase tracking-[0.14em] text-content-muted whitespace-nowrap">
+          Types & properties
+        </p>
+        <div class="h-2 flex-1 bg-[var(--border-subtle)] opacity-70" />
+      </div>
+      <div class="flex flex-col">
+        <div
+          v-for="property in propertyBadges"
+          :key="property.label"
+          class="flex w-full flex-col items-start gap-8 border-t border-[var(--border-subtle)] py-16 first:border-t-0 first:pt-0 last:pb-0"
+        >
+          <component
+            :is="property.component"
+          />
+          <span class="text-p3 text-content-tertiary">
+            {{ property.description }}
+          </span>
+        </div>
       </div>
     </div>
-  </div>
+  </VaultOverviewAccordionSection>
 </template>
diff --git a/components/entities/vault/overview/VaultOverviewBlockIRM.vue b/components/entities/vault/overview/VaultOverviewBlockIRM.vue
index 06e0ecb0..b5423cf0 100644
--- a/components/entities/vault/overview/VaultOverviewBlockIRM.vue
+++ b/components/entities/vault/overview/VaultOverviewBlockIRM.vue
@@ -32,7 +32,7 @@ ChartJS.register(
   annotationPlugin,
 )
 
-const { vault } = defineProps<{ vault: EVault }>()
+const { vault, defaultOpen = true } = defineProps<{ vault: EVault, defaultOpen?: boolean }>()
 
 const chartData = shallowRef<ChartData<'line', number[], string> | null>(null)
 const chartOptions = shallowRef<ChartOptions<'line'> | null>(null)
@@ -612,14 +612,14 @@ watch(isDark, async () => {
 </script>
 
 <template>
-  <div
+  <VaultOverviewAccordionSection
     v-if="hasValidIRM"
-    class="bg-surface-secondary rounded-xl flex flex-col gap-16 p-24 shadow-card"
+    title="Interest rate model"
+    :default-open="defaultOpen"
+    :has-actions="!!irmTooltip"
+    content-class="flex flex-col gap-16"
   >
-    <header class="flex items-center justify-between gap-16">
-      <h2 class="text-h3 text-content-primary">
-        Interest rate model
-      </h2>
+    <template #actions>
       <div
         v-if="irmTooltip"
         class="flex shrink-0 items-center gap-8"
@@ -639,7 +639,7 @@ watch(isDark, async () => {
           class="[--ui-footnote-icon-color:var(--text-muted)] hover:[--ui-footnote-icon-color:var(--text-secondary)]"
         />
       </div>
-    </header>
+    </template>
 
     <div class="relative w-full min-h-400">
       <div
@@ -676,5 +676,5 @@ watch(isDark, async () => {
         :value="param.value"
       />
     </div>
-  </div>
+  </VaultOverviewAccordionSection>
 </template>
diff --git a/components/entities/vault/overview/VaultOverviewBlockOracleAdapters.vue b/components/entities/vault/overview/VaultOverviewBlockOracleAdapters.vue
index 150073bd..5b3435c9 100644
--- a/components/entities/vault/overview/VaultOverviewBlockOracleAdapters.vue
+++ b/components/entities/vault/overview/VaultOverviewBlockOracleAdapters.vue
@@ -17,6 +17,7 @@ const props = defineProps<{
   vault?: EVault
   vaults?: EVault[]
   collateralVaults?: (EVault | SecuritizeCollateralVault)[]
+  defaultOpen?: boolean
 }>()
 const { oracleAdapters, loadOracleAdapter } = useEulerLabels()
 const { chainId } = useEulerAddresses()
@@ -301,10 +302,11 @@ const onTooltipMouseLeave = () => {
 </script>
 
 <template>
-  <div class="bg-surface-secondary rounded-xl flex flex-col gap-24 p-24 shadow-card">
-    <p class="text-h3 text-content-primary">
-      Oracles
-    </p>
+  <VaultOverviewAccordionSection
+    title="Oracles"
+    :default-open="props.defaultOpen ?? true"
+    content-class="flex flex-col gap-24"
+  >
     <div
       v-if="!adapterViews.length"
       class="text-p3 text-content-tertiary"
@@ -460,7 +462,7 @@ const onTooltipMouseLeave = () => {
         </div>
       </div>
     </div>
-  </div>
+  </VaultOverviewAccordionSection>
 
   <Teleport to="body">
     <template v-if="hoveredChecksAdapter?.checks?.length">
diff --git a/components/entities/vault/overview/VaultOverviewBlockRiskParameters.vue b/components/entities/vault/overview/VaultOverviewBlockRiskParameters.vue
index 26a641ae..463ef411 100644
--- a/components/entities/vault/overview/VaultOverviewBlockRiskParameters.vue
+++ b/components/entities/vault/overview/VaultOverviewBlockRiskParameters.vue
@@ -10,7 +10,7 @@ import { isVaultBorrowable } from '~/utils/vault/classification'
 import { formatLiquidationBonusRange } from '~/utils/vault/liquidation'
 import { VaultHooksInfoModal } from '#components'
 
-const { vault } = defineProps<{ vault: EVault }>()
+const { vault, defaultOpen = true } = defineProps<{ vault: EVault, defaultOpen?: boolean }>()
 
 const { getVaultCategory } = useVaultRegistry()
 
@@ -87,113 +87,112 @@ const hooksModalData = computed(() => ({
 </script>
 
 <template>
-  <div class="bg-surface-secondary rounded-xl flex flex-col gap-24 p-24 shadow-card">
-    <p class="text-h3 text-content-primary">
-      Risk parameters
-    </p>
-    <div class="flex flex-col items-start gap-24">
-      <VaultOverviewLabelValue
-        v-if="isBorrowable"
-        :value="liquidationBonusRange"
-        orientation="horizontal"
-      >
-        <template #label>
-          <span class="flex items-center gap-4">
-            Liquidation bonus
-            <UiFootnote
-              title="Liquidation Bonus"
-              text="The discount a liquidator receives on collateral when liquidating an unhealthy position. The actual bonus scales dynamically from 0% up to this maximum based on how unhealthy the position is. A more unhealthy position offers a larger bonus to incentivise faster liquidation."
-              class="[--ui-footnote-icon-color:var(--text-muted)] hover:[--ui-footnote-icon-color:var(--text-secondary)]"
-            />
-          </span>
-        </template>
-      </VaultOverviewLabelValue>
-      <VaultOverviewLabelValue
-        label="Supply cap"
-        orientation="horizontal"
-      >
-        <div class="flex gap-4 items-center">
-          <span>
-            {{ supplyCapDisplay }}
-            <span v-if="vault.caps.supplyCap < maxUint256">({{ compactNumber(supplyCapPercentageDisplay, 2) }}%)</span>
-          </span>
-          <UiRadialProgress
-            v-if="vault.caps.supplyCap < maxUint256"
-            :value="supplyCapPercentageDisplay"
-            :max="100"
+  <VaultOverviewAccordionSection
+    title="Risk parameters"
+    :default-open="defaultOpen"
+    content-class="flex flex-col items-start gap-24"
+  >
+    <VaultOverviewLabelValue
+      v-if="isBorrowable"
+      :value="liquidationBonusRange"
+      orientation="horizontal"
+    >
+      <template #label>
+        <span class="flex items-center gap-4">
+          Liquidation bonus
+          <UiFootnote
+            title="Liquidation Bonus"
+            text="The discount a liquidator receives on collateral when liquidating an unhealthy position. The actual bonus scales dynamically from 0% up to this maximum based on how unhealthy the position is. A more unhealthy position offers a larger bonus to incentivise faster liquidation."
+            class="[--ui-footnote-icon-color:var(--text-muted)] hover:[--ui-footnote-icon-color:var(--text-secondary)]"
           />
-        </div>
-      </VaultOverviewLabelValue>
-      <VaultOverviewLabelValue
-        v-if="isBorrowable"
-        label="Borrow cap"
-        orientation="horizontal"
-      >
-        <div class="flex gap-4 items-center">
-          <span>
-            {{ borrowCapDisplay }}
-            <span v-if="vault.caps.borrowCap < maxUint256">({{ compactNumber(borrowCapPercentageDisplay, 2) }}%)</span>
-          </span>
-          <UiRadialProgress
-            v-if="vault.caps.borrowCap < maxUint256"
-            :value="borrowCapPercentageDisplay"
-            :max="100"
+        </span>
+      </template>
+    </VaultOverviewLabelValue>
+    <VaultOverviewLabelValue
+      label="Supply cap"
+      orientation="horizontal"
+    >
+      <div class="flex gap-4 items-center">
+        <span>
+          {{ supplyCapDisplay }}
+          <span v-if="vault.caps.supplyCap < maxUint256">({{ compactNumber(supplyCapPercentageDisplay, 2) }}%)</span>
+        </span>
+        <UiRadialProgress
+          v-if="vault.caps.supplyCap < maxUint256"
+          :value="supplyCapPercentageDisplay"
+          :max="100"
+        />
+      </div>
+    </VaultOverviewLabelValue>
+    <VaultOverviewLabelValue
+      v-if="isBorrowable"
+      label="Borrow cap"
+      orientation="horizontal"
+    >
+      <div class="flex gap-4 items-center">
+        <span>
+          {{ borrowCapDisplay }}
+          <span v-if="vault.caps.borrowCap < maxUint256">({{ compactNumber(borrowCapPercentageDisplay, 2) }}%)</span>
+        </span>
+        <UiRadialProgress
+          v-if="vault.caps.borrowCap < maxUint256"
+          :value="borrowCapPercentageDisplay"
+          :max="100"
+        />
+      </div>
+    </VaultOverviewLabelValue>
+    <VaultOverviewLabelValue
+      v-if="showShareTokenExchangeRate"
+      label="Share token exchange rate"
+      orientation="horizontal"
+    >
+      <template v-if="shareTokenExchangeRate !== undefined">
+        {{ formatNumber(nanoToValue(shareTokenExchangeRate, vault.asset.decimals), 6, 2) }}
+      </template>
+      <template v-else>
+        -
+      </template>
+    </VaultOverviewLabelValue>
+    <VaultOverviewLabelValue
+      v-if="isBorrowable"
+      :value="vault.liquidation.socializeDebt ? 'Yes' : 'No'"
+      orientation="horizontal"
+    >
+      <template #label>
+        <span class="flex items-center gap-4">
+          Bad debt socialisation
+          <UiFootnote
+            title="Bad Debt Socialisation"
+            text="When enabled, if a liquidated position has remaining debt but no collateral left, the loss is spread across all depositors by reducing the share token value. This prevents bad debt from accumulating in the vault. When disabled, bad debt remains in the system indefinitely."
+            class="[--ui-footnote-icon-color:var(--text-muted)] hover:[--ui-footnote-icon-color:var(--text-secondary)]"
           />
-        </div>
-      </VaultOverviewLabelValue>
-      <VaultOverviewLabelValue
-        v-if="showShareTokenExchangeRate"
-        label="Share token exchange rate"
-        orientation="horizontal"
-      >
-        <template v-if="shareTokenExchangeRate !== undefined">
-          {{ formatNumber(nanoToValue(shareTokenExchangeRate, vault.asset.decimals), 6, 2) }}
-        </template>
-        <template v-else>
-          -
-        </template>
-      </VaultOverviewLabelValue>
-      <VaultOverviewLabelValue
-        v-if="isBorrowable"
-        :value="vault.liquidation.socializeDebt ? 'Yes' : 'No'"
-        orientation="horizontal"
-      >
-        <template #label>
-          <span class="flex items-center gap-4">
-            Bad debt socialisation
-            <UiFootnote
-              title="Bad Debt Socialisation"
-              text="When enabled, if a liquidated position has remaining debt but no collateral left, the loss is spread across all depositors by reducing the share token value. This prevents bad debt from accumulating in the vault. When disabled, bad debt remains in the system indefinitely."
-              class="[--ui-footnote-icon-color:var(--text-muted)] hover:[--ui-footnote-icon-color:var(--text-secondary)]"
+        </span>
+      </template>
+    </VaultOverviewLabelValue>
+    <VaultOverviewLabelValue
+      v-if="isBorrowable"
+      label="Interest fee"
+      :value="`${formatNumber(vault.fees.interestFee * 100)}%`"
+      orientation="horizontal"
+    />
+    <VaultOverviewLabelValue orientation="horizontal">
+      <template #label>
+        <span class="flex items-center gap-4">
+          {{ hooksRowLabel }}
+          <UiModalPreviewTrigger
+            v-if="showHooksInfoIcon"
+            :component="VaultHooksInfoModal"
+            :modal-data="hooksModalData"
+            :aria-label="`${hooksRowLabel} details`"
+          >
+            <SvgIcon
+              class="!w-16 !h-16 shrink-0 text-content-muted hover:text-content-secondary transition-colors cursor-pointer"
+              name="info-circle"
             />
-          </span>
-        </template>
-      </VaultOverviewLabelValue>
-      <VaultOverviewLabelValue
-        v-if="isBorrowable"
-        label="Interest fee"
-        :value="`${formatNumber(vault.fees.interestFee * 100)}%`"
-        orientation="horizontal"
-      />
-      <VaultOverviewLabelValue orientation="horizontal">
-        <template #label>
-          <span class="flex items-center gap-4">
-            {{ hooksRowLabel }}
-            <UiModalPreviewTrigger
-              v-if="showHooksInfoIcon"
-              :component="VaultHooksInfoModal"
-              :modal-data="hooksModalData"
-              :aria-label="`${hooksRowLabel} details`"
-            >
-              <SvgIcon
-                class="!w-16 !h-16 shrink-0 text-content-muted hover:text-content-secondary transition-colors cursor-pointer"
-                name="info-circle"
-              />
-            </UiModalPreviewTrigger>
-          </span>
-        </template>
-        {{ hooksRowValue }}
-      </VaultOverviewLabelValue>
-    </div>
-  </div>
+          </UiModalPreviewTrigger>
+        </span>
+      </template>
+      {{ hooksRowValue }}
+    </VaultOverviewLabelValue>
+  </VaultOverviewAccordionSection>
 </template>
diff --git a/components/entities/vault/overview/VaultOverviewBlockStats.vue b/components/entities/vault/overview/VaultOverviewBlockStats.vue
index ad9f619c..6d062d07 100644
--- a/components/entities/vault/overview/VaultOverviewBlockStats.vue
+++ b/components/entities/vault/overview/VaultOverviewBlockStats.vue
@@ -7,7 +7,7 @@ import { VaultSupplyApyModal, VaultBorrowApyModal, UiModalPreviewTrigger } from
 import { withVaultIntrinsicApy, getVaultIntrinsicApy, getVaultIntrinsicApyInfo } from '~/utils/vault-intrinsic-apy'
 import { isVaultBorrowable } from '~/utils/vault/classification'
 
-const { vault } = defineProps<{ vault: EVault }>()
+const { vault, defaultOpen = true } = defineProps<{ vault: EVault, defaultOpen?: boolean }>()
 
 const { settings } = useUserSettings()
 const enableIntrinsicApy = computed(() => settings.value.enableIntrinsicApy)
@@ -74,117 +74,116 @@ watchEffect(async () => {
 </script>
 
 <template>
-  <div class="bg-surface-secondary rounded-xl flex flex-col gap-24 p-24 shadow-card">
-    <p class="text-h3 text-content-primary">
-      Statistics
-    </p>
-    <div class="flex flex-col items-start gap-24">
-      <VaultOverviewLabelValue
-        label="Total supply"
-        :value="totalSupplyDisplay"
-        orientation="horizontal"
-      />
-      <VaultOverviewLabelValue
-        v-if="isBorrowable"
-        label="Total borrowed"
-        :value="totalBorrowedDisplay"
-        orientation="horizontal"
-      />
-      <VaultOverviewLabelValue
-        v-if="isBorrowable"
-        label="Available liquidity"
-        :value="availableLiquidityDisplay"
-        orientation="horizontal"
-      />
-      <VaultOverviewLabelValue
-        orientation="horizontal"
-      >
-        <template #label>
-          <span class="flex items-center gap-4">
-            Supply APY
-            <UiModalPreviewTrigger
-              :component="VaultSupplyApyModal"
-              :modal-data="supplyApyModalData"
-              aria-label="Show supply APY breakdown"
-            >
-              <SvgIcon
-                class="!w-20 !h-20 text-content-muted hover:text-content-secondary cursor-pointer"
-                name="info-circle"
-                data-modal-trigger="supply-apy"
-              />
-            </UiModalPreviewTrigger>
-          </span>
-        </template>
+  <VaultOverviewAccordionSection
+    title="Statistics"
+    :default-open="defaultOpen"
+    content-class="flex flex-col items-start gap-24"
+  >
+    <VaultOverviewLabelValue
+      label="Total supply"
+      :value="totalSupplyDisplay"
+      orientation="horizontal"
+    />
+    <VaultOverviewLabelValue
+      v-if="isBorrowable"
+      label="Total borrowed"
+      :value="totalBorrowedDisplay"
+      orientation="horizontal"
+    />
+    <VaultOverviewLabelValue
+      v-if="isBorrowable"
+      label="Available liquidity"
+      :value="availableLiquidityDisplay"
+      orientation="horizontal"
+    />
+    <VaultOverviewLabelValue
+      orientation="horizontal"
+    >
+      <template #label>
         <span class="flex items-center gap-4">
+          Supply APY
           <UiModalPreviewTrigger
-            v-if="hasSupplyRewards(vault.address)"
             :component="VaultSupplyApyModal"
             :modal-data="supplyApyModalData"
-            aria-label="Show supply APY rewards breakdown"
+            aria-label="Show supply APY breakdown"
           >
             <SvgIcon
-              class="!w-20 !h-20 text-accent-500 cursor-pointer"
-              name="sparks"
+              class="!w-20 !h-20 text-content-muted hover:text-content-secondary cursor-pointer"
+              name="info-circle"
               data-modal-trigger="supply-apy"
             />
           </UiModalPreviewTrigger>
-          {{ formatNumber(supplyApyWithRewards) }}%
         </span>
-      </VaultOverviewLabelValue>
-      <VaultOverviewLabelValue
-        v-if="isBorrowable"
-        orientation="horizontal"
-      >
-        <template #label>
-          <span class="flex items-center gap-4">
-            Borrow APY
-            <UiModalPreviewTrigger
-              :component="VaultBorrowApyModal"
-              :modal-data="borrowApyModalData"
-              aria-label="Show borrow APY breakdown"
-            >
-              <SvgIcon
-                class="!w-20 !h-20 text-content-muted hover:text-content-secondary cursor-pointer"
-                name="info-circle"
-                data-modal-trigger="borrow-apy"
-              />
-            </UiModalPreviewTrigger>
-          </span>
-        </template>
+      </template>
+      <span class="flex items-center gap-4">
+        <UiModalPreviewTrigger
+          v-if="hasSupplyRewards(vault.address)"
+          :component="VaultSupplyApyModal"
+          :modal-data="supplyApyModalData"
+          aria-label="Show supply APY rewards breakdown"
+        >
+          <SvgIcon
+            class="!w-20 !h-20 text-accent-500 cursor-pointer"
+            name="sparks"
+            data-modal-trigger="supply-apy"
+          />
+        </UiModalPreviewTrigger>
+        {{ formatNumber(supplyApyWithRewards) }}%
+      </span>
+    </VaultOverviewLabelValue>
+    <VaultOverviewLabelValue
+      v-if="isBorrowable"
+      orientation="horizontal"
+    >
+      <template #label>
         <span class="flex items-center gap-4">
+          Borrow APY
           <UiModalPreviewTrigger
-            v-if="hasBorrowRewards(vault.address)"
             :component="VaultBorrowApyModal"
             :modal-data="borrowApyModalData"
-            aria-label="Show borrow APY rewards breakdown"
+            aria-label="Show borrow APY breakdown"
           >
             <SvgIcon
-              class="!w-20 !h-20 text-accent-500 cursor-pointer"
-              name="sparks"
+              class="!w-20 !h-20 text-content-muted hover:text-content-secondary cursor-pointer"
+              name="info-circle"
               data-modal-trigger="borrow-apy"
             />
           </UiModalPreviewTrigger>
-          {{ formatNumber(borrowApyWithRewards) }}%
         </span>
-      </VaultOverviewLabelValue>
-      <VaultOverviewLabelValue
-        v-if="isBorrowable"
-        orientation="horizontal"
-      >
-        <template #label>
-          <span class="flex items-center gap-4">
-            Utilization
-            <VaultWarningIcon :warning="utilisationWarning" />
-          </span>
-        </template>
-        <div class="flex gap-4 items-center">
-          {{ compactNumber(utilization, 2, 2) }}%
-          <UiRadialProgress
-            :value="utilization"
-            :max="100"
+      </template>
+      <span class="flex items-center gap-4">
+        <UiModalPreviewTrigger
+          v-if="hasBorrowRewards(vault.address)"
+          :component="VaultBorrowApyModal"
+          :modal-data="borrowApyModalData"
+          aria-label="Show borrow APY rewards breakdown"
+        >
+          <SvgIcon
+            class="!w-20 !h-20 text-accent-500 cursor-pointer"
+            name="sparks"
+            data-modal-trigger="borrow-apy"
           />
-        </div>
-      </VaultOverviewLabelValue>
-    </div>
-  </div>
+        </UiModalPreviewTrigger>
+        {{ formatNumber(borrowApyWithRewards) }}%
+      </span>
+    </VaultOverviewLabelValue>
+    <VaultOverviewLabelValue
+      v-if="isBorrowable"
+      orientation="horizontal"
+    >
+      <template #label>
+        <span class="flex items-center gap-4">
+          Utilization
+          <VaultWarningIcon :warning="utilisationWarning" />
+        </span>
+      </template>
+      <div class="flex gap-4 items-center">
+        {{ compactNumber(utilization, 2, 2) }}%
+        <UiRadialProgress
+          :value="utilization"
+          :max="100"
+        />
+      </div>
+    </VaultOverviewLabelValue>
+  </VaultOverviewAccordionSection>
 </template>
diff --git a/components/entities/vault/overview/VaultOverviewPair.vue b/components/entities/vault/overview/VaultOverviewPair.vue
index 2c12d067..54f94918 100644
--- a/components/entities/vault/overview/VaultOverviewPair.vue
+++ b/components/entities/vault/overview/VaultOverviewPair.vue
@@ -13,14 +13,17 @@ defineProps<{ pair: AnyBorrowVaultPair | PortfolioBorrowPosition<VaultEntity>, d
   >
     <VaultOverviewPairBlockGeneral
       :pair="pair"
+      :default-open="true"
     />
     <VaultOverviewPairBlockTypes
       :pair="pair"
+      :default-open="false"
     />
     <!-- Oracle adapters should always come from the liability (borrow) vault -->
     <VaultOverviewBlockOracleAdapters
       :vault="getPairBorrowVault(pair)"
       :collateral-vaults="collateralVaults?.length ? collateralVaults : [getPairCollateralVault(pair)]"
+      :default-open="false"
     />
   </div>
 </template>
diff --git a/components/entities/vault/overview/VaultOverviewPairBlockGeneral.vue b/components/entities/vault/overview/VaultOverviewPairBlockGeneral.vue
index 7e9c10d3..6cd99d47 100644
--- a/components/entities/vault/overview/VaultOverviewPairBlockGeneral.vue
+++ b/components/entities/vault/overview/VaultOverviewPairBlockGeneral.vue
@@ -18,7 +18,7 @@ import {
 import { getVaultAvailableLiquidity } from '~/utils/vault-display'
 import { VaultNetApyPairModal, VaultMaxRoeModal, VaultRampDownModal, VaultSupplyApyModal, VaultBorrowApyModal, UiModalPreviewTrigger } from '#components'
 
-const { pair } = defineProps<{ pair: AnyBorrowVaultPair | PortfolioBorrowPosition<VaultEntity> }>()
+const { pair, defaultOpen = true } = defineProps<{ pair: AnyBorrowVaultPair | PortfolioBorrowPosition<VaultEntity>, defaultOpen?: boolean }>()
 
 const borrowVault = computed(() => getPairBorrowVault(pair))
 const collateralVault = computed(() => getPairCollateralVault(pair))
@@ -168,315 +168,314 @@ const rampDownModalData = computed(() => ({
 </script>
 
 <template>
-  <div class="bg-surface-secondary rounded-xl flex flex-col gap-24 p-24 shadow-card">
-    <p class="text-h3 text-content-primary">
-      Overview
-    </p>
-    <div class="flex flex-col gap-20">
-      <div
-        v-if="isDeprecated"
-        class="w-full rounded-12 p-16 bg-warning-100 text-warning-500"
-      >
-        <div class="flex items-center gap-8">
-          <SvgIcon
-            name="warning"
-            class="!w-20 !h-20 flex-shrink-0"
-          />
-          <p class="text-p3 text-warning-500">
-            One or more vaults in this pair have been deprecated.
-          </p>
-        </div>
+  <VaultOverviewAccordionSection
+    title="Overview"
+    :default-open="defaultOpen"
+    content-class="flex flex-col gap-20"
+  >
+    <div
+      v-if="isDeprecated"
+      class="w-full rounded-12 p-16 bg-warning-100 text-warning-500"
+    >
+      <div class="flex items-center gap-8">
+        <SvgIcon
+          name="warning"
+          class="!w-20 !h-20 flex-shrink-0"
+        />
+        <p class="text-p3 text-warning-500">
+          One or more vaults in this pair have been deprecated.
+        </p>
       </div>
-      <div
-        v-if="isRestricted"
-        class="w-full rounded-12 p-16 bg-warning-100 text-warning-500"
-      >
-        <div class="flex items-center gap-8">
-          <SvgIcon
-            name="warning"
-            class="!w-20 !h-20 flex-shrink-0"
-          />
-          <p class="text-p3 text-warning-500">
-            This vault is not available in your region.
-          </p>
-        </div>
+    </div>
+    <div
+      v-if="isRestricted"
+      class="w-full rounded-12 p-16 bg-warning-100 text-warning-500"
+    >
+      <div class="flex items-center gap-8">
+        <SvgIcon
+          name="warning"
+          class="!w-20 !h-20 flex-shrink-0"
+        />
+        <p class="text-p3 text-warning-500">
+          This vault is not available in your region.
+        </p>
       </div>
-      <div class="flex flex-col gap-12">
-        <div class="grid grid-cols-2 gap-x-32 gap-y-20">
-          <VaultOverviewLabelValue label="Price">
-            <template v-if="displayPrice !== undefined">
-              <div class="flex flex-col gap-2">
-                <span class="tabular-nums">
-                  {{ formatSignificant(displayPrice, 4) }}
-                </span>
-                <span
-                  v-if="priceInvert.displaySymbol"
-                  class="text-p3 text-content-muted flex items-center gap-4"
-                >
-                  {{ priceInvert.displaySymbol }}
-                  <button
-                    type="button"
-                    aria-label="Invert price display"
-                    class="text-content-tertiary hover:text-content-primary transition-colors inline-flex shrink-0"
-                    @click.stop="priceInvert.toggle"
-                  >
-                    <SvgIcon
-                      name="swap-horizontal"
-                      class="!w-12 !h-12"
-                    />
-                  </button>
-                </span>
-              </div>
-            </template>
-            <template v-else>
-              <span class="flex items-center text-warning-500">
-                <SvgIcon
-                  name="warning"
-                  class="mr-2 !w-20 !h-20"
-                />
-                Unknown
-              </span>
-            </template>
-          </VaultOverviewLabelValue>
-
-          <VaultOverviewLabelValue label="Available liquidity">
+    </div>
+    <div class="flex flex-col gap-12">
+      <div class="grid grid-cols-2 gap-x-32 gap-y-20">
+        <VaultOverviewLabelValue label="Price">
+          <template v-if="displayPrice !== undefined">
             <div class="flex flex-col gap-2">
-              <span class="flex items-baseline gap-4 tabular-nums">
-                {{ availableLiquidityDisplay.amount }}
-                <span
-                  v-if="availableLiquidityDisplay.symbol"
-                  class="text-content-tertiary"
-                >
-                  {{ availableLiquidityDisplay.symbol }}
-                </span>
+              <span class="tabular-nums">
+                {{ formatSignificant(displayPrice, 4) }}
               </span>
               <span
-                v-if="availableLiquidityDisplay.usd"
-                class="text-p3 text-content-muted"
+                v-if="priceInvert.displaySymbol"
+                class="text-p3 text-content-muted flex items-center gap-4"
               >
-                {{ availableLiquidityDisplay.usd }}
+                {{ priceInvert.displaySymbol }}
+                <button
+                  type="button"
+                  aria-label="Invert price display"
+                  class="text-content-tertiary hover:text-content-primary transition-colors inline-flex shrink-0"
+                  @click.stop="priceInvert.toggle"
+                >
+                  <SvgIcon
+                    name="swap-horizontal"
+                    class="!w-12 !h-12"
+                  />
+                </button>
               </span>
             </div>
-          </VaultOverviewLabelValue>
+          </template>
+          <template v-else>
+            <span class="flex items-center text-warning-500">
+              <SvgIcon
+                name="warning"
+                class="mr-2 !w-20 !h-20"
+              />
+              Unknown
+            </span>
+          </template>
+        </VaultOverviewLabelValue>
 
-          <VaultOverviewLabelValue>
-            <template #label>
-              <span class="flex items-center gap-4">
-                Max LTV
-                <UiFootnote
-                  title="Max LTV"
-                  text="The maximum loan-to-value allowed for this collateral and borrow pair before new borrowing is restricted."
-                  tooltip-placement="top-start"
-                />
+        <VaultOverviewLabelValue label="Available liquidity">
+          <div class="flex flex-col gap-2">
+            <span class="flex items-baseline gap-4 tabular-nums">
+              {{ availableLiquidityDisplay.amount }}
+              <span
+                v-if="availableLiquidityDisplay.symbol"
+                class="text-content-tertiary"
+              >
+                {{ availableLiquidityDisplay.symbol }}
               </span>
-            </template>
-            {{ pairBorrowLTVPercent === null ? '-' : `${formatNumber(pairBorrowLTVPercent, 2)}%` }}
-          </VaultOverviewLabelValue>
+            </span>
+            <span
+              v-if="availableLiquidityDisplay.usd"
+              class="text-p3 text-content-muted"
+            >
+              {{ availableLiquidityDisplay.usd }}
+            </span>
+          </div>
+        </VaultOverviewLabelValue>
 
-          <VaultOverviewLabelValue>
-            <template #label>
-              <span class="flex items-center gap-4">
-                Liquidation LTV
-                <UiFootnote
-                  title="Liquidation LTV"
-                  text="The loan-to-value where the position becomes eligible for liquidation. If this value is ramping, the current value can change over time."
-                  tooltip-placement="top-start"
-                />
-              </span>
-            </template>
+        <VaultOverviewLabelValue>
+          <template #label>
             <span class="flex items-center gap-4">
-              <UiModalPreviewTrigger
-                v-if="isRamping"
-                :component="VaultRampDownModal"
-                :modal-data="rampDownModalData"
-                aria-label="Show liquidation LTV ramp-down details"
-              >
-                <SvgIcon
-                  name="arrow-top-right"
-                  class="!w-14 !h-14 text-warning-500 shrink-0 rotate-180 cursor-pointer"
-                />
-              </UiModalPreviewTrigger>
-              {{ currentLiquidationLTVPercent === null ? '-' : `${formatNumber(currentLiquidationLTVPercent, 2)}%` }}
+              Max LTV
+              <UiFootnote
+                title="Max LTV"
+                text="The maximum loan-to-value allowed for this collateral and borrow pair before new borrowing is restricted."
+                tooltip-placement="top-start"
+              />
             </span>
-          </VaultOverviewLabelValue>
-        </div>
+          </template>
+          {{ pairBorrowLTVPercent === null ? '-' : `${formatNumber(pairBorrowLTVPercent, 2)}%` }}
+        </VaultOverviewLabelValue>
 
-        <div class="flex items-center gap-12 pt-8">
-          <p class="text-p4 uppercase tracking-[0.14em] text-content-muted whitespace-nowrap">
-            Rates & multiply
-          </p>
-          <div class="h-2 flex-1 bg-[var(--border-subtle)] opacity-70" />
-        </div>
+        <VaultOverviewLabelValue>
+          <template #label>
+            <span class="flex items-center gap-4">
+              Liquidation LTV
+              <UiFootnote
+                title="Liquidation LTV"
+                text="The loan-to-value where the position becomes eligible for liquidation. If this value is ramping, the current value can change over time."
+                tooltip-placement="top-start"
+              />
+            </span>
+          </template>
+          <span class="flex items-center gap-4">
+            <UiModalPreviewTrigger
+              v-if="isRamping"
+              :component="VaultRampDownModal"
+              :modal-data="rampDownModalData"
+              aria-label="Show liquidation LTV ramp-down details"
+            >
+              <SvgIcon
+                name="arrow-top-right"
+                class="!w-14 !h-14 text-warning-500 shrink-0 rotate-180 cursor-pointer"
+              />
+            </UiModalPreviewTrigger>
+            {{ currentLiquidationLTVPercent === null ? '-' : `${formatNumber(currentLiquidationLTVPercent, 2)}%` }}
+          </span>
+        </VaultOverviewLabelValue>
+      </div>
+
+      <div class="flex items-center gap-12 pt-8">
+        <p class="text-p4 uppercase tracking-[0.14em] text-content-muted whitespace-nowrap">
+          Rates & multiply
+        </p>
+        <div class="h-2 flex-1 bg-[var(--border-subtle)] opacity-70" />
+      </div>
 
-        <div
-          class="grid grid-cols-1 gap-12 min-w-0"
-          :class="{ 'laptop:grid-cols-2': showMultiplySection }"
+      <div
+        class="grid grid-cols-1 gap-12 min-w-0"
+        :class="{ 'laptop:grid-cols-2': showMultiplySection }"
+      >
+        <VaultOverviewPairSection
+          title="Borrow"
+          icon="arrow-big"
         >
-          <VaultOverviewPairSection
-            title="Borrow"
-            icon="arrow-big"
-          >
-            <div class="flex flex-col gap-12">
-              <VaultOverviewLabelValue orientation="horizontal">
-                <template #label>
-                  <span class="flex items-center gap-4">
-                    Supply APY
-                    <UiModalPreviewTrigger
-                      :component="VaultSupplyApyModal"
-                      :modal-data="supplyApyModalData"
-                      aria-label="Show supply APY breakdown"
-                    >
-                      <SvgIcon
-                        class="!w-20 !h-20 text-content-muted hover:text-content-secondary cursor-pointer"
-                        name="info-circle"
-                        data-modal-trigger="supply-apy"
-                      />
-                    </UiModalPreviewTrigger>
-                  </span>
-                </template>
+          <div class="flex flex-col gap-12">
+            <VaultOverviewLabelValue orientation="horizontal">
+              <template #label>
                 <span class="flex items-center gap-4">
-                  <VaultPoints :vault="collateralVault" />
+                  Supply APY
                   <UiModalPreviewTrigger
-                    v-if="hasSupplyRewards(collateralVault.address)"
                     :component="VaultSupplyApyModal"
                     :modal-data="supplyApyModalData"
-                    aria-label="Show supply APY rewards breakdown"
+                    aria-label="Show supply APY breakdown"
                   >
                     <SvgIcon
-                      class="!w-20 !h-20 text-accent-500 cursor-pointer"
-                      name="sparks"
+                      class="!w-20 !h-20 text-content-muted hover:text-content-secondary cursor-pointer"
+                      name="info-circle"
                       data-modal-trigger="supply-apy"
                     />
                   </UiModalPreviewTrigger>
-                  {{ formatNumber(supplyApyWithRewards) }}%
                 </span>
-              </VaultOverviewLabelValue>
+              </template>
+              <span class="flex items-center gap-4">
+                <VaultPoints :vault="collateralVault" />
+                <UiModalPreviewTrigger
+                  v-if="hasSupplyRewards(collateralVault.address)"
+                  :component="VaultSupplyApyModal"
+                  :modal-data="supplyApyModalData"
+                  aria-label="Show supply APY rewards breakdown"
+                >
+                  <SvgIcon
+                    class="!w-20 !h-20 text-accent-500 cursor-pointer"
+                    name="sparks"
+                    data-modal-trigger="supply-apy"
+                  />
+                </UiModalPreviewTrigger>
+                {{ formatNumber(supplyApyWithRewards) }}%
+              </span>
+            </VaultOverviewLabelValue>
 
-              <VaultOverviewLabelValue orientation="horizontal">
-                <template #label>
-                  <span class="flex items-center gap-4">
-                    Borrow APY
-                    <UiModalPreviewTrigger
-                      :component="VaultBorrowApyModal"
-                      :modal-data="borrowApyModalData"
-                      aria-label="Show borrow APY breakdown"
-                    >
-                      <SvgIcon
-                        class="!w-20 !h-20 text-content-muted hover:text-content-secondary cursor-pointer"
-                        name="info-circle"
-                        data-modal-trigger="borrow-apy"
-                      />
-                    </UiModalPreviewTrigger>
-                  </span>
-                </template>
+            <VaultOverviewLabelValue orientation="horizontal">
+              <template #label>
                 <span class="flex items-center gap-4">
+                  Borrow APY
                   <UiModalPreviewTrigger
-                    v-if="hasBorrowRewards(borrowVault.address, collateralVault.address)"
                     :component="VaultBorrowApyModal"
                     :modal-data="borrowApyModalData"
-                    aria-label="Show borrow APY rewards breakdown"
+                    aria-label="Show borrow APY breakdown"
                   >
                     <SvgIcon
-                      class="!w-20 !h-20 text-accent-500 cursor-pointer"
-                      name="sparks"
+                      class="!w-20 !h-20 text-content-muted hover:text-content-secondary cursor-pointer"
+                      name="info-circle"
                       data-modal-trigger="borrow-apy"
                     />
                   </UiModalPreviewTrigger>
-                  {{ formatNumber(borrowApyWithRewards) }}%
                 </span>
-              </VaultOverviewLabelValue>
-
-              <VaultOverviewLabelValue orientation="horizontal">
-                <template #label>
-                  <span class="flex items-center gap-4">
-                    Net APY
-                    <UiModalPreviewTrigger
-                      :component="VaultNetApyPairModal"
-                      :modal-data="netApyModalData"
-                      aria-label="Show net APY breakdown"
-                    >
-                      <SvgIcon
-                        class="!w-20 !h-20 text-content-muted hover:text-content-secondary cursor-pointer"
-                        name="info-circle"
-                        data-modal-trigger="net-apy"
-                      />
-                    </UiModalPreviewTrigger>
-                  </span>
-                </template>
-                <span
-                  class="flex items-center gap-4 font-semibold"
-                  :class="netApyClass"
+              </template>
+              <span class="flex items-center gap-4">
+                <UiModalPreviewTrigger
+                  v-if="hasBorrowRewards(borrowVault.address, collateralVault.address)"
+                  :component="VaultBorrowApyModal"
+                  :modal-data="borrowApyModalData"
+                  aria-label="Show borrow APY rewards breakdown"
                 >
+                  <SvgIcon
+                    class="!w-20 !h-20 text-accent-500 cursor-pointer"
+                    name="sparks"
+                    data-modal-trigger="borrow-apy"
+                  />
+                </UiModalPreviewTrigger>
+                {{ formatNumber(borrowApyWithRewards) }}%
+              </span>
+            </VaultOverviewLabelValue>
+
+            <VaultOverviewLabelValue orientation="horizontal">
+              <template #label>
+                <span class="flex items-center gap-4">
+                  Net APY
                   <UiModalPreviewTrigger
-                    v-if="hasSupplyRewards(collateralVault.address) || hasBorrowRewards(borrowVault.address, collateralVault.address) || hasLoopingRewards(borrowVault.address, collateralVault.address)"
                     :component="VaultNetApyPairModal"
                     :modal-data="netApyModalData"
-                    aria-label="Show net APY rewards breakdown"
+                    aria-label="Show net APY breakdown"
                   >
                     <SvgIcon
-                      class="!w-20 !h-20 text-accent-500 cursor-pointer"
-                      name="sparks"
+                      class="!w-20 !h-20 text-content-muted hover:text-content-secondary cursor-pointer"
+                      name="info-circle"
                       data-modal-trigger="net-apy"
                     />
                   </UiModalPreviewTrigger>
-                  {{ formatNumber(netApy) }}%
                 </span>
-              </VaultOverviewLabelValue>
-            </div>
-          </VaultOverviewPairSection>
+              </template>
+              <span
+                class="flex items-center gap-4 font-semibold"
+                :class="netApyClass"
+              >
+                <UiModalPreviewTrigger
+                  v-if="hasSupplyRewards(collateralVault.address) || hasBorrowRewards(borrowVault.address, collateralVault.address) || hasLoopingRewards(borrowVault.address, collateralVault.address)"
+                  :component="VaultNetApyPairModal"
+                  :modal-data="netApyModalData"
+                  aria-label="Show net APY rewards breakdown"
+                >
+                  <SvgIcon
+                    class="!w-20 !h-20 text-accent-500 cursor-pointer"
+                    name="sparks"
+                    data-modal-trigger="net-apy"
+                  />
+                </UiModalPreviewTrigger>
+                {{ formatNumber(netApy) }}%
+              </span>
+            </VaultOverviewLabelValue>
+          </div>
+        </VaultOverviewPairSection>
 
-          <VaultOverviewPairSection
-            v-if="showMultiplySection"
-            title="Multiply"
-            icon="multiply"
-          >
-            <div class="flex flex-col gap-12">
-              <VaultOverviewLabelValue
-                orientation="horizontal"
-                label="Max multiplier"
-                :value="pairBorrowLTVPercent === null ? '-' : `${formatNumber(maxMultiplier, 2, 2)}x`"
-              />
+        <VaultOverviewPairSection
+          v-if="showMultiplySection"
+          title="Multiply"
+          icon="multiply"
+        >
+          <div class="flex flex-col gap-12">
+            <VaultOverviewLabelValue
+              orientation="horizontal"
+              label="Max multiplier"
+              :value="pairBorrowLTVPercent === null ? '-' : `${formatNumber(maxMultiplier, 2, 2)}x`"
+            />
 
-              <VaultOverviewLabelValue orientation="horizontal">
-                <template #label>
-                  <span class="flex items-center gap-4">
-                    Max ROE
-                    <UiModalPreviewTrigger
-                      :component="VaultMaxRoeModal"
-                      :modal-data="maxRoeModalData"
-                      aria-label="Show max ROE breakdown"
-                    >
-                      <SvgIcon
-                        class="!w-20 !h-20 text-content-muted hover:text-content-secondary cursor-pointer"
-                        name="info-circle"
-                        data-modal-trigger="max-roe"
-                      />
-                    </UiModalPreviewTrigger>
-                  </span>
-                </template>
-                <span
-                  class="flex items-center gap-4 font-semibold"
-                  :class="maxRoeClass"
-                >
+            <VaultOverviewLabelValue orientation="horizontal">
+              <template #label>
+                <span class="flex items-center gap-4">
+                  Max ROE
                   <UiModalPreviewTrigger
-                    v-if="hasSupplyRewards(collateralVault.address) || hasBorrowRewards(borrowVault.address, collateralVault.address) || hasLoopingRewards(borrowVault.address, collateralVault.address)"
                     :component="VaultMaxRoeModal"
                     :modal-data="maxRoeModalData"
-                    aria-label="Show max ROE rewards breakdown"
+                    aria-label="Show max ROE breakdown"
                   >
                     <SvgIcon
-                      class="!w-20 !h-20 text-accent-500 cursor-pointer"
-                      name="sparks"
+                      class="!w-20 !h-20 text-content-muted hover:text-content-secondary cursor-pointer"
+                      name="info-circle"
                       data-modal-trigger="max-roe"
                     />
                   </UiModalPreviewTrigger>
-                  {{ formatNumber(maxRoe) }}%
                 </span>
-              </VaultOverviewLabelValue>
-            </div>
-          </VaultOverviewPairSection>
-        </div>
+              </template>
+              <span
+                class="flex items-center gap-4 font-semibold"
+                :class="maxRoeClass"
+              >
+                <UiModalPreviewTrigger
+                  v-if="hasSupplyRewards(collateralVault.address) || hasBorrowRewards(borrowVault.address, collateralVault.address) || hasLoopingRewards(borrowVault.address, collateralVault.address)"
+                  :component="VaultMaxRoeModal"
+                  :modal-data="maxRoeModalData"
+                  aria-label="Show max ROE rewards breakdown"
+                >
+                  <SvgIcon
+                    class="!w-20 !h-20 text-accent-500 cursor-pointer"
+                    name="sparks"
+                    data-modal-trigger="max-roe"
+                  />
+                </UiModalPreviewTrigger>
+                {{ formatNumber(maxRoe) }}%
+              </span>
+            </VaultOverviewLabelValue>
+          </div>
+        </VaultOverviewPairSection>
       </div>
     </div>
-  </div>
+  </VaultOverviewAccordionSection>
 </template>
diff --git a/components/entities/vault/overview/VaultOverviewPairBlockTypes.vue b/components/entities/vault/overview/VaultOverviewPairBlockTypes.vue
index 7c6d5e95..c093e43e 100644
--- a/components/entities/vault/overview/VaultOverviewPairBlockTypes.vue
+++ b/components/entities/vault/overview/VaultOverviewPairBlockTypes.vue
@@ -3,7 +3,7 @@ import type { AnyBorrowVaultPair } from '~/types/borrow-pair'
 import type { PortfolioBorrowPosition, VaultEntity } from '@eulerxyz/euler-v2-sdk'
 import { getPairBorrowVault, getPairCollateralVault } from '~/utils/borrow-pair'
 
-const { pair } = defineProps<{ pair: AnyBorrowVaultPair | PortfolioBorrowPosition<VaultEntity> }>()
+const { pair, defaultOpen = true } = defineProps<{ pair: AnyBorrowVaultPair | PortfolioBorrowPosition<VaultEntity>, defaultOpen?: boolean }>()
 
 const collateralVault = computed(() => getPairCollateralVault(pair))
 const borrowVault = computed(() => getPairBorrowVault(pair))
@@ -18,13 +18,12 @@ const showVaultTypesSummary = computed(() =>
 </script>
 
 <template>
-  <div
+  <VaultOverviewAccordionSection
     v-if="showVaultTypesSummary"
-    class="bg-surface-secondary rounded-xl flex flex-col gap-24 p-24 shadow-card"
+    title="Vault types"
+    :default-open="defaultOpen"
+    content-class="flex flex-col gap-24"
   >
-    <p class="text-h3 text-content-primary">
-      Vault types
-    </p>
     <div class="grid grid-cols-[1fr_1px_1fr] gap-20 items-stretch">
       <div class="min-w-0 flex flex-col gap-12">
         <div class="flex items-center gap-8 min-w-0 pl-2">
@@ -86,7 +85,7 @@ const showVaultTypesSummary = computed(() =>
         </div>
       </div>
     </div>
-  </div>
+  </VaultOverviewAccordionSection>
 </template>
 
 <style scoped lang="scss">

From e772e04307c9b215565cbf2feb96845f89ca11b0 Mon Sep 17 00:00:00 2001
From: Seranged <80223622+Seranged@users.noreply.github.com>
Date: Wed, 24 Jun 2026 14:48:14 +0100
Subject: [PATCH 2/5] fix: collapse single vault overview accordion

Collapse a vault overview accordion by default when it is the only accordion section in its parent view.
---
 .../VaultOverviewAccordionSection.vue         | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/components/entities/vault/overview/VaultOverviewAccordionSection.vue b/components/entities/vault/overview/VaultOverviewAccordionSection.vue
index e8fa1dc9..4eb274e8 100644
--- a/components/entities/vault/overview/VaultOverviewAccordionSection.vue
+++ b/components/entities/vault/overview/VaultOverviewAccordionSection.vue
@@ -12,14 +12,34 @@ const props = withDefaults(defineProps<{
 
 const isOpen = ref(props.defaultOpen)
 const panelId = useId()
+const sectionEl = ref<HTMLElement>()
+
+const collapseIfOnlySection = () => {
+  const parentEl = sectionEl.value?.parentElement
+  if (!parentEl) return
+
+  const sectionCount = parentEl.querySelectorAll(':scope > [data-vault-overview-accordion-section]').length
+  if (sectionCount === 1) {
+    isOpen.value = false
+  }
+}
 
 const toggle = () => {
   isOpen.value = !isOpen.value
 }
+
+onMounted(async () => {
+  await nextTick()
+  collapseIfOnlySection()
+})
 </script>
 
 <template>
-  <section class="bg-surface-secondary rounded-xl shadow-card">
+  <section
+    ref="sectionEl"
+    class="bg-surface-secondary rounded-xl shadow-card"
+    data-vault-overview-accordion-section
+  >
     <div class="flex items-center gap-16">
       <button
         type="button"

From 86e485eb0d3697f0c6d800b0e0c4c2448a74cea8 Mon Sep 17 00:00:00 2001
From: Seranged <80223622+Seranged@users.noreply.github.com>
Date: Wed, 24 Jun 2026 14:54:50 +0100
Subject: [PATCH 3/5] fix: expand single vault overview accordion

Force a lone vault overview accordion section open after mount so single-section views show their content by default.
---
 .../vault/overview/VaultOverviewAccordionSection.vue        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/entities/vault/overview/VaultOverviewAccordionSection.vue b/components/entities/vault/overview/VaultOverviewAccordionSection.vue
index 4eb274e8..9577abd8 100644
--- a/components/entities/vault/overview/VaultOverviewAccordionSection.vue
+++ b/components/entities/vault/overview/VaultOverviewAccordionSection.vue
@@ -14,13 +14,13 @@ const isOpen = ref(props.defaultOpen)
 const panelId = useId()
 const sectionEl = ref<HTMLElement>()
 
-const collapseIfOnlySection = () => {
+const expandIfOnlySection = () => {
   const parentEl = sectionEl.value?.parentElement
   if (!parentEl) return
 
   const sectionCount = parentEl.querySelectorAll(':scope > [data-vault-overview-accordion-section]').length
   if (sectionCount === 1) {
-    isOpen.value = false
+    isOpen.value = true
   }
 }
 
@@ -30,7 +30,7 @@ const toggle = () => {
 
 onMounted(async () => {
   await nextTick()
-  collapseIfOnlySection()
+  expandIfOnlySection()
 })
 </script>
 

From aac07c00d9fbfb1068e444082b63b3b09d6c9a6c Mon Sep 17 00:00:00 2001
From: Seranged <80223622+Seranged@users.noreply.github.com>
Date: Wed, 24 Jun 2026 15:01:27 +0100
Subject: [PATCH 4/5] fix: align vault overview accordion actions

Keep accordion actions before a far-right chevron so sections with badges retain the same expand affordance as other rows.
---
 .../VaultOverviewAccordionSection.vue         | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/components/entities/vault/overview/VaultOverviewAccordionSection.vue b/components/entities/vault/overview/VaultOverviewAccordionSection.vue
index 9577abd8..a2512519 100644
--- a/components/entities/vault/overview/VaultOverviewAccordionSection.vue
+++ b/components/entities/vault/overview/VaultOverviewAccordionSection.vue
@@ -40,11 +40,10 @@ onMounted(async () => {
     class="bg-surface-secondary rounded-xl shadow-card"
     data-vault-overview-accordion-section
   >
-    <div class="flex items-center gap-16">
+    <div class="flex items-center gap-16 p-24">
       <button
         type="button"
-        class="flex min-w-0 items-center justify-between gap-16 text-left transition-colors hover:bg-card-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-inset"
-        :class="$slots.actions && hasActions ? 'flex-1 p-24 pr-0' : 'w-full p-24'"
+        class="flex min-w-0 flex-1 items-center text-left transition-colors hover:text-accent-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-4 focus-visible:ring-offset-surface-secondary"
         :aria-expanded="isOpen"
         :aria-controls="panelId"
         @click="toggle"
@@ -52,19 +51,28 @@ onMounted(async () => {
         <span class="text-h3 text-content-primary">
           {{ title }}
         </span>
-        <SvgIcon
-          name="arrow-down"
-          class="!w-20 !h-20 shrink-0 text-content-tertiary transition-transform"
-          :class="{ 'rotate-180': isOpen }"
-          aria-hidden="true"
-        />
       </button>
       <div
         v-if="$slots.actions && hasActions"
-        class="shrink-0 pr-24"
+        class="shrink-0"
       >
         <slot name="actions" />
       </div>
+      <button
+        type="button"
+        class="shrink-0 text-content-tertiary transition-colors hover:text-content-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-4 focus-visible:ring-offset-surface-secondary"
+        :aria-expanded="isOpen"
+        :aria-controls="panelId"
+        :aria-label="`${isOpen ? 'Collapse' : 'Expand'} ${title}`"
+        @click="toggle"
+      >
+        <SvgIcon
+          name="arrow-down"
+          class="!w-20 !h-20 transition-transform"
+          :class="{ 'rotate-180': isOpen }"
+          aria-hidden="true"
+        />
+      </button>
     </div>
 
     <div

From e08286b43bf8ae5c4aa0e7b880acd86404b15866 Mon Sep 17 00:00:00 2001
From: Seranged <80223622+Seranged@users.noreply.github.com>
Date: Wed, 24 Jun 2026 15:03:05 +0100
Subject: [PATCH 5/5] fix: expand accordion header hit target

Make the full vault overview accordion header toggle the section while keeping header actions independently clickable.
---
 .../VaultOverviewAccordionSection.vue         | 38 ++++++++-----------
 1 file changed, 15 insertions(+), 23 deletions(-)

diff --git a/components/entities/vault/overview/VaultOverviewAccordionSection.vue b/components/entities/vault/overview/VaultOverviewAccordionSection.vue
index a2512519..edfd97e8 100644
--- a/components/entities/vault/overview/VaultOverviewAccordionSection.vue
+++ b/components/entities/vault/overview/VaultOverviewAccordionSection.vue
@@ -40,39 +40,31 @@ onMounted(async () => {
     class="bg-surface-secondary rounded-xl shadow-card"
     data-vault-overview-accordion-section
   >
-    <div class="flex items-center gap-16 p-24">
+    <div class="group relative flex items-center gap-16 p-24">
       <button
         type="button"
-        class="flex min-w-0 flex-1 items-center text-left transition-colors hover:text-accent-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-4 focus-visible:ring-offset-surface-secondary"
+        class="absolute inset-0 z-0 rounded-xl transition-colors hover:bg-card-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-inset"
         :aria-expanded="isOpen"
         :aria-controls="panelId"
+        :aria-label="`${isOpen ? 'Collapse' : 'Expand'} ${title}`"
         @click="toggle"
-      >
-        <span class="text-h3 text-content-primary">
-          {{ title }}
-        </span>
-      </button>
+      />
+      <span class="pointer-events-none relative z-10 min-w-0 flex-1 text-h3 text-content-primary transition-colors group-hover:text-accent-500">
+        {{ title }}
+      </span>
       <div
         v-if="$slots.actions && hasActions"
-        class="shrink-0"
+        class="relative z-20 shrink-0"
+        @click.stop
       >
         <slot name="actions" />
       </div>
-      <button
-        type="button"
-        class="shrink-0 text-content-tertiary transition-colors hover:text-content-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-4 focus-visible:ring-offset-surface-secondary"
-        :aria-expanded="isOpen"
-        :aria-controls="panelId"
-        :aria-label="`${isOpen ? 'Collapse' : 'Expand'} ${title}`"
-        @click="toggle"
-      >
-        <SvgIcon
-          name="arrow-down"
-          class="!w-20 !h-20 transition-transform"
-          :class="{ 'rotate-180': isOpen }"
-          aria-hidden="true"
-        />
-      </button>
+      <SvgIcon
+        name="arrow-down"
+        class="pointer-events-none relative z-10 !w-20 !h-20 shrink-0 text-content-tertiary transition-transform group-hover:text-content-secondary"
+        :class="{ 'rotate-180': isOpen }"
+        aria-hidden="true"
+      />
     </div>
 
     <div