diff --git a/client/public/base_static/favicon.png b/client/public/base_static/favicon.png
deleted file mode 100644
index 7e6f5eb5..00000000
Binary files a/client/public/base_static/favicon.png and /dev/null differ
diff --git a/client/public/index.html b/client/public/index.html
index b1774091..651bf847 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -26,7 +26,7 @@
 
 	<title>Better VPlan</title>
 
-	<link rel='icon' type='image/png' href='/public/base_static/favicon.png'>
+	<link rel='icon' type='image/png' href='/public/base_static/images/better_vp.svg'>
 	<link rel='stylesheet' href='/public/base_static/global.css'>
 	<link rel='stylesheet' href='/public/build/bundle.css'>
 
diff --git a/client/src/App.svelte b/client/src/App.svelte
index a558b407..b0d7c5aa 100644
--- a/client/src/App.svelte
+++ b/client/src/App.svelte
@@ -1,6 +1,6 @@
 <script>
-    import Plan from "./components/Plan.svelte";
-    import Weekplan from "./components/Weekplan.svelte";
+    import Plan from "./components/Plan/Plan.svelte";
+    import Weekplan from "./components/Weekplan/Weekplan.svelte";
     import Authentication from "./components/Authentication.svelte";
     import LandingPage from "./components/LandingPage.svelte";
     import LandingPageNavbar from "./components/LandingPageNavbar.svelte";
@@ -13,7 +13,7 @@
     import SveltyPicker from 'svelty-picker';
     import {get_settings, group_rooms, update_colors, navigate_page, init_indexed_db, clear_plan_cache, get_favorites} from "./utils.js";
     import {notifications} from './notifications.js';
-    import {logged_in, title, current_page, settings, active_modal, pwa_prompt, indexed_db, selected_favorite, favorites} from './stores.js'
+    import {logged_in, title, current_page, settings, active_modal, pwa_prompt, selected_favorite, favorites, api_base} from './stores.js'
     import {getDateDisabled} from './plan.js';
     import SchoolManager from "./components/SchoolManager.svelte";
     import Changelog from "./components/Changelog.svelte";
@@ -29,6 +29,9 @@
     import { fade } from "svelte/transition";
     import FancyBackground from "./components/FancyBackground.svelte";
     import NotFound from "./components/NotFound.svelte";
+    import {gen_revision_arr} from "./plan.js";
+    import LessonInspect from "./components/Weekplan/LessonInspect.svelte";
+    import DayInspect from "./components/Weekplan/DayInspect.svelte";
 
     const pad = (n, s = 2) => (`${new Array(s).fill(0)}${n}`).slice(-s);
     let school_num;
@@ -39,7 +42,6 @@
     let teacher_dict;
     let all_rooms;
     let grouped_forms;
-    let api_base;
     let selected_revision;
     let meta;
     let enabled_dates;
@@ -74,7 +76,7 @@
         teacher_dict = {};
         all_rooms = null;
         grouped_forms = [];
-        api_base = null;
+        $api_base = null;
         selected_revision = ".newest";
         meta = {};
         enabled_dates = [];
@@ -264,17 +266,6 @@
         }
     }
 
-    function gen_revision_arr(all_revisions) {
-        revision_arr = [];
-        for(const [index, revision] of Object.entries(all_revisions)) {
-            if (index == 1) {continue;}
-            revision_arr.push({
-                "id": revision,
-                "display_name": format_revision_date(revision, all_revisions[1])
-            });
-        }
-    }
-
     function customGetDateDisabled(date) {
         if(typeof date === "object") {
             date = `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())}`;
@@ -330,7 +321,7 @@
         if(!load_favorite || !$settings.load_first_favorite) {
             return;
         }
-        navigate_page('plan');
+        navigate_page($settings.weekplan_default ? "weekplan" : "plan");
         if($favorites.length === 0) {
             return;
         }
@@ -358,16 +349,16 @@
     $: $logged_in && init_indexed_db();
     $: !$logged_in && logout();
     $: select_plan($favorites, $selected_favorite);
-    $: school_num && (api_base = `/api/v69.420/${school_num}`);
+    $: school_num && ($api_base = `/api/v69.420/${school_num}`);
     $: school_num && get_meta(school_num);
-    $: all_revisions = [".newest"].concat((meta?.dates || {})[date] || []);
+    $: all_revisions = [".newest"].concat((meta?.dates || {})[date] || [])
     // If no date selected, default to today
     $: !date && (() => {
         let tmp_date = new Date();
         date = `${tmp_date.getFullYear()}-${pad(tmp_date.getMonth()+1)}-${pad(tmp_date.getDate())}`
     })();
     // If the selected date is disabled, and meta date is not disabled, set to meta date
-    $: date && customGetDateDisabled(date) && (date !== meta.date) && (() => {
+    $: date && !$current_page.startsWith("weekplan") && customGetDateDisabled(date) && (date !== meta.date) && (() => {
         date = meta.date;
     })();
     //$: school_num && get_preferences();
@@ -383,7 +374,7 @@
     $: date && gen_teacher_arr(teacher_dict);
     $: selected_room && set_plan("rooms", selected_room);
     $: gen_room_arr(grouped_rooms);
-    $: gen_revision_arr(all_revisions);
+    $: revision_arr = gen_revision_arr(all_revisions);
     $: reset_selects(plan_type);
 
     const resizeObserver = new ResizeObserver((entries) => {
@@ -404,7 +395,7 @@
             return;
         }
         navigate_page(new_location);
-        if (new_location.startsWith("plan")) {
+        if (new_location.startsWith("plan") || new_location.startsWith("weekplan")) {
             refresh_plan_vars();
         }
     });
@@ -413,7 +404,7 @@
     if(!((new_location === "login" || new_location === "register") && $logged_in)) {
         if(new_location === "favorite") {
             load_favorite = true;
-            new_location = "plan";
+            new_location = $settings.weekplan_default ? "weekplan" : "plan";
         }
         navigate_page(new_location);
     }
@@ -439,6 +430,8 @@
 
 <Settings />
 <Changelog />
+<LessonInspect />
+<DayInspect />
 
 <div id="page-container">
     <main>
@@ -472,7 +465,7 @@
                             inputClasses="datepicker-input"
                             bind:value={date}
                         />
-                        {#if available_plan_version}
+                        {#if available_plan_version && $current_page.startsWith("plan")}
                             <div class="plan-status" transition:fade|local={{duration: 200}}>
                                 {#if available_plan_version === "default_plan"}
                                     <span class="material-symbols-outlined" style="color: #dbae00">warning</span>
@@ -507,13 +500,9 @@
                     </div>
                 </div>
                 {#if $current_page.substring(0, 4) === "plan"}
-                    <Plan bind:api_base bind:school_num bind:date bind:plan_type bind:plan_value bind:all_rooms bind:meta bind:selected_revision bind:enabled_dates bind:free_days bind:available_plan_version external_times={$settings.external_times} />
+                    <Plan bind:school_num bind:date bind:plan_type bind:plan_value bind:all_rooms bind:meta revision_arr={revision_arr} bind:enabled_dates bind:free_days bind:available_plan_version external_times={$settings.external_times} />
                 {:else}
-                    <Weekplan bind:api_base bind:week_start={date} bind:plan_type bind:plan_value />
-                {/if}
-                <!-- Select Revision (Plan Version) -->
-                {#if $settings.show_revision_selector}
-                <Select data={revision_arr} bind:selected_id={selected_revision} data_name="Revisions">Zeitstempel des Planuploads auswählen</Select>
+                    <Weekplan bind:school_num bind:date bind:plan_type bind:plan_value bind:all_rooms bind:meta bind:enabled_dates bind:free_days />
                 {/if}
             {:else if $current_page === "school_manager"}
                 <SchoolManager bind:school_num bind:date bind:plan_type bind:plan_value />
diff --git a/client/src/base_components/Modal.svelte b/client/src/base_components/Modal.svelte
index 668db499..d91bc7a2 100644
--- a/client/src/base_components/Modal.svelte
+++ b/client/src/base_components/Modal.svelte
@@ -46,69 +46,71 @@
 </dialog>
 
 <style lang="scss">
-    dialog {
-        transition: all .3s ease;
-        display: flex;
-        flex-direction: column;
-        position: fixed;
-        top: 50%;
-        left: calc(50% + (100vw - 100%) / 2);
-        transform: translate(-50%, calc(-50% - 20px));
-        margin: 0;
-        opacity: 0;
-        visibility: hidden;
-        padding: 0;
-        pointer-events: none;
-        border: none;
-        border-radius: 5px;
-        background: var(--background);
-        color: var(--text-color);
-        overflow-y: hidden;
-        min-height: 50vh;
-        max-height: calc((100% - 6px) - 2em);
-        max-width: calc(100% - 6px - 2em);
-        width: clamp(700px, 60vw, 1400px);
-        z-index: 9999;
+  dialog {
+    transition: all .3s ease;
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 50%;
+    left: calc(50% + (100vw - 100%) / 2);
+    transform: translate(-50%, calc(-50% - 20px));
+    margin: 0;
+    opacity: 0;
+    visibility: hidden;
+    padding: 0;
+    pointer-events: none;
+    border: none;
+    border-radius: 5px;
+    background: var(--background);
+    color: var(--text-color);
+    overflow-y: hidden;
+    min-height: 50vh;
+    max-height: calc((100% - 6px) - 2em);
+    max-width: calc(100% - 6px - 2em);
+    width: clamp(700px, 60vw, 1400px);
+    z-index: 9999;
 
-        &.full_height {
-            height: calc((100% - 6px) - 2em);
-        }
-
-        .content-scroll {
-            overflow-y: auto;
-            padding: 20px;
-            max-height: calc((100% - 46px) - 2em);
-            flex: 1;
-        }
-
-        &::before {
-            content: "";
-            position: absolute;
-            inset: 0;
-            background-color: rgba(255, 255, 255, 0.08);
-            z-index: -1;
-            pointer-events: none;
-        }
-    }
-    
-    dialog[open] {
-        transform: translate(-50%, -50%);
-        opacity: 1;
-        visibility: visible;
-        pointer-events: all;
-    }
-    
-    dialog::backdrop {
-        background-color: rgba(0, 0, 0, 0.5);
+    &.full_height {
+      height: calc((100% - 6px) - 2em);
     }
 
-    .footer {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-end;
+    .content-scroll {
+      overflow-y: auto;
+      padding: 20px;
+      @media only screen and (max-width: 900px) {
         padding: 10px;
-        background: rgba(255, 255, 255, 0.05);
-        border-top: 1px solid rgba(255, 255, 255, 0.2);
+      }
+      max-height: calc((100% - 46px) - 2em);
+      flex: 1;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background-color: rgba(255, 255, 255, 0.08);
+      z-index: -1;
+      pointer-events: none;
     }
+  }
+
+  dialog[open] {
+    transform: translate(-50%, -50%);
+    opacity: 1;
+    visibility: visible;
+    pointer-events: all;
+  }
+
+  dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
 
+  .footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.05);
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+  }
 </style>
\ No newline at end of file
diff --git a/client/src/components/Contact.svelte b/client/src/components/Contact.svelte
index 6cd853e0..a6231220 100644
--- a/client/src/components/Contact.svelte
+++ b/client/src/components/Contact.svelte
@@ -3,7 +3,7 @@
     import {notifications} from "../notifications.js";
     import Select from "../base_components/Select.svelte";
     import { onMount } from "svelte";
-    import { title } from "../stores.js";
+    import {settings, title} from "../stores.js";
     import Button from "../base_components/Button.svelte";
 
     let category = "bug";
@@ -23,7 +23,7 @@
         })
             .then(data => {
                 notifications.success("Nachricht übermittelt");
-                navigate_page("plan");
+                navigate_page($settings.weekplan_default ? "weekplan" : "plan");
             })
             .catch(error => {
                 notifications.danger(error.message);
diff --git a/client/src/components/Navbar.svelte b/client/src/components/Navbar.svelte
index 11c94f8e..3d7e44b7 100644
--- a/client/src/components/Navbar.svelte
+++ b/client/src/components/Navbar.svelte
@@ -1,10 +1,10 @@
 <script>
     import {notifications} from '../notifications.js';
-    import {logged_in, active_modal, new_changelogs_available} from '../stores.js';
+    import {logged_in, active_modal, new_changelogs_available, current_page} from '../stores.js';
     import Dropdown from '../base_components/Dropdown.svelte';
     import { fly } from 'svelte/transition';
     import {customFetch, navigate_page} from "../utils.js";
-    import {selected_favorite, favorites} from "../stores.js";
+    import {selected_favorite, favorites, settings} from "../stores.js";
 
     function logout() {
         customFetch('/auth/logout')
@@ -25,10 +25,20 @@
 </script>
 
 <nav transition:fly={{y:-64}}>
-    <button class="logo-button" on:click={() => {navigate_page("plan"); selected_favorite.set(-1)}}>
+    <button class="logo-button" on:click={() => {navigate_page($settings.weekplan_default ? "weekplan" : "plan"); selected_favorite.set(-1)}}>
         <img class="logo" src="/public/base_static/images/better_vp_white.svg" alt="Better VPlan Logo">
     </button>
     <ul class="nav-element-wrapper">
+        <li><button on:click={() => {
+            navigate_page(
+                ($current_page.startsWith("weekplan") || $current_page.startsWith("plan")) ?
+                ($current_page.startsWith("weekplan") ? "plan" : "weekplan") :
+                ($settings.weekplan_default ? "weekplan" : "plan"))}
+            } class="nav-button"><span class="material-symbols-outlined">{
+                ($current_page.startsWith("weekplan") || $current_page.startsWith("plan")) ?
+                ($current_page.startsWith("weekplan") ? "calendar_view_day" : "calendar_view_week") :
+                ($settings.weekplan_default ? "calendar_view_week" : "calendar_view_day")
+        }</span></button></li>
         <li><button on:click={() => {navigate_page("about_us")}} class="nav-button">Über uns</button></li>
         <li>
             <Dropdown>
@@ -36,7 +46,10 @@
                     <span class="material-symbols-outlined" class:favorite-selected={$selected_favorite !== -1}>star</span>
                 </button>
                 {#each $favorites as favorite, index}
-                    <button class="nav-button" on:click={() => {selected_favorite.set(index); navigate_page("plan")}}>
+                    <button class="nav-button" on:click={() => {
+                        selected_favorite.set(index);
+                        if(!$current_page.startsWith("weekplan")) navigate_page("plan");
+                    }}>
                         <span class="material-symbols-outlined" class:favorite-selected={$selected_favorite === index}>{favorite_icon_map[favorite.plan_type]}</span>
                     {favorite.name}</button>
                 {/each}
diff --git a/client/src/components/PWAInstallHelper.svelte b/client/src/components/PWAInstallHelper.svelte
index 9ec6cc86..987f8b13 100644
--- a/client/src/components/PWAInstallHelper.svelte
+++ b/client/src/components/PWAInstallHelper.svelte
@@ -1,6 +1,6 @@
 <script>
     import { onMount } from "svelte";
-    import { pwa_prompt, title } from "../stores";
+    import { pwa_prompt, title, settings } from "../stores";
     import { notifications } from "../notifications";
     import {navigate_page, update_hash} from "../utils";
     import Button from "../base_components/Button.svelte";
@@ -11,7 +11,7 @@
         $pwa_prompt = null;
         if(outcome === "accepted") {
             notifications.success("App erfolgreich installiert!");
-            navigate_page('plan');
+            navigate_page($settings.weekplan_default ? "weekplan" : "plan");
         } else if (outcome === "dismissed") {
             notifications.danger("App konnte nicht installiert werden.");
         }
@@ -30,7 +30,7 @@
         Um <b>online</b> und <b>offline</b> schnell an deinen Stundenplan zu kommen, lade die Website als <b>App</b> herunter:
     </span>
     <Button on:click={try_install} id="pwa-install-btn" background="var(--accent-color)">Installieren <span class="material-symbols-outlined">install_mobile</span></Button>
-    <button class="skip-btn" on:click={() => {navigate_page('plan')}}>Weiter</button>
+    <button class="skip-btn" on:click={() => {navigate_page($settings.weekplan_default ? "weekplan" : "plan")}}>Weiter</button>
     {:else}
     <span class="responsive-text">
         Um <b>online</b> und <b>offline</b> schnell an deinen Stundenplan zu kommen, lade die Website als <b>App</b> herunter:<br><br>
@@ -49,7 +49,7 @@
             <li>Klicke in der Suchleiste (rechts) auf <div class="custom-badge">Better VPlan installieren <span class="material-symbols-outlined">install_desktop</span></div></li>
         </ul>
     </span>
-    <Button on:click={() => {navigate_page('plan')}} background="var(--accent-color)" id="pwa-continue-btn">Weiter <span class="material-symbols-outlined">chevron_right</span></Button>
+    <Button on:click={() => {navigate_page($settings.weekplan_default ? "weekplan" : "plan")}} background="var(--accent-color)" id="pwa-continue-btn">Weiter <span class="material-symbols-outlined">chevron_right</span></Button>
     {/if}
 </main>
 
diff --git a/client/src/components/Plan/DayInfos.svelte b/client/src/components/Plan/DayInfos.svelte
new file mode 100644
index 00000000..63568d15
--- /dev/null
+++ b/client/src/components/Plan/DayInfos.svelte
@@ -0,0 +1,227 @@
+<script>
+    import Select from "../../base_components/Select.svelte";
+    import Dropdown from "../../base_components/Dropdown.svelte";
+    import {settings, selected_favorite} from "../../stores.js";
+    import {format_timestamp} from "../../utils.js";
+
+    export let exams;
+    export let info;
+    export let revision_arr;
+    export let is_default_plan;
+    export let last_fetch;
+    export let selected_revision;
+    export let date;
+    export let plan_type;
+    export let plan_value;
+    export let text_color = "default";
+</script>
+
+{#if exams && Object.keys(exams).length !== 0}
+    <div class="additional-info exams" class:default_text_color={text_color === "default"}>
+        {#each Object.entries(exams) as [form, exam_list]}
+            {#if exam_list.length > 0}
+                <div class="inline-wrapper">
+                    Klausuren für <button on:click={() => {
+                            plan_type = "forms";
+                            plan_value = form;
+                            selected_favorite.set(-1);
+                        }} class="no-btn-visuals clickable">{form}</button>:
+                    <ul>
+                        {#each exam_list as exam}
+                            <li>{exam.course} bei <button on:click={() => {
+                                        plan_type = "teachers";
+                                        plan_value = exam.course_teacher;
+                                        selected_favorite.set(-1);
+                                    }} class="no-btn-visuals clickable" style="color: var(--text-color); font-size: inherit; margin-top: 0.3em;">{exam.course_teacher}</button>: {exam.begin} Uhr ({exam.duration}min)</li>
+                        {/each}
+                    </ul>
+                </div>
+            {:else}
+                <div class="info-spacer"></div>
+            {/if}
+        {/each}
+    </div>
+{/if}
+{#if info}
+    {#if info.additional_info.length > 0}
+        <div class="additional-info" class:default_text_color={text_color === "default"}>
+            {#each info.processed_additional_info as info_paragraph}
+                {#if info_paragraph.length > 0}
+                    <div class="inline-wrapper">
+                        {#each info_paragraph as text_segment}
+                            {#if text_segment.link?.value.length === 1}
+                                <button class="no-btn-visuals" on:click={() => {
+                                        date = text_segment.link.date;
+                                        plan_type = text_segment.link.type;
+                                        plan_value = text_segment.link.value[0];
+                                        selected_favorite.set(-1);
+                                    }}>
+                                    <div class="clickable">{text_segment.text}</div>
+                                </button>
+                            {:else if text_segment.link?.value.length >= 2}
+                                <div class="fit-content-width">
+                                    <Dropdown small={true} transform_origin_x="50%">
+                                        <button slot="toggle_button" let:toggle on:click={toggle} class="toggle-button">
+                                            <span class="grow">{text_segment.text}</span>
+                                            <span class="material-symbols-outlined dropdown-arrow">arrow_drop_down</span>
+                                        </button>
+
+                                        {#each text_segment.link.value as item}
+                                            <button on:click={() => {
+                                                    date=text_segment.link.date;
+                                                    plan_type = text_segment.link.type;
+                                                    plan_value = item;
+                                                    selected_favorite.set(-1);
+                                                }}>{item}</button>
+                                        {/each}
+                                    </Dropdown>
+                                </div>
+                            {:else}
+                                {text_segment.text}
+                            {/if}
+                        {/each}
+                    </div>
+                {:else}
+                    <div class="info-spacer"></div>
+                {/if}
+            {/each}
+        </div>
+    {/if}
+    <div class="last-updated">
+        {#if !is_default_plan}Plan zuletzt aktualisiert: <span class="custom-badge">{format_timestamp(info.timestamp)}</span><br>{/if}
+        Zuletzt auf neue Pläne überprüft: <span class="custom-badge">{format_timestamp(last_fetch)}</span>
+    </div>
+    <!-- Select Revision (Plan Version) -->
+    {#if $settings.show_revision_selector && revision_arr.length > 0}
+        <Select data={revision_arr} bind:selected_id={selected_revision} data_name="Revisions">Zeitstempel des Planuploads auswählen</Select>
+    {/if}
+{/if}
+
+<style lang="scss">
+  .additional-info {
+    position: relative;
+    font-size: var(--font-size-base);
+    line-height: 1.5;
+    border: clamp(1px, .3vmax, 3px) solid rgba(255, 255, 255, 0.2);
+    padding: 10px;
+    padding-top: calc(10px + var(--font-size-md) / 2);
+    margin-top: 30px;
+    border-radius: 5px;
+
+    &.default_text_color::before {
+      color: rgba(255, 255, 255, 0.2);
+    }
+
+    &::before {
+      content: "Informationen";
+      font-size: var(--font-size-md);
+      color: var(--text-color);
+      background: var(--background);
+      padding: 0px 5px;
+      position: absolute;
+      top: 0;
+      left: 20px;
+      transform: translateY(-50%);
+      border-radius: 5px;
+    }
+
+    &.exams::before {
+      content: "Klausuren";
+    }
+  }
+
+  .inline-wrapper > * {
+    font-size: inherit;
+    color: var(--text-color);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .info-spacer {
+    height: 5px;
+  }
+
+  .fit-content-width {
+    width: fit-content;
+  }
+
+  .fit-content-width .dropdown-wrapper button, .max-width .dropdown-wrapper button {
+    border: none;
+    background: transparent;
+    color: var(--text-color);
+    transition: background-color .2s ease;
+    width: 100%;
+    padding: 2px 0px 2px 5px;
+    font-size: inherit;
+
+    &:hover, &:focus-visible {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    &.toggle-button {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      background: rgba(255, 255, 255, 0.08);
+      border-radius: 5px;
+      overflow: hidden;
+      text-align: left;
+      font-size: inherit;
+      font-weight: inherit;
+      color: var(--text-color);
+
+      span.grow {
+        flex: 1;
+        white-space: nowrap;
+      }
+
+      &.center-align {
+        text-align: center;
+      }
+
+      &:hover, &:focus-visible {
+        background-color: rgba(255, 255, 255, 0.15);
+      }
+    }
+  }
+
+  .no-btn-visuals {
+    border: 0;
+    background: none;
+    padding: 0;
+    margin: 0;
+    text-align: start;
+  }
+
+  .clickable {
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 5px;
+    padding: 2px 5px;
+    transition: background-color 0.2s ease;
+
+    &:hover, &:focus-visible {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  .last-updated {
+    font-size: var(--font-size-base);
+    line-height: 1.5;
+    margin-top: 20px;
+    display: block !important;
+  }
+
+  .custom-badge {
+    display: inline-flex;
+    flex-direction: row;
+    column-gap: .3em;
+    align-items: center;
+
+    background: rgba(255, 255, 255, 0.07);
+    padding: 2px 7px;
+    border-radius: 5px;
+    white-space: nowrap;
+    margin-bottom: .2em;
+  }
+</style>
\ No newline at end of file
diff --git a/client/src/components/Lesson.svelte b/client/src/components/Plan/Lesson.svelte
similarity index 94%
rename from client/src/components/Lesson.svelte
rename to client/src/components/Plan/Lesson.svelte
index e78fcea4..12aa6870 100644
--- a/client/src/components/Lesson.svelte
+++ b/client/src/components/Plan/Lesson.svelte
@@ -1,14 +1,15 @@
 <script>
-    import Dropdown from "../base_components/Dropdown.svelte";
-    import {selected_favorite, settings} from "../stores";
-    import {arraysEqual} from "../utils.js";
-    import {getLabelOfPeriods} from "../periods_utils.js";
+    import Dropdown from "../../base_components/Dropdown.svelte";
+    import {selected_favorite, settings} from "../../stores.js";
+    import {arraysEqual} from "../../utils.js";
+    import {getLabelOfPeriods} from "../../periods_utils.js";
 
     export let lesson;
     export let date;
     export let plan_type;
     export let plan_value;
     export let display_time = true;
+    export let disable_interactions = false;
 
     $: only_teacher_absent = lesson.scheduled_teachers?.length !== 0 && lesson.current_teachers?.length === 0 && lesson.takes_place;
 
@@ -61,6 +62,7 @@
                 {#if teachers.length !== 0 || s_teachers.length !== 0}
                     {#each teachers || [] as teacher}
                         <button on:click={() => {
+                            if(disable_interactions) return;
                             plan_type = "teachers";
                             plan_value = teacher;
                             selected_favorite.set(-1);
@@ -68,6 +70,7 @@
                     {/each}
                     {#each s_teachers || [] as teacher}
                         <button on:click={() => {
+                            if(disable_interactions) return;
                             plan_type = "teachers";
                             plan_value = teacher;
                             selected_favorite.set(-1);
@@ -84,6 +87,7 @@
                 {#if rooms.length !== 0 || s_rooms.length !== 0}
                     {#each rooms || [] as room}
                         <button on:click={() => {
+                            if(disable_interactions) return;
                             plan_type = "rooms";
                             plan_value = room;
                             selected_favorite.set(-1);
@@ -93,6 +97,7 @@
                     {/each}
                     {#each s_rooms || [] as room}
                         <button on:click={() => {
+                            if(disable_interactions) return;
                             plan_type = "rooms";
                             plan_value = room;
                             selected_favorite.set(-1);
@@ -112,6 +117,7 @@
             {:else if forms.length === 1 && s_forms.length === 0}
             <div class="forms max-width-center info-element vert-align" class:changed={forms_changed}>
                 <button on:click={() => {
+                    if(disable_interactions) return;
                     plan_type = "forms";
                     plan_value = forms[0];
                     selected_favorite.set(-1);
@@ -120,6 +126,7 @@
             {:else if forms.length === 0 && s_forms.length === 1}
             <div class="forms max-width-center info-element vert-align" class:changed={forms_changed}>
                 <button on:click={() => {
+                    if(disable_interactions) return;
                     plan_type = "forms";
                     plan_value = s_forms[0];
                     selected_favorite.set(-1);
@@ -135,6 +142,7 @@
 
                     {#each forms as form}
                         <button on:click={() => {
+                            if(disable_interactions) return;
                             plan_type = "forms";
                             plan_value = form;
                             selected_favorite.set(-1);
@@ -142,6 +150,7 @@
                     {/each}
                     {#each s_forms as form}
                         <button on:click={() => {
+                            if(disable_interactions) return;
                             plan_type = "forms";
                             plan_value = form;
                             selected_favorite.set(-1);
@@ -163,6 +172,7 @@
                                 {#each info_message.text_segments as text_segment}
                                     {#if text_segment.link?.value.length === 1}
                                         <button class="no-btn-visuals" on:click={() => {
+                                            if(disable_interactions) return;
                                             date = text_segment.link.date;
                                             plan_type = text_segment.link.type;
                                             plan_value = text_segment.link.value[0];
@@ -180,6 +190,7 @@
 
                                                 {#each text_segment.link.value as item}
                                                     <button on:click={() => {
+                                                        if(disable_interactions) return;
                                                         date=text_segment.link.date;
                                                         plan_type = text_segment.link.type;
                                                         plan_value = item;
@@ -209,6 +220,7 @@
 
                                 {#each forms as form}
                                     <button on:click={() => {
+                                        if(disable_interactions) return;
                                         plan_type = "forms";
                                         plan_value = form;
                                     }}>{form}</button>
@@ -231,6 +243,7 @@
 
                                 {#each teachers as teacher}
                                     <button on:click={() => {
+                                        if(disable_interactions) return;
                                         plan_type = "teachers";
                                         plan_value = teacher;
                                     }}>{teacher}</button>
@@ -253,6 +266,7 @@
 
                                 {#each rooms as room}
                                     <button on:click={() => {
+                                        if(disable_interactions) return;
                                         plan_type = "rooms";
                                         plan_value = room;
                                         selected_favorite.set(-1);
diff --git a/client/src/components/Plan.svelte b/client/src/components/Plan/Plan.svelte
similarity index 69%
rename from client/src/components/Plan.svelte
rename to client/src/components/Plan/Plan.svelte
index 3ed661f5..ae44d503 100644
--- a/client/src/components/Plan.svelte
+++ b/client/src/components/Plan/Plan.svelte
@@ -1,31 +1,29 @@
 <script>
     import {onMount} from 'svelte';
     import Lesson from './Lesson.svelte';
-    import Rooms from "./Rooms.svelte";
-    import {notifications} from '../notifications.js';
+    import Rooms from "../Rooms.svelte";
     import { swipe } from 'svelte-gestures';
-    import {indexed_db, settings, title, selected_favorite, favorites} from '../stores.js';
-    import {arraysEqual, format_date, format_timestamp, replace_hash, replace_page, update_hash} from "../utils.js";
-    import {sameBlock, get_plan_version, get_teacher_data, load_plan, gen_location_hash, load_lessons, apply_preferences, getDateDisabled} from "../plan.js";
-    import {getLabelOfPeriods} from "../periods_utils.js";
-    import Dropdown from '../base_components/Dropdown.svelte';
+    import {indexed_db, settings, title, selected_favorite, favorites, api_base} from '../../stores.js';
+    import {arraysEqual, format_date, format_timestamp, replace_hash, replace_page, update_hash} from "../../utils.js";
+    import {sameBlock, get_plan_version, get_teacher_data, load_plan, gen_location_hash, load_lessons, apply_preferences, getDateDisabled} from "../../plan.js";
+    import {getLabelOfPeriods} from "../../periods_utils.js";
+    import DayInfos from "./DayInfos.svelte";
 
-    export let api_base;
     export let school_num;
     export let date;
     export let plan_type;
     export let plan_value;
     export let meta;
-    export let show_title = true;
     export let extra_height = true;
     export let week_letter = "";
     export let external_times = true;
     export let all_rooms;
-    export let selected_revision;
+    export let revision_arr;
     export let enabled_dates;
     export let free_days;
     export let available_plan_version;
     let used_rooms_hidden = true;
+    let selected_revision;
 
     const pad = (n, s = 2) => (`${new Array(s).fill(0)}${n}`).slice(-s);
     let plan_data = [];
@@ -40,7 +38,7 @@
     let cache_loading_failed = false;
     let network_loading_failed = false;
     let data_from_cache = false;
-    let plan_type_map = {
+    const plan_type_map = {
         "forms": "Klasse",
         "rooms": "Raum",
         "teachers": "Lehrer"
@@ -192,7 +190,7 @@
     // === Load Plan + Lessons ===
     // Check if new plan has to be loaded and load it
     $: $indexed_db, load_plan(
-        api_base, 
+        $api_base,
         school_num, 
         date, 
         selected_revision, 
@@ -236,7 +234,7 @@
 
 <div class:plan={plan_type !== "room_overview"} class:extra-height={extra_height}>
     {#if plan_type !== "room_overview"}
-        {#if show_title && info && plan_type && plan_value}
+        {#if info && plan_type && plan_value}
             {#if plan_type === "forms" && ($selected_favorite !== -1)}
                 <button on:click={() => {preferences_apply = !preferences_apply}} class="plus-btn">{preferences_apply ? "Alle Stunden anzeigen" : "Nur ausgewählte anzeigen"}</button>
             {/if}
@@ -285,81 +283,17 @@
             <Rooms rooms_data={rooms_data} bind:plan_type bind:plan_value bind:all_rooms bind:used_rooms_hidden />
         {/if}
     {/if}
-    {#if exams && Object.keys(exams).length !== 0}
-        <div class="additional-info exams">
-            {#each Object.entries(exams) as [form, exam_list]}
-                {#if exam_list.length > 0}
-                    <div class="inline-wrapper">
-                        Klausuren für <button on:click={() => {
-                            plan_type = "forms";
-                            plan_value = form;
-                            selected_favorite.set(-1);
-                        }} class="no-btn-visuals clickable">{form}</button>:
-                        <ul>
-                            {#each exam_list as exam}
-                                <li>{exam.course} bei <button on:click={() => {
-                                        plan_type = "teachers";
-                                        plan_value = exam.course_teacher;
-                                        selected_favorite.set(-1);
-                                    }} class="no-btn-visuals clickable" style="color: var(--text-color); font-size: inherit; margin-top: 0.3em;">{exam.course_teacher}</button>: {exam.begin} Uhr ({exam.duration}min)</li>
-                            {/each}
-                        </ul>
-                    </div>
-                {:else}
-                    <div class="info-spacer"></div>
-                {/if}
-            {/each}
-        </div>
-    {/if}
-    {#if info}
-        {#if info.additional_info.length > 0}
-            <div class="additional-info">
-                {#each info.processed_additional_info as info_paragraph}
-                    {#if info_paragraph.length > 0}
-                        <div class="inline-wrapper">
-                            {#each info_paragraph as text_segment}
-                                {#if text_segment.link?.value.length === 1}
-                                    <button class="no-btn-visuals" on:click={() => {
-                                        date = text_segment.link.date;
-                                        plan_type = text_segment.link.type;
-                                        plan_value = text_segment.link.value[0];
-                                        selected_favorite.set(-1);
-                                    }}>
-                                        <div class="clickable">{text_segment.text}</div>
-                                    </button>
-                                {:else if text_segment.link?.value.length >= 2}
-                                    <div class="fit-content-width">
-                                        <Dropdown small={true} transform_origin_x="50%">
-                                            <button slot="toggle_button" let:toggle on:click={toggle} class="toggle-button">
-                                                <span class="grow">{text_segment.text}</span>
-                                                <span class="material-symbols-outlined dropdown-arrow">arrow_drop_down</span>
-                                            </button>
-
-                                            {#each text_segment.link.value as item}
-                                                <button on:click={() => {
-                                                    date=text_segment.link.date;
-                                                    plan_type = text_segment.link.type;
-                                                    plan_value = item;
-                                                    selected_favorite.set(-1);
-                                                }}>{item}</button>
-                                            {/each}
-                                        </Dropdown>
-                                    </div>
-                                {:else}
-                                    {text_segment.text}
-                                {/if}
-                            {/each}
-                        </div>
-                    {:else}
-                        <div class="info-spacer"></div>
-                    {/if}
-                {/each}
-            </div>
-        {/if}
-        <div class="last-updated">
-            {#if !is_default_plan}Plan zuletzt aktualisiert: <span class="custom-badge">{format_timestamp(info.timestamp)}</span><br>{/if}
-            Zuletzt auf neue Pläne überprüft: <span class="custom-badge">{format_timestamp(last_fetch)}</span></div>
-    {/if}
+    <DayInfos
+        {exams}
+        {info}
+        {revision_arr}
+        {is_default_plan}
+        {last_fetch}
+        bind:selected_revision
+        bind:date
+        bind:plan_type
+        bind:plan_value
+    />
 </div>
 <div class="day-controls">
     <button tabindex="-1" on:click={() => {change_day(-1);}} class:hidden={!show_left_key} class:is_default_plan={left_key_default_plan}><span class="material-symbols-outlined left">arrow_back_ios_new</span></button>
@@ -376,17 +310,6 @@
         padding: .08em 0;
     }
 
-    .inline-wrapper > * {
-        font-size: inherit;
-        color: var(--text-color);
-        white-space: pre-wrap;
-        word-break: break-word;
-    }
-
-    .info-spacer {
-        height: 5px;
-    }
-
     .dropdown-arrow {
         font-size: 1.4em;
         display: block;
@@ -408,70 +331,6 @@
         transform: rotate(180deg);
     }
 
-    .fit-content-width {
-        width: fit-content;
-    }
-
-    .fit-content-width .dropdown-wrapper button, .max-width .dropdown-wrapper button {
-        border: none;
-        background: transparent;
-        color: var(--text-color);
-        transition: background-color .2s ease;
-        width: 100%;
-        padding: 2px 0px 2px 5px;
-        font-size: inherit;
-
-        &:hover, &:focus-visible {
-            background-color: rgba(0, 0, 0, 0.5);
-        }
-
-        &.toggle-button {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: space-between;
-            background: rgba(255, 255, 255, 0.08);
-            border-radius: 5px;
-            overflow: hidden;
-            text-align: left;
-            font-size: inherit;
-            font-weight: inherit;
-            color: var(--text-color);
-
-            span.grow {
-                flex: 1;
-                white-space: nowrap;
-            }
-            
-            &.center-align {
-                text-align: center;
-            }
-
-            &:hover, &:focus-visible {
-                background-color: rgba(255, 255, 255, 0.15);
-            }
-        }
-    }
-
-    .no-btn-visuals {
-        border: 0;
-        background: none;
-        padding: 0;
-        margin: 0;
-        text-align: start;
-    }
-
-    .clickable {
-        background: rgba(255, 255, 255, 0.08);
-        border-radius: 5px;
-        padding: 2px 5px;
-        transition: background-color 0.2s ease;
-
-        &:hover, &:focus-visible {
-            background-color: rgba(255, 255, 255, 0.2);
-        }
-    }
-
     .day-controls {
         position: fixed;
         bottom: 0;
@@ -595,50 +454,16 @@
     }
 
     .custom-badge {
-        display: inline-flex;
-        flex-direction: row;
-        column-gap: .3em;
-        align-items: center;
-
-        background: rgba(255, 255, 255, 0.07);
-        padding: 2px 7px;
-        border-radius: 5px;
-        white-space: nowrap;
-        margin-bottom: .2em;
-    }
-
-    .last-updated {
-        font-size: var(--font-size-base);
-        line-height: 1.5;
-        margin-top: 20px;
-        display: block !important;
-    }
-
-    .additional-info {
-        position: relative;
-        font-size: var(--font-size-base);
-        line-height: 1.5;
-        border: clamp(1px, .3vmax, 3px) solid rgba(255, 255, 255, 0.2);
-        padding: 10px;
-        padding-top: calc(10px + var(--font-size-md) / 2);
-        margin-top: 30px;
-        border-radius: 5px;
-
-        &::before {
-            content: "Informationen";
-            font-size: var(--font-size-md);
-            color: rgba(255, 255, 255, 0.2);
-            background: var(--background);
-            padding: 0px 5px;
-            position: absolute;
-            top: 0;
-            left: 20px;
-            transform: translateY(-50%);
-        }
-
-        &.exams::before {
-            content: "Klausuren";
-        }
+      display: inline-flex;
+      flex-direction: row;
+      column-gap: .3em;
+      align-items: center;
+
+      background: rgba(255, 255, 255, 0.07);
+      padding: 2px 7px;
+      border-radius: 5px;
+      white-space: nowrap;
+      margin-bottom: .2em;
     }
 
     .no-linebreak {
diff --git a/client/src/components/SchoolManager.svelte b/client/src/components/SchoolManager.svelte
index 92f0bd93..61584e96 100644
--- a/client/src/components/SchoolManager.svelte
+++ b/client/src/components/SchoolManager.svelte
@@ -1,7 +1,7 @@
 <script>
     import {notifications} from '../notifications.js';
     import { onMount } from "svelte";
-    import { title } from "../stores";
+    import {settings, title} from "../stores";
     import {customFetch, navigate_page, update_hash} from "../utils.js";
     import Select from "../base_components/Select.svelte";
     import { fly } from 'svelte/transition';
@@ -110,7 +110,7 @@
                 school_num = authorize_school_id;
                 localStorage.setItem("school_num", school_num);
                 authorized_school_ids = [...authorized_school_ids, authorize_school_id];
-                navigate_page('plan');
+                navigate_page($settings.weekplan_default ? "weekplan" : "plan");
             })
             .catch(error => {
                 notifications.danger(error.message);
@@ -194,7 +194,7 @@
                     }
                     school_num = authorize_school_id;
                     localStorage.setItem("school_num", school_num);
-                    navigate_page("plan");
+                    navigate_page($settings.weekplan_default ? "weekplan" : "plan");
                 } else {
                     school_auth_visible = true;
                 }
diff --git a/client/src/components/Settings.svelte b/client/src/components/Settings.svelte
index 03760bda..9bf8fc99 100644
--- a/client/src/components/Settings.svelte
+++ b/client/src/components/Settings.svelte
@@ -75,9 +75,22 @@
         <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.normal_greetings}>Normale Begrüßungen</span>
         <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.chatgpt_greetings}>ChatGPT Begrüßungen</span>
         <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.load_first_favorite}>Beim Start den ersten Favoriten laden</span>
+        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.weekplan_default}>Standardmäßig den Wochenplan öffnen</span>
         <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.swipe_day_change}>Swipen um Tag zu wechseln</span>
         <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.day_switch_keys}>Pfeiltasten (Tastatur) zum Tag wechseln nutzen</span>
+        <h2 class="category-heading">Aussehen</h2>
+        <span class="responsive-text"><input type="color" bind:value={temp_settings.background_color}>Hintergrundfarbe</span>
+        <span class="responsive-text"><input type="color" bind:value={temp_settings.text_color}>Textfarbe</span>
+        <span class="responsive-text"><input type="color" bind:value={temp_settings.accent_color}>Akzentfarbe</span>
+        <span class="responsive-text"><input type="color" bind:value={temp_settings.cancelled_color}>Ausfallfarbe</span>
+        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.external_times}>Externe Unterrichtszeiten</span>
+        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.filled_in_buttons}>Ausgefüllte Buttons (Bei Änderungen / Ausfall)</span>
+        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.rainbow}>Regenbogen 🌈</span>
+        <h2 class="category-heading">Nerd Section</h2>
+        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.show_revision_selector}>Planversion auswählbar machen</span>
+        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.use_grouped_form_plans}>Lehrer/Raumpläne nur als umgeordnete Klassenpläne anzeigen. (Bsp.: Lehreränderung bei Klassenplan wird nicht zu Ausfall im Lehrerplan des ursprünglichen Lehrers)</span>
         {#if is_admin}
+            <h2 class="category-heading">Admin-Section</h2>
             <h2 class="category-heading">Push-Benachrichtigungen</h2>
             <Button on:click={
                 async () => {
@@ -104,17 +117,6 @@
             } class="nav-button">Push-Benachrichtigungen testen
             </Button>
         {/if}
-        <h2 class="category-heading">Aussehen</h2>
-        <span class="responsive-text"><input type="color" bind:value={temp_settings.background_color}>Hintergrundfarbe</span>
-        <span class="responsive-text"><input type="color" bind:value={temp_settings.text_color}>Textfarbe</span>
-        <span class="responsive-text"><input type="color" bind:value={temp_settings.accent_color}>Akzentfarbe</span>
-        <span class="responsive-text"><input type="color" bind:value={temp_settings.cancelled_color}>Ausfallfarbe</span>
-        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.external_times}>Externe Unterrichtszeiten</span>
-        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.filled_in_buttons}>Ausgefüllte Buttons (Bei Änderungen / Ausfall)</span>
-        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.rainbow}>Regenbogen 🌈</span>
-        <h2 class="category-heading">Nerd Section</h2>
-        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.show_revision_selector}>Planversion auswählbar machen</span>
-        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.use_grouped_form_plans}>Lehrer/Raumpläne nur als umgeordnete Klassenpläne anzeigen. (Bsp.: Lehreränderung bei Klassenplan wird nicht zu Ausfall im Lehrerplan des ursprünglichen Lehrers)</span>
         <br>
         <div class="horizontal-container">
             <Button on:click={reset_settings} class="split">Einstellungen zurücksetzen</Button>
diff --git a/client/src/components/Weekplan.svelte b/client/src/components/Weekplan.svelte
deleted file mode 100644
index e020524c..00000000
--- a/client/src/components/Weekplan.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-
-</script>
-
-<h1 class="plan-heading">Coming soon...</h1>
-
-<style lang="scss">
-
-</style>
\ No newline at end of file
diff --git a/client/src/components/Weekplan/Day.svelte b/client/src/components/Weekplan/Day.svelte
new file mode 100644
index 00000000..79abb609
--- /dev/null
+++ b/client/src/components/Weekplan/Day.svelte
@@ -0,0 +1,429 @@
+<script>
+    import Lesson from "./Lesson.svelte";
+    import {
+        indexed_db,
+        settings,
+        selected_favorite,
+        favorites,
+        api_base,
+        active_modal,
+        inspecting_day
+    } from "../../stores.js";
+    import {
+        load_plan,
+        load_lessons,
+        apply_preferences,
+        get_teacher_data,
+        get_plan_version,
+        gen_revision_arr,
+        getDateDisabled
+    } from "../../plan.js";
+    import Select from "../../base_components/Select.svelte";
+    import Rooms from "../Rooms.svelte";
+    import {format_date} from "../../utils.js";
+
+    export let school_num;
+    export let first;
+    export let last;
+    export let plan_type;
+    export let plan_value;
+    export let date;
+    export let block_count;
+    export let meta;
+    export let enabled_dates;
+    export let free_days;
+    export let week_letter;
+    export let all_rooms;
+    export let used_rooms_hidden;
+    export let preferences_apply;
+    export let full_teacher_name;
+    export let teacher_contact_link = null;
+    export let teacher_image_path = null;
+
+    let revision_arr;
+    $: revision_arr = gen_revision_arr([".newest"].concat((meta?.dates || {})[date] || []));
+    let selected_revision = ".newest";
+    let info;
+    let plan_data = [];
+    let all_lessons = [];
+    let rooms_data = {};
+    let last_fetch;
+    let is_default_plan = false;
+    let loading = false;
+    let loading_failed = false;
+    let cache_loading_failed = false;
+    let network_loading_failed = false;
+    let data_from_cache = false;
+    let caching_successful = false;
+    let last_updated = {};
+    let exams;
+    let sorted_lessons;
+    const plan_type_map = {
+        "forms": "Klasse",
+        "rooms": "Raum",
+        "teachers": "Lehrer"
+    };
+    let controller = new AbortController();
+
+    function format_date_heading(date) {
+        date = new Date(date);
+        const days = [
+            "So",
+            "Mo",
+            "Di",
+            "Mi",
+            "Do",
+            "Fr",
+            "Sa"
+        ];
+
+        const weekday = days[date.getDay()];
+
+        return `${weekday} ${date.getDate()}.`
+    }
+
+    function handle_plan_data(data) {
+        plan_data = data;
+        info = data.info;
+        last_fetch = data.last_fetch ?? '1970-01-01';
+        is_default_plan = data.is_default_plan;
+        exams = data.exams;
+        week_letter = info.week;
+    }
+
+    function handle_loading_state(loading_type, state) {
+        switch(loading_type) {
+            case 'loading':
+                loading = state;
+                break;
+            case 'data_from_cache':
+                data_from_cache = state;
+                break;
+            case 'cache_loading_failed':
+                cache_loading_failed = state;
+                break;
+            case 'network_loading_failed':
+                network_loading_failed = state;
+                break;
+            case 'caching_successful':
+                caching_successful = state;
+                break;
+            default:
+                console.error("Unsupported loading_type: " + loading_type);
+                break;
+        }
+    }
+
+    function renew_abort_controller() {
+        controller.abort();
+        controller = new AbortController();
+        return controller;
+    }
+
+    function handle_last_updated(given_date, renew) {
+        if(!renew) {
+            return last_updated[given_date] || new Date(1970, 1, 1);
+        }
+
+        last_updated[given_date] = new Date();
+    }
+
+    function reset_plan_vars() {
+        all_lessons = [];
+        rooms_data = null;
+        plan_type = null;
+        plan_value = null;
+    }
+
+    function update_lessons(type, data) {
+        if(type === "rooms_data") {
+            rooms_data = data;
+        } else if(type === "all_lessons") {
+            all_lessons = data;
+        } else {
+            console.error(`lesson_updater: unknown type "${type}"`);
+        }
+    }
+
+    // === Load Plan + Lessons ===
+    // Check if new plan has to be loaded and load it
+    $: $indexed_db, load_plan(
+        $api_base,
+        school_num,
+        date,
+        selected_revision,
+        enabled_dates,
+        free_days,
+        handle_last_updated, handle_loading_state, handle_plan_data, renew_abort_controller
+    );
+    // Load the new lessons on change to selected plan
+    $: meta && load_lessons(plan_data, school_num, plan_type, plan_value, $settings.use_grouped_form_plans, meta, reset_plan_vars, update_lessons);
+    // Apply Preferences to lessons
+    $: lessons = sort_lessons(apply_preferences(plan_type, preferences_apply, $selected_favorite, $favorites, all_lessons));
+
+    // === Load Extra Teacher Data ===
+    // Get teacher data (Name, Contact and Image Link)
+    $: if(plan_type === "teachers") {
+        [full_teacher_name, teacher_contact_link, teacher_image_path] = get_teacher_data(meta.teachers, plan_value, school_num);
+    }
+
+    // === UI + Navigation ===
+    // Get if loading failed
+    $: loading_failed = (cache_loading_failed && network_loading_failed && !loading);
+
+    // Get plan version string
+    $: available_plan_version = get_plan_version(is_default_plan, data_from_cache, network_loading_failed, caching_successful);
+
+    function sort_lessons(lessons) {
+        // TODO: after block refactor
+        let tmp_out = Array.from({length: block_count}, (v, i) => [[], [], []]); // [[blocks], [top halfs], [bottom halfs]]
+        for(const lesson of lessons) {
+            tmp_out[
+                Math.floor((lesson.periods[0] + 1) / 2)-1
+                ][
+                    lesson.periods.length > 1 ? 0 : (lesson.periods[0] % 2 == 0 ? 2 : 1)
+                ].push(lesson);
+        }
+        return tmp_out;
+    }
+</script>
+<div class="day"
+     class:first
+     class:last
+     class:cached={available_plan_version === "cached"}
+     class:network_cached={available_plan_version === "network_cached"}
+     class:network_uncached={available_plan_version === "network_uncached"}
+     class:is_default_plan={available_plan_version === "default_plan"}
+     class:room_overview={plan_type === "room_overview"}
+     class:invalid_date={loading_failed || getDateDisabled(enabled_dates, free_days, date)}
+>
+    <h2 class="day-heading">
+        {date ? format_date_heading(date) : "..."}
+        {#if (exams && Object.keys(exams).length !== 0) || info}
+            <button class="info-btn" class:infos-available={info && info.additional_info.length > 0} class:exams-available={exams && Object.keys(exams).length !== 0} on:click={() => {
+                $active_modal = "day-inspect";
+                $inspecting_day = {
+                    info: info,
+                    exams: exams,
+                    is_default_plan: is_default_plan,
+                    last_fetch: last_fetch,
+                    date: date ? format_date(date) : "..."
+                };
+            }}>
+                <span class="material-symbols-outlined">info</span>
+            </button>
+        {/if}
+    </h2>
+    {#if loading}
+        <span class="responsive-text" style="white-space: nowrap; padding: 1rem 2rem;">Tag Lädt...</span>
+    {:else if getDateDisabled(enabled_dates, free_days, date)}
+        <span class="responsive-text" style="min-width: 8rem;">Kein Plan verfügbar.</span>
+    {:else if loading_failed}
+        <span class="responsive-text" style="min-width: 8rem;">Plan konnte nicht geladen werden.</span>
+    {:else}
+        {#if lessons.length === 0}
+            {#if plan_type}
+                <span class="responsive-text">Keine Stunden</span>
+            {:else}
+                <span class="responsive-text">Wähle eine Klasse, einen Lehrer, einen Raum oder die Raumübersicht aus, um {#if is_default_plan}eine Planvorhersage{:else}einen Plan{/if} zu sehen.</span>
+            {/if}
+        {:else}
+            {#if plan_type !== "room_overview"}
+                <!-- Day Content -->
+                {#each {length: block_count} as _, i}
+                    <div class="block">
+                        {#if lessons[i][0].length > 0}
+                            <div class="blocks-container">
+                                {#each lessons[i][0] as lesson}
+                                    <Lesson lesson={lesson} bind:plan_type bind:plan_value bind:date />
+                                {/each}
+                            </div>
+                        {/if}
+                        {#if lessons[i][1].length > 0 || lessons[i][2].length > 0}
+                            <div class="lessons-container">
+                                <div class="lesson top">
+                                    {#each lessons[i][1] as lesson}
+                                        <Lesson lesson={lesson} bind:plan_type bind:plan_value bind:date />
+                                    {/each}
+                                </div>
+                                <div class="lesson bottom">
+                                    {#each lessons[i][2] as lesson}
+                                        <Lesson lesson={lesson} bind:plan_type bind:plan_value bind:date />
+                                    {/each}
+                                </div>
+                            </div>
+                        {/if}
+                    </div>
+                {/each}
+            {:else}
+                <Rooms bind:rooms_data bind:plan_type bind:plan_value bind:all_rooms bind:used_rooms_hidden />
+            {/if}
+        {/if}
+    {/if}
+</div>
+
+<style lang="scss">
+  $lesson_height: 4.9rem; // Needs to be changed in Weekplan.svelte as well
+
+  .invalid_date > h2 > .info-btn {
+    display: none;
+  }
+
+  .info-btn {
+    --padding: .2rem;
+    z-index: 1;
+    padding: var(--padding);
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    height: calc(var(--font-size-base) + var(--padding) * 2);
+    width: calc(var(--font-size-base) + var(--padding) * 2);
+    line-height: var(--font-size-base);
+    border-radius: 9vw;
+
+    &.infos-available {
+      background: rgba(255, 255, 255, 0.2);
+
+      .material-symbols-outlined {
+        color: var(--text-color);
+      }
+    }
+
+    &.exams-available {
+      background: var(--accent-color);
+
+      .material-symbols-outlined {
+        color: var(--text-color);
+      }
+    }
+
+    .material-symbols-outlined {
+      font-size: var(--font-size-base);
+      padding: 0;
+      color: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  .day {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    width: max-content;
+    border-left: 1.5px solid rgba(255, 255, 255, 0.4);
+    border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
+
+    &.room_overview {
+      min-width: 20rem;
+    }
+
+    box-shadow: 0 1.5px 0 rgba(255, 255, 255, 0.6) inset;
+
+    &.cached {
+      box-shadow: 0 1.5px 0 rgba(255, 255, 255, 0.6) inset;
+    }
+
+    &.network_cached {
+      box-shadow: 0 1.5px 0 rgba(0, 219, 0, 0.6) inset;
+    }
+
+    &.network_uncached {
+      box-shadow: 0 1.5px 0 rgba(219, 174, 0, 0.6) inset;
+    }
+
+    &.is_default_plan {
+      box-shadow: 0 1.5px 0 rgba(219, 174, 0, 0.6) inset;
+    }
+
+    &.invalid_date {
+      box-shadow: 0 1.5px 0 var(--cancelled-color) inset;
+    }
+
+    &.first {
+      border-right: 1.5px solid rgba(255, 255, 255, 0.4);
+      border-radius: 1rem 0 0 0;
+    }
+
+    &.last {
+      border-right: 1.5px solid rgba(255, 255, 255, 0.4);
+      border-radius: 0 1rem 0 0;
+    }
+
+    padding: 0 .5rem;
+
+    .day-heading {
+      height: var(--font-size-lg);
+      line-height: var(--font-size-lg);
+      font-size: var(--font-size-lg);
+      font-weight: bold;
+      margin-bottom: 0.5rem;
+      margin-top: 0.3rem;
+      white-space: nowrap;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .block {
+      position: relative;
+      padding: .25rem 0;
+
+      &::before {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        width: calc(100% + 1rem);
+        border-top: 1px solid rgba(255, 255, 255, 0.2);
+        top: 50%;
+        left: 50%;
+        transform: translateY(-50%) translateX(-50%);
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        width: calc(100% + 1rem);
+        border-top: 1px solid rgba(255, 255, 255, 0.2);
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      height: calc(2 * $lesson_height);
+      display: flex;
+      flex-direction: row;
+
+      .blocks-container {
+        height: calc(2 * $lesson_height);
+        display: flex;
+        flex-direction: row;
+        gap: .4rem;
+        padding: .2rem;
+        box-sizing: border-box;
+      }
+
+      .lessons-container {
+        height: calc(2 * $lesson_height);
+        display: flex;
+        flex-direction: column;
+
+        .lesson {
+          height: $lesson_height;
+          gap: .4rem;
+          padding: .2rem;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+
+          &.top {
+            padding-bottom: .3rem;
+          }
+          &.bottom {
+            padding-top: .3rem;
+          }
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/client/src/components/Weekplan/DayInspect.svelte b/client/src/components/Weekplan/DayInspect.svelte
new file mode 100644
index 00000000..4b3c51e3
--- /dev/null
+++ b/client/src/components/Weekplan/DayInspect.svelte
@@ -0,0 +1,29 @@
+<script>
+    import {active_modal, inspecting_day} from "../../stores.js";
+    import Modal from "../../base_components/Modal.svelte";
+    import Button from "../../base_components/Button.svelte";
+    import DayInfos from "../Plan/DayInfos.svelte";
+</script>
+
+<Modal id="day-inspect">
+    <h1 class="responsive-heading">{$inspecting_day ? $inspecting_day.date : "..."}</h1>
+
+    {#if $inspecting_day}
+        <DayInfos
+            exams={$inspecting_day.exams}
+            info={$inspecting_day.info}
+            revision_arr={[]}
+            is_default_plan={$inspecting_day.is_default_plan}
+            last_fetch={$inspecting_day.last_fetch}
+            selected_revision={null}
+            date={null}
+            plan_type={null}
+            plan_value={null}
+            text_color="white"
+        />
+    {/if}
+
+    <svelte:fragment slot="footer">
+        <Button on:click={() => {$active_modal = ""}} small={true}>Schließen</Button>
+    </svelte:fragment>
+</Modal>
\ No newline at end of file
diff --git a/client/src/components/Weekplan/Lesson.svelte b/client/src/components/Weekplan/Lesson.svelte
new file mode 100644
index 00000000..d05cad8d
--- /dev/null
+++ b/client/src/components/Weekplan/Lesson.svelte
@@ -0,0 +1,407 @@
+<script>
+    import Dropdown from "../../base_components/Dropdown.svelte";
+    import {active_modal, selected_favorite, settings, inspecting_lesson} from "../../stores.js";
+    import {arraysEqual} from "../../utils.js";
+    import {getLabelOfPeriods} from "../../periods_utils.js";
+
+    export let lesson;
+    export let date;
+    export let plan_type;
+    export let plan_value;
+
+    $: only_teacher_absent = lesson.scheduled_teachers?.length !== 0 && lesson.current_teachers?.length === 0 && lesson.takes_place;
+
+    $: teachers = (lesson.takes_place && !only_teacher_absent ? lesson.current_teachers : lesson.scheduled_teachers) || [];
+    $: s_teachers = (!arraysEqual(lesson.scheduled_teachers, teachers) ? lesson.scheduled_teachers?.filter(t => !teachers.includes(t)) : []) || [];
+
+    $: forms = (lesson.takes_place ? lesson.current_forms : lesson.scheduled_forms) || [];
+    $: s_forms = (!arraysEqual(lesson.scheduled_forms, forms) ? lesson.scheduled_forms?.filter(f => !forms.includes(f)) : []) || []
+    $: forms_str = lesson.takes_place ? lesson.current_forms_str : lesson.scheduled_forms_str;
+    $: s_forms_str = s_forms.length !== 0 ? lesson.scheduled_forms_str : "";
+
+    $: rooms = (lesson.takes_place ? lesson.current_rooms : lesson.scheduled_rooms) || [];
+    $: s_rooms = (!arraysEqual(lesson.scheduled_rooms, rooms) ? lesson.scheduled_rooms?.filter(r => !rooms.includes(r)) : []) || [];
+
+    $: subject_changed = lesson.subject_changed && lesson.takes_place && !lesson.is_unplanned;
+    $: teacher_changed = lesson.teacher_changed && lesson.takes_place && !lesson.is_unplanned;
+    $: room_changed = lesson.room_changed && lesson.takes_place && !lesson.is_unplanned;
+    $: forms_changed = lesson.forms_changed && lesson.takes_place && !lesson.is_unplanned;
+</script>
+
+<div class="card" class:cancelled={!lesson.takes_place} class:changed={lesson.is_unplanned}>
+    {#if (lesson.info.length > 0) || (plan_type === "forms" && (forms.length > 1)) || (plan_type === "teachers" && (teachers.length > 1)) || (plan_type === "rooms" && (rooms.length > 1))}
+        <button class="info-btn" on:click={() => {
+            $active_modal = "lesson-inspect";
+            $inspecting_lesson = lesson;
+        }}>
+            <span class="material-symbols-outlined">info</span>
+        </button>
+    {/if}
+    <div class="vertical-align" style="height: 100%;">
+        <!-- Subject -->
+        <div class="subject" class:changed={subject_changed} class:changed_filled_in={$settings.filled_in_buttons && subject_changed}>
+            {#if lesson.scheduled_class == null && lesson.current_class == null}
+                -
+            {:else}
+                {lesson.current_class != null ? lesson.current_class : ""}
+                {#if lesson.takes_place}
+                    {#if lesson.scheduled_class !== lesson.current_class && lesson.scheduled_class != null}
+                        {#if lesson.current_class != null}&nbsp;{/if}
+                        <s>{lesson.scheduled_class}</s>
+                    {/if}
+                {:else}
+                    {lesson.scheduled_class}
+                {/if}
+            {/if}
+        </div>
+        <!-- Teachers -->
+        {#if plan_type !== "teachers"}
+            <div class="teachers info-element" class:changed={teacher_changed} class:changed_filled_in={$settings.filled_in_buttons && teacher_changed}
+                 class:teacher_absent={only_teacher_absent} class:cancelled_filled_in={$settings.filled_in_buttons && only_teacher_absent}>
+                {#if teachers.length !== 0 || s_teachers.length !== 0}
+                    {#each teachers || [] as teacher}
+                        <button on:click={() => {
+                            plan_type = "teachers";
+                            plan_value = teacher;
+                            selected_favorite.set(-1);
+                        }}>{teacher}</button>
+                    {/each}
+                    {#each s_teachers || [] as teacher}
+                        <button on:click={() => {
+                            plan_type = "teachers";
+                            plan_value = teacher;
+                            selected_favorite.set(-1);
+                        }}><s>{teacher}</s></button>
+                    {/each}
+                {:else}
+                    <span class="extra_padding">-</span>
+                {/if}
+            </div>
+        {/if}
+        <!-- Rooms -->
+        {#if plan_type !== "rooms"}
+            <div class="rooms horizontal-align info-element" class:changed={room_changed} class:changed_filled_in={$settings.filled_in_buttons && room_changed}>
+                {#if rooms.length !== 0 || s_rooms.length !== 0}
+                    {#each rooms || [] as room}
+                        <button on:click={() => {
+                            plan_type = "rooms";
+                            plan_value = room;
+                            selected_favorite.set(-1);
+                        }}>{room}</button>
+                    {:else}
+                        <span class="extra_padding">-</span>
+                    {/each}
+                    {#each s_rooms || [] as room}
+                        <button on:click={() => {
+                            plan_type = "rooms";
+                            plan_value = room;
+                            selected_favorite.set(-1);
+                        }}><s>{room}</s></button>
+                    {/each}
+                {:else}
+                    <span class="extra_padding">-</span>
+                {/if}
+            </div>
+        {/if}
+        <!-- Forms -->
+        {#if plan_type !== "forms"}
+            {#if forms.length === 0 && s_forms.length === 0}
+                <div class="forms info-element vertical-align" class:changed={forms_changed}>
+                    <span class="extra_padding">-</span>
+                </div>
+            {:else if forms.length === 1 && s_forms.length === 0}
+                <div class="forms info-element vertical-align" class:changed={forms_changed}>
+                    <button on:click={() => {
+                    plan_type = "forms";
+                    plan_value = forms[0];
+                    selected_favorite.set(-1);
+                }}>{forms[0]}</button>
+                </div>
+            {:else if forms.length === 0 && s_forms.length === 1}
+                <div class="forms info-element vertical-align" class:changed={forms_changed}>
+                    <button on:click={() => {
+                    plan_type = "forms";
+                    plan_value = s_forms[0];
+                    selected_favorite.set(-1);
+                }}><s>{s_forms[0]}</s></button>
+                </div>
+            {:else}
+                <div class="form-dropdown-wrapper">
+                    <Dropdown small={true} transform_origin_x="50%">
+                        <button slot="toggle_button" let:toggle on:click={toggle} class="toggle-button center-align" class:changed={forms_changed}>
+                            <span class="grow">{forms_str}&nbsp;<s>{s_forms_str}</s></span>
+                            <span class="material-symbols-outlined dropdown-arrow centered_txt">arrow_drop_down</span>
+                        </button>
+
+                        {#each forms as form}
+                            <button on:click={() => {
+                            plan_type = "forms";
+                            plan_value = form;
+                            selected_favorite.set(-1);
+                        }}>{form}</button>
+                        {/each}
+                        {#each s_forms as form}
+                            <button on:click={() => {
+                            plan_type = "forms";
+                            plan_value = form;
+                            selected_favorite.set(-1);
+                        }}><s>{form}</s></button>
+                        {/each}
+                    </Dropdown>
+                </div>
+            {/if}
+        {/if}
+    </div>
+</div>
+<style lang="scss">
+  .info-btn {
+    overflow: hidden;
+    --padding: .2rem;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(30%, -20%);
+    z-index: 1;
+    padding: var(--padding);
+    background: var(--background);
+
+    &::before {
+      content: "";
+      background: rgba(255, 255, 255, 0.2);
+      position: absolute;
+      inset: 0;
+    }
+
+    border: none;
+    height: calc(var(--font-size-sm) + var(--padding) * 2);
+    width: calc(var(--font-size-sm) + var(--padding) * 2);
+    line-height: var(--font-size-sm);
+    border-radius: 9vw;
+
+    .material-symbols-outlined {
+      font-size: var(--font-size-sm);
+      padding: 0;
+      color: var(--text-color);
+    }
+  }
+  .dropdown-arrow {
+    font-size: 1.4em;
+    display: block;
+    transition: transform .2s ease;
+    pointer-events: none;
+
+    @media only screen and (min-width: 1501px) {
+      font-size: 1em;
+      margin-left: .2em;
+
+      &.centered_txt {
+        position: absolute;
+        right: 10px;
+      }
+    }
+  }
+
+  :global(.open) .dropdown-arrow {
+    transform: rotate(180deg);
+  }
+
+  .fit-content-width {
+    width: fit-content;
+  }
+
+  .fit-content-width .dropdown-wrapper button, .form-dropdown-wrapper .dropdown-wrapper button {
+    &.toggle-button {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      background: rgba(255, 255, 255, 0.08);
+      border-radius: 5px;
+      overflow: hidden;
+      text-align: left;
+      font-weight: inherit;
+      color: var(--text-color);
+
+      span.grow {
+        flex: 1;
+        white-space: nowrap;
+      }
+
+      &.center-align {
+        text-align: center;
+      }
+
+      &:hover, &:focus-visible {
+        background-color: rgba(255, 255, 255, 0.15);
+      }
+    }
+
+    border: none;
+    background: transparent;
+    color: var(--text-color);
+    transition: background-color .2s ease;
+    width: 100%;
+    font-size: inherit;
+
+    &:hover, &:focus-visible {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+
+  .no-btn-visuals {
+    border: 0;
+    background: none;
+    padding: 0;
+    margin: 0;
+    text-align: start;
+  }
+
+  .horizontal-align {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: .3em;
+  }
+
+  .lesson-info {
+    margin-top: 10px;
+    padding: .1rem !important;
+    background: rgba(255, 255, 255, 0.05) !important;
+    ul {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+    min-height: unset !important;
+    font-weight: 300;
+
+    button {
+      font-weight: inherit;
+      color: var(--text-color);
+    }
+
+    .clickable {
+      background: rgba(255, 255, 255, 0.08);
+      border-radius: 5px;
+      padding: 0;
+      transition: background-color 0.2s ease;
+
+      &:hover, &:focus-visible {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+    }
+
+    .fit-content-width .dropdown-wrapper button, .form-dropdown-wrapper .dropdown-wrapper button {
+      padding: 0;
+    }
+  }
+
+  .info-element {
+    display: flex;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 5px;
+
+    &.teacher_absent {
+      background: rgba(255, 255, 255, 0.08);
+      outline: 3px solid var(--cancelled-color);
+      outline-offset: -3px;
+    }
+
+    & > button {
+      border-radius: 0;
+      &:nth-of-type(1) {
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+      }
+      &:nth-last-of-type(1) {
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+      }
+    }
+  }
+
+  .changed {
+    outline: solid 1.5px var(--accent-color);
+    outline-offset: -1.5px;
+  }
+
+  .changed_filled_in {
+    background: var(--accent-color) !important;
+  }
+
+  .subject,
+  .teachers button,
+  .rooms button,
+  .forms button {
+    color: var(--text-color);
+    font-weight: 400;
+    border: none;
+    padding: .1rem .3rem;
+    background: none;
+    text-align: center;
+    border-radius: 5px;
+  }
+
+  .subject {
+    white-space: nowrap;
+  }
+
+  .extra_padding {
+    padding: .05rem .5rem;
+  }
+
+  .rooms.horizontal-align {
+    gap: 0;
+  }
+
+  .teachers button, .rooms button, .forms button {
+    flex: 1;
+    transition: background-color .2s ease;
+
+    &:hover, &:focus-visible {
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
+
+  .teachers button {
+    font-weight: 600;
+  }
+
+  .cancelled {
+    outline: var(--cancelled-color) solid 1.5px;
+    outline-offset: -1.5px;
+  }
+
+  .cancelled_filled_in {
+    background: var(--cancelled-color) !important;
+  }
+
+  .vertical-align {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: .1rem;
+  }
+
+  .card {
+    position: relative;
+    background: var(--background);
+    border-radius: .5rem;
+    height: 100%;
+    min-width: 6rem;
+    padding: .2rem .4rem;
+    box-sizing: border-box;
+    font-size: var(--font-size-sm);
+
+    &::before {
+      content: "";
+      pointer-events: none;
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      border-radius: .5rem;
+      background: rgba(255, 255, 255, 0.05);
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/client/src/components/Weekplan/LessonInspect.svelte b/client/src/components/Weekplan/LessonInspect.svelte
new file mode 100644
index 00000000..2ec67bf2
--- /dev/null
+++ b/client/src/components/Weekplan/LessonInspect.svelte
@@ -0,0 +1,25 @@
+<script>
+    import {active_modal, inspecting_lesson} from "../../stores.js";
+    import Modal from "../../base_components/Modal.svelte";
+    import Button from "../../base_components/Button.svelte";
+    import Lesson from "../Plan/Lesson.svelte";
+</script>
+
+<Modal id="lesson-inspect">
+    <h1 class="responsive-heading">Stundeninspektor</h1>
+
+    {#if $inspecting_lesson}
+        <Lesson
+            lesson={$inspecting_lesson}
+            plan_type={null}
+            plan_value={null}
+            date={null}
+            display_time={true}
+            disable_interactions={true}
+        />
+    {/if}
+
+    <svelte:fragment slot="footer">
+        <Button on:click={() => {$active_modal = ""}} small={true}>Schließen</Button>
+    </svelte:fragment>
+</Modal>
\ No newline at end of file
diff --git a/client/src/components/Weekplan/Weekplan.svelte b/client/src/components/Weekplan/Weekplan.svelte
new file mode 100644
index 00000000..6ab87bc3
--- /dev/null
+++ b/client/src/components/Weekplan/Weekplan.svelte
@@ -0,0 +1,342 @@
+<script>
+    import {onMount} from "svelte";
+    import {format_date, replace_page, replace_hash, update_hash} from "../../utils.js";
+    import {gen_location_hash, getDateDisabled} from "../../plan.js";
+    import {selected_favorite, settings, title} from "../../stores.js";
+    import Day from "./Day.svelte";
+
+    // Force date to be monday
+    $: date, (() => {
+        let tmp_date = firstDayOfWeek(new Date(date), 1);
+        date = `${tmp_date.getFullYear()}-${pad(tmp_date.getMonth()+1)}-${pad(tmp_date.getDate())}`;
+    })();
+
+    export let school_num;
+    export let date;
+    export let plan_type;
+    export let plan_value;
+    export let meta;
+    export let all_rooms;
+    export let enabled_dates;
+    export let free_days;
+    const pad = (n, s = 2) => (`${new Array(s).fill(0)}${n}`).slice(-s);
+    let used_rooms_hidden = true;
+    let show_left_key = true;
+    let left_key_default_plan = false;
+    let show_right_key = true;
+    let right_key_default_plan = false;
+    let week_type;
+    let week_dates = [];
+    let full_teacher_name;
+    let teacher_contact_link;
+    let teacher_image_path;
+
+    function change_day(direction) {
+        let tmp_date = new Date(date);
+        tmp_date.setDate(tmp_date.getDate() + direction);
+        date = `${tmp_date.getFullYear()}-${pad(tmp_date.getMonth()+1)}-${pad(tmp_date.getDate())}`;
+    }
+
+    function firstDayOfWeek(dateObject, firstDayOfWeekIndex) {
+        const dayOfWeek = dateObject.getDay(),
+            firstDayOfWeek = new Date(dateObject),
+            diff = dayOfWeek >= firstDayOfWeekIndex ?
+                dayOfWeek - firstDayOfWeekIndex :
+                6 - dayOfWeek
+
+        firstDayOfWeek.setDate(dateObject.getDate() - diff)
+        firstDayOfWeek.setHours(0,0,0,0)
+
+        return firstDayOfWeek
+    }
+
+    function keydown_handler(event) {
+        if($settings.day_switch_keys) {
+            if(event.key === "ArrowLeft") {
+                event.preventDefault();
+                change_day(-7);
+            } else if(event.key === "ArrowRight") {
+                event.preventDefault();
+                change_day(7);
+            }
+        }
+    }
+
+    function update_date_btns() {
+        // TODO: Week logic somehow
+        /*let valid_prev_date = get_valid_date(date, -1);
+        left_key_default_plan = valid_prev_date && enabled_dates.indexOf(valid_prev_date) === -1;
+        show_left_key = !!valid_prev_date;
+        right_key_default_plan = enabled_dates.indexOf(date) === -1 || enabled_dates.indexOf(date) === enabled_dates.length - 1;
+        show_right_key = true;*/
+    }
+
+    onMount(() => {
+        if(!school_num) {
+            replace_page('school_manager');
+        }
+        title.set("Wochenplan");
+    });
+
+    let test_rooms_data = {
+        "free_rooms_by_block": {
+            "1": [
+                "1"
+            ]
+        }
+    };
+
+    const plan_type_map = {
+        "forms": "Klasse",
+        "rooms": "Raum",
+        "teachers": "Lehrer"
+    };
+
+    let preferences_apply = true;
+
+    const lesson_start = 1;
+    const lesson_end = 10;
+    const lesson_count = lesson_end - lesson_start + 1;
+
+    const block_start = 1;
+    const block_end = 5;
+    const block_count = block_end - block_start + 1;
+
+    // Update visibility of date switching buttons
+    $: date && enabled_dates && update_date_btns();
+    // Update location hash
+    $: school_num, date, plan_type, plan_value, (() => {
+        if(location.hash === "#weekplan") {
+            replace_hash(gen_location_hash("weekplan", school_num, date, plan_type, plan_value))
+            return;
+        }
+        update_hash(gen_location_hash("weekplan", school_num, date, plan_type, plan_value));
+    })();
+
+    $: date, week_dates = [0, 1, 2, 3, 4].map((offset) => {
+        let tmp_date = new Date(date);
+        tmp_date.setDate(tmp_date.getDate() + offset);
+        return `${tmp_date.getFullYear()}-${pad(tmp_date.getMonth()+1)}-${pad(tmp_date.getDate())}`;
+    })
+</script>
+
+<svelte:window on:keydown={keydown_handler}/>
+
+{#if !plan_type}
+    <span class="responsive-text">Wähle eine Klasse, einen Lehrer, einen Raum oder die Raumübersicht aus, um einen Plan zu sehen.</span>
+{:else}
+    <div class="plan">
+        {#if week_type && plan_type && plan_value}
+            {#if plan_type === "forms" && ($selected_favorite !== -1)}
+                <button on:click={() => {preferences_apply = !preferences_apply}} class="plus-btn">{preferences_apply ? "Alle Stunden anzeigen" : "Nur ausgewählte anzeigen"}</button>
+            {/if}
+            <h1 class="plan-heading">
+                Woche für {plan_type_map[plan_type]} <span class="custom-badge">{plan_value}{#if plan_type === "teachers"}{#if full_teacher_name !== null}{` (${full_teacher_name})`}{/if}{/if}</span> vom <span class="custom-badge">{format_date(date)}</span> <span class="no-linebreak">{#if week_type}({week_type}-Woche){/if}</span>
+            </h1>
+        {/if}
+
+        {#if plan_type === "room_overview"}
+            <button on:click={() => {used_rooms_hidden = !used_rooms_hidden}} class="plus-btn">{used_rooms_hidden ? "Besetzte Räume anzeigen" : "Nur freie Räume anzeigen"}</button>
+            {#if week_type}
+                <h1 class="plan-heading">Freie Räume in der Woche vom <span class="custom-badge">{format_date(date)}</span> <span class="no-linebreak"/>({week_type}-Woche)</h1>
+            {/if}
+        {/if}
+
+        <div class="week">
+            <div class="time-indicators" class:hidden={plan_type === "room_overview"}>
+                <div class="block-col">
+                    {#each {length: block_count} as _, i}
+                        <span>{i + block_start}</span>
+                    {/each}
+                </div>
+                <div class="lesson-col">
+                    {#each {length: lesson_count} as _, i}
+                        <span>{i + lesson_start}</span>
+                    {/each}
+                </div>
+            </div>
+            {#each week_dates as week_date, i}
+                <Day
+                    first={i === 0}
+                    last={i === week_dates.length-1}
+                    bind:school_num
+                    bind:plan_type
+                    bind:plan_value
+                    bind:all_rooms
+                    bind:full_teacher_name
+                    bind:teacher_contact_link
+                    bind:teacher_image_path
+                    bind:used_rooms_hidden
+                    bind:week_letter={week_type}
+                    bind:preferences_apply
+                    enabled_dates={enabled_dates}
+                    free_days={free_days}
+                    date={week_date}
+                    block_count={block_count}
+                    meta={meta} />
+            {/each}
+        </div>
+    </div>
+{/if}
+
+<div class="day-controls">
+    <button tabindex="-1" on:click={() => {change_day(-7);}} class:hidden={!show_left_key}><span class="material-symbols-outlined left">arrow_back_ios_new</span></button>
+    <button tabindex="-1" on:click={() => {change_day(7);}} class:hidden={!show_right_key}><span class="material-symbols-outlined right">arrow_forward_ios</span></button>
+</div>
+
+<style lang="scss">
+  $lesson_height: 4.9rem; // Needs to be changed in Day.svelte as well
+
+  .week {
+    display: flex;
+    flex-direction: row;
+    border-radius: 1rem;
+    padding-left: 10px;
+
+    width: 100%;
+    overflow-x: auto;
+
+    .time-indicators {
+      display: flex;
+      flex-direction: row;
+      gap: 0.5rem;
+      margin-right: 0.5rem;
+      margin-top: calc(var(--font-size-lg) + .8rem);
+
+      &.hidden {
+        display: none;
+      }
+
+      .block-col {
+        display: flex;
+        flex-direction: column;
+
+        span {
+          height: calc(2 * $lesson_height + .5rem);
+          line-height: calc(2 * $lesson_height + .5rem);
+          font-weight: bold;
+          font-size: var(--font-size-lg);
+          text-align: center;
+        }
+      }
+
+      .lesson-col {
+        display: flex;
+        flex-direction: column;
+
+        span {
+          height: calc($lesson_height + .25rem);
+          line-height: calc($lesson_height + .25rem);
+          opacity: 0.5;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+
+  .plan-heading {
+    font-size: var(--font-size-md);
+    line-height: normal;
+    font-weight: 700;
+    margin-bottom: 15px;
+
+    @media only screen and (min-width: 1501px) {
+      font-size: var(--font-size-lg);
+    }
+  }
+
+  .custom-badge {
+    display: inline-flex;
+    flex-direction: row;
+    column-gap: .3em;
+    align-items: center;
+
+    background: rgba(255, 255, 255, 0.07);
+    padding: 2px 7px;
+    border-radius: 5px;
+    white-space: nowrap;
+    margin-bottom: .2em;
+  }
+
+  .day-controls {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100vw;
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    box-sizing: border-box;
+    pointer-events: none;
+    z-index: 1;
+
+    button {
+      pointer-events: all;
+      border: none;
+      border-radius: 999vw;
+      background: var(--background);
+      color: var(--text-color);
+      width: calc(var(--font-size-lg) * 2);
+      aspect-ratio: 1;
+      padding: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      position: relative;
+      opacity: 1;
+      transition: opacity .2s ease, outline .2s ease;
+      box-shadow: 0px 0px 5px var(--background);
+      outline: 2px solid transparent;
+
+      &.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: rgba(255, 255, 255, 0.1);
+        pointer-events: none;
+      }
+
+      span {
+        position: absolute;
+        font-size: var(--font-size-lg);
+
+        // Visually Centering Arrows
+        &.left {
+          margin-left: -4px;
+        }
+
+        &.right {
+          margin-right: -4px;
+        }
+      }
+    }
+  }
+
+  .plus-btn {
+    float: right;
+    border: none;
+    padding: 0px 10px;
+    font-size: var(--font-size-base);
+    height: clamp(calc(1.063rem + 15px), calc(4vw + 15px), calc(2.28rem + 15px));
+    // aspect-ratio: 1;
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 0.08);
+    color: var(--text-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background-color .2s ease;
+    margin-left: 20px;
+
+    &:hover, &:focus-visible {
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/client/src/plan.js b/client/src/plan.js
index 977e0c97..4c1a54d0 100644
--- a/client/src/plan.js
+++ b/client/src/plan.js
@@ -1,4 +1,4 @@
-import {get_from_db, customFetch, cache_plan} from "./utils.js";
+import {get_from_db, customFetch, cache_plan, format_revision_date} from "./utils.js";
 
 export function periods_to_block_label(periods) {
     periods.sort(function (a, b) {  return a - b;  });
@@ -197,4 +197,16 @@ export function apply_preferences(plan_type, preferences_apply, selected_favorit
         }
     }
     return new_lessons;
+}
+
+export function gen_revision_arr(all_revisions) {
+    let revision_arr = [];
+    for(const [index, revision] of Object.entries(all_revisions)) {
+        if (index == 1) {continue;}
+        revision_arr.push({
+            "id": revision,
+            "display_name": format_revision_date(revision, all_revisions[1])
+        });
+    }
+    return revision_arr;
 }
\ No newline at end of file
diff --git a/client/src/stores.js b/client/src/stores.js
index 4d323dc5..9b136222 100644
--- a/client/src/stores.js
+++ b/client/src/stores.js
@@ -11,5 +11,8 @@ export const pwa_prompt = writable();
 export const new_changelogs_available = writable(false);
 export const favorites = writable([]);
 export const selected_favorite = writable(0);
+export const api_base = writable("");
+export const inspecting_lesson = writable(null);
+export const inspecting_day = writable(null);
 
 export const register_button_visible = writable(false);
\ No newline at end of file
diff --git a/client/src/utils.js b/client/src/utils.js
index 3b9ddfc2..fc38c726 100644
--- a/client/src/utils.js
+++ b/client/src/utils.js
@@ -127,7 +127,7 @@ export function replace_page(page_id) {
 }
 
 function change_page(page_id) {
-    if(page_id === "plan" && get(current_page).startsWith("plan")) {return false;}
+    if((page_id === "plan" || page_id === "weekplan") && get(current_page).startsWith(page_id)) {return false;}
     current_page.set(page_id);
     register_button_visible.set(false);
     // console.log(`Changed Location to: "${page_id}"`);
diff --git a/user_settings.py b/user_settings.py
index f7d7866a..cce27d68 100644
--- a/user_settings.py
+++ b/user_settings.py
@@ -72,6 +72,10 @@ def validate_color(elem):
         "default": True,
         "type": "bool",
     },
+    "weekplan_default": {
+        "default": False,
+        "type": "bool",
+    }
 }
 TYPE_FUNCTIONS = {
     "bool": {