diff --git a/_config.ts b/_config.ts
index 9b98182..de9b54d 100644
--- a/_config.ts
+++ b/_config.ts
@@ -8,8 +8,9 @@ const site = lume({}, { markdown });
 site.use(postcss());
 
 site.loadAssets([
-  ".svg",
   ".png",
+  ".jpg",
+  ".svg",
   ".pdf",
 ]);
 
diff --git a/_includes/header.njk b/_includes/header.njk
index dd82b84..5fe323e 100644
--- a/_includes/header.njk
+++ b/_includes/header.njk
@@ -1,7 +1,7 @@
 {% if header %}
 <header class="page-header">
-  <h1 class="page-header-headline">{{ title }}</h1>
-  <p class="page-header-subheadline">{{ header.subheadline }}<p>
-  <a href="{{ header.headlineCta.link }}" class="page-header-cta">{{ header.headlineCta.text }}</a>
+  <h1 class="page-header-headline">{{ title | safe }}</h1>
+  <p class="page-header-subheadline">{{ header.subheadline | safe }}<p>
+  <a href="{{ header.headlineCta.link | safe }}" class="page-header-cta">{{ header.headlineCta.text | safe }}</a>
 </header>
 {% endif %}
diff --git a/_includes/navigation.njk b/_includes/navigation.njk
index be50971..587f980 100644
--- a/_includes/navigation.njk
+++ b/_includes/navigation.njk
@@ -1,9 +1,17 @@
 <nav class="navigation">
-  <a href="/" class="logo navigation-link">Logo</a>
+  <a href="/" class="logo navigation-link">
+    <img
+      class="logo-image"
+      src="/img/logo.png"
+      alt="Unser Logo"
+    />
+  </a>
   <ul class="menu">
+  {#
     <li class="menu-item">
       <a href="/geschichte" class="navigation-link">Geschichte</a>
     </li>
+  #}
     <li class="menu-item">
       <a href="/veranstaltungen" class="navigation-link">Veranstaltungen</a>
     </li>
diff --git a/downloads.css b/downloads.css
index dcb352c..88fcae1 100644
--- a/downloads.css
+++ b/downloads.css
@@ -31,6 +31,7 @@
   flex-direction: row;
   flex-wrap: wrap;
   background-color: var(--primary);
+  border-radius: 5px;
   height: auto;
 }
 @media screen and (min-width: 1400px) {
diff --git a/img/header-1024.jpg b/img/header-1024.jpg
new file mode 100644
index 0000000..6a5073b
Binary files /dev/null and b/img/header-1024.jpg differ
diff --git a/img/header-1920.jpg b/img/header-1920.jpg
new file mode 100644
index 0000000..c31ba3a
Binary files /dev/null and b/img/header-1920.jpg differ
diff --git a/img/header-full.jpg b/img/header-full.jpg
new file mode 100644
index 0000000..6ecb70d
Binary files /dev/null and b/img/header-full.jpg differ
diff --git a/img/header.png b/img/header.png
deleted file mode 100644
index 07ff35b..0000000
Binary files a/img/header.png and /dev/null differ
diff --git a/img/header2x.png b/img/header2x.png
deleted file mode 100644
index cefc31b..0000000
Binary files a/img/header2x.png and /dev/null differ
diff --git a/img/logo.png b/img/logo.png
new file mode 100644
index 0000000..c7a8938
Binary files /dev/null and b/img/logo.png differ
diff --git a/styles.css b/styles.css
index 8bd34d6..8cf6770 100644
--- a/styles.css
+++ b/styles.css
@@ -44,6 +44,8 @@
   color: var(--primary-font);
   text-decoration: none;
   padding: 12px 24px;
+  display: flex;
+  align-items: center;
 }
 
 .logo {
@@ -53,6 +55,10 @@
   border-bottom-right-radius: 5px;
 }
 
+.logo-image {
+  height: 35px;
+}
+
 .menu {
   list-style: none;
   display: flex;
@@ -73,9 +79,9 @@
 .page-header {
   height: 100vh;
   justify-content: center;
-  background-image: url(/img/header.png);
+  background-image: url(/img/header-1024.jpg);
   background-size: cover;
-  background-position: center;
+  background-position: bottom right;
   background-repeat: no-repeat;
   position: relative;
   border-bottom: 5px solid var(--primary);
@@ -84,12 +90,25 @@
 @media screen and (min-width: 768px) {
   .page-header {
     grid-column-start: 1;
-    grid-column-end: 2;
+    grid-column-end: 3;
     grid-row-start: 1;
     grid-row-end: 2;
   }
 }
 
+@media screen and (min-width: 1025px) {
+  .page-header {
+    background-image: url(/img/header-1920.jpg);
+    background-position: center;
+  }
+}
+
+@media screen and (min-width: 1921px) {
+  .page-header {
+    background-image: url(/img/header-full.jpg);
+  }
+}
+
 .page-header::before {
   content: '';
   display: block;
@@ -124,6 +143,10 @@
   text-decoration: none;
 }
 
+.page-header-cta:hover {
+  text-decoration: underline;
+}
+
 .page-header,
 .page-main {
   width: 100%;
@@ -159,7 +182,8 @@
   padding-right: var(--side-padding);
 }
 
-.navigation + .page-title {
+.navigation + .page-title,
+.page-header + .page-main {
   margin-top: 20vh;
 }
 
diff --git a/unterricht/index.yml b/unterricht/index.yml
index de0a770..77ba0da 100644
--- a/unterricht/index.yml
+++ b/unterricht/index.yml
@@ -3,7 +3,7 @@ layout: layouts/default.njk
 extraStylesheets:
   - /downloads.css
 
-title: Begleitende Unterrichts&shy;materialien zur Jubiläums&shy;woche „60 Jahre Anwerbe&shy;abkommen der Türkei mit der Bundes&shy;republik Deutschland“ S
+title: Begleitende Unterrichts&shy;materialien zur Jubiläums&shy;woche „60 Jahre Anwerbe&shy;abkommen der Türkei mit der Bundes&shy;republik Deutschland“
 
 article: "
     Das Auswärtige Amt in Bonn unterzeichnete gemeinsam mit der türkischen Botschaft am 30.10.1961 ein Anwerbeabkommen, in dessen Folge sich türkische Arbeiter*innen auf eine Stelle in Deutschland bewerben konnten. Zuvor wurden bereits Abkommen mit Italien (1955), Griechenland (1960) und Spanien (1960) abgeschlossen. Es folgten Marokko (1963), die Republik Korea (1963), Portugal (1964), Tunesien (1965) und das damalige Jugoslawien (1968, heute: Slowenien, Kroatien, Bosnien-Herzegowina, Serbien, Montenegro, Republik Nordmazedonien und das Kosovo).