diff --git a/_includes/repository/repo_card.html b/_includes/repository/repo_card.html
new file mode 100644
index 0000000000000..18e9d798e1291
--- /dev/null
+++ b/_includes/repository/repo_card.html
@@ -0,0 +1,102 @@
+<div class="repo-card p-3 mb-3" data-repo="{{ include.repo }}">
+  <a href="https://github.com/{{ include.repo }}" class="repo-link">
+    <div class="repo-header d-flex align-items-start">
+      <div class="repo-icon mr-2">
+        <svg height="16" width="16" viewBox="0 0 16 16" fill="currentColor">
+          <path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path>
+        </svg>
+      </div>
+      <div class="repo-info flex-grow-1">
+        <h3 class="repo-name mb-1">{{ include.name }}</h3>
+        <p class="repo-description mb-2" data-description>Loading...</p>
+      </div>
+    </div>
+    <div class="repo-stats d-flex align-items-center mt-2">
+      <span class="repo-language mr-3" data-language style="display: none;">
+        <span class="language-color"></span>
+        <span data-language-name></span>
+      </span>
+      <span class="repo-stars mr-3">
+        <svg height="16" width="16" viewBox="0 0 16 16" fill="currentColor" class="mr-1">
+          <path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path>
+        </svg>
+        <span data-stars>-</span>
+      </span>
+      <span class="repo-forks">
+        <svg height="16" width="16" viewBox="0 0 16 16" fill="currentColor" class="mr-1">
+          <path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>
+        </svg>
+        <span data-forks>-</span>
+      </span>
+    </div>
+  </a>
+</div>
+
+<script>
+(function() {
+  // Language color constants (shared across all instances)
+  window.GITHUB_LANGUAGE_COLORS = window.GITHUB_LANGUAGE_COLORS || {
+    'Python': '#3572A5',
+    'JavaScript': '#f1e05a',
+    'TypeScript': '#2b7489',
+    'Java': '#b07219',
+    'C++': '#f34b7d',
+    'C': '#555555',
+    'Go': '#00ADD8',
+    'Rust': '#dea584',
+    'Ruby': '#701516',
+    'PHP': '#4F5D95',
+    'Shell': '#89e051'
+  };
+  
+  const repo = '{{ include.repo }}';
+  // Use previousElementSibling which is safe as we control the template structure
+  const card = document.currentScript.previousElementSibling;
+  
+  if (!card || card.dataset.repo !== repo) {
+    console.error('Could not find card for repo:', repo);
+    return;
+  }
+  
+  fetch(`https://api.github.com/repos/${repo}`)
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`GitHub API error: ${response.status} ${response.statusText}`);
+      }
+      return response.json();
+    })
+    .then(data => {
+      // Update description
+      const descEl = card.querySelector('[data-description]');
+      if (data.description) {
+        descEl.textContent = data.description;
+      } else {
+        descEl.textContent = 'No description available';
+      }
+      
+      // Update stars
+      const starsEl = card.querySelector('[data-stars]');
+      starsEl.textContent = data.stargazers_count || 0;
+      
+      // Update forks
+      const forksEl = card.querySelector('[data-forks]');
+      forksEl.textContent = data.forks_count || 0;
+      
+      // Update language
+      if (data.language) {
+        const langEl = card.querySelector('[data-language]');
+        const langNameEl = card.querySelector('[data-language-name]');
+        langEl.style.display = 'inline-flex';
+        langNameEl.textContent = data.language;
+        
+        const colorEl = card.querySelector('.language-color');
+        colorEl.style.backgroundColor = window.GITHUB_LANGUAGE_COLORS[data.language] || '#858585';
+      }
+    })
+    .catch(error => {
+      console.error('Error fetching repo data for', repo, ':', error);
+      const descEl = card.querySelector('[data-description]');
+      descEl.textContent = 'Error loading repository information';
+    });
+})();
+</script>
diff --git a/_pages/repositories.md b/_pages/repositories.md
index 297735afd2e0b..69abe3994c521 100644
--- a/_pages/repositories.md
+++ b/_pages/repositories.md
@@ -17,9 +17,13 @@ nav_order: 3
 ## GitHub Repositories
 
 {% if site.data.repositories.github_repos %}
-<div class="repositories d-flex flex-wrap flex-md-row flex-column justify-content-between align-items-center">
+<div class="repositories-grid">
   {% for repo in site.data.repositories.github_repos %}
-    {% include repository/repo.html repository=repo %}
+    {% assign repo_parts = repo | split: '/' %}
+    {% assign repo_owner = repo_parts[0] %}
+    {% assign repo_name = repo_parts[1] %}
+    {% include repository/repo_card.html repo=repo owner=repo_owner name=repo_name %}
   {% endfor %}
 </div>
 {% endif %}
+
diff --git a/_sass/_base.scss b/_sass/_base.scss
index a755d599c7bbc..56768f2d91a78 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -320,6 +320,87 @@ footer.sticky-bottom {
   }
 }
 
+// New repository cards
+.repositories-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.repo-card {
+  border: 1px solid var(--global-divider-color);
+  border-radius: 6px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  background-color: var(--global-card-bg-color);
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.repo-link {
+  text-decoration: none !important;
+  color: inherit;
+  display: block;
+  
+  &:hover {
+    text-decoration: none !important;
+  }
+}
+
+.repo-header {
+  .repo-icon {
+    color: var(--global-text-color);
+    opacity: 0.6;
+    margin-top: 2px;
+  }
+}
+
+.repo-name {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--global-theme-color);
+  margin: 0;
+}
+
+.repo-description {
+  font-size: 0.875rem;
+  color: var(--global-text-color);
+  opacity: 0.8;
+  margin: 0;
+  line-height: 1.4;
+}
+
+.repo-stats {
+  font-size: 0.75rem;
+  color: var(--global-text-color);
+  opacity: 0.7;
+  
+  svg {
+    vertical-align: text-bottom;
+  }
+}
+
+.repo-language {
+  display: inline-flex;
+  align-items: center;
+  
+  .language-color {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    margin-right: 4px;
+  }
+}
+
+.repo-stars, .repo-forks {
+  display: inline-flex;
+  align-items: center;
+}
+
 // Blog
 
 .header-bar {