diff --git a/package-lock.json b/package-lock.json
index f8ff0ed..2bc9fc9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@mui/material": "^7.2.0",
         "@mui/stylis-plugin-rtl": "^7.2.0",
         "@rkheftan/harmony-ui": "^0.1.5",
-        "@mui/x-date-pickers": "^8.9.0",
+        "@mui/x-date-pickers": "^8.10.0",
         "@mui/x-date-pickers-pro": "^8.9.0",
         "axios": "^1.11.0",
         "date-fns": "^4.1.0",
@@ -1452,6 +1452,281 @@
         }
       }
     },
+    "node_modules/@mui/x-date-pickers": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-8.10.0.tgz",
+      "integrity": "sha512-3nY+SS2/JtqcptQodECIyWKsTvPBDAcXKkyW65R4rQUCrnV6tuzriSrzy/FEYqTK0hyXYPIGJhQ6A0FbtQ9AkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2",
+        "@mui/utils": "^7.2.0",
+        "@mui/x-internals": "8.10.0",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
+        "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0",
+        "dayjs": "^1.10.7",
+        "luxon": "^3.0.2",
+        "moment": "^2.29.4",
+        "moment-hijri": "^2.1.2 || ^3.0.0",
+        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "date-fns-jalali": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        },
+        "moment-hijri": {
+          "optional": true
+        },
+        "moment-jalaali": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-date-pickers-pro": {
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers-pro/-/x-date-pickers-pro-8.9.0.tgz",
+      "integrity": "sha512-Penske7PIdAgFUjD6J15O3sJqkAju6htogQNuEG4Jp1Fk1rQrqF6ZCG9jHDVeyf45ZeEt/1rDUEgyGKPtjyFAA==",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@mui/utils": "^7.2.0",
+        "@mui/x-date-pickers": "8.9.0",
+        "@mui/x-internals": "8.8.0",
+        "@mui/x-license": "8.9.0",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
+        "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0",
+        "dayjs": "^1.10.7",
+        "luxon": "^3.0.2",
+        "moment": "^2.29.4",
+        "moment-hijri": "^2.1.2 || ^3.0.0",
+        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "date-fns-jalali": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        },
+        "moment-hijri": {
+          "optional": true
+        },
+        "moment-jalaali": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-date-pickers-pro/node_modules/@mui/x-date-pickers": {
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-8.9.0.tgz",
+      "integrity": "sha512-MD2/F63Tdsodygp3Z2VtfvvQhAiEVXvleuK9mqXuD6a1cCPOENICCJC98y2AKbOcsbVd37o6HCvWFOQsfsy7TQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@mui/utils": "^7.2.0",
+        "@mui/x-internals": "8.8.0",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
+        "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0",
+        "dayjs": "^1.10.7",
+        "luxon": "^3.0.2",
+        "moment": "^2.29.4",
+        "moment-hijri": "^2.1.2 || ^3.0.0",
+        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "date-fns-jalali": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        },
+        "moment-hijri": {
+          "optional": true
+        },
+        "moment-jalaali": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-date-pickers/node_modules/@mui/x-internals": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-8.10.0.tgz",
+      "integrity": "sha512-stYhWBeCKfV2/ltAWShZ3ZJ51otbqpMpC+krWWoIsxM8TuvGzwXw5YMU9L2fTb8hRstsiOCQfEzIn12Ii7+N0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2",
+        "@mui/utils": "^7.2.0",
+        "reselect": "^5.1.1",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@mui/x-internals": {
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-8.8.0.tgz",
+      "integrity": "sha512-qTRK5oINkAjZ7sIHpSnESLNq1xtQUmmfmGscYUSEP0uHoYh6pKkNWH9+7yzggRHuTv+4011VBwN9s+efrk+xZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@mui/utils": "^7.2.0",
+        "reselect": "^5.1.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@mui/x-license": {
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-license/-/x-license-8.9.0.tgz",
+      "integrity": "sha512-mtCWT1l9rNTvs3N2NYd2liRN4IrbgB/E1QkF3BW3dL1rgBAOMamaCoQPAtK+L8UEPvB+zie3rs77/LAbdyS7oA==",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@mui/utils": "^7.2.0",
+        "@mui/x-internals": "8.8.0",
+        "@mui/x-telemetry": "8.5.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@mui/x-telemetry": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/@mui/x-telemetry/-/x-telemetry-8.5.3.tgz",
+      "integrity": "sha512-vBLVBXCBWY44HonjRefpYjowEXa25k2AtAXkWk2tHfL3/unnnexrYPosuo/p4giIWer0pMy/bPqGY2qM0xlM+g==",
+      "hasInstallScript": true,
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@fingerprintjs/fingerprintjs": "^3.4.2",
+        "ci-info": "^4.2.0",
+        "conf": "^11.0.2",
+        "is-docker": "^3.0.0",
+        "node-machine-id": "^1.1.12"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
diff --git a/public/locales/en/completionForm.json b/public/locales/en/completionForm.json
index 15e3e8a..61cd833 100644
--- a/public/locales/en/completionForm.json
+++ b/public/locales/en/completionForm.json
@@ -28,6 +28,10 @@
     "agreementPart2": ".",
     "sent": "sent",
     "country": "country",
-    "dateOfBirth": "Date of birth(optional)"
+    "dateOfBirth": "Date of birth(optional)",
+    "submitSuccess": "Information successfully registered",
+    "submitError": "Error in registering information",
+    "submitting": "Submitting...",
+    "success": "Success"
   }
 }
diff --git a/public/locales/fa/completionForm.json b/public/locales/fa/completionForm.json
index 8bdd074..6ab3404 100644
--- a/public/locales/fa/completionForm.json
+++ b/public/locales/fa/completionForm.json
@@ -31,6 +31,10 @@
     "dateOfBirth": "تاریخ تولد(اختیاری)",
     "invalidCountry": "کشور انتخاب شده صحیح نیست",
     "rules": "قوانین و مقررات",
-    "alertSuccess": "ایمیل با موفقیت تایید شد"
+    "alertSuccess": "ایمیل با موفقیت تایید شد",
+    "submitSuccess": "اطلاعات با موفقیت ثبت شد",
+    "submitError": "خطا در ثبت اطلاعات",
+    "submitting": "در حال تایید...",
+    "success": "موفقیت"
   }
 }
diff --git a/src/features/authentication/components/EmailSection.tsx b/src/features/authentication/components/EmailSection.tsx
index f043d06..6deddd3 100644
--- a/src/features/authentication/components/EmailSection.tsx
+++ b/src/features/authentication/components/EmailSection.tsx
@@ -163,6 +163,7 @@ export function EmailSection({
 
             {!isVerifyingCode && !emailVerified && (
               <Button
+                type="button"
                 variant="text"
                 onClick={onSendCodeClick}
                 sx={{
diff --git a/src/features/authentication/components/SubmitSection.tsx b/src/features/authentication/components/SubmitSection.tsx
index b6b02ac..82fc3b8 100644
--- a/src/features/authentication/components/SubmitSection.tsx
+++ b/src/features/authentication/components/SubmitSection.tsx
@@ -74,15 +74,6 @@ export function SubmitSection({ onSubmit, loading, error, success }: Props) {
           {t('completion.agreementPart2')}
         </Typography>
 
-        {/* <Button
-          variant="contained"
-          sx={{
-            width: { xs: '100%', sm: '247px' },
-            alignSelf: { xs: 'stretch', sm: 'center' },
-          }}
-        >
-          {t('completion.registerButton')}
-        </Button> */}
         <Button
           variant="contained"
           onClick={onSubmit}
@@ -95,7 +86,7 @@ export function SubmitSection({ onSubmit, loading, error, success }: Props) {
           {loading
             ? t('completion.submitting')
             : success
-              ? t('completion.success')
+              ? t('completion.registerButton')
               : t('completion.registerButton')}
         </Button>
         {error && <Typography color="error">{error}</Typography>}
diff --git a/src/features/authentication/components/UserCompletionForm.tsx b/src/features/authentication/components/UserCompletionForm.tsx
index 088ceae..fe498e9 100644
--- a/src/features/authentication/components/UserCompletionForm.tsx
+++ b/src/features/authentication/components/UserCompletionForm.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { Box, Typography, Button } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import Logo from '@/components/Logo';
 import { PersonalInfoFields } from './PersonalInfoFields';
@@ -7,7 +7,7 @@ import { PasswordSection } from './PasswordSection';
 import { EmailSection } from './EmailSection';
 import { SubmitSection } from './SubmitSection';
 import apiClient from '@/lib/apiClient';
-import { sendEmailOtp, fetchAuthToken } from '@/lib/authToken';
+import { Toast } from '@/components/Toast';
 
 export function UserCompletionForm() {
   const { t } = useTranslation('completionForm');
@@ -48,6 +48,15 @@ export function UserCompletionForm() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
+  const [showSuccessToast, setShowSuccessToast] = useState(false);
+  const [showErrorToast, setShowErrorToast] = useState(false);
+  const [toastMessage, setToastMessage] = useState('');
+
+  const [showVerifyCodeSectionSuccess, setShowVerifyCodeSectionSuccess] =
+    useState(false);
+  const [showVerifyCodeSectionError, setShowVerifyCodeSectionError] =
+    useState(false);
+  const [sentVerificationCode, setSentVerificationCode] = useState('');
 
   useEffect(() => {
     if (password) {
@@ -65,18 +74,16 @@ export function UserCompletionForm() {
   useEffect(() => {
     let timer: NodeJS.Timeout;
     if (buttonState === 'counting' && countdown > 0) {
-      timer = setInterval(
-        () =>
-          setCountdown((prev) => {
-            if (prev <= 1) {
-              setButtonState('default');
-              clearInterval(timer);
-              return 0;
-            }
-            return prev - 1;
-          }),
-        1000,
-      );
+      timer = setInterval(() => {
+        setCountdown((prev) => {
+          if (prev <= 1) {
+            setButtonState('default');
+            clearInterval(timer);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
     }
     return () => clearInterval(timer);
   }, [buttonState, countdown]);
@@ -97,29 +104,67 @@ export function UserCompletionForm() {
     setError(null);
     setLoading(true);
     setSuccess(false);
-
     try {
-      await sendEmailOtp(EMAIL);
-      setSuccess(true);
-    } catch {
-      setError('Failed to send OTP');
+      const response = await apiClient.post('/User/SendEmailOtp', { email });
+      if (response.data?.success) {
+        setSentVerificationCode(response.data.message);
+        setShowVerifyCodeSectionSuccess(true);
+        setCodeSent(true);
+        setButtonState('counting');
+        setCountdown(120);
+        setSuccess(true);
+        setSentVerificationCode(
+          response.data.message || 'کد با موفقیت ارسال شد',
+        );
+      } else {
+        setShowVerifyCodeSectionError(true);
+        setSentVerificationCode(response.data.message || 'مشکلی پیش آمده');
+        // setError(
+        //   response.data?.message || t('completion.verificationCodeError'),
+        // );
+      }
+    } catch (err: any) {
+      setShowVerifyCodeSectionError(true);
+      setSentVerificationCode(err.response?.data?.message || 'مشکلی پیش آمده');
+      // setError(
+      //   err.response?.data?.message || t('completion.verificationCodeError'),
+      // );
     } finally {
       setLoading(false);
     }
   };
 
   const handleVerifyCode = async () => {
-    if (!verificationCode) return;
+    if (!verificationCode.trim()) {
+      setError('Please enter the verification code');
+      return;
+    }
+
     setIsVerifyingCode(true);
     setError(null);
+
     try {
-      const tokenRes = await fetchAuthToken(email, verificationCode);
-      localStorage.setItem('authToken', tokenRes.access_token);
-      apiClient.defaults.headers.common['Authorization'] =
-        `Bearer ${tokenRes.access_token}`;
-      setEmailVerified(true);
-    } catch {
-      setError('Invalid verification code');
+      const res = await apiClient.post('/User/ConfirmEmailOtp', {
+        email,
+        otp: verificationCode,
+      });
+
+      if (res.data?.success) {
+        setEmailVerified(true);
+        setSuccess(true);
+        if (res.data.access_token) {
+          localStorage.setItem('authToken', res.data.access_token);
+          apiClient.defaults.headers.common['Authorization'] =
+            `Bearer ${res.data.access_token}`;
+        }
+      } else {
+        setError(res.data?.message || 'Invalid verification code');
+      }
+    } catch (err: any) {
+      setError(
+        err.response?.data?.message ||
+          'Something went wrong while verifying the code',
+      );
     } finally {
       setIsVerifyingCode(false);
     }
@@ -143,6 +188,7 @@ export function UserCompletionForm() {
         message: string;
         validations: { property: string; message: string }[];
       }>('/User/CompleteUserInformation', {
+        userId: '9cb8ae51-95f9-4f66-99b4-1c7c4d48251b',
         firstName,
         lastName,
         gender: sex === 'female' ? 2 : 1,
@@ -155,21 +201,22 @@ export function UserCompletionForm() {
         country,
       });
       if (data.success) {
-        setSuccess(true);
+        setToastMessage(data.message || t('completion.submitSuccess'));
+        setShowSuccessToast(true);
       } else {
-        setError(data.message || 'Validation error');
+        setToastMessage(data.message || t('completion.submitError'));
+        setShowErrorToast(true);
       }
     } catch (err: any) {
-      setError(
-        err.response?.data?.message || err.message || 'An error occurred',
+      setToastMessage(
+        err.response?.data?.message || err.message || 'خطای ناشناخته',
       );
+      setShowErrorToast(true);
     } finally {
       setLoading(false);
     }
   };
 
-  const EMAIL = 'klahouti81@gmail.com';
-
   return (
     <Box
       sx={{
@@ -238,6 +285,21 @@ export function UserCompletionForm() {
           showValidations={showPasswordValidations}
         />
 
+        <Toast
+          color="success"
+          open={showVerifyCodeSectionSuccess}
+          onClose={() => setShowVerifyCodeSectionSuccess(false)}
+        >
+          {sentVerificationCode}
+        </Toast>
+
+        <Toast
+          color="error"
+          open={showVerifyCodeSectionError}
+          onClose={() => setShowVerifyCodeSectionError(false)}
+        >
+          {sentVerificationCode}
+        </Toast>
         <EmailSection
           showEmail={showEmail}
           setShowEmail={setShowEmail}
@@ -255,10 +317,20 @@ export function UserCompletionForm() {
           isVerifyingCode={isVerifyingCode}
           handleEditEmail={handleEditEmail}
         />
-
-        <Button onClick={handleSendCode} variant="contained" disabled={loading}>
-          {loading ? 'Sending…' : 'Send OTP'}
-        </Button>
+        <Toast
+          color="success"
+          open={showSuccessToast}
+          onClose={() => setShowSuccessToast(false)}
+        >
+          {toastMessage}
+        </Toast>
+        <Toast
+          color="error"
+          open={showErrorToast}
+          onClose={() => setShowErrorToast(false)}
+        >
+          {toastMessage}
+        </Toast>
 
         <SubmitSection
           onSubmit={handleSubmit}
diff --git a/src/lib/authToken.ts b/src/lib/authToken.ts
index d975cae..8f8b420 100644
--- a/src/lib/authToken.ts
+++ b/src/lib/authToken.ts
@@ -35,8 +35,6 @@ export async function fetchAuthToken(
   email: string,
   otpCode: string,
 ): Promise<TokenResponse> {
-  await sendEmailOtp(email);
-
   const body = new URLSearchParams({
     grant_type: 'otp',
     client_id: 'harmony_identity',