diff --git a/src/main/resources/static/planning.html b/src/main/resources/static/planning.html
new file mode 100644
index 0000000..fdf8888
--- /dev/null
+++ b/src/main/resources/static/planning.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security" lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Planning TAI — Agenda</title>
+  <link rel="stylesheet" th:href="@{/css/style.css}">
+  <link rel="stylesheet" th:href="@{/css/planning.css}">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+</head>
+<body>
+
+  <!-- ── Topbar ─────────────────────────────────────────── -->
+  <nav class="topbar">
+    <a th:href="@{/}" class="topbar-brand" style="text-decoration:none">
+      <i class="fas fa-graduation-cap"></i> TAI – AGE
+    </a>
+    <nav class="topbar-nav">
+      <a th:href="@{/}">Inicio</a>
+      <a th:href="@{/curso}">Temario</a>
+      <a href="/cuestionarios">Cuestionarios</a>
+      <a th:href="@{/leyes}">Leyes</a>
+      <a th:href="@{/noticias}">Noticias</a>
+      <a th:href="@{/planning}" class="active">Planning</a>
+      <a sec:authorize="hasAnyRole('PAGADO','ADMIN')" th:href="@{/flashcards.html}">Flashcards</a>
+    </nav>
+    <div class="topbar-user">
+      <span sec:authorize="isAuthenticated()" class="user-email" th:text="${#strings.substringBefore(#authentication.name, '@')}"></span>
+      <form sec:authorize="isAuthenticated()" th:action="@{/logout}" method="post" style="margin:0">
+        <button type="submit" class="btn-logout">Salir</button>
+      </form>
+    </div>
+  </nav>
+
+  <div class="planning-container">
+    <h1><i class="fas fa-calendar-alt"></i> Mi Planning 2026</h1>
+    
+    <!-- Header con navegación -->
+    <div class="planning-header">
+      <div class="month-nav">
+        <button class="nav-btn" id="prevMonth" title="Mes anterior"><i class="fas fa-chevron-left"></i></button>
+        <div class="month-title" id="monthTitle"></div>
+        <button class="nav-btn" id="nextMonth" title="Próximo mes"><i class="fas fa-chevron-right"></i></button>
+      </div>
+      <button class="reset-btn" id="resetBtn" title="Limpiar todo"><i class="fas fa-trash"></i> Limpiar todo</button>
+    </div>
+
+    <!-- Formulario para agregar tareas -->
+    <form class="add-task-form" id="addTaskForm">
+      <input 
+        type="text" 
+        id="taskInput" 
+        placeholder="Escribe una tarea..." 
+        maxlength="80"
+        autocomplete="off"
+      >
+      <button type="submit"><i class="fas fa-plus"></i> Agregar</button>
+    </form>
+
+    <!-- Calendario -->
+    <div class="calendar-grid" id="calendarGrid"></div>
+  </div>
+
+  <script th:src="@{/js/planningdinamico.js}"></script>
+</body>
+</html>
\ No newline at end of file
