diff --git a/src/components/cards/CardsOverview.svelte b/src/components/cards/CardsOverview.svelte
index 801c8ea0..82290715 100644
--- a/src/components/cards/CardsOverview.svelte
+++ b/src/components/cards/CardsOverview.svelte
@@ -8,6 +8,7 @@
   import CardDetailModal from "./CardDetailModal.svelte";
   import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   import ThFilterStatus from "./ThFilterStatus.svelte";
+  import ThFilterRunner from "./ThFilterRunner.svelte";
   export let edit_modal_open = false;
   export let runner = {};
   export let editable = {};
@@ -100,7 +101,7 @@
             <tr>
               <th style="border-bottom: 1px solid #ddd;" />
               <ThFilter {handler} filterBy="code" />
-              <ThFilter {handler} filterBy="runner" />
+              <ThFilterRunner {handler} />
               <ThFilterStatus {handler} />
               <th style="border-bottom: 1px solid #ddd;" />
             </tr>
diff --git a/src/components/cards/ThFilterRunner.svelte b/src/components/cards/ThFilterRunner.svelte
new file mode 100644
index 00000000..52b8ddce
--- /dev/null
+++ b/src/components/cards/ThFilterRunner.svelte
@@ -0,0 +1,62 @@
+<script>
+  export let handler;
+  let filterValue = "";
+</script>
+
+<th>
+  <input
+    on:keyup={() => {
+      setTimeout(() => {
+        const v = filterValue.toLowerCase();
+        handler.filter(v, (c) => {
+          if (v === "") {
+            return c;
+          }
+          if (c.runner) {
+            if (v.startsWith("#")) {
+              const id = parseInt(v.replace("#", ""));
+              // console.log({ id, r: c.runner.id });
+              if (c.runner.id === id) {
+                console.log(c);
+                return c;
+              }
+            } else {
+              let runnerName = `${c.runner.firstname} ${c.runner.lastname}`;
+              if (c.runner.middlename) {
+                runnerName = `${c.runner.firstname} ${c.runner.middlename} ${c.runner.lastname}`;
+              }
+              runnerName = runnerName.toLowerCase();
+              if (runnerName.includes(v)) {
+                console.log({ filterValue, runnerName });
+                // console.log(c);
+                return c;
+              }
+            }
+          }
+          return "";
+        });
+      }, 150);
+    }}
+    bind:value={filterValue}
+    type="text"
+    name="filter__runner"
+    id="filter__runner"
+  />
+</th>
+
+<style>
+  th {
+    border-bottom: 1px solid #e0e0e0;
+  }
+  input {
+    margin: -1px 0 0 0;
+    padding: 0;
+    width: 100%;
+    height: 24px;
+    border: none;
+    text-align: center;
+    background: inherit;
+    outline: 0;
+    font-size: 14px;
+  }
+</style>