diff --git a/web/src/components/core/date-picker/MqDatePicker.tsx b/web/src/components/core/date-picker/MqDatePicker.tsx
index d62d55a2cc..0173d5d985 100644
--- a/web/src/components/core/date-picker/MqDatePicker.tsx
+++ b/web/src/components/core/date-picker/MqDatePicker.tsx
@@ -31,6 +31,9 @@ const MqDatePicker: React.FC<DatePickerProps> = ({
         label: {
           left: theme.spacing(2),
         },
+        '.MuiOutlinedInput-input': {
+          padding: '6.5px 14px',
+        },
         '&:hover': {
           '.MuiOutlinedInput-notchedOutline': {
             borderColor: `${theme.palette.primary.main} !important`,
diff --git a/web/src/components/core/status/MqStatus.tsx b/web/src/components/core/status/MqStatus.tsx
index 0e0add85f5..96af1b4da7 100644
--- a/web/src/components/core/status/MqStatus.tsx
+++ b/web/src/components/core/status/MqStatus.tsx
@@ -17,20 +17,28 @@ const MqStatus: React.FC<OwnProps> = ({ label, color }) => {
   return (
     <Box
       sx={{
-        display: 'flex',
+        display: 'inline-flex',
         alignItems: 'center',
         gap: theme.spacing(1),
       }}
+      border={`1px solid ${color}`}
+      p={'4px 8px'}
+      borderRadius={theme.spacing(1)}
     >
       <Box
         sx={{
-          width: theme.spacing(2),
-          height: theme.spacing(2),
+          width: theme.spacing(1.5),
+          height: theme.spacing(1.5),
           borderRadius: '50%',
         }}
+        display={'flex'}
         style={{ backgroundColor: color }}
       />
-      {label && <MqText>{label}</MqText>}
+      {label && (
+        <MqText small bold color={color}>
+          {label}
+        </MqText>
+      )}
     </Box>
   )
 }
diff --git a/web/src/components/core/text/MqText.tsx b/web/src/components/core/text/MqText.tsx
index 169f90cd03..041a4073f7 100644
--- a/web/src/components/core/text/MqText.tsx
+++ b/web/src/components/core/text/MqText.tsx
@@ -117,6 +117,7 @@ const MqText: React.FC<MqTextProps> = ({
     },
     small: {
       fontSize: '.625rem',
+      lineHeight: 'inherit',
     },
     paragraph: {
       marginBottom: theme.spacing(2),
diff --git a/web/src/components/datasets/DatasetDetailPage.tsx b/web/src/components/datasets/DatasetDetailPage.tsx
index ac07f0778f..b739d71026 100644
--- a/web/src/components/datasets/DatasetDetailPage.tsx
+++ b/web/src/components/datasets/DatasetDetailPage.tsx
@@ -197,7 +197,7 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
         <Box display={'flex'} alignItems={'center'}>
           {facetsStatus && (
             <Box mr={1}>
-              <MqStatus color={facetsStatus} />
+              <MqStatus label={'Quality'} color={facetsStatus} />
             </Box>
           )}
           <MqText heading font={'mono'}>
diff --git a/web/src/components/jobs/JobDetailPage.tsx b/web/src/components/jobs/JobDetailPage.tsx
index d9a0fc6909..71e72ee1ba 100644
--- a/web/src/components/jobs/JobDetailPage.tsx
+++ b/web/src/components/jobs/JobDetailPage.tsx
@@ -94,7 +94,7 @@ const JobDetailPage: FunctionComponent<IProps> = (props) => {
 
   if (runsLoading) {
     return (
-      <Box display={'flex'} justifyContent={'center'}>
+      <Box display={'flex'} justifyContent={'center'} mt={2}>
         <CircularProgress color='primary' />
       </Box>
     )
@@ -110,7 +110,13 @@ const JobDetailPage: FunctionComponent<IProps> = (props) => {
         padding: theme.spacing(2),
       }}
     >
-      <Box mb={2} display={'flex'} justifyContent={'space-between'} alignItems={'center'}>
+      <Box
+        mb={2}
+        display={'flex'}
+        justifyContent={'space-between'}
+        alignItems={'center'}
+        sx={{ borderBottom: 1, borderColor: 'divider', width: '100%' }}
+      >
         <Tabs value={tabIndex} onChange={handleChange} textColor='primary' indicatorColor='primary'>
           <Tab label={i18next.t('jobs.latest_tab')} disableRipple={true} />
           <Tab label={'I/O'} disableRipple={true} />
@@ -120,6 +126,7 @@ const JobDetailPage: FunctionComponent<IProps> = (props) => {
           <Box mr={1}>
             <Button
               variant='outlined'
+              size={'small'}
               sx={{
                 borderColor: theme.palette.error.main,
                 color: theme.palette.error.main,
@@ -146,6 +153,7 @@ const JobDetailPage: FunctionComponent<IProps> = (props) => {
           </Box>
           <Box mr={1}>
             <Button
+              size={'small'}
               variant='outlined'
               color='primary'
               target={'_blank'}
@@ -163,7 +171,7 @@ const JobDetailPage: FunctionComponent<IProps> = (props) => {
       <Box display={'flex'} alignItems={'center'}>
         {runs.length && (
           <Box mr={1}>
-            <MqStatus color={jobRunsStatus(runs)} />
+            <MqStatus label={job.latestRun?.state} color={jobRunsStatus(runs)} />
           </Box>
         )}
         <MqText font={'mono'} heading>
diff --git a/web/src/routes/datasets/Datasets.tsx b/web/src/routes/datasets/Datasets.tsx
index 352684d61b..a647a5ea71 100644
--- a/web/src/routes/datasets/Datasets.tsx
+++ b/web/src/routes/datasets/Datasets.tsx
@@ -209,7 +209,10 @@ const Datasets: React.FC<DatasetsProps> = ({
                           <TableCell align='left'>
                             {datasetFacetsStatus(dataset.facets) ? (
                               <>
-                                <MqStatus color={datasetFacetsStatus(dataset.facets)} />
+                                <MqStatus
+                                  label={'Quality'}
+                                  color={datasetFacetsStatus(dataset.facets)}
+                                />
                               </>
                             ) : (
                               <MqText>N/A</MqText>