diff --git a/appview/pages/templates/fragments/logotype.html b/appview/pages/templates/fragments/logotype.html
new file mode 100644
index 00000000..f4745fa7
--- /dev/null
+++ b/appview/pages/templates/fragments/logotype.html
@@ -0,0 +1,8 @@
+{{ define "fragments/logotype" }}
+  <span class="flex items-center gap-2">
+    <span class="font-bold italic">tangled</span>
+    <span class="font-normal not-italic text-xs rounded bg-gray-100 dark:bg-gray-700 px-1">
+      alpha
+    </span>
+  <span>
+{{ end }}
diff --git a/appview/pages/templates/layouts/fragments/topbar.html b/appview/pages/templates/layouts/fragments/topbar.html
index bc89da24..7b7ea50e 100644
--- a/appview/pages/templates/layouts/fragments/topbar.html
+++ b/appview/pages/templates/layouts/fragments/topbar.html
@@ -2,9 +2,7 @@
     <nav class="space-x-4 px-6 py-2 rounded bg-white dark:bg-gray-800 dark:text-white drop-shadow-sm">
         <div class="flex justify-between p-0 items-center">
             <div id="left-items">
-                <a href="/" hx-boost="true" class="flex gap-2 font-bold italic">
-                  tangled<sub>alpha</sub>
-                </a>
+              <a href="/" hx-boost="true" class="text-lg">{{ template "fragments/logotype" }}</a>
             </div>
 
             <div id="right-items" class="flex items-center gap-2">
diff --git a/appview/pages/templates/user/completeSignup.html b/appview/pages/templates/user/completeSignup.html
index 6582b5e7..823834e1 100644
--- a/appview/pages/templates/user/completeSignup.html
+++ b/appview/pages/templates/user/completeSignup.html
@@ -29,10 +29,8 @@
         </head>
         <body class="flex items-center justify-center min-h-screen">
             <main class="max-w-md px-6 -mt-4">
-                <h1
-                    class="text-center text-2xl font-semibold italic dark:text-white"
-                >
-                    tangled
+                <h1 class="flex place-content-center text-2xl font-semibold italic dark:text-white" >
+                  {{ template "fragments/logotype" }}
                 </h1>
                 <h2 class="text-center text-xl italic dark:text-white">
                     tightly-knit social coding.
diff --git a/appview/pages/templates/user/login.html b/appview/pages/templates/user/login.html
index 414e2733..57b0ba8b 100644
--- a/appview/pages/templates/user/login.html
+++ b/appview/pages/templates/user/login.html
@@ -13,8 +13,8 @@
         </head>
         <body class="flex items-center justify-center min-h-screen">
             <main class="max-w-md px-6 -mt-4">
-                <h1 class="text-center text-2xl font-semibold italic dark:text-white" >
-                    tangled
+                <h1 class="flex place-content-center text-2xl font-semibold italic dark:text-white" >
+                  {{ template "fragments/logotype" }}
                 </h1>
                 <h2 class="text-center text-xl italic dark:text-white">
                     tightly-knit social coding.
diff --git a/appview/pages/templates/user/signup.html b/appview/pages/templates/user/signup.html
index 530a3ef3..84818837 100644
--- a/appview/pages/templates/user/signup.html
+++ b/appview/pages/templates/user/signup.html
@@ -13,7 +13,9 @@
         </head>
         <body class="flex items-center justify-center min-h-screen">
             <main class="max-w-md px-6 -mt-4">
-                <h1 class="text-center text-2xl font-semibold italic dark:text-white" >tangled</h1>
+                <h1 class="flex place-content-center text-2xl font-semibold italic dark:text-white" >
+                  {{ template "fragments/logotype" }}
+                </h1>
                 <h2 class="text-center text-xl italic dark:text-white">tightly-knit social coding.</h2>
                 <form
                     class="mt-4 max-w-sm mx-auto"
