diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index 59f53dad..0cd084e5 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -12,6 +12,7 @@ export default {
     return {
       count: 0,
       learningPathData: {},
+      learningPathContents: {},
       circles: [],
       learningSequences: [],
     }
@@ -23,19 +24,50 @@ export default {
       url: `/learnpath/api/learningpath/${this.learningPathSlug}/`,
     }).then((response) => {
       log.debug(response.data);
-      this.learningPathData = response.data;
+      this.learningPathData = response.data
+
+
+      let learningPathContents = { topics: [] }
+      let topic =       {
+            id : 0,
+            title : '',
+            slug : '',
+            type : 'learnpath.Topic',
+            translation_key : '',
+            is_visible : false,
+            cirlces : []
+        }
+
+      response.data.children.forEach((child) => {
+        console.log(child, '////')
+        if (child.type === 'learnpath.Topic') {
+          if (topic.id != 0){
+            learningPathContents.topics.push(topic)
+          }
+
+          topic = child
+          topic.circles = []
+        }
+        if (child.type === 'learnpath.Circle') {
+          console.log(child)
+          topic.circles.push(child)
+        }
+      });
+      learningPathContents.topics.push(topic)
+
+
+      this.learningPathContents = learningPathContents;
+      console.log(learningPathContents)
 
       // extract cirlces
 
-      this.learningPathData.children.forEach((child) => {
-        if (child.type === 'learnpath.Circle') {
-          this.circles.push(child);
-        }
-      });
+
     });
 
   }
 }
+
+
 </script>
 
 <template>
@@ -44,11 +76,19 @@ export default {
     <MainNavigationBar/>
 
     <div class="learningpath flex flex-col">
-
       <div class="flex flex-row  justify-start bg-white">
-        <div class="m-8 bg-green-500" v-for="circle in circles">
-          <img src="@/assets/circle-analyse.svg" alt="" height="200" width="200">
-          <div class="text-center text-xl font-bold mt-4">{{ circle.title }}</div>
+        <div class="m-8 p-4 topic border-l flex flex-col justify-start" v-for="topic in learningPathContents.topics">
+          <div class="font-bold text-blue-900 mb-4">{{topic.title}}</div>
+          <div class="flex flex-row">
+            <div class="circle mr-8" v-for="circle in topic.circles">
+            <img src="@/assets/circle-analyse.svg" alt="" height="200" width="200">
+            <div class="text-center text-xl text-blue-900 font-bold mt-4">{{ circle.title }}</div>
+
+          </div>
+
+
+          </div>
+
 
         </div>
 
@@ -72,6 +112,8 @@ export default {
           </div>
 
         </div>
+        <div class="topic"></div>
+
 
       </div>
 
diff --git a/server/vbv_lernwelt/learnpath/migrations/0001_initial.py b/server/vbv_lernwelt/learnpath/migrations/0001_initial.py
index e16881cf..fc25e468 100644
--- a/server/vbv_lernwelt/learnpath/migrations/0001_initial.py
+++ b/server/vbv_lernwelt/learnpath/migrations/0001_initial.py
@@ -1,4 +1,4 @@
-# Generated by Django 3.2.12 on 2022-06-03 13:11
+# Generated by Django 3.2.12 on 2022-06-08 08:34
 
 from django.db import migrations, models
 import django.db.models.deletion
@@ -16,6 +16,18 @@ class Migration(migrations.Migration):
     ]
 
     operations = [
+        migrations.CreateModel(
+            name='Circle',
+            fields=[
+                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.page')),
+                ('description', models.TextField(blank=True, default='')),
+                ('goals', models.TextField(blank=True, default='')),
+            ],
+            options={
+                'verbose_name': 'Circle',
+            },
+            bases=('wagtailcore.page',),
+        ),
         migrations.CreateModel(
             name='Competence',
             fields=[
@@ -75,15 +87,13 @@ class Migration(migrations.Migration):
         migrations.CreateModel(
             name='Topic',
             fields=[
-                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
-                ('sort_order', models.IntegerField(blank=True, editable=False, null=True)),
-                ('title', models.TextField(default='')),
+                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.page')),
                 ('is_visible', models.BooleanField(default=True)),
-                ('learning_path', modelcluster.fields.ParentalKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='topics', to='learnpath.learningpath')),
             ],
             options={
                 'verbose_name': 'Topic',
             },
+            bases=('wagtailcore.page',),
         ),
         migrations.CreateModel(
             name='FullfillmentCriteria',
@@ -102,17 +112,4 @@ class Migration(migrations.Migration):
             name='competence_page',
             field=modelcluster.fields.ParentalKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='competences', to='learnpath.competencepage'),
         ),
-        migrations.CreateModel(
-            name='Circle',
-            fields=[
-                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.page')),
-                ('description', models.TextField(blank=True, default='')),
-                ('goals', models.TextField(blank=True, default='')),
-                ('topic', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='circles', to='learnpath.topic')),
-            ],
-            options={
-                'verbose_name': 'Circle',
-            },
-            bases=('wagtailcore.page',),
-        ),
     ]
diff --git a/server/vbv_lernwelt/learnpath/models.py b/server/vbv_lernwelt/learnpath/models.py
index a8e12cfd..51efc479 100644
--- a/server/vbv_lernwelt/learnpath/models.py
+++ b/server/vbv_lernwelt/learnpath/models.py
@@ -17,11 +17,8 @@ from vbv_lernwelt.learnpath.serializer_helpers import get_it_serializer_class
 class LearningPath(Page):
     # PageChooserPanel('related_page', 'demo.PublisherPage'),
 
-    content_panels = Page.content_panels + [
-        InlinePanel('topics', label="Topics"),
-    ]
-
-    subpage_types = ['learnpath.Circle']
+    content_panels = Page.content_panels
+    subpage_types = ['learnpath.Circle', 'learnpath.Topic']
 
     class Meta:
         verbose_name = "Learning Path"
@@ -30,16 +27,12 @@ class LearningPath(Page):
         return f"{self.title}"
 
 
-class Topic(Orderable):
-    title = models.TextField(default='')
+class Topic(Page):
+   # title = models.TextField(default='')
     is_visible = models.BooleanField(default=True)
 
-    learning_path = ParentalKey('learnpath.LearningPath',
-                                null=True,
-                                blank=True,
-                                on_delete=models.CASCADE,
-                                related_name='topics',
-                                )
+    parent_page_types = ['learnpath.LearningPath']
+
 
     panels = [FieldPanel('title'),
               FieldPanel('is_visible'),
@@ -61,10 +54,17 @@ class Topic(Orderable):
 
     def full_clean(self, *args, **kwargs):
         self.slug = find_available_slug(Topic, slugify(self.title, allow_unicode=True))
+        print(self.slug)
         super(Topic, 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', 'is_visible'])
+
+
     class Meta:
-        verbose_name = "Topic"
+            verbose_name = "Topic"
 
     def __str__(self):
         return f"{self.title}"
@@ -74,13 +74,13 @@ class Circle(Page):
     description = models.TextField(default="", blank=True)
     goals = models.TextField(default="", blank=True)
 
-    topic = models.ForeignKey(
-        'learnpath.Topic',
-        null=True,
-        blank=True,
-        on_delete=models.SET_NULL,
-        related_name='circles'
-    )
+    # topic = models.ForeignKey(
+    #     'learnpath.Topic',
+    #     null=True,
+    #     blank=True,
+    #     on_delete=models.SET_NULL,
+    #     related_name='circles'
+    # )
 
     parent_page_types = ['learnpath.LearningPath']
     subpage_types = ['learnpath.LearningSequence', 'learnpath.LearningUnit']
@@ -101,7 +101,7 @@ class Circle(Page):
         return get_it_serializer_class(cls, field_names=['id', 'title', 'slug', 'type', 'translation_key'])
 
     def full_clean(self, *args, **kwargs):
-        # self.slug = find_available_slug(Circle, slugify(self.title, allow_unicode=True))
+        self.slug = find_available_slug(Circle, slugify(self.title, allow_unicode=True))
         super(Circle, self).full_clean(*args, **kwargs)
 
     class Meta:
diff --git a/server/vbv_lernwelt/learnpath/tests/bla.json b/server/vbv_lernwelt/learnpath/tests/bla.json
deleted file mode 100644
index b6db424b..00000000
--- a/server/vbv_lernwelt/learnpath/tests/bla.json
+++ /dev/null
@@ -1,9 +0,0 @@
-# -*- coding: utf-8 -*-
-#
-# Iterativ GmbH
-# http://www.iterativ.ch/
-#
-# Copyright (c) 2015 Iterativ GmbH. All rights reserved.
-#
-# Created on 2022-06-07
-# @author: lorenz.padberg@iterativ.ch
diff --git a/server/vbv_lernwelt/learnpath/tests/create_default_learning_path.py b/server/vbv_lernwelt/learnpath/tests/create_default_learning_path.py
index e1a36f1a..7bf9e3e0 100644
--- a/server/vbv_lernwelt/learnpath/tests/create_default_learning_path.py
+++ b/server/vbv_lernwelt/learnpath/tests/create_default_learning_path.py
@@ -26,14 +26,14 @@ def create_default_learning_path(user=None):
 
     lp = LearningPathFactory(title="Versicherungsvermittler/in", parent=site.root_page)
 
-    tp = TopicFactory(title="Basis", is_visible=False, learning_path=lp)
+    tp = TopicFactory(title="Basissdf", is_visible=False, parent=lp)
 
-    circle_1 = CircleFactory(title="Basis", parent=lp, topic=tp, description="""
+    circle_1 = CircleFactory(title="Basis", parent=lp, description="""
 In diesem Circle erklären wir dir, wie der Lehrgang
 Versicherungsvermittler / in " aufgebaut ist. Zudem vermitteln wir dir die wichtigsten Grundlagen,
 damit erfolgreich mit deinem Lernpfad starten kannst.""")
 
-    tp = TopicFactory(title="Gewinnen von Kunden", learning_path=lp)
+    tp = TopicFactory(title="Gewinnen von Kunden", parent=lp)
 
     circle_2 = CircleFactory(title="Gewinnen", parent=lp, description="""Versicherungsvermittlerinnen und -vermittler verfügen über
 ein starkes Netzwerk, das sie gezielt pflegen und ausbauen. Sie beraten und betreuen ihre bestehenden Kundinnen und Kunden professionell und gewinnen so ihr Vertrauen. Dadurch schaffen sie die Basis für das Gewinnen
@@ -52,10 +52,10 @@ von Neukunden zu benützen
 — Das Thema Risiko und Sicherheit in einem Gespräch gezielt und auf die Situation des jeweiligen Gesprächspartners bezogen einfliessen zu lassen
 — Im täglichen Kontakt potenzielle Kundinnen und Kunden zu erkennen""")
 
-    tp = TopicFactory(title="Beraten der Kunden", learning_path=lp)
-    circle_3 = CircleFactory(title="Einstieg", parent=lp, topic=tp)
+    tp = TopicFactory(title="Beraten der Kunden", parent=lp)
+    circle_3 = CircleFactory(title="Einstieg", parent=lp)
 
-    circe_analyse = CircleFactory(title="Analyse", parent=lp, topic=tp,
+    circe_analyse = CircleFactory(title="Analyse", parent=lp,
                                     description="""Nach dem Gespräch werten sie die Analyse aus und erstellen mit den
                                     zur Verfügung stehenden Systemen formal korrekte Lösungsvorschläge bzw.
                                     Ausschreibungen. Je nach Komplexität der Situation ziehen sie die nötigen
diff --git a/server/vbv_lernwelt/learnpath/tests/learning_path_factories.py b/server/vbv_lernwelt/learnpath/tests/learning_path_factories.py
index da06e5aa..417b7d08 100644
--- a/server/vbv_lernwelt/learnpath/tests/learning_path_factories.py
+++ b/server/vbv_lernwelt/learnpath/tests/learning_path_factories.py
@@ -13,7 +13,7 @@ class LearningPathFactory(wagtail_factories.PageFactory):
         model = LearningPath
 
 
-class TopicFactory(factory.django.DjangoModelFactory):
+class TopicFactory(wagtail_factories.PageFactory):
     title = "Gewinnen von Kunden"
     is_visible = True