diff --git a/forge.config.ts b/forge.config.ts
index bbbcfc6..3c8eea0 100644
--- a/forge.config.ts
+++ b/forge.config.ts
@@ -29,8 +29,8 @@ const config: ForgeConfig = {
                 config: rendererConfig,
                 entryPoints: [
                     {
-                        html: './src/index.html',
-                        js: './src/renderer.ts',
+                        html: './src/web/index.html',
+                        js: './src/web/renderer.ts',
                         name: 'main_window',
                         preload: {
                             js: './src/preload.ts',
diff --git a/src/App.tsx b/src/App.tsx
deleted file mode 100644
index e67f72d..0000000
--- a/src/App.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createRoot } from 'react-dom/client';
-
-const root = createRoot(document.getElementById("root"));
-root.render(<h2>Hello from React!</h2>);
\ No newline at end of file
diff --git a/src/SmartMonopoly.ts b/src/SmartMonopoly.ts
new file mode 100644
index 0000000..6b8f2aa
--- /dev/null
+++ b/src/SmartMonopoly.ts
@@ -0,0 +1,8 @@
+/**
+ * Background Class for doing stuff on the host
+ */
+export default class SmartMonopoly{
+    static run() {
+
+    }
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 66a1728..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,7 +0,0 @@
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
-    Arial, sans-serif;
-  margin: auto;
-  /*max-width: 38rem;*/
-  padding: 1rem;
-}
diff --git a/src/index.ts b/src/index.ts
index 10aa6cb..e5d47ae 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,6 @@
 import { app, BrowserWindow } from 'electron';
+import SmartMonopoly from "./SmartMonopoly";
+
 // This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Webpack
 // plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
 // whether you're running in development or production).
@@ -23,6 +25,9 @@ const createWindow = (): void => {
 
   // and load the index.html of the app.
   mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
+
+  // Background
+  SmartMonopoly.run();
 };
 
 // This method will be called when Electron has finished
@@ -49,3 +54,4 @@ app.on('activate', () => {
 
 // In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and import them here.
+
diff --git a/src/web/App.tsx b/src/web/App.tsx
new file mode 100644
index 0000000..3e3fdb1
--- /dev/null
+++ b/src/web/App.tsx
@@ -0,0 +1,160 @@
+import {createRoot} from 'react-dom/client';
+import React, {Component, useState} from "react";
+import Startup from "./Startup";
+import WiFi from "./WiFi";
+import Cloud from "./Cloud";
+import Game from "./Game";
+import GameSetup from "./GameSetup";
+import GameEnd from "./GameEnd";
+import Setup from "./Setup";
+
+const root = createRoot(document.getElementById("root"));
+
+
+/*interface State {
+    count: number
+}
+
+class Counter extends React.Component<{}, State> {
+    constructor(props: {}) {
+        super(props);
+        this.state = {count: 0};
+    }
+
+    handleIncrement = () => {
+        this.setState((prevState) => ({
+            count: prevState.count + 1 // Increment count
+        }));
+    }
+
+    handleDecrement = () => {
+        this.setState((prevState) => ({
+            count: prevState.count - 1 // Decrement count
+        }))
+    }
+
+    render() {
+        return (
+            <div>
+                <h1>{this.state.count}</h1>
+                <button onClick={this.handleIncrement}>+</button>
+                <button onClick={this.handleDecrement}>-</button>
+            </div>
+        )
+            ;
+    }
+}*/
+
+
+interface HeadingSwitcherState {
+    counter: number;
+}
+
+class HeadingSwitcher extends Component<{}, HeadingSwitcherState> {
+    private interval: NodeJS.Timeout;
+
+    constructor(props: {}) {
+        super(props);
+        this.state = {counter: 0};
+    }
+
+    componentDidMount() {
+        this.interval = setInterval(() => this.tick(), 500);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.interval);
+    }
+
+    tick() {
+        if (this.state.counter > 5)
+            this.setState({counter: 1});
+        else
+            this.setState({counter: this.state.counter + 1});
+
+
+    }
+
+    render() {
+        switch (this.state.counter) {
+            case 1:
+                return <h1>H1</h1>;
+            case 2:
+                return <h2>H2</h2>;
+            case 3:
+                return <h3>H3</h3>;
+            case 4:
+                return <h4>H4</h4>;
+            case 5:
+                return <h5>H5</h5>;
+            case 6:
+                return <h6>H6</h6>;
+        }
+    }
+}
+
+
+enum PAGE {
+    STARTUP,
+    SETUP,
+    WIFI,
+    CLOUD,
+    GAME_SETUP,
+    GAME,
+    GAME_END
+}
+
+interface AppState {
+    currentPage: PAGE
+}
+
+class App extends Component<{}, AppState> {
+
+    static PAGES: Map<PAGE, Component> = new Map<PAGE, React.Component>();
+
+    constructor(props: {}) {
+        super(props);
+        this.state = {
+            currentPage: PAGE.STARTUP
+        }
+    }
+
+    render() {
+        return (
+            <div>
+                {this.state.currentPage == PAGE.STARTUP ? <Startup ref={(ref) => {
+                    App.PAGES.set(PAGE.STARTUP, ref);
+                }}/> : null}
+
+                {this.state.currentPage == PAGE.SETUP ? <Setup ref={(ref) => {
+                    App.PAGES.set(PAGE.SETUP, ref);
+                }}/> : null}
+
+                {this.state.currentPage == PAGE.WIFI ? <WiFi ref={(ref) => {
+                    App.PAGES.set(PAGE.WIFI, ref);
+                }}/> : null}
+
+                {this.state.currentPage == PAGE.CLOUD ? <Cloud ref={(ref) => {
+                    App.PAGES.set(PAGE.CLOUD, ref);
+                }}/> : null}
+
+                {this.state.currentPage == PAGE.GAME_SETUP ? <GameSetup ref={(ref) => {
+                    App.PAGES.set(PAGE.GAME_SETUP, ref);
+                }}/> : null}
+
+                {this.state.currentPage == PAGE.GAME ? <Game ref={(ref) => {
+                    App.PAGES.set(PAGE.GAME, ref);
+                }}/> : null}
+
+                {this.state.currentPage == PAGE.GAME_END ? <GameEnd ref={(ref) => {
+                    App.PAGES.set(PAGE.GAME_END, ref);
+                }}/> : null}
+            </div>
+        );
+    }
+}
+
+
+root.render(
+    <App/>
+)
\ No newline at end of file
diff --git a/src/web/Cloud.tsx b/src/web/Cloud.tsx
new file mode 100644
index 0000000..909b1be
--- /dev/null
+++ b/src/web/Cloud.tsx
@@ -0,0 +1,25 @@
+import {Component} from "react";
+
+
+interface CloudState {
+
+}
+
+export default class Cloud extends Component<{}, CloudState> {
+    constructor(props: {}) {
+        super(props);
+    }
+
+    componentDidMount() {
+
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    render() {
+        return <p>Test</p>
+    }
+
+}
\ No newline at end of file
diff --git a/src/web/Game.tsx b/src/web/Game.tsx
new file mode 100644
index 0000000..7a2303f
--- /dev/null
+++ b/src/web/Game.tsx
@@ -0,0 +1,25 @@
+import {Component} from "react";
+
+
+interface GameState {
+
+}
+
+export default class Game extends Component<{}, GameState> {
+    constructor(props: {}) {
+        super(props);
+    }
+
+    componentDidMount() {
+
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    render() {
+        return <p>Test</p>
+    }
+
+}
\ No newline at end of file
diff --git a/src/web/GameEnd.tsx b/src/web/GameEnd.tsx
new file mode 100644
index 0000000..6376ebe
--- /dev/null
+++ b/src/web/GameEnd.tsx
@@ -0,0 +1,25 @@
+import {Component} from "react";
+
+
+interface GameEndState {
+
+}
+
+export default class GameEnd extends Component<{}, GameEndState> {
+    constructor(props: {}) {
+        super(props);
+    }
+
+    componentDidMount() {
+
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    render() {
+        return <p>Test</p>
+    }
+
+}
\ No newline at end of file
diff --git a/src/web/GameSetup.tsx b/src/web/GameSetup.tsx
new file mode 100644
index 0000000..9a40f42
--- /dev/null
+++ b/src/web/GameSetup.tsx
@@ -0,0 +1,26 @@
+import {Component} from "react";
+
+
+interface GameState {
+
+}
+
+export default class GameSetup extends Component<{}, GameState> {
+    constructor(props: {}) {
+        super(props);
+    }
+
+
+    componentDidMount() {
+
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    render() {
+        return <p>Test</p>
+    }
+
+}
\ No newline at end of file
diff --git a/src/web/Setup.tsx b/src/web/Setup.tsx
new file mode 100644
index 0000000..db95ae5
--- /dev/null
+++ b/src/web/Setup.tsx
@@ -0,0 +1,25 @@
+import {Component} from "react";
+
+
+interface InitialSetupState {
+
+}
+
+export default class Setup extends Component<{}, InitialSetupState> {
+    constructor(props: {}) {
+        super(props);
+    }
+
+    componentDidMount() {
+
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    render() {
+        return <p>Test</p>
+    }
+
+}
\ No newline at end of file
diff --git a/src/web/Startup.tsx b/src/web/Startup.tsx
new file mode 100644
index 0000000..6db2392
--- /dev/null
+++ b/src/web/Startup.tsx
@@ -0,0 +1,35 @@
+import {Component} from "react";
+import GameSetup from "./GameSetup";
+
+
+interface StartupState {
+    started: boolean,
+}
+
+export default class Startup extends Component<{}, StartupState> {
+    constructor(props: {}) {
+        super(props);
+        this.state = {started: false};
+    }
+
+    componentDidMount() {
+
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    render() {
+        if(!this.state.started)
+            return <div className="startup">
+                <h1>Willkommen!</h1>
+                <p>Smart Monopoly wird gestartet...</p>
+                {!this.state.started ? <span className="loader"></span> : null}
+            </div>
+        else
+            return <h1>Willkommen!</h1>
+
+    }
+
+}
\ No newline at end of file
diff --git a/src/web/WiFi.tsx b/src/web/WiFi.tsx
new file mode 100644
index 0000000..5b80080
--- /dev/null
+++ b/src/web/WiFi.tsx
@@ -0,0 +1,25 @@
+import {Component} from "react";
+
+
+interface WiFiState {
+
+}
+
+export default class WiFi extends Component<{}, WiFiState> {
+    constructor(props: {}) {
+        super(props);
+    }
+
+    componentDidMount() {
+
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    render() {
+        return <p>Test</p>
+    }
+
+}
\ No newline at end of file
diff --git a/src/web/background.jpeg b/src/web/background.jpeg
new file mode 100644
index 0000000..6096f24
Binary files /dev/null and b/src/web/background.jpeg differ
diff --git a/src/web/components.css b/src/web/components.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/web/defaults.css b/src/web/defaults.css
new file mode 100644
index 0000000..1145540
--- /dev/null
+++ b/src/web/defaults.css
@@ -0,0 +1,23 @@
+h1 {
+    font-size: 3rem; /* 48px (2rem + 1rem) */
+}
+
+h2 {
+    font-size: 2.5rem; /* 40px (1.5rem + 1rem) */
+}
+
+h3 {
+    font-size: 2.17rem; /* 34.72px (1.17rem + 1rem) */
+}
+
+h4 {
+    font-size: 2rem; /* 32px (1rem + 1rem) */
+}
+
+h5 {
+    font-size: 1.83rem; /* 29.28px (0.83rem + 1rem) */
+}
+
+h6 {
+    font-size: 1.67rem; /* 26.72px (0.67rem + 1rem) */
+}
diff --git a/src/web/index.css b/src/web/index.css
new file mode 100644
index 0000000..d888453
--- /dev/null
+++ b/src/web/index.css
@@ -0,0 +1,39 @@
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif;
+    margin: auto;
+    /*max-width: 38rem;*/
+    padding-left: 1rem;
+    padding-top: 0.3rem;
+    /*background-color: #1F9598;*/
+    color: black;
+}
+
+
+.loader {
+    width: 65px;
+    height: 65px;
+    border: 5px solid #33D281;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1.3s linear infinite;
+    margin-left: 1%;
+    margin-top: 1%;
+}
+
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+
+    }
+}
+
+
+
+
diff --git a/src/index.html b/src/web/index.html
similarity index 74%
rename from src/index.html
rename to src/web/index.html
index c9f393e..e6cca54 100644
--- a/src/index.html
+++ b/src/web/index.html
@@ -6,6 +6,7 @@
 
   </head>
   <body>
+    <noscript>This App needs JavaScript - Please enable it in your browser!</noscript>
     <div id="root">
       <!-- This element's contents will be replaced with your component. -->
     </div>
diff --git a/src/renderer.ts b/src/web/renderer.ts
similarity index 95%
rename from src/renderer.ts
rename to src/web/renderer.ts
index cebaad8..41dbdb3 100644
--- a/src/renderer.ts
+++ b/src/web/renderer.ts
@@ -27,6 +27,8 @@
  */
 
 import './reset.css';
+import './defaults.css';
+import './components.css';
 import './index.css';
 
 //console.log('👋 This message is being logged by "renderer.js", included via webpack');
diff --git a/src/reset.css b/src/web/reset.css
similarity index 100%
rename from src/reset.css
rename to src/web/reset.css