diff --git a/src/pages/buckets/components/bucket-card.tsx b/src/pages/buckets/components/bucket-card.tsx
index 6f5eee4..c27a2e6 100644
--- a/src/pages/buckets/components/bucket-card.tsx
+++ b/src/pages/buckets/components/bucket-card.tsx
@@ -2,12 +2,19 @@ import { Bucket } from "../types";
 import { ArchiveIcon, ChartPie, ChartScatter } from "lucide-react";
 import { readableBytes } from "@/lib/utils";
 import Button from "@/components/ui/button";
+import { useBucketDetails } from "../hooks";
 
 type Props = {
   data: Bucket & { aliases: string[] };
 };
 
 const BucketCard = ({ data }: Props) => {
+  const { data: bucketDetails } = useBucketDetails(data.id);
+
+  // Use detailed data if available, otherwise fall back to basic data
+  const bytes = bucketDetails?.bytes ?? data.bytes;
+  const objects = bucketDetails?.objects ?? data.objects;
+
   return (
     <div className="card card-body p-6">
       <div className="grid grid-cols-2 items-start gap-4 p-2 pb-0">
@@ -25,7 +32,7 @@ const BucketCard = ({ data }: Props) => {
             Usage
           </p>
           <p className="text-xl font-medium mt-1">
-            {readableBytes(data.bytes)}
+            {bytes != null ? readableBytes(bytes) : "n/a"}
           </p>
         </div>
 
@@ -34,7 +41,9 @@ const BucketCard = ({ data }: Props) => {
             <ChartScatter className="inline" size={16} />
             Objects
           </p>
-          <p className="text-xl font-medium mt-1">{data.objects}</p>
+          <p className="text-xl font-medium mt-1">
+            {objects != null ? objects.toLocaleString() : "n/a"}
+          </p>
         </div>
       </div>
 
diff --git a/src/pages/buckets/hooks.ts b/src/pages/buckets/hooks.ts
index 388a9b1..958f4af 100644
--- a/src/pages/buckets/hooks.ts
+++ b/src/pages/buckets/hooks.ts
@@ -4,7 +4,7 @@ import {
   UseMutationOptions,
   useQuery,
 } from "@tanstack/react-query";
-import { GetBucketRes } from "./types";
+import { GetBucketRes, Bucket } from "./types";
 import { CreateBucketSchema } from "./schema";
 
 export const useBuckets = () => {
@@ -14,6 +14,14 @@ export const useBuckets = () => {
   });
 };
 
+export const useBucketDetails = (id?: string | null) => {
+  return useQuery({
+    queryKey: ["bucket-details", id],
+    queryFn: () => api.get<Bucket>("/v2/GetBucketInfo", { params: { id } }),
+    enabled: !!id,
+  });
+};
+
 export const useCreateBucket = (
   options?: UseMutationOptions<unknown, Error, CreateBucketSchema>
 ) => {
diff --git a/src/pages/buckets/manage/overview/overview-tab.tsx b/src/pages/buckets/manage/overview/overview-tab.tsx
index 05b89a3..330e70c 100644
--- a/src/pages/buckets/manage/overview/overview-tab.tsx
+++ b/src/pages/buckets/manage/overview/overview-tab.tsx
@@ -28,7 +28,7 @@ const OverviewTab = () => {
             <div className="flex-1">
               <p className="text-sm flex items-center gap-1">Storage</p>
               <p className="text-2xl font-medium">
-                {readableBytes(data?.bytes)}
+                {data?.bytes != null ? readableBytes(data.bytes) : "n/a"}
               </p>
             </div>
           </div>
@@ -37,7 +37,9 @@ const OverviewTab = () => {
             <ChartScatter className="mt-1" size={20} />
             <div className="flex-1">
               <p className="text-sm flex items-center gap-1">Objects</p>
-              <p className="text-2xl font-medium">{data?.objects}</p>
+              <p className="text-2xl font-medium">
+                {data?.objects != null ? data.objects.toLocaleString() : "n/a"}
+              </p>
             </div>
           </div>
         </div>