diff --git a/typescript/frontend-marios2/src/content/dashboards/BatteryView/DetailedBatteryView.tsx b/typescript/frontend-marios2/src/content/dashboards/BatteryView/DetailedBatteryView.tsx
index bacb3ff88..818cf967c 100644
--- a/typescript/frontend-marios2/src/content/dashboards/BatteryView/DetailedBatteryView.tsx
+++ b/typescript/frontend-marios2/src/content/dashboards/BatteryView/DetailedBatteryView.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { I_S3Credentials } from '../../../interfaces/S3Types';
 import {
   Card,
@@ -8,7 +8,8 @@ import {
   TableBody,
   TableCell,
   TableContainer,
-  TableRow
+  TableRow,
+  Typography
 } from '@mui/material';
 import { Battery } from '../Log/graph.util';
 import Button from '@mui/material/Button';
@@ -38,6 +39,64 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
     );
   };
 
+  const [GreenisBlinking, setGreenisBlinking] = useState(
+    props.batteryData.GreenLeds.value === 'Blinking'
+  );
+
+  const [AmberisBlinking, setAmberisBlinking] = useState(
+    props.batteryData.AmberLeds.value === 'Blinking'
+  );
+  const [RedisBlinking, setRedisBlinking] = useState(
+    props.batteryData.RedLeds.value === 'Blinking'
+  );
+
+  const [BlueisBlinking, setBlueisBlinking] = useState(
+    props.batteryData.BlueLeds.value === 'Blinking'
+  );
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (props.batteryData.AmberLeds.value === 'Blinking') {
+        setAmberisBlinking((prevIsBlinking) => !prevIsBlinking);
+      }
+
+      if (props.batteryData.RedLeds.value === 'Blinking') {
+        setRedisBlinking((prevIsBlinking) => !prevIsBlinking);
+      }
+
+      if (props.batteryData.BlueLeds.value === 'Blinking') {
+        setBlueisBlinking((prevIsBlinking) => !prevIsBlinking);
+      }
+
+      if (props.batteryData.GreenLeds.value === 'Blinking') {
+        setGreenisBlinking((prevIsBlinking) => !prevIsBlinking);
+      }
+    }, 500); // Blink every 500 milliseconds
+
+    // Cleanup the interval on component unmount
+    return () => clearInterval(intervalId);
+  }, []);
+
+  const batteryStyle = {
+    borderRadius: '15px',
+    padding: '10px',
+    backgroundColor: 'lightgray',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '150px',
+    marginTop: '30px'
+  };
+
+  const batteryStringStyle = {
+    flex: 1,
+    border: '1px solid #000',
+    height: '97%',
+    width: '30px',
+    borderRadius: '7px',
+    backgroundColor: '#bfbfbf'
+  };
+
   return (
     <>
       <Grid container>
@@ -70,18 +129,149 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
           </Button>
         </Grid>
       </Grid>
-      <Grid item md={2} xs={2}>
+      <Grid container>
+        <Grid item md={4.9} xs={4.9}></Grid>
+        <Grid item md={2.2} xs={2.2}>
+          <div style={batteryStyle}>
+            <div
+              style={{
+                ...batteryStringStyle,
+                backgroundColor:
+                  props.batteryData.String1Active.value == 'True'
+                    ? '#32CD32'
+                    : '#FF033E'
+              }}
+            ></div>
+            <div
+              style={{
+                ...batteryStringStyle,
+                backgroundColor:
+                  props.batteryData.String2Active.value == 'True'
+                    ? '#32CD32'
+                    : '#FF033E'
+              }}
+            ></div>
+            <div
+              style={{
+                ...batteryStringStyle,
+                backgroundColor:
+                  props.batteryData.String3Active.value == 'True'
+                    ? '#32CD32'
+                    : '#FF033E'
+              }}
+            ></div>
+            <div
+              style={{
+                ...batteryStringStyle,
+                backgroundColor:
+                  props.batteryData.String4Active.value == 'True'
+                    ? '#32CD32'
+                    : '#FF033E'
+              }}
+            ></div>
+            <div
+              style={{
+                ...batteryStringStyle,
+                backgroundColor:
+                  props.batteryData.String5Active.value == 'True'
+                    ? '#32CD32'
+                    : '#FF033E'
+              }}
+            ></div>
+
+            <div>
+              <div
+                style={{
+                  width: '20px',
+                  height: '20px',
+                  marginLeft: '10px',
+                  marginTop: '-10px',
+                  borderRadius: '50%',
+                  backgroundColor:
+                    props.batteryData.GreenLeds.value === 'On' ||
+                    GreenisBlinking
+                      ? 'green'
+                      : 'transparent'
+                }}
+              />
+
+              <div
+                style={{
+                  width: '20px',
+                  height: '20px',
+                  marginLeft: '10px',
+                  marginTop: '10px',
+                  borderRadius: '50%',
+                  backgroundColor:
+                    props.batteryData.AmberLeds.value === 'On' ||
+                    AmberisBlinking
+                      ? 'orange'
+                      : 'transparent'
+                }}
+              />
+
+              <div
+                style={{
+                  width: '20px',
+                  height: '20px',
+                  marginLeft: '10px',
+                  marginTop: '10px',
+                  borderRadius: '50%',
+                  backgroundColor:
+                    props.batteryData.BlueLeds.value === 'On' || BlueisBlinking
+                      ? '#00ccff'
+                      : 'transparent'
+                }}
+              />
+
+              <div
+                style={{
+                  width: '20px',
+                  height: '20px',
+                  marginLeft: '10px',
+                  marginTop: '10px',
+                  borderRadius: '50%',
+                  backgroundColor:
+                    props.batteryData.RedLeds.value === 'On' || RedisBlinking
+                      ? 'red'
+                      : 'transparent'
+                }}
+              />
+            </div>
+          </div>
+        </Grid>
+
+        <Grid item md={4.9} xs={4.9}></Grid>
+      </Grid>
+
+      <Grid item md={3} xs={3}>
         <Card
           sx={{
             overflow: 'visible',
             marginTop: '30px',
             marginBottom: '30px',
-            backgroundColor: 'red'
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            border: '2px solid #ccc',
+            borderRadius: '12px'
           }}
         >
+          <Typography
+            variant="h6"
+            component="div"
+            sx={{
+              marginTop: '10px',
+              borderBottom: '1px solid #ccc',
+              fontWeight: 'bold'
+            }}
+          >
+            Battery Information
+          </Typography>
+
           <TableContainer
             component={Paper}
-            sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
+            sx={{ marginTop: '20px', width: '100%' }}
           >
             <Table size="medium" aria-label="a dense table">
               <TableBody>
@@ -217,28 +407,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
                       props.batteryData.HeatingCurrent.unit}
                   </TableCell>
                 </TableRow>
-                <TableRow>
-                  <TableCell
-                    component="th"
-                    scope="row"
-                    align="left"
-                    sx={{ fontWeight: 'bold' }}
-                  >
-                    Heating Power
-                  </TableCell>
-                  <TableCell
-                    align="right"
-                    sx={{
-                      width: '6ch',
-                      whiteSpace: 'nowrap',
-                      paddingRight: '12px'
-                    }}
-                  >
-                    {props.batteryData.HeatingPower.value +
-                      ' ' +
-                      props.batteryData.HeatingPower.unit}
-                  </TableCell>
-                </TableRow>
+
                 <TableRow>
                   <TableCell
                     component="th"
@@ -261,47 +430,40 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
                       props.batteryData.Soc.unit}
                   </TableCell>
                 </TableRow>
-                <TableRow>
-                  <TableCell
-                    component="th"
-                    scope="row"
-                    align="left"
-                    sx={{ fontWeight: 'bold' }}
-                  >
-                    SOCAh
-                  </TableCell>
-                  <TableCell
-                    align="right"
-                    sx={{
-                      width: '6ch',
-                      whiteSpace: 'nowrap',
-                      paddingRight: '12px'
-                    }}
-                  >
-                    {props.batteryData.SOCAh.value +
-                      ' ' +
-                      props.batteryData.SOCAh.unit}
-                  </TableCell>
-                </TableRow>
               </TableBody>
             </Table>
           </TableContainer>
         </Card>
       </Grid>
       {/*----------------------------------------------------------------------------------------------------------------------------------*/}
-      <Grid item md={2.9} xs={2.9}>
+      <Grid item md={3} xs={3}>
         <Card
           sx={{
             overflow: 'visible',
             marginTop: '30px',
             marginLeft: '20px',
-            marginBottom: '30px',
-            backgroundColor: 'red'
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            border: '2px solid #ccc',
+            borderRadius: '12px'
           }}
         >
+          <Typography
+            variant="h6"
+            component="div"
+            sx={{
+              marginTop: '10px',
+              borderBottom: '1px solid #ccc',
+              fontWeight: 'bold'
+            }}
+          >
+            Temperature
+          </Typography>
+
           <TableContainer
             component={Paper}
-            sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
+            sx={{ marginTop: '20px', width: '100%' }}
           >
             <Table size="medium" aria-label="a dense table">
               <TableBody>
@@ -466,19 +628,33 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
       </Grid>
 
       {/*----------------------------------------------------------------------------------------------------------------------------------*/}
-      <Grid item md={2.7} xs={2.7}>
+      <Grid item md={3} xs={3}>
         <Card
           sx={{
             overflow: 'visible',
             marginTop: '30px',
             marginLeft: '20px',
-            marginBottom: '30px',
-            backgroundColor: 'red'
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            border: '2px solid #ccc',
+            borderRadius: '12px'
           }}
         >
+          <Typography
+            variant="h6"
+            component="div"
+            sx={{
+              marginTop: '10px',
+              borderBottom: '1px solid #ccc',
+              fontWeight: 'bold'
+            }}
+          >
+            Io Status
+          </Typography>
           <TableContainer
             component={Paper}
-            sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
+            sx={{ marginTop: '20px', width: '100%' }}
           >
             <Table size="medium" aria-label="a dense table">
               <TableBody>
@@ -643,19 +819,33 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
       </Grid>
 
       {/*----------------------------------------------------------------------------------------------------------------------------------*/}
-      <Grid item md={2.9} xs={2.9}>
+      <Grid item md={3} xs={3}>
         <Card
           sx={{
             overflow: 'visible',
             marginTop: '30px',
             marginLeft: '20px',
-            marginBottom: '30px',
-            backgroundColor: 'red'
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            border: '2px solid #ccc',
+            borderRadius: '12px'
           }}
         >
+          <Typography
+            variant="h6"
+            component="div"
+            sx={{
+              marginTop: '10px',
+              borderBottom: '1px solid #ccc',
+              fontWeight: 'bold'
+            }}
+          >
+            Specification
+          </Typography>
           <TableContainer
             component={Paper}
-            sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
+            sx={{ marginTop: '20px', width: '100%' }}
           >
             <Table size="medium" aria-label="a dense table">
               <TableBody>
@@ -819,151 +1009,109 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
         </Card>
       </Grid>
       {/*----------------------------------------------------------------------------------------------------------------------------------*/}
-      <Grid item md={1.5} xs={1.5}>
-        <Card
-          sx={{
-            overflow: 'visible',
-            marginTop: '30px',
-            marginLeft: '20px',
-            marginBottom: '30px',
-            backgroundColor: 'red'
-          }}
-        >
-          <TableContainer
-            component={Paper}
-            sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
-          >
-            <Table size="medium" aria-label="a dense table">
-              <TableBody>
-                <TableRow>
-                  <TableCell
-                    component="th"
-                    scope="row"
-                    align="left"
-                    sx={{ fontWeight: 'bold' }}
-                  >
-                    Blue Led
-                  </TableCell>
-                  <TableCell
-                    align="right"
-                    sx={{
-                      width: '6ch',
-                      whiteSpace: 'nowrap',
-                      paddingRight: '12px'
-                    }}
-                  >
-                    <div
-                      style={{
-                        width: '20px',
-                        height: '20px',
-                        marginLeft: '2px',
-                        borderRadius: '50%',
-                        backgroundColor:
-                          props.batteryData.BlueLeds.value === 'On'
-                            ? '#00ccff'
-                            : 'transparent'
-                      }}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell
-                    component="th"
-                    scope="row"
-                    align="left"
-                    sx={{ fontWeight: 'bold' }}
-                  >
-                    Green Led
-                  </TableCell>
-                  <TableCell
-                    align="right"
-                    sx={{
-                      width: '6ch',
-                      whiteSpace: 'nowrap',
-                      paddingRight: '12px'
-                    }}
-                  >
-                    <div
-                      style={{
-                        width: '20px',
-                        height: '20px',
-                        marginLeft: '2px',
-                        borderRadius: '50%',
-                        backgroundColor:
-                          props.batteryData.GreenLeds.value === 'On'
-                            ? 'green'
-                            : 'transparent'
-                      }}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell
-                    component="th"
-                    scope="row"
-                    align="left"
-                    sx={{ fontWeight: 'bold' }}
-                  >
-                    Red Led
-                  </TableCell>
-                  <TableCell
-                    align="right"
-                    sx={{
-                      width: '6ch',
-                      whiteSpace: 'nowrap',
-                      paddingRight: '12px'
-                    }}
-                  >
-                    <div
-                      style={{
-                        width: '20px',
-                        height: '20px',
-                        marginLeft: '2px',
-                        borderRadius: '50%',
-                        backgroundColor:
-                          props.batteryData.RedLeds.value === 'On'
-                            ? 'red'
-                            : 'transparent'
-                      }}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell
-                    component="th"
-                    scope="row"
-                    align="left"
-                    sx={{ fontWeight: 'bold' }}
-                  >
-                    Amber Led
-                  </TableCell>
-                  <TableCell
-                    align="right"
-                    sx={{
-                      width: '6ch',
-                      whiteSpace: 'nowrap',
-                      paddingRight: '12px'
-                    }}
-                  >
-                    <div
-                      style={{
-                        width: '20px',
-                        height: '20px',
-                        marginLeft: '2px',
-                        borderRadius: '50%',
-                        backgroundColor:
-                          props.batteryData.AmberLeds.value === 'On'
-                            ? 'orange'
-                            : 'transparent'
-                      }}
-                    />
-                  </TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </TableContainer>
-        </Card>
-      </Grid>
+
+      {/*<Grid item md={1.5} xs={1.5}>*/}
+      {/*  <Card*/}
+      {/*    sx={{*/}
+      {/*      overflow: 'visible',*/}
+      {/*      marginTop: '30px',*/}
+      {/*      marginLeft: '20px',*/}
+      {/*      marginBottom: '30px',*/}
+      {/*      backgroundColor: 'red'*/}
+      {/*    }}*/}
+      {/*  >*/}
+      {/*    <TableContainer*/}
+      {/*      component={Paper}*/}
+      {/*      sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}*/}
+      {/*    >*/}
+      {/*      <Table size="medium" aria-label="a dense table">*/}
+      {/*        <TableBody>*/}
+      {/*          <TableRow>*/}
+      {/*            <TableCell*/}
+      {/*              component="th"*/}
+      {/*              scope="row"*/}
+      {/*              align="left"*/}
+      {/*              sx={{ fontWeight: 'bold' }}*/}
+      {/*            >*/}
+      {/*              Green Led*/}
+      {/*            </TableCell>*/}
+      {/*            <TableCell*/}
+      {/*              align="right"*/}
+      {/*              sx={{*/}
+      {/*                width: '6ch',*/}
+      {/*                whiteSpace: 'nowrap',*/}
+      {/*                paddingRight: '12px'*/}
+      {/*              }}*/}
+      {/*            >*/}
+      {/*              {props.batteryData.GreenLeds.value}*/}
+      {/*            </TableCell>*/}
+      {/*          </TableRow>*/}
+      {/*          <TableRow>*/}
+      {/*            <TableCell*/}
+      {/*              component="th"*/}
+      {/*              scope="row"*/}
+      {/*              align="left"*/}
+      {/*              sx={{ fontWeight: 'bold' }}*/}
+      {/*            >*/}
+      {/*              Amber Led*/}
+      {/*            </TableCell>*/}
+      {/*            <TableCell*/}
+      {/*              align="right"*/}
+      {/*              sx={{*/}
+      {/*                width: '6ch',*/}
+      {/*                whiteSpace: 'nowrap',*/}
+      {/*                paddingRight: '12px'*/}
+      {/*              }}*/}
+      {/*            >*/}
+      {/*              {props.batteryData.AmberLeds.value}*/}
+      {/*            </TableCell>*/}
+      {/*          </TableRow>*/}
+      {/*          <TableRow>*/}
+      {/*            <TableCell*/}
+      {/*              component="th"*/}
+      {/*              scope="row"*/}
+      {/*              align="left"*/}
+      {/*              sx={{ fontWeight: 'bold' }}*/}
+      {/*            >*/}
+      {/*              Blue Led*/}
+      {/*            </TableCell>*/}
+      {/*            <TableCell*/}
+      {/*              align="right"*/}
+      {/*              sx={{*/}
+      {/*                width: '6ch',*/}
+      {/*                whiteSpace: 'nowrap',*/}
+      {/*                paddingRight: '12px'*/}
+      {/*              }}*/}
+      {/*            >*/}
+      {/*              {props.batteryData.BlueLeds.value}*/}
+      {/*            </TableCell>*/}
+      {/*          </TableRow>*/}
+
+      {/*          <TableRow>*/}
+      {/*            <TableCell*/}
+      {/*              component="th"*/}
+      {/*              scope="row"*/}
+      {/*              align="left"*/}
+      {/*              sx={{ fontWeight: 'bold' }}*/}
+      {/*            >*/}
+      {/*              Red Led*/}
+      {/*            </TableCell>*/}
+      {/*            <TableCell*/}
+      {/*              align="right"*/}
+      {/*              sx={{*/}
+      {/*                width: '6ch',*/}
+      {/*                whiteSpace: 'nowrap',*/}
+      {/*                paddingRight: '12px'*/}
+      {/*              }}*/}
+      {/*            >*/}
+      {/*              {props.batteryData.RedLeds.value}*/}
+      {/*            </TableCell>*/}
+      {/*          </TableRow>*/}
+      {/*        </TableBody>*/}
+      {/*      </Table>*/}
+      {/*    </TableContainer>*/}
+      {/*  </Card>*/}
+      {/*</Grid>*/}
     </>
   );
 }