diff --git a/webapp/src/components.tsx b/webapp/src/components.tsx
index c7bf7733..5020fa2e 100644
--- a/webapp/src/components.tsx
+++ b/webapp/src/components.tsx
@@ -120,6 +120,18 @@ export function FilterStrip(props: { filters: any; setFilters: any }) {
     return false;
   };
 
+  const toggleToFrom = (filter: string) => {
+    props.setFilters((filters: string[]) => {
+      const i = filters.indexOf(filter);
+      if (filters[i].startsWith("@to")) {
+        filters[i] = filters[i].replace("@to", "@from");
+      } else {
+        filters[i] = filters[i].replace("@from", "@to");
+      }
+      return [...filters];
+    });
+  };
+
   return (
     <>
       <div class="row">
@@ -165,6 +177,28 @@ export function FilterStrip(props: { filters: any; setFilters: any }) {
                           </a>
                         </li>
                       </Show>
+
+                      <Show when={filter.startsWith("@to")}>
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            onClick={() => toggleToFrom(filter)}
+                          >
+                            Change to @from
+                          </a>
+                        </li>
+                      </Show>
+
+                      <Show when={filter.startsWith("@from")}>
+                        <li>
+                          <a
+                            class="dropdown-item"
+                            onClick={() => toggleToFrom(filter)}
+                          >
+                            Change to @to
+                          </a>
+                        </li>
+                      </Show>
                     </ul>
 
                     <button