From 457fae85163071637865c4756361d7a4e19bf4a3 Mon Sep 17 00:00:00 2001
From: Anirudh Oppiliappan <anirudh@tangled.org>
Date: Wed, 27 May 2026 09:18:21 +0300
Subject: [PATCH] appview: the great uppercasing

Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.org>
---
 appview/pages/funcmap.go                      |   30 +-
 appview/pages/templates/brand/brand.html      |    2 +-
 appview/pages/templates/errors/404.html       |    6 +-
 appview/pages/templates/errors/500.html       |    8 +-
 appview/pages/templates/errors/503.html       |    8 +-
 appview/pages/templates/errors/knot404.html   |    6 +-
 .../fragments/comment/commentHeader.html      |    2 +-
 .../templates/fragments/comment/edit.html     |    4 +-
 .../templates/fragments/comment/reply.html    |    4 +-
 .../pages/templates/fragments/pagination.html |    4 +-
 .../pages/templates/fragments/starBtn.html    |    2 +-
 .../templates/goodfirstissues/index.html      |    8 +-
 appview/pages/templates/knots/dashboard.html  |   16 +-
 .../knots/fragments/addMemberModal.html       |   10 +-
 .../knots/fragments/knotListing.html          |   12 +-
 appview/pages/templates/knots/index.html      |   14 +-
 .../templates/layouts/fragments/footer.html   |   60 +-
 .../layouts/fragments/footerMinimal.html      |   18 +-
 .../templates/layouts/fragments/topbar.html   |   28 +-
 .../pages/templates/layouts/profilebase.html  |    8 +-
 appview/pages/templates/layouts/repobase.html |    8 +-
 appview/pages/templates/legal/privacy.html    |    2 +-
 appview/pages/templates/legal/terms.html      |    2 +-
 .../pages/templates/notifications/list.html   |    8 +-
 appview/pages/templates/repo/blob.html        |    6 +-
 appview/pages/templates/repo/branches.html    |   16 +-
 appview/pages/templates/repo/commit.html      |    4 +-
 .../pages/templates/repo/compare/compare.html |    2 +-
 appview/pages/templates/repo/compare/new.html |    2 +-
 appview/pages/templates/repo/empty.html       |    2 +-
 appview/pages/templates/repo/fork.html        |   14 +-
 appview/pages/templates/repo/forks.html       |    6 +-
 .../repo/fragments/artifactList.html          |    4 +-
 .../repo/fragments/cloneDropdown.html         |    2 +-
 .../repo/fragments/compareAllowPull.html      |    2 +-
 .../templates/repo/fragments/compareForm.html |   14 +-
 .../pages/templates/repo/fragments/diff.html  |   12 +-
 .../templates/repo/fragments/diffOpts.html    |    4 +-
 .../repo/fragments/editLabelPanel.html        |    8 +-
 .../repo/fragments/feedDropdown.html          |    2 +-
 .../fragments/labelSectionHeaderText.html     |    2 +-
 .../templates/repo/fragments/singleTag.html   |    2 +-
 appview/pages/templates/repo/index.html       |   20 +-
 .../repo/issues/fragments/issueListing.html   |    4 +-
 .../repo/issues/fragments/newComment.html     |   14 +-
 .../repo/issues/fragments/putIssue.html       |    8 +-
 .../pages/templates/repo/issues/issue.html    |    4 +-
 .../pages/templates/repo/issues/issues.html   |   12 +-
 appview/pages/templates/repo/issues/new.html  |    2 +-
 .../pages/templates/repo/knotUnreachable.html |    2 +-
 appview/pages/templates/repo/log.html         |   20 +-
 .../pages/templates/repo/needsUpgrade.html    |    4 +-
 appview/pages/templates/repo/new.html         |   18 +-
 .../templates/repo/pipelines/pipelines.html   |   10 +-
 .../templates/repo/pipelines/workflow.html    |    4 +-
 .../repo/pulls/fragments/pullActions.html     |   12 +-
 .../pulls/fragments/pullCompareBranches.html  |    4 +-
 .../fragments/pullCompareForksBranches.html   |    2 +-
 .../repo/pulls/fragments/pullComposeHost.html |    6 +-
 .../repo/pulls/fragments/pullNewComment.html  |    4 +-
 .../repo/pulls/fragments/pullResubmit.html    |    6 +-
 .../repo/pulls/fragments/pullStack.html       |    2 +-
 .../repo/pulls/fragments/pullState.html       |    2 +-
 .../repo/pulls/fragments/pullStepDetails.html |    2 +-
 .../repo/pulls/fragments/pullStepReview.html  |    2 +-
 .../repo/pulls/fragments/pullStepSource.html  |    2 +-
 .../repo/pulls/fragments/pullVouchNudge.html  |    2 +-
 .../pulls/fragments/summarizedPullHeader.html |    4 +-
 appview/pages/templates/repo/pulls/new.html   |    2 +-
 appview/pages/templates/repo/pulls/pull.html  |   50 +-
 appview/pages/templates/repo/pulls/pulls.html |   18 +-
 .../pages/templates/repo/settings/access.html |   12 +-
 .../settings/fragments/addLabelDefModal.html  |    4 +-
 .../repo/settings/fragments/labelListing.html |    4 +-
 .../settings/fragments/secretListing.html     |    2 +-
 .../repo/settings/fragments/sidebar.html      |    2 +-
 .../settings/fragments/webhookDeliveries.html |    4 +-
 .../templates/repo/settings/general.html      |   36 +-
 .../pages/templates/repo/settings/hooks.html  |   32 +-
 .../templates/repo/settings/pipelines.html    |   18 +-
 .../pages/templates/repo/settings/sites.html  |   44 +-
 appview/pages/templates/repo/stars.html       |    6 +-
 appview/pages/templates/repo/tag.html         |    2 +-
 appview/pages/templates/repo/tags.html        |    6 +-
 appview/pages/templates/repo/tree.html        |    2 +-
 .../templates/search/fragments/quick.html     |    8 +-
 appview/pages/templates/search/search.html    |    6 +-
 .../pages/templates/spindles/dashboard.html   |   14 +-
 .../spindles/fragments/addMemberModal.html    |   10 +-
 .../spindles/fragments/spindleListing.html    |   10 +-
 appview/pages/templates/spindles/index.html   |   14 +-
 .../pages/templates/strings/dashboard.html    |    4 +-
 .../templates/strings/fragments/form.html     |    4 +-
 appview/pages/templates/strings/put.html      |    2 +-
 appview/pages/templates/strings/string.html   |   16 +-
 appview/pages/templates/strings/timeline.html |    2 +-
 .../templates/timeline/fragments/hero.html    |    2 +-
 .../timeline/fragments/newsletterForm.html    |    4 +-
 .../timeline/fragments/vouchSuggestions.html  |    2 +-
 appview/pages/templates/timeline/home.html    |    6 +-
 .../pages/templates/timeline/timeline.html    |    6 +-
 .../pages/templates/user/completeSignup.html  |   10 +-
 appview/pages/templates/user/followers.html   |    4 +-
 appview/pages/templates/user/following.html   |    4 +-
 .../templates/user/fragments/editAvatar.html  |   10 +-
 .../templates/user/fragments/editBio.html     |   20 +-
 .../templates/user/fragments/editPins.html    |    6 +-
 .../templates/user/fragments/follow.html      |    4 +-
 .../user/fragments/networkVouches.html        |    4 +-
 .../templates/user/fragments/profileCard.html |    4 +-
 .../templates/user/fragments/vouchButton.html |    6 +-
 .../user/fragments/vouchPopover.html          |    4 +-
 appview/pages/templates/user/login.html       |    8 +-
 appview/pages/templates/user/overview.html    |   26 +-
 appview/pages/templates/user/repos.html       |    6 +-
 .../pages/templates/user/settings/emails.html |   16 +-
 .../settings/fragments/dangerDeleteToken.html |   12 +-
 .../fragments/dangerPasswordSuccess.html      |    2 +-
 .../fragments/dangerPasswordToken.html        |   12 +-
 .../user/settings/fragments/emailListing.html |   12 +-
 .../user/settings/fragments/keyListing.html   |    2 +-
 .../user/settings/fragments/sidebar.html      |    2 +-
 .../pages/templates/user/settings/keys.html   |   20 +-
 .../user/settings/notifications.html          |    6 +-
 .../templates/user/settings/profile.html      |   64 +-
 .../pages/templates/user/settings/sites.html  |   18 +-
 appview/pages/templates/user/signup.html      |    6 +-
 appview/pages/templates/user/starred.html     |    4 +-
 appview/pages/templates/user/strings.html     |    2 +-
 appview/pages/templates/user/vouches.html     |    2 +-
 input.css                                     | 2403 +++++++++--------
 131 files changed, 1856 insertions(+), 1743 deletions(-)

diff --git a/appview/pages/funcmap.go b/appview/pages/funcmap.go
index 2944d510..2a0c8ee6 100644
--- a/appview/pages/funcmap.go
+++ b/appview/pages/funcmap.go
@@ -45,6 +45,12 @@ func (p *Pages) funcMap() template.FuncMap {
 		"split": func(s string) []string {
 			return strings.Split(s, "\n")
 		},
+		"capitalize": func(s string) string {
+			if s == "" {
+				return s
+			}
+			return strings.ToUpper(s[:1]) + s[1:]
+		},
 		"trimPrefix": func(s, prefix string) string {
 			return strings.TrimPrefix(s, prefix)
 		},
@@ -527,20 +533,20 @@ func (p *Pages) funcMap() template.FuncMap {
 				"OrderedReactionKinds": models.OrderedReactionKinds,
 				// would be great to have ordered maps right about now
 				"UserSettingsTabs": []tab{
-					{"Name": "profile", "Icon": "user"},
-					{"Name": "keys", "Icon": "key"},
-					{"Name": "emails", "Icon": "mail"},
-					{"Name": "notifications", "Icon": "bell"},
-					{"Name": "knots", "Icon": "volleyball"},
-					{"Name": "spindles", "Icon": "spool"},
-					{"Name": "sites", "Icon": "globe"},
+					{"Name": "profile", "Label": "Profile", "Icon": "user"},
+					{"Name": "keys", "Label": "Keys", "Icon": "key"},
+					{"Name": "emails", "Label": "Emails", "Icon": "mail"},
+					{"Name": "notifications", "Label": "Notifications", "Icon": "bell"},
+					{"Name": "knots", "Label": "Knots", "Icon": "volleyball"},
+					{"Name": "spindles", "Label": "Spindles", "Icon": "spool"},
+					{"Name": "sites", "Label": "Sites", "Icon": "globe"},
 				},
 				"RepoSettingsTabs": []tab{
-					{"Name": "general", "Icon": "sliders-horizontal"},
-					{"Name": "access", "Icon": "users"},
-					{"Name": "pipelines", "Icon": "layers-2"},
-					{"Name": "hooks", "Icon": "webhook"},
-					{"Name": "sites", "Icon": "globe"},
+					{"Name": "general", "Label": "General", "Icon": "sliders-horizontal"},
+					{"Name": "access", "Label": "Access", "Icon": "users"},
+					{"Name": "pipelines", "Label": "Pipelines", "Icon": "layers-2"},
+					{"Name": "hooks", "Label": "Hooks", "Icon": "webhook"},
+					{"Name": "sites", "Label": "Sites", "Icon": "globe"},
 				},
 				"PdsUserDomain": p.pdsCfg.UserDomain,
 			}
diff --git a/appview/pages/templates/brand/brand.html b/appview/pages/templates/brand/brand.html
index 9950359e..ec9866fe 100644
--- a/appview/pages/templates/brand/brand.html
+++ b/appview/pages/templates/brand/brand.html
@@ -1,4 +1,4 @@
-{{ define "title" }}brand{{ end }}
+{{ define "title" }}Brand &middot; Tangled{{ end }}
 
 {{ define "content" }}
 <div class="grid grid-cols-10">
diff --git a/appview/pages/templates/errors/404.html b/appview/pages/templates/errors/404.html
index a034f527..f21d9c08 100644
--- a/appview/pages/templates/errors/404.html
+++ b/appview/pages/templates/errors/404.html
@@ -1,4 +1,4 @@
-{{ define "title" }}404 &middot; tangled{{ end }}
+{{ define "title" }}404 &middot; Tangled{{ end }}
 
 {{ define "content" }}
 <div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
@@ -11,7 +11,7 @@
 
         <div class="space-y-4">
             <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
-                404 &mdash; page not found
+                404 &mdash; Page not found
             </h1>
             <p class="text-gray-600 dark:text-gray-300">
                 The page you're looking for doesn't exist. It may have been moved, deleted, or you have the wrong URL.
@@ -19,7 +19,7 @@
             <div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-6">
                 <a href="javascript:history.back()" class="btn no-underline hover:no-underline gap-2">
                     {{ i "arrow-left" "w-4 h-4" }}
-                    go back
+                    Go back
                 </a>
             </div>
         </div>
diff --git a/appview/pages/templates/errors/500.html b/appview/pages/templates/errors/500.html
index 529e2d59..dcde20c7 100644
--- a/appview/pages/templates/errors/500.html
+++ b/appview/pages/templates/errors/500.html
@@ -1,4 +1,4 @@
-{{ define "title" }}500 &middot; tangled{{ end }}
+{{ define "title" }}500 &middot; Tangled{{ end }}
 
 {{ define "content" }}
 <div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
@@ -11,7 +11,7 @@
 
         <div class="space-y-4">
             <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
-                500 &mdash; internal server error
+                500 &mdash; Internal server error
             </h1>
             <p class="text-gray-600 dark:text-gray-300">
                 We encountered an error while processing your request. Please try again later.
@@ -19,11 +19,11 @@
             <div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-6">
                 <button onclick="location.reload()" class="btn-create gap-2">
                     {{ i "refresh-cw" "w-4 h-4" }}
-                    try again
+                    Try again
                 </button>
                 <a href="/" class="btn no-underline hover:no-underline gap-2">
                     {{ i "arrow-left" "w-4 h-4" }}
-                    back to home
+                    Back to home
                 </a>
             </div>
         </div>
diff --git a/appview/pages/templates/errors/503.html b/appview/pages/templates/errors/503.html
index 72575817..514ea6e9 100644
--- a/appview/pages/templates/errors/503.html
+++ b/appview/pages/templates/errors/503.html
@@ -1,4 +1,4 @@
-{{ define "title" }}503 &middot; tangled{{ end }}
+{{ define "title" }}503 &middot; Tangled{{ end }}
 
 {{ define "content" }}
 <div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
@@ -11,7 +11,7 @@
 
         <div class="space-y-4">
             <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
-                503 &mdash; service unavailable
+                503 &mdash; Service unavailable
             </h1>
             <p class="text-gray-600 dark:text-gray-300">
                 We were unable to reach the knot hosting this repository. The service may be temporarily unavailable.
@@ -19,11 +19,11 @@
             <div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-6">
                 <button onclick="location.reload()" class="btn-create gap-2">
                     {{ i "refresh-cw" "w-4 h-4" }}
-                    try again
+                    Try again
                 </button>
                 <a href="/" class="btn gap-2 no-underline hover:no-underline">
                     {{ i "arrow-left" "w-4 h-4" }}
-                    back to timeline
+                    Back to timeline
                 </a>
             </div>
         </div>
diff --git a/appview/pages/templates/errors/knot404.html b/appview/pages/templates/errors/knot404.html
index c2a4037f..3a264267 100644
--- a/appview/pages/templates/errors/knot404.html
+++ b/appview/pages/templates/errors/knot404.html
@@ -1,4 +1,4 @@
-{{ define "title" }}404 &middot; tangled{{ end }}
+{{ define "title" }}404 &middot; Tangled{{ end }}
 
 {{ define "content" }}
 <div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
@@ -11,7 +11,7 @@
 
         <div class="space-y-4">
             <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
-                404 &mdash; repository not found
+                404 &mdash; Repository not found
             </h1>
             <p class="text-gray-600 dark:text-gray-300">
                 The repository you were looking for could not be found. The knot serving the repository may be unavailable.
@@ -19,7 +19,7 @@
             <div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-6">
                 <a href="/" class="btn flex items-center gap-2 no-underline hover:no-underline">
                     {{ i "arrow-left" "w-4 h-4" }}
-                    back to timeline
+                    Back to timeline
                 </a>
             </div>
         </div>
diff --git a/appview/pages/templates/fragments/comment/commentHeader.html b/appview/pages/templates/fragments/comment/commentHeader.html
index ff74bf65..2092c8e2 100644
--- a/appview/pages/templates/fragments/comment/commentHeader.html
+++ b/appview/pages/templates/fragments/comment/commentHeader.html
@@ -32,7 +32,7 @@
     {{ if .Comment.Deleted }}
       {{ template "repo/fragments/shortTimeAgo" .Comment.Deleted }}
     {{ else if .Comment.Edited }}
-      edited {{ template "repo/fragments/shortTimeAgo" .Comment.Edited }}
+      Edited {{ template "repo/fragments/shortTimeAgo" .Comment.Edited }}
     {{ else }}
       {{ template "repo/fragments/shortTimeAgo" .Comment.Created }}
     {{ end }}
diff --git a/appview/pages/templates/fragments/comment/edit.html b/appview/pages/templates/fragments/comment/edit.html
index 1ab0d0c0..be0d74e0 100644
--- a/appview/pages/templates/fragments/comment/edit.html
+++ b/appview/pages/templates/fragments/comment/edit.html
@@ -31,7 +31,7 @@
     class="btn-create py-0 flex gap-1 items-center group text-sm"
   >
     {{ i "check" "size-4" }}
-    save
+    Save
     {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
   </button>
 {{ end }}
@@ -44,6 +44,6 @@
     hx-swap="outerHTML"
   >
     {{ i "x" "size-4" }}
-    cancel
+    Cancel
   </button>
 {{ end }}
diff --git a/appview/pages/templates/fragments/comment/reply.html b/appview/pages/templates/fragments/comment/reply.html
index 8b564b0d..020cea6c 100644
--- a/appview/pages/templates/fragments/comment/reply.html
+++ b/appview/pages/templates/fragments/comment/reply.html
@@ -34,7 +34,7 @@
     hx-swap="outerHTML"
   >
     {{ i "x" "size-4" }}
-    cancel
+    Cancel
   </button>
 {{ end }}
 
@@ -45,6 +45,6 @@
   >
     {{ i "reply" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
     {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-    reply
+    Reply
   </button>
 {{ end }}
diff --git a/appview/pages/templates/fragments/pagination.html b/appview/pages/templates/fragments/pagination.html
index c2e5dcbc..65ed2365 100644
--- a/appview/pages/templates/fragments/pagination.html
+++ b/appview/pages/templates/fragments/pagination.html
@@ -23,7 +23,7 @@
       {{ end }}
     >
       {{ i "chevron-left" "w-4 h-4" }}
-      prev
+      Prev
     </a>
 
     {{ if gt $page.Offset 0 }}
@@ -74,7 +74,7 @@
         href="{{ $basePath }}?{{ $queryParams }}&offset={{ $next }}&limit={{ $page.Limit }}"
       {{ end }}
     >
-      next
+      Next
       {{ i "chevron-right" "w-4 h-4" }}
     </a>
   </div>
diff --git a/appview/pages/templates/fragments/starBtn.html b/appview/pages/templates/fragments/starBtn.html
index e01833c8..8c09162b 100644
--- a/appview/pages/templates/fragments/starBtn.html
+++ b/appview/pages/templates/fragments/starBtn.html
@@ -22,7 +22,7 @@
                 {{ i "star" "w-4 h-4 shrink-0 inline group-[.htmx-request]:hidden" }}
             {{ end }}
             {{ i "loader-circle" "w-4 h-4 shrink-0 animate-spin hidden group-[.htmx-request]:inline" }}
-            <span class="group-[.htmx-request]:hidden">{{ if .IsStarred }}unstar{{ else }}star{{ end }}</span>
+            <span class="group-[.htmx-request]:hidden">{{ if .IsStarred }}Unstar{{ else }}Star{{ end }}</span>
         </button>
         {{ if .RepoName }}
             {{ $did := .SubjectAt.Authority | string }}
diff --git a/appview/pages/templates/goodfirstissues/index.html b/appview/pages/templates/goodfirstissues/index.html
index 0adc8263..bb5b769c 100644
--- a/appview/pages/templates/goodfirstissues/index.html
+++ b/appview/pages/templates/goodfirstissues/index.html
@@ -1,7 +1,7 @@
-{{ define "title" }}good first issues{{ end }}
+{{ define "title" }}Good first issues &middot; Tangled{{ end }}
 
 {{ define "extrameta" }}
-    <meta property="og:title" content="good first issues · tangled" />
+    <meta property="og:title" content="Good first issues · Tangled" />
     <meta property="og:type" content="object" />
     <meta property="og:url" content="https://tangled.org/goodfirstissues" />
     <meta property="og:description" content="Find good first issues to contribute to open source projects" />
@@ -141,7 +141,7 @@
                   href="/goodfirstissues?offset={{ $prev.Offset }}&limit={{ $prev.Limit }}"
               >
                   {{ i "chevron-left" "w-4 h-4" }}
-                  previous
+                  Previous
               </a>
           {{ else }}
               <div></div>
@@ -154,7 +154,7 @@
                   hx-boost="true"
                   href="/goodfirstissues?offset={{ $next.Offset }}&limit={{ $next.Limit }}"
               >
-                  next
+                  Next
                   {{ i "chevron-right" "w-4 h-4" }}
               </a>
           {{ end }}
diff --git a/appview/pages/templates/knots/dashboard.html b/appview/pages/templates/knots/dashboard.html
index 2ae17840..152b092b 100644
--- a/appview/pages/templates/knots/dashboard.html
+++ b/appview/pages/templates/knots/dashboard.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .Registration.Domain }} &middot; {{ .Tab }} settings{{ end }}
+{{ define "title" }}{{ .Tab | capitalize }} &middot; {{ .Registration.Domain }} &middot; Tangled{{ end }}
 
 {{ define "content" }}
   <div class="p-6">
@@ -19,24 +19,24 @@
 {{ define "knotDash" }}
 <div>
   <div class="flex justify-between items-center">
-    <h2 class="text-sm pb-2 uppercase font-bold">{{ .Tab }} &middot; {{ .Registration.Domain }}</h2>
+    <h2 class="text-lg pb-2 font-medium">{{ .Tab | capitalize }} &middot; {{ .Registration.Domain }}</h2>
     <div id="right-side" class="flex gap-2">
       {{ $style := "px-2 py-1 rounded flex items-center flex-shrink-0 gap-2" }}
       {{ $isOwner := and .LoggedInUser (eq .LoggedInUser.Did .Registration.ByDid)  }}
       {{ if .Registration.IsRegistered }}
-        <span class="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 {{$style}}">{{ i "shield-check" "w-4 h-4" }} verified</span>
+        <span class="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 {{$style}}">{{ i "shield-check" "w-4 h-4" }} Verified</span>
         {{ if $isOwner }}
           {{ template "knots/fragments/addMemberModal" .Registration }}
         {{ end }}
       {{ else if .Registration.IsReadOnly }}
         <span class="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 {{$style}}">
-          {{ i "shield-alert" "w-4 h-4" }} read-only
+          {{ i "shield-alert" "w-4 h-4" }} Read-only
         </span>
         {{ if $isOwner }}
           {{ block "retryButton" .Registration }} {{ end }}
         {{ end }}
       {{ else }}
-        <span class="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 {{$style}}">{{ i "shield-off" "w-4 h-4" }} unverified</span>
+        <span class="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 {{$style}}">{{ i "shield-off" "w-4 h-4" }} Unverified</span>
         {{ if $isOwner }}
           {{ block "retryButton" .Registration }} {{ end }}
         {{ end }}
@@ -101,7 +101,7 @@
     hx-headers='{"shouldRedirect": "true"}'
   >
     {{ i "trash-2" "w-5 h-5" }}
-    <span class="hidden md:inline">delete</span> 
+    <span class="hidden md:inline">Delete</span> 
     {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
   </button>
 {{ end }}
@@ -116,7 +116,7 @@
     hx-headers='{"shouldRefresh": "true"}'
   >
     {{ i "rotate-ccw" "w-5 h-5" }}
-    <span class="hidden md:inline">retry</span> 
+    <span class="hidden md:inline">Retry</span> 
     {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
   </button>
 {{ end }}
@@ -135,7 +135,7 @@
       hx-confirm="Are you sure you want to remove {{ $memberHandle }} from this knot?"
     >
       {{ i "user-minus" "w-4 h-4" }}
-      remove
+      Remove
       {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
     </button>
 {{ end }}
diff --git a/appview/pages/templates/knots/fragments/addMemberModal.html b/appview/pages/templates/knots/fragments/addMemberModal.html
index f41f97bb..ee24489a 100644
--- a/appview/pages/templates/knots/fragments/addMemberModal.html
+++ b/appview/pages/templates/knots/fragments/addMemberModal.html
@@ -6,7 +6,7 @@
     popovertargetaction="toggle"
   >
     {{ i "user-plus" "w-5 h-5" }}
-    <span class="hidden md:inline">add member</span> 
+    <span class="hidden md:inline">Add member</span> 
     {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
   </button>
 
@@ -27,8 +27,8 @@
   hx-swap="none"
   class="flex flex-col gap-2"
 >
-  <label for="member-did-{{ .Id }}" class="uppercase p-0">
-    ADD MEMBER
+  <label for="member-did-{{ .Id }}" class="text-lg font-medium p-0">
+    Add member
   </label>
   <p class="text-sm text-gray-500 dark:text-gray-400">Members can create repositories and run workflows on this knot.</p>
   <actor-typeahead>
@@ -51,10 +51,10 @@
       popovertargetaction="hide"
       class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
       >
-      {{ i "x" "size-4" }} cancel
+      {{ i "x" "size-4" }} Cancel
     </button>
     <button type="submit" class="btn w-1/2 flex items-center">
-      <span class="inline-flex gap-2 items-center">{{ i "user-plus" "size-4" }} add</span>
+      <span class="inline-flex gap-2 items-center">{{ i "user-plus" "size-4" }} Add</span>
       <span id="spinner" class="group">
         {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
       </span>
diff --git a/appview/pages/templates/knots/fragments/knotListing.html b/appview/pages/templates/knots/fragments/knotListing.html
index 51c9ca07..239d1c31 100644
--- a/appview/pages/templates/knots/fragments/knotListing.html
+++ b/appview/pages/templates/knots/fragments/knotListing.html
@@ -32,19 +32,19 @@
     {{ $style := "px-2 py-1 rounded flex items-center flex-shrink-0 gap-2 text-sm" }}
     {{ if .IsRegistered }}
       <span class="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 {{$style}}">
-        {{ i "shield-check" "w-4 h-4" }} verified
+        {{ i "shield-check" "w-4 h-4" }} Verified
       </span>
       {{ template "knots/fragments/addMemberModal" . }}
       {{ block "knotDeleteButton" . }} {{ end }}
     {{ else if .IsNeedsUpgrade }}
       <span class="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 {{$style}}">
-        {{ i "shield-alert" "w-4 h-4" }} needs upgrade
+        {{ i "shield-alert" "w-4 h-4" }} Needs upgrade
       </span>
       {{ block "knotRetryButton" . }} {{ end }}
       {{ block "knotDeleteButton" . }} {{ end }}
     {{ else }}
       <span class="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 {{$style}}">
-        {{ i "shield-off" "w-4 h-4" }} unverified
+        {{ i "shield-off" "w-4 h-4" }} Unverified
       </span>
       {{ block "knotRetryButton" . }} {{ end }}
       {{ block "knotDeleteButton" . }} {{ end }}
@@ -62,7 +62,7 @@
     hx-confirm="{{ template "knots/fragments/deleteConfirm" . }}"
   >
     {{ i "trash-2" "w-5 h-5" }}
-    <span class="hidden md:inline">delete</span>
+    <span class="hidden md:inline">Delete</span>
     {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
   </button>
 {{ end }}
@@ -77,14 +77,14 @@
     hx-target="#knot-{{.Id}}"
   >
     {{ i "rotate-ccw" "w-5 h-5" }}
-    <span class="hidden md:inline">retry</span>
+    <span class="hidden md:inline">Retry</span>
     {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
   </button>
 {{ end }}
 
 {{ define "knots/fragments/deleteConfirm" -}}
 {{ if .RepoCount -}}
-Unregistering '{{ .Domain }}' will remove {{ plural .RepoCount "repository" "" }} from Tangled. The git data will stay on the knot, but these repos will disappear from Tangled. Are you sure?
+Unregistering '{{ .Domain }}' will remove {{ plural .RepoCount "repository" "" }} from Tangled. The git data will stay on the knot, but these repositories will disappear from Tangled. Are you sure?
 {{- else -}}
 Are you sure you want to delete the knot '{{ .Domain }}'?
 {{- end -}}
diff --git a/appview/pages/templates/knots/index.html b/appview/pages/templates/knots/index.html
index b3c16c10..3f52e042 100644
--- a/appview/pages/templates/knots/index.html
+++ b/appview/pages/templates/knots/index.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .Tab }} settings{{ end }}
+{{ define "title" }}{{ .Tab | capitalize }} &middot; Tangled{{ end }}
 
 {{ define "content" }}
   <div class="p-6">
@@ -19,7 +19,7 @@
 {{ define "knotsList" }}
   <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
     <div class="col-span-1 md:col-span-2">
-      <h2 class="text-sm pb-2 uppercase font-bold">Knots</h2>
+      <h2 class="text-lg pb-2 font-medium">Knots</h2>
       {{ block "about" . }} {{ end }}
     </div>
     <div class="col-span-1 md:col-span-1 md:justify-self-end">
@@ -48,13 +48,13 @@
 
 {{ define "list" }}
   <section class="rounded w-full flex flex-col gap-2">
-    <h2 class="text-sm font-bold py-2 uppercase dark:text-gray-300">your knots</h2>
+    <h2 class="text-lg font-medium py-2 dark:text-gray-300">Your knots</h2>
     <div class="flex flex-col rounded border border-gray-200 dark:border-gray-700 w-full">
       {{ range .Knots }}
         {{ template "knots/fragments/knotListing" . }}
       {{ else }}
         <div class="flex items-center justify-center p-2 border-b border-gray-200 dark:border-gray-700 text-gray-500">
-          no knots registered yet
+          No knots registered yet
         </div>
       {{ end }}
     </div>
@@ -64,7 +64,7 @@
 
 {{ define "register" }}
   <section class="rounded w-full lg:w-fit flex flex-col gap-2">
-    <h2 class="text-sm font-bold py-2 uppercase dark:text-gray-300">register a knot</h2>
+    <h2 class="text-lg font-medium py-2 dark:text-gray-300">Register a knot</h2>
     <p class="mb-2 dark:text-gray-300">Enter the hostname of your knot to get started.</p>
     <form
       hx-post="/settings/knots/register"
@@ -88,7 +88,7 @@
           >
           <span class="inline-flex items-center gap-2">
             {{ i "plus" "w-4 h-4" }}
-            register
+            Register
           </span>
           <span class="pl-2 hidden group-[.htmx-request]:inline">
             {{ i "loader-circle" "w-4 h-4 animate-spin" }}
@@ -107,7 +107,7 @@
 class="btn flex items-center gap-2"
 href="https://docs.tangled.org/knot-self-hosting-guide.html#knot-self-hosting-guide">
 {{ i "book" "size-4" }}
-docs
+Docs
 </a>
 <div
 id="add-email-modal"
diff --git a/appview/pages/templates/layouts/fragments/footer.html b/appview/pages/templates/layouts/fragments/footer.html
index 2f92ab8e..41554989 100644
--- a/appview/pages/templates/layouts/fragments/footer.html
+++ b/appview/pages/templates/layouts/fragments/footer.html
@@ -11,36 +11,36 @@
           </a>
         </div>
 
-        {{ $headerStyle := "text-gray-900 dark:text-gray-200 font-bold text-sm uppercase tracking-wide mb-1" }}
+        {{ $headerStyle := "text-gray-900 dark:text-gray-200 font-bold text-sm tracking-wide mb-1" }}
         {{ $linkStyle := "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:underline inline-flex gap-1 items-center" }}
         {{ $iconStyle := "w-4 h-4 flex-shrink-0" }}
 
         <!-- Center section with max-width -->
         <div class="grid grid-cols-4 gap-2">
           <div class="flex flex-col gap-1">
-            <div class="{{ $headerStyle }}">legal</div>
-            <a href="/terms" class="{{ $linkStyle }}">{{ i "file-text" $iconStyle }} terms of service</a>
-            <a href="/privacy" class="{{ $linkStyle }}">{{ i "shield" $iconStyle }} privacy policy</a>
+            <div class="{{ $headerStyle }}">Legal</div>
+            <a href="/terms" class="{{ $linkStyle }}">{{ i "file-text" $iconStyle }} Terms of service</a>
+            <a href="/privacy" class="{{ $linkStyle }}">{{ i "shield" $iconStyle }} Privacy policy</a>
           </div>
 
           <div class="flex flex-col gap-1">
-            <div class="{{ $headerStyle }}">resources</div>
-            <a href="https://blog.tangled.org" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ i "book-open" $iconStyle }} blog</a>
-            <a href="https://docs.tangled.org" class="{{ $linkStyle }}">{{ i "book" $iconStyle }} docs</a>
-            <a href="https://tangled.org/@tangled.org/core" class="{{ $linkStyle }}">{{ i "code" $iconStyle }} source</a>
-            <a href="https://tangled.org/brand" class="{{ $linkStyle }}">{{ i "paintbrush" $iconStyle }} brand</a>
+            <div class="{{ $headerStyle }}">Resources</div>
+            <a href="https://blog.tangled.org" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ i "book-open" $iconStyle }} Blog</a>
+            <a href="https://docs.tangled.org" class="{{ $linkStyle }}">{{ i "book" $iconStyle }} Docs</a>
+            <a href="https://tangled.org/@tangled.org/core" class="{{ $linkStyle }}">{{ i "code" $iconStyle }} Source</a>
+            <a href="https://tangled.org/brand" class="{{ $linkStyle }}">{{ i "paintbrush" $iconStyle }} Brand</a>
           </div>
 
           <div class="flex flex-col gap-1">
-            <div class="{{ $headerStyle }}">social</div>
-            <a href="https://chat.tangled.org" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ i "message-circle" $iconStyle }} discord</a>
-            <a href="https://web.libera.chat/#tangled" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ i "hash" $iconStyle }} irc</a>
-            <a href="https://bsky.app/profile/tangled.org" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ template "user/fragments/bluesky" $iconStyle }} bluesky</a>
-            <a href="https://x.com/tangled_org" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ template "user/fragments/x" $iconStyle }} twitter (x)</a>
+            <div class="{{ $headerStyle }}">Social</div>
+            <a href="https://chat.tangled.org" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ i "message-circle" $iconStyle }} Discord</a>
+            <a href="https://web.libera.chat/#tangled" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ i "hash" $iconStyle }} IRC</a>
+            <a href="https://bsky.app/profile/tangled.org" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ template "user/fragments/bluesky" $iconStyle }} Bluesky</a>
+            <a href="https://x.com/tangled_org" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ template "user/fragments/x" $iconStyle }} Twitter (X)</a>
           </div>
 
           <div class="flex flex-col gap-1">
-            <div class="{{ $headerStyle }}">contact</div>
+            <div class="{{ $headerStyle }}">Contact</div>
             <a href="mailto:team@tangled.org" class="{{ $linkStyle }}">{{ i "mail" "w-4 h-4 flex-shrink-0" }} team@tangled.org</a>
             <a href="mailto:security@tangled.org" class="{{ $linkStyle }}">{{ i "shield-check" "w-4 h-4 flex-shrink-0" }} security@tangled.org</a>
           </div>
@@ -54,7 +54,7 @@
 
       <!-- Mobile layout: stacked -->
       <div class="lg:hidden flex flex-col gap-8">
-        {{ $headerStyle := "text-gray-900 dark:text-gray-200 font-bold text-xs uppercase tracking-wide mb-1" }}
+        {{ $headerStyle := "text-gray-900 dark:text-gray-200 font-bold text-xs tracking-wide mb-1" }}
         {{ $linkStyle := "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:underline inline-flex gap-1 items-center" }}
         {{ $iconStyle := "w-4 h-4 flex-shrink-0" }}
 
@@ -66,29 +66,29 @@
 
         <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-4 sm:gap-6 md:gap-2 gap-6">
           <div class="flex flex-col gap-1">
-            <div class="{{ $headerStyle }}">legal</div>
-            <a href="/terms" class="{{ $linkStyle }}">{{ i "file-text" $iconStyle }} terms of service</a>
-            <a href="/privacy" class="{{ $linkStyle }}">{{ i "shield" $iconStyle }} privacy policy</a>
+            <div class="{{ $headerStyle }}">Legal</div>
+            <a href="/terms" class="{{ $linkStyle }}">{{ i "file-text" $iconStyle }} Terms of service</a>
+            <a href="/privacy" class="{{ $linkStyle }}">{{ i "shield" $iconStyle }} Privacy policy</a>
           </div>
 
           <div class="flex flex-col gap-1">
-            <div class="{{ $headerStyle }}">resources</div>
-            <a href="https://blog.tangled.org" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ i "book-open" $iconStyle }} blog</a>
-            <a href="https://docs.tangled.org" class="{{ $linkStyle }}">{{ i "book" $iconStyle }} docs</a>
-            <a href="https://tangled.org/@tangled.org/core" class="{{ $linkStyle }}">{{ i "code" $iconStyle }} source</a>
-            <a href="https://tangled.org/brand" class="{{ $linkStyle }}">{{ i "paintbrush" $iconStyle }} brand</a>
+            <div class="{{ $headerStyle }}">Resources</div>
+            <a href="https://blog.tangled.org" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ i "book-open" $iconStyle }} Blog</a>
+            <a href="https://docs.tangled.org" class="{{ $linkStyle }}">{{ i "book" $iconStyle }} Docs</a>
+            <a href="https://tangled.org/@tangled.org/core" class="{{ $linkStyle }}">{{ i "code" $iconStyle }} Source</a>
+            <a href="https://tangled.org/brand" class="{{ $linkStyle }}">{{ i "paintbrush" $iconStyle }} Brand</a>
           </div>
 
           <div class="flex flex-col gap-1">
-            <div class="{{ $headerStyle }}">social</div>
-            <a href="https://chat.tangled.org" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ i "message-circle" $iconStyle }} discord</a>
-            <a href="https://web.libera.chat/#tangled" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ i "hash" $iconStyle }} irc</a>
-            <a href="https://bsky.app/profile/tangled.org" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ template "user/fragments/bluesky" $iconStyle }} bluesky</a>
-            <a href="https://x.com/tangled_org" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ template "user/fragments/x" $iconStyle }} twitter (x)</a>
+            <div class="{{ $headerStyle }}">Social</div>
+            <a href="https://chat.tangled.org" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ i "message-circle" $iconStyle }} Discord</a>
+            <a href="https://web.libera.chat/#tangled" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ i "hash" $iconStyle }} IRC</a>
+            <a href="https://bsky.app/profile/tangled.org" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ template "user/fragments/bluesky" $iconStyle }} Bluesky</a>
+            <a href="https://x.com/tangled_org" class="{{ $linkStyle }}" target="_blank" rel="noopener noreferrer">{{ template "user/fragments/x" $iconStyle }} Twitter (X)</a>
           </div>
 
           <div class="flex flex-col gap-1">
-            <div class="{{ $headerStyle }}">contact</div>
+            <div class="{{ $headerStyle }}">Contact</div>
             <a href="mailto:team@tangled.org" class="{{ $linkStyle }}">{{ i "mail" "w-4 h-4 flex-shrink-0" }} team@tangled.org</a>
             <a href="mailto:security@tangled.org" class="{{ $linkStyle }}">{{ i "shield-check" "w-4 h-4 flex-shrink-0" }} security@tangled.org</a>
           </div>
diff --git a/appview/pages/templates/layouts/fragments/footerMinimal.html b/appview/pages/templates/layouts/fragments/footerMinimal.html
index d285cee8..0792ec3d 100644
--- a/appview/pages/templates/layouts/fragments/footerMinimal.html
+++ b/appview/pages/templates/layouts/fragments/footerMinimal.html
@@ -7,15 +7,15 @@
       </a>
       <span>&copy; 2026 Tangled Labs Oy.</span>
     </div>
-    <a href="https://blog.tangled.org" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline">blog</a>
-    <a href="https://docs.tangled.org" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline">docs</a>
-    <a href="https://tangled.org/tangled.org/core" hx-boost="true" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline">source</a>
-    <a href="https://tangled.org/brand" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline">brand</a>
-    <a href="https://chat.tangled.org" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline" target="_blank" rel="noopener noreferrer">discord</a>
-    <a href="https://bsky.app/profile/tangled.org" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline" target="_blank" rel="noopener noreferrer">bluesky</a>
-    <a href="https://x.com/tangled_org" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline" target="_blank" rel="noopener noreferrer">twitter (x)</a>
-    <a href="/terms" hx-boost="true" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline">terms</a>
-    <a href="/privacy" hx-boost="true" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline">privacy</a>
+    <a href="https://blog.tangled.org" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline">Blog</a>
+    <a href="https://docs.tangled.org" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline">Docs</a>
+    <a href="https://tangled.org/tangled.org/core" hx-boost="true" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline">Source</a>
+    <a href="https://tangled.org/brand" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline">Brand</a>
+    <a href="https://chat.tangled.org" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline" target="_blank" rel="noopener noreferrer">Discord</a>
+    <a href="https://bsky.app/profile/tangled.org" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline" target="_blank" rel="noopener noreferrer">Bluesky</a>
+    <a href="https://x.com/tangled_org" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline" target="_blank" rel="noopener noreferrer">Twitter (X)</a>
+    <a href="/terms" hx-boost="true" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline">Terms</a>
+    <a href="/privacy" hx-boost="true" class="hover:text-gray-900 dark:hover:text-gray-200 hover:underline">Privacy</a>
   </div>
 </footer>
 {{ end }}
diff --git a/appview/pages/templates/layouts/fragments/topbar.html b/appview/pages/templates/layouts/fragments/topbar.html
index 794a9131..5c4bf806 100644
--- a/appview/pages/templates/layouts/fragments/topbar.html
+++ b/appview/pages/templates/layouts/fragments/topbar.html
@@ -15,10 +15,10 @@
                     <div class="hidden md:block md:order-2 w-px h-6 bg-gray-200 dark:bg-gray-700 self-center"></div>
                     <div class="flex items-center order-4 md:order-5">{{ block "profileDropdown" . }} {{ end }}</div>
                 {{ else }}
-                    <a href="/login">login</a>
+                    <a href="/login">Login</a>
                     <span class="text-gray-500 dark:text-gray-400">or</span>
                     <a href="/signup" class="btn-create py-0 hover:no-underline hover:text-white flex items-center gap-2">
-                      join now {{ i "arrow-right" "size-4" }}
+                      Join now {{ i "arrow-right" "size-4" }}
                     </a>
                 {{ end }}
             </div>
@@ -29,16 +29,16 @@
 {{ define "newButton" }}
 <details class="relative inline-block text-left nav-dropdown">
     <summary class="btn py-0 cursor-pointer list-none flex items-center gap-2">
-      {{ i "plus" "w-4 h-4" }} <span class="hidden md:inline">new</span>
+      {{ i "plus" "w-4 h-4" }} <span class="hidden md:inline">New</span>
     </summary>
     <div class="absolute flex flex-col right-0 mt-3 p-4 rounded w-48 bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700">
         <a href="/repo/new" class="flex items-center gap-2">
           {{ i "book-plus" "w-4 h-4" }}
-          new repository
+          New repository
         </a>
         <a href="/strings/new" class="flex items-center gap-2">
           {{ i "line-squiggle" "w-4 h-4" }}
-          new string
+          New string
         </a>
     </div>
 </details>
@@ -52,7 +52,7 @@
       type="text"
       id="topbar-search-input"
       name="q"
-      placeholder="search..."
+      placeholder="Search..."
       autocomplete="off"
       class="flex-1 border-none bg-transparent p-0 focus:outline-none focus:[box-shadow:none] text-sm text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 peer"
       hx-get="/search/quick"
@@ -107,7 +107,7 @@
       type="text"
       id="mobile-search-input"
       name="q"
-      placeholder="search..."
+      placeholder="Search..."
       autocomplete="off"
       inputmode="search"
       class="flex-1 min-w-0 border-none bg-transparent p-0 focus:outline-none focus:[box-shadow:none] text-[16px] text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 peer"
@@ -158,7 +158,7 @@
 
         {{ $others := .Accounts | otherAccounts .Did }}
         {{ if $others }}
-          <div class="text-sm text-gray-500 dark:text-gray-400 px-3 py-1 pt-2">switch account</div>
+          <div class="text-sm text-gray-500 dark:text-gray-400 px-3 py-1 pt-2">Switch account</div>
           {{ range $others }}
             <button
                 type="button"
@@ -179,33 +179,33 @@
           </div>
 
           <div class="text-left flex-1 min-w-0 block truncate">
-            add account
+            Add account
           </div>
         </a>
 
         <div class="border-t border-gray-200 dark:border-gray-700">
             <a href="/{{ $handle }}" class="{{$linkStyle}}">
               {{ i "user" "size-4" }}
-              profile
+              Profile
             </a>
             <a href="/{{ $handle }}?tab=repos" class="{{$linkStyle}}">
               {{ i "book-marked" "size-4" }}
-              repositories
+              Repositories
             </a>
             <a href="/{{ $handle }}?tab=strings" class="{{$linkStyle}}">
               {{ i "line-squiggle" "size-4" }}
-              strings
+              Strings
             </a>
             <a href="/settings" class="{{$linkStyle}}">
               {{ i "cog" "size-4" }}
-              settings
+              Settings
             </a>
             <a href="#"
                hx-post="/logout"
                hx-swap="none"
                class="{{$linkStyle}} text-red-400 hover:text-red-400 hover:bg-red-100 dark:hover:bg-red-700/20 pb-2">
               {{ i "log-out" "size-4" }}
-              logout
+              Logout
             </a>
         </div>
     </div>
diff --git a/appview/pages/templates/layouts/profilebase.html b/appview/pages/templates/layouts/profilebase.html
index fbe814dd..2f199999 100644
--- a/appview/pages/templates/layouts/profilebase.html
+++ b/appview/pages/templates/layouts/profilebase.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ resolve .Card.UserDid }}{{ end }}
+{{ define "title" }}{{ resolve .Card.UserDid }} &middot; Tangled{{ end }}
 
 {{ define "extrameta" }}
     {{ $handle := resolve .Card.UserDid }}
@@ -89,7 +89,7 @@
            ">
           <span class="flex items-center justify-center">
             {{ i $icon "w-4 h-4 mr-2" }}
-            {{ $key }}
+            {{ if eq $key "repos" }}Repositories{{ else }}{{ $key | capitalize }}{{ end }}
             {{ if $meta }}
               <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-sm ml-1">{{ scaleFmt $meta }}</span>
             {{ end }}
@@ -104,8 +104,8 @@
 {{ define "punchcard" }}
   {{ $now := now }}
   <div>
-    <p class="px-2 pb-4 flex gap-2 text-sm font-bold dark:text-white">
-      PUNCHCARD
+    <p class="px-2 pb-4 flex gap-2 items-baseline text-base font-medium dark:text-white">
+      Punchcard
       <span class="font-mono font-normal text-sm text-gray-500 dark:text-gray-400 ">
         {{ .Total | int64 | commaFmt }} commits
       </span>
diff --git a/appview/pages/templates/layouts/repobase.html b/appview/pages/templates/layouts/repobase.html
index b6438d10..a41ddbd8 100644
--- a/appview/pages/templates/layouts/repobase.html
+++ b/appview/pages/templates/layouts/repobase.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}{{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 
 {{ define "content" }}
     <section id="repo-header" class="mb-2 py-2 px-4 dark:text-white">
@@ -45,7 +45,7 @@
                         >
                             <span class="flex items-center justify-center">
                                 {{ i $icon "w-4 h-4 mr-2" }}
-                                {{ $key }}
+                                {{ $key | capitalize }}
                                 {{ if $meta }}
                                   <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-sm ml-1">{{ scaleFmt $meta }}</span>
                                 {{ end }}
@@ -90,7 +90,7 @@
     {{ if .RepoInfo.Description }}
       {{ .RepoInfo.Description | description }}
     {{ else }}
-      <span class="italic">this repo has no description</span>
+      <span class="italic">This repository has no description</span>
     {{ end }}
 
     {{ with .RepoInfo.Website }}
@@ -124,7 +124,7 @@
           href="/{{ .RepoInfo.FullName }}/fork"
         >
           {{ i "git-fork" "w-4 h-4" }}
-          fork
+          Fork
           {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
         </a>
         <a
diff --git a/appview/pages/templates/legal/privacy.html b/appview/pages/templates/legal/privacy.html
index c8e0671c..14f88978 100644
--- a/appview/pages/templates/legal/privacy.html
+++ b/appview/pages/templates/legal/privacy.html
@@ -1,4 +1,4 @@
-{{ define "title" }}privacy policy{{ end }}
+{{ define "title" }}Privacy policy &middot; Tangled{{ end }}
 
 {{ define "content" }}
 <div class="grid grid-cols-10">
diff --git a/appview/pages/templates/legal/terms.html b/appview/pages/templates/legal/terms.html
index 5b80c870..f0772e15 100644
--- a/appview/pages/templates/legal/terms.html
+++ b/appview/pages/templates/legal/terms.html
@@ -1,4 +1,4 @@
-{{ define "title" }}terms of service{{ end }}
+{{ define "title" }}Terms of service &middot; Tangled{{ end }}
 
 {{ define "content" }}
 <div class="grid grid-cols-10">
diff --git a/appview/pages/templates/notifications/list.html b/appview/pages/templates/notifications/list.html
index 4e0ffd73..b63da28f 100644
--- a/appview/pages/templates/notifications/list.html
+++ b/appview/pages/templates/notifications/list.html
@@ -1,4 +1,4 @@
-{{ define "title" }}notifications{{ end }}
+{{ define "title" }}Notifications &middot; Tangled{{ end }}
 
 {{ define "content" }}
   <div class="px-6 py-4">
@@ -6,7 +6,7 @@
       <p class="text-xl font-bold dark:text-white">Notifications</p>
       <a href="/settings/notifications" class="flex items-center gap-2">
         {{ i "settings" "w-4 h-4" }}
-        preferences
+        Preferences
       </a>
     </div>
   </div>
@@ -43,7 +43,7 @@
               href = "/notifications?offset={{ $prev.Offset }}&limit={{ $prev.Limit }}"
           >
               {{ i "chevron-left" "w-4 h-4" }}
-              previous
+              Previous
           </a>
       {{ else }}
           <div></div>
@@ -57,7 +57,7 @@
               hx-boost="true"
               href = "/notifications?offset={{ $next.Offset }}&limit={{ $next.Limit }}"
           >
-              next
+              Next
               {{ i "chevron-right" "w-4 h-4" }}
           </a>
       {{ end }}
diff --git a/appview/pages/templates/repo/blob.html b/appview/pages/templates/repo/blob.html
index 6d62c6df..a3a5cdad 100644
--- a/appview/pages/templates/repo/blob.html
+++ b/appview/pages/templates/repo/blob.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .Path }} at {{ .Ref }} &middot; {{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}{{ .Path }} at {{ .Ref }} &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 
 {{ define "extrameta" }}
     {{ template "repo/fragments/meta" . }}
@@ -45,13 +45,13 @@
 
                 {{ if .BlobView.HasRawView }}
                   <span class="select-none px-1 md:px-2 [&:before]:content-['·']"></span>
-                  <a href="/{{ .RepoInfo.FullName }}/raw/{{ pathEscape .Ref }}/{{ .Path }}">view raw</a>
+                  <a href="/{{ .RepoInfo.FullName }}/raw/{{ pathEscape .Ref }}/{{ .Path }}">View raw</a>
                 {{ end }}
 
                 {{ if .BlobView.ShowToggle }}
                   <span class="select-none px-1 md:px-2 [&:before]:content-['·']"></span>
                   <a href="/{{ .RepoInfo.FullName }}/blob/{{ pathEscape .Ref }}/{{ .Path }}?code={{ .BlobView.ShowingRendered }}" hx-boost="true">
-                    view {{ if .BlobView.ShowingRendered }}code{{ else }}rendered{{ end }}
+                    View {{ if .BlobView.ShowingRendered }}code{{ else }}rendered{{ end }}
                   </a>
                 {{ end }}
 
diff --git a/appview/pages/templates/repo/branches.html b/appview/pages/templates/repo/branches.html
index adb85702..7d357ca0 100644
--- a/appview/pages/templates/repo/branches.html
+++ b/appview/pages/templates/repo/branches.html
@@ -1,5 +1,5 @@
 {{ define "title" }}
-    branches &middot; {{ .RepoInfo.FullName }}
+    Branches &middot; {{ .RepoInfo.FullName }} &middot; Tangled
 {{ end }}
 
 {{ define "extrameta" }}
@@ -11,7 +11,7 @@
 
 {{ define "repoContent" }}
 <section id="branches-table" class="overflow-x-auto">
-  <h2 class="font-bold text-sm mb-4 uppercase dark:text-white">
+  <h2 class="font-bold text-sm mb-4 dark:text-white">
       Branches
   </h2>
 
@@ -19,10 +19,10 @@
   <table class="w-full border-collapse hidden md:table">
     <thead>
       <tr>
-        <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Name</th>
-        <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Commit</th>
-        <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Message</th>
-        <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Date</th>
+        <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 font-bold">Name</th>
+        <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 font-bold">Commit</th>
+        <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 font-bold">Message</th>
+        <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 font-bold">Date</th>
       </tr>
     </thead>
     <tbody>
@@ -41,7 +41,7 @@
                 px-2 mx-1/2
                 inline-flex items-center
                 ">
-                default
+                Default
               </span>
             {{ end }}
           </a>
@@ -84,7 +84,7 @@
               px-2
               inline-flex items-center
               ">
-              default
+              Default
             </span>
           {{ end }}
         </a>
diff --git a/appview/pages/templates/repo/commit.html b/appview/pages/templates/repo/commit.html
index 4bc99de6..869b7953 100644
--- a/appview/pages/templates/repo/commit.html
+++ b/appview/pages/templates/repo/commit.html
@@ -1,6 +1,6 @@
 {{ define "title" }}
   {{ $messageParts := splitN .Diff.Commit.Message "\n\n" 2 }}
-  {{ index $messageParts 0 }} &middot; {{ .RepoInfo.FullName }}@{{ slice .Diff.Commit.This 0 7 }}
+  {{ index $messageParts 0 }} &middot; {{ .RepoInfo.FullName }}@{{ slice .Diff.Commit.This 0 7 }} &middot; Tangled
 {{ end }}
 
 {{ define "extrameta" }}
@@ -49,7 +49,7 @@
           <div class="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 rounded cursor-pointer">
               <div class="flex items-center gap-2">
                   {{ i "shield-check" "w-4 h-4" }}
-                  verified
+                  Verified
               </div>
           </div>
           <div class="absolute z-[9999] hidden group-hover:block bg-white dark:bg-gray-900 text-sm text-black dark:text-white rounded-md shadow-md p-4 w-80 top-full mt-2">
diff --git a/appview/pages/templates/repo/compare/compare.html b/appview/pages/templates/repo/compare/compare.html
index f52f9455..36af0e99 100644
--- a/appview/pages/templates/repo/compare/compare.html
+++ b/appview/pages/templates/repo/compare/compare.html
@@ -1,5 +1,5 @@
 {{ define "title" }}
-  comparing {{ .Base }} and {{ .Head }} on {{ .RepoInfo.FullName }}
+  Comparing {{ .Base }} and {{ .Head }} &middot; {{ .RepoInfo.FullName }} &middot; Tangled
 {{ end }}
 
 {{ define "repoContent" }}
diff --git a/appview/pages/templates/repo/compare/new.html b/appview/pages/templates/repo/compare/new.html
index 8270be63..d4d9ad6b 100644
--- a/appview/pages/templates/repo/compare/new.html
+++ b/appview/pages/templates/repo/compare/new.html
@@ -1,5 +1,5 @@
 {{ define "title" }}
-  compare refs on {{ .RepoInfo.FullName }}
+  Compare refs &middot; {{ .RepoInfo.FullName }} &middot; Tangled
 {{ end }}
 
 {{ define "repoContent" }}
diff --git a/appview/pages/templates/repo/empty.html b/appview/pages/templates/repo/empty.html
index 10a6aca5..d8c99884 100644
--- a/appview/pages/templates/repo/empty.html
+++ b/appview/pages/templates/repo/empty.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}{{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 
 {{ define "extrameta" }}
     {{ template "repo/fragments/meta" . }}
diff --git a/appview/pages/templates/repo/fork.html b/appview/pages/templates/repo/fork.html
index 3ad2df29..0f8ccecd 100644
--- a/appview/pages/templates/repo/fork.html
+++ b/appview/pages/templates/repo/fork.html
@@ -1,4 +1,4 @@
-{{ define "title" }}fork &middot; {{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}Fork &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 
 {{ define "content" }}
 <div class="grid grid-cols-12">
@@ -32,13 +32,13 @@
       <div class="flex gap-4 relative border-l border-gray-200 dark:border-gray-700 pl-6 pb-6">
         {{ template "fork/numberCircle" 1 }}
         <div class="flex-1">
-          <h2 class="text-lg font-semibold dark:text-white">Details</h2>
+          <h2 class="text-lg font-medium dark:text-white">Details</h2>
 
           <div class="space-y-4">
 
             {{/* Repository name */}}
             <div>
-              <label class="block text-sm font-bold uppercase dark:text-white mb-1">Repository name</label>
+              <label class="block text-sm font-bold dark:text-white mb-1">Repository name</label>
               <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-0 w-full">
                 <div class="shrink-0 hidden md:flex items-center px-2 py-2 gap-1 text-sm text-gray-700 dark:text-gray-300 md:border md:border-r-0 md:border-gray-300 md:dark:border-gray-600 md:rounded-l md:bg-gray-50 md:dark:bg-gray-700">
                   {{ template "user/fragments/picHandle" .LoggedInUser.Did }}
@@ -56,7 +56,7 @@
 
             {{/* Description */}}
             <div>
-              <label for="fork_description" class="block text-sm font-bold uppercase dark:text-white mb-1">Description</label>
+              <label for="fork_description" class="block text-sm font-bold dark:text-white mb-1">Description</label>
               <input
                 type="text"
                 id="fork_description"
@@ -78,7 +78,7 @@
       <div class="flex gap-4 relative border-l border-gray-200 dark:border-gray-700 pl-6 pb-6">
         {{ template "fork/numberCircle" 2 }}
         <div class="flex-1 flex flex-col gap-2">
-          <h2 class="text-lg font-semibold dark:text-white">Knot selection</h2>
+          <h2 class="text-lg font-medium dark:text-white">Knot selection</h2>
 
           <div class="space-y-4">
 
@@ -99,7 +99,7 @@
 
             {{/* Knot list */}}
             <div>
-              <label class="block text-sm font-bold uppercase dark:text-white mb-1">Select a knot</label>
+              <label class="block text-sm font-bold dark:text-white mb-1">Select a knot</label>
               <div class="w-full dark:bg-gray-800 dark:text-white dark:border-gray-700 space-y-2">
                 {{ range .Knots }}
                   <div class="flex items-center">
@@ -127,7 +127,7 @@
       <div class="py-8 flex justify-end border-l border-gray-200 dark:border-gray-700 pl-6">
         <button type="submit" class="btn-create flex items-center gap-2">
           {{ i "git-fork" "size-4" }}
-          fork repo
+          Fork repository
           <span id="spinner" class="group">
             {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
           </span>
diff --git a/appview/pages/templates/repo/forks.html b/appview/pages/templates/repo/forks.html
index c57e4baa..25a991b2 100644
--- a/appview/pages/templates/repo/forks.html
+++ b/appview/pages/templates/repo/forks.html
@@ -1,7 +1,7 @@
-{{ define "title" }}forks · {{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}Forks &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
   {{ define "repoContent" }}
   <div class="flex flex-col gap-4">
-    <h2 class="text-sm uppercase font-bold">Forked by</h2>
+    <h2 class="text-lg font-medium">Forked by</h2>
     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
       {{ range .Forks }}
         <div class="border border-gray-200 dark:border-gray-700 rounded p-4">
@@ -34,7 +34,7 @@
         <a href="/{{ $repoOwner }}/{{ .Name }}" class="truncate">{{ .Name }}</a>
       </div>
       <p class="text-sm text-gray-500 dark:text-gray-400">
-        forked {{ .Created | relTimeFmt }}
+        Forked {{ .Created | relTimeFmt }}
       </p>
     </div>
   </div>
diff --git a/appview/pages/templates/repo/fragments/artifactList.html b/appview/pages/templates/repo/fragments/artifactList.html
index 04a43b62..ec047857 100644
--- a/appview/pages/templates/repo/fragments/artifactList.html
+++ b/appview/pages/templates/repo/fragments/artifactList.html
@@ -4,7 +4,7 @@
   {{ $isPushAllowed := $root.RepoInfo.Roles.IsPushAllowed }}
   {{ $artifacts := index $root.ArtifactMap $tag.Tag.Hash }}
 
-  <h2 class="my-4 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">artifacts</h2>
+  <h2 class="my-4 text-sm text-left text-gray-700 dark:text-gray-300 font-bold">Artifacts</h2>
   <div class="flex flex-col rounded border border-gray-200 dark:border-gray-700">
     {{ range $artifact := $artifacts }}
       {{ $args := dict "LoggedInUser" $root.LoggedInUser "RepoInfo" $root.RepoInfo "Artifact" $artifact }}
@@ -62,7 +62,7 @@
         title="Upload artifact">
         {{ i "upload" "size-4 inline group-[.htmx-request]:hidden" }}
         {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
-        <span class="hidden md:inline">upload</span>
+        <span class="hidden md:inline">Upload</span>
       </button>
     </div>
   </form>
diff --git a/appview/pages/templates/repo/fragments/cloneDropdown.html b/appview/pages/templates/repo/fragments/cloneDropdown.html
index a5c2583b..d429a561 100644
--- a/appview/pages/templates/repo/fragments/cloneDropdown.html
+++ b/appview/pages/templates/repo/fragments/cloneDropdown.html
@@ -9,7 +9,7 @@
     popovertargetaction="toggle"
     class="btn-create cursor-pointer list-none flex items-center gap-2 px-4">
     {{ i "download" "w-4 h-4" }}
-    <span class="hidden md:inline">code</span>
+    <span class="hidden md:inline">Code</span>
   </button>
   <div
     popover
diff --git a/appview/pages/templates/repo/fragments/compareAllowPull.html b/appview/pages/templates/repo/fragments/compareAllowPull.html
index 9cdf9374..6dc6d9fd 100644
--- a/appview/pages/templates/repo/fragments/compareAllowPull.html
+++ b/appview/pages/templates/repo/fragments/compareAllowPull.html
@@ -18,7 +18,7 @@
                 class="btn flex items-center gap-2 no-underline hover:no-underline"
             >
                 {{ i "git-pull-request-create" "w-4 h-4" }}
-                create pull
+                Create pull
                 <span id="create-pull-spinner" class="group">
                     {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
                 </span>
diff --git a/appview/pages/templates/repo/fragments/compareForm.html b/appview/pages/templates/repo/fragments/compareForm.html
index 32c26dbd..f42a6c54 100644
--- a/appview/pages/templates/repo/fragments/compareForm.html
+++ b/appview/pages/templates/repo/fragments/compareForm.html
@@ -1,20 +1,20 @@
 {{ define "repo/fragments/compareForm" }}
 <div id="compare-select">
-  <h2 class="font-bold text-sm mb-2 uppercase dark:text-white">
+  <h2 class="font-bold text-sm mb-2 dark:text-white">
     Compare changes
   </h2>
   <p>Choose any two refs to compare.</p>
 
   <form id="compare-form" class="flex items-center gap-2 py-4">
     <div>
-      <span class="hidden md:inline">base:</span>
+      <span class="hidden md:inline">Base:</span>
       {{ block "dropdown" (list $ "base" $.Base) }} {{ end }}
     </div>
     <span class="flex-shrink-0">
       {{ i "arrow-left" "w-4 h-4" }}
     </span>
     <div>
-      <span class="hidden md:inline">compare:</span>
+      <span class="hidden md:inline">Compare:</span>
       {{ block "dropdown" (list $ "head" $.Head) }} {{ end }}
     </div>
     <button
@@ -27,7 +27,7 @@
         const head = document.getElementById('head-select').value;
         window.location.href = `/{{$.RepoInfo.FullName}}/compare/${encodeURIComponent(base)}...${encodeURIComponent(head)}`;
        ">
-      go
+      Go
     </button>
   </form>
 </div>
@@ -53,20 +53,20 @@
 {{ $name := index . 1 }}
 {{ $default := index . 2 }}
   <select name="{{$name}}" id="{{$name}}-select" class="p-1 border max-w-32 md:max-w-64 border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700">
-    <optgroup label="branches ({{ len $root.Branches }})" class="bold text-sm">
+    <optgroup label="Branches ({{ len $root.Branches }})" class="bold text-sm">
       {{ range $root.Branches }}
         <option value="{{ .Reference.Name }}" class="py-1" {{if eq .Reference.Name $default}}selected{{end}}>
           {{ .Reference.Name }}
         </option>
       {{ end }}
     </optgroup>
-      <optgroup label="tags ({{ len $root.Tags }})" class="bold text-sm">
+      <optgroup label="Tags ({{ len $root.Tags }})" class="bold text-sm">
         {{ range $root.Tags }}
           <option value="{{ .Reference.Name }}" class="py-1" {{if eq .Reference.Name $default}}selected{{end}}>
             {{ .Reference.Name }}
           </option>
         {{ else }}
-          <option class="py-1" disabled>no tags found</option>
+          <option class="py-1" disabled>No tags found</option>
         {{ end }}
       </optgroup>
   </select>
diff --git a/appview/pages/templates/repo/fragments/diff.html b/appview/pages/templates/repo/fragments/diff.html
index 1ee4dcdc..9315931b 100644
--- a/appview/pages/templates/repo/fragments/diff.html
+++ b/appview/pages/templates/repo/fragments/diff.html
@@ -44,7 +44,7 @@
       {{ if $root.IsInterdiff }}
         <!-- interdiff indicator -->
         <div class="flex items-center gap-2 before:content-['|'] before:text-gray-300 dark:before:text-gray-600 before:mr-2">
-          <span class="text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide">Interdiff</span>
+          <span class="text-xs text-gray-600 dark:text-gray-400 tracking-wide">Interdiff</span>
           <a
             href="/{{ $root.RepoInfo.FullName }}/pulls/{{ $root.Pull.PullId }}/round/{{ sub $root.ActiveRound 1 }}"
             class="px-2 py-0.5 bg-white dark:bg-gray-700 rounded font-mono text-xs hover:bg-gray-50 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600"
@@ -62,9 +62,9 @@
       {{ else if ne $root.ActiveRound nil }}
         <!-- diff round indicator -->
         <div class="flex items-center gap-2 before:content-['|'] before:text-gray-300 dark:before:text-gray-600 before:mr-2">
-          <span class="text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide">Diff</span>
+          <span class="text-xs text-gray-600 dark:text-gray-400 tracking-wide">Diff</span>
           <span class="px-2 py-0.5 bg-white dark:bg-gray-700 rounded font-mono text-xs border border-gray-300 dark:border-gray-600">
-            <span class="hidden md:inline">round </span>#{{ $root.ActiveRound }}
+            <span class="hidden md:inline">Round </span>#{{ $root.ActiveRound }}
           </span>
         </div>
       {{ end }}
@@ -195,7 +195,7 @@
             />
             <span class="peer-checked:hidden">{{ i "circle" "size-4" }}</span>
             <span class="hidden peer-checked:inline text-green-600 dark:text-green-400">{{ i "circle-check" "size-4" }}</span>
-            <span class="hidden md:inline">reviewed</span>
+            <span class="hidden md:inline">Reviewed</span>
           </label>
         </div>
       </summary>
@@ -236,11 +236,11 @@
     <input type="checkbox" id="collapseToggle" class="peer/collapse hidden" checked/>
     <span class="peer-checked/collapse:hidden inline-flex items-center gap-2">
       {{ i "unfold-vertical" "w-4 h-4" }}
-      <span class="hidden md:inline">expand all</span>
+      <span class="hidden md:inline">Expand all</span>
     </span>
     <span class="peer-checked/collapse:inline-flex hidden flex items-center gap-2">
       {{ i "fold-vertical" "w-4 h-4" }}
-      <span class="hidden md:inline">collapse all</span>
+      <span class="hidden md:inline">Collapse all</span>
     </span>
   </label>
   <script>
diff --git a/appview/pages/templates/repo/fragments/diffOpts.html b/appview/pages/templates/repo/fragments/diffOpts.html
index 650932d6..b7dfdf91 100644
--- a/appview/pages/templates/repo/fragments/diffOpts.html
+++ b/appview/pages/templates/repo/fragments/diffOpts.html
@@ -28,7 +28,7 @@
        class="group btn-group-item {{ if eq $active "unified" }}active{{ end }}">
       {{ i "square-split-vertical" "size-4 inline group-[.htmx-request]:hidden" }}
       {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
-      unified
+      Unified
     </button>
     <button
        {{ if $usePost }}
@@ -46,7 +46,7 @@
        class="group btn-group-item {{ if eq $active "split" }}active{{ end }}">
       {{ i "square-split-horizontal" "size-4 inline group-[.htmx-request]:hidden" }}
       {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
-      split
+      Split
     </button>
   </div>
 {{ end }}
diff --git a/appview/pages/templates/repo/fragments/editLabelPanel.html b/appview/pages/templates/repo/fragments/editLabelPanel.html
index 8807c4ab..735a0c9a 100644
--- a/appview/pages/templates/repo/fragments/editLabelPanel.html
+++ b/appview/pages/templates/repo/fragments/editLabelPanel.html
@@ -148,7 +148,7 @@
     })()"
     class="text-xs text-gray-500 dark:text-gray-400 hover:underline self-end inline-flex items-center gap-1">
     {{ i "user-round-plus" "size-3.5" }}
-    assign to me
+    Assign to me
   </button>
 {{ end }}
 
@@ -160,7 +160,7 @@
     {{ template "multipleInputField" (dict "def" $def "value" "" "key" $def.AtUri.String "prefix" $prefix) }}
   </div>
   <button type="button" onClick="this.insertAdjacentHTML('beforebegin', document.getElementById('tpl-{{ $def.Id }}{{ $groupSuffix }}').innerHTML)" class="w-full btn flex items-center gap-2">
-    {{ i "plus" "size-4" }} add
+    {{ i "plus" "size-4" }} Add
   </button>
 {{ end }}
 
@@ -254,14 +254,14 @@
       hx-swap="outerHTML"
       hx-target="#edit-label-panel"
       class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 group">
-      {{ i "x" "size-4" }} cancel
+      {{ i "x" "size-4" }} Cancel
     </button>
 
     <button
       id="save-btn"
       type="submit"
       class="btn w-1/2 flex items-center">
-      <span class="inline-flex gap-2 items-center">{{ i "check" "size-4" }} save</span>
+      <span class="inline-flex gap-2 items-center">{{ i "check" "size-4" }} Save</span>
       <span id="spinner" class="group">
         {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
       </span>
diff --git a/appview/pages/templates/repo/fragments/feedDropdown.html b/appview/pages/templates/repo/fragments/feedDropdown.html
index b0d3e12c..85f39d39 100644
--- a/appview/pages/templates/repo/fragments/feedDropdown.html
+++ b/appview/pages/templates/repo/fragments/feedDropdown.html
@@ -4,7 +4,7 @@
     popovertargetaction="toggle"
     class="btn text-sm cursor-pointer list-none flex items-center gap-2">
     {{ i "rss" "size-4" }}
-    <span class="hidden md:inline">atom</span>
+    <span class="hidden md:inline">Atom</span>
   </button>
 
   <div
diff --git a/appview/pages/templates/repo/fragments/labelSectionHeaderText.html b/appview/pages/templates/repo/fragments/labelSectionHeaderText.html
index 72cabe6e..fa2038ae 100644
--- a/appview/pages/templates/repo/fragments/labelSectionHeaderText.html
+++ b/appview/pages/templates/repo/fragments/labelSectionHeaderText.html
@@ -1,3 +1,3 @@
 {{ define "repo/fragments/labelSectionHeaderText" }}
-  <span class="text-xs uppercase tracking-wide text-gray-800 dark:text-gray-200">{{ . }}</span>
+  <span class="text-sm font-bold text-gray-500 dark:text-gray-400 capitalize">{{ . }}</span>
 {{ end }}
diff --git a/appview/pages/templates/repo/fragments/singleTag.html b/appview/pages/templates/repo/fragments/singleTag.html
index d39d0d4b..7ad5cb95 100644
--- a/appview/pages/templates/repo/fragments/singleTag.html
+++ b/appview/pages/templates/repo/fragments/singleTag.html
@@ -58,7 +58,7 @@
           {{ end }}
           {{ template "repo/fragments/artifactList" (list $root .) }}
         {{ else }}
-          <p class="italic text-gray-500 dark:text-gray-400">no message</p>
+          <p class="italic text-gray-500 dark:text-gray-400">No message</p>
         {{ end }}
       </div>
     </div>
diff --git a/appview/pages/templates/repo/index.html b/appview/pages/templates/repo/index.html
index 0f4dc34a..0ec1842b 100644
--- a/appview/pages/templates/repo/index.html
+++ b/appview/pages/templates/repo/index.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .RepoInfo.FullName }} at {{ .Ref }}{{ end }}
+{{ define "title" }}{{ .RepoInfo.FullName }} at {{ .Ref }} &middot; Tangled{{ end }}
 
 
 {{ define "extrameta" }}
@@ -71,7 +71,7 @@
           onchange="window.location.href = '/{{ .RepoInfo.FullName }}/tree/' + encodeURIComponent(this.value)"
           class="p-1 border max-w-32 border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700"
       >
-          <optgroup label="branches ({{len .Branches}})" class="bold text-sm">
+          <optgroup label="Branches ({{len .Branches}})" class="bold text-sm">
               {{ range .Branches }}
                   <option
                       value="{{ .Reference.Name }}"
@@ -84,7 +84,7 @@
                   </option>
               {{ end }}
           </optgroup>
-          <optgroup label="tags ({{len .Tags}})" class="bold text-sm">
+          <optgroup label="Tags ({{len .Tags}})" class="bold text-sm">
               {{ range .Tags }}
                   <option
                       value="{{ .Reference.Name }}"
@@ -96,7 +96,7 @@
                       {{ .Reference.Name }}
                   </option>
               {{ else }}
-                  <option class="py-1" disabled>no tags found</option>
+                  <option class="py-1" disabled>No tags found</option>
               {{ end }}
           </optgroup>
       </select>
@@ -166,7 +166,7 @@
 <div id="commit-log" class="md:col-span-1 px-2 pb-4">
   <div class="flex justify-between items-center">
     <a href="/{{ .RepoInfo.FullName }}/commits/{{ .Ref | urlquery }}" class="flex items-center gap-2 pb-2 cursor-pointer font-bold hover:text-gray-600 dark:hover:text-gray-300 hover:no-underline">
-      {{ i "logs" "w-4 h-4" }} commits
+      {{ i "logs" "w-4 h-4" }} Commits
       <span class="bg-gray-100 dark:bg-gray-700 font-normal rounded py-1/2 px-1 text-sm">{{ scaleFmt .TotalCommits }}</span>
     </a>
   </div>
@@ -286,7 +286,7 @@
   {{ if gt (len .BranchesTrunc) 0 }}
     <div id="branches" class="md:col-span-1 px-2 py-4 border-t border-gray-200 dark:border-gray-700">
       <a href="/{{ .RepoInfo.FullName }}/branches" class="flex items-center gap-2 pb-2 cursor-pointer font-bold hover:text-gray-600 dark:hover:text-gray-300 hover:no-underline">
-        {{ i "git-branch" "w-4 h-4" }} branches
+        {{ i "git-branch" "w-4 h-4" }} Branches
         <span class="bg-gray-100 dark:bg-gray-700 font-normal rounded py-1/2 px-1 text-sm">{{ scaleFmt (len .Branches) }}</span>
       </a>
       <div class="flex flex-col gap-1">
@@ -303,14 +303,14 @@
             {{ end }}
             {{ if .IsDefault }}
             <span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·'] shrink-0"></span>
-            <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-xs font-mono shrink-0">default</span>
+            <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-xs font-mono shrink-0">Default</span>
             {{ end }}
           </div>
           {{ if ne $.Ref .Reference.Name }}
             <a href="/{{ $.RepoInfo.FullName }}/compare/{{ $.Ref | urlquery }}...{{ .Reference.Name | urlquery }}"
               class="text-xs flex gap-2 items-center shrink-0 ml-2"
               title="Compare branches or tags">
-              {{ i "git-compare" "w-3 h-3" }} compare
+              {{ i "git-compare" "w-3 h-3" }} Compare
             </a>
           {{ end }}
         </div>
@@ -325,7 +325,7 @@
     <div id="tags" class="md:col-span-1 px-2 py-4 border-t border-gray-200 dark:border-gray-700">
       <div class="flex justify-between items-center">
         <a href="/{{ .RepoInfo.FullName }}/tags" class="flex items-center gap-2 pb-2 cursor-pointer font-bold hover:text-gray-600 dark:hover:text-gray-300 hover:no-underline">
-          {{ i "tags" "w-4 h-4" }} tags
+          {{ i "tags" "w-4 h-4" }} Tags
           <span class="bg-gray-100 dark:bg-gray-700 font-normal rounded py-1/2 px-1 text-sm">{{ scaleFmt (len .Tags) }}</span>
         </a>
       </div>
@@ -345,7 +345,7 @@
             {{ end }}
             {{ if eq $idx 0 }}
               {{ with .Tag }}<span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span>{{ end }}
-              <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-xs font-mono">latest</span>
+              <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-xs font-mono">Latest</span>
             {{ end }}
           </div>
         </div>
diff --git a/appview/pages/templates/repo/issues/fragments/issueListing.html b/appview/pages/templates/repo/issues/fragments/issueListing.html
index 6ccec755..98285978 100644
--- a/appview/pages/templates/repo/issues/fragments/issueListing.html
+++ b/appview/pages/templates/repo/issues/fragments/issueListing.html
@@ -14,11 +14,11 @@
       <div class="text-sm text-gray-500 dark:text-gray-400 flex flex-wrap items-center gap-1">
         {{ $bgColor := "bg-gray-800 dark:bg-gray-700" }}
         {{ $icon := "ban" }}
-        {{ $state := "closed" }}
+        {{ $state := "Closed" }}
         {{ if .Open }}
             {{ $bgColor = "bg-green-600 dark:bg-green-700" }}
             {{ $icon = "circle-dot" }}
-            {{ $state = "open" }}
+            {{ $state = "Open" }}
         {{ end }}
 
         <span class="inline-flex items-center rounded px-2 py-[5px] {{ $bgColor }}">
diff --git a/appview/pages/templates/repo/issues/fragments/newComment.html b/appview/pages/templates/repo/issues/fragments/newComment.html
index 0641c134..65f806a8 100644
--- a/appview/pages/templates/repo/issues/fragments/newComment.html
+++ b/appview/pages/templates/repo/issues/fragments/newComment.html
@@ -34,7 +34,7 @@
         >
             {{ i "message-square-plus" "w-4 h-4 inline group-[.htmx-request]/form:hidden" }}
             {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]/form:inline" }}
-            comment
+            Comment
         </button>
 
         {{ $isIssueAuthor := and .LoggedInUser (eq .LoggedInUser.Did .Issue.Did) }}
@@ -49,7 +49,7 @@
         >
             {{ i "ban" "w-4 h-4 inline group-[.htmx-request]/close:hidden" }}
             {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]/close:inline" }}
-            <span id="close-button-text">close</span>
+            <span id="close-button-text">Close</span>
         </button>
         <div
             id="close-issue"
@@ -70,7 +70,7 @@
         >
             {{ i "refresh-ccw-dot" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
             {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-            reopen
+            Reopen
         </button>
         {{ end }}
 
@@ -93,9 +93,9 @@
 
             if (closeButtonText) {
                 if (textarea.value.trim() !== '') {
-                  closeButtonText.innerHTML = `close with comment`;
+                  closeButtonText.innerHTML = `Close with comment`;
                 } else {
-                  closeButtonText.innerHTML = `close`;
+                  closeButtonText.innerHTML = `Close`;
                 }
             }
         }
@@ -109,10 +109,10 @@
   {{ else }}
     <div class="bg-amber-50 dark:bg-amber-900 border border-amber-500 rounded drop-shadow-sm p-6 relative flex gap-2 items-center">
       <a href="/signup" class="btn-create py-0 hover:no-underline hover:text-white flex items-center gap-2">
-        sign up
+        Sign up
       </a>
       <span class="text-gray-500 dark:text-gray-400">or</span>
-      <a href="/login" class="underline">login</a>
+      <a href="/login" class="underline">Login</a>
       to add to the discussion
     </div>
   {{ end }}
diff --git a/appview/pages/templates/repo/issues/fragments/putIssue.html b/appview/pages/templates/repo/issues/fragments/putIssue.html
index bf06a6e2..b91aa146 100644
--- a/appview/pages/templates/repo/issues/fragments/putIssue.html
+++ b/appview/pages/templates/repo/issues/fragments/putIssue.html
@@ -11,11 +11,11 @@
   class="group">
   <div class="flex flex-col gap-2">
     <div>
-      <label for="title">title</label>
+      <label for="title">Title</label>
       <input type="text" name="title" id="title" class="w-full" value="{{ if .Issue }}{{ .Issue.Title }}{{ end }}" />
     </div>
     <div>
-      <label for="body">body</label>
+      <label for="body">Body</label>
       <textarea
         name="body"
         id="body"
@@ -37,7 +37,7 @@
           {{ end }}
           >
           {{ i "x" "w-4 h-4" }}
-          cancel
+          Cancel
         </a>
         <button type="submit" class="btn-create flex items-center gap-2">
           {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
@@ -46,7 +46,7 @@
           {{ else }}
             {{ i "circle-plus" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
           {{ end }}
-          {{ .Action }}
+          {{ .Action | capitalize }}
         </button>
       </div>
     </div>
diff --git a/appview/pages/templates/repo/issues/issue.html b/appview/pages/templates/repo/issues/issue.html
index 50487544..12039bf6 100644
--- a/appview/pages/templates/repo/issues/issue.html
+++ b/appview/pages/templates/repo/issues/issue.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .Issue.Title }} &middot; issue #{{ .Issue.IssueId }} &middot; {{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}{{ .Issue.Title }} &middot; Issue #{{ .Issue.IssueId }} &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 
 
 {{ define "extrameta" }}
@@ -64,7 +64,7 @@
   <div class="inline-flex items-center gap-2">
     <span class="inline-flex items-center rounded px-2 py-[5px] {{ $bgColor }}">
         {{ i $icon "w-3 h-3 mr-1.5 text-white dark:text-white" }}
-        <span class="text-white dark:text-white text-sm">{{ .Issue.State }}</span>
+        <span class="text-white dark:text-white text-sm">{{ if eq .Issue.State "open" }}Open{{ else }}Closed{{ end }}</span>
     </span>
 
     <span class="text-gray-500 dark:text-gray-400 text-sm flex flex-wrap items-center gap-1">
diff --git a/appview/pages/templates/repo/issues/issues.html b/appview/pages/templates/repo/issues/issues.html
index c8adf05e..1281863d 100644
--- a/appview/pages/templates/repo/issues/issues.html
+++ b/appview/pages/templates/repo/issues/issues.html
@@ -1,7 +1,7 @@
-{{ define "title" }}issues &middot; {{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}Issues &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 
 {{ define "extrameta" }}
-    {{ $title := "issues"}}
+    {{ $title := "Issues"}}
     {{ $url := printf "https://tangled.org/%s/issues" .RepoInfo.FullName }}
 
     {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo "Title" $title "Url" $url) }}
@@ -13,13 +13,13 @@
   {{ $open :=
      (dict
        "Key" "open"
-       "Value" "open"
+       "Value" "Open"
        "Icon" "circle-dot"
        "Meta" (scaleFmt .RepoInfo.Stats.IssueCount.Open)) }}
   {{ $closed :=
      (dict
        "Key" "closed"
-       "Value" "closed"
+       "Value" "Closed"
        "Icon" "ban"
        "Meta" (scaleFmt .RepoInfo.Stats.IssueCount.Closed)) }}
   {{ $values := list $open $closed }}
@@ -33,7 +33,7 @@
           type="text"
           name="q"
           value="{{ .FilterQuery }}"
-          placeholder="search issues..."
+          placeholder="Search issues..."
         >
         <a
           {{ if $active }}href="?q=state:{{ $active }}"{{ else }}href="?"{{ end }}
@@ -57,7 +57,7 @@
       class="col-start-3 btn-create text-sm flex items-center justify-center gap-2 no-underline hover:no-underline hover:text-white"
     >
       {{ i "circle-plus" "w-4 h-4" }}
-      <span>new</span>
+      <span>New</span>
     </a>
   </div>
   <div class="error" id="issues"></div>
diff --git a/appview/pages/templates/repo/issues/new.html b/appview/pages/templates/repo/issues/new.html
index e7be2a86..70b5178c 100644
--- a/appview/pages/templates/repo/issues/new.html
+++ b/appview/pages/templates/repo/issues/new.html
@@ -1,4 +1,4 @@
-{{ define "title" }}new issue &middot; {{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}New issue &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 
 {{ define "repoContent" }}
   {{ template "repo/issues/fragments/putIssue" . }}
diff --git a/appview/pages/templates/repo/knotUnreachable.html b/appview/pages/templates/repo/knotUnreachable.html
index 13bea11d..7b91338f 100644
--- a/appview/pages/templates/repo/knotUnreachable.html
+++ b/appview/pages/templates/repo/knotUnreachable.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}{{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 {{ define "extrameta" }}
     {{ template "repo/fragments/meta" . }}
     {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo) }}
diff --git a/appview/pages/templates/repo/log.html b/appview/pages/templates/repo/log.html
index 37473b46..56c2eca8 100644
--- a/appview/pages/templates/repo/log.html
+++ b/appview/pages/templates/repo/log.html
@@ -1,7 +1,7 @@
-{{ define "title" }}commits &middot; {{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}Commits &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 
 {{ define "extrameta" }}
-    {{ $title := printf "commits &middot; %s" .RepoInfo.FullName }}
+    {{ $title := printf "Commits &middot; %s" .RepoInfo.FullName }}
     {{ $url := printf "https://tangled.org/%s/commits" .RepoInfo.FullName }}
 
     {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo "Title" $title "Url" $url) }}
@@ -9,18 +9,18 @@
 
 {{ define "repoContent" }}
 <section id="commit-table" class="overflow-x-auto">
-    <h2 class="font-bold text-sm mb-4 uppercase dark:text-white">
-       commits
+    <h2 class="font-bold text-sm mb-4 dark:text-white">
+       Commits
     </h2>
 
     <!-- desktop view (hidden on small screens) -->
     <div class="hidden md:flex md:flex-col divide-y divide-gray-200 dark:divide-gray-700">
       {{ $grid := "grid grid-cols-14 gap-4" }}
       <div class="{{ $grid }}">
-        <div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-3">Author</div>
-        <div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-3">Commit</div>
-        <div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-6">Message</div>
-        <div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-2 justify-self-end">Date</div>
+        <div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 font-bold col-span-3">Author</div>
+        <div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 font-bold col-span-3">Commit</div>
+        <div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 font-bold col-span-6">Message</div>
+        <div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 font-bold col-span-2 justify-self-end">Date</div>
       </div>
       {{ range $index, $commit := .Commits }}
         {{ $messageParts := splitN $commit.Message "\n\n" 2 }}
@@ -202,7 +202,7 @@
 {{ define "repoAfter" }}
   {{ $commits_len := len .Commits }}
   <div class="flex justify-end mt-4 gap-2">
-      {{ if gt .Page 1 }}<a class="btn flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:hover:bg-gray-700" hx-boost="true" onclick="window.location.href = window.location.pathname + '?page={{ sub .Page 1 }}'">{{ i "chevron-left" "w-4 h-4" }} previous</a>{{ else }}<div></div>{{ end }}
-      {{ if eq $commits_len 60 }}<a class="btn flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:hover:bg-gray-700" hx-boost="true" onclick="window.location.href = window.location.pathname + '?page={{ add .Page 1 }}'">next {{ i "chevron-right" "w-4 h-4" }}</a>{{ end }}
+      {{ if gt .Page 1 }}<a class="btn flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:hover:bg-gray-700" hx-boost="true" onclick="window.location.href = window.location.pathname + '?page={{ sub .Page 1 }}'">{{ i "chevron-left" "w-4 h-4" }} Previous</a>{{ else }}<div></div>{{ end }}
+      {{ if eq $commits_len 60 }}<a class="btn flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:hover:bg-gray-700" hx-boost="true" onclick="window.location.href = window.location.pathname + '?page={{ add .Page 1 }}'">Next {{ i "chevron-right" "w-4 h-4" }}</a>{{ end }}
   </div>
 {{ end }}
diff --git a/appview/pages/templates/repo/needsUpgrade.html b/appview/pages/templates/repo/needsUpgrade.html
index c1679598..b068a476 100644
--- a/appview/pages/templates/repo/needsUpgrade.html
+++ b/appview/pages/templates/repo/needsUpgrade.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}{{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 {{ define "extrameta" }}
     {{ template "repo/fragments/meta" . }}
     {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo) }}
@@ -7,7 +7,7 @@
   <main>
     <div class="relative w-full h-96 flex items-center justify-center">
       <div class="w-full h-full grid grid-cols-1 md:grid-cols-2 gap-4 md:divide-x divide-gray-300 dark:divide-gray-600 text-gray-300 dark:text-gray-600">
-        <!-- mimic the repo view here, placeholders are LLM generated -->
+        <!-- mimic the repository view here, placeholders are LLM generated -->
         <div id="file-list" class="flex flex-col gap-2 col-span-1 w-full h-full p-4 items-start justify-start text-left">
           {{ $files :=
             (list
diff --git a/appview/pages/templates/repo/new.html b/appview/pages/templates/repo/new.html
index 602d3f75..f363c6a1 100644
--- a/appview/pages/templates/repo/new.html
+++ b/appview/pages/templates/repo/new.html
@@ -1,4 +1,4 @@
-{{ define "title" }}new repo{{ end }}
+{{ define "title" }}New repository &middot; Tangled{{ end }}
 
 {{ define "content" }}
 <div class="grid grid-cols-12">
@@ -27,7 +27,7 @@
     <div class="mt-8 flex justify-end">
       <button type="submit" class="btn-create flex items-center gap-2">
         {{ i "book-plus" "w-4 h-4" }}
-        create repo
+        Create repository
         <span id="spinner" class="group">
           {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
         </span>
@@ -46,7 +46,7 @@
 
     <!-- Content column -->
     <div class="flex-1 pb-12">
-      <h2 class="text-lg font-semibold dark:text-white">General</h2>
+      <h2 class="text-lg font-medium dark:text-white">General</h2>
       <div class="text-sm text-gray-500 dark:text-gray-400 mb-4">Basic repository information.</div>
 
       <div class="space-y-2">
@@ -64,7 +64,7 @@
     </div>
 
     <div class="flex-1">
-      <h2 class="text-lg font-semibold dark:text-white">Configuration</h2>
+      <h2 class="text-lg font-medium dark:text-white">Configuration</h2>
       <div class="text-sm text-gray-500 dark:text-gray-400 mb-4">Repository settings and hosting.</div>
 
       <div class="space-y-2">
@@ -78,7 +78,7 @@
 {{ define "name" }}
   <!-- Repository Name with Owner -->
   <div>
-    <label class="block text-sm font-bold uppercase dark:text-white mb-1">
+    <label class="block text-sm font-bold dark:text-white mb-1">
       Repository name
     </label>
     <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-0 w-full">
@@ -103,7 +103,7 @@
 {{ define "description" }}
   <!-- Description -->
   <div>
-    <label for="description" class="block text-sm font-bold uppercase dark:text-white mb-1">
+    <label for="description" class="block text-sm font-bold dark:text-white mb-1">
       Description
     </label>
     <input
@@ -123,7 +123,7 @@
 {{ define "defaultBranch" }}
   <!-- Default Branch -->
   <div>
-    <label for="branch" class="block text-sm font-bold uppercase dark:text-white mb-1">
+    <label for="branch" class="block text-sm font-bold dark:text-white mb-1">
       Default branch
     </label>
     <input
@@ -143,7 +143,7 @@
 {{ define "knot" }}
   <!-- Knot Selection -->
   <div>
-    <label class="block text-sm font-bold uppercase dark:text-white mb-1">
+    <label class="block text-sm font-bold dark:text-white mb-1">
       Select a knot
     </label>
     <div class="w-full space-y-2">
@@ -161,7 +161,7 @@
           <label for="domain-{{ . }}" class="dark:text-white lowercase">{{ . }}</label>
         </div>
       {{ else }}
-      <p class="dark:text-white">no knots available.</p>
+      <p class="dark:text-white">No knots available.</p>
       {{ end }}
     </div>
     <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
diff --git a/appview/pages/templates/repo/pipelines/pipelines.html b/appview/pages/templates/repo/pipelines/pipelines.html
index 0a51048f..a5df3fcb 100644
--- a/appview/pages/templates/repo/pipelines/pipelines.html
+++ b/appview/pages/templates/repo/pipelines/pipelines.html
@@ -1,7 +1,7 @@
-{{ define "title" }}pipelines &middot; {{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}Pipelines &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 
 {{ define "extrameta" }}
-    {{ $title := "pipelines"}}
+    {{ $title := "Pipelines"}}
     {{ $url := printf "https://tangled.org/%s/pipelines" .RepoInfo.FullName }}
     {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo "Title" $title "Url" $url) }}
 {{ end }}
@@ -12,19 +12,19 @@
   {{ $all :=
      (dict
        "Key" "all"
-       "Value" "all"
+       "Value" "All"
        "Icon" "package"
        "Meta" "") }}
   {{ $push :=
      (dict
        "Key" "push"
-       "Value" "push"
+       "Value" "Push"
        "Icon" "git-commit-horizontal"
        "Meta" "") }}
   {{ $pr :=
      (dict
        "Key" "pull_request"
-       "Value" "pull request"
+       "Value" "Pull request"
        "Icon" "git-pull-request"
        "Meta" "") }}
   {{ $values := list $all $push $pr }}
diff --git a/appview/pages/templates/repo/pipelines/workflow.html b/appview/pages/templates/repo/pipelines/workflow.html
index a864a50f..4d6895e5 100644
--- a/appview/pages/templates/repo/pipelines/workflow.html
+++ b/appview/pages/templates/repo/pipelines/workflow.html
@@ -1,7 +1,7 @@
-{{ define "title" }} {{ .Workflow }} &middot; pipeline {{ .Pipeline.Id }} &middot; {{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}{{ .Workflow }} &middot; Pipeline {{ .Pipeline.Id }} &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 
 {{ define "extrameta" }}
-    {{ $title := "pipelines"}}
+    {{ $title := "Pipelines"}}
     {{ $url := printf "https://tangled.org/%s/pipelines" .RepoInfo.FullName }}
     {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo "Title" $title "Url" $url) }}
 {{ end }}
diff --git a/appview/pages/templates/repo/pulls/fragments/pullActions.html b/appview/pages/templates/repo/pulls/fragments/pullActions.html
index 610dc121..a8d6f4c4 100644
--- a/appview/pages/templates/repo/pulls/fragments/pullActions.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullActions.html
@@ -28,7 +28,7 @@
       class="btn-flat p-2 flex items-center gap-2 no-underline hover:no-underline group">
         {{ i "message-square-plus" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
         {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-        comment
+        Comment
     </button>
     {{ if .BranchDeleteStatus }}
       <button 
@@ -38,7 +38,7 @@
         class="btn-flat p-2 flex items-center gap-2 no-underline hover:no-underline group text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
           {{ i "git-branch" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
           {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-          delete branch
+          Delete branch
       </button>
     {{ end }}
     {{ if and $isPushAllowed $isOpen $isLastRound }}
@@ -51,7 +51,7 @@
       >
         {{ i "git-merge" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
         {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-        merge{{if $stackCount}} {{$stackCount}}{{end}}
+        Merge{{if $stackCount}} {{$stackCount}}{{end}}
       </button>
     {{ end }}
 
@@ -76,7 +76,7 @@
           >
           {{ i "rotate-ccw" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
           {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-          resubmit
+          Resubmit
       </button>
     {{ end }}
 
@@ -87,7 +87,7 @@
       class="btn-flat p-2 flex items-center gap-2 group">
         {{ i "ban" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
         {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-        close
+        Close
     </button>
     {{ end }}
 
@@ -98,7 +98,7 @@
       class="btn-flat p-2 flex items-center gap-2 group">
         {{ i "refresh-ccw-dot" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
         {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-        reopen
+        Reopen
     </button>
     {{ end }}
   </div>
diff --git a/appview/pages/templates/repo/pulls/fragments/pullCompareBranches.html b/appview/pages/templates/repo/pulls/fragments/pullCompareBranches.html
index 9410aaac..9cea7e58 100644
--- a/appview/pages/templates/repo/pulls/fragments/pullCompareBranches.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullCompareBranches.html
@@ -33,8 +33,8 @@
                     class="py-1"
                 >
                     {{ .Reference.Name }}
-                    {{ if $isRecent }}(new){{ end }}
-                    {{ if and $.TargetBranch (eq .Reference.Name $.TargetBranch) }}(target){{ end }}
+                    {{ if $isRecent }}(New){{ end }}
+                    {{ if and $.TargetBranch (eq .Reference.Name $.TargetBranch) }}(Target){{ end }}
                 </option>
             {{ end }}
         </select>
diff --git a/appview/pages/templates/repo/pulls/fragments/pullCompareForksBranches.html b/appview/pages/templates/repo/pulls/fragments/pullCompareForksBranches.html
index 0b6582d9..c135731e 100644
--- a/appview/pages/templates/repo/pulls/fragments/pullCompareForksBranches.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullCompareForksBranches.html
@@ -30,7 +30,7 @@
                     class="py-1"
                 >
                     {{ .Reference.Name }}
-                    {{ if $isRecent }}(new){{ end }}
+                    {{ if $isRecent }}(New){{ end }}
                 </option>
             {{ end }}
         </select>
diff --git a/appview/pages/templates/repo/pulls/fragments/pullComposeHost.html b/appview/pages/templates/repo/pulls/fragments/pullComposeHost.html
index 05bc37bc..a753eca0 100644
--- a/appview/pages/templates/repo/pulls/fragments/pullComposeHost.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullComposeHost.html
@@ -26,7 +26,7 @@
                     <div class="flex-shrink-0 relative z-10">
                         {{ template "pullComposeSectionNumber" 1 }}
                     </div>
-                    <h3 class="uppercase text-sm tracking-wide font-bold my-0 dark:text-white">source</h3>
+                    <h3 class="text-sm tracking-wide font-bold my-0 dark:text-white">Source</h3>
                 </div>
                 <div class="ml-10 flex flex-col gap-3">
                     {{ template "repo/pulls/fragments/pullStepSource" . }}
@@ -43,7 +43,7 @@
                     <div class="flex-shrink-0 relative z-10">
                         {{ template "pullComposeSectionNumber" 2 }}
                     </div>
-                    <h3 class="uppercase text-sm tracking-wide font-bold my-0 dark:text-white">review</h3>
+                    <h3 class="text-sm tracking-wide font-bold my-0 dark:text-white">Review</h3>
                 </div>
                 <div class="ml-10 flex flex-col gap-3">
                     {{ template "repo/pulls/fragments/pullStepReview" . }}
@@ -57,7 +57,7 @@
                         <div class="flex-shrink-0 relative z-10">
                             {{ template "pullComposeSectionNumber" 3 }}
                         </div>
-                        <h3 class="uppercase text-sm tracking-wide font-bold my-0 dark:text-white">details</h3>
+                        <h3 class="text-sm tracking-wide font-bold my-0 dark:text-white">Details</h3>
                     </div>
                     <div class="ml-10 flex flex-col gap-3">
                         {{ template "repo/pulls/fragments/pullStepDetails" . }}
diff --git a/appview/pages/templates/repo/pulls/fragments/pullNewComment.html b/appview/pages/templates/repo/pulls/fragments/pullNewComment.html
index 4e93c95d..80142c11 100644
--- a/appview/pages/templates/repo/pulls/fragments/pullNewComment.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullNewComment.html
@@ -41,7 +41,7 @@
     hx-target="#actions-{{.RoundNumber}}"
   >
     {{ i "x" "w-4 h-4" }}
-    <span>cancel</span>
+    <span>Cancel</span>
   </button>
 {{ end }}
 
@@ -51,6 +51,6 @@
     class="btn-create-flat flex items-center gap-2">
       {{ i "reply" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
       {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-      reply
+      Reply
   </button>
 {{ end }}
diff --git a/appview/pages/templates/repo/pulls/fragments/pullResubmit.html b/appview/pages/templates/repo/pulls/fragments/pullResubmit.html
index e0ee0685..3b885a02 100644
--- a/appview/pages/templates/repo/pulls/fragments/pullResubmit.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullResubmit.html
@@ -5,7 +5,7 @@
 
       <div class="flex items-center gap-2 text-amber-500 dark:text-amber-50">
         {{ i "pencil" "w-4 h-4" }}
-        <span class="font-medium">resubmit your patch</span>
+        <span class="font-medium">Resubmit your patch</span>
       </div>
 
       <div class="mt-2 text-sm text-gray-700 dark:text-gray-200">
@@ -37,7 +37,7 @@
               {{ end }}
           >
             {{ i "rotate-ccw" "w-4 h-4" }}
-            <span>resubmit</span>
+            <span>Resubmit</span>
             <span id="resubmit-spinner" class="group">
               {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
             </span>
@@ -51,7 +51,7 @@
             hx-indicator="#cancel-resubmit-spinner"
           >
             {{ i "x" "w-4 h-4" }}
-            <span>cancel</span>
+            <span>Cancel</span>
             <span id="cancel-resubmit-spinner" class="group">
               {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
             </span>
diff --git a/appview/pages/templates/repo/pulls/fragments/pullStack.html b/appview/pages/templates/repo/pulls/fragments/pullStack.html
index 9f344bcb..786d9947 100644
--- a/appview/pages/templates/repo/pulls/fragments/pullStack.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullStack.html
@@ -8,7 +8,7 @@
         <span class="hidden group-open:flex">
           {{ i "chevrons-down-up" "w-4 h-4" }}
         </span>
-        STACK
+        Stack
         <span class="bg-gray-200 dark:bg-gray-700 font-normal rounded py-1/2 px-1 text-sm">{{ len .Stack }}</span>
       </span>
     </summary>
diff --git a/appview/pages/templates/repo/pulls/fragments/pullState.html b/appview/pages/templates/repo/pulls/fragments/pullState.html
index 96c72e4c..4e5dcc6e 100644
--- a/appview/pages/templates/repo/pulls/fragments/pullState.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullState.html
@@ -15,7 +15,7 @@
 
   <span class="inline-flex items-center rounded px-2 py-[5px] {{ $bgColor }} text-sm">
       {{ i $icon "w-3 h-3 mr-1.5 text-white" }}
-      <span class="text-white">{{ .String }}</span>
+      <span class="text-white">{{ if .IsOpen }}Open{{ else if .IsMerged }}Merged{{ else if .IsAbandoned }}Abandoned{{ else }}Closed{{ end }}</span>
   </span>
 {{ end }}
 
diff --git a/appview/pages/templates/repo/pulls/fragments/pullStepDetails.html b/appview/pages/templates/repo/pulls/fragments/pullStepDetails.html
index 61c63ef7..1cd26d99 100644
--- a/appview/pages/templates/repo/pulls/fragments/pullStepDetails.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullStepDetails.html
@@ -24,7 +24,7 @@
     {{ $root := .Root }}
     {{ $previewUrl := .PreviewUrl }}
     <div class="flex flex-col gap-1">
-        <label for="title" class="text-xs uppercase tracking-wide text-gray-800 dark:text-gray-200">title</label>
+        <label for="title" class="text-xs tracking-wide text-gray-800 dark:text-gray-200">Title</label>
         <input
             type="text"
             name="title"
diff --git a/appview/pages/templates/repo/pulls/fragments/pullStepReview.html b/appview/pages/templates/repo/pulls/fragments/pullStepReview.html
index 11fc78bc..1a286851 100644
--- a/appview/pages/templates/repo/pulls/fragments/pullStepReview.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullStepReview.html
@@ -139,7 +139,7 @@
                             <div class="flex flex-col md:flex-row gap-6">
                                 <div class="flex-1 min-w-0 flex flex-col gap-3">
                                     <div class="flex flex-col gap-1">
-                                        <label class="text-xs uppercase tracking-wide text-gray-800 dark:text-gray-200">title</label>
+                                        <label class="text-xs tracking-wide text-gray-800 dark:text-gray-200">Title</label>
                                         <input
                                             type="text"
                                             name="{{ $titleName }}"
diff --git a/appview/pages/templates/repo/pulls/fragments/pullStepSource.html b/appview/pages/templates/repo/pulls/fragments/pullStepSource.html
index 36c1cae1..116c34f8 100644
--- a/appview/pages/templates/repo/pulls/fragments/pullStepSource.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullStepSource.html
@@ -85,7 +85,7 @@
                     {{ if $preset }}selected{{ end }}
                     {{ if $isSource }}disabled{{ end }}>
                     {{ .Reference.Name }}
-                    {{ if $isSource }}(source){{ end }}
+                    {{ if $isSource }}(Source){{ end }}
                 </option>
             {{ end }}
         </select>
diff --git a/appview/pages/templates/repo/pulls/fragments/pullVouchNudge.html b/appview/pages/templates/repo/pulls/fragments/pullVouchNudge.html
index 9b56755d..18f0c780 100644
--- a/appview/pages/templates/repo/pulls/fragments/pullVouchNudge.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullVouchNudge.html
@@ -27,7 +27,7 @@
       title="Skip suggestion"
       class="group shrink-0 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 p-0.5"
     >
-      <span class="group-[.htmx-request]:hidden">dismiss</span>
+      <span class="group-[.htmx-request]:hidden">Dismiss</span>
       {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:block" }}
     </button>
     <div class="shrink-0">
diff --git a/appview/pages/templates/repo/pulls/fragments/summarizedPullHeader.html b/appview/pages/templates/repo/pulls/fragments/summarizedPullHeader.html
index e891c361..daf67219 100644
--- a/appview/pages/templates/repo/pulls/fragments/summarizedPullHeader.html
+++ b/appview/pages/templates/repo/pulls/fragments/summarizedPullHeader.html
@@ -24,12 +24,12 @@
           <div class="inline-flex items-center gap-1">
             {{ i "message-square" "w-3 h-3 md:hidden" }}
             {{ $commentCount }}
-            <span class="hidden md:inline">comment{{if ne $commentCount 1}}s{{end}}</span>
+            <span class="hidden md:inline">Comment{{if ne $commentCount 1}}s{{end}}</span>
           </div>
         </span>
         <span class="before:content-['·'] before:select-none text-gray-500 dark:text-gray-400"></span>
         <span>
-          <span class="hidden md:inline">round</span>
+          <span class="hidden md:inline">Round</span>
           <span class="font-mono">#{{ $latestRound }}</span>
         </span>
       </div>
diff --git a/appview/pages/templates/repo/pulls/new.html b/appview/pages/templates/repo/pulls/new.html
index 735b4bbf..02df8338 100644
--- a/appview/pages/templates/repo/pulls/new.html
+++ b/appview/pages/templates/repo/pulls/new.html
@@ -1,4 +1,4 @@
-{{ define "title" }}new pull &middot; {{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}New pull &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 
 {{ define "repoContent" }}
     {{ template "repo/pulls/fragments/pullComposeHost" . }}
diff --git a/appview/pages/templates/repo/pulls/pull.html b/appview/pages/templates/repo/pulls/pull.html
index 76056153..ef816edf 100644
--- a/appview/pages/templates/repo/pulls/pull.html
+++ b/appview/pages/templates/repo/pulls/pull.html
@@ -1,5 +1,5 @@
 {{ define "title" }}
-    {{ .Pull.Title }} &middot; pull #{{ .Pull.PullId }} &middot; {{ .RepoInfo.FullName }}
+    {{ .Pull.Title }} &middot; Pull #{{ .Pull.PullId }} &middot; {{ .RepoInfo.FullName }} &middot; Tangled
 {{ end }}
 
 {{ define "extrameta" }}
@@ -364,14 +364,14 @@
       <a class="btn-flat flex items-center gap-2 no-underline hover:no-underline text-sm"
         href="/{{ $root.RepoInfo.FullName }}/pulls/{{ $root.Pull.PullId }}/round/{{ $round }}?{{ safeUrl $root.DiffOpts.Encode }}#round-#{{ $round }}">
         {{ i "diff" "w-4 h-4" }}
-        diff
+        Diff
       </a>
       {{ end }}
       {{ if and (ne $idx 0) (or (not $root.IsInterdiff) (ne $root.ActiveRound $round)) }}
         <a class="btn-flat flex items-center gap-2 no-underline hover:no-underline text-sm"
            href="/{{ $root.RepoInfo.FullName }}/pulls/{{ $root.Pull.PullId }}/round/{{ $round }}/interdiff?{{ safeUrl $root.DiffOpts.Encode }}">
           {{ i "chevrons-left-right-ellipsis" "w-4 h-4 rotate-90" }}
-          interdiff
+          Interdiff
         </a>
       {{ end }}
     </div>
@@ -389,8 +389,8 @@
         <span>{{ i "git-commit-horizontal" "w-4 h-4" }}</span>
         {{ len $patches }} commit{{ if ne (len $patches) 1 }}s{{ end }}
         <div class="text-sm text-gray-500 dark:text-gray-400">
-          <span class="group-open/commit:hidden inline">expand</span>
-          <span class="hidden group-open/commit:inline">collapse</span>
+          <span class="group-open/commit:hidden inline">Expand</span>
+          <span class="hidden group-open/commit:inline">Collapse</span>
         </div>
       </summary>
       {{ range $patches }}
@@ -447,19 +447,19 @@
 {{ define "mergeCheck" }}
   {{ $isOpen := .Pull.State.IsOpen }}
   {{ if and $isOpen .MergeCheck .MergeCheck.Error }}
-    <div class="flex items-center gap-2">
-      {{ i "triangle-alert" "w-4 h-4 text-red-600 dark:text-red-500" }}
-      {{ .MergeCheck.Error }}
+    <div class="flex items-center gap-2 text-red-600 dark:text-red-500">
+      {{ i "triangle-alert" "w-4 h-4" }}
+      <span class="font-medium">{{ .MergeCheck.Error }}</span>
     </div>
   {{ else if and $isOpen .MergeCheck .MergeCheck.IsConflicted }}
     <details class="group/conflict">
       <summary class="flex items-center justify-between cursor-pointer list-none">
-        <div class="flex items-center gap-2 ">
-          {{ i "triangle-alert" "text-red-600 dark:text-red-500 w-4 h-4" }}
-          <span class="font-medium">merge conflicts detected</span>
+        <div class="flex items-center gap-2 text-red-600 dark:text-red-500">
+          {{ i "triangle-alert" "w-4 h-4" }}
+          <span class="font-medium">Merge conflicts detected</span>
           <div class="text-sm text-gray-500 dark:text-gray-400">
-            <span class="group-open/conflict:hidden inline">expand</span>
-            <span class="hidden group-open/conflict:inline">collapse</span>
+            <span class="group-open/conflict:hidden inline">Expand</span>
+            <span class="hidden group-open/conflict:inline">Collapse</span>
           </div>
         </div>
       </summary>
@@ -482,9 +482,9 @@
       {{ end }}
     </details>
   {{ else if and $isOpen .MergeCheck }}
-    <div class="flex items-center gap-2">
-      {{ i "check" "w-4 h-4 text-green-600 dark:text-green-500" }}
-      <span>no conflicts, ready to merge</span>
+    <div class="flex items-center gap-2 text-green-600 dark:text-green-500">
+      {{ i "check" "w-4 h-4" }}
+      <span class="font-medium">No conflicts, ready to merge</span>
     </div>
   {{ end }}
 {{ end }}
@@ -494,7 +494,7 @@
   <div class="bg-gray-50 dark:bg-gray-700 border border-black dark:border-gray-500 rounded shadow-sm px-6 py-2 relative">
     <div class="flex items-center gap-2 text-black dark:text-white">
       {{ i "ban" "w-4 h-4" }}
-      <span class="font-medium">closed without merging</span
+      <span class="font-medium">Closed without merging</span
       >
     </div>
   </div>
@@ -502,7 +502,7 @@
   <div class="bg-purple-50 dark:bg-purple-900 border border-purple-500 rounded shadow-sm px-6 py-2 relative">
     <div class="flex items-center gap-2 text-purple-500 dark:text-purple-300">
       {{ i "git-merge" "w-4 h-4" }}
-      <span class="font-medium">pull request successfully merged</span
+      <span class="font-medium">Pull request successfully merged</span
       >
     </div>
   </div>
@@ -521,7 +521,7 @@
   <div class="bg-amber-50 dark:bg-amber-900 border border-amber-500 rounded shadow-sm px-6 py-2 relative">
     <div class="flex items-center gap-2 text-amber-500 dark:text-amber-300">
       {{ i "triangle-alert" "w-4 h-4" }}
-      <span class="font-medium">this branch has been updated, consider resubmitting</span>
+      <span class="font-medium">This branch has been updated, consider resubmitting</span>
     </div>
   </div>
   {{ end }}
@@ -538,8 +538,8 @@
         <summary class="cursor-pointer list-none flex items-center gap-2">
           {{ template "repo/pipelines/fragments/pipelineSymbol" (dict "Pipeline" $pipeline "ShortSummary" false) }}
           <div class="text-sm text-gray-500 dark:text-gray-400">
-            <span class="group-open/pipeline:hidden inline">expand</span>
-            <span class="hidden group-open/pipeline:inline">collapse</span>
+            <span class="group-open/pipeline:hidden inline">Expand</span>
+            <span class="hidden group-open/pipeline:inline">Collapse</span>
           </div>
         </summary>
           <div class="my-2 grid grid-cols-1 bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700">
@@ -589,7 +589,7 @@
         </div>
         <span class="text-gray-500 dark:text-gray-400 text-sm group-hover/summary:text-gray-600 dark:group-hover/summary:text-gray-300 transition-colors flex items-center gap-2 -ml-2 relative">
           {{ i "circle-plus" "size-4 z-5" }}
-          expand {{ $c }} comment{{ if ne $c 1 }}s{{ end }}
+          Expand {{ $c }} comment{{ if ne $c 1 }}s{{ end }}
         </span>
       </div>
     </summary>
@@ -606,7 +606,7 @@
     </div>
     {{ if gt $c 0}}
       <button class="flex items-center gap-2 -ml-2 relative cursor-pointer text-sm text-gray-500 dark:text-gray-400 group-hover/collapse:text-gray-600 dark:group-hover/collapse:text-gray-300 mt-4 pb-4 transition-colors" hx-on:click="this.closest('details').open = false">
-        <span class="bg-gray-50 dark:bg-slate-900 dark:rounded-full">{{ i "circle-chevron-up" "size-4 z-5" }}</span> collapse comment{{ if ne $c 1 }}s{{ end }}
+        <span class="bg-gray-50 dark:bg-slate-900 dark:rounded-full">{{ i "circle-chevron-up" "size-4 z-5" }}</span> Collapse comment{{ if ne $c 1 }}s{{ end }}
       </button>
     {{ end }}
 
@@ -652,10 +652,10 @@
 {{ define "loginPrompt" }}
   <div class="bg-amber-50 dark:bg-amber-900 border border-amber-500 rounded shadow-sm p-2 relative flex gap-2 items-center">
     <a href="/signup" class="btn-create py-0 hover:no-underline hover:text-white flex items-center gap-2">
-      sign up
+      Sign up
     </a>
     <span class="text-gray-500 dark:text-gray-400">or</span>
-    <a href="/login" class="underline">login</a>
+    <a href="/login" class="underline">Login</a>
     to add to the discussion
   </div>
 {{ end }}
diff --git a/appview/pages/templates/repo/pulls/pulls.html b/appview/pages/templates/repo/pulls/pulls.html
index 63391554..2f80ecc5 100644
--- a/appview/pages/templates/repo/pulls/pulls.html
+++ b/appview/pages/templates/repo/pulls/pulls.html
@@ -1,7 +1,7 @@
-{{ define "title" }}pulls &middot; {{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}Pulls &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 
 {{ define "extrameta" }}
-    {{ $title := "pulls"}}
+    {{ $title := "Pulls"}}
     {{ $url := printf "https://tangled.org/%s/pulls" .RepoInfo.FullName }}
 
     {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo "Title" $title "Url" $url) }}
@@ -12,19 +12,19 @@
   {{ $open :=
      (dict
        "Key" "open"
-       "Value" "open"
+       "Value" "Open"
        "Icon" "git-pull-request"
        "Meta" (scaleFmt .RepoInfo.Stats.PullCount.Open)) }}
   {{ $merged :=
      (dict
        "Key" "merged"
-       "Value" "merged"
+       "Value" "Merged"
        "Icon" "git-merge"
        "Meta" (scaleFmt .RepoInfo.Stats.PullCount.Merged)) }}
   {{ $closed :=
      (dict
        "Key" "closed"
-       "Value" "closed"
+       "Value" "Closed"
        "Icon" "ban"
        "Meta" (scaleFmt .RepoInfo.Stats.PullCount.Closed)) }}
   {{ $values := list $open $merged $closed }}
@@ -37,7 +37,7 @@
           type="text"
           name="q"
           value="{{ .FilterQuery }}"
-          placeholder="search pulls..."
+          placeholder="Search pulls..."
         >
         <a
           {{ if $active }}href="?q=state:{{ $active }}"{{ else }}href="?"{{ end }}
@@ -61,7 +61,7 @@
       class="col-start-3 btn-create text-sm flex items-center gap-2 no-underline hover:no-underline hover:text-white"
     >
       {{ i "git-pull-request-create" "w-4 h-4" }}
-      <span>new</span>
+      <span>New</span>
     </a>
   </div>
   <div class="error" id="pulls"></div>
@@ -96,7 +96,7 @@
                     </span>
 
                     <span class="before:content-['·']">
-                      round
+                      Round
                       <span class="font-mono">
                         #{{ $topPR.LastRoundNumber }}
                       </span>
@@ -127,7 +127,7 @@
                         {{ i "chevrons-down-up" "size-3" }}
                       </span>
                       {{ $rest := sub (len $stack) 1 }}
-                      expand {{ $rest }} pull{{if ne $rest 1 }}s{{end}} in this stack
+                      Expand {{ $rest }} pull{{if ne $rest 1 }}s{{end}} in this stack
                     </span>
                   </summary>
                   {{ template "stackedPullList" (list (slice $stack 1) $) }}
diff --git a/appview/pages/templates/repo/settings/access.html b/appview/pages/templates/repo/settings/access.html
index 719f5cfc..66b12da7 100644
--- a/appview/pages/templates/repo/settings/access.html
+++ b/appview/pages/templates/repo/settings/access.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .Tab }} settings &middot; {{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}{{ .Tab | capitalize }} settings &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 
 {{ define "repoContent" }}
   <section class="w-full grid grid-cols-1 md:grid-cols-4 gap-2">
@@ -14,7 +14,7 @@
 {{ define "collaboratorSettings" }}
   <div class="grid grid-cols-1 gap-4 items-center">
     <div class="col-span-1">
-      <h2 class="text-sm pb-2 uppercase font-bold">Collaborators</h2>
+      <h2 class="text-lg pb-2 font-medium">Collaborators</h2>
       <p class="text-gray-500 dark:text-gray-400">
         Any user added as a collaborator will be able to push commits and tags to this repository, upload releases, and workflows.
       </p>
@@ -79,8 +79,8 @@
   hx-swap="none"
   class="flex flex-col gap-2"
 >
-  <label for="add-collaborator" class="uppercase p-0">
-    ADD COLLABORATOR
+  <label for="add-collaborator" class="text-lg font-medium p-0">
+    Add collaborator
   </label>
   <p class="text-sm text-gray-500 dark:text-gray-400">Collaborators can push to this repository.</p>
   <actor-typeahead>
@@ -103,10 +103,10 @@
       popovertargetaction="hide"
       class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
       >
-      {{ i "x" "size-4" }} cancel
+      {{ i "x" "size-4" }} Cancel
     </button>
     <button type="submit" class="btn w-1/2 flex items-center">
-      <span class="inline-flex gap-2 items-center">{{ i "user-plus" "size-4" }} add</span>
+      <span class="inline-flex gap-2 items-center">{{ i "user-plus" "size-4" }} Add</span>
       <span id="spinner" class="group">
         {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
       </span>
diff --git a/appview/pages/templates/repo/settings/fragments/addLabelDefModal.html b/appview/pages/templates/repo/settings/fragments/addLabelDefModal.html
index b3a25b0c..cf29a991 100644
--- a/appview/pages/templates/repo/settings/fragments/addLabelDefModal.html
+++ b/appview/pages/templates/repo/settings/fragments/addLabelDefModal.html
@@ -149,13 +149,13 @@
     popovertargetaction="hide"
     class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
     >
-    {{ i "x" "size-4" }} cancel
+    {{ i "x" "size-4" }} Cancel
   </button>
 {{ end }}
 
 {{ define "submitButton" }}
   <button type="submit" class="btn-create w-1/2 flex items-center">
-    <span class="inline-flex gap-2 items-center">{{ i "plus" "size-4" }} add</span>
+    <span class="inline-flex gap-2 items-center">{{ i "plus" "size-4" }} Add</span>
     <span id="spinner" class="group">
       {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
     </span>
diff --git a/appview/pages/templates/repo/settings/fragments/labelListing.html b/appview/pages/templates/repo/settings/fragments/labelListing.html
index faac4581..9d860f44 100644
--- a/appview/pages/templates/repo/settings/fragments/labelListing.html
+++ b/appview/pages/templates/repo/settings/fragments/labelListing.html
@@ -5,7 +5,7 @@
     {{ template "labels/fragments/labelDef" $label }}
     <div class="flex flex-wrap text items-center gap-1 text-gray-500 dark:text-gray-400">
       {{ if $label.ValueType.IsNull }} 
-        basic
+        Basic
       {{ else }}
         {{ $label.ValueType.Type }} type
       {{ end }}
@@ -22,7 +22,7 @@
 
       {{ if $label.Multiple }}
         <span class="before:content-['·'] before:select-none"></span>
-        multiple
+        Multiple
       {{ end }}
 
       <span class="before:content-['·'] before:select-none"></span>
diff --git a/appview/pages/templates/repo/settings/fragments/secretListing.html b/appview/pages/templates/repo/settings/fragments/secretListing.html
index e5aab5ef..53bc4873 100644
--- a/appview/pages/templates/repo/settings/fragments/secretListing.html
+++ b/appview/pages/templates/repo/settings/fragments/secretListing.html
@@ -22,7 +22,7 @@
       hx-confirm="Are you sure you want to delete the secret {{ $secret.Key }}?"
     >
       {{ i "trash-2" "w-5 h-5" }}
-      <span class="hidden md:inline">delete</span> 
+      <span class="hidden md:inline">Delete</span> 
       {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
     </button>
   </div>
diff --git a/appview/pages/templates/repo/settings/fragments/sidebar.html b/appview/pages/templates/repo/settings/fragments/sidebar.html
index d22a1319..82295d3f 100644
--- a/appview/pages/templates/repo/settings/fragments/sidebar.html
+++ b/appview/pages/templates/repo/settings/fragments/sidebar.html
@@ -7,7 +7,7 @@
     <a href="/{{ $.RepoInfo.FullName }}/settings?tab={{.Name}}" class="no-underline hover:no-underline hover:bg-gray-100/25 hover:dark:bg-gray-700/25">
       <div class="flex gap-3 items-center p-2 {{ if eq .Name $active }} {{ $activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}">
         {{ i .Icon "size-4" }}
-        {{ .Name }}
+        {{ .Label }}
       </div>
     </a>
     {{ end }}
diff --git a/appview/pages/templates/repo/settings/fragments/webhookDeliveries.html b/appview/pages/templates/repo/settings/fragments/webhookDeliveries.html
index f097d651..79696278 100644
--- a/appview/pages/templates/repo/settings/fragments/webhookDeliveries.html
+++ b/appview/pages/templates/repo/settings/fragments/webhookDeliveries.html
@@ -1,13 +1,13 @@
 {{define "repo/settings/fragments/webhookDeliveries"}}
 <div class="flex flex-col gap-4">
   <div class="flex items-center justify-between">
-    <h3 class="text-lg font-bold uppercase text-sm">Recent Deliveries</h3>
+    <h3 class="text-lg font-medium">Recent deliveries</h3>
     <button
       type="button"
       onclick="this.closest('[popover]').hidePopover()"
       class="btn text-sm flex items-center gap-1"
     >
-      {{ i "x" "size-4" }} close
+      {{ i "x" "size-4" }} Close
     </button>
   </div>
 
diff --git a/appview/pages/templates/repo/settings/general.html b/appview/pages/templates/repo/settings/general.html
index 3a410f51..1d9655d4 100644
--- a/appview/pages/templates/repo/settings/general.html
+++ b/appview/pages/templates/repo/settings/general.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .Tab }} settings &middot; {{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}{{ .Tab | capitalize }} settings &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 
 {{ define "repoContent" }}
   <section class="w-full grid grid-cols-1 md:grid-cols-4 gap-2">
@@ -23,14 +23,14 @@
       class=""
       {{ if not .RepoInfo.Roles.IsOwner }}disabled{{ end }}
     >
-      <h2 class="text-sm pb-2 uppercase font-bold">Description</h2>
+      <h2 class="text-lg pb-2 font-medium">Description</h2>
       <textarea
         rows="3"
         class="w-full mb-2"
         id="base-form-description"
         name="description"
         >{{ .RepoInfo.Description }}</textarea>
-      <h2 class="text-sm pb-2 uppercase font-bold">Website URL</h2>
+      <h2 class="text-lg pb-2 font-medium">Website URL</h2>
       <input
         type="text"
         class="w-full mb-2"
@@ -38,7 +38,7 @@
         name="website"
         value="{{ .RepoInfo.Website }}"
       >
-      <h2 class="text-sm pb-2 uppercase font-bold">Topics</h2>
+      <h2 class="text-lg pb-2 font-medium">Topics</h2>
       <p class="text-gray-500 dark:text-gray-400">
         List of topics separated by spaces.
       </p>
@@ -55,7 +55,7 @@
           class="btn-create flex items-center gap-2 group"
         >
           {{ i "save" "w-4 h-4" }}
-          save
+          Save
           {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
         </button>
       </div>
@@ -66,7 +66,7 @@
 {{ define "branchSettings" }}
   <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
     <div class="col-span-1 md:col-span-2">
-      <h2 class="text-sm pb-2 uppercase font-bold">Default Branch</h2>
+      <h2 class="text-lg pb-2 font-medium">Default branch</h2>
       <p class="text-gray-500 dark:text-gray-400">
         The default branch is considered the “base” branch in your repository,
         against which all pull requests and code commits are automatically made,
@@ -96,7 +96,7 @@
   <div class="flex flex-col gap-2">
     <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
       <div class="col-span-1 md:col-span-2">
-        <h2 class="text-sm pb-2 uppercase font-bold">Default Labels</h2>
+        <h2 class="text-lg pb-2 font-medium">Default labels</h2>
         <p class="text-gray-500 dark:text-gray-400">
           Manage your issues and pulls by creating labels to categorize them. Only
           repository owners may configure labels. You may choose to subscribe to
@@ -106,12 +106,12 @@
       <form class="col-span-1 md:col-span-1 md:justify-self-end">
         {{ $title := "Unsubscribe from all labels" }}
         {{ $icon := "x" }}
-        {{ $text := "unsubscribe all" }}
+        {{ $text := "Unsubscribe all" }}
         {{ $action := "unsubscribe" }}
         {{ if $.ShouldSubscribeAll }}
           {{ $title = "Subscribe to all labels" }}
           {{ $icon = "check-check" }}
-          {{ $text = "subscribe all" }}
+          {{ $text = "Subscribe all" }}
           {{ $action = "subscribe" }}
         {{ end }}
         {{ range .DefaultLabels }}
@@ -154,7 +154,7 @@
         </div>
       {{ else }}
       <div class="flex items-center justify-center p-2 text-gray-500">
-        no labels added yet
+        No labels added yet
       </div>
       {{ end }}
     </div>
@@ -166,7 +166,7 @@
   <div class="flex flex-col gap-2">
     <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
       <div class="col-span-1 md:col-span-2">
-        <h2 class="text-sm pb-2 uppercase font-bold">Custom Labels</h2>
+        <h2 class="text-lg pb-2 font-medium">Custom labels</h2>
       </div>
       <div class="col-span-1 md:col-span-1 md:justify-self-end">
         <button
@@ -176,7 +176,7 @@
           {{ if not .RepoInfo.Roles.IsOwner }}disabled{{ end }}
           popovertargetaction="toggle">
           {{ i "plus" "size-4" }}
-          add label
+          Add label
         </button>
         <div
           id="add-labeldef-modal"
@@ -200,14 +200,14 @@
               hx-confirm="Are you sure you want to delete the label `{{ .Name }}`?"
             >
               {{ i "trash-2" "w-5 h-5" }}
-              <span class="hidden md:inline">delete</span> 
+              <span class="hidden md:inline">Delete</span> 
               {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
             </button>
           {{ end }}
         </div>
       {{ else }}
       <div class="flex items-center justify-center p-2 text-gray-500">
-        no labels added yet
+        No labels added yet
       </div>
       {{ end }}
     </div>
@@ -218,7 +218,7 @@
 {{ define "renameRepo" }}
   {{ if and .RepoInfo.Roles.IsOwner .RepoInfo.RepoDid }}
   <form hx-post="/{{ $.RepoInfo.FullName }}/settings/rename" hx-swap="none" class="group">
-    <h2 class="text-sm pb-2 uppercase font-bold">Rename Repository</h2>
+    <h2 class="text-lg pb-2 font-medium">Rename repository</h2>
     <p class="text-gray-500 dark:text-gray-400 mb-2">
       Existing git remotes that use the old name will break. Use the
       stable, DID-based URLs below to avoid breakage on future renames.
@@ -242,7 +242,7 @@
         class="btn flex items-center gap-2"
       >
         {{ i "pencil" "w-4 h-4" }}
-        rename
+        Rename
         {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
       </button>
     </div>
@@ -254,7 +254,7 @@
   {{ if .RepoInfo.Roles.RepoDeleteAllowed }}
   <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
     <div class="col-span-1 md:col-span-2">
-      <h2 class="text-sm pb-2 uppercase text-red-500 dark:text-red-400 font-bold">Delete Repository</h2>
+      <h2 class="text-lg pb-2 text-red-500 dark:text-red-400 font-medium">Delete repository</h2>
       <p class="text-red-500 dark:text-red-400 ">
         Deleting a repository is irreversible and permanent. Be certain before deleting a repository.
       </p>
@@ -267,7 +267,7 @@
         hx-delete="/{{ $.RepoInfo.FullName }}/settings/delete"
         hx-confirm="Are you sure you want to delete {{ $.RepoInfo.FullName }}?">
           {{ i "trash-2" "size-4" }}
-          delete
+          Delete
           <span class="ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline">
             {{ i "loader-circle" "w-4 h-4" }}
           </span>
diff --git a/appview/pages/templates/repo/settings/hooks.html b/appview/pages/templates/repo/settings/hooks.html
index a8d2d921..fb43df6c 100644
--- a/appview/pages/templates/repo/settings/hooks.html
+++ b/appview/pages/templates/repo/settings/hooks.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .Tab }} settings &middot; {{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}{{ .Tab | capitalize }} settings &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 
 {{ define "repoContent" }}
   <section class="w-full grid grid-cols-1 md:grid-cols-4 gap-2">
@@ -15,7 +15,7 @@
 {{ define "webhooksSettings" }}
   <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
     <div class="col-span-1 md:col-span-2">
-      <h2 class="text-sm pb-2 uppercase font-bold">Webhooks</h2>
+      <h2 class="text-lg pb-2 font-medium">Webhooks</h2>
       <p class="text-gray-500 dark:text-gray-400">
         Webhooks allow external services to be notified when certain events happen.
         When the specified events happen, we'll send a POST request to each of the URLs you provide.
@@ -28,7 +28,7 @@
         {{ if not .RepoInfo.Roles.IsOwner }}disabled{{ end }}
         popovertargetaction="toggle">
         {{ i "plus" "size-4" }}
-        new webhook
+        New webhook
       </button>
       <div
         id="add-webhook-modal"
@@ -48,12 +48,12 @@
               {{ if .Active }}
                 <span class="inline-flex items-center gap-1 px-2 py-1 text-sm rounded bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                   {{ i "circle-check" "size-4" }}
-                  active
+                  Active
                 </span>
               {{ else }}
                 <span class="inline-flex items-center gap-1 px-2 py-1 text-sm rounded bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
                   {{ i "circle" "size-4" }}
-                  inactive
+                  Inactive
                 </span>
               {{ end }}
             </div>
@@ -68,7 +68,7 @@
                 popovertarget="edit-webhook-modal-{{.Id}}"
                 popovertargetaction="toggle">
                 {{ i "pencil" "size-4" }}
-                edit
+                Edit
               </button>
               <button
                 class="btn text-sm text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 flex items-center gap-1 group"
@@ -76,7 +76,7 @@
                 hx-swap="none"
                 hx-confirm="Are you sure you want to delete this webhook?">
                 {{ i "trash-2" "size-4" }}
-                delete
+                Delete
                 {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
               </button>
             </div>
@@ -103,7 +103,7 @@
         {{ if $deliveries }}
           <div class="mt-3 border-t border-gray-200 dark:border-gray-700 pt-3">
             <div class="flex items-center justify-between mb-2">
-              <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase">Recent Deliveries</h4>
+              <h4 class="text-lg font-medium text-gray-700 dark:text-gray-300">Recent deliveries</h4>
             </div>
             <div class="flex flex-col gap-2">
               {{ range $deliveries }}
@@ -141,7 +141,7 @@
                 popovertargetaction="toggle"
               >
                 {{ i "list" "size-3" }}
-                show all
+                Show all
               </button>
             </div>
           </div>
@@ -175,7 +175,7 @@
       </div>
     {{ else }}
       <div class="flex items-center justify-center p-4 text-gray-500">
-        no webhooks configured yet
+        No webhooks configured yet
       </div>
     {{ end }}
   </div>
@@ -187,7 +187,7 @@
   hx-swap="none"
   class="flex flex-col gap-4"
 >
-  <h3 class="uppercase font-bold">New Webhook</h3>
+  <h3 class="text-lg font-medium">New webhook</h3>
 
   <div class="flex flex-col gap-2">
     <label for="webhook-url" class="text-sm font-semibold">Payload URL</label>
@@ -247,10 +247,10 @@
       popovertargetaction="hide"
       class="btn flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
       >
-      {{ i "x" "size-4" }} cancel
+      {{ i "x" "size-4" }} Cancel
     </button>
     <button type="submit" class="btn-create flex items-center gap-2 group">
-      {{ i "plus" "size-4" }} add webhook
+      {{ i "plus" "size-4" }} Add webhook
       {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
     </button>
   </div>
@@ -266,7 +266,7 @@
   hx-swap="none"
   class="flex flex-col gap-4"
 >
-  <h3 class="uppercase font-bold">Edit Webhook</h3>
+  <h3 class="text-lg font-medium">Edit webhook</h3>
 
   <div class="flex flex-col gap-2">
     <label for="edit-webhook-url-{{ $webhook.Id }}" class="text-sm font-semibold">Payload URL</label>
@@ -329,10 +329,10 @@
       popovertargetaction="hide"
       class="btn flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
       >
-      {{ i "x" "size-4" }} cancel
+      {{ i "x" "size-4" }} Cancel
     </button>
     <button type="submit" class="btn-create flex items-center gap-2 group">
-      {{ i "save" "size-4" }} save
+      {{ i "save" "size-4" }} Save
       {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
     </button>
   </div>
diff --git a/appview/pages/templates/repo/settings/pipelines.html b/appview/pages/templates/repo/settings/pipelines.html
index 83b8fc5a..750c0963 100644
--- a/appview/pages/templates/repo/settings/pipelines.html
+++ b/appview/pages/templates/repo/settings/pipelines.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .Tab }} settings &middot; {{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}{{ .Tab | capitalize }} settings &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 
 {{ define "repoContent" }}
   <section class="w-full grid grid-cols-1 md:grid-cols-4 gap-2">
@@ -18,7 +18,7 @@
 {{ define "spindleSettings" }}
   <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
     <div class="col-span-1 md:col-span-2">
-      <h2 class="text-sm pb-2 uppercase font-bold">Spindle</h2>
+      <h2 class="text-lg pb-2 font-medium">Spindle</h2>
       <p class="text-gray-500 dark:text-gray-400">
         Choose a spindle to execute your workflows on. Only repository owners
         can configure spindles. Spindles can be selfhosted,
@@ -64,7 +64,7 @@
 {{ define "secretSettings" }}
   <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
     <div class="col-span-1 md:col-span-2">
-      <h2 class="text-sm pb-2 uppercase font-bold">SECRETS</h2>
+      <h2 class="text-lg pb-2 font-medium">Secrets</h2>
       <p class="text-gray-500 dark:text-gray-400">
       Secrets are accessible in workflow runs via environment variables. Anyone
       with collaborator access to this repository can add and use secrets in
@@ -80,7 +80,7 @@
       {{ template "repo/settings/fragments/secretListing" (list $ .) }}
     {{ else }}
       <div class="flex items-center justify-center p-2 text-gray-500">
-        no secrets added yet
+        No secrets added yet
       </div>
     {{ end }}
   </div>
@@ -92,7 +92,7 @@
     popovertarget="add-secret-modal"
     popovertargetaction="toggle">
     {{ i "plus" "size-4" }}
-    add secret
+    Add secret
   </button>
   <div
     id="add-secret-modal"
@@ -110,7 +110,7 @@
   hx-swap="none"
   class="flex flex-col gap-2"
 >
-  <p class="uppercase p-0 font-bold">ADD SECRET</p>
+  <p class="text-lg font-medium p-0">Add secret</p>
   <p class="text-sm text-gray-500 dark:text-gray-400">Secrets are available as environment variables in the workflow.</p>
   <input
     type="text"
@@ -124,7 +124,7 @@
     id="secret-value"
     name="value"
     required
-    placeholder="secret value"></textarea>
+    placeholder="Secret value"></textarea>
   <div class="flex gap-2 pt-2">
     <button
       type="button"
@@ -132,10 +132,10 @@
       popovertargetaction="hide"
       class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
       >
-      {{ i "x" "size-4" }} cancel
+      {{ i "x" "size-4" }} Cancel
     </button>
     <button type="submit" class="btn w-1/2 flex items-center">
-      <span class="inline-flex gap-2 items-center">{{ i "plus" "size-4" }} add</span>
+      <span class="inline-flex gap-2 items-center">{{ i "plus" "size-4" }} Add</span>
       <span id="spinner" class="group">
         {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
       </span>
diff --git a/appview/pages/templates/repo/settings/sites.html b/appview/pages/templates/repo/settings/sites.html
index 1ac98026..29569081 100644
--- a/appview/pages/templates/repo/settings/sites.html
+++ b/appview/pages/templates/repo/settings/sites.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .Tab }} settings &middot; {{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}{{ .Tab | capitalize }} settings &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 
 {{ define "repoContent" }}
   <section class="w-full grid grid-cols-1 md:grid-cols-4 gap-2">
@@ -14,7 +14,7 @@
 {{ define "repoSiteSettings" }}
   <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-start">
     <div class="col-span-1 md:col-span-2">
-      <h2 class="text-sm pb-2 uppercase font-bold">Git Sites</h2>
+      <h2 class="text-lg pb-2 font-medium">Git sites</h2>
       <p class="text-gray-500 dark:text-gray-400">
         Serve a static site directly from this repository.
         Choose a branch and the directory containing your <code>index.html</code>.
@@ -27,28 +27,28 @@
     {{ if .SiteConfig.IsIndex }}
       <div class="flex items-center gap-2 px-3 py-2 rounded border border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20 text-sm text-green-800 dark:text-green-300">
         {{ i "circle-check" "size-4 shrink-0" }}
-        live at <a class="underline font-mono" href="https://{{ .OwnerClaim.Domain }}">{{ .OwnerClaim.Domain }}</a>
+        Live at <a class="underline font-mono" href="https://{{ .OwnerClaim.Domain }}">{{ .OwnerClaim.Domain }}</a>
       </div>
     {{ else }}
       <div class="flex items-center gap-2 px-3 py-2 rounded border border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20 text-sm text-green-800 dark:text-green-300">
         {{ i "circle-check" "size-4 shrink-0" }}
-        live at <a class="underline font-mono" href="https://{{ .OwnerClaim.Domain }}/{{ .RepoInfo.Name }}">{{ .OwnerClaim.Domain }}/{{ .RepoInfo.Name }}</a>
+        Live at <a class="underline font-mono" href="https://{{ .OwnerClaim.Domain }}/{{ .RepoInfo.Name }}">{{ .OwnerClaim.Domain }}/{{ .RepoInfo.Name }}</a>
       </div>
     {{ end }}
   {{ else if and .SiteConfig (not .OwnerClaim) }}
     <div class="flex items-center gap-2 px-3 py-2 rounded border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 text-sm text-amber-800 dark:text-amber-300">
       {{ i "triangle-alert" "size-4 shrink-0" }}
-      site is configured but not live &mdash; <a class="underline" href="/settings/sites">claim a domain</a> to publish it.
+      Site is configured but not live &mdash; <a class="underline" href="/settings/sites">claim a domain</a> to publish it.
     </div>
   {{ else if and (not .SiteConfig) .OwnerClaim }}
     <div class="flex items-center gap-2 px-3 py-2 rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 text-sm text-gray-600 dark:text-gray-400">
       {{ i "circle-dashed" "size-4 shrink-0" }}
-      not enabled &mdash; configure a branch below to publish to <span class="font-mono">{{ .OwnerClaim.Domain }}</span>.
+      Not enabled &mdash; configure a branch below to publish to <span class="font-mono">{{ .OwnerClaim.Domain }}</span>.
     </div>
   {{ else }}
     <div class="flex items-center gap-2 px-3 py-2 rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 text-sm text-gray-600 dark:text-gray-400">
       {{ i "circle-dashed" "size-4 shrink-0" }}
-      not enabled &mdash; configure a branch below and <a class="underline" href="/settings/sites">claim a domain</a> to publish.
+      Not enabled &mdash; configure a branch below and <a class="underline" href="/settings/sites">claim a domain</a> to publish.
     </div>
   {{ end }}
 
@@ -62,7 +62,7 @@
 
       <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
         <div class="col-span-1 md:col-span-2">
-          <h2 class="text-sm pb-2 uppercase font-bold">Branch</h2>
+          <h2 class="text-lg pb-2 font-medium">Branch</h2>
           <p class="text-gray-500 dark:text-gray-400">
             The branch to build and deploy the site from.
           </p>
@@ -88,7 +88,7 @@
 
       <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
         <div class="col-span-1 md:col-span-2">
-          <h2 class="text-sm pb-2 uppercase font-bold">Deploy directory</h2>
+          <h2 class="text-lg pb-2 font-medium">Deploy directory</h2>
           <p class="text-gray-500 dark:text-gray-400">
             Path within the repository that contains your <code>index.html</code>.
             Use <code>/</code> for the root, or a subdirectory like <code>/docs</code>.
@@ -108,7 +108,7 @@
       </div>
 
       <div class="flex flex-col gap-2">
-        <h2 class="text-sm pb-2 uppercase font-bold">Site type</h2>
+        <h2 class="text-lg pb-2 font-medium">Site type</h2>
         <p class="text-gray-500 dark:text-gray-400">
           An <strong>index site</strong> is served at the root of your sites domain.
           A <strong>sub-path site</strong> is served under the repository name.
@@ -130,7 +130,7 @@
               {{ if and .IndexSiteTakenBy (not (and .SiteConfig .SiteConfig.IsIndex)) }}disabled{{ end }}
             />
             <div>
-              <span class="font-medium">index site</span>
+              <span class="font-medium">Index site</span>
               <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
                 {{ if .OwnerClaim }}
                   <code>{{ .OwnerClaim.Domain }}</code>
@@ -140,7 +140,7 @@
               </p>
               {{ if and .IndexSiteTakenBy (not (and .SiteConfig .SiteConfig.IsIndex)) }}
                 <p class="text-xs text-amber-600 dark:text-amber-400 mt-1">
-                  already used by <code>{{ .IndexSiteTakenBy }}</code>
+                  Already used by <code>{{ .IndexSiteTakenBy }}</code>
                 </p>
               {{ end }}
             </div>
@@ -154,7 +154,7 @@
               {{ if and .SiteConfig (not .SiteConfig.IsIndex) }}checked{{ end }}
             />
             <div>
-              <span class="font-medium">sub-path site</span>
+              <span class="font-medium">Sub-path site</span>
               <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
                 {{ if .OwnerClaim }}
                   <code>{{ .OwnerClaim.Domain }}/{{ $.RepoInfo.Name }}</code>
@@ -174,7 +174,7 @@
           type="submit"
           class="btn-create flex items-center gap-2 group">
           {{ i "save" "size-4" }}
-          save
+          Save
           <span id="sites-spinner" class="group">
             {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
           </span>
@@ -187,7 +187,7 @@
   {{ if .SiteConfig }}
   <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
     <div class="col-span-1 md:col-span-2">
-      <h2 class="text-sm pb-2 uppercase text-red-500 dark:text-red-400 font-bold">Disable Site</h2>
+      <h2 class="text-lg pb-2 text-red-500 dark:text-red-400 font-medium">Disable site</h2>
       <p class="text-red-500 dark:text-red-400">
         Removes the site configuration for this repository. The site will no longer be served.
       </p>
@@ -202,7 +202,7 @@
           class="btn group flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
           {{ if not .RepoInfo.Roles.IsOwner }}disabled{{ end }}>
           {{ i "trash-2" "size-4" }}
-          disable
+          Disable
           {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
         </button>
       </form>
@@ -211,7 +211,7 @@
   {{ end }}
 
   <div class="flex flex-col gap-3">
-    <h2 class="text-sm uppercase font-bold">Recent Deploys</h2>
+    <h2 class="text-lg font-medium">Recent deploys</h2>
     {{ if .Deploys }}
       <div class="flex flex-col divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded">
         {{ range .Deploys }}
@@ -220,23 +220,23 @@
               {{ if eq .Status "success" }}
                 <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                   {{ i "circle-check" "size-3" }}
-                  success
+                  Success
                 </span>
               {{ else }}
                 <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
                   {{ i "circle-x" "size-3" }}
-                  failed
+                  Failed
                 </span>
               {{ end }}
               {{ if eq .Trigger "push" }}
                 <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                   {{ i "git-commit-horizontal" "size-3" }}
-                  push
+                  Push
                 </span>
               {{ else if eq .Trigger "config_change" }}
                 <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300">
                   {{ i "settings" "size-3" }}
-                  config change
+                  Config change
                 </span>
               {{ end }}
               <span class="font-mono text-xs text-gray-600 dark:text-gray-400">
@@ -261,7 +261,7 @@
       </div>
     {{ else }}
       <div class="flex items-center justify-center p-6 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700 rounded">
-        no deploys yet
+        No deploys yet
       </div>
     {{ end }}
   </div>
diff --git a/appview/pages/templates/repo/stars.html b/appview/pages/templates/repo/stars.html
index 8037f22d..871be350 100644
--- a/appview/pages/templates/repo/stars.html
+++ b/appview/pages/templates/repo/stars.html
@@ -1,7 +1,7 @@
-{{ define "title" }}stars · {{ .RepoInfo.FullName }}{{ end }}
+{{ define "title" }}Stars &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
   {{ define "repoContent" }}
   <div class="flex flex-col gap-4">
-    <h2 class="text-sm uppercase font-bold">Starred by</h2>
+    <h2 class="text-lg font-medium">Starred by</h2>
     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
       {{ range .Starrers }}
         {{ $handle := resolve .Did }}
@@ -11,7 +11,7 @@
             <div class="flex-1 min-w-0">
               <a href="/{{ $handle }}" class="block truncate">{{ $handle }}</a>
               <p class="text-sm text-gray-500 dark:text-gray-400">
-                starred {{ .Created | relTimeFmt }}
+                Starred {{ .Created | relTimeFmt }}
               </p>
             </div>
           </div>
diff --git a/appview/pages/templates/repo/tag.html b/appview/pages/templates/repo/tag.html
index 43033cea..e95bddde 100644
--- a/appview/pages/templates/repo/tag.html
+++ b/appview/pages/templates/repo/tag.html
@@ -1,5 +1,5 @@
 {{ define "title" }}
-    tags · {{ .RepoInfo.FullName }}
+    Tags &middot; {{ .RepoInfo.FullName }} &middot; Tangled
 {{ end }}
 
 {{ define "extrameta" }}
diff --git a/appview/pages/templates/repo/tags.html b/appview/pages/templates/repo/tags.html
index e14e777e..ec461534 100644
--- a/appview/pages/templates/repo/tags.html
+++ b/appview/pages/templates/repo/tags.html
@@ -1,5 +1,5 @@
 {{ define "title" }}
-    tags · {{ .RepoInfo.FullName }}
+    Tags &middot; {{ .RepoInfo.FullName }} &middot; Tangled
 {{ end }}
 
 {{ define "extrameta" }}
@@ -11,7 +11,7 @@
 
 {{ define "repoContent" }}
 <section>
-  <h2 class="mb-4 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">tags</h2>
+  <h2 class="mb-4 text-sm text-left text-gray-700 dark:text-gray-300 font-bold">Tags</h2>
   <div class="flex flex-col py-2 gap-12 md:gap-0">
     {{ range .Tags }}
       {{ template "repo/fragments/singleTag" (list $ . ) }}
@@ -38,7 +38,7 @@
   {{ $artifacts := $root.DanglingArtifacts }}
 
   {{ if and (gt (len $artifacts) 0) $isPushAllowed }}
-  <h2 class="mb-2 text-sm text-left text-red-700 dark:text-red-400 uppercase font-bold">dangling artifacts</h2>
+  <h2 class="mb-2 text-sm text-left text-red-700 dark:text-red-400 font-bold">Dangling artifacts</h2>
   <p class="mb-4">The tags that these artifacts were attached to have been deleted. These artifacts are only visible to collaborators.</p>
   <div class="flex flex-col rounded border border-gray-200 dark:border-gray-700">
     {{ range $artifact := $artifacts }}
diff --git a/appview/pages/templates/repo/tree.html b/appview/pages/templates/repo/tree.html
index 47513b4f..75384c97 100644
--- a/appview/pages/templates/repo/tree.html
+++ b/appview/pages/templates/repo/tree.html
@@ -1,4 +1,4 @@
-{{ define "title"}}{{ range .BreadCrumbs }}{{ pathUnescape (index . 0)}}/{{ end }} at {{ .Ref }} &middot; {{ .RepoInfo.FullName }}{{ end }}
+{{ define "title"}}{{ range .BreadCrumbs }}{{ pathUnescape (index . 0)}}/{{ end }} at {{ .Ref }} &middot; {{ .RepoInfo.FullName }} &middot; Tangled{{ end }}
 
 
 {{ define "extrameta" }}
diff --git a/appview/pages/templates/search/fragments/quick.html b/appview/pages/templates/search/fragments/quick.html
index 1250cb18..e2480a03 100644
--- a/appview/pages/templates/search/fragments/quick.html
+++ b/appview/pages/templates/search/fragments/quick.html
@@ -8,7 +8,7 @@
 </div>
 {{- else if .Query -}}
 <div class="bg-white dark:bg-gray-900 border border-t-0 border-gray-200 dark:border-gray-700 rounded-b-md shadow-xl overflow-hidden px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
-  no results for "{{ .Query }}"
+  No results for "{{ .Query }}"
 </div>
 {{- end -}}
 {{end}}
@@ -23,7 +23,7 @@
 </div>
 {{- else if .Query -}}
 <div class="px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
-  no results for "{{ .Query }}"
+  No results for "{{ .Query }}"
 </div>
 {{- end -}}
 {{end}}
@@ -36,10 +36,10 @@
 
 {{define "search/fragments/quickFooter"}}
 <div data-results-footer class="bg-gray-50 dark:bg-gray-800 px-4 py-2 flex justify-between items-center text-sm text-gray-600 dark:text-gray-400 border-t border-gray-100 dark:border-gray-700">
-  <span>showing {{ len .Repos }} of {{ .Total }}</span>
+  <span>Showing {{ len .Repos }} of {{ .Total }}</span>
   <a href="/search?q={{ urlquery .Query }}"
      class="flex items-center gap-1 hover:text-gray-600 dark:hover:text-gray-300 no-underline hover:no-underline">
-    all results {{ i "arrow-right" "size-4" }}
+    All results {{ i "arrow-right" "size-4" }}
   </a>
 </div>
 {{end}}
diff --git a/appview/pages/templates/search/search.html b/appview/pages/templates/search/search.html
index 6ba9d248..2ce015dc 100644
--- a/appview/pages/templates/search/search.html
+++ b/appview/pages/templates/search/search.html
@@ -1,4 +1,4 @@
-{{ define "title" }}Search{{ end }}
+{{ define "title" }}Search &middot; Tangled{{ end }}
 
 {{ define "content" }}
   <h1 class="text-2xl font-bold mb-4 px-2">Search</h1>
@@ -25,7 +25,7 @@
           type="text"
           name="q"
           value="{{ .FilterQuery }}"
-          placeholder="search repos..."
+          placeholder="Search repositories..."
         >
         <a
           href="/search"
@@ -61,7 +61,7 @@
       </div>
     {{ else }}
         <div class="text-base text-gray-500 flex items-center justify-center italic p-12 border border-gray-200 dark:border-gray-700 rounded">
-          <span>No repos found.</span>
+          <span>No repositories found.</span>
         </div>
     {{ end }}
   </div>
diff --git a/appview/pages/templates/spindles/dashboard.html b/appview/pages/templates/spindles/dashboard.html
index 230e07c4..a79abad5 100644
--- a/appview/pages/templates/spindles/dashboard.html
+++ b/appview/pages/templates/spindles/dashboard.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{.Spindle.Instance}} &middot; {{ .Tab }} settings{{ end }}
+{{ define "title" }}{{ .Tab | capitalize }} &middot; {{.Spindle.Instance}} &middot; Tangled{{ end }}
 
 {{ define "content" }}
   <div class="p-6">
@@ -19,17 +19,17 @@
 {{ define "spindleDash" }}
 <div>
   <div class="flex justify-between items-center">
-    <h2 class="text-sm pb-2 uppercase font-bold">{{ .Tab }} &middot; {{ .Spindle.Instance }}</h2>
+    <h2 class="text-lg pb-2 font-medium">{{ .Tab | capitalize }} &middot; {{ .Spindle.Instance }}</h2>
     <div id="right-side" class="flex gap-2">
       {{ $style := "px-2 py-1 rounded flex items-center flex-shrink-0 gap-2" }}
       {{ $isOwner := and .LoggedInUser (eq .LoggedInUser.Did .Spindle.Owner)  }}
       {{ if .Spindle.Verified }}
-        <span class="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 {{$style}}">{{ i "shield-check" "w-4 h-4" }} verified</span>
+        <span class="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 {{$style}}">{{ i "shield-check" "w-4 h-4" }} Verified</span>
         {{ if $isOwner }}
           {{ template "spindles/fragments/addMemberModal" .Spindle }}
         {{ end }}
       {{ else }}
-        <span class="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 {{$style}}">{{ i "shield-off" "w-4 h-4" }} unverified</span>
+        <span class="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 {{$style}}">{{ i "shield-off" "w-4 h-4" }} Unverified</span>
         {{ if $isOwner }}
           {{ block "retryButton" .Spindle }} {{ end }}
         {{ end }}
@@ -93,7 +93,7 @@
     hx-headers='{"shouldRedirect": "true"}'
   >
     {{ i "trash-2" "w-5 h-5" }}
-    <span class="hidden md:inline">delete</span> 
+    <span class="hidden md:inline">Delete</span> 
     {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
   </button>
 {{ end }}
@@ -108,7 +108,7 @@
     hx-headers='{"shouldRefresh": "true"}'
   >
     {{ i "rotate-ccw" "w-5 h-5" }}
-    <span class="hidden md:inline">retry</span> 
+    <span class="hidden md:inline">Retry</span> 
     {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
   </button>
 {{ end }}
@@ -126,7 +126,7 @@
       hx-confirm="Are you sure you want to remove {{ resolve $member }} from this instance?"
     >
       {{ i "user-minus" "w-4 h-4" }}
-      remove
+      Remove
       {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
     </button>
 {{ end }}
diff --git a/appview/pages/templates/spindles/fragments/addMemberModal.html b/appview/pages/templates/spindles/fragments/addMemberModal.html
index a5118e61..f999bd84 100644
--- a/appview/pages/templates/spindles/fragments/addMemberModal.html
+++ b/appview/pages/templates/spindles/fragments/addMemberModal.html
@@ -6,7 +6,7 @@
     popovertargetaction="toggle"
   >
     {{ i "user-plus" "w-5 h-5" }}
-    <span class="hidden md:inline">add member</span> 
+    <span class="hidden md:inline">Add member</span> 
     {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
   </button>
 
@@ -27,8 +27,8 @@
   hx-swap="none"
   class="flex flex-col gap-2"
 >
-  <label for="member-did-{{ .Id }}" class="uppercase p-0">
-    ADD MEMBER
+  <label for="member-did-{{ .Id }}" class="text-lg font-medium p-0">
+    Add member
   </label>
   <p class="text-sm text-gray-500 dark:text-gray-400">Members can register repositories and run workflows on this spindle.</p>
   <actor-typeahead>
@@ -51,10 +51,10 @@
       popovertargetaction="hide"
       class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
       >
-      {{ i "x" "size-4" }} cancel
+      {{ i "x" "size-4" }} Cancel
     </button>
     <button type="submit" class="btn w-1/2 flex items-center">
-      <span class="inline-flex gap-2 items-center">{{ i "user-plus" "size-4" }} add</span>
+      <span class="inline-flex gap-2 items-center">{{ i "user-plus" "size-4" }} Add</span>
       <span id="spinner" class="group">
         {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
       </span>
diff --git a/appview/pages/templates/spindles/fragments/spindleListing.html b/appview/pages/templates/spindles/fragments/spindleListing.html
index 5eefc24a..b74f206e 100644
--- a/appview/pages/templates/spindles/fragments/spindleListing.html
+++ b/appview/pages/templates/spindles/fragments/spindleListing.html
@@ -32,13 +32,13 @@
     {{ $style := "px-2 py-1 rounded flex items-center flex-shrink-0 gap-2 text-sm" }}
 
     {{ if .NeedsUpgrade }}
-      <span class="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 {{$style}}"> {{ i "shield-alert" "w-4 h-4" }} needs upgrade </span>
+      <span class="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 {{$style}}"> {{ i "shield-alert" "w-4 h-4" }} Needs upgrade </span>
       {{ block "spindleRetryButton" . }} {{ end }}
     {{ else if .Verified }}
-      <span class="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 {{$style}}">{{ i "shield-check" "w-4 h-4" }} verified</span>
+      <span class="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 {{$style}}">{{ i "shield-check" "w-4 h-4" }} Verified</span>
       {{ template "spindles/fragments/addMemberModal" . }}
     {{ else }}
-      <span class="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 {{$style}}">{{ i "shield-off" "w-4 h-4" }} unverified</span>
+      <span class="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 {{$style}}">{{ i "shield-off" "w-4 h-4" }} Unverified</span>
       {{ block "spindleRetryButton" . }} {{ end }}
     {{ end }}
 
@@ -56,7 +56,7 @@
     hx-confirm="Are you sure you want to delete the spindle '{{ .Instance }}'?"
   >
     {{ i "trash-2" "w-5 h-5" }}
-    <span class="hidden md:inline">delete</span> 
+    <span class="hidden md:inline">Delete</span> 
     {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
   </button>
 {{ end }}
@@ -71,7 +71,7 @@
     hx-target="#spindle-{{.Id}}"
   >
     {{ i "rotate-ccw" "w-5 h-5" }}
-    <span class="hidden md:inline">retry</span> 
+    <span class="hidden md:inline">Retry</span> 
     {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
   </button>
 {{ end }}
diff --git a/appview/pages/templates/spindles/index.html b/appview/pages/templates/spindles/index.html
index ce4f8bce..9f1f9d88 100644
--- a/appview/pages/templates/spindles/index.html
+++ b/appview/pages/templates/spindles/index.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .Tab }} settings{{ end }}
+{{ define "title" }}{{ .Tab | capitalize }} &middot; Tangled{{ end }}
 
 {{ define "content" }}
   <div class="p-6">
@@ -19,7 +19,7 @@
 {{ define "spindleList" }}
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
   <div class="col-span-1 md:col-span-2">
-    <h2 class="text-sm pb-2 uppercase font-bold">Spindle</h2>
+    <h2 class="text-lg pb-2 font-medium">Spindle</h2>
     {{ block "about" . }} {{ end }}
   </div>
   <div class="col-span-1 md:col-span-1 md:justify-self-end">
@@ -45,13 +45,13 @@
 
 {{ define "list" }}
 <section class="rounded w-full flex flex-col gap-2">
-  <h2 class="text-sm font-bold py-2 uppercase dark:text-gray-300">your spindles</h2>
+  <h2 class="text-lg font-medium py-2 dark:text-gray-300">Your spindles</h2>
   <div class="flex flex-col rounded border border-gray-200 dark:border-gray-700 w-full">
     {{ range $spindle := .Spindles }}
     {{ template "spindles/fragments/spindleListing" . }}
     {{ else }}
     <div class="flex items-center justify-center p-2 border-b border-gray-200 dark:border-gray-700 text-gray-500">
-      no spindles registered yet
+      No spindles registered yet
     </div>
     {{ end }}
   </div>
@@ -61,7 +61,7 @@
 
 {{ define "register" }}
 <section class="rounded w-full lg:w-fit flex flex-col gap-2">
-  <h2 class="text-sm font-bold py-2 uppercase dark:text-gray-300">register a spindle</h2>
+  <h2 class="text-lg font-medium py-2 dark:text-gray-300">Register a spindle</h2>
   <p class="mb-2 dark:text-gray-300">Enter the hostname of your spindle to get started.</p>
   <form
   hx-post="/settings/spindles/register"
@@ -85,7 +85,7 @@
     >
     <span class="inline-flex items-center gap-2">
       {{ i "plus" "w-4 h-4" }}
-      register
+      Register
     </span>
     <span class="pl-2 hidden group-[.htmx-request]:inline">
       {{ i "loader-circle" "w-4 h-4 animate-spin" }}
@@ -104,7 +104,7 @@
 class="btn flex items-center gap-2"
 href="https://docs.tangled.org/spindles.html#self-hosting-guide">
 {{ i "book" "size-4" }}
-docs
+Docs
 </a>
 <div
 id="add-email-modal"
diff --git a/appview/pages/templates/strings/dashboard.html b/appview/pages/templates/strings/dashboard.html
index 006a6a53..74c9d015 100644
--- a/appview/pages/templates/strings/dashboard.html
+++ b/appview/pages/templates/strings/dashboard.html
@@ -1,4 +1,4 @@
-{{ define "title" }}strings by {{ resolve .Card.UserDid  }}{{ end }}
+{{ define "title" }}Strings by {{ resolve .Card.UserDid  }} &middot; Tangled{{ end }}
 
 {{ define "extrameta" }}
     {{ $handle := resolve .Card.UserDid }}
@@ -21,7 +21,7 @@
 {{ end }}
 
 {{ define "allStrings" }}
-  <p class="text-sm font-bold p-2 dark:text-white">ALL STRINGS</p>
+  <p class="text-base font-medium p-2 dark:text-white">All strings</p>
   <div id="strings" class="grid grid-cols-1 gap-4 mb-6">
     {{ range .Strings }}
       {{ template "singleString" (list $ .) }}
diff --git a/appview/pages/templates/strings/fragments/form.html b/appview/pages/templates/strings/fragments/form.html
index 69d64930..d839fcab 100644
--- a/appview/pages/templates/strings/fragments/form.html
+++ b/appview/pages/templates/strings/fragments/form.html
@@ -47,7 +47,7 @@
           <a class="btn flex items-center gap-2 no-underline hover:no-underline p-2 group text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 "
              href="/strings/{{ .String.Did }}/{{ .String.Rkey }}">
             {{ i "x" "size-4" }}
-            <span class="hidden md:inline">cancel</span>
+            <span class="hidden md:inline">Cancel</span>
             {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
           </a>
         {{ end }}
@@ -58,7 +58,7 @@
           >
           <span class="inline-flex items-center gap-2">
             {{ i "arrow-up" "w-4 h-4" }}
-            publish
+            Publish
           </span>
           <span class="pl-2 hidden group-[.htmx-request]:inline">
             {{ i "loader-circle" "w-4 h-4 animate-spin" }}
diff --git a/appview/pages/templates/strings/put.html b/appview/pages/templates/strings/put.html
index 154af060..f712bcee 100644
--- a/appview/pages/templates/strings/put.html
+++ b/appview/pages/templates/strings/put.html
@@ -1,4 +1,4 @@
-{{ define "title" }}publish a new string{{ end }}
+{{ define "title" }}Publish a new string &middot; Tangled{{ end }}
 
 {{ define "content" }}
   <div class="px-6 py-2 mb-4">
diff --git a/appview/pages/templates/strings/string.html b/appview/pages/templates/strings/string.html
index 9e02de7b..c1a50f35 100644
--- a/appview/pages/templates/strings/string.html
+++ b/appview/pages/templates/strings/string.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .String.Filename }} · by {{ resolve .Owner.DID.String }}{{ end }}
+{{ define "title" }}{{ .String.Filename }} &middot; by {{ resolve .Owner.DID.String }} &middot; Tangled{{ end }}
 
 {{ define "extrameta" }}
   {{ $ownerId := resolve .Owner.DID.String }}
@@ -25,7 +25,7 @@
           {{ if .String.Description }}
             {{ .String.Description }}
           {{ else }}
-            <span class="italic">this string has no description</span>
+            <span class="italic">This string has no description</span>
           {{ end }}
         </span>
       </div>
@@ -36,7 +36,7 @@
              hx-boost="true"
              href="/strings/{{ .String.Did }}/{{ .String.Rkey }}/edit">
             {{ i "pencil" "w-4 h-4" }}
-            <span class="hidden md:inline">edit</span>
+            <span class="hidden md:inline">Edit</span>
             {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
           </a>
           <button
@@ -47,7 +47,7 @@
             hx-confirm="Are you sure you want to delete the string `{{ .String.Filename }}`?"
           >
             {{ i "trash-2" "w-4 h-4" }}
-            <span class="hidden md:inline">delete</span>
+            <span class="hidden md:inline">Delete</span>
             {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
           </button>
         {{ end }}
@@ -76,11 +76,11 @@
         <span class="select-none px-1 md:px-2 [&:before]:content-['·']"></span>
         <span>{{ byteFmt .Stats.ByteCount }}</span>
         <span class="select-none px-1 md:px-2 [&:before]:content-['·']"></span>
-        <a href="/strings/{{ $ownerId }}/{{ .String.Rkey }}/raw">view raw</a>
+        <a href="/strings/{{ $ownerId }}/{{ .String.Rkey }}/raw">View raw</a>
         {{ if .RenderToggle }}
         <span class="select-none px-1 md:px-2 [&:before]:content-['·']"></span>
         <a href="?code={{ .ShowRendered }}" hx-boost="true">
-          view {{ if .ShowRendered }}code{{ else }}rendered{{ end }}
+          View {{ if .ShowRendered }}code{{ else }}rendered{{ end }}
         </a>
         {{ end }}
       </div>
@@ -140,14 +140,14 @@
         >
           {{ i "message-square-plus" "w-4 h-4 inline group-[.htmx-request]/form:hidden" }}
           {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]/form:inline" }}
-          comment
+          Comment
         </button>
       </div>
     </form>
   {{ else }}
     <div class="bg-amber-50 dark:bg-amber-900 border border-amber-500 rounded drop-shadow-sm p-6 relative flex gap-2 items-center">
       <a href="/signup" class="btn-create py-0 hover:no-underline hover:text-white flex items-center gap-2">
-        sign up
+        Sign up
       </a>
       <span class="text-gray-500 dark:text-gray-400">or</span>
       <a href="/login" class="underline">login</a>
diff --git a/appview/pages/templates/strings/timeline.html b/appview/pages/templates/strings/timeline.html
index 60d20bb6..61ec9470 100644
--- a/appview/pages/templates/strings/timeline.html
+++ b/appview/pages/templates/strings/timeline.html
@@ -1,4 +1,4 @@
-{{ define "title" }} all strings {{ end }}
+{{ define "title" }}All strings &middot; Tangled{{ end }}
 
 {{ define "content" }}
   {{ block "timeline" $ }}{{ end }}
diff --git a/appview/pages/templates/timeline/fragments/hero.html b/appview/pages/templates/timeline/fragments/hero.html
index 199e70d9..c35dce59 100644
--- a/appview/pages/templates/timeline/fragments/hero.html
+++ b/appview/pages/templates/timeline/fragments/hero.html
@@ -21,7 +21,7 @@
               class="py-2 w-full md:w-fit"
           />
           <button class="btn-create flex items-center gap-2 text-base whitespace-nowrap" type="submit">
-            join now
+            Join now
             {{ i "arrow-right" "size-4" }}
           </button>
         </form>
diff --git a/appview/pages/templates/timeline/fragments/newsletterForm.html b/appview/pages/templates/timeline/fragments/newsletterForm.html
index 0e37ae57..fcf398e8 100644
--- a/appview/pages/templates/timeline/fragments/newsletterForm.html
+++ b/appview/pages/templates/timeline/fragments/newsletterForm.html
@@ -17,7 +17,7 @@
           placeholder="Enter your email"
           class="py-2 w-full" />
         <button class="btn-create flex items-center gap-2 text-base whitespace-nowrap" type="submit">
-          subscribe
+          Subscribe
           {{ i "arrow-right" "size-4" }}
         </button>
       </span>
@@ -37,7 +37,7 @@
           class="flex-1 min-w-0 text-sm py-2" />
         <button type="submit" class="btn whitespace-nowrap px-4 pb-0 gap-2">
           {{ i "mail-plus" "size-4 inline" }}
-          subscribe
+          Subscribe
         </button>
       </span>
     </form>
diff --git a/appview/pages/templates/timeline/fragments/vouchSuggestions.html b/appview/pages/templates/timeline/fragments/vouchSuggestions.html
index c0baf5e9..d47a477d 100644
--- a/appview/pages/templates/timeline/fragments/vouchSuggestions.html
+++ b/appview/pages/templates/timeline/fragments/vouchSuggestions.html
@@ -7,7 +7,7 @@
           Suggested
         </h3>
         <a href="/{{ .LoggedInUser.Did }}?tab=vouches" class="text-sm font-normal hover:no-underline no-underline flex items-center gap-1 pb-4 pr-4">
-          view all {{ i "arrow-right" "size-3.5" }}
+          View all {{ i "arrow-right" "size-3.5" }}
         </a>
       </div>
       <div class="flex flex-col gap-4 bg-white dark:bg-gray-800 p-4 rounded-sm border border-gray-200 dark:border-gray-700 shadow-sm">
diff --git a/appview/pages/templates/timeline/home.html b/appview/pages/templates/timeline/home.html
index 07383abc..129e95f8 100644
--- a/appview/pages/templates/timeline/home.html
+++ b/appview/pages/templates/timeline/home.html
@@ -1,8 +1,8 @@
-{{ define "title" }}tangled &middot; tightly-knit social coding{{ end }}
+{{ define "title" }}Tangled &middot; The next-generation social coding platform{{ end }}
 
 {{ define "extrameta" }}
     <!-- Open Graph Meta Tags -->
-    <meta property="og:title" content="tangled · tightly-knit social coding" />
+    <meta property="og:title" content="Tangled · The next-generation social coding platform" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://tangled.org" />
     <meta property="og:description" content="The next-generation social coding platform." />
@@ -17,7 +17,7 @@
     <meta name="twitter:image" content="https://assets.tangled.network/tangled_og.png" />
 
     <!-- Additional SEO -->
-    <meta name="description" content="The next-generation social coding platform. Host repos on your infrastructure with knots, use stacked pull requests, and run CI with spindles." />
+    <meta name="description" content="The next-generation social coding platform. Host repositories on your infrastructure with knots, use stacked pull requests, and run CI with spindles." />
     <link rel="canonical" href="https://tangled.org" />
 {{ end }}
 
diff --git a/appview/pages/templates/timeline/timeline.html b/appview/pages/templates/timeline/timeline.html
index 366ccd85..683b8123 100644
--- a/appview/pages/templates/timeline/timeline.html
+++ b/appview/pages/templates/timeline/timeline.html
@@ -1,10 +1,10 @@
-{{ define "title" }}timeline{{ end }}
+{{ define "title" }}Timeline &middot; Tangled{{ end }}
 
 {{ define "extrameta" }}
-    <meta property="og:title" content="timeline · tangled" />
+    <meta property="og:title" content="Timeline · Tangled" />
     <meta property="og:type" content="object" />
     <meta property="og:url" content="https://tangled.org" />
-    <meta property="og:description" content="tightly-knit social coding" />
+    <meta property="og:description" content="The next-generation social coding platform" />
 {{ end }}
 
 {{ define "mainLayout" }}
diff --git a/appview/pages/templates/user/completeSignup.html b/appview/pages/templates/user/completeSignup.html
index 03cb6177..608a2f09 100644
--- a/appview/pages/templates/user/completeSignup.html
+++ b/appview/pages/templates/user/completeSignup.html
@@ -1,4 +1,4 @@
-{{ define "title" }} complete signup {{ end }}
+{{ define "title" }}Complete signup &middot; Tangled{{ end }}
 
 {{ define "content" }}
   <form
@@ -8,7 +8,7 @@
       hx-disabled-elt="#complete-signup-button"
   >
       <div class="flex flex-col">
-          <label for="code">verification code</label>
+          <label for="code">Verification code</label>
           <input
               type="text"
               id="code"
@@ -23,7 +23,7 @@
       </div>
 
       <div class="flex flex-col">
-          <label for="username">username</label>
+          <label for="username">Username</label>
           <input
               type="text"
               id="username"
@@ -38,7 +38,7 @@
       </div>
 
       <div class="flex flex-col">
-          <label for="password">password</label>
+          <label for="password">Password</label>
           <input
               type="password"
               id="password"
@@ -58,7 +58,7 @@
           tabindex="4"
       >
         {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
-        <span class="inline group-[.htmx-request]:hidden">complete signup</span>
+        <span class="inline group-[.htmx-request]:hidden">Complete signup</span>
       </button>
   </form>
   <p id="signup-error" class="error w-full"></p>
diff --git a/appview/pages/templates/user/followers.html b/appview/pages/templates/user/followers.html
index 709c7308..549ccca2 100644
--- a/appview/pages/templates/user/followers.html
+++ b/appview/pages/templates/user/followers.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ resolve .Card.UserDid }} · followers {{ end }}
+{{ define "title" }}Followers &middot; {{ resolve .Card.UserDid }} &middot; Tangled{{ end }}
 
 {{ define "profileContent" }}
   <div id="all-followers" class="md:col-span-8 order-2 md:order-2">
@@ -7,7 +7,7 @@
 {{ end }}
 
 {{ define "followers" }}
-  <p class="text-sm font-bold p-2 dark:text-white">ALL FOLLOWERS</p>
+  <p class="text-base font-medium p-2 dark:text-white">All followers</p>
   <div id="followers" class="grid grid-cols-1 gap-4 mb-6">
     {{ range .Followers }}
        {{ template "user/fragments/followCard"
diff --git a/appview/pages/templates/user/following.html b/appview/pages/templates/user/following.html
index e9556bd8..203dc8b1 100644
--- a/appview/pages/templates/user/following.html
+++ b/appview/pages/templates/user/following.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ resolve .Card.UserDid }} · following {{ end }}
+{{ define "title" }}Following &middot; {{ resolve .Card.UserDid }} &middot; Tangled{{ end }}
 
 {{ define "profileContent" }}
   <div id="all-following" class="md:col-span-8 order-2 md:order-2">
@@ -7,7 +7,7 @@
 {{ end }}
 
 {{ define "following" }}
-  <p class="text-sm font-bold p-2 dark:text-white">ALL FOLLOWING</p>
+  <p class="text-base font-medium p-2 dark:text-white">All following</p>
   <div id="following" class="grid grid-cols-1 gap-4 mb-6">
     {{ range .Following }}
        {{ template "user/fragments/followCard"
diff --git a/appview/pages/templates/user/fragments/editAvatar.html b/appview/pages/templates/user/fragments/editAvatar.html
index ab82c216..ae719318 100644
--- a/appview/pages/templates/user/fragments/editAvatar.html
+++ b/appview/pages/templates/user/fragments/editAvatar.html
@@ -4,8 +4,8 @@
   hx-encoding="multipart/form-data"
   hx-swap="none"
   class="flex flex-col gap-2 group/form">
-  <label for="avatar-file" class="uppercase p-0">
-    Upload or Remove Avatar
+  <label for="avatar-file" class="text-lg font-medium p-0">
+    Upload or remove avatar
   </label>
   <p class="text-sm text-gray-500 dark:text-gray-400">Upload a new image (PNG or JPEG, max 5MB) or remove your current avatar.</p>
   <input
@@ -25,7 +25,7 @@
     <button type="submit" class="btn w-full flex items-center justify-center gap-2">
         {{ i "upload" "size-4 inline group-[.htmx-request]/form:hidden" }}
         {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]/form:inline" }}
-        upload
+        Upload
     </button>
     {{ if .Profile.Avatar }}
       <button
@@ -36,7 +36,7 @@
         class="btn w-full flex items-center justify-center gap-2 group">
         {{ i "trash-2" "size-4 inline group-[.htmx-request]:hidden" }}
         {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
-        remove avatar
+        Remove avatar
       </button>
     {{ end }}
     <button
@@ -46,7 +46,7 @@
       popovertargetaction="hide"
       class="btn text-red-500 dark:text-red-400 w-full flex items-center justify-center gap-2">
       {{ i "x" "size-4" }}
-      cancel
+      Cancel
     </button>
   </div>
   <div id="avatar-error" class="text-red-500 dark:text-red-400 text-sm"></div>
diff --git a/appview/pages/templates/user/fragments/editBio.html b/appview/pages/templates/user/fragments/editBio.html
index 25dd6a41..8673a671 100644
--- a/appview/pages/templates/user/fragments/editBio.html
+++ b/appview/pages/templates/user/fragments/editBio.html
@@ -10,17 +10,17 @@
       {{ if and .Profile .Profile.Description }}
         {{ $description = .Profile.Description }}
       {{ end }}
-      <label class="m-0 p-0" for="description">bio</label>
+      <label class="m-0 p-0" for="description">Bio</label>
       <textarea 
         type="text" 
         class="p-2 w-full" 
         name="description" 
         rows="3"
-        placeholder="write a bio">{{ $description }}</textarea>
+        placeholder="Write a bio">{{ $description }}</textarea>
     </div>
 
     <div class="flex flex-col gap-1">
-      <label class="m-0 p-0" for="pronouns">pronouns</label>
+      <label class="m-0 p-0" for="pronouns">Pronouns</label>
       <div class="flex items-center gap-2 w-full">
         {{ $pronouns := "" }}
         {{ if and .Profile .Profile.Pronouns }}
@@ -38,7 +38,7 @@
 
     {{ if gt (len .AlsoKnownAs) 1 }}
       <div class="flex flex-col gap-1">
-        <label class="m-0 p-0" for="preferredHandle">preferred handle</label>
+        <label class="m-0 p-0" for="preferredHandle">Preferred handle</label>
         <div class="flex items-center gap-2 w-full">
           {{ $preferredHandle := "" }}
           {{ if and .Profile .Profile.PreferredHandle }}
@@ -56,7 +56,7 @@
     {{ end }}
 
     <div class="flex flex-col gap-1">
-      <label class="m-0 p-0" for="location">location</label>
+      <label class="m-0 p-0" for="location">Location</label>
       <div class="flex items-center gap-2 w-full">
         {{ $location := "" }}
         {{ if and .Profile .Profile.Location }}
@@ -68,7 +68,7 @@
     </div>
 
     <div class="flex flex-col gap-1">
-      <label class="m-0 p-0">social links</label>
+      <label class="m-0 p-0">Social links</label>
       <div class="flex items-center gap-2 py-1">
         {{ $includeBsky := false }}
         {{ if and .Profile .Profile.IncludeBluesky }}
@@ -89,13 +89,13 @@
 
         <div class="flex items-center gap-2 w-full">
           <span class="flex-shrink-0">{{ i "link" "size-4" }}</span>
-          <input type="text" class="py-1 px-1 w-full" name="link{{$idx}}" value="{{ $link }}" placeholder="social link {{add $idx 1}}">
+          <input type="text" class="py-1 px-1 w-full" name="link{{$idx}}" value="{{ $link }}" placeholder="Social link {{add $idx 1}}">
         </div>
       {{ end }}
     </div>
 
     <div class="flex flex-col gap-1">
-      <label class="m-0 p-0">vanity stats</label>
+      <label class="m-0 p-0">Vanity stats</label>
       {{ range $idx, $s := (sequence 2) }}
           {{ $stat := "" }}
           {{ if and $profile $profile.Stats }}
@@ -111,14 +111,14 @@
 
     <div class="flex items-center gap-2 justify-between">
       <button id="save-btn" type="submit" class="btn p-1 w-full flex items-center gap-2 no-underline text-sm">
-        {{ i "check" "size-4" }} save
+        {{ i "check" "size-4" }} Save
         <span id="spinner" class="group">
           {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
         </span>
       </button>
       <a href="/{{.LoggedInUser.Did}}" class="w-full no-underline hover:no-underline">
         <button id="cancel-btn" type="button" class="btn p-1 w-full flex items-center gap-2 no-underline text-sm">
-          {{ i "x" "size-4" }} cancel
+          {{ i "x" "size-4" }} Cancel
         </button>
       </a>
     </div>
diff --git a/appview/pages/templates/user/fragments/editPins.html b/appview/pages/templates/user/fragments/editPins.html
index e5120628..1392be39 100644
--- a/appview/pages/templates/user/fragments/editPins.html
+++ b/appview/pages/templates/user/fragments/editPins.html
@@ -6,17 +6,17 @@
         hx-swap="none"
         hx-indicator="#spinner">
       <div class="flex items-center justify-between mb-2">
-        <p class="text-sm font-bold p-2 dark:text-white">SELECT PINNED REPOS</p>
+        <p class="text-lg font-medium p-2 dark:text-white">Select pinned repositories</p>
         <div class="flex items-center gap-2">
           <button id="save-btn" type="submit" class="btn px-2 flex items-center gap-2 no-underline text-sm">
-            {{ i "check" "w-3 h-3" }} save 
+            {{ i "check" "w-3 h-3" }} Save 
             <span id="spinner" class="group">
               {{ i "loader-circle" "w-3 h-3 animate-spin hidden group-[.htmx-request]:inline" }}
             </span>
           </button>
           <a href="/{{.LoggedInUser.Did}}" class="w-full no-underline hover:no-underline">
             <button id="cancel-btn" type="button" class="btn px-2 w-full flex items-center gap-2 no-underline text-sm">
-              {{ i "x" "w-3 h-3" }} cancel
+              {{ i "x" "w-3 h-3" }} Cancel
             </button>
           </a>
         </div>
diff --git a/appview/pages/templates/user/fragments/follow.html b/appview/pages/templates/user/fragments/follow.html
index 08c0166d..4e8a4d8f 100644
--- a/appview/pages/templates/user/fragments/follow.html
+++ b/appview/pages/templates/user/fragments/follow.html
@@ -15,11 +15,11 @@
     {{ if eq .FollowStatus.String "IsNotFollowing" }}
       {{ i "user-round-plus" "size-4 inline group-[.htmx-request]:hidden" }} 
       {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
-      follow
+      Follow
     {{ else }}
       {{ i "user-round-minus" "size-4 inline group-[.htmx-request]:hidden" }} 
       {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
-      unfollow
+      Unfollow
     {{ end }}
   </button>
 {{ end }}
diff --git a/appview/pages/templates/user/fragments/networkVouches.html b/appview/pages/templates/user/fragments/networkVouches.html
index e235b9a4..450d0022 100644
--- a/appview/pages/templates/user/fragments/networkVouches.html
+++ b/appview/pages/templates/user/fragments/networkVouches.html
@@ -19,7 +19,7 @@
         {{ if $denounces }} border-t {{ else }} border-y {{ end }}
         ">
         <a class="text-sm text-green-800 dark:text-green-200 hover:no-underline" href="/{{ .SubjectDid.String }}?tab=vouches">
-          vouched for by {{ len $vouches }} {{ if eq (len $vouches) 1 }}user{{ else }}users{{ end }}
+          Vouched for by {{ len $vouches }} {{ if eq (len $vouches) 1 }}user{{ else }}users{{ end }}
         </a>
         {{ template "fragments/tinyAvatarList" (dict "all" $vouches "classes" "size-6") }}
       </div>
@@ -33,7 +33,7 @@
         {{ if $vouches }} border-b {{ else }} border-y {{ end }}
         ">
         <a class="text-sm text-red-800 dark:text-red-200 hover:no-underline" href="/{{ .SubjectDid.String }}?tab=vouches">
-          denounced by {{ len $denounces }} {{ if eq (len $denounces) 1 }}user{{ else }}users{{ end }}
+          Denounced by {{ len $denounces }} {{ if eq (len $denounces) 1 }}user{{ else }}users{{ end }}
         </a>
         {{ template "fragments/tinyAvatarList" (dict "all" $denounces "classes" "size-6") }}
       </div>
diff --git a/appview/pages/templates/user/fragments/profileCard.html b/appview/pages/templates/user/fragments/profileCard.html
index 1b912508..4921c51d 100644
--- a/appview/pages/templates/user/fragments/profileCard.html
+++ b/appview/pages/templates/user/fragments/profileCard.html
@@ -97,7 +97,7 @@
           hx-get="/profile/edit-bio"
           hx-swap="innerHTML">
           {{ i "pencil" "w-4 h-4" }}
-          edit
+          Edit
           {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
         </button>
         {{ end }}
@@ -158,7 +158,7 @@
         {{ template "repo/fragments/shortTime" .CreatedAt }}
       </div>
       <div class="absolute inset-0 flex items-center gap-1 justify-center opacity-0 group-hover/item:opacity-100 transition-opacity text-xs font-medium text-green-900 dark:text-green-100">
-        view {{ i "arrow-right" "size-3" }}
+        View {{ i "arrow-right" "size-3" }}
       </div>
     </div>
   </div>
diff --git a/appview/pages/templates/user/fragments/vouchButton.html b/appview/pages/templates/user/fragments/vouchButton.html
index 3b97c2c6..b6341e46 100644
--- a/appview/pages/templates/user/fragments/vouchButton.html
+++ b/appview/pages/templates/user/fragments/vouchButton.html
@@ -22,11 +22,11 @@
   popovertargetaction="toggle"
   class="{{ if $isVouched }}btn-create{{else if $isDenounced}}btn-cancel{{else}}btn{{end}} w-full flex gap-2 items-center justify-center">
   {{ if $isVouched }}
-    {{ i "shield-check" "size-4" }} vouched
+    {{ i "shield-check" "size-4" }} Vouched
   {{ else if $isDenounced }}
-    {{ i "shield-off" "size-4" }} denounced
+    {{ i "shield-off" "size-4" }} Denounced
   {{ else }}
-    {{ i "shield-question-mark" "size-4" }} vouch
+    {{ i "shield-question-mark" "size-4" }} Vouch
   {{ end }}
 </button>
 {{ end }}
diff --git a/appview/pages/templates/user/fragments/vouchPopover.html b/appview/pages/templates/user/fragments/vouchPopover.html
index 254fea51..7cb27ba4 100644
--- a/appview/pages/templates/user/fragments/vouchPopover.html
+++ b/appview/pages/templates/user/fragments/vouchPopover.html
@@ -141,14 +141,14 @@
         popovertargetaction="hide"
         class="btn flex-1 flex items-center justify-center gap-2">
         {{ i "x" "size-4" }}
-        cancel
+        Cancel
       </button>
       <button
         type="submit"
         class="btn-create flex-1 flex items-center justify-center gap-2 text-white group">
         {{ i "check" "size-4 inline group-[.htmx-request]:hidden" }}
         {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
-        {{ if and $vr $vr.GetDirectVouch }} update {{ else }} save {{end}}
+        {{ if and $vr $vr.GetDirectVouch }} Update {{ else }} Save {{end}}
       </button>
     </div>
   </form>
diff --git a/appview/pages/templates/user/login.html b/appview/pages/templates/user/login.html
index b9533c57..29adfeb0 100644
--- a/appview/pages/templates/user/login.html
+++ b/appview/pages/templates/user/login.html
@@ -1,4 +1,4 @@
-{{ define "title" }} login {{ end }}
+{{ define "title" }}Login &middot; Tangled{{ end }}
 
 {{ define "content" }}
   {{ if .AddAccount }}
@@ -14,7 +14,7 @@
   {{ if .Accounts }}
   <div class="my-4 border border-gray-200 dark:border-gray-700 rounded overflow-hidden">
       <div class="px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
-          <span class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide font-medium">Saved accounts</span>
+          <span class="text-xs text-gray-500 dark:text-gray-400 tracking-wide font-medium">Saved accounts</span>
       </div>
       <div class="divide-y divide-gray-200 dark:divide-gray-700">
           {{ range .Accounts }}
@@ -57,7 +57,7 @@
       hx-disabled-elt="#login-button"
   >
       <div class="flex flex-col">
-          <label for="handle">handle</label>
+          <label for="handle">Handle</label>
           <input
               autocapitalize="none"
               autocorrect="off"
@@ -85,7 +85,7 @@
           tabindex="3"
       >
       {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
-      <span class="inline group-[.htmx-request]:hidden">login</span>
+      <span class="inline group-[.htmx-request]:hidden">Login</span>
       </button>
   </form>
   {{ if .ErrorCode }}
diff --git a/appview/pages/templates/user/overview.html b/appview/pages/templates/user/overview.html
index fb27ec18..922f8b45 100644
--- a/appview/pages/templates/user/overview.html
+++ b/appview/pages/templates/user/overview.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ resolve .Card.UserDid }}{{ end }}
+{{ define "title" }}{{ resolve .Card.UserDid }} &middot; Tangled{{ end }}
 
 {{ define "profileContent" }}
   <div id="all-repos" class="md:col-span-4 order-2 md:order-2">
@@ -13,7 +13,7 @@
 {{ end }}
 
 {{ define "profileTimeline" }}
-  <p class="text-sm font-bold px-2 pb-4 dark:text-white">ACTIVITY</p>
+  <p class="text-base font-medium px-2 pb-4 dark:text-white">Activity</p>
   <div class="flex flex-col gap-4 relative">
     {{ if .ProfileTimeline.IsEmpty }}
       <div class="text-base text-gray-500 flex items-center justify-center italic p-12 border border-gray-200 dark:border-gray-700 rounded">
@@ -30,7 +30,7 @@
             <div class="border border-gray-200 dark:border-gray-700 rounded-sm py-4 px-6">
             <p class="text-sm font-mono mb-2 text-gray-500 dark:text-gray-400">
               {{ if eq $idx 0 }}
-                this month
+                This month
               {{ else }}
                 {{$idx}} month{{if ne $idx 1}}s{{end}} ago
               {{ end }}
@@ -54,7 +54,7 @@
   {{ if . }}
     <div class="flex flex-wrap items-center gap-1">
       {{ i "git-commit-horizontal" "size-5" }}
-      created {{ scaleFmt . }} commits
+      Created {{ scaleFmt . }} commits
     </div>
   {{ end }}
 {{ end }}
@@ -65,7 +65,7 @@
       <summary class="list-none cursor-pointer hover:text-gray-500 hover:dark:text-gray-400">
         <div class="flex flex-wrap items-center gap-2">
           {{ i "book-plus" "w-4 h-4" }}
-          created {{ scaleFmt (len .) }} {{if eq (len .) 1 }}repository{{else}}repositories{{end}}
+          Created {{ scaleFmt (len .) }} {{if eq (len .) 1 }}repository{{else}}repositories{{end}}
         </div>
       </summary>
       <div class="py-2 text-sm flex flex-col gap-3 mb-2">
@@ -110,7 +110,7 @@
           {{ i "circle-dot" "w-4 h-4" }}
 
           <div>
-            created {{ scaleFmt (len $items) }} {{if eq (len $items) 1 }}issue{{else}}issues{{end}} 
+            Created {{ scaleFmt (len $items) }} {{if eq (len $items) 1 }}issue{{else}}issues{{end}} 
           </div>
 
           {{ if gt $stats.Open 0 }}
@@ -146,7 +146,7 @@
           {{ i "git-pull-request" "w-4 h-4" }}
 
           <div>
-            created {{ scaleFmt (len $items) }} {{if eq (len $items) 1 }}pull request{{else}}pull requests{{end}} 
+            Created {{ scaleFmt (len $items) }} {{if eq (len $items) 1 }}pull request{{else}}pull requests{{end}} 
           </div>
 
           {{ if gt $stats.Open 0 }}
@@ -181,10 +181,10 @@
 
 {{ define "ownRepos" }}
   <div>
-    <div class="text-sm font-bold px-2 pb-4 dark:text-white flex items-center gap-2">
+    <div class="text-base font-medium px-2 pb-4 dark:text-white flex items-center gap-2">
       <a href="/{{ resolve $.Card.UserDid }}?tab=repos"
         class="flex text-black dark:text-white items-center gap-2 no-underline hover:no-underline group">
-        <span>PINNED REPOS</span>
+        <span>Pinned repositories</span>
       </a>
       {{ if and .LoggedInUser (eq .LoggedInUser.Did .Card.UserDid) }}
         <button
@@ -208,7 +208,7 @@
               <span class="truncate min-w-0">{{ resolve .Did }}/{{ .Name }}</span>
             </div>
             <div class="text-gray-500 dark:text-gray-400 text-sm italic">
-              This repo is hosted on a legacy knot that ought to be upgraded.
+              This repository is hosted on a legacy knot that ought to be upgraded.
             </div>
           </div>
         {{ end }}
@@ -216,7 +216,7 @@
       {{ else }}
         <div class="text-base text-gray-500 flex items-center justify-center italic p-12 border border-gray-200 dark:border-gray-700 rounded">
           <span class="flex items-center gap-2">
-            This user does not have any pinned repos.
+            This user does not have any pinned repositories.
           </span>
         </div>
       {{ end }}
@@ -227,7 +227,7 @@
 {{ define "collaboratingRepos" }}
   {{ if gt (len .CollaboratingRepos) 0 }}
     <div>
-      <p class="text-sm font-bold px-2 pb-4 dark:text-white">COLLABORATING ON</p>
+      <p class="text-base font-medium px-2 pb-4 dark:text-white">Collaborating on</p>
       <div id="collaborating" class="grid grid-cols-1 gap-4">
         {{ range .CollaboratingRepos }}
         <div class="border border-gray-200 dark:border-gray-700 rounded-sm">
@@ -240,7 +240,7 @@
                 <span class="truncate min-w-0">{{ resolve .Did }}/{{ .Name }}</span>
               </div>
               <div class="text-gray-500 dark:text-gray-400 text-sm italic">
-                This repo is hosted on a legacy knot that ought to be upgraded.
+                This repository is hosted on a legacy knot that ought to be upgraded.
               </div>
             </div>
           {{ end }}
diff --git a/appview/pages/templates/user/repos.html b/appview/pages/templates/user/repos.html
index 9ae8ffd1..872aff72 100644
--- a/appview/pages/templates/user/repos.html
+++ b/appview/pages/templates/user/repos.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ resolve .Card.UserDid }} · repos {{ end }}
+{{ define "title" }}Repositories &middot; {{ resolve .Card.UserDid }} &middot; Tangled{{ end }}
 
 {{ define "profileContent" }}
   <div id="all-repos" class="md:col-span-8 order-2 md:order-2">
@@ -12,7 +12,7 @@
             type="text"
             name="q"
             value="{{ .FilterQuery }}"
-            placeholder="search repos..."
+            placeholder="Search repositories..."
           >
           <a
             {{ if .FilterQuery }}href="?tab=repos"{{ else }}href="#"{{ end }}
@@ -56,7 +56,7 @@
       </div>
     {{ else }}
         <div class="text-base text-gray-500 flex items-center justify-center italic p-12 border border-gray-200 dark:border-gray-700 rounded">
-          <span>This user does not have any repos yet.</span>
+          <span>This user does not have any repositories yet.</span>
         </div>
     {{ end }}
   </div>
diff --git a/appview/pages/templates/user/settings/emails.html b/appview/pages/templates/user/settings/emails.html
index 171fce1b..a7949f6f 100644
--- a/appview/pages/templates/user/settings/emails.html
+++ b/appview/pages/templates/user/settings/emails.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .Tab }} settings{{ end }}
+{{ define "title" }}{{ .Tab | capitalize }} settings &middot; Tangled{{ end }}
 
 {{ define "content" }}
   <div class="p-6">
@@ -19,7 +19,7 @@
 {{ define "emailSettings" }}
   <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
     <div class="col-span-1 md:col-span-2">
-      <h2 class="text-sm pb-2 uppercase font-bold">Email Addresses</h2>
+      <h2 class="text-lg pb-2 font-medium">Email addresses</h2>
       <p class="text-gray-500 dark:text-gray-400">
         Commits authored using emails listed here will be associated with your Tangled profile.
       </p>
@@ -33,7 +33,7 @@
       {{ template "user/settings/fragments/emailListing" (list $ .) }}
     {{ else }}
       <div class="flex items-center justify-center p-2 text-gray-500">
-        no emails added yet
+        No emails added yet
       </div>
     {{ end }}
   </div>
@@ -45,7 +45,7 @@
     popovertarget="add-email-modal"
     popovertargetaction="toggle">
     {{ i "plus" "size-4" }}
-    add email
+    Add email
   </button>
   <div
     id="add-email-modal"
@@ -62,8 +62,8 @@
   hx-swap="none"
   class="flex flex-col gap-2"
 >
-  <label for="email-address" class="uppercase p-0">
-    add email
+  <label for="email-address" class="text-lg font-medium p-0">
+    Add email
   </label>
   <p class="text-sm text-gray-500 dark:text-gray-400">Commits using this email will be associated with your profile.</p>
   <input
@@ -81,10 +81,10 @@
       popovertargetaction="hide"
       class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
       >
-      {{ i "x" "size-4" }} cancel
+      {{ i "x" "size-4" }} Cancel
     </button>
     <button type="submit" class="btn w-1/2 flex items-center">
-      <span class="inline-flex gap-2 items-center">{{ i "plus" "size-4" }} add</span>
+      <span class="inline-flex gap-2 items-center">{{ i "plus" "size-4" }} Add</span>
       <span id="spinner" class="group">
         {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
       </span>
diff --git a/appview/pages/templates/user/settings/fragments/dangerDeleteToken.html b/appview/pages/templates/user/settings/fragments/dangerDeleteToken.html
index bf47c807..7916b401 100644
--- a/appview/pages/templates/user/settings/fragments/dangerDeleteToken.html
+++ b/appview/pages/templates/user/settings/fragments/dangerDeleteToken.html
@@ -1,24 +1,24 @@
 {{ define "user/settings/fragments/dangerDeleteToken" }}
 <div id="delete-form-container" hx-swap-oob="innerHTML">
-  <label class="uppercase text-sm font-bold p-0 text-red-600 dark:text-red-400">Delete account</label>
+  <label class="text-lg font-medium p-0 text-red-600 dark:text-red-400">Delete account</label>
   <p class="text-sm text-gray-500 dark:text-gray-400 pt-1">Check your email for an account deletion code.</p>
   <form hx-post="/settings/delete/confirm" hx-swap="none" hx-confirm="This will permanently delete your account. This cannot be undone. Continue?" hx-disabled-elt="find button[type='submit']" class="flex flex-col gap-3 pt-2">
     <div class="flex flex-col">
-      <label for="delete-token">deletion code</label>
+      <label for="delete-token">Deletion code</label>
       <input type="text" id="delete-token" name="token" required autocomplete="off" placeholder="xxxx-xxxx" />
     </div>
     <div class="flex flex-col">
-      <label for="delete-password-confirm">password</label>
+      <label for="delete-password-confirm">Password</label>
       <input type="password" id="delete-password-confirm" name="password" required autocomplete="current-password" />
     </div>
     <div class="flex flex-col">
-      <label for="delete-confirmation">confirmation</label>
+      <label for="delete-confirmation">Confirmation</label>
       <input type="text" id="delete-confirmation" name="confirmation" required autocomplete="off" placeholder="delete my account" />
       <span class="text-sm text-gray-500 mt-1">Type <strong>delete my account</strong> to confirm.</span>
     </div>
     <div class="flex gap-2 pt-2">
-      <button type="button" popovertarget="delete-modal" popovertargetaction="hide" class="btn w-1/2 flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">cancel</button>
-      <button type="submit" class="btn w-1/2 flex items-center justify-center gap-2 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">delete account</button>
+      <button type="button" popovertarget="delete-modal" popovertargetaction="hide" class="btn w-1/2 flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">Cancel</button>
+      <button type="submit" class="btn w-1/2 flex items-center justify-center gap-2 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">Delete account</button>
     </div>
     <div id="delete-error" class="text-red-500 dark:text-red-400 text-sm empty:hidden"></div>
   </form>
diff --git a/appview/pages/templates/user/settings/fragments/dangerPasswordSuccess.html b/appview/pages/templates/user/settings/fragments/dangerPasswordSuccess.html
index 035588d7..e5e53508 100644
--- a/appview/pages/templates/user/settings/fragments/dangerPasswordSuccess.html
+++ b/appview/pages/templates/user/settings/fragments/dangerPasswordSuccess.html
@@ -1,6 +1,6 @@
 {{ define "user/settings/fragments/dangerPasswordSuccess" }}
 <div id="password-form-container" hx-swap-oob="innerHTML">
-  <label class="uppercase text-sm font-bold p-0">Change password</label>
+  <label class="text-lg font-medium p-0">Change password</label>
   <p class="text-green-500 dark:text-green-400 pt-2">Password changed.</p>
 </div>
 {{ end }}
diff --git a/appview/pages/templates/user/settings/fragments/dangerPasswordToken.html b/appview/pages/templates/user/settings/fragments/dangerPasswordToken.html
index 1b7df93f..b3d94dae 100644
--- a/appview/pages/templates/user/settings/fragments/dangerPasswordToken.html
+++ b/appview/pages/templates/user/settings/fragments/dangerPasswordToken.html
@@ -1,23 +1,23 @@
 {{ define "user/settings/fragments/dangerPasswordToken" }}
 <div id="password-form-container" hx-swap-oob="innerHTML">
-  <label class="uppercase text-sm font-bold p-0">Change password</label>
+  <label class="text-lg font-medium p-0">Change password</label>
   <p class="text-sm text-gray-500 dark:text-gray-400 pt-1">Check your email for a password reset code.</p>
   <form hx-post="/settings/password/reset" hx-swap="none" hx-disabled-elt="find button[type='submit']" class="flex flex-col gap-3 pt-2">
     <div class="flex flex-col">
-      <label for="token">reset code</label>
+      <label for="token">Reset code</label>
       <input type="text" id="token" name="token" required autocomplete="off" placeholder="xxxx-xxxx" />
     </div>
     <div class="flex flex-col">
-      <label for="new-password">new password</label>
+      <label for="new-password">New password</label>
       <input type="password" id="new-password" name="new_password" required autocomplete="new-password" />
     </div>
     <div class="flex flex-col">
-      <label for="confirm-password">confirm new password</label>
+      <label for="confirm-password">Confirm new password</label>
       <input type="password" id="confirm-password" name="confirm_password" required autocomplete="new-password" />
     </div>
     <div class="flex gap-2 pt-2">
-      <button type="button" popovertarget="change-password-modal" popovertargetaction="hide" class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">cancel</button>
-      <button type="submit" class="btn w-1/2 flex items-center justify-center gap-2">set new password</button>
+      <button type="button" popovertarget="change-password-modal" popovertargetaction="hide" class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">Cancel</button>
+      <button type="submit" class="btn w-1/2 flex items-center justify-center gap-2">Set new password</button>
     </div>
     <div id="password-error" class="text-red-500 dark:text-red-400 text-sm empty:hidden"></div>
   </form>
diff --git a/appview/pages/templates/user/settings/fragments/emailListing.html b/appview/pages/templates/user/settings/fragments/emailListing.html
index da9c2956..7bb80056 100644
--- a/appview/pages/templates/user/settings/fragments/emailListing.html
+++ b/appview/pages/templates/user/settings/fragments/emailListing.html
@@ -10,12 +10,12 @@
         </span>
         <div class="inline-flex items-center gap-1">
           {{ if $email.Verified }}
-          <span class="text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 rounded">verified</span>
+          <span class="text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 rounded">Verified</span>
           {{ else }}
-          <span class="text-xs bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 px-2 py-1 rounded">unverified</span>
+          <span class="text-xs bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 px-2 py-1 rounded">Unverified</span>
           {{ end }}
           {{ if $email.Primary }}
-          <span class="text-xs bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-2 py-1 rounded">primary</span>
+          <span class="text-xs bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-2 py-1 rounded">Primary</span>
           {{ end }}
         </div>
       </div>
@@ -31,7 +31,7 @@
         hx-swap="none"
         hx-vals='{"email": "{{ $email.Address }}"}'>
         {{ i "rotate-cw" "w-4 h-4" }}
-        <span class="hidden md:inline">resend</span>
+        <span class="hidden md:inline">Resend</span>
       </button>
       {{ end }}
       {{ if and (not $email.Primary) $email.Verified }}
@@ -40,7 +40,7 @@
         hx-post="/settings/emails/primary"
         hx-swap="none"
         hx-vals='{"email": "{{ $email.Address }}"}'>
-        set as primary
+        Set as primary
       </button>
       {{ end }}
       {{ if not $email.Primary }}
@@ -53,7 +53,7 @@
         hx-confirm="Are you sure you want to delete the email {{ $email.Address }}?"
       >
         {{ i "trash-2" "w-5 h-5" }}
-        <span class="hidden md:inline">delete</span>
+        <span class="hidden md:inline">Delete</span>
         {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
       </button>
       {{ end }}
diff --git a/appview/pages/templates/user/settings/fragments/keyListing.html b/appview/pages/templates/user/settings/fragments/keyListing.html
index a645f3f9..718134aa 100644
--- a/appview/pages/templates/user/settings/fragments/keyListing.html
+++ b/appview/pages/templates/user/settings/fragments/keyListing.html
@@ -24,7 +24,7 @@
       hx-confirm="Are you sure you want to delete the key {{ $key.Name }}?"
     >
       {{ i "trash-2" "w-5 h-5" }}
-      <span class="hidden md:inline">delete</span>
+      <span class="hidden md:inline">Delete</span>
       {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
     </button>
   </div>
diff --git a/appview/pages/templates/user/settings/fragments/sidebar.html b/appview/pages/templates/user/settings/fragments/sidebar.html
index 2b781d4c..627c1ddb 100644
--- a/appview/pages/templates/user/settings/fragments/sidebar.html
+++ b/appview/pages/templates/user/settings/fragments/sidebar.html
@@ -7,7 +7,7 @@
     <a href="/settings/{{.Name}}" class="no-underline hover:no-underline hover:bg-gray-100/25 hover:dark:bg-gray-700/25">
       <div class="flex gap-3 items-center p-2 {{ if eq .Name $active }} {{ $activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}">
         {{ i .Icon "size-4" }}
-        {{ .Name }}
+        {{ .Label }}
       </div>
     </a>
     {{ end }}
diff --git a/appview/pages/templates/user/settings/keys.html b/appview/pages/templates/user/settings/keys.html
index 221e0720..730b8528 100644
--- a/appview/pages/templates/user/settings/keys.html
+++ b/appview/pages/templates/user/settings/keys.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .Tab }} settings{{ end }}
+{{ define "title" }}{{ .Tab | capitalize }} settings &middot; Tangled{{ end }}
 
 {{ define "content" }}
   <div class="p-6">
@@ -19,7 +19,7 @@
 {{ define "sshKeysSettings" }}
   <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
     <div class="col-span-1 md:col-span-2">
-      <h2 class="text-sm pb-2 uppercase font-bold">SSH Keys</h2>
+      <h2 class="text-lg pb-2 font-medium">SSH keys</h2>
       <p class="text-gray-500 dark:text-gray-400">
         SSH public keys added here will be broadcasted to knots that you are a member of,
         allowing you to push to repositories there.
@@ -34,7 +34,7 @@
       {{ template "user/settings/fragments/keyListing" (list $ .) }}
     {{ else }}
       <div class="flex items-center justify-center p-2 text-gray-500">
-        no keys added yet
+        No keys added yet
       </div>
     {{ end }}
   </div>
@@ -46,7 +46,7 @@
     popovertarget="add-key-modal"
     popovertargetaction="toggle">
     {{ i "plus" "size-4" }}
-    add key
+    Add key
   </button>
   <div
     id="add-key-modal"
@@ -63,16 +63,16 @@
   hx-swap="none"
   class="flex flex-col gap-2"
 >
-  <label for="key-name" class="uppercase p-0">
-      add ssh key
-    </label>
+  <label for="key-name" class="text-lg font-medium p-0">
+    Add SSH key
+  </label>
   <p class="text-sm text-gray-500 dark:text-gray-400">SSH keys allow you to push to repositories in knots you're a member of.</p>
   <input
     type="text"
     id="key-name"
     name="name"
     required
-    placeholder="key name"
+    placeholder="Key name"
     class="w-full dark:bg-gray-800 dark:text-white dark:border-gray-700 dark:placeholder-gray-400"
   />
   <textarea
@@ -89,10 +89,10 @@
       popovertargetaction="hide"
       class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
       >
-      {{ i "x" "size-4" }} cancel
+      {{ i "x" "size-4" }} Cancel
     </button>
     <button type="submit" class="btn w-1/2 flex items-center">
-      <span class="inline-flex gap-2 items-center">{{ i "plus" "size-4" }} add</span>
+      <span class="inline-flex gap-2 items-center">{{ i "plus" "size-4" }} Add</span>
       <span id="spinner" class="group">
         {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
       </span>
diff --git a/appview/pages/templates/user/settings/notifications.html b/appview/pages/templates/user/settings/notifications.html
index ed6138a3..add0b421 100644
--- a/appview/pages/templates/user/settings/notifications.html
+++ b/appview/pages/templates/user/settings/notifications.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .Tab }} settings{{ end }}
+{{ define "title" }}{{ .Tab | capitalize }} settings &middot; Tangled{{ end }}
 
 {{ define "content" }}
   <div class="p-6">
@@ -19,7 +19,7 @@
 {{ define "notificationSettings" }}
   <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
     <div class="col-span-1 md:col-span-2">
-      <h2 class="text-sm pb-2 uppercase font-bold">Notification Preferences</h2>
+      <h2 class="text-lg pb-2 font-medium">Notification preferences</h2>
       <p class="text-gray-500 dark:text-gray-400">
         Choose which notifications you want to receive when activity happens on your repositories and profile.
       </p>
@@ -176,7 +176,7 @@
         class="btn-create flex items-center gap-2 group"
       >
         {{ i "save" "w-4 h-4" }}
-        save
+        Save
         {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
       </button>
     </div>
diff --git a/appview/pages/templates/user/settings/profile.html b/appview/pages/templates/user/settings/profile.html
index 0a876633..fd9000aa 100644
--- a/appview/pages/templates/user/settings/profile.html
+++ b/appview/pages/templates/user/settings/profile.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .Tab }} settings{{ end }}
+{{ define "title" }}{{ .Tab | capitalize }} settings &middot; Tangled{{ end }}
 
 {{ define "content" }}
   <div class="p-6">
@@ -22,7 +22,7 @@
 
 {{ define "profile" }}
   <div>
-    <h2 class="text-sm uppercase font-bold">Profile</h2>
+    <h2 class="text-lg font-medium">Profile</h2>
     <p class="text-gray-500 dark:text-gray-400 pb-2">
       Your account information from your AT Protocol identity.
     </p>
@@ -36,9 +36,9 @@
               <button
                 popovertarget="change-handle-modal"
                 popovertargetaction="toggle"
-                class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer">change</button>
+                class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer">Change</button>
             {{ else }}
-              <a href="/settings/handle" class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">change</a>
+              <a href="/settings/handle" class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">Change</a>
             {{ end }}
           {{ end }}
         </div>
@@ -58,7 +58,7 @@
         popover
         class="bg-white w-full md:w-96 dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 drop-shadow dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50">
         <div id="handle-subdomain" class="flex flex-col gap-3">
-          <label class="uppercase text-sm font-bold p-0">Change handle</label>
+          <label class="text-lg font-medium p-0">Change handle</label>
           <form hx-post="/settings/handle" hx-swap="none" class="flex flex-col gap-3">
             <input type="hidden" name="type" value="subdomain">
             <div class="flex items-stretch rounded border border-gray-200 dark:border-gray-600 overflow-hidden focus-within:ring-1 focus-within:ring-blue-500 dark:bg-gray-700">
@@ -67,17 +67,17 @@
             </div>
             <div class="flex gap-2 pt-2">
               <button type="button" popovertarget="change-handle-modal" popovertargetaction="hide" class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
-                {{ i "x" "size-4" }} cancel
+                {{ i "x" "size-4" }} Cancel
               </button>
               <button type="submit" class="btn w-1/2 flex items-center justify-center gap-2">
-                {{ i "check" "size-4" }} save
+                {{ i "check" "size-4" }} Save
               </button>
             </div>
           </form>
           <a href="#" id="switch-to-custom" class="text-sm text-gray-400 underline hover:text-gray-600 dark:hover:text-gray-300">I have my own domain</a>
         </div>
         <div id="handle-custom" style="display: none;" class="flex flex-col gap-3">
-          <label class="uppercase text-sm font-bold p-0">Change handle</label>
+          <label class="text-lg font-medium p-0">Change handle</label>
           <form hx-post="/settings/handle" hx-swap="none" class="flex flex-col gap-3">
             <input type="hidden" name="type" value="custom">
             <input id="custom-domain-input" type="text" name="handle" placeholder="mycoolhandle.com" class="w-full dark:bg-gray-800 dark:text-white dark:border-gray-700 dark:placeholder-gray-400 px-2 py-1.5 border border-gray-200 dark:border-gray-600 rounded outline-none focus:ring-1 focus:ring-blue-500" required>
@@ -97,10 +97,10 @@
             </div>
             <div class="flex gap-2 pt-2">
               <button type="button" popovertarget="change-handle-modal" popovertargetaction="hide" class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
-                {{ i "x" "size-4" }} cancel
+                {{ i "x" "size-4" }} Cancel
               </button>
               <button type="submit" class="btn w-1/2 flex items-center justify-center gap-2">
-                {{ i "check" "size-4" }} verify & save
+                {{ i "check" "size-4" }} Verify & save
               </button>
             </div>
           </form>
@@ -134,7 +134,7 @@
 {{ define "accountActions" }}
   {{ $isDeactivated := (and .IsTnglSh .IsDeactivated) }}
   <div>
-    <h2 class="text-sm uppercase font-bold">Account</h2>
+    <h2 class="text-lg font-medium">Account</h2>
     {{ if $isDeactivated }}
       <div class="mt-2 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded text-sm text-amber-700 dark:text-amber-300">
         Your account is deactivated. Your profile and repositories are currently inaccessible. Reactivate to restore access.
@@ -146,7 +146,7 @@
         popovertargetaction="toggle"
         class="btn flex items-center gap-2 text-sm cursor-pointer">
         {{ i "key" "size-4" }}
-        change password
+        Change password
       </button>
       {{ if $isDeactivated }}
         <button
@@ -154,7 +154,7 @@
           popovertargetaction="toggle"
           class="btn flex items-center gap-2 text-sm text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 border-green-300 dark:border-green-600 cursor-pointer">
           {{ i "play" "size-4" }}
-          reactivate account
+          Reactivate account
         </button>
       {{ else }}
         <button
@@ -162,7 +162,7 @@
           popovertargetaction="toggle"
           class="btn flex items-center gap-2 text-sm text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300 cursor-pointer">
           {{ i "pause" "size-4" }}
-          deactivate account
+          Deactivate account
         </button>
       {{ end }}
       <button
@@ -170,7 +170,7 @@
         popovertargetaction="toggle"
         class="btn flex items-center gap-2 text-sm text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 cursor-pointer">
         {{ i "trash-2" "size-4" }}
-        delete account
+        Delete account
       </button>
     </div>
   </div>
@@ -180,19 +180,19 @@
     popover
     class="bg-white w-full md:w-96 dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 drop-shadow dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50">
     <div id="password-form-container" class="flex flex-col gap-3">
-      <label class="uppercase text-sm font-bold p-0">Change password</label>
+      <label class="text-lg font-medium p-0">Change password</label>
       <form hx-post="/settings/password/request" hx-swap="none" hx-disabled-elt="find button[type='submit']" class="flex flex-col gap-3">
         <div class="flex flex-col">
-          <label for="current-password">current password</label>
+          <label for="current-password">Current password</label>
           <input type="password" id="current-password" name="current_password" required autocomplete="current-password" />
           <span class="text-sm text-gray-500 mt-1">Confirm your identity to proceed.</span>
         </div>
         <div class="flex gap-2 pt-2">
           <button type="button" popovertarget="change-password-modal" popovertargetaction="hide" class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
-            {{ i "x" "size-4" }} cancel
+            {{ i "x" "size-4" }} Cancel
           </button>
           <button type="submit" class="btn w-1/2 flex items-center justify-center gap-2">
-            {{ i "key" "size-4" }} send reset code
+            {{ i "key" "size-4" }} Send reset code
           </button>
         </div>
       </form>
@@ -206,20 +206,20 @@
       popover
       class="bg-white w-full md:w-96 dark:bg-gray-800 p-4 rounded border border-green-300 dark:border-green-600 drop-shadow dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50">
       <div class="flex flex-col gap-3">
-        <label class="uppercase text-sm font-bold p-0 text-green-600 dark:text-green-400">Reactivate account</label>
+        <label class="text-lg font-medium p-0 text-green-600 dark:text-green-400">Reactivate account</label>
         <p class="text-sm text-gray-500 dark:text-gray-400">This will restore your profile and repositories, making them accessible again.</p>
         <form hx-post="/settings/reactivate" hx-swap="none" hx-disabled-elt="find button[type='submit']" class="flex flex-col gap-3">
           <div class="flex flex-col">
-            <label for="reactivate-password">password</label>
+            <label for="reactivate-password">Password</label>
             <input type="password" id="reactivate-password" name="password" required autocomplete="current-password" />
             <span class="text-sm text-gray-500 mt-1">Confirm your identity to proceed.</span>
           </div>
           <div class="flex gap-2 pt-2">
             <button type="button" popovertarget="reactivate-modal" popovertargetaction="hide" class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
-              {{ i "x" "size-4" }} cancel
+              {{ i "x" "size-4" }} Cancel
             </button>
             <button type="submit" class="btn w-1/2 flex items-center justify-center gap-2 text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300">
-              {{ i "play" "size-4" }} reactivate
+              {{ i "play" "size-4" }} Reactivate
             </button>
           </div>
         </form>
@@ -232,20 +232,20 @@
       popover
       class="bg-white w-full md:w-96 dark:bg-gray-800 p-4 rounded border border-amber-300 dark:border-amber-600 drop-shadow dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50">
       <div class="flex flex-col gap-3">
-        <label class="uppercase text-sm font-bold p-0 text-amber-600 dark:text-amber-400">Deactivate account</label>
+        <label class="text-lg font-medium p-0 text-amber-600 dark:text-amber-400">Deactivate account</label>
         <p class="text-sm text-gray-500 dark:text-gray-400">Your profile and repositories will become inaccessible. You can reactivate by logging in again.</p>
         <form hx-post="/settings/deactivate" hx-swap="none" hx-confirm="Are you sure you want to deactivate your account?" hx-disabled-elt="find button[type='submit']" class="flex flex-col gap-3">
           <div class="flex flex-col">
-            <label for="deactivate-password">password</label>
+            <label for="deactivate-password">Password</label>
             <input type="password" id="deactivate-password" name="password" required autocomplete="current-password" />
             <span class="text-sm text-gray-500 mt-1">Confirm your identity to proceed.</span>
           </div>
           <div class="flex gap-2 pt-2">
             <button type="button" popovertarget="deactivate-modal" popovertargetaction="hide" class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
-              {{ i "x" "size-4" }} cancel
+              {{ i "x" "size-4" }} Cancel
             </button>
             <button type="submit" class="btn w-1/2 flex items-center justify-center gap-2 text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300">
-              {{ i "pause" "size-4" }} deactivate
+              {{ i "pause" "size-4" }} Deactivate
             </button>
           </div>
         </form>
@@ -259,20 +259,20 @@
     popover
     class="bg-white w-full md:w-96 dark:bg-gray-800 p-4 rounded border border-red-300 dark:border-red-600 drop-shadow dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50">
     <div id="delete-form-container" class="flex flex-col gap-3">
-      <label class="uppercase text-sm font-bold p-0 text-red-600 dark:text-red-400">Delete account</label>
+      <label class="text-lg font-medium p-0 text-red-600 dark:text-red-400">Delete account</label>
       <p class="text-sm text-gray-500 dark:text-gray-400">This permanently deletes your account and all associated data. This cannot be undone.</p>
       <form hx-post="/settings/delete/request" hx-swap="none" hx-disabled-elt="find button[type='submit']" class="flex flex-col gap-3">
         <div class="flex flex-col">
-          <label for="delete-password">password</label>
+          <label for="delete-password">Password</label>
           <input type="password" id="delete-password" name="password" required autocomplete="current-password" />
           <span class="text-sm text-gray-500 mt-1">Confirm your identity to proceed.</span>
         </div>
         <div class="flex gap-2 pt-2">
           <button type="button" popovertarget="delete-modal" popovertargetaction="hide" class="btn w-1/2 flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
-            {{ i "x" "size-4" }} cancel
+            {{ i "x" "size-4" }} Cancel
           </button>
           <button type="submit" class="btn w-1/2 flex items-center justify-center gap-2 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
-            {{ i "trash-2" "size-4" }} send deletion code
+            {{ i "trash-2" "size-4" }} Send deletion code
           </button>
         </div>
       </form>
@@ -283,7 +283,7 @@
 
 {{ define "punchcard" }}
   <div>
-    <h2 class="text-sm uppercase font-bold">Punchcard</h2>
+    <h2 class="text-lg font-medium">Punchcard</h2>
     <p class="text-gray-500 dark:text-gray-400 pb-2 ">
       Configure punchcard visibility and preferences.
     </p>
diff --git a/appview/pages/templates/user/settings/sites.html b/appview/pages/templates/user/settings/sites.html
index 67f2ce53..80cdbaa6 100644
--- a/appview/pages/templates/user/settings/sites.html
+++ b/appview/pages/templates/user/settings/sites.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ .Tab }} settings{{ end }}
+{{ define "title" }}{{ .Tab | capitalize }} settings &middot; Tangled{{ end }}
 
 {{ define "content" }}
   <div class="p-6">
@@ -19,7 +19,7 @@
 {{ define "sitesSettings" }}
   <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
     <div class="col-span-1 md:col-span-2">
-      <h2 class="text-sm pb-2 uppercase font-bold">Git Sites</h2>
+      <h2 class="text-lg pb-2 font-medium">Git sites</h2>
       {{ if .IsTnglHandle }}
       <p class="text-gray-500 dark:text-gray-400">
         Since your handle is on <code>tngl.sh</code>, it doubles as your sites domain&mdash;your site will be served from that subdomain automatically.
@@ -43,7 +43,7 @@
       {{ template "activeClaim" . }}
     {{ else }}
       <div class="flex items-center justify-center p-2 text-gray-500">
-        no domain claimed yet
+        No domain claimed yet
       </div>
     {{ end }}
   </div>
@@ -62,7 +62,7 @@
       {{ i "globe" "size-4 text-gray-400 dark:text-gray-500 flex-shrink-0" }}
       <div class="flex items-center gap-2">
         <span class="font-mono">{{ .Claim.Domain }}</span>
-        <span class="inline-flex items-center gap-1 text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 rounded">{{ i "circle-check" "size-3" }} active</span>
+        <span class="inline-flex items-center gap-1 text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 rounded">{{ i "circle-check" "size-3" }} Active</span>
       </div>
     </div>
     <form
@@ -75,7 +75,7 @@
         type="submit"
         class="btn flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
         {{ i "trash-2" "size-4" }}
-        release
+        Release
       </button>
     </form>
   </div>
@@ -87,7 +87,7 @@
     popovertarget="claim-domain-modal"
     popovertargetaction="toggle">
     {{ i "plus" "size-4" }}
-    claim domain
+    Claim domain
   </button>
   <div
     id="claim-domain-modal"
@@ -104,7 +104,7 @@
   hx-swap="none"
   class="flex flex-col gap-2"
 >
-  <label class="uppercase p-0">claim a subdomain</label>
+  <label class="text-lg font-medium p-0">Claim a subdomain</label>
   <p class="text-gray-500 dark:text-gray-400">Choose a subdomain under <code>{{ .SitesDomain }}</code>. Only lowercase letters, digits, and hyphens are allowed.</p>
   <div class="flex items-stretch rounded border border-gray-200 dark:border-gray-600 overflow-hidden focus-within:ring-1 focus-within:ring-blue-500 dark:bg-gray-700">
     <input
@@ -123,10 +123,10 @@
       popovertarget="claim-domain-modal"
       popovertargetaction="hide"
       class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
-      {{ i "x" "size-4" }} cancel
+      {{ i "x" "size-4" }} Cancel
     </button>
     <button type="submit" class="btn w-1/2 flex items-center">
-      <span class="inline-flex gap-2 items-center">{{ i "plus" "size-4" }} claim</span>
+      <span class="inline-flex gap-2 items-center">{{ i "plus" "size-4" }} Claim</span>
       <span id="claim-spinner" class="group">
         {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
       </span>
diff --git a/appview/pages/templates/user/signup.html b/appview/pages/templates/user/signup.html
index 4c69c67d..b1cdcafa 100644
--- a/appview/pages/templates/user/signup.html
+++ b/appview/pages/templates/user/signup.html
@@ -1,4 +1,4 @@
-{{ define "title" }} signup {{ end }}
+{{ define "title" }}Sign up &middot; Tangled{{ end }}
 
 {{ define "extrameta" }}
   <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
@@ -12,7 +12,7 @@
       hx-disabled-elt="#signup-button"
   >
     <div class="flex flex-col mt-2">
-        <label for="email">email</label>
+        <label for="email">Email</label>
         <input
             type="email"
             id="email"
@@ -33,7 +33,7 @@
     </div>
     <button class="btn text-base w-full my-2 mt-6" type="submit" id="signup-button" tabindex="7" >
       {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
-      <span class="inline group-[.htmx-request]:hidden">join now</span>
+      <span class="inline group-[.htmx-request]:hidden">Join now</span>
     </button>
     <p class="text-sm text-gray-500">
       Already have an AT Protocol account? <a href="/login" class="underline">Login to Tangled</a>.
diff --git a/appview/pages/templates/user/starred.html b/appview/pages/templates/user/starred.html
index 0e516c66..f8d6817c 100644
--- a/appview/pages/templates/user/starred.html
+++ b/appview/pages/templates/user/starred.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ resolve .Card.UserDid }} · repos {{ end }}
+{{ define "title" }}Starred &middot; {{ resolve .Card.UserDid }} &middot; Tangled{{ end }}
 
 {{ define "profileContent" }}
   <div id="all-repos" class="md:col-span-8 order-2 md:order-2">
@@ -23,7 +23,7 @@
       </div>
     {{ else }}
         <div class="text-base text-gray-500 flex items-center justify-center italic p-12 border border-gray-200 dark:border-gray-700 rounded">
-          <span>This user does not have any starred repos yet.</span>
+          <span>This user does not have any starred repositories yet.</span>
         </div>
     {{ end }}
   </div>
diff --git a/appview/pages/templates/user/strings.html b/appview/pages/templates/user/strings.html
index e1faa530..d0ffca3c 100644
--- a/appview/pages/templates/user/strings.html
+++ b/appview/pages/templates/user/strings.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ resolve .Card.UserDid }} · strings {{ end }}
+{{ define "title" }}Strings &middot; {{ resolve .Card.UserDid }} &middot; Tangled{{ end }}
 
 {{ define "profileContent" }}
   <div id="all-strings" class="md:col-span-8 order-2 md:order-2">
diff --git a/appview/pages/templates/user/vouches.html b/appview/pages/templates/user/vouches.html
index 0c081b97..53176967 100644
--- a/appview/pages/templates/user/vouches.html
+++ b/appview/pages/templates/user/vouches.html
@@ -1,4 +1,4 @@
-{{ define "title" }}{{ resolve .Card.UserDid }} · vouches {{ end }}
+{{ define "title" }}Vouches &middot; {{ resolve .Card.UserDid }} &middot; Tangled{{ end }}
 
 {{ define "profileContent" }}
   {{ $isSelf := and .LoggedInUser (eq .LoggedInUser.Did .Card.UserDid) }}
diff --git a/input.css b/input.css
index 77cf0799..412f6727 100644
--- a/input.css
+++ b/input.css
@@ -2,107 +2,108 @@
 @tailwind components;
 @tailwind utilities;
 @layer base {
-  @font-face {
-    font-family: "InterVariable";
-    src: url("/static/fonts/InterVariable.woff2") format("woff2");
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: "InterVariable";
-    src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2");
-    font-weight: normal;
-    font-style: italic;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: "InterVariable";
-    src: url("/static/fonts/InterDisplay-Bold.woff2") format("woff2");
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: "InterVariable";
-    src: url("/static/fonts/InterDisplay-BoldItalic.woff2") format("woff2");
-    font-weight: bold;
-    font-style: italic;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: "IBMPlexMono";
-    src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: "IBMPlexMono";
-    src: url("/static/fonts/IBMPlexMono-Italic.woff2") format("woff2");
-    font-weight: normal;
-    font-style: italic;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: "IBMPlexMono";
-    src: url("/static/fonts/IBMPlexMono-Bold.woff2") format("woff2");
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: "IBMPlexMono";
-    src: url("/static/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
-    font-weight: bold;
-    font-style: italic;
-    font-display: swap;
-  }
-
-  ::selection {
-    @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white;
-  }
-
-  @layer base {
-    html {
-      font-size: 14px;
-      scrollbar-gutter: stable;
-    }
-    @supports (font-variation-settings: normal) {
-      html {
-        font-feature-settings:
-          "kern" 1,
-          "liga" 1,
-          "cv05" 1,
-          "tnum" 1;
-      }
-    }
-
-    a {
-      @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300;
-    }
-
-    label {
-      @apply block text-gray-900 text-sm py-2 dark:text-gray-100;
-    }
-
-    input,
-    textarea {
-      @apply block rounded p-3
+    @font-face {
+        font-family: "InterVariable";
+        src: url("/static/fonts/InterVariable.woff2") format("woff2-variations");
+        font-weight: 100 600;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "InterVariable";
+        src: url("/static/fonts/InterVariable-Italic.woff2")
+            format("woff2-variations");
+        font-weight: 100 600;
+        font-style: italic;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "InterVariable";
+        src: url("/static/fonts/InterDisplay-Bold.woff2") format("woff2");
+        font-weight: bold;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "InterVariable";
+        src: url("/static/fonts/InterDisplay-BoldItalic.woff2") format("woff2");
+        font-weight: bold;
+        font-style: italic;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "IBMPlexMono";
+        src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "IBMPlexMono";
+        src: url("/static/fonts/IBMPlexMono-Italic.woff2") format("woff2");
+        font-weight: normal;
+        font-style: italic;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "IBMPlexMono";
+        src: url("/static/fonts/IBMPlexMono-Bold.woff2") format("woff2");
+        font-weight: bold;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "IBMPlexMono";
+        src: url("/static/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
+        font-weight: bold;
+        font-style: italic;
+        font-display: swap;
+    }
+
+    ::selection {
+        @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white;
+    }
+
+    @layer base {
+        html {
+            font-size: 14px;
+            scrollbar-gutter: stable;
+        }
+        @supports (font-variation-settings: normal) {
+            html {
+                font-feature-settings:
+                    "kern" 1,
+                    "liga" 1,
+                    "cv05" 1,
+                    "tnum" 1;
+            }
+        }
+
+        a {
+            @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300;
+        }
+
+        label {
+            @apply block text-gray-900 text-sm py-2 dark:text-gray-100;
+        }
+
+        input,
+        textarea {
+            @apply block rounded p-3
             bg-gray-50 dark:bg-gray-800 dark:text-white
             border border-gray-300 dark:border-gray-600
             focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500;
-    }
+        }
 
-    input[type="checkbox"] {
-      @apply appearance-none size-4 p-0 rounded
+        input[type="checkbox"] {
+            @apply appearance-none size-4 p-0 rounded
             bg-transparent border border-gray-200
             hover:bg-gray-100
             checked:bg-gray-900 checked:border-transparent
@@ -121,85 +122,85 @@
             dark:disabled:checked:bg-gray-500 dark:disabled:checked:border-transparent
             dark:disabled:indeterminate:bg-gray-700 dark:disabled:indeterminate:border-gray-600
             focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500;
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: 12px;
-    }
-    input[type="checkbox"]:checked {
-      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M10 3 4.5 8.5 2 6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-    }
-    input[type="checkbox"]:indeterminate {
-      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='white' stroke-width='1.5' stroke-linecap='round'/></svg>");
-    }
-    input[type="checkbox"]:disabled:indeterminate {
-      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(156,163,175)' stroke-width='1.5' stroke-linecap='round'/></svg>");
-    }
-    @media (prefers-color-scheme: dark) {
-      input[type="checkbox"]:checked {
-        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M10 3 4.5 8.5 2 6' stroke='rgb(17,24,39)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-      }
-      input[type="checkbox"]:indeterminate {
-        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(17,24,39)' stroke-width='1.5' stroke-linecap='round'/></svg>");
-      }
-      input[type="checkbox"]:disabled:indeterminate {
-        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(107,114,128)' stroke-width='1.5' stroke-linecap='round'/></svg>");
-      }
-    }
-
-    input[type="radio"] {
-      @apply appearance-none size-4 p-0 rounded-full bg-transparent border
-                        
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 12px;
+        }
+        input[type="checkbox"]:checked {
+            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M10 3 4.5 8.5 2 6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+        }
+        input[type="checkbox"]:indeterminate {
+            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='white' stroke-width='1.5' stroke-linecap='round'/></svg>");
+        }
+        input[type="checkbox"]:disabled:indeterminate {
+            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(156,163,175)' stroke-width='1.5' stroke-linecap='round'/></svg>");
+        }
+        @media (prefers-color-scheme: dark) {
+            input[type="checkbox"]:checked {
+                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M10 3 4.5 8.5 2 6' stroke='rgb(17,24,39)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+            }
+            input[type="checkbox"]:indeterminate {
+                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(17,24,39)' stroke-width='1.5' stroke-linecap='round'/></svg>");
+            }
+            input[type="checkbox"]:disabled:indeterminate {
+                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(107,114,128)' stroke-width='1.5' stroke-linecap='round'/></svg>");
+            }
+        }
+
+        input[type="radio"] {
+            @apply appearance-none size-4 p-0 rounded-full bg-transparent border
+
             border-gray-400 hover:border-gray-900
             hover:bg-gray-200
-            
+
             disabled:cursor-not-allowed
             disabled:border-gray-300
             disabled:checked:border-gray-300
             disabled:hover:bg-inherit
-            
+
             dark:border-gray-400 dark:hover:border-gray-100
-            
+
             dark:hover:bg-gray-600
-            
+
             dark:checked:border-gray-400
-            
+
             dark:disabled:border-gray-500
             dark:disabled:checked:border-gray-500
-            
+
             focus:outline-none focus:ring-1
             focus:ring-gray-400 dark:focus:ring-gray-500;
 
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: 8px;
-    }
-    input[type="radio"]:checked {
-      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(17,24,39)'/></svg>");
-    }
-    input[type="radio"]:disabled:checked {
-      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(209,213,219)'/></svg>");
-    }
-    @media (prefers-color-scheme: dark) {
-      input[type="radio"]:checked {
-        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(243,244,246)'/></svg>");
-      }
-      input[type="radio"]:disabled:checked {
-        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(107,114,128)'/></svg>");
-      }
-    }
-
-    details summary::-webkit-details-marker {
-      display: none;
-    }
-
-    code {
-      @apply font-mono rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white;
-    }
-  }
-
-  @layer components {
-    .btn {
-      @apply relative z-10 inline-flex overflow-hidden items-center justify-center
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 8px;
+        }
+        input[type="radio"]:checked {
+            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(17,24,39)'/></svg>");
+        }
+        input[type="radio"]:disabled:checked {
+            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(209,213,219)'/></svg>");
+        }
+        @media (prefers-color-scheme: dark) {
+            input[type="radio"]:checked {
+                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(243,244,246)'/></svg>");
+            }
+            input[type="radio"]:disabled:checked {
+                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(107,114,128)'/></svg>");
+            }
+        }
+
+        details summary::-webkit-details-marker {
+            display: none;
+        }
+
+        code {
+            @apply font-mono rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white;
+        }
+    }
+
+    @layer components {
+        .btn {
+            @apply relative z-10 inline-flex overflow-hidden items-center justify-center
           min-h-[32px] px-2 py-[6px]
           rounded border border-gray-200 dark:border-gray-700
           bg-white dark:bg-gray-800
@@ -208,18 +209,18 @@
           outline-transparent cursor-pointer
           focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-400 dark:focus-visible:outline-gray-600;
 
-      @apply before:absolute before:inset-0 before:-z-10 before:block before:rounded-sm before:content-['']
+            @apply before:absolute before:inset-0 before:-z-10 before:block before:rounded-sm before:content-['']
           before:transition-all before:duration-150 before:ease-in-out
           before:shadow-[inset_0_-2px_0_0_theme(colors.gray.200)] dark:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900)];
 
-      @apply hover:bg-gray-50 dark:hover:bg-gray-700
+            @apply hover:bg-gray-50 dark:hover:bg-gray-700
           hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.300)] dark:hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.800)]
           active:before:shadow-[inset_0_2px_2px_0_theme(colors.gray.200)] dark:active:before:shadow-[inset_0_2px_2px_0_theme(colors.gray.900)]
           disabled:cursor-not-allowed disabled:opacity-50;
-    }
+        }
 
-    .btn-flat {
-      @apply inline-flex items-center justify-center
+        .btn-flat {
+            @apply inline-flex items-center justify-center
           min-h-7 px-2 py-[6px]
           rounded
           text-sm text-gray-900 dark:text-gray-100 cursor-pointer
@@ -229,10 +230,10 @@
           hover:bg-gray-100
           dark:hover:text-gray-100 dark:hover:bg-gray-700
           disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:text-inherit disabled:hover:bg-inherit;
-    }
+        }
 
-    .btn-create {
-      @apply btn text-white
+        .btn-create {
+            @apply btn text-white
           bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800
           border border-green-700 hover:border-green-800
           focus-visible:outline-green-500
@@ -240,1264 +241,1370 @@
           before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900/25%)]
           hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900/25%)]
           active:before:shadow-[inset_0_2px_2px_0_theme(colors.gray.900/50%)];
-    }
-    
-    .btn-create-flat {
-        @apply btn-create
+        }
+
+        .btn-create-flat {
+            @apply btn-create
         before:shadow-none
         hover:before:shadow-none
         active:before:shadow-none;
-    }
+        }
 
-    .btn-cancel {
-      @apply btn text-white
+        .btn-cancel {
+            @apply btn text-white
           bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800
           border border-red-700 hover:border-red-800
           focus-visible:outline-red-500
           disabled:bg-red-400 dark:disabled:bg-red-600;
-    }
+        }
 
-    .btn-cancel-flat {
-        @apply btn-cancel
+        .btn-cancel-flat {
+            @apply btn-cancel
         before:shadow-none
         hover:before:shadow-none
         active:before:shadow-none;
-    }
+        }
 
-    .btn-group {
-      @apply inline-flex items-stretch
+        .btn-group {
+            @apply inline-flex items-stretch
           max-h-[32px]
           rounded border border-gray-200 dark:border-gray-700
           divide-x divide-gray-200 dark:divide-gray-700
           overflow-hidden;
-    }
+        }
 
-    .btn-group-item {
-      @apply btn-flat min-h-[30px] gap-1.5
+        .btn-group-item {
+            @apply btn-flat min-h-[30px] gap-1.5
           bg-gray-50 dark:bg-gray-900
           rounded-none border-y-0
           no-underline hover:no-underline
           hover:text-gray-600 dark:hover:text-gray-400;
-    }
+        }
 
-    .btn-group-item.active {
-      @apply btn min-h-[30px] rounded-none border-y-0
+        .btn-group-item.active {
+            @apply btn min-h-[30px] rounded-none border-y-0
           before:border-none before:rounded-none before:bg-inherit;
 
-      &:first-child {
-        @apply border-none before:rounded-l-sm;
-      }
-      &:last-child {
-        @apply border-y-0 border-r-0 border-l before:rounded-r-sm;
-      }
-    }
-
-    .prose {
-      overflow-wrap: anywhere;
-    }
-
-    .prose td,
-    .prose th {
-      overflow-wrap: normal;
-    }
-
-    .prose hr {
-      @apply my-2;
-    }
-
-    .prose li:has(input) {
-      @apply list-none;
-    }
-
-    .prose ul:has(input) {
-      @apply pl-2;
-    }
-
-    .prose .heading .anchor {
-      @apply no-underline mx-2 opacity-0;
-    }
-
-    .prose .heading:hover .anchor {
-      @apply opacity-70;
+            &:first-child {
+                @apply border-none before:rounded-l-sm;
+            }
+            &:last-child {
+                @apply border-y-0 border-r-0 border-l before:rounded-r-sm;
+            }
+        }
+
+        .prose {
+            overflow-wrap: anywhere;
+        }
+
+        .prose td,
+        .prose th {
+            overflow-wrap: normal;
+        }
+
+        .prose hr {
+            @apply my-2;
+        }
+
+        .prose li:has(input) {
+            @apply list-none;
+        }
+
+        .prose ul:has(input) {
+            @apply pl-2;
+        }
+
+        .prose .heading .anchor {
+            @apply no-underline mx-2 opacity-0;
+        }
+
+        .prose .heading:hover .anchor {
+            @apply opacity-70;
+        }
+
+        .prose .heading .anchor:hover {
+            @apply opacity-70;
+        }
+
+        .prose h1:target,
+        .prose h2:target,
+        .prose h3:target,
+        .prose h4:target,
+        .prose h5:target,
+        .prose h6:target {
+            @apply bg-yellow-200/30 dark:bg-yellow-600/30;
+        }
+
+        .prose a.footnote-backref {
+            @apply no-underline;
+        }
+
+        .prose a.mention {
+            @apply no-underline hover:underline font-bold;
+        }
+
+        .prose li {
+            @apply my-0 py-0;
+        }
+
+        .prose ul,
+        .prose ol {
+            @apply my-1 py-0;
+        }
+
+        .prose img {
+            display: inline;
+            margin: 0;
+            vertical-align: middle;
+        }
+
+        .prose input {
+            @apply inline-block my-0 mt-1 mx-1;
+        }
+
+        /* Mermaid diagrams */
+        .prose pre.mermaid {
+            @apply flex justify-center my-4 overflow-x-auto bg-transparent border-0;
+        }
+
+        /* Base callout */
+        details[data-callout] {
+            @apply border-l-4 pl-3 py-2 text-gray-800 dark:text-gray-200 my-4;
+        }
+
+        details[data-callout] > summary {
+            @apply font-bold cursor-pointer mb-1;
+        }
+
+        details[data-callout] > .callout-content {
+            @apply text-sm leading-snug;
+        }
+
+        /* Note (blue) */
+        details[data-callout="note" i] {
+            @apply border-blue-400 dark:border-blue-500;
+        }
+        details[data-callout="note" i] > summary {
+            @apply text-blue-700 dark:text-blue-400;
+        }
+
+        /* Important (purple) */
+        details[data-callout="important" i] {
+            @apply border-purple-400 dark:border-purple-500;
+        }
+        details[data-callout="important" i] > summary {
+            @apply text-purple-700 dark:text-purple-400;
+        }
+
+        /* Warning (yellow) */
+        details[data-callout="warning" i] {
+            @apply border-yellow-400 dark:border-yellow-500;
+        }
+        details[data-callout="warning" i] > summary {
+            @apply text-yellow-700 dark:text-yellow-400;
+        }
+
+        /* Caution (red) */
+        details[data-callout="caution" i] {
+            @apply border-red-400 dark:border-red-500;
+        }
+        details[data-callout="caution" i] > summary {
+            @apply text-red-700 dark:text-red-400;
+        }
+
+        /* Tip (green) */
+        details[data-callout="tip" i] {
+            @apply border-green-400 dark:border-green-500;
+        }
+        details[data-callout="tip" i] > summary {
+            @apply text-green-700 dark:text-green-400;
+        }
+
+        /* Optional: hide the disclosure arrow like GitHub */
+        details[data-callout] > summary::-webkit-details-marker {
+            display: none;
+        }
+    }
+    @layer utilities {
+        .error {
+            @apply py-1 text-red-400 dark:text-red-300;
+        }
+        .success {
+            @apply py-1 text-gray-900 dark:text-gray-100;
+        }
+
+        @keyframes scroll {
+            0% {
+                transform: translateX(0);
+            }
+            100% {
+                transform: translateX(-50%);
+            }
+        }
+
+        .animate-marquee {
+            animation: scroll 60s linear infinite;
+        }
+
+        .animate-marquee:hover {
+            animation-play-state: paused;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            .animate-marquee {
+                animation: none;
+                transform: none;
+            }
+        }
+
+        @keyframes progress {
+            from {
+                width: 0%;
+            }
+            to {
+                width: 100%;
+            }
+        }
+
+        .animate-progress {
+            animation: progress 10s linear forwards;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+
+        @keyframes fadeOut {
+            from {
+                opacity: 1;
+            }
+            to {
+                opacity: 0;
+            }
+        }
+
+        .animate-fadein {
+            animation: fadeIn 0.25s ease-in forwards;
+        }
+
+        .animate-fadeout {
+            animation: fadeOut 0.25s ease-out forwards;
+        }
     }
-
-    .prose .heading .anchor:hover {
-      @apply opacity-70;
-    }
-
-    .prose h1:target,
-    .prose h2:target,
-    .prose h3:target,
-    .prose h4:target,
-    .prose h5:target,
-    .prose h6:target {
-      @apply bg-yellow-200/30 dark:bg-yellow-600/30;
-    }
-
-    .prose a.footnote-backref {
-      @apply no-underline;
-    }
-
-    .prose a.mention {
-      @apply no-underline hover:underline font-bold;
-    }
-
-    .prose li {
-      @apply my-0 py-0;
-    }
-
-    .prose ul,
-    .prose ol {
-      @apply my-1 py-0;
-    }
-
-    .prose img {
-      display: inline;
-      margin: 0;
-      vertical-align: middle;
-    }
-
-    .prose input {
-      @apply inline-block my-0 mt-1 mx-1;
-    }
-
-    /* Mermaid diagrams */
-    .prose pre.mermaid {
-      @apply flex justify-center my-4 overflow-x-auto bg-transparent border-0;
-    }
-
-    /* Base callout */
-    details[data-callout] {
-      @apply border-l-4 pl-3 py-2 text-gray-800 dark:text-gray-200 my-4;
-    }
-
-    details[data-callout] > summary {
-      @apply font-bold cursor-pointer mb-1;
-    }
-
-    details[data-callout] > .callout-content {
-      @apply text-sm leading-snug;
-    }
-
-    /* Note (blue) */
-    details[data-callout="note" i] {
-      @apply border-blue-400 dark:border-blue-500;
-    }
-    details[data-callout="note" i] > summary {
-      @apply text-blue-700 dark:text-blue-400;
-    }
-
-    /* Important (purple) */
-    details[data-callout="important" i] {
-      @apply border-purple-400 dark:border-purple-500;
-    }
-    details[data-callout="important" i] > summary {
-      @apply text-purple-700 dark:text-purple-400;
-    }
-
-    /* Warning (yellow) */
-    details[data-callout="warning" i] {
-      @apply border-yellow-400 dark:border-yellow-500;
-    }
-    details[data-callout="warning" i] > summary {
-      @apply text-yellow-700 dark:text-yellow-400;
-    }
-
-    /* Caution (red) */
-    details[data-callout="caution" i] {
-      @apply border-red-400 dark:border-red-500;
-    }
-    details[data-callout="caution" i] > summary {
-      @apply text-red-700 dark:text-red-400;
-    }
-
-    /* Tip (green) */
-    details[data-callout="tip" i] {
-      @apply border-green-400 dark:border-green-500;
-    }
-    details[data-callout="tip" i] > summary {
-      @apply text-green-700 dark:text-green-400;
-    }
-
-    /* Optional: hide the disclosure arrow like GitHub */
-    details[data-callout] > summary::-webkit-details-marker {
-      display: none;
-    }
-  }
-  @layer utilities {
-    .error {
-      @apply py-1 text-red-400 dark:text-red-300;
-    }
-    .success {
-      @apply py-1 text-gray-900 dark:text-gray-100;
-    }
-
-    @keyframes scroll {
-      0% {
-        transform: translateX(0);
-      }
-      100% {
-        transform: translateX(-50%);
-      }
-    }
-
-    .animate-marquee {
-      animation: scroll 60s linear infinite;
-    }
-
-    .animate-marquee:hover {
-      animation-play-state: paused;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .animate-marquee {
-        animation: none;
-        transform: none;
-      }
-    }
-
-    @keyframes progress {
-      from {
-        width: 0%;
-      }
-      to {
-        width: 100%;
-      }
-    }
-
-    .animate-progress {
-      animation: progress 10s linear forwards;
-    }
-
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
-      }
-    }
-
-    @keyframes fadeOut {
-      from {
-        opacity: 1;
-      }
-      to {
-        opacity: 0;
-      }
-    }
-
-    .animate-fadein {
-      animation: fadeIn 0.25s ease-in forwards;
-    }
-
-    .animate-fadeout {
-      animation: fadeOut 0.25s ease-out forwards;
-    }
-  }
 }
 
 /* Background */
 .bg {
-  color: #4c4f69;
-  background-color: #eff1f5;
+    color: #4c4f69;
+    background-color: #eff1f5;
 }
 /* PreWrapper */
 .chroma {
-  color: #4c4f69;
+    color: #4c4f69;
 }
 /* Error */
 .chroma .err {
-  color: #d20f39;
+    color: #d20f39;
 }
 /* LineLink */
 .chroma .lnlinks {
-  outline: none;
-  text-decoration: none;
-  color: inherit;
+    outline: none;
+    text-decoration: none;
+    color: inherit;
 }
 /* LineTableTD */
 .chroma .lntd {
-  vertical-align: top;
-  padding: 0;
-  margin: 0;
-  border: 0;
+    vertical-align: top;
+    padding: 0;
+    margin: 0;
+    border: 0;
 }
 /* LineTable */
 .chroma .lntable {
-  border-spacing: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
+    border-spacing: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
 }
 /* LineHighlight */
 .chroma .hl {
-  @apply bg-amber-400/30 dark:bg-amber-500/20;
+    @apply bg-amber-400/30 dark:bg-amber-500/20;
 }
 
 .line-quote-hl,
 .line-range-hl {
-  @apply !bg-yellow-200/30 dark:!bg-yellow-700/30;
+    @apply !bg-yellow-200/30 dark:!bg-yellow-700/30;
 }
 
 :is(.line-quote-hl, .line-range-hl) > .min-w-\[3\.5rem\] {
-  @apply !bg-yellow-200/30 dark:!bg-yellow-700/30;
+    @apply !bg-yellow-200/30 dark:!bg-yellow-700/30;
 }
 
 :is(.line-quote-hl, .line-range-hl) > .min-w-\[3\.5rem\] a {
-  @apply !text-black dark:!text-white;
+    @apply !text-black dark:!text-white;
 }
 
 /* LineNumbersTable */
 .chroma .lnt {
-  white-space: pre;
-  -webkit-user-select: none;
-  user-select: none;
-  margin-right: 0.4em;
-  padding: 0 0.4em 0 0.4em;
-  color: #8c8fa1;
+    white-space: pre;
+    -webkit-user-select: none;
+    user-select: none;
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+    color: #8c8fa1;
 }
 /* LineNumbers */
 .chroma .ln {
-  white-space: pre;
-  -webkit-user-select: none;
-  user-select: none;
-  margin-right: 0.4em;
-  padding: 0 0.4em 0 0.4em;
-  color: #8c8fa1;
+    white-space: pre;
+    -webkit-user-select: none;
+    user-select: none;
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+    color: #8c8fa1;
 }
 /* Line */
 .chroma .line {
-  display: flex;
+    display: flex;
 }
 /* Keyword */
 .chroma .k {
-  color: #8839ef;
+    color: #8839ef;
 }
 /* KeywordConstant */
 .chroma .kc {
-  color: #fe640b;
+    color: #fe640b;
 }
 /* KeywordDeclaration */
 .chroma .kd {
-  color: #d20f39;
+    color: #d20f39;
 }
 /* KeywordNamespace */
 .chroma .kn {
-  color: #179299;
+    color: #179299;
 }
 /* KeywordPseudo */
 .chroma .kp {
-  color: #8839ef;
+    color: #8839ef;
 }
 /* KeywordReserved */
 .chroma .kr {
-  color: #8839ef;
+    color: #8839ef;
 }
 /* KeywordType */
 .chroma .kt {
-  color: #d20f39;
+    color: #d20f39;
 }
 /* NameAttribute */
 .chroma .na {
-  color: #1e66f5;
+    color: #1e66f5;
 }
 /* NameBuiltin */
 .chroma .nb {
-  color: #04a5e5;
+    color: #04a5e5;
 }
 /* NameBuiltinPseudo */
 .chroma .bp {
-  color: #04a5e5;
+    color: #04a5e5;
 }
 /* NameClass */
 .chroma .nc {
-  color: #df8e1d;
+    color: #df8e1d;
 }
 /* NameConstant */
 .chroma .no {
-  color: #df8e1d;
+    color: #df8e1d;
 }
 /* NameDecorator */
 .chroma .nd {
-  color: #1e66f5;
-  font-weight: bold;
+    color: #1e66f5;
+    font-weight: bold;
 }
 /* NameEntity */
 .chroma .ni {
-  color: #179299;
+    color: #179299;
 }
 /* NameException */
 .chroma .ne {
-  color: #fe640b;
+    color: #fe640b;
 }
 /* NameFunction */
 .chroma .nf {
-  color: #1e66f5;
+    color: #1e66f5;
 }
 /* NameFunctionMagic */
 .chroma .fm {
-  color: #1e66f5;
+    color: #1e66f5;
 }
 /* NameLabel */
 .chroma .nl {
-  color: #04a5e5;
+    color: #04a5e5;
 }
 /* NameNamespace */
 .chroma .nn {
-  color: #fe640b;
+    color: #fe640b;
 }
 /* NameProperty */
 .chroma .py {
-  color: #fe640b;
+    color: #fe640b;
 }
 /* NameTag */
 .chroma .nt {
-  color: #8839ef;
+    color: #8839ef;
 }
 /* NameVariable */
 .chroma .nv {
-  color: #dc8a78;
+    color: #dc8a78;
 }
 /* NameVariableClass */
 .chroma .vc {
-  color: #dc8a78;
+    color: #dc8a78;
 }
 /* NameVariableGlobal */
 .chroma .vg {
-  color: #dc8a78;
+    color: #dc8a78;
 }
 /* NameVariableInstance */
 .chroma .vi {
-  color: #dc8a78;
+    color: #dc8a78;
 }
 /* NameVariableMagic */
 .chroma .vm {
-  color: #dc8a78;
+    color: #dc8a78;
 }
 /* LiteralString */
 .chroma .s {
-  color: #40a02b;
+    color: #40a02b;
 }
 /* LiteralStringAffix */
 .chroma .sa {
-  color: #d20f39;
+    color: #d20f39;
 }
 /* LiteralStringBacktick */
 .chroma .sb {
-  color: #40a02b;
+    color: #40a02b;
 }
 /* LiteralStringChar */
 .chroma .sc {
-  color: #40a02b;
+    color: #40a02b;
 }
 /* LiteralStringDelimiter */
 .chroma .dl {
-  color: #1e66f5;
+    color: #1e66f5;
 }
 /* LiteralStringDoc */
 .chroma .sd {
-  color: #9ca0b0;
+    color: #9ca0b0;
 }
 /* LiteralStringDouble */
 .chroma .s2 {
-  color: #40a02b;
+    color: #40a02b;
 }
 /* LiteralStringEscape */
 .chroma .se {
-  color: #1e66f5;
+    color: #1e66f5;
 }
 /* LiteralStringHeredoc */
 .chroma .sh {
-  color: #9ca0b0;
+    color: #9ca0b0;
 }
 /* LiteralStringInterpol */
 .chroma .si {
-  color: #40a02b;
+    color: #40a02b;
 }
 /* LiteralStringOther */
 .chroma .sx {
-  color: #40a02b;
+    color: #40a02b;
 }
 /* LiteralStringRegex */
 .chroma .sr {
-  color: #179299;
+    color: #179299;
 }
 /* LiteralStringSingle */
 .chroma .s1 {
-  color: #40a02b;
+    color: #40a02b;
 }
 /* LiteralStringSymbol */
 .chroma .ss {
-  color: #40a02b;
+    color: #40a02b;
 }
 /* LiteralNumber */
 .chroma .m {
-  color: #fe640b;
+    color: #fe640b;
 }
 /* LiteralNumberBin */
 .chroma .mb {
-  color: #fe640b;
+    color: #fe640b;
 }
 /* LiteralNumberFloat */
 .chroma .mf {
-  color: #fe640b;
+    color: #fe640b;
 }
 /* LiteralNumberHex */
 .chroma .mh {
-  color: #fe640b;
+    color: #fe640b;
 }
 /* LiteralNumberInteger */
 .chroma .mi {
-  color: #fe640b;
+    color: #fe640b;
 }
 /* LiteralNumberIntegerLong */
 .chroma .il {
-  color: #fe640b;
+    color: #fe640b;
 }
 /* LiteralNumberOct */
 .chroma .mo {
-  color: #fe640b;
+    color: #fe640b;
 }
 /* Operator */
 .chroma .o {
-  color: #04a5e5;
-  font-weight: bold;
+    color: #04a5e5;
+    font-weight: bold;
 }
 /* OperatorWord */
 .chroma .ow {
-  color: #04a5e5;
-  font-weight: bold;
+    color: #04a5e5;
+    font-weight: bold;
 }
 /* Comment */
 .chroma .c {
-  color: #9ca0b0;
-  font-style: italic;
+    color: #9ca0b0;
+    font-style: italic;
 }
 /* CommentHashbang */
 .chroma .ch {
-  color: #9ca0b0;
-  font-style: italic;
+    color: #9ca0b0;
+    font-style: italic;
 }
 /* CommentMultiline */
 .chroma .cm {
-  color: #9ca0b0;
-  font-style: italic;
+    color: #9ca0b0;
+    font-style: italic;
 }
 /* CommentSingle */
 .chroma .c1 {
-  color: #9ca0b0;
-  font-style: italic;
+    color: #9ca0b0;
+    font-style: italic;
 }
 /* CommentSpecial */
 .chroma .cs {
-  color: #9ca0b0;
-  font-style: italic;
+    color: #9ca0b0;
+    font-style: italic;
 }
 /* CommentPreproc */
 .chroma .cp {
-  color: #9ca0b0;
-  font-style: italic;
+    color: #9ca0b0;
+    font-style: italic;
 }
 /* CommentPreprocFile */
 .chroma .cpf {
-  color: #9ca0b0;
-  font-weight: bold;
-  font-style: italic;
+    color: #9ca0b0;
+    font-weight: bold;
+    font-style: italic;
 }
 /* GenericDeleted */
 .chroma .gd {
-  color: #d20f39;
-  background-color: oklch(93.6% 0.032 17.717);
+    color: #d20f39;
+    background-color: oklch(93.6% 0.032 17.717);
 }
 /* GenericEmph */
 .chroma .ge {
-  font-style: italic;
+    font-style: italic;
 }
 /* GenericError */
 .chroma .gr {
-  color: #d20f39;
+    color: #d20f39;
 }
 /* GenericHeading */
 .chroma .gh {
-  color: #fe640b;
-  font-weight: bold;
+    color: #fe640b;
+    font-weight: bold;
 }
 /* GenericInserted */
 .chroma .gi {
-  color: #40a02b;
-  background-color: oklch(96.2% 0.044 156.743);
+    color: #40a02b;
+    background-color: oklch(96.2% 0.044 156.743);
 }
 /* GenericStrong */
 .chroma .gs {
-  font-weight: bold;
+    font-weight: bold;
 }
 /* GenericSubheading */
 .chroma .gu {
-  color: #fe640b;
-  font-weight: bold;
+    color: #fe640b;
+    font-weight: bold;
 }
 /* GenericTraceback */
 .chroma .gt {
-  color: #d20f39;
+    color: #d20f39;
 }
 /* GenericUnderline */
 .chroma .gl {
-  text-decoration: underline;
+    text-decoration: underline;
 }
 
 @media (prefers-color-scheme: dark) {
-  /* Background */
-  .bg {
-    color: #cad3f5;
-    background-color: #24273a;
-  }
-  /* PreWrapper */
-  .chroma {
-    color: #cad3f5;
-  }
-  /* Error */
-  .chroma .err {
-    color: #ed8796;
-  }
-  /* LineLink */
-  .chroma .lnlinks {
-    outline: none;
-    text-decoration: none;
-    color: inherit;
-  }
-  /* LineTableTD */
-  .chroma .lntd {
-    vertical-align: top;
-    padding: 0;
-    margin: 0;
-    border: 0;
-  }
-  /* LineTable */
-  .chroma .lntable {
-    border-spacing: 0;
-    padding: 0;
-    margin: 0;
-    border: 0;
-  }
-  /* LineHighlight */
-  .chroma .hl {
-    background-color: #494d64;
-  }
-  /* LineNumbersTable */
-  .chroma .lnt {
-    white-space: pre;
-    -webkit-user-select: none;
-    user-select: none;
-    margin-right: 0.4em;
-    padding: 0 0.4em 0 0.4em;
-    color: #8087a2;
-  }
-  /* LineNumbers */
-  .chroma .ln {
-    white-space: pre;
-    -webkit-user-select: none;
-    user-select: none;
-    margin-right: 0.4em;
-    padding: 0 0.4em 0 0.4em;
-    color: #8087a2;
-  }
-  /* Line */
-  .chroma .line {
-    display: flex;
-  }
-  /* Keyword */
-  .chroma .k {
-    color: #c6a0f6;
-  }
-  /* KeywordConstant */
-  .chroma .kc {
-    color: #f5a97f;
-  }
-  /* KeywordDeclaration */
-  .chroma .kd {
-    color: #ed8796;
-  }
-  /* KeywordNamespace */
-  .chroma .kn {
-    color: #8bd5ca;
-  }
-  /* KeywordPseudo */
-  .chroma .kp {
-    color: #c6a0f6;
-  }
-  /* KeywordReserved */
-  .chroma .kr {
-    color: #c6a0f6;
-  }
-  /* KeywordType */
-  .chroma .kt {
-    color: #ed8796;
-  }
-  /* NameAttribute */
-  .chroma .na {
-    color: #8aadf4;
-  }
-  /* NameBuiltin */
-  .chroma .nb {
-    color: #91d7e3;
-  }
-  /* NameBuiltinPseudo */
-  .chroma .bp {
-    color: #91d7e3;
-  }
-  /* NameClass */
-  .chroma .nc {
-    color: #eed49f;
-  }
-  /* NameConstant */
-  .chroma .no {
-    color: #eed49f;
-  }
-  /* NameDecorator */
-  .chroma .nd {
-    color: #8aadf4;
-    font-weight: bold;
-  }
-  /* NameEntity */
-  .chroma .ni {
-    color: #8bd5ca;
-  }
-  /* NameException */
-  .chroma .ne {
-    color: #f5a97f;
-  }
-  /* NameFunction */
-  .chroma .nf {
-    color: #8aadf4;
-  }
-  /* NameFunctionMagic */
-  .chroma .fm {
-    color: #8aadf4;
-  }
-  /* NameLabel */
-  .chroma .nl {
-    color: #91d7e3;
-  }
-  /* NameNamespace */
-  .chroma .nn {
-    color: #f5a97f;
-  }
-  /* NameProperty */
-  .chroma .py {
-    color: #f5a97f;
-  }
-  /* NameTag */
-  .chroma .nt {
-    color: #c6a0f6;
-  }
-  /* NameVariable */
-  .chroma .nv {
-    color: #f4dbd6;
-  }
-  /* NameVariableClass */
-  .chroma .vc {
-    color: #f4dbd6;
-  }
-  /* NameVariableGlobal */
-  .chroma .vg {
-    color: #f4dbd6;
-  }
-  /* NameVariableInstance */
-  .chroma .vi {
-    color: #f4dbd6;
-  }
-  /* NameVariableMagic */
-  .chroma .vm {
-    color: #f4dbd6;
-  }
-  /* LiteralString */
-  .chroma .s {
-    color: #a6da95;
-  }
-  /* LiteralStringAffix */
-  .chroma .sa {
-    color: #ed8796;
-  }
-  /* LiteralStringBacktick */
-  .chroma .sb {
-    color: #a6da95;
-  }
-  /* LiteralStringChar */
-  .chroma .sc {
-    color: #a6da95;
-  }
-  /* LiteralStringDelimiter */
-  .chroma .dl {
-    color: #8aadf4;
-  }
-  /* LiteralStringDoc */
-  .chroma .sd {
-    color: #6e738d;
-  }
-  /* LiteralStringDouble */
-  .chroma .s2 {
-    color: #a6da95;
-  }
-  /* LiteralStringEscape */
-  .chroma .se {
-    color: #8aadf4;
-  }
-  /* LiteralStringHeredoc */
-  .chroma .sh {
-    color: #6e738d;
-  }
-  /* LiteralStringInterpol */
-  .chroma .si {
-    color: #a6da95;
-  }
-  /* LiteralStringOther */
-  .chroma .sx {
-    color: #a6da95;
-  }
-  /* LiteralStringRegex */
-  .chroma .sr {
-    color: #8bd5ca;
-  }
-  /* LiteralStringSingle */
-  .chroma .s1 {
-    color: #a6da95;
-  }
-  /* LiteralStringSymbol */
-  .chroma .ss {
-    color: #a6da95;
-  }
-  /* LiteralNumber */
-  .chroma .m {
-    color: #f5a97f;
-  }
-  /* LiteralNumberBin */
-  .chroma .mb {
-    color: #f5a97f;
-  }
-  /* LiteralNumberFloat */
-  .chroma .mf {
-    color: #f5a97f;
-  }
-  /* LiteralNumberHex */
-  .chroma .mh {
-    color: #f5a97f;
-  }
-  /* LiteralNumberInteger */
-  .chroma .mi {
-    color: #f5a97f;
-  }
-  /* LiteralNumberIntegerLong */
-  .chroma .il {
-    color: #f5a97f;
-  }
-  /* LiteralNumberOct */
-  .chroma .mo {
-    color: #f5a97f;
-  }
-  /* Operator */
-  .chroma .o {
-    color: #91d7e3;
-    font-weight: bold;
-  }
-  /* OperatorWord */
-  .chroma .ow {
-    color: #91d7e3;
-    font-weight: bold;
-  }
-  /* Comment */
-  .chroma .c {
-    color: #6e738d;
-    font-style: italic;
-  }
-  /* CommentHashbang */
-  .chroma .ch {
-    color: #6e738d;
-    font-style: italic;
-  }
-  /* CommentMultiline */
-  .chroma .cm {
-    color: #6e738d;
-    font-style: italic;
-  }
-  /* CommentSingle */
-  .chroma .c1 {
-    color: #6e738d;
-    font-style: italic;
-  }
-  /* CommentSpecial */
-  .chroma .cs {
-    color: #6e738d;
-    font-style: italic;
-  }
-  /* CommentPreproc */
-  .chroma .cp {
-    color: #6e738d;
-    font-style: italic;
-  }
-  /* CommentPreprocFile */
-  .chroma .cpf {
-    color: #6e738d;
-    font-weight: bold;
-    font-style: italic;
-  }
-  /* GenericDeleted */
-  .chroma .gd {
-    color: #ed8796;
-    background-color: oklch(44.4% 0.177 26.899 / 0.5);
-  }
-  /* GenericEmph */
-  .chroma .ge {
-    font-style: italic;
-  }
-  /* GenericError */
-  .chroma .gr {
-    color: #ed8796;
-  }
-  /* GenericHeading */
-  .chroma .gh {
-    color: #f5a97f;
-    font-weight: bold;
-  }
-  /* GenericInserted */
-  .chroma .gi {
-    color: #a6da95;
-    background-color: oklch(44.8% 0.119 151.328 / 0.5);
-  }
-  /* GenericStrong */
-  .chroma .gs {
-    font-weight: bold;
-  }
-  /* GenericSubheading */
-  .chroma .gu {
-    color: #f5a97f;
-    font-weight: bold;
-  }
-  /* GenericTraceback */
-  .chroma .gt {
-    color: #ed8796;
-  }
-  /* GenericUnderline */
-  .chroma .gl {
-    text-decoration: underline;
-  }
+    /* Background */
+    .bg {
+        color: #cad3f5;
+        background-color: #24273a;
+    }
+    /* PreWrapper */
+    .chroma {
+        color: #cad3f5;
+    }
+    /* Error */
+    .chroma .err {
+        color: #ed8796;
+    }
+    /* LineLink */
+    .chroma .lnlinks {
+        outline: none;
+        text-decoration: none;
+        color: inherit;
+    }
+    /* LineTableTD */
+    .chroma .lntd {
+        vertical-align: top;
+        padding: 0;
+        margin: 0;
+        border: 0;
+    }
+    /* LineTable */
+    .chroma .lntable {
+        border-spacing: 0;
+        padding: 0;
+        margin: 0;
+        border: 0;
+    }
+    /* LineHighlight */
+    .chroma .hl {
+        background-color: #494d64;
+    }
+    /* LineNumbersTable */
+    .chroma .lnt {
+        white-space: pre;
+        -webkit-user-select: none;
+        user-select: none;
+        margin-right: 0.4em;
+        padding: 0 0.4em 0 0.4em;
+        color: #8087a2;
+    }
+    /* LineNumbers */
+    .chroma .ln {
+        white-space: pre;
+        -webkit-user-select: none;
+        user-select: none;
+        margin-right: 0.4em;
+        padding: 0 0.4em 0 0.4em;
+        color: #8087a2;
+    }
+    /* Line */
+    .chroma .line {
+        display: flex;
+    }
+    /* Keyword */
+    .chroma .k {
+        color: #c6a0f6;
+    }
+    /* KeywordConstant */
+    .chroma .kc {
+        color: #f5a97f;
+    }
+    /* KeywordDeclaration */
+    .chroma .kd {
+        color: #ed8796;
+    }
+    /* KeywordNamespace */
+    .chroma .kn {
+        color: #8bd5ca;
+    }
+    /* KeywordPseudo */
+    .chroma .kp {
+        color: #c6a0f6;
+    }
+    /* KeywordReserved */
+    .chroma .kr {
+        color: #c6a0f6;
+    }
+    /* KeywordType */
+    .chroma .kt {
+        color: #ed8796;
+    }
+    /* NameAttribute */
+    .chroma .na {
+        color: #8aadf4;
+    }
+    /* NameBuiltin */
+    .chroma .nb {
+        color: #91d7e3;
+    }
+    /* NameBuiltinPseudo */
+    .chroma .bp {
+        color: #91d7e3;
+    }
+    /* NameClass */
+    .chroma .nc {
+        color: #eed49f;
+    }
+    /* NameConstant */
+    .chroma .no {
+        color: #eed49f;
+    }
+    /* NameDecorator */
+    .chroma .nd {
+        color: #8aadf4;
+        font-weight: bold;
+    }
+    /* NameEntity */
+    .chroma .ni {
+        color: #8bd5ca;
+    }
+    /* NameException */
+    .chroma .ne {
+        color: #f5a97f;
+    }
+    /* NameFunction */
+    .chroma .nf {
+        color: #8aadf4;
+    }
+    /* NameFunctionMagic */
+    .chroma .fm {
+        color: #8aadf4;
+    }
+    /* NameLabel */
+    .chroma .nl {
+        color: #91d7e3;
+    }
+    /* NameNamespace */
+    .chroma .nn {
+        color: #f5a97f;
+    }
+    /* NameProperty */
+    .chroma .py {
+        color: #f5a97f;
+    }
+    /* NameTag */
+    .chroma .nt {
+        color: #c6a0f6;
+    }
+    /* NameVariable */
+    .chroma .nv {
+        color: #f4dbd6;
+    }
+    /* NameVariableClass */
+    .chroma .vc {
+        color: #f4dbd6;
+    }
+    /* NameVariableGlobal */
+    .chroma .vg {
+        color: #f4dbd6;
+    }
+    /* NameVariableInstance */
+    .chroma .vi {
+        color: #f4dbd6;
+    }
+    /* NameVariableMagic */
+    .chroma .vm {
+        color: #f4dbd6;
+    }
+    /* LiteralString */
+    .chroma .s {
+        color: #a6da95;
+    }
+    /* LiteralStringAffix */
+    .chroma .sa {
+        color: #ed8796;
+    }
+    /* LiteralStringBacktick */
+    .chroma .sb {
+        color: #a6da95;
+    }
+    /* LiteralStringChar */
+    .chroma .sc {
+        color: #a6da95;
+    }
+    /* LiteralStringDelimiter */
+    .chroma .dl {
+        color: #8aadf4;
+    }
+    /* LiteralStringDoc */
+    .chroma .sd {
+        color: #6e738d;
+    }
+    /* LiteralStringDouble */
+    .chroma .s2 {
+        color: #a6da95;
+    }
+    /* LiteralStringEscape */
+    .chroma .se {
+        color: #8aadf4;
+    }
+    /* LiteralStringHeredoc */
+    .chroma .sh {
+        color: #6e738d;
+    }
+    /* LiteralStringInterpol */
+    .chroma .si {
+        color: #a6da95;
+    }
+    /* LiteralStringOther */
+    .chroma .sx {
+        color: #a6da95;
+    }
+    /* LiteralStringRegex */
+    .chroma .sr {
+        color: #8bd5ca;
+    }
+    /* LiteralStringSingle */
+    .chroma .s1 {
+        color: #a6da95;
+    }
+    /* LiteralStringSymbol */
+    .chroma .ss {
+        color: #a6da95;
+    }
+    /* LiteralNumber */
+    .chroma .m {
+        color: #f5a97f;
+    }
+    /* LiteralNumberBin */
+    .chroma .mb {
+        color: #f5a97f;
+    }
+    /* LiteralNumberFloat */
+    .chroma .mf {
+        color: #f5a97f;
+    }
+    /* LiteralNumberHex */
+    .chroma .mh {
+        color: #f5a97f;
+    }
+    /* LiteralNumberInteger */
+    .chroma .mi {
+        color: #f5a97f;
+    }
+    /* LiteralNumberIntegerLong */
+    .chroma .il {
+        color: #f5a97f;
+    }
+    /* LiteralNumberOct */
+    .chroma .mo {
+        color: #f5a97f;
+    }
+    /* Operator */
+    .chroma .o {
+        color: #91d7e3;
+        font-weight: bold;
+    }
+    /* OperatorWord */
+    .chroma .ow {
+        color: #91d7e3;
+        font-weight: bold;
+    }
+    /* Comment */
+    .chroma .c {
+        color: #6e738d;
+        font-style: italic;
+    }
+    /* CommentHashbang */
+    .chroma .ch {
+        color: #6e738d;
+        font-style: italic;
+    }
+    /* CommentMultiline */
+    .chroma .cm {
+        color: #6e738d;
+        font-style: italic;
+    }
+    /* CommentSingle */
+    .chroma .c1 {
+        color: #6e738d;
+        font-style: italic;
+    }
+    /* CommentSpecial */
+    .chroma .cs {
+        color: #6e738d;
+        font-style: italic;
+    }
+    /* CommentPreproc */
+    .chroma .cp {
+        color: #6e738d;
+        font-style: italic;
+    }
+    /* CommentPreprocFile */
+    .chroma .cpf {
+        color: #6e738d;
+        font-weight: bold;
+        font-style: italic;
+    }
+    /* GenericDeleted */
+    .chroma .gd {
+        color: #ed8796;
+        background-color: oklch(44.4% 0.177 26.899 / 0.5);
+    }
+    /* GenericEmph */
+    .chroma .ge {
+        font-style: italic;
+    }
+    /* GenericError */
+    .chroma .gr {
+        color: #ed8796;
+    }
+    /* GenericHeading */
+    .chroma .gh {
+        color: #f5a97f;
+        font-weight: bold;
+    }
+    /* GenericInserted */
+    .chroma .gi {
+        color: #a6da95;
+        background-color: oklch(44.8% 0.119 151.328 / 0.5);
+    }
+    /* GenericStrong */
+    .chroma .gs {
+        font-weight: bold;
+    }
+    /* GenericSubheading */
+    .chroma .gu {
+        color: #f5a97f;
+        font-weight: bold;
+    }
+    /* GenericTraceback */
+    .chroma .gt {
+        color: #ed8796;
+    }
+    /* GenericUnderline */
+    .chroma .gl {
+        text-decoration: underline;
+    }
 }
 
 actor-typeahead {
-  --color-background: #ffffff;
-  --color-border: #d1d5db;
-  --color-shadow: #000000;
-  --color-hover: #f9fafb;
-  --color-avatar-fallback: #e5e7eb;
-  --radius: 0;
-  --padding-menu: 0rem;
-  z-index: 1000;
+    --color-background: #ffffff;
+    --color-border: #d1d5db;
+    --color-shadow: #000000;
+    --color-hover: #f9fafb;
+    --color-avatar-fallback: #e5e7eb;
+    --radius: 0;
+    --padding-menu: 0rem;
+    z-index: 1000;
 }
 
 actor-typeahead::part(handle) {
-  color: #111827;
+    color: #111827;
 }
 
 actor-typeahead::part(menu) {
-  box-shadow:
-    0 4px 6px -1px rgb(0 0 0 / 0.1),
-    0 2px 4px -2px rgb(0 0 0 / 0.1);
+    box-shadow:
+        0 4px 6px -1px rgb(0 0 0 / 0.1),
+        0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
 
 @media (prefers-color-scheme: dark) {
-  actor-typeahead {
-    --color-background: #1f2937;
-    --color-border: #4b5563;
-    --color-shadow: #000000;
-    --color-hover: #374151;
-    --color-avatar-fallback: #4b5563;
-  }
+    actor-typeahead {
+        --color-background: #1f2937;
+        --color-border: #4b5563;
+        --color-shadow: #000000;
+        --color-hover: #374151;
+        --color-avatar-fallback: #4b5563;
+    }
 
-  actor-typeahead::part(handle) {
-    color: #f9fafb;
-  }
+    actor-typeahead::part(handle) {
+        color: #f9fafb;
+    }
 }
 
 @layer utilities {
-  .hit-area {
-    position: relative;
-  }
-
-  .hit-area::before {
-    content: "";
-    position: absolute;
-    top: var(--hit-area-t, 0px);
-    right: var(--hit-area-r, 0px);
-    bottom: var(--hit-area-b, 0px);
-    left: var(--hit-area-l, 0px);
-    pointer-events: inherit;
-  }
-
-  .hit-area-debug {
-    position: relative;
-  }
-
-  .hit-area-debug::before {
-    content: "";
-    position: absolute;
-    top: var(--hit-area-t, 0px);
-    right: var(--hit-area-r, 0px);
-    bottom: var(--hit-area-b, 0px);
-    left: var(--hit-area-l, 0px);
-    pointer-events: inherit;
-    border: 1px dashed #3b82f6;
-    background-color: rgba(59, 130, 246, 0.1);
-  }
-
-  .hit-area-debug:hover::before {
-    border-color: #22c55e;
-    background-color: rgba(34, 197, 94, 0.1);
-  }
-
-  .hit-area-1 {
-    --hit-area-t: -0.25rem;
-    --hit-area-r: -0.25rem;
-    --hit-area-b: -0.25rem;
-    --hit-area-l: -0.25rem;
-  }
-  .hit-area-2 {
-    --hit-area-t: -0.5rem;
-    --hit-area-r: -0.5rem;
-    --hit-area-b: -0.5rem;
-    --hit-area-l: -0.5rem;
-  }
-  .hit-area-4 {
-    --hit-area-t: -1rem;
-    --hit-area-r: -1rem;
-    --hit-area-b: -1rem;
-    --hit-area-l: -1rem;
-  }
-  .hit-area-6 {
-    --hit-area-t: -1.5rem;
-    --hit-area-r: -1.5rem;
-    --hit-area-b: -1.5rem;
-    --hit-area-l: -1.5rem;
-  }
-  .hit-area-8 {
-    --hit-area-t: -2rem;
-    --hit-area-r: -2rem;
-    --hit-area-b: -2rem;
-    --hit-area-l: -2rem;
-  }
-  .hit-area-10 {
-    --hit-area-t: -2.5rem;
-    --hit-area-r: -2.5rem;
-    --hit-area-b: -2.5rem;
-    --hit-area-l: -2.5rem;
-  }
-  .hit-area-12 {
-    --hit-area-t: -3rem;
-    --hit-area-r: -3rem;
-    --hit-area-b: -3rem;
-    --hit-area-l: -3rem;
-  }
-
-  .hit-area-l-1 {
-    --hit-area-l: -0.25rem;
-  }
-  .hit-area-l-2 {
-    --hit-area-l: -0.5rem;
-  }
-  .hit-area-l-4 {
-    --hit-area-l: -1rem;
-  }
-  .hit-area-l-6 {
-    --hit-area-l: -1.5rem;
-  }
-  .hit-area-l-8 {
-    --hit-area-l: -2rem;
-  }
-  .hit-area-l-10 {
-    --hit-area-l: -2.5rem;
-  }
-  .hit-area-l-12 {
-    --hit-area-l: -3rem;
-  }
-
-  .hit-area-r-1 {
-    --hit-area-r: -0.25rem;
-  }
-  .hit-area-r-2 {
-    --hit-area-r: -0.5rem;
-  }
-  .hit-area-r-4 {
-    --hit-area-r: -1rem;
-  }
-  .hit-area-r-6 {
-    --hit-area-r: -1.5rem;
-  }
-  .hit-area-r-8 {
-    --hit-area-r: -2rem;
-  }
-  .hit-area-r-10 {
-    --hit-area-r: -2.5rem;
-  }
-  .hit-area-r-12 {
-    --hit-area-r: -3rem;
-  }
-
-  .hit-area-t-1 {
-    --hit-area-t: -0.25rem;
-  }
-  .hit-area-t-2 {
-    --hit-area-t: -0.5rem;
-  }
-  .hit-area-t-4 {
-    --hit-area-t: -1rem;
-  }
-  .hit-area-t-6 {
-    --hit-area-t: -1.5rem;
-  }
-  .hit-area-t-8 {
-    --hit-area-t: -2rem;
-  }
-  .hit-area-t-10 {
-    --hit-area-t: -2.5rem;
-  }
-  .hit-area-t-12 {
-    --hit-area-t: -3rem;
-  }
-
-  .hit-area-b-1 {
-    --hit-area-b: -0.25rem;
-  }
-  .hit-area-b-2 {
-    --hit-area-b: -0.5rem;
-  }
-  .hit-area-b-4 {
-    --hit-area-b: -1rem;
-  }
-  .hit-area-b-6 {
-    --hit-area-b: -1.5rem;
-  }
-  .hit-area-b-8 {
-    --hit-area-b: -2rem;
-  }
-  .hit-area-b-10 {
-    --hit-area-b: -2.5rem;
-  }
-  .hit-area-b-12 {
-    --hit-area-b: -3rem;
-  }
-
-  .hit-area-x-1 {
-    --hit-area-l: -0.25rem;
-    --hit-area-r: -0.25rem;
-  }
-  .hit-area-x-2 {
-    --hit-area-l: -0.5rem;
-    --hit-area-r: -0.5rem;
-  }
-  .hit-area-x-4 {
-    --hit-area-l: -1rem;
-    --hit-area-r: -1rem;
-  }
-  .hit-area-x-6 {
-    --hit-area-l: -1.5rem;
-    --hit-area-r: -1.5rem;
-  }
-  .hit-area-x-8 {
-    --hit-area-l: -2rem;
-    --hit-area-r: -2rem;
-  }
-  .hit-area-x-10 {
-    --hit-area-l: -2.5rem;
-    --hit-area-r: -2.5rem;
-  }
-  .hit-area-x-12 {
-    --hit-area-l: -3rem;
-    --hit-area-r: -3rem;
-  }
-
-  .hit-area-y-1 {
-    --hit-area-t: -0.25rem;
-    --hit-area-b: -0.25rem;
-  }
-  .hit-area-y-2 {
-    --hit-area-t: -0.5rem;
-    --hit-area-b: -0.5rem;
-  }
-  .hit-area-y-4 {
-    --hit-area-t: -1rem;
-    --hit-area-b: -1rem;
-  }
-  .hit-area-y-6 {
-    --hit-area-t: -1.5rem;
-    --hit-area-b: -1.5rem;
-  }
-  .hit-area-y-8 {
-    --hit-area-t: -2rem;
-    --hit-area-b: -2rem;
-  }
-  .hit-area-y-10 {
-    --hit-area-t: -2.5rem;
-    --hit-area-b: -2.5rem;
-  }
-  .hit-area-y-12 {
-    --hit-area-t: -3rem;
-    --hit-area-b: -3rem;
-  }
-
-  /* terminal-to-html: catpuccin colors */
-  .term-fg30 { color: #6c6f85; } /* black */
-  .term-fg31 { color: #d20f39; } /* red */
-  .term-fg32 { color: #40a02b; } /* green */
-  .term-fg33 { color: #df8e1d; } /* yellow */
-  .term-fg34 { color: #1e66f5; } /* blue */
-  .term-fg35 { color: #8839ef; } /* magenta */
-  .term-fg36 { color: #179299; } /* cyan */
-  .term-fg37 { color: #4c4f69; } /* white */
-  .term-fgi90 { color: #8c8fa1; } /* bright-black */
-  .term-fgi91 { color: #e64553; } /* bright-red */
-  .term-fgi92 { color: #40a02b; } /* bright-green */
-  .term-fgi93 { color: #e5c890; } /* bright-yellow */
-  .term-fgi94 { color: #209fb5; } /* bright-blue */
-  .term-fgi95 { color: #ea76cb; } /* bright-magenta */
-  .term-fgi96 { color: #04a5e5; } /* bright-cyan */
-  .term-fgi97 { color: #bcc0cc; } /* bright-white */
-  .term-bg40 { background-color: #6c6f85; } /* black */
-  .term-bg41 { background-color: #d20f39; } /* red */
-  .term-bg42 { background-color: #40a02b; } /* green */
-  .term-bg43 { background-color: #df8e1d; } /* yellow */
-  .term-bg44 { background-color: #1e66f5; } /* blue */
-  .term-bg45 { background-color: #8839ef; } /* magenta */
-  .term-bg46 { background-color: #179299; } /* cyan */
-  .term-bg47 { background-color: #dce0e8; } /* white */
-  .term-fg1 { @apply font-bold; }
-  .term-fg2 { @apply opacity-60; }
-  .term-fg3 { @apply italic; }
-  .term-fg4 { @apply underline; }
-  .term-fg9 { @apply line-through; }
-
-  @media (prefers-color-scheme: dark) {
-    .term-fg30 { color: #a5adcb; } /* black */
-    .term-fg31 { color: #ed8796; } /* red */
-    .term-fg32 { color: #a6da95; } /* green */
-    .term-fg33 { color: #eed49f; } /* yellow */
-    .term-fg34 { color: #8aadf4; } /* blue */
-    .term-fg35 { color: #c6a0f6; } /* magenta */
-    .term-fg36 { color: #8bd5ca; } /* cyan */
-    .term-fg37 { color: #cad3f5; } /* white */
-    .term-fgi90 { color: #8087a2; } /* bright-black */
-    .term-fgi91 { color: #f5bde6; } /* bright-red */
-    .term-fgi92 { color: #a6da95; } /* bright-green */
-    .term-fgi93 { color: #f5a97f; } /* bright-yellow */
-    .term-fgi94 { color: #7dc4e4; } /* bright-blue */
-    .term-fgi95 { color: #f4dbd6; } /* bright-magenta */
-    .term-fgi96 { color: #91d7e3; } /* bright-cyan */
-    .term-fgi97 { color: #f0c6c6; } /* bright-white */
-    .term-bg40 { background-color: #a5adcb; } /* black */
-    .term-bg41 { background-color: #ed8796; } /* red */
-    .term-bg42 { background-color: #a6da95; } /* green */
-    .term-bg43 { background-color: #eed49f; } /* yellow */
-    .term-bg44 { background-color: #8aadf4; } /* blue */
-    .term-bg45 { background-color: #c6a0f6; } /* magenta */
-    .term-bg46 { background-color: #8bd5ca; } /* cyan */
-    .term-bg47 { background-color: #494d64; } /* white */
-  }
+    .hit-area {
+        position: relative;
+    }
+
+    .hit-area::before {
+        content: "";
+        position: absolute;
+        top: var(--hit-area-t, 0px);
+        right: var(--hit-area-r, 0px);
+        bottom: var(--hit-area-b, 0px);
+        left: var(--hit-area-l, 0px);
+        pointer-events: inherit;
+    }
+
+    .hit-area-debug {
+        position: relative;
+    }
+
+    .hit-area-debug::before {
+        content: "";
+        position: absolute;
+        top: var(--hit-area-t, 0px);
+        right: var(--hit-area-r, 0px);
+        bottom: var(--hit-area-b, 0px);
+        left: var(--hit-area-l, 0px);
+        pointer-events: inherit;
+        border: 1px dashed #3b82f6;
+        background-color: rgba(59, 130, 246, 0.1);
+    }
+
+    .hit-area-debug:hover::before {
+        border-color: #22c55e;
+        background-color: rgba(34, 197, 94, 0.1);
+    }
+
+    .hit-area-1 {
+        --hit-area-t: -0.25rem;
+        --hit-area-r: -0.25rem;
+        --hit-area-b: -0.25rem;
+        --hit-area-l: -0.25rem;
+    }
+    .hit-area-2 {
+        --hit-area-t: -0.5rem;
+        --hit-area-r: -0.5rem;
+        --hit-area-b: -0.5rem;
+        --hit-area-l: -0.5rem;
+    }
+    .hit-area-4 {
+        --hit-area-t: -1rem;
+        --hit-area-r: -1rem;
+        --hit-area-b: -1rem;
+        --hit-area-l: -1rem;
+    }
+    .hit-area-6 {
+        --hit-area-t: -1.5rem;
+        --hit-area-r: -1.5rem;
+        --hit-area-b: -1.5rem;
+        --hit-area-l: -1.5rem;
+    }
+    .hit-area-8 {
+        --hit-area-t: -2rem;
+        --hit-area-r: -2rem;
+        --hit-area-b: -2rem;
+        --hit-area-l: -2rem;
+    }
+    .hit-area-10 {
+        --hit-area-t: -2.5rem;
+        --hit-area-r: -2.5rem;
+        --hit-area-b: -2.5rem;
+        --hit-area-l: -2.5rem;
+    }
+    .hit-area-12 {
+        --hit-area-t: -3rem;
+        --hit-area-r: -3rem;
+        --hit-area-b: -3rem;
+        --hit-area-l: -3rem;
+    }
+
+    .hit-area-l-1 {
+        --hit-area-l: -0.25rem;
+    }
+    .hit-area-l-2 {
+        --hit-area-l: -0.5rem;
+    }
+    .hit-area-l-4 {
+        --hit-area-l: -1rem;
+    }
+    .hit-area-l-6 {
+        --hit-area-l: -1.5rem;
+    }
+    .hit-area-l-8 {
+        --hit-area-l: -2rem;
+    }
+    .hit-area-l-10 {
+        --hit-area-l: -2.5rem;
+    }
+    .hit-area-l-12 {
+        --hit-area-l: -3rem;
+    }
+
+    .hit-area-r-1 {
+        --hit-area-r: -0.25rem;
+    }
+    .hit-area-r-2 {
+        --hit-area-r: -0.5rem;
+    }
+    .hit-area-r-4 {
+        --hit-area-r: -1rem;
+    }
+    .hit-area-r-6 {
+        --hit-area-r: -1.5rem;
+    }
+    .hit-area-r-8 {
+        --hit-area-r: -2rem;
+    }
+    .hit-area-r-10 {
+        --hit-area-r: -2.5rem;
+    }
+    .hit-area-r-12 {
+        --hit-area-r: -3rem;
+    }
+
+    .hit-area-t-1 {
+        --hit-area-t: -0.25rem;
+    }
+    .hit-area-t-2 {
+        --hit-area-t: -0.5rem;
+    }
+    .hit-area-t-4 {
+        --hit-area-t: -1rem;
+    }
+    .hit-area-t-6 {
+        --hit-area-t: -1.5rem;
+    }
+    .hit-area-t-8 {
+        --hit-area-t: -2rem;
+    }
+    .hit-area-t-10 {
+        --hit-area-t: -2.5rem;
+    }
+    .hit-area-t-12 {
+        --hit-area-t: -3rem;
+    }
+
+    .hit-area-b-1 {
+        --hit-area-b: -0.25rem;
+    }
+    .hit-area-b-2 {
+        --hit-area-b: -0.5rem;
+    }
+    .hit-area-b-4 {
+        --hit-area-b: -1rem;
+    }
+    .hit-area-b-6 {
+        --hit-area-b: -1.5rem;
+    }
+    .hit-area-b-8 {
+        --hit-area-b: -2rem;
+    }
+    .hit-area-b-10 {
+        --hit-area-b: -2.5rem;
+    }
+    .hit-area-b-12 {
+        --hit-area-b: -3rem;
+    }
+
+    .hit-area-x-1 {
+        --hit-area-l: -0.25rem;
+        --hit-area-r: -0.25rem;
+    }
+    .hit-area-x-2 {
+        --hit-area-l: -0.5rem;
+        --hit-area-r: -0.5rem;
+    }
+    .hit-area-x-4 {
+        --hit-area-l: -1rem;
+        --hit-area-r: -1rem;
+    }
+    .hit-area-x-6 {
+        --hit-area-l: -1.5rem;
+        --hit-area-r: -1.5rem;
+    }
+    .hit-area-x-8 {
+        --hit-area-l: -2rem;
+        --hit-area-r: -2rem;
+    }
+    .hit-area-x-10 {
+        --hit-area-l: -2.5rem;
+        --hit-area-r: -2.5rem;
+    }
+    .hit-area-x-12 {
+        --hit-area-l: -3rem;
+        --hit-area-r: -3rem;
+    }
+
+    .hit-area-y-1 {
+        --hit-area-t: -0.25rem;
+        --hit-area-b: -0.25rem;
+    }
+    .hit-area-y-2 {
+        --hit-area-t: -0.5rem;
+        --hit-area-b: -0.5rem;
+    }
+    .hit-area-y-4 {
+        --hit-area-t: -1rem;
+        --hit-area-b: -1rem;
+    }
+    .hit-area-y-6 {
+        --hit-area-t: -1.5rem;
+        --hit-area-b: -1.5rem;
+    }
+    .hit-area-y-8 {
+        --hit-area-t: -2rem;
+        --hit-area-b: -2rem;
+    }
+    .hit-area-y-10 {
+        --hit-area-t: -2.5rem;
+        --hit-area-b: -2.5rem;
+    }
+    .hit-area-y-12 {
+        --hit-area-t: -3rem;
+        --hit-area-b: -3rem;
+    }
+
+    /* terminal-to-html: catpuccin colors */
+    .term-fg30 {
+        color: #6c6f85;
+    } /* black */
+    .term-fg31 {
+        color: #d20f39;
+    } /* red */
+    .term-fg32 {
+        color: #40a02b;
+    } /* green */
+    .term-fg33 {
+        color: #df8e1d;
+    } /* yellow */
+    .term-fg34 {
+        color: #1e66f5;
+    } /* blue */
+    .term-fg35 {
+        color: #8839ef;
+    } /* magenta */
+    .term-fg36 {
+        color: #179299;
+    } /* cyan */
+    .term-fg37 {
+        color: #4c4f69;
+    } /* white */
+    .term-fgi90 {
+        color: #8c8fa1;
+    } /* bright-black */
+    .term-fgi91 {
+        color: #e64553;
+    } /* bright-red */
+    .term-fgi92 {
+        color: #40a02b;
+    } /* bright-green */
+    .term-fgi93 {
+        color: #e5c890;
+    } /* bright-yellow */
+    .term-fgi94 {
+        color: #209fb5;
+    } /* bright-blue */
+    .term-fgi95 {
+        color: #ea76cb;
+    } /* bright-magenta */
+    .term-fgi96 {
+        color: #04a5e5;
+    } /* bright-cyan */
+    .term-fgi97 {
+        color: #bcc0cc;
+    } /* bright-white */
+    .term-bg40 {
+        background-color: #6c6f85;
+    } /* black */
+    .term-bg41 {
+        background-color: #d20f39;
+    } /* red */
+    .term-bg42 {
+        background-color: #40a02b;
+    } /* green */
+    .term-bg43 {
+        background-color: #df8e1d;
+    } /* yellow */
+    .term-bg44 {
+        background-color: #1e66f5;
+    } /* blue */
+    .term-bg45 {
+        background-color: #8839ef;
+    } /* magenta */
+    .term-bg46 {
+        background-color: #179299;
+    } /* cyan */
+    .term-bg47 {
+        background-color: #dce0e8;
+    } /* white */
+    .term-fg1 {
+        @apply font-bold;
+    }
+    .term-fg2 {
+        @apply opacity-60;
+    }
+    .term-fg3 {
+        @apply italic;
+    }
+    .term-fg4 {
+        @apply underline;
+    }
+    .term-fg9 {
+        @apply line-through;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .term-fg30 {
+            color: #a5adcb;
+        } /* black */
+        .term-fg31 {
+            color: #ed8796;
+        } /* red */
+        .term-fg32 {
+            color: #a6da95;
+        } /* green */
+        .term-fg33 {
+            color: #eed49f;
+        } /* yellow */
+        .term-fg34 {
+            color: #8aadf4;
+        } /* blue */
+        .term-fg35 {
+            color: #c6a0f6;
+        } /* magenta */
+        .term-fg36 {
+            color: #8bd5ca;
+        } /* cyan */
+        .term-fg37 {
+            color: #cad3f5;
+        } /* white */
+        .term-fgi90 {
+            color: #8087a2;
+        } /* bright-black */
+        .term-fgi91 {
+            color: #f5bde6;
+        } /* bright-red */
+        .term-fgi92 {
+            color: #a6da95;
+        } /* bright-green */
+        .term-fgi93 {
+            color: #f5a97f;
+        } /* bright-yellow */
+        .term-fgi94 {
+            color: #7dc4e4;
+        } /* bright-blue */
+        .term-fgi95 {
+            color: #f4dbd6;
+        } /* bright-magenta */
+        .term-fgi96 {
+            color: #91d7e3;
+        } /* bright-cyan */
+        .term-fgi97 {
+            color: #f0c6c6;
+        } /* bright-white */
+        .term-bg40 {
+            background-color: #a5adcb;
+        } /* black */
+        .term-bg41 {
+            background-color: #ed8796;
+        } /* red */
+        .term-bg42 {
+            background-color: #a6da95;
+        } /* green */
+        .term-bg43 {
+            background-color: #eed49f;
+        } /* yellow */
+        .term-bg44 {
+            background-color: #8aadf4;
+        } /* blue */
+        .term-bg45 {
+            background-color: #c6a0f6;
+        } /* magenta */
+        .term-bg46 {
+            background-color: #8bd5ca;
+        } /* cyan */
+        .term-bg47 {
+            background-color: #494d64;
+        } /* white */
+    }
 }
-- 
2.51.2