diff --git a/.chatgpt_config.yaml b/.chatgpt_config.yaml
index 8a33774..e786a25 100644
--- a/.chatgpt_config.yaml
+++ b/.chatgpt_config.yaml
@@ -1,3 +1,4 @@
+project_name: "lena-schilling-website"
 default_prompt_blocks:
   - "basic-prompt"
   - "typo3-development"
diff --git a/packages/base/Configuration/Sets/SitePackage/page.typoscript b/packages/base/Configuration/Sets/SitePackage/page.typoscript
deleted file mode 100644
index a579f5f..0000000
--- a/packages/base/Configuration/Sets/SitePackage/page.typoscript
+++ /dev/null
@@ -1,13 +0,0 @@
-# Footer menu from a pid defined in constants: page.footerMenuPid
-lib.footerMenu = HMENU
-lib.footerMenu {
-  special = directory
-  special.value = {$page.footerMenuPid}
-  1 = TMENU
-  1 {
-    NO {
-      wrapItemAndSub = <li>|</li>
-      stdWrap.noTrimWrap = | | |
-    }
-  }
-}
diff --git a/packages/base/Configuration/Sets/SitePackage/setup.typoscript b/packages/base/Configuration/Sets/SitePackage/setup.typoscript
index 35146e7..2ed780b 100644
--- a/packages/base/Configuration/Sets/SitePackage/setup.typoscript
+++ b/packages/base/Configuration/Sets/SitePackage/setup.typoscript
@@ -6,6 +6,15 @@ plugin.tx_news {
     templateRootPaths.100 = EXT:base/Resources/Private/Extensions/News/Templates/
     partialRootPaths.100 = EXT:base/Resources/Private/Extensions/News/Partials/
   }
+
+  settings {
+    list {
+      pagination {
+        # Maximum number of pages shown in pagination
+        maxPagesToShow = 5
+      }
+    }
+  }
 }
 
 # Define footerMenu here
diff --git a/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html b/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html
new file mode 100644
index 0000000..c0d9517
--- /dev/null
+++ b/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html
@@ -0,0 +1,12 @@
+<div class="article news-list-item">
+    <f:if condition="{newsItem.media}">
+        <f:image image="{newsItem.media.0}" class="news-item-grid-image" alt="{newsItem.title}" />
+    </f:if>
+    <div class="news-item-content">
+        <f:if condition="{newsItem.firstCategory}">
+            <div class="news-item-category">{newsItem.firstCategory.title}</div>
+        </f:if>
+        <h5 class="news-item-title">{newsItem.title}</h5>
+        <f:link.page pageUid="{newsItem.link}" class="news-item-link"></f:link.page>
+    </div>
+</div>
diff --git a/packages/base/Resources/Private/Extensions/News/Partials/List/Pagination.html b/packages/base/Resources/Private/Extensions/News/Partials/List/Pagination.html
new file mode 100644
index 0000000..efe872d
--- /dev/null
+++ b/packages/base/Resources/Private/Extensions/News/Partials/List/Pagination.html
@@ -0,0 +1,45 @@
+<ul class="f3-widget-paginator">
+    <f:if condition="{pagination.previousPageNumber} && {pagination.previousPageNumber} >= {pagination.firstPageNumber}">
+        <li class="previous">
+            <a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.previousPageNumber},addQueryString:'untrusted')}" title="{f:translate(key:'pagination.previous')}">
+              <i class="ci ci-angle-left"></i>
+            </a>
+        </li>
+    </f:if>
+    <f:if condition="{pagination.previousPageNumber} && {pagination.previousPageNumber} > {pagination.firstPageNumber}">
+        <li class="first">
+            <a href="{f:uri.action(action:actionName, arguments:{currentPage: 1},addQueryString:'untrusted')}" title="{f:translate(key:'pagination.first')}">
+              {pagination.firstPageNumber}
+            </a>
+        </li>
+    </f:if>
+    <f:if condition="{pagination.previousPageNumber} && {pagination.previousPageNumber} > {pagination.firstPageNumber + 1}">
+        <li class="dots">
+            <span>...</span>
+        </li>
+    </f:if>
+    <f:for each="{pagination.allPageNumbers}" as="page">
+        <li class="{f:if(condition: '{page} == {paginator.currentPageNumber}', then:'current')}">
+            <a href="{f:uri.action(action:actionName, arguments:{currentPage: page},addQueryString:'untrusted')}">{page}</a>
+        </li>
+    </f:for>
+    <f:if condition="{pagination.nextPageNumber} && {pagination.nextPageNumber} < {pagination.lastPageNumber - 1}">
+        <li class="dots">
+            <span>...</span>
+        </li>
+    </f:if>
+    <f:if condition="{pagination.nextPageNumber} && {pagination.nextPageNumber} < {pagination.lastPageNumber}">
+        <li class="last">
+            <a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.lastPageNumber},addQueryString:'untrusted')}" title="{f:translate(key:'pagination.last')}">
+                {pagination.lastPageNumber}
+            </a>
+        </li>
+    </f:if>
+    <f:if condition="{pagination.nextPageNumber} && {pagination.nextPageNumber} <= {pagination.lastPageNumber}">
+        <li class="next">
+            <a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.nextPageNumber},addQueryString:'untrusted')}" title="{f:translate(key:'pagination.next')}">
+              <i class="ci ci-angle-right"></i>
+            </a>
+        </li>
+    </f:if>
+</ul>
diff --git a/packages/base/Resources/Private/Extensions/News/Partials/News/ItemFeatured.html b/packages/base/Resources/Private/Extensions/News/Partials/News/ItemFeatured.html
deleted file mode 100644
index 6f84e94..0000000
--- a/packages/base/Resources/Private/Extensions/News/Partials/News/ItemFeatured.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<div class="news-item-featured">
-  <f:if condition="{newsItem.media}">
-    <f:image image="{newsItem.media.0}" class="news-item-featured-image" alt="{newsItem.title}" />
-  </f:if>
-  <div class="news-item-featured-content">
-    <!-- Category and Title -->
-    <f:if condition="{newsItem.firstCategory}">
-      <div class="news-item-category">{newsItem.firstCategory.title}</div>
-    </f:if>
-    <h3 class="news-item-title">{newsItem.title}</h3>
-    <f:link.page pageUid="{newsItem.link}" class="news-item-link"> </f:link.page>
-  </div>
-</div>
diff --git a/packages/base/Resources/Private/Extensions/News/Partials/News/ItemGrid.html b/packages/base/Resources/Private/Extensions/News/Partials/News/ItemGrid.html
deleted file mode 100644
index 3f621fa..0000000
--- a/packages/base/Resources/Private/Extensions/News/Partials/News/ItemGrid.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="news-item-grid">
-  <f:if condition="{newsItem.media}">
-    <f:image image="{newsItem.media.0}" class="news-item-grid-image" alt="{newsItem.title}" />
-  </f:if>
-  <div class="news-item-grid-content">
-    <f:if condition="{newsItem.firstCategory}">
-      <div class="news-item-category">{newsItem.firstCategory.title}</div>
-    </f:if>
-    <h5 class="news-item-title">{newsItem.title}</h5>
-    <f:link.page pageUid="{newsItem.link}" class="news-item-link"> </f:link.page>
-  </div>
-</div>
diff --git a/packages/base/Resources/Private/Extensions/News/Partials/News/ItemSide.html b/packages/base/Resources/Private/Extensions/News/Partials/News/ItemSide.html
deleted file mode 100644
index f327e23..0000000
--- a/packages/base/Resources/Private/Extensions/News/Partials/News/ItemSide.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="news-item-side">
-  <f:if condition="{newsItem.media}">
-    <f:image image="{newsItem.media.0}" class="news-item-side-image" alt="{newsItem.title}" />
-  </f:if>
-  <div class="news-item-side-content">
-    <f:if condition="{newsItem.firstCategory}">
-      <div class="news-item-category">{newsItem.firstCategory.title}</div>
-    </f:if>
-    <h4 class="news-item-title">{newsItem.title}</h4>
-    <f:link.page pageUid="{newsItem.link}" class="news-item-link"> </f:link.page>
-  </div>
-</div>
diff --git a/packages/base/Resources/Private/Extensions/News/Templates/News/List.html b/packages/base/Resources/Private/Extensions/News/Templates/News/List.html
index 9e08d1c..b7def99 100644
--- a/packages/base/Resources/Private/Extensions/News/Templates/News/List.html
+++ b/packages/base/Resources/Private/Extensions/News/Templates/News/List.html
@@ -1,55 +1,65 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+	  xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
+	  data-namespace-typo3-fluid="true">
 <f:layout name="General" />
-<f:section name="content">
-  <f:if condition="{news}">
-    <f:then>
-      <div class="news-list-container">
-        <!-- First 4 items: 1 large on the left and 3 stacked on the right -->
-        <f:if condition="{news -> f:count()} > 0">
-          <div class="news-featured-wrapper">
-            <div class="news-featured-item">
-              <f:for each="{news}" as="item" iteration="iterator">
-                <f:if condition="{iterator.index} == 0">
-                  <f:then>
-                    <f:render partial="News/ItemFeatured" arguments="{newsItem: item}" />
-                  </f:then>
-                </f:if>
-              </f:for>
-            </div>
-            <div class="news-side-items">
-              <f:for each="{news}" as="item" iteration="iterator">
-                <f:if condition="{iterator.index} > 0 && {iterator.index} < 4">
-                  <f:then>
-                    <f:render partial="News/ItemSide" arguments="{newsItem: item}" />
-                  </f:then>
-                </f:if>
-              </f:for>
-            </div>
-          </div>
-        </f:if>
+<!--
+	=====================
+		Templates/News/List.html
+-->
 
-        <!-- Remaining items in a responsive grid of 3 columns -->
-        <f:if condition="{news -> f:count()} > 4">
-          <div class="news-list-grid">
-            <f:for each="{news}" as="item" iteration="iterator">
-              <f:if condition="{iterator.index} >= 4">
-                <f:then>
-                  <f:render partial="News/ItemGrid" arguments="{newsItem: item}" />
-                </f:then>
-              </f:if>
-            </f:for>
-          </div>
-        </f:if>
+<f:section name="Header" />
 
-        <!-- "Alle anzeigen" button if listPid is set -->
-        <f:if condition="{settings.listPid}">
-          <div class="news-show-all">
-            <f:link.page pageUid="{settings.listPid}" class="btn-show-all">Alle anzeigen</f:link.page>
-          </div>
+<f:section name="news-item">
+  <f:switch expression="{settings.templateLayout}">
+    <f:defaultCase>
+        <f:if condition="{iterator.isFirst}">
+            <f:then>
+                <f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
+            </f:then>
+            <f:else>
+                <f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
+            </f:else>
         </f:if>
-      </div>
-    </f:then>
-    <f:else>
-      <p>No news available.</p>
-    </f:else>
-  </f:if>
+    </f:defaultCase>
+  </f:switch>
 </f:section>
+
+<f:section name="content">
+  <div class="header">
+    <div class="title">
+      <h2>{contentObjectData.header}</h2>
+    </div>
+    <f:if condition="{settings.listPid}">
+        <f:link.page title="Alle Artikel" pageUid="{settings.listPid}" class="btn">Alle Artikel</f:link.page>
+    </f:if>
+  </div>
+	<!--TYPO3SEARCH_end-->
+	<f:if condition="{news}">
+		<f:then>
+      <div class="news-list-view news-list-{settings.templateLayout}" id="news-container-{contentObjectData.uid}">
+          <f:if condition="{settings.hidePagination}">
+            <f:then>
+              <f:for each="{news}" as="newsItem" iteration="iterator">
+                  <f:render section="news-item" arguments="{_all}" />
+              </f:for>
+            </f:then>
+            <f:else>
+              <f:for each="{pagination.paginator.paginatedItems}" as="newsItem" iteration="iterator">
+                  <f:render section="news-item" arguments="{_all}" />
+              </f:for>
+              <f:if condition="{settings.list.paginate.insertBelow}">
+                  <f:render partial="List/Pagination" arguments="{pagination: pagination.pagination, paginator: pagination.paginator}" />
+              </f:if>
+            </f:else>
+          </f:if>
+        </div>
+		</f:then>
+		<f:else>
+			<div class="no-news-found">
+				<f:translate key="list_nonewsfound" />
+			</div>
+		</f:else>
+	</f:if>
+	<!--TYPO3SEARCH_begin-->
+</f:section>
+</html>
diff --git a/packages/base/Resources/Public/Scss/abstracts/_mixins.scss b/packages/base/Resources/Public/Scss/abstracts/_mixins.scss
index 31617f1..c3dc2d9 100644
--- a/packages/base/Resources/Public/Scss/abstracts/_mixins.scss
+++ b/packages/base/Resources/Public/Scss/abstracts/_mixins.scss
@@ -8,3 +8,9 @@
     @content;
   }
 }
+
+@mixin media-breakpoint-up($breakpoint) {
+  @media (min-width: $breakpoint) {
+    @content;
+  }
+}
diff --git a/packages/base/Resources/Public/Scss/abstracts/_variables.scss b/packages/base/Resources/Public/Scss/abstracts/_variables.scss
index c7fd041..129217d 100644
--- a/packages/base/Resources/Public/Scss/abstracts/_variables.scss
+++ b/packages/base/Resources/Public/Scss/abstracts/_variables.scss
@@ -9,6 +9,10 @@ $breakpoint-sm: 576px;
 $breakpoint-md: 768px;
 $breakpoint-lg: 992px;
 $breakpoint-xl: 1200px;
+$sm: 576px;
+$md: 768px;
+$lg: 992px;
+$xl: 1200px;
 // variables.scss
 
 // Breakpoint Variables
diff --git a/packages/base/Resources/Public/Scss/components/_news.scss b/packages/base/Resources/Public/Scss/components/_news.scss
index 6eac846..8c8e50f 100644
--- a/packages/base/Resources/Public/Scss/components/_news.scss
+++ b/packages/base/Resources/Public/Scss/components/_news.scss
@@ -1,144 +1,87 @@
-.news-list-container {
-  margin: 2rem 0;
-}
+// .frame-type-news_newsliststicky {
+//   .header {
+//     display:flex;
+//     margin-bottom: 2.5rem;
+//
+//     .title {
+//       flex: 1;
+//       align-content: center;
+//
+//       h2 {
+//         margin: 0;
+//       }
+//     }
+//   }
+// }
 
-/* Mobile-first: single column by default */
-/* All items in a single column */
-.news-featured-wrapper,
-.news-side-items,
-.news-list-grid {
+.news-list-view {
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: repeat(6, 1fr);
   gap: 1rem;
-}
+  grid-auto-rows: auto;
 
-.news-item-featured,
-.news-item-side,
-.news-item-grid {
-  position: relative;
-  border-radius: 0.5rem;
-  overflow: hidden;
-}
-
-.news-item-featured-image,
-.news-item-side-image,
-.news-item-grid-image {
-  width: 100%;
-  height: auto;
-  display: block;
-}
-
-.news-item-featured-content,
-.news-item-side-content,
-.news-item-grid-content {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 1rem;
-  background: #215A2A;
-  color: #fff;
-}
-
-.news-item-category {
-  font-size: 0.9rem;
-  opacity: 0.9;
-}
-
-.news-item-title {
-  font-size: 1.2rem;
-  font-weight: bold;
-  margin-top: 0.5rem;
-}
-
-.news-item-link {
-  position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-}
-
-.news-show-all {
-  margin-top: 2rem;
-  text-align: center;
-}
-
-.btn-show-all {
-  display: inline-block;
-  background: #6B8E23;
-  color: #fff;
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
-  text-decoration: none;
-  font-weight: bold;
-}
-
-/* Adjust the title size for side and grid items */
-.news-item-side-content .news-item-title,
-.news-item-grid-content .news-item-title {
-  font-size: 1rem;
-}
-
-@media (min-width: 768px) and (max-width: 991px) {
-  /* On medium screens: switch to a 3-column grid for the first four items.
-     First four items are equal size and placed in a 3x grid. */
-  .news-featured-wrapper {
-    grid-template-columns: repeat(3, 1fr);
+  .news-list-item {
+      grid-column: span 6;
+      max-width: 100%;
   }
 
-  /* For the first four items, we treat them all equally:
-     The first item (featured) plus next three (side items) fill a 3-column grid equally. */
-  .news-side-items {
-    display: contents; /* Merge side items into the same grid */
+  @media (max-width: $breakpoint-md) {
+    .news-list-item {
+      grid-column: span 2;
+    }
   }
 
-  /* Additional items still in a 3-column grid */
-  .news-list-grid {
-    grid-template-columns: repeat(3, 1fr);
+  @media (min-width: $breakpoint-xl) {
+    .news-list-item {
+      grid-column: span 2;
+
+      &:first-of-type {
+          grid-column: 1 / span 4;
+          grid-row: span 2;
+      }
+      &:nth-of-type(2) {
+        grid-column: 5 / span 2;
+        grid-row: 1;
+      }
+      &:nth-of-type(3) {
+        grid-column: 5 / span 2;
+        grid-row: 2;
+      }
+
+    }
+  }
+
+  .f3-widget-paginator {
+      grid-column: span 6;
   }
 }
 
-@media (min-width: 992px) {
-  /* On wide screens: special layout:
-     - First item bigger: takes 2 columns and 3 rows
-     - Next 3 items stacked in one column (3 rows) to the right of the big one
-     
-     We'll create a 3-column grid for the first 4 items:
-     The first item (featured) will occupy the first two columns and span 3 rows.
-     The next 3 side items will each occupy the third column in their own row.
-  */
-
-  .news-featured-wrapper {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-auto-rows: auto;
-    gap: 1rem;
+.news-list-item {
+  .readmore {
+    font-weight: 700;
   }
 
-  /* The featured item (index 0) spans 2 columns and 3 rows */
-  .news-featured-item {
-    grid-column: 1 / span 2;
-    grid-row: 1 / span 3;
+  img {
+    width: 100%;
+    height: auto;
   }
 
-  /* Side items should appear in the third column, one per row */
-  .news-side-items {
-    display: contents;
-  }
+  a {
+    display: flex;
+    flex-direction: column;
 
-  .news-side-items .news-item-side:nth-of-type(1) {
-    grid-column: 3;
-    grid-row: 1;
-  }
-  .news-side-items .news-item-side:nth-of-type(2) {
-    grid-column: 3;
-    grid-row: 2;
-  }
-  .news-side-items .news-item-side:nth-of-type(3) {
-    grid-column: 3;
-    grid-row: 3;
-  }
+    .body {
+      position: relative;
+      padding: .5rem;
+    }
 
-  /* Additional items still in a 3-column grid below the first four */
-  .news-list-grid {
-    grid-template-columns: repeat(3, 1fr);
+    time {
+      padding-left: .6rem;
+      color: var(--bs-gray-900);
+    }
+
+    .readmore {
+      color: var(--bs-primary);
+    }
   }
 }