diff --git a/apps/studio/components/interfaces/ProjectHome/ProjectUsageSection.tsx b/apps/studio/components/interfaces/ProjectHome/ProjectUsageSection.tsx
index 9a3866a09bd..54c02299725 100644
--- a/apps/studio/components/interfaces/ProjectHome/ProjectUsageSection.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/ProjectUsageSection.tsx
@@ -209,7 +209,7 @@ export const ProjectUsageSection = () => {
       </div>
       <Row maxColumns={4} minWidth={280}>
         {enabledServices.map((s) => (
-          <Card key={s.key} className="mb-0 flex flex-col">
+          <Card key={s.key} className="mb-0 md:mb-0 h-full flex flex-col h-64">
             <CardHeader className="flex flex-row items-end justify-between gap-2 space-y-0 pb-0 border-b-0">
               <div className="flex items-center gap-2">
                 <div className="flex flex-col">
@@ -234,9 +234,10 @@ export const ProjectUsageSection = () => {
                 </div>
               </div>
             </CardHeader>
-            <CardContent className="p-card overflow-hidden">
-              <Loading active={isLoading}>
+            <CardContent className="p-card flex-1 h-full overflow-hidden">
+              <Loading isFullHeight active={isLoading}>
                 <LogsBarChart
+                  isFullHeight
                   data={s.data}
                   DateTimeFormat={datetimeFormat}
                   onBarClick={handleBarClick(s.route, s.key)}
@@ -253,7 +254,11 @@ export const ProjectUsageSection = () => {
                     },
                   }}
                   EmptyState={
-                    <NoDataPlaceholder size="small" message="No data for selected period" />
+                    <NoDataPlaceholder
+                      size="small"
+                      message="No data for selected period"
+                      isFullHeight
+                    />
                   }
                 />
               </Loading>
diff --git a/packages/ui-patterns/src/LogsBarChart/index.tsx b/packages/ui-patterns/src/LogsBarChart/index.tsx
index 6bd8f23612f..1ef16037ec6 100644
--- a/packages/ui-patterns/src/LogsBarChart/index.tsx
+++ b/packages/ui-patterns/src/LogsBarChart/index.tsx
@@ -70,11 +70,9 @@ export const LogsBarChart = ({
       data-testid="logs-bar-chart"
       className={cn('flex flex-col gap-y-3', isFullHeight ? 'h-full' : 'h-24')}
     >
-      <ChartContainer
-        className={cn('h-full', isFullHeight && 'aspect-auto')}
-        config={chartConfig ?? defaultChartConfig}
-      >
+      <ChartContainer className="h-full" config={chartConfig ?? defaultChartConfig}>
         <RechartBarChart
+          height={isFullHeight ? undefined : 100}
           data={data}
           onMouseMove={(e: any) => {
             if (e.activeTooltipIndex !== focusDataIndex) {