diff --git a/.idea/DdevIntegration.xml b/.idea/DdevIntegration.xml
new file mode 100644
index 0000000..1b302d9
--- /dev/null
+++ b/.idea/DdevIntegration.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="de.php_perfect.intellij.ddev.settings.DdevSettingsState">
+    <option name="ddevBinary" value="C:\Program Files\DDEV\ddev.exe" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/durst-rechner.iml b/.idea/durst-rechner.iml
index e69de29..4154697 100644
--- a/.idea/durst-rechner.iml
+++ b/.idea/durst-rechner.iml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/index.html b/index.html
index 7b4a74d..686df82 100644
--- a/index.html
+++ b/index.html
@@ -1,86 +1,40 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#2196f3" />
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="theme-color" content="#2196f3"/>
     <link rel="manifest" href="manifest.json">
-    <title>Produkt-Rechner</title>
-    <style>
-        body { font-family: sans-serif; margin: 2rem; }
-        .product { margin: 0.5rem 0; }
-        .product button { padding: 0.5rem 1rem; font-size: 1rem; }
-        #result { margin-top: 2rem; font-size: 1.5rem; }
-        .actions button { margin-right: 1rem; }
-    </style>
+    <link rel="stylesheet" href="stylesheet.css">
+    <title>Der Durstrechner</title>
 </head>
 <body>
-<h1>Produkt-Rechner</h1>
-<div id="products"></div>
-<div id="result">Zwischensumme: €<span id="sum">0.00</span></div>
-<div class="actions">
-    <button onclick="undo()">Rückgängig</button>
-    <button onclick="resetCalc()">Reset</button>
-</div>
+    <header>
+        <h1><span class="emoji"></span> Der Durstrechner</h1>
+        <button>Einstellungen</button>
+    </header>
+    <div class="slot">
+        <aside class="calculator">
+            <div>
 
-<script>
-    const defaultProducts = [
-        { name: "Käse", value: 2.5 },
-        { name: "Apfel", value: 1.0 },
-        { name: "Milch", value: 1.8 }
-    ];
+            </div>
+        </aside>
+        <main class="controls">
+            <div>
 
-    const savedProducts = JSON.parse(localStorage.getItem("products")) || defaultProducts;
-    const productContainer = document.getElementById("products");
-    const sumDisplay = document.getElementById("sum");
+            </div>
+        </main>
+    </div>
 
-    let history = [];
-
-    let total = 0;
-
-    function renderProducts() {
-        productContainer.innerHTML = "";
-        savedProducts.forEach((product, index) => {
-            const div = document.createElement("div");
-            div.className = "product";
-            div.innerHTML = `<button onclick="add(${product.value})">${product.name} (€${product.value.toFixed(2)})</button>`;
-            productContainer.appendChild(div);
-        });
-    }
-
-    function add(value) {
-        total += value;
-        history.push(value);
-        updateSum();
-    }
-
-    function undo() {
-        if (history.length > 0) {
-            total -= history.pop();
-            updateSum();
+    <script>
+        // Install the service worker for offline capabilities
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('service-worker.js')
+                    .then(reg => console.log('Service Worker registered', reg))
+                    .catch(err => console.error('SW registration failed', err));
+            });
         }
-    }
-
-    function resetCalc() {
-        total = 0;
-        history = [];
-        updateSum();
-    }
-
-    function updateSum() {
-        sumDisplay.textContent = total.toFixed(2);
-    }
-
-    renderProducts();
-</script>
-<script>
-    if ('serviceWorker' in navigator) {
-        window.addEventListener('load', () => {
-            navigator.serviceWorker.register('service-worker.js')
-                .then(reg => console.log('Service Worker registered', reg))
-                .catch(err => console.error('SW registration failed', err));
-        });
-    }
-</script>
+    </script>
 </body>
 </html>
diff --git a/service-worker.js b/service-worker.js
index d0ed6ea..ce63672 100644
--- a/service-worker.js
+++ b/service-worker.js
@@ -4,6 +4,7 @@ const FILES_TO_CACHE = [
     '/index.html',
     '/manifest.json',
     '/service-worker.js',
+    '/stylesheet.css',
 ];
 
 self.addEventListener('install', event => {
diff --git a/stylesheet.css b/stylesheet.css
new file mode 100644
index 0000000..6be0833
--- /dev/null
+++ b/stylesheet.css
@@ -0,0 +1,65 @@
+:root {
+    --header-background-color: #171717;
+    --header-text-color: white;
+    --header-button-background-color: #676767;
+    --header-button-color: #eaeaea;
+    --aside-background-color: #dfdfdf;
+    --aside-text-color: #000;
+    --box-padding: 1em;
+}
+html, body {
+    height: 100%;
+}
+body {
+    display: flex;
+    flex-direction: column;
+    font-family: sans-serif;
+    margin: 0;
+    padding: 0;
+}
+header {
+    display: flex;
+    background-color: var(--header-background-color);
+    color: var(--header-text-color);
+    padding: .5em;
+}
+header h1 {
+    margin: 0;
+    padding: 0;
+    transform: translateY(-.1em);
+    user-select: none;
+    font-size: 1.1em;
+}
+header button {
+    margin-left: auto;
+    background-color: var(--header-button-background-color);
+    color: var(--header-button-color);
+}
+header h1 > span.emoji {
+    padding-right: .4em;
+}
+header h1 > span.emoji:before {
+    content: "🍺";
+}
+.slot {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+}
+aside.calculator {
+    display: flex;
+    flex: 1 0 0;
+    background-color: var(--aside-background-color);
+    height: 100%;
+    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+}
+main.controls {
+    display: flex;
+    flex: 4 0 0;
+}
+aside.calculator > div,
+main.controls > div {
+    padding: var(--box-padding);
+    box-sizing: border-box;
+}
\ No newline at end of file
