diff --git a/src/colors.scss b/src/colors.scss
index 4e14261..d610414 100644
--- a/src/colors.scss
+++ b/src/colors.scss
@@ -2,3 +2,5 @@ $blue: #027CCB;
 $white: #F7F1FC;
 $lightgray: #D6D6D6;
 $darkgray: #95989A;
+$black: #333333;
+$lightbackground: #F7FAFC;
diff --git a/src/components/AposCard.vue b/src/components/AposCard.vue
new file mode 100644
index 0000000..8f5c7a6
--- /dev/null
+++ b/src/components/AposCard.vue
@@ -0,0 +1,33 @@
+<!--
+    @author JanGut
+    @date 2020-03-08
+-->
+<template>
+    <div class="apos-card">
+        <h3 class="apos-card-title">{{ this.CardTitle }}</h3>
+        <div class="apos-card-content">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "AposCard",
+
+        props: {
+            cardTitle: String
+        },
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "src/colors.scss";
+
+    .apos-card {
+        padding: 1em;
+        border-radius: 4px;
+        box-shadow: rgba(1, 78, 128, 0.1) 0px 2px 8px 0px, rgba(2, 124, 203, 0.1) 0px 15px 16px 0px;
+    }
+
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 0842105..d88c9d9 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -6,18 +6,28 @@
     <div class="home">
         <apos-input input-hint="Testinput"></apos-input>
         <apos-button @click="onLogout" :is-filled="true">Logout</apos-button>
+        <apos-card card-title="FOO">
+            <p>
+                Taciti. Netus sapien arcu facilisis ornare semper faucibus felis mi, taciti pharetra rhoncus. Viverra blandit nostra curae. Volutpat semper, odio aenean. Tincidunt proin malesuada felis faucibus metus mi purus ullamcorper nisi. Nibh, lacus scelerisque nec, urna nam lacinia nascetur morbi vehicula augue. Gravida urna adipiscing aptent ad vehicula posuere id hac amet. Egestas nulla ac vel penatibus. Odio neque placerat, metus non imperdiet, ornare enim curabitur varius. Conubia curae class dui urna lobortis dis. Quam auctor ve et. Ornare hac congue taciti. Nostra dolor magna. Eros fusce aptent. Nibh adipiscing elit etiam venenatis cum gravida class eni morbi hendrerit. Sit nibh feugiat at, senectus.
+            </p>
+            <p>
+                Suspendisse mus, cras. Odio. Ultrices pulvinar, augue diam per. Metus sodales libero pede et quam. Sodales at dui enim vel sociis imperdiet. Malesuada facilisi, sociis montes cum tempus sapien ipsum nostra at. Cubilia mus id turpis gravida. Congue eget, scelerisque mi. Placerat a, accumsan sit, iaculis velit erat semper. Phasellus ac ve nisl. Cursus senectus, cras, mauris. Natoque cras hymenaeos primis taciti, netus convallis eni, massa nullam. A amet morbi montes justo. Congue nisl et venenatis a, ultricies. Per adipiscing parturient id fermentum metus facilisis suspendisse nec nunc sociis id est nulla.
+            </p>
+        </apos-card>
     </div>
 </template>
 
 <script>
     import AposButton from "components/AposButton";
     import AposInput from "components/AposInput";
+    import AposCard from "components/AposCard";
     export default {
         name: 'Home',
 	    
 	    components: {
             AposButton,
-            AposInput
+            AposInput,
+            AposCard
 	    },
         
         data() {
@@ -39,7 +49,6 @@
 </script>
 
 <style scoped lang="scss">
-    .home {
-    
-    }
+    @import "src/colors";
+
 </style>