diff --git a/frontend/src/app/core/pages/contracts-create/index.tsx b/frontend/src/app/core/pages/contracts-create/index.tsx
index fbf5fc4c..fc15d95b 100644
--- a/frontend/src/app/core/pages/contracts-create/index.tsx
+++ b/frontend/src/app/core/pages/contracts-create/index.tsx
@@ -67,7 +67,15 @@ export const ContractsCreate: React.FC = () => {
       const codVault = ContractsService.loadAccount(vault.wallet.key.publicKey)
       const codTxInvocation = ContractsService.getTxInvocation(
         codVault,
-        INNER_FEE
+        INNER_FEE,
+        /*{
+          signers: [opex],
+          header: {
+            fee: BUMP_FEE,
+            source: opex.getPublicKey(),
+            timeout: 60,
+          },
+        }*/
       )
 
       const codClient = new StellarPlus.Contracts.CertificateOfDeposit({
@@ -95,7 +103,7 @@ export const ContractsCreate: React.FC = () => {
       if (!codContractId) throw new Error('Invalid Contract ID')
 
       const contract = {
-        name: 'Yield-bearing asset',
+        name: 'Yield-bearing Asset',
         asset_id: asset.id.toString(),
         vault_id: vault.id.toString(),
         address: codClient.getContractId() || '',
diff --git a/frontend/src/app/core/pages/cost-center/index.tsx b/frontend/src/app/core/pages/cost-center/index.tsx
new file mode 100644
index 00000000..fb3b32e6
--- /dev/null
+++ b/frontend/src/app/core/pages/cost-center/index.tsx
@@ -0,0 +1,303 @@
+import { Flex, VStack, useMediaQuery } from '@chakra-ui/react'
+import React, { useCallback, useEffect, useState } from 'react'
+
+import { useAssets } from 'hooks/useAssets'
+import { useAuth } from 'hooks/useAuth'
+import { useHorizon } from 'hooks/useHorizon'
+import { useTransactions } from 'hooks/useTransactions'
+import { useVaults } from 'hooks/useVaults'
+import { GAService } from 'utils/ga'
+
+import { PathRoute } from 'components/enums/path-route'
+import { SettingsOptions } from 'components/enums/settings-options'
+import { MenuSettings } from 'components/organisms/menu-settings'
+import { Sidebar } from 'components/organisms/sidebar'
+import { CostCenterTemplate } from 'components/templates/cost-center'
+
+export interface IHorizonData {
+  name: string
+  type: string
+  asset: string
+}
+
+export const CostCenter: React.FC = () => {
+  const [isLargerThanMd] = useMediaQuery('(min-width: 768px)')
+  const [sponsorAccount, setSponsorAccount] = useState<string | undefined>()
+  const [transactions, setTransactions] =
+    useState<Hooks.UseHorizonTypes.ITransactions>()
+  const [accountData, setAccountData] =
+    useState<Hooks.UseHorizonTypes.IAccount>()
+  const [latestFeeCharged, setLatestFeeCharged] = useState<number>()
+  const [mostRepeatedType, setMostRepeatedType] = useState<string>()
+
+  const [vaults, setVaults] = useState<Hooks.UseVaultsTypes.IVault[]>()
+  const [assets, setAssets] = useState<Hooks.UseAssetsTypes.IAssetDto[]>()
+  const [historyTransactions, setHistoryTransactions] = useState<
+    Hooks.UseHorizonTypes.ITransactions[]
+  >([])
+
+  const { userPermissions, getUserPermissions } = useAuth()
+  const { getSponsorPK } = useTransactions()
+  const { getTransactions, getAccount } = useHorizon()
+  const { getVaults } = useVaults()
+  const { getAssets } = useAssets()
+
+  useEffect(() => {
+    GAService.GAPageView('Coast center')
+  }, [])
+
+  useEffect(() => {
+    getUserPermissions()
+    getSponsorPK().then(sponsor => setSponsorAccount(sponsor))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useEffect(() => {
+    getVaults(true).then(vaults => setVaults(vaults))
+  }, [getVaults])
+
+  useEffect(() => {
+    getAssets(true).then(assets => setAssets(assets))
+  }, [getAssets])
+
+  useEffect(() => {
+    if (sponsorAccount) {
+      getTransactions(sponsorAccount).then(transactions => {
+        setTransactions(transactions)
+        setLatestFeeCharged(
+          transactions?._embedded.records.reduce(
+            (total, transaction) => total + Number(transaction.fee_charged),
+            0
+          )
+        )
+      })
+    }
+  }, [sponsorAccount, getTransactions])
+
+  useEffect(() => {
+    if (sponsorAccount) {
+      getAccount(sponsorAccount).then(account => setAccountData(account))
+    }
+  }, [sponsorAccount, getTransactions, getAccount])
+
+  const getTransactionsByLink = (action: 'prev' | 'next'): void => {
+    if (action === 'prev') {
+      const transactionsPrev =
+        historyTransactions[historyTransactions.length - 1]
+      setTransactions(transactionsPrev)
+      setHistoryTransactions(previous => previous.slice(0, -1))
+      return
+    }
+
+    const link = transactions?._links.next.href
+    if (link) {
+      setHistoryTransactions(history => [...history, transactions])
+      getTransactions(undefined, link).then(transactions => {
+        setTransactions(transactions)
+      })
+    }
+  }
+
+  const formatAccount = (account: string): string => {
+    return `${account.substring(0, 4)}...${account.substring(
+      account.length - 4,
+      account.length
+    )}`
+  }
+
+  const walletToName = useCallback((publicKey: string): string => {
+    if (
+      assets &&
+      assets.find(asset => asset.distributor.key.publicKey === publicKey)
+    ) {
+      return 'Asset issuer'
+    }
+
+    return (
+      vaults?.find(vault => vault.wallet.key.publicKey === publicKey)?.name ||
+      formatAccount(publicKey)
+    )
+  }, [assets, vaults])
+
+  const getTransactionData = useCallback(
+    (transaction: Hooks.UseHorizonTypes.ITransactionItem): IHorizonData => {
+      const accountCreated = transaction.operations?.find(
+        operation => operation.type === 'create_account'
+      )
+      if (accountCreated) {
+        return {
+          name: walletToName(accountCreated.account || ''),
+          type: 'Account created',
+          asset: '-',
+        }
+      }
+
+      const payment = transaction.operations?.find(
+        operation => operation.type === 'payment'
+      )
+
+      if (
+        payment &&
+        assets?.find(asset => asset.distributor.key.publicKey === payment.to)
+      ) {
+        return {
+          name: '-',
+          type: 'Minted',
+          asset: payment.asset_code || '-',
+        }
+      }
+
+      if (
+        payment &&
+        assets?.find(asset => asset.distributor.key.publicKey === payment.from)
+      ) {
+        return {
+          name: '-',
+          type: assets?.find(asset => asset.issuer.key.publicKey === payment.to)
+            ? 'Burned'
+            : 'Distribute',
+          asset: payment.asset_code || '-',
+        }
+      }
+
+      if (payment) {
+        return {
+          name: `${walletToName(payment.from || '')} to ${walletToName(
+            payment.to || '-'
+          )}`,
+          type: 'Payment',
+          asset: payment.asset_code || '-',
+        }
+      }
+
+      const contractInvoke = transaction.operations?.find(
+        operation => operation.type === 'invoke_host_function'
+      )
+      if (contractInvoke) {
+        return {
+          name: walletToName(contractInvoke.source_account || ''),
+          type: 'Contract invoke',
+          asset: '-',
+        }
+      }
+
+      const trustlineOperation = transaction.operations?.find(
+        operation => operation.type === 'set_trust_line_flags'
+      )
+
+      if (trustlineOperation) {
+        if (trustlineOperation.set_flags_s?.includes('authorized')) {
+          return {
+            name: walletToName(trustlineOperation.trustor || ''),
+            type: 'Authorized',
+            asset: trustlineOperation.asset_code || '-',
+          }
+        }
+
+        if (trustlineOperation.clear_flags_s?.includes('authorized')) {
+          return {
+            name: walletToName(trustlineOperation.trustor || ''),
+            type: 'Freezed',
+            asset: trustlineOperation.asset_code || '-',
+          }
+        }
+      }
+
+      const clawback = transaction.operations?.find(
+        operation => operation.type === 'clawback'
+      )
+
+      if (clawback) {
+        return {
+          name: walletToName(clawback.from || ''),
+          type: 'Clawbacked',
+          asset: clawback.asset_code || '-',
+        }
+      }
+
+      const changeTrust = transaction.operations?.find(
+        operation => operation.type === 'change_trust'
+      )
+      if (changeTrust) {
+        return {
+          name: walletToName(changeTrust.trustor || ''),
+          type: 'Change trustline',
+          asset: changeTrust.asset_code || '-',
+        }
+      }
+
+      const contractRestore = transaction.operations?.find(
+        operation => operation.type === 'restore_footprint'
+      )
+      if (contractRestore) {
+        return {
+          name: walletToName(contractRestore.source_account || ''),
+          type: 'Contract restore',
+          asset: '-',
+        }
+      }
+
+      return {
+        name: '-',
+        type: '-',
+        asset: '-',
+      }
+    },
+    [assets, walletToName]
+  )
+
+  useEffect(() => {
+    const counter: Record<string, number> = {}
+
+    transactions?._embedded.records.forEach(transaction => {
+      const transactionData = getTransactionData(transaction)
+      counter[transactionData.type] = (counter[transactionData.type] || 0) + 1
+    })
+
+    let mostRepeatedType: string | undefined
+    let maxOccurrences = 0
+
+    for (const type in counter) {
+      if (counter[type] > maxOccurrences) {
+        maxOccurrences = counter[type]
+        mostRepeatedType = type
+      }
+    }
+
+    setMostRepeatedType(mostRepeatedType)
+  }, [transactions, assets, vaults, getTransactionData])
+
+  return (
+    <Flex>
+      <Sidebar highlightMenu={PathRoute.SETTINGS}>
+        <Flex
+          flexDir={isLargerThanMd ? 'row' : 'column'}
+          w="full"
+          justifyContent="center"
+          gap="1.5rem"
+        >
+          <Flex maxW="966px" flexDir="column" w="full">
+            <CostCenterTemplate
+              transactions={transactions}
+              userPermissions={userPermissions}
+              sponsorAccount={sponsorAccount}
+              accountData={accountData}
+              latestFeeCharged={latestFeeCharged}
+              vaults={vaults}
+              assets={assets}
+              isPrevDisabled={historyTransactions.length === 0}
+              mostRepeatedType={mostRepeatedType}
+              getTransactionsByLink={getTransactionsByLink}
+              getTransactionData={getTransactionData}
+            />
+          </Flex>
+          {isLargerThanMd && (
+            <VStack>
+              <MenuSettings option={SettingsOptions.COST_CENTER} />
+            </VStack>
+          )}
+        </Flex>
+      </Sidebar>
+    </Flex>
+  )
+}
diff --git a/frontend/src/app/core/routes/routes.ts b/frontend/src/app/core/routes/routes.ts
index 8bf7ecd7..db28161b 100644
--- a/frontend/src/app/core/routes/routes.ts
+++ b/frontend/src/app/core/routes/routes.ts
@@ -7,6 +7,7 @@ import { ClawbackAsset } from '../pages/clawback-asset'
 import { Contracts } from '../pages/contracts'
 import { ContractsCreate } from '../pages/contracts-create'
 import { ContractsDetail } from '../pages/contracts-detail'
+import { CostCenter } from '../pages/cost-center'
 import { Dashboards } from '../pages/dashboards'
 import { DistributeAsset } from '../pages/distribute-asset'
 import { ForgeAsset } from '../pages/forge-asset'
@@ -133,4 +134,9 @@ export const coreRoutes: AppRoute[] = [
     component: TomlFile,
     isPrivate: true,
   },
+  {
+    path: PathRoute.COST_CENTER,
+    component: CostCenter,
+    isPrivate: true,
+  },
 ]
diff --git a/frontend/src/components/enums/path-route.ts b/frontend/src/components/enums/path-route.ts
index 44980974..5b832a19 100644
--- a/frontend/src/components/enums/path-route.ts
+++ b/frontend/src/components/enums/path-route.ts
@@ -29,4 +29,5 @@ export enum PathRoute {
   TOKEN_MANAGEMENT = '/token-management',
   DASHBOARDS = '/dashboards',
   TOML_FILE = '/.well-known/stellar.toml',
+  COST_CENTER = '/cost-center',
 }
diff --git a/frontend/src/components/enums/settings-options.ts b/frontend/src/components/enums/settings-options.ts
index 6276be52..d6d46e55 100644
--- a/frontend/src/components/enums/settings-options.ts
+++ b/frontend/src/components/enums/settings-options.ts
@@ -2,4 +2,5 @@ export enum SettingsOptions {
   TEAM_MEMBERS = 'Team members',
   ROLE_PERMISSIONS = 'Role permissions',
   ROLES_MANAGE = 'Roles',
+  COST_CENTER = 'Cost Center'
 }
diff --git a/frontend/src/components/icons/fonts/coins.svg b/frontend/src/components/icons/fonts/coins.svg
new file mode 100644
index 00000000..afa03f6d
--- /dev/null
+++ b/frontend/src/components/icons/fonts/coins.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path
+        d="M0 405.3V448c0 35.3 86 64 192 64s192-28.7 192-64v-42.7C342.7 434.4 267.2 448 192 448S41.3 434.4 0 405.3zM320 128c106 0 192-28.7 192-64S426 0 320 0 128 28.7 128 64s86 64 192 64zM0 300.4V352c0 35.3 86 64 192 64s192-28.7 192-64v-51.6c-41.3 34-116.9 51.6-192 51.6S41.3 334.4 0 300.4zm416 11c57.3-11.1 96-31.7 96-55.4v-42.7c-23.2 16.4-57.3 27.6-96 34.5v63.6zM192 160C86 160 0 195.8 0 240s86 80 192 80 192-35.8 192-80-86-80-192-80zm219.3 56.3c60-10.8 100.7-32 100.7-56.3v-42.7c-35.5 25.1-96.5 38.6-160.7 41.8 29.5 14.3 51.2 33.5 60 57.2z" />
+</svg>
\ No newline at end of file
diff --git a/frontend/src/components/icons/index.tsx b/frontend/src/components/icons/index.tsx
index 35141e86..b71c5318 100644
--- a/frontend/src/components/icons/index.tsx
+++ b/frontend/src/components/icons/index.tsx
@@ -56,6 +56,7 @@ import { ReactComponent as TransferIcon } from './fonts/transfer.svg'
 import { ReactComponent as UsdcIcon } from './fonts/usdc.svg'
 import { ReactComponent as VaultIcon } from './fonts/vault.svg'
 import { ReactComponent as WalletIcon } from './fonts/wallet.svg'
+import { ReactComponent as CoinsIcon } from './fonts/coins.svg'
 
 export {
   MenuIcon,
@@ -116,4 +117,5 @@ export {
   ArrowForwardIcon,
   CircleCheckIcon,
   FileIcon,
+  CoinsIcon
 }
diff --git a/frontend/src/components/molecules/contracts-breadcrumb/index.tsx b/frontend/src/components/molecules/contracts-breadcrumb/index.tsx
index 7d0163de..6df99447 100644
--- a/frontend/src/components/molecules/contracts-breadcrumb/index.tsx
+++ b/frontend/src/components/molecules/contracts-breadcrumb/index.tsx
@@ -39,7 +39,7 @@ export const ContractsBreadcrumb: React.FC<IContractsBreadcrumb> = ({
             fill="gray.650"
             _dark={{ fill: 'white' }}
           >
-            <ContractIcon /> Yield-bearing asset
+            <ContractIcon /> Yield-bearing Asset
           </BreadcrumbLink>
         </BreadcrumbItem>
 
diff --git a/frontend/src/components/organisms/menu-admin-mobile/index.tsx b/frontend/src/components/organisms/menu-admin-mobile/index.tsx
index 2f5b014e..d510a0ce 100644
--- a/frontend/src/components/organisms/menu-admin-mobile/index.tsx
+++ b/frontend/src/components/organisms/menu-admin-mobile/index.tsx
@@ -5,18 +5,19 @@ import { ItemActionAssetMobile } from 'components/atoms/item-action-asset-mobile
 import { PathRoute } from 'components/enums/path-route'
 import {
   ChevronDownIcon,
+  CoinsIcon,
   MembersIcon,
   PermissionsIcon,
   RoleIcon,
 } from 'components/icons'
 
 interface IMenuAdminMobile {
-  selected: 'TEAM_MEMBERS' | 'ROLE_PERMISSIONS' | 'ROLES'
+  selected: 'TEAM_MEMBERS' | 'ROLE_PERMISSIONS' | 'ROLES' | 'COST_CENTER'
 }
 
 export const MenuAdminMobile: React.FC<IMenuAdminMobile> = ({ selected }) => {
   const isSelected = (
-    page: 'TEAM_MEMBERS' | 'ROLE_PERMISSIONS' | 'ROLES'
+    page: 'TEAM_MEMBERS' | 'ROLE_PERMISSIONS' | 'ROLES' | 'COST_CENTER'
   ): boolean => {
     return selected === page
   }
@@ -61,6 +62,13 @@ export const MenuAdminMobile: React.FC<IMenuAdminMobile> = ({ selected }) => {
           icon={<RoleIcon width="16px" height="16px" />}
           path={`${PathRoute.ROLES_MANAGE}`}
         />
+
+        <ItemActionAssetMobile
+          isSelected={isSelected('COST_CENTER')}
+          title={'perating Expenses'}
+          icon={<CoinsIcon width="16px" height="16px" />}
+          path={`${PathRoute.COST_CENTER}`}
+        />
       </MenuList>
     </Menu>
   )
diff --git a/frontend/src/components/organisms/menu-settings/index.tsx b/frontend/src/components/organisms/menu-settings/index.tsx
index 09e60ac2..fbcaeaf0 100644
--- a/frontend/src/components/organisms/menu-settings/index.tsx
+++ b/frontend/src/components/organisms/menu-settings/index.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom'
 
 import { PathRoute } from 'components/enums/path-route'
 import { SettingsOptions } from 'components/enums/settings-options'
-import { MembersIcon, PermissionsIcon, RoleIcon } from 'components/icons'
+import { CoinsIcon, MembersIcon, PermissionsIcon, RoleIcon } from 'components/icons'
 
 interface IMenuSettings {
   option: SettingsOptions
@@ -74,6 +74,24 @@ export const MenuSettings: React.FC<IMenuSettings> = ({ option }) => {
         >
           Roles
         </Button>
+        <Button
+          variant={
+            option === SettingsOptions.COST_CENTER
+              ? 'menuButtonSelected'
+              : 'menuButton'
+          }
+          borderBottomRadius="0.25rem"
+          leftIcon={
+            <Flex w="1rem" justifyContent="center">
+              <CoinsIcon />
+            </Flex>
+          }
+          onClick={(): void => {
+            navigate(`${PathRoute.COST_CENTER}`)
+          }}
+        >
+          Operating Expenses
+        </Button>
       </Container>
     </Flex>
   )
diff --git a/frontend/src/components/organisms/sidebar/index.tsx b/frontend/src/components/organisms/sidebar/index.tsx
index d01ac7da..0b85d3da 100644
--- a/frontend/src/components/organisms/sidebar/index.tsx
+++ b/frontend/src/components/organisms/sidebar/index.tsx
@@ -43,7 +43,7 @@ const linkItems: ILinkItemProps[] = [
     path: PathRoute.TOKEN_MANAGEMENT,
   },
   {
-    name: 'Yield-bearing asset',
+    name: 'Yield-bearing Asset',
     icon: <ContractIcon />,
     path: PathRoute.SOROBAN_SMART_CONTRACTS,
   },
diff --git a/frontend/src/components/templates/contracts-create/index.tsx b/frontend/src/components/templates/contracts-create/index.tsx
index da02c1b0..a653e10a 100644
--- a/frontend/src/components/templates/contracts-create/index.tsx
+++ b/frontend/src/components/templates/contracts-create/index.tsx
@@ -128,7 +128,7 @@ export const ContractsCreateTemplate: React.FC<IContractsCreateTemplate> = ({
       justifyContent="center"
     >
       <Flex maxW={MAX_PAGE_WIDTH} alignSelf="center" flexDir="column" w="full">
-        <ContractsBreadcrumb title="New Yield-bearing asset" />
+        <ContractsBreadcrumb title="New Yield-bearing Asset" />
         {errorSubmit && (
           <Alert mb="0.75rem" status="error">
             <AlertIcon />
@@ -148,7 +148,7 @@ export const ContractsCreateTemplate: React.FC<IContractsCreateTemplate> = ({
             _dark={{ fill: 'white', stroke: 'white', borderColor: 'black.800' }}
           >
             <Text fontSize="sm" fontWeight="600">
-              New Yield-bearing asset
+              New Yield-bearing Asset
             </Text>
           </Flex>
           {loading ? (
@@ -343,7 +343,7 @@ export const ContractsCreateTemplate: React.FC<IContractsCreateTemplate> = ({
                     mt="1.5rem"
                     isLoading={creatingContract}
                   >
-                    Create Yield-bearing asset
+                    Create Yield-bearing Asset
                   </Button>
                 </Flex>
               </form>
diff --git a/frontend/src/components/templates/contracts-detail/components/contract-info/index.tsx b/frontend/src/components/templates/contracts-detail/components/contract-info/index.tsx
index ece1a830..3e3f88ee 100644
--- a/frontend/src/components/templates/contracts-detail/components/contract-info/index.tsx
+++ b/frontend/src/components/templates/contracts-detail/components/contract-info/index.tsx
@@ -29,7 +29,7 @@ export const ContractInfo: React.FC<IContractInfo> = ({ contract }) => {
         boxShadow="lower"
         _dark={{ bg: 'black.800' }}
       >
-        <Text fontSize="xl">Yield-bearing asset</Text>
+        <Text fontSize="xl">Yield-bearing Asset</Text>
         <Flex
           display="flex"
           bg="gray.200"
diff --git a/frontend/src/components/templates/contracts/index.tsx b/frontend/src/components/templates/contracts/index.tsx
index 51c0d920..fd9f0b59 100644
--- a/frontend/src/components/templates/contracts/index.tsx
+++ b/frontend/src/components/templates/contracts/index.tsx
@@ -55,7 +55,7 @@ export const ContractsTemplate: React.FC<IContractsTemplate> = ({
       <Flex maxW={MAX_PAGE_WIDTH} alignSelf="center" flexDir="column" w="full">
         <Flex mb="1.5rem" justifyContent="space-between">
           <Text fontSize="2xl" fontWeight="400">
-            Yield-bearing asset
+            Yield-bearing Asset
           </Text>
           {havePermission(Permissions.CREATE_CERTIFICATES, userPermissions) && (
             <Button
@@ -65,7 +65,7 @@ export const ContractsTemplate: React.FC<IContractsTemplate> = ({
                 navigate({ pathname: PathRoute.CONTRACT_CREATE })
               }
             >
-              {isLargerThanSm ? 'New Yield-bearing asset' : 'New'}
+              {isLargerThanSm ? 'New Yield-bearing Asset' : 'New'}
             </Button>
           )}
         </Flex>
diff --git a/frontend/src/components/templates/cost-center/components/opex-card/index.tsx b/frontend/src/components/templates/cost-center/components/opex-card/index.tsx
new file mode 100644
index 00000000..5f88ce33
--- /dev/null
+++ b/frontend/src/components/templates/cost-center/components/opex-card/index.tsx
@@ -0,0 +1,119 @@
+import { Container, Flex, Progress, Text } from '@chakra-ui/react'
+import React from 'react'
+
+import { toCrypto } from 'utils/formatter'
+
+interface IOpexCard {
+  accountData: Hooks.UseHorizonTypes.IAccount | undefined
+  latestFeeCharged: number | undefined
+  mostRepeatedType: string | undefined
+}
+
+export const OpexCard: React.FC<IOpexCard> = ({
+  accountData,
+  latestFeeCharged,
+  mostRepeatedType,
+}) => {
+  const BASE_RESERVE = 0.5
+
+  const getNativeBalance = (): Hooks.UseHorizonTypes.IBalance | undefined => {
+    return accountData?.balances.find(
+      balance => balance.asset_type === 'native'
+    )
+  }
+
+  const getReserved = (): number => {
+    const subentry =
+      Number(accountData?.subentry_count || 0) +
+      Number(accountData?.num_sponsoring || 0)
+    const lockedReserves = subentry * BASE_RESERVE + 1
+    return lockedReserves
+  }
+
+  const getProgress = (): number => {
+    const totalBalance = Number(getNativeBalance()?.balance || 0)
+    const reserved = getReserved()
+    const result = ((totalBalance - reserved) / totalBalance) * 100
+    return result
+  }
+
+  return (
+    <>
+      {!accountData ? (
+        <div></div>
+      ) : (
+        <Container variant="primary" mb="1rem" p={4} w="full" maxW="full">
+          <Text fontSize="md">Sandbox Expenses account</Text>
+          <Text fontSize="sm" mt="1rem">
+            Operating xpenses account
+          </Text>
+          <Text fontSize="xs" mt="0.25rem" opacity={0.75}>
+            {accountData.account_id || '-'}
+          </Text>
+          <Text fontSize="sm" mt="1rem">
+            Account balance
+          </Text>
+
+          <Flex flexDir="column" alignItems="center" w="full">
+            <Text fontSize="sm" mt="1rem">
+              {`${toCrypto(
+                Number(getNativeBalance()?.balance) - getReserved()
+              )} XLM avaliable / ${toCrypto(getReserved())} XLM reserved`}
+            </Text>
+            <Progress
+              value={getProgress()}
+              h="1rem"
+              w="full"
+              borderRadius="0.5rem"
+              mt="0.25rem"
+            />
+            <Text fontSize="sm" mt="0.25rem">
+              {`Total balance ${toCrypto(
+                Number(getNativeBalance()?.balance)
+              )} XLM`}
+            </Text>
+          </Flex>
+
+          <Flex
+            alignItems="center"
+            w="full"
+            justifyContent="space-between"
+            mt="1rem"
+            flexDir={{base: 'column', md: 'row'}}
+          >
+            <Flex flexDir="column" alignItems="center">
+              <Text fontSize="sm" mt="1rem">
+                Total sponsored reserves
+              </Text>
+              <Text fontSize="sm" mt="0.25rem" fontWeight="700">
+                {accountData.num_sponsoring}
+              </Text>
+            </Flex>
+            <Flex flexDir="column" alignItems="center">
+              <Text fontSize="sm" mt="1rem">
+                Average Fee Charged
+              </Text>
+              <Text fontSize="xs">(based on the last 10 transactions)</Text>
+              <Text fontSize="sm" mt="0.25rem" fontWeight="700">
+                {`${toCrypto(
+                  (latestFeeCharged || 0) / 10,
+                  undefined,
+                  true
+                )} XLM`}
+              </Text>
+            </Flex>
+            <Flex flexDir="column" alignItems="center">
+              <Text fontSize="sm" mt="1rem">
+                Main type of transaction
+              </Text>
+              <Text fontSize="xs">(based on the last 10 transactions)</Text>
+              <Text fontSize="sm" mt="0.25rem" fontWeight="700">
+                {mostRepeatedType || '-'}
+              </Text>
+            </Flex>
+          </Flex>
+        </Container>
+      )}
+    </>
+  )
+}
diff --git a/frontend/src/components/templates/cost-center/components/transactions-card/index.tsx b/frontend/src/components/templates/cost-center/components/transactions-card/index.tsx
new file mode 100644
index 00000000..89ee1599
--- /dev/null
+++ b/frontend/src/components/templates/cost-center/components/transactions-card/index.tsx
@@ -0,0 +1,163 @@
+import {
+  Button,
+  Container,
+  Flex,
+  Table,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tr,
+  useMediaQuery,
+} from '@chakra-ui/react'
+import React from 'react'
+
+import { formatDateFullClean, toCrypto } from 'utils/formatter'
+
+import { NavLeftIcon, NavRightIcon, SendedIcon } from 'components/icons'
+
+import { IHorizonData } from 'app/core/pages/cost-center'
+
+interface ITransactionsCard {
+  transactions: Hooks.UseHorizonTypes.ITransactions | undefined
+  isPrevDisabled: boolean
+  getTransactionsByLink(link: 'prev' | 'next'): void
+  getTransactionData(
+    transaction: Hooks.UseHorizonTypes.ITransactionItem
+  ): IHorizonData
+}
+
+export const TransactionsCard: React.FC<ITransactionsCard> = ({
+  transactions,
+  isPrevDisabled,
+  getTransactionsByLink,
+  getTransactionData,
+}) => {
+  const [isLargerThanSm] = useMediaQuery('(min-width: 480px)')
+
+  return (
+    <Container variant="primary" mb="1rem" p={4} w="full" maxW="full">
+      <Text fontSize="md">Transaction's history</Text>
+      {isLargerThanSm ? (
+        <Table w="full" variant="list" mt="1rem">
+          <Thead w="full">
+            <Tr>
+              <Th w="2rem" p={0} />
+              <Th>Transaction</Th>
+              <Th>Date</Th>
+              <Th>Asset</Th>
+              <Th>Accounts</Th>
+              <Th>Covered fee</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {transactions?._embedded.records.map(transaction => {
+              const transactionData = getTransactionData(transaction)
+              return (
+                <Tr>
+                  <Td px="1rem" py={0}>
+                    <SendedIcon width="20px" height="20px" />
+                  </Td>
+                  <Td>{transactionData.type}</Td>
+                  <Td>
+                    <Text fontSize="sm">
+                      {formatDateFullClean(transaction.created_at)}
+                    </Text>
+                  </Td>
+                  <Td>{transactionData.asset}</Td>
+                  <Td>{transactionData.name}</Td>
+                  <Td>{`${toCrypto(
+                    Number(transaction.fee_charged),
+                    undefined,
+                    true
+                  )} XLM`}</Td>
+                </Tr>
+              )
+            })}
+          </Tbody>
+        </Table>
+      ) : (
+        <Flex flexDir="column">
+          {transactions?._embedded.records?.map((transaction, index) => {
+            const transactionData = getTransactionData(transaction)
+            return (
+              <Flex
+                key={index}
+                flexDir="column"
+                borderBottom="1px solid"
+                borderColor={'gray.600'}
+                _dark={{ borderColor: 'black.800' }}
+                pb={2}
+                pt={2}
+                gap={1}
+              >
+                <Flex alignItems="center" gap={2}>
+                  <Text>{formatDateFullClean(transaction.created_at)}</Text>
+                </Flex>
+                <Flex gap="0.35rem">
+                  <Text fontWeight="bold">Transaction</Text>
+                  <Text>{`${transactionData.type}`}</Text>
+                </Flex>
+                <Flex gap="0.35rem" alignItems="center">
+                  <Text fontWeight="bold">Asset</Text>
+                  <Text>{transactionData.asset}</Text>
+                </Flex>
+                <Flex gap="0.35rem">
+                  <Text fontWeight="bold">Accounts</Text>
+                  <Text>{`${transactionData.name}`}</Text>
+                </Flex>
+                <Flex gap="0.35rem">
+                  <Text fontWeight="bold">Fee charged</Text>
+                  <Text>{`${toCrypto(
+                    Number(transaction.fee_charged),
+                    undefined,
+                    true
+                  )} XLM`}</Text>
+                </Flex>
+              </Flex>
+            )
+          })}
+        </Flex>
+      )}
+      <Flex justifyContent="flex-end">
+        <Button
+          variant={'menuButton'}
+          border="0"
+          w="min-content"
+          leftIcon={
+            <Flex w="1rem" justifyContent="center">
+              <NavLeftIcon />
+            </Flex>
+          }
+          isDisabled={isPrevDisabled}
+          onClick={(): void => {
+            if (transactions?._links.prev.href) {
+              getTransactionsByLink('prev')
+            }
+          }}
+        >
+          Previous
+        </Button>
+        <Button
+          variant={'menuButton'}
+          border="0"
+          w="min-content"
+          rightIcon={
+            <Flex w="1rem" justifyContent="center">
+              <NavRightIcon />
+            </Flex>
+          }
+          isDisabled={transactions?._links.next.results === 0}
+          onClick={(): void => {
+            if (transactions?._links.next.href) {
+              getTransactionsByLink('next')
+            }
+          }}
+        >
+          Next
+        </Button>
+      </Flex>
+    </Container>
+  )
+}
diff --git a/frontend/src/components/templates/cost-center/index.tsx b/frontend/src/components/templates/cost-center/index.tsx
new file mode 100644
index 00000000..e40699c4
--- /dev/null
+++ b/frontend/src/components/templates/cost-center/index.tsx
@@ -0,0 +1,69 @@
+import { Flex, Text, useMediaQuery } from '@chakra-ui/react'
+import React from 'react'
+
+import { MAX_PAGE_WIDTH } from 'utils/constants/sizes'
+
+import { OpexCard } from './components/opex-card'
+import { TransactionsCard } from './components/transactions-card'
+import { MenuAdminMobile } from 'components/organisms/menu-admin-mobile'
+
+import { IHorizonData } from 'app/core/pages/cost-center'
+
+interface ICostCenterTemplate {
+  transactions: Hooks.UseHorizonTypes.ITransactions | undefined
+  userPermissions: Hooks.UseAuthTypes.IUserPermission[] | undefined
+  accountData: Hooks.UseHorizonTypes.IAccount | undefined
+  sponsorAccount: string | undefined
+  latestFeeCharged: number | undefined
+  vaults: Hooks.UseVaultsTypes.IVault[] | undefined
+  assets: Hooks.UseAssetsTypes.IAssetDto[] | undefined
+  isPrevDisabled: boolean
+  mostRepeatedType: string | undefined
+  getTransactionsByLink(link: 'prev' | 'next'): void
+  getTransactionData(
+    transaction: Hooks.UseHorizonTypes.ITransactionItem
+  ): IHorizonData
+}
+
+export const CostCenterTemplate: React.FC<ICostCenterTemplate> = ({
+  transactions,
+  accountData,
+  latestFeeCharged,
+  isPrevDisabled,
+  mostRepeatedType,
+  getTransactionsByLink,
+  getTransactionData
+}) => {
+  const [isSmallerThanMd] = useMediaQuery('(max-width: 768px)')
+
+  return (
+    <Flex flexDir="column" w="full" pb="3.5rem">
+      <Flex maxW={MAX_PAGE_WIDTH} alignSelf="center" flexDir="column" w="full">
+        <Flex
+          justifyContent="space-between"
+          w="full"
+          alignItems="center"
+          mb="1.5rem"
+        >
+          <Text fontSize="2xl" fontWeight="400">
+            Administration
+          </Text>
+          {isSmallerThanMd && <MenuAdminMobile selected={'TEAM_MEMBERS'} />}
+        </Flex>
+        <Flex flexDir="column" maxW="full">
+          <OpexCard
+            accountData={accountData}
+            latestFeeCharged={latestFeeCharged}
+            mostRepeatedType={mostRepeatedType}
+          />
+          <TransactionsCard
+            transactions={transactions}
+            isPrevDisabled={isPrevDisabled}
+            getTransactionsByLink={getTransactionsByLink}
+            getTransactionData={getTransactionData}
+          />
+        </Flex>
+      </Flex>
+    </Flex>
+  )
+}
diff --git a/frontend/src/components/templates/login/components/overview/index.tsx b/frontend/src/components/templates/login/components/overview/index.tsx
index f8040a36..e9ffc66e 100644
--- a/frontend/src/components/templates/login/components/overview/index.tsx
+++ b/frontend/src/components/templates/login/components/overview/index.tsx
@@ -140,7 +140,7 @@ export const Overview: React.FC<IOverview> = ({
             </Flex>
             <Flex flexDir="column" ms="1rem">
               <Text fontSize="xl" mb="0.75rem">
-                Create Yield-bearing asset
+                Create Yield-bearing Asset
               </Text>
               <Text>
                 In the Sandbox you can define permissions for each type of role
diff --git a/frontend/src/components/templates/role-permissions-template/index.tsx b/frontend/src/components/templates/role-permissions-template/index.tsx
index e6333c90..940db641 100644
--- a/frontend/src/components/templates/role-permissions-template/index.tsx
+++ b/frontend/src/components/templates/role-permissions-template/index.tsx
@@ -18,6 +18,7 @@ import React, { Dispatch, SetStateAction } from 'react'
 
 import { MAX_PAGE_WIDTH } from 'utils/constants/sizes'
 
+import { InfoTag } from 'components/atoms/info-tag'
 import { MenuAdminMobile } from 'components/organisms/menu-admin-mobile'
 
 import { IChange } from 'app/core/pages/role-permissions'
@@ -108,11 +109,12 @@ export const RolePermissionsTemplate: React.FC<IRolePermissionsTemplate> = ({
           >
             <Flex
               gap={1}
-              alignItems="center"
               fill="gray"
+              flexDir="column"
               _dark={{ fill: 'white' }}
             >
               <Text>Permissions</Text>
+              <InfoTag text="You are only able to modify roles that you have created." />
             </Flex>
             <Button
               variant="primary"
diff --git a/frontend/src/components/templates/roles-manage-template/index.tsx b/frontend/src/components/templates/roles-manage-template/index.tsx
index 7cfa0acc..a7209863 100644
--- a/frontend/src/components/templates/roles-manage-template/index.tsx
+++ b/frontend/src/components/templates/roles-manage-template/index.tsx
@@ -20,6 +20,7 @@ import { MenuAdminMobile } from 'components/organisms/menu-admin-mobile'
 
 import { ItemRole } from './item-role'
 import { ModalRoleManage } from './modal-role-manage'
+import { InfoTag } from 'components/atoms/info-tag'
 
 interface IRolesManageTemplate {
   roles: Hooks.UseAuthTypes.IRole[] | undefined
@@ -82,11 +83,12 @@ export const RolesManageTemplate: React.FC<IRolesManageTemplate> = ({
             >
               <Flex
                 gap={1}
-                alignItems="center"
                 fill="gray"
+                flexDir="column"
                 _dark={{ fill: 'white' }}
               >
                 <Text>Roles</Text>
+                <InfoTag text="You are only able to modify roles that you have created." />
               </Flex>
               <Button variant="primary" onClick={onOpen}>
                 Create role
diff --git a/frontend/src/config/theme/components/atoms/checkbox.ts b/frontend/src/config/theme/components/atoms/checkbox.ts
index 6ad46380..40f59e44 100644
--- a/frontend/src/config/theme/components/atoms/checkbox.ts
+++ b/frontend/src/config/theme/components/atoms/checkbox.ts
@@ -32,6 +32,13 @@ export const Checkbox = {
         bg: 'primary.normal',
         borderColor: 'primary.normal',
       },
+      _disabled: {
+        _checked: {
+          bg: 'primary.normal',
+          borderColor: 'primary.normal',
+          opacity: 0.25,
+        },
+      },
     },
   },
   variants: { highlight },
diff --git a/frontend/src/hooks/useHorizon/context.tsx b/frontend/src/hooks/useHorizon/context.tsx
index d143bc7a..46ddcc93 100644
--- a/frontend/src/hooks/useHorizon/context.tsx
+++ b/frontend/src/hooks/useHorizon/context.tsx
@@ -135,6 +135,32 @@ export const HorizonProvider: React.FC<IProps> = ({ children }) => {
     []
   )
 
+  const getOperationTransaction = useCallback(
+    async (
+      id: string
+    ): Promise<Hooks.UseHorizonTypes.IOperationTransaction[] | undefined> => {
+      setLoadingHorizon(true)
+      try {
+        const response = await axios.get(
+          `${BASE_URL}/transactions/${id}/operations`
+        )
+        const data = response.data
+        if (data) {
+          return data._embedded.records
+        }
+        return undefined
+      } catch (error) {
+        if (axios.isAxiosError(error) && error?.response?.status === 400) {
+          throw new Error(error.message)
+        }
+        throw new Error(MessagesError.errorOccurred)
+      } finally {
+        setLoadingHorizon(false)
+      }
+    },
+    []
+  )
+
   const getAccountEffects = useCallback(
     async (
       wallet?: string,
@@ -231,6 +257,71 @@ export const HorizonProvider: React.FC<IProps> = ({ children }) => {
     }
   }, [])
 
+  const getTransactions = useCallback(
+    async (
+      wallet?: string,
+      link?: string
+    ): Promise<Hooks.UseHorizonTypes.ITransactions | undefined> => {
+      setLoadingHorizon(true)
+      try {
+        const response = await axios.get(
+          link
+            ? link
+            : `${BASE_URL}/accounts/${wallet}/transactions?order=desc
+          `
+        )
+        const data = response.data as Hooks.UseHorizonTypes.ITransactions
+        if (data) {
+          await Promise.all(
+            data._embedded.records.map(async record => {
+              record.operations = await getOperationTransaction(record.id)
+            })
+          )
+
+          const resultNext = await axios.get(data._links.next.href)
+
+          data._links.next.results =
+            resultNext.data?._embedded?.records.length || 0
+
+          return data
+        }
+        return undefined
+      } catch (error) {
+        if (axios.isAxiosError(error) && error?.response?.status === 400) {
+          throw new Error(error.message)
+        }
+        throw new Error(MessagesError.errorOccurred)
+      } finally {
+        setLoadingHorizon(false)
+      }
+    },
+    [getOperationTransaction]
+  )
+
+  const getAccount = useCallback(
+    async (
+      wallet: string
+    ): Promise<Hooks.UseHorizonTypes.IAccount | undefined> => {
+      setLoadingHorizon(true)
+      try {
+        const response = await axios.get(`${BASE_URL}/accounts/${wallet}`)
+        const data = response.data as Hooks.UseHorizonTypes.IAccount
+        if (data) {
+          return data
+        }
+        return undefined
+      } catch (error) {
+        if (axios.isAxiosError(error) && error?.response?.status === 400) {
+          throw new Error(error.message)
+        }
+        throw new Error(MessagesError.errorOccurred)
+      } finally {
+        setLoadingHorizon(false)
+      }
+    },
+    []
+  )
+
   return (
     <HorizonContext.Provider
       value={{
@@ -243,6 +334,8 @@ export const HorizonProvider: React.FC<IProps> = ({ children }) => {
         getAccountEffects,
         getAssetAccounts,
         getLatestSequenceLedger,
+        getTransactions,
+        getAccount,
       }}
     >
       {children}
diff --git a/frontend/src/hooks/useHorizon/use-horizon-types.d.ts b/frontend/src/hooks/useHorizon/use-horizon-types.d.ts
index 63f12b67..c31c10b5 100644
--- a/frontend/src/hooks/useHorizon/use-horizon-types.d.ts
+++ b/frontend/src/hooks/useHorizon/use-horizon-types.d.ts
@@ -103,21 +103,26 @@ declare namespace Hooks {
       }
     }
 
-    interface IOperationTrustline {
+    interface IOperationTransaction {
       id: string
-      paging_token: string
       transaction_successful: boolean
       source_account: string
       type: string
       type_i: number
       created_at: string
       transaction_hash: string
-      asset_type: string
-      asset_code: string
-      asset_issuer: string
-      limit: string
-      trustee: string
-      trustor: string
+      asset_type?: string
+      asset_code?: string
+      asset_issuer?: string
+      limit?: string
+      trustee?: string
+      trustor?: string
+      from?: string,
+      to?: string,
+      amount?: string
+      account?: string
+      set_flags_s?: string[]
+      clear_flags_s?: string[]
     }
 
     interface IOperationTrustline {
@@ -207,6 +212,50 @@ declare namespace Hooks {
       percentage: number
     }
 
+    interface ITransactionItem {
+      id: string
+      successful: true
+      hash: string
+      ledger: number
+      created_at: string
+      source_account: string
+      fee_account: string
+      fee_charged: string
+      max_fee: string
+      operation_count: number
+      valid_after: string
+      valid_before: string
+      fee_bump_transaction: {
+        hash: string
+        signatures: string[]
+      }
+      inner_transaction: {
+        hash: string
+        signatures: string[]
+        max_fee: string
+      }
+      operations?: IOperationTransaction[]
+    }
+
+    interface ITransactions {
+      _embedded: {
+        records: ITransactionItem[]
+      }
+      _links: {
+        next: {
+          href: string
+          results: number
+        }
+        prev: {
+          href: string
+          results: number
+        }
+        self: {
+          href: string
+        }
+      }
+    }
+
     interface IHorizonContext {
       loadingHorizon: boolean
       assetData: IAsset | undefined
@@ -229,6 +278,11 @@ declare namespace Hooks {
         assetIssuer: string
       ): Promise<IAssetAccounts[] | undefined>
       getLatestSequenceLedger(): Promise<number | undefined>
+      getTransactions(
+        wallet?: string,
+        link?: string
+      ): Promise<ITransactions | undefined>
+      getAccount(wallet: string): Promise<IAccount | undefined>
     }
   }
 }
diff --git a/frontend/src/soroban/custom-account-handler/index.tsx b/frontend/src/soroban/custom-account-handler/index.tsx
index e99266c4..28662555 100644
--- a/frontend/src/soroban/custom-account-handler/index.tsx
+++ b/frontend/src/soroban/custom-account-handler/index.tsx
@@ -62,7 +62,7 @@ export class CustomAccountHandlerClient
     try {
       return (await this.customSign(tx, this.publicKey)) as TransactionXdr
     } catch (e) {
-      throw new Error('error sign')
+      throw new Error('Error signing transaction')
     }
   }
 }
diff --git a/frontend/src/utils/formatter/index.tsx b/frontend/src/utils/formatter/index.tsx
index 8690fd5e..9b562bfc 100644
--- a/frontend/src/utils/formatter/index.tsx
+++ b/frontend/src/utils/formatter/index.tsx
@@ -3,7 +3,15 @@ export const toCurrency = (value: number): string => {
   return formatter.format(value)
 }
 
-export const toCrypto = (value?: number, prefix?: string): string => {
+export const toCrypto = (
+  value: number | undefined,
+  prefix?: string,
+  convertStroops?: boolean
+): string => {
+  if (value && convertStroops) {
+    value = value / 10000000
+  }
+
   const moneyFormatter = new Intl.NumberFormat('en-US', {
     minimumFractionDigits: 2,
     maximumFractionDigits: 7,