diff --git a/application/src/components/participant.rs b/application/src/components/participant.rs
index 2b0668b..b994bff 100644
--- a/application/src/components/participant.rs
+++ b/application/src/components/participant.rs
@@ -1,25 +1,61 @@
 use crate::util::surrealdb::{client::Time, schemas};
 use leptos::*;
 
+cfg_if::cfg_if! {
+    if #[cfg(feature = "ssr")] {
+        use crate::util::surrealdb::{DB, schemas::Participant};
+        use crate::util::websocket::{server, ParticipantsAction};
+        use leptos::logging;
+    }
+}
+
+#[server(ModifyParticipant)]
+async fn modify_participant(
+    mut participant: schemas::ParticipantUpdate,
+    id: String,
+) -> Result<(), ServerFnError> {
+    let websocket_state = &server::WEBSOCKET_STATE;
+
+    println!("Participant: {:?}", participant);
+
+    let updated: Option<schemas::ParticipantRecord> = DB
+        .update(("participant", &id))
+        .content(&participant)
+        .await?;
+
+    match updated {
+        Some(participant_updated) => {
+            logging::log!(
+                "Updated participant: {} ({})",
+                participant_updated.name,
+                participant_updated.group
+            );
+            let action = ParticipantsAction::Replace {
+                participant: Participant {
+                    name: participant_updated.name.clone(),
+                    group: participant_updated.group.clone(),
+                    id,
+                    events: participant_updated.events.clone(),
+                },
+            };
+
+            match websocket_state.apply(action) {
+                Ok(_) => Ok(()),
+                Err(_) => Err(ServerFnError::new("Error sending websocket action")),
+            }
+        }
+        None => Err(ServerFnError::ServerError(String::from(
+            "Could not update participant",
+        ))),
+    }
+}
+
 /// Renders the home page of your application.
 #[component]
 pub fn Modal() -> impl IntoView {
     let participant_id = use_context::<RwSignal<Option<String>>>().unwrap();
     let participants = use_context::<schemas::ParticipantsContext>().unwrap();
 
-    let participant = move || {
-        let x = participants
-            .get()
-            .into_iter()
-            .filter(|item| item.id == participant_id.get().unwrap_or("".to_string()))
-            .collect::<Vec<schemas::ParticipantSignal>>();
-
-        match x.get(0) {
-            Some(participant) => Some(participant.value),
-            None => None,
-        }
-    };
-
     let time_lifesaver = create_rw_signal(Time {
         minutes: 0,
         seconds: 0,
@@ -38,51 +74,120 @@ pub fn Modal() -> impl IntoView {
         milliseconds: 0,
     });
 
+    let name = create_rw_signal(String::from(""));
+    let group = create_rw_signal(String::from(""));
+
+    let participant = move || {
+        let x = participants
+            .get()
+            .into_iter()
+            .filter(|item| item.id == participant_id.get().unwrap_or("".to_string()))
+            .collect::<Vec<schemas::ParticipantSignal>>();
+
+        match x.get(0) {
+            Some(participant) => {
+                let participant_clone = participant.value.get_untracked();
+
+                name.set(participant_clone.name);
+                group.set(participant_clone.group);
+
+                time_lifesaver.set(Time::from_milliseconds(match participant_clone.events {
+                    Some(ref events) => events.lifesaver.unwrap_or(0),
+                    None => 0,
+                }));
+
+                time_hindernis.set(Time::from_milliseconds(match participant_clone.events {
+                    Some(ref events) => events.hindernis.unwrap_or(0),
+                    None => 0,
+                }));
+
+                time_popduiken.set(Time::from_milliseconds(match participant_clone.events {
+                    Some(ref events) => events.popduiken.unwrap_or(0),
+                    None => 0,
+                }));
+
+                Some(participant.value)
+            }
+            None => None,
+        }
+    };
+
+    let modify_participant_action =
+        create_action(|input: &(schemas::ParticipantUpdate, String)| {
+            let input = input.to_owned();
+            async move { modify_participant(input.0, input.1).await }
+        });
+
+    let form_submit = move |ev: ev::SubmitEvent| {
+        ev.prevent_default();
+
+        let p = schemas::ParticipantUpdate {
+            name: name.get(),
+            group: group.get(),
+            events: Some(schemas::Events {
+                lifesaver: Some(time_lifesaver.get().as_milliseconds()),
+                hindernis: Some(time_hindernis.get().as_milliseconds()),
+                popduiken: Some(time_popduiken.get().as_milliseconds()),
+            }),
+        };
+
+        modify_participant_action.dispatch((p, participant().unwrap().get().id));
+
+        participant_id.set(None);
+    };
+
     view! {
         { move || match participant() {
-            Some(p) => view! {
+            Some(_p) => view! {
                 <div class="modal-background">
                     <div class="modal">
-                        <form>
+                        <form on:submit=form_submit>
                             <h2>"Deelnemer bewerken"</h2>
                             <label>Naam</label>
-                            <input type="text" name="name" autocomplete="off" />
+                            <input
+                                type="text"
+                                autocomplete="off"
+                                on:input=move |ev| {
+                                    name.set(event_target_value(&ev))
+                                }
+                                prop:value=name
+                            />
                             <label>Groep</label>
                             <select name="group" autocomplete="off">
-                                <option value="A1">A1</option>
-                                <option value="A2">A2</option>
-                                <option value="A3">A3</option>
-                                <option value="A4">A4</option>
-                                <option value="A5">A5</option>
-                                <option value="A6">A6</option>
+                                <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" />
 
-                                <option value="B1">B1</option>
-                                <option value="B2">B2</option>
-                                <option value="B3">B3</option>
-                                <option value="B4">B4</option>
-                                <option value="B5">B5</option>
-                                <option value="B6">B6</option>
+                                <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" />
 
-                                <option value="C1">C1</option>
-                                <option value="C2">C2</option>
-                                <option value="C3">C3</option>
-                                <option value="C4">C4</option>
-                                <option value="C5">C5</option>
-                                <option value="C6">C6</option>
+                                <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" />
 
-                                <option value="D1">D1</option>
-                                <option value="D2">D2</option>
-                                <option value="D3">D3</option>
-                                <option value="D4">D4</option>
-                                <option value="D5">D5</option>
-                                <option value="D6">D6</option>
+                                <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" />
 
-                                <option value="Z1">Z1</option>
-                                <option value="Z2">Z2</option>
-                                <option value="Z3">Z3</option>
-                                <option value="Z4">Z4</option>
-                                <option value="Z5">Z5</option>
-                                <option value="Z6">Z6</option>
+                                <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>
                             <label>Tijd Lifesaver</label>
                             <div class="time">
@@ -220,3 +325,15 @@ pub fn Modal() -> impl IntoView {
         }}
     }
 }
+
+#[component]
+pub fn SelectOption(is: &'static str, value: RwSignal<String>) -> impl IntoView {
+    view! {
+        <option
+            value=is
+            selected=move || value.get() == is
+        >
+            {is}
+        </option>
+    }
+}
diff --git a/application/src/util/surrealdb/client.rs b/application/src/util/surrealdb/client.rs
index ece0cb3..78aa5ea 100644
--- a/application/src/util/surrealdb/client.rs
+++ b/application/src/util/surrealdb/client.rs
@@ -23,6 +23,20 @@ impl Time {
 
         format!("{minutes}:{seconds}:{milliseconds}")
     }
+
+    pub fn from_milliseconds(mut time: u32) -> Self {
+        let milliseconds = (time % 1000) / 10;
+        time /= 1000;
+        let seconds = time % 60;
+        time /= 60;
+        let minutes = time;
+
+        Self {
+            milliseconds,
+            seconds,
+            minutes,
+        }
+    }
 }
 
 pub fn sort_participants(
diff --git a/application/src/util/surrealdb/schemas.rs b/application/src/util/surrealdb/schemas.rs
index cbd9dd5..ffc369e 100644
--- a/application/src/util/surrealdb/schemas.rs
+++ b/application/src/util/surrealdb/schemas.rs
@@ -31,6 +31,23 @@ pub struct Participant {
     pub events: Option<Events>,
 }
 
+impl Participant {
+    pub fn as_update(&self) -> ParticipantUpdate {
+        ParticipantUpdate {
+            name: self.name.clone(),
+            group: self.group.clone(),
+            events: self.events.clone(),
+        }
+    }
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone, PartialEq)]
+pub struct ParticipantUpdate {
+    pub name: String,
+    pub group: String,
+    pub events: Option<Events>,
+}
+
 #[derive(Serialize, Deserialize, Debug, Clone, PartialEq)]
 pub struct ParticipantSignal {
     pub id: String,
diff --git a/application/style/modal.scss b/application/style/modal.scss
index 770b1e9..500cb6a 100644
--- a/application/style/modal.scss
+++ b/application/style/modal.scss
@@ -16,7 +16,6 @@
 .modal {
   width: 100%;
   max-width: 500px;
-  height: 100%;
   max-height: 800px;
   overflow-y: auto;
   background-color: $secondary-bg-color;