diff --git a/src/main.tsx b/src/main.tsx
index 8a0eec9..099bade 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,7 +2,7 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { RouterProvider } from 'react-router-dom';
-import { ConfigProvider } from 'antd';
+import { App as AntdApp, ConfigProvider } from 'antd';
 import 'antd/dist/reset.css';
 import faIR from 'antd/locale/fa_IR';
 import { store } from '@/app/store';
@@ -14,7 +14,9 @@ createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <Provider store={store}>
       <ConfigProvider direction="rtl" locale={faIR} theme={antdTheme}>
-        <RouterProvider router={router} />
+        <AntdApp>
+          <RouterProvider router={router} />
+        </AntdApp>
       </ConfigProvider>
     </Provider>
   </StrictMode>,
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index 3bf9ff3..a8fb553 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -1,4 +1,4 @@
-import { Button, Card, Form, Input, Typography, message } from 'antd';
+import { App, Button, Card, Form, Input, Typography } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { authService } from '@/features/auth/authService';
 import { colors } from '@/design/tokens/colors';
@@ -13,6 +13,7 @@ interface LoginFormValues {
 const Login = () => {
   const navigate = useNavigate();
   const [form] = Form.useForm<LoginFormValues>();
+  const { message } = App.useApp();
 
   const onFinish = async (values: LoginFormValues) => {
     try {
diff --git a/src/pages/VerifyOtp/VerifyOtp.tsx b/src/pages/VerifyOtp/VerifyOtp.tsx
index 0f45c42..e63d942 100644
--- a/src/pages/VerifyOtp/VerifyOtp.tsx
+++ b/src/pages/VerifyOtp/VerifyOtp.tsx
@@ -1,4 +1,4 @@
-import { Button, Card, Form, Input, Typography, message, type InputRef } from 'antd';
+import { App, Button, Card, Form, Input, Typography, type InputRef } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAppDispatch } from '@/utils/hooks';
@@ -19,6 +19,7 @@ const VerifyOtp = () => {
   const [phoneNumber] = useState(() => localStorage.getItem('pending_phone_number') ?? '');
   const [form] = Form.useForm<VerifyOtpFormValues>();
   const otpInputRef = useRef<InputRef>(null);
+  const { message } = App.useApp();
 
   useEffect(() => {
     const timeoutId = window.setTimeout(() => {