diff --git a/fission/src/Synthesis.tsx b/fission/src/Synthesis.tsx
index 2a78f6e6a1..6656dd3d80 100644
--- a/fission/src/Synthesis.tsx
+++ b/fission/src/Synthesis.tsx
@@ -94,7 +94,7 @@ function Synthesis() {
     }, [])
 
     return (
-        <AnimatePresence key={"animate-presence"}>
+        <AnimatePresence key="animate-presence">
             <ThemeProvider>
                 <SnackbarProvider
                     maxSnack={5}
@@ -107,10 +107,10 @@ function Synthesis() {
                             <SceneOverlay />
                             <ContextMenu />
                             <MultiplayerHUD />
-                            <MainHUD key={"main-hud"} />
+                            <MainHUD key="main-hud" />
                             <UIRenderer />
                             <CommandPalette />
-                            <ProgressNotifications key={"progress-notifications"} />
+                            <ProgressNotifications key="progress-notifications" />
                             <WPILibConnectionStatus />
                             <DragModeIndicator />
 
diff --git a/fission/src/ui/components/ContextMenu.tsx b/fission/src/ui/components/ContextMenu.tsx
index 11d4c871d6..67a090c224 100644
--- a/fission/src/ui/components/ContextMenu.tsx
+++ b/fission/src/ui/components/ContextMenu.tsx
@@ -24,9 +24,9 @@ const ContextMenu: React.FC = () => {
         })
     }, [])
 
-    return !state ? (
-        <></>
-    ) : (
+    if (!state) return null
+
+    return (
         <Stack
             key="CANCEL"
             component="div"
@@ -67,7 +67,7 @@ const ContextMenu: React.FC = () => {
                 {state.data.items.map(x => (
                     <Button
                         key={x.name}
-                        className={"w-full text-sm"}
+                        className="w-full text-sm"
                         onClick={() => {
                             setState(undefined)
                             if (x.screen) {
diff --git a/fission/src/ui/components/DragModeIndicator.tsx b/fission/src/ui/components/DragModeIndicator.tsx
index f1adf3e9b9..3da21a1686 100644
--- a/fission/src/ui/components/DragModeIndicator.tsx
+++ b/fission/src/ui/components/DragModeIndicator.tsx
@@ -17,7 +17,9 @@ const DragModeIndicator: React.FC = () => {
         globalAddToast("info", "Drag Mode", "Drag mode has been disabled")
     }
 
-    return enabled ? (
+    if (!enabled) return null
+
+    return (
         <Stack
             className="select-none absolute left-1 bottom-1 py-2 px-4 rounded-lg gap-2 cursor-pointer hover:opacity-80 transition-opacity"
             direction="row"
@@ -32,8 +34,6 @@ const DragModeIndicator: React.FC = () => {
                 Drag Mode
             </Label>
         </Stack>
-    ) : (
-        <></>
     )
 }
 
diff --git a/fission/src/ui/components/MainHUD.tsx b/fission/src/ui/components/MainHUD.tsx
index 2c310e5f94..7d060bdd9c 100644
--- a/fission/src/ui/components/MainHUD.tsx
+++ b/fission/src/ui/components/MainHUD.tsx
@@ -95,16 +95,16 @@ const MainHUD: React.FC = () => {
             {!isOpen && (
                 <Stack
                     direction="row"
-                    alignItems={"center"}
+                    alignItems="center"
                     height="100%"
-                    position={"absolute"}
+                    position="absolute"
                     sx={{ top: "0", left: "0" }}
                 >
                     <Box
                         position="absolute"
-                        width={"5vw"}
-                        minWidth={"50px"}
-                        maxWidth={"60px"}
+                        width="5vw"
+                        minWidth="50px"
+                        maxWidth="60px"
                         style={{ aspectRatio: " 1 / 1.5" }}
                         className="transform transition-transform hover:scale-[1.02] active:scale-[1.04]"
                         bgcolor="secondary.dark"
diff --git a/fission/src/ui/components/MultiplayerHUD.tsx b/fission/src/ui/components/MultiplayerHUD.tsx
index 0945fc8680..f96f6f6a51 100644
--- a/fission/src/ui/components/MultiplayerHUD.tsx
+++ b/fission/src/ui/components/MultiplayerHUD.tsx
@@ -46,12 +46,12 @@ const MultiplayerHUD: React.FC = () => {
                     pr: "0.7rem",
                 })}
             >
-                <Label fontWeight={"700"} size={"sm"}>
+                <Label fontWeight="700" size="sm">
                     Room {roomCode}
                 </Label>
                 {peers.map(peer => (
                     <Tooltip placement="right" key={peer.clientId} title={peer.clientId.split("-")[0]}>
-                        <Typography variant={"body1"} key={peer.clientId}>
+                        <Typography variant="body1" key={peer.clientId}>
                             {peer.displayName}
                             {peer.clientId == World.multiplayerSystem?.clientId && " (you)"}
                         </Typography>
diff --git a/fission/src/ui/components/Panel.tsx b/fission/src/ui/components/Panel.tsx
index dcf63d82c7..2069ed5653 100644
--- a/fission/src/ui/components/Panel.tsx
+++ b/fission/src/ui/components/Panel.tsx
@@ -64,7 +64,7 @@ export const Panel = <T, P>({ children, panel, parent }: PanelElementProps<T, P>
     return (
         <Draggable
             handle=".panel-drag-handle"
-            cancel={"input, textarea, select, .MuiSlider-root, .MuiMenuItem-root, .no-drag"}
+            cancel="input, textarea, select, .MuiSlider-root, .MuiMenuItem-root, .no-drag"
             positionOffset={getPositionOffset(props.position)}
             nodeRef={nodeRef}
         >
diff --git a/fission/src/ui/components/ProgressNotification.tsx b/fission/src/ui/components/ProgressNotification.tsx
index e23b1434bf..27a818bc42 100644
--- a/fission/src/ui/components/ProgressNotification.tsx
+++ b/fission/src/ui/components/ProgressNotification.tsx
@@ -69,9 +69,9 @@ const ProgressNotification: React.FC<NotificationProps> = ({ handle }) => {
     return (
         <Box
             key={handle.handleId}
-            component={"div"}
-            display={"flex"}
-            flexDirection={"column"}
+            component="div"
+            display="flex"
+            flexDirection="column"
             sx={{
                 backgroundColor: "#000000",
                 borderWidth: "0rem",
@@ -80,22 +80,22 @@ const ProgressNotification: React.FC<NotificationProps> = ({ handle }) => {
             }}
         >
             <Box
-                component={"div"}
-                display={"flex"}
-                flexDirection={"column"}
+                component="div"
+                display="flex"
+                flexDirection="column"
                 sx={{
                     paddingY: "0.75rem",
                     paddingX: "1.5rem",
                 }}
             >
-                <TypoStyled fontWeight={"700"} fontSize={"1rem"}>
+                <TypoStyled fontWeight="700" fontSize="1rem">
                     {handle.title}
                 </TypoStyled>
-                {handle.message.length > 0 && <TypoStyled fontSize={"0.75rem"}>{handle.message}</TypoStyled>}
+                {handle.message.length > 0 && <TypoStyled fontSize="0.75rem">{handle.message}</TypoStyled>}
             </Box>
             <Box
-                key={"bar"}
-                component={"div"}
+                key="bar"
+                component="div"
                 sx={{
                     backgroundColor:
                         handle.status == ProgressHandleStatus.IN_PROGRESS
@@ -134,9 +134,9 @@ const ProgressNotifications: React.FC = () => {
 
     return (
         <Box
-            component={"div"}
-            display={"flex"}
-            position={"fixed"}
+            component="div"
+            display="flex"
+            position="fixed"
             sx={{
                 bottom: "0.5rem",
                 left: "50vw",
@@ -146,7 +146,7 @@ const ProgressNotifications: React.FC = () => {
                 gap: "0.5rem",
             }}
         >
-            {progressElements ?? <></>}
+            {progressElements}
         </Box>
     )
 }
diff --git a/fission/src/ui/components/SceneOverlay.tsx b/fission/src/ui/components/SceneOverlay.tsx
index 9d142e16a9..d723ebbd76 100644
--- a/fission/src/ui/components/SceneOverlay.tsx
+++ b/fission/src/ui/components/SceneOverlay.tsx
@@ -19,7 +19,7 @@ const SceneOverlay: React.FC = () => {
 
     /* h1 text for each tagMap tag */
     const [components, updateComponents] = useReducer(() => {
-        if (isDisabled) return <></> // if the overlay is disabled, return nothing
+        if (isDisabled) return null
 
         return [...tagMap.values()].map(x => (
             <div
diff --git a/fission/src/ui/components/SelectMenu.tsx b/fission/src/ui/components/SelectMenu.tsx
index 791f7844f6..e9c3289d7c 100644
--- a/fission/src/ui/components/SelectMenu.tsx
+++ b/fission/src/ui/components/SelectMenu.tsx
@@ -159,28 +159,22 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
                 <>
                     {/** List of options */}
                     <Stack gap={2}>
-                        {options.length > 0 ? (
-                            options.map((option, i) => {
-                                return (
-                                    <OptionCard
-                                        value={option}
-                                        index={i}
-                                        onSelected={val => {
-                                            setSelectedOption(val)
-                                            onOptionSelected(val)
-                                        }}
-                                        key={option.name + i}
-                                        onDelete={onDelete ? () => onDelete(option) : undefined}
-                                        includeDelete={deleteCondition === undefined || deleteCondition(option)}
-                                    />
-                                )
-                            })
-                        ) : (
-                            <>
-                                {/** No options available text */}
-                                <Label size="sm">{noOptionsText ?? "No options available!"}</Label>
-                            </>
-                        )}
+                        {options.length <= 0 && <Label size="sm">{noOptionsText ?? "No options available!"}</Label>}
+                        {options.map((option, i) => {
+                            return (
+                                <OptionCard
+                                    value={option}
+                                    index={i}
+                                    onSelected={val => {
+                                        setSelectedOption(val)
+                                        onOptionSelected(val)
+                                    }}
+                                    key={option.name + i}
+                                    onDelete={onDelete ? () => onDelete(option) : undefined}
+                                    includeDelete={deleteCondition === undefined || deleteCondition(option)}
+                                />
+                            )
+                        })}
                         {/** Add button */}
                         {onAddClicked && (
                             <Button
@@ -211,7 +205,7 @@ export const SelectMenuHeader = ({
     label,
 }: SelectMenuHeaderProps): React.ReactElement => {
     return (
-        <Stack direction="row" textAlign={"center"} minHeight={"30px"} key="selected-item" gap={1}>
+        <Stack direction="row" textAlign="center" minHeight="30px" key="selected-item" gap={1}>
             {/** Back arrow button when an option is selected */}
             {showBackButton && (
                 <IconButton onClick={onBackButton} id="select-menu-back-button" sx={{ mr: 1 }}>
@@ -220,7 +214,7 @@ export const SelectMenuHeader = ({
             )}
 
             {/** Label with either the header text, or the name of the selected option if an option is selected */}
-            <Stack alignSelf={"center"}>
+            <Stack alignSelf="center">
                 <Label size="sm" className="text-center mt-[4pt] mb-[2pt] mx-[5%]">
                     {label}
                 </Label>
diff --git a/fission/src/ui/components/StyledComponents.tsx b/fission/src/ui/components/StyledComponents.tsx
index 5bf16dd4da..c0d8d61c0c 100644
--- a/fission/src/ui/components/StyledComponents.tsx
+++ b/fission/src/ui/components/StyledComponents.tsx
@@ -325,7 +325,7 @@ interface LabelWithTooltipProps {
 
 export const LabelWithTooltip: React.FC<LabelWithTooltipProps> = ({ labelText, tooltipText }) => {
     return (
-        <Stack direction="row" alignItems={"center"} textAlign={"center"}>
+        <Stack direction="row" alignItems="center" textAlign="center">
             <Label size="sm">{labelText}</Label>
             <CustomTooltip text={tooltipText} />
         </Stack>
diff --git a/fission/src/ui/components/TransformGizmoControl.tsx b/fission/src/ui/components/TransformGizmoControl.tsx
index d1a0bd7b7f..69aea8f0d3 100644
--- a/fission/src/ui/components/TransformGizmoControl.tsx
+++ b/fission/src/ui/components/TransformGizmoControl.tsx
@@ -58,19 +58,19 @@ const TransformGizmoControl: React.FC<TransformGizmoControlProps> = ({
     const buttons = []
     if (!translateDisabled)
         buttons.push(
-            <ToggleButton key="translate-button" value={"translate"}>
+            <ToggleButton key="translate-button" value="translate">
                 Move
             </ToggleButton>
         )
     if (!rotateDisabled)
         buttons.push(
-            <ToggleButton key="rotate-button" value={"rotate"}>
+            <ToggleButton key="rotate-button" value="rotate">
                 Rotate
             </ToggleButton>
         )
     if (!scaleDisabled)
         buttons.push(
-            <ToggleButton key="scale-button" value={"scale"}>
+            <ToggleButton key="scale-button" value="scale">
                 Scale
             </ToggleButton>
         )
diff --git a/fission/src/ui/components/WPILibConnectionStatus.tsx b/fission/src/ui/components/WPILibConnectionStatus.tsx
index a2b1c64113..bc2f4d132b 100644
--- a/fission/src/ui/components/WPILibConnectionStatus.tsx
+++ b/fission/src/ui/components/WPILibConnectionStatus.tsx
@@ -17,7 +17,9 @@ const WPILibConnectionStatus: React.FC = () => {
         return () => clearInterval(handle)
     }, [])
 
-    return enabled ? (
+    if (!enabled) return null
+
+    return (
         <Stack
             direction="row"
             sx={{ bgcolor: "background.default" }}
@@ -30,8 +32,6 @@ const WPILibConnectionStatus: React.FC = () => {
             )}
             <Label size="sm">Code Connection</Label>
         </Stack>
-    ) : (
-        <></>
     )
 }
 
diff --git a/fission/src/ui/modals/MatchResultsModal.tsx b/fission/src/ui/modals/MatchResultsModal.tsx
index 1e5ec9bed7..3f09c20bef 100644
--- a/fission/src/ui/modals/MatchResultsModal.tsx
+++ b/fission/src/ui/modals/MatchResultsModal.tsx
@@ -74,7 +74,7 @@ const MatchResultsModal: React.FC<ModalImplProps<void, void>> = ({ modal }) => {
             <Divider sx={{ my: "1rem" }} />
             <Stack>
                 {entries.map(e => (
-                    <Stack key={e.name} direction="row" justifyContent={"space-between"}>
+                    <Stack key={e.name} direction="row" justifyContent="space-between">
                         <Label size="md">{e.name}</Label>
                         <Label size="md">{e.value}</Label>
                     </Stack>
@@ -84,27 +84,27 @@ const MatchResultsModal: React.FC<ModalImplProps<void, void>> = ({ modal }) => {
             <LabelStyled winnerColor={primaryColor} fontSize="1.25rem">
                 Robot Score Contributions
             </LabelStyled>
-            <Stack direction={"row"} justifyContent={"space-between"} gap={"1rem"}>
-                <Stack direction={"column"}>
+            <Stack direction="row" justifyContent="space-between" gap="1rem">
+                <Stack direction="column">
                     <LabelStyled winnerColor={redAllianceColor} fontSize="1rem">
                         Red Alliance
                     </LabelStyled>
                     <div className="flex flex-col">
                         {redRobotScores.map(e => (
-                            <Stack key={e.name} direction="row" justifyContent={"space-between"}>
+                            <Stack key={e.name} direction="row" justifyContent="space-between">
                                 <Label size="md">{e.name}</Label>
                                 <Label size="md">{e.value}</Label>
                             </Stack>
                         ))}
                     </div>
                 </Stack>
-                <Stack direction={"column"}>
+                <Stack direction="column">
                     <LabelStyled winnerColor={blueAllianceColor} fontSize="1rem">
                         Blue Alliance
                     </LabelStyled>
                     <div className="flex flex-col">
                         {blueRobotScores.map(e => (
-                            <Stack key={e.name} direction="row" justifyContent={"space-between"}>
+                            <Stack key={e.name} direction="row" justifyContent="space-between">
                                 <Label size="md">{e.name}</Label>
                                 <Label size="md">{e.value}</Label>
                             </Stack>
diff --git a/fission/src/ui/modals/MultiplayerStartModal.tsx b/fission/src/ui/modals/MultiplayerStartModal.tsx
index 4b80b7c34b..92b12aaf39 100644
--- a/fission/src/ui/modals/MultiplayerStartModal.tsx
+++ b/fission/src/ui/modals/MultiplayerStartModal.tsx
@@ -31,7 +31,7 @@ const MultiplayerStartModal: React.FC<ModalImplProps<void, MultiplayerStartMenuC
     return (
         <Stack direction="column">
             <TextField
-                type={"text"}
+                type="text"
                 value={name}
                 sx={{ input: { color: "#ffffff" } }}
                 placeholder="Name"
@@ -42,7 +42,7 @@ const MultiplayerStartModal: React.FC<ModalImplProps<void, MultiplayerStartMenuC
                 }}
             />
             <Button
-                value={"Create Game"}
+                value="Create Game"
                 onClick={async () => {
                     if (!isValidName) {
                         globalAddToast("warning", "Invalid Name", "Must be at least 3 characters")
@@ -60,7 +60,7 @@ const MultiplayerStartModal: React.FC<ModalImplProps<void, MultiplayerStartMenuC
             </Button>
             <Divider />
             <TextField
-                type={"text"}
+                type="text"
                 value={room}
                 sx={{ input: { color: "#ffffff" } }}
                 placeholder="000000"
diff --git a/fission/src/ui/modals/configuring/SettingsModal.tsx b/fission/src/ui/modals/configuring/SettingsModal.tsx
index 55158e8a16..0297e2a4f5 100644
--- a/fission/src/ui/modals/configuring/SettingsModal.tsx
+++ b/fission/src/ui/modals/configuring/SettingsModal.tsx
@@ -121,7 +121,7 @@ const GeneralTab: React.FC<GeneralTabProps> = ({ writePreference }) => (
             min={0.1}
             max={2.0}
             defaultValue={PreferencesSystem.getUserPreference("SceneRotationSensitivity")}
-            label={"Scene Rotation Sensitivity"}
+            label="Scene Rotation Sensitivity"
             onChange={value => writePreference("SceneRotationSensitivity", value)}
             step={0.1}
             tooltip="Controls how fast the scene rotates when dragging with the mouse."
@@ -132,7 +132,7 @@ const GeneralTab: React.FC<GeneralTabProps> = ({ writePreference }) => (
             min={0.1}
             max={3.0}
             defaultValue={PreferencesSystem.getUserPreference("ScenePanSensitivity")}
-            label={"Scene Pan Sensitivity"}
+            label="Scene Pan Sensitivity"
             onChange={value => writePreference("ScenePanSensitivity", value)}
             step={0.1}
             tooltip="Controls how fast the scene pans when dragging with the right mouse button."
@@ -143,7 +143,7 @@ const GeneralTab: React.FC<GeneralTabProps> = ({ writePreference }) => (
             min={0.06}
             max={6.0}
             defaultValue={PreferencesSystem.getUserPreference("ViewCubeRotationSensitivity")}
-            label={"ViewCube Rotation Sensitivity"}
+            label="ViewCube Rotation Sensitivity"
             onChange={value => writePreference("ViewCubeRotationSensitivity", value)}
             step={0.06}
             tooltip="Controls how fast the view changes when dragging on the view cube."
@@ -216,7 +216,7 @@ const GeneralTab: React.FC<GeneralTabProps> = ({ writePreference }) => (
                 min={0}
                 max={100}
                 defaultValue={PreferencesSystem.getUserPreference("SFXVolume")}
-                label={"SFX Volume"}
+                label="SFX Volume"
                 onChange={value => writePreference("SFXVolume", value)}
                 tooltip="Volume of sound effects (%)."
             />
@@ -438,7 +438,7 @@ const GraphicsTab: React.FC<GraphicsTabProps> = ({ onActionsChange }) => {
                     setAntiAliasing(checked)
                     setReload(true)
                 }}
-                tooltip={"Requires browser refresh to fully apply"}
+                tooltip="Requires browser refresh to fully apply"
             />
         </Stack>
     )
diff --git a/fission/src/ui/modals/configuring/rio-config/RCCreateDeviceModal.tsx b/fission/src/ui/modals/configuring/rio-config/RCCreateDeviceModal.tsx
index 8e4ccd0ccc..021420f1ac 100644
--- a/fission/src/ui/modals/configuring/rio-config/RCCreateDeviceModal.tsx
+++ b/fission/src/ui/modals/configuring/rio-config/RCCreateDeviceModal.tsx
@@ -51,7 +51,7 @@ const RCCreateDeviceModal: React.FC<ModalImplProps<void, void>> = ({ modal }) =>
             <InputLabel id="device-type">Type</InputLabel>
             <Select
                 labelId="device-type"
-                label={"Type"}
+                label="Type"
                 onChange={e => {
                     setType(e.target.value as DeviceType)
                 }}
diff --git a/fission/src/ui/panels/WsViewPanel.tsx b/fission/src/ui/panels/WsViewPanel.tsx
index 12a3e945cf..139ca20c67 100644
--- a/fission/src/ui/panels/WsViewPanel.tsx
+++ b/fission/src/ui/panels/WsViewPanel.tsx
@@ -174,7 +174,7 @@ const WSViewPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) => {
                     ))}
                 </Select>
                 {/* {deviceSelect} */}
-                {selectedDevice ? (
+                {selectedDevice && (
                     <Box>
                         <TextField placeholder="Field Name" onChange={e => setField(e.target.value)} />
                         <TextField placeholder="Value" onChange={e => setValue(e.target.value)} />
@@ -196,8 +196,6 @@ const WSViewPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) => {
                             Set
                         </Button>
                     </Box>
-                ) : (
-                    <></>
                 )}
             </Stack>
         </Stack>
diff --git a/fission/src/ui/panels/configuring/CreateNewMatchModeConfigPanel.tsx b/fission/src/ui/panels/configuring/CreateNewMatchModeConfigPanel.tsx
index 6f9dc11f1b..d8a92d9d7d 100644
--- a/fission/src/ui/panels/configuring/CreateNewMatchModeConfigPanel.tsx
+++ b/fission/src/ui/panels/configuring/CreateNewMatchModeConfigPanel.tsx
@@ -214,7 +214,7 @@ const CreateNewMatchModeConfigPanel: React.FC<PanelImplProps<void, void>> = ({ p
                             <Checkbox
                                 checked={field.value as boolean}
                                 onClick={value => updateField(fieldName, value)}
-                                label={""}
+                                label=""
                             />
                         }
                         label={label}
diff --git a/fission/src/ui/panels/configuring/MatchModeConfigPanel.tsx b/fission/src/ui/panels/configuring/MatchModeConfigPanel.tsx
index c492ba9c90..05d037c86f 100644
--- a/fission/src/ui/panels/configuring/MatchModeConfigPanel.tsx
+++ b/fission/src/ui/panels/configuring/MatchModeConfigPanel.tsx
@@ -152,9 +152,9 @@ const ItemCard: React.FC<ItemCardProps> = ({ id, name, primaryOnClick, secondary
         <Stack
             direction="row"
             key={id}
-            justifyContent={"space-between"}
-            alignItems={"center"}
-            gap={"1rem"}
+            justifyContent="space-between"
+            alignItems="center"
+            gap="1rem"
             sx={{ px: 1, py: 0.5 }}
         >
             <Label size="sm" className="text-wrap break-all">
@@ -163,9 +163,9 @@ const ItemCard: React.FC<ItemCardProps> = ({ id, name, primaryOnClick, secondary
             <Stack
                 key={`button-box-${id}`}
                 direction="row-reverse"
-                gap={"0.5rem"}
-                justifyContent={"center"}
-                alignItems={"center"}
+                gap="0.5rem"
+                justifyContent="center"
+                alignItems="center"
             >
                 {secondaryOnClick && (
                     <NegativeButton onClick={secondaryOnClick}>
@@ -346,13 +346,13 @@ const MatchModeConfigPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) =
                         : "Spawn positions are not configured for this field"
                 }
                 checked={useSpawnPositions}
-                label={"Move Robots to Starting Positions"}
+                label="Move Robots to Starting Positions"
                 onClick={v => setUseSpawnPositions(v)}
             />
             <Divider />
             <input ref={fileUploadRef} onChange={onInputChanged} type="file" hidden={true} accept=".json" />
 
-            <Box alignSelf={"center"} sx={{ display: "flex", flexDirection: "column", gap: 1, my: 1 }}>
+            <Box alignSelf="center" sx={{ display: "flex", flexDirection: "column", gap: 1, my: 1 }}>
                 <Button
                     onClick={() => {
                         createNewMatchModeConfig()
diff --git a/fission/src/ui/panels/configuring/assembly-config/ConfigurePanel.tsx b/fission/src/ui/panels/configuring/assembly-config/ConfigurePanel.tsx
index 81a35f60d6..2f70ff970b 100644
--- a/fission/src/ui/panels/configuring/assembly-config/ConfigurePanel.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/ConfigurePanel.tsx
@@ -480,8 +480,8 @@ const ConfigurePanel: React.FC<PanelImplProps<void, ConfigurePanelCustomProps>>
                             <AssemblyExportButton selectedAssembly={selectedAssembly} />
                             <Spacer height={16} />
                             <Button
-                                className={"w-full"}
-                                color={"warning"}
+                                className="w-full"
+                                color="warning"
                                 onClick={() => {
                                     closePanel(panel!.id, CloseType.Accept)
                                     selectedAssembly.resetPreferences()
diff --git a/fission/src/ui/panels/configuring/assembly-config/configure/AssemblyExport.tsx b/fission/src/ui/panels/configuring/assembly-config/configure/AssemblyExport.tsx
index ebef0c5da1..0fca729b9d 100644
--- a/fission/src/ui/panels/configuring/assembly-config/configure/AssemblyExport.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/configure/AssemblyExport.tsx
@@ -27,7 +27,7 @@ const AssemblyExportButton: React.FC<ConfigModeSelectionProps> = ({ selectedAsse
         }
     }, [selectedAssembly])
     return (
-        <Button className={"w-full"} color={"secondary"} onClick={exportHandler}>
+        <Button className="w-full" color="secondary" onClick={exportHandler}>
             Export
             <Spacer width={5} />
             <FaFileDownload />
diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/BrainSelectionInterface.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/BrainSelectionInterface.tsx
index f0ab8148ac..052dd64260 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/BrainSelectionInterface.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/BrainSelectionInterface.tsx
@@ -35,8 +35,8 @@ export default function BrainSelectionInterface({ selectedAssembly }: BrainSelec
                 alignSelf: "center",
             }}
         >
-            <ToggleButton value={"synthesis"}>Synthesis Brain</ToggleButton>
-            <ToggleButton value={"wpilib"}>WPILib Brain</ToggleButton>
+            <ToggleButton value="synthesis">Synthesis Brain</ToggleButton>
+            <ToggleButton value="wpilib">WPILib Brain</ToggleButton>
         </ToggleButtonGroup>
     )
 }
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 1ac5413dd1..d95012ff15 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/ConfigureGamepiecePickupInterface.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/ConfigureGamepiecePickupInterface.tsx
@@ -139,48 +139,46 @@ const ConfigureGamepiecePickupInterface: React.FC<ConfigPickupProps> = ({ select
     }, [])
 
     const gizmoComponent = useMemo(() => {
-        if (selectedRobot?.intakePreferences) {
-            const postGizmoCreation = (gizmo: GizmoSceneObject) => {
-                const material = (gizmo.obj as THREE.Mesh).material as THREE.Material
-                material.depthTest = false
-
-                const deltaTransformation = convertArrayToThreeMatrix4(
-                    selectedRobot.intakePreferences!.deltaTransformation
-                )
-
-                let nodeBodyId = selectedRobot.mechanism.nodeToBody.get(
-                    selectedRobot.intakePreferences!.parentNode ?? selectedRobot.rootNodeId
-                )
-                if (!nodeBodyId) {
-                    // In the event that something about the id generation for the rigid nodes changes and parent node id is no longer in use
-                    nodeBodyId = selectedRobot.mechanism.nodeToBody.get(selectedRobot.rootNodeId)!
-                }
-
-                /** W = L x R. See save() for math details */
-                const robotTransformation = convertJoltMat44ToThreeMatrix4(
-                    World.physicsSystem.getBody(nodeBodyId)!.GetWorldTransform()
-                )
-                const gizmoTransformation = deltaTransformation.premultiply(robotTransformation)
-
-                gizmo.setTransform(gizmoTransformation)
+        if (!selectedRobot?.intakePreferences) {
+            gizmoRef.current = undefined
+            return null
+        }
+
+        const postGizmoCreation = (gizmo: GizmoSceneObject) => {
+            const material = (gizmo.obj as THREE.Mesh).material as THREE.Material
+            material.depthTest = false
+
+            const deltaTransformation = convertArrayToThreeMatrix4(selectedRobot.intakePreferences!.deltaTransformation)
+
+            let nodeBodyId = selectedRobot.mechanism.nodeToBody.get(
+                selectedRobot.intakePreferences!.parentNode ?? selectedRobot.rootNodeId
+            )
+            if (!nodeBodyId) {
+                // In the event that something about the id generation for the rigid nodes changes and parent node id is no longer in use
+                nodeBodyId = selectedRobot.mechanism.nodeToBody.get(selectedRobot.rootNodeId)!
             }
 
-            return (
-                <TransformGizmoControl
-                    key="pickup-transform-gizmo"
-                    size={1.5}
-                    gizmoRef={gizmoRef}
-                    defaultMode="translate"
-                    defaultMesh={placeholderMesh}
-                    scaleDisabled={true}
-                    rotateDisabled={true}
-                    postGizmoCreation={postGizmoCreation}
-                />
+            /** W = L x R. See save() for math details */
+            const robotTransformation = convertJoltMat44ToThreeMatrix4(
+                World.physicsSystem.getBody(nodeBodyId)!.GetWorldTransform()
             )
-        } else {
-            gizmoRef.current = undefined
-            return <></>
+            const gizmoTransformation = deltaTransformation.premultiply(robotTransformation)
+
+            gizmo.setTransform(gizmoTransformation)
         }
+
+        return (
+            <TransformGizmoControl
+                key="pickup-transform-gizmo"
+                size={1.5}
+                gizmoRef={gizmoRef}
+                defaultMode="translate"
+                defaultMesh={placeholderMesh}
+                scaleDisabled={true}
+                rotateDisabled={true}
+                postGizmoCreation={postGizmoCreation}
+            />
+        )
     }, [
         selectedRobot?.intakePreferences,
         placeholderMesh,
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 ed22ae5bd7..59a34a1b24 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/ConfigureShotTrajectoryInterface.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/ConfigureShotTrajectoryInterface.tsx
@@ -117,48 +117,48 @@ const ConfigureShotTrajectoryInterface: React.FC<ConfigEjectorProps> = ({ select
     }, [])
 
     const gizmoComponent = useMemo(() => {
-        if (selectedRobot?.ejectorPreferences) {
-            const postGizmoCreation = (gizmo: GizmoSceneObject) => {
-                const material = (gizmo.obj as THREE.Mesh).material as THREE.Material
-                material.depthTest = false
-
-                const deltaTransformation = convertArrayToThreeMatrix4(
-                    selectedRobot.ejectorPreferences!.deltaTransformation
-                )
-
-                let nodeBodyId = selectedRobot.mechanism.nodeToBody.get(
-                    selectedRobot.ejectorPreferences!.parentNode ?? selectedRobot.rootNodeId
-                )
-                if (!nodeBodyId) {
-                    // In the event that something about the id generation for the rigid nodes changes and parent node id is no longer in use
-                    nodeBodyId = selectedRobot.mechanism.nodeToBody.get(selectedRobot.rootNodeId)!
-                }
-
-                /** W = L x R. See save() for math details */
-                const robotTransformation = convertJoltMat44ToThreeMatrix4(
-                    World.physicsSystem.getBody(nodeBodyId)!.GetWorldTransform()
-                )
-                const gizmoTransformation = deltaTransformation.premultiply(robotTransformation)
-
-                gizmo.obj.position.setFromMatrixPosition(gizmoTransformation)
-                gizmo.obj.rotation.setFromRotationMatrix(gizmoTransformation)
+        if (!selectedRobot?.ejectorPreferences) {
+            gizmoRef.current = undefined
+            return null
+        }
+
+        const postGizmoCreation = (gizmo: GizmoSceneObject) => {
+            const material = (gizmo.obj as THREE.Mesh).material as THREE.Material
+            material.depthTest = false
+
+            const deltaTransformation = convertArrayToThreeMatrix4(
+                selectedRobot.ejectorPreferences!.deltaTransformation
+            )
+
+            let nodeBodyId = selectedRobot.mechanism.nodeToBody.get(
+                selectedRobot.ejectorPreferences!.parentNode ?? selectedRobot.rootNodeId
+            )
+            if (!nodeBodyId) {
+                // In the event that something about the id generation for the rigid nodes changes and parent node id is no longer in use
+                nodeBodyId = selectedRobot.mechanism.nodeToBody.get(selectedRobot.rootNodeId)!
             }
 
-            return (
-                <TransformGizmoControl
-                    key="shot-transform-gizmo"
-                    size={1.5}
-                    gizmoRef={gizmoRef}
-                    defaultMode="translate"
-                    defaultMesh={placeholderMesh}
-                    scaleDisabled={true}
-                    postGizmoCreation={postGizmoCreation}
-                />
+            /** W = L x R. See save() for math details */
+            const robotTransformation = convertJoltMat44ToThreeMatrix4(
+                World.physicsSystem.getBody(nodeBodyId)!.GetWorldTransform()
             )
-        } else {
-            gizmoRef.current = undefined
-            return <></>
+            const gizmoTransformation = deltaTransformation.premultiply(robotTransformation)
+
+            gizmo.obj.position.setFromMatrixPosition(gizmoTransformation)
+            gizmo.obj.rotation.setFromRotationMatrix(gizmoTransformation)
         }
+
+        return (
+            <TransformGizmoControl
+                key="shot-transform-gizmo"
+                size={1.5}
+                gizmoRef={gizmoRef}
+                defaultMode="translate"
+                defaultMesh={placeholderMesh}
+                scaleDisabled={true}
+                postGizmoCreation={postGizmoCreation}
+            />
+        )
     }, [
         placeholderMesh,
         selectedRobot.ejectorPreferences,
diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/MetadataConfigInterface.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/MetadataConfigInterface.tsx
index a2b23ef746..722d72888a 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/MetadataConfigInterface.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/MetadataConfigInterface.tsx
@@ -16,7 +16,7 @@ const MetadataConfigInterface: React.FC<MetadataConfigInterfaceProps> = ({ selec
     }, [name, selectedAssembly])
     return (
         <Stack gap={2} direction="column">
-            <Label size={"sm"}>Asset Name</Label>
+            <Label size="sm">Asset Name</Label>
             <TextField
                 placeholder={selectedAssembly.mirabufInstance.parser.assembly.info?.name ?? "Unknown"}
                 className="w-full"
diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/SequentialBehaviorsInterface.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/SequentialBehaviorsInterface.tsx
index c657a31fd0..08014d183b 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/SequentialBehaviorsInterface.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/SequentialBehaviorsInterface.tsx
@@ -56,7 +56,7 @@ const BehaviorCard: React.FC<BehaviorCardProps> = ({
                             update()
                         }}
                         disabled={!selectable}
-                        color={"secondary"}
+                        color="secondary"
                         sx={{
                             borderColor: !selectable ? "transparent" : "#888888",
                             color: selectable || hasParent ? undefined : "white !important",
@@ -84,7 +84,7 @@ const BehaviorCard: React.FC<BehaviorCardProps> = ({
                             onSetPressed()
                             update()
                         }}
-                        className={"h-full"}
+                        className="h-full"
                         color={hasParent ? "warning" : "primary"}
                         disabled={selectable || hasChild}
 
diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/SubsystemRowInterface.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/SubsystemRowInterface.tsx
index 054f3f8a04..325a3270eb 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/SubsystemRowInterface.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/SubsystemRowInterface.tsx
@@ -70,7 +70,7 @@ const SubsystemRowInterface: React.FC<SubsystemRowProps> = ({ robot, group, save
 
     return (
         <>
-            <Stack justifyContent={"space-between"} alignItems={"center"} gap={"1rem"}>
+            <Stack justifyContent="space-between" alignItems="center" gap="1rem">
                 <Stack direction="column">
                     {group.controls.map(control => (
                         <ControlSliders key={control.label} robot={robot} control={control} />
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 09bd018174..517be0c093 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
@@ -76,67 +76,66 @@ const ConfigureInputsInterface: React.FC<PanelImplProps<void, ConfigurePanelCust
         return map
     }, [schemes])
 
+    if (selectedScheme)
+        return (
+            <ConfigureSchemeInterface
+                selectedScheme={selectedScheme}
+                panelId={panel?.id}
+                onBack={() => setSelectedScheme(undefined)}
+            />
+        )
+
+    /** Select menu with input schemes */
     return (
-        <>
-            {/** Select menu with input schemes */}
-            {!selectedScheme ? (
-                <SelectMenu
-                    options={[...schemeOptionMap.values()]}
-                    onOptionSelected={val => {
-                        setSelectedScheme((val as SchemeSelectionOption)?.scheme)
-                        if (val == undefined) {
-                            EventSystem.dispatch("ConfigurationSavedEvent")
-                        }
-                    }}
-                    defaultHeaderText={"Select an Input Scheme"}
-                    onDelete={val => {
-                        if (!(val instanceof SchemeSelectionOption)) return
-
-                        // Fetch current custom schemes
-                        InputSchemeManager.saveSchemes(panel?.id)
-                        InputSchemeManager.resetDefaultSchemes(panel?.id)
-
-                        // Find the scheme to remove in preferences
-                        const schemes = PreferencesSystem.getUserPreference("InputSchemes")
-                        const index = schemes.indexOf(val.scheme)
-
-                        // If currently bound to a robot, remove the binding
-                        for (const [key, value] of InputSystem.brainIndexSchemeMap.entries()) {
-                            if (value == schemes[index]) {
-                                InputSystem.brainIndexSchemeMap.delete(key)
-                            }
-                        }
-
-                        // Find and remove this input scheme from preferences
-                        schemes.splice(index, 1)
-
-                        // Save to preferences
-                        PreferencesSystem.setUserPreference("InputSchemes", schemes)
-                        PreferencesSystem.savePreferences()
-
-                        // TODO: use preference event instead?
-                        EventSystem.dispatch("InputSchemeChanged", { panelId: panel?.id })
-                        // Update UI with new schemes
-                        setSchemes(InputSchemeManager.allInputSchemes)
-                    }}
-                    deleteCondition={val => {
-                        if (!(val instanceof SchemeSelectionOption)) return false
-
-                        return val.scheme.customized
-                    }}
-                    onAddClicked={() => {
-                        openModal(NewInputSchemeModal, undefined)
-                    }}
-                    defaultSelectedOption={selectedScheme ? schemeOptionMap.get(selectedScheme) : undefined}
-                />
-            ) : (
-                <ConfigureSchemeInterface
-                    selectedScheme={selectedScheme}
-                    panelId={panel?.id}
-                    onBack={() => setSelectedScheme(undefined)}
-                />
-            )}
-        </>
+        <SelectMenu
+            options={[...schemeOptionMap.values()]}
+            onOptionSelected={val => {
+                setSelectedScheme((val as SchemeSelectionOption)?.scheme)
+                if (val == undefined) {
+                    EventSystem.dispatch("ConfigurationSavedEvent")
+                }
+            }}
+            defaultHeaderText="Select an Input Scheme"
+            onDelete={val => {
+                if (!(val instanceof SchemeSelectionOption)) return
+
+                // Fetch current custom schemes
+                InputSchemeManager.saveSchemes(panel?.id)
+                InputSchemeManager.resetDefaultSchemes(panel?.id)
+
+                // Find the scheme to remove in preferences
+                const schemes = PreferencesSystem.getUserPreference("InputSchemes")
+                const index = schemes.indexOf(val.scheme)
+
+                // If currently bound to a robot, remove the binding
+                for (const [key, value] of InputSystem.brainIndexSchemeMap.entries()) {
+                    if (value == schemes[index]) {
+                        InputSystem.brainIndexSchemeMap.delete(key)
+                    }
+                }
+
+                // Find and remove this input scheme from preferences
+                schemes.splice(index, 1)
+
+                // Save to preferences
+                PreferencesSystem.setUserPreference("InputSchemes", schemes)
+                PreferencesSystem.savePreferences()
+
+                // TODO: use preference event instead?
+                EventSystem.dispatch("InputSchemeChanged", { panelId: panel?.id })
+                // Update UI with new schemes
+                setSchemes(InputSchemeManager.allInputSchemes)
+            }}
+            deleteCondition={val => {
+                if (!(val instanceof SchemeSelectionOption)) return false
+
+                return val.scheme.customized
+            }}
+            onAddClicked={() => {
+                openModal(NewInputSchemeModal, undefined)
+            }}
+            defaultSelectedOption={selectedScheme ? schemeOptionMap.get(selectedScheme) : undefined}
+        />
     )
 }
 
diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx
index bce9b03f8b..da47d9cce7 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx
@@ -55,13 +55,13 @@ const ConfigureSchemeInterface: React.FC<ConfigSchemeProps> = ({ selectedScheme,
             {/** Back button to return to input scheme selection */}
             {onBack && (
                 <>
-                    <Stack direction="row" textAlign={"center"} minHeight={"30px"} key="selected-item">
+                    <Stack direction="row" textAlign="center" minHeight="30px" key="selected-item">
                         {/** Back arrow button when an option is selected */}
                         <IconButton onClick={onBack} id="select-menu-back-button">
                             <SynthesisIcons.LEFT_ARROW_LARGE />
                         </IconButton>
 
-                        <Stack alignSelf={"center"}>
+                        <Stack alignSelf="center">
                             <Label size="sm" className="text-center mt-[4pt] mb-[2pt] mx-[5%]">
                                 Back to Input Schemes
                             </Label>
diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/InputSelectionComponents.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/InputSelectionComponents.tsx
index 4cdb3cd8a7..0e891e2302 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/InputSelectionComponents.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/InputSelectionComponents.tsx
@@ -119,7 +119,7 @@ export const KeyboardAxisSelection: React.FC<InputSelectionProps> = ({ input, se
             <Stack direction="row" gap={10} alignItems="center" justifyContent="space-between" width="98%">
                 <Label size="md">{toTitleCase(input.inputName)}</Label>
 
-                <Stack direction="row" gap="10px" alignItems={"center"}>
+                <Stack direction="row" gap="10px" alignItems="center">
                     <SynthesisIcons.ADD />
                     {/* Positive key */}
                     <Button
@@ -219,7 +219,7 @@ export const GamepadButtonAxisSelection: React.FC<InputSelectionProps> = ({
         <Stack direction="row" gap={10} alignItems="center" justifyContent="space-between" width="98%">
             <Label size="md">{toTitleCase(input.inputName)}</Label>
 
-            <Stack direction="row" gap="10px" alignItems={"center"}>
+            <Stack direction="row" gap="10px" alignItems="center">
                 {/* Positive gamepad button */}
                 <SynthesisIcons.ADD />
                 <Button
diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/scoring/ConfigureProtectedZonesInterface.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/scoring/ConfigureProtectedZonesInterface.tsx
index c372b832f9..92cd41623c 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/scoring/ConfigureProtectedZonesInterface.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/scoring/ConfigureProtectedZonesInterface.tsx
@@ -26,34 +26,33 @@ interface ConfigureZonesProps {
 const ConfigureProtectedZonesInterface: React.FC<ConfigureZonesProps> = ({ selectedField, initialZones }) => {
     const [selectedZone, setSelectedZone] = useState<ProtectedZonePreferences | undefined>(undefined)
 
+    if (selectedZone === undefined)
+        return (
+            <ManageProtectedZonesInterface
+                selectedField={selectedField}
+                initialZones={initialZones}
+                selectZone={setSelectedZone}
+            />
+        )
+
     return (
         <>
-            {selectedZone === undefined ? (
-                <ManageProtectedZonesInterface
-                    selectedField={selectedField}
-                    initialZones={initialZones}
-                    selectZone={setSelectedZone}
-                />
-            ) : (
-                <>
-                    <SelectMenuHeader
-                        label={`Zone ${selectedZone.name}`}
-                        showBackButton={true}
-                        onBackButton={() => {
-                            EventSystem.dispatch("ConfigurationSavedEvent")
-                            setSelectedZone(undefined)
-                        }}
-                    />
-                    <Divider />
-                    <ProtectedZoneConfigInterface
-                        selectedField={selectedField}
-                        selectedZone={selectedZone}
-                        saveAllZones={() => {
-                            saveProtectedZones(selectedField.fieldPreferences?.protectedZones, selectedField)
-                        }}
-                    />
-                </>
-            )}
+            <SelectMenuHeader
+                label={`Zone ${selectedZone.name}`}
+                showBackButton={true}
+                onBackButton={() => {
+                    EventSystem.dispatch("ConfigurationSavedEvent")
+                    setSelectedZone(undefined)
+                }}
+            />
+            <Divider />
+            <ProtectedZoneConfigInterface
+                selectedField={selectedField}
+                selectedZone={selectedZone}
+                saveAllZones={() => {
+                    saveProtectedZones(selectedField.fieldPreferences?.protectedZones, selectedField)
+                }}
+            />
         </>
     )
 }
diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/scoring/ConfigureScoringZonesInterface.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/scoring/ConfigureScoringZonesInterface.tsx
index b4eea38535..e959326911 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/scoring/ConfigureScoringZonesInterface.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/scoring/ConfigureScoringZonesInterface.tsx
@@ -26,34 +26,33 @@ interface ConfigureZonesProps {
 const ConfigureScoringZonesInterface: React.FC<ConfigureZonesProps> = ({ selectedField, initialZones }) => {
     const [selectedZone, setSelectedZone] = useState<ScoringZonePreferences | undefined>(undefined)
 
+    if (selectedZone === undefined)
+        return (
+            <ManageScoringZonesInterface
+                selectedField={selectedField}
+                initialZones={initialZones}
+                selectZone={setSelectedZone}
+            />
+        )
+
     return (
         <>
-            {selectedZone === undefined ? (
-                <ManageScoringZonesInterface
-                    selectedField={selectedField}
-                    initialZones={initialZones}
-                    selectZone={setSelectedZone}
-                />
-            ) : (
-                <>
-                    <SelectMenuHeader
-                        label={`Zone ${selectedZone.name}`}
-                        showBackButton={true}
-                        onBackButton={() => {
-                            EventSystem.dispatch("ConfigurationSavedEvent")
-                            setSelectedZone(undefined)
-                        }}
-                    />
-                    <Divider />
-                    <ScoringZoneConfigInterface
-                        selectedField={selectedField}
-                        selectedZone={selectedZone}
-                        saveAllZones={() => {
-                            saveScoringZones(selectedField.fieldPreferences?.scoringZones, selectedField)
-                        }}
-                    />
-                </>
-            )}
+            <SelectMenuHeader
+                label={`Zone ${selectedZone.name}`}
+                showBackButton={true}
+                onBackButton={() => {
+                    EventSystem.dispatch("ConfigurationSavedEvent")
+                    setSelectedZone(undefined)
+                }}
+            />
+            <Divider />
+            <ScoringZoneConfigInterface
+                selectedField={selectedField}
+                selectedZone={selectedZone}
+                saveAllZones={() => {
+                    saveScoringZones(selectedField.fieldPreferences?.scoringZones, selectedField)
+                }}
+            />
         </>
     )
 }
diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/zones/ManageZonesBase.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/zones/ManageZonesBase.tsx
index 82d749f7c1..11a007762d 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/zones/ManageZonesBase.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/zones/ManageZonesBase.tsx
@@ -91,11 +91,11 @@ export default function ManageZonesBase<TZone extends BaseZonePreferences>(props
                                     }}
                                 />
 
-                                <Stack direction={"column"} gap={1} justifyContent={"space-evenly"}>
+                                <Stack direction="column" gap={1} justifyContent="space-evenly">
                                     <Label size="md">{item.name}</Label>
                                     {item.pointsLabel ? <Label size="sm">{item.pointsLabel}</Label> : null}
                                 </Stack>
-                                <Stack direction={"column"} gap={1} justifyContent={"space-evenly"} ml={"auto"}>
+                                <Stack direction="column" gap={1} justifyContent="space-evenly" ml="auto">
                                     <EditButton
                                         onClick={() => {
                                             selectZone(zonePrefs)
@@ -117,7 +117,7 @@ export default function ManageZonesBase<TZone extends BaseZonePreferences>(props
             ) : (
                 <Label size="md">{emptyLabel}</Label>
             )}
-            <Button color={"success"} variant={"contained"} onClick={saveHandler} className={"w-full"}>
+            <Button color="success" variant="contained" onClick={saveHandler} className="w-full">
                 <SynthesisIcons.ADD_LARGE />
             </Button>
         </Stack>
diff --git a/fission/src/ui/panels/configuring/assembly-config/interfaces/zones/ZoneConfigBase.tsx b/fission/src/ui/panels/configuring/assembly-config/interfaces/zones/ZoneConfigBase.tsx
index 7befd9e19a..5c47680038 100644
--- a/fission/src/ui/panels/configuring/assembly-config/interfaces/zones/ZoneConfigBase.tsx
+++ b/fission/src/ui/panels/configuring/assembly-config/interfaces/zones/ZoneConfigBase.tsx
@@ -202,21 +202,21 @@ export default function ZoneConfigBase<TZone extends BaseZonePreferences>(props:
     )
 
     const gizmoComponent = useMemo(() => {
-        if (selectedField && selectedZone) {
-            return (
-                <TransformGizmoControl
-                    key="zone-transform-gizmo"
-                    size={1.5}
-                    gizmoRef={gizmoRef}
-                    defaultMode="translate"
-                    defaultMesh={defaultGizmoMesh}
-                    postGizmoCreation={postGizmoCreation}
-                />
-            )
-        } else {
+        if (!selectedField || !selectedZone) {
             gizmoRef.current = undefined
-            return <></>
+            return null
         }
+
+        return (
+            <TransformGizmoControl
+                key="zone-transform-gizmo"
+                size={1.5}
+                gizmoRef={gizmoRef}
+                defaultMode="translate"
+                defaultMesh={defaultGizmoMesh}
+                postGizmoCreation={postGizmoCreation}
+            />
+        )
     }, [selectedField, selectedZone, defaultGizmoMesh, postGizmoCreation])
 
     const trySetSelectedNode = useCallback(
diff --git a/fission/src/ui/panels/configuring/initial-config/InputSchemeSelection.tsx b/fission/src/ui/panels/configuring/initial-config/InputSchemeSelection.tsx
index 4c56a0bb6c..2c82a46b4b 100644
--- a/fission/src/ui/panels/configuring/initial-config/InputSchemeSelection.tsx
+++ b/fission/src/ui/panels/configuring/initial-config/InputSchemeSelection.tsx
@@ -47,18 +47,18 @@ const SchemeSelector: React.FC<SchemeSelectorProps> = ({
 
     if (scheme.usesTouchControls && !matchMedia("(hover: none)").matches) return null
     return (
-        <Tooltip title={message} key={scheme.schemeName} placement={"left"}>
+        <Tooltip title={message} key={scheme.schemeName} placement="left">
             <Stack
                 direction="row"
-                justifyContent={"space-between"}
-                alignItems={"center"}
-                gap={"1rem"}
+                justifyContent="space-between"
+                alignItems="center"
+                gap="1rem"
                 key={scheme.schemeName}
             >
                 <Label size="sm">
                     {`${scheme.schemeName} | ${scheme.customized ? "Custom" : scheme.descriptiveName}`}
                 </Label>
-                <Stack direction="row-reverse" gap="0.25rem" justifyContent={"center"} alignItems={"center"}>
+                <Stack direction="row-reverse" gap="0.25rem" justifyContent="center" alignItems="center">
                     {/** Select button */}
                     <Box>
                         <PositiveButton
diff --git a/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx b/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx
index 01282a46ab..16344380d5 100644
--- a/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx
+++ b/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx
@@ -71,16 +71,16 @@ interface ItemCardProps {
 
 const ItemCard: React.FC<ItemCardProps> = ({ key, name, primaryButtonNode, primaryOnClick, secondaryOnClick }) => {
     return (
-        <Stack justifyContent={"space-between"} alignItems={"center"} gap={"1rem"} direction="row">
+        <Stack justifyContent="space-between" alignItems="center" gap="1rem" direction="row">
             <Label size="md" className="text-wrap break-all">
                 {name.replace(/.mira$/, "")}
             </Label>
             <Stack
                 key={`button-box-${key}`}
                 direction="row-reverse"
-                gap={"0.25rem"}
-                justifyContent={"center"}
-                alignItems={"center"}
+                gap="0.25rem"
+                justifyContent="center"
+                alignItems="center"
             >
                 <PositiveIconButton children={primaryButtonNode} onClick={primaryOnClick} />
                 {secondaryOnClick && <DeleteButton onClick={secondaryOnClick} />}
@@ -434,19 +434,15 @@ const ImportMirabufPanel: React.FC<PanelImplProps<void, ImportMirabufPanelCustom
             </Tabs>
             <Accordion defaultExpanded>
                 <AccordionSummary expandIcon={<SynthesisIcons.EXPAND_MORE_LARGE />}>
-                    {viewType === MiraType.ROBOT ? (
-                        <Label size="md" className="text-center mt-[4pt] mb-[2pt] mx-[5%]">
-                            {cachedRobotElements
+                    <Label size="md" className="text-center mt-[4pt] mb-[2pt] mx-[5%]">
+                        {viewType === MiraType.ROBOT
+                            ? cachedRobotElements
                                 ? `${cachedRobotElements.length} Saved Robot${cachedRobotElements.length === 1 ? "" : "s"}`
-                                : "Loading Saved Robots"}
-                        </Label>
-                    ) : (
-                        <Label size="md" className="text-center mt-[4pt] mb-[2pt] mx-[5%]">
-                            {cachedFieldElements
-                                ? `${cachedFieldElements.length} Saved Field${cachedFieldElements.length == 1 ? "" : "s"}`
-                                : "Loading Saved Fields"}
-                        </Label>
-                    )}
+                                : "Loading Saved Robots"
+                            : cachedFieldElements
+                              ? `${cachedFieldElements.length} Saved Field${cachedFieldElements.length == 1 ? "" : "s"}`
+                              : "Loading Saved Fields"}
+                    </Label>
                 </AccordionSummary>
                 <AccordionDetails>
                     {viewType === MiraType.ROBOT ? (
@@ -467,9 +463,9 @@ const ImportMirabufPanel: React.FC<PanelImplProps<void, ImportMirabufPanelCustom
                     <Stack
                         direction="row"
                         key={`remote-label-container`}
-                        gap={"0.25rem"}
-                        justifyContent={"center"}
-                        alignItems={"center"}
+                        gap="0.25rem"
+                        justifyContent="center"
+                        alignItems="center"
                     >
                         <Label size="md" className="text-center mt-[4pt] mb-[2pt] mx-[5%]">
                             {hubElements ? (
@@ -493,10 +489,8 @@ const ImportMirabufPanel: React.FC<PanelImplProps<void, ImportMirabufPanelCustom
                 <AccordionDetails>
                     {hubElements && hubElements.length > 0 ? (
                         hubElements
-                    ) : filesStatus.isDone ? (
-                        <Label size="sm">No Assets Found</Label>
                     ) : (
-                        <Label size="sm">Loading from APS...</Label>
+                        <Label size="sm">{filesStatus.isDone ? "No Assets Found" : "Loading from APS..."}</Label>
                     )}
                 </AccordionDetails>
             </Accordion>
@@ -537,7 +531,7 @@ const ImportMirabufPanel: React.FC<PanelImplProps<void, ImportMirabufPanelCustom
                     </Stack>
                 </AccordionDetails>
             </Accordion>
-            <Box alignSelf={"center"}>
+            <Box alignSelf="center">
                 <Button
                     onClick={() => {
                         openModal(ImportLocalMirabufModal, {
diff --git a/fission/src/ui/panels/simulation/AutoTestPanel.tsx b/fission/src/ui/panels/simulation/AutoTestPanel.tsx
index 753df6daf0..02ef47ac79 100644
--- a/fission/src/ui/panels/simulation/AutoTestPanel.tsx
+++ b/fission/src/ui/panels/simulation/AutoTestPanel.tsx
@@ -342,15 +342,15 @@ const AutoTestPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) => {
                         setEnd={setActiveProps}
                         state="Playing"
                     />
-                ) : activeProps.state === "End" ? (
-                    <End
-                        assembly={activeProps.assembly}
-                        setStaging={setActiveProps}
-                        captures={activeProps.captures}
-                        state="End"
-                    />
                 ) : (
-                    <></>
+                    activeProps.state === "End" && (
+                        <End
+                            assembly={activeProps.assembly}
+                            setStaging={setActiveProps}
+                            captures={activeProps.captures}
+                            state="End"
+                        />
+                    )
                 ))}
         </Stack>
     )
diff --git a/fission/src/ui/panels/simulation/WiringPanel.tsx b/fission/src/ui/panels/simulation/WiringPanel.tsx
index 18a1c064e9..f17d528a09 100644
--- a/fission/src/ui/panels/simulation/WiringPanel.tsx
+++ b/fission/src/ui/panels/simulation/WiringPanel.tsx
@@ -177,7 +177,7 @@ const SimIoComponent: React.FC<ConfigComponentProps> = ({ setConfigState, simCon
     }, [simConfig])
 
     return (
-        <Stack gap={4} direction={"column"} sx={{ width: "stretch" }}>
+        <Stack gap={4} direction="column" sx={{ width: "stretch" }}>
             <Label size="lg">Configure the Simulation's IO Modules</Label>
             <Box
                 sx={{
@@ -466,45 +466,41 @@ const WiringPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) => {
         configureScreen(panel!, { title: "Wiring Panel" }, { onBeforeAccept: save })
     }, [save])
 
+    if (!selectedAssembly || !simConfig) return "ERR"
+
     return (
-        <>
-            {selectedAssembly && simConfig ? (
-                <Box
-                    sx={{
-                        display: "flex",
-                        width: "70vw",
-                        height: "70vh",
-                    }}
-                >
-                    {configState === "wiring" && (
-                        <ReactFlowProvider>
-                            <WiringComponent
-                                reset={reset}
-                                simConfig={simConfig}
-                                selectedAssembly={selectedAssembly}
-                                setConfigState={setConfigState}
-                            />
-                        </ReactFlowProvider>
-                    )}
-                    {configState === "robotIO" && (
-                        <RobotIoComponent
-                            simConfig={simConfig}
-                            selectedAssembly={selectedAssembly}
-                            setConfigState={setConfigState}
-                        />
-                    )}
-                    {configState === "simIO" && (
-                        <SimIoComponent
-                            simConfig={simConfig}
-                            selectedAssembly={selectedAssembly}
-                            setConfigState={setConfigState}
-                        />
-                    )}
-                </Box>
-            ) : (
-                "ERRR"
+        <Box
+            sx={{
+                display: "flex",
+                width: "70vw",
+                height: "70vh",
+            }}
+        >
+            {configState === "wiring" && (
+                <ReactFlowProvider>
+                    <WiringComponent
+                        reset={reset}
+                        simConfig={simConfig}
+                        selectedAssembly={selectedAssembly}
+                        setConfigState={setConfigState}
+                    />
+                </ReactFlowProvider>
+            )}
+            {configState === "robotIO" && (
+                <RobotIoComponent
+                    simConfig={simConfig}
+                    selectedAssembly={selectedAssembly}
+                    setConfigState={setConfigState}
+                />
+            )}
+            {configState === "simIO" && (
+                <SimIoComponent
+                    simConfig={simConfig}
+                    selectedAssembly={selectedAssembly}
+                    setConfigState={setConfigState}
+                />
             )}
-        </>
+        </Box>
     )
 }