diff --git a/src/main.ts b/src/main.ts
index c71ae4c..ce46e1c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,8 +8,8 @@ function createWindow() {
 
   // Create the browser window.
   mainWindow = new BrowserWindow({
-    height: 600,
-    width: 800,
+    height: 900,
+    width: 1600,
     webPreferences: {
       nodeIntegration: false,
     },
diff --git a/src/renderer.ts b/src/renderer.ts
index 2b9c9a9..e448f26 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -2,7 +2,7 @@
 // be executed in the renderer process for that window.
 // All of the Node.js APIs are available in this process.
 
-import App from './renderer/view/App.svelte';
+import App from './renderer/App.svelte';
 
 (() =>
   new App({
diff --git a/src/renderer/App.svelte b/src/renderer/App.svelte
new file mode 100644
index 0000000..4ea24c1
--- /dev/null
+++ b/src/renderer/App.svelte
@@ -0,0 +1,36 @@
+<script>
+  import Button from 'atoms/Button.svelte';
+
+  let text = 'tach';
+</script>
+
+<style>
+  :root {
+    --color-white: #fff;
+    --color-black: #000;
+
+    --color-background: #242424;
+    --color-foreground: #3a3a3a;
+    --color-accent: #454585;
+    --color-accent-light: #6969ac;
+
+    --color-text: var(--color-white);
+  }
+
+  :global(*) {
+    box-sizing: border-box;
+  }
+
+  :global(body) {
+    padding: 0;
+    margin: 0;
+    color: var(--color-text);
+    background-color: var(--color-background);
+  }
+</style>
+
+<main>
+  <h1>Hello World</h1>
+  <p>{ text }</p>
+  <Button>inhalt</Button>
+</main>
diff --git a/src/renderer/components/1-atoms/Button.svelte b/src/renderer/components/1-atoms/Button.svelte
new file mode 100644
index 0000000..9a59710
--- /dev/null
+++ b/src/renderer/components/1-atoms/Button.svelte
@@ -0,0 +1,15 @@
+<button class="button">
+  <slot></slot>
+</button>
+
+<style>
+  .button {
+    border: none;
+    color: var(--color-text);
+    background: var(--color-accent);
+  }
+
+  .button:focus {
+    outline-color: var(--color-accent-light);
+  }
+</style>
diff --git a/src/renderer/view/App.svelte b/src/renderer/view/App.svelte
deleted file mode 100644
index 30fc3db..0000000
--- a/src/renderer/view/App.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<main>
-  <h1>Hello World</h1>
-  <p>{ text }</p>
-</main>
-
-<script>
-  let text = 'tach';
-</script>
-
-<style>
-  h1 {
-    text-transform: uppercase;
-  }
-</style>
diff --git a/webpack.main.config.js b/webpack.main.config.js
index 57cd987..b1b6b4b 100644
--- a/webpack.main.config.js
+++ b/webpack.main.config.js
@@ -8,7 +8,5 @@ module.exports = {
   module: {
     rules: require('./webpack.rules'),
   },
-  resolve: {
-    extensions: ['.js', '.ts', '.html'],
-  },
+  resolve: require('./webpack.resolve'),
 };
diff --git a/webpack.renderer.config.js b/webpack.renderer.config.js
index 4d2235c..4b965c6 100644
--- a/webpack.renderer.config.js
+++ b/webpack.renderer.config.js
@@ -3,4 +3,5 @@ module.exports = {
   module: {
     rules: require('./webpack.rules'),
   },
+  resolve: require('./webpack.resolve'),
 };
diff --git a/webpack.resolve.js b/webpack.resolve.js
new file mode 100644
index 0000000..fdfadff
--- /dev/null
+++ b/webpack.resolve.js
@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = {
+  extensions: ['.js', '.ts', '.svelte'],
+  alias: {
+    atoms: path.resolve(__dirname, 'src/renderer/components/1-atoms'),
+    molecules: path.resolve(__dirname, 'src/renderer/components/2-molecules'),
+  },
+};