diff --git a/assets/vue/components/course/CourseToolList.vue b/assets/vue/components/course/CourseTool.vue
similarity index 70%
rename from assets/vue/components/course/CourseToolList.vue
rename to assets/vue/components/course/CourseTool.vue
index dbe7992bae..1aa1ae34df 100644
--- a/assets/vue/components/course/CourseToolList.vue
+++ b/assets/vue/components/course/CourseTool.vue
@@ -4,9 +4,10 @@
       :aria-labelledby="`course-tool-${tool.ctool.iid}`"
       :href="goToCourseTool(course, tool)"
       class="course-tool__link"
+      :class="cardCustomClass"
     >
       <span
-        :class="tool.tool.icon"
+        :class="tool.tool.icon + ' ' + iconCustomClass"
         aria-hidden="true"
         class="course-tool__icon mdi"
       />
@@ -17,6 +18,7 @@
       v-t="tool.tool.nameToShow"
       :href="goToCourseTool(course, tool)"
       class="course-tool__title"
+      :class="titleCustomClass"
     />
 
     <div class="course-tool__options">
@@ -25,14 +27,13 @@
         @click="changeVisibility(course, tool)"
       >
         <BaseIcon
-          v-if="tool.ctool.resourceNode.resourceLinks[0].visibility === 2"
+          v-if="isVisible"
           icon="eye-on"
-          size="small"
         />
         <BaseIcon
           v-else
           icon="eye-off"
-          size="small"
+          class="text-gray-50"
         />
       </button>
 
@@ -67,7 +68,7 @@ const isSorting = inject("isSorting");
 const isCustomizing = inject("isCustomizing");
 
 // eslint-disable-next-line no-undef
-defineProps({
+const props = defineProps({
   course: {
     type: Object,
     required: true
@@ -91,4 +92,23 @@ defineProps({
 });
 
 const isCurrentTeacher = computed(() => store.getters["security/isCurrentTeacher"]);
+const cardCustomClass = computed(() => {
+  if (isVisible.value) {
+    return '';
+  }
+  return 'bg-primary-bgdisabled border-primary-borderdisabled shadow-none ';
+})
+const iconCustomClass = computed(() => {
+  if (isVisible.value) {
+    return 'bg-primary-bgdisabled ';
+  }
+  return 'bg-gradient-to-b from-gray-50 to-gray-25 ';
+})
+const titleCustomClass = computed(() => {
+  if (isVisible.value) {
+    return '';
+  }
+  return 'text-gray-90 ';
+})
+const isVisible = computed(() => props.tool.ctool.resourceNode.resourceLinks[0].visibility === 2);
 </script>
diff --git a/assets/vue/views/course/CourseHome.vue b/assets/vue/views/course/CourseHome.vue
index 6fd14542bc..c81d879c22 100644
--- a/assets/vue/views/course/CourseHome.vue
+++ b/assets/vue/views/course/CourseHome.vue
@@ -132,7 +132,7 @@
     <hr class="mt-0 mb-4" />
 
     <div class="grid gap-y-12 sm:gap-x-5 md:gap-x-16 md:gap-y-12 grid-cols-course-tools">
-      <CourseToolList
+      <CourseTool
         v-for="(tool, index) in tools.authoring"
         :key="index"
         :change-visibility="changeVisibility"
@@ -142,7 +142,7 @@
         :tool="tool"
       />
 
-      <CourseToolList
+      <CourseTool
         v-for="(tool, index) in tools.interaction"
         :key="index"
         :change-visibility="changeVisibility"
@@ -152,7 +152,7 @@
         :tool="tool"
       />
 
-      <CourseToolList
+      <CourseTool
         v-for="(tool, index) in tools.plugin"
         :key="index"
         :change-visibility="changeVisibility"
@@ -180,9 +180,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import axios from "axios";
 import { ENTRYPOINT } from "../../config/entrypoint";
-import Button from "primevue/button";
-import ToggleButton from "primevue/togglebutton";
-import CourseToolList from "../../components/course/CourseToolList.vue";
+import CourseTool from "../../components/course/CourseTool";
 import ShortCutList from "../../components/course/ShortCutList.vue";
 import translateHtml from "../../../js/translatehtml.js";
 import EmptyState from "../../components/EmptyState";