diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx
index e673ff0..fe88b7e 100644
--- a/packages/docusaurus-playground/src/pages/index.mdx
+++ b/packages/docusaurus-playground/src/pages/index.mdx
@@ -11,6 +11,7 @@ import {
   Showcase,
   HeroInfo,
   Box,
+  ProfileCards,
 } from '../components/mdx'
 
 <Hero size="large">
@@ -81,13 +82,79 @@ import {
 
 <Box top={{ xs: 144, lg: 216 }}>
   <CallToActionSection
-    title="Contributors"
+    title="Team"
     columns={1}
-    description="The contributors building Codex draw on decades of collective software development experience with household names from within the traditional technology and blockchain sectors."
-    label="Read more"
+    description="Codex is powering the data storage layer of the Logos Network State. Logos is a grassroots movement to provide trust-minimized, corruption-resistant governing services and social institutions to peaceful people worldwide. Learn more about our ambitious vision."
+    label="Explore Logos"
     href="/about/team"
     target="_self"
   />
+  <ProfileCards
+    items={[
+      {
+        name: 'Jeremy',
+        githubUsername: 'jeremyjeremyjeremy',
+        githubLink: 'https://github.com/acid-info',
+        discordUsername: 'jeremyjeremyjeremy#0001',
+        discordLink: 'https://discord.gg/2NXGrsqmDq',
+      },
+      {
+        name: 'Dimitriy',
+        imgSrc:
+          'https://statusim.bamboohr.com/employees/photos/?h=297aeedfad6fed82ed60a93a9d850762',
+        githubUsername: 'dimitriy',
+        githubLink: 'https://github.com/acid-info',
+        discordUsername: 'dimitriy#0001',
+        discordLink: 'https://discord.gg/2NXGrsqmDq',
+      },
+      {
+        name: 'Slava',
+        imgSrc:
+          'https://statusim.bamboohr.com/employees/photos/?h=c9028ddcd6da2b7b0aaaf6fabbad7b31',
+        githubUsername: 'slava',
+        githubLink: 'https://discord.gg/2NXGrsqmDq',
+      },
+      {
+        name: 'Eric',
+        imgSrc:
+          'https://statusim.bamboohr.com/employees/photos/?h=a620c567ee3da938757bb0a43eda4ec9',
+        discordUsername: 'eric#0001',
+        discordLink: 'https://discord.gg/2NXGrsqmDq',
+      },
+      {
+        name: 'Tomas',
+        imgSrc:
+          'https://statusim.bamboohr.com/employees/photos/?h=8f6066f7e4b7517702c86d85f3ad828d',
+      },
+      {
+        name: 'Adam',
+        imgSrc:
+          'https://statusim.bamboohr.com/employees/photos/?h=5edf032c2d62576d36090cf09b5939e5',
+        githubUsername: 'adam',
+        githubLink: 'https://github.com/acid-info',
+        discordUsername: 'adam#0001',
+        discordLink: 'https://discord.gg/2NXGrsqmDq',
+      },
+      {
+        name: 'Ben',
+        imgSrc:
+          'https://statusim.bamboohr.com/employees/photos/?h=406fd339da77e69aeef5f357ece3ff3d',
+        githubUsername: 'ben',
+        githubLink: 'https://github.com/acid-info',
+        discordUsername: 'ben#0001',
+        discordLink: 'https://discord.gg/2NXGrsqmDq',
+      },
+      {
+        name: 'Leo',
+        imgSrc:
+          'https://statusim.bamboohr.com/employees/photos/?h=4d6fcc7c245ca327414ab4d282b509f2',
+        githubUsername: 'leo',
+        githubLink: 'https://github.com/acid-info',
+        discordUsername: 'leo#0001',
+        discordLink: 'https://discord.gg/2NXGrsqmDq',
+      },
+    ]}
+  />
 </Box>
 
 <Box top={{ xs: 144, lg: 216 }}>
diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx
index 10b0aeb..a869382 100644
--- a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx
@@ -30,6 +30,7 @@ import TwitterSvg from '../../static/icons/twitter.svg'
 import DiscordWhiteSvg from '../../static/icons/discord-white.svg'
 import TelegramWhiteSvg from '../../static/icons/telegram-white.svg'
 import XSvg from '../../static/icons/x.svg'
+import Avatar from '../../static/icons/avatar.svg'
 
 type TIconProps = {
   size?: 's' | 'm' | 'l'
@@ -220,3 +221,9 @@ export const IconX = (props: TIconProps): JSX.Element => (
     <XSvg />
   </Icon>
 )
+
+export const IconAvatar = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <Avatar />
+  </Icon>
+)
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.scss
new file mode 100644
index 0000000..108967c
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.scss
@@ -0,0 +1,125 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+:root {
+  --card-height: 188px;
+  --mobile-width: 253px;
+  --mobile-height: 176px;
+}
+
+.mdx-profile-cards {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1rem;
+  margin-block: 80px;
+}
+
+.mdx-profile-card__card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 1rem;
+  border: 1px solid rgb(var(--lsd-border-primary));
+  height: var(--card-height);
+}
+
+.mdx-profile-card__profile {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.mdx-profile-card__avatar {
+  width: 40px !important;
+  height: 40px !important;
+  border-radius: 50%;
+
+  svg {
+    width: 40px !important;
+    height: 40px !important;
+
+    rect {
+      fill: unset !important;
+    }
+  }
+}
+
+.mdx-profile-card__name {
+  @include lsd.typography('h4');
+}
+
+.mdx-profile-card__buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  width: 100%;
+}
+
+.mdx-profile-card__link {
+  text-decoration: none;
+  height: fit-content;
+  position: relative;
+  max-width: calc(50% - 4px);
+}
+
+.mdx-profile-card__button {
+  padding: 4px 12px 4px 10px !important;
+  height: 28px !important;
+  max-width: 100% !important;
+
+  > span {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.mdx-profile-card__link__label {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.mdx-profile-card__label {
+  text-align: center;
+}
+
+@include utils.responsive('lg', 'down') {
+  .mdx-profile-card {
+    grid-template-columns: 1fr;
+  }
+}
+
+@include utils.responsive('md', 'down') {
+  .mdx-profile-cards {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    gap: 1rem;
+    scroll-snap-type: x mandatory;
+    margin-block: 40px;
+  }
+
+  .mdx-profile-card__card {
+    flex: 0 0 var(--mobile-width);
+    width: var(--mobile-width);
+    height: var(--mobile-height);
+    scroll-snap-align: start !important;
+  }
+
+  .mdx-profile-card__profile {
+    gap: 16px;
+  }
+
+  .mdx-profile-card__name {
+    @include lsd.typography('h6');
+  }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.tsx
new file mode 100644
index 0000000..41c61d1
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/ProfileCards.tsx
@@ -0,0 +1,98 @@
+import { Button, Typography } from '@acid-info/lsd-react'
+import React from 'react'
+import './ProfileCards.scss'
+import { IconAvatar, IconDiscordWhite, IconGithub } from '../../Icon' // '@logos-theme/components/Icon' doesn't work
+import Link from '@docusaurus/Link'
+
+export type ProfileCardItem = {
+  imgSrc?: string
+  name?: string
+  githubUsername?: string
+  githubLink?: string
+  discordUsername?: string
+  discordLink?: string
+}
+
+export type ProfileCardsProps = React.HTMLProps<HTMLDivElement> & {
+  items?: ProfileCardItem[]
+}
+
+export const ProfileCards: React.FC<ProfileCardsProps> = ({
+  items = [],
+  ...props
+}) => {
+  return (
+    <div className="mdx-profile-cards hidden-scrollbar" {...props}>
+      {items.map((item, index) => {
+        return (
+          <div key={index} className="mdx-profile-card__card">
+            <div className="mdx-profile-card__profile">
+              {typeof item.imgSrc === 'undefined' ? (
+                <IconAvatar className="mdx-profile-card__avatar" />
+              ) : (
+                <img
+                  alt={typeof item.name === 'string' ? item.name : ''}
+                  className="mdx-profile-card__avatar"
+                  src={item.imgSrc}
+                />
+              )}
+              <Typography
+                className="mdx-profile-card__name"
+                variant="h4"
+                component="h4"
+              >
+                {item.name}
+              </Typography>
+            </div>
+
+            <div className="mdx-profile-card__buttons">
+              {item?.githubUsername && item?.githubLink && (
+                <Link
+                  href={item.githubLink}
+                  target="_blank"
+                  className={'mdx-profile-card__link'}
+                >
+                  <Button
+                    size={'small'}
+                    variant={'outlined'}
+                    className={'mdx-profile-card__button'}
+                  >
+                    <IconGithub />
+                    <Typography
+                      variant="body2"
+                      className="mdx-profile-card__link__label"
+                    >
+                      {item?.githubUsername}
+                    </Typography>
+                  </Button>
+                </Link>
+              )}
+
+              {item?.discordUsername && item?.discordLink && (
+                <Link
+                  href={item.discordLink}
+                  target="_blank"
+                  className={'mdx-profile-card__link'}
+                >
+                  <Button
+                    size={'small'}
+                    variant={'outlined'}
+                    className={'mdx-profile-card__button'}
+                  >
+                    <IconDiscordWhite />
+                    <Typography
+                      variant="body2"
+                      className="mdx-profile-card__link__label"
+                    >
+                      {item?.discordUsername}
+                    </Typography>
+                  </Button>
+                </Link>
+              )}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/index.ts
new file mode 100644
index 0000000..3127a93
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCards/index.ts
@@ -0,0 +1 @@
+export * from './ProfileCards'
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
index 5ac7fdf..0e5d815 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
@@ -16,3 +16,4 @@ export * from './ScrollToBottom'
 export * from './Showcase'
 export * from './Roadmap'
 export * from './HeroVideo'
+export * from './ProfileCards'
diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/avatar.svg b/packages/logos-docusaurus-theme/src/client/static/icons/avatar.svg
new file mode 100644
index 0000000..94307fb
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/static/icons/avatar.svg
@@ -0,0 +1,7 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M20.0002 19.9999C19.0835 19.9999 18.2988 19.6735 17.646 19.0208C16.9932 18.368 16.6668 17.5833 16.6668 16.6666C16.6668 15.7499 16.9932 14.9652 17.646 14.3124C18.2988 13.6596 19.0835 13.3333 20.0002 13.3333C20.9168 13.3333 21.7016 13.6596 22.3543 14.3124C23.0071 14.9652 23.3335 15.7499 23.3335 16.6666C23.3335 17.5833 23.0071 18.368 22.3543 19.0208C21.7016 19.6735 20.9168 19.9999 20.0002 19.9999ZM13.3335 26.6666V24.3333C13.3335 23.861 13.4552 23.4269 13.6985 23.0308C13.9418 22.6346 14.2646 22.3327 14.6668 22.1249C15.5279 21.6944 16.4029 21.3713 17.2918 21.1558C18.1807 20.9402 19.0835 20.8327 20.0002 20.8333C20.9168 20.8333 21.8196 20.941 22.7085 21.1566C23.5974 21.3721 24.4724 21.6949 25.3335 22.1249C25.7363 22.3333 26.0593 22.6355 26.3027 23.0316C26.546 23.4277 26.6674 23.8616 26.6668 24.3333V26.6666H13.3335ZM15.0002 24.9999H25.0002V24.3333C25.0002 24.1805 24.9618 24.0416 24.8852 23.9166C24.8085 23.7916 24.7079 23.6944 24.5835 23.6249C23.8335 23.2499 23.0766 22.9688 22.3127 22.7816C21.5488 22.5944 20.7779 22.5005 20.0002 22.4999C19.2224 22.4999 18.4516 22.5938 17.6877 22.7816C16.9238 22.9694 16.1668 23.2505 15.4168 23.6249C15.2918 23.6944 15.191 23.7916 15.1143 23.9166C15.0377 24.0416 14.9996 24.1805 15.0002 24.3333V24.9999ZM20.0002 18.3333C20.4585 18.3333 20.851 18.1699 21.1777 17.8433C21.5043 17.5166 21.6674 17.1244 21.6668 16.6666C21.6668 16.2083 21.5035 15.8158 21.1768 15.4891C20.8502 15.1624 20.4579 14.9994 20.0002 14.9999C19.5418 14.9999 19.1493 15.1633 18.8227 15.4899C18.496 15.8166 18.3329 16.2088 18.3335 16.6666C18.3335 17.1249 18.4968 17.5174 18.8235 17.8441C19.1502 18.1708 19.5424 18.3338 20.0002 18.3333Z"
+        fill="white" />
+    <rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="white" fill="none" />
+</svg>
+    
\ No newline at end of file