diff --git a/web/content/_index.pandoc b/web/content/_index.pandoc
index 25c3f0917c2d4bccc0ea89bc839b64a7c84d3330..3f38778f66cc97cc3b1311373f608e916ab9cc11 100644
--- a/web/content/_index.pandoc
+++ b/web/content/_index.pandoc
@@ -8,8 +8,45 @@ date: 2017-01-13T14:24:23+01:00
 hero:
   headline: Open-source multi-physics
   textline: OpenGeoSys (OGS) is a scientific [open source project](https://github.com/ufz/ogs) for the development of numerical methods for the simulation of thermo-hydro-mechanical-chemical (THMC) processes in porous and fractured media. It has been successfully applied in the fields of contaminant hydrology, water resources and waste management, geotechnical applications, geothermal energy systems and energy storage.
+  quicklinks:
+    - name: HPC
+      anchor: hpc
+    - name: Vis
+      anchor: vis
+    - name: Tools
+      anchor: tools
 
 features:
+- headline: Visualize results
+  textline: |
+    By leveraging VTK data formats visualizing simulation result data sets becomes an easy task. The de-facto standard software for scientific visualtions [ParaView](https://www.paraview.org) can be used to explore and analyze complex data in a visual way.
+
+    [Virtual reality enabled visualization](https://www.ufz.de/vislab) brings your data onto the large screen for intuitive exploration and assessment.
+  layout: left
+  carousel:
+    slides:
+      - permalink: /features/vis/layeredview2.png
+        caption: Bar
+      - permalink: /features/vis/vislab.png
+        caption: Interactive exploration of river flow phenomenae at the TESSIN VISLab of the Helmholtz Centre for Environmental Research – UFZ
+      - permalink: /features/vis/contours2-bw.png
+    play: true
+  anchor: vis
+- headline: Data integration
+  textline: |
+    Integrate and visualize data sets for OpenGeoSys by using the OpenGeoSys Data Explorer. It provides functionality to visually assess the data and see possible artefacts, inconsistencies between data sets or missing information.
+  layout: right
+  carousel:
+    slides:
+      - permalink: /features/vis/chaohu_paper_mesh.png
+        caption: Foo
+      - permalink: /features/vis/ogsgui.png
+        caption: Bar
+      - permalink: /features/vis/DEMSelke3D.png
+    play: false
+  links:
+    - text: "Learn More: Data Explorer"
+      url: "/features/data-explorer"
 - headline: High performance computing
   textline: |
     High performance computing (HPC) has became a necessity in the modelling of environmental and geotechnical problems for better characterization of the complexity of geo-systems as well as predicting their evolution in time. Parallel computing is the most efficient method in the high performance computing. In OGS, the parallalization of the finite element (FE) computation is based on the domain decomposition method (DDC).
@@ -24,7 +61,7 @@ features:
   links:
     - text: Learn more
       url: "/features/hpc"
-  layout: left
+  anchor: hpc
 
 - headline: Comprehensive Pre-Processing Tools
   textline: |
@@ -42,6 +79,7 @@ features:
     - text: See Docs
       url: "/docs/tools"
   layout: left
+  anchor: tools
 - headline: Transparent development workflows
   textline: |
     Write front-end code with Jekyll or Hugo and push to your Git repo. Forestry will pull in your commits and update the CMS.
@@ -63,6 +101,7 @@ features:
     permalink: "/features/OGS-Software-Engineering-Small.png"
     alt: Dev workflow
   layout: right
+#   class: inverse
   
 - headline: Get started
   textline: |
diff --git a/web/content/features/vis/DEMSelke3D.png b/web/content/features/vis/DEMSelke3D.png
new file mode 100755
index 0000000000000000000000000000000000000000..9c9a3870dcccdbec014ad5beff6bbd84e667e458
--- /dev/null
+++ b/web/content/features/vis/DEMSelke3D.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a0f9817ff4fe6494fb1e349da24438fd642ebd69dfce9858c8bf32f49f0d5636
+size 400501
diff --git a/web/content/features/vis/chaohu_paper_mesh.png b/web/content/features/vis/chaohu_paper_mesh.png
new file mode 100755
index 0000000000000000000000000000000000000000..3a6d92479199db65a99109b4224aae0180bf3c61
--- /dev/null
+++ b/web/content/features/vis/chaohu_paper_mesh.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:efbb5bf796b9ef80e1213558277f3729120369883d78ef5ddff816a9a8de2f12
+size 943497
diff --git a/web/content/features/vis/contours2-bw.png b/web/content/features/vis/contours2-bw.png
new file mode 100755
index 0000000000000000000000000000000000000000..c7b62cedd6301fc7bfaee18e09f5a239756f4d4a
--- /dev/null
+++ b/web/content/features/vis/contours2-bw.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a1b57d223efa0d632dbe988d94f8947f467aed2c584a4e463b51ad519c6db0d2
+size 261499
diff --git a/web/content/features/vis/layeredview2.png b/web/content/features/vis/layeredview2.png
new file mode 100755
index 0000000000000000000000000000000000000000..089a579fe336abc6fb783492f27786e6416002a3
--- /dev/null
+++ b/web/content/features/vis/layeredview2.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9ae5fbfa9a19a570982d7217c922a54325857f7654bc84d6e57d5b6525a58938
+size 1694809
diff --git a/web/content/features/vis/ogsgui.png b/web/content/features/vis/ogsgui.png
new file mode 100755
index 0000000000000000000000000000000000000000..4a5979ff7aa0c2a4521f8d10bdc67bbdd51f5de5
--- /dev/null
+++ b/web/content/features/vis/ogsgui.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b526e044d49e1aa533e01076a09a16f27f760cf36271913065e2ffe4b3fd6f28
+size 212838
diff --git a/web/content/features/vis/vislab.png b/web/content/features/vis/vislab.png
new file mode 100755
index 0000000000000000000000000000000000000000..9e03c56edf41a99c6a04134f4191030ac3b82f25
--- /dev/null
+++ b/web/content/features/vis/vislab.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:65f2ab037bfcfce4162e6af7993aeef0e80704a63802e16d53bdf92cf6469f09
+size 3085381
diff --git a/web/layouts/partials/components/carousel.html b/web/layouts/partials/components/carousel.html
new file mode 100644
index 0000000000000000000000000000000000000000..1597769da9df612e4e8d1d62acf8f31466fe6359
--- /dev/null
+++ b/web/layouts/partials/components/carousel.html
@@ -0,0 +1,12 @@
+{{ .page.Scratch.Add "numGalleries" 1}}
+{{ $i := .page.Scratch.Get "numGalleries" }}
+{{ $length := len .carousel }}
+<div class="px-2 mx-4 carousel{{ if .carousel.play }} carousel-play{{ end }}">
+{{ range .carousel.slides }}
+  <div>
+    <a href="{{ .permalink }}" data-fancybox="gallery-{{ $i }}" data-caption="{{ .caption | default ""}}">
+      <img class="rounded" src="{{ .permalink }}" alt="{{ .caption | default ""}}" />
+    </a>
+  </div>
+{{ end }}
+</div>
diff --git a/web/layouts/partials/components/feature.html b/web/layouts/partials/components/feature.html
index 9cbd3bd299c904176796819e879c689a99fbd22a..b2709a981c966625257eba89b368b6573103b75a 100644
--- a/web/layouts/partials/components/feature.html
+++ b/web/layouts/partials/components/feature.html
@@ -4,7 +4,7 @@
     {{ if or ( not .feature.layout ) ( or (eq .feature.layout "left") (eq .feature.layout "right") ) }}
     <div class="flex flex-wrap items-center -mx-4{{ if eq .feature.layout "right" }} flex-row-reverse{{ end }}">
       <div class="w-full md:w-1/2 md:px-4">
-        <h2 class="uppercase">{{ markdownify .feature.headline }}</h2>
+        <h2 class="uppercase">{{ if .feature.anchor }}<a id="{{ .feature.anchor }}"></a>{{ end}}{{ markdownify .feature.headline }}</h2>
         <div>
           {{ markdownify .feature.textline }}
         </div>
@@ -15,7 +15,14 @@
         </div>
       </div>
       <div class="w-full md:w-1/2 md:px-4">
-        <img class="{{ if .feature.visual.rounded }}rounded shadow-lg{{ end }}" src="{{ .feature.visual.permalink }}">
+        {{ if .feature.visual }}
+          <a data-fancybox data-caption="{{ .feature.visual.alt | default ""}}" href="{{ .feature.visual.permalink }}">
+            <img class="{{ if .feature.visual.rounded }}rounded shadow-lg{{ end }}" src="{{ .feature.visual.permalink }}" alt="{{ .feature.visual.alt }}">
+          </a>
+        {{ end }}
+        {{ if .feature.carousel }}
+          {{ partial "components/carousel" (dict "carousel" .feature.carousel "page" .page) }}
+        {{ end }}
       </div>
       {{ partial "components/subfeatures" .feature.subfeatures }}
     </div>
@@ -35,6 +42,9 @@
         <img src="{{ .feature.visual.permalink }}">
       </div>
     </div>
+    {{ if .feature.carousel }}
+      {{ partial "components/carousel" (dict "carousel" .feature.carousel "page" .page) }}
+    {{ end }}
     {{ end }}
     {{ if .feature.gallery }}
       {{ partial "components/gallery" (dict "gallery" .feature.gallery "page" .page) }}
diff --git a/web/layouts/partials/components/gallery.html b/web/layouts/partials/components/gallery.html
index d3afffeddef2813b7f975ea06e33e1878497a9bd..6e7124f90a718d1e37cfea2299c45c60695871dd 100644
--- a/web/layouts/partials/components/gallery.html
+++ b/web/layouts/partials/components/gallery.html
@@ -1,11 +1,11 @@
 {{ .page.Scratch.Add "numGalleries" 1}}
 {{ $i := .page.Scratch.Get "numGalleries" }}
-<div class="flex flex-wrap -mx-4">
+<div class="flex flex-wrap -mx-4 text-center">
   {{ $length := len .gallery }}
   {{ range .gallery }}
   <div class="w-1/{{ $length }} px-4">
     <a href="{{ .permalink }}" data-fancybox="gallery-{{ $i }}" data-caption="{{ .caption | default ""}}">
-      <img class="rounded shadow-lg" src="{{ .permalink }}.thumbnail" alt="{{ .caption | default ""}}" />
+      <img class="rounded shadow-lg" src="{{ .permalink }}.thumbnail_box_3" alt="{{ .caption | default ""}}" />
     </a>
   </div>
   {{ end }}
diff --git a/web/layouts/partials/components/hero.html b/web/layouts/partials/components/hero.html
index 4fe5a85cba17bd5da58e9b949287b788e783ea3d..04e4c2d744042b7128aaae2a69c581d24db6c11f 100644
--- a/web/layouts/partials/components/hero.html
+++ b/web/layouts/partials/components/hero.html
@@ -2,6 +2,16 @@
   <div class="container">
     <h1 class="uppercase">{{ markdownify .headline }}</h1>
     <div>{{ markdownify .textline }}</div>
+
+    <div class="text-center py-4 lg:px-4">
+      <div class="p-2 bg-indigo-darker items-center text-indigo-lightest leading-none lg:rounded-full flex lg:inline-flex" role="alert">
+        <span class="font-semibold mr-2 text-left flex-auto">Quicklinks</span>
+        {{ range .quicklinks}}
+          <span class="inverse flex rounded-full bg-indigo uppercase px-2 py-1 text-xs font-bold mr-3"><a href="#{{ .anchor }}">{{ .name }}</a></span>
+        {{ end }}
+      </div>
+    </div>
+
   </div>
 </div>
 
diff --git a/web/package.json b/web/package.json
index f47290ab16d21f3da4f39c4004eb57f57beb0926..49dd6f5db1c21b643661991295bb45d8bb05a2f2 100644
--- a/web/package.json
+++ b/web/package.json
@@ -14,12 +14,14 @@
         "cross-env": "^5.1",
         "css-loader": "^0.28.7",
         "extract-text-webpack-plugin": "^4.0.0-beta.0",
+        "file-loader": "^1.1.11",
         "hugo-algolia": "^1.2.13",
         "jquery": "^3.3.1",
         "postcss": "^6.0.14",
         "postcss-loader": "^2.0.8",
         "sharp": "^0.20.2",
         "sharp-loader": "^1.1.0",
+        "slick-carousel": "^1.8.1",
         "style-loader": "^0.21.0",
         "tailwindcss": "^0.5.3",
         "webpack": "^4.8.3",
diff --git a/web/src/js/fancybox.js b/web/src/js/fancybox.js
index dd671d923f51f50904176b070f27788797b074bc..30b5e2802158956bebad15a9feab87446faf79e4 100644
--- a/web/src/js/fancybox.js
+++ b/web/src/js/fancybox.js
@@ -1,4 +1,18 @@
 var $ = require("jquery");
-// var slick = require("slick-carousel");
+var slick = require("slick-carousel");
+require('style-loader!slick-carousel/slick/slick.css');
+// Do not require here, import and override in styles.css
+// require('style-loader!slick-carousel/slick/slick-theme.css');
 require("@fancyapps/fancybox");
 require('style-loader!@fancyapps/fancybox/dist/jquery.fancybox.min.css');
+
+$(document).ready(function(){
+  $('.carousel').slick({
+    dots: true,
+    infinite: true,
+    fade: true,
+    cssEase: 'linear',
+    autoplaySpeed: 3000,
+  });
+  $('.carousel-play').slick('slickPlay');
+});
diff --git a/web/src/styles.css b/web/src/styles.css
index cf0cd49491bf18b04e9b19a53b1770010ed2e4a6..3408bc0f04d341b79b7784bbfcf3269190ccf377 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -189,6 +189,32 @@ a.btn-inverse:hover {
   @apply .mb-2;
 }
 
+/* ----------------------------- Slick Carousel ----------------------------- */
+/* Import here to override values */
+@import '../node_modules/slick-carousel/slick/slick-theme.css';
+.slick-prev:before,
+.slick-next:before {
+  font-size: 24px;
+  color: config('mycolors.text-primary');
+}
+
+.slick-dots li button:before,
+.slick-dots li.slick-active button:before {
+  font-size: 8px;
+  color: config('mycolors.text-primary');
+}
+
+.inverse .slick-prev:before,
+.inverse .slick-next:before {
+  color: config('mycolors.text-inverse');
+}
+
+/* Vertically center images */
+.slick-initialized .slick-track {
+  display: flex;
+  align-items: center;
+}
+
 /* -------------------------------- Algolia---------------------------------- */
 .algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint {
   /*width: 100%;*/
@@ -216,4 +242,4 @@ a.btn-inverse:hover {
 
 @tailwind utilities;
 
-@import 'css/pandoc-highlighting.css'
+@import 'css/pandoc-highlighting.css';
diff --git a/web/webpack.config.js b/web/webpack.config.js
index 375cc49c6168ed7888fe7e90048d1b73173b474b..85f9361df96f4f449e75b53314fdbc7bdbb91d3d 100644
--- a/web/webpack.config.js
+++ b/web/webpack.config.js
@@ -1,6 +1,8 @@
 var webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const path = require('path')
+const path = require('path');
+
+const sharp = require('sharp');
 
 module.exports = {
   mode: 'development',
@@ -22,7 +24,7 @@ module.exports = {
         })
       },
       {
-        test: /\.(gif|jpe?g|png|svg|tiff)(\?.*)?$/,
+        test: /\.(gif|jpe?g|png|tiff)(\?.*)?$/,
         use: [
           {
             loader: 'sharp-loader',
@@ -40,6 +42,15 @@ module.exports = {
             },
           }
         ]
+      },
+      {
+        test: /\.(eot|svg|ttf|woff|woff2)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {}
+          }
+        ]
       }
     ]
   },
diff --git a/web/yarn.lock b/web/yarn.lock
index 47ceb15b0b33b5dd95edb7f9d83df2cebdee491a..be999e64ba1545f2aae0eb4e8cc7b95ea2a770ae 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -2086,6 +2086,13 @@ figures@^2.0.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
+file-loader@^1.1.11:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.11.tgz#6fe886449b0f2a936e43cabaac0cdbfb369506f8"
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.4.5"
+
 filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
@@ -4826,6 +4833,10 @@ slice-ansi@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
 
+slick-carousel@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
+
 slide@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"