sonr-io
diff --git a/‎app/blocks/register/components.templ
+51-9 b/‎app/blocks/register/components.templ
+51-9
@@ -1,12 +1,54 @@
 package register
 
-templ View() {
-  <html>
-    <head>
-      <title>Sonr</title>
-    </head>
-    <body>
-      <h1>Auth View</h1>
-    </body>
-  </html>
+import (
+	"github.com/sonr-io/nebula/card"
+	"github.com/sonr-io/nebula/form"
+	"github.com/sonr-io/nebula/hero"
+	"github.com/sonr-io/nebula/input"
+	"github.com/sonr-io/nebula/layout"
+	"github.com/sonr-io/nebula/slider"
+)
+
+templ RegisterProfileView(firstNumber int, lastNumber int) {
+	@layout.Root("New Profile | Sonr.ID") {
+		@layout.Container() {
+			@hero.Title("Basic Info", "Tell us a little about yourself.")
+			@form.Root("/register/passkey", "create-profile") {
+				@form.Body() {
+					@form.Header() {
+						<div class="w-full py-2">
+							<sl-avatar shape="circle" size="large" src="https://avatars.githubusercontent.com/u/101929?v=4"></sl-avatar>
+						</div>
+					}
+					@input.HandleInitial()
+					@slider.HumanInitial(firstNumber, lastNumber)
+					@form.Footer() {
+						@form.Cancel()
+						@form.Submit("Next")
+					}
+				}
+			}
+		}
+	}
+}
+
+templ RegisterPasskeyView(address string, handle string, name string, challenge string, creationBlock string) {
+	@layout.Root("Register | Sonr.ID") {
+		@layout.Container() {
+			@hero.Title("Link a PassKey", "This will be used to login to your vault.")
+			@form.Root("/register/finish", "passkey-form") {
+				<input type="hidden" name="credential" id="credential-data" required/>
+				@form.Body() {
+					@form.Header() {
+						@card.CardAccount(address, name, handle, creationBlock)
+					}
+					@input.CoinSelect()
+					@form.Footer() {
+						@input.PasskeyInitial(address, handle, challenge)
+						@form.Cancel()
+					}
+				}
+			}
+		}
+	}
 }