diff --git a/apps/mockup/additional-period-or-finish.html b/apps/mockup/additional-period-or-finish.html
index c4ee0534..6683b9da 100644
--- a/apps/mockup/additional-period-or-finish.html
+++ b/apps/mockup/additional-period-or-finish.html
@@ -159,7 +159,7 @@ <h2 class="Form--title">
               <!-- component: Button -->
               <a
                 class="Button color-border-white size-large"
-                href="./new-period-of-life.html"
+                href="./new-period-of-life2.html"
               >
                 <span class="Button--inner">Continue with new period</span>
               </a>
diff --git a/apps/mockup/new-period-of-life2.html b/apps/mockup/new-period-of-life2.html
new file mode 100644
index 00000000..5e0cf403
--- /dev/null
+++ b/apps/mockup/new-period-of-life2.html
@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html lang="de" data-template="all">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Language Exposure</title>
+    <link rel="stylesheet" href="./css/main.css?v=2024-03-20" />
+    <link rel="modulepreload" href="./js/ui.mjs" />
+    <link href="/pages/ct01/all-corporate-components.html" rel="canonical" />
+    <link href="https://www.uzh.ch" rel="alternate" hreflang="x-default" />
+    <link
+      rel="preload"
+      href="./fonts/WOFF2/SourceSans3-Regular.otf.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="./fonts/WOFF2/SourceSans3-Semibold.otf.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/favicons/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/favicons/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/favicons/favicon-16x16.png"
+    />
+    <link rel="manifest" href="/favicons/site.webmanifest" />
+    <link rel="shortcut icon" href="/favicons/favicon.ico" />
+    <meta name="msapplication-TileColor" content="#ffffff" />
+    <meta name="msapplication-config" content="/favicons/browserconfig.xml" />
+    <meta name="theme-color" content="#ffffff" />
+    <meta name="description" content="Page description" />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:url"
+      content="/pages/ct01/all-corporate-components.html"
+    />
+    <meta property="og:title" content="All Components (Corporate)" />
+    <meta property="og:description" content="Page description" />
+    <meta
+      property="og:image"
+      content="../../dummy/shareimage_example_1200x630.jpg"
+    />
+    <meta
+      property="twitter:url"
+      content="/pages/ct01/all-corporate-components.html"
+    />
+    <meta property="twitter:title" content="All Components (Corporate)" />
+    <meta property="twitter:description" content="Page description" />
+    <meta
+      property="twitter:image"
+      content="../../dummy/shareimage_example_1200x630.jpg"
+    />
+    <meta property="twitter:dnt" content="on" /></head
+  ><!-- Set template class here, e.g. template-s02-->
+
+  <body class="template-all">
+    <!-- component: Header -->
+    <header class="Header js-Header">
+      <p class="visuallyhidden" aria-level="1" role="heading">
+        Navigation auf uzh.ch
+      </p>
+      <div class="Header--top">
+        <div class="Header--logo">
+          <!-- component: Logo --><a class="Logo" href="../.."
+            ><img
+              src="./uzh_logo.svg"
+              alt="Universität Zürich"
+              width="208"
+              height="92" /></a
+          ><!-- /component: Logo -->
+        </div>
+        <div class="Header--mobileButtons">
+          <a
+            class="Header--search"
+            href="/node/pages/st04/st04_standard-inhaltseite-related-inpage.html"
+            ><span class="visuallyhidden">Suche</span
+            ><!-- component: Icon --><span class="Icon" data-name="24--search"
+              ><svg>
+                <use xlink:href="#24--search"></use></svg></span
+            ><!-- /component: Icon --></a
+          ><button
+            class="Header--burger js-Header--burger"
+            type="button"
+            aria-controls="main-nav"
+            aria-expanded="false"
+          >
+            <span class="visuallyhidden">Navigation öffnen/schliessen</span
+            ><span class="Header--burger--open">
+              <!-- component: Icon --><span class="Icon" data-name="24--menu"
+                ><svg>
+                  <use xlink:href="#24--menu"></use></svg></span
+              ><!-- /component: Icon --> </span
+            ><span class="Header--burger--close">
+              <!-- component: Icon --><span class="Icon" data-name="24--close"
+                ><svg>
+                  <use xlink:href="#24--close"></use></svg></span
+              ><!-- /component: Icon -->
+            </span>
+          </button>
+        </div>
+
+        <h2 class="Header--department">Language Exposure</h2>
+      </div>
+      <div class="Header--bottom js-Header--bottom">
+        <div class="Header--bottom--inner">
+          <!-- component: MainNav -->
+          <div class="MainNav js-MainNav" id="main-nav" data-mode="lazy">
+            <div class="MainNav--service js-Header--service">
+              <!-- component: ServiceNav -->
+              <h2 class="visuallyhidden">Quicklinks und Sprachwechsel</h2>
+              <nav class="ServiceNav">
+                <ul class="ServiceNav--list">
+                  <li class="ServiceNav--list--item">
+                    <a class="ServiceNav--link" href="">English</a>
+                  </li>
+                </ul>
+              </nav>
+              <!-- /component: ServiceNav -->
+            </div>
+          </div>
+          <!-- /component: MainNav -->
+        </div>
+      </div>
+    </header>
+    <!-- /component: Header -->
+    <main>
+      <section class="ContentArea">
+        <form
+          class="Form js-Form"
+          id="form-uid-3"
+          method="post"
+          action="full-calendar.html"
+          enctype="multipart/form-data"
+        >
+          <div class="Form--header">
+            <h2 class="Form--title">New period of life</h2>
+          </div>
+          <div class="Form--body">
+            <!-- component: FormInput -->
+            <div class="FormInput">
+              <!-- component: FormLabel -->
+              <label class="FormLabel" for="input-1"> Starting from </label>
+              <!-- /component: FormLabel -->
+              <!-- component: Input -->
+              <input
+                class="Input"
+                autocomplete="off"
+                id="starting-from-picker"
+                name="input-1"
+                type="date"
+              />
+              <!-- /component: Input -->
+            </div>
+            <div class="FormInput">
+              <!-- component: FormLabel -->
+              <label class="FormLabel" for="input-1">To </label>
+              <!-- /component: FormLabel -->
+              <!-- component: Input -->
+              <input
+                class="Input"
+                autocomplete="off"
+                id="to-picker"
+                name="input-1"
+                type="date"
+              />
+              <!-- /component: Input -->
+            </div>
+
+            <div class="FormInput">
+              <!-- component: FormLabel -->
+              <label class="FormLabel" for="input-1">Description</label>
+              <!-- /component: FormLabel -->
+              <input
+                class="Input"
+                autocomplete="off"
+                id="description-input"
+                name="input-1"
+              />
+              <!-- /component: Select -->
+            </div>
+
+            <!-- component: FormButtons -->
+            <div class="FormButtons">
+              <!-- component: Button -->
+              <button class="Button color-primary size-large" type="submit">
+                <span class="Button--inner">Continue</span>
+              </button>
+              <!-- /component: Button -->
+            </div>
+            <!-- /component: FormButtons -->
+          </div>
+        </form>
+      </section>
+      <!-- component: ContentArea -->
+    </main>
+    <script>
+      const descriptionField = document.getElementById("description-input");
+      const fromPicker = document.getElementById("starting-from-picker");
+
+      fromPicker.value = new Date().toISOString().substring(0, 10);
+
+      document
+        .getElementById("to-picker")
+        .addEventListener("change", (event) => {
+          descriptionField.value = `Period (${fromPicker.value} - ${event.target.value})`;
+        });
+    </script>
+  </body>
+</html>
