diff --git a/client/src/components/circle/LearningPathCircleDiagram.vue b/client/src/components/circle/LearningPathCircleDiagram.vue
index 233cd958..a00739e1 100644
--- a/client/src/components/circle/LearningPathCircleDiagram.vue
+++ b/client/src/components/circle/LearningPathCircleDiagram.vue
@@ -4,147 +4,147 @@ import * as _ from 'underscore'
 
 export default {
   props: {
-    learninglearningPathContents: {
-      default: {
-        topics: [
-          {
-            id: 4,
-            title: 'Basissdf',
-            slug: 'basissdf',
-            type: 'learnpath.Topic',
-            translation_key: 'fdabcf72-728a-4279-ba34-e079761a14ad',
-            is_visible: false,
-            circles: [
-              {
-                id: 5,
-                title: 'Basis',
-                slug: 'basis',
-                type: 'learnpath.Circle',
-                translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106',
-                learning_sequences: [
-                  {
-                    id: 11,
-                    title: 'Starten',
-                    done: false,
-                  },
-                  {
-                    id: 13,
-                    title: 'Beobachten',
-                    done: false,
-                  },
-                ],
-              },
-            ],
-          },
-          {
-            id: 6,
-            title: 'Gewinnen von Kunden',
-            slug: 'gewinnen-von-kunden',
-            type: 'learnpath.Topic',
-            translation_key: 'e3a9a61e-2c60-4363-a4a8-d4ef4d4ff466',
-            is_visible: true,
-            circles: [
-              {
-                id: 7,
-                title: 'Gewinnen',
-                slug: 'gewinnen',
-                type: 'learnpath.Circle',
-                translation_key: '23b689c9-8800-4783-9842-725ee5f3a3f1',
-                learning_sequences: [
-                  {
-                    id: 11,
-                    title: 'Starten',
-                    done: true,
-                  },
-                  {
-                    id: 13,
-                    title: 'Beobachten',
-                    done: false,
-                  },
-                  {
-                    id: 11,
-                    title: 'Starten',
-                    done: false,
-                  },
-                  {
-                    id: 13,
-                    title: 'Beobachten',
-                    done: false,
-                  },
-                  {
-                    id: 11,
-                    title: 'Starten',
-                    done: true,
-                  },
-                  {
-                    id: 13,
-                    title: 'Beobachten',
-                    done: false,
-                  },
-                ],
-              },
-            ],
-          },
-          {
-            id: 8,
-            title: 'Beraten der Kunden',
-            slug: 'beraten-der-kunden',
-            type: 'learnpath.Topic',
-            translation_key: '66fdc053-68ee-4e53-b8e3-3b3816c4f8f4',
-            is_visible: true,
-            circles: [
-              {
-                id: 9,
-                title: 'Einstieg',
-                slug: 'einstieg',
-                type: 'learnpath.Circle',
-                translation_key: 'a608ce8c-1482-491d-becd-2280787285b3',
-                learning_sequences: [
-                  {
-                    id: 11,
-                    title: 'Starten',
-                    done: true,
-                  },
-                  {
-                    id: 13,
-                    title: 'Beobachten',
-                    done: false,
-                  },
-                ],
-              },
-              {
-                id: 10,
-                title: 'Analyse des letzten Falles',
-                slug: 'analyse',
-                type: 'learnpath.Circle',
-                translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
-                learning_sequences: [
-                  {
-                    id: 11,
-                    title: 'Starten',
-                    done: true,
-                  },
-                  {
-                    id: 13,
-                    title: 'Beobachten',
-                    done: true,
-                  },
-                  {
-                    id: 18,
-                    title: 'Anwenden',
-                    done: true,
-                  },
-                  {
-                    id: 30,
-                    title: 'Üben',
-                    done: false,
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
+    learningPathContents: {
+      default: 34,
+      //   topics: [
+      //     {
+      //       id: 4,
+      //       title: 'Basissdf',
+      //       slug: 'basissdf',
+      //       type: 'learnpath.Topic',
+      //       translation_key: 'fdabcf72-728a-4279-ba34-e079761a14ad',
+      //       is_visible: false,
+      //       circles: [
+      //         {
+      //           id: 5,
+      //           title: 'Basis',
+      //           slug: 'basis',
+      //           type: 'learnpath.Circle',
+      //           translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106',
+      //           learning_sequences: [
+      //             {
+      //               id: 11,
+      //               title: 'Starten',
+      //               done: false,
+      //             },
+      //             {
+      //               id: 13,
+      //               title: 'Beobachten',
+      //               done: false,
+      //             },
+      //           ],
+      //         },
+      //       ],
+      //     },
+      //     // {
+      //     //   id: 6,
+      //     //   title: 'Gewinnen von Kunden',
+      //     //   slug: 'gewinnen-von-kunden',
+      //     //   type: 'learnpath.Topic',
+      //     //   translation_key: 'e3a9a61e-2c60-4363-a4a8-d4ef4d4ff466',
+      //     //   is_visible: true,
+      //     //   circles: [
+      //     //     {
+      //     //       id: 7,
+      //     //       title: 'Gewinnen',
+      //     //       slug: 'gewinnen',
+      //     //       type: 'learnpath.Circle',
+      //     //       translation_key: '23b689c9-8800-4783-9842-725ee5f3a3f1',
+      //     //       learning_sequences: [
+      //     //         {
+      //     //           id: 11,
+      //     //           title: 'Starten',
+      //     //           done: true,
+      //     //         },
+      //     //         {
+      //     //           id: 13,
+      //     //           title: 'Beobachten',
+      //     //           done: false,
+      //     //         },
+      //     //         {
+      //     //           id: 11,
+      //     //           title: 'Starten',
+      //     //           done: false,
+      //     //         },
+      //     //         {
+      //     //           id: 13,
+      //     //           title: 'Beobachten',
+      //     //           done: false,
+      //     //         },
+      //     //         {
+      //     //           id: 11,
+      //     //           title: 'Starten',
+      //     //           done: true,
+      //     //         },
+      //     //         {
+      //     //           id: 13,
+      //     //           title: 'Beobachten',
+      //     //           done: false,
+      //     //         },
+      //     //       ],
+      //     //     },
+      //     //   ],
+      //     // },
+      //     // {
+      //     //   id: 8,
+      //     //   title: 'Beraten der Kunden',
+      //     //   slug: 'beraten-der-kunden',
+      //     //   type: 'learnpath.Topic',
+      //     //   translation_key: '66fdc053-68ee-4e53-b8e3-3b3816c4f8f4',
+      //     //   is_visible: true,
+      //     //   circles: [
+      //     //     {
+      //     //       id: 9,
+      //     //       title: 'Einstieg',
+      //     //       slug: 'einstieg',
+      //     //       type: 'learnpath.Circle',
+      //     //       translation_key: 'a608ce8c-1482-491d-becd-2280787285b3',
+      //     //       learning_sequences: [
+      //     //         {
+      //     //           id: 11,
+      //     //           title: 'Starten',
+      //     //           done: true,
+      //     //         },
+      //     //         {
+      //     //           id: 13,
+      //     //           title: 'Beobachten',
+      //     //           done: false,
+      //     //         },
+      //     //       ],
+      //     //     },
+      //     //     {
+      //     //       id: 10,
+      //     //       title: 'Analyse des letzten Falles',
+      //     //       slug: 'analyse',
+      //     //       type: 'learnpath.Circle',
+      //     //       translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
+      //     //       learning_sequences: [
+      //     //         {
+      //     //           id: 11,
+      //     //           title: 'Starten',
+      //     //           done: true,
+      //     //         },
+      //     //         {
+      //     //           id: 13,
+      //     //           title: 'Beobachten',
+      //     //           done: true,
+      //     //         },
+      //     //         {
+      //     //           id: 18,
+      //     //           title: 'Anwenden',
+      //     //           done: true,
+      //     //         },
+      //     //         {
+      //     //           id: 30,
+      //     //           title: 'Üben',
+      //     //           done: false,
+      //     //         },
+      //     //       ],
+      //     //     },
+      //     //   ],
+      //     // },
+      //   ],
+      // },
       type: Object,
     },
 
@@ -159,12 +159,14 @@ export default {
   },
   computed: {
     viewBox() {
-      console.log(this.width, this.height)
       return `0 0 ${this.width} ${this.height* 1.5}`
     },
     circles() {
-      let internalCircles = _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'))
+      console.log(this.learningPathContents)
+
+      let internalCircles = _.flatten(_.pluck(this.learningPathContents.topics, 'circles'))
       _.forEach(internalCircles, function (circle) {
+        console.log('circle', circle)
         let pieWeights = new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
         let pieGenerator = d3.pie()
         let pieData = pieGenerator(pieWeights)
@@ -183,6 +185,7 @@ export default {
   },
 
   mounted() {
+    console.log('cirlces', this.circles)
 
     console.log(this.width, this.height)
     const circleWidth = 200
@@ -276,7 +279,7 @@ export default {
 
     const topicTitles = this.svg
       .selectAll('.topicTitles')
-      .data(this.learninglearningPathContents.topics)
+      .data(this.learningPathContents.topics)
       .enter()
       .append('text')
       .attr('x', (d, i) => {
@@ -290,7 +293,7 @@ export default {
 
     const topicLines = this.svg
       .selectAll('lines')
-      .data(this.learninglearningPathContents.topics)
+      .data(this.learningPathContents.topics)
       .enter()
       .append('line')
       .attr('x1', (d, i) => {
@@ -346,6 +349,7 @@ export default {
 
 
 <template>
+  <pre>{{learningPathContents}}</pre>
   <div class="svg-container h-full content-start	">
     <svg class="learning-path-visualization h-full" :viewBox="viewBox">
     </svg>
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index e484e8be..6661c685 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -5,7 +5,10 @@ import * as log from 'loglevel';
 import MainNavigationBar from '../components/MainNavigationBar.vue';
 import SimpleCircleDiagram from '../components/circle/LearningPathCircleDiagram.vue';
 
+
 export default {
+
+
   components: {MainNavigationBar, SimpleCircleDiagram},
   props: ['learningPathSlug',],
   data() {
@@ -17,14 +20,14 @@ export default {
       learningSequences: [],
     }
   },
-  mounted() {
+  beforeMount() {
     log.debug('LearningPath mounted', this.learningPathSlug);
     axios({
       method: 'get',
       url: `/learnpath/api/learningpath/${this.learningPathSlug}/`,
     }).then((response) => {
-      this.learningPathData = response.data
 
+      this.learningPathData = response.data
 
       let learningPathContents = {topics: []}
       let topic = {
@@ -36,13 +39,11 @@ export default {
         is_visible: false,
         cirlces: []
       }
-
       response.data.children.forEach((child) => {
         if (child.type === 'learnpath.Topic') {
           if (topic.id != 0) {
-            learningPathContents.topics.push(topic)
+            learningPathContents.topics.push(child)
           }
-
           topic = child
           topic.circles = []
         }
@@ -51,8 +52,6 @@ export default {
         }
       });
       learningPathContents.topics.push(topic)
-
-
       this.learningPathContents = learningPathContents;
 
     });
@@ -69,12 +68,9 @@ export default {
     <MainNavigationBar/>
 
     <div class="learningpath flex flex-col">
-
-
       <div class="flex flex-col h-max">
         <div class="bg-white h-80 pt-8">
-<!--          <img  src="@/assets/learning_path.svg" alt="" class="h-full">-->
-          <SimpleCircleDiagram :learning-path-contents="learningPathContents.topics"></SimpleCircleDiagram>
+          <SimpleCircleDiagram :learning-path-contents="learningPathContents"></SimpleCircleDiagram>
         </div>
 
         <div class="text-blue-dark font-bold text-7xl m-12">