diff --git a/ditto/base.json b/ditto/base.json
index 7e63ae8a6..7acdbb538 100644
--- a/ditto/base.json
+++ b/ditto/base.json
@@ -559,23 +559,23 @@
   "text_624ea7c29103fd010732ab7d": "Enter a number to move forward (use “.” for decimal)",
   "text_62d7f6178ec94cd09370e5fb": "Status",
   "text_62d7f6178ec94cd09370e6cf": "Edit, terminate & more",
-  "text_62d7f6178ec94cd09370e63c": "Edit display name",
+  "text_62d7f6178ec94cd09370e63c": "Edit subscription name",
   "text_62d7f6178ec94cd09370e64a": "Change plan",
   "text_62d7f6178ec94cd09370e65b": "Copy subscription_id",
   "text_62d904b97e690a881f2b867c": "Terminate subscription",
   "text_62d94cc9ccc5eebcc03160a0": "Subscription_id copied to clipboard",
-  "text_62d7f6178ec94cd09370e2b9": "Invoice display name (optional)",
-  "text_62d7f6178ec94cd09370e2cb": "Type a display name",
+  "text_62d7f6178ec94cd09370e2b9": "Subscription name (optional)",
+  "text_62d7f6178ec94cd09370e2cb": "Type a subscription name",
   "text_62d7f6178ec94cd09370e2d9": "This value can be used to differentiate plans",
-  "text_62d7f6178ec94cd09370e393": "Type a display name",
+  "text_62d7f6178ec94cd09370e393": "Type a subscription name",
   "text_62d7f6178ec94cd09370e3d1": "Downgrading plan will be applied at the end of the current billable period.",
   "text_62d7f6178ec94cd09370e69a": "Plan successfully changed",
-  "text_62d7f6178ec94cd09370e2f1": "Edit invoice display name",
+  "text_62d7f6178ec94cd09370e2f1": "Edit subscription name",
   "text_62d7f6178ec94cd09370e311": "This value can be used to differentiate same plans.",
-  "text_62d7f6178ec94cd09370e32d": "Invoice display name",
+  "text_62d7f6178ec94cd09370e32d": "Subscription name (optional)",
   "text_62d7f6178ec94cd09370e34d": "Cancel",
-  "text_62d7f6178ec94cd09370e353": "Edit display name",
-  "text_62d7f6178ec94cd09370e6ab": "Display name successfully edited",
+  "text_62d7f6178ec94cd09370e353": "Edit subscription name",
+  "text_62e38a4631937146a6d6d5dd": "Subscription name successfully edited",
   "text_62d7f6178ec94cd09370e2f3": "Terminate subscription?",
   "text_62d7f6178ec94cd09370e313": "You’re about to terminate {{invoice_display_name}} subscription. Customer will pay usage fees and the pro-rata of the subscription fees. Are you sure?",
   "text_62d7f6178ec94cd09370e351": "Terminate subscription",
diff --git a/src/components/customers/usage/UsageItem.tsx b/src/components/customers/usage/UsageItem.tsx
index 7a37b0ec7..59c2d2d0f 100644
--- a/src/components/customers/usage/UsageItem.tsx
+++ b/src/components/customers/usage/UsageItem.tsx
@@ -74,15 +74,18 @@ export const UsageItem = ({ customerId, subscription }: UsageItemProps) => {
             <Icon name="pulse" color="dark" />
           </StyledAvatar>
           <Title>
-            <Typography variant="bodyHl" color="textSecondary">
+            <Typography variant="bodyHl" color="textSecondary" noWrap>
               {name || plan?.name}
             </Typography>
-            <Typography variant="caption">{plan?.code}</Typography>
+            <Typography variant="caption" noWrap>
+              {plan?.code}
+            </Typography>
           </Title>
           <Tooltip placement="top-start" title={translate('text_62d7f6178ec94cd09370e4b3')}>
             <Button
               variant="quaternary"
               icon="reload"
+              size="small"
               onClick={async (e) => {
                 e.preventDefault()
                 e.stopPropagation()
@@ -228,6 +231,7 @@ const Container = styled.div`
 
 const StyledAccordion = styled(Accordion)`
   border-radius: 12px;
+  overflow: hidden;
 
   &.MuiAccordion-root.MuiPaper-root {
     border-radius: 12px;
@@ -247,7 +251,7 @@ const StyledAccordion = styled(Accordion)`
 
 const Summary = styled(AccordionSummary)`
   && {
-    height: 60px;
+    height: ${NAV_HEIGHT}px;
     border-radius: 12px;
 
     &.MuiAccordionSummary-root.Mui-focused {
@@ -255,10 +259,16 @@ const Summary = styled(AccordionSummary)`
     }
 
     .MuiAccordionSummary-content {
+      height: ${NAV_HEIGHT}px;
+      box-sizing: border-box;
       display: flex;
       align-items: center;
       padding: ${theme.spacing(4)};
 
+      &:hover {
+        background-color: ${theme.palette.grey[100]};
+      }
+
       > *:first-child {
         margin-right: ${theme.spacing(3)};
       }
@@ -274,6 +284,7 @@ const Title = styled.div`
   display: flex;
   flex-direction: column;
   margin-right: auto;
+  min-width: 20px;
 `
 
 const Details = styled(AccordionDetails)`
@@ -326,6 +337,7 @@ const Line = styled.div`
   justify-content: space-between;
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
 
   > *:first-child {
     margin-right: ${theme.spacing(3)};
diff --git a/src/components/plans/ChargeAccordion.tsx b/src/components/plans/ChargeAccordion.tsx
index 267d0eba7..423d44def 100644
--- a/src/components/plans/ChargeAccordion.tsx
+++ b/src/components/plans/ChargeAccordion.tsx
@@ -3,7 +3,7 @@ import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material'
 import { FormikProps } from 'formik'
 import styled from 'styled-components'
 
-import { theme } from '~/styles'
+import { theme, NAV_HEIGHT } from '~/styles'
 import { Button, Typography, Tooltip } from '~/components/designSystem'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { ChargeModelEnum, CurrencyEnum } from '~/generated/graphql'
@@ -61,9 +61,13 @@ export const ChargeAccordion = ({
               icon={isOpen ? 'chevron-down' : 'chevron-right'}
             />
           </Tooltip>
-          <Title color="textSecondary">
-            {localCharge?.billableMetric?.name}{' '}
-            <Typography>({localCharge?.billableMetric?.code})</Typography>
+          <Title>
+            <Typography variant="bodyHl" color="textSecondary" noWrap>
+              {localCharge?.billableMetric?.name}
+            </Typography>
+            <Typography variant="caption" noWrap>
+              {localCharge?.billableMetric?.code}
+            </Typography>
           </Title>
           {!disabled && (
             <Tooltip placement="top-end" title={translate('text_624aa732d6af4e0103d40e65')}>
@@ -170,6 +174,7 @@ const Container = styled.div`
 
 const StyledAccordion = styled(Accordion)`
   border-radius: 12px;
+  overflow: hidden;
 
   &.MuiAccordion-root.MuiPaper-root {
     border-radius: 12px;
@@ -189,7 +194,7 @@ const StyledAccordion = styled(Accordion)`
 
 const Summary = styled(AccordionSummary)`
   && {
-    height: 60px;
+    height: ${NAV_HEIGHT}px;
     border-radius: 12px;
 
     &.MuiAccordionSummary-root.Mui-focused {
@@ -198,9 +203,15 @@ const Summary = styled(AccordionSummary)`
 
     .MuiAccordionSummary-content {
       display: flex;
+      height: ${NAV_HEIGHT}px;
+      box-sizing: border-box;
       align-items: center;
       padding: ${theme.spacing(4)};
 
+      &:hover {
+        background-color: ${theme.palette.grey[100]};
+      }
+
       > *:first-child {
         margin-right: ${theme.spacing(4)};
       }
@@ -208,15 +219,10 @@ const Summary = styled(AccordionSummary)`
   }
 `
 
-const Title = styled(Typography)`
-  display: flex;
-  margin-right: auto;
-  white-space: pre;
-`
-
 const Details = styled(AccordionDetails)`
   display: flex;
   flex-direction: column;
+  box-shadow: ${theme.shadows[5]};
 
   &.MuiAccordionDetails-root {
     padding: ${theme.spacing(4)} ${theme.spacing(4)} 0 ${theme.spacing(4)};
@@ -227,6 +233,13 @@ const Details = styled(AccordionDetails)`
   }
 `
 
+const Title = styled.div`
+  display: flex;
+  flex-direction: column;
+  white-space: pre;
+  min-width: 20px;
+`
+
 const LineAmount = styled.div`
   display: flex;
 
diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx
index b78cfe3f9..3b6bc707f 100644
--- a/src/generated/graphql.tsx
+++ b/src/generated/graphql.tsx
@@ -824,6 +824,18 @@ export type CreateCustomerInput = {
   zipcode?: InputMaybe<Scalars['String']>;
 };
 
+/** Autogenerated input type of CreateCustomerWallet */
+export type CreateCustomerWalletInput = {
+  /** A unique identifier for the client performing the mutation. */
+  clientMutationId?: InputMaybe<Scalars['String']>;
+  customerId: Scalars['ID'];
+  expirationDate?: InputMaybe<Scalars['ISO8601Date']>;
+  grantedCredits: Scalars['String'];
+  name?: InputMaybe<Scalars['String']>;
+  paidCredits: Scalars['String'];
+  rateAmount: Scalars['String'];
+};
+
 /** Autogenerated input type of CreatePlan */
 export type CreatePlanInput = {
   amountCents: Scalars['Int'];
@@ -1452,6 +1464,8 @@ export type Mutation = {
   createCoupon?: Maybe<Coupon>;
   /** Creates a new customer */
   createCustomer?: Maybe<Customer>;
+  /** Creates a new Customer Wallet */
+  createCustomerWallet?: Maybe<Wallet>;
   /** Creates a new Plan */
   createPlan?: Maybe<Plan>;
   /** Create a new Subscription */
@@ -1478,6 +1492,8 @@ export type Mutation = {
   terminateAppliedCoupon?: Maybe<AppliedCoupon>;
   /** Deletes a coupon */
   terminateCoupon?: Maybe<Coupon>;
+  /** Terminates a new Customer Wallet */
+  terminateCustomerWallet?: Maybe<Wallet>;
   /** Terminate a Subscription */
   terminateSubscription?: Maybe<Subscription>;
   /** Update an existing add-on */
@@ -1490,6 +1506,8 @@ export type Mutation = {
   updateCustomer?: Maybe<Customer>;
   /** Assign the vat rate to Customers */
   updateCustomerVatRate?: Maybe<CustomerDetails>;
+  /** Updates a new Customer Wallet */
+  updateCustomerWallet?: Maybe<Wallet>;
   /** Updates an Organization */
   updateOrganization?: Maybe<Organization>;
   /** Updates an existing Plan */
@@ -1534,6 +1552,11 @@ export type MutationCreateCustomerArgs = {
 };
 
 
+export type MutationCreateCustomerWalletArgs = {
+  input: CreateCustomerWalletInput;
+};
+
+
 export type MutationCreatePlanArgs = {
   input: CreatePlanInput;
 };
@@ -1599,6 +1622,11 @@ export type MutationTerminateCouponArgs = {
 };
 
 
+export type MutationTerminateCustomerWalletArgs = {
+  input: TerminateCustomerWalletInput;
+};
+
+
 export type MutationTerminateSubscriptionArgs = {
   input: TerminateSubscriptionInput;
 };
@@ -1629,6 +1657,11 @@ export type MutationUpdateCustomerVatRateArgs = {
 };
 
 
+export type MutationUpdateCustomerWalletArgs = {
+  input: UpdateCustomerWalletInput;
+};
+
+
 export type MutationUpdateOrganizationArgs = {
   input: UpdateOrganizationInput;
 };
@@ -1761,6 +1794,14 @@ export type Query = {
   /** Query plans of an organization */
   plans: PlanCollection;
   token: Scalars['Boolean'];
+  /** Query a single wallet */
+  wallet?: Maybe<WalletDetails>;
+  /** Query a single wallet transaction */
+  walletTransaction?: Maybe<WalletTransactionDetails>;
+  /** Query wallet transactions */
+  walletTransactions: WalletTransactionCollection;
+  /** Query wallets */
+  wallets: WalletCollection;
 };
 
 
@@ -1836,6 +1877,35 @@ export type QueryPlansArgs = {
   page?: InputMaybe<Scalars['Int']>;
 };
 
+
+export type QueryWalletArgs = {
+  id: Scalars['ID'];
+};
+
+
+export type QueryWalletTransactionArgs = {
+  id: Scalars['ID'];
+};
+
+
+export type QueryWalletTransactionsArgs = {
+  ids?: InputMaybe<Array<Scalars['ID']>>;
+  limit?: InputMaybe<Scalars['Int']>;
+  page?: InputMaybe<Scalars['Int']>;
+  status?: InputMaybe<WalletTransactionStatusEnum>;
+  transactionType?: InputMaybe<WalletTransactionTransactionTypeEnum>;
+  walletId: Scalars['ID'];
+};
+
+
+export type QueryWalletsArgs = {
+  customerId: Scalars['ID'];
+  ids?: InputMaybe<Array<Scalars['ID']>>;
+  limit?: InputMaybe<Scalars['Int']>;
+  page?: InputMaybe<Scalars['Int']>;
+  status?: InputMaybe<WalletStatusEnum>;
+};
+
 export type RegisterUser = {
   __typename?: 'RegisterUser';
   membership: Membership;
@@ -1910,6 +1980,13 @@ export type TerminateCouponInput = {
   id: Scalars['ID'];
 };
 
+/** Autogenerated input type of TerminateCustomerWallet */
+export type TerminateCustomerWalletInput = {
+  /** A unique identifier for the client performing the mutation. */
+  clientMutationId?: InputMaybe<Scalars['String']>;
+  id: Scalars['ID'];
+};
+
 /** Autogenerated input type of TerminateSubscription */
 export type TerminateSubscriptionInput = {
   /** A unique identifier for the client performing the mutation. */
@@ -1986,6 +2063,15 @@ export type UpdateCustomerVatRateInput = {
   vatRate?: InputMaybe<Scalars['Float']>;
 };
 
+/** Autogenerated input type of UpdateCustomerWallet */
+export type UpdateCustomerWalletInput = {
+  /** A unique identifier for the client performing the mutation. */
+  clientMutationId?: InputMaybe<Scalars['String']>;
+  expirationDate?: InputMaybe<Scalars['ISO8601Date']>;
+  id: Scalars['ID'];
+  name?: InputMaybe<Scalars['String']>;
+};
+
 /** Autogenerated input type of UpdateOrganization */
 export type UpdateOrganizationInput = {
   addressLine1?: InputMaybe<Scalars['String']>;
@@ -2039,6 +2125,97 @@ export type User = {
   updatedAt: Scalars['ISO8601DateTime'];
 };
 
+export type Wallet = {
+  __typename?: 'Wallet';
+  balance: Scalars['String'];
+  consumedCredits: Scalars['String'];
+  createdAt: Scalars['ISO8601DateTime'];
+  creditsBalance: Scalars['String'];
+  currency: CurrencyEnum;
+  customer?: Maybe<Customer>;
+  expirationDate?: Maybe<Scalars['ISO8601Date']>;
+  id: Scalars['ID'];
+  lastBalanceSyncAt?: Maybe<Scalars['ISO8601DateTime']>;
+  lastConsumedCreditAt?: Maybe<Scalars['ISO8601DateTime']>;
+  name: Scalars['String'];
+  rateAmount: Scalars['String'];
+  status: WalletStatusEnum;
+  terminatedAt?: Maybe<Scalars['ISO8601DateTime']>;
+  updatedAt: Scalars['ISO8601DateTime'];
+};
+
+export type WalletCollection = {
+  __typename?: 'WalletCollection';
+  collection: Array<Wallet>;
+  metadata: CollectionMetadata;
+};
+
+export type WalletDetails = {
+  __typename?: 'WalletDetails';
+  balance: Scalars['String'];
+  consumedCredits: Scalars['String'];
+  createdAt: Scalars['ISO8601DateTime'];
+  creditsBalance: Scalars['String'];
+  currency: CurrencyEnum;
+  customer?: Maybe<Customer>;
+  expirationDate?: Maybe<Scalars['ISO8601Date']>;
+  id: Scalars['ID'];
+  lastBalanceSyncAt?: Maybe<Scalars['ISO8601DateTime']>;
+  lastConsumedCreditAt?: Maybe<Scalars['ISO8601DateTime']>;
+  name: Scalars['String'];
+  rateAmount: Scalars['String'];
+  status: WalletStatusEnum;
+  terminatedAt?: Maybe<Scalars['ISO8601DateTime']>;
+  updatedAt: Scalars['ISO8601DateTime'];
+};
+
+export enum WalletStatusEnum {
+  Active = 'active',
+  Terminated = 'terminated'
+}
+
+export type WalletTransaction = {
+  __typename?: 'WalletTransaction';
+  amount: Scalars['String'];
+  createdAt: Scalars['ISO8601DateTime'];
+  creditAmount: Scalars['String'];
+  id: Scalars['ID'];
+  settledAt?: Maybe<Scalars['ISO8601DateTime']>;
+  status: WalletStatusEnum;
+  transactionType: WalletTransactionTransactionTypeEnum;
+  updatedAt: Scalars['ISO8601DateTime'];
+  wallet?: Maybe<Wallet>;
+};
+
+export type WalletTransactionCollection = {
+  __typename?: 'WalletTransactionCollection';
+  collection: Array<WalletTransaction>;
+  metadata: CollectionMetadata;
+};
+
+export type WalletTransactionDetails = {
+  __typename?: 'WalletTransactionDetails';
+  amount: Scalars['String'];
+  createdAt: Scalars['ISO8601DateTime'];
+  creditAmount: Scalars['String'];
+  id: Scalars['ID'];
+  settledAt?: Maybe<Scalars['ISO8601DateTime']>;
+  status: WalletStatusEnum;
+  transactionType: WalletTransactionTransactionTypeEnum;
+  updatedAt: Scalars['ISO8601DateTime'];
+  wallet?: Maybe<Wallet>;
+};
+
+export enum WalletTransactionStatusEnum {
+  Pending = 'pending',
+  Settled = 'settled'
+}
+
+export enum WalletTransactionTransactionTypeEnum {
+  Inbound = 'inbound',
+  Outbound = 'outbound'
+}
+
 export type CurrentOrganizationFragment = { __typename?: 'Organization', id: string, name: string, logoUrl?: string | null, apiKey: string, vatRate: number };
 
 export type CurrentUserFragment = { __typename?: 'User', id: string, email?: string | null, organizations?: Array<{ __typename?: 'Organization', id: string, name: string, logoUrl?: string | null, apiKey: string, vatRate: number }> | null };