diff --git a/packages/ui/src/components/Progress.svelte b/packages/ui/src/components/Progress.svelte
index 070791cee38..0063416906c 100644
--- a/packages/ui/src/components/Progress.svelte
+++ b/packages/ui/src/components/Progress.svelte
@@ -24,6 +24,7 @@
   export let color: number | undefined = undefined
   export let editable = false
   export let fallback: number = 0
+  export let small: boolean = false
 
   $: proc = (max - min) / 100
   $: if (value > max) value = max
@@ -61,6 +62,9 @@
   let drag: boolean = false
 
   $: position = proc !== 0 ? Math.round((value - min) / proc) : fallback
+  $: barWidth = small
+    ? `calc(calc(100% - 0.5rem) * ${position} / 100 + .25rem)`
+    : `calc(calc(100% - 1rem) * ${position} / 100 + .5rem)`
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -68,7 +72,7 @@
 <div class="container" class:editable on:click={click} on:mousemove={move} on:mouseleave={save} on:mouseup={save}>
   <div
     class="bar"
-    style:width={`calc(calc(100% - 1rem) * ${position} / 100 + .5rem)`}
+    style:width={barWidth}
     style:background-color={color !== undefined
       ? getPlatformColor(color, $themeStore.dark)
       : 'var(--theme-toggle-on-bg-color)'}
diff --git a/plugins/billing-resources/src/components/LimitsIndicator.svelte b/plugins/billing-resources/src/components/LimitsIndicator.svelte
index a4b17804c90..991e960b526 100644
--- a/plugins/billing-resources/src/components/LimitsIndicator.svelte
+++ b/plugins/billing-resources/src/components/LimitsIndicator.svelte
@@ -16,8 +16,7 @@
   import { onDestroy, onMount } from 'svelte'
   import { checkWorkspaceLimits, upgradePlan, calculateLimits } from '../utils'
   import { subscriptionStore, resetSubscriptionStore } from '../stores/subscription'
-  import { location, tooltip } from '@hcengineering/ui'
-  import UsageProgressBar from './UsageProgressBar.svelte'
+  import { location, PaletteColorIndexes, Progress, tooltip } from '@hcengineering/ui'
   import UsagePopup from './UsagePopup.svelte'
 
   let pollInterval: number | undefined
@@ -43,6 +42,9 @@
   $: storagePercent = limits.storageLimit > 0 ? Math.min(storageUsed / limits.storageLimit, 1) : 0
   $: bandwidthPercent = limits.trafficLimit > 0 ? Math.min(trafficUsed / limits.trafficLimit, 1) : 0
 
+  $: storageColor = storagePercent >= 0.9 ? PaletteColorIndexes.Firework : undefined
+  $: bandwidthColor = bandwidthPercent >= 0.9 ? PaletteColorIndexes.Firework : undefined
+
   onMount(() => {
     // Initialize with current workspace
     currentWorkspace = workspace
@@ -101,12 +103,11 @@
   }}
   on:click={handleClick}
 >
-  <div class="limit-item">
-    <UsageProgressBar percent={storagePercent} height="5px" />
+  <div class="progress-wrapper">
+    <Progress color={storageColor} value={storageUsed} max={limits.storageLimit} fallback={0} small={true} />
   </div>
-
-  <div class="limit-item">
-    <UsageProgressBar percent={bandwidthPercent} height="5px" />
+  <div class="progress-wrapper">
+    <Progress color={bandwidthColor} value={trafficUsed} max={limits.trafficLimit} fallback={0} small={true} />
   </div>
 </button>
 
@@ -115,11 +116,12 @@
     display: flex;
     flex-direction: column;
     gap: 0.125rem;
-    border-radius: var(--small-BorderRadius);
+    border-radius: var(--extra-small-BorderRadius);
     cursor: pointer;
     transition: background-color 0.2s ease;
-    padding: 0.25rem;
-    border: none;
+    padding: 0.188rem;
+    width: 1.75rem;
+    border: 1px solid var(--theme-trans-color);
     background: none;
     outline: none;
 
@@ -128,13 +130,8 @@
       background-color: var(--theme-button-hovered);
     }
   }
-  .limit-item {
-    display: flex;
-    align-items: center;
-    padding: 0.0625rem;
-    border-radius: var(--small-BorderRadius);
-    transition: background-color 0.2s ease;
-    position: relative;
-    border: 1px solid var(--theme-trans-color);
+
+  .progress-wrapper {
+    width: 100%;
   }
 </style>
diff --git a/plugins/billing-resources/src/components/UsageExtension.svelte b/plugins/billing-resources/src/components/UsageExtension.svelte
new file mode 100644
index 00000000000..ec8a69a638d
--- /dev/null
+++ b/plugins/billing-resources/src/components/UsageExtension.svelte
@@ -0,0 +1,21 @@
+<!--
+// Copyright © 2025 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import LimitsIndicator from './LimitsIndicator.svelte'
+</script>
+
+<div class="px-2">
+  <LimitsIndicator />
+</div>
diff --git a/plugins/billing-resources/src/components/UsageProgressBar.svelte b/plugins/billing-resources/src/components/UsageProgressBar.svelte
deleted file mode 100644
index 954617f04d8..00000000000
--- a/plugins/billing-resources/src/components/UsageProgressBar.svelte
+++ /dev/null
@@ -1,65 +0,0 @@
-<!--
-// Copyright © 2025 Hardcore Engineering Inc.
-//
-// Licensed under the Eclipse Public License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License. You may
-// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//
-// See the License for the specific language governing permissions and
-// limitations under the License.
--->
-<script lang="ts">
-  export let percent: number = 0 // 0 to 1
-  export let width: string = '1rem'
-  export let height: string = '0.3125rem'
-
-  $: clampedPercent = Math.min(Math.max(percent, 0), 1)
-
-  // Calculate style class based on current percentage
-  $: fillClass = clampedPercent >= 0.9 ? 'critical' : clampedPercent >= 0.7 ? 'warning' : 'normal'
-</script>
-
-<div class="progress-bar" style="width: {width}; height: {height};">
-  <div class="progress-track">
-    <div class="progress-fill {fillClass}" style="width: {clampedPercent * 100}%;"></div>
-  </div>
-</div>
-
-<style lang="scss">
-  .progress-bar {
-    display: flex;
-    align-items: center;
-  }
-
-  .progress-track {
-    width: 100%;
-    height: 100%;
-    background-color: var(--button-secondary-BackgroundColor);
-    border-radius: 2px;
-    overflow: hidden;
-  }
-
-  .progress-fill {
-    height: 100%;
-    border-radius: 2px;
-    transition:
-      width 0.3s ease,
-      background-color 0.3s ease;
-
-    &.normal {
-      background-color: var(--theme-won-color);
-    }
-
-    &.warning {
-      background-color: var(--theme-warning-color);
-    }
-
-    &.critical {
-      background-color: var(--theme-error-color);
-    }
-  }
-</style>
diff --git a/plugins/billing-resources/src/index.ts b/plugins/billing-resources/src/index.ts
index 565c0ee52ff..56634ecc428 100644
--- a/plugins/billing-resources/src/index.ts
+++ b/plugins/billing-resources/src/index.ts
@@ -16,12 +16,12 @@
 import type { Resources } from '@hcengineering/platform'
 import Settings from './components/Settings.svelte'
 import WorkbenchExtension from './components/WorkbenchExtension.svelte'
-import LimitsIndicator from './components/LimitsIndicator.svelte'
+import UsageExtension from './components/UsageExtension.svelte'
 
 export default async (): Promise<Resources> => ({
   component: {
     Settings,
-    UsageExtension: LimitsIndicator,
+    UsageExtension,
     WorkbenchExtension
   }
 })