diff --git a/package.json b/package.json
index 286ee6f..bc45aaa 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
   "dependencies": {
     "@astrojs/tailwind": "^5.1.4",
     "@astrojs/vue": "^5.0.4",
+    "@fontsource-variable/montserrat": "^5.1.1",
+    "@fontsource/montserrat": "^5.1.1",
     "@googleapis/sheets": "^9.3.1",
     "@headlessui/vue": "^1.7.23",
     "@iconify-json/material-symbols": "^1.2.12",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c17c3af..652bc1b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,12 @@ importers:
       '@astrojs/vue':
         specifier: ^5.0.4
         version: 5.0.4(@types/node@22.10.5)(astro@5.1.7(@types/node@22.10.5)(jiti@1.21.7)(rollup@4.30.1)(typescript@5.7.3)(yaml@2.7.0))(jiti@1.21.7)(rollup@4.30.1)(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)
+      '@fontsource-variable/montserrat':
+        specifier: ^5.1.1
+        version: 5.1.1
+      '@fontsource/montserrat':
+        specifier: ^5.1.1
+        version: 5.1.1
       '@googleapis/sheets':
         specifier: ^9.3.1
         version: 9.3.1
@@ -399,6 +405,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@fontsource-variable/montserrat@5.1.1':
+    resolution: {integrity: sha512-eHmSruS3B+4wVaHk6ShNUJj1MbWEohOuriwN/oYR2VY8jRS83a5SKQeG1wu4Eku3v3f5cXTIbfd1tHeQ7GXkiA==}
+
+  '@fontsource/montserrat@5.1.1':
+    resolution: {integrity: sha512-myTQCo0XWf5AXc3Pm5GFFTstueYTacE+gpL3G8Vf5ELpr/rBfW+zr7dKLPYXlq2r21HHwfyw6yueKWccWUtKBA==}
+
   '@googleapis/sheets@9.3.1':
     resolution: {integrity: sha512-nPgzOiDs/FSFhE+dX2KfkmsmkXM3WfXYP06FoW8cXvHshwxHSI3FbXwe5XJYstDAWXP9YA7AMSvmwnuD4OAl2w==}
     engines: {node: '>=12.0.0'}
@@ -2905,6 +2917,10 @@ snapshots:
   '@esbuild/win32-x64@0.24.2':
     optional: true
 
+  '@fontsource-variable/montserrat@5.1.1': {}
+
+  '@fontsource/montserrat@5.1.1': {}
+
   '@googleapis/sheets@9.3.1':
     dependencies:
       googleapis-common: 7.2.0
diff --git a/src/assets/style.css b/src/assets/style.css
index 0c828d5..16844a2 100644
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -5,7 +5,7 @@ body {
 }
 
 .btn {
-  @apply inline-flex items-center px-4 py-2 text-white font-medium;
+  @apply inline-flex items-center px-4 py-2 text-white font-medium rounded-full font-bold;
   @apply bg-blue-700 hover:bg-blue-800 focus:ring focus:ring-blue-600/50 outline-none motion-safe:transition;
 }
 
@@ -13,6 +13,11 @@ body {
   @apply bg-gray-700 hover:bg-gray-800 focus:ring-gray-600/50 cursor-not-allowed;
 }
 
+.btn-outline {
+  @apply inline-flex items-center px-4 py-2 text-white rounded-full text-blue-700 font-bold;
+  @apply border border-blue-700 hover:bg-blue-800 hover:text-white focus:ring focus:ring-blue-600/50 outline-none motion-safe:transition;
+}
+
 .btn-text {
   @apply text-blue-900 inline-flex items-center focus:ring focus:ring-blue-600/50 focus:ring-offset-1 outline-none motion-safe:transition rounded;
 }
diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
index 7c4d8e2..63c990c 100644
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -17,8 +17,10 @@ const toIntro = (e: Event) => {
 <template>
   <header class="container mx-auto py-12 px-4">
     <a href="/" @click="toIntro">
-      <h1 class="text-6xl font-extrabold mb-1">Real-O-Mat</h1>
+      <h1 class="text-6xl md:text-8xl font-bold mb-1">Real-O-Mat</h1>
     </a>
-    <span class="text-xl font-medium text-blue-800"> Bundestagswahl 2025 </span>
+    <span class="text-xl font-medium text-purple-800">
+      Bundestagswahl 2025
+    </span>
   </header>
 </template>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 2bd3049..87f6ab8 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,5 +1,6 @@
 ---
 import '../assets/style.css'
+import '@fontsource-variable/montserrat'
 import SiteHeader from '../components/SiteHeader.vue'
 import logo from '../assets/fragdenstaat.svg'
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ca59603..279624b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -21,6 +21,7 @@ const partners = await getCollection('partners')
               <Image
                 src={partner.data.logo}
                 alt={partner.data.name}
+                loading="eager"
                 class="w-full h-20 object-contain aspect-[3/2]"
               />
             </li>
diff --git a/src/pages/methodik.astro b/src/pages/methodik.astro
new file mode 100644
index 0000000..2869932
--- /dev/null
+++ b/src/pages/methodik.astro
@@ -0,0 +1,10 @@
+---
+import Layout from '../layouts/Layout.astro'
+---
+
+<Layout>
+  <div class="bg-white p-4">
+    <h2>Methodik</h2>
+    <p>Lorem ipsum dolor</p>
+  </div>
+</Layout>
diff --git a/src/views/Questionnaire.vue b/src/views/Questionnaire.vue
index b586521..5c62c13 100644
--- a/src/views/Questionnaire.vue
+++ b/src/views/Questionnaire.vue
@@ -90,7 +90,7 @@ const previousQuestion = () => {
     <div class="bg-white">
       <article v-if="currentQuestion" class="overflow-hidden pb-4">
         <div
-          class="bg-blue-200"
+          class="bg-purple-200"
           role="progressbar"
           aria-label="Fortschritt"
           aria-valuemin="1"
@@ -98,7 +98,7 @@ const previousQuestion = () => {
           :aria-valuenow="currentQuestionProgress"
         >
           <div
-            class="h-2 bg-blue-900 motion-safe:transition-all duration-300 ease-out"
+            class="h-2 bg-purple-900 motion-safe:transition-all duration-300 ease-out"
             :style="{
               width: `${(currentQuestionProgress / questionsCount) * 100}%`,
             }"
@@ -112,21 +112,20 @@ const previousQuestion = () => {
             mode="out-in"
           >
             <div
-              class="px-4 mt-4 text-gray-600 flex"
+              class="px-4 mt-4 text-gray-700 text-2xl font-medium flex"
               :key="currentQuestionIndex"
             >
-              <span> {{ currentQuestion.category }} </span>
-              <div
-                class="max-md:hidden ms-auto whitespace-nowrap"
-                aria-hidden="true"
-              >
-                Frage {{ currentQuestionProgress }} / {{ questionsCount }}
-              </div>
+              <span>
+                <span aria-hidden="false">
+                  {{ currentQuestionProgress }} / {{ questionsCount }}
+                </span>
+                {{ currentQuestion.category }}
+              </span>
             </div>
           </Transition>
           <Transition mode="out-in" :name="transitionName">
             <div class="px-4" :key="currentQuestionIndex">
-              <h2 class="my-8 text-xl md:text-2xl">
+              <h2 class="my-4 text-xl font-semibold md:text-5xl">
                 {{ currentQuestion.thesis }}
               </h2>
             </div>
@@ -140,7 +139,6 @@ const previousQuestion = () => {
             <AnswerButton
               :answer="answer as Answer"
               @save="saveAnswer"
-              :accesskey="i + 1"
               :disabled="disabled"
               v-for="({ disabled, icon }, answer, i) in answerButtons"
             >
@@ -148,7 +146,7 @@ const previousQuestion = () => {
             </AnswerButton>
 
             <div class="!ms-auto self-center max-md:pt-4">
-              <button @click="skipQuestion" class="btn-text">
+              <button @click="skipQuestion" class="btn-outline">
                 These überspringen
                 <IconForward aria-hidden="true" class="ms-1" />
               </button>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 9367ce0..42214bf 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -4,7 +4,7 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        sans: ['Creato Display'],
+        sans: ['Montserrat Variable'],
       },
     },
   },