diff --git a/src/core/App.css b/src/core/App.css
index 09e3781..0bc27eb 100644
--- a/src/core/App.css
+++ b/src/core/App.css
@@ -1,6 +1,7 @@
 html {
   scroll-behavior: smooth;
 }
+
 body {
   background: radial-gradient(
     ellipse at top,
@@ -14,6 +15,7 @@ body {
   max-width: 100%;
   overflow-x: hidden;
 }
+
 .App {
   display: flex;
   align-items: center;
@@ -50,16 +52,20 @@ a:hover {
   text-align: center;
   padding: 100px 20px;
 }
+
 .Zindex {
   z-index: 0 !important;
 }
+
 .z-10 {
   z-index: 100 !important;
   opacity: 1;
 }
+
 .communityLabel {
   padding: 55px 0 30px !important;
 }
+
 .subjectLabel {
   padding: 40px 0 20px 0 !important;
 }
@@ -117,6 +123,7 @@ a:hover {
   margin: 0 !important;
   width: 100%;
 }
+
 .subBtn .MuiButton-root:hover {
   background-color: transparent;
 }
@@ -124,7 +131,9 @@ a:hover {
 .subjectCard:hover {
   box-shadow: 0px 3px 7px 0px rgba(71, 71, 71, 0.144) !important;
   cursor: pointer;
+  color: #333;
 }
+
 .subject0 {
   color: darkred;
   background: radial-gradient(ellipse, rgb(255, 241, 241), rgb(255, 210, 210));
@@ -134,6 +143,7 @@ a:hover {
   color: darkgoldenrod;
   background: radial-gradient(ellipse, rgb(255, 252, 241), rgb(255, 254, 210));
 }
+
 .subject2 {
   color: darkgreen;
   background: radial-gradient(ellipse, rgb(244, 255, 241), rgb(221, 255, 210));
@@ -157,9 +167,11 @@ a:hover {
   position: fixed;
   bottom: 0;
 }
+
 .popContent {
   height: 98vh;
 }
+
 @media (max-width: 960px) {
   .subjectCard {
     margin: 24px;
@@ -195,7 +207,7 @@ a:hover {
 }
 /* git add . && git commit -am " " */
 /* 00419C */
-
+/* Overrirding material-ui style&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
 /* colors - XXX will be deprecated XXX */
 .bcol1 {
   background-color: #fff !important;
@@ -206,6 +218,8 @@ a:hover {
 .MuiGrid-justify-xs-center {
   margin: auto !important;
 }
+
 .MuiDialog-paperFullScreen {
   background-color: rgb(209, 209, 209) !important;
-}
\ No newline at end of file
+}
+/*&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
diff --git a/src/core/components/Sidebar/components/NestedSidebarList.jsx b/src/core/components/Sidebar/components/NestedSidebarList.jsx
index c68f633..096a3e1 100644
--- a/src/core/components/Sidebar/components/NestedSidebarList.jsx
+++ b/src/core/components/Sidebar/components/NestedSidebarList.jsx
@@ -51,7 +51,7 @@ export default function NestedSidebarList({
     }
   }
   // -------------------------------------------------
-  
+
   return (
     <List>
       <Collapse in={open} timeout="auto">
@@ -84,7 +84,7 @@ export default function NestedSidebarList({
               </div>
             ) : (
               <ListItem
-                className={classes.listItem}
+                className={`${putclass(index, arr)} ${classes.linker}`}
                 button
                 component={Link}
                 to={`/${item.name}/${item.id}`}