diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/updatePrefs.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/updatePrefs.svelte
index 8c33d02303..79e2bbe7c4 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/updatePrefs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/updatePrefs.svelte
@@ -12,31 +12,45 @@
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { page } from '$app/state';
 
+    type PrefRow = { id: string; key: string; value: string };
+
     $: if (prefs) {
-        if (JSON.stringify(prefs) !== JSON.stringify(Object.entries($team.prefs))) {
-            if (!!prefs[prefs.length - 1][0] && !!prefs[prefs.length - 1][1]) {
-                arePrefsDisabled = false;
-            } else {
-                arePrefsDisabled = true;
-            }
-        } else {
-            arePrefsDisabled = true;
-        }
+        const normalize = (entries: [string, string][] | PrefRow[]) =>
+            entries
+                .map(item => Array.isArray(item) ? item : [item.key, item.value])
+                .filter(([k, v]: [string, string]) => k.trim() && v.trim())
+                .sort(([a]: [string, string], [b]: [string, string]) => a.localeCompare(b));
+
+        const currentNormalized = normalize(prefs);
+        const originalNormalized = normalize(Object.entries($team.prefs as Record<string, string>));
+
+        arePrefsDisabled = JSON.stringify(currentNormalized) === JSON.stringify(originalNormalized);
     }
 
-    let prefs: [string, string][] = null;
+    let prefs: PrefRow[] = null;
     let arePrefsDisabled = true;
+    let nextId = 0;
+
+    function createPrefRow(key = '', value = ''): PrefRow {
+        return { id: `pref-${nextId++}`, key, value };
+    }
 
     onMount(async () => {
-        prefs = Object.entries($team.prefs as Record<string, string>);
-        if (!prefs?.length) {
-            prefs.push(['', '']);
-        }
+        const entries = Object.entries($team.prefs as Record<string, string>);
+        prefs = entries.length > 0
+            ? entries.map(([key, value]) => createPrefRow(key, value))
+            : [createPrefRow()];
     });
 
     async function updatePrefs() {
         try {
-            let updatedPrefs = Object.fromEntries(prefs);
+            const sanitizedPrefs = prefs.filter(
+                pref => pref.key.trim() !== '' && pref.value.trim() !== ''
+            );
+
+            const updatedPrefs = sanitizedPrefs.length === 0
+                ? {}
+                : Object.fromEntries(sanitizedPrefs.map(pref => [pref.key, pref.value]));
 
             await sdk
                 .forProject(page.params.region, page.params.project)
@@ -66,32 +80,36 @@
         they can easily be shared across members.
         <svelte:fragment slot="aside">
             {#if prefs}
-                {#each prefs as [key, value], index}
+                {#each prefs as pref, index (pref.id)}
                     <Layout.Stack direction="row" alignItems="flex-end">
                         <InputText
                             id={`key-${index}`}
-                            bind:value={key}
+                            value={pref.key}
+                            on:input={(e) => {
+                                prefs[index].key = e.target.value;
+                                prefs = [...prefs];
+                            }}
                             placeholder="Enter key"
                             label={index === 0 ? 'Key' : undefined}
                             required />
                         <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
                             <InputText
                                 id={`value-${index}`}
-                                bind:value
+                                value={pref.value}
+                                on:input={(e) => {
+                                    prefs[index].value = e.target.value;
+                                    prefs = [...prefs];
+                                }}
                                 placeholder="Enter value"
                                 label={index === 0 ? 'Value' : undefined}
                                 required />
                             <Button
                                 icon
                                 compact
-                                disabled={(!key || !value) && index === 0}
+                                disabled={(!pref.key || !pref.value) && index === 0}
                                 on:click={() => {
-                                    if (index === 0 && prefs?.length === 1) {
-                                        prefs = [['', '']];
-                                    } else {
-                                        prefs.splice(index, 1);
-                                        prefs = prefs;
-                                    }
+                                    prefs.splice(index, 1);
+                                    prefs = [...prefs];
                                 }}>
                                 <span class="icon-x" aria-hidden="true"></span>
                             </Button>
@@ -103,14 +121,13 @@
                 <Button
                     secondary
                     disabled={prefs?.length &&
-                    prefs[prefs.length - 1][0] &&
-                    prefs[prefs.length - 1][1]
+                    prefs[prefs.length - 1].key &&
+                    prefs[prefs.length - 1].value
                         ? false
                         : true}
                     on:click={() => {
-                        if (prefs[prefs.length - 1][0] && prefs[prefs.length - 1][1]) {
-                            prefs.push(['', '']);
-                            prefs = prefs;
+                        if (prefs[prefs.length - 1].key && prefs[prefs.length - 1].value) {
+                            prefs = [...prefs, createPrefRow()];
                         }
                     }}>
                     <Icon icon={IconPlus} slot="start" size="s" />
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updatePrefs.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updatePrefs.svelte
index 4cc1435c85..1cc8232ea7 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updatePrefs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updatePrefs.svelte
@@ -12,27 +12,45 @@
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { page } from '$app/state';
 
+    type PrefRow = { id: string; key: string; value: string };
+
     $: if (prefs) {
-        if (JSON.stringify(prefs) !== JSON.stringify(Object.entries($user.prefs))) {
-            arePrefsDisabled = false;
-        } else {
-            arePrefsDisabled = true;
-        }
+        const normalize = (entries: [string, string][] | PrefRow[]) =>
+            entries
+                .map(item => Array.isArray(item) ? item : [item.key, item.value])
+                .filter(([k, v]: [string, string]) => k.trim() && v.trim())
+                .sort(([a]: [string, string], [b]: [string, string]) => a.localeCompare(b));
+
+        const currentNormalized = normalize(prefs);
+        const originalNormalized = normalize(Object.entries($user.prefs));
+
+        arePrefsDisabled = JSON.stringify(currentNormalized) === JSON.stringify(originalNormalized);
     }
 
-    let prefs: [string, string][] = null;
+    let prefs: PrefRow[] = null;
     let arePrefsDisabled = true;
+    let nextId = 0;
+
+    function createPrefRow(key = '', value = ''): PrefRow {
+        return { id: `pref-${nextId++}`, key, value };
+    }
 
     onMount(async () => {
-        prefs = Object.entries($user.prefs);
-        if (!prefs?.length) {
-            prefs.push(['', '']);
-        }
+        const entries = Object.entries($user.prefs);
+        prefs = entries.length > 0
+            ? entries.map(([key, value]) => createPrefRow(key, value))
+            : [createPrefRow()];
     });
 
     async function updatePrefs() {
         try {
-            let updatedPrefs = Object.fromEntries(prefs);
+            const sanitizedPrefs = prefs.filter(
+                pref => pref.key.trim() !== '' && pref.value.trim() !== ''
+            );
+
+            const updatedPrefs = sanitizedPrefs.length === 0
+                ? {}
+                : Object.fromEntries(sanitizedPrefs.map(pref => [pref.key, pref.value]));
 
             await sdk
                 .forProject(page.params.region, page.params.project)
@@ -61,32 +79,36 @@
         Add custom user preferences to share them across devices and sessions.
         <svelte:fragment slot="aside">
             {#if prefs}
-                {#each prefs as [key, value], index}
+                {#each prefs as pref, index (pref.id)}
                     <Layout.Stack direction="row" alignItems="flex-end">
                         <InputText
                             id={`key-${index}`}
-                            bind:value={key}
+                            value={pref.key}
+                            on:input={(e) => {
+                                prefs[index].key = e.target.value;
+                                prefs = [...prefs];
+                            }}
                             placeholder="Enter key"
                             label={index === 0 ? 'Key' : undefined}
                             required />
                         <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
                             <InputText
                                 id={`value-${index}`}
-                                bind:value
+                                value={pref.value}
+                                on:input={(e) => {
+                                    prefs[index].value = e.target.value;
+                                    prefs = [...prefs];
+                                }}
                                 placeholder="Enter value"
                                 label={index === 0 ? 'Value' : undefined}
                                 required />
                             <Button
                                 icon
                                 compact
-                                disabled={(!key || !value) && index === 0}
+                                disabled={(!pref.key || !pref.value) && index === 0}
                                 on:click={() => {
-                                    if (index === 0 && prefs?.length === 1) {
-                                        prefs = [['', '']];
-                                    } else {
-                                        prefs.splice(index, 1);
-                                        prefs = prefs;
-                                    }
+                                    prefs.splice(index, 1);
+                                    prefs = [...prefs];
                                 }}>
                                 <span class="icon-x" aria-hidden="true"></span>
                             </Button>
@@ -98,14 +120,13 @@
                 <Button
                     secondary
                     disabled={prefs?.length &&
-                    prefs[prefs.length - 1][0] &&
-                    prefs[prefs.length - 1][1]
+                    prefs[prefs.length - 1].key &&
+                    prefs[prefs.length - 1].value
                         ? false
                         : true}
                     on:click={() => {
-                        if (prefs[prefs.length - 1][0] && prefs[prefs.length - 1][1]) {
-                            prefs.push(['', '']);
-                            prefs = prefs;
+                        if (prefs[prefs.length - 1].key && prefs[prefs.length - 1].value) {
+                            prefs = [...prefs, createPrefRow()];
                         }
                     }}>
                     <Icon icon={IconPlus} slot="start" size="s" />