diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
index 8f829ed0c..fc3905014 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
@@ -131,7 +131,7 @@ onMounted(fetchAccountDetails);
           :description="$t('BILLING_SETTINGS.CAPTAIN.DESCRIPTION')"
         >
           <template #action>
-            <ButtonV4 sm solid slate disabled>
+            <ButtonV4 sm faded slate disabled>
               {{ $t('BILLING_SETTINGS.CAPTAIN.BUTTON_TXT') }}
             </ButtonV4>
           </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingCard.vue b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingCard.vue
index d9179b76c..932f6b5b4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingCard.vue
@@ -15,7 +15,7 @@ defineProps({
 
 <template>
   <div
-    class="rounded-xl shadow-sm border border-n-weak bg-n-solid-3 py-5 space-y-5"
+    class="rounded-xl shadow-sm border border-n-weak bg-n-solid-2 py-5 space-y-5"
   >
     <BillingHeader :title :description class="px-5">
       <slot name="action" />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingMeter.vue b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingMeter.vue
index fb057b44a..5af2fcb35 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingMeter.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingMeter.vue
@@ -39,7 +39,7 @@ const colorClass = computed(() => {
     </div>
     <div class="tabular-nums">{{ consumed }} / {{ totalCount }}</div>
   </div>
-  <div class="rounded-full overflow-hidden h-2 w-full bg-n-container mt-2">
+  <div class="rounded-full overflow-hidden h-2 w-full bg-n-slate-4 mt-2">
     <div class="h-2" :class="colorClass" :style="{ width: `${percent}%` }" />
   </div>
 </template>
diff --git a/package.json b/package.json
index b308c42de..5121a2077 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "@breezystack/lamejs": "^1.2.7",
     "@chatwoot/ninja-keys": "1.2.3",
     "@chatwoot/prosemirror-schema": "1.1.1-next",
-    "@chatwoot/utils": "^0.0.32",
+    "@chatwoot/utils": "^0.0.33",
     "@formkit/core": "^1.6.7",
     "@formkit/vue": "^1.6.7",
     "@hcaptcha/vue3-hcaptcha": "^1.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 514306ffb..d6e5e526f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,8 +23,8 @@ importers:
         specifier: 1.1.1-next
         version: 1.1.1-next
       '@chatwoot/utils':
-        specifier: ^0.0.32
-        version: 0.0.32
+        specifier: ^0.0.33
+        version: 0.0.33
       '@formkit/core':
         specifier: ^1.6.7
         version: 1.6.7
@@ -404,8 +404,8 @@ packages:
   '@chatwoot/prosemirror-schema@1.1.1-next':
     resolution: {integrity: sha512-/M2qZ+ZF7GlQNt1riwVP499fvp3hxSqd5iy8hxyF9pkj9qQ+OKYn5JK+v3qwwqQY3IxhmNOn1Lp6tm7vstrd9Q==}
 
-  '@chatwoot/utils@0.0.32':
-    resolution: {integrity: sha512-q+1m0/yvbuIheSJv8g1teK5L4XWwNtcXSWQv9jJw0svbp7bvmTycmNZfrcXbARl3EdBPORuVNJU2mVr+0CyrGQ==}
+  '@chatwoot/utils@0.0.33':
+    resolution: {integrity: sha512-o5+2h+k+2XWRTfhI7mogRCYnbjh+/BKE/px7PYKUMsIS9uecxfNeLzrnaUzNw60dl/0MFe6G0OmcINW+AEh5KA==}
     engines: {node: '>=10'}
 
   '@codemirror/commands@6.7.0':
@@ -5154,7 +5154,7 @@ snapshots:
       prosemirror-utils: 1.2.2(prosemirror-model@1.22.3)(prosemirror-state@1.4.3)
       prosemirror-view: 1.34.1
 
-  '@chatwoot/utils@0.0.32':
+  '@chatwoot/utils@0.0.33':
     dependencies:
       date-fns: 2.29.3