diff --git a/client/src/components/learningPath/LearningPathDiagram.vue b/client/src/components/learningPath/LearningPathDiagram.vue
index 0055da5c..643da115 100644
--- a/client/src/components/learningPath/LearningPathDiagram.vue
+++ b/client/src/components/learningPath/LearningPathDiagram.vue
@@ -319,12 +319,9 @@ export default {
         .style("text-anchor", "middle")
         .call(wrap, circleWidth - 20)
         .attr("class", () => {
-          let classes = "circlesText text-xl font-bold block";
-          if (
-            this.diagramType === "vertical" ||
-            this.diagramType === "horizontalSmall"
-          ) {
-            classes += " hidden";
+          let classes = "circlesText text-xl font-bold hidden";
+          if (this.diagramType === "horizontal") {
+            classes += " lg:block";
           }
           return classes;
         });
@@ -338,13 +335,9 @@ export default {
           );
         })
         .attr("class", (d) => {
-          let classes = "topic";
-          if (
-            this.diagramType === "vertical" ||
-            this.diagramType === "horizontalSmall" ||
-            !d.is_visible
-          ) {
-            classes += " hidden";
+          let classes = "topic hidden";
+          if (this.diagramType === "horizontal" && d.is_visible) {
+            classes += " lg:block";
           }
           return classes;
         });
@@ -358,15 +351,11 @@ export default {
         .duration("1000")
         .attr("y2", 350);
 
-      let topicTitlesClassValue = "topic-title font-bold";
-      if (this.diagramType === "horizontalSmall") {
-        topicTitlesClassValue += " hidden";
-      }
       topicTitles
         .attr("y", 20)
         .style("font-size", "18px")
         .call(wrap, circleWidth * 0.8)
-        .attr("class", topicTitlesClassValue);
+        .attr("class", "topic-title font-bold");
     }
 
     function wrap(text, width) {
@@ -413,8 +402,8 @@ export default {
       :id="svgId"
       class="learning-path-visualization h-full mx-auto -mt-6 lg:mt-0"
       :class="{
-        'max-h-[384px]': ['horizontal'].includes(diagramType),
         'max-h-[90px]': ['horizontalSmall'].includes(diagramType),
+        'max-h-[90px] lg:max-h-[380px]': ['horizontal'].includes(diagramType),
       }"
       :viewBox="viewBox"
     ></svg>
diff --git a/client/src/pages/learningPath/LearningPathPage.vue b/client/src/pages/learningPath/LearningPathPage.vue
index f343d97d..6ad634fe 100644
--- a/client/src/pages/learningPath/LearningPathPage.vue
+++ b/client/src/pages/learningPath/LearningPathPage.vue
@@ -68,7 +68,7 @@ const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
             </button>
           </div>
           <LearningPathDiagram
-            class="mx-auto max-w-[1920px] max-h-[380px] w-full px-4"
+            class="mx-auto max-w-[1920px] max-h-[90px] lg:max-h-[380px] w-full px-4"
             diagram-type="horizontal"
             :learning-path="learningPathStore.learningPath"
           ></LearningPathDiagram>