diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index a09eb6997..13004ceb1 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -33,6 +33,7 @@
 @import "tags";
 @import "admin/**/*";
 @import "budgets/**/*";
+@import "layout/**/*";
 @import "sdg/**/*";
 @import "sdg_management/*";
 @import "sdg_management/**/*";
diff --git a/app/assets/stylesheets/icons.scss b/app/assets/stylesheets/icons.scss
index aaf6ccb2f..5ffbf919d 100644
--- a/app/assets/stylesheets/icons.scss
+++ b/app/assets/stylesheets/icons.scss
@@ -143,10 +143,6 @@
   content: "\f02f";
 }
 
-.icon-blog::before {
-  content: "\f19a";
-}
-
 .icon-box::before {
   content: "\f187";
 }
@@ -276,7 +272,6 @@
   content: "\f0c9";
 }
 
-.icon-blog,
 .icon-facebook,
 .icon-instagram,
 .icon-telegram,
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 989393027..88ab4e31c 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1633,23 +1633,6 @@ table {
   }
 }
 
-.social {
-
-  li {
-    display: inline-block;
-  }
-
-  a {
-    font-size: rem-calc(24);
-    margin: 0 $line-height / 2;
-    text-decoration: none;
-
-    &:hover {
-      @include brand-text;
-    }
-  }
-}
-
 .share-supported {
   text-align: center;
 
diff --git a/app/assets/stylesheets/layout/social.scss b/app/assets/stylesheets/layout/social.scss
new file mode 100644
index 000000000..5590d633e
--- /dev/null
+++ b/app/assets/stylesheets/layout/social.scss
@@ -0,0 +1,26 @@
+.social {
+  @include grid-column;
+  text-align: right;
+
+  @include breakpoint(medium) {
+    width: 1 * 100% / 3;
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  li {
+    display: inline-block;
+  }
+
+  a {
+    font-size: rem-calc(24);
+    margin: 0 $line-height / 2;
+    text-decoration: none;
+
+    &:hover {
+      @include brand-text;
+    }
+  }
+}
diff --git a/app/components/layout/social_component.html.erb b/app/components/layout/social_component.html.erb
new file mode 100644
index 000000000..8476e0bcb
--- /dev/null
+++ b/app/components/layout/social_component.html.erb
@@ -0,0 +1,14 @@
+<div class="social">
+  <ul>
+    <% sites.each do |name, url| %>
+      <li>
+        <%= link_to "#{url}/#{setting["#{name}_handle"]}", target: "_blank", title: link_title(name) do %>
+          <span class="show-for-sr"><%= link_text(name) %></span>
+          <span class="icon-<%= name %>" aria-hidden="true"></span>
+        <% end %>
+      </li>
+    <% end %>
+
+    <%= raw footer_content_block %>
+  </ul>
+</div>
diff --git a/app/components/layout/social_component.rb b/app/components/layout/social_component.rb
new file mode 100644
index 000000000..779b47cc2
--- /dev/null
+++ b/app/components/layout/social_component.rb
@@ -0,0 +1,31 @@
+class Layout::SocialComponent < ApplicationComponent
+  delegate :content_block, to: :helpers
+
+  def render?
+    sites.any? || footer_content_block.present?
+  end
+
+  private
+
+    def sites
+      {
+        twitter: "https://twitter.com",
+        facebook: "https://www.facebook.com",
+        youtube: "https://www.youtube.com",
+        telegram: "https://www.telegram.me",
+        instragram: "https://www.instagram.com"
+      }.select { |name, _| setting["#{name}_handle"].present? }
+    end
+
+    def link_title(site_name)
+      t("shared.go_to_page") + link_text(site_name) + t("shared.target_blank")
+    end
+
+    def link_text(site_name)
+      t("social.#{site_name}", org: setting["org_name"])
+    end
+
+    def footer_content_block
+      content_block("footer")
+    end
+end
diff --git a/app/components/layout/top_links_component.html.erb b/app/components/layout/top_links_component.html.erb
new file mode 100644
index 000000000..0cc91b000
--- /dev/null
+++ b/app/components/layout/top_links_component.html.erb
@@ -0,0 +1,3 @@
+<ul class="no-bullet external-links">
+  <%= raw top_links_content_block %>
+</ul>
diff --git a/app/components/layout/top_links_component.rb b/app/components/layout/top_links_component.rb
new file mode 100644
index 000000000..7c5c17f88
--- /dev/null
+++ b/app/components/layout/top_links_component.rb
@@ -0,0 +1,13 @@
+class Layout::TopLinksComponent < ApplicationComponent
+  delegate :content_block, to: :helpers
+
+  def render?
+    top_links_content_block.present?
+  end
+
+  private
+
+    def top_links_content_block
+      content_block("top_links")
+    end
+end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 7f23d83b6..b14baa148 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -48,7 +48,7 @@ module ApplicationHelper
     SiteCustomization::Image.image_path_for(filename) || filename
   end
 
-  def content_block(name, locale)
+  def content_block(name, locale = I18n.locale)
     SiteCustomization::ContentBlock.block_for(name, locale)
   end
 
diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
index 8b2d41f59..8e642fbac 100644
--- a/app/views/layouts/_footer.html.erb
+++ b/app/views/layouts/_footer.html.erb
@@ -31,57 +31,6 @@
       </ul>
     </div>
 
-    <div class="small-12 medium-4 column social">
-      <div class="text-right">
-        <ul>
-          <% if setting["twitter_handle"] %>
-            <li>
-              <%= link_to "https://twitter.com/#{setting["twitter_handle"]}", target: "_blank",
-                           title: t("shared.go_to_page") + t("social.twitter", org: setting["org_name"]) + t("shared.target_blank") do %>
-                              <span class="show-for-sr"><%= t("social.twitter", org: setting["org_name"]) %></span>
-                              <span class="icon-twitter" aria-hidden="true"></span>
-              <% end %>
-            </li>
-          <% end %>
-          <% if setting["facebook_handle"] %>
-            <li>
-              <%= link_to "https://www.facebook.com/#{setting["facebook_handle"]}/", target: "_blank",
-                          title: t("shared.go_to_page") + t("social.facebook", org: setting["org_name"]) + t("shared.target_blank") do %>
-                          <span class="show-for-sr"><%= t("social.facebook", org: setting["org_name"]) %></span>
-                          <span class="icon-facebook" aria-hidden="true"></span>
-              <% end %>
-            </li>
-          <% end %>
-          <% if setting["youtube_handle"] %>
-            <li>
-              <%= link_to "https://www.youtube.com/#{setting["youtube_handle"]}", target: "_blank",
-                          title: t("shared.go_to_page") + t("social.youtube", org: setting["org_name"]) + t("shared.target_blank") do %>
-                          <span class="show-for-sr"><%= t("social.youtube", org: setting["org_name"]) %></span>
-                          <span class="icon-youtube" aria-hidden="true"></span>
-              <% end %>
-            </li>
-          <% end %>
-          <% if setting["telegram_handle"] %>
-            <li>
-              <%= link_to "https://www.telegram.me/#{setting["telegram_handle"]}", target: "_blank",
-                          title: t("shared.go_to_page") + t("social.telegram", org: setting["org_name"]) + t("shared.target_blank") do %>
-                          <span class="show-for-sr"><%= t("social.telegram", org: setting["org_name"]) %></span>
-                          <span class="icon-telegram" aria-hidden="true"></span>
-              <% end %>
-            </li>
-          <% end %>
-          <% if setting["instagram_handle"] %>
-            <li>
-              <%= link_to "https://www.instagram.com/#{setting["instagram_handle"]}", target: "_blank",
-                          title: t("shared.go_to_page") + t("social.instagram", org: setting["org_name"]) + t("shared.target_blank") do %>
-                          <span class="show-for-sr"><%= t("social.instagram", org: setting["org_name"]) %></span>
-                          <span class="icon-instagram" aria-hidden="true"></span>
-              <% end %>
-            </li>
-          <% end %>
-          <%= raw content_block("footer", I18n.locale) %>
-        </ul>
-      </div>
-    </div>
+    <%= render Layout::SocialComponent.new %>
   </div>
 </footer>
diff --git a/app/views/shared/_subnavigation.html.erb b/app/views/shared/_subnavigation.html.erb
index 463122a8c..b8aa0fc84 100644
--- a/app/views/shared/_subnavigation.html.erb
+++ b/app/views/shared/_subnavigation.html.erb
@@ -1,6 +1,6 @@
 <div class="small-12 medium-9 column">
   <ul>
-    <%= raw content_block("subnavigation_left", I18n.locale) %>
+    <%= raw content_block("subnavigation_left") %>
 
     <% if feature?(:debates) %>
       <li>
@@ -59,6 +59,6 @@
       </li>
     <% end %>
 
-    <%= raw content_block("subnavigation_right", I18n.locale) %>
+    <%= raw content_block("subnavigation_right") %>
   </ul>
 </div>
diff --git a/app/views/shared/_top_links.html.erb b/app/views/shared/_top_links.html.erb
index 7a5445ffc..b5d5cd7a3 100644
--- a/app/views/shared/_top_links.html.erb
+++ b/app/views/shared/_top_links.html.erb
@@ -1,3 +1 @@
-<ul class="no-bullet external-links">
-  <%= raw content_block("top_links", I18n.locale) %>
-</ul>
+<%= render Layout::TopLinksComponent.new %>
diff --git a/spec/components/layout/social_component_spec.rb b/spec/components/layout/social_component_spec.rb
new file mode 100644
index 000000000..29d29aa81
--- /dev/null
+++ b/spec/components/layout/social_component_spec.rb
@@ -0,0 +1,39 @@
+require "rails_helper"
+
+describe Layout::SocialComponent, type: :component do
+  describe "#render?" do
+    it "renders when a social setting is present" do
+      Setting["twitter_handle"] = "myhandle"
+
+      render_inline Layout::SocialComponent.new
+
+      expect(page).to have_css "ul"
+    end
+
+    it "renders when a content block is present" do
+      Setting["twitter_handle"] = ""
+      Setting["facebook_handle"] = ""
+      Setting["youtube_handle"] = ""
+      Setting["telegram_handle"] = ""
+      Setting["instagram_handle"] = ""
+
+      create(:site_customization_content_block, name: "footer")
+
+      render_inline Layout::SocialComponent.new
+
+      expect(page).to have_css "ul"
+    end
+
+    it "does not render with no settings present and no content block present" do
+      Setting["twitter_handle"] = ""
+      Setting["facebook_handle"] = ""
+      Setting["youtube_handle"] = ""
+      Setting["telegram_handle"] = ""
+      Setting["instagram_handle"] = ""
+
+      render_inline Layout::SocialComponent.new
+
+      expect(page).not_to have_css "ul"
+    end
+  end
+end
diff --git a/spec/components/layout/top_links_component_spec.rb b/spec/components/layout/top_links_component_spec.rb
new file mode 100644
index 000000000..734258129
--- /dev/null
+++ b/spec/components/layout/top_links_component_spec.rb
@@ -0,0 +1,19 @@
+require "rails_helper"
+
+describe Layout::TopLinksComponent, type: :component do
+  describe "#render?" do
+    it "renders when a content block is defined" do
+      create(:site_customization_content_block, name: "top_links")
+
+      render_inline Layout::TopLinksComponent.new
+
+      expect(page).to have_css "ul"
+    end
+
+    it "does not render when no content block is defined" do
+      render_inline Layout::TopLinksComponent.new
+
+      expect(page).not_to have_css "ul"
+    end
+  end
+end