diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 0fb44f62bf..82300969ce 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -4,7 +4,15 @@ module.exports = {
     extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
     plugins: ['svelte3', '@typescript-eslint'],
     ignorePatterns: ['*.cjs'],
-    overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+    overrides: [
+        {
+            files: ['*.svelte'],
+            processor: 'svelte3/svelte3',
+            rules: {
+                'no-redeclare': 'off'
+            }
+        }
+    ],
     settings: {
         'svelte3/typescript': () => require('typescript')
     },
diff --git a/src/lib/actions/selectionStart.ts b/src/lib/actions/selectionStart.ts
new file mode 100644
index 0000000000..bd42999279
--- /dev/null
+++ b/src/lib/actions/selectionStart.ts
@@ -0,0 +1,28 @@
+import type { Action } from 'svelte/action';
+
+type Props = {
+    onChange: (selectionStart: number) => void;
+};
+
+export const selectionStart: Action<HTMLInputElement, Props> = (node, { onChange }) => {
+    const handler = () => {
+        onChange(node.selectionStart);
+    };
+    node.addEventListener('click', handler);
+    node.addEventListener('keydown', handler);
+    node.addEventListener('keyup', handler);
+
+    return {
+        update({ onChange }) {
+            const handler = () => {
+                onChange(node.selectionStart);
+            };
+            node.addEventListener('click', handler);
+            node.addEventListener('keydown', handler);
+            node.addEventListener('keyup', handler);
+        },
+        destroy() {
+            onChange(-1);
+        }
+    };
+};
diff --git a/src/lib/components/copy.svelte b/src/lib/components/copy.svelte
index 0e859e79c8..8271c6ebcd 100644
--- a/src/lib/components/copy.svelte
+++ b/src/lib/components/copy.svelte
@@ -7,6 +7,7 @@
 
     export let value: string;
     export let event: string = null;
+    export let appendTo: Parameters<typeof tooltip>['1']['appendTo'] = undefined;
 
     let content = 'Click to copy';
 
@@ -36,7 +37,8 @@
     on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}
     use:tooltip={{
         content,
-        hideOnClick: false
+        hideOnClick: false,
+        appendTo
     }}>
     <slot />
 </span>
diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index e80f891307..38835eaf16 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -1,187 +1,241 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import { Modal, Copy } from '$lib/components';
+    import { Modal } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { createEventDispatcher } from 'svelte';
+    import { at, empty } from '$lib/helpers/array';
+    import Copy from './copy.svelte';
+    import { selectionStart } from '$lib/actions/selectionStart';
+    import { singular } from '$lib/helpers/string';
+    import {
+        eventServices as services,
+        type EventAction,
+        type EventResource,
+        type EventService
+    } from '$lib/constants';
+    import { tooltip } from '$lib/actions/tooltip';
 
+    // Props
     export let show = false;
+    export let initialValue = '';
 
-    type Service = {
-        name: string;
-        resources: Resource[];
-        actions?: Action[];
-    };
-
-    type Resource = {
-        name: string;
-        actions?: Action[];
-        attributes?: string[];
-    };
-
-    type Action = {
-        name: string;
-        attributes?: string[];
-    };
+    // Constants
+    const serviceNames = services.map((s) => s.name);
+    const resourceNames = services.flatMap((s) => s.resources.map((r) => r.name));
+    const actionNames = [
+        ...services.flatMap((s) => s.actions.map((a) => a.name)),
+        ...services.flatMap((s) => s.resources.flatMap((r) => r.actions.map((a) => a.name)))
+    ];
+    const attributeNames = [
+        ...services.flatMap((s) => s.actions.flatMap((a) => a.attributes ?? [])),
+        ...services.flatMap((s) =>
+            s.resources.flatMap((r) => r.actions.flatMap((a) => a.attributes ?? []))
+        )
+    ];
 
-    let selectedService: Service = null;
-    let selectedResource: Resource = null;
-    let selectedAction: Action = null;
-    let selectedAttribute: string = null;
-    let helper: string = null;
-    let inputData: string = null;
-    let showInput = false;
+    // Helpers
+    const isService = (s: string) => serviceNames.includes(s);
+    const isResource = (s: string) => resourceNames.includes(s);
+    const isAction = (s: string) => actionNames.includes(s);
+    const isAttribute = (s: string) => attributeNames.includes(s);
 
     const dispatch = createEventDispatcher();
 
     function create() {
         show = false;
-        dispatch('created', copyValue);
+        dispatch('created', inputValue);
     }
 
-    const actions = [{ name: 'create' }, { name: 'update' }, { name: 'delete' }];
-
-    const services = [
-        {
-            name: 'buckets',
-            resources: [{ name: 'files', actions }],
-            actions
-        },
-        {
-            name: 'databases',
-            resources: [
-                { name: 'collections', actions },
-                { name: 'documents', actions }
-            ],
-            actions
-        },
-        {
-            name: 'functions',
-            resources: [
-                { name: 'deployments', actions },
-                { name: 'executions', actions }
-            ],
-            actions
-        },
-        {
-            name: 'teams',
-            resources: [{ name: 'memberships', actions }],
-            actions: [
-                { name: 'create' },
-                { name: 'update', attributes: ['status'] },
-                { name: 'delete' }
-            ]
-        },
-        {
-            name: 'users',
-            resources: [
-                { name: 'recovery', actions: [{ name: 'create' }, { name: 'delete' }] },
-                { name: 'sessions', actions: [{ name: 'create' }, { name: 'delete' }] },
-                { name: 'verifications', actions: [{ name: 'create' }, { name: 'delete' }] }
-            ],
-            actions: [
-                { name: 'create' },
-                { name: 'update', attributes: ['email', 'name', 'password', 'status', 'prefs'] },
-                { name: 'delete' }
-            ]
+    function select(field: 'service', value: EventService);
+    function select(field: 'resource', value: EventResource);
+    function select(field: 'action', value: EventAction);
+    function select(field: 'attribute', value: string);
+    function select(field: string, value: string | EventService | EventResource | EventAction) {
+        if (typeof value === 'string') {
+            selected[field as 'attribute'] = selected[field] === value ? null : value;
+        } else {
+            selected[field] = selected[field]?.name === value.name ? null : value;
         }
-    ];
 
-    function createEventString(
-        service: Service,
-        resource: Resource,
-        action: Action,
-        attribute: string
-    ) {
-        const data = new Map();
-        if (service) {
-            data.set('service', { value: service.name, description: 'service' });
-            data.set('serviceId', {
-                value: '*',
-                description: `ID of ${service?.name.slice(0, -1)}`
-            });
-        }
+        customInput = null;
 
-        if (resource) {
-            if (resource.name === 'documents') {
-                data.set('resource', {
-                    value: 'collections',
-                    description: 'resource'
-                });
-                data.set('resourceId', {
-                    value: '*',
-                    description: `ID of collection`
-                });
-                data.set('secondaryResource', {
-                    value: 'documents',
-                    description: 'secondary resource'
-                });
-                data.set('secondaryResourceId', {
-                    value: '*',
-                    description: `ID of document`
-                });
-            } else {
-                data.set('resource', {
-                    value: resource.name,
-                    description: `resource`
-                });
-                data.set('resourceId', {
-                    value: '*',
-                    description: `ID of ${resource?.name.slice(0, -1)}`
-                });
+        switch (field) {
+            case 'service': {
+                selected.resource = null;
+                selected.action = null;
+                selected.attribute = null;
+                break;
             }
-        }
+            case 'resource': {
+                const availableActions = selected.resource
+                    ? selected.resource?.actions
+                    : selected.service?.actions;
+
+                // We need to check if the selected action name is still
+                // on the available list, and if so, change tje action to the
+                // appropriate one, as it may contain different attributes
+                const availableAction = availableActions.find(
+                    (a) => a.name === selected.action?.name
+                );
 
-        if (action) {
-            data.set('action', { value: action.name, description: 'action' });
+                if (!availableAction) {
+                    selected.action = null;
+                    selected.attribute = null;
+                } else {
+                    selected.action = availableAction;
+
+                    if (!selected?.action?.attributes?.includes(selected.attribute)) {
+                        selected.attribute = null;
+                    }
+                }
+                break;
+            }
+            case 'action': {
+                selected.attribute = null;
+                break;
+            }
         }
+    }
 
-        if (attribute && !resource) {
-            data.set('attribute', { value: attribute, description: 'attribute' });
-        } else if (action?.attributes && !resource) {
-            data.set('attribute', { value: '*', description: `attribute` });
+    function resetSelected() {
+        Object.keys(selected).forEach((key) => (selected[key] = null));
+    }
+
+    function inferSelectedFromCustomInput() {
+        resetSelected();
+        for (const field of customInput.split('.')) {
+            if (isService(field)) {
+                selected.service = services.find((s) => s.name === field);
+            } else if (isResource(field)) {
+                const resource = selected.service?.resources.find((r) => r.name === field);
+                selected.resource = resource;
+            } else if (isAction(field)) {
+                const action =
+                    selected.resource?.actions.find((a) => a.name === field) ||
+                    selected.service?.actions.find((a) => a.name === field);
+                selected.action = action;
+            } else if (isAttribute(field)) {
+                const attribute = selected.action?.attributes?.find((a) => a === field);
+                selected.attribute = attribute;
+            }
         }
-        return data;
     }
 
-    $: eventString = createEventString(
-        selectedService,
-        selectedResource,
-        selectedAction,
-        selectedAttribute
-    );
-    $: copyValue =
-        inputData ??
-        Array.from(eventString.values())
-            .map((d) => d.value)
-            .join('.');
-
-    $: if (selectedService) {
-        selectedResource = null;
-        selectedAction = null;
-        selectedAttribute = null;
+    function toggleShowInput(e: Event) {
+        e.preventDefault();
+
+        showInput = !showInput;
+        if (showInput) return;
+
         helper = null;
+        inferSelectedFromCustomInput();
     }
 
-    $: if (!selectedAction?.attributes) {
-        selectedAttribute = null;
+    function getHelperStr(fields: string[], index: number) {
+        const currField = at(fields, index);
+        const prevField = at(fields, index - 1);
+        const secondToLastField = at(fields, index - 2);
+
+        if (index === 0 || isService(currField)) return 'service';
+        if (isAttribute(currField) || isAction(prevField)) return 'attribute';
+        if (isAction(currField)) return 'action';
+        if (isResource(currField)) return 'resource';
+        if (isService(prevField) || isResource(prevField) || index === 1) {
+            return `ID of ${singular(prevField)}`;
+        }
+        // TODO: Find better name for 'resource or action'
+        if (isService(secondToLastField) || index === 2) return 'resource or action';
+        if (isResource(secondToLastField)) return 'action';
+
+        return '';
     }
 
-    $: if (!showInput) {
-        helper = null;
+    function getCustomInputHelperStr(input: string, selectionStart?: number): string {
+        const fields = input.split('.');
+        let fieldIndex = -1;
+
+        if (selectionStart > -1) {
+            let currentIndex = 0;
+            let arrayIndex = 0;
+
+            for (const item of fields) {
+                currentIndex += item.length + 1;
+                if (currentIndex > selectionStart) {
+                    fieldIndex = arrayIndex;
+                    break;
+                }
+                arrayIndex++;
+            }
+        }
+
+        return getHelperStr(fields, fieldIndex);
+    }
+
+    // State & Reactive Declarations
+    let selected = {
+        service: null as EventService | null,
+        resource: null as EventResource | null,
+        action: null as EventAction | null,
+        attribute: null as string | null
+    };
+    let helper: string = null;
+    let customInput: string = null;
+    let customInputCursor = -1;
+    let showInput = false;
+    let copyParent: HTMLElement;
+
+    $: if (show && initialValue) {
+        customInput = initialValue;
+        inferSelectedFromCustomInput();
     }
 
+    $: available = {
+        services: services,
+        resources: selected.service?.resources || [],
+        actions: (selected.resource ? selected.resource?.actions : selected.service?.actions) || [],
+        attributes: selected.action?.attributes || []
+    };
+
+    $: eventString = (function createEventString(): Array<{ value: string; description: string }> {
+        let fields: string[] = [];
+
+        // Avoid calculating the event string if the user is typing, as it is not shown
+        if (showInput) return [];
+        if (customInput) {
+            fields = customInput.split('.');
+        } else {
+            if (selected.service) {
+                fields.push(selected.service.name, '*');
+            }
+            if (selected.resource?.name === 'documents') {
+                fields.push('collections', '*');
+            }
+            if (selected.resource) {
+                fields.push(selected.resource.name, '*');
+            }
+            if (selected.action) {
+                fields.push(selected.action.name);
+            }
+            if (selected.attribute) {
+                fields.push(selected.attribute);
+            }
+        }
+
+        return fields.map((value, i, arr) => ({ value, description: getHelperStr(arr, i) }));
+    })();
+
+    $: inputValue = eventString.map((d) => d.value).join('.');
+
     $: if (!show) {
-        selectedService = null;
-        selectedResource = null;
-        selectedAction = null;
-        selectedAttribute = null;
+        resetSelected();
         helper = null;
-        inputData = null;
+        customInput = null;
         showInput = false;
     }
 
-    //allows to add the href attribute without throwing an error
-    const attributes = { type: 'text', readonly: 'readonly' } as Record<string, string>;
+    $: if (showInput) {
+        helper = getCustomInputHelperStr(customInput, customInputCursor);
+    }
 </script>
 
 <Modal bind:show on:submit={create} size="big">
@@ -190,134 +244,126 @@
     <div>
         <p class="u-text">Choose a service</p>
         <div class="u-flex u-gap-8 u-margin-block-start-8">
-            {#each services as service}
+            {#each available.services as service}
                 <Pill
                     disabled={showInput}
-                    selected={service.name === selectedService?.name}
+                    selected={selected.service?.name === service.name}
                     button
-                    on:click={() => {
-                        selectedService = service;
-                        inputData = null;
-                    }}>{service.name}</Pill>
+                    on:click={() => select('service', service)}>
+                    {service.name}
+                </Pill>
             {/each}
         </div>
     </div>
-    {#if selectedService}
+
+    {#if !empty(available.resources)}
         <div>
             <p class="u-text">Choose a resource (optional)</p>
             <div class="u-flex u-gap-8 u-margin-block-start-8">
-                {#each selectedService.resources as resource}
+                {#each available.resources as resource}
                     <Pill
                         disabled={showInput}
-                        selected={resource.name === selectedResource?.name}
+                        selected={selected.resource?.name === resource.name}
                         button
-                        on:click={() => {
-                            selectedResource === resource
-                                ? (selectedResource = null)
-                                : (selectedResource = resource);
-                            inputData = null;
-                        }}>{resource.name}</Pill>
+                        on:click={() => select('resource', resource)}>
+                        {resource.name}
+                    </Pill>
                 {/each}
             </div>
         </div>
+    {/if}
+
+    {#if !empty(available.actions)}
         <div>
             <p class="u-text">Choose an action (optional)</p>
             <div class="u-flex u-gap-8 u-margin-block-start-8">
-                {#each selectedResource?.actions ?? selectedService?.actions as action}
+                {#each available.actions as action}
                     <Pill
                         disabled={showInput}
-                        selected={selectedAction === action}
+                        selected={selected.action?.name === action.name}
                         button
-                        on:click={() => {
-                            selectedAction === action
-                                ? (selectedAction = null)
-                                : (selectedAction = action);
-                            inputData = null;
-                        }}>{action.name}</Pill>
+                        on:click={() => select('action', action)}>
+                        {action.name}
+                    </Pill>
                 {/each}
             </div>
         </div>
-        {#if selectedAction?.attributes}
-            <div>
-                <p class="u-text">Choose an attribute (optional)</p>
-                <div class="u-flex u-gap-8 u-margin-block-start-8">
-                    {#each selectedAction.attributes as attribute}
-                        <Pill
-                            disabled={showInput}
-                            selected={selectedAttribute === attribute}
-                            button
-                            on:click={() => {
-                                selectedAttribute === attribute
-                                    ? (selectedAttribute = null)
-                                    : (selectedAttribute = attribute);
-                                inputData = null;
-                            }}>{attribute}</Pill>
-                    {/each}
-                </div>
+    {/if}
+
+    {#if !empty(available.attributes)}
+        <div>
+            <p class="u-text">Choose an attribute (optional)</p>
+            <div class="u-flex u-gap-8 u-margin-block-start-8">
+                {#each available.attributes as attribute}
+                    <Pill
+                        disabled={showInput}
+                        selected={selected.attribute === attribute}
+                        button
+                        on:click={() => select('attribute', attribute)}>
+                        {attribute}
+                    </Pill>
+                {/each}
             </div>
-        {/if}
+        </div>
     {/if}
+
     {#if showInput}
         <div class="input-text-wrapper" style="--amount-of-buttons:2">
-            <input type="text" placeholder="Enter custom event" bind:value={inputData} />
+            <input
+                type="text"
+                placeholder="Enter custom event"
+                bind:value={customInput}
+                use:selectionStart={{ onChange: (newValue) => (customInputCursor = newValue) }} />
             <div class="options-list">
-                <button
-                    on:click|preventDefault={() => {
-                        showInput = false;
-                    }}
-                    class="options-list-button"
-                    aria-label="confirm">
+                <button on:click={toggleShowInput} class="options-list-button" aria-label="confirm">
                     <span class="icon-check" aria-hidden="true" />
                 </button>
-                <button
-                    on:click|preventDefault={() => {
-                        inputData = null;
-                        showInput = false;
-                    }}
-                    class="options-list-button"
-                    aria-label="cancel">
+                <button on:click={toggleShowInput} class="options-list-button" aria-label="cancel">
                     <span class="icon-x" aria-hidden="true" />
                 </button>
             </div>
+            <p style="height: 2rem;">{helper ?? ''}</p>
         </div>
     {:else}
-        <div class="input-text-wrapper" style="--amount-of-buttons:2">
-            <div {...attributes} style="min-height: 2.5rem;">
-                {#if inputData}
-                    <span>{inputData}</span>
-                {:else}
-                    {#each Array.from(eventString.values()) as route, i}
-                        <button
-                            class:u-opacity-50={helper !== route.description}
-                            on:mouseenter={() => {
-                                helper = route.description;
-                            }}
-                            on:mouseleave={() => {
-                                helper = null;
-                            }}>
-                            {route.value}
-                        </button>
-                        <span class="u-opacity-50">
-                            {i + 1 < eventString?.size ? '.' : ''}
-                        </span>
-                    {/each}
-                {/if}
+        <div class="input-text-wrapper" style="--amount-of-buttons:2" bind:this={copyParent}>
+            <!-- 
+                This object syntax avoids TS erroring because 'type' isn't a valid HTMLDivElement attribute
+                (we need to set it to 'text' to add styling)
+             -->
+            <div {...{ type: 'text' }} style="min-height: 2.5rem;">
+                {#each eventString as route, i}
+                    <span
+                        class:u-opacity-0-5={helper !== route.description}
+                        on:mouseenter={() => (helper = route.description)}
+                        on:mouseleave={() => (helper = null)}>
+                        {route.value}
+                    </span>
+                    <span class="u-opacity-0-5">
+                        {i + 1 < eventString?.length ? '.' : ''}
+                    </span>
+                {/each}
             </div>
             <div class="options-list">
-                <button
-                    on:click|preventDefault={() => {
-                        inputData = copyValue;
-                        showInput = true;
-                    }}
-                    class="options-list-button"
-                    aria-label="edit event">
-                    <span class="icon-pencil" aria-hidden="true" />
-                </button>
-                <button disabled={!copyValue} class="options-list-button" aria-label="copy text">
-                    <Copy value={copyValue}>
-                        <span class="icon-duplicate" aria-hidden="true" />
-                    </Copy>
-                </button>
+                {#key copyParent}
+                    <button
+                        on:click={(e) => {
+                            customInput = inputValue;
+                            toggleShowInput(e);
+                        }}
+                        use:tooltip={{ content: 'Edit event', appendTo: copyParent }}
+                        class="options-list-button"
+                        aria-label="edit event">
+                        <span class="icon-pencil" aria-hidden="true" />
+                    </button>
+                    <button
+                        disabled={!inputValue}
+                        class="options-list-button"
+                        aria-label="copy text">
+                        <Copy value={inputValue} appendTo={copyParent}>
+                            <span class="icon-duplicate" aria-hidden="true" />
+                        </Copy>
+                    </button>
+                {/key}
             </div>
             <p style="height: 2rem;">{helper ?? ''}</p>
         </div>
@@ -325,6 +371,7 @@
 
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>
-        <Button disabled={showInput || !copyValue} submit>Create</Button>
+        <Button disabled={showInput || !inputValue} submit
+            >{initialValue ? 'Update' : 'Create'}</Button>
     </svelte:fragment>
 </Modal>
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 428ae63923..d8015a1f4c 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -176,3 +176,87 @@ export const scopes: {
         category: 'Other'
     }
 ];
+
+export type EventService = {
+    name: string;
+    resources: EventResource[];
+    actions?: EventAction[];
+};
+
+export type EventResource = {
+    name: string;
+    actions?: EventAction[];
+};
+
+export type EventAction = {
+    name: string;
+    attributes?: string[];
+};
+
+export const eventServices: Array<EventService> = [
+    {
+        name: 'buckets',
+        resources: [
+            {
+                name: 'files',
+                actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+            }
+        ],
+        actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+    },
+    {
+        name: 'databases',
+        resources: [
+            {
+                name: 'collections',
+                actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+            },
+            {
+                name: 'documents',
+                actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+            }
+        ],
+        actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+    },
+    {
+        name: 'functions',
+        resources: [
+            {
+                name: 'deployments',
+                actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+            },
+            {
+                name: 'executions',
+                actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+            }
+        ],
+        actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+    },
+    {
+        name: 'teams',
+        resources: [
+            {
+                name: 'memberships',
+                actions: [
+                    { name: 'create' },
+                    { name: 'update', attributes: ['status'] },
+                    { name: 'delete' }
+                ]
+            }
+        ],
+        actions: [{ name: 'create' }, { name: 'update' }, { name: 'delete' }]
+    },
+    {
+        name: 'users',
+        resources: [
+            { name: 'recovery', actions: [{ name: 'create' }, { name: 'delete' }] },
+            { name: 'sessions', actions: [{ name: 'create' }, { name: 'delete' }] },
+            { name: 'verifications', actions: [{ name: 'create' }, { name: 'delete' }] }
+        ],
+        actions: [
+            { name: 'create' },
+            { name: 'update', attributes: ['email', 'name', 'password', 'status', 'prefs'] },
+            { name: 'delete' }
+        ]
+    }
+];
diff --git a/src/lib/helpers/array.ts b/src/lib/helpers/array.ts
index 12cde8c4b8..67a50a180b 100644
--- a/src/lib/helpers/array.ts
+++ b/src/lib/helpers/array.ts
@@ -27,3 +27,49 @@ export function remove<T>(arr: T[], index: number): T[] {
     // Remove the element at the given index, return a new array
     return [...arr.slice(0, index), ...arr.slice(index + 1)];
 }
+
+/**
+ * Returns true if the array is empty, false otherwise.
+ *
+ * @export
+ * @param {unknown[]} arr
+ * @returns {boolean}
+ */
+export function empty(arr: unknown[]): boolean {
+    if (!arr) return true;
+    return arr.length === 0;
+}
+
+/**
+ * Get nth item of Array. Negative for backward
+ *
+ * @export
+ * @template T
+ * @param {(readonly T[] | [])} array
+ * @param {number} index
+ * @returns {(T | undefined)}
+ */
+export function at(array: readonly [], index: number): undefined;
+export function at<T>(array: readonly T[], index: number): T;
+export function at<T>(array: readonly T[] | [], index: number): T | undefined {
+    const len = array.length;
+    if (!len) return undefined;
+
+    if (index < 0) index += len;
+
+    return array[index];
+}
+
+/**
+ * Get last item
+ *
+ * @export
+ * @template T
+ * @param {readonly T[]} array
+ * @returns {(T | undefined)}
+ */
+export function last(array: readonly []): undefined;
+export function last<T>(array: readonly T[]): T;
+export function last<T>(array: readonly T[]): T | undefined {
+    return at(array, -1);
+}
diff --git a/src/lib/helpers/string.ts b/src/lib/helpers/string.ts
new file mode 100644
index 0000000000..564b286091
--- /dev/null
+++ b/src/lib/helpers/string.ts
@@ -0,0 +1,11 @@
+/**
+ * Given a string, returns the singular version of it,
+ * by removing the trailing 's'.
+ *
+ * @export
+ * @param {string} str
+ * @returns {string}
+ */
+export function singular(str: string): string {
+    return str.replace(/s$/, '');
+}
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
index e25e5473bb..a6959160d9 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
@@ -1,46 +1,35 @@
 <script lang="ts">
-    import {
-        CardGrid,
-        Box,
-        DropList,
-        DropListItem,
-        Empty,
-        EventModal,
-        Output,
-        Secret
-    } from '$lib/components';
-    import { Container } from '$lib/layout';
-    import { Button, InputNumber, InputText, InputCron, Form, FormList } from '$lib/elements/forms';
+    import { invalidate } from '$app/navigation';
     import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { trackEvent } from '$lib/actions/analytics';
+    import { Box, CardGrid, DropList, DropListItem, Empty, Output, Secret } from '$lib/components';
+    import Heading from '$lib/components/heading.svelte';
+    import { Roles } from '$lib/components/permissions';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, FormList, InputCron, InputNumber, InputText } from '$lib/elements/forms';
+    import { symmetricDifference } from '$lib/helpers/array';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { Container } from '$lib/layout';
     import { app } from '$lib/stores/app';
-    import { execute, func } from '../store';
-    import Delete from './delete.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
-    import { onMount } from 'svelte';
-    import { page } from '$app/stores';
     import type { Models } from '@aw-labs/appwrite-console';
+    import { onMount } from 'svelte';
     import Variable from '../../createVariable.svelte';
+    import { execute, func } from '../store';
     // import Upload from './uploadVariables.svelte';
-    import { toLocaleDateTime } from '$lib/helpers/date';
-    import { Roles } from '$lib/components/permissions';
-    import { symmetricDifference } from '$lib/helpers/array';
-    import TableList from '$lib/elements/table/tableList.svelte';
     import {
         Table,
         TableBody,
         TableCell,
         TableCellHead,
-        TableCellText,
         TableHeader,
         TableRow
     } from '$lib/elements/table';
-    import Heading from '$lib/components/heading.svelte';
-    import { writable, type Writable } from 'svelte/store';
-    import { invalidate } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
     import type { PageData } from './$types';
-    import { trackEvent } from '$lib/actions/analytics';
+    import Delete from './delete.svelte';
+    import UpdateEvents from './updateEvents.svelte';
 
     export let data: PageData;
 
@@ -56,16 +45,11 @@
     let permissions: string[] = [];
     let arePermsDisabled = true;
 
-    const eventSet: Writable<Set<string>> = writable(new Set());
-    let showEvents = false;
-    let areEventsDisabled = true;
-
     onMount(async () => {
         timeout ??= $func.timeout;
         functionName ??= $func.name;
         functionSchedule ??= $func.schedule;
         permissions = $func.execute;
-        $eventSet = new Set($func.events);
     });
 
     async function updateName() {
@@ -118,31 +102,6 @@
         }
     }
 
-    async function updateEvents() {
-        try {
-            await sdkForProject.functions.update(
-                functionId,
-                $func.name,
-                $func.execute,
-                Array.from($eventSet),
-                $func.schedule,
-                $func.timeout,
-                $func.enabled
-            );
-            invalidate(Dependencies.FUNCTION);
-            addNotification({
-                message: 'Permissions have been updated',
-                type: 'success'
-            });
-            trackEvent('submit_function_update_events');
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-        }
-    }
-
     async function updateSchedule() {
         try {
             await sdkForProject.functions.update(
@@ -278,21 +237,11 @@
         }
     }
 
-    function handleEvent(event: CustomEvent) {
-        eventSet.set($eventSet.add(event.detail));
-    }
-
     $: if (permissions) {
         if (symmetricDifference(permissions, $func.execute).length) {
             arePermsDisabled = false;
         } else arePermsDisabled = true;
     }
-
-    $: if ($eventSet) {
-        if (symmetricDifference(Array.from($eventSet), $func.events).length) {
-            areEventsDisabled = false;
-        } else areEventsDisabled = true;
-    }
 </script>
 
 <Container>
@@ -372,49 +321,7 @@
         </CardGrid>
     </Form>
 
-    <Form on:submit={updateEvents}>
-        <CardGrid>
-            <Heading tag="h6" size="7">Update Events</Heading>
-            <p>Set the events that will trigger your function. Maximum 100 events allowed.</p>
-            <svelte:fragment slot="aside">
-                {#if $eventSet.size}
-                    <div class="u-flex u-flex-vertical u-gap-16">
-                        <TableList>
-                            {#each Array.from($eventSet) as event}
-                                <li class="table-row">
-                                    <TableCellText title="id">
-                                        {event}
-                                    </TableCellText>
-                                    <TableCell showOverflow title="options" width={40}>
-                                        <button
-                                            class="button is-text is-only-icon"
-                                            aria-label="delete id"
-                                            on:click|preventDefault={() => {
-                                                $eventSet.delete(event);
-                                                eventSet.set($eventSet);
-                                            }}>
-                                            <span class="icon-x" aria-hidden="true" />
-                                        </button>
-                                    </TableCell>
-                                </li>
-                            {/each}
-                        </TableList>
-
-                        <Button text noMargin on:click={() => (showEvents = true)}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="u-text">Add event</span>
-                        </Button>
-                    </div>
-                {:else}
-                    <Empty on:click={() => (showEvents = true)}>Add an event to get started</Empty>
-                {/if}
-            </svelte:fragment>
-
-            <svelte:fragment slot="actions">
-                <Button disabled={areEventsDisabled} submit>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
-    </Form>
+    <UpdateEvents />
 
     <Form on:submit={updateSchedule}>
         <CardGrid>
@@ -587,5 +494,3 @@
         on:created={handleVariableCreated}
         on:updated={handleVariableUpdated} />
 {/if}
-<!-- <Upload bind:show={showVariablesUpload} on:uploaded={handleVariableCreated} /> -->
-<EventModal bind:show={showEvents} on:created={handleEvent} />
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/updateEvents.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/updateEvents.svelte
new file mode 100644
index 0000000000..901b53c731
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/updateEvents.svelte
@@ -0,0 +1,144 @@
+<script lang="ts">
+    import CardGrid from '$lib/components/cardGrid.svelte';
+    import Empty from '$lib/components/empty.svelte';
+    import Heading from '$lib/components/heading.svelte';
+
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { trackEvent } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import Form from '$lib/elements/forms/form.svelte';
+    import { TableCell, TableCellText } from '$lib/elements/table';
+    import TableList from '$lib/elements/table/tableList.svelte';
+    import { symmetricDifference } from '$lib/helpers/array';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { writable, type Writable } from 'svelte/store';
+    import { func } from '../store';
+    import { EventModal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import DropList from '$lib/components/dropList.svelte';
+    import DropListItem from '$lib/components/dropListItem.svelte';
+
+    const functionId = $page.params.function;
+    const eventSet: Writable<Set<string>> = writable(new Set($func.events));
+    let showEvents = false;
+    let eventValue: string;
+    let isDisabled = true;
+    let showDropdown: boolean[] = [];
+
+    async function updateEvents() {
+        try {
+            await sdkForProject.functions.update(
+                functionId,
+                $func.name,
+                $func.execute,
+                Array.from($eventSet),
+                $func.schedule,
+                $func.timeout,
+                $func.enabled
+            );
+            invalidate(Dependencies.FUNCTION);
+            addNotification({
+                message: 'Permissions have been updated',
+                type: 'success'
+            });
+            trackEvent('submit_function_update_events');
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+
+    function handleEvent(event: CustomEvent) {
+        if (eventValue) {
+            const newSet = new Set(
+                [...$eventSet].map((e) => (e === eventValue ? event.detail : e))
+            );
+            eventSet.set(newSet);
+        } else {
+            eventSet.set($eventSet.add(event.detail));
+        }
+        eventValue = null;
+    }
+
+    $: if ($eventSet) {
+        if (symmetricDifference(Array.from($eventSet), $func.events).length) {
+            isDisabled = false;
+        } else isDisabled = true;
+    }
+
+    $: if (!showEvents) {
+        eventValue = undefined;
+    }
+</script>
+
+<Form on:submit={updateEvents}>
+    <CardGrid>
+        <Heading tag="h6" size="7">Update Events</Heading>
+        <p>Set the events that will trigger your function. Maximum 100 events allowed.</p>
+        <svelte:fragment slot="aside">
+            {#if $eventSet.size}
+                <TableList>
+                    {#each Array.from($eventSet) as event, i}
+                        <li class="table-row">
+                            <TableCellText title="id">
+                                {event}
+                            </TableCellText>
+                            <TableCell showOverflow title="options" width={40}>
+                                <DropList
+                                    bind:show={showDropdown[i]}
+                                    placement="bottom-start"
+                                    noArrow>
+                                    <button
+                                        class="button is-text is-only-icon"
+                                        aria-label="more options"
+                                        on:click|preventDefault={() =>
+                                            (showDropdown[i] = !showDropdown[i])}>
+                                        <span class="icon-dots-horizontal" aria-hidden="true" />
+                                    </button>
+                                    <svelte:fragment slot="list">
+                                        <DropListItem
+                                            icon="pencil"
+                                            on:click={() => {
+                                                showDropdown[i] = false;
+                                                showEvents = true;
+                                                eventValue = event;
+                                            }}>
+                                            Edit
+                                        </DropListItem>
+                                        <DropListItem
+                                            icon="trash"
+                                            on:click={async () => {
+                                                $eventSet.delete(event);
+                                                eventSet.set($eventSet);
+                                            }}>
+                                            Delete
+                                        </DropListItem>
+                                    </svelte:fragment>
+                                </DropList>
+                            </TableCell>
+                        </li>
+                    {/each}
+                </TableList>
+
+                <div class="u-flex u-margin-block-start-16">
+                    <Button text noMargin on:click={() => (showEvents = true)}>
+                        <span class="icon-plus" aria-hidden="true" />
+                        <span class="u-text">Add event</span>
+                    </Button>
+                </div>
+            {:else}
+                <Empty on:click={() => (showEvents = true)}>Add an event to get started</Empty>
+            {/if}
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={isDisabled} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
+
+<EventModal bind:show={showEvents} initialValue={eventValue} on:created={handleEvent} />
diff --git a/tsconfig.json b/tsconfig.json
index d164d251ec..5987c9cb1d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
 {
     "extends": "./.svelte-kit/tsconfig.json",
     "compilerOptions": {
-        "lib": ["webworker"],
+        "lib": ["webworker", "ES2016", "DOM"],
         "module": "ESNext",
         "moduleResolution": "Node",
         "importsNotUsedAsValues": "error",