diff --git a/src/pages/subjectDetails.tsx b/src/pages/subjectDetails.tsx
index 8b181fa7..2024e112 100644
--- a/src/pages/subjectDetails.tsx
+++ b/src/pages/subjectDetails.tsx
@@ -839,42 +839,27 @@ const SubjectDetails = () => {
       <Divider />
 
       <Box sx={{ marginTop: "16px" }}>
-        <Grid container spacing={2}>
-          {subject && subject.length > 1 ? (
-            subject.map((subj: any, index: number) => (
-              <Grid item xs={12} md={4} key={index}>
-                <Box
-                  onClick={() => handleCardClick(subj)}
-                  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",
-                  }}
-                >
-                  <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
-                    <FolderOutlinedIcon sx={{ color: "#3C3C3C" }} />
-                    <Typography variant="h6" noWrap>
-                      {subj?.name || "Untitled Subject"}
-                    </Typography>
-                  </Box>
-                </Box>
-              </Grid>
-            ))
-          ) : (
-            <Typography
-              variant="h4"
-              align="center"
-              sx={{ marginTop: "24px", color: "#6B7280" }}
+        {subject && subject.length > 1 ? (
+          subject?.map((subj: string, index: number) => (
+            <MuiCard
+              key={index}
+              sx={{
+                display: "grid",
+                gridTemplateColumns: "1fr 2fr 1fr",
+                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={{
@@ -899,8 +884,6 @@ const SubjectDetails = () => {
             Select Medium, Grade, and Type
           </Typography>
         )}
-
-        </Grid>
       </Box>
     </Box>
   );