diff --git a/.discourse-compatibility b/.discourse-compatibility
index 938ccf7..5a33eee 100644
--- a/.discourse-compatibility
+++ b/.discourse-compatibility
@@ -1,2 +1,3 @@
-3.1.999: bd0594108a1cfd6c11cb8af218dba9b211b44015
+< 3.2.0.beta2-dev: 061adfe5ae20abbb82be711d373894c30987ec75
 < 3.2.0.beta1-dev: c344d0f519bbb3660e306c50c0d1aa1a776c5e13
+3.1.999: bd0594108a1cfd6c11cb8af218dba9b211b44015
diff --git a/javascripts/discourse/components/custom-header-links.hbs b/javascripts/discourse/components/custom-header-links.hbs
index 4038329..a8ed5ec 100644
--- a/javascripts/discourse/components/custom-header-links.hbs
+++ b/javascripts/discourse/components/custom-header-links.hbs
@@ -1,7 +1,7 @@
 {{#if this.shouldShow}}
   <ul
     class="custom-header-links
-      {{if @scrolledTopic 'custom-header-links--hide-links'}}"
+      {{if @outletArgs.attrs.topic 'custom-header-links--hide-links'}}"
   >
     {{#each this.links as |link|}}
       <li
diff --git a/javascripts/discourse/connectors/before-header-panel/custom-header-link-connector.hbs b/javascripts/discourse/connectors/before-header-panel/custom-header-link-connector.hbs
deleted file mode 100644
index e006e1b..0000000
--- a/javascripts/discourse/connectors/before-header-panel/custom-header-link-connector.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<CustomHeaderLinks @scrolledTopic={{@outletArgs.attrs.topic}} />
\ No newline at end of file
diff --git a/javascripts/discourse/initializers/discourse-custom-header-links.js b/javascripts/discourse/initializers/discourse-custom-header-links.js
new file mode 100644
index 0000000..98e7fe4
--- /dev/null
+++ b/javascripts/discourse/initializers/discourse-custom-header-links.js
@@ -0,0 +1,6 @@
+import { apiInitializer } from "discourse/lib/api";
+import CustomHeaderLinks from "../components/custom-header-links";
+
+export default apiInitializer("1.14.0", (api) => {
+  api.renderInOutlet("before-header-panel", CustomHeaderLinks);
+});
diff --git a/spec/system/page_objects/components/custom_header_link.rb b/spec/system/page_objects/components/custom_header_link.rb
new file mode 100644
index 0000000..b29363c
--- /dev/null
+++ b/spec/system/page_objects/components/custom_header_link.rb
@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Components
+    class CustomHeaderLink < PageObjects::Components::Base
+      CUSTOM_HEADER_LINKS_SELECTOR = ".before-header-panel-outlet .custom-header-links"
+
+      def visible?
+        has_css?(CUSTOM_HEADER_LINKS_SELECTOR)
+      end
+
+      def has_custom_header_link?(link_name, title:, href:)
+        expect(find(CUSTOM_HEADER_LINKS_SELECTOR)).to have_link(link_name, href:, title:)
+      end
+    end
+  end
+end
diff --git a/spec/system/viewing_custom_header_links_spec.rb b/spec/system/viewing_custom_header_links_spec.rb
new file mode 100644
index 0000000..0c8e694
--- /dev/null
+++ b/spec/system/viewing_custom_header_links_spec.rb
@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require_relative "page_objects/components/custom_header_link"
+
+RSpec.describe "Viewing Custom Header Links", system: true do
+  fab!(:theme) { upload_theme_component }
+  let!(:custom_header_link) { PageObjects::Components::CustomHeaderLink.new }
+
+  it "should display the custom header links" do
+    visit("/")
+
+    expect(custom_header_link).to be_visible
+
+    expect(custom_header_link).to have_custom_header_link(
+      "External link",
+      href: "https://meta.discourse.org",
+      title: "this link will open in a new tab",
+    )
+
+    expect(custom_header_link).to have_custom_header_link(
+      "Most Liked",
+      href: "/latest/?order=op_likes",
+      title: "Posts with the most amount of likes",
+    )
+
+    expect(custom_header_link).to have_custom_header_link(
+      "Privacy",
+      href: "/privacy",
+      title: "Our Privacy Policy",
+    )
+  end
+end