diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index e3b2837e3..788d8d975 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -514,26 +514,6 @@ body > header,
     border-bottom: 1px solid #fff;
   }
 
-  .remote-translations-button {
-
-    &.callout {
-      margin: 0;
-      padding: rem-calc(6);
-
-      [type="submit"] {
-        @include brand-color;
-        background: none;
-        border: 0;
-        cursor: pointer;
-        font-weight: bold;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-
   .external-links {
     padding: rem-calc(6) 0;
     text-align: center;
diff --git a/app/assets/stylesheets/layout/remote_translations_button.scss b/app/assets/stylesheets/layout/remote_translations_button.scss
new file mode 100644
index 000000000..f4a6db706
--- /dev/null
+++ b/app/assets/stylesheets/layout/remote_translations_button.scss
@@ -0,0 +1,19 @@
+.remote-translations-button {
+
+  &.callout {
+    margin: 0;
+    padding: rem-calc(6);
+
+    [type="submit"] {
+      @include brand-color;
+      background: none;
+      border: 0;
+      cursor: pointer;
+      font-weight: bold;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
diff --git a/app/views/shared/_remote_translations_button.html.erb b/app/components/layout/remote_translations_button_component.html.erb
similarity index 86%
rename from app/views/shared/_remote_translations_button.html.erb
rename to app/components/layout/remote_translations_button_component.html.erb
index 83f805fce..478f61459 100644
--- a/app/views/shared/_remote_translations_button.html.erb
+++ b/app/components/layout/remote_translations_button_component.html.erb
@@ -1,5 +1,5 @@
 <div class="remote-translations-button callout primary text-center">
-  <% if display_remote_translation_button?(remote_translations) %>
+  <% if display_remote_translation_button? %>
     <%= form_tag remote_translations_path do %>
       <%= hidden_field_tag :remote_translations, remote_translations.to_json %>
       <%= t("remote_translations.text") %>
diff --git a/app/components/layout/remote_translations_button_component.rb b/app/components/layout/remote_translations_button_component.rb
new file mode 100644
index 000000000..ebae39d23
--- /dev/null
+++ b/app/components/layout/remote_translations_button_component.rb
@@ -0,0 +1,20 @@
+class Layout::RemoteTranslationsButtonComponent < ApplicationComponent
+  attr_reader :remote_translations
+
+  def initialize(remote_translations)
+    @remote_translations = remote_translations
+  end
+
+  def render?
+    remote_translations.present? &&
+      RemoteTranslations::Microsoft::AvailableLocales.include_locale?(I18n.locale)
+  end
+
+  private
+
+    def display_remote_translation_button?
+      remote_translations.none? do |remote_translation|
+        RemoteTranslation.remote_translation_enqueued?(remote_translation)
+      end
+    end
+end
diff --git a/app/helpers/remote_translations_helper.rb b/app/helpers/remote_translations_helper.rb
deleted file mode 100644
index 90d8b7335..000000000
--- a/app/helpers/remote_translations_helper.rb
+++ /dev/null
@@ -1,11 +0,0 @@
-module RemoteTranslationsHelper
-  def display_remote_translation_info?(remote_translations, locale)
-    remote_translations.present? && RemoteTranslations::Microsoft::AvailableLocales.include_locale?(locale)
-  end
-
-  def display_remote_translation_button?(remote_translations)
-    remote_translations.none? do |remote_translation|
-      RemoteTranslation.remote_translation_enqueued?(remote_translation)
-    end
-  end
-end
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index f55bb1031..183b60fe5 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -1,7 +1,5 @@
 <header>
-  <% if display_remote_translation_info?(@remote_translations, I18n.locale) %>
-    <%= render "shared/remote_translations_button", remote_translations: @remote_translations %>
-  <% end %>
+  <%= render Layout::RemoteTranslationsButtonComponent.new(@remote_translations) %>
 
   <div class="top-links">
     <%= render Layout::LocaleSwitcherComponent.new %>
diff --git a/spec/components/layout/remote_translations_button_component_spec.rb b/spec/components/layout/remote_translations_button_component_spec.rb
new file mode 100644
index 000000000..f60544500
--- /dev/null
+++ b/spec/components/layout/remote_translations_button_component_spec.rb
@@ -0,0 +1,65 @@
+require "rails_helper"
+
+describe Layout::RemoteTranslationsButtonComponent do
+  let(:translations) { [{}] }
+  let(:component) { Layout::RemoteTranslationsButtonComponent.new(translations) }
+
+  before do
+    allow(RemoteTranslations::Microsoft::AvailableLocales).to receive(:available_locales)
+                                                          .and_return(%w[de en es fr pt zh-Hans])
+  end
+
+  context "locale with English as a fallback" do
+    before do
+      allow(I18n.fallbacks).to receive(:[]).and_return([:en])
+      Globalize.set_fallbacks_to_all_available_locales
+    end
+
+    it "displays the text in English" do
+      I18n.with_locale(:de) { render_inline component }
+
+      expect(page).to have_css ".remote-translations-button"
+      expect(page).to have_content "The content of this page is not available in your language"
+    end
+
+    it "displays the text in English with a locale needing parsing" do
+      I18n.with_locale(:"zh-CN") { render_inline component }
+
+      expect(page).to have_css ".remote-translations-button"
+      expect(page).to have_content "The content of this page is not available in your language"
+    end
+  end
+
+  context "locale with Spanish as a fallback" do
+    before do
+      allow(I18n.fallbacks).to receive(:[]).and_return([:es])
+      Globalize.set_fallbacks_to_all_available_locales
+    end
+
+    it "displays the text in Spanish" do
+      I18n.with_locale(:fr) { render_inline component }
+
+      expect(page).to have_css ".remote-translations-button"
+      expect(page).to have_content "El contenido de esta página no está disponible en tu idioma"
+    end
+
+    it "displays the text in Spanish with a locale needing parsing" do
+      I18n.with_locale(:"pt-BR") { render_inline component }
+
+      expect(page).to have_css ".remote-translations-button"
+      expect(page).to have_content "El contenido de esta página no está disponible en tu idioma"
+    end
+  end
+
+  it "is not rendered when the locale isn't included in microsoft translate client" do
+    I18n.with_locale(:nl) { render_inline component }
+
+    expect(page).not_to be_rendered
+  end
+
+  it "is not rendered when there aren't any remote translations" do
+    render_inline Layout::RemoteTranslationsButtonComponent.new([])
+
+    expect(page).not_to be_rendered
+  end
+end
diff --git a/spec/system/remote_translations_spec.rb b/spec/system/remote_translations_spec.rb
deleted file mode 100644
index 58759584c..000000000
--- a/spec/system/remote_translations_spec.rb
+++ /dev/null
@@ -1,62 +0,0 @@
-require "rails_helper"
-
-describe "Remote Translations" do
-  before do
-    Setting["feature.remote_translations"] = true
-    create(:proposal)
-    available_locales_response = %w[de en es fr pt zh-Hans]
-    expect(RemoteTranslations::Microsoft::AvailableLocales).to receive(:available_locales).at_most(2).times.
-                                                            and_return(available_locales_response)
-    allow(Rails.application.secrets).to receive(:microsoft_api_key).and_return("123")
-  end
-
-  describe "Display remote translation button when locale is included in microsoft translate client" do
-    context "with locale that has :en fallback" do
-      before do
-        allow(I18n.fallbacks).to receive(:[]).and_return([:en])
-        Globalize.set_fallbacks_to_all_available_locales
-      end
-
-      scenario "should display text in English" do
-        visit root_path(locale: :de)
-
-        expect(page).to have_css ".remote-translations-button"
-        expect(page).to have_content "The content of this page is not available in your language"
-      end
-
-      scenario "should display text in English after parse key" do
-        visit root_path(locale: :"zh-CN")
-
-        expect(page).to have_css ".remote-translations-button"
-        expect(page).to have_content "The content of this page is not available in your language"
-      end
-    end
-
-    context "with locale that has :es fallback" do
-      before do
-        allow(I18n.fallbacks).to receive(:[]).and_return([:es])
-        Globalize.set_fallbacks_to_all_available_locales
-      end
-
-      scenario "should display text in Spanish" do
-        visit root_path(locale: :fr)
-
-        expect(page).to have_css ".remote-translations-button"
-        expect(page).to have_content "El contenido de esta página no está disponible en tu idioma"
-      end
-
-      scenario "should display text in Spanish after parse key" do
-        visit root_path(locale: :"pt-BR")
-
-        expect(page).to have_css ".remote-translations-button"
-        expect(page).to have_content "El contenido de esta página no está disponible en tu idioma"
-      end
-    end
-  end
-
-  scenario "Not display remote translation button when locale is not included in microsoft translate client" do
-    visit root_path(locale: :nl)
-
-    expect(page).not_to have_css ".remote-translations-button"
-  end
-end