diff --git a/changelog/unreleased/enhnacement-respect-max-quota b/changelog/unreleased/enhnacement-respect-max-quota
index 85784610127..bc67502785d 100644
--- a/changelog/unreleased/enhnacement-respect-max-quota
+++ b/changelog/unreleased/enhnacement-respect-max-quota
@@ -3,4 +3,6 @@ Enhancement: Respect max quota
 We've updated the quota-select component, so that values higher than max quota set on the server side won't be shown.
 
 https://github.com/owncloud/web/pull/8489
+https://github.com/owncloud/web/pull/8571
 https://github.com/owncloud/web/issues/8490
+https://github.com/owncloud/web/issues/8536
diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
index a978eef88f7..3c03aa8b79c 100644
--- a/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
@@ -164,7 +164,7 @@ export default defineComponent({
     const isLoginInputDisabled = computed(() => currentUser.uuid === (props.user as User).id)
 
     return {
-      maxQaxQuota: useCapabilitySpacesMaxQuota(),
+      maxQuota: useCapabilitySpacesMaxQuota(),
       isLoginInputDisabled,
       editUser,
       formData,
diff --git a/packages/web-pkg/src/components/QuotaSelect.vue b/packages/web-pkg/src/components/QuotaSelect.vue
index 0242b191c79..cb47503568a 100644
--- a/packages/web-pkg/src/components/QuotaSelect.vue
+++ b/packages/web-pkg/src/components/QuotaSelect.vue
@@ -9,21 +9,21 @@
       :clearable="false"
       :options="options"
       :create-option="createOption"
-      option-label="displayValue"
+      option-label="value"
       :label="title"
       @update:model-value="onUpdate"
     >
-      <template #selected-option="{ displayValue, displayUnit }">
-        <span>{{ displayValue }}</span>
-        <span v-if="displayUnit" class="oc-ml-s">{{ displayUnit }}</span>
+      <template #selected-option="{ value }">
+        <span v-if="value === 0" v-text="$gettext('No restriction')" />
+        <span v-else>{{ getFormattedFileSize(value) }}</span>
       </template>
       <template #search="{ attributes, events }">
         <input class="vs__search" v-bind="attributes" v-on="events" />
       </template>
-      <template #option="{ displayValue, displayUnit, error }">
+      <template #option="{ value, error }">
         <div class="oc-flex oc-flex-between">
-          <div>{{ displayValue }}</div>
-          <div v-if="displayUnit">{{ displayUnit }}</div>
+          <span v-if="value === 0" v-text="$gettext('No restriction')" />
+          <span v-else>{{ getFormattedFileSize(value) }}</span>
         </div>
         <div v-if="error" class="oc-text-input-danger">{{ error }}</div>
       </template>
@@ -36,6 +36,8 @@
 </template>
 
 <script lang="ts">
+import { formatFileSize } from 'web-pkg'
+
 export default {
   name: 'QuotaSelect',
   props: {
@@ -60,41 +62,30 @@ export default {
     }
   },
   computed: {
+    quotaLimit() {
+      return this.maxQuota || 1e15
+    },
     DEFAULT_OPTIONS() {
       return [
         {
-          displayValue: '1',
-          displayUnit: 'GB',
           value: Math.pow(10, 9)
         },
         {
-          displayValue: '2',
-          displayUnit: 'GB',
           value: 2 * Math.pow(10, 9)
         },
         {
-          displayValue: '5',
-          displayUnit: 'GB',
           value: 5 * Math.pow(10, 9)
         },
         {
-          displayValue: '10',
-          displayUnit: 'GB',
           value: 10 * Math.pow(10, 9)
         },
         {
-          displayValue: '50',
-          displayUnit: 'GB',
           value: 50 * Math.pow(10, 9)
         },
         {
-          displayValue: '100',
-          displayUnit: 'GB',
           value: 100 * Math.pow(10, 9)
         },
         {
-          displayValue: this.$gettext('No restriction'),
-          displayUnit: '',
           value: 0
         }
       ]
@@ -120,34 +111,35 @@ export default {
     optionSelectable(option) {
       return option.selectable !== false
     },
+    isValueValidNumber(value) {
+      const optionIsNumberRegex = /^[0-9]\d*(([.,])\d+)?$/g
+      return value !== '0' && optionIsNumberRegex.test(value)
+    },
     createOption(option) {
       option = option.replace(',', '.')
-      const optionIsNumberRegex = /^[0-9]\d*(([.,])\d+)?$/g
-      if (option === '0' || !optionIsNumberRegex.test(option)) {
+
+      if (!this.isValueValidNumber(option)) {
         return {
-          displayValue: option,
+          value: option,
           error: this.$gettext('Please enter only numbers'),
           selectable: false
         }
       }
       const value = parseFloat(option) * Math.pow(10, 9)
-      const displayValue = parseFloat(option).toFixed(2).replace('.00', '')
-      if (this.maxQuota && value > this.maxQuota) {
+
+      if (value > this.quotaLimit) {
         return {
           value,
-          displayValue,
-          displayUnit: 'GB',
-          error: this.$gettext('Please enter a value equal or less than %{ maxQuota } GB', {
-            maxQuota: this.maxQuota * Math.pow(10, -9)
+          error: this.$gettext('Please enter a value equal to or less than %{ quotaLimit }', {
+            quotaLimit: this.getFormattedFileSize(this.quotaLimit)
           }),
 
           selectable: false
         }
       }
+
       return {
-        value,
-        displayValue,
-        displayUnit: 'GB'
+        value
       }
     },
     setOptions() {
@@ -169,13 +161,8 @@ export default {
 
       if (!selectedQuotaInOptions) {
         availableOptions.push({
-          displayValue: (this.totalQuota * Math.pow(10, -9))
-            .toFixed(2)
-            .toString()
-            .replace('.00', ''),
-          displayUnit: 'GB',
           value: this.totalQuota,
-          selectable: !(this.maxQuota && this.totalQuota > this.maxQuota)
+          selectable: this.totalQuota <= this.quotaLimit
         })
       }
 
@@ -185,6 +172,10 @@ export default {
         ...availableOptions.filter((o) => !o.value)
       ]
       this.options = availableOptions
+    },
+    getFormattedFileSize(value) {
+      const formattedFilesize = formatFileSize(value, this.$language.current)
+      return !this.isValueValidNumber(value) ? value : formattedFilesize
     }
   }
 }
diff --git a/packages/web-pkg/tests/unit/components/QuotaSelect.spec.ts b/packages/web-pkg/tests/unit/components/QuotaSelect.spec.ts
index 5d9ebe6c969..0460d3d5de3 100644
--- a/packages/web-pkg/tests/unit/components/QuotaSelect.spec.ts
+++ b/packages/web-pkg/tests/unit/components/QuotaSelect.spec.ts
@@ -19,8 +19,6 @@ describe('QuotaSelect', () => {
     it('should create option', () => {
       const { wrapper } = getWrapper()
       expect((wrapper.vm as any).createOption('3')).toEqual({
-        displayValue: '3',
-        displayUnit: 'GB',
         value: 3 * Math.pow(10, 9)
       })
     })
@@ -48,8 +46,6 @@ describe('QuotaSelect', () => {
         expect.arrayContaining([
           ...(wrapper.vm as any).DEFAULT_OPTIONS,
           {
-            displayValue: '45',
-            displayUnit: 'GB',
             value: 45 * Math.pow(10, 9),
             selectable: true
           }
@@ -65,13 +61,9 @@ describe('QuotaSelect', () => {
       expect((wrapper.vm as any).options).toEqual(
         expect.arrayContaining([
           {
-            displayValue: '1',
-            displayUnit: 'GB',
             value: Math.pow(10, 9)
           },
           {
-            displayValue: '2',
-            displayUnit: 'GB',
             value: 2 * Math.pow(10, 9)
           }
         ])
@@ -86,18 +78,12 @@ describe('QuotaSelect', () => {
       expect((wrapper.vm as any).options).toEqual(
         expect.arrayContaining([
           {
-            displayValue: '1',
-            displayUnit: 'GB',
             value: Math.pow(10, 9)
           },
           {
-            displayValue: '2',
-            displayUnit: 'GB',
             value: 2 * Math.pow(10, 9)
           },
           {
-            displayValue: '100',
-            displayUnit: 'GB',
             value: 100 * Math.pow(10, 9),
             selectable: false
           }
@@ -113,8 +99,6 @@ function getWrapper({ totalQuota = 10 * Math.pow(10, 9), maxQuota = 0 } = {}) {
       data: () => {
         return {
           selectedOption: {
-            displayValue: '10',
-            displayUnit: 'GB',
             value: 10 * Math.pow(10, 9)
           },
           options: []
diff --git a/tests/e2e/support/objects/app-admin-settings/spaces/actions.ts b/tests/e2e/support/objects/app-admin-settings/spaces/actions.ts
index 58d2530d964..c9e5530348f 100644
--- a/tests/e2e/support/objects/app-admin-settings/spaces/actions.ts
+++ b/tests/e2e/support/objects/app-admin-settings/spaces/actions.ts
@@ -38,7 +38,7 @@ export const changeSpaceQuota = async (args: {
   const searchLocator = await page.locator(spacesQuotaSearchField)
   await searchLocator.fill(value)
   await page.waitForSelector(selectedQuotaValueField)
-  await page.locator(util.format(quotaValueDropDown, value)).click()
+  await page.locator(util.format(quotaValueDropDown, `${value} GB`)).click()
 
   await Promise.all([
     page.waitForResponse(
diff --git a/tests/e2e/support/objects/app-admin-settings/users/actions.ts b/tests/e2e/support/objects/app-admin-settings/users/actions.ts
index 0edc87dfd6d..34726f22902 100644
--- a/tests/e2e/support/objects/app-admin-settings/users/actions.ts
+++ b/tests/e2e/support/objects/app-admin-settings/users/actions.ts
@@ -53,7 +53,7 @@ export const changeQuota = async (args: {
   await page.locator(util.format(userIdSelector, uuid)).click()
   await page.locator(`.context-menu`).locator(editActionBtn).click()
   await page.locator(quotaInput).fill(value)
-  await page.locator(util.format(quotaValueDropDown, value)).click()
+  await page.locator(util.format(quotaValueDropDown, `${value} GB`)).click()
 
   await Promise.all([
     page.waitForResponse(
@@ -83,7 +83,7 @@ export const changeQuotaUsingBatchAction = async (args: {
   const { page, value } = args
   await page.locator(editQuotaBtn).click()
   await page.locator(quotaInputBatchAction).fill(value)
-  await page.locator(util.format(quotaValueDropDown, value)).click()
+  await page.locator(util.format(quotaValueDropDown, `${value} GB`)).click()
 
   await Promise.all([
     page.waitForResponse((resp) => resp.status() === 200 && resp.request().method() === 'PATCH'),
diff --git a/tests/e2e/support/objects/app-files/spaces/actions.ts b/tests/e2e/support/objects/app-files/spaces/actions.ts
index 74b6033aeb7..92409db4e82 100644
--- a/tests/e2e/support/objects/app-files/spaces/actions.ts
+++ b/tests/e2e/support/objects/app-files/spaces/actions.ts
@@ -157,7 +157,7 @@ export const changeQuota = async (args: {
   const searchLocator = await page.locator(spacesQuotaSearchField)
   await searchLocator.fill(value)
   await page.waitForSelector(selectedQuotaValueField)
-  await page.locator(util.format(quotaValueDropDown, value)).click()
+  await page.locator(util.format(quotaValueDropDown, `${value} GB`)).click()
 
   await Promise.all([
     page.waitForResponse(