diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..30cf57e
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,10 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Ignored default folder with query files
+/queries/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..4b151ab
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..d1d7b44
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/oncodiario.iml" filepath="$PROJECT_DIR$/.idea/oncodiario.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/oncodiario.iml b/.idea/oncodiario.iml
new file mode 100644
index 0000000..d6ebd48
--- /dev/null
+++ b/.idea/oncodiario.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/frontend/css/estilos.css b/frontend/css/estilos.css
new file mode 100644
index 0000000..7610dd7
--- /dev/null
+++ b/frontend/css/estilos.css
@@ -0,0 +1,445 @@
+:root{
+    --primary:#4da3ff;
+    --secondary:#7dd3fc;
+    --success:#22c55e;
+    --bg:#0b1220;
+    --bg-soft:#111c2d;
+    --card:#101b2d;
+    --card-strong:#16243d;
+    --text:#eaf3ff;
+    --navy:#dfeafe;
+    --muted:#9bb0d0;
+    --border:#1d2f49;
+    --shadow:0 20px 50px rgba(0, 0, 0, 0.45);
+}
+
+*{
+    box-sizing:border-box;
+    margin:0;
+    padding:0;
+}
+
+body{
+    font-family: 'Inter', Segoe UI, Arial, sans-serif;
+    background:radial-gradient(circle at top, #11213d 0%, #0b1220 38%, #070d1a 100%);
+    color:var(--text);
+    padding:20px;
+}
+
+.container{
+    max-width:1200px;
+    margin:auto;
+}
+
+.page-shell{
+    max-width:1280px;
+    margin:0 auto;
+}
+
+.topbar{
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    gap:20px;
+    background:rgba(16, 27, 45, 0.9);
+    border:1px solid var(--border);
+    border-radius:18px;
+    padding:18px 24px;
+    box-shadow:var(--shadow);
+    margin-bottom:32px;
+}
+
+.brand{
+    display:flex;
+    align-items:center;
+    gap:12px;
+    font-weight:700;
+    color:var(--navy);
+}
+
+.brand-mark{
+    width:36px;
+    height:36px;
+    border-radius:12px;
+    background:linear-gradient(135deg, var(--primary), var(--secondary));
+    color:#08101d;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    font-size:1.1rem;
+    box-shadow:0 12px 20px rgba(77, 163, 255, 0.35);
+}
+
+.topbar-nav{
+    display:flex;
+    align-items:center;
+    gap:22px;
+}
+
+.topbar-nav a{
+    text-decoration:none;
+    color:var(--navy);
+    font-weight:600;
+    opacity:.8;
+}
+
+.topbar-nav a:hover{
+    color:var(--secondary);
+}
+
+.btn{
+    display:inline-flex;
+    align-items:center;
+    justify-content:center;
+    padding:12px 20px;
+    border-radius:12px;
+    font-weight:700;
+    text-decoration:none;
+    transition:all .2s ease;
+    border:1px solid transparent;
+    cursor:pointer;
+}
+
+.btn:hover{
+    transform:translateY(-1px);
+    box-shadow:0 10px 18px rgba(77, 163, 255, 0.2);
+}
+
+.btn-primary{
+    background:linear-gradient(135deg, var(--primary), #5ea9ff);
+    color:#08101d;
+    box-shadow:0 10px 18px rgba(77, 163, 255, 0.28);
+}
+
+.btn-secondary{
+    background:rgba(18, 31, 50, 0.9);
+    color:var(--text);
+    border-color:var(--border);
+}
+
+.hero{
+    display:grid;
+    grid-template-columns:1.2fr .8fr;
+    gap:32px;
+    align-items:center;
+    padding:20px 0 28px;
+}
+
+.hero-copy{
+    padding:20px 0;
+}
+
+.eyebrow{
+    display:inline-block;
+    background:rgba(77, 163, 255, 0.12);
+    color:var(--secondary);
+    padding:8px 12px;
+    border:1px solid rgba(125, 211, 252, 0.28);
+    border-radius:999px;
+    font-size:.8rem;
+    font-weight:700;
+    letter-spacing:.04em;
+    text-transform:uppercase;
+    margin-bottom:18px;
+}
+
+h1{
+    color:var(--navy);
+    font-size:clamp(2.2rem, 4vw, 4rem);
+    line-height:1.1;
+    margin-bottom:18px;
+}
+
+.hero-copy p{
+    font-size:1.08rem;
+    line-height:1.7;
+    color:var(--muted);
+    max-width:620px;
+}
+
+.actions{
+    display:flex;
+    gap:16px;
+    margin-top:26px;
+    flex-wrap:wrap;
+}
+
+.mini-stats{
+    list-style:none;
+    display:flex;
+    gap:24px;
+    margin-top:28px;
+    flex-wrap:wrap;
+}
+
+.mini-stats li{
+    min-width:110px;
+    background:rgba(19, 29, 46, 0.95);
+    border:1px solid var(--border);
+    border-radius:16px;
+    padding:16px 18px;
+    box-shadow:0 8px 20px rgba(0,0,0,0.15);
+}
+
+.mini-stats strong{
+    display:block;
+    color:var(--secondary);
+    font-size:1.35rem;
+    margin-bottom:6px;
+}
+
+.mini-stats span{
+    color:var(--muted);
+    font-size:.9rem;
+}
+
+.hero-panel{
+    background:linear-gradient(180deg, #111d2e 0%, #0d1726 100%);
+    border:1px solid var(--border);
+    border-radius:24px;
+    padding:24px;
+    box-shadow:var(--shadow);
+}
+
+.panel-header{
+    display:flex;
+    align-items:center;
+    gap:10px;
+    font-weight:700;
+    color:var(--navy);
+    margin-bottom:18px;
+}
+
+.status-dot{
+    width:10px;
+    height:10px;
+    border-radius:50%;
+    background:var(--success);
+    box-shadow:0 0 0 6px rgba(34, 197, 94, 0.15);
+}
+
+.panel-card{
+    background:rgba(77, 163, 255, 0.08);
+    border-radius:18px;
+    padding:18px;
+    border:1px solid rgba(77, 163, 255, 0.24);
+    margin-bottom:22px;
+}
+
+.label{
+    color:var(--muted);
+    font-size:.8rem;
+    margin-bottom:8px;
+}
+
+.panel-card h3{
+    color:var(--text);
+    font-size:1.7rem;
+}
+
+.panel-metrics{
+    display:grid;
+    grid-template-columns:1fr 1fr;
+    gap:14px;
+    margin-bottom:20px;
+}
+
+.panel-metrics div{
+    background:rgba(17, 29, 46, 0.8);
+    border:1px solid var(--border);
+    border-radius:14px;
+    padding:14px 12px;
+}
+
+.panel-metrics small{
+    display:block;
+    color:var(--muted);
+    margin-bottom:8px;
+}
+
+.panel-metrics strong{
+    color:var(--text);
+    font-size:1rem;
+}
+
+.panel-progress{
+    background:rgba(17, 29, 46, 0.8);
+    border:1px solid var(--border);
+    border-radius:14px;
+    padding:14px;
+}
+
+.progress-labels{
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    gap:10px;
+    margin-bottom:10px;
+    font-size:.9rem;
+    color:var(--navy);
+}
+
+.progress-bar{
+    background:#101a2b;
+    height:12px;
+    border-radius:999px;
+    overflow:hidden;
+    border:1px solid var(--border);
+}
+
+.progress-bar span{
+    display:block;
+    width:68%;
+    height:100%;
+    background:linear-gradient(90deg, var(--primary), var(--secondary));
+    border-radius:inherit;
+}
+
+.features{
+    display:grid;
+    grid-template-columns:repeat(3, minmax(0, 1fr));
+    gap:24px;
+    padding:20px 0 40px;
+}
+
+.feature-card{
+    background:rgba(16, 27, 45, 0.96);
+    border:1px solid var(--border);
+    border-radius:20px;
+    padding:26px 20px;
+    box-shadow:0 12px 22px rgba(0,0,0,0.12);
+}
+
+.feature-card h2{
+    color:var(--secondary);
+    margin-bottom:12px;
+    font-size:1.25rem;
+}
+
+.feature-card p{
+    color:var(--muted);
+    line-height:1.7;
+}
+
+@media (max-width: 900px){
+    .hero{
+        grid-template-columns:1fr;
+    }
+
+    .topbar{
+        flex-wrap:wrap;
+        justify-content:center;
+    }
+
+    .topbar-nav{
+        order:3;
+        width:100%;
+        justify-content:center;
+    }
+}
+
+@media (max-width: 640px){
+    body{
+        padding:14px;
+    }
+
+    .features{
+        grid-template-columns:1fr;
+    }
+
+    .actions,
+    .mini-stats{
+        flex-direction:column;
+    }
+
+    .btn{
+        width:100%;
+    }
+}
+
+.card{
+    background:var(--card);
+    padding:20px;
+    margin-bottom:20px;
+    border-radius:12px;
+    box-shadow:0 2px 8px rgba(0,0,0,.08);
+}
+
+h1, h2{
+    margin-bottom:10px;
+}
+
+h2{
+    margin-bottom:15px;
+    color:#dfeafe;
+}
+
+.progress{
+    display:flex;
+    gap:8px;
+    flex-wrap:wrap;
+    margin:15px 0;
+}
+
+.session{
+    width:40px;
+    height:40px;
+    border:2px solid var(--primary);
+    border-radius:50%;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    cursor:pointer;
+    transition:.3s;
+}
+
+.session.completed{
+    background:var(--success);
+    color:white;
+    border-color:var(--success);
+}
+
+table{
+    width:100%;
+    border-collapse:collapse;
+    margin-top:10px;
+}
+
+th{
+    background:var(--primary);
+    color:#07111d;
+}
+
+th,td{
+    border:1px solid var(--border);
+    padding:10px;
+    text-align:center;
+    color:var(--text);
+}
+
+input[type="text"],
+input[type="date"],
+textarea,
+select{
+    width:100%;
+    padding:8px;
+    border:1px solid var(--border);
+    border-radius:6px;
+    background:rgba(13, 23, 38, 0.9);
+    color:var(--text);
+}
+
+textarea{
+    min-height:120px;
+    resize:vertical;
+}
+
+.question{
+    margin-bottom:10px;
+}
+
+small{
+    display:block;
+    margin-top:10px;
+    color:var(--muted);
+}
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..450aa1b
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>OncoDiario</title>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/estilos.css">
+</head>
+<body>
+    <div class="page-shell">
+        <header class="topbar container">
+            <div class="brand" aria-label="OncoDiario logo">
+                <span class="brand-mark">O</span>
+                <span>OncoDiario</span>
+            </div>
+
+            <nav class="topbar-nav" aria-label="Navegación principal">
+                <a href="#info">Inicio</a>
+                <a href="#info">Qué incluye</a>
+                <a href="seguimiento.html">Seguimiento</a>
+            </nav>
+
+            <a class="btn btn-primary" href="seguimiento.html">Abrir seguimiento</a>
+        </header>
+
+        <main class="container hero">
+            <section class="hero-copy">
+                <span class="eyebrow">Cuidado personalizado</span>
+                <h1>Tu tratamiento, monitorizado con claridad.</h1>
+                <p>
+                    Registra sesiones, revisa síntomas y lleva un control semanal de tu evolución
+                    para acompañarte mejor en cada fase del tratamiento.
+                </p>
+
+                <div class="actions">
+                    <a class="btn btn-primary" href="seguimiento.html">Ir a seguimiento</a>
+                    <a class="btn btn-secondary" href="#info">Más información</a>
+                </div>
+
+                <ul class="mini-stats" aria-label="Estadísticas rápidas">
+                    <li>
+                        <strong>12</strong>
+                        <span>semanas</span>
+                    </li>
+                    <li>
+                        <strong>3</strong>
+                        <span>registros</span>
+                    </li>
+                    <li>
+                        <strong>24/7</strong>
+                        <span>seguimiento</span>
+                    </li>
+                </ul>
+            </section>
+
+            <aside class="hero-panel" aria-label="Resumen del tratamiento">
+                <div class="panel-header">
+                    <span class="status-dot"></span>
+                    <span>Resumen del paciente</span>
+                </div>
+
+                <div class="panel-card">
+                    <p class="label">Tratamiento actual</p>
+                    <h3>Quimioterapia</h3>
+                </div>
+
+                <div class="panel-metrics">
+                    <div>
+                        <small>Próxima sesión</small>
+                        <strong>15 oct</strong>
+                    </div>
+                    <div>
+                        <small>Estado</small>
+                        <strong>Estable</strong>
+                    </div>
+                </div>
+
+                <div class="panel-progress">
+                    <div class="progress-labels">
+                        <span>Progreso semanal</span>
+                        <strong>68%</strong>
+                    </div>
+                    <div class="progress-bar">
+                        <span></span>
+                    </div>
+                </div>
+            </aside>
+        </main>
+
+        <section id="info" class="container features" aria-label="Características principales">
+            <article class="feature-card">
+                <h2>Calendario</h2>
+                <p>Organiza sesiones, fechas de tratamiento y revisiones médicas.</p>
+            </article>
+            <article class="feature-card">
+                <h2>Síntomas</h2>
+                <p>Controla fatiga, náuseas, dolor y bienestar general cada semana.</p>
+            </article>
+            <article class="feature-card">
+                <h2>Consulta</h2>
+                <p>Prepara preguntas y anota observaciones para tus citas con el equipo.</p>
+            </article>
+        </section>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/seguimiento.html b/frontend/seguimiento.html
new file mode 100644
index 0000000..d641c5b
--- /dev/null
+++ b/frontend/seguimiento.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OncoDiario - Seguimiento del Tratamiento</title>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/estilos.css">
+    <link rel="icon" href="img/logo.svg" type="image/x-icon">
+</head>
+
+<body>
+
+<div class="container">
+
+    <div class="card">
+        <h1>🩺 OncoDiario</h1>
+        <p>Seguimiento del tratamiento oncológico</p>
+
+        <br>
+
+        <label>Fecha de inicio:</label>
+        <input type="date">
+
+        <div class="progress" id="progress"></div>
+    </div>
+
+    <div class="card">
+        <h2>Calendario de sesiones</h2>
+
+        <table>
+            <thead>
+            <tr>
+                <th>Semana</th>
+                <th>Fecha</th>
+                <th>Tratamiento</th>
+                <th>Completada</th>
+            </tr>
+            </thead>
+            <tbody id="sessionsTable"></tbody>
+        </table>
+    </div>
+
+    <div class="card">
+        <h2>Registro semanal de síntomas</h2>
+
+        <table>
+            <thead>
+            <tr>
+                <th>Semana</th>
+                <th>Fatiga</th>
+                <th>Náuseas</th>
+                <th>Dolor</th>
+                <th>Neuropatía</th>
+                <th>Sueño</th>
+                <th>Estado ánimo</th>
+                <th>Observaciones</th>
+            </tr>
+            </thead>
+            <tbody id="symptomsTable"></tbody>
+        </table>
+
+        <small>
+            Escala: 0=nada | 1=leve | 2=moderado | 3=importante |
+            4=muy importante | 5=incapacitante
+        </small>
+    </div>
+
+    <div class="card">
+        <h2>Preguntas para el oncólogo</h2>
+
+        <div id="questions"></div>
+    </div>
+
+    <div class="card">
+        <h2>Notas de consulta</h2>
+        <textarea placeholder="Escribe aquí tus notas..."></textarea>
+    </div>
+
+</div>
+
+<script>
+
+    // Barra de progreso
+    const progress = document.getElementById('progress');
+
+    for(let i=1;i<=12;i++){
+        const item = document.createElement('div');
+        item.className = 'session';
+        item.innerText = i;
+
+        item.addEventListener('click',()=>{
+            item.classList.toggle('completed');
+        });
+
+        progress.appendChild(item);
+    }
+
+    // Calendario de sesiones
+
+    const sessionsTable =
+        document.getElementById('sessionsTable');
+
+    for(let i=1;i<=12;i++){
+
+        sessionsTable.innerHTML += `
+    <tr>
+        <td>${i}</td>
+        <td><input type="date"></td>
+        <td><input type="text" placeholder="Quimioterapia, inmunoterapia..."></td>
+        <td><input type="checkbox"></td>
+    <
\ No newline at end of file