diff --git a/projects/portal/editions/ununifi/launch/ununifi/firebase-hosting/config.js b/projects/portal/editions/ununifi/launch/ununifi/firebase-hosting/config.js
index d7f388c25..f59a9c9e9 100644
--- a/projects/portal/editions/ununifi/launch/ununifi/firebase-hosting/config.js
+++ b/projects/portal/editions/ununifi/launch/ununifi/firebase-hosting/config.js
@@ -240,6 +240,7 @@ const strategiesInfo = [
     name: 'Osmosis ATOM/OSMO LP Strategy',
     description: '',
     gitUrl: '',
+    unbondingTimeSec: '1209600',
     poolInfo: {
       type: 'osmosis',
       poolId: '1',
@@ -252,6 +253,7 @@ const strategiesInfo = [
     name: 'Osmosis stATOM/ATOM Strategy (ATOM deposit)',
     description: '',
     gitUrl: '',
+    unbondingTimeSec: '1209600',
     poolInfo: {
       type: 'osmosis',
       poolId: '803',
@@ -263,6 +265,7 @@ const strategiesInfo = [
     name: 'Osmosis ATOM/OSMO strategy (OSMO deposit)',
     description: '',
     gitUrl: '',
+    unbondingTimeSec: '1209600',
     poolInfo: {
       type: 'osmosis',
       poolId: '1',
@@ -274,6 +277,7 @@ const strategiesInfo = [
     name: 'Osmosis AKT/OSMO strategy (OSMO deposit)',
     description: '',
     gitUrl: '',
+    unbondingTimeSec: '1209600',
     poolInfo: {
       type: 'osmosis',
       poolId: '3',
diff --git a/projects/portal/src/app/models/config.service.ts b/projects/portal/src/app/models/config.service.ts
index fa74b0177..c8761cb48 100644
--- a/projects/portal/src/app/models/config.service.ts
+++ b/projects/portal/src/app/models/config.service.ts
@@ -22,7 +22,7 @@ export type Config = {
   }[];
   apps: AppNavigation[];
   denomMetadata: cosmosclient.proto.cosmos.bank.v1beta1.IMetadata[];
-  strategiesInfo: YieldInfo[];
+  strategiesInfo: StrategyInfo[];
   certifiedVaults: string[];
   externalChains: ChainInfo[];
   extension?: {
@@ -59,7 +59,7 @@ export type AppNavigation = {
   icon: string;
 };
 
-export type YieldInfo = {
+export type StrategyInfo = {
   id: string;
   denom?: string;
   name?: string;
@@ -68,6 +68,7 @@ export type YieldInfo = {
   minApy: number;
   maxApy?: number;
   certainty: boolean;
+  unbondingTimeSec?: string;
   poolInfo?:
     | {
         type: 'osmosis';
diff --git a/projects/portal/src/app/models/yield-aggregators/yield-aggregator.model.ts b/projects/portal/src/app/models/yield-aggregators/yield-aggregator.model.ts
index a72f3f93d..d8e20b602 100644
--- a/projects/portal/src/app/models/yield-aggregators/yield-aggregator.model.ts
+++ b/projects/portal/src/app/models/yield-aggregators/yield-aggregator.model.ts
@@ -1,3 +1,5 @@
+import { StrategyInfo } from '../config.service';
+
 export type DepositToVaultRequest = {
   vaultId: string;
   denom: string;
@@ -35,3 +37,15 @@ export type TransferVaultRequest = {
   vaultId: string;
   recipientAddress: string;
 };
+
+export type VaultInfo = {
+  id: string;
+  symbol?: string;
+  name?: string;
+  description?: string;
+  gitUrl?: string;
+  minApy: number;
+  maxApy?: number;
+  certainty: boolean;
+  poolInfos: (StrategyInfo & { weight?: string })[];
+};
diff --git a/projects/portal/src/app/models/yield-aggregators/yield-aggregator.service.ts b/projects/portal/src/app/models/yield-aggregators/yield-aggregator.service.ts
index 064e99b79..ba8918538 100644
--- a/projects/portal/src/app/models/yield-aggregators/yield-aggregator.service.ts
+++ b/projects/portal/src/app/models/yield-aggregators/yield-aggregator.service.ts
@@ -1,10 +1,11 @@
-import { Config, YieldInfo } from '../config.service';
+import { Config, StrategyInfo } from '../config.service';
 import { getDenomExponent } from '../cosmos/bank.model';
 import { BankQueryService } from '../cosmos/bank.query.service';
 import { BankService } from '../cosmos/bank.service';
 import { TxCommonService } from '../cosmos/tx-common.service';
 import { OsmosisPoolAPRs } from './osmosis/osmosis-pool.model';
 import { OsmosisPoolService } from './osmosis/osmosis-pool.service';
+import { VaultInfo } from './yield-aggregator.model';
 import { Injectable } from '@angular/core';
 import cosmosclient from '@cosmos-client/core';
 import Long from 'long';
@@ -183,7 +184,7 @@ export class YieldAggregatorService {
     );
   }
 
-  async getStrategyAPR(strategyInfo?: YieldInfo): Promise<OsmosisPoolAPRs> {
+  async getStrategyAPR(strategyInfo?: StrategyInfo): Promise<OsmosisPoolAPRs> {
     if (!strategyInfo) {
       return { totalAPR: 0 };
     }
@@ -201,7 +202,7 @@ export class YieldAggregatorService {
     return { totalAPR: strategyInfo.minApy };
   }
 
-  async getStrategySuperfluidAPR(strategyInfo?: YieldInfo): Promise<number | undefined> {
+  async getStrategySuperfluidAPR(strategyInfo?: StrategyInfo): Promise<number | undefined> {
     if (!strategyInfo) {
       return;
     }
@@ -213,22 +214,18 @@ export class YieldAggregatorService {
     return;
   }
 
-  async calcVaultAPY(vault: Vault200Response, config: Config): Promise<YieldInfo> {
+  async calcVaultAPY(vault: Vault200Response, config: Config): Promise<VaultInfo> {
     if (!vault.vault?.strategy_weights) {
       return {
         id: vault.vault?.id || '',
-        denom: vault.vault?.symbol || '',
-        name: vault.vault?.name || '',
-        description: vault.vault?.description || '',
-        gitURL: '',
         minApy: 0,
-        maxApy: 0,
         certainty: false,
-        poolInfo: { type: 'osmosis', poolId: '' },
+        poolInfos: [],
       };
     }
     let vaultAPY = 0;
     let vaultAPYCertainty = false;
+    let poolInfos: (StrategyInfo & { weight?: string })[] = [];
 
     for (const strategyWeight of vault.vault.strategy_weights) {
       const strategyInfo = config?.strategiesInfo?.find(
@@ -241,6 +238,7 @@ export class YieldAggregatorService {
       }
       const poolInfo = strategyInfo.poolInfo;
       if (poolInfo.type === 'osmosis') {
+        poolInfos.push({ ...strategyInfo, weight: strategyWeight.weight });
         if (poolInfo.apr) {
           vaultAPY += poolInfo.apr * Number(strategyWeight.weight);
           continue;
@@ -252,14 +250,13 @@ export class YieldAggregatorService {
 
     return {
       id: vault.vault?.id || '',
-      denom: vault.vault?.symbol || '',
-      name: vault.vault?.name || '',
-      description: vault.vault?.description || '',
-      gitURL: '',
+      symbol: vault.vault?.symbol,
+      name: vault.vault?.name,
+      description: vault.vault?.description,
       minApy: vaultAPY,
       maxApy: vaultAPY,
       certainty: vaultAPYCertainty,
-      poolInfo: { type: 'osmosis', poolId: '' },
+      poolInfos,
     };
   }
 }
diff --git a/projects/portal/src/app/pages/yieldaggregator/strategies/strategy/strategy.component.ts b/projects/portal/src/app/pages/yieldaggregator/strategies/strategy/strategy.component.ts
index b13c04732..fd4487c38 100644
--- a/projects/portal/src/app/pages/yieldaggregator/strategies/strategy/strategy.component.ts
+++ b/projects/portal/src/app/pages/yieldaggregator/strategies/strategy/strategy.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import cosmosclient from '@cosmos-client/core';
-import { ConfigService, YieldInfo } from 'projects/portal/src/app/models/config.service';
+import { ConfigService, StrategyInfo } from 'projects/portal/src/app/models/config.service';
 import { BankQueryService } from 'projects/portal/src/app/models/cosmos/bank.query.service';
 import { OsmosisPoolAPRs } from 'projects/portal/src/app/models/yield-aggregators/osmosis/osmosis-pool.model';
 import { YieldAggregatorQueryService } from 'projects/portal/src/app/models/yield-aggregators/yield-aggregator.query.service';
@@ -28,7 +28,7 @@ export class StrategyComponent implements OnInit {
   strategy$: Observable<StrategyAll200ResponseStrategiesInner | undefined>;
   vaults$: Observable<VaultAll200ResponseVaultsInner[]>;
   weights$: Observable<(string | undefined)[]>;
-  strategyInfo$: Observable<YieldInfo | undefined>;
+  strategyInfo$: Observable<StrategyInfo | undefined>;
   strategyAPR$: Observable<OsmosisPoolAPRs>;
 
   constructor(
diff --git a/projects/portal/src/app/pages/yieldaggregator/vaults/vault/vault.component.ts b/projects/portal/src/app/pages/yieldaggregator/vaults/vault/vault.component.ts
index 1771ec287..a8cdd8723 100644
--- a/projects/portal/src/app/pages/yieldaggregator/vaults/vault/vault.component.ts
+++ b/projects/portal/src/app/pages/yieldaggregator/vaults/vault/vault.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import cosmosclient from '@cosmos-client/core';
 import { BandProtocolService } from 'projects/portal/src/app/models/band-protocols/band-protocol.service';
-import { ConfigService, YieldInfo } from 'projects/portal/src/app/models/config.service';
+import { ConfigService } from 'projects/portal/src/app/models/config.service';
 import { getDenomExponent } from 'projects/portal/src/app/models/cosmos/bank.model';
 import { BankQueryService } from 'projects/portal/src/app/models/cosmos/bank.query.service';
 import { WalletApplicationService } from 'projects/portal/src/app/models/wallets/wallet.application.service';
@@ -11,6 +11,7 @@ import { WalletService } from 'projects/portal/src/app/models/wallets/wallet.ser
 import { YieldAggregatorApplicationService } from 'projects/portal/src/app/models/yield-aggregators/yield-aggregator.application.service';
 import {
   DepositToVaultRequest,
+  VaultInfo,
   WithdrawFromVaultRequest,
   WithdrawFromVaultWithUnbondingRequest,
 } from 'projects/portal/src/app/models/yield-aggregators/yield-aggregator.model';
@@ -53,7 +54,7 @@ export class VaultComponent implements OnInit {
   estimatedDepositedAmount$: Observable<EstimateRedeemAmount200Response>;
   vaultBalance$: Observable<cosmosclient.proto.cosmos.base.v1beta1.ICoin>;
   usdDepositAmount$: Observable<number>;
-  vaultInfo$: Observable<YieldInfo>;
+  vaultInfo$: Observable<VaultInfo>;
   externalWalletAddress: string | undefined;
 
   constructor(
diff --git a/projects/portal/src/app/pages/yieldaggregator/vaults/vaults.component.ts b/projects/portal/src/app/pages/yieldaggregator/vaults/vaults.component.ts
index 9f551ac77..db02def04 100644
--- a/projects/portal/src/app/pages/yieldaggregator/vaults/vaults.component.ts
+++ b/projects/portal/src/app/pages/yieldaggregator/vaults/vaults.component.ts
@@ -1,8 +1,9 @@
 import { BandProtocolService } from '../../../models/band-protocols/band-protocol.service';
-import { ConfigService, YieldInfo } from '../../../models/config.service';
+import { ConfigService } from '../../../models/config.service';
 import { BankQueryService } from '../../../models/cosmos/bank.query.service';
 import { StoredWallet } from '../../../models/wallets/wallet.model';
 import { WalletService } from '../../../models/wallets/wallet.service';
+import { VaultInfo } from '../../../models/yield-aggregators/yield-aggregator.model';
 import { YieldAggregatorQueryService } from '../../../models/yield-aggregators/yield-aggregator.query.service';
 import { YieldAggregatorService } from '../../../models/yield-aggregators/yield-aggregator.service';
 import { Component, OnInit } from '@angular/core';
@@ -20,7 +21,7 @@ export class VaultsComponent implements OnInit {
   address$: Observable<string>;
   vaults$: Observable<VaultAll200ResponseVaultsInner[]>;
   symbols$: Observable<{ symbol: string; display: string; img: string }[]>;
-  vaultsInfo$: Observable<YieldInfo[]>;
+  vaultsInfo$: Observable<VaultInfo[]>;
   totalDeposits$: Observable<number[]>;
   keyword$: Observable<string>;
   sortType$: BehaviorSubject<string> = new BehaviorSubject<string>('id');
@@ -46,7 +47,7 @@ export class VaultsComponent implements OnInit {
     const symbolMetadataMap$ = this.bankQuery.getSymbolMetadataMap$();
     const vaultYieldMap$ = combineLatest([vaults$, config$]).pipe(
       switchMap(async ([vaults, config]) => {
-        const results: YieldInfo[] = [];
+        const results: VaultInfo[] = [];
         if (!config) {
           return results;
         }
@@ -57,7 +58,7 @@ export class VaultsComponent implements OnInit {
         return results;
       }),
       map((yields) => {
-        const yieldMap: { [id: string]: YieldInfo } = {};
+        const yieldMap: { [id: string]: VaultInfo } = {};
         for (const y of yields) {
           yieldMap[y.id] = y;
         }
diff --git a/projects/portal/src/app/views/yieldaggregator/strategies/strategy/strategy.component.html b/projects/portal/src/app/views/yieldaggregator/strategies/strategy/strategy.component.html
index c7f0c999b..4f7313901 100644
--- a/projects/portal/src/app/views/yieldaggregator/strategies/strategy/strategy.component.html
+++ b/projects/portal/src/app/views/yieldaggregator/strategies/strategy/strategy.component.html
@@ -57,6 +57,10 @@ <h2 class="card-title">
                 }}</a>
               </td>
             </tr>
+            <tr>
+              <td>Unbonding time</td>
+              <td>{{ strategyInfo?.unbondingTimeSec | secondToDate }} Days</td>
+            </tr>
           </tbody>
         </table>
 
diff --git a/projects/portal/src/app/views/yieldaggregator/strategies/strategy/strategy.component.ts b/projects/portal/src/app/views/yieldaggregator/strategies/strategy/strategy.component.ts
index 869fde069..b41d3f327 100644
--- a/projects/portal/src/app/views/yieldaggregator/strategies/strategy/strategy.component.ts
+++ b/projects/portal/src/app/views/yieldaggregator/strategies/strategy/strategy.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges, OnInit } from '@angular/core';
 import cosmosclient from '@cosmos-client/core';
-import { YieldInfo } from 'projects/portal/src/app/models/config.service';
+import { StrategyInfo } from 'projects/portal/src/app/models/config.service';
 import { OsmosisPoolAPRs } from 'projects/portal/src/app/models/yield-aggregators/osmosis/osmosis-pool.model';
 import {
   StrategyAll200ResponseStrategiesInner,
@@ -30,7 +30,7 @@ export class StrategyComponent implements OnInit, OnChanges {
   @Input()
   weights?: (string | undefined)[] | null;
   @Input()
-  strategyInfo?: YieldInfo | null;
+  strategyInfo?: StrategyInfo | null;
   @Input()
   strategyAPR?: OsmosisPoolAPRs | null;
 
diff --git a/projects/portal/src/app/views/yieldaggregator/vaults/vault/vault.component.html b/projects/portal/src/app/views/yieldaggregator/vaults/vault/vault.component.html
index 5e4e6cf29..b113a51c7 100644
--- a/projects/portal/src/app/views/yieldaggregator/vaults/vault/vault.component.html
+++ b/projects/portal/src/app/views/yieldaggregator/vaults/vault/vault.component.html
@@ -109,32 +109,6 @@ <h3 class="font-bold text-lg">What is the withdrawal reserve rate?</h3>
                 </td>
                 <td>{{ vault?.vault?.withdraw_reserve_rate | percent : '1.0-2' }}</td>
               </tr>
-              <!-- <tr>
-                <td class="flex flex-row items-center gap-2">
-                  <span>Bonus APY</span>
-                  <label for="modal-bonus" class="label-text cursor-pointer">
-                    <span class="material-symbols-outlined">help</span>
-                  </label>
-
-                  <input type="checkbox" id="modal-bonus" class="modal-toggle" />
-                  <div class="modal modal-bottom sm:modal-middle">
-                    <div class="modal-box">
-                      <h3 class="font-bold text-lg">What is the bonus APY?</h3>
-                      <p class="my-4">You can receive additional APYs for the campaign period.</p>
-                      <p>
-                        For more information on the bonus APY, visit
-                        <a href="https://docs.ununifi.io" target="_blank">
-                          <u class="text-info">the UnUniFi Campaign Website</u> </a
-                        >.
-                      </p>
-                      <div class="modal-action">
-                        <label for="modal-bonus" class="btn">Okay</label>
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td>{{ 'Coming soon' }}</td>
-              </tr> -->
             </tbody>
           </table>
         </div>
@@ -378,6 +352,44 @@ <h3 class="font-bold text-lg">Chain that you deposit from</h3>
       </div>
       <div class="card-body" *ngIf="tab === 'burn'">
         <form #withdrawFormRef="ngForm" (submit)="onSubmitWithdraw()">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Enter amount</span>
+              <span class="label-text-alt flex flex-row gap-2">
+                <span class="cursor-pointer" (click)="setBurnAmount(0.25)"> 25% </span>
+                <span class="cursor-pointer" (click)="setBurnAmount(0.5)"> 50% </span>
+                <span class="cursor-pointer" (click)="setBurnAmount(1)"> 100% </span>
+              </span>
+            </label>
+            <label class="input-group">
+              <input
+                #withdrawAmountRef
+                #withdrawAmountNgModelRef="ngModel"
+                placeholder="0.000000"
+                required
+                type="number"
+                class="input input-bordered w-full"
+                [class]="{
+                  'input-error': withdrawAmountNgModelRef.errors
+                }"
+                [min]="0"
+                [max]="denomBalancesMap?.['yieldaggregator/vaults/'+ vault?.vault?.id || '']?.amount | coinAmount: denom"
+                pattern="^[0-9]*\.?[0-9]{0,6}$"
+                [(ngModel)]="burnAmount"
+                name="burnAmount"
+                (input)="onWithdrawAmountChange()"
+              />
+              <span class="whitespace-nowrap">YA-VAULT-{{ vault?.vault?.id }}</span>
+            </label>
+            <span class="label">
+              <span class="label-text-alt">Available balance:</span>
+              <label class="label-text-alt">
+                {{ (denomBalancesMap?.['yieldaggregator/vaults/'+ vault?.vault?.id]?.amount||'0') | coinAmount }}
+                {{ 'YA-VAULT-' + vault?.vault?.id }}
+              </label>
+            </span>
+          </div>
+
           <div class="form-control">
             <label class="label">
               <div class="flex flex-row items-center gap-2">
@@ -413,67 +425,63 @@ <h3 class="font-bold text-lg">What is the unbonding period?</h3>
                 </div>
               </div>
             </label>
-            <label class="input-group">
-              <select
-                class="select select-bordered w-full"
-                [class]="{
-                  'select-error': !withdrawOptionId
-                }"
-                name="withdrawOption"
-                [(ngModel)]="withdrawOptionId"
-              >
-                <option [value]="undefined" disabled>Select Withdrawal Option</option>
-                <ng-container *ngFor="let option of withdrawOptions">
-                  <option [value]="option.id" [disabled]="option.disabled">
-                    {{ option.display }}
-                  </option>
-                </ng-container>
-              </select>
-            </label>
-          </div>
-          <div class="form-control">
-            <label class="label">
-              <span class="label-text">Enter amount</span>
-              <span class="label-text-alt flex flex-row gap-2">
-                <span class="cursor-pointer" (click)="setBurnAmount(0.25)"> 25% </span>
-                <span class="cursor-pointer" (click)="setBurnAmount(0.5)"> 50% </span>
-                <span class="cursor-pointer" (click)="setBurnAmount(1)"> 100% </span>
-              </span>
-            </label>
-            <label class="input-group">
-              <input
-                #withdrawAmountRef
-                #withdrawAmountNgModelRef="ngModel"
-                placeholder="0.000000"
-                required
-                type="number"
-                class="input input-bordered w-full"
-                [class]="{
-                  'input-error': withdrawAmountNgModelRef.errors && withdrawAmountNgModelRef.touched
-                }"
-                [min]="0"
-                [max]="denomBalancesMap?.['yieldaggregator/vaults/'+ vault?.vault?.id || '']?.amount | coinAmount: denom"
-                pattern="^[0-9]*\.?[0-9]{0,6}$"
-                [(ngModel)]="burnAmount"
-                name="burnAmount"
-                (input)="onWithdrawAmountChange()"
-              />
-              <span class="whitespace-nowrap">YA-VAULT-{{ vault?.vault?.id }}</span>
-            </label>
-            <span class="label">
-              <span class="label-text-alt">Available balance:</span>
-              <label class="label-text-alt">
-                {{ denomBalancesMap?.['yieldaggregator/vaults/'+ vault?.vault?.id]?.amount | coinAmount }}
-                {{ 'YA-VAULT-' + vault?.vault?.id }}
-              </label>
-            </span>
+            <div class="flex flex-col w-full lg:flex-row">
+              <ng-container *ngFor="let option of withdrawOptions; last as last">
+                <div
+                  class="grid flex-grow card bg-base-300 rounded-box hover cursor-pointer"
+                  [class]="{
+                    'bg-primary': selectedWithdrawOption?.id === option.id
+                  }"
+                  (click)="onClickWithdrawOption(option)"
+                >
+                  <div class="card-body place-items-center">
+                    <button type="button" class="btn btn-circle btn-secondary">
+                      <span class="material-symbols-outlined">{{ option.icon }}</span>
+                    </button>
+                    <h2 class="card-title">{{ option.name }}</h2>
+                    <p>{{ option.description }}</p>
+                    <div class="overflow-x-auto" *ngIf="option.id === 0">
+                      <p class="text-center" *ngIf="vaultInfo === null">
+                        <span class="loading loading-ring loading-lg"></span>
+                      </p>
+                      <table class="table w-full">
+                        <tbody>
+                          <ng-container *ngFor="let pool of vaultInfo?.poolInfos">
+                            <tr>
+                              <td>{{ pool.unbondingTimeSec | secondToDate }} Days</td>
+                              <td>{{ pool.weight | percent : '1.0-2' }}</td>
+                            </tr>
+                          </ng-container>
+                        </tbody>
+                      </table>
+                    </div>
+                    <div class="card-actions">
+                      <div class="badge badge-lg badge-outline">
+                        Redeem: {{ estimatedRedeemAmount?.total_amount | coinAmount }}
+                        {{ vault?.vault?.symbol }}
+                      </div>
+                      <div>-</div>
+                      <div class="badge badge-lg badge-outline" *ngIf="option.id === 0">
+                        Fee: 0 {{ vault?.vault?.symbol }}
+                      </div>
+                      <div class="badge badge-lg badge-outline" *ngIf="option.id === 1">
+                        Fee: {{ estimatedRedeemAmount?.fee | coinAmount }}
+                        {{ vault?.vault?.symbol }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div *ngIf="!last" class="divider lg:divider-horizontal">OR</div>
+              </ng-container>
+            </div>
           </div>
+
           <div class="form-control">
             <label class="label">
-              <span class="label-text">You will receive {{ withdrawOptionId }}</span>
+              <span class="label-text">You will receive</span>
             </label>
 
-            <div *ngIf="withdrawOptionId === 'immediate'">
+            <div *ngIf="selectedWithdrawOption?.id === 1">
               <label class="input-group">
                 <input
                   disabled
@@ -489,7 +497,7 @@ <h3 class="font-bold text-lg">What is the unbonding period?</h3>
                 </span>
               </span>
             </div>
-            <div *ngIf="withdrawOptionId === 'unbonding'">
+            <div *ngIf="selectedWithdrawOption?.id === 0">
               <label class="input-group">
                 <input
                   disabled
@@ -506,7 +514,7 @@ <h3 class="font-bold text-lg">What is the unbonding period?</h3>
               class="btn btn-secondary px-8"
               [disabled]="
                 withdrawFormRef.invalid ||
-                (withdrawOptionId === 'immediate' && estimatedRedeemAmount?.redeem_amount === '0')
+                (selectedWithdrawOption?.id === 1 && estimatedRedeemAmount?.redeem_amount === '0')
               "
             >
               Withdrawal
diff --git a/projects/portal/src/app/views/yieldaggregator/vaults/vault/vault.component.ts b/projects/portal/src/app/views/yieldaggregator/vaults/vault/vault.component.ts
index aa435da1c..a94db2749 100644
--- a/projects/portal/src/app/views/yieldaggregator/vaults/vault/vault.component.ts
+++ b/projects/portal/src/app/views/yieldaggregator/vaults/vault/vault.component.ts
@@ -1,9 +1,9 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
 import cosmosclient from '@cosmos-client/core';
-import { YieldInfo } from 'projects/portal/src/app/models/config.service';
 import { getDenomExponent } from 'projects/portal/src/app/models/cosmos/bank.model';
 import {
   DepositToVaultRequest,
+  VaultInfo,
   WithdrawFromVaultRequest,
   WithdrawFromVaultWithUnbondingRequest,
 } from 'projects/portal/src/app/models/yield-aggregators/yield-aggregator.model';
@@ -25,8 +25,10 @@ export type ExternalChain = {
 };
 
 export type WithdrawOption = {
-  id: string;
-  display: string;
+  id: number;
+  name: string;
+  description: string;
+  icon?: string;
   disabled: boolean;
 };
 
@@ -67,7 +69,7 @@ export class VaultComponent implements OnInit, OnChanges {
   @Input()
   usdDepositAmount?: number | null;
   @Input()
-  vaultInfo?: YieldInfo | null;
+  vaultInfo?: VaultInfo | null;
   @Input()
   externalWalletAddress?: string;
 
@@ -96,17 +98,21 @@ export class VaultComponent implements OnInit, OnChanges {
   };
   withdrawOptions: WithdrawOption[] = [
     {
-      id: 'unbonding',
-      display: 'Withdrawal after the unbonding period',
+      id: 0,
+      name: 'unbonding',
+      description: 'Withdrawal after the following unbonding time',
+      icon: 'pending_actions',
       disabled: false,
     },
     {
-      id: 'immediate',
-      display: 'Immediate withdrawal with extra fee',
+      id: 1,
+      name: 'immediate',
+      description: 'Withdrawal as soon as transaction is approved',
+      icon: 'bolt',
       disabled: false,
     },
   ];
-  withdrawOptionId?: string;
+  selectedWithdrawOption?: WithdrawOption;
   chains: ExternalChain[] = [
     {
       id: 'ununifi',
@@ -180,6 +186,7 @@ export class VaultComponent implements OnInit, OnChanges {
     this.appWithdraw = new EventEmitter();
     this.appWithdrawWithUnbonding = new EventEmitter();
     this.appClickChain = new EventEmitter();
+    this.selectedWithdrawOption = this.withdrawOptions[0];
   }
 
   ngOnInit(): void {}
@@ -192,6 +199,10 @@ export class VaultComponent implements OnInit, OnChanges {
     (global as any).chain_select_modal.close();
   }
 
+  onClickWithdrawOption(option: WithdrawOption) {
+    this.selectedWithdrawOption = option;
+  }
+
   onDepositAmountChange() {
     this.changeDeposit.emit(this.mintAmount);
   }
@@ -221,21 +232,21 @@ export class VaultComponent implements OnInit, OnChanges {
       alert('Please input amount');
       return;
     }
-    if (this.withdrawOptionId === 'immediate') {
-      this.appWithdraw.emit({
+    if (this.selectedWithdrawOption?.id === 0) {
+      this.appWithdrawWithUnbonding.emit({
         vaultId: this.vault?.vault?.id!,
         readableAmount: this.burnAmount,
         lp_denom: 'yieldaggregator/vaults/' + this.vault?.vault?.id,
-        redeemAmount: Number(this.estimatedRedeemAmount?.redeem_amount),
-        feeAmount: Number(this.estimatedRedeemAmount?.fee),
-        symbol: this.vault?.vault?.symbol!,
       });
     }
-    if (this.withdrawOptionId === 'unbonding') {
-      this.appWithdrawWithUnbonding.emit({
+    if (this.selectedWithdrawOption?.id === 1) {
+      this.appWithdraw.emit({
         vaultId: this.vault?.vault?.id!,
         readableAmount: this.burnAmount,
         lp_denom: 'yieldaggregator/vaults/' + this.vault?.vault?.id,
+        redeemAmount: Number(this.estimatedRedeemAmount?.redeem_amount),
+        feeAmount: Number(this.estimatedRedeemAmount?.fee),
+        symbol: this.vault?.vault?.symbol!,
       });
     }
   }
diff --git a/projects/portal/src/app/views/yieldaggregator/vaults/vaults.component.ts b/projects/portal/src/app/views/yieldaggregator/vaults/vaults.component.ts
index caa2b33da..17558bf70 100644
--- a/projects/portal/src/app/views/yieldaggregator/vaults/vaults.component.ts
+++ b/projects/portal/src/app/views/yieldaggregator/vaults/vaults.component.ts
@@ -1,4 +1,4 @@
-import { YieldInfo } from '../../../models/config.service';
+import { VaultInfo } from '../../../models/yield-aggregators/yield-aggregator.model';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Router } from '@angular/router';
 import { VaultAll200ResponseVaultsInner } from 'ununifi-client/esm/openapi';
@@ -16,7 +16,7 @@ export class VaultsComponent implements OnInit {
   @Input()
   symbols?: { symbol: string; display: string; img: string }[] | null;
   @Input()
-  vaultsInfo?: YieldInfo[] | null;
+  vaultsInfo?: VaultInfo[] | null;
   @Input()
   totalDeposits?: number[] | null;
   @Input()