diff --git a/appview/pages/templates/repo/fragments/languageBall.html b/appview/pages/templates/repo/fragments/languageBall.html
new file mode 100644
index 00000000..11cf7650
--- /dev/null
+++ b/appview/pages/templates/repo/fragments/languageBall.html
@@ -0,0 +1,6 @@
+{{ 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 4e2de798..72c483d5 100644
--- a/appview/pages/templates/repo/index.html
+++ b/appview/pages/templates/repo/index.html
@@ -44,16 +44,12 @@
         ></div>
         {{ end }}
       </summary>
-      <div class="px-4 py-2 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600 flex items-center gap-4 flex-wrap">
+      <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-600 flex items-center gap-4 flex-wrap">
         {{ range $value := .Languages }}
         <div
           class="flex flex-grow items-center gap-2 text-xs align-items-center justify-center"
         >
-          <div
-            class="rounded-full h-2 w-2"
-            style="background: radial-gradient(circle at 35% 35%, color-mix(in srgb, {{ $value.Color }} 70%, white), {{ $value.Color }} 30%, color-mix(in srgb, {{ $value.Color }} 85%, black));"
-          >
-          </div>
+          {{ template "repo/fragments/languageBall" $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 04b8f5d3..f4683820 100644
--- a/appview/pages/templates/user/fragments/repoCard.html
+++ b/appview/pages/templates/user/fragments/repoCard.html
@@ -36,8 +36,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">
-        <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>
+        {{ template "repo/fragments/languageBall" . }}
         <span>{{ . }}</span>
       </div>
     {{ end }}
diff --git a/appview/pages/templates/user/overview.html b/appview/pages/templates/user/overview.html
index b55ab11a..31ce7c35 100644
--- a/appview/pages/templates/user/overview.html
+++ b/appview/pages/templates/user/overview.html
@@ -73,8 +73,7 @@
             {{ with .Repo.RepoStats }}
               {{ with .Language }}
                 <div class="flex gap-2 items-center text-xs font-mono text-gray-400 ">
-                  <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>
+                  {{ template "repo/fragments/languageBall" . }}
                   <span>{{ . }}</span>
                 </div>
               {{end }}