diff --git a/src/components/AssessmentReportCard.tsx b/src/components/AssessmentReportCard.tsx
index f160dc80..5c5cea7b 100644
--- a/src/components/AssessmentReportCard.tsx
+++ b/src/components/AssessmentReportCard.tsx
@@ -95,7 +95,7 @@ const AssessmentReportCard: React.FC<AssessmentReportCardProp> = ({
   };
 
   return (
-    <Grid item xs={12} sm={6} md={4} key={userId}>
+    <Grid item xs={12} sm={12} md={6} lg={4} key={userId}>
       <Box
         sx={{
           border: `1px solid ${theme?.palette?.warning['A100']}`,
diff --git a/src/components/CohortSelectionSection.tsx b/src/components/CohortSelectionSection.tsx
index fcd673bd..506bb5cf 100644
--- a/src/components/CohortSelectionSection.tsx
+++ b/src/components/CohortSelectionSection.tsx
@@ -343,8 +343,12 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
     localStorage.setItem('cohortId', cohort_id);
   };
 
+  const teacher: string | null =
+    typeof window !== 'undefined' && window.localStorage
+      ? localStorage.getItem('role')
+      : null;
+
   const isAttendanceOverview = pathname === '/attendance-overview';
-  const teacher = localStorage.getItem('role');
   const isAssessment = pathname === '/assessments';
   const dashboard = pathname === '/dashboard';
 
diff --git a/src/pages/assessments/user/[userId]/index.tsx b/src/pages/assessments/user/[userId]/index.tsx
index acc1f531..64e7ebba 100644
--- a/src/pages/assessments/user/[userId]/index.tsx
+++ b/src/pages/assessments/user/[userId]/index.tsx
@@ -30,7 +30,11 @@ import { useParams, useSearchParams } from 'next/navigation';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { accessControl, AssessmentType, Program } from '../../../../../app.config';
+import {
+  accessControl,
+  AssessmentType,
+  Program,
+} from '../../../../../app.config';
 import { useQueryClient } from '@tanstack/react-query';
 import withAccessControl from '@/utils/hoc/withAccessControl';
 import NoDataFound from '@/components/common/NoDataFound';
@@ -377,7 +381,14 @@ function AssessmentsDetails() {
         >
           <Grid container spacing={2}>
             {subject?.map((assessment: any) => (
-              <Grid item xs={12} sm={6} md={4} key={assessment.identifier}>
+              <Grid
+                item
+                xs={12}
+                sm={12}
+                md={6}
+                lg={4}
+                key={assessment.identifier}
+              >
                 <Box
                   sx={{
                     border: `1px solid ${theme.palette.warning['A100']}`,
@@ -399,6 +410,7 @@ function AssessmentsDetails() {
                       fontWeight: '400',
                       color: theme.palette.warning['300'],
                     }}
+                    className="one-line-text"
                   >
                     {assessment?.subject}
                   </Box>
@@ -448,9 +460,7 @@ function AssessmentsDetails() {
         </Box>
       )}
 
-      {!isLoading && !assessmentList?.length && (
-        <NoDataFound />
-      )}
+      {!isLoading && !assessmentList?.length && <NoDataFound />}
 
       {isLoading && (
         <Box
@@ -490,4 +500,7 @@ export async function getStaticProps({
   };
 }
 
-export default withAccessControl('accessAssessments', accessControl)(AssessmentsDetails);
+export default withAccessControl(
+  'accessAssessments',
+  accessControl
+)(AssessmentsDetails);
diff --git a/src/pages/assessments/user/[userId]/subject/[subjectId]/index.tsx b/src/pages/assessments/user/[userId]/subject/[subjectId]/index.tsx
index 4b245262..a656809f 100644
--- a/src/pages/assessments/user/[userId]/subject/[subjectId]/index.tsx
+++ b/src/pages/assessments/user/[userId]/subject/[subjectId]/index.tsx
@@ -244,4 +244,7 @@ function SubjectDetail() {
   );
 }
 
-export default withAccessControl('accessAssessments', accessControl)(SubjectDetail);
\ No newline at end of file
+export default withAccessControl(
+  'accessAssessments',
+  accessControl
+)(SubjectDetail);
diff --git a/src/pages/board-enrollment/index.tsx b/src/pages/board-enrollment/index.tsx
index 9077f8b5..b2cebc6e 100644
--- a/src/pages/board-enrollment/index.tsx
+++ b/src/pages/board-enrollment/index.tsx
@@ -13,14 +13,7 @@ import ArrowDropDownSharpIcon from '@mui/icons-material/ArrowDropDownSharp';
 import EastIcon from '@mui/icons-material/East';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import SearchIcon from '@mui/icons-material/Search';
-import {
-  Box,
-  Button,
-  Grid,
-  IconButton,
-  InputBase,
-  Paper
-} from '@mui/material';
+import { Box, Button, Grid, IconButton, InputBase, Paper } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
@@ -234,12 +227,14 @@ const BoardEnrollment = () => {
       <Grid container sx={{ my: 4, px: '16px' }} spacing={2}>
         {boardEnrollmentList.map((item: any, index: any) => {
           return (
-            <Grid key={index} item xs={12} md={6} lg={6} xl={4}>
+            <Grid key={index} item xs={12} sm={12} md={6} lg={4}>
               <Box
                 sx={{
                   border: `1px solid ${theme.palette.warning['A100']}`,
                   minHeight: '143px',
                   borderRadius: '8px',
+                  position: 'relative',
+                  cursor: 'pointer',
                 }}
                 onClick={() => {
                   item.isDropout
@@ -300,6 +295,7 @@ const BoardEnrollment = () => {
                       gap: '5px',
                       mb: '12px',
                       mx: '16px',
+                      mt: 4,
                     }}
                   >
                     {t('COMMON.DROPPED_OUT')}{' '}
diff --git a/src/pages/course-planner.tsx b/src/pages/course-planner.tsx
index a20254bc..f839ca00 100644
--- a/src/pages/course-planner.tsx
+++ b/src/pages/course-planner.tsx
@@ -131,7 +131,6 @@ const CoursePlanner = () => {
 
   useEffect(() => {
     const fetchCohortSearchResults = async () => {
-
       setLoading(true);
       setState('');
       setBoard('');
@@ -174,8 +173,6 @@ const CoursePlanner = () => {
           //   }
           // });
 
-         
-
           stringFields.forEach(({ label, setter }) => {
             const field = cohortDetails.customFields.find(
               (field: any) => field.label === label
@@ -187,8 +184,6 @@ const CoursePlanner = () => {
           });
         }
 
-        
-        
         setLoading(false);
       } catch (error) {
         console.error('Failed to fetch cohort search results:', error);
@@ -198,7 +193,6 @@ const CoursePlanner = () => {
     fetchCohortSearchResults();
   }, [selectedValue]);
 
-
   useEffect(() => {
     const fetchTaxonomyResults = async () => {
       try {
@@ -477,7 +471,7 @@ const CoursePlanner = () => {
 
             const overallCommonSubjects =
               await findOverallCommonSubjects(arrays);
-            
+
             localStorage.setItem(
               'overallCommonSubjects',
               JSON.stringify(overallCommonSubjects)
@@ -597,29 +591,33 @@ const CoursePlanner = () => {
           </Box>
         </Grid>
         <Grid item xs={12} md={6}>
-  <Box sx={{ mt: 2, px: '20px', width: '100%' }}>
-    <FormControl sx={{ width: '100%' }}>
-      <InputLabel id="course-type-select-label">Course Type</InputLabel>
-      <Select
-        labelId="course-type-select-label"
-        id="course-type-select"
-        value={value}
-        onChange={handleChange}
-        label="Course Type"
-        sx={{ fontSize: '14px' }}
-        disabled={!tStore.state || !tStore.board || !tStore.medium || !tStore.grade} // Disable if any field is empty
-      >
-        <MenuItem value={'Foundation Course'}>
-          {t('COURSE_PLANNER.FOUNDATION_COURSE')}
-        </MenuItem>
-        <MenuItem value={'Main Course'}>
-          {t('COURSE_PLANNER.MAIN_COURSE')}
-        </MenuItem>
-      </Select>
-    </FormControl>
-  </Box>
-</Grid>
-
+          <Box sx={{ mt: 2, px: '20px', width: '100%' }}>
+            <FormControl sx={{ width: '100%' }}>
+              <InputLabel id="course-type-select-label">Course Type</InputLabel>
+              <Select
+                labelId="course-type-select-label"
+                id="course-type-select"
+                value={value}
+                onChange={handleChange}
+                label="Course Type"
+                sx={{ fontSize: '14px' }}
+                disabled={
+                  !tStore.state ||
+                  !tStore.board ||
+                  !tStore.medium ||
+                  !tStore.grade
+                } // Disable if any field is empty
+              >
+                <MenuItem value={'Foundation Course'}>
+                  {t('COURSE_PLANNER.FOUNDATION_COURSE')}
+                </MenuItem>
+                <MenuItem value={'Main Course'}>
+                  {t('COURSE_PLANNER.MAIN_COURSE')}
+                </MenuItem>
+              </Select>
+            </FormControl>
+          </Box>
+        </Grid>
       </Grid>
 
       <Box sx={{ m: 3 }}>
@@ -632,55 +630,54 @@ const CoursePlanner = () => {
               marginBottom: '20px',
             }}
           >
-             <Grid container>
-      {anyFieldsEmpty ? (
-        <Box sx={{ ml: 2, p: 2 }}>
-          <Typography variant="h2">
-            {`No assigned ${emptyFields.join(', ')}`}
-          </Typography>
-        </Box>
-      ) : (
-        subjects?.length > 0 ? (
-          subjects.map((item:any) => (
-            <Grid key={item.code} item xs={12} sm={6} md={4}>
-              <Box
-                sx={{
-                  border: `1px solid ${theme.palette.warning.A100}`,
-                  borderRadius: '8px',
-                  padding: '12px',
-                  cursor: 'pointer',
-                  margin: '14px',
-                  background: theme.palette.warning['A400'],
-                }}
-                onClick={() => {
-                  setTaxonomySubject(item.name);
-                  router.push({
-                    pathname: '/course-planner-detail',
-                  });
-                }}
-              >
-                <Box
-                  sx={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                  }}
-                >
-                  <Box>
+            <Grid container>
+              {anyFieldsEmpty ? (
+                <Box sx={{ ml: 2, p: 2 }}>
+                  <Typography variant="h2">
+                    {`No assigned ${emptyFields.join(', ')}`}
+                  </Typography>
+                </Box>
+              ) : subjects?.length > 0 ? (
+                subjects.map((item: any) => (
+                  <Grid key={item.code} item xs={12} sm={12} md={6} lg={4}>
                     <Box
                       sx={{
-                        display: 'flex',
-                        gap: '15px',
-                        alignItems: 'center',
+                        border: `1px solid ${theme.palette.warning.A100}`,
+                        borderRadius: '8px',
+                        padding: '12px',
+                        cursor: 'pointer',
+                        margin: '14px',
+                        background: theme.palette.warning['A400'],
+                      }}
+                      onClick={() => {
+                        setTaxonomySubject(item.name);
+                        router.push({
+                          pathname: '/course-planner-detail',
+                        });
                       }}
                     >
                       <Box
                         sx={{
-                          position: 'relative',
-                          display: 'inline-flex',
+                          display: 'flex',
+                          justifyContent: 'space-between',
+                          alignItems: 'center',
                         }}
                       >
-                      {/* <Box sx={{ width: '40px', height: '40px' }}>
+                        <Box>
+                          <Box
+                            sx={{
+                              display: 'flex',
+                              gap: '15px',
+                              alignItems: 'center',
+                            }}
+                          >
+                            <Box
+                              sx={{
+                                position: 'relative',
+                                display: 'inline-flex',
+                              }}
+                            >
+                              {/* <Box sx={{ width: '40px', height: '40px' }}>
                                 <CircularProgressbar
                                   value={item.circular || 0}
                                   strokeWidth={10}
@@ -718,34 +715,33 @@ const CoursePlanner = () => {
                               </Box> */}
                             </Box>
 
-                      <Box
-                        sx={{
-                          fontSize: '16px',
-                          color: theme.palette.warning['300'],
-                        }}
-                      >
-                        {item.name}
+                            <Box
+                              sx={{
+                                fontSize: '16px',
+                                color: theme.palette.warning['300'],
+                              }}
+                            >
+                              {item.name}
+                            </Box>
+                          </Box>
+                        </Box>
+                        <Box>
+                          <KeyboardArrowRightIcon
+                            sx={{ color: theme.palette.warning['300'] }}
+                          />
+                        </Box>
                       </Box>
                     </Box>
-                  </Box>
-                  <Box>
-                    <KeyboardArrowRightIcon
-                      sx={{ color: theme.palette.warning['300'] }}
-                    />
-                  </Box>
+                  </Grid>
+                ))
+              ) : (
+                <Box sx={{ ml: 2, p: 2 }}>
+                  <Typography variant="h2">
+                    {t('ASSESSMENTS.NO_SUBJECT_FOUND')}
+                  </Typography>
                 </Box>
-              </Box>
+              )}
             </Grid>
-          ))
-        ) : (
-          <Box sx={{ ml: 2, p: 2 }}>
-            <Typography variant="h2">
-              {t('ASSESSMENTS.NO_SUBJECT_FOUND')}
-            </Typography>
-          </Box>
-        )
-      )}
-    </Grid>
           </Box>
         </Box>
       </Box>
diff --git a/src/pages/user-profile/[userId].tsx b/src/pages/user-profile/[userId].tsx
index 1c3b8b57..e1b7a9dc 100644
--- a/src/pages/user-profile/[userId].tsx
+++ b/src/pages/user-profile/[userId].tsx
@@ -443,7 +443,6 @@ const TeacherProfile: React.FC<TeacherProfileProp> = ({
           >
             {userRole === Role.TEAM_LEADER && userId !== selfUserId ? (
               <Button
-                className="min-width-md-20"
                 sx={{
                   fontSize: '14px',
                   lineHeight: '20px',