diff --git a/client/public/base_static/images/landing_page/chaos_bg.png b/client/public/base_static/images/landing_page/chaos_bg.png
new file mode 100644
index 00000000..2d755681
Binary files /dev/null and b/client/public/base_static/images/landing_page/chaos_bg.png differ
diff --git a/client/public/base_static/images/landing_page/favorite_burst.png b/client/public/base_static/images/landing_page/favorite_burst.png
new file mode 100644
index 00000000..60959ebf
Binary files /dev/null and b/client/public/base_static/images/landing_page/favorite_burst.png differ
diff --git a/client/public/base_static/images/landing_page/favorite_showcase.png b/client/public/base_static/images/landing_page/favorite_showcase.png
new file mode 100644
index 00000000..2f6b2b80
Binary files /dev/null and b/client/public/base_static/images/landing_page/favorite_showcase.png differ
diff --git a/client/src/App.svelte b/client/src/App.svelte
index 973abf3a..b1669e58 100644
--- a/client/src/App.svelte
+++ b/client/src/App.svelte
@@ -404,6 +404,7 @@
         {:else if $current_page === ""}
             <LandingPage></LandingPage>
         {:else if $logged_in}
+            <!-- !!! Update NotFound protected_routes when adding a new route !!! -->
             {#if $current_page.substring(0, 4) === "plan" || $current_page.substring(0, 8) === "weekplan"}
                 <h1 class="responsive-heading">{emoji} {greeting}</h1>
                 <!-- {#if $selected_favorite !== -1 && $favorites[$selected_favorite]}
@@ -503,6 +504,7 @@
   .rotating {
     animation: rotate 2s linear infinite;
   }
+
   @keyframes rotate {
     from {
       transform: rotate(0deg);
@@ -511,6 +513,7 @@
       transform: rotate(-360deg);
     }
   }
+
   .fancy-text {
     background: linear-gradient(310deg, #cc33ff, #3358ff, #33bbff);
     color: transparent;
@@ -524,225 +527,274 @@
   }
 
   @-webkit-keyframes colorScroll {
-    0%{background-position:0% 50%}
-    50%{background-position:100% 50%}
-    100%{background-position:0% 50%}
+    0% {
+      background-position: 0 50%
+    }
+    50% {
+      background-position: 100% 50%
+    }
+    100% {
+      background-position: 0 50%
+    }
   }
+
   @-moz-keyframes colorScroll {
-    0%{background-position:0% 50%}
-    50%{background-position:100% 50%}
-    100%{background-position:0% 50%}
+    0% {
+      background-position: 0 50%
+    }
+    50% {
+      background-position: 100% 50%
+    }
+    100% {
+      background-position: 0 50%
+    }
   }
+
   @keyframes colorScroll {
-    0%{background-position:0% 50%}
-    50%{background-position:100% 50%}
-    100%{background-position:0% 50%}
+    0% {
+      background-position: 0 50%
+    }
+    50% {
+      background-position: 100% 50%
+    }
+    100% {
+      background-position: 0 50%
+    }
   }
-    .plan-status {
-        pointer-events: none;
-        position: absolute;
-        top: 0;
-        left: 15px;
-        bottom: 0;
-        width: min(30%, 175px) !important;
-        display: flex;
-        gap: 5px;
-        flex-direction: row;
-        justify-content: flex-start;
-        align-items: center;
-
-        .material-symbols-outlined {
-            font-size: var(--font-size-md);
-            transition: all .2s ease;
-
-            &[data-plan-type=cached] {
-                color: rgba(255, 255, 255, 0.5);
-            }
 
-            &[data-plan-type=network_cached] {
-                color: #00db00;
-            }
+  .plan-status {
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 15px;
+    bottom: 0;
+    width: min(30%, 175px) !important;
+    display: flex;
+    gap: 5px;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+
+    .material-symbols-outlined {
+      font-size: var(--font-size-md);
+      transition: all .2s ease;
+
+      &[data-plan-type=cached] {
+        color: rgba(255, 255, 255, 0.5);
+      }
+
+      &[data-plan-type=network_cached] {
+        color: #00db00;
+      }
+
+      &[data-plan-type=network_uncached] {
+        color: #dbae00;
+      }
+    }
+
+    .status-label {
+      font-size: var(--font-size-sm);
+      color: rgba(255, 255, 255, 0.5);
+      hyphens: auto;
+      text-align: left;
+    }
+  }
 
-            &[data-plan-type=network_uncached] {
-                color: #dbae00;
-            }
-        }
+  #page-container {
+    max-width: 100%;
+    overflow-x: hidden;
+    position: relative;
+    min-height: calc(100vh - 56px);
+    padding-bottom: 15px;
 
-        .status-label {
-            font-size: var(--font-size-sm);
-            color: rgba(255, 255, 255, 0.5);
-            hyphens: auto;
-            text-align: left;
-        }
+    @media only screen and (min-width: 602px) {
+      min-height: calc(100vh - 64px);
     }
+  }
 
-    #page-container {
-        max-width: 100%;
-        overflow-x: hidden;
-        position: relative;
-        min-height: calc(100vh - 56px);
-        padding-bottom: 15px;
-
-        @media only screen and (min-width: 602px) {
-            min-height: calc(100vh - 64px);
-        }
+  footer {
+    float: right;
+    height: calc(var(--font-size-sm) * 2);
+    width: calc(var(--font-size-sm) * 2);
+    margin-top: calc(var(--font-size-sm) * -2);
+    display: flex;
+    background: rgba(0, 0, 0, 0.5);
+    align-items: center;
+    flex-direction: row;
+    justify-content: flex-start;
+
+    &.padding {
+      padding-right: 16px;
+    }
+
+    button {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: none;
+      background: transparent;
+      font-size: var(--font-size-sm);
+      color: white;
+
+      span {
+        font-size: inherit;
+      }
     }
+  }
 
-    footer {
-        float: right;
-        height: calc(var(--font-size-sm) * 2);
-        width: calc(var(--font-size-sm) * 2);
-        margin-top: calc(var(--font-size-sm) * -2);
-        display: flex;
-        background: rgba(0, 0, 0, 0.5);
-        align-items: center;
-        flex-direction: row;
-        justify-content: flex-start;
+  :global(.responsive-heading) {
+    font-size: var(--font-size-xl);
+    margin-bottom: 15px;
+    line-height: 1.2;
+    font-weight: 700;
+  }
 
-        &.padding {
-            padding-right: 16px;
+  :global(.responsive-text) {
+    font-size: var(--font-size-base);
+    line-height: 1.6;
+    font-weight: 400;
+  }
+
+  .controls-wrapper {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    grid-column-gap: 10px;
+    grid-row-gap: 15px;
+    margin-bottom: 40px;
+
+    .control {
+      & > :global(*) {
+        width: 100%;
+        height: 100%;
+      }
+
+      &#c1 {
+        grid-area: 1 / 1 / 2 / 3;
+      }
+
+      &#c2 {
+        grid-area: 2 / 1 / 3 / 2;
+      }
+
+      &#c3 {
+        grid-area: 2 / 2 / 3 / 3;
+      }
+
+      &#c4 {
+        grid-area: 3 / 1 / 4 / 2;
+      }
+
+      &#c5 {
+        grid-area: 3 / 2 / 4 / 3;
+      }
+
+      &#c1 {
+        position: relative;
+        --sdt-bg-main: var(--background);
+        --sdt-shadow-color: var(--background);
+        --sdt-wrap-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
+        --sdt-radius: 5px;
+        --sdt-color: var(--text-color);
+        --sdt-color-selected: var(--text-color);
+        --sdt-header-color: var(--text-color);
+        --sdt-primary: var(--accent-color);
+        --sdt-disabled-date: var(--cancelled-color);
+        --sdt-disabled-date-bg: var(--sdt-bg-main);
+        --sdt-btn-bg-hover: rgba(255, 255, 255, 0.2);
+        --sdt-btn-header-bg-hover: var(--sdt-btn-bg-hover);
+        --sdt-today-indicator: var(--sdt-bg-main);
+
+        :global(.datepicker-input) {
+          width: 100%;
+          height: 100%;
+          border: none;
+          border-radius: 5px;
+          background-color: rgba(255, 255, 255, 0.2);
+          color: var(--text-color);
+          font-size: var(--font-size-base);
+          text-align: center;
         }
 
-        button {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border: none;
-            background: transparent;
-            font-size: var(--font-size-sm);
-            color: white;
-
-            span {
-                font-size: inherit;
-            }
+        :global(.std-calendar-wrap) {
+          left: 50% !important;
+          transform: translateX(-50%);
+          border-radius: 5px;
+          overflow: hidden;
         }
-    }
 
-    :global(.responsive-heading) {
-        font-size: var(--font-size-xl);
-        margin-bottom: 15px;
-        line-height: 1.2;
-        font-weight: 700;
-    }
+        :global(.is-selected) {
+          pointer-events: none;
+        }
 
-    :global(.responsive-text) {
-        font-size: var(--font-size-base);
-        line-height: 1.6;
-        font-weight: 400;
+        :global(.std-calendar-wrap::before) {
+          content: "";
+          position: absolute;
+          inset: 0;
+          background: rgba(255, 255, 255, 0.05);
+        }
+      }
     }
 
-    .controls-wrapper {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        grid-template-rows: repeat(3, 1fr);
-        grid-column-gap: 10px;
-        grid-row-gap: 15px;
-        margin-bottom: 40px;
-
-        .control {
-            & > :global(*) {
-                width: 100%;
-                height: 100%;
-            }
+    @media only screen and (min-width: 1501px) {
+      grid-template-columns: repeat(4, 1fr);
+      grid-template-rows: repeat(2, 1fr);
 
-            &#c1 {grid-area: 1 / 1 / 2 / 3;}
-            &#c2 {grid-area: 2 / 1 / 3 / 2;}
-            &#c3 {grid-area: 2 / 2 / 3 / 3;}
-            &#c4 {grid-area: 3 / 1 / 4 / 2;}
-            &#c5 {grid-area: 3 / 2 / 4 / 3;}
-
-            &#c1 {
-                position: relative;
-                --sdt-bg-main: var(--background);
-                --sdt-shadow-color: var(--background);
-                --sdt-wrap-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
-                --sdt-radius: 5px;
-                --sdt-color: var(--text-color);
-                --sdt-color-selected: var(--text-color);
-                --sdt-header-color: var(--text-color);
-                --sdt-primary: var(--accent-color);
-                --sdt-disabled-date: var(--cancelled-color);
-                --sdt-disabled-date-bg: var(--sdt-bg-main);
-                --sdt-btn-bg-hover: rgba(255, 255, 255, 0.2);
-                --sdt-btn-header-bg-hover: var(--sdt-btn-bg-hover);
-                --sdt-color-selected: var(--text-color);
-                --sdt-today-indicator: var(--sdt-bg-main);
-
-                :global(.datepicker-input) {
-                    width: 100%;
-                    height: 100%;
-                    border: none;
-                    border-radius: 5px;
-                    background-color: rgba(255, 255, 255, 0.2);
-                    color: var(--text-color);
-                    font-size: var(--font-size-base);
-                    text-align: center;
-                }
-
-                :global(.std-calendar-wrap) {
-                    left: 50% !important;
-                    transform: translateX(-50%);
-                    border-radius: 5px;
-                    overflow: hidden;
-                }
+      .control {
+        &#c1 {
+          grid-area: 1 / 1 / 2 / 5;
+        }
 
-                :global(.is-selected) {
-                    pointer-events: none;
-                }
+        &#c2 {
+          grid-area: 2 / 1 / 3 / 2;
+        }
 
-                :global(.std-calendar-wrap::before) {
-                    content: "";
-                    position: absolute;
-                    inset: 0;
-                    background: rgba(255, 255, 255, 0.05);
-                }
-            }
+        &#c3 {
+          grid-area: 2 / 2 / 3 / 3;
         }
 
-        @media only screen and (min-width: 1501px) {
-            grid-template-columns: repeat(4, 1fr);
-            grid-template-rows: repeat(2, 1fr);
+        &#c4 {
+          grid-area: 2 / 3 / 3 / 4;
+        }
 
-            .control {
-                &#c1 {grid-area: 1 / 1 / 2 / 5;}
-                &#c2 {grid-area: 2 / 1 / 3 / 2;}
-                &#c3 {grid-area: 2 / 2 / 3 / 3;}
-                &#c4 {grid-area: 2 / 3 / 3 / 4;}
-                &#c5 {grid-area: 2 / 4 / 3 / 5;}
-            }
+        &#c5 {
+          grid-area: 2 / 4 / 3 / 5;
         }
+      }
     }
+  }
 
-    main {
-        padding-top: 25px;
-        margin: 64px auto;
-        @media only screen and (max-width: 601px) {
-            margin: 56px auto;
-        }
-        margin-bottom: 0px !important;
+  main {
+    padding-top: 25px;
+    margin: 64px auto;
+    @media only screen and (max-width: 601px) {
+      margin: 56px auto;
+    }
+    margin-bottom: 0px !important;
 
-        max-width: 1280px;
-        width: 90%;
-        @media only screen and (min-width: 601px) {
-            width: 85%;
-        }
-        @media only screen and (min-width: 993px) {
-            width: 70%;
-        }
-        @media only screen and (max-width: 500px) {
-            width: 95%;
-        }
+    max-width: 1280px;
+    width: 90%;
+    @media only screen and (min-width: 601px) {
+      width: 85%;
     }
-    :global {
-        ul, ol {
-            padding-left: 22px !important;
-            // padding-left: 40px !important;
-            // @media only screen and (max-width: 1501px) {
-            //     padding-left: 22px !important;
-            // }
-            list-style-type: disc !important;
-        }
+    @media only screen and (min-width: 993px) {
+      width: 70%;
     }
+    @media only screen and (max-width: 500px) {
+      width: 95%;
+    }
+  }
+
+  :global {
+    ul, ol {
+      padding-left: 22px !important;
+      // padding-left: 40px !important;
+      // @media only screen and (max-width: 1501px) {
+      //     padding-left: 22px !important;
+      // }
+      list-style-type: disc !important;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/client/src/components/Authentication.svelte b/client/src/components/Authentication.svelte
index 4e112c2b..4b6abc9d 100644
--- a/client/src/components/Authentication.svelte
+++ b/client/src/components/Authentication.svelte
@@ -74,6 +74,13 @@
 
     $: title.set(register_visible ? "Registrieren" : "Login");
 </script>
+<svelte:head>
+    <style>
+        #page-container {
+            overflow-x: unset !important;
+        }
+    </style>
+</svelte:head>
 <main transition:fade>
     {#if !register_visible}
     <form on:submit|preventDefault={login} transition:fly|local={{x:-500}}>
@@ -121,166 +128,166 @@
     {/if}
 </main>
 <style lang="scss">
-    .extra-info {
-        font-size: var(--font-size-base);
-        margin: 10px 0px;
-    }
-
-    .no-account-info {
-        font-size: var(--font-size-base);
-    }
+  .extra-info {
+    font-size: var(--font-size-base);
+    margin: 10px 0px;
+  }
 
-    label {
-        margin-bottom: 8px;
-        font-size: var(--font-size-base);
-    }
+  .no-account-info {
+    font-size: var(--font-size-base);
+  }
 
-    main::before {
-        content: "";
-        top: 0;
-        left: 0;
-        position: fixed;
-        width: 100%;
-        height: 100%;
-        background-image: url('/public/base_static/images/blurry_gradient_bg.svg');
-        background-color: #906df5;
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-position-x: 50%;
-        filter: brightness(1);
-        z-index: -1;
-    }
+  label {
+    margin-bottom: 8px;
+    font-size: var(--font-size-base);
+  }
 
-    #forgot_password {
-        margin-left: auto;
-    }
+  main::before {
+    content: "";
+    top: 0;
+    left: 0;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background-image: url('/public/base_static/images/blurry_gradient_bg.svg');
+    background-color: #906df5;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position-x: 50%;
+    filter: brightness(1);
+    z-index: -1;
+  }
 
-    form {
-        position: absolute;
-        top: 50%;
-        left: calc(50% + (100vw - 100%) / 2);
-        transform: translate(-50%, -50%);
-        display: flex;
-        flex-direction: column;
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: 5px;
-        padding: 30px;
-        border: 1px solid rgba(255, 255, 255, 0.3);
-        min-width: min(400px, 75vw);
+  #forgot_password {
+    margin-left: auto;
+  }
 
-        &::before {
-            content: "";
-            background-image: url('/public/base_static/images/logo.svg');
-            background-size: contain;
-            width: 90px;
-            aspect-ratio: 1;
-            position: absolute;
-            top: -50px;
-            left: 50%;
-            transform: translate(-50%, -50%);
-        }
-    }
+  form {
+    position: absolute;
+    top: 50%;
+    left: calc(50% + (100vw - 100%) / 2);
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 5px;
+    padding: 30px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    min-width: min(400px, 75vw);
 
-    .input_icon {
-        position: relative;
-        
-        .textfield {
-            padding-left: 40px;
-        }
-        
-        img {
-            position: absolute;
-            top: 14px;
-            left: 12px;
-            width: 20px;
-            height: 20px;
-            background-size: contain;
-            z-index: 1;
-        }
+    &::before {
+      content: "";
+      background-image: url('/public/base_static/images/logo.svg');
+      background-size: contain;
+      width: 90px;
+      aspect-ratio: 1;
+      position: absolute;
+      top: -50px;
+      left: 50%;
+      transform: translate(-50%, -50%);
     }
+  }
 
-    .password_field {
-        .textfield {
-            padding-right: 40px;
-        }
+  .input_icon {
+    position: relative;
 
-        button {
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 40px;
-            height: 48px;
-            z-index: 1;
-            border: none;
-            background: transparent;
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            padding-left: 5.5px;
+    .textfield {
+      padding-left: 40px;
+    }
 
-            .material-symbols-outlined {
-                color: black !important;
-                font-size: 25px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-        }
+    img {
+      position: absolute;
+      top: 14px;
+      left: 12px;
+      width: 20px;
+      height: 20px;
+      background-size: contain;
+      z-index: 1;
     }
+  }
 
+  .password_field {
     .textfield {
-        width: 100%;
-        padding: 12px 20px;
-        margin-bottom: 8px;
-        box-sizing: border-box;
-        border: 2px solid white;
-        border-radius: 5px;
-        font-size: var(--font-size-sm);
+      padding-right: 40px;
     }
 
-    .default-button {
-        width: 100%;
-        text-align: center;
-        padding: 12px 20px;
-        margin-bottom: 8px;
-        margin-top: 8px;
-        border: 0;
-        border-radius: 99vw;
-        background: white;
-        color: black;
-        font-size: var(--font-size-base);
-        font-weight: 500;
-        transition: all .2s ease;
+    button {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 40px;
+      height: 48px;
+      z-index: 1;
+      border: none;
+      background: transparent;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding-left: 5.5px;
 
-        &:disabled {
-            color: #595959;
-            background: #b9b9b9;
-        }
+      .material-symbols-outlined {
+        color: black !important;
+        font-size: 25px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
+  }
 
-    .link-button {
-        display: inline-block;
-        text-align: left;
-        padding: 0;
-        margin: 0;
-        color: #0f0fff;
-        background: transparent;
-        border: 0;
-        font-size: var(--font-size-base);
-    }
+  .textfield {
+    width: 100%;
+    padding: 12px 20px;
+    margin-bottom: 8px;
+    box-sizing: border-box;
+    border: 2px solid white;
+    border-radius: 5px;
+    font-size: var(--font-size-sm);
+  }
 
-    #back_button {
-        position: absolute;
-        top: 5px;
-        left: 5px;
-        padding: 0;
-        border: 0;
-        background: none;
-        color: white;
-        font-size: var(--font-size-md);
-    }
+  .default-button {
+    width: 100%;
+    text-align: center;
+    padding: 12px 20px;
+    margin-bottom: 8px;
+    margin-top: 8px;
+    border: 0;
+    border-radius: 99vw;
+    background: white;
+    color: black;
+    font-size: var(--font-size-base);
+    font-weight: 500;
+    transition: all .2s ease;
 
-    span, h1, label {
-        color: white !important;
+    &:disabled {
+      color: #595959;
+      background: #b9b9b9;
     }
+  }
+
+  .link-button {
+    display: inline-block;
+    text-align: left;
+    padding: 0;
+    margin: 0;
+    color: #0f0fff;
+    background: transparent;
+    border: 0;
+    font-size: var(--font-size-base);
+  }
+
+  #back_button {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: white;
+    font-size: var(--font-size-md);
+  }
+
+  span, h1, label {
+    color: white !important;
+  }
 </style>
\ No newline at end of file
diff --git a/client/src/components/LandingPage.svelte b/client/src/components/LandingPage.svelte
index ee2396bf..42977502 100644
--- a/client/src/components/LandingPage.svelte
+++ b/client/src/components/LandingPage.svelte
@@ -28,6 +28,7 @@
     $: compareSliderValue = (Math.max(Math.min(realSliderValue, 100), 0)).toString();
     let lastKnownScrollPosition = 0;
     let rotating_text;
+    let wrapper;
 
     setTimeout(updateCurrentMottoIndex, 5000);
     function updateCurrentMottoIndex() {
@@ -50,10 +51,12 @@
 
     function update3DRotation(event) {
         if(!$register_button_visible || window.screen.width < 900) return;
-        const middleX = startSection.offsetLeft + startSection.offsetWidth / 2;
-        const middleY = startSection.offsetTop + startSection.offsetHeight / 2;
+        const middleX = wrapper.offsetLeft + startSection.offsetLeft + startSection.offsetWidth / 2;
+        const middleY = wrapper.offsetTop + startSection.offsetTop + startSection.offsetHeight / 2;
         const offsetX = ((event.clientX + document.documentElement.scrollLeft - middleX) / middleX) * 45;
-        const offsetY = (((event.clientY + document.documentElement.scrollTop - 30) - middleY) / middleY) * 45;
+        const offsetY = ((event.clientY + document.documentElement.scrollTop - middleY) / middleY) * 45;
+        console.log(middleX, middleY);
+        console.log(event.clientX, event.clientY, offsetX, offsetY);
 
         startSection.animate({
             transform: `perspective(5000px) rotateY(${Math.max(Math.min(offsetX, 35), -35)}deg) rotateX(${Math.max(Math.min(offsetY, 35), -35) * -1}deg)`
@@ -94,7 +97,7 @@
 <svelte:body on:mousemove={update3DRotation}></svelte:body>
 <svelte:window on:scroll={() => {update3DRotationScroll(); addToSlider()}}></svelte:window>
 
-<div style="display: flex; flex-direction: column; gap: 2rem; position: relative;">
+<div style="display: flex; flex-direction: column; gap: 2rem; position: relative;" bind:this={wrapper}>
     <div class="bubble-container">
         <div class="bubble one"></div>
         <div class="bubble two"></div>
@@ -170,12 +173,22 @@
     <section>
         <h2 class="responsive-heading"><span class="fancy-text" data-text="Quality">Quality</span> of Life</h2>
         <!-- Solo leveling fenster gelb lila magenta + so dreck auf den fenstern vibe -->
+        <div class="design-showcase">
+            <div>
+                <h2 class="responsive-heading">Clean</h2>
+                <h2 class="responsive-heading">Customizable</h2>
+                <h2 class="responsive-heading">Design</h2>
+            </div>
+        </div>
+        <div class="favorite-showcase">
+            <h2 class="responsive-heading">Beliebig viele Favoriten</h2>
+            <img alt="Favorite Showcase" src="/public/base_static/images/landing_page/favorite_showcase.png">
+        </div>
+        <br><br>
         <ul class="responsive-text">
-            <li>Cleanes Customizable Design</li>
-            <li>Beliebig viele Favoriten</li>
             <li>Alle Vorkommen von Klassen, Räumen, Lehrern etc. führen bei klicken zu ihrem jeweiligen Plan</li>
             <li>Überblick über alte Pläne</li>
-            <li>GAMES :DDD</li>
+            <li><a href="https://games.vplan.fr/">GAMES :DDD</a></li>
         </ul>
     </section>
     <section>
@@ -192,6 +205,94 @@
 </div>
 
 <style lang="scss">
+  .favorite-showcase {
+    padding: 2rem;
+    border-radius: 4rem;
+    overflow: hidden;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    position: relative;
+    z-index: 0;
+    background: radial-gradient(circle at left 0%, var(--background) 20%, transparent 50%);
+
+    &::before {
+      z-index: -1;
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: url('/public/base_static/images/landing_page/favorite_burst.png');
+      background-size: contain;
+      background-position: 0 50%;
+      background-repeat: no-repeat;
+    }
+
+    @media only screen and (max-width: 900px) {
+      flex-direction: column;
+      justify-content: center;
+
+      &::before {
+        background-position: 50% 0;
+      }
+      padding: 0.5rem 0.5rem 1rem;
+      border-radius: 2rem;
+    }
+
+    img {
+      max-height: 23rem;
+      border-radius: 1rem;
+      box-shadow: 5px 5px 15px rgb(10, 10, 10);
+    }
+  }
+
+  .design-showcase {
+    position: relative;
+    padding-top: 10rem;
+    padding-bottom: 10rem;
+    @media only screen and (max-width: 900px) {
+      padding-top: 5rem;
+      padding-bottom: 5rem;
+    }
+    background: radial-gradient(circle, var(--background) 20%, transparent 50%);
+    z-index: 0;
+
+    &::before {
+      z-index: -1;
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: url('/public/base_static/images/landing_page/chaos_bg.png');
+      background-size: contain;
+      background-position: 50% 50%;
+      background-repeat: no-repeat;
+      animation: rotate 200s linear infinite;
+    }
+
+    & > div {
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+
+      & > h2 {
+        text-align: center;
+        font-size: var(--font-size-xxl)
+      }
+    }
+
+    img {
+      position: absolute;
+      inset: 0;
+    }
+  }
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
   .rotating-text {
     position: absolute;
     inset: 0;
diff --git a/client/src/components/NotFound.svelte b/client/src/components/NotFound.svelte
index 8d1f1c34..5ac7e357 100644
--- a/client/src/components/NotFound.svelte
+++ b/client/src/components/NotFound.svelte
@@ -1,9 +1,26 @@
 <script>
     import {onMount} from "svelte";
-    import {title} from "../stores.js";
+    import {navigate_page} from "../utils.js";
+    import {current_page, logged_in, title} from "../stores.js";
 
     onMount(() => {
         title.set("Seite nicht gefunden");
+        const protected_routes = [
+            "plan",
+            "weekplan",
+            "school_manager",
+            "favorite",
+            "favorites",
+            "pwa_install",
+            "stats"
+        ];
+        let tmp_location = $current_page.split("|")[0];
+        if((tmp_location === "login") || (tmp_location === "register")) {
+            navigate_page("plan");
+        }
+        else if(protected_routes.includes(tmp_location)) {
+            navigate_page("login");
+        }
     });
 </script>
 
diff --git a/client/src/utils.js b/client/src/utils.js
index 3418d12d..023c552c 100644
--- a/client/src/utils.js
+++ b/client/src/utils.js
@@ -1,4 +1,4 @@
-import {current_page, indexed_db, register_button_visible, settings} from "./stores.js";
+import {current_page, indexed_db, logged_in, register_button_visible, settings} from "./stores.js";
 import {notifications} from "./notifications.js";
 import { get } from "svelte/store";
 import { favorites } from "./stores.js";