diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/CustomListItem.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/CustomListItem.tsx
index a0893968..12a79d91 100644
--- a/applications/visualizer/frontend/src/components/ViewerContainer/CustomListItem.tsx
+++ b/applications/visualizer/frontend/src/components/ViewerContainer/CustomListItem.tsx
@@ -1,6 +1,7 @@
 import { Add as AddIcon, DeleteOutlined as DeleteOutlinedIcon, HelpOutline as HelpOutlineIcon } from "@mui/icons-material";
 import { Box, FormControlLabel, IconButton, Stack, Tooltip, Typography } from "@mui/material";
 import { useState } from "react";
+import { ViewerType, type Workspace } from "../../models";
 import { vars } from "../../theme/variables.ts";
 import CustomSwitch from "./CustomSwitch";
 import PickerWrapper from "./PickerWrapper";
@@ -20,6 +21,7 @@ interface CustomListItemProps {
   onSwitchChange?: (id: string, checked: boolean) => void;
   onDelete?: (id: string) => void;
   deleteTooltipTitle?: string;
+  workspace: Workspace;
 }
 const CustomListItem = ({
   data,
@@ -29,6 +31,7 @@ const CustomListItem = ({
   onSwitchChange,
   onDelete,
   deleteTooltipTitle,
+  workspace,
 }: CustomListItemProps) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
@@ -55,7 +58,9 @@ const CustomListItem = ({
   };
 
   const handleColorChange = (color) => {
-    setSelectedColor(color.hex);
+    const hexColor = color.hex;
+    setSelectedColor(hexColor);
+    workspace.changeNeuronColorForViewers(data.id, hexColor, [ViewerType.ThreeD, ViewerType.EM]);
   };
 
   const handleOnMouseEnter = () => {
diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/Neurons.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/Neurons.tsx
index a7b4b676..c428c0b5 100644
--- a/applications/visualizer/frontend/src/components/ViewerContainer/Neurons.tsx
+++ b/applications/visualizer/frontend/src/components/ViewerContainer/Neurons.tsx
@@ -123,6 +123,7 @@ const Neurons = ({ children }) => {
               onSwitchChange={handleSwitchChange}
               onDelete={handleDeleteNeuron}
               deleteTooltipTitle="Remove neuron from the workspace"
+              workspace={currentWorkspace}
             />
           ))}
           <Box display="flex" alignItems="center" justifyContent="space-between" padding=".25rem .5rem">
@@ -150,6 +151,7 @@ const Neurons = ({ children }) => {
               onSwitchChange={handleSwitchChange}
               onDelete={() => console.log("delete")}
               deleteTooltipTitle="Remove group from the workspace"
+              workspace={currentWorkspace}
             />
           ))}
         </Stack>
diff --git a/applications/visualizer/frontend/src/models/workspace.ts b/applications/visualizer/frontend/src/models/workspace.ts
index 8cef28e5..773b7d2a 100644
--- a/applications/visualizer/frontend/src/models/workspace.ts
+++ b/applications/visualizer/frontend/src/models/workspace.ts
@@ -257,4 +257,22 @@ export class Workspace {
   getVisibleNeuronsInThreeD(): string[] {
     return Array.from(this.activeNeurons).filter((neuronId) => this.visibilities[neuronId]?.[ViewerType.ThreeD]?.visibility === Visibility.Visible);
   }
+
+  changeNeuronColorForViewers(neuronId: string, color: string, viewerTypes: ViewerType[] = [ViewerType.ThreeD, ViewerType.EM]): void {
+    const unsupportedTypes = viewerTypes.filter((type) => type !== ViewerType.ThreeD && type !== ViewerType.EM);
+
+    if (unsupportedTypes.length > 0) {
+      throw new Error(`Unsupported viewer types: ${unsupportedTypes.join(", ")}`);
+    }
+
+    const updated = produce(this, (draft: Workspace) => {
+      viewerTypes.forEach((viewerType) => {
+        if (viewerType in draft.visibilities[neuronId]) {
+          draft.visibilities[neuronId][viewerType].color = color;
+        }
+      });
+    });
+
+    this.updateContext(updated);
+  }
 }