diff --git a/fission/src/ui/components/simulation/FlowControls.tsx b/fission/src/ui/components/simulation/FlowControls.tsx
index 30da1a7dc9..ae8b4e68aa 100644
--- a/fission/src/ui/components/simulation/FlowControls.tsx
+++ b/fission/src/ui/components/simulation/FlowControls.tsx
@@ -9,16 +9,16 @@ function FlowControls({ onCreateJunction }: FlowControlsProps) {
 
     return (
         <FlowPanel position="bottom-left" className="flex flex-col-reverse gap-1">
-            <Button onClick={() => fitView()}>
+            <Button variant="outlined" onClick={() => fitView()}>
                 <MdFitScreen className="w-full h-full" />
             </Button>
-            <Button onClick={() => zoomOut()}>
+            <Button variant="outlined" onClick={() => zoomOut()}>
                 <MdZoomOutMap className="w-full h-full" />
             </Button>
-            <Button onClick={() => zoomIn()}>
+            <Button variant="outlined" onClick={() => zoomIn()}>
                 <MdZoomInMap className="w-full h-full" />
             </Button>
-            <Button onClick={() => onCreateJunction?.()}>
+            <Button variant="outlined" onClick={() => onCreateJunction?.()}>
                 <FaPlus className="w-full h-full" />
             </Button>
         </FlowPanel>
diff --git a/fission/src/ui/panels/simulation/WiringNode.tsx b/fission/src/ui/panels/simulation/WiringNode.tsx
index d7066c9435..7c8e3d76ec 100644
--- a/fission/src/ui/panels/simulation/WiringNode.tsx
+++ b/fission/src/ui/panels/simulation/WiringNode.tsx
@@ -1,4 +1,4 @@
-import { Stack } from "@mui/material"
+import { Box } from "@mui/material"
 import { type Connection, type Edge, Handle, type NodeProps, Position } from "@xyflow/react"
 import { useCallback, useMemo } from "react"
 import {
@@ -8,18 +8,17 @@ import {
     SimConfig,
     type SimConfigData,
 } from "@/systems/simulation/SimConfigShared"
-import Label from "@/ui/components/Label"
 import { CustomTooltip, DeleteButton, EditButton, RefreshButton } from "@/ui/components/StyledComponents"
 
 const WiringNode = ({ data, isConnectable }: NodeProps) => {
-    const robotInput = data.input as HandleInfo[] | undefined
-    const robotOutput = data.output as HandleInfo[] | undefined
-    const onEdit = data.onEdit as (() => void) | undefined
-    const onRefresh = data.onRefresh as (() => void) | undefined
-    const onDelete = data.onDelete as (() => void) | undefined
-    const simConfig = data.simConfig as SimConfigData
-    const title = data.title as string
-    const tooltip = data.tooltip as string | undefined
+    const robotInput = useMemo(() => data.input as HandleInfo[] | undefined, [data])
+    const robotOutput = useMemo(() => data.output as HandleInfo[] | undefined, [data])
+    const onEdit = useMemo(() => data.onEdit as (() => void) | undefined, [data])
+    const onRefresh = useMemo(() => data.onRefresh as (() => void) | undefined, [data])
+    const onDelete = useMemo(() => data.onDelete as (() => void) | undefined, [data])
+    const simConfig = useMemo(() => data.simConfig as SimConfigData, [data])
+    const title = useMemo(() => data.title as string, [data])
+    const tooltip = useMemo(() => data.tooltip as string | undefined, [data])
 
     const validateConnection = useCallback(
         (edge: Edge | Connection) => {
@@ -30,66 +29,97 @@ const WiringNode = ({ data, isConnectable }: NodeProps) => {
 
     const inputHandles = useMemo(
         () =>
-            robotInput && (
-                <Stack gap={4}>
-                    {robotInput.sort(handleInfoDisplayCompare).map((x, i) => (
-                        <div key={i} className="relative">
-                            <Label size="md">{x.displayName}</Label>
-                            <Handle
-                                style={{
-                                    backgroundColor: NORA_TYPES_COLORS[x.noraType],
-                                }}
-                                className="absolute left-0 w-4 h-4"
-                                key={i}
-                                type="target"
-                                position={Position.Left}
-                                id={x.id}
-                                isConnectable={isConnectable}
-                            />
-                        </div>
-                    ))}
-                </Stack>
+            robotInput ? (
+                <Box
+                    sx={{
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "1rem",
+                        justifyContent: "space-between",
+                    }}
+                >
+                    {robotInput.sort(handleInfoDisplayCompare).map((x, i) => {
+                        return (
+                            <div key={i} className="relative">
+                                <div className="px-3 text-lg">{x.displayName}</div>
+                                <Handle
+                                    style={{
+                                        position: "absolute",
+                                        left: 0,
+                                        width: "1rem",
+                                        height: "1rem",
+                                        backgroundColor: NORA_TYPES_COLORS[x.noraType],
+                                    }}
+                                    key={i}
+                                    type="target"
+                                    position={Position.Left}
+                                    id={x.id}
+                                    isConnectable={isConnectable}
+                                    isValidConnection={validateConnection}
+                                />
+                            </div>
+                        )
+                    })}
+                </Box>
+            ) : (
+                <></>
             ),
         [isConnectable, robotInput]
     )
 
     const outputHandles = useMemo(
         () =>
-            robotOutput && (
-                <Stack gap={4}>
-                    {robotOutput.sort(handleInfoDisplayCompare).map((x, i) => (
-                        <div key={i} className="relative">
-                            <Label size="md">{x.displayName}</Label>
-                            <Handle
-                                style={{
-                                    backgroundColor: NORA_TYPES_COLORS[x.noraType],
-                                }}
-                                className="absolute right-0 w-4 h-4"
-                                key={i}
-                                type="source"
-                                position={Position.Right}
-                                id={x.id}
-                                isConnectable={isConnectable}
-                                isValidConnection={validateConnection}
-                            />
-                        </div>
-                    ))}
-                </Stack>
+            robotOutput ? (
+                <Box
+                    sx={{
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "1rem",
+                        justifyContent: "space-between",
+                    }}
+                >
+                    {robotOutput.sort(handleInfoDisplayCompare).map((x, i) => {
+                        return (
+                            <div key={i} className="relative">
+                                <div className="px-3 text-lg text-right">{x.displayName}</div>
+                                <Handle
+                                    style={{
+                                        position: "absolute",
+                                        right: 0,
+                                        width: "1rem",
+                                        height: "1rem",
+                                        backgroundColor: NORA_TYPES_COLORS[x.noraType],
+                                    }}
+                                    key={i}
+                                    type="source"
+                                    position={Position.Right}
+                                    id={x.id}
+                                    isConnectable={isConnectable}
+                                    isValidConnection={validateConnection}
+                                />
+                            </div>
+                        )
+                    })}
+                </Box>
+            ) : (
+                <></>
             ),
         [isConnectable, robotOutput, validateConnection]
     )
 
     return (
-        <Stack gap={4}>
-            <div
-                style={{ transform: "translateY(-100%) translateX(-50%)" }}
+        <Box className="robot-io-node bg-background border-interactive-element-solid border-[0.0625rem] rounded-lg relative flex flex-col gap-4 py-4">
+            <Box
+                style={{
+                    transform: "translateY(-100%) translateX(-50%)",
+                }}
                 className="absolute top-0 text-nowrap left-1/2 text-2xl"
             >
-                {tooltip && CustomTooltip(tooltip)}
+                {tooltip ? CustomTooltip(tooltip) : <></>}
                 {title}
-            </div>
-            <div
-                style={
+            </Box>
+            <Box
+                sx={
                     robotInput && robotOutput
                         ? {
                               display: "grid",
@@ -97,21 +127,27 @@ const WiringNode = ({ data, isConnectable }: NodeProps) => {
                               columnGap: "0.5rem",
                           }
                         : robotInput
-                          ? { paddingRight: "2rem" }
-                          : { paddingLeft: "2rem" }
+                          ? {
+                                paddingRight: "2rem",
+                            }
+                          : {
+                                paddingLeft: "2rem",
+                            }
                 }
             >
                 {inputHandles}
                 {outputHandles}
-            </div>
-            {(onEdit || onDelete) && (
-                <div className="flex justify-center px-4">
-                    {onEdit && EditButton(onEdit)}
-                    {onRefresh && RefreshButton(onRefresh)}
-                    {onDelete && DeleteButton(onDelete)}
-                </div>
+            </Box>
+            {onEdit || onDelete ? (
+                <Box className="flex justify-center px-4">
+                    {onEdit ? EditButton(onEdit) : <></>}
+                    {onRefresh ? RefreshButton(onRefresh) : <></>}
+                    {onDelete ? DeleteButton(onDelete) : <></>}
+                </Box>
+            ) : (
+                <></>
             )}
-        </Stack>
+        </Box>
     )
 }
 
diff --git a/fission/src/ui/panels/simulation/WiringPanel.tsx b/fission/src/ui/panels/simulation/WiringPanel.tsx
index baf460658d..109a63e944 100644
--- a/fission/src/ui/panels/simulation/WiringPanel.tsx
+++ b/fission/src/ui/panels/simulation/WiringPanel.tsx
@@ -1,4 +1,5 @@
-import { Grid, Stack } from "@mui/material"
+import "@xyflow/react/dist/style.css"
+import { Box, Stack, useTheme } from "@mui/material"
 import {
     type Connection,
     type FinalConnectionState,
@@ -38,6 +39,11 @@ import FlowInfo from "@/ui/components/simulation/FlowInfo"
 import { useUIContext } from "../../helpers/UIProviderHelpers"
 import WiringNode from "./WiringNode"
 
+/**
+ * WARNING: Please test *thoroughly* when making changes. React Flow is very tempermental with how nodes
+ * and object references are maintained.
+ */
+
 type ConfigComponentProps = {
     setConfigState: (state: ConfigState) => void
     selectedAssembly: MirabufSceneObject
@@ -55,7 +61,7 @@ type NodeType = ComponentType<
 const nodeTypes: Record<string, NodeType> = [WiringNode].reduce<{
     [k: string]: NodeType
 }>((prev, next) => {
-    prev[next.name] = next as NodeType
+    prev[next.name] = next
     return prev
 }, {})
 
@@ -67,7 +73,7 @@ function generateGraph(
     const nodes: Map<string, FlowNode> = new Map()
     const edges: FlowEdge[] = []
 
-    for (const [_k, v] of Object.entries(simConfig.nodes)) {
+    Object.entries(simConfig.nodes).forEach(([_k, v]) => {
         let onEdit: (() => void) | undefined
         let onRefresh: (() => void) | undefined
         let onDelete: (() => void) | undefined
@@ -98,32 +104,34 @@ function generateGraph(
         }
 
         nodes.set(v.id, {
-            ...v,
+            id: v.id,
+            type: v.type,
+            position: v.position,
             data: {
-                title,
-                onEdit,
-                onRefresh,
-                onDelete,
-                simConfig,
+                title: title,
+                onEdit: onEdit,
+                onRefresh: onRefresh,
+                onDelete: onDelete,
+                simConfig: simConfig,
                 input: [],
                 output: [],
                 tooltip: v.tooltip,
             },
         })
-    }
+    })
 
-    for (const [_k, v] of Object.entries(simConfig.handles)) {
-        if (!v.enabled) break
+    Object.entries(simConfig.handles).forEach(([_k, v]) => {
+        if (!v.enabled) return
         const node = nodes.get(v.nodeId)
         if (!node) {
             console.warn("Orphaned handle found")
-            break
+            return
         }
         const list = (v.isSource ? node.data.output : node.data.input) as unknown[]
-        list.push(v)
-    }
+        list.push({ ...v })
+    })
 
-    for (const [k, v] of Object.entries(simConfig.edges)) {
+    Object.entries(simConfig.edges).forEach(([k, v]) => {
         const sourceHandle = simConfig.handles[v.sourceId]
         const targetHandle = simConfig.handles[v.targetId]
 
@@ -136,71 +144,96 @@ function generateGraph(
                 targetHandle: targetHandle.id,
             })
         }
-    }
+    })
 
     return [[...nodes.values()], edges]
 }
 
 const SimIoComponent: React.FC<ConfigComponentProps> = ({ setConfigState, simConfig }) => {
-    const simOut: HandleInfo[] = []
-    const simIn: HandleInfo[] = []
-    for (const [_k, v] of Object.entries(simConfig.handles)) {
-        if (v.nodeId === NODE_ID_SIM_OUT || v.nodeId === NODE_ID_SIM_IN) {
-            const list = v.isSource ? simOut : simIn
-            list.push(v)
+    const theme = useTheme()
+
+    const [simOut, setSimOut] = useState<Record<string, HandleInfo>>({})
+    const [simIn, setSimIn] = useState<Record<string, HandleInfo>>({})
+
+    useEffect(() => {
+        const simOut: Record<string, HandleInfo> = {}
+        const simIn: Record<string, HandleInfo> = {}
+        for (const [_k, v] of Object.entries(simConfig.handles)) {
+            if (v.nodeId === NODE_ID_SIM_OUT || v.nodeId === NODE_ID_SIM_IN) {
+                v.isSource ? (simOut[v.id] = v) : (simIn[v.id] = v)
+            }
         }
-    }
+        setSimOut(simOut)
+        setSimIn(simIn)
+    }, [simConfig])
 
     return (
-        <Stack gap={4}>
-            <Label size="md">Configure the Simulation's IO Modules</Label>
-            <Grid>
+        <Stack gap={4} direction={"column"} sx={{ width: "stretch" }}>
+            <Label size="lg">Configure the Simulation's IO Modules</Label>
+            <Box
+                sx={{
+                    display: "grid",
+                    gridTemplateColumns: "1fr 1px 1fr",
+                    columnGap: "0.5rem",
+                }}
+            >
                 <Stack>
-                    <Label size="sm">Output</Label>
+                    <Label size="md">Output</Label>
                     <ScrollView>
-                        {simOut.sort(handleInfoDisplayCompare).map(handle => (
+                        {Object.values(simOut).sort(handleInfoDisplayCompare).map(handle => (
                             <Checkbox
                                 label={`${handle.displayName}`}
                                 key={handle.id}
                                 checked={handle.enabled}
                                 onClick={checked => {
                                     handle.enabled = checked
+                                    setSimOut({ ...simOut, [handle.id]: handle })
                                 }}
                             />
                         ))}
                     </ScrollView>
                 </Stack>
+                <Box sx={{ backgroundColor: theme.palette.text.primary, height: "100%" }} />
                 <Stack>
-                    <Label size="sm">Input</Label>
+                    <Label size="md">Input</Label>
                     <ScrollView>
-                        {simIn.sort(handleInfoDisplayCompare).map(handle => (
+                        {Object.values(simIn).sort(handleInfoDisplayCompare).map(handle => (
                             <Checkbox
                                 label={`${handle.displayName}`}
                                 key={handle.id}
                                 checked={handle.enabled}
                                 onClick={checked => {
                                     handle.enabled = checked
+                                    setSimIn({ ...simIn, [handle.id]: handle })
                                 }}
                             />
                         ))}
                     </ScrollView>
                 </Stack>
-            </Grid>
-            <Button onClick={() => setConfigState("wiring")}>Back to wiring view</Button>
+            </Box>
+            <Button sx={{ width: "fit-content", alignSelf: "center" }} onClick={() => setConfigState("wiring")}>
+                Back to wiring view
+            </Button>
         </Stack>
     )
 }
 
 const RobotIoComponent: React.FC<ConfigComponentProps> = ({ setConfigState, simConfig }) => {
+    const theme = useTheme()
+
+    const [refreshHook, refreshCheckboxes] = useReducer(x => !x, false)
+
     const [canEncoders, canMotors, pwmDevices, accelerometers] = useMemo(() => {
         const canEncoders: JSX.Element[] = []
         const canMotors: JSX.Element[] = []
         const pwmDevices: JSX.Element[] = []
         const accelerometers: JSX.Element[] = []
 
-        for (const [_k, v] of Object.entries(simConfig.handles)) {
+        Object.entries(simConfig.handles).forEach(([_k, v]) => {
             if (v.nodeId !== NODE_ID_ROBOT_IO) return []
 
+            console.debug(v)
+
             const checkbox = (
                 <Checkbox
                     label={v.displayName}
@@ -208,6 +241,7 @@ const RobotIoComponent: React.FC<ConfigComponentProps> = ({ setConfigState, simC
                     checked={v.enabled}
                     onClick={enabled => {
                         v.enabled = enabled
+                        refreshCheckboxes()
                     }}
                 />
             )
@@ -220,23 +254,29 @@ const RobotIoComponent: React.FC<ConfigComponentProps> = ({ setConfigState, simC
                     pwmDevices.push(checkbox)
                     break
                 case SimType.CAN_ENCODER:
-                    pwmDevices.push(checkbox)
+                    canEncoders.push(checkbox)
                     break
                 case SimType.ACCELEROMETER:
-                    pwmDevices.push(checkbox)
+                    accelerometers.push(checkbox)
                     break
             }
-        }
+        })
 
         return [canEncoders, canMotors, pwmDevices, accelerometers]
-    }, [simConfig])
+    }, [simConfig, refreshHook])
 
     return (
         <Stack gap={4}>
-            <Label size="md">Configure your Robot's IO Module</Label>
-            <Grid>
+            <Label size="lg">Configure your Robot's IO Module</Label>
+            <Box
+                sx={{
+                    display: "grid",
+                    gridTemplateColumns: "1fr 1px 1fr",
+                    columnGap: "0.5rem",
+                }}
+            >
                 <Stack>
-                    <Label size="sm">Input</Label>
+                    <Label size="md">Input</Label>
                     <ScrollView>
                         <Label size="md">CAN Encoders</Label>
                         {canEncoders}
@@ -244,8 +284,9 @@ const RobotIoComponent: React.FC<ConfigComponentProps> = ({ setConfigState, simC
                         {accelerometers}
                     </ScrollView>
                 </Stack>
+                <Box sx={{ backgroundColor: theme.palette.text.primary, height: "100%" }} />
                 <Stack>
-                    <Label size="sm">Output</Label>
+                    <Label size="md">Output</Label>
                     <ScrollView>
                         <Label size="md">CAN Motors</Label>
                         {canMotors}
@@ -253,8 +294,10 @@ const RobotIoComponent: React.FC<ConfigComponentProps> = ({ setConfigState, simC
                         {pwmDevices}
                     </ScrollView>
                 </Stack>
-            </Grid>
-            <Button onClick={() => setConfigState("wiring")}>Back to wiring view</Button>
+            </Box>
+            <Button sx={{ width: "fit-content", alignSelf: "center" }} onClick={() => setConfigState("wiring")}>
+                Back to wiring view
+            </Button>
         </Stack>
     )
 }
@@ -263,14 +306,14 @@ const WiringComponent: React.FC<ConfigComponentProps> = ({ setConfigState, simCo
     const { screenToFlowPosition } = useReactFlow()
     const [nodes, setNodes, onNodesChange] = useNodesState([] as FlowNode[])
     const [edges, setEdges, onEdgesChange] = useEdgesState([] as FlowEdge[])
-    const [_refreshHook, refreshGraph] = useReducer(x => !x, false) // Whenever I use reducers, it's always sketch. -Hunter
+    const [refreshHook, refreshGraph] = useReducer(x => !x, false) // Whenever I use reducers, it's always sketch. -Hunter
 
     // Essentially a callback, but it can use itself
     useEffect(() => {
         const [nodes, edges] = generateGraph(simConfig, refreshGraph, setConfigState)
         setNodes(nodes)
         setEdges(edges)
-    }, [setConfigState, setEdges, setNodes, simConfig])
+    }, [setConfigState, setEdges, setNodes, simConfig, refreshHook])
 
     const onEdgeDoubleClick = useCallback(
         (_: React.MouseEvent, edge: FlowEdge) => {
@@ -337,7 +380,7 @@ const WiringComponent: React.FC<ConfigComponentProps> = ({ setConfigState, simCo
     const onCreateJunction = useCallback(() => {
         SimConfig.AddJunctionNode(simConfig)
         refreshGraph()
-    }, [simConfig])
+    }, [refreshGraph, simConfig])
 
     return (
         <ReactFlow
@@ -379,8 +422,10 @@ const WiringPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) => {
 
         const existingConfig = selectedAssembly.simConfigData
         if (existingConfig) {
+            console.debug('Existing SimConfig found')
             setSimConfig(JSON.parse(JSON.stringify(existingConfig))) // Create copy to not force a save
         } else {
+            console.debug('No SimConfig found, creating default...')
             setSimConfig(SimConfig.Default(selectedAssembly))
         }
     }, [selectedAssembly])
@@ -395,6 +440,8 @@ const WiringPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) => {
             console.debug(`${flows.length} Flows Successfully Compiled!`)
 
             selectedAssembly.updateSimConfig(simConfig)
+        } else {
+            console.warn('Failed to save SimConfig', simConfig, selectedAssembly)
         }
     }, [selectedAssembly, simConfig])
 
@@ -406,12 +453,18 @@ const WiringPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) => {
 
     useEffect(() => {
         configureScreen(panel!, { title: "Wiring Panel" }, { onBeforeAccept: save })
-    }, [])
+    }, [save])
 
     return (
         <>
             {selectedAssembly && simConfig ? (
-                <div className="flex grow">
+                <Box
+                    sx={{
+                        display: "flex",
+                        width: "70vw",
+                        height: "70vh",
+                    }}
+                >
                     {configState === "wiring" && (
                         <ReactFlowProvider>
                             <WiringComponent
@@ -436,7 +489,7 @@ const WiringPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) => {
                             setConfigState={setConfigState}
                         />
                     )}
-                </div>
+                </Box>
             ) : (
                 "ERRR"
             )}
diff --git a/simulation/samples/JavaAutoSample/src/main/java/frc/robot/Robot.java b/simulation/samples/JavaAutoSample/src/main/java/frc/robot/Robot.java
index 9452a56343..e1d21d63c4 100644
--- a/simulation/samples/JavaAutoSample/src/main/java/frc/robot/Robot.java
+++ b/simulation/samples/JavaAutoSample/src/main/java/frc/robot/Robot.java
@@ -39,7 +39,9 @@ public class Robot extends TimedRobot {
     private String m_autoSelected;
     private final SendableChooser<String> m_chooser = new SendableChooser<>();
 
-    private ADXL362 m_Accelerometer = new ADXL362(SPI.Port.kMXP, ADXL362.Range.k8G);
+    private static final int kAutoTurn = 90;
+
+    private ADXL362 m_accelerometer = new ADXL362(SPI.Port.kMXP, ADXL362.Range.k8G);
     private AHRS m_Gyro = new AHRS();
 
     private CANSparkMax m_sparkLeft = new CANSparkMax(1, MotorType.kBrushless);
@@ -47,6 +49,8 @@ public class Robot extends TimedRobot {
     private CANSparkMax m_sparkArm = new CANSparkMax(3, MotorType.kBrushless);
     private RelativeEncoder m_encoder;
 
+    private double m_initAngle = 0;
+
     /**
      * This function is run when the robot is first started up and should be used
      * for any
@@ -117,13 +121,19 @@ public void autonomousPeriodic() {
                 m_sparkLeft.set(0.5);
                 m_sparkRight.set(0.5);
                 if (m_encoder.getPosition() > 36.0) {
+                    m_initAngle = m_accelerometer.getY();
                     m_autoState = AutoState.Stage2;
                     System.out.println("--- Transitioning to Stage 2 ---");
                 }
                 break;
             case Stage2:
-                m_sparkLeft.set(0.5);
-                m_sparkRight.set(-0.5);
+                double current = (m_accelerometer.getY() - m_initAngle);
+                double delta = kAutoTurn - current;
+                double speed = delta * (1.0 / 15.0);
+                speed = Math.max(Math.min(speed, 1.0), -1.0);
+
+                m_sparkLeft.set(speed);
+                m_sparkRight.set(-speed);
                 break;
             default:
                 break;