diff --git a/public/global.css b/public/global.css
index bb28a9414d456a3e71bc1ffca30e95b98f6dc2f1..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/public/global.css
+++ b/public/global.css
@@ -1,63 +0,0 @@
-html, body {
-	position: relative;
-	width: 100%;
-	height: 100%;
-}
-
-body {
-	color: #333;
-	margin: 0;
-	padding: 8px;
-	box-sizing: border-box;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-}
-
-a {
-	color: rgb(0,100,200);
-	text-decoration: none;
-}
-
-a:hover {
-	text-decoration: underline;
-}
-
-a:visited {
-	color: rgb(0,80,160);
-}
-
-label {
-	display: block;
-}
-
-input, button, select, textarea {
-	font-family: inherit;
-	font-size: inherit;
-	-webkit-padding: 0.4em 0;
-	padding: 0.4em;
-	margin: 0 0 0.5em 0;
-	box-sizing: border-box;
-	border: 1px solid #ccc;
-	border-radius: 2px;
-}
-
-input:disabled {
-	color: #ccc;
-}
-
-button {
-	color: #333;
-	background-color: #f4f4f4;
-	outline: none;
-}
-
-button:disabled {
-	color: #999;
-}
-
-button:not(:disabled):active {
-	background-color: #ddd;
-}
-
-button:focus {
-	border-color: #666;
-}
diff --git a/public/index.html b/public/index.html
index 541ccbe9db39ef56d41d3ac52d854b1ec4c0aabf..4ee9e58f865c64a90dfb47a4ba60ced2b65c15df 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,22 +8,15 @@
 	<title>WrumS Tools</title>
 
 	<link rel="icon" type="image/png" href="./favicon.png" />
+	<link rel="stylesheet" href="./bulma.min.css">
 	<link rel="stylesheet" href="./global.css" />
 	<link rel="stylesheet" href="./build/bundle.css" />
-	<link rel="stylesheet" href="./bulma.min.css">
 
 	<script src="./plotly-latest.min.js" defer></script>
 	<script defer src="./build/bundle.js"></script>
 </head>
 
 <body>
-	<div id="svelteAppContainer"></div>
-	<footer>
-		<a href="https://gitlab.fachschaften.org/jfowl/wrums-tools">Source Code</a> - Made with <a
-			href="https://svelte.dev">Svelte</a>, <a href="https://bulma.io">Bulma</a> and
-		<a href="https://plotly.com/javascript/">Plotly</a> -
-		<a href="https://oh14.de/datenschutzerklaerung.html">Datenschutzerklärung</a>
-	</footer>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
index cb25d1a78b5f091034016d18d03e7bde1a510d8b..f143c08fa37fcb5b8ee04426e3ffd17b3cbc458d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -7,6 +7,7 @@
   import EmpiricalDistribution from "./components/graphs/EmpiricalDistribution.svelte";
   import Histogram from "./components/graphs/Histogram.svelte";
   import ScatterPlot from "./components/graphs/ScatterPlot.svelte";
+import { distinctify } from "./lib/descriptiveStatistics";
 
   let valueInputStr: string =
     "8.0, 4.9, 6.6, 3.2, 3.9, 4.5, 6.1, 3.7, 4.2, 8.5, 3.6, 3.7";
@@ -17,122 +18,169 @@
     .map((v) => parseFloat(v))
     .filter((v) => !isNaN(v));
   $: sortedValues = valueSet.sort((a, b) => a - b);
+  $: distinctValues = distinctify(sortedValues);
 
   let activeTabIndex: number = 0;
 </script>
 
-<main>
-  <section>
-    <div class="container">
-      <div class="columns" />
-      <div class="card">
-        <div class="card-content">
-          x =
-          <input type="text" style="width: 100%;" bind:value={valueInputStr} />
+<section class="hero is-primary">
+  <div class="hero-body">
+    <p class="title">WrumS-Tools</p>
+    <p class="subtitle">
+      Statistischer Werkzeugkasten für die statistischen Grundlagen im
+      Informatikstudium
+    </p>
+  </div>
+</section>
+<br />
+<section class="section">
+  <div class="container">
+    <h2 class="title">Univariate Daten</h2>
+    <form class="box">
+      <div class="field">
+        <label class="label" for="x-values-input">x-Werte (N={valueSet.length})</label>
+        <div class="control">
+          <input
+          id="x-values-input"
+            class="input"
+            type="text"
+            bind:value={valueInputStr}
+            placeholder="1.6, 12.3, 15.3, 33.4"
+          />
         </div>
       </div>
-      <div class="card">
-        <div class="card-content">
-          <div class="tabs is-boxed is-centered">
-            <ul>
-              <li
-                class:is-active={activeTabIndex === 0}
-                on:click={() => {
-                  activeTabIndex = 0;
-                }}
+      <div class="field">
+        <label class="label" for="x-values-sorted">Sortierte x-Werte</label>
+        <div class="control">
+          <input disabled
+          id="x-values-sorted"
+            class="input"
+            type="text"
+            value={sortedValues.join("  ,  ")}
+          />
+        </div>
+      </div>
+      <div class="field">
+        <label class="label" for="x-values-distinct">Sortierter Wertebereich (J={distinctValues.length})</label>
+        <div class="control">
+          <input disabled
+          id="x-values-distinct"
+            class="input"
+            type="text"
+            value={distinctValues.join("  ,  ")}
+          />
+        </div>
+      </div>
+      <div class="tabs is-boxed is-centered">
+        <ul>
+          <li
+            class:is-active={activeTabIndex === 0}
+            on:click={() => {
+              activeTabIndex = 0;
+            }}
+          >
+            <!-- svelte-ignore a11y-missing-attribute -->
+            <a>
+              <span
+                ><math xmlns="http://www.w3.org/1998/Math/MathML"
+                  ><semantics><msub><mi>med</mi><mi>x</mi></msub></semantics
+                  ></math
+                ></span
               >
-                <!-- svelte-ignore a11y-missing-attribute -->
-                <a>
-                  <span
-                    ><math xmlns="http://www.w3.org/1998/Math/MathML"
-                      ><semantics><msub><mi>med</mi><mi>x</mi></msub></semantics
-                      ></math
-                    ></span
-                  >
-                </a>
-              </li>
-              <li
-                class:is-active={activeTabIndex === 1}
-                on:click={() => {
-                  activeTabIndex = 1;
-                }}
+            </a>
+          </li>
+          <li
+            class:is-active={activeTabIndex === 1}
+            on:click={() => {
+              activeTabIndex = 1;
+            }}
+          >
+            <!-- svelte-ignore a11y-missing-attribute -->
+            <a>
+              <span
+                ><math xmlns="http://www.w3.org/1998/Math/MathML"
+                  ><semantics><msub><mi>mod</mi><mi>x</mi></msub></semantics
+                  ></math
+                ></span
               >
-                <!-- svelte-ignore a11y-missing-attribute -->
-                <a>
-                  <span
-                    ><math xmlns="http://www.w3.org/1998/Math/MathML"
-                      ><semantics><msub><mi>mod</mi><mi>x</mi></msub></semantics
-                      ></math
-                    ></span
-                  >
-                </a>
-              </li>
-              <li
-                class:is-active={activeTabIndex === 2}
-                on:click={() => {
-                  activeTabIndex = 2;
-                }}
+            </a>
+          </li>
+          <li
+            class:is-active={activeTabIndex === 2}
+            on:click={() => {
+              activeTabIndex = 2;
+            }}
+          >
+            <!-- svelte-ignore a11y-missing-attribute -->
+            <a>
+              <span
+                ><math
+                  display="inline"
+                  xmlns="http://www.w3.org/1998/Math/MathML"
+                  ><semantics><msub><mi>f</mi><mi>j</mi></msub></semantics
+                  ></math
+                ></span
               >
-                <!-- svelte-ignore a11y-missing-attribute -->
-                <a>
-                  <span
-                    ><math
-                      display="inline"
-                      xmlns="http://www.w3.org/1998/Math/MathML"
-                      ><semantics><msub><mi>f</mi><mi>j</mi></msub></semantics
-                      ></math
-                    ></span
-                  >
-                </a>
-              </li>
-              <li
-                class:is-active={activeTabIndex === 3}
-                on:click={() => {
-                  activeTabIndex = 3;
-                }}
+            </a>
+          </li>
+          <li
+            class:is-active={activeTabIndex === 3}
+            on:click={() => {
+              activeTabIndex = 3;
+            }}
+          >
+            <!-- svelte-ignore a11y-missing-attribute -->
+            <a>
+              <span
+                ><math xmlns="http://www.w3.org/1998/Math/MathML"
+                  ><semantics><mover><mi>x</mi><mo>¯</mo></mover></semantics
+                  ></math
+                ></span
               >
-                <!-- svelte-ignore a11y-missing-attribute -->
-                <a>
-                  <span
-                    ><math xmlns="http://www.w3.org/1998/Math/MathML"
-                      ><semantics><mover><mi>x</mi><mo>¯</mo></mover></semantics
-                      ></math
-                    ></span
-                  >
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div class="content">
-            {#if activeTabIndex === 0}
-              <Median values={sortedValues} />
-            {:else if activeTabIndex === 1}
-              <Mode values={sortedValues} />
-            {:else if activeTabIndex === 2}
-              <RelativeFrequencies values={sortedValues} />
-            {:else if activeTabIndex === 3}
-              <Mean values={sortedValues} />
-            {/if}
-          </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div class="content">
+        {#if activeTabIndex === 0}
+          <Median values={sortedValues} />
+        {:else if activeTabIndex === 1}
+          <Mode values={sortedValues} />
+        {:else if activeTabIndex === 2}
+          <RelativeFrequencies values={sortedValues} />
+        {:else if activeTabIndex === 3}
+          <Mean values={sortedValues} />
+        {/if}
+      </div>
+    </form>
+    <div class="columns is-desktop">
+      <div class="column">
+        <div class="box">
+          <BoxPlot valueSets={[sortedValues]} />
+        </div>
+      </div>
+      <div class="column">
+        <div class="box">
+          <EmpiricalDistribution values={sortedValues} />
         </div>
       </div>
     </div>
+  </div>
+</section>
 
-    <br />
-    <div class="plots">
-      <BoxPlot valueSets={[sortedValues]} />
-      <EmpiricalDistribution values={sortedValues} />
-    </div>
-  </section>
-
-  <section class="section" />
-</main>
-
-<style>
-  .plots {
-    display: flex;
-    justify-content: space-evenly;
-    align-items: stretch;
-    flex-wrap: wrap;
-  }
-</style>
+<footer class="footer is-small is-primary">
+  <div class="content has-text-centered">
+    <p>
+      Made with <a href="https://svelte.dev">Svelte</a>,
+      <a href="https://bulma.io">Bulma</a>
+      and
+      <a href="https://plotly.com/javascript/">Plotly</a> -
+      <a href="https://oh14.de/datenschutzerklaerung.html"
+        >Datenschutzerklärung</a
+      >
+      -
+      <a href="https://gitlab.fachschaften.org/jfowl/wrums-tools">Source Code</a
+      >
+    </p>
+  </div>
+</footer>
diff --git a/src/main.ts b/src/main.ts
index abc261ea1f58a1c9f01855554c627faf68a17811..1e237ee976fae5b5d102513085932352151a99f9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,6 @@
 import App from "./App.svelte";
 const app = new App({
-  target: document.getElementById("svelteAppContainer"),
+  target: document.body,
   props: {},
 });