diff --git a/app.py b/app.py
index 5419869..3f68c80 100644
--- a/app.py
+++ b/app.py
@@ -136,6 +136,7 @@ def index():
         title=name,
         utc_dt=datetime.datetime.now().strftime("%d.%m.%Y %H:%M %A"),
         habit_lists=habit_lists,
+        heatmap_values=current_user.get_heatmap(),
         errors={},
     )
 
diff --git a/models/User.py b/models/User.py
index 13f9f72..317843b 100644
--- a/models/User.py
+++ b/models/User.py
@@ -46,7 +46,7 @@ class User(UserMixin):
 
     def get_heatmap(self):
         heatmap = []
-        for day in range (0, 27):
+        for day in range(0, 28):
             value = get_heatmap_value(self.id, day)
             heatmap.append(value)
         return heatmap
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index e3a58d3..76ced99 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,43 +1,40 @@
 {% extends 'layouts/main.html' %}
 
 {% block content %}
-    <h1>{{ title }}</h1>
-    <h3>{{ utc_dt }}</h3>
+<h1>{{ title }}</h1>
+<h3>{{ utc_dt }}</h3>
 
 
-    <style>
-        #heatmap {
-            display: grid;
-            grid-template-columns: repeat(7, 0fr); /* 7 Tage in einer Woche */
-            gap: 5px;
-        }
+<style>
+    #heatmap {
+        display: grid;
+        grid-template-columns: repeat(7, 0fr); /* 7 Tage in einer Woche */
+        gap: 5px;
+    }
 
-        .day {
-            width: 50px;
-            height: 50px;
-            border: 1px solid #ccc;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-    </style>
+    .day {
+        width: 50px;
+        height: 50px;
+        border: 1px solid #ccc;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>
 
-    <div class="row">
-
-        <div class="col-md-5 col-12">
-            <div id="heatmap"></div>
+<div class="d-flex flex-column gap-5">
+    <div class="d-flex gap-3">
+        <div class="flex-fill col-5 card bg-light mb-6">
+            <div class="card-body">
+                <h5 class="card-title">Heatmap</h5>
+                <div id="heatmap"></div>
+            </div>
         </div>
 
         <script>
-            // Funktion zur Rückgabe des Montagsdatums
-            function getMonday(date) {
-                const day = date.getDay();
-                const diff = date.getDate() - day + (day === 0 ? -6 : 1); // Anpassung für Sonntag
-                return new Date(date.setDate(diff));
-            }
 
             // Simulierte Aktivitätsdaten (ersetze dies durch deine echten Daten)
-            const activityData = [5, 3, 10, 5, 24, 2, 10, 47, 32, 45, 9, 5, 11, 39, 24, 2, 10, 47, 32, 45];
+            const activityData = {{heatmap_values}};
 
             // Funktion zum Erstellen der Heatmap
             function createHeatmap(data) {
@@ -56,9 +53,9 @@
 
                 // Aktuelles Datum des Montags in der neuen linken Spalte
                 for (let i = 0; i < 7; i++) {
-                    for (let j = 0; j < 7; j++) {
+                    for (let j = 0; j < 4; j++) {
                         // console.log(i * 7 + j, data[i * 7 + j], Math.max(...data));
-                        const opacity = data[i * 7 + j] / Math.max(...data); // Berechne die Opazität basierend auf Aktivitätsanzahl
+                        const opacity = data[i * 7 + j] / (Math.max(...data) <= 0 ? 1 : Math.max(...data)); // Berechne die Opazität basierend auf Aktivitätsanzahl
 
                         if (data[i * 7 + j]) {
                             const dayElement = document.createElement('div');
@@ -67,77 +64,84 @@
                             heatmapContainer.appendChild(dayElement);
                         } else {
                             const dayElement = document.createElement('div');
-                            // dayElement.classList.add('day');
-                            // dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
+                            dayElement.classList.add('day');
+                            dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
                             heatmapContainer.appendChild(dayElement);
                         }
                     }
                 }
+
+                var left = 7 - (new Date()).getDay();
             }
 
             // Erstelle die Heatmap mit den simulierten Daten
             createHeatmap(activityData);
 
-
         </script>
 
-        <div class="col-md-7 col-12">
-            <div class="row mb-3">
+
+        <div class="flex-fill col-7 card bg-light p-6 mb-6">
+            <div class="row mb-3 ">
                 <h2 class="col-9">Gewohnheiten</h2>
-                <a class="col-3 btn btn-primary" role="button" href="/habit-list">Neue Liste erstellen</a>
+                <a class="col-3 btn btn-primary p" role="button" href="/habit-list">Neue Liste erstellen</a>
             </div>
 
             {% for habit_list in habit_lists %}
 
-                <div class="row mb-3">
-                    <h2 class="col-9">{{ habit_list.name }}</h2>
-                    <a class="col-3 btn btn-primary" role="button" href="/habit?list={{ habit_list.id }}">Gewohnheit erstellen</a>
-                </div>
+            <div class="row mb-3">
+                <h2 class="col-9">{{ habit_list.name }}</h2>
+                <a class="col-3 btn btn-primary" role="button" href="/habit?list={{ habit_list.id }}">Gewohnheit
+                    erstellen</a>
+            </div>
 
-                <ul class="task-list row">
-                    {% for habit in habit_list.habits %}
-                        <li class="row d-flex align-items-center mb-2" id="habit-{{ habit.id }}">
-                            <div class="col-auto drag-handle" style="cursor: grab;">
-                                <i class="bi bi-grip-vertical"></i>
-                            </div>
-                            <div class="col-auto">
-                                <input {% if habit.checked %} checked {% endif %} type="checkbox" class="task-checkbox"
-                                                              id="{{ habit.id }}"
-                                                              onclick="sendPostRequest('{{ habit.id }}')">
-                            </div>
+            <ul class="task-list row">
+                {% for habit in habit_list.habits %}
+                <li class="row d-flex align-items-center mb-2" id="habit-{{ habit.id }}">
+                    <div class="col-auto drag-handle" style="cursor: grab;">
+                        <i class="bi bi-grip-vertical"></i>
+                    </div>
+                    <div class="col-auto">
+                        <input {% if habit.checked %} checked {% endif %} type="checkbox" class="task-checkbox"
+                               id="{{ habit.id }}"
+                               onclick="sendPostRequest('{{ habit.id }}')">
+                    </div>
 
-                            <div class="col" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
-                                {{ habit.name }}
-                            </div>
+                    <div class="col" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+                        {{ habit.name }}
+                    </div>
 
-                            <div class="col-6" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
-                                {{ habit.note }}
-                            </div>
+                    <div class="col-5 text-black text-opacity-50"
+                         style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+                        {{ habit.note }}
 
-                            <div class="col-2" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
-                                {% if habit %}
-                                    5 🔥
-                                {% endif %}
+                    </div>
 
-                            </div>
+                    <div class="col-2" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+                        {% if habit %}
 
-                            <button type="button" class="btn btn-xs btn-danger rounded-circle" data-bs-toggle="modal"
-                                    data-bs-target="#exampleModal" style="width: 40px; height: 40px"
-                                    onclick="setSelectedHabitId({{ habit.id }})">
-                                <i class="bi bi-trash3"></i>
-                            </button>
-                            <div class="col-12">
-                                <div class="progress" style="height: 2px; width: 90%">
-                                    <div class="progress-bar" id="progress-bar-{{ habit.id }}" role="progressbar"
-                                         style="width: {{ habit.percentage }}%; background-color: {% if habit.percentage >= 100 %} green {% else %} primary {% endif %}"
-                                         aria-valuenow="{{ habit.percentage }}" aria-valuemin="0"
-                                         aria-valuemax="100"></div>
-                                </div>
-                            </div>
-                        </li>
+                        {% else %}
+                        5 🔥
+                        {% endif %}
 
-                    {% endfor %}
-                </ul>
+                    </div>
+
+                    <button type="button" class="btn btn-xs btn-danger rounded-circle" data-bs-toggle="modal"
+                            data-bs-target="#exampleModal" style="width: 40px; height: 40px"
+                            onclick="setSelectedHabitId({{ habit.id }})">
+                        <i class="bi bi-trash3"></i>
+                    </button>
+                    <div class="col-12">
+                        <div class="progress" style="height: 2px; width: 90%">
+                            <div class="progress-bar" id="progress-bar-{{ habit.id }}" role="progressbar"
+                                 style="width: {{ habit.percentage }}%; background-color: {% if habit.percentage >= 100 %} green {% else %} primary {% endif %}"
+                                 aria-valuenow="{{ habit.percentage }}" aria-valuemin="0"
+                                 aria-valuemax="100"></div>
+                        </div>
+                    </div>
+                </li>
+
+                {% endfor %}
+            </ul>
 
             {% endfor %}
         </div>
@@ -176,17 +180,17 @@
                 var progressBar = document.getElementById("progress-bar-" + habitId);
                 var habitBlock = document.getElementById("habit-" + habitId);
 
-            if (percentage == 100) {
-                progressBar.style.backgroundColor = "green";
-                habitBlock.classList.add("animate-bounce");
-                setTimeout(function () {
+                if (percentage == 100) {
+                    progressBar.style.backgroundColor = "green";
+                    habitBlock.classList.add("animate-bounce");
+                    setTimeout(function () {
+                        habitBlock.classList.remove("animate-bounce");
+                    }, 2000);
+                } else {
+                    progressBar.style.backgroundColor = "";
                     habitBlock.classList.remove("animate-bounce");
-                }, 2000);
-            } else {
-                progressBar.style.backgroundColor = "";
-                habitBlock.classList.remove("animate-bounce");
+                }
             }
-        }
 
             function sendPostRequest(checkboxId) {
                 // Get the checkbox element using the provided ID
@@ -205,16 +209,16 @@
                     // Handle the success response if needed
                     console.log(response.data);
 
-                // Set the percentage of the habit. percentage received as integer
-                var percentage = response.data.percentage;
-                var progressBar = document.getElementById("progress-bar-" + habitId);
-                progressBar.style.width = percentage + "%";
-                checkCompletionAndAnimate(habitId, percentage);
-            }).catch(function (error) {
-                // Handle the error if needed
-                console.error('Error:', error);
-            });
-        }
+                    // Set the percentage of the habit. percentage received as integer
+                    var percentage = response.data.percentage;
+                    var progressBar = document.getElementById("progress-bar-" + habitId);
+                    progressBar.style.width = percentage + "%";
+                    checkCompletionAndAnimate(habitId, percentage);
+                }).catch(function (error) {
+                    // Handle the error if needed
+                    console.error('Error:', error);
+                });
+            }
 
             function deleteHabit(habitId) {
                 // Make a POST request to /delete with the habit id
@@ -237,30 +241,31 @@
             }
         </script>
     </div>
+</div>
 
-    <script>
-        document.addEventListener('DOMContentLoaded', (event) => {
-            var el = document.querySelector('.task-list');
-            Sortable.create(el, {
-                handle: '.drag-handle',
-                animation: 150,
-                onEnd: function (evt) {
-                    var habitId = el.children[evt.newIndex].id.split('-')[1];
-                    var oldIndex = evt.oldIndex;
-                    var newIndex = evt.newIndex;
+<script>
+    document.addEventListener('DOMContentLoaded', (event) => {
+        var el = document.querySelector('.task-list');
+        Sortable.create(el, {
+            handle: '.drag-handle',
+            animation: 150,
+            onEnd: function (evt) {
+                var habitId = el.children[evt.newIndex].id.split('-')[1];
+                var oldIndex = evt.oldIndex;
+                var newIndex = evt.newIndex;
 
-                    axios.post('/reorder', {habitId: habitId, oldIndex: oldIndex, newIndex: newIndex}, {
-                        headers: {
-                            'Content-Type': 'application/json'
-                        }
-                    }).then(function (response) {
-                        // Handle the success response if needed
-                    }).catch(function (error) {
-                        // Handle the error if needed
-                        console.error('Error:', error);
-                    });
-                }
-            });
+                axios.post('/reorder', {habitId: habitId, oldIndex: oldIndex, newIndex: newIndex}, {
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                }).then(function (response) {
+                    // Handle the success response if needed
+                }).catch(function (error) {
+                    // Handle the error if needed
+                    console.error('Error:', error);
+                });
+            }
         });
-    </script>
+    });
+</script>
 {% endblock %}
\ No newline at end of file