diff --git a/gleam.toml b/gleam.toml
index eda2667..525736c 100644
--- a/gleam.toml
+++ b/gleam.toml
@@ -19,6 +19,8 @@ wisp = ">= 1.6.0 and < 2.0.0"
 gleam_erlang = ">= 0.34.0 and < 1.0.0"
 envoy = ">= 1.0.2 and < 2.0.0"
 gleam_http = ">= 4.0.0 and < 5.0.0"
+lustre = ">= 5.0.2 and < 6.0.0"
+gleam_crypto = ">= 1.5.0 and < 2.0.0"
 
 [dev-dependencies]
 gleeunit = ">= 1.0.0 and < 2.0.0"
diff --git a/manifest.toml b/manifest.toml
index 48630be..1d87303 100644
--- a/manifest.toml
+++ b/manifest.toml
@@ -16,8 +16,10 @@ packages = [
   { name = "gleeunit", version = "1.3.1", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "A7DD6C07B7DA49A6E28796058AA89E651D233B357D5607006D70619CD89DAAAB" },
   { name = "glisten", version = "7.0.1", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib", "logging", "telemetry"], otp_app = "glisten", source = "hex", outer_checksum = "1A53CF9FB3231A93FF7F1BD519A43DC968C1722F126CDD278403A78725FC5189" },
   { name = "gramps", version = "3.0.1", build_tools = ["gleam"], requirements = ["gleam_crypto", "gleam_erlang", "gleam_http", "gleam_stdlib"], otp_app = "gramps", source = "hex", outer_checksum = "59194B3980110B403EE6B75330DB82CDE05FC8138491C2EAEACBC7AAEF30B2E8" },
+  { name = "houdini", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "houdini", source = "hex", outer_checksum = "5BA517E5179F132F0471CB314F27FE210A10407387DA1EA4F6FD084F74469FC2" },
   { name = "hpack_erl", version = "0.3.0", build_tools = ["rebar3"], requirements = [], otp_app = "hpack", source = "hex", outer_checksum = "D6137D7079169D8C485C6962DFE261AF5B9EF60FBC557344511C1E65E3D95FB0" },
   { name = "logging", version = "1.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "logging", source = "hex", outer_checksum = "1098FBF10B54B44C2C7FDF0B01C1253CAFACDACABEFB4B0D027803246753E06D" },
+  { name = "lustre", version = "5.0.2", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib", "houdini"], otp_app = "lustre", source = "hex", outer_checksum = "ED46F0CA5BA61067DDC2CEDEA9906AC99E88F49918EFDC58283A531F0A14F042" },
   { name = "marceau", version = "1.3.0", build_tools = ["gleam"], requirements = [], otp_app = "marceau", source = "hex", outer_checksum = "2D1C27504BEF45005F5DFB18591F8610FB4BFA91744878210BDC464412EC44E9" },
   { name = "mist", version = "4.0.7", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_http", "gleam_otp", "gleam_stdlib", "gleam_yielder", "glisten", "gramps", "hpack_erl", "logging"], otp_app = "mist", source = "hex", outer_checksum = "F7D15A1E3232E124C7CE31900253633434E59B34ED0E99F273DEE61CDB573CDD" },
   { name = "platform", version = "1.0.0", build_tools = ["gleam"], requirements = [], otp_app = "platform", source = "hex", outer_checksum = "8339420A95AD89AAC0F82F4C3DB8DD401041742D6C3F46132A8739F6AEB75391" },
@@ -28,9 +30,11 @@ packages = [
 
 [requirements]
 envoy = { version = ">= 1.0.2 and < 2.0.0" }
+gleam_crypto = { version = ">= 1.5.0 and < 2.0.0" }
 gleam_erlang = { version = ">= 0.34.0 and < 1.0.0" }
 gleam_http = { version = ">= 4.0.0 and < 5.0.0" }
 gleam_stdlib = { version = ">= 0.44.0 and < 2.0.0" }
 gleeunit = { version = ">= 1.0.0 and < 2.0.0" }
+lustre = { version = ">= 5.0.2 and < 6.0.0" }
 mist = { version = ">= 4.0.7 and < 5.0.0" }
 wisp = { version = ">= 1.6.0 and < 2.0.0" }
diff --git a/priv/static/main.css b/priv/static/main.css
new file mode 100644
index 0000000..2aa91a7
--- /dev/null
+++ b/priv/static/main.css
@@ -0,0 +1 @@
+@import url(./picker.css);
diff --git a/priv/static/picker.css b/priv/static/picker.css
new file mode 100644
index 0000000..597c995
--- /dev/null
+++ b/priv/static/picker.css
@@ -0,0 +1,37 @@
+html {
+  width: 100vw;
+  background-color: #0f0202;
+  color: #dbcfcf;
+}
+
+#switch-list {
+  height: 1em;
+  span:first-of-type {
+    font-weight: bold;
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+.buttons {
+  display: flex;
+  gap: 1em;
+  flex-direction: column;
+
+  .member-button {
+    padding: 1.666em;
+    font-size: 1.666em;
+    color: inherit;
+    background-color: #3b1010;
+    border: black 3px solid;
+    cursor: &.first {
+      background-color: #a26666;
+    }
+
+    &.other {
+      background-color: #517451;
+    }
+  }
+}
diff --git a/priv/static/picker.mjs b/priv/static/picker.mjs
new file mode 100644
index 0000000..774fff9
--- /dev/null
+++ b/priv/static/picker.mjs
@@ -0,0 +1,64 @@
+const switchListEl = document.querySelector("#switch-list");
+const submitEl = document.querySelector("#submit");
+
+let fronters = (window.fronters = []);
+
+const memberFromButton = (button) => ({
+  name: button.dataset.name,
+  uuid: button.dataset.uuid,
+});
+
+const updateForm = (member) => {
+  const elementPrefix = fronters.length == 1 ? "pf-fronter__" : "pf-backups__";
+  const inputEl = document.querySelector(`#${elementPrefix}${member.uuid}`);
+  inputEl.checked = true;
+
+  if (fronters.length > 0) {
+    submitEl.disabled = false;
+  }
+};
+
+const updateList = () => {
+  switchListEl.innerHTML = fronters
+    .map((member) => `<span>${member.name}</span>`)
+    .join(", ");
+};
+
+const handleButtonClick = (event) => {
+  const button = event.target;
+  const member = memberFromButton(button);
+
+  if (fronters.find((mem) => mem.uuid == member.uuid)) {
+    console.info("already picked, skipping");
+    return;
+  }
+
+  fronters = [...fronters, member];
+
+  // update form
+  updateForm(member);
+
+  // update list
+  updateList();
+
+  if (fronters.length == 1) {
+    button.classList.add("first");
+  } else {
+    button.classList.add("other");
+  }
+};
+
+const reset = () => {
+  submitEl.disabled = true;
+  document.querySelectorAll("input").forEach((el) => {
+    el.checked = false;
+  });
+};
+
+(() => {
+  document.querySelectorAll(".buttons").forEach((el) => {
+    el.addEventListener("click", handleButtonClick);
+  });
+
+  reset();
+})();
diff --git a/src/switcheroo.gleam b/src/switcheroo.gleam
index 547dbf2..209f0bd 100644
--- a/src/switcheroo.gleam
+++ b/src/switcheroo.gleam
@@ -3,6 +3,7 @@ import gleam/erlang/process
 import gleam/int
 import mist
 import switcheroo/router
+import switcheroo/web.{Context}
 import wisp
 import wisp/wisp_mist
 
@@ -13,11 +14,24 @@ pub fn main() -> Nil {
   let assert Ok(port_str) = envoy.get("PORT")
   let assert Ok(port) = int.parse(port_str)
 
+  let ctx = Context(static_directory: static_directory())
+
   let assert Ok(_) =
-    wisp_mist.handler(router.handle_request, secret_key_base)
+    router.handle_request(_, ctx)
+    |> wisp_mist.handler(secret_key_base)
     |> mist.new
+    |> mist.bind("0.0.0.0")
     |> mist.port(port)
     |> mist.start_http
 
   process.sleep_forever()
 }
+
+pub fn static_directory() -> String {
+  // The priv directory is where we store non-Gleam and non-Erlang files,
+  // including static assets to be served.
+  // This function returns an absolute path and works both in development and in
+  // production after compilation.
+  let assert Ok(priv_directory) = wisp.priv_directory("switcheroo")
+  priv_directory <> "/static"
+}
diff --git a/src/switcheroo/login.gleam b/src/switcheroo/login.gleam
index bac1e27..776673e 100644
--- a/src/switcheroo/login.gleam
+++ b/src/switcheroo/login.gleam
@@ -1,5 +1,9 @@
+import gleam/crypto
 import gleam/http.{Delete, Get, Post}
+import gleam/http/cookie
+import gleam/http/response
 import gleam/list
+import gleam/option
 import gleam/string_tree
 import wisp.{type Request, type Response}
 
@@ -29,26 +33,35 @@ fn get_login(_req: Request) -> Response {
 fn post_login(req: Request) -> Response {
   use formdata <- wisp.require_form(req)
 
-  let resp = wisp.redirect("/")
   case list.key_find(formdata.values, "token") {
-    Ok(token) ->
-      wisp.set_cookie(
-        resp,
-        req,
-        cookie_name,
-        token,
-        wisp.Signed,
-        60 * 60 * 24 * 365,
-      )
-    Error(_) ->
-      wisp.set_header(resp, "x-servfail", "token not found in formdata")
+    Ok(token) -> {
+      echo "token: " <> token
+
+      let value = wisp.sign_message(req, <<token:utf8>>, crypto.Sha512)
+      let attrs =
+        cookie.Attributes(
+          ..cookie.defaults(http.Http),
+          max_age: option.Some(60 * 60 * 24 * 365),
+        )
+
+      wisp.redirect("/")
+      |> response.set_cookie(cookie_name, value, attrs)
+    }
+    Error(e) -> {
+      echo e
+      ["<p>awawa it didn't work</p>"]
+      |> string_tree.from_strings
+      |> wisp.html_response(400)
+      |> wisp.set_header("x-servfail", "token not found in formdata")
+    }
   }
 }
 
 fn delete_login(req: Request) -> Response {
-  let resp = wisp.redirect("/session")
-  case wisp.get_cookie(req, cookie_name, wisp.Signed) {
-    Ok(value) -> wisp.set_cookie(resp, req, cookie_name, value, wisp.Signed, 0)
+  let resp = wisp.redirect("/")
+  case wisp.get_cookie(req, cookie_name, wisp.PlainText) {
+    Ok(value) ->
+      wisp.set_cookie(resp, req, cookie_name, value, wisp.PlainText, 0)
     Error(_) -> resp
   }
 }
diff --git a/src/switcheroo/picker.gleam b/src/switcheroo/picker.gleam
index 81f5fe0..1438ae0 100644
--- a/src/switcheroo/picker.gleam
+++ b/src/switcheroo/picker.gleam
@@ -1,7 +1,38 @@
+import gleam/http.{Get, Post}
 import gleam/string_tree
+import lustre/element
+import switcheroo/login
+import switcheroo/picker/page
 import wisp.{type Request, type Response}
 
-pub fn picker(_req: Request) -> Response {
-  string_tree.from_string("<h1>test</h1>")
-  |> wisp.html_response(200)
+pub fn picker(req: Request) -> Response {
+  case req.method {
+    Get -> get_picker(req)
+    Post -> post_picker(req)
+    _ -> wisp.method_not_allowed([Get, Post])
+  }
+}
+
+pub fn get_picker(req: Request) -> Response {
+  case wisp.get_cookie(req, login.cookie_name, wisp.PlainText) {
+    Error(_) ->
+      "unauthorized"
+      |> string_tree.from_string
+      |> wisp.html_response(403)
+    Ok(token) ->
+      page.picker(
+        page.PickerProps([
+          page.Member(name: "aki", uuid: "aki1234"),
+          page.Member(name: "noe", uuid: "noe1234"),
+          page.Member(name: "aurelia", uuid: "aurelia1234"),
+        ]),
+      )
+      |> element.to_document_string
+      |> string_tree.from_string
+      |> wisp.html_response(200)
+  }
+}
+
+pub fn post_picker(req: Request) -> Response {
+  get_picker(req)
 }
diff --git a/src/switcheroo/picker/page.gleam b/src/switcheroo/picker/page.gleam
new file mode 100644
index 0000000..89ebf8e
--- /dev/null
+++ b/src/switcheroo/picker/page.gleam
@@ -0,0 +1,103 @@
+import gleam/list
+import lustre/attribute.{class, id}
+import lustre/element.{type Element, text}
+import lustre/element/html
+
+pub type Member {
+  Member(name: String, uuid: String)
+}
+
+pub type PickerProps {
+  PickerProps(members: List(Member))
+}
+
+pub fn picker(props: PickerProps) -> Element(PickerProps) {
+  element.fragment([
+    html.head([], [
+      html.meta([attribute.charset("utf-8")]),
+      html.meta([
+        attribute.name("viewport"),
+        attribute.content("width=device-width, initial-scale=1.0"),
+      ]),
+      html.script(
+        [attribute.src("/static/picker.mjs"), attribute.type_("module")],
+        "",
+      ),
+      // california style sheet
+      html.link([
+        attribute.rel("stylesheet"),
+        attribute.href("/static/picker.css"),
+      ]),
+    ]),
+    html.body([], [
+      // bucket for the new ordering
+      html.section([class("switch-bucket")], [
+        html.h2([], [text("switching to:")]),
+        html.p([id("switch-list")], []),
+        picker_form(props.members),
+      ]),
+    ]),
+    // buttons!!!
+    // this should scroll separately
+    html.section(
+      [class("buttons")],
+      props.members
+        |> list.map(button),
+    ),
+  ])
+}
+
+fn button(member: Member) -> Element(PickerProps) {
+  html.button(
+    [
+      // we do a little HATEOAS
+      attribute.data("name", member.name),
+      attribute.data("uuid", member.uuid),
+      class("member-button"),
+    ],
+    [text(member.name)],
+  )
+}
+
+fn picker_form(members: List(Member)) -> Element(PickerProps) {
+  html.form([attribute.method("post"), attribute.action("")], [
+    // JS will fill out this form via the buttons
+    html.div([class("hidden"), attribute.aria_hidden(True)], [
+      // only one fronter (as in first front)
+      picker_form_set(members, "radio", "pf-fronter"),
+      // many backups
+      picker_form_set(members, "checkbox", "pf-backups"),
+    ]),
+    html.input([
+      attribute.type_("submit"),
+      attribute.value("switch"),
+      id("submit"),
+      // enable after first pick
+      attribute.disabled(True),
+    ]),
+  ])
+}
+
+fn picker_form_set(
+  members: List(Member),
+  input_type: String,
+  set_name: String,
+) -> Element(PickerProps) {
+  html.div(
+    [],
+    members
+      |> list.map(fn(member: Member) -> Element(PickerProps) {
+        element.fragment([
+          html.input([
+            attribute.type_(input_type),
+            attribute.name(set_name),
+            id(set_name <> "__" <> member.uuid),
+            attribute.value(member.uuid),
+          ]),
+          html.label([attribute.for(set_name <> "__" <> member.uuid)], [
+            text(member.name),
+          ]),
+        ])
+      }),
+  )
+}
diff --git a/src/switcheroo/router.gleam b/src/switcheroo/router.gleam
index 642d39a..29a2943 100644
--- a/src/switcheroo/router.gleam
+++ b/src/switcheroo/router.gleam
@@ -1,11 +1,12 @@
+import gleam/dict
 import gleam/http.{Get}
 import switcheroo/login
 import switcheroo/picker
 import switcheroo/web
 import wisp.{type Request, type Response}
 
-pub fn handle_request(req: Request) -> Response {
-  use req <- web.middleware(req)
+pub fn handle_request(req: Request, ctx: web.Context) -> Response {
+  use req <- web.middleware(req, ctx)
 
   case wisp.path_segments(req) {
     [] -> home_page(req)
@@ -20,11 +21,17 @@ pub fn handle_request(req: Request) -> Response {
 fn home_page(req: Request) -> Response {
   use <- wisp.require_method(req, Get)
 
-  case wisp.get_cookie(req, login.cookie_name, wisp.Signed) {
+  case wisp.get_cookie(req, login.cookie_name, wisp.PlainText) {
     Ok(_) -> {
+      echo "got cookie"
       wisp.redirect("/picker")
     }
-    Error(_) -> {
+    Error(e) -> {
+      echo "did not get cookie: "
+      echo e
+
+      echo req.headers
+
       wisp.redirect("/login")
     }
   }
diff --git a/src/switcheroo/web.gleam b/src/switcheroo/web.gleam
index 19b9220..151ecaa 100644
--- a/src/switcheroo/web.gleam
+++ b/src/switcheroo/web.gleam
@@ -1,12 +1,19 @@
 import wisp
 
+pub type Context {
+  Context(static_directory: String)
+}
+
 pub fn middleware(
   req: wisp.Request,
+  ctx: Context,
   handle_request: fn(wisp.Request) -> wisp.Response,
 ) -> wisp.Response {
   let req = wisp.method_override(req)
   use <- wisp.log_request(req)
   use <- wisp.rescue_crashes
   use req <- wisp.handle_head(req)
+  use <- wisp.serve_static(req, under: "/static", from: ctx.static_directory)
+
   handle_request(req)
 }