diff --git a/src/components/CommonUserModal.tsx b/src/components/CommonUserModal.tsx
index d294f03..224340e 100644
--- a/src/components/CommonUserModal.tsx
+++ b/src/components/CommonUserModal.tsx
@@ -654,6 +654,7 @@ console.log("userType",userType, FormContextType.CONTENT_CREATOR)
                 color: "secondary",
                 fontSize: "14px",
                 fontWeight: "500",
+                textTransform: "capitalize"
               }}
               variant="outlined"
             >
diff --git a/src/pages/block.tsx b/src/pages/block.tsx
index 9f047d0..e57e920 100644
--- a/src/pages/block.tsx
+++ b/src/pages/block.tsx
@@ -1044,7 +1044,7 @@ const Block: React.FC = () => {
             flexDirection={"column"}
             alignItems={"center"}
           >
-            <Loader showBackdrop={false} loadingText="Loading..." />
+            <Loader showBackdrop={false} loadingText="Loading" />
           </Box>
         ) : (
           <>
diff --git a/src/pages/course-hierarchy/[identifier].tsx b/src/pages/course-hierarchy/[identifier].tsx
index e266e94..3e75207 100644
--- a/src/pages/course-hierarchy/[identifier].tsx
+++ b/src/pages/course-hierarchy/[identifier].tsx
@@ -6,12 +6,14 @@ import {
   Typography,
   Link,
   Box,
+  Grid,
 } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { getContentHierarchy } from '@/services/coursePlanner';
 import { useRouter } from 'next/router';
 import Loader from '@/components/Loader';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import ResourceCard from '@/components/ResourceCard';
 
 const RecursiveAccordion = ({ data }: { data: any[] }) => {
   let router = useRouter();
@@ -38,22 +40,12 @@ const RecursiveAccordion = ({ data }: { data: any[] }) => {
             {node.children && renderAccordion(node.children, level + 1)}
           </>
         ) : node.contentType === 'Resource' ? (
-          <Box
-            className="facilitator-bg"
-            sx={{
-              backgroundImage: `url(${node?.appIcon ? node.appIcon : '/decorationBg.png'})`,
-              position: 'relative',
-              marginLeft: `${(level - 1) * 2}px`, // Indentation for resources
-              cursor: 'pointer',
-              height: '50px',
-              width: '50px',
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-            }}
-            onClick={() =>
-              router.push(`/play/content/${node?.identifier || node?.id}`)
-            }
-          ></Box>
+          <Grid container>
+            <Grid item xs={6} md={4} lg={3} sx={{ mt: 2 }}>
+              <ResourceCard title={node?.name} resource={node?.resourceType} identifier={node?.identifier} mimeType={node?.mimeType} />
+            </Grid>
+          </Grid>
+
         ) : (
           <Accordion sx={{ marginLeft: `${(level - 1) * 2}px` }}>
             <AccordionSummary expandIcon={<ExpandMoreIcon />}>
@@ -114,7 +106,7 @@ export default function CourseHierarchy() {
 
   if (loading) {
     return (
-      <Loader showBackdrop={true} loadingText="Loading..." />
+      <Loader showBackdrop={true} loadingText="Loading" />
     );
   }
 
diff --git a/src/pages/stateDetails.tsx b/src/pages/stateDetails.tsx
index ba8e7c9..540d52e 100644
--- a/src/pages/stateDetails.tsx
+++ b/src/pages/stateDetails.tsx
@@ -68,7 +68,7 @@ const StateDetails = () => {
   };
 
   if (loading) {
-    return <Loader showBackdrop={true} loadingText="Loading..." />;
+    return <Loader showBackdrop={true} loadingText="Loading" />;
   }
 
   return (
diff --git a/src/pages/subjectDetails.tsx b/src/pages/subjectDetails.tsx
index c266744..25c57a3 100644
--- a/src/pages/subjectDetails.tsx
+++ b/src/pages/subjectDetails.tsx
@@ -475,7 +475,7 @@ const SubjectDetails = () => {
   }, [selectedtype]);
 
   if (loading) {
-    return <Loader showBackdrop={true} loadingText="Loading..." />;
+    return <Loader showBackdrop={true} loadingText="Loading" />;
   }
 
   const handleBackClick = () => {