diff --git a/local_packages/psi/Configuration/Sets/Psi/TsConfig/Page/TCEFORM.tsconfig b/local_packages/psi/Configuration/Sets/Psi/TsConfig/Page/TCEFORM.tsconfig
index ffc4719..4b5a01d 100644
--- a/local_packages/psi/Configuration/Sets/Psi/TsConfig/Page/TCEFORM.tsconfig
+++ b/local_packages/psi/Configuration/Sets/Psi/TsConfig/Page/TCEFORM.tsconfig
@@ -92,8 +92,6 @@ TCEFORM {
         // Header Link
         header_link.disabled = 1
 
-        subheader.disabled = 1
-
         frame_class {
             disabled = 1
         }
@@ -131,18 +129,6 @@ TCEFORM {
             }
         }
 
-        subheader {
-            types {
-
-                text {
-                    disabled = 0
-                }
-                textpic {
-                    disabled = 0
-                }
-            }
-        }
-
         // remove unused media settings
         imagewidth.disabled = 1
         imageheight.disabled = 1
diff --git a/local_packages/psi/Configuration/Sets/Psi/TypoScript/page.typoscript b/local_packages/psi/Configuration/Sets/Psi/TypoScript/page.typoscript
index ec93c74..0576816 100644
--- a/local_packages/psi/Configuration/Sets/Psi/TypoScript/page.typoscript
+++ b/local_packages/psi/Configuration/Sets/Psi/TypoScript/page.typoscript
@@ -54,6 +54,7 @@ page {
 
     includeCSS {
         theme = EXT:psi/Resources/Public/Css/main.css
+        theme2 = EXT:psi/Resources/Public/Css/main.min.css
     }
 
     includeJSFooter {
diff --git a/local_packages/psi/Configuration/TCA/Overrides/tt_content.php b/local_packages/psi/Configuration/TCA/Overrides/tt_content.php
index d837e48..d634b59 100644
--- a/local_packages/psi/Configuration/TCA/Overrides/tt_content.php
+++ b/local_packages/psi/Configuration/TCA/Overrides/tt_content.php
@@ -66,7 +66,7 @@
     'showitem' => '
     --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general,
     --palette--;;general,
-    --palette--;;headers, bodytext;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:bodytext_formlabel,
+    --palette--;;headers, bodytext;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:bodytext_formlabel,link,
     --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:media, assets,
     --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:appearance,
     --palette--;;frames,
@@ -83,6 +83,7 @@
                 'type' => 'text',
                 'cols' => 50,
                 'rows' => 5,
+                'required' => true,
                 'enableRichtext' => true,
                 'richtextConfiguration' => 'default',
             ],
@@ -93,6 +94,16 @@
                 'allowed' => 'common-image-types',
                 'minitems' => 1,
                 'maxitems' => 1,
+
+                'overrideChildTca' => [
+                    'types' => [
+                        \TYPO3\CMS\Core\Resource\File::FILETYPE_IMAGE => [
+                            'showitem' => '
+                        title, alternative, description,crop,
+                        --palette--;;filePalette',
+                        ],
+                    ],
+                ],
             ],
         ],
     ],
diff --git a/local_packages/psi/Resources/Private/Scss/Base/_container.scss b/local_packages/psi/Resources/Private/Scss/Base/_container.scss
index 7eee708..f20787b 100644
--- a/local_packages/psi/Resources/Private/Scss/Base/_container.scss
+++ b/local_packages/psi/Resources/Private/Scss/Base/_container.scss
@@ -17,8 +17,8 @@ $grid-gutter-width: 24px;
 }
 
 @mixin column($columns, $total-columns: $grid-columns) {
-	flex: 0 0 percentage($columns / $total-columns);
-	max-width: percentage($columns / $total-columns);
+	flex: 0 0 calc(($columns / $total-columns) * 100%);
+	max-width: calc(($columns / $total-columns) * 100%);
 	padding-right: $grid-gutter-width / 2;
 	padding-left: $grid-gutter-width / 2;
 }
diff --git a/local_packages/psi/Resources/Private/Scss/Components/_headline.scss b/local_packages/psi/Resources/Private/Scss/Components/_headline.scss
new file mode 100644
index 0000000..0b30c8e
--- /dev/null
+++ b/local_packages/psi/Resources/Private/Scss/Components/_headline.scss
@@ -0,0 +1,18 @@
+.headline {
+    &-center {
+        text-align: center;
+    }
+
+    &-left {
+        text-align: left;
+    }
+
+    &-right {
+        text-align: right;
+    }
+}
+
+.subheadline {
+    width: 100%;
+    display: block;
+}
diff --git a/local_packages/psi/Resources/Private/Scss/Components/_image.scss b/local_packages/psi/Resources/Private/Scss/Components/_image.scss
new file mode 100644
index 0000000..bd2fd95
--- /dev/null
+++ b/local_packages/psi/Resources/Private/Scss/Components/_image.scss
@@ -0,0 +1,38 @@
+.image {
+    @include container;
+
+    &__container {
+        @include row;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        max-width: 1440px;
+        margin-left: auto;
+        margin-right: auto;
+
+    }
+
+    &__content {
+        @include column(8);
+
+        &-full {
+            @include column(12);
+        }
+    }
+
+    &__figure {
+        margin: 0;
+    }
+
+    &__file {
+        width: 100%;
+        height: auto;
+    }
+}
+
+@media (min-width: 768px) {
+    .image {
+        @include container;
+    }
+
+}
diff --git a/local_packages/psi/Resources/Private/Scss/Components/_text.scss b/local_packages/psi/Resources/Private/Scss/Components/_text.scss
new file mode 100644
index 0000000..29646bb
--- /dev/null
+++ b/local_packages/psi/Resources/Private/Scss/Components/_text.scss
@@ -0,0 +1,13 @@
+.text {
+    &-center {
+        text-align: center;
+    }
+
+    &-end {
+        text-align: right;
+    }
+
+    &-justify {
+        text-align: justify;
+    }
+}
diff --git a/local_packages/psi/Resources/Private/Scss/Components/_textpic.scss b/local_packages/psi/Resources/Private/Scss/Components/_textpic.scss
new file mode 100644
index 0000000..b78d530
--- /dev/null
+++ b/local_packages/psi/Resources/Private/Scss/Components/_textpic.scss
@@ -0,0 +1,52 @@
+.textpic {
+    @include container;
+
+    &__container {
+        @include row;
+        max-width: 1440px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    &__content {
+        @include column(12);
+    }
+
+    &__image {
+        @include column(12);
+
+        figure {
+            margin: 0;
+        }
+
+        &-file {
+            width: 100%;
+            height: auto;
+            object-fit: cover;
+        }
+
+        &-right {
+            order: 2;
+        }
+    }
+}
+
+@media (min-width: 768px) {
+    .textpic {
+        flex-direction: row;
+
+        &__container {
+            justify-content: center;
+            align-items: center;
+            column-gap: calc(100% / 12);
+        }
+
+        &__content {
+            @include column(4);
+        }
+
+        &__image {
+            @include column(5);
+        }
+    }
+}
diff --git a/local_packages/psi/Resources/Private/Scss/main.scss b/local_packages/psi/Resources/Private/Scss/main.scss
index bb23412..9511264 100644
--- a/local_packages/psi/Resources/Private/Scss/main.scss
+++ b/local_packages/psi/Resources/Private/Scss/main.scss
@@ -3,5 +3,9 @@
 @import "Base/variables";
 @import "Base/body";
 @import "Base/container";
+@import "Components/headline";
+@import "Components/text";
+@import "Components/textpic";
+@import "Components/image";
 @import "Plugins/Felogin/login";
 @import "Plugins/Felogin/profile";
diff --git a/local_packages/psi/Resources/Private/Templates/Content/Image.html b/local_packages/psi/Resources/Private/Templates/Content/Image.html
index 270f7bf..b0ba37d 100644
--- a/local_packages/psi/Resources/Private/Templates/Content/Image.html
+++ b/local_packages/psi/Resources/Private/Templates/Content/Image.html
@@ -1,5 +1,59 @@
-<h2>{data.header}</h2>
+<div class="image">
+    <div class="image__container">
+        <div class="image__content   {f:if(condition: '{data.layout} == 1', then: 'image__content-full')}">
+            <f:if condition="{data.subheader}">
+            <span
+                class="subheadline {f:if(condition: '{data.header} && {data.header_position}', then: 'headline-{data.header_position}')}">
+                {data.subheader}
+            </span>
+            </f:if>
+            <f:if condition="{data.header}">
+                <f:render partial="Content/Header" arguments="{
+                header: data.header,
+                layout: data.header_layout,
+                positionClass: '{f:if(condition: data.header_position, then: \'headline-{data.header_position}\')}',
+                default: settings.defaultHeaderType}"/>
+            </f:if>
 
-<f:for each="{data.image}" as="image">
-    <f:image image="{data.image.0}"/>
-</f:for>
+            <f:for each="{data.media}" as="file">
+                <f:render section="Image" arguments="{file: file, settings: settings}"/>
+            </f:for>
+        </div>
+    </div>
+</div>
+
+<f:section name="Image">
+    <figure class="image__figure">
+        <picture>
+            <f:render section="Source"
+                      arguments="{breakpoint: settings.psi.breakpoints.desktop, cropVariant: 'default', file: file, width: '1400'}"/>
+            <f:render section="Source"
+                      arguments="{breakpoint: settings.psi.breakpoints.tablet, cropVariant: 'default', file: file, width: '900'}"/>
+            <f:render section="Source"
+                      arguments="{breakpoint: settings.psi.breakpoints.mobile, cropVariant: 'default', file: file, width: '500'}"/>
+
+            <source media="{settings.psi.breakpoints.mobile.media}" type="image/webp"
+                    srcset="{f:uri.image(image: file, width: '500', cropVariant: 'default',fileExtension: 'webp')}"/>
+
+            <f:image image="{file}"
+                     alt="{file.alternative}"
+                     title="{file.title}"
+                     width="500"
+                     cropVariant="default"
+                     loading="{settings.media.lazyLoading}"
+                     decoding="{settings.media.imageDecoding}"
+                     crop="{crop}"
+                     class="image__file"/>
+        </picture>
+        <f:if condition="{file.description}">
+            <figcaption>{file.description}</figcaption>
+        </f:if>
+    </figure>
+</f:section>
+
+<f:section name="Source">
+    <source media="{breakpoint.media}" type="image/webp"
+            srcset="{f:uri.image(image: file, width: width, cropVariant: cropVariant, fileExtension: 'webp')}"/>
+    <source media="{breakpoint.media}" type="{file.properties.mime_type}"
+            srcset="{f:uri.image(image: file, width: width, cropVariant: cropVariant, fileExtension: '{file.properties.extension}')}"/>
+</f:section>
diff --git a/local_packages/psi/Resources/Private/Templates/Content/Text.html b/local_packages/psi/Resources/Private/Templates/Content/Text.html
index 7d3b02d..915e6fe 100644
--- a/local_packages/psi/Resources/Private/Templates/Content/Text.html
+++ b/local_packages/psi/Resources/Private/Templates/Content/Text.html
@@ -1,7 +1,8 @@
 <div class="text">
     <f:if condition="{data.subheader}">
-        <span
-            class="subheadline {f:if(condition: '{data.header} && {data.header_position}', then: 'headline-{data.header_position}')}">{data.subheader}</span>
+        <span class="subheadline {f:if(condition: '{data.header} && {data.header_position}', then: 'headline-{data.header_position}')}">
+            {data.subheader}
+        </span>
     </f:if>
     <f:if condition="{data.header}">
         <f:render partial="Content/Header" arguments="{
diff --git a/local_packages/psi/Resources/Private/Templates/Content/Textpic.html b/local_packages/psi/Resources/Private/Templates/Content/Textpic.html
index 6a25a70..d29ac8f 100644
--- a/local_packages/psi/Resources/Private/Templates/Content/Textpic.html
+++ b/local_packages/psi/Resources/Private/Templates/Content/Textpic.html
@@ -1,24 +1,24 @@
 <div class="textpic">
-    <f:if condition="{data.subheader}">
-        <span class="subheadline">{data.subheader}</span>
-    </f:if>
-    <f:if condition="{data.header}">
-        <f:render partial="Content/Header" arguments="{
+    <div class="textpic__container">
+        <div class="textpic__image {f:if(condition: '{data.layout} == 1', then: 'textpic__image-right')}">
+            <f:for each="{data.assets}" as="file">
+                <f:render section="Image" arguments="{file: file, settings: settings}"/>
+            </f:for>
+        </div>
+        <div class="textpic__content">
+            <f:if condition="{data.subheader}">
+                <span class="subheadline">{data.subheader}</span>
+            </f:if>
+            <f:if condition="{data.header}">
+                <f:render partial="Content/Header" arguments="{
                 header: data.header,
                 layout: data.header_layout,
                 positionClass: '',
                 default: settings.defaultHeaderType}"/>
-    </f:if>
-    <f:if condition="{data.bodytext}">
-        <f:format.raw>{data.bodytext}</f:format.raw>
-    </f:if>
-    <f:if condition="{data.assets}">
-        <f:for each="{data.assets}" as="file">
-            <f:render section="Image" arguments="{file: file, settings: settings}"/>
-        </f:for>
-
-    </f:if>
-
+            </f:if>
+            <f:format.raw>{data.bodytext}</f:format.raw>
+        </div>
+    </div>
 </div>
 
 
@@ -26,24 +26,24 @@
     <figure>
         <picture>
             <f:render section="Source"
-                      arguments="{breakpoint: settings.psi.breakpoints.desktop, cropVariant: 'default', file: file, width: '800'}"/>
+                      arguments="{breakpoint: settings.psi.breakpoints.desktop, cropVariant: 'default', file: file, width: '600'}"/>
             <f:render section="Source"
-                      arguments="{breakpoint: settings.psi.breakpoints.tablet, cropVariant: 'default', file: file, width: '500'}"/>
+                      arguments="{breakpoint: settings.psi.breakpoints.tablet, cropVariant: 'default', file: file, width: '400'}"/>
             <f:render section="Source"
-                      arguments="{breakpoint: settings.psi.breakpoints.mobile, cropVariant: 'default', file: file, width: '600'}"/>
+                      arguments="{breakpoint: settings.psi.breakpoints.mobile, cropVariant: 'default', file: file, width: '500'}"/>
 
             <source media="{settings.psi.breakpoints.mobile.media}" type="image/webp"
-                    srcset="{f:uri.image(image: file, width: '600', cropVariant: 'default',fileExtension: 'webp')}"/>
+                    srcset="{f:uri.image(image: file, width: '500', cropVariant: 'default',fileExtension: 'webp')}"/>
 
             <f:image image="{file}"
                      alt="{file.alternative}"
                      title="{file.title}"
-                     width="600"
+                     width="500"
                      cropVariant="default"
                      loading="{settings.media.lazyLoading}"
                      decoding="{settings.media.imageDecoding}"
                      crop="{crop}"
-                     class="textpic__image"/>
+                     class="textpic__image-file"/>
         </picture>
         <f:if condition="{file.description}">
             <figcaption>{file.description}</figcaption>
diff --git a/local_packages/psi/Resources/Public/Css/main.min.css b/local_packages/psi/Resources/Public/Css/main.min.css
index 430f46e..2deefd3 100644
--- a/local_packages/psi/Resources/Public/Css/main.min.css
+++ b/local_packages/psi/Resources/Public/Css/main.min.css
@@ -22,6 +22,161 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+.headline-center {
+  text-align: center;
+}
+
+.headline-left {
+  text-align: left;
+}
+
+.headline-right {
+  text-align: right;
+}
+
+.subheadline {
+  width: 100%;
+  display: block;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-end {
+  text-align: right;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.textpic {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 12px;
+  padding-left: 12px;
+}
+
+.textpic__container {
+  margin-right: -12px;
+  margin-left: -12px;
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 1440px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.textpic__content {
+  flex: 0 0 100%;
+  max-width: 100%;
+  padding-right: 12px;
+  padding-left: 12px;
+}
+
+.textpic__image {
+  flex: 0 0 100%;
+  max-width: 100%;
+  padding-right: 12px;
+  padding-left: 12px;
+}
+
+.textpic__image figure {
+  margin: 0;
+}
+
+.textpic__image-file {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+
+.textpic__image-right {
+  order: 2;
+}
+
+@media (min-width: 768px) {
+  .textpic {
+    flex-direction: row;
+  }
+
+  .textpic__container {
+    justify-content: center;
+    align-items: center;
+    column-gap: 8.3333333333%;
+  }
+
+  .textpic__content {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+    padding-right: 12px;
+    padding-left: 12px;
+  }
+
+  .textpic__image {
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+    padding-right: 12px;
+    padding-left: 12px;
+  }
+}
+
+.image {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 12px;
+  padding-left: 12px;
+}
+
+.image__container {
+  margin-right: -12px;
+  margin-left: -12px;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 1440px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.image__content {
+  flex: 0 0 66.6666666667%;
+  max-width: 66.6666666667%;
+  padding-right: 12px;
+  padding-left: 12px;
+}
+
+.image__content-full {
+  flex: 0 0 100%;
+  max-width: 100%;
+  padding-right: 12px;
+  padding-left: 12px;
+}
+
+.image__figure {
+  margin: 0;
+}
+
+.image__file {
+  width: 100%;
+  height: auto;
+}
+
+@media (min-width: 768px) {
+  .image {
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: 12px;
+    padding-left: 12px;
+  }
+}
+
 .frame-type-felogin_login {
   width: 100%;
   margin-right: auto;