diff --git a/src/components/MedicationStatus/MedicationStatus.jsx b/src/components/MedicationStatus/MedicationStatus.jsx
new file mode 100644
index 00000000..745148de
--- /dev/null
+++ b/src/components/MedicationStatus/MedicationStatus.jsx
@@ -0,0 +1,88 @@
+import axios from 'axios';
+import { MedicationStatusButton } from './MedicationStatusButton.jsx';
+import { MedicationStatusModal } from './MedicationStatusModal.jsx';
+import { useState, useEffect } from 'react';
+import { Card } from '@mui/material';
+
+export const MedicationStatus = props => {
+  const { ehrUrl, request } = props;
+  const [medicationDispense, setMedicationDispense] = useState(null);
+  const [showMedicationStatus, setShowMedicationStatus] = useState(false);
+  const [lastCheckedMedicationTime, setLastCheckedMedicationTime] = useState(null);
+
+  useEffect(() => getMedicationStatus(), [request.id]);
+
+  const getMedicationStatus = () => {
+    setLastCheckedMedicationTime(Date.now());
+
+    axios.get(`${ehrUrl}/MedicationDispense?prescription=${request.id}`).then(
+      response => {
+        const bundle = response.data;
+        setMedicationDispense(bundle.entry?.[0].resource);
+      },
+      error => {
+        console.log('Was not able to get medication status', error);
+      }
+    );
+  };
+
+  const handleCloseMedicationStatus = () => {
+    setShowMedicationStatus(false);
+  };
+
+  const handleOpenMedicationStatus = () => {
+    setShowMedicationStatus(true);
+  };
+
+  return (
+    <Card variant="outlined" sx={{ padding: 2 }}>
+      <MedicationStatusButton
+        baseColor={getStatusColor(medicationDispense?.status)}
+        medicationDispense={medicationDispense}
+        handleOpenMedicationStatus={handleOpenMedicationStatus}
+        lastCheckedMedicationTime={lastCheckedMedicationTime}
+      />
+      <MedicationStatusModal
+        callback={getMedicationStatus}
+        medicationDispense={medicationDispense}
+        update={showMedicationStatus}
+        onClose={handleCloseMedicationStatus}
+      />
+    </Card>
+  );
+};
+
+export const getStatusColor = status => {
+  switch (status) {
+    case 'completed':
+      return 'green';
+    case 'preparation':
+    case 'in-progress':
+    case 'cancelled':
+    case 'on-hold':
+    case 'entered-in-error':
+    case 'stopped':
+    case 'declined':
+    case 'unknown':
+    default:
+      return '#0c0c0c';
+  }
+};
+
+export const getStatusText = status => {
+  switch (status) {
+    case 'completed':
+      return 'Picked Up';
+    case 'unknown':
+      return 'Not Started';
+    case 'preparation':
+    case 'in-progress':
+    case 'cancelled':
+    case 'on-hold':
+    case 'entered-in-error':
+    case 'stopped':
+    case 'declined':
+    default:
+      return 'N/A';
+  }
+};
diff --git a/src/components/MedicationStatus/MedicationStatusButton.css b/src/components/MedicationStatus/MedicationStatusButton.css
new file mode 100644
index 00000000..572495d8
--- /dev/null
+++ b/src/components/MedicationStatus/MedicationStatusButton.css
@@ -0,0 +1,16 @@
+.etasuButtonText {
+  margin-bottom: 0px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.etasuButtonTimestamp {
+  margin: 0 auto;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 0.8rem;
+}
+
+.timestampString {
+  font-size: 0.7rem;
+  opacity: 0.8;
+}
diff --git a/src/components/MedicationStatus/MedicationStatusButton.jsx b/src/components/MedicationStatus/MedicationStatusButton.jsx
new file mode 100644
index 00000000..6c9db545
--- /dev/null
+++ b/src/components/MedicationStatus/MedicationStatusButton.jsx
@@ -0,0 +1,65 @@
+import { Button, Grid, Typography } from '@mui/material';
+import LocalPharmacyIcon from '@mui/icons-material/LocalPharmacy';
+import './MedicationStatusButton.css';
+import { getStatusText } from './MedicationStatus';
+
+export const MedicationStatusButton = props => {
+  const { baseColor, medicationDispense, handleOpenMedicationStatus, lastCheckedMedicationTime } =
+    props;
+  return (
+    <Grid item container flexDirection="column" alignItems="center">
+      <Button sx={buttonSx(baseColor)} variant="contained" onClick={handleOpenMedicationStatus}>
+        <LocalPharmacyIcon fontSize="large" />
+        <Typography className="etasuButtonText" component="p">
+          Medication:
+        </Typography>
+        <Typography component="p">{getStatusText(medicationDispense?.status)}</Typography>
+      </Button>
+      {renderTimestamp(lastCheckedMedicationTime)}
+    </Grid>
+  );
+};
+
+const buttonSx = baseColor => ({
+  backgroundColor: baseColor,
+  ':hover': { filter: 'brightness(110%)', backgroundColor: baseColor },
+  flexDirection: 'column'
+});
+
+const renderTimestamp = checkedTime => {
+  return checkedTime ? (
+    <>
+      <Typography component="p" className="etasuButtonTimestamp">
+        {convertTimeDifference(checkedTime)}
+      </Typography>
+      <Typography component="p" className="etasuButtonTimestamp timestampString">
+        {new Date(checkedTime).toLocaleString()}
+      </Typography>
+    </>
+  ) : (
+    <Typography>No medication selected</Typography>
+  );
+};
+
+const convertTimeDifference = start => {
+  const end = Date.now();
+  const difference = end - start;
+  const diffMin = difference / 60000;
+  let prefix = 'a long time';
+  if (diffMin < 1) {
+    prefix = 'a few seconds';
+  } else if (diffMin > 1 && diffMin < 2) {
+    prefix = 'a minute';
+  } else if (diffMin > 2 && diffMin < 60) {
+    prefix = `${Math.round(diffMin)} minutes`;
+  } else if (diffMin > 60 && diffMin < 120) {
+    prefix = 'an hour';
+  } else if (diffMin > 120 && diffMin < 1440) {
+    prefix = `${Math.round(diffMin / 60)} hours`;
+  } else if (diffMin > 1440 && diffMin < 2880) {
+    prefix = 'a day';
+  } else if (diffMin > 2880) {
+    prefix = `${Math.round(diffMin / 1440)} days`;
+  }
+  return `Last checked ${prefix} ago`;
+};
diff --git a/src/components/MedicationStatus/MedicationStatusModal.css b/src/components/MedicationStatus/MedicationStatusModal.css
new file mode 100644
index 00000000..616a79bb
--- /dev/null
+++ b/src/components/MedicationStatus/MedicationStatusModal.css
@@ -0,0 +1,33 @@
+.renew-icon{
+    cursor: pointer;
+    margin-left: 15px;
+    margin-right: 15px;
+  }
+  
+.refresh{
+    cursor: pointer;
+    margin-left: 15px;
+    margin-right: 15px;
+    animation-name: spin;
+    animation-duration: 500ms;
+    animation-iteration-count: 2;
+    animation-timing-function: ease-in-out; 
+  }
+ 
+ .status-icon{
+    width: 100%;
+    height:5px;
+  }
+
+.bundle-entry{
+    margin: 5px;
+  }
+
+@keyframes spin {
+    from {
+        transform:rotate(0deg);
+    }
+    to {
+        transform:rotate(360deg);
+    }
+  }
\ No newline at end of file
diff --git a/src/components/MedicationStatus/MedicationStatusModal.jsx b/src/components/MedicationStatus/MedicationStatusModal.jsx
new file mode 100644
index 00000000..93b4dfd3
--- /dev/null
+++ b/src/components/MedicationStatus/MedicationStatusModal.jsx
@@ -0,0 +1,62 @@
+import { Box, Grid, IconButton, Modal, Tooltip } from '@mui/material';
+import AutorenewIcon from '@mui/icons-material/Autorenew';
+import { useState, useEffect } from 'react';
+import { getStatusColor, getStatusText } from './MedicationStatus';
+import './MedicationStatusModal.css';
+
+const getIdText = medicationDispense => medicationDispense?.id || 'N/A';
+
+export const MedicationStatusModal = props => {
+  const { callback, onClose, medicationDispense, update } = props;
+  const [spin, setSpin] = useState(false);
+  const color = getStatusColor(medicationDispense?.status);
+  const status = getStatusText(medicationDispense?.status);
+
+  useEffect(() => {
+    if (update) {
+      setSpin(true);
+      callback();
+    }
+  }, [update]);
+
+  return (
+    <Modal open={update} onClose={onClose}>
+      <Box sx={modalStyle}>
+        <div>
+          <h1>Medication Status</h1>
+          <div className="status-icon" style={{ backgroundColor: color }}></div>
+          <Grid container>
+            <Grid item xs={10}>
+              <div className="bundle-entry">ID: {getIdText(medicationDispense)}</div>
+              <div className="bundle-entry">Status: {status}</div>
+            </Grid>
+            <Grid item xs={2}>
+              <div className="bundle-entry">
+                <Tooltip title="Refresh">
+                  <IconButton onClick={callback}>
+                    <AutorenewIcon
+                      className={spin ? 'refresh' : 'renew-icon'}
+                      onAnimationEnd={() => setSpin(false)}
+                    />
+                  </IconButton>
+                </Tooltip>
+              </div>
+            </Grid>
+          </Grid>
+        </div>
+      </Box>
+    </Modal>
+  );
+};
+
+const modalStyle = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  border: '1px solid #000',
+  boxShadow: 24,
+  p: 4
+};
diff --git a/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js b/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js
index 338b366f..881d1bc7 100644
--- a/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js
+++ b/src/components/RequestBox/PatientSearchBar/PatientSearchBar.js
@@ -6,100 +6,96 @@ import PatientBox from '../../SMARTBox/PatientBox';
 import './PatientSearchBarStyle.css';
 
 export default function PatientSearchBar(props) {
-    const [options] = useState(defaultValues);
-    const [input, setInput] = useState('');
-    const [listOfPatients, setListOfPatients] = useState([]);
+  const [options] = useState(defaultValues);
+  const [input, setInput] = useState('');
+  const [listOfPatients, setListOfPatients] = useState([]);
 
-    useEffect(() => {
-        const newList = props.searchablePatients.map((patient) => ({
-            id: patient.id,
-            name: getName(patient),
-        }));
-        setListOfPatients([newList]);
-    }, [props.searchablePatients]);
+  useEffect(() => {
+    const newList = props.searchablePatients.map(patient => ({
+      id: patient.id,
+      name: getName(patient)
+    }));
+    setListOfPatients([newList]);
+  }, [props.searchablePatients]);
 
-    function getName(patient) {
-        if (patient.name) {
-            return (patient.name[0].given[0]) + ' ' + (patient.name[0].family);
-        }
-        return '';
+  function getName(patient) {
+    if (patient.name) {
+      return patient.name[0].given[0] + ' ' + patient.name[0].family;
     }
-    
-    function getFilteredLength(searchstring, listOfPatients) {
-        const filteredListOfPatients = listOfPatients[0].filter((element) => {
-            if (searchstring === '') {
-                return element;
-            }
-            else {
-                return element.name.toLowerCase().includes(searchstring);
-            }
-        });
+    return '';
+  }
 
-        return filteredListOfPatients.length;
-    }
-
-    function patientSearchBar() {
-        return (
-            <Box className='search-box-container'>
-                <span className='search-header'>
-                    <p>Filter patient list</p>
-                    <Autocomplete className='search-box'
-                        disablePortal
-                        id='search-box'
-                        onInputChange={(event, newInputValue) => {
-                            setInput(newInputValue.toLowerCase());
-                        }}
-                        options={listOfPatients[0].map(item => item.name)}
-                        renderInput={(params) => <TextField {...params}
-                            label='Search'
-                        />} />
-                    <p>Showing {getFilteredLength(input, listOfPatients)} of {props.searchablePatients.length} records</p>
-                </span>
-                {displayFilteredPatientList(input, listOfPatients[0])}
-            </Box>
-        );
-    }
+  function getFilteredLength(searchstring, listOfPatients) {
+    const filteredListOfPatients = listOfPatients[0].filter(element => {
+      if (searchstring === '') {
+        return element;
+      } else {
+        return element.name.toLowerCase().includes(searchstring);
+      }
+    });
 
-    function displayFilteredPatientList(searchstring, listOfPatients) {
-        const filteredListOfPatients = listOfPatients.filter((element) => {
-            if (searchstring === '') {
-                return element;
-            }
-            else {
-                return element.name.toLowerCase().includes(searchstring);
-            }
-        });
-        return (
-            <Box>
-                {filteredListOfPatients.map(patient => {
-                    return (
-                        <span key={patient.id}>
-                            <PatientBox
-                                key={patient.id}
-                                patient={props.searchablePatients.find(item => item.id === patient.id)}
-                                client={props.client}
-                                request={props.request}
-                                launchUrl={props.launchUrl}
-                                callback={props.callback}
-                                callbackList={props.callbackList}
-                                callbackMap={props.callbackMap}
-                                updatePrefetchCallback={PrefetchTemplate.generateQueries}
-                                clearCallback={props.clearCallback}
-                                ehrUrl={props.ehrUrl}
-                                options={options}
-                                responseExpirationDays={props.responseExpirationDays}
-                                defaultUser={props.defaultUser}
-                            />
-                        </span>
-                    );
-                })}
-            </Box>
-        );
-    }
+    return filteredListOfPatients.length;
+  }
 
+  function patientSearchBar() {
     return (
-        <span>
-            {listOfPatients[0] ? patientSearchBar() : 'loading...'}
+      <Box className="search-box-container">
+        <span className="search-header">
+          <p>Filter patient list</p>
+          <Autocomplete
+            className="search-box"
+            disablePortal
+            id="search-box"
+            onInputChange={(event, newInputValue) => {
+              setInput(newInputValue.toLowerCase());
+            }}
+            options={listOfPatients[0].map(item => item.name)}
+            renderInput={params => <TextField {...params} label="Search" />}
+          />
+          <p>
+            Showing {getFilteredLength(input, listOfPatients)} of {props.searchablePatients.length}{' '}
+            records
+          </p>
         </span>
+        {displayFilteredPatientList(input, listOfPatients[0])}
+      </Box>
     );
-}
\ No newline at end of file
+  }
+
+  function displayFilteredPatientList(searchstring, listOfPatients) {
+    const filteredListOfPatients = listOfPatients.filter(element => {
+      if (searchstring === '') {
+        return element;
+      } else {
+        return element.name.toLowerCase().includes(searchstring);
+      }
+    });
+    return (
+      <Box>
+        {filteredListOfPatients.map(patient => {
+          return (
+            <span key={patient.id}>
+              <PatientBox
+                key={patient.id}
+                patient={props.searchablePatients.find(item => item.id === patient.id)}
+                client={props.client}
+                request={props.request}
+                launchUrl={props.launchUrl}
+                callback={props.callback}
+                callbackList={props.callbackList}
+                callbackMap={props.callbackMap}
+                updatePrefetchCallback={PrefetchTemplate.generateQueries}
+                clearCallback={props.clearCallback}
+                options={options}
+                responseExpirationDays={props.responseExpirationDays}
+                defaultUser={props.defaultUser}
+              />
+            </span>
+          );
+        })}
+      </Box>
+    );
+  }
+
+  return <span>{listOfPatients[0] ? patientSearchBar() : 'loading...'}</span>;
+}
diff --git a/src/components/RequestBox/RequestBox.js b/src/components/RequestBox/RequestBox.js
index 482a284c..eed4ac43 100644
--- a/src/components/RequestBox/RequestBox.js
+++ b/src/components/RequestBox/RequestBox.js
@@ -15,7 +15,7 @@ export default class RequestBox extends Component {
     this.state = {
       gatherCount: 0,
       response: {},
-      open: false
+      submittedRx: false
     };
 
     this.renderRequestResources = this.renderRequestResources.bind(this);
@@ -29,7 +29,7 @@ export default class RequestBox extends Component {
 
   // TODO - see how to submit response for alternative therapy
   replaceRequestAndSubmit(request) {
-    this.props.callback(request,request);    // Submit the cds hook request.
+    this.props.callback(request, request); // Submit the cds hook request.
     this.submitOrderSign(request);
   }
 
@@ -93,10 +93,6 @@ export default class RequestBox extends Component {
     }
   }
 
-  updateStateElement = (elementName, text) => {
-    this.setState({ [elementName]: text });
-  };
-
   emptyField = (<span className="empty-field">empty</span>);
 
   renderPatientInfo() {
@@ -231,7 +227,7 @@ export default class RequestBox extends Component {
     if (!userId) {
       console.log(
         'Practitioner not populated from prefetch, using default from config: ' +
-        this.props.defaultUser
+          this.props.defaultUser
       );
       userId = this.props.defaultUser;
     }
@@ -368,66 +364,56 @@ export default class RequestBox extends Component {
     return Object.keys(this.props.patient).length === 0;
   }
 
-  // SnackBar 
+  // SnackBar
   handleRxResponse = () => this.setState({ open: true });
 
   handleClose = () => this.setState({ open: false });
 
-
   render() {
     const disableSendToCRD = this.isOrderNotSelected() || this.props.loading;
     const disableSendRx = this.isOrderNotSelected() || this.props.loading;
     const disableLaunchSmartOnFhir = this.isPatientNotSelected();
-    const { open } = this.state;
+
     return (
-      <div>
-        { this.props.patient.id ? (
-            <div className="request">
-              <div style={{paddingTop: '15px'}}>
-                <div className="request-header">
-                  <span>Patient ID: {this.props.patient.id}</span>
-                </div>
-                <div className='patient-info'>
-                  {this.renderPatientInfo()}
-                  {this.renderPrefetchedResources()}
-                </div>
-              </div>
-              <div className="action-btns">
-                <ButtonGroup variant="outlined" aria-label="outlined button group">
-                  <Button onClick={this.launchSmartOnFhirApp} disabled={disableLaunchSmartOnFhir}>
-                    Launch SMART on FHIR App
-                  </Button>
-                  <Button onClick={this.sendRx} disabled={disableSendRx}>
-                    Send Rx to Pharmacy
-                  </Button>
-                  <Button onClick={this.submit} disabled={disableSendToCRD}>
-                    Sign Order
-                  </Button>
-                </ButtonGroup>
-              </div>
+      <>
+        <div className="request">
+          <div>
+            <div className="request-header">
+              <span>Patient ID: {this.props.patient.id}</span>
+            </div>
+            <div className="patient-info">
+              {this.renderPatientInfo()}
+              {this.renderPrefetchedResources()}
+            </div>
+          </div>
+          <div className="action-btns">
+            <ButtonGroup variant="outlined" aria-label="outlined button group">
+              <Button onClick={this.launchSmartOnFhirApp} disabled={disableLaunchSmartOnFhir}>
+                Launch SMART on FHIR App
+              </Button>
+              <Button onClick={this.sendRx} disabled={disableSendRx}>
+                Send Rx to Pharmacy
+              </Button>
+              <Button onClick={this.submit} disabled={disableSendToCRD}>
+                Sign Order
+              </Button>
+            </ButtonGroup>
           </div>
-        ) : (
-          <span/>
-        )}
+        </div>
         <Snackbar
-              anchorOrigin={{
-                vertical: 'bottom',
-                horizontal: 'left'
-              }}
-              open={open}
-              onClose={this.handleClose}
-              autoHideDuration={6000}
-            >
-              <MuiAlert
-                onClose={this.handleClose}
-                severity="success"
-                elevation={6}
-                variant="filled"
-              >
-                Success! NewRx Received By Pharmacy
-              </MuiAlert>
-            </Snackbar>
-      </div>
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left'
+          }}
+          open={this.state.submittedRx}
+          onClose={this.handleClose}
+          autoHideDuration={6000}
+        >
+          <MuiAlert onClose={this.handleClose} severity="success" elevation={6} variant="filled">
+            Success! NewRx Received By Pharmacy
+          </MuiAlert>
+        </Snackbar>
+      </>
     );
   }
 }
diff --git a/src/components/SettingsBox/SettingsBox.js b/src/components/SettingsBox/SettingsBox.js
index f12a3487..684188ec 100644
--- a/src/components/SettingsBox/SettingsBox.js
+++ b/src/components/SettingsBox/SettingsBox.js
@@ -6,12 +6,10 @@ import { headerDefinitions, types } from '../../util/data';
 import FHIR from 'fhirclient';
 import { Box, Button, FormControlLabel, Grid, TextField } from '@mui/material';
 
-const clearMedicationDispenses = 
+const clearMedicationDispenses =
   ({ ehrUrl, access_token }, consoleLog) =>
   () => {
-    console.log(
-      'Clear MedicationDispenses from the EHR: ' + ehrUrl
-    );
+    console.log('Clear MedicationDispenses from the EHR: ' + ehrUrl);
     const client = FHIR.client({
       serverUrl: ehrUrl,
       ...(access_token ? { tokenResponse: access_token } : {})
@@ -160,23 +158,23 @@ export default class SettingsBox extends Component {
   }
 
   componentDidMount() {
-    const headers = Object.keys(headerDefinitions).map(key => ([key, this.props.state[key]]));
-    this.setState({originalValues: headers});
+    const headers = Object.keys(headerDefinitions).map(key => [key, this.props.state[key]]);
+    this.setState({ originalValues: headers });
   }
 
   closeSettings() {
     this.props.updateCB('showSettings', false);
   }
   saveSettings() {
-    const headers = Object.keys(headerDefinitions).map(key => ([key, this.props.state[key]]));
+    const headers = Object.keys(headerDefinitions).map(key => [key, this.props.state[key]]);
     console.log(headers);
     localStorage.setItem('reqgenSettings', JSON.stringify(headers));
     this.closeSettings();
   }
 
   cancelSettings() {
-    this.state.originalValues.forEach((e) => {
-      try{
+    this.state.originalValues.forEach(e => {
+      try {
         this.props.updateCB(e[0], e[1]);
       } catch {
         console.log('Failed to reset setting value');
@@ -199,80 +197,89 @@ export default class SettingsBox extends Component {
       );
 
     return (
-      <div>
-        <Box flexGrow={1}>
-        <h4 className='setting-header'>Settings</h4>
-        <Grid container spacing={2} sx={{padding: '20px'}}>
-        {headers.map(({ key, type, display }) => {
-
-          switch (type) {
-            case 'input':
-              return (
-                <Grid key = {key} item xs={6}>
-                <div>
-                  <TextField 
-                    label={display} 
-                    variant="outlined" 
-                    value={state[key]} 
-                    onChange = {(event)=>{updateCB(key, event.target.value);}}
-                    sx = {{width:'100%'}}
-                  />
-                </div>
-                </Grid>
-              );
-            case 'check':
-              if(firstCheckbox) {
-                firstCheckbox = false;
-                showBreak = true;
-              } else {
-                showBreak = false;
-              }
-              return (
-                <React.Fragment key={key}>
-                  {showBreak ? <Grid item xs={12}></Grid> :''}
-                  <Grid item xs={3}>
-                    <FormControlLabel control = {
-                        <Checkbox 
-                        checked = {Boolean(state[key])}
-                        onChange = {(event) => {updateCB(key, event.target.checked);}}/>
-                      }
-                      label = {display}
-                    />
+      <Box flexGrow={1}>
+        <h4 className="setting-header">Settings</h4>
+        <Grid container spacing={2} sx={{ padding: '20px' }}>
+          {headers.map(({ key, type, display }) => {
+            switch (type) {
+              case 'input':
+                return (
+                  <Grid key={key} item xs={6}>
+                    <div>
+                      <TextField
+                        label={display}
+                        variant="outlined"
+                        value={state[key]}
+                        onChange={event => {
+                          updateCB(key, event.target.value);
+                        }}
+                        sx={{ width: '100%' }}
+                      />
+                    </div>
                   </Grid>
-                </React.Fragment>
-              );
-            default:
-              return (
-                <div key={key}>
-                  <p className="setting-header">{display}</p>
-                </div>
-              );
-          }
-        })}
-            {resetHeaderDefinitions.map(({ key, display, reset }) => {
-              return (
-                <Grid item key={key} xs={3}>
-                  <Button variant='outlined' onClick={reset(state, consoleLog)}>
-                    {display}
-                  </Button>
-                </Grid>
-              );
-            })}
+                );
+              case 'check':
+                if (firstCheckbox) {
+                  firstCheckbox = false;
+                  showBreak = true;
+                } else {
+                  showBreak = false;
+                }
+                return (
+                  <React.Fragment key={key}>
+                    {showBreak ? <Grid item xs={12}></Grid> : ''}
+                    <Grid item xs={3}>
+                      <FormControlLabel
+                        control={
+                          <Checkbox
+                            checked={Boolean(state[key])}
+                            onChange={event => {
+                              updateCB(key, event.target.checked);
+                            }}
+                          />
+                        }
+                        label={display}
+                      />
+                    </Grid>
+                  </React.Fragment>
+                );
+              default:
+                return (
+                  <div key={key}>
+                    <p className="setting-header">{display}</p>
+                  </div>
+                );
+            }
+          })}
+          {resetHeaderDefinitions.map(({ key, display, reset }) => {
+            return (
+              <Grid item key={key} xs={3}>
+                <Button variant="outlined" onClick={reset(state, consoleLog)}>
+                  {display}
+                </Button>
+              </Grid>
+            );
+          })}
           {/* spacer */}
-          <hr style={{
-            'width':'100%'
-          }}/>
+          <hr
+            style={{
+              width: '100%'
+            }}
+          />
           <Grid item xs={8} />
 
           <Grid item xs={2}>
-            <Button variant = 'outlined' onClick = {this.cancelSettings}>Cancel</Button>
+            <Button variant="outlined" onClick={this.cancelSettings}>
+              Cancel
+            </Button>
           </Grid>
           <Grid item xs={2}>
-            <Button variant = 'contained' onClick = {this.saveSettings}>Save</Button>
+            <Button variant="contained" onClick={this.saveSettings}>
+              Save
+            </Button>
           </Grid>
         </Grid>
       </Box>
-      </div>
     );
   }
 }
diff --git a/src/containers/RequestBuilder.js b/src/containers/RequestBuilder.js
index 00018b58..e4845d42 100644
--- a/src/containers/RequestBuilder.js
+++ b/src/containers/RequestBuilder.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Button, Box, IconButton, Modal, DialogTitle } from '@mui/material';
+import { Button, Box, Grid, IconButton, Modal, DialogTitle } from '@mui/material';
 import PersonIcon from '@mui/icons-material/Person';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import DisplayBox from '../components/DisplayBox/DisplayBox';
@@ -16,8 +16,9 @@ import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-
+import SettingsIcon from '@mui/icons-material/Settings';
 import PatientSearchBar from '../components/RequestBox/PatientSearchBar/PatientSearchBar';
+import { MedicationStatus } from '../components/MedicationStatus/MedicationStatus.jsx';
 
 export default class RequestBuilder extends Component {
   constructor(props) {
@@ -37,7 +38,7 @@ export default class RequestBuilder extends Component {
       showSettings: false,
       token: null,
       client: this.props.client,
-      codeValues: defaultValues,
+      codeValues: defaultValues
     };
 
     this.updateStateElement = this.updateStateElement.bind(this);
@@ -50,11 +51,11 @@ export default class RequestBuilder extends Component {
 
   componentDidMount() {
     // init settings
-    Object.keys(headerDefinitions).map((key) => {
+    Object.keys(headerDefinitions).map(key => {
       this.setState({ [key]: headerDefinitions[key].default });
     });
     // load settings
-    JSON.parse(localStorage.getItem('reqgenSettings') || '[]').forEach((element) => {
+    JSON.parse(localStorage.getItem('reqgenSettings') || '[]').forEach(element => {
       try {
         this.updateStateElement(element[0], element[1]);
       } catch {
@@ -104,7 +105,6 @@ export default class RequestBuilder extends Component {
     }
   };
 
-
   timeout = time => {
     let controller = new AbortController();
     setTimeout(() => controller.abort(), time * 1000);
@@ -201,7 +201,7 @@ export default class RequestBuilder extends Component {
       .request(this.state.patientFhirQuery, { flat: true })
       .then(result => {
         this.setState({
-          patientList: result,
+          patientList: result
         });
       })
       .catch(e => {
@@ -234,34 +234,49 @@ export default class RequestBuilder extends Component {
       response: {}
     });
   };
+
   handleChange = () => (event, isExpanded) => {
     this.setState({ expanded: isExpanded ? true : false });
   };
 
+  isOrderNotSelected() {
+    return Object.keys(this.state.request).length === 0;
+  }
+
   render() {
+    const displayRequestBox = !!this.state.patient.id;
+    const disableGetMedicationStatus = this.isOrderNotSelected() || this.state.loading;
+
     return (
-      <div>
-        <div className="nav-header">
-          <button
-            className={
-              'btn btn-class settings ' + (this.state.showSettings ? 'active' : 'not-active')
-            }
+      <>
+        <Grid
+          container
+          className="nav-header"
+          xs={12}
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Button
+            sx={navigationBarButtonStyle}
+            onClick={() => this.reconnectEhr()}
+            variant="outlined"
+          >
+            Reconnect EHR
+          </Button>
+          <Button
+            sx={navigationBarButtonStyle}
             onClick={() => this.updateStateElement('showSettings', !this.state.showSettings)}
+            variant="outlined"
           >
-            <span className="glyphicon glyphicon-cog settings-icon" />
-          </button>
-          <button
-            className="btn btn-class"
-            onClick={() => {
-              this.reconnectEhr();
+            <SettingsIcon fontSize="large" />
+          </Button>
+          <Modal
+            open={this.state.showSettings}
+            onClose={() => {
+              this.setState({ showSettings: false });
             }}
           >
-            Reconnect EHR
-          </button>
-        </div>
-        <div>
-          <Modal open={this.state.showSettings} onClose={() => { this.setState({ showSettings: false }); }} >
-            <div className='settings-box'>
+            <div className="settings-box">
               <SettingsBox
                 state={this.state}
                 consoleLog={this.consoleLog}
@@ -269,97 +284,120 @@ export default class RequestBuilder extends Component {
               />
             </div>
           </Modal>
-        </div>
-        <div style={{ display: 'flex' }}>
-          <Accordion style={{ width: '95%' }} expanded={this.state.expanded} onChange={this.handleChange()}>
-            <AccordionSummary
-              expandIcon={<ExpandMoreIcon />}
-              aria-controls="panel1a-content"
-              id="panel1a-header"
-              style={{ marginLeft: '45%' }}
-            >
-              <Button variant="contained" startIcon={<PersonIcon />}>
-                Select a patient
-              </Button>
-            </AccordionSummary>
-            <AccordionDetails>
-              {this.state.patientList.length > 0 && this.state.expanded ?
-                <div>
+        </Grid>
+        <Grid container spacing={2} padding={2}>
+          <Grid item xs={11}>
+            <Accordion expanded={this.state.expanded} onChange={this.handleChange()}>
+              <AccordionSummary
+                expandIcon={<ExpandMoreIcon />}
+                aria-controls="panel1a-content"
+                id="panel1a-header"
+                style={{ marginLeft: '45%' }}
+              >
+                <Button variant="contained" startIcon={<PersonIcon />}>
+                  Select a patient
+                </Button>
+              </AccordionSummary>
+              <AccordionDetails>
+                {this.state.patientList.length > 0 && this.state.expanded && (
                   <Box>
-                  {this.state.patientList instanceof Error
-                    ? this.renderError()
-                    : <PatientSearchBar
-                      getPatients = {this.getPatients}
-                      searchablePatients={this.state.patientList}
-                      client={this.props.client}
-                      request={this.state.request}
-                      launchUrl={this.state.launchUrl}
-                      callback={this.updateStateElement}
-                      callbackList={this.updateStateList}
-                      callbackMap={this.updateStateMap}
-                      // updatePrefetchCallback={PrefetchTemplate.generateQueries}
-                      clearCallback={this.clearState}
-                      ehrUrl={this.state.ehrUrl} // is this used?
-                      options={this.state.codeValues}
-                      responseExpirationDays={this.state.responseExpirationDays}
-                      defaultUser={this.state.defaultUser}
-                    />}
+                    {this.state.patientList instanceof Error ? (
+                      this.renderError()
+                    ) : (
+                      <PatientSearchBar
+                        getPatients={this.getPatients}
+                        searchablePatients={this.state.patientList}
+                        client={this.props.client}
+                        request={this.state.request}
+                        launchUrl={this.state.launchUrl}
+                        callback={this.updateStateElement}
+                        callbackList={this.updateStateList}
+                        callbackMap={this.updateStateMap}
+                        // updatePrefetchCallback={PrefetchTemplate.generateQueries}
+                        clearCallback={this.clearState}
+                        options={this.state.codeValues}
+                        responseExpirationDays={this.state.responseExpirationDays}
+                        defaultUser={this.state.defaultUser}
+                      />
+                    )}
                   </Box>
-                </div>
-                : <span></span>
-              }
+                )}
+              </AccordionDetails>
+            </Accordion>
+          </Grid>
+          <Grid item xs={1} alignContent="center" justifyContent="center">
+            <IconButton color="primary" onClick={() => this.getPatients()} size="large">
+              <RefreshIcon fontSize="large" />
+            </IconButton>
+          </Grid>
 
-            </AccordionDetails>
-          </Accordion>
-          <IconButton
-            color="primary"
-            onClick={() => this.getPatients()}
-            size="large"
-          >
-            <RefreshIcon fontSize="large" />
-          </IconButton>
-        </div>
-        <div className="form-group container left-form">
-          <div>
-            {/*for the ehr launch */}
-            <RequestBox
-              ehrUrl={this.state.ehrUrl}
-              submitInfo={this.submit_info}
-              access_token={this.state.token}
+          <Grid item container className="form-group" xs={12} md={6} spacing={2}>
+            {displayRequestBox && (
+              <Grid item>
+                <RequestBox
+                  ehrUrl={this.state.ehrUrl}
+                  submitInfo={this.submit_info}
+                  access_token={this.state.token}
+                  client={this.state.client}
+                  fhirServerUrl={this.state.baseUrl}
+                  fhirVersion={'r4'}
+                  patientId={this.state.patient.id}
+                  patient={this.state.patient}
+                  request={this.state.request}
+                  response={this.state.response}
+                  code={this.state.code}
+                  codeSystem={this.state.codeSystem}
+                  display={this.state.display}
+                  prefetchedResources={this.state.prefetchedResources}
+                  launchUrl={this.state.launchUrl}
+                  responseExpirationDays={this.state.responseExpirationDays}
+                  pimsUrl={this.state.pimsUrl}
+                  smartAppUrl={this.state.smartAppUrl}
+                  defaultUser={this.state.defaultUser}
+                  ref={this.requestBox}
+                  loading={this.state.loading}
+                  consoleLog={this.consoleLog}
+                  patientFhirQuery={this.state.patientFhirQuery}
+                />
+              </Grid>
+            )}
+            {!disableGetMedicationStatus && (
+              <Grid item>
+                <MedicationStatus ehrUrl={this.state.ehrUrl} request={this.state.request} />
+              </Grid>
+            )}
+          </Grid>
+
+          <Grid item container xs={12} md={6}>
+            <DisplayBox
+              response={this.state.response}
               client={this.state.client}
-              fhirServerUrl={this.state.baseUrl}
-              fhirVersion={'r4'}
               patientId={this.state.patient.id}
-              patient={this.state.patient}
-              request={this.state.request}
-              response={this.state.response}
-              code={this.state.code}
-              codeSystem={this.state.codeSystem}
-              display={this.state.display}
-              prefetchedResources={this.state.prefetchedResources}
-              launchUrl={this.state.launchUrl}
-              responseExpirationDays={this.state.responseExpirationDays}
-              pimsUrl={this.state.pimsUrl}
-              smartAppUrl={this.state.smartAppUrl}
-              defaultUser={this.state.defaultUser}
-              ref={this.requestBox}
-              loading={this.state.loading}
-              consoleLog={this.consoleLog}
-              patientFhirQuery={this.state.patientFhirQuery}
+              ehrLaunch={true}
+              takeSuggestion={this.takeSuggestion}
             />
-          </div>
-        </div>
-
-        <div className="right-form">
-          <DisplayBox
-            response={this.state.response}
-            client={this.state.client}
-            patientId={this.state.patient.id}
-            ehrLaunch={true}
-            takeSuggestion={this.takeSuggestion}
-          />
-        </div>
-      </div>
+          </Grid>
+        </Grid>
+      </>
     );
   }
 }
+
+const navigationBarButtonStyle = {
+  backgroundColor: 'white',
+  color: 'black',
+  borderColor: 'black',
+  display: 'flex',
+  marginX: 2,
+  marginY: 1,
+  '&:hover': {
+    color: 'white',
+    backgroundColor: 'black',
+    borderColor: 'black'
+  },
+  '&:active': {
+    color: 'white',
+    backgroundColor: 'black',
+    borderColor: 'black'
+  }
+};
diff --git a/src/index.css b/src/index.css
index 410e3449..5c0b331e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,15 +2,10 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
-
 }
-.left-form { 
-  width: 50%;
-  float: left;
-  margin-top: 25px;
 
-}
-.btn:focus,.btn:active {
+.btn:focus,
+.btn:active {
   outline: none !important;
   box-shadow: none;
 }
@@ -22,298 +17,247 @@ body {
   left: 13px;
   top: 17px;
   transition: 0.2s ease all;
-  font-size: 14px;  
+  font-size: 14px;
 }
-input:focus ~ .floating-label{
+input:focus ~ .floating-label {
   top: -14px;
   opacity: 1;
-
 }
 
-input:not(:focus):not([value=""]):valid ~ .floating-label{
+input:not(:focus):not([value='']):valid ~ .floating-label {
   top: -14px;
   opacity: 1;
-
 }
 
-.error-border{
-  border-color:#E34531 !important; 
+.error-border {
+  border-color: #e34531 !important;
 }
-.input-text:not(:focus):not([value=""]):valid{
+.input-text:not(:focus):not([value='']):valid {
   border-color: #000000;
-
 }
 .form-control:focus {
   border-color: inherit;
   -webkit-box-shadow: none;
   box-shadow: none;
 }
-.input-text{
-  border-width:1px 0px 0px 9px;
+.input-text {
+  border-width: 1px 0px 0px 9px;
   border-style: solid none solid solid;
 }
 
-.input-text:hover{
+.input-text:hover {
   border-color: #999999;
 }
 
-.input-text:focus{
+.input-text:focus {
   border-color: #555555;
 }
 
-.btn-class{
-  border-width:1px 5px 3px 1px;
+.btn-class {
+  border-width: 1px 5px 3px 1px;
   border-style: solid solid solid solid;
   border-color: black;
-  background: linear-gradient(white,white)
-}
-
-
-.btn-class-correct{
-  border-color: #3145C3;
+  background: linear-gradient(white, white);
 }
 
-.right-form{
-
-  float:right;
-  width:50%;
-  /* gotta account for the header on the left form */
-  margin-top:52px;
+.btn-class-correct {
+  border-color: #3145c3;
 }
 
-.button-empty-fields{
-  opacity:0.5 !important;
+.button-empty-fields {
+  opacity: 0.5 !important;
 }
 
-.button-error{
-  border-color: #E34531;
+.button-error {
+  border-color: #e34531;
 }
 
-.genderBlockMaleUnselected{
+.genderBlockMaleUnselected {
   border-width: 1px 1px 3px 5px;
-  opacity:0.5;
-
+  opacity: 0.5;
 }
-.genderBlockFemaleUnselected{
+.genderBlockFemaleUnselected {
   border-width: 1px 5px 3px 1px;
-  opacity:0.5;
+  opacity: 0.5;
 }
 
-.genderBlockMaleSelected{
+.genderBlockMaleSelected {
   border-width: 1px 1px 1px 3px;
-  background:#DDDDDD;
-
+  background: #dddddd;
 }
-.genderBlockFemaleSelected{
-
+.genderBlockFemaleSelected {
   border-width: 1px 3px 1px 1px;
-  background:#DDDDDD;
-
-
+  background: #dddddd;
 }
 
-.genderBlockMale{
-  width:50%;
+.genderBlockMale {
+  width: 50%;
   border-top-right-radius: 0cm;
   border-bottom-right-radius: 0cm;
-  
-
 }
-.genderBlockFemale{
-  width:50%;
+.genderBlockFemale {
+  width: 50%;
   border-top-left-radius: 0cm;
   border-bottom-left-radius: 0cm;
-
 }
-.genderBlockFemaleUnselected:hover{
-  border-width:1px 3px 1px 1px;
-  padding-bottom:-2px;
-  margin-bottom:2px;
+.genderBlockFemaleUnselected:hover {
+  border-width: 1px 3px 1px 1px;
+  padding-bottom: -2px;
+  margin-bottom: 2px;
 }
 
-.genderBlockMaleUnselected:hover{
-  border-width:1px 1px 1px 3px;
-  padding-bottom:-2px;
-  margin-bottom:2px;
+.genderBlockMaleUnselected:hover {
+  border-width: 1px 1px 1px 3px;
+  padding-bottom: -2px;
+  margin-bottom: 2px;
 }
 
-.dropdownCode{
+.dropdownCode {
   border-width: 1px 1px 0px 9px !important;
 }
-.dropdownCode:focus{
+.dropdownCode:focus {
   border-color: #555555 !important;
 }
-.header{
+.header {
   text-align: center;
   font-size: 18px;
-  padding:10px;
+  padding: 10px;
 }
 
-.checkBox{
-  float:right;
+.checkBox {
+  float: right;
   border-style: solid;
-  border-width:1px 5px 3px 1px;
+  border-width: 1px 5px 3px 1px;
 }
 
-.checkBoxClicked{
+.checkBoxClicked {
   border-width: 1px 3px 1px 1px;
-  float:right;
-  border-color:gray black black gray;
-
+  float: right;
+  border-color: gray black black gray;
 }
 
-.checkBox:hover{
-  border-width:1px 3px 1px 1px;
-  border-color:gray black black gray;
+.checkBox:hover {
+  border-width: 1px 3px 1px 1px;
+  border-color: gray black black gray;
 }
 
-.onOffState{
+.onOffState {
   border-style: solid;
-  border-radius:50px;
+  border-radius: 50px;
   border-width: 0px 5px 0px 5px;
   margin-left: 5px;
 }
-.onOff{
+.onOff {
   /* border-color: #E34531; */
-  border-color: #C5C5C5;
+  border-color: #c5c5c5;
 }
 
-.onOffActive{
+.onOffActive {
   /* border-color: #5CB85C; */
   border-color: #222222;
-
 }
 
-.ui.selection.active.dropdown:hover{
-  border-color:black;
+.ui.selection.active.dropdown:hover {
+  border-color: black;
 }
 
-.blackBorder{
-  border-color:black !important;
+.blackBorder {
+  border-color: black !important;
 }
 
-.ui.selection.active.dropdown{
-  border-color:#333333;
+.ui.selection.active.dropdown {
+  border-color: #333333;
 }
 
-.ui{
+.ui {
   transition: all 2s;
 }
 
-
-.visible{
-  opacity:1;
+.visible {
+  opacity: 1;
 }
-.invisible{
+.invisible {
   /* display:none; */
-  opacity:0;
+  opacity: 0;
 }
-.spinner{
-  display:inline-block;
-  transition:all 0.5s;
-  margin-left:15px;
-  line-height:3em;
+.spinner {
+  display: inline-block;
+  transition: all 0.5s;
+  margin-left: 15px;
+  line-height: 3em;
 }
 
-.rightStateInput{
-  width:50%;
-  float:right;
-  margin-bottom:25px;
+.rightStateInput {
+  width: 50%;
+  float: right;
+  margin-bottom: 25px;
   border-left: 5px solid transparent;
 }
 
-.leftStateInput{
-  width:50%;
-  border-right:5px solid transparent;
-  float:left;
-  margin-bottom:25px;
+.leftStateInput {
+  width: 50%;
+  border-right: 5px solid transparent;
+  float: left;
+  margin-bottom: 25px;
 }
 
 .version-button {
-    width: 60px;
-    border-style: solid solid solid solid;
-    border-color: black;
+  width: 60px;
+  border-style: solid solid solid solid;
+  border-color: black;
 }
 
 .launch-button {
-    border-style: solid solid solid solid;
-    border-color: black;
-    width:120px;
+  border-style: solid solid solid solid;
+  border-color: black;
+  width: 120px;
 }
 
 .right-button {
-    border-width:1px 3px 3px 1px;
-    border-radius: 0 10% 10% 0%;
-    margin-right: 10px;
+  border-width: 1px 3px 3px 1px;
+  border-radius: 0 10% 10% 0%;
+  margin-right: 10px;
 }
 
 .left-button {
-    border-width:1px 1px 3px 3px;
-    border-radius: 10% 0% 0% 10%;
-}
-
-.version-button:hover{
-    background:black;
-    color:#AAA;
-}
-
-.launch-button:hover{
-    background:black;
-    color:#AAA;
-}
-
-.launch-button.not-active{
-    color:#666;
+  border-width: 1px 1px 3px 3px;
+  border-radius: 10% 0% 0% 10%;
 }
 
-.launch-button.active{
-    background:black;
-    color:white;
+.version-button:hover {
+  background: black;
+  color: #aaa;
 }
 
-.version-button.not-active{
-    color:#666;
+.launch-button:hover {
+  background: black;
+  color: #aaa;
 }
 
-.version-button.active{
-    background:black;
-    color:white;
+.launch-button.not-active {
+  color: #666;
 }
 
-.btn-class.settings{
-    border-width:1px;
-    font-size:22px;
-    height:36px;
-    float:right;
-    
-}
-.settings:hover{
-    background:black;
-    color:white;
+.launch-button.active {
+  background: black;
+  color: white;
 }
 
-.settings.active{
-    background:black;
-    color:white;
+.version-button.not-active {
+  color: #666;
 }
-.settings-icon{
 
-    vertical-align:1px;
-}
-#settings-header{
-    margin-bottom: 10px;
+.version-button.active {
+  background: black;
+  color: white;
 }
 
-.nav-header{
-  margin-bottom: 10px;
-  display: flow;
-  height: 55px;
-  padding:10px;
+.nav-header {
   border-bottom: 1px solid black;
-  background-color: #005B94;
+  background-color: #005b94;
 }
 
-.loading{
+.loading {
   width: 100vw;
   height: 100vh;
   display: flex;
@@ -329,12 +273,11 @@ input:not(:focus):not([value=""]):valid ~ .floating-label{
   border: 1px solid black;
   width: 75%;
   height: 75%;
-  background-color:white;
+  background-color: white;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   overflow-y: auto;
-  box-shadow: 10px 10px 20px black
-  
-}
\ No newline at end of file
+  box-shadow: 10px 10px 20px black;
+}