diff --git a/appview/pages/templates/layouts/repobase.html b/appview/pages/templates/layouts/repobase.html
--- a/appview/pages/templates/layouts/repobase.html
+++ b/appview/pages/templates/layouts/repobase.html
@@ -1,29 +1,32 @@
 {{ define "title" }}{{ .RepoInfo.FullName }}{{ end }}
 
 {{ define "content" }}
-<section id="repo-header" class="mb-4 py-2 px-6 dark:text-white">
-  {{ if .RepoInfo.Source }}
-  <p class="text-sm">
-  <div class="flex items-center">
-      {{ i "git-fork" "w-3 h-3 mr-1"}}
-      forked from
-      {{ $sourceOwner := didOrHandle .RepoInfo.Source.Did .RepoInfo.SourceHandle  }}
-      <a class="ml-1 underline" href="/{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}">{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}</a>
-  </div>
-  </p>
-  {{ end }}
-  <div class="text-lg flex items-center justify-between">
-    <div>
-      <a href="/{{ .RepoInfo.OwnerWithAt }}">{{ .RepoInfo.OwnerWithAt }}</a>
-      <span class="select-none">/</span>
-      <a href="/{{ .RepoInfo.FullName }}" class="font-bold">{{ .RepoInfo.Name }}</a>
-    </div>
+    <section id="repo-header" class="mb-4 py-2 px-6 dark:text-white">
+      {{ if .RepoInfo.Source }}
+      <p class="text-sm">
+      <div class="flex items-center">
+          {{ i "git-fork" "w-3 h-3 mr-1"}}
+          forked from
+          {{ $sourceOwner := didOrHandle .RepoInfo.Source.Did .RepoInfo.SourceHandle  }}
+          <a class="ml-1 underline" href="/{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}">{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}</a>
+      </div>
+      </p>
+      {{ end }}
+      <div class="text-lg flex items-center justify-between">
+        <div>
+          <a href="/{{ .RepoInfo.OwnerWithAt }}">{{ .RepoInfo.OwnerWithAt }}</a>
+          <span class="select-none">/</span>
+          <a href="/{{ .RepoInfo.FullName }}" class="font-bold">{{ .RepoInfo.Name }}</a>
+        </div>
 
-    {{ template "repo/fragments/repoActions" .RepoInfo }}
-  </div>
-  {{ template "repo/fragments/repoDescription" . }}
-</section>
-    <section class="min-h-screen flex flex-col drop-shadow-sm">
+        {{ template "repo/fragments/repoActions" .RepoInfo }}
+      </div>
+      {{ template "repo/fragments/repoDescription" . }}
+    </section>
+
+    <section
+        class="min-h-screen w-full flex flex-col drop-shadow-sm"
+    >
         <nav class="w-full pl-4 overflow-auto">
             <div class="flex z-60">
                 {{ $activeTabStyles := "-mb-px bg-white dark:bg-gray-800" }}
@@ -61,7 +64,7 @@
             </div>
         </nav>
         <section
-            class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white"
+            class="bg-white dark:bg-gray-800 p-6 rounded relative w-full drop-shadow-sm dark:text-white"
         >
             {{ block "repoContent" . }}{{ end }}
         </section>
diff --git a/appview/pages/templates/repo/index.html b/appview/pages/templates/repo/index.html
--- a/appview/pages/templates/repo/index.html
+++ b/appview/pages/templates/repo/index.html
@@ -7,9 +7,23 @@
     {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo) }}
 {{ end }}
 
+{{ define "repoLanguages" }}
+    <div class="flex gap-[3px] -m-6 mb-6 overflow-hidden rounded-t">
+        {{ range $value := .Languages }}
+            <div
+                title="{{ $value.Name }} {{ printf "%.1f" $value.Percentage }}%"
+                class="h-2"
+                style="background-color: {{ $value.Color }}; width: {{ $value.Percentage }}%"
+            ></div>
+        {{ end }}
+    </div>
+{{ end }}
 
 {{ define "repoContent" }}
     <main>
+        {{ if .Languages }}
+            {{ block "repoLanguages" . }}{{ end }}
+        {{ end }}
         <div class="flex items-center justify-between pb-5">
           {{ block "branchSelector" . }}{{ end }}
           <div class="flex md:hidden items-center gap-4">