diff --git a/app/static/css/style.css b/app/static/css/style.css
new file mode 100644
index 0000000..19f96a7
--- /dev/null
+++ b/app/static/css/style.css
@@ -0,0 +1,216 @@
+/* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+/* Body and Global Styles */
+body {
+    font-family: 'Roboto', sans-serif;
+    margin: 0;
+    padding: 0;
+    background: #F8F9FA;
+    display: flex;
+    height: 100vh;
+    overflow: hidden;
+}
+
+/* Sidebar Styles */
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    background: #FFFFFF;
+    width: 60px; /* Collapsed width */
+    height: 100%;
+    transition: width 0.3s ease; /* Smooth transition for expanding */
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    z-index: 20;
+}
+
+.sidebar:hover, .sidebar.sidebar-expanded {
+    width: 280px;
+}
+
+.menu-item {
+    display: flex;
+    align-items: center;
+    padding: 15px 20px;
+    color: #343A40;
+    font-size: 16px;
+    transition: background-color 0.3s, padding-left 0.3s;
+    cursor: pointer;
+    overflow: hidden; /* Hide overflow when sidebar is collapsed */
+}
+
+.menu-item:hover {
+    background-color: #007BFF;
+    color: #FFFFFF;
+}
+
+.menu-icon {
+    margin-right: 10px;
+    transition: transform 0.3s ease; /* Smooth icon transition */
+}
+
+.sidebar:hover .menu-icon, .sidebar.sidebar-expanded .menu-icon {
+    transform: rotate(360deg); /* Rotate icon on hover */
+}
+
+.menu-label {
+    white-space: nowrap;
+    overflow: hidden;
+    transition: opacity 0.3s ease, width 0.3s ease;
+    display: none; /* Hide labels initially */
+}
+
+.sidebar:hover .menu-label, .sidebar.sidebar-expanded .menu-label {
+    display: inline; /* Show labels when sidebar is expanded */
+}
+
+/* Adjust sidebar for touch devices (no hover) */
+@media (hover: none) {
+    .sidebar:hover .menu-label {
+        display: none;
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .sidebar {
+        position: fixed;
+        width: 60px;
+    }
+
+    .sidebar-expanded {
+        width: 200px;
+    }
+
+    .container {
+        margin-left: 60px;
+        width: calc(100% - 60px);
+    }
+
+    .sidebar-expanded + .container {
+        margin-left: 200px;
+        width: calc(100% - 200px);
+    }
+}
+
+/* Main Content Styles */
+.container {
+    margin-left: 60px;
+    transition: margin-left 0.3s ease;
+    padding: 20px;
+    width: calc(100% - 60px);
+    overflow-y: auto;
+}
+
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 20px;
+}
+
+.card {
+    background-color: white;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    overflow: hidden;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+.card-container {
+    padding: 20px;
+}
+
+/* Form and Button Styles */
+input, .button {
+    padding: 12px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    width: calc(100% - 24px);
+}
+
+.button {
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.button:hover {
+    background-color: #003875;
+}
+
+/* Login Overlay Styles */
+.login-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+}
+
+.login-window {
+    background-color: #fff;
+    padding: 40px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Tabbed Interface Styles */
+.tab-group {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    border-bottom: 2px solid #ccc;
+}
+
+.tab-group li {
+    flex: 1;
+    text-align: center;
+    margin-bottom: -1px;
+}
+
+.tab-group li a {
+    display: block;
+    padding: 15px;
+    background: #eee;
+    color: #333;
+    text-decoration: none;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.tab-group li a:hover {
+    background-color: #ddd;
+}
+
+.tab-group .active a {
+    background: #fff;
+    border-bottom: 2px solid white;
+}
+
+/* Tab Content */
+.tab-content {
+    background: #fff;
+    padding: 20px;
+}
+
+.tab-pane {
+    display: none;
+}
+
+.tab-pane.active {
+    display: block;
+}
diff --git a/app/static/js/script.js b/app/static/js/script.js
new file mode 100644
index 0000000..c8ff0f2
--- /dev/null
+++ b/app/static/js/script.js
@@ -0,0 +1,42 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Tab switching functionality
+    const tabs = document.querySelectorAll('.tab a');
+    tabs.forEach(tab => {
+        tab.addEventListener('click', e => {
+            e.preventDefault();
+            document.querySelectorAll('.tab, .tab-pane').forEach(elem => elem.classList.remove('active'));
+            tab.parentElement.classList.add('active');
+            document.querySelector(tab.getAttribute('href')).classList.add('active');
+        });
+    });
+
+    // Password validation in the registration form
+    const passwordInput = document.getElementById('new-password');
+    const confirmPasswordInput = document.getElementById('confirm-password');
+    const handlePasswordValidation = () => {
+        const isValid = passwordInput.value === confirmPasswordInput.value;
+        [passwordInput, confirmPasswordInput].forEach(input => input.classList.toggle('invalid', !isValid));
+        return isValid;
+    };
+    [passwordInput, confirmPasswordInput].forEach(input => input.addEventListener('input', handlePasswordValidation));
+    const registrationForm = document.getElementById('registration-form');
+    registrationForm.addEventListener('submit', event => {
+        if (!handlePasswordValidation()) {
+            event.preventDefault();
+            alert("Passwords do not match.");
+        }
+    });
+
+    // Simple login validation
+    const loginForm = document.getElementById('login-form');
+    loginForm.addEventListener('submit', event => {
+        event.preventDefault();
+        const username = document.getElementById('username').value;
+        const password = document.getElementById('password').value;
+        if (username === 'test' && password === 'test') {
+            document.getElementById('login-overlay').style.display = 'none';
+        } else {
+            alert("Invalid username or password");
+        }
+    });
+});
diff --git a/app/templates/index.html b/app/templates/index.html
new file mode 100644
index 0000000..95fe91a
--- /dev/null
+++ b/app/templates/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <title>Enhanced Web App with Sidebar</title>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="/static/css/style.css" rel="stylesheet" type="text/css">
+    <script src="https://unpkg.com/htmx.org"></script>
+</head>
+<body>
+<div class="login-overlay" id="login-overlay">
+    <div class="login-window">
+        <!-- Tab Headers -->
+        <ul class="tab-group">
+            <li class="tab active"><a href="#login-tab">Login</a></li>
+            <li class="tab"><a href="#signup-tab">Sign Up</a></li>
+        </ul>
+
+        <!-- Tab Contents -->
+        <div class="tab-content">
+            <!-- Login Tab Pane -->
+            <div class="tab-pane active" id="login-tab">
+                <h2>Login</h2>
+                <form action="#" id="login-form" method="post">
+                    <div class="form-group">
+                        <label for="username">Username:</label>
+                        <input id="username" name="username" type="text">
+                    </div>
+                    <div class="form-group">
+                        <label for="password">Password:</label>
+                        <input id="password" name="password" type="password">
+                    </div>
+                    <button class="button" type="submit">Login</button>
+                </form>
+            </div>
+
+            <!-- Signup Tab Pane -->
+            <div class="tab-pane" id="signup-tab">
+                <h2>Sign Up</h2>
+                <form action="#" id="registration-form" method="post">
+                    <div class="form-group">
+                        <label for="new-username">Username:</label>
+                        <input id="new-username" name="new-username" type="text">
+                    </div>
+                    <div class="form-group">
+                        <label for="new-password">Password:</label>
+                        <input id="new-password" name="new-password" type="password">
+                    </div>
+                    <div class="form-group">
+                        <label for="confirm-password">Confirm Password:</label>
+                        <input id="confirm-password" name="confirm-password" type="password">
+                    </div>
+                    <div class="form-group">
+                        <label for="email">Email:</label>
+                        <input id="email" name="email" type="email">
+                    </div>
+                    <button class="button" type="submit">Register</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+<nav class="sidebar">
+    <div class="menu-item">
+        <span class="material-icons menu-icon">dashboard</span>
+        <span class="menu-label">Übersicht</span>
+    </div>
+    <div class="menu-item" hx-get="/buchhaltung" hx-trigger="click" hx-target="#main-content">
+        <span class="material-icons menu-icon">account_balance_wallet</span>
+        <span class="menu-label">Buchhaltung</span>
+    </div>
+    <div class="menu-item" hx-get="/flottenmanagement" hx-trigger="click" hx-target="#main-content">
+        <span class="material-icons menu-icon">directions_car</span>
+        <span class="menu-label">Flottenmanagement</span>
+    </div>
+    <div class="menu-item">
+        <span class="material-icons menu-icon">people</span>
+        <span class="menu-label">Mitarbeiter</span>
+    </div>
+    <div class="menu-item">
+        <span class="material-icons menu-icon">settings</span>
+        <span class="menu-label">Einstellungen</span>
+    </div>
+</nav>
+<div class="container">
+    <section id="main-content">
+        <!-- Initial content or instruction for the user -->
+        <h1>Tocknerheld-Dashboard</h1>
+        <p>Select a menu item to view content.</p>
+    </section>
+</div>
+<script src="/static/js/script.js"></script>
+</body>
+</html>
diff --git a/app/templates/partials/buchhaltung.html b/app/templates/partials/buchhaltung.html
new file mode 100644
index 0000000..dbb8342
--- /dev/null
+++ b/app/templates/partials/buchhaltung.html
@@ -0,0 +1,14 @@
+<div class="card-grid">
+    <div class="card">
+        <div class="card-container">
+            <h3 class="card-title">Card Title 1</h3>
+            <p class="card-text">This is a description for card 1.</p>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-container">
+            <h3 class="card-title">Card Title 2</h3>
+            <p class="card-text">This is a description for card 2.</p>
+        </div>
+    </div>
+</div>
diff --git a/app/templates/partials/flottenmanagement.html b/app/templates/partials/flottenmanagement.html
new file mode 100644
index 0000000..9894e18
--- /dev/null
+++ b/app/templates/partials/flottenmanagement.html
@@ -0,0 +1,14 @@
+<div class="card-grid">
+    <div class="card">
+        <div class="card-container">
+            <h3 class="card-title">Card Title 3</h3>
+            <p class="card-text">This is a description for card 3.</p>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-container">
+            <h3 class="card-title">Card Title 4</h3>
+            <p class="card-text">This is a description for card 4.</p>
+        </div>
+    </div>
+</div>