diff --git a/visgroup/content/projects.md b/visgroup/content/projects.md
index 0b3215e5fa03d1d044738e474d5ea420ce345caa..7a32dbd2217f6f63b0ac0ef0e63a4820a78ca6d1 100644
--- a/visgroup/content/projects.md
+++ b/visgroup/content/projects.md
@@ -1,68 +1,29 @@
---
-title: "Hydrosystems Projects"
+title: "Current and Past Projects"
description: "at the Visualization Center TESSIN VISLab"
date: 2023-06-07T23:52:18+02:00
---
-{{< single-page-intro text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget mi proin sed libero enim sed faucibus turpis. Arcu dictum varius duis at. Pellentesque dignissim enim sit amet venenatis urna. Adipiscing tristique risus nec feugiat in fermentum." >}}
-
-<!--------------------------------------------------------------------
-----------------------------------------------------------------------
- START OF PROJECT MOSES
-----------------------------------------------------------------------
----------------------------------------------------------------------->
-
-{{< project-start
- project-image="/pr_moses.jpg"
- project-title="MOSES-Müglitz: Monitoring and Modelling Campaign"
+{{< project-category
+ category-image="/project_categories/cat_hydro.jpg"
+ category-title="Hydrosystems"
+ link="{{< ref \"/content/projects_hydro.md\" >}}"
>}}
-{{< project-description >}}
-
-The hydrological study in the Müglitz catchment is part of the MOSES initiative ([Modular Observation Solutions for Earth Systems](https://www.ufz.de/moses), coordinated by UFZ) investigating the impact extreme meteorological events on local hydrological processes. The presented visualization study is also a result of a close collaboration of the ESM and Digital Earth initiatives combining the expertise in monitoring and modelling environmental processes in a Virtual Reality framework.
-
-{{< /project-description >}}
-
-
-{{< project-subheadline title="Links" >}}
-[MOSES](https://www.ufz.de/moses), [ESM](https://www.esm-project.net/), [Digital Earth](https://www.digitalearth-hgf.de/)
-
-{{< project-subheadline title="Videos" >}}
-[Müglitz Catchment Demo](https://www.youtube.com/watch?v=plPEtkkR0pQ), [Presentation @ EuroVis 21](https://www.youtube.com/watch?v=iIRBpXOWuPg&t=2716s)
-
-{{< project-subheadline title="Publications" >}}
-K Rink, Ö O Şen, et al.: A Virtual Geographic Environment for the Exploration of Hydro-Meteorological Extremes.
-
-K Rink, Ö O Şen, et al. (2022): An Environmental Exploration System for Visual Scenario Analysis of Regional Hydro-Meteorological Systems Comput Graph 103, pages 192-200. [Full text](https://www.sciencedirect.com/science/article/abs/pii/S0097849322000309)
-
-{{< project-end >}}
-
-
-
-<!--------------------------------------------------------------------
-----------------------------------------------------------------------
- START OF PROJECT POYANG
-----------------------------------------------------------------------
----------------------------------------------------------------------->
-
-
-{{< project-start
- project-image="/pr_poyang.jpg"
- project-title="Monitoring and Modelling in Large River-Lake Systems"
+{{< project-category
+ category-image="/project_categories/cat_urban.jpg"
+ category-title="Urban Systems"
+ link="{{< ref \"/content/projects_hydro.md\" >}}"
>}}
-{{< project-description >}}
-
-Virtual geographic environments for catchments of rivers or lakes, combining a wide range of 2D and 3D observation data sets with simulation resultsa for holistic analysis of water and solute dynamics.
-
-{{< /project-description >}}
-
-{{< project-subheadline title="Videos" >}}
-[Poyang Lake Basin Demo](https://www.youtube.com/watch?v=7r282lIGsHk)
-
-{{< project-subheadline title="Publications" >}}
-K Rink, E Nixdorf, et al.: A Virtual Geographic Environment for Multi-Compartment Water and Solute Dynamics in Large Catchments. [Full text](http://dx.doi.org/10.1016/j.jhydrol.2019.124507)
-
-C Yan, K Rink et al.: Virtual geographical environment-based environmental information system for Poyang Lake Basin. [Full text](http://dx.doi.org/10.1007/978-3-319-97725-6_18)
+{{< project-category
+ category-image="/project_categories/cat_geotechnics.jpg"
+ category-title="Energy & Geotechnics"
+ link="{{< ref \"/content/projects_hydro.md\" >}}"
+ >}}
-{{< project-end >}}
+{{< project-category
+ category-image="/project_categories/cat_climate.jpg"
+ category-title="Climate & Eco Systems"
+ link="{{< ref \"/content/projects_hydro.md\" >}}"
+ >}}
diff --git a/visgroup/content/projects_hydro.md b/visgroup/content/projects_hydro.md
new file mode 100644
index 0000000000000000000000000000000000000000..a501322864b48f3ec8cad19587266ead189657bd
--- /dev/null
+++ b/visgroup/content/projects_hydro.md
@@ -0,0 +1,68 @@
+---
+title: "Hydrosystem Projects"
+description: "at the Visualization Center TESSIN VISLab"
+date: 2023-06-07T23:52:18+02:00
+---
+
+{{< single-page-intro text="This is a selection of our visualisation studies for hydrosystems:" >}}
+
+<!--------------------------------------------------------------------
+----------------------------------------------------------------------
+ START OF PROJECT MOSES
+----------------------------------------------------------------------
+---------------------------------------------------------------------->
+
+{{< project-start
+ project-image="/pr_moses.jpg"
+ project-title="MOSES-Müglitz: Monitoring and Modelling Campaign"
+ >}}
+
+{{< project-description >}}
+
+The hydrological study in the Müglitz catchment is part of the MOSES initiative ([Modular Observation Solutions for Earth Systems](https://www.ufz.de/moses), coordinated by UFZ) investigating the impact extreme meteorological events on local hydrological processes. The presented visualization study is also a result of a close collaboration of the ESM and Digital Earth initiatives combining the expertise in monitoring and modelling environmental processes in a Virtual Reality framework.
+
+{{< /project-description >}}
+
+
+{{< project-subheadline title="Links" >}}
+[MOSES](https://www.ufz.de/moses), [ESM](https://www.esm-project.net/), [Digital Earth](https://www.digitalearth-hgf.de/)
+
+{{< project-subheadline title="Videos" >}}
+[Müglitz Catchment Demo](https://www.youtube.com/watch?v=plPEtkkR0pQ), [Presentation @ EuroVis 21](https://www.youtube.com/watch?v=iIRBpXOWuPg&t=2716s)
+
+{{< project-subheadline title="Publications" >}}
+K Rink, Ö O Şen, et al.: A Virtual Geographic Environment for the Exploration of Hydro-Meteorological Extremes.
+
+K Rink, Ö O Şen, et al. (2022): An Environmental Exploration System for Visual Scenario Analysis of Regional Hydro-Meteorological Systems Comput Graph 103, pages 192-200. [Full text](https://www.sciencedirect.com/science/article/abs/pii/S0097849322000309)
+
+{{< project-end >}}
+
+
+
+<!--------------------------------------------------------------------
+----------------------------------------------------------------------
+ START OF PROJECT POYANG
+----------------------------------------------------------------------
+---------------------------------------------------------------------->
+
+
+{{< project-start
+ project-image="/pr_poyang.jpg"
+ project-title="Monitoring and Modelling in Large River-Lake Systems"
+ >}}
+
+{{< project-description >}}
+
+Virtual geographic environments for catchments of rivers or lakes, combining a wide range of 2D and 3D observation data sets with simulation resultsa for holistic analysis of water and solute dynamics.
+
+{{< /project-description >}}
+
+{{< project-subheadline title="Videos" >}}
+[Poyang Lake Basin Demo](https://www.youtube.com/watch?v=7r282lIGsHk)
+
+{{< project-subheadline title="Publications" >}}
+K Rink, E Nixdorf, et al.: A Virtual Geographic Environment for Multi-Compartment Water and Solute Dynamics in Large Catchments. [Full text](http://dx.doi.org/10.1016/j.jhydrol.2019.124507)
+
+C Yan, K Rink et al.: Virtual geographical environment-based environmental information system for Poyang Lake Basin. [Full text](http://dx.doi.org/10.1007/978-3-319-97725-6_18)
+
+{{< project-end >}}
diff --git a/visgroup/static/project_categories/cat_climate.jpg b/visgroup/static/project_categories/cat_climate.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..876312303aa4b1b9c3828c69788b21cc70866c9b
Binary files /dev/null and b/visgroup/static/project_categories/cat_climate.jpg differ
diff --git a/visgroup/static/project_categories/cat_geotechnics.jpg b/visgroup/static/project_categories/cat_geotechnics.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..718a6fd2f7910271dd69634a5b3ab71fa7d84b06
Binary files /dev/null and b/visgroup/static/project_categories/cat_geotechnics.jpg differ
diff --git a/visgroup/static/project_categories/cat_hydro.jpg b/visgroup/static/project_categories/cat_hydro.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ea27f4ef4f9b0068de5983508c6e39019ff7cab7
Binary files /dev/null and b/visgroup/static/project_categories/cat_hydro.jpg differ
diff --git a/visgroup/static/project_categories/cat_urban.jpg b/visgroup/static/project_categories/cat_urban.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..598c00b8ae8f7ca50e1060deb02431f2c87c0cb0
Binary files /dev/null and b/visgroup/static/project_categories/cat_urban.jpg differ
diff --git a/visgroup/themes/ananke-adapted/layouts/shortcodes/project-category.html b/visgroup/themes/ananke-adapted/layouts/shortcodes/project-category.html
new file mode 100644
index 0000000000000000000000000000000000000000..f1d5974121d22383fc6d945b218e8cfdcab7f237
--- /dev/null
+++ b/visgroup/themes/ananke-adapted/layouts/shortcodes/project-category.html
@@ -0,0 +1,35 @@
+
+<style>
+.projectCat:hover {
+ background-image: none !important;
+ background-color: hsla(206, 100%, 31%, 1); !important;
+ }
+</style>
+
+
+<a href="{{ .Get "link" | .Page.RenderString }}">
+
+<div class="projectCat" style="
+ height: 10rem;
+ width: 20rem;
+ border-radius: 1rem;
+ margin-top: 40px;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding: 30px;
+ float: left;
+ cursor: pointer;
+ background-image: url({{ .Get "category-image" }} );
+ ">
+
+ <center>
+
+ <h2 style="color: #FFF;
+ text-shadow: 2px 0 #444, -2px 0 #444, 0 2px #444, 0 -2px #444,
+ 1px 1px #444, -1px -1px #444, 1px -1px #444, -1px 1px #444;
+
+ "> {{ .Get "category-title"}} </h2>
+
+ </center>
+
+</div>
\ No newline at end of file