diff --git a/fission/src/Synthesis.tsx b/fission/src/Synthesis.tsx
index b681af182b..261efc1615 100644
--- a/fission/src/Synthesis.tsx
+++ b/fission/src/Synthesis.tsx
@@ -1,58 +1,58 @@
-import Scene from "./components/Scene.tsx"
-import MirabufSceneObject from "./mirabuf/MirabufSceneObject.ts"
-import { LoadMirabufRemote } from "./mirabuf/MirabufLoader.ts"
-import { mirabuf } from "./proto/mirabuf"
-import MirabufParser, { ParseErrorSeverity } from "./mirabuf/MirabufParser.ts"
-import MirabufInstance from "./mirabuf/MirabufInstance.ts"
+import Scene from '@/components/Scene.tsx';
+import MirabufSceneObject from './mirabuf/MirabufSceneObject.ts';
+import { LoadMirabufRemote } from './mirabuf/MirabufLoader.ts';
+import { mirabuf } from './proto/mirabuf';
+import MirabufParser, { ParseErrorSeverity } from './mirabuf/MirabufParser.ts';
+import MirabufInstance from './mirabuf/MirabufInstance.ts';
 import { AnimatePresence } from "framer-motion"
 import { ReactElement, useEffect } from "react"
-import { ModalControlProvider, useModalManager } from "./ModalContext"
-import { PanelControlProvider, usePanelManager } from "./PanelContext"
-import { useTheme } from "./ThemeContext"
-import { ToastContainer, ToastProvider } from "./ToastContext"
+import { ModalControlProvider, useModalManager } from "@/ui/ModalContext"
+import { PanelControlProvider, usePanelManager } from "@/ui/PanelContext"
+import { useTheme } from "@/ui/ThemeContext"
+import { ToastContainer, ToastProvider } from "@/ui/ToastContext"
 import {
     TOOLTIP_DURATION,
     TooltipControl,
     TooltipControlProvider,
     TooltipType,
     useTooltipManager,
-} from "./TooltipContext"
-import MainHUD from "./components/MainHUD"
-import DownloadAssetsModal from "./modals/DownloadAssetsModal"
-import ExitSynthesisModal from "./modals/ExitSynthesisModal"
-import MatchResultsModal from "./modals/MatchResultsModal"
-import UpdateAvailableModal from "./modals/UpdateAvailableModal"
-import ViewModal from "./modals/ViewModal"
-import ConnectToMultiplayerModal from "./modals/aether/ConnectToMultiplayerModal"
-import ServerHostingModal from "./modals/aether/ServerHostingModal"
-import ChangeInputsModal from "./modals/configuring/ChangeInputsModal"
-import ChooseMultiplayerModeModal from "./modals/configuring/ChooseMultiplayerModeModal"
-import ChooseSingleplayerModeModal from "./modals/configuring/ChooseSingleplayerModeModal"
-import ConfigMotorModal from "./modals/configuring/ConfigMotorModal"
-import DrivetrainModal from "./modals/configuring/DrivetrainModal"
-import PracticeSettingsModal from "./modals/configuring/PracticeSettingsModal"
-import RoboRIOModal from "./modals/configuring/RoboRIOModal"
-import SettingsModal from "./modals/configuring/SettingsModal"
-import RCConfigEncoderModal from "./modals/configuring/rio-config/RCConfigEncoderModal"
-import RCConfigPwmGroupModal from "./modals/configuring/rio-config/RCConfigPwmGroupModal"
-import RCCreateDeviceModal from "./modals/configuring/rio-config/RCCreateDeviceModal"
-import DeleteAllThemesModal from "./modals/configuring/theme-editor/DeleteAllThemesModal"
-import DeleteThemeModal from "./modals/configuring/theme-editor/DeleteThemeModal"
-import NewThemeModal from "./modals/configuring/theme-editor/NewThemeModal"
-import ThemeEditorModal from "./modals/configuring/theme-editor/ThemeEditorModal"
-import MatchModeModal from "./modals/spawning/MatchModeModal"
-import RobotSwitchPanel from "./panels/RobotSwitchPanel"
-import SpawnLocationsPanel from "./panels/SpawnLocationPanel"
-import ConfigureGamepiecePickupPanel from "./panels/configuring/ConfigureGamepiecePickupPanel"
-import ConfigureShotTrajectoryPanel from "./panels/configuring/ConfigureShotTrajectoryPanel"
-import ScoringZonesPanel from "./panels/configuring/scoring/ScoringZonesPanel"
-import ZoneConfigPanel from "./panels/configuring/scoring/ZoneConfigPanel"
-import ScoreboardPanel from "./panels/information/ScoreboardPanel"
-import DriverStationPanel from "./panels/simulation/DriverStationPanel"
-import ManageAssembliesModal from "./modals/spawning/ManageAssembliesModal.tsx"
-import World from "./systems/World.ts"
-import { AddRobotsModal, AddFieldsModal, SpawningModal } from "./modals/spawning/SpawningModals.tsx"
-import ImportMirabufModal from "./modals/mirabuf/ImportMirabufModal.tsx"
+} from "@/ui/TooltipContext"
+import MainHUD from "@/components/MainHUD"
+import DownloadAssetsModal from "@/modals/DownloadAssetsModal"
+import ExitSynthesisModal from "@/modals/ExitSynthesisModal"
+import MatchResultsModal from "@/modals/MatchResultsModal"
+import UpdateAvailableModal from "@/modals/UpdateAvailableModal"
+import ViewModal from "@/modals/ViewModal"
+import ConnectToMultiplayerModal from "@/modals/aether/ConnectToMultiplayerModal"
+import ServerHostingModal from "@/modals/aether/ServerHostingModal"
+import ChangeInputsModal from "@/modals/configuring/ChangeInputsModal"
+import ChooseMultiplayerModeModal from "@/modals/configuring/ChooseMultiplayerModeModal"
+import ChooseSingleplayerModeModal from "@/modals/configuring/ChooseSingleplayerModeModal"
+import ConfigMotorModal from "@/modals/configuring/ConfigMotorModal"
+import DrivetrainModal from "@/modals/configuring/DrivetrainModal"
+import PracticeSettingsModal from "@/modals/configuring/PracticeSettingsModal"
+import RoboRIOModal from "@/modals/configuring/RoboRIOModal"
+import SettingsModal from "@/modals/configuring/SettingsModal"
+import RCConfigEncoderModal from "@/modals/configuring/rio-config/RCConfigEncoderModal"
+import RCConfigPwmGroupModal from "@/modals/configuring/rio-config/RCConfigPwmGroupModal"
+import RCCreateDeviceModal from "@/modals/configuring/rio-config/RCCreateDeviceModal"
+import DeleteAllThemesModal from "@/modals/configuring/theme-editor/DeleteAllThemesModal"
+import DeleteThemeModal from "@/modals/configuring/theme-editor/DeleteThemeModal"
+import NewThemeModal from "@/modals/configuring/theme-editor/NewThemeModal"
+import ThemeEditorModal from "@/modals/configuring/theme-editor/ThemeEditorModal"
+import MatchModeModal from "@/modals/spawning/MatchModeModal"
+import RobotSwitchPanel from "@/panels/RobotSwitchPanel"
+import SpawnLocationsPanel from "@/panels/SpawnLocationPanel"
+import ConfigureGamepiecePickupPanel from "@/panels/configuring/ConfigureGamepiecePickupPanel"
+import ConfigureShotTrajectoryPanel from "@/panels/configuring/ConfigureShotTrajectoryPanel"
+import ScoringZonesPanel from "@/panels/configuring/scoring/ScoringZonesPanel"
+import ZoneConfigPanel from "@/panels/configuring/scoring/ZoneConfigPanel"
+import ScoreboardPanel from "@/panels/information/ScoreboardPanel"
+import DriverStationPanel from "@/panels/simulation/DriverStationPanel"
+import ManageAssembliesModal from '@/modals/spawning/ManageAssembliesModal.tsx';
+import World from '@/systems/World.ts';
+import { AddRobotsModal, AddFieldsModal, SpawningModal } from '@/modals/spawning/SpawningModals.tsx';
+import ImportMirabufModal from '@/modals/mirabuf/ImportMirabufModal.tsx';
 
 const DEFAULT_MIRA_PATH = "/api/mira/Robots/Team 2471 (2018)_v7.mira"
 
diff --git a/fission/src/main.tsx b/fission/src/main.tsx
index cf37825a15..df3510831d 100644
--- a/fission/src/main.tsx
+++ b/fission/src/main.tsx
@@ -1,5 +1,5 @@
 import ReactDOM from "react-dom/client"
-import { Theme, ThemeProvider } from "./ThemeContext"
+import { Theme, ThemeProvider } from "@/ui/ThemeContext"
 import Synthesis from "./Synthesis"
 import "./index.css"
 
diff --git a/fission/src/ModalContext.tsx b/fission/src/ui/ModalContext.tsx
similarity index 100%
rename from fission/src/ModalContext.tsx
rename to fission/src/ui/ModalContext.tsx
diff --git a/fission/src/PanelContext.tsx b/fission/src/ui/PanelContext.tsx
similarity index 100%
rename from fission/src/PanelContext.tsx
rename to fission/src/ui/PanelContext.tsx
diff --git a/fission/src/ThemeContext.tsx b/fission/src/ui/ThemeContext.tsx
similarity index 99%
rename from fission/src/ThemeContext.tsx
rename to fission/src/ui/ThemeContext.tsx
index 4d4d209662..ef33d33fac 100644
--- a/fission/src/ThemeContext.tsx
+++ b/fission/src/ui/ThemeContext.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode, createContext, useContext, useState } from "react"
 import { RgbaColor } from "react-colorful"
-import { addGlobalFunc } from "./util/dom"
+import { addGlobalFunc } from "@/util/dom"
 
 export const defaultThemeName = "Default"
 export type ColorName =
diff --git a/fission/src/ToastContext.tsx b/fission/src/ui/ToastContext.tsx
similarity index 95%
rename from fission/src/ToastContext.tsx
rename to fission/src/ui/ToastContext.tsx
index 8964ba2d30..2730f7001f 100644
--- a/fission/src/ToastContext.tsx
+++ b/fission/src/ui/ToastContext.tsx
@@ -1,5 +1,11 @@
-import React, { createContext, useState, useContext, useCallback, ReactNode } from "react"
-import Toast from "./components/Toast"
+import React, {
+    createContext,
+    useState,
+    useContext,
+    useCallback,
+    ReactNode,
+} from "react"
+import Toast from "@/components/Toast"
 import { AnimatePresence, motion } from "framer-motion"
 
 export type ToastType = "info" | "warning" | "error"
diff --git a/fission/src/TooltipContext.tsx b/fission/src/ui/TooltipContext.tsx
similarity index 100%
rename from fission/src/TooltipContext.tsx
rename to fission/src/ui/TooltipContext.tsx
diff --git a/fission/src/components/Button.tsx b/fission/src/ui/components/Button.tsx
similarity index 100%
rename from fission/src/components/Button.tsx
rename to fission/src/ui/components/Button.tsx
diff --git a/fission/src/components/Checkbox.tsx b/fission/src/ui/components/Checkbox.tsx
similarity index 100%
rename from fission/src/components/Checkbox.tsx
rename to fission/src/ui/components/Checkbox.tsx
diff --git a/fission/src/components/Container.tsx b/fission/src/ui/components/Container.tsx
similarity index 100%
rename from fission/src/components/Container.tsx
rename to fission/src/ui/components/Container.tsx
diff --git a/fission/src/components/Dropdown.tsx b/fission/src/ui/components/Dropdown.tsx
similarity index 100%
rename from fission/src/components/Dropdown.tsx
rename to fission/src/ui/components/Dropdown.tsx
diff --git a/fission/src/components/Input.tsx b/fission/src/ui/components/Input.tsx
similarity index 100%
rename from fission/src/components/Input.tsx
rename to fission/src/ui/components/Input.tsx
diff --git a/fission/src/components/Label.tsx b/fission/src/ui/components/Label.tsx
similarity index 100%
rename from fission/src/components/Label.tsx
rename to fission/src/ui/components/Label.tsx
diff --git a/fission/src/components/LabeledButton.tsx b/fission/src/ui/components/LabeledButton.tsx
similarity index 100%
rename from fission/src/components/LabeledButton.tsx
rename to fission/src/ui/components/LabeledButton.tsx
diff --git a/fission/src/components/MainHUD.tsx b/fission/src/ui/components/MainHUD.tsx
similarity index 96%
rename from fission/src/components/MainHUD.tsx
rename to fission/src/ui/components/MainHUD.tsx
index 03f98b4c5a..427381549b 100644
--- a/fission/src/components/MainHUD.tsx
+++ b/fission/src/ui/components/MainHUD.tsx
@@ -6,11 +6,11 @@ import { GrFormClose } from "react-icons/gr"
 import { GiSteeringWheel } from "react-icons/gi"
 import { HiDownload } from "react-icons/hi"
 import { IoGameControllerOutline, IoPeople } from "react-icons/io5"
-import { useModalControlContext } from "../ModalContext"
-import { usePanelControlContext } from "../PanelContext"
+import { useModalControlContext } from "@/ui/ModalContext"
+import { usePanelControlContext } from "@/ui/PanelContext"
 import { motion } from "framer-motion"
-import logo from "../assets/autodesk_logo.png"
-import { ToastType, useToastContext } from "../ToastContext"
+import logo from "@/assets/autodesk_logo.png"
+import { ToastType, useToastContext } from "@/ui/ToastContext"
 import { Random } from "@/util/Random"
 import APS, { APS_USER_INFO_UPDATE_EVENT } from "@/aps/APS"
 import { UserIcon } from "./UserIcon"
diff --git a/fission/src/components/Modal.tsx b/fission/src/ui/components/Modal.tsx
similarity index 98%
rename from fission/src/components/Modal.tsx
rename to fission/src/ui/components/Modal.tsx
index ca2d1cfa02..eb43879fc2 100644
--- a/fission/src/components/Modal.tsx
+++ b/fission/src/ui/components/Modal.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react"
-import { useModalControlContext } from "../ModalContext"
 import { ClickAwayListener } from "@mui/base/ClickAwayListener"
+import { useModalControlContext } from "@/ui/ModalContext"
 
 export type ModalPropsImpl = {
     modalId: string
diff --git a/fission/src/components/NumberInput.tsx b/fission/src/ui/components/NumberInput.tsx
similarity index 100%
rename from fission/src/components/NumberInput.tsx
rename to fission/src/ui/components/NumberInput.tsx
diff --git a/fission/src/components/Panel.tsx b/fission/src/ui/components/Panel.tsx
similarity index 99%
rename from fission/src/components/Panel.tsx
rename to fission/src/ui/components/Panel.tsx
index ad8b34e5fe..bf0703ffce 100644
--- a/fission/src/components/Panel.tsx
+++ b/fission/src/ui/components/Panel.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import { usePanelControlContext } from "../PanelContext"
+import { usePanelControlContext } from "@/ui/PanelContext"
 
 export type OpenLocation =
     | "top-left"
diff --git a/fission/src/components/Radio.tsx b/fission/src/ui/components/Radio.tsx
similarity index 100%
rename from fission/src/components/Radio.tsx
rename to fission/src/ui/components/Radio.tsx
diff --git a/fission/src/components/Scene.css b/fission/src/ui/components/Scene.css
similarity index 100%
rename from fission/src/components/Scene.css
rename to fission/src/ui/components/Scene.css
diff --git a/fission/src/components/Scene.tsx b/fission/src/ui/components/Scene.tsx
similarity index 85%
rename from fission/src/components/Scene.tsx
rename to fission/src/ui/components/Scene.tsx
index 005cc120a2..aadbf3137b 100644
--- a/fission/src/components/Scene.tsx
+++ b/fission/src/ui/components/Scene.tsx
@@ -1,9 +1,9 @@
-import "./Scene.css"
-import { useEffect, useRef } from "react"
-import Stats from "stats.js"
-import { OrbitControls } from "three/addons/controls/OrbitControls.js"
-import SceneObject from "../systems/scene/SceneObject"
-import World from "@/systems/World"
+import './Scene.css';
+import { useEffect, useRef } from "react";
+import Stats from 'stats.js';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import SceneObject from "@/systems/scene/SceneObject";
+import World from '@/systems/World';
 
 let stats: Stats | null
 
@@ -64,4 +64,4 @@ function Scene({ useStats }: SceneProps) {
     )
 }
 
-export default Scene
+export default Scene;
diff --git a/fission/src/components/ScrollView.tsx b/fission/src/ui/components/ScrollView.tsx
similarity index 100%
rename from fission/src/components/ScrollView.tsx
rename to fission/src/ui/components/ScrollView.tsx
diff --git a/fission/src/components/SelectButton.tsx b/fission/src/ui/components/SelectButton.tsx
similarity index 100%
rename from fission/src/components/SelectButton.tsx
rename to fission/src/ui/components/SelectButton.tsx
diff --git a/fission/src/components/Slider.tsx b/fission/src/ui/components/Slider.tsx
similarity index 100%
rename from fission/src/components/Slider.tsx
rename to fission/src/ui/components/Slider.tsx
diff --git a/fission/src/components/Stack.tsx b/fission/src/ui/components/Stack.tsx
similarity index 100%
rename from fission/src/components/Stack.tsx
rename to fission/src/ui/components/Stack.tsx
diff --git a/fission/src/components/Toast.tsx b/fission/src/ui/components/Toast.tsx
similarity index 97%
rename from fission/src/components/Toast.tsx
rename to fission/src/ui/components/Toast.tsx
index d53cff6b88..3918463197 100644
--- a/fission/src/components/Toast.tsx
+++ b/fission/src/ui/components/Toast.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement, useEffect } from "react"
-import { ToastData, useToastContext } from "../ToastContext"
+import { ToastData, useToastContext } from "@/ui/ToastContext"
 import { GrFormClose } from "react-icons/gr"
 import { BsFillWrenchAdjustableCircleFill } from "react-icons/bs"
 import { AiFillWarning } from "react-icons/ai"
diff --git a/fission/src/components/Tooltip.tsx b/fission/src/ui/components/Tooltip.tsx
similarity index 95%
rename from fission/src/components/Tooltip.tsx
rename to fission/src/ui/components/Tooltip.tsx
index 6caefcde7d..4c8ecdbeb3 100644
--- a/fission/src/components/Tooltip.tsx
+++ b/fission/src/ui/components/Tooltip.tsx
@@ -1,4 +1,4 @@
-import { TooltipControl, TooltipType } from "@/TooltipContext"
+import { TooltipControl, TooltipType } from "@/ui/TooltipContext"
 import { FaInfoCircle } from "react-icons/fa"
 import Label, { LabelSize } from "./Label"
 import Stack, { StackDirection } from "./Stack"
diff --git a/fission/src/components/UserIcon.tsx b/fission/src/ui/components/UserIcon.tsx
similarity index 100%
rename from fission/src/components/UserIcon.tsx
rename to fission/src/ui/components/UserIcon.tsx
diff --git a/fission/src/modals/DownloadAssetsModal.tsx b/fission/src/ui/modals/DownloadAssetsModal.tsx
similarity index 86%
rename from fission/src/modals/DownloadAssetsModal.tsx
rename to fission/src/ui/modals/DownloadAssetsModal.tsx
index 81c7632f5b..875857c5ef 100644
--- a/fission/src/modals/DownloadAssetsModal.tsx
+++ b/fission/src/ui/modals/DownloadAssetsModal.tsx
@@ -1,8 +1,8 @@
 import React from "react"
-import Modal, { ModalPropsImpl } from "../components/Modal"
-import Stack, { StackDirection } from "../components/Stack"
-import Label, { LabelSize } from "../components/Label"
-import LabeledButton, { LabelPlacement } from "../components/LabeledButton"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
+import Stack, { StackDirection } from "@/components/Stack"
+import Label, { LabelSize } from "@/components/Label"
+import LabeledButton, { LabelPlacement } from "@/components/LabeledButton"
 import { HiDownload } from "react-icons/hi"
 
 const DownloadAssetsModal: React.FC<ModalPropsImpl> = ({ modalId }) => (
diff --git a/fission/src/modals/ExitSynthesisModal.tsx b/fission/src/ui/modals/ExitSynthesisModal.tsx
similarity index 83%
rename from fission/src/modals/ExitSynthesisModal.tsx
rename to fission/src/ui/modals/ExitSynthesisModal.tsx
index 86079c0a77..1014e7a442 100644
--- a/fission/src/modals/ExitSynthesisModal.tsx
+++ b/fission/src/ui/modals/ExitSynthesisModal.tsx
@@ -1,7 +1,7 @@
 import React from "react"
-import Modal, { ModalPropsImpl } from "../components/Modal"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
 import { GrFormClose } from "react-icons/gr"
-import Label from "../components/Label"
+import Label from "@/components/Label"
 
 const ExitSynthesisModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     const isOnMainMenu = false
diff --git a/fission/src/modals/MatchResultsModal.tsx b/fission/src/ui/modals/MatchResultsModal.tsx
similarity index 85%
rename from fission/src/modals/MatchResultsModal.tsx
rename to fission/src/ui/modals/MatchResultsModal.tsx
index 8d719b294e..3fc1c9cf1b 100644
--- a/fission/src/modals/MatchResultsModal.tsx
+++ b/fission/src/ui/modals/MatchResultsModal.tsx
@@ -1,8 +1,8 @@
 import React from "react"
-import Modal, { ModalPropsImpl } from "../components/Modal"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
 import { GrFormClose } from "react-icons/gr"
-import Stack, { StackDirection } from "../components/Stack"
-import Label from "../components/Label"
+import Stack, { StackDirection } from "@/components/Stack"
+import Label from "@/components/Label"
 
 type Entry = {
     name: string
diff --git a/fission/src/modals/UpdateAvailableModal.tsx b/fission/src/ui/modals/UpdateAvailableModal.tsx
similarity index 81%
rename from fission/src/modals/UpdateAvailableModal.tsx
rename to fission/src/ui/modals/UpdateAvailableModal.tsx
index e2913bc7a7..6cbeb3cd27 100644
--- a/fission/src/modals/UpdateAvailableModal.tsx
+++ b/fission/src/ui/modals/UpdateAvailableModal.tsx
@@ -1,7 +1,7 @@
 import React from "react"
-import Modal, { ModalPropsImpl } from "../components/Modal"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
 import { GrFormClose } from "react-icons/gr"
-import Label from "../components/Label"
+import Label from "@/components/Label"
 
 const UpdateAvailableModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     return (
diff --git a/fission/src/modals/ViewModal.tsx b/fission/src/ui/modals/ViewModal.tsx
similarity index 89%
rename from fission/src/modals/ViewModal.tsx
rename to fission/src/ui/modals/ViewModal.tsx
index 420b9cd146..957c996b37 100644
--- a/fission/src/modals/ViewModal.tsx
+++ b/fission/src/ui/modals/ViewModal.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from "react"
-import Modal, { ModalPropsImpl } from "../components/Modal"
-import Dropdown from "../components/Dropdown"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
+import Dropdown from "@/components/Dropdown"
 import { FaMagnifyingGlass } from "react-icons/fa6"
-import { TooltipControl, useTooltipControlContext } from "@/TooltipContext"
+import { TooltipControl, useTooltipControlContext } from "@/ui/TooltipContext"
 
 type ViewType = "Orbit" | "Freecam" | "Overview" | "Driver Station"
 
diff --git a/fission/src/modals/aether/ConnectToMultiplayerModal.tsx b/fission/src/ui/modals/aether/ConnectToMultiplayerModal.tsx
similarity index 78%
rename from fission/src/modals/aether/ConnectToMultiplayerModal.tsx
rename to fission/src/ui/modals/aether/ConnectToMultiplayerModal.tsx
index 644aa10fc7..51f037ac93 100644
--- a/fission/src/modals/aether/ConnectToMultiplayerModal.tsx
+++ b/fission/src/ui/modals/aether/ConnectToMultiplayerModal.tsx
@@ -1,10 +1,10 @@
 import React from "react"
-import Modal, { ModalPropsImpl } from "../../components/Modal"
-import Button from "../../components/Button"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
+import Button from "@/components/Button"
 import { FaGear } from "react-icons/fa6"
-import Stack, { StackDirection } from "../../components/Stack"
-import Dropdown from "../../components/Dropdown"
-import Label from "../../components/Label"
+import Stack, { StackDirection } from "@/components/Stack"
+import Dropdown from "@/components/Dropdown"
+import Label from "@/components/Label"
 
 const ConnectToMultiplayerModal: React.FC<ModalPropsImpl> = ({ modalId }) => (
     <Modal
diff --git a/fission/src/modals/aether/ServerHostingModal.tsx b/fission/src/ui/modals/aether/ServerHostingModal.tsx
similarity index 87%
rename from fission/src/modals/aether/ServerHostingModal.tsx
rename to fission/src/ui/modals/aether/ServerHostingModal.tsx
index eac9175a29..7445bb8f45 100644
--- a/fission/src/modals/aether/ServerHostingModal.tsx
+++ b/fission/src/ui/modals/aether/ServerHostingModal.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react"
-import Modal, { ModalPropsImpl } from "../../components/Modal"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
 import { FaPlus } from "react-icons/fa6"
-import Label from "../../components/Label"
-import Stack, { StackDirection } from "../../components/Stack"
+import Label from "@/components/Label"
+import Stack, { StackDirection } from "@/components/Stack"
 
 type Client = {
     name: string
diff --git a/fission/src/modals/configuring/ChangeInputsModal.tsx b/fission/src/ui/modals/configuring/ChangeInputsModal.tsx
similarity index 94%
rename from fission/src/modals/configuring/ChangeInputsModal.tsx
rename to fission/src/ui/modals/configuring/ChangeInputsModal.tsx
index 738ff4dd24..e30aa163bd 100644
--- a/fission/src/modals/configuring/ChangeInputsModal.tsx
+++ b/fission/src/ui/modals/configuring/ChangeInputsModal.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react"
-import Modal, { ModalPropsImpl } from "../../components/Modal"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
 import { FaGamepad } from "react-icons/fa6"
-import Stack, { StackDirection } from "../../components/Stack"
-import Label, { LabelSize } from "../../components/Label"
-import LabeledButton, { LabelPlacement } from "../../components/LabeledButton"
+import Stack, { StackDirection } from "@/components/Stack"
+import Label, { LabelSize } from "@/components/Label"
+import LabeledButton, { LabelPlacement } from "@/components/LabeledButton"
 
 type ModifierState = {
     alt?: boolean
diff --git a/fission/src/modals/configuring/ChooseMultiplayerModeModal.tsx b/fission/src/ui/modals/configuring/ChooseMultiplayerModeModal.tsx
similarity index 81%
rename from fission/src/modals/configuring/ChooseMultiplayerModeModal.tsx
rename to fission/src/ui/modals/configuring/ChooseMultiplayerModeModal.tsx
index d9e5c3f1a8..64cf36c77c 100644
--- a/fission/src/modals/configuring/ChooseMultiplayerModeModal.tsx
+++ b/fission/src/ui/modals/configuring/ChooseMultiplayerModeModal.tsx
@@ -1,7 +1,7 @@
 import React from "react"
-import Modal, { ModalPropsImpl } from "../../components/Modal"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
 import { FaGear } from "react-icons/fa6"
-import Button from "../../components/Button"
+import Button from "@/components/Button"
 
 const ChooseMultiplayerModeModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     return (
diff --git a/fission/src/modals/configuring/ChooseSingleplayerModeModal.tsx b/fission/src/ui/modals/configuring/ChooseSingleplayerModeModal.tsx
similarity index 80%
rename from fission/src/modals/configuring/ChooseSingleplayerModeModal.tsx
rename to fission/src/ui/modals/configuring/ChooseSingleplayerModeModal.tsx
index 2b61041573..035b4a1d29 100644
--- a/fission/src/modals/configuring/ChooseSingleplayerModeModal.tsx
+++ b/fission/src/ui/modals/configuring/ChooseSingleplayerModeModal.tsx
@@ -1,7 +1,7 @@
 import React from "react"
-import Modal, { ModalPropsImpl } from "../../components/Modal"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
 import { FaGear } from "react-icons/fa6"
-import Button from "../../components/Button"
+import Button from "@/components/Button"
 
 const ChooseSingleplayerModeModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     return (
diff --git a/fission/src/modals/configuring/ConfigMotorModal.tsx b/fission/src/ui/modals/configuring/ConfigMotorModal.tsx
similarity index 93%
rename from fission/src/modals/configuring/ConfigMotorModal.tsx
rename to fission/src/ui/modals/configuring/ConfigMotorModal.tsx
index 4a7e658af5..e45dc259e3 100644
--- a/fission/src/modals/configuring/ConfigMotorModal.tsx
+++ b/fission/src/ui/modals/configuring/ConfigMotorModal.tsx
@@ -1,7 +1,7 @@
 import { FaGear } from "react-icons/fa6"
-import Modal, { ModalPropsImpl } from "../../components/Modal"
-import Slider from "../../components/Slider"
-import Label, { LabelSize } from "../../components/Label"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
+import Slider from "@/components/Slider"
+import Label, { LabelSize } from "@/components/Label"
 import { useState } from "react"
 
 type Motor = {
diff --git a/fission/src/modals/configuring/DrivetrainModal.tsx b/fission/src/ui/modals/configuring/DrivetrainModal.tsx
similarity index 89%
rename from fission/src/modals/configuring/DrivetrainModal.tsx
rename to fission/src/ui/modals/configuring/DrivetrainModal.tsx
index 11be942fe7..484e69ef91 100644
--- a/fission/src/modals/configuring/DrivetrainModal.tsx
+++ b/fission/src/ui/modals/configuring/DrivetrainModal.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from "react"
-import Modal, { ModalPropsImpl } from "../../components/Modal"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
 import { FaCar } from "react-icons/fa6"
-import Dropdown from "../../components/Dropdown"
-import { TooltipControl, useTooltipControlContext } from "@/TooltipContext"
+import Dropdown from "@/components/Dropdown"
+import { TooltipControl, useTooltipControlContext } from "@/ui/TooltipContext"
 
 type DrivetrainType = "None" | "Tank" | "Arcade" | "Swerve"
 
diff --git a/fission/src/modals/configuring/PracticeSettingsModal.tsx b/fission/src/ui/modals/configuring/PracticeSettingsModal.tsx
similarity index 75%
rename from fission/src/modals/configuring/PracticeSettingsModal.tsx
rename to fission/src/ui/modals/configuring/PracticeSettingsModal.tsx
index 60223d114e..4540794723 100644
--- a/fission/src/modals/configuring/PracticeSettingsModal.tsx
+++ b/fission/src/ui/modals/configuring/PracticeSettingsModal.tsx
@@ -1,10 +1,10 @@
 import React from "react"
-import Modal, { ModalPropsImpl } from "../../components/Modal"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
 import { FaGear } from "react-icons/fa6"
-import Button from "../../components/Button"
-import Label, { LabelSize } from "../../components/Label"
-import Stack, { StackDirection } from "../../components/Stack"
-import Dropdown from "../../components/Dropdown"
+import Button from "@/components/Button"
+import Label, { LabelSize } from "@/components/Label"
+import Stack, { StackDirection } from "@/components/Stack"
+import Dropdown from "@/components/Dropdown"
 
 const PracticeSettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     return (
diff --git a/fission/src/modals/configuring/RoboRIOModal.tsx b/fission/src/ui/modals/configuring/RoboRIOModal.tsx
similarity index 73%
rename from fission/src/modals/configuring/RoboRIOModal.tsx
rename to fission/src/ui/modals/configuring/RoboRIOModal.tsx
index d662c51c4b..da6db03e8f 100644
--- a/fission/src/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 "../../ModalContext"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
+import LabeledButton, { LabelPlacement } from "@/components/LabeledButton"
+import { useModalControlContext } from "@/ui/ModalContext"
 import { BsCodeSquare } from "react-icons/bs"
 
 const RoboRIOModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
diff --git a/fission/src/modals/configuring/SettingsModal.tsx b/fission/src/ui/modals/configuring/SettingsModal.tsx
similarity index 81%
rename from fission/src/modals/configuring/SettingsModal.tsx
rename to fission/src/ui/modals/configuring/SettingsModal.tsx
index 77df599a2a..37175752c2 100644
--- a/fission/src/modals/configuring/SettingsModal.tsx
+++ b/fission/src/ui/modals/configuring/SettingsModal.tsx
@@ -1,12 +1,12 @@
 import React from "react"
-import { useModalControlContext } from "../../ModalContext"
-import Modal, { ModalPropsImpl } from "../../components/Modal"
+import { useModalControlContext } from "@/ui/ModalContext"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
 import { FaGear } from "react-icons/fa6"
-import Label, { LabelSize } from "../../components/Label"
-import Dropdown from "../../components/Dropdown"
-import Button from "../../components/Button"
-import Slider from "../../components/Slider"
-import Checkbox from "../../components/Checkbox"
+import Label, { LabelSize } from "@/components/Label"
+import Dropdown from "@/components/Dropdown"
+import Button from "@/components/Button"
+import Slider from "@/components/Slider"
+import Checkbox from "@/components/Checkbox"
 
 const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     const { openModal } = useModalControlContext()
diff --git a/fission/src/modals/configuring/rio-config/RCConfigEncoderModal.tsx b/fission/src/ui/modals/configuring/rio-config/RCConfigEncoderModal.tsx
similarity index 97%
rename from fission/src/modals/configuring/rio-config/RCConfigEncoderModal.tsx
rename to fission/src/ui/modals/configuring/rio-config/RCConfigEncoderModal.tsx
index e91697d29c..310aaa83d0 100644
--- a/fission/src/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 "@/ModalContext"
+import { useModalControlContext } from "@/ui/ModalContext"
 import { FaPlus } from "react-icons/fa6"
 import Label, { LabelSize } from "@/components/Label"
 import Input from "@/components/Input"
diff --git a/fission/src/modals/configuring/rio-config/RCConfigPwmGroupModal.tsx b/fission/src/ui/modals/configuring/rio-config/RCConfigPwmGroupModal.tsx
similarity index 87%
rename from fission/src/modals/configuring/rio-config/RCConfigPwmGroupModal.tsx
rename to fission/src/ui/modals/configuring/rio-config/RCConfigPwmGroupModal.tsx
index 98519a366b..cad2c099fa 100644
--- a/fission/src/modals/configuring/rio-config/RCConfigPwmGroupModal.tsx
+++ b/fission/src/ui/modals/configuring/rio-config/RCConfigPwmGroupModal.tsx
@@ -1,13 +1,13 @@
 import React, { useState } from "react"
-import Modal, { ModalPropsImpl } from "../../../components/Modal"
-import { useModalControlContext } from "../../../ModalContext"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
+import { useModalControlContext } from "@/ui/ModalContext"
 import { FaPlus } from "react-icons/fa6"
-import ScrollView from "../../../components/ScrollView"
-import Stack, { StackDirection } from "../../../components/Stack"
-import Checkbox from "../../../components/Checkbox"
-import Container from "../../../components/Container"
-import Label, { LabelSize } from "../../../components/Label"
-import Input from "../../../components/Input"
+import ScrollView from "@/components/ScrollView"
+import Stack, { StackDirection } from "@/components/Stack"
+import Checkbox from "@/components/Checkbox"
+import Container from "@/components/Container"
+import Label, { LabelSize } from "@/components/Label"
+import Input from "@/components/Input"
 
 const RCConfigPwmGroupModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     const { openModal } = useModalControlContext()
diff --git a/fission/src/modals/configuring/rio-config/RCCreateDeviceModal.tsx b/fission/src/ui/modals/configuring/rio-config/RCCreateDeviceModal.tsx
similarity index 86%
rename from fission/src/modals/configuring/rio-config/RCCreateDeviceModal.tsx
rename to fission/src/ui/modals/configuring/rio-config/RCCreateDeviceModal.tsx
index 6e1df80689..8a1d4f71a5 100644
--- a/fission/src/modals/configuring/rio-config/RCCreateDeviceModal.tsx
+++ b/fission/src/ui/modals/configuring/rio-config/RCCreateDeviceModal.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from "react"
-import Modal, { ModalPropsImpl } from "../../../components/Modal"
-import { useModalControlContext } from "../../../ModalContext"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
+import { useModalControlContext } from "@/ui/ModalContext"
 import { FaPlus } from "react-icons/fa6"
-import Dropdown from "../../../components/Dropdown"
+import Dropdown from "@/components/Dropdown"
 
 const RCCreateDeviceModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     const { openModal } = useModalControlContext()
diff --git a/fission/src/modals/configuring/theme-editor/DeleteAllThemesModal.tsx b/fission/src/ui/modals/configuring/theme-editor/DeleteAllThemesModal.tsx
similarity index 78%
rename from fission/src/modals/configuring/theme-editor/DeleteAllThemesModal.tsx
rename to fission/src/ui/modals/configuring/theme-editor/DeleteAllThemesModal.tsx
index 0eb6525adc..0fe082b267 100644
--- a/fission/src/modals/configuring/theme-editor/DeleteAllThemesModal.tsx
+++ b/fission/src/ui/modals/configuring/theme-editor/DeleteAllThemesModal.tsx
@@ -1,8 +1,8 @@
 import React from "react"
-import Modal, { ModalPropsImpl } from "../../../components/Modal"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
 import { GrFormClose } from "react-icons/gr"
-import { useModalControlContext } from "../../../ModalContext"
-import { useTheme } from "../../../ThemeContext"
+import { useModalControlContext } from "@/ui/ModalContext"
+import { useTheme } from "@/ui/ThemeContext"
 
 const DeleteAllThemesModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     const { openModal } = useModalControlContext()
diff --git a/fission/src/modals/configuring/theme-editor/DeleteThemeModal.tsx b/fission/src/ui/modals/configuring/theme-editor/DeleteThemeModal.tsx
similarity index 78%
rename from fission/src/modals/configuring/theme-editor/DeleteThemeModal.tsx
rename to fission/src/ui/modals/configuring/theme-editor/DeleteThemeModal.tsx
index 90330909b4..e42da19e63 100644
--- a/fission/src/modals/configuring/theme-editor/DeleteThemeModal.tsx
+++ b/fission/src/ui/modals/configuring/theme-editor/DeleteThemeModal.tsx
@@ -1,8 +1,8 @@
 import React from "react"
-import Modal, { ModalPropsImpl } from "../../../components/Modal"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
 import { GrFormClose } from "react-icons/gr"
-import { useModalControlContext } from "../../../ModalContext"
-import { useTheme } from "../../../ThemeContext"
+import { useModalControlContext } from "@/ui/ModalContext"
+import { useTheme } from "@/ui/ThemeContext"
 
 const DeleteThemeModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     const { currentTheme, deleteTheme } = useTheme()
diff --git a/fission/src/modals/configuring/theme-editor/NewThemeModal.tsx b/fission/src/ui/modals/configuring/theme-editor/NewThemeModal.tsx
similarity index 79%
rename from fission/src/modals/configuring/theme-editor/NewThemeModal.tsx
rename to fission/src/ui/modals/configuring/theme-editor/NewThemeModal.tsx
index 8e77df75da..427bb66c13 100644
--- a/fission/src/modals/configuring/theme-editor/NewThemeModal.tsx
+++ b/fission/src/ui/modals/configuring/theme-editor/NewThemeModal.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from "react"
-import Modal, { ModalPropsImpl } from "../../../components/Modal"
-import { useModalControlContext } from "../../../ModalContext"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
+import { useModalControlContext } from "@/ui/ModalContext"
 import { FaPlus } from "react-icons/fa6"
-import Input from "../../../components/Input"
-import { useTheme } from "../../../ThemeContext"
+import Input from "@/components/Input"
+import { useTheme } from "@/ui/ThemeContext"
 
 const NewThemeModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     const { openModal } = useModalControlContext()
diff --git a/fission/src/modals/configuring/theme-editor/ThemeEditorModal.tsx b/fission/src/ui/modals/configuring/theme-editor/ThemeEditorModal.tsx
similarity index 98%
rename from fission/src/modals/configuring/theme-editor/ThemeEditorModal.tsx
rename to fission/src/ui/modals/configuring/theme-editor/ThemeEditorModal.tsx
index b06ec4705b..a87a7d913f 100644
--- a/fission/src/modals/configuring/theme-editor/ThemeEditorModal.tsx
+++ b/fission/src/ui/modals/configuring/theme-editor/ThemeEditorModal.tsx
@@ -1,5 +1,9 @@
-import { useModalControlContext } from "@/ModalContext"
-import { ColorName, Theme, useTheme } from "@/ThemeContext"
+import { useModalControlContext } from "@/ui/ModalContext"
+import {
+    ColorName,
+    Theme,
+    useTheme
+} from "@/ui/ThemeContext"
 import Button from "@/components/Button"
 import Dropdown from "@/components/Dropdown"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
diff --git a/fission/src/modals/mirabuf/ImportMirabufModal.tsx b/fission/src/ui/modals/mirabuf/ImportMirabufModal.tsx
similarity index 99%
rename from fission/src/modals/mirabuf/ImportMirabufModal.tsx
rename to fission/src/ui/modals/mirabuf/ImportMirabufModal.tsx
index dd52ebdc30..4e63772253 100644
--- a/fission/src/modals/mirabuf/ImportMirabufModal.tsx
+++ b/fission/src/ui/modals/mirabuf/ImportMirabufModal.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import Modal, { ModalPropsImpl } from "../../components/Modal"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
 import { FaPlus } from "react-icons/fa6"
 import Button from "@/components/Button"
 import Label, { LabelSize } from "@/components/Label"
diff --git a/fission/src/modals/spawning/ManageAssembliesModal.tsx b/fission/src/ui/modals/spawning/ManageAssembliesModal.tsx
similarity index 97%
rename from fission/src/modals/spawning/ManageAssembliesModal.tsx
rename to fission/src/ui/modals/spawning/ManageAssembliesModal.tsx
index d8420d94ce..3031aec4c9 100644
--- a/fission/src/modals/spawning/ManageAssembliesModal.tsx
+++ b/fission/src/ui/modals/spawning/ManageAssembliesModal.tsx
@@ -1,5 +1,5 @@
 import React, { useReducer } from "react"
-import Modal, { ModalPropsImpl } from "../../components/Modal"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
 import { FaPlus } from "react-icons/fa6"
 import Button from "@/components/Button"
 import Label, { LabelSize } from "@/components/Label"
diff --git a/fission/src/modals/spawning/MatchModeModal.tsx b/fission/src/ui/modals/spawning/MatchModeModal.tsx
similarity index 88%
rename from fission/src/modals/spawning/MatchModeModal.tsx
rename to fission/src/ui/modals/spawning/MatchModeModal.tsx
index 869a547d46..7ab0466e2c 100644
--- a/fission/src/modals/spawning/MatchModeModal.tsx
+++ b/fission/src/ui/modals/spawning/MatchModeModal.tsx
@@ -1,7 +1,7 @@
 import { FaGear } from "react-icons/fa6"
-import Modal, { ModalPropsImpl } from "../../components/Modal"
-import Dropdown from "../../components/Dropdown"
-import Label, { LabelSize } from "../../components/Label"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
+import Dropdown from "@/components/Dropdown"
+import Label, { LabelSize } from "@/components/Label"
 
 const MatchModeModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     const robotsPerAlliance = 3
diff --git a/fission/src/modals/spawning/SpawningModals.tsx b/fission/src/ui/modals/spawning/SpawningModals.tsx
similarity index 98%
rename from fission/src/modals/spawning/SpawningModals.tsx
rename to fission/src/ui/modals/spawning/SpawningModals.tsx
index 5eb92fcee6..25d25efba2 100644
--- a/fission/src/modals/spawning/SpawningModals.tsx
+++ b/fission/src/ui/modals/spawning/SpawningModals.tsx
@@ -3,11 +3,11 @@ import Modal, { ModalPropsImpl } from "../../components/Modal"
 import { FaPlus } from "react-icons/fa6"
 import Stack, { StackDirection } from "../../components/Stack"
 import Button, { ButtonSize } from "../../components/Button"
-import { useModalControlContext } from "../../ModalContext"
+import { useModalControlContext } from "@/ui/ModalContext"
 import Label, { LabelSize } from "@/components/Label"
 import { CreateMirabufFromUrl } from "@/mirabuf/MirabufSceneObject"
 import World from "@/systems/World"
-import { useTooltipControlContext } from "@/TooltipContext"
+import { useTooltipControlContext } from "@/ui/TooltipContext"
 
 interface MirabufEntry {
     displayName: string
diff --git a/fission/src/panels/RobotSwitchPanel.tsx b/fission/src/ui/panels/RobotSwitchPanel.tsx
similarity index 82%
rename from fission/src/panels/RobotSwitchPanel.tsx
rename to fission/src/ui/panels/RobotSwitchPanel.tsx
index 5b19d474a0..d32ecba3f4 100644
--- a/fission/src/panels/RobotSwitchPanel.tsx
+++ b/fission/src/ui/panels/RobotSwitchPanel.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from "react"
-import Label, { LabelSize } from "../components/Label"
-import Panel, { PanelPropsImpl } from "../components/Panel"
+import Label, { LabelSize } from "@/components/Label"
+import Panel, { PanelPropsImpl } from "@/components/Panel"
 import { IoPeople } from "react-icons/io5"
-import Stack, { StackDirection } from "../components/Stack"
-import Button from "../components/Button"
-import { useModalControlContext } from "../ModalContext"
-import Checkbox from "../components/Checkbox"
+import Stack, { StackDirection } from "@/components/Stack"
+import Button from "@/components/Button"
+import { useModalControlContext } from "@/ui/ModalContext"
+import Checkbox from "@/components/Checkbox"
 
 const RobotSwitchPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation, sidePadding }) => {
     const [robots, setRobots] = useState(["Dozer_v9_0", "Team 2471 (2018) v7_0"])
diff --git a/fission/src/panels/SpawnLocationPanel.tsx b/fission/src/ui/panels/SpawnLocationPanel.tsx
similarity index 90%
rename from fission/src/panels/SpawnLocationPanel.tsx
rename to fission/src/ui/panels/SpawnLocationPanel.tsx
index 4ebea31e66..60b5718a18 100644
--- a/fission/src/panels/SpawnLocationPanel.tsx
+++ b/fission/src/ui/panels/SpawnLocationPanel.tsx
@@ -1,6 +1,6 @@
-import { useTooltipControlContext } from "@/TooltipContext"
-import Button from "../components/Button"
-import Panel, { PanelPropsImpl } from "../components/Panel"
+import { useTooltipControlContext } from "@/ui/TooltipContext"
+import Button from "@/components/Button"
+import Panel, { PanelPropsImpl } from "@/components/Panel"
 
 const SpawnLocationsPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation, sidePadding }) => {
     const robotsPerAlliance = 3
diff --git a/fission/src/panels/configuring/ConfigureGamepiecePickupPanel.tsx b/fission/src/ui/panels/configuring/ConfigureGamepiecePickupPanel.tsx
similarity index 86%
rename from fission/src/panels/configuring/ConfigureGamepiecePickupPanel.tsx
rename to fission/src/ui/panels/configuring/ConfigureGamepiecePickupPanel.tsx
index be047a73a8..534f9a54ab 100644
--- a/fission/src/panels/configuring/ConfigureGamepiecePickupPanel.tsx
+++ b/fission/src/ui/panels/configuring/ConfigureGamepiecePickupPanel.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react"
 import { FaGear } from "react-icons/fa6"
-import Panel, { PanelPropsImpl } from "../../components/Panel"
-import SelectButton from "../../components/SelectButton"
-import Slider from "../../components/Slider"
+import Panel, { PanelPropsImpl } from "@/components/Panel"
+import SelectButton from "@/components/SelectButton"
+import Slider from "@/components/Slider"
 
 const ConfigureGamepiecePickupPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation, sidePadding }) => {
     const defaultZoneSize = 0.5
diff --git a/fission/src/panels/configuring/ConfigureShotTrajectoryPanel.tsx b/fission/src/ui/panels/configuring/ConfigureShotTrajectoryPanel.tsx
similarity index 86%
rename from fission/src/panels/configuring/ConfigureShotTrajectoryPanel.tsx
rename to fission/src/ui/panels/configuring/ConfigureShotTrajectoryPanel.tsx
index 683f62f419..29f493200b 100644
--- a/fission/src/panels/configuring/ConfigureShotTrajectoryPanel.tsx
+++ b/fission/src/ui/panels/configuring/ConfigureShotTrajectoryPanel.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react"
 import { FaGear } from "react-icons/fa6"
-import Panel, { PanelPropsImpl } from "../../components/Panel"
-import SelectButton from "../../components/SelectButton"
-import Slider from "../../components/Slider"
+import Panel, { PanelPropsImpl } from "@/components/Panel"
+import SelectButton from "@/components/SelectButton"
+import Slider from "@/components/Slider"
 
 const ConfigureShotTrajectoryPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation, sidePadding }) => {
     const defaultShootSpeed = 5
diff --git a/fission/src/panels/configuring/scoring/ScoringZonesPanel.tsx b/fission/src/ui/panels/configuring/scoring/ScoringZonesPanel.tsx
similarity index 99%
rename from fission/src/panels/configuring/scoring/ScoringZonesPanel.tsx
rename to fission/src/ui/panels/configuring/scoring/ScoringZonesPanel.tsx
index 6bffc6e259..f2f2bf32fb 100644
--- a/fission/src/panels/configuring/scoring/ScoringZonesPanel.tsx
+++ b/fission/src/ui/panels/configuring/scoring/ScoringZonesPanel.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react"
-import { usePanelControlContext } from "@/PanelContext"
+import { usePanelControlContext } from "@/ui/PanelContext"
 import Button from "@/components/Button"
 import Label, { LabelSize } from "@/components/Label"
 import Panel, { PanelPropsImpl } from "@/components/Panel"
diff --git a/fission/src/panels/configuring/scoring/ZoneConfigPanel.tsx b/fission/src/ui/panels/configuring/scoring/ZoneConfigPanel.tsx
similarity index 100%
rename from fission/src/panels/configuring/scoring/ZoneConfigPanel.tsx
rename to fission/src/ui/panels/configuring/scoring/ZoneConfigPanel.tsx
diff --git a/fission/src/panels/information/ScoreboardPanel.tsx b/fission/src/ui/panels/information/ScoreboardPanel.tsx
similarity index 93%
rename from fission/src/panels/information/ScoreboardPanel.tsx
rename to fission/src/ui/panels/information/ScoreboardPanel.tsx
index a78fdc96ba..cefd4785c5 100644
--- a/fission/src/panels/information/ScoreboardPanel.tsx
+++ b/fission/src/ui/panels/information/ScoreboardPanel.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from "react"
-import Label, { LabelSize } from "../../components/Label"
-import Panel, { PanelPropsImpl } from "../../components/Panel"
-import Stack, { StackDirection } from "../../components/Stack"
+import Label, { LabelSize } from "@/components/Label"
+import Panel, { PanelPropsImpl } from "@/components/Panel"
+import Stack, { StackDirection } from "@/components/Stack"
 
 const ScoreboardPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation, sidePadding }) => {
     const [redScore] = useState<number>(0)
diff --git a/fission/src/panels/simulation/DriverStationPanel.tsx b/fission/src/ui/panels/simulation/DriverStationPanel.tsx
similarity index 78%
rename from fission/src/panels/simulation/DriverStationPanel.tsx
rename to fission/src/ui/panels/simulation/DriverStationPanel.tsx
index 78836fc2ee..43c4262f2d 100644
--- a/fission/src/panels/simulation/DriverStationPanel.tsx
+++ b/fission/src/ui/panels/simulation/DriverStationPanel.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from "react"
-import Panel, { PanelPropsImpl } from "../../components/Panel"
+import Panel, { PanelPropsImpl } from "@/components/Panel"
 import { GiSteeringWheel } from "react-icons/gi"
-import Stack, { StackDirection } from "../../components/Stack"
-import Button from "../../components/Button"
-import Dropdown from "../../components/Dropdown"
+import Stack, { StackDirection } from "@/components/Stack"
+import Button from "@/components/Button"
+import Dropdown from "@/components/Dropdown"
 
 const DriverStationPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation, sidePadding }) => {
     const [enabled, setEnabled] = useState(false)
diff --git a/fission/tsconfig.json b/fission/tsconfig.json
index cd343babff..9bb75bfacc 100644
--- a/fission/tsconfig.json
+++ b/fission/tsconfig.json
@@ -1,31 +1,51 @@
 {
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "baseUrl": ".",
-    "paths": {
-        "@/*": [
-            "./src/*"
-        ]
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "module": "ESNext",
+        "skipLibCheck": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": [
+                "src/*"
+            ],
+            "@/components/*": [
+                "src/ui/components/*"
+            ],
+            "@/modals/*": [
+                "src/ui/modals/*"
+            ],
+            "@/panels/*": [
+                "src/ui/panels/*"
+            ],
+            "@/systems/*": [
+                "src/systems/*"
+            ]
+        },
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
     },
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+    "include": [
+        "src"
+    ],
+    "references": [
+        {
+            "path": "./tsconfig.node.json"
+        }
+    ]
 }
diff --git a/fission/vite.config.ts b/fission/vite.config.ts
index 478da1046d..9767173567 100644
--- a/fission/vite.config.ts
+++ b/fission/vite.config.ts
@@ -8,38 +8,41 @@ const dockerServerPort = 3003
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), /* viteSingleFile() */],
-  resolve: {
-      alias: [
-          { find: '@', replacement: path.resolve(__dirname, 'src') }
-      ]
-  },
-  test: {
-    globals: true,
-    environment: 'jsdom'
-  },
-  server: {
-    // this ensures that the browser opens upon server start
-    open: true,
-    // this sets a default port to 3000
-    port: serverPort,
-    cors: false,
-    proxy: {
-      '/api/mira': {
-        target: `http://localhost:${serverPort}${basePath}`,
-        changeOrigin: true,
-        secure: false,
-        rewrite: (path) => path.replace(/^\/api\/mira/, '/Downloadables/Mira')
-      },
-      '/api/auth': {
-        target: `http://localhost:${dockerServerPort}/`,
-        changeOrigin: true,
-        secure: false
-      }
+    plugins: [react(), /* viteSingleFile() */],
+    resolve: {
+        alias: [
+            { find: '@/components', replacement: path.resolve(__dirname, 'src', 'ui', 'components') },
+            { find: '@/modals', replacement: path.resolve(__dirname, 'src', 'ui', 'modals') },
+            { find: '@/panels', replacement: path.resolve(__dirname, 'src', 'ui', 'panels') },
+            { find: '@', replacement: path.resolve(__dirname, 'src') }
+        ]
     },
-  },
-  build: {
-    target: 'esnext',
-  },
-  base: basePath
+    test: {
+        globals: true,
+        environment: 'jsdom'
+    },
+    server: {
+        // this ensures that the browser opens upon server start
+        open: true,
+        // this sets a default port to 3000
+        port: serverPort,
+        cors: false,
+        proxy: {
+            '/api/mira': {
+                target: `http://localhost:${serverPort}${basePath}`,
+                changeOrigin: true,
+                secure: false,
+                rewrite: (path) => path.replace(/^\/api\/mira/, '/Downloadables/Mira')
+            },
+            '/api/auth': {
+                target: `http://localhost:${dockerServerPort}/`,
+                changeOrigin: true,
+                secure: false
+            }
+        },
+    },
+    build: {
+        target: 'esnext',
+    },
+    base: basePath
 })