From 08ccaed09787988f47005b7f653be3c8bfc377ac Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Sun, 22 Mar 2026 22:45:05 +0100
Subject: [PATCH 01/19] =?UTF-8?q?=F0=9F=92=84=20Improve=20Todo=20list=20it?=
 =?UTF-8?q?em=20styling=20with=20consistent=20buttons=20and=20row=20highli?=
 =?UTF-8?q?ghts.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                 |  1 +
 frontend/src/lib/components/todo/Todo.svelte | 53 +++++++-------------
 2 files changed, 20 insertions(+), 34 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b44fba23..e9d96074 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- [todo] Replace raw mobile-edit button with Carbon ghost Button; edit button now always visible directly before delete button; add subtle dark row background with hover highlight; add `--default_padding` gap between edit and delete buttons.
 - [global] Translate all German source code comments to English across e2e specs, frontend components, and utility files.
 
 ### Added
diff --git a/frontend/src/lib/components/todo/Todo.svelte b/frontend/src/lib/components/todo/Todo.svelte
index 41b23096..e87537d6 100644
--- a/frontend/src/lib/components/todo/Todo.svelte
+++ b/frontend/src/lib/components/todo/Todo.svelte
@@ -195,16 +195,21 @@
     </div>
   {/if}
   <div
+    class="actions"
     onclick={(e) => e.stopPropagation()}
     onkeydown={(e) => e.key === 'Enter' && e.stopPropagation()}
     role="button"
     tabindex="-1"
-    style="display: contents;"
   >
     {#if !isRenaming}
-      <button class="mobile-edit-btn" onclick={startEdit} title={$t('page.todos.editTodo')}>
-        <Edit size={16} />
-      </button>
+      <Button
+        kind="ghost"
+        size="small"
+        iconDescription={$t('page.todos.editTodo')}
+        tooltipAlignment="end"
+        icon={Edit}
+        onclick={startEdit}
+      />
     {/if}
     <Button
       kind="danger"
@@ -229,23 +234,17 @@
 <style lang="scss">
   section {
     display: flex;
-    justify-content: space-between;
     align-items: center;
     margin-top: 0.5rem;
     gap: 0.5rem;
     padding: 0.5rem;
     border-radius: 4px;
     cursor: pointer;
-    transition:
-      background-color 0.2s ease,
-      transform 0.2s ease,
-      box-shadow 0.2s ease;
-    background-color: transparent;
+    transition: background-color 0.2s ease;
+    background-color: rgba(0, 0, 0, 0.2);
 
     &:hover {
       background-color: rgba(255, 255, 255, 0.08);
-      transform: translateX(4px);
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     }
   }
 
@@ -255,6 +254,14 @@
     gap: 0.5rem;
   }
 
+  .actions {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: auto;
+    gap: var(--default_padding);
+  }
+
   .checkbox-wrapper :global(.bx--checkbox-wrapper) {
     margin: 0;
     flex-shrink: 0;
@@ -337,28 +344,6 @@
     margin-right: 0.25rem;
   }
 
-  .mobile-edit-btn {
-    display: none;
-    background: transparent;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 4px;
-    color: rgba(255, 255, 255, 0.7);
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.2s ease;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.08);
-    }
-
-    @media only screen and (max-width: 767px) {
-      display: flex;
-      min-height: 44px;
-      min-width: 44px;
-    }
-  }
-
   .edit-container :global(.bx--btn--sm) {
     @media only screen and (max-width: 767px) {
       min-height: 44px;

From 54f9d44f20262a1ffb4044772ca2856bce03176a Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Sun, 22 Mar 2026 22:46:49 +0100
Subject: [PATCH 02/19] =?UTF-8?q?=E2=9C=A8=20Indent=20todo=20category=20he?=
 =?UTF-8?q?aders=20by=20half=20the=20default=20padding.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                     | 2 +-
 frontend/src/lib/components/todo/TodoList.svelte | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e9d96074..233ec5ef 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- [todo] Replace raw mobile-edit button with Carbon ghost Button; edit button now always visible directly before delete button; add subtle dark row background with hover highlight; add `--default_padding` gap between edit and delete buttons.
+- [todo] Replace raw mobile-edit button with Carbon ghost Button; edit button now always visible directly before delete button; add subtle dark row background with hover highlight; add `--default_padding` gap between edit and delete buttons; indent category headers by `--default_padding / 2`.
 - [global] Translate all German source code comments to English across e2e specs, frontend components, and utility files.
 
 ### Added
diff --git a/frontend/src/lib/components/todo/TodoList.svelte b/frontend/src/lib/components/todo/TodoList.svelte
index b4848d6f..e3064514 100644
--- a/frontend/src/lib/components/todo/TodoList.svelte
+++ b/frontend/src/lib/components/todo/TodoList.svelte
@@ -744,6 +744,7 @@
     font-weight: 600;
     margin-bottom: 0.5rem;
     padding-bottom: 0.5rem;
+    padding-left: calc(var(--default_padding) / 2);
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   }
 </style>

From 67b75938a1c98ddd5f6ecc133973a000a7ae73c0 Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Sun, 22 Mar 2026 22:53:50 +0100
Subject: [PATCH 03/19] =?UTF-8?q?=E2=9C=A8=20Replace=20todo=20view-toggle?=
 =?UTF-8?q?=20buttons=20with=20Carbon=20components=20and=20add=20divider.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                  |  2 +-
 .../src/lib/components/todo/TodoList.svelte   | 87 +++++++------------
 2 files changed, 31 insertions(+), 58 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 233ec5ef..5fe4d1af 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- [todo] Replace raw mobile-edit button with Carbon ghost Button; edit button now always visible directly before delete button; add subtle dark row background with hover highlight; add `--default_padding` gap between edit and delete buttons; indent category headers by `--default_padding / 2`.
+- [todo] Replace raw view-toggle buttons with Carbon Buttons (ghost/secondary/danger); add vertical divider between view toggles and cleanup button; replace raw mobile-edit button with Carbon ghost Button; edit button now always visible directly before delete button; add subtle dark row background with hover highlight; add `--default_padding` gap between edit and delete buttons; indent category headers by `--default_padding / 2`.
 - [global] Translate all German source code comments to English across e2e specs, frontend components, and utility files.
 
 ### Added
diff --git a/frontend/src/lib/components/todo/TodoList.svelte b/frontend/src/lib/components/todo/TodoList.svelte
index e3064514..1e2cab24 100644
--- a/frontend/src/lib/components/todo/TodoList.svelte
+++ b/frontend/src/lib/components/todo/TodoList.svelte
@@ -5,6 +5,7 @@
   import { displayCategory, normalizeCategory } from '$lib/util/helper';
   import { todoStore } from '$lib/util/stores/store-todo';
   import { initialized, t } from '$lib/util/translations';
+  import Button from 'carbon-components-svelte/src/Button/Button.svelte';
   import InlineNotification from 'carbon-components-svelte/src/Notification/InlineNotification.svelte';
   import Category from 'carbon-icons-svelte/lib/Category.svelte';
   import ChevronDown from 'carbon-icons-svelte/lib/ChevronDown.svelte';
@@ -453,32 +454,32 @@
             {list?.name || $t('page.todos.list.noEmoji')}
           </h2>
           <div class="view_toggle">
-            <button
-              class="view_btn"
-              class:active={!isCategoryView}
+            <Button
+              kind={isCategoryView ? 'ghost' : 'secondary'}
+              size="small"
+              icon={List}
+              iconDescription={$t('page.todos.view.classic')}
+              tooltipAlignment="end"
               onclick={() => (isCategoryView = false)}
-              title={$t('page.todos.view.classic')}
-              aria-label={$t('page.todos.view.classic')}
-            >
-              <List size={16} />
-            </button>
-            <button
-              class="view_btn"
-              class:active={isCategoryView}
+            />
+            <Button
+              kind={isCategoryView ? 'secondary' : 'ghost'}
+              size="small"
+              icon={Category}
+              iconDescription={$t('page.todos.view.byCategory')}
+              tooltipAlignment="end"
               onclick={() => (isCategoryView = true)}
-              title={$t('page.todos.view.byCategory')}
-              aria-label={$t('page.todos.view.byCategory')}
-            >
-              <Category size={16} />
-            </button>
-            <button
-              class="view_btn"
-              onclick={deleteCompletedTodos}
-              title={$t('page.todos.view.cleanupCompleted')}
+            />
+            <span class="view_divider"></span>
+            <Button
+              kind="danger"
+              size="small"
+              icon={Clean}
+              iconDescription={$t('page.todos.view.cleanupCompleted')}
+              tooltipAlignment="end"
               disabled={!list?.todos.some((todo) => todo.done)}
-            >
-              <Clean size={16} />
-            </button>
+              onclick={deleteCompletedTodos}
+            />
           </div>
           <button
             class="header_toggle_btn"
@@ -682,47 +683,19 @@
 
   .view_toggle {
     display: flex;
-    gap: 2px;
+    gap: var(--default_padding);
     margin-left: auto;
+    align-items: center;
 
     @media #{$phone} {
       margin-left: 0;
     }
   }
 
-  .view_btn {
-    background: transparent;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 4px;
-    color: rgba(255, 255, 255, 0.4);
-    cursor: pointer;
-    padding: 0.25rem;
-    line-height: 0;
-    flex-shrink: 0;
-    transition:
-      background-color 0.2s ease,
-      color 0.2s ease;
-
-    @media #{$phone} {
-      min-height: 44px;
-      min-width: 44px;
-    }
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.08);
-      color: rgba(255, 255, 255, 0.8);
-    }
-
-    &.active {
-      background: rgba(255, 255, 255, 0.12);
-      color: rgba(255, 255, 255, 1);
-      border-color: rgba(255, 255, 255, 0.5);
-    }
-
-    &:disabled {
-      opacity: 0.3;
-      cursor: not-allowed;
-    }
+  .view_divider {
+    width: 1px;
+    height: 1.5rem;
+    background-color: rgba(255, 255, 255, 0.2);
   }
 
   .list_content {

From c83de5075705d18a473cc0a95988343ff3ed13ce Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Mon, 23 Mar 2026 00:14:47 +0100
Subject: [PATCH 04/19] =?UTF-8?q?=F0=9F=90=9B=20Add=20time-based=20greetin?=
 =?UTF-8?q?g=20component=20to=20homepage=20and=20fix=20stale=20identifier?=
 =?UTF-8?q?=20validation=20on=20app=20load.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                  |  4 +
 e2e/tests/auth/login.spec.ts                  | 15 ++++
 .../src/lib/components/home/Greeting.svelte   | 88 +++++++++++++++++++
 frontend/src/lib/config/de.json               | 25 ++++++
 frontend/src/lib/config/en.json               | 24 +++++
 frontend/src/lib/util/translations.ts         |  1 +
 frontend/src/routes/+layout.svelte            | 15 ++++
 frontend/src/routes/+page.svelte              |  6 +-
 8 files changed, 175 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/lib/components/home/Greeting.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5fe4d1af..520d2746 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- [home] Replace Navigation grid on homepage with a time-based greeting component that addresses the current user by their identifier (morning/afternoon/evening/night, DE + EN).
+
 ### Changed
 
 - [todo] Replace raw view-toggle buttons with Carbon Buttons (ghost/secondary/danger); add vertical divider between view toggles and cleanup button; replace raw mobile-edit button with Carbon ghost Button; edit button now always visible directly before delete button; add subtle dark row background with hover highlight; add `--default_padding` gap between edit and delete buttons; indent category headers by `--default_padding / 2`.
diff --git a/e2e/tests/auth/login.spec.ts b/e2e/tests/auth/login.spec.ts
index f3278cfd..a3900982 100644
--- a/e2e/tests/auth/login.spec.ts
+++ b/e2e/tests/auth/login.spec.ts
@@ -46,4 +46,19 @@ test.describe('Login-Gate', () => {
     await expect(notification).toBeVisible({ timeout: 10_000 });
     await expect(passwordInput).toBeVisible();
   });
+
+  test('ungültiger Identifier im localStorage zeigt Login-Gate', async ({ page }) => {
+    // Set an invalid identifier in localStorage before navigation
+    await page.goto(FRONTEND_URL);
+    await page.evaluate(() =>
+      localStorage.setItem('identifier', 'invalid-stale-identifier-xyz'),
+    );
+    await page.reload();
+
+    // Layout verifies on mount and clears invalid identifier → login gate appears
+    await expect(page.locator('input[type="password"]')).toBeVisible({
+      timeout: 15_000,
+    });
+    await expect(page.locator('main')).not.toBeVisible();
+  });
 });
diff --git a/frontend/src/lib/components/home/Greeting.svelte b/frontend/src/lib/components/home/Greeting.svelte
new file mode 100644
index 00000000..aa0f923c
--- /dev/null
+++ b/frontend/src/lib/components/home/Greeting.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+  // 1. IMPORTS
+  import { getIdentifier } from '$lib/api/identifiers.api';
+  import type { IdentifierDto } from '$lib/types/identifiers.dto';
+  import { identifierStore } from '$lib/util/stores/store-identifier';
+  import { t } from '$lib/util/translations';
+  import { onMount } from 'svelte';
+
+  // 3. CONST
+  const VARIANTS = 3;
+
+  // 4. STATE
+  let identifier = $state<IdentifierDto | null>(null);
+  let nameLoaded = $state(false);
+
+  // 5. DERIVED
+  const timeOfDay = $derived.by(() => {
+    const hour = new Date().getHours();
+    if (hour >= 5 && hour < 12) return 'Morning';
+    if (hour >= 12 && hour < 18) return 'Afternoon';
+    if (hour >= 18 && hour < 22) return 'Evening';
+    return 'Night';
+  });
+
+  const greetingVariant = Math.floor(Math.random() * VARIANTS);
+
+  const greetingHtml = $derived.by(() => {
+    if (!nameLoaded) return '';
+
+    const hasName = !!identifier?.name;
+    const prefix = hasName ? '' : 'Anon';
+    const key =
+      `page.home.greeting${prefix}${timeOfDay}${greetingVariant}` as Parameters<
+        typeof $t
+      >[0];
+
+    if (!hasName) return $t(key);
+
+    const escapedName = identifier!.name
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+    const highlighted = `<span class="username">${escapedName}</span>`;
+    return $t(key, { username: highlighted });
+  });
+
+  // 7. LIFECYCLE
+  onMount(async () => {
+    if ($identifierStore) {
+      try {
+        const result = await getIdentifier($identifierStore);
+        if (result?.name) {
+          identifier = result;
+        }
+      } catch {
+        // fall through to anonymous greeting
+      }
+    }
+    nameLoaded = true;
+  });
+</script>
+
+{#if nameLoaded}
+  <div class="greeting">
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+    <p class="greeting-text">{@html greetingHtml}</p>
+  </div>
+{/if}
+
+<style lang="scss">
+  .greeting {
+    text-align: center;
+    padding: 1rem 0;
+  }
+
+  .greeting-text {
+    font-size: 1.5rem;
+    font-weight: 300;
+    color: rgba(255, 255, 255, 0.85);
+    margin: 0;
+
+    :global(.username) {
+      font-weight: 600;
+      color: var(--color_bg_light_0);
+    }
+  }
+</style>
diff --git a/frontend/src/lib/config/de.json b/frontend/src/lib/config/de.json
index dfb182ed..8e269d2f 100644
--- a/frontend/src/lib/config/de.json
+++ b/frontend/src/lib/config/de.json
@@ -2,6 +2,31 @@
   "page.home.jokeTitle": "Witz des Tages",
   "page.home.jokeLoading": "Lädt Witz des Tages...",
   "page.home.searchPlaceholder": "Websuche",
+  "page.home.greetingMorning0": "Moin {{username}}! Schon den ersten Kaffee gehabt?",
+  "page.home.greetingMorning1": "Hey {{username}}, früh aufgestanden heute?",
+  "page.home.greetingMorning2": "Guten Morgen {{username}}! Die Vögel zwitschern schon...",
+  "page.home.greetingAfternoon0": "Moin moin {{username}}! Mittagspause oder fleißig bei der Arbeit?",
+  "page.home.greetingAfternoon1": "Servus {{username}}! Schon gegessen?",
+  "page.home.greetingAfternoon2": "Hey {{username}}, noch wach nach dem Mittagessen?",
+  "page.home.greetingEvening0": "Nabend {{username}}, Feierabend verdient!",
+  "page.home.greetingEvening1": "Guten Abend {{username}}! Schon was Schönes erlebt heute?",
+  "page.home.greetingEvening2": "Hey {{username}}, ein langer Tag oder?",
+  "page.home.greetingNight0": "Nabend {{username}}, so spät noch auf?",
+  "page.home.greetingNight1": "Schön dich noch zu sehen {{username}}, zu dieser späten Stunde!",
+  "page.home.greetingNight2": "{{username}}! Was treibt dich um diese Uhrzeit noch hierher?",
+  "page.home.greetingAnonMorning0": "Moin! Schon den ersten Kaffee gehabt?",
+  "page.home.greetingAnonMorning1": "Hey, früh aufgestanden heute?",
+  "page.home.greetingAnonMorning2": "Guten Morgen! Die Vögel zwitschern schon...",
+  "page.home.greetingAnonAfternoon0": "Moin moin! Mittagspause oder fleißig bei der Arbeit?",
+  "page.home.greetingAnonAfternoon1": "Servus! Schon gegessen?",
+  "page.home.greetingAnonAfternoon2": "Hey, noch wach nach dem Mittagessen?",
+  "page.home.greetingAnonEvening0": "Nabend! Feierabend verdient?",
+  "page.home.greetingAnonEvening1": "Guten Abend! Schon was Schönes erlebt heute?",
+  "page.home.greetingAnonEvening2": "Hey, langer Tag oder?",
+  "page.home.greetingAnonNight0": "Nabend, so spät noch auf?",
+  "page.home.greetingAnonNight1": "Schön, dass noch jemand wach ist, zu dieser späten Stunde!",
+  "page.home.greetingAnonNight2": "Was treibt dich um diese Uhrzeit noch hierher?",
+
   "page.about.introduction": "mein Name ist Tim, Softwareentwickler aus Norddeutschland. Ich habe im Finanzamt gearbeitet, ein duales Studium im Vertrieb abgebrochen und wahre Leidenschaft in der Programmierung, speziell in der Web- / Infrastruktur-Entwicklung bei @otto und @stadtwerk.",
   "page.about.weirdJsText1": "Ich probiere gerne neue und verrückte Dinge aus <a href=\"https://github.com/timlohse1104/js-implicit-type-coercion/blob/main/tc-compiler/compiler.js\">wie das</a>",
   "page.about.weirdJsText2": "oder <a href=\"https://github.com/timlohse1104/adventofcode/blob/main/2022/07/solution.js\">wie das</a>",
diff --git a/frontend/src/lib/config/en.json b/frontend/src/lib/config/en.json
index e6b3ae68..47b3ca78 100644
--- a/frontend/src/lib/config/en.json
+++ b/frontend/src/lib/config/en.json
@@ -2,6 +2,30 @@
   "page.home.jokeTitle": "Joke of the day",
   "page.home.jokeLoading": "Loading joke of the day...",
   "page.home.searchPlaceholder": "Web search",
+  "page.home.greetingMorning0": "Morning {{username}}! Had your first coffee yet?",
+  "page.home.greetingMorning1": "Hey {{username}}, up early today?",
+  "page.home.greetingMorning2": "Good morning {{username}}! The birds are already singing...",
+  "page.home.greetingAfternoon0": "Hey {{username}}! Lunch break or still grinding?",
+  "page.home.greetingAfternoon1": "Yo {{username}}! Had lunch yet?",
+  "page.home.greetingAfternoon2": "Hey {{username}}, still awake after lunch?",
+  "page.home.greetingEvening0": "Evening {{username}}, well deserved end of day!",
+  "page.home.greetingEvening1": "Good evening {{username}}! Did anything interesting happen today?",
+  "page.home.greetingEvening2": "Hey {{username}}, long day huh?",
+  "page.home.greetingNight0": "Hey {{username}}, still up this late?",
+  "page.home.greetingNight1": "Good to see you {{username}}, at this hour!",
+  "page.home.greetingNight2": "{{username}}! What brings you here at this time of night?",
+  "page.home.greetingAnonMorning0": "Morning! Had your first coffee yet?",
+  "page.home.greetingAnonMorning1": "Hey, up early today?",
+  "page.home.greetingAnonMorning2": "Good morning! The birds are already singing...",
+  "page.home.greetingAnonAfternoon0": "Hey! Lunch break or still grinding?",
+  "page.home.greetingAnonAfternoon1": "Yo! Had lunch yet?",
+  "page.home.greetingAnonAfternoon2": "Hey, still awake after lunch?",
+  "page.home.greetingAnonEvening0": "Evening! Well deserved end of day?",
+  "page.home.greetingAnonEvening1": "Good evening! Did anything interesting happen today?",
+  "page.home.greetingAnonEvening2": "Hey, long day huh?",
+  "page.home.greetingAnonNight0": "Still up this late?",
+  "page.home.greetingAnonNight1": "Good to see someone still awake at this hour!",
+  "page.home.greetingAnonNight2": "What brings you here at this time of night?",
   "page.about.introduction": "my name is Tim, a software developer from northern Germany. I started working in a tax office, broke up dual studies as a sales man and found true passion in programming and especially web / infrastructure development @otto and @stadtwerk gefunden.",
   "page.about.weirdJsText1": "I like to try out new and weird things <a href=\"https://github.com/timlohse1104/js-implicit-type-coercion/blob/main/tc-compiler/compiler.js\">like this</a>",
   "page.about.weirdJsText2": "or <a href=\"https://github.com/timlohse1104/adventofcode/blob/main/2022/07/solution.js\">like this</a>",
diff --git a/frontend/src/lib/util/translations.ts b/frontend/src/lib/util/translations.ts
index 10d7bd6c..06f95323 100644
--- a/frontend/src/lib/util/translations.ts
+++ b/frontend/src/lib/util/translations.ts
@@ -19,6 +19,7 @@ interface Params {
   fromYear: string;
   toYear: string;
   points: string;
+  username: string;
 }
 
 const config: Config<Partial<Params>> = {
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 26897c0d..f1ae8b65 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { page } from '$app/stores';
+  import { verifyId } from '$lib/api/admin.api';
   import GlobalLogin from '$lib/components/shared/GlobalLogin.svelte';
   import Header from '$lib/components/shared/Header.svelte';
   import { backgroundStore } from '$lib/util/stores/store-background';
@@ -17,8 +18,22 @@
   import '@fontsource/londrina-solid';
   import 'carbon-components-svelte/css/all.css';
   import './styles.css';
+  import { onMount } from 'svelte';
 
   $: isVerified = $identifierStore ? true : false;
+
+  onMount(async () => {
+    if ($identifierStore) {
+      try {
+        const result = await verifyId($identifierStore, 'user');
+        if (!result?.isVerified) {
+          $identifierStore = '';
+        }
+      } catch {
+        $identifierStore = '';
+      }
+    }
+  });
   $: locale = $languageStore;
   $: isAdminRoute = $page.url.pathname.replace('/', '') === 'admin';
   $: theme = $themeStore;
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 8f1addc6..972a590e 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   // 1. IMPORTS
+  import Greeting from '$lib/components/home/Greeting.svelte';
   import JokeOfTheDay from '$lib/components/home/JokeOfTheDay.svelte';
-  import Navigation from '$lib/components/shared/Navigation.svelte';
-  import { activeApplicationRoutes, applicationRoutes } from '$lib/config/applications';
+  import { applicationRoutes } from '$lib/config/applications';
   import { TogglesEnum } from '$lib/types/toggle.dto';
   import { languageStore } from '$lib/util/stores/store-language';
   import { getToggleValue } from '$lib/util/toggle';
@@ -38,7 +38,7 @@
 </svelte:head>
 
 <section>
-  <Navigation routes={$activeApplicationRoutes} />
+  <Greeting />
 
   {#if randomJokeToggle}
     <JokeOfTheDay />

From 69d3939416813a7ae7137d9b5f4d85f3133bd94b Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Mon, 23 Mar 2026 00:29:16 +0100
Subject: [PATCH 05/19] =?UTF-8?q?=F0=9F=90=9B=20Fix=20global=20letter-spac?=
 =?UTF-8?q?ing=20not=20applying=20to=20text=20elements=20due=20to=20Carbon?=
 =?UTF-8?q?=20CSS=20token=20overrides.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                   | 4 ++++
 frontend/src/routes/styles.css | 7 ++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 520d2746..f98bce45 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - [home] Replace Navigation grid on homepage with a time-based greeting component that addresses the current user by their identifier (morning/afternoon/evening/night, DE + EN).
 
+### Fixed
+
+- [global] Fix letter-spacing not applying to text elements: Carbon CSS explicitly sets `letter-spacing` via its own tokens on `p`, `h1`, etc., overriding the inherited `body` value. Added `body * { letter-spacing: var(--letter-spacing) !important }` to enforce the global spacing across all child elements.
+
 ### Changed
 
 - [todo] Replace raw view-toggle buttons with Carbon Buttons (ghost/secondary/danger); add vertical divider between view toggles and cleanup button; replace raw mobile-edit button with Carbon ghost Button; edit button now always visible directly before delete button; add subtle dark row background with hover highlight; add `--default_padding` gap between edit and delete buttons; indent category headers by `--default_padding / 2`.
diff --git a/frontend/src/routes/styles.css b/frontend/src/routes/styles.css
index 5a275a94..7abc4740 100644
--- a/frontend/src/routes/styles.css
+++ b/frontend/src/routes/styles.css
@@ -21,19 +21,20 @@
   --font-display:
     'Londrina Solid', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
   --font-mono: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', Courier, monospace;
-  --letter-spacing: 0.05em;
+  --letter-spacing: 0.075em;
 }
 
 body {
   margin: 0;
   overflow: hidden;
   font-family: var(--font-display) !important;
-  letter-spacing: var(--letter-spacing);
+  letter-spacing: var(--letter-spacing) !important;
 }
 
+body *,
 [class*='bx--'] {
   font-family: var(--font-display) !important;
-  letter-spacing: var(--letter-spacing);
+  letter-spacing: var(--letter-spacing) !important;
 }
 
 code,

From 8b473ad16565234f50d7654f06ad0497f4abe25d Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Mon, 23 Mar 2026 00:42:15 +0100
Subject: [PATCH 06/19] =?UTF-8?q?=F0=9F=9A=80=20Replace=20emoji=20storage?=
 =?UTF-8?q?=20indicator=20in=20header=20with=20colored=20Carbon=20Cloud/Cl?=
 =?UTF-8?q?oudOffline=20icons.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                  |  4 +++
 .../src/lib/components/shared/Header.svelte   | 27 ++++++++++++-------
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f98bce45..b1390751 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - [home] Replace Navigation grid on homepage with a time-based greeting component that addresses the current user by their identifier (morning/afternoon/evening/night, DE + EN).
 
+### Changed
+
+- [global] Replace emoji storage-state indicator (🌐/📴) in header with colored Carbon Cloud/CloudOffline icons displayed inline after the page title.
+
 ### Fixed
 
 - [global] Fix letter-spacing not applying to text elements: Carbon CSS explicitly sets `letter-spacing` via its own tokens on `p`, `h1`, etc., overriding the inherited `body` value. Added `body * { letter-spacing: var(--letter-spacing) !important }` to enforce the global spacing across all child elements.
diff --git a/frontend/src/lib/components/shared/Header.svelte b/frontend/src/lib/components/shared/Header.svelte
index 006c65be..6ad11186 100644
--- a/frontend/src/lib/components/shared/Header.svelte
+++ b/frontend/src/lib/components/shared/Header.svelte
@@ -4,6 +4,8 @@
   import { sharedIdentifierStore } from '$lib/util/stores/store-other';
   import { t } from '$lib/util/translations';
   import Button from 'carbon-components-svelte/src/Button/Button.svelte';
+  import Cloud from 'carbon-icons-svelte/lib/Cloud.svelte';
+  import CloudOffline from 'carbon-icons-svelte/lib/CloudOffline.svelte';
   import GlobalMenu from './GlobalMenu.svelte';
 
   export let locale;
@@ -45,15 +47,12 @@
       <h2>
         <svelte:component this={currentPage?.icon} />
         {currentPage?.name?.[locale]}
-      </h2>
-
-      <p>
         {#if $sharedIdentifierStore.id}
-          <span style="color: green !important">🌐 Cloud</span>
+          <Cloud class="storage-icon storage-icon--cloud" />
         {:else}
-          <span style="color: red !important">📴 Lokal</span>
+          <CloudOffline class="storage-icon storage-icon--offline" />
         {/if}
-      </p>
+      </h2>
     </div>
 
     <GlobalMenu {locale} />
@@ -97,8 +96,18 @@
     justify-content: center;
   }
 
-  p {
-    font-size: 0.8em;
-    margin: 0 0 0 1rem;
+  :global(.storage-icon) {
+    vertical-align: middle;
+    margin-left: 0.4rem;
+    width: 1rem;
+    height: 1rem;
+  }
+
+  :global(.storage-icon--cloud) {
+    color: #42be65;
+  }
+
+  :global(.storage-icon--offline) {
+    color: #fa4d56;
   }
 </style>

From a8c184fe3cbf1449ed915941bae1639a9627ab24 Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Mon, 23 Mar 2026 00:47:59 +0100
Subject: [PATCH 07/19] =?UTF-8?q?=F0=9F=9A=80=20Decreased=20letter-spacing?=
 =?UTF-8?q?=20for=20better=20readability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/routes/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/routes/styles.css b/frontend/src/routes/styles.css
index 7abc4740..2a2122d6 100644
--- a/frontend/src/routes/styles.css
+++ b/frontend/src/routes/styles.css
@@ -21,7 +21,7 @@
   --font-display:
     'Londrina Solid', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
   --font-mono: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', Courier, monospace;
-  --letter-spacing: 0.075em;
+  --letter-spacing: 0.06em;
 }
 
 body {

From 8bfd51d660a5bf9f98c51a39a9983493ed738032 Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Mon, 23 Mar 2026 00:58:05 +0100
Subject: [PATCH 08/19] =?UTF-8?q?=F0=9F=9A=80=20Increase=20header=20route?=
 =?UTF-8?q?=20icon=20size=20and=20align=20with=20flexbox=20gap.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                     |  1 +
 frontend/src/lib/components/shared/Header.svelte | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b1390751..88fcaa6c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - [global] Replace emoji storage-state indicator (🌐/📴) in header with colored Carbon Cloud/CloudOffline icons displayed inline after the page title.
+- [global] Increase header route icon size to `1em` (relative to h2 font-size) and align it using flexbox with `gap: 0.3em`.
 
 ### Fixed
 
diff --git a/frontend/src/lib/components/shared/Header.svelte b/frontend/src/lib/components/shared/Header.svelte
index 6ad11186..04c97626 100644
--- a/frontend/src/lib/components/shared/Header.svelte
+++ b/frontend/src/lib/components/shared/Header.svelte
@@ -79,6 +79,15 @@
     h2 {
       margin: 0;
       font-size: 2em;
+      display: flex;
+      align-items: center;
+      gap: 0.3em;
+
+      :global(svg:first-child) {
+        width: 1em;
+        height: 1em;
+        flex-shrink: 0;
+      }
 
       @media #{$phone} {
         font-size: 1.2em;
@@ -97,10 +106,9 @@
   }
 
   :global(.storage-icon) {
-    vertical-align: middle;
-    margin-left: 0.4rem;
-    width: 1rem;
-    height: 1rem;
+    width: 0.75em;
+    height: 0.75em;
+    flex-shrink: 0;
   }
 
   :global(.storage-icon--cloud) {

From 20e12493eb9d20e085d0686cc4c983c3005c051c Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Mon, 23 Mar 2026 01:05:47 +0100
Subject: [PATCH 09/19] =?UTF-8?q?=F0=9F=90=9B=20Fix=20GlobalMenu=20showing?=
 =?UTF-8?q?=20apps=20with=20inactive=20toggles=20by=20defaulting=20to=20fa?=
 =?UTF-8?q?lse.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                    | 1 +
 frontend/src/lib/util/toggle.ts | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 88fcaa6c..ff91e808 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- [global] Fix GlobalMenu showing apps with inactive toggles: `getToggleValue` was defaulting to `true` when a toggle key was missing or unreachable, causing all apps to appear. Changed default to `false` so apps are only shown when their toggle is explicitly enabled.
 - [global] Fix letter-spacing not applying to text elements: Carbon CSS explicitly sets `letter-spacing` via its own tokens on `p`, `h1`, etc., overriding the inherited `body` value. Added `body * { letter-spacing: var(--letter-spacing) !important }` to enforce the global spacing across all child elements.
 
 ### Changed
diff --git a/frontend/src/lib/util/toggle.ts b/frontend/src/lib/util/toggle.ts
index c13cad99..563ccbdb 100644
--- a/frontend/src/lib/util/toggle.ts
+++ b/frontend/src/lib/util/toggle.ts
@@ -8,9 +8,9 @@ export const getToggleValue = async (key: string) => {
   });
   if (toggleRes.statusCode && toggleRes.statusCode !== 200) {
     console.warn(
-      `Could not retrieve toggle value for ${key}. Defaulting to true.`,
+      `Could not retrieve toggle value for ${key}. Defaulting to false.`,
     );
-    return true;
+    return false;
   }
   return toggleRes?.value === 'true';
 };

From d4acf6b0b87e242df2821e9703aa2273f42449ae Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Tue, 24 Mar 2026 13:15:21 +0100
Subject: [PATCH 10/19] =?UTF-8?q?=F0=9F=9A=80=20Hide=20header=20and=20redi?=
 =?UTF-8?q?rect=20to=20home=20when=20identifier=20is=20missing=20or=20inva?=
 =?UTF-8?q?lid.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                       |  1 +
 frontend/src/routes/+layout.svelte | 15 +++++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ff91e808..947c7696 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- [global] Hide header and redirect to home route when no valid identifier is set; login input is shown full-screen without navigation elements.
 - [global] Replace emoji storage-state indicator (🌐/📴) in header with colored Carbon Cloud/CloudOffline icons displayed inline after the page title.
 - [global] Increase header route icon size to `1em` (relative to h2 font-size) and align it using flexbox with `gap: 0.3em`.
 
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index f1ae8b65..f65c7c2a 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { browser } from '$app/environment';
+  import { goto } from '$app/navigation';
   import { verifyId } from '$lib/api/admin.api';
   import GlobalLogin from '$lib/components/shared/GlobalLogin.svelte';
   import Header from '$lib/components/shared/Header.svelte';
@@ -21,6 +22,7 @@
   import { onMount } from 'svelte';
 
   $: isVerified = $identifierStore ? true : false;
+  $: if (!isVerified && browser) goto('/');
 
   onMount(async () => {
     if ($identifierStore) {
@@ -35,7 +37,6 @@
     }
   });
   $: locale = $languageStore;
-  $: isAdminRoute = $page.url.pathname.replace('/', '') === 'admin';
   $: theme = $themeStore;
   $: document.documentElement.setAttribute('theme', theme);
   $: getAppClasses = `app background_${$backgroundStore}_${$themeStore === darkThemeValue ? 'dark' : 'light'}`;
@@ -60,11 +61,13 @@
     </div>
   {/if}
 
-  <Header {locale} />
+  {#if isVerified}
+    <Header {locale} />
+  {/if}
 
   {#if !isVerified}
     <div class="login_container">
-      <GlobalLogin {isVerified} isAdminLogin={isAdminRoute} />
+      <GlobalLogin {isVerified} />
     </div>
   {:else}
     <main>
@@ -118,8 +121,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 80vh;
-    height: 80dvh;
+    height: 100vh;
+    height: 100dvh;
   }
 
   .confetti_container {

From fe938687f1ef441e0acdefae0790fb0a9680e47f Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Tue, 24 Mar 2026 13:35:33 +0100
Subject: [PATCH 11/19] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20login=20P?=
 =?UTF-8?q?asswordInput=20placeholder=20and=20showPasswordLabel=20into=20i?=
 =?UTF-8?q?18n.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/shared/GlobalLogin.svelte | 5 +++--
 frontend/src/lib/config/de.json                       | 3 +++
 frontend/src/lib/config/en.json                       | 3 +++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/shared/GlobalLogin.svelte b/frontend/src/lib/components/shared/GlobalLogin.svelte
index b3c1de45..472e252e 100644
--- a/frontend/src/lib/components/shared/GlobalLogin.svelte
+++ b/frontend/src/lib/components/shared/GlobalLogin.svelte
@@ -14,7 +14,7 @@
     token = $bindable(''),
     isVerified = $bindable(false),
     isAdminLogin = false,
-    callback = async () => {}
+    callback = async () => {},
   } = $props();
 
   // 3. STATE
@@ -60,7 +60,8 @@
 <div class="verify_content">
   <div>
     <PasswordInput
-      placeholder={isAdminLogin ? 'Admin ID' : 'User ID'}
+      placeholder={isAdminLogin ? $t('page.shared.login.adminPlaceholder') : $t('page.shared.login.placeholder')}
+      showPasswordLabel={$t('page.shared.login.showPasswordLabel')}
       size="xl"
       bind:value={token}
       on:keyup={(event) => {
diff --git a/frontend/src/lib/config/de.json b/frontend/src/lib/config/de.json
index 8e269d2f..52fe99dd 100644
--- a/frontend/src/lib/config/de.json
+++ b/frontend/src/lib/config/de.json
@@ -327,6 +327,9 @@
   "page.shared.button.github": "Github Seite öffnen",
   "page.shared.button.settings": "Einstellungen öffnen",
   "page.shared.button.stadtwerk": "stadt.werk Seite öffnen",
+  "page.shared.login.placeholder": "Login",
+  "page.shared.login.adminPlaceholder": "Admin Login",
+  "page.shared.login.showPasswordLabel": "Passwort anzeigen",
   "page.shared.verificationError": "ID Verifikation ist fehlgeschlagen.",
   "page.shared.admin.verificationError": "Admin ID konnte nicht verifiziert werden.",
   "page.shared.user.verificationError": "User ID konnte nicht verifiziert werden.",
diff --git a/frontend/src/lib/config/en.json b/frontend/src/lib/config/en.json
index 47b3ca78..4568f848 100644
--- a/frontend/src/lib/config/en.json
+++ b/frontend/src/lib/config/en.json
@@ -326,6 +326,9 @@
   "page.shared.button.github": "Open github page",
   "page.shared.button.stadtwerk": "Open stadtwerk page",
   "page.shared.button.settings": "Open settings",
+  "page.shared.login.placeholder": "Login",
+  "page.shared.login.adminPlaceholder": "Admin Login",
+  "page.shared.login.showPasswordLabel": "Show password",
   "page.shared.verificationError": "Verification of ID failed.",
   "page.shared.admin.verificationError": "Admin ID could not be verified.",
   "page.shared.user.verificationError": "User ID could not be verified.",

From d11fd2a228fdbf57c5b4c31b5e778b0a8ba14bdc Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Tue, 24 Mar 2026 13:41:53 +0100
Subject: [PATCH 12/19] =?UTF-8?q?=E2=9C=A8=20Add=20primary=20login=20butto?=
 =?UTF-8?q?n=20with=20icon=20next=20to=20password=20input=20field.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../lib/components/shared/GlobalLogin.svelte  | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/shared/GlobalLogin.svelte b/frontend/src/lib/components/shared/GlobalLogin.svelte
index 472e252e..303b7171 100644
--- a/frontend/src/lib/components/shared/GlobalLogin.svelte
+++ b/frontend/src/lib/components/shared/GlobalLogin.svelte
@@ -5,8 +5,10 @@
   import { identifierStore } from '$lib/util/stores/store-identifier';
   import { celebrate } from '$lib/util/stores/stores-global';
   import { t } from '$lib/util/translations';
+  import Button from 'carbon-components-svelte/src/Button/Button.svelte';
   import InlineNotification from 'carbon-components-svelte/src/Notification/InlineNotification.svelte';
   import PasswordInput from 'carbon-components-svelte/src/TextInput/PasswordInput.svelte';
+  import Login from 'carbon-icons-svelte/lib/Login.svelte';
   import { fade } from 'svelte/transition';
 
   // 2. PROPS
@@ -58,7 +60,7 @@
 </script>
 
 <div class="verify_content">
-  <div>
+  <div class="input_row">
     <PasswordInput
       placeholder={isAdminLogin ? $t('page.shared.login.adminPlaceholder') : $t('page.shared.login.placeholder')}
       showPasswordLabel={$t('page.shared.login.showPasswordLabel')}
@@ -68,6 +70,7 @@
         if (isEnter(event)) verify();
       }}
     />
+    <Button kind="primary" icon={Login} iconDescription="Login" on:click={verify} class="login_button" />
   </div>
 </div>
 
@@ -96,4 +99,18 @@
     width: 100%;
     height: 100%;
   }
+
+  .input_row {
+    display: flex;
+    align-items: stretch;
+  }
+
+  :global(.bx--btn.login_button) {
+    min-height: unset;
+    height: 100%;
+    padding: 0 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 </style>

From cdb5cbd9e195cf66e955a4edceba10bd64b65bd6 Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Tue, 24 Mar 2026 13:46:07 +0100
Subject: [PATCH 13/19] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20Carbon=20?=
 =?UTF-8?q?icon=20button=20centering=20into=20shared=20mixin.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/shared/GlobalLogin.svelte  |  6 +++---
 .../src/lib/components/shared/GlobalMenu.svelte   | 15 ++-------------
 frontend/src/lib/components/shared/Header.svelte  |  4 +---
 frontend/src/lib/styles/variables.scss            |  6 ++++++
 4 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/frontend/src/lib/components/shared/GlobalLogin.svelte b/frontend/src/lib/components/shared/GlobalLogin.svelte
index 303b7171..eacdf18f 100644
--- a/frontend/src/lib/components/shared/GlobalLogin.svelte
+++ b/frontend/src/lib/components/shared/GlobalLogin.svelte
@@ -91,6 +91,8 @@
 {/if}
 
 <style lang="scss">
+  @use '../../styles/variables.scss' as *;
+
   .verify_content {
     display: flex;
     flex-direction: column;
@@ -106,11 +108,9 @@
   }
 
   :global(.bx--btn.login_button) {
+    @include carbon-icon-button;
     min-height: unset;
     height: 100%;
     padding: 0 1rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
   }
 </style>
diff --git a/frontend/src/lib/components/shared/GlobalMenu.svelte b/frontend/src/lib/components/shared/GlobalMenu.svelte
index e8db6567..07dd3d48 100644
--- a/frontend/src/lib/components/shared/GlobalMenu.svelte
+++ b/frontend/src/lib/components/shared/GlobalMenu.svelte
@@ -94,24 +94,13 @@
 <style lang="scss">
   @use '../../styles/variables.scss' as *;
 
-  :global(.bx--btn.global_menu) {
-    padding: 0;
-    margin: 0;
-    height: 3rem;
-    width: 3rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
+  :global(.bx--btn.global_menu),
   :global(.bx--btn.global_menu_footer_buttons) {
+    @include carbon-icon-button;
     padding: 0;
     margin: 0;
     height: 3rem;
     width: 3rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
   }
 
   aside {
diff --git a/frontend/src/lib/components/shared/Header.svelte b/frontend/src/lib/components/shared/Header.svelte
index 04c97626..e34f77d4 100644
--- a/frontend/src/lib/components/shared/Header.svelte
+++ b/frontend/src/lib/components/shared/Header.svelte
@@ -96,13 +96,11 @@
   }
 
   :global(.bx--btn.home_button) {
+    @include carbon-icon-button;
     padding: 0;
     margin: 0;
     height: 3rem;
     width: 3rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
   }
 
   :global(.storage-icon) {
diff --git a/frontend/src/lib/styles/variables.scss b/frontend/src/lib/styles/variables.scss
index 41f8335a..09155703 100644
--- a/frontend/src/lib/styles/variables.scss
+++ b/frontend/src/lib/styles/variables.scss
@@ -2,6 +2,12 @@ $phone: 'only screen and (max-width : 767px)';
 $tablet: 'only screen and (max-width : 1152px)';
 $wide: 'only screen and (min-width : 2200px)';
 
+@mixin carbon-icon-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 @mixin mem_button {
   margin: 0;
   padding: 0;

From d2c39de3483df710cb56dc37452b517ff83b702f Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Tue, 24 Mar 2026 13:53:24 +0100
Subject: [PATCH 14/19] =?UTF-8?q?=F0=9F=9A=9A=20Remove=20footer=20image=20?=
 =?UTF-8?q?buttons=20from=20GlobalMenu=20and=20simplify=20footer=20layout.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../lib/components/shared/GlobalMenu.svelte   | 59 ++-----------------
 frontend/src/lib/config/de.json               |  3 +-
 2 files changed, 7 insertions(+), 55 deletions(-)

diff --git a/frontend/src/lib/components/shared/GlobalMenu.svelte b/frontend/src/lib/components/shared/GlobalMenu.svelte
index 07dd3d48..fa26fcb8 100644
--- a/frontend/src/lib/components/shared/GlobalMenu.svelte
+++ b/frontend/src/lib/components/shared/GlobalMenu.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
-  import { activeApplicationRoutes, utilityRoutes } from '$lib/config/applications';
+  import {
+    activeApplicationRoutes,
+    utilityRoutes,
+  } from '$lib/config/applications';
   import { initialized, t } from '$lib/util/translations';
   import Button from 'carbon-components-svelte/src/Button/Button.svelte';
   import Menu from 'carbon-icons-svelte/lib/Menu.svelte';
@@ -62,29 +65,7 @@
     </ul>
 
     <footer>
-      <Button
-        kind="tertiary"
-        iconDescription={$t('page.shared.button.github')}
-        href="https://github.com/timlohse1104"
-        target="_blank"
-        class="global_menu_footer_buttons"
-      >
-        <img src={'/images/links/github-dark.svg'} alt="GitHub" />
-      </Button>
       <p>{$t('page.shared.madeByText')}</p>
-      <Button
-        kind="tertiary"
-        iconDescription={$t('page.shared.button.stadtwerk')}
-        href="https://stadtwerk.org"
-        target="_blank"
-        class="global_menu_footer_buttons"
-      >
-        <img
-          src={'/images/links/stadtwerk-logo.svg'}
-          style="height: 3em;"
-          alt="stadtwerk"
-        />
-      </Button>
     </footer>
   {:else}
     <section>Locale initializing...</section>
@@ -94,8 +75,7 @@
 <style lang="scss">
   @use '../../styles/variables.scss' as *;
 
-  :global(.bx--btn.global_menu),
-  :global(.bx--btn.global_menu_footer_buttons) {
+  :global(.bx--btn.global_menu) {
     @include carbon-icon-button;
     padding: 0;
     margin: 0;
@@ -212,36 +192,9 @@
   footer {
     position: fixed;
     bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
-    left: 0;
     width: 100%;
-    text-align: center;
     font-size: 1rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    @media #{$phone} {
-      font-size: 0.7rem;
-      flex-wrap: wrap;
-      gap: 0.25rem;
-    }
-
-    p {
-      margin: 0 2rem 0 2rem;
-
-      @media #{$phone} {
-        font-size: 0.7rem;
-        margin: 0;
-        width: 100%;
-        order: -1;
-      }
-    }
-
-    img {
-      width: 2em;
-      height: 2em;
-      object-fit: contain;
-    }
+    padding-left: calc(var(--default_padding) * 2);
   }
 
   @starting-style {
diff --git a/frontend/src/lib/config/de.json b/frontend/src/lib/config/de.json
index 52fe99dd..91c3e81d 100644
--- a/frontend/src/lib/config/de.json
+++ b/frontend/src/lib/config/de.json
@@ -26,7 +26,6 @@
   "page.home.greetingAnonNight0": "Nabend, so spät noch auf?",
   "page.home.greetingAnonNight1": "Schön, dass noch jemand wach ist, zu dieser späten Stunde!",
   "page.home.greetingAnonNight2": "Was treibt dich um diese Uhrzeit noch hierher?",
-
   "page.about.introduction": "mein Name ist Tim, Softwareentwickler aus Norddeutschland. Ich habe im Finanzamt gearbeitet, ein duales Studium im Vertrieb abgebrochen und wahre Leidenschaft in der Programmierung, speziell in der Web- / Infrastruktur-Entwicklung bei @otto und @stadtwerk.",
   "page.about.weirdJsText1": "Ich probiere gerne neue und verrückte Dinge aus <a href=\"https://github.com/timlohse1104/js-implicit-type-coercion/blob/main/tc-compiler/compiler.js\">wie das</a>",
   "page.about.weirdJsText2": "oder <a href=\"https://github.com/timlohse1104/adventofcode/blob/main/2022/07/solution.js\">wie das</a>",
@@ -303,7 +302,7 @@
   "page.admin.activities.created": "erstellt",
   "page.admin.activities.updated": "aktualisiert",
   "page.shared.burgerMenuTitle": "Anwendungen",
-  "page.shared.madeByText": "Entwickelt von Tilloh mit 💙",
+  "page.shared.madeByText": "Mit 💙 von Tilloh entwickelt!",
   "page.shared.toggledSiteHeadline": "Diese Anwendung wurde vorübergehend deaktiviert.",
   "page.shared.toggledSiteTryAgainText": "Versuche es später erneut. ¯\\_(ツ)_/¯",
   "page.shared.toggledSiteBackButtonText": "Zurück zur Startseite",

From 39081ae8572ea1b16a5aa41d544beb0d3e9eb091 Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Tue, 24 Mar 2026 15:49:20 +0100
Subject: [PATCH 15/19] =?UTF-8?q?=F0=9F=93=B1=20Widen=20login=20input=20ro?=
 =?UTF-8?q?w=20responsively=20across=20all=20screen=20sizes.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/shared/GlobalLogin.svelte    | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/frontend/src/lib/components/shared/GlobalLogin.svelte b/frontend/src/lib/components/shared/GlobalLogin.svelte
index eacdf18f..3646edc4 100644
--- a/frontend/src/lib/components/shared/GlobalLogin.svelte
+++ b/frontend/src/lib/components/shared/GlobalLogin.svelte
@@ -105,6 +105,19 @@
   .input_row {
     display: flex;
     align-items: stretch;
+    width: 40%;
+
+    @media #{$tablet} {
+      width: 60%;
+    }
+
+    @media #{$phone} {
+      width: 95%;
+    }
+  }
+
+  :global(.bx--text-input-wrapper) {
+    width: 100%;
   }
 
   :global(.bx--btn.login_button) {

From 9dbe4fc720cdf1456fd3c8b92b13b8195e2d94e6 Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Tue, 24 Mar 2026 21:10:40 +0100
Subject: [PATCH 16/19] =?UTF-8?q?=F0=9F=90=9B=20Fix=20admin=20accordion=20?=
 =?UTF-8?q?list=20items=20not=20spanning=20full=20width.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/styles.css | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/routes/styles.css b/frontend/src/routes/styles.css
index 2a2122d6..2b387e04 100644
--- a/frontend/src/routes/styles.css
+++ b/frontend/src/routes/styles.css
@@ -224,6 +224,10 @@ button:focus:not(:focus-visible) {
 }
 
 /* Carbon Accordion Overrides - Admin Lists*/
+.bx--accordion__content {
+  padding-left: 0;
+  padding-right: 0;
+}
 .admin_list_item_headline {
   display: flex;
   align-items: center;
@@ -238,14 +242,12 @@ button:focus:not(:focus-visible) {
   padding-left: calc(var(--default_padding) / 2);
   padding-right: calc(var(--default_padding) / 2);
   width: 100%;
+  box-sizing: border-box;
 }
 .admin_list_button_group {
   display: flex;
   gap: 0.25rem;
 }
-.custom_accordion_content .bx--accordion__content {
-  padding-right: 0;
-}
 
 /* Carbon Drop Container Overrides*/
 .bx--file__drop-container {

From db4f51971bf729935770c8fe02729940d980623e Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Tue, 24 Mar 2026 21:39:54 +0100
Subject: [PATCH 17/19] =?UTF-8?q?=F0=9F=9A=80=20Replace=20broken=20date/ID?=
 =?UTF-8?q?=20emojis=20with=20Carbon=20icons=20across=20admin=20and=20feat?=
 =?UTF-8?q?ure=20components.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                         |  1 +
 frontend/src/lib/components/admin/Activities.svelte  | 10 ++++------
 frontend/src/lib/components/admin/Identifiers.svelte | 12 +++++-------
 frontend/src/lib/components/admin/Jokes.svelte       | 12 +++++-------
 frontend/src/lib/components/admin/LinkPresets.svelte | 12 +++++-------
 frontend/src/lib/components/admin/Toggles.svelte     | 12 +++++-------
 frontend/src/lib/components/home/JokeOfTheDay.svelte |  6 +++++-
 frontend/src/lib/components/jokes/Jokes.svelte       |  9 ++++++++-
 frontend/src/routes/styles.css                       |  6 ++++++
 9 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 947c7696..27511926 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- [global] Replace broken date/ID emojis with Carbon `EventSchedule` and `Identification` icons across admin and feature components (Identifiers, Toggles, LinkPresets, Activities, Jokes, JokeOfTheDay).
 - [global] Hide header and redirect to home route when no valid identifier is set; login input is shown full-screen without navigation elements.
 - [global] Replace emoji storage-state indicator (🌐/📴) in header with colored Carbon Cloud/CloudOffline icons displayed inline after the page title.
 - [global] Increase header route icon size to `1em` (relative to h2 font-size) and align it using flexbox with `gap: 0.3em`.
diff --git a/frontend/src/lib/components/admin/Activities.svelte b/frontend/src/lib/components/admin/Activities.svelte
index f0b9c379..004b7bc4 100644
--- a/frontend/src/lib/components/admin/Activities.svelte
+++ b/frontend/src/lib/components/admin/Activities.svelte
@@ -5,7 +5,9 @@
   import AccordionItem from 'carbon-components-svelte/src/Accordion/AccordionItem.svelte';
   import CopyButton from 'carbon-components-svelte/src/CopyButton/CopyButton.svelte';
   import InlineNotification from 'carbon-components-svelte/src/Notification/InlineNotification.svelte';
+  import EventSchedule from 'carbon-icons-svelte/lib/EventSchedule.svelte';
   import FaceActivated from 'carbon-icons-svelte/lib/FaceActivated.svelte';
+  import Identification from 'carbon-icons-svelte/lib/Identification.svelte';
   import Information from 'carbon-icons-svelte/lib/Information.svelte';
   import Link from 'carbon-icons-svelte/lib/Link.svelte';
   import User from 'carbon-icons-svelte/lib/User.svelte';
@@ -56,12 +58,8 @@
           </svelte:fragment>
           <div class="admin_list_item_content">
             <div>
-              <p>
-                📅{new Date(activity.updated).toLocaleString('de-DE')}
-              </p>
-              <p>
-                🆔{activity.id}
-              </p>
+              <p><EventSchedule />{new Date(activity.updated).toLocaleString('de-DE')}</p>
+              <p><Identification />{activity.id}</p>
             </div>
             <CopyButton
               text={activity.id}
diff --git a/frontend/src/lib/components/admin/Identifiers.svelte b/frontend/src/lib/components/admin/Identifiers.svelte
index f1f1ec0b..1e862683 100644
--- a/frontend/src/lib/components/admin/Identifiers.svelte
+++ b/frontend/src/lib/components/admin/Identifiers.svelte
@@ -12,7 +12,9 @@
   import CopyButton from 'carbon-components-svelte/src/CopyButton/CopyButton.svelte';
   import InlineNotification from 'carbon-components-svelte/src/Notification/InlineNotification.svelte';
   import Add from 'carbon-icons-svelte/lib/Add.svelte';
+  import EventSchedule from 'carbon-icons-svelte/lib/EventSchedule.svelte';
   import FingerprintRecognition from 'carbon-icons-svelte/lib/FingerprintRecognition.svelte';
+  import Identification from 'carbon-icons-svelte/lib/Identification.svelte';
   import TrashCan from 'carbon-icons-svelte/lib/TrashCan.svelte';
   import InputWithButton from '../shared/custom-carbon-components/InputWithButton.svelte';
 
@@ -78,13 +80,9 @@
           </svelte:fragment>
           <div class="admin_list_item_content">
             <div>
-              <p>
-                ✨{new Date(identifier.created).toLocaleString('de-DE')}
-                📅{new Date(identifier.updated).toLocaleString('de-DE')}
-              </p>
-              <p>
-                🆔{identifier._id}
-              </p>
+              <p><EventSchedule />{new Date(identifier.created).toLocaleString('de-DE')}</p>
+              <p><EventSchedule />{new Date(identifier.updated).toLocaleString('de-DE')}</p>
+              <p><Identification />{identifier._id}</p>
             </div>
             <div class="admin_list_button_group">
               <CopyButton
diff --git a/frontend/src/lib/components/admin/Jokes.svelte b/frontend/src/lib/components/admin/Jokes.svelte
index 782b9fe6..ee4978ee 100644
--- a/frontend/src/lib/components/admin/Jokes.svelte
+++ b/frontend/src/lib/components/admin/Jokes.svelte
@@ -12,7 +12,9 @@
   import Button from 'carbon-components-svelte/src/Button/Button.svelte';
   import CopyButton from 'carbon-components-svelte/src/CopyButton/CopyButton.svelte';
   import InlineNotification from 'carbon-components-svelte/src/Notification/InlineNotification.svelte';
+  import EventSchedule from 'carbon-icons-svelte/lib/EventSchedule.svelte';
   import FaceActivated from 'carbon-icons-svelte/lib/FaceActivated.svelte';
+  import Identification from 'carbon-icons-svelte/lib/Identification.svelte';
   import TaskApproved from 'carbon-icons-svelte/lib/TaskApproved.svelte';
   import ThumbsUp from 'carbon-icons-svelte/lib/ThumbsUp.svelte';
   import TrashCan from 'carbon-icons-svelte/lib/TrashCan.svelte';
@@ -76,13 +78,9 @@
           </svelte:fragment>
           <div class="admin_list_item_content">
             <div>
-              <p>
-                ✨{formatDate(joke.created)}
-                📅{formatDate(joke.updated)}
-              </p>
-              <p>
-                🆔{joke._id}
-              </p>
+              <p><EventSchedule />{formatDate(joke.created)}</p>
+              <p><EventSchedule />{formatDate(joke.updated)}</p>
+              <p><Identification />{joke._id}</p>
             </div>
             <div class="admin_list_button_group">
               {#if !joke.verified && joke.verified !== undefined}
diff --git a/frontend/src/lib/components/admin/LinkPresets.svelte b/frontend/src/lib/components/admin/LinkPresets.svelte
index fc07ba50..86a0c146 100644
--- a/frontend/src/lib/components/admin/LinkPresets.svelte
+++ b/frontend/src/lib/components/admin/LinkPresets.svelte
@@ -6,6 +6,8 @@
   import Button from 'carbon-components-svelte/src/Button/Button.svelte';
   import CopyButton from 'carbon-components-svelte/src/CopyButton/CopyButton.svelte';
   import InlineNotification from 'carbon-components-svelte/src/Notification/InlineNotification.svelte';
+  import EventSchedule from 'carbon-icons-svelte/lib/EventSchedule.svelte';
+  import Identification from 'carbon-icons-svelte/lib/Identification.svelte';
   import Link from 'carbon-icons-svelte/lib/Link.svelte';
   import TrashCan from 'carbon-icons-svelte/lib/TrashCan.svelte';
   import User from 'carbon-icons-svelte/lib/User.svelte';
@@ -50,13 +52,9 @@
           </svelte:fragment>
           <div class="admin_list_item_content">
             <div>
-              <p>
-                ✨{new Date(linkPreset.created).toLocaleString('de-DE')}
-                📅{new Date(linkPreset.updated).toLocaleString('de-DE')}
-              </p>
-              <p>
-                🆔{linkPreset._id}
-              </p>
+              <p><EventSchedule />{new Date(linkPreset.created).toLocaleString('de-DE')}</p>
+              <p><EventSchedule />{new Date(linkPreset.updated).toLocaleString('de-DE')}</p>
+              <p><Identification />{linkPreset._id}</p>
             </div>
             <div class="admin_list_button_group">
               <CopyButton
diff --git a/frontend/src/lib/components/admin/Toggles.svelte b/frontend/src/lib/components/admin/Toggles.svelte
index d540513a..b23524ed 100644
--- a/frontend/src/lib/components/admin/Toggles.svelte
+++ b/frontend/src/lib/components/admin/Toggles.svelte
@@ -13,6 +13,8 @@
   import InlineNotification from 'carbon-components-svelte/src/Notification/InlineNotification.svelte';
   import Toggle from 'carbon-components-svelte/src/Toggle/Toggle.svelte';
   import Add from 'carbon-icons-svelte/lib/Add.svelte';
+  import EventSchedule from 'carbon-icons-svelte/lib/EventSchedule.svelte';
+  import Identification from 'carbon-icons-svelte/lib/Identification.svelte';
   import RadioButtonChecked from 'carbon-icons-svelte/lib/RadioButtonChecked.svelte';
   import TrashCan from 'carbon-icons-svelte/lib/TrashCan.svelte';
   import { fade } from 'svelte/transition';
@@ -111,13 +113,9 @@
           </svelte:fragment>
           <div class="admin_list_item_content">
             <div>
-              <p>
-                ✨{new Date(toggle.created).toLocaleString('de-DE')}
-                📅{new Date(toggle.updated).toLocaleString('de-DE')}
-              </p>
-              <p>
-                🆔{toggle._id}
-              </p>
+              <p><EventSchedule />{new Date(toggle.created).toLocaleString('de-DE')}</p>
+              <p><EventSchedule />{new Date(toggle.updated).toLocaleString('de-DE')}</p>
+              <p><Identification />{toggle._id}</p>
             </div>
             <div class="admin_list_button_group">
               <Toggle
diff --git a/frontend/src/lib/components/home/JokeOfTheDay.svelte b/frontend/src/lib/components/home/JokeOfTheDay.svelte
index 9b08206b..0c1ee0e1 100644
--- a/frontend/src/lib/components/home/JokeOfTheDay.svelte
+++ b/frontend/src/lib/components/home/JokeOfTheDay.svelte
@@ -5,6 +5,7 @@
   import { formatDate } from '$lib/util/format';
   import { initialized, t } from '$lib/util/translations';
   import Tile from 'carbon-components-svelte/src/Tile/Tile.svelte';
+  import EventSchedule from 'carbon-icons-svelte/lib/EventSchedule.svelte';
   import { onMount } from 'svelte';
 
   // 2. PROPS
@@ -25,7 +26,7 @@
       <Tile style="padding:2rem;" class="joke_tile">
         <h3>{$t('page.home.jokeTitle')}</h3>
         <i>{joke.text}</i>
-        <p>📅{formatDate(joke.created)}</p>
+        <p><EventSchedule />{formatDate(joke.created)}</p>
       </Tile>
     {:else}
       <p>{$t('page.home.jokeLoading')}</p>
@@ -66,6 +67,9 @@
   }
 
   p {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
     font-size: 0.75rem;
     margin-bottom: 0;
     margin-top: 0.75rem;
diff --git a/frontend/src/lib/components/jokes/Jokes.svelte b/frontend/src/lib/components/jokes/Jokes.svelte
index 6600a900..7b1a50fa 100644
--- a/frontend/src/lib/components/jokes/Jokes.svelte
+++ b/frontend/src/lib/components/jokes/Jokes.svelte
@@ -8,6 +8,7 @@
   import Tile from 'carbon-components-svelte/src/Tile/Tile.svelte';
   import Add from 'carbon-icons-svelte/lib/Add.svelte';
   import CloudDownload from 'carbon-icons-svelte/lib/CloudDownload.svelte';
+  import EventSchedule from 'carbon-icons-svelte/lib/EventSchedule.svelte';
   import { onMount } from 'svelte';
   import CreateJokeOverlay from './CreateJokeOverlay.svelte';
 
@@ -34,7 +35,7 @@
     {#if randomJoke?.created}
       <Tile class="random_joke mt2">
         <i>{randomJoke.text}</i>
-        <p>📅{formatDate(randomJoke.created)}</p>
+        <p><EventSchedule />{formatDate(randomJoke.created)}</p>
       </Tile>
     {/if}
 
@@ -85,6 +86,12 @@
     padding: 2rem;
   }
 
+  :global(.random_joke p) {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+  }
+
   :global(#add_joke_button) {
     position: fixed;
     bottom: calc(var(--default_padding) + env(safe-area-inset-bottom, 0px));
diff --git a/frontend/src/routes/styles.css b/frontend/src/routes/styles.css
index 2b387e04..72e1d208 100644
--- a/frontend/src/routes/styles.css
+++ b/frontend/src/routes/styles.css
@@ -248,6 +248,12 @@ button:focus:not(:focus-visible) {
   display: flex;
   gap: 0.25rem;
 }
+.admin_list_item_content p {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin: 0.1rem 0;
+}
 
 /* Carbon Drop Container Overrides*/
 .bx--file__drop-container {

From 542a4bbfa80b9f08df5ce04bb47ce0467ade5dc0 Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Tue, 24 Mar 2026 23:38:23 +0100
Subject: [PATCH 18/19] =?UTF-8?q?=F0=9F=9A=80=20Redesign=20login=20screen?=
 =?UTF-8?q?=20with=20branding=20block=20above=20input=20field.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                  |  1 +
 .../lib/components/shared/GlobalLogin.svelte  | 79 ++++++++++++++++---
 frontend/src/lib/config/de.json               |  1 +
 frontend/src/lib/config/en.json               |  1 +
 4 files changed, 69 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 27511926..bfbce5ae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - [global] Replace broken date/ID emojis with Carbon `EventSchedule` and `Identification` icons across admin and feature components (Identifiers, Toggles, LinkPresets, Activities, Jokes, JokeOfTheDay).
+- [global] Redesign login screen: add logo, `tilloh.dev` title, and tagline above the login input; left-align branding with the input field; compensate PNG transparent padding via negative margin.
 - [global] Hide header and redirect to home route when no valid identifier is set; login input is shown full-screen without navigation elements.
 - [global] Replace emoji storage-state indicator (🌐/📴) in header with colored Carbon Cloud/CloudOffline icons displayed inline after the page title.
 - [global] Increase header route icon size to `1em` (relative to h2 font-size) and align it using flexbox with `gap: 0.3em`.
diff --git a/frontend/src/lib/components/shared/GlobalLogin.svelte b/frontend/src/lib/components/shared/GlobalLogin.svelte
index 3646edc4..b2190638 100644
--- a/frontend/src/lib/components/shared/GlobalLogin.svelte
+++ b/frontend/src/lib/components/shared/GlobalLogin.svelte
@@ -60,17 +60,33 @@
 </script>
 
 <div class="verify_content">
-  <div class="input_row">
-    <PasswordInput
-      placeholder={isAdminLogin ? $t('page.shared.login.adminPlaceholder') : $t('page.shared.login.placeholder')}
-      showPasswordLabel={$t('page.shared.login.showPasswordLabel')}
-      size="xl"
-      bind:value={token}
-      on:keyup={(event) => {
-        if (isEnter(event)) verify();
-      }}
-    />
-    <Button kind="primary" icon={Login} iconDescription="Login" on:click={verify} class="login_button" />
+  <div class="login_block">
+    <div class="branding">
+      <img src="/images/logo.png" alt="tilloh.dev logo" class="branding_logo" />
+      <h1 class="branding_title">tilloh.dev</h1>
+      <p class="branding_tagline">{$t('page.shared.login.tagline')}</p>
+    </div>
+
+    <div class="input_row">
+      <PasswordInput
+        placeholder={isAdminLogin
+          ? $t('page.shared.login.adminPlaceholder')
+          : $t('page.shared.login.placeholder')}
+        showPasswordLabel={$t('page.shared.login.showPasswordLabel')}
+        size="xl"
+        bind:value={token}
+        on:keyup={(event) => {
+          if (isEnter(event)) verify();
+        }}
+      />
+      <Button
+        kind="primary"
+        icon={Login}
+        iconDescription="Login"
+        on:click={verify}
+        class="login_button"
+      />
+    </div>
   </div>
 </div>
 
@@ -102,9 +118,10 @@
     height: 100%;
   }
 
-  .input_row {
+  .login_block {
     display: flex;
-    align-items: stretch;
+    flex-direction: column;
+    gap: 2.5rem;
     width: 40%;
 
     @media #{$tablet} {
@@ -116,6 +133,42 @@
     }
   }
 
+  .branding {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  .branding_logo {
+    height: 7.5rem;
+    width: auto;
+    object-fit: contain;
+    // PNG has ~27% transparent padding on each side — shift left to align visual content
+    margin-left: calc(-279 / 1024 * 7.5rem + 1rem);
+  }
+
+  .branding_title {
+    font-size: 2.5rem;
+    margin-left: 1rem;
+    letter-spacing: 0.08em;
+    text-align: left;
+  }
+
+  .branding_tagline {
+    font-size: 0.95rem;
+    opacity: 0.5;
+    margin: 0 0 2rem 1rem;
+    text-align: left;
+    letter-spacing: 0.06em;
+  }
+
+  .input_row {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+  }
+
   :global(.bx--text-input-wrapper) {
     width: 100%;
   }
diff --git a/frontend/src/lib/config/de.json b/frontend/src/lib/config/de.json
index 91c3e81d..31ab6b8a 100644
--- a/frontend/src/lib/config/de.json
+++ b/frontend/src/lib/config/de.json
@@ -326,6 +326,7 @@
   "page.shared.button.github": "Github Seite öffnen",
   "page.shared.button.settings": "Einstellungen öffnen",
   "page.shared.button.stadtwerk": "stadt.werk Seite öffnen",
+  "page.shared.login.tagline": "Dein persönlicher Werkzeugkasten.",
   "page.shared.login.placeholder": "Login",
   "page.shared.login.adminPlaceholder": "Admin Login",
   "page.shared.login.showPasswordLabel": "Passwort anzeigen",
diff --git a/frontend/src/lib/config/en.json b/frontend/src/lib/config/en.json
index 4568f848..cde9e2fc 100644
--- a/frontend/src/lib/config/en.json
+++ b/frontend/src/lib/config/en.json
@@ -326,6 +326,7 @@
   "page.shared.button.github": "Open github page",
   "page.shared.button.stadtwerk": "Open stadtwerk page",
   "page.shared.button.settings": "Open settings",
+  "page.shared.login.tagline": "Your personal toolbox.",
   "page.shared.login.placeholder": "Login",
   "page.shared.login.adminPlaceholder": "Admin Login",
   "page.shared.login.showPasswordLabel": "Show password",

From b709d032e48e33905c9bef81fb4888da671fa340 Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Tue, 24 Mar 2026 23:39:18 +0100
Subject: [PATCH 19/19] =?UTF-8?q?=E2=9C=A8=20Added=20playwright-mcp=20to?=
 =?UTF-8?q?=20gitignore?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.gitignore b/.gitignore
index 23d3d029..982c70ff 100644
--- a/.gitignore
+++ b/.gitignore
@@ -51,3 +51,6 @@ e2e/playwright-report
 e2e/.test-state.json
 e2e/.env.test
 frontend/static/config/config.json
+
+# Playwright MCP
+.playwright-mcp