diff --git a/client/src/components/learningPath/page/LearningPathPathView.vue b/client/src/components/learningPath/page/LearningPathPathView.vue
index 55e4c2c4..1be9d796 100644
--- a/client/src/components/learningPath/page/LearningPathPathView.vue
+++ b/client/src/components/learningPath/page/LearningPathPathView.vue
@@ -46,7 +46,7 @@ const scrollLearnPathDiagram = (offset: number) => {
     ></LearningPathScrollButton>
     <div
       ref="learnPathDiagram"
-      class="flex h-96 snap-x flex-row overflow-auto py-5 sm:overflow-hidden sm:py-10"
+      class="no-scrollbar flex h-96 snap-x flex-row overflow-auto py-5 sm:py-10"
     >
       <div
         v-for="(topic, topicIndex) in props.learningPath?.topics ?? []"
diff --git a/client/tailwind.css b/client/tailwind.css
index 4d5a61c1..8580a79c 100644
--- a/client/tailwind.css
+++ b/client/tailwind.css
@@ -133,4 +133,14 @@ svg {
     height: 100vh;
     overflow: hidden;
   }
+
+  /* Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
 }