diff --git a/appview/pages/templates/layouts/repobase.html b/appview/pages/templates/layouts/repobase.html
index d3347664..c5d31bf5 100644
--- a/appview/pages/templates/layouts/repobase.html
+++ b/appview/pages/templates/layouts/repobase.html
@@ -2,74 +2,20 @@
 
 {{ define "content" }}
     <section id="repo-header" class="mb-2 py-2 px-4 dark:text-white">
-      <div class="text-lg flex flex-col sm:flex-row items-start gap-4 justify-between">
-        <!-- left items -->
+      <div class="flex flex-col sm:flex-row items-start gap-4 justify-between mb-2">
         <div class="flex flex-col gap-2">
-          <!-- repo owner / repo name -->
-          <div class="flex items-center gap-2 flex-wrap">
-            {{ template "user/fragments/picHandleLink" .RepoInfo.OwnerDid }}
-            <span class="select-none">/</span>
-            <a href="/{{ .RepoInfo.FullName }}" class="font-bold">{{ .RepoInfo.Name }}</a>
-          </div>
-
-          {{ if .RepoInfo.Source }}
-            {{ $sourceOwner := resolve .RepoInfo.Source.Did }}
-            <div class="flex items-center gap-1 text-sm flex-wrap">
-              {{ i "git-fork" "w-3 h-3 shrink-0" }}
-              <span>forked from</span>
-              <a class="underline" href="/{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}">
-                {{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}
-              </a>
-            </div>
-          {{ end }}
-
-          <span class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-gray-600 dark:text-gray-300">
-            {{ if .RepoInfo.Description }}
-              {{ .RepoInfo.Description | description }}
-            {{ else }}
-              <span class="italic">this repo has no description</span>
-            {{ end }}
-
-            {{ with .RepoInfo.Website }}
-              <span class="flex items-center gap-1">
-                <span class="flex-shrink-0">{{ i "globe" "size-4" }}</span>
-                <a href="{{ . }}">{{ . | trimUriScheme }}</a>
-              </span>
-            {{ end }}
-
-            {{ if .RepoInfo.Topics }}
-              <div class="flex items-center gap-1 text-sm text-gray-600 dark:text-gray-300">
-                {{ range .RepoInfo.Topics }}
-                  <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-sm">{{ . }}</span>
-                {{ end }}
-              </div>
-            {{ end }}
-
-          </span>
+          {{ template "repoOwnerAndName" . }}
+          {{ template "repoForkInfo" . }}
         </div>
-
-        <div class="w-full sm:w-fit grid grid-cols-3 gap-2 z-auto">
-          {{ template "fragments/starBtn"
-            (dict "SubjectAt" .RepoInfo.RepoAt
-                  "IsStarred" .RepoInfo.IsStarred
-                  "StarCount" .RepoInfo.Stats.StarCount) }}
-          <a
-            class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group"
-            hx-boost="true"
-            href="/{{ .RepoInfo.FullName }}/fork"
-          >
-            {{ i "git-fork" "w-4 h-4" }}
-            fork
-            {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-          </a>
-          <a
-            class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group"
-            href="/{{ .RepoInfo.FullName }}/feed.atom">
-            {{ i "rss" "size-4" }}
-            <span class="md:hidden">atom</span>
-          </a>
+        <div class="hidden sm:block sm:flex-shrink-0">
+          {{ template "repoActions" . }}
         </div>
       </div>
+      {{ template "repoMetadata" . }}
+
+      <div class="block sm:hidden mt-4">
+        {{ template "repoActions" . }}
+      </div>
     </section>
 
     <section class="w-full flex flex-col" >
@@ -117,3 +63,73 @@
         {{ end }}
     </section>
 {{ end }}
+
+{{ define "repoOwnerAndName" }}
+  <div class="flex items-center gap-2 flex-wrap text-lg">
+    {{ template "user/fragments/picHandleLink" .RepoInfo.OwnerDid }}
+    <span class="select-none">/</span>
+    <a href="/{{ .RepoInfo.FullName }}" class="font-bold">{{ .RepoInfo.Name }}</a>
+  </div>
+{{ end }}
+
+{{ define "repoForkInfo" }}
+  {{ if .RepoInfo.Source }}
+    {{ $sourceOwner := resolve .RepoInfo.Source.Did }}
+    <div class="flex items-center gap-1 text-sm text-gray-600 dark:text-gray-300 mb-2 flex-wrap">
+      {{ i "git-fork" "w-3 h-3 shrink-0" }}
+      <span>forked from</span>
+      <a class="underline" href="/{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}">
+        {{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}
+      </a>
+    </div>
+  {{ end }}
+{{ end }}
+
+{{ define "repoMetadata" }}
+  <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-gray-600 dark:text-gray-300">
+    {{ if .RepoInfo.Description }}
+      {{ .RepoInfo.Description | description }}
+    {{ else }}
+      <span class="italic">this repo has no description</span>
+    {{ end }}
+
+    {{ with .RepoInfo.Website }}
+      <span class="flex items-center gap-1">
+        <span class="flex-shrink-0">{{ i "globe" "size-4" }}</span>
+        <a href="{{ . }}">{{ . | trimUriScheme }}</a>
+      </span>
+    {{ end }}
+
+    {{ if .RepoInfo.Topics }}
+      <div class="flex items-center gap-1">
+        {{ range .RepoInfo.Topics }}
+          <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-sm">{{ . }}</span>
+        {{ end }}
+      </div>
+    {{ end }}
+  </div>
+{{ end }}
+
+{{ define "repoActions" }}
+  <div class="w-full sm:w-fit grid grid-cols-3 gap-2 z-auto">
+    {{ template "fragments/starBtn"
+      (dict "SubjectAt" .RepoInfo.RepoAt
+            "IsStarred" .RepoInfo.IsStarred
+            "StarCount" .RepoInfo.Stats.StarCount) }}
+    <a
+      class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group"
+      hx-boost="true"
+      href="/{{ .RepoInfo.FullName }}/fork"
+    >
+      {{ i "git-fork" "w-4 h-4" }}
+      fork
+      {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+    </a>
+    <a
+      class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group"
+      href="/{{ .RepoInfo.FullName }}/feed.atom">
+      {{ i "rss" "size-4" }}
+      <span class="md:hidden">atom</span>
+    </a>
+  </div>
+{{ end }}