@@ -31,6 +31,13 @@ },
 		"add": func(a, b int) int {
 			return a + b
 		},
+		"didOrHandle": func(did, handle string) string {
+			if handle != "" {
+				return fmt.Sprintf("@%s", handle)
+			} else {
+				return did
+			}
+		},
 	}
 }
 

@@ -1,48 +1,47 @@
 {{ define "layouts/topbar" }}
-    {{ with .LoggedInUser }}
-        <nav class="flex items-center space-x-4">
-            <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 }}
-
+<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>
 {{ end }}

@@ -1,17 +1,20 @@
 {{define "title"}}{{ or .UserHandle .UserDid }}{{end}}
 
 {{define "content"}}
-    <h1>{{ or .UserHandle .UserDid }} profile</h1>
+    <h1>{{ didOrHandle .UserDid .UserHandle }}</h1>
 
-    <h3>repos</h3>
-    <ul id="my-knots">
+    <div id="my-repos" class="grid grid-cols-1 md:grid-cols-2 gap-4">
         {{range .Repos}}
-        <li>
-          <code>name: <a href="/@{{or $.UserHandle $.UserDid }}/{{.Name}}">{{.Name}}</a></code><br>
-          <code>knot: {{.Knot}}</code><br>
-        </li>
+        <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>does not have any repos yet</p>
+            <p>This user does not have any repos yet.</p>
         {{end}}
-    </ul>
+    </div>
 {{end}}