diff --git a/web/src/lib/modals/PinCodeResetModal.svelte b/web/src/lib/modals/PinCodeResetModal.svelte
index 024f0c8528db8..a51e0c35837a5 100644
--- a/web/src/lib/modals/PinCodeResetModal.svelte
+++ b/web/src/lib/modals/PinCodeResetModal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { handleResetPinCode } from '$lib/services/user.service';
-  import { Field, FormModal, HelperText, Modal, ModalBody, PasswordInput, Stack, type ModalSize } from '@immich/ui';
+  import { BasicModal, Field, FormModal, HelperText, PasswordInput, Stack, type ModalSize } from '@immich/ui';
   import { mdiLockReset } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -23,7 +23,7 @@
   const common = $derived({ title: $t('reset'), size: 'small' as ModalSize, icon: mdiLockReset, onClose });
 </script>
 
-{#if featureFlagsManager.value.passwordLogin === false}
+{#if featureFlagsManager.value.passwordLogin}
   <FormModal {...common} submitColor="danger" submitText={$t('reset')} disabled={!password} {onSubmit}>
     <Stack gap={4}>
       <div>{$t('reset_pin_code_description')}</div>
@@ -37,9 +37,7 @@
     </Stack>
   </FormModal>
 {:else}
-  <Modal {...common} closeOnBackdropClick>
-    <ModalBody>
-      <div>{$t('reset_pin_code_description')}</div>
-    </ModalBody>
-  </Modal>
+  <BasicModal {...common}>
+    <div>{$t('reset_pin_code_description')}</div>
+  </BasicModal>
 {/if}