diff --git a/client/src/assets/learning_path.svg b/client/src/assets/learning_path.svg
new file mode 100644
index 00000000..e69de29b
diff --git a/client/src/components/circle/CircleDiagram.vue b/client/src/components/circle/CircleDiagram.vue
index e850a3a7..3f2e4ef6 100644
--- a/client/src/components/circle/CircleDiagram.vue
+++ b/client/src/components/circle/CircleDiagram.vue
@@ -1,75 +1,58 @@
 <script>
-import * as d3 from 'd3';
+import * as d3 from 'd3'
 
 export default {
   mounted() {
+    const data = [5, 5, 5, 5, 5]
 
-    var data = [5, 5, 5, 5, 5];
+    const width = 500,
+      height = 500,
+      radius = Math.min(width, height) / 2.5
 
-    var width = 500, height = 500, radius = Math.min(width, height) / 2.5
+    const svg = d3.select(this.$el).append('svg').attr('width', 500).attr('height', 500)
 
+    const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
 
-    var svg = d3.select(this.$el)
-      .append('svg')
-      .attr('width', 500)
-      .attr('height', 500)
-
-
-    var g = svg.append("g").attr('transform', "translate(" + width / 2 + "," + height / 2 + ")");
-
-
-    var color = '#99C7E7';
+    const color = '#99C7E7'
 
     // Generate the pie
-    var pie = d3.pie();
+    const pie = d3.pie()
 
-// Generate the arcs
-    var arc = d3
+    // Generate the arcs
+    const arc = d3
       .arc()
       .innerRadius(radius / 2.5)
       .padAngle(12 / 360)
-      .outerRadius(radius);
+      .outerRadius(radius)
 
-// Generate the arrows
-    var arrow = d3.arc()
+    // Generate the arrows
+    const arrow = d3
+      .arc()
       .innerRadius(radius * 1.15)
       .padAngle(30 / 360)
-      .outerRadius(radius * 1.16);
+      .outerRadius(radius * 1.16)
 
+    //Generate groups
+    const arcs = g.selectAll('arc').data(pie(data)).enter().append('g').attr('class', 'arc')
 
-//Generate groups
-    var arcs = g.selectAll("arc")
+    //Generate groups
+    const arrows = g
+      .selectAll('arrow')
       .data(pie(data))
       .enter()
-      .append("g")
-      .attr("class", "arc")
+      .append('g')
+      .attr('class', 'arrow')
+      .attr('marker-start', 'url(#triangle)')
 
+    const markers = g.selectAll('arrow').attr('transform', 'translate(60, 60) rotate(30)')
 
-//Generate groups
-    var arrows = g.selectAll("arrow")
-      .data(pie(data))
-      .enter()
-      .append("g")
-      .attr("class", "arrow")
-      .attr("marker-start", "url(#triangle)")
+    //Draw arc paths
+    arcs.append('path').attr('fill', color).attr('d', arc)
 
-    var markers = g.selectAll("arrow").attr("transform", "translate(60, 60) rotate(30)")
-
-//Draw arc paths
-    arcs.append("path")
-      .attr("fill", color)
-      .attr("d", arc)
-
-//Draw arrow paths
-    arrows.append("path")
-      .attr("fill", color)
-      .attr("d", arrow)
-
-
-  }
+    //Draw arrow paths
+    arrows.append('path').attr('fill', color).attr('d', arrow)
+  },
 }
-
-
 </script>
 
 <style>
@@ -85,8 +68,6 @@ input {
 }
 </style>
 
-
 <template>
   <div class="demo-chart" width="500" heigth="500"/>
 </template>
-
diff --git a/client/src/components/circle/LearningPathCircleDiagram.vue b/client/src/components/circle/LearningPathCircleDiagram.vue
deleted file mode 100644
index 8cc97a90..00000000
--- a/client/src/components/circle/LearningPathCircleDiagram.vue
+++ /dev/null
@@ -1,299 +0,0 @@
-<script>
-import * as d3 from 'd3'
-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: 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: 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: 10,
-                title: 'Analyse',
-                slug: 'analyse',
-                type: 'learnpath.Circle',
-                translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
-                learning_sequences: [
-                  {
-                    id: 11,
-                    title: 'Starten',
-                  },
-                  {
-                    id: 13,
-                    title: 'Beobachten',
-                  },
-                  {
-                    id: 18,
-                    title: 'Anwenden',
-                  },
-                  {
-                    id: 30,
-                    title: 'Üben',
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-      type: Object,
-    },
-
-    width: {
-      default: 1024,
-      type: Number,
-    },
-    height: {
-      default: 250,
-      type: Number,
-    },
-  },
-  computed: {
-
-    viewBox() {
-      return `0 0 ${this.width} ${this.height}`
-    },
-    circles() {
-      return _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'));
-    },
-    svg() {
-
-      const width = this.width
-      const height = this.height
-      return d3.select(this.$el).append('svg').attr('width', width).attr('height', height)
-    }
-
-  },
-
-  mounted() {
-
-    function getPieDataForCircle(circle) {
-      const newArray = new Array(Math.max(d[2].learning_sequences.length, 1)).fill(1)
-      return newArray
-    }
-
-    const learningPathContents = []
-
-    const data = this.pieData
-
-    const circleWidth = 150
-
-
-    const radius = (circleWidth * 0.7) / 2
-    console.log(this.viewBox)
-
-
-    const cicles = this.svg
-      .selectAll('circle')
-      .data(this.circles)
-      .enter()
-      .append('circle')
-      .attr('cx', (d, i) => {
-        return (i + 1) * circleWidth - radius
-      })
-      .attr('cy', 150)
-      .attr('r', radius)
-      .attr('fill', '#99C7E7')
-
-    const circlesText = this.svg
-      .selectAll('.circlesText')
-      .data(this.circles)
-      .enter()
-      .append('text')
-      .attr('x', (d, i) => {
-        return (i + 1) * circleWidth - radius
-      })
-      .attr('y', 150 + radius + 30)
-      .attr('fill', '#00224D')
-      .style('font-size', 19)
-      .text((d) => d.title)
-      .attr('class', 'circlesText')
-      .style('text-anchor', 'middle')
-
-
-    const topicTitles = this.svg
-      .selectAll('.topicTitles')
-      .data(this.learninglearningPathContents.topics)
-      .enter()
-      .append('text')
-      .attr('x', (d, i) => {
-        return i * circleWidth * d.circles.length + 50
-      })
-      .attr('y', 50)
-      .attr('fill', '#00224D')
-
-
-      .style('font-size', 19)
-      .text((d) => d.title)
-      .attr('class', 'topicTitles')
-
-
-    const topicLines = this.svg
-      .selectAll('lines')
-      .data(this.learninglearningPathContents.topics)
-      .enter()
-      .append('line')
-      .attr('x1', (d, i) => {
-        return i * circleWidth * d.circles.length + 30
-      })
-      .attr('y1', 10)
-      .attr('x2', (d, i) => {
-        return i * circleWidth * d.circles.length + 30
-      })
-      .attr('y2', 270)
-      .attr('class', 'stroke-gray-500')
-      .attr('stroke-width', 1.76)
-
-
-    const g = this.svg.append('g').attr('transform', 'translate(' + this.width / 2 + ',' + this.height / 2 + ')')
-
-
-    // Generate the pie
-    const pie = d3.pie()
-
-    // Generate the arcs
-    const arc = d3
-      .arc()
-      .innerRadius(radius / 2)
-      .padAngle(12 / 360)
-      .outerRadius(radius)
-
-
-    //Generate groups
-    const arcs = g.selectAll('arc')
-      .data(pie(d => getPieDataForCircle(d)))
-      .enter()
-      .append('g')
-      .attr('class', 'arc')
-
-
-    //Draw arc paths
-    arcs.append('path')
-      .attr('d', arc)
-
-    // Add the path using this helper function
-
-    //     console.log(this.pieData)
-    //     const data = this.pieData
-    //
-    //     const width = this.width
-    //     const height = this.height
-    //     const radius = Math.min(width, height) / 2.5
-    //     console.log(this.viewBox)
-    //
-    //
-    //     const svg = d3.select(this.$el)
-    //       .append('svg')
-    //       .attr('width', width)
-    //       .attr('height', height)
-    //
-    //
-    //     const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
-    //
-    //
-    //     // Generate the pie
-    //     const pie = d3.pie()
-    //
-    // // Generate the arcs
-    //     const arc = d3
-    //       .arc()
-    //       .innerRadius(radius / 2)
-    //       .padAngle(12 / 360)
-    //       .outerRadius(radius)
-    //
-    //
-    // //Generate groups
-    //     const arcs = g.selectAll('arc')
-    //       .data(pie(data))
-    //       .enter()
-    //       .append('g')
-    //       .attr('class', 'arc')
-    //
-    //
-    // //Draw arc paths
-    //     arcs.append('path')
-    //       .attr('d', arc)
-    //
-    //
-    //   }
-    //
-  },
-}
-</script>
-
-<style scoped>
-.svg-container {
-  display: inline-block;
-  position: relative;
-  width: 100%;
-  padding-bottom: 100%;
-  vertical-align: top;
-  overflow: hidden;
-  fill: rgb(65 181 250);
-}
-
-.svg-content {
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  fill: rgb(65 181 250);
-}
-</style>
-
-<template>
-  <div id="container" class="svg-container"></div>
-</template>
diff --git a/client/src/components/circle/LearningPathDiagram.vue b/client/src/components/circle/LearningPathDiagram.vue
new file mode 100644
index 00000000..42f3aa1a
--- /dev/null
+++ b/client/src/components/circle/LearningPathDiagram.vue
@@ -0,0 +1,352 @@
+<script>
+import * as d3 from 'd3'
+import * as _ from 'underscore'
+
+export default {
+  props: {
+    learningPathContents: {
+      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,
+          //         },
+          //       ],
+          //     },
+          //   ],
+          // },
+        ],
+      },
+      type: Object,
+    },
+
+    width: {
+      default: 1440,
+      type: Number,
+    },
+    height: {
+      default: 256,
+      type: Number,
+    },
+  },
+  computed: {
+    viewBox() {
+      return `0 0 ${this.width} ${this.height* 1.5}`
+    },
+    circles() {
+
+      let internalCircles = _.flatten(_.pluck(this.learningPathContents.topics, 'circles'))
+      _.forEach(internalCircles, function (circle) {
+        let pieWeights = new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
+        let pieGenerator = d3.pie()
+        let pieData = pieGenerator(pieWeights)
+        _.forEach(pieData, function (pie) {
+          pie.done = circle.learning_sequences.length === 0 ? false : circle.learning_sequences[parseInt(pie.index)].done
+        })
+        circle.pieData = pieData
+      })
+      return internalCircles
+    },
+    svg() {
+      return d3.select('.learning-path-visualization')
+
+    },
+
+  },
+
+  mounted() {
+    const circleWidth = 200
+    const radius = (circleWidth * 0.8) / 2
+    const blue900 = '#00224D',
+      blue700 = '#1A5197',
+      gray100 = '#EDF2F6',
+      gray300 = '#E0E5EC',
+      gray500 = '#B1C1CA',
+      sky400 = '#72CAFF',
+      sky500 = '#41B5FA'
+
+    let vueRouter =  this.$router
+
+    // Create append pie charts to the main svg
+    const circle_groups = this.svg
+      .selectAll('.circle')
+      .data(this.circles)
+      .enter()
+      .append('g')
+      .attr('class', 'circle')
+      .attr('transform', (d, i) => {
+        let x_coord = (i + 1) * circleWidth - radius
+        return 'translate(' + x_coord + ', 200)'
+      })
+      .on('mouseover', function (d, i) {
+        d3.select(this)
+          .selectAll('.learningSegmentArc')
+          .transition()
+          .duration('200')
+          .attr('fill', (d) => {
+            return d.done ? sky400 : gray100
+          })
+      })
+      .on('mouseout', function (d, i) {
+        d3.select(this)
+          .selectAll('.learningSegmentArc')
+          .transition()
+          .duration('200')
+          .attr('fill', (d) => {
+            return d.done ? sky500 : gray300
+          })
+      })
+      .on('click', function (d, i) {
+        vueRouter.push('/circle/'+i.slug)
+      })
+
+      .attr('role', 'button')
+
+    const arcGenerator = d3
+      .arc()
+      .innerRadius(radius / 2)
+      .padAngle(12 / 360)
+      .outerRadius(radius)
+
+    //Generate groups
+    const arcs = this.svg
+      .selectAll('g')
+      .selectAll('.learningSegmentArc')
+      .attr('fill', (d) => {
+        let color = 'red'
+        return color
+      })
+      .data((d) => {
+        return d.pieData
+      })
+      .enter()
+      .append('g')
+      .attr('class', 'learningSegmentArc')
+      .attr('fill', gray300)
+
+    arcs
+      .transition()
+      .duration('1000')
+      .attr('fill', (d) => {
+        return d.done ? sky500 : gray300
+      })
+
+    //Draw arc paths
+    arcs.append('path').attr('d', arcGenerator)
+
+    const circlesText = circle_groups
+      .append('text')
+      .attr('fill', blue900)
+      .style('font-size', 19)
+      .text((d) => d.title)
+      .attr('y', radius + 30)
+      .attr('class', 'circlesText text-xl font-bold')
+      .style('text-anchor', 'middle')
+      .call(wrap, 200 - 20)
+
+    const topicTitles = this.svg
+      .selectAll('.topicTitles')
+      .data(this.learningPathContents.topics)
+      .enter()
+      .append('text')
+      .attr('x', (d, i) => {
+        return i * circleWidth * d.circles.length + 50
+      })
+      .attr('y', 50)
+      .attr('fill', blue900)
+      .style('font-size', 19)
+      .text((d) => d.title)
+      .attr('class', 'topicTitles font-bold')
+
+    const topicLines = this.svg
+      .selectAll('lines')
+      .data(this.learningPathContents.topics)
+      .enter()
+      .append('line')
+      .attr('x1', (d, i) => {
+        return i * circleWidth * d.circles.length + 30
+      })
+      .attr('y1', 10)
+      .attr('x2', (d, i) => {
+        return i * circleWidth * d.circles.length + 30
+      })
+      .attr('y2', 0)
+      .attr('class', 'stroke-gray-500')
+      .attr('stroke-width', 1.76)
+
+    topicLines.transition().duration('1000').attr('y2', 350)
+
+    function wrap(text, width) {
+      text.each(function () {
+        let text = d3.select(this),
+          words = text.text().split(/\s+/).reverse(),
+          word,
+          line = [],
+          lineNumber = 0,
+          lineHeight = 1.1, // ems
+          y = text.attr('y'),
+          dy = 0, //parseFloat(text.attr('dy')),
+          tspan = text
+            .text(null)
+            .append('tspan')
+            .attr('x', 0)
+            .attr('y', y)
+            .attr('dy', dy + 'em')
+        while ((word = words.pop())) {
+          line.push(word)
+          tspan.text(line.join(' '))
+          if (tspan.node().getComputedTextLength() > width) {
+            line.pop()
+            tspan.text(line.join(' '))
+            line = [word]
+
+            tspan = text
+              .append('tspan')
+              .attr('x', 0)
+              .attr('y', y)
+              .attr('dy', ++lineNumber * lineHeight + dy + 'em')
+              .text(word)
+          }
+        }
+      })
+    }
+  },
+}
+</script>
+
+
+<template>
+  <div class="svg-container h-full content-start	">
+    <svg class="learning-path-visualization h-full" :viewBox="viewBox">
+    </svg>
+  </div>
+
+</template>
diff --git a/client/src/components/circle/italy.json b/client/src/components/circle/italy.json
new file mode 100644
index 00000000..e69de29b
diff --git a/client/src/components/circle/map.html b/client/src/components/circle/map.html
new file mode 100644
index 00000000..6b6499c3
--- /dev/null
+++ b/client/src/components/circle/map.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>$Title$</title>
+</head>
+<body>
+$END$
+</body>
+</html>
diff --git a/client/src/views/HomeView.vue b/client/src/views/HomeView.vue
index de8b39f2..35d4e0b9 100644
--- a/client/src/views/HomeView.vue
+++ b/client/src/views/HomeView.vue
@@ -10,7 +10,7 @@ import MainNavigationBar from '@/components/MainNavigationBar.vue';</script>
     <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" (Login benötigt)</router-link>-->
+           <router-link class="link text-xl" to="/learningpath/versicherungsvermittlerin">Lernpfad "Versicherungsvermittlerin" (Login benötigt)</router-link>
       <router-link class="link text-xl" to="/circle/analyse">Circle "Analyse" (Login benötigt)</router-link>
     </div>
   </main>
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index 1f54ea75..52f53ac0 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -3,16 +3,19 @@ import axios from 'axios';
 import * as log from 'loglevel';
 
 import MainNavigationBar from '../components/MainNavigationBar.vue';
-import SimpleCircleDiagram from '../components/circle/LearningPathCircleDiagram.vue';
+import LearningPathDiagram from '../components/circle/LearningPathDiagram.vue';
+
 
 export default {
-  components: {MainNavigationBar, SimpleCircleDiagram},
+
+
+  components: {MainNavigationBar, LearningPathDiagram},
   props: ['learningPathSlug',],
   data() {
     return {
       count: 0,
       learningPathData: {},
-      learningPathContents: {},
+      learningPathContents: null,
       circles: [],
       learningSequences: [],
     }
@@ -23,39 +26,32 @@ export default {
       method: 'get',
       url: `/learnpath/api/learningpath/${this.learningPathSlug}/`,
     }).then((response) => {
+
       this.learningPathData = response.data
 
-
-      let learningPathContents = { topics: [] }
-      let topic =       {
-            id : 0,
-            title : '',
-            slug : '',
-            type : 'learnpath.Topic',
-            translation_key : '',
-            is_visible : false,
-            cirlces : []
-        }
-
+      let learningPathContents = {topics: []}
+      let topic = {
+        id: 0,
+        title: '',
+        slug: '',
+        type: 'learnpath.Topic',
+        translation_key: '',
+        is_visible: false,
+        cirlces: []
+      }
       response.data.children.forEach((child) => {
         if (child.type === 'learnpath.Topic') {
-          if (topic.id != 0){
-            learningPathContents.topics.push(topic)
+          if (topic.id != 0) {
+            learningPathContents.topics.push(child)
           }
-
           topic = child
           topic.circles = []
         }
         if (child.type === 'learnpath.Circle') {
-          console.log(child)
           topic.circles.push(child)
         }
       });
       learningPathContents.topics.push(topic)
-      console.log(learningPathContents)
-      console.log('oskadfjnmlasdmflkmsadlf')
-
-
       this.learningPathContents = learningPathContents;
 
     });
@@ -67,16 +63,17 @@ export default {
 </script>
 
 <template>
-  <div class="bg-gray-100 h-screen">
+  <div class="bg-gray-300 h-screen" v-if="learningPathContents">
+
 
     <MainNavigationBar/>
 
     <div class="learningpath flex flex-col">
+      <div class="flex flex-col h-max">
+        <div class="bg-white h-80 pt-8">
+          <LearningPathDiagram :learning-path-contents="learningPathContents"></LearningPathDiagram>
+        </div>
 
-      <SimpleCircleDiagram class="w-48 h-48" :learning-path-contents="learningPathContents.topics"></SimpleCircleDiagram>
-
-
-      <div class="flex flex-col h-max p-6">
         <div class="text-blue-dark font-bold text-7xl m-12">
           {{ learningPathData.title }}
         </div>