diff --git a/packages/frontend/src/components/LayoutObject.tsx b/packages/frontend/src/components/LayoutObject.tsx
deleted file mode 100644
index fe21508..0000000
--- a/packages/frontend/src/components/LayoutObject.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Box, TextField, Checkbox, FormGroup, FormControlLabel, Divider, IconButton, Tooltip } from '@mui/material';
-import { FC, useState, ChangeEvent } from 'react';
-import { Layout } from '../types/ExperimentTypes';
-import InfoIcon from '@mui/icons-material/Info';
-interface LayoutComponentProps {
-  layoutOptions: Layout[];
-  value: Layout;
-  onChange: (arg0: Layout) => void;
-}
-
-export const LayoutComponent: FC<LayoutComponentProps> = (props) => {
-  const [selectedOption, setSelectedOption] = useState<Layout | null>();
-  const [mediaVol, setMediaVol] = useState('');
-  const [textfieldError, setTextfieldError] = useState(false);
-  const handleCheckboxChange = (option: Layout) => {
-    if (selectedOption === option) {
-      setSelectedOption(null);
-    } else {
-      setSelectedOption(option);
-      props.onChange(option);
-    }
-  };
-  const handleTextChange = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, _min: number, _max: number) => {
-    if (event.target) {
-      if (/^\d*\.?\d*$/.test(event.target.value)) {
-        // const vol = parseInt(event.target.value);
-        // if(vol >= min && vol <= max){
-        setMediaVol(event.target.value);
-        setTextfieldError(false);
-        props.value.params.mediaVolume = parseFloat(event.target.value);
-
-        // }else{
-        //   setTextfieldError(true);
-        // }
-      } else {
-        setTextfieldError(true);
-      }
-    }
-  };
-  return (
-    <Box component="form" noValidate autoComplete="off" width={'100%'}>
-      <FormGroup>
-        {props.layoutOptions.map((option, index) => {
-          return (
-            <Box key={index} display={'flex'} flexDirection={'column'}>
-              <FormControlLabel
-                sx={{ marginTop: 2 }}
-                key={index}
-                label={option.name}
-                control={
-                  <>
-                    <Tooltip title={option.desc}>
-                      <IconButton
-                        onClick={() => {
-                          navigator.clipboard.writeText(option.desc);
-                        }}
-                      >
-                        <InfoIcon />
-                      </IconButton>
-                    </Tooltip>
-                    <Checkbox
-                      value={props.value}
-                      onChange={() => handleCheckboxChange(option)}
-                      checked={selectedOption === option}
-                    />
-                  </>
-                }
-              />
-              {selectedOption === option && (
-                <TextField
-                  variant="filled"
-                  label="Volume of media (ml)"
-                  value={mediaVol}
-                  onChange={(e) => handleTextChange(e, option.min, option.max)}
-                  error={textfieldError}
-                  helperText={textfieldError ? 'Please input numbers only' : ''}
-                />
-              )}
-              <Divider />
-            </Box>
-          );
-        })}
-      </FormGroup>
-    </Box>
-  );
-};
diff --git a/packages/frontend/src/components/MediaObject.tsx b/packages/frontend/src/components/MediaObject.tsx
deleted file mode 100644
index 99d52fe..0000000
--- a/packages/frontend/src/components/MediaObject.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Box, TextField, FormGroup, FormControlLabel, Checkbox, Divider, Tooltip, IconButton } from '@mui/material';
-import { FC, useState, ChangeEvent } from 'react';
-import { Media } from '../types/ExperimentTypes';
-import InfoIcon from '@mui/icons-material/Info';
-
-interface MediaComponentProps {
-  mediaOptions: Media[];
-  value: Media;
-  onChange: (arg0: Media) => void;
-}
-
-export const MediaComponent: FC<MediaComponentProps> = (props) => {
-  const [selectedOption, setSelectedOption] = useState<Media | null>(props.mediaOptions[0]);
-  const [mediaVol, setMediaVol] = useState('');
-  const [textfieldError, setTextfieldError] = useState(false);
-  const handleCheckboxChange = (option: Media) => {
-    if (selectedOption === option) {
-      setSelectedOption(null);
-    } else {
-      setSelectedOption(option);
-      props.onChange(option);
-      // props.value = option;
-    }
-  };
-  const handleTextChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (event.target) {
-      if (/^\d*\.?\d*$/.test(event.target.value)) {
-        setMediaVol(event.target.value);
-        setTextfieldError(false);
-        props.value.params.mediaConcentration = parseFloat(event.target.value);
-      } else {
-        setTextfieldError(true);
-      }
-    }
-  };
-  return (
-    <Box component="form" noValidate autoComplete="off" width={'100%'}>
-      <FormGroup>
-        {props.mediaOptions.map((option, index) => {
-          return (
-            <Box key={index} display={'flex'} flexDirection={'column'}>
-              <FormControlLabel
-                sx={{ marginTop: 2 }}
-                key={index}
-                label={option.name}
-                control={
-                  <>
-                    <Tooltip title={option.desc}>
-                      <IconButton
-                        onClick={() => {
-                          navigator.clipboard.writeText(option.desc);
-                        }}
-                      >
-                        <InfoIcon />
-                      </IconButton>
-                    </Tooltip>
-                    <Checkbox
-                      value={props.value}
-                      onChange={() => handleCheckboxChange(option)}
-                      checked={selectedOption === option}
-                    />
-                  </>
-                }
-              />
-              {selectedOption === option && (
-                <TextField
-                  variant="filled"
-                  label={`${props.value.mainMetabolites} concentration (mmol/cm3)`}
-                  value={mediaVol}
-                  onChange={handleTextChange}
-                  error={textfieldError}
-                  helperText={textfieldError ? 'Please input numbers only' : ''}
-                />
-              )}
-              <Divider />
-            </Box>
-          );
-        })}
-      </FormGroup>
-    </Box>
-  );
-};
diff --git a/packages/frontend/src/components/ModelObject.tsx b/packages/frontend/src/components/ModelObject.tsx
deleted file mode 100644
index 2406a9b..0000000
--- a/packages/frontend/src/components/ModelObject.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import {
-  Box,
-  TextField,
-  Checkbox,
-  FormGroup,
-  FormControlLabel,
-  RadioGroup,
-  Radio,
-  FormLabel,
-  Grid,
-  Divider,
-  Tooltip,
-  IconButton,
-  Typography
-} from '@mui/material';
-import { FC, useState } from 'react';
-import { MetabolicModel } from '../types/ExperimentTypes';
-import InfoIcon from '@mui/icons-material/Info';
-
-interface ModelComponentProps {
-  modelOptions: MetabolicModel[];
-  value: MetabolicModel;
-  modelLimit: number;
-  onChange: (arg0: MetabolicModel) => void;
-}
-
-const defaultParams: MetabolicModel['params'] = {
-  demographicNoise: false,
-  demographicNoiseAmplitude: 0.001,
-  uptakeVMax: 10,
-  uptakeKm: 10e-5,
-  deathRate: 0.001,
-  biomassLinearDiffusivity: 0.001,
-  biomassNonlinearDiffusivity: 0.6
-};
-
-export const ModelComponent: FC<ModelComponentProps> = (props) => {
-  console.log(props.modelOptions);
-  const [selectedOption, setSelectedOption] = useState<MetabolicModel | null>();
-  const [modelParams, setModelParams] = useState<MetabolicModel['params']>(defaultParams);
-  const [textfieldError, setTextfieldError] = useState(false);
-  const handleCheckboxChange = (option: MetabolicModel) => {
-    if (selectedOption === option) {
-      setSelectedOption(null);
-    } else {
-      setSelectedOption(option);
-      props.onChange(option);
-    }
-  };
-  const handleTextChange = (field: string, value: string) => {
-    if (/^\d*\.?\d*$/.test(value)) {
-      setModelParams({ ...modelParams, [field]: parseFloat(value) });
-      props.value.params = { ...modelParams, [field]: parseFloat(value) };
-      setTextfieldError(false);
-    } else {
-      setTextfieldError(true);
-    }
-  };
-
-  const handleRadioChange = (value: boolean) => {
-    setModelParams({ ...modelParams, demographicNoise: value });
-  };
-
-  return (
-    <Box component="form" noValidate autoComplete="off" width={'100%'}>
-      <FormGroup>
-        {props.modelOptions.map((option, index) => {
-          return (
-            <Box key={index} display={'flex'} flexDirection={'column'}>
-              <FormControlLabel
-                sx={{ marginTop: 2 }}
-                key={index}
-                label={<Typography sx={{ fontStyle: 'italic' }}>{option.name}</Typography>}
-                control={
-                  <>
-                    <Tooltip title={option.desc}>
-                      <IconButton
-                        onClick={() => {
-                          navigator.clipboard.writeText(option.desc);
-                        }}
-                      >
-                        <InfoIcon />
-                      </IconButton>
-                    </Tooltip>
-                    <Checkbox
-                      value={selectedOption}
-                      onChange={() => handleCheckboxChange(option)}
-                      checked={selectedOption === option}
-                    />
-                  </>
-                }
-              />
-              {selectedOption === option && (
-                <>
-                  <Grid container spacing={2} sx={{ width: '100%' }}>
-                    <Grid item xs={6} justifySelf={'flex-start'} alignSelf={'center'}>
-                      <FormLabel>Demographic Noise</FormLabel>
-                    </Grid>
-
-                    <Grid item xs={6}>
-                      <RadioGroup>
-                        <FormControlLabel
-                          key={index + 1}
-                          label="Yes"
-                          control={
-                            <Radio
-                              checked={modelParams.demographicNoise}
-                              onChange={() => handleRadioChange(true)}
-                              value={true}
-                              name="demoNoise-radio-button-yes"
-                              inputProps={{ 'aria-label': 'Yes' }}
-                            />
-                          }
-                        />
-                        <FormControlLabel
-                          key={index + 2}
-                          label="No"
-                          control={
-                            <Radio
-                              checked={!modelParams.demographicNoise}
-                              onChange={() => handleRadioChange(false)}
-                              value={false}
-                              name="demoNoise-radio-button-no"
-                              inputProps={{ 'aria-label': 'No' }}
-                            />
-                          }
-                        />
-                      </RadioGroup>
-                    </Grid>
-                  </Grid>
-
-                  <TextField
-                    variant="filled"
-                    label="Demographic Noise Amplitude"
-                    type="number"
-                    disabled={!modelParams.demographicNoise}
-                    value={modelParams.demographicNoiseAmplitude}
-                    onChange={(event) => handleTextChange('demographicNoiseAmplitude', event.target.value)}
-                    error={textfieldError}
-                    helperText={textfieldError ? 'Please input numbers only' : ''}
-                    sx={{ marginTop: 2 }}
-                    inputProps={{
-                      step: '0.000000001'
-                    }}
-                  />
-                  <TextField
-                    variant="filled"
-                    label="Death Rate"
-                    type="number"
-                    value={modelParams.deathRate}
-                    onChange={(event) => handleTextChange('deathRate', event.target.value)}
-                    error={textfieldError}
-                    helperText={textfieldError ? 'Please input numbers only' : ''}
-                    sx={{ marginTop: 2 }}
-                    inputProps={{
-                      step: '0.000000001'
-                    }}
-                  />
-                  <TextField
-                    variant="filled"
-                    label="Biomass Linear Diffusivity"
-                    type="number"
-                    value={modelParams.biomassLinearDiffusivity}
-                    onChange={(event) => handleTextChange('biomassLinearDiffusivity', event.target.value)}
-                    error={textfieldError}
-                    helperText={textfieldError ? 'Please input numbers only' : ''}
-                    sx={{ marginTop: 2 }}
-                    inputProps={{
-                      step: '0.000000001'
-                    }}
-                  />
-                  <TextField
-                    variant="filled"
-                    label="Biomass Non-Linear Diffusivity"
-                    type="number"
-                    value={modelParams.biomassNonlinearDiffusivity}
-                    onChange={(event) => handleTextChange('biomassNonlinearDiffusivity', event.target.value)}
-                    error={textfieldError}
-                    helperText={textfieldError ? 'Please input numbers only' : ''}
-                    sx={{ marginTop: 2 }}
-                    inputProps={{
-                      step: '0.000000001'
-                    }}
-                  />
-                  {/* <Button
-                      sx={{ marginTop: 2 }}
-                      variant="outlined"
-                      disabled={props.value.length >= props.modelLimit}
-                      onClick={() => handleAddModel(modelParams, option)}
-                    >
-                      ADD MODEL
-                    </Button> */}
-                </>
-              )}
-              <Divider />
-            </Box>
-          );
-        })}
-      </FormGroup>
-    </Box>
-  );
-};
diff --git a/packages/frontend/src/components/SidebarObject.tsx b/packages/frontend/src/components/SidebarObject.tsx
deleted file mode 100644
index b82ad69..0000000
--- a/packages/frontend/src/components/SidebarObject.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Box, Accordion, AccordionSummary, AccordionDetails, List, ListItemText, Typography } from '@mui/material';
-import { FC } from 'react';
-import { SummaryCard } from '../types/ExperimentTypes';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-export interface SidebarcardProps {
-  item: SummaryCard;
-}
-
-const textPairing: { [key: string]: string } = {
-  mediaVolume: 'Media Volume(ml)',
-  mediaConcentration: 'Media Concentration(mmol/cm3)',
-  demographicNoise: 'Demographic Noise',
-  demographicNoiseAmplitude: 'Demographic Noise Amplitude',
-  uptakeVMax: 'Uptake Vmax',
-  uptakeKm: 'Uptake Km',
-  deathRate: 'Death Rate',
-  biomassLinearDiffusivity: 'Biomass Linear Diffusivity',
-  biomassNonlinearDiffusivity: 'Biomass Non-Linear Diffusivity',
-  simulatedTime: 'Simulated Time',
-  timeSteps: 'No. of steps',
-  nutrientDiffusivity: 'Nutrient Diffusivity',
-  logFrequency: 'Save Frequency',
-  vMax: 'Vmax',
-  km: 'Km'
-};
-
-export const SidebarCard: FC<SidebarcardProps> = (props) => {
-  return (
-    <Box sx={{ width: '95%', marginLeft: 1, paddingBottom: '0.5vh' }}>
-      <Accordion>
-        <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1-content" id="panel1-header">
-          <Typography variant="h6">{props.item.label}</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <List>
-            <ListItemText>
-              {Object.keys(props.item.info.params).map((key, index) => {
-                let ret;
-                if (typeof props.item.info.params[key] === 'boolean') {
-                  ret = (
-                    <Typography textAlign={'left'} textOverflow={'wrap'} key={index}>
-                      {textPairing[key]}: {String(props.item.info.params[key])}
-                    </Typography>
-                  );
-                } else {
-                  ret = (
-                    <Typography textAlign={'left'} textOverflow={'wrap'} key={index}>
-                      {textPairing[key]}: {props.item.info.params[key]}
-                    </Typography>
-                  );
-                }
-                return ret;
-              })}
-            </ListItemText>
-          </List>
-        </AccordionDetails>
-      </Accordion>
-    </Box>
-  );
-};
diff --git a/packages/frontend/src/components/parameters/GlobalParamsView.tsx b/packages/frontend/src/components/parameters/GlobalParamsView.tsx
index aec66c9..88fcd7c 100644
--- a/packages/frontend/src/components/parameters/GlobalParamsView.tsx
+++ b/packages/frontend/src/components/parameters/GlobalParamsView.tsx
@@ -13,7 +13,7 @@ export const GlobalParamsView: React.FC<GlobalParamsViewProps> = ({ params }) =>
         <List>
           <ListItem>Time Step: {params.timeStep}</ListItem>
           <ListItem>Log Frequency: {params.logFreq}</ListItem>
-          <ListItem>Default Diff Const: {params.defaultDiffConst}</ListItem>
+          <ListItem>Nutrient Diffusivity: {params.defaultDiffConst} cm2/s</ListItem>
           <ListItem>Default VMax: {params.defaultVMax}</ListItem>
           <ListItem>Default KM: {params.defaultKm}</ListItem>
           <ListItem>Max Cycles: {params.maxCycles}</ListItem>
diff --git a/packages/frontend/src/components/parameters/LayoutParamsView.tsx b/packages/frontend/src/components/parameters/LayoutParamsView.tsx
new file mode 100644
index 0000000..2219858
--- /dev/null
+++ b/packages/frontend/src/components/parameters/LayoutParamsView.tsx
@@ -0,0 +1,21 @@
+import { LayoutParametersInput } from '../../graphql/graphql';
+import { Card, CardHeader, CardContent, List, ListItem } from '@mui/material';
+import { getLayoutName } from '../../helpers/names';
+
+export interface LayoutParamsViewProps {
+  params: LayoutParametersInput;
+}
+
+export const LayoutParamsView: React.FC<LayoutParamsViewProps> = ({ params }) => {
+  return (
+    <Card>
+      <CardHeader title="Global Parameters" titleTypographyProps={{ variant: 'h3' }} />
+      <CardContent>
+        <List>
+          <ListItem>Type: {getLayoutName(params.type)}</ListItem>
+          <ListItem>Volume: {params.volume} ml</ListItem>
+        </List>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/packages/frontend/src/components/parameters/MetaboliteParamsView.tsx b/packages/frontend/src/components/parameters/MetaboliteParamsView.tsx
index d2051ff..4330c37 100644
--- a/packages/frontend/src/components/parameters/MetaboliteParamsView.tsx
+++ b/packages/frontend/src/components/parameters/MetaboliteParamsView.tsx
@@ -1,5 +1,6 @@
 import { Card, CardContent, CardHeader, List, ListItem } from '@mui/material';
 import { MetaboliteParametersInput } from '../../graphql/graphql';
+import { getMetaboliteName } from '../../helpers/names';
 
 export interface MetaboliteParamsViewProps {
   params: MetaboliteParametersInput;
@@ -11,8 +12,8 @@ export const MetaboliteParamsView: React.FC<MetaboliteParamsViewProps> = ({ para
       <CardHeader title="Metabolite Paramers" titleTypographyProps={{ variant: 'h3' }} />
       <CardContent>
         <List>
-          <ListItem>Type: {params.type}</ListItem>
-          <ListItem>Amount: {params.concentration}</ListItem>
+          <ListItem>Type: {getMetaboliteName(params.type)}</ListItem>
+          <ListItem>Amount: {params.concentration} mmol/cm3</ListItem>
         </List>
       </CardContent>
     </Card>
diff --git a/packages/frontend/src/components/parameters/ModelParamsView.tsx b/packages/frontend/src/components/parameters/ModelParamsView.tsx
index 4e75055..649b763 100644
--- a/packages/frontend/src/components/parameters/ModelParamsView.tsx
+++ b/packages/frontend/src/components/parameters/ModelParamsView.tsx
@@ -1,5 +1,6 @@
 import { Card, CardContent, CardHeader, List, ListItem, Paper } from '@mui/material';
 import { ModelParametersInput } from '../../graphql/graphql';
+import { getModelName } from '../../helpers/names';
 
 export interface ModelParamsViewProps {
   params: ModelParametersInput[];
@@ -22,8 +23,10 @@ const SingleModelParamsView: React.FC<{ params: ModelParametersInput }> = ({ par
   return (
     <Paper elevation={2}>
       <List>
-        <ListItem>Name: {params.name}</ListItem>
-        <ListItem>Neutral Drift: {params.neutralDrift}</ListItem>
+        <ListItem>
+          Name: <i>{getModelName(params.name)}</i>
+        </ListItem>
+        <ListItem>Neutral Drift: {params.neutralDrift ? 'True' : 'False'}</ListItem>
         <ListItem>Neutral Drift Amp: {params.neutralDriftAmp}</ListItem>
         <ListItem>Death Rate: {params.deathRate}</ListItem>
         <ListItem>Linear Diffusivity: {params.linearDiffusivity}</ListItem>
diff --git a/packages/frontend/src/components/parameters/ViewParameters.tsx b/packages/frontend/src/components/parameters/ViewParameters.tsx
index d332939..e97287a 100644
--- a/packages/frontend/src/components/parameters/ViewParameters.tsx
+++ b/packages/frontend/src/components/parameters/ViewParameters.tsx
@@ -3,6 +3,7 @@ import { SimulationRequestInput } from '../../graphql/graphql';
 import { MetaboliteParamsView } from './MetaboliteParamsView';
 import { ModelParamsView } from './ModelParamsView';
 import { GlobalParamsView } from './GlobalParamsView';
+import { LayoutParamsView } from './LayoutParamsView';
 
 type Parameters = Omit<SimulationRequestInput, 'email'>;
 
@@ -14,6 +15,7 @@ export const ViewParameters: React.FC<ViewParametersProps> = ({ params }) => {
   return (
     <Stack>
       <Typography variant="h2">Parameters</Typography>
+      <LayoutParamsView params={params.layoutParams} />
       <MetaboliteParamsView params={params.metaboliteParams} />
       <ModelParamsView params={params.modelParams} />
       <GlobalParamsView params={params.globalParams} />
diff --git a/packages/frontend/src/helpers/names.ts b/packages/frontend/src/helpers/names.ts
new file mode 100644
index 0000000..02c464e
--- /dev/null
+++ b/packages/frontend/src/helpers/names.ts
@@ -0,0 +1,41 @@
+import { LayoutType, MetaboliteType, ModelName } from "../graphql/graphql";
+
+
+export const getLayoutName = (type: LayoutType) => {
+  switch (type) {
+    case LayoutType.PetriCenter:
+      return '3 cm Petri Dish (Center Colony)';
+    case LayoutType.PetriRandom:
+      return '3 cm Petri Dish (Random Lawn)';
+    case LayoutType.TestTube:
+      return 'Test Tube';
+    default:
+      throw Error(`Unknown layout type ${type}`);
+  }
+};
+
+export const getMetaboliteName = (type: MetaboliteType) => {
+  switch (type) {
+    case MetaboliteType.Rich:
+      return 'Rich';
+    case MetaboliteType.Glucose:
+      return 'Glucose';
+    case MetaboliteType.Acetate:
+      return 'Acetate';
+    default:
+      throw Error(`Unknown metabolite type: ${type}`);
+  }
+};
+
+export const getModelName = (name: ModelName) => {
+  switch (name) {
+    case ModelName.EColi:
+      return 'Escherichia coli Core';
+    case ModelName.Nitrobacter:
+      return 'Nitrobacter winogradskyi';
+    case ModelName.Nitrosomonas:
+      return 'Nitrosomonas europaea';
+    default:
+      throw new Error(`Unknown model name: ${name}`);
+  }
+};
diff --git a/packages/frontend/src/pages/ExperimentForm.tsx b/packages/frontend/src/pages/ExperimentForm.tsx
index 8de7106..ccdd49d 100644
--- a/packages/frontend/src/pages/ExperimentForm.tsx
+++ b/packages/frontend/src/pages/ExperimentForm.tsx
@@ -5,25 +5,26 @@ import { Box, Stack, Button } from '@mui/material';
 import { ErrorObject } from 'ajv';
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
-import { MetaboliteType } from '../graphql/graphql';
+import { LayoutType, MetaboliteType, ModelName } from '../graphql/graphql';
+import { getLayoutName, getMetaboliteName, getModelName } from '../helpers/names';
 
 const getSchema = (metaboliteType: MetaboliteType | null) => {
   // The models supported are based on the metabolite type
   let models = [
     {
-      const: 'E_COLI',
-      title: 'Escherichia coli Core'
+      const: ModelName.EColi,
+      title: getModelName(ModelName.EColi)
     }
   ];
   if (metaboliteType == MetaboliteType.Rich) {
     models = [
       {
-        const: 'NITROSOMONAS',
-        title: 'Nitrosomonas europaea'
+        const: ModelName.Nitrosomonas,
+        title: getModelName(ModelName.Nitrosomonas)
       },
       {
-        const: 'NITROBACTER',
-        title: 'Nitrobacter winogradskyi'
+        const: ModelName.Nitrobacter,
+        title: getModelName(ModelName.Nitrobacter)
       }
     ];
   }
@@ -39,21 +40,22 @@ const getSchema = (metaboliteType: MetaboliteType | null) => {
             type: 'string',
             oneOf: [
               {
-                const: 'PETRI_CENTER',
-                title: '3 cm Petri Dish (Center Colony)'
+                const: LayoutType.PetriCenter,
+                title: getLayoutName(LayoutType.PetriCenter)
               },
               {
-                const: 'PETRI_RANDOM',
-                title: '3 cm Petri Dish (Random Lawn)'
+                const: LayoutType.PetriRandom,
+                title: getLayoutName(LayoutType.PetriRandom)
               },
               {
-                const: 'TEST_TUBE',
-                title: 'Test Tube'
+                const: LayoutType.TestTube,
+                title: getLayoutName(LayoutType.TestTube)
               }
             ]
           },
           volume: {
-            type: 'number'
+            type: 'number',
+            title: 'Volume (ml)'
           }
         },
         required: ['type', 'volume']
@@ -66,21 +68,22 @@ const getSchema = (metaboliteType: MetaboliteType | null) => {
             type: 'string',
             oneOf: [
               {
-                const: 'GLUCOSE',
-                title: 'Glucose'
+                const: MetaboliteType.Glucose,
+                title: getMetaboliteName(MetaboliteType.Glucose)
               },
               {
-                const: 'ACETATE',
-                title: 'Acetate'
+                const: MetaboliteType.Acetate,
+                title: getMetaboliteName(MetaboliteType.Acetate)
               },
               {
-                const: 'RICH',
-                title: 'Rich'
+                const: MetaboliteType.Rich,
+                title: getMetaboliteName(MetaboliteType.Rich)
               }
             ]
           },
           concentration: {
-            type: 'number'
+            type: 'number',
+            title: 'Concentration (mmol/cm3)'
           }
         },
         required: ['type', 'concentration']
@@ -132,7 +135,8 @@ const getSchema = (metaboliteType: MetaboliteType | null) => {
           },
           defaultDiffConst: {
             type: 'number',
-            default: 0.000006
+            default: 0.000006,
+            title: 'Nutrient Diffusivity (cm2/s)'
           },
           defaultVMax: {
             type: 'number',
diff --git a/packages/frontend/src/pages/ExperimentSubmitted.tsx b/packages/frontend/src/pages/ExperimentSubmitted.tsx
index fbbe548..78d63a2 100644
--- a/packages/frontend/src/pages/ExperimentSubmitted.tsx
+++ b/packages/frontend/src/pages/ExperimentSubmitted.tsx
@@ -1,73 +1,23 @@
 import { useState } from 'react';
-import { Box, Button, Drawer, Grid, Typography } from '@mui/material';
+import { Box, Drawer, Stack, Typography } from '@mui/material';
 import FooterStepper from '../components/FooterStepper';
-import { Link } from 'react-router-dom';
 
 export function ExperimentSubmittedPage() {
   const [activeStep, _setActiveStep] = useState(2);
 
   return (
     <>
-      <Box
-        component="main"
-        sx={{
-          position: 'relative',
-          height: '100vh'
-        }}
-      >
-        <Grid container spacing={2}>
-          <Grid item xs={6}>
-            <Grid
-              container
-              spacing={2}
-              direction="column"
-              alignItems="left"
-              style={{
-                paddingLeft: '2vw',
-                paddingBottom: '10%'
-              }}
-            >
-              <Typography
-                variant="h1"
-                sx={{
-                  color: 'black',
-                  textAlign: 'left',
-                  paddingBottom: '10%',
-                  paddingTop: '5%'
-                }}
-              >
-                EXPERIMENT SUBMITTED!
-              </Typography>
+      <Box sx={{ display: 'flex', justifyContent: 'flex-left', alignItems: 'left', width: '100%' }}>
+        <Stack spacing={5} sx={{ alignItems: 'left', justifyContent: 'left' }}>
+          <Typography variant="h1">EXPERIMENT SUBMITTED!</Typography>
 
-              <Typography
-                variant="h2"
-                sx={{
-                  textAlign: 'left',
-                  color: 'black',
-                  paddingBottom: '10%'
-                }}
-              >
-                Thank you for using the COMETS Layout Builder!
-              </Typography>
+          <Typography variant="h2">Thank you for using the COMETS Layout Builder!</Typography>
 
-              <Typography
-                variant="h3"
-                sx={{
-                  textAlign: 'left',
-                  color: 'grey',
-                  paddingBottom: '10%'
-                }}
-              >
-                Your layout is now running. You will be sent an email with a link to the results of your layout once
-                it’s done running.
-              </Typography>
-
-              <Button component={Link} to="https://www.runcomets.org/get-started" variant="contained" fullWidth>
-                Download CometsPY
-              </Button>
-            </Grid>
-          </Grid>
-        </Grid>
+          <Typography variant="h3">
+            Your layout is now running. You will be sent an email with a link to the results of your layout once it’s
+            done running.
+          </Typography>
+        </Stack>
 
         <Drawer
           variant="permanent"
diff --git a/packages/frontend/src/types/ExperimentTypes.tsx b/packages/frontend/src/types/ExperimentTypes.tsx
deleted file mode 100644
index 300d162..0000000
--- a/packages/frontend/src/types/ExperimentTypes.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-export type MetabolicModel = {
-  name: string;
-  desc: string;
-  type: string;
-  params: {
-    [key: string]: boolean | number;
-    demographicNoise: boolean;
-    demographicNoiseAmplitude: number;
-    uptakeVMax: number;
-    uptakeKm: number;
-    deathRate: number;
-    biomassLinearDiffusivity: number;
-    biomassNonlinearDiffusivity: number;
-  };
-};
-
-export type Media = {
-  name: string;
-  desc: string;
-  type: string;
-  min: number;
-  max: number;
-  mainMetabolites: string; //this is to check if its acetate or glucose or something else
-  params: {
-    [key: string]: number;
-    mediaConcentration: number;
-  };
-};
-
-export type Layout = {
-  name: string;
-  desc: string;
-  type: string;
-  min: number;
-  max: number;
-  params: {
-    [key: string]: number;
-    mediaVolume: number;
-  };
-};
-
-export type SummaryCard = {
-  label: string;
-  desc: string;
-  info: MetabolicModel | Layout | Media | GlobalParameters;
-  type: string;
-};
-
-export type GlobalParameters = {
-  name: string;
-  desc: string;
-  type: string;
-  params: {
-    [key: string]: number;
-    simulatedTime: number;
-    timeSteps: number;
-    nutrientDiffusivity: number;
-    logFrequency: number;
-    vMax: number;
-    km: number;
-  };
-};
-
-export interface SummaryCardArray extends Array<SummaryCard> {
-  push(item: SummaryCard): number;
-  push(...item: SummaryCard[]): number;
-}
-
-export function cometsType(obj: any): string {
-  if (metabolicModels.includes(obj.name)) {
-    return 'MetabolicModel';
-  } else if (media.includes(obj.name)) {
-    return 'Media';
-  } else if (layout.includes(obj.name)) {
-    return 'Layout';
-  } else {
-    return 'Global Parameters';
-  }
-}
-
-// Private Helper Functions and consts
-
-const metabolicModels = [
-  'Escherichia coli Core',
-  'Escherichia coli',
-  'Nitrosomonas europaea',
-  'Nitrobacter winogradskyi',
-  'E. Coli Core',
-  'E. Coli',
-  'S. Enterica'
-];
-const layout = ['9 cm Petri Dish (Center Colony)', '9 cm Petri Dish (Random Lawn)', 'Test Tube', 'EcoFab'];
-const media = [
-  'Minimal Core Glucose',
-  'Minimal Core Acetate',
-  'M9 Minimal Glucose',
-  'M9 Minimal Acetate',
-  'Rich Media'
-];
diff --git a/packages/frontend/src/types/Layout.tsx b/packages/frontend/src/types/Layout.tsx
deleted file mode 100644
index 4ed2afa..0000000
--- a/packages/frontend/src/types/Layout.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export type Layout = {
-  name: string;
-  desc: string;
-  min: number;
-  max: number;
-  params: {
-    [key: string]: number;
-    mediaVolume: number;
-  };
-};
diff --git a/packages/frontend/src/types/Media.tsx b/packages/frontend/src/types/Media.tsx
deleted file mode 100644
index d290834..0000000
--- a/packages/frontend/src/types/Media.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-export type Media = {
-  name: string;
-  desc: string;
-  min: number;
-  max: number;
-  mainMetabolites: string; //this is to check if its acetate or glucose or something else
-  params: {
-    [key: string]: number;
-    mediaConcentration: number;
-  };
-};
diff --git a/packages/frontend/src/types/Model.tsx b/packages/frontend/src/types/Model.tsx
deleted file mode 100644
index 9320694..0000000
--- a/packages/frontend/src/types/Model.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-export type MetabolicModel = {
-  name: string;
-  desc: string;
-  params: {
-    [key: string]: boolean | number;
-    demographicNoise: boolean;
-    demographicNoiseAmplitude: number;
-    uptakeVMax: number;
-    uptakeKm: number;
-    deathRate: number;
-    biomassLinearDiffusivity: number;
-    biomassNonlinearDiffusivity: number;
-  };
-};
diff --git a/packages/frontend/src/types/SummaryCard.tsx b/packages/frontend/src/types/SummaryCard.tsx
deleted file mode 100644
index d25ae9c..0000000
--- a/packages/frontend/src/types/SummaryCard.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { MetabolicModel } from './Model';
-import { Layout } from './Layout';
-import { Media } from './Media';
-
-export type SummaryCard = {
-  label: string;
-  desc: string;
-  info: MetabolicModel | Layout | Media;
-};
-
-export interface SummaryCardArray extends Array<SummaryCard> {
-  push(item: SummaryCard): number;
-  push(...item: SummaryCard[]): number;
-}