diff --git a/src/lib/helpers/prefs.ts b/src/lib/helpers/prefs.ts
new file mode 100644
index 0000000000..5c684458fa
--- /dev/null
+++ b/src/lib/helpers/prefs.ts
@@ -0,0 +1,29 @@
+export type PrefRow = { key: string; value: string };
+
+export function normalizePrefs(entries: [string, string][] | PrefRow[]): [string, string][] {
+    return entries
+    .map((item): [string, string] =>
+        Array.isArray(item)
+            ? [item[0], item[1]]
+            : [item.key, item.value]
+    )
+    
+        .filter(([k, v]) => k.trim() && v.trim())
+        .sort(([a], [b]) => a.localeCompare(b));
+}
+
+export function createPrefRow(key = '', value = ''): PrefRow {
+    return { key, value };
+}
+
+export function isAddDisabled(prefs: PrefRow[] | null): boolean {
+    return (
+        !!prefs &&
+        prefs.length > 0 &&
+        !(prefs[prefs.length - 1].key && prefs[prefs.length - 1].value)
+    );
+}
+
+export function sanitizePrefs(prefs: PrefRow[]) {
+    return prefs.filter((p) => p.key.trim() && p.value.trim());
+}
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..18359e5ab0 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
@@ -11,32 +11,39 @@
     import { Icon, Layout } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { page } from '$app/state';
+    import deepEqual from 'deep-equal';
+    import type { PrefRow } from '$lib/helpers/prefs';
+    import { normalizePrefs, createPrefRow, isAddDisabled, sanitizePrefs } from '$lib/helpers/prefs';
+
 
     $: 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 currentNormalized = normalizePrefs(prefs);
+        const originalNormalized = normalizePrefs(
+            Object.entries($team.prefs as Record<string, string>)
+        );
+
+        arePrefsDisabled = deepEqual(currentNormalized, originalNormalized);
     }
 
-    let prefs: [string, string][] = null;
+    let prefs: PrefRow[] = null;
     let arePrefsDisabled = true;
 
     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 = sanitizePrefs(prefs);
+
+            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 +73,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 (index)}
                     <Layout.Stack direction="row" alignItems="flex-end">
                         <InputText
                             id={`key-${index}`}
-                            bind:value={key}
+                            value={pref.key}
+                            on:input={(e) => {
+                                prefs[index].key = (e.currentTarget as HTMLInputElement).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.currentTarget as HTMLInputElement).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>
@@ -102,16 +113,10 @@
             <div>
                 <Button
                     secondary
-                    disabled={prefs?.length &&
-                    prefs[prefs.length - 1][0] &&
-                    prefs[prefs.length - 1][1]
-                        ? false
-                        : true}
+                    disabled={isAddDisabled(prefs)}
                     on:click={() => {
-                        if (prefs[prefs.length - 1][0] && prefs[prefs.length - 1][1]) {
-                            prefs.push(['', '']);
-                            prefs = prefs;
-                        }
+                        if (!prefs) return;
+                        prefs = [...prefs, createPrefRow()];
                     }}>
                     <Icon icon={IconPlus} slot="start" size="s" />
                     Add preference
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..0dd15afd76 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
@@ -11,28 +11,37 @@
     import { Icon, Layout } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { page } from '$app/state';
+    import deepEqual from 'deep-equal';
+    import type { PrefRow } from '$lib/helpers/prefs';
+    import { normalizePrefs, createPrefRow, isAddDisabled, sanitizePrefs } from '$lib/helpers/prefs';
+
 
     $: if (prefs) {
-        if (JSON.stringify(prefs) !== JSON.stringify(Object.entries($user.prefs))) {
-            arePrefsDisabled = false;
-        } else {
-            arePrefsDisabled = true;
-        }
+        const currentNormalized = normalizePrefs(prefs);
+        const originalNormalized = normalizePrefs(Object.entries($user.prefs));
+
+        arePrefsDisabled = deepEqual(currentNormalized, originalNormalized);
     }
 
-    let prefs: [string, string][] = null;
+    let prefs: PrefRow[] = null;
     let arePrefsDisabled = true;
 
     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 = sanitizePrefs(prefs);
+
+            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 +70,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 (index)}
                     <Layout.Stack direction="row" alignItems="flex-end">
                         <InputText
                             id={`key-${index}`}
-                            bind:value={key}
+                            value={pref.key}
+                            on:input={(e) => {
+                                prefs[index].key = (e.currentTarget as HTMLInputElement).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.currentTarget as HTMLInputElement).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>
@@ -97,16 +110,10 @@
             <div>
                 <Button
                     secondary
-                    disabled={prefs?.length &&
-                    prefs[prefs.length - 1][0] &&
-                    prefs[prefs.length - 1][1]
-                        ? false
-                        : true}
+                    disabled={isAddDisabled(prefs)}
                     on:click={() => {
-                        if (prefs[prefs.length - 1][0] && prefs[prefs.length - 1][1]) {
-                            prefs.push(['', '']);
-                            prefs = prefs;
-                        }
+                        if (!prefs) return;
+                        prefs = [...prefs, createPrefRow()];
                     }}>
                     <Icon icon={IconPlus} slot="start" size="s" />
                     Add preference