From 5a5372b831f034d1f0b51dc2b885bd1872745b68 Mon Sep 17 00:00:00 2001
From: bronkuu <bronk.jakub@proton.me>
Date: Mon, 15 Jun 2026 18:50:21 +0200
Subject: [PATCH] templates, handlers, CSS, JS: special cakes UI, HTMX nav,
 dashboard overhaul

Special cakes UI: overlay drawer, basket integration, catalogue tag
filter, form parsing, JS save/edit/remove.
HTMX navigation: MainContent component, nav links with hx-get,
handlers return partial on HX-Request.
Dashboard: metrics grid, CakeBreakdown, OrderRow with status select,
CakeCounts/OrderCounts, torty filter, tort badge, results-pane.
Collapsible sidebar: toggle button, localStorage, CSS transitions.
Location field: dropdown replaced with pill toggle.
Inline style cleanup: moved to CSS classes (tag-grid, grow, icon.sm,
header-actions, toggle-group, success-icon, etc.).
Dead CSS removal: pagination, status-chip, badge-pill, login-page.
Helpers: exported CakeTitle/OrderTitle, added tagNames, tagIDsComma,
orderItemsDesc, specialCakeDetail, removed unused helpers.
---
 server/get.go                       | 117 +++++++--
 server/post.go                      |  80 +++++++
 server/server.go                    |   1 +
 server/static/basket.css            |   4 +
 server/static/card.css              |  31 +--
 server/static/component.css         | 353 +++++++++++++---------------
 server/static/form.css              |  34 +++
 server/static/layout.css            | 112 +++++++--
 server/static/order.js              | 200 +++++++++++++++-
 server/templates/cake.templ         |  21 +-
 server/templates/cakes.templ        |  49 +++-
 server/templates/confirmation.templ |   2 +-
 server/templates/helpers.go         |  68 +++---
 server/templates/layout.templ       |  52 +++-
 server/templates/nav.templ          |  15 +-
 server/templates/order.templ        | 111 ++++++---
 server/templates/orders.templ       | 246 ++++++++++---------
 server/templates/overlay.templ      |  79 +++++++
 18 files changed, 1153 insertions(+), 422 deletions(-)
 create mode 100644 server/templates/overlay.templ

diff --git a/server/get.go b/server/get.go
index 34fed4b..e930e6d 100644
--- a/server/get.go
+++ b/server/get.go
@@ -19,11 +19,11 @@ func weekInterval(t time.Time) (firstDay, lastDay time.Time) {
 	return monday, sunday
 }
 
-func (h *Server) orders(r *http.Request) (templ.Component, int, error) {
+func parseDateRange(r *http.Request) (first, last time.Time) {
 	now := time.Now()
 	weekFirst, weekLast := weekInterval(now)
 
-	first, last := weekFirst, weekLast
+	first, last = weekFirst, weekLast
 	if from := r.URL.Query().Get("from"); from != "" {
 		if t, err := time.Parse(config.DateFormat, from); err == nil {
 			first = t
@@ -34,23 +34,89 @@ func (h *Server) orders(r *http.Request) (templ.Component, int, error) {
 			last = t
 		}
 	}
-
-	today := now.Format(config.DateFormat)
-	tomorrow := now.AddDate(0, 0, 1).Format(config.DateFormat)
-
-	orders, err := h.s.GetOrders(first, last)
-	return templates.OrdersPage(first.Format(config.DateFormat), last.Format(config.DateFormat), today, tomorrow, orders), http.StatusOK, err
+	return
 }
 
-func (h *Server) cakes(_ *http.Request) (templ.Component, int, error) {
-	data, err := h.s.GetCakes()
-	return templates.CakesPage(data), http.StatusOK, err
+func filterOrdersWithSpecialCakes(orders []models.Order) []models.Order {
+	var out []models.Order
+	for _, o := range orders {
+		if len(o.SpecialCakes) > 0 {
+			out = append(out, o)
+		}
+	}
+	return out
+}
+
+func (h *Server) orders(r *http.Request) (templ.Component, int, error) {
+	first, last := parseDateRange(r)
+	now := time.Now()
+	today := now.Format(config.DateFormat)
+	tomorrow := now.AddDate(0, 0, 1).Format(config.DateFormat)
+	specialFilter := r.URL.Query().Get("special")
+
+	orders, err := h.s.GetOrders(first, last)
+	if err != nil {
+		return nil, http.StatusInternalServerError, err
+	}
+	if specialFilter == "true" {
+		orders = filterOrdersWithSpecialCakes(orders)
+	}
+	cakeCounts, err := h.s.GetCakeCounts(first, last)
+	if err != nil {
+		return nil, http.StatusInternalServerError, err
+	}
+
+	firstStr := first.Format(config.DateFormat)
+	lastStr := last.Format(config.DateFormat)
+
+	if r.Header.Get("HX-Target") == "main" {
+		counts, err := h.s.GetOrderCounts()
+		if err != nil {
+			return nil, http.StatusInternalServerError, err
+		}
+		return templates.MainContent("Panel główny", templates.DateForm(firstStr, lastStr, today, tomorrow, specialFilter), templates.OrdersMain(counts, cakeCounts, orders, firstStr, lastStr, specialFilter)), http.StatusOK, nil
+	}
+
+	if r.Header.Get("HX-Request") == "true" {
+		return templates.OrdersContent(orders, cakeCounts, firstStr, lastStr, specialFilter), http.StatusOK, nil
+	}
+
+	counts, err := h.s.GetOrderCounts()
+	if err != nil {
+		return nil, http.StatusInternalServerError, err
+	}
+
+	return templates.OrdersPage(firstStr, lastStr, today, tomorrow, specialFilter, counts, cakeCounts, orders), http.StatusOK, nil
+}
+
+func (h *Server) cakes(r *http.Request) (templ.Component, int, error) {
+	cakes, err := h.s.GetCakes()
+	if err != nil {
+		return nil, http.StatusInternalServerError, err
+	}
+	tags, err := h.s.GetTags()
+	if err != nil {
+		return nil, http.StatusInternalServerError, err
+	}
+
+	if r.Header.Get("HX-Request") == "true" {
+		return templates.MainContent("Katalog", templ.NopComponent, templates.CakesMain(cakes, tags)), http.StatusOK, nil
+	}
+
+	return templates.CakesPage(cakes, tags), http.StatusOK, nil
 }
 
 func (h *Server) cake(r *http.Request) (templ.Component, int, error) {
 	url := strings.Split(r.URL.Path, "/")
 	if len(url) < 3 || url[2] == "" {
-		return templates.CakePage(models.Cake{}), http.StatusOK, nil
+		tags, err := h.s.GetTags()
+		if err != nil {
+			return nil, http.StatusInternalServerError, err
+		}
+		if r.Header.Get("HX-Request") == "true" {
+			return templates.MainContent("Ciasto nowe", templ.NopComponent, templates.CakeForm(models.Cake{}, tags)), http.StatusOK, nil
+		}
+		return templates.CakePage(models.Cake{}, tags), http.StatusOK, nil
 	}
 
 	id, err := strconv.Atoi(url[2])
@@ -63,19 +129,34 @@ func (h *Server) cake(r *http.Request) (templ.Component, int, error) {
 		return nil, http.StatusNotFound, err
 	}
 
-	return templates.CakePage(data), http.StatusOK, nil
+	tags, err := h.s.GetTags()
+	if err != nil {
+		return nil, http.StatusInternalServerError, err
+	}
+
+	if r.Header.Get("HX-Request") == "true" {
+		return templates.MainContent(templates.CakeTitle(data), templ.NopComponent, templates.CakeForm(data, tags)), http.StatusOK, nil
+	}
+
+	return templates.CakePage(data, tags), http.StatusOK, nil
 }
 
 func (h *Server) order(r *http.Request) (templ.Component, int, error) {
-	var err error
 	catalogue, err := h.s.GetCakes()
 	if err != nil {
 		return nil, http.StatusInternalServerError, err
 	}
+	tags, err := h.s.GetTags()
+	if err != nil {
+		return nil, http.StatusInternalServerError, err
+	}
 
 	url := strings.Split(r.URL.Path, "/")
 	if len(url) < 3 || url[2] == "" {
-		return templates.OrderPage(models.Order{Date: time.Now()}, catalogue), http.StatusOK, nil
+		if r.Header.Get("HX-Request") == "true" {
+			return templates.MainContent("Nowe zamówienie", templ.NopComponent, templates.OrderForm(models.Order{Date: time.Now()}, catalogue, tags)), http.StatusOK, nil
+		}
+		return templates.OrderPage(models.Order{Date: time.Now()}, catalogue, tags), http.StatusOK, nil
 	}
 
 	id, err := strconv.Atoi(url[2])
@@ -88,5 +169,9 @@ func (h *Server) order(r *http.Request) (templ.Component, int, error) {
 		return nil, http.StatusNotFound, err
 	}
 
-	return templates.OrderPage(order, catalogue), http.StatusOK, nil
+	if r.Header.Get("HX-Request") == "true" {
+		return templates.MainContent(templates.OrderTitle(order), templ.NopComponent, templates.OrderForm(order, catalogue, tags)), http.StatusOK, nil
+	}
+
+	return templates.OrderPage(order, catalogue, tags), http.StatusOK, nil
 }
diff --git a/server/post.go b/server/post.go
index dde7f04..fca74c3 100644
--- a/server/post.go
+++ b/server/post.go
@@ -29,6 +29,22 @@ func (h *Server) postCake(r *http.Request) (templ.Component, int, error) {
 	if err != nil {
 		return nil, http.StatusBadRequest, err
 	}
+
+	for _, idStr := range r.Form["tag"] {
+		tagID, err := strconv.Atoi(idStr)
+		if err != nil {
+			continue
+		}
+		n.Tags = append(n.Tags, models.Tag{ID: tagID})
+	}
+	if newTag := strings.TrimSpace(r.FormValue("new_tag")); newTag != "" {
+		tagID, err := h.s.CreateTag(newTag)
+		if err != nil {
+			return nil, http.StatusInternalServerError, err
+		}
+		n.Tags = append(n.Tags, models.Tag{ID: tagID, Name: newTag})
+	}
+
 	n.ID, err = h.s.SaveCake(n)
 	return templates.Confirmation("Potwierdzone", n.ID), http.StatusAccepted, err
 }
@@ -67,6 +83,47 @@ func (h *Server) postOrder(r *http.Request) (templ.Component, int, error) {
 		n.Cakes = append(n.Cakes, e)
 	}
 
+	specialNames := r.Form["special_name[]"]
+	specialPrices := r.Form["special_price[]"]
+	specialSizes := r.Form["special_size[]"]
+	specialShapes := r.Form["special_shape[]"]
+	specialFlavours := r.Form["special_flavour[]"]
+	specialNotes := r.Form["special_notes[]"]
+	specialTags := r.Form["special_tags[]"]
+	specialNewTags := r.Form["special_new_tag[]"]
+	for i := range specialNames {
+		price, err := models.ParsePrice(specialPrices[i])
+		if err != nil {
+			continue
+		}
+
+		var tags []models.Tag
+		if i < len(specialTags) && specialTags[i] != "" {
+			for _, idStr := range strings.Split(specialTags[i], ",") {
+				id, err := strconv.Atoi(strings.TrimSpace(idStr))
+				if err == nil {
+					tags = append(tags, models.Tag{ID: id})
+				}
+			}
+		}
+		if newTag := strings.TrimSpace(safeStr(specialNewTags, i)); newTag != "" {
+			tagID, err := h.s.CreateTag(newTag)
+			if err == nil {
+				tags = append(tags, models.Tag{ID: tagID, Name: newTag})
+			}
+		}
+
+		n.SpecialCakes = append(n.SpecialCakes, models.SpecialCake{
+			Name:    specialNames[i],
+			Price:   price,
+			Size:    safeStr(specialSizes, i),
+			Shape:   safeStr(specialShapes, i),
+			Flavour: safeStr(specialFlavours, i),
+			Notes:   safeStr(specialNotes, i),
+			Tags:    tags,
+		})
+	}
+
 	n.Accepted = time.Now()
 	n.Name = strings.TrimSpace(r.FormValue("name"))
 	n.Surname = strings.TrimSpace(r.FormValue("surname"))
@@ -77,3 +134,26 @@ func (h *Server) postOrder(r *http.Request) (templ.Component, int, error) {
 	n.ID, err = h.s.SaveOrder(n)
 	return templates.Confirmation("Potwierdzone", n.ID), http.StatusAccepted, err
 }
+
+func safeStr(s []string, i int) string {
+	if i < len(s) {
+		return s[i]
+	}
+	return ""
+}
+
+func (h *Server) updateStatus(r *http.Request) (templ.Component, int, error) {
+	id, err := strconv.Atoi(r.PathValue("id"))
+	if err != nil {
+		return nil, http.StatusBadRequest, err
+	}
+	order, err := h.s.GetOrder(id)
+	if err != nil {
+		return nil, http.StatusNotFound, err
+	}
+	order.Status = r.FormValue("status")
+	if _, err := h.s.SaveOrder(order); err != nil {
+		return nil, http.StatusInternalServerError, err
+	}
+	return templates.OrderRow(order), http.StatusOK, nil
+}
diff --git a/server/server.go b/server/server.go
index babbe4a..92ddd77 100644
--- a/server/server.go
+++ b/server/server.go
@@ -36,6 +36,7 @@ func New(store *store.Store) *Server {
 	mux.HandleFunc("GET /cake/", server.render(server.cake))
 	mux.HandleFunc("GET /cakes", server.render(server.cakes))
 	mux.HandleFunc("POST /order/", server.render(server.postOrder))
+	mux.HandleFunc("POST /order/{id}/status", server.render(server.updateStatus))
 	mux.HandleFunc("POST /cake/", server.render(server.postCake))
 
 	fs := http.FileServerFS(static)
diff --git a/server/static/basket.css b/server/static/basket.css
index 381d178..65d4d36 100644
--- a/server/static/basket.css
+++ b/server/static/basket.css
@@ -42,6 +42,10 @@
             white-space: nowrap;
         }
 
+        .basket-actions .action-btn .material-symbols-outlined {
+            font-size: 1rem;
+        }
+
         .remove {
             color: var(--error);
             cursor: pointer;
diff --git a/server/static/card.css b/server/static/card.css
index 06b27c1..3ab5d76 100644
--- a/server/static/card.css
+++ b/server/static/card.css
@@ -55,7 +55,7 @@
 /* ========== METRICS GRID ========== */
 .metrics-grid {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(2, 1fr);
     gap: 0.75rem;
 
     > div {
@@ -128,21 +128,21 @@
     gap: 1rem;
     flex: 1;
     min-height: 0;
+}
 
-    > div:first-child {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        min-width: 0;
-    }
+.order-left {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    min-width: 0;
+}
 
-    > aside {
-        width: 20rem;
-        flex-shrink: 0;
-        display: flex;
-        flex-direction: column;
-    }
+.order-aside {
+    width: 20rem;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
 }
 
 @media (max-width: 64em) {
@@ -150,7 +150,7 @@
         flex-direction: column;
     }
 
-    .split-pane > aside {
+    .order-aside {
         width: 100%;
     }
 }
@@ -237,5 +237,6 @@
 
     .text-muted {
         color: var(--on-surface-variant);
+        font-weight: 400;
     }
 }
diff --git a/server/static/component.css b/server/static/component.css
index 9255f4b..9bced30 100644
--- a/server/static/component.css
+++ b/server/static/component.css
@@ -60,61 +60,31 @@
     }
 }
 
-/* ========== STATUS CHIPS ========== */
-.status-chip {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.25rem 0.5rem;
-    border-radius: var(--border-radius-full);
-    font-size: 0.75rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.02em;
-
-    &.ready,
-    &.done {
-        background: var(--success-bg);
-        color: var(--success-text);
-    }
-
-    &.decorating {
-        background: var(--warning-bg);
-        color: var(--warning-text);
-    }
-
-    &.baking {
-        background: var(--danger-bg);
-        color: var(--danger-text);
-    }
-
-    &.queued {
-        background: var(--info-bg);
-        color: var(--info-text);
-    }
-
-    &.accepted {
-        background: #fff3e0;
-        color: #e65100;
-    }
-}
-
-/* ========== BADGE PILLS ========== */
-.badge-pill {
+/* ========== TAG CHIPS ========== */
+.tag-chip {
     display: inline-flex;
     align-items: center;
     padding: 0.25rem 0.5rem;
     border-radius: var(--border-radius-full);
     font-size: 0.75rem;
     font-weight: 600;
+    color: var(--on-surface-variant);
+    background: var(--surface-container-high);
+    border: 1px solid var(--outline-variant);
+    cursor: pointer;
+    user-select: none;
+    transition: all var(--transition);
 
-    &.signature {
-        background: var(--primary-container);
-        color: var(--primary);
+    &.sm {
+        font-size: 0.625rem;
+        padding: 0.125rem 0.375rem;
     }
 
-    &.seasonal {
-        background: var(--surface-container-high);
-        color: var(--on-surface);
+    &:hover,
+    &.active {
+        color: var(--primary);
+        border-color: var(--primary);
+        background: var(--primary-container);
     }
 }
 
@@ -138,46 +108,154 @@
     }
 }
 
-/* ========== PAGINATION ========== */
-.pagination {
-    display: flex;
-    gap: 0.25rem;
-    align-items: center;
-
-    .btn {
-        width: 1.5rem;
-        height: 1.5rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border: 1px solid var(--outline-variant);
-        border-radius: var(--border-radius-sm);
-        background: transparent;
-        cursor: pointer;
-        color: var(--on-surface-variant);
-        transition: all var(--transition);
-        font-size: 0.75rem;
-
-        &:hover {
-            background: var(--surface-container-low);
-        }
-
-        &:disabled {
-            opacity: 0.5;
-            cursor: default;
-        }
-
-        &.active {
-            background: var(--primary);
-            color: var(--on-primary);
-            border-color: var(--primary);
-        }
-
-        .material-symbols-outlined {
-            font-size: 1rem;
-        }
-    }
+/* ========== OVERLAY / DRAWER ========== */
+.overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: none;
 }
+.overlay.open {
+    display: flex;
+    justify-content: flex-end;
+}
+.overlay-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.3);
+}
+.overlay-panel {
+    position: relative;
+    width: 22rem;
+    max-width: 100vw;
+    height: 100%;
+    background: var(--surface);
+    display: flex;
+    flex-direction: column;
+    box-shadow: -0.25rem 0 1.5rem rgba(0, 0, 0, 0.15);
+    animation: slideIn 0.2s ease;
+}
+@keyframes slideIn {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+}
+.overlay-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid var(--outline-variant);
+}
+.overlay-header h2 {
+    font-size: 1rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.overlay-header .close-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--on-surface-variant);
+    padding: 0.25rem;
+    border-radius: var(--border-radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.overlay-header .close-btn:hover {
+    background: var(--surface-container-high);
+    color: var(--on-surface);
+}
+.overlay-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1.25rem;
+}
+.overlay-footer {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: flex-end;
+    padding: 1rem 1.25rem;
+    border-top: 1px solid var(--outline-variant);
+}
+
+/* ========== CARD HEADER ACTIONS ========== */
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+/* ========== TORT BADGE ========== */
+.tort-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: var(--border-radius-full);
+    background: var(--primary-container);
+    color: var(--primary);
+    flex-shrink: 0;
+    vertical-align: middle;
+    margin-right: 0.25rem;
+}
+.tort-badge .material-symbols-outlined {
+    font-size: 0.75rem;
+}
+
+/* ========== SEARCH INPUT UTILITY ========== */
+.search-wrapper { position: relative; width: 11.25rem; }
+.search-icon { position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 1rem; color: var(--on-surface-variant); pointer-events: none; }
+.search-input { height: 1.75rem; padding-left: 1.75rem; padding-right: 0.5rem; font-size: 0.75rem; border: 1px solid var(--outline-variant); border-radius: var(--border-radius-sm); background: var(--surface-container-lowest); color: var(--on-surface); outline: none; width: 100%; }
+
+/* ========== STATUS SELECT ========== */
+.status-select { font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.375rem; border: 1px solid var(--outline-variant); border-radius: var(--border-radius-sm); background: var(--surface); color: var(--on-surface); cursor: pointer; }
+
+/* ========== FONT UTILITIES ========== */
+.font-bold { font-weight: 700; }
+
+/* ========== CAKE BREAKDOWN LIST ========== */
+.breakdown-list { list-style: none; padding: 0; margin: 0; }
+.breakdown-item { display: flex; justify-content: space-between; padding: 0.375rem 0; border-bottom: 1px solid var(--outline-variant); }
+.breakdown-amount { font-weight: 600; }
+.breakdown-empty { color: var(--on-surface-variant); font-size: 0.75rem; }
+
+/* ========== FILTER BAR (catalogue/cakes page) ========== */
+.filter-bar { padding: 0.5rem 1rem; border-bottom: 1px solid var(--outline-variant); display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
+.filter-bar .filter-label { font-size: 0.75rem; font-weight: 600; color: var(--on-surface-variant); align-self: center; margin-right: 0.25rem; }
+
+/* ========== CATALOGUE TAG ROW ========== */
+.tag-row { padding: 0.5rem 1rem 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
+
+/* ========== CATALOGUE SCROLL ========== */
+.catalogue-scroll { overflow-y: auto; padding: 1rem; }
+
+/* ========== BASKET ACTIONS ========== */
+.basket-actions { display: flex; flex-direction: column; gap: 0.125rem; }
+
+/* ========== TAG GROUP ========== */
+.tag-group { margin-top: 0.25rem; display: flex; flex-wrap: wrap; gap: 0.125rem; }
+
+/* ========== OVERLAY FORM ========== */
+.overlay-form { display: flex; flex-direction: column; gap: 0.75rem; }
+
+/* ========== TAG CONTAINER ========== */
+.tag-grid { display: flex; flex-wrap: wrap; gap: 0.25rem; }
+
+/* ========== FONT UTILITIES ========== */
+.font-medium { font-weight: 500; }
+
+/* ========== FLEX UTILITIES ========== */
+.grow { flex: 1; }
+
+.icon.sm { width: 1.75rem; height: 1.75rem; }
+.icon.sm .material-symbols-outlined { font-size: 1rem; }
+
+/* ========== RESULTS PANE ========== */
+#results-pane { display: flex; flex-direction: column; gap: 1rem; }
 
 /* ========== CONFIRMATION ========== */
 section.confirmation {
@@ -189,109 +267,14 @@ section.confirmation {
     gap: 0.5rem;
     text-align: center;
 
+    .success-icon {
+        font-size: 3rem;
+        color: var(--success-text);
+    }
+
     h2 {
         font-size: 1.25rem;
         font-weight: 600;
         color: var(--on-surface);
     }
 }
-
-/* ========== LOGIN PAGE ========== */
-.login-page {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100dvh;
-    background-color: var(--surface-container-low);
-}
-
-.login-card {
-    background-color: var(--surface);
-    border: 1px solid var(--outline-variant);
-    border-radius: var(--border-radius-md);
-    padding: 2.5rem;
-    box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.1);
-    width: 100%;
-    max-width: 25rem;
-    position: relative;
-    overflow: hidden;
-
-    &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 0.25rem;
-        background: linear-gradient(
-            90deg,
-            var(--primary),
-            var(--primary-container)
-        );
-    }
-
-    .icon {
-        display: flex;
-        justify-content: center;
-        margin-bottom: 1.5rem;
-        color: var(--primary);
-    }
-
-    h1 {
-        font-size: 1.5rem;
-        font-weight: 700;
-        margin-bottom: 1.5rem;
-        color: var(--on-background);
-        text-align: center;
-        letter-spacing: -0.02em;
-    }
-
-    form {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-    }
-
-    label {
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
-        font-size: 0.75rem;
-        font-weight: 600;
-        color: var(--on-surface-variant);
-    }
-
-    input {
-        padding: 0.5rem 0.75rem;
-        border: 1px solid var(--outline-variant);
-        border-radius: var(--border-radius-sm);
-        font-size: 1rem;
-        font-family: inherit;
-        background-color: var(--surface);
-        color: var(--on-surface);
-        transition: border-color var(--transition);
-
-        &:focus {
-            outline: none;
-            border-color: var(--primary);
-        }
-    }
-
-    button {
-        padding: 0.5rem 2rem;
-        background-color: var(--primary);
-        color: #fff;
-        border: none;
-        border-radius: var(--border-radius-md);
-        font-size: 1rem;
-        font-weight: 600;
-        font-family: inherit;
-        cursor: pointer;
-        transition: opacity var(--transition);
-        margin-top: 0.5rem;
-
-        &:hover {
-            opacity: 0.9;
-        }
-    }
-}
diff --git a/server/static/form.css b/server/static/form.css
index 007a65a..69581d7 100644
--- a/server/static/form.css
+++ b/server/static/form.css
@@ -81,6 +81,40 @@ form {
     }
 }
 
+/* ========== TOGGLE GROUP ========== */
+.toggle-group {
+    display: flex;
+    height: 2rem;
+    border-radius: var(--border-radius-sm);
+    border: 1px solid var(--outline-variant);
+    overflow: hidden;
+}
+
+.toggle-btn {
+    flex: 1;
+    border: none;
+    background: var(--surface-container-lowest);
+    color: var(--on-surface-variant);
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition);
+    padding: 0 0.5rem;
+}
+
+.toggle-btn:not(:last-child) {
+    border-right: 1px solid var(--outline-variant);
+}
+
+.toggle-btn.active {
+    background: var(--primary);
+    color: var(--on-primary);
+}
+
+.toggle-btn:not(.active):hover {
+    background: var(--surface-container-high);
+}
+
 .form-actions {
     display: flex;
     justify-content: flex-end;
diff --git a/server/static/layout.css b/server/static/layout.css
index b91203d..027d0fc 100644
--- a/server/static/layout.css
+++ b/server/static/layout.css
@@ -11,23 +11,54 @@ aside.sidebar {
     flex-direction: column;
     padding: 1rem;
     z-index: 40;
+    transition: width 0.2s ease, padding 0.2s ease;
 
     .brand {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
         margin-bottom: 1.5rem;
         padding: 0 0.5rem;
 
-        h1 {
-            font-size: 1.25rem;
-            font-weight: 700;
-            color: var(--primary);
-            letter-spacing: -0.01em;
-            line-height: 1.3;
+        .collapse-btn {
+            background: none;
+            border: none;
+            cursor: pointer;
+            color: var(--on-surface-variant);
+            padding: 0.25rem;
+            border-radius: var(--border-radius-sm);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+
+            &:hover {
+                background: var(--surface-container-high);
+                color: var(--on-surface);
+            }
+
+            .material-symbols-outlined {
+                font-size: 1.25rem;
+            }
         }
 
-        p {
-            font-size: 0.75rem;
-            color: var(--on-surface-variant);
-            margin-top: 0.25rem;
+        .brand-text {
+            overflow: hidden;
+            white-space: nowrap;
+
+            h1 {
+                font-size: 1.25rem;
+                font-weight: 700;
+                color: var(--primary);
+                letter-spacing: -0.01em;
+                line-height: 1.3;
+            }
+
+            p {
+                font-size: 0.75rem;
+                color: var(--on-surface-variant);
+                margin-top: 0.25rem;
+            }
         }
     }
 
@@ -140,6 +171,47 @@ aside.sidebar {
     }
 }
 
+/* ---------- COLLAPSED ---------- */
+body.sidebar-collapsed aside.sidebar {
+    width: 3.5rem;
+    padding: 0.5rem;
+
+    .brand .brand-text {
+        display: none;
+    }
+
+    .cta {
+        padding: 0;
+        width: 2.5rem;
+        height: 2.5rem;
+        margin-left: auto;
+        margin-right: auto;
+        border-radius: 50%;
+
+        span:not(.material-symbols-outlined) {
+            display: none;
+        }
+    }
+
+    nav a.link {
+        justify-content: center;
+        padding: 0.75rem 0.5rem;
+
+        span:not(.material-symbols-outlined) {
+            display: none;
+        }
+    }
+
+    footer .user .info {
+        display: none;
+    }
+}
+
+body.sidebar-collapsed main {
+    margin-left: 3.5rem;
+    width: calc(100% - 3.5rem);
+}
+
 /* ========== MAIN LAYOUT ========== */
 main {
     margin-left: var(--sidebar-width);
@@ -147,6 +219,7 @@ main {
     display: flex;
     flex-direction: column;
     height: 100dvh;
+    transition: margin-left 0.2s ease, width 0.2s ease;
 }
 
 /* ========== TOP NAVBAR ========== */
@@ -228,14 +301,13 @@ header.topnav {
 }
 
 @media (max-width: 48em) {
-    aside.sidebar {
+    body:not(.sidebar-collapsed) aside.sidebar {
         width: 3.5rem;
         padding: 0.5rem;
 
-        .brand h1,
-        .brand p,
-        nav a.link span:not(.material-symbols-outlined),
+        .brand .brand-text,
         .cta span:not(.material-symbols-outlined),
+        nav a.link span:not(.material-symbols-outlined),
         .user .info {
             display: none;
         }
@@ -258,6 +330,18 @@ header.topnav {
         }
     }
 
+    body.sidebar-collapsed aside.sidebar {
+        width: 0;
+        padding: 0;
+        overflow: hidden;
+        border-right: none;
+    }
+
+    body.sidebar-collapsed main {
+        margin-left: 0;
+        width: 100%;
+    }
+
     main {
         margin-left: 3.5rem;
         width: calc(100% - 3.5rem);
diff --git a/server/static/order.js b/server/static/order.js
index 48df069..dd2c912 100644
--- a/server/static/order.js
+++ b/server/static/order.js
@@ -1,3 +1,144 @@
+var editingSpecialId = null;
+
+function openSpecialCakeOverlay() {
+  editingSpecialId = null;
+  document.getElementById("sc-overlay-title").textContent = "Dodaj tort specjalny";
+  document.getElementById("sc-name").value = "";
+  document.getElementById("sc-price").value = "";
+  document.getElementById("sc-size").value = "";
+  document.getElementById("sc-shape").value = "";
+  document.getElementById("sc-flavour").value = "";
+  document.getElementById("sc-notes").value = "";
+  document.getElementById("sc-new-tag").value = "";
+  var cbs = document.querySelectorAll(".sc-tag-cb");
+  for (var i = 0; i < cbs.length; i++) cbs[i].checked = false;
+  document.getElementById("sc-overlay").classList.add("open");
+  document.getElementById("sc-name").focus();
+}
+
+function closeSpecialCakeOverlay() {
+  document.getElementById("sc-overlay").classList.remove("open");
+  editingSpecialId = null;
+}
+
+function getOverlayFormData() {
+  return {
+    name: document.getElementById("sc-name").value.trim(),
+    price: document.getElementById("sc-price").value,
+    size: document.getElementById("sc-size").value.trim(),
+    shape: document.getElementById("sc-shape").value,
+    flavour: document.getElementById("sc-flavour").value.trim(),
+    notes: document.getElementById("sc-notes").value.trim(),
+    tagIds: (function() {
+      var ids = [];
+      var cbs = document.querySelectorAll(".sc-tag-cb:checked");
+      for (var i = 0; i < cbs.length; i++) ids.push(cbs[i].value);
+      return ids;
+    })(),
+    tagNames: (function() {
+      var names = [];
+      var cbs = document.querySelectorAll(".sc-tag-cb:checked");
+      for (var i = 0; i < cbs.length; i++)
+        names.push(cbs[i].closest(".tag-chip").textContent.trim());
+      return names;
+    })(),
+    newTag: document.getElementById("sc-new-tag").value.trim()
+  };
+}
+
+function buildSpecialCakeHTML(d) {
+  var parts = [];
+  if (d.size) parts.push(d.size);
+  if (d.flavour) parts.push(d.flavour);
+  if (d.shape === "round") parts.push("okragly");
+  else if (d.shape === "square") parts.push("kwadrat");
+  if (d.notes) parts.push("notatka: " + d.notes);
+  var detail = parts.length ? parts.join(", ") : "";
+  var tagHtml = d.tagNames.length > 0 || d.newTag ? '<div style="margin-top:0.25rem;display:flex;flex-wrap:wrap;gap:0.125rem">' : "";
+  for (var i = 0; i < d.tagNames.length; i++)
+    tagHtml += '<span class="tag-chip" style="font-size:0.625rem;padding:0.125rem 0.375rem">' + d.tagNames[i] + "</span>";
+  if (d.newTag)
+    tagHtml += '<span class="tag-chip" style="font-size:0.625rem;padding:0.125rem 0.375rem">' + d.newTag + "</span>";
+  if (d.tagNames.length > 0 || d.newTag) tagHtml += "</div>";
+  var priceVal = Number(d.price).toFixed(2);
+  var tagIdsStr = d.tagIds.join(",");
+  var html =
+    '<div style="flex:1;min-width:0;padding-right:0.5rem">' +
+    '<div class="name">' + d.name + '</div>' +
+    '<div class="detail">' + detail + '</div>' +
+    tagHtml +
+    '</div>' +
+    '<div class="price">' + priceVal + ' PLN</div>' +
+    '<div style="display:flex;flex-direction:column;gap:0.125rem">' +
+    '<button type="button" class="action-btn" onclick="editSpecialCake(this)" title="Edytuj">' +
+    '<span class="material-symbols-outlined" style="font-size:1rem">edit</span></button>' +
+    '<button type="button" class="remove" onclick="removeSpecialCake(this)" title="Usuń">' +
+    '<span class="material-symbols-outlined" style="font-size:1rem">close</span></button>' +
+    '</div>' +
+    '<input type="hidden" name="special_name[]" value="' + d.name + '">' +
+    '<input type="hidden" name="special_price[]" value="' + d.price + '">' +
+    '<input type="hidden" name="special_size[]" value="' + d.size + '">' +
+    '<input type="hidden" name="special_shape[]" value="' + d.shape + '">' +
+    '<input type="hidden" name="special_flavour[]" value="' + d.flavour + '">' +
+    '<input type="hidden" name="special_notes[]" value="' + d.notes + '">' +
+    '<input type="hidden" name="special_tags[]" value="' + tagIdsStr + '">';
+  if (d.newTag)
+    html += '<input type="hidden" name="special_new_tag[]" value="' + d.newTag + '">';
+  return html;
+}
+
+function saveSpecialCake() {
+  var d = getOverlayFormData();
+  if (!d.name) return;
+  if (editingSpecialId) {
+    var item = document.querySelector('#basket-items li[data-special-id="' + editingSpecialId + '"]');
+    if (item) {
+      item.innerHTML = buildSpecialCakeHTML(d);
+    }
+  } else {
+    d.id = Date.now();
+    var item = document.createElement("li");
+    item.setAttribute("data-special-id", d.id);
+    item.innerHTML = buildSpecialCakeHTML(d);
+    document.getElementById("basket-items").appendChild(item);
+  }
+  closeSpecialCakeOverlay();
+  updateTotals();
+}
+
+function editSpecialCake(btn) {
+  var item = btn.closest("li");
+  var id = item.getAttribute("data-special-id");
+  editingSpecialId = id;
+  document.getElementById("sc-overlay-title").textContent = "Edytuj tort specjalny";
+  var hidden = item.querySelectorAll('input[type="hidden"]');
+  var vals = {};
+  for (var i = 0; i < hidden.length; i++) {
+    var name = hidden[i].getAttribute("name");
+    vals[name] = hidden[i].value;
+  }
+  document.getElementById("sc-name").value = vals["special_name[]"] || "";
+  document.getElementById("sc-price").value = vals["special_price[]"] || "";
+  document.getElementById("sc-size").value = vals["special_size[]"] || "";
+  document.getElementById("sc-shape").value = vals["special_shape[]"] || "";
+  document.getElementById("sc-flavour").value = vals["special_flavour[]"] || "";
+  document.getElementById("sc-notes").value = vals["special_notes[]"] || "";
+  var currentTagIds = (vals["special_tags[]"] || "").split(",").filter(function(x) { return x; });
+  document.getElementById("sc-new-tag").value = "";
+  var cbs = document.querySelectorAll(".sc-tag-cb");
+  for (var i = 0; i < cbs.length; i++) {
+    cbs[i].checked = currentTagIds.indexOf(cbs[i].value) >= 0;
+  }
+  document.getElementById("sc-overlay").classList.add("open");
+  document.getElementById("sc-name").focus();
+}
+
+function removeSpecialCake(btn) {
+  var item = btn.closest("li");
+  item.remove();
+  updateTotals();
+}
+
 function changeCake(id, name, price, delta) {
   var input = document.querySelector('[name="cake[' + id + ']"]');
   if (input != null) {
@@ -55,20 +196,24 @@ var subtotal = 0;
 
 function updatePrepaid() {
   var paid = Number(document.querySelector('[name="paid"]')?.value || 0);
-  document.getElementById("paid-amount").innerText = paid + " PLN";
-  document.getElementById("total-price").innerText = subtotal - paid + " PLN";
+  document.getElementById("paid-amount").innerText = paid.toFixed(2) + " PLN";
+  document.getElementById("total-price").innerText = (subtotal - paid).toFixed(2) + " PLN";
 }
 
 function updateTotals() {
   subtotal = 0;
   var items = document.querySelectorAll("#basket-items li");
   items.forEach(function (item) {
-    var priceText = item.querySelector(".detail").innerText;
+    var priceText = item.querySelector(".price").innerText;
     var price = Number(priceText.split(" ")[0]);
-    var qty = Number(item.querySelector(".qty").innerText);
-    subtotal += price * qty;
+    if (item.hasAttribute("data-special-id")) {
+      subtotal += price;
+    } else {
+      var qty = Number(item.querySelector(".qty").innerText);
+      subtotal += price * qty;
+    }
   });
-  document.getElementById("subtotal-price").innerText = subtotal + " PLN";
+  document.getElementById("subtotal-price").innerText = subtotal.toFixed(2) + " PLN";
   updatePrepaid();
 }
 
@@ -77,11 +222,48 @@ function updateCatalogueQty(id, qty) {
   if (el) el.innerText = qty;
 }
 
-function filterCatalogue(input) {
-  var query = input.value.toLowerCase();
+var activeCatalogueTags = [];
+
+function toggleCatalogueTagFilter(btn) {
+  var tag = btn.getAttribute("data-tag");
+  var idx = activeCatalogueTags.indexOf(tag);
+  if (idx >= 0) {
+    activeCatalogueTags.splice(idx, 1);
+    btn.classList.remove("active");
+  } else {
+    activeCatalogueTags.push(tag);
+    btn.classList.add("active");
+  }
+  applyCatalogueFilters();
+}
+
+function getCatalogueTextQuery() {
+  var input = document.querySelector(
+    '#catalogue-grid').closest('.card').querySelector('input[type="text"]'
+  );
+  return input ? input.value.toLowerCase() : "";
+}
+
+function applyCatalogueFilters() {
+  var query = getCatalogueTextQuery();
   var items = document.querySelectorAll("#catalogue-grid > li");
   items.forEach(function (item) {
     var name = item.getAttribute("data-name").toLowerCase();
-    item.style.display = name.includes(query) ? "" : "none";
+    var matchesText = name.includes(query);
+    var matchesTags = true;
+    if (activeCatalogueTags.length > 0) {
+      var itemTags = (item.getAttribute("data-tags") || "").split(",");
+      for (var i = 0; i < activeCatalogueTags.length; i++) {
+        if (itemTags.indexOf(activeCatalogueTags[i]) < 0) {
+          matchesTags = false;
+          break;
+        }
+      }
+    }
+    item.style.display = matchesText && matchesTags ? "" : "none";
   });
 }
+
+function filterCatalogue(input) {
+  applyCatalogueFilters();
+}
diff --git a/server/templates/cake.templ b/server/templates/cake.templ
index 3a3cc8e..d49edfb 100644
--- a/server/templates/cake.templ
+++ b/server/templates/cake.templ
@@ -6,11 +6,11 @@ import (
 	"git.bronku.xyz/bronku/cake-order-tracker/models"
 )
 
-templ CakePage(cake models.Cake) {
-	@Layout(cakeTitle(cake), templ.NopComponent, CakeForm(cake))
+templ CakePage(cake models.Cake, allTags []models.Tag) {
+	@Layout(CakeTitle(cake), templ.NopComponent, CakeForm(cake, allTags))
 }
 
-templ CakeForm(cake models.Cake) {
+templ CakeForm(cake models.Cake, allTags []models.Tag) {
 	<div class="form-card">
 		<section class="card">
 			<header>
@@ -33,6 +33,21 @@ templ CakeForm(cake models.Cake) {
 					<label>Cena</label>
 					<input class="form-input" type="number" name="price" min="0" value={ cake.Price.String() }/>
 				</div>
+				<div class="form-group">
+					<label>Tagi</label>
+				<div class="tag-grid">
+					for _, t := range allTags {
+						<label class="tag-chip">
+							<input type="checkbox" name="tag" value={ strconv.Itoa(t.ID) } style="display:none"
+								if cakeHasTag(cake.Tags, t.ID) { checked }/>
+							{ t.Name }
+						</label>
+					}
+				</div>
+				<div class="horizontal-group" style="margin-top:0.375rem">
+					<input class="form-input grow" type="text" name="new_tag" placeholder="Nowy tag..."/>
+					</div>
+				</div>
 				<div class="form-actions">
 					<a href="/cakes" class="btn outline">Anuluj</a>
 					<button type="submit" class="btn primary">
diff --git a/server/templates/cakes.templ b/server/templates/cakes.templ
index 81f2ff4..97637bc 100644
--- a/server/templates/cakes.templ
+++ b/server/templates/cakes.templ
@@ -6,11 +6,11 @@ import (
 	"git.bronku.xyz/bronku/cake-order-tracker/models"
 )
 
-templ CakesPage(cakes []models.Cake) {
-	@Layout("Katalog", templ.NopComponent, CakesMain(cakes))
+templ CakesPage(cakes []models.Cake, allTags []models.Tag) {
+	@Layout("Katalog", templ.NopComponent, CakesMain(cakes, allTags))
 }
 
-templ CakesMain(cakes []models.Cake) {
+templ CakesMain(cakes []models.Cake, allTags []models.Tag) {
 	<section class="card">
 		<header>
 			<h2>
@@ -22,27 +22,41 @@ templ CakesMain(cakes []models.Cake) {
 				Nowe ciasto
 			</a>
 		</header>
+		if len(allTags) > 0 {
+			<div class="filter-bar">
+				<span class="filter-label">Tagi:</span>
+				for _, t := range allTags {
+					<button type="button" class="tag-chip" data-tag={ t.Name } onclick="toggleCakeTagFilter(this)">{ t.Name }</button>
+				}
+			</div>
+		}
 		<div class="table-container">
-			<table class="data-table">
+			<table class="data-table" id="cakes-table">
 				<thead>
 					<tr>
 						<th style="width:2rem"></th>
 						<th>Nazwa</th>
 						<th>SKU</th>
+						<th>Tagi</th>
 						<th class="right">Cena bazowa</th>
 						<th class="center"></th>
 					</tr>
 				</thead>
 				<tbody>
 					for _, c := range cakes {
-						<tr>
+						<tr data-tags={ tagNames(c.Tags) }>
 							<td>
-								<div class="icon cake" style="width:1.75rem;height:1.75rem">
-									<span class="material-symbols-outlined" style="font-size:1rem">cake</span>
+								<div class="icon cake sm">
+									<span class="material-symbols-outlined">cake</span>
 								</div>
 							</td>
-							<td style="font-weight:500">{ c.Name }</td>
+							<td class="font-medium">{ c.Name }</td>
 							<td class="text-muted">#{ strconv.Itoa(c.ID) }</td>
+							<td>
+								for _, t := range c.Tags {
+									<span class="tag-chip">{ t.Name }</span>
+								}
+							</td>
 							<td class="text-right">{ c.Price.String() } PLN</td>
 							<td class="text-center">
 								<a href={ templ.URL("/cake/" + strconv.Itoa(c.ID)) } class="action-btn">
@@ -55,4 +69,23 @@ templ CakesMain(cakes []models.Cake) {
 			</table>
 		</div>
 	</section>
+	<script>
+		var activeCakeTags = [];
+		function toggleCakeTagFilter(btn) {
+			var tag = btn.getAttribute('data-tag');
+			var idx = activeCakeTags.indexOf(tag);
+			if (idx >= 0) { activeCakeTags.splice(idx, 1); btn.classList.remove('active'); }
+			else { activeCakeTags.push(tag); btn.classList.add('active'); }
+			var rows = document.querySelectorAll('#cakes-table tbody tr');
+			for (var i = 0; i < rows.length; i++) {
+				if (activeCakeTags.length === 0) { rows[i].style.display = ''; continue; }
+				var rowTags = (rows[i].getAttribute('data-tags') || '').split(',');
+				var match = false;
+				for (var j = 0; j < activeCakeTags.length; j++) {
+					if (rowTags.indexOf(activeCakeTags[j]) >= 0) { match = true; break; }
+				}
+				rows[i].style.display = match ? '' : 'none';
+			}
+		}
+	</script>
 }
diff --git a/server/templates/confirmation.templ b/server/templates/confirmation.templ
index dfa1e57..df8a355 100644
--- a/server/templates/confirmation.templ
+++ b/server/templates/confirmation.templ
@@ -8,7 +8,7 @@ templ Confirmation(title string, id int) {
 
 templ ConfirmationBody(id int) {
 	<section class="confirmation">
-		<span class="material-symbols-outlined" style="font-size:3rem;color:var(--success-text)">check_circle</span>
+		<span class="material-symbols-outlined success-icon">check_circle</span>
 		<h2>{ strconv.Itoa(id) } — zapisano</h2>
 		<a href="/orders" class="btn primary" style="margin-top:1rem">
 			<span class="material-symbols-outlined">arrow_back</span>
diff --git a/server/templates/helpers.go b/server/templates/helpers.go
index dde8256..021431b 100644
--- a/server/templates/helpers.go
+++ b/server/templates/helpers.go
@@ -8,46 +8,22 @@ import (
 	"git.bronku.xyz/bronku/cake-order-tracker/models"
 )
 
-func cakeTitle(cake models.Cake) string {
+func CakeTitle(cake models.Cake) string {
 	if cake.ID != 0 {
 		return "Ciasto #" + strconv.Itoa(cake.ID)
 	}
 	return "Ciasto nowe"
 }
 
-func orderTitle(order models.Order) string {
+func OrderTitle(order models.Order) string {
 	if order.ID != 0 {
 		return "Edytuj zamówienie #" + strconv.Itoa(order.ID)
 	}
 	return "Nowe zamówienie"
 }
 
-func countPending(orders []models.Order) int {
-	n := 0
-	for _, o := range orders {
-		if o.Status != "done" {
-			n++
-		}
-	}
-	return n
-}
-
-func countDone(orders []models.Order) int {
-	n := 0
-	for _, o := range orders {
-		if o.Status == "done" {
-			n++
-		}
-	}
-	return n
-}
-
-func estimateRevenue(orders []models.Order) models.Price {
-	var total models.Price
-	for _, o := range orders {
-		total += o.Total()
-	}
-	return total
+func specialCakeDetail(sc models.SpecialCake) string {
+	return sc.Detail()
 }
 
 func cakeItemsDesc(cakes []models.Cake) string {
@@ -61,6 +37,42 @@ func cakeItemsDesc(cakes []models.Cake) string {
 	return desc
 }
 
+func cakeHasTag(tags []models.Tag, id int) bool {
+	for _, t := range tags {
+		if t.ID == id {
+			return true
+		}
+	}
+	return false
+}
+
+func tagIDsComma(tags []models.Tag) string {
+	ids := make([]string, len(tags))
+	for i, t := range tags {
+		ids[i] = strconv.Itoa(t.ID)
+	}
+	return strings.Join(ids, ",")
+}
+
+func tagNames(tags []models.Tag) string {
+	names := make([]string, len(tags))
+	for i, t := range tags {
+		names[i] = t.Name
+	}
+	return strings.Join(names, ",")
+}
+
+func orderItemsDesc(order models.Order) string {
+	desc := cakeItemsDesc(order.Cakes)
+	for _, s := range order.SpecialCakes {
+		if desc != "" {
+			desc += ", "
+		}
+		desc += s.Name + " *"
+	}
+	return desc
+}
+
 func orderScript(order models.Order) string {
 	var b strings.Builder
 	b.WriteString("<script>")
diff --git a/server/templates/layout.templ b/server/templates/layout.templ
index 1706b1c..93d3158 100644
--- a/server/templates/layout.templ
+++ b/server/templates/layout.templ
@@ -17,7 +17,7 @@ templ Layout(title string, header, main templ.Component) {
 			<aside class="sidebar">
 				@Nav()
 			</aside>
-			<main>
+			<main id="main">
 				<header class="topnav">
 					<h1>{ title }</h1>
 					@header
@@ -27,16 +27,56 @@ templ Layout(title string, header, main templ.Component) {
 				</div>
 			</main>
 			<script>
+				function filterOrders(input) {
+					var q = input.value.toLowerCase();
+					var table = input.closest('.card').querySelector('.data-table');
+					if (!table) return;
+					var rows = table.querySelectorAll('tbody tr');
+					for (var i = 0; i < rows.length; i++) {
+						var id = rows[i].children[0].textContent.toLowerCase();
+						var customer = rows[i].children[1].textContent.toLowerCase();
+						rows[i].style.display = id.includes(q) || customer.includes(q) ? '' : 'none';
+					}
+				}
+
 				(function() {
-					var path = window.location.pathname;
-					var links = document.querySelectorAll('.link');
-					for (var i = 0; i < links.length; i++) {
-						if (links[i].getAttribute('href') === path) {
-							links[i].classList.add('active');
+					function setActiveLink() {
+						var path = window.location.pathname;
+						var links = document.querySelectorAll('.link');
+						for (var i = 0; i < links.length; i++) {
+							links[i].classList.toggle('active', links[i].getAttribute('href') === path);
 						}
 					}
+
+					function setSidebarState() {
+						var collapsed = localStorage.getItem('sidebarCollapsed') === 'true';
+						document.body.classList.toggle('sidebar-collapsed', collapsed);
+					}
+
+					setActiveLink();
+					setSidebarState();
+
+					document.addEventListener('htmx:afterSettle', setActiveLink);
 				})();
+
+				function toggleSidebar() {
+					var collapsed = document.body.classList.toggle('sidebar-collapsed');
+					localStorage.setItem('sidebarCollapsed', collapsed);
+				}
 			</script>
 		</body>
 	</html>
 }
+
+templ MainContent(title string, header, main templ.Component) {
+	<main id="main">
+		<title hx-swap-oob="true">{ title } — Zamówienia ciast</title>
+		<header class="topnav">
+			<h1>{ title }</h1>
+			@header
+		</header>
+		<div class="main-content">
+			@main
+		</div>
+	</main>
+}
diff --git a/server/templates/nav.templ b/server/templates/nav.templ
index 281a766..3dc14a8 100644
--- a/server/templates/nav.templ
+++ b/server/templates/nav.templ
@@ -1,16 +1,25 @@
 package templates
 
 templ Nav() {
-	<a href="/order" class="cta">
+	<div class="brand">
+		<button type="button" class="collapse-btn" onclick="toggleSidebar()" title="Zwiń / Rozwiń">
+			<span class="material-symbols-outlined">menu</span>
+		</button>
+		<div class="brand-text">
+			<h1>Cake Order</h1>
+			<p>Tracker</p>
+		</div>
+	</div>
+	<a href="/order" class="cta" hx-get="/order" hx-target="#main" hx-push-url="true">
 		<span class="material-symbols-outlined">add</span>
 		<span>Nowe zamówienie</span>
 	</a>
 	<nav>
-		<a href="/orders" class="link">
+		<a href="/orders" class="link" hx-get="/orders" hx-target="#main" hx-push-url="true">
 			<span class="material-symbols-outlined">dashboard</span>
 			<span>Panel główny</span>
 		</a>
-		<a href="/cakes" class="link">
+		<a href="/cakes" class="link" hx-get="/cakes" hx-target="#main" hx-push-url="true">
 			<span class="material-symbols-outlined">inventory_2</span>
 			<span>Katalog</span>
 		</a>
diff --git a/server/templates/order.templ b/server/templates/order.templ
index 8b4d087..0a22032 100644
--- a/server/templates/order.templ
+++ b/server/templates/order.templ
@@ -6,14 +6,14 @@ import (
 	"git.bronku.xyz/bronku/cake-order-tracker/models"
 )
 
-templ OrderPage(order models.Order, catalogue []models.Cake) {
-	@Layout(orderTitle(order), templ.NopComponent, OrderForm(order, catalogue))
+templ OrderPage(order models.Order, catalogue []models.Cake, allTags []models.Tag) {
+	@Layout(OrderTitle(order), templ.NopComponent, OrderForm(order, catalogue, allTags))
 }
 
-templ OrderForm(order models.Order, catalogue []models.Cake) {
-	<form method="post" class="split-pane" style="flex:1;min-height:0">
+templ OrderForm(order models.Order, catalogue []models.Cake, allTags []models.Tag) {
+	<form method="post" class="split-pane">
 		<input type="hidden" name="id" value={ strconv.Itoa(order.ID) }/>
-		<div style="flex:1;display:flex;flex-direction:column;gap:1rem;min-width:0">
+		<div class="order-left">
 			<section class="card">
 				<header>
 					<h2>
@@ -37,20 +37,11 @@ templ OrderForm(order models.Order, catalogue []models.Cake) {
 						</div>
 						<div class="form-group">
 							<label>Lokalizacja</label>
-							<select class="form-input" name="location">
-								<option
-									if order.Location == "Kartuzy" {
-										selected
-									}
-									value="Kartuzy"
-								>Kartuzy</option>
-								<option
-									if order.Location == "Somonino" {
-										selected
-									}
-									value="Somonino"
-								>Somonino</option>
-							</select>
+							<div class="toggle-group">
+								<input type="hidden" name="location" value={ order.Location }/>
+								<button type="button" class={ "toggle-btn", templ.KV("active", order.Location == "Kartuzy") } onclick="setLocation(this, 'Kartuzy')">Kartuzy</button>
+								<button type="button" class={ "toggle-btn", templ.KV("active", order.Location == "Somonino") } onclick="setLocation(this, 'Somonino')">Somonino</button>
+							</div>
 						</div>
 						<div class="form-group">
 							<label>Data dostawy *</label>
@@ -67,24 +58,45 @@ templ OrderForm(order models.Order, catalogue []models.Cake) {
 					</div>
 				</div>
 			</section>
+			<section class="card">
+				<header>
+					<h2>
+						<span class="material-symbols-outlined">cake_add</span>
+						Torty specjalne
+					</h2>
+				</header>
+				<div style="padding:1rem;text-align:center">
+					<button type="button" class="btn outline" onclick="openSpecialCakeOverlay()">
+						<span class="material-symbols-outlined">add</span>
+						Dodaj tort specjalny
+					</button>
+				</div>
+			</section>
 			<section class="card" style="flex:1;min-height:12.5rem">
 				<header>
 					<h2>
 						<span class="material-symbols-outlined">inventory_2</span>
 						Katalog produktów
 					</h2>
-					<div style="position:relative;width:11.25rem">
-						<span class="material-symbols-outlined" style="position:absolute;left:0.5rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--on-surface-variant);pointer-events:none">search</span>
-						<input class="form-input" style="height:1.75rem;padding-left:1.75rem;font-size:0.75rem" type="text" placeholder="Filtruj produkty..." oninput="filterCatalogue(this)"/>
+					<div class="search-wrapper">
+						<span class="material-symbols-outlined search-icon">search</span>
+						<input class="search-input" type="text" placeholder="Filtruj produkty..." oninput="filterCatalogue(this)"/>
 					</div>
 				</header>
-				<div style="overflow-y:auto;padding:1rem">
+				if len(allTags) > 0 {
+					<div class="tag-row">
+						for _, t := range allTags {
+							<button type="button" class="tag-chip" data-tag={ t.Name } onclick="toggleCatalogueTagFilter(this)">{ t.Name }</button>
+						}
+					</div>
+				}
+				<div class="catalogue-scroll">
 					<ul id="catalogue-grid">
 						for _, c := range catalogue {
-							<li data-name={ c.Name }>
+							<li data-name={ c.Name } data-tags={ tagNames(c.Tags) }>
 								<div>
 									<div class="icon cake">
-										<span class="material-symbols-outlined" style="font-size:1rem">cake</span>
+										<span class="material-symbols-outlined">cake</span>
 									</div>
 									<div style="min-width:0">
 										<div class="name">{ c.Name }</div>
@@ -106,8 +118,8 @@ templ OrderForm(order models.Order, catalogue []models.Cake) {
 				</div>
 			</section>
 		</div>
-		<aside style="width:20rem;flex-shrink:0;display:flex;flex-direction:column">
-			<section class="card" style="flex:1;display:flex;flex-direction:column">
+		<aside class="order-aside">
+					<section class="card grow">
 				<header>
 					<h2>
 						<span class="material-symbols-outlined">receipt_long</span>
@@ -117,7 +129,7 @@ templ OrderForm(order models.Order, catalogue []models.Cake) {
 				<ul id="basket-items">
 					for _, c := range order.Cakes {
 						<li data-cake-id={ strconv.Itoa(c.ID) }>
-							<div style="flex:1;min-width:0;padding-right:0.5rem">
+							<div>
 								<div class="name">{ c.Name }</div>
 								<div class="detail">{ c.Price.String() } PLN × <span class="qty">{ strconv.Itoa(c.Amount) }</span></div>
 							</div>
@@ -128,6 +140,37 @@ templ OrderForm(order models.Order, catalogue []models.Cake) {
 							<input type="hidden" name={ "cake[" + strconv.Itoa(c.ID) + "]" } value={ strconv.Itoa(c.Amount) }/>
 						</li>
 					}
+					for _, s := range order.SpecialCakes {
+						<li data-special-id={ strconv.Itoa(s.ID) }>
+							<div>
+								<div class="name">{ s.Name }</div>
+								<div class="detail">{ specialCakeDetail(s) }</div>
+								if len(s.Tags) > 0 {
+									<div class="tag-group">
+										for _, t := range s.Tags {
+											<span class="tag-chip sm">{ t.Name }</span>
+										}
+									</div>
+								}
+							</div>
+							<div class="price">{ s.Price.String() } PLN</div>
+							<div class="basket-actions">
+								<button type="button" class="action-btn" onclick="editSpecialCake(this)" title="Edytuj">
+									<span class="material-symbols-outlined" style="font-size:1rem">edit</span>
+								</button>
+								<button type="button" class="remove" onclick="removeSpecialCake(this)" title="Usuń">
+									<span class="material-symbols-outlined">close</span>
+								</button>
+							</div>
+							<input type="hidden" name="special_name[]" value={ s.Name }/>
+							<input type="hidden" name="special_price[]" value={ s.Price.String() }/>
+							<input type="hidden" name="special_size[]" value={ s.Size }/>
+							<input type="hidden" name="special_shape[]" value={ s.Shape }/>
+							<input type="hidden" name="special_flavour[]" value={ s.Flavour }/>
+							<input type="hidden" name="special_notes[]" value={ s.Notes }/>
+							<input type="hidden" name="special_tags[]" value={ tagIDsComma(s.Tags) }/>
+						</li>
+					}
 				</ul>
 				<div class="summary-totals">
 					<div class="total-row">
@@ -150,5 +193,17 @@ templ OrderForm(order models.Order, catalogue []models.Cake) {
 			</section>
 		</aside>
 	</form>
+
+	@SpecialCakeOverlay(allTags)
+
 	@templ.Raw(orderScript(order))
+
+	<script>
+		function setLocation(btn, value) {
+			var group = btn.closest('.toggle-group');
+			group.querySelectorAll('.toggle-btn').forEach(function(b) { b.classList.remove('active'); });
+			btn.classList.add('active');
+			group.querySelector('input[type=hidden]').value = value;
+		}
+	</script>
 }
diff --git a/server/templates/orders.templ b/server/templates/orders.templ
index 37dfcf4..737a62d 100644
--- a/server/templates/orders.templ
+++ b/server/templates/orders.templ
@@ -6,147 +6,181 @@ import (
 	"git.bronku.xyz/bronku/cake-order-tracker/models"
 )
 
-templ OrdersPage(first, last, today, tomorrow string, orders []models.Order) {
-	@Layout("Panel główny", DateForm(first, last, today, tomorrow), OrdersMain(orders))
+templ OrdersPage(first, last, today, tomorrow, special string, counts models.OrderCounts, cakeCounts []models.CakeCount, orders []models.Order) {
+	@Layout("Panel główny", DateForm(first, last, today, tomorrow, special), OrdersMain(counts, cakeCounts, orders, first, last, special))
 }
 
-templ DateForm(first, last, today, tomorrow string) {
+templ DateForm(first, last, today, tomorrow, special string) {
 	<div class="horizontal-group" style="gap:0.5rem;flex-wrap:wrap">
 		<div class="preset-group">
-			<a href={ templ.URL("/orders?from=" + today + "&to=" + today) } class="preset-btn">Dzisiaj</a>
-			<a href={ templ.URL("/orders?from=" + tomorrow + "&to=" + tomorrow) } class="preset-btn">Jutro</a>
-			<a href="/orders" class="preset-btn">W tym tygodniu</a>
+			<a href={ templ.URL("/orders?from=" + today + "&to=" + today + "&special=" + special) } hx-get={ templ.URL("/orders?from=" + today + "&to=" + today + "&special=" + special) } hx-target="#results-pane" class="preset-btn">Dzisiaj</a>
+			<a href={ templ.URL("/orders?from=" + tomorrow + "&to=" + tomorrow + "&special=" + special) } hx-get={ templ.URL("/orders?from=" + tomorrow + "&to=" + tomorrow + "&special=" + special) } hx-target="#results-pane" class="preset-btn">Jutro</a>
+			<a href={ templ.URL("/orders?special=" + special) } hx-get={ templ.URL("/orders?special=" + special) } hx-target="#results-pane" class="preset-btn">W tym tygodniu</a>
 		</div>
-		<form method="GET" action="/orders" class="horizontal-group" style="align-items:center;gap:0.25rem">
+		<form method="GET" action="/orders" class="horizontal-group" style="align-items:center;gap:0.25rem" hx-get="/orders" hx-target="#results-pane" hx-trigger="change, keyup delay:500ms">
 			<label>Od</label>
 			<input type="date" name="from" value={ first }/>
 			<label>Do</label>
 			<input type="date" name="to" value={ last }/>
-			<button type="submit" class="btn primary sm">Filtruj</button>
+			<input type="hidden" name="special" value={ special }/>
 		</form>
 	</div>
 }
 
-templ OrdersMain(orders []models.Order) {
+templ OrdersMain(counts models.OrderCounts, cakeCounts []models.CakeCount, orders []models.Order, first, last, special string) {
 	<div class="metrics-grid">
 		<div>
 			<span class="label">
 				<span class="material-symbols-outlined">receipt_long</span>
-				Zamówienia dzisiaj
-			</span>
-			<span class="value">{ len(orders) }</span>
-			<span class="change positive">
-				<span class="material-symbols-outlined">arrow_upward</span>
-				Wszystkie aktywne
+				Aktywne
 			</span>
+			<span class="value">{ strconv.Itoa(counts.Active) }</span>
+			<span class="change">Wszystkie niezrealizowane</span>
 		</div>
 		<div>
 			<span class="label">
-				<span class="material-symbols-outlined">cake</span>
-				Do realizacji
-			</span>
-			<span class="value">{ strconv.Itoa(countPending(orders)) }</span>
-			<span class="change warning">
-				<span class="material-symbols-outlined">priority_high</span>
-				Oczekujące
-			</span>
-		</div>
-		<div>
-			<span class="label">
-				<span class="material-symbols-outlined">check_circle</span>
-				Gotowe do odbioru
-			</span>
-			<span class="value">{ strconv.Itoa(countDone(orders)) }</span>
-			<span class="change">Zrealizowane</span>
-		</div>
-		<div>
-			<span class="label">
-				<span class="material-symbols-outlined">payments</span>
-				Przychód (szac.)
-			</span>
-			<span class="value">{ estimateRevenue(orders).String() } PLN</span>
-			<span class="change positive">
-				<span class="material-symbols-outlined">trending_up</span>
-				W bieżącym miesiącu
+				<span class="material-symbols-outlined">today</span>
+				Na dziś
 			</span>
+			<span class="value">{ strconv.Itoa(counts.DueToday) }</span>
+			<span class="change">Do zrobienia</span>
 		</div>
 	</div>
+	<div id="results-pane">
+		@OrdersContent(orders, cakeCounts, first, last, special)
+	</div>
+}
+
+templ OrdersContent(orders []models.Order, cakeCounts []models.CakeCount, first, last, special string) {
 	<section class="card">
 		<header>
 			<h2>
 				<span class="material-symbols-outlined">list_alt</span>
 				Aktywne zamówienia
 			</h2>
-			<div style="position:relative;width:11.25rem">
-				<span class="material-symbols-outlined" style="position:absolute;left:0.5rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--on-surface-variant);pointer-events:none">search</span>
-				<input type="text" style="height:1.75rem;padding-left:1.75rem;padding-right:0.5rem;font-size:0.75rem;border:1px solid var(--outline-variant);border-radius:var(--border-radius-sm);background:var(--surface-container-lowest);color:var(--on-surface);outline:none;width:100%" placeholder="Szukaj..." oninput="filterOrders(this)"/>
+			<div class="header-actions">
+				<div class="preset-group">
+					<a href={ templ.URL("/orders?special=true&from=" + first + "&to=" + last) } hx-get={ templ.URL("/orders?special=true&from=" + first + "&to=" + last) } hx-target="#results-pane"
+						class={ "preset-btn", templ.KV("active", special == "true") }>Torty</a>
+					<a href={ templ.URL("/orders?from=" + first + "&to=" + last) } hx-get={ templ.URL("/orders?from=" + first + "&to=" + last) } hx-target="#results-pane"
+						class={ "preset-btn", templ.KV("active", special != "true") }>Wszystkie</a>
+				</div>
+				<div class="search-wrapper">
+					<span class="material-symbols-outlined search-icon">search</span>
+					<input type="text" class="search-input" placeholder="Szukaj..." oninput="filterOrders(this)"/>
+				</div>
 			</div>
 		</header>
-		<div class="table-container" id="results-table">
-			@OrdersTable(orders)
+		<div class="table-container">
+			<table class="data-table">
+				<thead>
+					<tr>
+						<th>ID zamówienia</th>
+						<th>Klient</th>
+						<th>Data odbioru</th>
+						<th>Pozycje</th>
+						<th class="right">Suma</th>
+						<th class="center">Status</th>
+						<th class="center"></th>
+					</tr>
+				</thead>
+				<tbody>
+					for _, o := range orders {
+						@OrderRow(o)
+					}
+				</tbody>
+			</table>
 		</div>
 	</section>
-	<script>
-		function filterOrders(input) {
-			var q = input.value.toLowerCase();
-			var rows = document.querySelectorAll('#results-table tbody tr');
-			for (var i = 0; i < rows.length; i++) {
-				var id = rows[i].children[0].textContent.toLowerCase();
-				var customer = rows[i].children[1].textContent.toLowerCase();
-				rows[i].style.display = id.includes(q) || customer.includes(q) ? '' : 'none';
-			}
-		}
-	</script>
+	@CakeBreakdown(cakeCounts)
 }
 
-templ OrdersTable(orders []models.Order) {
-	<table class="data-table">
-		<thead>
-			<tr>
-				<th>ID zamówienia</th>
-				<th>Klient</th>
-				<th>Data odbioru</th>
-				<th>Pozycje</th>
-				<th class="right">Suma</th>
-				<th class="center">Status</th>
-				<th class="center"></th>
-			</tr>
-		</thead>
-		<tbody>
-			for _, o := range orders {
-				<tr>
-					<td><a href={ templ.URL("/order/" + strconv.Itoa(o.ID)) } class="order-id">#{ strconv.Itoa(o.ID) }</a></td>
-					<td class="customer">{ o.Surname } { o.Name }<br/><span class="text-muted" style="font-size:0.75rem;font-weight:400">{ o.Phone }</span></td>
-					<td class="text-muted">{ o.Date.Format("2006-01-02 15:04") }</td>
-					<td>
-						<span class="truncate" title={ cakeItemsDesc(o.Cakes) }>
-							for i, c := range o.Cakes {
-								if i > 0 {
-									{ ", " }
-								}
-								{ c.Name } (x{ strconv.Itoa(c.Amount) })
-							}
-						</span>
-					</td>
-					<td class="text-right" style="font-weight:700">{ o.Total().String() } PLN</td>
-					<td class="text-center">
-						<span class={ "status-chip " + o.Status }>
-							if o.Status == "accepted" {
-								Przyjęte
-							} else if o.Status == "done" {
-								Gotowe
-							} else {
-								Oczekujące
-							}
-						</span>
-					</td>
-					<td class="text-center">
-						<a href={ templ.URL("/order/" + strconv.Itoa(o.ID)) } class="action-btn">
-							<span class="material-symbols-outlined">edit</span>
-						</a>
-					</td>
-				</tr>
+templ OrderRow(order models.Order) {
+	<tr>
+		<td><a href={ templ.URL("/order/" + strconv.Itoa(order.ID)) } class="order-id">#{ strconv.Itoa(order.ID) }</a></td>
+		<td class="customer">{ order.Surname } { order.Name }<br/><span class="text-muted">{ order.Phone }</span></td>
+		<td class="text-muted">{ order.Date.Format("2006-01-02 15:04") }</td>
+		<td>
+			if len(order.SpecialCakes) > 0 {
+				<span class="tort-badge" title="Tort specjalny">
+					<span class="material-symbols-outlined">cake</span>
+				</span>
 			}
-		</tbody>
-	</table>
+			<span class="truncate" title={ orderItemsDesc(order) }>
+				for i, c := range order.Cakes {
+					if i > 0 {
+						{ ", " }
+					}
+					{ c.Name } (x{ strconv.Itoa(c.Amount) })
+				}
+				for _, s := range order.SpecialCakes {
+					{ ", " }
+					{ s.Name }*
+				}
+			</span>
+		</td>
+		<td class="text-right font-bold">{ order.Total().String() } PLN</td>
+		<td class="text-center">
+			<select name="status" class="status-select"
+				hx-post={ templ.URL("/order/" + strconv.Itoa(order.ID) + "/status") }
+				hx-trigger="change"
+				hx-target="closest tr"
+				hx-swap="outerHTML">
+				<option value="pending"
+					if order.Status == "pending" {
+						selected
+					}
+				>Oczekujące</option>
+				<option value="accepted"
+					if order.Status == "accepted" {
+						selected
+					}
+				>Przyjęte</option>
+				<option value="production"
+					if order.Status == "production" {
+						selected
+					}
+				>W realizacji</option>
+				<option value="ready"
+					if order.Status == "ready" {
+						selected
+					}
+				>Do odbioru</option>
+				<option value="picked_up"
+					if order.Status == "picked_up" {
+						selected
+					}
+				>Wydane</option>
+			</select>
+		</td>
+		<td class="text-center">
+			<a href={ templ.URL("/order/" + strconv.Itoa(order.ID)) } class="action-btn">
+				<span class="material-symbols-outlined">edit</span>
+			</a>
+		</td>
+	</tr>
+}
+
+templ CakeBreakdown(cakeCounts []models.CakeCount) {
+	<section class="card">
+		<header>
+			<h2>
+				<span class="material-symbols-outlined">cake</span>
+				Zapotrzebowanie
+			</h2>
+		</header>
+		<div>
+			<ul class="breakdown-list">
+				for _, cc := range cakeCounts {
+					<li class="breakdown-item">
+						<span>{ cc.Name }</span>
+						<span class="breakdown-amount">{ strconv.Itoa(cc.Amount) }</span>
+					</li>
+				}
+				if len(cakeCounts) == 0 {
+					<li class="breakdown-empty">Brak ciast w tym okresie</li>
+				}
+			</ul>
+		</div>
+	</section>
 }
diff --git a/server/templates/overlay.templ b/server/templates/overlay.templ
new file mode 100644
index 0000000..2e183b1
--- /dev/null
+++ b/server/templates/overlay.templ
@@ -0,0 +1,79 @@
+package templates
+
+import (
+	"strconv"
+
+	"git.bronku.xyz/bronku/cake-order-tracker/models"
+)
+
+templ SpecialCakeOverlay(allTags []models.Tag) {
+	<div id="sc-overlay" class="overlay">
+		<div class="overlay-backdrop" onclick="closeSpecialCakeOverlay()"></div>
+		<div class="overlay-panel">
+			<div class="overlay-header">
+				<h2>
+					<span class="material-symbols-outlined">cake_add</span>
+					<span id="sc-overlay-title">Dodaj tort specjalny</span>
+				</h2>
+				<button type="button" class="close-btn" onclick="closeSpecialCakeOverlay()">
+					<span class="material-symbols-outlined">close</span>
+				</button>
+			</div>
+			<div class="overlay-body">
+				<div class="overlay-form">
+					<div class="form-group">
+						<label>Nazwa *</label>
+						<input class="form-input" type="text" id="sc-name" placeholder="Nazwa tortu"/>
+					</div>
+					<div class="form-group">
+						<label>Cena *</label>
+						<input class="form-input" type="number" id="sc-price" min="0" step="0.01" placeholder="0.00"/>
+					</div>
+					<div class="form-group">
+						<label>Wielkość</label>
+						<input class="form-input" type="text" id="sc-size" placeholder="np. 20cm, 30x40"/>
+					</div>
+					<div class="form-group">
+						<label>Kształt</label>
+						<select class="form-input" id="sc-shape">
+							<option value="">—</option>
+							<option value="round">Okrągły</option>
+							<option value="square">Kwadrat</option>
+						</select>
+					</div>
+					<div class="form-group">
+						<label>Smak</label>
+						<input class="form-input" type="text" id="sc-flavour" placeholder="np. czekoladowy"/>
+					</div>
+					<div class="form-group">
+						<label>Notatki</label>
+						<input class="form-input" type="text" id="sc-notes" placeholder="Dodatkowe informacje"/>
+					</div>
+					if len(allTags) > 0 {
+						<div class="form-group">
+							<label>Tagi</label>
+							<div class="tag-grid" id="sc-overlay-tags">
+								for _, t := range allTags {
+									<label class="tag-chip">
+										<input type="checkbox" class="sc-tag-cb" value={ strconv.Itoa(t.ID) } style="display:none"/>
+										{ t.Name }
+									</label>
+								}
+							</div>
+							<div class="horizontal-group" style="margin-top:0.375rem">
+								<input class="form-input grow" type="text" id="sc-new-tag" placeholder="Nowy tag..."/>
+							</div>
+						</div>
+					}
+				</div>
+			</div>
+			<div class="overlay-footer">
+				<button type="button" class="btn outline" onclick="closeSpecialCakeOverlay()">Anuluj</button>
+				<button type="button" class="btn primary" onclick="saveSpecialCake()">
+					<span class="material-symbols-outlined">check</span>
+					Zapisz
+				</button>
+			</div>
+		</div>
+	</div>
+}