diff --git a/src/ui/widgets/GroupBox/groupBox.test.tsx b/src/ui/widgets/GroupBox/groupBox.test.tsx
index 7e2c2dc8..2cd77a6c 100644
--- a/src/ui/widgets/GroupBox/groupBox.test.tsx
+++ b/src/ui/widgets/GroupBox/groupBox.test.tsx
@@ -2,33 +2,49 @@ import React from "react";
 import { GroupBoxComponent } from "./groupBox";
 import { ColorUtils } from "../../../types/color";
 import { render } from "@testing-library/react";
+import { configureStore } from "@reduxjs/toolkit";
+import { Provider } from "react-redux";
+
+const testStore = configureStore({
+  reducer: {
+    style: (state = { classes: {}, currentClass: "DEFAULT" }) => state
+  }
+});
 
 describe("<GroupBoxComponent /> snapshots", (): void => {
   test("it matches the snapshot for Group Box style", (): void => {
     const { asFragment } = render(
-      <GroupBoxComponent
-        name={"Test"}
-        backgroundColor={ColorUtils.WHITE}
-        styleOpt={0}
-      />
+      <Provider store={testStore}>
+        <GroupBoxComponent
+          name={"Test"}
+          backgroundColor={ColorUtils.WHITE}
+          styleOpt={0}
+        />
+      </Provider>
     );
     expect(asFragment()).toMatchSnapshot();
   });
   test("it matches the snapshot for Title Bar style", (): void => {
     const { asFragment } = render(
-      <GroupBoxComponent name={"Title"} styleOpt={1} />
+      <Provider store={testStore}>
+        <GroupBoxComponent name={"Title"} styleOpt={1} />
+      </Provider>
     );
     expect(asFragment()).toMatchSnapshot();
   });
   test("it matches the snapshot for Line style", (): void => {
     const { asFragment } = render(
-      <GroupBoxComponent name={"No Title"} styleOpt={2} />
+      <Provider store={testStore}>
+        <GroupBoxComponent name={"No Title"} styleOpt={2} />
+      </Provider>
     );
     expect(asFragment()).toMatchSnapshot();
   });
   test("it matches the snapshot for no style", (): void => {
     const { asFragment } = render(
-      <GroupBoxComponent name={"None"} styleOpt={3} />
+      <Provider store={testStore}>
+        <GroupBoxComponent name={"None"} styleOpt={3} />
+      </Provider>
     );
     expect(asFragment()).toMatchSnapshot();
   });
@@ -36,7 +52,11 @@ describe("<GroupBoxComponent /> snapshots", (): void => {
 
 describe("<GroupBoxComponent />", (): void => {
   test("it renders the title", (): void => {
-    const grouping = <GroupBoxComponent name={"Test"} styleOpt={1} />;
+    const grouping = (
+      <Provider store={testStore}>
+        <GroupBoxComponent name={"Test"} styleOpt={1} />
+      </Provider>
+    );
     const { getByText } = render(grouping);
     expect(getByText("Test")).toBeInTheDocument();
   });
@@ -44,9 +64,11 @@ describe("<GroupBoxComponent />", (): void => {
   test("it renders child div with text", (): void => {
     const childText = "Testing Child Component";
     const groupingWithChild = (
-      <GroupBoxComponent name={"Test"}>
-        <div>{childText}</div>
-      </GroupBoxComponent>
+      <Provider store={testStore}>
+        <GroupBoxComponent name={"Test"}>
+          <div>{childText}</div>
+        </GroupBoxComponent>
+      </Provider>
     );
     const { getByText } = render(groupingWithChild);
     expect(getByText("Test")).toBeInTheDocument();
diff --git a/src/ui/widgets/GroupBox/groupBox.tsx b/src/ui/widgets/GroupBox/groupBox.tsx
index e87c44e6..1ad98d43 100644
--- a/src/ui/widgets/GroupBox/groupBox.tsx
+++ b/src/ui/widgets/GroupBox/groupBox.tsx
@@ -17,6 +17,8 @@ import { fontToCss, newFont } from "../../../types/font";
 import { ColorUtils } from "../../../types/color";
 import Box from "@mui/material/Box";
 import { MacroContext, MacroContextType } from "../../../types/macros";
+import { selectCurrentClass } from "../../../redux/slices/styleSlice";
+import { useSelector } from "react-redux";
 
 const INNER_DIV_STYLE: CSSProperties = {
   position: "relative",
@@ -44,14 +46,24 @@ export const GroupBoxComponent = (
   props: InferWidgetProps<typeof GroupBoxProps>
 ): JSX.Element => {
   const {
-    backgroundColor = ColorUtils.fromRgba(240, 240, 240),
-    foregroundColor = ColorUtils.fromRgba(0, 0, 0),
-    lineColor = ColorUtils.fromRgba(0, 0, 0),
     font = newFont(14),
     styleOpt = 0,
     transparent = false,
     visible = true
   } = props;
+  const currentClass = useSelector(selectCurrentClass);
+
+  let {
+    backgroundColor = ColorUtils.fromRgba(240, 240, 240),
+    foregroundColor = ColorUtils.fromRgba(0, 0, 0),
+    lineColor = ColorUtils.fromRgba(0, 0, 0)
+  } = props;
+
+  if (currentClass === "DARKMODE") {
+    backgroundColor = ColorUtils.fromRgba(26, 29, 38);
+    foregroundColor = ColorUtils.fromRgba(233, 233, 233);
+    lineColor = ColorUtils.fromRgba(233, 233, 233);
+  }
 
   const outerDivStyle: CSSProperties = {
     width: "100%",