1 files changed, 15 insertions, 2 deletions
diff --git a/webui/src/components/ValidLabels.tsx b/webui/src/components/ValidLabels.tsx
index 173e146cf..4c64dd6dc 100644
--- a/webui/src/components/ValidLabels.tsx
+++ b/webui/src/components/ValidLabels.tsx
@@ -1,12 +1,22 @@
 import React, { useState } from 'react';
 
 import CircularProgress from '@material-ui/core/CircularProgress';
+import { makeStyles } from '@material-ui/styles';
 
+import LabelBullet from './LabelBullet';
 import { useValidLabelsQuery } from './ValidLabelsQuery.generated';
 
+const useStyles = makeStyles({
+  list: {
+    listStyleType: 'none',
+    padding: 0,
+  },
+});
+
 const ValidLabels: React.FC = () => {
   const { loading, error, data } = useValidLabelsQuery();
   const [filter, setFilter] = useState('');
+  const classes = useStyles();
   if (loading) return <CircularProgress />;
   if (error) return <p>Error: {error}</p>;
   const labels = data?.repository?.validLabels.nodes.filter(
@@ -22,9 +32,12 @@ const ValidLabels: React.FC = () => {
         onChange={e => setFilter(e.target.value)}
         value={filter}
       />
-      <ul>
+      <ul className={classes.list}>
         {labels?.map(l => (
-          <li>{l.name}</li>
+          <li key={l.name}>
+            <LabelBullet label={l} />
+            {l.name}
+          </li>
         ))}
       </ul>
     </>