fix: sidebar style

.npmrc

@@ -0,0 +1,2 @@
+@rkheftan:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=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

package-lock.json

@@ -12,7 +12,7 @@
         "@emotion/styled": "^11.14.1",
         "@mui/material": "^7.2.0",
         "@mui/stylis-plugin-rtl": "^7.2.0",
-        "@rkheftan/harmony-ui": "^0.1.2",
+        "@rkheftan/harmony-ui": "^0.1.4",
         "i18next": "^25.3.0",
         "i18next-browser-languagedetector": "^8.2.0",
         "i18next-http-backend": "^3.0.2",
@@ -1739,9 +1739,9 @@
       }
     },
     "node_modules/@rkheftan/harmony-ui": {
-      "version": "0.1.2",
+      "version": "0.1.4",
-      "resolved": "https://npm.pkg.github.com/download/@rkheftan/harmony-ui/0.1.2/75290c938c36fe3cfe5f334b997192c0503ceb29",
+      "resolved": "https://npm.pkg.github.com/download/@rkheftan/harmony-ui/0.1.4/01829061a531171f16aa92ac2c006d2553254797",
-      "integrity": "sha512-0yM5E2ptuWKvlR3Skk/9tuDaoQue0Hdr9g7ycsKtM1TBsh6011IiewKCA/drPcPc7CbmYDIvrU03mpA77lUFXw==",
+      "integrity": "sha512-hxwhuBfiHqaJpFC75s0/l+pUChE4gzr+ynZ4Wl/wCI4pdFvwQuTh6BrSl4LotfTKO6v0cK8Ii9brEX3Yr7bXBA==",
       "peerDependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",

package.json

@@ -15,7 +15,7 @@
     "@emotion/styled": "^11.14.1",
     "@mui/material": "^7.2.0",
     "@mui/stylis-plugin-rtl": "^7.2.0",
-    "@rkheftan/harmony-ui": "^0.1.2",
+    "@rkheftan/harmony-ui": "^0.1.4",
     "i18next": "^25.3.0",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",

public/locales/en/profileSetting.json

@@ -37,6 +37,7 @@
     "uploadPicture": "Upload image",
     "phoneNumberText": "Your new contact number will replace your previous contact number.",
     "verb": ".",
-    "notDetermined": "Not determined"
+    "notDetermined": "Not determined",
+    "successfulChangePhone": "Phone number changed successfully"
   }
 }

public/locales/en/security.json

@@ -12,6 +12,11 @@
     "hasUpperAndLower": "Contains a lowercase and uppercase letter",
     "hasSpecialChar": "Contains sign (!@#$%^&*)",
     "notCompatibility": "Confirm password is not the same as password.",
-    "alertSuccess": "Password has successfully changed"
+    "alertSuccess": "Password has successfully changed",
+    "lastChange": "Last change a few seconds ago",
+    "activePassword": "Password is active",
+    "recentLogins": "Recent logins",
+    "description": "In this section, you can see the recent logins to your Harmony account.",
+    "currentDevice": "Current device"
   }
 }

public/locales/fa/security.json

@@ -17,6 +17,9 @@
     "activePassword": "رمز عبور فعال است",
     "recentLogins": "ورود های اخیر",
     "description": "در این بخش از ورود های اخیر به اکانت هارمونی خود را مشاهده می کنید",
-    "currentDevice": "دستگاه فعلی"
+    "currentDevice": "دستگاه فعلی",
+    "changePassword": "تغییر رمز عبور",
+    "currentPassword": "رمز عبور فعلی",
+    "forgetPassword": "رمز عبور را فراموش کرده اید؟"
   }
 }

src/features/profile/components/activeDevices/ActiveDevices.tsx

@@ -86,7 +86,7 @@ export function ActiveDevices() {
             flex: 1,
           }}
         >
-          <Box sx={{ width: '100%', maxWidth: '754px', px: 4 }}>
+          <Box sx={{ width: '100%', maxWidth: '754px' }}>
             {devices.map((device) => (
               <Box
                 key={device.id}
@@ -99,7 +99,7 @@ export function ActiveDevices() {
               >
                 <Typography
                   variant="body2"
-                  sx={{ width: { xs: '100%', sm: '172.5px' } }}
+                  sx={{ width: { xs: '100%', sm: '138px' } }}
                 >
                   {device.timeAndDate}
                 </Typography>
@@ -107,7 +107,7 @@ export function ActiveDevices() {
                   sx={{
                     display: 'flex',
                     alignItems: 'center',
-                    width: { xs: '100%', sm: '172.5px' },
+                    width: { xs: '100%', sm: '138px' },
                     gap: 1,
                   }}
                 >
@@ -122,13 +122,13 @@ export function ActiveDevices() {
                 </Box>
                 <Typography
                   variant="body2"
-                  sx={{ width: { xs: '100%', sm: '172.5px' } }}
+                  sx={{ width: { xs: '100%', sm: '138px' } }}
                 >
                   {device.ip}
                 </Typography>
                 <Box
                   sx={{
-                    width: { xs: '100%', sm: '172.5px' },
+                    width: { xs: '100%', sm: '138px' },
                     textAlign: { xs: 'left', sm: 'center' },
                   }}
                 >
@@ -142,7 +142,7 @@ export function ActiveDevices() {
                         height: '30px',
                         whiteSpace: 'nowrap',
                         color: 'success.main',
-                        width: '93px',
+                        // width: '93px',
                         textTransform: 'none',
                       }}
                     >
@@ -152,7 +152,7 @@ export function ActiveDevices() {
                 </Box>
                 <Box
                   sx={{
-                    width: { xs: '100%', sm: '172.5px' },
+                    width: { xs: '100%', sm: '138px' },
                     textAlign: { xs: 'left', sm: 'center' },
                   }}
                 >
@@ -163,7 +163,7 @@ export function ActiveDevices() {
                     disabled={device.current}
                     sx={{
                       color: 'error.main',
-                      width: '80%',
+                      // width: '80%',
                       minWidth: 0,
                       borderRadius: '15px',
                       borderColor: 'error.main',

src/features/profile/components/security/PasswordSecurity.tsx

@@ -9,11 +9,12 @@ import {
   DialogActions,
   IconButton,
   useMediaQuery,
+  Link,
 } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { useState, useEffect } from 'react';
-import { CloseSquare, Refresh } from 'iconsax-react';
+import { CloseCircle, Refresh } from 'iconsax-react';
 import { PasswordValidationItem } from './PasswordValidation';
 import { Toast } from '@/components/Toast';
 import Logo from '@/components/Logo';
@@ -26,6 +27,7 @@ export function PasswordSecurity() {
   const [open, setOpen] = useState(false);
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
+  const [currentPassword, setCurrentPassword] = useState('');
   const [showValidation, setShowValidation] = useState(false);
   const [showPasswordAlert, setShowPasswordAlert] = useState(false);
   const [changePassword, setChangePassword] = useState(false);
@@ -50,6 +52,7 @@ export function PasswordSecurity() {
       handleClose();
       setPassword('');
       setConfirmPassword('');
+      setCurrentPassword('');
     }, 1500);
   };
 
@@ -83,19 +86,35 @@ export function PasswordSecurity() {
         title={t('securityForm.password')}
         subtitle={t('securityForm.determinePassword')}
         action={
-          <Button
+          changePassword ? (
-            variant="outlined"
+            <Button
-            onClick={handleOpen}
+              variant="outlined"
-            sx={{
+              onClick={handleOpen}
-              mt: { xs: 2, sm: 0 },
+              sx={{
-              backgroundColor: 'primary.main',
+                mt: { xs: 2, sm: 0 },
-              color: 'background.paper',
+                backgroundColor: 'primary.main',
-              width: { xs: '100%', sm: '142px' },
+                color: 'background.paper',
-              textTransform: 'none',
+                width: { xs: '100%', sm: '142px' },
-            }}
+                textTransform: 'none',
-          >
+              }}
-            {t('securityForm.addPassword')}
+            >
-          </Button>
+              {t('securityForm.changePassword')}
+            </Button>
+          ) : (
+            <Button
+              variant="outlined"
+              onClick={handleOpen}
+              sx={{
+                mt: { xs: 2, sm: 0 },
+                backgroundColor: 'primary.main',
+                color: 'background.paper',
+                width: { xs: '100%', sm: '142px' },
+                textTransform: 'none',
+              }}
+            >
+              {t('securityForm.addPassword')}
+            </Button>
+          )
         }
       >
         <Box
@@ -142,70 +161,142 @@ export function PasswordSecurity() {
             <DialogTitle sx={{ p: 2 }}>
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 <IconButton onClick={handleClose}>
-                  <CloseSquare size={24} color="#82B1FF" />
+                  <CloseCircle size={24} color="#82B1FF" />
                 </IconButton>
                 <Typography variant="h6" fontWeight="bold">
                   {t('securityForm.addPassword')}
                 </Typography>
               </Box>
             </DialogTitle>
+            {changePassword ? (
+              <DialogContent
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 2,
+                  px: { xs: 2, sm: 3 },
+                }}
+              >
+                <TextField
+                  label={t('securityForm.currentPassword')}
+                  fullWidth
+                  value={currentPassword}
+                  onChange={(e) => setCurrentPassword(e.target.value)}
+                  sx={{
+                    '& .MuiOutlinedInput-root': { borderRadius: 2 },
+                    mt: 2,
+                  }}
+                />
+                <Link sx={{ fontSize: '15px' }}>
+                  {t('securityForm.forgetPassword')}
+                </Link>
+                <TextField
+                  label={t('securityForm.newPassword')}
+                  type="password"
+                  fullWidth
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
+                />
 
-            <DialogContent
+                {password && showValidation && (
-              sx={{
+                  <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-                display: 'flex',
+                    <Box sx={{ maxWidth: '364px', width: '100%' }}>
-                flexDirection: 'column',
+                      <PasswordValidationItem
-                gap: 2,
+                        isValid={hasNumber}
-                px: { xs: 2, sm: 3 },
+                        label={t('securityForm.hasNumber')}
-              }}
+                      />
-            >
+                      <PasswordValidationItem
-              <TextField
+                        isValid={hasMinLength}
-                label={t('securityForm.newPassword')}
+                        label={t('securityForm.hasMinLength')}
-                type="password"
+                      />
-                fullWidth
+                      <PasswordValidationItem
-                value={password}
+                        isValid={hasUpperAndLower}
-                onChange={(e) => setPassword(e.target.value)}
+                        label={t('securityForm.hasUpperAndLower')}
-                sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
+                      />
-              />
+                      <PasswordValidationItem
-
+                        isValid={hasSpecialChar}
-              {password && showValidation && (
+                        label={t('securityForm.hasSpecialChar')}
-                <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                      />
-                  <Box sx={{ maxWidth: '364px', width: '100%' }}>
+                    </Box>
-                    <PasswordValidationItem
-                      isValid={hasNumber}
-                      label={t('securityForm.hasNumber')}
-                    />
-                    <PasswordValidationItem
-                      isValid={hasMinLength}
-                      label={t('securityForm.hasMinLength')}
-                    />
-                    <PasswordValidationItem
-                      isValid={hasUpperAndLower}
-                      label={t('securityForm.hasUpperAndLower')}
-                    />
-                    <PasswordValidationItem
-                      isValid={hasSpecialChar}
-                      label={t('securityForm.hasSpecialChar')}
-                    />
                   </Box>
-                </Box>
+                )}
-              )}
 
-              <TextField
+                <TextField
-                label={t('securityForm.confirmPassword')}
+                  label={t('securityForm.confirmPassword')}
-                type="password"
+                  type="password"
-                fullWidth
+                  fullWidth
-                value={confirmPassword}
+                  value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
-                error={confirmPassword.length > 0 && !matchPassword}
+                  error={confirmPassword.length > 0 && !matchPassword}
-                helperText={
+                  helperText={
-                  confirmPassword.length > 0 && !matchPassword
+                    confirmPassword.length > 0 && !matchPassword
-                    ? t('securityForm.notCompatibility')
+                      ? t('securityForm.notCompatibility')
-                    : ' '
+                      : ' '
-                }
+                  }
-                sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
+                  sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
-              />
+                />
-            </DialogContent>
+              </DialogContent>
+            ) : (
+              <DialogContent
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 2,
+                  px: { xs: 2, sm: 3 },
+                }}
+              >
+                <TextField
+                  label={t('securityForm.newPassword')}
+                  type="password"
+                  fullWidth
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  sx={{
+                    '& .MuiOutlinedInput-root': { borderRadius: 2 },
+                    mt: 2,
+                  }}
+                />
 
+                {password && showValidation && (
+                  <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                    <Box sx={{ maxWidth: '364px', width: '100%' }}>
+                      <PasswordValidationItem
+                        isValid={hasNumber}
+                        label={t('securityForm.hasNumber')}
+                      />
+                      <PasswordValidationItem
+                        isValid={hasMinLength}
+                        label={t('securityForm.hasMinLength')}
+                      />
+                      <PasswordValidationItem
+                        isValid={hasUpperAndLower}
+                        label={t('securityForm.hasUpperAndLower')}
+                      />
+                      <PasswordValidationItem
+                        isValid={hasSpecialChar}
+                        label={t('securityForm.hasSpecialChar')}
+                      />
+                    </Box>
+                  </Box>
+                )}
+
+                <TextField
+                  label={t('securityForm.confirmPassword')}
+                  type="password"
+                  fullWidth
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  error={confirmPassword.length > 0 && !matchPassword}
+                  helperText={
+                    confirmPassword.length > 0 && !matchPassword
+                      ? t('securityForm.notCompatibility')
+                      : ' '
+                  }
+                  sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
+                />
+              </DialogContent>
+            )}
             <DialogActions sx={{ px: 3, pb: 2, justifyContent: 'center' }}>
               <Button
                 fullWidth

src/features/profile/components/security/RecentLogins.tsx

@@ -1,6 +1,5 @@
 import { Box, Typography, Button } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import Logo from '@/components/Logo';
 import { CardContainer } from '@/components/CardContainer';
 
 export function RecentLogins() {
@@ -88,6 +87,7 @@ export function RecentLogins() {
                         color: 'success.main',
                         width: '93px',
                         textTransform: 'none',
+                        fontSize: '0.75rem',
                       }}
                     >
                       {t('securityForm.currentDevice')}

src/features/profile/components/setting/Setting.tsx

@@ -57,7 +57,7 @@ export function Setting() {
     isEditing ? handleSave() : setIsEditing(true);
 
   return (
-    <Box sx={{ backgroundColor: 'background.paper' }}>
+    <Box sx={{ backgroundColor: 'background.paper', minHeight: '100vh' }}>
       <Box
         sx={{
           display: 'flex',
@@ -129,11 +129,11 @@ export function Setting() {
               gap: 2,
               mt: 2,
               mx: 'auto',
-              width: { xs: '100%', md: 700 },
+              width: { xs: '100%', md: 690 },
               // px: 4,
             }}
           >
-            <Box sx={{ flex: 1, maxWidth: { sm: 337 }, width: '100%' }}>
+            <Box sx={{ flex: 1, maxWidth: { sm: 310 }, width: '100%' }}>
               {isEditing ? (
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                   <Typography variant="body1">{t('settings.theme')}</Typography>
@@ -152,7 +152,7 @@ export function Setting() {
                 </Box>
               )}
             </Box>
-            <Box sx={{ flex: 1, maxWidth: { sm: 337 }, width: '100%' }}>
+            <Box sx={{ flex: 1, maxWidth: { sm: 310 }, width: '100%' }}>
               {isEditing ? (
                 <Autocomplete
                   options={languageOptions}

src/features/profile/components/userInformation/PhoneNumber.tsx

@@ -72,215 +72,217 @@ export function PhoneNumber() {
   };
 
   return (
-    <CardContainer
+    <Box sx={{ backgroundColor: 'background.paper' }}>
-      title={t('settingForm.titlePhoneNumber')}
+      <CardContainer
-      subtitle={t('settingForm.descriptionPhoneNumber')}
+        title={t('settingForm.titlePhoneNumber')}
-      highlighted={isEditing}
+        subtitle={t('settingForm.descriptionPhoneNumber')}
-      action={
+        highlighted={isEditing}
-        <Box sx={{ display: 'flex', gap: 1 }}>
+        action={
-          {isEditing && (
+          <Box sx={{ display: 'flex', gap: 1 }}>
-            <Button
+            {isEditing && (
-              variant="text"
-              onClick={toggleEdit}
-              size="large"
-              sx={{
-                color: 'primary.main',
-                textTransform: 'none',
-                width: '43px',
-              }}
-            >
-              {t('settingForm.rejectButton')}
-            </Button>
-          )}
-          <Button
-            onClick={toggleEdit}
-            size="large"
-            variant="outlined"
-            sx={{
-              textTransform: 'none',
-              border: '1px solid',
-              borderColor: 'primary.main',
-              borderRadius: '4px',
-              bgcolor: isEditing ? 'primary.main' : 'background.paper',
-              color: isEditing ? 'primary.contrastText' : 'primary.main',
-              width: { xs: '100%', sm: isEditing ? '85px' : '161px' },
-              whiteSpace: 'nowrap',
-            }}
-          >
-            {isEditing
-              ? t('settingForm.saveButton')
-              : t('settingForm.editPhoneNumber')}
-          </Button>
-        </Box>
-      }
-    >
-      {isEditing ? (
-        <Box sx={{ px: { xs: 2, sm: 4 }, bgcolor: 'background.paper' }}>
-          <Box sx={{ mb: 2 }}>
-            <Typography variant="h6">
-              {t('settingForm.editPhoneNumber')}
-            </Typography>
-            <Typography variant="body2" color="text.secondary">
-              {t('settingForm.phoneNumberText')}({phones.map((p) => p.withCode)}
-              ){t('settingForm.verb')}
-            </Typography>
-          </Box>
-
-          <Box
-            sx={{
-              display: 'flex',
-              flexWrap: 'wrap',
-              gap: 2,
-              alignItems: 'center',
-            }}
-          >
-            <TextField
-              name="phoneNumber"
-              label={t('settingForm.newPhoneNumber')}
-              type="tel"
-              value={phoneNumber}
-              onChange={handlePhoneNumberChange}
-              sx={{ flex: '1 1 240px', minWidth: 0 }}
-              placeholder="09123456789"
-              inputProps={{ dir: 'rtl', style: { textAlign: 'right' } }}
-              InputProps={{
-                endAdornment:
-                  buttonState === 'counting' ? (
-                    <IconButton
-                      size="small"
-                      onClick={() => {
-                        setButtonState('default');
-                        setPhoneNumber('');
-                      }}
-                      sx={{ mr: 1 }}
-                    >
-                      <Edit size="24" color="#64B5F6" />
-                    </IconButton>
-                  ) : null,
-              }}
-            />
-
-            {isVerified ? (
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                <TickCircle
-                  size="24"
-                  style={{ color: '#43A047' }}
-                  variant="Bold"
-                />
-                <Typography sx={{ color: 'success.main' }}>
-                  {t('settingForm.successButton')}
-                </Typography>
-              </Box>
-            ) : (
               <Button
                 variant="text"
-                onClick={handleSendCode}
+                onClick={toggleEdit}
-                disabled={
+                size="large"
-                  buttonState === 'counting' || phoneNumber.length === 0
-                }
                 sx={{
-                  textTransform: 'none',
-                  minWidth: { xs: '100%', sm: 170 },
                   color: 'primary.main',
-                  height: 56,
+                  textTransform: 'none',
+                  width: '43px',
                 }}
               >
-                {buttonState === 'counting' ? (
+                {t('settingForm.rejectButton')}
-                  <CountDownTimer
-                    initialSeconds={60}
-                    onComplete={() => setButtonState('default')}
-                  />
-                ) : (
-                  t('settingForm.verificationCodeButton')
-                )}
               </Button>
             )}
+            <Button
+              onClick={toggleEdit}
+              size="large"
+              variant="outlined"
+              sx={{
+                textTransform: 'none',
+                border: '1px solid',
+                borderColor: 'primary.main',
+                borderRadius: '4px',
+                bgcolor: isEditing ? 'primary.main' : 'background.paper',
+                color: isEditing ? 'primary.contrastText' : 'primary.main',
+                width: { xs: '100%', sm: isEditing ? '85px' : '161px' },
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {isEditing
+                ? t('settingForm.saveButton')
+                : t('settingForm.editPhoneNumber')}
+            </Button>
           </Box>
+        }
+      >
+        {isEditing ? (
+          <Box sx={{ px: { xs: 2, sm: 4 }, bgcolor: 'background.paper' }}>
+            <Box sx={{ mb: 2 }}>
+              <Typography variant="h6">
+                {t('settingForm.editPhoneNumber')}
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                {t('settingForm.phoneNumberText')}(
+                {phones.map((p) => p.withCode)}){t('settingForm.verb')}
+              </Typography>
+            </Box>
 
-          {buttonState === 'counting' && !isVerified && (
             <Box
               sx={{
                 display: 'flex',
                 flexWrap: 'wrap',
                 gap: 2,
-                mt: 2,
                 alignItems: 'center',
               }}
             >
               <TextField
-                name="verificationCode"
+                name="phoneNumber"
-                label={t('settingForm.verificationCode')}
+                label={t('settingForm.newPhoneNumber')}
                 type="tel"
-                value={verificationCode}
+                value={phoneNumber}
-                onChange={handleVerificationCodeChange}
+                onChange={handlePhoneNumberChange}
                 sx={{ flex: '1 1 240px', minWidth: 0 }}
-                placeholder={t('settingForm.verificationCode')}
+                placeholder="09123456789"
                 inputProps={{ dir: 'rtl', style: { textAlign: 'right' } }}
+                InputProps={{
+                  endAdornment:
+                    buttonState === 'counting' ? (
+                      <IconButton
+                        size="small"
+                        onClick={() => {
+                          setButtonState('default');
+                          setPhoneNumber('');
+                        }}
+                        sx={{ mr: 1 }}
+                      >
+                        <Edit size="24" color="#64B5F6" />
+                      </IconButton>
+                    ) : null,
+                }}
               />
 
-              <Button
+              {isVerified ? (
-                variant="contained"
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                onClick={handleVerifyClick}
+                  <TickCircle
-                disabled={isVerifying || verificationCode.length === 0}
+                    size="24"
+                    style={{ color: '#43A047' }}
+                    variant="Bold"
+                  />
+                  <Typography sx={{ color: 'success.main' }}>
+                    {t('settingForm.successButton')}
+                  </Typography>
+                </Box>
+              ) : (
+                <Button
+                  variant="text"
+                  onClick={handleSendCode}
+                  disabled={
+                    buttonState === 'counting' || phoneNumber.length === 0
+                  }
+                  sx={{
+                    textTransform: 'none',
+                    minWidth: { xs: '100%', sm: 170 },
+                    color: 'primary.main',
+                    height: 56,
+                  }}
+                >
+                  {buttonState === 'counting' ? (
+                    <CountDownTimer
+                      initialSeconds={60}
+                      onComplete={() => setButtonState('default')}
+                    />
+                  ) : (
+                    t('settingForm.verificationCodeButton')
+                  )}
+                </Button>
+              )}
+            </Box>
+
+            {buttonState === 'counting' && !isVerified && (
+              <Box
                 sx={{
-                  textTransform: 'none',
+                  display: 'flex',
-                  minWidth: { xs: '100%', sm: 170 },
+                  flexWrap: 'wrap',
-                  bgcolor: 'primary.main',
+                  gap: 2,
-                  height: 56,
+                  mt: 2,
+                  alignItems: 'center',
                 }}
               >
-                {isVerifying ? (
+                <TextField
-                  <Box
+                  name="verificationCode"
-                    component="span"
+                  label={t('settingForm.verificationCode')}
-                    sx={{
+                  type="tel"
-                      display: 'flex',
+                  value={verificationCode}
-                      animation: 'spin 1s linear infinite',
+                  onChange={handleVerificationCodeChange}
-                      '@keyframes spin': {
+                  sx={{ flex: '1 1 240px', minWidth: 0 }}
-                        '0%': { transform: 'rotate(0deg)' },
+                  placeholder={t('settingForm.verificationCode')}
-                        '100%': { transform: 'rotate(360deg)' },
+                  inputProps={{ dir: 'rtl', style: { textAlign: 'right' } }}
-                      },
+                />
-                    }}
-                  >
-                    <Refresh size="20" color="white" />
-                  </Box>
-                ) : (
-                  t('settingForm.checkCode')
-                )}
-              </Button>
-            </Box>
-          )}
 
-          <Toast
+                <Button
-            color="success"
+                  variant="contained"
-            open={showToast}
+                  onClick={handleVerifyClick}
-            onClose={() => setShowToast(false)}
+                  disabled={isVerifying || verificationCode.length === 0}
-          >
+                  sx={{
-            {t('settingForm.successfulChangePhone')}
+                    textTransform: 'none',
-          </Toast>
+                    minWidth: { xs: '100%', sm: 170 },
-        </Box>
+                    bgcolor: 'primary.main',
-      ) : (
+                    height: 56,
-        <Box sx={{ px: { xs: 2, sm: 4 } }}>
+                  }}
-          {phones.map((item, index) => (
+                >
-            <Box
+                  {isVerifying ? (
-              key={index}
+                    <Box
-              sx={{
+                      component="span"
-                display: 'flex',
+                      sx={{
-                flexDirection: 'column',
+                        display: 'flex',
-                justifyContent: 'center',
+                        animation: 'spin 1s linear infinite',
-                py: 2,
+                        '@keyframes spin': {
-                width: '100%',
+                          '0%': { transform: 'rotate(0deg)' },
-              }}
+                          '100%': { transform: 'rotate(360deg)' },
+                        },
+                      }}
+                    >
+                      <Refresh size="20" color="white" />
+                    </Box>
+                  ) : (
+                    t('settingForm.checkCode')
+                  )}
+                </Button>
+              </Box>
+            )}
+
+            <Toast
+              color="success"
+              open={showToast}
+              onClose={() => setShowToast(false)}
             >
-              <Typography variant="h6" color="text.primary">
+              {t('settingForm.successfulChangePhone')}
-                {item.phone}
+            </Toast>
-              </Typography>
+          </Box>
-              <Typography variant="caption" color="text.secondary">
+        ) : (
-                {item.time}
+          <Box sx={{ px: { xs: 2, sm: 4 } }}>
-              </Typography>
+            {phones.map((item, index) => (
-            </Box>
+              <Box
-          ))}
+                key={index}
-        </Box>
+                sx={{
-      )}
+                  display: 'flex',
-    </CardContainer>
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  py: 2,
+                  width: '100%',
+                }}
+              >
+                <Typography variant="h6" color="text.primary">
+                  {item.phone}
+                </Typography>
+                <Typography variant="caption" color="text.secondary">
+                  {item.time}
+                </Typography>
+              </Box>
+            ))}
+          </Box>
+        )}
+      </CardContainer>
+    </Box>
   );
 }

src/features/profile/components/userInformation/SocialMedia.tsx

@@ -59,273 +59,275 @@ export function SocialMedia() {
   ] as const;
 
   return (
-    <CardContainer
+    <Box sx={{ backgroundColor: 'background.paper' }}>
-      title={t('settingForm.titleSocial')}
+      <CardContainer
-      subtitle={t('settingForm.descriptionSocial')}
+        title={t('settingForm.titleSocial')}
-      action={
+        subtitle={t('settingForm.descriptionSocial')}
-        <Box
+        action={
-          sx={{
-            display: 'flex',
-            justifyContent: 'flex-start',
-            flexWrap: 'wrap',
-            gap: 1,
-          }}
-        >
           <Box
             sx={{
               display: 'flex',
-              flexDirection: { xs: 'column', sm: 'row' },
+              justifyContent: 'flex-start',
-              alignItems: { xs: 'stretch', sm: 'flex-start' },
+              flexWrap: 'wrap',
               gap: 1,
-              width: '100%',
             }}
           >
-            <Button
+            <Box
-              onClick={handleClickMenu}
+              sx={{
-              variant="outlined"
+                display: 'flex',
+                flexDirection: { xs: 'column', sm: 'row' },
+                alignItems: { xs: 'stretch', sm: 'flex-start' },
+                gap: 1,
+                width: '100%',
+              }}
+            >
+              <Button
+                onClick={handleClickMenu}
+                variant="outlined"
+                sx={{
+                  width: '100%',
+                  maxWidth: { sm: 187 },
+                  textTransform: 'none',
+                  border: '1px solid',
+                  borderColor: 'primary.main',
+                  borderRadius: '8px',
+                  color: 'primary.main',
+                  fontSize: '14px',
+                  px: 2,
+                  py: 1,
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                <Box
+                  component="span"
+                  sx={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    direction: 'rtl',
+                  }}
+                >
+                  {t('settingForm.addEmailOrSocialButton')}
+                </Box>
+                <ArrowDown3 size="20" color="#2979FF" />
+              </Button>
+            </Box>
+
+            <Menu
+              anchorEl={anchor}
+              open={openMenu}
+              onClose={handleCloseMenu}
+              PaperProps={{
+                sx: {
+                  minWidth: 240,
+                  maxWidth: '90vw',
+                },
+              }}
+              anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+              transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+            >
+              <MenuItem
+                onClick={() => {
+                  handleCloseMenu();
+                  handleOpenDialog();
+                }}
+              >
+                <ListItemIcon>
+                  <Message size={20} color="black" />
+                </ListItemIcon>
+                <ListItemText>{t('settingForm.email')}</ListItemText>
+              </MenuItem>
+              <MenuItem>
+                <ListItemIcon>
+                  <Google size={20} color="#4285F4" />
+                </ListItemIcon>
+                <ListItemText>{t('settingForm.google')}</ListItemText>
+              </MenuItem>
+              <MenuItem>
+                <ListItemIcon>
+                  <Apple size={20} color="black" />
+                </ListItemIcon>
+                <ListItemText>{t('settingForm.apple')}</ListItemText>
+              </MenuItem>
+            </Menu>
+          </Box>
+        }
+      >
+        <Box sx={{ width: '100%', borderRadius: '8px', p: { xs: 1, sm: 2 } }}>
+          {emailList.map((item, index) => (
+            <Box
+              key={index}
               sx={{
-                width: '100%',
-                maxWidth: { sm: 187 },
-                textTransform: 'none',
-                border: '1px solid',
-                borderColor: 'primary.main',
-                borderRadius: '8px',
-                color: 'primary.main',
-                fontSize: '14px',
-                px: 2,
-                py: 1,
                 display: 'flex',
-                justifyContent: 'space-between',
                 alignItems: 'center',
-                whiteSpace: 'nowrap',
+                justifyContent: 'space-between',
+                flexWrap: 'wrap',
+                py: 1,
+                gap: 1,
               }}
             >
               <Box
-                component="span"
                 sx={{
-                  overflow: 'hidden',
+                  display: 'flex',
-                  textOverflow: 'ellipsis',
+                  alignItems: 'center',
-                  direction: 'rtl',
+                  gap: 1,
+                  minWidth: 0,
                 }}
               >
-                {t('settingForm.addEmailOrSocialButton')}
+                {item.provider === 'google' && (
-              </Box>
+                  <Google size="20" variant="Bold" color="#4285F4" />
-              <ArrowDown3 size="20" color="#2979FF" />
+                )}
-            </Button>
+                {item.provider === 'apple' && (
-          </Box>
+                  <Apple size="20" variant="Bold" color="black" />
+                )}
+                {item.provider === 'email' && (
+                  <Sms size="20" variant="Bold" color="#1976d2" />
+                )}
 
-          <Menu
+                <Box sx={{ minWidth: 0 }}>
-            anchorEl={anchor}
+                  <Typography variant="h6" noWrap>
-            open={openMenu}
+                    {item.email}
-            onClose={handleCloseMenu}
+                  </Typography>
-            PaperProps={{
+                  <Typography variant="caption" color="text.secondary">
-              sx: {
+                    {item.time}
-                minWidth: 240,
+                  </Typography>
-                maxWidth: '90vw',
+                </Box>
-              },
+              </Box>
-            }}
+
-            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+              <IconButton size="small">
-            transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+                <Trash size="20" color="gray" variant="Outline" />
-          >
+              </IconButton>
-            <MenuItem
+            </Box>
-              onClick={() => {
+          ))}
-                handleCloseMenu();
-                handleOpenDialog();
-              }}
-            >
-              <ListItemIcon>
-                <Message size={20} color="black" />
-              </ListItemIcon>
-              <ListItemText>{t('settingForm.email')}</ListItemText>
-            </MenuItem>
-            <MenuItem>
-              <ListItemIcon>
-                <Google size={20} color="#4285F4" />
-              </ListItemIcon>
-              <ListItemText>{t('settingForm.google')}</ListItemText>
-            </MenuItem>
-            <MenuItem>
-              <ListItemIcon>
-                <Apple size={20} color="black" />
-              </ListItemIcon>
-              <ListItemText>{t('settingForm.apple')}</ListItemText>
-            </MenuItem>
-          </Menu>
         </Box>
-      }
+
-    >
+        <Dialog
-      <Box sx={{ width: '100%', borderRadius: '8px', p: { xs: 1, sm: 2 } }}>
+          open={openDialog}
-        {emailList.map((item, index) => (
+          onClose={handleCloseDialog}
-          <Box
+          fullWidth
-            key={index}
+          maxWidth="xs"
+          fullScreen={fullScreen}
+          sx={{
+            '& .MuiDialog-paper': { m: { xs: 1, sm: 'auto' }, borderRadius: 2 },
+          }}
+        >
+          <DialogTitle
             sx={{
               display: 'flex',
+              flexDirection: 'row',
               alignItems: 'center',
-              justifyContent: 'space-between',
+              fontWeight: 'bold',
-              flexWrap: 'wrap',
+              fontSize: '16px',
-              py: 1,
               gap: 1,
             }}
           >
+            <IconButton onClick={handleCloseDialog}>
+              <CloseSquare size={24} color="#82B1FF" />
+            </IconButton>
+            {t('settingForm.addEmailButton')}
+          </DialogTitle>
+
+          <DialogContent>
             <Box
               sx={{
+                width: '100%',
                 display: 'flex',
-                alignItems: 'center',
+                flexDirection: 'column',
-                gap: 1,
+                gap: 2,
-                minWidth: 0,
               }}
             >
-              {item.provider === 'google' && (
+              <Box>
-                <Google size="20" variant="Bold" color="#4285F4" />
+                <Typography fontWeight="bold">
-              )}
+                  {t('settingForm.newEmail')}
-              {item.provider === 'apple' && (
-                <Apple size="20" variant="Bold" color="black" />
-              )}
-              {item.provider === 'email' && (
-                <Sms size="20" variant="Bold" color="#1976d2" />
-              )}
-
-              <Box sx={{ minWidth: 0 }}>
-                <Typography variant="h6" noWrap>
-                  {item.email}
                 </Typography>
-                <Typography variant="caption" color="text.secondary">
+                <Typography variant="body2" color="text.secondary">
-                  {item.time}
+                  {t('settingForm.dialogHeader')}
                 </Typography>
               </Box>
-            </Box>
 
-            <IconButton size="small">
+              <TextField
-              <Trash size="20" color="gray" variant="Outline" />
-            </IconButton>
-          </Box>
-        ))}
-      </Box>
-
-      <Dialog
-        open={openDialog}
-        onClose={handleCloseDialog}
-        fullWidth
-        maxWidth="xs"
-        fullScreen={fullScreen}
-        sx={{
-          '& .MuiDialog-paper': { m: { xs: 1, sm: 'auto' }, borderRadius: 2 },
-        }}
-      >
-        <DialogTitle
-          sx={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            fontWeight: 'bold',
-            fontSize: '16px',
-            gap: 1,
-          }}
-        >
-          <IconButton onClick={handleCloseDialog}>
-            <CloseSquare size={24} color="#82B1FF" />
-          </IconButton>
-          {t('settingForm.addEmailButton')}
-        </DialogTitle>
-
-        <DialogContent>
-          <Box
-            sx={{
-              width: '100%',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 2,
-            }}
-          >
-            <Box>
-              <Typography fontWeight="bold">
-                {t('settingForm.newEmail')}
-              </Typography>
-              <Typography variant="body2" color="text.secondary">
-                {t('settingForm.dialogHeader')}
-              </Typography>
-            </Box>
-
-            <TextField
-              fullWidth
-              type="email"
-              value={emailInput}
-              onChange={handleEmailChange}
-              error={emailError}
-              helperText={emailError ? t('settingForm.emailError') : ''}
-              label={t('settingForm.email')}
-              placeholder="abc@email.com"
-              sx={{ '& .MuiOutlinedInput-root': { borderRadius: '8px' } }}
-            />
-
-            <Button
-              variant="contained"
-              fullWidth
-              sx={{ textTransform: 'none', borderRadius: '8px' }}
-              disabled={emailError || emailInput === ''}
-            >
-              {t('settingForm.verificationCodeButton')}
-            </Button>
-
-            <Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
-              <Box sx={{ flex: 1, height: 1, bgcolor: '#ccc' }} />
-              <Typography sx={{ mx: 1, fontSize: '12px', color: 'gray' }}>
-                {t('settingForm.or')}
-              </Typography>
-              <Box sx={{ flex: 1, height: 1, bgcolor: '#ccc' }} />
-            </Box>
-
-            <Box
-              sx={{
-                display: 'flex',
-                gap: 1,
-                flexDirection: { xs: 'column', sm: 'row' },
-              }}
-            >
-              <Button
                 fullWidth
+                type="email"
+                value={emailInput}
+                onChange={handleEmailChange}
+                error={emailError}
+                helperText={emailError ? t('settingForm.emailError') : ''}
+                label={t('settingForm.email')}
+                placeholder="abc@email.com"
+                sx={{ '& .MuiOutlinedInput-root': { borderRadius: '8px' } }}
+              />
+
+              <Button
+                variant="contained"
+                fullWidth
+                sx={{ textTransform: 'none', borderRadius: '8px' }}
+                disabled={emailError || emailInput === ''}
+              >
+                {t('settingForm.verificationCodeButton')}
+              </Button>
+
+              <Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
+                <Box sx={{ flex: 1, height: 1, bgcolor: '#ccc' }} />
+                <Typography sx={{ mx: 1, fontSize: '12px', color: 'gray' }}>
+                  {t('settingForm.or')}
+                </Typography>
+                <Box sx={{ flex: 1, height: 1, bgcolor: '#ccc' }} />
+              </Box>
+
+              <Box
                 sx={{
-                  textTransform: 'none',
-                  border: 2,
-                  borderColor: '#1976d2',
-                  color: '#1976d2',
-                  borderRadius: '8px',
                   display: 'flex',
-                  alignItems: 'center',
+                  gap: 1,
-                  justifyContent: 'center',
+                  flexDirection: { xs: 'column', sm: 'row' },
                 }}
               >
-                <Google
+                <Button
-                  size="20"
+                  fullWidth
-                  color="#4285F4"
+                  sx={{
-                  style={{ marginInlineStart: 8 }}
+                    textTransform: 'none',
-                />
+                    border: 2,
-                {t('settingForm.google')}
+                    borderColor: '#1976d2',
-              </Button>
+                    color: '#1976d2',
-              <Button
+                    borderRadius: '8px',
-                fullWidth
+                    display: 'flex',
-                sx={{
+                    alignItems: 'center',
-                  textTransform: 'none',
+                    justifyContent: 'center',
-                  border: 2,
+                  }}
-                  borderColor: '#1976d2',
+                >
-                  color: '#1976d2',
+                  <Google
-                  borderRadius: '8px',
+                    size="20"
-                  display: 'flex',
+                    color="#4285F4"
-                  alignItems: 'center',
+                    style={{ marginInlineStart: 8 }}
-                  justifyContent: 'center',
+                  />
-                }}
+                  {t('settingForm.google')}
-              >
+                </Button>
-                <Apple
+                <Button
-                  size="20"
+                  fullWidth
-                  color="black"
+                  sx={{
-                  style={{ marginInlineStart: 8 }}
+                    textTransform: 'none',
-                />
+                    border: 2,
-                {t('settingForm.apple')}
+                    borderColor: '#1976d2',
-              </Button>
+                    color: '#1976d2',
+                    borderRadius: '8px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <Apple
+                    size="20"
+                    color="black"
+                    style={{ marginInlineStart: 8 }}
+                  />
+                  {t('settingForm.apple')}
+                </Button>
+              </Box>
             </Box>
-          </Box>
+          </DialogContent>
-        </DialogContent>
+        </Dialog>
-      </Dialog>
+      </CardContainer>
-    </CardContainer>
+    </Box>
   );
 }

src/features/profile/components/userInformation/personlInformation/InfoRowDisplay.tsx

@@ -30,23 +30,28 @@ export function InfoRowDisplay({
         }}
       >
         <Box
-          sx={{ display: 'flex', alignItems: 'center', gap: 2, width: '337px' }}
+          sx={{
+            width: '337px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1,
+          }}
         >
-          <Avatar
+          <Typography variant="caption" color="text.secondary">
-            src={uploadedImageUrl || undefined}
+            {t('settingForm.name')} و {t('settingForm.familyName')}
-            sx={{
+          </Typography>
-              width: 32,
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-              height: 32,
+            <Avatar
-              bgcolor: 'secondary.main',
+              src={uploadedImageUrl || undefined}
-              fontSize: '16px',
+              sx={{
-            }}
+                width: 32,
-          >
+                height: 32,
-            {initials}
+                bgcolor: 'secondary.main',
-          </Avatar>
+                fontSize: '16px',
-          <Box>
+              }}
-            <Typography variant="caption" color="text.secondary">
+            >
-              {t('settingForm.name')} و {t('settingForm.familyName')}
+              {initials}
-            </Typography>
+            </Avatar>
             <Typography variant="body1" color="text.primary">
               {`${displayValue(data.firstName)} ${displayValue(data.lastName)}`}
             </Typography>

src/features/profile/routes/SettingPage.tsx

@@ -16,6 +16,7 @@ import {
   Setting as SettingIcon,
   Shield,
   Sms,
+  Menu,
 } from 'iconsax-react';
 import { Box, Typography, useTheme, useMediaQuery } from '@mui/material';
 import { useTranslation } from 'react-i18next';
@@ -61,68 +62,126 @@ export function Layout() {
   const drawerWidth = 274;
   const minimizedWidth = 64;
   const navWidth = isMdUp ? drawerWidth : minimizedWidth;
-  const contentWidth = 790;
+  const contentWidth = 810;
+  const contentHeight = '78vh';
   const totalWidth = navWidth + contentWidth;
 
   const navConfig: NavItemConfig[] = [
     {
       text: t('side.account'),
-      icon: <ProfileCircle size={24} />,
+      getIcon: (isSelected) =>
+        isSelected ? (
+          <ProfileCircle size={24} color="#1976d2" variant="Bold" />
+        ) : (
+          <ProfileCircle size={24} color="#82B1FF" />
+        ),
       path: '/profile',
       children: [
         {
           text: t('side.personalInfo'),
-          icon: <Personalcard size={24} />,
+          getIcon: (isSelected) =>
+            isSelected ? (
+              <Personalcard size={24} color="#1976d2" variant="Bold" />
+            ) : (
+              <Personalcard size={24} color="#82B1FF" />
+            ),
           path: '/profile#info',
         },
         {
           text: t('side.phoneNumber'),
-          icon: <Mobile size={24} />,
+          getIcon: (isSelected) =>
+            isSelected ? (
+              <Mobile size={24} color="#1976d2" variant="Bold" />
+            ) : (
+              <Mobile size={24} color="#82B1FF" />
+            ),
           path: '/profile#contact-info',
         },
         {
           text: t('side.email'),
-          icon: <Sms size={24} />,
+          getIcon: (isSelected) =>
+            isSelected ? (
+              <Sms size={24} color="#1976d2" variant="Bold" />
+            ) : (
+              <Sms size={24} color="#82B1FF" />
+            ),
           path: '/profile#email',
         },
       ],
     },
     {
       text: t('side.security'),
-      icon: <Shield size={24} />,
+      getIcon: (isSelected) =>
+        isSelected ? (
+          <Shield size={24} color="#1976d2" variant="Bold" />
+        ) : (
+          <Shield size={24} color="#82B1FF" />
+        ),
       path: '/security',
       children: [
         {
           text: t('side.password'),
-          icon: <PasswordCheck size={24} />,
+          getIcon: (isSelected) =>
+            isSelected ? (
+              <PasswordCheck size={24} color="#1976d2" variant="Bold" />
+            ) : (
+              <PasswordCheck size={24} color="#82B1FF" />
+            ),
           path: '/security#password',
         },
         {
           text: t('side.verifiedAddress'),
-          icon: <LocationTick size={24} />,
+          getIcon: (isSelected) =>
+            isSelected ? (
+              <LocationTick size={24} color="#1976d2" variant="Bold" />
+            ) : (
+              <LocationTick size={24} color="#82B1FF" />
+            ),
           path: '/security#locations',
         },
         {
           text: t('side.recentLogins'),
-          icon: <Devices size={24} />,
+          getIcon: (isSelected) =>
+            isSelected ? (
+              <Devices size={24} color="#1976d2" variant="Bold" />
+            ) : (
+              <Devices size={24} color="#82B1FF" />
+            ),
           path: '/security#sessions',
         },
       ],
     },
     {
       text: t('side.activeDevices'),
-      icon: <Devices size={24} />,
+      getIcon: (isSelected) =>
+        isSelected ? (
+          <Devices size={24} color="#1976d2" variant="Bold" />
+        ) : (
+          <Devices size={24} color="#82B1FF" />
+        ),
       path: '/devices',
     },
     {
       text: t('side.settings'),
-      icon: <SettingIcon size={24} />,
+      getIcon: (isSelected) =>
+        isSelected ? (
+          <SettingIcon size={24} color="#1976d2" variant="Bold" />
+        ) : (
+          <SettingIcon size={24} color="#82B1FF" />
+        ),
       path: '/setting',
     },
   ];
 
   return (
-    <Box display="flex" flexDirection="column" minHeight="100vh">
+    <Box
+      display="flex"
+      flexDirection="column"
+      minHeight="100vh"
+      justifyContent="center"
+      alignItems="center"
+      px={{ xs: 2, sm: 3 }}
+    >
       <Box>
         <Box
           width={totalWidth}
@@ -134,7 +193,7 @@ export function Layout() {
           <Box position="relative" width={navWidth}>
             <SideNav
               navConfig={navConfig}
-              header={<Header />}
+              header={isMdUp ? <Header /> : <Menu size={24} color="#1976d2" />}
               activePath={location.pathname + location.hash}
               sideNavVariant={isMdUp ? 'full' : 'minimized'}
               positioning="absolute"
@@ -143,10 +202,13 @@ export function Layout() {
             />
           </Box>
           <Box
-            // flex={1}
+            sx={{
-            maxWidth={contentWidth}
+              width: contentWidth,
-            width="100%"
+              height: contentHeight,
-            // px={{ xs: 2, sm: 3 }}
+              bgcolor: 'background.paper',
+              px: { xs: 2, sm: 3 },
+              overflowY: 'auto',
+            }}
           >
             <Outlet />
           </Box>
@@ -165,7 +227,16 @@ const router = createBrowserRouter([
       {
         path: '/profile',
         element: (
-          <>
+          <Box
+            sx={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2,
+              px: { xs: 2, sm: 0 },
+            }}
+          >
             <div id="info">
               <PersonalInformation />
             </div>
@@ -175,13 +246,21 @@ const router = createBrowserRouter([
             <div id="email">
               <SocialMedia />
             </div>
-          </>
+          </Box>
         ),
       },
       {
         path: '/security',
         element: (
-          <>
+          <Box
+            sx={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2,
+            }}
+          >
             <div id="password">
               <PasswordSecurity />
             </div>
@@ -189,11 +268,25 @@ const router = createBrowserRouter([
             <div id="sessions">
               <RecentLogins />
             </div>
-          </>
+          </Box>
+        ),
+      },
+      {
+        path: '/devices',
+        element: (
+          <Box sx={{ width: '100%', height: '100%' }}>
+            <ActiveDevices />
+          </Box>
+        ),
+      },
+      {
+        path: '/setting',
+        element: (
+          <Box sx={{ width: '100%', height: '100%' }}>
+            <Setting />
+          </Box>
         ),
       },
-      { path: '/devices', element: <ActiveDevices /> },
-      { path: '/setting', element: <Setting /> },
     ],
   },
 ]);