diff --git a/apps/demol/src/app/app.json b/apps/demol/src/app/app.json
index 742c8ce..8b1701c 100644
--- a/apps/demol/src/app/app.json
+++ b/apps/demol/src/app/app.json
@@ -20,7 +20,7 @@
               "value": "daheim_karte"
             },
             {
-              "type": "misc",
+              "type": "smokingpit",
               "layer": "base",
               "value": "smokingpit"
             }
@@ -37,7 +37,7 @@
             },
             {
               "type": "image",
-              "layer": "fore",
+              "layer": "first",
               "value": "daheim_kinder"
             },
             {
@@ -58,17 +58,17 @@
             },
             {
               "type": "image",
-              "layer": "fore",
+              "layer": "third",
               "value": "daheim_karl"
             },
             {
-              "layer": "fore",
               "type": "image",
+              "layer": "third",
               "value": "daheim_gerda"
             },
             {
               "type": "image",
-              "layer": "fore",
+              "layer": "third",
               "value": "daheim_anna"
             }
           ]
@@ -84,7 +84,7 @@
             },
             {
               "type": "image",
-              "layer": "base",
+              "layer": "first",
               "value": "daheim_familie"
             }
           ]
@@ -100,33 +100,28 @@
             },
             {
               "type": "video",
-              "layer": "fore",
+              "layer": "fourth",
               "value": "3_Annas_Alltag",
               "title": "Annas Alltag"
             },
             {
               "type": "video",
-              "layer": "fore",
+              "layer": "fourth",
               "value": "4_Annas_Zuhause",
               "title": "Annas Lebensumfeld"
             },
             {
               "type": "video",
-              "layer": "fore",
+              "layer": "fourth",
               "value": "2_Anna_Familie",
               "title": "Annas Familie"
             },
             {
               "type": "video",
-              "layer": "fore",
+              "layer": "fourth",
               "value": "1_Anna_Großvater",
               "title": "Annas Großvater"
             },
-            {
-              "type": "image",
-              "layer": "back",
-              "value": "daheim_familie2"
-            },
             {
               "type": "text",
               "layer": "fore",
@@ -145,7 +140,7 @@
             },
             {
               "type": "image",
-              "layer": "base",
+              "layer": "first",
               "value": "daheim_werbung"
             },
             {
@@ -170,7 +165,7 @@
               "value": "Hilf Anna, ihn wieder zusammenzufügen, um zum Treffpunkt der Ortsgruppe zu gelangen. Ziehe dazu die durcheinandergewürfelten Kartenausschnitte in das entsprechende vorgezeichnete Feld. Wenn du das Puzzle richtig gelöst hast, kommst du zum nächsten Kapitel."
             },
             {
-              "type": "game",
+              "type": "puzzle",
               "layer": "base",
               "value": "puzzle"
             },
diff --git a/libs/data/src/lib/data.tsx b/libs/data/src/lib/data.tsx
index c4d3af7..9e32091 100644
--- a/libs/data/src/lib/data.tsx
+++ b/libs/data/src/lib/data.tsx
@@ -14,7 +14,8 @@ export enum ContentType {
   Video = "video",
   Image = "image",
   Game = "game",
-  Misc = "misc",
+  SmokingPit = "smokingpit",
+  Puzzle = "puzzle",
   Decission = "decission"
 }
 
diff --git a/libs/ui/src/lib/chapter/chapter.scss b/libs/ui/src/lib/chapter/chapter.scss
index 5faa145..ab3c42e 100644
--- a/libs/ui/src/lib/chapter/chapter.scss
+++ b/libs/ui/src/lib/chapter/chapter.scss
@@ -24,19 +24,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-flow: row wrap;
 
     &--fore {
       transform: translateZ(90px) scale(.7);
       z-index: 1;
-
-      picture {
-        width: 75%;
-        display: flex;
-      }
-
-      &.row > * {
-        width: 25%;
-      }
     }
 
     &--base {
@@ -46,7 +38,6 @@
       filter: saturate(.8);
 
       picture {
-        display: flex;
         margin-top: 50%;
       }
     }
@@ -56,7 +47,6 @@
       z-index: 3;
 
       picture {
-        display: flex;
         margin-top: -25%;
       }
     }
diff --git a/libs/ui/src/lib/image/image.scss b/libs/ui/src/lib/image/image.scss
index ca97791..f7f588a 100644
--- a/libs/ui/src/lib/image/image.scss
+++ b/libs/ui/src/lib/image/image.scss
@@ -4,3 +4,16 @@
   filter: saturate(.8);
   opacity: .9;
 }
+
+.first {
+  width: 75%;
+}
+
+.third {
+  width: 33%;
+}
+
+img {
+  height:auto;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/libs/ui/src/lib/image/image.tsx b/libs/ui/src/lib/image/image.tsx
index 30b498e..574f813 100644
--- a/libs/ui/src/lib/image/image.tsx
+++ b/libs/ui/src/lib/image/image.tsx
@@ -5,11 +5,12 @@ import './image.scss';
 /* eslint-disable-next-line */
 export interface ImageProps {
   value: string
+  width?: string
 }
 
 export const Image = (props: ImageProps) => {
   return (
-    <picture className="chapter_picture">
+    <picture className={`chapter_picture ${props.width}`}>
       <source srcSet={"./assets/"+props.value+IMAGE_SUFFIX} type='image/webp' />
       <source srcSet={"./assets/fallback/"+props.value+IMAGE_SUFFIX_ALTERNATE} type='image/png' />
       <img draggable="false" src={"./assets/fallback/"+props.value+IMAGE_SUFFIX_ALTERNATE} alt={props.value} />
diff --git a/libs/ui/src/lib/smokingpit/smokingpit.tsx b/libs/ui/src/lib/smokingpit/smokingpit.tsx
index 78add2f..6e3795d 100644
--- a/libs/ui/src/lib/smokingpit/smokingpit.tsx
+++ b/libs/ui/src/lib/smokingpit/smokingpit.tsx
@@ -11,7 +11,7 @@ export interface SmokingpitProps {
 export const Smokingpit = (props: SmokingpitProps) => {
   return (
     <div className='smokingPit'>
-      <Image value='daheim_arbeiterschaft' />
+      <Image value='daheim_arbeiterschaft'/>
       <div className='smoke'>
         <span className='s0'></span>
         <span className='s1'></span>
diff --git a/libs/ui/src/lib/text/text.scss b/libs/ui/src/lib/text/text.scss
index 0012f8b..338cec9 100644
--- a/libs/ui/src/lib/text/text.scss
+++ b/libs/ui/src/lib/text/text.scss
@@ -4,5 +4,5 @@
 }
 
 .column {
-  flex-direction: column;
+  flex-flow: column nowrap;
 }
\ No newline at end of file
diff --git a/libs/ui/src/lib/video/video.scss b/libs/ui/src/lib/video/video.scss
index 4c475ff..8231c26 100644
--- a/libs/ui/src/lib/video/video.scss
+++ b/libs/ui/src/lib/video/video.scss
@@ -3,10 +3,14 @@ video {
   height: auto;
 }
 
-.video {
+.chapter_video {
   position: relative;
 }
 
+.fourth {
+  width: 25%;
+}
+
 .play {
   position: absolute;
   top: 50%;
diff --git a/libs/ui/src/lib/video/video.tsx b/libs/ui/src/lib/video/video.tsx
index caef9bb..69e9238 100644
--- a/libs/ui/src/lib/video/video.tsx
+++ b/libs/ui/src/lib/video/video.tsx
@@ -6,6 +6,7 @@ import './video.scss';
 /* eslint-disable-next-line */
 export interface VideoProps {
   value: string,
+  width: string
   title: string
 }
 
@@ -16,7 +17,7 @@ export const Video = (props: VideoProps) => {
   // };
 
   return (
-    <div className="video">
+    <div className={`chapter_video ${props.width}`}>
       <p>{props.title}</p>
       <video>
         <source type='video/mp4' src={"./assets/movies/"+props.value+VIDEO_SUFFIX}></source>