From c4d6a3f71db61da44e5615a91cd1cf8faddffe3d Mon Sep 17 00:00:00 2001
From: emirdur <emirdurakovicofficial@gmail.com>
Date: Wed, 4 Jun 2025 21:55:32 -0700
Subject: [PATCH 1/4] redesign update

---
 .../info-value-display.component.html         | 12 ++-
 .../info-value-display.component.ts           | 26 ++++++
 .../typography/typography.component.ts        | 12 +++
 .../bms-debug-page.component.html             |  2 +-
 .../bms-debug-page.component.ts               |  5 +-
 .../bms-at-a-glance-redesign.component.css    | 15 +++
 .../bms-at-a-glance-redesign.component.html   | 55 +++++++++++
 ...bms-at-a-glance-redesign.component.spec.ts | 22 +++++
 .../bms-at-a-glance-redesign.component.ts     | 93 +++++++++++++++++++
 angular-client/src/services/theme.service.ts  |  4 +
 angular-client/src/utils/style-variant.ts     |  6 +-
 11 files changed, 245 insertions(+), 7 deletions(-)
 create mode 100644 angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.css
 create mode 100644 angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.html
 create mode 100644 angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.spec.ts
 create mode 100644 angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.ts

diff --git a/angular-client/src/components/info-value-dispaly/info-value-display.component.html b/angular-client/src/components/info-value-dispaly/info-value-display.component.html
index 3bd1b15c..e5270caf 100644
--- a/angular-client/src/components/info-value-dispaly/info-value-display.component.html
+++ b/angular-client/src/components/info-value-dispaly/info-value-display.component.html
@@ -1,16 +1,20 @@
 <vstack spacing="0px" [style]="containerStyle()">
   <hstack spacing="5px" [style]="valueUnitContainerStyle()">
     @if (this.boolValue() !== undefined) {
-      <typography variant="info-value" [content]="this.boolValue() ? 'YES' : 'NO'" [additionalStyles]="this.valueStyle()" />
-      <typography variant="info-unit" [content]="this.unit()" />
+      <typography
+        [variant]="getInfoValueVariant()"
+        [content]="this.boolValue() ? 'YES' : 'NO'"
+        [additionalStyles]="this.valueStyle()"
+      />
+      <typography [variant]="getInfoUnitVariant()" [content]="this.unit()" />
     } @else {
       <typography
-        variant="info-value"
+        [variant]="getInfoValueVariant()"
         [content]="this.formattedValue"
         style="margin-bottom: -10px"
         [additionalStyles]="this.valueStyle()"
       />
-      <typography variant="info-unit" [content]="this.unit()" />
+      <typography [variant]="getInfoUnitVariant()" [content]="this.unit()" />
     }
 
     @if (this.enableWidget() && this.widget(); as widget) {
diff --git a/angular-client/src/components/info-value-dispaly/info-value-display.component.ts b/angular-client/src/components/info-value-dispaly/info-value-display.component.ts
index 4d15e7d3..9c5280cc 100644
--- a/angular-client/src/components/info-value-dispaly/info-value-display.component.ts
+++ b/angular-client/src/components/info-value-dispaly/info-value-display.component.ts
@@ -5,6 +5,7 @@ import TypographyComponent from '../typography/typography.component';
 import ThermometerComponent from '../thermometer/thermometer.component';
 import HStackComponent from '../hstack/hstack.component';
 import VStackComponent from '../vstack/vstack.component';
+import { StyleVariant } from 'src/utils/style-variant';
 
 export interface ThermometerConfig {
   type: 'thermometer-config';
@@ -56,6 +57,7 @@ export class InfoValueDisplayComponent implements OnChanges {
   subtitleStyle = input<string>('');
   unit = input<string>('');
   formattedValue = '-';
+  size = input<'small' | 'medium' | 'large'>('medium');
 
   // Consolidated widget input
   widget = input<WidgetConfig>();
@@ -71,4 +73,28 @@ export class InfoValueDisplayComponent implements OnChanges {
     }
     return this.subtitleStyle();
   };
+
+  getInfoValueVariant(): StyleVariant {
+    switch (this.size()) {
+      case 'small':
+        return 'info-value-small';
+      case 'large':
+        return 'info-value-large';
+      case 'medium':
+      default:
+        return 'info-value';
+    }
+  }
+
+  getInfoUnitVariant(): StyleVariant {
+    switch (this.size()) {
+      case 'small':
+        return 'info-unit-small';
+      case 'large':
+        return 'info-unit-large';
+      case 'medium':
+      default:
+        return 'info-unit';
+    }
+  }
 }
diff --git a/angular-client/src/components/typography/typography.component.ts b/angular-client/src/components/typography/typography.component.ts
index 8b69e185..429a8aca 100644
--- a/angular-client/src/components/typography/typography.component.ts
+++ b/angular-client/src/components/typography/typography.component.ts
@@ -58,9 +58,21 @@ export default class TypographyComponent implements OnInit {
       case 'info-value':
         this.style = Theme.infoValue;
         break;
+      case 'info-value-small':
+        this.style = Theme.infoValueSmall;
+        break;
+      case 'info-value-large':
+        this.style = Theme.infoValueLarge;
+        break;
       case 'info-unit':
         this.style = Theme.infoUnit;
         break;
+      case 'info-unit-small':
+        this.style = Theme.infoUnitSmall;
+        break;
+      case 'info-unit-large':
+        this.style = Theme.infoUnitLarge;
+        break;
       case 'sidebar-label':
         this.style = Theme.sidebarLabel;
         break;
diff --git a/angular-client/src/pages/bms-debug-page/bms-debug-page.component.html b/angular-client/src/pages/bms-debug-page/bms-debug-page.component.html
index 17882a2a..6dbdb8cf 100644
--- a/angular-client/src/pages/bms-debug-page/bms-debug-page.component.html
+++ b/angular-client/src/pages/bms-debug-page/bms-debug-page.component.html
@@ -8,7 +8,7 @@
         <bms-header style="width: 100%" [pageTitle]="this.windowSize < 1200 ? 'ACCU' : 'Accumulator'" />
       </mat-grid-tile>
       <mat-grid-tile [colspan]="6" rowspan="5">
-        <bms-at-a-glance style="height: 100%; width: 100%" />
+        <bms-at-a-glance-redesign style="height: 100%; width: 100%" />
       </mat-grid-tile>
       <mat-grid-tile [colspan]="windowSize > 1300 ? 1 : 2" [rowspan]="16">
         <div style="display: flex; flex-direction: column; width: 100%; height: 100%; gap: 3%">
diff --git a/angular-client/src/pages/bms-debug-page/bms-debug-page.component.ts b/angular-client/src/pages/bms-debug-page/bms-debug-page.component.ts
index 8cab349f..b0eba06b 100644
--- a/angular-client/src/pages/bms-debug-page/bms-debug-page.component.ts
+++ b/angular-client/src/pages/bms-debug-page/bms-debug-page.component.ts
@@ -8,6 +8,7 @@ import { AccLowVoltageComponent } from './components/acc-low-voltage/acc-low-vol
 import { AccHighTempComponent } from './components/acc-high-temp/acc-high-temp.component';
 import { SegmentSummaryComponent } from './components/segment-summary/segment-summary.component';
 import { CellByCellHeatMapComponent } from './components/cell-by-cell-heat-map/cell-by-cell-heat-map.component';
+import { BmsAtAGlanceReDesignComponent } from './components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component';
 
 @Component({
   selector: 'app-bms-debug-page',
@@ -19,11 +20,13 @@ import { CellByCellHeatMapComponent } from './components/cell-by-cell-heat-map/c
     MatGridTile,
     BmsHeaderComponent,
     BmsAtAGlanceComponent,
+    BmsAtAGlanceReDesignComponent,
     AccHighVoltageComponent,
     AccLowVoltageComponent,
     AccHighTempComponent,
     SegmentSummaryComponent,
-    CellByCellHeatMapComponent
+    CellByCellHeatMapComponent,
+    BmsAtAGlanceReDesignComponent
   ]
 })
 export class BmsDebugPageComponent {
diff --git a/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.css b/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.css
new file mode 100644
index 00000000..082bf33b
--- /dev/null
+++ b/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.css
@@ -0,0 +1,15 @@
+.divider {
+  width: 2px;
+  height: 50px;
+  background-color: #555;
+}
+
+.thermometer-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: flex-start;
+  margin-left: -20px;
+  height: 90px;
+  width: 35px;
+}
diff --git a/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.html b/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.html
new file mode 100644
index 00000000..dae04155
--- /dev/null
+++ b/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.html
@@ -0,0 +1,55 @@
+<info-background title="At A Glance" svgIcon="battery_charging_2">
+  <hstack justifyContent="space-evenly" class="bms-container">
+    <!-- Voltage -->
+    <info-value-display
+      [value]="voltage"
+      unit="V"
+      subtitle="Average Voltage"
+      [widget]="this.connectionDotConfig"
+      [enableWidget]="this.enableWidgets"
+      size="medium"
+    />
+    <div class="divider"></div>
+
+    <!-- Temperature -->
+    <info-value-display
+      [value]="temperature"
+      unit="C"
+      subtitle="Average Temperature"
+      [widget]="this.thermometerConfig"
+      [enableWidget]="this.enableWidgets"
+      size="medium"
+    />
+    <div class="divider"></div>
+
+    <!-- Charge State -->
+    <info-value-display
+      [value]="chargeState"
+      unit="%"
+      subtitle="Charge State"
+      [widget]="this.batteryConfig"
+      [enableWidget]="this.enableWidgets"
+      size="medium"
+    />
+    <div class="divider"></div>
+
+    <!-- CCL -->
+    <info-value-display [value]="this.ccl" unit="A" subtitle="CCL" size="small" />
+    <div class="divider"></div>
+
+    <!-- DCL -->
+    <info-value-display [value]="this.dcl" unit="A" subtitle="DCL" size="small" />
+    <div class="divider"></div>
+
+    <!-- Volts High Value -->
+    <acc-high-voltage style="width: 5%; height: 5%" />
+    <div class="divider"></div>
+
+    <!-- Volts Low Value -->
+    <acc-low-voltage></acc-low-voltage>
+    <div class="divider"></div>
+
+    <!-- High Temp -->
+    <acc-high-temp></acc-high-temp>
+  </hstack>
+</info-background>
diff --git a/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.spec.ts b/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.spec.ts
new file mode 100644
index 00000000..1af29da6
--- /dev/null
+++ b/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BmsAtAGlanceReDesignComponent } from './bms-at-a-glance-redesign.component';
+
+describe('BmsAtAGlanceReDesignComponent', () => {
+  let component: BmsAtAGlanceReDesignComponent;
+  let fixture: ComponentFixture<BmsAtAGlanceReDesignComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BmsAtAGlanceReDesignComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BmsAtAGlanceReDesignComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.ts b/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.ts
new file mode 100644
index 00000000..d1bf346f
--- /dev/null
+++ b/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.ts
@@ -0,0 +1,93 @@
+import { Component, HostListener, inject, OnInit } from '@angular/core';
+import {
+  BatteryConfig,
+  ConnectionDotConfig,
+  ThermometerConfig
+} from 'src/components/info-value-dispaly/info-value-display.component';
+import { DataTypeEnum } from 'src/data-type.enum';
+import Storage from 'src/services/storage.service';
+import { getConnectionDotStatusColor } from 'src/utils/bms.utils';
+import { topics } from 'src/utils/topic.utils';
+import { InfoBackgroundComponent } from '../../../../components/info-background/info-background.component';
+
+import { InfoValueDisplayComponent } from '../../../../components/info-value-dispaly/info-value-display.component';
+import HStackComponent from 'src/components/hstack/hstack.component';
+import { AccHighVoltageComponent } from '../acc-high-voltage/acc-high-voltage.component';
+import { AccLowVoltageComponent } from '../acc-low-voltage/acc-low-voltage.component';
+import { AccHighTempComponent } from '../acc-high-temp/acc-high-temp.component';
+
+@Component({
+  selector: 'bms-at-a-glance-redesign',
+  templateUrl: './bms-at-a-glance-redesign.component.html',
+  styleUrl: './bms-at-a-glance-redesign.component.css',
+  standalone: true,
+  imports: [
+    InfoBackgroundComponent,
+    InfoValueDisplayComponent,
+    HStackComponent,
+    AccHighVoltageComponent,
+    AccLowVoltageComponent,
+    AccHighTempComponent
+  ]
+})
+export class BmsAtAGlanceReDesignComponent implements OnInit {
+  private storage = inject(Storage);
+  voltage: number = 0;
+  temperature: number = 0;
+  chargeState: number = 0;
+  ccl: number = 0;
+  dcl: number = 0;
+  voltsHighValue: number = 0;
+  voltsLowValue: number = 0;
+  highTemp: number = 0;
+  thermometerConfig: ThermometerConfig = { type: 'thermometer-config', currentValue: 0, min: -15, max: 30 };
+  batteryConfig: BatteryConfig = { type: 'battery-config', percentage: 0, height: 50, width: 25 };
+  getStatusColor = (): string => {
+    return getConnectionDotStatusColor(this.voltage);
+  };
+  connectionDotConfig: ConnectionDotConfig = {
+    type: 'connection-dot-config',
+    getStatusColor: this.getStatusColor
+  };
+  enableWidgets = window.innerWidth >= 1000;
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.enableWidgets = window.innerWidth >= 1000;
+  }
+
+  ngOnInit(): void {
+    this.storage.get(DataTypeEnum.PACK_VOLTAGE).subscribe((value) => {
+      this.voltage = parseInt(value.values[0]);
+    });
+
+    this.storage.get(DataTypeEnum.PACK_TEMP).subscribe((value) => {
+      this.temperature = parseInt(value.values[0]);
+      this.thermometerConfig.currentValue = this.temperature;
+    });
+
+    this.storage.get(DataTypeEnum.STATE_OF_CHARGE).subscribe((value) => {
+      this.chargeState = parseInt(value.values[0]);
+      this.batteryConfig.percentage = this.chargeState;
+    });
+
+    this.storage.get(topics.accCCL()).subscribe((value) => {
+      this.ccl = parseInt(value.values[0]);
+    });
+
+    this.storage.get(topics.accDCL()).subscribe((value) => {
+      this.dcl = parseInt(value.values[0]);
+    });
+
+    this.storage.get(topics.highVoltsCell()).subscribe((value) => {
+      this.voltsHighValue = parseInt(value.values[0]);
+    });
+
+    this.storage.get(topics.lowVoltsCell()).subscribe((value) => {
+      this.voltsLowValue = parseInt(value.values[0]);
+    });
+
+    this.storage.get(topics.highTempCell()).subscribe((value) => {
+      this.highTemp = parseInt(value.values[0]);
+    });
+  }
+}
diff --git a/angular-client/src/services/theme.service.ts b/angular-client/src/services/theme.service.ts
index 47f50ae0..a8b7bad8 100644
--- a/angular-client/src/services/theme.service.ts
+++ b/angular-client/src/services/theme.service.ts
@@ -21,6 +21,10 @@ export default class Theme {
   static readonly infoValueMobile: string = this.boldedText + 'fontSize: 25px; margin: 0; align-self: center;';
   static readonly infoUnit: string = this.textStyle + 'font-size: 1.5rem; color: gray; padding-top: 22px;';
   static readonly sidebarLabel: string = this.font + 'font-weight: bold; font-size: 16px; margin: 0;';
+  static readonly infoValueSmall: string = this.boldedText + 'fontSize: 2.5rem; margin: 0; align-self: center;';
+  static readonly infoValueLarge: string = this.boldedText + 'fontSize: 5rem; margin: 0; align-self: center;';
+  static readonly infoUnitSmall: string = this.textStyle + 'font-size: 1.5rem; color: gray; padding-top: 17px;';
+  static readonly infoUnitLarge: string = this.textStyle + 'font-size: 2.5rem; color: gray; padding-top: 41px;';
 
   static readonly battteryLow: string = '#f50905';
   static readonly battteryMed: string = '#FFEA00';
diff --git a/angular-client/src/utils/style-variant.ts b/angular-client/src/utils/style-variant.ts
index b658a076..5d9511a2 100644
--- a/angular-client/src/utils/style-variant.ts
+++ b/angular-client/src/utils/style-variant.ts
@@ -15,4 +15,8 @@ export type StyleVariant =
   | 'info-value'
   | 'info-unit'
   | 'sidebar-label'
-  | 'x-large-title';
+  | 'x-large-title'
+  | 'info-value-small'
+  | 'info-value-large'
+  | 'info-unit-small'
+  | 'info-unit-large';

From fd4038dffe384248c5e173d1f94e1e940231a46e Mon Sep 17 00:00:00 2001
From: emirdur <emirdurakovicofficial@gmail.com>
Date: Wed, 4 Jun 2025 21:58:42 -0700
Subject: [PATCH 2/4] sizing fix

---
 .../bms-at-a-glance-redesign.component.html                 | 6 +++---
 angular-client/src/services/theme.service.ts                | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.html b/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.html
index dae04155..e50da8fd 100644
--- a/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.html
+++ b/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.html
@@ -7,7 +7,7 @@
       subtitle="Average Voltage"
       [widget]="this.connectionDotConfig"
       [enableWidget]="this.enableWidgets"
-      size="medium"
+      size="small"
     />
     <div class="divider"></div>
 
@@ -18,7 +18,7 @@
       subtitle="Average Temperature"
       [widget]="this.thermometerConfig"
       [enableWidget]="this.enableWidgets"
-      size="medium"
+      size="small"
     />
     <div class="divider"></div>
 
@@ -29,7 +29,7 @@
       subtitle="Charge State"
       [widget]="this.batteryConfig"
       [enableWidget]="this.enableWidgets"
-      size="medium"
+      size="small"
     />
     <div class="divider"></div>
 
diff --git a/angular-client/src/services/theme.service.ts b/angular-client/src/services/theme.service.ts
index a8b7bad8..8bb9d532 100644
--- a/angular-client/src/services/theme.service.ts
+++ b/angular-client/src/services/theme.service.ts
@@ -23,7 +23,7 @@ export default class Theme {
   static readonly sidebarLabel: string = this.font + 'font-weight: bold; font-size: 16px; margin: 0;';
   static readonly infoValueSmall: string = this.boldedText + 'fontSize: 2.5rem; margin: 0; align-self: center;';
   static readonly infoValueLarge: string = this.boldedText + 'fontSize: 5rem; margin: 0; align-self: center;';
-  static readonly infoUnitSmall: string = this.textStyle + 'font-size: 1.5rem; color: gray; padding-top: 17px;';
+  static readonly infoUnitSmall: string = this.textStyle + 'font-size: 1rem; color: gray; padding-top: 17px;';
   static readonly infoUnitLarge: string = this.textStyle + 'font-size: 2.5rem; color: gray; padding-top: 41px;';
 
   static readonly battteryLow: string = '#f50905';

From 10c00469e8dd1e563d49ebf98c089bf712111fe6 Mon Sep 17 00:00:00 2001
From: emirdur <emirdurakovicofficial@gmail.com>
Date: Wed, 4 Jun 2025 21:59:28 -0700
Subject: [PATCH 3/4] sizing fix #2

---
 .../bms-at-a-glance-redesign.component.html                     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.html b/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.html
index e50da8fd..32942d38 100644
--- a/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.html
+++ b/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.html
@@ -42,7 +42,7 @@
     <div class="divider"></div>
 
     <!-- Volts High Value -->
-    <acc-high-voltage style="width: 5%; height: 5%" />
+    <acc-high-voltage />
     <div class="divider"></div>
 
     <!-- Volts Low Value -->

From e5514505c08b57d6837e8054c1dfd680992719b3 Mon Sep 17 00:00:00 2001
From: emirdur <emirdurakovicofficial@gmail.com>
Date: Sun, 8 Jun 2025 19:01:34 -0700
Subject: [PATCH 4/4] temp solution

---
 .../components/acc-high-temp/acc-high-temp.component.html | 8 +++++++-
 .../acc-high-voltage/acc-high-voltage.component.html      | 1 +
 .../acc-low-voltage/acc-low-voltage.component.html        | 8 +++++++-
 .../bms-at-a-glance-redesign.component.html               | 4 ++--
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/angular-client/src/pages/bms-debug-page/components/acc-high-temp/acc-high-temp.component.html b/angular-client/src/pages/bms-debug-page/components/acc-high-temp/acc-high-temp.component.html
index dbb17586..acc2764d 100644
--- a/angular-client/src/pages/bms-debug-page/components/acc-high-temp/acc-high-temp.component.html
+++ b/angular-client/src/pages/bms-debug-page/components/acc-high-temp/acc-high-temp.component.html
@@ -1,3 +1,9 @@
 <info-background [title]="this.getInfoBackgroundTitle()" svgIcon="battery_charging_2">
-  <info-value-display [value]="this.highTemp" [unit]="'C'" subtitle="High Temp." [precision]="2"></info-value-display>
+  <info-value-display
+    [value]="this.highTemp"
+    [unit]="'C'"
+    subtitle="High Temp."
+    [precision]="2"
+    size="small"
+  ></info-value-display>
 </info-background>
diff --git a/angular-client/src/pages/bms-debug-page/components/acc-high-voltage/acc-high-voltage.component.html b/angular-client/src/pages/bms-debug-page/components/acc-high-voltage/acc-high-voltage.component.html
index 69ca4755..02381caa 100644
--- a/angular-client/src/pages/bms-debug-page/components/acc-high-voltage/acc-high-voltage.component.html
+++ b/angular-client/src/pages/bms-debug-page/components/acc-high-voltage/acc-high-voltage.component.html
@@ -4,5 +4,6 @@
     [unit]="'V'"
     subtitle="High Voltage"
     [precision]="3"
+    size="small"
   ></info-value-display>
 </info-background>
diff --git a/angular-client/src/pages/bms-debug-page/components/acc-low-voltage/acc-low-voltage.component.html b/angular-client/src/pages/bms-debug-page/components/acc-low-voltage/acc-low-voltage.component.html
index a64db354..6fd4c648 100644
--- a/angular-client/src/pages/bms-debug-page/components/acc-low-voltage/acc-low-voltage.component.html
+++ b/angular-client/src/pages/bms-debug-page/components/acc-low-voltage/acc-low-voltage.component.html
@@ -1,3 +1,9 @@
 <info-background [title]="this.getInfoBackgroundTitle()" svgIcon="battery_charging_2">
-  <info-value-display [value]="this.voltsLowValue" [unit]="'V'" subtitle="Low Voltage" [precision]="3"></info-value-display>
+  <info-value-display
+    [value]="this.voltsLowValue"
+    [unit]="'V'"
+    subtitle="Low Voltage"
+    [precision]="3"
+    size="small"
+  ></info-value-display>
 </info-background>
diff --git a/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.html b/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.html
index 32942d38..c13c4091 100644
--- a/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.html
+++ b/angular-client/src/pages/bms-debug-page/components/bms-at-a-glance-redesign/bms-at-a-glance-redesign.component.html
@@ -46,10 +46,10 @@
     <div class="divider"></div>
 
     <!-- Volts Low Value -->
-    <acc-low-voltage></acc-low-voltage>
+    <acc-low-voltage />
     <div class="divider"></div>
 
     <!-- High Temp -->
-    <acc-high-temp></acc-high-temp>
+    <acc-high-temp />
   </hstack>
 </info-background>