diff --git a/packages/js/src/ui/api/hooks/usePreferences.ts b/packages/js/src/ui/api/hooks/usePreferences.ts
index 4231216f2d6..b02edf9f0bb 100644
--- a/packages/js/src/ui/api/hooks/usePreferences.ts
+++ b/packages/js/src/ui/api/hooks/usePreferences.ts
@@ -1,5 +1,4 @@
 import { createEffect, createResource, createSignal, onCleanup, onMount } from 'solid-js';
-import { reconcile } from 'solid-js/store';
 import { Preference } from '../../../preferences/preference';
 import { FetchPreferencesArgs } from '../../../preferences/types';
 import { useNovu } from '../../context';
@@ -25,7 +24,7 @@ export const usePreferences = (options?: FetchPreferencesArgs) => {
         return;
       }
 
-      mutate(reconcile(data));
+      mutate(data);
     };
 
     novu.on('preferences.list.updated', listener);
diff --git a/packages/js/src/ui/components/elements/Preferences/Preferences.tsx b/packages/js/src/ui/components/elements/Preferences/Preferences.tsx
index e54f8c66928..dfdb15cf3ff 100644
--- a/packages/js/src/ui/components/elements/Preferences/Preferences.tsx
+++ b/packages/js/src/ui/components/elements/Preferences/Preferences.tsx
@@ -19,8 +19,9 @@ export const Preferences = () => {
   const allPreferences = createMemo(() => {
     const globalPreference = preferences()?.find((preference) => preference.level === PreferenceLevel.GLOBAL);
     const workflowPreferences = preferences()?.filter((preference) => preference.level === PreferenceLevel.TEMPLATE);
+    const workflowPreferencesIds = workflowPreferences?.map((preference) => preference.workflow?.id);
 
-    return { globalPreference, workflowPreferences };
+    return { globalPreference, workflowPreferences, workflowPreferencesIds };
   });
 
   createEffect(() => {
@@ -61,16 +62,24 @@ export const Preferences = () => {
           channels={allPreferences().globalPreference?.channels || {}}
           onChange={optimisticUpdate(allPreferences().globalPreference)}
         />
-        <For each={allPreferences().workflowPreferences}>
-          {(preference) => (
-            <PreferencesRow
-              localizationKey={preference.workflow!.identifier as StringLocalizationKey}
-              channels={preference.channels}
-              workflowId={preference.workflow?.id}
-              onChange={optimisticUpdate(preference)}
-              isCritical={preference.workflow?.critical}
-            />
-          )}
+        <For each={allPreferences().workflowPreferencesIds}>
+          {(_, index) => {
+            const preference = () => allPreferences().workflowPreferences?.[index()] as Preference;
+
+            if (!preference()) {
+              return null;
+            }
+
+            return (
+              <PreferencesRow
+                localizationKey={preference().workflow!.identifier as StringLocalizationKey}
+                channels={preference().channels}
+                workflowId={preference().workflow?.id}
+                onChange={optimisticUpdate(preference())}
+                isCritical={preference().workflow?.critical}
+              />
+            );
+          }}
         </For>
       </Show>
     </div>
diff --git a/packages/js/src/ui/components/elements/Preferences/Switch.tsx b/packages/js/src/ui/components/elements/Preferences/Switch.tsx
index 39cd6c66607..a5545982032 100644
--- a/packages/js/src/ui/components/elements/Preferences/Switch.tsx
+++ b/packages/js/src/ui/components/elements/Preferences/Switch.tsx
@@ -42,6 +42,7 @@ export const Switch = (props: SwitchProps) => {
           data-[disabled=true]:nt-opacity-40`
         )}
         data-disabled={props.disabled}
+        data-checked={props.checked}
       />
     </label>
   );