diff --git a/src/components/init.js b/src/components/init.js
index 0c36dad9a8..43240e40ee 100644
--- a/src/components/init.js
+++ b/src/components/init.js
@@ -10,6 +10,7 @@ import vueI18n from "./vueI18n.js";
 import BatteryLegend from "./quad-status/BatteryLegend.vue";
 import BetaflightLogo from "./betaflight-logo/BetaflightLogo.vue";
 import StatusBar from "./status-bar/StatusBar.vue";
+import BatteryIcon from "./quad-status/BatteryIcon.vue";
 
 // Most of the global objects can go here at first.
 // It's a bit of overkill for simple components,
@@ -38,6 +39,7 @@ i18next.on('initialized', function() {
             BatteryLegend,
             BetaflightLogo,
             StatusBar,
+            BatteryIcon,
         },
         data: betaflightModel,
     });
diff --git a/src/components/quad-status/BatteryIcon.stories.js b/src/components/quad-status/BatteryIcon.stories.js
new file mode 100644
index 0000000000..75169387a7
--- /dev/null
+++ b/src/components/quad-status/BatteryIcon.stories.js
@@ -0,0 +1,16 @@
+import BatteryIcon from "./BatteryIcon.vue";
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: "Battery Icon",
+  component: BatteryIcon,
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { BatteryIcon },
+  template: '<battery-icon v-bind="$props" />',
+});
+
+export const Primary = Template.bind({});
diff --git a/src/components/quad-status/BatteryIcon.vue b/src/components/quad-status/BatteryIcon.vue
new file mode 100644
index 0000000000..1a9a4f7601
--- /dev/null
+++ b/src/components/quad-status/BatteryIcon.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="battery-icon">
+    <div class="quad-status-contents">
+      <div
+        class="battery-status"
+        :class="classes"
+        :style="{ width: batteryWidth + '%' }"
+      />
+    </div>
+  </div>
+</template>
+<script>
+const NO_BATTERY_VOLTAGE_MAXIMUM = 1.8; // Maybe is better to add a call to MSP_BATTERY_STATE but is not available for all versions
+
+export default {
+  props: {
+    voltage: {
+      type: Number,
+      default: 0,
+    },
+    vbatmincellvoltage: {
+      type: Number,
+      default: 1,
+    },
+    vbatmaxcellvoltage: {
+      type: Number,
+      default: 1,
+    },
+    vbatwarningcellvoltage: {
+      type: Number,
+      default: 1,
+    },
+  },
+  computed: {
+    nbCells() {
+      let nbCells = Math.floor(this.voltage / this.vbatmaxcellvoltage) + 1;
+      if (this.voltage === 0) {
+        nbCells = 1;
+      }
+      return nbCells;
+    },
+    min() {
+      return this.vbatmincellvoltage * this.nbCells;
+    },
+    max() {
+      return this.vbatmaxcellvoltage * this.nbCells;
+    },
+    warn() {
+      return this.vbatwarningcellvoltage * this.nbCells;
+    },
+    isEmpty() {
+      return (
+        this.voltage < this.min && this.voltage > NO_BATTERY_VOLTAGE_MAXIMUM
+      );
+    },
+    classes() {
+      const isWarning = this.voltage < this.warn;
+      return {
+        "state-empty": this.isEmpty,
+        "state-warning": isWarning,
+        "state-ok": !this.isEmpty && !isWarning,
+      };
+    },
+    batteryWidth() {
+      return this.isEmpty
+        ? 100
+        : ((this.voltage - this.min) / (this.max - this.min)) * 100;
+    },
+  },
+};
+</script>
+
+<style>
+.quad-status-contents {
+  display: inline-block;
+  margin-top: 10px;
+  margin-left: 14px;
+  height: 10px;
+  width: 31px;
+}
+
+.quad-status-contents progress::-webkit-progress-bar {
+  height: 12px;
+  background-color: #eee;
+}
+
+.quad-status-contents progress::-webkit-progress-value {
+  background-color: #bcf;
+}
+
+.battery-icon {
+  background-image: url(../../images/icons/cf_icon_bat_grey.svg);
+  background-size: contain;
+  background-position: center;
+  display: inline-block;
+  height: 30px;
+  width: 60px;
+  transition: none;
+  margin-top: 4px;
+  margin-left: -4px;
+  background-repeat: no-repeat;
+}
+
+.battery-status {
+  height: 11px;
+}
+
+@keyframes error-blinker {
+  0% {
+    background-color: transparent;
+  }
+  50% {
+    background-color: var(--error);
+  }
+}
+
+.battery-status.state-ok {
+  background-color: #59aa29;
+}
+.battery-status.state-warning {
+  background-color: var(--error);
+}
+
+.battery-status.state-empty {
+  animation: error-blinker 1s linear infinite;
+}
+</style>
diff --git a/src/css/main.less b/src/css/main.less
index 801a6e892a..a0c5614814 100644
--- a/src/css/main.less
+++ b/src/css/main.less
@@ -621,46 +621,7 @@ input[type="number"] {
 	text-shadow: 0 1px rgba(0, 0, 0, 1.0);
 	white-space: nowrap;
 }
-.quad-status-contents {
-	display: none;
-	margin-top: 10px;
-	margin-left: 14px;
-	height: 10px;
-	width: 31px;
-	progress {
-		&::-webkit-progress-bar {
-			height: 12px;
-			background-color: #eee;
-		}
-		&::-webkit-progress-value {
-			background-color: #bcf;
-		}
-	}
-}
-.battery-status {
-	height: 11px;
-}
-.battery-status.state-ok {
-	background-color: #59AA29;
-}
-.battery-status.state-warning {
-	background-color: var(--error);
-}
-.battery-status.state-empty {
-	animation: error-blinker 1s linear infinite;
-}
-.battery-icon {
-	background-image: url(../images/icons/cf_icon_bat_grey.svg);
-	background-size: contain;
-	background-position: center;
-	display: inline-block;
-	height: 30px;
-	width: 60px;
-	transition: none;
-	margin-top: 4px;
-	margin-left: -4px;
-	background-repeat: no-repeat;
-}
+
 .armedicon {
 	margin-left: 8px;
 	margin-right: 8px;
diff --git a/src/js/serial_backend.js b/src/js/serial_backend.js
index 79a2ad2f7f..c96997a894 100644
--- a/src/js/serial_backend.js
+++ b/src/js/serial_backend.js
@@ -659,10 +659,6 @@ async function getStatus() {
 async function update_live_status() {
     const statuswrapper = $('#quad-status_wrapper');
 
-    $(".quad-status-contents").css({
-       display: 'inline-block',
-    });
-
     if (GUI.active_tab !== 'cli' && GUI.active_tab !== 'presets') {
         await MSP.promise(MSPCodes.MSP_BOXNAMES);
         await getStatus();
diff --git a/src/main.html b/src/main.html
index 88f747b85b..3406dc5cc9 100644
--- a/src/main.html
+++ b/src/main.html
@@ -208,12 +208,14 @@
         </div>
         <div class="header-wrapper">
             <div id="quad-status_wrapper">
-                <div class="battery-icon">
-                    <div class="quad-status-contents">
-                        <div class="battery-status"></div>
-                    </div>
-                </div>
-                <battery-legend
+                <battery-icon
+                    :voltage="FC.ANALOG.voltage"
+                    :vbatmincellvoltage="FC.BATTERY_CONFIG.vbatmincellvoltage"
+                    :vbatmaxcellvoltage="FC.BATTERY_CONFIG.vbatmaxcellvoltage"
+                    :vbatwarningcellvoltage="FC.BATTERY_CONFIG.vbatwarningcellvoltage"
+                >
+                </battery-icon>
+                <battery-legend 
                     :voltage="FC.ANALOG.voltage"
                     :vbatmaxcellvoltage="FC.BATTERY_CONFIG.vbatmaxcellvoltage"
                 ></battery-legend>