diff --git a/src/components/Modal/ConnectModal.tsx b/src/components/Modal/ConnectModal.tsx
index 86bdefde..49847ffb 100644
--- a/src/components/Modal/ConnectModal.tsx
+++ b/src/components/Modal/ConnectModal.tsx
@@ -1,4 +1,4 @@
-import MainButton from 'components/Button/MainButton'
+import ChupButton from 'components/core/Button/ChupButton'
 import Modal from 'components/Modal'
 import Spinner from 'components/Spinner'
 import CopySvg from 'images/icons/copy.svg'
@@ -262,14 +262,14 @@ export default function ConnectModal() {
                         </div>
                       </div>
                     ))}
-                    <MainButton
-                      size='medium'
+                    <ChupButton
+                      size='md'
                       className='w-fit mx-auto mt-3'
                       onClick={() => {
                         setOpen(false)
                       }}>
                       {t('Close')}
-                    </MainButton>
+                    </ChupButton>
                   </div>
                 ) : (
                   <div className='flex flex-col gap-6'>
diff --git a/src/components/pages/profile/changingPasswordModal.tsx b/src/components/pages/profile/changingPasswordModal.tsx
index 66686fb4..a23a9b52 100644
--- a/src/components/pages/profile/changingPasswordModal.tsx
+++ b/src/components/pages/profile/changingPasswordModal.tsx
@@ -1,6 +1,5 @@
 import FilledButton from 'components/Button/FilledButton'
 import OutlineTextField from 'components/Input/TextField/Outline'
-import Modal from 'components/Modal'
 import Image from 'next/image'
 import { useContext, useEffect, useRef, useState } from 'react'
 import { Context } from 'src/context'
@@ -13,6 +12,7 @@ import Eye from 'assets/images/icons/eye.svg'
 import EyeClosed from 'assets/images/icons/eye_closed.svg'
 import MainButton from 'components/Button/MainButton'
 import ChupButton from 'components/core/Button/ChupButton'
+import { Box, Modal } from '@mui/material'
 export default function ChangingPasswordModal({ open, setOpen }) {
   const [success, setSuccess] = useState(false)
   const [loading, setLoading] = useState(false)
@@ -94,81 +94,100 @@ export default function ChangingPasswordModal({ open, setOpen }) {
   }
 
   return (
-    <Modal open={open} setOpen={setOpen} hideClose={success} preventClickOutsideToClose>
-      <div className={`p-6 w-[322px] transition-all duration-300 h-auto`}>
-        <div className={` flex flex-col gap-6 transition-all duration-300 ${success ? 'opacity-0' : 'opacity-100'}`}>
-          <p className='text-center text-xl leading-6 font-bold'>{t('Change password')}</p>
-          <OutlineTextField
-            label={t('Old password')}
-            value={currentPassword}
-            onChange={setCurrentPassword}
-            placeholder={t('Enter current password')}
-            errorMsg={currentPasswordError}
-            onKeyDown={(e) => {
-              if (e.which == 13) {
-                r1.current?.focus()
-              }
-            }}
-            type='password'
-          />
-          <div>
+    <Modal
+      open={open}
+      onClose={() => !success && setOpen(false)}
+      aria-labelledby="change-password-modal"
+      aria-describedby="modal-to-change-password"
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 'auto',
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          p: 1,
+          borderRadius: 2,
+          minHeight: '400px',
+        }}
+      >
+        <div className={`p-6 w-[322px] transition-all duration-300 h-auto`}>
+          <div className={`flex flex-col gap-6 transition-all duration-300 ${success ? 'opacity-0' : 'opacity-100'}`}>
+            <p className='text-center text-xl leading-6 font-bold'>{t('Change password')}</p>
             <OutlineTextField
-              label={t('New password')}
-              value={newPassword}
-              onChange={setNewPassword}
-              type='password'
-              placeholder={t('Enter new password')}
-              inputRef={r1}
+              label={t('Old password')}
+              value={currentPassword}
+              onChange={setCurrentPassword}
+              placeholder={t('Enter current password')}
+              errorMsg={currentPasswordError}
               onKeyDown={(e) => {
                 if (e.which == 13) {
-                  r2.current?.focus()
+                  r1.current?.focus()
                 }
               }}
-            />
-            <OutlineTextField
-              label={t('Confirm new password')}
-              value={rePassword}
-              onChange={setRePassword}
               type='password'
-              trailingComponent={
-                <div className='flex items-center gap-[10px]'>
-                  {repasswordValidateSuccess ? <Image src={CheckSquare} alt='' /> : null}
-                </div>
-              }
-              errorMsg={rePasswordError}
-              inputRef={r2}
-              placeholder={t('Re-enter new password')}
             />
-          </div>
-          <ChupButton
-            size='sm'
-            disabled={!newPassword || !rePassword || !currentPassword}
-            className='w-full'
-            loading={loading}
-            onClick={changePasswordHandler}>
-            {t('Confirm')}
-          </ChupButton>
-        </div>
-        <div
-          className={`absolute inset-0 py-6 px-4 flex flex-col gap-6 transition-all duration-300 ${
-            success ? 'opacity-100' : 'opacity-0 pointer-events-none'
-          }`}>
-          <p className='text-center text-xl leading-6 font-bold'>{t('Successful password change')}!</p>
-          <Image src={SuccessImg} alt='' className='w-[188px] mx-auto max-h-[188px]' />
-          <div className='flex flex-col gap-2'>
-            <p className='text-sm leading-[18px] font-semibold text-center w-[246px] mx-auto'>
-              {t('You can use the new password to log in Punkga now')}
-            </p>
+            <div>
+              <OutlineTextField
+                label={t('New password')}
+                value={newPassword}
+                onChange={setNewPassword}
+                type='password'
+                placeholder={t('Enter new password')}
+                inputRef={r1}
+                onKeyDown={(e) => {
+                  if (e.which == 13) {
+                    r2.current?.focus()
+                  }
+                }}
+              />
+              <OutlineTextField
+                label={t('Confirm new password')}
+                value={rePassword}
+                onChange={setRePassword}
+                type='password'
+                trailingComponent={
+                  <div className='flex items-center gap-[10px]'>
+                    {repasswordValidateSuccess ? <Image src={CheckSquare} alt='' /> : null}
+                  </div>
+                }
+                errorMsg={rePasswordError}
+                inputRef={r2}
+                placeholder={t('Re-enter new password')}
+              />
+            </div>
             <ChupButton
+              size='sm'
+              disabled={!newPassword || !rePassword || !currentPassword}
               className='w-full'
-              onClick={() => {
-                setOpen(false)
-              }}>
-              {t('Continue')}
+              loading={loading}
+              onClick={changePasswordHandler}>
+              {t('Confirm')}
             </ChupButton>
           </div>
+          <div
+            className={`absolute inset-0 py-6 px-4 flex flex-col gap-6 transition-all duration-300 ${success ? 'opacity-100' : 'opacity-0 pointer-events-none'
+              }`}>
+            <p className='text-center text-xl leading-6 font-bold'>{t('Successful password change')}!</p>
+            <Image src={SuccessImg} alt='' className='w-[188px] mx-auto max-h-[188px]' />
+            <div className='flex flex-col gap-2'>
+              <p className='text-sm leading-[18px] font-semibold text-center w-[246px] mx-auto'>
+                {t('You can use the new password to log in Punkga now')}
+              </p>
+              <ChupButton
+                className='w-full'
+                onClick={() => {
+                  setOpen(false)
+                }}>
+                {t('Continue')}
+              </ChupButton>
+            </div>
+          </div>
         </div>
-      </div>
+      </Box>
     </Modal>
   )
 }
diff --git a/src/components/pages/profile/newInfo.tsx b/src/components/pages/profile/newInfo.tsx
index c444bd3f..b2f99545 100644
--- a/src/components/pages/profile/newInfo.tsx
+++ b/src/components/pages/profile/newInfo.tsx
@@ -26,6 +26,13 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
   },
 }));
 
+function formatDate(dateString) {
+  if (!dateString) return '';
+
+  const [year, month, day] = dateString.split('/');
+  return `${day}/${month}/${year}`;
+}
+
 export default function NewInfo() {
   const router = useRouter()
   const { account, getProfile } = useContext(Context)
@@ -200,7 +207,7 @@ export default function NewInfo() {
               <div>{t(account.gender)}</div>
               <div>{account.gender ? '•' : ''}</div>
               <div>
-                {account?.birthdate ? account.birthdate.replace(/-/g, '/') : ''}
+                {account?.birthdate ? formatDate(account.birthdate.replace(/-/g, '/')) : ''}
               </div>
 
             </div>
diff --git a/src/components/pages/profile/settingPasswordModal.tsx b/src/components/pages/profile/settingPasswordModal.tsx
index 0bef3080..6ac68b7e 100644
--- a/src/components/pages/profile/settingPasswordModal.tsx
+++ b/src/components/pages/profile/settingPasswordModal.tsx
@@ -1,7 +1,5 @@
-import FilledButton from 'components/Button/FilledButton'
-import MainButton from 'components/Button/MainButton'
+import { Box, Modal } from '@mui/material'
 import OutlineTextField from 'components/Input/TextField/Outline'
-import Modal from 'components/Modal'
 import ChupButton from 'components/core/Button/ChupButton'
 import SuccessImg from 'images/Mascot2.png'
 import CheckSquare from 'images/icons/check_square_fill.svg'
@@ -72,60 +70,79 @@ export default function SettingPasswordModal({ open, setOpen, profile }) {
   }
 
   return (
-    <Modal open={open} setOpen={setOpen} hideClose={success} preventClickOutsideToClose>
-      <div className={`p-6 w-[322px] transition-all duration-300 h-auto`}>
-        <div className={` flex flex-col gap-6 transition-all duration-300 ${success ? 'opacity-0' : 'opacity-100'}`}>
-          <p className='text-center text-xl leading-6 font-bold'>{t('Set password')}</p>
-          <div>
-            <OutlineTextField
-              label={t('New password')}
-              value={newPassword}
-              onChange={setNewPassword}
-              type='password'
-              placeholder={t('Enter new password')}
-              onKeyDown={(e) => {
-                if (e.which == 13) {
-                  r1.current?.focus()
+    <Modal
+      open={open}
+      onClose={() => !success && setOpen(false)}
+      aria-labelledby="change-password-modal"
+      aria-describedby="modal-to-change-password"
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 'auto',
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          p: 1,
+          borderRadius: 2,
+          minHeight: '400px',
+        }}
+      >
+        <div className={`p-6 w-[322px] transition-all duration-300 h-auto`}>
+          <div className={` flex flex-col gap-6 transition-all duration-300 ${success ? 'opacity-0' : 'opacity-100'}`}>
+            <p className='text-center text-xl leading-6 font-bold'>{t('Set password')}</p>
+            <div>
+              <OutlineTextField
+                label={t('New password')}
+                value={newPassword}
+                onChange={setNewPassword}
+                type='password'
+                placeholder={t('Enter new password')}
+                onKeyDown={(e) => {
+                  if (e.which == 13) {
+                    r1.current?.focus()
+                  }
+                }}
+              />
+              <OutlineTextField
+                label={t('Confirm new password')}
+                value={rePassword}
+                onChange={setRePassword}
+                type='password'
+                trailingComponent={
+                  <div className='flex items-center gap-[10px]'>
+                    {repasswordValidateSuccess ? <Image src={CheckSquare} alt='' /> : null}
+                  </div>
                 }
-              }}
-            />
-            <OutlineTextField
-              label={t('Confirm new password')}
-              value={rePassword}
-              onChange={setRePassword}
-              type='password'
-              trailingComponent={
-                <div className='flex items-center gap-[10px]'>
-                  {repasswordValidateSuccess ? <Image src={CheckSquare} alt='' /> : null}
-                </div>
-              }
-              errorMsg={rePasswordError}
-              placeholder={t('Re-enter new password')}
-              inputRef={r1}
-            />
+                errorMsg={rePasswordError}
+                placeholder={t('Re-enter new password')}
+                inputRef={r1}
+              />
+            </div>
+            <ChupButton size='sm' className='w-full' disabled={!newPassword || !rePassword} loading={loading} onClick={setPasswordHandler}>
+              {t('Confirm')}
+            </ChupButton>
+          </div>
+          <div
+            className={`absolute inset-0 py-6 px-4 flex flex-col gap-4 transition-all duration-300 ${success ? 'opacity-100' : 'opacity-0 pointer-events-none'
+              }`}>
+            <p className='text-center text-xl leading-6 font-bold'>{t('Password set')}!</p>
+            <Image src={SuccessImg} alt='' className='mx-auto max-h-[188px] w-[188px]' />
+            <p className='text-sm leading-[18px] font-semibold text-center w-[274px] mx-auto text-[#414141]'>
+              {t('You can use the new password to log in Punkga now')}
+            </p>
+            <ChupButton
+              className='w-full'
+              onClick={() => {
+                setOpen(false)
+              }}>
+              {t('Confirm')}
+            </ChupButton>
           </div>
-          <ChupButton size='sm' className='w-full' disabled={!newPassword || !rePassword} loading={loading} onClick={setPasswordHandler}>
-            {t('Confirm')}
-          </ChupButton>
-        </div>
-        <div
-          className={`absolute inset-0 py-6 px-4 flex flex-col gap-4 transition-all duration-300 ${
-            success ? 'opacity-100' : 'opacity-0 pointer-events-none'
-          }`}>
-          <p className='text-center text-xl leading-6 font-bold'>{t('Password set')}!</p>
-          <Image src={SuccessImg} alt='' className='mx-auto max-h-[188px] w-[188px]' />
-          <p className='text-sm leading-[18px] font-semibold text-center w-[274px] mx-auto text-[#414141]'>
-            {t('You can use the new password to log in Punkga now')}
-          </p>
-          <ChupButton
-            className='w-full'
-            onClick={() => {
-              setOpen(false)
-            }}>
-            {t('Confirm')}
-          </ChupButton>
         </div>
-      </div>
+      </Box>
     </Modal>
   )
 }