diff --git a/api/collections/fields/row.yml b/api/collections/fields/row.yml
index fb44131..fd90d6e 100644
--- a/api/collections/fields/row.yml
+++ b/api/collections/fields/row.yml
@@ -4,6 +4,7 @@ meta:
     label: Zeile
     metaElements:
         - topTitle
+        - topTitleRed
         - title
         - subTitle
         - pageTitle
@@ -14,6 +15,12 @@ subFields:
           label: Oberer Titel
           helperText: "Dieser Titel wird in der Zeile oben angezeigt."
 
+    - name: topTitleRed
+      type: boolean
+      meta:
+          label: Oberer Titel rot
+          helperText: "Dieser Titel wird in der Zeile oben rot angezeigt."
+
     - name: title
       type: string
       meta:
diff --git a/frontend/media/arrow-l-fat.svg b/frontend/media/arrow-l-fat.svg
new file mode 100644
index 0000000..676ffcd
--- /dev/null
+++ b/frontend/media/arrow-l-fat.svg
@@ -0,0 +1,3 @@
+<svg width="75" height="75" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M88 50c0 1.38-1.12 2.5-2.5 2.5H20.608l25.644 25.218a2.502 2.502 0 1 1-3.504 3.564L12.772 50.805a2.49 2.49 0 0 1-.758-2.07c.064-.6.342-1.16.786-1.57L42.748 16.718a2.5 2.5 0 1 1 3.504 3.564L20.608 47.5H85.5c1.38 0 2.5 1.12 2.5 2.5z" fill="#000" stroke="#000" stroke-width="10"/>
+</svg>
diff --git a/frontend/spa.html b/frontend/spa.html
index a3dd41b..020b262 100644
--- a/frontend/spa.html
+++ b/frontend/spa.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="de">
     <head>
         <meta charset="UTF-8" />
@@ -7,7 +7,11 @@
         <title>Fontis</title>
         <base href="/" />
         <link rel="stylesheet" href="/dist/index.css?t=__TIMESTAMP__" />
-
+        <script
+            type="text/javascript"
+            src="https://unpkg.com/external-svg-loader@latest/svg-loader.min.js"
+            async
+        ></script>
         <!--HEAD-->
 
         <!--PRELOAD-->
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index a6d9b4a..8a6b203 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -57,7 +57,6 @@
 
 <main class="">
     <Header bind:active="{activeMenu}" />
-
     <div class="content-container" id="siteContainer" data-url="{url}">
         <Router url="{url}">
             <Route path="/">
@@ -84,11 +83,16 @@
 <style lang="less" global>
     @import "./lib/assets/css/main.less";
     @import "./lib/assets/css/base.less";
-    @import "swiper/swiper.less";
-    @import "swiper/modules/effect-fade/effect-fade.less";
-    @import "swiper/modules/navigation/navigation.less";
-    @import "swiper/modules/pagination/pagination.less";
+    @import "swiper/swiper-bundle.min.css";
+    @import "swiper/modules/effect-fade/effect-fade";
+    @import "swiper/modules/navigation/navigation";
+    @import "swiper/modules/pagination/pagination";
 
+    .HP {
+        h2 {
+            font-size: 3.2rem !important;
+        }
+    }
     .swiper-button-prev,
     .swiper-button-next {
         color: @font-color;
diff --git a/frontend/src/lib/assets/css/base.less b/frontend/src/lib/assets/css/base.less
index 10d723b..6890e97 100644
--- a/frontend/src/lib/assets/css/base.less
+++ b/frontend/src/lib/assets/css/base.less
@@ -138,7 +138,7 @@ swiper-slide {
         .underline {
             position: absolute;
             z-index: 10000;
-            left: 0;
+            left: 0px;
             bottom: 0px;
             background: #000000;
             height: 10px;
diff --git a/frontend/src/lib/components/Footer.svelte b/frontend/src/lib/components/Footer.svelte
index e22d90b..272ef0e 100644
--- a/frontend/src/lib/components/Footer.svelte
+++ b/frontend/src/lib/components/Footer.svelte
@@ -2,8 +2,10 @@
     import { navigate } from "svelte-routing/src/history"
     import { navigation, pages, rerender } from "../store"
     let nextpage = $navigation?.pages[0]
+    $: nextpage = $navigation?.pages[0]
     function getNextPage(pages) {
-        if (location.pathname == "/") return
+        if (location.pathname == "/" || location.pathname == "") return
+      
         let currPage = pages.find(
             (page) => Object.values($pages)?.find((o) => o.id == page.page)?.path == location.pathname
         )
@@ -48,7 +50,8 @@
         </div>
         <div class="contact">
             <button>0711 644 700-0</button>
-            <button>info@fontis.de</button>
+
+            <button> <a href="mailto:info@fontis.de" class="button"> info@fontis.de</a></button>
         </div>
     </div>
 </div>
@@ -100,6 +103,10 @@
             }
             button {
                 color: @font-color-secondary;
+                a {
+                    color: @font-color-secondary;
+                    font-weight: normal;
+                }
             }
             @media @tablet {
                 padding: 80px 40px;
diff --git a/frontend/src/lib/components/Menu/Menu.svelte b/frontend/src/lib/components/Menu/Menu.svelte
index a124a3c..5aeaf37 100644
--- a/frontend/src/lib/components/Menu/Menu.svelte
+++ b/frontend/src/lib/components/Menu/Menu.svelte
@@ -34,7 +34,9 @@
                             </div>
                             <div class="lower">
                                 <button>0711&nbsp;644&nbsp;700-0</button>
-                                <button>info@fontis.de</button>
+                                <button>
+                                    <a href="mailto:info@fontis.de" class="button"> info@fontis.de </a>
+                                </button>
                             </div>
                         </div>
                     </div>
@@ -137,6 +139,10 @@
                             }
                             button {
                                 color: @font-color-secondary;
+                                a {
+                                    color: @font-color-secondary;
+                                    font-weight: normal;
+                                }
                             }
                             @media @desktop {
                                 .lower {
diff --git a/frontend/src/lib/components/Pagebuilder/Homepage.svelte b/frontend/src/lib/components/Pagebuilder/Homepage.svelte
index c07d416..9b0f567 100644
--- a/frontend/src/lib/components/Pagebuilder/Homepage.svelte
+++ b/frontend/src/lib/components/Pagebuilder/Homepage.svelte
@@ -102,10 +102,16 @@
     .container {
         padding: 20px 0px 150px 0px;
         min-height: 100vh;
+
         display: flex;
         align-items: center;
+        justify-content: center;
+        swiper-container {
+            max-width: 1600px;
+        }
         .inner-container {
             display: flex;
+
             flex-direction: column;
             justify-content: center;
             align-items: center;
@@ -123,7 +129,7 @@
                 }
 
                 h2 {
-                    font-size: 1.2rem;
+                    font-size: 1.2rem !important;
                     line-height: 1;
                 }
             }
diff --git a/frontend/src/lib/components/Pagebuilder/Pagebuilder.svelte b/frontend/src/lib/components/Pagebuilder/Pagebuilder.svelte
index 0420a8c..4b463ff 100644
--- a/frontend/src/lib/components/Pagebuilder/Pagebuilder.svelte
+++ b/frontend/src/lib/components/Pagebuilder/Pagebuilder.svelte
@@ -15,6 +15,7 @@
     import TopDown from "../widgets/topDown.svelte"
     import { rerender } from "../../store"
     import IconCycleCircle from "../widgets/iconCycleCircle.svelte"
+    import IconCycleBox from "../widgets/iconCycleBox.svelte"
 
     export let row: Row
     export let pageId: string
@@ -36,7 +37,7 @@
 
 {#if Object.keys(row).length}
     {#if row.topTitle}
-        <h3>{row.topTitle}</h3>
+        <h3 class:red="{row.topTitleRed}">{row.topTitle}</h3>
     {/if}
     {#if nestedPath}
         <h3
@@ -59,9 +60,9 @@
     {#if row.subTitle}
         <h3>{row.subTitle}</h3>
     {/if}
-    <div class="row">
+    <div class="row" class:dominant="{row.columns.some((col) => col.contentType == 'iconCycleCircle')}">
         {#each row?.columns as col}
-            <div class="col">
+            <div class="col" class:dominant="{col.contentType == 'iconCycleCircle'}">
                 {#if col?.contentType == "text"}
                     <Text text="{col?.text}" />
                 {:else if col?.contentType == "textLink"}
@@ -90,6 +91,8 @@
                     <Persons col="{col}" pageId="{pageId}" />
                 {:else if col.contentType == "iconCycleCircle"}
                     <IconCycleCircle col="{col}" pageId="{pageId}" />
+                {:else}
+                    <IconCycleBox col="{col}" pageId="{pageId}" />
                 {/if}
             </div>
         {/each}
@@ -98,10 +101,13 @@
 
 <style lang="less">
     @import "../../assets/css/main.less";
+    .red {
+        color: #fa00ff !important;
+    }
     @media @tablet {
         h3 {
             font-size: 1.2rem;
-            padding-bottom: 20px;
+
             display: flex;
             align-items: center;
             gap: 10px;
@@ -111,25 +117,34 @@
             }
         }
         h2 {
-            font-size: 3.2rem;
+            font-size: 2.3rem;
         }
         h1 {
             font-size: 5rem;
         }
     }
-    h1,
-    h2 {
-        padding-bottom: 40px;
-    }
 
     .row {
+        padding-top: 40px;
         display: flex;
         align-items: flex-start;
         flex-wrap: wrap;
+        &.dominant {
+            @media (max-width: 1024px) {
+                flex-direction: row-reverse;
+            }
+        }
         @media (max-width: 640px) {
             flex-direction: column-reverse;
         }
         & > .col {
+            &.dominant {
+                @media (max-width: 1024px) {
+                    min-width: 80% !important;
+                }
+                flex: 5 !important;
+            }
+
             min-width: 40% !important;
 
             @media @desktop {
diff --git a/frontend/src/lib/components/Pagebuilder/Rows.svelte b/frontend/src/lib/components/Pagebuilder/Rows.svelte
index 6a3130a..f0b0f9c 100644
--- a/frontend/src/lib/components/Pagebuilder/Rows.svelte
+++ b/frontend/src/lib/components/Pagebuilder/Rows.svelte
@@ -19,7 +19,7 @@
     }
 </script>
 
-<div class="rows">
+<div class="rows" class:HP="{path == '/'}">
     {#if page}
         {#if path == "/"}<Homepage />{/if}
         {#each page.rows as row}
@@ -46,9 +46,10 @@
         justify-content: flex-start;
         width: 100%;
         position: relative;
-
+        
         overflow-x: hidden;
         gap: 10px;
+       
         & > .row {
             padding: 10px;
             padding-top: 80px;
diff --git a/frontend/src/lib/components/widgets/iconCycleBox.svelte b/frontend/src/lib/components/widgets/iconCycleBox.svelte
new file mode 100644
index 0000000..2dbdf90
--- /dev/null
+++ b/frontend/src/lib/components/widgets/iconCycleBox.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { apiBaseURL } from "../../../config"
+    export let col: Column
+    export let pageId: string
+
+    let active = -1
+    setInterval(() => {
+        active += 1
+        if (active == col.iconCycleSquare.boxes.length) active = 0
+    }, 1000)
+</script>
+
+<div class="iconCycleSquares">
+    {#each col.iconCycleSquare.boxes as box, i}
+        <div class="box" id="box{i}" class:active="{i == active}">
+            <div class="content">
+                <div class="icon">
+                    <svg stroke="{i == active ? 'black' : 'white'}" data-src="{apiBaseURL}page/{pageId}/{box.icon?.src}"
+                    ></svg>
+                </div>
+                <div class="text">
+                    {box.text}
+                </div>
+            </div>
+        </div>
+    {/each}
+</div>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+    .iconCycleSquares {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        @media @tablet {
+            gap: 20px;
+        }
+        .box {
+            border: 4px solid @bg-color-secondary;
+            background-color: @bg-color-secondary;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: @font-color-secondary;
+            &.active {
+                background-color: @bg-color;
+                color: @font-color;
+            }
+            width: 150px;
+            height: 150px;
+            .content {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                .text {
+                    width: 100%;
+                    display: flex;
+                    justify-content: center;
+                    text-align: center;
+                }
+            }
+            @media @tablet {
+                width: 260px;
+                height: 260px;
+            }
+        }
+    }
+</style>
diff --git a/frontend/src/lib/components/widgets/iconCycleCircle.svelte b/frontend/src/lib/components/widgets/iconCycleCircle.svelte
index 6e6f903..f4b94ec 100644
--- a/frontend/src/lib/components/widgets/iconCycleCircle.svelte
+++ b/frontend/src/lib/components/widgets/iconCycleCircle.svelte
@@ -7,7 +7,7 @@
 
     let count = col.iconCycleCircle.boxes.length // The number of surrounding circles.
     let angleStep = 360 / count
-    let radius = 100 // Distance from center
+    let radius = 360
 
     let circles = []
 
@@ -23,44 +23,183 @@
         }
         circles = circles
     })
+    let focused = -1
+    setInterval(() => {
+        focused += 1
+        if (focused == count) focused = 0
+        const svgObject = document.getElementById("mySvgObject" + focused)
+    }, 1000)
 </script>
 
-<div class="main-circle">
-    {#each circles as { x, y, rotation }}
-        <div class="circle" style="transform: translate(calc(100px + {x}px - 25px), calc(100px + {y}px - 25px))"></div>
-        <div
-            class="arrow"
-            style="transform: translate(calc(100px + {x / 2}px - 1px), calc(100px + {y /
-                2}px - 25px)) rotate({rotation}deg)"
-        ></div>
-    {/each}
+<div class="container">
+    <div class="main-circle">
+        <div class="content">
+            {col.iconCycleCircle.innerText}
+        </div>
+        {#each circles as { x, y, rotation }, i}
+            <div
+                class:focused="{focused == i}"
+                class="circle"
+                style="transform: translate(calc(100px + {x}px - 90px), calc(100px + {y}px - 90px))"
+            >
+                <div class="half" style="transform: rotate(calc({rotation}deg + 90deg))">
+                    <div class="number" style="transform: rotate(calc( -1 * {rotation}deg - 90deg ))">{i + 1}</div>
+                </div>
+
+                <div class="content" style="transform: translate(calc({x}px / 15) , calc({y}px / 15))">
+                    <div class="icon">
+                        <svg
+                            id="mySvgObject{i}"
+                            stroke="{i == focused ? 'white' : 'black'}"
+                            data-src="{apiBaseURL}page/{pageId}/{col.iconCycleCircle?.boxes[i]?.icon?.src}"></svg>
+                    </div>
+                    <div class="text">
+                        {col.iconCycleCircle?.boxes[i]?.text}
+                    </div>
+                </div>
+            </div>
+            <div
+                class="arrow"
+                style="transform: translate(calc(90px + {(x * 0.8) / 2}px - 10px ), calc(90px + {(y * 0.8) /
+                    2}px - 37.5px)) rotate(calc({rotation}deg - 90deg))"
+            >
+                <img src="/media/arrow-l-fat.svg" alt="arrow" />
+            </div>
+        {/each}
+    </div>
 </div>
 
 <style lang="less">
-    .main-circle {
-        position: relative;
-        width: 200px;
-        height: 200px;
-        margin: auto;
-        background: red;
-        border-radius: 50%;
-    }
+    @import "../../assets/css/main.less";
 
-    .circle {
-        position: absolute;
-        width: 50px;
-        height: 50px;
-        background: blue;
-        z-index: 100;
-        border-radius: 50%;
-        transform-origin: center;
-    }
+    .container {
+        height: 1000px;
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
 
-    .arrow {
-        position: absolute;
-        width: 2px;
-        height: 50px;
-        background: black;
-        transform-origin: center;
+        @media (max-width: 1430px) {
+            transform: scale(0.9);
+            height: 900px;
+        }
+
+        @media (max-width: 1290px) {
+            transform: scale(0.7);
+            height: 700px;
+        }
+
+        @media (max-width: 680px) {
+            transform: scale(0.5);
+            height: 500px;
+        }
+        @media (max-width: 520px) {
+            transform: scale(0.37);
+            height: 370px;
+        }
+        .main-circle {
+            position: relative;
+            width: 180px;
+            height: 180px;
+            margin: auto;
+            background: rgb(0, 0, 0);
+            border-radius: 50%;
+            & > .content {
+                font-weight: bold;
+                position: absolute;
+                height: 100%;
+                color: @font-color-secondary;
+                width: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 120;
+                font-size: 1.2rem;
+            }
+            .circle {
+                position: absolute;
+                width: 180px;
+                height: 180px;
+                background: rgba(255, 255, 255, 0);
+                border: 4px solid @bg-color-secondary;
+                z-index: 100;
+                transform-origin: center;
+                border-radius: 50%;
+                transform-origin: center;
+                & > .content {
+                    position: relative;
+                    display: flex;
+                    line-height: 1;
+                    flex-direction: column;
+                    width: 100%;
+                    height: 100%;
+                    align-items: center;
+                    font-size: 1.2rem;
+                    justify-content: center;
+                    svg {
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+
+                .half {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 50%;
+                    overflow: hidden;
+                    background: rgb(255, 255, 255);
+                    color: white;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    .number {
+                        position: absolute;
+                        top: 0%;
+                        left: 0%;
+                        width: 19%;
+                        height: 100%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-size: 30px; /* oder eine passende Größe */
+                        color: white;
+                    }
+                    &::before {
+                        content: "";
+                        position: absolute;
+                        background: rgb(0, 0, 0);
+                        border-radius: 50%;
+                        top: -50%;
+                        left: 0;
+                        width: 19%;
+                        height: 200%;
+                    }
+                }
+
+                &.focused {
+                    background: @bg-color-secondary !important;
+                    .number {
+                        color: @font-color !important;
+                    }
+                    .content {
+                        color: @font-color-secondary !important;
+                    }
+                    .half {
+                        background: @bg-color-secondary !important;
+                        &::before {
+                            background: @bg-color !important;
+                        }
+                    }
+                }
+            }
+
+            .arrow {
+                position: absolute;
+                width: 10px;
+                height: 75px;
+
+                transform-origin: center;
+            }
+        }
     }
 </style>
diff --git a/types/global.d.ts b/types/global.d.ts
index 2f27c4d..d24066e 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -27,6 +27,7 @@ interface outerRow {
 }
 interface Row {
     topTitle: string
+    topTitleRed: boolean
     subTitle: string
     title: string
     pageTitle: string
@@ -85,6 +86,7 @@ interface NetworkEvent {
 
 interface iconBlock {
     icon: FileField
+    iconFocused: FileField
     bigText: string
     smallText: string
 }