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>
         )}