diff --git a/application/public/styles.scss b/application/public/styles.scss
index 6dfbded..d32e94e 100644
--- a/application/public/styles.scss
+++ b/application/public/styles.scss
@@ -83,7 +83,7 @@ a {
   background-color: $secondary-bg-color-light;
 }
 
-input {
+input,select {
   background-color: $secondary-bg-color-light;
   border: none;
   border-radius: 3px;
diff --git a/application/src/pages/participants/add.rs b/application/src/pages/participants/add.rs
index 7216d9b..a619102 100644
--- a/application/src/pages/participants/add.rs
+++ b/application/src/pages/participants/add.rs
@@ -1,9 +1,84 @@
 use leptos::*;
 
+#[component]
+pub fn SelectOption(is: &'static str, value: ReadSignal<String>) -> impl IntoView {
+    view! {
+        <option
+            value=is
+            selected=move || value.get() == is
+        >
+            {is}
+        </option>
+    }
+}
+
 /// Navigation bar
 #[component]
 pub fn Add() -> impl IntoView {
+    let websocket = expect_context::<crate::util::surrealdb::SurrealContext>();
+
+    let (name, set_name) = create_signal(String::from(""));
+    let (group, set_group) = create_signal(String::from("A1"));
+
+    let on_submit = move |ev: leptos::ev::SubmitEvent| {
+        ev.prevent_default();
+
+        websocket.add_person(name.get(), group.get());
+
+        set_name.set(String::from(""))
+    };
     view! {
         <h1>"Deelnemer toevoegen"</h1>
+        <form class="add" on:submit=on_submit>
+            <h1>"WRB Timings"</h1>
+            <select
+                on:change=move |ev| {
+                    set_group.set(event_target_value(&ev));
+                }
+            >
+                <SelectOption value=group is="A1"/>
+                <SelectOption value=group is="A2"/>
+                <SelectOption value=group is="A3"/>
+                <SelectOption value=group is="A4"/>
+                <SelectOption value=group is="A5"/>
+                <SelectOption value=group is="A6"/>
+
+                <SelectOption value=group is="B1"/>
+                <SelectOption value=group is="B2"/>
+                <SelectOption value=group is="B3"/>
+                <SelectOption value=group is="B4"/>
+                <SelectOption value=group is="B5"/>
+                <SelectOption value=group is="B6"/>
+
+                <SelectOption value=group is="C1"/>
+                <SelectOption value=group is="C2"/>
+                <SelectOption value=group is="C3"/>
+                <SelectOption value=group is="C4"/>
+                <SelectOption value=group is="C5"/>
+                <SelectOption value=group is="C6"/>
+
+                <SelectOption value=group is="D1"/>
+                <SelectOption value=group is="D2"/>
+                <SelectOption value=group is="D3"/>
+                <SelectOption value=group is="D4"/>
+                <SelectOption value=group is="D5"/>
+                <SelectOption value=group is="D6"/>
+
+                <SelectOption value=group is="Z1"/>
+                <SelectOption value=group is="Z2"/>
+                <SelectOption value=group is="Z3"/>
+                <SelectOption value=group is="Z4"/>
+                <SelectOption value=group is="Z5"/>
+                <SelectOption value=group is="Z6"/>
+            </select>
+            <input type="text"
+                placeholder="Name"
+                on:input=move |ev| {
+                    set_name.set(event_target_value(&ev));
+                }
+                prop:value=name
+            />
+            <input type="submit" value="Submit" />
+        </form>
     }
 }
diff --git a/application/src/util/surrealdb.rs b/application/src/util/surrealdb.rs
index 9b09337..5af0fbb 100644
--- a/application/src/util/surrealdb.rs
+++ b/application/src/util/surrealdb.rs
@@ -16,6 +16,7 @@ struct SurrealRequest {
 enum SurrealParams {
     Participant,
     SigninParam(SigninParam),
+    CreatePersonParam(CreatePersonParam),
     String(String),
 }
 
@@ -25,6 +26,12 @@ struct SigninParam {
     pass: String,
 }
 
+#[derive(Serialize)]
+struct CreatePersonParam {
+    name: String,
+    group: String,
+}
+
 #[derive(Clone, Debug)]
 pub struct Participant {
     name: String,
@@ -94,6 +101,22 @@ impl SurrealContext {
 
         self.send(&json!(request).to_string());
     }
+
+    pub fn add_person(&self, name: String, group: String) {
+        let request = SurrealRequest {
+            id: 1,
+            method: String::from("create"),
+            params: vec![
+                SurrealParams::String(String::from("person")),
+                SurrealParams::CreatePersonParam(CreatePersonParam {
+                    name,
+                    group: "group:".to_owned() + &group,
+                }),
+            ],
+        };
+
+        self.send(&json!(request).to_string())
+    }
 }
 
 pub fn init_surrealdb() {