diff --git a/.github/workflows/dev.yml b/.github/workflows/dev.yml
new file mode 100644
index 0000000..14bb2c8
--- /dev/null
+++ b/.github/workflows/dev.yml
@@ -0,0 +1,39 @@
+# Deploing to dev server
+name: Deploy the application to Google Cloud Run
+
+on:
+  pull_request:
+    branches:
+      - 'develop'
+
+  push:
+    branches:
+      - 'develop'
+
+jobs:
+  deploy:
+    name: Deploy job for dev
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v1
+
+      - name: Build Docker image
+        run: |
+          docker build . --tag gcr.io/${{ secrets.GCLOUD_PROJECT }}/${{ secrets.GCLOUD_APP_NAME_DEV }}
+
+      - name: Authenticate into Google Cloud Platform
+        uses: GoogleCloudPlatform/github-actions/setup-gcloud@master
+        with:
+          service_account_email: ${{ secrets.GCLOUD_EMAIL }}
+          service_account_key: ${{ secrets.GCLOUD_AUTH }}
+
+      - name: Configure Docker to use Google Cloud Platform
+        run: "gcloud auth configure-docker --quiet"
+
+      - name: Push image to Google Cloud Container Registry
+        run: docker push gcr.io/${{ secrets.GCLOUD_PROJECT }}/${{ secrets.GCLOUD_APP_NAME_DEV }}
+
+      - name: Install commands and deploy on cloud run
+        run: |
+          gcloud run deploy ${{ secrets.GCLOUD_APP_NAME_DEV }} --quiet --image gcr.io/${{ secrets.GCLOUD_PROJECT }}/${{ secrets.GCLOUD_APP_NAME_DEV }} --project ${{ secrets.GCLOUD_PROJECT }} --region europe-west1 --platform managed
diff --git a/.github/workflows/google.yml b/.github/workflows/prod.yml
similarity index 90%
rename from .github/workflows/google.yml
rename to .github/workflows/prod.yml
index a8a9d7e..0a9e8fe 100644
--- a/.github/workflows/google.yml
+++ b/.github/workflows/prod.yml
@@ -1,21 +1,23 @@
-
+# Deploing to prod server
 name: Deploy the application to Google Cloud Run
+
 on:
-  push:
+  pull_request:
     branches:
       - 'master'
 
 jobs:
   deploy:
-    name: Deploy job
+    name: Deploy job for prod
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
         uses: actions/checkout@v1
 
-      - name: Build Docker image
+      - name: Build Docker image for production
         run: |
           docker build . --tag gcr.io/${{ secrets.GCLOUD_PROJECT }}/${{ secrets.GCLOUD_APP_NAME }}
+
       - name: Authenticate into Google Cloud Platform
         uses: GoogleCloudPlatform/github-actions/setup-gcloud@master
         with:
diff --git a/assets/colors.scss b/assets/colors.scss
index e69de29..10ff7c3 100644
--- a/assets/colors.scss
+++ b/assets/colors.scss
@@ -0,0 +1,3 @@
+$background: #2F2F2F;
+$textColor: #F1F1F1;
+$footer: #4A4A4A;
diff --git a/assets/global.scss b/assets/global.scss
index 8cc3b76..09eefea 100644
--- a/assets/global.scss
+++ b/assets/global.scss
@@ -1,25 +1,23 @@
+@import '@/assets/colors';
+
 * {
   box-sizing: border-box;
-  margin: 0;
-  padding: 0;
 }
 
-html {
-  background: #2F2F2F;
+html, body {
+  margin: 0;
+  padding: 0;
   font-family: 'Montserrat', sans-serif;
+  background: $background;
 }
 
-h1, h2, h3, h4, h5, p {
-  color: #F1F1F1;
+h1, h2, h3, p, a {
+  color: $textColor;
   text-align: center;
 }
 
-h2 {
-  margin-bottom: 10px;
-}
-
-a {
-  color:#F1F1F1;
-  text-decoration: none;
-  margin: 10px;
-}
+@media only screen and (max-width: 765px) {
+  body {
+    padding: 10px;
+  }
+}
\ No newline at end of file
diff --git a/components/about.vue b/components/about.vue
deleted file mode 100644
index 44c3050..0000000
--- a/components/about.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="container">
-    <h2>About</h2>
-    <p>We are creating this plane because we think that it is a valuable contribution to society. It is entierly open source and is published under the MIT License. If you want to support this project please consider donating as it helps us supporting this in the future. Or, if you have some technical expertise, you can become a contributor yourself.</p>
-  </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component } from 'nuxt-property-decorator'
-
-@Component
-export default class About extends Vue {
-
-}
-</script>
diff --git a/components/home.vue b/components/home.vue
deleted file mode 100644
index 8dcb338..0000000
--- a/components/home.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <div class="container">
-    <a href="https://github.com/johann-su/autonomous-airplane">
-      <img src="/images/github.svg" alt="">
-      <p>View the code on Github</p>
-    </a>
-    <img src="/images/plane.svg" class="background">
-    <div class="center">
-      <h1>Autofly</h1>
-      <p>A plane to save lives and give new insights</p>
-    </div>
-    <div class="contributors">
-      <a href="https://github.com/HannHank">HannHank</a>
-      <a href="https://github.com/johann-su">johann-su</a>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component } from 'nuxt-property-decorator'
-
-@Component
-export default class Home extends Vue {
-
-}
-</script>
-
-
-<style lang="scss" scoped>
-.container {
-  height: calc(100vh - 100px);
-  display: flex;
-  flex-direction: column;
-
-  a {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    text-decoration: none;
-
-    p {
-      margin-left: 20px;
-    }
-  }
-
-  .background {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 70%;
-  }
-
-  .center {
-    z-index: 3;
-    align-self: center;
-    margin: auto 0;
-  }
-
-  .contributors {
-    display: flex;
-    flex-direction: row;
-  }
-}
-</style>
-
diff --git a/components/homepage/about.vue b/components/homepage/about.vue
new file mode 100644
index 0000000..0509c85
--- /dev/null
+++ b/components/homepage/about.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="about">
+    <h2>About</h2>
+    <p>We are a Team of Guys from Germany. <br>
+    We started this Project as a Part of our Graduate Exam. The aim is to create a easily usable Aircraft to help Farmers, Rangers and Rescue personal. Due to its Design the Drone can also carry cargo like medicine supplys to unreachable Areas.</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.about {
+  margin-top: 40px;
+}
+
+@media only screen and (min-width: 1200px) {
+  p {
+    width: 800px;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/components/design.vue b/components/homepage/design.vue
similarity index 73%
rename from components/design.vue
rename to components/homepage/design.vue
index a2504d0..29ac8e2 100644
--- a/components/design.vue
+++ b/components/homepage/design.vue
@@ -1,21 +1,38 @@
 <template>
-  <div class="container">
+  <div class="design">
     <h2>Design</h2>
-
     <p>We are creating a high range, autonomous drone with VTOL capabilitys. The Frame is based on a Skywalker X8 design, a flying wing plane.</p>
+
     <p>The aircraft is going to be made out of carbon fiber with 3D printed, easily swappable parts. The sensors are arranged in modules that can be replaced as needed. The Batterys are state of the art lithium ion cells that last for 1 hour of flight time and charge very fast.</p>
+
     <p>The aircraft sould have a high end GPS antenna and LTE connectivity.  With this and all the other sensors the Aircraft is able to operate over long distances while still having a constant connection to the controll station.</p>
+
     <p>The rotors are able to rotate vertical for flying or horizontally for vertical takeoff and landing. In case of an emergency the plane can recover from free fall using the hover mode while gliding mode allows the plane to fly long distances efficently.</p>
 
-    <img src="/images/plan.svg" alt="">
+    <img src="/images/plan.svg">
   </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component} from 'nuxt-property-decorator'
+<style lang="scss" scoped>
+.design {
+  margin-top: 40px;
+  text-align: center;
 
-@Component
-export default class Design extends Vue {
+  img {
+    width: 80%;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  p {
+    width: 800px;
+    margin: 0 auto;
+  }
+}
 
+@media only screen and (min-width: 1200px) {
+  img {
+    width: 1000px !important;
+  }
 }
-</script>
+</style>
diff --git a/components/features.vue b/components/homepage/features.vue
similarity index 60%
rename from components/features.vue
rename to components/homepage/features.vue
index a2f4da2..4111a14 100644
--- a/components/features.vue
+++ b/components/homepage/features.vue
@@ -1,56 +1,58 @@
 <template>
-  <div class="container">
+  <div class="features">
     <h2>Features</h2>
+
     <div class="feature">
       <h3>VTOL</h3>
       <p>Enables the Aircraft to access difficult places</p>
     </div>
+
     <div class="feature">
       <h3>Autonomous</h3>
       <p>For large scale operations without human supervision</p>
     </div>
+
     <div class="feature">
       <h3>Long Range</h3>
       <p>1 hour flight time for long missions</p>
     </div>
+
     <div class="feature">
-      <h3>Safe</h3>
+      <h3>Safety</h3>
       <p>Safety for all types of missions</p>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component } from 'nuxt-property-decorator'
-
-@Component
-export default class Features extends Vue {
-
-}
-</script>
-
-
 <style lang="scss" scoped>
-.container {
+.features {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-  gap: 25px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: .5fr 1fr 1fr;
+  margin-top: 40px;
 
   h2 {
     grid-column: 1 / span 2;
   }
+}
+
+@media only screen and (min-width: 1200px) {
+  .features {
+    width: 800px;
+    margin: 40px auto;
+  }
+}
+
+@media only screen and (max-width: 765px) {
+  .features {
+    grid-template-columns: 1fr 0fr;
 
-  .feature {
-    &:nth-of-type(odd) {
+    h2 {
       grid-column: 1;
     }
-    &:nth-of-type(even) {
-      grid-column: 2;
-    }
 
-    h3 {
-      margin-bottom: 10px;
+    .feature {
+      grid-column: 1;
     }
   }
 }
diff --git a/components/homepage/home.vue b/components/homepage/home.vue
new file mode 100644
index 0000000..9b3b103
--- /dev/null
+++ b/components/homepage/home.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="home">
+    <img src="/images/plane.svg" class="bg-plane">
+
+    <div class="heading">
+      <h1>Autonomous Plane Project</h1>
+      <h2>A plane to save lives and give new insights</h2>
+    </div>
+
+    <div class="contributors">
+      <a href="https://www.github.com/hannHank">HannHank</a>
+      <a href="https://www.github.com/johann-su">johann-su</a>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.home {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: calc(100vh - 200px);
+  margin-bottom: 100px;
+
+  .bg-plane {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80vw;
+    z-index: 1;
+  }
+
+  .heading {
+    margin: auto auto;
+    z-index: 2;
+  }
+
+  a {
+    margin: 10px;
+  }
+}
+
+@media only screen and (max-width: 765px) {
+  .contributors {
+    text-align: center;
+  }
+}
+</style>
+
+
diff --git a/components/homepage/mission.vue b/components/homepage/mission.vue
new file mode 100644
index 0000000..d421160
--- /dev/null
+++ b/components/homepage/mission.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="mission">
+    <h2>The Mission</h2>
+    <p>We want to build a autonomous plane that can execute missions autonomously.  Usecases include analyzing agicultural land, forest health or rescueing people.</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.mission {
+  padding: 30px;
+  background: #fff;
+  border-radius: 30px;
+  max-width: 800px;
+  margin: 0 auto;
+
+  h2, p {
+    color: #000;
+  }
+}
+</style>
diff --git a/components/safety.vue b/components/homepage/safety.vue
similarity index 53%
rename from components/safety.vue
rename to components/homepage/safety.vue
index ccec5eb..2b503c6 100644
--- a/components/safety.vue
+++ b/components/homepage/safety.vue
@@ -1,15 +1,31 @@
 <template>
-  <div class="container">
+  <div class="savety">
     <h2>Safety</h2>
     <p>We are designing the Aircraft with high security standards. All critical Parts are going to be redundant. If no safe landing is possible, the Plane is going to have a parachute, that deploys automaticaly, when the aircraft is decending beyond a critical vertical speed. The parachute can also be deployed from the control station if nessesary.</p>
+    <img src="/images/safety.svg">
   </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component } from 'nuxt-property-decorator'
+<style lang="scss" scoped>
+.savety {
+  text-align: center;
+  margin-top: 40px;
 
-@Component
-export default class Safety extends Vue {
+  img {
+    width: 40%;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  p {
+    width: 800px;
+    margin: 0 auto;
+  }
+}
 
+@media only screen and (min-width: 1200px) {
+  img {
+    width: 300px !important;
+  }
 }
-</script>
+</style>
diff --git a/components/homepage/sponsor.vue b/components/homepage/sponsor.vue
new file mode 100644
index 0000000..ac039d9
--- /dev/null
+++ b/components/homepage/sponsor.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="sponsor">
+    <h2>Sponsor Us</h2>
+    <p>We are very passionate about making the world a better place but we need your support. The project is entierly open source and maintained by a non-profit organisation. Nevertheless we need to pay for research and materials. <br>
+    If you like this project please consider donating or, if you have the technical knowledge, becomming a contributor. <br>
+    Thanks for your Intrest.</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sponsor {
+  margin-top: 40px;
+}
+
+@media only screen and (min-width: 1200px) {
+  p {
+    width: 800px;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/components/homepage/useCases.vue b/components/homepage/useCases.vue
new file mode 100644
index 0000000..a945a8f
--- /dev/null
+++ b/components/homepage/useCases.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="use-cases">
+    <h2>Use Cases</h2>
+
+    <imgElememt
+      msg='We are using machine learning to analyze forsest and fields'
+      title='Agriculture &amp; Forest analysis'
+      img="/images/agriculture.jpg"
+    />
+
+    <imgElememt
+      msg='Transporting Medical supplys or searching for drowning people'
+      title='Rescue &amp; Transport'
+      img="/images/rescue.jpg"
+      right
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'nuxt-property-decorator'
+import imgElememt from '@/components/imgElememt.vue'
+
+@Component({
+  components: {
+    imgElememt
+  }
+})
+export default class useCases extends Vue {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.use-cases {
+  display: grid;
+  gap: 20px;
+  margin-top: 40px;
+}
+</style>
diff --git a/components/imgElememt.vue b/components/imgElememt.vue
new file mode 100644
index 0000000..3f5125d
--- /dev/null
+++ b/components/imgElememt.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="useCase" :class="{right: right}">
+    <div class="card">
+      <h3>{{ title }}</h3>
+    </div>
+    <div class="img">
+      <img :src="img">
+      <p>{{ msg }}</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'nuxt-property-decorator'
+
+@Component
+export default class imgElememt extends Vue {
+  @Prop(String) readonly title: String | undefined
+  @Prop(String) readonly img: String | undefined
+  @Prop(String) readonly msg: String | undefined
+  @Prop(Boolean) readonly right: Boolean | undefined
+}
+</script>
+
+<style lang="scss" scoped>
+.useCase {
+  position: relative;
+
+  &.right {
+    text-align: right;
+  }
+
+  .img {
+    position: relative;
+    width: 50%;
+    display: inline-block;
+    z-index: 1;
+
+    img {
+      width: 100%;
+      border-radius: 30px;
+      max-height: 500px;
+      object-fit: cover;
+    }
+
+    p {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .card {
+    border-radius: 30px;
+    background: #fff;
+    padding: 15px 30px;
+    display: inline-block;
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+
+    h3 {
+      color: #000;
+      display: inline-block;
+    }
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .useCase {
+    width: 800px;
+    margin: 40px auto;
+  }
+}
+
+@media only screen and (max-width: 765px) {
+  .right, .useCase {
+    text-align: center !important;
+  }
+
+  .card {
+    position: static !important;
+    top: 0 !important;
+    left: 0 !important;
+    transform: none !important;
+    padding: 5px 10px !important;
+    display: inline-block;
+    width: 80%;
+    text-align: center;
+    margin: 10px auto;
+  }
+
+  .img {
+    width: 100% !important;
+  }
+}
+</style>
diff --git a/components/mission.vue b/components/mission.vue
deleted file mode 100644
index 72c7a63..0000000
--- a/components/mission.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="container">
-      <h2>The Mission</h2>
-      <p>We want to build a autonomous plane that can execute missions autonomously.  Usecases include analyzing agicultural land, forest health or rescueing people.</p>
-  </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component } from 'nuxt-property-decorator'
-
-@Component
-export default class Mission extends Vue {
-
-}
-</script>
-
-
-<style lang="scss" scoped>
-.container {
-  background: #fff;
-  border-radius: 30px;
-  padding: 30px;
-  max-width: 1200px;
-  display: inline-block;
-
-  h2, p {
-    color: #000;
-  }
-
-  h2 {
-    margin-bottom: 20px;
-  }
-}
-</style>
diff --git a/components/useCases.vue b/components/useCases.vue
deleted file mode 100644
index 3352057..0000000
--- a/components/useCases.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-  <div class="container">
-    <h2>Use Cases</h2>
-
-    <div class="useCase left">
-      <div class="img">
-        <img src="/images/agriculture.jpg" />
-        <p>We are using machine learning to analyze forsests and fields</p>
-      </div>
-      <div class="card">
-        <h3>Agriculture &amp; Forest analysis</h3>
-      </div>
-    </div>
-
-    <div class="useCase right">
-      <div class="img">
-        <img src="/images/rescue.jpg" />
-        <p>Transporting Medical supplys or searching for drowning people</p>
-      </div>
-      <div class="card">
-        <h3>Rescue &amp; Transport</h3>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component } from 'nuxt-property-decorator'
-
-@Component
-export default class useCases extends Vue {
-
-}
-</script>
-
-
-<style lang="scss" scoped>
-.container {
-  .useCase {
-    margin: 30px;
-    position: relative;
-
-    .img {
-      position: relative;
-
-      img {
-        max-width: 70%;
-        max-height: 70vh;
-        border-radius: 30px;
-      }
-
-      p {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        display: inline-block;
-      }
-    }
-
-    .card {
-      background: #fff;
-      border-radius: 30px;
-      padding: 30px;
-      display: inline-block;
-      position: absolute;
-      top: 50px;
-      left: 60%;
-
-      h3 {
-        color: #000;
-      }
-    }
-  }
-
-  .right {
-    p {
-      width: 300px;
-    }
-  }
-}
-</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 3f73f58..58f7460 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,9 +1,47 @@
 <template>
-  <div>
+  <div class="autofly-website">
+    <head class="head">
+      <nuxt-link to="/"><img src="/images/logo.svg" alt="Autofly logo" class="logo"></nuxt-link>
+      <a href="https://www.github.com/autofly-org" class="github">
+        <img src="/images/github.svg">
+        <span>Visit us on Github</span>
+      </a>
+    </head>
     <nuxt />
   </div>
 </template>
 
-<style>
+<style lang="scss">
+.autofly-website {
+  .head {
+    margin: 50px 50px 0 50px;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    justify-content: space-between;
 
+    .github {
+      display: inline-flex;
+      flex-direction: row;
+      justify-content: space-around;
+      align-items: center;
+      width: 250px;
+    }
+
+    .logo {
+      width: 200px;
+    }
+  }
+}
+
+@media only screen and (max-width: 765px) {
+  .head {
+    flex-direction: column !important;
+
+    .logo, .github {
+      width: 40vw !important;
+      margin: 20px 0;
+    }
+  }
+}
 </style>
diff --git a/layouts/error.vue b/layouts/error.vue
new file mode 100644
index 0000000..0ea07e6
--- /dev/null
+++ b/layouts/error.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <div class="center">
+      <h1>404</h1>
+      <nuxt-link to="/">Go Home</nuxt-link>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+
+    h1 {
+      font-size: 60px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/imprint.vue b/pages/imprint.vue
new file mode 100644
index 0000000..2133410
--- /dev/null
+++ b/pages/imprint.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="imprint">
+    <h1>imprint</h1>
+    <h2>Betreiber</h2>
+    <p>Autofly <br>
+    Marienberger Strasse 60 <br>
+    01279 Dresden <br>
+    E-Mail info@autofly.org <br>
+    Tel 17634407872</p>
+
+    <h2>Inhaltlich Verantwortlicher
+    gem. § 55 II RStV</h2>
+    <p>Johann Süß <br>
+    Marienberger Strasse 60 <br>
+    01279 Dresden <br>
+    suess@navabase.com <br>
+    Tel 17634407872</p>
+
+    <h2>Haftung für Inhalte</h2>
+    <p>Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.</p>
+
+    <h2>Datenschutz</h2>
+    <p>Die Nutzung unserer Webseite ist in der Regel ohne eine Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder E-Mail-Adresse) erhoben werden, erfolgt dies – soweit es möglich ist– immer auf freiwilliger Basis. Wir geben Ihre Daten ohne Ihre ausdrückliche Zustimmung nicht an Dritte weiter. Außerdem weisen wir Sie darauf hin, dass die Datenübertragung im Internet (wie beispielsweise bei der Kommunikation über E-Mail) Sicherheitslücken aufweisen kann. Denn ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich. Wir widersprechen hiermit ausdrücklich der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien. Die Betreiber dieser Seiten behalten sich ausdrücklich vor, im Fall der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, rechtliche Schritte einzuleiten.</p>
+
+    <h2>Google Analytics</h2>
+    <p>Diese Website benutzt Google Analytics, einen Webanalysedienst der Google Inc. (''Google''). Google Analytics verwendet sog. ''Cookies'', Textdateien, die auf Ihrem Computer gespeichert werden und die eine Analyse der Benutzung der Website durch Sie ermöglicht. Die durch den Cookie erzeugten Informationen über Ihre Benutzung diese Website (einschließlich Ihrer IP-Adresse) wird an einen Server von Google in den USA übertragen und dort gespeichert. Google wird diese Informationen benutzen, um Ihre Nutzung der Website auszuwerten, um Reports über die Websiteaktivitäten für die Websitebetreiber zusammenzustellen und um weitere mit der Websitenutzung und der Internetnutzung verbundene Dienstleistungen zu erbringen. Auch wird Google diese Informationen gegebenenfalls an Dritte übertragen, sofern dies gesetzlich vorgeschrieben oder soweit Dritte diese Daten im Auftrag von Google verarbeiten. Google wird in keinem Fall Ihre IP-Adresse mit anderen Daten der Google in Verbindung bringen. Sie können die Installation der Cookies durch eine entsprechende Einstellung Ihrer Browser Software verhindern; wir weisen Sie jedoch darauf hin, dass Sie in diesem Fall gegebenenfalls nicht sämtliche Funktionen dieser Website voll umfänglich nutzen können. Durch die Nutzung dieser Website erklären Sie sich mit der Bearbeitung der über Sie erhobenen Daten durch Google in der zuvor beschriebenen Art und Weise und zu dem zuvor benannten Zweck einverstanden. Sie können der Erhebung und Speicherung Ihrer Daten jederzeit widersprechen.</p>
+    <p>Diese Website benutzt Google Analytics mit der Zusatzfunktion „anonymizeIP()“. Dies bedeutet, dass IP-Adressen nicht vollständig, sondern nur gekürzt gespeichert und verarbeitet werden, um einen direkten Rückschluss auf die Person auszuschließen.</p>
+
+    <p>Gratis Impressum von agb.de</p>
+  </div>
+</template>
+
+<script lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+.imprint {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 30px;
+  width: 80vw;
+  padding-top: 50px;
+  margin: 0 auto;
+
+  h1 {
+    grid-column: 1 / span 2;
+    font-size: 55px;
+    text-align: left;
+  }
+
+  h2 {
+    grid-column: 1;
+    justify-self: right;
+    font-size: 18px;
+  }
+
+  p {
+    grid-column: 2;
+    justify-self: left;
+    text-align: left;
+  }
+}
+
+@media only screen and (max-width: 765px) {
+  .imprint {
+    grid-template-columns: 1fr 0fr;
+    gap: 0;
+    row-gap: 30px;
+
+    h1, h2 {
+      text-align: center !important;
+      grid-column: 1 !important;
+      justify-self: center !important;
+    }
+  
+    p {
+      grid-column: 1 !important;
+      text-align: center !important;
+      justify-self: center !important;
+    }
+  }
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index bd0457c..ceda5ac 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,9 +7,12 @@
       <useCases class="section" />
       <design class="section" />
       <safety class="section" />
+      <about class="section" />
+      <sponsor class="section" />
     </main>
     <footer>
-
+      <nuxt-link to="/imprint">Imprint</nuxt-link>
+      <p>© Autofly 2020</p>
     </footer>
   </div>
 </template>
@@ -18,12 +21,14 @@
 import { Vue, Component } from 'nuxt-property-decorator'
 import { Meta } from '@/decorators/meta'
 
-import home from '@/components/home.vue'
-import mission from '@/components/mission.vue'
-import features from '@/components/features.vue'
-import useCases from '@/components/useCases.vue'
-import design from '@/components/design.vue'
-import safety from '@/components/safety.vue'
+import home from '@/components/homepage/home.vue'
+import mission from '@/components/homepage/mission.vue'
+import features from '@/components/homepage/features.vue'
+import useCases from '@/components/homepage/useCases.vue'
+import design from '@/components/homepage/design.vue'
+import safety from '@/components/homepage/safety.vue'
+import about from '@/components/homepage/about.vue'
+import sponsor from '@/components/homepage/sponsor.vue'
 
 @Component({
   components: {
@@ -32,7 +37,9 @@ import safety from '@/components/safety.vue'
     features,
     useCases,
     design,
-    safety
+    safety,
+    about,
+    sponsor
   }
 })
 export default class Home extends Vue {
@@ -53,16 +60,24 @@ export default class Home extends Vue {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/colors';
+
 main {
   padding: 50px;
-  text-align: center;
+}
 
-  .section {
-    margin: 33px 0;
-  }
+footer {
+  // position: fixed;
+  bottom: 0;
+  left: 0;
+  padding: 10px 20px;
+  width: 100vw;
+  background: $footer;
+  text-align: center;
 
-  .home {
-    margin: 0 0 33px 0;
+  p {
+    margin: 10px 0 0 0;
   }
 }
+
 </style>
diff --git a/static/images/logo.svg b/static/images/logo.svg
new file mode 100644
index 0000000..a0a9f7e
--- /dev/null
+++ b/static/images/logo.svg
@@ -0,0 +1,4 @@
+<svg width="360" height="117" viewBox="0 0 360 117" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M189 54.0016C189 44.6893 197.643 36 207.035 36C216.427 36 225.001 44.6893 225 54.0016C224.999 66.7527 213.966 93 207.035 93C200.104 93 189 66.759 189 54.0016ZM206.94 45.3333C211.766 45.3333 215.683 49.2174 215.683 54.0016C215.683 58.7858 211.766 62.6699 206.94 62.6699C202.115 62.6699 198.198 58.7858 198.198 54.0016C198.198 49.2174 202.115 45.3333 206.94 45.3333Z" fill="#307FE2"/>
+<path d="M59.176 93H75.496L45.448 25.8H30.088L0.135986 93H16.072L22.024 78.6H53.224L59.176 93ZM27.016 66.792L37.672 41.064L48.328 66.792H27.016ZM117.531 41.352V66.888C117.531 76.392 112.539 80.808 105.627 80.808C99.0025 80.808 95.1625 76.968 95.1625 68.328V41.352H80.1865V70.536C80.1865 86.472 89.3065 93.768 102.267 93.768C108.603 93.768 114.363 91.368 118.299 86.856V93H132.507V41.352H117.531ZM175.661 79.944C174.029 81.192 171.821 81.864 169.613 81.864C165.581 81.864 163.181 79.464 163.181 75.048V54.024H176.045V42.504H163.181V29.928H148.205V42.504H140.237V54.024H148.205V75.24C148.205 87.528 155.309 93.768 167.501 93.768C172.109 93.768 176.621 92.712 179.693 90.504L175.661 79.944ZM265.707 32.808C268.011 32.808 270.123 33.48 271.755 34.632L275.691 23.784C272.907 21.864 268.491 21 264.267 21C251.403 21 244.299 28.584 244.299 40.2V42.504H236.331V54.024H244.299V93H259.275V54.024H272.139V42.504H258.891V40.296C258.891 35.208 261.291 32.808 265.707 32.808ZM279.627 21.768V93H294.603V21.768H279.627ZM345.432 41.352L330.84 76.392L316.344 41.352H300.888L323.256 93.384L323.064 93.864C321.048 98.472 318.744 100.296 314.616 100.296C311.64 100.296 308.472 99.048 306.168 97.032L300.696 107.688C304.056 110.664 309.816 112.392 315.096 112.392C324.408 112.392 331.512 108.648 336.504 96.168L359.832 41.352H345.432Z" fill="white"/>
+</svg>