diff --git a/package-lock.json b/package-lock.json
index 44936b8..74f801a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,14 +8,21 @@
       "name": "harmony-club",
       "version": "0.0.0",
       "dependencies": {
+        "@date-io/dayjs": "^3.2.0",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
         "@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-pro": "^8.9.0",
+        "date-fns": "^4.1.0",
+        "date-fns-jalali": "^4.0.0-0",
+        "dayjs": "^1.11.13",
         "i18next": "^25.3.0",
         "i18next-browser-languagedetector": "^8.2.0",
         "i18next-http-backend": "^3.0.2",
+        "iconsax-react": "^0.0.8",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-i18next": "^15.6.0",
@@ -337,6 +344,29 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@date-io/core": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-3.2.0.tgz",
+      "integrity": "sha512-hqwXvY8/YBsT9RwQITG868ZNb1MVFFkF7W1Ecv4P472j/ZWa7EFcgSmxy8PUElNVZfvhdvfv+a8j6NWJqOX5mA==",
+      "license": "MIT"
+    },
+    "node_modules/@date-io/dayjs": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-3.2.0.tgz",
+      "integrity": "sha512-+3LV+3N+cpQbEtmrFo8odg07k02AFY7diHgbi2EKYYANOOCPkDYUjDr2ENiHuYNidTs3tZwzDKckZoVNN4NXxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-io/core": "^3.2.0"
+      },
+      "peerDependencies": {
+        "dayjs": "^1.8.17"
+      },
+      "peerDependenciesMeta": {
+        "dayjs": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.13.5",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
@@ -1093,61 +1123,6 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@fast-csv/format": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/@fast-csv/format/-/format-4.3.5.tgz",
-      "integrity": "sha512-8iRn6QF3I8Ak78lNAa+Gdl5MJJBM5vRHivFtMRUWINdevNo00K7OXxS2PshawLKTejVwieIlPmK5YlLu6w4u8A==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@types/node": "^14.0.1",
-        "lodash.escaperegexp": "^4.1.2",
-        "lodash.isboolean": "^3.0.3",
-        "lodash.isequal": "^4.5.0",
-        "lodash.isfunction": "^3.0.9",
-        "lodash.isnil": "^4.0.0"
-      }
-    },
-    "node_modules/@fast-csv/format/node_modules/@types/node": {
-      "version": "14.18.63",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
-      "integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/@fast-csv/parse": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/@fast-csv/parse/-/parse-4.3.6.tgz",
-      "integrity": "sha512-uRsLYksqpbDmWaSmzvJcuApSEe38+6NQZBUsuAyMZKqHxH0g1wcJgsKUvN3WC8tewaqFjBMMGrkHmC+T7k8LvA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@types/node": "^14.0.1",
-        "lodash.escaperegexp": "^4.1.2",
-        "lodash.groupby": "^4.6.0",
-        "lodash.isfunction": "^3.0.9",
-        "lodash.isnil": "^4.0.0",
-        "lodash.isundefined": "^3.0.1",
-        "lodash.uniq": "^4.5.0"
-      }
-    },
-    "node_modules/@fast-csv/parse/node_modules/@types/node": {
-      "version": "14.18.63",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
-      "integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/@fingerprintjs/fingerprintjs": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/@fingerprintjs/fingerprintjs/-/fingerprintjs-3.4.2.tgz",
-      "integrity": "sha512-3Ncze6JsJpB7BpYhqIgvBpfvEX1jsEKrad5hQBpyRQxtoAp6hx3+R46zqfsuQG4D9egQZ+xftQ0u4LPFMB7Wmg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.4.1"
-      }
-    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1476,203 +1451,6 @@
         }
       }
     },
-    "node_modules/@mui/x-data-grid": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-8.10.0.tgz",
-      "integrity": "sha512-NMOZyDcE9vqn0qEv0z6DqkXwzIOj4ZFy4QC0RcUjEvBmjwdRc3KCh9XSWAuqmpc23B4M9cydVVkt0CBfOJKwsQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.28.2",
-        "@mui/utils": "^7.2.0",
-        "@mui/x-internals": "8.10.0",
-        "@mui/x-virtualizer": "0.1.1",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "use-sync-external-store": "^1.5.0"
-      },
-      "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",
-        "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
-        }
-      }
-    },
-    "node_modules/@mui/x-data-grid-premium": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/@mui/x-data-grid-premium/-/x-data-grid-premium-8.10.0.tgz",
-      "integrity": "sha512-oNDmzDNoaxVNDSG+vY88okGoVF6hhJ4acpQlb+SYC63hQUnZlB6nQpgVGsDFF6V7A8lq2lDLTnTEZnWlMjuZZw==",
-      "license": "SEE LICENSE IN LICENSE",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.28.2",
-        "@mui/utils": "^7.2.0",
-        "@mui/x-data-grid": "8.10.0",
-        "@mui/x-data-grid-pro": "8.10.0",
-        "@mui/x-internals": "8.10.0",
-        "@mui/x-license": "8.10.0",
-        "@types/format-util": "^1.0.4",
-        "clsx": "^2.1.1",
-        "exceljs": "^4.4.0",
-        "prop-types": "^15.8.1"
-      },
-      "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",
-        "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
-        }
-      }
-    },
-    "node_modules/@mui/x-data-grid-pro": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/@mui/x-data-grid-pro/-/x-data-grid-pro-8.10.0.tgz",
-      "integrity": "sha512-jg5WZakq8QVnYgF1KQ6EFWqtjPXl5Aww4o9bJQOiq1I5IGXqQJdVm9VGdDK0Xywn+FdNiU4VbdQhS++B601b5w==",
-      "license": "SEE LICENSE IN LICENSE",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.28.2",
-        "@mui/utils": "^7.2.0",
-        "@mui/x-data-grid": "8.10.0",
-        "@mui/x-internals": "8.10.0",
-        "@mui/x-license": "8.10.0",
-        "@types/format-util": "^1.0.4",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1"
-      },
-      "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",
-        "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
-        }
-      }
-    },
-    "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",
-      "peer": true,
-      "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-license": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/@mui/x-license/-/x-license-8.10.0.tgz",
-      "integrity": "sha512-N6grkf44ESMmQp8bqSNKmWLIsf7IfsfJUr2PKDH07PVfJHTwvyQpUKBF+mLUtcd/GNDyUhqyDK98zx9AwGzSwA==",
-      "license": "SEE LICENSE IN LICENSE",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.28.2",
-        "@mui/utils": "^7.2.0",
-        "@mui/x-internals": "8.10.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",
-      "peer": true,
-      "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/@mui/x-virtualizer": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@mui/x-virtualizer/-/x-virtualizer-0.1.1.tgz",
-      "integrity": "sha512-pZ84wPu/97Z6g2HF7D4t8X5GSgc+Gr3EoJJpGv1SP3mAX2OcZtYhXiUyQzvHPm2jvDQuxIIzwXT3hMIEgdDPPQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.27.4",
-        "@mui/utils": "^7.2.0",
-        "@mui/x-internals": "8.10.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",
-        "react-dom": "^17.0.0 || ^18.0.0 || ^19.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",
@@ -2483,48 +2261,6 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/ajv-formats": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
-      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "ajv": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/ajv-formats/node_modules/ajv": {
-      "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "fast-uri": "^3.0.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -2622,23 +2358,6 @@
       "dev": true,
       "license": "Python-2.0"
     },
-    "node_modules/async": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
-      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/atomically": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/atomically/-/atomically-2.0.3.tgz",
-      "integrity": "sha512-kU6FmrwZ3Lx7/7y3hPS5QnbJfaohcIul5fGqf7ok+4KklIEk9tJ0C2IQPdacSbVUWv6zVHXEBWoWd6NrVMT7Cw==",
-      "peer": true,
-      "dependencies": {
-        "stubborn-fs": "^1.2.5",
-        "when-exit": "^2.1.1"
-      }
-    },
     "node_modules/babel-plugin-macros": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
@@ -2894,22 +2613,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/ci-info": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.0.tgz",
-      "integrity": "sha512-l+2bNRMiQgcfILUi33labAZYIWlH1kWDp+ecNo5iisRKrbm0xcRyCww71/YU0Fkw0mAFpz9bJayXPjey6vkmaQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/sibiraj-s"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2961,66 +2664,6 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "license": "MIT"
     },
-    "node_modules/conf": {
-      "version": "11.0.2",
-      "resolved": "https://registry.npmjs.org/conf/-/conf-11.0.2.tgz",
-      "integrity": "sha512-jjyhlQ0ew/iwmtwsS2RaB6s8DBifcE2GYBEaw2SJDUY/slJJbNfY4GlDVzOs/ff8cM/Wua5CikqXgbFl5eu85A==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "ajv": "^8.12.0",
-        "ajv-formats": "^2.1.1",
-        "atomically": "^2.0.0",
-        "debounce-fn": "^5.1.2",
-        "dot-prop": "^7.2.0",
-        "env-paths": "^3.0.0",
-        "json-schema-typed": "^8.0.1",
-        "semver": "^7.3.8"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/conf/node_modules/ajv": {
-      "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "fast-uri": "^3.0.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/conf/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/conf/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
-      "license": "ISC",
-      "peer": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -3159,6 +2802,43 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/date-fns-jalali": {
+      "version": "4.0.0-0",
+      "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.0.0-0.tgz",
+      "integrity": "sha512-EczB+gWceuWCRlacE4T+WmdP+BV/IUQpjQW9aBa9DNcXkKuZFv3WBDqeP2Ew+6YFBtPRRcH5U22+C6gcpwgG8A==",
+      "license": "MIT"
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    },
+    "node_modules/debounce-fn": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/debounce-fn/-/debounce-fn-5.1.2.tgz",
+      "integrity": "sha512-Sr4SdOZ4vw6eQDvPYNxHogvrxmCIld/VenC5JbNrFwMiwd7lY/Z18ZFfo+EWNG4DD9nFlAujWAo/wGuOPHmy5A==",
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@@ -3193,65 +2873,6 @@
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/dot-prop": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-7.2.0.tgz",
-      "integrity": "sha512-Ol/IPXUARn9CSbkrdV4VJo7uCy1I3VuSiWCaFSg+8BdUOzF9n3jefIpcgAydvUZbTdEBZs2vEiTiS9m61ssiDA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "type-fest": "^2.11.2"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/duplexer2": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
-      "integrity": "sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==",
-      "license": "BSD-3-Clause",
-      "peer": true,
-      "dependencies": {
-        "readable-stream": "^2.0.2"
-      }
-    },
-    "node_modules/duplexer2/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/duplexer2/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/duplexer2/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.178",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.178.tgz",
@@ -3282,6 +2903,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/env-paths": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-3.0.0.tgz",
+      "integrity": "sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -4221,13 +3854,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/json-schema-typed": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/json-schema-typed/-/json-schema-typed-8.0.1.tgz",
-      "integrity": "sha512-XQmWYj2Sm4kn4WeTYvmpKEbyPsL7nBsb647c7pMe6l02/yx2+Jfc4dT6UZkEXnIUb5LhD55r2HPsJ1milQ4rDg==",
-      "license": "BSD-2-Clause",
-      "peer": true
-    },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -4648,13 +4274,6 @@
         }
       }
     },
-    "node_modules/node-machine-id": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/node-machine-id/-/node-machine-id-1.1.12.tgz",
-      "integrity": "sha512-QNABxbrPa3qEIfrE6GOJ7BYIuignnJw7iQ2YPbc3Nla1HzRJjXzZOiikfF8m7eAMfichLt3M4VgLOetqgDmgGQ==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@@ -5149,6 +4768,21 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
diff --git a/package.json b/package.json
index 00ed48f..9bc1574 100644
--- a/package.json
+++ b/package.json
@@ -11,14 +11,21 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@date-io/dayjs": "^3.2.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@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-pro": "^8.9.0",
+    "date-fns": "^4.1.0",
+    "date-fns-jalali": "^4.0.0-0",
+    "dayjs": "^1.11.13",
     "i18next": "^25.3.0",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",
+    "iconsax-react": "^0.0.8",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-i18next": "^15.6.0",
diff --git a/src/features/authentication/components/DateOfBirth.tsx b/src/features/authentication/components/DateOfBirth.tsx
new file mode 100644
index 0000000..4edc9f3
--- /dev/null
+++ b/src/features/authentication/components/DateOfBirth.tsx
@@ -0,0 +1,38 @@
+import { useState, useMemo } from 'react';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
+import { useTranslation } from 'react-i18next';
+
+export function DateOfBirth() {
+  const { t, i18n } = useTranslation('completionForm');
+  const isFarsi = i18n.language === 'fa' || i18n.language === 'fa-IR';
+  const [birthDate, setBirthDate] = useState<Date | null>(null);
+
+  const Adapter = useMemo(() => {
+    return isFarsi ? AdapterDateFnsJalali : AdapterDateFns;
+  }, [isFarsi]);
+
+  return (
+    <LocalizationProvider dateAdapter={Adapter}>
+      <DatePicker
+        label={t('completion.dateOfBirth')}
+        value={birthDate}
+        onChange={(newValue) => setBirthDate(newValue)}
+        slotProps={{
+          textField: {
+            fullWidth: true,
+            sx: {
+              width: {
+                xs: '100%',
+                sm: '70%',
+                md: '309px',
+              },
+            },
+          },
+        }}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/src/features/authentication/components/EmailSection.tsx b/src/features/authentication/components/EmailSection.tsx
index 159cb3c..46ac855 100644
--- a/src/features/authentication/components/EmailSection.tsx
+++ b/src/features/authentication/components/EmailSection.tsx
@@ -56,27 +56,42 @@ export function EmailSection({
   return (
     <>
       <FormGroup>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 6 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            px: { xs: 2, sm: 6 },
+          }}
+        >
           <Switch checked={showEmail} onChange={handleToggleEmail} />
-          <Typography sx={{ color: showEmail ? '#2979FF' : 'black' }}>
+          <Typography
+            sx={{ color: showEmail ? 'primary.main' : 'text.primary' }}
+          >
             {t('completion.determineEmail')}
           </Typography>
         </Box>
       </FormGroup>
+
       {showEmail && (
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, px: 6 }}>
-          <Box sx={{ display: 'flex', gap: 4 }}>
-            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            px: { xs: 2, sm: 6 },
+          }}
+        >
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
+            <Box sx={{ flex: 1, minWidth: '260px', maxWidth: '634px' }}>
               <TextField
                 label={t('completion.email')}
                 variant="outlined"
+                fullWidth
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                error={!correctEmail}
-                sx={{
-                  width: !isVerifyingCode && !emailVerified ? '446px' : '634px',
-                  transition: 'width 0.3s',
-                }}
+                error={email.length > 0 && !correctEmail}
+                sx={{ maxWidth: '462px' }}
                 InputProps={{
                   startAdornment:
                     !isVerifyingCode && emailVerified ? (
@@ -114,46 +129,54 @@ export function EmailSection({
               />
               {email && (
                 <Typography
-                  sx={{ color: correctEmail ? 'green' : 'red' }}
+                  sx={{ color: correctEmail ? 'success.main' : 'error.main' }}
                   variant="caption"
                 >
                   {correctEmail ? '' : t('completion.emailCorrectForm')}
                 </Typography>
               )}
             </Box>
+
             {!isVerifyingCode && !emailVerified && (
               <Button
                 variant="text"
                 onClick={handleSendCode}
-                sx={{ width: '156px' }}
-                // disabled={
-                //   buttonState === 'sent' ||
-                //   buttonState === 'counting' ||
-                //   !correctEmail
-                // }
+                sx={{
+                  minWidth: '140px',
+                  width: { xs: '100%', sm: '156px' },
+                  alignSelf: 'center',
+                }}
               >
                 {getButtonLabel()}
               </Button>
             )}
           </Box>
+
           {!emailVerified && codeSent && (
-            <Box sx={{ display: 'flex', gap: 4 }}>
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: { xs: 'column', sm: 'row' },
+                gap: 2,
+              }}
+            >
               <TextField
                 label={t('completion.verificationCode')}
                 variant="outlined"
                 value={verificationCode}
                 onChange={(e) => setVerificationCode(e.target.value)}
-                sx={{ width: '446px' }}
+                fullWidth={false}
+                sx={{ flex: 1 }}
                 disabled={isVerifyingCode}
               />
               <Button
                 variant="contained"
-                sx={{
-                  width: '156px',
-                  border: 0.5,
-                }}
                 onClick={handleVerifyCode}
                 disabled={isVerifyingCode}
+                sx={{
+                  width: { xs: '100%', sm: '156px' },
+                  border: 0.5,
+                }}
               >
                 {isVerifyingCode ? (
                   <Box
diff --git a/src/features/authentication/components/PasswordSection.tsx b/src/features/authentication/components/PasswordSection.tsx
index 308734d..4b7ce25 100644
--- a/src/features/authentication/components/PasswordSection.tsx
+++ b/src/features/authentication/components/PasswordSection.tsx
@@ -54,26 +54,29 @@ export function PasswordSection({
     setShowPasswordSection(e.target.checked);
   };
 
-  const handleTogglePasswordEye = () => {
-    setShowPasswordText((prev) => !prev);
-  };
-
-  const handleTogglePasswordRepetitionEye = () => {
+  const handleTogglePasswordEye = () => setShowPasswordText((prev) => !prev);
+  const handleTogglePasswordRepetitionEye = () =>
     setShowPasswordRepetitionText((prev) => !prev);
-  };
 
   return (
     <>
       <FormGroup>
-        <Box sx={{ display: 'flex', gap: 0.5, px: 6, alignItems: 'center' }}>
-          <Box dir="ltr">
-            <Switch
-              checked={showPasswordSection}
-              onChange={handleTogglePasswordSection}
-            />
-          </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            gap: 0.5,
+            px: { xs: 2, sm: 6 },
+            alignItems: 'center',
+          }}
+        >
+          <Switch
+            checked={showPasswordSection}
+            onChange={handleTogglePasswordSection}
+          />
           <Typography
-            sx={{ color: showPasswordSection ? '#2979FF' : 'text.primary' }}
+            sx={{
+              color: showPasswordSection ? 'primary.main' : 'text.primary',
+            }}
           >
             {t('completion.determinePassword')}
           </Typography>
@@ -81,15 +84,23 @@ export function PasswordSection({
       </FormGroup>
 
       {showPasswordSection && (
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, px: 6 }}>
-          <Box sx={{ display: 'flex', gap: 2 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            px: { xs: 2, sm: 6 },
+          }}
+        >
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
             <TextField
               label={t('completion.password')}
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               variant="outlined"
               type={showPasswordText ? 'text' : 'password'}
-              sx={{ width: '309px' }}
+              fullWidth
+              sx={{ maxWidth: '309px', flex: 1 }}
               InputProps={{
                 endAdornment: (
                   <InputAdornment position="end" sx={{ height: 'unset' }}>
@@ -144,7 +155,8 @@ export function PasswordSection({
                   ? t('completion.notCompatibility')
                   : ' '
               }
-              sx={{ width: '309px' }}
+              fullWidth
+              sx={{ maxWidth: '309px', flex: 1 }}
               type={showPasswordRepititonText ? 'text' : 'password'}
               InputProps={{
                 endAdornment: (
@@ -156,8 +168,8 @@ export function PasswordSection({
                         width: '100%',
                       }}
                     >
-                      {confirmPassword.length > 0 ? (
-                        matchPassword ? (
+                      {confirmPassword.length > 0 &&
+                        (matchPassword ? (
                           <TickCircle
                             size="24"
                             color="#14AE5C"
@@ -179,8 +191,7 @@ export function PasswordSection({
                               marginRight: '16px',
                             }}
                           />
-                        )
-                      ) : null}
+                        ))}
 
                       <IconButton
                         onClick={handleTogglePasswordRepetitionEye}
@@ -213,10 +224,12 @@ export function PasswordSection({
           </Box>
 
           {password && showValidations && (
-            <Box sx={{ display: 'flex', gap: 2 }}>
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
               <Box
                 sx={{
-                  width: '317px',
+                  flex: 1,
+                  minWidth: '260px',
+                  maxWidth: '317px',
                   display: 'flex',
                   flexDirection: 'column',
                 }}
@@ -232,7 +245,9 @@ export function PasswordSection({
               </Box>
               <Box
                 sx={{
-                  width: '317px',
+                  flex: 1,
+                  minWidth: '260px',
+                  maxWidth: '317px',
                   display: 'flex',
                   flexDirection: 'column',
                 }}
diff --git a/src/features/authentication/components/PasswordValidation.tsx b/src/features/authentication/components/PasswordValidation.tsx
index 9625d2c..7d76d2b 100644
--- a/src/features/authentication/components/PasswordValidation.tsx
+++ b/src/features/authentication/components/PasswordValidation.tsx
@@ -11,13 +11,29 @@ export function PasswordValidationItem({
   label,
 }: ValidationItemProps) {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        mb: 0.5,
+        flexWrap: 'wrap',
+      }}
+    >
       <TickCircle
         size="16"
         color={isValid ? '#14AE5C' : '#2979FF'}
         variant={isValid ? 'Bold' : 'Outline'}
       />
-      <Typography variant="body2" color="text.primary">
+      <Typography
+        variant="body2"
+        color="text.primary"
+        sx={{
+          fontSize: { xs: '0.85rem', sm: '0.875rem' },
+          wordBreak: 'break-word',
+          flex: 1,
+        }}
+      >
         {label}
       </Typography>
     </Box>
diff --git a/src/features/authentication/components/PersonalInfoFields.tsx b/src/features/authentication/components/PersonalInfoFields.tsx
index ad9d5b9..b7ae321 100644
--- a/src/features/authentication/components/PersonalInfoFields.tsx
+++ b/src/features/authentication/components/PersonalInfoFields.tsx
@@ -10,6 +10,8 @@ import {
 import { useTranslation } from 'react-i18next';
 import { Woman, Man } from 'iconsax-react';
 import { useState } from 'react';
+import { DateOfBirth } from './DateOfBirth';
+import { countries } from '../data/Countries';
 
 interface PersonalInfoFieldsProps {
   sex: string;
@@ -27,39 +29,6 @@ export function PersonalInfoFields({
   const { t } = useTranslation('completionForm');
   const [countryError, setCountryError] = useState(false);
 
-  const countries = [
-    { name: 'Afghanistan', fa: 'افغانستان', flag: 'af' },
-    { name: 'Albania', fa: 'آلبانی', flag: 'al' },
-    { name: 'Algeria', fa: 'الجزایر', flag: 'dz' },
-    { name: 'Argentina', fa: 'آرژانتین', flag: 'ar' },
-    { name: 'Armenia', fa: 'ارمنستان', flag: 'am' },
-    { name: 'Australia', fa: 'استرالیا', flag: 'au' },
-    { name: 'Austria', fa: 'اتریش', flag: 'at' },
-    { name: 'Bahrain', fa: 'بحرین', flag: 'bh' },
-    { name: 'Canada', fa: 'کانادا', flag: 'ca' },
-    { name: 'China', fa: 'چین', flag: 'cn' },
-    { name: 'France', fa: 'فرانسه', flag: 'fr' },
-    { name: 'Germany', fa: 'آلمان', flag: 'de' },
-    { name: 'India', fa: 'هند', flag: 'in' },
-    { name: 'Iran', fa: 'ایران', flag: 'ir' },
-    { name: 'Iraq', fa: 'عراق', flag: 'iq' },
-    { name: 'Italy', fa: 'ایتالیا', flag: 'it' },
-    { name: 'Japan', fa: 'ژاپن', flag: 'jp' },
-    { name: 'Netherlands', fa: 'هلند', flag: 'nl' },
-    { name: 'Pakistan', fa: 'پاکستان', flag: 'pk' },
-    { name: 'Qatar', fa: 'قطر', flag: 'qa' },
-    { name: 'Russia', fa: 'روسیه', flag: 'ru' },
-    { name: 'Saudi Arabia', fa: 'عربستان سعودی', flag: 'sa' },
-    { name: 'Spain', fa: 'اسپانیا', flag: 'es' },
-    { name: 'Sweden', fa: 'سوئد', flag: 'se' },
-    { name: 'Switzerland', fa: 'سوئیس', flag: 'ch' },
-    { name: 'Turkey', fa: 'ترکیه', flag: 'tr' },
-    { name: 'United Arab Emirates', fa: 'امارات متحده عربی', flag: 'ae' },
-    { name: 'United Kingdom', fa: 'بریتانیا', flag: 'gb' },
-    { name: 'United States', fa: 'ایالات متحده آمریکا', flag: 'us' },
-    { name: 'Yemen', fa: 'یمن', flag: 'ye' },
-  ];
-
   const handleChangeSex = (e: any) => {
     setSex(e.target.value);
   };
@@ -68,43 +37,46 @@ export function PersonalInfoFields({
     setCountry(newValue ? newValue.name : '');
     setCountryError(false);
   };
+
   const handleCountryBlur = (e: React.FocusEvent<HTMLInputElement>) => {
     const inputValue = e.target.value.trim();
     const exists = countries.some((c) => c.fa === inputValue);
-    if (inputValue && !exists) {
-      setCountryError(true);
-    } else {
-      setCountryError(false);
-    }
-  };
-  const handleInputChange = (_: any, value: string) => {
-    const exists = countries.some((c) => c.fa === value.trim());
-    if (value.trim() && !exists) {
-      setCountryError(true);
-    } else {
-      setCountryError(false);
-    }
+    setCountryError(Boolean(inputValue && !exists));
   };
 
+  const handleInputChange = (_: any, value: string) => {
+    const exists = countries.some((c) => c.fa === value.trim());
+    setCountryError(Boolean(value.trim() && !exists));
+  };
+
+  const fieldSx = { width: { xs: '100%', sm: '48%', md: '48%' } };
+
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, px: 6 }}>
-      <Box sx={{ display: 'flex', gap: 2 }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        px: { xs: 2, sm: 4, md: 6 },
+      }}
+    >
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
         <TextField
           label={t('completion.name')}
           placeholder={t('completion.name')}
           variant="outlined"
-          sx={{ width: '309px' }}
+          sx={fieldSx}
         />
         <TextField
           label={t('completion.familyName')}
           placeholder={t('completion.familyName')}
           variant="outlined"
-          sx={{ width: '309px' }}
+          sx={fieldSx}
         />
       </Box>
 
-      <Box sx={{ display: 'flex', gap: 2 }}>
-        <FormControl sx={{ width: '309px' }}>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
+        <FormControl sx={fieldSx}>
           <InputLabel>{t('completion.gender')}</InputLabel>
           <Select
             value={sex}
@@ -130,11 +102,11 @@ export function PersonalInfoFields({
           label={t('completion.optionalNationalCode')}
           placeholder={t('completion.optionalNationalCode')}
           variant="outlined"
-          sx={{ width: '309px' }}
+          sx={fieldSx}
         />
       </Box>
 
-      <Box sx={{ display: 'flex', gap: 2 }}>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
         <Autocomplete
           options={countries}
           getOptionLabel={(c) => (typeof c === 'string' ? c : c.fa)}
@@ -169,15 +141,12 @@ export function PersonalInfoFields({
               onBlur={handleCountryBlur}
             />
           )}
-          sx={{ width: '309px' }}
+          sx={fieldSx}
         />
 
-        <TextField
-          label={t('completion.dateOfBirth')}
-          placeholder={t('completion.dateOfBirth')}
-          variant="outlined"
-          sx={{ width: '309px' }}
-        />
+        <Box sx={fieldSx}>
+          <DateOfBirth />
+        </Box>
       </Box>
     </Box>
   );
diff --git a/src/features/authentication/components/SubmitSection.tsx b/src/features/authentication/components/SubmitSection.tsx
index 0e1f0c5..67c0604 100644
--- a/src/features/authentication/components/SubmitSection.tsx
+++ b/src/features/authentication/components/SubmitSection.tsx
@@ -5,13 +5,30 @@ export function SubmitSection() {
   const { t } = useTranslation('completionForm');
 
   return (
-    <Box sx={{ display: 'flex', gap: 2, px: 6, mb: '17px' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: { xs: 'column', sm: 'row' },
+        alignItems: { xs: 'stretch', sm: 'center' },
+        gap: 2,
+        px: { xs: 2, sm: 4, md: 6 },
+        mb: '17px',
+      }}
+    >
       <Typography variant="body2" sx={{ flex: 1 }} color="text.primary">
         {t('completion.agreementPart1')}
-        <Link target="_blank">{t('completion.agreementLinkText')}</Link>{' '}
+        <Link target="_blank" rel="noopener" href="#">
+          {t('completion.agreementLinkText')}
+        </Link>{' '}
         {t('completion.agreementPart2')}
       </Typography>
-      <Button variant="contained" sx={{ width: '247px' }}>
+      <Button
+        variant="contained"
+        sx={{
+          width: { xs: '100%', sm: '247px' },
+          alignSelf: { xs: 'stretch', sm: 'auto' },
+        }}
+      >
         {t('completion.registerButton')}
       </Button>
     </Box>
diff --git a/src/features/authentication/components/UserCompletionForm.tsx b/src/features/authentication/components/UserCompletionForm.tsx
index 7acfdb7..a979f36 100644
--- a/src/features/authentication/components/UserCompletionForm.tsx
+++ b/src/features/authentication/components/UserCompletionForm.tsx
@@ -19,7 +19,7 @@ export function UserCompletionForm() {
   const [verificationCode, setVerificationCode] = useState('');
   const [buttonState, setButtonState] = useState<
     'default' | 'counting' | 'sent'
-  >('default'); // default | counting | sent
+  >('default');
   const [countdown, setCountdown] = useState(60);
   const [emailVerified, setEmailVerified] = useState(false);
   const [isVerifyingCode, setIsVerifyingCode] = useState(false);
@@ -32,7 +32,6 @@ export function UserCompletionForm() {
   const validPassword =
     hasNumber && hasMinLength && hasUpperAndLower && hasSpecialChar;
   const [showPasswordValidations, setShowPasswordValidations] = useState(false);
-
   const correctEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
 
   useEffect(() => {
@@ -40,9 +39,7 @@ export function UserCompletionForm() {
       if (!validPassword) {
         setShowPasswordValidations(true);
       } else {
-        const timer = setTimeout(() => {
-          setShowPasswordValidations(false);
-        }, 1000);
+        const timer = setTimeout(() => setShowPasswordValidations(false), 1000);
         return () => clearTimeout(timer);
       }
     } else {
@@ -71,8 +68,7 @@ export function UserCompletionForm() {
     if (buttonState === 'counting') {
       const minutes = String(Math.floor(countdown / 60)).padStart(2, '0');
       const seconds = String(countdown % 60).padStart(2, '0');
-      const time = `${minutes}:${seconds}`;
-      return toPersianDigits(time);
+      return toPersianDigits(`${minutes}:${seconds}`);
     }
     return t('completion.vericationCodeButton');
   };
@@ -103,41 +99,38 @@ export function UserCompletionForm() {
   return (
     <Box
       sx={{
-        backgroundColor: '#F5F5F5',
+        backgroundColor: 'background.default',
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        p: 2,
+        p: { xs: 1, sm: 2, md: 3 },
       }}
     >
       <Box
         sx={{
-          width: '730px',
-          backgroundColor: '#FFFFFF',
+          width: '100%',
+          maxWidth: '730px',
+          backgroundColor: 'background.paper',
           border: '1px solid #ccc',
           display: 'flex',
           flexDirection: 'column',
           gap: 2,
+          px: { xs: 2, sm: 4, md: 6 },
+          py: { xs: 3, sm: 4 },
         }}
       >
         <Box
           sx={{
+            display: 'flex',
             flexDirection: 'column',
-            px: 4,
             width: '100%',
-            maxWidth: '666px',
-            height: '92px',
-            mt: '32px',
+            gap: 1,
           }}
         >
-          <Typography
-            variant="h5"
-            color="text.primary"
-            sx={{ mt: '16px', px: 2 }}
-          >
+          <Typography variant="h5" color="text.primary">
             {t('completion.title')}
           </Typography>
-          <Typography variant="body2" color="text.secondary" sx={{ px: 2 }}>
+          <Typography variant="body2" color="text.secondary">
             {t('completion.description')}
           </Typography>
         </Box>
diff --git a/src/features/authentication/data/Countries.tsx b/src/features/authentication/data/Countries.tsx
new file mode 100644
index 0000000..408b7ab
--- /dev/null
+++ b/src/features/authentication/data/Countries.tsx
@@ -0,0 +1,33 @@
+// components/CountryList.ts
+export const countries = [
+  { name: 'Afghanistan', fa: 'افغانستان', flag: 'af' },
+  { name: 'Albania', fa: 'آلبانی', flag: 'al' },
+  { name: 'Algeria', fa: 'الجزایر', flag: 'dz' },
+  { name: 'Argentina', fa: 'آرژانتین', flag: 'ar' },
+  { name: 'Armenia', fa: 'ارمنستان', flag: 'am' },
+  { name: 'Australia', fa: 'استرالیا', flag: 'au' },
+  { name: 'Austria', fa: 'اتریش', flag: 'at' },
+  { name: 'Bahrain', fa: 'بحرین', flag: 'bh' },
+  { name: 'Canada', fa: 'کانادا', flag: 'ca' },
+  { name: 'China', fa: 'چین', flag: 'cn' },
+  { name: 'France', fa: 'فرانسه', flag: 'fr' },
+  { name: 'Germany', fa: 'آلمان', flag: 'de' },
+  { name: 'India', fa: 'هند', flag: 'in' },
+  { name: 'Iran', fa: 'ایران', flag: 'ir' },
+  { name: 'Iraq', fa: 'عراق', flag: 'iq' },
+  { name: 'Italy', fa: 'ایتالیا', flag: 'it' },
+  { name: 'Japan', fa: 'ژاپن', flag: 'jp' },
+  { name: 'Netherlands', fa: 'هلند', flag: 'nl' },
+  { name: 'Pakistan', fa: 'پاکستان', flag: 'pk' },
+  { name: 'Qatar', fa: 'قطر', flag: 'qa' },
+  { name: 'Russia', fa: 'روسیه', flag: 'ru' },
+  { name: 'Saudi Arabia', fa: 'عربستان سعودی', flag: 'sa' },
+  { name: 'Spain', fa: 'اسپانیا', flag: 'es' },
+  { name: 'Sweden', fa: 'سوئد', flag: 'se' },
+  { name: 'Switzerland', fa: 'سوئیس', flag: 'ch' },
+  { name: 'Turkey', fa: 'ترکیه', flag: 'tr' },
+  { name: 'United Arab Emirates', fa: 'امارات متحده عربی', flag: 'ae' },
+  { name: 'United Kingdom', fa: 'بریتانیا', flag: 'gb' },
+  { name: 'United States', fa: 'ایالات متحده آمریکا', flag: 'us' },
+  { name: 'Yemen', fa: 'یمن', flag: 'ye' },
+];
diff --git a/src/providers/CustomThemeProvider.tsx b/src/providers/CustomThemeProvider.tsx
index 29df78d..6887573 100644
--- a/src/providers/CustomThemeProvider.tsx
+++ b/src/providers/CustomThemeProvider.tsx
@@ -13,6 +13,18 @@ export const CustomThemeProvider: React.FC<{ children: React.ReactNode }> = ({
     const direction = i18n.dir(i18n.language);
 
     return createTheme({
+      components: {
+        MuiSelect: {
+          styleOverrides: {
+            root: {
+              textAlign: 'left',
+            },
+            select: {
+              textAlign: 'left',
+            },
+          },
+        },
+      },
       direction: direction,
       colorSchemes: {
         light: {