diff --git a/client/src/components/portfolio/Portfolio.vue b/client/src/components/portfolio/Portfolio.vue
deleted file mode 100644
index 3afd1655..00000000
--- a/client/src/components/portfolio/Portfolio.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <div class="portfolio">
-    <add-project></add-project>
-
-    <project-widget
-      v-for="project in projects"
-      v-bind="project" :key="project.id"
-      class="portfolio__project"
-    ></project-widget>
-  </div>
-</template>
-
-<script>
-  import ProjectWidget from '@/components/portfolio/ProjectWidget';
-  import AddProject from '@/components/portfolio/AddProject';
-
-  import PROJECTS_QUERY from '@/graphql/gql/allProjects.gql';
-
-  export default {
-    components: {
-      ProjectWidget,
-      AddProject
-    },
-
-    apollo: {
-      projects: {
-        query: PROJECTS_QUERY,
-        update(data) {
-          return this.$getRidOfEdges(data).projects
-        }
-      },
-    },
-
-    data() {
-      return {
-        projects: [
-          {
-            id: 1,
-            title: 'Quartalsarbeit: Mein Lehrbetrieb',
-            appearance: 'green',
-            slug: 'quartalsarbeit'
-          },
-          {
-            id: 2,
-            title: 'Mein Projekt 2',
-            appearance: 'red',
-            slug: 'mein-projekt-2'
-          },
-          {
-            id: 3,
-            title: 'Mein Projekt 3',
-            appearance: 'blue',
-            slug: 'mein-projekt-3'
-          },
-        ]
-      }
-    }
-  }
-</script>
-
-<style scoped lang="scss">
-  .portfolio {
-
-    display: -ms-grid;
-    @supports (display: grid) {
-      display: grid;
-    }
-
-    grid-row-gap: 30px;
-    grid-auto-rows: 200px;
-    width: 640px;
-    justify-self: center;
-    box-sizing: border-box;
-
-  }
-</style>
diff --git a/client/src/pages/portfolio.vue b/client/src/pages/portfolio.vue
index f1b0686c..d5373775 100644
--- a/client/src/pages/portfolio.vue
+++ b/client/src/pages/portfolio.vue
@@ -1,23 +1,64 @@
 <template>
-  <div class="portfolio-page">
-    <portfolio></portfolio>
+  <div class="portfolio__page">
+    <div class="portfolio">
+      <add-project></add-project>
+
+      <project-widget
+        v-for="project in projects"
+        v-bind="project" :key="project.id"
+        class="portfolio__project"
+      ></project-widget>
+    </div>
+
   </div>
 </template>
 
 <script>
-  import Portfolio from '@/components/portfolio/Portfolio';
+  import ProjectWidget from '@/components/portfolio/ProjectWidget';
+  import AddProject from '@/components/portfolio/AddProject';
+
+  import PROJECTS_QUERY from '@/graphql/gql/allProjects.gql';
 
   export default {
     components: {
-      Portfolio
+      ProjectWidget,
+      AddProject
+    },
+
+    apollo: {
+      projects: {
+        query: PROJECTS_QUERY,
+        update(data) {
+          return this.$getRidOfEdges(data).projects
+        }
+      },
+    },
+
+    data() {
+      return {
+        projects: []
+      }
     }
   }
 </script>
 
-<style>
-  .portfolio-page {
-    display: grid;
-    align-content: center;
-    justify-content: center;
+<style scoped lang="scss">
+  .portfolio {
+    display: -ms-grid;
+    @supports (display: grid) {
+      display: grid;
+    }
+
+    grid-row-gap: 30px;
+    grid-auto-rows: 200px;
+    width: 640px;
+    justify-self: center;
+    box-sizing: border-box;
+
+    &__page {
+      display: grid;
+      align-content: center;
+      justify-content: center;
+    }
   }
 </style>