diff --git a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
index 21e1074f1..6a9c229c1 100644
--- a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
+++ b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
@@ -11,45 +11,161 @@
             hide-details
         />
 
-        <v-data-table
+        <v-data-table-server
             v-model="selected"
-            :sort-by="sortBy"
             :headers="headers"
-            :items="buckets"
+            :items="page.buckets"
             :search="search"
+            :loading="areBucketsFetching"
+            :items-length="page.totalCount"
+            :items-per-page-options="tableSizeOptions(page.totalCount)"
+            item-value="name"
             class="elevation-1"
-            show-select
+            @update:itemsPerPage="onUpdateLimit"
+            @update:page="onUpdatePage"
         >
             <template #item.name="{ item }">
                 <div>
                     <v-btn
-                        class="rounded-lg w-100 pl-1 pr-4 justify-start font-weight-bold"
+                        class="rounded-lg w-100 pl-1 pr-4 justify-start font-weight-bold text-lowercase"
                         variant="text"
                         height="40"
                         color="default"
-                        to="/bucket"
+                        @click="openBucket(item.raw.name)"
                     >
                         <img src="../assets/icon-bucket-tonal.svg" alt="Bucket" class="mr-3">
                         {{ item.raw.name }}
                     </v-btn>
                 </div>
             </template>
-        </v-data-table>
+            <template #item.storage="{ item }">
+                <span>
+                    {{ item.raw.storage.toFixed(2) + 'GB' }}
+                </span>
+            </template>
+            <template #item.egress="{ item }">
+                <span>
+                    {{ item.raw.egress.toFixed(2) + 'GB' }}
+                </span>
+            </template>
+            <template #item.objectCount="{ item }">
+                <span>
+                    {{ item.raw.objectCount.toLocaleString() }}
+                </span>
+            </template>
+            <template #item.segmentCount="{ item }">
+                <span>
+                    {{ item.raw.segmentCount.toLocaleString() }}
+                </span>
+            </template>
+            <template #item.createdAt="{ item }">
+                <span>
+                    {{ item.raw.since.toLocaleString() }}
+                </span>
+            </template>
+        </v-data-table-server>
     </v-card>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch, onMounted, computed } from 'vue';
+import { useRouter } from 'vue-router';
 import { VCard, VTextField, VBtn } from 'vuetify/components';
-import { VDataTable } from 'vuetify/labs/components';
+import { VDataTableServer } from 'vuetify/labs/components';
 
-const props = defineProps<{
-    headers: unknown[],
-    buckets: unknown[],
-}>();
+import { BucketPage, BucketCursor } from '@/types/buckets';
+import { useBucketsStore } from '@/store/modules/bucketsStore';
+import { useNotify } from '@/utils/hooks';
+import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+import { useProjectsStore } from '@/store/modules/projectsStore';
+import { DEFAULT_PAGE_LIMIT } from '@/types/pagination';
+import { tableSizeOptions } from '@/types/common';
 
+const bucketsStore = useBucketsStore();
+const projectsStore = useProjectsStore();
+const notify = useNotify();
+const router = useRouter();
+
+const FIRST_PAGE = 1;
+const areBucketsFetching = ref<boolean>(true);
 const search = ref<string>('');
+const searchTimer = ref<NodeJS.Timeout>();
 const selected = ref([]);
 
-const sortBy = [{ key: 'date', order: 'asc' }];
+const headers = [
+    {
+        title: 'Name',
+        align: 'start',
+        key: 'name',
+        sortable: false,
+    },
+    { title: 'Storage', key: 'storage', sortable: false },
+    { title: 'Egress', key: 'egress', sortable: false },
+    { title: 'Objects', key: 'objectCount', sortable: false },
+    { title: 'Segments', key: 'segmentCount', sortable: false },
+    { title: 'Date Created', key: 'createdAt', sortable: false },
+];
+
+/**
+ * Returns buckets cursor from store.
+ */
+const cursor = computed((): BucketCursor => {
+    return bucketsStore.state.cursor;
+});
+
+/**
+ * Returns buckets page from store.
+ */
+const page = computed((): BucketPage => {
+    return bucketsStore.state.page;
+});
+
+/**
+ * Fetches bucket using api.
+ */
+async function fetchBuckets(page = FIRST_PAGE, limit = DEFAULT_PAGE_LIMIT): Promise<void> {
+    try {
+        await bucketsStore.getBuckets(page, projectsStore.state.selectedProject.id, limit);
+        if (areBucketsFetching.value) areBucketsFetching.value = false;
+    } catch (error) {
+        notify.error(`Unable to fetch buckets. ${error.message}`, AnalyticsErrorEventSource.BUCKET_TABLE);
+    }
+}
+
+/**
+ * Handles update table rows limit event.
+ */
+ function onUpdateLimit(limit: number): void {
+    fetchBuckets(page.value.currentPage, limit);
+}
+
+/**
+ * Handles update table page event.
+ */
+function onUpdatePage(page: number): void {
+    fetchBuckets(page, cursor.value.limit);
+}
+
+/**
+ * Handles update table search.
+ */
+ watch(() => search.value, () => {
+    clearTimeout(searchTimer.value);
+
+    searchTimer.value = setTimeout(() => {
+        bucketsStore.setBucketsSearch(search.value);
+        fetchBuckets();
+    }, 500); // 500ms delay for every new call.
+});
+
+/**
+ * Navigates to bucket page.
+ */
+function openBucket(bucketName: string): void {
+    router.push(`/projects/${projectsStore.state.selectedProject.id}/buckets/${bucketName}`);
+}
+
+onMounted(() => {
+    fetchBuckets();
+});
 </script>
diff --git a/web/satellite/vuetify-poc/src/router/index.ts b/web/satellite/vuetify-poc/src/router/index.ts
index dad215f88..e40988388 100644
--- a/web/satellite/vuetify-poc/src/router/index.ts
+++ b/web/satellite/vuetify-poc/src/router/index.ts
@@ -58,9 +58,9 @@ const routes: RouteRecordRaw[] = [
                 component: () => import(/* webpackChunkName: "Buckets" */ '@poc/views/Buckets.vue'),
             },
             {
-                path: 'bucket',
+                path: 'buckets/:bucketName',
                 name: 'Bucket',
-                component: () => import(/* webpackChunkName: "Buckets" */ '@poc/views/Bucket.vue'),
+                component: () => import(/* webpackChunkName: "Bucket" */ '@poc/views/Bucket.vue'),
             },
             {
                 path: 'access',
diff --git a/web/satellite/vuetify-poc/src/views/Buckets.vue b/web/satellite/vuetify-poc/src/views/Buckets.vue
index 9be9276c9..409839e05 100644
--- a/web/satellite/vuetify-poc/src/views/Buckets.vue
+++ b/web/satellite/vuetify-poc/src/views/Buckets.vue
@@ -87,7 +87,7 @@
             </v-col>
         </v-row>
 
-        <BucketsDataTable :headers="headers" :buckets="buckets" />
+        <BucketsDataTable />
     </v-container>
 </template>
 
@@ -126,38 +126,4 @@ const bucketNameRules = [
         return true;
     },
 ];
-const headers = [
-    {
-        title: 'Name',
-        align: 'start',
-        key: 'name',
-    },
-    { title: 'Files', key: 'files' },
-    { title: 'Storage', key: 'storage' },
-    { title: 'Bandwidth', key: 'bandwidth' },
-    { title: 'Date Created', key: 'date' },
-];
-const buckets = [
-    {
-        name: 'Demo',
-        date: '02 Mar 2023',
-        files: '4,210',
-        bandwidth: '481 MB',
-        storage: '32 GB',
-    },
-    {
-        name: 'Photos',
-        date: '03 Mar 2023',
-        files: '92,155',
-        bandwidth: '2.0 GB',
-        storage: '5.2 GB',
-    },
-    {
-        name: 'Videos',
-        date: '04 Mar 2023',
-        files: '24',
-        bandwidth: '102 MB',
-        storage: '1.7 TB',
-    },
-];
 </script>