diff --git a/appview/pages/templates/knots.html b/appview/pages/templates/knots.html
index 474b88aa..8e57e530 100644
--- a/appview/pages/templates/knots.html
+++ b/appview/pages/templates/knots.html
@@ -3,54 +3,89 @@
 {{ define "content" }}
     <h1>knots</h1>
 
-    <h2>register</h2>
-    put in a domain, and use the key while booting up your knotserver
-    <form hx-post="/knots/key">
-        <label for="domain">domain:</label>
-        <input type="text" id="domain" name="domain" required />
-        <button class="btn my-2" type="text">generate key</button>
-    </form>
+    <section class="mb-12">
+        <h2 class="text-2xl mb-4">register a knot</h2>
+        <form hx-post="/knots/key" class="flex gap-4 items-end">
+            <div>
+                <label for="domain"
+                    >Generate a key to start your knot with.</label
+                >
+                <input
+                    type="text"
+                    id="domain"
+                    name="domain"
+                    placeholder="knot.example.com"
+                    required
+                />
+            </div>
+            <button class="btn" type="submit">generate key</button>
+        </form>
+    </section>
 
-    <h3>my knots</h3>
-    <ul id="my-knots">
-        {{ range .Registrations }}
-            {{ if .Registered }}
-                <li>
-                    <code
-                        >domain:
-                        <a href="/knots/{{ .Domain }}">{{ .Domain }}</a></code
-                    ><br />
-                    <code>opened by: {{ .ByDid }}</code><br />
-                    <code>on: {{ .Created }}</code><br />
-                    <code>registered on: {{ .Registered }}</code>
-                </li>
+    <section class="mb-12">
+        <h3 class="text-xl font-semibold mb-4">my knots</h3>
+        <ul id="my-knots" class="space-y-6">
+            {{ range .Registrations }}
+                {{ if .Registered }}
+                    <li class="border rounded p-4 flex flex-col gap-2">
+                        <div>
+                            <a href="/knots/{{ .Domain }}" class="font-semibold"
+                                >{{ .Domain }}</a
+                            >
+                        </div>
+                        <div class="text-gray-600">
+                            Owned by
+                            {{ .ByDid }}
+                        </div>
+                        <div class="text-gray-600">
+                            Registered on
+                            {{ .Registered }}
+                        </div>
+                    </li>
+                {{ end }}
+            {{ else }}
+                <p class="text-gray-600">you don't have any knots yet</p>
             {{ end }}
-        {{ else }}
-            <p>you don't have any knots yet</p>
-        {{ end }}
-    </ul>
-    <h3>pending registrations</h3>
-    <ul id="pending-registrations">
-        {{ range .Registrations }}
-            {{ if not .Registered }}
-                <li>
-                    <code
-                        >domain:
-                        <a href="/knots/{{ .Domain }}">{{ .Domain }}</a></code
-                    ><br />
-                    <code>opened by: {{ .ByDid }}</code><br />
-                    <code>on: {{ .Created }}</code><br />
-                    <code>pending registration</code>
-                    <button
-                        class="btn my-2"
-                        hx-post="/knots/{{ .Domain }}/init"
-                    >
-                        initialize
-                    </button>
-                </li>
+        </ul>
+    </section>
+
+    <section>
+        <h3 class="text-xl font-semibold mb-4">pending registrations</h3>
+        <ul id="pending-registrations" class="space-y-6">
+            {{ range .Registrations }}
+                {{ if not .Registered }}
+                    <li class="border rounded p-4 flex flex-col gap-2">
+                        <div>
+                            <a
+                                href="/knots/{{ .Domain }}"
+                                class="text-blue-600 hover:underline"
+                                >{{ .Domain }}</a
+                            >
+                        </div>
+                        <div class="text-gray-600">
+                            Opened by
+                            {{ .ByDid }}
+                        </div>
+                        <div class="text-gray-600">
+                            Created on
+                            {{ .Created }}
+                        </div>
+                        <div class="flex items-center gap-4 mt-2">
+                            <span class="text-amber-600"
+                                >pending registration</span
+                            >
+                            <button
+                                class="btn"
+                                hx-post="/knots/{{ .Domain }}/init"
+                            >
+                                initialize
+                            </button>
+                        </div>
+                    </li>
+                {{ end }}
+            {{ else }}
+                <p class="text-gray-600">no registrations yet</p>
             {{ end }}
-        {{ else }}
-            <p>no registrations yet</p>
-        {{ end }}
-    </ul>
+        </ul>
+    </section>
 {{ end }}
diff --git a/appview/pages/templates/layouts/base.html b/appview/pages/templates/layouts/base.html
index 62d4e824..3ff47e67 100644
--- a/appview/pages/templates/layouts/base.html
+++ b/appview/pages/templates/layouts/base.html
@@ -8,11 +8,11 @@
                 content="width=device-width, initial-scale=1.0"
             />
             <script src="/static/htmx.min.js"></script>
-            <link href="/static/tw.css" rel="stylesheet" />
+            <link href="/static/tw.css" rel="stylesheet" type="text/css" />
             <title>{{ block "title" . }}tangled{{ end }}</title>
         </head>
-        <body class="container">
-            <header class="topbar">
+        <body class="container mx-auto px-10">
+            <header>
                 {{ block "topbar" . }}
                     {{ template "layouts/topbar" . }}
                 {{ end }}
diff --git a/appview/pages/templates/layouts/topbar.html b/appview/pages/templates/layouts/topbar.html
index 8fe7be0b..c38006bc 100644
--- a/appview/pages/templates/layouts/topbar.html
+++ b/appview/pages/templates/layouts/topbar.html
@@ -1,47 +1,47 @@
 {{ define "layouts/topbar" }}
-<nav class="flex items-center space-x-4">
-  <a
-      href="/"
-      hx-boost="true"
-      class="text-gray-600 hover:text-gray-900"
-      >timeline</a
-    >
-  {{ with .LoggedInUser }}
-      <a
-          href="/settings"
-          hx-boost="true"
-          class="text-gray-600 hover:text-gray-900"
-          >settings</a
-      >
-      <a
-          href="/knots"
-          hx-boost="true"
-          class="text-gray-600 hover:text-gray-900"
-          >knots</a
-      >
-      <a
-          href="/repo/new"
-          hx-boost="true"
-          class="text-gray-600 hover:text-gray-900"
-          >add repos</a
-      >
-      {{ if .Handle }}
-          <a
-              href="/@{{ .Handle }}"
-              hx-boost="true"
-              class="text-gray-600 hover:text-gray-900"
-              >my profile</a
-          >
-      {{ else }}
-          <a
-              href="/{{ .Did }}"
-              hx-boost="true"
-              class="text-gray-600 hover:text-gray-900"
-              >my profile</a
-          >
-      {{ end }}
-  {{ else }}
-      <a href="/login" class="btn my-2">login</a>
-  {{ end }}
-</nav>
+    {{ with .LoggedInUser }}
+        <nav class="flex items-center space-x-4 py-10">
+            <a
+                href="/"
+                hx-boost="true"
+                class="text-gray-600 hover:text-gray-900"
+                >timeline</a
+            >
+            <a
+                href="/settings"
+                hx-boost="true"
+                class="text-gray-600 hover:text-gray-900"
+                >settings</a
+            >
+            <a
+                href="/knots"
+                hx-boost="true"
+                class="text-gray-600 hover:text-gray-900"
+                >knots</a
+            >
+            <a
+                href="/repo/new"
+                hx-boost="true"
+                class="text-gray-600 hover:text-gray-900"
+                >add repos</a
+            >
+            {{ if .Handle }}
+                <a
+                    href="/@{{ .Handle }}"
+                    hx-boost="true"
+                    class="text-gray-600 hover:text-gray-900"
+                    >my profile</a
+                >
+            {{ else }}
+                <a
+                    href="/{{ .Did }}"
+                    hx-boost="true"
+                    class="text-gray-600 hover:text-gray-900"
+                    >my profile</a
+                >
+            {{ end }}
+        </nav>
+    {{ else }}
+        <a href="/login" class="btn my-2">login</a>
+    {{ end }}
 {{ end }}
diff --git a/appview/pages/templates/user/profile.html b/appview/pages/templates/user/profile.html
index 6c04882d..9726ab58 100644
--- a/appview/pages/templates/user/profile.html
+++ b/appview/pages/templates/user/profile.html
@@ -1,20 +1,32 @@
-{{define "title"}}{{ or .UserHandle .UserDid }}{{end}}
+{{ define "title" }}{{ or .UserHandle .UserDid }}{{ end }}
 
-{{define "content"}}
-    <h1>{{ didOrHandle .UserDid .UserHandle }}</h1>
-
-    <div id="my-repos" class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        {{range .Repos}}
-        <div id="repo-card" class="border border-black p-4 shadow-sm bg-white">
-          <div id="repo-card-name" class="font-medium">
-            <a href="/@{{or $.UserHandle $.UserDid }}/{{.Name}}">{{.Name}}</a>
-          </div>
-          <div id="repo-knot-name" class="text-gray-600 text-sm font-mono">
-            {{.Knot}}
-          </div>
-        </div>
-        {{else}}
-            <p>This user does not have any repos yet.</p>
-        {{end}}
-    </div>
-{{end}}
+{{ define "content" }}
+    <h1>
+        <h1>{{ didOrHandle .UserDid .UserHandle }}</h1>
+    </h1>
+    <section>
+        <h2 class="text-xl font-semibold mb-4">repos</h2>
+        <ul id="my-knots" class="space-y-4">
+            {{ range .Repos }}
+                <li class="p-4 bg-gray-50 rounded-lg">
+                    <div class="font-mono">
+                        <div class="mb-2">
+                            name:
+                            <a
+                                href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}"
+                                class="text-blue-600 hover:text-blue-800"
+                                >{{ .Name }}</a
+                            >
+                        </div>
+                        <div>
+                            knot:
+                            {{ .Knot }}
+                        </div>
+                    </div>
+                </li>
+            {{ else }}
+                <p class="text-gray-600">does not have any repos yet</p>
+            {{ end }}
+        </ul>
+    </section>
+{{ end }}
diff --git a/input.css b/input.css
index d07413d9..a6bfd83f 100644
--- a/input.css
+++ b/input.css
@@ -39,16 +39,16 @@
     @layer components {
         .btn {
             @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center
-                justify-center bg-transparent px-2 pb-[0.2rem] text-base
-                text-black before:absolute before:inset-0 before:-z-10
-                before:block before:rounded-sm before:border before:border-black
-                before:bg-white before:shadow-[0_2px_2px_0_rgba(0,0,0,0.1),inset_0_-2px_0_0_#ffffff]
-                before:content-[''] hover:before:border-gray-800
-                hover:before:bg-gray-50
-                hover:before:shadow-[0_2px_2px_0_rgba(0,0,0,0.1),inset_0_-2px_0_0_#ffffff]
-                focus:outline-none focus-visible:before:outline
-                focus-visible:before:outline-4 focus-visible:before:outline-black
-                active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.1)];
+            justify-center bg-transparent px-2 pb-[0.2rem] text-base
+            text-gray-900 before:absolute before:inset-0 before:-z-10
+            before:block before:rounded-sm before:border before:border-blue-200
+            before:bg-white before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#e5edff]
+            before:content-[''] hover:before:border-blue-300
+            hover:before:bg-blue-50
+            hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#e5edff]
+            focus:outline-none focus-visible:before:outline
+            focus-visible:before:outline-4 focus-visible:before:outline-blue-500
+            active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)];
         }
     }
     @layer utilities {