diff --git a/src/components/modals/TwoFactorDisableModal.tsx b/src/components/modals/TwoFactorDisableModal.tsx
new file mode 100644
index 000000000..859d2df75
--- /dev/null
+++ b/src/components/modals/TwoFactorDisableModal.tsx
@@ -0,0 +1,64 @@
+'use client';
+import { Button, Column, Dialog, Modal, Row, Text } from '@umami/react-zen';
+import { Form, FormButtons, FormField, FormSubmitButton, PasswordField } from '@umami/react-zen';
+import { useState } from 'react';
+import { OtpInput } from '@/components/common/OtpInput';
+import { useMessages, useUpdateQuery } from '@/components/hooks';
+
+interface TwoFactorDisableModalProps {
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export function TwoFactorDisableModal({ onClose, onSuccess }: TwoFactorDisableModalProps) {
+  const { t, labels, messages, getErrorMessage } = useMessages();
+  const [otpValue, setOtpValue] = useState('');
+  const { mutateAsync: disable, error, isPending, reset } = useUpdateQuery('/2fa/disable');
+
+  const handleSubmit = async (data: any) => {
+    await disable({ password: data.password, token: otpValue }, { onSuccess }).catch(() => {});
+  };
+
+  const resetError = () => {
+    if (error) reset();
+  };
+
+  return (
+    <Modal isOpen={true} onOpenChange={onClose}>
+      <Dialog title={t(labels.twoFactorDisableTitle)} style={{ width: 420 }}>
+        {({ close }) => (
+          <Column gap="4">
+            <Text>{t(messages.twoFactorDisableDescription)}</Text>
+            <Form onSubmit={handleSubmit} error={getErrorMessage(error)}>
+              <FormField label={t(labels.password)} name="password">
+                <PasswordField autoComplete="current-password" onChange={resetError} />
+              </FormField>
+              <Column gap="1">
+                <Text size="sm">{t(labels.twoFactorEnterCode)}</Text>
+                <OtpInput
+                  value={otpValue}
+                  onChange={val => {
+                    setOtpValue(val);
+                    resetError();
+                  }}
+                  disabled={isPending}
+                />
+              </Column>
+              <FormButtons>
+                <Button variant="outline" onPress={close} isDisabled={isPending}>
+                  {t(labels.cancel)}
+                </Button>
+                <FormSubmitButton
+                  variant="danger"
+                  isDisabled={isPending || otpValue.length !== 6 || !!error}
+                >
+                  {t(labels.twoFactorDisable)}
+                </FormSubmitButton>
+              </FormButtons>
+            </Form>
+          </Column>
+        )}
+      </Dialog>
+    </Modal>
+  );
+}
diff --git a/src/components/modals/TwoFactorSetupModal.module.css b/src/components/modals/TwoFactorSetupModal.module.css
new file mode 100644
index 000000000..aa2d0071b
--- /dev/null
+++ b/src/components/modals/TwoFactorSetupModal.module.css
@@ -0,0 +1,9 @@
+.twoFactorSetupModal {
+  width: 700px;
+  max-width: 95vw;
+}
+
+.qrCodeImage {
+  width: 33%;
+  aspect-ratio: 1;
+}
diff --git a/src/components/modals/TwoFactorSetupModal.tsx b/src/components/modals/TwoFactorSetupModal.tsx
new file mode 100644
index 000000000..85e9b9512
--- /dev/null
+++ b/src/components/modals/TwoFactorSetupModal.tsx
@@ -0,0 +1,211 @@
+'use client';
+import {
+  AlertBanner,
+  Box,
+  Button,
+  Code,
+  Column,
+  Dialog,
+  Icon,
+  Image,
+  Modal,
+  Row,
+  Tag,
+  TagGroup,
+  Text,
+} from '@umami/react-zen';
+import { useQueryClient } from '@tanstack/react-query';
+import { ReactNode, useEffect, useState } from 'react';
+import { OtpInput } from '@/components/common/OtpInput';
+import { useMessages, useUpdateQuery } from '@/components/hooks';
+import { TwoFactorSuccessModal } from './TwoFactorSuccessModal';
+import styles from './TwoFactorSetupModal.module.css';
+import { LucideCopy } from 'lucide-react';
+
+function Step({
+  tag,
+  title,
+  details,
+  children,
+}: {
+  tag: string;
+  title: string;
+  details: string;
+  children: ReactNode;
+}) {
+  return (
+    <Column gap="5">
+      <Column gap="3">
+        <Row gap="3" alignItems="center">
+          <TagGroup>
+            <Tag variant="primary">{tag}</Tag>
+          </TagGroup>
+          <Text weight="bold">{title}</Text>
+        </Row>
+        <Text>{details}</Text>
+      </Column>
+      {children}
+    </Column>
+  );
+}
+
+interface TwoFactorSetupModalProps {
+  required: boolean;
+  onClose?: () => void;
+}
+
+export function TwoFactorSetupModal({ required, onClose }: TwoFactorSetupModalProps) {
+  const { t, labels, messages } = useMessages();
+  const [qrCodeDataUrl, setQrCodeDataUrl] = useState<string | null>(null);
+  const [manualKey, setManualKey] = useState<string | null>(null);
+  const [otpValue, setOtpValue] = useState('');
+  const [copied, setCopied] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [backupCodes, setBackupCodes] = useState<string[] | null>(null);
+
+  const queryClient = useQueryClient();
+  const { mutateAsync: initiate } = useUpdateQuery('/2fa/setup/initiate');
+  const { mutateAsync: confirm, isPending: isConfirming } = useUpdateQuery('/2fa/setup/confirm');
+  const { mutateAsync: cancel } = useUpdateQuery('/2fa/setup/cancel');
+
+  useEffect(() => {
+    initiate({})
+      .then((data: any) => {
+        setQrCodeDataUrl(data.qrCodeDataUrl);
+        setManualKey(data.manualKey);
+      })
+      .catch(() => setError(t(messages.error)));
+  }, []);
+
+  useEffect(() => {
+    console.log({ lengthTracked: otpValue.length });
+  }, [otpValue.length]);
+
+  const handleConfirm = async (value?: string) => {
+    const token = value ?? otpValue;
+    if (token.length !== 6) return;
+    setError(null);
+    try {
+      const data: any = await confirm({ token });
+      setBackupCodes(data.backupCodes);
+    } catch (err: any) {
+      setError(err.message || t(messages.error));
+    }
+  };
+
+  const handleCancel = async () => {
+    await cancel({}).catch(() => {});
+    onClose?.();
+  };
+
+  const handleCopy = () => {
+    if (manualKey) {
+      navigator.clipboard.writeText(manualKey);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  if (backupCodes) {
+    return (
+      <TwoFactorSuccessModal
+        backupCodes={backupCodes}
+        onClose={() => {
+          queryClient.invalidateQueries({ queryKey: ['2fa-status'] });
+          onClose?.();
+        }}
+      />
+    );
+  }
+
+  const preventDismiss = required ? () => {} : undefined;
+
+  return (
+    <Modal isOpen={true} onOpenChange={preventDismiss}>
+      <Dialog title={t(labels.twoFactorSetupTitle)} className={styles.twoFactorSetupModal}>
+        {({ close }) => (
+          <Column gap="9">
+            <Text>
+              {required && t(messages.twoFactorSetupRequiredDescription) + ' '}
+              {t(messages.twoFactorSetupDescription)}
+            </Text>
+
+            {/* Step 1 - Scan QR Code */}
+            <Step
+              tag={t(labels.twoFactorStep1)}
+              title={t(labels.twoFactorScanQr)}
+              details={t(messages.twoFactorStep1Description)}
+            >
+              <Box padding="2" shadow="lg" borderRadius="lg" border width="fit">
+                <Row alignItems="center" gap="2">
+                  {qrCodeDataUrl && (
+                    <Image
+                      src={qrCodeDataUrl}
+                      alt="QR code"
+                      className={styles.qrCodeImage}
+                      borderRadius="lg"
+                    />
+                  )}
+                  <Column>
+                    <Text weight="bold">{t(labels.twoFactorCantScan)}</Text>
+                    <Column gap="2">
+                      <Text size="sm">{t(labels.twoFactorManualEntry)}</Text>
+                      <Code>{manualKey}</Code>
+                      <div>
+                        <Button variant="outline" onPress={handleCopy}>
+                          <Icon size="sm">
+                            <LucideCopy />
+                          </Icon>
+                          {copied ? t(labels.twoFactorCodeCopied) : t(labels.twoFactorCopyCode)}
+                        </Button>
+                      </div>
+                    </Column>
+                  </Column>
+                </Row>
+              </Box>
+            </Step>
+
+            {/* Step 2 - Enter Verification Code */}
+            <Step
+              tag={t(labels.twoFactorStep2)}
+              title={t(labels.twoFactorGetCode)}
+              details={t(messages.twoFactorStep2Description)}
+            >
+              <Column gap="3.5">
+                <Text size="sm" weight="bold">
+                  {t(labels.twoFactorEnterCode)}
+                </Text>
+                <OtpInput
+                  value={otpValue}
+                  onChange={val => {
+                    setOtpValue(val);
+                    if (error) setError(null);
+                  }}
+                  onComplete={handleConfirm}
+                  disabled={isConfirming}
+                />
+              </Column>
+            </Step>
+
+            {error && <AlertBanner variant="error" title={t(messages.error)} description={error} />}
+
+            <Row gap="2" justifyContent="flex-end">
+              {!required && (
+                <Button variant="outline" onPress={handleCancel} isDisabled={isConfirming}>
+                  {t(labels.cancel)}
+                </Button>
+              )}
+              <Button
+                variant="primary"
+                onPress={() => handleConfirm()}
+                isDisabled={otpValue.length !== 6 || isConfirming || !!error}
+              >
+                {t(labels.confirm)}
+              </Button>
+            </Row>
+          </Column>
+        )}
+      </Dialog>
+    </Modal>
+  );
+}
diff --git a/src/components/modals/TwoFactorSuccessModal.tsx b/src/components/modals/TwoFactorSuccessModal.tsx
new file mode 100644
index 000000000..51f2dcba4
--- /dev/null
+++ b/src/components/modals/TwoFactorSuccessModal.tsx
@@ -0,0 +1,88 @@
+'use client';
+import { Button, Column, Dialog, Modal, Row, Text } from '@umami/react-zen';
+import { useState } from 'react';
+import { useMessages } from '@/components/hooks';
+
+interface TwoFactorSuccessModalProps {
+  backupCodes: string[];
+  onClose: () => void;
+}
+
+export function TwoFactorSuccessModal({ backupCodes, onClose }: TwoFactorSuccessModalProps) {
+  const { t, labels, messages } = useMessages();
+  const [saved, setSaved] = useState(false);
+
+  const handleDownload = () => {
+    const content = [
+      'Umami - Two-factor authentication backup codes',
+      'Keep these codes safe. Each code can only be used once.',
+      '',
+      ...backupCodes,
+    ].join('\n');
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'umami-backup-codes.txt';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <Modal isOpen={true} onOpenChange={() => {}}>
+      <Dialog title={t(labels.twoFactorSuccessTitle)} style={{ width: 480, maxWidth: '95vw' }}>
+        {() => (
+          <Column gap="5">
+            <Text>{t(messages.twoFactorEnabledDescription)}</Text>
+
+            <Column gap="2">
+              <Text weight="bold">{t(labels.twoFactorSaveBackupCodes)}</Text>
+              <Text>{t(messages.twoFactorBackupDescription)}</Text>
+
+              <div
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '1fr 1fr',
+                  gap: '8px',
+                  padding: '12px',
+                  background: 'var(--surface-sunken)',
+                  borderRadius: 8,
+                }}
+              >
+                {backupCodes.map((code, i) => (
+                  <code key={i} style={{ fontFamily: 'monospace', fontSize: '0.9rem' }}>
+                    {code}
+                  </code>
+                ))}
+              </div>
+
+              <Row>
+                <Button variant="outline" onPress={handleDownload}>
+                  {t(labels.twoFactorDownloadCodes)}
+                </Button>
+              </Row>
+            </Column>
+
+            <Row gap="2" alignItems="center">
+              <input
+                type="checkbox"
+                id="saved-codes"
+                checked={saved}
+                onChange={e => setSaved(e.target.checked)}
+              />
+              <label htmlFor="saved-codes">
+                <Text>{t(labels.twoFactorSavedCodes)}</Text>
+              </label>
+            </Row>
+
+            <Row justifyContent="flex-end">
+              <Button variant="primary" onPress={onClose} isDisabled={!saved}>
+                {t(labels.close)}
+              </Button>
+            </Row>
+          </Column>
+        )}
+      </Dialog>
+    </Modal>
+  );
+}