diff --git a/src/components/changesetFilter.jsx b/src/components/changesetFilter.jsx
index 8303ba7a..3b2517a7 100644
--- a/src/components/changesetFilter.jsx
+++ b/src/components/changesetFilter.jsx
@@ -1,19 +1,25 @@
 import FilterIcon from 'mdi-react/FilterIcon';
+import CloseCircleIcon from 'mdi-react/CloseCircleIcon';
 
 const changesetFilter = ({ value, onChange }) => (
   <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-    <form style={{ margin: '0em 0em 1em 3.5em' }}>
+    <form style={{ margin: '0em 0em 1em 3.5em' }} className={!value ? 'empty' : ''}>
       <span>Filter by description:&nbsp;</span>
       <input
         id="descriptionFilterField"
         type="text"
         value={value}
         onChange={event => onChange(event)}
-        onBlur={(event) => {
+      />
+      <button
+        style={{ height: '2em' }}
+        onClick={(event) => {
           document.getElementById('descriptionFilterField').value = '';
           onChange(event);
         }}
-      />
+      >
+        <CloseCircleIcon />
+      </button>
     </form>
     <button
       style={{ height: '2em' }}
diff --git a/src/style.css b/src/style.css
index 0bf99aaa..59c14e8c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -158,10 +158,10 @@ tr.changeset td{
 	vertical-align: middle;
 }
 
-form:not(:focus-within) {
+form.empty:not(:focus-within) {
 	opacity: 0;
 }
-form:focus-within + button {
+form:not(.empty) + button, form:focus-within + button {
 	display: none;
 }