diff --git a/frontend/apps/artcraft/app/src/pages/PageEnigma/PageEditor.tsx b/frontend/apps/artcraft/app/src/pages/PageEnigma/PageEditor.tsx
index 07de94693e..1e39e8d79a 100644
--- a/frontend/apps/artcraft/app/src/pages/PageEnigma/PageEditor.tsx
+++ b/frontend/apps/artcraft/app/src/pages/PageEnigma/PageEditor.tsx
@@ -22,7 +22,6 @@ import { Storyboard } from "../PageStoryboard";
 import { useStoryboardPageEnabled } from "@storyteller/ui-settings-modal";
 
 import {
-  sidePanelWidth,
   cameraAspectRatio,
   outlinerIsShowing,
   gridVisibility,
@@ -113,7 +112,7 @@ export const PageEditor = () => {
   };
 
   useEffect(() => {
-    sidePanelWidth.value = 340;
+    usePageEnigmaStore.getState().setSidePanelWidth(340);
     window.onbeforeunload = () => {
       return "You may have unsaved changes.";
     };
diff --git a/frontend/apps/artcraft/app/src/pages/PageEnigma/comps/PreviewFrameImage.tsx b/frontend/apps/artcraft/app/src/pages/PageEnigma/comps/PreviewFrameImage.tsx
index 74a9e2560f..14a4441aac 100644
--- a/frontend/apps/artcraft/app/src/pages/PageEnigma/comps/PreviewFrameImage.tsx
+++ b/frontend/apps/artcraft/app/src/pages/PageEnigma/comps/PreviewFrameImage.tsx
@@ -4,18 +4,19 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useShallow } from "zustand/shallow";
 import { EditorStates } from "~/pages/PageEnigma/enums";
 import { pageHeight, pageWidth } from "~/signals";
-import { sidePanelWidth } from "~/pages/PageEnigma/signals";
 import { usePageEnigmaStore } from "~/pages/PageEnigma/PageEnigmaStore";
 
 export const PreviewFrameImage = () => {
   useSignals();
-  const { editorState, previewSrc, sidePanelVisible } = usePageEnigmaStore(
-    useShallow((s) => ({
-      editorState: s.editorState,
-      previewSrc: s.previewSrc,
-      sidePanelVisible: s.sidePanelVisible,
-    })),
-  );
+  const { editorState, previewSrc, sidePanelVisible, sidePanelWidth } =
+    usePageEnigmaStore(
+      useShallow((s) => ({
+        editorState: s.editorState,
+        previewSrc: s.previewSrc,
+        sidePanelVisible: s.sidePanelVisible,
+        sidePanelWidth: s.sidePanelWidth,
+      })),
+    );
 
   if (editorState !== EditorStates.PREVIEW) {
     return null;
@@ -23,7 +24,7 @@ export const PreviewFrameImage = () => {
 
   const width =
     pageWidth.value -
-    (sidePanelVisible ? sidePanelWidth.value : 0) -
+    (sidePanelVisible ? sidePanelWidth : 0) -
     84;
   const height = pageHeight.value - 56;
 
diff --git a/frontend/apps/artcraft/app/src/pages/PageEnigma/comps/SidePanel/SidePanel.tsx b/frontend/apps/artcraft/app/src/pages/PageEnigma/comps/SidePanel/SidePanel.tsx
index 4299c6115d..d7e39b1846 100644
--- a/frontend/apps/artcraft/app/src/pages/PageEnigma/comps/SidePanel/SidePanel.tsx
+++ b/frontend/apps/artcraft/app/src/pages/PageEnigma/comps/SidePanel/SidePanel.tsx
@@ -1,7 +1,5 @@
 import { useState } from "react";
-import { useSignals } from "@preact/signals-react/runtime";
 import { useShallow } from "zustand/shallow";
-import { sidePanelWidth } from "~/pages/PageEnigma/signals";
 import { usePageEnigmaStore } from "~/pages/PageEnigma/PageEnigmaStore";
 
 import { SidePanelTabs } from "~/pages/PageEnigma/comps/SidePanelTabs";
@@ -9,13 +7,14 @@ import { SidePanelMenu } from "~/pages/PageEnigma/comps/SidePanelMenu";
 import { TabItem, tabList } from "./tabList";
 
 export const SidePanel = () => {
-  useSignals();
-  const { sidePanelVisible, dndSidePanelWidth } = usePageEnigmaStore(
-    useShallow((s) => ({
-      sidePanelVisible: s.sidePanelVisible,
-      dndSidePanelWidth: s.dndSidePanelWidth,
-    })),
-  );
+  const { sidePanelVisible, dndSidePanelWidth, sidePanelWidth } =
+    usePageEnigmaStore(
+      useShallow((s) => ({
+        sidePanelVisible: s.sidePanelVisible,
+        dndSidePanelWidth: s.dndSidePanelWidth,
+        sidePanelWidth: s.sidePanelWidth,
+      })),
+    );
 
   const initialTabIdx = 0;
   const [selectedTab, setSelectedTab] = useState<TabItem>(
@@ -23,7 +22,7 @@ export const SidePanel = () => {
   );
 
   const displayWidth =
-    dndSidePanelWidth > -1 ? dndSidePanelWidth : sidePanelWidth.value;
+    dndSidePanelWidth > -1 ? dndSidePanelWidth : sidePanelWidth;
 
   return (
     <>
diff --git a/frontend/apps/artcraft/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleSelection.tsx b/frontend/apps/artcraft/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleSelection.tsx
index 26957b30bb..45b5749e9b 100644
--- a/frontend/apps/artcraft/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleSelection.tsx
+++ b/frontend/apps/artcraft/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleSelection.tsx
@@ -6,8 +6,8 @@ import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext";
 import { ArtStyle } from "~/pages/PageEnigma/Editor/api_manager";
 import { faAngleLeft, faAngleRight } from "@fortawesome/pro-solid-svg-icons";
 import { styleList } from "~/pages/PageEnigma/styleList";
-import { sidePanelWidth } from "~/pages/PageEnigma/signals";
 import { pageHeight } from "~/signals";
+import { usePageEnigmaStore } from "~/pages/PageEnigma/PageEnigmaStore";
 import { ItemPicker } from "./ItemPicker";
 import { useSignals } from "@preact/signals-react/runtime";
 
@@ -17,11 +17,12 @@ interface Props {
 }
 export const StyleSelection = ({ setSelection, selection }: Props) => {
   useSignals();
+  const sidePanelWidth = usePageEnigmaStore((s) => s.sidePanelWidth);
   const [scrollPosition, setScrollPosition] = useState(0);
 
-  const shownImageCount = Math.floor((sidePanelWidth.value - 32) / 104);
+  const shownImageCount = Math.floor((sidePanelWidth - 32) / 104);
   const imageWidth =
-    96 + (sidePanelWidth.value - 32 - shownImageCount * 104) / shownImageCount;
+    96 + (sidePanelWidth - 32 - shownImageCount * 104) / shownImageCount;
   const imageHeight = (54 * imageWidth) / 90;
 
   const imageRows = Math.min(
@@ -49,7 +50,7 @@ export const StyleSelection = ({ setSelection, selection }: Props) => {
           <div
             className="relative overflow-hidden"
             style={{
-              width: sidePanelWidth.value - 32,
+              width: sidePanelWidth - 32,
               height: imageHeight * imageRows + 8 * imageRows,
             }}
           >
diff --git a/frontend/apps/artcraft/app/src/pages/PageEnigma/signals/index.ts b/frontend/apps/artcraft/app/src/pages/PageEnigma/signals/index.ts
index 0aeca06185..cefb23b792 100644
--- a/frontend/apps/artcraft/app/src/pages/PageEnigma/signals/index.ts
+++ b/frontend/apps/artcraft/app/src/pages/PageEnigma/signals/index.ts
@@ -3,5 +3,4 @@ export * from "./engine";
 export * from "./dragAndDrop";
 export * from "./objectPanel";
 export * from "./outliner";
-export * from "./sizing";
 export * from "./stylizeTab";
diff --git a/frontend/apps/artcraft/app/src/pages/PageEnigma/signals/sizing.ts b/frontend/apps/artcraft/app/src/pages/PageEnigma/signals/sizing.ts
deleted file mode 100644
index 24c994bf2e..0000000000
--- a/frontend/apps/artcraft/app/src/pages/PageEnigma/signals/sizing.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { signal } from "@preact/signals-core";
-
-export const sidePanelWidth = signal(0);