diff --git a/expenses_manager/.env.example b/expenses_manager/.env.example
new file mode 100644
index 0000000..faaef7b
--- /dev/null
+++ b/expenses_manager/.env.example
@@ -0,0 +1,17 @@
+# Django
+DEBUG=True
+SECRET_KEY=genera-una-clave-aqui
+
+# Hosts (separados por comas). En producción, tu dominio real.
+ALLOWED_HOSTS=localhost,127.0.0.1
+CSRF_TRUSTED_ORIGINS=
+
+# Base de datos.
+# En local puedes dejar DB_ENGINE vacío o en sqlite3 para usar SQLite sin más.
+# Para PostgreSQL, pon DB_ENGINE=postgresql y rellena el resto.
+DB_ENGINE=sqlite3
+DB_NAME=
+DB_USER=
+DB_PASSWORD=
+DB_HOST=localhost
+DB_PORT=5432
\ No newline at end of file
diff --git a/expenses_manager/expenses/forms.py b/expenses_manager/expenses/forms.py
index 3d88580..83ee34e 100644
--- a/expenses_manager/expenses/forms.py
+++ b/expenses_manager/expenses/forms.py
@@ -122,15 +122,15 @@ class GoalForm(forms.ModelForm):
     class Meta:
         model = Goal
         fields = [
-            'name',
-            'kind',
-            'target_amount', 
-            'category',  
+            "name",
+            "kind",
+            "target_amount",
+            "category",
             "include_subcategories",
             "account",
             "start_date",
             "period",
-            "show_on_home"
+            "show_on_home",
         ]
         widgets = {
             "start_date": forms.DateInput(
diff --git a/expenses_manager/expenses/models.py b/expenses_manager/expenses/models.py
index 688e0d9..50b1181 100644
--- a/expenses_manager/expenses/models.py
+++ b/expenses_manager/expenses/models.py
@@ -5,7 +5,6 @@ from django.conf import settings
 from django.db.models import Sum
 from functools import cached_property
 from django.utils.text import slugify
-from django.db.models.fields import related
 from django.db.models.functions import ExtractMonth
 
 
diff --git a/expenses_manager/expenses/static/expenses/css/base.css b/expenses_manager/expenses/static/expenses/css/base.css
index 80a1763..22b7b85 100644
--- a/expenses_manager/expenses/static/expenses/css/base.css
+++ b/expenses_manager/expenses/static/expenses/css/base.css
@@ -1,72 +1,276 @@
+:root {
+    --color-bg: #f6f8f6;
+    --color-surface: #ffffff;
+    --color-surface-alt: #f2f5f3;
+    --color-text: #1c1917;
+    --color-text-muted: #6b6560;
+    --color-border: #d8d4d0;
+
+    --color-nav-bg: #10241d;
+    --color-nav-text: #e7f5f0;
+    --color-nav-text-muted: #8fb8ac;
+
+    --color-primary: #0f766e;
+    --color-primary-hover: #0b5c56;
+    --color-secondary: #57534e;
+    --color-secondary-hover: #44403c;
+    --color-on-primary: #ffffff;
+
+    --color-chip-bg: #e3ece8;
+    --color-chip-hover: #d2e0da;
+    --color-focus-ring: #5eead4;
+
+    --color-success-bg: #e6f4ea;
+    --color-success-text: #166534;
+    --color-success-accent: #1e7e34;
+
+    --color-danger-bg: #fee2e2;
+    --color-danger-text: #991b1b;
+    --color-danger-accent: #b91c1c;
+    --color-danger-accent-hover: #991b1b;
+
+    --color-warning-bg: #fef3c7;
+    --color-warning-text: #92400e;
+    --color-warning-accent: #d97706;
+
+    --color-table-head: #edf2ef;
+    --color-table-alt: #f8faf9;
+    --color-table-hover: #e9f1ed;
+    --color-progress-track: #e0e0e0;
+
+    --chart-grid-color: rgba(0, 0, 0, 0.1);
+    --chart-fill-color: rgba(15, 118, 110, 0.2); 
+}
+
+[data-theme="dark"] {
+    --color-bg: #0d1512;
+    --color-surface: #16211c;
+    --color-surface-alt: #1b2a23;
+    --color-text: #e7f0eb;
+    --color-text-muted: #9fb0a8;
+    --color-border: #2a3a33;
+
+    --color-nav-bg: #0a1712;
+    --color-nav-text: #e7f5f0;
+    --color-nav-text-muted: #8fb8ac;
+
+    --color-chip-bg: #3a5546;
+    --color-chip-hover: #46654f;
+    --color-focus-ring: #5eead4;
+
+    --color-success-bg: #113322;
+    --color-success-text: #86efac;
+
+    --color-danger-bg: #3f1d1d;
+    --color-danger-text: #fca5a5;
+
+    --color-warning-bg: #3f2d0d;
+    --color-warning-text: #fcd34d;
+
+    --color-table-head: #1b2a23;
+    --color-table-alt: #182420;
+    --color-table-hover: #20302a;
+    --color-progress-track: #2a3a33;
+
+    --chart-grid-color: rgba(255, 255, 255, 0.12);
+    --chart-fill-color: rgba(15, 118, 110, 0.35);
+}
+
+* {
+    box-sizing: border-box;
+}
+
 body {
     margin: 0;
     font-family: system-ui, sans-serif;
-    background: #f7f7f7;
+    background: var(--color-bg);
+    color: var(--color-text);
 }
 
-a.danger {
-    color: #b91c1c;
+a {
+    color: var(--color-primary);
 }
 
+a.danger,
+a.danger:visited,
+.danger {
+    color: var(--color-danger-accent);
+}
+
+/* ========================= */
+/* Topbar / navigation */
+/* ========================= */
+
 .topbar {
-    background: #1f2937;
-    padding: 12px 20px;
+    background: var(--color-nav-bg);
 }
 
 .nav {
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    flex-wrap: wrap;
 }
 
-.nav a {
-    color: #e5e7eb;
+.nav-item,
+.nav .nav-link {
+    color: var(--color-nav-text);
     text-decoration: none;
     font-weight: 500;
+    padding: 0.4rem 0.1rem;
 }
 
-.nav .nav-link {
-    text-decoration: none;
-    background-color: none;
+.logout-form {
+    display: inline;
+    margin: 0;
+    padding: 0;
+}
+
+.logout-form .nav-link {
+    background: none;
     border: none;
-    padding: 8px 12px;
     font: inherit;
-    color: #333;
     cursor: pointer;
+    color: var(--color-nav-text);
+    padding: 0.4rem 0.1rem;
 }
 
-.nav a:hover,
+.nav-item:hover,
 .nav .nav-link:hover {
     text-decoration: underline;
 }
 
 .nav-item.active {
-    font-weight: bold;
-    border-bottom: 2px solid white;
-}
-
-.logout-form {
-    margin: 0;
-    border: none;
-    cursor: pointer;
-    color: white;
+    font-weight: 700;
+    border-bottom: 2px solid var(--color-nav-text);
 }
 
 .spacer {
-    flex: 1;
+    flex: 1 1 auto;
 }
 
 .user {
-    color: #9ca3af;
-    margin-right: 8px;
+    color: var(--color-nav-text-muted);
+    margin-right: 0.5rem;
 }
 
+.nav-toggle {
+    display: none;
+    background: none;
+    border: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 4px;
+    padding: 0.5rem;
+    cursor: pointer;
+}
+
+.nav-toggle-bar {
+    display: block;
+    width: 22px;
+    height: 2px;
+    background: var(--color-nav-text);
+    border-radius: 2px;
+}
+
+.theme-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1.1rem;
+    line-height: 1;
+    color: var(--color-nav-text);
+    padding: 0.4rem;
+}
+
+.dropdown {
+    position: relative;
+}
+
+.dropdown-toggle {
+    background: none;
+    border: none;
+    display: inline-block;
+    font: inherit;
+    color: var(--color-nav-text);
+    cursor: pointer;
+    padding: 0.4rem 0.1rem;
+}
+
+.dropdown-toggle:focus-visible {
+    outline: 2px solid var(--color-focus-ring);
+    outline-offset: 2px;
+}
+
+.dropdown-menu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 6px;
+    min-width: 150px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+}
+
+.dropdown-menu a {
+    display: block;
+    padding: 10px;
+    text-decoration: none;
+    color: var(--color-text);
+}
+
+.dropdown-menu a:hover {
+    background-color: var(--color-surface-alt);
+}
+
+.dropdown.dropdown--open .dropdown-menu {
+    display: block;
+}
+
+/* ========================= */
+/* Messages */
+/* ========================= */
+
+.messages {
+    padding: 0 1rem;
+}
+
+.message {
+    padding: 0.75rem 1rem;
+    border-radius: 6px;
+    margin-bottom: 0.75rem;
+    font-size: 0.9rem;
+}
+
+.message.success {
+    background: var(--color-success-bg);
+    color: var(--color-success-text);
+}
+
+.message.error {
+    background: var(--color-danger-bg);
+    color: var(--color-danger-text);
+}
+
+.message.warning {
+    background: var(--color-warning-bg);
+    color: var(--color-warning-text);
+}
+
+/* ========================= */
+/* Layout */
+/* ========================= */
+
 .content {
-    padding: 24px;
+    padding: 1.5rem;
 }
 
 .dashboard-context {
-    margin-bottom: 1rem;    
+    margin-bottom: 1rem;
 }
 
 .dashboard-context h2 {
@@ -74,18 +278,200 @@ a.danger {
 }
 
 .muted {
-    color: #6b7280;
+    color: var(--color-text-muted);
     font-size: 0.85rem;
 }
 
+/* ========================= */
+/* Buttons */
+/* ========================= */
+
+.btn,
+button[type="submit"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.35rem;
+    height: 2.25rem;
+    box-sizing: border-box;
+    padding: 0 0.9rem;
+    border: none;
+    border-radius: 6px;
+    font: inherit;
+    font-size: 0.9rem;
+    font-weight: 500;
+    text-decoration: none;
+    cursor: pointer;
+    line-height: 1;
+    background: var(--color-primary);
+    color: var(--color-on-primary);
+}
+
+button[type="submit"]:hover,
+.btn-primary:hover {
+    background: var(--color-primary-hover);
+}
+
+.btn-primary {
+    background: var(--color-primary);
+    color: var(--color-on-primary);
+}
+
+.btn-secondary {
+    background: var(--color-secondary);
+    color: var(--color-on-primary);
+}
+
+.btn-secondary:hover {
+    background: var(--color-secondary-hover);
+}
+
+.btn-danger {
+    background: var(--color-danger-accent);
+    color: var(--color-on-primary);
+}
+
+.btn-danger:hover {
+    background: var(--color-danger-accent-hover);
+}
+
+.form-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-top: 1rem;
+    flex-wrap: wrap;
+}
+
+/* ========================= */
+/* Filters (expense list) */
+/* ========================= */
+
+.filters {
+    margin-bottom: 1.5rem;
+}
+
+.filters-main {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.filters-advanced {
+    margin-top: 0.5rem;
+}
+
+.advanced-content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 0.5rem;
+}
+
+.tags-filters {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.active-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
+
+.tag {
+    display: inline-block;
+    padding: 4px 10px;
+    border-radius: 16px;
+    background: var(--color-chip-bg);
+    text-decoration: none;
+    margin-right: 4px;
+    font-size: 0.85em;
+    color: var(--color-text);
+}
+
+.tag.active {
+    background: var(--color-primary);
+    color: var(--color-on-primary);
+}
+
+.tag:hover {
+    background: var(--color-chip-hover);
+}
+
+/* ========================= */
+/* Dashboard filters/presets */
+/* ========================= */
+
+.dashboard-filters {
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+    background: var(--color-surface-alt);
+    border-radius: 8px;
+}
+
+.dashboard-presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.preset {
+    padding: 4px 12px;
+    border-radius: 16px;
+    background: var(--color-chip-bg);
+    text-decoration: none;
+    color: var(--color-text);
+    font-size: 0.9em;
+}
+
+.preset:hover {
+    background: var(--color-chip-hover);
+}
+
+.preset.active {
+    background: var(--color-primary);
+    color: var(--color-on-primary);
+}
+
+.clear-filters-row {
+    margin-top: 0.5rem;
+}
+
+.checkbox {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    color: var(--color-text);
+    vertical-align: middle;
+}
+
+.clear-filters {
+    color: var(--color-danger-accent);
+    text-decoration: none;
+    font-size: 0.9em;
+}
+
+.clear-filters:hover {
+    text-decoration: underline;
+}
+
+/* ========================= */
+/* Cards / charts / dashboard grid */
+/* ========================= */
+
 .dashboard-grid {
     display: grid;
-    grid-template-columns: repeat(2,  1fr);
-    gap: 20px
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
 }
 
 .card {
-    background: #fff;
+    background: var(--color-surface);
     border-radius: 8px;
     padding: 16px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
@@ -108,90 +494,118 @@ a.danger {
     margin-bottom: 4rem;
 }
 
+.charts-container > section {
+    flex: 1 1 320px;
+    min-width: 280px;
+}
+
 .chart-box {
-    height: 300px;
-    margin-bottom: 3rem;
+    position: relative;
+    height: 320px;
+    width: 100%;
+    margin-top: 0.5rem;
+}
+
+.chart-box canvas {
+    max-width: 100%;
 }
 
 .canvas-wrapper {
     flex-grow: 1;
     min-height: 0;
-    position: relative;
     width: 100%;
+    position: relative;
 }
 
-.card-chart canvas {
-    display: block;
+.canvas-wrapper canvas {
     width: 100% !important;
     height: 100% !important;
 }
 
+/* ========================= */
+/* KPIs */
+/* ========================= */
+
 .kpi-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: 1rem;
-    margin: 2rem 0;
+    margin: 1.5rem 0;
 }
 
 .kpi-card {
-    background: #ffffff;
+    background: var(--color-surface);
     border-radius: 8px;
     padding: 1rem;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 .kpi-label {
+    display: block;
     font-size: 0.85rem;
-    color: #666;
+    color: var(--color-text-muted);
 }
 
 .kpi-value {
     display: block;
-    font-size: 1.5rem;
+    font-size: 1.4rem;
     font-weight: bold;
     margin-top: 0.25rem;
 }
 
 .comparison {
-    background: #f9f9f9;
+    background: var(--color-surface-alt);
     padding: 1rem;
     margin-bottom: 2rem;
     border-radius: 8px;
 }
 
-/* .comparison strong {
-    color:#b91c1c;
-} */
-
-.comparison strong.positive {
-    color: #166534;
+strong.positive {
+    color: var(--color-success-text);
 }
 
-.comparison strong.negative {
-    color:#b91c1c;
+strong.negative {
+    color: var(--color-danger-accent);
 }
 
+/* ========================= */
+/* Tables */
+/* ========================= */
+
 table {
     width: 100%;
     border-collapse: collapse;
-    margin-top: 1rem;
+    margin-top: 0.5rem;
 }
 
-th, td {
-    padding: 0.6rem 0.75rem;
+.table-wrap {
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin-bottom: 1.5rem;
+}
+
+.table-wrap table {
+    white-space: nowrap;
+}
+
+th,
+td {
+    padding: 8px 12px;
     text-align: left;
+    border-bottom: 1px solid var(--color-border);
 }
 
-thead {
-    background: #f4f6f8;
+thead th {
+    background: var(--color-table-head);
 }
 
-tbody tr:nth-child(even) {
-    background: #fafafa;    
+tr:nth-child(even) {
+    background: var(--color-table-alt);
 }
 
-tbody tr:hover {
-    background: #f0f4f8;
+tr:hover {
+    background: var(--color-table-hover);
 }
 
 .table-actions a {
@@ -203,7 +617,7 @@ tbody tr:hover {
 .empty-state {
     text-align: center;
     padding: 2rem;
-    color: #666;
+    color: var(--color-text-muted);
 }
 
 .empty-state a {
@@ -211,278 +625,69 @@ tbody tr:hover {
     margin-top: 0.5rem;
 }
 
-.btn {
-    background: #2563eb;
-    color: white;
-    padding: 0.4rem 0.7rem;
-    border-radius: 6px;
-    text-decoration: none;
-    font-size: 0.9rem;
+.pagination {
+    margin-top: 1rem;
 }
 
-.btn.secondary {
-    background: #6b7280;
-}
-
-.messages {
-    margin: 1rem 0;
-}
-
-.message {
-    padding: 0.6rem 0.8rem;
-    border-radius: 6px;
-    margin-bottom: 0.5rem;
-    font-size: 0.9rem;
-}
-
-.message.success {
-    background: #e6f4ea;
-    color: #166534;
-}
-
-.message.error {
-    background: #fee2e2;
-    color: #991b1b;
-}
-
-.message.warning {
-    background: #fef3c7;
-    color: #92400e;
-}
-
-.dashboard-filters {
-    margin: 1rem 0 1.5rem;
-    padding: 1rem;
-    background: #f9fafb;
-    border-radius: 8px;
-}
-
-.dashboard-filters form {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem;
-    align-items: center;
-}
-
-.dashboard-filters select,
-.dashboard-filters button {
-    padding: 0.4rem 0.6rem;
-}
-
-.dashboard-filters .checkbox {
-    display: flex;
-    gap: 0.3rem;
-    align-items: center;
-}
-
-.dashboard-presets {
+.step-links {
     display: flex;
     gap: 0.5rem;
-}
-
-.preset {
-    padding: 0.35rem 0.6rem;
-    border-radius: 6px;
-    background: #e5e7eb;
-    text-decoration: none;
-    color: #111827;
-    font-size: 0.85rem;    
-}
-
-.preset:hover {
-    background: #d1d5db;
-}
-
-.preset.active {
-    background: #2563eb;
-    color: white;
-}
-
-.filters {
-    margin-bottom: 1.5rem;
-}
-
-.filters-main {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
     align-items: center;
-}
-
-.filters-advanced {
-    margin-top: 0.5rem;
-}
-
-.active-tags {
-    display: flex;
     flex-wrap: wrap;
-    gap: 0.4rem;
-    margin-top: 0.3rem;
 }
 
-.tag{
-    /* display: inline-block; */
-    padding: 0.2rem 0.5rem;
-    border-radius: 4px;
-    background: #eee;
-    text-decoration: none;
-    margin-right: 4px;
-    font-size: 0.85rem;
-    color: #333;
-}
-
-.tag.active {
-    background: #333;
-    color: white;
-}
-
-.tag:hover {
-    background: #dbe3ee;
-}
-
-.dropdown {
-    position: relative;
-    cursor: pointer;
-    color: #e5e7eb;
-}
-
-.dropdown.active {
-    font-weight: bold;
-    border-bottom: 2px solid white;
-}
-
-.dropdown-toggle {
-    padding: 10px;
+.step-links a {
     display: inline-block;
-}
-
-.dropdown-menu {
-    display: none;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    background: white;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-    min-width: 150px;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-}
-
-.dropdown-menu a {
-    display: block;
-    padding: 10px;
+    padding: 4px 12px;
+    border-radius: 16px;
+    background: var(--color-chip-bg);
+    color: var(--color-text);
     text-decoration: none;
-    color: #333;
+    font-size: 0.9em;
 }
 
-.dropdown-menu a:hover {
-    background-color: #f5f5f5;
+.step-links a:hover {
+    background: var(--color-chip-hover);
 }
 
-.dropdown:hover .dropdown-menu {
-    display: block;
+.step-links span {
+    color: var(--color-text-muted);
+    font-size: 0.9em;
 }
 
-.progress-container {
-    display: flex;
-    align-items: center;
-    gap: 10px;
+.badge {
+    display: inline-block;
+    padding: 2px 10px;
+    border-radius: 12px;
+    font-size: 0.8rem;
+    font-weight: 600;
 }
 
-.progress-label {
-    min-width: 50px;
-    font-size: 12px;
-    color: #666;
+.badge-active {
+    background-color: var(--color-success-bg);
+    color: var(--color-success-text);
 }
 
-.progress-bar {
-    width: 100%;
-    background: #e0e0e0;
-    border-radius: 6px;
-    height: 14px;
-    overflow: hidden;
-}
-
-.progress-fill {
-    height: 100%;
-    transition: width 0.6s ease-in-out;
-}
-
-.progress-fill.low {
-    background: #e74c3c;
-}
-
-.progress-fill.medium {
-    background: #f1c40f;
-}
-
-.progress-fill.high {
-    background: #2ecc71;
-}
-
-.goals-widget {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: 12px;
-}
-
-.goal-card {
-    padding: 10px;
-    border-radius: 8px;
-    background: #f9f9f9;
+.badge-inactive {
+    background-color: var(--color-danger-bg);
+    color: var(--color-danger-text);
 }
 
 .row-inactive {
     opacity: 0.55;
 }
 
-.badge {
-    display: inline-block;
-    padding: 2px 8px;
-    border-radius: 12px;
-    font-size: 0.8em;
-    font-weight: 600;
+/* ========================= */
+/* Forms */
+/* ========================= */
+
+.form-field {
+    margin-bottom: 1rem;
 }
 
-.badge-active {
-    background-color: #e6f4ea;
-    color: #1e7e34;
-}
-
-.badge-inactive {
-    background-color: #fbe9e7;
-    color: #b71c1c;
-}
-
-.settings-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 16px;
-    margin-top: 20px;
-}
-
-.settings-card {
-    display: block;
-    padding: 16px;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    text-decoration: none;
-    color: inherit;
-    transition: box-shadow 0.15s ease;
-}
-
-.settings-card:hover {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.settings-card h3 {
-    margin: 0 0 4px 0;
-}
-
-.settings-card p {
-    margin: 0;
-    font-size: 0.9em;
-    color: #666;
+.form-errors {
+    color: var(--color-danger-accent);
+    font-size: 0.85rem;
 }
 
 .tag-chip-list {
@@ -493,7 +698,7 @@ tbody tr:hover {
     max-height: 160px;
     overflow-y: auto;
     padding: 8px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--color-border);
     border-radius: 8px;
 }
 
@@ -502,38 +707,210 @@ tbody tr:hover {
     align-items: center;
     gap: 4px;
     padding: 4px 10px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--color-border);
     border-radius: 16px;
     font-size: 0.85em;
     cursor: pointer;
     user-select: none;
-    background-color: #fafafa;
+    background-color: var(--color-surface-alt);
 }
 
 .tag-chip input[type="checkbox"] {
-    accent-color: #1e7e34;
+    accent-color: var(--color-success-accent);
 }
 
 .tag-chip:has(input:checked) {
-    background-color: #e6f4ea;
-    border-color: #1e7e34;
-    color: #1e7e34;
+    background-color: var(--color-success-bg);
+    border-color: var(--color-success-accent);
+    color: var(--color-success-text);
 }
 
-.progress-fill.ok { 
-    background-color: #1e88e5; 
+/* ========================= */
+/* Progress bars */
+/* ========================= */
+
+.progress-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
 }
-.progress-fill.complete { 
-    background-color: #1e7e34; 
+
+.progress-label {
+    min-width: 90px;
+    font-size: 0.85rem;
+    color: var(--color-text-muted);
 }
-.progress-fill.warning { 
-    background-color: #f9a825; 
+
+.progress-bar {
+    width: 100%;
+    background: var(--color-progress-track);
+    border-radius: 6px;
+    height: 10px;
+    overflow: hidden;
 }
-.progress-fill.danger { 
-    background-color: #b71c1c; 
+
+.progress-fill {
+    height: 100%;
+    transition: width 0.3s ease-in-out;
+}
+
+.progress-fill.low,
+.progress-fill.danger {
+    background-color: var(--color-danger-accent);
+}
+
+.progress-fill.medium,
+.progress-fill.warning {
+    background-color: var(--color-warning-accent);
+}
+
+.progress-fill.high,
+.progress-fill.complete {
+    background-color: var(--color-success-accent);
+}
+
+.progress-fill.ok {
+    background-color: var(--color-primary);
+}
+
+/* ========================= */
+/* Goals */
+/* ========================= */
+
+.goals-widget {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1rem;
+}
+
+.goal-card {
+    padding: 1rem;
+    border-radius: 8px;
+    background: var(--color-surface-alt);
+}
+
+/* ========================= */
+/* Settings */
+/* ========================= */
+
+.settings-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.settings-card {
+    display: block;
+    padding: 1rem;
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    text-decoration: none;
+    color: var(--color-text);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.settings-card:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.settings-card h3 {
+    margin: 0 0 0.25rem 0;
+}
+
+.settings-card p {
+    margin: 0;
+    font-size: 0.9em;
+    color: var(--color-text-muted);
+}
+
+/* ========================= */
+/* Auth pages */
+/* ========================= */
+
+.auth-container {
+    max-width: 400px;
+    margin: 4rem auto;
+    padding: 2rem;
+    background: var(--color-surface);
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 .auth-help {
-    margin-top: 16px;
-    font-size: 0.9em;
-}
\ No newline at end of file
+    margin-top: 1rem;
+    font-size: 0.9rem;
+    color: var(--color-text-muted);
+}
+
+/* ========================= */
+/* Responsive */
+/* ========================= */
+
+@media (max-width: 768px) {
+    .topbar .nav {
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
+    .nav-toggle {
+        display: flex;
+    }
+
+    .nav {
+        display: none;
+        flex-direction: column;
+        align-items: flex-start;
+        width: 100%;
+        margin-top: 0.5rem;
+    }
+
+    .nav.nav--open {
+        display: flex;
+    }
+
+    .nav .spacer {
+        display: none;
+    }
+
+    .dropdown-menu {
+        position: static;
+        box-shadow: none;
+        min-width: 0;
+        padding-left: 1rem;
+    }
+
+    .dropdown-menu a {
+        color: var(--color-nav-text);
+    }
+
+    .dropdown-menu a:hover {
+        background-color: transparent;
+        text-decoration: underline;
+    }
+
+    .dashboard-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .card-chart {
+        height: 320px;
+    }
+}
+
+@media (max-width: 480px) {
+    .kpi-grid,
+    .goals-widget,
+    .settings-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .chart-box {
+        height: 240px;
+    }
+
+    .card-chart {
+        height: 260px;
+    }
+}
diff --git a/expenses_manager/expenses/static/expenses/js/charts.js b/expenses_manager/expenses/static/expenses/js/charts.js
new file mode 100644
index 0000000..437e2eb
--- /dev/null
+++ b/expenses_manager/expenses/static/expenses/js/charts.js
@@ -0,0 +1,88 @@
+(function () {
+    function getActiveTheme() {
+        return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
+    }
+
+    function getChartColors() {
+        var styles = getComputedStyle(document.documentElement);
+        var theme = getActiveTheme();
+    
+        return {
+            theme: theme,
+            gridColor: styles.getPropertyValue('--chart-grid-color').trim() || 'rgba(0, 0, 0, 0.1)',
+            tickColor: styles.getPropertyValue('--color-text-muted').trim() || '#6b6560',
+            primaryColor: styles.getPropertyValue('--color-primary').trim() || '#0f766e',
+            primaryFill: styles.getPropertyValue('--chart-fill-color').trim() || 'rgba(15, 118, 110, 0.2)',
+            palette: ['#ff6384', '#36a2eb', '#cc65fe', '#ffce56', '#4bc0c0', '#ffa1b5']
+        };
+    }
+
+    // Aplica los colores de grid/ticks a las escalas cartesianas (x/y) de un gráfico.
+    // Se usa tanto al crear el gráfico (colores embebidos en las opciones iniciales)
+    // como al refrescar el tema en caliente sobre un gráfico ya existente.
+    function applyCartesianColors(chart, colors) {
+        var scales = chart.options.scales;
+
+        if (!scales) {
+            return;
+        }
+
+        Object.keys(scales).forEach(function (axis) {
+            var scale = scales[axis];
+
+            if (!scale) {
+                return;
+            }
+
+            // Object.assign crea un objeto grid/ticks nuevo en vez de mutar en el
+            // sitio (scale.grid.color = ...). Chart.js reconstruye internamente los
+            // objetos de opciones de un gráfico 'line' ya creado, y mutar una
+            // propiedad suelta sobre esa estructura reactiva provoca
+            // "TypeError: t.startsWith is not a function" al redibujar. Reemplazar
+            // el objeto entero evita tocar esas referencias internas.
+            if (typeof colors.gridColor === 'string' && colors.gridColor) {
+                scale.grid = Object.assign({}, scale.grid, { color: colors.gridColor });
+            }
+
+            if (typeof colors.tickColor === 'string' && colors.tickColor) {
+                scale.ticks = Object.assign({}, scale.ticks, { color: colors.tickColor });
+            }
+        });
+    }
+
+    // Los colores de tema se fijan en las opciones al CREAR cada gráfico (evita el
+    // bug de mutar un gráfico 'line' recién construido). Para que el gráfico
+    // reaccione a un cambio de tema posterior sin recrearlo, cada plantilla registra
+    // aquí su instancia junto con un callback que sabe cómo reaplicar sus colores.
+    var registeredCharts = [];
+
+    function registerThemedChart(chart, applyColors) {
+        registeredCharts.push({ chart: chart, applyColors: applyColors });
+    }
+
+    function refreshThemedCharts() {
+        var colors = getChartColors();
+
+        registeredCharts.forEach(function (entry) {
+            entry.applyColors(entry.chart, colors);
+            // 'none' desactiva la animación de la actualización: solo repinta con
+            // los nuevos colores, sin la transición de entrada de datos.
+            entry.chart.update('none');
+        });
+    }
+
+    // Observa el atributo data-theme del <html> (lo cambia el toggle de tema) para
+    // refrescar todos los gráficos registrados en cuanto el usuario cambia de tema,
+    // sin necesidad de recargar la página.
+    new MutationObserver(function (mutations) {
+        var themeChanged = mutations.some(function (m) { return m.attributeName === 'data-theme'; });
+
+        if (themeChanged) {
+            refreshThemedCharts();
+        }
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+
+    window.getChartColors = getChartColors;
+    window.applyCartesianColors = applyCartesianColors;
+    window.registerThemedChart = registerThemedChart;
+})();
diff --git a/expenses_manager/expenses/static/expenses/js/nav.js b/expenses_manager/expenses/static/expenses/js/nav.js
new file mode 100644
index 0000000..c382c5c
--- /dev/null
+++ b/expenses_manager/expenses/static/expenses/js/nav.js
@@ -0,0 +1,30 @@
+document.addEventListener('DOMContentLoaded', function () {
+    var toggle = document.getElementById('navToggle');
+    var nav = document.getElementById('mainNav');
+
+    if (!toggle || !nav) {
+        return;
+    }
+
+    toggle.addEventListener('click', function () {
+        var isOpen = nav.classList.toggle('nav--open');
+        toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+    });
+
+    var dropdownToggle = document.getElementById('dropdownToggle');
+    var dropdown = document.getElementById('settingsDropdown');
+
+    if (dropdownToggle && dropdown) {
+        dropdownToggle.addEventListener('click', function () {
+            var isOpen = dropdown.classList.toggle('dropdown--open');
+            dropdownToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+        });
+
+        document.addEventListener('click', function (event) {
+            if (!dropdown.contains(event.target)) {
+                dropdown.classList.remove('dropdown--open');
+                dropdownToggle.setAttribute('aria-expanded', 'false');
+            }
+        });
+    }
+});
diff --git a/expenses_manager/expenses/static/expenses/js/theme.js b/expenses_manager/expenses/static/expenses/js/theme.js
new file mode 100644
index 0000000..2deaa43
--- /dev/null
+++ b/expenses_manager/expenses/static/expenses/js/theme.js
@@ -0,0 +1,20 @@
+document.addEventListener('DOMContentLoaded', function () {
+    var toggle = document.getElementById('themeToggle');
+
+    if (!toggle) {
+        return;
+    }
+
+    function applyIcon(theme) {
+        toggle.textContent = theme === 'dark' ? '☀️' : '🌙';
+    }
+
+    applyIcon(document.documentElement.getAttribute('data-theme'));
+
+    toggle.addEventListener('click', function () {
+        var next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+        document.documentElement.setAttribute('data-theme', next);
+        localStorage.setItem('theme', next);
+        applyIcon(next);
+    });
+});
diff --git a/expenses_manager/expenses/templates/categories/confirm_delete.html b/expenses_manager/expenses/templates/categories/confirm_delete.html
index 87b4140..98c5bf3 100644
--- a/expenses_manager/expenses/templates/categories/confirm_delete.html
+++ b/expenses_manager/expenses/templates/categories/confirm_delete.html
@@ -1,14 +1,12 @@
-{% extends "expenses/base.html" %}
+{% extends "expenses/_confirm_delete.html" %}
 
-{% block title %}
-    Categorías
-{% endblock %}
+{% block title %}Categorías{% endblock %}
 
-{% block content %}
-    <h2>Eliminar categoría</h2>
+{% block delete_heading %}Eliminar categoría{% endblock %}
 
-    <p>¿Seguro que quieres eliminar la categoría <strong>{{ category.name }}</strong>?</p>
+{% block delete_question %}¿Seguro que quieres eliminar la categoría <strong>{{ category.name }}</strong>?{% endblock %}
 
+{% block delete_warnings %}
     {% if expense_count %}
         <p class="form-errors">
             Esta categoría tiene {{ expense_count }} gasto{{ expense_count|pluralize }} asociado{{ expense_count|pluralize }}
@@ -18,7 +16,7 @@
         {% if children %}
             <p class="form-errors">
                 Atención: también se eliminarán sus subcategorías:
-                {% for child in children %}<strong>{{child.name}}</strong>{% if not forloop.last %}, {% endif %}{% endfor %}.
+                {% for child in children %}<strong>{{ child.name }}</strong>{% if not forloop.last %}, {% endif %}{% endfor %}.
             </p>
         {% endif %}
 
@@ -28,11 +26,6 @@
             </p>
         {% endif %}
     {% endif %}
+{% endblock %}
 
-    <form method="post">
-        {% csrf_token %}
-        {{ form.as_p }}
-        <button class="btn danger">Eliminar</button>
-        <a class="btn" href="{% url 'category_list' %}">Cancelar</a>
-    </form>
-{% endblock %}
\ No newline at end of file
+{% block cancel_url %}{% url 'category_list' %}{% endblock %}
diff --git a/expenses_manager/expenses/templates/categories/form.html b/expenses_manager/expenses/templates/categories/form.html
index e45d9c1..61a27b6 100644
--- a/expenses_manager/expenses/templates/categories/form.html
+++ b/expenses_manager/expenses/templates/categories/form.html
@@ -10,7 +10,9 @@
     <form method="post">
         {% csrf_token %}
         {{ form.as_p }}
-        <button type="submit">Guardar</button>
-        <a class="btn" href="{% url 'category_list' %}">Cancelar</a>
+        <div class="form-actions">
+            <button type="submit" class="btn btn-primary">Guardar</button>
+            <a class="btn btn-secondary" href="{% url 'category_list' %}">Cancelar</a>
+        </div>
     </form>
 {% endblock %}
\ No newline at end of file
diff --git a/expenses_manager/expenses/templates/categories/list.html b/expenses_manager/expenses/templates/categories/list.html
index 24826ab..e587118 100644
--- a/expenses_manager/expenses/templates/categories/list.html
+++ b/expenses_manager/expenses/templates/categories/list.html
@@ -12,12 +12,13 @@
     <form method="post">
         {% csrf_token %}
         {{ form.as_p }}
-        <button type="submit">Crear</button>   
+        <button type="submit" class="btn btn-primary">Crear</button>   
     </form>
 
     <hr>
 
     <h3>Listado</h3>
+    <div class="table-wrap">
     <table>
         <thead>
             <tr>
@@ -37,6 +38,7 @@
                 </tr>
             {% endfor %}
         </tbody>
-    </table>    
+    </table>
+    </div>
 
 {% endblock %}
\ No newline at end of file
diff --git a/expenses_manager/expenses/templates/expenses/_confirm_delete.html b/expenses_manager/expenses/templates/expenses/_confirm_delete.html
new file mode 100644
index 0000000..8b212e2
--- /dev/null
+++ b/expenses_manager/expenses/templates/expenses/_confirm_delete.html
@@ -0,0 +1,20 @@
+{% extends "expenses/base.html" %}
+
+{% block title %}Eliminar{% endblock %}
+
+{% block content %}
+    <h1>{% block delete_heading %}Eliminar{% endblock %}</h1>
+
+    <p>{% block delete_question %}¿Seguro que quieres eliminar este elemento?{% endblock %}</p>
+
+    {% block delete_warnings %}{% endblock %}
+
+    <form method="post">
+        {% csrf_token %}
+        {% block delete_extra_fields %}{% endblock %}
+        <div class="form-actions">
+            <button class="btn btn-danger">{% block delete_button %}Eliminar{% endblock %}</button>
+            <a class="btn btn-secondary" href="{% block cancel_url %}{% endblock %}">Cancelar</a>
+        </div>
+    </form>
+{% endblock %}
diff --git a/expenses_manager/expenses/templates/expenses/account_confirm_delete.html b/expenses_manager/expenses/templates/expenses/account_confirm_delete.html
index 0d91fcb..e2ac093 100644
--- a/expenses_manager/expenses/templates/expenses/account_confirm_delete.html
+++ b/expenses_manager/expenses/templates/expenses/account_confirm_delete.html
@@ -1,18 +1,11 @@
-{% extends "expenses/base.html" %}
+{% extends "expenses/_confirm_delete.html" %}
+
 {% block title %}Eliminar{% endblock %}
-{% block content %}
 
-    <h1>Eliminar cuenta</h1>
+{% block delete_heading %}Eliminar cuenta{% endblock %}
 
-    <p>
-        ¿Seguro que quieres eliminar la cuenta
-        <strong>{{ account.name }}</strong>
-    </p>
+{% block delete_question %}¿Seguro que quieres eliminar la cuenta <strong>{{ account.name }}</strong>?{% endblock %}
 
-    <form method="post">
-        {% csrf_token %}
-        <button class="btn">Sí, eliminar</button>
-        <a class="btn secondary" href="{% url 'account_list' %}">Cancelar</a>
-    </form>
+{% block delete_button %}Sí, eliminar{% endblock %}
 
-{% endblock %}
\ No newline at end of file
+{% block cancel_url %}{% url 'account_list' %}{% endblock %}
diff --git a/expenses_manager/expenses/templates/expenses/account_form.html b/expenses_manager/expenses/templates/expenses/account_form.html
index 4fbed41..e017818 100644
--- a/expenses_manager/expenses/templates/expenses/account_form.html
+++ b/expenses_manager/expenses/templates/expenses/account_form.html
@@ -14,8 +14,10 @@
         {% csrf_token %}
         {{ form.as_p }}
 
-        <button type="submit">Guardar</button>
-        <a class="btn secondary" href="{% url 'account_list' %}">Cancelar</a>
+        <div class="form-actions">
+            <button type="submit" class="btn btn-primary">Guardar</button>
+            <a class="btn btn-secondary" href="{% url 'account_list' %}">Cancelar</a>
+        </div>
     </form>
 
 {% endblock %}
\ No newline at end of file
diff --git a/expenses_manager/expenses/templates/expenses/account_list.html b/expenses_manager/expenses/templates/expenses/account_list.html
index cc7bd4d..c869f28 100644
--- a/expenses_manager/expenses/templates/expenses/account_list.html
+++ b/expenses_manager/expenses/templates/expenses/account_list.html
@@ -6,6 +6,7 @@
 
     <a class="btn" href="{% url 'account_create' %}">➕ Nueva cuenta</a>
 
+    <div class="table-wrap">
     <table>
         <thead>
             <tr>
@@ -46,4 +47,5 @@
             {% endfor %}
         </tbody>
     </table>
+    </div>
 {% endblock %}
\ No newline at end of file
diff --git a/expenses_manager/expenses/templates/expenses/base.html b/expenses_manager/expenses/templates/expenses/base.html
index 1e6cb78..ca03b8a 100644
--- a/expenses_manager/expenses/templates/expenses/base.html
+++ b/expenses_manager/expenses/templates/expenses/base.html
@@ -1,18 +1,34 @@
 {% load static %}
-<!DOCTYPE>
-<html>
+<!DOCTYPE html>
+<html lang="es">
     <head>
         <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>{% block title %}Expenses manager{% endblock %}</title>
+        <script>
+            (function() {
+                var theme = localStorage.getItem('theme');
+                if (!theme) {
+                    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+                }
+                document.documentElement.setAttribute('data-theme', theme);
+            })();
+        </script>
         <link rel="stylesheet" href="{% static 'expenses/css/base.css' %}">
         <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+        <script src="{% static 'expenses/js/charts.js' %}"></script>
         {% block extra_css %}{% endblock %}
     </head>
 
     <body>
         {% if user.is_authenticated %}
             <header class="topbar">
-                <nav class="nav">
+                <button type="button" class="nav-toggle" id="navToggle" aria-label="Abrir menú" aria-expanded="false" aria-controls="mainNav">
+                    <span class="nav-toggle-bar"></span>
+                    <span class="nav-toggle-bar"></span>
+                    <span class="nav-toggle-bar"></span>
+                </button>
+                <nav class="nav" id="mainNav">
                     <a href="{% url 'home' %}" class="nav-item {% if active_menu == 'home' %}active{% endif %} ">Home</a>
                     <a href="{% url 'dashboard' %}" class="nav-item {% if active_menu == 'dashboard' %}active{% endif %} ">Dashboard</a>
                     <a href="{% url 'expense_list' %}" class="nav-item {% if active_menu == 'expenses' %}active{% endif %} ">Gastos</a>
@@ -21,10 +37,10 @@
                     <!-- <a href="{% url 'tag_list' %}" class="nav-item {% if active_menu == 'tags' %}active{% endif %} ">Etiquetas</a> -->
                     <a href="{% url 'fuel_list' %}" class="nav-item {% if active_menu == 'fuel' %}active{% endif %} ">Repostajes</a>
                     <!-- <a href="{% url 'category_list' %}" class="nav-item {% if active_menu == 'categories' %}active{% endif %} ">Categorías</a> -->
-                    <div class="nav-item dropdown {% if active_menu == 'settings' %}active{% endif %}">
-                        <span class="dropdown-toggle">Configuraciones ▼</span>
+                    <div class="nav-item dropdown {% if active_menu == 'settings' %}active{% endif %}" id="settingsDropdown">
+                        <button type="button" class="dropdown-toggle" id="dropdownToggle" aria-haspopup="true" aria-expanded="false" aria-controls="dropdownMenu">Configuraciones ▼</button>
 
-                        <div class="dropdown-menu">
+                        <div class="dropdown-menu" id="dropdownMenu">
                             <a href="{% url 'category_list' %}">Categorías</a>
                             <a href="{% url 'tag_list' %}">Etiquetas</a>
                             <a href="{% url 'goal_list' %}">Objetivos</a>
@@ -33,6 +49,8 @@
 
                     <span class="spacer"></span>
 
+                    <button type="button" class="theme-toggle" id="themeToggle" aria-label="Cambiar tema" title="Cambiar tema"></button>
+
                     <a href="{% url 'password_change' %}">{{ request.user.username }}</a>
 
                     <form method="post" action="{% url 'logout' %}" class="logout-form">
@@ -58,5 +76,7 @@
         </main>
 
         {% block extra_js %}{% endblock %}
+        <script src="{% static 'expenses/js/nav.js' %}" defer></script>
+        <script src="{% static 'expenses/js/theme.js' %}" defer></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/expenses_manager/expenses/templates/expenses/base_auth.html b/expenses_manager/expenses/templates/expenses/base_auth.html
index 04b7bca..4aca62d 100644
--- a/expenses_manager/expenses/templates/expenses/base_auth.html
+++ b/expenses_manager/expenses/templates/expenses/base_auth.html
@@ -1,9 +1,19 @@
 {% load static %}
 <!DOCTYPE html>
-<html>
+<html lang="es">
     <head>
         <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>{% block title %}Login{% endblock %}</title>
+        <script>
+            (function() {
+                var theme = localStorage.getItem('theme');
+                if (!theme) {
+                    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+                }
+                document.documentElement.setAttribute('data-theme', theme);
+            })();
+        </script>
         <link rel="stylesheet" href="{% static 'expenses/css/base.css' %}">
     </head>
     <body>
diff --git a/expenses_manager/expenses/templates/expenses/dashboard.html b/expenses_manager/expenses/templates/expenses/dashboard.html
index d49a356..04480d9 100644
--- a/expenses_manager/expenses/templates/expenses/dashboard.html
+++ b/expenses_manager/expenses/templates/expenses/dashboard.html
@@ -41,11 +41,14 @@
             <a href="{% url 'dashboard' %}?period=this_year" class="preset {% if period == 'this_year' %}active{% endif %}">
                 Este año
             </a>
-            {% if period %}
-                <a href="{% url 'dashboard' %}" style="color: red; margin-left: 10px;">❌ Quitar filtros temporales</a>
-            {% endif %}
         </div>
 
+        {% if period %}
+            <div class="clear-filters-row">
+                <a href="{% url 'dashboard' %}" class="clear-filters">❌ Quitar filtros temporales</a>
+            </div>
+        {% endif %}
+
         <br>
 
         <form method="get" action="{% url 'dashboard' %}" id="filtered_form">
@@ -86,7 +89,7 @@
                 Comparar periodo anterior
             </label>
 
-            <button type="submit">Aplicar Filtros</button>
+            <button type="submit" class="btn btn-primary">Aplicar Filtros</button>
         </form>
     </section>
     <script>
@@ -149,10 +152,10 @@
         </div>
         
         {% if selected_month == today.month and selected_year == today.year %}
-            <div class="kpi-card" style="border-left: 4px solid #ff9f43;">
+            <div class="kpi-card" style="border-left: 4px solid var(--color-warning-accent);">
                 <span class="kpi-label">Proyección fin de mes</span>
                 <span class="kpi-value">{{ projected_end_of_month|floatformat:2 }}€</span>
-                <small style="color: gray; display:block;">Basado en tu ritmo de gasto actual</small>
+                <small style="color: var(--color-text-muted); display:block;">Basado en tu ritmo de gasto actual</small>
             </div>
         {% endif %}
     </section>
@@ -164,15 +167,16 @@
                 Gastos periodo actual: <strong>{{ kpi_total|floatformat:2 }} €</strong><br>
                 Gastos periodo anterior: <strong>{{ kpi_previous_total|floatformat:2 }} €</strong><br>
                 Diferencia:
-                <strong style="color: {% if kpi_trend == 'up' %}#d9534f{% else %}#5cb85c{% endif %};">
+                <strong style="color: {% if kpi_trend == 'up' %}var(--color-danger-accent){% else %}var(--color-success-accent){% endif %};">
                     {% if kpi_trend == "up" %}+{% endif %}{{ kpi_difference|floatformat:2 }}€ ({{ kpi_percentage|floatformat:1 }}%)
                 </strong>
-                <small style="display:block; color:gray;">
+                <small style="display:block; color: var(--color-text-muted);">
                     {% if kpi_trend == "up" %}⚠️ Has gastado más que el periodo pasado. {% else %} ¡Bien! Has reducido tus gastos. {% endif %}
                 </small>
             </p>
 
             <h3>Desglose de cambios por categoría</h3>
+            <div class="table-wrap">
             <table>
                 <thead>
                     <tr>
@@ -188,13 +192,14 @@
                             <td>{{ cat.category }}</td>
                             <td>{{ cat.previous|floatformat:2 }}€</td>
                             <td>{{ cat.current|floatformat:2 }}€</td>
-                            <td style="font-weight: bold; color: {% if cat.difference > 0 %}#d9534f{% else %}#5cb85c{% endif %};">
+                            <td style="font-weight: bold; color: {% if cat.difference > 0 %}var(--color-danger-accent){% else %}var(--color-success-accent){% endif %};">
                                 {% if cat.difference > 0 %}+{% endif %}{{ cat.difference|floatformat:2 }}€
                             </td>
                         </tr>
                     {% endfor %}
                 </tbody>
             </table>
+            </div>
         </section>
     {% endif %}
 
@@ -203,22 +208,23 @@
     <!-- ========================= -->
     
     <div class="charts-container">
-        <section class="chart-box" style="width: 45%; min-width: 300px; max-width: 550px;">
+        <section>
             <h3>Evolución de Gastos ({% if chart_type == 'day' %}Por día {% else %} Por Meses{% endif %})</h3>
-            <div style="position: relative; width: 100%; height: 350px; padding-bottom: 20px;">
+            <div class="chart-box">
                 <canvas id="mainChart"></canvas>
             </div>
         </section>
 
-        <section class="chart-box" style="width: 30%; min-width: 280px; max-width: 400px;">
-            <h3>Distribución por Categorías</h3>    
-            <div style="position: relative; width: 100%; height: 350px; display: flex; align-items: center; justify-content: center">
+        <section>
+            <h3>Distribución por Categorías</h3>
+            <div class="chart-box">
                 <canvas id="categoryChart"></canvas>
             </div>
         </section>
 
         <section>
             <h3>Gastos Recientes</h3>
+            <div class="table-wrap">
             <table class="table">
                 <thead>
                     <tr>
@@ -236,13 +242,14 @@
                             <td>{{ exp.account.name }}</td>
                             <td>{{ exp.category.name }}</td>
                             <td>{{ exp.description|default:"-" }}</td>
-                            <td style="color: #d9534f; font-weight: bold;">{{ exp.amount|floatformat:2 }}</td>
+                            <td style="color: var(--color-danger-accent); font-weight: bold;">{{ exp.amount|floatformat:2 }}</td>
                         </tr>
                     {% empty %}
                         <tr><td colspan="7">No hay gastos recientes registrados</td></tr>
                     {% endfor %}
                 </tbody>
             </table>
+            </div>
         </section>
     </div>
     
@@ -252,25 +259,32 @@
         const catLabels = [{% for row in by_category_chart %}"{{ row.category__name }}",{% endfor %}];
         const catData = [{% for row in by_category_chart %}{{ row.total|unlocalize }},{% endfor %}];
 
-        new Chart(document.getElementById('categoryChart'), {
+        const categoryChartColors = getChartColors();
+
+        const categoryChart = new Chart(document.getElementById('categoryChart'), {
             type: 'pie',
             data: {
                 labels: catLabels,
                 datasets: [{
                     data: catData,
-                    backgroundColor: [
-                        '#ff6384', '#36a2eb', '#cc65fe', '#ffce56', '#4bc0c0', '#ffa1b5'
-                    ]
+                    backgroundColor: categoryChartColors.palette
                 }]
             },
             options: {
                 responsive: true,
                 maintainAspectRatio: false,
                 plugins: {
-                    legend: { position: 'right' }
+                    legend: {
+                        position: 'right',
+                        labels: { color: categoryChartColors.tickColor }
+                    }
                 }
             }
         });
+
+        registerThemedChart(categoryChart, function (chart, colors) {
+            chart.options.plugins.legend.labels.color = colors.tickColor;
+        });
     </script>
 
     <h3>Evolución anual por cuenta ({{ selected_year }})</h3>
@@ -290,34 +304,50 @@
         const labels = {{ chart_labels|safe }};
         const data = {{ chart_data|safe }};
         const ctx = document.getElementById('mainChart');
+        const mainChartColors = getChartColors();
 
-        new Chart(ctx, {
+        const mainChart = new Chart(ctx, {
             type: 'bar',
             data: {
                 labels: labels,
                 datasets:[{
                     label: 'Gastos (€)',
                     data: data,
-                    backgroundColor: 'rgba(54, 162, 235, 0.6)',
-                    backgroundColor: 'rgba(54, 162, 235, 1)',
+                    backgroundColor: mainChartColors.primaryColor,
                     borderWidth: 1
                 }]
             },
             options: {
                 responsive: true,
                 maintainAspectRatio: false,
-                scales: { y: { beginAtZero: true } }
+                scales: {
+                    x: {
+                        grid: { color: mainChartColors.gridColor },
+                        ticks: { color: mainChartColors.tickColor }
+                    },
+                    y: {
+                        beginAtZero: true,
+                        grid: { color: mainChartColors.gridColor },
+                        ticks: { color: mainChartColors.tickColor }
+                    }
+                }
             }
         });
 
+        registerThemedChart(mainChart, function (chart, colors) {
+            chart.data.datasets[0].backgroundColor = colors.primaryColor;
+            applyCartesianColors(chart, colors);
+        });
+
         const allMonths = ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"];
 
         {% for acc in accounts_charts %}
             (function() {
                 const dataAccount = {{ acc.data|safe }};
                 const filteredLabels = allMonths.slice(0, dataAccount.length);
+                const accountChartColors = getChartColors();
 
-                new Chart(
+                const accountChart = new Chart(
                     document.getElementById('accountChart{{ acc.id }}'),
                     {
                         type: 'line',
@@ -327,8 +357,8 @@
                                 label: 'Saldo Real (€)',
                                 data: dataAccount,
                                 fill: false,
-                                borderColor: 'rgba(54, 162, 235, 1)',
-                                backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                                borderColor: accountChartColors.primaryColor,
+                                backgroundColor: accountChartColors.primaryFill,
                                 tension: 0.1
                             }]
                         },
@@ -336,14 +366,26 @@
                             responsive: true,
                             maintainAspectRatio: false,
                             scales: {
+                                x: {
+                                    grid: { color: accountChartColors.gridColor },
+                                    ticks: { color: accountChartColors.tickColor }
+                                },
                                 y: {
-                                    beginAtZero: false
+                                    beginAtZero: false,
+                                    grid: { color: accountChartColors.gridColor },
+                                    ticks: { color: accountChartColors.tickColor }
                                 }
                             }
                         }
                     }
                 );
-            })();            
+
+                registerThemedChart(accountChart, function (chart, colors) {
+                    chart.data.datasets[0].borderColor = colors.primaryColor;
+                    chart.data.datasets[0].backgroundColor = colors.primaryFill;
+                    applyCartesianColors(chart, colors);
+                });
+            })();
         {% endfor %}
     </script>
 
@@ -398,6 +440,7 @@
     <!-- ========================= -->
     <!-- Categories -->
     <!-- ========================= -->
+    <div class="table-wrap">
     <table>
         <thead>
             <tr>
@@ -414,5 +457,6 @@
             {% endfor %}
         </tbody>
     </table>
+    </div>
 
 {% endblock %}
\ No newline at end of file
diff --git a/expenses_manager/expenses/templates/expenses/expense_confirm_delete.html b/expenses_manager/expenses/templates/expenses/expense_confirm_delete.html
index 52366ae..1d127e6 100644
--- a/expenses_manager/expenses/templates/expenses/expense_confirm_delete.html
+++ b/expenses_manager/expenses/templates/expenses/expense_confirm_delete.html
@@ -1,21 +1,16 @@
-{% extends "expenses/base.html" %}
+{% extends "expenses/_confirm_delete.html" %}
 
 {% block title %}Eliminar gasto{% endblock %}
 
-{% block content %}
-    <h1>Eliminar gasto</h1>
-
-    <p>
-        ¿Seguro que quieres eliminar el gasto de 
-        <strong>{{ expense.amount }}€</strong>
-        del {{ expense.date }} perteneciente a 
-        <strong>{{ expense.account }}</strong>?
-    </p>
-
-    <form method="post">
-        {% csrf_token %}
-        <button class="btn">Sí, eliminar</button>
-        <a class="btn secondary" href="{% url 'expense_list' %}">Cancelar</a>
-    </form>
+{% block delete_heading %}Eliminar gasto{% endblock %}
 
+{% block delete_question %}
+    ¿Seguro que quieres eliminar el gasto de
+    <strong>{{ expense.amount }}€</strong>
+    del {{ expense.date }} perteneciente a
+    <strong>{{ expense.account }}</strong>?
 {% endblock %}
+
+{% block delete_button %}Sí, eliminar{% endblock %}
+
+{% block cancel_url %}{% url 'expense_list' %}{% endblock %}
diff --git a/expenses_manager/expenses/templates/expenses/expense_form.html b/expenses_manager/expenses/templates/expenses/expense_form.html
index 090e5d5..a925943 100644
--- a/expenses_manager/expenses/templates/expenses/expense_form.html
+++ b/expenses_manager/expenses/templates/expenses/expense_form.html
@@ -46,14 +46,15 @@
             {% endif %}
         {% endfor %}
 
-        <button type="submit">
-            {% if form.instance.pk %}
-                Guardar gasto
-            {% else %}
-                Crear gasto
-            {% endif %}
-        </button>            
+        <div class="form-actions">
+            <button type="submit" class="btn btn-primary">
+                {% if form.instance.pk %}
+                    Guardar gasto
+                {% else %}
+                    Crear gasto
+                {% endif %}
+            </button>
+            <a class="btn btn-secondary" href="{% url 'expense_list' %}">Volver</a>
+        </div>
     </form>
-
-    <a href="{% url 'expense_list' %}">Volver</a>
 {% endblock %}
diff --git a/expenses_manager/expenses/templates/expenses/expense_list.html b/expenses_manager/expenses/templates/expenses/expense_list.html
index 4fc13ab..f8a0c90 100644
--- a/expenses_manager/expenses/templates/expenses/expense_list.html
+++ b/expenses_manager/expenses/templates/expenses/expense_list.html
@@ -44,8 +44,8 @@
                 {% endfor %}
             </select>
 
-            <button type="submit">Filtrar</button>
-            <a href="{% url 'expense_list' %}" class="btn-secondary">Limpiar</a>
+            <button type="submit" class="btn btn-primary">Filtrar</button>
+            <a href="{% url 'expense_list' %}" class="btn btn-secondary">Limpiar</a>
         </div>
 
         <br>
@@ -100,6 +100,7 @@
         <strong>Categorías:</strong> {{ kpi_categories }}
     </section>
 
+    <div class="table-wrap">
     <table>
         <thead>
             <tr>
@@ -147,7 +148,8 @@
             {% endfor %}
         </tbody>
     </table>
-    
+    </div>
+
     <div class="pagination">
         <span class="step-links">            
             {% if page_obj.has_previous %}
diff --git a/expenses_manager/expenses/templates/expenses/home.html b/expenses_manager/expenses/templates/expenses/home.html
index 90a45da..835415b 100644
--- a/expenses_manager/expenses/templates/expenses/home.html
+++ b/expenses_manager/expenses/templates/expenses/home.html
@@ -33,8 +33,10 @@
     <section>
         <div class="dashboard-grid">
             <div class="card card-chart">
-                <h2>Últimos meses</h2>                
-                <canvas id="miniChart"></canvas>
+                <h2>Últimos meses</h2>
+                <div class="canvas-wrapper">
+                    <canvas id="miniChart"></canvas>
+                </div>
             </div>
         </div>
 
@@ -43,22 +45,40 @@
             const data = {{ mini_chart_data|safe }};
             
             const ctx = document.getElementById('miniChart');
+            const miniChartColors = getChartColors();
 
-            new Chart(ctx, {
+            const miniChart = new Chart(ctx, {
                 type: 'bar',
                 data: {
                     labels: labels,
                     datasets:[{
                         label: 'Gastos',
                         data: data,
+                        backgroundColor: miniChartColors.primaryColor,
                     }]
                 },
                 options: {
                     responsive: true,
-                    maintainAspectRatio: false
+                    maintainAspectRatio: false,
+                    scales: {
+                        x: {
+                            grid: { color: miniChartColors.gridColor },
+                            ticks: { color: miniChartColors.tickColor }
+                        },
+                        y: {
+                            beginAtZero: true,
+                            grid: { color: miniChartColors.gridColor },
+                            ticks: { color: miniChartColors.tickColor }
+                        }
+                    }
                 }
             });
-        </script>  
+
+            registerThemedChart(miniChart, function (chart, colors) {
+                chart.data.datasets[0].backgroundColor = colors.primaryColor;
+                applyCartesianColors(chart, colors);
+            });
+        </script>
 
     </section>
 
diff --git a/expenses_manager/expenses/templates/expenses/income_confirm_delete.html b/expenses_manager/expenses/templates/expenses/income_confirm_delete.html
index 275e395..895e997 100644
--- a/expenses_manager/expenses/templates/expenses/income_confirm_delete.html
+++ b/expenses_manager/expenses/templates/expenses/income_confirm_delete.html
@@ -1,20 +1,16 @@
-{% extends "expenses/base.html" %}
+{% extends "expenses/_confirm_delete.html" %}
+
 {% block title %}Eliminar ingreso{% endblock %}
 
-{% block content %}        
-    <h1>Eliminar ingreso</h1>
+{% block delete_heading %}Eliminar ingreso{% endblock %}
 
-    <p>
-        ¿Seguro que quieres eliminar el ingreso de 
-        <strong>{{ income.amount }}€</strong>
-        del {{ income.date }} perteneciente a 
-        <strong>{{ income.account }}</strong>?
-    </p>
+{% block delete_question %}
+    ¿Seguro que quieres eliminar el ingreso de
+    <strong>{{ income.amount }}€</strong>
+    del {{ income.date }} perteneciente a
+    <strong>{{ income.account }}</strong>?
+{% endblock %}
 
-    <form method="post">
-        {% csrf_token %}
-        <button class="btn">Sí, eliminar</button>
-        <a class="btn secondary" href="{% url 'income_list' %}">Cancelar</a>
-    </form>
+{% block delete_button %}Sí, eliminar{% endblock %}
 
-{% endblock %}
\ No newline at end of file
+{% block cancel_url %}{% url 'income_list' %}{% endblock %}
diff --git a/expenses_manager/expenses/templates/expenses/income_form.html b/expenses_manager/expenses/templates/expenses/income_form.html
index 0446239..88495fa 100644
--- a/expenses_manager/expenses/templates/expenses/income_form.html
+++ b/expenses_manager/expenses/templates/expenses/income_form.html
@@ -19,14 +19,15 @@
     <form method="post">
         {% csrf_token %}
         {{ form.as_p }}
-        <button type="submit">
-            {% if form.instance.pk %}
-                Guardar ingreso
-            {% else %}
-                Crear ingreso
-            {% endif %}
-        </button>            
+        <div class="form-actions">
+            <button type="submit" class="btn btn-primary">
+                {% if form.instance.pk %}
+                    Guardar ingreso
+                {% else %}
+                    Crear ingreso
+                {% endif %}
+            </button>
+            <a class="btn btn-secondary" href="{% url 'income_list' %}">Volver</a>
+        </div>
     </form>
-
-    <a class="btn secondary" href="{% url 'income_list' %}">Volver</a>
 {% endblock %}
\ No newline at end of file
diff --git a/expenses_manager/expenses/templates/expenses/income_list.html b/expenses_manager/expenses/templates/expenses/income_list.html
index 911e5fa..7c9fb4d 100644
--- a/expenses_manager/expenses/templates/expenses/income_list.html
+++ b/expenses_manager/expenses/templates/expenses/income_list.html
@@ -5,6 +5,7 @@
 
     <a class="btn" href="{% url 'income_create' %}">➕ Nuevo ingreso</a>
 
+    <div class="table-wrap">
     <table>
         <thead>
             <tr>
@@ -37,5 +38,6 @@
             {% endfor %}
         </tbody>
     </table>
+    </div>
 
 {% endblock %}
\ No newline at end of file
diff --git a/expenses_manager/expenses/templates/expenses/tag_confirm_delete.html b/expenses_manager/expenses/templates/expenses/tag_confirm_delete.html
index ea1bd01..1bb9b32 100644
--- a/expenses_manager/expenses/templates/expenses/tag_confirm_delete.html
+++ b/expenses_manager/expenses/templates/expenses/tag_confirm_delete.html
@@ -1,17 +1,9 @@
-{% extends "expenses/base.html" %}
+{% extends "expenses/_confirm_delete.html" %}
+
 {% block title %}Etiquetas{% endblock %}
-{% block content %}
-    <h1>Eliminar etiqueta</h1>
 
-    <p>
-        ¿Seguro que quieres eliminar la etiqueta
-        <strong>{{ tag.name }}€</strong>?
-    </p>
+{% block delete_heading %}Eliminar etiqueta{% endblock %}
 
-    <form method="post">
-        {% csrf_token %}
-        <button class="btn">Eliminar</button>
-        <a class="btn secondary" href="{% url 'tag_list' %}">Cancelar</a>
-    </form>
+{% block delete_question %}¿Seguro que quieres eliminar la etiqueta <strong>{{ tag.name }}</strong>?{% endblock %}
 
-{% endblock %}
\ No newline at end of file
+{% block cancel_url %}{% url 'tag_list' %}{% endblock %}
diff --git a/expenses_manager/expenses/templates/expenses/tag_form.html b/expenses_manager/expenses/templates/expenses/tag_form.html
index ba1c83e..212c0a1 100644
--- a/expenses_manager/expenses/templates/expenses/tag_form.html
+++ b/expenses_manager/expenses/templates/expenses/tag_form.html
@@ -6,8 +6,9 @@
     <form method="post">
         {% csrf_token %}
         {{ form.as_p }}
-        <button type="submit">Guardar</button>
+        <div class="form-actions">
+            <button type="submit" class="btn btn-primary">Guardar</button>
+            <a class="btn btn-secondary" href="{% url 'tag_list' %}">Volver</a>
+        </div>
     </form>
-
-    <a class="btn secondary" href="{% url 'tag_list' %}">Volver</a>
 {% endblock %}
\ No newline at end of file
diff --git a/expenses_manager/expenses/templates/fuel/confirm_delete.html b/expenses_manager/expenses/templates/fuel/confirm_delete.html
index 1b7ee74..ede0165 100644
--- a/expenses_manager/expenses/templates/fuel/confirm_delete.html
+++ b/expenses_manager/expenses/templates/fuel/confirm_delete.html
@@ -1,26 +1,23 @@
-{% extends "expenses/base.html" %}
+{% extends "expenses/_confirm_delete.html" %}
 
-{% block title %}
-    Repostajes
+{% block title %}Repostajes{% endblock %}
+
+{% block delete_heading %}Eliminar repostaje.{% endblock %}
+
+{% block delete_question %}
+    ¿Seguro que quieres eliminar el repostaje del
+    <strong>{{ fuel.expense.date }}</strong>
+    ({{ fuel.liters }}L por {{ fuel.expense.amount }}€)?
 {% endblock %}
 
-{% block content %}
-    <h2>Eliminar repostaje.</h2>
-
-    <p>
-        ¿Seguro que quieres eliminar el repostaje del 
-        <strong>{{ fuel.expense.date}}</strong>
-        ({{ fuel.liters }}L por {{fuel.expense.amount}}€)?
-    </p>
-
+{% block delete_warnings %}
     <p class="form-errors">
         Se eliminará también el gasto asociado en el listado de gastos.
     </p>
+{% endblock %}
 
-    <form method="post">
-        {% csrf_token %}
-        {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
-        <button class="btn danger">Eliminar</button>
-        <a class="btn" href="{% url 'fuel_list' %}">Cancelar</a>
-    </form>
-{% endblock %}
\ No newline at end of file
+{% block delete_extra_fields %}
+    {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
+{% endblock %}
+
+{% block cancel_url %}{% if next %}{{ next }}{% else %}{% url 'fuel_list' %}{% endif %}{% endblock %}
diff --git a/expenses_manager/expenses/templates/fuel/create.html b/expenses_manager/expenses/templates/fuel/create.html
index 411b638..58a36cf 100644
--- a/expenses_manager/expenses/templates/fuel/create.html
+++ b/expenses_manager/expenses/templates/fuel/create.html
@@ -21,20 +21,22 @@
         {% csrf_token %}
         {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
         {{ form.as_p }}
-        <button type="submit">
-            {% if editing %}
-                Guardar repostaje
+        <div class="form-actions">
+            <button type="submit" class="btn btn-primary">
+                {% if editing %}
+                    Guardar repostaje
+                {% else %}
+                    Crear repostaje
+                {% endif %}
+            </button>
+
+            {% if next %}
+                <a class="btn btn-secondary" href="{{ next }}">Volver</a>
+            {% elif editing %}
+                <a class="btn btn-secondary" href="{% url 'expense_list' %}">Volver</a>
             {% else %}
-                Crear repostaje
+                <a class="btn btn-secondary" href="{% url 'fuel_list' %}">Volver</a>
             {% endif %}
-        </button>            
+        </div>
     </form>
-    
-    {% if next %}
-        <a class="btn" href="{{ next }}">Volver</a>
-    {% elif editing %}
-        <a class="btn" href="{% url 'expense_list' %}">Volver</a>
-    {% else %}
-        <a class="btn" href="{% url 'fuel_list' %}">Volver</a>
-    {% endif %}
 {% endblock %}
\ No newline at end of file
diff --git a/expenses_manager/expenses/templates/fuel/list.html b/expenses_manager/expenses/templates/fuel/list.html
index 040afee..2cfdb82 100644
--- a/expenses_manager/expenses/templates/fuel/list.html
+++ b/expenses_manager/expenses/templates/fuel/list.html
@@ -12,6 +12,7 @@
 
     </div>
 
+    <div class="table-wrap">
     <table>
         <thead>
             <tr>
@@ -41,6 +42,7 @@
             {% endfor %}
         </tbody>
     </table>
+    </div>
 
     <form method="get">
         <select name="year" onchange="this.form.submit()">
@@ -57,31 +59,73 @@
     
     <script>
         const monthlyData = {{ monthly_data|safe }};
+        const monthlyChartColors = getChartColors();
 
-        new Chart(document.getElementById('monthlyChart'), {
+        const monthlyChart = new Chart(document.getElementById('monthlyChart'), {
             type: 'bar',
             data: {
                 labels: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
                 datasets: [{
                     label: 'Gasto mensual',
-                    data: monthlyData
+                    data: monthlyData,
+                    backgroundColor: monthlyChartColors.primaryColor
                 }]
+            },
+            options: {
+                scales: {
+                    x: {
+                        grid: { color: monthlyChartColors.gridColor },
+                        ticks: { color: monthlyChartColors.tickColor }
+                    },
+                    y: {
+                        beginAtZero: true,
+                        grid: { color: monthlyChartColors.gridColor },
+                        ticks: { color: monthlyChartColors.tickColor }
+                    }
+                }
             }
         });
 
+        registerThemedChart(monthlyChart, function (chart, colors) {
+            chart.data.datasets[0].backgroundColor = colors.primaryColor;
+            applyCartesianColors(chart, colors);
+        });
+
         const kmData = {{ km_data|safe }};
         const kmDates = {{ km_dates|safe }};
+        const kmChartColors = getChartColors();
 
-        new Chart(document.getElementById('kmChart'), {
+        const kmChart = new Chart(document.getElementById('kmChart'), {
             type: 'line',
             data: {
                 labels: kmDates,
                 datasets: [{
                     label: 'Km entre repostajes',
-                    data: kmData
+                    data: kmData,
+                    borderColor: kmChartColors.primaryColor,
+                    backgroundColor: kmChartColors.primaryFill
                 }]
+            },
+            options: {
+                scales: {
+                    x: {
+                        grid: { color: kmChartColors.gridColor },
+                        ticks: { color: kmChartColors.tickColor }
+                    },
+                    y: {
+                        beginAtZero: true,
+                        grid: { color: kmChartColors.gridColor },
+                        ticks: { color: kmChartColors.tickColor }
+                    }
+                }
             }
         });
+
+        registerThemedChart(kmChart, function (chart, colors) {
+            chart.data.datasets[0].borderColor = colors.primaryColor;
+            chart.data.datasets[0].backgroundColor = colors.primaryFill;
+            applyCartesianColors(chart, colors);
+        });
     </script>
 
 {% endblock %}
\ No newline at end of file
diff --git a/expenses_manager/expenses/templates/goals/confirm_delete.html b/expenses_manager/expenses/templates/goals/confirm_delete.html
index 63c2655..6c9e642 100644
--- a/expenses_manager/expenses/templates/goals/confirm_delete.html
+++ b/expenses_manager/expenses/templates/goals/confirm_delete.html
@@ -1,18 +1,9 @@
-{% extends "expenses/base.html" %}
+{% extends "expenses/_confirm_delete.html" %}
+
 {% block title %}Objetivos{% endblock %}
-{% block content %}
 
-<h1>Eliminar objetivo</h1>
+{% block delete_heading %}Eliminar objetivo{% endblock %}
 
-<p>
-    ¿Seguro que quieres eliminar el objetivo
-    <strong>{{ goal.name }}</strong>?
-</p>
+{% block delete_question %}¿Seguro que quieres eliminar el objetivo <strong>{{ goal.name }}</strong>?{% endblock %}
 
-<form method="post">
-    {% csrf_token %}
-    <button class="btn">Eliminar</button>
-    <a class="btn secondary" href="{% url 'goal_list' %}">Cancelar</a>
-</form>
-
-{% endblock %}
\ No newline at end of file
+{% block cancel_url %}{% url 'goal_list' %}{% endblock %}
diff --git a/expenses_manager/expenses/templates/goals/form.html b/expenses_manager/expenses/templates/goals/form.html
index 0c54707..550752a 100644
--- a/expenses_manager/expenses/templates/goals/form.html
+++ b/expenses_manager/expenses/templates/goals/form.html
@@ -11,10 +11,11 @@
     <form method="post">
         {% csrf_token %}
         {{ form.as_p }}
-        <button type="submit">
-            Guardar
-        </button>            
+        <div class="form-actions">
+            <button type="submit" class="btn btn-primary">
+                Guardar
+            </button>
+            <a class="btn btn-secondary" href="{% url 'goal_list' %}">Volver</a>
+        </div>
     </form>
-
-    <a class="btn secondary" href="{% url 'goal_list' %}">Volver</a>
 {% endblock %}
\ No newline at end of file
diff --git a/expenses_manager/expenses/templates/goals/list.html b/expenses_manager/expenses/templates/goals/list.html
index 861d6a4..c7c0028 100644
--- a/expenses_manager/expenses/templates/goals/list.html
+++ b/expenses_manager/expenses/templates/goals/list.html
@@ -9,8 +9,9 @@
 {% block content %}
 <h2>Objetivos</h2>
 
-<a class=btn href="{% url 'goal_create' %}">➕ Nuevo objetivo</a>
+<a class="btn btn-primary" href="{% url 'goal_create' %}">➕ Nuevo objetivo</a>
 
+<div class="table-wrap">
 <table>
     <tr>
         <th>Nombre</th>
@@ -53,5 +54,6 @@
     </tr>
     {% endfor %}
 </table>
+</div>
 
 {% endblock %}
\ No newline at end of file
diff --git a/expenses_manager/expenses/templates/registration/login.html b/expenses_manager/expenses/templates/registration/login.html
index f9d3d63..bcb98db 100644
--- a/expenses_manager/expenses/templates/registration/login.html
+++ b/expenses_manager/expenses/templates/registration/login.html
@@ -7,7 +7,7 @@
 <form method="post">
     {% csrf_token %}
     {{ form.as_p }}
-    <button type="submit">Entrar</button>
+    <button type="submit" class="btn btn-primary">Entrar</button>
 </form>
 
 <p class="auth-help">
diff --git a/expenses_manager/expenses/templates/registration/password_change_form.html b/expenses_manager/expenses/templates/registration/password_change_form.html
index 3b91c4a..0145f5a 100644
--- a/expenses_manager/expenses/templates/registration/password_change_form.html
+++ b/expenses_manager/expenses/templates/registration/password_change_form.html
@@ -5,6 +5,6 @@
     <form method="post">
         {% csrf_token %}
         {{ form.as_p }}
-        <button type="submit">Cambiar</button>
+        <button type="submit" class="btn btn-primary">Cambiar</button>
     </form>
 {% endblock %}
\ No newline at end of file
diff --git a/expenses_manager/expenses/tests/test_fuel.py b/expenses_manager/expenses/tests/test_fuel.py
index 72be9a4..c00a4e6 100644
--- a/expenses_manager/expenses/tests/test_fuel.py
+++ b/expenses_manager/expenses/tests/test_fuel.py
@@ -67,3 +67,165 @@ def test_fuel_delete_post_cascades_to_fuelentry(auth_client, user, account, cate
 
     assert not Expense.objects.filter(pk=expense.pk).exists()
     assert not FuelEntry.objects.filter(pk=entry.pk).exists()
+
+
+def _edit_payload(account, edit_date, amount, odometer, liters, next_url=None):
+    payload = {
+        "date": edit_date.strftime("%Y-%m-%d"),
+        "amount": str(amount),
+        "account": account.pk,
+        "odometer": str(odometer),
+        "liters": str(liters),
+    }
+    if next_url is not None:
+        payload["next"] = next_url
+    return payload
+
+
+def test_fuel_edit_post_updates_expense_and_fuelentry(auth_client, user, account, category):
+    entry = _make_fuel_entry(user, account, category, odometer=1000, liters=Decimal("20"), amount=Decimal("50"))
+    expense = entry.expense
+    new_date = date(2024, 3, 1)
+
+    response = auth_client.post(
+        reverse('fuel_edit', args=[expense.pk]),
+        _edit_payload(account, new_date, Decimal("45.50"), 1200, Decimal("22.5")),
+    )
+
+    assert response.status_code == 302
+
+    expense.refresh_from_db()
+    entry.refresh_from_db()
+
+    assert expense.amount == Decimal("45.50")
+    assert expense.date == new_date
+    assert expense.account_id == account.pk
+    assert entry.odometer == 1200
+    assert entry.liters == Decimal("22.5")
+
+
+def test_fuel_edit_invalid_post_returns_200_and_does_not_modify(auth_client, user, account, category):
+    entry = _make_fuel_entry(user, account, category, odometer=1000, liters=Decimal("20"), amount=Decimal("50"))
+    expense = entry.expense
+    original_date = expense.date
+
+    payload = _edit_payload(account, date(2024, 3, 1), Decimal("45.50"), 1200, Decimal("22.5"))
+    payload["liters"] = ""
+
+    response = auth_client.post(reverse('fuel_edit', args=[expense.pk]), payload)
+
+    assert response.status_code == 200
+
+    expense.refresh_from_db()
+    entry.refresh_from_db()
+
+    assert expense.amount == Decimal("50")
+    assert expense.date == original_date
+    assert entry.odometer == 1000
+    assert entry.liters == Decimal("20")
+
+
+def test_fuel_edit_redirects_to_next_when_relative(auth_client, user, account, category):
+    entry = _make_fuel_entry(user, account, category, odometer=1000, liters=Decimal("20"))
+    expense = entry.expense
+    next_url = reverse('expense_list')
+
+    response = auth_client.post(
+        reverse('fuel_edit', args=[expense.pk]),
+        _edit_payload(account, date(2024, 3, 1), Decimal("45.50"), 1200, Decimal("22.5"), next_url=next_url),
+    )
+
+    assert response.status_code == 302
+    assert response.url == next_url
+
+
+def test_fuel_edit_ignores_external_next(auth_client, user, account, category):
+    entry = _make_fuel_entry(user, account, category, odometer=1000, liters=Decimal("20"))
+    expense = entry.expense
+
+    response = auth_client.post(
+        reverse('fuel_edit', args=[expense.pk]),
+        _edit_payload(
+            account, date(2024, 3, 1), Decimal("45.50"), 1200, Decimal("22.5"),
+            next_url="https://evil.com",
+        ),
+    )
+
+    assert response.status_code == 302
+    assert response.url == reverse('expense_list')
+
+
+def test_fuel_delete_get_does_not_delete(auth_client, user, account, category):
+    entry = _make_fuel_entry(user, account, category, odometer=1000, liters=Decimal("20"))
+    expense = entry.expense
+
+    response = auth_client.get(reverse('fuel_delete', args=[expense.pk]))
+
+    assert response.status_code == 200
+    assert Expense.objects.filter(pk=expense.pk).exists()
+    assert FuelEntry.objects.filter(pk=entry.pk).exists()
+
+
+def test_fuel_delete_get_cancel_link_uses_next_when_provided(auth_client, user, account, category):
+    entry = _make_fuel_entry(user, account, category, odometer=1000, liters=Decimal("20"))
+    expense = entry.expense
+    next_url = reverse('expense_list')
+
+    response = auth_client.get(reverse('fuel_delete', args=[expense.pk]), {"next": next_url})
+
+    assert response.status_code == 200
+    assert f'<a class="btn btn-secondary" href="{next_url}">Cancelar</a>'.encode() in response.content
+
+
+def test_fuel_delete_get_cancel_link_falls_back_to_fuel_list_without_next(auth_client, user, account, category):
+    entry = _make_fuel_entry(user, account, category, odometer=1000, liters=Decimal("20"))
+    expense = entry.expense
+    fuel_list_url = reverse('fuel_list')
+
+    response = auth_client.get(reverse('fuel_delete', args=[expense.pk]))
+
+    assert response.status_code == 200
+    assert f'<a class="btn btn-secondary" href="{fuel_list_url}">Cancelar</a>'.encode() in response.content
+
+
+def test_fuel_delete_post_redirects_to_next_when_relative(auth_client, user, account, category):
+    entry = _make_fuel_entry(user, account, category, odometer=1000, liters=Decimal("20"))
+    expense = entry.expense
+    next_url = reverse('expense_list')
+
+    response = auth_client.post(reverse('fuel_delete', args=[expense.pk]), {"next": next_url})
+
+    assert response.status_code == 302
+    assert response.url == next_url
+
+
+def test_fuel_delete_post_ignores_external_next(auth_client, user, account, category):
+    entry = _make_fuel_entry(user, account, category, odometer=1000, liters=Decimal("20"))
+    expense = entry.expense
+
+    response = auth_client.post(reverse('fuel_delete', args=[expense.pk]), {"next": "https://evil.com"})
+
+    assert response.status_code == 302
+    assert response.url == reverse('fuel_list')
+
+
+def test_fuel_delete_get_ignores_unsafe_next_in_cancel_link(auth_client, user, account, category):
+    entry = _make_fuel_entry(user, account, category, odometer=1000, liters=Decimal("20"))
+    expense = entry.expense
+    fuel_list_url = reverse('fuel_list')
+
+    response = auth_client.get(reverse('fuel_delete', args=[expense.pk]), {"next": "javascript:alert(1)"})
+
+    assert response.status_code == 200
+    assert b"javascript:" not in response.content
+    assert f'<a class="btn btn-secondary" href="{fuel_list_url}">Cancelar</a>'.encode() in response.content
+
+
+def test_fuel_edit_get_ignores_unsafe_next_in_cancel_link(auth_client, user, account, category):
+    entry = _make_fuel_entry(user, account, category, odometer=1000, liters=Decimal("20"))
+    expense = entry.expense
+
+    response = auth_client.get(reverse('fuel_edit', args=[expense.pk]), {"next": "javascript:alert(1)"})
+
+    assert response.status_code == 200
+    assert b"javascript:" not in response.content
diff --git a/expenses_manager/expenses/views.py b/expenses_manager/expenses/views.py
index fb35a91..65cd142 100644
--- a/expenses_manager/expenses/views.py
+++ b/expenses_manager/expenses/views.py
@@ -30,17 +30,22 @@ def _get_int(value):
         return None
 
 
-def _redirect_back(request, fallback):
+def _safe_next(request):
     next_url = request.POST.get("next") or request.GET.get("next")
-    
+
     if next_url and url_has_allowed_host_and_scheme(
         next_url,
         allowed_hosts={request.get_host()},
         require_https=request.is_secure(),
     ):
-        return redirect(next_url)
-    
-    return redirect(fallback)
+        return next_url
+
+    return ""
+
+
+def _redirect_back(request, fallback):
+    next_url = _safe_next(request)
+    return redirect(next_url or fallback)
 
 
 def sub_months(year, month, n):
@@ -237,7 +242,6 @@ def expense_create(request):
 
 @login_required
 def expense_edit(request, pk):
-    # sourcery skip: assign-if-exp, merge-else-if-into-elif
     expense = get_object_or_404(
         Expense,
         pk=pk,
@@ -805,20 +809,16 @@ def fuel_list(request):
 
 @login_required
 def fuel_edit(request, pk):
-    expense = get_object_or_404(
-        Expense,
-        pk=pk,
-        owner=request.user,
-    )
+    expense = get_object_or_404(Expense, pk=pk, owner=request.user)
 
     fuel = get_object_or_404(FuelEntry, expense=expense)
 
     if request.method == "POST":
-        form = FuelEntryForm(request.POST, user=request.user)
+        form = FuelEntryForm(request.POST, instance=expense, user=request.user)
 
         if form.is_valid():
             # Update expense
-            expense.date = form.save(commit=False)
+            expense = form.save(commit=False)
             expense.description = "Repostaje"
             expense.save()
 
@@ -831,8 +831,8 @@ def fuel_edit(request, pk):
     else:
         form = FuelEntryForm(instance=expense, user=request.user)
 
-    next_url = request.POST.get("next") or request.GET.get("next", "")
-    
+    next_url = _safe_next(request)
+
     return render(
         request,
         "fuel/create.html",
@@ -855,8 +855,8 @@ def fuel_delete(request, pk):
         messages.success(request, "Repostaje eliminado.")
         return _redirect_back(request, "fuel_list")
 
-    next_url = request.POST.get("next") or request.GET.get("next", "")
-    
+    next_url = _safe_next(request)
+
     return render(
         request,
         "fuel/confirm_delete.html",