diff --git a/client/src/components/ModuleTeaser.vue b/client/src/components/ModuleTeaser.vue
new file mode 100644
index 00000000..79af41f9
--- /dev/null
+++ b/client/src/components/ModuleTeaser.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="module-teaser">
+    <img src="~/assets/maggie.jpg" alt="" class="module-teaser__image">
+    <div class="module-teaser__body">
+      <h3 class="module-teaser__meta-title">Modul 1</h3>
+      <h3 class="module-teaser__title">Mein neues Umfeld</h3>
+      <p class="module-teaser__description">Wie erging es Ihnen am ersten Arbeits- und Schultag?</p>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  .module-teaser {
+    box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
+    border: 1px solid #E2E2E2;
+    height: 330px;
+    width: 300px;
+    border-radius: 12px;
+
+    &__image {
+      width: 100%;
+      max-height: 150px;
+    }
+
+    &__body {
+      padding: 20px;
+    }
+  }
+</style>
diff --git a/client/src/layouts/default.vue b/client/src/layouts/default.vue
new file mode 100644
index 00000000..14810f48
--- /dev/null
+++ b/client/src/layouts/default.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="container">
+    <header>Header</header>
+    <aside>
+      <h2>Themen</h2>
+      <ul>
+        <li>1. Berufliche Grundbildung</li>
+        <li>2. Geld und Kauf</li>
+        <li>3. Geld und Kauf</li>
+        <li>4. Geld und Kauf</li>
+        <li>5. Geld und Kauf</li>
+        <li>6. Geld und Kauf</li>
+        <li>7. Geld und Kauf</li>
+        <li>8. Geld und Kauf</li>
+        <li>9. Geld und Kauf</li>
+      </ul>
+      <h2>Basiswissen</h2>
+      <h2>ABU News</h2>
+
+    </aside>
+    <main>
+      <nuxt/>
+    </main>
+    <footer>Footer</footer>
+  </div>
+</template>
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 5c48cc9d..6e88e0fc 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -22,6 +22,7 @@
       modules: {
         query: ALL_MODULES,
         prefetch: true,
+        manual: true,
         result({data, loading, networkStatus}) {
           if (!loading) {
             this.modules = data.modules.edges.map(node => node.node);
diff --git a/client/src/pages/topic.vue b/client/src/pages/topic.vue
new file mode 100644
index 00000000..63c055cf
--- /dev/null
+++ b/client/src/pages/topic.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="topic">
+    <h1 class="topic__title">Berufliche Grundbildung</h1>
+    <p class="topic__teaser">
+      Die berufliche Grundbildung lehrt Sie, den Arbeitsalltag erfolgreich zu bewältigen, Ihre Fähigkeiten zu entwickeln und beruflich flexibel zu sein. Ebenso wichtig ist der Umgang mit verschiedensten Mitmenschen. Eine angemessene mündliche Kommunikation erleichtert
+      das Zusammenleben und Zusammenarbeiten.
+    </p>
+    <module-teaser></module-teaser>
+    <module-teaser></module-teaser>
+    <module-teaser></module-teaser>
+  </div>
+</template>
+
+<script>
+  import ModuleTeaser from '~/components/ModuleTeaser.vue';
+
+  export default {
+    components: {
+      ModuleTeaser
+    }
+  }
+</script>