diff --git a/appview/pages/pages.go b/appview/pages/pages.go
index c732bdb8..8660037c 100644
--- a/appview/pages/pages.go
+++ b/appview/pages/pages.go
@@ -181,10 +181,12 @@ func (r RepoInfo) FullName() string {
 type RepoIndexParams struct {
 	LoggedInUser *auth.User
 	RepoInfo     RepoInfo
+	Active       string
 	types.RepoIndexResponse
 }
 
 func (p *Pages) RepoIndexPage(w io.Writer, params RepoIndexParams) error {
+	params.Active = "index"
 	return p.executeRepo("repo/index", w, params)
 }
 
diff --git a/appview/pages/templates/layouts/repobase.html b/appview/pages/templates/layouts/repobase.html
index b0b076b5..86dd59bc 100644
--- a/appview/pages/templates/layouts/repobase.html
+++ b/appview/pages/templates/layouts/repobase.html
@@ -1,31 +1,103 @@
-{{define "title"}} {{ .RepoInfo.FullName }} {{ end}}
+{{ define "title" }}{{ .RepoInfo.FullName }}{{ end }}
 
 {{ define "content" }}
 
-  <div id="repo-header">
-    <h1>{{ .RepoInfo.FullName }}</h1>
-    {{ if .RepoInfo.Description }}
-      <h3 class="desc">{{ .RepoInfo.Description }}</h3>
-    {{ else }}
-      <em>this repo has no description</em>
-    {{ end }}
-  </div>
+    <section id="repo-header">
+        <h1>{{ .RepoInfo.FullName }}</h1>
+        {{ if .RepoInfo.Description }}
+            <h3 class="desc">{{ .RepoInfo.Description }}</h3>
+        {{ else }}
+            <em>this repo has no description</em>
+        {{ end }}
+    </section>
+    <section id="repo-links" class="min-h-screen flex flex-col">
+        <nav class="w-full max-w-3xl mx-auto">
+            <div class="relative">
+                <div class="flex relative">
+                    <a
+                        href="/{{ .RepoInfo.FullName }}"
+                        class="relative -mr-px group no-underline"
+                        hx-boost="true"
+                    >
+                        <div
+                            class="px-4 py-2 bg-white text-black min-w-[80px] text-center text-sm relative z-60 group-hover:bg-gray-50
+                            {{ if eq .Active "index" }}
+                                border-b-white border-b-0 border-gray-300
+                                border-l border-r border-t
+                            {{ else }}
+                                border-gray-300 border translate-y-[2px]
+                            {{ end }}"
+                        >
+                            overview
+                        </div>
+                    </a>
 
-  <div id="repo-links">
-    <nav>
-      <a href="/{{ .RepoInfo.FullName }}">summary</a>&nbsp;·
-      <a href="/{{ .RepoInfo.FullName }}/branches">branches</a>&nbsp;·
-      <a href="/{{ .RepoInfo.FullName }}/tags">tags</a>
-      {{ if .RepoInfo.SettingsAllowed }}
-        ·&nbsp;<a href="/{{ .RepoInfo.FullName }}/settings">settings</a>
-      {{ end }}
-    </nav>
-  <div>
+                    <a
+                        href="/{{ .RepoInfo.FullName }}/issues"
+                        class="relative -mr-px group no-underline"
+                        hx-boost="true"
+                    >
+                        <div
+                            class="px-4 py-2 bg-white text-black min-w-[80px] text-center text-sm  relative z-50 group-hover:bg-gray-50
+                            {{ if eq .Active "issues" }}
+                                border-gray-500 border border-b-0 bg-white
+                            {{ else }}
+                                border-gray-300 border translate-y-[2px]
+                            {{ end }}
+                            "
+                        >
+                            issues
+                        </div>
+                    </a>
 
-  {{ block "repoContent" . }} {{ end }}
+                    <a
+                        href="#"
+                        class="relative -mr-px group no-underline"
+                        hx-boost="true"
+                    >
+                        <div
+                            class="px-4 py-2 bg-white text-black min-w-[80px] text-center text-sm relative z-40 group-hover:bg-gray-50
+                            {{ if eq .Active "pulls" }}
+                                border-gray-500 border border-b-0 bg-white
+                            {{ else }}
+                                border-gray-300 border translate-y-[2px]
+                            {{ end }}
+                            "
+                        >
+                            pull requests
+                        </div>
+                    </a>
 
+                    {{ if .RepoInfo.SettingsAllowed }}
+                        <a
+                            href="/{{ .RepoInfo.FullName }}/settings"
+                            class="relative -mr-px group no-underline"
+                            hx-boost="true"
+                        >
+                            <div
+                                class="px-6 py-2 bg-white text-black min-w-[80px] text-center text-sm relative z-40 group-hover:bg-gray-50
+                                {{ if .Active }}
+                                    border-gray-500 border border-b-0 bg-white
+                                {{ else }}
+                                    border-gray-300 border translate-y-[2px]
+                                {{ end }}
+                                "
+                            >
+                                settings
+                            </div>
+                        </a>
+                    {{ end }}
+                </div>
+            </div>
+        </nav>
+        <section
+            class="bg-white p-6 min-h-[200px] border border-gray-300 relative z-20 w-full max-w-3xl mx-auto"
+        >
+            {{ block "repoContent" . }}{{ end }}
+        </section>
+    </section>
 {{ end }}
 
 {{ define "layouts/repobase" }}
-  {{ template "layouts/base" . }}
+    {{ template "layouts/base" . }}
 {{ end }}
diff --git a/appview/pages/templates/layouts/topbar.html b/appview/pages/templates/layouts/topbar.html
index c38006bc..6c331786 100644
--- a/appview/pages/templates/layouts/topbar.html
+++ b/appview/pages/templates/layouts/topbar.html
@@ -1,42 +1,42 @@
 {{ define "layouts/topbar" }}
     {{ with .LoggedInUser }}
-        <nav class="flex items-center space-x-4 py-10">
+        <nav class="flex items-center justify-center space-x-4 py-10">
             <a
                 href="/"
                 hx-boost="true"
-                class="text-gray-600 hover:text-gray-900"
+                class="text-gray-600 hover:text-gray-900 no-underline"
                 >timeline</a
             >
             <a
                 href="/settings"
                 hx-boost="true"
-                class="text-gray-600 hover:text-gray-900"
+                class="text-gray-600 hover:text-gray-900 no-underline"
                 >settings</a
             >
             <a
                 href="/knots"
                 hx-boost="true"
-                class="text-gray-600 hover:text-gray-900"
+                class="text-gray-600 hover:text-gray-900 no-underline"
                 >knots</a
             >
             <a
                 href="/repo/new"
                 hx-boost="true"
-                class="text-gray-600 hover:text-gray-900"
+                class="text-gray-600 hover:text-gray-900 no-underline"
                 >add repos</a
             >
             {{ if .Handle }}
                 <a
                     href="/@{{ .Handle }}"
                     hx-boost="true"
-                    class="text-gray-600 hover:text-gray-900"
+                    class="text-gray-600 hover:text-gray-900 no-underline"
                     >my profile</a
                 >
             {{ else }}
                 <a
                     href="/{{ .Did }}"
                     hx-boost="true"
-                    class="text-gray-600 hover:text-gray-900"
+                    class="text-gray-600 hover:text-gray-900 no-underline"
                     >my profile</a
                 >
             {{ end }}
diff --git a/appview/pages/templates/user/profile.html b/appview/pages/templates/user/profile.html
index 9726ab58..322f61f8 100644
--- a/appview/pages/templates/user/profile.html
+++ b/appview/pages/templates/user/profile.html
@@ -1,32 +1,27 @@
 {{ define "title" }}{{ or .UserHandle .UserDid }}{{ end }}
 
 {{ define "content" }}
-    <h1>
-        <h1>{{ didOrHandle .UserDid .UserHandle }}</h1>
-    </h1>
-    <section>
-        <h2 class="text-xl font-semibold mb-4">repos</h2>
-        <ul id="my-knots" class="space-y-4">
-            {{ range .Repos }}
-                <li class="p-4 bg-gray-50 rounded-lg">
-                    <div class="font-mono">
-                        <div class="mb-2">
-                            name:
-                            <a
-                                href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}"
-                                class="text-blue-600 hover:text-blue-800"
-                                >{{ .Name }}</a
-                            >
-                        </div>
-                        <div>
-                            knot:
-                            {{ .Knot }}
-                        </div>
-                    </div>
-                </li>
-            {{ else }}
-                <p class="text-gray-600">does not have any repos yet</p>
-            {{ end }}
-        </ul>
-    </section>
+    <h1>{{ didOrHandle .UserDid .UserHandle }}</h1>
+    <div id="my-repos" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {{ range .Repos }}
+            <div
+                id="repo-card"
+                class="border border-black p-4 shadow-sm bg-white"
+            >
+                <div id="repo-card-name" class="font-medium">
+                    <a href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}"
+                        >{{ .Name }}</a
+                    >
+                </div>
+                <div
+                    id="repo-knot-name"
+                    class="text-gray-600 text-sm font-mono"
+                >
+                    {{ .Knot }}
+                </div>
+            </div>
+        {{ else }}
+            <p>This user does not have any repos yet.</p>
+        {{ end }}
+    </div>
 {{ end }}