diff --git a/website-v2/docusaurus.config.js b/website-v2/docusaurus.config.js
index bc01ade..b67e763 100644
--- a/website-v2/docusaurus.config.js
+++ b/website-v2/docusaurus.config.js
@@ -24,7 +24,7 @@
     "/css/all.min.css",
 
     "/css/bootstrap.min.css",
-    "/css/button.css",
+    "/css/buttons.css",
     "/css/responsive.css",
     "/css/team.css",
     "/css/custom-website.css",
diff --git a/website-v2/src/components/Teaser.tsx b/website-v2/src/components/Teaser.tsx
new file mode 100644
index 0000000..e244fde
--- /dev/null
+++ b/website-v2/src/components/Teaser.tsx
@@ -0,0 +1,70 @@
+import React, { FC } from 'react';
+import TeaserFeature from './TeaserFeature';
+
+const Teaser = (props) => (
+  <>
+    <section className="elements-area">
+      <div className={"top-claim-area"}>
+        {/*<h1 className="header-apache-text">Apache <span className="sp-green">S</span><span*/}
+        {/*  className="sp-blue">tream</span><span className="sp-green">P</span><span*/}
+        {/*  className="sp-blue">ipes</span>*/}
+        {/*</h1>*/}
+        <div className={"top-claim-area-subtitle"}>
+          <span className={"top-claim-area-subtitle-text"}>All-In-One</span>
+        </div>
+        <div className={"top-claim-area-main-title"}>
+          Industrial IoT Toolbox
+        </div>
+      </div>
+      <div className="apache-teaser">Apache StreamPipes is a self-service Industrial IoT toolbox to enable non-technical
+        users to
+        connect, analyze and explore IoT data streams.
+      </div>
+      <div className={"after-apache-teaser"}></div>
+      <div className={"teaser-actions text-center"}>
+        <a href="/download" className="sp-button sp-button-large sp-button-blue sp-button-margin"><i
+          className="fas fa-rocket"></i> Get started</a>
+        <a href="/docs/user-guide-introduction"
+           className="sp-button sp-button-large sp-button-gray sp-button-margin"><i
+          className="fas fa-book"></i> Documentation
+        </a>
+        <a href="https://www.github.com/apache/streampipes"
+           className="sp-button sp-button-large sp-button-gray sp-button-margin"><i
+          className="fab fa-github"></i> Github
+        </a>
+      </div>
+
+      <div className="container-header teaser-image">
+        <div className="row">
+          <div className="col-12 col-lg-4">
+            <TeaserFeature
+              icon={"fa-table-columns"}
+              title={"Easy to use"}
+              subtitle={"Intuitive web-based user interface"}>
+            </TeaserFeature>
+          </div>
+          <div className="col-12 col-lg-4">
+            <TeaserFeature
+              icon={"fa-bolt"}
+              title={"Powerful"}
+              subtitle={"Quickly implement your IIoT use cases"}>
+            </TeaserFeature>
+          </div>
+          <div className="col-12 col-lg-4">
+            <TeaserFeature
+              icon={"fa-code"}
+              title={"Extensible"}
+              subtitle={"Developer tools for Java, Python and TypeScript"}>
+            </TeaserFeature>
+          </div>
+          {/*<a href="https://www.apache.org/events/current-event.html">*/}
+          {/*  <img src="https://www.apache.org/events/current-event-125x125.png"*/}
+          {/*       className={"event-image"}/>*/}
+          {/*</a>*/}
+        </div>
+      </div>
+    </section>
+  </>
+)
+
+export default Teaser;
diff --git a/website-v2/src/components/TeaserFeature.tsx b/website-v2/src/components/TeaserFeature.tsx
new file mode 100644
index 0000000..e34a692
--- /dev/null
+++ b/website-v2/src/components/TeaserFeature.tsx
@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+
+const TeaserFeature = (props) => (
+  <>
+    <div className="feature-highlights d-flex justify-content-center flex-column">
+                            <span className="feature-highlights-icon">
+                                <i className={`fas ${props.icon}`}></i>
+                            </span>
+      <div className="feature-highlights-title">{props.title}</div>
+      <div
+        className="feature-highlights-subtitle">{props.subtitle}
+      </div>
+    </div>
+  </>
+)
+
+export default TeaserFeature;
+
diff --git a/website-v2/src/components/home/LovedByDevelopers.tsx b/website-v2/src/components/home/LovedByDevelopers.tsx
new file mode 100644
index 0000000..61611af
--- /dev/null
+++ b/website-v2/src/components/home/LovedByDevelopers.tsx
@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+
+const LovedByDevelopers = (props) => (
+  <>
+    <div className="page-banner-area">
+      <div className="container h-100">
+        <div className="row h-100 align-items-center">
+          <div className="col-12">
+            <div className="page-banner-content">
+              <h2>
+                {props.title}
+              </h2>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </>
+)
+
+export default LovedByDevelopers;
diff --git a/website-v2/src/components/home/LovedByUsers.tsx b/website-v2/src/components/home/LovedByUsers.tsx
new file mode 100644
index 0000000..b668139
--- /dev/null
+++ b/website-v2/src/components/home/LovedByUsers.tsx
@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+
+const LovedByUsers = (props) => (
+  <>
+    <div className="page-banner-area">
+      <div className="container h-100">
+        <div className="row h-100 align-items-center">
+          <div className="col-12">
+            <div className="page-banner-content">
+              <h2>
+                {props.title}
+              </h2>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </>
+)
+
+export default LovedByUsers;
diff --git a/website-v2/src/components/home/MadeForIIoT.tsx b/website-v2/src/components/home/MadeForIIoT.tsx
new file mode 100644
index 0000000..3ed1dba
--- /dev/null
+++ b/website-v2/src/components/home/MadeForIIoT.tsx
@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+
+const MadeForIIoT = (props) => (
+  <>
+    <div className="page-banner-area">
+      <div className="container h-100">
+        <div className="row h-100 align-items-center">
+          <div className="col-12">
+            <div className="page-banner-content">
+              <h2>
+                {props.title}
+              </h2>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </>
+)
+
+export default MadeForIIoT;
diff --git a/website-v2/src/pages/index.js b/website-v2/src/pages/index.js
index a225238..e93e1ad 100644
--- a/website-v2/src/pages/index.js
+++ b/website-v2/src/pages/index.js
@@ -1,7 +1,17 @@
 import Layout from "@theme/Layout";
-      import React from "react";
+import React from "react";
+import Teaser from "../components/Teaser";
+import LovedByDevelopers from "../components/home/LovedByDevelopers";
+import LovedByUsers from "../components/home/LovedByUsers";
+import MadeForIIoT from "../components/home/MadeForIIoT";
 
-      export default () => {
-        return <Layout />;
-      };
-      
\ No newline at end of file
+export default () => {
+  return (
+      <Layout>
+        <Teaser></Teaser>
+        <MadeForIIoT></MadeForIIoT>
+        <LovedByUsers></LovedByUsers>
+        <LovedByDevelopers></LovedByDevelopers>
+      </Layout>
+  )
+};
diff --git a/website-v2/static/css/buttons.css b/website-v2/static/css/buttons.css
index 38e7580..0f23912 100644
--- a/website-v2/static/css/buttons.css
+++ b/website-v2/static/css/buttons.css
@@ -20,7 +20,7 @@
     display: inline-block ;
     vertical-align: middle;
     border: 0;
-    border-radius: 3px;
+    border-radius: 25px;
     cursor: pointer;
     font-family: inherit;
     font-weight: bold;
@@ -65,4 +65,4 @@
 .sp-button.sp-button-blue {
     background: rgb(27, 20, 100);
     color: rgba(255, 255, 255, 0.75);
-}
\ No newline at end of file
+}
diff --git a/website-v2/static/css/custom-website.css b/website-v2/static/css/custom-website.css
index bb91a83..51bffff 100644
--- a/website-v2/static/css/custom-website.css
+++ b/website-v2/static/css/custom-website.css
@@ -276,13 +276,13 @@
 }
 
 .sp-button-margin {
-	margin-bottom:10px;
+	margin-left: 5px;
+	margin-right: 5px;
 }
 
 .container-header {
-    padding-left:80px;
-    padding-right:20px;
-    width:100%;
+	margin: 4rem;
+	border-radius: 15px;
 }
 
 .header-apache-text {
@@ -298,25 +298,32 @@
 }
 
 .feature-highlights {
-	margin-top: 16px;
-    margin-bottom: 16px;
 	font-size:18pt;
 	width:100%;
+	background: rgba(255, 255, 255, 0.85);
+	height: 250px;
+	border-radius: 10px;
+	text-align: center;
+	padding: 15px;
 }
 
 .feature-highlights-icon {
     margin-right:10px;
+	color: var(--color-accent);
+	font-size: 3rem;
 }
 
-.feature-highlights-text {
-    border-bottom: 1px solid rgb(204, 217, 223);
-    padding-bottom: 10px;
+.feature-highlights-title {
+    font-weight: 800;
+	color: var(--color-accent);
+	font-size: 2rem;
 }
 
-.feature-highlights-bg {
-	background: rgb(57,181,74);
-	color:white;
+.feature-highlights-subtitle {
+	color:var(--color-primary);
 	padding:3px;
+	font-weight: 500;
+	font-size: 1.25rem;
 }
 
 .sp-blue {
@@ -328,12 +335,10 @@
 }
 
 .apache-teaser {
-	position: relative;
-	padding-left: 1em;
-	border-left: 0.2em solid rgb(57,181,74);
+	text-align: center;
 	font-family: 'Roboto', serif;
 	font-size: 16pt;
-	font-weight: 100;
+	font-weight: 500;
 }
 
 .apache-teaser:before, .apache-teaser:after {
@@ -375,7 +380,100 @@
 	font-weight: 500;
 }
 
+.h-100 {
+	height: 100%;
+}
 
+.teaser-image {
+	background-image:url('/img/bg-img/bg-index-color.png');
+	//background:linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('/img/bg-img/bg-index-color.png');
+	background-size:cover;
+	border-radius: 10px;
+	max-width: 1100px;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 20px;
+}
+
+.teaser-text-area {
+	background:rgba(255, 255, 255, 0.95);
+	margin-top:50px;
+	margin-bottom:50px;
+	padding:35px;
+	border-radius:15px;
+	display:inline-block;
+	max-width:750px;
+}
+
+.ml-0 {
+	margin-left: 0;
+}
+
+.mb-20 {
+	margin-bottom: 20px;
+}
+
+.mt-10 {
+	margin-top: 10px;
+}
+
+.mr-0 {
+	margin-right: 0;
+}
+
+.event-image {
+	position:absolute;
+	bottom:50px;
+	float:right;
+	margin-left:20px;
+	margin-right:-10px;
+	margin-top:50px;
+}
+
+.top-claim-area {
+	margin-top: 3rem;
+	text-align: center;
+}
+
+.top-claim-area-subtitle {
+
+}
+
+.top-claim-area-subtitle-text {
+	text-transform: uppercase;
+	color: var(--color-accent);
+	font-weight: 800;
+	font-size: 2rem;
+	padding: 10px;
+}
+
+.top-claim-area-main-title {
+	font-weight: 800;
+	font-size: 6rem;
+	color: var(--color-primary);
+}
+
+.top-claim-area-main-title:after {
+	content: '';
+	width: 125px;
+	border-bottom: var(--color-accent) 8px solid;
+	display: block;
+	margin: 12px auto;
+	left: 50%;
+}
+
+.after-apache-teaser:before {
+	content: '';
+	width: 125px;
+	border-bottom: var(--color-accent) 8px solid;
+	display: block;
+	margin: 12px auto;
+	left: 50%;
+}
+
+.teaser-actions {
+	margin-top: 25px;
+}
 
 
 
diff --git a/website-v2/static/img/bg-img/bg-index-color.png b/website-v2/static/img/bg-img/bg-index-color.png
new file mode 100644
index 0000000..889e744
--- /dev/null
+++ b/website-v2/static/img/bg-img/bg-index-color.png
Binary files differ