diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
index cdf5b5a..38425f5 100644
--- a/src/assets/css/styles.css
+++ b/src/assets/css/styles.css
@@ -28,6 +28,7 @@ body {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
+    background-color: #f7f2ea;
 }
 
 article,
@@ -76,11 +77,9 @@ li {
 }
 
 img {
-    float: right;
     width: auto;
     height: auto;
-    max-width: 50%;
-    margin: 0 0 1em 1em;
+    max-width: 100%;
     border: 0 none;
 }
 
@@ -195,9 +194,7 @@ p.articleinfo {
 main {
     /* for page and article template */
     clear: both;
-    background-color: #f7f2ea;
     overflow: auto;
-    min-height: 100%;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
@@ -208,24 +205,31 @@ main {
     padding-top: 10px;
 }
 
-.frontpage>main {
+.frontpage {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
     background-color: #111833;
-}
-
-.frontpage p,
-.frontpage h2 {
     color: white;
-    /* margin-bottom: 0; */
 }
 
-.frontpage>main img {
-    float: left;
-    /* width: auto; */
+.frontpage>main {
+    /* width: 60em;
+    max-width: 100%;
+    margin: 0 auto; */
+}
+
+.hero-row {
+    display: flex;
+}
+
+.hero-row > * {
+    width: 33.33%;
+}
+
+.hero-3d-text {
     height: auto;
-    width: 33.333%;
-    /* margin-top: 15em; */
-    margin-left: 0;
-    margin-bottom: 0;
+    margin: 0;
 }
 
 article {
@@ -396,7 +400,6 @@ main>.content {
     main {
         /* global template */
         padding-top: 60px;
-        min-height: 100%;
     }
     .subpages .content {
         /* article template */
@@ -448,4 +451,18 @@ main>.content {
         padding-left: 4em;
         padding-right: 4em;
     }
-}
\ No newline at end of file
+}
+
+.theme-orange {
+    --headerColor: #FF6028;
+}
+.theme-magenta {
+    --headerColor: #FD1D56;
+}
+.theme-yellow {
+    --headerColor: #FDA828;
+}
+
+section h1, section h2, section h3 {
+    color: var(--headerColor);
+}
diff --git a/src/assets/images/front/blockman-front-red.png b/src/assets/images/front/blockman-front-red.png
index 8a2af94..d6ea616 100644
Binary files a/src/assets/images/front/blockman-front-red.png and b/src/assets/images/front/blockman-front-red.png differ
diff --git a/src/assets/images/front/dashbox-front-orange.png b/src/assets/images/front/dashbox-front-orange.png
index a90150f..3c003ca 100644
Binary files a/src/assets/images/front/dashbox-front-orange.png and b/src/assets/images/front/dashbox-front-orange.png differ
diff --git a/src/assets/images/front/data-contract-3d.png b/src/assets/images/front/data-contract-3d.png
index 09df5d9..9729d81 100644
Binary files a/src/assets/images/front/data-contract-3d.png and b/src/assets/images/front/data-contract-3d.png differ
diff --git a/src/assets/images/front/reactvue-front-yellow.png b/src/assets/images/front/reactvue-front-yellow.png
index c4391e6..8ff6f5a 100644
Binary files a/src/assets/images/front/reactvue-front-yellow.png and b/src/assets/images/front/reactvue-front-yellow.png differ
diff --git a/src/html/index.md b/src/html/index.md
index 2165245..e6b1adb 100644
--- a/src/html/index.md
+++ b/src/html/index.md
@@ -3,20 +3,6 @@ title:
 description: Frontpage 
 priority: 1.0
 ---
-<!-- TODO: data-contract-3d image should be placed above dashbox image (and scaled and fine positioned) -->
-[![dashbox]({{ root }}images/front/data-contract-3d.png)]({{ root }}docs/)
-
-## Tools, Examples and Inspiration for Data Contracts
-
-Dashdev-Suite Dapp Framework. Making developers life easier.
-
-<!-- [![dashbox]({{ root }}images/front/data_contract_3d.png)]({{ root }}docs/) -->
-
-
-[![dashbox]({{ root }}images/front/dashbox-front-orange.png)]({{ root }}docs/)
-[![dashbox]({{ root }}images/front/blockman-front-red.png)]({{ root }}docs/)
-[![dashbox]({{ root }}images/front/reactvue-front-yellow.png)]({{ root }}docs/)
-
 
 <!-- [Get started&hellip;]({{ root }}docs/) -->
 <!-- <span style="color:red"> [Get started&hellip;]({{ root }}docs/) </span> -->
\ No newline at end of file
diff --git a/src/layouts/frontpage.hbs b/src/layouts/frontpage.hbs
index 39c85a4..44f4eb6 100644
--- a/src/layouts/frontpage.hbs
+++ b/src/layouts/frontpage.hbs
@@ -1,32 +1,46 @@
 <!DOCTYPE html>
 <html>
-
 <head>
-
 	{{> meta }}
-
 </head>
-
 <body>
-
 	{{> header }}
-
 	<div class="frontpage">
-
-	<main>
-
-
-				{{#if title}}
-				<h1>{{ title }}</h1>
-				{{/if}}
-
-				{{{ contents }}}
-
-
-	</main>
-
+		<main>
+			<div class="hero">
+				<div class="hero-row">
+					<img class="hero-left-screen" src="{{root}}images/front/data-contract-3d.png" />
+					<div class="hero-title">
+						<h2>Tools, Examples and Inspiration for Data Contracts</h2>
+						<div class="hero-subtitle">Dashdev-Suite Dapp Framework. Making developers life easier.</div>
+					</div>
+					{{!-- <img src="" alt="" class="hero-right-screen"> --}}
+				</div>
+				<div class="hero-row">
+					<a href="{{ root }}docs/">
+						<img class="hero-3d-text" src="{{ root }}images/front/dashbox-front-orange.png" alt="dashbox">
+					</a>
+					<a href="{{ root }}docs/">
+						<img class="hero-3d-text" src="{{ root }}images/front/blockman-front-red.png" alt="blockman">
+					</a>
+					<a href="{{ root }}docs/">
+						<img class="hero-3d-text" src="{{ root }}images/front/reactvue-front-yellow.png" alt="reactvue">
+					</a>
+				</div>
+			</div>
+			{{!-- <section class="theme-orange">
+				<h2>Dashbox</h2>
+				<p>text about dashbox</p>
+			</section>
+			<section class="theme-magenta">
+				<h2>Blockman</h2>
+				<p>text about blockman</p>
+			</section>
+			<section class="theme-yellow">
+				<h2>Dashbox</h2>
+				<p>text about reactvue</p>
+			</section> --}}
+		</main>
 	</div>
-
 </body>
-
 </html>
\ No newline at end of file