diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/QueryView/components/QueryOptions/DataGridSwitch/DataGridSwitch.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/QueryView/components/QueryOptions/DataGridSwitch/DataGridSwitch.tsx
index a70beaf3c..546573875 100644
--- a/Src/WitsmlExplorer.Frontend/components/ContentViews/QueryView/components/QueryOptions/DataGridSwitch/DataGridSwitch.tsx
+++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/QueryView/components/QueryOptions/DataGridSwitch/DataGridSwitch.tsx
@@ -3,6 +3,8 @@ import { Stack } from "@mui/material";
 import { Switch } from "@equinor/eds-core-react";
 import { useOperationState } from "../../../../../../hooks/useOperationState.tsx";
 import { UserTheme } from "../../../../../../contexts/operationStateReducer.tsx";
+import styled from "styled-components";
+import { Colors } from "../../../../../../styles/Colors.tsx";
 
 type DataGridSwitchProps = {
   onClick: ChangeEventHandler<HTMLInputElement>;
@@ -13,19 +15,26 @@ const DataGridSwitch: FC<DataGridSwitchProps> = ({
   onClick,
   dataGridActive
 }) => {
-  const isCompact =
-    useOperationState().operationState.theme === UserTheme.Compact;
+  const { theme, colors } = useOperationState().operationState;
+  const isCompact = theme === UserTheme.Compact;
 
   return (
     <Stack direction="row" alignItems="center" justifyContent="flex-start">
-      <Switch
+      <StyledSwitch
         checked={dataGridActive}
         onChange={onClick}
         size={isCompact ? "small" : "default"}
         label="Use data grid view"
+        colors={colors}
       />
     </Stack>
   );
 };
 
+const StyledSwitch = styled(Switch)<{ colors: Colors }>`
+  & > span:nth-child(2) {
+    color: ${({ colors }) => colors.interactive.primaryResting};
+  }
+`;
+
 export default DataGridSwitch;