diff --git a/assets/css/app.css b/assets/css/app.css
index d8c3184..c15ffe9 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -13,81 +13,34 @@
 }
 
 /* Taken from https://codepen.io/alvarotrigo/pen/xxYVrmK */
-.calendar {
-    display: inline-grid;
-    justify-content: center;
-    align-items: center;
-    background: #fff;
-    padding: 20px;
-    margin: 40px;
-    border-radius: 5px;
-    box-shadow: 0px 40px 30px -20px rgba(0, 0, 0, 0.3);
+.days>span {
+    width: 50px;
+}
 
-    .month {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 20px;
-        margin-bottom: 20px;
-        font-weight: 300;
+.dates {
+    button {
+        cursor: pointer;
+        outline: 0;
+        border: 0;
+        font-size: 16px;
+        justify-self: center;
+        align-self: center;
+        width: 50px;
+        height: 50px;
+        border-radius: 50px;
+        margin: 2px;
+        transition-duration: .2s;
 
-        .year {
-            font-weight: 600;
-            margin-left: 10px;
+        &.today {
+            box-shadow: inset 0px 0px 0px 2px #0a3d62;
         }
-    }
 
-    .days {
-        display: grid;
-        justify-content: center;
-        align-items: center;
-        grid-template-columns: repeat(7, 1fr);
-        color: #999;
-        font-weight: 600;
-        margin-bottom: 15px;
-
-        span {
-            width: 50px;
-            justify-self: center;
-            align-self: center;
-            text-align: center;
+        &:first-child {
+            grid-column: 3;
         }
-    }
 
-    .dates {
-        display: grid;
-        grid-template-columns: repeat(7, 1fr);
-
-        button {
-            cursor: pointer;
-            outline: 0;
-            border: 0;
-            font-size: 16px;
-            justify-self: center;
-            align-self: center;
-            width: 50px;
-            height: 50px;
-            border-radius: 50px;
-            margin: 2px;
-            transition-duration: .2s;
-
-            &.today {
-                box-shadow: inset 0px 0px 0px 2px #0a3d62;
-            }
-
-            &:first-child {
-                grid-column: 3;
-            }
-
-            &:hover {
-                background: #eee;
-            }
-
-            &:focus {
-                background: #0a3d62;
-                color: #fff;
-                font-weight: 600;
-            }
+        &:hover {
+            background: #eee;
         }
     }
 }
\ No newline at end of file
diff --git a/lib/mihainator_web/components/layouts/app.html.heex b/lib/mihainator_web/components/layouts/app.html.heex
index cb662e1..67b0e98 100644
--- a/lib/mihainator_web/components/layouts/app.html.heex
+++ b/lib/mihainator_web/components/layouts/app.html.heex
@@ -1,8 +1,23 @@
 <header class="px-2 sm:px-2 lg:px-2">
-  <div class="flex items-center justify-end py-3 text-sm">
+  <div class="flex items-center justify-between py-3 text-sm">
+    <div class="flex items-center gap-4">
+      <a href="/">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="size-8 text-slate-700 dark:text-slate-300"
+        >
+          <path d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z" />
+          <path d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z" />
+        </svg>
+      </a>
+    </div>
     <a
       href="https://github.com/Lechindianer/threema-history-checker"
-      class="hover:text-zinc-700 bg-slate-200 flex rounded p-2 items-center gap-x-3 shadow-md"
+      class="hover:text-zinc-700 bg-slate-200 dark:bg-slate-500 dark:ring-2 dark:ring-slate-400 dark:hover:text-zinc-700 dark:text-slate-50 flex rounded p-2 opacity-80 items-center gap-x-3 shadow-md"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
diff --git a/lib/mihainator_web/components/layouts/root.html.heex b/lib/mihainator_web/components/layouts/root.html.heex
index 50ac646..af8c6e4 100644
--- a/lib/mihainator_web/components/layouts/root.html.heex
+++ b/lib/mihainator_web/components/layouts/root.html.heex
@@ -5,13 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
     <.live_title suffix=" · Phoenix Framework">
-      <%= assigns[:page_title] || "Mihainator" %>
+      <%= assigns[:page_title] || "Threema history checker" %>
     </.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>
-  <body class="bg-white">
+  <body class="bg-white dark:bg-slate-800">
     <%= @inner_content %>
   </body>
 </html>
diff --git a/lib/mihainator_web/live/components/file_input_component.html.heex b/lib/mihainator_web/live/components/file_input_component.html.heex
index 8e9d00b..c099bdb 100644
--- a/lib/mihainator_web/live/components/file_input_component.html.heex
+++ b/lib/mihainator_web/live/components/file_input_component.html.heex
@@ -1,4 +1,26 @@
-<div>
+<div class="flex flex-col space-y-8 pt-4  text-slate-700 dark:text-slate-300">
+  <p class="text-lg">
+    Threema history checker allows you to find out who is more communicative from the existing
+    communication between you and your conversation partner.
+  </p>
+
+  <section class="p-4 bg-slate-200 dark:bg-slate-700 rounded-md dark:ring-2 dark:ring-blue-500">
+    <p class="font-bold mb-3">How to create backup files</p>
+
+    <ul class="list-disc p-4">
+      <li>Press ... in the right upper corner</li>
+      <li>Enter "backups"</li>
+      <li>Change to tab "data backup"</li>
+      <li>Follow the steps over there</li>
+    </ul>
+
+    <ul class="list-disc p-4">
+      <li>Use a file explorer app to unzip the backup</li>
+      <li>Inside the contents of the backup file you'll see several CSV files</li>
+      <li>Select one and upload here</li>
+    </ul>
+  </section>
+
   <p class="text-lg">Upload a Threema chat history file (.csv) and see who's more interactive!</p>
 
   <form
@@ -9,20 +31,20 @@
     class="flex flex-col space-y-4"
   >
     <div>
-      <label class="block mb-2 text-sm font-bold text-gray-900" for={@uploads.history.ref}>
+      <label class="block mb-2 text-sm font-bold text-slate-900" for={@uploads.history.ref}>
         CSV file
       </label>
 
       <.live_file_input
         upload={@uploads.history}
-        class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+        class="block w-full text-sm text-slate-900 border border-slate-300 rounded-lg cursor-pointer bg-slate-50 focus:outline-none dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400"
       />
     </div>
 
     <button
       :if={@submit_disabled?}
       disabled={@submit_disabled?}
-      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-1/2 place-self-end disabled:opacity-75"
+      class="bg-blue-500 hover:bg-blue-700 text-white dark:text-slate-50 font-bold py-2 px-4 rounded w-1/2 place-self-end disabled:opacity-75"
       type="submit"
     >
       Upload
@@ -30,7 +52,7 @@
 
     <button
       :if={not @submit_disabled?}
-      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-1/2 place-self-end"
+      class="bg-blue-500 hover:bg-blue-700 text-white dark:text-slate-50 font-bold py-2 px-4 rounded w-1/2 place-self-end"
       type="submit"
     >
       Upload
diff --git a/lib/mihainator_web/live/components/result_component.ex b/lib/mihainator_web/live/components/result_component.ex
index 0596222..ade65a3 100644
--- a/lib/mihainator_web/live/components/result_component.ex
+++ b/lib/mihainator_web/live/components/result_component.ex
@@ -25,8 +25,8 @@ defmodule MihainatorWeb.ResultComponent do
 
     state =
       cond do
-        length_in < length_out -> "bg-green-300"
-        length_in > length_out -> "bg-red-300"
+        length_in < length_out -> "bg-green-300 dark:text-slate-600"
+        length_in > length_out -> "bg-red-300 dark:text-slate-600"
         true -> ""
       end
 
@@ -47,10 +47,10 @@ defmodule MihainatorWeb.ResultComponent do
     assigns = assign(assigns, formatted_month: formatted_month, year: day.year)
 
     ~H"""
-    <div class="month">
+    <div class="text-center border-b pb-2 text-slate-700 dark:text-slate-300">
       <div>
         <%= @formatted_month %>
-        <span class="year"><%= @year %></span>
+        <span class="font-extrabold"><%= @year %></span>
       </div>
     </div>
     """
diff --git a/lib/mihainator_web/live/components/result_component.html.heex b/lib/mihainator_web/live/components/result_component.html.heex
index 92d7d49..6b9bbbd 100644
--- a/lib/mihainator_web/live/components/result_component.html.heex
+++ b/lib/mihainator_web/live/components/result_component.html.heex
@@ -1,5 +1,7 @@
-<div class="flex flex-col space-y-8">
-  <p class="text-lg">We've taken a close look at your communication and found out who's more talkative of you both</p>
+<div class="flex flex-col space-y-8 pt-4 text-slate-700 dark:text-slate-300">
+  <p class="text-lg">
+    We've taken a close look at your communication and recognized the following pattern
+  </p>
 
   <div class="grid grid-cols-6 gap-2">
     <div class="col-span-1 bg-green-300 rounded"></div>
@@ -7,25 +9,26 @@
 
     <div class="col-span-1 bg-red-300 rounded"></div>
     <div class="col-span-5">Your communication partner</div>
-  </div>
 
-  <p class="text-lg">This is the result:</p>
+    <div class="col-span-1 rounded border"></div>
+    <div class="col-span-5">No communication on this day</div>
+  </div>
 
   <div class="calendar-wrapper">
     <%= for first_of_month <- @months do %>
-      <div class="calendar">
+      <div class="p-5 m-10 inline-grid items-center justify-center shadow-xl border-blue-50 dark:border-blue-200 border rounded-xl dark:bg-slate-600 dark:shadow-slate-500">
         <.month day={first_of_month}></.month>
 
-        <div class="days">
-          <span>Mon</span>
-          <span>Tue</span>
-          <span>Wed</span>
-          <span>Thu</span>
-          <span>Fri</span>
-          <span>Sat</span>
-          <span>Sun</span>
+        <div class="days grid-cols-7 my-2 grid">
+          <span class="text-center">Mon</span>
+          <span class="text-center">Tue</span>
+          <span class="text-center">Wed</span>
+          <span class="text-center">Thu</span>
+          <span class="text-center">Fri</span>
+          <span class="text-center">Sat</span>
+          <span class="text-center">Sun</span>
         </div>
-        <div class="dates">
+        <div class="dates grid grid-cols-7">
           <%= for day <- get_days_of_month(assigns, first_of_month) do %>
             <.time_button day={day}></.time_button>
           <% end %>
diff --git a/lib/mihainator_web/live/upload_live.html.heex b/lib/mihainator_web/live/upload_live.html.heex
index 420020d..c0b8b36 100644
--- a/lib/mihainator_web/live/upload_live.html.heex
+++ b/lib/mihainator_web/live/upload_live.html.heex
@@ -1,5 +1,5 @@
 <div class="flex flex-col space-y-8">
-  <h1 class="text-5xl">Threema history checker</h1>
+  <h1 class="text-5xl text-slate-700 dark:text-slate-300">Threema history checker</h1>
 
   <%!-- <.live_component module={MihainatorWeb.UserComponent} id="user" /> --%>
   <%= if @has_result == false do %>