diff --git a/components/MDX.js b/components/MDX.js
index e8dde002b7ab..daa7ed720524 100644
--- a/components/MDX.js
+++ b/components/MDX.js
@@ -15,6 +15,7 @@ import Caption from '../components/Caption'
 import Row from '../components/layout/Row'
 import Column from '../components/layout/Column'
 import Figure from '../components/Figure'
+import Profile from '../components/Profile'
 import GeneratorInstallation from '../components/GeneratorInstallation'
 import NewsletterSubscribe from '../components/NewsletterSubscribe'
 import DocsButton from '../components/buttons/DocsButton';
@@ -88,7 +89,8 @@ function getMDXComponents() {
     TwitterMomentShare,
     TwitterDMButton,
     TwitterVideoEmbed,
-    TwitterOnAirButton
+    TwitterOnAirButton,
+    Profile
   }
 }
 
diff --git a/components/Profile.js b/components/Profile.js
new file mode 100644
index 000000000000..e5ae5afb2cb8
--- /dev/null
+++ b/components/Profile.js
@@ -0,0 +1,23 @@
+export default function Profile({profiles = [], className}) {
+  if(profiles.length === 0){
+    return null;
+  }
+    return (
+      <div className="p-4 grid grid-cols-2 sm:grid-cols-4 gap-5 border border-slate-100 mt-4 rounded drop-shadow-md">
+        {profiles.map((profile) => (
+          <a
+            href={profile.link}
+            key={profile.name}
+            target="_blank"
+            className="flex flex-col items-center"
+            rel="noreferrer"
+          >
+            <img src={profile.avatar} alt={profile.name} className="rounded" />
+            <span className="mt-2 text-sm underline decoration-secondary-300">
+              {profile.name}
+            </span>
+          </a>
+        ))}
+      </div>
+    );
+}