diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 2ce900ec6..e93845628 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -444,6 +444,7 @@
     "FOUNDATION_COURSE": "Foundation Course",
     "MAIN_COURSE": "Main Course",
     "COLLAPSE_ALL": "Collapse All",
+    "EXPAND_ALL":"Expand All",
     "RESOURCES": "Resources"
   }
 }
diff --git a/src/pages/course-planner.tsx b/src/pages/course-planner.tsx
index b398b387c..fde9877a1 100644
--- a/src/pages/course-planner.tsx
+++ b/src/pages/course-planner.tsx
@@ -23,6 +23,15 @@ import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
 
 const CoursePlanner = () => {
   const [value, setValue] = React.useState(1);
+  const [subjects, setSubjects] = React.useState([
+    { id: 1, subject: 'Mathematics', circular: 10 },
+    { id: 2, subject: 'Science', circular: 50 },
+    { id: 2, subject: 'History', circular: 30 },
+    { id: 2, subject: 'Geography', circular: 60 },
+    { id: 2, subject: 'Marathi', circular: 90 },
+    { id: 2, subject: 'Hindi', circular: 70 },
+    { id: 2, subject: 'Social Science', circular: 80 },
+  ]);
   const theme = useTheme<any>();
   const { t } = useTranslation();
   const router = useRouter();
@@ -76,7 +85,7 @@ const CoursePlanner = () => {
                   }}
                 >
                   <MenuItem className="text-truncate">
-                    Khapari Dharmu (Chimur, Chandrap {/* will come from API */}
+                    Khapari Dharmu (Chimur, Chandrap) {/* will come from API */}
                   </MenuItem>
                 </Select>
               </FormControl>
@@ -112,7 +121,16 @@ const CoursePlanner = () => {
       </Grid>
 
       <Box sx={{ mt: 2 }}>
-        <Box sx={{ width: '100%' }}>
+        <Box
+          sx={{
+            width: '100%',
+            '@media (max-width: 600px)': {
+              display: 'flex',
+              justifyContent: 'center',
+            },
+            borderBottom: `1px solid ${theme.palette.primary.contrastText}`,
+          }}
+        >
           <Tabs
             value={value}
             onChange={handleChange}
@@ -120,7 +138,6 @@ const CoursePlanner = () => {
             aria-label="secondary tabs example"
             sx={{
               fontSize: '14px',
-              borderBottom: `1px solid ${theme.palette.primary.contrastText}`,
 
               '& .MuiTab-root': {
                 color: '#4D4639',
@@ -150,94 +167,107 @@ const CoursePlanner = () => {
             <Box
               sx={{
                 background: theme.palette.action.selected,
-                padding: '14px',
+                py: '2px',
                 borderRadius: '8px',
+                marginBottom: '20px',
               }}
             >
-              <Box
-                sx={{
-                  border: `1px solid ${theme.palette.warning.A100}`,
-                  borderRadius: '8px',
-                  padding: '12px',
-                  cursor: 'pointer',
-                }}
-                onClick={() => {
-                  router.push(`/course-planner-detail`); // Check route
-                }}
-              >
-                <Box
-                  sx={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                  }}
-                >
-                  <Box>
-                    <Box
-                      sx={{
-                        display: 'flex',
-                        gap: '15px',
-                        alignItems: 'center',
-                      }}
-                    >
+              <Grid container>
+                {subjects.map((item, index) => {
+                  return (
+                    <Grid key={item.id} item xs={12} sm={6} md={4}>
                       <Box
-                        sx={{ position: 'relative', display: 'inline-flex' }}
+                        sx={{
+                          border: `1px solid ${theme.palette.warning.A100}`,
+                          borderRadius: '8px',
+                          padding: '12px',
+                          cursor: 'pointer',
+                          margin: '14px',
+                        }}
+                        onClick={() => {
+                          router.push(`/course-planner-detail`); // Check route
+                        }}
                       >
-                        <Box sx={{ width: '40px', height: '40px' }}>
-                          <CircularProgressbar
-                            value={10}
-                            strokeWidth={10}
-                            styles={buildStyles({
-                              pathColor: '#06A816',
-                              trailColor: '#E6E6E6',
-                              strokeLinecap: 'round',
-                            })}
-                          />
-                        </Box>
-
                         <Box
                           sx={{
-                            top: 0,
-                            left: 0,
-                            bottom: 0,
-                            right: 0,
-                            position: 'absolute',
                             display: 'flex',
+                            justifyContent: 'space-between',
                             alignItems: 'center',
-                            justifyContent: 'center',
                           }}
                         >
-                          <Typography
-                            variant="caption"
-                            component="div"
-                            sx={{
-                              fontSize: '11px',
-                              color: theme.palette.warning['300'],
-                              fontWeight: '500',
-                            }}
-                          >
-                            10%
-                          </Typography>
-                        </Box>
-                      </Box>
+                          <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}
+                                    strokeWidth={10}
+                                    styles={buildStyles({
+                                      pathColor: '#06A816',
+                                      trailColor: '#E6E6E6',
+                                      strokeLinecap: 'round',
+                                    })}
+                                  />
+                                </Box>
 
-                      <Box
-                        sx={{
-                          fontSize: '16px',
-                          color: theme.palette.warning['300'],
-                        }}
-                      >
-                        Mathematics {/*  will come form API */}
+                                <Box
+                                  sx={{
+                                    top: 0,
+                                    left: 0,
+                                    bottom: 0,
+                                    right: 0,
+                                    position: 'absolute',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                  }}
+                                >
+                                  <Typography
+                                    variant="caption"
+                                    component="div"
+                                    sx={{
+                                      fontSize: '11px',
+                                      color: theme.palette.warning['300'],
+                                      fontWeight: '500',
+                                    }}
+                                  >
+                                    {item.circular}%
+                                  </Typography>
+                                </Box>
+                              </Box>
+
+                              <Box
+                                sx={{
+                                  fontSize: '16px',
+                                  color: theme.palette.warning['300'],
+                                }}
+                              >
+                                {item.subject}
+                              </Box>
+                            </Box>
+                          </Box>
+                          <Box>
+                            <KeyboardArrowRightIcon
+                              sx={{ color: theme.palette.warning['300'] }}
+                            />
+                          </Box>
+                        </Box>
                       </Box>
-                    </Box>
-                  </Box>
-                  <Box>
-                    <KeyboardArrowRightIcon
-                      sx={{ color: theme.palette.warning['300'] }}
-                    />
-                  </Box>
-                </Box>
-              </Box>
+                    </Grid>
+                  );
+                })}
+              </Grid>
             </Box>
           </Box>
         )}
diff --git a/src/pages/user-profile/[userId].tsx b/src/pages/user-profile/[userId].tsx
index 2ae58aaef..dac6f6b41 100644
--- a/src/pages/user-profile/[userId].tsx
+++ b/src/pages/user-profile/[userId].tsx
@@ -56,7 +56,8 @@ const TeacherProfile = () => {
   const [loading, setLoading] = useState(false);
   const [image, setImage] = useState(user_placeholder_img);
   const [isAuthenticated, setIsAuthenticated] = React.useState(false);
-  const [unitName, setUnitName] = useState('');
+  const [stateName, setStateName] = useState('');
+  const [districtName, setDistrictName] = useState('');
   const [blockName, setBlockName] = useState('');
   const [isError, setIsError] = React.useState<boolean>(false);
   const [isData, setIsData] = React.useState<boolean>(false);
@@ -193,7 +194,7 @@ const TeacherProfile = () => {
   // find Address
   const getFieldValue = (data: any, label: string) => {
     const field = data.find((item: any) => item.label === label);
-    return field ? field?.value[0] : null;
+    return field ? field?.value : null;
   };
 
   const { data, error, isLoading } = useProfileInfo(userId ?? '', true, reload);
@@ -213,6 +214,14 @@ const TeacherProfile = () => {
       const coreFieldData = data?.result?.userData;
       setUserName(toPascalCase(coreFieldData?.name));
       const fields: CustomField[] = data?.result?.userData?.customFields;
+      if (fields?.length > 0) {
+        const stateName = getFieldValue(fields, 'State');
+        setStateName(toPascalCase(stateName));
+        const districtName = getFieldValue(fields, 'District');
+        setDistrictName(toPascalCase(districtName));
+        const blockName = getFieldValue(fields, 'Block');
+        setBlockName(toPascalCase(blockName));
+      }
       const fieldIdToValueMap: { [key: string]: string } =
         mapFieldIdToValue(fields);
       console.log(`coreFieldData`, coreFieldData);
@@ -264,11 +273,6 @@ const TeacherProfile = () => {
 
               if (customDataFields?.length > 0) {
                 setCustomFieldsData(customDataFields);
-
-                const unitName = getFieldValue(customDataFields, 'Unit Name');
-                setUnitName(unitName);
-                const blockName = getFieldValue(customDataFields, 'Block Name');
-                setBlockName(blockName);
               }
             }
           } else {
@@ -339,7 +343,7 @@ const TeacherProfile = () => {
   };
 
   // address find
-  const address = [unitName, blockName, userData?.district, userData?.state]
+  const address = [stateName, districtName, blockName]
     ?.filter(Boolean)
     ?.join(', ');