diff --git a/src/components/input/NumericInputWithUnit.tsx b/src/components/input/NumericInputWithUnit.tsx
index 25ae976..a9e0212 100644
--- a/src/components/input/NumericInputWithUnit.tsx
+++ b/src/components/input/NumericInputWithUnit.tsx
@@ -5,7 +5,7 @@ import Qty from 'js-quantities';
 //
 
 const siPrefixes: { [key: string]: number } = {
-  '': 1,
+  'Default prefix': 1,
   k: 1000,
   M: 1000000,
   G: 1000000000,
@@ -24,7 +24,7 @@ export default function NumericInputWithUnit(props: {
   defaultPrefix?: string;
 }) {
   const [inputValue, setInputValue] = useState(props.value.value);
-  const [prefix, setPrefix] = useState(props.defaultPrefix || '');
+  const [prefix, setPrefix] = useState(props.defaultPrefix || 'Default prefix');
 
   // internal display unit
   const [unit, setUnit] = useState('');
@@ -121,13 +121,8 @@ export default function NumericInputWithUnit(props: {
   };
 
   return (
-    <Grid
-      container
-      spacing={2}
-      alignItems="center"
-      style={{ minWidth: '20rem' }}
-    >
-      <Grid item xs={4}>
+    <Grid container spacing={2} alignItems="center">
+      <Grid item xs={12} md={4}>
         <TextFieldWithDesc
           disabled={disabled}
           type="number"
@@ -139,7 +134,7 @@ export default function NumericInputWithUnit(props: {
         />
       </Grid>
 
-      <Grid item xs={3}>
+      <Grid item xs={12} md={3}>
         <Select
           fullWidth
           disabled={disableChangingUnit}
@@ -156,12 +151,11 @@ export default function NumericInputWithUnit(props: {
         </Select>
       </Grid>
 
-      <Grid item xs={5}>
+      <Grid item xs={12} md={5}>
         <Select
           fullWidth
           disabled={disableChangingUnit}
-          label="Unit"
-          title="Unit"
+          placeholder={'Unit'}
           value={unit}
           onChange={(event) => {
             setUserSelectedUnit(true);
diff --git a/src/pages/tools/number/generic-calc/index.tsx b/src/pages/tools/number/generic-calc/index.tsx
index 48ed78f..5ea172f 100644
--- a/src/pages/tools/number/generic-calc/index.tsx
+++ b/src/pages/tools/number/generic-calc/index.tsx
@@ -1,15 +1,4 @@
-import {
-  Autocomplete,
-  Box,
-  Radio,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  TextField
-} from '@mui/material';
+import { Autocomplete, Box, Radio, Stack, TextField } from '@mui/material';
 import React, { useContext, useState } from 'react';
 import ToolContent from '@components/ToolContent';
 import { ToolComponentProps } from '@tools/defineTool';
@@ -290,60 +279,41 @@ export default async function makeTool(
           {
             title: 'Variables',
             component: (
-              <Table>
-                <TableHead>
-                  <TableRow>
-                    <TableCell>Value</TableCell>
-                    <TableCell>Solve For</TableCell>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {calcData.variables.map((variable) => (
-                    <TableRow key={variable.name}>
-                      <TableCell>
-                        <Table>
-                          <TableRow>
-                            <TableCell>{variable.title}</TableCell>
-                            <TableCell>
-                              <NumericInputWithUnit
-                                defaultPrefix={variable.defaultPrefix}
-                                value={values.vars[variable.name]}
-                                disabled={
-                                  values.outputVariable === variable.name ||
-                                  valsBoundToPreset[variable.name] !== undefined
-                                }
-                                disableChangingUnit={
-                                  valsBoundToPreset[variable.name] !== undefined
-                                }
-                                onOwnChange={(val) =>
-                                  updateVarField(
-                                    variable.name,
-                                    val.value,
-                                    val.unit,
-                                    values,
-                                    updateField
-                                  )
-                                }
-                              />
-                            </TableCell>
-                          </TableRow>
+              <Box>
+                <Grid container spacing={2} sx={{ mb: 2 }}>
+                  <Grid item xs={10}></Grid>
+                  <Grid item xs={2}>
+                    <Typography fontWeight="bold" align="center">
+                      Solve For
+                    </Typography>
+                  </Grid>
+                </Grid>
 
-                          {variable.alternates?.map((alt) => (
-                            <TableRow key={alt.title}>
-                              <TableCell>{alt.title}</TableCell>
-                              <TableCell>
+                {calcData.variables.map((variable) => (
+                  <Box
+                    key={variable.name}
+                    sx={{
+                      mb: 3,
+                      p: 1,
+                      borderRadius: 1
+                    }}
+                  >
+                    <Grid container spacing={2} alignItems="center">
+                      <Grid item xs={10}>
+                        <Box>
+                          <Stack spacing={2}>
+                            <Box>
+                              <Stack
+                                direction="row"
+                                spacing={2}
+                                alignItems="center"
+                              >
+                                <Typography sx={{ minWidth: '8%' }}>
+                                  {variable.title}
+                                </Typography>
                                 <NumericInputWithUnit
-                                  key={alt.title}
-                                  defaultPrefix={alt.defaultPrefix || ''}
-                                  value={{
-                                    value:
-                                      getAlternate(
-                                        alt,
-                                        variable,
-                                        values.vars[variable.name]
-                                      ) || NaN,
-                                    unit: alt.unit || ''
-                                  }}
+                                  defaultPrefix={variable.defaultPrefix}
+                                  value={values.vars[variable.name]}
                                   disabled={
                                     values.outputVariable === variable.name ||
                                     valsBoundToPreset[variable.name] !==
@@ -356,20 +326,76 @@ export default async function makeTool(
                                   onOwnChange={(val) =>
                                     updateVarField(
                                       variable.name,
-                                      getMainFromAlternate(alt, variable, val),
-                                      variable.unit,
+                                      val.value,
+                                      val.unit,
                                       values,
                                       updateField
                                     )
                                   }
-                                ></NumericInputWithUnit>
-                              </TableCell>
-                            </TableRow>
-                          ))}
-                        </Table>
-                      </TableCell>
+                                />
+                              </Stack>
+                            </Box>
 
-                      <TableCell>
+                            {variable.alternates?.map((alt) => (
+                              <Box key={alt.title}>
+                                <Stack
+                                  direction="row"
+                                  spacing={2}
+                                  alignItems="center"
+                                >
+                                  <Typography sx={{ minWidth: 120 }}>
+                                    {alt.title}
+                                  </Typography>
+                                  <Box sx={{ flexGrow: 1 }}>
+                                    <NumericInputWithUnit
+                                      key={alt.title}
+                                      defaultPrefix={alt.defaultPrefix || ''}
+                                      value={{
+                                        value:
+                                          getAlternate(
+                                            alt,
+                                            variable,
+                                            values.vars[variable.name]
+                                          ) || NaN,
+                                        unit: alt.unit || ''
+                                      }}
+                                      disabled={
+                                        values.outputVariable ===
+                                          variable.name ||
+                                        valsBoundToPreset[variable.name] !==
+                                          undefined
+                                      }
+                                      disableChangingUnit={
+                                        valsBoundToPreset[variable.name] !==
+                                        undefined
+                                      }
+                                      onOwnChange={(val) =>
+                                        updateVarField(
+                                          variable.name,
+                                          getMainFromAlternate(
+                                            alt,
+                                            variable,
+                                            val
+                                          ),
+                                          variable.unit,
+                                          values,
+                                          updateField
+                                        )
+                                      }
+                                    />
+                                  </Box>
+                                </Stack>
+                              </Box>
+                            ))}
+                          </Stack>
+                        </Box>
+                      </Grid>
+
+                      <Grid
+                        item
+                        xs={2}
+                        sx={{ display: 'flex', justifyContent: 'center' }}
+                      >
                         <Radio
                           value={variable.name}
                           checked={values.outputVariable === variable.name}
@@ -384,33 +410,36 @@ export default async function makeTool(
                             )
                           }
                         />
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
+                      </Grid>
+                    </Grid>
+                  </Box>
+                ))}
+              </Box>
             )
           },
           ...(calcData.extraOutputs
             ? [
                 {
                   title: 'Extra outputs',
-                  component: calcData.extraOutputs?.map((extraOutput) => (
-                    <TableRow key={extraOutput.title}>
-                      <TableCell>
-                        {extraOutput.title}
-                        <NumericInputWithUnit
-                          disabled={true}
-                          defaultPrefix={extraOutput.defaultPrefix}
-                          value={{
-                            value: extraOutputs[extraOutput.title],
-                            unit: extraOutput.unit
-                          }}
-                        />
-                      </TableCell>
-                      <TableCell></TableCell>
-                    </TableRow>
-                  ))
+                  component: (
+                    <Grid container spacing={2}>
+                      {calcData.extraOutputs?.map((extraOutput) => (
+                        <Grid item xs={12} key={extraOutput.title}>
+                          <Stack spacing={1} px={4}>
+                            <Typography>{extraOutput.title}</Typography>
+                            <NumericInputWithUnit
+                              disabled={true}
+                              defaultPrefix={extraOutput.defaultPrefix}
+                              value={{
+                                value: extraOutputs[extraOutput.title],
+                                unit: extraOutput.unit
+                              }}
+                            />
+                          </Stack>
+                        </Grid>
+                      ))}
+                    </Grid>
+                  )
                 }
               ]
             : [])