expenses_manager/expenses/static/expenses/css/base.css

@@ -453,3 +453,34 @@ tbody tr:hover {
     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;
+}

expenses_manager/expenses/templates/settings/index.html

@@ -0,0 +1,29 @@
+{% extends "expenses/base.html" %}
+
+{% block title %}
+    Configuración
+{% endblock %}
+
+{% block content %}
+<h2>Configuración</h2>
+
+<p>Gestiona las categorías, etiquetas y objetivos de tu cuenta</p>
+
+<div class="settings-grid">
+    <a class="settings-card" href="{% url 'category_list' %}">
+        <h3>Categorías</h3>
+        <p>Organiza tus gastos por tipo.</p>
+    </a>
+
+    <a class="settings-card" href="{% url 'tag_list' %}">
+        <h3>Etiquetas</h3>
+        <p>Añade etiquetas libres a tus gastos.</p>
+    </a>
+
+    <a class="settings-card" href="{% url 'goal_list' %}">
+        <h3>Objetivos</h3>
+        <p>Define y controla tus metas de gasto.</p>
+    </a>
+</div>
+
+{% endblock %}

expenses_manager/expenses/views.py

@@ -957,4 +957,4 @@ def goal_delete(request, pk):
 
 @login_required
 def settings_index(request):
-    return render(request, "settings/index.html")
+    return render(request, "settings/index.html", {"active_menu": "settings"})