diff --git a/server/static/base.css b/server/static/base.css
new file mode 100644
index 0000000..4175424
--- /dev/null
+++ b/server/static/base.css
@@ -0,0 +1,73 @@
+:root {
+    --surface: #fff8f0;
+    --surface-container-low: #faf3e7;
+    --surface-container: #f5ede0;
+    --surface-container-high: #ede3d4;
+    --surface-container-highest: #e5d9c8;
+    --surface-container-lowest: #ffffff;
+    --surface-bright: #fff8f0;
+    --surface-dim: #e5d9c8;
+    --primary: #8c4d50;
+    --primary-hover: #7a3f42;
+    --primary-container: #fcacaf;
+    --on-primary: #ffffff;
+    --on-surface: #363227;
+    --on-surface-variant: #645f52;
+    --outline: #b9b1a3;
+    --outline-variant: #d4cdbe;
+    --secondary: #b45309;
+    --secondary-container: #fd8a42;
+    --on-secondary-container: #682c00;
+    --error: #ba1a1a;
+    --error-container: #ffdad6;
+    --on-error-container: #93000a;
+    --success-bg: #dcfce7;
+    --success-text: #166534;
+    --warning-bg: #fef08a;
+    --warning-text: #854d0e;
+    --danger-bg: #fee2e2;
+    --danger-text: #991b1b;
+    --info-bg: #f1f5f9;
+    --info-text: #475569;
+    --sidebar-width: 17.5rem;
+    --topnav-height: 3.5rem;
+    --border-radius-sm: 0.25rem;
+    --border-radius-md: 0.5rem;
+    --border-radius-lg: 0.75rem;
+    --border-radius-full: 9999px;
+    --font-family: "Inter", system-ui, -apple-system, sans-serif;
+    --transition: 0.15s ease;
+}
+
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html, body {
+    height: 100%;
+    overflow: hidden;
+}
+
+body {
+    font-family: var(--font-family);
+    font-size: 1rem;
+    line-height: 1.5;
+    color: var(--on-surface);
+    background: var(--surface);
+    display: flex;
+}
+
+input, select, textarea, button {
+    font-family: inherit;
+}
+
+.htmx-request {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.hidden {
+    display: none !important;
+}
diff --git a/server/static/basket.css b/server/static/basket.css
new file mode 100644
index 0000000..381d178
--- /dev/null
+++ b/server/static/basket.css
@@ -0,0 +1,116 @@
+/* ========== ORDER SUMMARY ========== */
+#basket-items {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    list-style: none;
+
+    > li {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid var(--outline-variant);
+
+        > div:first-child {
+            flex: 1;
+            min-width: 0;
+            padding-right: 0.5rem;
+        }
+
+        .name {
+            font-size: 0.75rem;
+            font-weight: 600;
+            color: var(--on-surface);
+        }
+
+        .detail {
+            font-size: 0.75rem;
+            color: var(--on-surface-variant);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .price {
+            font-size: 0.75rem;
+            font-weight: 600;
+            color: var(--on-surface);
+            white-space: nowrap;
+        }
+
+        .remove {
+            color: var(--error);
+            cursor: pointer;
+            transition: opacity var(--transition);
+            background: none;
+            border: none;
+            margin-left: 0.25rem;
+
+            &:hover {
+                opacity: 0.8;
+            }
+
+            .material-symbols-outlined {
+                font-size: 1rem;
+            }
+        }
+    }
+}
+
+.summary-totals {
+    padding: 1rem;
+    border-top: 1px solid var(--outline-variant);
+    background: var(--surface-bright);
+
+    .total-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 0.75rem;
+        color: var(--on-surface-variant);
+
+        + .total-row {
+            margin-top: 0.5rem;
+        }
+
+        &.grand {
+            font-size: 1rem;
+            font-weight: 700;
+            color: var(--on-surface);
+            padding-top: 0.5rem;
+            border-top: 1px solid var(--outline-variant);
+            margin-top: 0.5rem;
+        }
+    }
+
+    .btn-finalize {
+        width: 100%;
+        height: 2.5rem;
+        margin-top: 0.5rem;
+        background: var(--primary);
+        color: var(--on-primary);
+        border: none;
+        border-radius: var(--border-radius-sm);
+        font-size: 0.75rem;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        cursor: pointer;
+        transition: opacity var(--transition);
+
+        &:hover {
+            opacity: 0.9;
+        }
+
+        .material-symbols-outlined {
+            font-size: 1.25rem;
+        }
+    }
+}
diff --git a/server/static/card.css b/server/static/card.css
new file mode 100644
index 0000000..06b27c1
--- /dev/null
+++ b/server/static/card.css
@@ -0,0 +1,241 @@
+/* ========== CARDS ========== */
+.card {
+    background: var(--surface-container-lowest);
+    border: 1px solid var(--outline-variant);
+    border-radius: var(--border-radius-md);
+    display: flex;
+    flex-direction: column;
+
+    > header {
+        padding: 0.75rem 1rem;
+        border-bottom: 1px solid var(--outline-variant);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background: var(--surface-container-low);
+
+        h2 {
+            font-size: 1rem;
+            font-weight: 600;
+            color: var(--on-surface);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+
+            .material-symbols-outlined {
+                font-size: 1.25rem;
+                color: var(--on-surface-variant);
+            }
+        }
+    }
+
+    > div,
+    > form {
+        padding: 1rem;
+        flex: 1;
+    }
+
+    > footer {
+        padding: 0.5rem 0.75rem;
+        border-top: 1px solid var(--outline-variant);
+        background: var(--surface-container-lowest);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 0.75rem;
+        color: var(--on-surface-variant);
+    }
+}
+
+.card > .table-container {
+    overflow-x: auto;
+    padding: 0;
+}
+
+/* ========== METRICS GRID ========== */
+.metrics-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.75rem;
+
+    > div {
+        background: var(--surface-container-lowest);
+        border: 1px solid var(--outline-variant);
+        border-radius: var(--border-radius-md);
+        padding: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+
+        .label {
+            font-size: 0.75rem;
+            font-weight: 500;
+            color: var(--on-surface-variant);
+            letter-spacing: 0.02em;
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+
+            .material-symbols-outlined {
+                font-size: 1rem;
+            }
+        }
+
+        .value {
+            font-size: 1.75rem;
+            font-weight: 700;
+            color: var(--on-surface);
+            line-height: 1.2;
+        }
+
+        .change {
+            font-size: 0.75rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+
+            &.positive {
+                color: var(--success-text);
+            }
+
+            &.warning {
+                color: var(--warning-text);
+            }
+
+            .material-symbols-outlined {
+                font-size: 1rem;
+            }
+        }
+    }
+}
+
+@media (max-width: 64em) {
+    .metrics-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 48em) {
+    .metrics-grid {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+/* ========== SPLIT PANE ========== */
+.split-pane {
+    display: flex;
+    gap: 1rem;
+    flex: 1;
+    min-height: 0;
+
+    > div:first-child {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        min-width: 0;
+    }
+
+    > aside {
+        width: 20rem;
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+@media (max-width: 64em) {
+    .split-pane {
+        flex-direction: column;
+    }
+
+    .split-pane > aside {
+        width: 100%;
+    }
+}
+
+/* ========== DATA TABLE ========== */
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.75rem;
+
+    thead {
+        background: var(--surface-container-low);
+        border-bottom: 1px solid var(--outline-variant);
+    }
+
+    th {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: var(--on-surface-variant);
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        text-align: left;
+        white-space: nowrap;
+
+        &.right {
+            text-align: right;
+        }
+
+        &.center {
+            text-align: center;
+        }
+    }
+
+    td {
+        padding: 0.5rem 0.75rem;
+        color: var(--on-surface);
+        white-space: nowrap;
+
+        .truncate {
+            max-width: 12.5rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: block;
+        }
+    }
+
+    tbody tr {
+        border-bottom: 1px solid var(--outline-variant);
+        transition: background var(--transition);
+        height: 2.5rem;
+
+        &:hover {
+            background: var(--surface-container-low);
+        }
+
+        &:nth-child(even) {
+            background: var(--surface-bright);
+
+            &:hover {
+                background: var(--surface-container-low);
+            }
+        }
+    }
+
+    .order-id {
+        font-weight: 700;
+        color: var(--primary);
+        text-decoration: none;
+    }
+
+    .customer {
+        font-weight: 500;
+    }
+
+    .text-right {
+        text-align: right;
+    }
+
+    .text-center {
+        text-align: center;
+    }
+
+    .text-muted {
+        color: var(--on-surface-variant);
+    }
+}
diff --git a/server/static/catalogue.css b/server/static/catalogue.css
new file mode 100644
index 0000000..305bdcb
--- /dev/null
+++ b/server/static/catalogue.css
@@ -0,0 +1,117 @@
+/* ========== CATALOGUE GRID ========== */
+#catalogue-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
+    gap: 0.5rem;
+
+    > li {
+        border: 1px solid var(--outline-variant);
+        border-radius: var(--border-radius-sm);
+        padding: 0.5rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        background: var(--surface-bright);
+        transition: border-color var(--transition);
+        list-style: none;
+
+        &:hover {
+            border-color: var(--outline);
+        }
+
+        > div:first-child {
+            display: flex;
+            align-items: flex-start;
+            gap: 0.5rem;
+        }
+
+        .icon {
+            width: 2rem;
+            height: 2rem;
+            border-radius: var(--border-radius-sm);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            font-size: 1rem;
+
+            &.cake {
+                background: var(--primary-container);
+                color: var(--primary);
+            }
+
+            &.cookie {
+                background: var(--surface-container-high);
+                color: var(--on-surface-variant);
+            }
+        }
+
+        .name {
+            font-size: 0.75rem;
+            font-weight: 600;
+            color: var(--on-surface);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .price {
+            font-size: 0.75rem;
+            color: var(--on-surface-variant);
+        }
+
+        .actions {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 0.5rem;
+            padding-top: 0.5rem;
+            border-top: 1px solid var(--outline-variant);
+
+            .qty {
+                width: 1.5rem;
+                height: 1.5rem;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border: none;
+                border-radius: var(--border-radius-sm);
+                cursor: pointer;
+                font-size: 1rem;
+                transition: all var(--transition);
+
+                .material-symbols-outlined {
+                    font-size: 1rem;
+                }
+
+                &.minus {
+                    background: var(--surface-container-low);
+                    color: var(--on-surface-variant);
+
+                    &:hover {
+                        background: var(--outline-variant);
+                        color: var(--on-surface);
+                    }
+                }
+
+                &.plus {
+                    background: var(--surface-container-high);
+                    color: var(--on-surface);
+
+                    &:hover {
+                        background: var(--primary);
+                        color: var(--on-primary);
+                    }
+                }
+            }
+
+            .value {
+                font-size: 0.75rem;
+                font-weight: 500;
+                color: var(--on-surface);
+                width: 1.5rem;
+                text-align: center;
+            }
+        }
+    }
+}
diff --git a/server/static/component.css b/server/static/component.css
new file mode 100644
index 0000000..e21d2db
--- /dev/null
+++ b/server/static/component.css
@@ -0,0 +1,277 @@
+/* ========== BUTTONS ========== */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0 1rem;
+    height: 2.5rem;
+    border: none;
+    border-radius: var(--border-radius-sm);
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition);
+    text-decoration: none;
+
+    .material-symbols-outlined {
+        font-size: 1.25rem;
+    }
+
+    &.primary {
+        background: var(--primary);
+        color: var(--on-primary);
+
+        &:hover {
+            opacity: 0.9;
+        }
+    }
+
+    &.outline {
+        background: transparent;
+        border: 1px solid var(--outline-variant);
+        color: var(--on-surface);
+
+        &:hover {
+            background: var(--surface-container-high);
+        }
+    }
+
+    &.sm {
+        height: 2rem;
+        padding: 0 0.75rem;
+    }
+}
+
+/* ========== TABLE ACTIONS ========== */
+.action-btn {
+    color: var(--on-surface-variant);
+    cursor: pointer;
+    transition: color var(--transition);
+    background: none;
+    border: none;
+
+    &:hover {
+        color: var(--primary);
+    }
+
+    .material-symbols-outlined {
+        font-size: 1.25rem;
+    }
+}
+
+/* ========== 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 {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--border-radius-full);
+    font-size: 0.75rem;
+    font-weight: 600;
+
+    &.signature {
+        background: var(--primary-container);
+        color: var(--primary);
+    }
+
+    &.seasonal {
+        background: var(--surface-container-high);
+        color: var(--on-surface);
+    }
+}
+
+/* ========== 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;
+        }
+    }
+}
+
+/* ========== CONFIRMATION ========== */
+section.confirmation {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    gap: 0.5rem;
+    text-align: center;
+
+    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
new file mode 100644
index 0000000..2455355
--- /dev/null
+++ b/server/static/form.css
@@ -0,0 +1,82 @@
+/* ========== FORM ========== */
+.form-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.75rem;
+}
+
+@media (max-width: 64em) {
+    .form-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 48em) {
+    .form-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+
+    label {
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: var(--on-surface-variant);
+        letter-spacing: 0.02em;
+    }
+}
+
+.form-input {
+    height: 2rem;
+    padding: 0 0.5rem;
+    border: 1px solid var(--outline-variant);
+    border-radius: var(--border-radius-sm);
+    background: var(--surface-container-lowest);
+    font-size: 0.75rem;
+    color: var(--on-surface);
+    outline: none;
+    transition: border-color var(--transition);
+    width: 100%;
+
+    &:focus {
+        border-color: var(--primary);
+    }
+
+    &::placeholder {
+        color: var(--on-surface-variant);
+        opacity: 0.6;
+    }
+}
+
+textarea.form-input {
+    height: auto;
+    padding: 0.5rem;
+    resize: vertical;
+}
+
+select.form-input {
+    appearance: auto;
+}
+
+.form-card {
+    max-width: 30rem;
+
+    .card > div {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+}
+
+.form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--outline-variant);
+    margin-top: 0.5rem;
+}
diff --git a/server/static/layout.css b/server/static/layout.css
new file mode 100644
index 0000000..b91203d
--- /dev/null
+++ b/server/static/layout.css
@@ -0,0 +1,277 @@
+/* ========== SIDEBAR ========== */
+aside.sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--sidebar-width);
+    background: var(--surface-container-lowest);
+    border-right: 1px solid var(--outline-variant);
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    z-index: 40;
+
+    .brand {
+        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;
+        }
+
+        p {
+            font-size: 0.75rem;
+            color: var(--on-surface-variant);
+            margin-top: 0.25rem;
+        }
+    }
+
+    .cta {
+        width: 100%;
+        height: 2.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        background: var(--primary);
+        color: var(--on-primary);
+        border: none;
+        border-radius: var(--border-radius-md);
+        font-size: 0.75rem;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        cursor: pointer;
+        text-decoration: none;
+        margin-bottom: 1.5rem;
+        transition: opacity var(--transition);
+
+        &:hover {
+            opacity: 0.9;
+        }
+
+        .material-symbols-outlined {
+            font-size: 1.25rem;
+        }
+    }
+
+    nav {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+
+        a.link {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            padding: 0.75rem 1rem;
+            border-radius: var(--border-radius-md);
+            font-size: 0.75rem;
+            font-weight: 500;
+            text-decoration: none;
+            color: var(--on-surface-variant);
+            transition: all var(--transition);
+            cursor: pointer;
+
+            &:hover {
+                background: var(--surface-container-low);
+                color: var(--on-surface);
+            }
+
+            &.active {
+                background: var(--primary-container);
+                color: var(--primary);
+                font-weight: 700;
+            }
+
+            .material-symbols-outlined {
+                font-size: 1.25rem;
+            }
+        }
+    }
+
+    footer {
+        margin-top: auto;
+        padding-top: 1rem;
+        border-top: 1px solid var(--outline-variant);
+
+        .user {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            padding: 0.5rem;
+            margin-top: 0.75rem;
+
+            .avatar {
+                width: 2rem;
+                height: 2rem;
+                border-radius: 50%;
+                background: var(--surface-container-high);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: var(--on-surface);
+                font-size: 1rem;
+                font-weight: 700;
+                flex-shrink: 0;
+            }
+
+            .info {
+                display: flex;
+                flex-direction: column;
+
+                .name {
+                    font-size: 0.75rem;
+                    font-weight: 600;
+                    color: var(--on-surface);
+                }
+
+                .status {
+                    font-size: 0.75rem;
+                    color: var(--on-surface-variant);
+                }
+            }
+        }
+    }
+}
+
+/* ========== MAIN LAYOUT ========== */
+main {
+    margin-left: var(--sidebar-width);
+    width: calc(100% - var(--sidebar-width));
+    display: flex;
+    flex-direction: column;
+    height: 100dvh;
+}
+
+/* ========== TOP NAVBAR ========== */
+header.topnav {
+    height: var(--topnav-height);
+    border-bottom: 1px solid var(--outline-variant);
+    background: var(--surface);
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 0 1.5rem;
+    flex-shrink: 0;
+    position: sticky;
+    top: 0;
+    z-index: 30;
+
+    h1 {
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: var(--on-surface);
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        margin-right: auto;
+    }
+
+    search {
+        position: relative;
+        width: 15rem;
+
+        .material-symbols-outlined {
+            position: absolute;
+            left: 0.5rem;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 1.25rem;
+            color: var(--on-surface-variant);
+            pointer-events: none;
+        }
+
+        input {
+            width: 100%;
+            height: 2rem;
+            padding: 0 0.5rem 0 2rem;
+            border: 1px solid var(--outline-variant);
+            border-radius: var(--border-radius-sm);
+            background: var(--surface-container-lowest);
+            font-size: 0.75rem;
+            color: var(--on-surface);
+            outline: none;
+            transition: border-color var(--transition);
+
+            &:focus {
+                border-color: var(--primary);
+            }
+
+            &::placeholder {
+                color: var(--on-surface-variant);
+                opacity: 0.6;
+            }
+        }
+    }
+}
+
+/* ========== MAIN CONTENT ========== */
+.main-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+/* ========== RESPONSIVE ========== */
+@media (max-width: 64em) {
+    header.topnav search {
+        width: 10rem;
+    }
+}
+
+@media (max-width: 48em) {
+    aside.sidebar {
+        width: 3.5rem;
+        padding: 0.5rem;
+
+        .brand h1,
+        .brand p,
+        nav a.link span:not(.material-symbols-outlined),
+        .cta span:not(.material-symbols-outlined),
+        .user .info {
+            display: none;
+        }
+
+        .cta {
+            padding: 0;
+            width: 2.5rem;
+            height: 2.5rem;
+            margin: 0 auto 1rem;
+            border-radius: 50%;
+        }
+
+        nav a.link {
+            justify-content: center;
+            padding: 0.75rem 0.5rem;
+        }
+
+        .user {
+            justify-content: center;
+        }
+    }
+
+    main {
+        margin-left: 3.5rem;
+        width: calc(100% - 3.5rem);
+    }
+
+    header.topnav {
+        padding: 0 0.75rem;
+
+        search {
+            display: none;
+        }
+    }
+
+    .main-content {
+        padding: 0.5rem;
+    }
+}
diff --git a/server/static/order.js b/server/static/order.js
index a655658..ca03351 100644
--- a/server/static/order.js
+++ b/server/static/order.js
@@ -3,41 +3,40 @@ function changeCake(id, name, price, delta) {
   if (input != null) {
     var qty = Number(input.value) + delta;
     if (qty <= 0) {
-      var item = input.closest('.summary-item');
+      var item = input.closest('li');
       if (item) item.remove();
       updateTotals();
       updateCatalogueQty(id, 0);
       return;
     }
     input.value = qty;
-    var item = input.closest('.summary-item');
-    item.querySelector('.cake-qty').innerText = qty;
-    item.querySelector('.cake-total').innerText = (price * qty) + ' PLN';
+    var item = input.closest('li');
+    item.querySelector('.qty').innerText = qty;
+    item.querySelector('.price').innerText = (price * qty) + ' PLN';
     updateTotals();
     updateCatalogueQty(id, qty);
     return;
   }
   if (delta <= 0) return;
-  var item = document.createElement('div');
-  item.className = 'summary-item';
+  var item = document.createElement('li');
   item.setAttribute('data-cake-id', id);
   item.innerHTML =
-    '<div class="summary-item-info">' +
-      '<div class="summary-item-name cake-name">' + name + '</div>' +
-      '<div class="summary-item-detail cake-price">' + price + ' PLN × <span class="cake-qty">1</span></div>' +
+    '<div style="flex:1;min-width:0;padding-right:0.5rem">' +
+      '<div class="name">' + name + '</div>' +
+      '<div class="detail">' + price + ' PLN × <span class="qty">1</span></div>' +
     '</div>' +
-    '<div class="summary-item-price cake-total">' + price + ' PLN</div>' +
-    '<button type="button" class="summary-item-remove" onclick="removeCake(this)">' +
+    '<div class="price">' + price + ' PLN</div>' +
+    '<button type="button" class="remove" onclick="removeCake(this)">' +
       '<span class="material-symbols-outlined">close</span>' +
     '</button>' +
     '<input type="hidden" name="cake[' + id + ']" value="1">';
-  document.getElementById('basket_items').appendChild(item);
+  document.getElementById('basket-items').appendChild(item);
   updateTotals();
   updateCatalogueQty(id, 1);
 }
 
 function removeCake(btn) {
-  var item = btn.closest('.summary-item');
+  var item = btn.closest('li');
   var id = item.getAttribute('data-cake-id');
   item.remove();
   updateTotals();
@@ -46,11 +45,11 @@ function removeCake(btn) {
 
 function updateTotals() {
   var subtotal = 0;
-  var items = document.querySelectorAll('#basket_items .summary-item');
+  var items = document.querySelectorAll('#basket-items li');
   items.forEach(function(item) {
-    var priceText = item.querySelector('.cake-price').innerText;
+    var priceText = item.querySelector('.detail').innerText;
     var price = Number(priceText.split(' ')[0]);
-    var qty = Number(item.querySelector('.cake-qty').innerText);
+    var qty = Number(item.querySelector('.qty').innerText);
     subtotal += price * qty;
   });
   var paid = Number(document.querySelector('[name="paid"]')?.value || 0);
@@ -66,7 +65,7 @@ function updateCatalogueQty(id, qty) {
 
 function filterCatalogue(input) {
   var query = input.value.toLowerCase();
-  var items = document.querySelectorAll('.catalogue-item');
+  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';
diff --git a/server/static/style.css b/server/static/style.css
index b4dc6b7..24fbd81 100644
--- a/server/static/style.css
+++ b/server/static/style.css
@@ -1,1259 +1,7 @@
-:root {
-    --surface: #fff8f0;
-    --surface-container-low: #faf3e7;
-    --surface-container: #f5ede0;
-    --surface-container-high: #ede3d4;
-    --surface-container-highest: #e5d9c8;
-    --surface-container-lowest: #ffffff;
-    --surface-bright: #fff8f0;
-    --surface-dim: #e5d9c8;
-    --primary: #8c4d50;
-    --primary-hover: #7a3f42;
-    --primary-container: #fcacaf;
-    --on-primary: #ffffff;
-    --on-surface: #363227;
-    --on-surface-variant: #645f52;
-    --outline: #b9b1a3;
-    --outline-variant: #d4cdbe;
-    --secondary: #b45309;
-    --secondary-container: #fd8a42;
-    --on-secondary-container: #682c00;
-    --error: #ba1a1a;
-    --error-container: #ffdad6;
-    --on-error-container: #93000a;
-    --success-bg: #dcfce7;
-    --success-text: #166534;
-    --warning-bg: #fef08a;
-    --warning-text: #854d0e;
-    --danger-bg: #fee2e2;
-    --danger-text: #991b1b;
-    --info-bg: #f1f5f9;
-    --info-text: #475569;
-    --sidebar-width: 280px;
-    --topnav-height: 56px;
-    --border-radius-sm: 4px;
-    --border-radius-md: 8px;
-    --border-radius-lg: 12px;
-    --border-radius-full: 9999px;
-    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
-    --transition: 0.15s ease;
-}
-
-*, *::before, *::after {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-
-html, body {
-    height: 100%;
-    overflow: hidden;
-}
-
-body {
-    font-family: var(--font-family);
-    font-size: 14px;
-    line-height: 1.5;
-    color: var(--on-surface);
-    background: var(--surface);
-    display: flex;
-}
-
-input, select, textarea, button {
-    font-family: inherit;
-}
-
-/* ========== SIDEBAR ========== */
-.sidebar {
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: var(--sidebar-width);
-    background: var(--surface-container-lowest);
-    border-right: 1px solid var(--outline-variant);
-    display: flex;
-    flex-direction: column;
-    padding: 16px;
-    z-index: 40;
-}
-
-.sidebar-brand {
-    margin-bottom: 24px;
-    padding: 0 8px;
-}
-
-.sidebar-brand h1 {
-    font-size: 20px;
-    font-weight: 700;
-    color: var(--primary);
-    letter-spacing: -0.01em;
-    line-height: 1.3;
-}
-
-.sidebar-brand p {
-    font-size: 13px;
-    color: var(--on-surface-variant);
-    margin-top: 4px;
-}
-
-.sidebar-cta {
-    width: 100%;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    background: var(--primary);
-    color: var(--on-primary);
-    border: none;
-    border-radius: var(--border-radius-md);
-    font-size: 12px;
-    font-weight: 600;
-    letter-spacing: 0.02em;
-    cursor: pointer;
-    text-decoration: none;
-    margin-bottom: 24px;
-    transition: opacity var(--transition);
-}
-
-.sidebar-cta:hover {
-    opacity: 0.9;
-}
-
-.sidebar-cta .material-symbols-outlined {
-    font-size: 18px;
-}
-
-.sidebar-nav {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.sidebar-link {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 12px 16px;
-    border-radius: var(--border-radius-md);
-    font-size: 12px;
-    font-weight: 500;
-    text-decoration: none;
-    color: var(--on-surface-variant);
-    transition: all var(--transition);
-    cursor: pointer;
-}
-
-.sidebar-link:hover {
-    background: var(--surface-container-low);
-    color: var(--on-surface);
-}
-
-.sidebar-link.active {
-    background: var(--primary-container);
-    color: var(--primary);
-    font-weight: 700;
-}
-
-.sidebar-link .material-symbols-outlined {
-    font-size: 20px;
-}
-
-.sidebar-footer {
-    margin-top: auto;
-    padding-top: 16px;
-    border-top: 1px solid var(--outline-variant);
-}
-
-.sidebar-user {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 8px;
-    margin-top: 12px;
-}
-
-.sidebar-user-avatar {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    background: var(--surface-container-high);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--on-surface);
-    font-size: 14px;
-    font-weight: 700;
-    flex-shrink: 0;
-}
-
-.sidebar-user-info {
-    display: flex;
-    flex-direction: column;
-}
-
-.sidebar-user-name {
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--on-surface);
-}
-
-.sidebar-user-status {
-    font-size: 11px;
-    color: var(--on-surface-variant);
-}
-
-/* ========== MAIN LAYOUT ========== */
-.app-body {
-    margin-left: var(--sidebar-width);
-    width: calc(100% - var(--sidebar-width));
-    display: flex;
-    flex-direction: column;
-    height: 100dvh;
-}
-
-/* ========== TOP NAVBAR ========== */
-.topnav {
-    height: var(--topnav-height);
-    border-bottom: 1px solid var(--outline-variant);
-    background: var(--surface);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 24px;
-    flex-shrink: 0;
-    position: sticky;
-    top: 0;
-    z-index: 30;
-}
-
-.topnav-left {
-    display: flex;
-    align-items: center;
-    gap: 24px;
-    flex: 1;
-    min-width: 0;
-}
-
-.topnav-title {
-    font-size: 20px;
-    font-weight: 700;
-    color: var(--on-surface);
-    letter-spacing: -0.01em;
-    white-space: nowrap;
-}
-
-.topnav-search {
-    position: relative;
-    width: 240px;
-}
-
-.topnav-search .material-symbols-outlined {
-    position: absolute;
-    left: 8px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 18px;
-    color: var(--on-surface-variant);
-    pointer-events: none;
-}
-
-.topnav-search input {
-    width: 100%;
-    height: 32px;
-    padding: 0 8px 0 32px;
-    border: 1px solid var(--outline-variant);
-    border-radius: var(--border-radius-sm);
-    background: var(--surface-container-lowest);
-    font-size: 13px;
-    color: var(--on-surface);
-    outline: none;
-    transition: border-color var(--transition);
-}
-
-.topnav-search input:focus {
-    border-color: var(--primary);
-}
-
-.topnav-search input::placeholder {
-    color: var(--on-surface-variant);
-    opacity: 0.6;
-}
-
-.topnav-center {
-    display: flex;
-    align-items: center;
-    gap: 24px;
-}
-
-.topnav-period {
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--on-surface-variant);
-    text-decoration: none;
-    cursor: pointer;
-    padding-bottom: 2px;
-    transition: color var(--transition);
-}
-
-.topnav-period:hover {
-    color: var(--on-surface);
-}
-
-.topnav-period.active {
-    color: var(--primary);
-    font-weight: 700;
-    border-bottom: 2px solid var(--secondary);
-}
-
-.topnav-right {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-}
-
-.topnav-btn {
-    height: 32px;
-    padding: 0 16px;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    border: 1px solid var(--outline-variant);
-    border-radius: var(--border-radius-sm);
-    background: transparent;
-    color: var(--on-surface);
-    font-size: 12px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all var(--transition);
-    text-decoration: none;
-}
-
-.topnav-btn:hover {
-    background: var(--surface-container-low);
-}
-
-.topnav-btn .material-symbols-outlined {
-    font-size: 16px;
-}
-
-.topnav-icon {
-    color: var(--on-surface-variant);
-    cursor: pointer;
-    transition: color var(--transition);
-    text-decoration: none;
-    display: flex;
-    align-items: center;
-}
-
-.topnav-icon:hover {
-    color: var(--primary);
-}
-
-.topnav-icon .material-symbols-outlined {
-    font-size: 22px;
-}
-
-/* ========== MAIN CONTENT ========== */
-.main-content {
-    flex: 1;
-    overflow-y: auto;
-    padding: 16px;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-/* ========== CARDS / SECTIONS ========== */
-.card {
-    background: var(--surface-container-lowest);
-    border: 1px solid var(--outline-variant);
-    border-radius: var(--border-radius-md);
-    display: flex;
-    flex-direction: column;
-}
-
-.card-header {
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--outline-variant);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: var(--surface-container-low);
-}
-
-.card-header h2 {
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--on-surface);
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.card-header h2 .material-symbols-outlined {
-    font-size: 18px;
-    color: var(--on-surface-variant);
-}
-
-.card-body {
-    padding: 16px;
-    flex: 1;
-}
-
-/* ========== METRICS GRID ========== */
-.metrics-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 12px;
-}
-
-.metric-card {
-    background: var(--surface-container-lowest);
-    border: 1px solid var(--outline-variant);
-    border-radius: var(--border-radius-md);
-    padding: 16px;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.metric-label {
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--on-surface-variant);
-    letter-spacing: 0.02em;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-}
-
-.metric-label .material-symbols-outlined {
-    font-size: 14px;
-}
-
-.metric-value {
-    font-size: 28px;
-    font-weight: 700;
-    color: var(--on-surface);
-    line-height: 1.2;
-}
-
-.metric-change {
-    font-size: 11px;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    gap: 2px;
-}
-
-.metric-change.positive {
-    color: var(--success-text);
-}
-
-.metric-change.warning {
-    color: var(--warning-text);
-}
-
-.metric-change .material-symbols-outlined {
-    font-size: 14px;
-}
-
-/* ========== SPLIT PANE ========== */
-.split-pane {
-    display: flex;
-    gap: 16px;
-    flex: 1;
-    min-height: 0;
-}
-
-.split-pane-left {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    min-width: 0;
-}
-
-.split-pane-right {
-    width: 320px;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-}
-
-/* ========== FORM ========== */
-.form-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 12px;
-}
-
-.form-group {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.form-group label {
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--on-surface-variant);
-    letter-spacing: 0.02em;
-}
-
-.form-input {
-    height: 32px;
-    padding: 0 8px;
-    border: 1px solid var(--outline-variant);
-    border-radius: var(--border-radius-sm);
-    background: var(--surface-container-lowest);
-    font-size: 13px;
-    color: var(--on-surface);
-    outline: none;
-    transition: border-color var(--transition);
-    width: 100%;
-}
-
-.form-input:focus {
-    border-color: var(--primary);
-}
-
-.form-input::placeholder {
-    color: var(--on-surface-variant);
-    opacity: 0.6;
-}
-
-textarea.form-input {
-    height: auto;
-    padding: 8px;
-    resize: vertical;
-}
-
-select.form-input {
-    appearance: auto;
-}
-
-/* ========== CATALOGUE GRID ========== */
-.catalogue-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-    gap: 8px;
-}
-
-.catalogue-item {
-    border: 1px solid var(--outline-variant);
-    border-radius: var(--border-radius-sm);
-    padding: 8px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    background: var(--surface-bright);
-    transition: border-color var(--transition);
-}
-
-.catalogue-item:hover {
-    border-color: var(--outline);
-}
-
-.catalogue-item-top {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-}
-
-.catalogue-item-icon {
-    width: 32px;
-    height: 32px;
-    border-radius: var(--border-radius-sm);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    font-size: 16px;
-}
-
-.catalogue-item-icon.icon-cake {
-    background: var(--primary-container);
-    color: var(--primary);
-}
-
-.catalogue-item-icon.icon-cookie {
-    background: var(--surface-container-high);
-    color: var(--on-surface-variant);
-}
-
-.catalogue-item-name {
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--on-surface);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.catalogue-item-price {
-    font-size: 13px;
-    color: var(--on-surface-variant);
-}
-
-.catalogue-item-actions {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 8px;
-    padding-top: 8px;
-    border-top: 1px solid var(--outline-variant);
-}
-
-.qty-btn {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    border-radius: var(--border-radius-sm);
-    cursor: pointer;
-    font-size: 14px;
-    transition: all var(--transition);
-}
-
-.qty-btn.qty-minus {
-    background: var(--surface-container-low);
-    color: var(--on-surface-variant);
-}
-
-.qty-btn.qty-minus:hover {
-    background: var(--outline-variant);
-    color: var(--on-surface);
-}
-
-.qty-btn.qty-plus {
-    background: var(--surface-container-high);
-    color: var(--on-surface);
-}
-
-.qty-btn.qty-plus:hover {
-    background: var(--primary);
-    color: var(--on-primary);
-}
-
-.qty-btn .material-symbols-outlined {
-    font-size: 14px;
-}
-
-.qty-value {
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--on-surface);
-    width: 24px;
-    text-align: center;
-}
-
-/* ========== ORDER SUMMARY ========== */
-.summary-lineitems {
-    flex: 1;
-    overflow-y: auto;
-    padding: 16px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.summary-item {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    padding-bottom: 8px;
-    border-bottom: 1px solid var(--outline-variant);
-}
-
-.summary-item-info {
-    flex: 1;
-    min-width: 0;
-    padding-right: 8px;
-}
-
-.summary-item-name {
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--on-surface);
-}
-
-.summary-item-detail {
-    font-size: 13px;
-    color: var(--on-surface-variant);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.summary-item-price {
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--on-surface);
-    white-space: nowrap;
-}
-
-.summary-item-remove {
-    color: var(--error);
-    cursor: pointer;
-    transition: opacity var(--transition);
-    background: none;
-    border: none;
-    margin-left: 4px;
-}
-
-.summary-item-remove:hover {
-    opacity: 0.8;
-}
-
-.summary-item-remove .material-symbols-outlined {
-    font-size: 16px;
-}
-
-.summary-totals {
-    padding: 16px;
-    border-top: 1px solid var(--outline-variant);
-    background: var(--surface-bright);
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.summary-total-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 13px;
-    color: var(--on-surface-variant);
-}
-
-.summary-total-row.total {
-    font-size: 16px;
-    font-weight: 700;
-    color: var(--on-surface);
-    padding-top: 8px;
-    border-top: 1px solid var(--outline-variant);
-}
-
-.btn-finalize {
-    width: 100%;
-    height: 40px;
-    margin-top: 8px;
-    background: var(--primary);
-    color: var(--on-primary);
-    border: none;
-    border-radius: var(--border-radius-sm);
-    font-size: 12px;
-    font-weight: 600;
-    letter-spacing: 0.02em;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    cursor: pointer;
-    transition: opacity var(--transition);
-}
-
-.btn-finalize:hover {
-    opacity: 0.9;
-}
-
-.btn-finalize .material-symbols-outlined {
-    font-size: 18px;
-}
-
-/* ========== TABLES ========== */
-.table-container {
-    overflow-x: auto;
-}
-
-.data-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 13px;
-}
-
-.data-table thead {
-    background: var(--surface-container-low);
-    border-bottom: 1px solid var(--outline-variant);
-}
-
-.data-table th {
-    padding: 8px 12px;
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--on-surface-variant);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    text-align: left;
-    white-space: nowrap;
-}
-
-.data-table th.right {
-    text-align: right;
-}
-
-.data-table th.center {
-    text-align: center;
-}
-
-.data-table td {
-    padding: 8px 12px;
-    color: var(--on-surface);
-    white-space: nowrap;
-}
-
-.data-table tbody tr {
-    border-bottom: 1px solid var(--outline-variant);
-    transition: background var(--transition);
-    height: 40px;
-}
-
-.data-table tbody tr:hover {
-    background: var(--surface-container-low);
-}
-
-.data-table tbody tr:nth-child(even) {
-    background: var(--surface-bright);
-}
-
-.data-table tbody tr:nth-child(even):hover {
-    background: var(--surface-container-low);
-}
-
-.data-table td .truncate {
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: block;
-}
-
-.data-table .order-id {
-    font-weight: 700;
-    color: var(--primary);
-}
-
-.data-table .customer-name {
-    font-weight: 500;
-}
-
-.data-table .text-right {
-    text-align: right;
-}
-
-.data-table .text-center {
-    text-align: center;
-}
-
-.data-table .text-on-surface-variant {
-    color: var(--on-surface-variant);
-}
-
-/* ========== STATUS CHIPS ========== */
-.status-chip {
-    display: inline-flex;
-    align-items: center;
-    padding: 2px 8px;
-    border-radius: var(--border-radius-full);
-    font-size: 10px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.02em;
-}
-
-.status-chip.ready {
-    background: var(--success-bg);
-    color: var(--success-text);
-}
-
-.status-chip.decorating {
-    background: var(--warning-bg);
-    color: var(--warning-text);
-}
-
-.status-chip.baking {
-    background: var(--danger-bg);
-    color: var(--danger-text);
-}
-
-.status-chip.queued {
-    background: var(--info-bg);
-    color: var(--info-text);
-}
-
-.status-chip.accepted {
-    background: #fff3e0;
-    color: #e65100;
-}
-
-.status-chip.done {
-    background: var(--success-bg);
-    color: var(--success-text);
-}
-
-/* ========== TABLE PAGINATION ========== */
-.table-footer {
-    padding: 8px 12px;
-    border-top: 1px solid var(--outline-variant);
-    background: var(--surface-container-lowest);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 11px;
-    color: var(--on-surface-variant);
-}
-
-.pagination {
-    display: flex;
-    gap: 4px;
-    align-items: center;
-}
-
-.pagination-btn {
-    width: 24px;
-    height: 24px;
-    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: 12px;
-}
-
-.pagination-btn:hover {
-    background: var(--surface-container-low);
-}
-
-.pagination-btn:disabled {
-    opacity: 0.5;
-    cursor: default;
-}
-
-.pagination-btn .material-symbols-outlined {
-    font-size: 14px;
-}
-
-.pagination-btn.active {
-    background: var(--primary);
-    color: var(--on-primary);
-    border-color: var(--primary);
-}
-
-/* ========== BADGE PILLS ========== */
-.badge-pill {
-    display: inline-flex;
-    align-items: center;
-    padding: 2px 8px;
-    border-radius: var(--border-radius-full);
-    font-size: 10px;
-    font-weight: 600;
-}
-
-.badge-pill.signature {
-    background: var(--primary-container);
-    color: var(--primary);
-}
-
-.badge-pill.seasonal {
-    background: var(--surface-container-high);
-    color: var(--on-surface);
-}
-
-/* ========== FORM CARD (single column) ========== */
-.form-card {
-    max-width: 480px;
-}
-
-.form-card .card-body {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.form-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-    padding-top: 8px;
-    border-top: 1px solid var(--outline-variant);
-    margin-top: 8px;
-}
-
-.btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    padding: 0 16px;
-    height: 40px;
-    border: none;
-    border-radius: var(--border-radius-sm);
-    font-size: 12px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all var(--transition);
-    text-decoration: none;
-}
-
-.btn-primary {
-    background: var(--primary);
-    color: var(--on-primary);
-}
-
-.btn-primary:hover {
-    opacity: 0.9;
-}
-
-.btn-outline {
-    background: transparent;
-    border: 1px solid var(--outline-variant);
-    color: var(--on-surface);
-}
-
-.btn-outline:hover {
-    background: var(--surface-container-high);
-}
-
-.btn-sm {
-    height: 32px;
-    padding: 0 12px;
-}
-
-.btn .material-symbols-outlined {
-    font-size: 18px;
-}
-
-/* ========== TABLE ACTIONS ========== */
-.action-btn {
-    color: var(--on-surface-variant);
-    cursor: pointer;
-    transition: color var(--transition);
-    background: none;
-    border: none;
-}
-
-.action-btn:hover {
-    color: var(--primary);
-}
-
-.action-btn .material-symbols-outlined {
-    font-size: 18px;
-}
-
-/* ========== CONFIRMATION ========== */
-.confirmation {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    flex: 1;
-    gap: 8px;
-    text-align: center;
-}
-
-.confirmation h2 {
-    font-size: 20px;
-    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: 40px;
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
-    width: 100%;
-    max-width: 400px;
-    position: relative;
-    overflow: hidden;
-}
-
-.login-card::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: linear-gradient(90deg, var(--primary), var(--primary-container));
-}
-
-.login-icon {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 24px;
-    color: var(--primary);
-}
-
-.login-card h1 {
-    font-size: 24px;
-    font-weight: 700;
-    margin-bottom: 24px;
-    color: var(--on-background);
-    text-align: center;
-    letter-spacing: -0.02em;
-}
-
-.login-card form {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.login-card label {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--on-surface-variant);
-}
-
-.login-card input {
-    padding: 8px 12px;
-    border: 1px solid var(--outline-variant);
-    border-radius: var(--border-radius-sm);
-    font-size: 14px;
-    font-family: inherit;
-    background-color: var(--surface);
-    color: var(--on-surface);
-    transition: border-color var(--transition);
-}
-
-.login-card input:focus {
-    outline: none;
-    border-color: var(--primary);
-}
-
-.login-card button {
-    padding: 10px 32px;
-    background-color: var(--primary);
-    color: #fff;
-    border: none;
-    border-radius: var(--border-radius-md);
-    font-size: 14px;
-    font-weight: 600;
-    font-family: inherit;
-    cursor: pointer;
-    transition: opacity var(--transition);
-    margin-top: 8px;
-}
-
-.login-card button:hover {
-    opacity: 0.9;
-}
-
-/* ========== HTMX ========== */
-.htmx-request {
-    opacity: 0.6;
-    pointer-events: none;
-}
-
-/* ========== HIDDEN ========== */
-.hidden {
-    display: none !important;
-}
-
-/* ========== RESPONSIVE ========== */
-@media (max-width: 1024px) {
-    .metrics-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-
-    .split-pane {
-        flex-direction: column;
-    }
-
-    .split-pane-right {
-        width: 100%;
-    }
-
-    .form-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-
-    .topnav-center {
-        display: none;
-    }
-
-    .topnav-search {
-        width: 160px;
-    }
-}
-
-@media (max-width: 768px) {
-    .sidebar {
-        width: 56px;
-        padding: 8px;
-    }
-
-    .sidebar-brand h1,
-    .sidebar-brand p,
-    .sidebar-link span:not(.material-symbols-outlined),
-    .sidebar-cta span:not(.material-symbols-outlined),
-    .sidebar-user-info {
-        display: none;
-    }
-
-    .sidebar-cta {
-        padding: 0;
-        width: 40px;
-        height: 40px;
-        margin: 0 auto 16px;
-        border-radius: 50%;
-    }
-
-    .sidebar-link {
-        justify-content: center;
-        padding: 12px 8px;
-    }
-
-    .sidebar-user {
-        justify-content: center;
-    }
-
-    .app-body {
-        margin-left: 56px;
-        width: calc(100% - 56px);
-    }
-
-    .topnav {
-        padding: 0 12px;
-    }
-
-    .topnav-search {
-        display: none;
-    }
-
-    .metrics-grid {
-        grid-template-columns: 1fr 1fr;
-    }
-
-    .form-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .main-content {
-        padding: 8px;
-    }
-}
+@import url("base.css");
+@import url("layout.css");
+@import url("card.css");
+@import url("form.css");
+@import url("catalogue.css");
+@import url("basket.css");
+@import url("component.css");
diff --git a/server/templates/cake.templ b/server/templates/cake.templ
index 362375a..9a7cc07 100644
--- a/server/templates/cake.templ
+++ b/server/templates/cake.templ
@@ -13,7 +13,7 @@ templ CakePage(cake models.Cake) {
 templ CakeForm(cake models.Cake) {
 	<div class="form-card">
 		<section class="card">
-			<div class="card-header">
+			<header>
 				<h2>
 					<span class="material-symbols-outlined">cake</span>
 					if cake.ID != 0 {
@@ -22,8 +22,8 @@ templ CakeForm(cake models.Cake) {
 						Nowe ciasto
 					}
 				</h2>
-			</div>
-			<form method="post" class="card-body">
+			</header>
+			<form method="post">
 				<input type="hidden" name="id" value={ strconv.Itoa(cake.ID) }/>
 				<div class="form-group">
 					<label>Nazwa *</label>
@@ -34,8 +34,8 @@ templ CakeForm(cake models.Cake) {
 					<input class="form-input" type="number" name="price" min="0" value={ cake.Price.String() }/>
 				</div>
 				<div class="form-actions">
-					<a href="/cakes" class="btn btn-outline">Anuluj</a>
-					<button type="submit" class="btn btn-primary">
+					<a href="/cakes" class="btn outline">Anuluj</a>
+					<button type="submit" class="btn primary">
 						<span class="material-symbols-outlined">save</span>
 						Zapisz ciasto
 					</button>
diff --git a/server/templates/cakes.templ b/server/templates/cakes.templ
index be498ef..6adfafe 100644
--- a/server/templates/cakes.templ
+++ b/server/templates/cakes.templ
@@ -12,21 +12,21 @@ templ CakesPage(cakes []models.Cake) {
 
 templ CakesMain(cakes []models.Cake) {
 	<section class="card">
-		<div class="card-header">
+		<header>
 			<h2>
 				<span class="material-symbols-outlined">inventory_2</span>
 				Zarządzanie katalogiem
 			</h2>
-			<a href="/cake" class="btn btn-primary btn-sm">
+			<a href="/cake" class="btn primary sm">
 				<span class="material-symbols-outlined">add</span>
 				Nowe ciasto
 			</a>
-		</div>
+		</header>
 		<div class="table-container">
 			<table class="data-table">
 				<thead>
 					<tr>
-						<th style="width:32px"></th>
+						<th style="width:2rem"></th>
 						<th>Nazwa</th>
 						<th>SKU</th>
 						<th class="right">Cena bazowa</th>
@@ -37,12 +37,12 @@ templ CakesMain(cakes []models.Cake) {
 					for _, c := range cakes {
 						<tr>
 							<td>
-								<div class="catalogue-item-icon icon-cake" style="width:28px;height:28px">
-									<span class="material-symbols-outlined" style="font-size:14px">cake</span>
+								<div class="icon cake" style="width:1.75rem;height:1.75rem">
+									<span class="material-symbols-outlined" style="font-size:1rem">cake</span>
 								</div>
 							</td>
 							<td style="font-weight:500">{ c.Name }</td>
-							<td class="text-on-surface-variant">#{ strconv.Itoa(c.ID) }</td>
+							<td class="text-muted">#{ strconv.Itoa(c.ID) }</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">
@@ -54,17 +54,5 @@ templ CakesMain(cakes []models.Cake) {
 				</tbody>
 			</table>
 		</div>
-		<div class="table-footer">
-			<span>Pokazuje 1-{ strconv.Itoa(len(cakes)) } z { strconv.Itoa(len(cakes)) }</span>
-			<div class="pagination">
-				<button class="pagination-btn" disabled>
-					<span class="material-symbols-outlined">chevron_left</span>
-				</button>
-				<button class="pagination-btn active">1</button>
-				<button class="pagination-btn" disabled>
-					<span class="material-symbols-outlined">chevron_right</span>
-				</button>
-			</div>
-		</div>
 	</section>
 }
diff --git a/server/templates/confirmation.templ b/server/templates/confirmation.templ
index 2307ef0..bc5dbcc 100644
--- a/server/templates/confirmation.templ
+++ b/server/templates/confirmation.templ
@@ -7,12 +7,12 @@ templ Confirmation(title string, id int) {
 }
 
 templ ConfirmationBody(id int) {
-	<div class="confirmation">
-		<span class="material-symbols-outlined" style="font-size:48px;color:var(--success-text)">check_circle</span>
+	<section class="confirmation">
+		<span class="material-symbols-outlined" style="font-size:3rem;color:var(--success-text)">check_circle</span>
 		<h2>{ strconv.Itoa(id) } — zapisano</h2>
-		<a href="/orders" class="btn btn-primary" style="margin-top:16px">
+		<a href="/orders" class="btn primary" style="margin-top:1rem">
 			<span class="material-symbols-outlined">arrow_back</span>
 			Powrót do zamówień
 		</a>
-	</div>
+	</section>
 }
diff --git a/server/templates/layout.templ b/server/templates/layout.templ
index 2af9aca..03f7ef5 100644
--- a/server/templates/layout.templ
+++ b/server/templates/layout.templ
@@ -9,28 +9,26 @@ templ Layout(title string, main templ.Component) {
 			<title>{ title } — Zamówienia ciast</title>
 			<link rel="stylesheet" href="/static/fonts/inter.css" />
 			<link rel="stylesheet" href="/static/fonts/material.css" />
+			<link rel="stylesheet" href="/static/style.css" />
 			<script src="/static/htmx2.04.js" defer></script>
 			<script src="/static/order.js"></script>
-			<link rel="stylesheet" href="/static/style.css" />
 		</head>
 		<body>
 			<aside class="sidebar">
 				@Nav()
 			</aside>
-			<div class="app-body">
+			<main>
 				<header class="topnav">
-					<div class="topnav-left">
-						<h1 class="topnav-title">{ title }</h1>
-					</div>
+					<h1>{ title }</h1>
 				</header>
 				<div class="main-content">
 					@main
 				</div>
-			</div>
+			</main>
 			<script>
 				(function() {
 					var path = window.location.pathname;
-					var links = document.querySelectorAll('.sidebar-link');
+					var links = document.querySelectorAll('.link');
 					for (var i = 0; i < links.length; i++) {
 						if (links[i].getAttribute('href') === path) {
 							links[i].classList.add('active');
diff --git a/server/templates/nav.templ b/server/templates/nav.templ
index aee619b..281a766 100644
--- a/server/templates/nav.templ
+++ b/server/templates/nav.templ
@@ -1,18 +1,18 @@
 package templates
 
 templ Nav() {
-	<a href="/order" class="sidebar-cta">
+	<a href="/order" class="cta">
 		<span class="material-symbols-outlined">add</span>
 		<span>Nowe zamówienie</span>
 	</a>
-	<div class="sidebar-nav">
-		<a href="/orders" class="sidebar-link">
+	<nav>
+		<a href="/orders" class="link">
 			<span class="material-symbols-outlined">dashboard</span>
 			<span>Panel główny</span>
 		</a>
-		<a href="/cakes" class="sidebar-link">
+		<a href="/cakes" class="link">
 			<span class="material-symbols-outlined">inventory_2</span>
 			<span>Katalog</span>
 		</a>
-	</div>
+	</nav>
 }
diff --git a/server/templates/order.templ b/server/templates/order.templ
index ec8f126..efc0cee 100644
--- a/server/templates/order.templ
+++ b/server/templates/order.templ
@@ -13,15 +13,15 @@ templ OrderPage(order models.Order, catalogue []models.Cake) {
 templ OrderForm(order models.Order, catalogue []models.Cake) {
 	<form method="post" class="split-pane" style="flex:1;min-height:0">
 		<input type="hidden" name="id" value={ strconv.Itoa(order.ID) }/>
-		<div class="split-pane-left">
+		<div style="flex:1;display:flex;flex-direction:column;gap:1rem;min-width:0">
 			<section class="card">
-				<div class="card-header">
+				<header>
 					<h2>
 						<span class="material-symbols-outlined">person_add</span>
 						Dane klienta
 					</h2>
-				</div>
-				<div class="card-body">
+				</header>
+				<div>
 					<div class="form-grid">
 						<div class="form-group">
 							<label>Imię *</label>
@@ -67,78 +67,78 @@ templ OrderForm(order models.Order, catalogue []models.Cake) {
 					</div>
 				</div>
 			</section>
-			<section class="card" style="flex:1;min-height:200px">
-				<div class="card-header">
+			<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 class="topnav-search" style="width:180px">
-						<span class="material-symbols-outlined" style="left:6px;font-size:14px">search</span>
-						<input class="form-input" style="height:28px;padding-left:26px;font-size:12px" type="text" placeholder="Filtruj produkty..." oninput="filterCatalogue(this)"/>
+					<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>
-				</div>
-				<div class="card-body" style="overflow-y:auto">
-					<div class="catalogue-grid" id="catalogue-grid">
+				</header>
+				<div style="overflow-y:auto;padding:1rem">
+					<ul id="catalogue-grid">
 						for _, c := range catalogue {
-							<div class="catalogue-item" data-name={ c.Name }>
-								<div class="catalogue-item-top">
-									<div class="catalogue-item-icon icon-cake">
-										<span class="material-symbols-outlined" style="font-size:16px">cake</span>
+							<li data-name={ c.Name }>
+								<div>
+									<div class="icon cake">
+										<span class="material-symbols-outlined" style="font-size:1rem">cake</span>
 									</div>
 									<div style="min-width:0">
-										<div class="catalogue-item-name">{ c.Name }</div>
-										<div class="catalogue-item-price">{ c.Price.String() } PLN</div>
+										<div class="name">{ c.Name }</div>
+										<div class="price">{ c.Price.String() } PLN</div>
 									</div>
 								</div>
-								<div class="catalogue-item-actions">
-									<button type="button" class="qty-btn qty-minus" onclick={ templ.JSFuncCall("changeCake", c.ID, c.Name, c.Price, -1) }>
+								<div class="actions">
+									<button type="button" class="qty minus" onclick={ templ.JSFuncCall("changeCake", c.ID, c.Name, c.Price, -1) }>
 										<span class="material-symbols-outlined">remove</span>
 									</button>
-									<span class="qty-value" id={ "qty-" + strconv.Itoa(c.ID) }>0</span>
-									<button type="button" class="qty-btn qty-plus" onclick={ templ.JSFuncCall("changeCake", c.ID, c.Name, c.Price, 1) }>
+									<span class="value" id={ "qty-" + strconv.Itoa(c.ID) }>0</span>
+									<button type="button" class="qty plus" onclick={ templ.JSFuncCall("changeCake", c.ID, c.Name, c.Price, 1) }>
 										<span class="material-symbols-outlined">add</span>
 									</button>
 								</div>
-							</div>
+							</li>
 						}
-					</div>
+					</ul>
 				</div>
 			</section>
 		</div>
-		<aside class="split-pane-right">
+		<aside style="width:20rem;flex-shrink:0;display:flex;flex-direction:column">
 			<section class="card" style="flex:1;display:flex;flex-direction:column">
-				<div class="card-header">
+				<header>
 					<h2>
 						<span class="material-symbols-outlined">receipt_long</span>
 						Podsumowanie
 					</h2>
-				</div>
-				<div class="summary-lineitems" id="basket_items">
+				</header>
+				<ul id="basket-items">
 					for _, c := range order.Cakes {
-						<div class="summary-item" data-cake-id={ strconv.Itoa(c.ID) }>
-							<div class="summary-item-info">
-								<div class="summary-item-name cake-name">{ c.Name }</div>
-								<div class="summary-item-detail cake-price">{ c.Price.String() } PLN × <span class="cake-qty">{ strconv.Itoa(c.Amount) }</span></div>
+						<li data-cake-id={ strconv.Itoa(c.ID) }>
+							<div style="flex:1;min-width:0;padding-right:0.5rem">
+								<div class="name">{ c.Name }</div>
+								<div class="detail">{ c.Price.String() } PLN × <span class="qty">{ strconv.Itoa(c.Amount) }</span></div>
 							</div>
-							<div class="summary-item-price cake-total">{ c.Total().String() } PLN</div>
-							<button type="button" class="summary-item-remove" onclick="removeCake(this)">
+							<div class="price">{ c.Total().String() } PLN</div>
+							<button type="button" class="remove" onclick="removeCake(this)">
 								<span class="material-symbols-outlined">close</span>
 							</button>
 							<input type="hidden" name={ "cake[" + strconv.Itoa(c.ID) + "]" } value={ strconv.Itoa(c.Amount) }/>
-						</div>
+						</li>
 					}
-				</div>
+				</ul>
 				<div class="summary-totals">
-					<div class="summary-total-row">
+					<div class="total-row">
 						<span>Subtotal</span>
 						<span id="subtotal-price">{ order.Subtotal().String() } PLN</span>
 					</div>
-					<div class="summary-total-row">
+					<div class="total-row">
 						<span>Zaliczka</span>
 						<span id="paid-amount">{ order.Paid.String() } PLN</span>
 					</div>
-					<div class="summary-total-row total">
+					<div class="total-row grand">
 						<span>Do zapłaty</span>
 						<span id="total-price">{ order.Total().String() } PLN</span>
 					</div>
diff --git a/server/templates/orders.templ b/server/templates/orders.templ
index e325f8a..d0dfb31 100644
--- a/server/templates/orders.templ
+++ b/server/templates/orders.templ
@@ -12,67 +12,67 @@ templ OrdersPage(first, last string, orders []models.Order) {
 
 templ OrdersMain(first, last string, orders []models.Order) {
 	<div class="metrics-grid">
-		<div class="metric-card">
-			<span class="metric-label">
+		<div>
+			<span class="label">
 				<span class="material-symbols-outlined">receipt_long</span>
 				Zamówienia dzisiaj
 			</span>
-			<span class="metric-value">{ len(orders) }</span>
-			<span class="metric-change positive">
+			<span class="value">{ len(orders) }</span>
+			<span class="change positive">
 				<span class="material-symbols-outlined">arrow_upward</span>
 				Wszystkie aktywne
 			</span>
 		</div>
-		<div class="metric-card">
-			<span class="metric-label">
+		<div>
+			<span class="label">
 				<span class="material-symbols-outlined">cake</span>
 				Do realizacji
 			</span>
-			<span class="metric-value">{ strconv.Itoa(countPending(orders)) }</span>
-			<span class="metric-change warning">
+			<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 class="metric-card">
-			<span class="metric-label">
+		<div>
+			<span class="label">
 				<span class="material-symbols-outlined">check_circle</span>
 				Gotowe do odbioru
 			</span>
-			<span class="metric-value">{ strconv.Itoa(countDone(orders)) }</span>
-			<span class="metric-change">Zrealizowane</span>
+			<span class="value">{ strconv.Itoa(countDone(orders)) }</span>
+			<span class="change">Zrealizowane</span>
 		</div>
-		<div class="metric-card">
-			<span class="metric-label">
+		<div>
+			<span class="label">
 				<span class="material-symbols-outlined">payments</span>
 				Przychód (szac.)
 			</span>
-			<span class="metric-value">{ estimateRevenue(orders).String() } PLN</span>
-			<span class="metric-change positive">
+			<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>
 		</div>
 	</div>
 	<section class="card">
-		<div class="card-header">
+		<header>
 			<h2>
 				<span class="material-symbols-outlined">list_alt</span>
 				Aktywne zamówienia
 			</h2>
-			<div style="display:flex;align-items:center;gap:8px">
-				<form hx-get="/orders/search" hx-target="#results-table" hx-trigger="keyup delay:500ms, change" style="display:flex;align-items:center;gap:8px">
-					<div class="form-group" style="flex-direction:row;align-items:center;gap:4px">
-						<label style="font-size:11px;white-space:nowrap">Od</label>
-						<input class="form-input" style="width:140px" type="date" value={ first } name="from"/>
+			<div style="display:flex;align-items:center;gap:0.5rem">
+				<form hx-get="/orders/search" hx-target="#results-table" hx-trigger="keyup delay:500ms, change" style="display:flex;align-items:center;gap:0.5rem">
+					<div class="form-group" style="flex-direction:row;align-items:center;gap:0.25rem">
+						<label style="font-size:0.75rem;white-space:nowrap">Od</label>
+						<input class="form-input" style="width:8.75rem" type="date" value={ first } name="from"/>
 					</div>
-					<div class="form-group" style="flex-direction:row;align-items:center;gap:4px">
-						<label style="font-size:11px;white-space:nowrap">Do</label>
-						<input class="form-input" style="width:140px" type="date" value={ last } name="to"/>
+					<div class="form-group" style="flex-direction:row;align-items:center;gap:0.25rem">
+						<label style="font-size:0.75rem;white-space:nowrap">Do</label>
+						<input class="form-input" style="width:8.75rem" type="date" value={ last } name="to"/>
 					</div>
 				</form>
 			</div>
-		</div>
+		</header>
 		<div class="table-container" id="results-table">
 			@OrdersTable(orders)
 		</div>
@@ -96,8 +96,8 @@ templ OrdersTable(orders []models.Order) {
 			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-name">{ o.Surname } { o.Name }<br/><span class="text-on-surface-variant" style="font-size:11px;font-weight:400">{ o.Phone }</span></td>
-					<td class="text-on-surface-variant">{ o.Date.Format("2006-01-02 15:04") }</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 {