diff --git a/src/resource-group-affinity-group.jsx b/src/resource-group-affinity-group.jsx
new file mode 100644
index 0000000..9ee0f28
--- /dev/null
+++ b/src/resource-group-affinity-group.jsx
@@ -0,0 +1,26 @@
+import Section from "./section";
+
+export default function ResourceGroupAffinityGroup({
+  baseUri,
+  resourceGroupId,
+}) {
+  return (
+    <Section title="Affinity Group" icon="people-fill">
+      <>
+        <p>
+          Join the community! Members get update about announcements, events,
+          and outages.
+        </p>
+        <a href="#" class="btn">
+          Join
+        </a>
+        <a href="#" class="btn secondary">
+          Slack
+        </a>
+        <a href="#" class="btn secondary">
+          Q&A
+        </a>
+      </>
+    </Section>
+  );
+}
diff --git a/src/resource-group-detail.jsx b/src/resource-group-detail.jsx
index a9a206f..e03f7b3 100644
--- a/src/resource-group-detail.jsx
+++ b/src/resource-group-detail.jsx
@@ -1,3 +1,4 @@
+import ResourceGroupAffinityGroup from "./resource-group-affinity-group";
 import ResourceGroupDescription from "./resource-group-description";
 import ResourceGroupEvents from "./resource-group-events";
 import ResourceGroupQueueMetrics from "./resource-group-queue-metrics";
@@ -21,6 +22,10 @@ export default function ResourceGroupDetail({ baseUri, resourceGroupId }) {
         baseUri={baseUri}
         resourceGroupId={resourceGroupId}
       />
+      <ResourceGroupAffinityGroup
+        baseUri={baseUri}
+        resourceGroupId={resourceGroupId}
+      />
       <ResourceGroupSoftware
         baseUri={baseUri}
         resourceGroupId={resourceGroupId}