diff --git a/src/assets/cubes-vert.jpg b/src/assets/cubes-vert.jpg
new file mode 100644
index 0000000..9d7ebed
Binary files /dev/null and b/src/assets/cubes-vert.jpg differ
diff --git a/src/components/hero.jsx b/src/components/hero.jsx
index 0cbee3b..4b9be8e 100644
--- a/src/components/hero.jsx
+++ b/src/components/hero.jsx
@@ -12,9 +12,16 @@ export const Hero = ({children}) => {
         {children}
       </div>
       <div className={`${baseClass}__image`}>
+        <StaticImage
+          src='../assets/cubes-vert.jpg'
+          className={`${baseClass}__image-wrapper-vertical`}
+          objectPosition='center top'
+          loading='eager'
+          alt='A picture of multiple concrete cubes aligned in a grid'
+        />
         <StaticImage
           src='../assets/cubes.jpg'
-          className={`${baseClass}__image-wrapper`}
+          className={`${baseClass}__image-wrapper-landscape`}
           objectPosition='center top'
           loading='eager'
           alt='A picture of multiple concrete cubes aligned in a grid'
diff --git a/src/content/community/index.md b/src/content/community/index.mdx
similarity index 100%
rename from src/content/community/index.md
rename to src/content/community/index.mdx
diff --git a/src/content/contributing/index.md b/src/content/contributing/index.mdx
similarity index 100%
rename from src/content/contributing/index.md
rename to src/content/contributing/index.mdx
diff --git a/src/content/demos/index.md b/src/content/demos/index.mdx
similarity index 100%
rename from src/content/demos/index.md
rename to src/content/demos/index.mdx
diff --git a/src/content/docs/index.md b/src/content/docs/index.mdx
similarity index 100%
rename from src/content/docs/index.md
rename to src/content/docs/index.mdx
diff --git a/src/content/docs/migration-guide.md b/src/content/docs/migration-guide.mdx
similarity index 100%
rename from src/content/docs/migration-guide.md
rename to src/content/docs/migration-guide.mdx
diff --git a/src/content/index.es.md b/src/content/index.es.mdx
similarity index 100%
rename from src/content/index.es.md
rename to src/content/index.es.mdx
diff --git a/src/content/index.md b/src/content/index.mdx
similarity index 89%
rename from src/content/index.md
rename to src/content/index.mdx
index af5a113..c0b237a 100644
--- a/src/content/index.md
+++ b/src/content/index.mdx
@@ -9,11 +9,11 @@ import {GettingStartedTab, GradleIcon, Hero, KubernetesIcon, MavenIcon, OpenShif
 <Hero>
 
 <div className="getting-involved">
-[![Twitter](https://img.shields.io/twitter/follow/jkubeio?label=Follow)](https://twitter.com/jkubeio)
-[![Twitter](https://img.shields.io/badge/YouTube-FF0000?logo=youtube&logoColor=white)](https://www.youtube.com/channel/UCpU2tjgpfkTVgeDq-DBSV7A)
-[![Gitter](https://badges.gitter.im/eclipse/jkube.svg)](https://gitter.im/eclipse/jkube?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
-[![Eclipse JKube Dev Mailing List](https://img.shields.io/badge/Eclipse%20JKube%20-Developer%20Mailing%20List-orange)](https://accounts.eclipse.org/mailing-list/jkube-dev)
-[![License](https://img.shields.io/badge/License-EPL%202.0-red.svg?label=license&logo=eclipse)](https://www.eclipse.org/legal/epl-2.0/)
+  [![Twitter](https://img.shields.io/twitter/follow/jkubeio?label=Follow)](https://twitter.com/jkubeio)
+  [![Twitter](https://img.shields.io/badge/YouTube-FF0000?logo=youtube&logoColor=white)](https://www.youtube.com/channel/UCpU2tjgpfkTVgeDq-DBSV7A)
+  [![Gitter](https://badges.gitter.im/eclipse/jkube.svg)](https://gitter.im/eclipse/jkube?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+  [![Eclipse JKube Dev Mailing List](https://img.shields.io/badge/Eclipse%20JKube%20-Developer%20Mailing%20List-orange)](https://accounts.eclipse.org/mailing-list/jkube-dev)
+  [![License](https://img.shields.io/badge/License-EPL%202.0-red.svg?label=license&logo=eclipse)](https://www.eclipse.org/legal/epl-2.0/)
 </div>
 
 # Eclipse JKube&trade;
@@ -39,7 +39,7 @@ Eclipse JKube also provides a set of tools such as watch, debug, log, etc. to im
        >
           <Tag color='#FFF' backgroundColor='#DD8623'>[🚀 Getting started](/docs/kubernetes-maven-plugin/#getting-started)</Tag>
           <Tag color='#FFF' backgroundColor='#326ce5'>[📖 Documentation](/docs/kubernetes-maven-plugin/)</Tag>
-    
+
           1. Add the plugin to your `pom.xml`:
              ```xml theme="dark" filename="pom.xml"
              <build>
@@ -68,7 +68,7 @@ Eclipse JKube also provides a set of tools such as watch, debug, log, etc. to im
        >
           <Tag color='#FFF' backgroundColor='#DD8623'>[🚀 Getting started](/docs/openshift-maven-plugin/#getting-started)</Tag>
           <Tag color='#FFF' backgroundColor='#326ce5'>[📖 Documentation](/docs/openshift-maven-plugin/)</Tag>
-    
+
           1. Add the plugin to your `pom.xml`:
              ```xml theme="dark" filename="pom.xml"
              <build>
@@ -96,7 +96,7 @@ Eclipse JKube also provides a set of tools such as watch, debug, log, etc. to im
        >
           <Tag color='#FFF' backgroundColor='#DD8623'>[🚀 Getting started](/docs/kubernetes-gradle-plugin/#getting-started)</Tag>
           <Tag color='#FFF' backgroundColor='#326ce5'>[📖 Documentation](/docs/kubernetes-gradle-plugin/)</Tag>
-    
+
           1. Add the plugin to your `build.gradle`:
              ```gradle
              plugins {
@@ -119,7 +119,7 @@ Eclipse JKube also provides a set of tools such as watch, debug, log, etc. to im
        >
           <Tag color='#FFF' backgroundColor='#DD8623'>[🚀 Getting started](/docs/openshift-gradle-plugin/#getting-started)</Tag>
           <Tag color='#FFF' backgroundColor='#326ce5'>[📖 Documentation](/docs/openshift-gradle-plugin/)</Tag>
-    
+
           1. Add the plugin to your `build.gradle`:
              ```gradle
              plugins {
@@ -191,10 +191,10 @@ Eclipse JKube also provides a set of tools such as watch, debug, log, etc. to im
 You can get Eclipse JKube from these platforms:
 
 <span>
-[![Maven Central](https://img.shields.io/maven-central/v/org.eclipse.jkube/jkube.svg?label=Maven%20Central)
-](https://search.maven.org/search?q=g:%22org.eclipse.jkube%22)
-[![Eclipse Download Repository](https://img.shields.io/badge/eclipse%20downloads-downloads.eclipse.org-red)
-](https://download.eclipse.org/jkube/)
+[![Maven Central](https://img.shields.io/maven-central/v/org.eclipse.jkube/jkube.svg?label=Maven%20Central)](
+  https://search.maven.org/search?q=g:%22org.eclipse.jkube%22)
+[![Eclipse Download Repository](https://img.shields.io/badge/eclipse%20downloads-downloads.eclipse.org-red)](
+  https://download.eclipse.org/jkube/)
 </span>
 
 </div>
diff --git a/src/content/quickstarts/index.md b/src/content/quickstarts/index.mdx
similarity index 100%
rename from src/content/quickstarts/index.md
rename to src/content/quickstarts/index.mdx
diff --git a/src/styles/components/hero.scss b/src/styles/components/hero.scss
index b709d8a..a898f68 100644
--- a/src/styles/components/hero.scss
+++ b/src/styles/components/hero.scss
@@ -28,7 +28,20 @@
     z-index: -1;
     background-color: darken($color-dark-background, 10%);
     &-wrapper {
-      height: 100%;
+      &-vertical {
+        display: none;
+        height: 100%;
+        @media only screen and (max-width: $desktop-min-width) {
+          display: block;
+        }
+      }
+      &-landscape {
+        display: none;
+        height: 100%;
+        @media only screen and (min-width: $desktop-min-width + 1) {
+          display: block;
+        }
+      }
     }
   }
 }
diff --git a/src/styles/templates/main.scss b/src/styles/templates/main.scss
index 8a2e49e..a170ea6 100644
--- a/src/styles/templates/main.scss
+++ b/src/styles/templates/main.scss
@@ -66,6 +66,7 @@
       padding: 0 $default-spacing;
       display: flex;
       justify-content: flex-end;
+      gap: 0.25rem;
     }
     & .highlight {
       display: flex;