diff --git a/api/src/main/java/org/apache/cloudstack/storage/object/BucketApiService.java b/api/src/main/java/org/apache/cloudstack/storage/object/BucketApiService.java
index e27ef308d7f2..3dceab33403b 100644
--- a/api/src/main/java/org/apache/cloudstack/storage/object/BucketApiService.java
+++ b/api/src/main/java/org/apache/cloudstack/storage/object/BucketApiService.java
@@ -75,6 +75,14 @@ public interface BucketApiService {
             ConfigKey.Scope.Global,
             null);
 
+    ConfigKey<Long> ObjectStorePresignedUrlExpirySeconds = new ConfigKey<Long>("Advanced", Long.class,
+            "objectstore.presigned.url.expiry.seconds",
+            "86400",
+            "The expiry time, in seconds, for object store presigned URLs generated by the UI.",
+            true,
+            ConfigKey.Scope.Global,
+            null);
+
     /**
      * Creates the database object for a Bucket based on the given criteria
      *
diff --git a/plugins/storage/object/ceph/src/main/java/org/apache/cloudstack/storage/datastore/driver/CephObjectStoreDriverImpl.java b/plugins/storage/object/ceph/src/main/java/org/apache/cloudstack/storage/datastore/driver/CephObjectStoreDriverImpl.java
index 87983a4a1c41..32ab4b2d3e36 100644
--- a/plugins/storage/object/ceph/src/main/java/org/apache/cloudstack/storage/datastore/driver/CephObjectStoreDriverImpl.java
+++ b/plugins/storage/object/ceph/src/main/java/org/apache/cloudstack/storage/datastore/driver/CephObjectStoreDriverImpl.java
@@ -138,7 +138,7 @@ public Bucket createBucket(Bucket bucket, boolean objectLock) {
                     .withAllowedHeaders(Arrays.asList("*"))
                     .withAllowedOrigins(Arrays.asList("*"))
                     .withMaxAgeSeconds(3000)
-                    .withExposedHeaders(Arrays.asList("x-amz-server-side-encryption", "x-amz-request-id", "x-amz-id-2"));
+                    .withExposedHeaders(Arrays.asList("ETag", "x-amz-server-side-encryption", "x-amz-request-id", "x-amz-id-2"));
 
                     List<CORSRule> rules = new ArrayList<CORSRule>();
             rules.add(rule);
diff --git a/server/src/main/java/org/apache/cloudstack/storage/object/BucketApiServiceImpl.java b/server/src/main/java/org/apache/cloudstack/storage/object/BucketApiServiceImpl.java
index 563320e61968..ef35e153ec67 100644
--- a/server/src/main/java/org/apache/cloudstack/storage/object/BucketApiServiceImpl.java
+++ b/server/src/main/java/org/apache/cloudstack/storage/object/BucketApiServiceImpl.java
@@ -108,7 +108,8 @@ public ConfigKey<?>[] getConfigKeys() {
                 DefaultMaxProjectBuckets,
                 DefaultMaxProjectObjectStorage,
                 DefaultMaxDomainBuckets,
-                DefaultMaxDomainObjectStorage
+                DefaultMaxDomainObjectStorage,
+                ObjectStorePresignedUrlExpirySeconds
         };
     }
 
diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 1530e6129308..fefb8933571a 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -2386,6 +2386,7 @@
 "label.token.for.dashboard.login": "Token for dashboard login can be retrieved using following command",
 "label.tools": "Tools",
 "label.total": "Total",
+"label.total.allocated.capacity": "Total allocated capacity",
 "label.total.network": "Total Networks",
 "label.total.vms": "Total Instances",
 "label.total.volume": "Total volumes",
@@ -2467,7 +2468,7 @@
 "label.upgrade.router.newer.template": "Upgrade router to use newer Template",
 "label.upgrading": "Upgrading",
 "label.upload": "Upload",
-"label.upload.description": "Path to upload objects at",
+"label.upload.description": "Path to upload objects at. If left empty, objects are uploaded to the root path.",
 "label.upload.path": "Upload path",
 "label.upload.icon": "Upload icon",
 "label.upload.iso.from.local": "Upload ISO from local",
@@ -2500,6 +2501,7 @@
 "label.use.kubectl.access.cluster": "<code><b>kubectl</b></code> and <code><b>kubeconfig</b></code> file to access cluster",
 "label.use.local.timezone": "Use local timezone",
 "label.used": "Used",
+"label.used.capacity": "Used capacity",
 "label.usehttps": "Use HTTPS",
 "label.usenewdiskoffering": "Replace disk offering?",
 "label.user": "User",
diff --git a/ui/public/locales/ko_KR.json b/ui/public/locales/ko_KR.json
index 2fdf024cd66c..9aea9efdd825 100644
--- a/ui/public/locales/ko_KR.json
+++ b/ui/public/locales/ko_KR.json
@@ -2383,6 +2383,7 @@
 "label.token.for.dashboard.login": "\ub300\uc2dc\ubcf4\ub4dc \ub85c\uadf8\uc778\uc744 \uc704\ud55c \ud1a0\ud070\uc740 \ub2e4\uc74c \uba85\ub839\uc744 \uc0ac\uc6a9\ud558\uc5ec \uac80\uc0c9 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.",
 "label.tools": "\ub3c4\uad6c",
 "label.total": "\uc804\uccb4",
+"label.total.allocated.capacity": "\ucd1d \ud560\ub2f9 \uc6a9\ub7c9",
 "label.total.network": "\uc804\uccb4 \ub124\ud2b8\uc6cc\ud06c",
 "label.total.vms": "\uc804\uccb4 VM",
 "label.total.volume": "\uc804\uccb4 \ubcfc\ub968",
@@ -2464,7 +2465,7 @@
 "label.upgrade.router.newer.template": "\ucd5c\uc2e0 \ud15c\ud50c\ub9bf\uc744 \uc0ac\uc6a9\ud558\ub3c4\ub85d \ub77c\uc6b0\ud130 \uc5c5\uadf8\ub808\uc774\ub4dc",
 "label.upgrading": "\uc5c5\uadf8\ub808\uc774\ub4dc\uc911",
 "label.upload": "\uc5c5\ub85c\ub4dc",
-"label.upload.description": "Object\ub97c \uc5c5\ub85c\ub4dc\ud560 \uacbd\ub85c",
+"label.upload.description": "Object\ub97c \uc5c5\ub85c\ub4dc\ud560 \uacbd\ub85c(\ubbf8\uc785\ub825\uc2dc \ucd5c\uc0c1\uc704 \uacbd\ub85c\uc5d0 \uc5c5\ub85c\ub4dc \ub429\ub2c8\ub2e4)",
 "label.upload.path": "\uc5c5\ub85c\ub4dc \uacbd\ub85c",
 "label.upload.icon": "\uc544\uc774\ucf58 \uc5c5\ub85c\ub4dc",
 "label.upload.iso.from.local": "\ub85c\uceec\uc5d0\uc11c ISO \uc5c5\ub85c\ub4dc",
@@ -2497,6 +2498,7 @@
 "label.use.kubectl.access.cluster": "\ud074\ub7ec\uc2a4\ud130\uc5d0 \uc561\uc138\uc2a4\ud558\uae30\uc704\ud55c <code> <b> kubectl </ b> </ code> \ubc0f <code> <b> kubeconfig </ b> </ code> \ud30c\uc77c",
 "label.use.local.timezone": "\ub85c\uceec \uc2dc\uac04\ub300 \uc0ac\uc6a9",
 "label.used": "\uc0ac\uc6a9\ub428",
+"label.used.capacity": "\uc0ac\uc6a9\ub41c \uc6a9\ub7c9",
 "label.usehttps": "HTTPS \uc0ac\uc6a9",
 "label.usenewdiskoffering": "\ub514\uc2a4\ud06c \uc624\ud37c\ub9c1\uc744 \ubcc0\uacbd\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?",
 "label.user": "\uc0ac\uc6a9\uc790",
@@ -2698,6 +2700,7 @@
 "label.bucket.update": "\ubc84\ud0b7 \uc5c5\ub370\uc774\ud2b8",
 "label.bucket.delete": "\ubc84\ud0b7 \uc0ad\uc81c",
 "label.quotagb": "\ud560\ub2f9\ub7c9(GB)",
+"label.quotagib": "\ud560\ub2f9\ub7c9(GiB)",
 "label.encryption": "\uc554\ud638\ud654",
 "label.versioning": "\ubc84\uc804 \uad00\ub9ac",
 "label.objectlocking": "\uac1d\uccb4 \uc7a0\uae08",
diff --git a/ui/src/components/view/DetailsTab.vue b/ui/src/components/view/DetailsTab.vue
index 1659bf76eeb4..18f347b43d3e 100644
--- a/ui/src/components/view/DetailsTab.vue
+++ b/ui/src/components/view/DetailsTab.vue
@@ -103,6 +103,11 @@
               {{ convertKB(dataResource.size) }}
             </div>
           </div>
+          <div v-else-if="$route.meta.name === 'buckets' && item === 'quota'">
+            <div>
+              {{ dataResource.quota }} GiB
+            </div>
+          </div>
           <div v-else-if="['template', 'iso'].includes($route.meta.name) && item === 'size'">
             <div>
               {{ parseFloat(dataResource.size / (1024.0 * 1024.0 * 1024.0)).toFixed(2) }} GiB
diff --git a/ui/src/components/view/ObjectStoreBrowser.vue b/ui/src/components/view/ObjectStoreBrowser.vue
index 531846a9da57..7745f36b7670 100644
--- a/ui/src/components/view/ObjectStoreBrowser.vue
+++ b/ui/src/components/view/ObjectStoreBrowser.vue
@@ -18,21 +18,26 @@
 <template>
   <a-modal
     :visible="showUploadModal"
-    :closable="true"
+    :closable="!uploadLoading"
     :destroyOnClose="true"
     :title="$t('label.upload')"
     :maskClosable="false"
     :cancelText="$t('label.cancel')"
-    @cancel="() => showUploadModal = false"
+    @cancel="closeUploadModal"
     :okText="$t('label.upload')"
+    :confirmLoading="uploadLoading"
+    :okButtonProps="{ disabled: uploadLoading || uploadFileList.length === 0 }"
+    :cancelButtonProps="{ disabled: uploadLoading }"
     @ok="uploadFiles()"
     centered
     >
     <a-upload-dragger
       :multiple="true"
-      :v-model:file-list="uploadFileList"
+      :fileList="uploadFileList"
       listType="picture"
-      :beforeUpload="beforeUpload">
+      :disabled="uploadLoading"
+      :beforeUpload="beforeUpload"
+      @remove="removeUploadFile">
       <p class="ant-upload-drag-icon">
         <cloud-upload-outlined />
       </p>
@@ -46,11 +51,20 @@
     <a-input
       v-model:value="uploadDirectory"
       :placeholder="$t('label.upload.description')"
-      :loading="loading"
+      :disabled="uploadLoading"
       enter-button/>
     <a-divider dashed/>
     <tooltip-label bold :title="$t('label.metadata')" :tooltip="$t('label.metadata.upload.description')"/>
     <KeyValuePairInput :pairs="uploadMetaData" @update-pairs="(pairs) => uploadMetaData = pairs" />
+    <div v-if="uploadLoading || uploadTotalCount > 0" class="object-store-upload-progress">
+      <a-progress
+        :percent="uploadProgressPercent"
+        :status="uploadFailedCount > 0 ? 'exception' : uploadLoading ? 'active' : 'success'" />
+      <div class="object-store-upload-progress-text">
+        업로드 {{ uploadCompletedCount }} / {{ uploadTotalCount }}
+        <span v-if="uploadFailedCount > 0">, 실패 {{ uploadFailedCount }}</span>
+      </div>
+    </div>
   </a-modal>
 
   <a-drawer
@@ -123,22 +137,33 @@
   <div>
     <a-card class="breadcrumb-card">
       <a-row>
-        <a-breadcrumb :routes="getRoutes()">
-          <template #itemRender="{ route }">
-            <span v-if="[''].includes(route.path) && route.breadcrumbName === 'root'">
-              <a @click="openDir('')">
-                <HomeOutlined/>
-              </a>
-            </span>
-            <span v-else>
-              <a @click="openDir(route.path)">
+        <a-breadcrumb>
+          <a-breadcrumb-item>
+            <a @click="openDir('')">
+              <HomeOutlined />
+              <span v-if="getObjectStorePathRoutes().length === 0" class="object-store-root-path">/</span>
+            </a>
+          </a-breadcrumb-item>
+          <a-breadcrumb-item
+            v-for="route in getObjectStorePathRoutes()"
+            :key="route.path">
+            <a @click="openDir(route.path)">
               {{ route.breadcrumbName }}
-              </a>
-            </span>
-          </template>
+            </a>
+          </a-breadcrumb-item>
         </a-breadcrumb>
       </a-row>
       <a-divider/>
+      <a-row class="object-store-usage-row" :gutter="[16, 8]">
+        <a-col>
+          <span class="object-store-usage-label">사용량</span>
+          <span>{{ convertKB(resource.size || 0) }}</span>
+        </a-col>
+        <a-col v-if="resource.quota">
+          <span class="object-store-usage-label">총용량</span>
+          <span>{{ resource.quota }} GiB</span>
+        </a-col>
+      </a-row>
       <a-row :gutter="[10,10]" :wrap="true">
         <a-col flex="75%">
           <a-input-search
@@ -168,7 +193,7 @@
             shape="round"
             size="medium"
             type="primary"
-            @click="() => showUploadModal = true">
+            @click="openUploadModal">
             <upload-outlined />
             {{ $t('label.upload') }}
           </a-button>
@@ -189,11 +214,11 @@
     <div>
       <a-table
         :columns="columns"
-        :scroll="{ y: 300 }"
         :row-key="record => record"
         :data-source="records"
         :loading="loading"
-        :pagination="{ current: page, pageSize: 1000, total: total, showSizeChanger: false }"
+        :size="'small'"
+        :pagination="{ current: page, pageSize: pageSize, total: total, showSizeChanger: false }"
         :row-selection="{ selectedRowsKeys: selectedRows, onChange: onSelectChange }"
         @change="handleTableChange">
         <template #bodyCell="{ column, record }">
@@ -225,14 +250,27 @@
 </template>
 
 <script>
-import { reactive } from 'vue'
 import * as Minio from 'minio'
+import { api } from '@/api'
 import { genericCompare } from '@/utils/sort.js'
 import InfoCard from '@/components/view/InfoCard'
 import TooltipButton from '@/components/widgets/TooltipButton'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 import KeyValuePairInput from '@/components/KeyValuePairInput'
 
+const objectStorePresignedUrlExpiryConfigKey = 'objectstore.presigned.url.expiry.seconds'
+const defaultObjectStorePresignedUrlExpirySeconds = 24 * 60 * 60
+
+const normalizeObjectStorePath = path => {
+  if (!path || path === '/') {
+    return ''
+  }
+  path = String(path).replace(/^\/+/, '')
+  return path.endsWith('/') ? path : `${path}/`
+}
+
+const pageSize = 10
+
 export default {
   name: 'ObjectStoreBrowser',
   components: {
@@ -273,7 +311,8 @@ export default {
       client: null,
       loading: false,
       records: [],
-      browserPath: this.$route.query.browserPath || '',
+      browserPath: normalizeObjectStorePath(this.$route.query.browserPath),
+      pageSize,
       page: 1,
       pageStartAfterMap: { 1: '' },
       total: 0,
@@ -281,22 +320,60 @@ export default {
       selectedRows: [],
       searchPrefix: '',
       showUploadModal: false,
-      uploadFileList: reactive([]),
-      uploadDirectory: this.$route.query.browserPath || '',
+      uploadFileList: [],
+      uploadDirectory: normalizeObjectStorePath(this.$route.query.browserPath),
       uploadMetaData: {},
+      uploadLoading: false,
+      uploadTotalCount: 0,
+      uploadCompletedCount: 0,
+      uploadFailedCount: 0,
+      objectStorePresignedUrlExpirySeconds: defaultObjectStorePresignedUrlExpirySeconds,
       record: {},
       showObjectDetails: false,
       fetching: false
     }
   },
+  computed: {
+    uploadProgressPercent () {
+      if (!this.uploadTotalCount) {
+        return 0
+      }
+      return Math.round((this.uploadCompletedCount / this.uploadTotalCount) * 100)
+    }
+  },
   created () {
     this.fetchData()
+    this.fetchObjectStorePresignedUrlExpirySeconds()
   },
   methods: {
+    openUploadModal () {
+      if (this.uploadLoading) {
+        return
+      }
+      this.resetUploadForm()
+      this.showUploadModal = true
+    },
+    closeUploadModal () {
+      if (this.uploadLoading) {
+        return
+      }
+      this.showUploadModal = false
+      this.resetUploadForm()
+    },
+    resetUploadProgress () {
+      this.uploadTotalCount = 0
+      this.uploadCompletedCount = 0
+      this.uploadFailedCount = 0
+    },
+    resetUploadForm () {
+      this.uploadFileList = []
+      this.uploadDirectory = this.browserPath
+      this.uploadMetaData = {}
+      this.resetUploadProgress()
+    },
     handleTableChange (pagination, filters, sorter) {
       if (this.page !== pagination.current) {
         this.page = pagination.current
-        this.fetchData()
       }
     },
     fetchData () {
@@ -316,12 +393,9 @@ export default {
         this.listObjects()
       }
     },
-    getRoutes () {
+    getObjectStorePathRoutes () {
       let path = ''
-      const routeList = [{
-        path: path,
-        breadcrumbName: 'root'
-      }]
+      const routeList = []
       for (const route of this.browserPath.split('/')) {
         if (route) {
           path = `${path}${route}/`
@@ -340,12 +414,17 @@ export default {
       if (val < 1024 * 1024 * 1024 * 1024 * 1024) return `${(val / 1024 / 1024 / 1024 / 1024).toFixed(2)} TB`
       return val
     },
+    convertKB (val) {
+      if (val < 1024) return `${Number(val).toFixed(2)} KB`
+      if (val < 1024 * 1024) return `${(val / 1024).toFixed(2)} MB`
+      if (val < 1024 * 1024 * 1024) return `${(val / 1024 / 1024).toFixed(2)} GB`
+      if (val < 1024 * 1024 * 1024 * 1024) return `${(val / 1024 / 1024 / 1024).toFixed(2)} TB`
+      return val
+    },
     openDir (name) {
-      if (name === '/') {
-        name = ''
-      }
-      this.browserPath = name
-      this.uploadDirectory = name
+      const normalizedName = normalizeObjectStorePath(name)
+      this.browserPath = normalizedName
+      this.uploadDirectory = normalizedName
       this.page = 1
       this.fetchData()
     },
@@ -358,29 +437,12 @@ export default {
       }
       this.fetching = true
       this.records = []
-      var stream = this.client.extensions.listObjectsV2WithMetadata(this.resource.name, this.browserPath + this.searchPrefix, false, this.pageStartAfterMap[this.page])
+      var stream = this.client.extensions.listObjectsV2WithMetadata(this.resource.name, normalizeObjectStorePath(this.browserPath) + this.searchPrefix, false, '')
       stream.on('data', obj => {
         this.records.push(obj)
-        if (this.records.length >= 1000) {
-          stream.destroy()
-        }
       })
       stream.on('end', obj => {
-        var total = 0
-        if (this.records.length > 0) {
-          if (this.records.length >= 1000) {
-            total = (this.page + 1) * 1000
-            if (total > this.total) {
-              this.total = total
-            }
-          } else {
-            total = (this.page - 1) * 1000 + this.records.length
-          }
-          this.pageStartAfterMap[this.page + 1] = this.records[this.records.length - 1].name
-        }
-        if (total > this.total) {
-          this.total = total
-        }
+        this.total = this.records.length
         this.loading = false
         this.fetching = false
       })
@@ -460,35 +522,99 @@ export default {
         this.listObjects()
       }
     },
+    fetchObjectStorePresignedUrlExpirySeconds () {
+      api('listConfigurations', { name: objectStorePresignedUrlExpiryConfigKey }).then(json => {
+        const value = json?.listconfigurationsresponse?.configuration?.[0]?.value
+        const expirySeconds = Number(value)
+        if (Number.isFinite(expirySeconds) && expirySeconds > 0) {
+          this.objectStorePresignedUrlExpirySeconds = Math.floor(expirySeconds)
+        }
+      }).catch(error => {
+        console.warn(`Failed to load ${objectStorePresignedUrlExpiryConfigKey}`, error)
+      })
+    },
+    getObjectStorePresignedUrlExpirySeconds () {
+      const expirySeconds = Number(this.objectStorePresignedUrlExpirySeconds)
+      if (!Number.isFinite(expirySeconds) || expirySeconds <= 0) {
+        return defaultObjectStorePresignedUrlExpirySeconds
+      }
+      return Math.floor(expirySeconds)
+    },
     onSelectChange (selectedRow) {
       this.selectedRows = selectedRow
     },
     beforeUpload (file) {
-      this.uploadFileList.push(file)
+      if (this.uploadLoading) {
+        return false
+      }
+      this.uploadFileList = [...this.uploadFileList, file]
       return false
     },
+    removeUploadFile (file) {
+      if (this.uploadLoading) {
+        return false
+      }
+      const index = this.uploadFileList.indexOf(file)
+      if (index < 0) {
+        return true
+      }
+      const newFileList = this.uploadFileList.slice()
+      newFileList.splice(index, 1)
+      this.uploadFileList = newFileList
+      return true
+    },
     uploadFiles () {
-      if (!this.uploadDirectory.endsWith('/')) {
+      if (this.uploadLoading) {
+        return
+      }
+      const files = [...this.uploadFileList]
+      if (files.length === 0) {
+        return
+      }
+      this.uploadDirectory = normalizeObjectStorePath(this.uploadDirectory)
+      if (this.uploadDirectory && !this.uploadDirectory.endsWith('/')) {
         this.uploadDirectory = this.uploadDirectory + '/'
       }
-      var promises = []
-      while (this.uploadFileList.length > 0) {
-        const file = this.uploadFileList.pop()
+      this.uploadLoading = true
+      this.loading = true
+      this.uploadTotalCount = files.length
+      this.uploadCompletedCount = 0
+      this.uploadFailedCount = 0
+      const metadata = { ...this.uploadMetaData }
+      const promises = files.map(file => {
         const objectName = this.uploadDirectory + file.name
-        promises.push(this.asyncUploadFile(file, objectName))
-      }
-      Promise.allSettled(promises).then(() => {
-        this.uploadDirectory = this.browserPath
-        this.uploadMetaData = {}
-        this.uploadFileList = []
+        return this.asyncUploadFile(file, objectName, metadata)
+          .catch(error => {
+            this.uploadFailedCount++
+            throw error
+          })
+          .finally(() => {
+            this.uploadCompletedCount++
+          })
+      })
+      Promise.allSettled(promises).then(results => {
+        const failedCount = results.filter(result => result.status === 'rejected').length
+        if (failedCount > 0) {
+          this.$notification.error({
+            message: this.$t('message.upload.failed'),
+            description: `${failedCount} / ${files.length}`
+          })
+          return
+        }
+        this.showUploadModal = false
+        this.resetUploadForm()
         this.listObjects()
+      }).finally(() => {
+        this.uploadLoading = false
+        if (this.uploadFailedCount > 0) {
+          this.loading = false
+        }
       })
-      this.showUploadModal = false
     },
-    asyncUploadFile (file, objectName) {
+    asyncUploadFile (file, objectName, metadata) {
       return new Promise((resolve, reject) => {
         file.arrayBuffer().then((buffer) => {
-          this.client.putObject(this.resource.name, objectName, Buffer.from(buffer), file.size, this.uploadMetaData, err => {
+          this.client.putObject(this.resource.name, objectName, Buffer.from(buffer), file.size, metadata, err => {
             if (err) {
               return reject(this.$notification.error({
                 message: this.$t('message.upload.failed'),
@@ -500,13 +626,13 @@ export default {
               description: objectName.split('/').pop()
             }))
           })
-        })
+        }).catch(reject)
       })
     },
     showObjectDescription (record) {
       this.record = { ...record }
       this.record.url = this.resource.url + '/' + record.name
-      this.client.presignedGetObject(this.resource.name, record.name, 24 * 60 * 60, (err, presignedUrl) => {
+      this.client.presignedGetObject(this.resource.name, record.name, this.getObjectStorePresignedUrlExpirySeconds(), (err, presignedUrl) => {
         if (err) {
           return this.$notification.error({
             message: this.$t('error.execute.api.failed'),
@@ -539,3 +665,29 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.object-store-root-path {
+  margin-left: 4px;
+}
+
+.object-store-usage-row {
+  margin-bottom: 12px;
+}
+
+.object-store-usage-label {
+  color: rgba(0, 0, 0, 0.65);
+  font-weight: 600;
+  margin-right: 6px;
+}
+
+.object-store-upload-progress {
+  margin-top: 16px;
+}
+
+.object-store-upload-progress-text {
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 12px;
+  margin-top: 4px;
+}
+</style>
diff --git a/ui/src/config/section/storage.js b/ui/src/config/section/storage.js
index 8bb49007e20c..31b544483ccf 100644
--- a/ui/src/config/section/storage.js
+++ b/ui/src/config/section/storage.js
@@ -555,8 +555,8 @@ export default {
       title: 'label.buckets',
       icon: 'funnel-plot-outlined',
       permission: ['listBuckets'],
-      columns: ['name', 'state', 'objectstore', 'size', 'account'],
-      details: ['id', 'name', 'state', 'objectstore', 'size', 'url', 'accesskey', 'usersecretkey', 'account', 'domain', 'created', 'quota', 'encryption', 'versioning', 'objectlocking', 'policy'],
+      columns: ['name', 'state', 'objectstore', { field: 'size', customTitle: 'used.capacity' }, { field: 'quota', customTitle: 'total.allocated.capacity' }, 'account'],
+      details: ['id', 'name', 'state', 'objectstore', { field: 'size', customTitle: 'used.capacity' }, 'url', 'accesskey', 'usersecretkey', 'account', 'domain', 'created', { field: 'quota', customTitle: 'total.allocated.capacity' }, 'encryption', 'versioning', 'objectlocking', 'policy'],
       tabs: [
         {
           name: 'details',