diff --git a/src/App.css b/src/App.css
index 2955578..7debc4d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -11,22 +11,8 @@ body {
   width: 225px;
   display: block;
 }
-.demoOverlay {
-  opacity: 0;
-}
-.demoOverlay-fadein {
-  opacity: 1;
-  transition: all 200ms linear;
-}
-.demoOverlayBlackscreen-fadein {
-  opacity: 1;
-  transition: all 200ms linear;
-}
-.demoOverlay-fadeout {
-  opacity: 0;
-  transition: all 800ms linear;
-}
-.roundCorners {
+
+.roundCorners{
   border-radius: 30px;
 }
 .cutCorners {
@@ -252,8 +238,6 @@ form button:hover {
 }
 
 @media (max-width: 900px) {
-  .menu {
-  }
   .menu {
     background: #fff;
     position: absolute;
diff --git a/src/components/DemoView.js b/src/components/DemoView.js
index 9eb8bcf..1d8c5c4 100644
--- a/src/components/DemoView.js
+++ b/src/components/DemoView.js
@@ -1,40 +1,25 @@
-import React, { useCallback, useState, useContext, useEffect, useMemo } from "react";
-import { useParams, useNavigate } from "react-router-dom";
+import React, { useCallback, useState, useContext, useEffect } from "react";
+import { useParams } from "react-router-dom";
 
 import DemoContext from "./DemoContext";
 
-import IconButton from "@mui/material/IconButton";
-import HighlightOffIcon from "@mui/icons-material/HighlightOff";
-import { useTranslation } from "react-i18next";
-
-function DemoView(props) {
+function DemoView() {
   const { component_name, demo_id } = useParams();
-  const navigate = useNavigate();
 
   const [demoViewerOpen, setDemoViewerOpen] = useState(false);
   const demoContext = useContext(DemoContext);
 
   const [demoUrl, setDemoUrl] = useState("");
-  const [closeButtonPosition, setCloseButtonPosition] = useState("bottom_left");
-  const [fadein, setFadein] = useState(false);
-  const { i18n } = useTranslation();
-
-  const detailViewPath = `/${i18n.resolvedLanguage}/component-detail/${component_name}`;
 
   const init = useCallback(
     (demo_id) => {
       if (!demoContext.componentData?.[component_name] || !demo_id) return;
 
-      setFadein(true);
-
       let _compData = demoContext.componentData?.[component_name];
 
       _compData.demos?.forEach((demo) => {
         if ((demo.id ? demo.id : demo.name) === demo_id) {
           setDemoUrl(demo.url);
-          if (typeof demo.closeButtonPosition !== "undefined") {
-            setCloseButtonPosition(demo.closeButtonPosition);
-          }
           setTimeout(() => {
             setDemoViewerOpen(true);
           }, 500);
@@ -44,39 +29,16 @@ function DemoView(props) {
     [demoContext, component_name]
   );
 
-  const closeButtonCss = useMemo(() => {
-    switch (closeButtonPosition) {
-      case "top_left":
-        return {
-          top: 0,
-          left: 0,
-        };
-      case "top_right":
-        return {
-          top: 0,
-          right: 0,
-        };
-      case "bottom_right":
-        return {
-          bottom: 0,
-          right: 0,
-        };
-      case "bottom_left":
-      default:
-        return {
-          bottom: 0,
-          left: 0,
-        };
-    }
-  }, [closeButtonPosition]);
-
   useEffect(() => {
     init(demo_id);
   }, [init, demo_id]);
 
+  useEffect(() => {
+    init(demo_id);
+  }, [demoContext.storybookData, init, demo_id]);
+
   return (
     <div
-      className={fadein ? "demoOverlay-fadein" : "demoOverlay-fadeout"}
       style={{
         position: "fixed",
         zIndex: 1000,
@@ -87,41 +49,6 @@ function DemoView(props) {
         backgroundColor: "#000",
       }}
     >
-      <div
-        className={fadein ? "" : "demoOverlayBlackscreen-fadein"}
-        style={{
-          position: "fixed",
-          zIndex: 10000000,
-          top: 0,
-          right: 0,
-          left: 0,
-          height: "100vh",
-          backgroundColor: "#000",
-          display: fadein ? "none" : "block",
-        }}
-      ></div>
-      <div
-        className="closeDemo"
-        style={{
-          cursor: "pointer",
-          position: "fixed",
-          zIndex: 1020,
-          ...closeButtonCss,
-        }}
-      >
-        <IconButton
-          onClick={() => {
-            setFadein(false);
-            setTimeout(() => {
-              navigate(detailViewPath);
-            }, 480);
-          }}
-          aria-label="close"
-          size="large"
-        >
-          <HighlightOffIcon style={{ fontSize: "3em" }}></HighlightOffIcon>
-        </IconButton>
-      </div>
       {demoViewerOpen && (
         <iframe
           title="component-demo-viewer"
@@ -146,4 +73,4 @@ function DemoView(props) {
   );
 }
 
-export default DemoView;
+export default DemoView;
\ No newline at end of file
diff --git a/src/components/Footer.js b/src/components/Footer.js
index da8674f..604ad2a 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,38 +1,28 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
+import { Paper, Container } from "@mui/material";
+import makeStyles from "@mui/styles/makeStyles";
 
 import theme from "../theme.js";
-import { Container } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
-import Paper from "@mui/material/Paper";
-import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles((theme) => ({
   footer: {
-    //backgroundColor: theme.palette.secondary.lighterDarkBackground,
     maxWidth: "100%",
     padding: "40px 0",
   },
   link: {
     color: theme.palette.secondary.greyText,
     textDecoration: "none",
-    /**color: theme.palette.secondary.greyText,
-    "&:hover": {
-      color: theme.palette.secondary.contrastText + " !important",
-    },
-    "&:visited": {
-      color: theme.palette.secondary.greyText,
-    },*/
   },
   logo: {
-    //fill: theme.palette.secondary.greyText,
     width: "230px",
-    //opacity: 0.6,
   },
 }));
 
 function Footer() {
   const classes = useStyles(theme);
-  const { i18n } = useTranslation();
+  // eslint-disable-next-line
+  const { t, i18n } = useTranslation();
 
   return (
     <Paper
@@ -96,4 +86,4 @@ function Footer() {
   );
 }
 
-export default Footer;
+export default Footer;
\ No newline at end of file
diff --git a/src/components/StoryDetailView.js b/src/components/StoryDetailView.js
index 98cac49..e993286 100644
--- a/src/components/StoryDetailView.js
+++ b/src/components/StoryDetailView.js
@@ -2,6 +2,7 @@ import React, {
   useState,
   useContext,
   useEffect,
+  useCallback,
   useMemo,
 } from "react";
 import { useResolvedPath, Link } from "react-router-dom";
@@ -20,7 +21,7 @@ import Tag from "./Tag.js";
 
 import { useTranslation } from "react-i18next";
 
-function StoryDetailView() {
+function StoryDetailView(props) {
   const mediaIsMobile = useMediaQuery("(max-width:900px)");
   const basepath = useResolvedPath("/");
   const { component_id } = useParams();
@@ -52,25 +53,40 @@ function StoryDetailView() {
 
   const { t, i18n } = useTranslation();
 
+  const fetchDescription = useCallback(() => {
+    if (!componentData || (componentData && !componentData.name)) return;
+
+    let currentLanguage = i18n.resolvedLanguage;
+    fetch(
+      componentData.url +
+        "/catalogue/" +
+        componentData.name +
+        "." +
+        currentLanguage +
+        ".html"
+    )
+      .then((res) => {
+        if (!res.ok) {
+          return t("noDescription");
+        }
+        return res.text();
+      })
+      .then((text) => {
+        setDescription(text);
+      });
+  }, [componentData, i18n.resolvedLanguage, t]);
+
   useEffect(() => {
     if (
       demoContext?.componentData &&
       typeof demoContext.componentData[component_id] !== "undefined"
     ) {
       let currentLanguage = i18n.resolvedLanguage;
-      let componentTitle = demoContext.componentData[component_id].i18n?.[
-        currentLanguage
-      ]?.title
-        ? demoContext.componentData[component_id].i18n[currentLanguage].title
-        : demoContext.componentData[component_id].title;
+      let componentTitle =
+        currentLanguage !== "en"
+          ? demoContext.componentData[component_id].i18n[currentLanguage].title
+          : demoContext.componentData[component_id].title;
       setComponentTitle(componentTitle);
-      let componentDescription = demoContext.componentData[component_id].i18n?.[
-        currentLanguage
-      ]?.description
-        ? demoContext.componentData[component_id].i18n[currentLanguage]
-            .description
-        : demoContext.componentData[component_id].description;
-      setDescription(componentDescription);
     }
   }, [
     component_id,
@@ -85,6 +101,10 @@ function StoryDetailView() {
     setComponentData(demoContext.componentData[component_id]);
   }, [demoContext.componentData, demoContext, component_id]);
 
+  useEffect(() => {
+    fetchDescription();
+  }, [fetchDescription]);
+
   return (
     <>
       <Grid container>
@@ -93,7 +113,10 @@ function StoryDetailView() {
         </Grid>
       </Grid>
 
-      <div style={{ marginBottom: "50px" }}>{description}</div>
+      <div
+        style={{ marginBottom: "50px" }}
+        dangerouslySetInnerHTML={{ __html: description }}
+      />
 
       <Grid container spacing={4} key="contentContainer">
         <Grid
@@ -133,10 +156,7 @@ function StoryDetailView() {
                 ))}
             </Grid>
             <Grid key="description" item xs={12} style={{ marginTop: "30px" }}>
-              <div
-                className="content"
-                //dangerouslySetInnerHTML={{ __html: description }}
-              ></div>
+              <div className="content"></div>
             </Grid>
           </Grid>
         </Grid>
@@ -157,13 +177,14 @@ function StoryDetailView() {
               ></Divider>
 
               <Grid container spacing={2} style={{ marginTop: "0px" }}>
-                {componentData?.demos?.length &&
-                  componentData.demos.map((demo, idx) => (
+                {componentData &&
+                  componentData.demos &&
+                  componentData.demos.map((demo) => (
                     <Grid
                       item
                       xs={6}
                       style={{ marginTop: "16px", paddingTop: "0px" }}
-                      key={demo.name + idx}
+                      key={demo.id ? demo.id : demo.name}
                     >
                       <Button
                         style={{
@@ -175,6 +196,7 @@ function StoryDetailView() {
                           color: theme.palette.common.white,
                           borderRadius: "8px",
                         }}
+                        target="blank"
                         component={Link}
                         variant="contained"
                         to={
@@ -198,7 +220,7 @@ function StoryDetailView() {
                   ))}
               </Grid>
             </Grid>
-            {componentData?.components?.length > 0 && (
+            {componentData.components && (
               <Grid
                 item
                 xs={12}
@@ -210,47 +232,28 @@ function StoryDetailView() {
                   variant="fullWidth"
                   sx={{ bgcolor: theme.palette.secondary.main }}
                 ></Divider>
-                {componentData.components.map((el, idx) => (
-                  <ListItemSmall component_id={el} key={el + idx} />
+                {componentData.components.map((el) => (
+                  <ListItemSmall component_id={el} key={el.name} />
                 ))}
               </Grid>
             )}
-            {appsWhichImplement?.length > 0 && (
+            {appsWhichImplement.length !== 1 && (
               <Grid item xs={12} key="apps_list" style={{ marginTop: "30px" }}>
                 <h3>{t("includedIn")}</h3>
                 <Divider
                   variant="fullWidth"
                   sx={{ bgcolor: theme.palette.secondary.main }}
                 ></Divider>
-                {appsWhichImplement.map((el, idx) => (
-                  <ListItemSmall component_id={el} key={el.name + idx} />
+                {appsWhichImplement.map((el) => (
+                  <ListItemSmall component_id={el} key={el.name} />
                 ))}
               </Grid>
             )}
           </Grid>
         </Grid>
       </Grid>
-
-      {/*
-      <Grid container spacing={0} key="descriptionContainer">
-        <Grid item xs={12} style={{ marginTop: "30px" }}>
-          <div
-            style={{
-              minHeight: "150px",
-            }}
-          >
-            <h3>{t("description")}</h3>
-            <Divider
-              variant="fullWidth"
-              sx={{ bgcolor: theme.palette.secondary.main }}
-            ></Divider>
-          </div>
-        </Grid>
-      </Grid>
-
-          */}
     </>
   );
 }
 
-export default StoryDetailView;
+export default StoryDetailView;
\ No newline at end of file
diff --git a/src/components/WebsiteHeader.js b/src/components/WebsiteHeader.js
index 2bdaf12..aa66023 100644
--- a/src/components/WebsiteHeader.js
+++ b/src/components/WebsiteHeader.js
@@ -4,27 +4,28 @@ import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
 
 const websiteUrl = 'https://mapcomponents.org';
 
-export default function WebsiteHeader(props) {
+export default function WebsiteHeader() {
   return (
-    <ul className={"menu" + (props.expanded?' expanded':'')}>
+    <ul className="menu">
       <li>
-        <a href={websiteUrl + "/entdecken"} title="MapComponents entdecken" style={{transitionDelay: "0.15s"}}>
+        <a href={websiteUrl + "/entdecken"} title="MapComponents entdecken">
           Entdecken
         </a>
       </li>
       <li>
-        <a href={websiteUrl + "/dokumentation"} title="Dokumentation" style={{transitionDelay: "0.2s"}}>
+        <a href={websiteUrl + "/dokumentation"} title="Dokumentation">
           Dokumentation
         </a>
       </li>
       <li>
-        <a href={websiteUrl + "/aktuelles"} title="Aktuelles" style={{transitionDelay: "0.25s"}}>
+        <a href={websiteUrl + "/aktuelles"} title="Aktuelles">
           Aktuelles
         </a>
       </li>
       <li>
-        <a href={websiteUrl + "/service"} className="has-sub" style={{transitionDelay: "0.30s"}}>
-          Service<FontAwesomeIcon icon={faChevronDown} />
+        <a href={websiteUrl + "/service"} className="has-sub">
+          Service
+          <FontAwesomeIcon icon={faChevronDown} />
         </a>
         <ul className="menu-lvl2">
           <li>
@@ -40,10 +41,13 @@ export default function WebsiteHeader(props) {
         </ul>
       </li>
       <li>
-        <a href={"https://catalogue.mapcomponents.org/"} className="btn btn-primary" style={{transitionDelay: "0.35s"}}>
+        <a
+          href={websiteUrl + "/jetzt-ausprobieren"}
+          className="btn btn-primary"
+        >
           Jetzt ausprobieren
         </a>
       </li>
     </ul>
   );
-}
+}
\ No newline at end of file