diff --git a/client/src/components/design-elements/PlanCard.tsx b/client/src/components/design-elements/PlanCard.tsx
index b16a8dc2b..3b6beb4f5 100644
--- a/client/src/components/design-elements/PlanCard.tsx
+++ b/client/src/components/design-elements/PlanCard.tsx
@@ -88,7 +88,7 @@ export const PlanCard = ({
   ];
   return (
     <BaseBox
-      padding={theme.spacing(8)}
+      padding={6}
       sx={
         selected
           ? {
@@ -99,7 +99,7 @@ export const PlanCard = ({
       }
       onClick={selected ? undefined : () => onClick?.(plan.plan)}
     >
-      <Stack spacing={theme.spacing(3)}>
+      <Stack spacing={3}>
         <Stack
           direction="row"
           alignItems="center"
@@ -114,13 +114,13 @@ export const PlanCard = ({
         <Typography variant="h4" fontWeight={700}>
           {priceLabel}
         </Typography>
-        <Stack spacing={theme.spacing(2)}>
+        <Stack spacing={2}>
           {featureItems.map((item) => (
             <Stack
               key={item.label}
               direction="row"
               alignItems="center"
-              gap={theme.spacing(2)}
+              gap={2}
             >
               <Check size={16} color={checkColor} />
               {item.tooltip ? (
diff --git a/client/src/pages/billing/Billing.tsx b/client/src/pages/billing/Billing.tsx
index 4048788c9..43dceec27 100644
--- a/client/src/pages/billing/Billing.tsx
+++ b/client/src/pages/billing/Billing.tsx
@@ -67,11 +67,7 @@ const BillingPage = () => {
         title="Choose a plan!"
         description="Choose a plan that fits your needs and start enjoying our services."
       />
-      <Grid
-        container
-        spacing={theme.spacing(10)}
-        columns={{ xs: 1, sm: 2, md: 4 }}
-      >
+      <Grid container spacing={{ xs: 2, sm: 3, md: 4 }} columns={{ xs: 1, sm: 2, md: 4 }}>
         {plans.map((plan) => (
           <Grid key={plan.plan} size={1}>
             <PlanCard