diff --git a/sortiment/store/templates/products/_search.html b/sortiment/store/templates/products/_search.html
index 3ceda8e..7c97c66 100644
--- a/sortiment/store/templates/products/_search.html
+++ b/sortiment/store/templates/products/_search.html
@@ -1,11 +1,11 @@
 {% load icon %}
 {% if not product %}
     <form action="{% url 'store:product_search' %}" method="get" autocomplete="off" data-turbo-frame="product-search">
-        <input type="search" class="input" name="q" placeholder="Zadaj čiarový kód / názov produktu..." autofocus />
+        <input type="search" class="input dark:bg-gray-900 dark:border-gray-700" name="q" placeholder="Zadaj čiarový kód / názov produktu..." autofocus />
 
         <turbo-frame id="product-search" target="_top">
-            <div class="mt-4 bg-gray-50 p-2 rounded-md space-y-2">
-                <a href="{% url 'store:add_product' %}" class="flex items-center gap-2 hover:bg-gray-100 rounded p-2" >
+            <div class="mt-4 bg-gray-50 dark:bg-gray-950 p-2 rounded-md space-y-2">
+                <a href="{% url 'store:add_product' %}" class="flex items-center gap-2 hover:bg-gray-100 dark:hover:bg-gray-900 rounded p-2" >
                     <div class="w-12 h-12 bg-green-500 rounded text-white flex items-center justify-center">
                         {% icon "plus" %}
                     </div>
@@ -15,7 +15,7 @@
 
                 {% if query %}
                     {% for product in products %}
-                        <a href="?product={{ product.id }}" class="flex items-center gap-2 hover:bg-gray-100 rounded p-2">
+                        <a href="?product={{ product.id }}" class="flex items-center gap-2 hover:bg-gray-100 dark:hover:bg-gray-900 rounded p-2">
                             <div class="w-12">
                                 {% include "store/_item_image.html" %}
                             </div>
@@ -31,7 +31,7 @@
         </turbo-frame>
     </form>
 {% else %}
-    <div class="flex items-center gap-2 p-4 bg-gray-100 rounded mb-4">
+    <div class="flex items-center gap-2 p-4 dark:bg-gray-900 bg-gray-100 rounded mb-4">
         <div class="w-12">
             {% include "store/_item_image.html" %}
         </div>
diff --git a/sortiment/store/templates/products/home.html b/sortiment/store/templates/products/home.html
index d07a164..6894748 100644
--- a/sortiment/store/templates/products/home.html
+++ b/sortiment/store/templates/products/home.html
@@ -6,27 +6,27 @@
 {% block setting %}
 <h1 class="font-bold text-3xl text-center mb-6 mt-4">Správa sortimentu</h1>
 
-<div class="overflow-hidden rounded-md border divide-y mx-auto max-w-md">
-    <a href="{% url 'store:product_edit' %}" class="block p-3 hover:bg-gray-100">
+<div class="overflow-hidden rounded-md border dark:border-gray-700 dark:*:border-gray-700 divide-y mx-auto max-w-md">
+    <a href="{% url 'store:product_edit' %}" class="block p-3 hover:bg-gray-100 dark:hover:bg-gray-800">
         <div>Úprava produktov</div>
-        <div class="text-xs text-gray-600">Pridanie nového produktu, úprava informácií o existujúcom produkte</div>
+        <div class="text-xs text-gray-600 dark:text-gray-400">Pridanie nového produktu, úprava informácií o existujúcom produkte</div>
     </a>
-    <a href="{% url 'store:product_import' %}" class="block p-3 hover:bg-gray-100">
+    <a href="{% url 'store:product_import' %}" class="block p-3 hover:bg-gray-100 dark:hover:bg-gray-800">
         <div>Príjem tovaru</div>
-        <div class="text-xs text-gray-600">Nahodenie kúpených produktov do bufetu</div>
+        <div class="text-xs text-gray-600 dark:text-gray-400">Nahodenie kúpených produktov do bufetu</div>
     </a>
-    <a href="{% url 'store:product_transfer' %}" class="block p-3 hover:bg-gray-100">
+    <a href="{% url 'store:product_transfer' %}" class="block p-3 hover:bg-gray-100 dark:hover:bg-gray-800">
         <div>Presun tovaru medzi skladmi</div>
     </a>
-    <a href="{% url 'store:correction' %}" class="block p-3 hover:bg-gray-100">
+    <a href="{% url 'store:correction' %}" class="block p-3 hover:bg-gray-100 dark:hover:bg-gray-800">
         <div>Korekcia skladu</div>
-        <div class="text-xs text-gray-600">Úprava chýb pri príjme tovaru</div>
+        <div class="text-xs text-gray-600 dark:text-gray-400">Úprava chýb pri príjme tovaru</div>
     </a>
-    <a href="{% url 'store:product_discard' %}" class="block p-3 hover:bg-gray-100">
+    <a href="{% url 'store:product_discard' %}" class="block p-3 hover:bg-gray-100 dark:hover:bg-gray-800">
         <div>Vyradenie tovaru</div>
-        <div class="text-xs text-gray-600">Vyhodenie tovaru po záruke</div>
+        <div class="text-xs text-gray-600 dark:text-gray-400">Vyhodenie tovaru po záruke</div>
     </a>
-    <a href="{% url 'store:inventory' %}" class="block p-3 hover:bg-gray-100">Inventúra</a>
-    <a href="{% url 'store:reset' %}" class="block p-3 hover:bg-red-100 text-red-700 font-bold">RESET skladu</a>
+    <a href="{% url 'store:inventory' %}" class="block p-3 hover:bg-gray-100 dark:hover:bg-gray-800">Inventúra</a>
+    <a href="{% url 'store:reset' %}" class="block p-3 hover:bg-red-100 dark:hover:bg-red-950 text-red-700 font-bold">RESET skladu</a>
 </div>
 {% endblock %}
diff --git a/sortiment/store/templates/store/_button_style.html b/sortiment/store/templates/store/_button_style.html
index 3e9911d..f7c018b 100644
--- a/sortiment/store/templates/store/_button_style.html
+++ b/sortiment/store/templates/store/_button_style.html
@@ -1,14 +1,14 @@
 {% if color == "blue" %}
     {% if page_name == request.path %}
-        "btn bg-blue-500 text-gray-100 hover:bg-blue-600 hover:text-gray-200"
+        "btn bg-blue-500 dark:bg-blue-600 text-gray-100 hover:bg-blue-600 hover:text-gray-200"
     {% else %}
-        "btn bg-blue-100 text-gray-700 hover:bg-blue-300 hover:text-gray-900"
+        "btn bg-blue-100 dark:bg-blue-900 text-gray-700 dark:text-gray-300 hover:bg-blue-300 dark:hover:bg-blue-500 hover:text-gray-900"
     {% endif %}
 {% elif color == "red" %}
     {% if page_name == request.path %}
-        "btn bg-red-500 text-red-100 hover:bg-red-600 hover:text-red-200"
+        "btn bg-red-500 text-red-100 dark:text-red-900 hover:bg-red-600 hover:text-red-200"
     {% else %}
-        "btn bg-red-100 text-red-700 hover:bg-red-300 hover:text-red-900"
+        "btn bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 hover:bg-red-300 dark:hover:bg-red-500 hover:text-red-900"
     {% endif %}
 {% else %}
     {% if page_name == request.path %}
diff --git a/sortiment/store/templates/store/_cart.html b/sortiment/store/templates/store/_cart.html
index f2cfeec..83dc1d4 100644
--- a/sortiment/store/templates/store/_cart.html
+++ b/sortiment/store/templates/store/_cart.html
@@ -1,6 +1,6 @@
 {% load icon %}
 
-<turbo-frame class="flex flex-col flex-1 min-h-0 border-t" id="turbo-cart">
+<turbo-frame class="flex flex-col flex-1 min-h-0 border-t dark:border-gray-700" id="turbo-cart">
     <div class="pl-3 pr-2 py-2 overflow-y-auto">
         <div class="font-bold">Môj nákup</div>
 
@@ -15,7 +15,7 @@
                     <div class="text-xs">{{ item.quantity }} × {{ item.product.price }} €</div>
                 </div>
 
-                <div class="text-blue-700 text-sm ml-auto shrink-0">{{ item.total_price|floatformat:2 }} €</div>
+                <div class="text-blue-700 dark:text-blue-500 text-sm ml-auto shrink-0">{{ item.total_price|floatformat:2 }} €</div>
                 <a class="hover:bg-red-400/20 text-red-700 p-3 -m-2 rounded-full shrink-0 -ml-3 cursor-pointer" role="button" href="{% url 'store:cart_remove' item.product.id %}" data-turbo-method="post">
                     {% icon "x" class="w-6 h-6" %}
                 </a>
@@ -24,7 +24,7 @@
         </div>
     </div>
 
-    <div class="p-3 mt-auto border-t flex space-x-2 justify-between">
+    <div class="p-3 mt-auto border-t dark:border-gray-700 flex space-x-2 justify-between">
         {% if cart.total_price > user.credit and not user.is_guest %}
             <div class="w-full bg-red-600 btn text-lg cursor-not-allowed text-white">Nedostatok kreditu</div>
         {% else %}
diff --git a/sortiment/store/templates/store/_item_image.html b/sortiment/store/templates/store/_item_image.html
index 7ce2bdb..0fafde1 100644
--- a/sortiment/store/templates/store/_item_image.html
+++ b/sortiment/store/templates/store/_item_image.html
@@ -1,5 +1,5 @@
 {% load icon %}
-<div class="w-full flex items-center justify-center aspect-square rounded-md bg-white border overflow-hidden">
+<div class="w-full flex items-center justify-center aspect-square rounded-md bg-white border dark:border-gray-700 overflow-hidden">
     {% if product.image %}
         <img class="max-w-full max-h-full" src="{{ product.image.url }}" loading="lazy">
     {% else %}
diff --git a/sortiment/store/templates/store/_products_list.html b/sortiment/store/templates/store/_products_list.html
index 1fa0a67..b55c8be 100644
--- a/sortiment/store/templates/store/_products_list.html
+++ b/sortiment/store/templates/store/_products_list.html
@@ -4,12 +4,12 @@
     <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4 p-6">
     {% for p in products %}
         {% cache 3600 "product_detail" p.product.id p.global_quantity %}
-            <a class="hover:bg-gray-50 p-2 rounded-lg cursor-pointer {% if not p.product.is_unlimited and p.local_quantity <= 0 %} opacity-30 grayscale hover:opacity-100 {% endif %}" role="button" href="{% url 'store:cart_add' p.product.id %}" data-turbo-method="post" data-turbo-frame="turbo-cart" {% if forloop.first %}data-barcode-target="firstProduct"{% endif %}
+            <a class="hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded-lg cursor-pointer {% if not p.product.is_unlimited and p.local_quantity <= 0 %} opacity-30 grayscale hover:opacity-100 {% endif %}" role="button" href="{% url 'store:cart_add' p.product.id %}" data-turbo-method="post" data-turbo-frame="turbo-cart" {% if forloop.first %}data-barcode-target="firstProduct"{% endif %}
             {% if request.GET.query == p.product.barcode %}data-exact-match="1"{% endif %}>
                 {% include "store/_item_image.html" with product=p.product %}
                 <h2 class="text-lg font-bold mt-1">{{ p.product.name }}</h2>
 
-                <div class="flex text-sm text-gray-700">
+                <div class="flex text-sm text-gray-700 dark:text-gray-400">
                     <div>{{ p.product.price }}&nbsp;&euro;</div>
                     <div class="ml-auto">
                         {% if p.product.is_unlimited %}
diff --git a/sortiment/store/templates/store/cart_base.html b/sortiment/store/templates/store/cart_base.html
index 8df538e..0559b6b 100644
--- a/sortiment/store/templates/store/cart_base.html
+++ b/sortiment/store/templates/store/cart_base.html
@@ -3,9 +3,9 @@
 
 {% block content %}
 <div class="w-full h-screen flex" data-controller="menu-toggle" data-menu-toggle-toggle-class="hidden">
-    <div class="w-full hidden flex fixed inset-0 sm:relative sm:w-72 bg-gray-100 z-20 sm:shrink-0 h-screen max-h-screen border-r sm:flex flex-col"
+    <div class="w-full hidden flex fixed inset-0 sm:relative sm:w-72 bg-gray-100 dark:bg-gray-800 dark:text-gray-100 z-20 sm:shrink-0 h-screen max-h-screen border-r dark:border-gray-700 sm:flex flex-col"
         data-menu-toggle-target="menu">
-        <div class="bg-blue-600 text-white font-bold text-xl p-3 flex items-center">
+        <div class="bg-blue-600 dark:bg-blue-800 text-white dark:text-gray-300 font-bold text-xl p-3 flex items-center">
             <span>Sortiment</span>
             <button class="sm:hidden ml-auto hover:bg-black/20 p-2 text-blue-200 -m-2 rounded-full shrink-0" data-action="menu-toggle#toggleMenu">
                 {% icon "x" class="w-6 h-6" %}
@@ -31,7 +31,7 @@
         {% include "store/_cart.html" %}
     </div>
     <div class="overflow-y-auto max-h-screen flex-1">
-        <div class="bg-blue-600 text-white font-bold text-xl p-3 flex items-center sm:hidden">
+        <div class="bg-blue-600 dark:bg-blue-800 text-white font-bold text-xl p-3 flex items-center sm:hidden">
             <span>Sortiment</span>
             <button class="sm:hidden ml-auto hover:bg-black/20 p-2 text-blue-200 -m-2 rounded-full shrink-0" data-action="menu-toggle#toggleMenu">
                 {% icon "menu" class="w-6 h-6" %}
diff --git a/sortiment/store/templates/store/products.html b/sortiment/store/templates/store/products.html
index 6cba462..7b232d5 100644
--- a/sortiment/store/templates/store/products.html
+++ b/sortiment/store/templates/store/products.html
@@ -5,10 +5,10 @@
 
 {% block cartright %}
 <div data-controller="barcode">
-    <div class="sticky top-0 bg-white p-6 border-b z-10">
+    <div class="sticky top-0 bg-white dark:bg-gray-950 p-6 border-b dark:border-gray-700 z-10">
         <form action="{% url "store:product_list" %}" autocomplete="off"
         data-barcode-target="form" data-turbo-stream data-turbo-frame="turbo-products">
-            <input type="search" class="input" name="query"
+            <input type="search" class="input dark:bg-gray-700 dark:border-0 dark:text-gray-100" name="query"
                 placeholder="Načítaj čiarový kód alebo vyhladávaj podľa názvu (pridaj prvé do košíka s ENTERom)"
                 value="{{ request.GET.query }}"
                 data-barcode-target="field"
@@ -17,7 +17,7 @@
 
         <div class="mt-2 w-full flex flex-row gap-2">
             {% for tag in tags %}
-                <a href="?{% if tag.name != request.GET.tag %}tag={{ tag.name }}{% endif %}" class="rounded-md {% if tag.name == request.GET.tag %}bg-blue-600 text-white font-bold{% else %}bg-gray-200 text-gray-700{% endif %} px-2 py-1 text-sm">
+                <a href="?{% if tag.name != request.GET.tag %}tag={{ tag.name }}{% endif %}" class="rounded-md {% if tag.name == request.GET.tag %}bg-blue-600 dark:bg-blue-800 text-white font-bold{% else %}bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300{% endif %} px-2 py-1 text-sm">
                     #{{ tag.name }}
                 </a>
             {% endfor %}
diff --git a/sortiment/store/templates/store/purchase_history.html b/sortiment/store/templates/store/purchase_history.html
index b42e4f9..a08885f 100644
--- a/sortiment/store/templates/store/purchase_history.html
+++ b/sortiment/store/templates/store/purchase_history.html
@@ -36,7 +36,7 @@ <h2 class="font-bold text-2xl text-center mb-4 mt-6">História nákupov</h2>
         </div>
         {% else %}
         <div class="flex items-center gap-2">
-            <div class="w-12 h-12 shrink-0 flex items-center justify-center rounded-md bg-gray-300">
+            <div class="w-12 h-12 shrink-0 flex items-center justify-center rounded-md bg-gray-300 dark:bg-gray-700">
                 {% icon "dollar-sign" class="w-1/2 h-1/2 text-white" %}
             </div>
             <div>
diff --git a/sortiment/store/templates/store/stats.html b/sortiment/store/templates/store/stats.html
index 04ce3b4..1002d44 100644
--- a/sortiment/store/templates/store/stats.html
+++ b/sortiment/store/templates/store/stats.html
@@ -3,18 +3,19 @@
 {% block title %}Štatistiky{% endblock %}
 
 {% block content %}
-<div class="w-full min-h-screen bg-blue-600 p-8">
-    <div class="bg-white p-8 rounded-md shadow-xl">
+<div class="w-full min-h-screen bg-blue-600 dark:bg-blue-800 p-8">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+    <div class="bg-white dark:bg-gray-950 p-8 rounded-md shadow-xl">
 
-        <a class='px-4 py-2 rounded bg-gray-200 hover:bg-gray-600 hover:text-white text-xl' href="{% url 'user_list' %}">Späť</a>
+        <a class='px-4 py-2 rounded bg-gray-200 dark:bg-gray-800 hover:bg-gray-600 hover:text-white text-xl' href="{% url 'user_list' %}">Späť</a>
 
         <h1 class="font-bold text-3xl text-center m-6">Štatistiky</h1>
 
         <h1 class="font-bold text-xl text-center m-6">Hodnota tovaru</h1>
 
-        <table class="mx-auto">
+        <table class="mx-auto rounded">
             <thead>
-                <tr class="bg-blue-100">
+                <tr class="bg-blue-100 dark:bg-blue-900">
                     <th></th>
                     <th class="text-center p-4">Lokálne</th>
                     <th class="text-center p-4">Celkovo</th>
@@ -22,29 +23,33 @@ <h1 class="font-bold text-xl text-center m-6">Hodnota tovaru</h1>
             </thead>
             <tbody>
                 <tr>
-                    <th class="text-center p-4 bg-blue-100">Nákupná:</th>
+                    <th class="text-center p-4 bg-blue-100 dark:bg-blue-900">Nákupná:</th>
                     <td class="text-center p-2">{{ local_price_when_buy }}€</td>
                     <td class="text-center p-2">{{ total_price_when_buy }}€</td>
                 </tr>
                 <tr>
-                    <th class="text-center p-4 bg-blue-100">Predajná:</th>
+                    <th class="text-center p-4 bg-blue-100 dark:bg-blue-900">Predajná:</th>
                     <td class="text-center p-2">{{ local_price_for_sale }}€</td>
                     <td class="text-center p-2">{{ total_price_for_sale }}€</td>
                 </tr>
                 <tr>
-                    <th class="text-center p-4 bg-blue-100">Zisk:</th>
+                    <th class="text-center p-4 bg-blue-100 dark:bg-blue-900">Zisk:</th>
                     <td class="text-center p-2
                     {% if local_profit >= 0 %}
                         bg-green-200
+                        dark:bg-green-800
                     {% else %}
                         bg-red-200
+                        dark:bg-red-800
                     {% endif %}
                     ">{{ local_profit }}€</td>
                     <td class="text-center p-2
                     {% if total_profit >= 0 %}
                         bg-green-200
+                        dark:bg-green-800
                     {% else %}
                         bg-red-200
+                        dark:bg-red-800
                     {% endif %}
                     ">{{ total_profit }}€</td>
                 </tr>
@@ -52,16 +57,53 @@ <h1 class="font-bold text-xl text-center m-6">Hodnota tovaru</h1>
         </table>
 
         <h2 class="font-bold text-xl text-center m-3">Suma kreditov: {{ credit_sum }}€</h2>
-
-        <h2 class="font-bold text-3xl text-center m-3">Najväčší kreditori</h2>
-
-        <div class="mx-auto text-xl text-center mx-auto m-3 space-y-2">
-            {% for creditor in top_creditors %}
-                <div class="">
-                        {{ forloop.counter }}. {{ creditor.username }}
+        <hr class="dark:bg-gray-700" />
+        <div class="flex flex-wrap">
+            <div class="w-1/2">
+                <h2 class="font-bold text-3xl text-center m-3">Najväčší kreditori</h2>
+                <div class="text-xl text-center mx-auto m-3 space-y-2">
+                    {% for creditor in top_creditors %}
+                        <div class="">
+                                {{ forloop.counter }}. {{ creditor.username }}
+                        </div>
+                    {% endfor %}
                 </div>
-            {% endfor %}
+            </div>
+            <div class="w-1/2">
+                <h2 class="font-bold text-3xl text-center m-3">Najlepšie produkty</h2>
+                <h4>Posledný mesiac</h4>
+                <canvas class="text-xl text-center graph w-full" id="products_lastmonth">
+                </canvas>
+                <h4>Celý čas</h4>
+                <canvas class="text-xl text-center graph w-full" id="products_alltime">
+                </canvas>
+            </div>
+            <div class="w-1/2">
+                <h2 class="font-bold text-3xl text-center m-3">Najväčší míňači</h2>
+                <canvas class="text-xl text-center graph w-full" id="users_spending">
+                </canvas>
+            </div>
         </div>
     </div>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", async ()=> {
+            for (const graph of document.getElementsByClassName("graph")) {
+                const res = await (await fetch("/store/stats/" + graph.id + "/data")).json()
+                new Chart(graph, {
+                    type: res.type ?? 'bar',
+                    data: {
+                        labels: res['data'].map(row => row.label),
+                        datasets: [
+                            {
+                                label: res['title'],
+                                data: res['data'].map(row => row.value)
+                            }
+                        ]
+                    }
+                })
+            }
+        })
+    </script>
 </div>
 {% endblock %}
diff --git a/sortiment/store/urls.py b/sortiment/store/urls.py
index bebfef6..00ed6c7 100644
--- a/sortiment/store/urls.py
+++ b/sortiment/store/urls.py
@@ -12,6 +12,9 @@
         "purchases/", storefront.PurchaseHistoryView.as_view(), name="purchase_history"
     ),
     path("stats/", storefront.StatsView.as_view(), name="stats"),
+    path(
+        "stats/<str:graph>/data", storefront.StatsDataView.as_view(), name="stats_data"
+    ),
     path("checkout/", storefront.CheckoutView.as_view(), name="checkout"),
     path(
         "cart/<int:product>/remove/",
diff --git a/sortiment/store/views/storefront.py b/sortiment/store/views/storefront.py
index b2a2b17..57f044a 100644
--- a/sortiment/store/views/storefront.py
+++ b/sortiment/store/views/storefront.py
@@ -1,12 +1,16 @@
+import json
 from datetime import timedelta
 
 from django.contrib import messages
 from django.contrib.auth import logout
 from django.contrib.auth.mixins import LoginRequiredMixin
 from django.db import transaction
-from django.db.models import Q
+from django.db.models import F, Q
+from django.db.models.aggregates import Sum
+from django.http import HttpResponse
 from django.shortcuts import get_object_or_404, redirect, render
 from django.utils import timezone
+from django.utils.timezone import now
 from django.views import View
 from django.views.generic import TemplateView
 from users.models import CreditLog, SortimentUser
@@ -110,9 +114,78 @@ def get_context_data(self, **kwargs):
         ctx["top_creditors"] = list(
             SortimentUser.objects.filter(is_active=True).order_by("-credit")[:15]
         )
+
         return ctx
 
 
+class StatsDataView(View):
+    def get(self, request, graph):
+        warehouse = get_warehouse(self.request)
+        data = {}
+        if graph == "products_alltime":
+            data["title"] = "Počet"
+            data["type"] = "bar"
+            data["data"] = []
+            res = list(
+                WarehouseEvent.objects.filter(warehouse=warehouse, quantity__lte=0)
+                .values("product__name")
+                .annotate(total_count=Sum("quantity"))
+                .order_by("total_count")[:15]
+            )
+            for row in res:
+                data["data"].append(
+                    {
+                        "label": row["product__name"],
+                        "value": -row["total_count"],
+                    }
+                )
+        elif graph == "products_lastmonth":
+            date = now().date() - timedelta(days=30)
+            data["title"] = "Počet"
+            data["type"] = "bar"
+            data["data"] = []
+            res = list(
+                WarehouseEvent.objects.filter(
+                    warehouse=warehouse, timestamp__gte=date, quantity__lte=0
+                )
+                .values("product__name")
+                .annotate(total_count=Sum("quantity"))
+                .order_by("total_count")[:15]
+            )
+
+            for row in res:
+                data["data"].append(
+                    {
+                        "label": row["product__name"],
+                        "value": -row["total_count"],
+                    }
+                )
+
+        elif graph == "users_spending":
+            date = now().date() - timedelta(days=30)
+            data["title"] = "€"
+            data["type"] = "pie"
+            data["data"] = []
+            res = list(
+                WarehouseEvent.objects.filter(
+                    warehouse=warehouse, timestamp__gte=date, quantity__lte=0
+                )
+                .values("user__username")
+                .annotate(total_spent=Sum(F("quantity") * F("price")))
+                .order_by("total_spent")
+            )
+
+            for row in res:
+                data["data"].append(
+                    {
+                        "label": row["user__username"],
+                        "value": -float(row["total_spent"]),
+                    }
+                )
+
+        return HttpResponse(json.dumps(data), content_type="application/json")
+
+
 class CartRemoveView(LoginRequiredMixin, View):
     def post(self, request, product):
         cart = Cart(request)
diff --git a/sortiment/users/templates/_messages.html b/sortiment/users/templates/_messages.html
index 755390a..28e8b01 100644
--- a/sortiment/users/templates/_messages.html
+++ b/sortiment/users/templates/_messages.html
@@ -1,23 +1,28 @@
 {% load icon %}
 <div class="pointer-events-none fixed inset-0 flex items-start p-6 z-20">
-    <div class="flex w-full flex-col items-center space-y-4 sm:items-end" id="js-messages">
-
+    <div
+        class="flex w-full flex-col items-center space-y-4 sm:items-end"
+        id="js-messages"
+    >
         {% for message in messages %}
-            <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+            <div
+                class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg dark:bg-gray-950 dark:text-white bg-white shadow-lg ring-1 ring-black ring-opacity-5"
+            >
                 <div class="p-4">
                     <div class="flex items-center">
                         <div class="flex-shrink-0">
                             {% if message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}
-                                {% icon "check-circle" class="text-green-600" %}
-                            {% elif message.level == DEFAULT_MESSAGE_LEVELS.WARNING %}
-                                {% icon "alert-circle" class="text-amber-600" %}
-                            {% elif message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
-                                {% icon "x-circle" class="text-red-600" %}
-                            {% elif message.level == DEFAULT_MESSAGE_LEVELS.INFO %}
-                                {% icon "info" class="text-blue-600" %}
-                            {% endif %}
+                            {% icon "check-circle" class="text-green-600" %} {% elif
+                            message.level == DEFAULT_MESSAGE_LEVELS.WARNING %} {%
+                            icon "alert-circle" class="text-amber-600" %} {% elif
+                            message.level == DEFAULT_MESSAGE_LEVELS.ERROR %} {% icon
+                            "x-circle" class="text-red-600" %} {% elif message.level
+                            == DEFAULT_MESSAGE_LEVELS.INFO %} {% icon "info"
+                            class="text-blue-600" %} {% endif %}
                         </div>
-                        <div class="ml-3 flex-1 text-sm text-gray-900">
+                        <div
+                            class="ml-3 flex-1 text-sm text-gray-900 dark:text-gray-100"
+                        >
                             {{ message }}
                         </div>
                     </div>
@@ -26,7 +31,10 @@
         {% endfor %}
 
         <script>
-            setTimeout(() => document.getElementById("js-messages").innerText = "", 5000)
+            setTimeout(
+                () => (document.getElementById("js-messages").innerText = ""),
+                5000,
+            );
         </script>
     </div>
 </div>
diff --git a/sortiment/users/templates/base.html b/sortiment/users/templates/base.html
index 2cf764a..7a63a60 100644
--- a/sortiment/users/templates/base.html
+++ b/sortiment/users/templates/base.html
@@ -13,7 +13,7 @@
 
     {% block extra_head %}{% endblock extra_head %}
 </head>
-<body>
+<body class="dark:bg-gray-950 dark:text-gray-100">
     {% block content %}{% endblock %}
 
     {% include "_messages.html" %}
diff --git a/sortiment/users/templates/form/field.html b/sortiment/users/templates/form/field.html
index 2f868cb..c7d8f06 100644
--- a/sortiment/users/templates/form/field.html
+++ b/sortiment/users/templates/form/field.html
@@ -2,16 +2,16 @@
 
 <div>
 {% if field.field.widget.input_type == "checkbox" %}
-    <label class="flex items-center gap-1.5">{{ field|add_class:"checkbox" }} <span class="text-sm font-medium text-gray-700">{{ field.label }}</span></label>
+    <label class="flex items-center gap-1.5">{{ field|add_class:"checkbox" }} <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ field.label }}</span></label>
 {% elif field.field.widget.input_type == "file" %}
-    <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700">{{ field.label }}:</label>
+    <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ field.label }}:</label>
     {% render_field field class="mt-1" %}
 {% else %}
-    <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700">{{ field.label }}:</label>
+    <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ field.label }}:</label>
     {% if not field.errors %}
-        {% render_field field class="input mt-1" %}
+        {% render_field field class="input mt-1 dark:bg-gray-800 dark:border-0" %}
     {% else %}
-        {% render_field field class="input mt-1 border-red-600 placeholder-red-600" %}
+        {% render_field field class="input mt-1 border-red-600 placeholder-red-600 dark:bg-gray-800" %}
     {% endif %}
 {% endif %}
 
diff --git a/sortiment/users/templates/users/create.html b/sortiment/users/templates/users/create.html
index 4f72d95..e5afbb7 100644
--- a/sortiment/users/templates/users/create.html
+++ b/sortiment/users/templates/users/create.html
@@ -4,9 +4,9 @@
 {% block title %}Registrácia{% endblock %}
 
 {% block content %}
-<div class="w-full min-h-screen bg-blue-600 p-8">
-    <div class="bg-white p-8 rounded-md shadow-xl">
-        <a class='px-4 py-2 rounded bg-gray-200 hover:bg-gray-600 hover:text-white text-xl' href="{% url 'user_list' %}">Späť</a>
+<div class="w-full min-h-screen bg-blue-600 dark:bg-blue-800 p-8">
+    <div class="bg-white dark:bg-gray-950 dark:text-gray-50 p-8 rounded-md shadow-xl">
+        <a class='px-4 py-2 rounded bg-gray-200 dark:bg-gray-800 dark:text-gray-200 hover:bg-gray-600 hover:text-white text-xl' href="{% url 'user_list' %}">Späť</a>
 
         <h1 class="font-bold text-3xl text-center mb-6">Registrácia nového používateľa</h1>
 
@@ -18,7 +18,7 @@ <h1 class="font-bold text-3xl text-center mb-6">Registrácia nového používate
                 {% endfor %}
             </div>
             <div class="flex flex-wrap justify-center mt-2">
-                <input class='btn bg-blue-600 hover:bg-blue-700 text-white' type="submit" value="Vytvoriť">
+                <input class='btn bg-blue-600 dark:bg-blue-800 dark:text-gray-200 hover:bg-blue-700 text-white' type="submit" value="Vytvoriť">
             </div>
         </form>
     </div>
diff --git a/sortiment/users/templates/users/credit_change.html b/sortiment/users/templates/users/credit_change.html
index fada4ea..11fd13c 100644
--- a/sortiment/users/templates/users/credit_change.html
+++ b/sortiment/users/templates/users/credit_change.html
@@ -9,7 +9,7 @@ <h2 class="font-bold text-2xl text-center mb-4 mt-6">Kreditové operácie</h2>
 
     <div class="flex justify-center flex-wrap gap-1 mb-6">
         <a href="{% url 'credit_change' %}" class="btn text-sm bg-blue-600 text-white">Nabitie / výber</a>
-        <a href="{% url 'credit_movement' %}" class="btn text-sm bg-gray-200">Presun</a>
+        <a href="{% url 'credit_movement' %}" class="btn text-sm bg-gray-200 dark:bg-gray-800">Presun</a>
     </div>
 
     <form method="post" autocomplete="off">
diff --git a/sortiment/users/templates/users/credit_movement.html b/sortiment/users/templates/users/credit_movement.html
index 01ad0c6..ede3cf9 100644
--- a/sortiment/users/templates/users/credit_movement.html
+++ b/sortiment/users/templates/users/credit_movement.html
@@ -8,7 +8,7 @@
     <h2 class="font-bold text-2xl text-center mb-4 mt-6">Kreditové operácie</h2>
 
     <div class="flex justify-center flex-wrap gap-1 mb-6">
-        <a href="{% url 'credit_change' %}" class="btn text-sm bg-gray-200">Nabitie / výber</a>
+        <a href="{% url 'credit_change' %}" class="btn text-sm bg-gray-200 dark:bg-gray-800">Nabitie / výber</a>
         <a href="{% url 'credit_movement' %}" class="btn text-sm bg-blue-600 text-white">Presun</a>
     </div>
 
diff --git a/sortiment/users/templates/users/users_list.html b/sortiment/users/templates/users/users_list.html
index 7d71ce6..b358c72 100644
--- a/sortiment/users/templates/users/users_list.html
+++ b/sortiment/users/templates/users/users_list.html
@@ -7,10 +7,10 @@
 {% endblock extra_head %}
 
 {% block content %}
-<div class="w-full min-h-screen bg-blue-600 p-8">
-    <div class="bg-white p-8 rounded-md shadow-xl">
-        <a class='px-4 py-2 rounded bg-gray-200 hover:bg-gray-600 hover:text-white text-xl' href="{% url 'create' %}">Vytvor používateľa</a>
-        <a class='px-4 py-2 rounded bg-gray-200 hover:bg-gray-600 hover:text-white text-xl' href="{% url 'store:stats' %}">Štatistiky</a>
+<div class="w-full min-h-screen bg-blue-600 dark:bg-blue-800 dark:text-gray-50 p-8">
+    <div class="bg-white dark:bg-gray-950 p-8 rounded-md shadow-xl">
+        <a class='px-4 py-2 rounded bg-gray-200 dark:bg-gray-800 dark:text-gray-300 hover:bg-gray-600 dark:hover:bg-gray-400 hover:text-white text-xl' href="{% url 'create' %}">Vytvor používateľa</a>
+        <a class='px-4 py-2 rounded bg-gray-200 dark:bg-gray-800 dark:text-gray-300 hover:bg-gray-600 dark:hover:bg-gray-400 hover:text-white text-xl' href="{% url 'store:stats' %}">Štatistiky</a>
 
         <h1 class="font-bold text-3xl text-center mb-6">Sortiment</h1>
 
@@ -20,24 +20,31 @@ <h1 class="font-bold text-3xl text-center mb-6">Sortiment</h1>
 
                 {% if user.credit > 50 %}
                     bg-orange-200
+                    dark:bg-orange-800
                     hover:bg-orange-600
                 {% elif user.credit > 25 %}
                     bg-rose-200
+                    dark:bg-rose-800
                     hover:bg-rose-600
                 {% elif user.credit > 10 %}
                     bg-purple-200
+                    dark:bg-purple-800
                     hover:bg-purple-600
                 {% elif user.credit > 5 %}
                     bg-blue-200
+                    dark:bg-blue-800
                     hover:bg-blue-600
                 {% elif user.credit > 1 %}
                     bg-cyan-200
+                    dark:bg-cyan-800
                     hover:bg-cyan-600
                 {% elif user.credit > 0 %}
                     bg-green-200
+                    dark:bg-green-800
                     hover:bg-green-600
                 {% else %}
                     bg-gray-200
+                    dark:bg-gray-800
                     hover:bg-gray-600
                 {% endif %}
 
@@ -45,8 +52,8 @@ <h1 class="font-bold text-3xl text-center mb-6">Sortiment</h1>
             {% endfor %}
         </div>
 
-    <div class="text-center text-gray-700 text-sm mt-6">
-        Sortiment v{{ SORTIMENT_VERSION }} &middot; <a href="https://github.com/trojsten/sortiment" class="underline hover:text-gray-900">Je to open-source, urob si pull request.</a>
+    <div class="text-center text-gray-700 dark:text-gray-300 text-sm mt-6">
+        Sortiment v{{ SORTIMENT_VERSION }} &middot; <a href="https://github.com/trojsten/sortiment" class="underline hover:text-gray-900 dark:hover:text-gray-300">Je to open-source, urob si pull request.</a>
     </div>
     </div>
 </div>