diff --git a/index.html b/index.html
index 1be7eaf..887091c 100644
--- a/index.html
+++ b/index.html
@@ -4,53 +4,159 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">
+    <link rel="stylesheet" href="index.css">
     <title>thebread.dev</title>
-    <style>
-        html {
-            background-image: url('https://cdn.thebread.dev/photos/.IMG_2206.JPG.webp');
-            font-family: "Fira sans", sans-serif;
-            background-size: cover; 
-            background-position: center;
-            background-repeat: no-repeat;
-            color: white;
-            height: 100%;
-        }
-        body {
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: unset;
-            flex-direction: column;
-            text-align: center;
-        }
-        a {
-            color: unset;
-        }
-        .glass-text {
-            font-size: 5rem;
-            font-weight: bold;
-            position: relative;
-            color: rgba(255, 255, 255, 0.8);; 
-        }
-        .glass-text::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            -webkit-background-clip: text;
-            background-clip: text;
-            z-index: -1;
-        }
-    </style>
 </head>
 <body>
+  <!--
     <div id="content" class="glass-text">
         <h2>soon™</h1>
         <h4>have a look at my <a href="cdn.thebread.dev">cdn</a></h4>
         <h4>or visit my friends <a href="https://emma.pizza">Emma</a> and <a href="https://henhaa.art">Henrik</a></h4>
     </div>
+  -->
+  <div class="scroll-container">
+    <div class="page" first="true">
+      <div class="page-bar" bottom="true">
+        <img src="https://cdn.thebread.dev/logos/bread_borderless.svg" alt="thebreadcompany logo" style="height: 50%; aspect-ratio: 1; margin-left: 2em">
+        <h3 style="margin-left: 2em">thebread.dev</h3>
+        <div style="margin-left: auto; margin-right: 2em">
+          <label id="theme-switch" for="checkbox_theme">
+            <span></span>
+            <input type="checkbox" id="checkbox_theme">
+          </label>
+        </div>
+      </div>
+      <div style="display: flex; justify-content: center; align-items: center">
+        <img src="https://cdn.thebread.dev/logos/bread_borderless.svg" alt="thebreadcompany logo" style="width: 10vw; aspect-ratio: 1; margin-right: 5em">
+        <div>
+          <h2>Hi, I'm bread</h2>
+          <p>I'm a computer science student from Germany. I'm interested in</p>
+          <ul>
+            <li>Photography</li>
+            <li>Software Development</li>
+            <li>Microelectronics and repairs</li>
+          </ul>
+          <p>The languages I currently know (from best to worst):</p>
+          <ul class="h-list">
+            <li>
+              <span id="ts">&bull;</span>
+              <span>TypeScript</span>
+            </li>
+            <li>
+              <span id="rs">&bull;</span>
+              <span>Rust</span>
+            </li>
+            <li>
+              <span id="html">&bull;</span>
+              <span>HTML+CSS</span>
+            </li>
+            <li>
+              <span id="swft">&bull;</span>
+              <span>Swift</span>
+            </li>
+            <li>
+              <span id="bash">&bull;</span>
+              <span>Bash</span>
+            </li>
+            <li>
+              <span id="c">&bull;</span>
+              <span>C</span>
+            </li>
+            <li>
+              <span id="nix">&bull;</span>
+              <span>Nix</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="scroll-hint">
+        <span>⏷</span>
+        <span>scroll</span>
+        <span>⏷</span>
+      </div>
+    </div>
+    <div class="page">
+      <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
+        <h2>Gallery</h2>
+        <p>Most of my images are on my <a href="https://cdn.thebread.dev">cdn</a>, but I will try to showcase my images here as well.</p>
+      </div>
+    </div>
+    <div class="page">
+      <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
+        <h2>Live Services</h2>
+        <div class="display: flex; flex-direction: row;">
+          <div class="product">
+            <div style="display: flex; align-items: center">
+              <h3>fxpixiv</h3>
+              <div style="width: 50px; height: 50px; background-color: lightgray; margin-left: auto; border-radius: 4px"></div>
+            </div>
+            <p>Pixiv embed helper</p>
+          </div>
+          <div class="product" placeholder="true">
+            <div style="display: flex; align-items: center">
+              <div style="width: 70px; height: 16px; background-color: lightgray; border-radius: 4px; margin: 18.72px 0"></div>
+              <div style="width: 50px; height: 50px; background-color: lightgray; margin-left: auto; border-radius: 4px"></div>
+            </div>
+              <div style="width: 120px; height: 16px; background-color: lightgray; margin-right: auto; margin-top: 16px; margin-bottom: 16px; border-radius: 4px"></div>
+          </div>
+          <div class="product" placeholder="true">
+            <div style="display: flex; align-items: center">
+              <div style="width: 70px; height: 16px; background-color: lightgray; border-radius: 4px; margin: 18.72px 0"></div>
+              <div style="width: 50px; height: 50px; background-color: lightgray; margin-left: auto; border-radius: 4px"></div>
+            </div>
+              <div style="width: 120px; height: 16px; background-color: lightgray; margin-right: auto; margin-top: 16px; margin-bottom: 16px; border-radius: 4px"></div>
+          </div>
+          <div class="product" placeholder="true">
+            <div style="display: flex; align-items: center">
+              <div style="width: 70px; height: 16px; background-color: lightgray; border-radius: 4px; margin: 18.72px 0"></div>
+              <div style="width: 50px; height: 50px; background-color: lightgray; margin-left: auto; border-radius: 4px"></div>
+            </div>
+              <div style="width: 120px; height: 16px; background-color: lightgray; margin-right: auto; margin-top: 16px; margin-bottom: 16px; border-radius: 4px"></div>
+          </div>
+        </div>
+        <p>These are the services currently available for use.</p>
+      </div>
+    </div>
+    <div class="page">
+      libs and planned stuff
+    </div>
+    <div class="page" first="true">
+      <div></div>
+      others, references, social media
+      <div class="page-bar" top="true">
+      </div>
+    </div>
+  </div>
+  <script>
+    // shortened version of https://stackoverflow.com/a/56550819
+    const themeSwitch = document.querySelector('#theme-switch input[type="checkbox"]');
+    const themeLabel = document.querySelector('#theme-switch span');
+    
+    // setup
+    if(window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      document.documentElement.setAttribute("data-theme", "dark");
+      themeLabel.innerText = "🌒"
+    } else 
+        themeLabel.innerText = "☀️"
+    
+
+    function switchTheme(e) {
+      if(e.target.checked) {
+        document.documentElement.setAttribute("data-theme", "dark");
+        themeSwitch.checked = true;
+        themeLabel.innerText = "🌒"
+      } else {
+        document.documentElement.setAttribute("data-theme", "light");
+        themeSwitch.checked = false;
+        themeLabel.innerText = "☀️"
+      }
+    }
+
+    themeSwitch.addEventListener('change', switchTheme, false);
+    if (document.documentElement.getAttribute("data-theme") == "dark"){
+        themeSwitch.checked = true;
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
