diff --git a/layouts/partials/vendor.html b/layouts/partials/vendor.html
index 9210cc57..d2edcdff 100644
--- a/layouts/partials/vendor.html
+++ b/layouts/partials/vendor.html
@@ -117,3 +117,40 @@
     src="{{ $youtubeLiteLib.RelPermalink }}"
     integrity="{{ $youtubeLiteLib.Data.Integrity }}"></script>
 {{ end }}
+
+{{/* Repo cards */}}
+{{ $repoCards := slice "codeberg" "forgejo" "gitea" "github" "hugging-face" }}
+{{ $hasRepoCards := false }}
+{{ range $repoCards }}
+  {{ if $.Page.HasShortcode . }}
+    {{ $hasRepoCards = true }}
+  {{ end }}
+{{ end }}
+
+{{ if $hasRepoCards }}
+  {{ $repoColors := site.Data.repoColors }}
+  {{ $cssRules := slice }}
+
+  {{ $usedLanguages := $.Page.Store.Get "repoCardLanguages" }}
+  {{ if not $usedLanguages }}
+    {{ $usedLanguages = slice "default" }}
+  {{ else }}
+    {{ $usedLanguages = $usedLanguages | append "default" }}
+  {{ end }}
+
+  {{ range $usedLanguages }}
+    {{ if eq . "default" }}
+      {{ $cssRules = $cssRules | append ".language-dot[data-language=\"default\"] { background-color: #0077b6; }" }}
+    {{ else if eq . "model" }}
+      {{ $cssRules = $cssRules | append ".language-dot[data-language=\"model\"] { background-color: #ff6b35; }" }}
+    {{ else if index $repoColors . }}
+      {{ $color := index $repoColors . }}
+      {{ $cssRules = $cssRules | append (printf ".language-dot[data-language=\"%s\"] { background-color: %s; }" . $color) }}
+    {{ end }}
+  {{ end }}
+
+  {{ $repoCardCSS := resources.FromString "css/repo-cards.css" (delimit $cssRules "\n")
+    | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512")
+  }}
+  <link rel="stylesheet" href="{{ $repoCardCSS.RelPermalink }}" integrity="{{ $repoCardCSS.Data.Integrity }}">
+{{ end }}
diff --git a/layouts/shortcodes/codeberg.html b/layouts/shortcodes/codeberg.html
index 2c9d4d6b..86918aa2 100644
--- a/layouts/shortcodes/codeberg.html
+++ b/layouts/shortcodes/codeberg.html
@@ -1,6 +1,6 @@
 {{ $id := delimit (slice "codeberg" (partial "functions/uid.html" .)) "-" }}
 {{- $codebergURL := print "https://codeberg.org/api/v1/repos/" (.Get "repo") -}}
-{{- $codebergColors := .Site.Data.repoColors -}}
+{{- $repoColors := .Site.Data.repoColors -}}
 {{- $codebergData := dict -}}
 {{- with try (resources.GetRemote $codebergURL) -}}
   {{- with .Err -}}
@@ -33,13 +33,12 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
+          {{ $language := cond .language .language "default" }}
+          {{ $currentLangs := $.Page.Store.Get "repoCardLanguages" | default slice }}
+          {{ $.Page.Store.Set "repoCardLanguages" ($currentLangs | append $language) }}
           <span
-            class="mr-1 inline-block h-3 w-3 rounded-full"
-            style="background-color: {{ if .language }}
-              {{- index $codebergColors .language -}}
-            {{ else }}
-              #0077b6
-            {{ end }}"></span>
+            class="mr-1 inline-block h-3 w-3 rounded-full language-dot"
+            data-language="{{ $language }}"></span>
           <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
             {{ if .language }}{{ .language }}{{ else }}null{{ end }}
           </div>
diff --git a/layouts/shortcodes/forgejo.html b/layouts/shortcodes/forgejo.html
index 3449c0ed..5990acfd 100644
--- a/layouts/shortcodes/forgejo.html
+++ b/layouts/shortcodes/forgejo.html
@@ -1,6 +1,6 @@
 {{ $id := delimit (slice "forgejo" (partial "functions/uid.html" .)) "-" }}
 {{- $forgejoURL := print (.Get "server" | default .Site.Params.forgejoDefaultServer) "/api/v1/repos/" (.Get "repo") -}}
-{{- $forgejoColors := .Site.Data.repoColors -}}
+{{- $repoColors := .Site.Data.repoColors -}}
 {{- $forgejoData := dict -}}
 {{- with try (resources.GetRemote $forgejoURL) -}}
   {{- with .Err -}}
@@ -33,13 +33,12 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
+          {{ $language := cond .language .language "default" }}
+          {{ $currentLangs := $.Page.Store.Get "repoCardLanguages" | default slice }}
+          {{ $.Page.Store.Set "repoCardLanguages" ($currentLangs | append $language) }}
           <span
-            class="mr-1 inline-block h-3 w-3 rounded-full"
-            style="background-color: {{ if .language }}
-              {{- index $forgejoColors .language -}}
-            {{ else }}
-              #0077b6
-            {{ end }}"></span>
+            class="mr-1 inline-block h-3 w-3 rounded-full language-dot"
+            data-language="{{ $language }}"></span>
           <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
             {{ if .language }}{{ .language }}{{ else }}null{{ end }}
           </div>
diff --git a/layouts/shortcodes/gitea.html b/layouts/shortcodes/gitea.html
index 727a7eee..1aa61765 100644
--- a/layouts/shortcodes/gitea.html
+++ b/layouts/shortcodes/gitea.html
@@ -1,6 +1,6 @@
 {{ $id := delimit (slice "gitea" (partial "functions/uid.html" .)) "-" }}
 {{- $giteaURL := print (.Get "server" | default .Site.Params.giteaDefaultServer) "/api/v1/repos/" (.Get "repo") -}}
-{{- $giteaColors := .Site.Data.repoColors -}}
+{{- $repoColors := .Site.Data.repoColors -}}
 {{- $giteaData := dict -}}
 {{- with try (resources.GetRemote $giteaURL) -}}
   {{- with .Err -}}
@@ -33,13 +33,12 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
+          {{ $language := cond .language .language "default" }}
+          {{ $currentLangs := $.Page.Store.Get "repoCardLanguages" | default slice }}
+          {{ $.Page.Store.Set "repoCardLanguages" ($currentLangs | append $language) }}
           <span
-            class="mr-1 inline-block h-3 w-3 rounded-full"
-            style="background-color: {{ if .language }}
-              {{- index $giteaColors .language -}}
-            {{ else }}
-              #0077b6
-            {{ end }}"></span>
+            class="mr-1 inline-block h-3 w-3 rounded-full language-dot"
+            data-language="{{ $language }}"></span>
           <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
             {{ if .language }}{{ .language }}{{ else }}null{{ end }}
           </div>
diff --git a/layouts/shortcodes/github.html b/layouts/shortcodes/github.html
index e0f90ee9..cbf0b83a 100644
--- a/layouts/shortcodes/github.html
+++ b/layouts/shortcodes/github.html
@@ -2,7 +2,7 @@
 {{- $githubURL := print "https://api.github.com/repos/" (.Get "repo") -}}
 {{- $githubThumbnailURL := print "https://opengraph.githubassets.com/0/" (.Get "repo") -}}
 {{- $showThumbnail := .Get "showThumbnail" | default true -}}
-{{- $githubColors := .Site.Data.repoColors -}}
+{{- $repoColors := .Site.Data.repoColors -}}
 {{- $githubData := dict -}}
 {{- with try (resources.GetRemote $githubURL) -}}
   {{- with .Err -}}
@@ -46,13 +46,12 @@
           </p>
 
           <div class="m-0 mt-2 flex items-center">
+            {{ $language := cond .language .language "default" }}
+            {{ $currentLangs := $.Page.Store.Get "repoCardLanguages" | default slice }}
+            {{ $.Page.Store.Set "repoCardLanguages" ($currentLangs | append $language) }}
             <span
-              class="mr-1 inline-block h-3 w-3 rounded-full"
-              style="background-color: {{ if .language }}
-                {{- index $githubColors .language -}}
-              {{ else }}
-                #0077b6
-              {{ end }}"></span>
+              class="mr-1 inline-block h-3 w-3 rounded-full language-dot"
+              data-language="{{ $language }}"></span>
             <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
               {{ if .language }}{{ .language }}{{ else }}null{{ end }}
             </div>
diff --git a/layouts/shortcodes/huggingface.html b/layouts/shortcodes/huggingface.html
index 8001ead5..8aa55a95 100644
--- a/layouts/shortcodes/huggingface.html
+++ b/layouts/shortcodes/huggingface.html
@@ -53,13 +53,12 @@
 
 
           <div class="m-0 mt-2 flex items-center">
+            {{ $language := cond (eq $type "model") "model" "default" }}
+            {{ $currentLangs := $.Page.Store.Get "repoCardLanguages" | default slice }}
+            {{ $.Page.Store.Set "repoCardLanguages" ($currentLangs | append $language) }}
             <span
-              class="mr-1 inline-block h-3 w-3 rounded-full"
-              style="background-color: {{ if eq $type "model" }}
-                #ff6b35
-              {{ else }}
-                #0077b6
-              {{ end }}"></span>
+              class="mr-1 inline-block h-3 w-3 rounded-full language-dot"
+              data-language="{{ $language }}"></span>
             <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
               {{ if eq $type "model" }}
                 {{ if .pipeline_tag }}{{ .pipeline_tag }}{{ else }}model{{ end }}