diff --git a/src/App.svelte b/src/App.svelte
index 9e5d175..af63fde 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,41 +1,31 @@
 <script lang="ts">
-    // import svelteLogo from "./assets/svelte.svg";
-    // import viteLogo from "/vite.svg";
-    import { currentView } from "./lib/store";
-    import Summary from "./lib/Summary.svelte";
-    import GymProgress from "./lib/GymProgress.svelte";
-    import CardioProgress from "./lib/CardioProgress.svelte";
-    import DietProgress from "./lib/DietProgress.svelte";
+  // import svelteLogo from "./assets/svelte.svg";
+  // import viteLogo from "/vite.svg";
+  import { currentView } from "./lib/store";
+  import Summary from "./lib/Summary.svelte";
+  import GymProgress from "./lib/GymProgress.svelte";
+  import CardioProgress from "./lib/CardioProgress.svelte";
+  import DietProgress from "./lib/DietProgress.svelte";
+  import Info from "./lib/Info.svelte"
 </script>
 
 <div class="chrome">
-    <main>
-        {#if $currentView === 0}
-            <Summary />
-        {/if}
-        {#if $currentView === 1}
-            <GymProgress />
-        {/if}
-        {#if $currentView === 2}
-            <CardioProgress />
-        {/if}
-        {#if $currentView === 3}
-            <DietProgress />
-        {/if}
-    </main>
+    {#if $currentView === 0}
+      <Summary />
+    {/if}
+    {#if $currentView === 1}
+      <GymProgress />
+    {/if}
+    {#if $currentView === 2}
+      <CardioProgress />
+    {/if}
+    {#if $currentView === 3}
+      <DietProgress />
+    {/if}
+    {#if $currentView === 4}
+      <Info />
+    {/if}
 </div>
 
 <style>
-    .chrome {
-        height: 100vh;
-        display: flex;
-        flex-direction: column-reverse;
-
-        main {
-            flex: 1;
-            overflow: auto;
-            text-align: center;
-            padding: 0.5em;
-        }
-    }
 </style>
diff --git a/src/app.css b/src/app.css
index a9f0b06..97ca3f5 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,11 +1,9 @@
 :root {
-    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    font-family: "Open Sans", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
     line-height: 1.5;
     font-weight: 400;
 
-    color-scheme: light;
-    color: rgba(255, 255, 255, 0.87);
-    background-color: #242424;
+    color-scheme: light dark;
 
     font-synthesis: none;
     text-rendering: optimizeLegibility;
@@ -13,56 +11,109 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-    font-weight: 500;
-    color: #646cff;
-    text-decoration: inherit;
-}
-a:hover {
-    color: #535bf2;
-}
-
 body {
     margin: 0;
 }
 
-h1 {
-    font-size: 3.2em;
-    line-height: 1.1;
+main {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background-color: #e0e0e0;
+    box-sizing: border-box;
+    padding: 1em;
 }
 
-.card {
-    padding: 2em;
+h1 {
+    font-size: 3em;
+    line-height: 1.1;
+    margin: 1.25em 0;
+    text-wrap: balance;
+    padding-left: 0.5em;
 }
 
 button {
-    border-radius: 8px;
-    border: 1px solid transparent;
-    padding: 0.6em 1.2em;
+    appearance: none;
+    border-radius: 0;
+    border: 0;
+    padding: 0;
     font-size: 1em;
     font-weight: 500;
     font-family: inherit;
-    background-color: #1a1a1a;
-    cursor: pointer;
-    transition: border-color 0.25s;
-}
-button:hover {
-    border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
-    :root {
-        color: #213547;
-        background-color: #ffffff;
+    article {
+        opacity: 0.8;
+        label {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            grid-template-areas: "name name" "date input";
+            padding: 1em;
+
+            input {
+                grid-area: input;
+            }
+            strong {
+                grid-area: name;
+            }
+            small {
+                grid-area: date;
+            }
+        }
+}
+    article:has(:checked) {
+        opacity: 0.25;
+
+        + article:not(:has(:checked)) {
+            opacity: 1;
+        }
     }
-    a:hover {
-        color: #747bff;
+
+.clickable {
+    box-shadow: 0 3px 0 rgba(0, 0, 0, .75);
+    border: 2px solid #222;
+    border-radius: 8px;
+    background-color: #f1f1f1;
+    display: block;
+
+    &:hover, &:focus {
+        background-color: #e1e1e1;
     }
-    button {
-        background-color: #f9f9f9;
+
+    &:active {
+        transform: translateY(1px);
     }
 }
+
+.back {
+    background-color: #e0e0e0;
+    color: #000;
+
+    &:hover, &:focus {
+        background-color: #d0d0d0;
+    }
+}
+
+    .calendar {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 1.75em 0.5em;
+    }
+
+    header {
+        display: flex;
+        padding: 1em;
+        gap: 0.5em;
+        align-items: center;
+
+        button {
+            padding: 0.5em 1em;
+        }
+
+        h1 {
+            font-size: 1.25em;
+            flex: 1;
+            margin: 0;
+        }
+    }
+    
diff --git a/src/lib/CardioProgress.svelte b/src/lib/CardioProgress.svelte
index c42f080..559d5f7 100644
--- a/src/lib/CardioProgress.svelte
+++ b/src/lib/CardioProgress.svelte
@@ -9,15 +9,17 @@
     };
 </script>
 
-<div>
-    <button onclick={() => back()}>&lt;-</button>
+    <header>
+    <button class="clickable back" onclick={() => back()}>←</button>
     <h1>
         Cardio {done}/{remaining}
     </h1>
-    <progress max={remaining} value={done}></progress>
+    </header>
+<main>
+    <progress hidden max={remaining} value={done}></progress>
     <div class="calendar">
         {#each $cardio as col, i}
-            <article>
+            <article class="clickable">
                 <label>
                     <input type="checkbox" bind:checked={col.completed} />
                     <strong
@@ -30,42 +32,14 @@
             </article>
         {/each}
     </div>
-</div>
+</main>
 
 <style>
-    .calendar {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        gap: 0.5em 0.25em;
+    main {
+        background-color: #5dc5f8;
+        border-top: 4px solid rgba(0, 0, 0, 0.2)
     }
-
-    article {
-        border: 2px solid #aaa;
-        border-radius: 7px;
-
-        label {
-            display: grid;
-            grid-template-columns: auto 1fr;
-            grid-template-areas: "input name" "input date";
-            padding: 1.5em;
-
-            input {
-                grid-area: input;
-            }
-            strong {
-                grid-area: name;
-            }
-            small {
-                grid-area: date;
-            }
-        }
-    }
-
-    article:has(:checked) {
-        border-color: #080;
-        background-color: #afa;
-    }
-
+    
     article:nth-child(1) {
         grid-column: 2;
     }
diff --git a/src/lib/DietProgress.svelte b/src/lib/DietProgress.svelte
index ebc4b45..18f8a45 100644
--- a/src/lib/DietProgress.svelte
+++ b/src/lib/DietProgress.svelte
@@ -6,13 +6,22 @@
     const back = () => {
         currentView.update((_) => 0);
     };
+
+    const M = ["jan", "feb", "mar", "apr", "maj", "jun", "jul", "aug", "sep", "okt", "nov", "dec"]
+
+    const dm = (date) => {
+        const d = new Date(date)
+        return `${d.getDate()} ${M[d.getMonth()]}`
+    }
 </script>
 
-<div>
-    <button onclick={() => back()}>&lt;-</button>
+    <header>
+    <button class="clickable back" onclick={() => back()}>←</button>
     <h1>
         Diet {done}/{dayscount}
     </h1>
+    </header>
+<main>
     <ul>
         <li title="Nothing except meals.">Stop snacking.</li>
         <li
@@ -33,11 +42,11 @@
     <p>
         -- <a href="https://www.youtube.com/watch?v=fB_ESE2XwOU">Alan Thrall</a>
     </p>
-    <progress max={dayscount} value={done}></progress>
+    <progress max={dayscount} hidden value={done}></progress>
 
     <div class="calendar">
         {#each $diet.days as day, i}
-            <article>
+            <article class="clickable">
                 {#if day.date in $diet.reds}
                     <div class="red">
                         {$diet.reds[day.date]}
@@ -45,25 +54,35 @@
                 {:else}
                     <label>
                         <input type="checkbox" bind:checked={day.completed} />
-                        {day.date}
+                        {dm(day.date)}
                     </label>
                 {/if}
             </article>
         {/each}
     </div>
-</div>
+</main>
 
 <style>
+    main {
+        background-color: #35d450;
+        border-top: 4px solid rgba(0, 0, 0, 0.2)
+    }
+
     .calendar {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5em 0.25em;
+        grid-template-columns: repeat(7, 1fr);
     }
 
     .red {
         background: #ddd;
         color: #888;
-        padding: 1.5em;
+        padding: 0.75em;
+        overflow: hidden;
+        font-size: 6px;
+    }
+
+    article:has(.red) {
+        pointer-events: none;
+        opacity: 0.5;
     }
 
     ul {
@@ -76,33 +95,21 @@
     }
 
     article {
-        border: 2px solid #aaa;
-        border-radius: 7px;
+        > * {
+            padding: 0.75em;
+            text-align: center;
 
-        label {
-            display: grid;
-            grid-template-columns: auto 1fr;
-            grid-template-areas: "input name" "input date";
-            padding: 1.5em;
+            &:first-word {
+                font-size: 2em;
+                display: block;
+            }
 
             input {
-                grid-area: input;
-            }
-            strong {
-                grid-area: name;
-            }
-            small {
-                grid-area: date;
+                position: absolute;
+                opacity: 0;
+                pointer-events: none;
             }
         }
     }
 
-    article:has(:checked) {
-        border-color: #080;
-        background-color: #afa;
-    }
-
-    article:nth-child(1) {
-        grid-column: 3;
-    }
 </style>
diff --git a/src/lib/GymProgress.svelte b/src/lib/GymProgress.svelte
index 280ab36..daa5d53 100644
--- a/src/lib/GymProgress.svelte
+++ b/src/lib/GymProgress.svelte
@@ -8,15 +8,17 @@
     };
 </script>
 
-<div>
-    <button onclick={() => back()}>&lt;-</button>
+<header>
+    <button class="clickable back" onclick={() => back()}>←</button>
     <h1>
         Gym {done}/{remaining}
     </h1>
-    <progress max={remaining} value={done}></progress>
+</header>
+<main>
+    <progress hidden max={remaining} value={done}></progress>
     <div class="calendar">
         {#each $gym as col}
-            <article>
+            <article class="clickable">
                 <label>
                     <input type="checkbox" bind:checked={col.completed} />
                     <strong>{col.name}</strong>
@@ -25,40 +27,12 @@
             </article>
         {/each}
     </div>
-</div>
+</main>
 
 <style>
-    .calendar {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        gap: 0.5em 0.25em;
-    }
-
-    article {
-        border: 2px solid #aaa;
-        border-radius: 7px;
-
-        label {
-            display: grid;
-            grid-template-columns: auto 1fr;
-            grid-template-areas: "input name" "input date";
-            padding: 1.5em;
-
-            input {
-                grid-area: input;
-            }
-            strong {
-                grid-area: name;
-            }
-            small {
-                grid-area: date;
-            }
-        }
-    }
-
-    article:has(:checked) {
-        border-color: #080;
-        background-color: #afa;
+    main {
+        background-color: #f62b5a;
+        border-top: 4px solid rgba(0, 0, 0, 0.2)
     }
 
     article:nth-child(1) {
diff --git a/src/lib/Info.svelte b/src/lib/Info.svelte
new file mode 100644
index 0000000..30171fb
--- /dev/null
+++ b/src/lib/Info.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { currentView } from "./store";
+    const back = () => {
+        currentView.update((_) => 0);
+    };
+</script>
+
+<main>
+<div class="infobox">
+  <h1>Hej, Jag har en 40-årskris.</h1>
+  <p><em>Dessutom hägrar en vecka på Sweden rock festival.</em></p>
+  <p>Ryggen och benen behöver vara i form.</p>
+  <p>
+    För att göra träningen litet mer belönande skapades denna app för att ge mig
+    möjlighet att bocka i allt jag gör. Jag planerar att göra nedanstående:
+  </p>
+  <ul>
+    <li>Börja löpträna. Mål: 5km löpning efter 7 veckor.</li>
+    <li>
+      Återuppta styrkelyft. Mål: 11 veckors träning, med avslutande toppning och
+      maxsinglar.
+    </li>
+    <li>
+      Inleda diet. Äta fasta måltider och skippa fika, snacks, godis och
+      sockerläsk.
+    </li>
+  </ul>
+</div>
+  <button class="clickable" on:click={back()}>
+    Tillbaka
+  </button>
+</main>
+
+<style>
+  main {
+    background-color: #ff0;
+  }
+  
+  .infobox {
+    margin: 1em 0;
+    background-color: #fff;
+    border: 2px solid #aaa;
+    border-radius: 8px;
+    padding: 0.5em 1.5em;
+  }
+
+  button {
+    padding: 1em;
+    margin: 2em auto;
+  }
+</style>
diff --git a/src/lib/Summary.svelte b/src/lib/Summary.svelte
index 496fd2a..97ebba7 100644
--- a/src/lib/Summary.svelte
+++ b/src/lib/Summary.svelte
@@ -1,62 +1,76 @@
 <script lang="ts">
-    import { gym, cardio, diet, currentView } from "./store";
-    let gymProgress = $derived($gym.filter((c) => c.completed).length);
-    let cardioProgress = $derived($cardio.filter((c) => c.completed).length);
-    let dietProgress = $derived($diet.days.filter((c) => c.completed).length);
+  import { gym, cardio, diet, currentView } from "./store";
+  let gymProgress = $derived($gym.filter((c) => c.completed).length);
+  let cardioProgress = $derived($cardio.filter((c) => c.completed).length);
+  let dietProgress = $derived($diet.days.filter((c) => c.completed).length);
 
-    const navigate = (v: 0 | 1 | 2 | 3) => {
-        currentView.update((_) => v);
-    };
+  const navigate = (v: 0 | 1 | 2 | 3 | 4) => {
+    currentView.update((_) => v);
+  };
 </script>
 
-<div>
-    <h1>Summary</h1>
-    <ul class="cards">
-        <li>
-            <button onclick={() => navigate(1)}>
-                <i>{gymProgress}</i> / {$gym.length} <span>gympass gjorda</span>
-            </button>
-        </li>
-        <li>
-            <button onclick={() => navigate(2)}>
-                <i>{cardioProgress}</i> / {$cardio.length}
-                <span>löppass lufsade</span>
-            </button>
-        </li>
-        <li>
-            <button onclick={() => navigate(3)}>
-                <i>{dietProgress}</i> / {$diet.days.length}
-                <span>dagar på diet</span>
-            </button>
-        </li>
-    </ul>
+<main>
+<h1>Dags att komma i form!</h1>
+<div class="cards">
+  <button class="clickable gym" onclick={() => navigate(1)}>
+    <i>{gymProgress}</i> / {$gym.length} <span>gympass gjorda</span>
+  </button>
+  <button class="clickable cardio" onclick={() => navigate(2)}>
+    <i>{cardioProgress}</i> / {$cardio.length}
+    <span>löppass lufsade</span>
+  </button>
+  <button class="clickable diet" onclick={() => navigate(3)}>
+    <i>{dietProgress}</i> / {$diet.days.length}
+    <span>dagar på diet</span>
+  </button>
+  <button class="clickable info" onclick={() => navigate(4)}>
+    <i>?</i>
+  </button>
 </div>
+</main>
 
 <style>
-    .cards {
-        list-style: none;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 1em;
+  .cards {
+    list-style: none;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1em;
 
-        > li {
-            flex: 1;
-            border: 2px solid #aaa;
-            border-radius: 5px;
-            padding: 0;
+    button {
+      padding: 1.5em;
 
-            button {
-                padding: 1em;
-            }
-
-            i {
-                font-size: 2em;
-                font-style: normal;
-            }
-
-            span {
-                display: block;
-            }
-        }
+      &:hover {
+        filter: brightness(95%);
+      }
     }
+
+    .gym {
+      background-color: #f62b5a;
+      color: #fff;
+    }
+
+    .cardio {
+      background-color: #5dc5f8;
+      color: #000;
+    }
+
+    .diet {
+      background-color: #35d450;
+      color: #fff;
+    }
+
+    .info {
+      background-color: #ff0;
+      color: #000;
+    }
+
+    i {
+      font-size: 2em;
+      font-style: normal;
+    }
+
+    span {
+      display: block;
+    }
+  }
 </style>