diff --git a/client/src/components/circle/LearningPathDiagram.vue b/client/src/components/circle/LearningPathDiagram.vue
index e0519021..6d428941 100644
--- a/client/src/components/circle/LearningPathDiagram.vue
+++ b/client/src/components/circle/LearningPathDiagram.vue
@@ -142,7 +142,6 @@ export default {
       .attr('fill', blue900)
       .style('font-size', 19)
       .text((d) => d.title)
-      .attr('class', 'circlesText text-xl font-bold hidden lg:block')
 
     const topicHeightOffset = 20
     const topicHeight = 50
@@ -192,9 +191,6 @@ export default {
       .data(this.learningPath.topics)
       .enter()
       .append('g')
-      .attr('class', (d) => {
-        return 'topic '.concat(d.is_visible ? "hidden lg:block" : "hidden")
-      })
 
     const topicLines = topicGroups
       .append('line')
@@ -217,18 +213,22 @@ export default {
 
       circle_groups
         .attr('transform', (d, i) => {
-          return 'translate('+ Circles_X + ',' + getCircleVerticalPostion(i, d, this.learningPath.topics) + ')'
+          return 'translate(' + Circles_X + ',' + getCircleVerticalPostion(i, d, this.learningPath.topics) + ')'
         })
 
       circlesText
         .attr('y', 7)
         .attr('x', radius + 40)
+        .attr('class', 'circlesText text-xl font-bold block')
 
 
       topicGroups
         .attr('transform', (d, i) => {
           return "translate(" + Topics_X + ", " + getTopicVerticalPosition(i, d, this.learningPath.topics) + ")"
         })
+        .attr('class', (d) => {
+          return 'topic '.concat(d.is_visible ? "block" : "hidden")
+        })
 
 
       topicLines
@@ -249,11 +249,17 @@ export default {
         .attr('y', radius + 30)
         .style('text-anchor', 'middle')
         .call(wrap, circleWidth - 20)
+        .attr('class', 'circlesText text-xl font-bold hidden lg:block')
+
 
       topicGroups
         .attr('transform', (d, i) => {
           return "translate(" + getTopicHorizontalPosition(i, d, this.learningPathStore.learningPath.topics) + ",0)"
         })
+        .attr('class', (d) => {
+          return 'topic '.concat(d.is_visible ? "hidden lg:block" : "hidden")
+        })
+
 
       topicLines
         .attr('x1', -10)