diff --git a/gleam.toml b/gleam.toml
index 3a1723b..525736c 100644
--- a/gleam.toml
+++ b/gleam.toml
@@ -14,6 +14,13 @@ version = "1.0.0"
 
 [dependencies]
 gleam_stdlib = ">= 0.44.0 and < 2.0.0"
+mist = ">= 4.0.7 and < 5.0.0"
+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 22f5a58..1d87303 100644
--- a/manifest.toml
+++ b/manifest.toml
@@ -2,10 +2,39 @@
 # You typically do not need to edit this file
 
 packages = [
+  { name = "directories", version = "1.2.0", build_tools = ["gleam"], requirements = ["envoy", "gleam_stdlib", "platform", "simplifile"], otp_app = "directories", source = "hex", outer_checksum = "D13090CFCDF6759B87217E8DDD73A75903A700148A82C1D33799F333E249BF9E" },
+  { name = "envoy", version = "1.0.2", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "envoy", source = "hex", outer_checksum = "95FD059345AA982E89A0B6E2A3BF1CF43E17A7048DCD85B5B65D3B9E4E39D359" },
+  { name = "exception", version = "2.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "exception", source = "hex", outer_checksum = "F5580D584F16A20B7FCDCABF9E9BE9A2C1F6AC4F9176FA6DD0B63E3B20D450AA" },
+  { name = "filepath", version = "1.1.2", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "filepath", source = "hex", outer_checksum = "B06A9AF0BF10E51401D64B98E4B627F1D2E48C154967DA7AF4D0914780A6D40A" },
+  { name = "gleam_crypto", version = "1.5.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_crypto", source = "hex", outer_checksum = "917BC8B87DBD584830E3B389CBCAB140FFE7CB27866D27C6D0FB87A9ECF35602" },
+  { name = "gleam_erlang", version = "0.34.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "0C38F2A128BAA0CEF17C3000BD2097EB80634E239CE31A86400C4416A5D0FDCC" },
+  { name = "gleam_http", version = "4.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_http", source = "hex", outer_checksum = "0A62451FC85B98062E0907659D92E6A89F5F3C0FBE4AB8046C99936BF6F91DBC" },
+  { name = "gleam_json", version = "2.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_json", source = "hex", outer_checksum = "C55C5C2B318533A8072D221C5E06E5A75711C129E420DD1CE463342106012E5D" },
+  { name = "gleam_otp", version = "0.16.1", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "50DA1539FC8E8FA09924EB36A67A2BBB0AD6B27BCDED5A7EF627057CF69D035E" },
   { name = "gleam_stdlib", version = "0.59.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "F8FEE9B35797301994B81AF75508CF87C328FE1585558B0FFD188DC2B32EAA95" },
+  { name = "gleam_yielder", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_yielder", source = "hex", outer_checksum = "8E4E4ECFA7982859F430C57F549200C7749823C106759F4A19A78AEA6687717A" },
   { 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" },
+  { name = "simplifile", version = "2.2.1", build_tools = ["gleam"], requirements = ["filepath", "gleam_stdlib"], otp_app = "simplifile", source = "hex", outer_checksum = "C88E0EE2D509F6D86EB55161D631657675AA7684DAB83822F7E59EB93D9A60E3" },
+  { name = "telemetry", version = "1.3.0", build_tools = ["rebar3"], requirements = [], otp_app = "telemetry", source = "hex", outer_checksum = "7015FC8919DBE63764F4B4B87A95B7C0996BD539E0D499BE6EC9D7F3875B79E6" },
+  { name = "wisp", version = "1.6.0", build_tools = ["gleam"], requirements = ["directories", "exception", "gleam_crypto", "gleam_erlang", "gleam_http", "gleam_json", "gleam_stdlib", "logging", "marceau", "mist", "simplifile"], otp_app = "wisp", source = "hex", outer_checksum = "AE1C568FE30718C358D3B37666DF0A0743ECD96094AD98C9F4921475075F660A" },
 ]
 
 [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 2882b05..209f0bd 100644
--- a/src/switcheroo.gleam
+++ b/src/switcheroo.gleam
@@ -1,5 +1,37 @@
-import gleam/io
+import envoy
+import gleam/erlang/process
+import gleam/int
+import mist
+import switcheroo/router
+import switcheroo/web.{Context}
+import wisp
+import wisp/wisp_mist
 
 pub fn main() -> Nil {
-  io.println("Hello from switcheroo!")
+  wisp.configure_logger()
+
+  let assert Ok(secret_key_base) = envoy.get("SECRET_KEY")
+  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(_) =
+    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
new file mode 100644
index 0000000..776673e
--- /dev/null
+++ b/src/switcheroo/login.gleam
@@ -0,0 +1,67 @@
+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}
+
+pub const cookie_name = "pluralkit_token"
+
+pub fn login(req: Request) -> Response {
+  case req.method {
+    Get -> get_login(req)
+    Post -> post_login(req)
+    Delete -> delete_login(req)
+    _ -> wisp.method_not_allowed([Get, Post, Delete])
+  }
+}
+
+fn get_login(_req: Request) -> Response {
+  [
+    "<p>Hi, need that one's PluralKit token! <3</p>",
+    "<form action='/login' method='post'>",
+    "  <label for='token'><b>PluralKit Token</b></label>",
+    "  <input type='string' name='token' id='token' />",
+    "  <input type='submit' value='Login'/>", "</form>",
+  ]
+  |> string_tree.from_strings
+  |> wisp.html_response(200)
+}
+
+fn post_login(req: Request) -> Response {
+  use formdata <- wisp.require_form(req)
+
+  case list.key_find(formdata.values, "token") {
+    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("/")
+  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
new file mode 100644
index 0000000..1438ae0
--- /dev/null
+++ b/src/switcheroo/picker.gleam
@@ -0,0 +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 {
+  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
new file mode 100644
index 0000000..29a2943
--- /dev/null
+++ b/src/switcheroo/router.gleam
@@ -0,0 +1,38 @@
+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, ctx: web.Context) -> Response {
+  use req <- web.middleware(req, ctx)
+
+  case wisp.path_segments(req) {
+    [] -> home_page(req)
+
+    ["login"] -> login.login(req)
+    ["picker"] -> picker.picker(req)
+
+    _ -> wisp.not_found()
+  }
+}
+
+fn home_page(req: Request) -> Response {
+  use <- wisp.require_method(req, Get)
+
+  case wisp.get_cookie(req, login.cookie_name, wisp.PlainText) {
+    Ok(_) -> {
+      echo "got cookie"
+      wisp.redirect("/picker")
+    }
+    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
new file mode 100644
index 0000000..151ecaa
--- /dev/null
+++ b/src/switcheroo/web.gleam
@@ -0,0 +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)
+}