diff --git a/client/index.html b/client/index.html
index 75616849..d51b3bec 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="de">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
diff --git a/client/src/components/circle/LearningPathDiagram.vue b/client/src/components/circle/LearningPathDiagram.vue
index aea2502a..d2beac47 100644
--- a/client/src/components/circle/LearningPathDiagram.vue
+++ b/client/src/components/circle/LearningPathDiagram.vue
@@ -1,18 +1,11 @@
 <script>
 import * as d3 from 'd3'
-import { useLearningPathStore } from '../../stores/learningPath'
+import { useLearningPathStore } from '@/stores/learningPath'
 import colors from '@/colors.json'
+import * as log from 'loglevel'
 
 export default {
   props: {
-    width: {
-      default: 1640,
-      type: Number,
-    },
-    height: {
-      default: 256,
-      type: Number,
-    },
     vertical: {
       default: false,
       type: Boolean,
@@ -22,14 +15,19 @@ export default {
       type: String,
     },
   },
+  data() {
+    return {
+      width: 1640,
+      height: 384,
+    }
+  },
   setup() {
     const learningPathStore = useLearningPathStore()
     return { learningPathStore }
   },
-
   computed: {
     viewBox() {
-      return `0 0 ${this.width} ${this.height * 1.5}`
+      return `0 0 ${this.width} ${this.height}`
     },
     circles() {
       function someFinished(circle, learningSequence) {
@@ -81,6 +79,13 @@ export default {
   },
 
   mounted() {
+    log.debug('LearningPathDiagram mounted')
+
+    if (this.vertical) {
+      this.width = Math.min(1080, window.innerWidth - 32)
+      this.height = 860
+    }
+
     const circleWidth = this.vertical ? 60 : 200
     const radius = (circleWidth * 0.8) / 2
 
@@ -235,7 +240,7 @@ export default {
     // Calculate positions of objects
 
     if (this.vertical) {
-      const Circles_X = 60
+      const Circles_X = radius
       const Topics_X = Circles_X - radius
 
       circle_groups.attr('transform', (d, i) => {
@@ -255,10 +260,7 @@ export default {
           return 'topic '.concat(d.is_visible ? 'block' : 'hidden')
         })
 
-      topicLines
-        .transition()
-        .duration('1000')
-        .attr('x2', this.width * 0.8)
+      topicLines.transition().duration('1000').attr('x2', this.width)
 
       topicTitles.attr('y', 30)
     } else {
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index 5c24eeee..0f7621eb 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -54,16 +54,18 @@ onMounted(async () => {
           ></LearningPathDiagram>
         </div>
 
-        <h1 data-cy="learning-path-title" class="m-12">{{ learningPathStore.learningPath.title }}</h1>
+        <h1 data-cy="learning-path-title" class="m-6 lg:m-12" style="hyphens: auto">
+          {{ learningPathStore.learningPath.title }}
+        </h1>
 
         <div
-          class="bg-white m-12 p-8 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start"
+          class="bg-white m-6 lg:m-12 p-8 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start"
         >
-          <div class="p-8 flex-auto">
+          <div class="p-4 lg:p-8 flex-auto">
             <h2 translate>Willkommmen zurück, {{ userStore.first_name }}</h2>
             <p class="mt-4 text-xl"></p>
           </div>
-          <div class="p-8 flex-2" v-if="learningPathStore.learningPath.nextLearningContent" translate>
+          <div class="p-4 lg:p-8 flex-2" v-if="learningPathStore.learningPath.nextLearningContent" translate>
             Nächster Schirtt
             <h3>
               {{ learningPathStore.learningPath.nextLearningContent.parentCircle.title }}:
diff --git a/client/src/views/LearningPathViewVertical.vue b/client/src/views/LearningPathViewVertical.vue
index e515a298..dc04b828 100644
--- a/client/src/views/LearningPathViewVertical.vue
+++ b/client/src/views/LearningPathViewVertical.vue
@@ -1,46 +1,39 @@
 <script setup lang="ts">
+import * as log from 'loglevel'
+import { useLearningPathStore } from '@/stores/learningPath'
+import { useUserStore } from '@/stores/user'
 
-import * as log from 'loglevel';
-import {useLearningPathStore} from '@/stores/learningPath';
-import {useUserStore} from '@/stores/user';
+import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue'
+import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue'
 
-import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue';
-import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue';
-
-
-log.debug('LearningPathView created');
+log.debug('LearningPathView created')
 
 const props = defineProps<{
-  learningPathSlug: string,
+  learningPathSlug: string
   show: boolean
-
 }>()
 
-
-const learningPathStore = useLearningPathStore();
-const userStore = useUserStore();
+const learningPathStore = useLearningPathStore()
+const userStore = useUserStore()
 
 const emits = defineEmits(['closemodal'])
-
 </script>
 <template>
-  <ItFullScreenModal
-    :show="show"
-    @closemodal="$emit('closemodal')">
-    <div class="bg-white" v-if="learningPathStore.learningPath">
-      <h1 class="m-6">{{ learningPathStore.learningPath.title }}</h1>
+  <ItFullScreenModal :show="show" @closemodal="$emit('closemodal')">
+    <div class="bg-white mx-auto max-w-[1440px] lg:p-6 p-4" v-if="learningPathStore.learningPath">
+      <h1 style="hyphens: auto">{{ learningPathStore.learningPath.title }}</h1>
       <div class="learningpath flex flex-col">
         <div class="flex flex-col h-max">
           <div class="bg-red py-8">
-            <LearningPathDiagram class="max-w-[1680px] w-full"
-                                 height="2000"
-                                 identifier="verticalVisualization"
-                                 v-bind:vertical="true"></LearningPathDiagram>
+            <LearningPathDiagram
+              class="max-w-[1280px] w-full"
+              identifier="verticalVisualization"
+              v-bind:vertical="true"
+            ></LearningPathDiagram>
           </div>
         </div>
       </div>
     </div>
   </ItFullScreenModal>
 </template>
-<style scoped>
-</style>
+<style scoped></style>
