diff --git a/Spybot2/settings.py b/Spybot2/settings.py
index 088caab..f30db77 100644
--- a/Spybot2/settings.py
+++ b/Spybot2/settings.py
@@ -75,16 +75,6 @@
     'django_bootstrap5',
 ]
 
-MIDDLEWARE = [
-    'django.middleware.security.SecurityMiddleware',
-    'django.contrib.sessions.middleware.SessionMiddleware',
-    'django.middleware.common.CommonMiddleware',
-    'django.middleware.csrf.CsrfViewMiddleware',
-    'django.contrib.auth.middleware.AuthenticationMiddleware',
-    'django.contrib.messages.middleware.MessageMiddleware',
-    'django.middleware.clickjacking.XFrameOptionsMiddleware',
-]
-
 ROOT_URLCONF = 'Spybot2.urls'
 
 TEMPLATES = [
@@ -159,6 +149,8 @@
     'spybot.auth.backend.link_backend.LinkAuthBackend',
 ]
 
+LOGIN_URL = '/login'
+
 # Passkeys
 FIDO_SERVER_NAME = "Spybot local"
 #KEY_ATTACHMENT = passkeys.Attachment.CROSS_PLATFORM
diff --git a/frontend/chart_utils.js b/frontend/chart_utils.js
new file mode 100644
index 0000000..32b0c90
--- /dev/null
+++ b/frontend/chart_utils.js
@@ -0,0 +1,23 @@
+export const onChartRenderTrigger = (now, call) => {
+    const observer = new MutationObserver(function (mutations) {
+        mutations.forEach(function (mutation) {
+            if (mutation.type === "attributes" && mutation.attributeName === 'data-bs-theme') {
+                call()
+            }
+        });
+    });
+    observer.observe(document.body, {
+        attributes: true //configure it to listen to attribute changes
+    });
+
+    if (now === true) call();
+}
+
+export const onChartReady = (call) => {
+    document.addEventListener("DOMContentLoaded", call)
+};
+
+export const isDarkMode = () => {
+    return document.body.classList.contains("theme-dark");
+}
+
diff --git a/frontend/early.js b/frontend/early.js
new file mode 100644
index 0000000..8edb55b
--- /dev/null
+++ b/frontend/early.js
@@ -0,0 +1,5 @@
+// anything that needs to be loaded immediately upon page load goes here
+
+import * as chart_utils from  './chart_utils'
+
+Object.assign(window, chart_utils)
\ No newline at end of file
diff --git a/frontend/rollup.config.mjs b/frontend/rollup.config.mjs
index 0237931..9ef024e 100644
--- a/frontend/rollup.config.mjs
+++ b/frontend/rollup.config.mjs
@@ -1,7 +1,7 @@
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import css from "rollup-plugin-import-css";
 
-export default {
+export default [{
   context: 'window',
   input: 'main.js',
   output: {
@@ -10,4 +10,14 @@ export default {
     name: 'jsbundle',
   },
   plugins: [nodeResolve(), css({'output': 'main.css'})]
-};
\ No newline at end of file
+},
+{
+  context: 'window',
+  input: 'early.js',
+  output: {
+    dir: 'output',
+    format: 'iife',
+    name: 'jsbundle',
+  },
+  plugins: [nodeResolve()]
+}];
\ No newline at end of file
diff --git a/spybot/static/theme.js b/spybot/static/theme.js
index f837e7a..865b8d3 100644
--- a/spybot/static/theme.js
+++ b/spybot/static/theme.js
@@ -31,7 +31,9 @@ function configureTheme(wantedTheme) {
         document.body.classList.remove('theme-dark', 'theme-light');
         document.body.classList.add(`theme-${realTheme}`);
         if (realTheme === 'dark') {
-            document.body.setAttribute("data-bs-theme", realTheme)
+            if (document.body.getAttribute('data-bs-theme') !== realTheme) {
+                document.body.setAttribute("data-bs-theme", realTheme)
+            }
         } else {
             document.body.removeAttribute("data-bs-theme")
         }
@@ -51,6 +53,6 @@ function configureTheme(wantedTheme) {
     applyTheme(theme);
 }
 
-window.matchMedia("(prefers-color-scheme: dark)").onchange = configureTheme
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener('change', configureTheme)
 // configure theme now
 configureTheme()
\ No newline at end of file
diff --git a/spybot/templates/spybot/base/base.html b/spybot/templates/spybot/base/base.html
index f85b05a..131bccc 100644
--- a/spybot/templates/spybot/base/base.html
+++ b/spybot/templates/spybot/base/base.html
@@ -12,6 +12,7 @@
 
         <link rel="stylesheet" href="{% static 'main.css' %}">
         <link rel="stylesheet" href="{% static 'styles.css' %}">
+        <script src="{% static 'early.js' %}"></script>
         <script src="{% static 'main.js' %}" defer></script>
         {% block header %}
         {%  endblock %}
diff --git a/spybot/templates/spybot/home/activity_fragment.html b/spybot/templates/spybot/home/activity_fragment.html
index 83aee33..634bdf2 100644
--- a/spybot/templates/spybot/home/activity_fragment.html
+++ b/spybot/templates/spybot/home/activity_fragment.html
@@ -114,12 +114,9 @@ <h3 class="card-title my-2">Recent activity</h3>
             })).render();
         }
 
-        console.log("checking document loading state")
         if (document.readyState === "loading") {
-            console.log("loading");
             document.addEventListener("DOMContentLoaded", renderActivityChart);
         } else {
-            console.log("already loaded");
             renderActivityChart();
         }
     </script>
diff --git a/spybot/templates/spybot/home/channel_tree_map.html b/spybot/templates/spybot/home/channel_tree_map.html
index 061327f..84860c4 100644
--- a/spybot/templates/spybot/home/channel_tree_map.html
+++ b/spybot/templates/spybot/home/channel_tree_map.html
@@ -11,67 +11,78 @@ <h3 class="card-title my-2">Channel popularity</h3>
 function getCSSVar(name) {
     return getComputedStyle(document.body).getPropertyValue(name)
 }
-document.addEventListener("DOMContentLoaded", function () {
-    if (!window.ApexCharts) return
+onChartReady(() => {
     const raw_data = JSON.parse(document.querySelector('#channel-data').textContent)
-    new ApexCharts(document.querySelector("#chart-channel-tree-map"), {
-        chart: {
-            type: 'treemap',
-            toolbar: {
-                show: false,
+
+    const chartOptions = () => {
+        return {
+            chart: {
+                type: 'treemap',
+                toolbar: {
+                    show: false,
+                },
+                zoom: {enabled: false},
+                height: '100%',
+                parentHeightOffset: 0,
+            },
+            series: [
+                {
+                    name: 'Talking',
+                    data: raw_data.filter(o => o.name !== "AFK" && o.name !== "bei Bedarf anstupsen")
+                        .map(o => { return {x: o.name, y: o.percentage}})
+                },
+                {
+                    name: 'Inactive',
+                    data: raw_data.filter(o => o.name === "AFK" || o.name === "bei Bedarf anstupsen")
+                        .map(o => { return {x: o.name, y: o.percentage}})
+                }
+            ],
+            plotOptions: {
+                treemap: {
+                    enableShades: true,
+                    shadeIntensity: 0.3,
+                }
             },
-            zoom: {enabled: false},
-            height: '100%',
-            parentHeightOffset: 0,
-        },
-        series: [
-            {
-                name: 'Talking',
-                data: raw_data.filter(o => o.name !== "AFK" && o.name !== "bei Bedarf anstupsen")
-                    .map(o => { return {x: o.name, y: o.percentage}})
+            stroke:{
+                width: 5,
+                colors: [getCSSVar('--tblr-bg-surface')],
             },
-            {
-                name: 'Inactive',
-                data: raw_data.filter(o => o.name === "AFK" || o.name === "bei Bedarf anstupsen")
-                    .map(o => { return {x: o.name, y: o.percentage}})
-            }
-        ],
-        plotOptions: {
-            treemap: {
-                enableShades: true,
-                shadeIntensity: 0.3,
-            }
-        },
-        stroke:{
-            width: 5,
-            colors: [getCSSVar('--tblr-bg-surface')],
-        },
-        colors: [tabler.getColor("primary"), tabler.getColor("red")],
-        dataLabels: {
-            enabled: true,
-            offsetY: -5,
-            formatter: function(text, op) {
-                return [text, op.value.toFixed(1) + "%"]
+            colors: [tabler.getColor("primary"), tabler.getColor("red")],
+            dataLabels: {
+                enabled: true,
+                offsetY: -5,
+                formatter: function(text, op) {
+                    return [text, op.value.toFixed(1) + "%"]
+                },
             },
-        },
-        grid: {
-            padding: {
-                top: -20,
-                right: 0,
-                left: 0,
-                bottom: 0
+            grid: {
+                padding: {
+                    top: -20,
+                    right: 0,
+                    left: 0,
+                    bottom: 0
+                },
             },
-        },
-        tooltip:{
-            theme: 'dark',
-            marker: {show: false},
-            y: {
-                formatter: y => { return y.toFixed(1) + "%" },
+            tooltip:{
+                theme: 'dark',
+                marker: {show: false},
+                y: {
+                    formatter: y => { return y.toFixed(1) + "%" },
+                },
+            },
+            legend: {
+                show: false,
             },
-        },
-        legend: {
-            show: false,
-        },
-    }).render()
+        };
+    }
+    let chart = null;
+
+    onChartRenderTrigger(true, () => {
+        if (chart !== null) {
+            chart.destroy();
+        }
+        chart = new ApexCharts(document.querySelector("#chart-channel-tree-map"), chartOptions())
+        chart.render();
+    });
 });
 </script>
\ No newline at end of file
diff --git a/spybot/templates/spybot/home/tod_histogram.html b/spybot/templates/spybot/home/tod_histogram.html
index 3a63c36..3f7940d 100644
--- a/spybot/templates/spybot/home/tod_histogram.html
+++ b/spybot/templates/spybot/home/tod_histogram.html
@@ -72,8 +72,8 @@ <h3 class="card-title my-2">Time of day histogram</h3>
             type: "numeric",
             min: 0,
             max: 24,
-            tickAmount: 12,
-            labels: {formatter: x => x /*Math.round(x)*/},
+            tickAmount: 11,
+            labels: {formatter: x => `${x <= 12 ? x : x-12}${x < 12 ? 'am' : 'pm'}`},
             title: {
                 text: "Hours",
                 offsetY: 68,
diff --git a/spybot/templates/spybot/timeline.html b/spybot/templates/spybot/timeline.html
index 3a58df2..20e450b 100644
--- a/spybot/templates/spybot/timeline.html
+++ b/spybot/templates/spybot/timeline.html
@@ -84,7 +84,7 @@
             x: {
                 format: 'HH:mm:ss'
             },
-            theme: document.body.classList.contains("theme-dark") ? 'dark' : 'light'
+            theme: isDarkMode() ? 'dark' : 'light'
         },
         theme: {
             palette: 'palette2'
diff --git a/spybot/templates/spybot/user.html b/spybot/templates/spybot/user.html
index 943d840..b0f16b7 100644
--- a/spybot/templates/spybot/user.html
+++ b/spybot/templates/spybot/user.html
@@ -3,11 +3,32 @@
 {% load util %}
 
 {% block content %}
-    <div class="row row-cards justify-content-center align-items-center">
+    <div class="mt-2 d-flex align-items-center justify-content-center">
+        <span class="avatar">{{ user.user_name|make_list|first }}</span>
+        <span class="display-6 ms-3"><b>{{ user.user_name }}</b></span>
+    </div>
+    <div class="row row-cards justify-content-center mt-2">
         <div class="col-md-6 col-lg-4">
             <div class="card">
                 <div class="card-header justify-content-md-center">
-                    <h3 class="card-title ">{{ user.user_name }}</h3>
+                    <h3 class="card-title ">Awards</h3>
+                </div>
+                <div class="card-body align-self-center">
+                    <div class="datagrid-title">
+                        <span>Award of the week Medals</span>
+                    </div>
+                    <div class="datagrid-content py-2">
+                        <span class="h3 mx-2">{{ user.gold }} x {% tabler_icon 'medal' class="medal gold" %}</span>
+                        <span class="h3 mx-2">{{ user.silver }} x {% tabler_icon 'medal' class="medal silver" %}</span>
+                        <span class="h3 mx-2">{{ user.bronze }} x {% tabler_icon 'medal' class="medal bronze" %}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-lg-4">
+            <div class="card">
+                <div class="card-header justify-content-md-center">
+                    <h3 class="card-title ">Statistics</h3>
                 </div>
                 <div class="row row0 justify-content-center">
                     <div class="col-md-6">
@@ -26,17 +47,6 @@ <h3 class="card-title ">{{ user.user_name }}</h3>
                                     </div>
                                 </div>
 
-                                <div class="datagrid-item">
-                                    <div class="datagrid-title">
-                                        <span>Medals</span>
-                                    </div>
-                                    <div class="datagrid-content">
-                                        <span>{% tabler_icon 'medal' class="medal gold" %}{{ user.gold }}</span>
-                                        <span>{% tabler_icon 'medal' class="medal silver" %}{{ user.silver }}</span>
-                                        <span>{% tabler_icon 'medal' class="medal bronze" %}{{ user.bronze }}</span>
-                                    </div>
-                                </div>
-
                                 {% if not user.online %}
                                     <div class="datagrid-item">
                                         <div class="datagrid-title">
@@ -105,7 +115,7 @@ <h3 class="card-title ">{{ user.user_name }}</h3>
 
                                 <div class="datagrid-content">
                                     {% if u.names|length > 0 %}
-                                    Not Former Names known
+                                    No former names known
                                     {% endif %}
 
                                     <ul style="overflow: scroll">
@@ -140,57 +150,164 @@ <h3 class="card-title ">{{ user.user_name }}</h3>
                 </div>
             </div>
         </div>
+        <div class="col-md-6 col-lg-4">
+            <div class="card">
+                <div class="card-header justify-content-md-center">
+                    <h3 class="card-title ">Monthly activity chart</h3>
+                </div>
+                <div class="card-body">
+                    <div id="activity-months-heatmap" class="chart-lg d-flex mt-auto"></div>
+                </div>
+            </div>
+        </div>
     </div>
 
+    {{ months|json_script:"months_data" }}
+
     <script>
-        document.addEventListener("DOMContentLoaded", function () {
-            window.ApexCharts && (new ApexCharts(document.getElementById('online-pie'), {
-                chart: {
-                    type: "pie",
-                    fontFamily: 'inherit',
-                    height: "50%",
-                    sparkline: {
-                        enabled: true
+        onChartReady(() => {
+            const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+
+            const onlinePieChartOptions = () => {
+                return {
+                    chart: {
+                        type: "pie",
+                        fontFamily: 'inherit',
+                        height: "50%",
+                        sparkline: {
+                            enabled: true
+                        },
+                        animations: {
+                            enabled: true,
+                            easing: 'easein',
+                            speed: 1000,
+                            animateGradually: {
+                                enabled: true,
+                                delay: 150
+                            },
+                            dynamicAnimation: {
+                                enabled: true,
+                                speed: 750
+                            }
+                        },
+                    },
+                    fill: {
+                        opacity: 1,
                     },
-                    animations: {
+                    series: {{ data }},
+                    labels: ["AFK", "ONLINE"],
+                    dataLabels: {
                         enabled: true,
-                        easing: 'easein',
-                        speed: 1000,
-                        animateGradually: {
-                            enabled: true,
-                            delay: 150
+                    },
+                    tooltip: {
+                        theme: 'dark'
+                    },
+                    grid: {
+                        strokeDashArray: 4,
+                    },
+                    colors: [tabler.getColor("red", 0.8), tabler.getColor("green", 0.8)],
+                    legend: {
+                        show: true,
+                        position: 'bottom',
+                    },
+                }
+            };
+            const onlinePieChart = new ApexCharts(document.getElementById('online-pie'), onlinePieChartOptions());
+            onlinePieChart.render();
+
+            const heatmapOptions = () => {
+                const rawMonthData = JSON.parse(document.querySelector('#months_data').textContent)
+                const transformedMonthData = rawMonthData.reduce((acc, { year, month, activity }) => {
+                    if (!acc[year]) {
+                        acc[year] = [];
+                    }
+                    acc[year].push(activity);
+                    return acc;
+                }, {});
+                const graphData = Object.entries(transformedMonthData).map(v => { return { name: v[0], data: v[1] }})
+
+                return {
+                    series: graphData.reverse(),
+                    chart: {
+                        height: 350,
+                        type: 'heatmap',
+                        zoom: {enabled: false},
+
+                    },
+                    xaxis: {
+                        labels: {
+                            formatter: (value) => { return ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][clamp(Math.floor(value)-1, 0, 11)].substring(0, 3) },
                         },
-                        dynamicAnimation: {
-                            enabled: true,
-                            speed: 750
+                        tickPlacement: 'on',
+                        tickAmount: 3,
+                    },
+                    dataLabels: {
+                        enabled: false
+                    },
+                    tooltip: {
+                        {#enabled: false,#}
+                        {#theme: 'dark',#}
+                    },
+                    theme: {
+                        mode: isDarkMode() ? 'dark' : 'light',
+                    },
+                    plotOptions: {
+                        heatmap: {
+                            radius: 0,
+                            shadeIntensity: 0,
+                            colorScale: {
+                                ranges: [{
+                                    from: 0,
+                                    to: 1,
+                                    color: isDarkMode() ? '#161B22' :  '#EBEDF0',
+                                },
+                                {
+                                    from: 1.00001,
+                                    to: 50,
+                                    color: '#9BE9A8',
+                                },
+                                {
+                                    from: 50.000001,
+                                    to: 100,
+                                    color: '#40C463',
+                                },
+                                {
+                                    from: 100.000001,
+                                    to: 150,
+                                    color: '#30A14E',
+                                },
+                                {
+                                    from: 150.000001,
+                                    to: 1000,
+                                    color: '#216e39',
+                                }]
+                            }
                         }
                     },
-                },
-                fill: {
-                    opacity: 1,
-                },
-                series: {{ data }},
-                labels: ["AFK", "ONLINE"],
-                dataLabels: {
-                    enabled: true,
-                },
-                tooltip: {
-                    theme: 'dark'
-                },
-                grid: {
-                    strokeDashArray: 4,
-                },
-                colors: [tabler.getColor("red", 0.8), tabler.getColor("green", 0.8)],
-                legend: {
-                    show: true,
-                    position: 'bottom',
-                },
-            })).render();
+                    stroke: {
+                        width: 1,
+                        colors: [isDarkMode() ? '#182433' : '#fdfdfd']
+                    },
+                    fontFamily: 'inherit',
+                    parentHeightOffset: 0,
+                    legend: {
+                        show: false,
+                    },
+                }
+            };
+            const heatmap = new ApexCharts(document.getElementById('activity-months-heatmap'), heatmapOptions());
+            heatmap.render();
+
+            onChartRenderTrigger(false, () => {
+                onlinePieChart.updateOptions(onlinePieChartOptions());
+                heatmap.updateOptions(heatmapOptions());
+            });
         });
+
     </script>
     <style>
         .medal {
-            scale: .25;
+            scale: .5;
             animation: medals 1s ease-out forwards;
         }
 
diff --git a/spybot/views/views.py b/spybot/views/views.py
index caf056e..fd2b548 100644
--- a/spybot/views/views.py
+++ b/spybot/views/views.py
@@ -215,6 +215,7 @@ def halloffame(request):
     return render(request, 'spybot/halloffame.html', context)
 
 
+@login_required()
 def user(request, user_id: int):
     # name, first_online, is_online | last_online, aliase, total_time, afk_time
 
@@ -230,6 +231,8 @@ def user(request, user_id: int):
     if u.get('online') == 1:
         game_id, game_name = get_steam_game(MergedUser.objects.get(id=user_id))
 
+    months = visualization.user_month_activity(user_id)
+
     return render(request, 'spybot/user.html', {
         **get_context(request),
         'user': u,
@@ -239,6 +242,7 @@ def user(request, user_id: int):
         'game_id': game_id,
         'game_name': game_name,
         'streak': streak,
+        'months': months,
     })
 
 
diff --git a/spybot/visualization.py b/spybot/visualization.py
index eae99b0..51b2210 100644
--- a/spybot/visualization.py
+++ b/spybot/visualization.py
@@ -307,6 +307,36 @@ def user_longest_streak(merged_user_id: int):
         return dictfetchall(cursor)
 
 
+def user_month_activity(merged_user_id: int):
+    with connection.cursor() as cursor:
+        cursor.execute("""
+        WITH data AS (
+            SELECT
+                YEAR(startTime) AS year,
+                MONTH(startTime) AS month,
+                SUM(TIMESTAMPDIFF(SECOND, startTime, endTime)) / 3600 AS time_hours
+            FROM TSUserActivity
+                       INNER JOIN TSChannel channel on TSUserActivity.cID = channel.id
+            INNER JOIN TSUser user ON TSUserActivity.tsUserID = user.id
+            WHERE startTime > MAKEDATE(2016,1)
+                AND endTime IS NOT NULL
+                AND channel.name NOT IN ('bei\\\sBedarf\\\sanstupsen', 'AFK')
+                AND user.merged_user_id = %s
+            GROUP BY year, month
+            ORDER BY year, month),
+        months AS (
+            WITH RECURSIVE nrows(date) AS (
+                SELECT MAKEDATE(2016,1) UNION ALL
+                SELECT DATE_ADD(date,INTERVAL 1 MONTH) FROM nrows WHERE date<=DATE_SUB(CURRENT_DATE, INTERVAL 1 MONTH)
+            )
+            SELECT date FROM nrows
+        )
+        SELECT MONTH(months.date) AS month, YEAR(months.date) AS year, COALESCE(data.time_hours, 0) AS activity FROM months
+        LEFT JOIN data ON YEAR(months.date) = data.year AND MONTH(months.date) = data.month;
+        """, [merged_user_id])
+        return dictfetchall(cursor)
+
+
 #
 # WITH dates AS (
 #     SELECT DISTINCT