diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
index b6dacdf..b281eaf 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -313,4 +313,287 @@
   .resourceDescription {
     font-size: 0.95rem;
   }
-}
\ No newline at end of file
+}
+/* GitHub Issues Inspiration Styles */
+.contributionContainer {
+  background: var(--ifm-color-emphasis-100);
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 24px;
+  padding: 2.5rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.contributionHeader {
+  margin-bottom: 2rem;
+}
+
+.contributionTitle {
+  font-size: 1.75rem;
+  font-weight: 500;
+  color: var(--ifm-font-color-base);
+  margin-bottom: 1.5rem;
+}
+
+.contributionContainer {
+  background: white;
+  border: 1px solid rgba(1, 40, 170, 0.1);
+  border-radius: 16px;
+  padding: 2.5rem 2rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(1, 40, 170, 0.05);
+  cursor: pointer; /* Makes the whole card feel interactive */
+}
+
+.contributionContainer:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 8px 32px rgba(1, 40, 170, 0.15);
+  transform: translateY(-4px);
+}
+
+.contributionTitle {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--ifm-color-primary);
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+.issueListWrapper {
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 12px;
+  border: 1px solid rgba(0, 212, 170, 0.1); /* Matching the subtle teal/blue theme */
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+}
+
+.dropdownContainer {
+  position: relative;
+  display: flex;
+  justify-content: space-between; /* Space Filters and Create Issue apart */
+  align-items: center;
+  padding: 1rem 1.5rem;
+  background: rgba(1, 40, 170, 0.02);
+  border-bottom: 1px solid rgba(1, 40, 170, 0.05);
+}
+
+.filtersBtn {
+  background: transparent;
+  border: 1px solid var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  padding: 8px 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  transition: all 0.2s ease;
+  border-radius: 20px;
+}
+
+.createIssueBtn {
+  background: var(--ifm-color-primary);
+  color: white !important;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  padding: 6px 16px;
+  border-radius: 8px;
+  text-decoration: none !important;
+  transition: all 0.2s ease;
+}
+
+.createIssueBtn:hover {
+  background: var(--ifm-color-primary-dark);
+  color: white !important;
+  transform: translateY(-1px);
+  text-decoration: none !important;
+}
+
+.dropdownMenu {
+  position: absolute;
+  top: 100%;
+  left: 1.5rem; /* Align with the Filters button on the left */
+  margin-top: 8px;
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-primary);
+  border-radius: 12px;
+  min-width: 180px;
+  z-index: 100;
+  box-shadow: 0 8px 32px rgba(1, 40, 170, 0.2);
+  overflow: hidden;
+}
+
+.dropdownItem {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 10px 16px;
+  background: transparent;
+  border: none;
+  color: var(--ifm-font-color-base);
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.filtersBtn:hover, .dropdownItem:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.dropdownItemActive {
+  background: var(--ifm-color-primary);
+  color: white;
+  font-weight: 600;
+}
+
+.issueItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+  text-decoration: none !important;
+  color: inherit !important;
+  transition: background 0.15s ease;
+}
+
+.issueItem:last-child {
+  border-bottom: none;
+}
+
+.issueItem:hover {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.issueMain {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  overflow: hidden;
+}
+
+.issueDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.issueTitleInspiration {
+  font-size: 0.95rem;
+  color: var(--ifm-color-content-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.issueTag {
+  font-size: 0.55rem;
+  font-weight: 700;
+  font-family: var(--ifm-font-family-monospace);
+  margin-left: 0.5rem;
+  padding: 0px 6px;
+  border-radius: 999px;
+  border: 1px solid transparent; 
+  text-transform: lowercase;
+  white-space: nowrap;
+  line-height: normal;
+}
+
+.contributionFooter {
+  margin-top: 1rem;
+}
+
+.footerText {
+  font-size: 0.85rem;
+  color: var(--ifm-color-content-secondary);
+  line-height: 1.4;
+  opacity: 0.7;
+  padding-left: 0.5rem;
+}
+
+[data-theme='dark'] .contributionContainer {
+  background: var(--ifm-background-surface-color);
+  border-color: rgba(77, 102, 209, 0.2);
+}
+
+[data-theme='dark'] .contributionContainer:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 8px 32px rgba(77, 102, 209, 0.2);
+}
+
+[data-theme='dark'] .issueListWrapper {
+  background: rgba(0, 0, 0, 0.15);
+  border-color: rgba(77, 102, 209, 0.2);
+}
+
+[data-theme='dark'] .createIssueBtn {
+  color: white !important;
+}
+
+[data-theme='dark'] .createIssueBtn:hover {
+  background: var(--ifm-color-primary-darker);
+  transform: translateY(-2px);
+  color: white !important;
+  text-decoration: none !important;
+}
+
+[data-theme='light'] .filtersBtn {
+  border-color: var(--ifm-color-primary);
+}
+
+[data-theme='light'] .filtersBtn:hover {
+  background: rgba(1, 40, 170, 0.05);
+}
+
+[data-theme='light'] .dropdownMenu {
+  background: white;
+  border-color: rgba(1, 40, 170, 0.1);
+  box-shadow: 0 8px 32px rgba(1, 40, 170, 0.1);
+}
+
+[data-theme='light'] .dropdownItem:hover {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+[data-theme='dark'] .issueTitleInspiration {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+[data-theme='dark'] .issueTag {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+[data-theme='dark'] .issueItem:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+[data-theme='dark'] .contributionContainer {
+  background: rgba(255, 255, 255, 0.02);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+[data-theme='dark'] .issueListWrapper {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+[data-theme='dark'] .issueTitleInspiration {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+[data-theme='dark'] .issueTag {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+[data-theme='dark'] .filterBtnActive {
+  background: var(--ifm-color-primary);
+  color: white;
+}
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index a9d6fd6..22dd978 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -42,13 +43,181 @@ function HomepageHeader() {
   );
 }
 
+interface GitHubIssue {
+  id: number;
+  title: string;
+  html_url: string;
+  number: number;
+  user: {
+    login: string;
+  };
+  created_at: string;
+  labels: {
+    name: string;
+    color: string;
+  }[];
+  pull_request?: any;
+}
+
+function GitHubIssues() {
+  const [issues, setIssues] = useState<GitHubIssue[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [filter, setFilter] = useState('All');
+  const [isFilterOpen, setIsFilterOpen] = useState(false);
+
+  useEffect(() => {
+    async function fetchIssues() {
+      try {
+        const response = await fetch(
+          'https://api.github.com/repos/IntersectMBO/developer-experience/issues?state=open&per_page=50'
+        );
+        if (!response.ok) throw new Error('Failed to fetch issues');
+        const data = await response.json();
+        // Filter out Pull Requests, as GitHub's /issues endpoint returns both
+        const onlyIssues = (data as GitHubIssue[]).filter(item => !item.pull_request);
+        setIssues(onlyIssues);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred');
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchIssues();
+  }, []);
+
+  const availableLabels = useMemo(() => {
+    const labels = new Set(['All']);
+    issues.forEach(issue => {
+      issue.labels.forEach(label => labels.add(label.name));
+    });
+    return Array.from(labels).slice(0, 5); // Limit to top 5 labels for UI
+  }, [issues]);
+
+  const filteredIssues = useMemo(() => {
+    if (filter === 'All') return issues.slice(0, 5);
+    return issues.filter(issue =>
+      issue.labels.some(l => l.name === filter)
+    ).slice(0, 5);
+  }, [issues, filter]);
+
+  if (loading) {
+    return (
+      <div className={styles.loadingWrapper}>
+        <span className={styles.loader}></span>
+        <p>Loading contributions...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.errorWrapper}>
+        <p>Could not load issues. Check your connection.</p>
+        <Link className="button button--secondary" href="https://github.com/IntersectMBO/developer-experience/issues">
+          Go to GitHub
+        </Link>
+      </div>
+    );
+  }
+
+
+  return (
+    <div className={styles.contributionContainer}>
+      <Heading as="h3" className={styles.contributionTitle}>
+        Start contributing with GitHub issues
+      </Heading>
+
+      <div className={styles.issueListWrapper}>
+        <div className={styles.dropdownContainer}>
+          <button
+            className={styles.filtersBtn}
+            onClick={() => setIsFilterOpen(!isFilterOpen)}
+            aria-haspopup="true"
+            aria-expanded={isFilterOpen}
+          >
+            FILTERS
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              style={{ transform: isFilterOpen ? 'rotate(180deg)' : 'rotate(0)' }}
+            >
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </button>
+
+          <Link 
+            href="https://github.com/IntersectMBO/developer-experience/issues/new/choose"
+            className={styles.createIssueBtn}
+            target="_blank"
+          >
+            CREATE ISSUE
+          </Link>
+
+          {isFilterOpen && (
+            <div className={styles.dropdownMenu}>
+              {availableLabels.map(label => (
+                <button
+                  key={label}
+                  className={clsx(styles.dropdownItem, filter === label && styles.dropdownItemActive)}
+                  onClick={() => {
+                    setFilter(label);
+                    setIsFilterOpen(false);
+                  }}
+                >
+                  {label}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {filteredIssues.map((issue) => {
+          const mainLabel = issue.labels[0];
+          const labelColor = mainLabel ? `#${mainLabel.color}` : '#ccc';
+
+          return (
+            <Link key={issue.id} href={issue.html_url} className={styles.issueItem} target="_blank">
+              <div className={styles.issueMain}>
+                <div
+                  className={styles.issueDot}
+                  style={{ background: labelColor }}
+                />
+                <span className={styles.issueTitleInspiration}>{issue.title}</span>
+              </div>
+              <span
+                className={styles.issueTag}
+                style={{ color: labelColor }}
+              >
+                {mainLabel?.name || 'issue'}
+              </span>
+            </Link>
+          );
+        })}
+      </div>
+
+      <div className={styles.contributionFooter}>
+        <p className={styles.footerText}>
+          Pick up a good first issue and ship your first PR.
+        </p>
+      </div>
+    </div>
+  );
+}
+
 function CommunitySection() {
   return (
     <section className={styles.communitySection}>
       <div className="container">
         <div className={styles.communityContent}>
           <div className="row">
-            <div className="col col--6">
+            <div className="col col--12">
               <Heading as="h2" className={styles.sectionTitle}>
                 Have Any Questions or Need Help?
               </Heading>
@@ -57,44 +226,11 @@ function CommunitySection() {
                 Our developer advocates and community members will be happy to assist you with your
                 Cardano development journey.
               </p>
-              <div className={styles.communityStats}>
-                <div className={styles.statItem}>
-                  <div className={styles.statNumber}>GitHub</div>
-                  <div className={styles.statLabel}>Issues</div>
-                </div>
-                <div className={styles.statItem}>
-                  <div className={styles.statNumber}>Community</div>
-                  <div className={styles.statLabel}>Support</div>
-                </div>
-                <div className={styles.statItem}>
-                  <div className={styles.statNumber}>Open</div>
-                  <div className={styles.statLabel}>Source</div>
-                </div>
-              </div>
-              <div className={styles.communityActions}>
-                <Link
-                  className="button button--primary button--orange button--lg"
-                  href="https://members.intersectmbo.org/"
-                  target="_blank"
-                  rel="noopener noreferrer">
-                  Join Intersect
-                </Link>
-                <Link
-                  className="button button--secondary button--lg"
-                  href="https://github.com/IntersectMBO/developer-experience"
-                  target="_blank"
-                  rel="noopener noreferrer">
-                  Visit GitHub Repository
-                </Link>
-              </div>
             </div>
-            <div className="col col--6">
-              <div className={styles.communityImage}>
-                <div className={styles.imagePlaceholder}>
-                  <Heading as="h3">GitHub Issues</Heading>
-                  <p>Ask • Suggest • Question</p>
-                </div>
-              </div>
+          </div>
+          <div className="row" style={{ marginTop: '2rem' }}>
+            <div className="col col--12">
+              <GitHubIssues />
             </div>
           </div>
         </div>