diff --git a/client/src/components/CircleSidebar.vue b/client/src/components/CircleSidebar.vue
deleted file mode 100644
index 0dc94b35..00000000
--- a/client/src/components/CircleSidebar.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div>
-    <h1>Analyse</h1>
-    <p>Dauer 8 Stunden</p>
-    <div>CircleComponent</div>
-    <div>CircleOverviewComponent</div>
-    <div>FachexpertenKontaktieren</div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "CircleSidebar"
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/client/src/components/LearningPath.vue b/client/src/components/LearningPath.vue
deleted file mode 100644
index f7ed978a..00000000
--- a/client/src/components/LearningPath.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <ul>
-    <li>Einstieg</li>
-    <li>Analyse</li>
-  </ul>
-</template>
-
-<script>
-export default {
-  name: "LearningPath"
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/client/src/components/LearningSequence.vue b/client/src/components/LearningSequence.vue
deleted file mode 100644
index e858121d..00000000
--- a/client/src/components/LearningSequence.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <section>
-    <div>
-      <h2>Starten</h2>
-      <p>30 Minuten</p>
-    </div>
-    <ul>
-      <li v-for="unit in units" :key="unit">
-        {{unit}}
-      </li>
-    </ul>
-  </section>
-</template>
-
-<script>
-
-export default {
-  props: ['units'],
-  setup (props) {
-
-    return {
-    }
-  },
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/client/src/components/MainNavigationBar.vue b/client/src/components/MainNavigationBar.vue
index 760c41c4..954d7060 100644
--- a/client/src/components/MainNavigationBar.vue
+++ b/client/src/components/MainNavigationBar.vue
@@ -1,18 +1,18 @@
-<template>
-  <nav class="bg-blue-dark flex flex-row text-white">
-    <p>Ich bin ein myVBV Header</p>
-    <ul>
-      <li>Ich bin ein myVBV link</li>
-    </ul>
-  </nav>
-</template>
-
 <script>
 export default {
   name: "MainNavigationBar"
 }
 </script>
 
+<template>
+  <nav class="bg-blue-dark flex flex-row gap-x-8 items-center text-white px-8 py-4">
+    <a href="" class="text-xl">myVBV</a>
+    <a href="" class="">Lernpfad</a>
+    <a href="" class="">Kompetenzprofil</a>
+    <a href="" class="">Berufstypische Situationen</a>
+  </nav>
+</template>
+
 <style scoped>
 
 </style>
diff --git a/client/src/components/VBVNavigationBar.vue b/client/src/components/VBVNavigationBar.vue
deleted file mode 100644
index f23cdf16..00000000
--- a/client/src/components/VBVNavigationBar.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <nav class="bg-blue-dark flex flex-row text-white">
-    <p>Ich bin ein VBV Header</p>
-    <ul>
-      <li>Ich bin ein VBV link</li>
-    </ul>
-  </nav>
-</template>
-
-<script>
-export default {
-  name: "VBVNavigationBar"
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 5d5356d7..3b072d4c 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -27,8 +27,9 @@ const router = createRouter({
       }
     },
     {
-      path: '/analyse',
-      component: () => import('../views/CircleAnalyseExampleView.vue'),
+      path: '/circle/:circleSlug',
+      component: () => import('../views/Circle.vue'),
+      props: true
     },
     {
       path: '/profile',
@@ -38,10 +39,6 @@ const router = createRouter({
       path: '/learningpath/:learningPathId',
       component: () => import('../views/LearningPathOverview.vue'),
     },
-    {
-      path: '/learningpath/:learningPathId/circle/:circleId',
-      component: () => import('../views/CircleView.vue'),
-    }
   ]
 })
 
diff --git a/client/src/views/CircleAnalyseExampleView.vue b/client/src/views/Circle.vue
similarity index 83%
rename from client/src/views/CircleAnalyseExampleView.vue
rename to client/src/views/Circle.vue
index a1996aeb..c97d514d 100644
--- a/client/src/views/CircleAnalyseExampleView.vue
+++ b/client/src/views/Circle.vue
@@ -1,7 +1,10 @@
 <script>
 import axios from 'axios';
+import MainNavigationBar from '../components/MainNavigationBar.vue';
 
 export default {
+  components: { MainNavigationBar },
+  props: ['circleSlug',],
   data() {
     return {
       count: 0,
@@ -9,10 +12,10 @@ export default {
     }
   },
   mounted() {
-    console.log('CircleAnalyseExampleView mounted');
+    console.log('CircleAnalyseExampleView mounted', this.circleSlug);
     axios({
       method: 'get',
-      url: 'http://localhost:8000/wagtailapi/v2/pages/?type=learnpath.Circle&slug=analyse&fields=title,description,learning_sequences'
+      url: `http://localhost:8000/wagtailapi/v2/pages/?type=learnpath.Circle&slug=${this.circleSlug}&fields=title,description,learning_sequences`
     }).then((response) => {
       this.circleData = response.data.items[0];
     });
@@ -22,6 +25,8 @@ export default {
 </script>
 
 <template>
+  <MainNavigationBar/>
+
   <div class="circle">
     <div class="flex">
       <div class="flex-initial w-128 p-8">
diff --git a/client/src/views/CircleView.vue b/client/src/views/CircleView.vue
deleted file mode 100644
index aa84cc4d..00000000
--- a/client/src/views/CircleView.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <VBVNavigationBar />
-  <MainNavigationBar />
-  <div class="flex flex-row">
-    <CircleSidebar />
-    <main class="flex-grow">
-      circle main content
-      <LearningSequence :units="units"/>
-    </main>
-  </div>
-</template>
-
-<script>
-import MainNavigationBar from "../components/MainNavigationBar.vue";
-import VBVNavigationBar from "../components/VBVNavigationBar.vue";
-import CircleSidebar from "../components/CircleSidebar.vue";
-import LearningSequence from "../components/LearningSequence.vue";
-import {reactive} from "vue";
-
-export default {
-  name: "CircleView",
-  components: {LearningSequence, CircleSidebar, MainNavigationBar, VBVNavigationBar},
-  setup () {
-    const units = reactive(['video bla', 'fachwissen'])
-
-    return {
-      units
-    }
-  }
-
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/tailwind/input.css b/tailwind/input.css
index 90dad3f1..45fb1881 100644
--- a/tailwind/input.css
+++ b/tailwind/input.css
@@ -2,10 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-* {
-  @apply text-blue-dark;
-}
-
 @layer base {
   h1 {
     @apply text-6xl font-bold