diff --git a/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.test.js b/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.test.js
index 34f75b512..5a2ece4fc 100644
--- a/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.test.js
+++ b/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.test.js
@@ -5,7 +5,7 @@ import { AppViews } from "../../../modules/AppViews"
 
 describe("BatteriesOverview element", () => {
   describe("compact mode", () => {
-    const wrapper = mount(<BatteriesOverview mode={"compact"} />)
+    const wrapper = mount(<BatteriesOverview componentMode="compact" />)
 
     it("should show content", () => {
       expect(wrapper.find(BatteriesOverview).exists()).toBe(true)
diff --git a/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx b/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx
index 6f28e6c00..0683cbbfd 100644
--- a/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx
+++ b/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx
@@ -1,4 +1,7 @@
+import classNames from "classnames"
+import { translate } from "react-i18nify"
 import { observer } from "mobx-react-lite"
+import range from "lodash-es/range"
 import { Battery as BatteryType, useBattery } from "@victronenergy/mfd-modules"
 import Box from "../../ui/Box"
 import { BATTERY, BoxTypes } from "../../../utils/constants"
@@ -6,23 +9,21 @@ import Battery from "../Battery"
 import BatteriesIcon from "../../../images/icons/batteries.svg"
 import BatterySummary from "../../ui/BatterySummary"
 import { AppViews } from "../../../modules/AppViews"
-import { translate } from "react-i18nify"
 import { useVisibilityNotifier } from "../../../modules"
 import GridPaginator from "../../ui/GridPaginator"
 import { useEffect, useState, useRef } from "react"
 import { PageSelectorProps } from "../../ui/PageSelector"
 import { boxBreakpoints } from "../../../utils/media"
 import PageFlipper from "../../ui/PageFlipper"
-import range from "lodash-es/range"
 import { applyStyles, defaultBoxStyles } from "../../../utils/media"
-import classNames from "classnames"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
 interface Props {
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   pageSelectorPropsSetter?: (arg0: PageSelectorProps) => void
 }
 
-const BatteriesOverview = ({ mode = "full", pageSelectorPropsSetter }: Props) => {
+const BatteriesOverview = ({ componentMode = "full", pageSelectorPropsSetter }: Props) => {
   const { batteries } = useBattery()
   const [boxSize, setBoxSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 })
 
@@ -57,7 +58,7 @@ const BatteriesOverview = ({ mode = "full", pageSelectorPropsSetter }: Props) =>
     setPages(Math.ceil(overviewBatteries.length / batteriesPerPage))
   }, [boxSize, overviewBatteries])
 
-  if (mode === "compact") {
+  if (componentMode === "compact") {
     return (
       <Box
         /* todo: fix types for svg */
diff --git a/src/app/Marine2/components/boxes/Charger/Charger.tsx b/src/app/Marine2/components/boxes/Charger/Charger.tsx
index a11d5d439..4b6b3bec4 100644
--- a/src/app/Marine2/components/boxes/Charger/Charger.tsx
+++ b/src/app/Marine2/components/boxes/Charger/Charger.tsx
@@ -16,6 +16,7 @@ import RadioButton from "../../ui/RadioButton"
 import DeviceSettingModal from "../../ui/DeviceSettingModal/DeviceSettingModal"
 import ValueOverview from "../../ui/ValueOverview"
 import { formatValue } from "../../../utils/formatters"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
 const Charger = ({ instanceId, componentMode = "compact", compactBoxSize }: Props) => {
   const chargerModeFormatter = (value: number) => {
@@ -205,7 +206,7 @@ const Charger = ({ instanceId, componentMode = "compact", compactBoxSize }: Prop
 
 interface Props {
   instanceId: ChargerInstanceId
-  componentMode?: "compact" | "full"
+  componentMode?: ComponentMode
   compactBoxSize?: { width: number; height: number }
 }
 
diff --git a/src/app/Marine2/components/boxes/DevicesOverview/DevicesOverview.tsx b/src/app/Marine2/components/boxes/DevicesOverview/DevicesOverview.tsx
index 6bc1a9fbf..89b22ba67 100644
--- a/src/app/Marine2/components/boxes/DevicesOverview/DevicesOverview.tsx
+++ b/src/app/Marine2/components/boxes/DevicesOverview/DevicesOverview.tsx
@@ -28,8 +28,9 @@ import React from "react"
 import GeneratorRelay from "../GeneratorRelay/GeneratorRelay"
 import { applyStyles, defaultBoxStyles } from "../../../utils/media"
 import classNames from "classnames"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
-const DevicesOverview = ({ mode = "full", pageSelectorPropsSetter }: Props) => {
+const DevicesOverview = ({ componentMode = "full", pageSelectorPropsSetter }: Props) => {
   const { inverters } = useInverters()
   const { instanceId, vebusInverters } = useVebus()
   const { chargers } = useChargers()
@@ -38,14 +39,14 @@ const DevicesOverview = ({ mode = "full", pageSelectorPropsSetter }: Props) => {
   const [compactBoxSize, setCompactBoxSize] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 })
 
   const boxes = getAvailableDeviceBoxes(
-    mode,
     chargers,
     inverters,
     vebusInverters,
     instanceId,
     generatorFp,
     generatorRelay,
-    compactBoxSize
+    compactBoxSize,
+    componentMode
   )
 
   useVisibilityNotifier({ widgetName: BoxTypes.DEVICES, visible: !!boxes.length })
@@ -55,7 +56,7 @@ const DevicesOverview = ({ mode = "full", pageSelectorPropsSetter }: Props) => {
   }
 
   const activeStyles = applyStyles(compactBoxSize, defaultBoxStyles)
-  if (mode === "compact") {
+  if (componentMode === "compact") {
     return (
       <Box
         title={translate("boxes.devices")}
@@ -90,20 +91,22 @@ const DevicesOverview = ({ mode = "full", pageSelectorPropsSetter }: Props) => {
 }
 
 const getAvailableDeviceBoxes = function (
-  mode: "compact" | "full" | undefined,
   chargers: ChargerInstanceId[],
   inverters: InverterInstanceId[],
   vebusInverters: VebusInverters,
   instanceId: InstanceId,
   generatorFp: GeneratorFpProvider,
   generatorRelay: GeneratorRelayProvider,
-  compactBoxSize: { width: number; height: number }
+  compactBoxSize: { width: number; height: number },
+  componentMode?: ComponentMode
 ) {
   let devices = []
 
   if (!!chargers) {
     chargers.forEach((charger) => {
-      devices.push(<Charger key={charger} instanceId={charger} componentMode={mode} compactBoxSize={compactBoxSize} />)
+      devices.push(
+        <Charger key={charger} instanceId={charger} componentMode={componentMode} compactBoxSize={compactBoxSize} />
+      )
     })
   }
 
@@ -114,7 +117,7 @@ const getAvailableDeviceBoxes = function (
           key={id}
           instanceId={id}
           isVebusInverter={false}
-          componentMode={mode}
+          componentMode={componentMode}
           compactBoxSize={compactBoxSize}
         />
       )
@@ -128,7 +131,7 @@ const getAvailableDeviceBoxes = function (
           key={id}
           instanceId={id}
           isVebusInverter={true}
-          componentMode={mode}
+          componentMode={componentMode}
           compactBoxSize={compactBoxSize}
         />
       )
@@ -136,12 +139,17 @@ const getAvailableDeviceBoxes = function (
   }
 
   if (!!instanceId) {
-    devices.push(<InverterCharger key={instanceId} componentMode={mode} compactBoxSize={compactBoxSize} />)
+    devices.push(<InverterCharger key={instanceId} componentMode={componentMode} compactBoxSize={compactBoxSize} />)
   }
 
   if (!!generatorFp.phases)
     devices.push(
-      <GeneratorFp key={"generatorFp"} generatorFp={generatorFp} mode={mode} compactBoxSize={compactBoxSize} />
+      <GeneratorFp
+        key={"generatorFp"}
+        generatorFp={generatorFp}
+        componentMode={componentMode}
+        compactBoxSize={compactBoxSize}
+      />
     )
   if (!!generatorRelay.settings) {
     if (generatorRelay.settings.includes(AC_SOURCE.GENERATOR)) {
@@ -152,7 +160,7 @@ const getAvailableDeviceBoxes = function (
               key={"generator_relay" + i}
               {...generatorRelay}
               active={generatorRelay.activeInput === i}
-              mode={mode}
+              componentMode={componentMode}
               compactBoxSize={compactBoxSize}
             />
           )
@@ -162,7 +170,12 @@ const getAvailableDeviceBoxes = function (
       generatorRelay.statusCode !== undefined
     ) {
       devices.push(
-        <GeneratorRelay key={"generator_relay"} {...generatorRelay} mode={mode} compactBoxSize={compactBoxSize} />
+        <GeneratorRelay
+          key={"generator_relay"}
+          {...generatorRelay}
+          componentMode={componentMode}
+          compactBoxSize={compactBoxSize}
+        />
       )
     }
   }
@@ -170,7 +183,7 @@ const getAvailableDeviceBoxes = function (
 }
 
 interface Props {
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   pageSelectorPropsSetter?: (arg0: PageSelectorProps) => void
 }
 
diff --git a/src/app/Marine2/components/boxes/EnergyAC/EnergyAC.tsx b/src/app/Marine2/components/boxes/EnergyAC/EnergyAC.tsx
index c0d697e90..249f8b6a8 100644
--- a/src/app/Marine2/components/boxes/EnergyAC/EnergyAC.tsx
+++ b/src/app/Marine2/components/boxes/EnergyAC/EnergyAC.tsx
@@ -7,11 +7,12 @@ import ValueOverview from "../../ui/ValueOverview"
 import { phaseUnitFor } from "../../../utils/formatters/phase-unit-for"
 import { phaseValueFor } from "../../../utils/formatters/phase-value-for"
 import { ValueWithUnit } from "@m2Types/generic/value-with-units"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
-const EnergyAC = ({ mode = "compact", acLoads, compactBoxSize }: Props) => {
+const EnergyAC = ({ componentMode = "compact", acLoads, compactBoxSize }: Props) => {
   const { current, power, phases, voltage } = acLoads
 
-  if (mode === "compact" && compactBoxSize) {
+  if (componentMode === "compact" && compactBoxSize) {
     return (
       <ValueOverview
         /* todo: fix types for svg */
@@ -49,7 +50,7 @@ const EnergyAC = ({ mode = "compact", acLoads, compactBoxSize }: Props) => {
 
 interface Props {
   acLoads: AcLoadsState
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   compactBoxSize?: { width: number; height: number }
 }
 
diff --git a/src/app/Marine2/components/boxes/EnergyAlternator/EnergyAlternator.tsx b/src/app/Marine2/components/boxes/EnergyAlternator/EnergyAlternator.tsx
index d4dfb9fe4..ee1a9c098 100644
--- a/src/app/Marine2/components/boxes/EnergyAlternator/EnergyAlternator.tsx
+++ b/src/app/Marine2/components/boxes/EnergyAlternator/EnergyAlternator.tsx
@@ -4,13 +4,14 @@ import { useAlternator } from "@victronenergy/mfd-modules"
 import { translate } from "react-i18nify"
 import ValueBox from "../../ui/ValueBox"
 import ValueOverview from "../../ui/ValueOverview"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
-const EnergyAlternator = ({ mode = "compact", alternator, showInstance, compactBoxSize }: Props) => {
+const EnergyAlternator = ({ componentMode = "compact", alternator, showInstance, compactBoxSize }: Props) => {
   const { current, voltage } = useAlternator(alternator)
   const instance = showInstance ? ` [${alternator}]` : ""
   const power = current * voltage
 
-  if (mode === "compact" && compactBoxSize) {
+  if (componentMode === "compact" && compactBoxSize) {
     return (
       <ValueOverview
         /* todo: fix types for svg */
@@ -40,7 +41,7 @@ const EnergyAlternator = ({ mode = "compact", alternator, showInstance, compactB
 interface Props {
   alternator: number
   showInstance: boolean
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   compactBoxSize?: { width: number; height: number }
 }
 
diff --git a/src/app/Marine2/components/boxes/EnergyDC/EnergyDC.tsx b/src/app/Marine2/components/boxes/EnergyDC/EnergyDC.tsx
index 84e68b073..7c54d7458 100644
--- a/src/app/Marine2/components/boxes/EnergyDC/EnergyDC.tsx
+++ b/src/app/Marine2/components/boxes/EnergyDC/EnergyDC.tsx
@@ -3,15 +3,16 @@ import DCIcon from "../../../images/icons/dc.svg"
 import { translate } from "react-i18nify"
 import ValueBox from "../../ui/ValueBox"
 import ValueOverview from "../../ui/ValueOverview"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
-const EnergyDC = ({ mode = "compact", dcLoads, compactBoxSize }: Props) => {
+const EnergyDC = ({ componentMode = "compact", dcLoads, compactBoxSize }: Props) => {
   const { power, voltage, current } = dcLoads
 
   if (isNaN(power) || isNaN(voltage)) {
     return <></>
   }
 
-  if (mode === "compact" && compactBoxSize) {
+  if (componentMode === "compact" && compactBoxSize) {
     return (
       <ValueOverview
         /* todo: fix types for svg */
@@ -19,7 +20,7 @@ const EnergyDC = ({ mode = "compact", dcLoads, compactBoxSize }: Props) => {
         Icon={DCIcon}
         title={translate("boxes.dcLoads")}
         value={current}
-        unit={"A"}
+        unit="A"
         boxSize={compactBoxSize}
       />
     )
@@ -40,7 +41,7 @@ const EnergyDC = ({ mode = "compact", dcLoads, compactBoxSize }: Props) => {
 
 interface Props {
   dcLoads: DcLoadsState
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   compactBoxSize?: { width: number; height: number }
 }
 
diff --git a/src/app/Marine2/components/boxes/EnergyOverview/EnergyOverview.test.js b/src/app/Marine2/components/boxes/EnergyOverview/EnergyOverview.test.js
index 167413eab..324bc198d 100644
--- a/src/app/Marine2/components/boxes/EnergyOverview/EnergyOverview.test.js
+++ b/src/app/Marine2/components/boxes/EnergyOverview/EnergyOverview.test.js
@@ -5,7 +5,7 @@ import { AppViews } from "../../../modules/AppViews"
 
 describe("EnergyOverview element", () => {
   describe("compact mode", () => {
-    const wrapper = mount(<EnergyOverview mode={"compact"} />)
+    const wrapper = mount(<EnergyOverview componentMode="compact" />)
 
     it("should show content", () => {
       expect(wrapper.find(EnergyOverview).exists()).toBe(true)
diff --git a/src/app/Marine2/components/boxes/EnergyOverview/EnergyOverview.tsx b/src/app/Marine2/components/boxes/EnergyOverview/EnergyOverview.tsx
index 34ace9a57..bcce4f20a 100644
--- a/src/app/Marine2/components/boxes/EnergyOverview/EnergyOverview.tsx
+++ b/src/app/Marine2/components/boxes/EnergyOverview/EnergyOverview.tsx
@@ -30,8 +30,9 @@ import GridPaginator from "../../ui/GridPaginator"
 import { PageSelectorProps } from "../../ui/PageSelector"
 import { applyStyles, defaultBoxStyles } from "../../../utils/media"
 import classNames from "classnames"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
-const EnergyOverview = ({ mode = "full", pageSelectorPropsSetter }: Props) => {
+const EnergyOverview = ({ componentMode = "full", pageSelectorPropsSetter }: Props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const vebus = useVebus() // We need this hook to enable some MQTT subscriptions
   const { inputId: shoreInputId } = useShorePowerInput()
@@ -43,14 +44,14 @@ const EnergyOverview = ({ mode = "full", pageSelectorPropsSetter }: Props) => {
   const [compactBoxSize, setCompactBoxSize] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 })
 
   const boxes = getAvailableEnergyBoxes(
-    mode,
     shoreInputId,
     acLoads,
     pvCharger,
     dcLoads,
     alternators,
     windGenerators,
-    compactBoxSize
+    compactBoxSize,
+    componentMode
   )
 
   const activeStyles = applyStyles(compactBoxSize, defaultBoxStyles)
@@ -62,7 +63,7 @@ const EnergyOverview = ({ mode = "full", pageSelectorPropsSetter }: Props) => {
     return null
   }
 
-  if (mode === "compact") {
+  if (componentMode === "compact") {
     return (
       <Box
         title={translate("boxes.energy")}
@@ -97,30 +98,48 @@ const EnergyOverview = ({ mode = "full", pageSelectorPropsSetter }: Props) => {
 }
 
 const getAvailableEnergyBoxes = function (
-  mode: "compact" | "full" | undefined,
   shoreInputId: number | null | undefined,
   acLoads: AcLoadsState,
   pvCharger: PvChargerState,
   dcLoads: DcLoadsState,
   alternators: AlternatorId[],
   windGenerators: WindGeneratorId[],
-  compactBoxSize: { width: number; height: number }
+  compactBoxSize: { width: number; height: number },
+  componentMode?: ComponentMode
 ) {
   const boxes = []
 
   if (shoreInputId) {
-    boxes.push(<EnergyShore key={`energy-shore`} mode={mode} inputId={shoreInputId} compactBoxSize={compactBoxSize} />)
+    boxes.push(
+      <EnergyShore
+        key={`energy-shore`}
+        componentMode={componentMode}
+        inputId={shoreInputId}
+        compactBoxSize={compactBoxSize}
+      />
+    )
   }
 
   if ((pvCharger.current || pvCharger.current === 0) && (pvCharger.power || pvCharger.power === 0)) {
-    boxes.push(<EnergySolar key={`energy-solar`} mode={mode} pvCharger={pvCharger} compactBoxSize={compactBoxSize} />)
+    boxes.push(
+      <EnergySolar
+        key={`energy-solar`}
+        componentMode={componentMode}
+        pvCharger={pvCharger}
+        compactBoxSize={compactBoxSize}
+      />
+    )
   }
 
   if (acLoads.phases)
-    boxes.push(<EnergyAC key={`energy-ac`} mode={mode} acLoads={acLoads} compactBoxSize={compactBoxSize} />)
+    boxes.push(
+      <EnergyAC key={`energy-ac`} componentMode={componentMode} acLoads={acLoads} compactBoxSize={compactBoxSize} />
+    )
 
   if ((dcLoads.current || dcLoads.current === 0) && (dcLoads.voltage || dcLoads.voltage === 0) && dcLoads.power) {
-    boxes.push(<EnergyDC key={`energy-dc`} mode={mode} dcLoads={dcLoads} compactBoxSize={compactBoxSize} />)
+    boxes.push(
+      <EnergyDC key={`energy-dc`} componentMode={componentMode} dcLoads={dcLoads} compactBoxSize={compactBoxSize} />
+    )
   }
 
   const alternatorsPresent = alternators.filter((v) => v || v === 0)
@@ -129,7 +148,7 @@ const getAvailableEnergyBoxes = function (
       ...alternatorsPresent.map((alternator) => (
         <EnergyAlternator
           key={`alternator_${alternator}`}
-          mode={mode}
+          componentMode={componentMode}
           alternator={alternator ?? 0}
           showInstance={alternators.length > 1}
           compactBoxSize={compactBoxSize}
@@ -144,7 +163,7 @@ const getAvailableEnergyBoxes = function (
       ...windGeneratorsPresent.map((windGenerator) => (
         <EnergyWind
           key={`wind_${windGenerator}`}
-          mode={mode}
+          componentMode={componentMode}
           windGenerator={windGenerator ?? 0}
           showInstance={alternators.length > 1}
           compactBoxSize={compactBoxSize}
@@ -157,7 +176,7 @@ const getAvailableEnergyBoxes = function (
 }
 
 interface Props {
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   pageSelectorPropsSetter?: (arg0: PageSelectorProps) => void
 }
 
diff --git a/src/app/Marine2/components/boxes/EnergyShore/EnergyShore.tsx b/src/app/Marine2/components/boxes/EnergyShore/EnergyShore.tsx
index 6cd74ae81..b02cd3558 100644
--- a/src/app/Marine2/components/boxes/EnergyShore/EnergyShore.tsx
+++ b/src/app/Marine2/components/boxes/EnergyShore/EnergyShore.tsx
@@ -8,8 +8,9 @@ import ValueOverview from "../../ui/ValueOverview"
 import { phaseUnitFor } from "../../../utils/formatters/phase-unit-for"
 import { phaseValueFor } from "../../../utils/formatters/phase-value-for"
 import { ValueWithUnit } from "@m2Types/generic/value-with-units"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
-const EnergyShore = ({ mode = "compact", inputId, compactBoxSize }: Props) => {
+const EnergyShore = ({ componentMode = "compact", inputId, compactBoxSize }: Props) => {
   const { current, power, voltage } = useActiveInValues()
   const { activeInput, phases } = useActiveSource()
   const unplugged = activeInput + 1 !== inputId // Active in = 0 -> AC1 is active
@@ -23,7 +24,7 @@ const EnergyShore = ({ mode = "compact", inputId, compactBoxSize }: Props) => {
     ])
   }
 
-  if (mode === "compact" && compactBoxSize) {
+  if (componentMode === "compact" && compactBoxSize) {
     return (
       <ValueOverview
         /* todo: fix types for svg */
@@ -54,7 +55,7 @@ const EnergyShore = ({ mode = "compact", inputId, compactBoxSize }: Props) => {
 
 interface Props {
   inputId: number
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   compactBoxSize?: { width: number; height: number }
 }
 
diff --git a/src/app/Marine2/components/boxes/EnergySolar/EnergySolar.tsx b/src/app/Marine2/components/boxes/EnergySolar/EnergySolar.tsx
index de302e453..d9fbaec12 100644
--- a/src/app/Marine2/components/boxes/EnergySolar/EnergySolar.tsx
+++ b/src/app/Marine2/components/boxes/EnergySolar/EnergySolar.tsx
@@ -1,14 +1,15 @@
+import React from "react"
 import { PvChargerState } from "@victronenergy/mfd-modules"
 import SolarIcon from "../../../images/icons/solar.svg"
 import { translate } from "react-i18nify"
 import ValueBox from "../../ui/ValueBox"
 import ValueOverview from "../../ui/ValueOverview"
-import React from "react"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
-const EnergySolar = ({ mode = "compact", pvCharger, compactBoxSize }: Props) => {
+const EnergySolar = ({ componentMode = "compact", pvCharger, compactBoxSize }: Props) => {
   const { current, power } = pvCharger
 
-  if (mode === "compact" && compactBoxSize) {
+  if (componentMode === "compact" && compactBoxSize) {
     return (
       <ValueOverview
         /* todo: fix types for svg */
@@ -16,7 +17,7 @@ const EnergySolar = ({ mode = "compact", pvCharger, compactBoxSize }: Props) =>
         Icon={SolarIcon}
         title={translate("boxes.solar")}
         value={current}
-        unit={"A"}
+        unit="A"
         boxSize={compactBoxSize}
       />
     )
@@ -37,7 +38,7 @@ const EnergySolar = ({ mode = "compact", pvCharger, compactBoxSize }: Props) =>
 
 interface Props {
   pvCharger: PvChargerState
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   compactBoxSize?: { width: number; height: number }
 }
 
diff --git a/src/app/Marine2/components/boxes/EnergyWind/EnergyWind.tsx b/src/app/Marine2/components/boxes/EnergyWind/EnergyWind.tsx
index bf549fec6..194cfdf62 100644
--- a/src/app/Marine2/components/boxes/EnergyWind/EnergyWind.tsx
+++ b/src/app/Marine2/components/boxes/EnergyWind/EnergyWind.tsx
@@ -5,11 +5,12 @@ import { observer } from "mobx-react-lite"
 import { translate } from "react-i18nify"
 import ValueBox from "../../ui/ValueBox"
 import ValueOverview from "../../ui/ValueOverview"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
-const EnergyWind = ({ mode = "compact", windGenerator, showInstance, compactBoxSize }: Props) => {
+const EnergyWind = ({ componentMode = "compact", windGenerator, showInstance, compactBoxSize }: Props) => {
   const { current, voltage } = useWindGenerator(windGenerator)
 
-  if (mode === "compact" && compactBoxSize) {
+  if (componentMode === "compact" && compactBoxSize) {
     return (
       <ValueOverview
         /* todo: fix types for svg */
@@ -42,7 +43,7 @@ const EnergyWind = ({ mode = "compact", windGenerator, showInstance, compactBoxS
 interface Props {
   windGenerator: number
   showInstance: boolean
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   compactBoxSize?: { width: number; height: number }
 }
 
diff --git a/src/app/Marine2/components/boxes/EnvironmentOverview/EnvironmentOverview.tsx b/src/app/Marine2/components/boxes/EnvironmentOverview/EnvironmentOverview.tsx
index 4cd46df0b..e71c2bf19 100644
--- a/src/app/Marine2/components/boxes/EnvironmentOverview/EnvironmentOverview.tsx
+++ b/src/app/Marine2/components/boxes/EnvironmentOverview/EnvironmentOverview.tsx
@@ -11,15 +11,16 @@ import EnvironmentIcon from "../../../images/icons/environment.svg"
 import GridPaginator from "../../ui/GridPaginator"
 import { PageSelectorProps } from "../../ui/PageSelector"
 import { translate } from "react-i18nify"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
 interface Props {
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   pageSelectorPropsSetter?: (arg0: PageSelectorProps) => void
 }
 
 export const VisibleComponentsContext = createContext({ passVisibility: (id: number, visible: boolean) => {} })
 
-const EnvironmentOverview = ({ mode = "full", pageSelectorPropsSetter }: Props) => {
+const EnvironmentOverview = ({ componentMode = "full", pageSelectorPropsSetter }: Props) => {
   const { temperatures } = useTemperatures()
   const [visibleElements, setVisibleElements] = useState({})
   const [boxSize, setBoxSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 })
@@ -29,22 +30,22 @@ const EnvironmentOverview = ({ mode = "full", pageSelectorPropsSetter }: Props)
   }, [])
 
   let temperatureComponents = (temperatures || []).map((temperatureId: TemperatureInstanceId) => (
-    <TemperatureData key={"temperature" + temperatureId} dataId={temperatureId} mode={mode} boxSize={boxSize} />
+    <TemperatureData key={"temperature" + temperatureId} dataId={temperatureId} componentMode={componentMode} boxSize={boxSize} />
   ))
 
   let humidityComponents = (temperatures || []).map((temperatureId: TemperatureInstanceId) => (
-    <HumidityData key={"humidity" + temperatureId} dataId={temperatureId} mode={mode} boxSize={boxSize} />
+    <HumidityData key={"humidity" + temperatureId} dataId={temperatureId} componentMode={componentMode} boxSize={boxSize} />
   ))
 
   let pressureComponents = (temperatures || []).map((temperatureId: TemperatureInstanceId) => (
-    <PressureData key={"pressure" + temperatureId} dataId={temperatureId} mode={mode} boxSize={boxSize} />
+    <PressureData key={"pressure" + temperatureId} dataId={temperatureId} componentMode={componentMode} boxSize={boxSize} />
   ))
 
   const components = [...temperatureComponents, ...humidityComponents, ...pressureComponents] as JSX.Element[]
 
   useVisibilityNotifier({ widgetName: BoxTypes.ENVIRONMENT, visible: Object.values(visibleElements).includes(true) })
 
-  if (mode === "compact") {
+  if (componentMode === "compact") {
     return (
       <VisibleComponentsContext.Provider value={{ passVisibility }}>
         <Box
diff --git a/src/app/Marine2/components/boxes/EnvironmentOverview/HumidityData.tsx b/src/app/Marine2/components/boxes/EnvironmentOverview/HumidityData.tsx
index 56d463678..8e40cd36e 100644
--- a/src/app/Marine2/components/boxes/EnvironmentOverview/HumidityData.tsx
+++ b/src/app/Marine2/components/boxes/EnvironmentOverview/HumidityData.tsx
@@ -6,14 +6,15 @@ import ValueBox from "../../ui/ValueBox"
 import { translate } from "react-i18nify"
 import { useContext, useEffect, useCallback } from "react"
 import { VisibleComponentsContext } from "./EnvironmentOverview"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
 interface Props {
   dataId: number
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   boxSize: { width: number; height: number }
 }
 
-const HumidityData = ({ dataId, mode, boxSize }: Props) => {
+const HumidityData = ({ dataId, componentMode, boxSize }: Props) => {
   const { humidity, customName } = useHumidity(dataId)
   const { passVisibility } = useContext(VisibleComponentsContext)
 
@@ -36,7 +37,7 @@ const HumidityData = ({ dataId, mode, boxSize }: Props) => {
     return null
   }
 
-  if (mode === "compact") {
+  if (componentMode === "compact") {
     return (
       <ValueOverview
         /* @ts-ignore */
diff --git a/src/app/Marine2/components/boxes/EnvironmentOverview/PressureData.tsx b/src/app/Marine2/components/boxes/EnvironmentOverview/PressureData.tsx
index 00f0d38d5..835d9a3a8 100644
--- a/src/app/Marine2/components/boxes/EnvironmentOverview/PressureData.tsx
+++ b/src/app/Marine2/components/boxes/EnvironmentOverview/PressureData.tsx
@@ -6,14 +6,15 @@ import ValueBox from "../../ui/ValueBox"
 import { translate } from "react-i18nify"
 import { useContext, useEffect, useCallback } from "react"
 import { VisibleComponentsContext } from "./EnvironmentOverview"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
 interface Props {
   dataId: number
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   boxSize: { width: number; height: number }
 }
 
-const PressureData = ({ dataId, mode, boxSize }: Props) => {
+const PressureData = ({ dataId, componentMode, boxSize }: Props) => {
   const { pressure, customName } = usePressure(dataId)
 
   const { passVisibility } = useContext(VisibleComponentsContext)
@@ -37,7 +38,7 @@ const PressureData = ({ dataId, mode, boxSize }: Props) => {
     return null
   }
 
-  if (mode === "compact") {
+  if (componentMode === "compact") {
     return (
       <ValueOverview
         /* @ts-ignore */
diff --git a/src/app/Marine2/components/boxes/EnvironmentOverview/TemperatureData.tsx b/src/app/Marine2/components/boxes/EnvironmentOverview/TemperatureData.tsx
index 798436336..ba778386f 100644
--- a/src/app/Marine2/components/boxes/EnvironmentOverview/TemperatureData.tsx
+++ b/src/app/Marine2/components/boxes/EnvironmentOverview/TemperatureData.tsx
@@ -6,14 +6,15 @@ import ValueBox from "../../ui/ValueBox"
 import { translate } from "react-i18nify"
 import { useContext, useEffect, useCallback } from "react"
 import { VisibleComponentsContext } from "./EnvironmentOverview"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
 interface Props {
   dataId: number
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   boxSize: { width: number; height: number }
 }
 
-const TemperatureData = ({ dataId, mode, boxSize }: Props) => {
+const TemperatureData = ({ dataId, componentMode, boxSize }: Props) => {
   const { temperature, customName } = useTemperature(dataId)
   const { passVisibility } = useContext(VisibleComponentsContext)
 
@@ -36,7 +37,7 @@ const TemperatureData = ({ dataId, mode, boxSize }: Props) => {
     return null
   }
 
-  if (mode === "compact") {
+  if (componentMode === "compact") {
     return (
       <ValueOverview
         /* @ts-ignore */
diff --git a/src/app/Marine2/components/boxes/GeneratorFp/GeneratorFp.tsx b/src/app/Marine2/components/boxes/GeneratorFp/GeneratorFp.tsx
index 1b3357b52..66e1fd402 100644
--- a/src/app/Marine2/components/boxes/GeneratorFp/GeneratorFp.tsx
+++ b/src/app/Marine2/components/boxes/GeneratorFp/GeneratorFp.tsx
@@ -11,9 +11,9 @@ import { applyStyles } from "../../../utils/media"
 import AutoStartStopSetter from "../../ui/AutoStartStopSetter"
 import ValueOverview from "../../ui/ValueOverview"
 import { ValueWithUnit } from "@m2Types/generic/value-with-units"
-import { Mode } from "@m2Types/generic/mode"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
-const GeneratorFp = ({ mode = "compact", generatorFp, compactBoxSize }: Props) => {
+const GeneratorFp = ({ componentMode = "compact", generatorFp, compactBoxSize }: Props) => {
   const gensetStateFormatter = (value: number) => {
     if (value === GENSET_STATE.STANDBY) {
       return translate("common.standby")
@@ -53,7 +53,7 @@ const GeneratorFp = ({ mode = "compact", generatorFp, compactBoxSize }: Props) =
     ])
   }
 
-  if (mode === "compact" && compactBoxSize) {
+  if (componentMode === "compact" && compactBoxSize) {
     return (
       <ValueOverview
         /* todo: fix types for svg */
@@ -139,7 +139,7 @@ const GeneratorFp = ({ mode = "compact", generatorFp, compactBoxSize }: Props) =
 }
 
 interface Props {
-  mode?: Mode
+  componentMode?: ComponentMode
   generatorFp: GeneratorFpProvider
   compactBoxSize?: { width: number; height: number }
 }
diff --git a/src/app/Marine2/components/boxes/GeneratorRelay/GeneratorRelay.tsx b/src/app/Marine2/components/boxes/GeneratorRelay/GeneratorRelay.tsx
index 6d8cdcf51..9b48d9b05 100644
--- a/src/app/Marine2/components/boxes/GeneratorRelay/GeneratorRelay.tsx
+++ b/src/app/Marine2/components/boxes/GeneratorRelay/GeneratorRelay.tsx
@@ -9,6 +9,7 @@ import { totalPowerFor } from "../../../utils/helpers/total-power-for"
 import { phaseUnitFor } from "../../../utils/formatters/phase-unit-for"
 import { isMultiPhaseFor } from "../../../utils/helpers/is-multi-phase-for"
 import { ValueWithUnit } from "@m2Types/generic/value-with-units"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
 const GeneratorRelay = ({
   statusCode,
@@ -18,7 +19,7 @@ const GeneratorRelay = ({
   autoStart,
   updateManualMode,
   updateAutoMode,
-  mode = "compact",
+  componentMode = "compact",
   compactBoxSize,
 }: Props) => {
   const getGeneratorState = (statusCode: number, active: boolean, phases: number) => {
@@ -50,7 +51,7 @@ const GeneratorRelay = ({
     ])
   }
 
-  if (mode === "compact" && compactBoxSize) {
+  if (componentMode === "compact" && compactBoxSize) {
     return (
       <ValueOverview
         /* todo: fix types for svg */
@@ -103,7 +104,7 @@ interface Props {
   updateManualMode: Function
   updateAutoMode: Function
   active?: boolean
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   compactBoxSize?: { width: number; height: number }
 }
 
diff --git a/src/app/Marine2/components/boxes/Inverter/Inverter.tsx b/src/app/Marine2/components/boxes/Inverter/Inverter.tsx
index 34f3cb9cd..ceae36f77 100644
--- a/src/app/Marine2/components/boxes/Inverter/Inverter.tsx
+++ b/src/app/Marine2/components/boxes/Inverter/Inverter.tsx
@@ -15,6 +15,7 @@ import Box from "../../ui/Box"
 import { applyStyles, defaultBoxStyles } from "../../../utils/media"
 import { useEffect, useState } from "react"
 import ValueOverview from "../../ui/ValueOverview"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
 const Inverter = ({ instanceId, isVebusInverter, componentMode = "compact", compactBoxSize }: Props) => {
   const { locked } = useAppStore() // lock from theme settings
@@ -164,7 +165,7 @@ const Inverter = ({ instanceId, isVebusInverter, componentMode = "compact", comp
 interface Props {
   instanceId: InverterInstanceId
   isVebusInverter: boolean
-  componentMode?: "compact" | "full"
+  componentMode?: ComponentMode
   compactBoxSize?: { width: number; height: number }
 }
 
diff --git a/src/app/Marine2/components/boxes/InverterCharger/InverterCharger.tsx b/src/app/Marine2/components/boxes/InverterCharger/InverterCharger.tsx
index 81ea12df3..2060b83dd 100644
--- a/src/app/Marine2/components/boxes/InverterCharger/InverterCharger.tsx
+++ b/src/app/Marine2/components/boxes/InverterCharger/InverterCharger.tsx
@@ -12,6 +12,7 @@ import InputLimitValue from "../../ui/InputLimitValue"
 import InputLimitSelector from "../../ui/InputLimitSelector"
 import ValueBox from "../../ui/ValueBox"
 import ValueOverview from "../../ui/ValueOverview"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
 const InverterCharger = ({ componentMode = "compact", compactBoxSize }: Props) => {
   const { locked } = useAppStore() // lock from theme settings
@@ -160,7 +161,7 @@ const InverterCharger = ({ componentMode = "compact", compactBoxSize }: Props) =
 }
 
 interface Props {
-  componentMode?: "compact" | "full"
+  componentMode?: ComponentMode
   compactBoxSize?: { width: number; height: number }
 }
 
diff --git a/src/app/Marine2/components/boxes/Tanks/Tank.tsx b/src/app/Marine2/components/boxes/Tanks/Tank.tsx
index 765081d1e..09871fdb2 100644
--- a/src/app/Marine2/components/boxes/Tanks/Tank.tsx
+++ b/src/app/Marine2/components/boxes/Tanks/Tank.tsx
@@ -10,6 +10,7 @@ import BlackWaterIcon from "../../../images/icons/black-water.svg"
 import GrayWaterIcon from "../../../images/icons/waste-water.svg"
 import { applyStyles, BreakpointStylesType, StylesType } from "app/Marine2/utils/media"
 import useSize from "@react-hook/size"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
 // styles for compact mode
 const compactStyles: BreakpointStylesType = {
@@ -83,7 +84,7 @@ const verticalStyles: BreakpointStylesType = {
   },
 }
 
-const Tank = ({ tankInstanceId, mode, levelWidth, orientation = "vertical", parentSize }: Props) => {
+const Tank = ({ tankInstanceId, componentMode, levelWidth, orientation = "vertical", parentSize }: Props) => {
   let { capacity, fluidType, level, remaining, customName, unit } = useTank(tankInstanceId)
   const fluidTypeNum = +fluidType
   const wrapperRef = useRef<HTMLDivElement>(null)
@@ -131,11 +132,11 @@ const Tank = ({ tankInstanceId, mode, levelWidth, orientation = "vertical", pare
   // tanks that are missing level readings and only have capacity
   let isAuxillaryTank = !!capacity && level === undefined
 
-  if (mode === "compact") {
+  if (componentMode === "compact") {
     return (
       <div ref={wrapperRef} className="flex flex-row items-center">
         <div className={classnames("flex items-center py-2 truncate")}>
-          <div className="mr-2">{fluidIcon(fluidTypeNum, mode, compactActiveStyles?.icon)}</div>
+          <div className="mr-2">{fluidIcon(fluidTypeNum, componentMode, compactActiveStyles?.icon)}</div>
           <div className={classnames("truncate", compactActiveStyles?.tankName)}>{tankTitle} </div>
         </div>
         <div className="flex flex-row items-center basis-0 flex-grow justify-end">
@@ -185,7 +186,7 @@ const Tank = ({ tankInstanceId, mode, levelWidth, orientation = "vertical", pare
         <div ref={wrapperRef}>
           <div className="flex flex-row items-center">
             <div className={classnames("flex items-center truncate")}>
-              <div className="mr-2 lg:mr-3">{fluidIcon(fluidTypeNum, mode, "w-[24px] md:w-[32px]")}</div>
+              <div className="mr-2 lg:mr-3">{fluidIcon(fluidTypeNum, componentMode, "w-[24px] md:w-[32px]")}</div>
               <div className="flex flex-col p-2 w-full truncate">
                 <div className={classnames("truncate", verticalActiveStyles?.tankName)}>{tankTitle}</div>
                 <div className={classnames("text-victron-gray", verticalActiveStyles?.capacity)}>
@@ -342,7 +343,7 @@ const roundLevelWidth = (width: number) => {
   return Math.ceil(width)
 }
 
-const fluidIcon = (type: number, mode: string = "compact", className: string, isComponent: boolean = true) => {
+const fluidIcon = (type: number, componentMode: ComponentMode = "compact", className: string, isComponent: boolean = true) => {
   switch (type) {
     case 0:
     case 3:
@@ -392,7 +393,7 @@ const fluidIcon = (type: number, mode: string = "compact", className: string, is
 interface Props {
   tankInstanceId: number
   levelWidth?: number
-  mode?: "compact" | "full"
+  componentMode?: ComponentMode
   orientation?: "vertical" | "horizontal"
   parentSize?: { width: number; height: number }
 }
diff --git a/src/app/Marine2/components/boxes/Tanks/Tanks.test.js b/src/app/Marine2/components/boxes/Tanks/Tanks.test.js
index 43b343eca..cc5b9f984 100644
--- a/src/app/Marine2/components/boxes/Tanks/Tanks.test.js
+++ b/src/app/Marine2/components/boxes/Tanks/Tanks.test.js
@@ -5,7 +5,7 @@ import { AppViews } from "../../../modules/AppViews"
 
 describe("Tanks element", () => {
   describe("compact mode", () => {
-    const wrapper = mount(<Tanks mode={"compact"} />)
+    const wrapper = mount(<Tanks componentMode="compact" />)
 
     it("should show content", () => {
       expect(wrapper.find(Tanks).exists()).toBe(true)
diff --git a/src/app/Marine2/components/boxes/Tanks/Tanks.tsx b/src/app/Marine2/components/boxes/Tanks/Tanks.tsx
index 86a2b6cae..5efb85410 100644
--- a/src/app/Marine2/components/boxes/Tanks/Tanks.tsx
+++ b/src/app/Marine2/components/boxes/Tanks/Tanks.tsx
@@ -13,13 +13,14 @@ import ResizeObserver from "resize-observer-polyfill"
 import useSize from "@react-hook/size"
 import { applyStyles, defaultBoxStyles } from "../../../utils/media"
 import classNames from "classnames"
+import { ComponentMode } from "@m2Types/generic/component-mode"
 
 interface Props {
-  mode?: "full" | "compact"
+  componentMode?: ComponentMode
   className?: string
 }
 
-const Tanks = ({ mode = "full", className }: Props) => {
+const Tanks = ({ componentMode = "full", className }: Props) => {
   const { tanks } = useTanks()
   const filteredTanks = (tanks || []).filter((tank) => !!tank || tank === 0)
 
@@ -84,7 +85,7 @@ const Tanks = ({ mode = "full", className }: Props) => {
     }, 0)
   }
 
-  if (mode === "compact") {
+  if (componentMode === "compact") {
     return (
       <Box
         title={translate("boxes.tanks")}
@@ -100,7 +101,7 @@ const Tanks = ({ mode = "full", className }: Props) => {
         {filteredTanks.map((tank) => (
           <div ref={tankRef} key={tank}>
             <Tank
-              mode={"compact"}
+              componentMode="compact"
               key={tank}
               tankInstanceId={Number(tank)}
               parentSize={boxSize}
@@ -134,7 +135,7 @@ const Tanks = ({ mode = "full", className }: Props) => {
                 <Tank
                   key={index}
                   tankInstanceId={Number(tank)}
-                  mode="full"
+                  componentMode="full"
                   orientation={orientation}
                   parentSize={{ width, height }}
                   levelWidth={levelWidth}
@@ -166,7 +167,7 @@ const Tanks = ({ mode = "full", className }: Props) => {
                 <Tank
                   key={tank}
                   tankInstanceId={tank!}
-                  mode="full"
+                  componentMode="full"
                   orientation={orientation}
                   parentSize={{ width, height }}
                   levelWidth={levelWidth}
diff --git a/src/app/Marine2/components/views/RootView.tsx b/src/app/Marine2/components/views/RootView.tsx
index d34693c96..b2c3c8092 100644
--- a/src/app/Marine2/components/views/RootView.tsx
+++ b/src/app/Marine2/components/views/RootView.tsx
@@ -38,15 +38,15 @@ const RootView = () => {
   const getBoxByType = (type: BoxTypes) => {
     switch (type) {
       case BoxTypes.ENERGY:
-        return <EnergyOverview mode="compact" key={"energy-overview"} />
+        return <EnergyOverview componentMode="compact" key={"energy-overview"} />
       case BoxTypes.TANKS:
-        return <Tanks mode="compact" key={"tanks"} />
+        return <Tanks componentMode="compact" key={"tanks"} />
       case BoxTypes.BATTERIES:
-        return <BatteriesOverview mode="compact" key={"batteries-overview"} />
+        return <BatteriesOverview componentMode="compact" key={"batteries-overview"} />
       case BoxTypes.DEVICES:
-        return <DevicesOverview mode="compact" key={"devices-overview"} />
+        return <DevicesOverview componentMode="compact" key={"devices-overview"} />
       case BoxTypes.ENVIRONMENT:
-        return <EnvironmentOverview mode="compact" key={"environment-overview"} />
+        return <EnvironmentOverview componentMode="compact" key={"environment-overview"} />
       default:
         return null
     }
diff --git a/src/app/Marine2/types/generic/component-mode.ts b/src/app/Marine2/types/generic/component-mode.ts
new file mode 100644
index 000000000..45532b05b
--- /dev/null
+++ b/src/app/Marine2/types/generic/component-mode.ts
@@ -0,0 +1 @@
+export type ComponentMode = "compact" | "full"
diff --git a/src/app/Marine2/types/generic/mode.ts b/src/app/Marine2/types/generic/mode.ts
deleted file mode 100644
index ba103d534..000000000
--- a/src/app/Marine2/types/generic/mode.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type Mode = "compact" | "full"