diff --git a/app.py b/app.py
index 0448adb..a656e71 100644
--- a/app.py
+++ b/app.py
@@ -822,6 +822,7 @@ def save_profile_image(image_file):
     current_user.update()
 
 @app.route('/upload', methods=['POST'])
+@login_required
 def upload_profile_image():
     if 'file' not in request.files:
         return 'No file part'
@@ -833,6 +834,7 @@ def upload_profile_image():
     return redirect(url_for('profile'))
 
 @app.route('/save_color', methods=['POST'])
+@login_required
 def save_heatmap_color():
     # Get the color value from the form
     new_color = request.form['color']
diff --git a/static/css/heatmap.css b/static/css/heatmap.css
new file mode 100644
index 0000000..120b61a
--- /dev/null
+++ b/static/css/heatmap.css
@@ -0,0 +1,73 @@
+    #heatmap {
+        display: grid;
+        grid-template-columns: repeat(7, 0fr); /* 7 Tage in einer Woche */
+        gap: 5px;
+        width: 100%;
+        table-layout: fixed;
+    }
+
+    .day {
+        width: 50px;
+        height: 50px;
+        border: 1px solid #ccc;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        table-layout: fixed;
+    }
+
+    @media (max-width: 1400px) {
+        .day {
+            width: 40px;
+            height: 40px;
+        }
+    }
+
+    @media (max-width: 1200px) {
+        .day {
+            width: 35px;
+            height: 35px;
+        }
+    }
+
+    @media (max-width: 992px) {
+        .day {
+            width: 30px;
+            height: 30px;
+        }
+    }
+
+    @media (max-width: 767px) {
+        .day {
+            width: 50px;
+            height: 50px;
+        }
+    }
+
+    @media (max-width: 450px) {
+        .day {
+            width: 40px;
+            height: 40px;
+        }
+    }
+
+    @media (max-width: 400px) {
+        .day {
+            width: 35px;
+            height: 35px;
+        }
+    }
+
+    @media (max-width: 350px) {
+        .day {
+            width: 30px;
+            height: 30px;
+        }
+    }
+
+    @media (max-width: 300px) {
+        .day {
+            width: 25px;
+            height: 25px;
+        }
+    }
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 1ac50e9..3626897 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,7 +4,7 @@
 <div class = "row">
     <div class="col">
         <h1>
-            {% if (current_user.is_authenticated) %}<img class="avatar avatar-xl" src="{{user.profile_image}}"/>{% endif %}
+            {% if (current_user.is_authenticated) %}<img class="avatar avatar-xl" src="{{user.profile_image}}" alt="failed to load image"/>{% endif %}
             {{ title }}
         </h1>
         <h3>{{ utc_dt }}</h3>
@@ -14,83 +14,6 @@
     </div>
 </div>
 
-<style>
-    #heatmap {
-        display: grid;
-        grid-template-columns: repeat(7, 0fr); /* 7 Tage in einer Woche */
-        gap: 5px;
-        width: 100%;
-        table-layout: fixed;
-    }
-
-    .day {
-        width: 50px;
-        height: 50px;
-        border: 1px solid #ccc;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        table-layout: fixed;
-    }
-
-    @media (max-width: 1400px) {
-        .day {
-            width: 40px;
-            height: 40px;
-        }
-    }
-
-    @media (max-width: 1200px) {
-        .day {
-            width: 35px;
-            height: 35px;
-        }
-    }
-
-    @media (max-width: 992px) {
-        .day {
-            width: 30px;
-            height: 30px;
-        }
-    }
-
-    @media (max-width: 767px) {
-        .day {
-            width: 50px;
-            height: 50px;
-        }
-    }
-
-    @media (max-width: 450px) {
-        .day {
-            width: 40px;
-            height: 40px;
-        }
-    }
-
-    @media (max-width: 400px) {
-        .day {
-            width: 35px;
-            height: 35px;
-        }
-    }
-
-    @media (max-width: 350px) {
-        .day {
-            width: 30px;
-            height: 30px;
-        }
-    }
-
-    @media (max-width: 300px) {
-        .day {
-            width: 25px;
-            height: 25px;
-        }
-    }
-</style>
-
-
 <div class="d-md-flex gap-3">
 
     {% if current_user.is_authenticated %}
@@ -109,7 +32,6 @@
     {% include 'components/delete_list.html' %}
     {% endif %}
 
-
 </div>
 
 <script src="../static/script/script-index.js"></script>
diff --git a/templates/layouts/main.html b/templates/layouts/main.html
index 905f4ad..4e3e2f4 100644
--- a/templates/layouts/main.html
+++ b/templates/layouts/main.html
@@ -9,6 +9,7 @@
     <!-- CSS -->
     <link href="../../static/css/background.css" rel="stylesheet" type="text/css">
     <link href="../../static/css/profile.css" rel="stylesheet" type="text/css">
+    <link href="../../static/css/heatmap.css" rel="stylesheet" type="text/css">
     <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/fastbootstrap@2.2.0/dist/css/fastbootstrap.min.css"
           integrity="sha256-V6lu+OdYNKTKTsVFBuQsyIlDiRWiOmtC8VQ8Lzdm2i4=" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">