diff --git a/app/assets/javascripts/discourse/app/components/d-navigation.hbs b/app/assets/javascripts/discourse/app/components/d-navigation.hbs
index 2b7badf2092..95098c83b71 100644
--- a/app/assets/javascripts/discourse/app/components/d-navigation.hbs
+++ b/app/assets/javascripts/discourse/app/components/d-navigation.hbs
@@ -1,17 +1,14 @@
 {{#if this.isQueryFilterMode}}
   <div class="topic-query-filter">
-    <Input
-      class="topic-query-filter__input"
-      @value={{this.queryString}}
-      @enter={{action @updateTopicsListQueryParams this.queryString}}
-    />
-
-    <DButton
-      @action={{action @updateTopicsListQueryParams this.queryString}}
-      @icon="filter"
-      @class="btn-primary topic-query-filter__button"
-      @label="filters.filter.button.label"
-    />
+    <div class="topic-query-filter__input">
+      {{d-icon "filter" class="topic-query-filter__icon"}}
+      <Input
+        class="topic-query-filter__filter-term"
+        @value={{this.queryString}}
+        @enter={{action @updateTopicsListQueryParams this.queryString}}
+        @type="text"
+      />
+    </div>
   </div>
 {{else}}
   <BreadCrumbs
diff --git a/app/assets/stylesheets/common/components/topic-query-filter.scss b/app/assets/stylesheets/common/components/topic-query-filter.scss
index cda0cc2b855..136fa85d830 100644
--- a/app/assets/stylesheets/common/components/topic-query-filter.scss
+++ b/app/assets/stylesheets/common/components/topic-query-filter.scss
@@ -3,8 +3,41 @@
   flex-direction: row;
   margin-right: auto;
   margin-bottom: var(--nav-space);
+  min-width: 50%;
 
-  .topic-query-filter__input {
+  &__label {
+    background-color: var(--primary-low);
+    display: flex;
+    align-items: center;
+    padding: 0.25em 0.65em;
+    border: 1px solid var(--primary-low-mid);
+    border-right: 0;
+  }
+
+  &__input {
+    position: relative;
+    flex: 1 1;
+  }
+
+  &__icon {
+    position: absolute;
+    left: 0.5em;
+    top: 0.65em;
+    color: var(--primary-low-mid);
+  }
+
+  input.topic-query-filter__filter-term {
     margin: 0 0.5em 0 0;
+    border-color: var(--primary-low-mid);
+    padding-left: 1.75em;
+    color: var(--primary);
+    width: 100%;
+
+    &:focus {
+      border-color: var(--tertiary);
+      outline: none;
+      outline-offset: 0;
+      box-shadow: inset 0px 0px 0px 1px var(--tertiary);
+    }
   }
 }
diff --git a/spec/system/page_objects/components/topic_query_filter.rb b/spec/system/page_objects/components/topic_query_filter.rb
index 75a9b3c5a7e..d99b4d4d52a 100644
--- a/spec/system/page_objects/components/topic_query_filter.rb
+++ b/spec/system/page_objects/components/topic_query_filter.rb
@@ -4,12 +4,7 @@ module PageObjects
   module Components
     class TopicQueryFilter < PageObjects::Components::Base
       def fill_in(text)
-        page.fill_in(class: "topic-query-filter__input", with: text)
-
-        page.click_button(
-          I18n.t("js.filters.filter.button.label"),
-          class: "topic-query-filter__button",
-        )
+        page.fill_in(class: "topic-query-filter__filter-term", with: "#{text}\n")
       end
     end
   end