diff --git a/src/routes/_components/Hero.tsx b/src/routes/_components/Hero.tsx
index a3bd11c..f7fce0b 100644
--- a/src/routes/_components/Hero.tsx
+++ b/src/routes/_components/Hero.tsx
@@ -3,14 +3,14 @@ import { Breakout } from '@/components/Container';
 export const Hero = () => (
   <Breakout
     className={[
-      'relative min-h-[calc(100vh-var(--page-header-height))]',
+      'relative min-h-[calc(100dvh-var(--page-header-height))]',
       "bg-[linear-gradient(to_bottom,_var(--tw-gradient-stops)),url('/circuit-board.svg')] bg-repeat",
       'from-secondary-400/50 via-secondary-50 via-70% to-secondary-50',
     ].join(' ')}
   >
     <div className="absolute inset-x-0 top-0 h-8 bg-gradient-to-b from-neutral-700/50 via-neutral-700/30 via-20% to-transparent" />
 
-    <div className="ot-[4vh] mx-auto max-w-6xl md:pt-[8vh]">
+    <div className="ot-[4dvh] mx-auto max-w-6xl md:pt-[8dvh]">
       <h1 className="m-0 text-balance text-7xl tracking-tighter md:text-8xl lg:text-9xl">
         Explore Design Patterns in React
       </h1>
diff --git a/src/routes/index.mdx b/src/routes/index.mdx
deleted file mode 100644
index 27f4970..0000000
--- a/src/routes/index.mdx
+++ /dev/null
@@ -1,37 +0,0 @@
-# Welcome to the React Reference App
-
-The React Reference App is a resource designed to provide you with practical examples of various coding patterns and practices, mainly in <b>ReactJS</b>.
-It serves as a reference point for you to understand, learn, and implement these patterns in your own projects.
-
-Patterns are a way of organizing code in a way that makes it easier to understand, maintain, and extend. They are a set of best practices that have been proven to work well in a variety of situations.
-In the end, patterns are like blueprints that can solve recurring problems and challenges.
-
-The main purpose of this app is to provide an overview of the most common patterns and practices in ReactJS using simple examples.
-Specific issues or challenges, such as managing state, handling forms will be addressed. These are also shown in conjunction with the <b>Marigold Design System</b> in appropriate places.
-
-<div className="h-5" />
-
-## How to use the React Reference App?
-
-Using the React Reference App is straightforward. Each pattern or practice is presented with a detailed explanation and code examples.
-You can copy these code examples directly into your own projects. To do this, simply click the copy button (<button type="button" title="Copy code" class="ch-editor-button" style={{verticalAlign: 'bottom', marginRight: '0px'}}><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></button>) in the code snippet.
-Clicking this button will copy the code to your clipboard, ready to be pasted into your own code editor.
-
-<div className="h-5" />
-
-## Which patterns will be addressed?
-
-The patterns are selected from our survey we made. So in future we will try to add all of them.
-
-<img src={'patterns.png'} alt="Survey" />
-
-If you have suggestions for patterns that should be added to the React Reference App, or if you think some of your own code could
-be transformed into a useful pattern here, please let us [know](https://www.marigold-ui.io/introduction/get-in-touch?theme=b2b#introduction-to-marigold).
-
-<div className="h-5" />
-
-## Feedback
-
-Constructive feedback, ideas and suggestions for improvement are welcome.
-
-Please use one of our [channels](https://www.marigold-ui.io/introduction/get-in-touch?theme=b2b) to contact us.