diff --git a/public/steps/sylt.png b/public/steps/sylt.png
new file mode 100644
index 0000000..67aaa12
Binary files /dev/null and b/public/steps/sylt.png differ
diff --git a/src/components/SideStepper.tsx b/src/components/SideStepper.tsx
index e297c8b..0648f26 100644
--- a/src/components/SideStepper.tsx
+++ b/src/components/SideStepper.tsx
@@ -1,7 +1,7 @@
 import { Box, Button, Card, CardContent, CardHeader, Step, StepButton, StepContent,  Stepper, Typography } from "@mui/material";
 import { TOPIC_TYPE } from "../topics.model";
 
-import { AgricultureOutlined, WbSunnyOutlined, FloodOutlined, BubbleChartOutlined } from '@mui/icons-material';
+import { Description, AgricultureOutlined, WbSunnyOutlined, FloodOutlined, BubbleChartOutlined } from '@mui/icons-material';
 import { useNavigate } from "react-router-dom";
 
 interface SideStepperProps {
@@ -10,11 +10,12 @@ interface SideStepperProps {
 }
 
 const TOPIC_ORDER = {
-    uncertainty: 0,
-    weather: 1,
-    agriculture: 2,
-    extremes: 3,
-    other: 4,
+    intro: 0,
+    uncertainty: 1,
+    weather: 2,
+    agriculture: 3,
+    extremes: 4,
+    other: 5,
 }
 
 const SideStepper: React.FC<SideStepperProps> = ({ jumpToTopic, activeTopic }) => {
@@ -24,6 +25,12 @@ const SideStepper: React.FC<SideStepperProps> = ({ jumpToTopic, activeTopic }) =
             <Stepper  orientation="vertical" activeStep={TOPIC_ORDER[activeTopic]} nonLinear>
 
                 <Step key="0">
+                    <StepButton color="inherit" onClick={() => jumpToTopic('intro')} icon={<Description />}>
+                        <Typography variant="caption">Intro</Typography>
+                    </StepButton>
+                </Step>
+
+                <Step key="1">
                     <StepButton color="inherit" onClick={() => jumpToTopic('uncertainty')} icon={<BubbleChartOutlined />}>
                         <Typography variant="caption">Uncertainty and Risk</Typography>
                     </StepButton>
@@ -32,7 +39,7 @@ const SideStepper: React.FC<SideStepperProps> = ({ jumpToTopic, activeTopic }) =
                     </StepContent>
                 </Step>
 
-                <Step key="1">
+                <Step key="2">
                     <StepButton color="inherit" onClick={() => jumpToTopic('weather')} icon={<WbSunnyOutlined />}>
                         <Typography variant="caption">Weather and Climate</Typography>
                     </StepButton>
@@ -41,7 +48,7 @@ const SideStepper: React.FC<SideStepperProps> = ({ jumpToTopic, activeTopic }) =
                     </StepContent>
                 </Step>
 
-                <Step key="2">
+                <Step key="3">
                     <StepButton color="inherit" onClick={() => jumpToTopic('agriculture')} icon={<AgricultureOutlined />}>
                         <Typography variant="caption">Agriculture</Typography>
                     </StepButton>
@@ -50,7 +57,7 @@ const SideStepper: React.FC<SideStepperProps> = ({ jumpToTopic, activeTopic }) =
                     </StepContent>
                 </Step>
 
-                <Step key="3">
+                <Step key="4">
                     <StepButton color="inherit" onClick={() => jumpToTopic('extremes')} icon={<FloodOutlined />}>
                         <Typography variant="caption">Extremes</Typography>
                     </StepButton>
@@ -59,7 +66,7 @@ const SideStepper: React.FC<SideStepperProps> = ({ jumpToTopic, activeTopic }) =
                     </StepContent>
                 </Step>
 
-                {/* <Step key="4">
+                {/* <Step key="5">
                     <StepButton color="inherit" onClick={() => jumpToTopic('other')}>
                         <Typography variant="caption">Other / Not specified</Typography>
                     </StepButton>
diff --git a/src/topics.model.ts b/src/topics.model.ts
index 5562204..4de5d4d 100644
--- a/src/topics.model.ts
+++ b/src/topics.model.ts
@@ -1,8 +1,9 @@
 import { createRef } from "react";
 
-export type TOPIC_TYPE = 'uncertainty' | 'weather' | 'agriculture' | 'extremes' | 'other';
+export type TOPIC_TYPE = 'intro' | 'uncertainty' | 'weather' | 'agriculture' | 'extremes' | 'other';
 
 export const TOPICS = {
+    intro: createRef<HTMLElement>(),
     uncertainty: createRef<HTMLElement>(),
     weather: createRef<HTMLElement>(),
     agriculture: createRef<HTMLElement>(),
diff --git a/src/topics/Intro.tsx b/src/topics/Intro.tsx
new file mode 100644
index 0000000..b7d5acd
--- /dev/null
+++ b/src/topics/Intro.tsx
@@ -0,0 +1,63 @@
+import { Grid, Typography } from "@mui/material";
+import { useSelector } from "react-redux";
+import HoverTooltip from "../components/HoverTooltip";
+import StepImage from "../components/StepImage";
+import TopicWrapper from "../components/TopicWrapper";
+import { RootState } from "../store";
+import { TopicStep } from "../topics.model";
+import sylt from './steps/sylt.png';
+
+/**
+ * Build the text elements using React-MUI (material ui)
+ * 
+ * To adjust to screen sizes, use the <Typography> component: https://mui.com/material-ui/react-typography/
+ * 
+ * For Tooltips, use the <HoverTooltip linkName="link-text" />
+ * with image: <HoverTooltip img="/local/path" linkName="link-text" /> or <HoverTooltip img="https://external.url/path/to/img.png" linkName="link-text"/> 
+ * load text from wikipedia: <HoverTooltip wikipedia="PageName" /> ie. <HoverTooltip wikipedia="Normalverteilung" /> in steps_de
+ * and <HoverTooltip wikipedia="Normal distribution" linkName="link-text"> in steps_en
+ * If you want to write the text yourself do it like: <HoverTooltip linkName="link-text">This is my own tooltip text...</Tooltip>
+ */
+
+const steps_de: TopicStep[] = [
+    {   
+        content: <>
+            <Typography variant="h1">RUINS Projekt</Typography>
+                <div>
+                    <img alt='Intro' style={{ width: 800 }} src={String(sylt)} />
+                </div>
+            <Typography variant="h3"sx={{marginTop: '5rem'}}>Willkommen auf der RUINSapp</Typography>
+            <Typography variant="body2" component="p" sx={{marginTop: '3rem'}}>
+                Mehrere interaktive Apps ermöglichen es Ihnen das RUINS Projekt zu erkunden. Über die Unsicherheiten in der Umweltsystem Modellierung,
+                über Wetter und Klimamodelle, Landnutzung und Extremereignisse. 
+            </Typography>
+            <Typography variant="body2" component="p">
+                Scrollen Sie nach unten oder wählen sie direkt die Themen links aus.
+            </Typography>
+        </>
+    }
+];
+
+const steps_en: TopicStep[] = steps_de;
+
+const Intro: React.FC = () => {
+    // get the correct steps
+    const lang = useSelector((state: RootState) => state.settings.lang);
+    const steps = lang === 'de' ? steps_de : steps_en;
+    
+    return (
+        <Grid container spacing={1}>
+            <Grid item xs={6}>
+                <TopicWrapper steps={steps}/>
+            </Grid>
+
+            <Grid item xs={6}>
+                <StepImage />
+            </Grid>
+
+        </Grid>
+        
+    );
+}
+
+export default Intro;
\ No newline at end of file