diff --git a/src/pages/subjectDetails.tsx b/src/pages/subjectDetails.tsx
index a5a90701..bcd7d913 100644
--- a/src/pages/subjectDetails.tsx
+++ b/src/pages/subjectDetails.tsx
@@ -605,7 +605,7 @@ const SubjectDetails = () => {
     router.back();
   };
 
-  const handleCopyLink = (subject: any) => {};
+  const handleCopyLink = (subject: any) => { };
 
   const handleCardClick = (subject: string) => {
     setTaxonomySubject(subject);
@@ -704,15 +704,8 @@ const SubjectDetails = () => {
 
   return (
     <Box>
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "row",
-          marginTop: "20px",
-          marginLeft: "20px",
-        }}
-      >
-        <Box>
+      <Grid container spacing={2} sx={{ marginTop: "20px" }}>
+        <Grid item xs={12} sm={12} md={4} lg={6} xl={3}>
           <Select
             value={selectedmedium || ""}
             onChange={handleMediumChange}
@@ -730,7 +723,7 @@ const SubjectDetails = () => {
               borderRadius: "8px",
               marginRight: "16px",
               height: 40,
-              width: "170px",
+              width: "100%",
             }}
           >
             <MenuItem value="">
@@ -742,8 +735,8 @@ const SubjectDetails = () => {
               </MenuItem>
             ))}
           </Select>
-        </Box>
-        <Box>
+        </Grid>
+        <Grid item xs={12} sm={12} md={4} lg={6} xl={3}>
           <Select
             value={selectedgrade || ""}
             onChange={handleGradeChange}
@@ -761,7 +754,7 @@ const SubjectDetails = () => {
               borderRadius: "8px",
               marginRight: "16px",
               height: 40,
-              width: "170px",
+              width: "100%",
             }}
           >
             <MenuItem value="">
@@ -773,9 +766,9 @@ const SubjectDetails = () => {
               </MenuItem>
             ))}
           </Select>
-        </Box>
+        </Grid>
 
-        <Box>
+        <Grid item xs={12} sm={12} md={4} lg={6} xl={4}>
           <Select
             value={selectedtype || ""}
             onChange={handleTypeChange}
@@ -792,7 +785,7 @@ const SubjectDetails = () => {
               border: "1px solid #3C3C3C",
               borderRadius: "8px",
               height: 40,
-              width: "170px",
+              width: "100%",
             }}
           >
             <MenuItem value="">
@@ -804,26 +797,25 @@ const SubjectDetails = () => {
               </MenuItem>
             ))}
           </Select>
-        </Box>
-        <Box>
+        </Grid>
+        <Grid item xs={12} sm={12} md={4} lg={6} xl={2}>
           <Button
             onClick={handleReset}
             sx={{
               height: 40,
-              width: "80px",
               backgroundColor: "#4D4639",
               color: "#FFFFFF",
               borderRadius: "8px",
-              marginLeft: "16px",
               "&:hover": {
                 backgroundColor: "black",
               },
+              width: "100%",
             }}
           >
             Reset
           </Button>
-        </Box>
-      </Box>
+        </Grid>
+      </Grid>
 
       <Box
         sx={{
@@ -845,57 +837,58 @@ const SubjectDetails = () => {
       </Box>
       <Divider />
 
-      <Box
-        sx={{
-          marginLeft: "20px",
-          marginTop: "16px",
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
-          gap: "16px", // Space between cards
-        }}
-      >
-        {subject && subject.length > 1 ? (
-          subject?.map((subj: string, index: number) => (
-            <MuiCard
-              key={index}
-              sx={{
-                padding: "14px",
-                cursor: "pointer",
-                border: "1px solid rgba(0, 0, 0, 0.1)",
-                boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.05)",
-                borderRadius: "8px",
-                transition: "all 0.3s ease",
-                "&:hover": {
-                  backgroundColor: "#EAF2FF",
-                  transform: "scale(1.02)",
-                },
-              }}
-              onClick={() => handleCardClick(subj)}
+      <Box sx={{ marginTop: "16px" }}>
+        <Grid container spacing={2}>
+
+
+          {subject && subject.length > 1 ? (
+            subject?.map((subj: string, index: number) => (
+              <Grid item xs={12} sm={6} md={4} lg={3} key={index}>
+                <MuiCard
+                  key={index}
+                  sx={{
+
+                    padding: "14px",
+                    cursor: "pointer",
+                    border: "1px solid rgba(0, 0, 0, 0.1)",
+                    boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.05)",
+                    borderRadius: "8px",
+                    transition: "all 0.3s ease",
+                    "&:hover": {
+                      backgroundColor: "#EAF2FF",
+                      transform: "scale(1.02)",
+                    },
+                    marginTop: "12px",
+                  }}
+                  onClick={() => handleCardClick(subj)}
+                >
+                  {/* Left Section: Folder Icon and Subject Name */}
+                  <Box
+                    sx={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "10px",
+                    }}
+                  >
+                    <FolderOutlinedIcon sx={{ color: "#3C3C3C" }} />
+                    <Typography variant="h6" noWrap>
+                      {subj || "Untitled Subject"}
+                    </Typography>
+                  </Box>
+                </MuiCard>
+              </Grid>
+
+            ))
+          ) : (
+            <Typography
+              variant="h4"
+              align="center"
+              sx={{ marginTop: "24px", color: "#6B7280" }}
             >
-              {/* Left Section: Folder Icon and Subject Name */}
-              <Box
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "10px",
-                }}
-              >
-                <FolderOutlinedIcon sx={{ color: "#3C3C3C" }} />
-                <Typography variant="h6" noWrap>
-                  {subj || "Untitled Subject"}
-                </Typography>
-              </Box>
-            </MuiCard>
-          ))
-        ) : (
-          <Typography
-            variant="h4"
-            align="center"
-            sx={{ marginTop: "24px", color: "#6B7280" }}
-          >
-            Select Medium, Grade, and Type
-          </Typography>
-        )}
+              Select Medium, Grade, and Type
+            </Typography>
+          )}
+        </Grid>
       </Box>
     </Box>
   );