diff --git a/.env.example b/.env.example
index 92375ec1e..36a0e4ab5 100644
--- a/.env.example
+++ b/.env.example
@@ -1,7 +1,7 @@
 EXPO_PUBLIC_CHATWOOT_WEBSITE_TOKEN=
 EXPO_PUBLIC_CHATWOOT_BASE_URL=https://app.chatwoot.com
 EXPO_PUBLIC_JUNE_SDK_KEY=
-EXPO_PUBLIC_MINIMUM_CHATWOOT_VERSION=3.13.0
+EXPO_PUBLIC_MINIMUM_CHATWOOT_VERSION=4.1.0
 EXPO_PUBLIC_SENTRY_DSN=
 EXPO_PUBLIC_PROJECT_ID=
 EXPO_PUBLIC_APP_SLUG=
diff --git a/app.config.ts b/app.config.ts
index 53c76f16c..60d027509 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -4,7 +4,7 @@ export default ({ config }: ConfigContext): ExpoConfig => {
   return {
     name: 'Chatwoot',
     slug: process.env.EXPO_PUBLIC_APP_SLUG || 'chatwoot-mobile',
-    version: '4.2.0',
+    version: '4.2.3',
     orientation: 'portrait',
     icon: './assets/icon.png',
     userInterfaceStyle: 'light',
diff --git a/jest.config.js b/jest.config.js
index cbb7b65d8..7b698d81a 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -4,4 +4,7 @@ module.exports = {
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
   },
+  transformIgnorePatterns: [
+    'node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation|@reduxjs|immer)',
+  ],
 };
diff --git a/package.json b/package.json
index 0853519d5..1cb0d3212 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/mobile-app",
-  "version": "4.2.0",
+  "version": "4.2.3",
   "scripts": {
     "start": "expo start --dev-client",
     "start:production": "expo start --no-dev --minify",
diff --git a/src/components-next/index.ts b/src/components-next/index.ts
index 6231a27c4..a8912d790 100644
--- a/src/components-next/index.ts
+++ b/src/components-next/index.ts
@@ -6,3 +6,4 @@ export * from './sheet-components';
 export * from './spinner';
 export * from './action-tabs';
 export * from './no-network';
+export * from './verification-code';
diff --git a/src/components-next/verification-code/animated-code-number.tsx b/src/components-next/verification-code/animated-code-number.tsx
new file mode 100644
index 000000000..6c9cc0ed2
--- /dev/null
+++ b/src/components-next/verification-code/animated-code-number.tsx
@@ -0,0 +1,76 @@
+import { StyleSheet } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import Animated, {
+  Easing,
+  FadeIn,
+  FadeOut,
+  FlipInXDown,
+  FlipOutXDown,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
+
+export type StatusType = 'inProgress' | 'correct' | 'wrong';
+
+export type AnimatedCodeNumberProps = {
+  code?: string;
+  highlighted: boolean;
+  status: SharedValue<StatusType>;
+};
+
+export const AnimatedCodeNumber: React.FC<AnimatedCodeNumberProps> = ({
+  code,
+  highlighted,
+  status,
+}) => {
+  const correctColor = 'hsl(151, 40.2%, 54.1%)'; // green-600
+  const defaultColor = 'hsl(0, 0%, 89.5%)'; // gray-300
+
+  const rBoxStyle = useAnimatedStyle(() => {
+    return {
+      // Only show green border for correct status, default border for all other states
+      borderColor: withTiming(status.value === 'correct' ? correctColor : defaultColor),
+    };
+  }, [correctColor, defaultColor]);
+
+  return (
+    <Animated.View style={[styles.container, rBoxStyle]}>
+      {code != null && (
+        <Animated.View entering={FadeIn.duration(250)} exiting={FadeOut.duration(250)}>
+          <Animated.Text
+            entering={FlipInXDown.duration(500)
+              // Go to this website and you'll see the curve I used:
+              // https://cubic-bezier.com/#0,0.75,0.5,0.9
+              // Basically, I want the animation to start slow, then accelerate at the end
+              // Do we really need to use a curve? Every detail matters :)
+              .easing(Easing.bezier(0, 0.75, 0.5, 0.9).factory())
+              .build()}
+            exiting={FlipOutXDown.duration(500)
+              // https://cubic-bezier.com/#0.6,0.1,0.4,0.8
+              // I want the animation to start fast, then decelerate at the end (opposite of the previous one)
+              .easing(Easing.bezier(0.6, 0.1, 0.4, 0.8).factory())
+              .build()}
+            style={[styles.text, { color: 'hsl(0, 0%, 39.3%)' }]}>
+            {code}
+          </Animated.Text>
+        </Animated.View>
+      )}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: '90%',
+    width: '80%',
+    borderWidth: 2,
+    borderRadius: 12,
+    borderCurve: 'continuous',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 40,
+    fontFamily: 'Inter-500-24',
+  },
+});
diff --git a/src/components-next/verification-code/hooks/use-animated-shake.ts b/src/components-next/verification-code/hooks/use-animated-shake.ts
new file mode 100644
index 000000000..d4dfdac35
--- /dev/null
+++ b/src/components-next/verification-code/hooks/use-animated-shake.ts
@@ -0,0 +1,47 @@
+import { useCallback } from 'react';
+import {
+  cancelAnimation,
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+
+// Custom hook for creating an animated shaking effect
+const useAnimatedShake = () => {
+  // Shared value to track the horizontal translation for shaking
+  const shakeTranslateX = useSharedValue(0);
+
+  // Callback function to trigger the shake animation
+  const shake = useCallback(() => {
+    // Cancel any ongoing animations on shakeTranslateX
+    cancelAnimation(shakeTranslateX);
+
+    // Reset the translation value to 0 before starting the new animation
+    shakeTranslateX.value = 0;
+
+    // Apply a repeating animation to create a shaking effect
+    shakeTranslateX.value = withRepeat(
+      withTiming(10, {
+        duration: 120,
+        easing: Easing.bezier(0.35, 0.7, 0.5, 0.7),
+      }),
+      6, // Repeat the animation 6 times
+      true, // Infinite loop (true indicates indefinite repetition)
+    );
+  }, [shakeTranslateX]); // Dependency array to ensure proper re-rendering
+
+  // Define the animated style based on the current translation value
+  const rShakeStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: shakeTranslateX.value }],
+    };
+  }, []);
+
+  // Return the shake callback function and the animated style for external use
+  return { shake, rShakeStyle };
+};
+
+// Export the custom hook for use in other components
+export { useAnimatedShake };
diff --git a/src/components-next/verification-code/index.tsx b/src/components-next/verification-code/index.tsx
new file mode 100644
index 000000000..898acc260
--- /dev/null
+++ b/src/components-next/verification-code/index.tsx
@@ -0,0 +1,50 @@
+import { StyleSheet, View } from 'react-native';
+import { useSharedValue } from 'react-native-reanimated';
+
+import type { AnimatedCodeNumberProps } from './animated-code-number';
+import { AnimatedCodeNumber } from './animated-code-number';
+
+export type StatusType = 'inProgress' | 'correct' | 'wrong';
+
+type VerificationCodeProps = {
+  code: string[];
+  maxLength?: number;
+  isCodeWrong: boolean;
+} & Pick<AnimatedCodeNumberProps, 'status'>;
+
+export const VerificationCode: React.FC<VerificationCodeProps> = ({
+  code,
+  maxLength = 5,
+  status,
+  isCodeWrong,
+}) => {
+  const wrongStatus = useSharedValue<StatusType>('wrong');
+
+  return (
+    <View style={styles.container}>
+      {new Array(maxLength).fill(0).map((_, index) => (
+        <View key={index} style={styles.codeContainer}>
+          <AnimatedCodeNumber
+            code={code[index]}
+            highlighted={index === code.length}
+            status={isCodeWrong ? wrongStatus : status}
+          />
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    flexDirection: 'row',
+  },
+  codeContainer: {
+    aspectRatio: 0.95,
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f0b5e0a0e..0c10fe736 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -50,6 +50,24 @@
     "SUB_TITLE": "Don't worry! We got your back",
     "API_SUCCESS": "Password reset link has been sent to your email address"
   },
+  "MFA": {
+    "TITLE": "Two-Factor Authentication",
+    "TABS": {
+      "AUTHENTICATOR_APP": "Authenticator App",
+      "BACKUP_CODE": "Backup Code"
+    },
+    "INSTRUCTIONS": {
+      "AUTHENTICATOR": "Enter 6-digit code from your authenticator app",
+      "BACKUP": "Enter your one of your backup code"
+    },
+    "PLACEHOLDERS": {
+      "BACKUP_CODE": "Enter backup code"
+    },
+    "BUTTONS": {
+      "VERIFY": "Verify",
+      "VERIFYING": "Verifying..."
+    }
+  },
   "CONVERSATION": {
     "HEADER": {
       "TITLE": "Conversations",
diff --git a/src/navigation/stack/AuthStack.tsx b/src/navigation/stack/AuthStack.tsx
index a0e29153a..807006154 100644
--- a/src/navigation/stack/AuthStack.tsx
+++ b/src/navigation/stack/AuthStack.tsx
@@ -4,11 +4,13 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import ConfigInstallationURL from '@/screens/auth/ConfigURLScreen';
 import Login from '@/screens/auth/LoginScreen';
 import ForgotPassword from '@/screens/auth/ForgotPassword';
+import MFAScreen from '@/screens/auth/MFAScreen';
 
 export type AuthStackParamList = {
   Login: undefined;
   ResetPassword: undefined;
   ConfigureURL: undefined;
+  MFAScreen: undefined;
 };
 
 const Stack = createNativeStackNavigator<AuthStackParamList>();
@@ -45,6 +47,17 @@ export const AuthStack = () => {
         name="ConfigureURL"
         component={ConfigInstallationURL}
       />
+      <Stack.Screen
+        options={{
+          headerShown: true,
+          headerBackTitle: 'Back',
+          headerBackVisible: true,
+          headerShadowVisible: false,
+          title: '',
+        }}
+        name="MFAScreen"
+        component={MFAScreen}
+      />
     </Stack.Navigator>
   );
 };
diff --git a/src/screens/auth/LoginScreen.tsx b/src/screens/auth/LoginScreen.tsx
index 7abced6e2..e9c43cac4 100644
--- a/src/screens/auth/LoginScreen.tsx
+++ b/src/screens/auth/LoginScreen.tsx
@@ -83,7 +83,22 @@ const LoginScreen = () => {
 
   const onSubmit = async (data: FormData) => {
     const { email, password } = data;
-    dispatch(authActions.login({ email, password }));
+    // Clear any existing auth state before login
+    dispatch(resetAuth());
+
+    try {
+      const result = await dispatch(authActions.login({ email, password })).unwrap();
+
+      // Check if MFA is required in the response
+      if ('mfa_required' in result && result.mfa_required) {
+        // Navigate directly to MFA screen with the token
+        navigation.navigate('MFAScreen' as never);
+      }
+      // If MFA not required, the auth state will be updated and
+      // the app will automatically navigate to the dashboard
+    } catch {
+      // Login error is handled by Redux and displayed in the UI
+    }
   };
 
   const openResetPassword = () => {
diff --git a/src/screens/auth/MFAScreen.tsx b/src/screens/auth/MFAScreen.tsx
new file mode 100644
index 000000000..b9b554ead
--- /dev/null
+++ b/src/screens/auth/MFAScreen.tsx
@@ -0,0 +1,259 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, StatusBar, View, TextInput, Text, Pressable, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useSharedValue } from 'react-native-reanimated';
+import { useNavigation } from '@react-navigation/native';
+import { Button, VerificationCode } from '@/components-next';
+import { useAnimatedShake } from '@/components-next/verification-code/hooks/use-animated-shake';
+import type { StatusType } from '@/components-next/verification-code';
+import { tailwind } from '@/theme';
+import { useAppDispatch, useAppSelector } from '@/hooks';
+import { resetSettings } from '@/store/settings/settingsSlice';
+import { authActions } from '@/store/auth/authActions';
+import { resetAuth, clearAuthError } from '@/store/auth/authSlice';
+import i18n from '@/i18n';
+
+const MFAScreen = () => {
+  const navigation = useNavigation();
+  const dispatch = useAppDispatch();
+  const { mfaToken, uiFlags, error } = useAppSelector(state => state.auth);
+
+  const [activeTab, setActiveTab] = useState<'authenticator' | 'backup'>('authenticator');
+  const [code, setCode] = useState<string[]>([]);
+  const [backupCode, setBackupCode] = useState('');
+  const [isCodeWrong, setIsCodeWrong] = useState(false);
+  const hiddenInputRef = useRef<TextInput>(null);
+  const backupInputRef = useRef<TextInput>(null);
+
+  const verificationStatus = useSharedValue<StatusType>('inProgress');
+  const { shake, rShakeStyle } = useAnimatedShake();
+
+  useEffect(() => {
+    dispatch(resetSettings());
+  }, [dispatch]);
+
+  // Clear MFA token when navigating back to login
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('beforeRemove', e => {
+      // Clear MFA token when leaving the screen
+      dispatch(resetAuth());
+    });
+
+    return unsubscribe;
+  }, [navigation, dispatch]);
+
+  const handleCodeChange = (text: string) => {
+    const newCode = text
+      .replace(/[^0-9]/g, '')
+      .split('')
+      .slice(0, 6);
+    setCode(newCode);
+    setIsCodeWrong(false);
+    if (error) dispatch(clearAuthError());
+    verificationStatus.value = 'inProgress';
+
+    if (newCode.length === 6) {
+      handleVerify(newCode.join(''));
+    }
+  };
+
+  const handleVerify = async (enteredCode?: string) => {
+    if (!mfaToken) return;
+
+    setIsCodeWrong(false);
+    dispatch(clearAuthError());
+
+    try {
+      const payload = {
+        mfa_token: mfaToken,
+        ...(activeTab === 'authenticator'
+          ? { otp_code: enteredCode || code.join('') }
+          : { backup_code: backupCode }),
+      };
+
+      await dispatch(authActions.verifyMfa(payload)).unwrap();
+
+      verificationStatus.value = 'correct';
+
+      // The app will automatically navigate to main app when user is set in auth state
+      // No manual navigation needed - the existing auth logic handles this
+      // eslint-disable-next-line
+    } catch (e) {
+      verificationStatus.value = 'wrong';
+      setIsCodeWrong(true);
+      shake();
+
+      if (activeTab === 'authenticator') {
+        setCode([]);
+        if (hiddenInputRef.current) {
+          hiddenInputRef.current.clear();
+        }
+      } else {
+        setBackupCode('');
+        if (backupInputRef.current) {
+          backupInputRef.current.clear();
+        }
+      }
+    }
+  };
+
+  return (
+    <SafeAreaView style={tailwind.style('flex-1 bg-white')}>
+      <StatusBar
+        translucent
+        backgroundColor={tailwind.color('bg-white')}
+        barStyle={'dark-content'}
+      />
+      <View style={tailwind.style('flex-1 bg-white')}>
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={tailwind.style('px-6 pt-8')}
+          keyboardShouldPersistTaps="handled">
+          <View style={tailwind.style('pt-6 gap-4')}>
+            <Animated.Text
+              style={tailwind.style('text-2xl text-gray-950 font-inter-semibold-20 text-center')}>
+              {i18n.t('MFA.TITLE')}
+            </Animated.Text>
+          </View>
+
+          {/* Tab Selector */}
+          <View style={tailwind.style('flex-row mt-8 mb-6 bg-gray-100 rounded-lg p-1')}>
+            <Pressable
+              style={tailwind.style(
+                `flex-1 py-3 px-4 rounded-md ${activeTab === 'authenticator' ? 'bg-white' : ''}`,
+              )}
+              onPress={() => {
+                setActiveTab('authenticator');
+                setIsCodeWrong(false);
+                dispatch(clearAuthError());
+                verificationStatus.value = 'inProgress';
+              }}>
+              <Text
+                style={tailwind.style(
+                  `text-center font-inter-normal-20 ${
+                    activeTab === 'authenticator' ? 'text-gray-950' : 'text-gray-600'
+                  }`,
+                )}>
+                {i18n.t('MFA.TABS.AUTHENTICATOR_APP')}
+              </Text>
+            </Pressable>
+            <Pressable
+              style={tailwind.style(
+                `flex-1 py-3 px-4 rounded-md ${activeTab === 'backup' ? 'bg-white' : ''}`,
+              )}
+              onPress={() => {
+                setActiveTab('backup');
+                setIsCodeWrong(false);
+                dispatch(clearAuthError());
+                verificationStatus.value = 'inProgress';
+              }}>
+              <Text
+                style={tailwind.style(
+                  `text-center font-inter-normal-20 ${
+                    activeTab === 'backup' ? 'text-gray-950' : 'text-gray-600'
+                  }`,
+                )}>
+                {i18n.t('MFA.TABS.BACKUP_CODE')}
+              </Text>
+            </Pressable>
+          </View>
+
+          {/* Code Input */}
+          <View style={tailwind.style('mt-4')}>
+            <Text style={[tailwind.style('text-gray-700 font-inter-normal-20 mb-4 pl-2')]}>
+              {activeTab === 'authenticator'
+                ? i18n.t('MFA.INSTRUCTIONS.AUTHENTICATOR')
+                : i18n.t('MFA.INSTRUCTIONS.BACKUP')}
+            </Text>
+
+            {activeTab === 'authenticator' ? (
+              <>
+                <Pressable onPress={() => hiddenInputRef.current?.focus()}>
+                  <Animated.View style={[rShakeStyle, tailwind.style('mb-2')]}>
+                    <VerificationCode
+                      code={code}
+                      maxLength={6}
+                      status={verificationStatus}
+                      isCodeWrong={isCodeWrong}
+                    />
+                  </Animated.View>
+                </Pressable>
+
+                {/* Error message for authenticator */}
+                {error && (
+                  <Animated.Text
+                    style={tailwind.style('font-inter-normal-20 text-ruby-900 mb-6 pl-2')}>
+                    {error}
+                  </Animated.Text>
+                )}
+
+                {!error && <View style={tailwind.style('mb-8')} />}
+
+                {/* Hidden TextInput for OTP */}
+                <TextInput
+                  ref={hiddenInputRef}
+                  style={tailwind.style('opacity-0 w-1 h-1')}
+                  value={code.join('')}
+                  onChangeText={handleCodeChange}
+                  maxLength={6}
+                  keyboardType="numeric"
+                  autoCapitalize="none"
+                  autoFocus
+                  textContentType="oneTimeCode"
+                />
+              </>
+            ) : (
+              <>
+                <Animated.View style={[rShakeStyle, tailwind.style('mb-2 pl-2 pr-2')]}>
+                  <TextInput
+                    ref={backupInputRef}
+                    style={tailwind.style(
+                      'w-full p-4 border-2 rounded-lg text-left border-gray-300',
+                    )}
+                    value={backupCode}
+                    onChangeText={text => {
+                      setBackupCode(text);
+                      setIsCodeWrong(false);
+                      if (error) dispatch(clearAuthError());
+                    }}
+                    placeholder={i18n.t('MFA.PLACEHOLDERS.BACKUP_CODE')}
+                    keyboardType="default"
+                    autoFocus
+                    autoCorrect={false}
+                    maxLength={8}
+                  />
+                </Animated.View>
+
+                {/* Error message for backup code */}
+                {error && (
+                  <Animated.Text
+                    style={tailwind.style('font-inter-normal-20 text-ruby-900 mb-6 pl-2')}>
+                    {error}
+                  </Animated.Text>
+                )}
+
+                {!error && <View style={tailwind.style('mb-8')} />}
+              </>
+            )}
+
+            <Button
+              text={
+                uiFlags.isVerifyingMfa
+                  ? i18n.t('MFA.BUTTONS.VERIFYING')
+                  : i18n.t('MFA.BUTTONS.VERIFY')
+              }
+              handlePress={() => handleVerify()}
+              disabled={
+                (activeTab === 'authenticator' && code.length !== 6) ||
+                (activeTab === 'backup' && backupCode.length !== 8) ||
+                uiFlags.isVerifyingMfa
+              }
+            />
+          </View>
+        </ScrollView>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default MFAScreen;
diff --git a/src/screens/chat-screen/components/audio-recorder/AudioRecorder.tsx b/src/screens/chat-screen/components/audio-recorder/AudioRecorder.tsx
index ec126d8db..615c25704 100644
--- a/src/screens/chat-screen/components/audio-recorder/AudioRecorder.tsx
+++ b/src/screens/chat-screen/components/audio-recorder/AudioRecorder.tsx
@@ -20,6 +20,7 @@ import {
   addNewCachePath,
   selectLocalRecordedAudioCacheFilePaths,
 } from '@/store/conversation/localRecordedAudioCacheSlice';
+// eslint-disable-next-line import/no-unresolved
 import { convertAacToWav } from '@/utils/audioConverter';
 
 const RecorderSegmentWidth = Dimensions.get('screen').width - 8 - 80 - 12;
diff --git a/src/screens/chat-screen/components/message-components/AudioBubble.tsx b/src/screens/chat-screen/components/message-components/AudioBubble.tsx
index ee9117800..95acbe9b5 100644
--- a/src/screens/chat-screen/components/message-components/AudioBubble.tsx
+++ b/src/screens/chat-screen/components/message-components/AudioBubble.tsx
@@ -18,6 +18,7 @@ import { pausePlayer, resumePlayer, seekTo, startPlayer, stopPlayer } from '../a
 import { MESSAGE_VARIANTS } from '@/constants';
 import { useDispatch } from 'react-redux';
 import { useAppSelector } from '@/hooks';
+// eslint-disable-next-line import/no-unresolved
 import { convertOggToWav } from '@/utils/audioConverter';
 
 // eslint-disable-next-line react/display-name
diff --git a/src/store/auth/authActions.ts b/src/store/auth/authActions.ts
index 50ce95511..0fc8ca558 100644
--- a/src/store/auth/authActions.ts
+++ b/src/store/auth/authActions.ts
@@ -3,6 +3,8 @@ import { AuthService } from './authService';
 import type {
   LoginPayload,
   LoginResponse,
+  MfaRequiredResponse,
+  MfaVerificationPayload,
   ResetPasswordPayload,
   ResetPasswordResponse,
   AvailabilityPayload,
@@ -30,12 +32,18 @@ const createAuthThunk = <TResponse, TPayload>(
   );
 };
 export const authActions = {
-  login: createAuthThunk<LoginResponse, LoginPayload>(
+  login: createAuthThunk<LoginResponse | MfaRequiredResponse, LoginPayload>(
     'auth/login',
     AuthService.login,
     I18n.t('ERRORS.AUTH'),
   ),
 
+  verifyMfa: createAuthThunk<LoginResponse, MfaVerificationPayload>(
+    'auth/verifyMfa',
+    AuthService.verifyMfa,
+    I18n.t('ERRORS.AUTH'),
+  ),
+
   getProfile: createAuthThunk<ProfileResponse, void>('auth/getProfile', () =>
     AuthService.getProfile(),
   ),
diff --git a/src/store/auth/authSelectors.ts b/src/store/auth/authSelectors.ts
index 207e064c9..5e1decfbd 100644
--- a/src/store/auth/authSelectors.ts
+++ b/src/store/auth/authSelectors.ts
@@ -49,3 +49,9 @@ export const selectCurrentUserAccount = createSelector(selectAuth, auth => {
   );
   return currentAccount;
 });
+
+export const selectMfaToken = createSelector(selectAuth, auth => auth.mfaToken);
+
+export const selectIsMfaRequired = createSelector(selectAuth, auth => auth.mfaToken !== null);
+
+export const selectIsVerifyingMfa = createSelector(selectAuth, auth => auth.uiFlags.isVerifyingMfa);
diff --git a/src/store/auth/authService.ts b/src/store/auth/authService.ts
index 8f9586c68..cfbdfad29 100644
--- a/src/store/auth/authService.ts
+++ b/src/store/auth/authService.ts
@@ -3,6 +3,9 @@ import type { User } from '@/types/User';
 import type {
   LoginPayload,
   LoginResponse,
+  LoginApiResponse,
+  MfaRequiredResponse,
+  MfaVerificationPayload,
   ResetPasswordPayload,
   ResetPasswordResponse,
   AvailabilityPayload,
@@ -11,8 +14,30 @@ import type {
 } from './authTypes';
 
 export class AuthService {
-  static async login(credentials: LoginPayload): Promise<LoginResponse> {
-    const response = await apiService.post<{ data: User }>('auth/sign_in', credentials);
+  static async login(credentials: LoginPayload): Promise<LoginResponse | MfaRequiredResponse> {
+    const response = await apiService.post<LoginApiResponse>('auth/sign_in', credentials);
+
+    // Check if MFA is required
+    if (response.data.mfa_required) {
+      return {
+        mfa_required: true,
+        mfa_token: response.data.mfa_token,
+      } as MfaRequiredResponse;
+    }
+
+    // Regular login response
+    return {
+      user: response.data.data,
+      headers: {
+        'access-token': response.headers['access-token'],
+        uid: response.headers.uid,
+        client: response.headers.client,
+      },
+    } as LoginResponse;
+  }
+
+  static async verifyMfa(payload: MfaVerificationPayload): Promise<LoginResponse> {
+    const response = await apiService.post<{ data: User }>('auth/sign_in', payload);
     return {
       user: response.data.data,
       headers: {
diff --git a/src/store/auth/authSlice.ts b/src/store/auth/authSlice.ts
index e42827dc5..25f7ebcea 100644
--- a/src/store/auth/authSlice.ts
+++ b/src/store/auth/authSlice.ts
@@ -8,9 +8,11 @@ export interface AuthState {
   uiFlags: {
     isLoggingIn: boolean;
     isResettingPassword: boolean;
+    isVerifyingMfa: boolean;
   };
   headers: AuthHeaders | null;
   error: string | null;
+  mfaToken: string | null;
 }
 const initialState: AuthState = {
   user: null,
@@ -18,9 +20,11 @@ const initialState: AuthState = {
   uiFlags: {
     isLoggingIn: false,
     isResettingPassword: false,
+    isVerifyingMfa: false,
   },
   headers: null,
   error: null,
+  mfaToken: null,
 };
 export const authSlice = createSlice({
   name: 'auth',
@@ -33,6 +37,14 @@ export const authSlice = createSlice({
       state.user = null;
       state.accessToken = null;
       state.headers = null;
+      state.mfaToken = null;
+      state.error = null;
+    },
+    clearAuthError: state => {
+      state.error = null;
+    },
+    clearMfaToken: state => {
+      state.mfaToken = null;
     },
     setCurrentUserAvailability(state, action) {
       const { users } = action.payload;
@@ -85,10 +97,20 @@ export const authSlice = createSlice({
         state.error = null;
       })
       .addCase(authActions.login.fulfilled, (state, action) => {
-        state.user = action.payload.user;
-        state.headers = action.payload.headers;
-        state.uiFlags.isLoggingIn = false;
-        state.error = null;
+        // Check if MFA is required
+        if ('mfa_required' in action.payload) {
+          state.mfaToken = action.payload.mfa_token;
+          state.uiFlags.isLoggingIn = false;
+          state.error = null;
+          // MFA token will not be persisted due to blacklist in persist config
+        } else {
+          // Regular login success
+          state.user = action.payload.user;
+          state.headers = action.payload.headers;
+          state.uiFlags.isLoggingIn = false;
+          state.error = null;
+          state.mfaToken = null;
+        }
       })
       .addCase(authActions.getProfile.fulfilled, (state, action) => {
         state.user = {
@@ -116,8 +138,30 @@ export const authSlice = createSlice({
           ...state.user,
           ...action.payload.user,
         };
+      })
+      .addCase(authActions.verifyMfa.pending, state => {
+        state.uiFlags.isVerifyingMfa = true;
+        state.error = null;
+      })
+      .addCase(authActions.verifyMfa.fulfilled, (state, action) => {
+        state.user = action.payload.user;
+        state.headers = action.payload.headers;
+        state.uiFlags.isVerifyingMfa = false;
+        state.error = null;
+        state.mfaToken = null;
+      })
+      .addCase(authActions.verifyMfa.rejected, (state, action) => {
+        state.uiFlags.isVerifyingMfa = false;
+        state.error = action.payload?.errors[0] ?? null;
       });
   },
 });
-export const { logout, setAccount, resetAuth, setCurrentUserAvailability } = authSlice.actions;
+export const {
+  logout,
+  setAccount,
+  resetAuth,
+  setCurrentUserAvailability,
+  clearAuthError,
+  clearMfaToken,
+} = authSlice.actions;
 export default authSlice.reducer;
diff --git a/src/store/auth/authTypes.ts b/src/store/auth/authTypes.ts
index 8758a873e..327b0a139 100644
--- a/src/store/auth/authTypes.ts
+++ b/src/store/auth/authTypes.ts
@@ -13,6 +13,23 @@ export interface LoginResponse {
   user: User;
   headers: AuthHeaders;
 }
+
+export interface MfaRequiredResponse {
+  mfa_required: true;
+  mfa_token: string;
+}
+
+export interface MfaVerificationPayload {
+  mfa_token: string;
+  otp_code?: string;
+  backup_code?: string;
+}
+
+export interface LoginApiResponse {
+  data?: User;
+  mfa_required?: boolean;
+  mfa_token?: string;
+}
 export interface ResetPasswordPayload {
   email: string;
 }
diff --git a/src/store/auth/authUtils.ts b/src/store/auth/authUtils.ts
index 6e4cb1344..76db01f03 100644
--- a/src/store/auth/authUtils.ts
+++ b/src/store/auth/authUtils.ts
@@ -6,12 +6,21 @@ import type { ApiErrorResponse } from './authTypes';
 export const handleApiError = (error: unknown, customErrorMsg?: string) => {
   const { response } = error as AxiosError<ApiErrorResponse>;
 
-  if (response?.status === 401) {
+  // Handle specific error responses (401, 400, etc.)
+  if (response?.status === 401 || response?.status === 400) {
     const { errors } = response.data;
     if (errors?.[0]) {
       showToast({ message: errors[0] });
       return { success: false, errors };
     }
+
+    // If no errors array, check for error field
+    const responseData = response.data as unknown as { error?: string };
+    if (responseData?.error) {
+      const errorMessage = responseData.error;
+      showToast({ message: errorMessage });
+      return { success: false, errors: [errorMessage] };
+    }
   }
 
   const message = customErrorMsg || I18n.t('ERRORS.COMMON_ERROR');
diff --git a/src/store/auth/specs/authSlice.spec.ts b/src/store/auth/specs/authSlice.spec.ts
index 1b61a7c46..021fcf35c 100644
--- a/src/store/auth/specs/authSlice.spec.ts
+++ b/src/store/auth/specs/authSlice.spec.ts
@@ -32,9 +32,11 @@ describe('Auth Slice', () => {
     uiFlags: {
       isLoggingIn: false,
       isResettingPassword: false,
+      isVerifyingMfa: false,
     },
     headers: null,
     error: null,
+    mfaToken: null,
   };
 
   const loggedInState = {