diff --git a/package-lock.json b/package-lock.json
index 40196950..fcfe8ecd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "polished": "^4.1.4",
         "qr-scanner": "^1.4.1",
         "react": "^17.0.2",
+        "react-battery-gauge": "^1.0.5",
         "react-dom": "^17.0.2",
         "react-icons": "^4.3.1",
         "react-redux": "^7.2.6",
@@ -12998,6 +12999,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-battery-gauge": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/react-battery-gauge/-/react-battery-gauge-1.0.5.tgz",
+      "integrity": "sha512-q1v1JNrYJ2+5OH7IXUrvXU+W6YoEv5OHVwLL6KiiPjLO3l1wX99LO3XlG+TO+v5S+fX5pHc0Kv/nHuJXrcouQA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -25655,6 +25667,12 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-battery-gauge": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/react-battery-gauge/-/react-battery-gauge-1.0.5.tgz",
+      "integrity": "sha512-q1v1JNrYJ2+5OH7IXUrvXU+W6YoEv5OHVwLL6KiiPjLO3l1wX99LO3XlG+TO+v5S+fX5pHc0Kv/nHuJXrcouQA==",
+      "requires": {}
+    },
     "react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
diff --git a/package.json b/package.json
index de490af0..03df731b 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "polished": "^4.1.4",
     "qr-scanner": "^1.4.1",
     "react": "^17.0.2",
+    "react-battery-gauge": "^1.0.5",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-redux": "^7.2.6",
diff --git a/src/renderer/components/Header.tsx b/src/renderer/components/Header.tsx
index be42bd0d..e8afc6bb 100644
--- a/src/renderer/components/Header.tsx
+++ b/src/renderer/components/Header.tsx
@@ -3,6 +3,7 @@ import { styled } from '@/renderer/globalStyles/styled';
 import { NavLink } from 'react-router-dom';
 import { selectDebugTabVisible } from '@/renderer/store/modules/debugTab';
 import { useSelector } from 'react-redux';
+import BatteryGauge from 'react-battery-gauge'
 
 interface NavLinkDefinition {
   to: string;
@@ -46,15 +47,39 @@ export const Header: FC = () => {
           ))}
       </LeftHeader>
       <RightHeader>
+        <BatteryStatus />
         <StyledLogo src="assets/images/logo.png" />
       </RightHeader>
     </HeaderGrid>
   );
 };
 
+const BatteryStatus = () => {
+  const customization = {
+    batteryMeter: {
+      lowBatteryValue: 40,
+    },
+    readingText: {
+      opacity: 0,
+    },
+  }
+  const batteryLevel = 40.8;
+  return <> <StyledP>{batteryLevel} %</StyledP>
+    <StyledBatteryGauge>
+      <BatteryGauge value={batteryLevel} size={40} aspectRatio={0.42} customization={customization} />
+    </StyledBatteryGauge>
+  </>
+}
+
+const StyledBatteryGauge = styled.div`
+  display:inline-block;
+  align-self: center;
+  align-content: center;
+`
+
 const HeaderGrid = styled.div`
   display: grid;
-  grid-template-columns: 1fr 100px;
+  grid-template-columns: 1fr 215px;
   box-shadow: 0 3px 2px rgba(0, 0, 0, 0.25);
 `;
 
@@ -68,6 +93,8 @@ const LeftHeader = styled.div<{
 
 const RightHeader = styled.div`
   margin: 2px;
+  display : flex;
+  justify-content : space-between;
 `;
 
 const StyledNavLink = styled(NavLink)`
@@ -92,5 +119,9 @@ const StyledNavLink = styled(NavLink)`
 
 const StyledLogo = styled.img`
   height: auto;
-  max-width: 100%;
+  width: 100px;
 `;
+
+const StyledP = styled.p`
+  font-weight: bold;
+`
\ No newline at end of file