diff --git a/.discourse-compatibility b/.discourse-compatibility
index 506a645..29da5ca 100644
--- a/.discourse-compatibility
+++ b/.discourse-compatibility
@@ -1,3 +1,4 @@
+< 3.2.0.beta2-dev: 2951c995fe669d87f157e5a1072fe548a98ae30e
 3.1.999: eeeb391c88bc2226070bf479b8c58e1275e46cd2
 3.1.0.beta2: a950a7fec2dafc77a54420034d6615400dd3fb7a
 2.9.0.beta3: c3a26b198d64050dfc1553bb364a5e1769145101
diff --git a/javascripts/discourse/api-initializers/init-search-banner.js b/javascripts/discourse/api-initializers/init-search-banner.js
index acdfa00..94929b5 100644
--- a/javascripts/discourse/api-initializers/init-search-banner.js
+++ b/javascripts/discourse/api-initializers/init-search-banner.js
@@ -3,8 +3,16 @@ import { logSearchLinkClick } from "discourse/lib/search";
 import { iconNode } from "discourse-common/lib/icon-library";
 import { h } from "virtual-dom";
 import I18n from "I18n";
+import SearchBanner from "../components/search-banner";
+
+export default apiInitializer("1.14.0", (api) => {
+  api.renderInOutlet(
+    settings.plugin_outlet === "above-main-container"
+      ? "above-main-container"
+      : "below-site-header",
+    SearchBanner
+  );
 
-export default apiInitializer("0.8", (api) => {
   // Simplified version of header search theme component
   const searchMenuWidget = api.container.factoryFor("widget:search-menu");
   const corePanelContents = searchMenuWidget.class.prototype["panelContents"];
diff --git a/javascripts/discourse/templates/components/search-banner.hbs b/javascripts/discourse/components/search-banner.hbs
similarity index 100%
rename from javascripts/discourse/templates/components/search-banner.hbs
rename to javascripts/discourse/components/search-banner.hbs
diff --git a/javascripts/search-banner/templates/connectors/above-main-container/search-banner.hbs b/javascripts/search-banner/templates/connectors/above-main-container/search-banner.hbs
deleted file mode 100644
index 30f2f2b..0000000
--- a/javascripts/search-banner/templates/connectors/above-main-container/search-banner.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-{{#if (eq (theme-setting "plugin_outlet") "above-main-container")}}
-  <SearchBanner />
-{{/if}}
\ No newline at end of file
diff --git a/javascripts/search-banner/templates/connectors/below-site-header/search-banner.hbs b/javascripts/search-banner/templates/connectors/below-site-header/search-banner.hbs
deleted file mode 100644
index 54a7f27..0000000
--- a/javascripts/search-banner/templates/connectors/below-site-header/search-banner.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-{{#if (eq (theme-setting "plugin_outlet") "below-site-header")}}
-  <SearchBanner />
-{{/if}}
\ No newline at end of file
diff --git a/spec/system/viewing_search_banner_spec.rb b/spec/system/viewing_search_banner_spec.rb
new file mode 100644
index 0000000..416f877
--- /dev/null
+++ b/spec/system/viewing_search_banner_spec.rb
@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+RSpec.describe "Viewing the search banner", type: :system do
+  fab!(:theme) { upload_theme_component }
+
+  it "should display the search banner below the site header when `plugin_outlet` theme setting is set to `below-site-header`" do
+    theme.update_setting(:plugin_outlet, "below-site-header")
+    theme.save!
+
+    visit("/")
+
+    expect(page).to have_css(".custom-search-banner")
+    expect(page).to_not have_css("#main-outlet .custom-search-banner")
+  end
+
+  it "should display the search banner above the main container when `plugin_outlet` theme setting is set to `above-main-container`" do
+    theme.update_setting(:plugin_outlet, "above-main-container")
+    theme.save!
+
+    visit("/")
+
+    expect(page).to have_css("#main-outlet .custom-search-banner")
+  end
+end