fix: code styles

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

@@ -8,9 +8,11 @@ import {
   Box,
   Button,
   Link,
+  CircularProgress,
 } from '@mui/material';
-import { CloseCircle, Refresh } from 'iconsax-react';
+import { CloseCircle } from 'iconsax-react';
 import { PasswordValidationItem } from './PasswordValidation';
+import { Icon } from '@rkheftan/harmony-ui';
 
 interface PasswordDialogProps {
   open: boolean;
@@ -68,7 +70,7 @@ export function PasswordDialog({
       <DialogTitle sx={{ p: 2 }}>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
           <IconButton onClick={handleClose}>
-            <CloseCircle size={24} color="#82B1FF" />
+            <Icon Component={CloseCircle} size="large" color="primary.main" />
           </IconButton>
           <Box component="span" fontWeight="bold" fontSize={18}>
             {t('securityForm.addPassword')}
@@ -150,28 +152,12 @@ export function PasswordDialog({
       <DialogActions sx={{ px: 3, pb: 2, justifyContent: 'center' }}>
         <Button
           fullWidth
-          sx={{ maxWidth: '364px', height: 48, textTransform: 'none' }}
+          sx={{ height: 48, textTransform: 'none' }}
           variant="contained"
           onClick={handleShowAlert}
           disabled={!password || password !== confirmPassword || loading}
         >
-          {loading ? (
-            <Box
-              component="span"
-              sx={{
-                display: 'flex',
-                animation: 'spin 1s linear infinite',
-                '@keyframes spin': {
-                  '0%': { transform: 'rotate(0deg)' },
-                  '100%': { transform: 'rotate(360deg)' },
-                },
-              }}
-            >
-              <Refresh size="20" color="#fff" />
-            </Box>
-          ) : (
-            t('securityForm.confirm')
-          )}
+          {loading ? <CircularProgress size={20} /> : t('securityForm.confirm')}
         </Button>
       </DialogActions>
     </Dialog>

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

@@ -9,7 +9,6 @@ import {
 import { useTranslation } from 'react-i18next';
 import { CardContainer } from '@/components/CardContainer';
 import { PageWrapper } from '../PageWrapper';
-import Logo from '@/components/Logo';
 import { PasswordDialog } from './PasswordDialog';
 import { Toast } from '@/components/Toast';
 
@@ -66,10 +65,6 @@ export function PasswordSecurity() {
 
   return (
     <PageWrapper>
-      <Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
-        <Logo />
-      </Box>
-      <Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
       <CardContainer
         title={t('securityForm.password')}
         subtitle={t('securityForm.determinePassword')}
@@ -78,11 +73,8 @@ export function PasswordSecurity() {
             variant="outlined"
             onClick={handleOpen}
             sx={{
-              mt: { xs: 2, sm: 0 },
               backgroundColor: 'primary.main',
               color: 'background.paper',
-              width: { xs: '100%', sm: '142px' },
-              textTransform: 'none',
             }}
           >
             {changePassword
@@ -121,7 +113,6 @@ export function PasswordSecurity() {
             </Typography>
           )}
 
-          {/* New PasswordDialog component usage */}
           <PasswordDialog
             open={open}
             fullScreen={fullScreen}

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

@@ -1,5 +1,6 @@
 import { Box, Typography } from '@mui/material';
 import { TickCircle } from 'iconsax-react';
+import { Icon } from '@rkheftan/harmony-ui';
 
 interface ValidationItemProps {
   isValid: boolean;
@@ -20,10 +21,11 @@ export function PasswordValidationItem({
         flexWrap: 'wrap',
       }}
     >
-      <TickCircle
-        size="16"
-        color={isValid ? '#14AE5C' : '#2979FF'}
+      <Icon
+        Component={TickCircle}
+        color={isValid ? 'success.main' : 'primary.main'}
         variant={isValid ? 'Bold' : 'Outline'}
+        size="small"
       />
       <Typography
         variant="body2"

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

@@ -45,7 +45,7 @@ export function RecentLogins() {
             },
           }}
         >
-          <Box sx={{ width: '100%', maxWidth: '754px', px: 4 }}>
+          <Box sx={{ px: 4 }}>
             {data.map((d) => (
               <React.Fragment key={d.id}>
                 <Box