diff --git a/app.py b/app.py
index 19be1d4..918a9d1 100644
--- a/app.py
+++ b/app.py
@@ -221,6 +221,13 @@ def habit_create():
         errors=errors,
     )
 
+@app.route('/test1')
+def test1():
+    return render_template('layouts/indextest1.html', errors={})
+
+@app.route('/test2')
+def test2():
+    return render_template('layouts/indextest2.html', errors={})
 
 # Run the application
 if __name__ == '__main__':
diff --git a/templates/layouts/indextest1.html b/templates/layouts/indextest1.html
new file mode 100644
index 0000000..cf0a7b4
--- /dev/null
+++ b/templates/layouts/indextest1.html
@@ -0,0 +1,167 @@
+{% extends 'layouts/main.html' %}
+
+{% block content %}
+<h1>{{ title }}</h1>
+<h3>{{ utc_dt }}</h3>
+
+
+<style>
+    table {
+        border-collapse: collapse;
+        width: 100%;
+    }
+
+    th, td {
+        border: 1px solid #dddddd;
+        text-align: center;
+        padding: 8px;
+    }
+
+    th {
+        background-color: #f2f2f2;
+    }
+
+    .current-week {
+        /* Change the color for the current week */
+        background-color: rgba(255, 204, 0, 1); /* Full opacity */
+    }
+
+    .past-week {
+        /* Change the color for past weeks */
+        background-color: rgba(224, 224, 224, 1); /* Full opacity */
+    }
+
+    .future-week {
+        /* Change the color for future weeks */
+        background-color: rgba(192, 224, 192, 1); /* Full opacity */
+    }
+
+    .current-day {
+        /* Highlight the current day */
+        border: 2px solid #ff0000;
+        border-radius: 5px;
+    }
+</style>
+
+<table id="heatmap">
+    <thead>
+    <tr>
+        <th></th> <!-- Empty cell for spacing -->
+        <th class="past-week">-2</th>
+        <th class="past-week">-1</th>
+        <th class="current-week">0</th>
+        <th class="future-week">+1</th>
+        <th class="future-week">+2</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td >Montag</td>
+        <td class="past-week" data-tasks="5">15</td>
+        <td class="past-week" data-tasks="8">20</td>
+        <td class="current-week" data-tasks="12">25</td>
+        <td class="future-week" data-tasks="7">30</td>
+        <td class="future-week" data-tasks="10">35</td>
+    </tr>
+    <tr>
+        <td class="current-day">Dienstag</td>
+        <td class="past-week" data-tasks="5">15</td>
+        <td class="past-week" data-tasks="8">20</td>
+        <td class="current-week" data-tasks="12">25</td>
+        <td class="future-week" data-tasks="7">30</td>
+        <td class="future-week" data-tasks="10">35</td>
+    </tr>
+    <tr>
+        <td >Mittwoch</td>
+        <td class="past-week" data-tasks="5">15</td>
+        <td class="past-week" data-tasks="8">20</td>
+        <td class="current-week" data-tasks="12">25</td>
+        <td class="future-week" data-tasks="7">30</td>
+        <td class="future-week" data-tasks="10">35</td>
+    </tr>
+    <tr>
+        <td >Donnerstag</td>
+        <td class="past-week" data-tasks="5">15</td>
+        <td class="past-week" data-tasks="8">20</td>
+        <td class="current-week" data-tasks="12">25</td>
+        <td class="future-week" data-tasks="7">30</td>
+        <td class="future-week" data-tasks="10">35</td>
+    </tr>
+    <tr>
+        <td >Freitag</td>
+        <td class="past-week" data-tasks="5">15</td>
+        <td class="past-week" data-tasks="8">20</td>
+        <td class="current-week" data-tasks="12">25</td>
+        <td class="future-week" data-tasks="7">30</td>
+        <td class="future-week" data-tasks="10">35</td>
+    </tr>
+    <tr>
+        <td >Samstag</td>
+        <td class="past-week" data-tasks="5">15</td>
+        <td class="past-week" data-tasks="8">20</td>
+        <td class="current-week" data-tasks="12">25</td>
+        <td class="future-week" data-tasks="7">30</td>
+        <td class="future-week" data-tasks="10">35</td>
+    </tr>    <tr>
+        <td >Sonntag</td>
+        <td class="past-week" data-tasks="5">15</td>
+        <td class="past-week" data-tasks="8">20</td>
+        <td class="current-week" data-tasks="12">25</td>
+        <td class="future-week" data-tasks="7">30</td>
+        <td class="future-week" data-tasks="10">35</td>
+    </tr>
+
+    </tbody>
+</table>
+
+<script>
+    // Adjust background color based on the number of tasks
+    document.addEventListener('DOMContentLoaded', function () {
+        var cells = document.querySelectorAll('#heatmap tbody td');
+
+        cells.forEach(function (cell) {
+            var tasks = parseInt(cell.getAttribute('data-tasks')) || 0;
+            var opacity = tasks / 20; // Adjust the denominator based on your preference
+
+            // Get the RGB values from the background color
+            var rgb = cell.style.backgroundColor.match(/\d+/g);
+
+            // Calculate the green value based on the number of tasks
+            var greenValue = Math.round(opacity * 255);
+
+            // Set the new background color with adjusted green value
+            cell.style.backgroundColor = 'rgba(0,' + greenValue + ',0,' + opacity + ')';
+        });
+    });
+    </script>
+
+
+<div class="row">
+    <h2 class="col-10">Task List</h2>
+    <a class="col-2 btn btn-primary" role="button" href="/habit">
+        Task erstellen
+    </a>
+</div>
+
+<ul class="task-list row">
+    {% for habit in habits %}
+    <li class="row col-md-4">
+        <div class="col-auto">
+            <input type="checkbox" class="task-checkbox">
+        </div>
+
+        <div class="col" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+            {{ habit.name }} hhhbhghbhjndjksbeujsdkfheuwaihgkjfgfjnsidkgjnkdghujds
+        </div>
+
+    </li>
+
+    <div class="col-md-8" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+        {{ habit.note }}
+    </div>
+
+    {% endfor %}
+</ul>
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/templates/layouts/indextest2.html b/templates/layouts/indextest2.html
new file mode 100644
index 0000000..03cbc40
--- /dev/null
+++ b/templates/layouts/indextest2.html
@@ -0,0 +1,104 @@
+2{% extends 'layouts/main.html' %}
+
+{% block content %}
+<h1>{{ title }}</h1>
+<h3>{{ utc_dt }}</h3>
+
+
+<style>
+    #heatmap {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr); /* 7 Tage in einer Woche */
+        gap: 5px;
+    }
+
+    .day {
+        width: 50px; /* Ändere die Breite nach Bedarf */
+        height: 50px; /* Ändere die Höhe nach Bedarf */
+        border: 1px solid #ccc;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>
+
+    <div id="heatmap"></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 = [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];
+
+    // Funktion zum Erstellen der Heatmap
+    function createHeatmap(data) {
+        const heatmapContainer = document.getElementById('heatmap');
+
+        // Aktuelles Datum des Montags
+        const currentDate = new Date();
+        const mondayDate = getMonday(currentDate);
+
+        for (let i = 0; i < 7; i++) {
+            const dayElement = document.createElement('div');
+            dayElement.classList.add('day');
+            dayElement.textContent = currentDate.toLocaleDateString('de-DE', { weekday: 'short' });
+            heatmapContainer.appendChild(dayElement);
+            currentDate.setDate(currentDate.getDate() + 1);
+        }
+
+        // Aktuelles Datum des Montags in der neuen linken Spalte
+        for (let i = 0; i < 5; i++) {
+            const dayElement = document.createElement('div');
+            dayElement.classList.add('day');
+            dayElement.textContent = mondayDate.toLocaleDateString('de-DE');
+            heatmapContainer.appendChild(dayElement);
+
+            for (let j = 0; j < 7; j++) {
+                const opacity = data[i * 7 + j] / 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);
+            }
+        }
+    }
+
+    // Erstelle die Heatmap mit den simulierten Daten
+    createHeatmap(activityData);
+</script>
+
+
+<div class="row">
+    <h2 class="col-10">Task List</h2>
+    <a class="col-2 btn btn-primary" role="button" href="/habit">
+        Task erstellen
+    </a>
+</div>
+
+<ul class="task-list row">
+    {% for habit in habits %}
+    <li class="row col-md-4">
+        <div class="col-auto">
+            <input type="checkbox" class="task-checkbox">
+        </div>
+
+        <div class="col" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+            {{ habit.name }} hhhbhghbhjndjksbeujsdkfheuwaihgkjfgfjnsidkgjnkdghujds
+        </div>
+
+    </li>
+
+    <div class="col-md-8" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+        {{ habit.note }}
+    </div>
+
+    {% endfor %}
+</ul>
+
+
+{% endblock %}
\ No newline at end of file