diff --git a/appview/pages/templates/layouts/base.html b/appview/pages/templates/layouts/base.html
index ca4717a..80ebf17 100644
--- a/appview/pages/templates/layouts/base.html
+++ b/appview/pages/templates/layouts/base.html
@@ -11,17 +11,19 @@
             <link href="/static/tw.css" rel="stylesheet" type="text/css" />
             <title>{{ block "title" . }}tangled{{ end }}</title>
         </head>
-        <body class="container mx-auto px-10">
+        <body>
           <header>
             {{ block "topbar" . }}
             {{ template "layouts/topbar" . }}
             {{ end }}
           </header>
+          <div class="container mx-auto px-10">
             <main class="content">{{ block "content" . }}{{ end }}</main>
             <script src="/static/lucide.min.js"></script>
             <script>
               lucide.createIcons();
             </script>
+          </div>
         </body>
     </html>
 {{ end }}
diff --git a/appview/pages/templates/layouts/repobase.html b/appview/pages/templates/layouts/repobase.html
index 3cb5d1a..235951f 100644
--- a/appview/pages/templates/layouts/repobase.html
+++ b/appview/pages/templates/layouts/repobase.html
@@ -39,10 +39,10 @@
         </div>
       </nav>
       <section
-          class="bg-white p-6 min-h-[200px] border-l border-r border-b border-black relative z-20 w-full mx-auto"
-          >
+          class="bg-white p-6 min-h-[200px] border-l border-r border-b border-black relative z-20 w-full mx-auto">
           {{ block "repoContent" . }}{{ end }}
       </section>
+      {{ block "repoAfter" . }} {{ end }}
     </section>
 {{ end }}
 
diff --git a/appview/pages/templates/layouts/topbar.html b/appview/pages/templates/layouts/topbar.html
index 8466541..a478f3f 100644
--- a/appview/pages/templates/layouts/topbar.html
+++ b/appview/pages/templates/layouts/topbar.html
@@ -1,6 +1,6 @@
 {{ define "layouts/topbar" }}
     {{ with .LoggedInUser }}
-        <nav class="flex items-center justify-center space-x-4 text-sm mb-4 border-b border-l border-r border-black">
+        <nav class="flex items-center justify-center space-x-4 mb-4 py-2 border-b border-l border-r border-black">
             <a
                 href="/"
                 hx-boost="true"
diff --git a/appview/pages/templates/repo/commit.html b/appview/pages/templates/repo/commit.html
index 225a443..21d89dd 100644
--- a/appview/pages/templates/repo/commit.html
+++ b/appview/pages/templates/repo/commit.html
@@ -43,58 +43,89 @@
     <strong>jump to</strong>
     {{ range $diff }}
     <ul>
-      <li><a href="#{{ .Name.New }}">{{ .Name.New }}</a></li>
+      <li><a href="#file-{{ .Name.New }}">{{ .Name.New }}</a></li>
     </ul>
     {{ end }}
   </div>
 </section>
-<section>
+
+{{end}}
+
+{{ define "repoAfter" }}
+
+{{ $repo := .RepoInfo.FullName }}
+{{ $commit := .Diff.Commit }}
+{{ $stat := .Diff.Stat }}
+{{ $diff := .Diff.Diff }}
+
   {{ $this := $commit.This }}
   {{ $parent := $commit.Parent }}
+
   {{ range $diff }}
-    <div id="{{ .Name.New }}">
-      <div class="diff">
-      {{ if .IsNew }}
-      <span class="diff-type">A</span>
-      {{ end }}
-      {{ if .IsDelete }}
-      <span class="diff-type">D</span>
-      {{ end }}
-      {{ if not (or .IsNew .IsDelete) }}
-      <span class="diff-type">M</span>
-      {{ end }}
-    {{ if .Name.Old }}
-    <a href="/{{ $repo }}/blob/{{ $parent }}/{{ .Name.Old }}">{{ .Name.Old }}</a>
-    {{ if .Name.New }}
-      &#8594;
-      <a href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}">{{ .Name.New }}</a>
-    {{ end }}
-    {{ else }}
-    <a href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}">{{ .Name.New }}</a>
-    {{- end -}}
-    {{ if .IsBinary }}
-    <p>Not showing binary file.</p>
-    {{ else }}
-      <pre class="overflow-auto">
-      {{- range .TextFragments -}}
-      <p>{{- .Header -}}</p>
-      {{- range .Lines -}}
-        {{- if eq .Op.String "+" -}}
-        <span class="diff-add">{{ .String }}</span>
-        {{- end -}}
-        {{- if eq .Op.String "-" -}}
-        <span class="diff-del">{{ .String }}</span>
-        {{- end -}}
-        {{- if eq .Op.String " " -}}
-        <span class="diff-noop">{{ .String }}</span>
-        {{- end -}}
-      {{- end -}}
-      {{- end -}}
-    {{- end -}}
-      </pre>
-    </div>
+  <section class="mt-4 border border-black w-full mx-auto">
+    <div id="file-{{ .Name.New }}">
+      <div id="diff-file">
+        <details open>
+          <summary class="list-none cursor-pointer sticky top-0">
+            <div id="diff-file-header" class="border-b cursor-pointer bg-white border-black flex justify-between">
+              <div id="left-side-items" class="p-2">
+                {{ if .IsNew }}
+                <span class="diff-type">A</span>
+                {{ end }}
+                {{ if .IsDelete }}
+                <span class="diff-type">D</span>
+                {{ end }}
+                {{ if not (or .IsNew .IsDelete) }}
+                <span class="diff-type">M</span>
+                {{ end }}
+
+                {{ if .Name.Old }}
+                  <a href="/{{ $repo }}/blob/{{ $parent }}/{{ .Name.Old }}" class="no-underline hover:underline">{{ .Name.Old }}</a>
+                  {{ if .Name.New }}
+                    &#8594;
+                    <a href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}" class="no-underline hover:underline">{{ .Name.New }}</a>
+                  {{ end }}
+                {{ else }}
+                  <a href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}" class="no-underline hover:underline">{{ .Name.New }}</a>
+                {{- end -}}
+              </div>
+
+              <div id="right-side-items" class="p-2">
+                <a href="#file-{{ .Name.New }}" class="no-underline hover:underline">to top of file</a>
+              </div>
+
+            </div>
+          </summary>
+
+          {{ if .IsBinary }}
+            <p>Not showing binary file.</p>
+          {{ else }}
+            <pre class="overflow-auto">
+            {{- range .TextFragments -}}
+              <div class="bg-gray-100 text-gray-500">{{ .Header }}</div>
+              {{- range .Lines -}}
+                  {{- if eq .Op.String "+" -}}
+                  <div class="bg-green-100 text-green-700">{{ .String }}</div>
+                  {{- end -}}
+
+                  {{- if eq .Op.String "-" -}}
+                  <div class="bg-red-100 text-red-700">{{ .String }}</div>
+                  {{- end -}}
+
+                  {{- if eq .Op.String " " -}}
+                  <div class="text-gray-500">{{ .String }}</div>
+                  {{- end -}}
+
+              {{- end -}}
+            {{- end -}}
+            </pre>
+          {{- end -}}
+
+        </details>
+
+      </div>
     </div>
+  </section>
   {{ end }}
-</section>
 
 {{end}}
diff --git a/appview/pages/templates/repo/index.html b/appview/pages/templates/repo/index.html
index cab2fca..ac47a90 100644
--- a/appview/pages/templates/repo/index.html
+++ b/appview/pages/templates/repo/index.html
@@ -1,100 +1,99 @@
 {{ define "repoContent" }}
-    <main>
-        {{- if .IsEmpty }}
-            this repo is empty
-        {{ else }}
-            <div class="flex gap-4">
-                <div id="file-tree" class="w-1/2">
-                    {{ $containerstyle := "py-1" }}
-                    {{ $linkstyle := "no-underline hover:underline" }}
+<main>
+  {{- if .IsEmpty }}
+  this repo is empty
+  {{ else }}
+  <div class="flex gap-4">
+    <div id="file-tree" class="w-1/2">
+      {{ $containerstyle := "py-1" }}
+      {{ $linkstyle := "no-underline hover:underline" }}
 
-                    <div class="flex justify-end">
-                        <select
-                            onchange="window.location.href = '/{{ .RepoInfo.FullName }}/tree/' + this.value"
-                            class="p-1 border border-gray-500 bg-white"
-                        >
-                            <optgroup label="branches" class="uppercase bold text-sm">
-                                {{ range .Branches }}
-                                    <option
-                                        value="{{ .Reference.Name }}"
-                                        class="py-1"
-                                        {{if eq .Reference.Name $.Ref}}selected{{end}}
-                                    >
-                                        {{ .Reference.Name }}
-                                    </option>
-                                {{ end }}
-                            </optgroup>
-                            <optgroup label="tags" class="uppercase bold text-sm">
-                                {{ range .Tags }}
-                                    <option
-                                        value="{{ .Reference.Name }}"
-                                        class="py-1"
-                                        {{if eq .Reference.Name $.Ref}}selected{{end}}
-                                    >
-                                        {{ .Reference.Name }}
-                                    </option>
-                                {{ end }}
-                            </optgroup>
-                        </select>
-                    </div>
+      <div class="flex justify-end">
+        <select
+            onchange="window.location.href = '/{{ .RepoInfo.FullName }}/tree/' + this.value"
+            class="p-1 border border-gray-500 bg-white"
+            >
+            <optgroup label="branches" class="uppercase bold text-sm">
+              {{ range .Branches }}
+              <option
+                  value="{{ .Reference.Name }}"
+                  class="py-1"
+                  {{if eq .Reference.Name $.Ref}}selected{{end}}
+                  >
+                  {{ .Reference.Name }}
+              </option>
+              {{ end }}
+            </optgroup>
+          <optgroup label="tags" class="uppercase bold text-sm">
+            {{ range .Tags }}
+            <option
+                value="{{ .Reference.Name }}"
+                class="py-1"
+                {{if eq .Reference.Name $.Ref}}selected{{end}}
+                >
+                {{ .Reference.Name }}
+            </option>
+            {{ end }}
+          </optgroup>
+        </select>
+      </div>
 
-                    <section id="repo-content">
-                    {{ range .Files }}
-                        {{ if not .IsFile }}
-                            <div class="{{ $containerstyle }}">
-                                <a
-                                    href="/{{ $.RepoInfo.FullName }}/tree/{{ $.Ref }}/{{ .Name }}"
-                                    class="{{ $linkstyle }}"
-                                >
-                                    <div class="flex items-center gap-2">
-                                        <i
-                                            class="w-3 h-3 fill-current"
-                                            data-lucide="folder"
-                                        ></i
-                                        >{{ .Name }}/
-                                    </div>
-                                </a>
-                            </div>
-                        {{ end }}
-                    {{ end }}
+      {{ range .Files }}
+      {{ if not .IsFile }}
+      <div class="{{ $containerstyle }}">
+        <a
+            href="/{{ $.RepoInfo.FullName }}/tree/{{ $.Ref }}/{{ .Name }}"
+            class="{{ $linkstyle }}"
+            >
+            <div class="flex items-center gap-2">
+              <i
+                  class="w-3 h-3 fill-current"
+                  data-lucide="folder"
+                  ></i
+                >{{ .Name }}/
+            </div>
+        </a>
+      </div>
+      {{ end }}
+      {{ end }}
 
-                    {{ range .Files }}
-                        {{ if .IsFile }}
-                            <div class="{{ $containerstyle }}">
-                                <a
-                                    href="/{{ $.RepoInfo.FullName }}/blob/{{ $.Ref }}/{{ .Name }}"
-                                    class="{{ $linkstyle }}"
-                                >
-                                    <div class="flex items-center gap-2">
-                                        <i
-                                            class="w-3 h-3"
-                                            data-lucide="file"
-                                        ></i
-                                        >{{ .Name }}
-                                    </div>
-                                </a>
-                            </div>
-                        {{ end }}
-                    {{ end }}
-                </div>
-                <div id="commit-log" class="flex-1">
-                    {{ range .Commits }}
-                        <div
-                            class="relative
-       px-4
-       py-4
-       border-l
-       border-black
-       before:content-['']
-       before:absolute
-       before:w-1
-       before:h-1
-       before:bg-black
-       before:rounded-full
-       before:left-[-2.2px]
-       before:top-1/2
-       before:-translate-y-1/2
-       ">
+      {{ range .Files }}
+      {{ if .IsFile }}
+      <div class="{{ $containerstyle }}">
+        <a
+            href="/{{ $.RepoInfo.FullName }}/blob/{{ $.Ref }}/{{ .Name }}"
+            class="{{ $linkstyle }}"
+            >
+            <div class="flex items-center gap-2">
+              <i
+                  class="w-3 h-3"
+                  data-lucide="file"
+                  ></i
+                >{{ .Name }}
+            </div>
+        </a>
+      </div>
+      {{ end }}
+      {{ end }}
+    </div>
+    <div id="commit-log" class="flex-1">
+      {{ range .Commits }}
+      <div
+          class="relative
+                 px-4
+                 py-4
+                 border-l
+                 border-black
+                 before:content-['']
+                 before:absolute
+                 before:w-1
+                 before:h-1
+                 before:bg-black
+                 before:rounded-full
+                 before:left-[-2.2px]
+                 before:top-1/2
+                 before:-translate-y-1/2
+                 ">
 
         <div id="commit-message">
           {{ $messageParts := splitN .Message "\n\n" 2 }}
@@ -104,7 +103,7 @@
                 <a href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash.String }}" class="inline no-underline hover:underline">{{ index $messageParts 0 }}</a>
                 {{ if gt (len $messageParts) 1 }}
                 <button class="text-sm inline rounded-sm bg-gray-300 text-gray-700 px-1 w-fit hover:bg-gray-400"
-                      hx-on:click="this.parentElement.nextElementSibling.classList.toggle('hidden')">&hellip;</button>
+                        hx-on:click="this.parentElement.nextElementSibling.classList.toggle('hidden')">&hellip;</button>
                 {{ end }}
               </div>
               {{ if gt (len $messageParts) 1 }}
@@ -114,44 +113,45 @@
           </div>
         </div>
 
-                            <div class="text-xs text-gray-500">
-                                <span class="font-mono">
-                                    <a
-                                        href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash.String }}"
-                                        class="text-gray-500 no-underline hover:underline"
-                                        >{{ slice .Hash.String 0 8 }}</a
-                                    >
-                                </span>
-                                &nbsp;·&nbsp;
-                                <span>
-                                    <a
-                                        href="mailto:{{ .Author.Email }}"
-                                        class="text-gray-500 no-underline hover:underline"
-                                        >{{ .Author.Name }}</a
-                                    >
-                                </span>
-                                &nbsp;·&nbsp;
-                                <span>{{ timeFmt .Author.When }}</span>
-                            </div>
-                        </div>
-                    {{ end }}
-                </div>
-            </div>
-    </section>
-            {{- if .Readme }}
-                <article class="readme">
-                    {{- .Readme -}}
-                </article>
-            {{- end -}}
-        {{- end -}}
+        <div class="text-xs text-gray-500">
+          <span class="font-mono">
+            <a
+                href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash.String }}"
+                class="text-gray-500 no-underline hover:underline"
+                >{{ slice .Hash.String 0 8 }}</a
+              >
+          </span>
+              &nbsp;·&nbsp;
+              <span>
+                <a
+                    href="mailto:{{ .Author.Email }}"
+                    class="text-gray-500 no-underline hover:underline"
+                    >{{ .Author.Name }}</a
+                  >
+              </span>
+              &nbsp;·&nbsp;
+              <span>{{ timeFmt .Author.When }}</span>
+        </div>
+      </div>
+      {{ end }}
+    </div>
+  </div>
+  {{- end -}}
+
+</main>
+{{ end }}
 
+{{ define "repoAfter" }}
+{{- if .Readme }}
+<section class="mt-4 p-6 border border-black w-full mx-auto">
+  <article class="readme">
+    {{- .Readme -}}
+  </article>
+</section>
+{{- end -}}
 
-        <div class="clone-url">
-            <strong>clone</strong>
-            <pre>
-git clone https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }}
-    </pre
-            >
-        </div>
-    </main>
+<section class="mt-4 p-6 border border-black w-full mx-auto">
+  <strong>clone</strong>
+  <pre> git clone https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }} </pre>
+</section>
 {{ end }}