diff --git a/client/src/client/page/register_crew.gleam b/client/src/client/page/register_crew.gleam
index a387ad5..f4ac8f1 100644
--- a/client/src/client/page/register_crew.gleam
+++ b/client/src/client/page/register_crew.gleam
@@ -1,6 +1,6 @@
 import client/ui/header
 import client/ui/input
-import glaze/oat/badge
+import client/ui/user_card
 import glaze/oat/button
 import glaze/oat/card
 import glaze/oat/form
@@ -17,7 +17,6 @@ import lustre/element/html
 import lustre/event
 import rsvp
 import shared/contract/register_crew as contract
-import shared/role
 import shared/session.{type Session}
 import shared/user.{type User}
 
@@ -209,10 +208,9 @@ fn view_leader_selection(model: Model) -> element.Element(Msg) {
 
   let view_leaders = case model.suggested_leaders {
     [] -> element.none()
-    found -> {
+    some ->
       [class("grid grid-cols-1 gap-4"), class("@md:grid-cols-2")]
-      |> html.div(list.map(found, view_user_to_leader_card(model, _)))
-    }
+      |> html.div(list.map(some, user_card.view(_, UserSelectedLeader)))
   }
 
   html.div([class("@container")], [
@@ -222,16 +220,6 @@ fn view_leader_selection(model: Model) -> element.Element(Msg) {
   ])
 }
 
-fn view_user_to_leader_card(_model: Model, user: User) -> element.Element(Msg) {
-  let on_click = event.on_click(UserSelectedLeader(user))
-  let hover_style = class("hover:cursor-pointer hover:border-accent")
-
-  card.card([on_click, hover_style, class("flex flex-col gap-1 p-2")], [
-    card.header([], [html.strong([], [html.text(user.full_name)])]),
-    card.content([], [html.div([], [html.small([], [html.text(user.email)])])]),
-  ])
-}
-
 fn view_submit_button() -> element.Element(Msg) {
   let attributes = [event.on_click(UserClickedSubmit), class("w-full")]
   button.button(attributes, [html.text("Register")])
diff --git a/client/src/client/ui/user_card.gleam b/client/src/client/ui/user_card.gleam
new file mode 100644
index 0000000..a9ba77d
--- /dev/null
+++ b/client/src/client/ui/user_card.gleam
@@ -0,0 +1,16 @@
+import glaze/oat/card
+import lustre/attribute.{class}
+import lustre/element
+import lustre/element/html
+import lustre/event
+import shared/user.{type User}
+
+pub fn view(user: User, on_click: fn(User) -> a) -> element.Element(a) {
+  let on_click = event.on_click(on_click(user))
+  let hover_style = class("hover:cursor-pointer hover:border-accent")
+
+  card.card([on_click, hover_style, class("flex flex-col gap-1 p-2")], [
+    card.header([], [html.strong([], [html.text(user.full_name)])]),
+    card.content([], [html.div([], [html.small([], [html.text(user.email)])])]),
+  ])
+}