diff --git a/next-env.d.ts b/next-env.d.ts
index a4a7b3f5..52e831b4 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/src/web/common/components/Form/NumberInput.tsx b/src/web/common/components/Form/NumberInput.tsx
index b84d307a..4f1b2113 100644
--- a/src/web/common/components/Form/NumberInput.tsx
+++ b/src/web/common/components/Form/NumberInput.tsx
@@ -24,10 +24,9 @@ export const NumberInput = ({ name, min, max }: Props) => {
         {...field}
         min={min}
         max={max}
-        value={field.value as number} // should be able to type-safe this but seems hard and not worth effort
+        value={field.value as number}
         onChange={(event, value) => {
           event.preventDefault(); // don't trigger default form submit, which would refresh the page
-          if (value === null) throw new Error("NumberInput should not allow empty value");
 
           field.onChange(value);
           submit();
diff --git a/src/web/topic/components/TopicWorkspace/MoreActionsDrawer.tsx b/src/web/topic/components/TopicWorkspace/MoreActionsDrawer.tsx
index 935920e2..bb19c3aa 100644
--- a/src/web/topic/components/TopicWorkspace/MoreActionsDrawer.tsx
+++ b/src/web/topic/components/TopicWorkspace/MoreActionsDrawer.tsx
@@ -28,6 +28,8 @@ import {
   ListItem,
   ListItemIcon,
   ListItemText,
+  MenuItem,
+  Select,
   ToggleButton,
   Tooltip,
   Typography,
@@ -35,7 +37,6 @@ import {
 import { toPng } from "html-to-image";
 import { getRectOfNodes, getTransformForBounds } from "reactflow";
 
-import { NumberInput } from "@/web/common/components/NumberInput/NumberInput";
 import { getDisplayNodes } from "@/web/topic/components/Diagram/externalFlowStore";
 import { downloadTopic, uploadTopic } from "@/web/topic/loadStores";
 import { useOnPlayground } from "@/web/topic/store/topicHooks";
@@ -342,35 +343,37 @@ export const MoreActionsDrawer = ({
               </ToggleButton>
             </ListItem>
 
-            <ListItem disablePadding={false}>
+            <ListItem disablePadding>
               <Typography variant="body2">Layout Thoroughness</Typography>
               <Tooltip
-                title="Determines how much effort the layout algorithm puts into laying out nodes such that they efficiently use space. 1 = lowest effort, 100 = highest effort."
-                enterTouchDelay={0} // allow touch to immediately trigger
-                leaveTouchDelay={Infinity} // touch-away to close on mobile, since message is long
+                title="Determines how much effort the layout algorithm puts into laying out nodes such that they efficiently use space. Low = minimal effort, High = maximum effort."
+                enterTouchDelay={0} // Trigger immediately on touch
+                leaveTouchDelay={Infinity} // Close on touch-away
               >
                 <IconButton
                   color="info"
                   aria-label="Thoroughness info"
                   sx={{
-                    // Don't make it look like clicking will do something, since it won't.
-                    // Using a button here is an attempt to make it accessible, since the tooltip will show
-                    // on focus.
-                    cursor: "default",
+                    cursor: "default", // Maintain accessibility while preventing click actions
                     alignSelf: "center",
                   }}
                 >
                   <Info />
                 </IconButton>
               </Tooltip>
-              <NumberInput
-                min={1}
-                max={100}
+              <Select
                 value={layoutThoroughness}
-                onChange={(_event, value) => {
-                  if (value) setLayoutThoroughness(value);
+                onChange={(event) => setLayoutThoroughness(Number(event.target.value))}
+                fullWidth // Use fullWidth for proper alignment
+                size="small" // Smaller size for better fit
+                sx={{
+                  marginLeft: "16px", // Adjust spacing
                 }}
-              />
+              >
+                <MenuItem value={1}>Low</MenuItem>
+                <MenuItem value={10}>Medium</MenuItem>
+                <MenuItem value={100}>High</MenuItem>
+              </Select>
             </ListItem>
 
             <Divider>Filter Config</Divider>