diff --git a/src/components/Atoms/SocialIcon.vue b/src/components/Atoms/SocialIcon.vue
new file mode 100644
index 0000000..945bc5e
--- /dev/null
+++ b/src/components/Atoms/SocialIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  label?: string
+  icon?: string
+  routeTo?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: 'i-clarity:tree-solid',
+  routeTo: '/',
+})
+const go = (route = '') => {
+  window.open(route, '_blank')
+}
+</script>
+
+<template>
+  <div class="cursor-pointer" @click="go(routeTo)">
+    <slot>
+      <div class="text-3xl m-auto" :class="icon" />
+    </slot>
+    <p class="pt-2">
+      {{ props.label }}
+    </p>
+  </div>
+</template>
diff --git a/src/components/Organisms/Sections/SocialSection.vue b/src/components/Organisms/Sections/SocialSection.vue
new file mode 100644
index 0000000..3af149f
--- /dev/null
+++ b/src/components/Organisms/Sections/SocialSection.vue
@@ -0,0 +1,8 @@
+<template>
+  <div class="h-[50vh] flex items-center justify-center space-x-20">
+    <SocialIcon label="Discord" icon="i-fa-brands-discord" route-to="https://discord.gg/2ZchhEPA7K" />
+    <SocialIcon label="Telegram" icon="i-fa-brands-telegram" route-to="https://t.co/w4MUungCn7" />
+    <SocialIcon label="Twitter" icon="i-fa-brands-twitter" route-to="https://twitter.com/agroforestDAO" />
+  </div>
+</template>
+<!-- -->