diff --git a/appview/pages/templates/repo/fragments/colorBall.html b/appview/pages/templates/repo/fragments/colorBall.html
new file mode 100644
index 00000000..5df54506
--- /dev/null
+++ b/appview/pages/templates/repo/fragments/colorBall.html
@@ -0,0 +1,6 @@
+{{ define "repo/fragments/colorBall" }}
+  <div
+    class="size-2 rounded-full {{ .classes }}"
+    style="background: radial-gradient(circle at 35% 35%, color-mix(in srgb, {{ .color }} 70%, white), {{ .color }} 30%, color-mix(in srgb, {{ .color }} 85%, black));"
+  ></div>
+{{ end }}
diff --git a/appview/pages/templates/repo/fragments/languageBall.html b/appview/pages/templates/repo/fragments/languageBall.html
deleted file mode 100644
index 11cf7650..00000000
--- a/appview/pages/templates/repo/fragments/languageBall.html
+++ /dev/null
@@ -1,6 +0,0 @@
-{{ define "repo/fragments/languageBall" }}
-  <div
-    class="size-2 rounded-full"
-    style="background: radial-gradient(circle at 35% 35%, color-mix(in srgb, {{ langColor . }} 70%, white), {{ langColor . }} 30%, color-mix(in srgb, {{ langColor . }} 85%, black));"
-  ></div>
-{{ end }}
diff --git a/appview/pages/templates/repo/index.html b/appview/pages/templates/repo/index.html
index 67778829..f8148dba 100644
--- a/appview/pages/templates/repo/index.html
+++ b/appview/pages/templates/repo/index.html
@@ -49,7 +49,7 @@
         <div
           class="flex flex-grow items-center gap-2 text-xs align-items-center justify-center"
         >
-          {{ template "repo/fragments/languageBall" $value.Name }}
+          {{ template "repo/fragments/colorBall" (dict "color" (langColor $value.Name)) }}
           <div>{{ or $value.Name "Other" }}
             <span class="text-gray-500 dark:text-gray-400">
               {{ if lt $value.Percentage 0.05 }}
diff --git a/appview/pages/templates/user/fragments/repoCard.html b/appview/pages/templates/user/fragments/repoCard.html
index fa86460f..c3722b4e 100644
--- a/appview/pages/templates/user/fragments/repoCard.html
+++ b/appview/pages/templates/user/fragments/repoCard.html
@@ -50,7 +50,7 @@
   <div class="text-gray-400 text-sm font-mono inline-flex gap-4 mt-auto">
     {{ with .Language }}
       <div class="flex gap-2 items-center text-sm">
-        {{ template "repo/fragments/languageBall" . }}
+        {{ template "repo/fragments/colorBall" (dict "color" (langColor .)) }}
         <span>{{ . }}</span>
       </div>
     {{ end }}
diff --git a/appview/pages/templates/user/overview.html b/appview/pages/templates/user/overview.html
index ea1d3fae..a7ec4b87 100644
--- a/appview/pages/templates/user/overview.html
+++ b/appview/pages/templates/user/overview.html
@@ -73,7 +73,7 @@
             {{ with .Repo.RepoStats }}
               {{ with .Language }}
                 <div class="flex gap-2 items-center text-xs font-mono text-gray-400 ">
-                  {{ template "repo/fragments/languageBall" . }}
+                  {{ template "repo/fragments/colorBall" (dict "color" (langColor .)) }}
                   <span>{{ . }}</span>
                 </div>
               {{end }}