diff --git a/resources/js/calendar/calendar_inputs_edit.js b/resources/js/calendar/calendar_inputs_edit.js
index 7d5f1275..18c1492a 100755
--- a/resources/js/calendar/calendar_inputs_edit.js
+++ b/resources/js/calendar/calendar_inputs_edit.js
@@ -777,157 +777,6 @@ export function set_up_edit_inputs() {
             });
     });
 
-    window.user_list_opened = false;
-
-    $('#collapsible_users').change(function() {
-        if (!window.user_list_opened) {
-            set_up_user_list();
-        }
-    });
-
-    $('#refresh_calendar_users').click(function() {
-
-        var button = $(this);
-        button.prop('disabled', true);
-        set_up_user_list();
-
-        setTimeout(() => {
-            button.prop('disabled', false);
-        }, 2000);
-
-    });
-
-    $('#email_input').on('keypress', function(e) {
-        $('#btn_send_invite').prop('disabled', false);
-
-        if (e.which === 13) {
-            $('#btn_send_invite').click();
-        }
-    });
-
-    $('#btn_send_invite').click(function() {
-
-        var email = $('#email_input').val();
-
-        $(this).prop('disabled', true);
-
-        let valid_email = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
-
-        $('#email_input').toggleClass('invalid', !valid_email);
-
-        if (valid_email) {
-            add_calendar_user(email, function(success, text) {
-                $('.email_text').text(text).parent().toggleClass('hidden', text.length === 0);
-                $('#email_input').toggleClass('invalid', !success);
-                $('.email_text').toggleClass('alert-danger', !success);
-                $('#btn_send_invite').prop('disabled', false);
-                if (success) {
-                    $('#email_input').val('');
-                    set_up_user_list();
-                }
-            });
-        } else {
-            $(this).prop('disabled', false);
-            $('.email_text').text(!valid_email ? "This email is invalid!" : "").toggleClass('alert-danger', !valid_email).parent().toggleClass('hidden', valid_email);
-        }
-
-        setTimeout(() => {
-            $('.email_text').text("").parent().toggleClass('hidden', true);
-        }, 5000);
-
-    });
-
-    $(document).on('click', '.update_user_permissions', function() {
-
-        var button = $(this);
-        var container = button.closest('.sortable-container');
-        var dropdown = container.find('.user_permissions_select');
-
-        button.prop('disabled', true);
-
-        var user_id = button.attr('user_id');
-        var permissions = dropdown.val();
-
-        update_calendar_user(user_id, permissions, function(success, text) {
-
-            button.prop('disabled', success);
-            button.attr('permissions_val', permissions);
-
-            container.find('.user_permissions_text').parent().toggleClass('hidden', false);
-            container.find('.user_permissions_text').parent().toggleClass('error', !success);
-            container.find('.user_permissions_text').text(text);
-
-            setTimeout(() => {
-                container.find('.user_permissions_text').parent().toggleClass('hidden', true);
-                container.find('.user_permissions_text').text("");
-            }, 5000);
-
-        });
-
-
-    });
-
-    $(document).on('click', '.remove_user', function() {
-
-        var user_name = $(this).attr('username');
-        var user_role = $(this).attr('role');
-        var user_id = $(this).attr('user_id') | 0;
-
-        if (user_role != "invited") {
-
-            swal.fire({
-                title: "Removing User",
-                html: `<p>Are you sure you want to remove <strong>${user_name}</strong> from this calendar?</p>`,
-                input: 'checkbox',
-                inputPlaceholder: 'Remove all of their contributions as well',
-                inputClass: "form-control",
-                showCancelButton: true,
-                confirmButtonColor: '#d33',
-                cancelButtonColor: '#3085d6',
-                confirmButtonText: 'Yes, remove',
-                cancelButtonText: 'Cancel',
-                icon: "warning"
-            })
-                .then((result) => {
-
-                    if (!result.dismiss) {
-
-                        var remove_all = result.value == 1;
-
-                        remove_calendar_user(user_id, remove_all, function() {
-                            set_up_user_list();
-                        });
-
-                    }
-                });
-
-        } else {
-
-            swal.fire({
-                title: "Cancel Invititation",
-                html: `<p>Are you sure you want to cancel the invitation for <strong>${user_name}</strong>?</p>`,
-                showCancelButton: true,
-                confirmButtonColor: '#d33',
-                cancelButtonColor: '#3085d6',
-                confirmButtonText: 'Yes, cancel it',
-                cancelButtonText: 'Nah, leave it',
-                icon: "warning"
-            })
-                .then((result) => {
-
-                    if (!result.dismiss) {
-
-                        remove_calendar_user(user_id, false, function() {
-                            set_up_user_list();
-                        }, user_name);
-
-                    }
-                });
-
-        }
-
-    });
-
     $(document).on('click', '.resend_invitation', function() {
 
         var button = $(this);
@@ -2076,13 +1925,7 @@ export function set_up_edit_values() {
     // }
 
     if (window.location.pathname != '/calendars/create') {
-
         populate_calendar_lists();
-
-        if ($("#collapsible_users").is(":checked")) {
-            set_up_user_list();
-        }
-
     }
 
     evaluate_remove_buttons();
diff --git a/resources/js/calendar/user_management_collapsible.js b/resources/js/calendar/user_management_collapsible.js
index 72f697ae..6e0f6a25 100644
--- a/resources/js/calendar/user_management_collapsible.js
+++ b/resources/js/calendar/user_management_collapsible.js
@@ -5,6 +5,9 @@ import Swal from "sweetalert2";
 export default () => ({
     reordering: false,
     users: [],
+    invite_email: "",
+    invite_status: "Status will go here",
+    invite_enabled: true,
 
     load: function(static_data) {
         this.loadUsers();
@@ -25,6 +28,58 @@ export default () => ({
             });
     },
 
+    inviteUser() {
+        this.invite_enabled = false;
+
+        axios.post(this.$store.calendar.api_url("/calendar/:hash/inviteUser"), {
+            email: this.invite_email
+        }).then(result => {
+            this.invite_status = `Sent email to ${this.invite_email}!`;
+            this.invite_email = "";
+        }).catch(error => {
+            console.log(error);
+
+            this.invite_status = error.response.data.errors.email[0];
+        }).finally(() => {
+            setTimeout(() => {
+                this.invite_status = "";
+                this.invite_enabled = true;
+            }, 2000);
+
+            this.loadUsers();
+        });
+    },
+
+    removeInvite(invited_email) {
+        Swal.fire({
+            title: "Removing User",
+            html: `<p>Are you sure you want to cancel your invitation to <strong>${invited_email}</strong>?</p>`,
+            showCancelButton: true,
+            confirmButtonColor: '#d33',
+            cancelButtonColor: '#3085d6',
+            confirmButtonText: 'Yes, remove',
+            cancelButtonText: 'Cancel',
+            icon: "warning"
+        }).then((result) => {
+            if (result.dismiss) {
+                return;
+            }
+
+            axios.post(this.$store.calendar.api_url("/calendar/:hash/removeUser"), {
+                email: invited_email,
+            }).then((response) => {
+                this.loadUsers();
+            }).catch(function(error) {
+                this.$dispatch('notify', {
+                    title: 'Oops!',
+                    body: 'An error occurred, please try again later.',
+                    icon: 'fa-exclamation-triangle',
+                    icon_color: 'text-red-500'
+                });
+            });
+        });
+    },
+
     removeUser(user_id) {
         let user_name = this.users.find(user => user.id == user_id).username;
 
diff --git a/resources/views/components/user-management-collapsible.blade.php b/resources/views/components/user-management-collapsible.blade.php
index 1ab2d156..6ade0d63 100644
--- a/resources/views/components/user-management-collapsible.blade.php
+++ b/resources/views/components/user-management-collapsible.blade.php
@@ -6,15 +6,15 @@
         <p><small>Once they accept your invite, you'll be able to assign them a role.</small></p>
     </div>
 
-    <div class='row no-gutters my-1 input-group' x-data="{ email: '' }">
-        <input type='text' class='form-control' id='email_input' x-model='email' placeholder='Email'>
+    <div class='row no-gutters my-1 input-group'>
+        <input type='text' class='form-control' id='email_input' x-model='invite_email' placeholder='Email'>
         <div class="input-group-append">
-            <button type='button' class='btn full btn-primary' id='btn_send_invite' :disabled="!email">Invite</button>
+            <button type='button' class='btn full btn-primary' :disabled="!invite_email && invite_enabled" @click="inviteUser">Invite</button>
         </div>
     </div>
 
-    <div class='row no-gutters mb-2 hidden'>
-        <p class='m-0 email_text alert alert-success'></p>
+    <div class='row no-gutters mb-2' x-cloak x-show="!!invite_status" x-transition>
+        <p class='m-0 alert alert-success' x-text="invite_status"></p>
     </div>
 
     <div class='sortable'>