diff --git a/fission/src/Synthesis.tsx b/fission/src/Synthesis.tsx
index cc3d1cecc4..2ffda4fd99 100644
--- a/fission/src/Synthesis.tsx
+++ b/fission/src/Synthesis.tsx
@@ -1,9 +1,11 @@
 import Scene from "@/components/Scene.tsx"
 import { AnimatePresence } from "framer-motion"
 import { ReactElement, useCallback, useEffect, useRef, useState } from "react"
-import { ModalControlProvider, useModalManager } from "@/ui/ModalContext"
-import { PanelControlProvider, usePanelManager } from "@/ui/PanelContext"
-import { useTheme } from "@/ui/ThemeContext"
+import { ModalControlProvider } from "@/ui/ModalContext"
+import { useModalManager } from "@/ui/helpers/UseModalManager.tsx"
+import { PanelControlProvider } from "@/ui/PanelContext"
+import { usePanelManager } from "@/ui/helpers/UsePanelManager.tsx"
+import { useTheme } from "@/ui/helpers/UseThemeHelpers.tsx"
 import { ToastContainer, ToastProvider } from "@/ui/ToastContext"
 import {
     TOOLTIP_DURATION,
diff --git a/fission/src/main.tsx b/fission/src/main.tsx
index 167538c689..8951cd1f8a 100644
--- a/fission/src/main.tsx
+++ b/fission/src/main.tsx
@@ -1,5 +1,6 @@
 import ReactDOM from "react-dom/client"
-import { Theme, ThemeProvider } from "@/ui/ThemeContext"
+import { ThemeProvider } from "@/ui/ThemeContext"
+import { Theme } from "@/ui/helpers/UseThemeHelpers"
 import Synthesis from "./Synthesis"
 import "./index.css"
 import APS from "./aps/APS"
diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index a939ecf954..b734ea06f9 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -5,7 +5,7 @@ import GizmoSceneObject from "./GizmoSceneObject"
 import { EdgeDetectionMode, EffectComposer, EffectPass, RenderPass, SMAAEffect } from "postprocessing"
 import fragmentShader from "@/shaders/fragment.glsl"
 import vertexShader from "@/shaders/vertex.glsl"
-import { Theme } from "@/ui/ThemeContext"
+import { Theme } from "@/ui/helpers/UseThemeHelpers"
 import Jolt from "@azaleacolburn/jolt-physics"
 import { CameraControls, CameraControlsType, CustomOrbitControls } from "@/systems/scene/CameraControls"
 import ScreenInteractionHandler, { InteractionEnd } from "./ScreenInteractionHandler"
diff --git a/fission/src/ui/ModalContext.tsx b/fission/src/ui/ModalContext.tsx
index d0fe266274..03878728dc 100644
--- a/fission/src/ui/ModalContext.tsx
+++ b/fission/src/ui/ModalContext.tsx
@@ -1,102 +1,5 @@
-import React, { createContext, useState, useEffect, useCallback, useContext, ReactNode, ReactElement } from "react"
-
-type ModalControlContextType = {
-    openModal: (modalId: string, onOpen?: () => void, onClose?: () => void) => void
-    closeModal: () => void
-    children?: ReactNode
-}
-
-const ModalControlContext = createContext<ModalControlContextType | null>(null)
-
-export const useModalControlContext = () => {
-    const context = useContext(ModalControlContext)
-    if (!context) throw new Error("useModalControlContext must be used within a ModalControlProvider")
-    return context
-}
+import { ModalControlContext, ModalControlContextType } from "./helpers/UseModalManager"
 
 export const ModalControlProvider: React.FC<ModalControlContextType> = ({ children, ...methods }) => {
     return <ModalControlContext.Provider value={methods}>{children}</ModalControlContext.Provider>
 }
-
-type ModalInstance = {
-    id: string
-    component: ReactElement
-    onOpen?: () => void
-    onClose?: () => void
-}
-
-export const useModalManager = (modals: ReactElement[]) => {
-    const [modalDictionary, setModalDictionary] = useState<{
-        [key: string]: ModalInstance
-    }>({})
-    const [activeModalId, setActiveModalId] = useState<string | null>(null)
-
-    const openModal = useCallback(
-        (modalId: string, onOpen?: () => void, onClose?: () => void) => {
-            if (modalDictionary[modalId]) {
-                if (onOpen) {
-                    modalDictionary[modalId].onOpen = onOpen
-                    onOpen()
-                }
-                if (onClose) modalDictionary[modalId].onClose = onClose
-            }
-            setActiveModalId(modalId)
-        },
-        [modalDictionary]
-    )
-
-    const closeModal = useCallback(() => {
-        if (activeModalId) {
-            const inst = modalDictionary[activeModalId]
-            if (inst && inst.onClose) {
-                inst.onClose()
-            }
-        }
-        setActiveModalId(null)
-    }, [activeModalId, modalDictionary])
-
-    const registerModal = useCallback(
-        (modalId: string, modal: ModalInstance) => {
-            modalDictionary[modalId] = modal
-        },
-        [modalDictionary]
-    )
-
-    const unregisterModal = useCallback((modalId: string) => {
-        setModalDictionary(prevDictionary => {
-            const newDictionary = { ...prevDictionary }
-            delete newDictionary[modalId]
-            return newDictionary
-        })
-    }, [])
-
-    const getActiveModalElement = useCallback(() => {
-        if (activeModalId !== null) {
-            const modal = modalDictionary[activeModalId]
-            return modal ? modal.component : null
-        }
-        return null
-    }, [activeModalId, modalDictionary])
-
-    useEffect(() => {
-        modals.forEach(modalComponent => {
-            const id = modalComponent.props.modalId
-            registerModal(id, {
-                id: id,
-                component: modalComponent,
-                onOpen: () => {},
-                onClose: () => {},
-            })
-        })
-    }, [modals, closeModal, openModal, registerModal])
-
-    return {
-        modalDictionary,
-        activeModalId,
-        openModal,
-        closeModal,
-        registerModal,
-        unregisterModal,
-        getActiveModalElement,
-    }
-}
diff --git a/fission/src/ui/PanelContext.tsx b/fission/src/ui/PanelContext.tsx
index 3750c88149..b04e7c5618 100644
--- a/fission/src/ui/PanelContext.tsx
+++ b/fission/src/ui/PanelContext.tsx
@@ -1,136 +1,5 @@
-import React, { createContext, ReactElement, ReactNode, useCallback, useContext, useEffect, useState } from "react"
-
-type PanelControlContextType = {
-    openPanel: (panelId: string) => void
-    closePanel: (panelId: string) => void
-    closeAllPanels: () => void
-    children?: ReactNode
-}
-
-const PanelControlContext = createContext<PanelControlContextType | null>(null)
-
-export const usePanelControlContext = () => {
-    const context = useContext(PanelControlContext)
-    if (!context) throw new Error("usePanelControlContext must be used within a PanelControlProvider")
-    return context
-}
+import { PanelControlContext, PanelControlContextType } from "./helpers/UsePanelManager"
 
 export const PanelControlProvider: React.FC<PanelControlContextType> = ({ children, ...methods }) => {
     return <PanelControlContext.Provider value={methods}>{children}</PanelControlContext.Provider>
 }
-
-type PanelInstance = {
-    id: string
-    component: ReactElement
-    onOpen?: () => void
-    onClose?: () => void
-}
-
-export const usePanelManager = (panels: ReactElement[]) => {
-    const [panelDictionary, setPanelDictionary] = useState<{
-        [key: string]: PanelInstance
-    }>({})
-    const [activePanelIds, setActivePanelIds] = useState<string[]>([])
-
-    const openPanel = useCallback(
-        (panelId: string, onOpen?: () => void, onClose?: () => void) => {
-            setActivePanelIds(prevPanelIds => {
-                if (prevPanelIds.includes(panelId)) return prevPanelIds
-                if (panelDictionary[panelId]) {
-                    if (onOpen) {
-                        panelDictionary[panelId].onOpen = onOpen
-                        onOpen()
-                    }
-                    if (onClose) panelDictionary[panelId].onClose = onClose
-                }
-                return [...activePanelIds, panelId]
-            })
-        },
-        [activePanelIds, panelDictionary]
-    )
-
-    const closePanel = useCallback(
-        (panelId: string) => {
-            let inst = panelDictionary[panelId]
-            if (inst) {
-                if (inst.onClose) inst.onClose()
-                setActivePanelIds(activePanelIds.filter(i => i != panelId))
-            } else {
-                setActivePanelIds(
-                    activePanelIds.filter(i => {
-                        inst = panelDictionary[i]
-                        if (inst.component.props.name == panelId) {
-                            if (inst.onClose) inst.onClose()
-                            return false
-                        } else {
-                            return true
-                        }
-                    })
-                )
-            }
-        },
-        [activePanelIds, panelDictionary]
-    )
-
-    const closeAllPanels = useCallback(() => {
-        if (activePanelIds.length > 0) {
-            activePanelIds.forEach(id => {
-                const inst = panelDictionary[id]
-                if (inst && inst.onClose) {
-                    inst.onClose()
-                }
-            })
-        }
-        setActivePanelIds([])
-    }, [activePanelIds, panelDictionary])
-
-    const registerPanel = useCallback(
-        (panelId: string, panel: PanelInstance) => {
-            panelDictionary[panelId] = panel
-        },
-        [panelDictionary]
-    )
-
-    const unregisterPanel = useCallback((panelId: string) => {
-        setPanelDictionary(prevDictionary => {
-            const newDictionary = { ...prevDictionary }
-            delete newDictionary[panelId]
-            return newDictionary
-        })
-    }, [])
-
-    const getActivePanelElements = useCallback(() => {
-        if (activePanelIds !== null && activePanelIds.length > 0) {
-            return activePanelIds
-                .map((id: string) => {
-                    const panel: PanelInstance = panelDictionary[id]
-                    return panel ? panel.component : null
-                })
-                .filter(p => p != null)
-        }
-        return []
-    }, [activePanelIds, panelDictionary])
-
-    useEffect(() => {
-        panels.forEach(panelData => {
-            const id = panelData.props.panelId
-            registerPanel(id, {
-                id: id,
-                component: panelData,
-                onOpen: () => {},
-                onClose: () => {},
-            })
-        })
-    }, [panels, closePanel, openPanel, registerPanel])
-
-    return {
-        panelDictionary,
-        activePanelIds,
-        openPanel,
-        closePanel,
-        closeAllPanels,
-        registerPanel,
-        unregisterPanel,
-        getActivePanelElements,
-    }
-}
diff --git a/fission/src/ui/ThemeContext.tsx b/fission/src/ui/ThemeContext.tsx
index 233907d172..b517968591 100644
--- a/fission/src/ui/ThemeContext.tsx
+++ b/fission/src/ui/ThemeContext.tsx
@@ -1,78 +1,7 @@
-import React, { ReactNode, createContext, useContext, useState } from "react"
-import { RgbaColor } from "react-colorful"
+import React, { ReactNode, useState } from "react"
 import { addGlobalFunc } from "@/util/dom"
-
-export const defaultThemeName = "Default"
-export type ColorName =
-    | "InteractiveElementSolid"
-    | "InteractiveElementLeft"
-    | "InteractiveElementRight"
-    | "Background"
-    | "BackgroundSecondary"
-    | "InteractiveBackground"
-    | "BackgroundHUD"
-    | "InteractiveHover"
-    | "InteractiveSelect"
-    | "MainText"
-    | "Scrollbar"
-    | "AcceptButton"
-    | "CancelButton"
-    | "InteractiveElementText"
-    | "Icon"
-    | "MainHUDIcon"
-    | "MainHUDCloseIcon"
-    | "HighlightHover"
-    | "HighlightSelect"
-    | "SkyboxTop"
-    | "SkyboxBottom"
-    | "FloorGrid"
-    | "AcceptCancelButtonText"
-    | "MatchRedAlliance"
-    | "MatchBlueAlliance"
-    | "ToastInfo"
-    | "ToastWarning"
-    | "ToastError"
-
-export const colorNameToTailwind = (colorName: ColorName) => {
-    return (
-        "bg" +
-        colorName
-            .replace(/([A-Z]+)/g, "-$1")
-            .replace(/(?<=[A-Z])([A-Z])(?![A-Z]|$)/g, "-$1")
-            .toLowerCase()
-    )
-}
-export const colorNameToProp = (colorName: ColorName) => {
-    return (
-        "-" +
-        colorName
-            .replace(/([A-Z]+)/g, "-$1")
-            .replace(/(?<=[A-Z])([A-Z])(?![A-Z]|$)/g, "-$1")
-            .toLowerCase()
-    )
-}
-
-export const colorNameToVar = (colorName: ColorName) => {
-    return `var(${colorNameToProp(colorName)})`
-}
-
-export type Theme = {
-    [name in ColorName]: { color: RgbaColor; above: (ColorName | string)[] }
-}
-export type Themes = { [name: string]: Theme }
-
-type ThemeContextType = {
-    themes: Themes
-    initialThemeName: string
-    defaultTheme: Theme
-    currentTheme: string
-    setTheme: (themeName: string) => void
-    updateColor: (themeName: string, colorName: ColorName, rgbaColor: RgbaColor) => void
-    createTheme: (themeName: string) => void
-    deleteTheme: (themeName: string) => void
-    deleteAllThemes: () => void
-    applyTheme: (themeName: string) => void
-}
+import { RgbaColor } from "react-colorful"
+import { ColorName, Themes, Theme, ThemeContext, defaultThemeName, colorNameToProp } from "./helpers/UseThemeHelpers"
 
 type ThemeProviderProps = {
     themes: Themes
@@ -81,8 +10,6 @@ type ThemeProviderProps = {
     children: ReactNode
 }
 
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
-
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({ initialThemeName, themes, defaultTheme, children }) => {
     const [currentTheme, setCurrentTheme] = useState<string>(initialThemeName)
 
@@ -186,11 +113,3 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ initialThemeName,
         </ThemeContext.Provider>
     )
 }
-
-export const useTheme = () => {
-    const context = useContext(ThemeContext)
-    if (!context) {
-        throw new Error("useTheme must be used within a ThemeProvider!")
-    }
-    return context
-}
diff --git a/fission/src/ui/components/AnalyticsConsent.tsx b/fission/src/ui/components/AnalyticsConsent.tsx
index 478fbb8f60..1b16b3449c 100644
--- a/fission/src/ui/components/AnalyticsConsent.tsx
+++ b/fission/src/ui/components/AnalyticsConsent.tsx
@@ -1,7 +1,7 @@
 import { Box } from "@mui/material"
 import Label, { LabelSize } from "./Label"
 import Button from "./Button"
-import { colorNameToVar } from "../ThemeContext"
+import { colorNameToVar } from "../helpers/UseThemeHelpers"
 import { AiOutlineClose } from "react-icons/ai"
 
 interface AnalyticsConsentProps {
diff --git a/fission/src/ui/components/BespokeGraph.tsx b/fission/src/ui/components/BespokeGraph.tsx
index 5f983a9feb..df1bad53ac 100644
--- a/fission/src/ui/components/BespokeGraph.tsx
+++ b/fission/src/ui/components/BespokeGraph.tsx
@@ -8,7 +8,7 @@
 
 import { DOMUnitExpression } from "@/util/Units"
 import { useCallback, useEffect, useMemo, useReducer, useRef } from "react"
-import { colorNameToVar } from "../ThemeContext"
+import { colorNameToVar } from "../helpers/UseThemeHelpers"
 
 const DEBUG_EDGE_CONTROL_LINES = false
 
diff --git a/fission/src/ui/components/ContextMenu.tsx b/fission/src/ui/components/ContextMenu.tsx
index 4036942925..ea0a56d07e 100644
--- a/fission/src/ui/components/ContextMenu.tsx
+++ b/fission/src/ui/components/ContextMenu.tsx
@@ -1,7 +1,7 @@
 import { Box } from "@mui/material"
 import { useEffect, useState } from "react"
 import { ContextData, ContextSupplierEvent } from "./ContextMenuData"
-import { colorNameToVar } from "../ThemeContext"
+import { colorNameToVar } from "../helpers/UseThemeHelpers"
 import Button, { ButtonSize } from "./Button"
 import Label, { LabelSize } from "./Label"
 import { SectionDivider } from "./StyledComponents"
diff --git a/fission/src/ui/components/Dropdown.tsx b/fission/src/ui/components/Dropdown.tsx
index 6da2de7da8..cc2f14d0d4 100644
--- a/fission/src/ui/components/Dropdown.tsx
+++ b/fission/src/ui/components/Dropdown.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react"
 import { alpha, styled } from "@mui/system"
 import { Menu, MenuItem, Button, Tooltip } from "@mui/material"
-import { colorNameToVar } from "../ThemeContext"
+import { colorNameToVar } from "../helpers/UseThemeHelpers"
 import { SoundPlayer } from "@/systems/sound/SoundPlayer"
 import dropdownMenuSound from "@/assets/sound-files/DullClick.wav"
 
diff --git a/fission/src/ui/components/GlobalUIComponent.tsx b/fission/src/ui/components/GlobalUIComponent.tsx
index 6f38fb8723..c7efaf4f64 100644
--- a/fission/src/ui/components/GlobalUIComponent.tsx
+++ b/fission/src/ui/components/GlobalUIComponent.tsx
@@ -1,5 +1,5 @@
-import { useModalControlContext } from "@/ui/ModalContext"
-import { usePanelControlContext } from "@/ui/PanelContext"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
+import { usePanelControlContext } from "@/ui/helpers/UsePanelManager"
 import { useToastContext } from "@/ui/ToastContext"
 import { useEffect } from "react"
 import { setAddToast, setOpenModal, setOpenPanel } from "./GlobalUIControls"
diff --git a/fission/src/ui/components/MainHUD.tsx b/fission/src/ui/components/MainHUD.tsx
index 827c56b0d6..1e08c10d55 100644
--- a/fission/src/ui/components/MainHUD.tsx
+++ b/fission/src/ui/components/MainHUD.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react"
 import { FaXmark } from "react-icons/fa6"
-import { useModalControlContext } from "@/ui/ModalContext"
-import { usePanelControlContext } from "@/ui/PanelContext"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
+import { usePanelControlContext } from "@/ui/helpers/UsePanelManager"
 import { motion } from "framer-motion"
 import logo from "@/assets/autodesk_logo.png"
 import { useToastContext } from "@/ui/ToastContext"
diff --git a/fission/src/ui/components/Modal.tsx b/fission/src/ui/components/Modal.tsx
index a26798c493..8d9f445933 100644
--- a/fission/src/ui/components/Modal.tsx
+++ b/fission/src/ui/components/Modal.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react"
 import { ClickAwayListener } from "@mui/base/ClickAwayListener"
-import { useModalControlContext } from "@/ui/ModalContext"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
 import { SoundPlayer } from "@/systems/sound/SoundPlayer"
 import buttonPressSound from "@/assets/sound-files/ButtonPress.mp3"
 
diff --git a/fission/src/ui/components/Panel.tsx b/fission/src/ui/components/Panel.tsx
index adbfe0a441..34cf71ae40 100644
--- a/fission/src/ui/components/Panel.tsx
+++ b/fission/src/ui/components/Panel.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import { usePanelControlContext } from "@/ui/PanelContext"
+import { usePanelControlContext } from "@/ui/helpers/UsePanelManager"
 import { SoundPlayer } from "@/systems/sound/SoundPlayer"
 import buttonPressSound from "@/assets/sound-files/ButtonPress.mp3"
 
diff --git a/fission/src/ui/components/Skybox.tsx b/fission/src/ui/components/Skybox.tsx
index ae9407dcbb..17a49c8f66 100644
--- a/fission/src/ui/components/Skybox.tsx
+++ b/fission/src/ui/components/Skybox.tsx
@@ -1,5 +1,5 @@
 import World from "@/systems/World"
-import { useTheme } from "@/ui/ThemeContext"
+import { useTheme } from "@/ui/helpers/UseThemeHelpers"
 
 const Skybox = () => {
     const { currentTheme, themes } = useTheme()
diff --git a/fission/src/ui/components/StyledComponents.tsx b/fission/src/ui/components/StyledComponents.tsx
index a9576f0f6d..127e07107d 100644
--- a/fission/src/ui/components/StyledComponents.tsx
+++ b/fission/src/ui/components/StyledComponents.tsx
@@ -30,7 +30,7 @@ import {
     FaBug,
     FaAngleRight,
 } from "react-icons/fa6"
-import { colorNameToVar } from "../ThemeContext"
+import { colorNameToVar } from "../helpers/UseThemeHelpers"
 
 export class SynthesisIcons {
     /** Regular icons: used for panels, modals, and main hud buttons */
diff --git a/fission/src/ui/components/ToggleButtonGroup.tsx b/fission/src/ui/components/ToggleButtonGroup.tsx
index a87d1bdf83..7e96d69b63 100644
--- a/fission/src/ui/components/ToggleButtonGroup.tsx
+++ b/fission/src/ui/components/ToggleButtonGroup.tsx
@@ -1,6 +1,6 @@
 import { ToggleButton as ToggleButtonMUI, ToggleButtonGroup as ToggleButtonGroupMUI } from "@mui/material"
 import { styled } from "@mui/system"
-import { colorNameToVar } from "../ThemeContext"
+import { colorNameToVar } from "../helpers/UseThemeHelpers"
 
 export const ToggleButton = styled(ToggleButtonMUI)({
     "borderColor": "transparent",
diff --git a/fission/src/ui/helpers/UseModalManager.tsx b/fission/src/ui/helpers/UseModalManager.tsx
new file mode 100644
index 0000000000..b8833a978d
--- /dev/null
+++ b/fission/src/ui/helpers/UseModalManager.tsx
@@ -0,0 +1,98 @@
+import { useState, useEffect, useCallback, useContext, createContext, ReactElement, ReactNode } from "react"
+
+export type ModalInstance = {
+    id: string
+    component: ReactElement
+    onOpen?: () => void
+    onClose?: () => void
+}
+
+export type ModalControlContextType = {
+    openModal: (modalId: string, onOpen?: () => void, onClose?: () => void) => void
+    closeModal: () => void
+    children?: ReactNode
+}
+
+export const ModalControlContext = createContext<ModalControlContextType | null>(null)
+
+export const useModalManager = (modals: ReactElement[]) => {
+    const [modalDictionary, setModalDictionary] = useState<{
+        [key: string]: ModalInstance
+    }>({})
+    const [activeModalId, setActiveModalId] = useState<string | null>(null)
+
+    const openModal = useCallback(
+        (modalId: string, onOpen?: () => void, onClose?: () => void) => {
+            if (modalDictionary[modalId]) {
+                if (onOpen) {
+                    modalDictionary[modalId].onOpen = onOpen
+                    onOpen()
+                }
+                if (onClose) modalDictionary[modalId].onClose = onClose
+            }
+            setActiveModalId(modalId)
+        },
+        [modalDictionary]
+    )
+
+    const closeModal = useCallback(() => {
+        if (activeModalId) {
+            const inst = modalDictionary[activeModalId]
+            if (inst && inst.onClose) {
+                inst.onClose()
+            }
+        }
+        setActiveModalId(null)
+    }, [activeModalId, modalDictionary])
+
+    const registerModal = useCallback(
+        (modalId: string, modal: ModalInstance) => {
+            modalDictionary[modalId] = modal
+        },
+        [modalDictionary]
+    )
+
+    const unregisterModal = useCallback((modalId: string) => {
+        setModalDictionary(prevDictionary => {
+            const newDictionary = { ...prevDictionary }
+            delete newDictionary[modalId]
+            return newDictionary
+        })
+    }, [])
+
+    const getActiveModalElement = useCallback(() => {
+        if (activeModalId !== null) {
+            const modal = modalDictionary[activeModalId]
+            return modal ? modal.component : null
+        }
+        return null
+    }, [activeModalId, modalDictionary])
+
+    useEffect(() => {
+        modals.forEach(modalComponent => {
+            const id = modalComponent.props.modalId
+            registerModal(id, {
+                id: id,
+                component: modalComponent,
+                onOpen: () => {},
+                onClose: () => {},
+            })
+        })
+    }, [modals, closeModal, openModal, registerModal])
+
+    return {
+        modalDictionary,
+        activeModalId,
+        openModal,
+        closeModal,
+        registerModal,
+        unregisterModal,
+        getActiveModalElement,
+    }
+}
+
+export const useModalControlContext = () => {
+    const context = useContext(ModalControlContext)
+    if (!context) throw new Error("useModalControlContext must be used within a ModalControlProvider")
+    return context
+}
diff --git a/fission/src/ui/helpers/UsePanelManager.tsx b/fission/src/ui/helpers/UsePanelManager.tsx
new file mode 100644
index 0000000000..951b242f41
--- /dev/null
+++ b/fission/src/ui/helpers/UsePanelManager.tsx
@@ -0,0 +1,132 @@
+import { useState, useEffect, useCallback, useContext, createContext, ReactElement, ReactNode } from "react"
+
+export type PanelInstance = {
+    id: string
+    component: ReactElement
+    onOpen?: () => void
+    onClose?: () => void
+}
+
+export type PanelControlContextType = {
+    openPanel: (panelId: string) => void
+    closePanel: (panelId: string) => void
+    closeAllPanels: () => void
+    children?: ReactNode
+}
+
+export const PanelControlContext = createContext<PanelControlContextType | null>(null)
+
+export const usePanelManager = (panels: ReactElement[]) => {
+    const [panelDictionary, setPanelDictionary] = useState<{
+        [key: string]: PanelInstance
+    }>({})
+    const [activePanelIds, setActivePanelIds] = useState<string[]>([])
+
+    const openPanel = useCallback(
+        (panelId: string, onOpen?: () => void, onClose?: () => void) => {
+            setActivePanelIds(prevPanelIds => {
+                if (prevPanelIds.includes(panelId)) return prevPanelIds
+                if (panelDictionary[panelId]) {
+                    if (onOpen) {
+                        panelDictionary[panelId].onOpen = onOpen
+                        onOpen()
+                    }
+                    if (onClose) panelDictionary[panelId].onClose = onClose
+                }
+                return [...activePanelIds, panelId]
+            })
+        },
+        [activePanelIds, panelDictionary]
+    )
+
+    const closePanel = useCallback(
+        (panelId: string) => {
+            let inst = panelDictionary[panelId]
+            if (inst) {
+                if (inst.onClose) inst.onClose()
+                setActivePanelIds(activePanelIds.filter(i => i != panelId))
+            } else {
+                setActivePanelIds(
+                    activePanelIds.filter(i => {
+                        inst = panelDictionary[i]
+                        if (inst.component.props.name == panelId) {
+                            if (inst.onClose) inst.onClose()
+                            return false
+                        } else {
+                            return true
+                        }
+                    })
+                )
+            }
+        },
+        [activePanelIds, panelDictionary]
+    )
+
+    const closeAllPanels = useCallback(() => {
+        if (activePanelIds.length > 0) {
+            activePanelIds.forEach(id => {
+                const inst = panelDictionary[id]
+                if (inst && inst.onClose) {
+                    inst.onClose()
+                }
+            })
+        }
+        setActivePanelIds([])
+    }, [activePanelIds, panelDictionary])
+
+    const registerPanel = useCallback(
+        (panelId: string, panel: PanelInstance) => {
+            panelDictionary[panelId] = panel
+        },
+        [panelDictionary]
+    )
+
+    const unregisterPanel = useCallback((panelId: string) => {
+        setPanelDictionary(prevDictionary => {
+            const newDictionary = { ...prevDictionary }
+            delete newDictionary[panelId]
+            return newDictionary
+        })
+    }, [])
+
+    const getActivePanelElements = useCallback(() => {
+        if (activePanelIds !== null && activePanelIds.length > 0) {
+            return activePanelIds
+                .map((id: string) => {
+                    const panel: PanelInstance = panelDictionary[id]
+                    return panel ? panel.component : null
+                })
+                .filter(p => p != null)
+        }
+        return []
+    }, [activePanelIds, panelDictionary])
+
+    useEffect(() => {
+        panels.forEach(panelData => {
+            const id = panelData.props.panelId
+            registerPanel(id, {
+                id: id,
+                component: panelData,
+                onOpen: () => {},
+                onClose: () => {},
+            })
+        })
+    }, [panels, closePanel, openPanel, registerPanel])
+
+    return {
+        panelDictionary,
+        activePanelIds,
+        openPanel,
+        closePanel,
+        closeAllPanels,
+        registerPanel,
+        unregisterPanel,
+        getActivePanelElements,
+    }
+}
+
+export const usePanelControlContext = () => {
+    const context = useContext(PanelControlContext)
+    if (!context) throw new Error("usePanelControlContext must be used within a PanelControlProvider")
+    return context
+}
diff --git a/fission/src/ui/helpers/UseThemeHelpers.tsx b/fission/src/ui/helpers/UseThemeHelpers.tsx
new file mode 100644
index 0000000000..6985bde4bd
--- /dev/null
+++ b/fission/src/ui/helpers/UseThemeHelpers.tsx
@@ -0,0 +1,84 @@
+import { createContext, useContext } from "react"
+import { RgbaColor } from "react-colorful"
+
+export const defaultThemeName = "Default"
+export type ColorName =
+    | "InteractiveElementSolid"
+    | "InteractiveElementLeft"
+    | "InteractiveElementRight"
+    | "Background"
+    | "BackgroundSecondary"
+    | "InteractiveBackground"
+    | "BackgroundHUD"
+    | "InteractiveHover"
+    | "InteractiveSelect"
+    | "MainText"
+    | "Scrollbar"
+    | "AcceptButton"
+    | "CancelButton"
+    | "InteractiveElementText"
+    | "Icon"
+    | "MainHUDIcon"
+    | "MainHUDCloseIcon"
+    | "HighlightHover"
+    | "HighlightSelect"
+    | "SkyboxTop"
+    | "SkyboxBottom"
+    | "FloorGrid"
+    | "AcceptCancelButtonText"
+    | "MatchRedAlliance"
+    | "MatchBlueAlliance"
+    | "ToastInfo"
+    | "ToastWarning"
+    | "ToastError"
+
+export type ThemeContextType = {
+    themes: Themes
+    initialThemeName: string
+    defaultTheme: Theme
+    currentTheme: string
+    setTheme: (themeName: string) => void
+    updateColor: (themeName: string, colorName: ColorName, rgbaColor: RgbaColor) => void
+    createTheme: (themeName: string) => void
+    deleteTheme: (themeName: string) => void
+    deleteAllThemes: () => void
+    applyTheme: (themeName: string) => void
+}
+
+export const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+export const colorNameToTailwind = (colorName: ColorName) => {
+    return (
+        "bg" +
+        colorName
+            .replace(/([A-Z]+)/g, "-$1")
+            .replace(/(?<=[A-Z])([A-Z])(?![A-Z]|$)/g, "-$1")
+            .toLowerCase()
+    )
+}
+export const colorNameToProp = (colorName: ColorName) => {
+    return (
+        "-" +
+        colorName
+            .replace(/([A-Z]+)/g, "-$1")
+            .replace(/(?<=[A-Z])([A-Z])(?![A-Z]|$)/g, "-$1")
+            .toLowerCase()
+    )
+}
+
+export const colorNameToVar = (colorName: ColorName) => {
+    return `var(${colorNameToProp(colorName)})`
+}
+
+export type Theme = {
+    [name in ColorName]: { color: RgbaColor; above: (ColorName | string)[] }
+}
+export type Themes = { [name: string]: Theme }
+
+export const useTheme = () => {
+    const context = useContext(ThemeContext)
+    if (!context) {
+        throw new Error("useTheme must be used within a ThemeProvider!")
+    }
+    return context
+}
diff --git a/fission/src/ui/modals/MainMenuModal.tsx b/fission/src/ui/modals/MainMenuModal.tsx
index f95e70b1f9..5a3871bb5f 100644
--- a/fission/src/ui/modals/MainMenuModal.tsx
+++ b/fission/src/ui/modals/MainMenuModal.tsx
@@ -2,7 +2,7 @@ import React from "react"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
 import { SynthesisIcons } from "../components/StyledComponents"
 import Button from "@/components/Button.tsx"
-import { useModalControlContext } from "@/ui/ModalContext"
+import { useModalControlContext } from "../helpers/UseModalManager"
 import { Global_AddToast } from "@/components/GlobalUIControls.ts"
 
 const MainMenuModal: React.FC<ModalPropsImpl & { startSingleplayerCallback: () => void }> = ({
diff --git a/fission/src/ui/modals/MatchResultsModal.tsx b/fission/src/ui/modals/MatchResultsModal.tsx
index 133d007f2f..edc16a8845 100644
--- a/fission/src/ui/modals/MatchResultsModal.tsx
+++ b/fission/src/ui/modals/MatchResultsModal.tsx
@@ -4,7 +4,7 @@ import Stack, { StackDirection } from "@/components/Stack"
 import Label from "@/components/Label"
 import { SynthesisIcons, Spacer } from "../components/StyledComponents"
 import Button from "@/components/Button"
-import { useModalControlContext } from "@/ui/ModalContext"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
 import SimulationSystem from "@/systems/simulation/SimulationSystem"
 import MatchMode from "@/systems/MatchMode"
 import { styled } from "@mui/material"
diff --git a/fission/src/ui/modals/configuring/RoboRIOModal.tsx b/fission/src/ui/modals/configuring/RoboRIOModal.tsx
index b61ad04b14..1df86f4754 100644
--- a/fission/src/ui/modals/configuring/RoboRIOModal.tsx
+++ b/fission/src/ui/modals/configuring/RoboRIOModal.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
 import LabeledButton, { LabelPlacement } from "@/components/LabeledButton"
-import { useModalControlContext } from "@/ui/ModalContext"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
 import { SynthesisIcons } from "@/ui/components/StyledComponents"
 
 const RoboRIOModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
diff --git a/fission/src/ui/modals/configuring/SettingsModal.tsx b/fission/src/ui/modals/configuring/SettingsModal.tsx
index d815e78036..c1746de722 100644
--- a/fission/src/ui/modals/configuring/SettingsModal.tsx
+++ b/fission/src/ui/modals/configuring/SettingsModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react"
-import { useModalControlContext } from "@/ui/ModalContext"
-import { usePanelControlContext } from "@/ui/PanelContext"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
+import { usePanelControlContext } from "@/ui/helpers/UsePanelManager"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
 import Label, { LabelSize } from "@/components/Label"
 import Button from "@/components/Button"
diff --git a/fission/src/ui/modals/configuring/rio-config/RCConfigCANGroupModal.tsx b/fission/src/ui/modals/configuring/rio-config/RCConfigCANGroupModal.tsx
index bd9c27dc18..86b6c7662e 100644
--- a/fission/src/ui/modals/configuring/rio-config/RCConfigCANGroupModal.tsx
+++ b/fission/src/ui/modals/configuring/rio-config/RCConfigCANGroupModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
-import { useModalControlContext } from "@/ui/ModalContext"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
 import ScrollView from "@/components/ScrollView"
 import Stack, { StackDirection } from "@/components/Stack"
 import Checkbox from "@/components/Checkbox"
diff --git a/fission/src/ui/modals/configuring/rio-config/RCConfigEncoderModal.tsx b/fission/src/ui/modals/configuring/rio-config/RCConfigEncoderModal.tsx
index 223c1ba7c3..66b537c0a2 100644
--- a/fission/src/ui/modals/configuring/rio-config/RCConfigEncoderModal.tsx
+++ b/fission/src/ui/modals/configuring/rio-config/RCConfigEncoderModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
-import { useModalControlContext } from "@/ui/ModalContext"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
 import Label, { LabelSize } from "@/components/Label"
 import Input from "@/components/Input"
 import Dropdown from "@/components/Dropdown"
diff --git a/fission/src/ui/modals/configuring/rio-config/RCConfigPWMGroupModal.tsx b/fission/src/ui/modals/configuring/rio-config/RCConfigPWMGroupModal.tsx
index c6445cac5b..bf0777b9b4 100644
--- a/fission/src/ui/modals/configuring/rio-config/RCConfigPWMGroupModal.tsx
+++ b/fission/src/ui/modals/configuring/rio-config/RCConfigPWMGroupModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
-import { useModalControlContext } from "@/ui/ModalContext"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
 import ScrollView from "@/components/ScrollView"
 import Stack, { StackDirection } from "@/components/Stack"
 import Checkbox from "@/components/Checkbox"
diff --git a/fission/src/ui/modals/configuring/rio-config/RCCreateDeviceModal.tsx b/fission/src/ui/modals/configuring/rio-config/RCCreateDeviceModal.tsx
index 9f29d1eb90..ade6993873 100644
--- a/fission/src/ui/modals/configuring/rio-config/RCCreateDeviceModal.tsx
+++ b/fission/src/ui/modals/configuring/rio-config/RCCreateDeviceModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
-import { useModalControlContext } from "@/ui/ModalContext"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
 import Dropdown from "@/components/Dropdown"
 import WPILibBrain from "@/systems/simulation/wpilib_brain/WPILibBrain"
 import World from "@/systems/World"
diff --git a/fission/src/ui/modals/configuring/theme-editor/AssignNewSchemeModal.tsx b/fission/src/ui/modals/configuring/theme-editor/AssignNewSchemeModal.tsx
index 668590791b..76a50d50c0 100644
--- a/fission/src/ui/modals/configuring/theme-editor/AssignNewSchemeModal.tsx
+++ b/fission/src/ui/modals/configuring/theme-editor/AssignNewSchemeModal.tsx
@@ -5,7 +5,7 @@ import InputSchemeManager from "@/systems/input/InputSchemeManager"
 import InputSystem from "@/systems/input/InputSystem"
 import SynthesisBrain from "@/systems/simulation/synthesis_brain/SynthesisBrain"
 import { SynthesisIcons } from "@/ui/components/StyledComponents"
-import { usePanelControlContext } from "@/ui/PanelContext"
+import { usePanelControlContext } from "@/ui/helpers/UsePanelManager"
 import { setSelectedScheme } from "@/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureInputsInterface"
 import {
     setSelectedConfigurationType,
diff --git a/fission/src/ui/modals/configuring/theme-editor/DeleteAllThemesModal.tsx b/fission/src/ui/modals/configuring/theme-editor/DeleteAllThemesModal.tsx
index 5ca68f4a11..f3b877c325 100644
--- a/fission/src/ui/modals/configuring/theme-editor/DeleteAllThemesModal.tsx
+++ b/fission/src/ui/modals/configuring/theme-editor/DeleteAllThemesModal.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
-import { useModalControlContext } from "@/ui/ModalContext"
-import { useTheme } from "@/ui/ThemeContext"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
+import { useTheme } from "@/ui/helpers/UseThemeHelpers"
 import { SynthesisIcons } from "@/ui/components/StyledComponents"
 
 const DeleteAllThemesModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
diff --git a/fission/src/ui/modals/configuring/theme-editor/DeleteThemeModal.tsx b/fission/src/ui/modals/configuring/theme-editor/DeleteThemeModal.tsx
index 01d65dd6fb..8407da9db7 100644
--- a/fission/src/ui/modals/configuring/theme-editor/DeleteThemeModal.tsx
+++ b/fission/src/ui/modals/configuring/theme-editor/DeleteThemeModal.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
-import { useModalControlContext } from "@/ui/ModalContext"
-import { useTheme } from "@/ui/ThemeContext"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
+import { useTheme } from "@/ui/helpers/UseThemeHelpers"
 import { SynthesisIcons } from "@/ui/components/StyledComponents"
 
 const DeleteThemeModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
diff --git a/fission/src/ui/modals/configuring/theme-editor/NewInputSchemeModal.tsx b/fission/src/ui/modals/configuring/theme-editor/NewInputSchemeModal.tsx
index acbce6b5e2..f8db39f4cc 100644
--- a/fission/src/ui/modals/configuring/theme-editor/NewInputSchemeModal.tsx
+++ b/fission/src/ui/modals/configuring/theme-editor/NewInputSchemeModal.tsx
@@ -4,7 +4,7 @@ import Modal, { ModalPropsImpl } from "@/components/Modal"
 import InputSchemeManager from "@/systems/input/InputSchemeManager"
 import DefaultInputs from "@/systems/input/DefaultInputs"
 import { SynthesisIcons } from "@/ui/components/StyledComponents"
-import { usePanelControlContext } from "@/ui/PanelContext"
+import { usePanelControlContext } from "@/ui/helpers/UsePanelManager"
 import { setSelectedScheme } from "@/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureInputsInterface"
 import {
     ConfigurationType,
diff --git a/fission/src/ui/modals/configuring/theme-editor/NewThemeModal.tsx b/fission/src/ui/modals/configuring/theme-editor/NewThemeModal.tsx
index a7527833fa..f6022133be 100644
--- a/fission/src/ui/modals/configuring/theme-editor/NewThemeModal.tsx
+++ b/fission/src/ui/modals/configuring/theme-editor/NewThemeModal.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from "react"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
-import { useModalControlContext } from "@/ui/ModalContext"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
 import Input from "@/components/Input"
-import { useTheme } from "@/ui/ThemeContext"
+import { useTheme } from "@/ui/helpers/UseThemeHelpers"
 import { SynthesisIcons } from "@/ui/components/StyledComponents"
 
 const NewThemeModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
diff --git a/fission/src/ui/modals/configuring/theme-editor/ThemeEditorModal.tsx b/fission/src/ui/modals/configuring/theme-editor/ThemeEditorModal.tsx
index 342927892d..a4a3da1282 100644
--- a/fission/src/ui/modals/configuring/theme-editor/ThemeEditorModal.tsx
+++ b/fission/src/ui/modals/configuring/theme-editor/ThemeEditorModal.tsx
@@ -1,5 +1,6 @@
-import { useModalControlContext } from "@/ui/ModalContext"
-import { ColorName, Theme, useTheme } from "@/ui/ThemeContext"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
+import { useTheme } from "@/ui/helpers/UseThemeHelpers"
+import { ColorName, Theme } from "@/ui/helpers/UseThemeHelpers"
 import Button from "@/components/Button"
 import Dropdown from "@/components/Dropdown"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
diff --git a/fission/src/ui/modals/mirabuf/ImportLocalMirabufModal.tsx b/fission/src/ui/modals/mirabuf/ImportLocalMirabufModal.tsx
index cb61ca61fa..5eb7db9de8 100644
--- a/fission/src/ui/modals/mirabuf/ImportLocalMirabufModal.tsx
+++ b/fission/src/ui/modals/mirabuf/ImportLocalMirabufModal.tsx
@@ -8,7 +8,7 @@ import MirabufCachingService, { MiraType } from "@/mirabuf/MirabufLoader"
 import { CreateMirabuf } from "@/mirabuf/MirabufSceneObject"
 import { SynthesisIcons } from "@/ui/components/StyledComponents"
 import { ToggleButton, ToggleButtonGroup } from "@/ui/components/ToggleButtonGroup"
-import { usePanelControlContext } from "@/ui/PanelContext"
+import { usePanelControlContext } from "@/ui/helpers/UsePanelManager"
 import { PAUSE_REF_ASSEMBLY_SPAWNING } from "@/systems/physics/PhysicsSystem"
 import { Global_OpenPanel } from "@/ui/components/GlobalUIControls"
 import { SoundPlayer } from "@/systems/sound/SoundPlayer"
diff --git a/fission/src/ui/panels/DebugPanel.tsx b/fission/src/ui/panels/DebugPanel.tsx
index c65b432829..6bf821e743 100644
--- a/fission/src/ui/panels/DebugPanel.tsx
+++ b/fission/src/ui/panels/DebugPanel.tsx
@@ -10,12 +10,12 @@ import MirabufCachingService, {
     MiraType,
 } from "@/mirabuf/MirabufLoader"
 import { Box, styled } from "@mui/material"
-import { usePanelControlContext } from "../PanelContext"
+import { usePanelControlContext } from "../helpers/UsePanelManager"
 import APS from "@/aps/APS"
 import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 import JOLT from "@/util/loading/JoltSyncLoader"
 import Label from "../components/Label"
-import { colorNameToVar } from "../ThemeContext"
+import { colorNameToVar } from "../helpers/UseThemeHelpers"
 import { SynthesisIcons } from "../components/StyledComponents"
 import { Global_AddToast } from "../components/GlobalUIControls"
 import { JoltRVec3_JoltVec3 } from "@/util/TypeConversions"
diff --git a/fission/src/ui/panels/RobotSwitchPanel.tsx b/fission/src/ui/panels/RobotSwitchPanel.tsx
index 3d04595790..421169268b 100644
--- a/fission/src/ui/panels/RobotSwitchPanel.tsx
+++ b/fission/src/ui/panels/RobotSwitchPanel.tsx
@@ -3,7 +3,7 @@ import Label, { LabelSize } from "@/components/Label"
 import Panel, { PanelPropsImpl } from "@/components/Panel"
 import Stack, { StackDirection } from "@/components/Stack"
 import Button from "@/components/Button"
-import { useModalControlContext } from "@/ui/ModalContext"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
 import Checkbox from "@/components/Checkbox"
 import { SynthesisIcons } from "../components/StyledComponents"
 
diff --git a/fission/src/ui/panels/configuring/ChooseInputSchemePanel.tsx b/fission/src/ui/panels/configuring/ChooseInputSchemePanel.tsx
index ac57a4a67d..e2b4d8b753 100644
--- a/fission/src/ui/panels/configuring/ChooseInputSchemePanel.tsx
+++ b/fission/src/ui/panels/configuring/ChooseInputSchemePanel.tsx
@@ -3,8 +3,8 @@ import InputSchemeManager from "@/systems/input/InputSchemeManager"
 import InputSystem from "@/systems/input/InputSystem"
 import SynthesisBrain from "@/systems/simulation/synthesis_brain/SynthesisBrain"
 import { SynthesisIcons } from "@/ui/components/StyledComponents"
-import { useModalControlContext } from "@/ui/ModalContext"
-import { usePanelControlContext } from "@/ui/PanelContext"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
+import { usePanelControlContext } from "@/ui/helpers/UsePanelManager"
 import { useEffect, useMemo } from "react"
 import { ConfigurationType, setSelectedConfigurationType } from "./assembly-config/ConfigurationType"
 import { setSelectedScheme } from "./assembly-config/interfaces/inputs/ConfigureInputsInterface"
diff --git a/fission/src/ui/panels/configuring/assembly-config/ConfigurePanel.tsx b/fission/src/ui/panels/configuring/assembly-config/ConfigurePanel.tsx
index d5b2cca31d..d6d8987ea0 100644
--- a/fission/src/ui/panels/configuring/assembly-config/ConfigurePanel.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/ConfigurePanel.tsx
@@ -10,7 +10,7 @@ import ConfigureScoringZonesInterface from "./interfaces/scoring/ConfigureScorin
 import ChangeInputsInterface from "./interfaces/inputs/ConfigureInputsInterface"
 import InputSystem from "@/systems/input/InputSystem"
 import SynthesisBrain from "@/systems/simulation/synthesis_brain/SynthesisBrain"
-import { usePanelControlContext } from "@/ui/PanelContext"
+import { usePanelControlContext } from "@/ui/helpers/UsePanelManager"
 import Button from "@/ui/components/Button"
 import ConfigureSchemeInterface from "./interfaces/inputs/ConfigureSchemeInterface"
 import { SynthesisIcons } from "@/ui/components/StyledComponents"
diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/ConfigureGamepiecePickupInterface.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/ConfigureGamepiecePickupInterface.tsx
index ac32d444c3..4879eec57e 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/ConfigureGamepiecePickupInterface.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/ConfigureGamepiecePickupInterface.tsx
@@ -13,7 +13,7 @@ import {
     ReactRgbaColor_ThreeColor,
     ThreeMatrix4_Array,
 } from "@/util/TypeConversions"
-import { useTheme } from "@/ui/ThemeContext"
+import { useTheme } from "@/ui/helpers/UseThemeHelpers"
 import Button from "@/ui/components/Button"
 import { Spacer } from "@/ui/components/StyledComponents"
 import GizmoSceneObject from "@/systems/scene/GizmoSceneObject"
diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/ConfigureShotTrajectoryInterface.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/ConfigureShotTrajectoryInterface.tsx
index 260fb92713..ed915eaf7a 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/ConfigureShotTrajectoryInterface.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/ConfigureShotTrajectoryInterface.tsx
@@ -12,7 +12,7 @@ import {
     ReactRgbaColor_ThreeColor,
     ThreeMatrix4_Array,
 } from "@/util/TypeConversions"
-import { useTheme } from "@/ui/ThemeContext"
+import { useTheme } from "@/ui/helpers/UseThemeHelpers"
 import { RigidNodeId } from "@/mirabuf/MirabufParser"
 import { ConfigurationSavedEvent } from "../ConfigurationSavedEvent"
 import Button from "@/ui/components/Button"
diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/SimulationInterface.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/SimulationInterface.tsx
index b122bfe8e0..81b78a3a1f 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/SimulationInterface.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/SimulationInterface.tsx
@@ -2,7 +2,7 @@ import MirabufSceneObject, { setSpotlightAssembly } from "@/mirabuf/MirabufScene
 import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 import Button from "@/ui/components/Button"
 import Checkbox from "@/ui/components/Checkbox"
-import { usePanelControlContext } from "@/ui/PanelContext"
+import { usePanelControlContext } from "@/ui/helpers/UsePanelManager"
 import { useState } from "react"
 
 type SimulationInterfaceProps = {
diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureInputsInterface.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureInputsInterface.tsx
index fff7468536..aae4ccb8d8 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureInputsInterface.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureInputsInterface.tsx
@@ -6,7 +6,7 @@ import InputSchemeManager, { InputScheme } from "@/systems/input/InputSchemeMana
 import SynthesisBrain from "@/systems/simulation/synthesis_brain/SynthesisBrain"
 import ConfigureSchemeInterface from "./ConfigureSchemeInterface"
 import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
-import { useModalControlContext } from "@/ui/ModalContext"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
 
 let selectedScheme: InputScheme | undefined = undefined
 // eslint-disable-next-line react-refresh/only-export-components
diff --git a/fission/src/ui/panels/configuring/initial-config/InitialConfigPanel.tsx b/fission/src/ui/panels/configuring/initial-config/InitialConfigPanel.tsx
index 6d281f51a5..ff5575d851 100644
--- a/fission/src/ui/panels/configuring/initial-config/InitialConfigPanel.tsx
+++ b/fission/src/ui/panels/configuring/initial-config/InitialConfigPanel.tsx
@@ -3,8 +3,8 @@ import InputSchemeManager from "@/systems/input/InputSchemeManager"
 import InputSystem from "@/systems/input/InputSystem"
 import SynthesisBrain from "@/systems/simulation/synthesis_brain/SynthesisBrain"
 import { SynthesisIcons } from "@/ui/components/StyledComponents"
-import { useModalControlContext } from "@/ui/ModalContext"
-import { usePanelControlContext } from "@/ui/PanelContext"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
+import { usePanelControlContext } from "@/ui/helpers/UsePanelManager"
 import { useCallback, useEffect, useMemo } from "react"
 import { ConfigurationType, setSelectedConfigurationType } from "../assembly-config/ConfigurationType"
 import { setSelectedScheme } from "../assembly-config/interfaces/inputs/ConfigureInputsInterface"
diff --git a/fission/src/ui/panels/information/ScoreboardPanel.tsx b/fission/src/ui/panels/information/ScoreboardPanel.tsx
index f7f7604cde..36c4375c72 100644
--- a/fission/src/ui/panels/information/ScoreboardPanel.tsx
+++ b/fission/src/ui/panels/information/ScoreboardPanel.tsx
@@ -3,7 +3,7 @@ import Label, { LabelSize } from "@/components/Label"
 import Panel, { PanelPropsImpl } from "@/components/Panel"
 import Stack, { StackDirection } from "@/components/Stack"
 import { OnScoreChangedEvent } from "@/mirabuf/ScoringZoneSceneObject"
-import { usePanelControlContext } from "@/ui/PanelContext"
+import { usePanelControlContext } from "@/ui/helpers/UsePanelManager"
 import PreferencesSystem, { PreferenceEvent } from "@/systems/preferences/PreferencesSystem"
 import SimulationSystem from "@/systems/simulation/SimulationSystem"
 import MatchMode, { UpdateTimeLeft, MatchModeType } from "@/systems/MatchMode"
diff --git a/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx b/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx
index d78e3de71a..73b72b6181 100644
--- a/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx
+++ b/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx
@@ -21,8 +21,8 @@ import { useTooltipControlContext } from "@/ui/TooltipContext"
 import { CreateMirabuf } from "@/mirabuf/MirabufSceneObject"
 import { Box } from "@mui/material"
 import { ToggleButton, ToggleButtonGroup } from "@/ui/components/ToggleButtonGroup"
-import { usePanelControlContext } from "@/ui/PanelContext"
-import { useModalControlContext } from "@/ui/ModalContext"
+import { usePanelControlContext } from "@/ui/helpers/UsePanelManager"
+import { useModalControlContext } from "@/ui/helpers/UseModalManager"
 import TaskStatus from "@/util/TaskStatus"
 import {
     DeleteButton,
diff --git a/fission/src/ui/panels/simulation/AutoTestPanel.tsx b/fission/src/ui/panels/simulation/AutoTestPanel.tsx
index 942826f09e..3a17f7ac34 100644
--- a/fission/src/ui/panels/simulation/AutoTestPanel.tsx
+++ b/fission/src/ui/panels/simulation/AutoTestPanel.tsx
@@ -5,7 +5,7 @@ import TransformGizmoControl from "@/ui/components/TransformGizmoControl"
 import MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
 import World from "@/systems/World"
 import { ToggleButton, ToggleButtonGroup } from "@/ui/components/ToggleButtonGroup"
-import { usePanelControlContext } from "@/ui/PanelContext"
+import { usePanelControlContext } from "@/ui/helpers/UsePanelManager"
 import Label from "@/ui/components/Label"
 import Button from "@/ui/components/Button"
 import Jolt from "@azaleacolburn/jolt-physics"
diff --git a/fission/src/ui/panels/simulation/WiringPanel.tsx b/fission/src/ui/panels/simulation/WiringPanel.tsx
index 37fa01fc6b..e86f98d329 100644
--- a/fission/src/ui/panels/simulation/WiringPanel.tsx
+++ b/fission/src/ui/panels/simulation/WiringPanel.tsx
@@ -29,7 +29,7 @@ import Checkbox from "@/ui/components/Checkbox"
 import MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
 import World from "@/systems/World"
 import Button from "@/ui/components/Button"
-import { usePanelControlContext } from "@/ui/PanelContext"
+import { usePanelControlContext } from "@/ui/helpers/UsePanelManager"
 import { Global_AddToast } from "@/ui/components/GlobalUIControls"
 import { SimConfigData } from "./SimConfigShared"
 import FlowControls from "./FlowControls"