table

client/src/components/design-elements/Table.tsx

@@ -95,12 +95,15 @@ export function DataTable<
               {headers.map((header) => {
                 return (
                   <Grid container key={header.id}>
-                    <Grid size={3} display={"flex"} alignItems={"center"}>
-                      <Typography component="div" color={theme.palette.text.primary}>
+                    <Grid size={5} display={"flex"} alignItems={"center"}>
+                      <Typography
+                        component="div"
+                        color={theme.palette.text.primary}
+                      >
                         {header.content}
                       </Typography>
                     </Grid>
-                    <Grid size={9} display="flex" alignItems={"center"}>
+                    <Grid size={7} display="flex" alignItems={"center"}>
                       {header.render(row)}{" "}
                     </Grid>
                   </Grid>

client/src/pages/billing/Billing.tsx

@@ -65,11 +65,7 @@ const BillingPage = () => {
         title="Choose a plan!"
         description="Choose a plan that fits your needs and start enjoying our services."
       />
-      <Grid
-        container
-        spacing={{ xs: 2, sm: 3, md: 4 }}
-        columns={{ xs: 1, sm: 2, md: 4 }}
-      >
+      <Grid container spacing={10} columns={{ xs: 1, sm: 2, md: 4 }}>
         {plans.map((plan) => (
           <Grid key={plan.plan} size={1}>
             <PlanCard