diff --git a/src/components/DateRangePopup.tsx b/src/components/DateRangePopup.tsx
index 15f2e0dc..87900091 100644
--- a/src/components/DateRangePopup.tsx
+++ b/src/components/DateRangePopup.tsx
@@ -233,12 +233,12 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
           <Box>
             <Grid sx={{ padding: '20px 20px 5px' }} container>
               <Grid item xs={6}>
-                <Typography textAlign={'left'}>
+                <Typography className="text4D" textAlign={'left'}>
                   {t('COMMON.DATE_RANGE')}
                 </Typography>
               </Grid>
               <Grid item xs={6} textAlign={'right'}>
-                <CloseIcon onClick={toggleModal} />
+                <CloseIcon className="text4D" onClick={toggleModal} />
               </Grid>
             </Grid>
           </Box>
@@ -254,10 +254,9 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
                   alignItems: 'center',
                   paddingLeft: '32px',
                   backgroundColor: 'transparent',
-                  color: index === 4 ? theme.palette.secondary.main : 'inherit',
+                  color: index === 4 ? '#4D4639' : 'inherit',
                   '&:hover': {
                     backgroundColor: 'transparent',
-                    color: '#0D599E',
                   },
                 }}
               >
@@ -268,8 +267,9 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
                       left: '8px',
                       minWidth: 'auto',
                     }}
+                    className="text4D"
                   >
-                    <Check fontSize="small" />
+                    <Check className="text4D" fontSize="small" />
                   </ListItemIcon>
                 )}
                 {item}
diff --git a/src/components/LearnerModal.tsx b/src/components/LearnerModal.tsx
index a55f16a4..76482a97 100644
--- a/src/components/LearnerModal.tsx
+++ b/src/components/LearnerModal.tsx
@@ -106,7 +106,7 @@ const LearnerModal = ({
               />
               <Box sx={{ padding: ' 25px 20px' }}>
                 <Box
-                  style={{ border: '1px solid gray', borderRadius: '16px' }}
+                  style={{ border: '1px solid #D0C5B4', borderRadius: '16px' }}
                   p={2}
                 >
                   <Grid container spacing={2}>
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 19ff1929..65b1f8e9 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -94,8 +94,13 @@ const ModalComponent: React.FC<ModalProps> = ({
           />
         </Box>
         <Typography variant="h6">{SubHeading}</Typography>
-        <Box mt={2}>{children}</Box>
-        <Box mt={2} p={'0 20px 20px'} display="flex" justifyContent="flex-end">
+        <Box mt={0.6}>{children}</Box>
+        <Box
+          mt={2}
+          p={'4px 20px 20px'}
+          display="flex"
+          justifyContent="flex-end"
+        >
           <ButtonFunctional
             handleClickButton={handleApplySort}
             buttonName={t('COMMON.APPLY')}
diff --git a/src/components/SortingModal.tsx b/src/components/SortingModal.tsx
index f905198c..d2109277 100644
--- a/src/components/SortingModal.tsx
+++ b/src/components/SortingModal.tsx
@@ -101,7 +101,7 @@ const SortingModal: React.FC<sortCardProps> = ({
     >
       <Divider
         style={{
-          backgroundColor: theme.palette.warning['400'],
+          backgroundColor: theme.palette.warning.A100,
         }}
       />
       <Grid container sx={{ padding: '10px 20px 0' }} spacing={2}>
@@ -253,7 +253,7 @@ const SortingModal: React.FC<sortCardProps> = ({
       </Grid>
       <Divider
         style={{
-          backgroundColor: theme.palette.warning['400'],
+          backgroundColor: theme.palette.warning.A100,
           marginBottom: '10px',
           marginTop: '15px',
         }}
diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
index e5794626..70bdbd2f 100644
--- a/src/pages/profile.tsx
+++ b/src/pages/profile.tsx
@@ -534,8 +534,7 @@ const TeacherProfile = () => {
                 flex: '1',
                 textAlign: 'center',
                 color: theme.palette.warning.A200,
-                border: `1px solid ${theme.palette.warning.A200}`,
-                borderColor: theme.palette.warning['A100'],
+                border: `1px solid #4D4639`,
               }}
               onClick={handleOpen}
             >
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 153166f9..4ab796e5 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -663,3 +663,6 @@ main {
   justify-content: center !important;
   align-items: center !important;
 }
+.text4D {
+  color: #4d4639 !important;
+}