diff --git a/app/assets/javascripts/admin/addon/components/themes-list.hbs b/app/assets/javascripts/admin/addon/components/themes-list.hbs
index d5ca088457e..aac6dec9266 100644
--- a/app/assets/javascripts/admin/addon/components/themes-list.hbs
+++ b/app/assets/javascripts/admin/addon/components/themes-list.hbs
@@ -16,7 +16,7 @@
   />
 </div>
 
-{{#if this.showSearch}}
+{{#if this.showSearchAndFilter}}
   <div class="themes-list-search">
     <Input
       class="themes-list-search__input"
@@ -27,17 +27,17 @@
     />
     {{d-icon "search"}}
   </div>
-{{/if}}
-<div class="themes-list-filter">
-  <div class="themes-list-filter__label">
-    {{i18n "admin.customize.theme.filter_by"}}
+  <div class="themes-list-filter">
+    <div class="themes-list-filter__label">
+      {{i18n "admin.customize.theme.filter_by"}}
+    </div>
+    <ComboBox
+      @content={{this.selectableFilters}}
+      @value={{this.filter}}
+      class="themes-list-filter__input"
+    />
   </div>
-  <ComboBox
-    @content={{this.selectableFilters}}
-    @value={{this.filter}}
-    @class="themes-list-filter__input"
-  />
-</div>
+{{/if}}
 <div class="themes-list-container">
   {{#if this.hasThemes}}
     {{#if (and this.hasActiveThemes (not this.inactiveFilter))}}
diff --git a/app/assets/javascripts/admin/addon/components/themes-list.js b/app/assets/javascripts/admin/addon/components/themes-list.js
index 76ac06b45a8..0238a403063 100644
--- a/app/assets/javascripts/admin/addon/components/themes-list.js
+++ b/app/assets/javascripts/admin/addon/components/themes-list.js
@@ -68,7 +68,7 @@ export default class ThemesList extends Component {
 
   @gt("inactiveThemes.length", 0) hasInactiveThemes;
 
-  @gte("themesList.length", 10) showSearch;
+  @gte("themesList.length", 10) showSearchAndFilter;
 
   @equal("currentTab", THEMES) themesTabActive;
 
@@ -210,7 +210,7 @@ export default class ThemesList extends Component {
       this.set("selectInactiveMode", false);
       this.set("currentTab", newTab);
       this.set("filter", ALL_FILTER);
-      if (!this.showSearch) {
+      if (!this.showSearchAndFilter) {
         this.set("searchTerm", null);
       }
     }
diff --git a/app/assets/javascripts/discourse/tests/integration/components/themes-list-test.js b/app/assets/javascripts/discourse/tests/integration/components/themes-list-test.js
index 31442cf5a4a..f061e20350b 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/themes-list-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/themes-list-test.js
@@ -211,56 +211,57 @@ module("Integration | Component | themes-list", function (hooks) {
         },
       }),
     ];
+
+    // This is to make the filter show, it only shows if there are 10+ themes or components.
+    const otherThemes = createThemes(8, (n) => {
+      return {
+        name: `OtherTheme ${n}${n}`,
+        component: true,
+        parent_themes: [1],
+        enabled: true,
+      };
+    });
+
     this.setProperties({
-      themes,
+      themes: themes.concat(otherThemes),
       currentTab: THEMES,
     });
 
+    function themeNames() {
+      return [...queryAll(".themes-list-container__item .info .name")]
+        .map((node) => node.textContent.trim())
+        .filter((name) => !name.includes("OtherTheme"));
+    }
+
     await render(
       hbs`<ThemesList @themes={{this.themes}} @components={{(array)}} @currentTab={{this.currentTab}} />`
     );
 
     assert.ok(exists(".themes-list-filter__input"));
-    assert.deepEqual(
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
-        node.textContent.trim()
-      ),
-      [
-        "Theme enabled 1",
-        "Theme enabled 2",
-        "Theme disabled 1",
-        "Theme disabled 2",
-      ]
-    );
+    assert.deepEqual(themeNames(), [
+      "Theme enabled 1",
+      "Theme enabled 2",
+      "Theme disabled 1",
+      "Theme disabled 2",
+    ]);
 
     await selectKit(".themes-list-filter__input").expand();
     await selectKit(".themes-list-filter__input").selectRowByValue("active");
     assert.deepEqual(
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
-        node.textContent.trim()
-      ),
+      themeNames(),
+
       ["Theme enabled 1", "Theme enabled 2"]
     );
 
     await selectKit(".themes-list-filter__input").expand();
     await selectKit(".themes-list-filter__input").selectRowByValue("inactive");
-    assert.deepEqual(
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
-        node.textContent.trim()
-      ),
-      ["Theme disabled 1", "Theme disabled 2"]
-    );
+    assert.deepEqual(themeNames(), ["Theme disabled 1", "Theme disabled 2"]);
 
     await selectKit(".themes-list-filter__input").expand();
     await selectKit(".themes-list-filter__input").selectRowByValue(
       "updates_available"
     );
-    assert.deepEqual(
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
-        node.textContent.trim()
-      ),
-      ["Theme disabled 2"]
-    );
+    assert.deepEqual(themeNames(), ["Theme disabled 2"]);
   });
 
   test("components filter", async function (assert) {
@@ -300,8 +301,19 @@ module("Integration | Component | themes-list", function (hooks) {
         },
       }),
     ];
+
+    // This is to make the filter show, it only shows if there are 10+ themes or components.
+    const otherComponents = createThemes(8, (n) => {
+      return {
+        name: `OtherComponent ${n}${n}`,
+        component: true,
+        parent_themes: [1],
+        enabled: true,
+      };
+    });
+
     this.setProperties({
-      components,
+      components: components.concat(otherComponents),
       currentTab: COMPONENTS,
     });
 
@@ -309,65 +321,51 @@ module("Integration | Component | themes-list", function (hooks) {
       hbs`<ThemesList @themes={{(array)}} @components={{this.components}} @currentTab={{this.currentTab}} />`
     );
 
+    function componentNames() {
+      return [...queryAll(".themes-list-container__item .info .name")]
+        .map((node) => node.textContent.trim())
+        .filter((name) => !name.includes("OtherComponent"));
+    }
+
     assert.ok(exists(".themes-list-filter__input"));
-    assert.deepEqual(
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
-        node.textContent.trim()
-      ),
-      [
-        "Component used 1",
-        "Component used 2",
-        "Component unused 1",
-        "Component unused and disabled 1",
-      ]
-    );
+    assert.deepEqual(componentNames(), [
+      "Component used 1",
+      "Component used 2",
+      "Component unused 1",
+      "Component unused and disabled 1",
+    ]);
 
     await selectKit(".themes-list-filter__input").expand();
     await selectKit(".themes-list-filter__input").selectRowByValue("active");
-    assert.deepEqual(
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
-        node.textContent.trim()
-      ),
-      ["Component used 1", "Component used 2"]
-    );
+    assert.deepEqual(componentNames(), [
+      "Component used 1",
+      "Component used 2",
+    ]);
 
     await selectKit(".themes-list-filter__input").expand();
     await selectKit(".themes-list-filter__input").selectRowByValue("inactive");
-    assert.deepEqual(
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
-        node.textContent.trim()
-      ),
-      ["Component unused 1", "Component unused and disabled 1"]
-    );
+    assert.deepEqual(componentNames(), [
+      "Component unused 1",
+      "Component unused and disabled 1",
+    ]);
 
     await selectKit(".themes-list-filter__input").expand();
     await selectKit(".themes-list-filter__input").selectRowByValue("enabled");
-    assert.deepEqual(
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
-        node.textContent.trim()
-      ),
-      ["Component used 1", "Component used 2", "Component unused 1"]
-    );
+    assert.deepEqual(componentNames(), [
+      "Component used 1",
+      "Component used 2",
+      "Component unused 1",
+    ]);
 
     await selectKit(".themes-list-filter__input").expand();
     await selectKit(".themes-list-filter__input").selectRowByValue("disabled");
-    assert.deepEqual(
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
-        node.textContent.trim()
-      ),
-      ["Component unused and disabled 1"]
-    );
+    assert.deepEqual(componentNames(), ["Component unused and disabled 1"]);
 
     await selectKit(".themes-list-filter__input").expand();
     await selectKit(".themes-list-filter__input").selectRowByValue(
       "updates_available"
     );
-    assert.deepEqual(
-      [...queryAll(".themes-list-container__item .info .name")].map((node) =>
-        node.textContent.trim()
-      ),
-      ["Component unused and disabled 1"]
-    );
+    assert.deepEqual(componentNames(), ["Component unused and disabled 1"]);
   });
 
   test("switching between themes and components tabs keeps the search visible only if both tabs have at least 10 items", async function (assert) {