diff --git a/.chatgpt_config.yaml b/.chatgpt_config.yaml
index e786a25..569641c 100644
--- a/.chatgpt_config.yaml
+++ b/.chatgpt_config.yaml
@@ -2,5 +2,6 @@ project_name: "lena-schilling-website"
 default_prompt_blocks:
   - "basic-prompt"
   - "typo3-development"
-directories:
-  - "packages"
+initial_files:
+  - composer.json
+  - package.json
diff --git a/packages/base/Configuration/Sets/SitePackage/page.tsconfig b/packages/base/Configuration/Sets/SitePackage/page.tsconfig
index f4d7048..21a0a4a 100644
--- a/packages/base/Configuration/Sets/SitePackage/page.tsconfig
+++ b/packages/base/Configuration/Sets/SitePackage/page.tsconfig
@@ -8,14 +8,10 @@ RTE {
 
 TCEFORM {
     pages {
-
     }
     tt_content {
-
     }
 }
 
 TCEMAIN {
-
 }
-
diff --git a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
index 8e4efe8..a219a4b 100644
--- a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
@@ -7,7 +7,6 @@
   <f:asset.css identifier="CBHero" href="{cb:assetPath()}/frontend.css" />
 
   <div class="hero-inner">
-    <!-- Inline style with f:uri.resource to ensure correct path -->
     <div class="hero">
       <h2 class="hero-subheader">{data.subheader}</h2>
       <h1 class="hero-title">{data.header}</h1>
@@ -15,13 +14,30 @@
         <f:format.html>{data.bodytext}</f:format.html>
       </div>
       <div class="hero-social-icons">
-            <a href="https://instagram.com" class="social-icon"><i class="ci ci-instagram"></i></a>
-            <a href="https://tiktok.com" class="social-icon"><i class="ci ci-tiktok"></i></a>
+        <a href="https://instagram.com" class="social-icon"><i class="ci ci-instagram"></i></a>
+        <a href="https://tiktok.com" class="social-icon"><i class="ci ci-tiktok"></i></a>
       </div>
       <div class="hero-image-wrapper">
         <f:if condition="{data.image}">
           <f:then>
-            <f:image image="{data.image.0}" alt="Hero Image" class="hero-image" />
+            <picture>
+              <source
+                srcset="
+                  {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
+                  {f:uri.image(image:data.image.0, width:'600c', cropVariant:'default')} 600w,
+                  {f:uri.image(image:data.image.0, width:'430c', cropVariant:'default')} 430w"
+                sizes="(max-width: 320px) 80vw,
+                       (max-width: 768px) 80vw,
+                       430px" />
+              <f:image
+                image="{data.image.0}"
+                treatIdAsReference="1"
+                cropVariant="default"
+                width="430c"
+                alt="Hero Image"
+                loading="lazy"
+                class="hero-image" />
+            </picture>
           </f:then>
           <f:else>
             <p>No image available</p>
diff --git a/packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css b/packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css
index ca9388e..67399c3 100644
--- a/packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css
+++ b/packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css
@@ -2,7 +2,6 @@
   margin: 2rem 0;
 }
 
-/* Mobile-first: column layout by default */
 .textimage-container {
   display: flex;
   flex-direction: column;
@@ -13,32 +12,48 @@
   width: 100%;
 }
 
-.textimage-header {
-  font-size: 1.5rem;
-  font-weight: bold;
-  margin-bottom: 1rem;
-}
-
 .textimage-text {
   font-size: 1rem;
   line-height: 1.5;
 }
 
 .textimage-image-wrapper {
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.textimage-picture {
+  display: block;
+  max-width: 100%;
+}
+
 .textimage-image {
   max-width: 100%;
   height: auto;
   border-radius: 0.5rem;
+  display: block;
 }
 
-/* Image positions: 25 = left, 26 = right
-   On larger screens, adjust the layout */
+/* Image positions: 25 = left, 26 = right */
+.textimage-container.image-pos-25 {
+  flex-direction: column;
+}
+
+.textimage-container.image-pos-26 {
+  flex-direction: column;
+}
+
+/* Size classes apply at all viewports */
+.textimage-image-wrapper.size-25 .textimage-picture {
+  max-width: 300px;
+}
+
+.textimage-image-wrapper.size-50 .textimage-picture {
+  max-width: 600px;
+}
+
+/* On larger screens, arrange horizontally for image position settings */
 @media (min-width: 768px) {
   .textimage-container.image-pos-25 {
     flex-direction: row;
@@ -48,8 +63,7 @@
     flex-direction: row-reverse;
   }
 
-  .textimage-wrapper,
-  .textimage-image-wrapper {
-    flex: 1 1 50%;
+  .textimage-wrapper {
+    flex: 1;
   }
 }
diff --git a/packages/base/ContentBlocks/ContentElements/textimage/config.yaml b/packages/base/ContentBlocks/ContentElements/textimage/config.yaml
index 6eae087..0406aea 100644
--- a/packages/base/ContentBlocks/ContentElements/textimage/config.yaml
+++ b/packages/base/ContentBlocks/ContentElements/textimage/config.yaml
@@ -1,11 +1,12 @@
 name: cloonar/textimage
 typeName: cloonar_textimage
 group: default
-prefixFields: true
-prefixType: full
+prefixFields: false
 fields:
   - identifier: header
     useExistingField: true
+  - identifier: subheader
+    useExistingField: true
   - identifier: bodytext
     type: Textarea
     enableRichtext: true
@@ -17,3 +18,12 @@ fields:
     useExistingField: true
   - identifier: imageorient
     useExistingField: true
+  - identifier: imagesize
+    type: Select
+    renderType: selectSingle
+    default: 2
+    items:
+      - label: 25%
+        value: 1
+      - label: 50%
+        value: 2
diff --git a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
index 93be9fb..9af4553 100644
--- a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
@@ -1,14 +1,39 @@
 <f:layout name="Default" />
 
-<f:section name="Header" />
+<f:section name="Header"></f:section>
 <f:section name="Main">
   <f:asset.css identifier="CBTextImage" href="{cb:assetPath()}/frontend.css" />
 
+  <!-- Determine size class based on imagesize field -->
+  <f:variable name="sizeClass" value="" />
+  <f:if condition="{data.imagesize} == 1">
+    <f:then><f:variable name="sizeClass" value="size-25" /></f:then>
+  </f:if>
+  <f:if condition="{data.imagesize} == 2">
+    <f:then><f:variable name="sizeClass" value="size-50" /></f:then>
+  </f:if>
+
   <div class="textimage-container image-pos-{data.imageorient}">
-    <div class="textimage-image-wrapper">
+    <div class="textimage-image-wrapper {sizeClass}">
       <f:if condition="{data.image}">
         <f:then>
-          <f:image image="{data.image.0}" alt="{data.header}" class="textimage-image" />
+          <picture class="textimage-picture">
+            <source
+              srcset="
+                {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
+                {f:uri.image(image:data.image.0, width:'768c', cropVariant:'default')} 768w,
+                {f:uri.image(image:data.image.0, width:'1024c', cropVariant:'default')} 1024w"
+              sizes="(max-width: 320px) 90vw,
+                     (max-width: 768px) 600px,
+                     600px" />
+            <f:image
+              image="{data.image.0}"
+              treatIdAsReference="1"
+              cropVariant="default"
+              alt="{data.header}"
+              class="textimage-image"
+            />
+          </picture>
         </f:then>
         <f:else>
           <p>No image available</p>
@@ -18,6 +43,7 @@
     <div class="textimage-wrapper">
       <f:if condition="{data.header}">
         <h2 class="textimage-header">{data.header}</h2>
+        <h3 class="textimage-subheader">{data.subheader}</h3>
       </f:if>
       <f:if condition="{data.bodytext}">
         <div class="textimage-text">
diff --git a/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html b/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html
index b8df56a..72d0bdc 100644
--- a/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html
+++ b/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html
@@ -1,7 +1,25 @@
 <div class="news-list-item {f:if(condition: '{big}', then: ' news-list-item-big')}">
     <f:link.page pageUid="{settings.detailPid}" class="news-item-link" additionalParams="{tx_news_pi1: {news: newsItem.uid, action: 'detail', controller: 'News'}}">
         <f:if condition="{newsItem.media}">
-            <f:image image="{newsItem.media.0}" class="news-item-grid-image" alt="{newsItem.title}" />
+            <f:then>
+              <picture>
+                <source 
+                  srcset="
+                    {f:uri.image(image:newsItem.media.0, width:'320c', cropVariant:'default')} 320w,
+                    {f:uri.image(image:newsItem.media.0, width:'768c', cropVariant:'default')} 768w,
+                    {f:uri.image(image:newsItem.media.0, width:'1024c', cropVariant:'default')} 1024w"
+                  sizes="(max-width: 320px) 100vw,
+                         (max-width: 768px) 50vw,
+                         400px" />
+                <f:image 
+                  image="{newsItem.media.0}" 
+                  treatIdAsReference="1" 
+                  cropVariant="default"
+                  width="1024c"
+                  alt="{newsItem.title}" 
+                  class="news-item-grid-image" />
+              </picture>
+            </f:then>
         </f:if>
         <div class="news-item-content">
             <f:if condition="{newsItem.firstCategory}">
diff --git a/packages/base/Resources/Private/PageView/Layouts/Default.html b/packages/base/Resources/Private/PageView/Layouts/Default.html
index 498f28c..a5e474b 100644
--- a/packages/base/Resources/Private/PageView/Layouts/Default.html
+++ b/packages/base/Resources/Private/PageView/Layouts/Default.html
@@ -9,25 +9,26 @@
 </main>
 
 <footer class="site-footer">
-  <div class="site-footer__top">
-    <div class="container site-footer__grid">
-      <div class="site-footer__left">
-        <f:cObject typoscriptObjectPath="lib.dynamicContentSlide" data="{pageUid: '{data.uid}', colPos: '90'}" />
-      </div>
-      <div class="site-footer__right">
-        <f:cObject typoscriptObjectPath="lib.dynamicContentSlide" data="{pageUid: '{data.uid}', colPos: '91'}" />
-      </div>
-    </div>
-  </div>
+    <div class="container">
+        <div class="site-footer__top">
+            <div class="site-footer__grid">
+                <div class="site-footer__left">
+                    <f:cObject typoscriptObjectPath="lib.dynamicContentSlide" data="{pageUid: '{data.uid}', colPos: '90'}" />
+                </div>
+                <div class="site-footer__right">
+                    <f:cObject typoscriptObjectPath="lib.dynamicContentSlide" data="{pageUid: '{data.uid}', colPos: '91'}" />
+                </div>
+            </div>
+        </div>
 
-  <hr class="site-footer__divider" />
+        <hr class="site-footer__divider" />
 
-  <div class="site-footer__bottom">
-    <div class="container site-footer__bottom-grid">
-      <ul class="site-footer__legal">
-        <f:cObject typoscriptObjectPath="lib.footerMenu" />
-      </ul>
-      <p class="site-footer__copyright">© All Right Reserved</p>
-    </div>
-  </div>
+        <div class="site-footer__bottom">
+            <div class="site-footer__bottom-grid">
+                <ul class="site-footer__legal">
+                    <f:cObject typoscriptObjectPath="lib.footerMenu" />
+                </ul>
+                <p class="site-footer__copyright">© All Right Reserved</p>
+            </div>
+        </div>
 </footer>
diff --git a/packages/base/Resources/Public/Scss/abstracts/_fonts.scss b/packages/base/Resources/Public/Scss/abstracts/_fonts.scss
index 2955816..d78fa87 100644
--- a/packages/base/Resources/Public/Scss/abstracts/_fonts.scss
+++ b/packages/base/Resources/Public/Scss/abstracts/_fonts.scss
@@ -40,6 +40,7 @@ body {
 // Use Hajime Sans for headlines
 h1, h2, h3 {
   font-family: 'Hajime Sans', sans-serif;
+  color: var(--bs-primary);
   font-weight: 400;
 }
 
diff --git a/packages/base/Resources/Public/Scss/abstracts/_variables.scss b/packages/base/Resources/Public/Scss/abstracts/_variables.scss
index fea4340..4e8f74c 100644
--- a/packages/base/Resources/Public/Scss/abstracts/_variables.scss
+++ b/packages/base/Resources/Public/Scss/abstracts/_variables.scss
@@ -25,7 +25,9 @@ $xl: 1200px;
 
   --bs-primary: #233600;
   --bs-yellow: #F5AE07;
+  --bs-light-green: #F4F6EC;
   --cl-primary: #233600;
+
 }
 
 // Additional global variables can be added here
diff --git a/packages/base/Resources/Public/Scss/base/_global.scss b/packages/base/Resources/Public/Scss/base/_global.scss
index 9b09102..63af864 100644
--- a/packages/base/Resources/Public/Scss/base/_global.scss
+++ b/packages/base/Resources/Public/Scss/base/_global.scss
@@ -1,3 +1,15 @@
 body {
   line-height: 1.5;
 }
+
+a[href^="tel:"]::before {
+  @extend .ci;
+  @extend .ci-phone;
+  margin-right: 0.5em;
+}
+
+a[href^="mailto:"]::before {
+  @extend .ci;
+  @extend .ci-email;
+  margin-right: 0.5em;
+}
diff --git a/packages/base/Resources/Public/Scss/components/_footer.scss b/packages/base/Resources/Public/Scss/components/_footer.scss
index 8dd89a4..94cb020 100644
--- a/packages/base/Resources/Public/Scss/components/_footer.scss
+++ b/packages/base/Resources/Public/Scss/components/_footer.scss
@@ -1,8 +1,11 @@
 .site-footer {
-  background: #f8f8ea;
-  color: #4b4b4b;
   font-size: 0.9rem;
-  padding: 2rem 0;
+
+  .container {
+    background: var(--bs-light-green);
+    border-top-left-radius: 2rem;
+    border-top-right-radius: 2rem;
+  }
 
   &__top {
     padding-bottom: 2rem;
diff --git a/packages/base/Resources/Public/Scss/components/_navigation.scss b/packages/base/Resources/Public/Scss/components/_navigation.scss
index bf1b52d..ebd5237 100644
--- a/packages/base/Resources/Public/Scss/components/_navigation.scss
+++ b/packages/base/Resources/Public/Scss/components/_navigation.scss
@@ -6,17 +6,17 @@ $nav-height: 60px; // Adjust as needed
 // Ensure this path is correct for your TYPO3 installation.
 // Typically: /typo3conf/ext/<extension_key>/Resources/Public/Images/...
 
-header {
+body > header {
   width: 100%;
   height: $nav-height;
   line-height: $nav-height;
-  background: url('../Images/background.jpg') repeat;
   position: sticky;
   top: 0;
   z-index: 1000;
 }
 
 .main-nav {
+  background: url('../Images/background.jpg') repeat;
 
   .container {
     display: flex;
diff --git a/packages/base/Resources/Public/Scss/components/_news.scss b/packages/base/Resources/Public/Scss/components/_news.scss
index 5fbf2b0..c9b785e 100644
--- a/packages/base/Resources/Public/Scss/components/_news.scss
+++ b/packages/base/Resources/Public/Scss/components/_news.scss
@@ -99,12 +99,32 @@
       color: #fff;
       border-top-right-radius: 1rem;
       padding: 1rem;
+      padding-right: 3rem;
+
+      &:after {
+        position: absolute;
+        right: 1.625rem;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 1.5rem;
+        display: block;
+        content: ' ';
+        width: 1em;
+        height: 1em;
+        mask-size: contain;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        background-color: currentColor;
+        vertical-align: middle;
+        mask-image: url(../Icons/angle-right.svg);
+      }
     }
 
     h3 {
       font-family: 'Inter', sans-serif;
       font-size: 1.25rem;
       font-weight: 500;
+      color: #fff;
       margin: 0;
     }
   }
@@ -114,6 +134,11 @@
   a .news-item-content {
     @media (min-width: $breakpoint-md) {
       padding: 2.875rem;
+      padding-right: 5rem;
+
+      &:after {
+        right: 3.5rem;
+      }
     }
   }
 }