diff --git a/packages/component-library/src/Header/index.module.scss b/packages/component-library/src/Header/index.module.scss
index 4629e55a6b..1a4c41088e 100644
--- a/packages/component-library/src/Header/index.module.scss
+++ b/packages/component-library/src/Header/index.module.scss
@@ -219,4 +219,87 @@
       }
     }
   }
+
+  .communityLinkList {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: theme.spacing(4);
+
+    .title {
+      @include theme.text("lg", "medium");
+
+      color: theme.color("heading");
+    }
+
+    .communityGrid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: theme.spacing(3);
+      width: 100%;
+
+      @include theme.breakpoint("sm") {
+        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+        gap: theme.spacing(2);
+      }
+    }
+
+    .communityCard {
+      aspect-ratio: 1;
+      min-height: 160px;
+      padding: theme.spacing(6);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      transition:
+        transform 0.2s ease,
+        box-shadow 0.2s ease;
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgb(0 0 0 / 15%);
+      }
+
+      @include theme.breakpoint("sm") {
+        min-height: 140px;
+        padding: theme.spacing(4);
+      }
+    }
+
+    .communityCardContent {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: theme.spacing(3);
+      width: 100%;
+      height: 100%;
+      justify-content: center;
+    }
+
+    .communityIcon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: theme.spacing(12);
+      height: theme.spacing(12);
+      color: theme.color("states", "data", "normal");
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+
+      @include theme.breakpoint("sm") {
+        width: theme.spacing(10);
+        height: theme.spacing(10);
+      }
+    }
+
+    .communityTitle {
+      @include theme.text("sm", "medium");
+
+      margin: 0;
+      color: theme.color("heading");
+    }
+  }
 }
diff --git a/packages/component-library/src/Header/index.tsx b/packages/component-library/src/Header/index.tsx
index 7b3e1f2d5c..ed07ab9469 100644
--- a/packages/component-library/src/Header/index.tsx
+++ b/packages/component-library/src/Header/index.tsx
@@ -166,6 +166,22 @@ const LinkList = ({ title, links }: LinkListProps) => (
   </div>
 );
 
+const CommunityLinkList = ({ title, links }: LinkListProps) => (
+  <div className={styles.communityLinkList}>
+    <h3 className={styles.title}>{title}</h3>
+    <div className={styles.communityGrid}>
+      {links.map(({ title, icon, ...link }, i) => (
+        <Card key={i} {...link} className={styles.communityCard ?? ""}>
+          <div className={styles.communityCardContent}>
+            <div className={styles.communityIcon}>{icon}</div>
+            <h4 className={styles.communityTitle}>{title}</h4>
+          </div>
+        </Card>
+      ))}
+    </div>
+  </div>
+);
+
 export const SupportDrawer = {
   title: "Support",
   bodyClassName: styles.supportDrawer,
@@ -226,7 +242,7 @@ export const SupportDrawer = {
           },
         ]}
       />
-      <LinkList
+      <CommunityLinkList
         title="Community"
         links={socialLinks.map(({ icon, href, name }) => ({
           href,
diff --git a/packages/component-library/src/social-links.tsx b/packages/component-library/src/social-links.tsx
index 2722c3c5ba..bdef3b1f75 100644
--- a/packages/component-library/src/social-links.tsx
+++ b/packages/component-library/src/social-links.tsx
@@ -1,33 +1,45 @@
+import { Code } from "@phosphor-icons/react/dist/ssr/Code";
 import { DiscordLogo } from "@phosphor-icons/react/dist/ssr/DiscordLogo";
 import { GithubLogo } from "@phosphor-icons/react/dist/ssr/GithubLogo";
 import { TelegramLogo } from "@phosphor-icons/react/dist/ssr/TelegramLogo";
+import { UsersThree } from "@phosphor-icons/react/dist/ssr/UsersThree";
 import { XLogo } from "@phosphor-icons/react/dist/ssr/XLogo";
 import { YoutubeLogo } from "@phosphor-icons/react/dist/ssr/YoutubeLogo";
 
 export const socialLinks = [
   {
-    name: "Discord",
-    icon: <DiscordLogo />,
-    href: "https://discord.gg/invite/PythNetwork",
+    name: "GitHub",
+    icon: <GithubLogo />,
+    href: "https://github.com/pyth-network",
+  },
+  {
+    name: "Pyth Dev Forum",
+    icon: <Code />,
+    href: "https://dev-forum.pyth.network/",
   },
   {
     name: "X",
     icon: <XLogo />,
     href: "https://x.com/PythNetwork",
   },
+  {
+    name: "Discord",
+    icon: <DiscordLogo />,
+    href: "https://discord.gg/invite/PythNetwork",
+  },
   {
     name: "Telegram",
     icon: <TelegramLogo />,
     href: "https://t.me/Pyth_Network",
   },
-  {
-    name: "GitHub",
-    icon: <GithubLogo />,
-    href: "https://github.com/pyth-network",
-  },
   {
     name: "Youtube",
     icon: <YoutubeLogo />,
     href: "https://www.youtube.com/channel/UCjCkvPN9ohl0UDvldfn1neg",
   },
+  {
+    name: "Pyth DAO Forum",
+    icon: <UsersThree />,
+    href: "https://forum.pyth.network/",
+  },
 ];