diff --git a/appview/pages/templates/repo/new.html b/appview/pages/templates/repo/new.html
index 09cc5dd5..7f6cdda2 100644
--- a/appview/pages/templates/repo/new.html
+++ b/appview/pages/templates/repo/new.html
@@ -1,160 +1,176 @@
 {{ define "title" }}new repo{{ end }}
 
 {{ define "content" }}
-<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 class="grid grid-cols-12">
+  <div class="col-span-full md:col-start-3 md:col-span-8 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. All
+    repositories are publicly accessible.
+    </p>
+  </div>
+  {{ template "newRepoPanel" . }}
 </div>
+{{ end }}
+
+{{ define "newRepoPanel" }}
+  <div class="col-span-full md:col-start-3 md:col-span-8 bg-white dark:bg-gray-800 drop-shadow-sm rounded p-6 md:px-10">
+    {{ template "newRepoForm" . }}
+  </div>
+{{ end }}
 
-<div class="bg-white dark:bg-gray-800 drop-shadow-sm rounded">
+{{ define "newRepoForm" }}
   <form hx-post="/repo/new" hx-swap="none" hx-indicator="#spinner">
+    {{ template "step-1" . }}
+    {{ template "step-2" . }}
 
-    <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>
-
-          <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"
-                />
-              </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 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
+        <span id="spinner" class="group">
+          {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+        </span>
+      </button>
+    </div>
+    <div id="repo" class="error mt-2"></div>
+
+  </form>
+{{ end }}
+
+{{ define "step-1" }}
+  <div class="flex gap-4 relative border-l border-gray-200 dark:border-gray-700 pl-6">
+    <div class="absolute -left-3 -top-0">
+      {{ template "numberCircle" 1 }}
+    </div>
+
+    <!-- Content column -->
+    <div class="flex-1 pb-12">
+      <h2 class="text-lg font-semibold 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">
+        {{ template "name" . }}
+        {{ template "description" . }}
       </div>
+    </div>
+  </div>
+{{ end }}
 
-      <!-- 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>
-        </div>
+{{ define "step-2" }}
+  <div class="flex gap-4 relative border-l border-gray-200 dark:border-gray-700 pl-6">
+    <div class="absolute -left-3 -top-0">
+      {{ template "numberCircle" 2 }}
+    </div>
+
+    <div class="flex-1">
+      <h2 class="text-lg font-semibold 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">
+        {{ template "defaultBranch" . }}
+        {{ template "knot" . }}
       </div>
     </div>
+  </div>
+{{ end }}
 
-    <!-- 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>
-        </button>
+{{ define "name" }}
+  <!-- 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 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 }}
       </div>
-      <div id="repo" class="error mt-2"></div>
+      <input
+        type="text"
+        id="name"
+        name="name"
+        required
+        class="flex-1 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"
+      />
     </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>
+{{ end }}
 
-  </form>
-</div>
+{{ define "description" }}
+  <!-- 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 w-full 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>
+{{ end }}
+
+{{ define "defaultBranch" }}
+  <!-- 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 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>
+{{ end }}
+
+{{ define "knot" }}
+  <!-- Knot Selection -->
+  <div>
+    <label class="block text-sm font-bold uppercase dark:text-white mb-1">
+      Select a knot
+    </label>
+    <div class="w-full 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>
+{{ end }}
+
+{{ define "numberCircle" }}
+  <div class="w-6 h-6 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center text-sm font-medium mt-1">
+    {{.}}
+  </div>
 {{ end }}