diff --git a/package-lock.json b/package-lock.json
index c17eb2b..160ecd2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@headlessui/react": "^2.2.0",
+        "@material-tailwind/react": "^2.1.10",
         "@tanstack/react-query": "^5.62.8",
         "formik": "^2.4.6",
         "i18next": "^24.2.0",
@@ -364,6 +365,23 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.24.0",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz",
@@ -1121,6 +1139,168 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@material-tailwind/react": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@material-tailwind/react/-/react-2.1.10.tgz",
+      "integrity": "sha512-xGU/mLDKDBp/qZ8Dp2XR7fKcTpDuFeZEBqoL9Bk/29kakKxNxjUGYSRHEFLsyOFf4VIhU6WGHdIS7tOA3QGJHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "0.19.0",
+        "classnames": "2.3.2",
+        "deepmerge": "4.2.2",
+        "framer-motion": "6.5.1",
+        "material-ripple-effects": "2.0.1",
+        "prop-types": "15.8.1",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "tailwind-merge": "1.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/@floating-ui/react": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.19.0.tgz",
+      "integrity": "sha512-fgYvN4ksCi5OvmPXkyOT8o5a8PSKHMzPHt+9mR6KYWdF16IAjWRLZPAAziI2sznaWT23drRFrYw64wdvYqqaQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^1.2.2",
+        "aria-hidden": "^1.1.3",
+        "tabbable": "^6.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/@floating-ui/react-dom": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-1.3.0.tgz",
+      "integrity": "sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/tailwind-merge": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.8.1.tgz",
+      "integrity": "sha512-+fflfPxvHFr81hTJpQ3MIwtqgvefHZFUHFiIHpVIRXvG/nX9+gu2P7JNlFu2bfDMJ+uHhi/pUgzaYacMoXv+Ww==",
+      "license": "MIT"
+    },
+    "node_modules/@motionone/animation": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.18.0.tgz",
+      "integrity": "sha512-9z2p5GFGCm0gBsZbi8rVMOAJCtw1WqBTIPw3ozk06gDvZInBPIsQcHgYogEJ4yuHJ+akuW8g1SEIOpTOvYs8hw==",
+      "license": "MIT",
+      "dependencies": {
+        "@motionone/easing": "^10.18.0",
+        "@motionone/types": "^10.17.1",
+        "@motionone/utils": "^10.18.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/dom": {
+      "version": "10.12.0",
+      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
+      "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@motionone/animation": "^10.12.0",
+        "@motionone/generators": "^10.12.0",
+        "@motionone/types": "^10.12.0",
+        "@motionone/utils": "^10.12.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/easing": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.18.0.tgz",
+      "integrity": "sha512-VcjByo7XpdLS4o9T8t99JtgxkdMcNWD3yHU/n6CLEz3bkmKDRZyYQ/wmSf6daum8ZXqfUAgFeCZSpJZIMxaCzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@motionone/utils": "^10.18.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/generators": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.18.0.tgz",
+      "integrity": "sha512-+qfkC2DtkDj4tHPu+AFKVfR/C30O1vYdvsGYaR13W/1cczPrrcjdvYCj0VLFuRMN+lP1xvpNZHCRNM4fBzn1jg==",
+      "license": "MIT",
+      "dependencies": {
+        "@motionone/types": "^10.17.1",
+        "@motionone/utils": "^10.18.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/types": {
+      "version": "10.17.1",
+      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.17.1.tgz",
+      "integrity": "sha512-KaC4kgiODDz8hswCrS0btrVrzyU2CSQKO7Ps90ibBVSQmjkrt2teqta6/sOG59v7+dPnKMAg13jyqtMKV2yJ7A==",
+      "license": "MIT"
+    },
+    "node_modules/@motionone/utils": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.18.0.tgz",
+      "integrity": "sha512-3XVF7sgyTSI2KWvTf6uLlBJ5iAgRgmvp3bpuOiQJvInd4nZ19ET8lX5unn30SlmRH7hXbBbH+Gxd0m0klJ3Xtw==",
+      "license": "MIT",
+      "dependencies": {
+        "@motionone/types": "^10.17.1",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2025,6 +2205,18 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/attr-accept": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
@@ -2245,6 +2437,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
+      "license": "MIT"
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2843,6 +3041,36 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
+        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/framesync": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
+      "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2981,6 +3209,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==",
+      "license": "MIT"
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -3351,6 +3585,12 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/material-ripple-effects": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/material-ripple-effects/-/material-ripple-effects-2.0.1.tgz",
+      "integrity": "sha512-hHlUkZAuXbP94lu02VgrPidbZ3hBtgXBtjlwR8APNqOIgDZMV8MCIcsclL8FmGJQHvnORyvoQgC965vPsiyXLQ==",
+      "license": "MIT"
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3650,6 +3890,18 @@
         "node": ">= 6"
       }
     },
+    "node_modules/popmotion": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
+      "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+      "license": "MIT",
+      "dependencies": {
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.49",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
@@ -4362,6 +4614,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-value-types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
+      "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+      "license": "MIT",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
diff --git a/package.json b/package.json
index a48b4db..02cc76c 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.2.0",
+    "@material-tailwind/react": "^2.1.10",
     "@tanstack/react-query": "^5.62.8",
     "formik": "^2.4.6",
     "i18next": "^24.2.0",
diff --git a/src/assets/images/avatar_image.png b/src/assets/images/avatar_image.png
new file mode 100644
index 0000000..96000aa
Binary files /dev/null and b/src/assets/images/avatar_image.png differ
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 6170fee..4d0a614 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -23,7 +23,7 @@ const Select: FC<Props> = (props: Props) => {
                 </label>
             }
             <select {...props} className={clx(
-                'w-full text-black block border-border px-2.5 h-10 text-sm rounded-2.5 bg-gray',
+                'w-full text-black block border border-border px-2.5 h-10 text-sm rounded-2.5 bg-gray',
                 props.className,
                 props.label && 'mt-1'
             )}>
diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
index 406d495..65ad8ce 100644
--- a/src/components/Textarea.tsx
+++ b/src/components/Textarea.tsx
@@ -12,7 +12,7 @@ const Textarea: FC<Props> = (props: Props) => {
             </label>
 
             <textarea
-                className='border border-border w-full rounded-xl px-4 py-3 min-h-[100px] mt-1 text-xs'
+                className='border border-border leading-7 w-full rounded-xl px-4 py-3 min-h-[100px] mt-1 text-xs'
                 {...props}
             >
 
diff --git a/src/index.css b/src/index.css
index 9a83d1b..cba4ead 100644
--- a/src/index.css
+++ b/src/index.css
@@ -72,6 +72,9 @@ tbody tr {
 .dltr {
   direction: ltr;
 }
+.drtl {
+  direction: rtl;
+}
 .otp div {
   width: 100%;
 }
diff --git a/src/langs/fa.json b/src/langs/fa.json
index 21601a0..a12bf1b 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -229,6 +229,24 @@
     "natification": "اعلان ها"
   },
   "profile": {
-    "account_user": "حساب کاربری"
-  }
+    "account_user": "حساب کاربری",
+    "image_profile": "تصویر حساب کاربری",
+    "image_profile_desc": "تصویر خود را در حساب کاربری قرار دهید.",
+    "upload_image": "آپلود تصویر",
+    "format_image": "فرمت های jpg, png,jpeg.حداکثر ۱مگابایت",
+    "info_account": "اطلاعات حساب",
+    "auth_after_change_info": "در صورت تغییر اطلاعات حساب باید مجددا احراز هویت انجام شود.",
+    "username": "نام کاربری",
+    "phone_call": "شماره تماس",
+    "personal_information": "اطلاعات شخصی",
+    "enter_carefully_your_information": "اطلاعت شخصی خود را با دقت وارد کنید.",
+    "date_of_birth": "تاریخ تولد",
+    "national_code": "کد ملی",
+    "address": "آدرس",
+    "address_live": "آدرس محل سکونت خود را با دقت وارد کنید",
+    "province": "استان",
+    "city": "شهر",
+    "postal_code": "کد پستی"
+  },
+  "email": "ایمیل"
 }
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
index 27f9f50..acfb901 100644
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -7,6 +7,8 @@ import TitleLine from '../../components/TitleLine'
 import AccessbilityImage from '../../assets/images/accessbility.jpg'
 import BoxNewAccessbility from './components/BoxNewAccessbility'
 import DanakLearning from './components/DanakLearning'
+import { Carousel } from "@material-tailwind/react";
+
 
 const Home: FC = () => {
 
@@ -15,29 +17,54 @@ const Home: FC = () => {
     return (
         <div className='w-full flex gap-6'>
             <div className='flex-1'>
-                <div className='relative'>
-                    <img src={BannerImage} className='w-full rounded-3xl' />
-                    <div className='absolute  size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
-                        <button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
-                            {t('home.new')}
-                        </button>
-
-                        <div className='max-w-[340px] font-medium text-white text-lg leading-10'>
-                            <div>
-                                سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
-                            </div>
-                            <div className='mt-3 text-border text-xs'>
-                                ۸ دقیقه مطالعه
-                            </div>
-                            <button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
-                                <div>
-                                    {t('home.study')}
-                                </div>
-                                <ArrowLeft size={14} color='white' />
+                <Carousel autoplay className="rounded-xl h-fit dltr" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
+                    <div className='relative drtl'>
+                        <img src={BannerImage} className='w-full rounded-3xl' />
+                        <div className='absolute  size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
+                            <button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
+                                {t('home.new')}
                             </button>
+
+                            <div className='max-w-[340px] font-medium text-white text-lg leading-10'>
+                                <div>
+                                    سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
+                                </div>
+                                <div className='mt-3 text-border text-xs'>
+                                    ۸ دقیقه مطالعه
+                                </div>
+                                <button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
+                                    <div>
+                                        {t('home.study')}
+                                    </div>
+                                    <ArrowLeft size={14} color='white' />
+                                </button>
+                            </div>
                         </div>
                     </div>
-                </div>
+                    <div className='relative drtl'>
+                        <img src={BannerImage} className='w-full rounded-3xl' />
+                        <div className='absolute  size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
+                            <button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
+                                {t('home.new')}
+                            </button>
+
+                            <div className='max-w-[340px] font-medium text-white text-lg leading-10'>
+                                <div>
+                                    سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
+                                </div>
+                                <div className='mt-3 text-border text-xs'>
+                                    ۸ دقیقه مطالعه
+                                </div>
+                                <button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
+                                    <div>
+                                        {t('home.study')}
+                                    </div>
+                                    <ArrowLeft size={14} color='white' />
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </Carousel>
 
                 <div className='mt-8 text-sm flex gap-6 items-center'>
                     <ItemDashboard
diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
index 77621d5..1dfa7c0 100644
--- a/src/pages/profile/Profile.tsx
+++ b/src/pages/profile/Profile.tsx
@@ -1,19 +1,174 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import AvatarImage from '../../assets/images/avatar_image.png'
+import Button from '../../components/Button'
+import { DocumentUpload, Edit } from 'iconsax-react'
+import Input from '../../components/Input'
+import DatePickerComponent from '../../components/DatePicker'
+import Select from '../../components/Select'
+import Textarea from '../../components/Textarea'
 
 const Profile: FC = () => {
 
     const { t } = useTranslation('global')
 
     return (
-        <div className='mt-4'>
+        <div className='mt-4 '>
             <div>
                 {t('profile.account_user')}
             </div>
 
-            <div className='bg-white rounded-3xl p-6 mt-8'>
-                <div className='mt-10 flex items-center'>
+            <div className='bg-white rounded-3xl p-6 mt-8 text-sm'>
+                <div className='mt-10 flex items-center border-b pb-7'>
+                    <div className='flex-1'>
+                        <div>
+                            {t('profile.image_profile')}
+                        </div>
+                        <div className='text-description text-xs mt-2'>
+                            {t('profile.image_profile_desc')}
+                        </div>
+                    </div>
+                    <div className='flex-1 flex gap-6'>
+                        <img src={AvatarImage} className='size-20 rounded-full object-cover' />
+                        <div>
+                            <Button
+                                className='w-[160px]'
+                            >
+                                <div className='flex items-center gap-3'>
+                                    <DocumentUpload color='white' size={18} />
+                                    <div>{t('profile.upload_image')}</div>
+                                </div>
+                            </Button>
+                            <p className='mt-3 text-description'>
+                                {t('profile.format_image')}
+                            </p>
+                        </div>
+                    </div>
+                </div>
 
+                <div className='mt-8 flex border-b pb-7'>
+                    <div className='flex-1'>
+                        <div>
+                            {t('profile.info_account')}
+                        </div>
+                        <div className='text-description text-xs mt-2'>
+                            {t('profile.auth_after_change_info')}
+                        </div>
+                    </div>
+                    <div className='flex-1 '>
+                        <div className='flex items-end gap-6'>
+                            <Input
+                                label={t('profile.username')}
+                                value={'mehrdad'}
+                                readOnly
+                            />
+                            <div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
+                                <Edit size={18} color='#0047FF' />
+                                <div>
+                                    {t('edit')}
+                                </div>
+                            </div>
+                        </div>
+                        <div className='flex items-end gap-6 mt-7'>
+                            <Input
+                                label={t('email')}
+                                value={'info@example.com'}
+                                readOnly
+                            />
+                            <div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
+                                <Edit size={18} color='#0047FF' />
+                                <div>
+                                    {t('edit')}
+                                </div>
+                            </div>
+                        </div>
+                        <div className='flex items-end gap-6 mt-7'>
+                            <Input
+                                label={t('profile.phone_call')}
+                                value={'۰۹۱۲۹۲۸۳۳۹۵'}
+                                readOnly
+                            />
+                            <div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
+                                <Edit size={18} color='#0047FF' />
+                                <div>
+                                    {t('edit')}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='mt-8 flex border-b pb-7'>
+                    <div className='flex-1'>
+                        <div>
+                            {t('profile.personal_information')}
+                        </div>
+                        <div className='text-description text-xs mt-2'>
+                            {t('profile.enter_carefully_your_information')}
+                        </div>
+                    </div>
+                    <div className='flex-1'>
+                        <DatePickerComponent
+                            label={t('profile.date_of_birth')}
+                            onChange={() => { }}
+                            placeholder=''
+                            defaulValue='1400-01-01'
+                        />
+
+                        <div className='mt-7'>
+                            <Input
+                                label={t('profile.national_code')}
+                                value={'۰۰۱۲۳۴۵۳۴۴'}
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div className='mt-8 flex'>
+                    <div className='flex-1'>
+                        <div>
+                            {t('profile.address')}
+                        </div>
+                        <div className='text-description text-xs mt-2'>
+                            {t('profile.address_live')}
+                        </div>
+                    </div>
+                    <div className='flex-1'>
+                        <div className='rowTwoInput'>
+                            <Select
+                                label={t('profile.province')}
+                                items={[
+                                    {
+                                        label: 'تهران',
+                                        value: 'tehran'
+                                    }
+                                ]}
+                                className='bg-white border'
+                            />
+                            <Select
+                                label={t('profile.city')}
+                                items={[
+                                    {
+                                        label: 'تهران',
+                                        value: 'tehran'
+                                    }
+                                ]}
+                            />
+                        </div>
+
+                        <div className='mt-7'>
+                            <Input
+                                label={t('profile.postal_code')}
+                                value={'۱۲۳۴۵۶۷۸'}
+                            />
+                        </div>
+                        <div className='mt-7'>
+                            <Textarea
+                                label={t('profile.address')}
+                                value={'للورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک استورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است'}
+                            />
+                        </div>
+                    </div>
                 </div>
             </div>
 
diff --git a/src/router/Main.tsx b/src/router/Main.tsx
index 6203db7..74570c9 100644
--- a/src/router/Main.tsx
+++ b/src/router/Main.tsx
@@ -24,23 +24,25 @@ const MainRouter: FC = () => {
             <SideBar />
             <Header />
             <div className='flex-1 ms-[269px] mt-[81px]'>
-                <div className=' overflow-auto h-[calc(100vh-113px)] '>
-                    <Routes>
-                        <Route path={Pages.dashboard} element={<Home />} />
-                        <Route path={Pages.services.mine} element={<MyServices />} />
-                        <Route path={Pages.ticket.list} element={<TicketList />} />
-                        <Route path={Pages.ticket.create} element={<CreateTicket />} />
-                        <Route path={Pages.ticket.detail + ':id'} element={<TicketDetail />} />
-                        <Route path={Pages.transactions} element={<TransactionList />} />
-                        <Route path={Pages.receipts.index} element={<ReceiptsList />} />
-                        <Route path={Pages.receipts.detail + ':id'} element={<ReceiptsDetail />} />
-                        <Route path={Pages.announcement} element={<AnnouncementtList />} />
-                        <Route path={Pages.criticisms} element={<AddCriticisms />} />
-                        <Route path={Pages.learning} element={<LearningList />} />
-                        <Route path={Pages.setting} element={<Setting />} />
-                        <Route path={Pages.wallet} element={<Wallet />} />
-                        <Route path={Pages.profile} element={<Profile />} />
-                    </Routes>
+                <div className={`overflow-auto sticky w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`}>
+                    <div>
+                        <Routes>
+                            <Route path={Pages.dashboard} element={<Home />} />
+                            <Route path={Pages.services.mine} element={<MyServices />} />
+                            <Route path={Pages.ticket.list} element={<TicketList />} />
+                            <Route path={Pages.ticket.create} element={<CreateTicket />} />
+                            <Route path={Pages.ticket.detail + ':id'} element={<TicketDetail />} />
+                            <Route path={Pages.transactions} element={<TransactionList />} />
+                            <Route path={Pages.receipts.index} element={<ReceiptsList />} />
+                            <Route path={Pages.receipts.detail + ':id'} element={<ReceiptsDetail />} />
+                            <Route path={Pages.announcement} element={<AnnouncementtList />} />
+                            <Route path={Pages.criticisms} element={<AddCriticisms />} />
+                            <Route path={Pages.learning} element={<LearningList />} />
+                            <Route path={Pages.setting} element={<Setting />} />
+                            <Route path={Pages.wallet} element={<Wallet />} />
+                            <Route path={Pages.profile} element={<Profile />} />
+                        </Routes>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/shared/Header.tsx b/src/shared/Header.tsx
index a294377..0c855b3 100644
--- a/src/shared/Header.tsx
+++ b/src/shared/Header.tsx
@@ -28,7 +28,9 @@ const Header: FC = () => {
                 <Notifications />
                 <div className='flex gap-2 items-center'>
                     <div className='size-7 rounded-full bg-description overflow-hidden'>
-                        <img src={AvatarImage} className='size-full object-cover' />
+                        <Link to={Pages.profile}>
+                            <img src={AvatarImage} className='size-full object-cover' />
+                        </Link>
                     </div>
                     <div className='flex gap-1 items-center'>
                         <div className='text-xs'>مهرداد مظفری</div>
diff --git a/tailwind.config.js b/tailwind.config.js
index d79a7b3..d6b1a10 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,7 @@
+const withMT = require("@material-tailwind/react/utils/withMT");
+
 /** @type {import('tailwindcss').Config} */
-export default {
+module.exports = withMT({
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
@@ -20,4 +22,4 @@ export default {
     },
   },
   plugins: [],
-}
\ No newline at end of file
+})
\ No newline at end of file