diff --git a/client/src/components/MainNavigationBar.vue b/client/src/components/MainNavigationBar.vue
index 14ba362e..b7823864 100644
--- a/client/src/components/MainNavigationBar.vue
+++ b/client/src/components/MainNavigationBar.vue
@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import * as log from 'loglevel';
+import * as log from 'loglevel'
 
-import {onMounted, reactive} from 'vue';
-import {useUserStore} from '@/stores/user';
-import {useLearningPathStore} from '@/stores/learningPath';
-import {useRoute, useRouter} from 'vue-router';
-import {useAppStore} from '@/stores/app';
-import IconLogout from "@/components/icons/IconLogout.vue";
-import IconSettings from "@/components/icons/IconSettings.vue";
-import ItDropdown from "@/components/ui/ItDropdown.vue";
-import MobileMenu from "@/components/MobileMenu.vue"
+import { onMounted, reactive } from 'vue'
+import { useUserStore } from '@/stores/user'
+import { useLearningPathStore } from '@/stores/learningPath'
+import { useRoute, useRouter } from 'vue-router'
+import { useAppStore } from '@/stores/app'
+import IconLogout from '@/components/icons/IconLogout.vue'
+import IconSettings from '@/components/icons/IconSettings.vue'
+import ItDropdown from '@/components/ui/ItDropdown.vue'
+import MobileMenu from '@/components/MobileMenu.vue'
 
-log.debug('MainNavigationBar created');
+log.debug('MainNavigationBar created')
 
 const route = useRoute()
 const router = useRouter()
-const userStore = useUserStore();
-const appStore = useAppStore();
-const learningPathStore = useLearningPathStore();
-const state = reactive({showMenu: false});
+const userStore = useUserStore()
+const appStore = useAppStore()
+const learningPathStore = useLearningPathStore()
+const state = reactive({ showMenu: false })
 
 function toggleNav() {
-  state.showMenu = !state.showMenu;
+  state.showMenu = !state.showMenu
 }
 
 function isInRoutePath(checkPaths: string[]) {
@@ -29,28 +29,21 @@ function isInRoutePath(checkPaths: string[]) {
 }
 
 function inLearningPath() {
-  return isInRoutePath(['/learningpath/', '/circle/']);
+  return isInRoutePath(['/learn/'])
 }
 
-function getLearningPathStringProp (prop: 'title' | 'slug'): string {
-  return inLearningPath() && learningPathStore.learningPath ? learningPathStore.learningPath[prop] : '';
+function getLearningPathStringProp(prop: 'title' | 'slug'): string {
+  return inLearningPath() && learningPathStore.learningPath ? learningPathStore.learningPath[prop] : ''
 }
 
-function learningPathName (): string {
+function learningPathName(): string {
   return getLearningPathStringProp('title')
 }
 
-function learninPathSlug (): string {
+function learninPathSlug(): string {
   return getLearningPathStringProp('slug')
 }
 
-function backButtonUrl() {
-  if (route.path.startsWith('/circle/')) {
-    return '/learningpath/versicherungsvermittlerin';
-  }
-  return '/';
-}
-
 function handleDropdownSelect(data) {
   log.debug('Selected action:', data.action)
   switch (data.action) {
@@ -58,42 +51,41 @@ function handleDropdownSelect(data) {
       router.push('/profile')
       break
     case 'logout':
-      userStore.handleLogout();
+      userStore.handleLogout()
       break
     default:
       console.log('no action')
   }
 }
 
-function logout () {
-  userStore.handleLogout();
+function logout() {
+  userStore.handleLogout()
 }
 
 onMounted(() => {
-  log.debug('MainNavigationBar mounted');
+  log.debug('MainNavigationBar mounted')
 })
 
 const profileDropdownData = [
-    [
-      {
-        title: 'Kontoeinstellungen',
-        icon: IconSettings,
-        data: {
-          action: 'settings'
-        }
-      }
-    ],
-    [
-      {
-        title: 'Abmelden',
-        icon: IconLogout,
-        data: {
-          action: 'logout'
-        }
+  [
+    {
+      title: 'Kontoeinstellungen',
+      icon: IconSettings,
+      data: {
+        action: 'settings',
       },
-    ]
-  ]
-
+    },
+  ],
+  [
+    {
+      title: 'Abmelden',
+      icon: IconLogout,
+      data: {
+        action: 'logout',
+      },
+    },
+  ],
+]
 </script>
 
 <template>
@@ -109,35 +101,14 @@ const profileDropdownData = [
     </Teleport>
     <Transition name="nav">
       <div v-if="appStore.showMainNavigationBar" class="navigation bg-blue-900">
-        <nav
-          class="
-            px-8
-            py-2
-            mx-auto
-            lg:flex lg:justify-start lg:items-center lg:py-4
-          "
-        >
+        <nav class="px-8 py-2 mx-auto lg:flex lg:justify-start lg:items-center lg:py-4">
           <div class="flex items-center justify-between">
             <div class="flex items-center">
-              <a
-                href="https://www.vbv.ch"
-                class="flex">
-                <it-icon-vbv class="h-8 w-16 mr-3 -mt-6 -ml-3"/>
+              <a href="https://www.vbv.ch" class="flex">
+                <it-icon-vbv class="h-8 w-16 mr-3 -mt-6 -ml-3" />
               </a>
-              <router-link
-                to="/"
-                class="flex">
-                <div class="
-                  text-white
-                  text-2xl
-                  pr-10
-                  pl-3
-                  ml-1
-                  border-l border-white
-                "
-                >
-                  myVBV
-                </div>
+              <router-link to="/" class="flex">
+                <div class="text-white text-2xl pr-10 pl-3 ml-1 border-l border-white">myVBV</div>
               </router-link>
             </div>
 
@@ -148,21 +119,15 @@ const profileDropdownData = [
                 class="nav-item flex flex-row items-center"
                 data-cy="messages-link"
               >
-                <it-icon-message class="w-8 h-8 mr-6"/>
+                <it-icon-message class="w-8 h-8 mr-6" />
               </router-link>
               <!-- Mobile menu button -->
               <div @click="toggleNav" class="flex">
                 <button
                   type="button"
-                  class="
-                    w-8
-                    h-8
-                    text-white
-                    hover:text-sky-500
-                    focus:outline-none focus:text-sky-500
-                  "
+                  class="w-8 h-8 text-white hover:text-sky-500 focus:outline-none focus:text-sky-500"
                 >
-                  <it-icon-menu class="h-8 w-8"/>
+                  <it-icon-menu class="h-8 w-8" />
                 </button>
               </div>
             </div>
@@ -172,17 +137,13 @@ const profileDropdownData = [
           <div
             v-if="appStore.userLoaded && appStore.routingFinished && userStore.loggedIn"
             :class="state.showMenu ? 'flex' : 'hidden'"
-            class="
-              flex-auto
-              mt-8
-              lg:flex lg:space-y-0 lg:flex-row lg:items-center lg:space-x-10 lg:mt-0
-            "
+            class="flex-auto mt-8 lg:flex lg:space-y-0 lg:flex-row lg:items-center lg:space-x-10 lg:mt-0"
           >
             <router-link
               v-if="inLearningPath()"
               to="/learningpath/versicherungsvermittlerin"
               class="nav-item"
-              :class="{'nav-item--active': inLearningPath()}"
+              :class="{ 'nav-item--active': inLearningPath() }"
             >
               Lernpfad
             </router-link>
@@ -191,32 +152,24 @@ const profileDropdownData = [
               v-if="inLearningPath()"
               to="/competences/"
               class="nav-item"
-              :class="{'nav-item--active': isInRoutePath(['/competences/'])}"
+              :class="{ 'nav-item--active': isInRoutePath(['/competences/']) }"
             >
               Kompetenzprofil
             </router-link>
 
             <div class="hidden lg:block flex-auto"></div>
-            <router-link
-              to="/shop"
-              class="nav-item"
-              :class="{'nav-item--active': isInRoutePath(['/shop'])}"
-            >
+            <router-link to="/shop" class="nav-item" :class="{ 'nav-item--active': isInRoutePath(['/shop']) }">
               Shop
             </router-link>
             <router-link
               to="/mediacenter"
               class="nav-item"
-              :class="{'nav-item--active': isInRoutePath(['/mediacenter'])}"
+              :class="{ 'nav-item--active': isInRoutePath(['/mediacenter']) }"
             >
               Mediathek
             </router-link>
-            <router-link
-              to="/messages"
-              class="nav-item flex flex-row items-center"
-              data-cy="messages-link"
-            >
-              <it-icon-message class="w-8 h-8 mr-6"/>
+            <router-link to="/messages" class="nav-item flex flex-row items-center" data-cy="messages-link">
+              <it-icon-message class="w-8 h-8 mr-6" />
             </router-link>
             <div class="nav-item flex items-center" v-if="userStore.loggedIn">
               <ItDropdown
@@ -226,9 +179,7 @@ const profileDropdownData = [
                 @select="handleDropdownSelect"
               >
                 <div v-if="userStore.avatar_url">
-                  <img class="inline-block h-8 w-8 rounded-full"
-                       :src="userStore.avatar_url"
-                       alt=""/>
+                  <img class="inline-block h-8 w-8 rounded-full" :src="userStore.avatar_url" alt="" />
                 </div>
                 <div v-else>
                   {{ userStore.getFullName }}
@@ -249,7 +200,7 @@ const profileDropdownData = [
 }
 
 .nav-item--active {
-  @apply underline underline-offset-[21px] decoration-sky-500 decoration-4
+  @apply underline underline-offset-[21px] decoration-sky-500 decoration-4;
 }
 
 .nav-enter-active,
@@ -262,5 +213,4 @@ const profileDropdownData = [
   opacity: 0;
   transform: translateY(-80px);
 }
-
 </style>
diff --git a/client/src/components/circle/LearningPathDiagram.vue b/client/src/components/circle/LearningPathDiagram.vue
index 8f83ed31..8b9c6d44 100644
--- a/client/src/components/circle/LearningPathDiagram.vue
+++ b/client/src/components/circle/LearningPathDiagram.vue
@@ -1,7 +1,7 @@
 <script>
-import * as d3 from 'd3';
-import { useLearningPathStore } from '../../stores/learningPath';
-import colors from '@/colors.json';
+import * as d3 from 'd3'
+import { useLearningPathStore } from '../../stores/learningPath'
+import colors from '@/colors.json'
 
 export default {
   props: {
@@ -15,37 +15,35 @@ export default {
     },
     vertical: {
       default: false,
-      type: Boolean
+      type: Boolean,
     },
     identifier: {
       required: true,
-      type: String
-    }
+      type: String,
+    },
   },
   setup() {
     const learningPathStore = useLearningPathStore()
-    return {learningPathStore}
+    return { learningPathStore }
   },
 
-
   computed: {
     viewBox() {
       return `0 0 ${this.width} ${this.height * 1.5}`
     },
     circles() {
-
       function someFinished(circle, learningSequence) {
         if (circle) {
-          return circle.someFinishedInLearningSequence(learningSequence.translation_key);
+          return circle.someFinishedInLearningSequence(learningSequence.translation_key)
         }
-        return false;
+        return false
       }
 
       function allFinished(circle, learningSequence) {
         if (circle) {
-          return circle.allFinishedInLearningSequence(learningSequence.translation_key);
+          return circle.allFinishedInLearningSequence(learningSequence.translation_key)
         }
-        return false;
+        return false
       }
 
       if (this.learningPathStore.learningPath) {
@@ -58,29 +56,28 @@ export default {
             const thisLearningSequence = circle.learningSequences[parseInt(pie.index)]
             pie.startAngle = pie.startAngle + Math.PI
             pie.endAngle = pie.endAngle + Math.PI
-            pie.done = circle.someFinishedInLearningSequence(thisLearningSequence.translation_key);
+            pie.done = circle.someFinishedInLearningSequence(thisLearningSequence.translation_key)
             pie.someFinished = someFinished(circle, thisLearningSequence)
             pie.allFinished = allFinished(circle, thisLearningSequence)
-          });
+          })
           const newCircle = {}
           newCircle.pieData = pieData.reverse()
           newCircle.title = circle.title
           newCircle.slug = circle.slug
           newCircle.id = circle.id
           internalCircles.push(newCircle)
-        });
+        })
         return internalCircles
       }
-      return [];
+      return []
     },
     svg() {
-      return d3.select("#" + this.identifier)
+      return d3.select('#' + this.identifier)
     },
 
     learningPath() {
       return Object.assign({}, this.learningPathStore.learningPath)
-    }
-
+    },
   },
 
   mounted() {
@@ -111,7 +108,6 @@ export default {
 
     const vueRouter = this.$router
 
-
     // Create append pie charts to the main svg
     const circle_groups = this.svg
       .selectAll('.circle')
@@ -121,7 +117,7 @@ export default {
       .attr('class', 'circle')
       .attr('data-cy', (d) => {
         if (this.vertical) {
-          return `circle-${d.slug}-vertical`;
+          return `circle-${d.slug}-vertical`
         } else {
           return `circle-${d.slug}`
         }
@@ -144,8 +140,8 @@ export default {
             return getColor(d)
           })
       })
-      .on('click', function (d, i) {
-        vueRouter.push('/circle/' + i.slug)
+      .on('click', (d, i) => {
+        vueRouter.push(`/learn/${this.learningPathStore.learningPath.slug}/${i.slug}`)
       })
 
       .attr('role', 'button')
@@ -178,7 +174,6 @@ export default {
     //Draw arc paths
     arcs.append('path').attr('d', arcGenerator)
 
-
     const circlesText = circle_groups
       .append('text')
       .attr('fill', colors.blue[900])
@@ -223,21 +218,13 @@ export default {
             return y
           }
           y += circleHeigth
-
         }
       }
     }
 
-    const topicGroups = this.svg
-      .selectAll('.topic')
-      .data(this.learningPath.topics)
-      .enter()
-      .append('g')
+    const topicGroups = this.svg.selectAll('.topic').data(this.learningPath.topics).enter().append('g')
 
-    const topicLines = topicGroups
-      .append('line')
-      .attr('class', 'stroke-gray-500')
-      .attr('stroke-width', 1)
+    const topicLines = topicGroups.append('line').attr('class', 'stroke-gray-500').attr('stroke-width', 1)
 
     const topicTitles = topicGroups
       .append('text')
@@ -245,47 +232,40 @@ export default {
       .style('font-size', 16)
       .text((d) => d.title)
 
-
     // Calculate positions of objects
 
     if (this.vertical) {
       const Circles_X = 60
       const Topics_X = Circles_X - radius
 
-
-      circle_groups
-        .attr('transform', (d, i) => {
-          return 'translate(' + Circles_X + ',' + getCircleVerticalPostion(i, d, this.learningPath.topics) + ')'
-        })
+      circle_groups.attr('transform', (d, i) => {
+        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) + ")"
+          return 'translate(' + Topics_X + ', ' + getTopicVerticalPosition(i, d, this.learningPath.topics) + ')'
         })
         .attr('class', (d) => {
-          return 'topic '.concat(d.is_visible ? "block" : "hidden")
+          return 'topic '.concat(d.is_visible ? 'block' : 'hidden')
         })
 
-
       topicLines
-        .transition().duration('1000').attr('x2', this.width * 0.8)
-
-      topicTitles
-        .attr('y', 30)
-
+        .transition()
+        .duration('1000')
+        .attr('x2', this.width * 0.8)
 
+      topicTitles.attr('y', 30)
     } else {
-      circle_groups
-        .attr('transform', (d, i) => {
-          const x_coord = (i + 1) * circleWidth - radius
-          return 'translate(' + x_coord + ', 200)'
-        })
+      circle_groups.attr('transform', (d, i) => {
+        const x_coord = (i + 1) * circleWidth - radius
+        return 'translate(' + x_coord + ', 200)'
+      })
 
       circlesText
         .attr('y', radius + 30)
@@ -293,30 +273,28 @@ export default {
         .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)"
+          return 'translate(' + getTopicHorizontalPosition(i, d, this.learningPathStore.learningPath.topics) + ',0)'
         })
         .attr('class', (d) => {
-          return 'topic '.concat(d.is_visible ? "hidden lg:block" : "hidden")
+          return 'topic '.concat(d.is_visible ? 'hidden lg:block' : 'hidden')
         })
 
-
       topicLines
         .attr('x1', -10)
         .attr('y1', 0)
         .attr('x2', -10)
         .attr('y2', 0)
-        .transition().duration('1000').attr('y2', 350)
+        .transition()
+        .duration('1000')
+        .attr('y2', 350)
 
       topicTitles
         .attr('y', 20)
         .style('font-size', 19)
         .call(wrap, circleWidth * 0.8)
         .attr('class', 'topicTitles font-bold')
-
-
     }
 
     function wrap(text, width) {
@@ -357,12 +335,8 @@ export default {
 }
 </script>
 
-
 <template>
   <div class="svg-container h-full content-start">
-    <svg class="learning-path-visualization h-full" :viewBox="viewBox" :id=identifier>
-    </svg>
+    <svg class="learning-path-visualization h-full" :viewBox="viewBox" :id="identifier"></svg>
   </div>
-
 </template>
-
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index d808681a..764f3508 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -37,12 +37,12 @@ const router = createRouter({
       component: () => import('@/views/ProfileView.vue'),
     },
     {
-      path: '/learningpath/:learningPathSlug',
+      path: '/learn/:learningPathSlug',
       component: () => import('../views/LearningPathView.vue'),
       props: true,
     },
     {
-      path: '/circle/:circleSlug',
+      path: '/learn/:learningPathSlug/:circleSlug',
       component: () => import('../views/CircleView.vue'),
       props: true,
     },
diff --git a/client/src/stores/circle.ts b/client/src/stores/circle.ts
index 023b689c..f729b2c9 100644
--- a/client/src/stores/circle.ts
+++ b/client/src/stores/circle.ts
@@ -4,7 +4,7 @@ import { defineStore } from 'pinia'
 
 import type { LearningContent, LearningUnit, LearningUnitQuestion } from '@/types'
 import type { Circle } from '@/services/circle'
-import { itGet, itPost } from '@/fetchHelpers'
+import { itPost } from '@/fetchHelpers'
 import { useAppStore } from '@/stores/app'
 import { useLearningPathStore } from '@/stores/learningPath'
 
@@ -28,26 +28,19 @@ export const useCircleStore = defineStore({
   getters: {
   },
   actions: {
-    async loadCircle(slug: string) {
+    async loadCircle(learningPathSlug: string, circleSlug: string) {
       this.circle = undefined;
-      try {
-        // const circleData = await itGet(`/learnpath/api/circle/${slug}/`);
-        // this.circle = Circle.fromJson(circleData);
-        // this.circle.parseCompletionData(completionData);
-        const learningPathStore = useLearningPathStore();
-        await learningPathStore.loadLearningPath('versicherungsvermittlerin');
-        if (learningPathStore.learningPath) {
-          this.circle = learningPathStore.learningPath.circles.find(circle => circle.slug === slug);
-          if (this.circle) {
-            const completionData = await itGet(`/api/completion/circle/${this.circle.translation_key}/`);
-            this.circle.parseCompletionData(completionData);
-          }
-        }
-        return Promise.resolve(this.circle)
-      } catch (error) {
-        log.error(error);
-        return error
+      const learningPathStore = useLearningPathStore();
+      await learningPathStore.loadLearningPath(learningPathSlug);
+      if (learningPathStore.learningPath) {
+        this.circle = learningPathStore.learningPath.circles.find(circle => circle.slug === circleSlug);
       }
+
+      if (!this.circle) {
+        throw `No circle found with slug: ${circleSlug}`;
+      }
+
+      return this.circle
     },
     async markCompletion(page: LearningContent | LearningUnitQuestion, flag = true) {
       try {
diff --git a/client/src/stores/learningPath.ts b/client/src/stores/learningPath.ts
index 9dcfb1a9..ec3930c2 100644
--- a/client/src/stores/learningPath.ts
+++ b/client/src/stores/learningPath.ts
@@ -1,5 +1,3 @@
-import * as log from 'loglevel'
-
 import { defineStore } from 'pinia'
 import { itGet } from '@/fetchHelpers'
 import { LearningPath } from '@/services/learningPath'
@@ -21,18 +19,15 @@ export const useLearningPathStore = defineStore({
       if (this.learningPath && !reload) {
         return this.learningPath;
       }
-      try {
-        const learningPathData = await itGet(`/learnpath/api/page/${slug}/`);
-        const completionData = await itGet(`/api/completion/learning_path/${learningPathData.translation_key}/`);
+      const learningPathData = await itGet(`/learnpath/api/page/${slug}/`);
+      const completionData = await itGet(`/api/completion/learning_path/${learningPathData.translation_key}/`);
 
-        if (learningPathData) {
-          this.learningPath = LearningPath.fromJson(learningPathData, completionData);
-        }
-        return this.learningPath;
-      } catch (error) {
-        log.error(error);
-        return error
+      if (!learningPathData) {
+        throw `No learning path found with: ${slug}`;
       }
+      
+      this.learningPath = LearningPath.fromJson(learningPathData, completionData);
+      return this.learningPath;
     },
   }
 })
diff --git a/client/src/views/CircleView.vue b/client/src/views/CircleView.vue
index f97e0390..31e9c206 100644
--- a/client/src/views/CircleView.vue
+++ b/client/src/views/CircleView.vue
@@ -1,27 +1,32 @@
 <script setup lang="ts">
-import * as log from 'loglevel';
-import LearningSequence from '@/components/circle/LearningSequence.vue';
-import CircleOverview from '@/components/circle/CircleOverview.vue';
-import CircleDiagram from '@/components/circle/CircleDiagram.vue';
-import LearningContent from '@/components/circle/LearningContent.vue';
+import * as log from 'loglevel'
+import LearningSequence from '@/components/circle/LearningSequence.vue'
+import CircleOverview from '@/components/circle/CircleOverview.vue'
+import CircleDiagram from '@/components/circle/CircleDiagram.vue'
+import LearningContent from '@/components/circle/LearningContent.vue'
 
-import {onMounted} from 'vue'
-import {useCircleStore} from '@/stores/circle';
-import SelfEvaluation from '@/components/circle/SelfEvaluation.vue';
+import { onMounted } from 'vue'
+import { useCircleStore } from '@/stores/circle'
+import SelfEvaluation from '@/components/circle/SelfEvaluation.vue'
 
-log.debug('CircleView.vue created');
+log.debug('CircleView.vue created')
 
 const props = defineProps<{
+  learningPathSlug: string
   circleSlug: string
 }>()
 
-const circleStore = useCircleStore();
-circleStore.loadCircle(props.circleSlug);
+const circleStore = useCircleStore()
 
 onMounted(async () => {
-  log.info('CircleView.vue mounted');
-});
+  log.debug('CircleView.vue mounted', props.learningPathSlug, props.circleSlug)
 
+  try {
+    await circleStore.loadCircle(props.learningPathSlug, props.circleSlug)
+  } catch (error) {
+    log.error(error)
+  }
+})
 </script>
 
 <template>
@@ -35,10 +40,10 @@ onMounted(async () => {
     </Teleport>
     <Transition mode="out-in">
       <div v-if="circleStore.page === 'LEARNING_CONTENT'">
-        <LearningContent :key="circleStore.currentLearningContent.translation_key"/>
+        <LearningContent :key="circleStore.currentLearningContent.translation_key" />
       </div>
       <div v-else-if="circleStore.page === 'SELF_EVALUATION'">
-        <SelfEvaluation :key="circleStore.currentSelfEvaluation.translation_key"/>
+        <SelfEvaluation :key="circleStore.currentSelfEvaluation.translation_key" />
       </div>
       <div v-else>
         <div class="circle-container">
@@ -46,7 +51,7 @@ onMounted(async () => {
             <div class="flex flex-col lg:flex-row">
               <div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:pt-4 bg-white">
                 <router-link
-                  to="/learningpath/versicherungsvermittlerin"
+                  :to="`/learn/${props.learningPathSlug}`"
                   class="btn-text inline-flex items-center px-3 py-4 font-normal"
                 >
                   <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
@@ -62,15 +67,12 @@ onMounted(async () => {
                 </div>
 
                 <div class="border-t-2 border-gray-500 mt-4 lg:hidden">
-                  <div
-                    class="mt-4 inline-flex items-center"
-                    @click="circleStore.page = 'OVERVIEW'"
-                  >
-                    <it-icon-info class="mr-2"/>
+                  <div class="mt-4 inline-flex items-center" @click="circleStore.page = 'OVERVIEW'">
+                    <it-icon-info class="mr-2" />
                     Das lernst du in diesem Circle
                   </div>
                   <div class="inline-flex items-center">
-                    <it-icon-message class="mr-2"/>
+                    <it-icon-message class="mr-2" />
                     Fachexpertin kontaktieren
                   </div>
                 </div>
@@ -82,16 +84,15 @@ onMounted(async () => {
                       {{ circleStore.circle?.description }}
                     </div>
 
-                    <button class="btn-primary mt-4 text-xl" @click="circleStore.page = 'OVERVIEW'">Erfahre mehr dazu
+                    <button class="btn-primary mt-4 text-xl" @click="circleStore.page = 'OVERVIEW'">
+                      Erfahre mehr dazu
                     </button>
                   </div>
 
                   <div class="expert border border-gray-500 mt-8 p-6">
                     <h3 class="text-blue-dark">Hast du Fragen?</h3>
                     <div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
-                    <button class="btn-secondary mt-4 text-xl">
-                      Fachexpertin kontaktieren
-                    </button>
+                    <button class="btn-secondary mt-4 text-xl">Fachexpertin kontaktieren</button>
                   </div>
                 </div>
               </div>
@@ -101,14 +102,10 @@ onMounted(async () => {
                   v-for="learningSequence in circleStore.circle?.learningSequences || []"
                   :key="learningSequence.translation_key"
                 >
-                  <LearningSequence
-                    :learning-sequence="learningSequence"
-                  ></LearningSequence>
+                  <LearningSequence :learning-sequence="learningSequence"></LearningSequence>
                 </div>
-
               </div>
             </div>
-
           </div>
         </div>
       </div>
@@ -117,15 +114,8 @@ onMounted(async () => {
 </template>
 
 <style lang="postcss" scoped>
-
 .circle-container {
-  background: linear-gradient(
-    to right,
-    white 0%,
-    white 50%,
-    theme(colors.gray.200) 50%,
-    theme(colors.gray.200) 100%
-  );
+  background: linear-gradient(to right, white 0%, white 50%, theme(colors.gray.200) 50%, theme(colors.gray.200) 100%);
 }
 
 .circle {
@@ -142,5 +132,4 @@ onMounted(async () => {
 .v-leave-to {
   opacity: 0;
 }
-
 </style>
diff --git a/client/src/views/CockpitView.vue b/client/src/views/CockpitView.vue
index ff53dac3..a4774bff 100644
--- a/client/src/views/CockpitView.vue
+++ b/client/src/views/CockpitView.vue
@@ -1,31 +1,25 @@
 <script setup lang="ts">
-import * as log from 'loglevel';
-import {useUserStore} from '@/stores/user';
+import * as log from 'loglevel'
+import { useUserStore } from '@/stores/user'
 
-log.debug('CockpitView created');
-
-const userStore = useUserStore();
+log.debug('CockpitView created')
 
+const userStore = useUserStore()
 </script>
 
 <template>
   <main class="px-8 py-8 lg:px-12 lg:py-12 bg-gray-200">
-    <h1 data-cy="welcome-message">Willkommen, {{userStore.first_name}}</h1>
+    <h1 data-cy="welcome-message">Willkommen, {{ userStore.first_name }}</h1>
 
     <h2 class="mt-12">Deine Kurse</h2>
 
     <div class="mt-8 p-8 break-words bg-white max-w-xl">
       <h3>Versicherungsvermittler/in</h3>
       <div class="mt-4">
-        <router-link class="btn-blue" to="/learningpath/versicherungsvermittlerin">
-          Weiter gehts
-        </router-link>
+        <router-link class="btn-blue" to="/learn/versicherungsvermittlerin"> Weiter gehts </router-link>
       </div>
     </div>
-
-
   </main>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/client/src/views/HomeView.vue b/client/src/views/HomeView.vue
deleted file mode 100644
index 828fd2a3..00000000
--- a/client/src/views/HomeView.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <main class="px-8 py-8">
-    <h1>myVBV Start Page</h1>
-
-    <div class="mt-8 flex flex-col lg:flex-row justify-start gap-4">
-      <router-link class="link text-xl" to="/styleguide">Styelguide</router-link>
-      <a class="link text-xl" href="/login">Login</a>
-
-      <router-link class="link text-xl" to="/learningpath/versicherungsvermittlerin">Lernpfad "Versicherungsvermittlerin"</router-link>
-      <router-link class="link text-xl" to="/circle/analyse">Circle "Analyse"</router-link>
-    </div>
-  </main>
-</template>
-
-<style scoped>
-</style>
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index ee0c80ec..fcc892e8 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -1,31 +1,31 @@
 <script setup lang="ts">
+import * as log from 'loglevel'
 
-import * as log from 'loglevel';
+import { onMounted } from 'vue'
+import { useLearningPathStore } from '@/stores/learningPath'
+import { useUserStore } from '@/stores/user'
 
-import {onMounted} from 'vue'
-import {useLearningPathStore} from '@/stores/learningPath';
-import {useUserStore} from '@/stores/user';
+import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue'
+import LearningPathViewVertical from '@/views/LearningPathViewVertical.vue'
 
-import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue';
-import LearningPathViewVertical from "@/views/LearningPathViewVertical.vue";
-
-
-log.debug('LearningPathView created');
+log.debug('LearningPathView created')
 
 const props = defineProps<{
   learningPathSlug: string
 }>()
 
-const learningPathStore = useLearningPathStore();
-const userStore = useUserStore();
-
+const learningPathStore = useLearningPathStore()
+const userStore = useUserStore()
 
 onMounted(async () => {
-  log.info('LearningPathView mounted');
-  await learningPathStore.loadLearningPath(props.learningPathSlug);
-  console.log(learningPathStore)
-});
+  log.debug('LearningPathView mounted')
 
+  try {
+    await learningPathStore.loadLearningPath(props.learningPathSlug)
+  } catch (error) {
+    log.error(error)
+  }
+})
 </script>
 
 <template>
@@ -42,12 +42,8 @@ onMounted(async () => {
       <div class="flex flex-col h-max">
         <div class="bg-white py-8 flex flex-col">
           <div class="flex justify-end p-3">
-            <button
-              class="flex items-center"
-              @click="learningPathStore.page = 'OVERVIEW'"
-              data-cy="show-list-view"
-            >
-              <it-icon-list/>
+            <button class="flex items-center" @click="learningPathStore.page = 'OVERVIEW'" data-cy="show-list-view">
+              <it-icon-list />
               Listen Ansicht anzeigen
             </button>
           </div>
@@ -61,19 +57,21 @@ onMounted(async () => {
         <h1 data-cy="learning-path-title" class="m-12">{{ 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-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">
             <h2 translate>Willkommmen zurück, {{ userStore.first_name }}</h2>
-            <p class="mt-4 text-xl">
-
-            </p>
+            <p class="mt-4 text-xl"></p>
           </div>
           <div class="p-8 flex-2" v-if="learningPathStore.learningPath.nextLearningContent" translate>
             Nächster Schirtt
-            <h3>{{ learningPathStore.learningPath.nextLearningContent.parentCircle.title }}: {{ learningPathStore.learningPath.nextLearningContent.parentLearningSequence.title }}</h3>
+            <h3>
+              {{ learningPathStore.learningPath.nextLearningContent.parentCircle.title }}:
+              {{ learningPathStore.learningPath.nextLearningContent.parentLearningSequence.title }}
+            </h3>
             <router-link
               class="mt-4 btn-blue"
-              :to="`/circle/${learningPathStore.learningPath.nextLearningContent.parentCircle.slug}/`"
+              :to="`/learn/${learningPathStore.learningPath.slug}/${learningPathStore.learningPath.nextLearningContent.parentCircle.slug}`"
               translate
             >
               Los geht's
@@ -86,5 +84,4 @@ onMounted(async () => {
   </div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/server/vbv_lernwelt/learnpath/models.py b/server/vbv_lernwelt/learnpath/models.py
index 78688654..71cc5528 100644
--- a/server/vbv_lernwelt/learnpath/models.py
+++ b/server/vbv_lernwelt/learnpath/models.py
@@ -22,7 +22,7 @@ class LearningPath(Page):
         verbose_name = "Learning Path"
 
     def full_clean(self, *args, **kwargs):
-        self.slug = find_available_slug(Page, slugify(self.title, allow_unicode=True))
+        self.slug = find_available_slug(slugify(self.title, allow_unicode=True))
         super(LearningPath, self).full_clean(*args, **kwargs)
 
     def __str__(self):
@@ -54,8 +54,7 @@ class Topic(Page):
     # subpage_types = ['learnpath.Circle']
 
     def full_clean(self, *args, **kwargs):
-        self.slug = find_available_slug(Topic, slugify(self.title, allow_unicode=True))
-        print(self.slug)
+        self.slug = find_available_slug(slugify(f'topic-{self.title}', allow_unicode=True))
         super(Topic, self).full_clean(*args, **kwargs)
 
     @classmethod
@@ -115,8 +114,7 @@ class Circle(Page):
         )
 
     def full_clean(self, *args, **kwargs):
-        # TODO: why own slug function?
-        self.slug = find_available_slug(Page, slugify(self.title, allow_unicode=True))
+        self.slug = find_available_slug(slugify(self.title, allow_unicode=True))
         super(Circle, self).full_clean(*args, **kwargs)
 
     class Meta:
@@ -157,6 +155,7 @@ class LearningSequence(Page):
           </span>'''
 
     def full_clean(self, *args, **kwargs):
+        self.slug = find_available_slug(slugify(f'ls-{self.title}', allow_unicode=True))
         super(LearningSequence, self).full_clean(*args, **kwargs)
 
 
@@ -170,6 +169,10 @@ class LearningUnit(Page):
     def __str__(self):
         return f"{self.title}"
 
+    def full_clean(self, *args, **kwargs):
+        self.slug = find_available_slug(slugify(f'lu-{self.title}', allow_unicode=True))
+        super(LearningUnit, self).full_clean(*args, **kwargs)
+
     @classmethod
     def get_serializer_class(cls):
         return get_it_serializer_class(cls, field_names=['id', 'title', 'slug', 'type', 'translation_key', 'children'])
@@ -188,6 +191,10 @@ class LearningUnitQuestion(Page):
     def __str__(self):
         return f"{self.title}"
 
+    def full_clean(self, *args, **kwargs):
+        self.slug = find_available_slug(slugify(f'luq-{self.title}', allow_unicode=True))
+        super(LearningUnitQuestion, self).full_clean(*args, **kwargs)
+
     @classmethod
     def get_serializer_class(cls):
         return get_it_serializer_class(cls, field_names=['id', 'title', 'slug', 'type', 'translation_key', ])
@@ -240,7 +247,8 @@ class LearningContent(Page):
         verbose_name = "Learning Content"
 
     def full_clean(self, *args, **kwargs):
-        self.slug = find_available_slug(LearningContent, slugify(self.title, allow_unicode=True))
+        self.slug = find_available_slug(slugify(f'lc-{self.title}', allow_unicode=True))
+        print(self.slug)
         super(LearningContent, self).full_clean(*args, **kwargs)
 
     @classmethod
@@ -253,7 +261,7 @@ class LearningContent(Page):
         return f"{self.title}"
 
 
-def find_available_slug(model, requested_slug, ignore_page_id=None):
+def find_available_slug(requested_slug, ignore_page_id=None):
     """
     Finds an available slug within the specified parent.
 
@@ -270,8 +278,7 @@ def find_available_slug(model, requested_slug, ignore_page_id=None):
     treated as in use by another page.
     """
 
-    # TODO: In comparison ot wagtails own function, I look for the same model  instead of the parent
-    pages = model.objects.filter(slug__startswith=requested_slug)
+    pages = Page.objects.filter(slug__startswith=requested_slug)
 
     if ignore_page_id:
         pages = pages.exclude(id=ignore_page_id)