diff --git a/src/components/Filter.svelte b/src/components/Filter.svelte
index 8e73d6c..914eff5 100644
--- a/src/components/Filter.svelte
+++ b/src/components/Filter.svelte
@@ -6,6 +6,11 @@
 
     let filter: string = '';
     let filterValid: boolean = false;
+    let focus: boolean = false;
+
+    function handleFocus() {
+        focus = true;
+    }
 
     function filterChangeHandler(): () => void {
         return debounce(() => {
@@ -26,6 +31,15 @@
         }, 1000);
     }
 
+    function resetQuery() {
+        focus = false;
+        filter = '';
+    }
+
+    function resetWidth() {
+        focus = false;
+    }
+
     function applyFilter() {
         console.log(`Going to parse ${filter}`);
         if (filter == '') {
@@ -49,11 +63,17 @@
 <section class="filter">
     <input
         class:input-error={filter && !filterValid}
+        class:input-focus={focus}
         bind:value={filter}
         placeholder="Filter destination port"
         on:input={filterChangeHandler()}
+        on:focus={handleFocus}
+        on:blur={resetWidth}
     />
     <Button disabled={!filterValid} onClick={applyFilter} text="Apply" />
+    {#if focus}
+        <Button onClick={resetQuery} text="Reset Query" />
+    {/if}
 </section>
 
 <style>
@@ -69,6 +89,10 @@
         border: 1px solid #ff0000;
     }
 
+    input.input-focus {
+        width: 75%;
+    }
+
     input.input-error:focus {
         outline: 1px solid #ff0000;
     }