diff --git a/appview/pages/templates/repo/new.html b/appview/pages/templates/repo/new.html
index d24e270c..09cc5dd5 100644
--- a/appview/pages/templates/repo/new.html
+++ b/appview/pages/templates/repo/new.html
@@ -1,74 +1,160 @@
 {{ define "title" }}new repo{{ end }}
 
 {{ define "content" }}
-<div class="p-6">
-  <p class="text-xl font-bold dark:text-white">Create a new repository</p>
+<div class="px-6 py-2 mb-4">
+  <h1 class="text-xl font-bold dark:text-white mb-1">Create a new repository</h1>
+  <p class="text-gray-600 dark:text-gray-400 mb-1">
+    Repositories contain a project's files and version history.
+  </p>
 </div>
-<div class="p-6 bg-white dark:bg-gray-800 drop-shadow-sm rounded">
-  <form hx-post="/repo/new" class="space-y-12" hx-swap="none" hx-indicator="#spinner">
-    <div class="space-y-2">
-      <label for="name" class="-mb-1 dark:text-white">Repository name</label>
-      <input
-          type="text"
-          id="name"
-          name="name"
-          required
-          class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600"
-          />
-      <p class="text-sm text-gray-500 dark:text-gray-400">All repositories are publicly visible.</p>
 
-      <label for="branch" class="dark:text-white">Default branch</label>
-      <input
-          type="text"
-          id="branch"
-          name="branch"
-          value="main"
-          required
-          class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600"
-          />
+<div class="bg-white dark:bg-gray-800 drop-shadow-sm rounded">
+  <form hx-post="/repo/new" hx-swap="none" hx-indicator="#spinner">
 
-      <label for="description" class="dark:text-white">Description</label>
-      <input
-          type="text"
-          id="description"
-          name="description"
-          class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600"
-          />
-    </div>
+    <div class="p-6">
+      <!-- Step 1: General -->
+      <div class="flex gap-4">
+        <div class="flex flex-col items-center w-10 flex-shrink-0">
+          <div class="w-6 h-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-full flex items-center justify-center text-sm font-medium mt-1">
+            1
+          </div>
+          <div class="w-px bg-gray-300 dark:bg-gray-600 h-80 mt-1"></div>
+        </div>
+        <div class="flex-1">
+          <div class="mb-6">
+            <div class="text-lg font-semibold dark:text-white mb-1">General</div>
+            <div class="text-sm text-gray-500 dark:text-gray-400">Basic repository information.</div>
+          </div>
 
-    <fieldset class="space-y-3">
-      <legend class="dark:text-white">Select a knot</legend>
-      <div class="space-y-2">
-        <div class="flex flex-col">
-        {{ range .Knots }}
-          <div class="flex items-center">
-            <input
-                type="radio"
-                name="domain"
-                value="{{ . }}"
-                class="mr-2"
-                id="domain-{{ . }}"
+          <div class="space-y-2">
+            <!-- Repository Name with Owner -->
+            <div>
+              <label class="block text-sm font-bold uppercase dark:text-white mb-1">
+                Repository name
+              </label>
+              <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-0">
+                {{ if .LoggedInUser.Handle }}
+                  <div class="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.Handle }}
+                    <span class="md:hidden pr-2 py-2 text-gray-500 dark:text-gray-400">/</span>
+                  </div>
+                  <span class="hidden md:inline pr-2 py-2 text-gray-500 dark:text-gray-400 border-t border-b border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700">/</span>
+                {{ end }}
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  required
+                  class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded md:rounded-r md:rounded-l-none px-3 py-2"
+                  placeholder="repository-name"
                 />
-            <label for="domain-{{ . }}" class="dark:text-white">{{ . }}</label>
+              </div>
+              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                Choose a unique, descriptive name for your repository. Use letters, numbers, and hyphens.
+              </p>
+            </div>
+
+            <!-- Description -->
+            <div>
+              <label for="description" class="block text-sm font-bold uppercase dark:text-white mb-1">
+                Description
+              </label>
+              <input
+                type="text"
+                id="description"
+                name="description"
+                class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded px-3 py-2"
+                placeholder="A brief description of your project..."
+              />
+              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                Optional. A short description to help others understand what your project does.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Step 2: Configuration -->
+      <div class="flex gap-4">
+        <div class="flex flex-col items-center w-10 flex-shrink-0">
+          <div class="w-6 h-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-full flex items-center justify-center text-sm font-medium mt-1">
+            2
+          </div>
+        </div>
+        <div class="flex-1">
+          <div class="mb-6">
+            <div class="text-lg font-semibold dark:text-white mb-1">Configuration</div>
+            <div class="text-sm text-gray-500 dark:text-gray-400">Repository settings and hosting.</div>
+          </div>
+
+          <div class="space-y-2">
+            <!-- Default Branch -->
+            <div>
+              <label for="branch" class="block text-sm font-bold uppercase dark:text-white mb-1">
+                Default branch
+              </label>
+              <input
+                type="text"
+                id="branch"
+                name="branch"
+                value="main"
+                required
+                class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded px-3 py-2"
+              />
+              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                The primary branch where development happens. Common choices are "main" or "master".
+              </p>
+            </div>
+
+            <!-- Knot Selection -->
+            <div>
+              <label class="block text-sm font-bold uppercase dark:text-white mb-1">
+                Select a knot
+              </label>
+              <div class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded p-3 space-y-2">
+                {{ range .Knots }}
+                  <div class="flex items-center">
+                    <input
+                      type="radio"
+                      name="domain"
+                      value="{{ . }}"
+                      class="mr-2"
+                      id="domain-{{ . }}"
+                      required
+                    />
+                    <label for="domain-{{ . }}" class="dark:text-white lowercase">{{ . }}</label>
+                  </div>
+                {{ else }}
+                <p class="dark:text-white">no knots available.</p>
+                {{ end }}
+              </div>
+              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                A knot hosts repository data and handles Git operations.
+                You can also <a href="/knots" class="underline">register your own knot</a>.
+              </p>
+            </div>
           </div>
-        {{ else }}
-        <p class="dark:text-white">No knots available.</p>
-        {{ end }}
         </div>
       </div>
-      <p class="text-sm text-gray-500 dark:text-gray-400">A knot hosts repository data. <a href="/knots" class="underline">Learn how to register your own knot.</a></p>
-    </fieldset>
+    </div>
 
-    <div class="space-y-2">
+    <!-- Create Repository Button -->
+    <div class="p-6 border-t border-gray-200 dark:border-gray-700">
+      <div class="flex items-center justify-between">
+        <div class="text-sm text-gray-500 dark:text-gray-400">
+            All repositories are publicly accessible.
+        </div>
         <button type="submit" class="btn-create flex items-center gap-2">
-            {{ i "book-plus" "w-4 h-4" }}
-            create repo
-            <span id="spinner" class="group">
-                {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-            </span>
+          {{ i "book-plus" "w-4 h-4" }}
+          create repo
+          <span id="spinner" class="group">
+            {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+          </span>
         </button>
-        <div id="repo" class="error"></div>
+      </div>
+      <div id="repo" class="error mt-2"></div>
     </div>
+
   </form>
 </div>
 {{ end }}
diff --git a/appview/pages/templates/strings/put.html b/appview/pages/templates/strings/put.html
index e5d4f2f2..154af060 100644
--- a/appview/pages/templates/strings/put.html
+++ b/appview/pages/templates/strings/put.html
@@ -3,8 +3,8 @@
 {{ define "content" }}
   <div class="px-6 py-2 mb-4">
     {{ if eq .Action "new" }}
-      <p class="text-xl font-bold dark:text-white">Create a new string</p>
-      <p class="">Store and share code snippets with ease.</p>
+      <p class="text-xl font-bold dark:text-white mb-1">Create a new string</p>
+      <p class="text-gray-600 dark:text-gray-400 mb-1">Store and share code snippets with ease.</p>
     {{ else }}
       <p class="text-xl font-bold dark:text-white">Edit string</p>
     {{ end }}