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/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..8c78a7acc
--- /dev/null
+++ b/app/assets/stylesheets/layout/social.scss
@@ -0,0 +1,16 @@
+.social {
+
+  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..147937371
--- /dev/null
+++ b/app/components/layout/social_component.html.erb
@@ -0,0 +1,52 @@
+<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>
diff --git a/app/components/layout/social_component.rb b/app/components/layout/social_component.rb
new file mode 100644
index 000000000..101c1c165
--- /dev/null
+++ b/app/components/layout/social_component.rb
@@ -0,0 +1,3 @@
+class Layout::SocialComponent < ApplicationComponent
+  delegate :content_block, to: :helpers
+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>