diff --git a/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/index.ts b/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/index.ts
index b64af6f35a0..5bfb0dbe22d 100644
--- a/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/index.ts
+++ b/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/index.ts
@@ -16,6 +16,7 @@
 
 import {LitElement, html, css, nothing} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
 
 import {formatBytes} from '../../../../data_formatting';
 
@@ -57,7 +58,8 @@ export class AccessKeyUsageMeter extends LitElement {
       font-family: var(--access-key-usage-meter-font-family);
     }
 
-    :host([dataLimitWarning]) > label {
+    :host([dataLimitWarning]) > label,
+    label.data-limit-warning {
       color: var(--access-key-usage-meter-warning-text-color);
     }
 
@@ -77,22 +79,32 @@ export class AccessKeyUsageMeter extends LitElement {
       background: var(--access-key-usage-meter-color);
     }
 
-    :host([dataLimitWarning]) > progress[value]::-webkit-progress-value {
+    :host([dataLimitWarning]) > progress[value]::-webkit-progress-value,
+    progress.data-limit-warning[value]::-webkit-progress-value {
       background: var(--access-key-usage-meter-warning-color);
     }
   `;
 
   render() {
+    // TODO (#2400): debug why the reflected property doesn't work in electron
     return html`<progress
+        class=${classMap({
+          'data-limit-warning': this.dataLimitWarning,
+        })}
         id="progress"
         max=${this.dataLimitBytes}
         value=${this.dataUsageBytes}
       ></progress>
-      <label for="progress">
+      <label
+        class=${classMap({
+          'data-limit-warning': this.dataLimitWarning,
+        })}
+        for="progress"
+      >
         ${formatBytes(this.dataUsageBytes, this.language)} /
         ${formatBytes(this.dataLimitBytes, this.language)}
         ${this.dataLimitWarning
-          ? this.localize('server-view-access-keys-usage-limit')
+          ? `(${this.localize('server-view-access-keys-usage-limit')})`
           : nothing}
       </label>`;
   }
diff --git a/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/stories.ts b/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/stories.ts
index 233cb6aa4e5..477e4c4383a 100644
--- a/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/stories.ts
+++ b/server_manager/www/views/server_view/access_key_data_table/access_key_usage_meter/stories.ts
@@ -30,6 +30,6 @@ export const Example = {
     dataUsageBytes: 1000000,
     dataLimitBytes: 10000000,
     language: 'en',
-    localize: () => '(80%+ used)',
+    localize: () => '80%+ used',
   },
 };
diff --git a/server_manager/www/views/server_view/server_metrics_row/bandwidth.ts b/server_manager/www/views/server_view/server_metrics_row/bandwidth.ts
index fb9c47d008c..4dd0ffb0551 100644
--- a/server_manager/www/views/server_view/server_metrics_row/bandwidth.ts
+++ b/server_manager/www/views/server_view/server_metrics_row/bandwidth.ts
@@ -16,6 +16,7 @@
 
 import {LitElement, html, css, nothing} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map';
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 
 import type {ServerMetricsData} from './index';
@@ -158,7 +159,8 @@ export class ServerMetricsBandwidthRow extends LitElement {
       font-size: var(--server-metrics-bandwidth-row-value-font-size);
     }
 
-    :host([bandwidthLimitWarning]) .bandwidth-percentage {
+    :host([bandwidthLimitWarning]) .bandwidth-percentage,
+    .bandwidth-limit-warning .bandwidth-percentage {
       color: var(--server-metrics-bandwidth-row-meter-warning-color);
     }
 
@@ -206,15 +208,18 @@ export class ServerMetricsBandwidthRow extends LitElement {
       );
     }
 
-    :host([bandwidthLimitWarning]) progress[value]::-webkit-progress-value {
+    :host([bandwidthLimitWarning]) progress[value]::-webkit-progress-value,
+    .bandwidth-limit-warning progress[value]::-webkit-progress-value {
       background: var(--server-metrics-bandwidth-row-meter-warning-color);
     }
 
-    :host([bandwidthLimitWarning]) .bandwidth-progress-container {
+    :host([bandwidthLimitWarning]) .bandwidth-progress-container,
+    .bandwidth-limit-warning .bandwidth-progress-container {
       padding: 0;
     }
 
-    :host([bandwidthLimitWarning]) .bandwidth-progress-container icon-tooltip {
+    :host([bandwidthLimitWarning]) .bandwidth-progress-container icon-tooltip,
+    .bandwidth-limit-warning .bandwidth-progress-container icon-tooltip {
       display: block;
     }
 
@@ -296,7 +301,13 @@ export class ServerMetricsBandwidthRow extends LitElement {
           '</i>'
         )}
       >
-        <div class="main-container">
+        <!-- TODO(#2400): debug why the reflected property doesn't work in electron -->
+        <div
+          class=${classMap({
+            'bandwidth-limit-warning': this.bandwidthLimitWarning,
+            'main-container': true,
+          })}
+        >
           <div class="title-and-bandwidth-container">
             <div class="title-container">
               <mwc-icon>data_usage</mwc-icon>