diff --git a/web/src/components/dialog/DialogHolder.svelte b/web/src/components/dialog/DialogHolder.svelte
index a77607c3..72941b1a 100644
--- a/web/src/components/dialog/DialogHolder.svelte
+++ b/web/src/components/dialog/DialogHolder.svelte
@@ -9,22 +9,11 @@
 
 <div id="dialog-holder">
     {#each $dialogs as dialog}
-        {#if dialog.type === "small"}
-            <SmallDialog
-                id={dialog.id}
-                title={dialog.title}
-                meowbalt={dialog.meowbalt}
-                icon={dialog.icon}
-                bodyText={dialog.bodyText}
-                bodySubText={dialog.bodySubText}
-                buttons={dialog.buttons}
-            />
+        {@const { type, ...data } = dialog}
+        {#if type === "small"}
+            <SmallDialog {...data} />
         {:else if dialog.type === "picker"}
-            <PickerDialog
-                id={dialog.id}
-                items={dialog.items}
-                buttons={dialog.buttons}
-            />
+            <PickerDialog {...data} />
         {/if}
     {/each}
     <div id="dialog-backdrop" class:visible={backdropVisible}></div>
diff --git a/web/src/components/dialog/PickerDialog.svelte b/web/src/components/dialog/PickerDialog.svelte
index c1bb82a5..fe269cee 100644
--- a/web/src/components/dialog/PickerDialog.svelte
+++ b/web/src/components/dialog/PickerDialog.svelte
@@ -15,8 +15,8 @@
     import IconBoxMultiple from "@tabler/icons-svelte/IconBoxMultiple.svelte";
 
     export let id: string;
-    export let items: Optional<DialogPickerItem[]>;
-    export let buttons: Optional<DialogButton[]>;
+    export let items: Optional<DialogPickerItem[]> = undefined;
+    export let buttons: Optional<DialogButton[]> = undefined;
 
     let dialogDescription = "dialog.picker.description.";
 
@@ -50,14 +50,6 @@
             open = true;
         });
     }
-
-    // item id for alt text
-    let counter = 0;
-
-    const itemNumber = () => {
-        counter++
-        return counter
-    }
 </script>
 
 <dialog
@@ -81,8 +73,8 @@
         </div>
         <div class="picker-body">
             {#if items}
-                {#each items as item}
-                    <PickerItem {item} number={itemNumber()} />
+                {#each items as item, i}
+                    <PickerItem {item} number={i + 1} />
                 {/each}
             {/if}
         </div>
diff --git a/web/src/components/dialog/SmallDialog.svelte b/web/src/components/dialog/SmallDialog.svelte
index b2951d62..d54f2b13 100644
--- a/web/src/components/dialog/SmallDialog.svelte
+++ b/web/src/components/dialog/SmallDialog.svelte
@@ -13,12 +13,12 @@
     import IconAlertTriangle from "@tabler/icons-svelte/IconAlertTriangle.svelte";
 
     export let id: string;
-    export let meowbalt: Optional<MeowbaltEmotions>;
-    export let icon: Optional<SmallDialogIcons>;
-    export let title: string = "";
-    export let bodyText: string = "";
-    export let bodySubText: string = "";
-    export let buttons: Optional<DialogButton[]>;
+    export let meowbalt: Optional<MeowbaltEmotions> = undefined;
+    export let icon: Optional<SmallDialogIcons> = undefined;
+    export let title = "";
+    export let bodyText = "";
+    export let bodySubText = "";
+    export let buttons: Optional<DialogButton[]> = undefined;
 
     let dialogParent: HTMLDialogElement;