diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d231d1d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Finance Manager</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="container">
+    <header class="header">
+        <h1>Cashflow</h1>
+        <div class="header-controls">
+            <button class="btn primary" id="newGame">New Game <i class="fas fa-plus-circle"></i></button>
+        </div>
+    </header>
+
+    <section class="dashboard">
+        <div class="stats-grid">
+            <div class="stat-card">
+                <button><i class="fas fa-wallet"></i> Konto</button>
+                <div id="balance">2.090</div>
+            </div>
+            <div class="stat-card">
+                <button><i class="fas fa-chart-line"></i> Ausgaben</button>
+                <div id="expenses">3.210</div>
+            </div>
+            <div class="stat-card">
+                <button><i class="fas fa-money-bill-wave"></i> Einkommen</button>
+                <div id="income">4.900</div>
+            </div>
+            <div class="stat-card">
+                <button><i class="fas fa-calendar-day"></i> PAYDAY</button>
+                <div id="payday">1.690</div>
+            </div>
+        </div>
+    </section>
+
+    <section class="action-panel">
+        <button class="btn primary action-btn" id="buy">
+            <i class="fas fa-shopping-cart"></i>Kaufen
+        </button>
+        <button class="btn danger action-btn" id="sell">
+            <i class="fas fa-shopping-cart"></i>Verkaufen
+        </button>
+        <button class="btn success action-btn" id="marketAction">
+            <i class="fas fa-chart-bar"></i> Markt
+        </button>
+    </section>
+
+    <nav class="main-nav">
+        <button class="nav-btn" data-target="main"><i class="fas fa-home"></i> Main</button>
+        <button class="nav-btn" data-target="assets"><i class="fas fa-landmark"></i> Vermögenswerte</button>
+        <button class="nav-btn" data-target="liabilities"><i class="fas fa-balance-scale"></i> Verbindlichkeiten</button>
+    </nav>
+</div>
+<script src="index.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.js b/index.js
index 04bf26e..e69de29 100644
--- a/index.js
+++ b/index.js
@@ -1 +0,0 @@
-console.log('Happy developing ✨')
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..b38d2ce
--- /dev/null
+++ b/style.css
@@ -0,0 +1,114 @@
+:root {
+    --primary: #2962ff;
+    --success: #00c853;
+    --warning: #ffab00;
+    --danger: #d50000;
+    --dark: #1a237e;
+    --light: #f5f5f5;
+}
+
+body {
+    font-family: 'Segoe UI', system-ui, sans-serif;
+    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
+    min-height: 100vh;
+    margin: 0;
+    padding: 20px;
+}
+
+.container {
+    max-width: 1000px;
+    margin: 0 auto;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-radius: 16px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem;
+    background: var(--primary);
+    color: white;
+}
+
+.stats-grid {
+    background-color: gray;
+}
+
+.stat-card {
+    padding: 1.5rem;
+    border-radius: 12px;
+    color: black;
+    transition: transform 0.3s ease;
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+}
+
+.amount {
+    font-size: 2rem;
+    font-weight: bold;
+    margin-top: 0.5rem;
+}
+
+.action-panel {
+    display: flex;
+    gap: 1rem;
+    padding: 0 2rem 2rem;
+    justify-content: center;
+}
+
+.btn {
+    padding: 12px 24px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 600;
+}
+
+.primary { background: var(--primary); color: white; }
+.success { background: var(--success); color: white; }
+.warning { background: var(--warning); color: black; }
+.danger { background: var(--danger); color: white; }
+
+.btn:hover {
+    filter: brightness(1.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.main-nav {
+    display: flex;
+    justify-content: space-around;
+    padding: 1.5rem;
+    background: var(--light);
+    border-top: 2px solid rgba(0, 0, 0, 0.1);
+}
+
+.nav-btn {
+    background: none;
+    color: var(--dark);
+    padding: 12px;
+    border-radius: 8px;
+}
+
+.nav-btn:hover {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+.icon-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    padding: 0;
+    justify-content: center;
+}
\ No newline at end of file
