diff --git a/app.py b/app.py
index e6b1f43..8219acc 100644
--- a/app.py
+++ b/app.py
@@ -32,7 +32,19 @@ def inject_user():
 @app.route('/')
 def index():
     # return 'Hello World'
-    return render_template('index.html', title='Home', utc_dt=datetime.datetime.now().strftime("%d.%m.%Y %H:%M:%S"))
+    """
+    if current_user.is_authenticated:
+        habits = Habit.get_all(current_user.id)
+    else:
+        habits = []
+    """
+    # habits = [("lesen", "eine Seite vor dem schlafen gehen"), ("sport", "3x Gym")]
+    return render_template(
+        'index.html',
+        title='Home',
+        utc_dt=datetime.datetime.now().strftime("%d.%m.%Y %H:%M:%S"),
+        #habits=habits
+    )
 
 
 @app.route('/test')
diff --git a/static/main.css b/static/main.css
index d31d692..b1cc7cd 100644
--- a/static/main.css
+++ b/static/main.css
@@ -21,4 +21,15 @@
     0%{background-position:0 50%}
     50%{background-position:100% 50%}
     100%{background-position:0 50%}
+}
+.day {
+    width: calc(100% / 7);
+    height: 20px;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+}
+
+.heatmap {
+    display: flex;
+    flex-wrap: wrap;
 }
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 6de835d..6bf4b2a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,109 +4,51 @@
 <h1>Hello World!</h1>
 <h3>{{ utc_dt }}</h3>
 
-<button id="test">
-    Drück nicht!
-</button>
+
+<div class="heatmap" id="heatmap"></div>
 
 <script>
-    document.getElementById('test').addEventListener('click', function () {
-        alert('Du hast mich gedrückt!');
-    });
-</script>
+    // Simulierte Aktivitätsdaten (ersetze dies durch deine echten Daten)
+    const activityData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 5, 4, 3, 2, 1, 9, 5, 36, 75, 8, 9, 1, 0, 23, 0, 0, 0, 64, 0, 0, 64, 0, 0, 19, 84];
 
-<table class="table" id="js-datatable">
-    <thead>
-    <tr>
-        <th>Prediction</th>
-        <th>Integer</th>
-        <th>Percentage</th>
-        <th>Currency</th>
-        <th>Formatted Float</th>
-    </tr>
-    </thead>
-    <tbody>
-    <tr>
-        <td>N/A</td>
-        <td>1110</td>
-        <td>200%</td>
-        <td>$1000</td>
-        <td>1,000.5</td>
-    </tr>
-    <tr>
-        <td class="heatmap-stable">Yellow</td>
-        <td>777</td>
-        <td>1199%</td>
-        <td>$101</td>
-        <td>9,900</td>
-    </tr>
-    <tr>
-        <td class="heatmap-positive">Green</td>
-        <td>1000</td>
-        <td>201%</td>
-        <td>$201</td>
-        <td>2,001.1</td>
-    </tr>
-    <tr>
-        <td class="heatmap-negative">Red</td>
-        <td>999</td>
-        <td>200%</td>
-        <td>$2890</td>
-        <td>2,000.2</td>
-    </tr>
-    </tbody>
-</table>
-
-<script>
-    function clean_formatted_data(str) {
-        return parseFloat(str.replace(/([%,$,\,])+/g, ''));
-    }
-
-    function col_to_array(tbl_col, target) {
-        // Returns column `n` (zero indexed) in table id `target` as an array
-
-        var colArray = $('#' + target + ' td:nth-child(' + tbl_col + ')').map(function () {
-            return clean_formatted_data($(this).text());
-        }).get();
-
-        return colArray;
-    }
-
-    //------ new schtuff ------------------------//
-
-    function get_pos_of_max(col_data) {
-        return $.inArray(Math.max.apply(Math, col_data), col_data)
-    }
-
-    function generate_opacities(col_data, max) {
-        var opacity_array = [];
-        var increment = max / (col_data.length);
-
-        for (i = col_data.length; i >= 1; i--) {
-            opacity_array.push(i * increment / 100);
-        }
-
-        return opacity_array;
-    }
-
-
-    function process_col_best_performing(tbl_col, target) {
-        var col_data = col_to_array(tbl_col, target);
-        var opacity_array = generate_opacities(col_data, 50);
-        var row_count = col_data.length;
-
-        for (var i = 1; i <= row_count; i++) {
-            $('#' + target + ' tr:nth-child(' + (get_pos_of_max(col_data) + 1) + ') td:nth-child(' + tbl_col + ')').css('background', 'rgba(0,0,255,' + opacity_array[0] + ')');
-            col_data[get_pos_of_max(col_data)] = null;
-            opacity_array.splice(0, 1);
+    // Funktion zum Erstellen der Heatmap
+    function createHeatmap(data) {
+        const heatmapContainer = document.getElementById('heatmap');
 
+        for (let i = 0; i < data.length; i++) {
+            const opacity = data[i] / Math.max(...data); // Berechne die Opazität basierend auf Aktivitätsanzahl
+            const dayElement = document.createElement('div');
+            dayElement.classList.add('day');
+            dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
+            heatmapContainer.appendChild(dayElement);
         }
     }
 
-    process_col_best_performing(2, 'js-datatable');
-    process_col_best_performing(3, 'js-datatable');
-    process_col_best_performing(4, 'js-datatable');
-    process_col_best_performing(5, 'js-datatable');
+    // Erstelle die Heatmap mit den simulierten Daten
+    createHeatmap(activityData);
 </script>
 
+<div class="row">
+    <div class="col-md-5">eins</div>
+    <div class="col-md-4">zwei
+        <h2>Task List</h2>
+        <ul class="task-list">
+            <li class="task-item">
+                <input type="checkbox" class="task-checkbox">
+                <span class="task-text">Task 1</span>
+            </li>
+            <li class="task-item">
+                <input type="checkbox" class="task-checkbox">
+                <span class="task-text">Task 2</span>
+            </li>
+            <li class="task-item">
+                <input type="checkbox" class="task-checkbox">
+                <span class="task-text">Task 3</span>
+            </li>
+            <!-- Add more tasks as needed -->
+        </ul>
+    </div>
+</div>
+
 
 {% endblock %}
\ No newline at end of file
diff --git a/templates/layouts/main.html b/templates/layouts/main.html
index bc1eb9c..b36d401 100644
--- a/templates/layouts/main.html
+++ b/templates/layouts/main.html
@@ -9,9 +9,8 @@
     <link rel="stylesheet" href="/static/main.css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
 </head>
-<body style="background-color: #2B2B2B">
+<body style="background-color: White">
 
-<div class="animated_background">
 <nav class="navbar navbar-expand-lg" style="background-color: #000000">
     <div class="container-fluid">
         <a class="navbar-brand" href="{{ url_for('index') }}" style="color: ivory">HabitTracker</a>
@@ -49,6 +48,5 @@
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
 </div>
-</div>
 </body>
 </html>
\ No newline at end of file