diff --git a/src/plugins/admin/Funds.tsx b/src/plugins/admin/Funds.tsx
index 143cbe6b2..b0a0e6f36 100644
--- a/src/plugins/admin/Funds.tsx
+++ b/src/plugins/admin/Funds.tsx
@@ -1,12 +1,14 @@
 import React, { useEffect, useState } from 'react'
+import type { UndefinedOr } from '@devprotocol/util-ts'
 
 import StakeInfo from './StakeInfo'
 import { KYCStatuses } from './Withdrawal'
 import { ALL_CURRENCIES } from '@constants/memberships'
+import CreateClubsVault from './components/CreateClubsVault'
 import CurrencyMembershipInfo from './CurrencyMembershipInfo'
-import NotVerifiedBannerImg from './assets/NotVerifiedBannerImg.svg'
 
 const FundsInfo = (props: {
+  vaultAddress: UndefinedOr<string>
   propertyAddress: string
   chainId: number
   uniqueBeneficiaries: string[]
@@ -64,9 +66,103 @@ const FundsInfo = (props: {
 
   return (
     <>
-      {/* <!-- Memberships/NFT section --> */}
+      {/* <!-- Clubs vault section --> */}
       <div>
-        <p className="text-3xl font-bold">Memberships/NFTs</p>
+        <p className="text-3xl font-bold">Clubs Vault</p>
+
+        {/* <!-- Create vault button --> */}
+        {!props.vaultAddress && (
+          <div className="mt-8 w-full max-w-full">
+            <CreateClubsVault
+              isKYCVerified={KYCStatuses.VERIFIED === props.KYCStatus}
+            />
+          </div>
+        )}
+
+        {/* <!-- Your withdrawable funds --> */}
+        {props.vaultAddress && (
+          <div className="mt-8 w-full max-w-full rounded-2xl border border-dp-blue-grey-300 p-4 dark:border-dp-blue-grey-200 lg:p-8">
+            <p className="w-fit text-base font-bold opacity-50">
+              Your withdrawable funds
+            </p>
+            <section className="mt-5 flex items-center gap-5">
+              <p className="text-4xl">
+                $
+                {new Intl.NumberFormat(undefined, {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 3,
+                }).format(
+                  Number(
+                    yourTotalWithdrawableInDollars.reduce(
+                      (prev: string, curr: string) =>
+                        String(Number(prev) + Number(curr)),
+                    ),
+                  ) || 0,
+                )}
+              </p>
+              <p className="w-fit text-base font-bold opacity-50">
+                equivalent tokens
+              </p>
+            </section>
+            {ALL_CURRENCIES.map((curr, id) => (
+              <CurrencyMembershipInfo
+                key={`${curr}:=:${id}`}
+                chainId={props.chainId}
+                currency={curr}
+                allCurrencyIndex={id}
+                isYourWithdrawable={true}
+                uniqueBeneficiaries={[]}
+                updateWithdrawableInDollars={updateYourTotalWithdrawable}
+                isKYCVerified={KYCStatuses.VERIFIED === props.KYCStatus}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* <!-- Total withdrawable funds --> */}
+        {props.vaultAddress && (
+          <div className="mt-8 w-full max-w-full rounded-2xl border border-dp-blue-grey-300 p-4 dark:border-dp-blue-grey-200 lg:p-8">
+            <p className="w-fit text-base font-bold opacity-50">
+              Total withdrawable funds
+            </p>
+            <section className="mt-5 flex items-center gap-5">
+              <p className="text-2xl">
+                $
+                {new Intl.NumberFormat(undefined, {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 3,
+                }).format(
+                  Number(
+                    totalWithrawableInDollars.reduce(
+                      (prev: string, curr: string) =>
+                        String(Number(prev) + Number(curr)),
+                    ),
+                  ) || 0,
+                )}
+              </p>
+              <p className="w-fit text-base font-bold opacity-50">
+                equivalent tokens
+              </p>
+            </section>
+            {ALL_CURRENCIES.map((curr, id) => (
+              <CurrencyMembershipInfo
+                key={`${curr}:=:${id}`}
+                chainId={props.chainId}
+                currency={curr}
+                allCurrencyIndex={id}
+                isYourWithdrawable={false}
+                uniqueBeneficiaries={props.uniqueBeneficiaries}
+                updateWithdrawableInDollars={updateTotalWithdrawable}
+                isKYCVerified={false}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* <!-- Direct payments section --> */}
+      <div>
+        <p className="text-3xl font-bold">Direct Payments</p>
 
         {/* <!-- Your withdrawable funds --> */}
         <div className="mt-8 w-full max-w-full rounded-2xl border border-dp-blue-grey-300 p-4 dark:border-dp-blue-grey-200 lg:p-8">
diff --git a/src/plugins/admin/Withdrawal.tsx b/src/plugins/admin/Withdrawal.tsx
index 2bf78b958..227b12282 100644
--- a/src/plugins/admin/Withdrawal.tsx
+++ b/src/plugins/admin/Withdrawal.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 
 import KYCInfo from './KYCInfo'
 import FundsInfo from './Funds'
+import type { UndefinedOr } from '@devprotocol/util-ts'
 
 export enum KYCStatuses {
   VERIFIED,
@@ -10,6 +11,7 @@ export enum KYCStatuses {
 }
 
 export const Withdrawal = (props: {
+  vaultAddress: UndefinedOr<string>
   propertyAddress: string
   chainId: number
   uniqueBeneficiaries: string[]
@@ -30,6 +32,7 @@ export const Withdrawal = (props: {
       <FundsInfo
         KYCStatus={KYCStatus}
         chainId={props.chainId}
+        vaultAddress={props.vaultAddress}
         uniqueBeneficiaries={props.uniqueBeneficiaries}
         propertyAddress={props.propertyAddress}
       />
diff --git a/src/plugins/admin/assets/CreateVault.svg b/src/plugins/admin/assets/CreateVault.svg
new file mode 100644
index 000000000..ddf409ff6
--- /dev/null
+++ b/src/plugins/admin/assets/CreateVault.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 21.875V13.625M15.75 21.875V13.625M8.25 21.875V13.625M3 9.875L12 3.875L21 9.875M19.5 21.875V11.207C17.0189 10.8186 14.5113 10.624 12 10.625C9.449 10.625 6.944 10.825 4.5 11.207V21.875M3 21.875H21M12 7.625H12.008V7.633H12V7.625Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/plugins/admin/components/CreateClubsVault.tsx b/src/plugins/admin/components/CreateClubsVault.tsx
new file mode 100644
index 000000000..a10d9080c
--- /dev/null
+++ b/src/plugins/admin/components/CreateClubsVault.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+
+import CreateVaultSVG from '../assets/CreateVault.svg'
+
+interface ICreateClubsVaultProps {
+  isKYCVerified: boolean
+}
+
+const CreateClubsVault = (props: ICreateClubsVaultProps) => {
+  const [isCreatingVault, setIsCreatingVault] = useState<boolean>(false)
+
+  const createVault = async () => {
+    setIsCreatingVault(true)
+
+    // @TODO: add logic to create vault here.
+
+    setIsCreatingVault(false)
+  }
+
+  return (
+    <button
+      onClick={() => createVault()}
+      disabled={!props.isKYCVerified}
+      className={`hs-button is-filled col-span-2 flex justify-center items-center py-4 px-8 ${
+        !props.isKYCVerified
+          ? 'disabled:cursor-not-allowed disabled:hover:animate-[horizontal-shaking_.06s_5]'
+          : ''
+      } lg:col-span-1 ${
+        isCreatingVault ? 'animate-pulse bg-dp-blue-grey-600' : ''
+      }`}
+    >
+      <div className="min-w-6 min-h-6">
+        <img src={CreateVaultSVG.src} alt="Create clubs vault" />
+      </div>
+      <p className="w-fit font-body text-base text-center font-bold text-dp-white-ink">
+        Create Clubs Vault
+      </p>
+    </button>
+  )
+}
+
+export default CreateClubsVault
diff --git a/src/plugins/admin/funds.astro b/src/plugins/admin/funds.astro
index 44e05f082..fc520636c 100644
--- a/src/plugins/admin/funds.astro
+++ b/src/plugins/admin/funds.astro
@@ -1,11 +1,10 @@
 ---
-import FundsTeaser from './FundsTeaser.tsx'
 import { ZeroAddress } from 'ethers'
 import type { Membership } from '@plugins/memberships'
 
-import { KYCStatuses, Withdrawal } from './Withdrawal'
+import { Withdrawal } from './Withdrawal'
 
-const { memberships, chainId, propertyAddress } = Astro.props
+const { memberships, chainId, propertyAddress, vaultAddress } = Astro.props
 
 let beneficiaries: string[] = memberships.map(
   (membership: Membership) => membership.fee?.beneficiary ?? ZeroAddress,
@@ -22,6 +21,7 @@ const uniqueBeneficiaries = new Array(...new Set(beneficiaries))
       chainId={chainId}
       uniqueBeneficiaries={uniqueBeneficiaries}
       propertyAddress={propertyAddress}
+      vaultAddress={vaultAddress}
     />
   </div>
 </section>
diff --git a/src/plugins/admin/index.ts b/src/plugins/admin/index.ts
index 83067d30f..ee4550ecc 100644
--- a/src/plugins/admin/index.ts
+++ b/src/plugins/admin/index.ts
@@ -15,7 +15,7 @@ import { default as Overview } from './overview.astro'
 
 export const getPagePaths = (async () => []) satisfies ClubsFunctionGetPagePaths
 
-export const getAdminPaths = (async (_, config) => {
+export const getAdminPaths = (async (options, config) => {
   const membersihpPlugin = config.plugins.find(
     (plg) => plg.id === 'devprotocol:clubs:simple-memberships',
   )
@@ -23,6 +23,9 @@ export const getAdminPaths = (async (_, config) => {
     (membersihpPlugin?.options.find((opt) => opt.key === 'memberships')
       ?.value as UndefinedOr<Membership[]>) ?? []
 
+  const vaultAddress = config.options?.find((option) => option.key === 'vault')
+    ?.value as UndefinedOr<string>
+
   return [
     {
       paths: ['general'],
@@ -52,6 +55,7 @@ export const getAdminPaths = (async (_, config) => {
         propertyAddress: config.propertyAddress,
         rpcUrl: config.rpcUrl,
         chainId: config.chainId,
+        vaultAddress,
       },
     },
   ]